/* ═══════════════════════════════════════════════════════════
   Fächerwerk Dienstleistungen - Stilblatt
   Erzeugt aus website.src.html durch tools/export_dienste.py.
   Nicht hier ändern, sondern in der Quelle: beim nächsten Auskoppeln
   wird diese Datei vollständig neu geschrieben.

   Hell, fotografisch, warm: Papier, Wald, Eiche. Schriften Fraunces
   (Schauzeilen), Archivo (Auszeichnung), Manrope (Fließtext), lokal
   eingebunden, kein Aufruf an fremde Server.
   ═══════════════════════════════════════════════════════════ */

:root{
  color-scheme:light;
  --papier:#F6F4EF;
  --tinte:#1B1D22;
  --ease:cubic-bezier(.16,1,.3,1);
  --rand:clamp(20px,5vw,72px);
  /* Dienstleistungen */
  --h-wald:#2F5D3A;
  --h-wald-tief:#1E3D27;
  --h-eiche:#8A5A2B;
  --h-gold:#B07A3F;
  --h-zart:#EDF1EA;
  --h-schrift-2:#4A5049;
  --h-schrift-3:#6B7268;
  --h-linie:rgb(30 61 39 / .16);
}

*{box-sizing:border-box}
/* Jede sichtbare Ansicht ist ihr eigener Scroll-Behälter. Grund: Im Artifact
   läuft die Seite in einem eingebetteten Rahmen, der selbst nicht scrollt,
   gescrollt wird außen. Jeder Sprung auf einen Anker blieb deshalb
   wirkungslos (gemessen: window.scrollY dauerhaft 0). Mit eigenem Behälter
   scrollt die Seite in sich selbst, und Direktlinks landen richtig. */
/* overscroll-behavior: contain haelt das Wischen im Behaelter. Ohne das
   zieht die Geste am Ende der Ansicht auf dem Telefon die ganze Seite mit. */
html{scroll-padding-top:130px}
/* Der waagerechte Überlauf wird an der Wurzel abgefangen, nicht am Körper.
   Gemessen: mit overflow-x auf dem body macht Chrome den body selbst zum
   Scroll-Behälter (scrollHeight 6358 gegen clientHeight 730), window.scrollY
   bleibt 0, und jeder Sprung auf einen Anker läuft ins Leere. Genau daran
   sind die Direktlinks gescheitert. */
html{overflow-x:clip}
body{margin:0;background:var(--papier);color:var(--tinte);font-family:Manrope,"Segoe UI",system-ui,sans-serif;font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;line-height:1.05;letter-spacing:-.025em;text-wrap:balance}
p{margin:0}
a{color:inherit}
img{display:block;max-width:100%}
button{font:inherit}
/* Die Weiche: ohne diese Regel wuerden display:flex und display:block der
   Ansichten das hidden-Attribut uebersteuern und alle Bereiche zeigen. */
.satz{width:100%;max-width:1220px;margin-inline:auto;padding-inline:var(--rand)}
.abschnitt{padding-block:clamp(64px,9vw,120px)}
.skip{position:absolute;left:-9999px;z-index:100;padding:14px 20px;background:var(--tinte);color:var(--papier);text-decoration:none;font-weight:700}
.skip:focus{left:var(--rand);top:12px}
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{outline:2px solid currentColor;outline-offset:3px}
.rein{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rein.da{opacity:1;transform:none}

/* ═══ Gemeinsame Bausteine in beiden Bereichen ══════════ */
.bereich{display:block}
.b-kopf{position:sticky;top:0;z-index:80;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:box-shadow .4s ease}
.b-kopf .satz{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-block:12px}
/* Mindestbreiten nach LOGO-REGELN.md: 160 px (Digitale Dienste), 180 px
   (Dienstleistungen). Hoehe 90 bei Zeichenflaeche 320x160 ergibt 180 px.
   Auf schmalen Geraeten passt das vollstaendige Logo nicht mehr; dort sieht
   die Regel ausdruecklich nur das Zeichen vor (Mindestmass 24 px). */
.b-kopf .logo{display:flex;align-items:center}
.b-kopf .logo svg{display:block;height:90px;width:auto}
.logo-zeichen{display:none}
.logo-zeichen svg{height:42px;width:auto}
@media (max-width:640px){ .logo-voll{display:none} .logo-zeichen{display:block}
}
/* Tippziele: WCAG 2.2 verlangt 24 px. Gemessen lagen die Navigations-
   links genau auf der Grenze und der Mailverweis darunter. */
.b-nav{display:flex;gap:clamp(12px,1.8vw,26px);align-items:center}
.b-nav a{display:inline-flex;align-items:center;min-height:26px}
.kontakt-liste dd a{display:inline-flex;align-items:center;min-height:24px}
.b-nav a{text-decoration:none;font-size:.92rem;font-weight:500;white-space:nowrap}
.b-rechts{display:flex;align-items:center;gap:clamp(10px,1.6vw,20px)}
.knopf{display:inline-flex;align-items:center;gap:.6em;padding:.8em 1.4em;border-radius:6px;text-decoration:none;font-weight:700;font-size:.94rem;border:1.5px solid transparent;transition:transform .3s var(--ease),background .3s ease,border-color .3s ease,color .3s ease}
.knopf:hover{transform:translateY(-2px)}
/* Der Pfeil im Knopf ruckt mit, wenn der Zeiger kommt. */
.knopf .pfeil{display:inline-block;transition:transform .4s var(--ease)}
.knopf:hover .pfeil{transform:translateX(4px)}
.b-nav a::after,.tafel-fuss a.weiter::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.b-nav a:hover::after,.b-nav a:focus-visible::after,.tafel-fuss a.weiter:hover::after{transform:scaleX(1);transform-origin:left}
.b-kopf .knopf{padding:.58em 1.05em;font-size:.86rem}
@media (max-width:1000px){ .b-nav{display:none} .menue-knopf{display:inline-flex !important}
}
@media (max-width:560px){
  .b-kopf .knopf-voll{display:none}
}
.menue-knopf{display:none;align-items:center;gap:.5em;background:none;border:1px solid;border-radius:6px;font-size:.84rem;font-weight:600;padding:.55em .85em;cursor:pointer}
.menue-knopf i{display:block;width:15px;height:9px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor}
.menue-knopf[aria-expanded="true"] i{border-bottom-color:transparent;transform:translateY(3px)}
.menue{position:fixed;inset:0;z-index:75;display:grid;align-content:center;gap:16px;padding:96px var(--rand) var(--rand);opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s}
.menue[data-offen]{opacity:1;visibility:visible;transform:none}
.menue a{text-decoration:none;font-family:Archivo,sans-serif;font-weight:700;font-size:clamp(1.6rem,7vw,2.2rem);letter-spacing:-.03em}
body[data-menue]{overflow:hidden}

.marke{font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;display:inline-flex;align-items:center;gap:.8em}
.marke::before{content:"";width:18px;height:12px;flex:none;background:currentColor;clip-path:polygon(50% 100%, 0 0, 8% 0, 50% 86%, 50% 0, 54% 0, 54% 86%, 96% 0, 100% 0, 50% 100%)}
.kopf-block{max-width:62ch}
.kopf-block h2{font-size:clamp(1.9rem,4vw,3.3rem);margin:.5em 0 .45em}
.kopf-block p{font-size:clamp(1rem,1.25vw,1.12rem);max-width:60ch}
/* p hat global keinen Abstand; zwei Absätze im Kopfblock brauchen einen. */
.kopf-block p + p{margin-top:.75em}
.ph{font-weight:600;border-bottom:1px dashed currentColor}

/* ═══ Bereich 2: Dienstleistungen (hell) ════════════════ */
.w-dienste{background:var(--papier);color:var(--tinte)}
.w-dienste .b-kopf{background:rgb(246 244 239 / .9)}
.w-dienste .b-kopf.fest{box-shadow:0 1px 0 var(--h-linie)}
.w-dienste .b-nav a{color:var(--h-schrift-2)}
.w-dienste .b-nav a:hover{color:var(--h-wald)}
.w-dienste .menue-knopf{border-color:var(--h-linie);color:var(--tinte)}
.w-dienste .menue{background:var(--papier);color:var(--tinte)}
.w-dienste .knopf-voll{background:var(--h-wald);color:#F4F7F2}
.w-dienste .knopf-voll:hover{background:var(--h-wald-tief)}
.w-dienste .knopf-rand{border-color:var(--h-linie);color:var(--tinte)}
.w-dienste .knopf-rand:hover{border-color:var(--h-wald)}
.w-dienste .marke{color:var(--h-eiche)}
.w-dienste .kopf-block p{color:var(--h-schrift-2)}
.w-dienste h1,.w-dienste h2{font-family:Fraunces,Georgia,serif;font-style:italic;font-weight:500;letter-spacing:-.015em}
.w-dienste h3{font-family:Archivo,sans-serif;font-weight:700;letter-spacing:-.02em}
.w-dienste .ph{color:var(--h-eiche)}

/* Der Auftakt füllt genau einen Bildschirm unter der Kopfzeile. Die Höhe
   der Kopfzeile wird gemessen und als --kopfhoehe gesetzt: geschätzt wäre
   sie falsch, sobald das Logo schmal zum Zeichen wird. Vorher endete der
   Auftakt bei 540 px und darunter klaffte ein cremefarbener Streifen. */
.h-auftakt{position:relative;min-height:calc(100svh - var(--kopfhoehe,114px));
  display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;overflow:hidden}
/* Der Ausschnitt hält die obere Bildhälfte: dort liegt die Fläche, die im
   Briefing für die Schlagzeile freigehalten wurde (helle Hauswand und
   Himmel), und dort steht sie jetzt auch. */
.h-auftakt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 34%}
/* Der Schleier trägt die Schrift unten links und lässt das Holz oben rechts
   in Ruhe. Vorher lag er über dem ganzen Bild, das Motiv verlor seine Farbe. */
.h-auftakt::after{
  content:"";position:absolute;inset:0;
  /* Der Schleier ist oben links dicht, wo die Schrift steht, und lässt die
     untere Bildhälfte mit Holzwand, Schubkarre und Weg offen. Unten wird er
     wieder etwas dichter, damit das Leistungsband darauf ruhig liegt.
     Alle Werte gegen echte Bildpunkte nachgemessen. */
  background:
    /* Gemessen: mit nur den beiden Bahnen lag der Vorspann bei 3,58 und der
       hell umrandete Knopf bei 3,21 - beide brauchen 4,5. Statt das ganze
       Bild abzudunkeln, liegt jetzt ein Feld genau unter dem Textblock. */
    radial-gradient(96% 80% at 12% 26%, rgb(17 36 23 / .72) 0%, rgb(17 36 23 / .3) 52%, rgb(17 36 23 / 0) 78%),
    linear-gradient(to bottom, rgb(17 36 23 / .8) 0%, rgb(17 36 23 / .58) 34%, rgb(17 36 23 / .2) 64%, rgb(17 36 23 / .46) 100%),
    linear-gradient(to right, rgb(17 36 23 / .6) 0%, rgb(17 36 23 / .24) 50%, rgb(17 36 23 / 0) 84%);
}
.h-auftakt .satz{position:relative;z-index:3;padding-top:clamp(30px,5.4vh,66px);padding-bottom:clamp(20px,3vh,36px);color:#F6F4EF}
/* Gegen echte Bildpunkte gemessen: das helle Gold erreichte als kleine
   Schrift nur 4,05:1. Die Schrift wird hell, das Zeichen davor bleibt Gold. */
.h-auftakt .marke{color:#F6F4EF}
.h-auftakt .marke::before{background:#F1D9A6}
.h-auftakt h1{font-size:clamp(2.6rem,6.4vw,5.4rem);margin:.3em 0 .35em;max-width:16ch}
.h-auftakt p{color:#EDF0E8;font-size:clamp(1.02rem,1.4vw,1.2rem);max-width:48ch}
.h-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(20px,3vw,30px)}
.h-auftakt .knopf-voll{background:#F6F4EF;color:var(--h-wald-tief)}
.h-auftakt .knopf-rand{border-color:rgb(246 244 239 / .5);color:#F6F4EF}

/* Fünf Leistungen als Band am unteren Rand des Auftakts: derselbe Gedanke
   wie die fünf Strahlen im Zeichen. Wer den ersten Bildschirm sieht, weiß,
   was es gibt und was es ungefähr kostet - ohne zu scrollen. */
.h-band{position:relative;z-index:3;display:grid;grid-template-columns:repeat(5,1fr);
  border-top:1px solid rgb(246 244 239 / .3);background:rgb(14 30 18 / .4);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.h-band a{position:relative;display:flex;flex-direction:column;gap:3px;text-decoration:none;color:#F6F4EF;
  padding:clamp(13px,1.5vw,20px) clamp(12px,1.3vw,20px);
  border-left:1px solid rgb(246 244 239 / .18);transition:background .45s var(--ease)}
.h-band a:first-child{border-left:0}
.h-band a::after{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:#E9C888;
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.h-band a:hover::after,.h-band a:focus-visible::after{transform:scaleX(1)}
.h-band a:hover,.h-band a:focus-visible{background:rgb(14 30 18 / .58)}
.h-band b{font-family:Archivo,sans-serif;font-weight:700;font-size:.9rem;line-height:1.22}
.h-band span{font-size:.79rem;color:rgb(246 244 239 / .78);font-variant-numeric:tabular-nums}
@media (max-width:640px){
  .h-band a{padding:9px 12px;gap:1px}
  .h-band b{font-size:.83rem}
  .h-band span{font-size:.73rem}
}
@media (max-width:1000px){
  .h-band{grid-template-columns:1fr 1fr}
  .h-band a{border-left:0;border-top:1px solid rgb(246 244 239 / .16)}
  .h-band a:nth-child(2n){border-left:1px solid rgb(246 244 239 / .16)}
  .h-band a:nth-child(1),.h-band a:nth-child(2){border-top:0}
}

/* Jahreskreis */
.jahr{background:var(--h-zart)}
.jahr-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(24px,5vw,72px);align-items:center;margin-top:clamp(30px,4vw,50px)}
.kreis{position:relative;max-width:520px;margin-inline:auto;width:100%}
.kreis svg{display:block;width:100%;height:auto}
.monat-feld{cursor:pointer}
.monat-feld .flaeche{fill:transparent;transition:fill .3s ease}
.monat-feld:hover .flaeche,.monat-feld[aria-pressed="true"] .flaeche{fill:rgb(47 93 58 / .1)}
.monat-feld .schrift{font-family:Manrope,sans-serif;font-size:13px;font-weight:600;fill:var(--h-schrift-3);transition:fill .3s ease}
.monat-feld:hover .schrift,.monat-feld[aria-pressed="true"] .schrift{fill:var(--h-wald-tief)}
.band{fill:none;stroke-linecap:butt;opacity:.95}
.band.aus{opacity:.16}
.kreis-mitte{font-family:Fraunces,Georgia,serif;font-style:italic;font-size:20px;fill:var(--h-wald-tief)}
.kreis-heute{font-family:Manrope,sans-serif;font-size:12px;font-weight:600;fill:var(--h-schrift-3)}
/* Der Zeiger fährt beim Laden einmal auf den heutigen Monat. */
#zeiger{transform-origin:50% 50%;transform:rotate(var(--zeiger,0deg));transition:transform 1.1s var(--ease)}
@keyframes zeigerAn{
  from{transform:rotate(calc(var(--zeiger,0deg) - 150deg));opacity:0}
  to{transform:rotate(var(--zeiger,0deg));opacity:1}
}
#zeiger line{stroke:var(--h-eiche);stroke-width:2.5;stroke-linecap:round}
#zeiger circle{fill:var(--h-eiche)}
.jahr-tafel{background:#fff;border:1px solid var(--h-linie);border-radius:14px;padding:clamp(22px,3vw,32px)}
.jahr-tafel h3{font-size:1.4rem;margin-bottom:.5em}
.jahr-tafel ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.jahr-tafel li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline;font-size:.97rem}
.jahr-tafel li i{width:12px;height:12px;border-radius:3px;display:block;margin-top:.35em}
.jahr-tafel .nichts{color:var(--h-schrift-3)}
.jahr-tafel p.dazu{color:var(--h-schrift-2);font-size:.92rem;margin-top:1em}
@media (max-width:860px){ .jahr-raster{grid-template-columns:1fr}
}

/* Materialband, randlos, mit ruhiger Parallaxe.
   **Name bewusst materialband, nicht band:** .band gehoert bereits den
   Monatsboegen im Jahreskreis. Der doppelte Name hatte die Parallaxe auf das
   falsche Element gelenkt. Jeden selbst vergebenen Namen einmal zaehlen. */
.materialband{position:relative;height:clamp(320px,56svh,560px);overflow:hidden;display:flex;align-items:flex-end}
.materialband img{position:absolute;left:0;right:0;top:-12%;width:100%;height:124%;object-fit:cover;
  transform:translateY(var(--schub,0px));will-change:transform}
.materialband::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgb(30 61 39 / .88),rgb(30 61 39 / .25) 55%,rgb(30 61 39 / .05))}
.materialband-in{position:relative;z-index:2;width:100%;max-width:1220px;margin-inline:auto;padding:0 var(--rand) clamp(28px,4vw,52px)}
.materialband-satz{font-family:Fraunces,Georgia,serif;font-style:italic;font-weight:500;color:#F6F4EF;
  font-size:clamp(1.7rem,4.4vw,3.4rem);line-height:1.08;letter-spacing:-.015em;max-width:18ch}
.materialband-dazu{color:#E4E9DF;font-size:clamp(.98rem,1.3vw,1.1rem);max-width:46ch;margin-top:.7em}

/* Leistungen als abwechselnde Zeilen mit Bild */
.h-leistung{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);align-items:center;padding-block:clamp(30px,4.5vw,60px);border-bottom:1px solid var(--h-linie)}
.h-leistung:last-of-type{border-bottom:0}
.h-leistung img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:12px}
/* Plätze ausdrücklich setzen, nicht sortieren: mit `order` wanderte das
   Bild hinter den Rechner in eine dritte Zeile und die Bildspalte blieb
   leer. Ein Rasterkind mit `grid-column:1/-1` ordnet sich nach `order`
   ein - danach stimmt die Reihenfolge, aber nicht mehr die Spalte. */
.h-leistung .h-bild{grid-row:1;grid-column:1}
.h-leistung > :not(.h-bild):not(.rechner){grid-row:1;grid-column:2}
.h-leistung:nth-child(even) .h-bild{grid-column:2}
.h-leistung:nth-child(even) > :not(.h-bild):not(.rechner){grid-column:1}
.h-leistung h3{font-size:clamp(1.4rem,2.6vw,2rem);margin-bottom:.5em}
.h-leistung p{color:var(--h-schrift-2)}
.h-leistung ul{list-style:none;margin:1.1em 0 0;padding:0;display:grid;gap:7px}
.h-leistung li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:baseline;font-size:.95rem;color:var(--h-schrift-2)}
.h-leistung li::before{content:"";width:13px;height:9px;background:var(--h-eiche);clip-path:polygon(50% 100%, 0 0, 10% 0, 50% 84%, 90% 0, 100% 0)}
.h-preis{margin-top:1.3em;padding-top:1em;border-top:2px solid var(--h-wald);font-family:Archivo,sans-serif;font-weight:700;font-size:1.15rem;color:var(--h-wald-tief);font-variant-numeric:tabular-nums}
.h-preis small{display:block;font-family:Manrope,sans-serif;font-weight:500;font-size:.85rem;color:var(--h-schrift-2);margin-top:.4em}

/* Der Holzrechner: die häufigste Frage beim Brennholz, offen gerechnet.
   Er sagt eine Menge, keinen Preis - und legt jede Annahme darunter. */
.rechner{grid-row:2;grid-column:1 / -1;margin-top:clamp(20px,2.6vw,30px);border:1px solid var(--h-linie);
  border-radius:14px;background:#fff;padding:clamp(16px,2vw,26px)}
.rechner-kopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-bottom:clamp(14px,1.8vw,20px)}
.rechner h4{font-family:Archivo,sans-serif;font-weight:700;font-size:1.06rem;color:var(--h-wald-tief)}
.rechner-kopf span{font-size:.82rem;color:var(--h-schrift-3)}
.rechner-innen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(18px,3vw,38px);align-items:start}
.schieber + .schieber{margin-top:14px}
.schieber label{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-size:.86rem;color:var(--h-schrift-2);margin-bottom:2px}
.schieber output{font-family:Archivo,sans-serif;font-weight:700;color:var(--h-wald-tief);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.schieber input[type=range]{width:100%;height:26px;accent-color:var(--h-wald);cursor:pointer;margin:0}
.rechner-stapel svg{display:block;width:100%;height:auto}
.rechner-zahl{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;
  border-top:2px solid var(--h-wald);padding-top:12px;margin-top:14px}
.rechner-zahl b{font-family:Archivo,sans-serif;font-weight:700;font-size:1.6rem;line-height:1;
  color:var(--h-wald-tief);font-variant-numeric:tabular-nums}
.rechner-zahl i{font-style:normal;color:var(--h-schrift-2);font-size:.95rem}
.rechner-zahl em{font-style:normal;margin-left:auto;font-family:Archivo,sans-serif;font-weight:700;
  color:var(--h-eiche);font-variant-numeric:tabular-nums}
.rechner-legende{font-size:.78rem;color:var(--h-schrift-3);margin-top:7px}
.rechner-fuss{font-size:.79rem;line-height:1.55;color:var(--h-schrift-3);margin-top:12px}
@media (max-width:820px){ .rechner-innen{grid-template-columns:1fr}
}
@media (max-width:820px){
  .h-leistung{grid-template-columns:1fr;gap:18px}
  /* Die Rückstellung muss auch die :nth-child-Regeln erreichen. Sonst blieb
     ein Kind in Spalte 2 stehen, das Raster legte eine zweite Spalte an,
     und der Block war schmal statt einspaltig - gemessen: 124 und 181 px
     statt einer Spalte von 324 px. */
  .h-leistung .h-bild,
  .h-leistung:nth-child(even) .h-bild,
  .h-leistung > :not(.h-bild):not(.rechner),
  .h-leistung:nth-child(even) > :not(.h-bild):not(.rechner),
  .h-leistung .rechner{grid-column:auto;grid-row:auto}
}

/* Kennzeichnung nach Art. 50 Abs. 4 KI-Verordnung (EU) 2024/1689:
   jedes erzeugte Bild trägt seinen Hinweis unmittelbar am Bild, sichtbar
   beim ersten Ansehen. Der Zusatz "keine ausgeführte Arbeit" verhindert
   zusätzlich den Eindruck einer eigenen Arbeitsprobe (§ 5 UWG).
   Deckung .72 statt .52: bei .52 lag der Hinweis über hellen Bildstellen
   bei 3,85 und damit unter den nötigen 4,5. */
.ki-hinweis{position:absolute;right:8px;bottom:8px;z-index:4;
  font-family:Manrope,sans-serif;font-size:.68rem;line-height:1.3;letter-spacing:.03em;
  color:rgb(255 255 255 / .94);background:rgb(12 20 14 / .72);
  border-radius:4px;padding:.28em .55em;pointer-events:none;max-width:calc(100% - 16px)}
.h-bild{position:relative}
.h-auftakt .ki-hinweis{top:10px;right:12px;bottom:auto}
.materialband .ki-hinweis{right:12px;bottom:12px}
@media (max-width:560px){ .ki-hinweis{font-size:.63rem}
}

/* Der Preishinweis steht unter den Leistungen, nicht über ihnen: dort, wo
   die Beträge tatsächlich stehen. Leiser gesetzt durch Größe und eine
   trennende Linie, nicht durch blasse Farbe - er muss lesbar bleiben
   (§ 3 PAngV verlangt klar erkennbare Angaben). */
.preishinweis{margin-top:clamp(26px,3.6vw,42px);padding-top:clamp(16px,2.2vw,24px);
  border-top:1px solid var(--h-linie);max-width:82ch}
.preishinweis p{font-size:.83rem;line-height:1.62;color:var(--h-schrift-2)}
.preishinweis p + p{margin-top:.55em}

.gebiet{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;margin-top:clamp(22px,3vw,32px)}
.gebiet span{font-size:.88rem;color:var(--h-schrift-2);border:1px solid var(--h-linie);border-radius:100px;padding:.36em .85em;background:#fff}
/* Die Grenzen des Angebots stehen zurückhaltend: eine ruhige Zeile statt
   einer Verbotsliste. Sie schützt trotzdem, weil sie den Rahmen benennt. */
.weiter{color:var(--h-schrift-3);font-size:.92rem;max-width:74ch;padding-left:16px;border-left:2px solid var(--h-linie)}
/* Der Ablauf als Schiene: eine Linie, vier Knoten, der letzte in Gold.
   Vier gleich aussehende Spalten mit Oberkante waren nicht falsch, aber
   beliebig - die Linie zeigt, dass es eine Reihenfolge ist. */
.h-schritte{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.2vw,30px);
  margin-top:clamp(38px,5.2vw,60px);counter-reset:s}
.h-schritte::before{content:"";position:absolute;left:5px;right:5px;top:9px;height:1px;
  background:linear-gradient(to right,var(--h-wald),var(--h-gold));opacity:.5}
/* Der Freiraum gehört in die Station, nicht in den Rahmen: lag er außen,
   saßen Knoten und Nummer auf der Überschrift. */
.h-schritt{position:relative;padding-top:46px}
.h-schritt::before{content:"";position:absolute;top:4px;left:0;width:11px;height:11px;border-radius:50%;
  background:var(--papier);border:2px solid var(--h-wald)}
.h-schritt:last-child::before{background:var(--h-gold);border-color:var(--h-gold)}
.h-schritt::after{counter-increment:s;content:"0" counter(s);position:absolute;top:26px;left:0;
  font-family:Archivo,sans-serif;font-size:.74rem;letter-spacing:.16em;color:var(--h-schrift-3)}
.h-schritt b{display:block;font-family:Archivo,sans-serif;font-size:1.04rem;margin-bottom:.35em}
.h-schritt span{color:var(--h-schrift-2);font-size:.93rem}
/* Der Widerruf steht neben dem Ablauf, nicht darin: er ist kein Schritt,
   den man durchläuft, sondern ein Recht. Als fünfte Station sprengte er
   zudem das vierspaltige Raster - eine allein stehende zweite Zeile. */
.widerruf{margin-top:clamp(26px,3.4vw,40px);max-width:74ch;font-size:.88rem}
@media (max-width:900px){
  .h-schritte{grid-template-columns:1fr 1fr;row-gap:30px}
  /* Über zwei Zeilen wäre die Schiene eine Linie ins Nichts. */
  .h-schritte::before{display:none}
  .h-schritt{border-top:2px solid var(--h-wald);padding-top:44px}
  .h-schritt::before{display:none}
  .h-schritt::after{top:14px}
}
@media (max-width:520px){ .h-schritte{grid-template-columns:1fr}
}

/* ═══ Kontakt und Fuß, je Bereich eingefärbt ════════════ */
.kontakt-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(26px,5vw,72px);align-items:start;margin-top:clamp(28px,4vw,48px)}
.kontakt-liste{list-style:none;margin:0;padding:0;border-top:1px solid currentColor}
.kontakt-liste div{display:flex;justify-content:space-between;gap:18px;padding:.85em 0;border-bottom:1px solid;font-size:.95rem}
.kontakt-liste dd{margin:0;text-align:right}
.w-dienste .kontakt-liste,.w-dienste .kontakt-liste div{border-color:var(--h-linie)}
.w-dienste .kontakt-liste dt{color:var(--h-schrift-3)}
.formular{border-radius:14px;padding:clamp(22px,3vw,34px)}
.w-dienste .formular{background:#fff;border:1px solid var(--h-linie)}
.feld{margin-bottom:14px}
.feld label{display:block;font-size:.84rem;font-weight:600;margin-bottom:.4em}
.w-dienste .feld label{color:var(--h-schrift-2)}
.feld input,.feld select,.feld textarea{width:100%;font:inherit;font-size:1rem;border-radius:6px;padding:.7em .85em}
.w-dienste .feld input,.w-dienste .feld select,.w-dienste .feld textarea{color:var(--tinte);background:var(--papier);border:1px solid var(--h-linie)}
.feld textarea{resize:vertical;min-height:104px}
.fein{font-size:.8rem;margin-top:.9em;line-height:1.55}
.gesendet{margin-top:14px;padding:12px 14px;border-radius:8px;font-size:.88rem;line-height:1.5}
.w-dienste .gesendet{background:var(--h-zart);border:1px solid var(--h-linie);color:var(--tinte)}
.w-dienste .fein{color:var(--h-schrift-3)}
@media (max-width:820px){ .kontakt-raster{grid-template-columns:1fr}
}

.b-fuss{padding-block:26px;font-size:.85rem}
.b-fuss .satz{display:flex;justify-content:space-between;gap:14px 24px;flex-wrap:wrap}
/* Tippflaeche nach WCAG 2.2 mindestens 24 px: die Fusszeilen-Links waren
   18 px hoch. */
.b-fuss a{margin-left:16px;display:inline-block;padding-block:4px;min-height:24px}
.b-fuss a:first-child{margin-left:0}
.w-dienste .b-fuss{border-top:1px solid var(--h-linie);color:var(--h-schrift-3)}

/* ═══ Rechtliches ═══════════════════════════════════════ */
.w-recht{background:#fff;color:var(--tinte);min-height:100svh}
.w-recht .b-kopf{background:rgb(255 255 255 / .92)}
.w-recht h1{font-family:Archivo,sans-serif;font-weight:700;font-size:clamp(1.9rem,3.6vw,2.8rem)}
.w-recht h2{font-family:Archivo,sans-serif;font-weight:700;font-size:clamp(1.3rem,2.2vw,1.7rem);margin-bottom:.7em}
.w-recht h3{font-family:Archivo,sans-serif;font-size:.95rem;margin:1.6em 0 .35em;letter-spacing:0}
.w-recht p{color:#454A53;font-size:.93rem;max-width:70ch}
/* Die Anschrift steht vorerst zurückhaltend: kleiner gesetzt, aber in
   voller Lesbarkeit. § 5 DDG verlangt leichte Erkennbarkeit des
   Impressums, nicht eine bestimmte Schriftgröße der Anschrift. */
.anschrift{font-size:.86rem;line-height:1.5;color:#5B616B}
.zwei-sp{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,5vw,72px);margin-top:clamp(24px,4vw,44px)}
@media (max-width:880px){ .zwei-sp{grid-template-columns:1fr}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.001ms !important;animation-duration:.001ms !important;animation-delay:0ms !important}
}

/* ═══ Impressum und Datenschutz als eigene Seiten ════════ */
/* Eigene Adressen, eigene Überschriftenfolge: h1 für die Seite, h2 für die
   Abschnitte. Die gemeinsame Fassung hatte h2 und h3 unter einer h1. */
.recht-seite main{padding-block:clamp(30px,5vw,60px)}
.recht-seite h1{font-family:Fraunces,Georgia,serif;font-style:italic;font-weight:500;
  font-size:clamp(2rem,4.4vw,3.1rem);letter-spacing:-.02em;margin-bottom:.7em}
/* font-style ausdrücklich zurücksetzen: der Bereich stellt Überschriften
   kursiv, und Archivo hat im Zeichensatz keinen kursiven Schnitt - der
   Browser hätte ihn schräg gerechnet. */
.recht-seite h2{font-family:Archivo,sans-serif;font-style:normal;font-weight:700;
  font-size:1.02rem;letter-spacing:0;line-height:1.3;margin:2.2em 0 .5em;
  color:var(--h-wald-tief)}
.recht-seite h2:first-of-type{margin-top:.4em}
.recht-seite p{color:var(--h-schrift-2);font-size:.95rem;max-width:74ch;margin-bottom:.8em}
.recht-seite a{color:var(--h-wald);text-underline-offset:3px}
.recht-seite .abschnitt{padding-block:0}