/* ══ Popup ═══════════════════════════════════════════════════════
   Ein Hinweisfenster über der Seite.

   Das Element liegt IMMER im HTML und wird vom Skript eingeblendet –
   siehe render.php. Deshalb hier keine Regel, die es sichtbar macht:
   [hidden] gilt, bis das Skript es entfernt. */

.lt-pop{
  position:fixed;inset:0;z-index:1200;
  display:flex;align-items:center;justify-content:center;

  /* Oben und unten weniger Rand als seitlich: Er begrenzt, wie hoch
     das Fenster ueberhaupt werden kann. 20 Pixel auf beiden Seiten
     kosteten 40 – bei einem Fenster, das ohnehin an seine
     Hoehengrenze stoesst, sind das zwei Zeilen Inhalt.

     Seitlich bleiben die 20: Dort schadet Rand nicht, er haelt das
     Fenster nur von der Bildschirmkante weg. */
  padding:10px 20px;
}

/* Ohne diese Zeile zeigt der Browser das Element trotz hidden an,
   sobald ein display gesetzt ist – display schlägt hidden. */
.lt-pop[hidden]{display:none}

/* ── Die Fläche dahinter ─────────────────────────────────────────
   Dunkel und leicht verwischt: Der Inhalt bleibt erkennbar, damit
   klar ist, wovor das Fenster steht – lesbar aber nicht mehr, sonst
   liest man weiter statt hinzusehen. */
.lt-pop__grund{
  position:absolute;inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(3px);
  animation:ltPopGrund .2s ease-out;
}

.lt-pop__karte{
  /* Das Polster als Variable, nicht als Zahl.

     Bilder im Text sollen bis an die Kanten laufen und ziehen sich
     dafuer mit negativen Raendern darueber hinaus. Stuende die Zahl
     an beiden Stellen, waere sie beim naechsten Feinschliff an einer
     davon vergessen – und das Bild ragte ueber die Karte hinaus
     oder liesse einen Streifen stehen. */
  --pop-polster:30px;

  /* ── EIN Wert fuer alle waagerechten Abstaende ──────────────

     Ueber der Ueberschrift, unter der Unterzeile, ueber und unter
     dem Knopf: Bisher standen dort vier verschiedene Zahlen, die
     einzeln gewachsen sind. Sichtbar wurde das als ungleiche Luft –
     oben etwas mehr als unten, und um den Knopf wieder anders.

     Mit einer Variablen ist es EIN Wert, der an vier Stellen gilt.
     Wer ihn aendert, aendert alle vier zugleich; ungleich werden
     kann es gar nicht mehr. */
  --pop-luft:16px;

  position:relative;
  /* Breiter als vorher: 520 Pixel sind fuer einen Hinweis mit Bild
     knapp – das Foto wird schmal und der Text bricht nach acht
     Woertern um. 620 lassen dem Bild Flaeche, ohne dass das Fenster
     die Seite dahinter verdeckt.

     min(…, 100%) bleibt: Auf einem schmalen Geraet gilt die
     Bildschirmbreite, nicht der Wunschwert. */
  /* 10 Prozent schmaler.

     Nicht das Bild verkleinern, sondern das Fenster: Das Bild laeuft
     randlos von Kante zu Kante – wird es allein schmaler, steht es
     als Kachel in einem zu breiten Rahmen, und die Aussage "das Bild
     IST der Kopf des Fensters" geht verloren.

     Ueber die Breite schrumpfen beide zugleich, und das Verhaeltnis
     bleibt. 560 statt 620: bei einem 16:9-Foto rund 34 Pixel weniger
     Hoehe. */
  width:min(560px, 100%);

  /* Und hoeher: 80vh liessen auf einem grossen Schirm ein Fenster
     stehen, das kaum halb so hoch war wie der Platz darum. */
  max-height:min(94vh, 900px);
  overflow-y:auto;

  /* --grund und --text, NICHT --bg.

     --bg gibt es auf den Websites nicht – das ist der Name aus dem
     CMS. Der Rueckfall #fff griff deshalb immer, und im dunklen
     Schema stand ein weisses Fenster auf dunkler Seite.

     --grund wechselt mit dem Schema, weil der Hell/Dunkel-Schalter
     genau diese Token umsetzt. */
  background:var(--grund, #fff);
  color:var(--text, #111);
  border-radius:var(--radius, 14px);
  box-shadow:0 24px 60px rgba(0,0,0,.28);
  /* Oben und unten knapper.

     30 und 26 Pixel waren fuer ein kleines Fenster gerechnet. Beim
     groesseren wirkt derselbe Rand wie eine leere Zeile ueber der
     Ueberschrift – der Inhalt beginnt spaet und endet frueh, obwohl
     Platz da ist. Seitlich bleibt der Wert: Dort traegt er den
     Zeilenanfang, und Bilder ziehen sich ohnehin darueber hinaus. */
  /* Nochmals halbiert – siehe Kommentar oben: Was hier oben und
     unten steht, fehlt dem Inhalt. */
  padding:var(--pop-luft) var(--pop-polster);
  animation:ltPopKarte .22s cubic-bezier(.2,.9,.3,1.2);
}

/* ── Der Kopf: Text links, Kreuz rechts ──────────────────────────

   Eine Flexzeile statt eines absolut gesetzten Knopfes. So richtet
   sich das Kreuz an dem aus, was danebensteht – bei einer Zeile
   ebenso wie bei dreien.

   Der Abstand nach unten ist die gemeinsame Luft; frueher trug ihn
   die Unterzeile allein, und ohne sie fiel er weg. */
.lt-pop__kopf{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:var(--pop-luft);
}

/* Der Textblock nimmt den Rest – min-width:0, damit eine lange
   Ueberschrift umbricht statt den Knopf hinauszuschieben. */
.lt-pop__kopftext{flex:1 1 auto;min-width:0}

.lt-pop__titel{
  /* Dicht an die Unterzeile: 2 statt 6 Pixel.

     Ueberschrift und Unterzeile sind ein Gedanke in zwei Zeilen –
     "Unser Grillevent im Dezember / Macht wenig Sinn, aber jede
     Menge Spass". Mit Abstand dazwischen liest man sie als zwei
     Angaben, und das Fenster wird hoeher, ohne dass mehr darin
     steht.

     Rechts bleiben die 34 Pixel: Dort sitzt das Schliesskreuz. */
  margin:0 0 2px;

  font-family:var(--schrift_titel, inherit);
  font-size:clamp(1.25rem, 2.4vw, 1.6rem);

  /* Auch die Zeilenhoehe knapper – bei einem zweizeiligen Titel
     sind 1.25 in einem Fenster mit begrenzter Hoehe zwei verlorene
     Zeilen. */
  line-height:1.18;font-weight:600;
}

.lt-pop__unter{
  /* Kein eigener Abstand nach unten – den traegt der Kopf. */
  margin:0;

  font-size:.95rem;
  line-height:1.35;
  color:color-mix(in srgb, currentColor 68%, transparent);
}

.lt-pop__text{line-height:1.65}

/* ── Ausrichtung ─────────────────────────────────────────────────

   Gilt fuer Ueberschrift, Unterzeile, Text und Knopf zusammen – so,
   wie der Editor es meint: Die Knoepfe im Textwerkzeug richten den
   ganzen Baustein aus, nicht einen Absatz darin.

   Bilder bleiben davon unberuehrt: Sie laufen von Kante zu Kante,
   dort gibt es nichts auszurichten. */
.lt-pop--aus-mitte  .lt-pop__kopftext,
.lt-pop--aus-mitte  .lt-pop__text,
.lt-pop--aus-mitte  .lt-pop__aktion{text-align:center}

.lt-pop--aus-rechts .lt-pop__kopftext,
.lt-pop--aus-rechts .lt-pop__text,
.lt-pop--aus-rechts .lt-pop__aktion{text-align:right}

/* Das Schliesskreuz bleibt rechts – es gehoert zum Fenster, nicht
   zum Text. Bei zentriertem Inhalt saehe es sonst mittig aus. */
.lt-pop--aus-mitte  .lt-pop__kopf,
.lt-pop--aus-rechts .lt-pop__kopf{align-items:center}

/* ── Bilder bis an die Kanten ────────────────────────────────────

   Ein Bild mit Rand links und rechts sieht im Fenster aus wie ein
   eingeklebtes Foto. Ueber die volle Breite gehoert es zur Karte.

   Die Breite ueber calc statt ueber 100vw-Tricks: Der Kasten hat
   eine bekannte Breite, und das Polster steht als Variable daneben –
   damit ist die Rechnung eindeutig und funktioniert auch, wenn das
   Fenster schmaler wird als die Karte.

   display:block, weil ein Bild von Haus aus inline steht: Sonst
   bleibt unter ihm der Platz fuer die Unterlaengen der Zeile, und
   das sieht aus wie ein vergessener Abstand. */
.lt-pop__text img{
  display:block;
  width:calc(100% + 2 * var(--pop-polster));
  max-width:none;
  margin-left:calc(-1 * var(--pop-polster));
  margin-right:calc(-1 * var(--pop-polster));
  height:auto;
}


/* Steht ein Bild ganz oben, uebernimmt es die Rundung der Karte –
   sonst schaut die eckige Bildkante ueber die runde Ecke hinaus.
   Unten dasselbe. */
.lt-pop__text > img:first-child{
  /* Der Ausgleich nach oben ist die LUFT, nicht das seitliche
     Polster: Oben steht --pop-luft, und ein Bild, das mit dem
     seitlichen Wert nach oben zieht, ragt entweder ueber die Karte
     hinaus oder laesst einen Streifen stehen. */
  margin-top:calc(-1 * var(--pop-luft));
  border-radius:var(--radius, 14px) var(--radius, 14px) 0 0;
}
.lt-pop__text > img:last-child{
  margin-bottom:calc(-1 * var(--pop-luft));
  border-radius:0 0 var(--radius, 14px) var(--radius, 14px);
}

/* Bilder in einer <figure> genauso – der Editor setzt sie so, wenn
   eine Bildunterschrift dabei ist. Die Unterschrift behaelt ihren
   Rand, nur das Bild geht bis aussen. */
/* Bilder in einer <figure> genauso – der Editor setzt sie so, wenn
   eine Bildunterschrift dabei ist. Die Unterschrift behaelt ihren
   Rand, nur das Bild geht bis aussen. */
.lt-pop__text figure{
  margin-left:calc(-1 * var(--pop-polster));
  margin-right:calc(-1 * var(--pop-polster));
}
.lt-pop__text figure img{margin-left:0;margin-right:0;width:100%}
.lt-pop__text figcaption{padding:0 var(--pop-polster)}
.lt-pop__text > :first-child{margin-top:0}
.lt-pop__text > :last-child{margin-bottom:0}

.lt-pop__aktion{margin:var(--pop-luft) 0 0}

/* ── Schließen ───────────────────────────────────────────────────
   Oben rechts, weil dort jeder zuerst hinsieht. 40 Pixel Fläche, auch
   wenn das Kreuz kleiner ist: Auf dem Telefon trifft man sonst
   danebeneben und tippt auf den Text. */
.lt-pop__x{
  /* Nicht mehr absolut: Der Knopf steht als letztes Kind der
     Kopfzeile und wird von deren align-items ausgerichtet. */
  flex:0 0 auto;
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  padding:0;border:0;background:none;cursor:pointer;
  border-radius:10px;color:inherit;opacity:.55;
  transition:opacity .12s, background .12s;
}
.lt-pop__x:hover{opacity:1;background:color-mix(in srgb, currentColor 10%, transparent)}
.lt-pop__x:focus-visible{outline:2px solid currentColor;outline-offset:2px;opacity:1}
.lt-pop__x svg{width:19px;height:19px;display:block}

/* ── Kleine Karte unten rechts ───────────────────────────────────
   Für Hinweise, die nicht das ganze Lesen unterbrechen sollen. Ohne
   dunkle Fläche dahinter, dafür kleiner und mit Abstand zum Rand. */
.lt-pop--ecke{
  align-items:flex-end;justify-content:flex-end;
  pointer-events:none;          /* die Seite bleibt bedienbar */
  padding:18px;
}
.lt-pop--ecke .lt-pop__karte{
  /* Die Eckkarte bleibt schmal: Sie steht neben dem Inhalt, nicht
     davor – wird sie breit, verdeckt sie genau das, was man
     weiterlesen soll. Nur der Innenabstand folgt dem mittigen
     Fenster. */
  width:min(380px, 100%);
  --pop-polster:22px;
  --pop-luft:14px;
  padding:var(--pop-luft) var(--pop-polster);
  pointer-events:auto;
  animation:ltPopEcke .24s cubic-bezier(.2,.9,.3,1.2);
}
.lt-pop--ecke .lt-pop__titel{font-size:1.1rem}

/* Im dunklen Schema einen Hauch heller als die Seite, damit sich das
   Fenster ueberhaupt abhebt: Auf fast schwarzem Grund verschwindet
   eine schwarze Karte, und man sieht nur noch Text im Nichts. */
html[data-thema="dunkel"] .lt-pop__karte{
  background:color-mix(in srgb, var(--text) 7%, var(--grund));
  box-shadow:0 24px 60px rgba(0,0,0,.55);
}

@keyframes ltPopGrund{from{opacity:0}to{opacity:1}}
@keyframes ltPopKarte{
  from{opacity:0;transform:translateY(12px) scale(.98)}
  to{opacity:1;transform:none}
}
@keyframes ltPopEcke{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:none}
}

/* Wer Bewegung abgestellt hat, bekommt das Fenster ohne Auffahren –
   ein Popup, das sich bewegt, ist genau die Art Animation, die bei
   Empfindlichkeit stört. */
@media(prefers-reduced-motion:reduce){
  .lt-pop__grund,
  .lt-pop__karte,
  .lt-pop--ecke .lt-pop__karte{animation:none}
}

@media(max-width:560px){
  .lt-pop{padding:14px}
  .lt-pop__karte{--pop-polster:20px;--pop-luft:13px;padding:var(--pop-luft) var(--pop-polster);max-height:90vh}

  /* Auf dem Telefon hat „unten rechts“ keinen Sinn – dort ist die
     Breite ohnehin voll. Die Eckkarte sitzt am unteren Rand. */
  .lt-pop--ecke{padding:12px}
  .lt-pop--ecke .lt-pop__karte{width:100%}
}

/* ══ Umfrage ═════════════════════════════════════════════════════
   Antworten als ganze Flaechen: Auf dem Telefon trifft man ein
   kleines Kaestchen schlecht, eine Zeile ueber die volle Breite
   immer. Die Ausrichtung des Bausteins gilt hier nicht - eine
   zentrierte Antwortliste liest sich wie ein Gedicht. */
.lt-pop__umfrage{transition:opacity .2s ease-out}
.lt-pop__optionen{display:flex;flex-direction:column;gap:8px;margin-top:var(--pop-luft)}
.lt-pop__text + .lt-pop__umfrage .lt-pop__optionen{margin-top:var(--pop-luft)}
.lt-pop__kopf + .lt-pop__umfrage .lt-pop__optionen{margin-top:0}

.lt-pop__option{
  position:relative;
  display:flex;align-items:center;gap:12px;
  padding:11px 14px;
  border:1px solid color-mix(in srgb, currentColor 16%, transparent);
  border-radius:calc(var(--radius, 14px) * .7);
  cursor:pointer;text-align:left;line-height:1.35;
  transition:border-color .12s, background .12s;
}
.lt-pop__option:hover{border-color:color-mix(in srgb, currentColor 34%, transparent)}

/* Das echte Eingabefeld bleibt bedienbar (Tastatur, Vorleser), wird
   aber nicht gezeichnet - die Marke daneben zeigt den Zustand. */
.lt-pop__option input{position:absolute;opacity:0;width:1px;height:1px;margin:0}

.lt-pop__marke{
  flex:0 0 auto;width:18px;height:18px;
  border:2px solid color-mix(in srgb, currentColor 40%, transparent);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .12s, background .12s;
}
.lt-pop__option input[type=checkbox] + .lt-pop__marke{border-radius:5px}
.lt-pop__marke::after{
  content:"";width:8px;height:8px;border-radius:50%;
  background:var(--auf-akzent, #fff);transform:scale(0);transition:transform .12s;
}
.lt-pop__option input[type=checkbox] + .lt-pop__marke::after{
  width:9px;height:5px;border-radius:0;background:none;
  border:solid var(--auf-akzent, #fff);border-width:0 0 2px 2px;
  transform:rotate(-45deg) scale(0);margin-top:-2px;
}
.lt-pop__option input:checked + .lt-pop__marke{background:var(--akzent);border-color:var(--akzent)}
.lt-pop__option input:checked + .lt-pop__marke::after{transform:scale(1)}
.lt-pop__option input[type=checkbox]:checked + .lt-pop__marke::after{transform:rotate(-45deg) scale(1)}
.lt-pop__option:has(input:checked){
  border-color:var(--akzent);
  background:color-mix(in srgb, var(--akzent) 8%, transparent);
}
.lt-pop__option input:focus-visible + .lt-pop__marke{outline:2px solid var(--akzent);outline-offset:2px}

.lt-pop__mehr{margin:8px 0 0;font-size:.82rem;
  color:color-mix(in srgb, currentColor 60%, transparent)}

/* Honigtopf: fuer Menschen weg, fuer Bots ein normales Feld. */
.lt-pop__falle{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}

.lt-pop__stand{margin:10px 0 0;font-size:.88rem;min-height:0}
.lt-pop__stand:empty{display:none}
.lt-pop__stand.schlecht{color:#c0392b}
.lt-pop__stand.gut{color:var(--akzent)}
html[data-thema="dunkel"] .lt-pop__stand.schlecht{color:#ff8a7a}

.lt-pop__umfrage .lt-pop__aktion{text-align:left}
.lt-pop--aus-mitte .lt-pop__umfrage .lt-pop__aktion{text-align:center}
.lt-pop--aus-rechts .lt-pop__umfrage .lt-pop__aktion{text-align:right}
.lt-pop__umfrage .lt-btn[disabled]{opacity:.6;cursor:wait}

.lt-pop__text{transition:opacity .2s ease-out}

/* Danke - wie beim Kontaktformular: mittig, mit Haken. */
.lt-pop__danke{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:.7rem;padding:10px 0 6px;
  opacity:0;transform:translateY(8px);
  transition:opacity .3s ease-out, transform .3s ease-out;
}
.lt-pop__danke.da{opacity:1;transform:none}
.lt-pop__danke[hidden]{display:none}
.lt-pop__danke svg{
  color:var(--akzent);padding:10px;border-radius:50%;box-sizing:content-box;
  background:color-mix(in srgb, var(--akzent) 14%, transparent);
}
.lt-pop__danke h3{margin:0;font-family:var(--schrift_titel, inherit);
  font-size:clamp(1.1rem,2vw,1.3rem);line-height:1.25;font-weight:600}
.lt-pop__danke p{margin:0;line-height:1.6;
  color:color-mix(in srgb, currentColor 76%, transparent)}

@media(prefers-reduced-motion:reduce){
  .lt-pop__umfrage,.lt-pop__text,.lt-pop__danke{transition:none}
  .lt-pop__danke{transform:none}
}

/* Knopf unter der Danke-Meldung - schliesst das Fenster. */
.lt-pop__danke-aktion{margin:.4rem 0 0}

/* ══ Schriftgrößen: Überschrift immer größer als der Text ═════════
   Vorher stand der Titel bei 1.25–1.6rem mit festem Schnitt 600,
   und Überschriften IM Text (h2/h3 aus dem Editor) bekamen die
   Browser-Vorgaben - h2 mit 1.5em im Titelschnitt 700. Ergebnis: Der
   Text wirkte größer als der Titel darüber. In der Eckkarte reichten
   1.1rem gegen 1rem Fließtext ohnehin kaum für einen Unterschied.

   Jetzt eine feste Rangfolge:
     Titel          1.5–2rem   (Ecke 1.35rem)
     h2 im Text     1.25rem    (Ecke 1.12rem)
     h3 im Text     1.1rem     (Ecke 1.02rem)
     h4–h6, p       1rem       (Ecke .95rem)
   Der Titel liegt damit auf jeder Breite über allem im Text. */
.lt-pop__titel{
  font-size:clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  font-weight:var(--schrift_titel_gewicht, 700);
  line-height:1.15;
}
.lt-pop__text{font-size:1rem}
.lt-pop__text h1,
.lt-pop__text h2{font-size:1.25rem;line-height:1.25;margin:1.1em 0 .4em}
.lt-pop__text h3{font-size:1.1rem;line-height:1.3;margin:1em 0 .35em}
.lt-pop__text h4,
.lt-pop__text h5,
.lt-pop__text h6{font-size:1rem;line-height:1.35;margin:.9em 0 .3em}
.lt-pop__text p,
.lt-pop__text li{font-size:1em}
.lt-pop__unter{font-size:1rem}

.lt-pop--ecke .lt-pop__titel{font-size:1.35rem}
.lt-pop--ecke .lt-pop__text{font-size:.95rem}
.lt-pop--ecke .lt-pop__text h1,
.lt-pop--ecke .lt-pop__text h2{font-size:1.12rem}
.lt-pop--ecke .lt-pop__text h3{font-size:1.02rem}
.lt-pop--ecke .lt-pop__text h4,
.lt-pop--ecke .lt-pop__text h5,
.lt-pop--ecke .lt-pop__text h6{font-size:.95rem}
.lt-pop--ecke .lt-pop__unter{font-size:.9rem}

@media(max-width:560px){
  .lt-pop__titel{font-size:1.45rem}
  .lt-pop--ecke .lt-pop__titel{font-size:1.3rem}
}