/* ---------------------------------------------------------------
   Farbwechsel Stand 2. Oktober: Schwarz + Limette statt Brickrot, derselbe
   Wechsel wie auf der Startseite (index.html), damit Impressum, Widerruf,
   AGB, Ergebnisse und die Blog-Artikel zum selben Bild passen. Carina zum
   Kino-Foto-Branding: "Andere Bilder oder keine Bilder also einfach das
   was rot war schwarz und für Effekt das Limetten" — auf die Frage, ob
   das auch für die Unterseiten gelten soll: "Ja."

     Grund dunkel   #0A0A0A     Grund hell  #F2EFEA
     Schrift hell   #F2EFEA     Tinte       #121212
     Papier (hell)  #EFEDE7     Akzent (Limette) #D4E85A

   Die Farbe steckt ausschliesslich in den FLAECHEN — kein Foto ist
   eingefaerbt, keins hat einen Farbfilter. Der Schleier ueber den
   Hintergrundfotos bleibt bewusst neutral (rgba(11,12,13,...)), sonst
   waere er eine Tonung.

     Montserrat     einzige Schrift, fuer Ueberschriften wie Text.
                    Ein Font-File deckt alle vier Schnitte ab (Google
                    liefert Montserrat variabel), selbst gehostet.

   Keine Farbe ausser diesen. Limette nur als Akzent (Etiketten, Links),
   kein Kasten, kein Rahmen.
   --------------------------------------------------------------- */
@font-face{font-family:'Montserrat';src:url('/fonts/Montserrat.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('/fonts/Montserrat.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('/fonts/Montserrat.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('/fonts/Montserrat.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('/fonts/PlayfairDisplay-Regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('/fonts/PlayfairDisplay-Italic.woff2') format('woff2');
  font-weight:400;font-style:italic;font-display:swap}

:root{
  --schwarz:#0A0A0A;
  --tiefer:#141414;
  --weiss:#F2EFEA;
  --papier:#EFEDE7;
  --tinte:#121212;
  --akzent:#D4E85A;
  --akzent-h:#6B7A1A;

  --auf-schwarz:rgba(242,239,234,.80);
  --leise-d:rgba(242,239,234,.54);
  --linie-d:rgba(212,232,90,.18);
  --auf-weiss:rgba(18,18,18,.82);
  --leise-h:rgba(18,18,18,.56);
  --linie-h:rgba(18,18,18,.15);

  --linie:var(--linie-d);
  --text2:var(--auf-schwarz);
  --leise:var(--leise-d);

  --serif:'Playfair Display',Georgia,"Times New Roman",serif;
  --sans:'Montserrat',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --hand:var(--sans);
  --rand:clamp(20px,5vw,60px);
  --luft:clamp(34px,5vh,64px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--schwarz);color:var(--weiss);
  font:400 17px/1.68 var(--sans);-webkit-font-smoothing:antialiased;
  overflow-x:hidden;font-synthesis:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
em{font-style:italic}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

.wrap{width:min(1120px,100%);margin:0 auto;padding:0 var(--rand)}
section{padding:var(--luft) 0}
.hell{background:var(--weiss);color:var(--tinte);
  --linie:var(--linie-h);--text2:var(--auf-weiss);--leise:var(--leise-h)}
.warm{background:var(--papier);color:var(--tinte);
  --linie:var(--linie-h);--text2:var(--auf-weiss);--leise:var(--leise-h)}

/* ---------- Schrift ---------- */
h1,h2{font-family:var(--serif);font-weight:400;font-style:italic;margin:0;
  letter-spacing:0;text-wrap:balance;overflow-wrap:break-word}
h1{font-size:clamp(2.3rem,5.8vw,3.6rem);line-height:1.22}
h2{font-size:clamp(2rem,4.6vw,2.8rem);line-height:1.26}
h3{font-family:var(--serif);font-weight:400;font-style:italic;margin:0;
  font-size:1.4rem;line-height:1.3;letter-spacing:0;text-wrap:balance}
p{margin:0}
.lead{font-size:1rem;line-height:1.72;color:var(--text2);max-width:60ch}
.klein{font-size:.82rem;line-height:1.65;color:var(--leise)}

/* Die winzige gesperrte Zeile ueber der Ueberschrift — wie im Check.
   Kleinbuchstaben, SemiBold, weit gesperrt, kein Kasten. */
.marke{display:block;font-family:var(--sans);font-weight:600;
  font-size:.66rem;line-height:1.4;letter-spacing:.3em;
  text-transform:uppercase;color:var(--akzent);margin-bottom:20px}

/* Die Handschrift. Genau eine Zeile, direkt unter der Ueberschrift. */
.hand{font-family:var(--hand);font-weight:400;
  font-size:clamp(1.15rem,2.5vw,1.5rem);line-height:1.5;
  color:var(--text2);max-width:34ch;margin-top:16px}

.btn{display:inline-block;background:var(--weiss);color:var(--schwarz);
  font-family:var(--sans);font-weight:600;font-size:.76rem;line-height:1.2;
  letter-spacing:.05em;text-transform:uppercase;padding:1em 1.6em;border:1px solid var(--weiss);
  text-decoration:none;cursor:pointer;
  transition:background .18s ease,color .18s ease}
.btn:hover{background:transparent;color:var(--weiss)}
.btn.leer{background:transparent;color:inherit;border-color:currentColor}
.btn.leer:hover{background:currentColor;color:var(--schwarz)}
.hell .btn,.warm .btn{background:var(--tinte);color:var(--weiss);border-color:var(--tinte)}
.hell .btn:hover,.warm .btn:hover{background:transparent;color:var(--tinte)}
.hell .btn.leer,.warm .btn.leer{background:transparent;color:var(--tinte)}
.hell .btn.leer:hover,.warm .btn.leer:hover{background:var(--tinte);color:var(--weiss)}
.knopfreihe{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:30px}
.still{color:var(--leise);font-size:.84rem;text-decoration:none;
  border-bottom:1px solid var(--linie);padding-bottom:3px}
.still:hover{color:inherit;border-bottom-color:currentColor}

/* ---------- Kopfzeile ---------- */
.nav{position:sticky;top:0;z-index:40;background:var(--schwarz);
  border-bottom:1px solid var(--linie)}
.nav .innen{display:flex;align-items:center;gap:18px;padding-top:16px;padding-bottom:16px}
.nav .logo{font-family:var(--sans);font-weight:600;font-size:.72rem;
  letter-spacing:.28em;text-transform:lowercase;text-decoration:none;white-space:nowrap}
.nav ul{list-style:none;display:flex;gap:22px;margin:0 auto 0 30px;padding:0}
.nav .punkt{font-size:.84rem;color:var(--leise);text-decoration:none}
.nav .punkt:hover{color:var(--weiss)}
.nav .btn{padding:.62em 1em;font-size:.76rem;white-space:nowrap}
.menu{display:none;background:none;border:1px solid var(--linie);color:inherit;
  font:400 .82rem var(--sans);padding:.55em .9em;cursor:pointer}
@media (max-width:880px){
  .nav ul{position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;
    background:var(--schwarz);border-bottom:1px solid var(--linie);
    margin:0;padding:6px 0;display:none}
  .nav ul.offen{display:flex}
  .nav .punkt{display:block;padding:13px var(--rand)}
  .menu{display:inline-block;margin-left:auto}
  .nav .btn{padding:.6em .85em;font-size:.72rem}
}

/* ---------- Aufmacher: Bild mit Text darauf, wie das Titelblatt ---------- */
.hero{position:relative;isolation:isolate;min-height:min(92vh,820px);
  display:flex;align-items:flex-end;padding:0 0 clamp(48px,8vh,90px)}
.hero-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:52% 26%;filter:contrast(1.06) brightness(.88);z-index:-2}
/* Vignette und Fuss wie auf dem Titelblatt: aussen dunkel, unten satt. */
.hero-schleier{position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(120% 88% at 50% 34%,rgba(11,12,13,0) 38%,rgba(11,12,13,.92) 100%),
    linear-gradient(180deg,rgba(11,12,13,.42) 0%,rgba(11,12,13,.10) 30%,
      rgba(11,12,13,.72) 76%,var(--schwarz) 100%)}
.hero h1{max-width:17ch}
.hero .hand{max-width:38ch}
@media (max-width:760px){.hero-foto{object-position:52% 22%}}

/* ---------- Foto hinter einem dunklen Abschnitt ----------
   Bricht das Schwarz auf, ohne den Text anzugreifen. Zwei Regeln:
   1. Kein Gesicht unter dem Text — der Text laeuft hier ueber die volle
      Breite, also nur Motive ohne Portraet in der Mitte.
   2. Der Schleier laeuft oben und unten satt ins Schwarz, damit die
      Kante zum Nachbarabschnitt nicht sichtbar wird.
   --d steuert den Schleier am Rechner, --dm auf dem Handy, wo der Text
   die volle Breite belegt. Je heller das Bild, desto hoeher. */
.mitfoto{position:relative;isolation:isolate;overflow:hidden;--d:.52;--dm:.66;
  /* Ueber einem Foto darf der Text nicht so leise sein wie auf reinem
     Schwarz — sonst faellt der Kontrast unter das Lesbare. */
  --text2:rgba(244,234,217,.94);--leise:rgba(244,234,217,.76)}
.mitfoto>.grund{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;filter:contrast(1.05) brightness(.8);z-index:-2}
.mitfoto::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,var(--schwarz) 0%,
    rgba(11,12,13,var(--d)) 13%,rgba(11,12,13,var(--d)) 87%,var(--schwarz) 100%)}
.mitfoto .grund.hoch{object-position:50% 18%}
.mitfoto .grund.tief{object-position:50% 74%}
/* Flaeche statt Motiv: Beton, Stoff, Rauch. Kein Mensch drauf, also kann
   auch kein Gesicht unter den Text geraten — und deshalb darf sie viel
   heller stehen als ein Foto. */
@media (max-width:760px){
  .mitfoto::before{background:linear-gradient(180deg,var(--schwarz) 0%,
    rgba(11,12,13,var(--dm)) 10%,rgba(11,12,13,var(--dm)) 90%,var(--schwarz) 100%)}
}

/* Auf dem Handy zaehlt jeder Bildschirm: Portraits quadratisch statt 3:4,
   und der Schlussabschnitt kommt ohne Bild aus. */
@media (max-width:760px){
  .bild img{aspect-ratio:1/1}
  #schluss .bild{display:none}
}

/* ---------- Laufband ---------- */
.laufband{overflow:hidden;background:var(--tiefer);padding:16px 0 20px;
  border-block:1px solid var(--linie)}
.laufband .spur{display:flex;width:max-content;animation:lauf 38s linear infinite}
.laufband span{font-family:var(--serif);font-weight:600;
  font-size:clamp(2rem,6vw,3.8rem);line-height:1;letter-spacing:-.02em;
  white-space:nowrap;color:var(--weiss);padding-right:.4em}
@keyframes lauf{from{transform:translateX(0)}to{transform:translateX(-33.333%)}}
@media (prefers-reduced-motion:reduce){.laufband .spur{animation:none}}

.aussage{font-family:var(--serif);font-weight:600;
  font-size:clamp(1.6rem,3.9vw,2.5rem);line-height:1.2;letter-spacing:-.016em;
  max-width:24ch;margin:0}

/* ---------- Zweispalter ---------- */
.zwei{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(30px,5vw,70px);align-items:center}
@media (max-width:900px){.zwei{grid-template-columns:minmax(0,1fr)}}
.bild img{width:100%;aspect-ratio:3/4;object-fit:cover;
  filter:contrast(1.06)}

/* ---------- Die vier Saeulen ---------- */
.etappen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(24px,3.4vw,44px);margin-top:44px}
@media (max-width:760px){.etappen{grid-template-columns:minmax(0,1fr)}}
.etappe{border-top:1px solid var(--linie);padding-top:18px;min-width:0}
.etappe .nr{display:block;font:600 .64rem/1 var(--sans);letter-spacing:.3em;
  text-transform:lowercase;color:var(--leise);margin-bottom:12px}
.etappe h3{margin-bottom:10px}
.etappe .lead{font-size:.93rem;line-height:1.68}

/* ---------- Anmeldung ---------- */
.eintrag{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;max-width:620px}
.eintrag input,.eintrag select{flex:1 1 190px;min-width:0;background:transparent;
  color:inherit;border:1px solid var(--linie);
  font:400 .95rem var(--sans);padding:.95em 1em}
.eintrag select{flex:1 1 100%}
.eintrag input::placeholder{color:var(--leise)}
.eintrag .btn{flex:0 0 auto}
.eintrag.done{opacity:.5;pointer-events:none}
.msg{margin-top:14px;font-size:.88rem;min-height:1.2em}
.msg.ok{color:inherit}
.msg.err{color:#E0A18E}
.hell .msg.err,.warm .msg.err{color:#9A3B22}
@media (max-width:520px){.eintrag input,.eintrag .btn{flex:1 1 100%;text-align:center}}

/* ---------- Angebote ---------- */
.karten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.4vw,26px);margin-top:44px}
@media (max-width:1000px){.karten{grid-template-columns:minmax(0,1fr)}}
.karte{border:1px solid var(--linie);padding:30px 26px 28px;
  display:flex;flex-direction:column;min-width:0}
.karte.haupt{border-color:currentColor}
/* Zwei Wege laufen ueber Anfrage. Sie stehen leiser als der eine,
   den man direkt kaufen kann — schmalere Polsterung, kleinere Zahl. */
.karte.schmal{padding:24px 22px 22px}
.karte.schmal h3{margin:12px 0 10px;font-size:1.35rem}
.karte.schmal .preis{font-size:1.8rem}
.karte.schmal ul{margin-top:16px}
.karte .oben{display:flex;align-items:center;justify-content:space-between;gap:10px}
.karte .typ{font:600 .64rem/1 var(--sans);letter-spacing:.3em;
  text-transform:lowercase;color:var(--leise)}
.karte .fahne{font:600 .64rem/1 var(--sans);letter-spacing:.3em;
  text-transform:lowercase;color:var(--leise)}
.karte h3{margin:16px 0 14px;font-size:1.6rem}
.karte .preis{font-family:var(--serif);font-weight:600;font-size:2.3rem;
  line-height:1.06;letter-spacing:-.022em}
.karte .preis small{display:block;font-family:var(--sans);font-weight:400;
  font-size:.78rem;line-height:1.62;color:var(--leise);margin-top:10px;letter-spacing:0}
.karte ul{list-style:none;margin:22px 0 0;padding:0;flex:1}
.karte li{padding:11px 0;border-top:1px solid var(--linie);
  font-size:.89rem;line-height:1.6;color:var(--text2)}
.rechtlich{font-size:.72rem;line-height:1.62;color:var(--leise);margin-top:20px}
.rechtlich a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.karte .btn{margin-top:22px;text-align:center}
.karte .rechtlich+.btn{margin-top:14px}

/* ---------- Belege ---------- */
.belege{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,2.8vw,34px);margin-top:40px}
@media (max-width:820px){.belege{grid-template-columns:minmax(0,1fr)}}
.beleg{border-top:1px solid var(--linie);padding-top:18px;min-width:0}
.beleg b{display:block;font-family:var(--serif);font-weight:600;
  font-size:clamp(1.4rem,2.8vw,1.8rem);line-height:1.14;letter-spacing:-.018em;
  margin-bottom:10px}
.beleg span{display:block;font-size:.88rem;line-height:1.62;color:var(--text2)}

/* ---------- Passt das ---------- */
.fuer{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(24px,4vw,56px);margin-top:40px}
@media (max-width:760px){.fuer{grid-template-columns:minmax(0,1fr)}}
.sp ul{list-style:none;margin:20px 0 0;padding:0}
.sp li{padding:12px 0;border-top:1px solid var(--linie);
  font-size:.92rem;line-height:1.6;color:var(--text2)}
.sp.nicht li{color:var(--leise)}

/* ---------- Fragen ---------- */
.fragen details{border-top:1px solid var(--linie)}
.fragen details:last-of-type{border-bottom:1px solid var(--linie)}
.fragen summary{list-style:none;cursor:pointer;padding:22px 0;
  font-family:var(--serif);font-weight:600;font-size:1.16rem;line-height:1.34;
  letter-spacing:-.01em;display:flex;gap:16px;align-items:baseline}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"+";margin-left:auto;color:var(--leise);
  font-family:var(--sans);font-weight:400;font-size:1.1rem}
.fragen details[open] summary::after{content:"–"}
.fragen .antwort{padding:0 0 22px;font-size:.93rem;line-height:1.75;
  color:var(--text2);max-width:64ch}
.fragen .antwort a{color:inherit}

/* ---------- Fusszeile ---------- */
footer{background:var(--tiefer);border-top:1px solid var(--linie);padding:44px 0 50px}
footer .innen{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;
  align-items:flex-start}
footer nav{display:flex;flex-wrap:wrap;gap:20px}
footer a{color:var(--leise);font-size:.82rem;text-decoration:none}
footer a:hover{color:var(--weiss)}
footer .rechts{font-size:.76rem;color:var(--leise);max-width:36ch}

@media (max-width:520px){
  body{font-size:16px}
  .btn{font-size:.79rem;padding:.9em 1.2em}
  .knopfreihe{gap:10px;margin-top:24px}
  .knopfreihe .btn{flex:1 1 100%;text-align:center}
  .karte{padding:24px 20px 22px}
  .karte h3{font-size:1.36rem}
  .karte .preis{font-size:1.8rem}
  .fragen summary{font-size:1.04rem;padding:18px 0}
  .marke{letter-spacing:.28em}
  /* Auf schmalen Schirmen wird die Kopfzeile sonst um wenige Pixel zu breit */
  .nav .innen{gap:10px}
  .nav .logo{font-size:.66rem;letter-spacing:.18em}
  .nav .btn{padding:.58em .7em;font-size:.68rem}
  .menu{padding:.5em .7em;font-size:.76rem}
}


/* ================================================================
   Unterseiten: Rechtstexte, Artikel, Uebersicht.
   Sie laufen auf demselben System — weisser Grund wie die
   Innenseiten des Checks, dieselben drei Schriften.
   ================================================================ */

body.seite{background:var(--weiss);color:var(--tinte);
  --linie:var(--linie-h);--text2:var(--auf-weiss);--leise:var(--leise-h);
  --akzent:var(--akzent-h)}

/* Kopfzeile der Unterseiten */
.top{border-bottom:1px solid var(--linie);padding:18px 0}
.top .innen{display:flex;justify-content:space-between;align-items:center;gap:18px}
.marke-wort{font-family:var(--sans);font-weight:600;font-size:.7rem;
  letter-spacing:.28em;text-transform:lowercase;text-decoration:none}
.zurueck{font-size:.82rem;color:var(--leise);text-decoration:none}
.zurueck:hover{color:var(--tinte)}

/* Textseiten */
.blatt{width:min(720px,100%);margin:0 auto;padding:0 var(--rand)}
main{padding:clamp(48px,8vh,86px) 0 clamp(56px,9vh,96px)}
main h1{margin-bottom:8px}
main h2{font-size:clamp(1.3rem,3vw,1.65rem);line-height:1.24;margin:40px 0 10px}
main h3{font-size:1.02rem;margin:26px 0 6px}
main p{margin-top:.9em;color:var(--text2);font-size:.96rem;line-height:1.75}
main ul,main ol{margin:.9em 0 0;padding-left:1.2em;color:var(--text2);
  font-size:.96rem;line-height:1.75}
main li{margin-top:.4em}
main a{color:inherit;text-decoration:underline;text-underline-offset:2px}
main strong,main b{font-weight:500}
.stand{margin-top:34px;font-size:.78rem;color:var(--leise)}

/* Hervorgehobener Absatz in den Rechtstexten */
.kasten{border-left:2px solid var(--tinte);padding:2px 0 2px 20px;margin-top:22px}
.kasten p:first-child{margin-top:0}
.formular{border:1px solid var(--linie);padding:24px 26px;margin-top:26px;
  font-size:.92rem;overflow-wrap:anywhere}
.formular h3{margin-top:0}

/* Artikel */
article .reihe{display:block;font-family:var(--sans);font-weight:600;font-size:.66rem;
  letter-spacing:.3em;text-transform:lowercase;color:var(--leise);margin-bottom:16px}
article .lead{font-size:1.06rem;line-height:1.7;color:var(--text2);margin-top:14px}
figure.bild{margin:36px 0}
figure.bild img{width:100%;height:auto;filter:contrast(1.06)}
figure.bild figcaption{font-size:.78rem;color:var(--leise);margin-top:10px}
.autorzeile{display:flex;align-items:center;gap:14px;margin-top:48px;padding-top:24px;
  border-top:1px solid var(--linie);font-size:.84rem;color:var(--leise)}
.autorzeile img{width:52px;height:52px;object-fit:cover;border-radius:50%;
  filter:contrast(1.06)}
.autorzeile b{display:block;font-weight:500;color:var(--tinte)}

/* Der Angebotskasten unter und im Artikel */
.angebot{border:1px solid var(--linie);padding:28px 26px;margin:40px 0}
.angebot .reihe{margin-bottom:14px}
.angebot .titel{font-family:var(--serif);font-weight:600;
  font-size:clamp(1.3rem,3vw,1.7rem);line-height:1.2;letter-spacing:-.014em}
.angebot p{font-size:.92rem}
.angebot .btn{margin-top:20px}
.frueh{display:grid;grid-template-columns:104px 1fr;gap:20px;align-items:center;
  border:1px solid var(--linie);padding:20px;margin:32px 0;text-decoration:none;color:inherit}
.frueh:hover{border-color:var(--tinte)}
.frueh img{width:100%;height:auto}
.frueh .titel{font-family:var(--serif);font-weight:600;font-size:1.1rem;line-height:1.24}
.frueh p{font-size:.85rem;color:var(--text2);margin-top:6px;line-height:1.6}
.frueh .knopfwort{display:inline-block;margin-top:10px;font-family:var(--sans);
  font-weight:600;font-size:.66rem;letter-spacing:.3em;text-transform:lowercase}
@media (max-width:560px){.frueh{grid-template-columns:1fr}.frueh img{max-width:120px}}

/* Uebersicht der Artikel */
.liste{margin-top:40px}
.liste a{display:block;border-top:1px solid var(--linie);padding:22px 0;text-decoration:none;color:inherit}
.liste a:last-child{border-bottom:1px solid var(--linie)}
.liste .datum{display:block;font-family:var(--sans);font-weight:600;font-size:.64rem;
  letter-spacing:.28em;text-transform:lowercase;color:var(--leise);margin-bottom:8px}
.liste .titel{font-family:var(--serif);font-weight:600;font-size:1.24rem;
  line-height:1.24;letter-spacing:-.012em}
.liste p{font-size:.88rem;color:var(--text2);margin-top:6px;line-height:1.6}
.liste a:hover .titel{text-decoration:underline;text-underline-offset:3px}

/* Fusszeile der Unterseiten */
.fuss{background:var(--tiefer);color:var(--weiss);padding:40px 0;margin-top:0}
.fuss .innen{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between}
.fuss a{color:rgba(244,234,217,.55);font-size:.8rem;text-decoration:none}
.fuss a:hover{color:var(--weiss)}
.fuss nav{display:flex;flex-wrap:wrap;gap:18px}
.fuss .rechts{font-size:.76rem;color:rgba(244,234,217,.55)}

/* Die Wand aus Rueckmeldungen auf der Ergebnisseite */
.wolke{columns:3 260px;column-gap:14px;margin-top:36px}
.kachel{break-inside:avoid;margin:0 0 14px;padding:0;transform:rotate(var(--dreh))}
/* Die Kacheln sind Bildschirmfotos echter Nachrichten. Sie wirken als Beleg,
   WEIL sie wie Bildschirmfotos aussehen — entsaettigt sehen sie gestaltet aus.
   Deshalb hier kein Filter, auch keine Abschwaechung. */
.kachel img{width:100%;display:block}
@media (max-width:820px){.wolke{columns:2 170px;column-gap:10px}.kachel{margin-bottom:10px}}
@media (max-width:560px){.wolke{columns:1;column-gap:0}.kachel{margin-bottom:12px;transform:none}}

/* Zahlenraster auf der Ergebnisseite */
.zahlen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,2.8vw,34px);margin-top:40px}
@media (max-width:820px){.zahlen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.zahlen{grid-template-columns:minmax(0,1fr)}}
.z{border-top:1px solid var(--linie);padding-top:18px;min-width:0}
.z b{display:block;font-family:var(--serif);font-weight:600;
  font-size:clamp(1.35rem,2.6vw,1.7rem);line-height:1.14;letter-spacing:-.018em;margin-bottom:10px}
.z span{display:block;font-size:.88rem;line-height:1.62;color:var(--text2)}


/* 6. Oktober 2026: Unterseiten dunkel wie die neue Startseite (Carina: "Ja"). Gruen sanfter (#CCDE90). */
body.seite{background:#0A0A0A;color:#F2EFEA;--linie:rgba(242,239,234,.12);--text2:var(--auf-schwarz);--leise:var(--leise-d);--akzent:#CCDE90}
body.seite .hell,body.seite .warm{background:#141414;color:#F2EFEA;--linie:rgba(242,239,234,.12);--text2:var(--auf-schwarz);--leise:var(--leise-d)}
body.seite h1,body.seite h2,body.seite h3,body.seite strong{color:#F2EFEA}
body.seite a{color:#CCDE90}


/* Braun wie Startseite und Quiz (7. Oktober 2026): Unterseiten in denselben Farben.
   Grund #19140F, Flaechen #221C16, Schrift #F2EAE0, Akzent Rot #C96057. */
body.seite{background:#19140F;color:#F2EAE0;--linie:rgba(242,234,224,.16);--akzent:#C96057}
body.seite .hell,body.seite .warm{background:#221C16;color:#F2EAE0}
body.seite .fuss{background:#150F0B;color:#F2EAE0}
body.seite h1,body.seite h2,body.seite h3,body.seite strong{color:#F2EAE0}
body.seite a,body.seite .marke,body.seite a.marke-wort,body.seite a.zurueck{color:#C96057}


/* 16. Oktober 2026: Editorial Monochrom wie die neue Startseite (Vorbild thebrandboutique.at, Carina: "Ja").
   Grund #FFFFFF, Flaechen #F6F4F1, Schrift #141414, Akzent Cognac #9E5A2C. */
body.seite{background:#FFFFFF;color:#141414;--linie:rgba(20,20,20,.14);--text2:rgba(20,20,20,.72);--leise:rgba(20,20,20,.5);--akzent:#9E5A2C}
body.seite .hell,body.seite .warm{background:#F6F4F1;color:#141414;--linie:rgba(20,20,20,.14);--text2:rgba(20,20,20,.72);--leise:rgba(20,20,20,.5)}
body.seite .fuss{background:#F6F4F1;color:#141414;--leise:rgba(20,20,20,.5)}
body.seite .fuss a{color:rgba(20,20,20,.55)}
body.seite .fuss a:hover{color:#141414}
body.seite .fuss .rechts{color:rgba(20,20,20,.55)}
body.seite h1,body.seite h2,body.seite h3,body.seite strong{color:#141414}
body.seite a,body.seite .marke,body.seite a.marke-wort,body.seite a.zurueck{color:#9E5A2C}
body.seite .btn{background:#141414;color:#FFFFFF;border-color:#141414}
body.seite .btn:hover{background:#9E5A2C;color:#FFFFFF;border-color:#9E5A2C}
body.seite .btn.leer{background:transparent;color:#141414;border-color:currentColor}
body.seite .btn.leer:hover{background:#141414;color:#FFFFFF;border-color:#141414}
body.seite .kasten{border-left-color:#9E5A2C}
body.seite .msg.err{color:#B4453A}

/* Rosé Lücken-Linie vor jeder gesperrten Zeile, wie auf der Startseite */
body.seite .marke{display:flex;align-items:center;gap:14px}
body.seite .marke::before{content:'';flex:none;width:40px;height:2px;background:#9E5A2C}

/* 23. Oktober 2026: Look der BrandStudio-Kacheln wie die Startseite.
   Unterseiten in Creme #F1EEE4 mit dunkler Schrift, Überschriften Instrument Serif, Fuß in Braun. */
@font-face{font-family:'Instrument Serif';src:url('/fonts/InstrumentSerif-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url('/fonts/InstrumentSerif-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
body.seite{--serif:'Instrument Serif',Georgia,serif;background:#F1EEE4;color:#2B231B;--linie:rgba(43,35,27,.14);--text2:rgba(43,35,27,.78);--leise:rgba(43,35,27,.55);--akzent:#7A6232}
body.seite .hell,body.seite .warm{background:#E7E2D4;color:#2B231B}
body.seite h1,body.seite h2,body.seite h3{font-family:'Instrument Serif',Georgia,serif;font-weight:400;color:#2B231B}
body.seite strong{color:#2B231B}
body.seite a,body.seite .marke,body.seite a.marke-wort,body.seite a.zurueck{color:#7A6232}
body.seite .marke::before{background:#7A6232}
body.seite .kasten{border-left-color:#7A6232}
body.seite .btn{background:#2B231B;color:#F1EEE4;border-color:#2B231B}
body.seite .btn:hover{background:#5A4B2C;color:#F1EEE4;border-color:#5A4B2C}
body.seite .btn.leer{background:transparent;color:#2B231B;border-color:currentColor}
body.seite .fuss{background:#413024;color:#F1EEE4}
body.seite .fuss a,body.seite .fuss .rechts{color:rgba(241,238,228,.6)}
body.seite .fuss a:hover{color:#F1EEE4}