/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(/v18/a/e3908a15ff59.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(/v18/a/01c9275aa0d8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/v18/a/e3908a15ff59.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/v18/a/01c9275aa0d8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(/v18/a/e3908a15ff59.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(/v18/a/01c9275aa0d8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/v18/a/6b8bf3dd85a4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/v18/a/5a7f94a1fa09.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/v18/a/6b8bf3dd85a4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/v18/a/5a7f94a1fa09.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/v18/a/6b8bf3dd85a4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/v18/a/5a7f94a1fa09.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/v18/a/66a33f6a78ae.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/v18/a/9d846db84c50.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/v18/a/66a33f6a78ae.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/v18/a/9d846db84c50.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/v18/a/66a33f6a78ae.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/v18/a/9d846db84c50.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/v18/a/66a33f6a78ae.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/v18/a/9d846db84c50.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ══════════════════════════════════════════════════════════════
   STEFANS WEBDESIGN
   Palette und Typo aus der bestehenden Marke. Aufbau editorial:
   Randspalten, Haarlinien statt Karten, gestufter Rhythmus.
   ══════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#080808; --ink-2:#0b0b0a; --ink-3:#0e0d0b;
  --gold:#c9b183; --gold-hi:#ecdec2;
  --cream:#f5efe3;
  --t-70:rgba(245,239,227,.86); --t-50:rgba(245,239,227,.68); --t-30:rgba(245,239,227,.58);
  --gold-dark:#7a6330;
  --hair:rgba(245,239,227,.09);
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Geist','Inter',system-ui,sans-serif;
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.65,.05,.36,1);
}
html{font-size:16px;color-scheme:dark}
body{background:var(--ink);color:var(--cream);font-family:var(--sans);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
::selection{background:rgba(201,177,131,.22)}
::-webkit-scrollbar{width:2px}::-webkit-scrollbar-track{background:#000}
::-webkit-scrollbar-thumb{background:#2a2419}
:focus-visible{outline:1px solid var(--gold);outline-offset:4px}

/* Feines Korn nimmt der schwarzen Flaeche die Sterilitaet */
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:200;background:var(--gold);color:var(--ink);
  padding:10px 16px;border-radius:8px;font-size:.8rem}
#grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.038;
  mix-blend-mode:overlay;background-image:url("/v18/a/3f683b6f641b.svg")}

/* ── Raster mit echten Randspalten ── */
.grid{display:grid;
  grid-template-columns:[full-start] minmax(20px,1fr) [main-start] repeat(12,minmax(0,84px)) [main-end] minmax(20px,1fr) [full-end];
  column-gap:clamp(14px,1.6vw,28px)}
.main{grid-column:main-start / main-end}

/* ── Typo ── */
.d-xl{font-family:var(--serif);font-weight:400;font-size:clamp(2.5rem,5.1vw,5.4rem);
  line-height:.94;letter-spacing:-.02em}
.d-l{font-family:var(--serif);font-weight:400;font-size:clamp(2.1rem,4.4vw,4.2rem);
  line-height:1.02;letter-spacing:-.018em}
p{font-size:clamp(1.12rem,1.22vw,1.3rem);line-height:1.65;color:var(--t-70);max-width:34em}
.meta{font-size:.95rem;line-height:1.6;color:var(--t-50)}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* Zeilen-Maske ohne abgeschnittene Unterlaengen */
.lm{display:block;overflow:hidden;padding-block:.24em;margin-block:-.24em}
.lm>span{display:block}


/* ── Navigation: schwebende Kachel ── */
#nav{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:100;
  width:min(1220px,calc(100% - 32px));display:flex;align-items:center;
  justify-content:space-between;padding:10px 14px 10px 20px;border-radius:18px;
  background:transparent;border:1px solid transparent;
  transition:background .5s var(--e-io),border-color .5s var(--e-io),
             box-shadow .5s var(--e-io),padding .5s var(--e-io)}
#nav.solid{background:rgba(11,11,10,.62);border-color:rgba(245,239,227,.09);
  -webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(245,239,227,.07),0 18px 44px -26px rgba(0,0,0,.95);
  padding:8px 12px 8px 18px}
#nav .logo{height:74px;width:auto;display:block;transition:height .5s var(--e-io)}
#nav.solid .logo{height:62px}
.nav-r{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2.1rem)}
.nav-r a{font-family:var(--serif);font-size:1.02rem;color:var(--cream);opacity:.88;
  transition:opacity .3s,color .3s;text-shadow:0 1px 4px rgba(0,0,0,.85)}
.nav-r a:hover{opacity:1;color:var(--gold-hi)}
.nav-tel{font-family:var(--sans)!important;font-size:.78rem!important;letter-spacing:.08em;
  color:var(--cream)!important;opacity:1!important;padding:9px 16px;border-radius:12px;
  border:1px solid rgba(245,239,227,.22);text-shadow:none!important;
  transition:background .35s var(--e-io),color .35s}
.nav-tel:hover{background:var(--cream);color:var(--ink)!important}
/* Zweiter Kontaktweg direkt neben der Nummer. Wer nicht anrufen mag, schreibt. */
.nav-wa{font-family:var(--sans)!important;font-size:.78rem!important;letter-spacing:.08em;
  color:var(--cream)!important;opacity:1!important;padding:9px 16px;border-radius:12px;
  background:rgba(245,239,227,.07);box-shadow:inset 0 0 0 1px rgba(245,239,227,.18);
  text-shadow:none!important;transition:background .35s var(--e-io),box-shadow .35s}
.nav-wa:hover{background:rgba(245,239,227,.15);box-shadow:inset 0 0 0 1px rgba(245,239,227,.42)}
@media(max-width:960px){
  #nav{top:10px;width:calc(100% - 20px);padding:8px 10px 8px 14px}
  #nav .logo{height:54px}#nav.solid .logo{height:48px}
  .nav-r a:not(.nav-tel):not(.nav-wa){display:none}
  .nav-r{gap:.5rem}
  .nav-tel,.nav-wa{min-height:44px;display:inline-flex;align-items:center;
    padding:0 14px;font-size:.72rem!important}
}

/* ── Knoepfe: eine Form, keine Rahmen-Zwillinge ── */
.cta{display:inline-flex;align-items:center;gap:.7rem;position:relative;overflow:hidden;
  font-family:var(--sans);font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;
  padding:17px 34px;border-radius:12px;background:var(--cream);color:var(--ink);
  font-weight:500;transition:transform .18s var(--e-io)}
.cta::before{content:'';position:absolute;inset:0;background:#fff;
  transform:translateY(101%);transition:transform .42s var(--e-out)}
.cta span{position:relative;z-index:1}
.cta:hover::before{transform:translateY(0)}
.cta:active{transform:scale(.985)}
/* Zweiter Knopf: gleiche Masse wie .cta, damit keiner wie ein Anhaengsel wirkt. */
.cta-2{display:inline-flex;align-items:center;gap:.7rem;position:relative;overflow:hidden;
  font-family:var(--sans);font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;
  padding:17px 34px;border-radius:12px;font-weight:500;
  background:rgba(245,239,227,.07);color:var(--cream);
  box-shadow:inset 0 0 0 1px rgba(245,239,227,.26);
  transition:transform .18s var(--e-io),background .4s var(--e-io),box-shadow .4s var(--e-io)}
.cta-2:hover{background:rgba(245,239,227,.14);box-shadow:inset 0 0 0 1px rgba(245,239,227,.5)}
.cta-2:active{transform:scale(.985)}
.cta-2 span{position:relative;z-index:1}
.quiet{display:inline-flex;align-items:center;gap:.55rem;font-size:.76rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--t-70);
  padding:17px 2px;position:relative;transition:color .3s}
.quiet::after{content:'';position:absolute;left:2px;right:2px;bottom:13px;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--e-out)}
.quiet:hover{color:var(--cream)}
.quiet:hover::after{transform:scaleX(1);transform-origin:left}
.quiet i{font-style:normal;transition:transform .4s var(--e-out)}
.quiet:hover i{transform:translateX(6px)}

/* ── Die Leitung ── */
#wire{position:absolute;top:0;left:0;pointer-events:none;z-index:40;max-width:100%;overflow:hidden}
#wire path{fill:none;stroke-linecap:round}
#wire .core{stroke:var(--gold);stroke-width:1.5;filter:drop-shadow(0 0 7px rgba(201,177,131,.45))}
#wire .glow{stroke:var(--gold-hi);stroke-width:5;opacity:.13;filter:blur(6px)}
#wire .runner{stroke:#fffaf0;stroke-width:2;opacity:0;filter:drop-shadow(0 0 12px rgba(236,222,194,.9))}
#nodes{position:absolute;top:0;left:0;pointer-events:none;z-index:41;max-width:100%;overflow:hidden}
.node{position:absolute;width:7px;height:7px;border-radius:50%;background:#171410;
  border:1px solid rgba(201,177,131,.42);transform:translate(-50%,-50%);
  transition:background .6s var(--e-io),box-shadow .6s var(--e-io),border-color .6s var(--e-io)}
.node.on{background:var(--gold-hi);border-color:var(--gold-hi);
  box-shadow:0 0 12px 3px rgba(201,177,131,.5)}

/* ── HERO ── */
#hero{position:relative;min-height:100svh;display:flex;align-items:center;
  padding:132px 0 clamp(56px,7vh,96px);z-index:3;overflow:hidden}
#hero::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:-2;
  background:radial-gradient(58% 42% at 22% 8%,rgba(245,239,227,.035),transparent 70%)}
.hero-foto{position:absolute;top:0;right:0;bottom:0;width:62vw;z-index:0}
/* Die weiche Kante sitzt auf dem Bild, nicht auf dem Behaelter — sonst
   blendet sie das Wasserzeichen mit aus. */
.hero-foto>img.bg{
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 16%,#000 46%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 16%,#000 46%)}
.hero-foto>img.bg{width:100%;height:100%;object-fit:cover;object-position:58% 38%}
/* Der Uebergang ist als Alphakanal ins Bild eingebrannt.
   Kein Overlay, keine Kante, egal was dahinter liegt. */
.wm-halter{position:absolute;inset:0;z-index:2;pointer-events:none}
.hero-foto>img.wm,.wm-halter>img.wm{position:absolute;right:clamp(22px,3.4vw,52px);bottom:clamp(26px,6vh,64px);
  width:clamp(118px,11.5vw,176px);height:auto;object-fit:contain;z-index:2;opacity:.86;
  filter:drop-shadow(0 2px 18px rgba(0,0,0,.95))}
.hero-in{position:relative;z-index:2;max-width:min(660px,50%)}
/* Positionierung steht ueber der Ueberschrift und ist nie animiert.
   Wer nach dem Anruf die Domain aufmacht, liest sie im ersten Blick. */
.hero-marke{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem .8rem;
  margin-bottom:clamp(.85rem,1.3vw,1.15rem);max-width:none;
  font-size:clamp(.68rem,.78vw,.8rem);line-height:1.5;letter-spacing:.19em;
  text-transform:uppercase;color:rgba(245,239,227,.72)}
.hero-marke b{font-weight:400;display:inline}
.hero-marke i{font-style:normal;color:rgba(245,239,227,.28)}
.hero-marke span{color:rgba(245,239,227,.52)}
/* Der zweite Satz kommt leiser nach, damit das Lob zuerst steht. */
#hero .lm{padding-bottom:.06em;margin-bottom:-.06em}
.hero-sub{margin:1.35rem 0 2.1rem}
.hero-sub{font-size:clamp(1.14rem,1.3vw,1.4rem)}
.hero-sub b{font-weight:400;color:rgba(245,239,227,.92)}
.hero-act{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap}
.facts{margin-top:clamp(2.2rem,4vh,3.4rem);display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,2.4rem)}
.fact{border-top:1px solid var(--hair);padding-top:1.1rem}
.fact b{display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.15rem,1.5vw,1.5rem);line-height:1.18;margin-bottom:.35rem}
.fact span{font-size:.92rem;line-height:1.55;color:var(--t-50)}
@media(max-width:520px){
  .hero-act{flex-direction:column;align-items:stretch;gap:.7rem}
  .hero-act .cta,.hero-act .cta-2{justify-content:center;padding:18px 22px}
  .garantie .hero-act .cta span{font-size:.72rem}
}
@media(max-width:960px){
  /* Kein Vorlauf mehr: das Bild beginnt an der Oberkante, hinter der
     durchsichtigen Navigation — genau wie am Rechner. */
  #hero{padding:0 0 clamp(56px,10vw,84px);min-height:auto;display:block}
  .hero-foto{position:relative;z-index:-1;width:100%;margin-left:0;
    height:min(62svh,520px);
    /* Nur ein kleiner Zug nach oben, damit Bild und Ueberschrift zusammenhaengen. */
    margin-bottom:clamp(1.6rem,5vw,2.4rem)}
  .hero-foto>img.bg{object-position:60% 28%;
    -webkit-mask-image:linear-gradient(180deg,#000 88%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 88%,transparent 100%)}
  /* Dunkler Anlauf oben, damit die Stichpunkte auf dem Bild lesbar sind. */
  /* Nur so viel Abdunklung, dass Logo und Knoepfe im Kopf sicher lesbar sind. */
  .hero-foto::after{content:'';position:absolute;top:0;left:0;right:0;
    height:150px;pointer-events:none;z-index:1;
    background:linear-gradient(180deg,rgba(8,8,8,.66) 0%,transparent 100%)}
  .wm-halter>img.wm{width:min(112px,25vw);right:18px;bottom:20px}

  /* Am Handy tragen Ueberschrift und Unterzeile die Aussage allein. */
  .hero-marke{display:none}

  /* Statisch, damit #hero der Bezugsrahmen der Stichpunkte ist. */
  .hero-in{max-width:none;position:static;z-index:auto}
  .hero-in .d-xl{font-size:clamp(2.35rem,9.4vw,3.4rem);line-height:1}
  .hero-sub{margin:1.7rem 0 2.4rem;font-size:1.14rem;line-height:1.62}
  /* Die Fakten standen als dichter Block. Jetzt drei ruhige Zeilen. */
  .facts{margin-top:clamp(2.6rem,7vw,3.4rem);grid-template-columns:1fr;gap:0}
  .fact{padding:1.35rem 0 1.4rem}
  .fact:last-child{padding-bottom:0}
  .fact b{font-size:1.28rem;margin-bottom:.5rem}
  .fact span{font-size:.98rem;line-height:1.6}
}
@media(max-width:400px){
  .hero-foto{height:min(56svh,440px)}
}

/* Uebergangsband. Traegt den Grundton der Sektion darueber in den der
   Sektion darunter. Liegt zwischen zwei Sektionen, nicht in einer. */
/* Zwei Bildschirme nebeneinander wirken nur, wenn sie wirklich breit sind. */
.main-breit{grid-column:full-start / full-end;
  padding-left:clamp(20px,4vw,64px);padding-right:clamp(20px,4vw,64px)}
@media(max-width:640px){.main-breit{padding-left:16px;padding-right:16px}}
.uebergang{position:relative;z-index:3;height:clamp(70px,9vw,150px);
  background:linear-gradient(180deg,var(--von) 0%,var(--nach) 100%)}
.hell h2,.hell h3{color:#14120f}

/* ══ Helle Sektionen. Schwarz und Gold allein sind die Codes von Luxusuhren;
      der Leser sitzt abends mit dem Handy auf der Couch. Zwei helle Flaechen
      geben der Seite Luft und heben Beweis und Preis heraus. ══ */
.hell{background:#f2ece0;color:#14120f}
.hell h1,.hell h2,.hell h3,.hell h4,.hell b,.hell strong{color:#14120f}
.hell p{color:rgba(20,18,15,.82)}
.hell .meta,.hell .nebenbei{color:rgba(20,18,15,.66)}
.hell .rule{background:linear-gradient(90deg,rgba(20,18,15,.68),rgba(20,18,15,.1) 68%,transparent)}
.hell .num,.hell .z-n{color:rgba(20,18,15,.6)}
.hell a{color:#14120f}
.hell .hair,.hell .zeilen,.hell .drei,.hell .drei article{border-color:rgba(20,18,15,.14)}
.hell .cta{background:#14120f;color:#f2ece0}
.hell .cta::before{background:#332c1c}
.hell .cta-2{background:rgba(20,18,15,.05);color:#14120f;
  box-shadow:inset 0 0 0 1px rgba(20,18,15,.26)}
.hell .cta-2:hover{background:rgba(20,18,15,.09);box-shadow:inset 0 0 0 1px rgba(20,18,15,.5)}
.hell ::selection{background:rgba(20,18,15,.16)}


/* ══ Referenzen. Die Karte zeigt die Seite lebendig, aber ruhig gestellt.
     Ein Klick oeffnet sie in einem Fenster auf dieser Seite. ══ */
.ref-reihe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.2rem,2.2vw,2rem);border-top:1px solid rgba(20,18,15,.14);
  padding-top:clamp(2rem,3.4vw,3rem)}
.ref-karte{background:#14120f;border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 26px 54px -34px rgba(20,18,15,.7)}
.ref-buehne{position:relative;display:block;width:100%;aspect-ratio:16/9.6;
  border:0;padding:0;margin:0;background:#0d0c0b;overflow:hidden;cursor:pointer}
.ref-mini{position:absolute;top:0;left:0;width:1440px;height:900px;border:0;
  transform:scale(var(--k,.28));transform-origin:0 0;pointer-events:none}
.ref-leer{position:absolute;inset:0;display:grid;place-items:center;
  font-size:.72rem;letter-spacing:.19em;text-transform:uppercase;color:rgba(245,239,227,.3)}
.ref-schleier{position:absolute;inset:0;background:rgba(13,12,11,.18);
  transition:background .45s var(--e-io)}
.ref-buehne:hover .ref-schleier{background:rgba(13,12,11,0)}
.ref-wartet .ref-buehne{cursor:default}
.ref-fuss{padding:clamp(1rem,1.6vw,1.4rem)}
.hell .ref-fuss h3,.ref-fuss h3{font-family:var(--serif);font-weight:400;color:var(--cream);
  font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.1;letter-spacing:-.014em}
.ref-unter{font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(.95rem,1.2vw,1.1rem);color:rgba(245,239,227,.6)!important;margin-top:.3rem}
.ref-satz{font-size:1.04rem;line-height:1.6;color:rgba(245,239,227,.72)!important;
  margin-top:.9rem;max-width:38ch}
.ref-knopf{display:inline-flex;align-items:center;gap:.65rem;
  font-family:var(--sans);font-size:.76rem;letter-spacing:.1em;font-weight:500;
  color:var(--cream);background:rgba(245,239,227,.09);border:0;
  box-shadow:inset 0 0 0 1px rgba(245,239,227,.18);
  padding:13px 22px;border-radius:24px;cursor:pointer;
  transition:background .35s var(--e-io),box-shadow .35s,gap .35s var(--e-out)}
.ref-knopf:hover{background:rgba(245,239,227,.16);box-shadow:inset 0 0 0 1px rgba(245,239,227,.35);gap:.95rem}
.ref-knopf[disabled]{opacity:.4;cursor:not-allowed}
.ref-knopf i{font-style:normal;transition:transform .4s var(--e-out)}
.ref-knopf:hover i{transform:translateX(3px)}

/* ── Das Vorschaufenster ── */
.vs{position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  padding:clamp(12px,3vw,44px)}
.vs[hidden]{display:none}
.vs-hg{position:absolute;inset:0;background:rgba(6,6,6,.78);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);opacity:0;
  transition:opacity .4s var(--e-io)}
.vs.auf .vs-hg{opacity:1}
.vs-fenster{position:relative;width:min(1180px,100%);height:min(84vh,860px);
  display:flex;flex-direction:column;background:#f4f1ec;border-radius:12px;
  overflow:hidden;box-shadow:0 50px 120px -40px rgba(0,0,0,.9);
  opacity:0;transform:translateY(14px) scale(.985);
  transition:opacity .45s var(--e-out),transform .45s var(--e-out)}
.vs.auf .vs-fenster{opacity:1;transform:none}
.vs-leiste{position:relative;display:flex;align-items:center;gap:1rem;
  padding:11px 14px;background:#f4f1ec;border-bottom:1px solid rgba(20,18,15,.12);flex:0 0 auto}
.vs-ampel{display:flex;gap:7px}
.vs-ampel i{width:11px;height:11px;border-radius:50%;background:#d8d3cb}
.vs-ampel i:nth-child(1){background:#ec6a5e}
.vs-ampel i:nth-child(2){background:#f4bf50}
.vs-ampel i:nth-child(3){background:#61c454}
.vs-mitte{position:absolute;left:50%;transform:translateX(-50%);text-align:center;
  display:flex;flex-direction:column;gap:1px;pointer-events:none;max-width:60%}
.vs-mitte b{font-family:var(--sans);font-size:.84rem;font-weight:600;color:#14120f;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vs-mitte small{font-size:.7rem;color:rgba(20,18,15,.5);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vs-zu{margin-left:auto;width:30px;height:30px;border:0;border-radius:50%;
  background:rgba(20,18,15,.06);display:grid;place-items:center;cursor:pointer;
  transition:background .3s}
.vs-zu:hover{background:rgba(20,18,15,.14)}
.vs-zu svg{width:16px;height:16px;stroke:#14120f;stroke-width:1.6;
  stroke-linecap:round;fill:none}
.vs-buehne{flex:1;background:#0d0c0b}
.vs-buehne iframe{width:100%;height:100%;border:0;display:block}
.vs-boden{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:12px 16px;background:#f4f1ec;border-top:1px solid rgba(20,18,15,.12);flex:0 0 auto}
.vs-boden #vsFuss{font-size:.76rem;color:rgba(20,18,15,.55)}
.vs-boden a{display:inline-flex;align-items:center;gap:.5rem;font-size:.76rem;
  font-weight:500;color:#f4f1ec;background:#14120f;padding:10px 18px;border-radius:22px;
  transition:gap .35s var(--e-out)}
.vs-boden a:hover{gap:.8rem}
.vs-boden a i{font-style:normal}
@media(max-width:900px){
  .ref-reihe{grid-template-columns:1fr}
  .ref-buehne{aspect-ratio:16/11}
  .vs-fenster{height:88vh;border-radius:10px}
  .vs-mitte{display:none}
}




/* ══ Helle Sektionen. Schwarz und Gold allein sind die Codes von Luxusuhren;
      der Leser sitzt abends mit dem Handy auf der Couch. Zwei helle Flaechen
      geben der Seite Luft und heben Beweis und Preis heraus. ══ */
.hell{background:#f2ece0;color:#14120f}
.hell h1,.hell h2,.hell h3,.hell h4,.hell b,.hell strong{color:#14120f}
.hell p{color:rgba(20,18,15,.82)}
.hell .meta,.hell .nebenbei{color:rgba(20,18,15,.66)}
.hell .rule{background:linear-gradient(90deg,rgba(20,18,15,.68),rgba(20,18,15,.1) 68%,transparent)}
.hell .num,.hell .z-n{color:rgba(20,18,15,.6)}
.hell a{color:#14120f}
.hell .hair,.hell .zeilen,.hell .drei,.hell .drei article{border-color:rgba(20,18,15,.14)}
.hell .cta{background:#14120f;color:#f2ece0}
.hell .cta::before{background:#332c1c}
.hell .cta-2{background:rgba(20,18,15,.05);color:#14120f;
  box-shadow:inset 0 0 0 1px rgba(20,18,15,.26)}
.hell .cta-2:hover{background:rgba(20,18,15,.09);box-shadow:inset 0 0 0 1px rgba(20,18,15,.5)}
.hell ::selection{background:rgba(20,18,15,.16)}


/* ══ Recruiting-Kapitel. Rechts eine schematische Stellenanzeige mit
     Kurzbewerbung — der zweite Hebel neben den Anfragen. ══ */
.st-raster{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.st-liste{list-style:none;margin-top:1.8rem;display:flex;flex-direction:column;gap:.85rem}
.st-liste li{position:relative;padding-left:1.5rem;font-size:1.1rem;color:var(--t-70);line-height:1.55}
.st-liste li::before{content:'';position:absolute;left:0;top:.62em;width:8px;height:1px;
  background:var(--cream);opacity:.5}
.st-bsp{position:relative;display:flex;flex-direction:column;gap:1rem}
.st-marke{align-self:flex-start;font-size:.64rem;letter-spacing:.19em;text-transform:uppercase;
  font-weight:500;color:var(--t-50);box-shadow:inset 0 0 0 1px rgba(245,239,227,.2);
  padding:6px 11px;border-radius:5px}
.st-karte{border:1px solid rgba(245,239,227,.13);border-radius:4px;
  padding:clamp(1.3rem,2.2vw,1.9rem);background:rgba(245,239,227,.022);
  display:flex;flex-direction:column;gap:1rem}
.st-titel{display:block;font-family:var(--serif);font-size:clamp(1.15rem,1.6vw,1.4rem);
  line-height:1.2;margin-bottom:.4rem}
.st-ort{font-size:.78rem;letter-spacing:.06em;color:var(--t-50)}
.st-fakten{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;
  padding:1.1rem 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.st-fakten b{display:block;font-family:var(--serif);font-weight:400;font-size:1.02rem;
  color:var(--cream);margin-bottom:.2rem}
.st-fakten span{font-size:.7rem;line-height:1.35;color:var(--t-50)}
.st-feld{display:flex;flex-direction:column;gap:.4rem}
.st-feld label{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--t-50)}
.st-feld i{display:block;height:34px;border:1px solid var(--hair);border-radius:2px;
  background:rgba(245,239,227,.03)}
.st-feld i.hoch{height:56px}
.st-knopf{align-self:flex-start;margin-top:.4rem;font-size:.68rem;letter-spacing:.13em;
  text-transform:uppercase;font-weight:500;color:var(--ink);background:var(--cream);
  padding:12px 20px;border-radius:8px}
.st-hinweis{font-size:.72rem;color:var(--t-30);line-height:1.4}
/* Auf hellem Grund: Text und Aufzaehlung dunkel, die Beispielkarte bleibt
   ein dunkler Bildschirm — sonst verliert sie ihre Wirkung. */
.hell .st-liste li{color:rgba(20,18,15,.82)}
.hell .st-liste li::before{background:#14120f;opacity:.45}
.hell .st-marke{color:rgba(20,18,15,.6);box-shadow:inset 0 0 0 1px rgba(20,18,15,.24)}
.hell .st-karte{background:#14120f;border-color:transparent;
  box-shadow:0 28px 56px -34px rgba(20,18,15,.6)}
.hell .st-karte .st-titel{color:var(--cream)}
.hell .st-karte .st-ort,.hell .st-karte .st-feld label{color:rgba(245,239,227,.6)}
.hell .st-karte .st-fakten{border-color:rgba(245,239,227,.12)}
.hell .st-karte .st-fakten b{color:var(--cream)}
.hell .st-karte .st-fakten span{color:rgba(245,239,227,.55)}
.hell .st-karte .st-feld i{border-color:rgba(245,239,227,.16);background:rgba(245,239,227,.04)}
.hell .st-karte .st-knopf{background:var(--cream);color:#14120f}
.hell .st-karte .st-hinweis{color:rgba(245,239,227,.42)}
@media(max-width:900px){.st-raster{grid-template-columns:1fr;gap:2.4rem}}

/* ══ Preis-Kapitel. Der Betrag steht gross und allein, die vier Fragen
     darunter im Zweisatz. Die Garantie bekommt eine eigene Flaeche —
     bisher versteckte sie sich in Schritt 02 des Ablaufs. ══ */
.preis-satz{font-family:var(--serif);font-weight:300;font-size:clamp(1.5rem,3.2vw,2.7rem);
  line-height:1.2;letter-spacing:-.014em;max-width:26ch;color:#14120f;
  padding-bottom:clamp(2rem,3.4vw,2.8rem);border-bottom:1px solid rgba(20,18,15,.14)}
.preis-satz b{font-weight:400;color:#14120f}
.preis-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.8rem,3.4vw,3.2rem);padding:clamp(2rem,3.4vw,2.8rem) 0}
.preis-punkt h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.1rem,1.5vw,1.35rem);
  line-height:1.25;margin-bottom:.7rem}
.preis-punkt p{font-size:1.1rem;max-width:42ch}
.garantie{position:relative;margin-top:clamp(.6rem,1.4vw,1.2rem);
  background:#14120f;color:var(--cream);border-radius:6px;
  padding:clamp(1.8rem,3.4vw,3rem)}
.gar-marke{display:inline-block;font-size:.64rem;letter-spacing:.19em;text-transform:uppercase;
  font-weight:500;color:rgba(245,239,227,.6);margin-bottom:1.2rem}
.gar-satz{font-family:var(--serif);font-weight:300;font-size:clamp(1.5rem,3.1vw,2.5rem);
  line-height:1.16;letter-spacing:-.014em;max-width:22ch;color:var(--cream)!important;
  margin-bottom:1.2rem}
.gar-text{font-size:1.12rem;max-width:48ch;color:var(--t-70)!important}
.hell .garantie .cta{background:var(--cream);color:#14120f}
.hell .garantie .cta::before{background:#fff}
.hell .garantie .cta-2{background:rgba(245,239,227,.09);color:var(--cream);
  box-shadow:inset 0 0 0 1px rgba(245,239,227,.28)}
.hell .garantie .cta-2:hover{background:rgba(245,239,227,.17);
  box-shadow:inset 0 0 0 1px rgba(245,239,227,.55)}
@media(max-width:820px){.preis-raster{grid-template-columns:1fr}}

/* ══ Haeufige Fragen. Native details-Elemente: funktionieren auch ohne JS,
     sind mit der Tastatur bedienbar und brauchen keinen Umbau. ══ */
.fq{border-top:1px solid var(--hair)}
.fq-p{border-bottom:1px solid var(--hair)}
.fq-p summary{display:flex;align-items:flex-start;justify-content:space-between;gap:1.4rem;
  padding:clamp(1.15rem,1.8vw,1.5rem) 0;cursor:pointer;list-style:none;
  font-family:var(--serif);font-weight:400;font-size:clamp(1.12rem,1.7vw,1.5rem);
  line-height:1.26;letter-spacing:-.008em;transition:color .35s var(--e-io)}
.fq-p summary::-webkit-details-marker{display:none}
.fq-p summary:hover{color:var(--cream)}
.fq-p summary span{max-width:32ch}
/* Plus, das beim Aufklappen zum Minus wird */
.fq-p summary i{position:relative;flex:0 0 15px;height:15px;margin-top:.45em}
.fq-p summary i::before,.fq-p summary i::after{content:'';position:absolute;
  background:rgba(245,239,227,.55);transition:transform .4s var(--e-out),background .35s}
.fq-p summary i::before{left:0;right:0;top:7px;height:1px}
.fq-p summary i::after{top:0;bottom:0;left:7px;width:1px}
.fq-p summary i{transition:transform .5s var(--e-out)}
.fq-p[open] summary i{transform:rotate(90deg)}
.fq-p[open] summary i::after{transform:scaleY(0)}
.fq-p[open] summary{color:var(--cream)}
.fq-p[open] summary i::before,.fq-p[open] summary i::after{background:var(--cream)}
.fq-a{padding:0 0 clamp(1.3rem,2vw,1.8rem);max-width:56ch}
/* Waehrend der Bewegung wird die Hoehe gefahren, deshalb hier abschneiden. */
.fq-p .fq-a{overflow:hidden;will-change:height}
.fq-a p{font-size:1.12rem}
@media(max-width:640px){
  .fq-p summary span{max-width:none}
  .fq-p summary{padding:1.3rem 0;gap:1rem}
  .fq-p summary i{margin-top:.35em}
}

/* ── Sektionen: drei Abstandsstufen, wechselnder Grundton ── */
section{position:relative;z-index:3}
.zaesur{padding:clamp(68px,7.6vw,116px) 0}
.abschnitt{padding:clamp(56px,5.6vw,86px) 0}
/* Der schwebende Kopf ist rund 110px hoch. Ohne diese Reserve schneidet er
   beim Sprung auf einen Anker die erste Zeile der Ueberschrift an. */
section{scroll-margin-top:132px}
@media(max-width:960px){section{scroll-margin-top:92px}}
.tone-2{background:var(--ink-2)}
.tone-3{background:var(--ink-3)}
.kopf{margin-bottom:clamp(2rem,3.4vw,3.1rem)}
.kopf p{margin-top:1.4rem}
.rule{display:block;height:1px;width:0;transform-origin:left;margin-bottom:1.7rem;
  background:linear-gradient(90deg,rgba(245,239,227,.6),rgba(245,239,227,.1) 68%,transparent)}

/* ── Zeilenliste statt Karten ── */
.zeilen{position:relative;border-top:1px solid var(--hair)}
/* Klemmenschiene: eine Ader laeuft senkrecht durch die Liste und bekommt
   beim Scrollen Spannung. Jede Zeile haengt mit einer Klemme daran. */
.z-schiene{position:absolute;left:15px;top:0;bottom:0;width:1px;
  background:rgba(245,239,227,.10);pointer-events:none}
.z-schiene i{position:absolute;left:0;top:0;width:1px;height:0;display:block;
  background:linear-gradient(180deg,rgba(201,177,131,.18),var(--gold) 38%,var(--gold-hi));
  box-shadow:0 0 9px rgba(201,177,131,.55),0 0 26px rgba(201,177,131,.18)}
.zeile{position:relative;display:grid;grid-template-columns:30px 58px 1fr;gap:clamp(.8rem,2.2vw,2rem);
  padding:clamp(1.6rem,2.6vw,2.4rem) clamp(.6rem,1.4vw,1.4rem) clamp(1.6rem,2.6vw,2.4rem) 0;
  border-bottom:1px solid var(--hair);align-items:start}
/* Licht kommt aus der Klemme, kein Kastenverlauf ueber die ganze Zeile */
.zeile::before{content:'';position:absolute;left:-14px;top:0;bottom:0;width:52%;
  opacity:0;pointer-events:none;
  background:radial-gradient(150px 96% at 30px 50%,rgba(201,177,131,.11),transparent 72%);
  transition:opacity .55s var(--e-io)}
.zeile:hover::before{opacity:1}
/* Die Trennlinie darunter wird beim Ueberfahren von links her gezogen */
.zeile::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  pointer-events:none;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--gold),rgba(201,177,131,.10) 74%,transparent);
  transition:transform .8s var(--e-out)}
.zeile:hover::after{transform:scaleX(1)}
.zeile>*{position:relative}
/* Klemme: kleiner Klemmkoerper auf der Ader, Kontrollpunkt in der Mitte */
.z-kl{width:11px;height:11px;margin:.9rem 0 0 9.5px;border-radius:2px;
  border:1px solid rgba(245,239,227,.20);background:var(--ink);
  transition:border-color .55s var(--e-io),box-shadow .6s var(--e-io)}
.z-kl::after{content:'';position:absolute;inset:3px;border-radius:50%;
  background:rgba(245,239,227,.18);
  transition:background .55s var(--e-io),box-shadow .6s var(--e-io)}
.zeile.geladen .z-kl{border-color:rgba(201,177,131,.5)}
.zeile.geladen .z-kl::after{background:var(--gold);box-shadow:0 0 7px rgba(201,177,131,.75)}
.zeile:hover .z-kl{border-color:var(--gold-hi);box-shadow:0 0 0 4px rgba(201,177,131,.06)}
.zeile:hover .z-kl::after{background:var(--gold-hi);
  box-shadow:0 0 13px 2px rgba(236,222,194,.7),0 0 34px 6px rgba(201,177,131,.22)}
/* Zahl in der Serif, ruhig, wird beim Ueberfahren heller */
.z-n{font-family:var(--serif);font-weight:300;font-size:clamp(1.5rem,2.4vw,2.1rem);
  line-height:1;letter-spacing:0;color:var(--cream);opacity:.4;padding-top:.34rem;
  transition:opacity .5s var(--e-io),color .5s var(--e-io)}
.zeile.geladen .z-n{opacity:.6}
.zeile:hover .z-n{opacity:1;color:var(--cream)}
/* ── Markenzeichen. Nach dem Logo gebaut: schwarze Platte, doppelte feine Kontur,
      Zeichnung in Creme, ein Element in Gold. Kein Fremdkoerper-Icon. ── */
.z-mid{display:flex;flex-direction:column;gap:.6rem}
.mk{display:block;width:40px;height:40px;
  transition:transform .6s var(--e-out)}
.mk svg{width:40px;height:40px;display:block;overflow:visible}
.mk .rahmen{fill:rgba(245,239,227,.03);stroke:rgba(201,177,131,.32);stroke-width:1.1;
  transition:stroke .5s var(--e-io),fill .5s var(--e-io)}
.mk .g{fill:none;stroke:rgba(245,239,227,.5);stroke-width:1.3;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .5s var(--e-io)}
.mk .gf{fill:rgba(245,239,227,.4);stroke:none;transition:fill .5s var(--e-io)}
.mk .akz{stroke:rgba(201,177,131,.85);stroke-width:1.6}
.mk .akzf{fill:rgba(201,177,131,.8)}
.zeile.geladen .mk .rahmen{stroke:rgba(201,177,131,.42)}
.zeile:hover .mk{transform:translateY(-2px)}
.zeile:hover .mk .rahmen{stroke:rgba(236,222,194,.6);fill:rgba(201,177,131,.07)}
.zeile:hover .mk .g{stroke:var(--cream)}
.zeile:hover .mk .gf{fill:var(--cream)}
.zeile:hover .mk .akz{stroke:var(--gold-hi)}
.zeile:hover .mk .akzf{fill:var(--gold-hi)}
.z-t{transition:transform .6s var(--e-out)}
.zeile:hover .z-t{transform:translateX(5px)}
.z-t{font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,2vw,1.85rem);
  line-height:1.16;margin-bottom:.7rem;letter-spacing:-.01em}
.zeile p{font-size:1.12rem;max-width:50ch}
.z-zeit{display:inline-block;margin-top:1rem;font-size:.78rem;letter-spacing:.09em;color:var(--t-50)}
.z-zeit b{color:var(--cream);font-weight:500}
@media(max-width:640px){
  .zeile{grid-template-columns:30px 1fr;gap:.5rem 1rem;align-items:start;
    padding-top:1.35rem;padding-bottom:1.35rem}
  .z-mid{grid-column:2;flex-direction:row;align-items:center;gap:.9rem;margin-bottom:-.2rem}
  .z-n{padding-top:0;font-size:1.5rem}
  .mk,.mk svg{width:32px;height:32px}
  .z-kl{grid-row:1 / span 2;margin-top:.55rem}
  .zeile>div:last-child{grid-column:2}
}

/* Drei Gruende. Untereinander, jeder mit einer riesigen Ziffer,
   die beim Scrollen an ihm vorbeizieht. Keine Kartenreihe, kein Raster. */
.drei{border-top:1px solid var(--hair)}
.drei article{position:relative;display:grid;
  grid-template-columns:clamp(120px,16vw,220px) minmax(0,1fr);
  gap:clamp(1.4rem,4vw,4.4rem);align-items:center;
  padding:clamp(2.2rem,4vw,3.8rem) 0;border-bottom:1px solid var(--hair);overflow:hidden}
.d-n{display:block;font-family:var(--serif);font-weight:300;font-variant-numeric:tabular-nums;
  font-size:clamp(4.4rem,11vw,10rem);line-height:.8;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1px rgba(245,239,227,.3);
  user-select:none;
  transition:color .9s var(--e-out),-webkit-text-stroke-color .9s var(--e-out)}
.drei article.on .d-n{color:rgba(245,239,227,.07);-webkit-text-stroke-color:rgba(245,239,227,.62)}
.d-t{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,3vw,2.7rem);
  line-height:1.1;letter-spacing:-.014em;margin-bottom:1rem}
.drei p{font-size:1.14rem;max-width:50ch}
.drei .d-t{max-width:20ch}
.d-mark{position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--gold);z-index:1;
  grid-area:1/1;
  transform:scaleY(0);transform-origin:top;transition:transform 1s var(--e-out)}
.drei article.on .d-mark{transform:scaleY(1)}
@media(max-width:760px){
  .drei article{grid-template-columns:1fr;gap:.4rem;padding:2.6rem 0}
  .drei article>.d-mark{position:absolute}
  .d-n{font-size:clamp(3.4rem,17vw,5rem);margin-bottom:.6rem}
  .drei p{max-width:none}
}
.nebenbei{margin-top:clamp(2.2rem,4vw,3.4rem);padding-top:1.6rem;border-top:1px solid var(--hair);
  max-width:58ch;font-size:1.08rem;color:var(--t-50)}
/* alte zweispaltige Liste (nicht mehr benutzt) */
.leist{display:grid;grid-template-columns:repeat(2,1fr);column-gap:clamp(2rem,5vw,5rem);
  border-top:1px solid var(--hair)}
.leist div{padding:1.35rem 0;border-bottom:1px solid var(--hair);font-size:.99rem;color:var(--t-70)}
.leist div b{display:block;color:var(--cream);font-weight:500;margin-bottom:.28rem;font-size:1.02rem}
@media(max-width:760px){.leist{grid-template-columns:1fr}}

/* ── Zaesur-Zitat ── */
.satz{font-family:var(--serif);font-weight:300;font-size:clamp(1.8rem,4.2vw,3.6rem);
  line-height:1.16;letter-spacing:-.018em;max-width:18ch;color:var(--cream)}
.satz em{font-style:normal;color:var(--cream)}
.satz-quelle{margin-top:2.2rem;font-size:.8rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--t-30)}

/* ── Wer ── */
.wer{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:center}
figure.wer-bild img{border-radius:0}
.wer-bild figcaption{margin-top:.9rem;font-size:.72rem;letter-spacing:.06em;color:var(--t-30)}
.wer p{margin-bottom:1.15rem}
@media(max-width:900px){.wer{grid-template-columns:1fr}.wer-bild{max-width:400px}}

/* ── Kontakt ── */
.k{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2.4rem,6vw,6rem)}
.k-tel{display:block;font-family:var(--serif);font-size:clamp(2rem,4.2vw,3.4rem);
  line-height:1.05;margin:1.8rem 0 .6rem;transition:color .3s}
.k-tel:hover{color:var(--gold-hi)}
.k-mail{font-size:.95rem;color:var(--t-50);border-bottom:1px solid var(--hair)}
.k-mail:hover{color:var(--gold-hi)}
form{display:flex;flex-direction:column;gap:1.15rem}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem}
.fg{display:flex;flex-direction:column;gap:.55rem}
label{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--t-50)}
input,select,textarea{background:rgba(245,239,227,.03);border:1px solid var(--hair);
  border-radius:2px;color:var(--cream);font-family:var(--sans);font-size:.95rem;
  padding:14px 15px;transition:border-color .3s,background .3s}
input:focus,select:focus,textarea:focus{outline:none;border-color:rgba(201,177,131,.5);
  background:rgba(245,239,227,.05)}
textarea{resize:vertical;min-height:104px}
input::placeholder,textarea::placeholder{color:var(--t-50);opacity:1}
#kStatus{font-size:.88rem;color:var(--gold-hi)}
@media(max-width:820px){.k,.fr{grid-template-columns:1fr}}

/* ── Fuss als eigenes Kapitel ── */
footer{border-top:1px solid var(--hair);padding:clamp(2.8rem,4.4vw,4rem) 0 2.4rem;
  position:relative;z-index:3}
.f-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(2rem,5vw,4rem);
  padding-bottom:clamp(2.6rem,5vw,4rem)}
.f-top img{width:clamp(140px,15vw,190px);opacity:.9;margin-bottom:1.4rem}
.f-satz{font-family:var(--serif);font-size:clamp(1.15rem,1.6vw,1.5rem);line-height:1.32;
  color:var(--t-70);max-width:22ch}
.f-col h4{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--t-30);
  margin-bottom:1.2rem;font-weight:500;font-family:var(--sans)}
.f-col a,.f-col span{display:block;font-size:.96rem;color:var(--t-70);margin-bottom:.62rem;
  transition:color .3s}
.f-col a:hover{color:var(--gold-hi)}
.f-bot{border-top:1px solid var(--hair);padding-top:1.7rem;display:flex;
  justify-content:space-between;gap:1.4rem;flex-wrap:wrap;font-size:.82rem;color:var(--t-30)}
.f-bot a:hover{color:var(--gold-hi)}
@media(max-width:820px){.f-top{grid-template-columns:1fr 1fr}.f-top>:first-child{grid-column:1/-1}}



/* ── Kleine Spielereien aus der Elektrowelt. Eine pro Kapitel. ── */
.spiel{position:absolute;pointer-events:none;z-index:2}
.spiel svg{width:100%;height:auto;overflow:visible;display:block}
.spiel .l{fill:none;stroke:rgba(245,239,227,.20);stroke-width:1.3;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke 1.4s var(--e-out)}
.spiel.an .l{stroke:rgba(236,222,194,.52)}
.spiel .fl{fill:rgba(201,177,131,.06);transition:fill 1.4s var(--e-out)}
.spiel.an .fl{fill:rgba(201,177,131,.15)}
.spiel .warm{opacity:0;transition:opacity 1.7s var(--e-out)}
.spiel.an .warm{opacity:1}
.spiel .kabel{stroke:rgba(201,177,131,.5);stroke-width:1.6;fill:none;stroke-linecap:round}

/* Steckdose, rechts unten im Leistungs-Kapitel */
.spiel.dose{right:clamp(16px,5vw,90px);bottom:clamp(24px,6vh,80px);width:clamp(170px,20vw,330px)}
/* Haus auf Steckerstiften, links unten beim Ablauf */
.spiel.haus{right:clamp(20px,6vw,110px);bottom:clamp(8px,2vh,26px);width:clamp(120px,13vw,200px)}
@media(max-width:900px){
  .spiel.dose{width:130px;right:8px;bottom:14px;opacity:.55}
  .spiel.dose .kabel{display:none}
  .spiel.haus{width:104px;right:10px;bottom:14px;opacity:.5}
}


/* ══ Elektro-Szenen. Eine pro Kapitel, alle scrollgesteuert. ══ */
.szene{position:absolute;pointer-events:none;z-index:2}
.szene svg{width:100%;height:auto;overflow:visible;display:block}
.l{fill:none;stroke:rgba(245,239,227,.22);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.lf{fill:rgba(201,177,131,.05);stroke:rgba(245,239,227,.22);stroke-width:1.4;
  stroke-linejoin:round;transition:fill 1.2s var(--e-out)}
.an .lf{fill:rgba(201,177,131,.13)}
.gluht{opacity:0;transition:opacity 1.4s var(--e-out)}
.an .gluht{opacity:1}
.szene.birne .gluehfaden{transition:stroke .9s var(--e-out)}
.szene.birne .flacker{mix-blend-mode:screen}
.fliess{stroke:#ffeec4;stroke-width:2.6;stroke-linecap:round;fill:none;
  filter:drop-shadow(0 0 7px rgba(255,238,196,.95))}

/* ── Foto der fertigen PV-Anlage, rechte Ecke im Ablauf-Kapitel.
      Der Verlauf ist als Alphakanal ins Bild eingebrannt, kein Overlay.
      Deshalb gibt es keine Kante, egal was darunter liegt. ── */
.dach{position:absolute;right:0;top:0;width:min(62%,1000px);
  z-index:1;pointer-events:none;margin:0}
.dach img{display:block;width:100%;height:auto}
@media(max-width:900px){.dach{width:88%;opacity:.5}}


/* ══ Unterverteilung im Kapitel "Der Kunde entscheidet". Hauptklemme, FI,
      vier Automaten auf der Kammschiene. Von jedem Automaten laeuft eine Ader
      nach links und unterstreicht die Zeile, die er schaltet. ══ */
#problem .main{position:relative}
.uv{position:absolute;right:0;top:0;width:clamp(232px,23vw,332px);z-index:2;pointer-events:none}
.uv svg{width:100%;height:auto;display:block;overflow:visible}
.uv .box{fill:rgba(201,177,131,.02);stroke:rgba(245,239,227,.2);stroke-width:1.6}
.uv .haube{fill:none;stroke:rgba(245,239,227,.09);stroke-width:1.2}
.uv .schraube{fill:none;stroke:rgba(245,239,227,.13);stroke-width:1.1}
.uv .schlitz{fill:rgba(8,8,8,.6);stroke:rgba(245,239,227,.14);stroke-width:1.1}
.uv .streifen{fill:rgba(245,239,227,.055);stroke:rgba(245,239,227,.12);stroke-width:.9}
.uv .stift{fill:rgba(201,177,131,.55);font:500 7px var(--sans);letter-spacing:.04em;
  text-anchor:middle;transition:fill .6s var(--e-out)}
.uv .front{fill:rgba(245,239,227,.05);stroke:rgba(245,239,227,.17);stroke-width:.9}
.uv .blind{fill:rgba(245,239,227,.025);stroke:rgba(245,239,227,.12);stroke-width:.9}
.uv .raster{fill:none;stroke:rgba(245,239,227,.11);stroke-width:.8}
.uv .taste{fill:rgba(201,177,131,.16);stroke:rgba(245,239,227,.2);stroke-width:.9}
.uv .hebel{fill:rgba(201,177,131,.15);stroke:rgba(245,239,227,.24);stroke-width:.9;
  transition:fill .7s var(--e-out)}
.uv .ein .hebel,.uv.an .hs{fill:rgba(236,222,194,.5)}
.uv .stift.ein{fill:rgba(236,222,194,.85)}
.uv .einf{fill:none;stroke:rgba(245,239,227,.16);stroke-width:1}
/* Adern von der Verteilung zu den Zeilen. Werden zur Laufzeit gerechnet,
   damit sie immer an der Zeile sitzen und niemals durch Text laufen. */
.uv-adern{position:absolute;inset:0;width:100%;height:100%;z-index:0;
  pointer-events:none;overflow:visible}
.uv-adern .ader{fill:none;stroke:rgba(201,177,131,.3);stroke-width:1.15;stroke-linecap:round}
.uv-adern .ader-hell{fill:none;stroke:var(--gold-hi);stroke-width:1.7;stroke-linecap:round;
  filter:drop-shadow(0 0 7px rgba(236,222,194,.45))}
@media(max-width:880px){
  /* Der Verteiler steht am Handy im Fluss, unter der Ueberschrift.
     Reihenfolge per flex, damit die Ueberschrift zuerst kommt. */
  #problem .main{display:flex;flex-direction:column}
  #problem .kopf{order:1}
  .uv{order:2;position:static;width:min(340px,100%);margin:0 0 clamp(1.8rem,5vw,2.6rem)}
  #problem .zeilen{order:3}
  /* Die Adern verbinden Automat und Zeile seitlich — dafuer ist kein Platz. */
  .uv-adern{display:none}
}

/* ── LED-Leiste: laeuft senkrecht durch das Leistungs-Kapitel ── */
.ledbalken{position:absolute;right:0;top:0;bottom:0;width:10px;z-index:1;pointer-events:none;overflow:visible}
.ledbalken .rohr{position:absolute;right:3px;top:0;bottom:0;width:3px;border-radius:3px;
  background:rgba(245,239,227,.07)}
.ledbalken .licht{position:absolute;right:3px;bottom:0;width:3px;border-radius:3px;height:0;
  background:linear-gradient(0deg,#c9b183,#ffeec4 55%,#fff8e6);
  box-shadow:0 0 12px 2px rgba(255,238,196,.55),0 0 42px 10px rgba(201,177,131,.28)}
.ledbalken .schein{position:absolute;right:0;bottom:0;width:78vw;max-width:900px;height:0;
  pointer-events:none;
  background:linear-gradient(270deg,rgba(255,238,196,.13),rgba(201,177,131,.05) 34%,transparent 72%)}
.szene.dose{right:clamp(-6px,-0.4vw,0px);bottom:clamp(20px,5vh,64px);width:clamp(230px,27vw,450px)}
.szene.haus{right:clamp(16px,5vw,86px);bottom:clamp(14px,3.5vh,46px);width:clamp(240px,27vw,470px)}
.szene.birne{right:clamp(8px,2.6vw,52px);bottom:clamp(-96px,-6vw,-44px);
  width:clamp(82px,8vw,126px);z-index:3}
/* Verteiler im Kapitel "Wer das baut", Klingel im Kontakt-Kapitel.
   Beide sitzen links unten, wo die Textspalte schon aufgehoert hat. */
.szene.plan{left:clamp(12px,5vw,84px);bottom:clamp(10px,3vh,44px);width:clamp(190px,21vw,340px)}
.szene.klingel{left:clamp(12px,5vw,84px);bottom:clamp(10px,3vh,40px);width:clamp(160px,17vw,290px)}
.szene .schall{opacity:0}
.szene.plan .netz{fill:none;stroke:rgba(245,239,227,.05);stroke-width:1}
.szene.plan .kl{fill:none;stroke:rgba(245,239,227,.24);stroke-width:1.5;
  stroke-linecap:round;transition:stroke 1.1s var(--e-out)}
.szene.plan .kn{fill:rgba(245,239,227,.3);transition:fill 1.1s var(--e-out)}
.szene.plan text{fill:rgba(201,177,131,.45);font:300 13px var(--serif);letter-spacing:.06em}
.szene.plan .lampe-schein{opacity:0;mix-blend-mode:screen;transition:opacity 1.3s var(--e-out)}
.szene.plan.an .lampe-schein{opacity:1}
.szene.plan.an .lampe{stroke:rgba(255,244,218,.85)}
.szene.plan.an .kn{fill:rgba(236,222,194,.6)}
@media(max-width:900px){
  .szene.dose{width:200px;right:-8px;bottom:10px;opacity:.75}
  .szene.haus{width:180px;right:-6px;bottom:10px;opacity:.7}
  .szene.birne{width:76px;right:6px;bottom:-30px;opacity:.6}
  .szene.plan{width:150px;left:4px;bottom:8px;opacity:.5}
  .szene.klingel{width:124px;left:4px;bottom:8px;opacity:.5}
  .ledbalken .schein{width:100vw}
}

/* ── Stehlampe unten rechts. Der Schirm haengt am Bogen nach links,
      der Strahl schwenkt beim Scrollen auf den Text. ── */
.leuchte{position:absolute;right:clamp(18px,5vw,86px);bottom:clamp(10px,4vh,54px);
  width:clamp(150px,17vw,270px);pointer-events:none;z-index:3}
.leuchte svg{width:100%;height:auto;overflow:visible;display:block}
.leuchte .draht{fill:none;stroke:rgba(245,239,227,.20);stroke-width:1.3;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke 1.8s var(--e-out)}
.leuchte.an .draht{stroke:rgba(236,222,194,.55)}
.leuchte .schirm{fill:transparent;transition:fill 1.8s var(--e-out)}
.leuchte.an .schirm{fill:rgba(201,177,131,.16)}
.leuchte .birne{fill:#ecdec2;opacity:0;transition:opacity 1.5s var(--e-out)}
.leuchte.an .birne{opacity:1;filter:drop-shadow(0 0 14px rgba(253,241,216,1))}

/* Der Strahl liegt ueber der ganzen Sektion und dreht sich zum Text hin */
.leuchte .kegel{opacity:0}
.leuchte .halo{opacity:0;transition:opacity 1.9s var(--e-out)}
.leuchte.an .halo{opacity:1}
.leuchte .gelenk{fill:#0b0b0a}
.leuchte .oeffnung{fill:rgba(201,177,131,.10)}
.leuchte.an .oeffnung{fill:rgba(253,241,216,.30)}
@media(max-width:820px){
  .leuchte{width:96px;right:4px}
  .satz-quelle{max-width:15ch}
}


.wr w{display:inline-block;transform-origin:left bottom}
/* Greift die Wache, ist jede Bewegung aus und aller Inhalt sichtbar. */
.keine-bewegung .wr w,.keine-bewegung [data-rev],
.keine-bewegung .hero-foto,.keine-bewegung .hero-foto img,
.keine-bewegung .hero-in .lm>span{
  opacity:1!important;transform:none!important;filter:none!important}
.keine-bewegung .rule{width:clamp(72px,13vw,190px)!important}
.keine-bewegung .d-mark{transform:scaleY(1)!important}
.keine-bewegung .spiel .l,.keine-bewegung .leuchte .draht{stroke:rgba(236,222,194,.52)}
.keine-bewegung .spiel .warm,.keine-bewegung .leuchte .birne,
.keine-bewegung .leuchte .halo{opacity:1}
.keine-bewegung .drei article .d-n{color:rgba(201,177,131,.10);
  -webkit-text-stroke-color:rgba(236,222,194,.85)}

@media(max-width:900px){
  #grain{display:none}
  /* Weichzeichner am Handy sparsam: die Glasscheibe im Kopf bleibt, der Rest geht. */
  .vs-hg{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(6,6,6,.9)}
  .uv-adern .ader-hell{filter:none}
}
@media(prefers-reduced-motion:reduce){
  .wr w{opacity:1!important;transform:none!important;filter:none!important}
  #wire,#nodes,#grain{display:none}
  /* Ohne Bewegung liefen die Grafiken vorher nie an und blieben nackte Drahtgitter. */
  .rule{width:clamp(72px,13vw,190px)!important}
  .d-mark{transform:scaleY(1)!important}
  .spiel .l,.leuchte .draht{stroke:rgba(236,222,194,.52)}
  .spiel .warm,.leuchte .birne,.leuchte .halo,.leuchte .kegel{opacity:1}
  .leuchte .schirm,.spiel .fl{fill:rgba(201,177,131,.16)}
  .drei article .d-n{color:rgba(201,177,131,.10);-webkit-text-stroke-color:rgba(236,222,194,.85)}
  *{animation:none!important;transition-duration:.01ms!important}
}

/* ── Umbrueche: Mail und Telefonnummer bleiben in einer Zeile ── */
.k-mail,footer a[href^="mailto:"]{white-space:nowrap;word-break:normal;overflow-wrap:normal;
  font-size:clamp(.82rem,3.4vw,1rem)}
.cta span,.cta-2 span,.k-tel,.nav-tel{white-space:nowrap}
@media(max-width:520px){
  .garantie .hero-act .cta span{font-size:clamp(.62rem,3.1vw,.72rem)}
  .garantie .hero-act .cta,.garantie .hero-act .cta-2{padding-inline:16px}
}