/* ============================================================
   JUNKER IMMOBILIEN — Design-System "Blueprint"
   Farbwelt aus dem Logo (#B08D2E / #C9A84C) und abgestimmt auf
   dealpilot.immo. Warmes Papier, Bauzeichnungs-Linien,
   Gold als Akzent, dunkle Sektionen als Anker.
   ============================================================ */

:root{
  /* Flächen */
  --pp:#F5F2EA;      /* Papier */
  --pp2:#EBE6DA;     /* Papier dunkler */
  --cd:#FFFFFF;      /* Karte */
  /* Schrift */
  --ink:#14120E;
  --ink2:#3b362c;
  --mut:#7d7565;
  /* Gold — aus dem Logo */
  --gd:#B08D2E;
  --gdh:#C9A84C;
  --gdl:#E8CC7A;
  --gdi:#7d611a;
  /* Dunkel */
  --dk:#0d0c0a;
  --dk2:#15130f;
  /* Linien */
  --ln:rgba(20,18,14,.13);
  --lnl:rgba(20,18,14,.07);
  /* ---------- Schriften ----------
     Jede Kette nennt hinter der Wunschschrift ausdruecklich, was auf
     Windows, macOS und Android an ihre Stelle treten soll. Das ist kein
     Beiwerk: Ohne diese Namen entscheidet der Browser selbst, und auf
     Windows landet man dann schnell bei Times New Roman — die Seite
     saehe aus wie ein Behoerdenschreiben, sobald Google einmal langsam
     ist oder der Besucher fremde Verbindungen blockiert.

     Mit der Kette faellt die Seite auf die gute Systemschrift des
     jeweiligen Geraets zurueck: Segoe UI auf Windows, SF Pro auf Apple,
     Roboto auf Android. Der Unterschied faellt kaum auf. */
  --disp:'Space Grotesk','Segoe UI Variable Display','Segoe UI',
         system-ui,-apple-system,Roboto,'Helvetica Neue',Arial,sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,
         'Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,'Cascadia Mono',
         'Segoe UI Mono',Consolas,'Liberation Mono',Menlo,monospace;
  --max:1160px;
  --nav-h:80px;
  --bar-h:36px;
}

/* ---------- Topbar über dem Hero ---------- */
.topbar{background:var(--ink);color:rgba(255,255,255,.58);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--bar-h);gap:20px}
.tb-l{display:flex;align-items:center;gap:9px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-l i{color:var(--gdl);font-style:normal;font-size:8px}
.tb-r{display:flex;align-items:center;gap:22px;white-space:nowrap}
.tb-r a{transition:color .2s}
.tb-r a:hover{color:var(--gdl)}
.tb-dp{display:inline-flex;align-items:center;gap:9px;height:calc(var(--bar-h) - 10px);padding:0 14px;
  background:linear-gradient(110deg,#E8CC7A,#C9A84C 55%,#b8932f);color:#2a2205!important;
  font-weight:700;letter-spacing:.13em;position:relative;overflow:hidden;border-radius:2px}
.tb-dp span{position:relative;z-index:2;display:inline-flex;align-items:center;gap:8px}
.tb-dp::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(110deg,transparent 18%,rgba(255,255,255,.6) 50%,transparent 82%);
  transform:translateX(-130%);transition:transform .75s cubic-bezier(.3,.7,.3,1)}
.tb-dp:hover::after{transform:translateX(130%)}
.tb-dp .dot{width:5px;height:5px;border-radius:50%;background:#2a2205;opacity:.5}
.tb-pre{font-style:normal}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--pp);color:var(--ink2);font-family:var(--body);font-size:16.5px;line-height:1.68;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
[id]{scroll-margin-top:calc(var(--nav-h) + var(--bar-h) + 20px)}

.wrap{max-width:var(--max);margin:0 auto;padding:0 26px}
section{padding:104px 0;position:relative}
section.tight{padding:72px 0}

h1,h2,h3,h4{font-family:var(--disp);font-weight:600;line-height:1.1;letter-spacing:-.025em;color:var(--ink);hyphens:auto}
h1{font-size:clamp(29px,5.4vw,64px);letter-spacing:-.035em}
h2{font-size:clamp(26px,4.4vw,50px)}
h3{font-size:22px}
.g{color:var(--gd)}
.kick{font-family:var(--mono);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gdi);margin-bottom:20px;display:flex;align-items:center;gap:11px}
.kick::before{content:"";width:24px;height:1px;background:var(--gd);flex:none}
.lead{font-size:clamp(16.5px,1.5vw,18.5px);max-width:62ch}
.muted{color:var(--mut)}

/* Bauzeichnungs-Raster */
.bp-bg{position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(176,141,46,.09) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(176,141,46,.09) 1px,transparent 1px);
  background-size:56px 56px}
.bp-bg.fade{-webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent 78%);
            mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent 78%)}
.z{position:relative;z-index:2}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;padding:16px 25px;transition:.22s;border:1px solid transparent;font-weight:500;cursor:pointer}
.btn-p{background:var(--ink);color:var(--gdl)}
.btn-p:hover{background:var(--gd);color:#fff;transform:translateY(-2px)}
.btn-o{border-color:var(--ln);color:var(--ink)}
.btn-o:hover{border-color:var(--gd);color:var(--gd)}
.btn-l{background:var(--gd);color:#fff}
.btn-l:hover{background:var(--gdh);transform:translateY(-2px)}
.btn-d{border-color:rgba(255,255,255,.24);color:#efe9dc}
.btn-d:hover{border-color:var(--gdl);color:var(--gdl)}
.cta{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- Logo ---------- */
/* Zwei Logofassungen liegen uebereinander, sichtbar ist immer genau
   eine. Der Kopf steht auf der Startseite ueber dem dunklen Bild und
   wird beim Scrollen hell (.solid) - eine einzige Datei kann beides
   nicht bedienen. Der frueher benutzte brightness()-Filter hat aus dem
   Gold ein blasses Gelb gemacht. */
/* Das Logo ist eine breite Zeile (Haus links, Schriftzug rechts,
   Verhaeltnis 5,87:1). Bei 40px Hoehe ist es 235px breit - das passt
   neben die Navigation, ohne sie zu draengen. */
.logo{display:flex;align-items:center;gap:12px}
.logo img{height:40px;width:auto;transition:height .3s ease}
.logo .lg-hell{display:none}
body.has-cine header:not(.solid) .logo .lg-dunkel{display:none}
body.has-cine header:not(.solid) .logo .lg-hell{display:block}
/* Auf der Startseite, solange der Kopf ueber dem Bild steht, darf das
   Logo groesser sein - dort ist Platz und es ist der erste Eindruck.
   Sobald der Kopf beim Scrollen zur schmalen Leiste wird, geht es auf
   das normale Mass zurueck. */
body.has-cine header:not(.solid) .logo img{height:54px}
@media(max-width:760px){body.has-cine header:not(.solid) .logo img{height:38px}}
@media(prefers-reduced-motion:reduce){.logo img{transition:none}}

/* Fusszeile: helle Fassung ohne Platte. Die cremefarbene Flaeche
   darunter war nur noetig, weil dort die dunkle Fassung stand - sie sah
   aus wie ein aufgeklebtes Etikett auf dem dunklen Grund. */
.flogo{margin-bottom:16px}
.flogo img{height:52px;width:auto;display:block}
@media(max-width:760px){.flogo img{height:44px}}

/* ---------- Header / Navigation ---------- */
header{position:fixed;inset:0 0 auto 0;z-index:200;transition:background .3s,border-color .3s;border-bottom:1px solid transparent;isolation:isolate}
header.solid{background:rgba(245,242,234,.95);backdrop-filter:blur(12px);border-bottom-color:var(--ln)}
.nav{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);position:relative}
.nav>ul{display:flex;gap:26px;list-style:none;align-items:center;margin-left:auto}
.nav>ul>li{position:relative}
.nav>ul>li>a{font-size:14px;color:var(--ink2);transition:.2s;position:relative;padding:8px 0;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.nav>ul>li>a::after{content:"";position:absolute;left:0;bottom:2px;width:0;height:1.5px;background:var(--gd);transition:width .25s}
.nav>ul>li>a:hover{color:var(--ink)}
.nav>ul>li>a:hover::after{width:100%}
.nav>ul>li.current>a{color:var(--ink);font-weight:500}
.nav>ul>li.current>a::after{width:100%}
.caret{width:8px;height:8px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .25s;opacity:.6}
.has-sub:hover .caret{transform:rotate(225deg) translateY(-3px)}
.nav .sub{position:absolute;top:100%;left:-18px;min-width:236px;background:var(--cd);border:1px solid var(--ln);box-shadow:0 20px 44px -24px rgba(20,18,14,.45);padding:8px;list-style:none;opacity:0;visibility:hidden;transform:translateY(8px);transition:.22s}
.nav .has-sub:hover .sub,.nav .has-sub:focus-within .sub{opacity:1;visibility:visible;transform:none}
.nav .sub a{display:block;padding:11px 14px;font-size:14px;color:var(--ink2);transition:.18s}
.nav .sub a:hover{background:var(--pp2);color:var(--gdi)}
.burger{display:none;background:none;border:1px solid var(--ln);color:var(--ink);width:42px;height:38px;cursor:pointer;font-size:16px}

/* Über dem dunklen Kino-Hero: heller Header. Das Logo steht frei — kein Kasten.
   Damit die dunkle Unterzeile im Logo lesbar bleibt, legt sich ein weicher
   Verlauf hinter den gesamten Kopf; er schließt nahtlos an die Infozeile an,
   sodass oben genau eine Leiste zu sehen ist. */
body.has-cine header::after{content:"";position:absolute;left:0;right:0;top:0;
  height:calc(var(--nav-h) + var(--bar-h) + 34px);z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,9,7,.92) 0%,rgba(10,9,7,.72) 46%,rgba(10,9,7,0) 100%);
  transition:opacity .3s}
body.has-cine header.solid::after{opacity:0}
body.has-cine header:not(.solid) .nav>ul>li>a{color:rgba(255,255,255,.82)}
body.has-cine header:not(.solid) .nav>ul>li>a:hover,
body.has-cine header:not(.solid) .nav>ul>li.current>a{color:#fff}
/* brightness(1.5) ist raus - es hat das Gold ausgebleicht und die dunkle
   Schrift trotzdem nicht lesbar gemacht. Jetzt liegt dort die helle
   Fassung; der Schatten bleibt, damit sie sich vom Bild abhebt. */
body.has-cine header:not(.solid) .logo img{filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
body.has-cine header:not(.solid) .burger{color:#fff;border-color:rgba(255,255,255,.3)}
/* Die Infozeile ist über dem Kino-Hero durchscheinend, damit Kopf und Hero
   als eine Einheit wirken statt als zwei gestapelte Balken. */
body.has-cine header:not(.solid) .topbar{background:transparent}
body.has-cine header:not(.solid) .topbar .wrap{border-bottom:1px solid rgba(255,255,255,.12)}

@media(max-width:1300px){.nav>ul{gap:19px}.nav>ul>li>a{font-size:13.5px}}

/* ---------- Seiten-Hero (Unterseiten) ---------- */
/* Der Seiten-Hero war zu hoch: Auf einem Notebook fuellte er den halben
   Bildschirm, bevor der erste Inhalt kam. Oben bleibt der Abstand fuer
   die feste Kopfzeile, gekuerzt wird der Rest. */
.phero{padding:calc(var(--nav-h) + var(--bar-h) + 30px) 0 34px;border-bottom:1px solid var(--ln);position:relative;overflow:hidden}
.phero .bp-bg{opacity:.7}
.phero-g{display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:center}
.crumb{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut);margin-bottom:18px;display:flex;gap:9px;flex-wrap:wrap}
.crumb a:hover{color:var(--gdi)}
.crumb span{opacity:.45}
.phero h1{margin-bottom:14px;font-size:clamp(29px,3.8vw,46px);line-height:1.07}
/* Im Hero etwas kleiner als im Fliesstext: Auf den ausfuehrlichen Seiten
   (Restnutzungsdauer, Wertgutachten) laeuft der Einleitungstext sonst
   ueber fuenf Zeilen und treibt den Hero wieder auf ueber 650 Pixel. */
.phero .lead{margin-bottom:18px;max-width:58ch;font-size:clamp(15.5px,1.25vw,17px);line-height:1.6}
.phero .crumb{margin-bottom:12px}
/* align-content:start ist der eigentliche Hebel gegen die Hoehe: Ohne ihn
   zieht das Raster seine Zeilen auf die volle Hoehe des Heros auseinander,
   und aus vier Zeilen mit je 50 Pixeln werden vier mit je 110. */
.facts{display:grid;gap:0;align-content:start;border:1px solid var(--ln);background:var(--cd)}
/* Der Nachfahren-Selektor traf auch .k und .v - beides sind divs. Jede
   Zeile bekam dadurch DREIMAL Innenabstand und dreimal eine Trennlinie,
   und aus 60 Pixeln Zeilenhoehe wurden 108. Deshalb hier ausdruecklich
   nur die direkten Kinder. */
.facts>div{padding:11px 18px;border-bottom:1px solid var(--ln)}
.facts>div:last-child{border-bottom:0}
.facts .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut);margin-bottom:4px}
.facts .v{font-family:var(--disp);font-size:16px;color:var(--ink);font-weight:600;line-height:1.25}

/* ---------- Bewegung im Seiten-Hero ----------
   Drei Ebenen laufen dauerhaft im Hintergrund: das Bauraster wandert langsam,
   zwei weiche Goldfelder driften gegeneinander, und alle paar Sekunden zieht
   ein Lichtstreif durch. Darüber blenden Text und Eckdaten gestaffelt ein.
   Wer im System "weniger Bewegung" eingestellt hat, sieht den Hero ruhig. */
.phero{--ph-e:cubic-bezier(.2,.72,.2,1)}
.phero .bp-bg{opacity:.7;animation:phGrid 46s linear infinite;will-change:background-position}

/* Objektfoto im Hero: langsamer Kameraschwenk (Ken Burns), nach links
   vollständig in den Seitenton ausgeblendet, damit der Text ruhig steht. */
.ph-photo{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.ph-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;
  animation:phZoom 34s ease-in-out infinite alternate;will-change:transform}
.ph-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,var(--pp) 0%,var(--pp) 30%,rgba(245,242,234,.88) 45%,
    rgba(245,242,234,.5) 66%,rgba(245,242,234,.3) 100%)}
.phero.hasfoto .bp-bg{opacity:.45}
.phero.hasfoto .facts{background:rgba(252,250,245,.95);backdrop-filter:blur(8px);
  box-shadow:0 30px 70px -50px rgba(20,18,14,.6)}
@media(max-width:900px){
  .ph-photo::after{background:linear-gradient(180deg,rgba(245,242,234,.86) 0%,
    rgba(245,242,234,.93) 45%,var(--pp) 100%)}
}
@keyframes phZoom{from{transform:scale(1.04) translate3d(0,0,0)}
  to{transform:scale(1.16) translate3d(-1.5%,-1.5%,0)}}

.ph-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.ph-fx i{position:absolute;display:block;border-radius:50%;will-change:transform}
.ph-fx .o1{width:52vw;height:52vw;max-width:660px;max-height:660px;left:-10vw;top:-20vw;
  background:radial-gradient(circle,rgba(232,204,122,.42),rgba(232,204,122,0) 68%);
  animation:phDriftA 24s ease-in-out infinite}
.ph-fx .o2{width:42vw;height:42vw;max-width:560px;max-height:560px;right:-9vw;bottom:-24vw;
  background:radial-gradient(circle,rgba(176,141,46,.3),rgba(176,141,46,0) 70%);
  animation:phDriftB 31s ease-in-out infinite}
.ph-fx .ray{width:26%;height:230%;top:-65%;left:-40%;border-radius:0;opacity:0;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.72),rgba(255,255,255,0));
  transform:rotate(15deg);animation:phRay 13s ease-in-out 2.2s infinite}
.ph-fx span{position:absolute;left:0;right:0;height:1px;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,transparent,rgba(176,141,46,.55),transparent)}
.ph-fx .ln1{top:0;animation:phLine 1.4s var(--ph-e) .1s forwards}
.ph-fx .ln2{bottom:0;transform-origin:right;animation:phLine 1.4s var(--ph-e) .3s forwards}
/* Eckwinkel wie auf einer Bauzeichnung — zeichnen sich beim Laden ein */
.ph-fx .ec{position:absolute;width:26px;height:26px;opacity:0;
  border:1px solid rgba(176,141,46,.5);animation:phCorner .7s var(--ph-e) .75s forwards}
.ph-fx .tl{top:16px;left:16px;border-right:0;border-bottom:0}
.ph-fx .tr{top:16px;right:16px;border-left:0;border-bottom:0;animation-delay:.85s}
.ph-fx .bl{bottom:16px;left:16px;border-right:0;border-top:0;animation-delay:.95s}
.ph-fx .br{bottom:16px;right:16px;border-left:0;border-top:0;animation-delay:1.05s}

.phero .crumb,.phero .ph-txt>*,.phero .facts>div{opacity:0;animation:phUp .8s var(--ph-e) forwards}
.phero .crumb{animation-delay:.05s}
.phero .ph-txt>*{animation-delay:calc(.18s + var(--i,0)*.11s)}
.phero .facts>div{animation-delay:calc(.44s + var(--i,0)*.09s)}
.facts{position:relative}
.facts::after{content:"";position:absolute;left:0;top:0;width:2px;height:100%;transform:scaleY(0);
  transform-origin:top;background:linear-gradient(180deg,var(--gdl),var(--gd));
  animation:phBar 1s var(--ph-e) .5s forwards}
.facts>div{transition:background .25s,padding-left .25s}
.facts>div:hover{background:rgba(176,141,46,.07);padding-left:24px}

@keyframes phGrid{to{background-position:56px 56px,56px 56px}}
@keyframes phDriftA{0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(5vw,3vw,0) scale(1.12)}}
@keyframes phDriftB{0%,100%{transform:translate3d(0,0,0) scale(1.06)}
  50%{transform:translate3d(-4vw,-3vw,0) scale(.94)}}
@keyframes phRay{0%{opacity:0;transform:rotate(15deg) translateX(0)}
  8%{opacity:.5}22%{opacity:.5}
  34%,100%{opacity:0;transform:rotate(15deg) translateX(190vw)}}
@keyframes phLine{to{transform:scaleX(1)}}
@keyframes phCorner{to{opacity:1}}
@keyframes phUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes phBar{to{transform:scaleY(1)}}

@media(prefers-reduced-motion:reduce){
  .phero .bp-bg,.ph-fx i,.ph-fx span,.ph-fx .ec,.ph-photo img{animation:none!important}
  .ph-fx span{transform:scaleX(1)}
  .ph-fx .ec{opacity:1}
  .ph-fx .ray{display:none}
  .phero .crumb,.phero .ph-txt>*,.phero .facts>div{opacity:1!important;animation:none!important}
  .facts::after{transform:scaleY(1);animation:none}
}

/* ---------- Kontaktseite: Formular neben den Kontaktdaten ---------- */
.kform{border:1px solid var(--ln);background:var(--pp);padding:34px 32px;
  box-shadow:0 26px 60px -46px rgba(20,18,14,.5)}
.kform .tabs{display:flex;width:100%;margin-bottom:24px}
.kform .tabs button{flex:1;padding:12px 8px;font-size:10px;letter-spacing:.08em;
  white-space:normal;line-height:1.3;min-width:0}
/* Auf sehr schmalen Geräten stehen die beiden Reiter untereinander —
   nebeneinander passen die Beschriftungen sonst nicht mehr in eine Zeile. */
@media(max-width:400px){
  .kform .tabs{flex-direction:column}
  .kform .tabs button{padding:12px 10px}
}
.kform .calpick{grid-template-columns:1fr}
@media(max-width:520px){.kform{padding:26px 20px}}

/* Startseiten-Hero */
.hero{padding:calc(var(--nav-h) + var(--bar-h) + 62px) 0 0;overflow:hidden}
.hero-g{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;min-height:70svh}
.hero .cl{font-family:var(--disp);font-size:clamp(18px,2vw,23px);color:var(--ink);margin:24px 0 30px;padding-left:16px;border-left:3px solid var(--gd)}

/* ---------- Kino-Hero mit Video ---------- */
.cine{position:relative;min-height:100svh;display:flex;align-items:center;
  padding:calc(var(--nav-h) + var(--bar-h) + 56px) 0 92px;overflow:hidden;background:#0b0a08}
.cine-media{position:absolute;inset:0;z-index:0}
.cine-media video,.cine-media .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cine-media .poster{z-index:0}
.cine-media video{z-index:1;opacity:0;transition:opacity 1.4s ease}
.cine-media video.ready{opacity:1}
/* Verlauf: links dunkel für den Text, rechts offen fürs Bild */
.cine-veil{position:absolute;inset:0;z-index:2;
  background:linear-gradient(96deg,rgba(9,8,6,.92) 0%,rgba(9,8,6,.78) 34%,rgba(9,8,6,.34) 64%,rgba(9,8,6,.5) 100%),
             linear-gradient(180deg,rgba(9,8,6,.72) 0%,transparent 26%,transparent 62%,rgba(9,8,6,.86) 100%)}
.cine-grid{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(232,204,122,.14) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(232,204,122,.14) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(76% 70% at 62% 50%,#000,transparent 82%);
          mask-image:radial-gradient(76% 70% at 62% 50%,#000,transparent 82%)}
.cine .wrap{position:relative;z-index:5;width:100%}
.cine-g{display:grid;grid-template-columns:1.3fr .82fr;gap:56px;align-items:center}
.cine .kick{color:var(--gdl)}
.cine .kick::before{background:var(--gdl)}
.cine h1{color:#fbf7ee;text-shadow:0 2px 30px rgba(0,0,0,.45)}
.cine h1 .g{color:var(--gdl)}
.cine .lead{color:rgba(255,255,255,.76);text-shadow:0 1px 18px rgba(0,0,0,.5)}
.cine .cl{font-family:var(--disp);font-size:clamp(18px,2vw,23px);color:#fbf7ee;
  margin:24px 0 30px;padding-left:16px;border-left:3px solid var(--gdl)}
.cine .btn-p{background:var(--gdl);color:#241c05}
.cine .btn-p:hover{background:#fff;color:#241c05}
.cine .btn-o{border-color:rgba(255,255,255,.3);color:#efe9dc}
.cine .btn-o:hover{border-color:var(--gdl);color:var(--gdl);background:rgba(232,204,122,.08)}
.cine .badge{background:rgba(255,255,255,.06);border-color:rgba(232,204,122,.28);backdrop-filter:blur(6px)}
.cine .badge .t{color:rgba(255,255,255,.55)}
.cine .badge .t b{color:var(--gdl)}
.cine .draw{max-width:430px}
.cine .ln-d{stroke:var(--gdl);stroke-width:1.35;filter:drop-shadow(0 0 6px rgba(232,204,122,.35))}
.cine .fill-d{fill:rgba(232,204,122,.06)}
.cine .tag{color:rgba(255,255,255,.55)}
.cine .tag b{color:var(--gdl)}
.cine .photo{display:none}
/* Scan-Balken über dem Video */
.scan{position:absolute;left:0;right:0;height:2px;z-index:4;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(232,204,122,.85),transparent);
  animation:scanmove 9s ease-in-out 2.6s infinite}
@keyframes scanmove{0%,100%{opacity:0;top:22%}8%{opacity:.9}52%{opacity:.9;top:78%}62%{opacity:0;top:78%}}
/* Scroll-Hinweis */
.scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:6;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.42);display:flex;flex-direction:column;align-items:center;gap:9px}
.scroll-cue i{width:1px;height:34px;background:linear-gradient(rgba(232,204,122,.7),transparent);animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.35);transform-origin:top;opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* ---------- Bilder ---------- */
.figure{position:relative;overflow:hidden;background:var(--pp2);border:1px solid var(--ln)}
.figure img{width:100%;height:100%;object-fit:cover;display:block}
.figure::after{content:"";position:absolute;inset:11px;border:1px solid rgba(176,141,46,.32);pointer-events:none}
.figure.portrait{aspect-ratio:3/4}
.figure .cap{position:absolute;left:0;right:0;bottom:0;padding:26px 18px 14px;
  background:linear-gradient(transparent,rgba(20,18,14,.78));color:#f4efe3;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;z-index:2}
.figure .cap b{display:block;font-size:11.5px;letter-spacing:.13em;color:var(--gdl);margin-bottom:3px}

/* DESAG-Siegel
   Die Originaldatei enthält Name + Claim + Logo in einem Bild. Auf Badge-Größe
   wäre die Schrift darin unlesbar. Deshalb zeigen wir nur den DESAG-Bildteil
   (unterer Bereich) groß an — der Claim kommt aus unserer eigenen Typografie. */
.badge{display:inline-flex;align-items:center;gap:15px;border:1px solid var(--ln);background:var(--cd);padding:10px 16px}
/* Vom Original-Siegel wird nur der DESAG-Schriftzug freigestellt (x34–142, y144–180
   von 186x200) — der Mikro-Claim darunter ist in dieser Größe nicht lesbar und
   steht deshalb rechts daneben in der Website-Typografie. */
.badge .seal{position:relative;flex:none;width:126px;aspect-ratio:3/1;overflow:hidden;border-radius:2px}
.badge .seal img{position:absolute;display:block;width:172.22%;max-width:none;height:auto;left:-31.48%;top:-400%}
.badge .t{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);line-height:1.7}
.badge .t b{display:block;color:var(--ink);font-size:11px;letter-spacing:.13em;margin-bottom:2px}
.badge.dark{background:rgba(255,255,255,.05);border-color:rgba(201,168,76,.26)}
.badge.dark .t{color:rgba(255,255,255,.5)}
.badge.dark .t b{color:var(--gdl)}
@media(max-width:420px){.badge .seal{width:92px}.badge .t{font-size:8.8px}}

/* Vollbreites Bildband */
.imgband{position:relative;height:clamp(250px,34vw,420px);overflow:hidden;border-block:1px solid var(--ln)}
.imgband img{width:100%;height:100%;object-fit:cover;object-position:center 62%}
.imgband .ov{position:absolute;inset:0;background:linear-gradient(94deg,rgba(20,18,14,.82),rgba(20,18,14,.42) 46%,rgba(20,18,14,.05))}
.imgband .txt{position:absolute;inset:0;display:flex;align-items:center}
.imgband .txt>.wrap{width:100%}
.imgband h2{color:#fbf7ee;font-size:clamp(24px,3.2vw,40px);max-width:19ch}
.imgband h2 .g{color:var(--gdl)}
.imgband p{color:rgba(255,255,255,.72);max-width:46ch;margin-top:14px}
.imgband .kick{color:var(--gdl)}
.imgband .kick::before{background:var(--gdl)}

/* Technische Zeichnung — Zeichnung liegt über dem Objektfoto */
.draw{position:relative;aspect-ratio:1/1;width:100%;max-width:470px;margin-left:auto}
.draw .photo{position:absolute;inset:7% 3% 12% 5%;overflow:hidden;border:1px solid var(--ln);background:var(--pp2)}
.draw .photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.72) contrast(1.03)}
.draw .photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(165deg,rgba(245,242,234,.60),rgba(245,242,234,.38) 55%,rgba(245,242,234,.56))}
.draw svg{width:100%;height:100%;overflow:visible;position:relative;z-index:2}
.ln-d{fill:none;stroke:var(--gd);stroke-width:1.2;stroke-dasharray:var(--l,1200);stroke-dashoffset:var(--l,1200);animation:dr 2.4s cubic-bezier(.62,0,.35,1) forwards}
.ln-d.a{animation-delay:.35s;opacity:.75}
.ln-d.b{animation-delay:.75s;opacity:.5}
.fill-d{fill:rgba(176,141,46,.07);opacity:0;animation:fi .9s ease 1.5s forwards}
@keyframes dr{to{stroke-dashoffset:0}}
@keyframes fi{to{opacity:1}}
.tag{position:absolute;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);opacity:0;animation:fi .7s ease 2.1s forwards}
.tag b{color:var(--gdi);font-weight:700;display:block}
.tag.t1{top:3%;left:0}.tag.t2{bottom:3%;right:0;text-align:right}

/* ---------- Laufband ---------- */
.tk{background:var(--ink);color:rgba(255,255,255,.55);padding:15px 0;overflow:hidden;white-space:nowrap}
.tk-t{display:inline-flex;gap:50px;font-family:var(--mono);font-size:11px;letter-spacing:.19em;text-transform:uppercase;animation:mq 46s linear infinite}
.tk-t i{color:var(--gdl);font-style:normal;margin-right:8px}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- Bereichs-Karten (Absprünge) ---------- */
.brs{display:grid;grid-template-columns:repeat(3,1fr);margin-top:52px;border:1px solid var(--ln);background:var(--cd)}
.brs-2{grid-template-columns:1fr 1fr}
.br{padding:38px 32px;border-right:1px solid var(--ln);transition:.3s;display:flex;flex-direction:column}
.br:last-child{border-right:0}
.br:hover{background:var(--pp2)}
.br .ic{width:44px;height:44px;border:1px solid var(--ln);display:grid;place-items:center;color:var(--gd);margin-bottom:22px}
.br h3{margin-bottom:6px}
.br .s{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin-bottom:18px}
.br ul{list-style:none;display:grid;gap:9px;flex:1;align-content:start}
.br li{font-size:14.3px;padding-left:17px;position:relative}
.br li::before{content:"—";position:absolute;left:0;color:var(--gd)}
.br .foot{margin-top:24px;padding-top:16px;border-top:1px dashed var(--ln);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 12px}
.br .p{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gdi);font-weight:700;white-space:nowrap}
.br .go{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);border-bottom:1.5px solid var(--gd);padding-bottom:2px;white-space:nowrap;transition:.2s}
.br:hover .go{color:var(--gdi)}

/* Beschreibungstext in den Bereichskarten */
.br .brp{font-size:14.2px;color:var(--mut);margin-bottom:16px;line-height:1.6}

/* ---------- Bekenntnis-Block ---------- */
.creed{background:var(--ink);color:rgba(255,255,255,.6);padding:clamp(40px,6vw,72px);
  display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;position:relative;overflow:hidden}
.creed::after{content:"";position:absolute;inset:auto -10% -60% auto;width:60%;height:120%;
  background:radial-gradient(circle at 50% 50%,rgba(201,168,76,.16),transparent 68%)}
.creed p{position:relative;z-index:2;font-family:var(--disp);font-size:clamp(18px,2.1vw,25px);line-height:1.5}
.creed .hl{color:#fbf7ee;font-weight:600}
.creed .hl .g{color:var(--gdl)}
@media(max-width:820px){.creed{grid-template-columns:1fr;gap:24px}}

/* ---------- Drei Perspektiven ---------- */
.persp{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:44px;border:1px solid var(--ln);background:var(--cd)}
.persp>div{padding:34px 30px;border-right:1px solid var(--ln)}
.persp>div:last-child{border-right:0}
.persp .n{font-family:var(--disp);font-size:26px;font-weight:600;color:var(--ink);display:block;margin-bottom:12px;letter-spacing:-.02em}
.persp p{font-size:14.5px;color:var(--mut)}

/* ---------- Sechs Fragen ---------- */
.qsteps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:34px;
  border-top:1px solid var(--ln);border-left:1px solid var(--ln)}
.qsteps>div{border-right:1px solid var(--ln);border-bottom:1px solid var(--ln);padding:28px 26px;transition:.3s}
.qsteps>div:hover{background:var(--cd)}
.qsteps .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--gdi);font-weight:700;display:block;margin-bottom:12px}
.qsteps h4{font-size:18px;margin-bottom:8px}
.qsteps p{font-size:14.2px;color:var(--mut);font-style:italic}

/* ---------- Zielgruppen ---------- */
.zg{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px}
.zg span{font-family:var(--disp);font-size:clamp(17px,2vw,22px);font-weight:600;color:var(--ink);
  border:1px solid var(--ln);background:var(--cd);padding:14px 24px;transition:.25s}
.zg span:hover{border-color:var(--gd);color:var(--gdi);transform:translateY(-2px)}

/* ---------- Wertsteigerungs-Kette ---------- */
.chain{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:44px}
.chain>div{position:relative;background:var(--cd);border:1px solid var(--ln);padding:30px 24px;text-align:center}
.chain .n{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--gdi);display:block;margin-bottom:10px}
.chain h4{font-family:var(--disp);font-size:21px}
.chain>div:not(:last-child)::after{content:"";position:absolute;right:-14px;top:50%;width:14px;height:1px;background:var(--gd);z-index:2}
.chain>div:not(:last-child)::before{content:"";position:absolute;right:-9px;top:50%;transform:translateY(-50%) rotate(45deg);
  width:6px;height:6px;border-top:1px solid var(--gd);border-right:1px solid var(--gd);z-index:3}

/* ---------- Preise: Leistungsstufen-Leiter ---------- */
.pr-sec{background:var(--pp2)}
.ptabs{display:flex;gap:8px;flex-wrap:wrap;margin:36px 0 0}
.ptab{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;padding:12px 19px;border:1px solid var(--ln);background:transparent;color:var(--ink2);cursor:pointer;transition:.2s}
.ptab:hover{border-color:var(--gd);color:var(--gd)}
.ptab.on{background:var(--ink);color:var(--gdl);border-color:var(--ink)}
.pane{display:none}.pane.on{display:block;animation:fd .4s ease}
@keyframes fd{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ladder{margin-top:30px;display:grid;gap:14px}
.rung{background:var(--cd);border:1px solid var(--ln);display:grid;grid-template-columns:104px 1fr 244px;position:relative;transition:.3s;overflow:hidden}
.rung::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--gd);transform:scaleY(0);transform-origin:top;transition:transform .35s}
.rung:hover{border-color:rgba(176,141,46,.5);box-shadow:0 14px 34px -22px rgba(20,18,14,.4)}
.rung:hover::before{transform:scaleY(1)}
.rung.hl{border-color:var(--gd);background:linear-gradient(90deg,rgba(176,141,46,.06),transparent 40%)}
.rung.hl::before{transform:scaleY(1)}
.r-sz{border-right:1px solid var(--ln);padding:26px 20px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:var(--pp)}
.r-sz .b{font-family:var(--disp);font-size:38px;font-weight:700;color:var(--gd);line-height:.95}
.r-sz .s{font-family:var(--mono);font-size:8.6px;letter-spacing:.17em;text-transform:uppercase;color:var(--mut);margin-top:9px;line-height:1.5}
.r-mn{padding:26px 30px}
.r-mn h4{font-size:22px;margin-bottom:7px}
.r-mn .d{font-size:14.2px;color:var(--mut);margin-bottom:15px;max-width:58ch}
.r-mn ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:5px 24px}
.r-mn li{font-size:13.3px;padding-left:15px;position:relative;color:var(--ink2)}
.r-mn li::before{content:"\203A";position:absolute;left:0;color:var(--gd);font-weight:700}
.r-sd{border-left:1px solid var(--ln);padding:26px 24px;background:var(--pp)}
.r-sd .lb{font-family:var(--mono);font-size:8.8px;letter-spacing:.19em;text-transform:uppercase;color:var(--mut);margin-bottom:6px}
.r-sd .am{font-family:var(--disp);font-size:29px;font-weight:700;color:var(--ink);line-height:1.05}
.r-sd .nt{font-size:11.8px;color:var(--mut);margin-top:7px;line-height:1.45}
.r-sd .rs{margin-top:15px;padding-top:13px;border-top:1px dashed var(--ln);font-size:12.6px;color:var(--ink2);line-height:1.5}
.r-sd .rs b{display:block;font-family:var(--mono);font-size:8.6px;letter-spacing:.17em;text-transform:uppercase;color:var(--gdi);margin-bottom:4px}
.r-sd .go{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:10.2px;letter-spacing:.15em;text-transform:uppercase;color:var(--gdi);font-weight:700;border-bottom:1.5px solid rgba(176,141,46,.35);padding-bottom:2px;transition:.2s}
.r-sd .go:hover{border-color:var(--gd)}
.gh{font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gdi);margin:42px 0 -4px}
.gh:first-child{margin-top:6px}

/* ---------- Haltung ---------- */
.hal-g{display:grid;grid-template-columns:1fr 1fr;margin-top:50px;border:1px solid var(--ln)}
.hc{padding:40px 36px;background:var(--cd)}
.hc:first-child{border-right:1px solid var(--ln)}
.hc.p{background:var(--ink);color:rgba(255,255,255,.72)}
.hc.p h3{color:var(--gdl)}
.hc h3{margin-bottom:22px}
.hc ul{list-style:none;display:grid;gap:12px}
.hc li{padding-left:27px;position:relative;font-size:14.8px}
.hc.n li::before{content:"\00D7";position:absolute;left:0;color:#B25B47;font-weight:700}
.hc.p li::before{content:"\2713";position:absolute;left:0;color:var(--gdl);font-weight:700}
.fin{text-align:center;margin-top:48px;font-family:var(--disp);font-size:clamp(20px,2.8vw,32px);color:var(--ink)}

/* Zweispalter / Listen */
.two{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:start}
.two p+p,.cardbox p+p{margin-top:15px}

/* Qualifikationen */
.qual{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:34px;
      border-top:1px solid var(--ln);border-left:1px solid var(--ln)}
.qual .qi{display:flex;gap:16px;align-items:flex-start;padding:22px 24px;
          border-right:1px solid var(--ln);border-bottom:1px solid var(--ln);
          background:var(--cd);transition:background .3s ease}
.qual .qi:hover{background:#fffdf7}
.qual .qi i{font-family:var(--mono);font-style:normal;font-size:11px;letter-spacing:.1em;
            color:var(--gd);padding-top:3px;flex:0 0 auto}
.qual .qi span{font-family:var(--disp);font-size:16px;font-weight:500;line-height:1.4;color:var(--ink)}
@media(max-width:760px){.qual{grid-template-columns:1fr}}
.plain{list-style:none;display:grid;gap:11px;margin-top:8px}
.plain li{padding-left:22px;position:relative;font-size:15.5px}
.plain li::before{content:"\2014";position:absolute;left:0;color:var(--gd)}
.negl{list-style:none;display:grid;gap:9px;margin-top:10px}
.negl li{padding-left:24px;position:relative;font-size:15px}
.negl li::before{content:"\00D7";position:absolute;left:0;color:#B25B47;font-weight:700}
.cardbox{background:var(--cd);border:1px solid var(--ln);padding:32px 30px}
.cardbox h3{margin-bottom:14px}

/* ---------- Methodik ---------- */
.mth{display:grid;grid-template-columns:repeat(4,1fr);margin-top:50px;border-top:1px solid var(--ln);border-left:1px solid var(--ln)}
.mc{border-right:1px solid var(--ln);border-bottom:1px solid var(--ln);padding:28px 24px;transition:.3s}
.mc:hover{background:var(--cd)}
.mc .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.19em;color:var(--gdi);display:block;margin-bottom:13px;font-weight:700}
.mc h4{font-size:17px}
.mc p{font-size:13.4px;color:var(--mut);margin-top:8px}

/* ---------- DealPilot ---------- */
.dp{background:linear-gradient(140deg,#0d0c0a,#171309 58%,#0b0a08);color:rgba(255,255,255,.7);position:relative;overflow:hidden}
.dp::after{content:"";position:absolute;inset:auto 0 -55% 0;height:110%;background:radial-gradient(50% 100% at 68% 0,rgba(201,168,76,.2),transparent 70%)}
.dp .kick{color:var(--gdl)}.dp .kick::before{background:var(--gdl)}
.dp h2{color:#fbf7ee}.dp h2 .g{color:var(--gdl)}
.dp .lead{color:rgba(255,255,255,.62)}
/* Die Deal-Score-Karte braucht Breite: fuenf Balken mit Name, Gewicht und
   Punktzahl in einer Zeile werden sonst eng. Deshalb bekommt die rechte
   Spalte mehr Platz als die linke Textspalte hergeben muesste. */
.dpg{position:relative;z-index:2;display:grid;grid-template-columns:1fr minmax(430px,.98fr);gap:48px;align-items:center}
.dpw{font-family:var(--disp);font-weight:700;font-size:31px;letter-spacing:-.02em;color:#fff;margin-bottom:18px}
.dpw span{color:var(--gdl)}
.dp ul{list-style:none;display:grid;gap:10px;margin:24px 0 30px}
.dp li{padding-left:22px;position:relative;font-size:14.8px}
.dp li::before{content:"\25C6";position:absolute;left:0;color:var(--gd);font-size:9px;top:6px}
.pnl{border:1px solid rgba(201,168,76,.24);background:rgba(0,0,0,.4);padding:26px}
.pr2{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px dashed rgba(201,168,76,.16);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.44)}
.pr2:last-child{border:0}.pr2 b{color:var(--gdl);font-weight:500}.pr2 b.ok{color:#5BD98E}
.gg{text-align:center;padding-top:20px;margin-top:14px;border-top:1px solid rgba(201,168,76,.24)}
.gg .v{font-family:var(--disp);font-size:54px;font-weight:700;color:var(--gdl);line-height:1}
.gg .l{font-family:var(--mono);font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-top:5px}

/* ---------- Investor Deal Score: die weisse Karte ----------
   Uebernommen aus dem Kopf der DealPilot-Seite. Sie steht hell auf dem
   dunklen DealPilot-Abschnitt — das ist Absicht: Die Karte ist das
   Produkt, der Rest ist Rahmen. */
.idsc{background:#fff;border-radius:18px;padding:0;color:var(--ink);overflow:hidden;
  box-shadow:rgba(0,0,0,.88) 0 64px 128px -46px,rgba(201,168,76,.16) 0 0 0 1px}

/* Statusleiste ganz oben */
.ids-band{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 18px}
.ids-band .l{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:9px;
  font-weight:700;letter-spacing:1.35px;text-transform:uppercase;color:var(--ink)}
.ids-band .dot{width:6px;height:6px;border-radius:50%;background:rgb(27,94,58);flex:0 0 auto}
.ids-band .cleared{background:#0c0b09;color:#5BD98E;font-family:var(--mono);font-size:8.5px;
  font-weight:700;letter-spacing:.1em;border-radius:20px;padding:4px 11px;white-space:nowrap}

/* Titelzeile */
.ids-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 18px 6px}
.ids-title{font-family:var(--disp);font-size:16px;font-weight:700;color:rgb(22,19,13)}
.ids-title b{color:rgb(184,147,47);font-weight:900}
.ids-allkpi{font-family:var(--mono);font-size:9px;color:rgb(111,104,91);border:1px solid rgba(20,18,14,.12);
  border-radius:8px;padding:6px 11px;white-space:nowrap}

/* Zwei Spalten: links der Ring, rechts die Balken */
.ids-body{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:6px 16px 14px;align-items:start}
.ids-left{display:flex;flex-direction:column;align-items:center;gap:9px}

.ids-dial{position:relative;width:114px;height:114px;flex:0 0 auto}
.ids-dial svg{width:100%;height:100%;transform:rotate(-90deg)}
.ids-dial circle{fill:none;stroke-width:7}
.ids-dial .tr{stroke:rgb(239,233,220)}
.ids-dial .vl{stroke:rgb(63,165,108);stroke-linecap:round;
  stroke-dasharray:0 var(--umfang);transition:stroke-dasharray 1.1s cubic-bezier(.2,.72,.2,1)}
.dp.in .ids-dial .vl,.rv.in .ids-dial .vl{stroke-dasharray:var(--bogen) var(--umfang)}
/* Zahl und "/ 100" stehen uebereinander und zusammen mittig im Ring - genau
   so steht es auch im Original. Nebeneinander waere die Zahl leicht nach
   links versetzt, weil der Zusatz sie aus der Mitte schiebt. */
.ids-dv{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center}
.ids-dv b{font-family:var(--disp);font-size:34px;font-weight:700;line-height:34px;letter-spacing:-.03em;
  color:rgb(22,19,13)}
.ids-dv small{font-family:var(--mono);font-size:8.5px;line-height:13.6px;color:rgb(111,104,91)}
.ids-badge{font-family:var(--disp);font-size:11.5px;font-weight:700;color:rgb(63,165,108);
  background:rgba(63,165,108,.1);border-radius:20px;padding:4px 13px;white-space:nowrap}

.ids-stats{display:flex;gap:14px;text-align:center;margin-top:2px}
.ids-stats b{display:block;font-family:var(--disp);font-size:12.5px;font-weight:700;color:rgb(22,19,13);
  white-space:nowrap}
.ids-stats span{display:block;font-family:var(--mono);font-size:6.5px;letter-spacing:.39px;
  text-transform:uppercase;color:rgb(111,104,91);margin-top:2px}

.ids-right{min-width:0}
.ids-h{font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgb(111,104,91);margin:2px 0 9px}
.ids-bar+.ids-bar{margin-top:9px}
.ids-bar .top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.ids-bar .nm{font-size:11.5px;font-weight:600;color:rgb(22,19,13)}
.ids-bar .wt{font-family:var(--mono);font-size:8.5px;color:rgb(111,104,91);margin-left:6px}
.ids-bar .sc{font-family:var(--disp);font-size:13px;font-weight:700;white-space:nowrap}
.ids-bar .sc small{font-family:var(--mono);font-size:7.5px;color:rgb(111,104,91);margin-left:1px}
.ids-bar .track{display:block;height:5px;border-radius:3px;background:rgb(239,233,220);
  margin-top:4px;overflow:hidden}
.ids-bar .track i{display:block;height:100%;width:var(--p);border-radius:3px;background:var(--c);
  transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.2,.72,.2,1)}
.dp.in .ids-bar .track i,.rv.in .ids-bar .track i{transform:scaleX(1)}
.ids-bar .kp{font-family:var(--mono);font-size:7.5px;letter-spacing:.3px;
  color:rgb(111,104,91);margin-top:3px}

@media(prefers-reduced-motion:reduce){
  .ids-bar .track i{transform:scaleX(1);transition:none}
  .ids-dial .vl{stroke-dasharray:var(--bogen) var(--umfang);transition:none}
}
@media(max-width:560px){
  .ids-body{grid-template-columns:1fr}
  .ids-left{margin-bottom:6px}
}

/* ---------- Partnerband ----------
   Laufreihe wie auf der DealPilot-Seite: weisse Kacheln mit 172 px Breite
   und 94 px Hoehe, 16 px Abstand, die Spur wandert in 60 Sekunden um genau
   die halbe Laenge - weil die Kachelreihe doppelt im Markup steht, springt
   sie dabei unsichtbar zurueck. Links und rechts blendet eine Maske aus. */
.pband{background:rgb(237,231,218);padding:78px 0;overflow:hidden}
.pb-head{text-align:center;max-width:64ch;margin:0 auto 34px}
.pb-head h2{font-size:clamp(28px,3.6vw,42px);margin-top:10px}
.pb-head p{color:var(--mut);margin-top:14px;font-size:15.5px;line-height:1.6}
.pmarq{overflow:hidden;min-width:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.pmarq-track{display:flex;flex-wrap:nowrap;gap:16px;width:max-content;
  animation:pmarq 60s linear infinite}
@keyframes pmarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.pmarq:hover .pmarq-track{animation-play-state:paused}
.plogo{flex:0 0 auto;width:172px;height:94px;display:flex;align-items:center;justify-content:center;
  padding:16px 20px;background:#fff;border-top:1px solid rgba(20,18,15,.1);
  border-bottom:1px solid rgba(20,18,15,.1)}
.plogo img{width:auto;height:auto;max-height:62px;max-width:100%;object-fit:contain}
.plogo.seal img{max-height:86px}
.plogo.dunkel{background:rgb(5,5,5);padding:16px 14px;
  border-top-color:rgba(255,255,255,.14);border-bottom-color:rgba(255,255,255,.14)}
@media(prefers-reduced-motion:reduce){.pmarq-track{animation:none}}
@media(max-width:760px){
  .pband{padding:52px 0}
  .pb-head{margin-bottom:26px}
  .plogo{width:146px;height:82px;padding:14px 17px}
  .plogo img{max-height:52px}
  .plogo.seal img{max-height:72px}
  /* Auf dem Handy passen weniger Kacheln ins Bild; laeuft die Spur gleich
     schnell, zieht sie zu hektisch vorbei. */
  .pmarq-track{animation-duration:46s}
}

/* ---------- CTA-Band ---------- */
.band{background:var(--ink);color:rgba(255,255,255,.7);padding:76px 0;position:relative;overflow:hidden}
.band::after{content:"";position:absolute;inset:auto 0 -70% 0;height:120%;background:radial-gradient(46% 100% at 50% 0,rgba(201,168,76,.16),transparent 70%)}
.band-in{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap}
.band h2{color:#fbf7ee;font-size:clamp(26px,3.4vw,40px)}
.band h2 .g{color:var(--gdl)}
.band p{max-width:52ch;margin-top:12px;color:rgba(255,255,255,.6)}

/* ---------- Über mich ---------- */
.ab{display:grid;grid-template-columns:.92fr 1.28fr;gap:60px;align-items:start}
.ab .figure{position:sticky;top:110px}
.ab p+p,.prose p+p{margin-top:16px}
.pull{font-family:var(--disp);font-size:clamp(19px,2.3vw,26px);color:var(--ink);border-left:3px solid var(--gd);padding-left:20px;margin:26px 0}
.chips{display:flex;gap:9px;flex-wrap:wrap;margin-top:26px}
.chip{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--ln);color:var(--gdi);padding:8px 14px}
.prose{max-width:74ch}
.prose h3{margin:34px 0 12px}
.prose h2{margin:44px 0 14px;font-size:clamp(24px,3vw,34px)}
.prose ul{margin:12px 0 0 20px;display:grid;gap:7px}
.prose a{color:var(--gdi);border-bottom:1px solid rgba(176,141,46,.4)}

/* ---------- Kontakt ---------- */
.kt{background:var(--cd);border-top:1px solid var(--ln)}
.kg{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.kr{display:flex;gap:18px;padding:17px 0;border-bottom:1px dashed var(--ln)}
.kr .k{font-family:var(--mono);font-size:10px;letter-spacing:.19em;text-transform:uppercase;color:var(--mut);min-width:92px;padding-top:4px}
.kr .v{font-size:16px;color:var(--ink)}
.kr a{color:var(--gdi);font-weight:500}
form{display:grid;gap:15px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:15px}
label{font-family:var(--mono);font-size:9.4px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut);display:block;margin-bottom:6px}
input,textarea,select{width:100%;background:var(--pp);border:1px solid var(--ln);padding:12px 13px;color:var(--ink);font-family:var(--body);font-size:15px;transition:.2s}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--gd);background:#fff}
textarea{min-height:110px;resize:vertical}
.cons{display:flex;gap:11px;align-items:flex-start;font-size:12.6px;color:var(--mut);line-height:1.55;
  font-family:var(--body);text-transform:none;letter-spacing:0}
.cons input{width:auto;accent-color:var(--gd);margin-top:3px}
.formnote{font-size:12.4px;color:var(--mut);border-left:2px solid var(--gd);padding-left:12px}

/* ---------- FAQ ---------- */
.faq{margin-top:40px;border-top:1px solid var(--ln)}
.faq details{border-bottom:1px solid var(--ln)}
.faq summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;font-family:var(--disp);font-size:18px;color:var(--ink);position:relative;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:19px;font-size:22px;color:var(--gd);font-family:var(--body);transition:.25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 40px 24px 0;font-size:15px;color:var(--ink2);max-width:72ch}

/* ---------- Footer ---------- */
footer{background:var(--dk);color:rgba(255,255,255,.45);padding:56px 0 26px}
.fg{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;margin-bottom:38px}
footer h5{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gdl);margin-bottom:16px}
footer ul{list-style:none;display:grid;gap:9px}
footer a{font-size:13.5px;transition:.2s}
footer a:hover{color:var(--gdl)}
.fb{border-top:1px solid rgba(255,255,255,.09);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.3)}

/* Auf Geraeten, die mit dem Finger bedient werden, bekommt jeder Link in
   der Fusszeile eine Trefferflaeche von mindestens 44 Pixeln Hoehe. Der
   Text bleibt gleich gross; nur der unsichtbare Rand darum waechst. */
@media(hover:none){
  footer ul{gap:0}
  footer ul a{display:inline-flex;align-items:center;min-height:44px}
  .fb a{display:inline-flex;align-items:center;min-height:38px}
  .fg p a,.topbar a{display:inline-flex;align-items:center;min-height:40px}
  /* Dieselbe Regel fuer die uebrigen Linkarten, die als Schriftzug mit
     Unterstrich gebaut sind: Brotkrumen, die Weiter-Links in den Karten
     und die Kontaktangaben. Sichtbar aendert sich nichts. */
  .crumb a,.go,.sl-go,.kr .v a,.kliste a{display:inline-flex;align-items:center;min-height:40px}
  .sl-go,.r-sd .go{min-height:40px}
  .rs-mehr summary,details summary{min-height:40px;display:flex;align-items:center}
}

/* ---------- Reveal ---------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .ln-d{animation:none;stroke-dashoffset:0}
  .fill-d,.tag{animation:none;opacity:1}
  .tk-t{animation:none}
  .scan,.scroll-cue i{animation:none}
  .scan{opacity:0}
  .cine-media video{display:none}
}

/* ---------- Responsive ---------- */
@media(max-width:980px){
  .hero-g,.phero-g,.dpg,.ab,.kg,.two{grid-template-columns:1fr;gap:42px}
  .draw{max-width:370px;margin:0 auto}
  .brs,.brs-2,.hal-g{grid-template-columns:1fr}
  .br{border-right:0;border-bottom:1px solid var(--ln)}
  .br:last-child{border-bottom:0}
  .hc:first-child{border-right:0;border-bottom:1px solid var(--ln)}
  .mth{grid-template-columns:repeat(2,1fr)}
  .persp,.qsteps{grid-template-columns:1fr}
  .persp>div{border-right:0;border-bottom:1px solid var(--ln)}
  .persp>div:last-child{border-bottom:0}
  .chain{grid-template-columns:1fr 1fr;gap:12px}
  .chain>div::after,.chain>div::before{display:none}
  .rung{grid-template-columns:1fr}
  .r-sz{border-right:0;border-bottom:1px solid var(--ln);flex-direction:row;gap:16px;justify-content:flex-start;padding:16px 24px}
  .r-sz .s{margin:0;text-align:left}
  .r-sd{border-left:0;border-top:1px solid var(--ln)}
  .r-mn ul{grid-template-columns:1fr}
  .fg{grid-template-columns:1fr 1fr}
  section{padding:76px 0}
  .band-in{flex-direction:column;align-items:flex-start}
  .ab .figure{position:static}
  .imgband .ov{background:linear-gradient(180deg,rgba(20,18,14,.55),rgba(20,18,14,.85))}
  .imgband h2,.imgband p{max-width:none}
  /* Kino-Hero mobil: Zeichnung unter den Text, Verlauf von oben */
  .cine{min-height:92svh;padding:calc(var(--nav-h) + var(--bar-h) + 42px) 0 76px}
  .cine-g{grid-template-columns:1fr;gap:34px}
  .cine .draw{max-width:290px;margin:0 auto}
  .cine-veil{background:linear-gradient(180deg,rgba(9,8,6,.9) 0%,rgba(9,8,6,.72) 42%,rgba(9,8,6,.55) 66%,rgba(9,8,6,.92) 100%)}
  .cine-grid{-webkit-mask-image:radial-gradient(90% 60% at 50% 60%,#000,transparent 85%);
             mask-image:radial-gradient(90% 60% at 50% 60%,#000,transparent 85%)}
  .scroll-cue{display:none}
  /* Mobile-Navigation */
  .burger{display:block}
  .nav>ul{display:none}
  /* Kein backdrop-filter: Der Grund ist ohnehin deckend, der Weichzeichner
     haette also nichts zu tun — kostet aber eine eigene Zeichenebene und
     lieferte in manchen Browsern eine durchscheinende Klappe. */
  .nav.open>ul{display:grid;position:absolute;top:100%;left:50%;margin-left:-50vw;width:100vw;right:auto;background:var(--pp);padding:20px 26px 30px;gap:4px;border-bottom:1px solid var(--ln);max-height:calc(100svh - var(--nav-h) - var(--bar-h));overflow:auto;box-shadow:0 30px 50px -30px rgba(20,18,14,.5)}
  .nav.open>ul>li>a{padding:12px 0;font-size:16px;border-bottom:1px solid var(--lnl);width:100%;justify-content:space-between}
  /* Auf der Startseite steht der Kopf hell auf dem dunklen Hero. Sobald das
     Menue aufklappt, liegt der Text aber auf hellem Grund — dann muss er
     wieder dunkel sein, sonst ist er weiss auf Creme und unlesbar. */
  body.has-cine header:not(.solid) .nav.open>ul>li>a,
  body.has-cine header:not(.solid) .nav.open .sub a{color:var(--ink2)}
  body.has-cine header:not(.solid) .nav.open>ul>li>a:hover,
  body.has-cine header:not(.solid) .nav.open>ul>li.current>a{color:var(--gdi)}
  .nav .sub{position:static;opacity:1;visibility:visible;transform:none;border:0;box-shadow:none;background:transparent;padding:0 0 8px 14px;min-width:0;display:none}
  .nav .has-sub.open .sub{display:block}
  .nav .sub a{padding:9px 0;font-size:14.5px}
}
@media(max-width:820px){
  .tb-l{display:none}
  .tb-r{gap:14px;width:100%;justify-content:space-between}
}
@media(max-width:700px){
  .topbar{font-size:9.5px}
  .tb-r{gap:10px}
  .tb-r .tb-mail{display:none}
  .tb-pre{display:none}
  .tb-dp{padding:0 11px;gap:7px;letter-spacing:.1em}
}
@media(max-width:620px){
  /* Nur auf sehr schmalen Geraeten duerfen Ueberschriften hart umbrechen */
  h1,h2,h3,h4{overflow-wrap:break-word}
  .mth{grid-template-columns:1fr}
  .chain{grid-template-columns:1fr}
  .f2{grid-template-columns:1fr}
  .fg{grid-template-columns:1fr}
  .logo img{height:32px}
}

/* ============================================================
   Erweiterung: Gutachten-Struktur (Mega-Menü, Funnel, Preise,
   Rechner, Abschnittsnavigation, Terminbuchung)
   ============================================================ */

/* ---------- Mega-Menü ---------- */
.nav>ul>li.has-mega{position:static}
.mega{position:absolute;top:100%;left:50%;margin-left:-50vw;width:100vw;
  background:var(--cd);border-top:1px solid var(--ln);border-bottom:1px solid var(--ln);
  box-shadow:0 26px 50px -30px rgba(20,18,14,.5);
  opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s;z-index:60}
.nav>ul>li.has-mega:hover .mega,.nav>ul>li.has-mega:focus-within .mega{opacity:1;visibility:visible}
.mega-in{display:grid;grid-template-columns:repeat(4,1fr) .9fr;gap:0;padding:30px 26px 34px}
.mcol{padding:0 22px;border-right:1px solid var(--lnl)}
.mcol:first-child{padding-left:0}
.mcol:last-child{border-right:0;padding-right:0}
.mh{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gdi);margin-bottom:16px}
.mcol a{display:block;padding:9px 0;transition:.18s}
.mcol a b{display:block;font-family:var(--disp);font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.3}
.mcol a span{display:block;font-size:12.5px;color:var(--mut);margin-top:2px;line-height:1.45}
.mcol a:hover b{color:var(--gdi)}
.mfeat{background:var(--pp);margin:-30px -26px -34px 0;padding:30px 26px 34px 24px}
.mcta{background:var(--ink);padding:14px 16px!important;margin-bottom:10px}
.mcta b{color:var(--gdl)!important}
.mcta span{color:rgba(255,255,255,.6)!important}
.mcta:hover b{color:#fff!important}
.nav .sub a b{display:block;font-family:var(--disp);font-weight:600;font-size:14px;color:var(--ink)}
.nav .sub a span{display:block;font-size:12px;color:var(--mut);margin-top:1px}

/* ---------- Abschnittsnavigation ---------- */
.secnav{position:sticky;top:calc(var(--nav-h) + var(--bar-h));z-index:50;background:rgba(245,242,234,.96);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--ln)}
.secnav .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;height:52px;align-items:center}
.secnav .wrap::-webkit-scrollbar{display:none}
.secnav a{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--mut);padding:8px 14px;white-space:nowrap;transition:.2s;border-radius:2px}
.secnav a:hover{color:var(--ink);background:var(--pp2)}
.secnav a.on{background:var(--ink);color:var(--gdl)}

/* ---------- Hero-Auswahlkarte ---------- */
.picker{background:var(--cd);border:1px solid var(--ln);box-shadow:0 30px 60px -40px rgba(20,18,14,.6)}
.picker .ph{padding:20px 24px;border-bottom:1px solid var(--ln);background:var(--pp)}
.picker .ph .kick{margin:0}
.picker .pb{padding:22px 24px 26px}
.picker h3{font-size:20px;margin-bottom:4px}
.picker .ps{font-size:13.5px;color:var(--mut);margin-bottom:16px}
.picker,.picker .pb{min-width:0}
.picker a{display:flex;align-items:center;gap:14px;padding:13px 14px;border:1px solid var(--ln);
  margin-bottom:9px;transition:.2s;background:var(--cd);min-width:0}
.picker a>span{min-width:0}
.picker a:hover{border-color:var(--gd);transform:translateX(3px)}
.picker a .pi{width:34px;height:34px;flex:none;display:grid;place-items:center;border:1px solid var(--ln);
  color:var(--gd);font-family:var(--mono);font-size:11px}
.picker a b{display:block;font-family:var(--disp);font-size:15px;font-weight:600;color:var(--ink);hyphens:auto}
.picker a i{display:block;font-style:normal;font-size:12.5px;color:var(--mut);margin-top:1px}
.picker a .ar{margin-left:auto;color:var(--gd);font-size:15px}

/* ---------- Kennzahlen-Streifen ---------- */
/* Fuenf Kennzahlen statt vier: auto-fit statt fester Spaltenzahl, damit
   die Reihe nicht bei jeder Ergaenzung von Hand nachgezogen werden muss.
   Ab 180 px je Spalte bricht sie von selbst um. */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));border-top:1px solid var(--ln);
  border-bottom:1px solid var(--ln);background:var(--cd)}
.stats>div{padding:26px 24px;text-align:center;border-right:1px solid var(--ln)}
.stats>div:last-child{border-right:0}
/* Bei umgebrochener Reihe steht sonst ein Trenner am Zeilenende. Der
   Container schneidet ihn ab. */
.stats{overflow:hidden}
.stats .n{font-family:var(--disp);font-size:clamp(26px,3.4vw,38px);font-weight:600;color:var(--ink);letter-spacing:-.03em}
.stats .n em{font-style:normal;color:var(--gd)}
.stats .l{font-family:var(--mono);font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--mut);margin-top:6px}

/* ---------- Leistungs-Liste (zweispaltig wie gutachten.org) ---------- */
.lsx{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:start}
.lsl{display:grid;gap:14px}
.lsi{border:1px solid var(--ln);background:var(--cd);padding:24px 26px;display:grid;
  grid-template-columns:46px 1fr;gap:18px;position:relative;overflow:hidden;
  transition:border-color .25s,transform .25s,box-shadow .25s}

/* Der goldene Streifen links faehrt beim Ueberfahren heraus. Er sitzt
   als Pseudoelement in der Kachel, kostet also kein weiteres Markup und
   laesst sich mit transform bewegen — das laeuft auf der Grafikkarte und
   ruckelt auch auf einem aelteren Handy nicht. */
.lsi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gd);
  transform:scaleY(0);transform-origin:top;transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.lsi:hover::before,.lsi:focus-visible::before{transform:scaleY(1)}

.lsi:hover,.lsi:focus-visible{border-color:var(--gd);transform:translateY(-3px);
  box-shadow:0 22px 38px -26px rgba(20,18,14,.55)}
.lsi .ic{width:46px;height:46px;border:1px solid var(--ln);display:grid;place-items:center;
  color:var(--gd);transition:background .25s,border-color .25s,color .25s,transform .3s}
.lsi:hover .ic{background:var(--gd);border-color:var(--gd);color:#fff;transform:rotate(-4deg) scale(1.06)}
.lsi .ic svg{transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.lsi:hover .ic svg{transform:scale(1.08)}

/* Der Pfeil erscheint erst beim Ueberfahren — er sagt "hier geht es
   weiter", ohne dass sechs Pfeile gleichzeitig um Aufmerksamkeit
   ringen. */
.lsi h3{font-size:19px;margin-bottom:6px;transition:color .2s}
.lsi h3::after{content:"\2192";display:inline-block;margin-left:8px;color:var(--gd);
  opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .25s}
.lsi:hover h3::after,.lsi:focus-visible h3::after{opacity:1;transform:translateX(0)}
.lsi:hover h3{color:var(--gdi)}
@media(prefers-reduced-motion:reduce){
  .lsi,.lsi::before,.lsi .ic,.lsi .ic svg,.lsi h3::after{transition:none}
  .lsi:hover{transform:none}
  .lsi:hover .ic{transform:none}
}
.lsi p{font-size:14.3px;color:var(--ink2)}
.lsi .tags{display:flex;gap:18px;flex-wrap:wrap;margin-top:13px}
.lsi .tags span{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--gdi)}
.lsi .tags span::before{content:"\2713 ";color:var(--gd)}

/* ---------- Nutzen-Kacheln A01/A02/A03 ---------- */
.ben{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--ln);background:var(--cd);margin-top:44px}
.ben>div{padding:34px 30px;border-right:1px solid var(--ln)}
.ben>div:last-child{border-right:0}
.ben .no{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--gd);margin-bottom:16px}
.ben h3{font-size:17px;text-transform:uppercase;letter-spacing:.02em;margin-bottom:10px}
.ben p{font-size:14.3px;color:var(--ink2)}

/* ---------- Preistabellen ---------- */
.ptbl{border:1px solid var(--ln);background:var(--cd);margin-top:34px}
.ptbl .hd{display:grid;grid-template-columns:1fr auto;padding:14px 26px;border-bottom:1px solid var(--ln);
  background:var(--pp);font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.ptbl .hd span:last-child,.ptbl .rw>span:last-child{text-align:right}
.ptbl .rw{display:grid;grid-template-columns:1fr auto;padding:18px 26px;border-bottom:1px solid var(--lnl);
  align-items:baseline;transition:background .2s}
.ptbl .rw:last-child{border-bottom:0}
.ptbl .rw:hover{background:var(--pp)}
.ptbl .rw b{font-family:var(--disp);font-size:16px;font-weight:600;color:var(--ink)}
.ptbl .rw .sub{display:block;font-size:12.5px;color:var(--mut);margin-top:2px;font-family:var(--body);font-weight:400;letter-spacing:0}
.ptbl .rw .net{font-family:var(--disp);font-size:19px;font-weight:600;color:var(--gdi)}
.ptbl .rw .gross{font-family:var(--mono);font-size:12px;color:var(--mut)}
.ptbl .ft{padding:16px 26px;border-top:1px solid var(--ln);font-size:13px;color:var(--mut);background:var(--pp)}

/* ---------- Ersteinschätzungs-Funnel ---------- */
.fx{max-width:760px;margin:0 auto;background:var(--cd);border:1px solid var(--ln);
  box-shadow:0 40px 80px -60px rgba(20,18,14,.6)}
.fx-hd{padding:26px 30px;border-bottom:1px solid var(--ln);background:var(--pp);
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.fx-hd .st{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--ink)}
.fx-hd .bdg{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  background:var(--ink);color:var(--gdl);padding:7px 12px}
.fx-bar{display:flex;gap:5px;padding:0 30px;margin-top:-1px}
.fx-bar i{flex:1;height:3px;background:var(--ln);transition:background .35s}
.fx-bar i.on{background:var(--gd)}
.fx-bd{padding:30px}
.fx-step{display:none}
.fx-step.on{display:block;animation:fxin .3s ease}
@keyframes fxin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.fx-bd h3{font-size:clamp(21px,2.6vw,27px);margin-bottom:8px}
.fx-bd .hint{font-size:14.5px;color:var(--mut);margin-bottom:22px}
.fx-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.fx-opts.two{grid-template-columns:repeat(2,1fr)}
.fx-opt{border:1px solid var(--ln);background:var(--pp);padding:20px 14px 18px;text-align:center;
  cursor:pointer;transition:.2s;font-family:var(--body);font-size:14.5px;color:var(--ink);
  display:flex;flex-direction:column;align-items:center;gap:10px;position:relative;overflow:hidden}
.fx-opt em{font-style:normal;display:grid;place-items:center;width:44px;height:44px;
  border:1px solid var(--ln);color:var(--gd);background:var(--cd);transition:.2s}
.fx-opt em svg{width:26px;height:26px}
.fx-opt>span{line-height:1.32;font-weight:500;hyphens:auto;overflow-wrap:normal}
.fx-opt .fx-sub{font-style:normal;position:static;opacity:1;visibility:visible;
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mut);margin-top:-2px}
.fx-opt:hover{border-color:var(--gd);background:var(--cd);transform:translateY(-2px);
  box-shadow:0 16px 30px -24px rgba(20,18,14,.6)}
.fx-opt:hover em{border-color:var(--gd);background:var(--pp)}
.fx-opt.sel{border-color:var(--gd);background:var(--cd);box-shadow:inset 0 0 0 1px var(--gd)}
.fx-opt.sel em{background:var(--ink);border-color:var(--ink);color:var(--gdl)}
.fx-opt.sel .fx-sub{color:var(--gdi)}
.fx-fields{display:grid;gap:14px}
.fx-fields .two-up{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fx-ft{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:20px 30px;border-top:1px solid var(--ln);background:var(--pp)}
.fx-back{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mut);background:none;border:0;cursor:pointer;padding:8px 0}
.fx-back:hover{color:var(--ink)}
.fx-sum{display:grid;gap:10px;margin:0 0 22px}
.fx-sum div{display:flex;justify-content:space-between;gap:16px;padding:11px 14px;background:var(--pp);font-size:14px}
.fx-sum span:first-child{color:var(--mut)}
.fx-sum span:last-child{font-weight:600;color:var(--ink);text-align:right}
.fx-done{text-align:center;padding:16px 0}
.fx-done .tick{width:58px;height:58px;border:1px solid var(--gd);border-radius:50%;display:grid;
  place-items:center;margin:0 auto 20px;color:var(--gd);font-size:26px}
/* Ergebniskasten der Ersteinschätzung: die Spanne ist das Ergebnis und
   soll auch so aussehen — nicht als Satz im Fließtext. */
.fx-erg{margin:24px auto 20px;max-width:520px;border:1px solid var(--gd);background:var(--ink);
  padding:26px 24px;color:#fff}
.fx-erg .k{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gdl)}
.fx-erg b{display:block;font-family:var(--disp);font-size:clamp(28px,5vw,40px);line-height:1.1;
  margin:10px 0 8px;color:#fff;font-weight:600}
.fx-erg .k2{display:block;font-size:13.5px;color:rgba(255,255,255,.7)}

/* ---------- AfA-Rechner ---------- */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--ln);background:var(--cd);margin-top:38px}
.calc .in{padding:34px 32px;border-right:1px solid var(--ln);display:grid;gap:18px;align-content:start}
.calc .out{padding:34px 32px;background:var(--ink);color:rgba(255,255,255,.66)}
.calc label{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--mut);display:block;margin-bottom:7px}
.calc input,.calc select{width:100%;padding:12px 14px;border:1px solid var(--ln);background:var(--pp);
  font-family:var(--body);font-size:15px;color:var(--ink)}
.calc input:focus,.calc select:focus{outline:2px solid var(--gd);outline-offset:-2px}
.calc .res{margin-bottom:24px}
.calc .res .l{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.42)}
.calc .res .v{font-family:var(--disp);font-size:clamp(28px,3.6vw,40px);font-weight:600;color:#fbf7ee;letter-spacing:-.03em;margin-top:4px}
.calc .res .v.g{color:var(--gdl)}
.calc .note{font-size:12.5px;color:rgba(255,255,255,.42);border-top:1px solid rgba(255,255,255,.12);padding-top:16px;margin-top:22px}

/* ---------- Terminbuchung ---------- */
.book{border:1px solid var(--ln);background:var(--cd);padding:0;overflow:hidden}
.book .bh{padding:24px 28px;border-bottom:1px solid var(--ln);background:var(--pp)}
.book .bb{padding:0}
.book .ph{padding:44px 28px;text-align:center}
.book .ph .btn{margin-top:18px}
#cal-embed{min-height:640px}
#cal-embed iframe{width:100%;border:0;display:block}

/* ---------- Rechtsgrundlagen-Karten ---------- */
.law{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
.law>div{border:1px solid var(--ln);background:var(--cd);padding:24px 24px 26px}
.law .src{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--gdi);margin-bottom:11px}
.law h4{font-family:var(--disp);font-size:16px;font-weight:600;color:var(--ink);margin-bottom:8px;line-height:1.3}
.law p{font-size:13.8px;color:var(--ink2)}

/* ---------- Responsive Ergänzungen ---------- */
@media(max-width:1100px){
  .mega-in{grid-template-columns:repeat(2,1fr);gap:8px 0}
  .mfeat{margin:0;grid-column:1/-1}
}
@media(max-width:980px){
  .lsx{grid-template-columns:1fr;gap:38px}
  .calc{grid-template-columns:1fr}
  .calc .in{border-right:0;border-bottom:1px solid var(--ln)}
  .law{grid-template-columns:1fr}
  .ben{grid-template-columns:1fr}
  .ben>div{border-right:0;border-bottom:1px solid var(--ln)}
  .ben>div:last-child{border-bottom:0}
  .stats{grid-template-columns:1fr 1fr}
  .stats>div{border-bottom:1px solid var(--ln)}
  .stats>div:nth-child(2n){border-right:0}
  /* Mega-Menü wird auf Mobil zur einfachen Liste */
  .mega{position:static;opacity:1;visibility:visible;width:auto;margin-left:0;box-shadow:none;border:0;
    background:transparent;display:none}
  .has-mega.open .mega{display:block}
  .mega-in{grid-template-columns:1fr;padding:4px 0 12px}
  .mcol,.mcol:first-child,.mcol:last-child{padding:0 0 0 14px;border-right:0}
  .mfeat{background:transparent;padding:0 0 0 14px}
  .mcta{background:var(--ink)}
}
@media(max-width:620px){
  .fx-opts,.fx-opts.two{grid-template-columns:1fr 1fr}
  .fx-fields .two-up{grid-template-columns:1fr}
  .fx-bd,.fx-hd,.fx-ft{padding-left:20px;padding-right:20px}
  .fx-bar{padding:0 20px}
  .ptbl .hd,.ptbl .rw{gap:4px 12px;padding-left:20px;padding-right:20px}
  .calc .in,.calc .out{padding:26px 22px}
}
.mth.three{grid-template-columns:repeat(3,1fr)}
.mbadge{display:inline-block;font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gdi);border:1px solid var(--ln);padding:3px 7px;margin-right:8px;
  vertical-align:2px}
@media(max-width:980px){.mth.three{grid-template-columns:1fr}}

/* Überlaufschutz für schmale Viewports */
.lsx,.lsl,.lsi,.lsi>div,.two>div,.fx,.mth,.mc{min-width:0}
.lsi p,.fx-opt{overflow-wrap:break-word;hyphens:auto}
.lsi h3,.fx-bd h3,.picker a b,.picker a i{hyphens:auto}
.fx{width:100%}
.fx-opt{min-width:0;word-break:break-word}
.tk{contain:paint}

/* Modernisierungs-Matrix im Anfrage-Assistenten */
.modgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px}
.modrow{display:grid;gap:6px}
.modrow>span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.modrow select{width:100%;padding:11px 12px;border:1px solid var(--ln);background:var(--pp);
  font-family:var(--body);font-size:14.5px;color:var(--ink)}
.modrow select:focus{outline:2px solid var(--gd);outline-offset:-2px}
.fx-fields select{width:100%;padding:12px 14px;border:1px solid var(--ln);background:var(--pp);
  font-family:var(--body);font-size:15px;color:var(--ink)}
.fx-fields label{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mut);display:block;margin-bottom:7px}
.fx-fields input,.fx-fields textarea{width:100%;padding:12px 14px;border:1px solid var(--ln);
  background:var(--pp);font-family:var(--body);font-size:15px;color:var(--ink)}
.fx-fields input:focus,.fx-fields textarea:focus,.fx-fields select:focus{outline:2px solid var(--gd);outline-offset:-2px}
@media(max-width:620px){.modgrid{grid-template-columns:1fr}}

/* ---------- Leistungen als Übersichtstabelle ---------- */
.svtbl{border:1px solid var(--ln);background:var(--cd);margin-top:38px}
.svhd{display:grid;grid-template-columns:1.1fr 1.6fr auto;gap:24px;padding:14px 26px;
  border-bottom:1px solid var(--ln);background:var(--pp);font-family:var(--mono);font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.svhd span:last-child{text-align:right}
.svgrp{padding:16px 26px 8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gdi);border-top:1px solid var(--lnl)}
.svgrp:first-of-type{border-top:0}
.svrw{display:grid;grid-template-columns:1.1fr 1.6fr auto;gap:24px;padding:14px 26px;
  align-items:baseline;border-bottom:1px solid var(--lnl);transition:background .18s}
.svrw:hover{background:var(--pp)}
.svrw .n{font-family:var(--disp);font-size:16px;font-weight:600;color:var(--ink)}
.svrw:hover .n{color:var(--gdi)}
.svrw .w{font-size:14px;color:var(--ink2)}
.svrw .p{font-family:var(--disp);font-size:16px;font-weight:600;color:var(--gdi);
  text-align:right;white-space:nowrap}
.svft{padding:16px 26px;border-top:1px solid var(--ln);background:var(--pp);
  font-size:13px;color:var(--mut)}
@media(max-width:820px){
  .svhd{display:none}
  .svrw{grid-template-columns:1fr auto;gap:4px 14px;padding:16px 20px}
  .svrw .w{grid-column:1/-1;font-size:13.5px}
  .svgrp,.svft{padding-left:20px;padding-right:20px}
}

/* Kontaktseite: Portraitkasten stapelt auf schmalen Geraeten */
.pbox{display:grid;grid-template-columns:132px 1fr;gap:24px;align-items:center}
@media(max-width:620px){.pbox{grid-template-columns:1fr;gap:18px}.pbox .figure{max-width:150px}}
.pbox2{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
@media(max-width:760px){.pbox2{grid-template-columns:1fr}}

/* Sehr schmale Geräte (ab 320 px) */
@media(max-width:430px){
  /* 'anywhere' statt 'break-word': nur damit rechnet der Browser auch die
     Mindestbreite kleiner — sonst sprengen lange Komposita das Raster. */
  body{overflow-wrap:anywhere}
  h1{font-size:clamp(23px,7.4vw,64px)}
  h2{font-size:clamp(21px,6.4vw,50px)}
  h3{font-size:19px}
  .secnav .wrap{padding-left:18px;padding-right:18px}
  .wrap{padding:0 18px}
  .ptbl .hd,.ptbl .rw,.ptbl .ft,.svrw,.svgrp,.svft{padding-left:18px;padding-right:18px}
  .fx-bd,.fx-hd,.fx-ft{padding-left:18px;padding-right:18px}
  .fx-bar{padding:0 18px}
  .cardbox{padding:24px 20px}
  .kick{letter-spacing:.16em;font-size:9.5px}
  .topbar{letter-spacing:.08em}
  .stats{grid-template-columns:1fr}
  .stats>div{border-right:0;border-bottom:1px solid var(--ln)}
  .stats>div:last-child{border-bottom:0}
  .stats .l{letter-spacing:.12em}
  .fg,.chain,.law,.ben,.qsteps,.persp,.hal-g,.two,.zg{grid-template-columns:1fr}
  .brs,.brs-2{grid-template-columns:1fr}
  .lsi{grid-template-columns:1fr}
  .lsi .ic{display:none}
  .badge{flex-wrap:wrap}
  .btn{padding:14px 18px;font-size:10.5px;letter-spacing:.1em}
  .rung .r-mn ul{grid-template-columns:1fr}
  .br{padding:26px 18px}
  .br .go{white-space:normal}
  .br .foot{gap:8px}
  .r-mn,.r-sd{padding:20px 18px}
  .mc{padding:22px 18px}
  .ben>div{padding:26px 18px}
  .qsteps>div,.persp>div{padding:22px 18px}
}

/* ============================================================
   Erweiterung: Terminwahl, aufklappbare Preise, Vorher/Nachher,
   Bewertungen
   ============================================================ */

/* ---------- Terminlänge wählen ---------- */
.calpick{display:grid;gap:12px}
.calbtn{text-align:left;background:var(--cd);border:1px solid var(--ln);padding:18px 20px;cursor:pointer;
  transition:.2s;font-family:var(--body);display:block;width:100%}
.calbtn:hover{border-color:var(--gd);transform:translateY(-2px)}
.calbtn.on{border-color:var(--gd);box-shadow:inset 0 0 0 1px var(--gd)}
.calbtn b{display:block;font-family:var(--disp);font-size:17px;font-weight:600;color:var(--ink)}
.calbtn i{display:block;font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gdi);margin-top:4px}
.calbtn span{display:block;font-size:13.5px;color:var(--mut);margin-top:7px;line-height:1.5}

/* ---------- Aufklappbare Honorarzeilen ---------- */
.ptbl .rw-x{cursor:pointer}
.ptbl .rw-x:focus-visible{outline:2px solid var(--gd);outline-offset:-2px}
.chev{display:inline-block;width:7px;height:7px;margin-left:11px;vertical-align:2px;
  border-right:1.6px solid var(--gd);border-bottom:1.6px solid var(--gd);
  transform:rotate(45deg);transition:transform .25s}
.ptbl .rw-x.open .chev{transform:rotate(225deg) translate(-2px,-2px)}
.rw-info{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s ease;
  background:var(--pp);border-bottom:1px solid var(--lnl)}
.rw-info.open{grid-template-rows:1fr}
.rw-info>.inner{overflow:hidden;font-size:14px;color:var(--ink2);line-height:1.62}
.rw-info>.inner>div{padding:16px 26px 20px}
.rw-info b{color:var(--ink);font-weight:600}

/* ---------- Vorher/Nachher ---------- */
.cobj{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--ln);background:var(--cd);
  margin-top:34px}
.cobj>div{padding:18px 20px;border-right:1px solid var(--ln)}
.cobj>div:last-child{border-right:0}
.cobj .k{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mut)}
.cobj .v{display:block;font-family:var(--disp);font-size:16px;font-weight:600;color:var(--ink);margin-top:5px}
.compare{display:grid;grid-template-columns:1fr 62px 1fr;align-items:stretch;gap:0;margin-top:22px}
.ccol{border:1px solid var(--ln);background:var(--cd);padding:26px 26px 22px;opacity:0;
  transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
.compare.go .ccol{opacity:1;transform:none}
.compare.go .ccol.neu{transition-delay:.18s}
.ccol.neu{background:var(--ink);border-color:var(--ink)}
.compare .ch{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);
  padding-bottom:14px;border-bottom:1px solid var(--ln);margin-bottom:16px}
.ccol.neu .ch{color:var(--gdl);border-color:rgba(255,255,255,.16)}
.compare .cr{display:flex;justify-content:space-between;gap:16px;padding:8px 0;font-size:14.5px;color:var(--ink2)}
.compare .cr span:last-child{font-weight:600;color:var(--ink);text-align:right}
.compare .ccol.neu .cr{color:rgba(255,255,255,.6)}
.compare .ccol.neu .cr span:last-child{color:#fbf7ee}
.compare .csum{margin-top:16px;padding-top:16px;border-top:1px solid var(--ln)}
.compare .ccol.neu .csum{border-color:rgba(255,255,255,.16)}
.compare .cl{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--mut)}
.compare .ccol.neu .cl{color:rgba(255,255,255,.45)}
.compare .cv{display:block;margin-top:5px}
.compare .cv b{font-family:var(--disp);font-size:clamp(26px,3.4vw,38px);font-weight:600;letter-spacing:-.03em;
  color:var(--ink)}
.compare .ccol.neu .cv b{color:var(--gdl)}
.carrow{display:grid;place-items:center;color:var(--gd);font-size:22px}
.carrow span{opacity:0;transform:translateX(-8px);transition:.5s ease .3s}
.compare.go .carrow span{opacity:1;transform:none}
.cres{margin-top:18px;border:1px solid var(--gd);background:linear-gradient(115deg,#fffdf6,#f7efd9)}
.cres-in{padding:28px 30px;text-align:center}
.cres .ck{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gdi)}
.cres .cvv b{font-family:var(--disp);font-size:clamp(32px,4.6vw,52px);font-weight:600;letter-spacing:-.035em;
  color:var(--gdi);display:block;margin:8px 0 6px}
.cres p{font-size:14.5px;color:var(--ink2);max-width:60ch;margin:0 auto}

/* ---------- Bewertungen ---------- */
.revbox{border:1px solid var(--ln);background:var(--cd);padding:30px 30px 34px;margin-top:34px}
.revhead{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.revscore{font-family:var(--disp);font-size:44px;font-weight:600;color:var(--ink);letter-spacing:-.03em;
  line-height:1}
.revstars i{font-style:normal;color:var(--gd);font-size:17px;letter-spacing:2px}
.revmeta{font-size:13.5px;color:var(--mut);margin-top:4px}
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
.rev{border:1px solid var(--ln);background:var(--pp);padding:22px 22px 20px;margin:0}
.rev .st i{font-style:normal;color:var(--ln);font-size:14px;letter-spacing:1px}
.rev .st i.on{color:var(--gd)}
.rev blockquote{font-size:14.5px;color:var(--ink2);line-height:1.6;margin:12px 0 16px}
.rev figcaption{display:flex;align-items:center;gap:12px}
.rev .av{width:34px;height:34px;flex:none;display:grid;place-items:center;background:var(--ink);
  color:var(--gdl);font-family:var(--mono);font-size:11px;border-radius:50%}
.rev figcaption b{display:block;font-size:14px;color:var(--ink)}
.rev figcaption i{display:block;font-style:normal;font-size:12.5px;color:var(--mut)}
.revempty{font-size:14.5px;color:var(--mut);margin-top:20px;max-width:70ch}
#bewertungen.has-revs .revempty{display:none}

@media(max-width:900px){
  .cobj{grid-template-columns:1fr 1fr}
  .cobj>div:nth-child(2n){border-right:0}
  .cobj>div:nth-child(-n+2){border-bottom:1px solid var(--ln)}
  .compare{grid-template-columns:1fr;gap:0}
  .carrow{padding:10px 0;transform:rotate(90deg)}
  .revs{grid-template-columns:1fr}
}
@media(max-width:430px){
  .cobj{grid-template-columns:1fr}
  .cobj>div{border-right:0;border-bottom:1px solid var(--ln)}
  .cobj>div:last-child{border-bottom:0}
  .ccol{padding:22px 18px}
  .cres-in{padding:24px 18px}
  .revbox{padding:24px 18px 26px}
  .rw-info>.inner,.rw-info.open>.inner{padding-left:18px;padding-right:18px}
}

/* ---------- Vertrauensblock im Hero ---------- */
.trust{margin-top:34px;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.tchips{display:flex;flex-wrap:wrap;gap:8px 20px}
.tchips span{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.72);display:inline-flex;align-items:center;gap:7px}
.tchips i{font-style:normal;color:var(--gdl);font-size:11px}
body:not(.has-cine) .tchips span{color:var(--mut)}
body:not(.has-cine) .tchips i{color:var(--gd)}
@media(max-width:620px){.tchips{gap:6px 14px}.tchips span{font-size:9px;letter-spacing:.1em}}

/* ---------- Kontakt: Umschalter zwischen Nachricht und Termin ---------- */
.tabs{display:inline-flex;border:1px solid var(--ln);background:var(--cd);padding:5px;gap:4px;margin-bottom:34px}
.tabs button{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:13px 22px;border:0;background:none;color:var(--mut);cursor:pointer;transition:.2s;white-space:nowrap}
.tabs button:hover{color:var(--ink)}
.tabs button.on{background:var(--ink);color:var(--gdl)}
.tabpane{display:none}
.tabpane.on{display:block;animation:fxin .3s ease}
.privnote{font-size:12.8px;color:var(--mut);line-height:1.6;margin-top:-2px}
.privnote a{color:var(--gdi);text-decoration:underline;text-underline-offset:2px}
.formwrap{max-width:820px}
/* Cal.com-Kalender: volle Breite, ausreichend hoch, damit die Slots sichtbar sind */
#cal-embed{min-height:0}
#cal-embed iframe{width:100%;height:820px;border:0;display:block;background:var(--cd)}
.calpick{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bookhead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:22px}
@media(max-width:820px){
  .tabs{display:flex;width:100%}
  .tabs button{flex:1;padding:13px 10px;font-size:10px;letter-spacing:.1em}
  .calpick{grid-template-columns:1fr}
  #cal-embed iframe{height:900px}
}

/* Hero: mehr Luft für die Aussage, weniger Text */
.cine .wrap{max-width:1280px}
.cine h1{font-size:clamp(34px,5.2vw,68px);line-height:1.04}
.hero-lead{font-size:clamp(17px,1.7vw,21px);max-width:52ch;margin-top:24px;color:rgba(255,255,255,.82)}
.cine .cl{margin-top:26px}
@media(max-width:1100px){.cine .wrap{max-width:var(--max)}}

/* ---------- Fallbeispiel-Slider ---------- */
.fh{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.sl-nav{display:flex;gap:8px}
.sl-nav button{width:46px;height:46px;border:1px solid var(--ln);background:var(--cd);color:var(--ink);
  cursor:pointer;font-size:16px;transition:.2s}
.sl-nav button:hover{border-color:var(--gd);color:var(--gdi);transform:translateY(-2px)}
.sl-nav button[disabled]{opacity:.35;cursor:default;transform:none}
.sl{margin-top:38px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  -webkit-overflow-scrolling:touch}
.sl::-webkit-scrollbar{display:none}
.sl-track{display:flex;gap:20px;padding-bottom:4px}
.sl-item{scroll-snap-align:start;flex:0 0 clamp(300px,42%,468px);border:1px solid var(--ln);
  background:var(--cd);display:flex;flex-direction:column;overflow:hidden;
  transition:box-shadow .45s ease,border-color .45s ease}
.sl-body{padding:26px 30px 26px;display:flex;flex-direction:column;flex:1}
/* Objektfoto der Karte: zoomt langsam heran, sobald die Karte aktiv ist */
.sl-pic{position:relative;height:172px;overflow:hidden;background:var(--pp2)}
.sl-pic img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.02);transition:transform 6s cubic-bezier(.2,.6,.2,1),filter .5s ease;
  filter:saturate(.86) contrast(1.02)}
.sl-item.aktiv .sl-pic img{transform:scale(1.12);filter:saturate(1) contrast(1.04)}
.sl-pic::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,18,14,.06) 0%,rgba(20,18,14,.5) 100%)}
.sl-tag{position:absolute;left:0;bottom:0;z-index:2;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gdl);background:rgba(20,18,14,.82);
  padding:8px 14px;backdrop-filter:blur(4px)}
.sl-item.aktiv{border-color:var(--gd);box-shadow:0 30px 64px -40px rgba(20,18,14,.55)}
.sl-item h3{font-size:21px;line-height:1.2}
.sl-obj{font-size:13.5px;color:var(--mut);margin-top:8px;line-height:1.55}
.sl-cmp{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.sl-col{border:1px solid var(--ln);padding:16px 16px 14px;background:var(--pp)}
.sl-col.neu{background:var(--ink);border-color:var(--ink)}
.sl-col .l{display:block;font-family:var(--mono);font-size:8.6px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--mut);line-height:1.5;min-height:2.6em}
.sl-col.neu .l{color:rgba(255,255,255,.45)}
.sl-col b{display:block;font-family:var(--disp);font-size:22px;font-weight:600;color:var(--ink);
  margin-top:6px;letter-spacing:-.02em;line-height:1.15}
.sl-col.neu b{color:var(--gdl)}
.sl-col i{display:block;font-style:normal;font-size:12.5px;color:var(--mut);margin-top:5px;line-height:1.4}
.sl-col.neu i{color:rgba(255,255,255,.6)}
.sl-res{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-top:16px;
  padding:15px 16px;border:1px solid var(--gd);background:linear-gradient(115deg,#fffdf6,#f7efd9)}
.sl-res span{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--gdi)}
.sl-res b{font-family:var(--disp);font-size:24px;font-weight:600;color:var(--gdi);letter-spacing:-.02em;
  white-space:nowrap}
.sl-note{font-size:13px;color:var(--mut);margin-top:16px;line-height:1.6;flex:1}
.sl-go{display:inline-block;margin-top:18px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);border-bottom:1.5px solid var(--gd);padding-bottom:3px;
  align-self:flex-start;transition:.2s}
.sl-go:hover{color:var(--gdi)}
/* Die Punkte sehen aus wie schmale Striche, sind zum Tippen aber 26 Pixel
   hoch: Der sichtbare Strich sitzt in einer unsichtbaren Flaeche, sonst
   trifft man ihn mit dem Finger nicht. */
.sl-dots{display:flex;gap:7px;margin-top:14px;justify-content:center}
.sl-dots button{width:26px;height:26px;border:0;padding:0;background:none;cursor:pointer;
  display:grid;place-items:center;transition:.25s}
.sl-dots button::before{content:"";display:block;width:26px;height:3px;background:var(--ln);
  transition:.25s}
.sl-dots button.on::before{background:var(--gd);width:40px}
.sl-dots button.on{width:40px}
@media(max-width:820px){
  .sl-item{flex:0 0 84%}
  .sl-body{padding:22px}
  .sl-pic{height:146px}
  .fh{gap:20px}
  .sl-nav{display:none}
}
@media(max-width:430px){
  .sl-item{flex:0 0 90%}
  .sl-cmp{grid-template-columns:1fr}
  .sl-col .l{min-height:0}
}

/* Fallbeispiel-Karten: bauen sich beim Sichtbarwerden auf */
.sl-item{opacity:0;transform:translateY(18px)}
.sl-item.in{opacity:1;transform:none;
  transition:opacity .55s ease,transform .55s cubic-bezier(.2,.72,.2,1),
             box-shadow .45s ease,border-color .45s ease}
/* Laufbalken des 30-Sekunden-Wechsels */
.sl-prog{height:2px;background:var(--ln);margin-top:30px;overflow:hidden}
.sl-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gdl),var(--gd));
  transform-origin:left}
.sl-prog.laeuft i{animation:slProg linear forwards;animation-duration:var(--d,30s)}
@keyframes slProg{from{width:0}to{width:100%}}
.sl{margin-top:16px}
/* Ergebniszeile der aktiven Karte hebt sich kurz an */
.sl-item.aktiv .sl-res{animation:slPop .7s cubic-bezier(.2,.8,.25,1)}
@keyframes slPop{0%{transform:scale(1)}35%{transform:scale(1.035)}100%{transform:scale(1)}}
.sl-bar{display:block;height:4px;background:var(--ln);margin-top:11px;overflow:hidden}
.sl-col.neu .sl-bar{background:rgba(255,255,255,.16)}
.sl-bar i{display:block;height:100%;width:0;background:var(--gd);transition:width .9s cubic-bezier(.25,.8,.3,1) .15s}
.sl-col.neu .sl-bar i{background:var(--gdl)}
.sl-item.in .sl-bar i{width:var(--p)}
@media(prefers-reduced-motion:reduce){
  .sl-item{opacity:1;transform:none;transition:none}
  .sl-bar i,.sl-pic img{transition:none}
  .sl-item.aktiv .sl-res{animation:none}
  .sl-prog{display:none}
}

/* ---------- Interne Hilfsseite „Einrichten" ---------- */
.dltable{border:1px solid var(--ln);background:var(--cd);margin-top:30px}
.dlrow{display:grid;grid-template-columns:96px 1fr auto;gap:20px;align-items:center;
  padding:14px 20px;border-bottom:1px solid var(--lnl)}
.dlrow:last-child{border-bottom:0}
.dlprev{width:96px;height:60px;background:var(--pp2);overflow:hidden;display:grid;place-items:center;
  font-family:var(--mono);font-size:11px;color:var(--mut)}
.dlprev img{width:100%;height:100%;object-fit:cover}
.dlrow b{font-family:var(--mono);font-size:13px;color:var(--ink);word-break:break-all}
.dlq{display:block;font-size:12.5px;color:var(--mut);margin-top:3px}
.dlrow .btn{padding:11px 16px;font-size:10px;white-space:nowrap}
.revjson{margin-top:18px;background:var(--ink);color:#d8d2c4;padding:18px 20px;font-family:var(--mono);
  font-size:11.5px;line-height:1.6;overflow-x:auto;white-space:pre;max-height:300px}
.revjson:empty{display:none}
.revrow{border:1px solid var(--ln);background:var(--cd);padding:16px 16px 12px;margin-top:12px;position:relative}
.revrow .kill{position:absolute;top:8px;right:8px;border:0;background:none;color:var(--mut);
  cursor:pointer;font-size:16px;line-height:1;padding:4px 7px}
.revrow .kill:hover{color:var(--gdi)}
@media(max-width:700px){
  .dlrow{grid-template-columns:64px 1fr;gap:12px}
  .dlprev{width:64px;height:48px}
  .dlrow .btn{grid-column:1/-1;justify-content:center}
}
.vidbox{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;
  border:1px solid var(--gd);background:linear-gradient(115deg,#fffdf6,#f7efd9);
  padding:32px 34px;margin-top:26px}
.vidbox h3{font-family:var(--mono);font-size:14px;letter-spacing:.04em;color:var(--gdi);
  text-transform:none;font-weight:500}
@media(max-width:820px){.vidbox{grid-template-columns:1fr;gap:24px;padding:26px 22px}}
/* Bilder-Check auf der Hilfsseite */
.bctable{border:1px solid var(--ln);background:var(--cd);margin-top:26px}
.bcrow{display:grid;grid-template-columns:36px 1fr 1.3fr;gap:16px;align-items:center;
  padding:14px 20px;border-bottom:1px solid var(--lnl)}
.bcrow:last-child{border-bottom:0}
.bcs{width:26px;height:26px;display:grid;place-items:center;font-size:14px;border-radius:50%}
.bcs.wait{background:var(--pp2);color:var(--mut)}
.bcs.good{background:#1f5c33;color:#fff}
.bcs.warn{background:var(--gd);color:#fff}
.bcs.bad{background:#8c2f2f;color:#fff}
.bcn b{display:block;font-size:15px;color:var(--ink)}
.bcn i{display:block;font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--mut);margin-top:2px}
.bcm{font-size:13.5px;color:var(--ink2);line-height:1.5}
.bcm code{font-family:var(--mono);font-size:12px;background:var(--pp2);padding:1px 5px}
@media(max-width:700px){
  .bcrow{grid-template-columns:26px 1fr;gap:10px}
  .bcm{grid-column:2}
}

/* ============================================================
   Objektband, Fallbeispiel-Foto und Kontaktspalte
   ============================================================ */

/* Endlos laufendes Band mit eigenen Objektfotos */
.ob{overflow:hidden}
.ob-h{margin-bottom:34px}
.ob-lauf{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.ob-lauf::-webkit-scrollbar{display:none}
.ob-reihe{display:flex;gap:14px;width:max-content;animation:obLauf 76s linear infinite;
  will-change:transform}
.ob-lauf:hover .ob-reihe{animation-play-state:paused}
.ob-reihe figure{margin:0;flex:0 0 auto;width:300px;height:200px;overflow:hidden;
  border:1px solid var(--ln);background:var(--pp2);position:relative}
.ob-reihe img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.82) contrast(1.02);transition:filter .4s ease,transform .6s ease}
.ob-reihe figure:hover img{filter:saturate(1.02) contrast(1.05);transform:scale(1.05)}
@keyframes obLauf{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media(max-width:640px){.ob-reihe figure{width:224px;height:150px}}
@media(prefers-reduced-motion:reduce){
  .ob-reihe{animation:none}
  .ob-lauf{mask-image:none;-webkit-mask-image:none}
}

/* Objektfoto über einem Fallbeispiel */
.cpic{margin:30px 0 0;position:relative;overflow:hidden;border:1px solid var(--ln)}
.cpic img{width:100%;height:clamp(220px,32vw,400px);object-fit:cover;display:block;
  transform:scale(1.03);transition:transform 8s cubic-bezier(.2,.6,.2,1)}
.cpic.in img{transform:scale(1.11)}
.cpic figcaption{position:absolute;left:0;bottom:0;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--gdl);background:rgba(20,18,14,.8);
  padding:9px 15px}
@media(prefers-reduced-motion:reduce){.cpic img{transition:none;transform:none}}

/* ============================================================
   Restnutzungsdauer-Strecke (assets/rnd/)
   ============================================================ */
.rs{border:1px solid var(--ln);background:var(--cd);margin-top:34px}
.rs-kopf{border-bottom:1px solid var(--ln);background:var(--pp)}
.rs-schritte{display:flex;list-style:none;margin:0;padding:0;overflow-x:auto;scrollbar-width:none}
.rs-schritte::-webkit-scrollbar{display:none}
.rs-schritte li{flex:1;min-width:118px;display:flex;align-items:center;gap:9px;padding:16px 14px;
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--mut);white-space:nowrap;border-right:1px solid var(--ln);transition:.25s}
.rs-schritte li:last-child{border-right:0}
.rs-schritte li .n{width:22px;height:22px;flex:none;display:grid;place-items:center;
  border:1px solid var(--ln);border-radius:50%;font-size:10px;transition:.25s}
.rs-schritte li.fertig{color:var(--ink2);cursor:pointer}
.rs-schritte li.fertig .n{background:var(--gd);border-color:var(--gd);color:#fff}
.rs-schritte li.on{color:var(--ink);background:var(--cd)}
.rs-schritte li.on .n{border-color:var(--gd);color:var(--gdi)}
.rs-bar{height:2px;background:var(--ln)}
.rs-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gdl),var(--gd));
  transition:width .45s cubic-bezier(.2,.72,.2,1)}

.rs-buehne{padding:34px 32px}
.rs-buehne h3{font-size:clamp(20px,2.2vw,25px);line-height:1.2}
.rs-lead{font-size:14.5px;color:var(--mut);margin:12px 0 26px;max-width:66ch;line-height:1.6}
.rs-zeile{margin-bottom:20px}
.rs-zeile label{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--mut);margin-bottom:7px}
.rs-hint{display:block;text-transform:none;letter-spacing:0;font-family:var(--body);
  font-size:12.5px;color:var(--mut);margin-top:4px;line-height:1.5}
.rs-hint a{color:var(--gdi);text-decoration:underline}
.rs-zeile input,.rs-zeile select{width:100%;padding:13px 14px;border:1px solid var(--ln);
  background:var(--pp);font-family:var(--body);font-size:15px;color:var(--ink);border-radius:0}
.rs-zeile input:focus,.rs-zeile select:focus{outline:2px solid var(--gd);outline-offset:-2px}
.rs-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
.rs-punkte{margin-top:8px;font-family:var(--mono);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--mut)}
.rs-punkte b{color:var(--gdi);font-size:15px}
.rs-mehr{border:1px dashed var(--ln);padding:14px 16px;margin-top:6px}
.rs-mehr summary{cursor:pointer;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gdi)}

.rs-presets{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:26px}
.rs-presets span{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mut);margin-right:4px}
.rs-presets button{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  padding:8px 13px;border:1px solid var(--ln);background:var(--pp);color:var(--ink2);cursor:pointer;transition:.2s}
.rs-presets button:hover{border-color:var(--gd);color:var(--gdi)}

.rs-fuss{display:flex;align-items:center;gap:16px;padding:0 32px 32px;flex-wrap:wrap}
.rs-fuss .btn{flex:none}
.rs-fehler{flex:1;min-width:200px;margin:0;font-size:13.5px;color:#8c2f2f;
  border-left:3px solid #8c2f2f;padding-left:12px}
.rs-fuss [data-nav="weiter"]{margin-left:auto}

/* Ergebnis */
.rs-erg{border:1px solid var(--gd);background:linear-gradient(150deg,#fffdf6,#f7efd9);padding:32px}
.rs-erg-kick{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gdi);margin-bottom:16px}
.rs-spanne{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  font-family:var(--disp);font-weight:600;color:var(--ink);letter-spacing:-.03em}
.rs-spanne .z{font-size:clamp(46px,8vw,76px);line-height:1}
.rs-spanne .bis{font-size:clamp(17px,2vw,22px);color:var(--mut);font-weight:400}
.rs-spanne .e{font-size:clamp(19px,2.4vw,26px);color:var(--gdi)}
.rs-skala{position:relative;height:6px;background:rgba(20,18,14,.09);margin:22px 0 30px}
.rs-skala i{position:absolute;top:0;bottom:0;left:var(--a);width:var(--b);
  background:linear-gradient(90deg,var(--gd),var(--gdl));animation:rsSk .9s cubic-bezier(.2,.72,.2,1)}
@keyframes rsSk{from{transform:scaleX(.02);transform-origin:left}to{transform:scaleX(1)}}
.rs-skala span{position:absolute;top:12px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.13em;color:var(--mut)}
.rs-skala .m0{left:0}.rs-skala .m1{right:0}
.rs-erg-satz{margin-top:26px;font-size:15px;line-height:1.65;max-width:70ch}
.rs-erg-satz b{color:var(--gdi)}
.rs-link{background:none;border:0;padding:0;font:inherit;color:var(--gdi);
  text-decoration:underline;cursor:pointer}
.rs-tab{width:100%;border-collapse:collapse;margin-top:24px;font-size:14.5px}
.rs-tab th,.rs-tab td{text-align:left;padding:13px 0;border-bottom:1px solid rgba(176,141,46,.25);vertical-align:top}
.rs-tab th{font-weight:400;color:var(--ink2);padding-right:18px}
.rs-tab td{text-align:right;font-family:var(--disp);font-weight:600;white-space:nowrap}
.rs-tab tr.stark td{color:var(--gdi);font-size:16.5px}
.rs-warn{margin-top:24px;border-left:3px solid var(--gd);background:rgba(255,255,255,.6);padding:16px 18px}
.rs-warn b{display:block;font-family:var(--disp);font-size:15.5px;margin-bottom:6px}
.rs-warn p{font-size:14px;line-height:1.6;color:var(--ink2);margin:0}
.rs-diszl{margin-top:26px;font-size:12.5px;line-height:1.65;color:var(--mut);max-width:82ch}
.rs-erg-offen h3{font-size:clamp(21px,2.4vw,27px)}

/* Kontaktblock unter dem Ergebnis */
.rs-kontakt{margin-top:30px;border:1px solid var(--ln);background:var(--pp);padding:30px 32px}
.rs-kontakt h4{font-family:var(--disp);font-size:19px;font-weight:600;margin-bottom:10px}
.rs-kontakt>p{font-size:14.5px;color:var(--ink2);line-height:1.65;margin-bottom:24px;max-width:70ch}
.rs-form label{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--mut);margin-bottom:7px}
.rs-form input,.rs-form textarea{width:100%;padding:13px 14px;border:1px solid var(--ln);
  background:var(--cd);font-family:var(--body);font-size:15px;color:var(--ink);border-radius:0}
.rs-form>div{margin-bottom:18px}
/* Höhere Spezifität als ".rs-form label", sonst gewinnt dort display:block
   und die Einwilligung klebt am Kästchen. */
.rs-form label.rs-check{display:flex;gap:12px;align-items:flex-start;margin:4px 0 22px;cursor:pointer}
.rs-check input{width:17px;height:17px;flex:none;margin-top:2px}
.rs-check span{font-family:var(--body);font-size:13px;letter-spacing:0;text-transform:none;
  color:var(--ink2);line-height:1.6}
.rs-check a{color:var(--gdi);text-decoration:underline}
.rs-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.rs-formmeld{margin-top:14px;font-size:14px}
.rs-formmeld.fehler{color:#8c2f2f;border-left:3px solid #8c2f2f;padding-left:12px}
.rs-formmeld.lauf{color:var(--mut)}
.rs-danke b{display:block;font-family:var(--disp);font-size:19px;color:var(--gdi);margin-bottom:8px}
.rs-danke p{font-size:14.5px;line-height:1.65;color:var(--ink2)}

@media(max-width:640px){
  /* Die Beträge dürfen nicht umbrechen, die Beschriftung schon. Nebeneinander
     bleibt für die Beschriftung dann zu wenig Platz — sie zerfiele in einzelne
     Buchstaben. Deshalb auf schmalen Geräten untereinander. */
  .rs-tab tr{display:block;padding:12px 0;border-bottom:1px solid rgba(176,141,46,.25)}
  .rs-tab tr:last-child{border-bottom:0}
  .rs-tab th,.rs-tab td{display:block;border:0;padding:0}
  .rs-tab th{font-size:13px;margin-bottom:3px}
  /* In eigener Zeile darf der Betrag umbrechen — sonst schiebt sich
     "1.972 € bis 2.320 € pro Jahr" über den Rand hinaus. */
  .rs-tab td{text-align:left;font-size:17px;white-space:normal}
  .rs-tab tr.stark td{font-size:18px}
}
@media(max-width:760px){
  .rs-grid{grid-template-columns:1fr;gap:0}
  .rs-buehne{padding:26px 20px}
  .rs-fuss{padding:0 20px 26px}
  .rs-erg,.rs-kontakt{padding:24px 20px}
  /* Die Schrittleiste laesst sich waagerecht schieben — sie darf also
     breiter bleiben, statt die Schrift auf 9 px zu druecken. */
  .rs-schritte li{min-width:112px;padding:13px 11px;font-size:11px;letter-spacing:.08em}
}
@media(max-width:430px){
  .rs-fuss .btn{width:100%;justify-content:center}
  .rs-fuss [data-nav="weiter"]{margin-left:0}
  .rs-spanne{gap:8px}
}
@media(prefers-reduced-motion:reduce){
  .rs-bar i,.rs-skala i{transition:none;animation:none}
}

/* „Wie gerechnet wurde" — Herkunft jeder Zahl, aufklappbar */
.rs-grenzen{margin-top:26px;border-top:1px solid rgba(176,141,46,.3);padding-top:18px}
.rs-grenzen summary{cursor:pointer;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gdi);list-style:none}
.rs-grenzen summary::-webkit-details-marker{display:none}
/* Geschütztes Leerzeichen, sonst fällt der Abstand hinter dem Zeichen weg. */
.rs-grenzen summary::before{content:"+\00a0";font-weight:700}
.rs-grenzen[open] summary::before{content:"\2212\00a0";font-weight:700}
.rs-grenzen-in{padding-top:18px}
.rs-grenzen dl{display:grid;grid-template-columns:auto 1fr;gap:8px 22px;margin:0;font-size:13.5px}
.rs-grenzen dt{color:var(--mut)}
.rs-grenzen dd{margin:0;color:var(--ink);font-weight:500}
.rs-grenzen-t{margin:20px 0 10px;font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--mut)}
.rs-grenzen ul{margin:0;padding-left:17px;font-size:13.5px}
.rs-grenzen li{margin-bottom:11px;line-height:1.55}
.rs-grenzen li b{font-weight:500;color:var(--ink)}
.rs-quelle{display:block;font-size:11.5px;color:var(--mut);margin-top:3px;line-height:1.5}
@media(max-width:560px){.rs-grenzen dl{grid-template-columns:1fr;gap:2px 0}
  .rs-grenzen dd{margin-bottom:10px}}

/* Weg vom Ergebnis zum Auftrag */
.rs-weiter{margin-top:26px;border:1px solid var(--ln);background:var(--cd);padding:28px 32px}
.rs-weiter h4{font-family:var(--disp);font-size:19px;font-weight:600;margin-bottom:10px}
.rs-weiter p{font-size:14.5px;color:var(--ink2);line-height:1.65;max-width:70ch;margin-bottom:20px}

/* Auftragsstrecke */
.rs-uebernahme{border-left:3px solid var(--gd);background:rgba(176,141,46,.07);padding:12px 16px;
  font-size:14px;color:var(--ink2);line-height:1.6;margin-bottom:24px}
.rs-untertitel{font-family:var(--disp);font-size:17px;font-weight:600;margin:30px 0 14px;
  padding-top:22px;border-top:1px solid var(--ln)}
.rs-haken{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}
.rs-hk{display:flex;gap:11px;align-items:flex-start;cursor:pointer;font-size:14.5px;
  color:var(--ink2);line-height:1.5}
.rs-hk input{width:17px;height:17px;flex:none;margin-top:1px}
.a-vorschau{border:1px solid var(--gd);background:linear-gradient(115deg,#fffdf6,#f7efd9);
  padding:20px 24px;margin-bottom:8px}
.a-vorschau .k{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gdi)}
.a-vorschau b{display:block;font-family:var(--disp);font-size:clamp(26px,3.4vw,34px);
  font-weight:600;color:var(--ink);letter-spacing:-.02em;margin:6px 0 4px}
.a-vorschau .s{font-size:14px;color:var(--mut)}
.a-zusatz{display:grid;gap:12px;margin-bottom:26px}
.a-zopt{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:start;
  border:1px solid var(--ln);background:var(--pp);padding:18px 20px;cursor:pointer;transition:.2s}
.a-zopt:hover{border-color:var(--gd)}
.a-zopt input{width:18px;height:18px;margin-top:2px}
.a-zopt .t{font-size:13.5px;color:var(--mut);line-height:1.6}
.a-zopt .t b{display:block;font-family:var(--disp);font-size:16px;font-weight:600;
  color:var(--ink);margin-bottom:4px}
.a-zopt .p{font-family:var(--disp);font-size:15px;font-weight:600;color:var(--gdi);white-space:nowrap}
.a-summe{border:1px solid var(--ln);background:var(--pp);padding:20px 24px;margin:24px 0}
.a-summe .z{display:flex;justify-content:space-between;gap:16px;padding:9px 0;font-size:14.5px;
  border-bottom:1px solid var(--ln)}
.a-summe .z b{font-family:var(--disp);font-weight:600;white-space:nowrap}
.a-summe .ges{border-bottom:0;border-top:2px solid var(--gd);margin-top:6px;padding-top:14px;
  font-size:17px}
.a-summe .ges b{color:var(--gdi);font-size:21px}
.a-summe .hin{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--mut);margin-top:10px}
.a-abschluss{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.a-fertig{text-align:center;padding:20px 0}
.a-fertig .tick{width:64px;height:64px;margin:0 auto 20px;border:2px solid var(--gd);border-radius:50%;
  display:grid;place-items:center;font-size:28px;color:var(--gdi)}
.a-fertig h3{font-size:clamp(21px,2.6vw,27px);margin-bottom:14px}
.a-fertig p{font-size:15px;color:var(--ink2);line-height:1.65;max-width:62ch;margin:0 auto 12px}
@media(max-width:760px){
  .rs-haken{grid-template-columns:1fr}
  .a-zopt{grid-template-columns:auto 1fr;gap:12px}
  .a-zopt .p{grid-column:2;margin-top:6px}
  .rs-weiter{padding:24px 20px}
}

/* ---------- Foto im Leistungsabschnitt ----------
   Es faellt beim Sichtbarwerden leicht heran; der Zoom beim Ueberfahren
   ist bewusst klein — ein Foto, das sich stark bewegt, zieht die
   Aufmerksamkeit von den Leistungen ab, um die es hier geht. */
/* Die Bildflaeche ist fest, nicht das Foto. Vorher bestimmte das
   Seitenverhaeltnis der Datei die Hoehe: ein Hochformat machte die
   Spalte doppelt so lang wie geplant, und beim Austausch eines Fotos
   verschob sich der ganze Abschnitt. Mit aspect-ratio steht die Flaeche
   fest, object-fit:cover fuellt sie randlos und schneidet an den langen
   Seiten - object-position haelt dabei die Gebaeudemitte im Bild.
   height:100% ist noetig, weil aspect-ratio auf dem <figure> sitzt. */
.lsf{margin-top:34px;overflow:hidden;border:1px solid var(--ln);
  display:flex;flex-direction:column}
.lsf img{display:block;width:100%;height:100%;aspect-ratio:3/2;object-fit:cover;
  object-position:50% 50%;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.lsf:hover img{transform:scale(1.03)}
.lsf figcaption{font-size:13px;color:var(--mut);padding:12px 16px;background:var(--cd);
  border-top:1px solid var(--ln);line-height:1.5}
@media(prefers-reduced-motion:reduce){.lsf img{transition:none}.lsf:hover img{transform:none}}
@media(max-width:980px){.lsf{max-width:520px}}