/* Gemeinsame Basis aller Unterseiten: barrierefreies Bad, bodengleiche Dusche,
   Impressum, Datenschutz. Dieselben Schriften und dieselbe Palette wie die
   Startseite, damit die Marke nicht auf halbem Weg abreisst. Schriften kommen
   aus assets/fonts/fonts.css, nicht aus einem zweiten Satz.
   Stand Oktober 2026: Cabinet Grotesk und Barlow Semi Condensed, Glasleiste,
   Goldknopf und dunkle Flaeche wie auf der Startseite. */

:root{
  --paper:#f4f4f3;
  --ink:#171717;
  --ink-soft:#3f3f3f;
  --muted:#5c5c5c;
  --line:rgba(23,23,23,.11);
  --line-soft:rgba(23,23,23,.06);
  --gold:#948020;
  --gold-text:#665415;
  --gold-hell:#dcc678;
  --glass-edge:rgba(255,255,255,.92);
  --display:'Cabinet Grotesk',system-ui,sans-serif;
  --body:'Barlow Semi Condensed',system-ui,sans-serif;
  --rand:clamp(20px,4vw,56px);
  /* Inhalt beginnt auf derselben Kante wie die Leiste oben */
  --kante:max(var(--rand),calc((100% - 1220px) / 2));
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--body);font-size:19px;line-height:1.55;color:var(--ink);
  background:radial-gradient(60% 40% at 90% 0%,rgba(148,128,32,.10) 0%,transparent 60%),linear-gradient(180deg,#f6f6f5 0%,#ffffff 40%,#f4f4f3 100%);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-color:var(--gold);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ---------- Kopfzeile: dieselbe schwebende Glasleiste wie auf der Startseite ---------- */
/* Kopf: Briefkopf wie auf der Startseite, Wortmarke mit Gewerk, Goldlinie als Abschluss */
.kopf{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px var(--kante) 15px;
  background:#f4f4f3;border-bottom:1px solid rgba(148,128,32,.7);
}
.kopf-name{display:flex;align-items:center;gap:14px;text-decoration:none;font-family:var(--display)}
.kopf-name img{width:auto;height:36px}
.marke-text{display:grid;line-height:1.02;white-space:nowrap}
.marke-text b{font-weight:800;font-size:24px;letter-spacing:-.02em}
.marke-text small{font-family:var(--body);font-weight:500;font-size:15px;letter-spacing:.03em;color:var(--muted);margin-top:5px}
.kopf-rechts{display:flex;align-items:center;gap:clamp(14px,2vw,28px)}
.kopf-tel{font-weight:600;font-size:18px;text-decoration:none;font-variant-numeric:tabular-nums;white-space:nowrap}
.kopf-tel:hover{color:var(--gold-text)}
.kopf-zurueck{font-size:18px;text-decoration:none}
.kopf-zurueck:hover{color:var(--gold-text)}
@media(max-width:940px){ .kopf{padding:10px 10px 10px var(--rand)} .kopf-name img{height:28px} .marke-text b{font-size:20px} .marke-text small{font-size:13px;margin-top:3px} }
@media(max-width:620px){ .kopf-zurueck{display:none} }
@media(max-width:480px){
  .kopf-tel{flex:none;width:44px;height:44px;border-radius:50%;font-size:0;color:transparent;
    background:linear-gradient(150deg,#e9d48a,#c9ac45);box-shadow:0 6px 14px rgba(148,128,32,.28)}
  .kopf-tel::before{content:"";display:block;width:100%;height:100%;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23171717'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center/20px no-repeat}
}
@media(max-width:430px){ .marke-text small{letter-spacing:0;font-size:12px} }
@media(max-width:389px){ .kopf-name{gap:8px} .kopf-name img{height:22px} .marke-text b{font-size:18px} .marke-text small{font-size:11px} }
@media(max-width:374px){ .kopf-name img{height:20px} }
@media(max-width:359px){ .kopf-name img{display:none} }

/* ---------- Grundraster ---------- */
.bahn{padding:clamp(56px,8vw,112px) var(--kante)}
.bahn-eng{max-width:74ch;margin:0 auto}
.bahn + .bahn{padding-top:0}

h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.022em;color:var(--ink);text-wrap:balance}
h1{font-size:clamp(34px,4.2vw,58px);line-height:1.03;max-width:17ch;margin-bottom:.5em}
h2{font-size:clamp(28px,3.2vw,44px);line-height:1.08;max-width:20ch;margin:1.4em 0 .5em}
h3{font-size:clamp(21px,1.9vw,27px);line-height:1.15;letter-spacing:-.015em;max-width:26ch;margin:1.4em 0 .4em}
p{max-width:66ch;margin:0 0 1em}
p:last-child{margin-bottom:0}
.vorlauf{display:block;margin-bottom:1em;font-size:15px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-text)}
.lead{font-size:clamp(19px,1.5vw,22px);line-height:1.5;color:var(--ink-soft);max-width:52ch}
strong,b{font-weight:600}
.zahl{font-variant-numeric:tabular-nums lining-nums}

ul.liste{list-style:none;max-width:66ch;margin:6px 0 1.2em}
ul.liste li{padding:16px 0;border-top:1px solid var(--line)}
ul.liste li:last-child{border-bottom:1px solid var(--line)}
ul.liste b{display:block;font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.01em}
ul.liste span{display:block;margin-top:2px;color:var(--ink-soft);font-size:18px}

/* ---------- dunkle Flaeche wie der Kostenteil der Startseite ---------- */
.band{
  --seitenrand:clamp(8px,1.6vw,24px);
  margin:clamp(8px,2vw,24px) var(--seitenrand);border-radius:clamp(26px,3vw,40px);
  padding:clamp(56px,7vw,104px) max(calc(var(--rand) - var(--seitenrand)),calc((100% - 1220px) / 2 - var(--seitenrand)));
  background:radial-gradient(60% 60% at 88% 0%,rgba(220,198,120,.16) 0%,transparent 60%),linear-gradient(180deg,#1c1c1c,#0f0f0f);
  color:#c9c9c9;
}
.band h2{color:#fff;margin-top:0}
.band b,.band strong{color:#f3f3f3}
.band a{color:var(--gold-hell)}
.band .zahl-gross{display:block;margin-bottom:.12em;font-family:var(--display);font-weight:800;color:var(--gold-hell);
  font-size:clamp(48px,7vw,88px);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}

/* ---------- Anruf: derselbe Goldknopf wie auf der Startseite ---------- */
.ruf{display:inline-flex;flex-direction:column;gap:2px;margin-top:8px;
  padding:15px 28px;border-radius:26px;text-decoration:none;
  font-family:var(--display);font-weight:700;font-size:18px;color:var(--ink);
  background:linear-gradient(180deg,#e6d38c,#cdb347);
  box-shadow:0 14px 30px rgba(148,128,32,.34),inset 0 1px 0 rgba(255,255,255,.6);transition:box-shadow .2s}
.ruf small{font-family:var(--body);font-weight:500;font-size:16px;opacity:.82}
.ruf:hover{box-shadow:0 20px 40px rgba(148,128,32,.42),inset 0 1px 0 rgba(255,255,255,.6)}
/* Der Knopf behaelt seine Textfarbe auch auf der dunklen Flaeche. Ohne diese
   Zeile greift .band a und faerbt die Schrift golden auf goldenem Grund:
   gemessener Kontrast 1,07 statt der geforderten 4,5. */
.band .ruf{color:var(--ink)}

/* ---------- Fragen ---------- */
.fragen{list-style:none;max-width:76ch;margin-top:8px;padding:6px 28px;border-radius:18px;
  background:rgba(255,255,255,.68);border:1px solid var(--glass-edge);
  box-shadow:0 22px 60px rgba(23,23,23,.10),0 3px 10px rgba(23,23,23,.05)}
.fragen li{border-bottom:1px solid var(--line)}
.fragen li:last-child{border-bottom:0}
.fragen h3{margin:0;max-width:none;font-size:inherit}
.f-knopf{width:100%;text-align:left;background:none;border:0;cursor:pointer;
  font-family:var(--display);font-weight:700;font-size:clamp(19px,1.6vw,22px);letter-spacing:-.012em;line-height:1.25;
  color:var(--ink);padding:19px 40px 19px 0;position:relative}
.f-knopf:hover{color:var(--gold-text)}
.f-knopf::after{content:'';position:absolute;right:6px;top:50%;width:10px;height:10px;
  border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s}
.f-knopf[aria-expanded="true"]::after{transform:translateY(-20%) rotate(225deg)}
.f-antwort{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.16,1,.3,1)}
.f-antwort.auf{grid-template-rows:1fr}
.f-antwort>div{overflow:hidden;min-height:0}
.f-antwort p{padding-bottom:22px;color:var(--ink-soft);max-width:66ch}
@media(max-width:620px){ .fragen{padding:4px 20px} }

/* ---------- Rechtstexte: Impressum und Datenschutz ----------
   Der Text kommt unveraendert aus dem Generator. Er bringt lange Woerter und
   vier Ueberschriftenebenen mit, deshalb kleinere Stufen als auf den
   Leistungsseiten und Silbentrennung, sonst laeuft "Datenschutzerklaerung"
   bei 320 px aus dem Bild. */
.recht{max-width:74ch}
.recht h1,.recht h2,.recht h3,.recht h4{max-width:none;hyphens:auto;overflow-wrap:break-word}
.recht h2{font-size:clamp(24px,2.3vw,31px);line-height:1.15;margin:2.1em 0 .5em}
.recht h3{font-size:clamp(20px,1.6vw,23px);margin:1.7em 0 .4em}
.recht h4{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.01em;margin:1.3em 0 .3em}
.recht p,.recht li{color:var(--ink-soft);max-width:none;overflow-wrap:break-word}
.recht ul{margin:0 0 1em 1.2em}
.recht li{margin-bottom:.25em}
.recht a{overflow-wrap:anywhere}

/* ---------- Fusszeile wie auf der Startseite ---------- */
.fuss{margin-top:clamp(24px,4vw,48px);padding:34px var(--kante) 60px;border-top:1px solid var(--line);font-size:16px}
.fuss-inner{display:grid;grid-template-columns:1fr auto;gap:20px}
.fuss address{font-style:normal;color:var(--ink-soft);line-height:1.6}
.fuss address b{display:block;color:var(--ink);font-weight:600}
.fuss nav{display:grid;gap:4px;align-content:start}
.fuss-credit{grid-column:1 / -1;color:var(--muted)}
@media(max-width:620px){ .fuss-inner{grid-template-columns:1fr} }

/* Service-Gebiet: Fliesstext fuer Suchmaschinen, bewusst leise gesetzt. */
.gebiet{font-size:16px;color:var(--muted);max-width:92ch}

@media(prefers-reduced-motion:reduce){
  .f-antwort,.f-knopf::after,.ruf{transition:none}
}