/* =========================================================
   HofWerker Studio — Designsystem
   Farben und Typografie aus dem CI (Badge „Digital Craft for Makers")
   Keine externen Ressourcen. Systemschriften.
   ========================================================= */

:root{
  /* --- Farben aus dem CI --- */
  --oliv:#5C6B2D;
  --oliv-hell:#93A455;
  --braun:#4A241B;
  --braun-dunkel:#3E1E16;
  --tan:#C6A06B;          /* nur Dekoration auf hellem Grund, nie Text */
  --tan-hell:#D8B481;     /* Text auf dunklem Grund, Kontrast 7,7:1 */
  --creme:#F4EFE2;
  --sand:#EFE9DC;
  --tinte:#241611;        /* Fließtext, 15,3:1 auf Creme */
  --grau:#6B6257;         /* Nebentext, 5,2:1 auf Creme */
  --linie:#DCD3C0;

  /* --- Typografie --- */
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --t-display: clamp(2.6rem, 7vw, 5.2rem);
  --t-h1: clamp(2.1rem, 4.6vw, 3.4rem);
  --t-h2: clamp(1.6rem, 3vw, 2.3rem);
  --t-h3: clamp(1.12rem, 1.6vw, 1.3rem);
  --t-lead: clamp(1.08rem, 1.6vw, 1.3rem);
  --t-body: 1.0625rem;

  /* --- Raster --- */
  --breite: 1180px;
  --schmal: 760px;
  --rand: clamp(1.25rem, 5vw, 3rem);
  --luft: clamp(2.8rem, 6vw, 4.8rem);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  font-family:var(--sans);
  font-size:var(--t-body);
  line-height:1.65;
  color:var(--tinte);
  background:var(--creme);
  -webkit-font-smoothing:antialiased;
}

img,svg{ max-width:100%; height:auto; display:block; }

h1,h2,h3{ font-family:var(--serif); font-weight:700; line-height:1.15; color:var(--braun); margin:0 0 .6em; }
/* Sehr lange Woerter wie "Datenschutzerklaerung" passen sonst auf schmalen
   Geraeten nicht in die Zeile und schieben die Seite seitlich hinaus. */
h1,h2,h3{ overflow-wrap:break-word; hyphens:auto; }
h1{ font-size:var(--t-h1); letter-spacing:-.01em; }
h2{ font-size:var(--t-h2); }
h3{ font-size:var(--t-h3); font-family:var(--sans); font-weight:700; letter-spacing:.01em; }
p{ margin:0 0 1.15em; max-width:68ch; }

a{ color:var(--oliv); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--braun); }

:focus-visible{
  outline:3px solid var(--oliv);
  outline-offset:3px;
  border-radius:2px;
}

.wrap{ width:100%; max-width:var(--breite); margin-inline:auto; padding-inline:var(--rand); }
.schmal{ max-width:var(--breite); }
.schmal > p, .schmal > div > p{ max-width:66ch; }
.schmal .lead{ max-width:60ch; }
.schmal details{ max-width:820px; }
.schmal .platzhalter-block{ max-width:820px; }
.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--braun); color:var(--creme);
  padding:.9rem 1.4rem; font-weight:700; text-decoration:none;
}
.skip:focus{ left:0; }

/* ---------------------------------------------------- Millimeterpapier
   Feines Raster wie auf Zeichenpapier: dünne Linien alle 8 px, kräftigere
   alle 40 px. Vollständig aus CSS-Verläufen gebaut - keine Bilddatei, keine
   zusätzliche Anfrage. Bewusst sehr blass: es soll Fläche gliedern, nicht
   auffallen, und niemals den Text schlechter lesbar machen. */
:root{
  --raster-fein:      rgba(74,36,27,.045);
  --raster-grob:      rgba(74,36,27,.085);
  --raster-fein-hell: rgba(216,180,129,.055);
  --raster-grob-hell: rgba(216,180,129,.10);
  --raster-weit: 40px;
  --raster-eng: 8px;
}

/* Reihenfolge: erst die kräftigen Linien (liegen oben), dann die feinen. */
.papier,.hero,.kopfblock{
  background-image:
    repeating-linear-gradient(to right,  var(--raster-grob) 0 1px, transparent 1px var(--raster-weit)),
    repeating-linear-gradient(to bottom, var(--raster-grob) 0 1px, transparent 1px var(--raster-weit)),
    repeating-linear-gradient(to right,  var(--raster-fein) 0 1px, transparent 1px var(--raster-eng)),
    repeating-linear-gradient(to bottom, var(--raster-fein) 0 1px, transparent 1px var(--raster-eng));
}

/* Auf dunklem Grund wird daraus eine Blaupause: helle Linien statt dunkler. */
.band-in > div,.abschluss,.bg-dunkel{
  background-image:
    repeating-linear-gradient(to right,  var(--raster-grob-hell) 0 1px, transparent 1px var(--raster-weit)),
    repeating-linear-gradient(to bottom, var(--raster-grob-hell) 0 1px, transparent 1px var(--raster-weit)),
    repeating-linear-gradient(to right,  var(--raster-fein-hell) 0 1px, transparent 1px var(--raster-eng)),
    repeating-linear-gradient(to bottom, var(--raster-fein-hell) 0 1px, transparent 1px var(--raster-eng));
}
/* Karten und Werkstattschilder: nur das feine Raster, ohne die groben Linien.
   Das genuegt, um die Flaeche zu beleben, ohne mit dem Text zu konkurrieren. */
.karten .karte,.kasten-alt,.beitrag-karte{
  background-image:
    repeating-linear-gradient(to right,  var(--raster-fein) 0 1px, transparent 1px var(--raster-eng)),
    repeating-linear-gradient(to bottom, var(--raster-fein) 0 1px, transparent 1px var(--raster-eng));
}

/* Wer hohen Kontrast eingestellt hat, bekommt glatte Flaechen. */
@media (prefers-contrast: more){
  .papier,.hero,.kopfblock,.band-in > div,.abschluss,.bg-dunkel,
  .karten .karte,.kasten-alt,.beitrag-karte{ background-image:none; }
}


/* ---------------------------------------------------------- Kopf */
.kopf{
  background:var(--creme);
  border-bottom:1px solid var(--linie);
  position:sticky; top:0; z-index:50;
}
.kopf-in{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:88px; }
.marke{ display:block; flex:0 0 auto; }
.marke img{ width:clamp(190px,26vw,280px); height:auto; }

.burger{
  display:none;
  align-items:center; gap:.55rem;
  background:none; border:1px solid var(--linie); border-radius:3px;
  font:inherit; font-weight:700; color:var(--braun);
  padding:.7rem 1rem; min-height:44px; cursor:pointer;
}
.burger-strich, .burger-strich::before, .burger-strich::after{
  content:""; display:block; width:20px; height:2px; background:var(--braun);
}
.burger-strich{ position:relative; }
.burger-strich::before{ position:absolute; top:-6px; }
.burger-strich::after{ position:absolute; top:6px; }

.nav ul{ list-style:none; display:flex; align-items:center; gap:clamp(.75rem,1.4vw,1.25rem); margin:0; padding:0; }
.nav a{
  display:inline-block; padding:.55rem 0; min-height:44px; line-height:2;
  font-size:.94rem; color:var(--braun); text-decoration:none; white-space:nowrap;
  border-bottom:2px solid transparent;
}
.nav a:hover{ border-bottom-color:var(--tan); }
.nav a[aria-current="page"]{ border-bottom-color:var(--oliv); font-weight:700; }

/* ---------------------------------------------------------- Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:52px; padding:.9rem 1.8rem;
  background:var(--oliv); color:#fff; font-weight:700; font-size:1.03rem;
  text-decoration:none; border:2px solid var(--oliv); border-radius:3px;
  transition:background .18s ease, border-color .18s ease;
}
.btn:hover{ background:var(--braun); border-color:var(--braun); color:#fff; }
.btn-2{ background:transparent; color:var(--braun); border-color:var(--braun); }
.btn-2:hover{ background:var(--braun); color:var(--creme); }
.cta-reihe{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.8rem; max-width:none; }
button.btn{ font-family:inherit; cursor:pointer; }

/* ---------------------------------------------------------- Hero */
.hero{
  padding-block:clamp(3.2rem,8vw,5.5rem) 0;
  position:relative;
}
.hero-grid{
  display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(1.5rem,4vw,4rem); align-items:center;
}
.hero-bild{ margin:0; max-width:620px; justify-self:end; width:100%; }
.hero-bild img{ width:100%; height:auto; display:block; }
.augen{
  font-size:.82rem; letter-spacing:.19em; text-transform:uppercase;
  color:var(--grau); font-weight:700; margin-bottom:1.1rem;
}
.hero h1{
  font-size:var(--t-display); line-height:1.02; letter-spacing:-.025em;
  margin-bottom:.5em; max-width:16ch;
}
.hero-b{ color:var(--oliv); }
.lead{ font-size:var(--t-lead); color:var(--tinte); max-width:56ch; }

/* ---------------------------------------------------------- Band */
.band{ background-color:var(--braun-dunkel); color:var(--creme); }
.band-in{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:rgba(244,239,226,.16);
  padding:0;
}
.band-in > div{
  background-color:var(--braun-dunkel); padding:1.7rem clamp(1rem,2vw,1.6rem);
  display:flex; flex-direction:column; gap:.2rem;
}
.band-in strong{ font-family:var(--serif); font-size:1.22rem; color:var(--creme); }
.band-in span{ font-size:.9rem; color:var(--tan-hell); }

/* ---------------------------------------------------------- Abschnitte */
.abschnitt{ padding-block:var(--luft); }
.abschnitt::after,.kopfblock::after,.abschluss::after{ content:""; display:block; clear:both; }
.kopfblock{ padding-block:clamp(3rem,7vw,5rem) clamp(1.5rem,3vw,2.5rem); border-bottom:1px solid var(--linie); }
.bg-sand{ background:var(--sand) url(../img/textur.svg); }
.bg-dunkel{ background-color:var(--braun-dunkel); color:var(--creme); }
.bg-dunkel h2,.bg-dunkel h3{ color:var(--creme); }
.bg-dunkel p{ color:#EDE5D6; }
.bg-dunkel a{ color:var(--tan-hell); }
.vor{ font-size:1.08rem; color:var(--grau); max-width:60ch; margin-bottom:2.2rem; }
.mehr{ margin-top:1.8rem; font-weight:700; }
.mehr a::after{ content:" →"; }
.klein{ font-size:.9rem; color:var(--grau); }
.hinweis{
  margin-top:2rem; padding-left:1.1rem; border-left:3px solid var(--tan);
  font-style:italic; color:var(--grau);
}

/* ---------------------------------------------------------- Huegel-Trenner */
.huegel{ line-height:0; }
.huegel svg{ display:block; width:100%; height:clamp(28px,4.5vw,64px); }
@media (max-width:760px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-bild{ max-width:26rem; width:100%; margin:0 auto; }
}
/* Illustrationen: kleine Vignetten, nie Hauptdarsteller.
   Im Kopfblock stehen sie ausserhalb der Textspalte im Weissraum rechts,
   damit sie dem Text keine Breite stehlen. */
.illu-rechts img,.illu-mitte img{ width:100%; height:auto; display:block; }
.kopfblock{ position:relative; }
.kopfblock .illu-rechts{
  width:200px; margin:0 0 1.2rem; opacity:.92;
}
@media (min-width:900px){
  .kopfblock .illu-rechts{
    position:absolute; right:clamp(1.5rem,6vw,6rem); bottom:clamp(.8rem,2.5vw,1.8rem);
    width:clamp(220px,22vw,300px); margin:0;
  }
  /* Platz fuer die Illustration freihalten, damit keine Zeile sie beruehrt.
     Der Abstand sitzt am Container, nicht an den einzelnen Absaetzen - sonst
     frisst er deren eigene Maximalbreite auf und kurze Zeilen brechen um. */
  .kopfblock > .wrap{
    padding-right:calc(var(--rand) + clamp(230px,23vw,340px));
  }
}
.abschnitt .illu-rechts{
  float:right; width:clamp(180px,30%,340px); margin:.3rem 0 1.2rem 2.4rem; opacity:.92;
}
.illu-mitte{ width:clamp(200px,26vw,300px); margin:0 0 1.6rem; opacity:.92; }
@media (max-width:600px){
  .abschnitt .illu-rechts{ width:150px; margin:.2rem 0 .8rem 1.4rem; }
  .kopfblock .illu-rechts{ width:160px; }
}

/* ---------------------------------------------------------- Raster */
.raster{ display:grid; gap:clamp(1.4rem,3vw,2.4rem); list-style:none; padding:0; margin:0; }
.raster-2{ grid-template-columns:repeat(2,1fr); }
.raster-3{ grid-template-columns:repeat(3,1fr); }
.liste-schlicht li h3{ margin-bottom:.4em; color:var(--braun); }
.liste-schlicht li{ padding-top:1.1rem; border-top:2px solid var(--oliv); }
.liste-schlicht p{ margin:0; color:var(--grau); }
.merkmale h3{ color:inherit; margin-bottom:.5em; }
.merkmale > div{ padding-top:1.1rem; border-top:1px solid currentColor; }
.bg-dunkel .merkmale > div{ border-top-color:rgba(244,239,226,.3); }
.merkmale p:last-child{ margin-bottom:0; }

/* ---------------------------------------------------------- Karten */
.karten .karte{
  background-color:#fff; border:1px solid var(--linie); border-top:4px solid var(--oliv);
  box-shadow:0 12px 28px rgba(74,36,27,.07);
  padding:1.9rem 1.6rem; display:flex; flex-direction:column;
}
.bg-sand .karten .karte{ background-color:var(--creme); }
.karte-mitte{ border-top-color:var(--braun); box-shadow:0 2px 18px rgba(74,36,27,.09); }
.karte-flagge{
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  color:var(--braun); margin:0;
  /* Aus dem Textfluss genommen, sonst rutschen Titel und Preis der mittleren
     Karte gegenueber den Nachbarkarten nach unten. */
  position:absolute; top:-1.75rem; left:0;
}
.karten .karte{ position:relative; }
.karte h3{ font-family:var(--serif); font-size:1.35rem; color:var(--braun); margin-bottom:.3em; }
.preis{ font-family:var(--serif); font-size:2.1rem; color:var(--oliv); margin:0 0 .1em; line-height:1; }
.preis span{ font-size:1rem; color:var(--grau); }
.preis-note{ font-size:.82rem; color:var(--grau); margin-bottom:1.2rem; }
.karte ul{ list-style:none; padding:0; margin:0 0 1.3rem; }
.karte ul li{ padding:.45rem 0 .45rem 1.5rem; border-bottom:1px solid var(--linie); position:relative; font-size:.97rem; }
.karte ul li::before{ content:""; position:absolute; left:0; top:1.05em; width:9px; height:2px; background:var(--tan); }
.karte .fuer{ margin:auto 0 0; font-size:.92rem; color:var(--grau); font-style:italic; }

/* ---------------------------------------------------------- Tabellen */
.tab-scroll{ overflow-x:auto; margin-bottom:1.2rem; }
.tab{ width:100%; border-collapse:collapse; font-size:.98rem; min-width:560px; }
.tab th,.tab td{ text-align:left; padding:.85rem 1rem; border-bottom:1px solid var(--linie); vertical-align:top; }
.tab thead th{ background:var(--oliv); color:#fff; font-family:var(--sans); font-size:.9rem; letter-spacing:.03em; }
.tab tbody th{ font-weight:600; color:var(--braun); }
.tab tbody tr:nth-child(even){ background:rgba(255,255,255,.55); }
.bg-sand .tab tbody tr:nth-child(even){ background:rgba(255,255,255,.6); }

/* ---------------------------------------------------------- Listen */
.haken{ list-style:none; padding:0; margin:0; max-width:64ch; }
/* Gegenstueck zur Hakenliste: hier steht, was gerade nicht dabei ist -
   deshalb ein Strich statt eines Hakens. */
.ohne{ list-style:none; padding:0; margin:0; max-width:64ch; }
.ohne li{ padding:.6rem 0 .6rem 1.9rem; position:relative; border-bottom:1px solid var(--linie);
  color:var(--grau); }
.ohne li::before{
  content:""; position:absolute; left:.15rem; top:1.5em;
  width:13px; height:0; border-top:2px solid var(--tan);
}
.haken li{ padding:.6rem 0 .6rem 1.9rem; position:relative; border-bottom:1px solid var(--linie); }
.haken li::before{
  content:""; position:absolute; left:.15rem; top:1.15em;
  width:10px; height:5px; border-left:2px solid var(--oliv); border-bottom:2px solid var(--oliv);
  transform:rotate(-45deg);
}

.stapel > article{ padding:1.6rem 0; border-top:2px solid var(--oliv); }
.stapel > article:first-child{ border-top-width:3px; }
.stapel h3{ font-family:var(--serif); font-size:1.28rem; color:var(--braun); }
.stapel p:last-child{ margin-bottom:0; }

.schritte{ list-style:none; counter-reset:s; padding:0; margin:0; }
.schritte > li{
  counter-increment:s; position:relative;
  padding:1.7rem 0 1.7rem 4.4rem; border-bottom:1px solid var(--linie);
}
.schritte > li::before{
  content:counter(s,decimal-leading-zero);
  position:absolute; left:0; top:1.75rem;
  font-family:var(--serif); font-size:1.6rem; color:var(--tan); font-weight:700;
}
.schritte h2{ font-size:1.3rem; margin-bottom:.35em; }
.schritte p:last-child{ margin-bottom:0; }

/* ---------------------------------------------------------- FAQ */
.faq details{ border-bottom:1px solid var(--linie); }
.faq summary{
  cursor:pointer; padding:1.1rem 2rem 1.1rem 0; position:relative;
  font-weight:700; color:var(--braun); font-size:1.04rem; list-style:none; min-height:44px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:.35rem; top:1.55rem;
  width:9px; height:9px; border-right:2px solid var(--oliv); border-bottom:2px solid var(--oliv);
  transform:rotate(45deg); transition:transform .18s ease;
}
.faq details[open] summary::after{ transform:rotate(-135deg); top:1.8rem; }
.faq details p{ margin:0 0 1.3rem; color:var(--grau); }

/* ---------------------------------------------------------- Kontakt */
.kontakt-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.kontakt-direkt h2{ font-size:1.45rem; }
.kontakt-direkt h3{ margin-top:1.9rem; margin-bottom:.4em; }
.gross{ font-family:var(--serif); font-size:1.28rem; margin-bottom:.45em; }
.kontakt-formular{ background:#fff; border:1px solid var(--linie); border-top:4px solid var(--oliv); padding:clamp(1.5rem,3vw,2.4rem); }

.feld{ margin:0 0 1.35rem; max-width:none; }
.feld label{ display:block; font-weight:700; font-size:.95rem; margin-bottom:.4rem; color:var(--braun); }
.pflicht{ font-weight:400; color:var(--grau); font-size:.85em; }
.feld input[type=text],.feld input[type=email],.feld input[type=tel],.feld input[type=url],.feld textarea{
  width:100%; font:inherit; font-size:1rem; color:var(--tinte);
  padding:.8rem .9rem; min-height:48px;
  background:var(--creme); border:1px solid #C9BFAB; border-radius:3px;
}
.feld textarea{ resize:vertical; }
.feld input:focus-visible,.feld textarea:focus-visible{ background:#fff; }
.feld-hilfe{ display:block; font-size:.86rem; color:var(--grau); margin-top:.45rem; }
/* "An: kontakt@..." - kein Eingabefeld, sondern eine gesperrte Zeile. Sie sagt
   dem Absender, dass die naechste Zeile SEINE Adresse ist; genau das ging
   einmal schief (Kunde trug meine Adresse ein). */
.feld-an-name{ display:block; font-weight:700; font-size:.95rem; margin-bottom:.4rem; color:var(--grau); }
.feld-an-wert{ display:block; width:100%; font-size:1rem; padding:.8rem .9rem; min-height:48px;
  background:var(--sand); color:var(--grau); border:1px dashed #C9BFAB; border-radius:3px; cursor:not-allowed; }
.feld-fehler{ display:block; font-size:.9rem; font-weight:700; color:#8A2A1A; margin-top:.45rem; }
.feld-fehler[hidden]{ display:none; }
.feld input[aria-invalid="true"]{ border-color:#8A2A1A; background:#FBF1EE; }
.wahlfrei{ font-weight:400; color:var(--grau); }
fieldset.feld{ border:1px solid var(--linie); border-radius:3px; padding:1rem 1.1rem .4rem; }
fieldset.feld legend{ font-weight:700; font-size:.95rem; color:var(--braun); padding-inline:.4rem; }
/* Hoehere Spezifitaet als `.feld label`, sonst bleibt die Zeile ein Block
   und lange Beschriftungen brechen unter das Kaestchen zurueck. */
.feld label.radio, .radio{
  display:flex; align-items:flex-start; gap:.65rem; font-weight:400; margin-bottom:.35rem;
  min-height:44px; color:var(--tinte); padding:.5rem; margin-inline:-.5rem;
  border-radius:3px; cursor:pointer; line-height:1.45;
}
.feld label.radio > input{ flex:0 0 auto; margin-top:.15rem; }
.feld label.radio:hover, .radio:hover{ background:rgba(92,107,45,.07); }
.radio input{ width:20px; height:20px; accent-color:#5C6B2D; }
.feld-check label{ display:flex; gap:.7rem; align-items:flex-start; font-weight:400; font-size:.94rem;
  color:var(--tinte); line-height:1.5; padding:.5rem; margin-inline:-.5rem; border-radius:3px; cursor:pointer; }
.feld-check label:hover{ background:rgba(92,107,45,.07); }
.feld-check label > span{ flex:1 1 auto; min-width:0; }
.feld-check input{ width:20px; height:20px; margin-top:.2rem; flex:0 0 auto; accent-color:#5C6B2D; }
.feld-honig{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.formular-fehler{ background:#FBEFEA; border:1px solid #C97B5E; border-left:4px solid #A44A2A;
  padding:.9rem 1.1rem; margin:0 0 1.4rem; }
.formular-fehler p{ margin:0; font-size:.95rem; max-width:none; }

.platzhalter{ background:#FFF3B0; color:#5A4A00; padding:.1em .35em; font-weight:600; }
.platzhalter-block{
  background:#FFF7D6; border-left:4px solid #C9A227; padding:1.2rem 1.3rem; margin-bottom:2rem;
}
.platzhalter-block p:last-child{ margin-bottom:0; }

/* ---------------------------------------------------------- Abschluss */
.abschluss{
  background-color:var(--braun-dunkel); color:var(--creme);
  padding-block:var(--luft);
  border-top:6px solid var(--oliv);
}
.abschluss h2{ color:var(--creme); font-size:var(--t-h2); }
.abschluss p{ color:#EDE5D6; }
.abschluss .btn-2{ color:var(--tan-hell); border-color:var(--tan-hell); }
.abschluss .btn-2:hover{ background:var(--tan-hell); color:var(--braun-dunkel); }

/* ---------------------------------------------------------- Fuß */
.fuss{ background:var(--braun); color:var(--creme); padding-top:clamp(3rem,6vw,4.5rem); }
.fuss-in{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:2.5rem; padding-bottom:2.5rem; }
.fuss h2{ font-family:var(--sans); font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; color:var(--tan-hell); margin-bottom:1rem; }
.fuss p,.fuss li{ color:#EDE5D6; font-size:.96rem; }
.fuss ul{ list-style:none; padding:0; margin:0; }
.fuss li{ margin-bottom:.5rem; }
.fuss a{ color:#EDE5D6; text-decoration:none; border-bottom:1px solid rgba(216,180,129,.5); }
/* Listenlinks im Fuss: ganze Zeile antippbar, Mindesthoehe 44 px. */
.fuss-sp li a{ display:inline-block; padding:.5rem 0; min-height:44px; }
.fuss a:hover{ color:#fff; border-bottom-color:var(--tan-hell); }
.fuss-marke img{ width:220px; margin-bottom:1rem; }
.claim{ font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--tan-hell); }
.fuss-zeile{
  border-top:1px solid rgba(244,239,226,.2); padding-block:1.4rem;
  display:flex; flex-wrap:wrap; gap:.6rem 2rem; justify-content:space-between;
}
.fuss-zeile p{ margin:0; font-size:.86rem; color:#D6CBB8; }

/* ---------------------------------------------------------- Responsiv */
/* Die waagerechte Menueleiste passt erst ab 1260 px vollstaendig neben das
   Logo (acht Punkte seit 04.10.2026, seit 09.10. mit Studios & Laeden statt Arbeitsweise). Darunter das Klappmenue - sonst schiebt die Leiste die
   ganze Seite seitlich aus dem Bild. */
@media (max-width: 1259px){
  .burger{ display:inline-flex; }
  .nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    background:var(--creme); border-bottom:1px solid var(--linie);
    box-shadow:0 12px 24px rgba(36,22,17,.1);
  }
  .nav.offen{ display:block; }
  .nav ul{ flex-direction:column; align-items:stretch; gap:0; padding:.5rem var(--rand) 1.2rem; }
  .nav li{ border-bottom:1px solid var(--linie); }
  /* Die ganze Zeile ist die Schaltflaeche, nicht nur die Schrift. */
  .nav a{ display:block; width:100%; padding:.95rem var(--rand); margin-inline:calc(var(--rand) * -1);
          border-bottom:none; }
  .nav a[aria-current="page"]{ color:var(--oliv); }
  .kopf-in{ position:relative; flex-wrap:wrap; min-height:74px; }

}

@media (max-width: 980px){
  .raster-3{ grid-template-columns:repeat(2,1fr); }
  .fuss-in{ grid-template-columns:1fr 1fr; }
  .kontakt-grid{ grid-template-columns:1fr; }
}

@media (max-width: 760px){
  .raster-2,.raster-3{ grid-template-columns:1fr; }
  .band-in{ grid-template-columns:1fr 1fr; }
  .fuss-in{ grid-template-columns:1fr; gap:2rem; }
  .hero h1{ max-width:none; }
  .schritte > li{ padding-left:3.4rem; }
}

@media (max-width: 420px){
  .band-in{ grid-template-columns:1fr; }
  .cta-reihe .btn{ width:100%; }
}

@media print{
  .kopf,.nav,.burger,.abschluss,.skip{ display:none; }
  *{ background-image:none !important; }
  body{ background:#fff; color:#000; }
  a{ color:#000; }
}


/* ================================================= Hofwerker-Baukasten */
/* Stempel: gerade Zeilen im Doppelkreis, leicht gedreht - wie ein echter
   Gummistempel. Immer Deko, nie Informationstraeger. */
.stempel{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; width:7.4rem; height:7.4rem; padding:.7rem;
  border:2.5px solid currentColor; border-radius:50%;
  color:var(--oliv); transform:rotate(-7deg);
  font-family:var(--sans); font-weight:700; font-size:.62rem;
  letter-spacing:.11em; text-transform:uppercase; line-height:1.4;
  position:relative; opacity:.88;
}
.stempel::after{
  content:""; position:absolute; inset:5px;
  border:1.5px dashed currentColor; border-radius:50%; opacity:.65;
}
.stempel-braun{ color:var(--braun); }
.stempel-hell{ color:var(--tan-hell); }
.hero .stempel{ position:absolute; right:-1.2rem; bottom:-.6rem; background:var(--creme); }
@media (max-width:760px){ .hero .stempel{ right:0; bottom:0; width:6.2rem; height:6.2rem; } }
.hero-bild{ position:relative; }

/* Werkzeugleiste: stille Icon-Reihe als Trenner */
.werkzeugleiste{
  display:flex; justify-content:center; align-items:center; flex-wrap:wrap;
  gap:clamp(1.2rem,6vw,4rem); padding:.4rem 0 0;
}
.werkzeugleiste img{ width:72px; height:72px; opacity:.8; flex:0 0 auto; }
@media (max-width:400px){ .werkzeugleiste img{ width:58px; height:58px; } }

/* Rahmen wie auf alten Werkstattschildern: Doppelrand mit Eckabstand */
.kasten-alt{
  border:2px solid var(--braun); padding:1.6rem 1.7rem; position:relative;
  background-color:var(--creme);
}
.kasten-alt::before{
  content:""; position:absolute; inset:5px;
  border:1px dashed var(--tan); pointer-events:none;
}

/* Eingeklebtes Foto: weisser Abzug, Klebestreifen, minimale Drehung.
   Fuer ECHTE Fotos aus dem Betrieb - niemals fuer Stockfotos. */
.foto{
  background:#fff; padding:10px 10px 16px; margin:0;
  box-shadow:0 10px 28px rgba(36,22,17,.16);
  transform:rotate(-1.1deg);
}
.foto img{ display:block; width:100%; height:auto; }
.foto figcaption{ font-size:.82rem; color:var(--grau); padding-top:.6rem; text-align:center; }
.foto::before{
  content:""; position:absolute; top:-11px; left:50%; transform:translateX(-50%) rotate(2deg);
  width:92px; height:26px; background:rgba(214,196,161,.55);
  box-shadow:0 1px 3px rgba(36,22,17,.12);
}
.foto{ position:relative; }

/* Felderband: durchgehende Illustration als Trenner zwischen Abschnitten */
.feld-band{ line-height:0; overflow:hidden; background:transparent; }
.feld-band img{ display:block; width:100%; height:auto; }

/* Wasserzeichen: grosse, blasse Illustration hinter dem Text */
.mit-deko{ position:relative; overflow:hidden; }
.mit-deko > .wrap{ position:relative; z-index:1; }
.wasserzeichen{
  position:absolute; margin:0; pointer-events:none; z-index:0;
  opacity:.085; width:clamp(240px,32vw,520px);
}
.wasserzeichen img{ width:100%; height:auto; }
.wz-rechts{ right:-3%; bottom:-6%; }
.wz-links{ left:-2%; bottom:-5%; }
@media (max-width:760px){ .wasserzeichen{ opacity:.06; width:62vw; } }

/* Gezeichnete Figuren, nebeneinander */
.figuren-reihe{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.4rem,4vw,3rem); margin-top:2rem; }
.figur{ margin:0; }
.figur img{ width:100%; max-width:280px; height:auto; }
.figur figcaption{ margin-top:.9rem; font-size:.97rem; color:var(--tinte); max-width:38ch; }
.figur figcaption strong{ color:var(--braun); }
@media (max-width:680px){ .figuren-reihe{ grid-template-columns:1fr; } .figur img{ max-width:220px; } }

/* ------------------------------------------------- Trefferflaechen (Finger)
   Links, die allein in einer Zeile stehen, bekommen eine Flaeche von
   mindestens 44 px Hoehe. Links mitten im Fliesstext bleiben unangetastet -
   dort wuerde Innenabstand den Zeilenfall zerreissen (und die Regel zur
   Zielgroesse nimmt Textlinks ausdruecklich aus). */
.mehr a,
.gross a,
.fuss-sp p a,
.haken > li > a:only-child{
  display:inline-block; padding:.55rem 0; min-height:44px;
}
.fuss-sp p a{ padding:.4rem 0; }

/* Eigenes Foto, im Abzugsrahmen neben den Text gestellt */
.foto-rechts{ float:right; width:clamp(190px,32%,300px); margin:.3rem 0 1.4rem 2rem; }
@media (max-width:640px){
  .foto-rechts{ float:none; width:min(280px,72%); margin:0 auto 1.8rem; }
}

/* ------------------------------------------------------------- Ratgeber */
.beitrag-liste{ display:grid; gap:clamp(1.4rem,3vw,2.2rem); margin-top:.5rem; }
.beitrag-karte{
  background-color:var(--creme); border:1px solid var(--linie); border-left:4px solid var(--oliv);
  padding:clamp(1.3rem,3vw,2rem);
}
.beitrag-karte .augen{ margin-bottom:.5rem; }
.beitrag-karte h2{ font-size:clamp(1.35rem,2.4vw,1.85rem); margin-bottom:.45em; }
.beitrag-karte h2 a{ color:var(--braun); text-decoration:none; }
.beitrag-karte h2 a:hover{ color:var(--oliv); text-decoration:underline; }
.beitrag-karte p{ margin-bottom:.7rem; }
.beitrag-karte .mehr{ margin:0; }

/* Fliesstext eines Beitrags: ruhiger Satz, klare Zwischenueberschriften */
.beitrag h2{ margin-top:2.4rem; }
.beitrag h2:first-child{ margin-top:0; }
.beitrag p{ max-width:66ch; }
.beitrag .haken{ margin:1.2rem 0 1.6rem; }
.beitrag .hinweis{ margin:1.6rem 0; }
.kopfblock .augen a{ color:var(--grau); }


/* Handgezeichneter Pfeil neben einem CTA */
.pfeil-cta{ display:flex; align-items:flex-end; gap:.6rem; }
.pfeil-cta img{ width:64px; height:auto; opacity:.8; transform:translateY(-.6rem); }


/* ------------------------------------------------- Rechtstexte (Kanzlei) */
.rechtstext h2{ font-size:1.3rem; margin:2.4rem 0 .8rem; }
.rechtstext h3{ font-size:1.05rem; margin:1.8rem 0 .6rem; color:var(--braun); }
.rechtstext ol{ margin:0 0 1.1rem 1.4rem; }
.rechtstext p{ margin-bottom:1rem; }
.rechtstext ul{ margin:0 0 1.1rem 1.3rem; }
.rechtstext li{ margin-bottom:.3rem; }
.siegel-zeile{ display:flex; align-items:center; gap:1rem; }
.siegel-zeile > a{ flex:none; line-height:0; }
.siegel-zeile img{ width:88px; height:88px; }
.siegel-zeile span{ display:block; }
.kanzlei-hinweis{ margin-top:3rem; font-size:.85rem; color:var(--grau); }
.kanzlei-hinweis a{ color:var(--grau); }

/* Erreichbarkeit: Wochentage untereinander */
.zeiten{ border-collapse:collapse; margin:.2rem 0 1.1rem; }
.zeiten th,.zeiten td{ text-align:left; padding:.32rem 0; font-size:1rem; vertical-align:top; }
.zeiten th{ font-weight:700; color:var(--braun); padding-right:1.6rem; white-space:nowrap; }
.zeiten td{ color:var(--tinte); white-space:nowrap; }
.zeiten tr + tr th,.zeiten tr + tr td{ border-top:1px solid var(--linie); }

/* ============================================================ SCHNELLKONTAKT
   Mitlaufende Leiste am unteren Rand, nur auf dem Handy.

   Sie ist bewusst zurueckhaltend: Sichtbar wird sie erst, wenn keine der
   echten Handlungsaufforderungen mehr im Bild ist. Die Steuerung uebernimmt
   main.js; ohne JavaScript bleibt die Leiste unsichtbar, was in Ordnung ist -
   Telefonnummer und Formular stehen ja ohnehin auf jeder Seite.

   z-index 45 liegt unter der Kopfzeile (50), damit das aufgeklappte Menue
   die Leiste sauber ueberdeckt. */
.schnellbar{ display:none; }

@media (max-width: 759px){
  .schnellbar{
    display:flex; gap:.5rem;
    position:fixed; left:0; right:0; bottom:0; z-index:45;
    padding:.5rem .6rem;
    /* Auf iPhones sitzt unten der Balken fuer die Gestensteuerung. */
    padding-bottom:calc(.5rem + env(safe-area-inset-bottom, 0px));
    background-color:var(--creme);
    border-top:1px solid var(--tan);
    box-shadow:0 -6px 18px rgba(36,22,17,.14);
    transform:translateY(110%);
    visibility:hidden;
    transition:transform .22s ease, visibility .22s;
  }
  .schnellbar.sichtbar{ transform:none; visibility:visible; }
  /* Bei offenem Menue verschwindet die Leiste, sonst kaempfen zwei
     Bedienelemente um dieselbe Aufmerksamkeit. */
  .nav-offen .schnellbar{ transform:translateY(110%); visibility:hidden; }

  .sb-btn{
    flex:1 1 0; min-height:52px;
    display:flex; align-items:center; justify-content:center; gap:.45rem;
    padding:.55rem .5rem; border-radius:3px;
    font-family:inherit; font-size:1rem; font-weight:700; line-height:1.15;
    text-align:center; text-decoration:none;
  }
  .sb-btn svg{ width:20px; height:20px; flex:0 0 auto; }
  .sb-links{ background-color:var(--sand); color:var(--braun); border:1px solid var(--oliv); }
  .sb-rechts{ background-color:var(--oliv); color:var(--creme); border:1px solid var(--oliv); }
  .sb-btn:focus-visible{ outline:3px solid var(--braun); outline-offset:2px; }
}

@media (prefers-reduced-motion: reduce){
  .schnellbar{ transition:none; }
}

/* ============================================================ RATGEBER
   Ergaenzungen fuer Bereiche, Bilder, verwandte Beitraege und den Schluss.
   Tabellen nutzen .tab/.tab-scroll, wie auf der Leistungsseite. */
.bereiche{ margin:.4rem 0 2rem; }
.bereiche ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem .6rem; }
.bereiche a{
  display:inline-block; padding:.45rem .9rem; border:1px solid var(--tan); border-radius:3px;
  background-color:var(--sand); color:var(--braun); text-decoration:none; font-weight:700; font-size:.95rem;
}
.bereiche a:hover,.bereiche a:focus-visible{ background-color:var(--oliv); border-color:var(--oliv); color:var(--creme); }
h2.bereich{ margin:2.6rem 0 1rem; padding-bottom:.4rem; border-bottom:2px solid var(--braun); scroll-margin-top:5rem; }
h2.bereich:first-of-type{ margin-top:.8rem; }
.beitrag-karte h3{ font-size:clamp(1.25rem,2.2vw,1.6rem); margin-bottom:.4em; }
.beitrag-karte h3 a{ color:var(--braun); text-decoration:none; }
.beitrag-karte h3 a:hover{ color:var(--oliv); text-decoration:underline; }
.lesezeit{ font-weight:400; color:var(--grau); margin-left:.6rem; font-size:.9rem; }
.lesezeit::before{ content:"· "; }

.beitrag h3{ margin-top:1.8rem; font-size:1.15rem; }
.beitrag .tab-scroll{ margin:1.4rem 0 1.8rem; }
.beitrag .tab{ min-width:0; font-size:.95rem; }
.beitrag .tab.breit{ min-width:600px; }
.tab-hinweis{ display:none; font-size:.85rem; color:var(--grau); margin:1.2rem 0 -1rem; }
.tab-hinweis::before{ content:"↔ "; }
@media (max-width:700px){ .tab-hinweis{ display:block; } }
.beitrag .tab th,.beitrag .tab td{ padding:.6rem .8rem; }
/* Erklaervideo: eigener Server, Vorschaubild, keine Plattform */
.video{ margin:2rem 0 1rem; }
.video video{ display:block; width:100%; height:auto; aspect-ratio:16/9; border:1px solid var(--linie); background:var(--creme); border-radius:6px; }
.video figcaption{ font-size:.9rem; color:var(--grau); margin-top:.6rem; max-width:66ch; }
.video .mitschrift{ margin-top:.8rem; max-width:66ch; }
.video .mitschrift summary{ cursor:pointer; font-weight:600; color:var(--braun); }
.video .mitschrift p{ margin:.6rem 0; font-size:.95rem; }
.bg-dunkel .video figcaption,.bg-dunkel .video .mitschrift p{ color:#EDE5D6; }
.bg-dunkel .video .mitschrift summary{ color:var(--creme); }
.bg-dunkel .video video{ border-color:rgba(244,239,226,.35); }
.rechtstext a{ overflow-wrap:anywhere; }
.beitrag-bild{ margin:1.8rem 0; }
.beitrag-bild img{ display:block; width:100%; height:auto; border:1px solid var(--linie); background-color:var(--creme); }
.beitrag-bild figcaption{ font-size:.9rem; color:var(--grau); margin-top:.5rem; }
/* Die Erklaergrafiken sind auf 900 px entworfen. Auf dem Handy waeren sie auf
   ein Drittel verkleinert nicht lesbar - darum behalten sie eine Mindestbreite
   und lassen sich seitlich schieben, mit Hinweis darueber. */
@media (max-width:700px){
  .beitrag-bild{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .beitrag-bild img{ min-width:680px; }
  .beitrag-bild::before{ content:"↔ Grafik lässt sich seitlich verschieben"; display:block; font-size:.85rem; color:var(--grau); margin-bottom:.4rem; }
}
.beitrag .schluss{
  margin:2.4rem 0 1.6rem; padding:1.2rem 1.4rem; border-left:4px solid var(--oliv);
  background-color:var(--sand);
}
.beitrag .schluss p:last-child{ margin-bottom:0; }
.beitrag .verwandt{ margin:2rem 0 1.4rem; padding-top:1.2rem; border-top:1px solid var(--linie); }
.beitrag .verwandt h2{ margin-top:0; font-size:1.2rem; }
.beitrag .verwandt ul{ margin:.4rem 0 0; padding-left:1.2rem; }
.beitrag .verwandt li{ margin:.35rem 0; }

/* Eingebettete Erklaergrafik */
.erklaer{ margin:1.8rem 0 2rem; border:1px solid var(--linie); background-color:var(--creme); padding:1rem; }
.erklaer svg{ display:block; width:100%; height:auto; }
/* Zwei Fassungen je Grafik: quer fuer breite Bildschirme, gestapelt fuer das Handy. */
.erklaer .ep-schmal{ display:none; }
@media (max-width:700px){ .erklaer .ep-breit{ display:none; } .erklaer .ep-schmal{ display:block; max-width:420px; margin:0 auto; } }

/* Erklaergrafik „preis": acht Schritte leuchten nacheinander auf, ein Balken
   fuellt sich. Die Regeln stehen hier statt im SVG, weil die CSP der Seite kein
   eingebettetes CSS erlaubt. Ein Durchlauf: 8 x 2,4 s + 4 s Pause = 23,2 s. */
.erklaer-preis .s{ opacity:.22; }
.erklaer-preis .s text{ opacity:0; }
.erklaer-preis .s text.zahl{ opacity:1; }
.erklaer-preis .ep-breit .balken{ transform:scaleX(0); transform-origin:90px 0; }
.erklaer-preis .ep-schmal .balken{ transform:scaleY(0); transform-origin:0 36px; }
@media (prefers-reduced-motion:no-preference){
  .erklaer-preis .s{ animation:ep-auf 23.2s ease-out infinite; }
  .erklaer-preis .s text{ animation:ep-text 23.2s ease-out infinite; }
  .erklaer-preis .s text.zahl{ animation:none; }
  .erklaer-preis .ep-breit .balken{ animation:ep-balken-x 23.2s linear infinite; }
  .erklaer-preis .ep-schmal .balken{ animation:ep-balken-y 23.2s linear infinite; }
  .erklaer-preis .s-1,.erklaer-preis .s-1 text{ animation-delay:2.4s; }
  .erklaer-preis .s-2,.erklaer-preis .s-2 text{ animation-delay:4.8s; }
  .erklaer-preis .s-3,.erklaer-preis .s-3 text{ animation-delay:7.2s; }
  .erklaer-preis .s-4,.erklaer-preis .s-4 text{ animation-delay:9.6s; }
  .erklaer-preis .s-5,.erklaer-preis .s-5 text{ animation-delay:12s; }
  .erklaer-preis .s-6,.erklaer-preis .s-6 text{ animation-delay:14.4s; }
  .erklaer-preis .s-7,.erklaer-preis .s-7 text{ animation-delay:16.8s; }
}
@media (prefers-reduced-motion:reduce){
  .erklaer-preis .s,.erklaer-preis .s text{ opacity:1; }
  .erklaer-preis .balken{ transform:none; }
}
@keyframes ep-auf{ 0%,2%{opacity:.22} 6%,100%{opacity:1} }
@keyframes ep-text{ 0%,4%{opacity:0} 9%,100%{opacity:1} }
@keyframes ep-balken-x{ 0%{transform:scaleX(0)} 83%,100%{transform:scaleX(1)} }
@keyframes ep-balken-y{ 0%{transform:scaleY(0)} 83%,100%{transform:scaleY(1)} }
.erklaer figcaption{ font-size:.9rem; color:var(--grau); margin-top:.6rem; }

/* ------------------------------------------------------------------ Preisrechner (25.9.2026) */
.rechner{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:2.4rem; align-items:start; }
.rechner[hidden], .rechner-tipp[hidden]{ display:none; }
@media (max-width:820px){ .rechner{ grid-template-columns:1fr; gap:1.6rem; } }
.rechner fieldset{ border:0; padding:0; margin:0 0 1.8rem; min-width:0; }
.rechner legend{ font-family:var(--serif); font-size:1.25rem; font-weight:700; color:var(--braun); margin-bottom:.7rem; padding:0; }
.stepper{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.stepper-knopf{ width:3rem; height:3rem; border:1px solid var(--braun); background:#fff; color:var(--braun);
  font-size:1.5rem; line-height:1; cursor:pointer; font-family:var(--sans); }
.stepper-knopf:hover, .stepper-knopf:focus-visible{ background:var(--braun); color:var(--creme); }
.stepper input{ width:4.5rem; height:3rem; text-align:center; font-size:1.3rem; font-family:var(--sans);
  border:1px solid var(--linie); background:#fff; color:var(--tinte); -moz-appearance:textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.stepper-ergebnis{ margin:0 0 0 .6rem; font-family:var(--sans); font-size:1.15rem; color:var(--oliv); }
.wahl{ display:flex; gap:.75rem; align-items:flex-start; padding:.75rem 0; border-bottom:1px solid var(--linie); cursor:pointer; }
.wahl input{ margin:.25rem 0 0; width:1.15rem; height:1.15rem; flex:none; accent-color:var(--oliv); }
.wahl-text{ flex:1; }
.wahl-hilfe{ display:block; font-size:.88rem; color:var(--grau); margin-top:.2rem; }
fieldset > .wahl-hilfe{ margin-top:.6rem; }
.wahl .betrag{ white-space:nowrap; font-family:var(--sans); font-size:.95rem; color:var(--grau); }
.wahl.enthalten .betrag{ color:var(--oliv); font-weight:600; }
.rechner-ergebnis{ background:#fff; border:1px solid var(--linie); border-top:5px solid var(--oliv);
  padding:1.6rem 1.6rem 1.2rem; box-shadow:0 12px 30px rgba(74,36,27,.08); }
@media (min-width:821px){ .rechner-ergebnis{ position:sticky; top:6.5rem; } }
.rechner-ergebnis .augen{ margin-bottom:.2rem; }
.rechner-summe{ font-family:var(--serif); font-size:clamp(2.3rem,5vw,3.1rem); line-height:1.05; color:var(--oliv); margin:0; }
.rechner-einmalig{ font-size:.88rem; color:var(--grau); margin:.3rem 0 .9rem; }
.rechner-grundlage{ font-weight:600; color:var(--braun); margin:0 0 .6rem; }
.rechner-posten{ list-style:none; padding:0; margin:0 0 1rem; font-size:.95rem; }
.rechner-posten li{ display:flex; justify-content:space-between; gap:1rem; padding:.45rem 0; border-bottom:1px dashed var(--linie); }
.rechner-posten li span:last-child{ white-space:nowrap; font-family:var(--sans); }
.rechner-monat{ margin:0 0 .3rem; font-weight:600; }
.rechner-recht{ font-size:.9rem; color:var(--grau); margin:0 0 1rem; }
.rechner-tipp{ background:var(--sand); border-left:4px solid var(--tan); padding:.8rem 1rem; font-size:.95rem; margin:0 0 1.1rem; }
.rechner-ergebnis .cta-reihe{ margin:0 0 .8rem; }
.rechner-ohne-js{ background:var(--sand); padding:1rem 1.2rem; }

/* ------------------------------------------------------------------ Abstaende statt style-Attributen
   Die Content-Security-Policy erlaubt keine eingebetteten Stile (style="..."),
   der Browser ignoriert sie auf dem Server. Deshalb stehen sie als Klassen hier. */
.abst-10{ margin-top:1rem; }
.abst-14{ margin-top:1.4rem; }
.abst-16{ margin-top:1.6rem; }
.abst-20{ margin-top:2rem; }
.ohne-rand{ margin:0; }
.ohne-maxbreite{ max-width:none; }
.oben-buendig{ align-items:start; }
.spiegeln-hoch{ transform:scaleX(-1) translateY(-.6rem); }
.rechner-rabatt{ background:#EEF1E4; color:var(--oliv); font-weight:600; padding:.55rem .8rem; margin:0 0 .8rem; }
.rechner-rabatt[hidden]{ display:none; }
.rechner-posten li.minus span:last-child{ color:var(--oliv); font-weight:600; }
.gutschein-zeile{ display:flex; flex-wrap:wrap; align-items:center; gap:.7rem; margin:0; }
.gutschein-zeile input{ width:13rem; height:3rem; padding:0 .8rem; font-family:var(--sans); font-size:1.1rem;
  letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--linie); background:#fff; color:var(--tinte); }
.gutschein-status{ font-family:var(--sans); font-size:.95rem; }
.gutschein-status.gut{ color:var(--oliv); font-weight:600; }
.gutschein-status.schlecht{ color:var(--braun); }
.gutschein{ margin:0 0 1.8rem; border-top:1px solid var(--linie); padding-top:1rem; }
.gutschein summary{ cursor:pointer; font-family:var(--sans); font-size:.98rem; color:var(--braun); text-decoration:underline; text-underline-offset:3px; }
.gutschein[open] summary{ margin-bottom:.8rem; text-decoration:none; font-family:var(--serif); font-size:1.25rem; font-weight:700; }

/* ------------------------------------------------------------------ Gutschein, sichtbar (25.9.2026) */
.gutschein{ background:var(--sand); border-left:4px solid var(--tan); padding:1rem 1.2rem; margin:0 0 1.8rem; }
.gutschein-frage{ display:block; font-family:var(--serif); font-size:1.25rem; font-weight:700; color:var(--braun); margin:0 0 .6rem; }
.gutschein .wahl-hilfe{ margin:.6rem 0 0; }

/* ------------------------------------------------------------------ Hinweisfenster Preisrechner */
.rechner-fenster{
  position:fixed; right:1.2rem; bottom:1.2rem; z-index:60; width:min(22rem, calc(100% - 2.4rem));
  background:#fff; border:1px solid var(--linie); border-top:5px solid var(--oliv);
  box-shadow:0 18px 40px rgba(36,22,17,.18); padding:1.2rem 1.3rem 1.3rem;
  opacity:0; transition:opacity .25s ease;
}
.rechner-fenster[hidden]{ display:none; }
.rechner-fenster.offen{ opacity:1; }
.rechner-fenster a, .rf-zu{ touch-action:manipulation; }
.rf-titel{ font-family:var(--serif); font-size:1.3rem; font-weight:700; color:var(--braun); margin:0 2rem .4rem 0; }
.rf-text{ font-size:.95rem; color:var(--grau); margin:0 0 1rem; }
.rechner-fenster .btn{ width:100%; justify-content:center; }
.rf-zu{ position:absolute; top:.4rem; right:.5rem; width:2.4rem; height:2.4rem; border:0; background:transparent;
  font-size:1.7rem; line-height:1; color:var(--grau); cursor:pointer; }
.rf-zu:hover, .rf-zu:focus-visible{ color:var(--braun); }
@media (max-width: 759px){
  .rechner-fenster{ left:.8rem; right:.8rem; bottom:.8rem; width:auto; }
  .fenster-offen .schnellbar{ transform:translateY(110%); visibility:hidden; }
}
@media (prefers-reduced-motion: reduce){ .rechner-fenster{ transition:none; } }
@media print{ .rechner-fenster{ display:none !important; } }
.kopfblock-kurz{ padding-block:clamp(1.8rem,4vw,2.8rem) clamp(1rem,2vw,1.5rem); }
.kopfblock-kurz .lead{ max-width:60ch; }
.abschnitt-rechner{ padding-top:clamp(1.4rem,3vw,2.2rem); }
.abschnitt-rechner .vor{ margin-bottom:1.4rem; }

/* Doppeltipp auf dem Handy zoomt sonst die Seite (Safari auf dem iPhone), statt zwei
   Seiten weiterzuzaehlen. "manipulation" schaltet nur den Doppeltipp-Zoom ab;
   Verschieben und Zoomen mit zwei Fingern bleiben erlaubt. (26.9.2026) */
.rechner, .rechner button, .rechner input, .rechner label, .rechner a{ touch-action:manipulation; }
.stepper-knopf{ -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; }

/* ---------------------------------------------------------- Referenzen (04.10.2026)
   Bildschirmfotos der Kundenseiten: ein Bildschirm breit, zwei Handys daneben.
   Die Rahmen sind nur ein feiner Rand - die fremde Seite spricht fuer sich. */
.referenz{ margin-top:.4rem; }
.referenz-bilder{
  display:grid; grid-template-columns:2fr 1fr 1fr; gap:clamp(.9rem,2vw,1.4rem);
  align-items:start; margin:1.6rem 0 1.4rem;
}
.referenz-bilder .foto{ margin:0; }
.referenz-bilder .foto img{ border:1px solid var(--linie); border-radius:4px; background:#fff; }
.referenz-daten{
  display:grid; grid-template-columns:repeat(2,1fr); gap:.9rem 1.6rem; margin:1.2rem 0 0;
}
.referenz-daten div{ padding-left:.9rem; border-left:3px solid var(--tan); }
.referenz-daten dt{ font-weight:700; color:var(--braun); }
.referenz-daten dd{ margin:0; }
@media (max-width:760px){
  .referenz-bilder{ grid-template-columns:1fr 1fr; }
  .referenz-bilder .referenz-desktop{ grid-column:1 / -1; }
  .referenz-daten{ grid-template-columns:1fr; }
}

/* Website-Check unter den Knoepfen im Kopf der Startseite, Zeitaufwand auf
   der Seite Arbeitsweise (beide seit 09.10.2026) */
.hero-check{ margin-top:1rem; font-size:.98rem; color:var(--tinte); }
.hero-check a{ font-weight:700; }
.zeitaufwand{ margin-top:1.2rem; padding:.9rem 1.1rem; border-left:4px solid var(--oliv);
  background:rgba(92,107,45,.07); max-width:60ch; }