/* =========================================================================
   Preußer Immobilien, Dresden-Lockwitz — eigenes Stylesheet.
   Dunkel, ein Akzent (Patina, wie das Kupfer der Dresdner Dächer altert),
   Sandstein-Weiß als Textfarbe. Zwei Schriften: Faustina (Überschriften),
   Public Sans (Text und Bedienung). Ein Radiussystem: 12px, dazu Pillen.
   ========================================================================= */

/* ---- Schriften, selbst gehostet ---------------------------------------- */
@font-face{font-family:"Faustina";src:url("schrift/faustina-600.woff2?v=1785389260") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url("schrift/public-sans-400.woff2?v=1785343125") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url("schrift/public-sans-500.woff2?v=1785343126") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url("schrift/public-sans-600.woff2?v=1785343126") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url("schrift/public-sans-700.woff2?v=1785343126") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ---- Token ------------------------------------------------------------- */
:root{
  /* Hell, mit den Farben des Firmenlogos: Anthrazit #28232A und das Rot des
     Bogens #B23636. Fuer Flaechen mit weisser Schrift steht ein Grad tieferes
     Rot — das Logorot traegt Weiss mit 6.05:1, das tiefere mit 7.7:1. */
  --grund:#FFFFFF;        /* Seitengrund */
  --grund-2:#F7F5F3;      /* Baender */
  --flaeche:#FFFFFF;      /* Karten und Kaesten, mit Linie */
  --flaeche-2:#F4F1EE;    /* zweite Stufe */
  --tinte:#28232A;        /* aus dem Logo, 15.4:1 auf Weiss */
  --leise:#544E58;        /* 8.1:1 auf Weiss, 7.4:1 auf dem Band */
  --akzent:#992A2A;       /* Flaechen; Weiss darauf 7.7:1 */
  --akzent-rein:#B23636;  /* das Logorot selbst, fuer Linien und Zeichen */
  --akzent-txt:#992A2A;   /* rote Schrift auf Weiss (7.7:1) */
  --akzent-auf:#FFFFFF;   /* Schrift AUF der Akzentflaeche */
  --hebung:#992A2A;
  --linie:rgba(40,35,42,.14);
  --linie-2:rgba(40,35,42,.26);
  --radius:12px;
  --body:"Public Sans";
  --display:"Faustina";
  --pad:clamp(1.15rem, 5vw, 2.5rem);
  --abstand:clamp(3.5rem, 7vw, 6rem);
}

/* ---- Grundgerüst ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{font-family:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--grund);color:var(--tinte);
  font-size:clamp(1rem,.96rem + .3vw,1.09rem);line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body,input,button,select,textarea,legend{font-family:inherit}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:"Faustina",Georgia,serif;font-weight:600;
  line-height:1.1;margin:0;text-wrap:balance;hyphens:manual;color:var(--tinte)}
p{margin:0;text-wrap:pretty}
a{color:inherit}
strong,b{font-weight:600}
:focus-visible{outline:2px solid var(--akzent);outline-offset:3px}

.sprung{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.sprung:focus{position:fixed;left:12px;top:12px;width:auto;height:auto;
  z-index:100;background:var(--akzent);color:var(--akzent-auf);
  padding:.6rem 1rem;border-radius:var(--radius);font-weight:600}
.nur-vorlesen{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:var(--pad)}

/* ---- Auszeichnungsstufen (eine Ausprägung je Rolle) -------------------- */
.schild{font-family:"Public Sans",sans-serif;font-size:.8125rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--akzent);
  margin:0 0 .9rem;display:block}
.datenwert{font-variant-numeric:tabular-nums;color:var(--hebung);font-weight:600}
.prosa strong,.hebung{color:var(--hebung);font-weight:600}
.kennzahl{font-family:"Faustina",Georgia,serif;font-weight:600;color:var(--tinte);
  line-height:1;font-size:clamp(2.4rem,6vw,3.4rem);hyphens:manual}
.prosa{color:var(--leise);max-width:64ch;line-height:1.75;hyphens:auto;overflow-wrap:anywhere}
.prosa a{color:var(--akzent-txt);text-underline-offset:3px;text-decoration-thickness:1px}

h2{font-size:clamp(1.7rem,1.2rem + 2.4vw,2.75rem)}
h3{font-size:clamp(1.15rem,1rem + .7vw,1.4rem)}

/* ---- Knöpfe ------------------------------------------------------------ */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;padding:.85rem 1.5rem;border-radius:999px;
  background:var(--akzent);color:var(--akzent-auf);border:1px solid var(--akzent);
  font-weight:600;font-size:1rem;line-height:1.1;text-decoration:none;cursor:pointer;
  transition:transform .12s ease, filter .12s ease;
}
.knopf:hover{filter:brightness(1.07)}
.knopf:active{transform:translateY(1px)}
.knopf--linie{background:transparent;color:var(--tinte);border-color:var(--linie-2)}
.knopf--linie:hover{border-color:var(--akzent);filter:none}
.knopf--klein{min-height:40px;padding:.55rem 1.05rem;font-size:.95rem}

/* ---- Kopf -------------------------------------------------------------- */
/* Reinweiss: das Firmenlogo hat einen weissen Grund. Jede Abtoenung
   dahinter zeichnet einen sichtbaren Kasten darum (Ansage 04.08.2026). */
.kopf{position:sticky;top:0;z-index:50;background:#FFFFFF;
  backdrop-filter:blur(10px);border-bottom:1px solid var(--linie)}
.kopf__innen{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:56px;padding-block:.5rem}
.marke{font-family:"Faustina",Georgia,serif;font-weight:600;font-size:1.22rem;
  color:var(--tinte);text-decoration:none;letter-spacing:.005em;hyphens:manual;
  white-space:nowrap}
.marke b{color:var(--akzent)}
.kopf__nav{display:flex;align-items:center;gap:.4rem}
.kopf__nav a{display:inline-flex;align-items:center;min-height:40px;padding:.4rem .7rem;
  color:var(--leise);text-decoration:none;font-weight:500;border-radius:var(--radius)}
.kopf__nav a:hover{color:var(--tinte)}
.kopf__nav a.knopf,.kopf__nav a.knopf:hover{color:var(--akzent-auf)}
@media (max-width:720px){.kopf__nav a.nav-link{display:none}}

/* ---- Abschnitte -------------------------------------------------------- */
main section{padding-block:var(--abstand)}
main section:first-child{padding-block:0}
.reihe-kopf{max-width:62ch;margin-bottom:clamp(1.8rem,3vw,2.8rem)}
.reihe-kopf .prosa{margin-top:.8rem}

/* Einblenden beim Hereinscrollen (nur mit JS scharfgeschaltet) */
.js .auf{opacity:0;transform:translateY(18px)}
.auf.da{opacity:1;transform:none;transition:opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1)}

/* ---- Hero -------------------------------------------------------------- */
.hero{--tinte:#FFFFFF;--leise:#DFDCD8;--akzent-txt:#FFAFAF;color:#fff;
  position:relative;min-height:clamp(560px,86vh,860px);display:flex;
  align-items:flex-end;overflow:hidden;isolation:isolate}
.hero__foto{position:absolute;inset:0;z-index:-2}
.hero__img{width:100%;height:100%;object-fit:cover;object-position:60% 40%;
  filter:brightness(.72) saturate(.85)}
.hero__schleier{position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg, rgba(11,14,15,.92) 0%, rgba(11,14,15,.6) 44%, rgba(11,14,15,.2) 100%),
    linear-gradient(0deg, rgba(11,14,15,.94) 0%, rgba(11,14,15,.62) 38%, rgba(11,14,15,.15) 72%)}
.hero .innen{position:relative;width:100%;max-width:1180px;margin-inline:auto;
  padding:clamp(2.5rem,7vw,5rem) var(--pad) clamp(2.6rem,6vw,4rem)}
.hero .innen>*{max-width:38ch}
.hero h1{font-size:clamp(2.35rem,1.4rem + 4.4vw,4.3rem);margin:0;letter-spacing:-.012em}
.hero .lead{color:var(--tinte);margin:1.15rem 0 0;max-width:44ch;font-size:1.1rem;
  line-height:1.6;text-wrap:pretty}
.hero .knopf{margin-top:1.8rem}
/* Auf dem Foto traegt das dunkle Akzentrot nicht (2.3:1) — hier hell. */
.hero .schild{color:#FFC9C9}

/* ---- Leistungen: Bento mit Rhythmus ------------------------------------ */
/* Alle Bereiche untereinander in einer Spalte, das Bild laeuft daneben mit
   (Ansage 04.08.2026). Vorher stand jede Kachel als halbe Breite neben dem
   Bild, mit viel Freiraum in der Mitte. */
.leist__grid{display:grid;gap:1.1rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){
  .leist__grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
    grid-auto-flow:row dense;align-items:start;gap:1.1rem 2rem}
  /* Das Bild steht in seiner Spalte und bleibt beim Rollen stehen, solange
     die Kachelspalte laeuft. `grid-row:1/-1` statt „span 99": mit einer
     erfundenen Spannweite legte das Raster leere Zeilen an, und das Bild
     sprang beim Rollen (Ansage 04.08.2026). */
  /* Das Bild fuellt die gesamte Hoehe der Kachelspalte aus und laeuft damit
     ueber alle vier Bereiche mit. Kein `sticky`: ein Vorfahr der Seite setzt
     `overflow:hidden`, und darin haftet nichts — das war das Ruckeln
     (04.08.2026 gemessen und verworfen). */
  /* Bild und Kachelspalte beginnen und enden auf derselben Hoehe: dieselbe
     Zeilenspanne, beide gestreckt, kein eigener Aussenabstand (Ansage
     04.08.2026). */
  .leist__grid .zelle-bild{grid-column:1;grid-row:1 / span 4;align-self:stretch;
    height:100%;min-height:0;margin:0}
  .leist__grid .karte-b{margin:0}
  .leist__grid .zelle-bild img{width:100%;height:100%;object-fit:cover}
  .leist__grid .karte-b{grid-column:2}
}
.karte-b{background:var(--flaeche);border:1px solid var(--linie);
  border-radius:var(--radius);padding:clamp(1.3rem,2.5vw,1.9rem);min-width:0;
  display:flex;flex-direction:column;gap:.55rem}
.karte-b h3{color:var(--tinte)}
.karte-b p{color:var(--leise);margin:0}
.karte-b .marke-nr{font-variant-numeric:tabular-nums;color:var(--akzent);
  font-weight:600;font-size:.85rem;letter-spacing:.1em}
.zelle-bild{padding:0;overflow:hidden;position:relative;min-height:260px;
  border-radius:var(--radius);border:1px solid var(--linie)}
.zelle-bild img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.82) brightness(.9)}
.zelle-bild figcaption{position:absolute;left:0;right:0;bottom:0;
  padding:1.1rem 1.2rem;color:var(--tinte);font-size:.92rem;line-height:1.45;
  background:linear-gradient(0deg,rgba(10,13,14,.9),rgba(10,13,14,0))}
.zelle-halb{min-width:0}
@media (max-width:860px){
  .zelle-bild{min-height:220px}
  .zelle-halb{grid-column:span 1}
}
@media (max-width:560px){
  .leist__grid{grid-template-columns:minmax(0,1fr)}
  .zelle-halb{grid-column:1}
}

/* ---- Station: gemeinsame Bauteile -------------------------------------- */
/* Die vier Wege stehen in einer Reihe nebeneinander (Ansage 04.08.2026). */
.wahl{display:grid;gap:.7rem;grid-template-columns:minmax(0,1fr);margin:0}
@media (min-width:760px){.wahl{grid-template-columns:repeat(4,minmax(0,1fr))}}
.wahl .opt{text-align:center;justify-content:center;display:inline-flex;align-items:center}
/* Polster grosszuegig: lange Komposita wie „Eigentuemergemeinschaft" standen
   sonst von Kante zu Kante in der Kachel (Ansage 04.08.2026). Dazu Trennung,
   damit auch in schmalen Zellen Luft bleibt statt eines randvollen Wortes. */
.opt{appearance:none;min-height:56px;min-width:0;padding:1rem 1.5rem;
  border-radius:var(--radius);border:1px solid var(--linie-2);
  background:var(--flaeche);color:var(--tinte);font-weight:500;font-size:1rem;
  line-height:1.3;cursor:pointer;text-align:left;
  hyphens:auto;overflow-wrap:break-word;
  transition:border-color .12s ease, background .12s ease}
.opt:hover{border-color:var(--akzent)}
.opt[aria-pressed="true"]{background:var(--akzent);color:var(--akzent-auf);
  border-color:var(--akzent);font-weight:600}
.ergebnis{background:var(--flaeche);border:1px solid var(--linie);
  border-radius:var(--radius);padding:clamp(1.3rem,3vw,1.9rem)}
.ergebnis .datenwert{display:block}
.fussnote{color:var(--leise);font-size:.82rem;line-height:1.5;margin:.9rem 0 0}
.fussnote--quelle{color:var(--akzent-txt);font-variant-numeric:tabular-nums;font-weight:600}

/* Bindungsstation */
/* Der Kasten war auf 760px begrenzt; vier Kacheln nebeneinander liessen darin
   je 172px — zu wenig fuer „Eigentuemergemeinschaft". Die Wahlreihe laeuft
   jetzt ueber die volle Breite, die Antwortkarte bleibt schmal genug zum
   Lesen (Ansage 04.08.2026). */
/* Die Antwortkarte ist genau so breit wie die vier Wahlkacheln darüber, nicht
   schmaler (Ansage 04.08.2026). Begrenzt wird nur die Zeilenlänge im Text. */
.weg__box{display:grid;gap:1.6rem;grid-template-columns:minmax(0,1fr)}
.weg__ergebnis{display:grid;gap:1.1rem}
.weg__ergebnis>p,.weg__ergebnis>ul{max-width:72ch}
.weg__ergebnis .titel{font-family:"Faustina",Georgia,serif;font-size:1.35rem;color:var(--tinte)}
.weg__ergebnis p{color:var(--leise);margin:0}
.weg__ergebnis ul{margin:.2rem 0 0;padding-left:1.1rem;color:var(--leise)}
.weg__ergebnis li{margin:.3rem 0}
.weg__ruf{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;margin-top:.3rem}
.weg__ruf .klein{color:var(--leise);font-size:.9rem}

/* ---- Über --------------------------------------------------------------- */
.ueber__grid{display:grid;gap:clamp(1.6rem,4vw,3rem);
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start}
@media (max-width:820px){.ueber__grid{grid-template-columns:minmax(0,1fr)}}
.ueber__bild{border-radius:var(--radius);overflow:hidden;border:1px solid var(--linie)}
.ueber__bild img{width:100%;filter:saturate(.8) brightness(.86)}
.ueber__bild figcaption{padding:.9rem 1.1rem;color:var(--leise);font-size:.9rem;
  background:var(--flaeche);border-top:1px solid var(--linie)}
.kennzahlen{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;
  margin:2rem 0 0;border-top:1px solid var(--linie);padding-top:1.6rem}
@media (max-width:520px){.kennzahlen{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.kennzahlen .zahl{font-family:"Faustina",Georgia,serif;font-size:clamp(1.9rem,5vw,2.6rem);
  color:var(--tinte);line-height:1;font-variant-numeric:tabular-nums}
.kennzahlen .was{color:var(--leise);font-size:.9rem;margin-top:.45rem;display:block}
.zitat{margin:2.2rem 0 0;padding-left:1.3rem;border-left:2px solid var(--akzent)}
.zitat blockquote{margin:0;font-family:"Faustina",Georgia,serif;font-size:clamp(1.2rem,1rem + 1vw,1.55rem);
  line-height:1.4;color:var(--tinte)}
.zitat .quelle{margin:.8rem 0 0;color:var(--leise);font-size:.9rem;font-family:"Public Sans",sans-serif}

/* ---- Signatur: das Jahr als Kacheln ------------------------------------ */
/* Ansage 04.08.2026: kein Zeitstrahl mehr, sondern Kacheln mit Bild. Das
   Raster hat sechs Spalten: die ersten drei Kacheln nehmen je zwei, die
   letzten beiden je drei. So stehen oben drei und darunter zwei, beide
   Reihen randbuendig — statt einer Luecke am Ende der zweiten Reihe. */
.jahr{background:var(--grund-2);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.jahr__kopf{max-width:60ch;margin-bottom:clamp(2rem,4vw,3rem)}
.jahr__kacheln{display:grid;gap:clamp(1rem,2.2vw,1.5rem);grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){
  .jahr__kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:980px){
  .jahr__kacheln{grid-template-columns:repeat(6,minmax(0,1fr))}
  .jahr__kacheln .kachel-j{grid-column:span 2}
  .jahr__kacheln .kachel-j:nth-child(4),
  .jahr__kacheln .kachel-j:nth-child(5){grid-column:span 3}
  /* Die beiden breiten Kacheln bekommen ein flacheres Bild, sonst waere ihr
     Bild bei gleichem Seitenverhaeltnis deutlich hoeher als das der oberen
     Reihe und die beiden Reihen fielen auseinander. */
  .jahr__kacheln .kachel-j:nth-child(4) .kachel-j__bild,
  .jahr__kacheln .kachel-j:nth-child(5) .kachel-j__bild{aspect-ratio:21/9}
}
.kachel-j{display:flex;flex-direction:column;min-width:0;overflow:hidden;
  background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius);
  transition:border-color .18s ease, transform .18s ease}
.kachel-j:hover{border-color:var(--linie-2);transform:translateY(-2px)}
.kachel-j__bild{margin:0;aspect-ratio:16/10;overflow:hidden;background:var(--flaeche-2);
  border-bottom:1px solid var(--linie)}
.kachel-j__bild img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.82) brightness(.92)}
/* Hochformat-Vorlage: mittig zugeschnitten zeigt sie nur Fassadenstreifen.
   Weiter oben ansetzen, dann steht das Gebaeude als Ganzes im Bild. */
.kachel-j__hoch{object-position:50% 24%}
.kachel-j__text{padding:clamp(1.1rem,2.2vw,1.5rem);display:flex;flex-direction:column;gap:.4rem}
.kachel-j .wann{font-variant-numeric:tabular-nums;color:var(--akzent-txt);font-weight:600;
  font-size:.85rem;letter-spacing:.06em;text-transform:uppercase}
/* Zwei Zeilen freihalten: sonst begann der Fliesstext in einer Kachel mit
   einzeiliger Ueberschrift hoeher als daneben in einer mit zweizeiliger
   (bei 700px gemessen). Ueberschrift und Text starten so in jeder Reihe auf
   derselben Hoehe (Ansage 04.08.2026). */
.kachel-j h3{margin:0;color:var(--tinte);min-height:2.2em}
.kachel-j p{margin:0;color:var(--leise)}
@media (prefers-reduced-motion:reduce){.kachel-j:hover{transform:none}}

/* ---- Informationsstation: Fristen -------------------------------------- */
.frist__grid{display:grid;gap:clamp(1.4rem,3vw,2.4rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
@media (max-width:820px){.frist__grid{grid-template-columns:minmax(0,1fr)}}
.frist__wahl{display:flex;flex-direction:column;gap:.7rem}
.frist__wahl .opt{width:100%}
.frist__erg{position:sticky;top:84px}
@media (max-width:820px){.frist__erg{position:static}}
.frist__erg .datenwert{font-family:"Public Sans",sans-serif;font-size:clamp(2rem,6vw,2.8rem);
  line-height:1.05;margin:0 0 .6rem}
.frist__erg .name{color:var(--tinte);font-weight:600;display:block;margin-bottom:.5rem}
.frist__erg p{color:var(--leise);margin:0}

/* ---- Kontakt ------------------------------------------------------------ */
.kontakt__grid{display:grid;gap:clamp(1.6rem,4vw,3rem);
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}
@media (max-width:820px){.kontakt__grid{grid-template-columns:minmax(0,1fr)}}
.kontakt__daten{display:grid;gap:1.05rem}
.kontakt__zeile{display:grid;gap:.15rem}
.kontakt__zeile .k{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--akzent-txt);font-weight:600}
.kontakt__zeile a{color:var(--tinte);text-decoration:none;font-size:1.1rem;
  display:inline-flex;min-height:32px;align-items:center}
.kontakt__zeile a:hover{color:var(--akzent)}
.kontakt__zeile .frei{color:var(--leise);font-size:1.02rem}
.kontakt__ruf{margin-top:.4rem}
.form{display:grid;gap:1.05rem;background:var(--flaeche);border:1px solid var(--linie);
  border-radius:var(--radius);padding:clamp(1.3rem,3vw,2rem)}
.feld{display:grid;gap:.4rem}
.feld label{font-weight:600;font-size:.92rem;color:var(--tinte)}
.feld input,.feld textarea{width:100%;min-width:0;background:var(--grund);color:var(--tinte);
  border:1px solid var(--linie-2);border-radius:var(--radius);padding:.75rem .9rem;
  font-size:1rem;line-height:1.5}
.feld textarea{min-height:130px;resize:vertical}
.feld input:focus,.feld textarea:focus{outline:2px solid var(--akzent);outline-offset:1px;border-color:var(--akzent)}
.form .knopf{justify-self:start;margin-top:.2rem}
.form .hinweis{color:var(--leise);font-size:.82rem;line-height:1.5;margin:0}

/* ---- Karte -------------------------------------------------------------- */
.kartenband{padding-block:var(--abstand) 0!important}
.karte{position:relative;width:100%;height:clamp(300px,42vw,480px);
  border-top:1px solid var(--linie);background:var(--flaeche-2)}
.karte iframe{width:100%;height:100%;border:0;display:block}
.karte__sperre{position:absolute;inset:0;display:grid;place-items:center;padding:var(--pad);
  background:radial-gradient(circle at 50% 40%,var(--grund-2),var(--flaeche-2))}
.karte.ks-frei .karte__sperre{display:none}
.karte__kasten{max-width:52ch;text-align:center;display:grid;gap:.9rem;justify-items:center}
.karte__wo{font-family:"Faustina",Georgia,serif;font-size:1.2rem;color:var(--tinte);margin:0}
.karte__grund{color:var(--leise);margin:0;font-size:.98rem;line-height:1.6}
.karte__reihe{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}
.karte__klein{color:var(--leise);font-size:.82rem;margin:0;line-height:1.55;max-width:46ch}

/* ---- Fuß ---------------------------------------------------------------- */
.fuss{background:#FFFFFF;border-top:1px solid var(--linie);
  padding-block:clamp(2.4rem,5vw,3.4rem)}
.fuss__grid{display:grid;gap:1.6rem;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:start}
@media (max-width:640px){.fuss__grid{grid-template-columns:minmax(0,1fr)}}
.fuss__marke{font-family:"Faustina",Georgia,serif;font-size:1.2rem;color:var(--tinte);margin:0 0 .6rem}
.fuss p{color:var(--leise);margin:.2rem 0;font-size:.95rem}
.fuss a{color:var(--leise);text-decoration:none}
.fuss a:hover{color:var(--tinte)}
.fuss p a{display:inline-flex;align-items:center;min-height:24px}
.fuss__nav{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.3rem}
.fuss__nav a,.fuss__cookie{display:inline-flex;align-items:center;min-height:32px}
.fuss__cookie{background:none;border:0;color:var(--leise);cursor:pointer;
  font:inherit;padding:0;text-decoration:underline;text-underline-offset:3px}
.fuss__cookie:hover{color:var(--tinte)}
.fuss__unten{margin-top:1.8rem;padding-top:1.2rem;border-top:1px solid var(--linie);
  color:var(--leise);font-size:.85rem}

/* ---- Rechtstexte (Impressum, Datenschutz) ------------------------------ */
.doku{padding-block:clamp(2.4rem,6vw,4.5rem)}
.doku .wrap{max-width:820px}
.doku h1{font-size:clamp(2rem,1.4rem + 2.6vw,3rem);margin-bottom:1.4rem}
.doku h2{font-size:clamp(1.3rem,1.1rem + 1vw,1.7rem);margin:2.4rem 0 .7rem}
.doku h3{margin:1.6rem 0 .5rem}
.doku p,.doku li{color:var(--leise);max-width:70ch;overflow-wrap:anywhere}
.doku p{margin:.6rem 0}
.doku ul{margin:.4rem 0;padding-left:1.2rem}
.doku a{color:var(--akzent-txt);text-underline-offset:3px}
.doku p a{display:inline-flex;align-items:center;min-height:24px}
.doku .zurueck{display:inline-flex;align-items:center;min-height:40px;margin-top:2.4rem;
  color:var(--tinte);text-decoration:none;font-weight:600}
.doku .zurueck:hover{color:var(--akzent)}

/* ---- Reduzierte Bewegung: alles sofort im Endzustand ------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .js .auf{opacity:1;transform:none}
}

/* Firmenlogo. Die Datei hat einen weissen Grund — auf der hellen Seite faellt
   das nicht auf, deshalb keine Freistellung noetig (04.08.2026). */
.marke img{height:38px;width:auto;display:block}
.fuss__marke img{height:46px;width:auto;display:block}
@media(max-width:560px){.marke img{height:30px}}