:root{
  color-scheme:light;
  --navy:#16263A; --navy-deep:#0E1B2C; --navy-soft:#22354D;
  --gold:#C29D57; --gold-light:#C29D57;
  /* Das Marken-Gold ist fuer Flaechen und grosse Zahlen. Kleine Schrift
     braucht einen dunkleren Ton, sonst verschwindet sie auf Creme. */
  --gold-ink:#C29D57;
  --creme:#EDE5D8; --paper:#F2ECE2;
  --ink:#24221E; --muted:#5C564C;
  --line:rgba(22,38,58,.10); --line-strong:rgba(22,38,58,.19);
  --surface:#FBF8F2; --surface-2:#E6DDCD;
  --ok:#2F7D53; --warn:#B7860B; --bad:#A63A2E;
  --shadow:0 1px 1px rgba(14,27,44,.03), 0 8px 24px -16px rgba(14,27,44,.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(194,157,87,.22);transition:box-shadow .25s var(--ease)}
header.site .brand-name{color:#F2ECE2}
header.site .brand-name small{color:var(--gold-light)}
header.site .menu-btn{border-color:rgba(244,241,234,.3);color:#F2ECE2}
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(14,27,44,.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(194,157,87,.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:#FBF8F2;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:#F2ECE2;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(6,12,20,.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(194,157,87,.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(194,157,87,.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(14,27,44,.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(194,157,87,.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(194,157,87,.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(14,27,44,.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(194,157,87,.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(194,157,87,.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(194,157,87,.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(194,157,87,.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:#FBF8F2}
.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:#FBF8F2}
.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:#FBF8F2}
.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(194,157,87,.3);border-radius:var(--r);box-shadow:0 18px 44px -28px rgba(14,27,44,.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(194,157,87,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(194,157,87,.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(194,157,87,.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(194,157,87,.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:#F2ECE2;
  /* 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:#CFC7B9; --ink:#F2ECE2; --line:rgba(244,241,234,.18)}
.dark .lead,.dark p{color:#E3DDD2}
.dark .eyebrow{color:var(--gold-light)}
.dark h2{color:#FBF8F2}
.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:#F2ECE2;font-size:.65rem;
  letter-spacing:.06em;line-height:1.3;background:linear-gradient(transparent,rgba(14,27,44,.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(194,157,87,.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:#FBF8F2}
.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(14,27,44,.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:#F2ECE2}
.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:#F2ECE2}
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:#F2ECE2}
.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(14,27,44,.5)}
.hero-inner{position:relative;z-index:2;padding-block:clamp(64px,10vw,112px);text-align:center}
.hero h1{color:#FBF8F2;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:#F2ECE2;border-block:1px solid rgba(194,157,87,.3)}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(194,157,87,.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:#FBF8F2}
.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:#FBF8F2}
.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:#FBF8F2}
.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(194,157,87,.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(194,157,87,.16)}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 1px var(--gold),0 0 0 4px rgba(194,157,87,.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:#FBF8F2}
.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(194,157,87,.28),rgba(194,157,87,.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(22,38,58,.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(194,157,87,.14)}
.satz[aria-pressed="true"]{background:linear-gradient(180deg,#C29D57,#C29D57);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(194,157,87,.38);box-shadow:0 10px 30px rgba(6,12,20,.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:#F2ECE2;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:#F2ECE2;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(194,157,87,.45),0 10px 26px -12px rgba(194,157,87,.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(194,157,87,.55),0 0 0 0 rgba(194,157,87,0)}
  40%{box-shadow:0 0 0 6px rgba(194,157,87,.28),0 0 28px 2px rgba(194,157,87,.5)}
  100%{box-shadow:0 0 0 12px rgba(194,157,87,0),0 0 0 0 rgba(194,157,87,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(194,157,87,0))}
  35%{transform:scale(.94);filter:drop-shadow(0 0 16px rgba(194,157,87,.85))}
  70%{transform:scale(1.045);filter:drop-shadow(0 0 22px rgba(194,157,87,.55))}
  100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(194,157,87,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(194,157,87,.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(194,157,87,.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(194,157,87,.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(194,157,87,.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(194,157,87,.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(194,157,87,.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(14,27,44,.92) 0%,rgba(14,27,44,.72) 38%,rgba(14,27,44,.30) 75%,rgba(14,27,44,.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:#F2ECE2;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:#F2ECE2}
.bannerinhalt .lead{color:#E3DDD2;max-width:52ch;margin-bottom:26px}
.bannerinhalt .eyebrow{color:var(--gold-light)}
@media(max-width:760px){.herotint{background:linear-gradient(180deg,rgba(14,27,44,.55) 0%,rgba(14,27,44,.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:#F2ECE2}
.nlband .nltext p{color:#CFC7B9;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:#E3DDD2;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:#F2ECE2}
.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:#CFC7B9;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}

/* ---- 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(194,157,87,.11);border:1px solid rgba(194,157,87,.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:#F2ECE2;background:rgba(194,157,87,.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,#C29D57 0%,#C29D57 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,#C29D57 0%,#C29D57 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}}

/* =================== Voyage Homes =================== */
:root{--gold-tex:url(/gold.jpg?v=9fb16dff);--papier:url(/papier.webp?v=0afa5f1d);--papier-dunkel:url(/papier-dunkel.webp?v=b7ae0434);--navy-ink:#0B1624}
body{background-color:#EBE3D6;background-image:linear-gradient(rgba(226,215,196,.36),rgba(226,215,196,.36)),var(--papier);background-size:auto,320px auto}
/* Kompaktere Abstaende zwischen den Abschnitten */
section{padding-block:clamp(40px,5vw,72px)}
.sec-head{margin-bottom:28px}
.sec-head .lead{margin-top:10px}
.moreline{margin-top:22px}

h1,h2,h3,h4,.bannertitel,.nlband h4,.card-body h3,.card .price b,.kpi b{font-family:"Cormorant Garamond","EB Garamond",Georgia,serif}
h1,h2,h3,h4{font-weight:500}
h1{font-size:clamp(2.5rem,6vw,4.1rem);letter-spacing:-.01em;line-height:1.08}
h2,h1.wie-h2{font-size:clamp(1.9rem,3.6vw,2.7rem);letter-spacing:-.005em}
h3{font-size:1.42rem}
.eyebrow{letter-spacing:.28em;font-size:.64rem}
.sec-head .eyebrow{display:flex;align-items:center;justify-content:center;gap:14px}
.sec-head[style*="left"] .eyebrow,.sec-head.links .eyebrow{justify-content:flex-start}
.sec-head .eyebrow::before,.sec-head .eyebrow::after{content:"";width:34px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.sec-head .eyebrow::after{background:linear-gradient(90deg,var(--gold),transparent)}
.sec-head[style*="left"] .eyebrow::before{display:none}
/* Papier bleibt sichtbar, auch auf den abgesetzten Flaechen */
.alt{background:transparent}
.panel,.card,.tt,.stepper,.satztafel,.bsummary,.treffertafel{background-color:rgba(251,248,242,.86)}
.panel{border-color:rgba(58,55,50,.12)}
/* Dunkle Flaechen: tiefes Blau mit leiser Papierstruktur */
header.site,.utilbar,.dark,.kpis,.kpi,footer.site,.hero,.bannervideo{
  background-color:var(--navy-deep);background-image:var(--papier-dunkel);background-size:512px auto;background-blend-mode:normal}
.kpi{background-color:var(--navy-deep)}
header.site{border-bottom:1px solid rgba(194,157,87,.28)}
.utilbar{border-bottom:1px solid rgba(194,157,87,.12)}
.brand img{width:121px;height:96px}
@media(max-width:560px){.brand img{width:86px;height:68px}}
.footlogo{width:150px;height:119px}
@media(max-width:760px){.footlogo{width:120px;height:95px}}
/* Gold: glatt, ohne Struktur, ueberall derselbe Ton */
:root{--gold:#C29D57;--gold-light:#C29D57;--gold-ink:#C29D57;--gold-flach:linear-gradient(180deg,#C29D57 0%,#C29D57 100%)}
.btn-gold,.btn-navy,.card-cta{background:var(--gold-flach);border-color:#C29D57;color:#1E170A;text-shadow:none;font-weight:700}
.btn-gold:hover,.btn-navy:hover{background:linear-gradient(180deg,#E6CE9B 0%,#C29D57 100%);border-color:#C29D57}
.btn-gold::before{display:none}
.btn-gold:hover{box-shadow:0 8px 22px -12px rgba(194,157,87,.7)}
.kpi b,.gold-text{background:linear-gradient(180deg,#F1DDA8,#C29D57);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.kpi b{font-size:2.6rem;font-weight:600}
.card-cta{animation:none}
.card-cta:hover,.card:hover .card-cta{background:linear-gradient(180deg,#E6CE9B 0%,#C29D57 100%);color:#1E170A}
input[type=range]{accent-color:#C29D57}
.sec-head h2::after{height:2px;width:56px;background:linear-gradient(90deg,#C29D57,#C29D57)}
/* Rahmenknoepfe */
.btn-ghost{background:transparent;border:1px solid rgba(36,34,30,.34);color:var(--ink)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-ink);background:rgba(194,157,87,.08)}
.hero .btn-ghost,.dark .btn-ghost,.btn-ghost-hell{background:transparent;border:1px solid rgba(242,236,226,.42);color:#F2ECE2}
.hero .btn-ghost:hover,.dark .btn-ghost:hover,.btn-ghost-hell:hover{border-color:var(--gold-light);color:var(--gold-light);background:rgba(194,157,87,.08)}
/* Held */
.hero h1{font-weight:500;text-shadow:0 2px 30px rgba(8,17,29,.45)}
.hero .eyebrow{color:var(--gold-light)}
.herotint{background:linear-gradient(180deg,rgba(14,27,44,.55) 0%,rgba(14,27,44,.72) 55%,rgba(14,27,44,.9) 100%)!important}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}
/* Schwestermarke Off Market Homes */
.schwester{display:flex;align-items:center;gap:20px;margin:44px auto 0;max-width:900px;padding:20px 24px;
  border:1px solid rgba(194,157,87,.35);border-radius:10px;background:rgba(251,248,242,.7)}
.schwester img{width:56px;height:56px;border-radius:50%;flex:0 0 auto}
.schwester b{display:block;font-family:"Cormorant Garamond",serif;font-size:1.3rem;font-weight:600}
.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}}
.fomh{display:inline-flex;align-items:center;gap:12px;margin-top:14px;padding:8px 16px 8px 8px;border:1px solid rgba(194,157,87,.35);
  border-radius:999px;text-decoration:none;font-size:.82rem;letter-spacing:.04em}
.fomh img{width:34px;height:34px;border-radius:50%}
.fomh:hover{border-color:var(--gold-light)}
/* Leistungspakete */
.pakete{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
@media(max-width:980px){.pakete{grid-template-columns:1fr;max-width:560px;margin-inline:auto}}
.paket{position:relative;display:flex;flex-direction:column;gap:12px;padding:34px 28px 28px;border-radius:12px;
  background:rgba(251,248,242,.9);border:1px solid rgba(58,55,50,.12);box-shadow:var(--shadow)}
.paket h3{font-size:1.5rem;line-height:1.2}
.paket .btn{margin-top:auto}
.paket .eyebrow{font-size:.78rem;letter-spacing:.34em}
.paket-hervor{background-color:var(--navy-deep);background-image:var(--papier-dunkel);background-size:512px auto;background-blend-mode:normal;
  color:#F2ECE2;border:1px solid transparent;
  box-shadow:0 0 0 1px rgba(194,157,87,.55),0 30px 60px -30px rgba(8,17,29,.6);transform:translateY(-10px)}
@media(max-width:980px){.paket-hervor{transform:none}}
.paket-hervor h3{color:#FBF8F2}
.paket-hervor .eyebrow{color:var(--gold-light)}
.paket-hervor .haken-liste li{color:rgba(242,236,226,.86);border-color:rgba(242,236,226,.12)}
.paket-band{position:absolute;top:-13px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:6px 16px;border-radius:999px;
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:#16110A;
  background:linear-gradient(180deg,#F3E2B4,#C29D57);box-shadow:0 6px 16px -8px rgba(0,0,0,.4)}
.haken-liste{list-style:none;margin:6px 0 18px;padding:0}
.haken-liste li{position:relative;padding:9px 0 9px 28px;font-size:.92rem;border-bottom:1px solid rgba(58,55,50,.09);line-height:1.45}
.haken-liste li::before{content:"";position:absolute;left:2px;top:14px;width:12px;height:7px;border-left:1.6px solid var(--gold);
  border-bottom:1.6px solid var(--gold);transform:rotate(-45deg)}
/* Noch keine Angebote: keine leeren Kacheln, sondern ein klarer Hinweis */
html.ohne-angebote #typeTiles,html.ohne-angebote #typeTiles2,html.ohne-angebote .result-line,
html.ohne-angebote .filters,html.ohne-angebote #moreBtn{display:none!important}
.empty{max-width:760px;margin:10px auto 0;padding:34px 30px;text-align:center;border:1px dashed rgba(194,157,87,.5);
  border-radius:12px;background:rgba(251,248,242,.7);font-family:"Cormorant Garamond",serif;font-size:1.35rem;line-height:1.45;color:var(--ink)}
.empty .btn{margin-top:18px;font-family:Lato,sans-serif}
/* Karten ohne Schloss: oeffentliche Angebote */
.card .thumb .img{filter:none}
.recht{max-width:760px}
.recht h3{margin:30px 0 8px;font-size:1.35rem}
.recht p{margin:0 0 10px;line-height:1.7}
.recht a{color:var(--gold-ink);cursor:pointer}
.recht .entwurf{padding:12px 16px;border-left:3px solid var(--gold);background:rgba(194,157,87,.12);margin:18px 0}
/* Kleinigkeiten */
.marquee{background:rgba(205,188,160,.28);border-color:rgba(194,157,87,.25)}
.marquee span{font-family:"Cormorant Garamond",serif;font-size:1.15rem;letter-spacing:.14em;text-transform:uppercase}
nav.main a{letter-spacing:.06em}
@media(max-width:1080px){header.site nav.main{background:var(--paper) var(--papier);background-size:320px auto}}

/* ---- Logo-Intro Voyage (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-color:#0E1B2C;
  background-image:radial-gradient(70% 70% at 50% 46%,rgba(34,53,77,.55) 0%,rgba(14,27,44,0) 60%),var(--papier);
  background-size:auto,320px auto;background-blend-mode:normal,multiply;transition:opacity .9s var(--ease)}
#curtain.intro .iraster{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(40% 32% at 50% 46%,rgba(194,157,87,.16),transparent 70%);animation:iraster 2.8s var(--ease) forwards}
@keyframes iraster{0%{opacity:0}35%{opacity:1}100%{opacity:.55}}
#curtain.intro .ilogo{position:absolute;left:50%;top:50%;width:min(78vw,480px);aspect-ratio:684/543;height:auto;
  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 img{width:100%;height:100%;opacity:1;animation:none}
#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(194,157,87,.35);
  color:rgba(242,236,226,.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)}
/* 1. Monogramm steigt von unten auf, eine Goldlinie fuehrt */
#curtain.intro .ilogo > .i-mono{clip-path:inset(66.7% 0 33.3% 0);animation:imono 1.5s cubic-bezier(.65,0,.25,1) .35s forwards}
@keyframes imono{to{clip-path:inset(0 0 33.3% 0)}}
#curtain.intro .ilogo > .i-scan{inset:auto;top:66.7%;left:18%;right:18%;width:auto;height:2px;
  background:linear-gradient(90deg,transparent,#F6E3B0 30%,#FFF6DA 50%,#F6E3B0 70%,transparent);
  box-shadow:0 0 18px 4px rgba(246,227,176,.55);opacity:0;animation:iscan 1.5s cubic-bezier(.65,0,.25,1) .35s forwards}
@keyframes iscan{0%{opacity:0;top:66.7%}10%{opacity:1}88%{opacity:1}100%{opacity:0;top:0}}
/* 2. Glanz zieht dem Schwung entlang ueber das Monogramm */
#curtain.intro .i-glanz{clip-path:inset(0 0 33.3% 0);
  -webkit-mask:url(/voyage-logo-hell.png) 0 0/100% 100% no-repeat;mask:url(/voyage-logo-hell.png) 0 0/100% 100% no-repeat;
  background:linear-gradient(118deg,transparent 38%,rgba(255,246,220,.0) 42%,rgba(255,246,220,.95) 50%,rgba(255,246,220,0) 58%,transparent 62%) no-repeat;
  background-size:260% 100%;background-position:120% 0;opacity:0;mix-blend-mode:screen;
  animation:iglanz 1.25s cubic-bezier(.45,0,.2,1) 1.85s forwards}
@keyframes iglanz{0%{opacity:1;background-position:120% 0}100%{opacity:1;background-position:-20% 0}}
/* 3. VOYAGE oeffnet sich aus der Mitte */
#curtain.intro .i-voyage{opacity:0;transform:scaleX(1.12);filter:blur(6px);
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 0) center/0% 100% no-repeat;
  animation:ivoyage 1s cubic-bezier(.2,.7,.2,1) 2.35s forwards}
@keyframes ivoyage{0%{opacity:0;transform:scaleX(1.12);filter:blur(6px);-webkit-mask-size:0% 100%}
  40%{opacity:1}100%{opacity:1;transform:none;filter:blur(0);-webkit-mask-size:100% 100%}}
/* 4. Homes: die Linien laufen nach aussen */
#curtain.intro .i-homes{opacity:0;transform:scaleX(.25);animation:ihomes 1s cubic-bezier(.2,.7,.2,1) 3.05s forwards}
@keyframes ihomes{to{opacity:1;transform:none}}
/* Zum Schluss das vollstaendige Original obenauf */
#curtain.intro .i-voll{opacity:0;animation:iein .45s ease 3.95s forwards}
@keyframes iein{to{opacity:1}}
#curtain.intro.fertig *{animation-delay:0s!important;animation-duration:.01s!important}
#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}}
/* ======================= Angebote wie auf den Portalen ======================= */
.vh-suche-sec{padding-bottom:0}
.vh-suche{display:grid;grid-template-columns:auto 1.6fr 1fr .8fr 1fr auto;gap:12px;align-items:end;
  background:#FBF8F2;border:1px solid rgba(58,55,50,.12);border-radius:14px;padding:16px;box-shadow:var(--shadow)}
.vh-art{display:flex;background:#EFE8DB;border-radius:10px;padding:4px;height:48px}
.vh-art button{border:0;background:none;padding:0 16px;border-radius:8px;font:inherit;font-size:.86rem;cursor:pointer;color:var(--ink)}
.vh-art button[aria-pressed="true"]{background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.12);font-weight:700}
.vh-feld{display:flex;flex-direction:column;gap:5px;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.vh-feld input,.vh-feld select,.vh-sort select{height:48px;border:1px solid rgba(58,55,50,.18);border-radius:10px;padding:0 12px;
  font:inherit;font-size:.92rem;text-transform:none;letter-spacing:0;color:var(--ink);background:#fff;font-weight:400}
.vh-los{height:48px;padding-inline:28px}
@media(max-width:1060px){.vh-suche{grid-template-columns:1fr 1fr}.vh-art,.vh-ort{grid-column:1/-1}.vh-los{grid-column:1/-1}}
.vh-liste-sec{padding-top:26px}
.vh-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
@media(max-width:1060px){.vh-layout{grid-template-columns:1fr}.vh-seite{order:2}}
.vh-kopf{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:12px;flex-wrap:wrap}
.vh-kopf p{font-size:1rem}.vh-kopf b{font-size:1.3rem;font-family:"Cormorant Garamond",serif}
.vh-sort{display:flex;align-items:center;gap:10px;font-size:.82rem;color:var(--muted)}
.vh-sort select{height:40px}
.vh-liste{display:flex;flex-direction:column;gap:16px}
.vh-objekt{display:grid;grid-template-columns:minmax(260px,40%) 1fr;background:#fff;border:1px solid rgba(58,55,50,.12);border-radius:12px;
  overflow:hidden;cursor:pointer;transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
.vh-objekt:hover{box-shadow:0 18px 40px -24px rgba(14,27,44,.45);transform:translateY(-2px)}
@media(max-width:720px){.vh-objekt{grid-template-columns:1fr}}
.vh-bild{position:relative;aspect-ratio:4/3;background:#E6DDCD;overflow:hidden}
.vh-bild img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.vh-objekt:hover .vh-bild img,.vh-karte:hover .vh-bild img{transform:scale(1.04)}
.vh-ohnebild{position:absolute;inset:0;background:linear-gradient(135deg,#E9E0D0,#D8CBB3)}
.vh-neu,.vh-bsp,.vh-artlabel{position:absolute;top:12px;left:12px;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 9px;border-radius:6px;background:#0E1B2C;color:#F2ECE2}
.vh-neu{background:linear-gradient(180deg,#F1DDA8,#C29D57);color:#1E170A}
.vh-artlabel+.vh-neu{left:auto;right:12px}
.vh-bsp{top:auto;bottom:12px;background:rgba(14,27,44,.72)}
.vh-pfeil{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.88);
  font-size:1.5rem;line-height:1;cursor:pointer;opacity:0;transition:opacity .2s;color:#0E1B2C}
.vh-pfeil.l{left:10px}.vh-pfeil.r{right:10px}
.vh-bild:hover .vh-pfeil,.vh-galerie .vh-pfeil{opacity:1}
@media(hover:none){.vh-pfeil{opacity:1}}
.vh-zaehler{position:absolute;right:12px;bottom:12px;font-size:.74rem;background:rgba(14,27,44,.72);color:#fff;padding:4px 8px;border-radius:6px}
.vh-herz{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.9);
  color:#B7AE9F;font-size:1.05rem;cursor:pointer}
.vh-herz[aria-pressed="true"]{color:#C2413A}
.vh-info{padding:20px 22px;display:flex;flex-direction:column;gap:5px;min-width:0}
.vh-preis{font-family:"Cormorant Garamond",serif;font-size:1.65rem;font-weight:600;line-height:1.1;color:var(--ink)}
.vh-preis.gross{font-size:2.1rem}
.vh-eck{font-weight:700;font-size:.95rem;color:var(--ink)}
.vh-adr{font-size:.86rem;color:var(--muted)}
.vh-titel{font-family:Lato,sans-serif;font-size:1rem;font-weight:400;margin-top:6px;line-height:1.45}
.vh-chips{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.vh-chips li{font-size:.74rem;background:#F3EDE2;border-radius:999px;padding:4px 10px;color:#4E483F}
.vh-fuss{margin-top:auto;padding-top:14px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.vh-anb{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--muted)}
.vh-anb img{width:26px;height:26px;border-radius:50%}
.vh-seite{display:flex;flex-direction:column;gap:16px;position:sticky;top:150px}
.vh-kasten{background:#FBF8F2;border:1px solid rgba(58,55,50,.12);border-radius:12px;padding:20px}
.vh-kasten h3{font-size:1.4rem;margin:6px 0}
.vh-kasten p{font-size:.88rem;color:var(--muted);margin-bottom:12px}
.vh-kasten .btn{width:100%}
.vh-berater{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center}
.vh-berater img{width:56px;height:56px;border-radius:50%;object-fit:cover}
.vh-berater b{display:block}.vh-berater span{font-size:.8rem;color:var(--muted)}
.vh-kasten.vh-berater p{grid-column:1/-1;margin:4px 0 0}
.vh-kontakt{display:flex;gap:8px;grid-column:1/-1;margin-top:10px}
.vh-kontakt .btn{flex:1}
.vh-seite .schwester{margin:0;flex-direction:column;text-align:center;gap:10px}
/* Karten hoch (Startseite, Kaufen) */
.vh-karten{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:980px){.vh-karten{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.vh-karten{grid-template-columns:1fr}}
.vh-karte{background:#fff;border:1px solid rgba(58,55,50,.12);border-radius:12px;overflow:hidden;cursor:pointer;
  transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
.vh-karte:hover{box-shadow:0 18px 40px -24px rgba(14,27,44,.45);transform:translateY(-3px)}
.vh-karte .vh-info{padding:16px 18px 18px}
.vh-karte .vh-preis{font-size:1.45rem}
/* Detailansicht */
.vh-detail{position:fixed;inset:0;z-index:1000;background:rgba(8,17,29,.72);backdrop-filter:blur(4px);overflow-y:auto;padding:30px 16px}
.vh-detail[hidden]{display:none}
html.vh-offen{overflow:hidden}
.vh-dkarte{position:relative;max-width:1180px;margin:0 auto;background:#FBF8F2;border-radius:16px;overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.6);animation:vhAuf .35s var(--ease)}
@keyframes vhAuf{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.vh-zu{position:absolute;top:14px;right:14px;z-index:3;width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.92);
  font-size:1.6rem;line-height:1;cursor:pointer}
.vh-galerie{position:relative;aspect-ratio:16/8;background:#0E1B2C}
.vh-galerie img{width:100%;height:100%;object-fit:cover;display:block}
.vh-galerie .vh-bsp{left:16px;bottom:16px;top:auto}
.vh-thumbs{display:flex;gap:8px;padding:10px 16px;background:#0E1B2C;overflow-x:auto}
.vh-thumbs button{flex:0 0 110px;height:74px;border:2px solid transparent;border-radius:8px;overflow:hidden;padding:0;cursor:pointer;background:none;opacity:.65}
.vh-thumbs button[aria-current]{border-color:#C29D57;opacity:1}
.vh-thumbs img{width:100%;height:100%;object-fit:cover}
.vh-dinhalt{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:32px;padding:30px}
@media(max-width:900px){.vh-dinhalt{grid-template-columns:1fr;padding:22px}}
.vh-dtext h2{font-size:clamp(1.7rem,3vw,2.3rem);margin:6px 0 10px}
.vh-dtext h3{font-size:1.35rem;margin:26px 0 8px}
.vh-dtext p{line-height:1.7}
.haken-liste.zwei{columns:2;column-gap:28px}
@media(max-width:600px){.haken-liste.zwei{columns:1}}
.vh-fakten{display:grid;grid-template-columns:auto 1fr;gap:0;border-top:1px solid rgba(58,55,50,.12)}
.vh-fakten dt,.vh-fakten dd{padding:10px 0;border-bottom:1px solid rgba(58,55,50,.12);margin:0}
.vh-fakten dt{color:var(--muted);padding-right:30px}
.vh-fakten dd{font-weight:700}
.vh-hinweis{margin-top:20px;font-size:.84rem;color:var(--muted);padding:12px 14px;border-left:3px solid #C29D57;background:rgba(194,157,87,.12)}
.vh-dseite .vh-kasten{position:sticky;top:20px;display:flex;flex-direction:column;gap:10px;background:#fff}
.vh-dseite .vh-berater{margin-top:8px;padding-top:14px;border-top:1px solid rgba(58,55,50,.1)}
.vh-kasten .vh-preis{font-size:1.7rem;color:var(--ink);margin:0 0 4px}

.vh-ort small{font-size:.74rem;color:var(--gold-ink);text-transform:none;letter-spacing:0;font-weight:700;min-height:1em}
#view-einliefern .grid > .panel > .drivers{align-self:start}
.person .portrait img{border-radius:50%;box-shadow:0 0 0 2px #C29D57,0 0 0 6px rgba(194,157,87,.14)}
.vh-berater img{box-shadow:0 0 0 2px #C29D57}

/* Suchleiste: alle Felder auf einer Linie. Der Hinweis zu Ort und Kanton steht
   unter dem Feld, ohne die Beschriftung nach oben zu schieben. */
.vh-suche{padding-bottom:22px}
.vh-ort{position:relative}
#vhOrtHinweis{position:absolute;left:2px;top:100%;margin-top:5px;white-space:nowrap;text-transform:none;letter-spacing:0;font-weight:600}
#vhOrtHinweis:empty{display:none}
/* Seitenspalte beginnt auf der Hoehe des ersten Objekts, nicht der Sortierzeile */
@media(min-width:1061px){.vh-seite{margin-top:62px}}
/* ======================= Held: der erste Eindruck (hell) =======================
   Das Video beginnt als Bleistiftskizze auf weissem Papier und wird zur hellen,
   echten Wohnung; die Kamera geht zur Haustuer, die Tuer geht auf. Dahinter liegt
   als Standbild genau das erste Bild des Videos: Beim Wiederholen blendet das
   Video auf die Skizze, von der es wieder startet. Kein fremdes Bild dazwischen. */
.hero{min-height:min(100svh,980px);display:flex;align-items:center;background-color:#F6F1E8!important;background-image:none!important;color:#0E1B2C}
.hero::after{display:none!important}
.hero:hover .heroimg{filter:none!important}
.hero .spot{background:radial-gradient(420px circle at var(--mx,60%) var(--my,40%),rgba(194,157,87,.14),transparent 66%)!important}
.hero h1{text-shadow:none!important}
.hero .trustrow i{background:#C29D57!important}
.hero .heroimg{background:#F6F1E8 url(/medien/held-start.webp?v=260926b) center/cover no-repeat!important;animation:none!important;transform:none!important}
.hero .herotint{background:radial-gradient(ellipse 62% 58% at 50% 50%,rgba(251,248,242,.86) 0%,rgba(251,248,242,.62) 55%,rgba(251,248,242,.22) 100%),
  linear-gradient(180deg,rgba(251,248,242,0) 70%,rgba(246,241,232,.9) 100%)!important}
.vh-staub{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:.55}
.hero .hero-inner{padding-block:120px 110px}
.hero h1{font-size:clamp(2.8rem,7vw,5.4rem);letter-spacing:-.012em;line-height:1.12;max-width:16ch}
.hero h1 .w{padding-bottom:.16em;margin-bottom:-.16em}
.hero h1,.hero h1 .w{color:#0E1B2C}
.hero h1 .w{background:linear-gradient(100deg,#0E1B2C 0%,#0E1B2C 38%,#C29D57 50%,#0E1B2C 62%,#0E1B2C 100%);background-size:260% 100%;
  background-position:120% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:vhGlanz 2.6s ease 1.6s both}
@keyframes vhGlanz{from{background-position:120% 0}to{background-position:-30% 0}}
.hero .eyebrow{letter-spacing:.42em;font-size:.72rem;color:#C29D57!important}
.hero .eyebrow::after{content:"";display:block;width:0;height:1px;margin:14px auto 0;background:linear-gradient(90deg,transparent,#C29D57,transparent);
  animation:vhLinie 1.6s ease .6s forwards}
@keyframes vhLinie{to{width:180px}}
.hero .lead,.hero p:not(.eyebrow){color:#2B2A27!important}
.hero .trustrow,.hero .trustrow span,.hero .trustrow li{color:#3A3833!important}
.hero .btn-ghost,.hero .btn-dark,.hero .btn-outline{color:#0E1B2C!important;border-color:rgba(14,27,44,.45)!important;background:rgba(251,248,242,.55)!important}
.hero .btn-ghost:hover,.hero .btn-dark:hover,.hero .btn-outline:hover{border-color:#0E1B2C!important;background:rgba(251,248,242,.9)!important}
.vh-scroll{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:10px;
  color:rgba(14,27,44,.7);font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;text-decoration:none}
.vh-scroll i{display:block;width:1px;height:46px;background:linear-gradient(#C29D57,transparent);animation:vhFall 2.2s ease-in-out infinite;transform-origin:top}
@keyframes vhFall{0%{transform:scaleY(0);opacity:1}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
.herovideo.blende{opacity:0!important;transition:opacity 1.4s ease!important}
@media(prefers-reduced-motion:reduce){.hero h1,.vh-scroll i{animation:none}.vh-staub{display:none}}

/* ======================= Schnellleiste rechts =======================
   Fuenf Kacheln, immer erreichbar: Kontakt, Gratis-Bewertung, Tipp geben,
   Finanzierung, Suchabo. Beim Darueberfahren klappt ein kurzer Satz auf. */
.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:#0E1B2C;color:#F2ECE2;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(194,157,87,.38);transition:width .25s,background .25s}
.vh-leiste svg{width:21px;height:21px;fill:none;stroke:#C29D57;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.vh-leiste .vh-l-kontakt > button{background:var(--gold-flach,#C29D57);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:#16263A}
.vh-leiste .vh-l-kontakt > button:hover{background:var(--gold-flach,#C29D57);filter:brightness(1.06)}
.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:#FBF8F2;color:#1d1b17;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(194,157,87,.3);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:230px;background:#FBF8F2;border-radius:12px;padding:8px;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.45),0 0 0 1px rgba(194,157,87,.3);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:#1d1b17;text-decoration:none;font:600 .9rem Lato,sans-serif}
.vh-l-menue a:hover{background:rgba(194,157,87,.14)}
.vh-l-menue svg{width:18px;height:18px;stroke:#C29D57}
@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,.tg-pop{display:none!important}}

/* ======================= Praesentation (Giraffe360, Drohne) ======================= */
.vh-praes .lead{max-width:78ch}
.praes-buehne{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;margin-top:8px}
@media(max-width:900px){.praes-buehne{grid-template-columns:1fr}}
.praes-tour{position:relative;border-radius:14px;overflow:hidden;min-height:420px;background:#08111D;box-shadow:0 30px 70px -30px rgba(0,0,0,.7);
  border:1px solid rgba(194,157,87,.35)}
.tour-szene{position:absolute;inset:-4%;background-size:cover;background-position:30% 50%;opacity:0;transform:scale(1.06);
  transition:opacity 1.1s ease,transform 1.6s cubic-bezier(.5,0,.2,1)}
.tour-szene.ist{opacity:1;animation:vhSchwenk 7s ease-in-out infinite alternate}
.tour-szene.geht{opacity:0;transform:scale(1.32)}
@keyframes vhSchwenk{from{background-position:22% 50%}to{background-position:78% 50%}}
.tour-punkte{position:absolute;inset:0;z-index:2;pointer-events:none}
.praes-hot{position:absolute;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:rgba(255,255,255,.92);
  border:2px solid rgba(255,255,255,.4);box-shadow:0 0 0 0 rgba(255,255,255,.6);animation:vhPuls 2.4s ease-out infinite;transition:transform .6s ease}
.praes-hot::after{content:"";position:absolute;inset:5px;border-radius:50%;background:#C29D57}
.praes-hot.ziel{transform:scale(1.6)}
.praes-hot:nth-child(2){animation-delay:.8s}.praes-hot:nth-child(3){animation-delay:1.6s}
@keyframes vhPuls{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}100%{box-shadow:0 0 0 22px rgba(255,255,255,0)}}
.tour-mass{position:absolute;left:24%;right:38%;top:66%;z-index:2;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .6s}
.tour-mass.an{opacity:1}
.tour-mass i{position:absolute;left:0;right:0;top:50%;border-top:2px dashed #F6E3B0}
.tour-mass i::before,.tour-mass i::after{content:"";position:absolute;top:-7px;width:2px;height:12px;background:#F6E3B0}
.tour-mass i::before{left:0}.tour-mass i::after{right:0}
.tour-mass b{position:relative;background:#0E1B2C;color:#F6E3B0;font:700 .74rem Lato,sans-serif;padding:3px 8px;border-radius:5px}
.tour-kopf{position:absolute;left:14px;top:14px;right:14px;display:flex;gap:8px;z-index:3}
.tour-raum{background:rgba(255,255,255,.92);color:#0E1B2C;font-size:.74rem;font-weight:700;padding:7px 12px;border-radius:999px}
.tour-karte{position:absolute;left:14px;bottom:14px;z-index:3;width:min(34%,190px);background:rgba(8,17,29,.72);border-radius:10px;padding:8px 8px 5px;
  border:1px solid rgba(194,157,87,.4)}
.tour-karte svg{display:block;width:100%;height:auto}
.tour-karte span{display:block;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(242,236,226,.75);margin-top:3px}
#tourKegel{transition:transform 1.4s cubic-bezier(.5,0,.2,1)}
.tour-leiste{position:absolute;right:14px;bottom:14px;z-index:3;display:flex;gap:6px}
.tour-leiste i{font-style:normal;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.9);color:#0E1B2C;font-size:.9rem}
.praes-plan{background:#FBF8F2;min-height:0}
.praes-plan .gr-plan{display:block;width:100%;height:auto;padding:30px 12px 34px}
.gr-plan .gr-moebel{transition:opacity .5s}
.praes-plan.ohne .gr-moebel{opacity:0}
.gr-wahl{position:absolute;top:10px;right:10px;z-index:2;display:flex;background:#EFE8DB;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:#4E483F}
.gr-wahl button[aria-pressed="true"]{background:#fff;color:#0E1B2C;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.praes-zwei{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.praes-zwei .praes-bild{min-height:150px}
.praes-rechts{display:grid;grid-template-rows:auto 1fr;gap:16px}
.praes-bild{position:relative;margin:0;border-radius:14px;overflow:hidden;border:1px solid rgba(194,157,87,.3);min-height:172px;background:#08111D}
.praes-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.praes-bild:hover img{transform:scale(1.05)}
.praes-bild figcaption{position:absolute;left:12px;bottom:12px;background:rgba(8,17,29,.75);color:#F2ECE2;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;padding:6px 11px;border-radius:999px}
.praes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:26px;background:rgba(194,157,87,.22);border:1px solid rgba(194,157,87,.22);border-radius:14px;overflow:hidden}
@media(max-width:900px){.praes-grid{grid-template-columns:1fr}}
.praes-punkt{background:#0E1B2C;padding:22px 22px 24px}
.praes-punkt b{display:block;font-family:"Cormorant Garamond",serif;font-size:1.35rem;font-weight:600;color:#FBF8F2;margin-bottom:6px}
.praes-punkt span{font-size:.9rem;line-height:1.6;color:rgba(242,236,226,.78)}
.praes-klein{text-align:center;margin-top:14px;font-size:.84rem;color:rgba(242,236,226,.6)!important}
.praes-live{background:rgba(8,17,29,.75);color:#F2ECE2;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;padding:7px 12px;border-radius:999px;
  border:1px solid rgba(194,157,87,.5)}
.vh-leiste > a[aria-current="page"]{background:#22354D}
.marquee .mtrack{animation-duration:75s}

/* ======================= Fusszeile: ruhig und buendig =======================
   Logo oben, Text darunter, Schwestermarke als eigene Zeile, alles an
   derselben linken Kante. */
footer.site .fbrand{display:block}
footer.site .footlogo{display:block;width:118px!important;height:auto!important;margin:0 0 18px}
footer.site .fbrand p{margin:0;max-width:36ch;line-height:1.65}
footer.site .fschwester{margin-top:22px;padding-top:20px;border-top:1px solid rgba(194,157,87,.25);max-width:36ch}
footer.site .fschwester .eyebrow{color:var(--gold);margin:0 0 8px}
footer.site .fschwester p{margin:0 0 12px;line-height:1.65}
footer.site .fschwester-link{display:inline-flex;align-items:center;gap:12px;margin-top:4px;padding:7px 18px 7px 7px;border:1px solid rgba(194,157,87,.45);
  border-radius:999px;color:#F2ECE2;font-weight:400;font-size:.82rem;letter-spacing:.04em;text-decoration:none;transition:border-color .2s,color .2s}
footer.site .fschwester-link img{width:34px;height:34px;border-radius:50%;flex:none}
footer.site .fschwester-link:hover{border-color:var(--gold);color:var(--gold)}
footer.site .fgrid h5{color:var(--gold)}

.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 #C29D57}

/* 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}}

/* =================== 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(194,157,87,.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(194,157,87,.12);border:1px solid rgba(194,157,87,.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(194,157,87,.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(194,157,87,.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(194,157,87,.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}

/* 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}}

:root{--gold:#C29D57;--gold-light:#C29D57;--gold-ink:#C29D57;--gold-flach:#C29D57}
.eyebrow,.vh-ort small,.tg-betrag small,.tg-band small{font-weight:800}