/* lapippa 2.0 — öffentliche Seiten. Bewusst schlank: keine fremden Schriften,
   keine Bibliotheken, ein einziges Stylesheet. */

*,*::before,*::after { box-sizing:border-box; }
:root {
  --grund:#121212; --flaeche:#1b1b1b; --linie:#2b2b2b;
  --text:#ededed; --leise:#9a9a9a;
  /* Rot direkt aus dem Logo (images/logo/logo.png): dort sind 12.694 Pixel
     reines #ff0000. Kontrast gegen den Seitengrund 4,69:1, gegen die Kacheln
     4,31:1 — reicht für Beschriftungen und Bedienelemente. */
  --akzent:#ff0000;
  /* Für kleinen Text auf dunklem Grund etwas aufgehellt, sonst flimmert reines
     Rot; derselbe Farbton, nur heller. */
  --akzent-hell:#ff5a5a;
}
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--grund); color:var(--text);
  font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }

.kopf {
  display:flex; align-items:center; gap:26px; flex-wrap:wrap;
  padding:14px 20px; border-bottom:1px solid var(--linie); background:var(--flaeche);
}
.marke { display:flex; align-items:center; }
.marke img { height:46px; width:auto; display:block; }
@media (max-width:560px) { .marke img { height:34px; } }
.menue { display:flex; gap:20px; font-size:15px; }
.menue a { color:var(--leise); }
.menue a:hover { color:var(--text); }

/* Gleiche Breite und Zentrierung wie der Inhalt, sonst kleben die Krumen
   bei breiten Fenstern am linken Rand. */
.krumen {
  max-width:1360px; margin:0 auto; padding:12px 20px 0;
  font-size:13px; color:var(--leise); display:flex; gap:7px; flex-wrap:wrap;
}
.krumen a:hover { color:var(--text); text-decoration:underline; }

.inhalt { max-width:1360px; margin:0 auto; padding:18px 20px 50px; }
h1 { font-size:23px; margin:14px 0 6px; line-height:1.25; }
h2 { font-size:18px; margin:34px 0 12px; }
.zahl { color:var(--leise); font-size:14px; margin:0 0 16px; }
.zahl a { color:var(--akzent-hell); }
.leer { color:var(--leise); padding:30px 0; }
.mehr { margin:22px 0 0; }
.mehr a { color:var(--akzent-hell); font-size:15px; }

/* Kachelraster */
.raster { display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); }
.kachel { display:flex; flex-direction:column; gap:7px; }
.kachel .bild { position:relative; display:block; border-radius:8px; overflow:hidden; background:#000; aspect-ratio:16/9; }
.kachel .bild img { width:100%; height:100%; object-fit:cover; transition:transform .18s ease; }
.kachel:hover .bild img { transform:scale(1.04); }
.kachel .dauer {
  position:absolute; right:7px; bottom:7px; background:rgba(0,0,0,.82); color:#fff;
  font-size:11.5px; font-variant-numeric:tabular-nums; padding:2px 6px; border-radius:4px;
}
.kachel .titel { font-size:14px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.kachel:hover .titel { color:var(--akzent-hell); }
.kachel .meta { font-size:12px; color:var(--leise); }

/* Kategorien */
.katliste { display:grid; gap:9px; grid-template-columns:repeat(auto-fill,minmax(184px,1fr)); }
.katliste a {
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  background:var(--flaeche); border:1px solid var(--linie); border-radius:8px;
  padding:10px 13px; font-size:14.5px;
}
.katliste a:hover { border-color:var(--akzent); color:var(--akzent-hell); }
.katliste b { color:var(--leise); font-weight:600; font-size:12.5px; font-variant-numeric:tabular-nums; }
.katliste a:hover b { color:var(--akzent-hell); }

/* Videoseite */
.buehne { background:#000; border-radius:10px; overflow:hidden; aspect-ratio:16/9; margin-top:6px; }
.buehne iframe { width:100%; height:100%; border:0; display:block; }

/* Begriffe */
.tagliste { display:flex; flex-wrap:wrap; gap:7px; }
.tagliste span {
  background:var(--flaeche); border:1px solid var(--linie); border-radius:99px;
  padding:4px 11px; font-size:12.5px; color:var(--leise);
}

/* Blättern */
.blaettern { display:flex; gap:7px; flex-wrap:wrap; margin:26px 0 0; }
.blaettern a, .blaettern span {
  min-width:38px; text-align:center; padding:7px 12px; border-radius:7px;
  border:1px solid var(--linie); background:var(--flaeche); font-size:14px;
}
.blaettern a:hover { border-color:var(--akzent); color:var(--akzent-hell); }
.blaettern .jetzt { background:var(--akzent); border-color:var(--akzent); color:#fff; font-weight:700; }

.fuss {
  border-top:1px solid var(--linie); padding:20px; margin-top:40px;
  color:var(--leise); font-size:13px; display:flex; gap:18px; flex-wrap:wrap;
}
.fuss .hinweis { color:#7a7a7a; }

@media (max-width:560px) {
  .inhalt { padding:14px 14px 40px; }
  .raster { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
  h1 { font-size:19px; }
}

/* Frei pflegbarer Text auf Kategorie- und Tag-Seiten (Tabelle v2_texte) */
.freitext {
  background:var(--flaeche); border:1px solid var(--linie); border-left:3px solid var(--akzent);
  border-radius:8px; padding:15px 18px; margin:0 0 20px; font-size:15px; line-height:1.65;
  color:#d6d6d6;
}
/* Der Text unter der Liste ist der ausführliche — etwas mehr Luft. */
.freitext.unten { margin:30px 0 0; padding:18px 20px; }
.freitext h2 { font-size:17px; margin:0 0 10px; color:var(--text); }
.freitext a { color:var(--akzent-hell); text-decoration:underline; text-underline-offset:2px; }
.freitext a:hover { color:var(--akzent); }
.freitext ul { margin:0 0 10px; padding-left:20px; }
.freitext p { margin:0 0 10px; }
.freitext p:last-child { margin-bottom:0; }
.freitext strong { color:var(--text); }

/* ── Werbeplätze ───────────────────────────────────────────────────────────
   Die Maße kommen je Platz als Variablen aus PHP (--wp-b / --wp-h), damit im
   Stylesheet keine zweite Wahrheit über die Formate entsteht.
   Gerätetrennung über Sichtbarkeit, nicht über Browser-Erkennung — die Seiten
   dürfen zwischengespeichert werden, eine serverseitige Weiche lieferte sonst
   irgendwann die falsche Fassung aus (Begründung in lib/werbeplaetze.php). */
.wp { display:flex; justify-content:center; line-height:0; }
.wp > * { max-width:100%; }
.wp-reihe { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; align-items:flex-start; }
.wp-oben { max-width:1360px; margin:14px auto 0; padding:0 20px; }
.wp-leer {
  display:flex; align-items:center; justify-content:center; text-align:center;
  width:var(--wp-b); height:var(--wp-h); max-width:100%;
  border:1px dashed var(--linie); border-radius:6px;
  color:var(--leise); font-size:12px; line-height:1.3;
}
/* Der mobile Block am Ende des Inhalts steht allein und braucht eigenen Abstand;
   in der oberen Reihe sorgt schon das gap dafür. */
.wp-mobil { display:none; margin:20px auto 0; }
.wp-reihe .wp-mobil { margin:0; }
@media (max-width:760px) {
  .wp-desktop { display:none; }
  .wp-mobil { display:flex; }
}

/* Filmseite: Player und Werbespalte in einer Reihe. Unter 1100 px fällt die
   Spalte weg — darunter bliebe für den Film zu wenig Breite. */
.film-reihe { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:18px; align-items:start; }
.film-reihe.ohne-spalte { grid-template-columns:minmax(0,1fr); }
.film-spalte { display:flex; flex-direction:column; gap:14px; }
@media (max-width:1100px) {
  .film-reihe { grid-template-columns:minmax(0,1fr); }
  .film-spalte { display:none; }
}

/* Vorschalter vor dem Film — nur auf lapippas eigener Filmseite, nicht im
   Player (der läuft in den 20 Tubes und hat dort seine eigene Werbung).
   Die Fläche liegt über dem Rahmen; der Embed bekommt seine Adresse erst,
   wenn „Weiter zum Video" geklickt ist. */
.buehne { position:relative; }
.vorschalt {
  position:absolute; inset:0; z-index:3;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.86); padding:14px;
}
.vorschalt-box { display:flex; flex-direction:column; align-items:center; gap:14px; max-width:100%; }
.vorschalt-weiter {
  border:0; border-radius:7px; cursor:pointer;
  background:var(--akzent); color:#fff;
  font:600 15px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  padding:12px 20px;
}
.vorschalt-weiter:hover { background:var(--akzent-hell); }
.vorschalt-weiter:focus-visible { outline:2px solid #fff; outline-offset:2px; }

/* Werbeblöcke, die als eigener Abschnitt im Inhalt stehen (block_desktop an den
   Abschnittsgrenzen, dazu der mobile Block am Ende) brauchen Luft nach oben und
   unten. Die Reihe oben regelt ihren Abstand selbst. */
.inhalt > .wp { margin:24px auto; }

/* Werbecodes bringen oft eine feste Reihe mit (der Block im Inhalt sind drei
   Banner nebeneinander, zusammen 930 px). Zwischen 760 und 950 px Fensterbreite
   liefe die Reihe aus ihrem Kasten heraus und schöbe die ganze Seite zur Seite.
   `flex-wrap` wirkt nur auf Flex-Container und ist überall sonst wirkungslos —
   deshalb genügt diese eine Zeile, ohne den fremden Code anzufassen. */
.wp div { flex-wrap:wrap; }