/* ============================================================
   Roema Design — Landingpage
   Brand (verbindlich, ULTRABRAIN §1): Navy #0F3D6E · Orange #E8853A
   Reise: vor dem Palast → durch das Tor → hinein (Goldsäulen + Garten).
   ============================================================ */

:root{
  --navy:#0F3D6E;
  --navy-deep:#0a2c52;
  --navy-night:#071f3b;
  --orange:#E8853A;
  --gold:#cfa756;
  --gold-light:#f4d489;
  --marble:#f5f1e8;
  --ink:#1f2937;
  --muted:#5b6675;
  --line:rgba(255,255,255,.14);
  --serif:'Cinzel','Trajan Pro',Georgia,serif;
  --display:'Playfair Display',Georgia,serif;
  --sans:'Inter','Helvetica Neue',Arial,sans-serif;
  --maxw:1120px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--sans);color:#eaf0f7;background:#04122a;
  line-height:1.6;overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

/* ============ PARALLAX-SZENE (fixe Tiefen-Ebenen, von JS transformiert) ============ */
.scene{position:fixed;inset:0;z-index:-1;overflow:hidden;background:#04122a;}
.layer{position:absolute;inset:-4vmax;will-change:transform,opacity;}
.layer svg{width:100%;height:100%;display:block;}

/* 4-Stufen-Foto-Zoom (Fernansicht → Innenraum) */
.bg-layer{position:absolute;inset:-5%;width:110%;height:110%;object-fit:cover;object-position:center center;
  opacity:0;will-change:transform,opacity;transform-origin:50% 50%;backface-visibility:hidden;
  image-rendering:auto;}
.bg-layer#bg1{opacity:1;}
/* Lesbarkeits-Schleier über den Fotos (themenabhängig) */
.scene-scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,16,33,.66) 0%,rgba(4,16,33,.46) 32%,rgba(4,16,33,.64) 100%);}
[data-theme="light"] .scene-scrim{
  background:linear-gradient(180deg,rgba(247,246,243,.34) 0%,rgba(247,246,243,.12) 35%,rgba(247,246,243,.40) 100%);}

.sky{
  background:
    radial-gradient(120% 80% at 50% 8%,#1c5a9e 0%,#0c3360 45%,#071f3b 100%);
}
.interior{opacity:0;transform-origin:50% 50%;}
.exterior{transform-origin:50% 55%;}

/* Lichtschein aus dem Tor */
.gate-glow{
  position:absolute;left:50%;top:52%;width:34vw;height:46vh;
  transform:translate(-50%,-50%) scale(.5);
  background:radial-gradient(closest-side,rgba(244,212,137,.55),rgba(244,212,137,0) 72%);
  opacity:0;pointer-events:none;mix-blend-mode:screen;
}

/* nahe Marmorsäulen seitlich – nur leichte Parallaxe (zylindrisches Volumen) */
.fg-col{position:absolute;top:-8vh;bottom:-8vh;width:9vw;min-width:74px;opacity:0;
  background:linear-gradient(90deg,
    #6c6149 0%,#a89c7d 14%,#e4dac4 34%,#fbf8f0 50%,#ece3d0 66%,#b3a684 86%,#6c6149 100%);
  box-shadow:inset 0 0 50px rgba(0,0,0,.4);}
/* Kanneluren (Flutes) als feine vertikale Rillen */
.fg-col::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,transparent 0 9px,rgba(80,72,52,.30) 9px 10px,rgba(255,255,255,.18) 10px 11px,transparent 11px 19px);}
/* Kapitell-Andeutung oben */
.fg-col::after{content:"";position:absolute;left:-16%;right:-16%;height:26px;top:9vh;
  background:linear-gradient(180deg,#fdfbf4,#bdae8d);border-radius:2px;
  box-shadow:0 3px 8px rgba(0,0,0,.3);}
.fg-left{left:-2vw;}
.fg-right{right:-2vw;transform:scaleX(-1);}

.vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(125% 85% at 50% 42%,transparent 38%,rgba(4,16,33,.78) 100%);}
.dust{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.dust .mote{position:absolute;border-radius:50%;
  background:radial-gradient(circle,rgba(244,212,137,.9),transparent 70%);
  animation:float linear infinite;}
@keyframes float{
  from{transform:translateY(20px);opacity:0;}
  10%,90%{opacity:.7;} to{transform:translateY(-110vh);opacity:0;}
}

/* ============ NAVIGATION ============ */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(20px,5vw,56px);
  transition:background .35s,backdrop-filter .35s,padding .35s,box-shadow .35s;}
.nav.scrolled{background:rgba(7,31,59,.72);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  padding:11px clamp(20px,5vw,56px);box-shadow:0 1px 0 var(--line);}
.nav-brand{font-family:var(--serif);font-size:21px;letter-spacing:1.5px;color:#fff;}
.nav-brand em{color:var(--orange);font-style:normal;}
.nav-links{display:flex;align-items:center;gap:28px;font-size:14.5px;}
.nav-links a{color:rgba(234,240,247,.82);transition:color .2s;}
.nav-links a:hover{color:#fff;}
.nav-cta{border:1px solid var(--gold);color:var(--gold-light)!important;
  padding:8px 18px;border-radius:40px;transition:all .25s!important;}
.nav-cta:hover{background:var(--orange);border-color:var(--orange);color:#071f3b!important;}
/* Sprach-Dropdown */
.lang{position:relative;}
.lang-btn{display:flex;align-items:center;gap:7px;font-family:var(--sans);font-size:13px;
  font-weight:600;letter-spacing:.5px;color:#fff;background:rgba(255,255,255,.08);
  border:1px solid var(--line);border-radius:40px;padding:7px 12px;cursor:pointer;transition:all .2s;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.lang-btn:hover{background:rgba(255,255,255,.18);border-color:var(--gold);}
.lang-btn .flag{font-size:16px;line-height:1;}
.lang-btn .chev{font-size:10px;opacity:.7;transition:transform .2s;}
.lang-btn[aria-expanded="true"] .chev{transform:rotate(180deg);}
.lang-menu{position:absolute;top:calc(100% + 10px);right:0;z-index:120;min-width:188px;
  list-style:none;margin:0;padding:6px;border-radius:14px;
  background:rgba(7,31,59,.96);border:1px solid var(--line);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility .2s;
  max-height:70vh;overflow:auto;}
.lang-menu.open{opacity:1;visibility:visible;transform:translateY(0);}
.lang-menu li{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px;cursor:pointer;
  font-size:14px;color:rgba(234,240,247,.88);transition:background .15s,color .15s;}
.lang-menu li:hover{background:rgba(255,255,255,.08);color:#fff;}
.lang-menu li[aria-selected="true"]{background:rgba(207,167,86,.16);color:#fff;}
.lang-menu li .flag{font-size:18px;line-height:1;}
.lang-menu li .code{font-weight:600;letter-spacing:.5px;min-width:26px;color:var(--gold-light);}
.lang-menu li .name{color:inherit;}
/* RTL (Arabisch) */
[dir="rtl"] .nav-links{flex-direction:row-reverse;}
[dir="rtl"] .lang-menu{right:auto;left:0;}
[dir="rtl"] .hero,[dir="rtl"] .section-head,[dir="rtl"] .cta-panel{text-align:center;}
[dir="rtl"] .glass-panel,[dir="rtl"] .price-card li,[dir="rtl"] .usp{direction:rtl;}

/* ============ TYPO ============ */
.kicker{font-family:var(--serif);color:var(--orange);font-size:13px;font-weight:500;
  letter-spacing:3px;text-transform:uppercase;margin-bottom:18px;}
.kicker.center{text-align:center;}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.08;color:#fff;}
.lead{color:rgba(234,240,247,.78);font-size:clamp(15px,1.7vw,18px);max-width:54ch;}

/* ============ HERO ============ */
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:120px clamp(20px,5vw,40px) 80px;text-align:center;position:relative;}
.hero-arch{position:relative;max-width:760px;padding:64px clamp(24px,5vw,72px);
  border-radius:340px 340px 28px 28px;
  background:radial-gradient(120% 130% at 50% 0%,rgba(7,31,59,.68),rgba(4,16,33,.52));
  border:1px solid var(--line);
  box-shadow:0 30px 80px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(10px) saturate(125%);-webkit-backdrop-filter:blur(10px) saturate(125%);}
.hero-arch::before{content:"";position:absolute;inset:10px;border-radius:330px 330px 20px 20px;
  border:1px solid rgba(207,167,86,.35);pointer-events:none;}
.hero h1{font-size:clamp(40px,7vw,76px);letter-spacing:-1px;margin-bottom:22px;}
.hero h1 em{font-style:italic;background:linear-gradient(120deg,var(--gold-light),var(--orange));
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.hero-sub{color:rgba(234,240,247,.82);font-size:clamp(16px,2vw,19px);max-width:52ch;margin:0 auto;}
.hero-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:36px;}

.scroll-hint{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;font-style:normal;
  font-size:12px;letter-spacing:2px;text-transform:uppercase;color:rgba(234,240,247,.55);}
.scroll-hint em{font-style:normal;}
.scroll-hint span{width:24px;height:38px;border:1.5px solid rgba(207,167,86,.6);border-radius:14px;position:relative;}
.scroll-hint span::after{content:"";position:absolute;top:7px;left:50%;width:4px;height:7px;border-radius:3px;
  background:var(--gold-light);transform:translateX(-50%);animation:wheel 1.6s infinite;}
@keyframes wheel{0%{opacity:0;top:7px;}40%{opacity:1;}80%{opacity:0;top:18px;}}

/* ============ BUTTONS ============ */
.btn{display:inline-block;padding:14px 30px;border-radius:44px;font-weight:500;font-size:15px;
  letter-spacing:.3px;cursor:pointer;transition:transform .25s,box-shadow .25s,background .25s;
  border:none;font-family:var(--sans);}
.btn-primary{background:linear-gradient(120deg,var(--orange),#f0a05c);color:#071f3b;
  box-shadow:0 12px 30px rgba(232,133,58,.35);}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(232,133,58,.5);}
.btn-glass{background:rgba(255,255,255,.08);border:1px solid var(--line);color:#fff;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.btn-glass:hover{background:rgba(255,255,255,.16);transform:translateY(-3px);}
.btn-glass-orange{background:rgba(232,133,58,.16);border:1px solid rgba(232,133,58,.45);color:var(--orange);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 12px 30px rgba(232,133,58,.18);}
.btn-glass-orange:hover{background:rgba(232,133,58,.26);border-color:rgba(232,133,58,.65);transform:translateY(-3px);
  box-shadow:0 18px 40px rgba(232,133,58,.3);}
.btn.big{font-size:17px;padding:16px 40px;}
.btn.sm{padding:10px 20px;font-size:13.5px;}

/* ============ SECTIONS ============ */
.section{max-width:var(--maxw);margin:0 auto;padding:clamp(70px,11vw,130px) clamp(20px,5vw,40px);}
.section-head{text-align:center;margin-bottom:56px;}
.section-head h2{font-size:clamp(30px,4.4vw,50px);margin-bottom:16px;}
.section-head .lead{margin:0 auto;}

/* ============ CARDS ============ */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.card{position:relative;padding:38px 30px 32px;border-radius:18px;
  background:linear-gradient(160deg,rgba(8,28,55,.66),rgba(5,18,38,.56));
  border:1px solid var(--line);backdrop-filter:blur(16px) saturate(130%);-webkit-backdrop-filter:blur(16px) saturate(130%);
  box-shadow:0 18px 50px rgba(0,0,0,.45);
  transform-style:preserve-3d;transition:transform .25s ease,box-shadow .35s,border-color .35s;}
.card:hover{border-color:rgba(207,167,86,.55);box-shadow:0 30px 70px rgba(0,0,0,.5);}
.card-num{font-family:var(--serif);font-size:13px;letter-spacing:2px;color:var(--gold);
  position:absolute;top:22px;right:26px;transform:translateZ(30px);}
.card-icon{width:62px;height:62px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--navy),#15528f);border:1px solid rgba(207,167,86,.4);
  margin-bottom:22px;transform:translateZ(40px);}
.card-icon svg{width:30px;height:30px;fill:none;stroke:var(--gold-light);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;}
.card h3{font-size:23px;margin-bottom:12px;transform:translateZ(28px);}
.card p{color:rgba(234,240,247,.74);font-size:14.5px;margin-bottom:20px;transform:translateZ(20px);}
.card-price{display:inline-block;font-family:var(--serif);color:var(--orange);font-size:15px;
  letter-spacing:1px;padding-top:14px;border-top:1px solid var(--line);width:100%;transform:translateZ(20px);}

/* ============ GLASS PANELS ============ */
.glass-panel{position:relative;padding:clamp(36px,6vw,68px);border-radius:24px;
  background:linear-gradient(160deg,rgba(8,28,55,.66),rgba(5,18,38,.56));
  border:1px solid var(--line);backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%);
  box-shadow:0 24px 70px rgba(0,0,0,.5);overflow:hidden;}
.glass-panel::before{content:"";position:absolute;top:-40%;right:-10%;width:50%;height:160%;
  background:radial-gradient(circle,rgba(207,167,86,.18),transparent 70%);pointer-events:none;}
.glass-panel h2{font-size:clamp(28px,4.2vw,46px);margin-bottom:18px;}
.usp-list{display:flex;flex-direction:column;gap:16px;margin-top:30px;}
.usp{display:flex;gap:16px;align-items:baseline;font-size:16px;color:rgba(234,240,247,.85);}
.usp .n{font-family:var(--serif);color:var(--orange);font-weight:600;min-width:28px;}
.usp b{color:#fff;font-weight:600;}
.cta-panel{text-align:center;}
.cta-panel .lead{margin:0 auto 30px;}

/* ============ KONTAKT-FORMULAR ============ */
.contact-form{max-width:480px;margin:0 auto;display:flex;flex-direction:column;gap:18px;text-align:left;}
.cf-field{display:flex;flex-direction:column;gap:7px;}
.cf-field span{font-size:13px;font-weight:600;letter-spacing:.3px;color:var(--gold-light);}
.cf-field input,.cf-field textarea{font-family:var(--sans);font-size:15px;color:#fff;
  background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:12px;
  padding:13px 16px;resize:vertical;transition:border-color .2s,background .2s;}
.cf-field input::placeholder,.cf-field textarea::placeholder{color:rgba(234,240,247,.4);}
.cf-field input:focus,.cf-field textarea:focus{outline:none;border-color:var(--orange);background:rgba(255,255,255,.1);}
.contact-form .btn{align-self:center;margin-top:4px;}
.cf-hint{font-size:12.5px;color:var(--muted);text-align:center;margin-top:-4px;}
[data-theme="light"] .cf-field span{color:var(--navy);}
[data-theme="light"] .cf-field input,[data-theme="light"] .cf-field textarea{
  color:#1f2937;background:rgba(15,61,110,.05);border-color:rgba(15,61,110,.18);}
[data-theme="light"] .cf-field input::placeholder,[data-theme="light"] .cf-field textarea::placeholder{color:rgba(31,48,63,.4);}
/* zentrale, mittig orientierte Inhalte */
#ueber .glass-panel{text-align:center;}
#ueber .glass-panel .lead{margin-left:auto;margin-right:auto;}
#ueber .usp-list{align-items:center;}
#ueber .usp{justify-content:center;text-align:center;}
.card{text-align:center;}
.card .card-icon{margin-left:auto;margin-right:auto;}
.card .card-num{right:auto;left:50%;transform:translateX(-50%);}

/* ============ PREISE ============ */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start;}
.price-card{position:relative;padding:34px 28px;border-radius:18px;
  background:linear-gradient(160deg,rgba(8,28,55,.62),rgba(5,18,38,.54));border:1px solid var(--line);
  backdrop-filter:blur(16px) saturate(130%);-webkit-backdrop-filter:blur(16px) saturate(130%);transition:transform .3s,border-color .3s;}
.price-card:hover{transform:translateY(-6px);}
.price-card.featured{background:linear-gradient(170deg,rgba(15,61,110,.6),rgba(7,31,59,.5));
  border-color:rgba(207,167,86,.6);box-shadow:0 24px 60px rgba(0,0,0,.45);}
.ribbon{position:absolute;top:18px;right:18px;background:var(--orange);color:#071f3b;
  font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;padding:5px 12px;border-radius:30px;}
.price-card h4{font-family:var(--display);font-size:20px;color:#fff;margin-bottom:18px;
  padding-bottom:12px;border-bottom:1px solid var(--line);}
.price-card ul{list-style:none;display:flex;flex-direction:column;gap:14px;}
.price-card li{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  font-size:14.5px;color:rgba(234,240,247,.8);}
.price-card li b{font-family:var(--serif);color:var(--gold-light);white-space:nowrap;font-weight:600;}
.price-card li small{color:var(--muted);font-weight:400;font-family:inherit;font-size:.85em;}
.price-more{text-align:center;margin-top:42px;}

/* Detaillierte Preisliste-Seite */
.pl-list{list-style:none;margin:6px 0 0;}
.pl-list li{display:flex;justify-content:space-between;gap:18px;align-items:baseline;
  padding:12px 0;border-bottom:1px solid var(--line);}
.pl-list li:last-child{border-bottom:none;}
.pl-list li > span{color:rgba(234,240,247,.85);}
.pl-list .p{font-family:var(--serif);color:var(--gold-light);white-space:nowrap;font-weight:600;}
.pl-list .p small{color:var(--muted);font-weight:400;font-family:inherit;font-size:.85em;}
.pl-incl{color:rgba(234,240,247,.72);font-size:14px;margin:10px 0 0;}
.pl-feats{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px 22px;margin:14px 0 0;}
.pl-feats li{position:relative;padding-left:26px;font-size:14px;color:rgba(234,240,247,.82);line-height:1.45;}
.pl-feats li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;
  background:var(--gold-light);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.2l-3.5-3.5L4 14.2 9 19l11-11-1.4-1.4z'/></svg>") center/12px no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.2l-3.5-3.5L4 14.2 9 19l11-11-1.4-1.4z'/></svg>") center/12px no-repeat;}
[data-theme="light"] .pl-feats li{color:#27384a;}
.pl-badge{display:inline-block;font-family:var(--serif);font-size:11px;letter-spacing:1px;text-transform:uppercase;
  color:var(--gold-light);border:1px solid var(--line);border-radius:30px;padding:3px 11px;margin-bottom:14px;}
@media(max-width:560px){.pl-feats{grid-template-columns:1fr;}}

/* ============ FOOTER ============ */
.footer{background:rgba(4,16,33,.85);border-top:1px solid var(--line);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:56px clamp(20px,5vw,56px) 0;margin-top:40px;}
.footer-inner{max-width:var(--maxw);margin:0 auto;display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:30px;padding-bottom:36px;}
.footer-brand{max-width:320px;}
.footer-brand span{font-family:var(--serif);font-size:18px;letter-spacing:1px;display:block;margin-bottom:6px;}
.footer-brand p{color:rgba(234,240,247,.6);font-size:14px;}
.footer-links{display:flex;flex-wrap:wrap;gap:8px 26px;align-content:flex-start;}
.footer-links a{color:rgba(234,240,247,.72);font-size:14.5px;transition:color .2s;}
.footer-links a:hover{color:var(--gold-light);}
.footer-social{max-width:var(--maxw);margin:0 auto;text-align:center;padding:8px 0 16px;}
.footer-social a{display:inline-flex;align-items:center;gap:9px;color:rgba(234,240,247,.78);
  font-size:14px;transition:color .2s,transform .2s;}
.footer-social a:hover{color:var(--gold-light);transform:translateY(-1px);}
.footer-social svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;}
[data-theme="light"] .footer-social a{color:rgba(31,48,63,.78);}
.footer-bottom{max-width:var(--maxw);margin:0 auto;padding:20px 0 26px;border-top:1px solid var(--line);
  color:rgba(234,240,247,.45);font-size:12.5px;text-align:center;}

/* ============ SPRACHWECHSEL-LADEANIMATION ============ */
.lang-loader{position:fixed;inset:0;z-index:9500;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 90% at 50% 30%,rgba(15,61,110,.96),rgba(7,31,59,.99));
  opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.lang-loader.show{opacity:1;visibility:visible;}
.ll-emblem{position:relative;width:120px;height:120px;display:grid;place-items:center;}
.ll-ring{position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(207,167,86,.18);border-top-color:var(--gold-light);
  animation:ll-spin .9s linear infinite;}
.ll-ring::after{content:"";position:absolute;inset:10px;border-radius:50%;
  border:1px solid rgba(232,133,58,.25);border-bottom-color:var(--orange);
  animation:ll-spin 1.4s linear infinite reverse;}
.ll-brand{font-family:var(--serif);font-size:15px;letter-spacing:4px;color:var(--gold-light);
  animation:ll-pulse 1.1s ease-in-out infinite;}
@keyframes ll-spin{to{transform:rotate(360deg);}}
@keyframes ll-pulse{0%,100%{opacity:.55;}50%{opacity:1;}}
@media(prefers-reduced-motion:reduce){.ll-ring,.ll-ring::after,.ll-brand{animation:none;}}

/* ============ LEGAL-SEITEN (Impressum / Datenschutz) ============ */
.legal-top{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:16px clamp(20px,5vw,56px);background:rgba(7,31,59,.9);border-bottom:1px solid var(--line);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
.legal-top .nav-brand{font-family:var(--serif);font-size:20px;letter-spacing:1.5px;color:#fff;}
.legal-top .nav-brand em{color:var(--orange);font-style:normal;}
.legal-back{font-size:14px;color:var(--gold-light);border:1px solid var(--line);border-radius:40px;padding:8px 16px;}
.legal-back:hover{border-color:var(--gold);}
/* Blueprint-Gitter (Unterseiten) wie bei Kretsch Gebäudetechnik – PLUS ein
   dauerhafter, ganz langsamer „unendlicher" Zoom ins Gitter hinein: zwei
   gestaffelte Gitter-Lagen zoomen herein und blenden dabei aus, während die
   zweite (halb versetzt) schon übernimmt → kein Sprung am Loop-Punkt. */
body:has(.legal){
  --bp:rgba(232,133,58,.07);
  background:#04122a;overflow-x:hidden;
}
body:has(.legal)::before,
body:has(.legal)::after{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:
    linear-gradient(var(--bp) 1px,transparent 1px),
    linear-gradient(90deg,var(--bp) 1px,transparent 1px);
  background-size:56px 56px;
  transform-origin:50% 6%;
  transform:scale(1);
  -webkit-mask-image:radial-gradient(125% 90% at 50% 6%,#000 45%,transparent 82%);
  mask-image:radial-gradient(125% 90% at 50% 6%,#000 45%,transparent 82%);
  animation:roemaGridZoom 40s linear infinite;
  will-change:transform,opacity;
}
body:has(.legal)::after{animation-delay:-20s;}
@keyframes roemaGridZoom{
  0%{transform:scale(1);opacity:0;}
  10%{opacity:1;}
  80%{opacity:.4;}
  100%{transform:scale(2.4);opacity:0;}
}
[data-theme="light"] body:has(.legal){--bp:rgba(15,61,110,.08);background:#eef2f7;}
@media (prefers-reduced-motion: reduce){body:has(.legal)::before,body:has(.legal)::after{animation:none;opacity:1;transform:scale(1);}}

.legal{max-width:820px;margin:0 auto;padding:clamp(40px,7vw,80px) clamp(20px,5vw,40px) 90px;position:relative;}
.legal h1{font-family:var(--display);font-size:clamp(30px,5vw,46px);margin-bottom:10px;}
.legal .sub{color:rgba(234,240,247,.6);font-size:14px;margin-bottom:40px;}
.legal h2{font-family:var(--display);font-size:clamp(20px,2.6vw,26px);color:#fff;margin:38px 0 12px;
  padding-bottom:8px;border-bottom:1px solid var(--line);}
.legal h3{font-size:17px;color:var(--gold-light);margin:22px 0 6px;font-family:var(--sans);font-weight:600;}
.legal p,.legal li{color:rgba(234,240,247,.82);font-size:15px;line-height:1.7;}
.legal p{margin:8px 0;}
.legal ul{margin:8px 0 8px 22px;}
.legal li{margin:4px 0;}
.legal a{color:var(--gold-light);text-decoration:underline;}
.legal .box{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:14px;
  padding:22px 24px;margin:16px 0;}
/* gelb markierte Platzhalter „folgt in Kürze" */
.hl{background:#ffe14d;color:#1f2937;font-weight:600;padding:1px 7px;border-radius:5px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;}

/* ============ SCROLL-REVEAL (variierte Bewegung statt Einheits-Slide) ============
   Anti-Slop (frontend-design) + GSAP-Performance-Regel: NUR transform/opacity/filter
   animieren (GPU-Compositing), nie width/height/top/left → kein Reflow, kein Ruckeln.
   Richtung wählbar via data-reveal, Staffelung via --i (JS setzt sie pro [data-stagger]). */
.reveal{opacity:0;--rv:translateY(42px);--rb:none;transform:var(--rv);filter:var(--rb);
  will-change:transform,opacity;}
.reveal[data-reveal="down"]{--rv:translateY(-42px);}
.reveal[data-reveal="left"]{--rv:translateX(-52px);}
.reveal[data-reveal="right"]{--rv:translateX(52px);}
.reveal[data-reveal="scale"]{--rv:scale(.9);}
.reveal[data-reveal="blur"]{--rv:translateY(20px);--rb:blur(16px);}
/* Keyframe-Animation statt Transition → spielt deterministisch ab (kein Hängenbleiben) */
.reveal.in{animation:revealIn .85s cubic-bezier(.22,1,.36,1) forwards;animation-delay:calc(var(--i,0)*.09s);}
@keyframes revealIn{from{opacity:0;transform:var(--rv);filter:var(--rb);}to{opacity:1;transform:none;filter:none;}}

/* ============ PREMIUM MIKRO-INTERAKTIONEN ============ */
/* Magnetischer Button (JS bewegt --mx/--my; nur Maus, transform-only) */
[data-magnetic]{transition:transform .3s cubic-bezier(.22,1,.36,1);}
[data-magnetic].is-mag{transition:transform .12s ease-out;}
/* Hero: Kinder einzeln gestaffelt einblenden (orchestrierter Page-Load) */
.hero-inner > .reveal{animation-duration:.95s;}

/* ============ THEME-UMSCHALTER (Sonne/Mond) ============ */
.theme-btn{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;cursor:pointer;
  color:#fff;background:rgba(255,255,255,.08);border:1px solid var(--line);transition:all .2s;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.theme-btn:hover{background:rgba(255,255,255,.18);border-color:var(--gold);}
.theme-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.theme-btn .i-sun{display:none;}
.theme-btn .i-moon{display:block;}
[data-theme="light"] .theme-btn .i-sun{display:block;}
[data-theme="light"] .theme-btn .i-moon{display:none;}
.legal-top .theme-btn{color:#fff;}

/* ============ LIGHT MODE (Tag-Palast) ============ */
[data-theme="light"] body{background:#e9f1f8;color:#21303f;}
[data-theme="light"]{--line:rgba(15,61,110,.16);}
[data-theme="light"] .scene{background:#d6e6f3;}
[data-theme="light"] .sky{background:radial-gradient(120% 85% at 50% 2%,#cfe8fb 0%,#8fc0e6 48%,#d6ebf7 100%);}
[data-theme="light"] .interior{filter:brightness(1.12) saturate(1.02);}
[data-theme="light"] .vignette{background:radial-gradient(125% 85% at 50% 40%,transparent 46%,rgba(150,185,215,.5) 100%);}
[data-theme="light"] .gate-glow{mix-blend-mode:normal;}
[data-theme="light"] h1,[data-theme="light"] h2,[data-theme="light"] h3{color:#12314f;}
[data-theme="light"] .lead,[data-theme="light"] .hero-sub{color:rgba(31,48,63,.8);}
[data-theme="light"] .nav-brand{color:#12314f;}
[data-theme="light"] .nav-links a{color:rgba(20,40,60,.82);}
[data-theme="light"] .nav-links a:hover{color:#12314f;}
[data-theme="light"] .nav.scrolled{background:rgba(255,255,255,.74);box-shadow:0 1px 0 rgba(15,61,110,.1);}
[data-theme="light"] .lang-btn,[data-theme="light"] .theme-btn{color:#12314f;background:rgba(15,61,110,.06);}
[data-theme="light"] .lang-menu{background:rgba(255,255,255,.97);}
[data-theme="light"] .lang-menu li{color:#21303f;}
[data-theme="light"] .lang-menu li:hover{background:rgba(15,61,110,.07);color:#12314f;}
[data-theme="light"] .hero-arch{background:radial-gradient(120% 130% at 50% 0%,rgba(255,255,255,.55),rgba(255,255,255,.28));}
[data-theme="light"] .glass-panel,[data-theme="light"] .card,[data-theme="light"] .price-card{
  background:linear-gradient(160deg,rgba(255,255,255,.88),rgba(255,255,255,.62));
  border-color:rgba(15,61,110,.14);box-shadow:0 18px 50px rgba(15,61,110,.12);}
[data-theme="light"] .card p,[data-theme="light"] .price-card li,[data-theme="light"] .usp{color:rgba(31,48,63,.82);}
[data-theme="light"] .card h3,[data-theme="light"] .price-card h4,[data-theme="light"] .usp b{color:#12314f;}
[data-theme="light"] .price-card.featured{background:linear-gradient(170deg,rgba(255,255,255,.92),rgba(232,241,250,.78));}
[data-theme="light"] .btn-glass{background:rgba(15,61,110,.07);color:#12314f;border-color:rgba(15,61,110,.18);}
[data-theme="light"] .scroll-hint{color:rgba(31,48,63,.6);}
[data-theme="light"] .footer{background:rgba(255,255,255,.82);}
[data-theme="light"] .footer-brand span{color:#12314f;}
[data-theme="light"] .footer-brand p,[data-theme="light"] .footer-links a,[data-theme="light"] .footer-bottom{color:rgba(31,48,63,.72);}
/* Legal-/Preislisten-Seiten im Light Mode */
[data-theme="light"] .legal-top{background:rgba(255,255,255,.9);}
[data-theme="light"] .legal-top .nav-brand,[data-theme="light"] .legal-top .theme-btn{color:#12314f;}
[data-theme="light"] .legal h1,[data-theme="light"] .legal h2{color:#12314f;}
[data-theme="light"] .legal p,[data-theme="light"] .legal li,[data-theme="light"] .pl-list li > span{color:#27384a;}
[data-theme="light"] .legal .box,[data-theme="light"] .pl-list li{border-color:rgba(15,61,110,.14);}
[data-theme="light"] .legal .box{background:rgba(255,255,255,.7);}

/* ============ PREISLISTE — CARD/TIER/BAND (dunkel, Card-Design) ============ */
.pl-page h2{margin-top:46px;}
/* Tier-Cards (Websites: Basis | Premium) */
.pk-tiers{display:grid;grid-template-columns:1fr 1.15fr;gap:18px;margin:8px 0 8px;}
@media(max-width:640px){.pk-tiers{grid-template-columns:1fr;}}
.pk-tier{background:linear-gradient(160deg,rgba(8,28,55,.66),rgba(5,18,38,.56));border:1px solid var(--line);
  border-radius:18px;padding:28px 26px;backdrop-filter:blur(14px) saturate(130%);-webkit-backdrop-filter:blur(14px) saturate(130%);}
.pk-tier.premium{background:linear-gradient(170deg,rgba(15,61,110,.62),rgba(7,31,59,.55));
  border-color:rgba(207,167,86,.5);box-shadow:0 20px 50px -24px rgba(0,0,0,.65);}
.pk-tag{display:inline-block;font-family:var(--serif);font-size:11px;letter-spacing:1.4px;text-transform:uppercase;
  padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.07);color:var(--gold-light);border:1px solid var(--line);}
.pk-tier.premium .pk-tag{background:var(--orange);color:#fff;border-color:transparent;}
.pk-h{font-family:var(--display);font-size:23px;color:#fff;margin:15px 0 2px;}
.pk-sub{font-size:13px;color:rgba(234,240,247,.6);margin-bottom:14px;}
.pk-price{font-family:var(--serif);font-size:40px;font-weight:600;color:var(--gold-light);letter-spacing:-.5px;
  display:flex;align-items:baseline;gap:8px;}
.pk-price .from{font-size:15px;color:var(--orange);font-family:var(--sans);font-weight:600;}
.pk-feats{margin-top:18px;}
.pk-tier .pk-feats{grid-template-columns:1fr;}
/* Bands (Print / Hosting / Sichtbarkeit) */
.pk-band{background:linear-gradient(160deg,rgba(8,28,55,.6),rgba(5,18,38,.5));border:1px solid var(--line);
  border-radius:18px;padding:26px;backdrop-filter:blur(14px) saturate(130%);-webkit-backdrop-filter:blur(14px) saturate(130%);margin:8px 0;}
.pk-band-head{margin-bottom:16px;}
.pk-rows{display:flex;flex-direction:column;gap:12px;}
.pk-row{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;border-top:1px solid var(--line);padding-top:12px;}
.pk-row:first-child{border-top:none;padding-top:0;}
.pk-l{font-size:15px;color:rgba(234,240,247,.9);}
.pk-l small{display:block;color:var(--muted);font-size:12.5px;margin-top:3px;}
.pk-p{font-family:var(--serif);font-size:16px;font-weight:600;color:var(--gold-light);white-space:nowrap;}
.pk-p small{font-family:inherit;font-size:.82em;color:var(--muted);font-weight:400;}
/* Light-Theme-Overrides */
[data-theme="light"] .pk-tier,[data-theme="light"] .pk-band{background:rgba(255,255,255,.72);border-color:rgba(15,61,110,.14);}
[data-theme="light"] .pk-tier.premium{background:var(--navy);border-color:var(--navy);}
[data-theme="light"] .pk-h{color:#12314f;}
[data-theme="light"] .pk-tier.premium .pk-h,[data-theme="light"] .pk-tier.premium .pk-price{color:#fff;}
[data-theme="light"] .pk-price,[data-theme="light"] .pk-p{color:var(--navy);}
[data-theme="light"] .pk-l{color:#27384a;}
[data-theme="light"] .pk-tag{background:var(--light,#eef1f4);color:var(--navy);}
[data-theme="light"] .pk-tier.premium .pl-feats li{color:rgba(255,255,255,.92);}

/* ============ RESPONSIVE ============ */
@media(max-width:860px){
  .nav-links{gap:12px;font-size:13.5px;}
  .nav-links a:not(.nav-cta){display:none;}
  .cards,.price-grid{grid-template-columns:1fr;}
  .fg-col{display:none;}
  .hero-arch{border-radius:200px 200px 22px 22px;}
}
/* Glaskarten/Textfelder auf Mobile: kleiner, transparenter, schmaler Rand
   stehenlassen — sonst verschluckt das Glas Hintergrund-Foto & Zoom-/Gitter-
   Effekte komplett (Karte = fast volle Viewport-Breite + viel Padding/Blur). */
@media(max-width:640px){
  .cards,.price-grid{gap:16px;}
  .card{padding:24px 20px 22px;border-radius:16px;margin-inline:4px;
    background:linear-gradient(160deg,rgba(8,28,55,.46),rgba(5,18,38,.38));
    backdrop-filter:blur(9px) saturate(120%);-webkit-backdrop-filter:blur(9px) saturate(120%);}
  .card h3{font-size:19px;margin-bottom:8px;}
  .card p{font-size:13.5px;margin-bottom:14px;}
  .card-icon{width:50px;height:50px;margin-bottom:14px;}
  .glass-panel{padding:26px 20px;border-radius:18px;margin-inline:4px;
    background:linear-gradient(160deg,rgba(8,28,55,.46),rgba(5,18,38,.38));
    backdrop-filter:blur(10px) saturate(120%);-webkit-backdrop-filter:blur(10px) saturate(120%);}
  .glass-panel h2{font-size:clamp(24px,7vw,32px);margin-bottom:12px;}
  .usp-list{gap:11px;margin-top:20px;}
  .usp{font-size:14.5px;gap:12px;}
  .price-card{padding:22px 18px;border-radius:16px;margin-inline:4px;
    background:linear-gradient(160deg,rgba(8,28,55,.42),rgba(5,18,38,.34));
    backdrop-filter:blur(9px) saturate(120%);-webkit-backdrop-filter:blur(9px) saturate(120%);}
  .price-card.featured{background:linear-gradient(170deg,rgba(15,61,110,.42),rgba(7,31,59,.34));}
  .price-card h4{font-size:17px;margin-bottom:13px;padding-bottom:9px;}
  .price-card ul{gap:10px;}
  .price-card li{font-size:13.5px;}
  .section{padding:clamp(52px,12vw,80px) clamp(16px,5vw,24px);}
  .section-head{margin-bottom:38px;}
}
@media(max-width:480px){
  .nav{padding:14px 18px;}
  .nav-brand{font-size:17px;letter-spacing:1px;}
  .nav-cta{padding:7px 13px;}
  .lang-btn{padding:7px 11px;}
}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;filter:none;transition:none;animation:none;}
  [data-magnetic]{transform:none!important;}
  .dust,.scroll-hint span::after{display:none;}
  html{scroll-behavior:auto;}
  .interior{opacity:1;}
}