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

:root{
  /* Glas-Transparenz responsiv: Desktop dezent (Hintergrund scheint nur leicht durch,
     Inhalt bleibt scharf/lesbar). Mobil etwas transparenter — nie übertrieben. */
  --g1:.66; --g2:.56;      /* Standard-Glasbox (Fill-Alpha oben/unten) */
  --gf1:.60; --gf2:.50;    /* Featured/Premium (Navy-Variante) */
  --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;}
/* overflow-x gehört auf html, nicht nur auf body: liegt es allein auf body,
   scrollt der Viewport trotzdem seitwärts (hier waren es 331 px, verursacht vom
   geschlossenen Menü-Panel rechts außerhalb). „clip" statt „hidden", weil hidden
   auf html die klebenden Elemente (position:sticky) außer Kraft setzt. */
html{scroll-behavior:smooth;overflow-x:clip;}
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:-2;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:0;width:100%;height:100%;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%);}

.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 ============ */
/* ⚠️ Der Innenabstand ist ABSICHTLICH in beiden Zuständen gleich (11 px) — das sieht nach
   einem verlorenen Wert aus, ist aber der Ruckel-Fix. Vorher lief `padding` von 18 px auf
   11 px, und zwar als Übergang: Chrome muss eine Layout-Eigenschaft dann 350 ms lang in
   JEDEM Bild neu berechnen — genau in dem Moment, in dem der Besucher zu scrollen anfängt
   und die Palast-Szene ohnehin schon läuft. Verboten nach T1 (Hosting & Technik) und R11
   (Webdesign & Animation): animiert wird nur transform/opacity/filter.
   Die luftigere Optik ganz oben entsteht jetzt über ein Verschieben der Inhalte
   (`--nav-lift`) — reines transform, läuft im Compositor.
   Warum die KINDER verschoben werden und nicht die Leiste selbst: Ein transform auf `.nav`
   würde ihren Hintergrund mitnehmen, und während des Übergangs bliebe oben am Bildrand ein
   heller Streifen stehen. Im Zustand `.scrolled` steht der Versatz auf 0 — die Leiste sieht
   dort exakt aus wie zuvor. */
.nav{--nav-lift:7px;
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:11px clamp(20px,5vw,56px);
  transition:background .35s,backdrop-filter .35s,box-shadow .35s;}
.nav > *{transition:transform .35s;}
.nav:not(.scrolled) > *{transform:translateY(var(--nav-lift));}
.nav.scrolled{background:rgba(7,31,59,.72);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  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;}
/* Der geschlossene Umschalter nennt die Sprache beim Namen. Eine Flagge allein
   erkennt niemand zuverlässig — 🇦🇪 und 🇸🇦 sind auf 16px kaum zu unterscheiden,
   und wer Georgisch sucht, sucht „ქართული", nicht ein rot-weißes Rechteck. */
.lang-btn .lang-name{font-size:12.5px;font-weight:600;letter-spacing:.3px;white-space:nowrap;}
.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 ============ */
/* Die Kurve (statt des Vorgabe-`ease`) ist der ganze Unterschied zwischen
   „bewegt sich" und „fühlt sich an": cubic-bezier(.22,1,.36,1) läuft schnell an
   und kommt weich zur Ruhe — derselbe Schwung, den auch das Interesse-Fenster
   (`imIn`) benutzt. Nur transform/box-shadow/background, kein Reflow (Regel 11). */
.btn{display:inline-block;padding:14px 30px;border-radius:44px;font-weight:500;font-size:15px;
  letter-spacing:.3px;cursor:pointer;
  transition:transform .32s cubic-bezier(.22,1,.36,1),box-shadow .32s cubic-bezier(.22,1,.36,1),background .25s ease;
  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,.95);border:1px solid var(--orange);color:#071f3b;font-weight:600;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 12px 30px rgba(232,133,58,.3);}
.btn-glass-orange:hover{background:var(--orange);border-color:var(--orange);transform:translateY(-3px);
  box-shadow:0 18px 40px rgba(232,133,58,.45);}
.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,var(--g1)),rgba(5,18,38,var(--g2)));
  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);}

/* ============ STANDARDS (Leistungen) ============ */
.standards{margin-top:48px;padding:clamp(28px,4vw,44px) clamp(22px,4vw,46px);border-radius:20px;
  background:linear-gradient(150deg,rgba(8,28,55,.58),rgba(5,18,38,.46));
  border:1px solid var(--line);backdrop-filter:blur(14px) saturate(125%);-webkit-backdrop-filter:blur(14px) saturate(125%);
  box-shadow:0 18px 50px rgba(0,0,0,.4);}
.standards-title{font-family:var(--serif);font-size:clamp(20px,2.4vw,27px);margin-bottom:26px;text-align:center;}
.standards-title::after{content:"";display:block;width:54px;height:2px;margin:14px auto 0;
  background:linear-gradient(90deg,transparent,var(--orange),transparent);}
.standards-list{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:16px 30px;}
.standards-list li{display:flex;align-items:flex-start;gap:14px;font-size:15px;line-height:1.45;
  color:rgba(234,240,247,.86);}
.standards-list li svg{flex:0 0 38px;width:38px;height:38px;padding:8px;border-radius:11px;
  background:linear-gradient(135deg,var(--navy),#15528f);border:1px solid rgba(207,167,86,.4);
  fill:none;stroke:var(--gold-light);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
@media(max-width:760px){.standards-list{grid-template-columns:1fr;}}

/* ============ GLASS PANELS ============ */
.glass-panel{position:relative;padding:clamp(36px,6vw,68px);border-radius:24px;
  background:linear-gradient(160deg,rgba(8,28,55,var(--g1)),rgba(5,18,38,var(--g2)));
  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 h2{font-size:clamp(28px,4.2vw,46px);margin-bottom:18px;}
.usp-head{font-family:var(--serif);font-size:15px;letter-spacing:2px;text-transform:uppercase;
  color:var(--gold-light);margin:32px 0 4px;}
.usp-list{display:flex;flex-direction:column;gap:16px;margin-top:16px;}
.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;}

/* ---- Interesse-Assistent (3 Schritte) ---- */
.intake{max-width:460px;margin:6px auto 0;text-align:left;}
.intake-dots{display:flex;gap:8px;justify-content:center;margin-bottom:22px;}
.idot{width:26px;height:4px;border-radius:99px;background:rgba(255,255,255,.16);transition:background .3s;}
.idot.is-on{background:var(--orange);}
.intake-step{border:0;padding:0;margin:0;display:none;}
.intake-step.is-active{display:block;animation:istepIn .35s ease;}
@keyframes istepIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.intake-step legend{font-family:var(--serif);font-size:19px;color:#fff;margin-bottom:16px;line-height:1.3;padding:0;}
.intake-choices{display:flex;flex-direction:column;gap:12px;}
.ichoice{display:flex;align-items:center;gap:12px;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:14px;
  padding:15px 18px;font-size:16px;color:#eaf0f7;transition:border-color .2s,background .2s,transform .15s;}
.ichoice:hover{border-color:var(--orange);background:rgba(232,133,58,.1);}
.ichoice input{accent-color:var(--orange);width:19px;height:19px;flex:none;}
.ichoice:has(input:checked){border-color:var(--orange);background:rgba(232,133,58,.16);}
.ifield{width:100%;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;margin-bottom:12px;resize:vertical;transition:border-color .2s,background .2s;}
.ifield::placeholder{color:rgba(234,240,247,.42);}
.ifield:focus{outline:none;border-color:var(--orange);background:rgba(255,255,255,.1);}
.iconsent{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--muted);line-height:1.45;cursor:pointer;margin-top:2px;}
.iconsent input{accent-color:var(--orange);width:17px;height:17px;flex:none;margin-top:2px;}
.ihoney{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none;}
.intake [hidden],.intake-panel [hidden]{display:none!important;}
.intake-nav{display:flex;gap:12px;justify-content:center;margin-top:22px;}
.intake-nav .btn{min-height:48px;}
.intake-status{min-height:20px;margin-top:12px;text-align:center;font-size:13.5px;color:var(--gold-light);}
.intake-done{text-align:center;padding:14px 0 6px;animation:istepIn .4s ease;}
.idone-check{width:58px;height:58px;margin:0 auto 16px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:30px;color:#071f3b;
  background:linear-gradient(120deg,var(--orange),#f0a05c);box-shadow:0 12px 30px rgba(232,133,58,.4);}
.intake-done h3{font-family:var(--serif);color:#fff;font-size:22px;margin:0 0 8px;}
.intake-done p{color:var(--muted);margin:0 auto;max-width:320px;}
@media(prefers-reduced-motion:reduce){.intake-step.is-active,.intake-done{animation:none;}}
/* zentrale, mittig orientierte Inhalte */
#ueber .glass-panel{text-align:center;}
#ueber .glass-panel .lead{margin-left:auto;margin-right:auto;}
.about-quote{font-family:var(--serif);font-style:italic;font-size:clamp(19px,2.6vw,26px);line-height:1.4;
  color:var(--gold-light);max-width:46ch;margin:0 auto 26px;position:relative;}
.about-quote cite{display:block;font-style:normal;font-size:.6em;letter-spacing:1px;
  color:var(--muted);margin-top:12px;}
#ueber .usp-list{align-items:stretch;max-width:560px;margin-left:auto;margin-right:auto;}
#ueber .usp{justify-content:flex-start;text-align:left;}
.usp .n{flex:0 0 32px;text-align:left;}
.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:stretch;}
.price-card{position:relative;padding:34px 28px;border-radius:18px;
  background:linear-gradient(160deg,rgba(8,28,55,var(--g1)),rgba(5,18,38,var(--g2)));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,var(--gf1)),rgba(7,31,59,var(--gf2)));
  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 h3,.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:rgba(234,240,247,.72);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;}
.pl-feats li small{display:block;color:var(--muted);font-size:12px;line-height:1.4;margin-top:2px;font-style:normal;}
.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;}}

/* ============ REFERENZEN / PORTFOLIO ============ */
.ref-page{max-width:1080px;}
.ref-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 8px;}
.ref-tab{font-family:var(--serif);font-size:13px;letter-spacing:1px;text-transform:uppercase;
  color:rgba(234,240,247,.78);border:1px solid var(--line);border-radius:40px;padding:9px 18px;
  text-decoration:none;transition:all .25s;}
.ref-tab:hover{border-color:var(--orange);color:#fff;}
.ref-tab.active{background:var(--orange);border-color:var(--orange);color:#071f3b;}
.ref-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px;}
.ref-card{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;
  background:linear-gradient(160deg,rgba(8,28,55,var(--g1)),rgba(5,18,38,var(--g2)));border:1px solid var(--line);
  backdrop-filter:blur(14px) saturate(125%);-webkit-backdrop-filter:blur(14px) saturate(125%);
  box-shadow:0 18px 44px rgba(0,0,0,.4);transition:transform .35s,border-color .35s,box-shadow .35s;text-decoration:none;}
.ref-card:hover{transform:translateY(-7px);border-color:rgba(232,133,58,.55);box-shadow:0 28px 64px rgba(0,0,0,.5);}
.ref-shot{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0a1f3c;}
.ref-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:transform .5s ease;}
.ref-card:hover .ref-shot img{transform:scale(1.05);}
.ref-cat{position:absolute;top:12px;left:12px;font-family:var(--serif);font-size:10px;letter-spacing:1.5px;
  text-transform:uppercase;color:#fff;background:rgba(7,31,59,.72);border:1px solid var(--line);
  padding:4px 10px;border-radius:30px;backdrop-filter:blur(4px);}
.ref-body{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1;}
.ref-body h3{font-family:var(--display);font-size:19px;color:#fff;margin:0 0 5px;}
.ref-body p{font-size:13.5px;line-height:1.55;color:rgba(234,240,247,.74);margin:0 0 14px;}
.ref-link{margin-top:auto;font-family:var(--serif);font-size:12.5px;letter-spacing:1px;text-transform:uppercase;
  color:var(--gold-light);display:inline-flex;align-items:center;gap:6px;}
.ref-card:hover .ref-link{color:var(--orange);}
.ref-note{margin-top:30px;font-size:13px;color:rgba(234,240,247,.55);}
@media(max-width:860px){.ref-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.ref-grid{grid-template-columns:1fr;max-width:380px;margin-inline:auto;}}

/* ============ ROEMA-LOGO (Schriftzug + abtauchender Unterstrich) ============ */
.roema-logo{display:inline-flex;flex-direction:column;align-items:stretch;line-height:1;}
.roema-logo .rl-text{font-family:var(--serif);font-size:24px;letter-spacing:1.5px;color:#fff;white-space:nowrap;}
.roema-logo .rl-text em{font-style:normal;color:var(--orange);}
.roema-logo .rl-underline{display:block;width:100%;height:13px;margin-top:3px;overflow:visible;}
.roema-logo .rl-underline path{stroke:var(--orange);stroke-width:5;fill:none;stroke-linecap:round;}

/* ============ REFERENZEN-GALERIE (Startseite) + LIGHTBOX ============ */
.ref-group-title{font-family:var(--display);font-size:clamp(17px,2.4vw,21px);color:#fff;
  margin:30px 0 14px;text-align:center;}
.ref-group-title:first-of-type{margin-top:8px;}
.ref-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:920px;margin:0 auto;}
.ref-gallery.two{grid-template-columns:repeat(2,1fr);max-width:660px;}
.ref-thumb{position:relative;display:block;padding:0;border:1px solid var(--line);border-radius:14px;
  overflow:hidden;cursor:zoom-in;background:#0a1f3c;aspect-ratio:16/10;
  box-shadow:0 12px 30px rgba(0,0,0,.34);transition:transform .35s,border-color .35s;}
.ref-thumb:hover{transform:translateY(-5px);border-color:var(--orange);}
.ref-thumb img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;}
.ref-thumb-cap{position:absolute;left:0;right:0;bottom:0;font-size:12px;color:#fff;
  background:linear-gradient(0deg,rgba(7,31,59,.92),rgba(7,31,59,0));
  padding:22px 12px 9px;text-align:left;font-weight:500;}
.ref-thumb::after{content:"\2922";position:absolute;top:10px;right:10px;
  width:30px;height:30px;display:grid;place-items:center;border-radius:50%;
  background:rgba(7,31,59,.7);color:#fff;font-size:16px;opacity:0;transition:opacity .3s;}
.ref-thumb:hover::after{opacity:1;}
.refs-more{text-align:center;margin-top:30px;}

/* ===== Referenzen-Coverflow (Swiper, alle Referenzen nebeneinander) ===== */
.ref-coverflow{max-width:1040px;margin:6px auto 0;}
.refSwiper{padding:6px 0 46px;overflow:visible;}
.refSwiper .swiper-slide{width:300px;height:auto;}
/* Slide-Karte: Caption oben, Bild darunter */
.ref-coverflow .ref-thumb{border:0;border-radius:0;background:transparent;box-shadow:none;
  width:100%;display:flex;flex-direction:column;gap:10px;transform:none;cursor:pointer;overflow:visible;}
.ref-coverflow .ref-thumb:hover{transform:none;border:0;}
.ref-coverflow .ref-thumb::after{display:none;}
.ref-slide-cap{font-family:var(--serif);font-size:12.5px;letter-spacing:.3px;color:var(--gold-light);
  text-align:center;line-height:1.35;min-height:2.7em;display:flex;align-items:center;justify-content:center;padding:0 6px;}
.ref-slide-img{display:block;width:100%;height:300px;border-radius:14px;overflow:hidden;
  border:1px solid var(--line);box-shadow:0 18px 44px rgba(0,0,0,.42);background:#0a1f3c;}
.ref-slide-img img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:transform .5s ease;}
.ref-coverflow .ref-thumb:hover .ref-slide-img img{transform:scale(1.04);}
/* Swiper-Steuerung in Brand */
.refSwiper .swiper-pagination-bullet{background:var(--gold-light);opacity:.4;}
.refSwiper .swiper-pagination-bullet-active{background:var(--orange);opacity:1;}
.refSwiper .swiper-button-prev,.refSwiper .swiper-button-next{color:var(--orange);}
@media(max-width:640px){
  /* Handy: immer 2 Referenzen nebeneinander. Swiper setzt die Breite (slidesPerView:2),
     darum width:auto + overflow:hidden (sonst ragen Nachbar-Slides sichtbar heraus). */
  .ref-coverflow{padding-inline:14px;}
  .refSwiper{overflow:hidden;padding-bottom:40px;}
  .refSwiper .swiper-slide{width:auto;}
  .ref-slide-img{height:200px;border-radius:12px;box-shadow:0 10px 26px rgba(0,0,0,.38);}
  .ref-slide-cap{font-size:10.5px;min-height:3.2em;padding:0 2px;}
  /* Pfeile bleiben auch auf dem Handy sichtbar (Wunsch Marcel 2026-07-27):
     vorher hier ausgeblendet — Wischen allein ist vielen Gästen nicht klar.
     Größe/Position dafür weiter unten im Handy-Block reduziert. */
}

/* ===== Infinite Canvas (referenzen.html) — ziehbares, nahtloses Raster ===== */
.ic-lead{text-align:center;max-width:620px;margin:2px auto 18px;font-size:14px;color:rgba(234,240,247,.7);}
.infinite-canvas{position:relative;width:100vw;margin-left:calc(50% - 50vw);height:80vh;min-height:520px;
  overflow:hidden;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:radial-gradient(120% 80% at 50% 0%,rgba(15,61,110,.14),transparent 70%);}
.infinite-canvas.is-drag{cursor:grabbing;}
/* Referenzen-Seite: Canvas transparent (cremefarbener Dot-BG scheint durch) */
/* Referenz-Galerie: professionelles Raster, Klick → Vorschau (Lightbox) */
.ref-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:24px;margin-top:14px;}
.ref-gallery .ref-thumb{display:flex;flex-direction:column;gap:9px;padding:0;border:0;background:transparent;
  box-shadow:none;cursor:pointer;text-align:left;overflow:visible;}
.ref-gallery .ref-thumb::after{display:none;}
.ref-gallery .ref-thumb .ref-slide-cap{color:#0F3D6E;min-height:auto;}
.ref-gallery .ref-thumb .ref-slide-img{box-shadow:0 14px 34px rgba(0,0,0,.28);
  transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s ease;}
.ref-gallery .ref-thumb:hover .ref-slide-img{transform:translateY(-6px);box-shadow:0 24px 50px rgba(0,0,0,.4);}
.ref-gallery .ref-thumb .ref-slide-cap{color:#0F3D6E;}

/* ===== Referenzen: Sektions-Titel ===== */
.ref-sec-title{font-family:var(--display);font-size:clamp(18px,2.6vw,24px);color:#0F3D6E;
  text-align:center;margin:38px 0 22px;letter-spacing:.4px;}
.ref-sec-title:first-of-type{margin-top:8px;}

/* ===== Referenzen als „Speisekarte": Kategorien-Leiste links + Inhalt rechts ===== */
/* Heller Creme-Grund → Schrift überall dunkel/schwarz (gut lesbar) */
.legal.ref-page{max-width:1180px;color:#161616;}
.ref-page h1,.ref-page h2,.ref-page h3,.ref-page p,.ref-page .sub{color:#161616;}
.ref-page .sub{opacity:.82;}
.ref-page .ref-print .ref-thumb .ref-slide-cap{color:#141414;}

.ref-layout{display:grid;grid-template-columns:200px 1fr;gap:clamp(22px,3.2vw,42px);align-items:start;margin:22px 0 0;}
.ref-side{position:sticky;top:74px;align-self:start;}
/* Kategorien als Glasbox mit dauerhaftem orangem Umriss + schwarzer Schrift */
.ref-side-nav{display:flex;flex-direction:column;gap:6px;padding:9px;border-radius:15px;
  background:rgba(255,255,255,.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1.5px solid var(--orange);box-shadow:0 12px 30px rgba(15,61,110,.12);}
.ref-side-nav .rtab{text-decoration:none;display:block;padding:11px 15px;border-radius:10px;color:#141414;font-weight:600;
  font-size:1rem;letter-spacing:.2px;text-decoration:none;
  transition:background .2s ease,color .2s ease,box-shadow .2s ease;}
.ref-side-nav .rtab:hover{background:rgba(232,133,58,.20);color:#141414;}
.ref-side-nav .rtab.is-active{background:var(--orange);color:#141414;box-shadow:0 4px 12px rgba(232,133,58,.42);}
.rtab:focus-visible{outline:2px solid var(--orange);outline-offset:2px;}
.ref-block{scroll-margin-top:80px;margin-bottom:clamp(34px,5vw,56px);}
.ref-block:last-child{margin-bottom:0;}
.ref-block .ref-sec-title{text-align:left;margin:0 0 20px;color:#141414;}
.ref-block .ref-devices,.ref-block .ref-print{margin-left:0;margin-right:0;}
/* Platzhalter „in Vorbereitung" — Glasbox mit orangem Umriss, dunkle Schrift */
.ref-soon{grid-column:1/-1;display:flex;align-items:center;gap:16px;
  padding:24px 26px;border:1.5px solid var(--orange);border-radius:14px;
  background:rgba(255,255,255,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#161616;}
.ref-soon__icon{font-size:26px;color:var(--orange);line-height:1;}
.ref-page .ref-soon p{margin:0;font-size:.98rem;line-height:1.5;color:#161616;}
.ref-soon strong{color:#141414;}
/* Ab Tablet-Breite: Leiste als horizontale Reiter-Bar oben → volle Breite für die Geräte */
@media(max-width:900px){
  .ref-layout{grid-template-columns:1fr;gap:16px;margin-top:14px;}
  .ref-side{position:sticky;top:52px;z-index:20;align-self:stretch;}
  .ref-side-nav{flex-direction:row;overflow-x:auto;gap:6px;padding:7px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .ref-side-nav::-webkit-scrollbar{display:none;}
  .rtab{white-space:nowrap;flex:0 0 auto;padding:9px 14px;font-size:.94rem;}
  .ref-block{scroll-margin-top:112px;}
}
/* Schmales Handy: Geräte untereinander statt nebeneinander */
@media(max-width:560px){
  .ref-devices{grid-template-columns:1fr;gap:26px;}
}

/* ===== Website-Referenz als Laptop-+-Phone-Mockup (Laptop & Phone einzeln anklickbar) ===== */
.ref-devices{display:grid;grid-template-columns:repeat(2,1fr);gap:34px clamp(22px,3vw,44px);margin:0;}
.ref-devices .dv-card{display:flex;flex-direction:column;gap:14px;text-align:center;}
.dv-card .ref-slide-cap{color:#141414;min-height:auto;justify-content:center;margin:0;font-weight:600;}
/* Gleich hoher Link-Slot über JEDER Website-Karte → Laptops bleiben bündig (MM-Slot bleibt leer) */
.dv-live{min-height:42px;display:flex;align-items:center;justify-content:center;}
/* Direkt-Link zur Live-Website (z. B. Kretsch): schwarz, mittig, ÜBER dem Gerät, oranger Umriss dauerhaft */
.ref-page .ref-live-link{text-decoration:none;align-self:center;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  margin:0;padding:8px 16px;border:1.5px solid var(--orange);border-radius:40px;
  background:rgba(255,255,255,.6);color:#141414;font-weight:600;font-size:.9rem;text-decoration:none;
  transition:background .2s ease,transform .2s ease;}
.ref-page .ref-live-link:hover{background:rgba(232,133,58,.20);transform:translateY(-1px);}
.ref-page .ref-live-link:focus-visible{outline:2px solid var(--orange);outline-offset:3px;}

.device-combo{display:block;position:relative;padding:6px 0 30px;}

/* anklickbare Geräte-Buttons: setzt die .ref-thumb-Basis zurück */
.dv-laptop,.dv-phone{appearance:none;-webkit-appearance:none;border:0;background:transparent;padding:0;
  box-shadow:none;aspect-ratio:auto;overflow:visible;cursor:zoom-in;font:inherit;color:inherit;}
.dv-laptop::after{display:none;}
.dv-laptop:focus-visible,.dv-phone:focus-visible{outline:2px solid var(--orange);outline-offset:7px;border-radius:12px;}
.dv-cam,.dv-island,.dv-notch{pointer-events:none;}

/* ---- Laptop (MacBook-Look) ---- */
.dv-laptop{display:block;position:relative;width:88%;margin:0 auto;
  transition:transform .4s cubic-bezier(.22,1,.36,1),filter .4s ease;
  filter:drop-shadow(0 18px 26px rgba(9,26,48,.24));}
.dv-laptop:hover{transform:translateY(-6px);filter:drop-shadow(0 30px 46px rgba(9,26,48,.42));}
/* Deckel: Aluminium-Rand (heller) + schwarzer Glas-Rahmen */
.dv-laptop__lid{display:block;position:relative;z-index:2;background:#0b0b0d;border-radius:10px;padding:1.7%;
  box-shadow:0 0 0 1px #3a3b40, inset 0 0 0 1px #000;}
.dv-cam{position:absolute;top:.7%;left:50%;transform:translateX(-50%);width:3px;height:3px;
  border-radius:50%;background:#222327;box-shadow:0 0 0 1px rgba(255,255,255,.09);z-index:3;}
.dv-screen{display:block;position:relative;overflow:hidden;border-radius:3px;background:#0a1f3c;}
/* Glas-Reflexion */
.dv-screen::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 33%);}
.dv-laptop .dv-screen img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center;}
/* Deck/Scharnier unter dem Screen (Aluminium, gebogene Vorderkante + Notch) */
.dv-laptop__base{display:block;position:relative;z-index:1;width:114.5%;margin:0 0 0 -7.25%;height:15px;
  background:radial-gradient(120% 150% at 50% -8%,rgba(0,0,0,.22),transparent 24%),
            linear-gradient(180deg,#f1f3f6 0%,#dce0e5 22%,#bcc1c9 62%,#cfd3d9 100%);
  border-radius:3px 3px 9px 9px / 3px 3px 30px 30px;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.85),inset 0 -2px 3px rgba(0,0,0,.16),
             0 7px 11px rgba(9,26,48,.24);}
.dv-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:15%;height:6px;
  background:linear-gradient(180deg,#b3b8c0,#9aa0aa);border-radius:0 0 9px 9px;
  box-shadow:inset 0 -1px 1px rgba(0,0,0,.22);}

/* ---- Phone (überlappt unten rechts, wie im Referenzbild) ---- */
.dv-phone{display:block;position:absolute;right:0;bottom:0;width:24%;z-index:3;
  background:#0b0b0d;border-radius:13px;padding:0.5%;
  box-shadow:0 0 0 1px #2c2d31, 0 16px 26px rgba(9,26,48,.36);
  transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s ease;}
.dv-phone:hover{transform:translateY(-6px);box-shadow:0 0 0 1px #2c2d31, 0 26px 38px rgba(9,26,48,.48);}
/* Seitentaste */
.dv-phone::after{content:"";position:absolute;right:-2px;top:30%;width:2px;height:13%;border-radius:2px;
  background:#2b2c31;opacity:1;}
.dv-island{position:absolute;top:4px;left:50%;transform:translateX(-50%);width:26%;height:5px;
  border-radius:5px;background:#000;z-index:3;}
.dv-phone .dv-screen{border-radius:12px;}
.dv-phone .dv-screen::after{background:linear-gradient(125deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 30%);}
.dv-phone .dv-screen img{display:block;width:100%;aspect-ratio:9/19.5;object-fit:cover;object-position:top center;}

/* Print & Speisekarten: gewohnter Karten-Look */
.ref-print{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:24px;
  max-width:920px;margin:0 auto;}
.ref-print .ref-thumb{display:flex;flex-direction:column;gap:9px;padding:0;border:0;background:transparent;
  box-shadow:none;cursor:pointer;text-align:left;overflow:visible;aspect-ratio:auto;}
.ref-print .ref-thumb::after{display:none;}
.ref-print .ref-thumb:hover{transform:none;border:0;}
.ref-print .ref-thumb .ref-slide-cap{color:#0F3D6E;min-height:auto;}
.ref-print .ref-thumb .ref-slide-img{box-shadow:0 14px 34px rgba(0,0,0,.28);
  transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s ease;}
.ref-print .ref-thumb:hover .ref-slide-img{transform:translateY(-6px);box-shadow:0 24px 50px rgba(0,0,0,.4);}

@media(max-width:720px){
  .ref-devices{grid-template-columns:1fr;gap:8px;max-width:430px;}
  .dv-laptop{width:84%;}
  .dv-phone{width:25%;right:0;}
  .ref-print{grid-template-columns:1fr 1fr;gap:14px;}
}
.ref-page .infinite-canvas{background:none;border-color:rgba(15,61,110,.12);}
/* Vollflächige Referenz-Leinwand: keine Kopfzeile/Text, nur Canvas + Zurück-Knopf oben */
.ref-page--full{max-width:none;padding:0;margin:0;}
.ref-page--full .infinite-canvas{height:calc(100vh - 40px);min-height:460px;border-top:none;margin-top:0;}
/* Obere Leiste stark verschlanken (mehr als halbiert), damit sie kaum stört */
body:has(.ref-page--full) .legal-top{padding:5px clamp(14px,4vw,32px);}
body:has(.ref-page--full) .legal-top .nav-brand{font-size:15px;letter-spacing:1px;}
body:has(.ref-page--full) .legal-top .legal-back{font-size:12px;padding:4px 12px;}
.ref-page .ic-item .ref-slide-cap{color:#0F3D6E;}
.ref-page .ic-hint{color:#0F3D6E;background:rgba(255,255,255,.7);border-color:rgba(15,61,110,.18);}
.ic-viewport{position:absolute;inset:0;}
.ic-tile{position:absolute;top:0;left:0;will-change:transform;}
.ic-item{position:absolute;top:0;left:0;padding:0;border:0;background:transparent;box-shadow:none;
  display:flex;flex-direction:column;gap:8px;cursor:pointer;overflow:visible;transform:none;}
.ic-item::after{display:none;}
.ic-item:hover{transform:none;border:0;}
.ic-item .ref-slide-img{box-shadow:0 16px 40px rgba(0,0,0,.42);transition:transform .4s ease,box-shadow .4s ease;}
.ic-item:hover .ref-slide-img{transform:translateY(-4px);box-shadow:0 24px 56px rgba(0,0,0,.5);}
.ic-item .ref-slide-cap{min-height:auto;pointer-events:none;}
.ic-hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:4;
  font-family:var(--serif);font-size:11px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--gold-light);background:rgba(7,31,59,.6);border:1px solid var(--line);
  padding:6px 14px;border-radius:999px;backdrop-filter:blur(6px);pointer-events:none;}
@media(hover:none){.ic-hint{content:"";}}

.lightbox{position:fixed;inset:0;z-index:1000;display:none;flex-direction:column;align-items:center;
  justify-content:flex-start;gap:10px;background:rgba(3,12,26,.93);backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);padding:58px 16px 18px;}
.lightbox.open{display:flex;}
.lb-stage{position:relative;width:min(900px,94vw);max-height:84vh;overflow-y:auto;overflow-x:hidden;
  border-radius:10px;background:#0a1f3c;box-shadow:0 30px 80px rgba(0,0,0,.6);-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;}
.lb-stage img{display:block;width:100%;height:auto;}
.lb-stage iframe{display:block;width:100%;height:84vh;border:0;background:#fff;}
/* Scrollbare Website-Vorschau (ganze Website im kleinen Feld, im iframe scrollbar) */
.lb-site-wrap{position:relative;width:100%;height:80vh;border-radius:10px;overflow:hidden;background:#fff;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);}
/* 9:16 Hochformat-Frame (Handy-Vorschau), zentriert */
.lb-site-wrap.lb-site-portrait{width:auto;height:80vh;aspect-ratio:9/16;max-width:94vw;margin-inline:auto;}
.lb-stage .lb-site{display:block;width:100%;height:100%;border:0;background:#fff;}
.lb-stage > * + *{margin-top:10px;}
.lb-pdf-open{display:block;text-align:center;padding:11px 18px;border-radius:30px;font-size:14px;font-weight:600;
  color:#071f3b;background:var(--orange);text-decoration:none;letter-spacing:.3px;}
.lb-pdf-open:hover{background:#f0a05c;}
.lb-watermark{position:fixed;inset:0;z-index:1002;pointer-events:none;display:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='170'%3E%3Ctext%20x='12'%20y='100'%20transform='rotate(-28%20150%2085)'%20font-family='Georgia,serif'%20font-size='27'%20fill='%23ffffff'%20fill-opacity='0.26'%3ERoema%20Design%3C/text%3E%3C/svg%3E");
  background-repeat:repeat;}
.lightbox.wm .lb-watermark{display:block;}
.lb-cap{flex:0 0 auto;text-align:center;color:rgba(234,240,247,.85);
  font-size:13px;font-family:var(--serif);letter-spacing:1px;padding:2px 12px;}
.lb-close{position:fixed;top:14px;right:18px;z-index:1003;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line);background:rgba(7,31,59,.85);color:#fff;font-size:26px;line-height:1;
  cursor:pointer;display:grid;place-items:center;transition:background .25s,border-color .25s;}
.lb-close:hover{background:var(--orange);border-color:var(--orange);color:#071f3b;}
.lb-hint{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:1003;font-size:11px;
  letter-spacing:1px;text-transform:uppercase;color:rgba(234,240,247,.6);pointer-events:none;}
@media(max-width:640px){
  .ref-gallery,.ref-gallery.two{grid-template-columns:1fr 1fr;gap:10px;}
}

/* ============ FOOTER ============ */
.footer{background:rgba(4,16,33,.85);border-top:none;
  backdrop-filter:blur(10px) saturate(120%);-webkit-backdrop-filter:blur(10px) saturate(120%);
  padding:56px clamp(20px,5vw,56px) 0;margin-top:40px;
  position:relative;overflow:hidden;box-shadow:inset 0 1px 1px rgba(255,255,255,.1);}
/* Liquid-Glass: leuchtender Verlaufs-Rahmen (oben/unten hell, Mitte weich) */
.footer::before{content:"";position:absolute;inset:0;padding:1.4px;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(255,255,255,.45) 0%, rgba(255,255,255,.15) 20%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
    rgba(255,255,255,.15) 80%, rgba(255,255,255,.45) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;}
.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;}
.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;}
}
@media (prefers-reduced-motion: reduce){body:has(.legal)::before,body:has(.legal)::after{animation:none;opacity:1;transform:scale(1);}}

/* ===== Referenzen-Seite: freundlicher, cremefarbener Dot-Pattern (kein Gitter,
   keine Animation) — Punkte faden zu den Rändern aus, cleaner Look ===== */
body:has(.ref-page){background:#f6efe1;overflow-x:hidden;}
body:has(.ref-page)::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:radial-gradient(rgba(15,61,110,.16) 1.4px,transparent 1.6px);
  background-size:26px 26px;background-position:0 0;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 40%,#000 30%,transparent 78%);
  mask-image:radial-gradient(120% 100% at 50% 40%,#000 30%,transparent 78%);
  animation:none;transform:none;opacity:1;
}
body:has(.ref-page)::after{display:none;content:none;animation:none;}
body:has(.ref-page){background:#f6efe1;}
.ref-page .ic-lead{color:#4a5563;}
.ref-page .legal-top,.ref-page .legal-back,.ref-page .nav-brand{color:#1f2937;}

.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;}


/* ============ 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;}
.pk-tiers.pk-tiers-single{grid-template-columns:1fr;}
@media(max-width:640px){.pk-tiers{grid-template-columns:1fr;}}
.pk-tier{background:linear-gradient(160deg,rgba(8,28,55,var(--g1)),rgba(5,18,38,var(--g2)));border:1px solid var(--line);
  border-radius:18px;padding:28px 26px;backdrop-filter:blur(14px) saturate(130%);-webkit-backdrop-filter:blur(14px) saturate(130%);
  position:relative;}
.pk-tier.premium{background:linear-gradient(170deg,rgba(15,61,110,var(--gf1)),rgba(7,31,59,var(--gf2)));
  border-color:rgba(207,167,86,.5);box-shadow:0 20px 50px -24px rgba(0,0,0,.65);}
/* Cursor-Spotlight: „Licht ums Preis" — leuchtender Rahmen folgt dem Zeiger */
.pk-tier::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,-40%),
    rgba(255,255,255,.95) 0%, rgba(207,167,86,.55) 28%, rgba(207,167,86,0) 60%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .35s ease;pointer-events:none;}
.pk-tier:hover::after{opacity:1;}
@media(hover:none){.pk-tier::after{display:none;}}
/* Cursor-Shimmer für ALLE Glasboxen (leuchtender Rahmen folgt dem Zeiger, JS setzt --mx/--my) */
.card,.price-card,.glass-panel,.ref-card,.pk-band{position:relative;}
.card::after,.price-card::after,.glass-panel::after,.ref-card::after,.pk-band::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,-40%),
    rgba(255,255,255,.9) 0%, rgba(207,167,86,.5) 28%, rgba(207,167,86,0) 60%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .35s ease;pointer-events:none;z-index:3;}
.card:hover::after,.price-card:hover::after,.glass-panel:hover::after,.ref-card:hover::after,.pk-band:hover::after{opacity:1;}
@media(hover:none){.card::after,.price-card::after,.glass-panel::after,.ref-card::after,.pk-band::after{display:none;}}
.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;}
/* Anker-Preis: alter (durchgestrichener) Preis über dem neuen */
/* Anker-Preis: gleiche Serif-Schrift wie die 499, hell (Richtung Weiß), Streichlinie in derselben Farbe (nicht orange) */
.pk-was{font-family:var(--serif);font-size:26px;font-weight:500;color:rgba(234,240,247,.72);
  text-decoration:line-through;text-decoration-thickness:2px;line-height:1;margin-bottom:2px;}
.pl-old{color:rgba(234,240,247,.72);text-decoration:line-through;font-weight:400;}
.price-card li b s.was,.was{font-family:var(--serif);color:rgba(234,240,247,.72);text-decoration:line-through;
  text-decoration-thickness:1.5px;font-weight:500;font-size:.92em;margin-right:5px;}
.pk-feats{margin-top:18px;}
.pk-tier .pk-feats{grid-template-columns:1fr;}
/* Dezente Variante: Mischung aus Premium (Navy-Tint, Gold-Rand) und Einfacher Auftritt (ruhiger Tag, kleiner Preis) */
.pk-tier.pk-soft{background:linear-gradient(165deg,rgba(11,40,74,.5),rgba(6,22,44,.5));
  border-color:rgba(207,167,86,.24);box-shadow:0 16px 40px -26px rgba(0,0,0,.5);}
.pk-tier.pk-soft .pk-tag{background:rgba(207,167,86,.1);color:var(--gold-light);border-color:rgba(207,167,86,.28);}
.pk-tier.pk-soft .pk-price{font-size:27px;color:#fff;}
.pk-tier.pk-soft .pk-price .from{font-size:13px;color:rgba(234,240,247,.55);font-weight:500;}
/* Bands (Print / Hosting / Sichtbarkeit) */
.pk-band{background:linear-gradient(160deg,rgba(8,28,55,var(--g1)),rgba(5,18,38,var(--g2)));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;}
/* Hosting-Block (breiter Block mit Stichpunkten) */
.hosting-block{display:block;}
.hosting-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:4px;}
.hosting-head .pk-price{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--gold-light);}
.hosting-head .pk-price .from{font-size:.62em;color:rgba(234,240,247,.72);font-weight:400;}
.hosting-feats li strong{color:#fff;}
.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:rgba(234,240,247,.72);font-weight:400;}

/* ============ RESPONSIVE ============ */
@media(max-width:860px){
  .nav-links{gap:12px;font-size:13.5px;}
  /* Mobil: alle Nav-Links (auch Kontakt-CTA) verschwinden → steckt komplett im Burger-Menü */
  .nav-links a{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: deutlich kleiner & transluzenter, plus
   seitlich Luft (margin) — sonst verschluckt das Glas Hintergrund-Foto &
   Zoom-/Gitter-Effekte. Ziel: Karten schweben ÜBER dem Bild, geben es frei. */
/* ===== TABLET (641–900px): leichtere Glas-Optik + zentriert, schmaler ===== */
@media(min-width:641px) and (max-width:900px){
  .section{padding:clamp(54px,9vw,76px) clamp(40px,8vw,64px);}
  .cards,.price-grid{max-width:600px;margin-inline:auto;}
  /* Tablet = Desktop-Transparenz (dezent), nur leichtere Glas-Optik */
  .glass-panel{max-width:640px;margin-inline:auto;
    backdrop-filter:blur(8px) saturate(115%);-webkit-backdrop-filter:blur(8px) saturate(115%);}
  .card,.price-card{
    backdrop-filter:blur(8px) saturate(115%);-webkit-backdrop-filter:blur(8px) saturate(115%);}
}
@media(max-width:640px){
  /* Mobil: Glasboxen etwas transparenter (Foto/Gitter scheint mehr durch),
     aber weiterhin solide & professionell — nur die Fill-Alphas werden gesenkt,
     Inhalt bleibt scharf/lesbar. */
  :root{ --g1:.47; --g2:.39; --gf1:.44; --gf2:.36; }
  .section{padding:clamp(44px,9vw,64px) clamp(14px,4vw,20px);}
  .section-head{margin-bottom:28px;}
  .cards,.price-grid{gap:14px;max-width:none;margin-inline:0;}
  .card{padding:20px 18px 18px;border-radius:16px;
    backdrop-filter:blur(6px) saturate(115%);-webkit-backdrop-filter:blur(6px) saturate(115%);
    box-shadow:0 10px 30px rgba(0,0,0,.32);}
  .card h3{font-size:18px;margin-bottom:7px;}
  /* Leistungs-Kacheln: auf dem Handy höchstens zwei Zeilen Beschreibung.
     Ungekürzt steht hier ein Absatz mit vierzig Wörtern in einem Glaskasten —
     daran scrollt der Leser vorbei, ohne ein Wort davon gelesen zu haben.
     Die Überschrift der Kachel trägt die Aussage, der Satz nur den Beleg. */
  .card p{font-size:13px;margin-bottom:12px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;line-height:1.45;}
  .card-icon{width:44px;height:44px;margin-bottom:12px;}
  .card-num{font-size:14px;}
  .glass-panel{padding:22px 18px;border-radius:18px;max-width:none;margin-inline:0;
    backdrop-filter:blur(7px) saturate(115%);-webkit-backdrop-filter:blur(7px) saturate(115%);
    box-shadow:0 12px 36px rgba(0,0,0,.34);}
  .glass-panel h2{font-size:clamp(23px,6.5vw,30px);margin-bottom:10px;}
  .glass-panel .lead{font-size:14px;}
  /* Handy: klarer Absatz zwischen den beiden Über-uns-Absätzen */
  #ueber .glass-panel .lead + .lead{margin-top:15px;}
  .usp-list{gap:10px;margin-top:18px;}
  .usp{font-size:14px;gap:11px;}
  .price-card{padding:18px 16px;border-radius:16px;
    backdrop-filter:blur(6px) saturate(115%);-webkit-backdrop-filter:blur(6px) saturate(115%);
    box-shadow:0 10px 30px rgba(0,0,0,.3);}
  .price-card h4{font-size:16px;margin-bottom:12px;padding-bottom:8px;}
  .price-card ul{gap:9px;}
  .price-card li{font-size:13px;}
}
/* Sehr schmale Phones: nur minimal leichtere Glas-Optik (Transparenz via :root-Vars, nicht übertrieben) */
@media(max-width:430px){
  .card,.glass-panel,.price-card{
    backdrop-filter:blur(5px) saturate(112%);-webkit-backdrop-filter:blur(5px) saturate(112%);}
}
@media(max-width:480px){
  /* Handy: gleicher Umbau wie oben. Der Versatz ist hier kleiner, weil die Leiste vorher
     nur von 14 px auf 11 px schrumpfte. Der seitliche Abstand bleibt jetzt konstant bei
     18 px — vorher sprang er beim Scrollen auf 24 px (clamp), was zusätzlich Layout kostete
     und die Leiste beim Scrollen sichtbar zucken ließ. */
  .nav{--nav-lift:3px;padding:11px 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;}
  /* Die Kopfzeile schaltet ihren Zustand jetzt hart um statt weich zu gleiten —
     der Versatz `--nav-lift` bleibt, er ist Layout, keine Bewegung. */
  .nav,.nav > *{transition:none;}
}

/* ============ ÜBER UNS: Weiterlesen-Collapse ============ */
/* ⚠️ Vorher lief das über den 0fr→1fr-Grid-Trick. Der klappte hier NIE auf:
   die Zeile blieb in jeder Track-Variante (1fr, auto, max-content) auf 0 px,
   der Inhalt (571 px) wurde von overflow:hidden abgeschnitten. Gemessen am
   30.07.2026 — als display:block ergab derselbe Container sofort 571 px.
   Darum jetzt max-height: unempfindlich, funktioniert überall. Der Deckel liegt
   bewusst weit über dem Inhalt, sonst schneidet er in anderen Sprachen ab. */
.about-more{display:block;max-height:0;overflow:hidden;
  transition:max-height .55s cubic-bezier(.22,1,.36,1);}
.about-more.open{max-height:1600px;}
.about-more-inner{min-height:0;}
.about-more .lead{margin-top:14px;padding-top:14px;border-top:1px solid rgba(207,167,86,.18);}
.about-toggle{display:inline-flex;align-items:center;gap:8px;margin-top:18px;cursor:pointer;
  font-family:var(--serif);font-size:12px;letter-spacing:2px;text-transform:uppercase;
  color:var(--gold-light);background:rgba(255,255,255,.06);border:1px solid var(--line);
  border-radius:999px;padding:10px 20px;transition:border-color .3s,color .3s,transform .2s;}
.about-toggle:hover{border-color:var(--gold);color:#fff;transform:scale(1.03);}
.about-toggle .chev{transition:transform .4s cubic-bezier(.22,1,.36,1);}
.about-toggle.open .chev{transform:rotate(180deg);}
@media(prefers-reduced-motion:reduce){.about-more{transition:none;}}

/* ============ LEISTUNGEN: Orbit-Rad (React-Bits-Port, vanilla) ============ */
/* Leistungen soll als EIN Bildschirm wirken: Überschrift + Orbit-Kreis zusammen sichtbar */
#leistungen{min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding-top:clamp(72px,8vh,120px);padding-bottom:clamp(36px,5vh,80px);}
#leistungen .section-head{margin-bottom:clamp(6px,1.6vh,22px);}
.orbit-stage{position:relative;width:min(480px,86vw,52vh);aspect-ratio:1;margin:clamp(22px,4vh,40px) auto 10px;}
.orbit-ring{position:absolute;inset:1.5%;border-radius:50%;border:1.5px dashed rgba(207,167,86,.3);pointer-events:none;}
.orbit-wheel{position:absolute;inset:0;transition:transform .8s cubic-bezier(.34,1.2,.4,1);will-change:transform;}
.orbit-node{position:absolute;transform:translate(-50%,-50%);padding:0;border:0;background:transparent;cursor:pointer;}
.orbit-node-inner{display:flex;flex-direction:column;align-items:center;gap:7px;
  transition:transform .8s cubic-bezier(.34,1.2,.4,1);will-change:transform;}
.orbit-dot{position:relative;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  background:rgba(8,28,55,.85);border:1px solid var(--line);box-shadow:0 10px 26px rgba(0,0,0,.4);
  transition:background .3s,border-color .3s,transform .3s;}
.orbit-dot svg{width:28px;height:28px;fill:none;stroke:var(--gold-light);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.orbit-dot em{position:absolute;top:-4px;right:-4px;width:19px;height:19px;border-radius:50%;
  font-style:normal;font-size:10px;font-weight:700;display:grid;place-items:center;
  background:rgba(234,240,247,.16);color:var(--gold-light);border:1px solid var(--line);}
.orbit-node:hover .orbit-dot{transform:scale(1.12);border-color:var(--gold);}
.orbit-node.active .orbit-dot{background:var(--orange);border-color:var(--orange);transform:scale(1.1);
  box-shadow:0 0 0 6px rgba(232,133,58,.18),0 12px 30px rgba(0,0,0,.45);}
.orbit-node.active .orbit-dot svg{stroke:#071f3b;}
.orbit-node.active .orbit-dot em{background:#fff;color:var(--orange);border-color:transparent;}
.orbit-node-label{font-size:11px;letter-spacing:.4px;white-space:nowrap;color:rgba(234,240,247,.75);
  background:rgba(7,31,59,.72);border:1px solid var(--line);border-radius:8px;padding:3px 9px;
  transition:background .3s,color .3s,transform .3s;}
.orbit-node.active .orbit-node-label{background:var(--orange);color:#071f3b;font-weight:600;transform:scale(1.05);}
.orbit-center{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);
  width:62%;aspect-ratio:1;border-radius:50%!important;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:9%;z-index:5;
  transition:opacity .18s ease,transform .18s ease;}
.orbit-center.swap{opacity:0;transform:translate(-50%,-50%) scale(.94);}
.orbit-center::before{content:"";position:absolute;inset:9px;border-radius:50%;
  border:1px dashed rgba(207,167,86,.18);pointer-events:none;}
.orbit-tag{font-family:var(--serif);font-size:10.5px;letter-spacing:2.4px;text-transform:uppercase;color:var(--gold-light);margin-bottom:7px;}
.orbit-title{font-family:var(--display);font-size:clamp(17px,2.4vw,23px);color:#fff;margin-bottom:8px;}
.orbit-desc{font-size:clamp(11.5px,1.4vw,13.5px);line-height:1.55;color:rgba(234,240,247,.78);max-width:24ch;}
.orbit-price{margin-top:9px;font-weight:700;color:var(--orange);font-size:clamp(13px,1.6vw,15px);}
@media(max-width:640px){
  /* Die Knoten sitzen mittig AUF dem Ring (Radius ≈ 0.97 × Bühnenradius) — ihre halbe Breite
     ragt also über die Bühne hinaus. Bühne + halbe Knotenbreite muss zum Displayrand Luft lassen
     UND innen den Mittelkreis (62 % der Bühne) frei lassen. Darum Bühne & Knoten kleiner. */
  .orbit-stage{width:min(280px,78vw);}
  /* Mitte größer (68 %), damit der Beschreibungstext IM Kreis bleibt; dafür Knoten kleiner,
     sonst würden sie den größeren Mittelkreis berühren. */
  .orbit-center{width:68%;padding:8%;}
  .orbit-dot{width:40px;height:40px;}
  .orbit-dot svg{width:18px;height:18px;}
  .orbit-dot em{width:16px;height:16px;font-size:8.5px;}
  .orbit-node-inner{gap:4px;}
  /* Labels dürfen umbrechen + sind gedeckelt → ragen nicht mehr über den Block hinaus */
  .orbit-node-label{font-size:8.5px;white-space:normal;max-width:54px;text-align:center;line-height:1.2;padding:2px 5px;}
  .orbit-tag{font-size:8.5px;letter-spacing:1.6px;margin-bottom:4px;}
  .orbit-title{font-size:15px;margin-bottom:5px;}
  /* Der Mittelkreis ist auf 375px keine Textfläche: Die Desktop-Beschreibung
     füllt ihn mit fünf Zeilen und drückt Titel und Preis an den Rand. JS setzt
     hier die Kurzfassung (data-desc-m); der Deckel auf zwei Zeilen ist das Netz,
     falls eine Übersetzung doch länger ausfällt. */
  .orbit-desc{font-size:10px;line-height:1.4;max-width:none;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .orbit-price{margin-top:5px;font-size:11.5px;}
}
@media(prefers-reduced-motion:reduce){.orbit-wheel,.orbit-node-inner{transition:none;}}

/* ============ KONTAKT: zwei Blöcke nebeneinander (auch mobil) ============ */
.contact-duo{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch;width:100%;max-width:1080px;margin-inline:auto;}
.contact-duo.contact-solo{grid-template-columns:1fr;max-width:560px;}
.contact-duo .cta-panel{margin:0;max-width:none;height:100%;display:flex;flex-direction:column;}
.contact-duo .cta-panel .btn{margin-top:auto;}
/* Kurzer Reiter zum Google-Profil (CID-Link) */
.google-tab-row{display:flex;justify-content:center;margin-top:22px;}
.google-tab{display:inline-flex;align-items:center;gap:10px;min-height:46px;
  padding:0 22px;border-radius:40px;background:#fff;color:#1F2937;
  font-weight:600;font-size:.95rem;line-height:1;text-decoration:none;
  border:1px solid #E3E7EC;box-shadow:0 8px 22px rgba(9,26,48,.22);
  transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s ease;}
.google-tab:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(9,26,48,.32);}
.google-tab:focus-visible{outline:2px solid var(--orange,#E8853A);outline-offset:3px;}
.google-tab .g-mark{flex:0 0 auto;}
.google-tab .g-stars{color:#f4b400;letter-spacing:1.5px;font-size:.9rem;}
.google-tab .g-arrow{color:#5B6675;font-weight:400;}
@media(max-width:480px){.google-tab{width:100%;justify-content:center;}}
@media(max-width:640px){
  /* Handy: beide Kontaktwege untereinander (nebeneinander wurde zu eng) */
  .contact-duo{grid-template-columns:1fr;gap:14px;}
  .contact-duo .cta-panel{padding:22px 18px;}
  .contact-duo .cta-panel h2{font-size:19px;}
  .contact-duo .cta-panel .lead{font-size:13px;}
  .contact-duo .cta-panel .btn{font-size:14px;padding:13px 16px;min-height:52px;}
  .contact-duo .cf-hint{font-size:10px;}
}

/* ============ STAGGERED-MENÜ (React-Bits-Port, nur mobil sichtbar) ============ */
/* Burger = leicht oranger Knopf mit 3 Strichen (→ X beim Öffnen) */
.sm-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:12px;cursor:pointer;background:rgba(232,133,58,.16);
  border:1px solid rgba(232,133,58,.55);transition:background .3s,border-color .3s,transform .2s;}
.sm-toggle:hover{background:rgba(232,133,58,.28);}
.sm-toggle:active{transform:scale(.94);}
.sm-icon{position:relative;width:19px;height:14px;display:inline-block;}
.sm-icon-line{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:var(--orange);
  transition:transform .4s cubic-bezier(.22,1,.36,1),opacity .25s ease;}
.sm-icon-line:nth-child(1){top:0;}
.sm-icon-line:nth-child(2){top:6px;}
.sm-icon-line:nth-child(3){top:12px;}
.sm-toggle.open .sm-icon-line:nth-child(1){transform:translateY(6px) rotate(45deg);}
.sm-toggle.open .sm-icon-line:nth-child(2){opacity:0;}
.sm-toggle.open .sm-icon-line:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
.sm-wrap{position:fixed;inset:0;z-index:900;pointer-events:none;visibility:hidden;transition:visibility 0s .6s;}
.sm-wrap.open{pointer-events:auto;visibility:visible;transition:visibility 0s;}
.sm-prelayer,.sm-panel{position:absolute;top:0;right:0;height:100%;width:min(420px,100%);
  transform:translateX(105%);will-change:transform;}
.sm-prelayer-1{background:var(--orange);transition:transform .5s cubic-bezier(.22,1,.36,1);}
.sm-prelayer-2{background:#cfa756;transition:transform .5s cubic-bezier(.22,1,.36,1) .07s;}
.sm-panel{background:rgba(7,31,59,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  display:flex;flex-direction:column;padding:92px 30px 30px;overflow-y:auto;
  transition:transform .6s cubic-bezier(.22,1,.36,1) .14s;}
.sm-wrap.open .sm-prelayer-1,.sm-wrap.open .sm-prelayer-2,.sm-wrap.open .sm-panel{transform:translateX(0);}
.sm-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;}
.sm-list li{overflow:hidden;}
.sm-item{position:relative;display:inline-block;font-family:var(--display);font-size:clamp(30px,8vw,44px);
  color:#fff;text-transform:uppercase;letter-spacing:-.5px;line-height:1;text-decoration:none;padding-right:1.2em;
  transform:translateY(120%) rotate(6deg);transition:transform .7s cubic-bezier(.22,1,.36,1),color .25s;}
.sm-wrap.open .sm-item{transform:translateY(0) rotate(0);}
.sm-list li:nth-child(1) .sm-item{transition-delay:.18s;}
.sm-list li:nth-child(2) .sm-item{transition-delay:.26s;}
.sm-list li:nth-child(3) .sm-item{transition-delay:.34s;}
.sm-list li:nth-child(4) .sm-item{transition-delay:.42s;}
.sm-list li:nth-child(5) .sm-item{transition-delay:.5s;}
.sm-list li:nth-child(6) .sm-item{transition-delay:.58s;}
.sm-item:hover{color:var(--orange);}
.sm-item i{position:absolute;top:.1em;right:0;font-style:normal;font-size:13px;color:var(--gold-light);}
.sm-socials{margin-top:auto;padding-top:26px;display:flex;flex-direction:column;gap:8px;
  opacity:0;transform:translateY(20px);transition:opacity .5s ease .5s,transform .5s ease .5s;}
.sm-wrap.open .sm-socials{opacity:1;transform:none;}
.sm-socials-title{font-family:var(--serif);font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--gold-light);}
.sm-social{color:rgba(234,240,247,.85);font-size:16px;}
.sm-social:hover{color:var(--orange);}
@media(max-width:860px){
  .sm-toggle{display:inline-flex;}
}
@media(prefers-reduced-motion:reduce){
  .sm-prelayer,.sm-panel,.sm-item,.sm-socials,.sm-icon{transition:none;}
}

/* ============ HAUPT-CTA-SHIMMER (Standard §18): Lichtband wandert „ab und zu" diagonal
   über die Haupt-CTAs → zieht den Blick, ohne Dauerbewegung. transform-only (Regel 11),
   6s-Zyklus, Sweep erst in den letzten ~22 %. Nur Primär-CTAs, NICHT Glas-/Ghost/Nav. */
.btn-primary,.btn-glass-orange,.legal-interesse{position:relative;overflow:hidden;}
.btn-primary::after,.btn-glass-orange::after,.legal-interesse::after{
  content:"";position:absolute;top:0;left:0;width:55%;height:100%;pointer-events:none;z-index:1;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.5),transparent);
  transform:translateX(-218%) skewX(-20deg);
  animation:btnShine 6s ease-in-out infinite;}
/* Versetzte Startzeiten, damit nicht alle Knöpfe im selben Moment blitzen —
   gleichzeitig gelesen wirkt es wie ein Bildfehler, versetzt wie Leben. */
.btn-glass-orange::after{animation-delay:3s;}
.legal-interesse::after{animation-delay:1.5s;}
@keyframes btnShine{
  0%,78%{transform:translateX(-218%) skewX(-20deg);}
  100%{transform:translateX(245%) skewX(-20deg);}}
/* Nav-/Burger-CTAs bleiben ruhig */
.nav .btn::after,.sm-wrap .btn::after{display:none;}
/* Druck-Rückmeldung NUR auf Touch: dort gibt es keinen Hover, ein Knopf ohne
   Reaktion fühlt sich tot an. Auf der Maus wäre sie wirkungslos, weil
   `data-magnetic` dort eine Inline-`transform` setzt, die jede Regel aus dem
   Stylesheet schlägt — deshalb gar nicht erst versuchen. */
@media(hover:none){
  .btn:active,.legal-interesse:active{transform:scale(.97);}}
@media(prefers-reduced-motion:reduce){
  .btn-primary::after,.btn-glass-orange::after,.legal-interesse::after{animation:none;opacity:0;}
  .btn,.legal-interesse{transition:none;}
  .btn:hover,.btn:active,.legal-interesse:hover,.legal-interesse:active{transform:none;}}

/* ============ MOBILE: alle Texte eine Stufe kleiner, Hero-H1 zwei Stufen ============ */
@media(max-width:640px){
  .hero h1{font-size:clamp(27px,8vw,36px);margin-bottom:16px;letter-spacing:-.5px;}
  .hero-sub{font-size:clamp(13px,3.6vw,15px);}
  .kicker{font-size:11.5px;}
  .section-head h2{font-size:clamp(24px,6.5vw,34px);}
  .section-head p,.lead,.card p,.usp,p{font-size:13px;}
  .glass-panel h2{font-size:clamp(20px,5.8vw,26px);}
  .btn{font-size:13px;}
  .orbit-title{font-size:clamp(15px,4.4vw,19px);}
  .orbit-desc{font-size:11px;}
  .pk-h,.price-card h4{font-size:15px;}
  .pk-price{font-size:clamp(26px,8vw,32px);}
  /* Hero-Glaskasten kompakter → mehr Wolken-/Hintergrund sichtbar */
  .hero-arch{padding:40px 20px;max-width:none;margin-inline:14px;}
  .hero-inner{gap:0;}
  .hero-actions{margin-top:24px;flex-wrap:nowrap;gap:10px;}
  /* Beide Hero-Knöpfe teilen sich EINE Zeile. Gestapelt fressen sie den halben
     ersten Bildschirm und der zweite wirkt wie ein Nachgedanke. Damit das in
     jeder Sprache hält, tragen die Knöpfe mobil die Kurzbeschriftung
     (.lbl-kurz) und brechen nicht um — ein Umbruch würde den Knopf höher
     machen als die Zeile daneben und die Reihe schief aussehen lassen. */
  /* „1 1 auto" statt „1 1 0": Bei exakt halbierter Zeile bleiben auf 375px nur
     132px Text je Knopf — das polnische „Jestem zainteresowany" braucht 143px und
     würde abgeschnitten, weil .btn-primary für das Shimmer-Lichtband
     overflow:hidden trägt. So nimmt sich jeder Knopf, was seine Beschriftung
     braucht, und der Rest der Zeile wird gleichmäßig verteilt — beide bleiben
     nebeneinander, in jeder der 14 Sprachen. */
  .hero-actions .btn{flex:1 1 auto;min-width:0;padding:12px 8px;font-size:12px;text-align:center;white-space:nowrap;line-height:1.2;}
}

/* ── M3 · Mobile-CTA-Höhe (Webdesign & Animation Checkliste §5b) ──────────────
   Handy: Haupt-CTAs > 52px (Tap-Sicherheit) und < 64px (sonst Banner-Blindness).
   .btn ist hier inline-block → für min-height + vertikale Zentrierung nur im
   Mobile-Query auf inline-flex umstellen. Desktop bleibt unverändert. */
@media(max-width:720px){
  .btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px}
}

/* ── M3 · Kontakt-CTA-Label: Handy kurz, Desktop voll ─────────────────────────
   Die beiden Kontakt-Panels stehen bewusst auch mobil nebeneinander (~142px breit).
   Die volle Adresse bricht dort auf 4 Zeilen (84px) und reißt die M3-Obergrenze (<64px). */
.lbl-kurz{display:none}
@media(max-width:640px){
  .lbl-lang{display:none}
  .lbl-kurz{display:inline}
}

/* Interesse-Button in der Kopfleiste der Unterseiten (führt zum Formular auf der Startseite) */
/* Gleiche Kurve und gleiches Lichtband wie die grossen Haupt-CTAs (§18, weiter
   unten im Stylesheet) — es ist derselbe Knopf, nur kleiner; er darf sich nicht
   traeger anfuehlen als sein grosser Bruder auf derselben Seite. */
.legal-interesse{font-size:14px;font-weight:600;color:#071f3b;background:rgba(232,133,58,.95);
  border:1px solid var(--orange);border-radius:40px;padding:8px 16px;text-decoration:none;
  transition:background .25s ease,transform .32s cubic-bezier(.22,1,.36,1),box-shadow .32s cubic-bezier(.22,1,.36,1);
  white-space:nowrap;}
.legal-interesse:hover{background:var(--orange);transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(232,133,58,.35);}
@media(max-width:520px){.legal-interesse{font-size:13px;padding:8px 12px;}}

/* ---- Interesse-Fenster (Modal): öffnet sich per Klick, kein Scrollen zur Sektion ---- */
.intake-modal{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px;}
.intake-modal[hidden]{display:none;}
.intake-backdrop{position:absolute;inset:0;background:rgba(4,14,28,.72);backdrop-filter:blur(6px);
  animation:imFade .25s ease;}
.intake-dialog{position:relative;width:min(560px,100%);max-height:88vh;overflow-y:auto;text-align:center;
  background:linear-gradient(160deg,#0d3160,#0a2444);border:1px solid var(--line);border-radius:22px;
  padding:38px 30px 32px;box-shadow:0 30px 80px rgba(0,0,0,.55);animation:imIn .32s cubic-bezier(.22,1,.36,1);}
.intake-dialog h2{font-size:clamp(22px,3.2vw,28px);margin:6px 0 10px;}
.intake-dialog .lead{margin:0 auto 22px;max-width:400px;}
.intake-x{position:absolute;top:12px;right:14px;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid var(--line);color:#eaf0f7;font-size:24px;line-height:1;
  cursor:pointer;transition:background .2s,transform .15s;}
.intake-x:hover{background:rgba(232,133,58,.9);color:#071f3b;transform:rotate(90deg);}
@keyframes imFade{from{opacity:0}to{opacity:1}}
@keyframes imIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@media(max-width:520px){.intake-dialog{padding:34px 18px 26px;max-height:92vh;}}
@media(prefers-reduced-motion:reduce){.intake-backdrop,.intake-dialog{animation:none;}}

/* Social-Links zentriert, auf dem Handy untereinander */
.footer-social{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:center;align-items:center;}
@media(max-width:560px){.footer-social{flex-direction:column;gap:12px;}}

/* ============ HANDY-FEINSCHLIFF PREISLISTE ============
   Problem: viel Text (Premium-Website, Hosting) wirkte auf dem Handy erschlagend,
   und die Kopfleiste war zu breit für 375px („Zurück" ragte raus). */
@media(max-width:560px){
  /* Kopfleiste: beide Knöpfe passen nebeneinander */
  .legal-top{padding-left:14px;padding-right:14px;gap:8px;}
  .legal-top .nav-brand{font-size:15px;letter-spacing:1px;}
  .legal-top > div{gap:7px!important;}
  .legal-interesse{font-size:12px;padding:7px 11px;}
  .legal-back{font-size:12px;padding:7px 11px;}

  /* Ruhigere Typo: eine Stufe kleiner, engere Zeilen */
  .legal.pl-page{padding-left:16px;padding-right:16px;}
  .legal h2{font-size:19px;margin:28px 0 10px;}
  .legal .sub{font-size:12.5px;}
  .pk-tier{padding:20px 16px;}
  .pk-h{font-size:20px;margin:12px 0 2px;}
  .pk-sub{font-size:12px;margin-bottom:10px;}
  .pk-price{font-size:31px;}
  .pk-price .from{font-size:13px;}
  .pk-l{font-size:14px;}
  .pk-l small{font-size:11.5px;line-height:1.35;}
  .pl-incl{font-size:13px;line-height:1.55;}

  /* Haken weiter nach links → mehr Breite für den Text, spart Zeilen */
  .pl-feats{gap:7px 0;}
  .pl-feats li{padding-left:19px;font-size:13.3px;line-height:1.4;}
  .pl-feats li::before{width:13px;height:13px;top:3px;
    -webkit-mask-size:11px;mask-size:11px;}
  .pl-feats li small{font-size:11.5px;line-height:1.35;margin-top:1px;}
}
/* Querverlinkung Preise <-> Referenzen in der Kopfleiste (interne Verlinkung, SEO) */
.legal-quer{font-size:14px;color:var(--gold-light);border:1px solid var(--line);border-radius:40px;
  padding:8px 16px;text-decoration:none;transition:border-color .2s,color .2s;white-space:nowrap;}
.legal-quer:hover{border-color:var(--gold);color:#fff;}
@media(max-width:560px){.legal-quer{font-size:12px;padding:7px 11px;}}
@media(max-width:420px){.legal-quer{display:none;}}

/* ============ RUCKEL-FIX HANDY/TABLET: Glas-Rasterkosten deckeln ============
   Auf Touch-Geräten liegt die Glasoptik über der scroll-animierten Palast-Szene.
   Jede Glasfläche wird dabei PRO FRAME neu gerastert — 55 Flächen × jeder Frame
   ist auf Handy/Tablet die Hauptursache fürs Ruckeln (Desktop-GPUs schlucken es).
   Deckel auf 5px: der Glas-Look bleibt erkennbar, die Rasterkosten sinken stark.
   Die etwas dichteren Hintergründe halten den Text lesbar (Kontrast ≥ 4.5:1). */
@media (hover:none) and (max-width:1024px){
  .glass-panel,.card,.price-card,.ref-card,.pk-tier,.pk-band,
  .cta-panel,.intake-dialog,.nav,.sm-panel,.lang-menu,.google-tab{
    backdrop-filter:blur(5px)!important;
    -webkit-backdrop-filter:blur(5px)!important;
  }
  /* Hintergründe leicht dichter, weil weniger Blur = weniger Trennung vom Foto */
  .glass-panel,.cta-panel,.card,.pk-tier,.pk-band{
    background-color:rgba(7,26,48,.72);
  }
}

/* Nur die gerade sichtbare Szenen-Ebene als GPU-Schicht halten.
   4 dauerhafte Vollbild-Schichten kosten auf dem Handy unnötig Grafikspeicher. */
@media (hover:none){
  .bg-layer{will-change:auto;}
  .bg-layer#bg1{will-change:transform,opacity;}
}
/* Der lange „inklusive"-Punkt (Website-Karte) bleibt ruhig: etwas kleiner,
   damit die Karte neben den kurzen Karten nicht doppelt so hoch wird. */
.price-card.featured li:last-child span{font-size:13.2px;line-height:1.45;}

/* Sprachmenü: Flagge + lesbarer Ländername (reine Flaggen sind nicht erkennbar) */
.lang-menu li .lang-name{color:inherit;white-space:nowrap;}
.lang-menu li[aria-selected="true"] .lang-name{font-weight:600;}
@media (hover:none),(max-width:860px){
  .lang-menu li{min-height:44px;font-size:15px;}   /* bequem tippbar */
  .lang-menu{min-width:200px;}
}

/* „‹ Zurück" im Burger-Menü — schließt das Menü, ohne die Position zu verlieren */
.sm-back{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  min-height:44px;padding:10px 18px;margin-bottom:18px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);border-radius:40px;
  color:#fff;font-family:var(--sans);font-size:14.5px;font-weight:500;cursor:pointer;
  opacity:0;transform:translateY(-8px);
  transition:opacity .35s ease .18s,transform .35s ease .18s,background .2s,border-color .2s;}
.sm-wrap.open .sm-back{opacity:1;transform:none;}
.sm-back:hover{background:rgba(232,133,58,.9);border-color:var(--orange);color:#071f3b;}
.sm-back:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px;}
@media(prefers-reduced-motion:reduce){.sm-back{transition:none;opacity:1;transform:none;}}
/* Knöpfe auf Rechts-/Fehlerseiten nicht unterstreichen (.legal a unterstreicht
   sonst alles — gilt für Fließtext-Links, nicht für Buttons). */
.legal a.btn{text-decoration:none;}

/* ============ WEITERLESEN-STANDARD (Handy) ============
   Der Über-uns-Text ist der längste Fließtext der Startseite und steht weit
   oben. Ungekürzt sind das auf 375px rund fünfzehn Zeilen, die alles
   Interessante aus dem Bild schieben. Auf dem Handy stehen deshalb fünf Zeilen,
   den Rest holt sich, wer ihn will. Desktop bleibt unangetastet.
   Knopf und Auslauf holen ihre Farben aus den drei Variablen unten — hier die
   Roema-Palette (Orange auf Navy), nicht die einer anderen Kundenseite. */
.rm-btn{display:none;}
@media(max-width:720px){
  .rm-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;
    overflow:hidden;position:relative;}
  .rm-text.rm-open{-webkit-line-clamp:unset;overflow:visible;}
  /* weicher Auslauf statt harter Schnittkante mitten im Wort */
  .rm-text:not(.rm-open)::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:2.1em;pointer-events:none;
    background:linear-gradient(to bottom,transparent,var(--rm-fade,rgba(7,26,48,.8)));}
  .rm-btn{display:inline-block;margin:.6rem 0 0;padding:.62rem 1.05rem;
    min-height:44px;                        /* Tap-Ziel (Design-Checkliste R20) */
    border-radius:999px;border:0;cursor:pointer;
    font-family:var(--sans);font-size:.86rem;font-weight:600;letter-spacing:.02em;
    /* satte Füllung + dunkler Text = Kontrast ≥ 4,5:1 (Design-Checkliste R22) */
    background:var(--rm-btn-bg,rgba(232,133,58,.95));
    color:var(--rm-btn-fg,#071f3b);
    transition:transform .18s cubic-bezier(.22,1,.36,1),opacity .18s ease;}
  .rm-btn[hidden]{display:none;}
  .rm-btn:active{transform:scale(.97);}
  .rm-btn:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px;}
}
@media(prefers-reduced-motion:reduce){.rm-btn{transition:none;}}
:root{--rm-btn-bg:rgba(232,133,58,.95);--rm-btn-fg:#071f3b;--rm-fade:rgba(7,26,48,.8);}

/* ============ REFERENZEN-KARUSSELL: eigene Pfeile ============
   Swipers Standardpfeile kommen aus einer Symbolschrift als data:-URL,
   die unsere Inhaltsrichtlinie (font-src 'self') blockiert → es erschien
   das nackte Wort „prev"/„next". Darum eigene SVG-Pfeile. */
.ref-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:12;
  width:48px;height:48px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;cursor:pointer;
  background:rgba(7,26,48,.62);border:1px solid rgba(207,167,86,.45);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .22s,border-color .22s,transform .22s;padding:0;}
.ref-nav svg{fill:none;stroke:var(--gold-light);stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .22s;}
.ref-nav:hover{background:var(--orange);border-color:var(--orange);
  transform:translateY(-50%) scale(1.08);}
.ref-nav:hover svg{stroke:#071f3b;}
.ref-nav:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px;}
.ref-nav.swiper-button-prev{left:6px;}
.ref-nav.swiper-button-next{right:6px;}
/* Swipers Schrift-Pfeil sicher abschalten (sonst doppelt) */
.ref-nav::after,.ref-nav::before{display:none!important;content:none!important;}
/* Am Ende ausgegraut statt unsichtbar — man sieht, dass es weitergeht */
.ref-nav.swiper-button-disabled{opacity:.35;pointer-events:none;}

/* Handy: kleiner und näher an den Rand, damit sie das Bild nicht verdecken */
@media(max-width:640px){
  .ref-nav{width:40px;height:40px;}
  .ref-nav svg{width:18px;height:18px;}
  .ref-nav.swiper-button-prev{left:2px;}
  .ref-nav.swiper-button-next{right:2px;}
}
@media(prefers-reduced-motion:reduce){.ref-nav{transition:none;}}

/* ===== Chrome-Bremse lösen (gemessen 30.07.2026) ================================
   Safari rendert `backdrop-filter` im System-Compositor und merkt davon nichts.
   Chrome/Blink rastert JEDE Glasfläche in JEDEM Bild neu — und auf dieser Seite
   liegen die großen Flächen über den Hero-Bildern, die beim Scrollen gezoomt
   werden. Der Hintergrund ändert sich also pro Bild, und 644.000 Pixel Glas
   müssen 60-mal je Sekunde neu berechnet werden. Genau das fühlt sich beim
   Scrollen „nicht flüssig" an.

   `perf-blink.js` setzt `html.is-blink` und halbiert die Radien bereits über das
   CSSOM. Was fehlte, waren diese Regeln — ohne sie wirkt das Skript nur halb.
   Safari und Firefox bleiben unberührt und behalten das volle Glas.
   =============================================================================== */

/* Footer und Menüpanel sind ohnehin fast deckend — das Glas dahinter sieht
   niemand, es kostet nur Rechenzeit. */
.is-blink .footer{backdrop-filter:none;-webkit-backdrop-filter:none;
  background:rgba(4,16,33,.96);}
.is-blink .sm-panel{backdrop-filter:none;-webkit-backdrop-filter:none;
  background:rgba(7,31,59,.99);}

/* Die großen Glasflächen behalten ihren Charakter, werden aber leichter:
   weniger Unschärfe, dafür eine leichte Tönung — damit der Text weiterhin
   sicher über 4,5:1 liegt (Design-Checkliste R24). */
.is-blink .glass-panel{backdrop-filter:blur(5px) saturate(1.15);
  -webkit-backdrop-filter:blur(5px) saturate(1.15);
  background:rgba(7,31,59,.30);}
.is-blink .hero-arch{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}

/* Die Kopfzeile ist die teuerste Glasfläche der ganzen Seite: bildschirmbreit, fest am
   oberen Rand — und sie liegt über den Palast-Fotos, die beim Scrollen zoomen. Ihr
   Hintergrund ändert sich also in JEDEM Bild, es lässt sich nichts zwischenspeichern.
   `saturate(140%)` ist dabei ein ZWEITER Filterdurchgang über dieselbe Fläche. In Blink
   kostet das spürbar; die etwas dichtere Tönung ersetzt die Farbanhebung optisch und
   hält den Kontrast sicher über 4,5:1 (R24). Safari/Firefox behalten das volle Glas. (T4)
   ⚠️ 6px steht hier bewusst als fester Wert: perf-blink.js halbiert Radien über das
   CSSOM und deckelt bei 6px — ein größerer Wert würde hier nur wieder halbiert. */
.is-blink .nav.scrolled{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  background:rgba(7,31,59,.86);}

/* ⚠️ Der Sprach-Loader ist unsichtbar (`visibility:hidden`), blieb aber mit
   911.000 px² Unschärfe dauerhaft im Compositor — eine Vollbild-Glasfläche, die
   niemand je sieht und die trotzdem bei jedem Bild mitgerechnet wurde.
   `display:none` wäre falsch: dann ginge das Einblenden verloren. Es genügt,
   dem unsichtbaren Zustand die Unschärfe zu nehmen. */
.lang-loader:not(.show){backdrop-filter:none;-webkit-backdrop-filter:none;}

/* ⚠️ Dieselbe Falle, eine Zeile weiter: Das Sprachmenü hängt auf JEDER Seite fertig im
   Markup und ist geschlossen nur über `opacity:0;visibility:hidden` weggeschaltet — nicht
   `display:none`. Damit blieb eine 188 px breite Glasfläche mit blur(16px) dauerhaft im
   Compositor und wurde bei jedem Bild mitgerechnet, obwohl sie niemand sieht. Auffällig
   wird das genau beim Scrollen: Die Fläche liegt in der fixen Kopfzeile über den
   Palast-Fotos, deren Hintergrund sich pro Bild ändert — also kein Cache möglich.
   `display:none` wäre falsch, dann ginge das weiche Aufklappen verloren; es genügt, dem
   geschlossenen Zustand die Unschärfe zu nehmen. (Regel T4 Hosting-Checkliste.) */
.lang-menu:not(.open){backdrop-filter:none;-webkit-backdrop-filter:none;}

/* ⚠️ `will-change` ist eine VORWARNUNG, kein Dauerzustand. Jedes markierte
   Element bekommt eine eigene Compositor-Ebene; hier waren es 32 gleichzeitig.
   Ein Reveal, das gelaufen ist, braucht seine Ebene nicht mehr. */
.reveal.in,[data-reveal].in,[data-reveal].is-in{will-change:auto;}

/* ═══ Rechtsweg-Fusszeile auf den Unterseiten ═══════════════════════
   Die Zeile mit Startseite · Impressum · Datenschutz steht seit dem
   04.08.2026 auf impressum/datenschutz/preisliste/referenzen und
   referenzen-print — aber die drei Klassen hatten KEINE einzige Regel.
   Ergebnis auf den cremefarbenen Referenz-Seiten: die Links erbten
   body{color:#eaf0f7} und standen fast weiss auf #f6efe1. Gemessener
   Kontrast 1,003:1 — der Impressumslink war vorhanden und trotzdem
   unsichtbar. Das ist kein Schoenheitsfehler: § 5 DDG verlangt "leicht
   erkennbar", und Design-Checkliste §6 R24 verlangt >= 4,5:1.
   Deshalb je Untergrund eine eigene Farbe, statt einer fuer beide. */
.site-foot{margin-top:56px;padding:22px 0 30px;
  border-top:1px solid rgba(234,240,247,.14);}
.site-foot .foot__bottom{max-width:var(--maxw);margin:0 auto;
  padding:0 clamp(14px,4vw,32px);}
.site-foot .foot__legal{margin:0;font-size:14.5px;
  color:rgba(234,240,247,.72);}
.site-foot .foot__legal a{color:rgba(234,240,247,.72);
  text-decoration:none;transition:color .2s;}
.site-foot .foot__legal a:hover,
.site-foot .foot__legal a:focus-visible{color:var(--gold-light);}

/* Cremefarbene Seiten (referenzen, referenzen-print): dunkle Schrift. */
body:has(.ref-page) .site-foot{border-top-color:rgba(22,22,22,.16);}
body:has(.ref-page) .site-foot .foot__legal{color:#3d3a34;}
body:has(.ref-page) .site-foot .foot__legal a{color:#1f2937;
  text-decoration:underline;text-underline-offset:3px;}
body:has(.ref-page) .site-foot .foot__legal a:hover,
body:has(.ref-page) .site-foot .foot__legal a:focus-visible{color:#0F3D6E;}

/* Beim Drucken traegt das Papier den Kontrast, nicht der Bildschirm. */
@media print{
  .site-foot{border-top-color:#bbb;}
  .site-foot .foot__legal,
  .site-foot .foot__legal a{color:#000;}
}

/* ====== HANDY: KEINE FESTGENAGELTEN VOLLBILD-EBENEN (05.08.2026) ============
   Warum der Hintergrund am Handy beim Wischen springt und am Rechner nicht:
   Ein Handy scrollt den Inhalt auf einer eigenen, vom Hauptthread entkoppelten
   Ebene weiter — daher laeuft der Schwung nach dem Finger so weich nach. Eine
   `position:fixed`-Flaeche darf da nicht mitwandern; sie muss bei jedem Bild an
   ihren Platz zurueckgerechnet werden, und diese Korrektur kommt einen Takt zu
   spaet. Man sieht sie als Springen des Hintergrunds. Am Rechner wird im selben
   Thread gescrollt, deshalb faellt es beim Bauen nie auf.
   Zweite Ursache aus derselben Bildschirmaufnahme: Beim Wischen faehrt die
   Adressleiste ein und aus, der sichtbare Bereich wird dabei rund 60 px hoeher.
   Eine Flaeche mit `height:100%` und `object-fit:cover` bekommt dadurch bei
   JEDER dieser Aenderungen einen anderen Bildausschnitt — das liest sich als
   komischer Zoom.

   Loesung am Handy: Der Hintergrund wird nicht festgenagelt, sondern liegt oben
   am Dokument und scrollt mit dem ersten Bildschirm weg (`absolute`). `100lvh`
   ist die groesste Fassung des Sichtbereichs und aendert sich beim Scrollen
   nicht — der Ausschnitt steht also still. Darunter traegt der Grundton des
   `body`: #04122a auf den dunklen Seiten (Zeile 35), #f6efe1 auf den
   Referenzen (Zeile 763). Beide sind gesetzt, es blitzt kein Weiss auf.
   Am Rechner bleibt alles, wie es war.

   ⚠️ Der Block steht bewusst ganz am ENDE der Datei, und die Selektoren tragen
   `body` bzw. `html body` davor. Bei gleicher Spezifitaet gewinnt die spaetere
   Regel, und Zusammenfuege-Optimierer auf dem Server (LiteSpeed) ordnen die
   Dateien um. Spezifitaet ist von der Reihenfolge unabhaengig; `!important`
   waere der grobe Weg zum selben Ziel und macht jede spaetere Anpassung
   unmoeglich. Bei den Pseudo-Elementen muss `html` davor stehen: `body body`
   waere zwar gueltige Syntax, trifft aber nie ein Element.

   ⚠️ Seitlicher Ueberlauf ist bereits abgefangen und wird deshalb NICHT
   wiederholt: Die Szenenbilder laufen bis `scale(1.42)`, das Gitter der
   Unterseiten bis `scale(2.4)` — `html{overflow-x:clip}` steht global in Zeile
   33. `overflow-x:hidden` waere an dieser Stelle falsch, es legt jedes
   `position:sticky` still (die Kopfleiste der Unterseiten haengt daran).
   ⚠️ Eine Messgroesse aendert sich dabei, ohne dass ein Fehler vorliegt:
   Solange das Gitter `fixed` war, zaehlte es gar nicht zur Ueberlauf-Flaeche
   des Dokuments. Als `absolute` tut es das, und `documentElement.scrollWidth`
   meldet auf Impressum, Datenschutz und Preisliste seither 675 bis 687 statt
   500. Nachgemessen am 05.08.2026: `scrollLeft` bleibt nach `scrollLeft=400`
   auf 0, `body.scrollWidth` bleibt 500 — die Seite laesst sich NICHT quer
   wegschieben, `overflow-x:clip` haelt. Wer die Kurzpruefung
   `scrollWidth === clientWidth` blind anwendet, jagt hier ein Gespenst;
   die belastbare Probe ist der Schiebeversuch, nicht die Zahl.
   =========================================================================== */
@media(max-width:720px),(pointer:coarse){
  /* Startseite: die Palast-Szene mit den vier Zoom-Fotos.
     Impressum/Datenschutz/Preisliste: das langsam atmende Blaupausen-Gitter.
     Referenzen: das Punktraster. Drei Seitenarten, eine Bauart, ein Fix — wer
     nur die Startseite prueft, sieht das Springen auf den Unterseiten weiter. */
  body .scene,
  html body:has(.legal)::before,
  html body:has(.legal)::after,
  html body:has(.ref-page)::before{
    position:absolute;top:0;left:0;right:0;height:100lvh;
    /* `will-change` ist eine Vorwarnung, kein Dauerzustand: eine bildschirm-
       grosse Ebene kostet als eigene Grafikschicht am Handy jedes Bild
       Rasterzeit. Laufende Animationen bekommen ihre Schicht ohnehin. */
    will-change:auto;}

  /* Glasflaechen ueber dem Bild sind der zweite Kostenpunkt (Hosting T4): jede
     wird pro Bild neu gerastert, und beide hier liegen dauerhaft im Blick.
     Der Sprachknopf steht in der Leiste ueber dem Foto — dort ist die
     Unschaerfe am teuersten und am wenigsten zu sehen; der etwas dichtere Grund
     ersetzt die Trennung, die vorher die Unschaerfe geliefert hat.
     Die Kopfleiste der Unterseiten traegt mit .9 schon fast volle Deckung, ihre
     Unschaerfe zeigt praktisch nichts an — Farbe bleibt deshalb unangetastet. */
  body .lang-btn{backdrop-filter:none;-webkit-backdrop-filter:none;
    background:rgba(255,255,255,.14);}
  body .legal-top{backdrop-filter:none;-webkit-backdrop-filter:none;}
}

/* ============ ÜBER UNS: EIN Knopf statt zwei ============
   Vorher standen hier zwei Knöpfe übereinander — der eigene Ausklapper und
   der von js/readmore.js. Jetzt trägt der Absatz data-no-readmore (das Modul
   lässt ihn in Ruhe) und wird stattdessen per CSS gekürzt; derselbe Knopf,
   der den Rest ausfährt, hebt auch diese Kürzung auf. */
@media(max-width:720px){
  .about-lead{
    display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;
    overflow:hidden;transition:none;
  }
  /* Aufgeklappt: Kürzung weg, voller Text */
  .about-offen .about-lead{-webkit-line-clamp:unset;overflow:visible;}
}