/*
 Theme Name: Pinball
 Template: morenews
 Version: 1.0
*/

/* =========================================================
   SINGLE "TISCH" LAYOUT
   Ziel:
   - Featured Image links (16:9, sauber gecroppt)
   - Datenbox rechts daneben
   - Fließtext startet unter dem Bild (nicht drum herum),
     fließt aber um die rechte Box, solange sie noch reicht
   - Mobil: alles untereinander
========================================================= */

/* 1) Layout-Sicherheit: Floats funktionieren nicht in Flex/Grid.
      MoreNews kann je nach Social-Share-Layout Flex setzen. */
.tisch-single .entry-content-wrap{
  display: block !important;
}

/* 2) Featured Image: links, festes Verhältnis, ohne „Leeraum-Wrapper“ */
.tisch-single .tisch-featured-image{
  float: left;
  width: calc(100% - 340px);  /* Platz für Datenbox (300px) + Abstand */
  max-width: 62%;
  margin: 0 1.5rem 1rem 0;

  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 10px;
}

/* Bild füllt den Container */
.tisch-single .tisch-featured-image img{
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  display: block;
  border-radius: 0; /* Container hat bereits Radius */
}

/* Falls das Theme Pseudo-Elemente fürs Verhältnis nutzt */
.tisch-single .tisch-featured-image::before,
.tisch-single .tisch-featured-image::after{
  content: none !important;
  display: none !important;
}

/* 3) Datenbox: rechts neben dem Bild */
.tisch-single .tisch-infobox{
  float: right;
  width: 300px;
  max-width: 38%;
  margin: 0 0 1rem 1.5rem;
  padding: .65rem .7rem .55rem;

  border: 1px solid #5bedfb;
  border-radius: 10px;
  background: rgba(0,0,0,.25);
  box-shadow: 0 0 12px rgba(91, 237, 251, .35);

  font-size: .85rem;   /* Standardgröße in der Box (dd) */
  line-height: 1.25;
}

/* "Daten" Titel: deutlich größer */
.tisch-single .tisch-infobox-title{
  margin: 0 0 .35rem;
  font-size: 2em;      /* ~2× Standard (dd) */
  line-height: 1.05;
}

/* 4) Innerer Rahmen + kompakte Abstände */
.tisch-single .tisch-infobox .tisch-dl{
  margin: 0;
  padding: .45rem .6rem;

  border: 1px solid #F792D1; /* innerer Rahmen */
  border-radius: 6px;
  box-shadow: 0 0 12px rgba(91, 237, 251, .35);
}

/* Begriffe (dt) = Überschriften wie „Plattform“ */
.tisch-single .tisch-dl dt{
  margin: .35rem 0 0;
  font-weight: 700;
  font-size: 1.5em;   /* 1,5× der Standardgröße (dd) */
  line-height: 1.1;
}
.tisch-single .tisch-dl dt:first-child{
  margin-top: 0;
}

/* Werte (dd) = Standard */
.tisch-single .tisch-dl dd{
  margin: .08rem 0 0;
  padding: 0;
  font-size: 1em;
}
.tisch-single .tisch-dl dd:last-child{
  margin-bottom: 0;
}

/* Links in der Box unauffällig */
.tisch-single .tisch-infobox a{
  text-decoration: none;
}
.tisch-single .tisch-infobox a:hover{
  text-decoration: underline;
}

/* 5) Content-Verhalten:
      - NICHT um das linke Bild laufen -> unter Bild starten
      - aber weiterhin um die rechte Datenbox fließen */
.tisch-single .tisch-content{
  clear: left;
}

/* Manche Themes setzen clear:both auf Überschriften/Sections -> verhindern */
.tisch-single .tisch-content h2,
.tisch-single .tisch-section{
  clear: none !important;
}

/* 6) Floats sauber abschließen */
.tisch-single .entry-content-wrap::after{
  content: "";
  display: block;
  clear: both;
}

/* 7) Responsive: unter 900px alles untereinander */
@media (max-width: 900px){
  .tisch-single .tisch-featured-image,
  .tisch-single .tisch-infobox{
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 0 0 1rem 0;
  }

  .tisch-single .tisch-content{
    clear: both;
  }
}