/* Rudaj Bau, Fassung 18: Website nach dem Briefkopf (Gestaltungsmuster 1), verfeinert auf das Niveau
   der Vorbilder. Farben, Schriften, Raster und Umbrüche aus muster.py. Die Steine des Zeichens kehren
   als Flächen wieder: tiefschwarzer Marmor neben dem Einstieg, im Anfrageteil und in der Fußzeile,
   weißer Granit als Band hinter dem Einsatzgebiet. Überzeilen und Nummern in Kapitälchen wie die
   Unterzeile des Zeichens (Rudaj Copperplate). Fassung 12 ergänzt zurückhaltende Bewegung (Abschnitt
   „Bewegung“ am Ende): Die Seite ist im ersten Bild vollständig, Bewegung zeigt nur, was ohnehin da ist. */
@font-face{font-family:"Rudaj Schola";src:url(rudaj-schola-regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Rudaj Schola";src:url(rudaj-schola-bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Rudaj Copperplate";src:url(rudaj-copperplate.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  --papier:#ffffff;
  --tinte:#151515;
  --tinte-leise:#4d4c49;
  --rot:#ce5a57;            /* Rot der Linien im Briefkopf, nur für Linien */
  --haar:#dedbd5;
  --feld:#ffffff;
  --flaeche:#f6f5f2;        /* Karten auf hellem Grund */
  --knopf-text:#ffffff;
  --granit-schleier:rgba(255,255,255,0);
  --leiste-glas:rgba(255,255,255,.84);
  /* dunkle Steinflächen: in beiden Farbschemata gleich */
  --stein-dunkel:#121212;
  --hell:#ece9e3;
  --hell-leise:#bdb8af;
  --rot-hell:#e07470;
  --breite:1180px;
  --rand:clamp(16px,4.2vw,44px);
  --spalt:clamp(28px,4.4vw,60px);
  --abstand:clamp(72px,10vw,136px);
  --linie-kopf:5px;
  --linie-fuss:2px;
  --serif:"Rudaj Schola","Century Schoolbook","New Century Schoolbook","TeX Gyre Schola",Georgia,serif;
  --grotesk:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --kapital:"Rudaj Copperplate","Copperplate","Copperplate Gothic Light",var(--grotesk);
  --stein-tief:#050505;
  /* Seitenverhältnis des Zeichens (Breite durch Höhe), aus build.py: der Name bleibt gleich hoch, wie lang er auch ist */
  --zg:7.0536;--zk:12.0112;
  /* Kurven nach Emil Kowalski: kräftiges ease-out für Rückmeldung, ease-in-out für Bewegung; Dauer unter 300 ms */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --papier:#151413;--tinte:#ece9e3;--tinte-leise:#b9b4ab;--rot:#de6f6b;--haar:#3b3936;--feld:#1c1b1a;--flaeche:#1c1b1a;
    --knopf-text:#151413;--granit-schleier:rgba(21,20,19,.5);--leiste-glas:rgba(21,20,19,.84);
  }
}
:root[data-theme="dark"]{
  --papier:#151413;--tinte:#ece9e3;--tinte-leise:#b9b4ab;--rot:#de6f6b;--haar:#3b3936;--feld:#1c1b1a;--flaeche:#1c1b1a;
  --knopf-text:#151413;--granit-schleier:rgba(21,20,19,.5);--leiste-glas:rgba(21,20,19,.84);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:80px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--papier);color:var(--tinte);font-family:var(--serif);
  font-size:1.125rem;line-height:1.55;font-kerning:normal;text-rendering:optimizeLegibility;overflow-wrap:break-word}
a{color:inherit;text-decoration-color:var(--rot);text-decoration-thickness:1px;text-underline-offset:3px;
  transition:text-decoration-color 160ms ease}
@media (hover:hover) and (pointer:fine){a:hover{text-decoration-thickness:2px}}
/* Markierung und Schreibmarke: auch die Teile des Browsers tragen die Hausfarben */
::selection{background:var(--tinte);color:var(--papier)}
.dunkel ::selection,.fuss ::selection{background:var(--hell);color:#151515}
.dunkel .formular-karte ::selection{background:var(--tinte);color:var(--papier)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--rot);outline-offset:3px;border-radius:1px}
strong,b{font-weight:700}
p{margin:0 0 1em;text-wrap:pretty}
.rahmen{max-width:var(--breite);margin-inline:auto;padding-inline:var(--rand)}
.zwei{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);column-gap:var(--spalt)}
.nw,.teil{white-space:nowrap}
.trenn{white-space:pre-wrap}
.sprung{position:absolute;left:var(--rand);top:-60px;background:var(--tinte);color:var(--papier);
  padding:10px 14px;font-family:var(--grotesk);font-size:.9375rem;z-index:20}
.sprung:focus{top:10px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ---------------------------------------------------------------- Kopfzeile wie im Briefkopf */
.kopf{padding-top:clamp(18px,3vw,40px)}
.kopf-raster{position:relative;align-items:end;padding-bottom:calc(clamp(14px,1.9vw,24px) + var(--linie-kopf))}
.kopf-raster::after{content:"";position:absolute;left:0;right:0;bottom:0;border-top:var(--linie-kopf) solid var(--rot);transform-origin:left center}
.marke{display:block;width:min(100%,calc(78.7px * var(--zg)));color:var(--tinte);text-decoration:none}
.marke svg,.fuss-marke svg{display:block;width:100%;height:auto;overflow:visible}
.anschrift{font-style:normal;font-size:1.125rem;line-height:2.15;margin-bottom:-.45em}
.anschrift p{margin:0}
.anschrift a{text-decoration:none}
.anschrift a:hover,.navi a:hover{text-decoration:underline;text-decoration-color:var(--rot);
  text-decoration-thickness:2px;text-underline-offset:4px}

/* Menüleiste an der Stelle der Absenderzeile; läuft am Rechner beim Scrollen mit */
.leiste{position:sticky;top:0;z-index:10;background:var(--papier);transition:box-shadow 220ms var(--ease-out)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .leiste{background:var(--leiste-glas);-webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px)}
}
@media (prefers-reduced-transparency:reduce){.leiste{background:var(--papier);-webkit-backdrop-filter:none;backdrop-filter:none}}
.leiste-in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:62px}
.leiste-marke{position:absolute;left:var(--rand);top:50%;transform:translateY(-50%);display:block;color:var(--tinte);
  opacity:0;visibility:hidden;transition:opacity 220ms var(--ease-out),visibility 220ms}
.zeichen-klein{display:block;height:21px;width:auto}
.leiste-in>ul{transition:transform 280ms var(--ease-in-out)}
.leiste.ist-fest{box-shadow:0 10px 28px -20px rgba(0,0,0,.45)}
.leiste.ist-fest .leiste-marke{opacity:1;visibility:visible}
.leiste.ist-fest .leiste-in>ul{transform:translateX(calc(21px * var(--zk) + 32px))}
.leiste-tel{opacity:0;visibility:hidden;transition:opacity 220ms var(--ease-out),visibility 220ms}
.leiste.ist-fest .leiste-tel{opacity:1;visibility:visible}
.navi ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;
  font-family:var(--grotesk);font-size:.9375rem;letter-spacing:.01em}
.navi li{display:flex;align-items:center}
.navi li+li::before{content:"";width:3px;height:3px;border-radius:50%;background:currentColor;margin-inline:12px;opacity:.7}
.navi a{display:inline-block;padding:10px 0;text-decoration:none}
.navi a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--rot);text-decoration-thickness:2px;text-underline-offset:6px}
.navi a:hover{text-underline-offset:6px}
.leiste-rechts{display:flex;align-items:center;gap:20px}
.leiste-tel{font-family:var(--grotesk);font-size:.9375rem;font-weight:700;text-decoration:none;white-space:nowrap}
.leiste-tel span{font-weight:400;color:var(--tinte-leise);margin-right:2px}
.leiste-tel:hover{text-decoration:underline;text-decoration-color:var(--rot);text-decoration-thickness:2px;text-underline-offset:4px}

/* ---------------------------------------------------------------- Knöpfe */
.knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:10px 22px;
  font-family:var(--serif);font-weight:700;font-size:1.0625rem;line-height:1.2;text-decoration:none;
  background:var(--tinte);color:var(--knopf-text);border:2px solid var(--tinte);border-radius:0;
  box-shadow:inset 0 0 0 var(--rot);cursor:pointer}
.knopf{transition:box-shadow 160ms var(--ease-out),transform 160ms var(--ease-out)}
.knopf:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.knopf:hover{box-shadow:inset 0 -5px 0 var(--rot)}}
.knopf-zweit{background:transparent;color:var(--tinte)}
.knopf-kopf{min-height:44px;padding:8px 20px;font-size:1rem}
.knopf[disabled]{opacity:.6;cursor:progress}

/* ---------------------------------------------------------------- Überschriften */
h1{font-weight:700;font-size:clamp(1.85rem,3.3vw,2.75rem);line-height:1.14;letter-spacing:-.005em;margin:0 0 .55em;max-width:15em;text-wrap:balance}
h1.gross{font-size:clamp(2.25rem,4.2vw,3.3rem);line-height:1.04;letter-spacing:-.02em;max-width:12.5em;margin-bottom:.5em}
h2{font-weight:700;font-size:clamp(1.7rem,3.1vw,2.7rem);line-height:1.1;letter-spacing:-.012em;margin:0 0 .5em;text-wrap:balance}
h3{font-weight:700;font-size:1.25rem;line-height:1.28;margin:0 0 .4em;text-wrap:balance}
.vorspann{margin:0 0 1.8em;max-width:30em;font-size:clamp(1.125rem,1.4vw,1.3125rem);line-height:1.5;text-wrap:pretty}
.seitenkopf .vorspann:last-child{margin-bottom:0}

/* Überzeile über den Abschnitten: Nummer · Name */
.ueberzeile{font-family:var(--kapital);font-size:1rem;letter-spacing:.12em;color:var(--tinte-leise);margin:0 0 1.1em}
.karte-titel{font-family:var(--kapital);letter-spacing:.12em}

/* ---------------------------------------------------------------- Einstieg */
.einstieg{padding-top:clamp(44px,7vw,104px)}
.einstieg-raster{align-items:center}
.einstieg .knoepfe{margin-top:4px}

/* Bühne: wie im Zeichen stehen die Steine rechts neben dem Namen. Die Marmorfläche reicht bis an den
   rechten Rand, die Karte liegt halb auf dem Papier, halb auf dem Stein. */
.buehne{overflow:clip;padding-top:0}
.buehne .einstieg-raster{align-items:stretch}
.buehne-text{padding-block:clamp(56px,8vw,120px);align-self:center}
.buehne-stein{position:relative;display:flex;align-items:center;padding-block:clamp(76px,9vw,140px) clamp(48px,6vw,88px)}
.buehne-stein::before{content:"";position:absolute;top:clamp(28px,3.6vw,52px);bottom:0;left:clamp(48px,6vw,96px);
  right:calc(-1 * (max(0px,(100vw - var(--breite)) / 2) + var(--rand)));
  background-color:var(--stein-tief);
  background-image:linear-gradient(90deg,rgba(5,5,5,.35),rgba(5,5,5,0) 60%),url(marmor-1400.webp);
  background-size:cover;background-position:30% center}
.buehne-stein .karte{position:relative;width:100%;box-shadow:0 30px 60px -28px rgba(0,0,0,.55)}
/* Ohne Karte (Startseite, Betrieb): rechts nur die Marmorfläche, vom Spaltenanfang bis an den Rand */
@media (min-width:761px){.buehne:has(.nur-stein) .einstieg-raster{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}}
.buehne-stein.nur-stein{min-height:clamp(340px,36vw,560px);padding:0}
.buehne-stein.nur-stein::before{left:0}
.karte-granit{border-top:12px solid transparent;border-image:url(granit-900.webp) 30 / 12px 0 0 0 stretch}

/* Steinplatte aus weißem Granit, darauf eine Karte wie ein Briefbogen */
.platte{padding:clamp(16px,2.6vw,34px);background-color:#e6e6e3;
  background-image:linear-gradient(var(--granit-schleier),var(--granit-schleier)),url(granit-900.webp);
  background-size:cover;background-position:center}
.karte{background:var(--papier);padding:clamp(20px,2.4vw,30px);box-shadow:0 22px 44px -30px rgba(0,0,0,.45)}
.karte-titel{font-size:.9375rem;color:var(--tinte-leise);margin:0 0 14px}
.karte-zusatz{margin:14px 0 0;font-size:1rem}

/* Angaben wie „Verlegung von:“ im Briefkopf, mit roter Linie darunter */
.steckbrief{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:1.4em;row-gap:.35em;
  padding-bottom:1.1em;border-bottom:var(--linie-kopf) solid var(--rot)}
.steckbrief dt,.steckbrief dd{margin:0}
.steckbrief .teil{white-space:normal}  /* Anschrift darf an Bindestrichen umbrechen, „Str. 31“ bleibt zusammen */
.steckbrief a{text-decoration-line:underline}
.steckbrief a[href^="tel"]{text-decoration-line:none}
.steckbrief a[href^="tel"]:hover{text-decoration-line:underline}
.wege{grid-template-columns:auto minmax(0,1fr);row-gap:.7em}
/* Arbeitsweise wie „Verlegung von:“ im Briefkopf */
.steckbrief.liste{grid-template-columns:7.6em minmax(0,1fr);row-gap:.9em;margin-top:calc(.9375rem * 1.55 + 1.1em)}
.kontaktliste{margin-top:1.8em}
.unterlagen{margin-top:1.6em}
.unterlagen ul{margin:0;padding:0;list-style:none}
.unterlagen li+li{margin-top:.25em}

/* Kennzahlen, nur mit bestätigten Werten */
.kennzahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(11em,1fr));gap:24px var(--spalt);margin:clamp(40px,5vw,64px) 0 0}
.kennzahlen div{border-top:var(--linie-fuss) solid var(--rot);padding-top:12px;display:flex;flex-direction:column-reverse}
.kennzahlen dt{font-family:var(--grotesk);font-size:.9375rem;color:var(--tinte-leise)}
.kennzahlen dd{margin:0;font-weight:700;font-size:clamp(1.6rem,2.6vw,2.1rem);line-height:1.15}

/* ---------------------------------------------------------------- Abschnitte */
.abschnitt{padding-top:var(--abstand)}
.abschnitt-raster{border-top:1px solid var(--haar);padding-top:clamp(26px,3.2vw,40px);align-items:start}
.abschnitt-text{margin:0;padding-top:calc(.9375rem * 1.55 + 1em);max-width:31em}
.abschnitt-raster.einspaltig{grid-template-columns:minmax(0,1fr)}
.abschnitt-raster.einspaltig .abschnitt-text{padding-top:0;max-width:36em}
.abschnitt-raster.einspaltig h2{max-width:18em}
.abschnitt p{max-width:33em}
.abschnitt .formular p{max-width:none}
.weiter-zeile{margin-top:1.4em}
.weiter{font-weight:700;text-decoration-line:underline;text-decoration-color:var(--rot);text-decoration-thickness:2px;text-underline-offset:5px}
.weiter:hover{text-decoration-thickness:3px}
.weiter span{display:inline-block;text-decoration:inherit;transition:transform 240ms var(--ease-out)}
.notiz{font-family:var(--grotesk);font-size:.9375rem;color:var(--tinte-leise)}
.notiz a{color:var(--tinte)}

/* Karten in Reihen (Arbeitsweise, Ablauf): rote Linie oben wie im Briefkopf */
.reihe{list-style:none;margin:clamp(32px,4vw,52px) 0 0;padding:0;display:grid;gap:36px clamp(20px,2.6vw,36px)}
.reihe-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.reihe>li{position:relative;padding-top:calc(18px + var(--linie-fuss))}
.reihe>li::before{content:"";position:absolute;left:0;right:0;top:0;border-top:var(--linie-fuss) solid var(--rot);transform-origin:left center}
.reihe h3{font-size:1.3125rem;margin-bottom:.35em}
.reihe p{margin:0;font-size:1.0625rem;line-height:1.55;color:var(--tinte);text-wrap:pretty}
.reihe .nummer{display:block;font-family:var(--kapital);font-weight:400;font-size:clamp(2.5rem,3.6vw,3.25rem);line-height:1;letter-spacing:.02em;margin:0 0 .45em}


/* Band aus weißem Granit, darauf eine große Karte */
.granit-band{margin-top:var(--abstand);padding-block:clamp(40px,6vw,88px);background-color:#e6e6e3;
  background-image:linear-gradient(var(--granit-schleier),var(--granit-schleier)),url(granit-1400.webp);background-size:cover;background-position:center}
.granit-band .karte{padding:clamp(28px,4vw,56px)}
.granit-band .abschnitt-raster{border-top:0;padding-top:0}
.granit-band + .abschnitt>.rahmen>.abschnitt-raster:first-child{border-top:0;padding-top:0}

/* Einsatzgebiet: Städte und Landkreise als Liste */
.gebiet-gruppe+.gebiet-gruppe{margin-top:26px}
.gebiet-titel{font-family:var(--kapital);letter-spacing:.12em;font-size:.9375rem;color:var(--tinte-leise);margin:0 0 8px;padding-bottom:8px;border-bottom:1px solid var(--haar)}
.gebiet-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 24px;font-size:1.0625rem}
.gebiet-liste.staedte{grid-template-columns:repeat(3,minmax(0,1fr));font-size:1.3125rem;font-weight:700}
.gebiet-zeile{margin:22px 0 0;padding-top:14px;border-top:var(--linie-kopf) solid var(--rot);font-size:1rem;color:var(--tinte-leise)}

/* Partner und Karriere: zwei Wege als Karten */
.wege-karten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,64px);margin-top:clamp(32px,4vw,52px)}
.weg{display:flex;flex-direction:column;padding:clamp(20px,2.2vw,28px) 0 0;background:none;border:0;border-top:var(--linie-kopf) solid var(--rot)}
.weg h3{font-size:clamp(1.4rem,2vw,1.75rem);line-height:1.15;margin-bottom:.45em}
.weg{transition:border-color 160ms ease}
@media (hover:hover) and (pointer:fine){.weg:hover{border-color:var(--tinte-leise);border-top-color:var(--rot)}}
.weg .karte-titel{margin-bottom:10px}
.weg p{color:var(--tinte-leise);margin-bottom:1.2em}
.weg .weiter{margin-top:auto;align-self:flex-start}

/* Fotos aus der Arbeit */
.fotos{list-style:none;margin:clamp(24px,3vw,36px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
.fotos figure{margin:0}
.fotos img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:var(--haar)}
.fotos figcaption{font-family:var(--grotesk);font-size:.9375rem;line-height:1.45;color:var(--tinte-leise);
  padding-top:10px;margin-top:10px;border-top:var(--linie-fuss) solid var(--rot)}

/* Inhaber */
.inhaber-bild{display:block;width:min(100%,320px);height:auto;aspect-ratio:4/5;object-fit:cover;margin:0 0 1.2em;background:var(--haar)}

/* Steht ein Formular rechts, bleibt der Text links beim Scrollen stehen */
@media (min-width:761px){
  .abschnitt-raster:has(>.formular-karte)>div:first-child{position:sticky;top:96px}
}

/* ---------------------------------------------------------------- Dunkle Fläche aus schwarzem Marmor */
.dunkel{margin-top:var(--abstand);padding-block:clamp(64px,8vw,112px);color:var(--hell);background-color:var(--stein-tief);
  background-image:linear-gradient(90deg,rgba(5,5,5,.88) 0%,rgba(5,5,5,.62) 48%,rgba(5,5,5,.2) 100%),url(marmor-1400.webp);
  background-size:cover;background-position:center}
.dunkel .abschnitt-raster{border-top:0;padding-top:0}
.dunkel .ueberzeile{color:var(--hell-leise)}
.dunkel a{text-decoration-color:var(--rot-hell)}
.dunkel a:focus-visible{outline-color:var(--rot-hell)}
.dunkel .knopf{background:var(--hell);color:#151515;border-color:var(--hell)}
.dunkel .knopf-zweit{background:transparent;color:var(--hell)}
@media (hover:hover) and (pointer:fine){.dunkel .knopf:hover{box-shadow:inset 0 -5px 0 var(--rot-hell)}}
.dunkel .steckbrief{border-bottom-color:var(--rot-hell)}
.dunkel p{color:var(--hell)}
.dunkel .leise{color:var(--hell-leise)}
.aufruf-knoepfe{align-self:center;justify-content:flex-start}

/* ---------------------------------------------------------------- Formulare */
.formular-karte{background:var(--papier);color:var(--tinte);padding:clamp(22px,3vw,40px);outline:1px solid var(--haar);box-shadow:0 26px 50px -32px rgba(0,0,0,.6)}
.dunkel .formular-karte{outline:0}
/* die weiße Formularkarte auf dem Marmor behält die Farben des Papiers */
.dunkel .formular-karte p{color:var(--tinte)}
.dunkel .formular-karte .hinweis,.dunkel .formular-karte .opt{color:var(--tinte-leise)}
.dunkel .formular-karte a{text-decoration-color:var(--rot)}
.dunkel .formular-karte a:focus-visible{outline-color:var(--rot)}
.dunkel .formular-karte .knopf{background:var(--tinte);color:var(--knopf-text);border-color:var(--tinte)}
.dunkel .formular-karte .knopf-zweit{background:transparent;color:var(--tinte)}
@media (hover:hover) and (pointer:fine){.dunkel .formular-karte .knopf:hover{box-shadow:inset 0 -5px 0 var(--rot)}}
.formular{display:grid;gap:18px;align-content:start}
.feld{margin:0;padding:0;border:0;min-width:0}
.feld label,.feld legend{display:block;font-weight:700;font-size:1rem;margin-bottom:6px;padding:0}
.opt{font-family:var(--grotesk);font-weight:400;font-size:.875rem;color:var(--tinte-leise)}
.eingabe,.textfeld{display:block;width:100%;min-height:50px;padding:11px 12px;font:inherit;font-size:1.0625rem;line-height:1.4;
  color:var(--tinte);background:var(--feld);border:1px solid var(--tinte-leise);border-radius:0;appearance:none}
.textfeld{resize:vertical;min-height:132px}
.auswahl{padding-right:40px;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 20px) 52%,calc(100% - 14px) 52%;background-size:6px 6px;background-repeat:no-repeat}
.eingabe:focus,.textfeld:focus{outline:3px solid var(--rot);outline-offset:1px;border-color:var(--tinte)}
.eingabe::placeholder,.textfeld::placeholder{color:var(--tinte-leise);opacity:1}
[aria-invalid="true"]{border-color:var(--rot);border-width:2px}
.fehler-text{margin:8px 0 0;padding-left:10px;border-left:3px solid var(--rot);font-family:var(--grotesk);font-size:.9375rem}
.wahl{display:flex;flex-wrap:wrap;gap:8px}
.wahl label{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin:0;padding:8px 14px;
  font-weight:400;font-size:1rem;border:1px solid var(--haar);cursor:pointer}
.wahl label{transition:border-color 160ms ease,box-shadow 160ms var(--ease-out)}
.wahl label:has(input:checked){border-color:var(--tinte);box-shadow:inset 0 -3px 0 var(--rot)}
.eingabe,.textfeld{caret-color:var(--rot)}
.wahl input{margin:0;width:18px;height:18px;accent-color:var(--tinte);flex:none}
.form-schritt{font-family:var(--kapital);font-size:.9375rem;letter-spacing:.12em;color:var(--tinte-leise);margin:10px 0 -4px;
  padding-top:12px;border-top:1px solid var(--haar)}
.form-schritt:first-of-type{margin-top:0;padding-top:0;border-top:0}
.form-schritt .nr{color:var(--tinte);font-weight:700}
.form-fuss{display:grid;gap:14px;margin-top:4px}
.form-fuss .knopf{justify-self:start}
.hinweis{margin:0;font-family:var(--grotesk);font-size:.875rem;line-height:1.5;color:var(--tinte-leise)}
.hinweis a{color:var(--tinte)}
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-status{padding:16px 18px;border-left:5px solid var(--rot);background:var(--feld);outline:1px solid var(--haar)}
.form-status h3{font-size:1.0625rem;margin:0 0 .4em}
.form-status p{font-size:1rem;margin:0 0 .6em}
.form-status pre{white-space:pre-wrap;font-family:var(--grotesk);font-size:.875rem;line-height:1.5;margin:10px 0;padding:12px;border:1px solid var(--haar);max-height:16em;overflow:auto}
.status-aktionen{display:flex;flex-wrap:wrap;gap:10px}
.status-aktionen .knopf{min-height:44px;font-size:.9375rem;padding:6px 14px}

/* ---------------------------------------------------------------- Rechtstexte */
.rechtstext{padding-top:clamp(44px,7vw,96px)}
.rechtstext-in{max-width:38em}
.inhalt-liste{margin:1.6em 0 2.4em;padding:16px 0 18px;border-top:var(--linie-fuss) solid var(--rot);border-bottom:1px solid var(--haar)}
.inhalt-liste p{font-family:var(--kapital);letter-spacing:.12em;font-size:.9375rem;color:var(--tinte-leise);margin:0 0 8px}
.inhalt-liste ol{list-style:none;margin:0;padding:0;columns:2;column-gap:32px;font-family:var(--grotesk);font-size:.9375rem;line-height:1.5}
.inhalt-liste li{break-inside:avoid}
.inhalt-liste a{display:inline-block;padding:4px 0;text-decoration:none}
@media (hover:hover) and (pointer:fine){.inhalt-liste a:hover{text-decoration:underline;text-decoration-color:var(--rot);text-decoration-thickness:2px}}
.rechtstext h2{scroll-margin-top:96px}
.rechtstext h2{font-size:1.25rem;margin:1.8em 0 .5em}
.rechtstext address{font-style:normal;margin:0 0 1em}
.rechtstext ul{padding-left:1.2em;margin:0 0 1em}
.rechtstext li+li{margin-top:.25em}
.stand{margin-top:2.4em;font-family:var(--grotesk);font-size:.9375rem;color:var(--tinte-leise)}
.offen{outline:2px dashed var(--rot);outline-offset:1px;background:var(--haar);padding:0 .2em}

/* ---------------------------------------------------------------- Fußzeile auf schwarzem Marmor */
.fuss{margin-top:var(--abstand);padding-block:clamp(48px,6vw,80px) clamp(28px,4vw,44px);color:var(--hell);
  font-family:var(--grotesk);font-size:.9375rem;line-height:1.6;background-color:var(--stein-tief);
  background-image:linear-gradient(rgba(5,5,5,.8),rgba(5,5,5,.8)),url(marmor-1400.webp);background-size:cover;background-position:center bottom}
main:has(>.dunkel:last-child)+.fuss{margin-top:0;padding-top:0;background-position:center top}
main:has(>.dunkel:last-child)+.fuss .fuss-oben{border-top:1px solid rgba(236,233,227,.18);padding-top:clamp(40px,5vw,64px)}
.fuss a{text-decoration:none}
.fuss a:hover{text-decoration:underline;text-decoration-color:var(--rot-hell);text-decoration-thickness:2px;text-underline-offset:4px}
.fuss a:focus-visible{outline-color:var(--rot-hell)}
.fuss-oben{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);column-gap:var(--spalt);row-gap:36px;padding-bottom:clamp(36px,4vw,56px)}
.fuss-marke{display:block;width:min(100%,calc(56.9px * var(--zg)));color:var(--hell)}
.fuss-satz{margin:18px 0 0;max-width:26em;color:var(--hell-leise);font-family:var(--serif);font-size:1.0625rem}
.fuss-spalten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.fuss-spalten h2{font-family:var(--kapital);font-size:.9375rem;font-weight:400;letter-spacing:.12em;color:var(--hell-leise);margin:0 0 12px}
.fuss-spalten ul{list-style:none;margin:0;padding:0}
.fuss-spalten li+li{margin-top:4px}
.fuss-spalten a{display:inline-block;padding:2px 0}
.fuss-raster{border-top:var(--linie-fuss) solid var(--rot-hell);padding-top:12px;color:var(--hell-leise)}
.fuss-raster p{margin:0}
.fuss-raster strong{color:var(--hell);font-weight:400}

/* ---------------------------------------------------------------- Bewegung
   Grundlage: Emil Kowalski (Zweck, ease-out, kurz), Taste (ein Auftakt statt gleicher Einblendung
   überall), Nielsen Norman Group (Einblendungen beim Scrollen kurz und nur einmal), Apple HIG und
   WCAG 2.3.3 (bei „Bewegung reduzieren“ entfällt alles Verschieben). Nur transform, opacity, clip-path.
   1. Auftakt, nur Startseite, ohne JavaScript, nach 1,2 s fertig: die rote Linie des Briefkopfs wird
      gezogen, der Marmor hinter dem Steckbrief aufgedeckt. Text, Knöpfe und Steckbrief stehen ab dem
      ersten Bild.
   2. Einblenden beim Scrollen, nur unterhalb des ersten Bildschirms, einmal: der Ablauf Schritt für
      Schritt (erst die Linie, dann der Schritt), die Karte auf dem Granit. Versteckt wird nur, wenn
      site.js läuft (Klasse .bewegung); ohne Skript ist alles sofort da.
   3. Rückmeldung: Linie unter dem Menüpunkt, Pfeil an Links, Meldungen im Formular blenden ein.
   4. Seitenwechsel: kurze Überblendung (View Transitions); Browser ohne Unterstützung wechseln wie bisher. */
@keyframes linie-ziehen{from{transform:scaleX(0)}to{transform:none}}
@keyframes stein-aufdecken{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:no-preference){
  body:has(.auftakt) .kopf-raster::after{animation:linie-ziehen 760ms var(--ease-out) 60ms both}
  .auftakt .buehne-stein::before{animation:stein-aufdecken 1040ms var(--ease-in-out) 140ms both}

  /* Der Übergang steht nur am Zielzustand: Verstecken geschieht sofort und unsichtbar, nur das Erscheinen bewegt sich */
  .bewegung [data-auftritt]:not(.ist-da){opacity:0;transform:translateY(20px)}
  .bewegung [data-auftritt].ist-da{transition:opacity 520ms var(--ease-out),transform 520ms var(--ease-out);transition-delay:calc(var(--folge,0) * 80ms)}
  /* Ablauf: der Schritt selbst bleibt stehen, erst wird seine Linie gezogen, dann erscheint der Inhalt */
  .bewegung .reihe>li[data-auftritt]:not(.ist-da),.bewegung .reihe>li[data-auftritt].ist-da{opacity:1;transform:none;transition:none}
  .bewegung .reihe>li[data-auftritt]:not(.ist-da)::before{transform:scaleX(0)}
  .bewegung .reihe>li[data-auftritt].ist-da::before{transition:transform 480ms var(--ease-out) calc(var(--folge,0) * 80ms)}
  .bewegung .reihe>li[data-auftritt]:not(.ist-da)>*{opacity:0;transform:translateY(10px)}
  .bewegung .reihe>li[data-auftritt].ist-da>*{transition:opacity 420ms var(--ease-out),transform 420ms var(--ease-out);
    transition-delay:calc(var(--folge,0) * 80ms + 120ms)}
}

/* Menü: am Rechner wird beim Zeigen eine rote Linie unter den Punkt gezogen */
@media (hover:hover) and (pointer:fine){
  .leiste-in>ul a:not([aria-current]){background:linear-gradient(var(--rot),var(--rot)) no-repeat left 0 bottom 5px / 0 2px;
    transition:background-size 260ms var(--ease-out)}
  .leiste-in>ul a:not([aria-current]):hover{text-decoration:none;background-size:100% 2px}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.weiter:hover span{transform:translateX(3px)}}

/* Meldungen im Formular erscheinen weich statt schlagartig */
.form-status,.fehler-text{transition:opacity 200ms ease}
@starting-style{.form-status,.fehler-text{opacity:0}}
@media (prefers-reduced-motion:no-preference){
  .form-status{transition:opacity 220ms ease,transform 280ms var(--ease-out)}
  @starting-style{.form-status{transform:translateY(8px)}}
}

/* Seitenwechsel innerhalb der Website: kurze Überblendung */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:200ms}

/* ---------------------------------------------------------------- Einwilligungsfenster
   Unten am Rand, verdeckt nichts dauerhaft: Solange es offen ist, bekommt die Seite unten so viel Platz,
   dass auch Impressum und Datenschutz in der Fußzeile erreichbar bleiben. „Ablehnen“ und „Akzeptieren“
   sind gleich groß und gleich gestaltet. Ohne JavaScript erscheint es nicht (dann lädt ohnehin nichts). */
.einwilligung{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:0 var(--rand) max(var(--rand),env(safe-area-inset-bottom,0px));pointer-events:none}
.einwilligung[hidden]{display:none}
.einwilligung-in{pointer-events:auto;max-width:900px;margin-inline:auto;background:var(--papier);color:var(--tinte);
  border-top:var(--linie-kopf) solid var(--rot);outline:1px solid var(--haar);box-shadow:0 22px 60px -14px rgba(0,0,0,.5);
  padding:clamp(18px,2.4vw,28px) clamp(18px,2.8vw,34px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px clamp(20px,3vw,36px);align-items:end}
.einwilligung-titel{grid-column:1 / -1;margin:0;font-family:var(--kapital);font-size:.9375rem;letter-spacing:.12em;color:var(--tinte-leise)}
.einwilligung-text{margin:0;font-size:1rem;line-height:1.5;max-width:38em}
.einwilligung-knoepfe{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0}   /* beide Knöpfe exakt gleich breit */
.einwilligung .knopf{min-height:48px;min-width:8.5em;padding:8px 18px;font-size:1rem}
.fuss-knopf[hidden]{display:none!important}
.fuss-knopf{font:inherit;color:inherit;background:none;border:0;padding:2px 0;cursor:pointer;text-align:left}
.fuss-knopf:hover{text-decoration:underline;text-decoration-color:var(--rot-hell);text-decoration-thickness:2px;text-underline-offset:4px}
.fuss-knopf:focus-visible{outline:3px solid var(--rot-hell);outline-offset:3px}
@media (prefers-reduced-motion:no-preference){
  .einwilligung-in{transition:transform 360ms var(--ease-out),opacity 240ms ease}
  @starting-style{.einwilligung-in{transform:translateY(28px);opacity:0}}
}
@media (prefers-reduced-motion:reduce){
  .einwilligung-in{transition:opacity 200ms ease}
  @starting-style{.einwilligung-in{opacity:0}}
}

/* ---------------------------------------------------------------- Umbrüche */
@media (max-width:1040px){
  .marke{width:min(100%,calc(67px * var(--zg)))}
  .anschrift{font-size:1rem;line-height:2}
  .reihe-5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fotos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .leiste-tel span{display:none}
  .zeichen-klein{height:17px}
  .leiste.ist-fest .leiste-in>ul{transform:translateX(calc(17px * var(--zk) + 24px))}
  .leiste.ist-fest .leiste-tel{display:none}
  .fuss-oben{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1120px){
  /* mitlaufende Leiste: „Telefon“ vor der Nummer entfällt, damit RUDAJ BAU, Menü und Nummer nebeneinander passen */
  .leiste-tel span{display:none}
}
@media (max-width:920px){
  /* zu schmal für Zeichen und Menü nebeneinander: die Leiste bleibt wie oben */
  .leiste .leiste-marke{display:none}
  .leiste.ist-fest .leiste-in>ul{transform:none}
}
@media (max-width:860px){
  .wege-karten{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  h1.gross{font-size:clamp(1.65rem,8.3vw,2.4rem)}   /* „Ein Familienbetrieb“ bleibt auch bei 320 px in einer Zeile */
  :root{--linie-kopf:4px;--abstand:clamp(60px,15vw,80px)}
  html{scroll-padding-top:16px}
  body{font-size:1.0625rem}
  .zwei{grid-template-columns:minmax(0,1fr)}
  .kopf-raster{row-gap:14px}
  .marke{width:min(100%,calc(63.6px * var(--zg)))}
  .kopf{padding-top:14px}
  .anschrift{font-size:.96875rem;line-height:1.6;margin-bottom:0}
  .leiste .leiste-marke{display:none}
  .leiste{position:static;border-bottom:0}
  .leiste-in{display:block;min-height:0;padding-top:2px}
  .navi ul{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
  .navi li+li::before{content:none}
  .navi a{display:flex;align-items:center;min-height:44px;padding:0}
  .leiste-rechts{display:none}
  .vorspann{font-size:1.0625rem}
  .einstieg-raster{row-gap:36px}
  .platte{padding:14px}
  .buehne-text{padding-block:28px 28px}
  .buehne-stein{padding-block:44px 28px}
  .buehne-stein::before{top:16px}
  .buehne-stein.nur-stein{min-height:clamp(190px,52vw,300px)}
  .buehne-stein.nur-stein::before{top:0}
  .buehne-stein::before{left:calc(-1 * var(--rand));right:calc(-1 * var(--rand))}
  .granit-band{padding-block:28px}
  .granit-band .karte{padding:24px 18px}
  .steckbrief{grid-template-columns:auto minmax(0,1fr)}
  .wege{grid-template-columns:minmax(0,1fr);row-gap:.2em}
  .wege dd+dt{margin-top:.8em}
  .wege dt{font-weight:700}
  .steckbrief.liste{grid-template-columns:minmax(0,1fr);row-gap:.2em;margin-top:28px}
  .steckbrief.liste dd+dt{margin-top:.8em}
  .steckbrief.liste dt{font-weight:700}
  .knopf{flex:1 1 100%}
  .form-fuss .knopf{justify-self:stretch}
  .abschnitt-text{padding-top:0}
  .abschnitt-raster>div+*{margin-top:8px}
  .abschnitt-raster>.formular-karte{margin-top:28px}
  .reihe-5{grid-template-columns:minmax(0,1fr);gap:22px}
  .reihe-5>li{display:grid;grid-template-columns:3.2rem minmax(0,1fr);column-gap:10px;padding-top:calc(14px + var(--linie-fuss))}
  .reihe-5 .nummer{grid-row:span 2;font-size:1.75rem;margin:0}
  .reihe-5 h3{margin-bottom:.15em}
  .gebiet-liste{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 16px;font-size:1rem}
  .gebiet-liste.staedte{grid-template-columns:minmax(0,1fr)}
  .fotos{grid-template-columns:minmax(0,1fr)}
  .dunkel{background-image:linear-gradient(rgba(5,5,5,.78),rgba(5,5,5,.78)),url(marmor-900.webp)}
  .fuss{background-image:linear-gradient(rgba(5,5,5,.8),rgba(5,5,5,.8)),url(marmor-900.webp)}
  .buehne-stein::before{background-image:url(marmor-900.webp)}
  .formular-karte{padding:20px 16px;margin-inline:calc(var(--rand) * -.5)}
  .fuss-spalten{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .fuss-spalten>div:first-child{grid-column:1 / -1}
  .fuss-spalten a,.fuss-knopf{display:flex;align-items:center;min-height:44px;padding:0}
  .einwilligung-in{grid-template-columns:minmax(0,1fr)}
  .einwilligung-knoepfe .knopf{min-width:0}
  .fuss-spalten li+li{margin-top:0}
  .inhalt-liste ol{columns:1}
  .inhalt-liste a{display:flex;align-items:center;min-height:44px;padding:0}
}
@media (max-width:560px){
  /* in der Karte: Bezeichnung über dem Wert, damit lange Wörter nicht mitten im Wort umbrechen */
  .karte .steckbrief{grid-template-columns:minmax(0,1fr);row-gap:0}
  .karte .steckbrief dt{font-family:var(--grotesk);font-size:.875rem;color:var(--tinte-leise)}
  .karte .steckbrief dd+dt{margin-top:.7em}
  .karte .wege dt{font-weight:400}
}
@media (max-width:374px){
  .anschrift .trenn{display:none}
  .anschrift .teil{display:block}
  .anschrift{line-height:1.6}
  .steckbrief{grid-template-columns:minmax(0,1fr)}
  .steckbrief dd+dt{margin-top:.5em}
  .wahl label{width:100%}
  .gebiet-liste{grid-template-columns:minmax(0,1fr)}
  .fuss-spalten{grid-template-columns:minmax(0,1fr)}
}
/* Mehr Kontrast: Linien und Nebentext kräftiger */
@media (prefers-contrast:more){
  :root{--haar:#8a8781;--tinte-leise:#2d2c2a}
  .eingabe,.textfeld{border-color:var(--tinte)}
}
@media (prefers-contrast:more) and (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--haar:#7d7a74;--tinte-leise:#dcd8d0}
}
/* Bewegung reduzieren: weniger Bewegung, nicht weniger Rückmeldung. Verschieben und Skalieren entfallen, kurze Blenden bleiben. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .knopf:active{transform:none}
  .leiste-in>ul{transition:none}
  *,*::before,*::after{animation:none!important}
}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
@media print{
  .leiste,.knoepfe,.sprung,.formular-karte,.weiter-zeile,.einwilligung,.fuss-knopf{display:none}
  body{font-size:11pt}
  .dunkel,.fuss{background:none;color:#151515}
  .abschnitt{padding-top:24pt;break-inside:avoid}
  a{text-decoration:none}
  .kopf-raster::after,.reihe>li::before,[data-auftritt],[data-auftritt]>*{opacity:1!important;transform:none!important;animation:none!important}
}