/* =========================================================================
   Immobilien-Service Hollenbach — dunkle Objektpflege-Seite, von Hand gebaut.

   Stand 03.08.2026. Erbt NICHTS aus `_basis/`. Mit dem taste-skill gebaut,
   bewegt mit Motion und GSAP, beide selbst gehostet. Kein frontend-design.

   Design Read: ruhige, vertrauensbildende, dunkle Seite für einen
   Immobilien- und Hausmeisterdienst in Görlitz. Publikum sind Eigentümer,
   Vermieter und Hausverwaltungen. Ein Foto über die volle Breite trägt den
   Einstieg, viel Luft, fast monochrom, EIN warmer Akzent (Görlitzer
   Sandstein), Bewegung leise. Regler: Varianz 6, Bewegung 4, Dichte 4.

   Bewusst anders als die Elektro-Vorlage: Nachtschiefer statt Nachtgrau,
   Sandstein-Amber statt Kühlblau, Archivo (breit) und Public Sans statt
   Bricolage und Karla, Register statt Bento. Palette und Schriftpaarung
   wiederholen sich nicht (Vorgabe: kein Design wie das vorige).
   ========================================================================= */

/* ---- Schrift, selbst gehostet ------------------------------------------- */
/* Kein <link> zu Google: beim Aufruf entstünde eine Verbindung nach USA und
   damit ein Einwilligungsproblem (LG München I, 3 O 17493/20). */
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;
  font-stretch:100%;font-display:swap;src:url('schrift/archivo-600-x.woff2?v=1785343126') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;
  font-stretch:100%;font-display:swap;src:url('schrift/archivo-700-x.woff2?v=1785343126') format('woff2');}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('schrift/public-sans-400.woff2?v=1785343125') format('woff2');}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('schrift/public-sans-500.woff2?v=1785343126') format('woff2');}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('schrift/public-sans-600.woff2?v=1785343126') format('woff2');}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('schrift/public-sans-700.woff2?v=1785343126') format('woff2');}

/* ---- Marken -------------------------------------------------------------- */
:root{
  /* Weiss und Blau — die Farben des Firmenzeichens (gemessen: Blau #0001FC,
     Rot #FD0002). Das reine Logoblau traegt weisse Schrift mit 8.7:1; fuer
     Flaechen steht hier ein Grad tieferes Blau, damit auch kleine Schrift
     darauf sicher liegt. Rot bleibt dem Zeichen vorbehalten — als Textfarbe
     kaeme das Logorot auf Weiss nur auf 4.1:1. */
  --grund:#FFFFFF;          /* Seite */
  --flaeche:#F4F6FA;        /* abgesetzte Flaeche */
  --band:#EEF2F8;           /* ruhiges Band zwischen den Abschnitten */
  --tinte:#10141C;          /* 18.4:1 auf Weiss */
  --leise:#4B5464;          /* 7.6:1 auf Weiss, 6.9:1 auf der Flaeche */
  --akzent:#1226B4;         /* Flaechen und Marken; Weiss darauf 10.7:1 */
  --akzent-txt:#1226B4;     /* blaue Schrift auf Weiss (10.7:1) */
  --akzent-auf:#FFFFFF;     /* Schrift AUF der Akzentflaeche */
  --rot:#C0121B;
  --gruen:#136B3C;
  --linie:rgba(16,20,28,.13);
  --linie-2:rgba(16,20,28,.24);

  --display:'Archivo',system-ui,-apple-system,sans-serif;
  --body:'Public Sans',system-ui,-apple-system,sans-serif;

  --radius:4px;
  --rand:clamp(1.15rem,5vw,4.5rem);
  --luft:clamp(4.5rem,10vw,8rem);
  --breite:78rem;
}

/* ---- Grundlagen ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
[hidden]{display:none!important;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5.5rem;}
body{margin:0;background:var(--grund);color:var(--tinte);font-family:var(--body);
  font-size:clamp(1rem,.96rem + .28vw,1.07rem);line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-wrap:break-word;}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}
h1,h2,h3,h4,p,figure,dl,dd,blockquote{margin:0;}
ul,ol{margin:0;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
input,textarea,select{font:inherit;color:inherit;}
p{text-wrap:pretty;hyphens:auto;}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.01em;
  line-height:1.06;text-wrap:balance;hyphens:manual;}
:focus-visible{outline:2px solid var(--akzent);outline-offset:3px;border-radius:2px;}

.innen{width:100%;max-width:var(--breite);margin-inline:auto;padding-inline:var(--rand);}
.abschnitt{padding-block:var(--luft);position:relative;}
.band{background:var(--band);}
.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;}
a.sprung:focus{position:fixed;left:.6rem;top:.6rem;z-index:100;width:auto;height:auto;
  margin:0;clip:auto;overflow:visible;background:var(--akzent);color:var(--akzent-auf);
  padding:.7rem 1.1rem;border-radius:2px;font-weight:700;}

/* Rubrik (Auszeichnungsstufe 1): gesperrt, versal, Akzent. */
.schild{display:inline-flex;align-items:center;gap:.8rem;margin-bottom:1.3rem;
  font-weight:700;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--akzent-txt);}
.schild::before{content:"";width:2rem;height:1px;background:currentColor;}
.titel{font-size:clamp(1.95rem,1.2rem + 3.1vw,3.4rem);margin-bottom:1.1rem;}
/* Betonung im Fließtext (Stufe 3): Farbe, kein Schriftwechsel. */
.titel em{font-style:normal;color:var(--akzent-txt);}
.lead{font-size:clamp(1.05rem,1rem + .5vw,1.24rem);color:var(--leise);
  max-width:58ch;line-height:1.62;}
.fussnote{font-size:.78rem;color:var(--leise);margin-top:1.3rem;padding-top:1rem;
  border-top:1px solid var(--linie);line-height:1.6;}

/* ---- Knöpfe: Pille, ein System ------------------------------------------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:46px;padding:.8rem 1.6rem;border-radius:99px;border:1px solid var(--akzent);
  background:var(--akzent);color:var(--akzent-auf);font-weight:700;font-size:.86rem;
  letter-spacing:.04em;text-decoration:none;text-align:center;
  transition:background .18s,color .18s,transform .12s;}
.knopf:hover{background:var(--akzent-txt);border-color:var(--akzent-txt);}
.knopf:active{transform:translateY(1px);}
.knopf--linie{background:transparent;color:var(--tinte);border-color:var(--linie-2);}
.knopf--linie:hover{background:var(--tinte);border-color:var(--tinte);color:var(--grund);}

/* ---- Kopf ---------------------------------------------------------------- */
.kopf{position:sticky;top:0;z-index:70;/* Deckend: bei 86 % schien der Text, der darunter wegrollt, durch die
   Leiste hindurch und stand hinter der Wortmarke (Ansage 04.08.2026). */
  background:#FFFFFF;
  backdrop-filter:blur(10px);border-bottom:1px solid var(--linie);}
.kopf__reihe{display:flex;align-items:center;gap:1rem;padding-block:.85rem;}
.marke{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:inherit;
  margin-right:auto;min-width:0;}
.marke__punkt{width:7px;height:7px;border-radius:50%;background:var(--akzent);flex:0 0 auto;
  align-self:center;}
.marke__wort{font-family:var(--display);font-weight:700;font-size:1.02rem;letter-spacing:-.01em;
  min-width:0;overflow-wrap:anywhere;}
.marke__zusatz{font-size:.62rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:var(--leise);}
.kopf__nav{display:flex;align-items:center;gap:clamp(.4rem,1.6vw,1.3rem);flex-wrap:nowrap;}
.kopf__nav a{font-size:.8rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;color:var(--leise);padding:.45rem .1rem;}
.kopf__nav a:hover,.kopf__nav a[aria-current="page"]{color:var(--tinte);}
.kopf__nav a.kopf__ruf{background:var(--akzent);color:var(--akzent-auf);font-weight:700;
  padding:.6rem 1.15rem;border-radius:99px;white-space:nowrap;letter-spacing:.03em;}
.kopf__nav a.kopf__ruf:hover{background:var(--akzent-txt);}
/* Der Betriebszusatz ist Beiwerk und geht als Erstes, danach rücken Schrift
   und Abstand zusammen, damit die Leiste in einer Reihe bleibt. */
@media (max-width:1319px){ .marke__zusatz{display:none;} }
@media (min-width:981px) and (max-width:1319px){
  .marke__wort{font-size:.92rem;}
  .kopf__nav{gap:.5rem;}
  .kopf__nav a{font-size:.7rem;letter-spacing:.03em;padding-inline:.15rem;}
  .kopf__nav a.kopf__ruf{padding:.5rem .8rem;}
}
.nav-schalter{position:absolute;opacity:0;pointer-events:none;}
.nav-knopf{display:none;}
@media (max-width:980px){
  .kopf__reihe{flex-wrap:wrap;padding-block:.65rem;}
  .marke__zusatz{display:none;}
  .nav-knopf{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:40px;padding:9px 8px;cursor:pointer;border:1px solid var(--linie-2);
    border-radius:var(--radius);}
  .nav-strich{height:2px;background:var(--tinte);}
  .kopf__nav{display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;
    padding-bottom:.6rem;}
  .kopf__nav a{padding:.9rem .1rem;border-bottom:1px solid var(--linie);}
  .kopf__nav a.kopf__ruf{margin-top:.9rem;text-align:center;border-bottom:0;justify-content:center;
    display:inline-flex;align-items:center;}
  .nav-schalter:checked ~ .kopf__nav{display:flex;}
}

/* ---- Hero: ein Bild über die volle Breite -------------------------------- */
/* Das Foto ist hell fotografiert (Innenraum bei Tag). Auf einer dunklen Seite
   deckt der Verlauf unten und links so weit ab, dass jeder Buchstabe seine
   4,5:1 behält; gemessen am schlechtesten Pixel hinter dem Textkasten. */
.hero{--tinte:#FFFFFF;--leise:#D7DBE2;--akzent-txt:#9FC0FF;color:#fff;position:relative;isolation:isolate;overflow:hidden;min-height:min(86vh,740px);
  display:flex;align-items:flex-end;padding-block:clamp(6rem,18vh,9rem) clamp(3rem,7vw,5rem);
  border-bottom:1px solid var(--linie);}
.hero__bild{position:absolute;inset:0;margin:0;z-index:-2;display:block;}
.hero__bild img{width:100%;height:100%;object-fit:cover;object-position:center 46%;
  filter:saturate(.82) brightness(.9);}
@media (max-width:700px){ .hero__bild img{object-position:60% 46%;} }
.hero__schleier{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,rgba(18,22,26,.95) 0%,rgba(18,22,26,.9) 40%,
    rgba(18,22,26,.64) 66%,rgba(18,22,26,.4) 86%,rgba(18,22,26,.3) 100%),
  linear-gradient(0deg,rgba(18,22,26,.95) 0%,rgba(18,22,26,.6) 36%,rgba(18,22,26,0) 74%);}
@media (max-width:1023px){
  .hero{min-height:min(90vh,700px);}
  .hero__schleier{background:
    linear-gradient(90deg,rgba(18,22,26,.96) 0%,rgba(18,22,26,.92) 58%,rgba(18,22,26,.84) 100%),
    linear-gradient(0deg,rgba(18,22,26,.96) 2%,rgba(18,22,26,.62) 44%,rgba(18,22,26,.24) 100%);}
}
.hero .innen{position:relative;width:100%;}
.hero h1{font-size:clamp(2.3rem,1.1rem + 4vw,4.1rem);margin-bottom:1.2rem;max-width:16ch;}
.hero h1 em{font-style:normal;color:var(--akzent-txt);}
.hero .lead{max-width:52ch;}
.hero__tat{margin-top:2.2rem;}

/* ---- Leistungen: Kachelraster -------------------------------------------
   Ansage 04.08.2026: statt des Registers mit mitwachsender Linie stehen die
   sechs Aufgaben als gleichrangige Kacheln. Die Zaehlung bleibt, jetzt als
   Marke oben in der Kachel. */
.kacheln{list-style:none;padding:0;margin:2.8rem 0 0;display:grid;gap:1rem;
  grid-template-columns:minmax(0,1fr);}
@media (min-width:620px){.kacheln{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:980px){.kacheln{grid-template-columns:repeat(3,minmax(0,1fr));}}
/* Aufbau der Kachel (Hausregel seit 04.08.2026):
   Bild oben, darunter die Zahl LINKS NEBEN der Überschrift und in derselben
   Größe wie sie. Die Zahl ist damit eine Auszeichnung der Überschrift, keine
   eigene kleine Marke darüber. */
.kachel{min-width:0;display:flex;flex-direction:column;overflow:hidden;
  background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius);
  transition:border-color .18s ease,transform .18s ease;}
.kachel:hover{border-color:var(--linie-2);transform:translateY(-2px);}
.kachel__bild{margin:0;aspect-ratio:16/10;overflow:hidden;background:var(--band);
  border-bottom:1px solid var(--linie);}
.kachel__bild img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.72) brightness(.92);}
/* Ersatzfläche, wo es kein ehrliches Motiv gibt (siehe HERKUNFT.txt).
   Bewusst eine Grafik und kein Foto-Platzhalter: feine Schräge in der
   Hausfarbe auf dem ruhigen Band. */
.kachel__bild--marke{
  background:
    repeating-linear-gradient(135deg,
      color-mix(in srgb, var(--akzent) 14%, transparent) 0 2px,
      transparent 2px 14px),
    var(--band);
}
.kachel__text{padding:clamp(1.2rem,2.6vw,1.6rem);display:flex;flex-direction:column;
  gap:.45rem;}
/* Der Kopfbereich hält immer zwei Zeilen frei. Sonst begann der Fließtext in
   einer Kachel mit einzeiliger Überschrift höher als daneben in einer mit
   zweizeiliger — bei 1100px an Kachel 02, bei 900px an Kachel 06 gemessen
   (Ansage 04.08.2026). Überschrift und Fließtext starten so in jeder Reihe
   auf derselben Höhe. */
.kachel__kopf{display:flex;align-items:baseline;gap:.65rem;min-width:0;
  font-size:clamp(1.12rem,1rem + .5vw,1.32rem);min-height:2.4em;}
.kachel__nr{font-family:var(--display);font-weight:700;
  font-size:clamp(1.12rem,1rem + .5vw,1.32rem);line-height:1.2;
  color:var(--akzent-txt);font-variant-numeric:tabular-nums;flex:0 0 auto;}
.kachel h3{font-size:clamp(1.12rem,1rem + .5vw,1.32rem);line-height:1.2;
  letter-spacing:-.008em;margin:0;min-width:0;}
.kachel p{color:var(--leise);font-size:.97rem;margin:0;}
.kachel a{color:var(--akzent-txt);text-underline-offset:3px;display:inline-block;
  padding-block:.3rem;}
@media (prefers-reduced-motion:reduce){.kachel:hover{transform:none;}}

/* ---- Station: Rollen-Wahl (Informationsinteraktion) ---------------------- */
.wahl{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.6rem;}
.wahl button{border:1px solid var(--linie-2);background:var(--flaeche);color:var(--leise);
  min-height:44px;padding:.6rem 1.2rem;border-radius:99px;font-size:.9rem;font-weight:500;
  transition:border-color .18s,background .18s,color .18s;}
.wahl button:hover,.wahl button:focus-visible{border-color:var(--akzent);color:var(--tinte);}
.wahl button[aria-pressed="true"]{background:var(--akzent);border-color:var(--akzent);
  color:var(--akzent-auf);font-weight:700;}
.einsicht{margin-top:2rem;background:var(--flaeche);border:1px solid var(--linie);
  border-radius:var(--radius);padding:clamp(1.5rem,3.4vw,2.2rem);max-width:66ch;}
.einsicht h3{font-size:clamp(1.2rem,1rem + .9vw,1.55rem);margin-bottom:.7rem;}
.einsicht > p{color:var(--leise);font-size:.98rem;}

/* Zahlenliste-artige Aufzählung (Stufe: gemeinsame Kante, ein Akzentstrich). */
.punkte{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:.65rem;}
.punkte li{position:relative;padding-left:1.5rem;font-size:.93rem;color:var(--leise);
  line-height:1.6;}
.punkte li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:1px;
  background:var(--akzent);}

/* ---- Zweispalter: Ansprechpartner ---------------------------------------- */
.zweispalt{display:grid;gap:clamp(1.8rem,4vw,3rem);grid-template-columns:minmax(0,1fr);
  align-items:start;}
@media (min-width:900px){
  .zweispalt{grid-template-columns:minmax(0,1fr) minmax(0,.82fr);align-items:center;}
}
.zweispalt__text{min-width:0;}
.zweispalt__bild{margin:0;min-width:0;}
.zweispalt__bild img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius);
  filter:saturate(.72) brightness(.86);}
.zweispalt__bild figcaption{margin-top:.8rem;font-size:.8rem;color:var(--leise);line-height:1.5;}
.paar{display:grid;gap:0;margin-top:1.9rem;}
.paar div{border-top:1px solid var(--linie);padding-top:1.2rem;margin-top:1.2rem;}
.paar div:first-child{border-top:0;padding-top:0;margin-top:0;}
.paar dt{font-family:var(--display);font-weight:700;font-size:1.06rem;letter-spacing:-.008em;
  margin-bottom:.35rem;}
.paar dd{margin:0;color:var(--leise);font-size:.96rem;line-height:1.6;}

/* ---- Signatur: ruhiges Bild über die volle Breite ------------------------ */
/* Liegt auf einem abgedunkelten Foto — die Schrift bleibt hell, auch
   nachdem die Seite auf Weiss umgestellt wurde (04.08.2026). */
.signatur{--tinte:#FFFFFF;--leise:#D7DBE2;color:#fff;
  position:relative;isolation:isolate;overflow:hidden;min-height:min(46vh,430px);
  display:flex;align-items:center;padding-block:clamp(3rem,8vw,5rem);
  border-block:1px solid var(--linie);}
.signatur__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 58%;z-index:-2;filter:saturate(.6) brightness(.52);}
.signatur__schleier{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,rgba(18,22,26,.9) 0%,rgba(18,22,26,.78) 46%,
    rgba(18,22,26,.58) 78%,rgba(18,22,26,.5) 100%);}
.signatur__innen{position:relative;}
.signatur__zeile{font-family:var(--display);font-weight:700;letter-spacing:-.012em;
  font-size:clamp(1.3rem,1rem + 1.5vw,1.95rem);line-height:1.3;max-width:26ch;
  text-wrap:balance;}

/* ---- Station: Betreuungspaket (Bindungsinteraktion) ---------------------- */
.station{display:grid;gap:clamp(1.8rem,4vw,3.2rem);grid-template-columns:minmax(0,1fr);
  align-items:start;margin-top:2.8rem;}
@media (min-width:940px){
  .station{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);}
  /* Die Auswahl links ist 199px hoch, die Ergebniskachel rechts 618px. Ohne
     `sticky` rollten die Kreuzchen aus dem Bild, sobald man die Kachel las —
     man kreuzte an, ohne das Ergebnis zu sehen (Ansage 04.08.2026).
     Jetzt laeuft die Auswahl mit, bis die Kachel zu Ende ist. Dasselbe Muster
     wie die Kontaktdaten neben dem Formular. */
  .station > div:first-child{position:sticky;top:calc(var(--kopf-hoehe,72px) + 1.5rem);
    align-self:start;}
}
.kreis__frage{font-weight:700;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--leise);margin-bottom:1rem;}
.kreis__reihe{display:flex;flex-wrap:wrap;gap:.55rem;}
.kreis__reihe button{border:1px solid var(--linie-2);background:var(--flaeche);color:var(--leise);
  min-height:44px;padding:.6rem 1.15rem;border-radius:99px;font-size:.88rem;font-weight:500;
  line-height:1.3;text-align:left;min-width:0;
  transition:border-color .18s,background .18s,color .18s;}
.kreis__reihe button:hover,.kreis__reihe button:focus-visible{border-color:var(--akzent);color:var(--tinte);}
.kreis__reihe button[aria-pressed="true"]{background:var(--akzent);border-color:var(--akzent);
  color:var(--akzent-auf);font-weight:700;}
.kreis__leer{margin-top:1.5rem;border:1px solid var(--linie-2);color:var(--leise);
  background:transparent;border-radius:99px;min-height:40px;padding:.55rem 1.1rem;font-size:.86rem;
  transition:border-color .18s,color .18s;}
.kreis__leer:hover,.kreis__leer:focus-visible{border-color:var(--akzent);color:var(--tinte);}
.kreis__leitung{background:var(--flaeche);border:1px solid var(--linie);
  border-radius:var(--radius);overflow:hidden;min-width:0;}
.kreis__bild{margin:0;}
.kreis__bild img{width:100%;height:clamp(160px,20vw,220px);object-fit:cover;
  filter:saturate(.62) brightness(.7);}
.kreis__mess{padding:clamp(1.4rem,3.4vw,1.9rem);}
.ergebnis__stand{font-weight:700;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--leise);margin-bottom:.6rem;}
/* Datenwert (Stufe 2): tabular-nums, Größe trägt. */
.paket__zahl{font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.9rem,1.4rem + 2vw,2.7rem);line-height:1;
  font-variant-numeric:tabular-nums;margin:.2rem 0 1rem;}
.paket__zahl small{font-family:var(--body);font-weight:400;letter-spacing:0;font-size:.82rem;
  color:var(--leise);}
.kreis__mess h3{font-size:clamp(1.15rem,1rem + .8vw,1.5rem);margin-bottom:.65rem;}
.kreis__mess > p{color:var(--leise);font-size:.95rem;}
.kreis__mess .knopf{margin-top:1.5rem;width:100%;}

/* ---- Zahlenstreifen ------------------------------------------------------ */
.zahlen{display:grid;gap:1px;background:var(--linie);border:1px solid var(--linie);
  grid-template-columns:minmax(0,1fr);margin-top:2.8rem;}
@media (min-width:640px){.zahlen{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:960px){.zahlen{grid-template-columns:repeat(4,minmax(0,1fr));}}
.zahl{background:var(--grund);padding:1.7rem 1.4rem;min-width:0;}
.zahl dt{font-weight:700;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--leise);margin-bottom:.6rem;line-height:1.4;}
/* Kennzahl (Stufe 4): Displayschrift, groß, Textfarbe — die Größe trägt. */
.zahl dd{margin:0;font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(2rem,1.4rem + 1.9vw,2.8rem);line-height:1;font-variant-numeric:tabular-nums;}
.zahl dd.zahl--wort{font-size:clamp(1.55rem,1.2rem + 1.2vw,2.1rem);letter-spacing:-.012em;}
.zahl small{display:block;font-family:var(--body);font-weight:400;font-size:.84rem;
  color:var(--leise);margin-top:.5rem;line-height:1.5;}

/* ---- Zitat --------------------------------------------------------------- */
.zitat{margin-top:clamp(2.8rem,6vw,4rem);padding-left:clamp(1.2rem,3vw,2rem);
  border-left:3px solid var(--akzent);max-width:58ch;}
.zitat p{font-family:var(--display);font-weight:600;letter-spacing:-.012em;
  font-size:clamp(1.2rem,1rem + 1vw,1.6rem);line-height:1.34;}
.zitat footer{margin-top:.9rem;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--leise);}

/* ---- Kontakt ------------------------------------------------------------- */
.kontakt{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:minmax(0,1fr);
  align-items:start;margin-top:2.8rem;}
@media (min-width:900px){
  .kontakt{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .kontakt > div:first-child{position:sticky;top:calc(var(--kopf-hoehe,72px) + 1.5rem);
    align-self:start;}
}
.infoliste{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:minmax(7rem,auto) 1fr;gap:0;}
.infoliste li{display:grid;grid-column:1/-1;grid-template-columns:subgrid;
  gap:.4rem 1.2rem;padding-block:.9rem;border-top:1px solid var(--linie);}
.infoliste li:first-child{border-top:0;padding-top:0;}
.info-k{align-self:start;font-weight:700;font-size:.64rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--leise);padding-top:.35em;}
.info-v{font-size:1.01rem;line-height:1.55;}
.info-v a{text-decoration:none;border-bottom:1px solid var(--linie-2);display:inline-block;
  padding-block:.2rem;overflow-wrap:anywhere;}
.info-v a:hover{border-bottom-color:var(--akzent);color:var(--akzent-txt);}
.formular{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius);
  padding:clamp(1.5rem,3.6vw,2.2rem);min-width:0;}
.feld{display:flex;flex-direction:column;gap:.45rem;margin-bottom:1.1rem;}
.feld label{font-weight:700;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--leise);}
.feld input,.feld textarea,.feld select{width:100%;min-width:0;background:var(--grund);
  border:1px solid var(--linie-2);border-radius:var(--radius);padding:.75rem .9rem;
  font-size:1rem;color:var(--tinte);}
.feld input::placeholder,.feld textarea::placeholder{color:var(--leise);opacity:1;}
.feld textarea{min-height:7rem;resize:vertical;}
.feld input:focus,.feld textarea:focus,.feld select:focus{outline:none;border-color:var(--akzent);
  box-shadow:0 0 0 3px rgba(18,38,180,.24);}
.formhinweis{font-size:.83rem;color:var(--leise);margin-top:.8rem;}
.platzhalter{background:rgba(18,38,180,.10);color:var(--akzent-txt);border-bottom:1px solid var(--akzent);
  padding:.05em .4em;font-style:italic;}

/* ---- Anfahrt: Karte über das Einwilligungswerkzeug ----------------------- */
/* Die Karte schliesst unmittelbar an den Kontakt an und geht direkt in
   die Fussleiste ueber — keine weisse Flaeche dazwischen (04.08.2026). */
.kartenband{margin-top:0;padding-bottom:0}
.kartenband + .fuss,.karte + .fuss{margin-top:0}
.karte{position:relative;width:100%;height:clamp(280px,38vw,460px);background:var(--flaeche);
  border-top:1px solid var(--linie);}
.karte iframe{display:block;width:100%;height:100%;border:0;}
.karte__sperre{position:absolute;inset:0;display:grid;place-items:center;
  padding:clamp(1.2rem,4vw,2.4rem);background:linear-gradient(180deg,var(--band),var(--flaeche));}
.karte.ks-frei .karte__sperre{display:none;}
.karte__kasten{width:fit-content;max-width:52ch;text-align:center;}
.karte__wo{font-family:var(--display);font-weight:700;letter-spacing:-.012em;
  font-size:clamp(1.05rem,1rem + .7vw,1.4rem);line-height:1.25;margin-bottom:.8rem;}
.karte__grund{font-size:.95rem;color:var(--leise);margin-bottom:1.5rem;}
.karte__reihe{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;}
.karte__klein{margin-top:1.2rem;font-size:.78rem;color:var(--leise);}

/* ---- Fuß ----------------------------------------------------------------- */
.fuss{border-top:1px solid var(--linie);padding-block:clamp(3rem,6vw,4.5rem) 2rem;
  font-size:.94rem;color:var(--leise);}
.fuss__kopf{display:none;
  gap:1rem 2.5rem;padding-bottom:2.2rem;margin-bottom:2.6rem;border-bottom:1px solid var(--linie);}
.fuss__kopf .marke__wort{color:var(--tinte);}
.fuss__satz{max-width:46ch;}
.fuss__gitter{display:grid;gap:2rem clamp(1.5rem,4vw,3rem);grid-template-columns:minmax(0,1fr);
  align-items:start;}
/* Das Firmenzeichen steht als eigene, erste Spalte links neben „Leistungen" —
   gross und ohne Namenszeile daneben (Ansage 04.08.2026). */
.fuss__zeichen{display:block;width:clamp(88px,12vw,132px);height:auto}
@media (min-width:700px){.fuss__gitter{grid-template-columns:auto repeat(3,minmax(0,1fr));}}
.fuss h3{font-family:var(--body);font-weight:700;font-size:.64rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--leise);margin-bottom:1.1rem;}
.fuss ul{list-style:none;padding:0;display:grid;gap:.3rem;}
.fuss li{margin-block:.1rem;overflow-wrap:anywhere;}
.fuss a,.fuss__cookie{color:var(--leise);text-decoration:none;display:inline-block;
  padding-block:.34rem;}
.fuss a:hover,.fuss__cookie:hover{color:var(--akzent-txt);}
.fuss__cookie{text-decoration:underline;text-underline-offset:3px;text-align:left;}
.fuss__zeile{margin-top:2.8rem;padding-top:1.5rem;border-top:1px solid var(--linie);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem;font-size:.8rem;}

/* ---- Detailseiten (Impressum, Datenschutz) ------------------------------- */
.rechtskopf{padding-block:clamp(3.5rem,9vh,5.5rem) clamp(2rem,5vw,3rem);
  background:var(--band);border-bottom:1px solid var(--linie);}
.rechtskopf h1{font-size:clamp(1.9rem,1.4rem + 2.4vw,3rem);margin-bottom:.8rem;max-width:20ch;}
.krumen{font-weight:700;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--leise);margin-bottom:1.2rem;}
.krumen a{text-decoration:none;color:var(--akzent-txt);display:inline-block;padding-block:.5rem;}
.prosa{max-width:66ch;}
.prosa > * + *{margin-top:1.05rem;}
.prosa h2{font-family:var(--display);font-size:clamp(1.25rem,1.1rem + 1vw,1.6rem);
  margin-top:2.6rem;margin-bottom:.2rem;}
.prosa h3{font-family:var(--display);font-size:1.05rem;margin-top:1.6rem;}
.prosa p,.prosa ul{color:var(--leise);}
.prosa ul{padding-left:1.15rem;}
.prosa li{margin-top:.4rem;}
.prosa a{color:var(--akzent-txt);text-underline-offset:3px;overflow-wrap:anywhere;}

/* ---- Bewegung ------------------------------------------------------------
   Startzustände erst scharfschalten, wenn JavaScript da ist. Ohne Skript ist
   alles sofort sichtbar; das ist der Ausfallweg, kein Nebeneffekt. */
.js .auf{opacity:0;transform:translateY(18px);}
.js .auf.da{opacity:1;transform:none;
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;}
  .js .auf{opacity:1;transform:none;}
  .register__linie{transform:scaleY(1);}
}

/* ── Firmenzeichen ────────────────────────────────────────────────────────
   Das Logo der Firma tragt einen blauen Verlauf als eigenen Hintergrund
   (so liegt es auch auf der bestehenden Seite). Auf der dunklen Flaeche hier
   steht deshalb nur das Bildzeichen als kleine Kachel, der Name daneben in
   der Schrift der Seite — statt eines blauen Kastens quer durch die Leiste.
   Das unveraenderte Original liegt als assets/firma/logo-original.png. */
/* Das Firmenzeichen steht frei (weisser Grund herausgeloest, siehe
   assets/firma/logo-mark.png). Original der Firma: logo-original.png. */
.marke__zeichen{width:38px;height:auto;flex:0 0 auto}
.marke__zeichen--fuss{width:52px}
@media (max-width:600px){.marke__zeichen{width:32px}}

/* ── Winterdienst und Haftung: Frage links, Antwort rechts ───────────────
   Ueberarbeitet 04.08.2026. Zuvor lag hier ein Foto in einer eigenen Spalte
   mit `grid-row:1/-1`; im impliziten Raster spannte es keine Zeile auf,
   sondern klebte oben rechts und lief unter die Kopfleiste. Dazu zeigte es
   Daecher im Fruehjahr, keinen Winter. Beides ist raus: der Abschnitt steht
   jetzt als sauberer Zweispalter, die Antwortkarte traegt die rechte Seite. */
.pflicht__raster{display:grid;gap:clamp(1.8rem,4vw,3.2rem);
  grid-template-columns:minmax(0,1fr);align-items:start;}
.pflicht__frage{min-width:0;}
.pflicht__ruf{margin-top:2rem;color:var(--leise);font-size:.95rem;max-width:46ch;
  display:flex;flex-direction:column;align-items:flex-start;gap:1rem;}
#pflicht .einsicht{margin-top:0;max-width:none;}
@media (min-width:940px){
  .pflicht__raster{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);}
  /* Die Karte bleibt beim Rollen stehen, solange die Wahl daneben laeuft:
     Auswahl und Antwort sind dann immer gleichzeitig zu sehen. */
  #pflicht .einsicht{position:sticky;top:calc(var(--kopfhoehe,64px) + 1.5rem);}
}