/* ==========================================================================
   KI an Bord, Unterseiten: heller, warmer Praxis-Look
   Farbwelt „Sand + Tannengrün mit Lichtschein“ (Franks Wahl, 13.10.2026)
   Gestaltungssprache wie index.html: Sandgrund, Leinen-Flächen, Hafer als
   ruhiger Flächenton, Tannengrün als dunkler Kontrast (Hauptknöpfe, Links,
   Abschlussband), Newsreader für Überschriften, Instrument Sans für Fließtext.
   Bernstein nur sparsam (Logo, Fokusrahmen, kleine Punkte, Leuchtrand).
   Grün sonst nur im Lichtschein, in kleinen Statuspunkten und in nachgebauten
   Kunden-Websites. Große Flächen bleiben beige.
   ========================================================================== */

:root{
  --grund:#F1EADF;          /* Sand, Grundfläche */
  --leinen:#FBF7F0;         /* erhabene Flächen */
  --hafer:#E9DCC6;          /* ruhiger Flächenton (früher Salbei) */
  --tanne:#1F3F35;          /* Tannengrün: Hauptknöpfe, Links, Abschlussband */
  --tanne-hell:#2C5547;     /* Tannengrün hell: Hover und zweite Stufe */
  --tinte:#26231F;          /* Text */
  --stein:#6A6158;          /* Nebentext */
  --linie:#DCCFBC;
  --feld-linie:#94877A;     /* Rand von Formularfeldern (Kontrast 3,27:1 gegen Leinen) */
  --nacht:#1B2320;          /* dunkle Technik-Abschnitte (Nachtgrün) */
  --handy:#1F2B26;          /* Handy-Oberflächen */
  --bernstein:#E39A1B;      /* aus dem Anker-Logo, nur sparsam */
  --auf-tanne:#E3D5C3;      /* Fließtext auf Tannengrün (Kontrast 8:1) */
  --fehler:#8A1C14;
  --fehler-flaeche:#FBE9E6;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Instrument Sans','Helvetica Neue',Arial,sans-serif;
  --schatten:0 20px 40px -24px rgba(38,35,31,.35);
  --schatten-klein:0 10px 24px -14px rgba(38,35,31,.35);
  --rand:clamp(20px,4vw,40px);
  --ease:cubic-bezier(.22,1,.36,1);

  /* Alte Namen der grünen Fassung, auf die Sandpalette gelegt (nicht mehr neu verwenden) */
  --salbei:var(--hafer);--wald:var(--tanne);--wald-hell:var(--tanne-hell);--schiefer:var(--tinte);
  /* Alte Namen, auf die neue Palette gelegt (steckbrief.css und Altlasten nutzen sie) */
  --bg:var(--grund);--bg2:var(--leinen);--bg-2:var(--leinen);
  --surface:var(--leinen);--surface-raised:var(--leinen);--surface-2:var(--leinen);--card:var(--leinen);--card-2:var(--leinen);
  --text:var(--tinte);--muted:var(--stein);--line:var(--linie);--line-2:var(--linie);
  --action:var(--tanne);--action-deep:var(--tanne-hell);--action-soft:rgba(31,63,53,.1);
  --trust:var(--tanne-hell);--trust-deep:var(--tanne);--trust-soft:rgba(44,85,71,.1);
  --teal:var(--tanne-hell);--accent:var(--tanne);--accent2:var(--tanne);--accent-2:var(--tanne);--gold:var(--tanne);--grad:var(--tanne);
  --display:var(--serif);--radius:8px;
}

/* ---------- Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;background:var(--grund);color:var(--tinte);font:1.0625rem/1.62 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%;display:block}
img{height:auto}
h1,h2,h3,p,ul,ol{margin-top:0}
p{margin-bottom:1.1rem;text-wrap:pretty}
li{text-wrap:pretty}
a{color:inherit;text-underline-offset:.25em}
button,input,select,textarea{font:inherit}
a,button,summary,input,select,textarea{touch-action:manipulation}
:focus-visible{outline:3px solid var(--bernstein);outline-offset:3px;border-radius:4px}
::selection{background:var(--hafer);color:var(--tinte)}
[hidden]{display:none!important}
.wrap{max-width:1240px;margin-inline:auto;padding-inline:var(--rand)}
.skip-link{position:fixed;top:-80px;left:12px;z-index:100;padding:10px 16px;border-radius:6px;background:var(--tanne);color:var(--leinen);text-decoration:none}
.skip-link:focus{top:12px}

/* ---------- Überschriften: Newsreader ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:450;font-variation-settings:'opsz' 72;letter-spacing:-.012em;line-height:1.1;text-wrap:balance;overflow-wrap:break-word;hyphens:manual;color:var(--tinte)}
h1{font-size:clamp(2.35rem,5vw,4.2rem);line-height:1.02;font-weight:430;margin-bottom:1.5rem}
h2{font-size:clamp(1.85rem,3.4vw,2.7rem);line-height:1.08;margin-bottom:1.25rem}
h3{font-size:1.4rem;line-height:1.2;font-weight:500;margin-bottom:.75rem}
.grad-text{color:var(--stein)}

.muted,.micro{color:var(--stein)}
.micro{font-size:.9375rem}
.eyebrow{display:block;width:fit-content;margin-bottom:1rem;font:500 .9375rem/1.4 var(--sans);letter-spacing:0;text-transform:none;color:var(--stein);text-decoration:none}
a.eyebrow:hover{text-decoration:underline}
.lead{font-size:1.1875rem;line-height:1.6;max-width:44em}

/* Links im Fließtext */
main p a,main li a,main summary a,.faq a,.faq-list a,.quellen a,.urgency-note a,.toc a:not(.eyebrow){color:var(--tanne);text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:rgba(31,63,53,.5)}
main p a:hover,main li a:hover,.faq a:hover,.faq-list a:hover,.quellen a:hover,.urgency-note a:hover{color:var(--tanne-hell);text-decoration-color:currentColor}
main p a.btn,main a.btn{color:var(--leinen);text-decoration:none}

/* ---------- Knöpfe ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:52px;padding:.7rem 1.5rem;border:1px solid var(--tanne);border-radius:6px;background:var(--tanne);color:var(--leinen);font:600 1rem/1.35 var(--sans);text-align:center;text-decoration:none;white-space:normal;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.btn:hover{background:var(--tanne-hell);border-color:var(--tanne-hell);color:var(--leinen)}
.btn.secondary{background:transparent;border-color:var(--feld-linie);color:var(--tinte)}
.btn.secondary:hover{background:transparent;border-color:var(--tinte);color:var(--tinte)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn .i-arrow,.i-arrow{display:inline-block;flex:none;width:1.05em;height:1.05em;vertical-align:-.14em}
.actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* ---------- Leuchtrand für den wichtigsten Knopf (wie .leuchten auf der Startseite) ----------
   Umlaufender konischer Lichtrand mit weichem Schein. Fläche und Rand liegen in ::before,
   das weiche Licht dahinter in ::after. Nur am wichtigsten Knopf eines Abschnitts bzw.
   Bildschirms: Einstieg, Preis, Abschlussband, Formular-Absenden. Nie in der Kopfzeile,
   nie an Nebenknöpfen (.secondary), nie mehrfach im selben Abschnitt.
   Varianten:  .btn.leuchten                    helle Flächen, Füllung Tannengrün (Standard)
               .btn.leuchten.auf-dunkel         dunkle Flächen, Füllung Bernstein (= .bernstein der Startseite)
               .btn.leuchten.auf-tanne          Abschlussband, Füllung Leinen; in .cta-band,
                                                section#anfragen und .cta automatisch
   Ohne Bewegungswunsch (prefers-reduced-motion) steht der Lichtrand still. */
@property --winkel{syntax:'<angle>';inherits:false;initial-value:0deg}
.btn.leuchten{--fuellung:var(--tanne);--fuellung-hover:var(--tanne-hell);--schein:.45;position:relative;isolation:isolate;background:transparent;border-color:transparent;color:var(--leinen)}
.btn.leuchten:hover{background:transparent;border-color:transparent;color:var(--leinen)}
.leuchten::before,.leuchten::after{content:'';position:absolute;pointer-events:none;--bogen:conic-gradient(from var(--winkel),rgba(227,154,27,.28) 0deg,rgba(227,154,27,.28) 190deg,#E39A1B 260deg,#FFD789 305deg,#8CC7A4 340deg,rgba(227,154,27,.28) 360deg)}
.leuchten::before{inset:-1px;z-index:-1;border-radius:6px;border:2px solid transparent;background:linear-gradient(var(--fuellung),var(--fuellung)) padding-box,var(--bogen) border-box;transition:background .2s}
.leuchten:hover::before{background:linear-gradient(var(--fuellung-hover),var(--fuellung-hover)) padding-box,var(--bogen) border-box}
.leuchten::after{inset:-7px;z-index:-2;border-radius:12px;background:var(--bogen);filter:blur(12px);opacity:var(--schein)}
.btn.leuchten.auf-dunkel,.btn.leuchten.bernstein{--fuellung:var(--bernstein);--fuellung-hover:#F0AC35;--schein:.6;color:var(--nacht)}
.btn.leuchten.auf-dunkel:hover,.btn.leuchten.bernstein:hover{color:var(--nacht)}
.btn.leuchten.auf-tanne,.cta-band .btn.leuchten,section#anfragen .btn.leuchten,.cta .btn.leuchten{--fuellung:var(--leinen);--fuellung-hover:#fff;--schein:.75;background:transparent;border-color:transparent;color:var(--tanne)}
.btn.leuchten.auf-tanne:hover,.cta-band .btn.leuchten:hover,section#anfragen .btn.leuchten:hover,.cta .btn.leuchten:hover{background:transparent;border-color:transparent;color:var(--tanne)}
.btn.leuchten:disabled::after{opacity:.2}
@media (prefers-reduced-motion:no-preference){
  .leuchten::before,.leuchten::after{animation:kreisen 3.6s linear infinite}
}
@keyframes kreisen{to{--winkel:360deg}}
@media (forced-colors:active){
  .btn.leuchten{border-color:ButtonText}
  .leuchten::before,.leuchten::after{display:none}
}
.i-menu{display:inline-block;width:20px;height:20px;vertical-align:middle}

/* ---------- Kopfzeile ---------- */
header{position:sticky;top:0;z-index:50;background:var(--grund);border-bottom:1px solid var(--linie)}
header .wrap.nav,.nav{display:flex;align-items:center;justify-content:space-between;gap:26px;min-height:76px}
.logo{display:inline-flex;align-items:center;gap:.65rem;white-space:nowrap;color:var(--tinte);text-decoration:none}
.logo b{font-family:var(--serif);font-size:1.4rem;font-weight:550;letter-spacing:-.01em}
.logo b span{color:inherit}
.mark{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--bernstein);color:var(--tinte)}
.logo .mark svg{width:22px;height:22px}
.nav-menu>summary{display:none}
.nav-links{display:flex;align-items:center;gap:1.7rem}
.nav-links>a,.nav-dropdown>summary{font-size:.97rem;font-weight:500;color:var(--tinte);text-decoration:none;cursor:pointer}
.nav-links>a:not(.btn):hover,.nav-dropdown>summary:hover{text-decoration:underline;text-underline-offset:.35em}
.nav-links>.btn{min-height:44px;padding:.5rem 1.1rem;font-size:.94rem;font-weight:600;color:var(--leinen)}
.nav-dropdown{position:relative}
.nav-dropdown>summary{list-style:none}
.nav-dropdown>summary::-webkit-details-marker{display:none}
.nav-dropdown>summary::after{content:'';display:inline-block;width:.42em;height:.42em;margin:0 0 .22em 8px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg)}
.dropdown-links{position:absolute;top:calc(100% + 16px);left:-16px;min-width:260px;padding:8px;background:var(--leinen);border:1px solid var(--linie);border-radius:10px;box-shadow:var(--schatten)}
.dropdown-links>a{display:block;padding:.6rem .75rem;border-radius:6px;color:var(--tinte);font-size:.97rem;text-decoration:none}
.dropdown-links>a:hover{background:var(--grund)}
header details{padding:0;margin:0;border:0;background:none;border-radius:0;box-shadow:none}
header details>summary{margin:0;border:0;background:none}
header .nav-menu>summary::after{content:none}

/* ---------- Bereiche ---------- */
section{padding:clamp(56px,8vw,104px) 0}
main section{overflow-x:clip}
.landing-page>section+section{border-top:1px solid var(--linie)}
.landing-page section h2{max-width:24ch}
.hero{padding:clamp(40px,6vw,80px) 0 clamp(52px,7vw,88px)}
.hero h1{max-width:20ch}
.hero .lead{max-width:46em}
.hero .lead strong{font-weight:600}
.hero .btn+.muted,.hero .btn+p{margin-top:.9rem}
.hero-copy-long{color:var(--stein);font-size:1.0625rem;margin-top:1.6rem}
.hero-copy-long.lead{max-width:40em}
.hero-kicker{display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.2rem;font-size:.9375rem;font-weight:500;color:var(--stein)}
.hero-kicker::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--bernstein)}
.lead-callout{margin:1.6rem 0 0;padding:1.1rem 1.4rem;border:1px solid var(--linie);border-left:3px solid var(--tanne);border-radius:4px;background:var(--leinen);color:var(--tinte)}

/* Zwei-Spalten-Kopf mit Beispielansicht */
.hero-split .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center}
.hero-split .hero-copy{min-width:0}
.hero-visual{min-width:0}
.fly-caption{margin:14px 0 0;text-align:right;font-size:.8125rem;color:var(--stein)}

/* ---------- Karten und Raster ---------- */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{min-width:0;padding:28px;background:var(--leinen);border:1px solid var(--linie);border-radius:8px}
.card h3{font-size:1.4rem}
.card p{color:var(--stein)}
.card p:last-child{margin-bottom:0}
.card .eyebrow{margin-bottom:.7rem;font-size:.875rem}
.card h3+p a,.card>a{font-weight:600}
.card-link{display:flex;flex-direction:column;color:inherit;text-decoration:none;transition:border-color .2s,box-shadow .2s}
.card-link:hover{border-color:var(--tanne);box-shadow:var(--schatten)}
.card-link h3{color:var(--tinte)}
.card-link .more{display:inline-flex;align-items:center;gap:.4rem;margin-top:auto;padding-top:.9rem;font-weight:600;color:var(--tanne)}
.card-link:hover .more{text-decoration:underline;text-underline-offset:.3em}
.features{margin:0 0 1.6rem;padding-left:1.3rem}
.features li{margin-bottom:.7rem;padding-left:.3rem}
.features li::marker{color:var(--tanne-hell)}

/* Ablauf in Schritten */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;counter-reset:step}
.step{min-width:0;padding-top:1.25rem;border-top:2px solid var(--tinte);counter-increment:step}
.step::before{content:counter(step);display:block;margin-bottom:1rem;font:400 2.6rem/1 var(--serif);color:var(--tanne)}
.step h3{font-size:1.3rem}
.step p{margin:0;color:var(--stein);font-size:.97rem}
section:has(>.wrap>.steps){background:var(--leinen)}

/* Festpreis */
.price-panel{margin:1.75rem 0;padding:clamp(24px,4vw,44px);background:var(--leinen);border:1px solid var(--linie);border-radius:10px;box-shadow:var(--schatten)}
.price-panel p:last-child{margin-bottom:0}
.price-big{margin:.25rem 0 1.5rem;font:420 clamp(3.2rem,6vw,4.8rem)/.95 var(--serif);font-variation-settings:'opsz' 72;letter-spacing:-.03em;color:var(--tinte)}
.price-big .micro{margin-left:.4rem;font:400 .95rem var(--sans);letter-spacing:0;color:var(--stein)}
.price-note{font-size:.875rem;color:var(--stein);margin-top:1.4rem}
.urgency-note{margin:2.25rem 0 0;padding:1.4rem 1.7rem;border-radius:4px;border-left:3px solid var(--tanne);background:var(--hafer);color:var(--tinte)}
.urgency-note.warm{background:var(--leinen);border:1px solid var(--linie);border-left:3px solid var(--tanne)}
.urgency-note p{margin:0 0 .6rem}
.urgency-note p:last-child{margin-bottom:0}
.urgency-note strong{font-weight:600}

/* Häufige Fragen */
.faq-list{max-width:920px}
.faq-list details,.faq details{border-bottom:1px solid var(--linie);padding:1.3rem 0}
.faq-list details:first-child,.faq details:first-child{border-top:1px solid var(--linie)}
.faq-list summary,.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;list-style:none;font:500 1.25rem/1.3 var(--serif);font-variation-settings:'opsz' 36;color:var(--tinte)}
.faq-list summary::-webkit-details-marker,.faq summary::-webkit-details-marker{display:none}
.faq-list summary::after,.faq summary::after{content:'+';display:grid;place-items:center;flex:none;width:32px;height:32px;border:1px solid var(--feld-linie);border-radius:50%;font:400 1.3rem/1 var(--sans);color:var(--tanne)}
.faq-list details[open] summary::after,.faq details[open] summary::after{content:'\2212'}
.faq-list details p,.faq details p{margin:1rem 0 0;color:var(--stein);max-width:68ch}
.faq-list details p:last-child,.faq details p:last-child{margin-bottom:0}
.faq{margin-top:.5rem}

/* Autor, Inhaltsverzeichnis, Belege */
.author-box{display:flex;align-items:flex-start;gap:24px;max-width:900px;padding:30px;background:var(--leinen);border:1px solid var(--linie);border-radius:10px}
.author-box h3{margin-bottom:.6rem}
.author-box p:last-child{margin-bottom:0}
.monogram{display:grid;place-items:center;flex:none;width:80px;height:80px;border-radius:14px;background:var(--hafer);color:var(--tanne);font:450 2rem/1 var(--serif)}
.toc{padding:24px 28px;background:var(--leinen);border:1px solid var(--linie);border-radius:8px}
.toc ol{margin:0;padding-left:22px}
.toc a{display:block;margin-block:.55rem;color:var(--tinte);text-decoration:none}
.toc a:hover{color:var(--tanne);text-decoration:underline}
.reference-image{margin:1.25rem 0;border:1px solid var(--linie);border-radius:10px;box-shadow:var(--schatten)}
.reference-caption{font-size:.875rem;color:var(--stein)}
.article-page section>.wrap{max-width:950px}
.article-page .hero-split>.wrap{max-width:1240px}
.article-page h1{font-size:clamp(2.1rem,4.2vw,3.4rem)}
.article-page .hero{padding-bottom:2.6rem}
.article-page section:not(.hero){padding:2.75rem 0}
.article-page p,.article-page li{max-width:76ch}
.article-page h2{font-size:clamp(1.7rem,3vw,2.25rem)}
.article-page .cards{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.article-page .cards p,.article-page .cards li{max-width:none}
.article-page section.cta-band{padding:clamp(56px,8vw,96px) 0}
.article-page section#faq{padding:clamp(48px,7vw,80px) 0}
.article-meta{margin-bottom:1.5rem;font-size:.875rem;color:var(--stein)}
.legal-page>.wrap{max-width:820px}

/* Schlanke Artikel und Rechtsseiten ohne Sektionsaufbau */
main>article.wrap{max-width:860px;padding-block:clamp(40px,6vw,72px) clamp(64px,9vw,104px)}
main>article.wrap h1{font-size:clamp(2.1rem,4.4vw,3.2rem);margin-bottom:1.2rem}
main>article.wrap h2{font-size:clamp(1.5rem,2.6vw,1.9rem);margin:2.6rem 0 .8rem}
main>article.wrap ul{margin:0 0 1.1rem;padding-left:1.4rem}
main>article.wrap li{margin-bottom:.5rem}
.intro{margin-bottom:2.2rem;font-size:1.2rem;line-height:1.6;color:var(--tinte)}
.cta{margin:3rem 0;padding:clamp(26px,4vw,40px);border-radius:10px;background:var(--tanne);color:var(--leinen)}
.cta h2{margin:0 0 .6rem;color:var(--leinen);font-size:clamp(1.55rem,2.6vw,2rem)}
.cta p{margin-bottom:1.4rem;color:var(--auf-tanne)}
.cta .btn{border-color:var(--leinen);background:var(--leinen);color:var(--tanne)}
.cta .btn:hover{background:#fff;border-color:#fff;color:var(--tanne)}
main>article.wrap .cta h2{margin-top:0}
.quellen{margin-top:3rem;padding-top:1.2rem;border-top:1px solid var(--linie)}
.quellen h2{margin:0 0 .6rem;font-size:1.2rem}
.quellen ul{margin:0;font-size:.875rem;color:var(--stein);word-break:break-word}
main.legal-page{padding:clamp(40px,6vw,72px) 0 clamp(64px,9vw,104px)}
.legal-page h1{font-size:clamp(2.1rem,4.4vw,3.2rem)}
.legal-page h2{margin:2.4rem 0 .7rem;font-size:1.55rem}
.legal-page h3{margin:1.6rem 0 .5rem;font-size:1.2rem}
.legal-page p,.legal-page ul{color:var(--tinte)}
.legal-page ul{padding-left:1.4rem}
.legal-page li{margin-bottom:.4rem}

/* ---------- Abschlussband in Tannengrün ---------- */
.cta-band,section#anfragen{background:var(--tanne);color:var(--leinen);border-top:0!important}
.cta-band h2,section#anfragen h2{max-width:20ch;font-size:clamp(2rem,4.2vw,3.4rem);color:var(--leinen)}
.cta-band p,section#anfragen p{max-width:36em;color:var(--auf-tanne)}
.cta-band .btn,section#anfragen .btn{margin-top:.5rem;border-color:var(--leinen);background:var(--leinen);color:var(--tanne)}
.cta-band .btn:hover,section#anfragen .btn:hover{background:#fff;border-color:#fff;color:var(--tanne)}
.cta-band a:not(.btn){color:var(--leinen)}

/* ---------- Lichtschein (Farbwelt Sand + Tannengrün, Franks Wahl 13.10.2026) ----------
   Einstieg: grüner Schein oben rechts, Bernstein unten links, über dem Sandgrund.
   Abschlussband (auch der dunkle Kasten .cta in Ratgebern): Bernstein oben rechts,
   Mint unten links, über dem Tannengrün. Nur background-image, die Grundfarbe bleibt. */
main>section.hero{background-image:radial-gradient(900px 520px at 88% -8%,rgba(122,170,140,.20),transparent 62%),radial-gradient(700px 480px at -8% 70%,rgba(227,154,27,.10),transparent 60%)}
.abschluss,.cta-band,section#anfragen,.cta{background-image:radial-gradient(700px 380px at 85% 0%,rgba(227,154,27,.16),transparent 65%),radial-gradient(600px 360px at 0% 100%,rgba(140,199,164,.16),transparent 65%)}

/* ---------- Formulare ---------- */
.compact-form,.anfrage-form{max-width:900px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.compact-form .full,.anfrage-form .full{grid-column:1/-1}
.compact-form label,.anfrage-form label{display:block;font-size:1rem;font-weight:600}
.compact-form input,.compact-form select,.compact-form textarea,.anfrage-form input,.anfrage-form select,.anfrage-form textarea{display:block;width:100%;min-width:0;margin-top:8px;padding:.8rem .85rem;border:1px solid var(--feld-linie);border-radius:6px;background:var(--leinen);color:var(--tinte);transition:border-color .2s,box-shadow .2s}
.compact-form input:focus,.compact-form select:focus,.compact-form textarea:focus,.anfrage-form input:focus,.anfrage-form select:focus,.anfrage-form textarea:focus{border-color:var(--bernstein);box-shadow:0 0 0 3px rgba(227,154,27,.28);outline:none}
.compact-form input::placeholder,.compact-form textarea::placeholder{color:var(--stein);opacity:1}
.compact-form .form-note{max-width:65ch;margin:1rem 0 .75rem;font-size:.9375rem;color:var(--stein)}
.compact-form .form-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-feedback{font-size:.9375rem;color:var(--tanne)}
.form-feedback:empty{display:none}
.form-feedback[data-error]{padding:.8rem 1rem;border-left:3px solid var(--fehler);border-radius:4px;background:var(--fehler-flaeche);color:var(--fehler);font-weight:500}
.form-success{max-width:900px;padding:1.75rem;border:1px solid var(--tanne);border-radius:8px;background:var(--hafer)}
.form-success h2,.form-success h3{color:var(--tanne)}
.form-success h2{font-size:clamp(1.5rem,2.8vw,2rem)}
.form-success p{margin-bottom:0}
.preparation-page>.wrap{max-width:960px}
.preparation-form{grid-template-columns:1fr;max-width:850px;margin-top:30px}
.preparation-form label>strong{display:block;margin-bottom:.55rem;font:500 1.4rem/1.2 var(--serif);letter-spacing:-.01em}
.preparation-form label>span{display:block;max-width:75ch;font-size:1.0625rem;font-weight:400;color:var(--stein)}
.preparation-form textarea{display:block;width:100%;min-height:110px;margin-top:12px;resize:vertical}

/* ---------- Einwilligungswahl (Messung) ---------- */
.measurement-choice{position:fixed;z-index:70;right:24px;bottom:24px;width:min(460px,calc(100% - 48px));max-height:calc(100dvh - 48px);overflow:auto;padding:24px;background:var(--leinen);color:var(--tinte);border:1px solid var(--linie);border-radius:10px;box-shadow:0 24px 48px -20px rgba(38,35,31,.5);font:.9375rem/1.5 var(--sans)}
.measurement-choice h2{margin:0 0 .75rem;font:500 1.4rem/1.2 var(--serif);letter-spacing:-.01em}
.measurement-choice p{margin:0 0 .75rem;color:var(--stein)}
.measurement-choice a{color:var(--tanne)}
.measurement-choice .measurement-status:empty{display:none}
.measurement-choice .measurement-status{color:var(--tanne);font-size:.875rem}
.measurement-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.measurement-actions button{padding:.75rem;border:1px solid var(--tanne);border-radius:6px;background:var(--tanne);color:var(--leinen);font:600 .9375rem/1.4 var(--sans);cursor:pointer;transition:background-color .2s}
.measurement-actions button:hover{background:var(--tanne-hell)}
.measurement-settings,.measurement-close{appearance:none;border:0;padding:0;background:none;color:inherit;text-align:left;font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.measurement-settings:hover,.measurement-close:hover{color:var(--tanne)}
.measurement-close{display:block;margin:14px auto 0;font-size:.875rem}
.measurement-choice [hidden]{display:none!important}

/* ---------- Fußzeile ---------- */
footer{padding:clamp(40px,6vw,64px) 0 32px;background:var(--leinen);border-top:1px solid var(--linie);color:var(--stein);font-size:.875rem}
.footer-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;gap:34px}
footer .logo{margin-bottom:1.2rem;color:var(--tinte)}
footer p{margin-bottom:.9rem}
footer nav{display:flex;flex-direction:column;align-items:flex-start;gap:.65rem}
footer h3{margin:.25rem 0 .35rem;font:500 1.05rem/1.2 var(--serif);color:var(--tinte)}
footer nav h3:not(:first-child){margin-top:1.3rem}
footer a{color:var(--stein);text-decoration:none}
footer a:hover{color:var(--tinte);text-decoration:underline;text-underline-offset:.3em}
footer .logo:hover{text-decoration:none}
footer .measurement-settings{color:var(--stein);text-decoration:none}
footer .measurement-settings:hover{color:var(--tinte);text-decoration:underline}
.footer-note{margin:2rem 0 0;padding-top:1.4rem;border-top:1px solid var(--linie);font-size:.8125rem;color:var(--stein)}

/* ==========================================================================
   Beispielansichten (Laptop, Handy, Google-Karte): Handy und Laptop in
   dunklem Grüngrau, Google-Ansichten weiß wie das Original. Keine Leuchtränder.
   ========================================================================== */
.sx-deck{display:grid;position:relative;z-index:1}
.sx{grid-area:1/1;position:relative;width:100%;aspect-ratio:1/.86;container-type:inline-size;margin:0}
.sx>*{position:absolute}
.sx svg{display:block}
.hero-split .sx-deck,.hero-split .fly-caption{max-width:620px;justify-self:end;width:100%;margin-left:auto}
.hero-split .sx-deck:has(.sx-phone-only){max-width:440px}

/* Laptop */
.sx-laptop{left:1%;top:10%;width:82%}
.sx-screen{padding:1.2cqw;border-radius:2.2cqw 2.2cqw .8cqw .8cqw;background:linear-gradient(160deg,#3B4540,#1F2B26);box-shadow:0 36px 60px -34px rgba(38,35,31,.55)}
.sx-base{height:2.2cqw;margin:0 -5%;border-radius:0 0 3cqw 3cqw;background:linear-gradient(#DAD5CC,#BDB6AA);box-shadow:0 18px 30px -18px rgba(38,35,31,.4)}
.sx-base::after{content:"";display:block;width:16%;height:45%;margin:0 auto;border-radius:0 0 1cqw 1cqw;background:#A9A296}
.sx-browser{aspect-ratio:16/10.4;overflow:hidden;border-radius:1cqw;background:var(--sx-bg,#fbf8f3);color:var(--sx-ink,#1f2b26);font-family:var(--sans)}
.sx-bar{display:flex;align-items:flex-end;gap:.7cqw;height:3.6cqw;padding:0 1.4cqw;background:#e9e6e1}
.sx-bar>i{width:1cqw;height:1cqw;margin-bottom:1.2cqw;border-radius:50%;background:#f08f7e}
.sx-bar>i:nth-child(2){background:#f3c76a}
.sx-bar>i:nth-child(3){background:#7cc89a;margin-right:1.2cqw}
.sx-tab{display:flex;align-items:center;gap:.8cqw;padding:.8cqw 2.2cqw .8cqw 1.2cqw;border-radius:1cqw 1cqw 0 0;background:var(--sx-bg,#fbf8f3);font-size:1.25cqw;font-weight:600;color:#3b4442}
.sx-tab em,.sx-nav em{display:inline-block;width:1.5cqw;height:1.5cqw;border-radius:.45cqw}
.sx-addr{display:flex;align-items:center;gap:.6cqw;width:max-content;margin:.8cqw 1.4cqw 0;padding:.55cqw 1.2cqw;border-radius:99px;background:#f0ede8;font-size:1.25cqw;color:#5d6664}
.sx-addr svg{width:1.3cqw;height:1.3cqw;color:#5d8a6f}
.sx-site{padding:1.4cqw 2.2cqw 2cqw}
.sx-nav{display:flex;align-items:center;gap:2.1cqw;font-size:1.35cqw;color:#5c6664}
.sx-nav b{display:flex;align-items:center;gap:.8cqw;margin-right:auto;font:700 1.8cqw/1 var(--serif);letter-spacing:-.01em;color:var(--sx-ink,#1f2b26)}
.sx-nav u{padding:.75cqw 1.5cqw;border-radius:99px;background:var(--sx-accent,#2f7d6b);color:#fff;font-weight:600;text-decoration:none}
.sx-hero{position:relative;height:27cqw;margin-top:1.6cqw;border-radius:1.4cqw;overflow:hidden;background:var(--sx-bg,#fbf8f3)}
.sx-art{position:absolute;inset:0;left:38%;width:62%;height:100%}
.sx-copy{position:absolute;left:0;top:0;bottom:0;width:50%;padding:2.4cqw 2.6cqw;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(90deg,var(--sx-veil,#fbf8f3f2) 70%,transparent)}
.sx-copy small{font-size:1.25cqw;font-weight:700;letter-spacing:0;color:var(--sx-accent,#2f7d6b)}
.sx-copy strong{margin:.9cqw 0 1cqw;font:600 3.2cqw/1.04 var(--serif);letter-spacing:-.02em;color:var(--sx-ink,#1f2b26)}
.sx-copy span{max-width:30ch;font-size:1.35cqw;line-height:1.45;color:var(--sx-sub,#55605d)}
.sx-btns{display:flex;gap:.9cqw;margin-top:1.6cqw}
.sx-btns u,.sx-btns s{padding:.85cqw 1.5cqw;border-radius:99px;font-size:1.3cqw;font-weight:600;text-decoration:none}
.sx-btns u{background:var(--sx-cta,#e48a1b);color:#1f2b26}
.sx-btns s{border:1px solid #0000001f;background:#ffffffb3;color:var(--sx-ink,#1f2b26)}
.sx-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1cqw;margin-top:1.5cqw}
.sx-tiles span{display:flex;align-items:center;gap:.9cqw;padding:1.1cqw 1.2cqw;border-radius:1cqw;background:#fff;box-shadow:0 1px 0 #0000000f,0 .6cqw 1.6cqw -1cqw #0003;font-size:1.3cqw;font-weight:600;color:#36403e}
.sx-tiles i{display:grid;place-items:center;flex:none;width:2.1cqw;height:2.1cqw;border-radius:.6cqw;background:var(--sx-accent,#2f7d6b);color:#fff}
.sx-tiles i svg{width:1.4cqw;height:1.4cqw;stroke-width:3}

/* Suchfeld und Abzeichen */
.sx-ask{left:0;top:0;display:flex;align-items:center;gap:1.3cqw;padding:1.4cqw 2.4cqw 1.4cqw 1.6cqw;border-radius:99px;background:#fff;border:1px solid var(--linie);box-shadow:var(--schatten-klein);font:500 2.2cqw/1.2 var(--sans);color:var(--tinte);white-space:nowrap}
.sx-ask svg{width:2.8cqw;height:2.8cqw;color:var(--tanne-hell)}
.sx-badge{display:flex;align-items:center;gap:1.1cqw;padding:1.2cqw 2.1cqw 1.2cqw 1.6cqw;border-radius:99px;background:#fff;border:1px solid var(--linie);box-shadow:var(--schatten-klein);font:600 1.95cqw/1.2 var(--sans);color:var(--tinte);white-space:nowrap}
.sx-badge i{width:1.5cqw;height:1.5cqw;border-radius:50%;background:var(--bernstein)}
.sx-badge svg{width:2.2cqw;height:2.2cqw;padding:.35cqw;border-radius:50%;background:var(--tanne);color:var(--leinen);stroke-width:3.2}
.sx-badge.b1{right:0;top:3%}
.sx-badge.b2{left:41%;bottom:0}

/* Google-Unternehmensprofil, bleibt weiß wie bei Google */
.sx-gcard{left:0;bottom:3%;width:39%;overflow:hidden;border-radius:2cqw;background:#fff;color:#202124;box-shadow:0 24px 40px -22px rgba(38,35,31,.45),0 0 0 1px rgba(0,0,0,.07);font-family:Arial,var(--sans)}
.sx-map{width:100%;height:7cqw}
.sx-g{position:relative;padding:1.4cqw 1.8cqw 1.8cqw}
.sx-gname{display:flex;align-items:center;gap:.9cqw;font:600 2.2cqw/1.15 Arial,var(--sans);color:#202124}
.sx-pin{position:absolute;right:1.8cqw;top:-2.6cqw;display:grid;place-items:center;width:4.4cqw;height:4.4cqw;border-radius:50%;background:#fff;box-shadow:0 2px 8px #0003}
.sx-pin svg{width:2.6cqw;height:2.6cqw;color:#ea4335}
.sx-g small{display:block;margin-top:.4cqw;font-size:1.5cqw;color:#5f6368}
.sx-open{display:flex;align-items:center;gap:.6cqw;margin:.8cqw 0 1.3cqw;font-size:1.5cqw;font-weight:600;color:#188038}
.sx-open svg{width:1.6cqw;height:1.6cqw}
.sx-acts{display:grid;grid-template-columns:repeat(3,1fr);gap:.7cqw}
.sx-acts span{display:flex;flex-direction:column;align-items:center;gap:.4cqw;padding:.8cqw 0;border-radius:1.2cqw;background:#e8f0fe;color:#1a56c4;font-size:1.3cqw;font-weight:600}
.sx-acts svg{width:1.9cqw;height:1.9cqw}

/* Telefonassistent als App: Rahmen in dunklem Grüngrau, heller Bildschirm */
.sx-phone{right:0;bottom:2%;width:33%;aspect-ratio:9/18.4;padding:1.1cqw;border-radius:5cqw;background:linear-gradient(160deg,#3B4540,#1F2B26);box-shadow:0 34px 56px -26px rgba(38,35,31,.6)}
.sx-phone-in{position:relative;height:100%;display:flex;flex-direction:column;gap:1.1cqw;padding:1.4cqw 1.8cqw 2cqw;overflow:hidden;border-radius:4cqw;background:var(--leinen);color:var(--tinte)}
.sx-phone-in::before{content:"";position:absolute;top:1.1cqw;left:50%;width:28%;height:2.2cqw;transform:translateX(-50%);border-radius:99px;background:#26231F}
.sx-status{display:flex;justify-content:space-between;align-items:center;min-height:2.6cqw;padding:0 1cqw;font-size:1.4cqw;color:var(--tinte)}
.sx-status span{display:flex;gap:.6cqw}
.sx-status svg{height:1.2cqw;width:auto;color:var(--tinte)}
.sx-call{display:flex;align-items:center;gap:1.2cqw;margin-top:1cqw}
.sx-avatar{display:grid;place-items:center;flex:none;width:5cqw;height:5cqw;border-radius:50%;background:var(--tanne);color:var(--leinen)}
.sx-avatar svg{width:2.8cqw;height:2.8cqw;stroke-width:2.2}
.sx-call-t b{display:block;font:650 1.85cqw/1.1 var(--sans);color:var(--tinte)}
.sx-call-t small{display:flex;align-items:center;gap:.6cqw;margin-top:.4cqw;font-size:1.35cqw;color:var(--stein);font-variant-numeric:tabular-nums}
.sx-live{width:1cqw;height:1cqw;border-radius:50%;background:#C4372D}
.sx-who{margin:0;font-size:1.3cqw;color:var(--stein)}
.sx-voice{display:flex;align-items:center;justify-content:center;gap:.45cqw;height:3.6cqw}
.sx-voice i{display:block;width:.5cqw;height:100%;border-radius:9px;background:var(--tanne);transform:scaleY(.55)}
.sx-chat{display:flex;flex-direction:column;gap:.9cqw;flex:1;min-height:0}
.sx-msg{margin:0;max-width:90%;padding:1.1cqw 1.4cqw;border-radius:1.8cqw;font-size:1.45cqw;line-height:1.38}
.sx-msg.ai{border:1px solid var(--linie);border-bottom-left-radius:.5cqw;background:#fff;color:var(--tinte)}
.sx-msg.caller{align-self:flex-end;border-bottom-right-radius:.5cqw;background:var(--tanne);color:var(--leinen);font-weight:600}
.sx-msg.done{display:flex;align-items:center;gap:.8cqw;align-self:stretch;max-width:none;margin-top:auto;border:1px solid rgba(31,63,53,.28);background:var(--hafer);color:var(--tanne);font-weight:600}
.sx-msg.done svg{flex:none;width:2cqw;height:2cqw;stroke-width:3}
.sx-controls{display:flex;justify-content:center;gap:2.4cqw}
.sx-controls span{display:grid;place-items:center;width:4.4cqw;height:4.4cqw;border:1px solid var(--linie);border-radius:50%;background:#fff;color:var(--tinte)}
.sx-controls span.end{border-color:#C4372D;background:#C4372D;color:#fff}
.sx-controls svg{width:2.2cqw;height:2.2cqw}
@container (max-width:520px){
  .sx-who,.sx-controls{display:none}
  .sx-msg{font-size:1.55cqw;padding:1cqw 1.3cqw}
  .sx-chat{gap:.8cqw}
}
/* Nur Handy (Telefonassistent-Seite) */
.sx-phone-only{aspect-ratio:1/1.2}
.sx-phone-only .sx-phone{left:32.5%;right:auto;top:0;bottom:auto;width:35%;transform:scale(1.5);transform-origin:top center;box-shadow:0 18px 30px -22px rgba(38,35,31,.5)}
.sx-phone-only .sx-ask{top:auto;bottom:2%;left:50%;transform:translateX(-50%)}

/* ---------- Bewegung: nur dezent, nur wenn erwünscht ---------- */
@media (prefers-reduced-motion:no-preference){
  .sx-voice i{animation:sx-ton 1.1s ease-in-out infinite}
  .sx-voice i:nth-child(2n){animation-delay:-.3s}
  .sx-voice i:nth-child(3n){animation-delay:-.6s}
  .sx-voice i:nth-child(5n){animation-delay:-.85s}
  .sx-voice i:nth-child(7n){animation-delay:-.15s}
  @keyframes sx-ton{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
  .js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
  .js .reveal.is-in{opacity:1;transform:none}
  .js .reveal-stagger>*{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
  .js .reveal-stagger.is-in>*{opacity:1;transform:none}
  .js .reveal-stagger.is-in>*:nth-child(2){transition-delay:.07s}
  .js .reveal-stagger.is-in>*:nth-child(3){transition-delay:.14s}
  .js .reveal-stagger.is-in>*:nth-child(4){transition-delay:.21s}
  .js .reveal-stagger.is-in>*:nth-child(5){transition-delay:.28s}
  .js .reveal-stagger.is-in>*:nth-child(6){transition-delay:.35s}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn,.card-link{transition:none}
}

/* ---------- Anpassung an Tablet und Handy ---------- */
@media(max-width:1160px){
  .nav-menu>summary{display:flex;align-items:center;gap:10px;padding:.55rem .95rem;border:1px solid var(--feld-linie);border-radius:6px;font-size:.94rem;font-weight:600;cursor:pointer;list-style:none;color:var(--tinte)}
  .nav-menu>summary::-webkit-details-marker{display:none}
  .nav-menu:not([open])>.nav-links{display:none}
  .nav-menu[open]>.nav-links{display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;max-height:calc(100dvh - 76px);overflow:auto;padding:12px var(--rand) 22px;background:var(--leinen);border-bottom:1px solid var(--linie);box-shadow:0 24px 36px -24px rgba(38,35,31,.35)}
  .nav-links>a,.nav-dropdown>summary{padding:.85rem 0;font-size:1rem;border-bottom:1px solid var(--linie)}
  .nav-links>.btn{margin-top:1rem;padding:.7rem 1.2rem;border-bottom:1px solid var(--tanne)}
  .dropdown-links{position:static;min-width:0;margin:0 0 .5rem;padding:4px 0 4px 12px;border:0;background:none;box-shadow:none}
  .dropdown-links>a{padding:.65rem .5rem}
  .hero-split .wrap{grid-template-columns:1fr;gap:36px}
  .hero-split .sx-deck,.hero-split .fly-caption{justify-self:start;margin-left:0;max-width:560px}
  .hero-split .sx-deck:has(.sx-phone-only){max-width:440px}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .cards,.cards.two,.article-page .cards{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:800px){
  .compact-form,.anfrage-form{grid-template-columns:1fr}
  .compact-form .full,.anfrage-form .full{grid-column:auto}
}
@media(max-width:700px){
  .steps{grid-template-columns:1fr;gap:28px}
  .author-box{flex-direction:column;padding:22px;gap:16px}
  .monogram{width:64px;height:64px;font-size:1.6rem}
}
@media(max-width:480px){
  body{font-size:1rem}
  header .wrap.nav,.nav{min-height:64px;gap:14px}
  .nav-menu[open]>.nav-links{max-height:calc(100dvh - 64px)}
  .logo b{font-size:1.25rem}
  .hero h1{font-size:clamp(2.1rem,9.4vw,2.5rem)}
  .btn{padding:.7rem 1.2rem}
  .hero .btn,.cta-band .btn,section#anfragen .btn,.cta .btn{width:100%}
  .card,.toc{padding:22px}
  .price-panel{padding:22px}
  .price-big .micro{display:block;margin:.5rem 0 0}
  .urgency-note{padding:1.2rem 1.25rem}
  .footer-grid,.measurement-actions{grid-template-columns:1fr}
  .measurement-choice{right:12px;bottom:12px;width:calc(100% - 24px);max-height:calc(100dvh - 24px);padding:18px;font-size:.875rem}
  .measurement-choice h2{font-size:1.25rem}
  .faq-list summary,.faq summary{font-size:1.125rem}
  .fly-caption{text-align:left}
  .sx-ask{font-size:2.8cqw}
  .sx-badge{font-size:2.5cqw}
  .sx-msg{font-size:1.75cqw}
  .sx-call-t b{font-size:2.3cqw}
}

/* ---------- Begrenzte Unterseiten-Fortsetzung, 12.10.: Luft und Bildplätze ----------
   Hauptüberschriften, Angebote und Fakten bleiben erhalten. Die Bildplätze zeigen
   Symbolbilder, keine Referenzprojekte oder dokumentierten Behandlungen. */
.article-page section:not(.hero):not(.cta-band):not(#faq){padding-block:clamp(52px,6vw,80px)}
.article-page section>.wrap>p,.article-page section>.wrap>ul,.article-page section>.wrap>ol{max-width:68ch}
.article-page section>.wrap>h2{margin-bottom:1.5rem;max-width:27ch}
.article-page section>.wrap>p+p{margin-top:1.25rem}
.article-page section>.wrap>ul>li,.article-page section>.wrap>ol>li{margin-block:.65rem}
.branch-page>section:not(.hero):not(.cta-band){padding-block:clamp(60px,8vw,108px)}
.branch-page section>.wrap>h2{margin-bottom:2rem}
.branch-page section>.wrap>p{max-width:68ch}
.branch-page .cards{gap:26px}
.branch-page .card{padding:clamp(24px,3vw,36px)}
.branch-page .card p{line-height:1.7}
.branch-page .card h3{margin-bottom:1rem}
.branch-page .hero-copy .lead{line-height:1.65}
.branch-page .hero-copy .hero-copy-long{max-width:52ch;margin-top:1.9rem;line-height:1.7}
.branch-hero>.wrap{gap:clamp(36px,5vw,72px)}
.branch-visual{align-self:center;width:100%;max-width:540px;justify-self:end}
.branch-foto{position:relative;margin:0;aspect-ratio:4/4.2;overflow:hidden;border-radius:4px;background:var(--hafer)}
.branch-foto>img{width:100%;height:100%;object-fit:cover;object-position:56% 40%}
.branch-foto>figcaption{position:absolute;left:12px;bottom:12px;padding:4px 8px;border-radius:3px;background:rgba(251,247,240,.94);font:400 .6875rem/1.4 var(--sans);color:#6A6158}
.branch-beratung .branch-foto>img{object-position:50% 32%}
.branch-physio .branch-foto>img{object-position:63% 50%}
.branch-hebamme .branch-foto>img{object-position:48% 45%}
.branch-werkstatt .branch-foto{aspect-ratio:4/3}
.branch-themen{display:flex;flex-wrap:wrap;gap:8px 0;align-items:center;margin-top:18px;padding-top:16px;border-top:1px solid var(--linie);font:500 .875rem/1.4 var(--sans);color:var(--stein)}
.branch-themen>span{padding-right:14px}
.branch-themen>span+span{border-left:1px solid var(--linie);padding-left:14px}

/* Echte Links bleiben bedienbar. Der horizontale Bereich lässt sich mit Touch,
   Trackpad oder nach Tastaturfokus mit den Pfeiltasten durchblättern. */
.branch-swipe-hinweis{margin:-.75rem 0 1.1rem;font-size:.8125rem;color:var(--stein)}
.branch-page .cards.branch-swipe{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(260px,calc((100% - 52px)/3));gap:26px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;scroll-padding-inline:4px;padding:4px 4px 18px;margin-inline:-4px;scrollbar-width:thin;scrollbar-color:#B5A794 transparent}
.branch-page .branch-swipe>.card{scroll-snap-align:start;padding:0 0 28px;overflow:hidden}
.branch-swipe>.card>*:not(.branch-kartenbild){margin-inline:24px}
.branch-swipe>.card>.eyebrow{margin-top:1.35rem}
.branch-swipe>.card>.more{align-self:flex-start;margin-top:auto;padding-top:.9rem}
.branch-kartenbild{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--hafer)}
.branch-kartenbild>img{width:100%;height:100%;object-fit:cover;object-position:55% 38%;transition:transform .35s var(--ease)}
.branch-kartenbild>span{position:absolute;left:10px;bottom:10px;padding:3px 6px;border-radius:3px;background:rgba(251,247,240,.94);font:400 .625rem/1.35 var(--sans);color:#6A6158}
.branch-swipe .card:hover .branch-kartenbild>img{transform:scale(1.025)}

/* Werkstatt-Fotostrecke: die Umgebung trägt die Branche, der Text bleibt knapp. */
section.branch-werkstatt{background:var(--leinen)}
.branch-galerie-kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:24px 64px;margin-bottom:34px}
.branch-galerie-kopf h2{margin:0;max-width:18ch}
.branch-galerie-kopf p{max-width:40ch;margin:0;color:var(--stein);font-size:1rem}
.branch-werkstatt-bilder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.branch-werkstatt-bilder>figure{margin:0;min-width:0}
.branch-werkstatt-bilder img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px;background:var(--grund)}
.branch-werkstatt-bilder figcaption{display:flex;flex-direction:column;gap:4px;margin-top:14px}
.branch-werkstatt-bilder strong{font:500 1.45rem/1.2 var(--serif);color:var(--tinte)}
.branch-werkstatt-bilder figcaption>span{font-size:.6875rem;line-height:1.4;color:var(--stein)}
.article-page.branch-page .branch-werkstatt>.wrap{max-width:1240px}

@media(max-width:1160px){
  .branch-visual{justify-self:start;max-width:640px}
  .branch-foto{aspect-ratio:3/2}
  .branch-hero>.wrap{gap:32px}
  .branch-hero .hero-copy{max-width:760px}
}
@media(max-width:700px){
  .branch-page>section:not(.hero):not(.cta-band){padding-block:60px}
  .branch-page section>.wrap>h2{margin-bottom:1.7rem}
  .branch-page .cards.branch-swipe{grid-auto-columns:86%;gap:16px}
  .branch-galerie-kopf{grid-template-columns:1fr;gap:16px;margin-bottom:28px}
  .branch-werkstatt-bilder{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:85%;gap:16px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;padding-bottom:18px;scrollbar-width:thin;scrollbar-color:#B5A794 transparent}
  .branch-werkstatt-bilder>figure{scroll-snap-align:start}
  .branch-themen{font-size:.8125rem;margin-top:14px;padding-top:12px}
}
@media(prefers-reduced-motion:reduce){.branch-kartenbild>img{transition:none}}

/* Verkaufsschärfung 15.10.2026: Eckdaten im ersten Bildschirm, Beweis, Klartext-Block, kompakter Messhinweis mobil */
.hero-eckdaten{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px;margin:1.7rem 0 0;padding:1rem 0 0;border-top:1px solid var(--linie);max-width:34em}
.hero-eckdaten li{margin:0;padding:0;font-size:.8125rem;line-height:1.35;color:var(--stein)}
.hero-eckdaten b{display:block;margin-bottom:2px;font:600 1rem/1.25 var(--sans);color:var(--tinte)}
.hero-beweis{margin:1.2rem 0 0;max-width:36em;font-size:.875rem;line-height:1.5;color:var(--stein)}
.hero-beweis a{white-space:nowrap}
.ra .hero-eckdaten{margin-bottom:1.6rem}
.klartext .klartext-fragen .card h3{margin-bottom:.6rem}
.klartext .klartext-fragen .card p{margin:0}
.klartext-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin-top:20px}
.klartext-box{padding:clamp(22px,3vw,32px);border:1px solid var(--linie);border-radius:8px}
.klartext-titel{margin:0 0 1rem;font:500 1.3rem/1.2 var(--serif);color:var(--tinte)}
.klartext-liste{margin:0;padding-left:1.1rem;color:var(--stein)}
.klartext-liste li{margin-bottom:.6rem}
.klartext-liste li::marker{color:var(--tanne-hell)}
.klartext-projekte b{display:block;color:var(--tinte);font-weight:600}
.klartext-link{margin:1rem 0 0}
.klartext-person{display:flex;align-items:center;gap:16px;margin:28px 0 0;max-width:46em;color:var(--stein)}
.klartext-person .monogram{width:56px;height:56px;border-radius:12px;font-size:1.4rem}
@media(max-width:900px){.klartext-raster{grid-template-columns:1fr}.klartext .cards{grid-template-columns:1fr}}
@media(max-width:600px){
  .hero-eckdaten{gap:10px 14px;margin-top:1.2rem;padding-top:.8rem}
  .hero-eckdaten b{font-size:.9375rem}
  .measurement-choice{left:10px;right:10px;bottom:10px;width:auto;max-height:calc(100dvh - 20px);padding:14px 16px;font-size:.75rem;line-height:1.4}
  .measurement-choice h2{margin-bottom:.4rem;font-size:1.05rem}
  .measurement-choice p{margin-bottom:.45rem}
  .measurement-actions{gap:10px}
  .measurement-actions button{padding:.55rem;font-size:.875rem}
}
@media(max-width:700px){
  .klartext .cards.klartext-fragen{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:86%;gap:14px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;padding-bottom:14px;scrollbar-width:thin}
  .klartext .klartext-fragen>.card{scroll-snap-align:start}
  .klartext-person{align-items:flex-start}
}