/* ============ Tokens ============ */
:root{
  --org:#f26b21; --org-d:#d9550f; --org-l:#ff8a45;
  --brown:#3a332c; --deep:#241f19; --deep2:#16120e;
  --gold:#b99a68; --gold-l:#d8bd93; --cream:#f7f1e8; --cream2:#fdfaf5;
  --muted:#8a7f6f; --line:#e7dece; --white:#fff;
  --sh1:0 2px 10px rgba(58,51,44,.06);
  --sh2:0 10px 34px rgba(58,51,44,.11);
  --sh3:0 26px 70px rgba(36,31,25,.20);
  --serif:'Didot','Bodoni 72','Playfair Display','Hoefler Text',Garamond,'Times New Roman',serif;
  --sans:'Poppins','Segoe UI','Helvetica Neue',Helvetica,Arial,'DejaVu Sans',sans-serif;
  --pad:clamp(18px,6vw,96px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease2:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{font-family:var(--sans);color:var(--brown);background:var(--cream);overflow-x:hidden;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%}
::selection{background:var(--org);color:#fff}

/* ============ Animated background ============ */
#aurora{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;background:var(--cream)}
#aurora i{position:absolute;display:block;border-radius:50%;filter:blur(70px);opacity:.5;will-change:transform}
#aurora i:nth-child(1){width:52vw;height:52vw;left:-14vw;top:-10vw;background:radial-gradient(circle,rgba(242,107,33,.30),transparent 68%);animation:drift1 34s var(--ease) infinite alternate}
#aurora i:nth-child(2){width:44vw;height:44vw;right:-12vw;top:26vh;background:radial-gradient(circle,rgba(185,154,104,.32),transparent 68%);animation:drift2 42s var(--ease) infinite alternate}
#aurora i:nth-child(3){width:60vw;height:60vw;left:18vw;bottom:-24vw;background:radial-gradient(circle,rgba(255,178,110,.26),transparent 70%);animation:drift3 50s var(--ease) infinite alternate}
@keyframes drift1{to{transform:translate3d(14vw,10vh,0) scale(1.18)}}
@keyframes drift2{to{transform:translate3d(-12vw,-8vh,0) scale(1.22)}}
@keyframes drift3{to{transform:translate3d(8vw,-12vh,0) scale(.86)}}
#grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.30;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.42'/></svg>")}

/* ============ Progress + nav ============ */
#prog{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--org),var(--gold));z-index:120;will-change:transform}
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;gap:18px;
  padding:14px var(--pad);transition:background .45s var(--ease),box-shadow .45s var(--ease),padding .45s var(--ease)}
nav::before{content:"";position:absolute;inset:0;background:rgba(250,247,240,.82);backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);border-bottom:1px solid rgba(185,154,104,.28);
  opacity:0;transition:opacity .45s var(--ease);pointer-events:none}
nav.solid::before{opacity:1}
nav.solid{padding:8px var(--pad)}
nav>*{position:relative;z-index:1}
/* Die Wortmarke darf nie gestaucht werden: nicht schrumpfen, Breite immer aus der Hoehe */
nav .brand{display:block;flex:0 0 auto;line-height:0;background:rgba(250,247,240,.94);
  border-radius:10px;padding:6px 10px;transition:.45s var(--ease)}
nav.solid .brand{background:transparent;padding:0}
nav .brand img{height:clamp(30px,3.4vw,42px);width:auto;max-width:none;display:block;object-fit:contain}
.links{margin-left:auto;display:flex;gap:2px}
.links a{position:relative;color:#fff;text-decoration:none;font-size:13.5px;font-weight:500;letter-spacing:.2px;
  padding:9px 13px;border-radius:9px;transition:color .3s,background .3s;white-space:nowrap}
nav.solid .links a{color:var(--brown)}
.links a::after{content:"";position:absolute;left:13px;right:13px;bottom:5px;height:1.5px;background:var(--org);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .4s var(--ease2)}
.links a:hover::after,.links a.act::after{transform:scaleX(1)}
.links a.act{color:var(--org)!important}
.langs{display:flex;gap:4px;margin-left:8px}
.langs button{border:1px solid rgba(255,255,255,.5);background:rgba(0,0,0,.22);color:#fff;font-family:inherit;
  font-size:12px;font-weight:600;letter-spacing:.6px;padding:7px 10px;border-radius:8px;cursor:pointer;transition:.25s var(--ease)}
nav.solid .langs button{border-color:var(--line);background:#fff;color:var(--brown)}
.langs button:hover{transform:translateY(-1px)}
.langs button.act{background:var(--org)!important;color:#fff!important;border-color:var(--org)!important;
  box-shadow:0 4px 14px rgba(242,107,33,.4)}
.burger{display:none;margin-left:8px;width:42px;height:38px;border:1px solid rgba(255,255,255,.5);background:rgba(0,0,0,.22);
  border-radius:9px;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:4.5px}
nav.solid .burger{border-color:var(--line);background:#fff}
.burger span{width:17px;height:1.7px;background:#fff;border-radius:2px;transition:.35s var(--ease)}
nav.solid .burger span{background:var(--brown)}
.burger.on span:nth-child(1){transform:translateY(6.2px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-6.2px) rotate(-45deg)}
#drawer{position:fixed;inset:0;z-index:99;background:rgba(22,18,14,.97);backdrop-filter:blur(8px);
  display:flex;flex-direction:column;justify-content:center;gap:4px;padding:12vh var(--pad) 6vh;
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s}
#drawer.on{opacity:1;visibility:visible}
#drawer a{color:#f3ece1;text-decoration:none;font-family:var(--serif);font-size:clamp(24px,7vw,34px);
  padding:9px 0;border-bottom:1px solid rgba(185,154,104,.22);opacity:0;transform:translateY(14px)}
#drawer.on a{animation:drawIn .5s var(--ease2) forwards}
@keyframes drawIn{to{opacity:1;transform:none}}

/* ============ Sections ============ */
section{padding:clamp(64px,9vw,132px) var(--pad);max-width:1560px;margin:0 auto;position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:600;letter-spacing:2.6px;
  text-transform:uppercase;color:var(--org)}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--gold)}
h2{font-family:var(--serif);font-size:clamp(30px,4.6vw,58px);font-weight:400;line-height:1.1;
  letter-spacing:-.5px;margin-top:12px}
h2 em{color:var(--org);font-style:italic}
h3{font-family:var(--serif);font-size:clamp(21px,2.4vw,30px);font-weight:400;line-height:1.2}
.sub{color:var(--muted);margin-top:10px;font-size:clamp(14px,1.5vw,16.5px);max-width:70ch}
.rule{height:1px;width:clamp(64px,9vw,120px);background:linear-gradient(90deg,var(--org),var(--gold));margin:22px 0 34px;
  border-radius:2px;position:relative}
.rule::after{content:"";position:absolute;left:0;top:-1px;width:26px;height:3px;background:var(--org);border-radius:2px}
.dark{background:linear-gradient(170deg,var(--deep) 0%,var(--deep2) 100%);color:#efe7db;max-width:none}
.dark h2,.dark h3{color:#fbf6ee}
.dark .sub{color:#b6a892}
.dark .eyebrow{color:var(--gold-l)}
.inner{max-width:1560px;margin:0 auto}

/* ============ Reveal ============ */
.reveal{opacity:0;transform:translateY(30px);
  transition:opacity .85s var(--ease2),transform .85s var(--ease2);transition-delay:var(--d,0ms)}
.reveal.vis{opacity:1;transform:none}
.rv-l{transform:translateX(-34px)} .rv-r{transform:translateX(34px)}
.rv-s{transform:scale(.94)}
.rv-l.vis,.rv-r.vis,.rv-s.vis{transform:none}
.w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.16em;margin-bottom:-.16em}
.w i{display:inline-block;font-style:inherit;transform:translateY(110%);opacity:0;
  transition:transform .9s var(--ease2),opacity .7s var(--ease2)}
.go .w i{transform:none;opacity:1}

/* ============ Hero ============ */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hero .bg{position:absolute;inset:-6%;background-position:center;background-size:cover;z-index:-2;
  animation:kb 26s var(--ease) forwards;will-change:transform}
@keyframes kb{0%{transform:scale(1.22) translate3d(0,0,0)}100%{transform:scale(1.02) translate3d(0,-1.5%,0)}}
.hero .ov{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(20,15,10,.55) 0%,rgba(20,15,10,.22) 26%,rgba(20,15,10,.52) 55%,rgba(20,15,10,.82) 80%,rgba(20,15,10,.94) 100%)}
.hero .ov2{position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 78% at 18% 82%,rgba(242,107,33,.24),transparent 62%)}
.hero .hin{position:relative;width:100%;max-width:1560px;margin:0 auto;padding:0 var(--pad) clamp(90px,13vh,150px);color:#fff}
.badge{display:inline-flex;align-items:center;gap:9px;background:rgba(242,107,33,.94);color:#fff;font-size:12.5px;
  font-weight:600;letter-spacing:1.4px;text-transform:uppercase;padding:9px 18px;border-radius:100px;
  box-shadow:0 8px 26px rgba(242,107,33,.5)}
.badge .dot{width:6px;height:6px;border-radius:50%;background:#fff;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.hero h1{font-family:var(--serif);font-size:clamp(44px,9.6vw,132px);font-weight:400;line-height:.96;
  letter-spacing:-2px;margin:22px 0 6px;filter:drop-shadow(0 6px 26px rgba(12,8,5,.55))}
.hero h1 em{font-style:italic;background:linear-gradient(100deg,#ffb27a 0%,var(--org) 42%,#e59a4a 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero .s1{font-size:clamp(16px,2.1vw,25px);font-weight:300;max-width:26ch;margin-top:14px;line-height:1.4}
.hero .s2{font-size:clamp(12.5px,1.4vw,15px);opacity:.86;margin-top:14px;letter-spacing:.3px}
.hcta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.cta{position:relative;display:inline-flex;align-items:center;gap:10px;background:var(--org);color:#fff;
  text-decoration:none;font-weight:600;font-size:15px;padding:15px 32px;border-radius:100px;overflow:hidden;
  border:none;cursor:pointer;font-family:inherit;transition:transform .4s var(--ease2),box-shadow .4s var(--ease2);
  box-shadow:0 10px 30px rgba(242,107,33,.42)}
.cta span{position:relative;z-index:1}
.cta::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,var(--org-l),var(--org-d));
  opacity:0;transition:opacity .4s}
.cta:hover{transform:translateY(-3px);box-shadow:0 16px 42px rgba(242,107,33,.58)}
.cta:hover::before{opacity:1}
.cta.ghost{background:transparent;border:1px solid rgba(255,255,255,.5);box-shadow:none;color:#fff}
.cta.ghost::before{background:rgba(255,255,255,.14)}
.cta.ghost:hover{box-shadow:0 12px 30px rgba(0,0,0,.28)}
.cta.gold{background:var(--gold);box-shadow:0 10px 30px rgba(185,154,104,.42)}
.cta.gold::before{background:linear-gradient(100deg,var(--gold-l),var(--gold))}
.hrail{display:flex;flex-wrap:wrap;gap:0;margin-top:40px;border-top:1px solid rgba(255,255,255,.22);padding-top:22px}
.hrail div{padding-right:clamp(20px,3.5vw,54px);margin-right:clamp(20px,3.5vw,54px);border-right:1px solid rgba(255,255,255,.16)}
.hrail div:last-child{border:none;margin:0;padding:0}
.hrail b{display:block;font-family:var(--serif);font-size:clamp(22px,3vw,36px);font-weight:400;color:#fff;line-height:1.1}
.hrail small{display:block;font-size:11.5px;letter-spacing:1.3px;text-transform:uppercase;color:rgba(255,255,255,.66);margin-top:5px}
.scroll{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;flex-direction:column;
  align-items:center;gap:9px;color:rgba(255,255,255,.78);font-size:10.5px;letter-spacing:2.4px;text-transform:uppercase;z-index:2}
.scroll .bar{width:1px;height:44px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.75));position:relative;overflow:hidden}
.scroll .bar::after{content:"";position:absolute;left:0;top:0;width:100%;height:40%;background:var(--org);animation:slide 2.1s var(--ease) infinite}
@keyframes slide{0%{transform:translateY(-110%)}100%{transform:translateY(260%)}}

/* ============ Cards ============ */
.card{position:relative;background:rgba(255,255,255,.72);backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);border:1px solid rgba(255,255,255,.8);
  border-radius:16px;padding:22px 24px;box-shadow:var(--sh1);overflow:hidden;
  transition:transform .5s var(--ease2),box-shadow .5s var(--ease2),border-color .5s}
.card::before{content:"";position:absolute;inset:0;border-radius:16px;padding:1px;pointer-events:none;
  background:linear-gradient(140deg,rgba(185,154,104,.55),transparent 42%,transparent 62%,rgba(242,107,33,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .5s}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh2)}
.card:hover::before{opacity:1}
.dark .card{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.12);color:#efe7db}
.dark .card:hover{background:rgba(255,255,255,.085)}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.kpi{text-align:left}
.kpi .num{font-family:var(--serif);font-size:clamp(28px,3.6vw,50px);font-weight:400;line-height:1;
  background:linear-gradient(120deg,var(--org),var(--gold));-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;letter-spacing:-1px}
.dark .kpi .num{background:linear-gradient(120deg,var(--org-l),var(--gold-l));-webkit-background-clip:text;background-clip:text}
.kpi .lbl{font-size:13.5px;margin-top:9px;line-height:1.5;color:var(--muted)}
.dark .kpi .lbl{color:#b6a892}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3.5vw,52px);align-items:start}
.grid2.wide{grid-template-columns:1.25fr 1fr}
.stack>*+*{margin-top:14px}

/* ============ Media / parallax ============ */
.media{position:relative;overflow:hidden;border-radius:18px;box-shadow:var(--sh2);background:#eee}
.media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease2)}
.media.px img{height:118%;position:relative;top:-9%;will-change:transform}
.media:hover img{transform:scale(1.035)}
.media .tag{position:absolute;left:16px;bottom:16px;background:rgba(22,18,14,.72);backdrop-filter:blur(8px);
  color:#fff;font-size:12px;letter-spacing:.4px;padding:8px 15px;border-radius:100px;border:1px solid rgba(255,255,255,.18)}
.caption{font-size:12.5px;color:var(--muted);margin-top:10px;text-align:center}
.zoom{cursor:zoom-in}

/* ============ Chips ============ */
.chip{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.75);border:1px solid var(--line);
  border-radius:100px;padding:8px 16px;font-size:13.5px;margin:0 8px 9px 0;transition:.3s var(--ease2)}
.chip:hover{border-color:var(--gold);transform:translateY(-2px)}
.featgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:11px}
.feat{position:relative;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.11);border-radius:13px;
  padding:16px 17px;font-size:14px;font-weight:500;overflow:hidden;transition:.4s var(--ease2);color:#efe7db}
.feat::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--org);
  transform:scaleY(0);transform-origin:50% 0;transition:transform .45s var(--ease2)}
.feat:hover{background:rgba(242,107,33,.14);border-color:rgba(242,107,33,.4);transform:translateY(-4px)}
.feat:hover::after{transform:scaleY(1)}
.banner{position:relative;background:linear-gradient(120deg,var(--deep),#332b23);color:#f0e8dc;border-radius:18px;
  padding:26px 30px;font-size:15px;line-height:1.7;margin-top:26px;overflow:hidden;border:1px solid rgba(185,154,104,.24)}
.banner::before{content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,rgba(242,107,33,.34),transparent 68%)}
.banner b{color:var(--gold-l)}
.ausgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:11px}
.aus{display:flex;gap:15px;align-items:flex-start;padding:16px 18px}
.ausnum{flex:0 0 auto;width:31px;height:31px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:700;color:var(--org);border:1px solid rgba(242,107,33,.4);background:rgba(242,107,33,.08)}
.aus b{font-size:14.5px;font-weight:600}
.dim{color:var(--muted);font-size:12.5px;margin-top:3px;line-height:1.55}
.dark .dim{color:#a99982}

/* ============ Gallery rail ============ */
.railwrap{position:relative;margin:0 calc(var(--pad)*-1)}
.rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px var(--pad) 22px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab}
.rail::-webkit-scrollbar{display:none}
.rail.drag{cursor:grabbing;scroll-snap-type:none}
.rail figure{flex:0 0 clamp(272px,44vw,620px);scroll-snap-align:center;position:relative;border-radius:18px;
  overflow:hidden;box-shadow:var(--sh2);background:#e9e1d5}
.rail figure img{display:block;width:100%;height:clamp(210px,34vw,440px);object-fit:cover;
  transition:transform 1s var(--ease2);pointer-events:none}
.rail figure:hover img{transform:scale(1.05)}
.rail figure figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 20px 16px;color:#fff;font-size:13.5px;
  background:linear-gradient(transparent,rgba(20,15,10,.82));letter-spacing:.3px}
.railnav{display:flex;gap:9px;align-items:center;justify-content:flex-end;margin-top:-6px}
.rbtn{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.8);
  color:var(--brown);font-size:17px;cursor:pointer;transition:.3s var(--ease2);display:flex;align-items:center;justify-content:center}
.rbtn:hover{background:var(--org);color:#fff;border-color:var(--org);transform:scale(1.07)}
.rbtn:disabled{opacity:.3;cursor:default;transform:none;background:rgba(255,255,255,.8);color:var(--brown);border-color:var(--line)}
.swipehint{font-size:12px;color:var(--muted);margin-right:auto;letter-spacing:.4px}

/* ============ Orientation diagram ============ */
.orient{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(22px,3.5vw,48px);align-items:center}
.odiag{width:100%;max-width:520px;margin:0 auto;display:block}
.odiag .plot{fill:rgba(255,255,255,.6);stroke:var(--gold);stroke-width:1.4}
.odiag .blk{fill:rgba(58,51,44,.86)}
.odiag .vil{fill:rgba(185,154,104,.85)}
.odiag .pool{fill:#5fb6d4}
.odiag .sea{fill:url(#seaG)}
.odiag .lbl{font-family:var(--sans);font-size:11px;fill:#fff;font-weight:600;letter-spacing:.4px}
.odiag .lbl2{font-family:var(--sans);font-size:11.5px;fill:var(--muted);font-weight:500}
.odiag .comp{font-family:var(--serif);font-size:15px;fill:var(--org);font-weight:700}
.olegend{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.vt{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.3px;
  padding:6px 13px;border-radius:100px;border:1px solid;white-space:nowrap}
.vt::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.vt.sea{color:#2b7f9e;border-color:rgba(43,127,158,.36);background:rgba(43,127,158,.09)}
.vt.pool{color:#2f8f8a;border-color:rgba(47,143,138,.36);background:rgba(47,143,138,.09)}
.vt.land{color:#77903f;border-color:rgba(119,144,63,.38);background:rgba(119,144,63,.10)}
.vt.garden{color:#a8762c;border-color:rgba(168,118,44,.36);background:rgba(168,118,44,.09)}

/* ============ Tabs ============ */
.tabs{display:inline-flex;gap:5px;padding:5px;background:rgba(255,255,255,.6);border:1px solid var(--line);
  border-radius:100px;margin-bottom:22px;flex-wrap:wrap}
.dark .tabs{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
.tabs button{border:none;background:transparent;color:var(--brown);font-family:inherit;font-weight:600;font-size:13.5px;
  padding:11px 22px;border-radius:100px;cursor:pointer;transition:.35s var(--ease2);white-space:nowrap}
.dark .tabs button{color:#cbbda6}
.tabs button:hover{color:var(--org)}
.tabs button.act{background:var(--org);color:#fff;box-shadow:0 5px 18px rgba(242,107,33,.34)}
.dark .tabs button.act{color:#fff}
.tabpane{display:none}
.tabpane.act{display:block;animation:fade .5s var(--ease2)}
@keyframes fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ============ Filters ============ */
.filters{background:rgba(255,255,255,.66);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.8);
  border-radius:18px;padding:20px 22px;box-shadow:var(--sh1);margin-bottom:20px}
.frow{display:flex;flex-wrap:wrap;gap:20px 30px;align-items:flex-start}
.fgrp{min-width:0}
.fgrp>label{display:block;font-size:10.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px}
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pill{border:1px solid var(--line);background:rgba(255,255,255,.8);color:var(--brown);font-family:inherit;
  font-size:12.5px;font-weight:500;padding:8px 15px;border-radius:100px;cursor:pointer;transition:.28s var(--ease2);white-space:nowrap}
.pill:hover{border-color:var(--gold);transform:translateY(-1px)}
.pill.act{background:var(--brown);color:#fff;border-color:var(--brown)}
.pill.act.org{background:var(--org);border-color:var(--org)}
.srch{position:relative;flex:1;min-width:210px}
.srch input,.sel{width:100%;font-family:inherit;font-size:13.5px;color:var(--brown);background:rgba(255,255,255,.9);
  border:1px solid var(--line);border-radius:100px;padding:11px 17px;outline:none;transition:.3s}
.srch input{padding-left:40px}
.srch input:focus,.sel:focus{border-color:var(--org);box-shadow:0 0 0 3px rgba(242,107,33,.14)}
.srch svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:15px;height:15px;stroke:var(--muted);
  fill:none;stroke-width:2;pointer-events:none}
.sel{cursor:pointer;appearance:none;padding-right:34px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%238a7f6f' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 15px center;background-size:11px}
.fbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-top:16px;
  padding-top:15px;border-top:1px solid var(--line)}
.fcount{font-size:13.5px;color:var(--muted)}
.fcount b{color:var(--org);font-weight:700;font-size:16px;font-family:var(--serif)}
.lnk{background:none;border:none;font-family:inherit;font-size:12.5px;color:var(--muted);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;padding:4px}
.lnk:hover{color:var(--org)}

/* ============ Unit list ============ */
/* kein overflow:hidden, sonst greift position:sticky in der Kopfzeile nicht */
.ulist{border-radius:18px;box-shadow:var(--sh1);background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.8)}
.uhead,.urow{display:grid;align-items:center;gap:10px;padding:13px 18px}
.uhead{background:linear-gradient(100deg,var(--brown),#4a4137);color:#f2ebe0;font-size:10.5px;font-weight:700;
  letter-spacing:1.3px;text-transform:uppercase;position:sticky;top:60px;z-index:6;border-radius:17px 17px 0 0}
.urow:last-child{border-radius:0 0 17px 17px}
.urow{border-top:1px solid var(--line);font-size:13.5px;cursor:pointer;transition:background .28s,transform .28s var(--ease2);
  animation:rowIn .5s var(--ease2) backwards;position:relative}
@keyframes rowIn{from{opacity:0;transform:translateY(10px)}}
.urow:nth-child(even){background:rgba(250,246,239,.62)}
.urow:hover{background:rgba(242,107,33,.075)}
.urow.na{cursor:default;opacity:.62}
.urow.na:hover{background:rgba(250,246,239,.62)}
.urow.sel{background:rgba(242,107,33,.12);box-shadow:inset 3px 0 0 var(--org)}
/* Spalten: I = 9, J = 10, V = 9 */
.gI .uhead,.gI .urow{grid-template-columns:50px 1.15fr 1.55fr .8fr 1.35fr 1.15fr .8fr .95fr 108px}
.gJ .uhead,.gJ .urow{grid-template-columns:48px 1fr 1.4fr .55fr .75fr 1.25fr 1.05fr .75fr .88fr 104px}
.gV .uhead,.gV .urow{grid-template-columns:52px 1.35fr .95fr 1.25fr 1.2fr 1.1fr .8fr .9fr 108px}
.unr{font-family:var(--serif);font-size:17px;color:var(--org);font-weight:700}
.uname{font-weight:600;font-family:var(--serif);font-size:16px}
.p1{font-weight:700;color:var(--org);white-space:nowrap;font-size:15px}
.p2{color:var(--muted);white-space:nowrap;text-decoration:line-through;text-decoration-color:rgba(138,127,111,.6)}
.psq{color:var(--muted);white-space:nowrap;font-size:12.5px}
.save{display:inline-flex;flex-direction:column;gap:1px}
.save b{color:#2f8f5a;font-weight:700;white-space:nowrap;font-size:13px}
.save small{font-size:10.5px;font-weight:700;letter-spacing:.5px;color:#fff;background:#2f8f5a;
  border-radius:5px;padding:1px 6px;align-self:flex-start}
.st{font-size:10.5px;font-weight:700;letter-spacing:1.1px;padding:5px 11px;border-radius:100px;display:inline-block;white-space:nowrap}
.st.sold{color:#a8342c;background:rgba(168,52,44,.11);border:1px solid rgba(168,52,44,.26)}
.st.res{color:#93700f;background:rgba(147,112,15,.12);border:1px solid rgba(147,112,15,.28)}
.ubtn{border:1px solid var(--org);background:rgba(242,107,33,.07);color:var(--org);font-family:inherit;font-size:11.5px;
  font-weight:600;padding:9px 13px;border-radius:100px;cursor:pointer;transition:.3s var(--ease2);white-space:nowrap;width:100%}
.ubtn:hover{background:var(--org);color:#fff;transform:translateY(-1px);box-shadow:0 6px 16px rgba(242,107,33,.32)}
.vts{display:flex;flex-wrap:wrap;gap:4px}
.vts .vt{font-size:10px;padding:3px 9px}
.empty{padding:52px 22px;text-align:center;color:var(--muted);font-size:14.5px}
.note{font-size:12.5px;color:var(--muted);margin-top:14px;line-height:1.65}

/* ============ Type cards ============ */
.typgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:16px}
.typ{padding:26px 24px;cursor:pointer}
.typ .tg{font-family:var(--serif);font-size:38px;color:var(--gold);line-height:1;font-style:italic}
.typ b{display:block;margin-top:14px;font-size:15.5px}
.typ .from{margin-top:14px;padding-top:13px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.typ .from b{display:inline;font-family:var(--serif);font-size:22px;color:var(--org);font-weight:400}

/* ============ Calculator ============ */
.calcwrap{display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(20px,3vw,40px);align-items:start}
.cpanel{background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:clamp(20px,2.6vw,32px);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.cpick{display:flex;flex-wrap:wrap;gap:9px;align-items:center;justify-content:space-between;
  background:rgba(242,107,33,.13);border:1px solid rgba(242,107,33,.32);border-radius:14px;padding:15px 18px;margin-bottom:22px}
.cpick .cu{font-family:var(--serif);font-size:clamp(17px,2vw,23px);color:#fff;line-height:1.25}
.cpick .cd{font-size:12.5px;color:var(--gold-l);margin-top:3px}
.crow{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:14px}
.crow span{color:#bdaf9a}
.crow b{font-weight:600;color:#fbf6ee;white-space:nowrap}
.crow.big{border-bottom:none;padding-top:18px;margin-top:8px;border-top:1px solid rgba(185,154,104,.4)}
.crow.big span{color:#e6dccd;font-size:15px}
.crow.big b{font-family:var(--serif);font-size:clamp(26px,3.6vw,44px);font-weight:400;
  background:linear-gradient(120deg,var(--org-l),var(--gold-l));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.crow.pos b{color:#7ed6a0}
.slab{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:11px}
.slab span{font-size:10.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold-l)}
.slab b{font-family:var(--serif);font-size:26px;font-weight:400;color:#fff}
input[type=range]{width:100%;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;height:26px}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:3px;
  background:linear-gradient(90deg,var(--org) var(--pct,25%),rgba(255,255,255,.18) var(--pct,25%))}
input[type=range]::-moz-range-track{height:4px;border-radius:3px;background:rgba(255,255,255,.18)}
input[type=range]::-moz-range-progress{height:4px;border-radius:3px;background:var(--org)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;
  margin-top:-8px;box-shadow:0 3px 12px rgba(0,0,0,.4);border:3px solid var(--org);transition:transform .2s}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--org);box-shadow:0 3px 12px rgba(0,0,0,.4)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.22)}
.quick{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}
.qb{border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);color:#e0d5c3;font-family:inherit;
  font-size:12px;font-weight:600;padding:6px 13px;border-radius:100px;cursor:pointer;transition:.28s var(--ease2)}
.qb:hover{border-color:var(--org);color:#fff}
.qb.act{background:var(--org);border-color:var(--org);color:#fff}
.seg{display:flex;gap:4px;padding:4px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);border-radius:100px}
.seg button{flex:1;border:none;background:transparent;color:#cbbda6;font-family:inherit;font-size:13px;font-weight:600;
  padding:10px 14px;border-radius:100px;cursor:pointer;transition:.35s var(--ease2)}
.seg button.act{background:var(--gold);color:#241f19}
.tog{display:flex;align-items:center;gap:13px;margin-top:18px;padding:15px 17px;border-radius:14px;cursor:pointer;
  background:rgba(185,154,104,.13);border:1px solid rgba(185,154,104,.3);transition:.35s var(--ease2)}
.tog:hover{background:rgba(185,154,104,.2)}
.tog.on{background:rgba(242,107,33,.16);border-color:rgba(242,107,33,.44)}
.sw{flex:0 0 auto;width:44px;height:25px;border-radius:100px;background:rgba(255,255,255,.2);position:relative;transition:.35s var(--ease2)}
.sw::after{content:"";position:absolute;left:3px;top:3px;width:19px;height:19px;border-radius:50%;background:#fff;transition:.35s var(--ease2)}
.tog.on .sw{background:var(--org)}
.tog.on .sw::after{transform:translateX(19px)}
.tog b{font-size:14px;color:#fbf6ee;display:block}
.tog small{font-size:12px;color:var(--gold-l)}
.sched{margin-top:24px;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.11)}
.sched .sh,.sched .sr{display:grid;grid-template-columns:1.1fr 1.5fr 1.2fr 1.2fr;gap:8px;padding:10px 15px;font-size:12.5px}
.sched .sh{background:rgba(255,255,255,.09);font-size:10px;letter-spacing:1.3px;text-transform:uppercase;color:var(--gold-l);font-weight:700}
.sched .sr{border-top:1px solid rgba(255,255,255,.07);color:#d9cdb9}
.sched .sr b{color:#fbf6ee;font-weight:600}
.sched .sr.first{background:rgba(242,107,33,.1)}
.sched .sr.first b{color:var(--org-l)}
.schedwrap{max-height:262px;overflow-y:auto;scrollbar-width:thin}
.cnote{font-size:11.5px;color:#9c8e79;margin-top:16px;line-height:1.6}

/* ============ Payment scrollytelling ============ */
/* Laenge erzeugt den Scrollweg, ueber den die vier Schritte nacheinander aktiv werden */
/* Frueher eine Scrollstrecke ueber drei Bildschirmhoehen. Das hat den Weg
   durch die Seite unnoetig lang gemacht, deshalb steht der Zahlungsplan
   jetzt einfach als Abschnitt da, alle vier Schritte auf einen Blick. */
.sticky{position:relative}
.stickIn{display:flex;align-items:center;padding:clamp(64px,9vw,110px) var(--pad)}
.pstage{width:100%;max-width:1560px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:center}
.psteps{display:flex;flex-direction:column;gap:12px}
.pstep{display:flex;gap:18px;align-items:flex-start;padding:20px 22px;border-radius:16px;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);
  transition:background .4s var(--ease2),border-color .4s var(--ease2)}
.pstep:hover{background:rgba(242,107,33,.09);border-color:rgba(242,107,33,.3)}
.pstep .pn{flex:0 0 auto;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:19px;color:var(--gold-l);border:1px solid rgba(185,154,104,.42);transition:.5s var(--ease2)}
.pstep .pn{background:rgba(242,107,33,.16);color:var(--org-l);border-color:rgba(242,107,33,.4)}
.pstep b{display:block;font-family:var(--serif);font-size:clamp(19px,2.3vw,27px);font-weight:400;color:#fbf6ee}
.pstep p{font-size:13.5px;color:#b6a892;margin-top:5px;line-height:1.55}
.pviz{position:relative;aspect-ratio:1;max-width:420px;margin:0 auto;width:100%}
.pring{position:absolute;inset:0;transform:rotate(-90deg)}
.pring circle{fill:none;stroke-linecap:round}
.pring .bgc{stroke:rgba(255,255,255,.09);stroke-width:10}
.pring .fgc{stroke:url(#ringG);stroke-width:10;transition:stroke-dashoffset 1s var(--ease2)}
.pmid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:14%}
.pmid .pv{font-family:var(--serif);font-size:clamp(38px,6vw,74px);line-height:1;
  background:linear-gradient(120deg,var(--org-l),var(--gold-l));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pmid .pl{font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold-l);margin-top:12px}

/* ============ Plans ============ */
.plangrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.plancard{background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.8);border-radius:16px;padding:12px;
  box-shadow:var(--sh1);transition:.45s var(--ease2)}
.plancard:hover{transform:translateY(-5px);box-shadow:var(--sh2)}
.plancard img{width:100%;border-radius:10px;display:block;background:#fff}
.plancard figcaption{font-size:13.5px;font-weight:600;margin-top:11px;text-align:center}

/* ============ Rendite table ============ */
.calc{width:100%;border-collapse:collapse}
.calc td{font-size:14px;padding:9px 2px;border-bottom:1px solid var(--line)}
.calc .tot td{border-top:2px solid var(--org);border-bottom:none;font-weight:700;padding-top:13px}
.calc .tot .r{color:var(--org);font-family:var(--serif);font-size:21px;font-weight:400}
.r{text-align:right}

/* ============ Contact ============ */
.kontakt{position:relative;overflow:hidden;padding:0;max-width:none}
.kontakt .bg{position:absolute;inset:-6%;background-position:center;background-size:cover;will-change:transform}
.kontakt .ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,15,10,.62),rgba(20,15,10,.9))}
.kin{position:relative;text-align:center;color:#fff;padding:clamp(80px,13vw,160px) var(--pad)}
.kin h2{color:#fff}
.plaque{display:inline-block;background:rgba(250,247,240,.96);border-radius:16px;padding:18px 34px;margin-top:30px;
  box-shadow:0 20px 60px rgba(0,0,0,.4)}
.plaque img{height:clamp(38px,5vw,62px);width:auto;max-width:100%;display:block;object-fit:contain}
footer{background:var(--deep2);color:#8d8172;text-align:center;padding:30px var(--pad);font-size:12.5px;letter-spacing:.4px}

/* ============ Lightbox ============ */
#lightbox{position:fixed;inset:0;background:rgba(14,10,7,.96);backdrop-filter:blur(10px);z-index:200;
  display:none;align-items:center;justify-content:center;flex-direction:column;padding:5vh 4vw}
#lightbox.open{display:flex;animation:fade .3s}
#lightbox img{max-width:92vw;max-height:82vh;border-radius:10px;background:#fff;box-shadow:0 30px 90px rgba(0,0,0,.6);
  animation:pop .45s var(--ease2)}
@keyframes pop{from{transform:scale(.94);opacity:0}}
#lightbox .cap{color:#e6dccd;margin-top:16px;font-size:14px;letter-spacing:.3px;text-align:center}
#lightbox .x{position:absolute;top:20px;right:24px;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08);color:#fff;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.3s}
#lightbox .x:hover{background:var(--org);border-color:var(--org)}
#lightbox .ar{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;
  border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font-size:20px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.3s}
#lightbox .ar:hover{background:var(--org);border-color:var(--org)}
#lightbox .ar.pv{left:max(14px,2vw)} #lightbox .ar.nx{right:max(14px,2vw)}
#toTop{position:fixed;right:20px;bottom:20px;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);
  background:rgba(255,255,255,.9);backdrop-filter:blur(8px);color:var(--brown);font-size:17px;cursor:pointer;z-index:80;
  opacity:0;visibility:hidden;transform:translateY(12px);transition:.4s var(--ease2);display:flex;align-items:center;justify-content:center}
#toTop.on{opacity:1;visibility:visible;transform:none}
#toTop:hover{background:var(--org);color:#fff;border-color:var(--org)}

/* ============ Responsive ============ */
/* Preisliste wird hier von Tabelle auf Karten umgestellt */
@media(max-width:1180px){
  .uhead{display:none}
  .ulist{background:transparent;border:none;box-shadow:none;border-radius:0}
  .urow{display:block;border:1px solid var(--line);background:rgba(255,255,255,.82)!important;border-radius:15px;
    padding:16px 18px;margin-bottom:11px;box-shadow:var(--sh1)}
  .urow.na{background:rgba(250,246,239,.72)!important}
  .urow.sel{box-shadow:0 0 0 2px var(--org);background:rgba(242,107,33,.09)!important}
  .urow>div{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:5px 0;text-align:right}
  .urow>div::before{content:attr(data-l);font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
    color:var(--muted);text-align:left;flex:0 0 auto;align-self:center}
  .urow>.cNr{border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:5px}
  .urow>.cAct{padding-top:13px}
  .urow>.cAct::before{content:none}
  .urow>div{flex-wrap:wrap}
  .urow .vts{flex-basis:100%;justify-content:flex-end;margin-top:5px}
  .urow .save{align-items:flex-end}
  .urow .p2{font-size:12px}
  .urow:last-child{border-radius:15px}
}
@media(max-width:980px){
  .grid2,.grid2.wide,.calcwrap,.pstage,.orient{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr 1fr}
  .links{display:none}
  .burger{display:flex}
  .hrail div{border-right:none;padding-right:22px;margin-right:22px}
  .stickIn{padding:clamp(56px,9vw,90px) var(--pad)}
  .pviz{max-width:290px;margin-bottom:26px}
  .orient{gap:30px}
  /* seitliche Einblendung wuerde auf schmalen Schirmen ueber den Rand ragen */
  .rv-l,.rv-r{transform:translateY(26px)}
}
@media(max-width:760px){
  .sched .sh,.sched .sr{grid-template-columns:.7fr 1.25fr 1.1fr 1.1fr;padding:9px 11px;font-size:11.5px}
  .kpis{grid-template-columns:1fr}
  .hrail div{padding-right:16px;margin-right:16px;margin-bottom:12px}
  .rail figure figcaption{font-size:12px}
  .frow{gap:16px 22px}
}
@media(max-width:520px){
  .badge{font-size:11px;padding:8px 14px}
  .card{padding:18px 17px}
  .tabs button{padding:10px 15px;font-size:12.5px}
  nav{gap:9px;padding:10px 16px}
  nav .brand{padding:5px 8px}
  nav .brand img{height:27px}
  .langs{margin-left:2px;gap:3px}
  .langs button{padding:6px 8px;font-size:11px;letter-spacing:.3px}
  .burger{width:36px;height:33px;margin-left:2px}
}
@media(max-width:370px){
  nav{gap:6px;padding:9px 12px}
  nav .brand img{height:23px}
  .langs button{padding:5px 6px;font-size:10px}
  .burger{width:32px;height:30px}
  .plaque{padding:14px 22px}
}

/* ============ Motion / print ============ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
  .w i{transform:none!important;opacity:1!important}
  .hero .bg{animation:none;transform:scale(1.02)}
  #aurora i{animation:none}
}
@media print{
  #aurora,#grain,#prog,nav,#drawer,.scroll,#toTop,.railnav,.filters,#lightbox{display:none!important}
  .reveal,.w i{opacity:1!important;transform:none!important}
  .tabpane{display:block!important}
  .hero{min-height:56vh}
  .dark{background:#fff!important;color:#000!important}
  .dark h2,.dark h3,.crow b,.tog b{color:#000!important}
  body{background:#fff}
}

/* ==================== Aufgeraeumtes Menue mit Gruppen ==================== */
.ddwrap{position:relative}
.ddbtn{border:none;background:transparent;color:#fff;font-family:inherit;font-size:13.5px;font-weight:500;
  letter-spacing:.2px;padding:9px 13px;border-radius:9px;cursor:pointer;display:flex;align-items:center;gap:6px;
  transition:color .3s;white-space:nowrap}
nav.solid .ddbtn{color:var(--brown)}
.ddbtn::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-1px);transition:transform .3s var(--ease2);opacity:.7}
.ddwrap:hover .ddbtn::after,.ddwrap.on .ddbtn::after{transform:rotate(225deg) translateY(-2px)}
.ddwrap:hover .ddbtn,.ddwrap.on .ddbtn,.ddbtn.act{color:var(--org)!important}
.dd{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(-8px);min-width:210px;
  background:rgba(250,247,240,.97);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  border:1px solid rgba(185,154,104,.34);border-radius:14px;padding:8px;box-shadow:var(--sh3);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease2),transform .3s var(--ease2),visibility .3s;z-index:5}
.ddwrap:hover .dd,.ddwrap.on .dd{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.dd a{display:block;color:var(--brown)!important;font-size:13.5px;padding:10px 14px;border-radius:9px;
  text-decoration:none;white-space:nowrap;transition:.25s var(--ease2)}
.dd a::after{display:none}
.dd a:hover{background:rgba(242,107,33,.11);color:var(--org)!important;transform:translateX(3px)}
.dd a.act{background:var(--org);color:#fff!important}
#drawer .dwin{width:100%;max-height:100%;overflow-y:auto;display:flex;flex-direction:column;gap:0}
.dgrp{display:block;font-size:10.5px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--gold);margin:20px 0 4px;opacity:0}
#drawer.on .dgrp{animation:drawIn .5s var(--ease2) forwards}
#drawer a{font-size:clamp(19px,5.2vw,27px);padding:8px 0}

/* ==================== Warum Finike ==================== */
.wfgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
.wfcard{position:relative;padding:26px 26px 24px;overflow:hidden}
.wfcard .wfn{font-family:var(--serif);font-size:52px;line-height:1;color:rgba(185,154,104,.34);position:absolute;
  right:20px;top:12px;pointer-events:none;transition:.5s var(--ease2)}
.wfcard:hover .wfn{color:rgba(242,107,33,.42);transform:scale(1.08)}
.wfcard h3{font-size:20px;color:var(--gold-l);padding-right:52px}
.wfcard p{font-size:14.5px;line-height:1.75;margin-top:10px;color:#cbbda6}
.wfcard p b{color:#fbf6ee}
.wfk{margin-top:22px;grid-template-columns:repeat(4,1fr)}

/* ==================== Umgebung ==================== */
.mapwrap{max-width:1100px;margin:0 auto;background:var(--cream2)}
.mapwrap img{width:100%;height:auto;display:block}
.sunwrap{max-width:1400px;margin:0 auto;background:var(--cream2)}
.sunwrap img{width:100%;height:auto;display:block}
.distrail{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 6px;justify-content:center}
.dist{display:flex;flex-direction:column;align-items:center;gap:2px;background:rgba(255,255,255,.72);
  border:1px solid var(--line);border-radius:13px;padding:12px 18px;min-width:112px;transition:.35s var(--ease2)}
.dist:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:var(--sh1)}
.dist b{font-family:var(--serif);font-size:21px;color:var(--org);line-height:1.1}
.dist span{font-size:11.5px;color:var(--muted);text-align:center;letter-spacing:.2px}
.sights{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:12px;margin-top:24px}
.sight{display:flex;gap:14px;align-items:flex-start;padding:16px 18px}
.sight .skm{flex:0 0 auto;font-family:var(--serif);font-size:15px;color:var(--org);background:rgba(242,107,33,.09);
  border:1px solid rgba(242,107,33,.32);border-radius:100px;padding:5px 12px;white-space:nowrap}
.sight b{font-size:14.5px;display:block}
.sight .dim{margin-top:3px}

/* ==================== Sonne ==================== */
.sogrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-top:26px}
.socard{padding:22px 24px}
.socard h3{font-size:17.5px;color:var(--gold-l)}
.socard p{font-size:14px;line-height:1.7;margin-top:8px;color:#cbbda6}

/* ==================== Marktvergleich ==================== */
.ourprice{padding:26px 28px}
.opgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:18px}
.op{background:rgba(242,107,33,.07);border:1px solid rgba(242,107,33,.24);border-radius:13px;padding:15px 17px;
  transition:.35s var(--ease2)}
.op:hover{background:rgba(242,107,33,.13);transform:translateY(-3px)}
.op b{display:block;font-family:var(--serif);font-size:clamp(22px,2.6vw,30px);color:var(--org);line-height:1.1}
.op span{display:block;font-size:11.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-top:6px}
.op.big{background:linear-gradient(125deg,rgba(242,107,33,.16),rgba(185,154,104,.12));border-color:rgba(242,107,33,.4)}
.mvk .num{font-size:clamp(24px,3vw,40px)}
.gM .uhead,.gM .urow{grid-template-columns:2fr .8fr .8fr 1fr 1.6fr}
.gB .uhead,.gB .urow{grid-template-columns:1.6fr 1fr 1fr}
.gP .uhead,.gP .urow{grid-template-columns:1.6fr .95fr 1.1fr 1.1fr .85fr}
.urow.hi{background:rgba(242,107,33,.11)!important;box-shadow:inset 3px 0 0 var(--org)}
.urow.hi .mvo{color:var(--org);font-weight:700}
.mvo{font-weight:600}
.mvsq{font-family:var(--serif);font-size:17px;color:var(--brown);white-space:nowrap}
.urow.hi .mvsq{color:var(--org)}
.tag2{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.6px;padding:3px 9px;border-radius:100px;
  border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.tag2.neu{color:#2f8f5a;border-color:rgba(47,143,90,.4);background:rgba(47,143,90,.08)}

/* Listen auf dunklem Grund */
.dark .ulist{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.dark .urow{border-top-color:rgba(255,255,255,.09);color:#e4dacb}
.dark .urow:nth-child(even){background:rgba(255,255,255,.03)}
.dark .urow:hover{background:rgba(242,107,33,.11)}
.dark .mvsq{color:#fbf6ee}
.dark .urow>div::before{color:#9c8e79}
.dark .pgs{color:#fbf6ee;font-weight:600}
.pgv{font-family:var(--serif);font-size:clamp(16px,1.8vw,21px);white-space:nowrap}
.dark .urow.hi{background:rgba(242,107,33,.16)!important}
.dark .urow.hi .pgv,.dark .urow.hi .pgs{color:var(--org-l)}
.pgg{display:inline-block;font-size:10px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--gold-l);margin-bottom:3px}
.pgt{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.5px;padding:3px 10px;border-radius:100px;
  border:1px solid rgba(185,154,104,.4);color:var(--gold-l);margin-left:8px}
.pgt.o{color:var(--org-l);border-color:rgba(242,107,33,.5)}

/* ==================== FAQ ==================== */
.faqlist{display:flex;flex-direction:column;gap:10px}
.faqitem{background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.85);border-radius:15px;
  box-shadow:var(--sh1);overflow:hidden;transition:box-shadow .4s var(--ease2),border-color .4s}
.faqitem.open{box-shadow:var(--sh2);border-color:rgba(242,107,33,.34)}
.faqq{width:100%;display:flex;align-items:flex-start;gap:15px;text-align:left;background:none;border:none;
  font-family:inherit;font-size:clamp(15px,1.6vw,17px);font-weight:600;color:var(--brown);
  padding:20px 22px;cursor:pointer;line-height:1.5}
.faqq:hover{color:var(--org)}
.faqn{flex:0 0 auto;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:var(--org);border:1px solid rgba(242,107,33,.35);background:rgba(242,107,33,.08);
  margin-top:1px}
.faqx{flex:0 0 auto;margin-left:auto;width:22px;height:22px;position:relative;margin-top:4px}
.faqx::before,.faqx::after{content:"";position:absolute;left:50%;top:50%;background:var(--org);border-radius:2px;
  transform:translate(-50%,-50%);transition:.4s var(--ease2)}
.faqx::before{width:13px;height:1.8px}
.faqx::after{width:1.8px;height:13px}
.faqitem.open .faqx::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.faqa{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease2)}
.faqitem.open .faqa{grid-template-rows:1fr}
.faqa>div{overflow:hidden}
.faqa p{font-size:14.5px;line-height:1.8;color:var(--muted);padding:0 22px 22px 65px}
.faqa mark{background:rgba(242,107,33,.22);color:inherit;border-radius:3px;padding:0 2px}

@media(max-width:1180px){
  .gM .urow>.cB,.gB .urow>.cB,.gP .urow>.cB{display:flex}
  .wfk{grid-template-columns:1fr 1fr}
}
@media(max-width:980px){
  .links{display:none}
  .wfk{grid-template-columns:1fr 1fr}
  .distrail{justify-content:flex-start}
}
@media(max-width:760px){
  .faqa p{padding-left:22px}
  .wfcard{padding:22px 20px}
  .wfcard .wfn{font-size:42px;right:14px}
  .dist{min-width:96px;padding:10px 14px}
}

/* ==================== Anzeige Bestandssystem ==================== */
.livebadge{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;letter-spacing:.3px;
  color:var(--muted);background:rgba(255,255,255,.7);border:1px solid var(--line);
  border-radius:100px;padding:5px 13px;margin-right:12px;white-space:nowrap}
.livebadge i{width:7px;height:7px;border-radius:50%;background:var(--muted);flex:0 0 auto}
.livebadge.on{color:#2f8f5a;border-color:rgba(47,143,90,.35);background:rgba(47,143,90,.08)}
.livebadge.on i{background:#2f8f5a;animation:pulse 2.2s infinite}
@media(max-width:600px){.livebadge{font-size:11px;padding:4px 10px}}

/* ============ Untergeschoss ============
   Die Kacheln nennen Raum und Flaeche. Beides steht so im Ausfuehrungsplan,
   deshalb ist die Flaeche ein eigener Schluessel und nicht in den Namen
   hineingeschrieben: "je 12 m2" laesst sich sonst nicht uebersetzen. */
.uglead{max-width:74ch;color:var(--muted);font-size:15.5px;line-height:1.65;margin:0 0 30px}
.uggrp{font-size:12px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--org);margin:30px 0 12px}
.uggrp:first-child{margin-top:0}
.uggit{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:11px}
.card.ugk{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:15px 18px}
.card.ugk b{font-size:14.5px;font-weight:600;line-height:1.35}
.card.ugk span{flex:0 0 auto;font-family:var(--serif);font-size:19px;color:var(--org);white-space:nowrap}
.ugpdf{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:26px}
.ughin{font-size:13px;color:var(--muted)}
.kpi .lbl.plus{margin-top:6px;padding-top:7px;border-top:1px solid rgba(58,51,44,.12);color:var(--org);font-size:13px}
.dark .kpi .lbl.plus{border-top-color:rgba(255,255,255,.16);color:var(--gold-l)}
@media(max-width:600px){.uggit{grid-template-columns:1fr}}

/* ============ Gezeichnete Grafiken ============
   Karte und Sonnenverlauf sind SVG statt PNG, damit ihre Beschriftung beim
   Sprachwechsel mitgeht. Die Schriftgroessen stehen in SVG Einheiten und
   sind deshalb je Grafik verschieden: die Karte ist 1300 Einheiten breit,
   der Sonnenverlauf 2080. */
.gsvg{display:block;width:100%;height:auto;font-family:var(--sans)}
.gsvgwrap{cursor:zoom-in;background:#fdfaf5;border-radius:14px;padding:10px}
.dark .gsvgwrap{background:rgba(255,255,255,.94)}
.gsvg text{fill:var(--brown)}

.gmap .gort{font-size:21px;font-weight:600}
.gmap .gkm{font-size:19px;fill:var(--muted)}
.gmap .gme{font-size:22px;font-weight:700;fill:#fff;letter-spacing:1px}
.gmap .gme2{font-size:19px;fill:#fff}
.gmap .gleg{font-size:20px}
.gmap .gsea{font-size:30px;letter-spacing:9px;fill:#6fa3bd;font-weight:600}

.gsun .grow{font-size:30px;font-weight:600}
.gsun .grow2{font-size:27px;fill:var(--muted)}
.gsun .gval{font-size:30px;font-weight:700}
.gsun .gax{font-size:26px;fill:var(--muted)}
.gsun .gh3{font-size:36px;font-weight:700}
.gsun .gleg{font-size:28px}
.gsun .gdir{font-size:30px;font-weight:700}
.gsun .gblk{font-size:26px;font-weight:700}
.gsun .gblk2{font-size:24px;font-weight:700;fill:#4b7f96}
.gsun .gtime{font-size:28px;font-weight:700;text-anchor:middle}
.gsun .gseason{font-size:30px;font-weight:700;letter-spacing:2px}
.gsun .gkeine{font-size:26px;fill:var(--muted)}
.gsun .gmid{font-size:28px;font-style:italic;fill:var(--brown)}
.gsun .gfoot{font-size:24px;fill:var(--muted)}
.gsun .gkm{font-size:24px;fill:var(--muted)}
.gsun .gsea2{font-size:30px;letter-spacing:7px;fill:#4b7f96;font-weight:600}
.gsun .o{fill:var(--org)} .gsun .b{fill:#1f77b4}

/* Vergroessern: das SVG wird einfach eine Ebene hoeher noch einmal gezeichnet */
.svgzoom{position:fixed;inset:0;background:rgba(14,10,7,.96);backdrop-filter:blur(10px);
  z-index:200;display:flex;align-items:center;justify-content:center;padding:2.5vw;cursor:zoom-out}
.svgzoom svg{width:100%;height:auto;max-height:95vh;background:#fdfaf5;border-radius:12px;padding:14px}

/* ---------- Anlage und Dienstleistungen ----------
   Vorher standen hier 19 gleich aussehende Kaestchen nebeneinander, jedes
   nur ein bis zwei Woerter lang. Das Auge fand keinen Halt. Jetzt vier
   Gruppen, und jede Kachel traegt ihr Symbol, damit die Zeile am Bild
   wiedererkennbar wird. Die Gruppentitel folgen bewusst derselben
   Machart wie im Untergeschoss, damit die Seite eine Sprache spricht. */
.anlgrp{font-size:12px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--gold-l);margin:30px 0 14px}
.anlgrp:first-child{margin-top:0}
.anlwrap .featgrid{grid-template-columns:repeat(auto-fill,minmax(196px,1fr))}
.anlwrap .feat{display:flex;align-items:center;gap:12px}
.fico{flex:0 0 auto;width:26px;height:26px;color:var(--org-l);opacity:.92;
  transition:color .4s var(--ease2),transform .4s var(--ease2)}
.feat:hover .fico{color:var(--gold-l);transform:scale(1.08)}
@media(max-width:600px){
  .anlwrap .featgrid{grid-template-columns:1fr 1fr;gap:9px}
  .anlwrap .feat{padding:13px 12px;font-size:13px;gap:9px}
  .fico{width:22px;height:22px}
}

/* Der Durchschnitt steht jetzt unter der Spanne, kleiner und ruhiger.
   Die Spanne ist die Nachricht, der Schnitt nur die Einordnung. */
.op .opav{display:block;font-style:normal;font-size:12px;color:var(--muted);
  margin-top:7px;padding-top:7px;border-top:1px solid rgba(242,107,33,.18)}
.op.big .opav{font-size:13px;color:var(--brown);opacity:.78}

/* Zuwachs in der Prognose. Steht rechts als Ergebnisspalte und ist die
   einzige Zahl, die farbig gesetzt ist, damit das Auge dort landet. */
.pgz{display:block;text-align:right;font-family:var(--serif);
  font-size:clamp(17px,2vw,23px);font-weight:600;color:var(--org);white-space:nowrap}
.dark .pgz{color:var(--org-l)}
.pgz.ist{font-family:inherit;font-size:12px;font-weight:600;letter-spacing:1.1px;
  text-transform:uppercase;color:var(--muted)}
.dark .pgz.ist{color:rgba(251,246,238,.55)}
@media(max-width:760px){.pgz{text-align:left}}

/* Vermietungsrechnung. Die Tabelle war eine Kette aus neun gleich
   aussehenden Zeilen. Jetzt zwei benannte Bloecke, und die Rendite steht
   als Ergebnis darunter statt als letzte Zeile unter vielen. */
.calc .csub{color:var(--muted);font-size:11.5px;font-weight:700;letter-spacing:1.4px;
  text-transform:uppercase;padding-top:18px;border-bottom:none}
.calc tr:first-child .csub{padding-top:0}
.mrend{margin-top:18px;padding:16px 18px;border-radius:14px;text-align:center;
  background:linear-gradient(125deg,rgba(242,107,33,.13),rgba(185,154,104,.10));
  border:1px solid rgba(242,107,33,.32)}
.mrend b{display:block;font-family:var(--serif);font-size:clamp(26px,3.4vw,36px);
  color:var(--org);line-height:1.05;font-weight:400}
.mrend span{display:block;margin-top:7px;font-size:12.5px;color:var(--muted);line-height:1.5}

/* ---------- Ausstattung ----------
   Statt einer laufenden Nummer traegt jede Karte jetzt ihr Symbol, und die
   18 Punkte stehen in vier Gruppen. Eine Nummer sagt nur, das Wievielte ein
   Punkt ist, ein Symbol sagt, worum es geht. */
.ausgrp{font-size:12px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--org);margin:30px 0 14px}
.ausgrp:first-child{margin-top:0}
.ausico{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;color:var(--org);
  background:rgba(242,107,33,.10);border:1px solid rgba(242,107,33,.24);
  transition:.4s var(--ease2)}
.ausico .fico{width:19px;height:19px;color:inherit}
.card.aus:hover .ausico{background:rgba(242,107,33,.18);border-color:rgba(242,107,33,.45)}
@media(max-width:600px){
  .ausico{width:30px;height:30px}
  .ausico .fico{width:17px;height:17px}
}

/* Sehenswuerdigkeiten mit amtlicher Seite. Der Name wird zum Link, dahinter
   ein kleiner Pfeil, weil sich ein neues Fenster oeffnet. Wo keine amtliche
   Seite belegt ist, bleibt der Name schlichter Text. */
.sgl{color:inherit;text-decoration:none;border-bottom:1px solid rgba(242,107,33,.45);
  transition:.3s var(--ease2)}
.sgl:hover{color:var(--org);border-bottom-color:var(--org)}
.sglx{display:inline-block;width:9px;height:9px;margin-left:6px;border-top:1.5px solid currentColor;
  border-right:1.5px solid currentColor;transform:rotate(-45deg) translateY(1px);opacity:.65}
.sgq{margin-top:6px;font-size:11px;letter-spacing:1.1px;text-transform:uppercase;color:var(--org);opacity:.85}

/* Weg in den Kundenbereich, im Reservierungsabschnitt. */
.kbhin{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-bottom:24px}
.kbhin b{display:block;font-size:16px;margin-bottom:6px}
.kbhin p{margin:0;font-size:14px;line-height:1.7;color:var(--muted);max-width:62ch}
.kbhin .cta{flex:0 0 auto;margin-left:auto}
@media(max-width:700px){.kbhin .cta{margin-left:0}}

/* ==================== Videokopf ====================
   Das Video liegt ueber dem Titelbild. Solange es laedt oder nicht
   abspielen darf, bleibt das Bild sichtbar. Die Verlaeufe darueber
   sind unveraendert, damit die Schrift genauso lesbar bleibt wie bisher. */
.hero .bg{z-index:-3}
/* Deckkraft steuert das Skript Bild fuer Bild, deshalb hier bewusst kein transition */
.hero .hvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  opacity:0;pointer-events:none;background:transparent;will-change:opacity}
/* laeuft das Video, braucht das Standbild darunter seinen Kenburns nicht mehr */
.hero.vid .bg{animation:none;transform:scale(1.02)}

/* Bewegtbild ist unruhiger und heller als ein Foto, deshalb kraeftiger abdunkeln.
   Oben bleibt Himmel und Meer sichtbar, ab der Textzone wird deutlich zugezogen. */
.hero.vid .ov{background:linear-gradient(180deg,
  rgba(20,15,10,.58) 0%,
  rgba(20,15,10,.34) 18%,
  rgba(20,15,10,.60) 42%,
  rgba(20,15,10,.74) 62%,
  rgba(20,15,10,.88) 82%,
  rgba(20,15,10,.96) 100%)}
/* auf breiten Schirmen steht die Schrift links, dort zusaetzlich ein sanfter Schleier */
@media(min-width:981px){
  .hero.vid .ov2{background:
    linear-gradient(95deg,rgba(20,15,10,.52) 0%,rgba(20,15,10,.22) 38%,transparent 62%),
    radial-gradient(120% 78% at 18% 82%,rgba(242,107,33,.20),transparent 62%)}
}

@media(prefers-reduced-motion:reduce){
  .hero .hvid{display:none}          /* dann bleibt das ruhige Standbild stehen */
}
@media print{ .hero .hvid{display:none} }

/* ============ Nur fuer die Ordnerfassung: Hintergrundbilder als eigene Dateien ============ */
.hero .bg{background-image:url('../img/hero.webp')}
.kontakt .bg{background-image:url('../img/kontakt.webp')}
@media(max-width:820px){
  .hero .bg{background-image:url('../img/hero-klein.webp')}
  .kontakt .bg{background-image:url('../img/kontakt-klein.webp')}
}
/* Platzhalterfarbe, solange ein Bild noch laedt */
.media,.rail figure,.plancard img{background:linear-gradient(110deg,#efe7db,#f7f1e8 60%,#efe7db)}
img{background-color:transparent}

/* ==================================================================
   KI Assistent und Unterschriftenfeld
   ================================================================== */

/* ---------- Startknopf ---------- */
#toTop{bottom:80px}
#kiBtn{position:fixed;right:20px;bottom:20px;z-index:150;display:flex;align-items:center;gap:10px;
  height:52px;padding:0 20px 0 16px;border:none;border-radius:26px;cursor:pointer;color:#fff;
  font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.2px;
  background:linear-gradient(135deg,var(--org),var(--org-d));box-shadow:0 8px 26px rgba(242,107,33,.42);
  transition:transform .3s var(--ease2),box-shadow .3s var(--ease2),opacity .3s}
#kiBtn:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(242,107,33,.5)}
#kiBtn svg{width:21px;height:21px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#kiBtn .kipulse{position:absolute;right:15px;top:13px;width:9px;height:9px;border-radius:50%;background:#7ddc9a;
  box-shadow:0 0 0 0 rgba(125,220,154,.7);animation:kipulse 2.6s var(--ease) infinite}
@keyframes kipulse{70%{box-shadow:0 0 0 11px rgba(125,220,154,0)}100%{box-shadow:0 0 0 0 rgba(125,220,154,0)}}
body.kiopen #kiBtn{opacity:0;visibility:hidden;transform:scale(.8)}
@media(max-width:600px){#kiBtn span{display:none}#kiBtn{padding:0;width:54px;height:54px;justify-content:center;border-radius:50%}}

/* ---------- Fenster ---------- */
#kiWrap{position:fixed;right:20px;bottom:20px;z-index:151;width:min(410px,calc(100vw - 40px));
  max-height:min(680px,calc(100vh - 40px));display:flex;flex-direction:column;overflow:hidden;
  background:rgba(253,250,245,.97);backdrop-filter:blur(20px) saturate(150%);
  border:1px solid var(--line);border-radius:22px;box-shadow:var(--sh3);
  opacity:0;visibility:hidden;transform:translateY(18px) scale(.97);transform-origin:100% 100%;
  transition:opacity .34s var(--ease2),transform .34s var(--ease2),visibility .34s}
#kiWrap.on{opacity:1;visibility:visible;transform:none}
.kihead{display:flex;align-items:center;gap:12px;padding:15px 16px;border-bottom:1px solid var(--line);
  background:linear-gradient(135deg,rgba(242,107,33,.07),rgba(185,154,104,.07))}
.kiava{width:40px;height:40px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--org),var(--gold));color:#fff;font-family:var(--serif);font-size:19px}
.kihead b{display:block;font-size:14.5px;font-weight:600;line-height:1.3}
.kihead small{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}
.kihead .sp{flex:1}
.kiico{width:34px;height:34px;flex:0 0 auto;border-radius:50%;border:1px solid var(--line);background:var(--white);
  cursor:pointer;display:grid;place-items:center;color:var(--brown);transition:.2s var(--ease)}
.kiico:hover{background:var(--org);border-color:var(--org);color:#fff}
.kiico.act{background:var(--org);border-color:var(--org);color:#fff}
.kiico svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Verlauf ---------- */
.kibody{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:16px;display:flex;flex-direction:column;gap:12px;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.kibody::-webkit-scrollbar{width:6px}
.kibody::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.kimsg{max-width:86%;padding:11px 14px;border-radius:16px;font-size:14px;line-height:1.62;
  white-space:pre-wrap;word-break:break-word;animation:kiin .34s var(--ease2) both}
@keyframes kiin{from{opacity:0;transform:translateY(8px)}}
.kimsg.ki{align-self:flex-start;background:var(--white);border:1px solid var(--line);border-bottom-left-radius:5px;
  box-shadow:var(--sh1)}
.kimsg.du{align-self:flex-end;background:linear-gradient(135deg,var(--org),var(--org-d));color:#fff;
  border-bottom-right-radius:5px}
.kimsg.warn{align-self:stretch;max-width:100%;background:#fff4ec;border:1px solid #f3c9ac;color:#a1521e;font-size:13px}
.kidots{display:inline-flex;gap:4px;align-items:center;height:12px}
.kidots i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:kidot 1.3s var(--ease) infinite}
.kidots i:nth-child(2){animation-delay:.18s}
.kidots i:nth-child(3){animation-delay:.36s}
@keyframes kidot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
.kichips{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 14px}
.kichip{padding:8px 13px;border:1px solid var(--line);border-radius:15px;background:var(--white);cursor:pointer;
  font-family:var(--sans);font-size:12.5px;color:var(--brown);text-align:left;transition:.2s var(--ease)}
.kichip:hover{border-color:var(--org);color:var(--org);transform:translateY(-1px)}

/* ---------- Eingabe ---------- */
.kifoot{border-top:1px solid var(--line);padding:11px 12px;background:rgba(255,255,255,.7)}
.kirow{display:flex;align-items:flex-end;gap:8px}
.kirow textarea{flex:1;resize:none;max-height:120px;min-height:42px;padding:11px 13px;border:1px solid var(--line);
  border-radius:15px;background:var(--white);font-family:var(--sans);font-size:14px;color:var(--brown);line-height:1.5;
  outline:none;transition:border-color .2s}
.kirow textarea:focus{border-color:var(--org)}
.kisend{width:42px;height:42px;flex:0 0 auto;border:none;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--org),var(--org-d));color:#fff;transition:.2s var(--ease)}
.kisend:disabled{opacity:.35;cursor:default}
.kisend svg,.kimic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.kimic{width:42px;height:42px;flex:0 0 auto;border:1px solid var(--line);border-radius:50%;background:var(--white);
  color:var(--brown);cursor:pointer;display:grid;place-items:center;transition:.2s var(--ease)}
.kimic:hover{border-color:var(--org);color:var(--org)}
.kimic.hoert{background:#e5484d;border-color:#e5484d;color:#fff;animation:kimic 1.5s var(--ease) infinite}
@keyframes kimic{50%{box-shadow:0 0 0 9px rgba(229,72,77,.16)}}
.kinote{margin-top:8px;font-size:10.5px;line-height:1.5;color:var(--muted);text-align:center}
@media(max-width:600px){
  #kiWrap{right:0;bottom:0;width:100vw;max-height:100vh;height:100dvh;border-radius:0;border:none}
  .kimsg{max-width:92%}
}
@media(prefers-reduced-motion:reduce){
  #kiBtn .kipulse,.kidots i,.kimic.hoert{animation:none}
  .kimsg{animation:none}
}

/* ==================================================================
   Unterschriftenfeld
   ================================================================== */
.sigwrap{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:start}
@media(max-width:900px){.sigwrap{grid-template-columns:1fr}}
.sigform{display:flex;flex-direction:column;gap:12px}
.sigf label{display:block;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.sigf input,.sigf select{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:13px;background:var(--white);
  font-family:var(--sans);font-size:14.5px;color:var(--brown);outline:none;transition:border-color .2s}
.sigf input:focus,.sigf select:focus{border-color:var(--org)}
.sigduo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.sigduo{grid-template-columns:1fr}}
.sigpad{position:relative;border:2px dashed var(--line);border-radius:16px;background:var(--white);overflow:hidden;
  transition:border-color .25s var(--ease)}
.sigpad.hat{border-style:solid;border-color:var(--gold)}
.sigpad canvas{display:block;width:100%;height:190px;touch-action:none;cursor:crosshair}
.sigpad .sigline{position:absolute;left:8%;right:8%;bottom:44px;height:1px;background:var(--line);pointer-events:none}
.sigpad .sighint{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-size:12px;color:var(--muted);
  pointer-events:none;transition:opacity .25s}
.sigpad.hat .sighint{opacity:0}
.sigbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px}
.sigbar .lnk{background:none;border:none;font-family:var(--sans);font-size:13px;color:var(--muted);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;padding:0}
.sigbar .lnk:hover{color:var(--org)}
.sigok{display:flex;gap:11px;align-items:flex-start;font-size:13px;line-height:1.6;color:var(--muted);cursor:pointer}
.sigok input{flex:0 0 auto;width:18px;height:18px;margin-top:2px;accent-color:var(--org)}
.sigmsg{margin-top:12px;padding:13px 16px;border-radius:13px;font-size:13.5px;line-height:1.6;display:none}
.sigmsg.on{display:block;animation:kiin .3s var(--ease2) both}
.sigmsg.gut{background:#eef8f0;border:1px solid #bfe3c7;color:#2c6b3c}
.sigmsg.schlecht{background:#fff4ec;border:1px solid #f3c9ac;color:#a1521e}
.sigentwurf{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:14px;
  background:rgba(185,154,104,.14);border:1px solid rgba(185,154,104,.4);color:#8a6f42;
  font-size:11.5px;letter-spacing:1.2px;text-transform:uppercase;font-weight:600}
.sigentwurf::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold)}

/* ---------- Rueckruf im Assistenten ---------- */
.kiruf{padding:16px;border-top:1px solid var(--line);background:rgba(255,255,255,.75);
  max-height:60%;overflow-y:auto}
.kiruf b{display:block;font-size:14.5px}
.kiruf p{font-size:12.5px;color:var(--muted);margin:3px 0 12px;line-height:1.55}
.kiruf input[type=text],.kiruf input[type=email],.kiruf input[type=tel],.kiruf textarea{
  width:100%;padding:10px 12px;margin-bottom:8px;border:1px solid var(--line);border-radius:12px;
  background:var(--white);font-family:var(--sans);font-size:13.5px;color:var(--brown);outline:none;resize:none}
.kiruf input:focus,.kiruf textarea:focus{border-color:var(--org)}
.kiduo{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kiok{display:flex;gap:9px;align-items:flex-start;font-size:12px;line-height:1.5;color:var(--muted);
  cursor:pointer;margin-bottom:8px}
.kiok input{flex:0 0 auto;width:15px;height:15px;margin-top:1px;accent-color:var(--org)}
.kirufbar{display:flex;align-items:center;gap:12px;margin-top:4px}
.kirufbar .lnk{background:none;border:none;font-family:var(--sans);font-size:13px;color:var(--muted);
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:0}
.kirufbar .lnk:hover{color:var(--org)}
.kirufbar .cta{flex:1;justify-content:center;padding:11px 18px;font-size:13.5px}

/* ==================================================================
   Standortkarte mit Zweiklickschutz
   Vor dem Klick wird nichts von Google geladen, keine Verbindung,
   kein Cookie, keine Uebertragung der Adresse des Besuchers.
   ================================================================== */
.kartewrap{position:sticky;top:96px}
@media(max-width:980px){.kartewrap{position:static}}
.karte{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--line);
  background:var(--cream2);box-shadow:var(--sh2);aspect-ratio:4/3}
@media(max-width:980px){.karte{aspect-ratio:1/1}}
@media(max-width:560px){.karte{aspect-ratio:3/4}}
.karte iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* ---------- Vorschau, rein aus eigenem SVG ---------- */
.kvor{position:absolute;inset:0;display:grid;place-items:center;padding:clamp(18px,4vw,40px)}
.kvor svg{position:absolute;inset:0;width:100%;height:100%}
.kbox{position:relative;max-width:440px;text-align:center;padding:clamp(20px,3vw,30px);
  background:rgba(253,250,245,.94);backdrop-filter:blur(12px);border:1px solid var(--line);
  border-radius:18px;box-shadow:var(--sh2)}
.kbox b{display:block;font-size:16px;margin-bottom:8px}
.kbox p{font-size:13px;line-height:1.65;color:var(--muted)}
.kbox .cta{margin-top:16px}
.karte.an .kvor{display:none}

/* ---------- Leiste unter der Karte ---------- */
.kbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px}
.klink{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid var(--line);
  border-radius:100px;background:var(--white);color:var(--brown);text-decoration:none;font-size:13.5px;
  transition:.2s var(--ease)}
.klink:hover{border-color:var(--org);color:var(--org);transform:translateY(-1px)}
.klink svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.kart{display:inline-flex;border:1px solid var(--line);border-radius:100px;overflow:hidden;background:var(--white)}
.kart button{padding:9px 16px;border:none;background:none;cursor:pointer;font-family:var(--sans);
  font-size:13.5px;color:var(--brown);transition:.2s var(--ease)}
.kart button.act{background:var(--brown);color:#fff}
.kcoord{margin-left:auto;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
@media(max-width:700px){.kcoord{margin-left:0;width:100%}}
.knote{margin-top:12px;font-size:12px;line-height:1.6;color:var(--muted)}

.hero .bg{background-image:url('../img/hero-video.webp')}
@media(max-width:820px){.hero .bg{background-image:url('../img/hero-video-klein.webp')}}