:root{
  color-scheme:light;
  --navy:#13304F; --navy-deep:#072942; --navy-soft:#1E4368;
  --gold:#C9A94E; --gold-light:#C9A94E;
  /* Das Marken-Gold ist fuer Flaechen und grosse Zahlen. Kleine Schrift
     braucht einen dunkleren Ton, sonst verschwindet sie auf Creme. */
  --gold-ink:#C9A94E;
  --creme:#F3EFE6; --paper:#FBF8F1;
  --ink:#16202B; --muted:#4A5765;
  --line:rgba(19,48,79,.10); --line-strong:rgba(19,48,79,.19);
  --surface:#FFFDF8; --surface-2:#EEE9DD;
  --ok:#2F7D53; --warn:#B7860B; --bad:#A63A2E;
  --shadow:0 1px 1px rgba(7,41,66,.03), 0 8px 24px -16px rgba(7,41,66,.22);
  --maxw:1260px; --r:6px;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.32,.72,0,1);
  /* Drei Geschwindigkeiten, mehr braucht es nicht.
     d1 ist Rueckmeldung auf eine Handlung - die muss sofort da sein.
     d2 ist Zustandswechsel, d3 ist Einblenden von Inhalt. Alles darueber
     fuehlt sich traege an, auch wenn es "sanft" gemeint war. */
  --d1:.13s; --d2:.2s; --d3:.36s;
  --ease-out:cubic-bezier(.22,.61,.36,1);
}
/* Kein automatischer Dunkelmodus: die Seite ist immer hell,
   auch wenn das Betriebssystem auf Dunkel steht. */


*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:168px}
@media(max-width:560px){html{scroll-padding-top:128px}}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:"EB Garamond",Georgia,serif;font-weight:500;text-wrap:balance;margin:0;line-height:1.16}
h1{font-size:clamp(2.2rem,5.6vw,3.7rem);letter-spacing:-.018em}
h2{font-size:clamp(1.6rem,3.2vw,2.35rem);letter-spacing:-.012em}
h3{font-size:1.24rem}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:20px}
.eyebrow{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink);font-weight:700}
.lead{font-size:1.04rem;color:var(--muted);max-width:none;line-height:1.7}
.center{text-align:center}
.ctarow{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:24px}
section{padding-block:clamp(64px,9vw,128px)}
.sec-head{margin-bottom:48px;text-align:center}
.sec-head .lead{margin-inline:auto;max-width:86ch}
.sec-head h2{margin-top:10px}
.sec-head .lead{margin-top:14px}
.alt{background:var(--creme)}
.proto-flag{background:var(--gold);color:#0B1B29;text-align:center;font-size:.74rem;letter-spacing:.05em;padding:7px 18px;font-weight:700}
[hidden]{display:none!important}

/* header */
/* Die Kopfleiste traegt Navy - das setzt den Ton fuer die ganze Seite
   und gibt dem hellen Inhalt darunter eine Kante. */
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;
  background:var(--navy-deep);
  border-bottom:1px solid rgba(201,169,78,.22);transition:box-shadow .25s var(--ease)}
header.site .brand-name{color:#F4F1EA}
header.site .brand-name small{color:var(--gold-light)}
header.site .menu-btn{border-color:rgba(244,241,234,.3);color:#F4F1EA}
header.site .menu-btn:hover{border-color:var(--gold-light);color:var(--gold-light)}
header.site :focus-visible{outline-color:var(--gold-light)}
header.site.stuck{box-shadow:0 10px 30px -22px rgba(7,41,66,.55)}
.utilbar{background:var(--navy-deep);color:rgba(244,241,234,.8);font-size:.78rem}
.utilinner{display:flex;align-items:center;justify-content:flex-end;gap:4px;flex-wrap:wrap;min-height:38px;padding-block:5px}
.util{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:rgba(244,241,234,.82);
  padding:5px 11px;border-radius:999px;border:1px solid transparent;transition:.18s;white-space:nowrap;cursor:pointer;background:none;font:inherit;font-size:.78rem}
.util:hover{color:var(--gold-light);border-color:rgba(201,169,78,.4)}
.util b{font-weight:700}
.utillangs{margin-left:6px;padding-left:10px;border-left:1px solid rgba(244,241,234,.2);display:flex;gap:1px}
.utillangs button{background:none;border:0;cursor:pointer;font:inherit;font-size:.7rem;letter-spacing:.08em;color:rgba(244,241,234,.66);padding:4px 5px}
.utillangs button[aria-pressed="true"]{color:var(--gold-light);font-weight:700}
@media(max-width:560px){.util .lbl{display:none}.utilinner{justify-content:center}}
.navbar{display:flex;align-items:center;gap:16px;height:112px}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;flex:0 0 auto;background:none;border:0;cursor:pointer;padding:0}
.brand img{width:96px;height:96px;display:block}
.brand-name{font-family:"EB Garamond",Georgia,serif;font-size:1.14rem;letter-spacing:.16em;text-transform:uppercase;line-height:1.1;white-space:nowrap;color:var(--ink);text-align:left}
.brand-name small{display:block;font-size:.6rem;letter-spacing:.3em;color:var(--gold-ink);font-family:Lato,sans-serif;font-weight:700;margin-top:2px}
@media(max-width:560px){.brand img{width:68px;height:68px}}
nav.main{display:flex;gap:17px;margin-left:auto;align-items:center}
nav.main a{text-decoration:none;font-size:.81rem;color:rgba(244,241,234,.82);padding:6px 0;border-bottom:1px solid transparent;transition:.2s;white-space:nowrap;cursor:pointer}
nav.main a:hover,nav.main a.active{color:#FCFCF9;border-color:var(--gold-light)}
.navcta{display:flex;gap:8px;align-items:center;margin-left:4px}
/* ---- Suche in der Navigation ---------------------------------------
   Wer die Seite zum ersten Mal sieht, weiss nicht, ob "Bewertung" oder
   "Verkaufen" der richtige Weg ist. Tippen ist schneller als raten. */
.websuche{position:relative;margin-left:6px}
.websuche input{width:150px;background:rgba(255,255,255,.08);border:1px solid rgba(244,241,234,.2);
  color:#F4F1EA;border-radius:999px;padding:7px 14px;font:inherit;font-size:.79rem;outline:none;
  transition:width .22s,background .15s,border-color .15s}
.websuche input::placeholder{color:rgba(244,241,234,.55)}
.websuche input:focus{width:240px;background:rgba(255,255,255,.14);border-color:var(--gold-light)}
.wstreffer{position:absolute;top:calc(100% + 10px);right:0;width:330px;z-index:90;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 22px 48px rgba(3,14,26,.3);max-height:min(62vh,440px);overflow:auto;padding:6px}
.wstr{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  padding:9px 12px;border-radius:9px;font:inherit;color:var(--ink);line-height:1.35}
.wstr b{display:block;font-weight:700;font-size:.88rem}
.wstr span{display:block;font-size:.76rem;color:var(--muted);margin-top:1px}
.wstr:hover,.wstr.an{background:rgba(201,169,78,.14)}
.wstr.an{box-shadow:inset 3px 0 0 var(--gold)}
.wsnix{padding:15px 13px;font-size:.84rem;color:var(--muted)}
@media(max-width:1100px){.websuche input{width:120px}.websuche input:focus{width:180px}}
@media(max-width:960px){
  .websuche{margin:10px 0 0;width:100%}
  .websuche input,.websuche input:focus{width:100%}
  .wstreffer{width:100%;left:0;right:auto}
}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--line-strong);color:inherit;border-radius:var(--r);padding:8px 12px;font:inherit;font-size:.8rem;cursor:pointer}

/* ---------- Bewegung: ruhig, kurz, unterbrechbar ---------- */
.reveal{opacity:0;transform:translateY(16px);
  transition:opacity var(--d3) var(--ease),transform var(--d3) var(--ease),filter var(--d3) var(--ease);
  will-change:opacity,transform}
.reveal.in{opacity:1;transform:none}

main{transition:opacity var(--d2) var(--ease-soft),filter var(--d2) var(--ease-soft)}
main.leaving{opacity:0;filter:blur(8px)}

.btn{transition:background var(--d1) var(--ease-out),border-color var(--d1) var(--ease-out),
  color var(--d1) var(--ease-out),transform var(--d1) var(--ease-out),box-shadow var(--d2) var(--ease-out)}
.btn:hover{transform:translateY(-1px)}
/* Der Druck geht ohne Uebergang, sonst kommt er nach dem Finger.
   Ein Prozent Verkleinerung reicht - mehr sieht nach Spielzeug aus. */
.btn:active{transform:scale(.99) translateY(0);transition-duration:0s}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn-gold:hover{box-shadow:0 6px 20px -10px rgba(201,169,78,.75)}

.card{transition:transform var(--d2) var(--ease),border-color var(--d2) var(--ease),box-shadow var(--d2) var(--ease)}
.card:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:0 14px 34px -22px rgba(7,41,66,.4)}
.card .thumb .img{transition:transform 1.1s var(--ease),filter var(--d3) var(--ease)}
.card:hover .thumb .img{transform:scale(1.14)}

.tt,.chip,.seg button,.stopt,.qopt,.slot,.cday,.util,.slink{
  transition:background var(--d1) var(--ease),border-color var(--d1) var(--ease),
  color var(--d1) var(--ease),transform var(--d1) var(--ease)}
.chip:active,.seg button:active,.stopt:active,.qopt:active,.slot:active,.tt:active{transform:scale(.98)}

nav.main a{position:relative}
nav.main a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform var(--d2) var(--ease)}
nav.main a:hover::after,nav.main a.active::after{transform:scaleX(1)}
nav.main a{border-bottom:0}

.fab-main{transition:background var(--d1) var(--ease),transform var(--d1) var(--ease)}
.fab-main:active{transform:scale(.94)}
details.faq summary{transition:color var(--d1) var(--ease)}
details.faq summary:hover{color:var(--gold)}
/* ---------- Feinschliff ----------------------------------------------
   Kleinigkeiten, die man einzeln nicht bemerkt und zusammen schon. */
::selection{background:rgba(201,169,78,.24);color:var(--ink)}
/* Meldungen als Einblendung statt Systemfenster. Ein alert() reisst den
   Besucher aus der Seite, blockiert alles und sieht auf jedem Geraet anders
   aus. Das hier bleibt in der Seite, laesst sich wegklicken und liest sich. */
.toastbox{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%);z-index:9000;display:flex;flex-direction:column;gap:9px;
  width:min(440px,calc(100vw - 32px));pointer-events:none}
.toast{pointer-events:auto;background:var(--navy-deep);color:#F2EEE4;border:1px solid rgba(201,169,78,.34);
  border-left:3px solid var(--gold);border-radius:var(--r);padding:13px 15px;font-size:.85rem;line-height:1.55;
  box-shadow:0 18px 44px -20px rgba(7,41,66,.7);display:flex;gap:11px;align-items:flex-start;
  opacity:0;transform:translateY(10px) scale(.985);
  transition:opacity var(--d2) var(--ease-out),transform var(--d2) var(--ease-out)}
.toast.da{opacity:1;transform:none}
.toast.weg{opacity:0;transform:translateY(6px) scale(.99)}
.toast b{display:block;font-family:"EB Garamond",Georgia,serif;font-size:1rem;font-weight:500;margin-bottom:3px;color:var(--gold-light)}
.toast .zu{margin-left:auto;background:none;border:0;color:rgba(242,238,228,.55);font-size:1.15rem;
  line-height:1;cursor:pointer;padding:0 2px;flex:0 0 auto}
.toast .zu:hover{color:#F2EEE4}
@media(prefers-reduced-motion:reduce){.toast{transition:none;opacity:1;transform:none}}
/* Auf dem Handy sitzt unten rechts der Kontaktknopf - die Meldung geht darueber. */
@media(max-width:640px){.toastbox{bottom:calc(92px + env(safe-area-inset-bottom,0px))}}
main[id^="view-"]{scroll-margin-block-start:96px}
[id]{scroll-margin-block-start:96px}
p,.lead,.sub,.hint{text-wrap:pretty}
/* Ziffern in Tabellen und neben Reglern stehen untereinander statt zu tanzen. */
table,.kpi,.cval,.swert,.big,.rng,.maxprice b,.vtitle{font-variant-numeric:tabular-nums}
/* Beim Antippen auf dem Handy kein graues Rechteck. */
button,a,[role="button"],summary{-webkit-tap-highlight-color:transparent}
/* Fokus bleibt sichtbar, auch auf dunklem Grund. */
footer.site :focus-visible,.navy :focus-visible{outline-color:var(--gold-light)}
.hero :focus-visible{outline-color:var(--gold-light)}
.footsocial button{transition:background var(--d1) var(--ease),border-color var(--d1) var(--ease),transform var(--d1) var(--ease)}
.footsocial button:hover{transform:translateY(-2px)}

@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  main.leaving{opacity:1;filter:none}
  *{animation-duration:.001s!important}
}


/* ---------- exklusive Details ---------- */
.hero{isolation:isolate}
.heroimg{transform:scale(1.06);transition:transform 1.4s var(--ease);will-change:transform}
.hero .spot{position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(520px circle at var(--mx,60%) var(--my,40%),rgba(201,169,78,.16),transparent 62%);
  opacity:0;transition:opacity .6s var(--ease)}
.hero:hover .spot{opacity:1}
.grain{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}

.hero h1 .w{display:inline-block;opacity:0;transform:translateY(11px);filter:blur(3px);
  transition:opacity .75s var(--ease),transform .75s var(--ease),filter .75s var(--ease)}
.hero h1.lit .w{opacity:1;transform:none;filter:blur(0)}

.kpi b{font-variant-numeric:tabular-nums}
.kpi{position:relative;overflow:hidden}
.kpi::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,169,78,.6),transparent);
  transform:scaleX(0);transition:transform 1s var(--ease)}
.kpi.in::after{transform:scaleX(1)}

.sec-head h2{position:relative;display:inline-block}
.sec-head h2::after{content:"";position:absolute;left:50%;bottom:-14px;width:44px;height:1px;
  background:var(--gold);transform:translateX(-50%) scaleX(0);transform-origin:center;
  transition:transform .8s var(--ease) .15s}
.sec-head.in h2::after{transform:translateX(-50%) scaleX(1)}

.btn-gold{position:relative;overflow:hidden}
.btn-gold::before{content:"";position:absolute;inset:0;transform:translateX(-102%);
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.34),transparent);transition:transform .75s var(--ease)}
.btn-gold:hover::before{transform:translateX(102%)}

.alt,.dark{position:relative}
.card .thumb::before{content:"";position:absolute;inset:0;z-index:1;opacity:0;
  background:linear-gradient(120deg,transparent 35%,rgba(201,169,78,.22) 50%,transparent 65%);
  transform:translateX(-60%);transition:opacity .3s var(--ease),transform .9s var(--ease)}
.card:hover .thumb::before{opacity:1;transform:translateX(60%)}


/* ---------- Wow ---------- */
#scrollbar{position:fixed;top:0;left:0;height:2px;width:100%;z-index:200;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,var(--gold),var(--gold-light));pointer-events:none;transition:transform .1s linear}
#curtain{position:fixed;inset:0;z-index:300;background:var(--navy-deep);display:grid;place-items:center;
  transition:opacity .8s var(--ease),visibility .8s}
#curtain.gone{opacity:0;visibility:hidden}
#curtain .cbar{width:180px;height:1px;background:rgba(201,169,78,.25);position:relative;overflow:hidden;margin-top:22px}
#curtain .cbar i{position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left;
  animation:cload 1.05s var(--ease) forwards}
@keyframes cload{to{transform:scaleX(1)}}
#curtain img{width:104px;height:104px;opacity:0;animation:cin .7s var(--ease) .1s forwards}
@keyframes cin{to{opacity:1}}
#curtain .cw{display:flex;flex-direction:column;align-items:center}

.card{transform-style:preserve-3d}
.card.tilt{transition:transform .12s linear,box-shadow var(--d2) var(--ease),border-color var(--d2) var(--ease)}



.marquee{overflow:hidden;border-block:1px solid var(--line);background:var(--surface-2);padding:13px 0}
.marquee .mtrack{display:flex;gap:56px;width:max-content;animation:mrun 34s linear infinite}
.marquee:hover .mtrack{animation-play-state:paused}
@keyframes mrun{to{transform:translateX(-50%)}}
.marquee span{font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);white-space:nowrap;display:flex;align-items:center;gap:12px}
.marquee span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--gold);flex:0 0 auto}
@media(prefers-reduced-motion:reduce){.marquee .mtrack{animation:none}#curtain{display:none}}

/* stepper (Bewertung) */
.stepper{max-width:none;margin:0}
.stepbar{height:2px;background:var(--line);margin-bottom:24px;position:relative;overflow:hidden}
.stepbar i{position:absolute;inset:0 auto 0 0;background:var(--gold);transition:width .35s}
.stlabel{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.sttitle{font-family:"EB Garamond",serif;font-size:1.55rem;margin-bottom:6px}
.sthint{font-size:.87rem;color:var(--muted);margin-bottom:20px}
.stopts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:9px}
.stopt{background:var(--surface);border:1px solid var(--line);color:var(--ink);border-radius:var(--r);
  padding:15px 16px;font:inherit;font-size:.92rem;cursor:pointer;transition:.18s;text-align:left;
  display:flex;flex-direction:column;gap:4px}
.stopt:hover{border-color:var(--gold);background:var(--surface-2)}
.stopt[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#FCFCF9}
.stopt small{font-size:.75rem;color:var(--muted)}
.stopt[aria-pressed="true"] small{color:rgba(244,241,234,.7)}
.stnav{display:flex;gap:10px;margin-top:24px;align-items:center}
.stback{background:none;border:0;color:var(--muted);font:inherit;font-size:.85rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.stfields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.stfields{grid-template-columns:1fr}}
.resulthead{text-align:center;padding:10px 0 4px}
.resulthead .big{font-family:"EB Garamond",serif;font-size:clamp(2.4rem,7vw,3.6rem);line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.resulthead .rng{font-size:.95rem;color:var(--muted);margin-top:10px}
.confbar{height:5px;background:var(--line);border-radius:3px;overflow:hidden;max-width:340px;margin:18px auto 6px}
.confbar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-light))}
.conflabel{font-size:.74rem;color:var(--muted);text-align:center}

/* booking calendar */
.booking{display:grid;grid-template-columns:1.05fr 1fr;gap:26px;align-items:start}
@media(max-width:720px){.booking{grid-template-columns:1fr}}
.calhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.calhead b{font-family:"EB Garamond",serif;font-size:1.22rem;font-weight:500}
.calnav{display:flex;gap:6px}
.calnav button{width:32px;height:32px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);
  color:var(--ink);cursor:pointer;font:inherit;line-height:1}
.calnav button:hover:not(:disabled){border-color:var(--gold);color:var(--gold)}
.calnav button:disabled{opacity:.3;cursor:default}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cdow{text-align:center;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:4px 0 6px}
.cday{aspect-ratio:1;max-width:100%;border:1px solid transparent;border-radius:var(--r);background:none;color:var(--ink);
  font:inherit;font-size:.9rem;cursor:pointer;display:grid;place-items:center;position:relative;font-variant-numeric:tabular-nums}
.cday.free{border-color:var(--line);background:var(--surface)}
.cday.free:hover{border-color:var(--gold);color:var(--gold)}
.cday.free::after{content:"";position:absolute;bottom:5px;width:4px;height:4px;border-radius:50%;background:var(--gold)}
.cday[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#FCFCF9}
.cday[aria-pressed="true"]::after{background:var(--gold-light)}
.cday.off{color:var(--muted);opacity:.38;cursor:default}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px;margin-top:6px}
.slot{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:var(--r);
  padding:10px 6px;font:inherit;font-size:.87rem;cursor:pointer;font-variant-numeric:tabular-nums}
.slot:hover{border-color:var(--gold);color:var(--gold)}
.slot[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#FCFCF9}
.bsummary{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:18px}
.brow{display:flex;align-items:center;gap:10px;padding:12px 15px;background:var(--surface);font-size:.87rem}
.brow .bv{margin-left:auto;color:var(--muted);text-align:right}
.brow .bv.set{color:var(--ink);font-weight:700}

.introgrid{display:grid;grid-template-columns:1.25fr 1fr;gap:44px;align-items:center}
@media(max-width:860px){.introgrid{grid-template-columns:1fr;gap:28px}}
.introtext h2{margin:10px 0 16px}
.introtext p{font-size:1.02rem;color:var(--muted);margin-bottom:14px}
.buildwrap{position:relative;background:linear-gradient(165deg,#0D2740,#071B2B);
  border:1px solid rgba(201,169,78,.3);border-radius:var(--r);box-shadow:0 18px 44px -28px rgba(7,41,66,.55);
  padding:26px 24px 16px;box-shadow:var(--shadow);overflow:hidden}
.buildwrap::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(201,169,78,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(201,169,78,.055) 1px,transparent 1px);
  background-size:22px 22px;mask-image:radial-gradient(70% 60% at 50% 45%,#000 40%,transparent 100%)}
.buildwrap::after{content:"SCHNITT A–A · M 1:200";position:absolute;top:12px;left:16px;
  font-size:.58rem;letter-spacing:.24em;color:rgba(201,169,78,.5)}
.buildsvg{width:100%;height:auto;display:block;overflow:visible}
.buildsvg .bp{fill:none;stroke:var(--gold);stroke-width:1.3;stroke-linejoin:miter;stroke-linecap:butt;
  opacity:0;transition:opacity .5s var(--ease),stroke-dashoffset .9s var(--ease)}
.buildsvg .bp.on{opacity:.9}
.buildsvg .thin{stroke-width:.7;opacity:0}
.buildsvg .thin.on{opacity:.55}
.buildsvg .dim{stroke-width:.7;opacity:0}
.buildsvg .dim.on{opacity:.7}
.buildsvg .col{stroke-width:.8;stroke-dasharray:3 4}
.buildsvg .col.on{opacity:.6}
.buildsvg .slab{fill:rgba(201,169,78,.09);stroke-width:1.5}
.buildsvg .win{stroke-width:.8}
.buildsvg .win.on{opacity:.62}
.buildsvg .hatchfill{fill:url(#hatch);stroke:none}
.buildsvg .betonfill{fill:url(#beton);stroke:none}
.buildsvg .betonfill.on{opacity:.85}
.buildsvg .heavy{stroke-width:2}
.buildsvg .tick{stroke-width:.9}
.buildsvg .tick.on{opacity:.7}
.buildsvg .koteA{fill:var(--gold);stroke:none}
.buildsvg .koteA.on{opacity:.75}
.buildsvg .person{stroke-width:.9}
.buildsvg .person.on{opacity:.5}
.buildsvg .dimtx{font-size:7.5px;letter-spacing:.1em}
.buildsvg .tb{font-size:8.5px;letter-spacing:.16em}
.buildsvg .hatchfill.on{opacity:.75}
.buildsvg .bl{fill:var(--gold);font-family:Lato,sans-serif;font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;opacity:0;transition:opacity .5s var(--ease)}
.buildsvg .bl.on{opacity:.7}
.buildsvg .lit{fill:var(--gold-light);stroke:none;opacity:0;transition:opacity .8s var(--ease)}
.buildsvg .lit.on{opacity:.26}
.buildcap{text-align:center;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:10px}
.dark .buildcap{color:rgba(244,241,234,.66)}
@media(prefers-reduced-motion:reduce){.buildsvg .bp{opacity:.92;transform:none}.buildsvg .lit{opacity:.3}}

.infogrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:22px}
.infotile{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:18px 18px 20px}
.infotile h4{font-size:1.02rem;margin-bottom:7px}
.infotile p{font-size:.87rem;color:var(--muted)}
.panel.wide{position:relative}
.cornerbadge{position:absolute;top:-1px;right:-1px;background:var(--gold);color:#12100A;font-size:.63rem;
  letter-spacing:.13em;text-transform:uppercase;font-weight:700;padding:6px 13px;border-radius:0 var(--r) 0 var(--r)}
.cornerbadge.online{background:var(--gold);color:#12100A}

/* social */
.dark{background:var(--navy-deep);color:#F4F1EA;
  /* Auf dunklem Grund zeigt --muted sonst weiterhin das dunkle Grau und ist
     kaum zu lesen. Hier bekommt dasselbe Token einen hellen Wert, damit
     jeder Text, der es benutzt, automatisch mitzieht. */
  --muted:#C8D3DE; --ink:#F4F1EA; --line:rgba(244,241,234,.18)}
.dark .lead,.dark p{color:#DDE5ED}
.dark .eyebrow{color:var(--gold-light)}
.dark h2{color:#FCFCF9}
.dark .lead{color:rgba(244,241,234,.78)}
.dark .eyebrow{color:var(--gold-light)}
.dark .demo-note{color:rgba(244,241,234,.5)}
.dark .slink{color:rgba(244,241,234,.86);border-color:rgba(244,241,234,.32)}
.dark .slink:hover{border-color:var(--gold-light);color:var(--gold-light)}
.dark .icell{border-color:rgba(244,241,234,.14)}
.sociallinks{display:flex;flex-wrap:wrap;gap:8px}
.slink{display:inline-flex;align-items:center;gap:8px;background:none;border:1px solid var(--line-strong);
  color:var(--ink);border-radius:999px;padding:8px 14px;font:inherit;font-size:.81rem;cursor:pointer;transition:.18s;text-decoration:none}
.slink:hover{border-color:var(--gold);color:var(--gold)}
.slink svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7}
.slink.small{padding:6px 12px;font-size:.78rem}
.insta{display:grid;grid-template-columns:1.05fr 1fr;gap:34px;align-items:center}
@media(max-width:860px){.insta{grid-template-columns:1fr}}
.igrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.icell{aspect-ratio:1;max-width:100%;border-radius:3px;position:relative;overflow:hidden;border:1px solid var(--line)}
.icell .iimg{position:absolute;inset:-8%;filter:blur(9px) saturate(.9);transform:scale(1.06)}
.icell .icap{position:absolute;inset:auto 0 0 0;padding:8px 9px;color:#F4F1EA;font-size:.65rem;
  letter-spacing:.06em;line-height:1.3;background:linear-gradient(transparent,rgba(7,41,66,.85));z-index:2}
.icell .itag{position:absolute;top:7px;left:7px;z-index:2;background:var(--gold);color:#0B1B29;
  font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;padding:3px 7px;border-radius:2px}
.footsocial{display:flex;gap:10px;margin-top:14px;align-items:center}
.fs-label{font-size:.8rem;color:rgba(244,241,234,.6)}
.igfoot{margin-top:18px;padding-top:18px;border-top:1px solid rgba(244,241,234,.16)}
.fbrand{display:flex;gap:16px;align-items:flex-start}
.fbrand p{font-size:.85rem}
.igfoot p{font-size:.83rem}
.fgrid{align-items:start}
.footlogo{display:block;width:92px;height:92px;flex:0 0 auto}
@media(max-width:760px){.footlogo{width:76px;height:76px}}
.footsocial button{width:38px;height:38px;border-radius:50%;border:1px solid var(--gold);
  background:none;color:var(--gold-light);cursor:pointer;display:grid;place-items:center;transition:.18s}
.footsocial button:hover{border-color:var(--gold-light);background:rgba(201,169,78,.14);color:var(--gold-light)}
.footsocial svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7}

/* modal */
.modal{position:fixed;inset:0;z-index:120;background:rgba(7,23,35,.62);display:grid;place-items:center;padding:20px;
  backdrop-filter:blur(3px);animation:fadein .2s ease both}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.modalcard{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:8px;
  box-shadow:var(--shadow);padding:28px;width:min(680px,100%);max-height:88vh;overflow-y:auto}
.modalcard .stopts{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

/* ---------- Anmeldefenster ----------
   Bewusst schmaler und ruhiger als die Registrierung: Wer sich anmeldet,
   soll nichts aussuchen muessen, sondern nur zwei Felder ausfuellen. */
.lmcard{width:min(440px,100%)}
.lmsub{font-size:.88rem;color:var(--muted);line-height:1.6;margin:6px 0 22px}
.pwfeld{position:relative}
.pwfeld input{padding-right:46px}
.pwauge{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:0;
  padding:7px;cursor:pointer;color:var(--muted);line-height:0;border-radius:6px}
.pwauge:hover{color:var(--ink);background:var(--surface-2)}
.lmzeile{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.haken{display:inline-flex;align-items:center;gap:8px;font-size:.84rem;color:var(--muted);cursor:pointer}
.haken input{width:16px;height:16px;accent-color:var(--gold);cursor:pointer;flex:none}
.tlink{background:none;border:0;padding:0;font:inherit;font-size:.84rem;color:var(--gold-ink);
  cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.tlink:hover{color:var(--ink)}
.lmfehler{font-size:.84rem;color:#A63A2E;background:rgba(166,58,46,.08);
  border:1px solid rgba(166,58,46,.22);border-radius:var(--r);padding:10px 12px;margin:14px 0 0}
.lmok{font-size:.87rem;color:var(--ok,#2F7D53);background:rgba(47,125,83,.09);
  border:1px solid rgba(47,125,83,.24);border-radius:var(--r);padding:12px 14px;margin:14px 0 0;line-height:1.6}
.lmwechsel{font-size:.85rem;color:var(--muted);text-align:center;margin-top:18px}
.lmhilfe{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.lmhilfe b{display:block;font-size:.9rem;margin-bottom:4px}
.lmhilfe>span{display:block;font-size:.82rem;color:var(--muted);line-height:1.55;margin-bottom:12px}
.lmhrow{display:flex;gap:8px;flex-wrap:wrap}
.lmhrow .btn{flex:1 1 auto;justify-content:center}
@media(max-width:420px){.lmhrow .btn{flex:1 1 100%}}

/* soft nudge */
.nudge{position:fixed;left:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:75;
  width:min(330px,calc(100vw - 40px));background:var(--surface);border:1px solid var(--line);
  border-left:2px solid var(--gold);border-radius:8px;box-shadow:var(--shadow);padding:18px 18px 16px;
  animation:slidein .4s ease both}
@keyframes slidein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.nudge h4{font-size:1.05rem;margin-bottom:6px;padding-right:20px}
.nudge p{font-size:.85rem;color:var(--muted);margin-bottom:13px}
.nudge .nrow{display:flex;flex-wrap:wrap;gap:7px}
.nudge .nb{background:var(--surface);border:1px solid var(--line);color:var(--ink);border-radius:999px;
  padding:7px 13px;font:inherit;font-size:.8rem;cursor:pointer;transition:.18s}
.nudge .nb:hover{border-color:var(--gold);color:var(--gold)}
.nudge .nb.primary{background:var(--navy);border-color:var(--navy);color:#FCFCF9}
.nudge .nclose{position:absolute;top:10px;right:12px;background:none;border:0;color:var(--muted);font-size:1.3rem;line-height:1;cursor:pointer;padding:2px 4px}
.nudge .nclose:hover{color:var(--ink)}
.nudge .nlater{background:none;border:0;color:var(--muted);font:inherit;font-size:.78rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px;margin-top:10px;padding:0}
@media(max-width:640px){.nudge{left:16px;right:16px;width:auto;bottom:calc(86px + env(safe-area-inset-bottom,0px))}}

@media(max-width:1080px){
  /* Das Menue klappt unter der Kopfzeile auf. Frueher stand hier eine feste
     Hoehe von 112px - die stimmte nur bei einer Fensterbreite. Jetzt haengt
     es an der Kopfzeile selbst und sitzt immer richtig.
     Und: im Balken sind die Links hell, im aufgeklappten Menue steht ein
     heller Hintergrund - dort muessen sie dunkel sein, sonst sieht man
     nichts. Genau das war kaputt. */
  nav.main{display:none;position:absolute;top:100%;left:0;right:0;background:var(--surface);
    border-bottom:1px solid var(--line);box-shadow:0 20px 40px -24px rgba(7,41,66,.5);
    flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 18px;
    max-height:calc(100vh - 100%);overflow-y:auto;-webkit-overflow-scrolling:touch}
  nav.main.open{display:flex}
  nav.main a{padding:13px 2px;border-bottom:1px solid var(--line);color:var(--ink);font-size:.95rem}
  nav.main a:hover,nav.main a.an{color:var(--gold-ink);border-bottom-color:var(--gold)}
  nav.main a::after{display:none}
  .navcta{margin:14px 0 0;flex-wrap:wrap}
  /* Die Kopfzeilen-Regel faerbt Knoepfe hell; im hellen Menue muss sie
     ueberstimmt werden, sonst ist "Login" weiss auf weiss. */
  header.site nav.main .btn-dark{border-color:var(--line);color:var(--ink);background:transparent}
  header.site nav.main .btn-dark:hover{border-color:var(--gold);color:var(--gold-ink)}
  /* Suchfeld im aufgeklappten Menue: heller Grund, dunkle Schrift. */
  .websuche{order:-1;margin:6px 0 10px;width:100%}
  .websuche input,.websuche input:focus{width:100%;background:var(--paper);
    border-color:var(--line);color:var(--ink)}
  .websuche input::placeholder{color:var(--muted)}
  .wstreffer{position:static;width:auto;box-shadow:none;margin-top:8px;max-height:46vh}
  .menu-btn{display:block}
}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;font:inherit;
  font-size:.86rem;text-decoration:none;padding:12px 22px;border-radius:var(--r);border:1px solid transparent;text-align:center}
.btn-sm{padding:8px 14px;font-size:.78rem}
.btn-gold{background:var(--gold);color:#12100A;border-color:var(--gold);font-weight:700}
.btn-gold:hover{background:var(--gold-light);border-color:var(--gold-light)}
.btn-ghost{border-color:rgba(244,241,234,.38);color:#F4F1EA}
.btn-ghost:hover{border-color:var(--gold-light);color:var(--gold-light)}
.btn-dark{border-color:var(--line-strong);color:var(--ink);background:transparent}
header.site .btn-dark{border-color:rgba(244,241,234,.34);color:#F4F1EA}
header.site .btn-dark:hover{border-color:var(--gold-light);color:var(--gold-light)}
.btn-dark:hover{border-color:var(--gold);color:var(--gold)}
.btn-navy{background:var(--gold);color:#12100A;border-color:var(--gold);font-weight:700}
.btn-navy:hover{background:var(--gold-light);border-color:var(--gold-light)}

/* hero */
.hero{position:relative;overflow:hidden;background:var(--navy-deep);color:#F4F1EA}
.heroimg{position:absolute;inset:0;background-size:cover;background-position:center 62%}
.hero::after{content:"";position:absolute;inset:0;
  /* Gleichmaessig, nicht als Verlauf: sonst ist der Hero oben ein anderes
     Blau als unten - und beides ein anderes als die Kopfleiste. */
  background:rgba(7,41,66,.5)}
.hero-inner{position:relative;z-index:2;padding-block:clamp(64px,10vw,112px);text-align:center}
.hero h1{color:#FCFCF9;max-width:18ch;margin-inline:auto}
.hero .lead{color:rgba(244,241,234,.86);margin-top:18px;font-size:1.12rem;max-width:60ch;margin-inline:auto}
.hero .eyebrow{color:var(--gold-light)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;justify-content:center}
.trustrow{display:flex;flex-wrap:wrap;gap:9px 24px;margin-top:30px;font-size:.79rem;color:rgba(244,241,234,.8);justify-content:center}
.trustrow span{display:flex;align-items:center;gap:8px}
.trustrow i{width:5px;height:5px;border-radius:50%;background:var(--gold-light);display:block}

/* kpi */
/* Die Zahlenleiste ist der zweite blaue Balken - sie faellt so auf,
   wie Zahlen auffallen sollen. */
.kpis{background:var(--navy-deep);color:#F4F1EA;border-block:1px solid rgba(201,169,78,.3)}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(201,169,78,.3)}
@media(max-width:700px){.kpi-grid{grid-template-columns:repeat(2,1fr)}}
.kpi{background:var(--navy-deep);padding:26px 18px}
.kpi b{display:block;font-family:"EB Garamond",serif;font-size:2.2rem;color:var(--gold-light);font-weight:500;line-height:1;font-variant-numeric:tabular-nums}
.kpi span{font-size:.71rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(244,241,234,.72)}

/* panels/grids */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:28px;box-shadow:var(--shadow)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:20px}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(186px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.step{background:var(--surface);padding:20px 18px}
.step .num{font-family:"EB Garamond",serif;font-size:1.45rem;color:var(--gold-ink);line-height:1}
.step h4{margin:8px 0 6px;font-size:1rem}
.step p{font-size:.84rem;color:var(--muted)}

/* type tiles */
.typetiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px;margin-bottom:22px}
.tt{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 14px;cursor:pointer;
  font:inherit;text-align:left;display:flex;flex-direction:column;gap:8px;transition:.18s;color:var(--ink)}
.tt{position:relative;padding-right:34px}
.tt:hover{border-color:var(--gold);transform:translateY(-1px);box-shadow:var(--shadow)}
.tt::after{content:"→";position:absolute;right:13px;top:15px;color:var(--gold);font-size:1rem;opacity:.75;transition:.18s}
.tt:hover::after{right:10px;opacity:1}
.tt[aria-pressed="true"]::after{color:var(--gold-light)}
.tt[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#FCFCF9}
.tt[aria-pressed="true"] .ttn{color:var(--gold-light)}
.tt[aria-pressed="true"] svg{stroke:var(--gold-light)}
.tt svg{stroke:var(--gold);width:22px;height:22px;fill:none;stroke-width:1.5}
.tt .ttl{font-size:.87rem;line-height:1.3}
.tt .ttn{font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums}
.tt.off{opacity:.4}

.filters{display:flex;flex-direction:column;gap:14px;margin-bottom:26px}
.frow{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.frow>.flabel{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);width:100%;margin-bottom:2px}
.chip{background:var(--surface);border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:8px 15px;font:inherit;font-size:.81rem;cursor:pointer;transition:.18s}
.chip:hover{border-color:var(--gold);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#FCFCF9}
.chip .n{opacity:.55;margin-left:6px;font-size:.73rem}
.result-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:22px}
.result-line b{font-family:"EB Garamond",serif;font-size:1.55rem;font-weight:500}
.result-line span{color:var(--muted);font-size:.89rem}
.reset{margin-left:auto;background:none;border:0;color:var(--gold-ink);cursor:pointer;font:inherit;font-size:.8rem;text-decoration:underline;text-underline-offset:3px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.thumb{position:relative;aspect-ratio:4/3;max-width:100%;overflow:hidden;background:#16293E}
.thumb .img{position:absolute;inset:-9%;filter:blur(20px) saturate(.8);transform:scale(1.08)}
.thumb::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,27,41,.12) 0%,rgba(11,27,41,0) 38%,rgba(7,20,34,.72) 100%)}
.lock{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:10px 13px;display:flex;align-items:center;gap:8px;
  color:rgba(244,241,234,.82);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  background:linear-gradient(180deg,rgba(7,20,34,0),rgba(7,20,34,.78))}
.badge-new{position:absolute;z-index:2;top:11px;left:11px;background:var(--gold);color:#0B1B29;font-size:.61rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700;padding:4px 9px;border-radius:2px}
.ref{position:absolute;z-index:2;top:11px;right:11px;color:rgba(244,241,234,.66);font-size:.65rem;letter-spacing:.11em;
  font-variant-numeric:tabular-nums;font-weight:700}
.card-body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:10px;flex:1}
.kv{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;font-size:.84rem}
.kv dt{color:var(--muted)}
.kv dd{margin:0;text-align:right}
.card .price{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.card .price b{font-family:"EB Garamond",serif;font-size:1.18rem;font-weight:500}
.card .price em{font-style:normal;font-size:.75rem;color:var(--gold-ink)}
.card-cta{display:block;text-align:center;padding:11px;font:inherit;font-size:.81rem;border:0;border-top:1px solid var(--line);color:var(--muted);transition:.18s;cursor:pointer;background:none;width:100%}
.card-cta:hover{background:var(--navy);color:#FCFCF9}
.empty{padding:40px 0;text-align:center;color:var(--muted)}
.demo-note{font-size:.75rem;color:var(--muted);margin-top:18px;font-style:italic}
.moreline{margin-top:26px;text-align:center}

/* forms */
.field{margin-bottom:18px}
.field:last-child{margin-bottom:0}
.field label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:.85rem;margin-bottom:8px}
.field label b{font-family:"EB Garamond",serif;font-size:1.08rem;font-weight:500;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;flex:0 0 auto}
.field .hint,.hint{display:block;font-size:.73rem;color:var(--muted);margin-top:5px}
input[type=range]{width:100%;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;height:24px}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--line-strong)}
input[type=range]::-moz-range-track{height:2px;background:var(--line-strong)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--gold);margin-top:-10px;border:2px solid var(--paper);box-shadow:0 0 0 1px var(--gold);
  transition:transform var(--d1) var(--ease-out),box-shadow var(--d1) var(--ease-out)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--gold);border:2px solid var(--paper);box-shadow:0 0 0 1px var(--gold);
  transition:transform var(--d1) var(--ease-out),box-shadow var(--d1) var(--ease-out)}
/* Beim Anfassen waechst der Daumen leicht und bekommt einen weichen Hof -
   man sieht, dass der Regler den Finger hat, auch wenn der Finger ihn verdeckt. */
input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.08)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.16);box-shadow:0 0 0 1px var(--gold),0 0 0 7px rgba(201,169,78,.16)}
input[type=range]:hover::-moz-range-thumb{transform:scale(1.08)}
input[type=range]:active::-moz-range-thumb{transform:scale(1.16);box-shadow:0 0 0 1px var(--gold),0 0 0 7px rgba(201,169,78,.16)}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 1px var(--gold),0 0 0 4px rgba(201,169,78,.34)}
input[type=range]:focus-visible{outline:none}
select,input[type=text],input[type=email],input[type=tel],input[type=number],
input[type=password],textarea{
  width:100%;font:inherit;font-size:.92rem;padding:11px 13px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);color:var(--ink)}
textarea{min-height:100px;resize:vertical}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{background:var(--surface);border:1px solid var(--line);color:var(--muted);border-radius:var(--r);padding:9px 14px;font:inherit;font-size:.82rem;cursor:pointer;transition:.18s}
.seg button:hover{border-color:var(--gold);color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#FCFCF9}
.fl{font-size:.71rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:9px}
.fl .req{color:var(--gold-ink);margin-left:4px}
.fgroup{margin-bottom:20px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.two{grid-template-columns:1fr}}

/* tool layout */
.tool{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:stretch}
.tool>*{display:flex;flex-direction:column}
.tool>*>.panel:last-child{flex:1}
@media(max-width:760px){.tool{grid-template-columns:1fr}}
.verdict{border-radius:var(--r);padding:22px 24px;border:1px solid;margin-bottom:18px;transition:.3s}
.verdict.ok{background:color-mix(in srgb,var(--ok) 11%,transparent);border-color:color-mix(in srgb,var(--ok) 42%,transparent)}
.verdict.warn{background:color-mix(in srgb,var(--warn) 13%,transparent);border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
.verdict.bad{background:color-mix(in srgb,var(--bad) 11%,transparent);border-color:color-mix(in srgb,var(--bad) 42%,transparent)}
.verdict.neutral{background:var(--surface-2);border-color:var(--line-strong)}
.vtitle{font-family:"EB Garamond",serif;font-size:1.85rem;line-height:1.1;margin-bottom:6px}
.verdict.ok .vtitle{color:var(--ok)}.verdict.warn .vtitle{color:var(--warn)}.verdict.bad .vtitle{color:var(--bad)}
.verdict p{font-size:.89rem;color:var(--muted)}
.maxprice{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.maxprice span{font-size:.79rem;color:var(--muted)}
.maxprice b{font-family:"EB Garamond",serif;font-size:1.55rem;font-weight:500;font-variant-numeric:tabular-nums}
.checks{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:18px}
.check{display:flex;align-items:center;gap:11px;padding:12px 15px;background:var(--surface);font-size:.85rem}
.dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.dot.ok{background:var(--ok)}.dot.warn{background:var(--warn)}.dot.bad{background:var(--bad)}
.check .cval{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--muted);font-size:.82rem;text-align:right}
table.bd{width:100%;border-collapse:collapse;font-size:.86rem}
table.bd th{text-align:left;font-weight:400;color:var(--muted);font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;padding:0 0 8px}
table.bd td{padding:8px 0;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
table.bd td:last-child{text-align:right}
table.bd tr.total td{border-top:1px solid var(--line-strong);font-weight:700}
.tool-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.disclaimer{font-size:.73rem;color:var(--muted);margin-top:14px;line-height:1.55}
/* ---------- Trefferanzeige im Suchmandat ---------- */
.treffertafel{display:flex;align-items:center;gap:20px;background:var(--surface);color:var(--ink);
  border:1px solid var(--gold);border-radius:var(--r);padding:20px 22px;margin-bottom:26px;flex-wrap:wrap}
.ttzahl{display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:104px;padding:10px 16px;background:var(--creme);
  border:1px solid var(--gold);border-radius:var(--r)}
.ttzahl b{font-family:"EB Garamond",Georgia,serif;font-size:2.5rem;line-height:1;color:var(--gold);
  font-variant-numeric:tabular-nums}
.ttzahl span{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-top:5px}
.tttext{flex:1 1 260px;min-width:0}
.tttext p{margin:0;font-size:.95rem;line-height:1.6;color:var(--navy)}
.ttklein{margin-top:7px!important;font-size:.79rem!important;color:var(--muted)!important}
.treffertafel.hat .ttzahl{background:linear-gradient(180deg,rgba(201,169,78,.28),rgba(201,169,78,.12))}

/* --- Kurzformular auf der Startseite ------------------------------------
   Die Zeile unter dem Absendeknopf, die zum ausfuehrlichen Formular fuehrt.
   Sie sieht bewusst nicht aus wie ein zweiter Absendeknopf - wer fertig ist,
   soll oben klicken, nicht hier. */
.mehrzeile{display:flex;align-items:center;gap:14px;width:100%;margin-top:12px;
  padding:13px 16px;border:1px dashed var(--line-strong,rgba(19,48,79,.22));
  border-radius:var(--r);background:transparent;color:var(--ink);
  text-align:left;cursor:pointer;font:inherit;
  transition:background .14s,border-color .14s}
.mehrzeile:hover{background:var(--creme);border-color:var(--gold)}
.mzText{display:block;min-width:0;flex:1}
.mzText b{display:block;font-size:.92rem;font-weight:600}
.mzText span{display:block;font-size:.8rem;color:var(--muted);margin-top:2px;line-height:1.45}
.mzPfeil{flex:0 0 auto;color:var(--gold-ink);font-size:1.1rem;line-height:1}
#smkurz .locadd{display:grid;grid-template-columns:1fr 180px;gap:10px;align-items:end}
@media(max-width:560px){#smkurz .locadd{grid-template-columns:1fr}}
#smkurz .treffertafel .tttext{flex:1;min-width:220px}
@media(max-width:520px){.ttzahl{min-width:84px}.ttzahl b{font-size:2rem}}

/* ---------- Zinstafel ---------- */
.satztafel{background:var(--surface);color:var(--ink);border:1px solid var(--gold);
  border-radius:var(--r);padding:22px 24px;margin-bottom:26px}
.satztafel .eyebrow{color:var(--gold-ink)}
.satztafel h3{font-family:"EB Garamond",Georgia,serif;font-weight:500;font-size:1.28rem;margin:4px 0 0;
  color:var(--navy)}
.stkopf{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.stStand{font-size:.74rem;color:var(--muted);white-space:nowrap}
.stStand b{color:var(--navy);font-weight:700}
.saetze{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media(max-width:620px){.saetze{grid-template-columns:repeat(2,minmax(0,1fr))}}
.satz{background:var(--creme);border:1px solid var(--line-strong);border-radius:var(--r);
  padding:14px 12px;text-align:center;cursor:pointer;font:inherit;color:var(--navy);transition:.18s}
.satz:hover{border-color:var(--gold);background:rgba(201,169,78,.14)}
.satz[aria-pressed="true"]{background:linear-gradient(180deg,#C9A94E,#C9A94E);border-color:var(--gold);color:#12100A}
.satz .sname{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px}
.satz[aria-pressed="true"] .sname{color:rgba(18,16,10,.72)}
.satz .swert{display:block;font-family:"EB Garamond",Georgia,serif;font-size:1.5rem;line-height:1;
  font-variant-numeric:tabular-nums}
.satztafel .disclaimer{color:var(--muted);margin-top:16px}
.festwert{font-size:.78rem;color:var(--muted);line-height:1.55;margin:8px 0 0;
  padding:9px 12px;background:var(--creme);border-left:2px solid var(--gold);border-radius:0 4px 4px 0}
.valbox{text-align:center;padding:28px 22px}
.rangev{font-family:"EB Garamond",serif;font-size:clamp(1.8rem,5vw,2.8rem);line-height:1.05;color:var(--gold);font-variant-numeric:tabular-nums}
.persqm{font-size:.85rem;color:var(--muted);margin-top:8px}
.drivers{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:18px}
.driver{display:flex;align-items:center;gap:10px;padding:11px 15px;background:var(--surface);font-size:.85rem}
.driver .dv{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--muted);text-align:right}

/* locations */
.locrow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}
.locrow:last-of-type{border-bottom:0}
.locrow .place{font-weight:700;min-width:110px}
.locrow .rad{color:var(--gold-ink);font-variant-numeric:tabular-nums;font-size:.86rem}
.locrow .del{margin-left:auto;background:none;border:0;color:var(--muted);cursor:pointer;font:inherit;font-size:1.15rem;line-height:1;padding:0 4px}
.locrow .del:hover{color:var(--bad)}
.locadd{display:grid;grid-template-columns:1.4fr 1fr auto;gap:10px;margin-top:14px;align-items:end}
.seg.kantone button{font-size:.79rem;padding:7px 12px}
@media(max-width:620px){.locadd{grid-template-columns:1fr}}

/* person */
.person{display:grid;grid-template-columns:200px 1fr;gap:26px;align-items:start}
@media(max-width:640px){.person{grid-template-columns:1fr}}
.portrait{aspect-ratio:3/4;max-width:100%;border-radius:var(--r);overflow:hidden;position:relative;
  background:linear-gradient(160deg,#0B3252,var(--navy-deep));display:grid;place-items:center;border:1px solid var(--line)}
.portrait span{color:rgba(244,241,234,.72);font-size:.74rem;text-align:center;padding:14px;letter-spacing:.06em}
/* Die Portraits sind rund und im selben Navy getont wie die Karte - so
   verschmilzt die Kante mit dem Hintergrund und die beiden Aufnahmen
   wirken wie ein Set, obwohl sie an verschiedenen Orten entstanden sind. */
.portrait img{width:88%;height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;
  border:1px solid rgba(201,169,78,.38);box-shadow:0 10px 30px rgba(3,14,26,.45)}
.pcontact{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
/* Kurzvita: zwei, drei Zeilen daruber, wer die Person ist - kein Lebenslauf. */
.kurzvita{font-size:.88rem;color:var(--muted);line-height:1.6;margin:14px 0 0;max-width:62ch;
  border-top:1px solid var(--line);padding-top:13px}

/* score */
.quiz{max-width:860px;margin:0 auto}
.qbar{height:2px;background:var(--line);margin-bottom:24px;position:relative;overflow:hidden}
.qbar i{position:absolute;inset:0 auto 0 0;background:var(--gold);transition:width .35s}
.qstep{font-size:.71rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.qtext{font-family:"EB Garamond",serif;font-size:1.45rem;margin-bottom:18px}
.qopts{display:flex;flex-direction:column;gap:8px}
.qopt{text-align:left;background:var(--surface);border:1px solid var(--line);color:var(--ink);border-radius:var(--r);padding:14px 17px;font:inherit;font-size:.92rem;cursor:pointer;transition:.18s}
.qopt:hover{border-color:var(--gold);background:var(--surface-2)}
.scorenum{font-family:"EB Garamond",serif;font-size:4.2rem;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.scoremeter{height:6px;background:var(--line);border-radius:3px;overflow:hidden;margin:18px auto;max-width:400px}
.scoremeter i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-light));transition:width .6s}

/* cases + faq */
.cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:20px}
.case{background:var(--surface);border:1px solid var(--line);border-left:2px solid var(--gold);border-radius:var(--r);padding:22px}
.case .ctitle{font-family:"EB Garamond",serif;font-size:1.12rem;margin-bottom:10px}
.case dl{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;font-size:.85rem;margin:0}
.case dt{color:var(--muted)}
.case dd{margin:0;text-align:right}
details.faq{border-bottom:1px solid var(--line)}
details.faq summary{cursor:pointer;padding:16px 0;font-size:.99rem;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";color:var(--gold);font-size:1.3rem;flex:0 0 auto;transition:transform .2s}
details.faq[open] summary::after{transform:rotate(45deg)}
details.faq p{padding:0 0 16px;font-size:.91rem;color:var(--muted);max-width:74ch}

/* fab + chat */
.fab{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:80;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.fab-menu{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.fab-item{display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);color:var(--ink);padding:10px 15px;border-radius:999px;font:inherit;font-size:.84rem;box-shadow:var(--shadow);cursor:pointer;animation:pop .2s ease both}
.fab-item:hover{border-color:var(--gold);color:var(--gold)}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.fab-main{width:56px;height:56px;border-radius:50%;cursor:pointer;background:var(--navy);border:1px solid var(--gold);color:var(--gold-light);display:grid;place-items:center;box-shadow:var(--shadow)}
.fab-main:hover{background:var(--navy-soft)}
.chatpanel{width:min(340px,calc(100vw - 36px));background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);overflow:hidden;animation:pop .22s ease both}
.chathead{background:var(--navy);color:#F4F1EA;padding:14px 16px;display:flex;align-items:center;gap:10px}
.chathead .dotlive{width:8px;height:8px;border-radius:50%;background:#5FB585;flex:0 0 auto}
.chathead b{font-size:.9rem}
.chathead span{display:block;font-size:.72rem;color:rgba(244,241,234,.66)}
.chathead button{margin-left:auto;background:none;border:0;color:rgba(244,241,234,.7);font-size:1.3rem;cursor:pointer;line-height:1}
.chatlog{padding:14px;display:flex;flex-direction:column;gap:9px;max-height:44vh;overflow-y:auto;background:var(--surface-2)}
.msg{max-width:84%;padding:9px 13px;border-radius:12px;font-size:.86rem;line-height:1.5}
.msg.them{background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:3px}
.msg.me{background:var(--navy);color:#F4F1EA;align-self:flex-end;border-bottom-right-radius:3px}
.chatwahl{display:flex;flex-direction:column;gap:7px;padding:11px;border-top:1px solid var(--line);background:var(--surface)}
.chatwahl button{text-align:left;background:var(--surface-2);border:1px solid var(--line);color:var(--ink);
  border-radius:var(--r);padding:9px 13px;font:inherit;font-size:.85rem;cursor:pointer;transition:border-color .15s,background .15s}
.chatwahl button:hover{border-color:var(--gold);background:var(--surface)}
.chatwahl button.gold{background:var(--gold);border-color:var(--gold);color:#0B1B29;font-weight:700}
.chatwahl button.zurueck{background:transparent;border-color:transparent;color:var(--muted);font-size:.8rem;padding:4px 13px}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001s!important;transition-duration:.001s!important}}

/* footer */
footer.site{background:var(--navy-deep);color:rgba(244,241,234,.78);padding-block:42px 26px}
footer.site a{color:rgba(244,241,234,.78);text-decoration:none;cursor:pointer}
footer.site a:hover{color:var(--gold-light)}
.fgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:26px;align-items:start}
@media(max-width:1000px){.fgrid{gap:18px}.fgrid ul{font-size:.79rem}.fgrid h5{font-size:.6rem;letter-spacing:.14em}}
@media(max-width:820px){.fbrand{flex-direction:column;gap:12px}.footlogo{width:72px;height:72px}}
@media(max-width:620px){.fgrid{gap:12px}.fgrid ul{font-size:.73rem;gap:5px}.fgrid h5{font-size:.55rem;margin-bottom:9px}
  .fgrid>div:first-child p{font-size:.75rem}.igfoot p{font-size:.72rem}.footsocial button{width:32px;height:32px}.fs-label{display:none}}
/* Handy: weiterhin nebeneinander, aber 2x2 statt 4 in einer Reihe - sonst laeuft der Footer aus dem Bild */
@media(max-width:560px){.fgrid{grid-template-columns:1fr 1fr;gap:22px 16px}
  .fgrid>div:first-child{grid-column:1 / -1}
  .fgrid ul{font-size:.79rem}.fgrid h5{font-size:.6rem;letter-spacing:.16em}}
.fgrid h5{font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-light);margin:0 0 13px;font-weight:700;font-family:Lato,sans-serif}
.fgrid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:.84rem}
.fgrid ul li{overflow-wrap:anywhere}
.fbottom a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(244,241,234,.3)}
.fbottom a:hover{color:var(--gold-light);border-color:var(--gold-light)}
.fbottom{margin-top:26px;padding-top:18px;border-top:1px solid rgba(244,241,234,.14);font-size:.76rem;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;color:rgba(244,241,234,.55)}

/* ---------- Gewählte Zustände: Gold statt Navy ---------- */
.stopt[aria-pressed="true"],
.cday[aria-pressed="true"],
.slot[aria-pressed="true"],
.tt[aria-pressed="true"],
.chip[aria-pressed="true"],
.seg button[aria-pressed="true"],
.nudge .nb.primary{
  background:linear-gradient(180deg,var(--gold-light),var(--gold));
  border-color:var(--gold);color:#12100A;font-weight:700;
  box-shadow:0 0 0 1px rgba(201,169,78,.45),0 10px 26px -12px rgba(201,169,78,.85)}
.stopt[aria-pressed="true"] small{color:rgba(18,16,10,.72)}
.tt[aria-pressed="true"] .ttn{color:rgba(18,16,10,.7)}
.tt[aria-pressed="true"] svg{stroke:#12100A}
.tt[aria-pressed="true"]::after{color:#12100A;opacity:1}
.cday[aria-pressed="true"]::after{background:#12100A}
.card-cta:hover{background:var(--gold);color:#12100A;font-weight:700}
.fab-main:hover{background:var(--gold);border-color:var(--gold);color:#12100A}

/* Klick-Leuchten */
@keyframes goldflash{
  0%{box-shadow:0 0 0 0 rgba(201,169,78,.55),0 0 0 0 rgba(201,169,78,0)}
  40%{box-shadow:0 0 0 6px rgba(201,169,78,.28),0 0 28px 2px rgba(201,169,78,.5)}
  100%{box-shadow:0 0 0 12px rgba(201,169,78,0),0 0 0 0 rgba(201,169,78,0)}}
.btn:active,.chip:active,.tt:active,.seg button:active,.slot:active,
.cday.free:active,.stopt:active,.card-cta:active,.calnav button:active{
  animation:goldflash .5s var(--ease)}
@media(prefers-reduced-motion:reduce){
  .btn:active,.chip:active,.tt:active,.seg button:active,.slot:active,
  .cday.free:active,.stopt:active,.card-cta:active,.calnav button:active{animation:none}}

/* ---------- Kopf: Logo exakt mittig, grösserer Atem ---------- */
.navbar{height:128px}
.brand{align-self:center}
.brand img{align-self:center}
@media(max-width:560px){.navbar{height:98px}}

/* Logo-Klick: goldener Impuls */
@keyframes logotap{
  0%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(201,169,78,0))}
  35%{transform:scale(.94);filter:drop-shadow(0 0 16px rgba(201,169,78,.85))}
  70%{transform:scale(1.045);filter:drop-shadow(0 0 22px rgba(201,169,78,.55))}
  100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(201,169,78,0))}}
.brand img{transition:transform .35s var(--ease),filter .35s var(--ease)}
.brand:hover img{transform:scale(1.035);filter:drop-shadow(0 0 14px rgba(201,169,78,.45))}
.brand.tapped img{animation:logotap .62s var(--ease)}
@media(prefers-reduced-motion:reduce){.brand.tapped img{animation:none}.brand:hover img{transform:none}}

/* ---------- WhatsApp: grün statt gold ---------- */
:root{--wa:#25D366; --wa-deep:#149B4E; --wa-ink:#07381C}
@keyframes waflash{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}
  40%{box-shadow:0 0 0 6px rgba(37,211,102,.26),0 0 26px 2px rgba(37,211,102,.55)}
  100%{box-shadow:0 0 0 12px rgba(37,211,102,0)}}
.btn-wa{background:transparent;border-color:var(--wa-deep);color:var(--ink)}
.btn-wa:hover{border-color:var(--wa);color:var(--wa-deep);background:rgba(37,211,102,.07)}
.btn-wa:active,.util[data-demo="wa"]:active,.fu-wa:active,.fab-wa:active,.nb-wa:active{animation:waflash .55s var(--ease)}
.util[data-demo="wa"]:hover{color:var(--wa);border-color:rgba(37,211,102,.55)}
.fab-wa:hover{color:var(--wa)!important;border-color:rgba(37,211,102,.5)!important}
/* Das WhatsApp-Gruen ist als Flaeche gedacht, nicht als Schrift: auf Weiss
   kommt es nur auf 1,95:1 und ist kaum zu lesen. Der Rahmen bleibt gruen,
   die Schrift wird dunkel. */
.nb-wa{border-color:rgba(37,211,102,.55)!important;color:#0B6B33!important}
.nb-wa:hover{background:var(--wa)!important;color:#062B14!important;border-color:var(--wa)!important}
.fu-wa:hover{color:var(--wa)!important}
footer.site a[data-demo="wa"]:hover{color:var(--wa)}

/* ---------- Hero: Plan-Hintergrund reagiert auf die Maus ---------- */


.hero .spot{background:radial-gradient(560px circle at var(--mx,60%) var(--my,40%),rgba(201,169,78,.24),transparent 64%)}


/* ---------- Auswahlfelder sehen aus wie Eingabefelder ---------- */
select{-webkit-appearance:none;appearance:none;padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B08A34' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:16px 16px}
select:focus,input:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,169,78,.18)}

/* ---------- Ort + Umkreis + Hinzufügen exakt auf einer Linie ---------- */
.locadd{grid-template-columns:1.4fr 1fr auto;gap:10px 14px;align-items:end}
.locadd>div{display:flex;flex-direction:column;justify-content:flex-end}
.locadd .fl{margin:0 0 8px;line-height:1.2;min-height:1.2em}
.locadd input,.locadd select,.locadd .btn{height:48px;box-sizing:border-box}
.locadd .btn{display:flex;align-items:center;justify-content:center;padding-inline:26px;white-space:nowrap}
@media(max-width:620px){.locadd input,.locadd select,.locadd .btn{height:46px}}
.stfields input,.stfields select{height:48px;box-sizing:border-box}
.stfields>div{display:flex;flex-direction:column}
.stfields .fl{margin:0 0 8px;line-height:1.2;min-height:1.2em}

/* ---------- Objektart-Kacheln bündig in einer Reihe ---------- */
.tt-row{grid-template-columns:repeat(auto-fit,minmax(152px,1fr))!important;align-items:stretch}
.tt-row .tt{min-height:104px;justify-content:flex-start}
.tt-row .ttl{min-height:2.6em}
@media(max-width:720px){.tt-row{grid-template-columns:repeat(2,1fr)!important}.tt-row .ttl{min-height:0}}

/* ---------- Schliessen-Knopf im Dialog: gold, rechts ---------- */
.modalcard .nclose,.nclose.mclose{position:absolute;top:12px;right:14px;left:auto;
  background:none;border:1px solid rgba(201,169,78,.4);border-radius:50%;
  width:34px;height:34px;display:grid;place-items:center;
  color:var(--gold);font-size:1.25rem;line-height:1;cursor:pointer;padding:0;transition:.18s;z-index:2}
.modalcard .nclose:hover,.nclose.mclose:hover{background:var(--gold);color:#12100A;border-color:var(--gold)}

/* ---------- Karten-Link beim Terminformular ---------- */
.maplink{display:inline-block;margin-top:8px;font-size:.78rem;color:var(--gold-ink);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.maplink:hover{color:var(--gold-light)}
.maplink[hidden]{display:none}

/* ---------- Kleine Servicezeile im Footer ---------- */
.futil{margin-top:26px;padding-top:16px;border-top:1px solid rgba(244,241,234,.14);
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;font-size:.72rem}
.futil .fu{display:inline-flex;align-items:center;gap:6px;color:rgba(244,241,234,.6);
  text-decoration:none;cursor:pointer;padding:4px 0;transition:.18s;background:none;border:0;font:inherit;font-size:.72rem}
.futil .fu:hover{color:var(--gold-light)}
.futil .fu svg{opacity:.75;flex:0 0 auto}
.fulangs{margin-left:auto;display:flex;gap:1px;padding-left:12px;border-left:1px solid rgba(244,241,234,.16)}
.fulangs button{background:none;border:0;cursor:pointer;font:inherit;font-size:.66rem;letter-spacing:.09em;
  color:rgba(244,241,234,.5);padding:4px 5px}
.fulangs button[aria-pressed="true"]{color:var(--gold-light);font-weight:700}
.fulangs button:hover{color:var(--gold-light)}
@media(max-width:620px){.futil{gap:5px 12px;font-size:.68rem}.fulangs{margin-left:0;border-left:0;padding-left:0;width:100%}}
footer.site .fgrid a{cursor:pointer}

/* ---------- Banner: Baupläne, ruhig ---------- */
.hero{min-height:74vh;display:flex;align-items:center}
@media(max-width:700px){.hero{min-height:64vh}}
.hero .wrap.hero-inner{width:100%}
.heroimg{transition:filter .6s var(--ease);will-change:transform,filter}
.hero:hover .heroimg{filter:brightness(1.3) saturate(1.08)}
.hero .spot{background:radial-gradient(300px circle at var(--mx,60%) var(--my,40%),rgba(201,169,78,.20),transparent 66%)}
@media(prefers-reduced-motion:reduce){.hero:hover .heroimg{filter:none}.heroimg{transform:none!important}}

/* ---------- Schnellkontakt über dem Formular ---------- */
.quickrow{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:12px}
.quickbtn{display:inline-flex;align-items:center;gap:9px;padding:13px 22px}
.quickbtn svg{flex:0 0 auto;opacity:.85}
.quickhint{text-align:center;font-size:.79rem;color:var(--muted);margin:0 0 26px}
@media(max-width:560px){.quickrow{flex-direction:column}.quickbtn{width:100%;justify-content:center}}

/* ---------- Kennzahlen auf Creme ---------- */
.kpi::after{background:linear-gradient(90deg,transparent,rgba(201,169,78,.75),transparent)}

/* ---------- Footer-Servicezeile mittig ---------- */
.futil{justify-content:center;gap:8px 26px}
.fulangs{margin-left:0}
@media(max-width:620px){.futil{justify-content:center}.fulangs{width:auto}}

/* ---------- Wissensabschnitt ---------- */

/* ---- Videobanner ---- */
.herovideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:0;transition:opacity 1.2s var(--ease)}
.herovideo.laeuft,.herovideo[poster]{opacity:1}
.herotint{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(7,41,66,.92) 0%,rgba(7,41,66,.72) 38%,rgba(7,41,66,.30) 75%,rgba(7,41,66,.18) 100%)}
.hero .hero-inner{position:relative;z-index:2}
.hero .grain,.hero .spot{z-index:1}
.bannervideo{position:relative;overflow:hidden;background:var(--navy-deep);color:#F4F1EA;min-height:62vh;display:flex;align-items:center;padding-block:clamp(72px,10vw,140px)}
.bannerinhalt{position:relative;z-index:2;max-width:var(--maxw)}
.bannertitel{font-family:'EB Garamond',Georgia,serif;font-weight:500;font-size:clamp(2rem,5vw,3.4rem);line-height:1.12;letter-spacing:-.015em;margin:12px 0 16px;max-width:17ch;color:#F4F1EA}
.bannerinhalt .lead{color:#DDE5ED;max-width:52ch;margin-bottom:26px}
.bannerinhalt .eyebrow{color:var(--gold-light)}
@media(max-width:760px){.herotint{background:linear-gradient(180deg,rgba(7,41,66,.55) 0%,rgba(7,41,66,.88) 60%)}}
.herovideo.blende{opacity:0!important}
.bauvideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:3;pointer-events:none;opacity:0;transition:opacity 1s var(--ease)}
.buildwrap.hatvideo{padding:0;aspect-ratio:16/9}
.buildwrap.hatvideo .buildsvg,.buildwrap.hatvideo::before,.buildwrap.hatvideo::after{display:none}
.buildwrap.hatvideo .bauvideo{opacity:1}
.buildwrap.hatvideo .bauvideo.blende{opacity:0}
@media(prefers-reduced-motion:reduce){.herovideo{transition:none}}

/* ---- Newsletter im Fussbereich ---- */
.nlband{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;padding:0 0 40px;margin-bottom:38px;border-bottom:1px solid rgba(244,241,234,.16)}
.nlband h4{font-family:'EB Garamond',Georgia,serif;font-weight:500;font-size:1.5rem;margin:8px 0 10px;color:#F4F1EA}
.nlband .nltext p{color:#C8D3DE;font-size:.9rem;line-height:1.65;margin:0}
.nlthemen{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:12px}
.nlthemen label{display:flex;align-items:center;gap:7px;font-size:.84rem;color:#DDE5ED;cursor:pointer}
.nlzeile{display:flex;gap:9px}
.nlzeile input{flex:1;min-width:0;padding:12px 14px;font:inherit;font-size:.92rem;border-radius:6px;border:1px solid rgba(244,241,234,.28);background:rgba(244,241,234,.06);color:#F4F1EA}
.nlzeile input::placeholder{color:rgba(244,241,234,.55)}
.nlzeile input:focus{outline:none;border-color:var(--gold-light);background:rgba(244,241,234,.1)}
.nlklein{font-size:.76rem;color:#C8D3DE;line-height:1.6;margin-top:10px}
.nlklein a{color:var(--gold-light)}
.nlklein.gut{color:#9FD8B4}
.nlklein.schlecht{color:#F0B4AC}
@media(max-width:860px){.nlband{grid-template-columns:1fr;gap:22px}}

#curtain.sofort{transition:none!important;animation:none!important}

.lhint{font-size:.78rem;color:var(--muted);line-height:1.6;margin-top:12px}
.lhint a{color:var(--gold-ink);text-decoration:underline}
.stfields .fl em{color:var(--muted);font-size:.72rem}

.eigenpanel{margin-top:18px;border-left:2px solid var(--navy-soft)}
.zweiwert{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.zweiwert .wk{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.zweiwert .wk.eigen{border-color:var(--gold);background:var(--surface)}
.zweiwert .wl{display:block;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:6px}
.zweiwert .wk.eigen .wl{color:var(--gold-ink)}
.zweiwert b{display:block;font-size:1.02rem;line-height:1.35}
.zweiwert small{display:block;color:var(--muted);font-size:.78rem;margin-top:4px}
.unterschied{margin-top:14px;font-size:.89rem;color:var(--muted);line-height:1.6}
@media(max-width:560px){.zweiwert{grid-template-columns:1fr}}

.resulthead .klein{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink);font-weight:700;margin-bottom:6px}
.resulthead .big{font-size:clamp(1.7rem,4.2vw,2.7rem)}
.resulthead .conflabel{max-width:62ch;margin-inline:auto}
.confbar{display:none}

/* Die Hauptueberschrift einer Unterseite ist eine H1 - sie soll aber so aussehen wie bisher, darum behaelt sie die Groesse der H2. */
h1.wie-h2{font-size:clamp(1.6rem,3.2vw,2.35rem);letter-spacing:-.012em}

/* ---- Logo-Intro (baut das Original-Logo auf) ---- */
#curtain.intro{display:block;background:transparent;transition:opacity .6s var(--ease),visibility .6s;cursor:pointer}
#curtain.intro::before{content:"";position:absolute;inset:0;
  background:radial-gradient(75% 75% at 50% 50%,#072942 0%,#072942 45%,#041A2B 100%);transition:opacity .9s var(--ease)}
#curtain.intro .iraster{position:absolute;inset:0;pointer-events:none;opacity:0;
  background-image:linear-gradient(rgba(201,169,78,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(201,169,78,.06) 1px,transparent 1px);
  background-size:28px 28px;mask-image:radial-gradient(40% 40% at 50% 50%,#000 20%,transparent 100%);
  -webkit-mask-image:radial-gradient(40% 40% at 50% 50%,#000 20%,transparent 100%);
  animation:iraster 2.6s var(--ease) forwards}
@keyframes iraster{0%{opacity:0}25%{opacity:1}100%{opacity:.2}}
#curtain.intro .ilogo{position:absolute;left:50%;top:50%;width:min(76vw,300px);height:min(76vw,300px);
  transform:translate(-50%,-50%);transform-origin:50% 50%;transition:transform .95s cubic-bezier(.7,0,.2,1)}
#curtain.intro .ilogo > *{position:absolute;inset:0;width:100%;height:100%;display:block}
#curtain.intro .i-lage{overflow:visible}
#curtain.intro img{width:100%;height:100%;opacity:1;animation:none}
#curtain.intro .i-haus > *{position:absolute;inset:0;width:100%;height:100%;display:block}
#curtain.intro .i-band{user-select:none;-webkit-user-drag:none}
#curtain.intro .iskip{position:absolute;right:22px;bottom:20px;background:none;border:1px solid rgba(201,169,78,.35);
  color:rgba(244,241,234,.7);font:500 .72rem/1 Lato,sans-serif;letter-spacing:.18em;text-transform:uppercase;
  padding:10px 14px;border-radius:999px;cursor:pointer;opacity:0;animation:cin .6s ease 1.2s forwards}
#curtain.intro .iskip:hover{color:#fff;border-color:var(--gold-light)}
/* Scheibe und Ring */
#curtain.intro .i-disc{opacity:0;transform-origin:150px 150px;transform:scale(.86);animation:idisc 1s cubic-bezier(.2,.7,.2,1) 1.95s forwards}
@keyframes idisc{to{opacity:1;transform:none}}
#curtain.intro .i-ring{stroke-dasharray:1;stroke-dashoffset:1;transform-origin:150px 150px;transform:rotate(-90deg);
  animation:izeich 1.3s cubic-bezier(.6,0,.2,1) 1.9s forwards}
/* Haus: Linien, dann das echte Haus aus dem Logo, Fenster leuchten, nach oben */
#curtain.intro .i-haus{transform-origin:50% 26%;transform:translateY(22%) scale(1.35);animation:ihoch .95s cubic-bezier(.7,0,.2,1) 1.9s forwards}
@keyframes ihoch{to{transform:none}}
#curtain.intro .i-guides{opacity:.55;animation:iweg .7s ease 2.1s forwards}
#curtain.intro .i-g{stroke-dasharray:1;stroke-dashoffset:1;animation:izeich .9s cubic-bezier(.6,0,.2,1) .1s forwards}
#curtain.intro .i-g2{animation-delay:.35s}
#curtain.intro .i-line{stroke-dasharray:1;stroke-dashoffset:1}
#curtain.intro .i-roof{animation:izeich 1s cubic-bezier(.65,0,.25,1) .35s forwards}
#curtain.intro .i-wall{animation:izeich .5s cubic-bezier(.65,0,.25,1) 1.05s forwards}
#curtain.intro .i-striche{animation:iweg .5s ease 1.6s forwards}
@keyframes izeich{to{stroke-dashoffset:0}}
@keyframes iweg{to{opacity:0}}
#curtain.intro .i-hausbild{opacity:0;animation:iein .5s ease 1.45s forwards}
@keyframes iein{to{opacity:1}}
#curtain.intro .i-glut{opacity:0;filter:drop-shadow(0 0 4px #FFD877) drop-shadow(0 0 10px rgba(255,200,90,.6));animation:ilicht 1.3s ease forwards}
#curtain.intro .i-glut0{animation-delay:1.5s}#curtain.intro .i-glut1{animation-delay:1.62s}
#curtain.intro .i-glut2{animation-delay:1.74s}#curtain.intro .i-glut3{animation-delay:1.86s}
@keyframes ilicht{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
/* Schrift - Ausschnitte aus dem Logo */
#curtain.intro .i-off,#curtain.intro .i-market{opacity:0;transform:translateY(4%);filter:blur(5px);animation:ischrift .8s cubic-bezier(.2,.7,.2,1) forwards}
#curtain.intro .i-off{animation-delay:2.45s}
#curtain.intro .i-market{animation-delay:2.7s}
@keyframes ischrift{to{opacity:1;transform:none;filter:blur(0)}}
#curtain.intro .i-homes{opacity:0;transform:scaleX(1.35);animation:ihomes .9s cubic-bezier(.2,.7,.2,1) 3s forwards}
@keyframes ihomes{to{opacity:1;transform:none}}
/* Zum Schluss liegt das vollstaendige Original-Logo obenauf */
#curtain.intro .i-voll{opacity:0;animation:iein .45s ease 3.75s forwards}
/* Ueberspringen: alles sofort ans Ende */
#curtain.intro.fertig *{animation-delay:0s!important;animation-duration:.01s!important}
/* Flug an den Platz oben links */
#curtain.intro.fliegt{pointer-events:none}
#curtain.intro.fliegt::before{opacity:0}
#curtain.intro.fliegt .iraster,#curtain.intro.fliegt .iskip{opacity:0!important;transition:opacity .3s}
html.intro-laeuft header .brand img{visibility:hidden}
@media(prefers-reduced-motion:reduce){#curtain.intro{display:none}}

/* ---- Objekt einliefern: drei Karten, alles auf einer Linie ---- */
#view-einliefern .grid > .panel{display:flex;flex-direction:column}
#view-einliefern .grid > .panel > .btn{margin-top:auto!important}
#view-einliefern .grid > .panel > .drivers{margin-bottom:18px}
@media(min-width:1000px){
  #view-einliefern .grid{grid-template-columns:repeat(3,1fr)!important;grid-template-rows:repeat(5,auto);row-gap:0}
  #view-einliefern .grid > .panel{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0;align-content:start}
  #view-einliefern .grid > .panel > .btn{align-self:end}
}

/* ---- Suchmandat-Banner: Text links im dunklen Bereich des Videos ---- */
.bannervideo .wrap.bannerinhalt{margin:0;max-width:none;width:100%;
  padding-left:clamp(24px,6vw,120px);padding-right:24px;text-align:left}
.bannervideo .bannerinhalt > *{max-width:min(34vw,540px)}
@media(max-width:1100px){.bannervideo .bannerinhalt > *{max-width:44vw}}
@media(max-width:760px){.bannervideo .bannerinhalt > *{max-width:none}}

/* ---- Hinweis «Eckdaten ohne Anmeldung» gut sichtbar ---- */
#bestandStand{font-style:normal;font-size:1rem;line-height:1.55;font-weight:500;color:var(--ink);
  background:rgba(201,169,78,.11);border:1px solid rgba(201,169,78,.38);border-left:4px solid var(--gold);
  border-radius:10px;padding:15px 20px 15px 54px;max-width:820px;margin:28px auto 0;text-align:left;position:relative}
#bestandStand::before{content:"";position:absolute;left:18px;top:50%;width:22px;height:22px;margin-top:-11px;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B08A34' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E")}
.dark #bestandStand{color:#F4F1EA;background:rgba(201,169,78,.12)}
#bestandStand .standdatum:not([hidden]){display:block;text-align:right;font-size:.78rem;font-weight:400;
  color:var(--muted);margin:-5px -4px 6px 0;letter-spacing:.01em}
#bestandStand .standdatum b{color:var(--ink);font-weight:700}
#bestandStand .standtext{display:block}
/* ---- «Zugang anfragen» leuchtet in Gold und schimmert beim Darueberfahren ---- */
.card-cta{position:relative;overflow:hidden;border-top:0;font-weight:700;letter-spacing:.02em;font-size:.84rem;
  color:#12100A;background:linear-gradient(180deg,#C9A94E 0%,#C9A94E 100%);animation:ctaLeuchten 2.8s ease-in-out infinite}
@keyframes ctaLeuchten{0%,100%{box-shadow:inset 0 0 0 rgba(255,228,150,0);filter:brightness(1)}
  50%{box-shadow:inset 0 0 22px rgba(255,228,150,.55);filter:brightness(1.07)}}
.card-cta::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:50%;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.65) 50%,rgba(255,255,255,0) 100%);
  transform:skewX(-20deg)}
.card-cta:hover,.card:hover .card-cta{background:linear-gradient(180deg,#C9A94E 0%,#C9A94E 100%);color:#12100A}
.card-cta:hover::after,.card:hover .card-cta::after{animation:ctaSchimmer 1.15s ease-in-out infinite}
@keyframes ctaSchimmer{0%{left:-70%}100%{left:130%}}
@media(prefers-reduced-motion:reduce){.card-cta{animation:none}.card-cta:hover::after,.card:hover .card-cta::after{animation:none}}

/* ---- Schwestermarke Voyage Homes ---- */
.schwester{display:flex;align-items:center;gap:20px;margin:44px auto 0;max-width:900px;padding:20px 24px;
  border:1px solid rgba(201,169,78,.35);border-radius:10px;background:var(--surface)}
.schwester img{width:56px;height:56px;border-radius:50%;flex:0 0 auto}
.schwester b{display:block;font-family:"EB Garamond",serif;font-size:1.25rem;font-weight:500}
.schwester span{display:block;font-size:.9rem;color:var(--muted);line-height:1.55}
.schwester div{flex:1}
.schwester .btn{white-space:nowrap}
@media(max-width:700px){.schwester{flex-direction:column;text-align:center}}

/* ---- Grundriss (Giraffe360) am Rande ---- */
.omh-praes{display:grid;grid-template-columns:1fr 1.1fr;gap:26px;align-items:center}
@media(max-width:860px){.omh-praes{grid-template-columns:1fr}}
.omh-plan{position:relative;margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#FBF8F2}
.omh-plan .gr-plan{display:block;width:100%;height:auto;padding:34px 10px 12px}
.omh-plan .gr-moebel{transition:opacity .5s}
.omh-plan.ohne .gr-moebel{opacity:0}
.gr-wahl{position:absolute;top:8px;right:8px;z-index:2;display:flex;background:#EEE9DD;border-radius:999px;padding:3px}
.gr-wahl button{border:0;background:none;font:700 .68rem Lato,sans-serif;letter-spacing:.06em;padding:6px 10px;border-radius:999px;cursor:pointer;color:#4A5765}
.gr-wahl button[aria-pressed="true"]{background:#fff;color:#13304F;box-shadow:0 1px 3px rgba(0,0,0,.15)}

/* =================== Tippgeberprovision =================== */
.tg-held{padding-top:clamp(40px,6vw,80px)}
.tg-held .lead{max-width:62ch}
.tg-betraege{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:30px 0 8px}
@media(max-width:720px){.tg-betraege{grid-template-columns:1fr}}
.tg-betrag{border:1px solid var(--line-strong);border-radius:14px;padding:24px 26px;background:var(--surface);position:relative;overflow:hidden}
.tg-betrag::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--gold)}
.tg-betrag small{display:block;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--gold-ink)}
.tg-betrag b{display:block;font-family:"Cormorant Garamond","EB Garamond",Georgia,serif;font-weight:500;font-size:clamp(2.2rem,5vw,3.1rem);line-height:1.05;margin:8px 0 6px;color:var(--ink)}
.tg-betrag span{color:var(--muted);font-size:.95rem;line-height:1.55}
.tg-hinweis{color:var(--muted);font-size:.92rem;max-width:70ch}
.tg-schritte{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:10px;counter-reset:tg}
@media(max-width:820px){.tg-schritte{grid-template-columns:1fr}}
.tg-schritt{padding:22px 22px 20px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.tg-schritt::before{counter-increment:tg;content:counter(tg);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--gold);color:var(--gold-ink);font-weight:700;margin-bottom:12px}
.tg-schritt h3{margin:0 0 6px;font-size:1.3rem}
.tg-schritt p{margin:0;color:var(--muted);line-height:1.6}
.tg-form{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;max-width:860px;margin-top:8px}
.tg-form .voll{grid-column:1/-1}
@media(max-width:700px){.tg-form{grid-template-columns:1fr}}
.tg-form label{display:flex;flex-direction:column;gap:6px;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.tg-form input,.tg-form select,.tg-form textarea{font:inherit;font-size:1rem;text-transform:none;letter-spacing:0;font-weight:400;color:var(--ink);
  border:1px solid var(--line-strong);border-radius:10px;padding:12px 13px;background:var(--surface)}
.tg-form textarea{min-height:110px;resize:vertical}
.tg-form input:focus,.tg-form select:focus,.tg-form textarea:focus{outline:2px solid var(--gold);outline-offset:1px}
.tg-form .tg-teil{grid-column:1/-1;margin:14px 0 0;font-family:"Cormorant Garamond","EB Garamond",serif;font-size:1.35rem;font-weight:500;color:var(--ink);text-transform:none;letter-spacing:0}
.tg-form .tg-haken{flex-direction:row;align-items:flex-start;gap:10px;text-transform:none;letter-spacing:0;font-weight:400;font-size:.92rem;color:var(--ink)}
.tg-form .tg-haken input{width:18px;height:18px;margin-top:2px;accent-color:var(--gold);flex:none}
.tg-seg{display:flex;flex-wrap:wrap;gap:8px}
.tg-seg button{border:1px solid var(--line-strong);background:var(--surface);border-radius:999px;padding:9px 14px;font:inherit;font-size:.9rem;cursor:pointer;color:var(--ink);text-transform:none;letter-spacing:0;font-weight:400}
.tg-seg button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#12100A;font-weight:700}
.tg-senden{justify-self:start}
.tg-meldung{grid-column:1/-1;margin:0;font-size:.95rem}
.tg-meldung.ok{padding:14px 16px;border-radius:10px;background:rgba(47,125,83,.09);border:1px solid rgba(47,125,83,.3);color:#1f5a3b}
.tg-meldung.fehler{padding:14px 16px;border-radius:10px;background:rgba(166,58,46,.08);border:1px solid rgba(166,58,46,.3);color:#7c2a21}
.tg-klein{font-size:.84rem;color:var(--muted);line-height:1.6;max-width:80ch}
/* Hinweisband auf Start- und Verkaufsseite */
.tg-band{padding-block:30px!important}
.tg-band .wrap{display:flex;align-items:center;gap:22px;
  border:1px solid rgba(201,169,78,.4);border-left:4px solid var(--gold);border-radius:14px;padding:18px 20px 18px 22px;
  background:var(--surface);box-shadow:0 14px 34px -24px rgba(0,0,0,.35)}
.tg-band .tg-icon{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:rgba(201,169,78,.12);border:1px solid rgba(201,169,78,.45)}
.tg-band .tg-icon svg{width:24px;height:24px;fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tg-band .tg-text{flex:1;min-width:0}
.tg-band small{display:block;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:var(--gold-ink);margin-bottom:4px}
.tg-band p{margin:0;line-height:1.45;font-size:1rem;color:var(--ink);text-wrap:balance}
.tg-band p b{font-weight:700}
.tg-band .btn{flex:none}
@media(max-width:700px){.tg-band .wrap{flex-wrap:wrap}.tg-band .btn{width:100%;text-align:center}}
/* Kleines Fenster unten links: einmal, dezent, leicht zu schliessen */
.tg-pop{position:fixed;left:22px;bottom:22px;z-index:900;width:min(380px,calc(100vw - 44px));background:#FBF8F2;color:#1d1b17;
  border-radius:16px;padding:22px 22px 18px;box-shadow:0 24px 60px -18px rgba(0,0,0,.45),0 0 0 1px rgba(201,169,78,.35);
  transform:translateY(24px);opacity:0;visibility:hidden;transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .5s,visibility .5s}
.tg-pop.an{transform:none;opacity:1;visibility:visible}
.tg-pop::before{content:"";position:absolute;left:22px;right:22px;top:0;height:3px;border-radius:0 0 3px 3px;background:var(--gold)}
.tg-pop .tg-zu{position:absolute;right:10px;top:10px;width:32px;height:32px;border:0;background:none;font-size:1.3rem;line-height:1;cursor:pointer;color:#6b655b;border-radius:50%}
.tg-pop .tg-zu:hover{background:rgba(0,0,0,.06)}
.tg-pop small{display:block;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--gold-ink)}
.tg-pop h4{margin:6px 30px 8px 0;font-family:"Cormorant Garamond","EB Garamond",serif;font-weight:500;font-size:1.5rem;line-height:1.15;color:#1d1b17}
.tg-pop p{margin:0 0 14px;font-size:.93rem;line-height:1.55;color:#4d4840}
.tg-pop .tg-knopfe{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tg-pop .tg-spaeter{background:none;border:0;color:#6b655b;font:inherit;font-size:.88rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
@media(max-width:600px){.tg-pop{left:12px;right:12px;bottom:12px;width:auto}}
/* Sprechblase an der Leiste rechts */
.tg-pop.blase{left:auto;bottom:auto;width:min(340px,calc(100vw - 120px));border-radius:18px;transform:translateX(18px) scale(.96);transform-origin:right center}
.tg-pop.blase.an{transform:none}
.tg-pop.blase::after{content:"";position:absolute;right:-9px;top:calc(var(--spitze,70px) - 9px);width:18px;height:18px;background:#FBF8F2;
  transform:rotate(45deg);box-shadow:3px -3px 0 0 rgba(201,169,78,.35);border-radius:0 3px 0 0}
.tg-pop.blase::before{left:18px;right:18px}
.vh-leiste a.tg-ruft{animation:tgRuf 1.6s ease-in-out 3}
@keyframes tgRuf{0%,100%{box-shadow:-6px 8px 22px -14px rgba(0,0,0,.55)}50%{box-shadow:0 0 0 3px var(--gold),-6px 8px 22px -14px rgba(0,0,0,.55)}}
@media(prefers-reduced-motion:reduce){.tg-pop{transition:none}}
/* Rechner-Knoepfe so breit wie die Tafel darueber */
.tool-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tool-actions .btn{width:100%;justify-content:center;text-align:center;white-space:normal}
@media(max-width:640px){.tool-actions{grid-template-columns:1fr}}
/* Wertrechner: Parkplaetze je Art mit Anzahl */
.pp-zeilen{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.pp-zeile{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 14px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface)}
.pp-zeile span{font-size:.92rem;color:var(--ink)}
.pp-zahl{display:flex;align-items:center;gap:6px}
.pp-zahl b{min-width:34px;text-align:center;font-size:1.1rem;font-variant-numeric:tabular-nums}
.pp-zahl button{width:36px;height:36px;border-radius:50%;border:1px solid var(--gold);background:transparent;color:var(--ink);font-size:1.2rem;line-height:1;cursor:pointer}
.pp-zahl button:hover{background:var(--gold);color:#12100A}
/* Wertrechner: Parkplaetze je Art mit Anzahl */
.pp-zeilen{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.pp-zeile{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 14px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface)}
.pp-zeile span{font-size:.92rem;color:var(--ink)}
.pp-zahl{display:flex;align-items:center;gap:6px}
.pp-zahl b{min-width:34px;text-align:center;font-size:1.1rem;font-variant-numeric:tabular-nums}
.pp-zahl button{width:36px;height:36px;border-radius:50%;border:1px solid var(--gold);background:transparent;color:var(--ink);font-size:1.2rem;line-height:1;cursor:pointer}
.pp-zahl button:hover{background:var(--gold);color:#12100A}
/* Kontaktfenster fuer Bewertung, Konditionen und PDF (statt Browser-Abfrage) */
.kf-huelle{position:fixed;inset:0;z-index:1200;background:rgba(8,14,22,.55);display:grid;place-items:center;padding:16px}
.kf-box{position:relative;width:min(460px,100%);background:#FBF8F2;color:#1d1b17;border-radius:16px;padding:26px 26px 22px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6),0 0 0 1px rgba(201,169,78,.35);display:flex;flex-direction:column;gap:12px}
.kf-box h3{margin:0;font-family:"Cormorant Garamond","EB Garamond",serif;font-weight:500;font-size:1.6rem;color:#1d1b17}
.kf-box .eyebrow{margin:0;color:var(--gold-ink)}
.kf-satz{margin:0 0 4px;color:#5a544a;font-size:.93rem;line-height:1.55}
.kf-box label{display:flex;flex-direction:column;gap:5px;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:#5a544a}
.kf-box input{font:inherit;font-size:1rem;text-transform:none;letter-spacing:0;font-weight:400;color:#1d1b17;border:1px solid rgba(58,55,50,.22);border-radius:10px;padding:11px 12px;background:#fff}
.kf-box input:focus{outline:2px solid var(--gold);outline-offset:1px}
.kf-zu{position:absolute;right:10px;top:10px;width:34px;height:34px;border:0;background:none;font-size:1.4rem;cursor:pointer;color:#6b655b;border-radius:50%}
.kf-zu:hover{background:rgba(0,0,0,.06)}
.kf-fehler{margin:0;min-height:1.2em;color:#9a2f24;font-size:.88rem}
.kf-los{align-self:flex-start}

/* Lange Uebersetzungen in den Kacheln sauber trennen */
.vh-leiste > a,.vh-leiste .vh-l-kontakt > button{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
@media(min-width:1441px){html:not([lang^="de"]) .vh-leiste > a,html:not([lang^="de"]) .vh-leiste > div > button{font-size:.56rem;letter-spacing:0;line-height:1.15}}

/* =================== Schnellleiste rechts =================== */
.vh-leiste{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:800;display:flex;flex-direction:column;gap:3px}
.vh-leiste > a,.vh-leiste > div > button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  width:68px;height:66px;padding:6px 4px;border:0;border-radius:10px 0 0 10px;background:var(--navy-deep);color:#F4F1EA;text-decoration:none;cursor:pointer;
  font:700 .6rem/1.15 Lato,sans-serif;letter-spacing:.04em;text-align:center;
  box-shadow:-6px 8px 22px -14px rgba(0,0,0,.55),inset 0 0 0 1px rgba(201,169,78,.4);transition:width .25s,background .25s}
.vh-leiste svg{width:21px;height:21px;fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.vh-leiste .vh-l-kontakt > button{background:var(--gold);color:#12100A}
.vh-leiste .vh-l-kontakt > button svg{stroke:#12100A}
.vh-leiste > a:hover,.vh-leiste > div > button:hover,.vh-leiste > a:focus-visible{width:74px;background:var(--navy)}
.vh-leiste .vh-l-kontakt > button:hover{background:var(--gold);filter:brightness(1.07)}
.vh-leiste > a[aria-current="page"]{background:var(--navy-soft)}
.vh-leiste > a.vh-l-tipp{margin-top:8px;box-shadow:-6px 8px 22px -14px rgba(0,0,0,.55),inset 0 0 0 1px var(--gold)}
.vh-leiste > a.vh-l-tipp svg{stroke:var(--gold)}
.vh-leiste [data-satz]::after{content:attr(data-satz);position:absolute;right:calc(100% + 10px);top:50%;transform:translate(8px,-50%);white-space:nowrap;
  background:#FBF8F1;color:#16202B;font:600 .8rem Lato,sans-serif;letter-spacing:0;padding:9px 13px;border-radius:8px;
  box-shadow:0 10px 26px -12px rgba(0,0,0,.4),0 0 0 1px rgba(201,169,78,.35);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.vh-leiste [data-satz]:hover::after,.vh-leiste [data-satz]:focus-visible::after{opacity:1;transform:translate(0,-50%)}
.vh-l-kontakt{position:relative}
.vh-l-menue{position:absolute;right:calc(100% + 10px);top:0;min-width:240px;background:#FBF8F1;border-radius:12px;padding:8px;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.45),0 0 0 1px rgba(201,169,78,.35);display:none}
.vh-l-kontakt.offen .vh-l-menue{display:block}
.vh-l-kontakt.offen > button::after{display:none}
.vh-l-menue a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;color:#16202B;text-decoration:none;font:600 .9rem Lato,sans-serif}
.vh-l-menue a:hover{background:rgba(201,169,78,.16)}
.vh-l-menue svg{width:18px;height:18px;stroke:var(--navy)}
@media(max-width:1440px){.vh-leiste > a,.vh-leiste > div > button{width:52px;height:52px;font-size:0;gap:0}
  .vh-leiste > a br,.vh-leiste > div > button br{display:none}
  .vh-leiste > a:hover,.vh-leiste > div > button:hover,.vh-leiste > a:focus-visible{width:56px}}
@media(max-width:900px){.vh-leiste{display:none}}
@media print{.vh-leiste{display:none!important}}

/* ---- Suchleiste auf der Objektseite, wie bei Voyage Homes ---- */
.omh-suche{display:grid;grid-template-columns:1.6fr 1.2fr 1fr auto;gap:12px;align-items:end;margin:6px 0 10px;padding:18px 18px 26px;
  background:rgba(255,253,248,.9);border:1px solid var(--line-strong);border-radius:14px;box-shadow:0 18px 40px -30px rgba(7,41,66,.4)}
.os-feld{display:flex;flex-direction:column;gap:6px;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;position:relative}
.os-feld input,.os-feld select{height:48px;border:1px solid var(--line-strong);border-radius:10px;padding:0 12px;font:inherit;font-size:1rem;
  text-transform:none;letter-spacing:0;font-weight:400;color:var(--ink);background:#fff}
.os-feld input:focus,.os-feld select:focus{outline:2px solid var(--gold);outline-offset:1px}
#osHinweis{position:absolute;left:2px;top:100%;margin-top:5px;white-space:nowrap;text-transform:none;letter-spacing:0;font-weight:700;font-size:.74rem;color:var(--gold)}
#osHinweis:empty{display:none}
.os-los{height:48px;padding-inline:26px}
.os-notiz{font-size:.88rem;color:var(--muted);margin:12px 0 18px;padding-left:12px;border-left:3px solid var(--gold)}
#view-objekte .os-chips{display:none}
@media(max-width:980px){.omh-suche{grid-template-columns:1fr 1fr}.os-ort,.os-los{grid-column:1/-1}}
@media(max-width:560px){.omh-suche{grid-template-columns:1fr}}

/* WhatsApp-Logo an jedem WhatsApp-Knopf */
.wa-logo{width:18px;height:18px;flex:none;vertical-align:-4px;margin-right:6px}
.btn .wa-logo,.nb .wa-logo{margin-right:8px}
.vh-leiste > a.vh-l-wa svg.wa-logo{width:24px;height:24px;margin:0;stroke:none}
.vh-leiste > a.vh-l-wa{background:#0F2B1C}
.vh-leiste > a.vh-l-wa:hover{background:#14402A}
/* Grundriss: mit oder ohne Moebel, der goldene Schieber wandert mit */
.gr-wahl{position:absolute;display:grid!important;grid-template-columns:1fr 1fr;padding:3px!important;border-radius:999px;background:rgba(14,27,44,.08)!important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.gr-wahl::before{content:"";position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:999px;background:var(--gold);
  box-shadow:0 2px 8px -2px rgba(0,0,0,.35);transition:transform .35s cubic-bezier(.3,.7,.2,1)}
.gr-wahl button{position:relative;z-index:1;background:none!important;box-shadow:none!important;color:inherit;font-weight:700;transition:color .3s}
.gr-wahl button[aria-pressed="true"]{color:#12100A!important}
.gr-wahl button[aria-pressed="false"]{opacity:.8}
.ohne .gr-wahl::before{transform:translateX(100%)}
@media(prefers-reduced-motion:reduce){.gr-wahl::before{transition:none}}

/* ---- Ein einziger Goldton, genau das Gold aus dem Logo ----
   Flaechen, Linien, Schrift, Knoepfe und Zahlen: #C9A94E. Beim Darueberfahren
   wird der Knopf nur heller, nie ein anderes Gold. */
:root{--gold:#C9A94E;--gold-light:#C9A94E;--gold-ink:#C9A94E}
.eyebrow,.brand-name small,.card .price em,.step .num,.fl .req,.reset,.mzPfeil,.locrow .rad{font-weight:800}
.btn-gold,.btn-navy,.card-cta,.chatwahl button.gold,.satz[aria-pressed="true"],.cornerbadge.online,.badge-new{background:#C9A94E!important;border-color:#C9A94E!important;color:#12100A}
.btn-gold:hover,.btn-navy:hover,.card-cta:hover,.card:hover .card-cta{background:#C9A94E!important;border-color:#C9A94E!important;filter:brightness(1.08)}
.confbar i,.scoremeter i{background:#C9A94E}

/* ---- Papierstruktur im Hintergrund, wie bei Voyage Homes ---- */
:root{--papier:url(/papier.webp?v=0afa5f1d);--papier-dunkel:url(/papier-dunkel.webp?v=e6c93f66)}
body{background-color:#F4EFE5;background-image:linear-gradient(rgba(251,248,241,.30),rgba(251,248,241,.30)),var(--papier);background-size:auto,320px auto}
.alt{background:rgba(232,225,210,.42)}
.panel,.card,.tt,.stepper,.satztafel,.bsummary,.treffertafel{background-color:rgba(255,253,248,.88)}
/* Blau exakt wie im Logo (#072942), ohne Struktur */
header.site,.utilbar,.dark,.kpis,footer.site,.kpi{background-color:#072942;background-image:none}

/* ---- Ueber uns: feiner Goldring um die runden Portraits ---- */
.person .portrait img{border:0;box-shadow:0 0 0 2px #C9A94E,0 0 0 7px rgba(201,169,78,.16),0 10px 30px rgba(3,14,26,.45)}

/* ---- Schwestermarke in der Fusszeile ---- */
.fomh{display:inline-flex;align-items:center;gap:12px;margin-top:14px;padding:8px 16px 8px 8px;border:1px solid rgba(201,169,78,.4);
  border-radius:999px;text-decoration:none;font-size:.82rem;letter-spacing:.04em;color:#F4F1EA}
.fomh img{width:34px;height:34px;border-radius:50%}
.fomh:hover{border-color:#C9A94E;color:#C9A94E}
.schwesterfuss{margin-top:22px;padding-top:18px;border-top:1px solid rgba(244,241,234,.12)}