/* =========================================================
   MAKLERWERK – STIL "SIGNATUR"
   Editorial/Magazin-Anmutung mit Bento-Raster.
   Vierter Stil neben kanzlei, studio und kontor.
   Die Kundenfarben werden im <head> gesetzt, hier stehen
   nur Rueckfallwerte.
   ========================================================= */

@font-face{font-family:'Fraunces';font-weight:300 900;font-display:swap;src:url('fonts/Fraunces-variable.woff2') format('woff2')}
@font-face{font-family:'Inter';font-weight:100 900;font-display:swap;src:url('fonts/Inter-variable.woff2') format('woff2')}

:root{
  --marke:#A34400; --marke-dark:#7A3300; --marke-soft:#FFF1E6;
  --akzent:#FA6200; --akzent-txt:#8A3A00; --akzent-hell:#FF8A33;

  /* Neutraler Grundton: warmes Schwarz statt Blau-Grau, damit das
     Orange des Kunden nicht kalt gebrochen wird. */
  --tinte:#12100E;
  --tinte-2:#1B1714;
  --tinte-3:#2A2420;
  --papier:#FBF8F5;
  --papier-2:#F2ECE5;
  --txt:#12100E;
  --mut:#5C534C;
  --mut-dunkel:#A79C93;
  --lin:rgba(18,16,14,.13);
  --lin-hell:rgba(255,255,255,.14);

  --maxw:1240px;
  --gut:clamp(1.15rem,4vw,2.75rem);
  --luft:clamp(4.5rem,9vw,8.5rem);
  --r:2px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--papier); color:var(--txt);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:1rem; line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-family:'Fraunces',Georgia,serif;font-weight:400;line-height:1.02;letter-spacing:-.018em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.zum-inhalt{position:absolute;left:-999px;top:0;z-index:400;background:var(--akzent);color:#fff;padding:.8rem 1.2rem;font-weight:600}
.zum-inhalt:focus{left:0}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--akzent-hell); outline-offset:3px; border-radius:var(--r);
}

/* ---------- Auszeichnungen ---------- */
.kicker{
  font-family:'Inter',sans-serif;font-size:.68rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--akzent-txt);
  display:flex;align-items:center;gap:.7rem;margin-bottom:1.6rem;
}
.kicker::before{content:'';width:28px;height:1px;background:var(--akzent);flex:none}
.dunkel .kicker{color:var(--akzent-hell)}
.dunkel .kicker::before{background:var(--akzent-hell)}

.lead{font-size:clamp(1.02rem,1.35vw,1.22rem);line-height:1.62;color:var(--mut);max-width:56ch}
.dunkel .lead{color:var(--mut-dunkel)}

/* ---------- Entwurfsband ---------- */
.entwurf-band{
  background:var(--marke-dark);color:#fff;text-align:center;
  font-size:.78rem;padding:.55rem 1rem;position:relative;z-index:200;line-height:1.4;
}
.entwurf-band b{font-weight:650}
.entwurf-band a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.entwurf-hinweis{margin-top:1.4rem;max-width:62ch;padding:.85rem 1.1rem;border-left:3px solid var(--akzent);
  background:var(--marke-soft);border-radius:0 var(--r) var(--r) 0;font-size:.93rem;line-height:1.55;color:var(--txt)}
.entwurf-hinweis b{font-weight:650}

/* ---------- Kopfleiste ---------- */
.kopf{
  position:sticky;top:0;z-index:150;background:rgba(251,248,245,.86);
  backdrop-filter:blur(14px) saturate(1.3);border-bottom:1px solid var(--lin);
}
.kopf-innen{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:78px}
.marke{display:inline-flex;align-items:center;gap:.75rem;flex:none}
.marke-zeichen{
  width:38px;height:38px;flex:none;display:grid;place-items:center;
  background:var(--tinte);color:#fff;font-family:'Fraunces',serif;font-size:1.05rem;font-weight:500;
}
.marke-name{font-family:'Fraunces',serif;font-weight:500;font-size:1.16rem;line-height:1.1;letter-spacing:-.01em}
.marke-name small{
  display:block;font-family:'Inter',sans-serif;font-size:.55rem;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:var(--mut);margin-top:.28rem;
}

.menue{display:flex;align-items:center}
.menue-liste{display:flex;align-items:center;gap:0}
.menue-liste>li{position:relative}
.menue-liste>li>a,.menue-liste>li>.reiter{
  display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;
  font-size:.82rem;font-weight:520;letter-spacing:.01em;color:var(--mut);
  padding:.7rem .72rem;background:none;border:0;cursor:pointer;
  border-bottom:1.5px solid transparent;transition:color .2s,border-color .2s;
}
.menue-liste>li>a:hover,.menue-liste>li>.reiter:hover,.menue-liste>li:hover>.reiter{color:var(--txt);border-bottom-color:var(--akzent)}
.menue-liste>li>a.aktiv,.menue-liste>li>.reiter.aktiv{color:var(--txt);border-bottom-color:var(--tinte)}
.pfeil{width:9px;height:9px;flex:none;transition:transform .2s}
.menue-liste>li:hover .pfeil{transform:rotate(180deg)}

.menue-knopf{
  margin-left:.6rem;background:var(--tinte)!important;color:#fff!important;
  padding:.72rem 1.2rem!important;border-bottom:0!important;font-weight:600!important;
  transition:background .2s!important;
}
.menue-knopf:hover{background:var(--akzent)!important;color:#fff!important}

.klapp{
  position:absolute;top:100%;right:0;min-width:min(42rem,84vw);background:var(--papier);
  border:1px solid var(--lin);box-shadow:0 24px 60px -28px rgba(18,16,14,.35);
  padding:1.6rem;display:none;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1.6rem;
}
.menue-liste>li:hover .klapp,.menue-liste>li:focus-within .klapp{display:grid}
.klapp-gruppe h4{
  font-family:'Inter',sans-serif;font-size:.63rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--akzent-txt);margin-bottom:.7rem;
}
.klapp-gruppe li a{display:block;padding:.3rem 0;font-size:.86rem;color:var(--mut);transition:color .16s}
.klapp-gruppe li a:hover{color:var(--akzent-txt)}

.schalter{display:none;width:46px;height:46px;background:none;border:1px solid var(--lin);cursor:pointer;padding:0;position:relative}
.strich{display:block;width:20px;height:1.5px;background:var(--txt);margin:4px auto;transition:transform .25s,opacity .2s}
.schalter[aria-expanded="true"] .strich:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.schalter[aria-expanded="true"] .strich:nth-child(2){opacity:0}
.schalter[aria-expanded="true"] .strich:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* ---------- Buehne ---------- */
.buehne{position:relative;background:var(--tinte);color:#fff;overflow:hidden}
.buehne::before{
  /* Ein sehr weicher Lichtkegel hinter dem Portraet – gibt Tiefe,
     ohne dass ein Bild dafuer noetig waere. */
  content:'';position:absolute;right:-10%;top:-25%;width:70%;height:130%;
  /* Faerbt sich mit der Kundenfarbe. Die erste Zeile ist der Rueckfall
     fuer Browser ohne color-mix. */
  background:radial-gradient(ellipse at center,rgba(255,255,255,.07),transparent 62%);
  background:radial-gradient(ellipse at center,color-mix(in srgb,var(--akzent) 22%,transparent),transparent 62%);
  pointer-events:none;
}
.buehne-innen{
  position:relative;display:grid;gap:clamp(2.5rem,5vw,4.5rem);
  grid-template-columns:1fr;align-items:center;
  padding-block:clamp(4rem,8vw,7.5rem) clamp(4rem,8vw,7rem);
}
.buehne h1{
  font-size:clamp(2.7rem,6.6vw,5.6rem);line-height:.97;font-weight:300;
  letter-spacing:-.028em;margin-bottom:1.7rem;
}
.buehne h1 em{font-style:italic;font-weight:400;color:var(--akzent-hell);padding-right:.08em}
.buehne .lead{color:rgba(255,255,255,.72);font-size:clamp(1.04rem,1.5vw,1.24rem);max-width:48ch}

.buehne-tasten{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.4rem}

/* Portraet als Duplex: Graustufen + Markenfarbe darueber.
   So wirkt ein normales Bewerbungsfoto wie eine Magazinstrecke. */
/* Das Foto bleibt, wie es ist – keine Graustufen, keine
   eingefaerbte Flaeche darueber. Es steht klein in der Ecke
   und soll niemanden erschlagen. Die Bildunterschrift steht
   UNTER dem Bild, nicht darauf: damit gibt es dort auch
   keine Kontrastfrage ueber einem Foto mehr. */
.portraet{position:relative;max-width:230px;width:100%;justify-self:end;align-self:end}
.portraet img{
  width:100%;height:auto;display:block;
  border:1px solid rgba(255,255,255,.16);
}
/* Zwei Inhaber nebeneinander, oder ein Gruppenfoto im Querformat (Tim, 14.10.2026) */
.portraets{display:flex;gap:1rem;justify-self:end;align-self:end}
.portraets .portraet{max-width:180px;min-width:0;flex:1 1 0}
.portraet--breit{max-width:340px}
.buehne-innen>*{min-width:0}
@media (max-width:700px){
  .portraets{justify-self:start;max-width:100%}
  .portraets .portraet{max-width:46%}
  .portraet--breit{max-width:100%;justify-self:start}
}
.portraet-schild{padding:.85rem .1rem 0}
/* Sparten-Symbole */
.kachel-symbol{width:52px;height:52px;padding:12px;border-radius:50%;color:var(--akzent-txt);
  background:color-mix(in srgb,var(--akzent) 12%,transparent);box-sizing:border-box}
.dunkel .kachel-symbol{color:var(--akzent-hell);background:rgba(255,255,255,.08)}
.weiche-eintrag .eintrag-symbol{width:34px;height:34px;padding:7px;flex:0 0 34px;border-radius:50%;box-sizing:border-box;
  color:var(--akzent-txt);background:color-mix(in srgb,var(--akzent) 10%,transparent);margin-right:.8rem}
.weiche-eintrag{align-items:center}
.sparten-liste{margin-top:.4rem;list-style:none;padding:0}
.sparten-liste li{display:flex;align-items:center;gap:.7rem;padding:.38rem 0;color:var(--mut);font-size:.93rem}
.sparten-liste .eintrag-symbol{width:20px;height:20px;flex:0 0 20px;color:var(--akzent-txt)}
.portraet-schild strong{display:block;font-family:'Fraunces',serif;font-size:1.18rem;font-weight:500;letter-spacing:-.01em}
.portraet-schild span{display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--akzent-hell);margin-top:.35rem}

/* ---------- Knoepfe ---------- */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.95rem 1.6rem;font-size:.82rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;border:1.5px solid transparent;cursor:pointer;
  transition:background .22s,color .22s,border-color .22s,transform .22s;
  min-height:48px;
}
.knopf-haupt{background:var(--akzent);color:#fff;border-color:var(--akzent)}
.knopf-haupt:hover{background:var(--akzent-hell);border-color:var(--akzent-hell);color:var(--tinte)}
.knopf-rand{border-color:rgba(255,255,255,.4);color:#fff}
.knopf-rand:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.hell .knopf-rand{border-color:var(--lin);color:var(--txt)}
.hell .knopf-rand:hover{border-color:var(--tinte);background:transparent}
.knopf-dunkel{background:var(--tinte);color:#fff;border-color:var(--tinte)}
.knopf-dunkel:hover{background:var(--akzent);border-color:var(--akzent)}

/* ---------- Belegstreifen ---------- */
.belege{background:var(--papier-2);border-block:1px solid var(--lin)}
.belege-gitter{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1px;background:var(--lin);
}
.beleg{background:var(--papier-2);padding:2.1rem var(--gut)}
.beleg dt{font-size:.63rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);margin-bottom:.6rem}
.beleg dd{margin:0;font-family:'Fraunces',serif;font-size:1.42rem;font-weight:500;line-height:1.15;letter-spacing:-.015em}
.beleg dd small{display:block;font-family:'Inter',sans-serif;font-size:.76rem;font-weight:400;color:var(--mut);margin-top:.4rem;letter-spacing:0}

/* ---------- Abschnitt ---------- */
.abschnitt{padding-block:var(--luft)}
.abschnitt.dunkel{background:var(--tinte);color:#fff}
.abschnitt.getoent{background:var(--papier-2)}
.abschnitt h2{font-size:clamp(1.95rem,4vw,3.3rem);max-width:20ch;margin-bottom:1.3rem}
.kopfzeile{max-width:62ch;margin-bottom:clamp(2.6rem,5vw,4rem)}
.kopfzeile-breit{max-width:none;display:grid;gap:2rem;grid-template-columns:1fr;align-items:end}

/* ---------- Bento ---------- */
.bento{display:grid;gap:1px;background:var(--lin);grid-template-columns:1fr}
.dunkel .bento{background:var(--lin-hell)}
.kachel{background:var(--papier);padding:clamp(1.7rem,3vw,2.6rem);display:flex;flex-direction:column;gap:.85rem;position:relative}
.getoent .kachel{background:var(--papier-2)}
.dunkel .kachel{background:var(--tinte)}
.kachel-nr{font-size:.66rem;font-weight:600;letter-spacing:.2em;color:var(--akzent-txt)}
.dunkel .kachel-nr{color:var(--akzent-hell)}
.kachel h3{font-size:clamp(1.2rem,2vw,1.62rem);letter-spacing:-.015em}
.kachel p{font-size:.93rem;color:var(--mut)}
.dunkel .kachel p{color:var(--mut-dunkel)}
.kachel-gross h3{font-size:clamp(1.5rem,2.8vw,2.2rem)}
.kachel-marke{background:var(--akzent)!important;color:#fff}
.kachel-marke .kachel-nr{color:rgba(255,255,255,.8)}
.kachel-marke p{color:rgba(255,255,255,.9)}
.kachel-link{
  margin-top:auto;padding-top:1rem;font-size:.76rem;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--akzent-txt);display:inline-flex;align-items:center;gap:.5rem;
  transition:gap .2s;
}
.kachel-link:hover{gap:.85rem}
.dunkel .kachel-link{color:var(--akzent-hell)}
.kachel-marke .kachel-link{color:#fff}

/* ---------- Zielgruppen-Weiche ---------- */
.weiche-schalter{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2.4rem}
.weiche-schalter button{
  padding:.75rem 1.35rem;background:transparent;border:1px solid var(--lin);
  font-size:.82rem;font-weight:550;cursor:pointer;min-height:46px;
  transition:background .2s,color .2s,border-color .2s;
}
.weiche-schalter button:hover{border-color:var(--tinte)}
.weiche-schalter button[aria-selected="true"]{background:var(--tinte);color:#fff;border-color:var(--tinte)}
.weiche-liste{display:grid;gap:1px;background:var(--lin);grid-template-columns:1fr}
.weiche-eintrag{background:var(--papier);padding:1.15rem 1.4rem;display:flex;flex-wrap:wrap;
  align-items:baseline;gap:.35rem 1rem;font-size:.95rem}
.getoent .weiche-eintrag{background:var(--papier-2)}
.weiche-eintrag b{font-weight:550;min-width:0}
/* Der Zusatz rechts darf schrumpfen und umbrechen. Mit flex:none
   sprengte er bei zwei Spalten die Zeile und damit die Seite. */
.weiche-eintrag span{font-size:.8rem;color:var(--mut);margin-left:auto;text-align:right;
  min-width:0;flex:0 1 auto}

/* ---------- Vergleichsmatrix ---------- */
.matrix-huelle{overflow-x:auto;border:1px solid var(--lin-hell);-webkit-overflow-scrolling:touch}
.matrix{width:100%;min-width:620px;border-collapse:collapse;font-size:.92rem}
.matrix th,.matrix td{padding:1.05rem 1.2rem;text-align:left;border-bottom:1px solid var(--lin-hell);vertical-align:top}
.matrix thead th{
  font-family:'Inter',sans-serif;font-size:.66rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mut-dunkel);font-weight:600;
}
.matrix thead th.hervor{color:var(--akzent-hell)}
.matrix tbody th{font-weight:550;color:#fff;width:26%}
.matrix td{color:var(--mut-dunkel)}
.matrix td.hervor{color:#fff;background:rgba(255,255,255,.05)}
.matrix td.hervor{background:color-mix(in srgb,var(--akzent-hell) 11%,transparent)}
.matrix tr:last-child th,.matrix tr:last-child td{border-bottom:0}
.zeichen{display:inline-flex;width:18px;height:18px;margin-right:.6rem;flex:none;vertical-align:-3px}

/* ---------- Stimmen ---------- */
.stimmen{display:grid;gap:1px;background:var(--lin);grid-template-columns:1fr}
.stimme{margin:0;min-width:0;background:var(--papier);padding:clamp(1.8rem,3vw,2.6rem);display:flex;flex-direction:column;gap:1.2rem}
.stimme blockquote{margin:0;font-family:'Fraunces',serif;font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.34;font-weight:400;letter-spacing:-.012em}
.stimme figcaption{font-size:.82rem;color:var(--mut);margin-top:auto}
.stimme figcaption b{display:block;font-weight:600;color:var(--txt);font-size:.88rem}
.stimme-leer{background:repeating-linear-gradient(135deg,var(--papier),var(--papier) 11px,var(--papier-2) 11px,var(--papier-2) 22px)}
.stimme-leer blockquote{color:var(--mut)}
.platzhalter-fahne{
  display:inline-block;font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  background:var(--tinte);color:#fff;padding:.35rem .7rem;align-self:flex-start;
}

/* ---------- Werkzeuge (Check, Schaden, Termin) ---------- */
.werkzeug{background:var(--papier);border:1px solid var(--lin);display:flex;flex-direction:column}
.dunkel .werkzeug{background:var(--tinte-2);border-color:var(--lin-hell)}
.werkzeug-kopf{padding:1.5rem 1.6rem;border-bottom:1px solid var(--lin);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.dunkel .werkzeug-kopf{border-color:var(--lin-hell)}
.werkzeug-kopf h3{font-size:1.25rem}
.werkzeug-koerper{padding:1.6rem;display:flex;flex-direction:column;gap:1.2rem;flex:1}
.werkzeug-fuss{padding:1.2rem 1.6rem;border-top:1px solid var(--lin);display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.dunkel .werkzeug-fuss{border-color:var(--lin-hell)}

.fortschritt{height:2px;background:var(--lin);position:relative;overflow:hidden}
.dunkel .fortschritt{background:var(--lin-hell)}
.fortschritt i{position:absolute;inset:0 auto 0 0;background:var(--akzent);transition:width .35s cubic-bezier(.22,1,.36,1)}
.schritt-zahl{font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
.dunkel .schritt-zahl{color:var(--mut-dunkel)}

.frage{font-family:'Fraunces',serif;font-size:clamp(1.25rem,2.3vw,1.75rem);line-height:1.2;letter-spacing:-.015em}
.antworten{display:grid;gap:.6rem}
.antwort{
  display:flex;align-items:center;gap:.9rem;padding:.95rem 1.15rem;text-align:left;
  background:transparent;border:1px solid var(--lin);cursor:pointer;min-height:52px;
  font-size:.95rem;transition:border-color .18s,background .18s;width:100%;
}
.dunkel .antwort{border-color:var(--lin-hell);color:#fff}
.antwort:hover{border-color:var(--akzent)}
.antwort .kuerzel{
  width:26px;height:26px;flex:none;display:grid;place-items:center;border:1px solid var(--lin);
  font-size:.72rem;font-weight:600;
}
.dunkel .antwort .kuerzel{border-color:var(--lin-hell)}
.antwort[aria-pressed="true"]{border-color:var(--akzent);background:rgba(127,127,127,.10)}
.antwort[aria-pressed="true"]{background:color-mix(in srgb,var(--akzent) 12%,transparent)}
.antwort[aria-pressed="true"] .kuerzel{background:var(--akzent);border-color:var(--akzent);color:#fff}

.ergebnis-liste{display:grid;gap:.55rem}
.ergebnis-zeile{display:flex;gap:.8rem;align-items:flex-start;font-size:.93rem;padding:.7rem 0;border-bottom:1px solid var(--lin)}
.dunkel .ergebnis-zeile{border-color:var(--lin-hell)}
.ergebnis-zeile:last-child{border-bottom:0}
.ampel{width:9px;height:9px;border-radius:50%;flex:none;margin-top:.5rem}
.ampel-luecke{background:var(--akzent)}
.ampel-ok{background:#3E7D52}
.ampel-frage{background:var(--mut)}

/* Terminplaner */
.tage{display:flex;gap:.45rem;overflow-x:auto;padding-bottom:.4rem}
.tag-knopf{
  flex:none;min-width:66px;padding:.7rem .5rem;text-align:center;background:transparent;
  border:1px solid var(--lin);cursor:pointer;line-height:1.3;transition:border-color .18s,background .18s;
}
.dunkel .tag-knopf{border-color:var(--lin-hell);color:#fff}
.tag-knopf small{display:block;font-size:.63rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.dunkel .tag-knopf small{color:var(--mut-dunkel)}
.tag-knopf b{display:block;font-family:'Fraunces',serif;font-size:1.2rem;font-weight:500;margin-top:.2rem}
.tag-knopf[aria-pressed="true"]{background:var(--akzent);border-color:var(--akzent);color:#fff}
.tag-knopf[aria-pressed="true"] small{color:rgba(255,255,255,.85)}
.zeiten{display:flex;flex-wrap:wrap;gap:.45rem}
.zeit-knopf{
  padding:.6rem 1rem;background:transparent;border:1px solid var(--lin);cursor:pointer;
  font-size:.88rem;min-height:44px;transition:border-color .18s,background .18s;
}
.dunkel .zeit-knopf{border-color:var(--lin-hell);color:#fff}
.zeit-knopf[aria-pressed="true"]{background:var(--akzent);border-color:var(--akzent);color:#fff}

/* ---------- Formular ---------- */
.feld{display:flex;flex-direction:column;gap:.42rem;margin-bottom:1.1rem}
.feld label{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.dunkel .feld label{color:var(--mut-dunkel)}
.feld input,.feld textarea,.feld select{
  font:inherit;font-size:.96rem;padding:.85rem .95rem;background:var(--papier);
  border:1px solid var(--lin);color:var(--txt);min-height:48px;border-radius:0;
}
.dunkel .feld input,.dunkel .feld textarea,.dunkel .feld select{background:var(--tinte);border-color:var(--lin-hell);color:#fff}
.feld input:focus,.feld textarea:focus{border-color:var(--akzent);outline-offset:1px}
.feld-hinweis{font-size:.78rem;color:var(--mut)}
.dunkel .feld-hinweis{color:var(--mut-dunkel)}

/* ---------- Kontaktband ---------- */
.band{background:var(--akzent);color:#fff}
.band-innen{display:grid;gap:2rem;grid-template-columns:1fr;align-items:center;padding-block:clamp(3rem,6vw,4.6rem)}
.band h2{font-size:clamp(1.8rem,3.6vw,2.9rem);max-width:18ch;margin:0}
.band p{color:rgba(255,255,255,.9);margin-top:1rem;max-width:48ch}
.band .knopf-haupt{background:#fff;color:var(--akzent-txt);border-color:#fff}
.band .knopf-haupt:hover{background:var(--tinte);border-color:var(--tinte);color:#fff}

/* ---------- Fuss ---------- */
.fuss{background:var(--tinte);color:var(--mut-dunkel);padding-block:clamp(3.4rem,6vw,5rem) 2rem;font-size:.88rem}
.fuss-gitter{display:grid;gap:2.4rem;grid-template-columns:1fr;margin-bottom:3rem}
.fuss h4{font-family:'Inter',sans-serif;font-size:.64rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#fff;margin-bottom:1rem}
.fuss a{color:var(--mut-dunkel);transition:color .18s}
.fuss a:hover{color:var(--akzent-hell)}
.fuss li{padding:.24rem 0}
.fuss-unten{border-top:1px solid var(--lin-hell);padding-top:1.7rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.79rem}

/* ---------- Sanftes Einblenden ---------- */
.auf{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.auf.da{opacity:1;transform:none}

/* =========================================================
   Ab hier die Breiten
   ========================================================= */
@media (min-width:640px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .stimmen{grid-template-columns:repeat(2,1fr)}
  .weiche-liste{grid-template-columns:repeat(2,1fr)}
  .fuss-gitter{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:900px){
  .buehne-innen{grid-template-columns:1fr auto}
  .band-innen{grid-template-columns:1.5fr auto}
  .kopfzeile-breit{grid-template-columns:1.4fr 1fr}
  .fuss-gitter{grid-template-columns:1.6fr 1fr 1fr 1fr}
  .bento{grid-template-columns:repeat(4,1fr)}
  .kachel-gross{grid-column:span 2;grid-row:span 2}
  .kachel-breit{grid-column:span 2}
  .stimmen{grid-template-columns:repeat(3,1fr)}
  .werkzeug-paar{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--lin-hell)}
}

/* Menue als Feld, solange die Leiste nicht in eine Zeile passt */
@media (max-width:1279px){
  .schalter{display:block}
  .menue-liste{
    position:fixed;left:0;right:0;top:100%!important;bottom:auto!important;
    height:calc(100dvh - 100%);padding-top:0!important;
    flex-direction:column;align-items:stretch;gap:0;background:var(--papier);
    border-top:1px solid var(--lin);overflow-y:auto;padding:0 var(--gut) 2.5rem;
    /* Nicht seitlich aus dem Bild schieben: ein festes Feld neben der
       Seite zieht die Scrollbreite mit und erzeugt waagerechtes
       Scrollen. Stattdessen ein- und ausblenden mit kurzem Versatz. */
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .24s ease,transform .28s cubic-bezier(.22,1,.36,1),visibility 0s linear .3s;
  }
  .menue.offen .menue-liste{opacity:1;visibility:visible;transform:none;transition-delay:0s,0s,0s}
  .menue-liste>li{border-bottom:1px solid var(--lin)}
  .menue-liste>li>a,.menue-liste>li>.reiter{
    width:100%;justify-content:space-between;padding:1.05rem .2rem;border-bottom:0;font-size:1rem;
  }
  .klapp{
    position:static;display:none;border:0;box-shadow:none;padding:0 0 1.2rem .2rem;
    grid-template-columns:1fr;gap:1.2rem;min-width:0;background:none;
  }
  .menue-liste>li.auf-klapp .klapp{display:grid}
  .menue-liste>li:hover .klapp{display:none}
  .menue-liste>li.auf-klapp .klapp{display:grid}
  .menue-knopf{margin:1.4rem 0 0;justify-content:center!important;padding:1rem!important}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .auf{opacity:1;transform:none}
}

/* Ein gesetztes display:grid schlaegt das hidden-Attribut. Deshalb
   hier ausdruecklich zuruecknehmen – sonst stehen alle Zielgruppen
   gleichzeitig auf der Seite. */
.weiche-liste[hidden],.bento[hidden],.stimmen[hidden],[hidden]{display:none!important}

/* Ob auf der Markenflaeche heller oder dunkler Text steht, haengt
   von der Kundenfarbe ab: Weiss auf einem hellen Orange erreicht nur
   3,1:1, auf einem dunklen Gruen dagegen ueber 5:1. Der Generator
   setzt deshalb pro Kunde die Klasse "text-dunkel" – oder eben nicht. */
.band.text-dunkel,
.band.text-dunkel h2{color:var(--tinte)}
.band.text-dunkel p{color:rgba(18,16,14,.82)}
.band.text-dunkel .knopf-haupt{background:var(--tinte);color:#fff;border-color:var(--tinte)}
.band.text-dunkel .knopf-haupt:hover{background:#fff;border-color:#fff;color:var(--akzent-txt)}

.kachel-marke.text-dunkel,
.kachel-marke.text-dunkel h3{color:var(--tinte)}
.kachel-marke.text-dunkel p{color:rgba(18,16,14,.82)}
.kachel-marke.text-dunkel .kachel-nr{color:rgba(18,16,14,.6)}
.kachel-marke.text-dunkel .kachel-link{color:var(--tinte)}

/* ---------- Kundenlogos ---------- */
/* Echte Logos in Graustufen: sie sollen Vertrauen tragen, nicht mit
   zwoelf Fremdfarben gegen die Seite arbeiten. */
.logos{border-block:1px solid var(--lin);background:var(--papier-2);padding-block:clamp(2.2rem,4vw,3.4rem)}
.logos-zeile{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(1.6rem,4vw,3.2rem);margin-top:1.4rem}
.logos p.kicker{justify-content:center;margin-bottom:0}
.logos img{height:clamp(34px,4.4vw,50px);width:auto;object-fit:contain;
  filter:grayscale(1) contrast(.95) opacity(.7);transition:filter .25s;
  /* Viele Kundenlogos liegen als JPG mit weissem Grund vor. "multiply"
     laesst das Weiss verschwinden, statt helle Kaesten stehen zu lassen. */
  mix-blend-mode:multiply}
.logos img:hover{filter:grayscale(0) opacity(1)}

/* Hat ein Kunde kein eigenes Foto, steht an der Stelle des Portraets
   seine staerkste nachweisbare Zahl. Leere Flaeche waere schlechter. */
.merkmal{border-left:2px solid var(--akzent-hell);padding:.4rem 0 .4rem 1.6rem;justify-self:start}
.merkmal-zahl{font-family:'Fraunces',serif;font-size:clamp(3.6rem,8vw,6.4rem);
  font-weight:400;line-height:.9;letter-spacing:-.04em;color:var(--akzent-hell)}
.merkmal-text{margin-top:.9rem;font-size:.98rem;line-height:1.5;color:rgba(255,255,255,.72);max-width:22ch}

/* ---------- Dritte Spalte in der Werkzeugreihe ---------- */
/* Zwei Werkzeuge passen ab 900px nebeneinander, drei erst ab 1100px.
   Darunter bleibt es einspaltig – das ist auf dem Handy ohnehin
   die einzige lesbare Form. */
@media (min-width:900px) and (max-width:1099px){
  .werkzeug-drei{grid-template-columns:1fr}
}
@media (min-width:1100px){
  .werkzeug-drei{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--lin-hell)}
}
.termin-echo{
  margin-top:.9rem;padding:.6rem .8rem;font-size:.88rem;font-weight:550;
  border:1px solid var(--akzent);color:#fff;
  background:rgba(127,127,127,.10);
  background:color-mix(in srgb,var(--akzent) 14%,transparent);
}

/* Rasterfelder sind standardmaessig nie schmaler als ihr Inhalt
   (min-width:auto). Die zehn Tagesknoepfe druecken die Spalte damit
   auseinander, statt in ihrem eigenen Rahmen zu scrollen. */
.werkzeug{min-width:0}
.tage,.zeiten,.antworten,.ergebnis-liste{min-width:0}
.tage{scrollbar-width:thin}

/* ---------- Buehnenbild ---------- */
/* Das Foto liegt GANZ hinten, darueber ein Verlauf von fast
   deckend (links, wo der Text steht) nach durchscheinend
   (rechts). So bleibt der weisse Text bei 4,5:1, und das Bild
   ist trotzdem als Bild zu erkennen. Ohne diesen Verlauf
   waere weisse Schrift auf einem Sommerhimmel unlesbar. */
.buehne--bild{background-size:cover;background-position:center 40%;background-repeat:no-repeat}
.buehne--bild::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(18,16,14,.96) 0%,
    rgba(18,16,14,.90) 34%,
    rgba(18,16,14,.80) 62%,
    rgba(18,16,14,.74) 100%);
}
/* Zusaetzlich von unten abdunkeln, damit die Knoepfe stehen. */
.buehne--bild::before{
  background:
    radial-gradient(ellipse at 78% 40%,color-mix(in srgb,var(--akzent) 26%,transparent),transparent 62%),
    linear-gradient(0deg,rgba(18,16,14,.85) 0%,transparent 42%);
  z-index:1;right:0;top:0;width:100%;height:100%;
}
.buehne--bild .buehne-innen{z-index:2}

@media (max-width:899px){
  /* Auf schmalen Geraeten steht der Text ueber der ganzen
     Breite – der seitliche Verlauf reicht dort nicht. */
  .buehne--bild::after{
    background:linear-gradient(180deg,
      rgba(18,16,14,.90) 0%,
      rgba(18,16,14,.93) 55%,
      rgba(18,16,14,.97) 100%);
  }
}

/* Ueber einem Foto braucht der kleine Text mehr Deckung als ueber
   reinem Schwarz – gemessen waren es dort nur 3,4:1. */
.buehne--bild .merkmal-text{color:rgba(255,255,255,.93)}
.buehne--bild .lead{color:rgba(255,255,255,.88)}

/* ---------- Zierde ---------- */
/* Grossflaechig, sehr zurueckhaltend, immer hinter dem Inhalt.
   Das Motiv kommt aus dem Zeichen des Kunden – deshalb braucht es
   kein gekauftes Bild, um Flaeche zu fuellen. */
.zierde{
  position:absolute;right:-6%;top:50%;transform:translateY(-50%);
  width:min(46rem,62%);height:auto;z-index:0;pointer-events:none;
  color:var(--akzent-hell);opacity:.10;
}
/* In der Buehne sitzt rechts die Kennzahl. Der Kranz muss ueber ihr
   und hinter ihr bleiben, sonst klebt ein Stern auf der Ziffer. */
.buehne .zierde{
  right:-17%;top:-14%;transform:none;
  width:min(40rem,56%);opacity:.13;
}
.buehne--bild .zierde{opacity:.17;z-index:2}
.abschnitt.dunkel{position:relative;overflow:hidden}
.abschnitt.dunkel > .container{position:relative;z-index:1}

@media (max-width:899px){
  .zierde{width:88%;right:-22%;opacity:.07}
}

/* ---------- Bildband ---------- */
/* Ein zweiter Bildmoment, weit unten auf der Seite. Gleiches
   Verfahren wie in der Buehne: Foto hinten, Verlauf davor. */
.bildband{
  position:relative;background-size:cover;background-position:center 55%;
  color:#fff;isolation:isolate;
}
.bildband::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:linear-gradient(90deg,rgba(18,16,14,.95) 0%,rgba(18,16,14,.86) 48%,rgba(18,16,14,.66) 100%);
}
.bildband-innen{
  position:relative;z-index:1;
  padding-block:clamp(4rem,9vw,7.5rem);max-width:var(--maxw);
}
.bildband h2{font-size:clamp(1.9rem,3.8vw,3rem);max-width:18ch;margin-bottom:1.2rem}
.bildband .lead{color:rgba(255,255,255,.88);max-width:52ch}
.bildband .kicker{color:var(--akzent-hell)}
.bildband .kicker::before{background:var(--akzent-hell)}

@media (max-width:899px){
  .bildband::before{
    background:linear-gradient(180deg,rgba(18,16,14,.90) 0%,rgba(18,16,14,.95) 100%);
  }
}

/* ---------- Eigenes Zeichen des Kunden ---------- */
/* Wenn ein Logo vorliegt, ersetzt es Kaestchen UND Schriftzug –
   die meisten Maklerlogos enthalten den Namen bereits, sonst
   staende er doppelt da. Hoehe begrenzt, Breite gedeckelt,
   damit ein breites Logo die Leiste nicht sprengt. */
.marke-bild{
  height:clamp(30px,3.4vw,40px);width:auto;
  max-width:min(230px,38vw);object-fit:contain;display:block;
}
.marke-mit-logo{gap:0}

@media (max-width:1279px){
  .marke-bild{height:clamp(28px,6vw,36px);max-width:min(200px,52vw)}
}

/* Manche Logos tragen den Namen in einer Schriftgroesse, die auf
   Leistenhoehe nur noch ein paar Pixel hoch waere. Dann wird nur
   das Zeichen verwendet und der Name daneben gesetzt. */
.marke-zeichenbild{
  height:38px;width:auto;max-width:58px;object-fit:contain;flex:none;display:block;
}
@media (max-width:1279px){ .marke-zeichenbild{height:34px;max-width:52px} }

/* Lange Zusaetze wie "Finanz- und Versicherungsmakler" sind auf einem
   375-Pixel-Geraet breiter als der Platz neben dem Menueknopf. Gemessen
   bei Arnold: Zusatz 244 px, Leiste dadurch 11 px zu breit. Auf schmalen
   Geraeten faellt der Zusatz weg, der Name selbst darf schrumpfen. */
.marke{min-width:0}
.marke-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.marke-name small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:559px){
  .marke-name small{display:none}
  .marke-name{font-size:1.05rem}
}

/* Eigene Unterschrift des Kunden im Schlussband. Nur einsetzen,
   wenn sie wirklich von ihm stammt. Die Hoehe ist begrenzt, damit
   sie neben der Ueberschrift nicht dominiert; auf dunklem Band
   wird sie aufgehellt, weil die meisten Unterschriften in dunkler
   Tinte vorliegen. */
.unterschrift{display:flex;align-items:center;gap:.9rem;margin-top:1.6rem}
.unterschrift img{height:clamp(34px,4vw,46px);width:auto;max-width:190px;object-fit:contain}
.unterschrift span{
  font-family:'Inter',sans-serif;font-size:.62rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;opacity:.85;
}
.band:not(.text-dunkel) .unterschrift img{filter:brightness(0) invert(1);opacity:.92}
.band.text-dunkel .unterschrift img{filter:brightness(0);opacity:.88}

/* Helle Akzentfarben (Orange, Gelb, helles Gruen) tragen kein Weiss:
   gemessen bei Uwe Walter 3,37:1 fuer Weiss auf #F15A23. Traegt der
   Kunde markeTextDunkel, bekommt der ganze Entwurf Tinte auf dem
   Akzent statt Weiss – nicht nur Kachel und Band. */
body.akzent-hell .knopf-haupt{color:var(--tinte)}
body.akzent-hell .knopf-haupt:hover{background:var(--tinte);border-color:var(--tinte);color:#fff}
body.akzent-hell .zum-inhalt{color:var(--tinte)}
body.akzent-hell .antwort[aria-pressed="true"] .kuerzel,
body.akzent-hell .tag-knopf[aria-pressed="true"],
body.akzent-hell .zeit-knopf[aria-pressed="true"]{color:var(--tinte)}

/* Wenn das Foto dem Kunden selbst gehoert und etwas zeigt, das
   kein Mitbewerber hat, darf es sichtbarer sein. Der Schleier
   wird dann rechts duenner. NUR MIT NACHMESSUNG einsetzen:
   python _bausatz/miss-kontrast.py demo-<kunde>-signatur */
.buehne--bild.bild-zeigen::after{
  background:linear-gradient(90deg,
    rgba(18,16,14,.94) 0%,
    rgba(18,16,14,.82) 34%,
    rgba(18,16,14,.58) 62%,
    rgba(18,16,14,.42) 100%);
}
@media (max-width:899px){
  .buehne--bild.bild-zeigen::after{
    background:linear-gradient(180deg,
      rgba(18,16,14,.80) 0%,
      rgba(18,16,14,.90) 42%,
      rgba(18,16,14,.94) 100%);
  }
}

/* Der Besonderheiten-Abschnitt: das eine Angebot, das der Kunde
   hat und das die Mitbewerber nicht fuehren. Steht gleich nach
   dem Belegstreifen, damit es nicht wieder in einem Untermenue
   verschwindet – genau der Fehler, den der Entwurf behebt. */
.besonderheit{background:var(--marke-soft);border-block:1px solid var(--lin-hell)}
.besonderheit-innen{
  display:grid;grid-template-columns:1fr;gap:1.6rem;
  padding-block:clamp(3rem,6vw,4.6rem);
}
.besonderheit h2{
  font-family:'Fraunces',serif;font-weight:400;
  font-size:clamp(1.6rem,3.2vw,2.5rem);line-height:1.12;
  letter-spacing:-.02em;margin:.7rem 0 0;color:var(--marke);
}
.besonderheit .lead{margin:0;max-width:60ch}
@media (min-width:900px){
  .besonderheit-innen{grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4rem);align-items:start}
}

/* Zwischen 1280 und 1420 Pixeln ist die Leiste am engsten: Das
   Klappmenue erscheint ab 1280, aber ein Fenster von 1280 hat nach
   Abzug des Rollbalkens nur 1265 nutzbare Pixel. Bei Kunden mit
   langen Bereichsnamen (Rapsch: 1277 px gemessen) lief das Menue
   rechts heraus. Deshalb sitzen die Menuepunkte in diesem Band
   enger. Ab 1420 Pixeln gilt wieder der normale Abstand. */
@media (min-width:1280px){
  .menue-liste>li>a,.menue-liste>li>.reiter{padding:.7rem .5rem;font-size:.79rem}
  .menue-knopf{margin-left:.35rem;padding:.72rem .85rem!important}
  .marke-bild{max-width:min(200px,26vw)}
}

/* Deutsche Komposita sprengen auf schmalen Geraeten jede Zeile:
   "Lebensversicherung" in der Bühnenschrift ist bei 375 Pixeln
   breiter als das Fenster (gemessen bei MVK: 18 px Ueberlauf).
   Deshalb duerfen grosse Ueberschriften trennen und notfalls
   umbrechen. Gilt fuer alle Kunden. */
h1, h2, h3, .merkmal-zahl, .kachel h3, .besonderheit h2, .bildband h2 {
  overflow-wrap: break-word;
  hyphens: auto;
}
/* Rasterfelder wachsen standardmaessig auf ihren laengsten
   Inhalt (min-width:auto). Deshalb brach "Lebensversicherung"
   oben nicht um, sondern schob die ganze Buehne 18 px nach
   rechts. Die Felder duerfen schrumpfen: */
.buehne-innen > *, .kopfzeile > *, .besonderheit-innen > * { min-width: 0; }
/* Dasselbe im Belegstreifen: Eine lange Kennzahl wie
   "Sondereinstufung" hat dort die ganze Seite 18 px breiter
   gemacht (gemessen bei MVK). */
.belege-gitter > *, .beleg { min-width: 0; }
.beleg > * { overflow-wrap: break-word; hyphens: auto; }

/* Wenn das Foto des Kunden sichtbar sein soll (bildZeigen), bleibt
   der Schleier duenn – das Bild traegt die Buehne. Die Kennzahl
   rechts steht aber genau dort, wo er am duennsten ist; bei MVK
   fiel sie so auf 3,02 : 1. Statt den ganzen Schleier wieder zu
   verdichten, bekommt nur die Kennzahl eine eigene dunkle Flaeche.
   So bleibt das Foto sichtbar und die Zahl lesbar. */
.buehne--bild.bild-zeigen .merkmal{
  background:rgba(18,16,14,.72);
  padding:1.3rem 1.5rem 1.4rem;
  border-left:0;
  box-shadow:inset 3px 0 0 var(--akzent-hell);
}

/* =========================================================
   NACHTRAG 22.09.2026 – was die Spitzenseiten der Branche
   vorn haben: Bewertung oben, Buchung in drei Schritten,
   Schaden melden, Schnellkontakt auf dem Handy.
   ========================================================= */

/* --- Bewertungssiegel (nur mit echten Zahlen, siehe Generator) --- */
.siegel{
  display:inline-flex;align-items:center;gap:.8rem;margin:1.6rem 0 0;
  padding:.62rem .95rem .62rem .8rem;background:rgba(18,16,14,.55);
  border:1px solid rgba(255,255,255,.18);color:#fff;text-decoration:none;
  font-size:.86rem;line-height:1.3;max-width:100%;
}
a.siegel:hover{border-color:rgba(255,255,255,.5)}
.siegel-sterne{display:inline-flex;gap:2px;flex:none}
.stern{
  width:15px;height:15px;display:inline-block;
  background:linear-gradient(90deg,#F5B301 var(--fuell),rgba(255,255,255,.28) var(--fuell));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.2l2.7 5.6 6.1.8-4.5 4.2 1.1 6-5.4-2.9-5.4 2.9 1.1-6L1.2 7.6l6.1-.8z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.2l2.7 5.6 6.1.8-4.5 4.2 1.1 6-5.4-2.9-5.4 2.9 1.1-6L1.2 7.6l6.1-.8z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.siegel-text b{font-weight:650}
.siegel-text small{display:block;font-size:.7rem;color:rgba(255,255,255,.72);margin-top:.1rem}

/* --- Schaden melden im Menue --- */
.menue-liste>li>a.menue-schaden{color:var(--akzent-txt);font-weight:600}
.menue-schaden svg{width:14px;height:14px;flex:none}
.menue-liste>li>a.menue-schaden:hover{color:var(--txt)}

/* --- Buchung in drei Schritten --- */
.buchung{background:var(--papier);border:1px solid var(--lin);min-width:0}
.kontakt-raster{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.kontakt-raster>*{min-width:0}
.kontakt-seite h3{font-size:clamp(1.4rem,2.2vw,1.8rem);line-height:1.15;margin:.2rem 0 1.2rem}
.kontakt-seite .weiche-eintrag{flex-direction:column;align-items:flex-start;gap:.15rem;padding:.9rem 1.1rem}
@media (min-width:1100px){.kontakt-raster{grid-template-columns:minmax(0,1fr) 20rem}}
.buchung-schritte{
  list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);
  border-bottom:1px solid var(--lin);
}
.buchung-schritte li{
  display:flex;align-items:center;gap:.6rem;padding:1rem clamp(.8rem,2.4vw,1.6rem);
  font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);
  border-bottom:2px solid transparent;margin-bottom:-1px;min-width:0;
}
.buchung-schritte span{
  width:1.7rem;height:1.7rem;flex:none;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--lin);font-family:'Fraunces',serif;font-size:.9rem;letter-spacing:0;
}
.buchung-schritte li[aria-current="step"]{color:var(--txt);border-bottom-color:var(--akzent)}
.buchung-schritte li[aria-current="step"] span{background:var(--tinte);border-color:var(--tinte);color:#fff}
.buchung-schritte li.erledigt span{background:var(--papier-2);color:var(--txt)}
.buchung-seite{border:0;margin:0;padding:clamp(1.3rem,3.5vw,2.4rem);min-width:0}
.buchung-seite legend{float:left;width:100%;padding:0;margin:0 0 1.1rem;outline:none}
.buchung-seite legend+*{clear:both}
.frage-klein{font-size:clamp(1.05rem,1.8vw,1.3rem)!important;margin:1.8rem 0 1rem}
.wahl{display:flex;flex-wrap:wrap;gap:.5rem}
.wahl-knopf{
  padding:.72rem 1.05rem;min-height:44px;background:transparent;border:1px solid var(--lin);
  cursor:pointer;font:inherit;font-size:.92rem;color:var(--txt);text-align:left;
  transition:border-color .18s,background .18s;
}
.wahl-knopf:hover{border-color:var(--tinte)}
.wahl-knopf[aria-pressed="true"]{background:var(--tinte);border-color:var(--tinte);color:#fff}
.buchung-felder{display:grid;gap:0 1.2rem}
.buchung-zusammen{display:grid;gap:1px;background:var(--lin);border:1px solid var(--lin);margin-bottom:1.6rem}
.buchung-zusammen div{background:var(--papier-2);padding:.75rem 1rem;min-width:0}
.buchung-zusammen small{display:block;font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.buchung-zusammen b{font-weight:560;overflow-wrap:break-word}
.buchung-eilig{grid-column:1/-1;margin:0;padding:.8rem 1rem;background:var(--papier);color:var(--akzent-txt);font-size:.9rem}
.buchung-fuss{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;justify-content:flex-end;
  padding:1rem clamp(1.3rem,3.5vw,2.4rem);border-top:1px solid var(--lin);background:var(--papier-2);
}
.buchung-fuss [data-zurueck]{margin-right:auto}
.buchung-fehlt{flex-basis:100%;margin:0;text-align:right;font-size:.86rem;color:var(--akzent-txt)}
.buchung-fehlt:empty{display:none}
@media (min-width:640px){
  .buchung-felder{grid-template-columns:1fr 1fr}
  .buchung-zusammen{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:559px){
  .buchung-schritte li{flex-direction:column;gap:.35rem;font-size:.64rem;padding:.8rem .3rem;text-align:center}
}

/* --- Schnellkontakt: Handy unten, Desktop WhatsApp-Knopf --- */
.schnell{display:none}
.wa-knopf{
  position:fixed;right:1.4rem;bottom:1.4rem;z-index:40;width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;background:#0F7A5A;color:#fff;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.45);transition:transform .2s;
}
.wa-knopf:hover{transform:translateY(-2px)}
.wa-knopf svg{width:28px;height:28px}
@media (max-width:899px){
  .schnell{
    display:grid;grid-template-columns:1fr 1fr 1.25fr;position:fixed;left:0;right:0;bottom:0;z-index:40;
    background:var(--tinte);border-top:1px solid var(--lin-hell);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .schnell a{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;
    min-height:58px;color:#fff;text-decoration:none;font-size:.72rem;font-weight:600;letter-spacing:.04em;
  }
  .schnell a+a{border-left:1px solid var(--lin-hell)}
  .schnell svg{width:20px;height:20px}
  .schnell .schnell-haupt{background:var(--akzent);border-left:0}
  body.akzent-hell .schnell .schnell-haupt{color:var(--tinte)}
  .wa-knopf{display:none}
  body{padding-bottom:calc(58px + env(safe-area-inset-bottom))}
}
@media print{.schnell,.wa-knopf{display:none}}
.buchung .knopf-rand{color:var(--txt);border-color:rgba(18,16,14,.35);background:transparent}
.buchung .knopf-rand:hover{border-color:var(--tinte);background:var(--papier)}
.kontakt-seite .weiche-liste{grid-template-columns:1fr!important}
/* Breite Wortmarke als Zeichen (z. B. "BSW"): Hoehe wie sonst, Breite frei */
.marke-zeichenbild--breit{max-width:none!important;height:34px}
@media (max-width:1279px){ .marke-zeichenbild--breit{height:30px} }

/* --- Bildband hell: Teamfoto auf Weiss --- */
.bildband-hell{background:#fff;border-block:1px solid var(--lin)}
.bildband-hell-innen{
  display:grid;gap:clamp(1.8rem,4vw,3rem);align-items:center;
  padding-block:clamp(3.5rem,7vw,6rem);
}
.bildband-hell-innen>*{min-width:0}
.bildband-hell h2{font-size:clamp(1.9rem,3.8vw,3rem);max-width:18ch;margin-bottom:1.2rem}
.bildband-hell .lead{max-width:48ch}
.bildband-hell img{width:100%;height:auto;display:block}
@media (min-width:900px){ .bildband-hell-innen{grid-template-columns:minmax(0,5fr) minmax(0,7fr)} }
/* Passt das Menue nicht in die Leiste, setzt skript.js die Klasse
   kopf-eng: dann steht "Schaden melden" nur als Symbol da. Der Text
   bleibt im Quelltext und damit fuer Screenreader erhalten. */
@media (min-width:1280px){
  .kopf-eng .menue-liste>li>a.menue-schaden{font-size:0;gap:0;padding-inline:.55rem}
  .kopf-eng .menue-schaden svg{width:17px;height:17px}
}
/* Sichtbares Buehnenfoto: Bildunterschrift des Portraets auf eigener
   dunkler Flaeche, sonst steht die kleine Zeile auf hellen Bildstellen. */
.buehne--bild.bild-zeigen .portraet-schild{
  background:rgba(18,16,14,.78);padding:.75rem .9rem .8rem;
  box-shadow:inset 3px 0 0 var(--akzent-hell);
}

/* =====================================================================
   HELLER STIL (ab 26.10.2026, nach dem Vorbild der Letsch/UFD-Demo)
   Tims Vorgabe:
   - Startbereich: eigenes Foto des Kunden (Text gleitet über das
     stehende Bild) – ohne Foto bleibt er DUNKEL wie im alten Stil.
   - Darunter streng im Wechsel: Weiß, Kundenfarbe, Weiß, Kundenfarbe …
   - Farbtöne werden aus der Akzentfarbe gemischt (Rot -> Hellrot …).
   Wird von bauen-signatur.js an stil.css angehängt (außer K.stil = "dunkel").
   ===================================================================== */
html:root{
  --ton:color-mix(in oklch,var(--akzent) 18%,#fff);        /* farbige Zeilen */
  --ton-2:color-mix(in oklch,var(--akzent) 8%,#fff);       /* zarte Flächen */
  --ton-rand:color-mix(in srgb,var(--akzent) 22%,transparent);
  --kopf-farbe:color-mix(in srgb,var(--akzent) 55%,#0F1A2A);
  --papier:#FFFFFF;--papier-2:var(--ton-2);
  --txt:#1F2933;--mut:#56616F;--mut-dunkel:#56616F;
  --lin:var(--ton-rand);--lin-hell:var(--ton-rand);
}
body{background:#fff}
h1,h2,h3,h4{color:var(--kopf-farbe)}
header.kopf{background:rgba(255,255,255,.95)!important}
.menue-knopf{background:var(--akzent)!important;border-color:var(--akzent)!important;color:#fff!important}
.menue-knopf:hover{background:var(--kopf-farbe)!important}
.kicker{color:var(--akzent)}
.kicker::before{background:var(--akzent)}
.entwurf-band{background:var(--akzent)!important;color:#fff!important}
.entwurf-band a{color:#fff!important}

/* ---------- Wechsel Weiß / Kundenfarbe (wie bei Letsch) ---------- */
main>section:nth-of-type(even):not(.buehne):not(.band):not(.bildband):not(.fotoband):not(.bildband-hell):not(.seiten-kopf){background:#fff}
main>section:nth-of-type(odd):not(.buehne):not(.band):not(.bildband):not(.fotoband):not(.bildband-hell):not(.seiten-kopf){background:var(--ton)}
.belege,.besonderheit{border-color:var(--ton-rand)}
.kachel,.stimme,.werkzeug,.beleg{background:#fff}
.weiche-eintrag{background:#fff!important}
.bento,.weiche-liste,.stimmen{background:var(--ton-rand)}
.kachel-symbol,.eintrag-symbol{background:var(--ton)!important;color:var(--akzent-txt)!important}
.beleg dd{color:var(--kopf-farbe)}
.abschnitt .lead,.besonderheit .lead{color:#34404D}

/* Abschnitte, die früher schwarz waren (Vergleich, Werkzeuge) – jetzt hell */
.hellton .werkzeug{border-color:var(--lin)}
.hellton .tag-knopf,.hellton .zeit-knopf,.hellton .antwort{color:var(--txt)}
.matrix-huelle tbody th{color:var(--txt)!important}
.matrix td{color:var(--mut)}
.matrix td.hervor{color:var(--txt)!important;background:var(--ton)!important}
.matrix thead th.hervor{color:var(--akzent-txt)}
.wahl-knopf[aria-pressed="true"],.weiche-schalter button[aria-selected="true"],
.buchung-schritte li[aria-current="step"] span{background:var(--akzent);border-color:var(--akzent);color:#fff}
.knopf-dunkel{background:var(--akzent);border-color:var(--akzent)}

/* ---------- Startbereich MIT Foto: Bild bleibt stehen, heller Schleier ---------- */
.buehne--bild{background-color:var(--ton);color:var(--txt);background-attachment:fixed;background-position:center 35%}
.buehne--bild::after,.buehne--bild.bild-zeigen::after{
  background:linear-gradient(90deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.88) 38%,rgba(255,255,255,.35) 72%,rgba(255,255,255,0) 100%)!important}
.buehne--bild::before{background:linear-gradient(0deg,rgba(255,255,255,.7) 0%,transparent 30%)!important}
.buehne--bild h1{color:var(--kopf-farbe)}
.buehne--bild h1 em{color:var(--akzent)}
.buehne--bild .lead{color:#34404D}
.buehne--bild .kicker{color:var(--akzent-txt)}
.buehne--bild .knopf-rand{border-color:var(--ton-rand);color:var(--kopf-farbe);background:rgba(255,255,255,.75)}
.buehne--bild .knopf-rand:hover{border-color:var(--akzent);background:#fff}
.buehne--bild .zierde{display:none}
.buehne--bild .siegel,.buehne--bild .siegel *{color:#34404D}
.buehne--bild .merkmal-zahl{color:var(--akzent)}
.buehne--bild .merkmal-text{color:#34404D}
.buehne--bild.bild-zeigen .merkmal,.buehne--bild.bild-zeigen .portraet-schild{background:rgba(255,255,255,.92);color:var(--txt);box-shadow:inset 3px 0 0 var(--akzent)}
.buehne--bild .portraet-schild span{color:var(--akzent-txt)}
/* Startbereich OHNE Foto: dunkel wie im alten Stil (Klasse „dunkel“ bleibt) */
.buehne.dunkel h1,.buehne.dunkel h2,.buehne.dunkel .portraet-schild strong,.buehne.dunkel .merkmal-text{color:#fff}
.buehne.dunkel .kicker{color:var(--akzent-hell)}
@media (max-width:899px){
  .buehne--bild::after,.buehne--bild.bild-zeigen::after{background:linear-gradient(180deg,rgba(255,255,255,.6) 0%,rgba(255,255,255,.82) 35%,rgba(255,255,255,.92) 70%,#fff 100%)!important}
  svg.zierde,.zierde{display:none!important}
}
@media (hover:none){.buehne--bild,.bildband,.fotoband{background-attachment:scroll!important}}

/* ---------- Bildband / Foto-Band: Foto bleibt stehen, weiße Karte gleitet darüber ---------- */
.bildband{background-attachment:fixed;color:var(--txt)}
.bildband::before{display:none}
.bildband-innen,.fotoband-innen{padding-block:clamp(5rem,12vw,9rem)}
.fotoband{position:relative;background-size:cover;background-position:center;background-attachment:fixed}
.bildband-karte{background:rgba(255,255,255,.94);padding:clamp(1.6rem,3vw,2.4rem);max-width:34rem;border-radius:16px;box-shadow:0 18px 50px rgba(15,26,42,.18);border-top:4px solid var(--akzent)}
.bildband-karte h2{color:var(--kopf-farbe)}
.bildband-karte .lead{color:#34404D}
.bildband-karte .kicker{color:var(--akzent-txt)}

/* ---------- Schlussband in kräftiger Kundenfarbe ---------- */
.band:not(.text-dunkel){background:linear-gradient(120deg,var(--akzent),color-mix(in srgb,var(--akzent) 72%,#fff))}
.band:not(.text-dunkel) h2{color:#fff}
.band .knopf-haupt:hover{background:var(--kopf-farbe);border-color:var(--kopf-farbe)}
.kachel-marke:not(.text-dunkel) h3,.kachel-marke:not(.text-dunkel) p,.kachel-marke:not(.text-dunkel) .kachel-nr{color:#fff!important}

/* ---------- Fuß in Kundenfarbe (hell) ---------- */
.fuss{background:var(--ton);color:#34404D}
.fuss h4{color:var(--kopf-farbe)}
.fuss a{color:#34404D}
.fuss a:hover{color:var(--akzent)}
.fuss-unten{border-color:var(--ton-rand)}
.fuss strong,.fuss b{color:var(--kopf-farbe)}

/* ---------- Handy-Leiste unten hell ---------- */
.schnell{background:#fff!important;border-top:1px solid var(--lin);box-shadow:0 -6px 20px rgba(15,26,42,.08)}
.schnell a{color:var(--kopf-farbe)!important;background:transparent}
.schnell a:last-child{background:var(--akzent)!important;color:#fff!important}

/* ---------- Bereichsseiten: Kopf mit Foto (sonst dunkel) + farbiger Inhalt mit weißen Karten ---------- */
.seiten-kopf{position:relative;overflow:hidden;padding-block:clamp(3rem,7vw,5.2rem) clamp(2.2rem,4vw,3.2rem)}
.seiten-kopf.mit-bild{background:#fff}
.seiten-kopf:not(.mit-bild){background:var(--tinte)}
.seiten-kopf:not(.mit-bild) h1{color:#fff}
.seiten-kopf:not(.mit-bild) .lead{color:rgba(255,255,255,.85)}
.seiten-kopf:not(.mit-bild) .pfad{color:rgba(255,255,255,.7)}
.seiten-kopf:not(.mit-bild) .pfad a{color:var(--akzent-hell)}
.seiten-kopf.mit-bild::after{content:'';position:absolute;top:-25%;bottom:-25%;right:0;width:52%;z-index:0;pointer-events:none;
  background:var(--bild) center/cover no-repeat;transform:translateY(var(--verschiebung,0px));will-change:transform;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.6) 25%,#000 55%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.6) 25%,#000 55%)}
.seiten-kopf>.container{position:relative;z-index:1}
.seiten-kopf h1{font-size:clamp(2rem,4.6vw,3.4rem);max-width:20ch;margin:.5rem 0 1rem;line-height:1.08}
.seiten-kopf .lead{max-width:56ch}
.seiten-kopf.mit-bild .lead{color:#34404D}
.seiten-kopf .pfad{font-size:.85rem;color:var(--mut)}
.seiten-kopf .pfad a{color:var(--akzent-txt)}
@media (max-width:899px){.seiten-kopf.mit-bild::after{width:100%;opacity:.16;-webkit-mask-image:none;mask-image:none}}
main>section.bereich-inhalt{background:var(--ton)!important;padding-top:clamp(2rem,4vw,3rem)}
.bereich-inhalt .bento{gap:1rem;background:transparent}
.bereich-inhalt .kachel{border-radius:16px;border:1px solid var(--lin);box-shadow:0 10px 28px rgba(15,26,42,.06)}
.entwurf-hinweis{background:#fff;border-radius:12px}
.bereich-inhalt .entwurf-hinweis{margin-bottom:1.4rem}

/* Handy: nichts über den Rand */
html{overflow-x:clip}