/* ---- Schriften ----
   Lokal vom eigenen Server statt von Google Fonts (keine Datenweitergabe
   an Dritte). Lizenz: SIL Open Font License, siehe assets/fonts/OFL-*.txt */
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/bebas-neue-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/montserrat-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/montserrat-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/montserrat-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/montserrat-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/bebas-neue-latin-ext-400-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/montserrat-latin-ext-400-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/montserrat-latin-ext-500-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/montserrat-latin-ext-600-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/montserrat-latin-ext-700-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* =========================================================
   INDIGO DETAILING — Stylesheet
   Ersetzt das frühere Tailwind-CDN (Runtime-Compiler).
   Farbwelt, Typografie und Effekte entsprechen dem Bestand.
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  --bg:#0a0a0a;
  --bg-900:#141414;
  --surface:#171717;
  --surface-2:#1f1f1f;
  --line:#2a2a2a;
  --line-strong:#404040;

  --text:#ffffff;
  --text-muted:#d4d4d4;
  --text-dim:#a3a3a3;
  --text-faint:#737373;

  --accent:#4FACFE;
  --accent-2:#00F2FE;
  --accent-soft:rgba(79,172,254,.12);
  --accent-line:rgba(79,172,254,.28);

  --grad:linear-gradient(135deg,#4FACFE 0%,#00F2FE 100%);
  --grad-text:linear-gradient(135deg,#4FACFE 0%,#00F2FE 50%,#4FACFE 100%);

  --r-sm:.6rem;
  --r-md:1rem;
  --r-lg:1.5rem;
  --r-xl:1.75rem;
  --r-pill:9999px;

  --shadow:0 25px 60px rgba(0,0,0,.45);
  --shadow-accent:0 20px 45px rgba(79,172,254,.22);

  --container:1280px;
  --container-narrow:960px;
  --container-text:760px;

  --gutter:20px;
  --nav-h:76px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-back:cubic-bezier(.175,.885,.32,1.275);

  /* Höhe der mobilen Sticky-CTA-Leiste. 0 auf Desktop. */
  --stickybar:0px;
}

*,*::before,*::after{box-sizing:border-box;}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 12px);
}

body{
  margin:0;
  font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:400;
  line-height:1.65;
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  padding-bottom:var(--stickybar);
}

img,picture,svg,video{display:block;max-width:100%;}
img{height:auto;}

a{color:inherit;}

/* Sichtbarer Fokus für Tastaturnutzung, ohne Maus-Klicks zu stören */
:focus-visible{
  outline:2px solid var(--accent-2);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:200;
  background:var(--accent);
  color:#00121f;
  padding:12px 20px;
  font-weight:700;
  border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus{left:0;}

.visually-hidden{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;border:0;
}

/* ---------- 2. Typografie ---------- */
.font-heading,h1,h2,h3,.h-display{
  overflow-wrap:break-word;
  hyphens:auto;
  -webkit-hyphens:auto;
  font-family:'Bebas Neue',Impact,'Arial Narrow',sans-serif;
  font-weight:400;
  letter-spacing:.1em;
  line-height:1.02;
  margin:0;
}

h4,h5,h6{
  font-family:'Montserrat',sans-serif;
  margin:0;
  line-height:1.3;
}

p{margin:0 0 1em;}
p:last-child{margin-bottom:0;}

.t-display{font-size:clamp(2.1rem,8.5vw,5.5rem);}
.t-h1{font-size:clamp(1.9rem,6.2vw,4rem);}
.t-h2{font-size:clamp(1.85rem,5.4vw,3.6rem);}
.t-h3{font-size:clamp(1.45rem,3.6vw,2.1rem);}
.t-h4{font-size:clamp(1.15rem,2.4vw,1.4rem);}

/* Ueberschriften in zweispaltigen Bloecken bekommen weniger Platz */
.split .t-h2,
.location .t-h3,
.calc-intro .t-h2{
  font-size:clamp(1.6rem,3.2vw,2.5rem);
}

/* Umbruch, der erst ab Desktop greift. Auf Mobile bleibt der Satz
   zusammenhaengend und bricht wie bisher natuerlich um. */
.br-desktop{display:none;}
@media(min-width:768px){
  .br-desktop{display:inline;}
}

/* Umbruch, der nur auf Mobile greift. Ab Desktop bleibt der Satz in einer Zeile. */
.br-mobile{display:inline;}
@media(min-width:768px){
  .br-mobile{display:none;}
}

/* ---- Zeilenumbrueche ----
   Unter 768px bleibt alles wie bisher: dort braucht es die Silbentrennung,
   damit lange Komposita in schmalen Spalten nicht ueberlaufen.
   Ab 768px wird die Trennung abgeschaltet und der Browser gleicht die
   Zeilen aus - das verhindert einzelne Woerter in der letzten Zeile
   ("TUN", "AN") und Trennungen mitten im Wort. */
@media(min-width:768px){
  /* Grosse Headlines haben genug Platz: keine Silbentrennung,
     stattdessen gleicht der Browser die Zeilenlaengen aus. */
  h1,h2,.h-display,.t-display,.t-h1,.t-h2,.hero__claim{
    hyphens:manual;
    -webkit-hyphens:manual;
    text-wrap:balance;
  }

  /* Kleine Karten-Ueberschriften bleiben beim normalen Umbruch:
     text-wrap:balance wuerde dort eine zusaetzliche Zeile erzeugen.
     Die Trennstelle steckt als ­ im Markup, weil hyphens:auto
     ohne deutsches Trennwoerterbuch wirkungslos bleibt. */

  .hero__sub,.section-head p,.lead,
  .body-text p,.card p,.usp__item p,.process p{
    text-wrap:pretty;
  }
}

.lead{
  font-size:clamp(1rem,2.4vw,1.2rem);
  color:var(--text-muted);
  line-height:1.7;
}

.body-text{color:var(--text-muted);}
.body-text p{margin-bottom:1.1em;}

.eyebrow a{color:inherit;text-decoration:none;transition:color .25s;}
.eyebrow a:hover{color:var(--accent-2);text-decoration:underline;}

.eyebrow{
  display:block;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:.9rem;
}

.indigo-gradient{
  background:var(--grad-text);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:var(--accent);
}

.accent{color:var(--accent);}
.muted{color:var(--text-dim);}
.small{font-size:.85rem;}

/* Trennstrich unter Sektionsüberschriften (Bestand) */
.rule{
  width:96px;height:2px;
  margin:1.5rem auto 0;
  background:linear-gradient(to right,transparent,var(--accent),transparent);
  border:0;
}
.rule--left{margin-left:0;margin-right:auto;}

/* ---------- 3. Layout ---------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.container--narrow{max-width:var(--container-narrow);}
.container--text{max-width:var(--container-text);}

.section{padding-block:clamp(3.5rem,9vw,6.5rem);}
.section--tight{padding-block:clamp(2.75rem,6vw,4.5rem);}

.section--dark{background:linear-gradient(180deg,#000 0%,var(--bg) 50%,#000 100%);}
.section--panel{background:var(--bg-900);}
.section--fade{background:linear-gradient(180deg,#000 0%,var(--bg) 100%);}
.section--page-top{padding-top:calc(var(--nav-h) + 3rem);}

.section-head{
  text-align:center;
  max-width:720px;
  margin:0 auto clamp(2.25rem,5vw,3.5rem);
}
.section-head--left{text-align:left;margin-left:0;}
.section-head p{margin-top:1.1rem;color:var(--text-dim);}

.stack>*+*{margin-top:1.1rem;}

.grid{display:grid;gap:clamp(1rem,2.5vw,1.75rem);}
.grid--2{grid-template-columns:minmax(0,1fr);}
.grid--3{grid-template-columns:minmax(0,1fr);}
.grid--4{grid-template-columns:minmax(0,1fr);}

@media(min-width:640px){
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(min-width:860px){
  .grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .grid--4{grid-template-columns:repeat(4,minmax(0,1fr));}
}

/* ---------- 4. Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  min-height:52px;
  padding:.9rem 1.9rem;
  border:1px solid transparent;
  border-radius:var(--r-pill);
  font-family:'Montserrat',sans-serif;
  font-size:.95rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  text-align:center;
  cursor:pointer;
  transition:background .3s,box-shadow .3s,transform .3s,border-color .3s,color .3s;
}

.btn-indigo{
  background:var(--grad);
  color:#00121f;
}
.btn-indigo:hover{
  background:linear-gradient(135deg,#5FBDFF 0%,#1AFFFF 100%);
  box-shadow:0 10px 30px rgba(79,172,254,.4);
}

.btn-ghost{
  background:rgba(255,255,255,.03);
  border-color:var(--accent-line);
  color:var(--text);
}
.btn-ghost:hover{
  border-color:var(--accent);
  color:var(--accent);
  background:rgba(79,172,254,.08);
}

.btn-block{width:100%;}
.btn-sm{min-height:44px;padding:.65rem 1.25rem;font-size:.82rem;}

.btn:active{transform:translateY(1px);}

.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  color:var(--accent);
  font-weight:600;
  font-size:.92rem;
  text-decoration:none;
  transition:gap .25s,color .25s;
}
.link-arrow:hover{gap:.8rem;color:var(--accent-2);}

/* ---------- 5. Navigation ---------- */
.nav{
  position:fixed;
  inset:0 0 auto 0;
  z-index:60;
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(79,172,254,.18);
}

.nav__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  min-height:var(--nav-h);
  padding-block:.6rem;
}

.nav__logo{
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
  text-decoration:none;
  transition:opacity .3s;
}
.nav__logo:hover{opacity:.8;}
.nav__logo img{height:44px;width:auto;object-fit:contain;}

.nav__links{
  display:none;
  align-items:center;
  gap:1.9rem;
  list-style:none;
  margin:0;padding:0;
}

.nav__link{
  display:inline-block;
  padding:.35rem 0;
  color:var(--text-muted);
  font-size:.93rem;
  font-weight:500;
  text-decoration:none;
  position:relative;
  transition:color .3s;
}
.nav__link::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-3px;
  height:2px;
  background:var(--grad);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav__link:hover,.nav__link[aria-current="page"]{color:var(--accent);}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{transform:scaleX(1);}

.nav__cta{display:none;}

/* ---- Leistungen-Dropdown (Desktop) ---- */
.nav__item{position:relative;}

.nav__link--menu{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  background:none;
  border:0;
  padding:.35rem 0;
  font-family:'Montserrat',sans-serif;
  font-size:.93rem;
  font-weight:500;
  color:var(--text-muted);
  cursor:pointer;
}
.nav__link--menu[data-active="true"]{color:var(--accent);}
.nav__link--menu[data-active="true"]::after{transform:scaleX(1);}

.nav__chevron{
  width:15px;height:15px;
  flex-shrink:0;
  transition:transform .3s var(--ease);
}
.nav__item--has-menu:hover .nav__chevron,
.nav__item--has-menu:focus-within .nav__chevron,
.nav__item--has-menu[data-open="true"] .nav__chevron{transform:rotate(180deg);}

.nav__menu{
  position:absolute;
  top:calc(100% + 14px);
  left:50%;
  transform:translateX(-50%) translateY(-8px);
  width:min(320px,90vw);
  padding:.5rem;
  background:rgba(12,12,12,.98);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--accent-line);
  border-radius:var(--r-md);
  box-shadow:0 24px 50px rgba(0,0,0,.55);
  opacity:0;
  visibility:hidden;
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
  z-index:70;
}

/* Unsichtbare Bruecke, damit der Zeiger die Luecke ueberqueren kann */
.nav__menu::before{
  content:"";
  position:absolute;
  top:-16px;left:0;right:0;height:16px;
}

.nav__item--has-menu:hover .nav__menu,
.nav__item--has-menu:focus-within .nav__menu,
.nav__item--has-menu[data-open="true"] .nav__menu{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}

.nav__menu-link{
  display:block;
  padding:.65rem .8rem;
  border-radius:var(--r-sm);
  text-decoration:none;
  transition:background .22s,color .22s;
}
.nav__menu-link:hover,
.nav__menu-link:focus-visible{background:rgba(79,172,254,.1);}
.nav__menu-link[aria-current="page"]{background:rgba(79,172,254,.14);}

.nav__menu-title{
  display:block;
  font-size:.92rem;
  font-weight:600;
  color:var(--text);
}
.nav__menu-link:hover .nav__menu-title,
.nav__menu-link[aria-current="page"] .nav__menu-title{color:var(--accent);}

.nav__menu-desc{
  display:block;
  margin-top:.1rem;
  font-size:.76rem;
  color:var(--text-faint);
}

/* ---- Leistungen-Gruppe im mobilen Panel ---- */
.nav__panel-group{display:block;}

.nav__panel-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  width:100%;
  padding:1rem .25rem;
  background:none;
  border:0;
  color:var(--text);
  font-family:'Bebas Neue',sans-serif;
  font-size:1.5rem;
  letter-spacing:.09em;
  text-align:left;
  cursor:pointer;
  transition:color .25s;
}
.nav__panel-toggle:hover{color:var(--accent);}
.nav__panel-toggle .nav__chevron{width:20px;height:20px;color:var(--accent);}
.nav__panel-toggle[aria-expanded="true"] .nav__chevron{transform:rotate(180deg);}

.nav__panel-sub ul{margin:0 0 .5rem;padding:0 0 0 .9rem;border-left:1px solid var(--accent-line);}
.nav__panel-sub li+li{border-top:0;}
.nav__panel-sub a{
  font-family:'Montserrat',sans-serif;
  font-size:1rem;
  font-weight:500;
  letter-spacing:0;
  padding:.8rem .25rem;
  min-height:48px;
  display:flex;
  align-items:center;
}

.nav__toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;height:48px;
  margin-right:-8px;
  background:transparent;
  border:1px solid var(--accent-line);
  border-radius:var(--r-sm);
  color:var(--text);
  cursor:pointer;
  transition:border-color .3s,background .3s;
}
.nav__toggle:hover{border-color:var(--accent);background:rgba(79,172,254,.08);}

.nav__toggle-bars{
  position:relative;
  width:20px;height:2px;
  background:currentColor;
  border-radius:2px;
  transition:background .2s;
}
.nav__toggle-bars::before,
.nav__toggle-bars::after{
  content:"";
  position:absolute;
  left:0;
  width:20px;height:2px;
  background:currentColor;
  border-radius:2px;
  transition:transform .3s var(--ease),top .3s var(--ease);
}
.nav__toggle-bars::before{top:-6px;}
.nav__toggle-bars::after{top:6px;}

.nav__toggle[aria-expanded="true"] .nav__toggle-bars{background:transparent;}
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::before{top:0;transform:rotate(45deg);}
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::after{top:0;transform:rotate(-45deg);}

/* Mobiles Panel */
.nav__panel{
  position:fixed;
  top:var(--nav-h);
  left:0;right:0;
  max-height:calc(100dvh - var(--nav-h));
  overflow-y:auto;
  overscroll-behavior:contain;
  background:rgba(8,8,8,.98);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
  padding:1rem var(--gutter) calc(1.5rem + env(safe-area-inset-bottom));
  transform:translateY(-12px);
  opacity:0;
  visibility:hidden;
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
}
.nav__panel[data-open="true"]{
  transform:translateY(0);
  opacity:1;
  visibility:visible;
}

.nav__panel ul{list-style:none;margin:0 0 1.25rem;padding:0;}
.nav__panel li+li{border-top:1px solid var(--line);}

.nav__panel a{
  display:block;
  padding:1rem .25rem;
  font-family:'Bebas Neue',sans-serif;
  font-size:1.5rem;
  letter-spacing:.09em;
  color:var(--text);
  text-decoration:none;
  transition:color .25s,padding-left .25s;
}
.nav__panel a:hover,
.nav__panel a[aria-current="page"]{color:var(--accent);padding-left:.6rem;}

.nav__panel-actions{display:grid;gap:.6rem;}
/* Im Mobilmenue duerfen die beiden Buttons ruhiger wirken. */
.nav__panel-actions .btn{
  min-height:40px;
  padding:.4rem 1.1rem;
  font-size:.88rem;
  letter-spacing:.04em;
}

body[data-nav-open="true"]{overflow:hidden;}

@media(min-width:1100px){
  .nav__links{display:flex;gap:1.35rem;}
  .nav__panel{display:none;}
  .nav__cta{display:inline-flex;}
  .nav__toggle{display:none;}
  .nav__panel{display:none;}
  .nav__logo img{height:48px;}
}

@media(min-width:1280px){
  .nav__links{gap:1.9rem;}
}

/* ---------- 6. Hero ---------- */
.hero{
  position:relative;
  display:flex;
  align-items:center;
  min-height:100svh;
  padding-top:calc(var(--nav-h) + 2.5rem);
  padding-bottom:clamp(4.5rem,12vw,7rem);
  overflow:hidden;
  isolation:isolate;
}
.hero--page{min-height:auto;padding-bottom:clamp(3rem,8vw,5rem);}

.hero__media{
  position:absolute;
  inset:0;
  z-index:-2;
}
.hero__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.1) 38%,rgba(0,0,0,.92) 100%),
    linear-gradient(135deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.42) 50%,rgba(0,0,0,.78) 100%);
}

.hero__inner{
  position:relative;
  width:100%;
  text-align:center;
}

/* Markenclaim bleibt die dominante Bildmarke … */
.hero__claim{
  font-size:clamp(2.05rem,8.6vw,5.25rem);
  margin-bottom:.75rem;
}

/* … die SEO-H1 steht als ruhigere, kleinere Zeile darunter. */
.hero__h1{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(1rem,2.9vw,1.45rem);
  font-weight:600;
  letter-spacing:.02em;
  line-height:1.4;
  color:#fff;
  margin:0 auto 1rem;
  max-width:34ch;
}
.hero__h1::before{
  content:"";
  display:block;
  width:56px;height:2px;
  margin:0 auto 1.15rem;
  background:var(--grad);
  opacity:.9;
}

.hero__sub{
  max-width:46ch;
  margin:0 auto clamp(1.75rem,4vw,2.4rem);
  color:var(--text-muted);
  font-size:clamp(.95rem,2.2vw,1.1rem);
}

.hero__actions{
  display:flex;
  flex-direction:column;
  gap:.75rem;
  max-width:340px;
  margin-inline:auto;
}

.hero__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:.5rem 1.4rem;
  margin-top:clamp(1.75rem,4vw,2.4rem);
  font-size:.82rem;
  color:var(--text-dim);
}
.hero__meta span{display:inline-flex;align-items:center;gap:.4rem;}
.hero__meta svg{width:15px;height:15px;color:var(--accent);flex-shrink:0;}

.hero__scroll{
  position:absolute;
  left:50%;
  bottom:calc(1.5rem + var(--stickybar));
  transform:translateX(-50%);
  color:var(--accent);
  pointer-events:none;
}
.hero__scroll svg{width:30px;height:30px;animation:heroBounce 1.6s infinite;}

@media(min-width:560px){
  .hero__actions{flex-direction:row;justify-content:center;max-width:none;}
  .hero__actions .btn{min-width:210px;}
}

/* ---------- 7. Karten & Vertrauen ---------- */
.card{
  background:linear-gradient(180deg,rgba(38,38,38,.6) 0%,rgba(23,23,23,.6) 100%);
  border:1px solid rgba(64,64,64,.5);
  border-radius:var(--r-lg);
  padding:clamp(1.4rem,3vw,2rem);
  transition:transform .4s var(--ease),border-color .4s,box-shadow .4s;
}
.card--link{text-decoration:none;display:flex;flex-direction:column;height:100%;}
.card--link:hover{
  transform:translateY(-6px);
  border-color:var(--accent-line);
  box-shadow:var(--shadow-accent);
}
.card h3{margin-bottom:.6rem;overflow-wrap:break-word;hyphens:auto;}
.card p{color:var(--text-dim);font-size:.94rem;}
.card .link-arrow{margin-top:auto;padding-top:1.1rem;}

/* Grosse Bildkarte fuer die Bereichsuebersicht */
.card--feature{padding:0;overflow:hidden;}
.card--feature .card__media{margin:0;background:#111;}
.card--feature .card__media img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  transition:transform .6s var(--ease);
}
.card--feature:hover .card__media img{transform:scale(1.04);}
.card--feature > :not(.card__media){padding-inline:clamp(1.4rem,3vw,2rem);}
.card--feature > h3{padding-top:1.35rem;}
.card--feature > .link-arrow{padding-bottom:1.6rem;}

.icon-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;height:46px;
  margin-bottom:1.1rem;
  border-radius:var(--r-sm);
  background:var(--accent-soft);
  border:1px solid var(--accent-line);
  color:var(--accent);
  flex-shrink:0;
}
.icon-badge svg{width:22px;height:22px;}

/* Vertrauens-/USP-Leiste */
.usp{
  display:grid;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.usp__item{
  background:var(--bg);
  padding:1.5rem 1.4rem;
}
.usp__item h3{
  font-family:'Montserrat',sans-serif;
  font-size:1rem;
  font-weight:700;
  letter-spacing:0;
  margin-bottom:.4rem;
}
.usp__item p{font-size:.88rem;color:var(--text-dim);margin:0;}
.usp__num{
  display:block;
  font-family:'Bebas Neue',sans-serif;
  font-size:1.6rem;
  letter-spacing:.08em;
  color:var(--accent);
  margin-bottom:.35rem;
}

@media(min-width:700px){.usp{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(min-width:1024px){.usp{grid-template-columns:repeat(4,minmax(0,1fr));}}

/* ---------- 8. Pakete ---------- */
.packages{
  display:grid;
  gap:1.25rem;
}
@media(min-width:960px){
  .packages{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.75rem;align-items:start;}
}

.package{
  position:relative;
  display:flex;
  flex-direction:column;
  background:linear-gradient(180deg,rgba(38,38,38,.6) 0%,rgba(23,23,23,.6) 100%);
  border:1px solid rgba(64,64,64,.5);
  border-radius:var(--r-xl);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  transition:transform .4s var(--ease-back),box-shadow .4s,border-color .4s;
}
.package--featured{
  background:linear-gradient(180deg,rgba(30,58,95,.35) 0%,rgba(23,23,23,.8) 100%);
  border:2px solid rgba(79,172,254,.5);
}

@media(min-width:960px){
  .package{min-height:700px;}
  .package--featured{transform:scale(1.04);z-index:2;}
  .package:hover{transform:translateY(-12px) scale(1.02);box-shadow:var(--shadow-accent);}
  .package--featured:hover{transform:translateY(-12px) scale(1.06);}
}

.package__badge{
  position:absolute;
  top:-14px;left:50%;
  transform:translateX(-50%);
  background:var(--grad);
  color:#00121f;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.14em;
  padding:.3rem 1.2rem;
  border-radius:var(--r-pill);
  white-space:nowrap;
  z-index:3;
}

.package__head{
  padding:clamp(1.6rem,4vw,2rem) clamp(1.3rem,3.5vw,2rem) 0;
  text-align:center;
}
.package--featured .package__head{padding-top:2.35rem;}

.package__tier{
  display:inline-block;
  background:#404040;
  color:var(--text-muted);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.12em;
  padding:.28rem 1rem;
  border-radius:var(--r-pill);
  margin-bottom:.9rem;
}
.package--featured .package__tier{background:var(--accent-soft);color:var(--accent);}
.package--top .package__tier{
  background:linear-gradient(135deg,rgba(79,172,254,.2),rgba(0,242,254,.2));
  color:#93c5fd;
}

.package__name{font-size:clamp(1.65rem,4.4vw,2rem);margin-bottom:.35rem;}
.package__tagline{font-size:.86rem;color:var(--text-dim);margin:0;}

/* Preisblock */
.package__pricing{
  padding:1.1rem clamp(1.3rem,3.5vw,2rem);
  margin-top:1.1rem;
  border-top:1px solid var(--line-strong);
  border-bottom:1px solid var(--line-strong);
}
.package__from{
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-faint);
  margin-bottom:.15rem;
}
.package__price{
  font-family:'Bebas Neue',sans-serif;
  font-size:2.6rem;
  letter-spacing:.04em;
  line-height:1;
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.package__price{margin:0;}
.package__price small{
  font-family:'Montserrat',sans-serif;
  font-size:.8rem;
  font-weight:500;
  letter-spacing:0;
  color:var(--text-dim);
  -webkit-text-fill-color:var(--text-dim);
}
.package__duration{
  font-size:.8rem;
  color:var(--text-faint);
  margin:.55rem 0 0;
}

.package__prices{
  list-style:none;
  margin:.9rem 0 0;
  padding:0;
  display:grid;
  gap:.3rem;
}
.package__prices li{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  font-size:.88rem;
  color:var(--text-muted);
}
.package__prices b{color:var(--accent-2);font-weight:700;white-space:nowrap;}

/* Leistungsliste */
.package__body{
  padding:1.25rem clamp(1.3rem,3.5vw,2rem) 0;
  flex:1;
}
.package__group+.package__group{margin-top:1.25rem;}
.package__group-title{
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.16em;
  color:var(--accent);
  margin-bottom:.6rem;
}
.package__list{
  list-style:none;
  margin:0;padding:0;
  display:grid;
  gap:.45rem;
}
.package__list li{
  position:relative;
  padding-left:1.35rem;
  font-size:.875rem;
  line-height:1.5;
  color:var(--text-muted);
}
.package__list li::before{
  content:"";
  position:absolute;
  left:0;top:.52em;
  width:7px;height:7px;
  border-radius:2px;
  background:var(--grad);
  opacity:.85;
}

.package__foot{padding:1.4rem clamp(1.3rem,3.5vw,2rem) clamp(1.4rem,3.5vw,2rem);}

/* --- Mobile Accordion (Testversion) ---
   Entfernen: im HTML die Klasse .package__toggle-Zeile löschen und
   .package__body { display:block } erzwingen. Siehe README-Hinweis. */
.package__toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  width:100%;
  margin-top:1.25rem;
  padding:.95rem clamp(1.3rem,3.5vw,2rem);
  background:rgba(79,172,254,.06);
  border:0;
  border-top:1px solid var(--line-strong);
  color:var(--accent);
  font-family:'Montserrat',sans-serif;
  font-size:.86rem;
  font-weight:600;
  letter-spacing:.04em;
  text-align:left;
  cursor:pointer;
  transition:background .25s,color .25s;
}
.package__toggle:hover{background:rgba(79,172,254,.12);}
.package__toggle svg{
  width:18px;height:18px;
  flex-shrink:0;
  transition:transform .35s var(--ease);
}
.package__toggle[aria-expanded="true"] svg{transform:rotate(180deg);}

.package__highlights{
  list-style:none;
  margin:1rem 0 0;
  padding:0 clamp(1.3rem,3.5vw,2rem);
  display:grid;
  gap:.35rem;
}
.package__highlights li{
  position:relative;
  padding-left:1.35rem;
  font-size:.85rem;
  color:var(--text-dim);
}
.package__highlights li::before{
  content:"";
  position:absolute;
  left:0;top:.5em;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--accent);
}

@media(max-width:959px){
  .package__body[data-collapsible="true"]{
    display:grid;
    grid-template-rows:0fr;
    padding-top:0;
    padding-bottom:0;
    opacity:0;
    transition:grid-template-rows .4s var(--ease),opacity .3s,padding .4s var(--ease);
  }
  .package__body[data-collapsible="true"]>.package__body-inner{
    overflow:hidden;
    min-height:0;
  }
  .package__body[data-collapsible="true"][data-open="true"]{
    grid-template-rows:1fr;
    padding-top:1.35rem;
    opacity:1;
  }
}

@media(min-width:960px){
  .package__toggle{display:none;}
  .package__highlights{display:none;}
  .package__body[data-collapsible="true"]{display:block;}
}

/* ---------- 9. Preisrechner & Formular ---------- */
.calc-intro{
  display:grid;
  gap:1.5rem;
  align-items:center;
  margin-bottom:clamp(2rem,5vw,3rem);
}
@media(min-width:900px){
  .calc-intro{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:3rem;}
}

.calc-steps{
  list-style:none;
  margin:0;padding:0;
  display:grid;
  gap:.9rem;
  counter-reset:step;
}
.calc-steps li{
  position:relative;
  padding-left:3rem;
  min-height:34px;
  display:flex;
  align-items:center;
  font-size:.92rem;
  color:var(--text-muted);
}
.calc-steps li::before{
  counter-increment:step;
  content:counter(step);
  position:absolute;
  left:0;top:0;
  width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  border:1px solid var(--accent-line);
  background:var(--accent-soft);
  color:var(--accent);
  font-family:'Bebas Neue',sans-serif;
  font-size:1.05rem;
  letter-spacing:.05em;
}

.panel{
  background:rgba(23,23,23,.55);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:clamp(1.35rem,4vw,3rem);
}

.form-grid{display:grid;gap:1.1rem;}
@media(min-width:720px){.form-grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}}

.field{display:flex;flex-direction:column;gap:.45rem;min-width:0;}

.field label,.field__label{
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.03em;
  color:var(--text-dim);
}
.field__hint{font-size:.76rem;color:var(--text-faint);font-weight:400;}

/* Ein zentraler Hinweis statt zweimal derselbe Klammerzusatz */
.form-note{
  margin:.6rem 0 0;
  font-size:.8rem;
  color:var(--text-faint);
}

.field input,
.field select,
.field textarea{
  width:100%;
  min-height:52px;
  padding:.85rem 1rem;
  font-family:'Montserrat',sans-serif;
  font-size:1rem; /* verhindert iOS-Zoom beim Fokus */
  color:var(--text);
  background-color:#232323;
  border:1px solid var(--line-strong);
  border-radius:var(--r-md);
  /* Nur background-color animieren. Die Kurzschreibweise "background"
     wuerde auch background-position mitanimieren und den Select-Pfeil
     beim Verlassen des Feldes von links nach rechts einfliegen lassen. */
  transition:border-color .25s,box-shadow .25s,background-color .25s;
  -webkit-appearance:none;
  appearance:none;
}
.field textarea{min-height:120px;resize:vertical;line-height:1.6;}

/* Der Dropdown-Pfeil ist ein statisches UI-Element: immer sichtbar,
   immer an derselben Stelle, in keinem Zustand animiert. */
.field select,
.field select:hover,
.field select:focus,
.field select:active,
.field select:focus-visible,
.field select:disabled{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234FACFE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  background-size:18px;
  transition-property:border-color,box-shadow,background-color;
}

.field select{padding-right:2.9rem;}

/* Kein nativer Pfeil zusaetzlich (aeltere Edge/IE-Engines) */
.field select::-ms-expand{display:none;}

.field input::placeholder,
.field textarea::placeholder{color:#6b6b6b;}

.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(79,172,254,.18);
  /* background-color statt background: sonst faellt der Pfeil (background-image)
     im Fokus weg. */
  background-color:#262626;
}

.field select:disabled{opacity:.5;cursor:not-allowed;}

/* Browser-Autofill uebermalt sonst den dunklen Hintergrund mit Weiss.
   Die Innenschatten-Technik ist der einzige zuverlaessige Weg dagegen. */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field textarea:-webkit-autofill,
.field select:-webkit-autofill{
  -webkit-text-fill-color:var(--text);
  -webkit-box-shadow:0 0 0 1000px #232323 inset;
  box-shadow:0 0 0 1000px #232323 inset;
  caret-color:var(--text);
  transition:background-color 100000s ease-in-out 0s;
}
.field input:-webkit-autofill:focus,
.field textarea:-webkit-autofill:focus,
.field select:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px #262626 inset,0 0 0 3px rgba(79,172,254,.18);
  box-shadow:0 0 0 1000px #262626 inset,0 0 0 3px rgba(79,172,254,.18);
}

.field[data-invalid="true"] input,
.field[data-invalid="true"] select{
  border-color:#f87171;
  box-shadow:0 0 0 3px rgba(248,113,113,.15);
}
.field__error{
  font-size:.78rem;
  color:#fca5a5;
  display:none;
}
.field[data-invalid="true"] .field__error{display:block;}

fieldset{border:0;margin:0;padding:0;min-width:0;}
legend{padding:0;}

/* Notiz-/Warnboxen */
.note{
  padding:.85rem 1.1rem;
  border-radius:var(--r-md);
  font-size:.86rem;
  line-height:1.55;
}
.note--info{
  background:var(--accent-soft);
  border-left:3px solid var(--accent);
  color:#7dd3fc;
}
.note--warn{
  background:rgba(250,204,21,.1);
  border:1px solid rgba(250,204,21,.3);
  color:#fde047;
}
.note--ok{
  background:rgba(34,197,94,.1);
  border:1px solid rgba(34,197,94,.3);
  color:#86efac;
}
.note--error{
  background:rgba(248,113,113,.1);
  border:1px solid rgba(248,113,113,.35);
  color:#fca5a5;
}
.note[hidden]{display:none;}

/* Generischer Aufklappbereich */
.collapse{
  display:grid;
  grid-template-rows:0fr;
  grid-template-columns:minmax(0,1fr);
  transition:grid-template-rows .38s var(--ease);
}
.collapse[data-open="true"]{grid-template-rows:1fr;}
.collapse__inner{overflow:hidden;min-height:0;}
.collapse[data-open="true"]>.collapse__inner{overflow:visible;}

.disclosure-btn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  width:100%;
  min-height:56px;
  padding:.9rem 1.15rem;
  background:rgba(79,172,254,.06);
  border:1px solid var(--accent-line);
  border-radius:var(--r-md);
  color:var(--text);
  font-family:'Montserrat',sans-serif;
  font-size:.95rem;
  font-weight:600;
  text-align:left;
  cursor:pointer;
  transition:background .25s,border-color .25s;
}
.disclosure-btn:hover{background:rgba(79,172,254,.12);border-color:var(--accent);}
.disclosure-btn svg{width:20px;height:20px;color:var(--accent);flex-shrink:0;transition:transform .35s var(--ease);}
.disclosure-btn[aria-expanded="true"] svg{transform:rotate(180deg);}
.disclosure-btn .small{display:block;font-weight:400;color:var(--text-faint);margin-top:.15rem;}

/* Extras */
.extras-group+.extras-group{
  margin-top:1.25rem;
  padding-top:1.25rem;
  border-top:1px solid var(--line-strong);
}
.extras-group__title{
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.16em;
  color:var(--accent);
  margin-bottom:.75rem;
}
.extras-list{display:grid;gap:.55rem;}

.extra-item{
  display:flex;
  align-items:center;
  gap:.85rem;
  min-height:52px;
  padding:.7rem .95rem;
  background:rgba(79,172,254,.05);
  border:1px solid rgba(79,172,254,.2);
  border-radius:var(--r-md);
  cursor:pointer;
  transition:background .25s,border-color .25s;
}
.extra-item:hover{background:rgba(79,172,254,.1);border-color:rgba(79,172,254,.4);}
.extra-item:has(input:focus-visible){outline:2px solid var(--accent-2);outline-offset:2px;}
.extra-item.is-selected{
  border-color:rgba(79,172,254,.55);
  background:rgba(79,172,254,.12);
}
.extra-item.is-disabled{opacity:.45;cursor:not-allowed;}

.extra-item input[type="checkbox"]{
  width:20px;height:20px;
  flex-shrink:0;
  accent-color:var(--accent);
  cursor:pointer;
}
.extra-item.is-disabled input{cursor:not-allowed;}

.extra-item__content{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  min-width:0;
}
.extra-item__name{font-size:.88rem;line-height:1.35;min-width:0;overflow-wrap:anywhere;}
.extra-item__price{
  font-size:.78rem;
  font-weight:700;
  color:var(--accent-2);
  white-space:nowrap;
  flex-shrink:0;
}

/* Im Paket enthaltene Leistungen: sichtbar angehakt, aber nicht abwaehlbar. */
.extra-item.is-included,
.extra-item.is-included input{cursor:default;}
.extra-item__price--included{
  color:var(--text-muted);
  font-weight:600;
}
.extra-item__price--included .incl-long{display:none;}
.extra-item__price--included .incl-short{display:inline;}
@media(min-width:768px){
  .extra-item__price--included .incl-long{display:inline;}
  .extra-item__price--included .incl-short{display:none;}
}

.extra-note{
  margin-top:.5rem;
  padding:.7rem .95rem;
  background:var(--accent-soft);
  border-left:3px solid var(--accent);
  border-radius:var(--r-sm);
  font-size:.82rem;
  color:#7dd3fc;
}
.extra-note[hidden]{display:none;}


/* ---- Medienleiste ----
   Ruhige Logo-Laufleiste unter den Bewertungen. Kein eigener Block,
   kein Rahmen - nur Abstand, weiche Raender und langsame Bewegung. */
.media-strip{
  --media-gap:clamp(2.4rem,5vw,3.8rem);
  margin-top:clamp(2.2rem,5vw,3.2rem);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
}
.media-strip[hidden]{display:none;}

/* Wenige Logos: ruhig zentriert statt Laufband. */
.media-strip--static{
  -webkit-mask-image:none;
          mask-image:none;
}
.media-strip--static .media-strip__track{
  width:auto;
  flex-wrap:wrap;
  justify-content:center;
  row-gap:1.2rem;
  animation:none;
}
.media-strip--static .media-strip__item:last-child{margin-right:0;}

.media-strip__track{
  display:flex;
  align-items:center;
  width:max-content;
  margin:0;
  padding:0;
  list-style:none;
  animation:media-scroll 80s linear infinite;
  will-change:transform;
}
.media-strip__item{
  display:flex;
  align-items:center;
  margin-right:var(--media-gap);
}
.media-strip__link{display:flex;align-items:center;text-decoration:none;}
.media-strip__logo{
  --media-logo-base:24px;
  height:calc(var(--media-logo-base) * var(--logo-scale,1));
  width:auto;
  max-width:150px;
  object-fit:contain;
  opacity:.34;
  filter:grayscale(1) brightness(0) invert(1);
  transition:opacity .3s;
}
@media(min-width:768px){
  .media-strip__logo{--media-logo-base:29px;max-width:210px;}
}
@media(hover:hover){
  .media-strip__logo:hover{opacity:.5;}
}

/* Die Spur enthaelt zwei identische Saetze - bei -50% beginnt der
   zweite Satz exakt dort, wo der erste stand. Kein Sprung, keine Luecke. */
@keyframes media-scroll{
  from{transform:translate3d(0,0,0);}
  to{transform:translate3d(-50%,0,0);}
}
@media(prefers-reduced-motion:reduce){
  .media-strip__track{animation:none;}
}

/* Preisanzeige */
.price-box{
  background:rgba(32,32,32,.6);
  border:1px solid var(--line-strong);
  border-radius:var(--r-md);
  padding:clamp(1.1rem,3vw,1.6rem);
}
.price-box__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  margin-bottom:.9rem;
}
.price-box__label{color:var(--text-dim);font-size:.92rem;}
.price-display{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(2rem,7vw,2.5rem);
  line-height:1;
  letter-spacing:.03em;
  white-space:nowrap;
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.price-line{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:.75rem;
  align-items:start;
  margin:.4rem 0;
  font-size:.88rem;
  color:var(--text-muted);
}
.price-line span:first-child{min-width:0;overflow-wrap:anywhere;}
.price-line span:last-child{white-space:nowrap;text-align:right;}
.price-line--total{
  border-top:1px solid var(--accent-line);
  padding-top:.6rem;
  margin-top:.6rem;
  font-weight:700;
  color:var(--accent-2);
}

/* ---------- 10. Galerie (Bestandslogik unverändert) ---------- */
.gallery-bg{
  background:linear-gradient(180deg,var(--bg) 0%,rgba(20,20,20,.95) 50%,var(--bg) 100%);
}
.gallery-slider{position:relative;width:100%;}
#gallery-viewport{
  overflow:hidden;
  width:100%;
  padding:26px 0;
  cursor:grab;
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none;
}
#gallery-viewport:active{cursor:grabbing;}
#gallery-track{display:flex;align-items:center;will-change:transform;}

.gallery-slide{
  flex:0 0 78%;
  padding:0 8px;
  opacity:.34;
  filter:brightness(.58);
  transition:opacity .55s ease,filter .55s ease;
}
.gallery-card{
  width:100%;
  aspect-ratio:16/9;
  border-radius:var(--r-md);
  overflow:hidden;
  background:#111;
  transition:transform .55s var(--ease),box-shadow .5s;
}
.gallery-card img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  pointer-events:none;
  transition:transform .5s;
}
.gallery-slide.gallery-prev .gallery-card{transform:scale(.94);transform-origin:right center;}
.gallery-slide.gallery-next .gallery-card{transform:scale(.94);transform-origin:left center;}
.gallery-slide.gallery-active{opacity:1;filter:brightness(1);z-index:5;}
.gallery-slide.gallery-active .gallery-card{transform:scale(1);box-shadow:0 25px 60px rgba(79,172,254,.22);}
.gallery-slide.gallery-active .gallery-card:hover{transform:scale(1.02);box-shadow:0 28px 65px rgba(79,172,254,.38);}
.gallery-slide.gallery-active .gallery-card:hover img{transform:scale(1.05);}

.gallery-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:20;
  width:52px;height:52px;
  border-radius:50%;
  background:rgba(0,0,0,.72);
  border:1px solid rgba(79,172,254,.35);
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  cursor:pointer;
  transition:color .3s,border-color .3s,background .3s,box-shadow .3s;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.gallery-arrow:hover{
  color:var(--accent);
  border-color:var(--accent);
  background:rgba(0,0,0,.95);
  box-shadow:0 0 25px rgba(79,172,254,.25);
}
.gallery-arrow svg{width:22px;height:22px;}
.gallery-arrow-left{left:18px;}
.gallery-arrow-right{right:18px;}

#gallery-dots{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin-top:12px;
}
.gallery-dot{
  width:8px;height:8px;
  padding:0;border:none;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.25);
  cursor:pointer;
  transition:width .3s ease,background .3s ease;
}
.gallery-dot:hover{background:rgba(79,172,254,.7);}
.gallery-dot.active{width:24px;background:var(--accent);}

/* Die Galerie war zuletzt viel zu gross, weil der Slider ueber die volle
   Fensterbreite lief. Der Viewport bekommt wieder die Containerbreite:
   bei 1280px Schale ergibt 78% Slide-Breite ein Hauptbild von rund 950-1000px.
   Auf Mobile laeuft die Schale weiterhin randlos. */
.gallery-section{padding-inline:0;padding-block:clamp(3rem,6vw,4.75rem);}
.gallery-section .section-head{padding-inline:var(--gutter);margin-bottom:clamp(1.5rem,3.5vw,2.25rem);}

.gallery-shell{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

@media(max-width:768px){
  .gallery-shell{max-width:100%;padding-inline:0;}
}

@media(max-width:768px){
  .gallery-slide{flex:0 0 84%;padding:0 5px;opacity:.3;filter:brightness(.52);}
  .gallery-slide.gallery-active{opacity:1;filter:brightness(1);}
  .gallery-slide.gallery-prev .gallery-card,
  .gallery-slide.gallery-next .gallery-card{transform:scale(.9);}
  #gallery-viewport{padding:24px 0 18px;}
  .gallery-card{border-radius:.8rem;}
  .gallery-arrow{width:44px;height:44px;}
  .gallery-arrow-left{left:8px;}
  .gallery-arrow-right{right:8px;}
  #gallery-dots{gap:7px;margin-top:10px;}
  .gallery-dot{width:7px;height:7px;}
  .gallery-dot.active{width:22px;}
}

/* Vorher/Nachher-freie Bildblöcke auf Unterseiten */
.media-figure{
  margin:0;
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--line);
  background:#111;
}
.media-figure img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  transition:transform .6s var(--ease);
}
.media-figure:hover img{transform:scale(1.04);}

/* Wechselnde Bild-/Text-Blöcke */
.split{
  display:grid;
  gap:clamp(1.5rem,4vw,3rem);
  align-items:center;
}
@media(min-width:900px){
  .split{grid-template-columns:repeat(2,minmax(0,1fr));}
  .split--reverse .split__media{order:2;}
}

/* ---------- 11. Bewertungen ---------- */
.rating-summary{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:1rem 2rem;
  padding:clamp(1.25rem,3.5vw,1.75rem);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  margin-bottom:clamp(1.5rem,4vw,2.25rem);
  text-align:center;
}
.rating-summary__score{
  font-family:'Bebas Neue',sans-serif;
  font-size:3rem;
  line-height:1;
  letter-spacing:.04em;
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.rating-summary__meta{text-align:left;}
.rating-summary__meta p{margin:0;font-size:.88rem;color:var(--text-dim);}

.stars{display:inline-flex;gap:2px;color:#facc15;}
.stars svg{width:18px;height:18px;}

.reviews{
  display:grid;
  gap:1rem;
}
@media(min-width:760px){.reviews{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(min-width:1100px){.reviews{grid-template-columns:repeat(3,minmax(0,1fr));}}

.review{
  display:flex;
  flex-direction:column;
  gap:.8rem;
  padding:1.4rem;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  transition:border-color .35s,transform .35s var(--ease);
}
.review:hover{border-color:var(--accent-line);transform:translateY(-4px);}
.review blockquote{
  margin:0;
  font-size:.92rem;
  line-height:1.65;
  color:var(--text-muted);
}
.review__foot{
  display:flex;
  align-items:center;
  gap:.75rem;
  margin-top:auto;
  padding-top:.4rem;
}
.review__avatar{
  width:38px;height:38px;
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--accent-soft);
  border:1px solid var(--accent-line);
  color:var(--accent);
  font-weight:700;
  font-size:.9rem;
}
.review__name{font-size:.88rem;font-weight:600;}
.review__date{font-size:.76rem;color:var(--text-faint);}

/* ---------- 12. Kontakt & Standort ---------- */
.contact-cards{
  display:grid;
  gap:1rem;
  margin-bottom:clamp(1.75rem,4vw,2.5rem);
}
@media(min-width:760px){.contact-cards{grid-template-columns:repeat(3,minmax(0,1fr));}}

.contact-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.35rem;
  padding:1.6rem 1.2rem;
  background:rgba(23,23,23,.5);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  text-align:center;
  text-decoration:none;
  transition:background .3s,border-color .3s,transform .3s var(--ease);
}
.contact-card:hover{
  background:rgba(38,38,38,.6);
  border-color:var(--accent-line);
  transform:translateY(-4px);
}
.contact-card__label{font-size:.78rem;color:var(--text-faint);letter-spacing:.06em;}
.contact-card__value{font-size:1rem;font-weight:600;overflow-wrap:anywhere;}

.location{
  display:grid;
  gap:1.5rem;
  align-items:start;
}
@media(min-width:900px){.location{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:3rem;}}

.location__map{
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--surface);
  aspect-ratio:4/3;
}
.location__map iframe{width:100%;height:100%;border:0;display:block;}

.hours{
  list-style:none;
  margin:1.25rem 0 0;
  padding:0;
  border-top:1px solid var(--line);
}
.hours li{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:.6rem 0;
  border-bottom:1px solid var(--line);
  font-size:.9rem;
  color:var(--text-muted);
}
.hours li b{font-weight:600;color:var(--text);}

/* ---------- 13. FAQ ---------- */
.faq{
  display:grid;
  gap:.75rem;
  max-width:860px;
  margin-inline:auto;
}
.faq__item{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
  transition:border-color .3s;
}
.faq__item:hover{border-color:var(--accent-line);}

.faq__q{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  width:100%;
  min-height:60px;
  padding:1rem 1.25rem;
  background:transparent;
  border:0;
  color:var(--text);
  font-family:'Montserrat',sans-serif;
  font-size:.98rem;
  font-weight:600;
  line-height:1.45;
  text-align:left;
  cursor:pointer;
}
.faq__q svg{
  width:20px;height:20px;
  flex-shrink:0;
  color:var(--accent);
  transition:transform .35s var(--ease);
}
.faq__q[aria-expanded="true"] svg{transform:rotate(180deg);}

.faq__a{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .35s var(--ease);
}
.faq__a[data-open="true"]{grid-template-rows:1fr;}
.faq__a-inner{overflow:hidden;min-height:0;}
.faq__a-inner>div{
  padding:0 1.25rem 1.25rem;
  font-size:.92rem;
  line-height:1.7;
  color:var(--text-dim);
}
.faq__a-inner p+p{margin-top:.8rem;}

/* ---------- 14. Ablauf / Prozess ---------- */
.process{
  list-style:none;
  counter-reset:proc;
  margin:0;padding:0;
  display:grid;
  gap:1rem;
}
@media(min-width:760px){.process{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(min-width:1100px){.process{grid-template-columns:repeat(5,minmax(0,1fr));gap:.75rem;}}

.process li{
  position:relative;
  padding:1.4rem 1.2rem 1.2rem;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
}
.process li::before{
  counter-increment:proc;
  content:"0" counter(proc);
  display:block;
  font-family:'Bebas Neue',sans-serif;
  font-size:1.5rem;
  letter-spacing:.08em;
  color:var(--accent);
  margin-bottom:.4rem;
}
.process h3{
  font-family:'Montserrat',sans-serif;
  font-size:.98rem;
  font-weight:700;
  letter-spacing:0;
  margin-bottom:.35rem;
}
.process p{font-size:.85rem;color:var(--text-dim);margin:0;}

/* Vergleichstabelle */
.compare{
  width:100%;
  border-collapse:collapse;
  font-size:.88rem;
}
.compare th,.compare td{
  padding:.85rem .9rem;
  text-align:left;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
.compare thead th{
  font-family:'Bebas Neue',sans-serif;
  font-size:1.05rem;
  letter-spacing:.09em;
  color:var(--accent);
  border-bottom-color:var(--accent-line);
  white-space:nowrap;
}
.compare tbody th{font-weight:600;color:var(--text);}
.compare td{color:var(--text-dim);}
.compare tbody tr:last-child th,
.compare tbody tr:last-child td{border-bottom:0;}

.table-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface);
}
.table-scroll table{min-width:520px;}

/* Hinweis, dass die Tabelle auf schmalen Displays seitlich scrollt */
.table-hint{
  display:none;
  margin:.6rem 0 0;
  font-size:.78rem;
  color:var(--text-faint);
  text-align:center;
}
.table-hint svg{width:14px;height:14px;vertical-align:-2px;margin-right:.3rem;color:var(--accent);}
@media(max-width:760px){.table-hint{display:block;}}

/* Preisangabe im Informationsbereich - bewusst ruhig, keine Preiswerbung.
   Beide Preise im Block (Einstiegspreis und Masterpiece) werden gleich
   ausgezeichnet: Montserrat, fett, Akzentfarbe. Nur die Groesse staffelt
   die Hierarchie. */
.price-lead{
  margin:0;
  font-size:1.05rem;
  color:var(--text-muted);
  line-height:1.6;
}
.price-lead__value,
.price-lead + .body-text strong{
  font-family:'Montserrat',sans-serif;
  font-weight:700;
  letter-spacing:0;
  color:var(--accent-2);
}
.price-lead__value{
  margin-inline:.15rem;
}
.price-lead__note{
  color:var(--text-muted);
  font-size:1rem;
}

/* Vergleichskarten statt Tabelle - funktioniert in jeder Breite */
.spec-cards{
  display:grid;
  gap:1rem;
  grid-template-columns:minmax(0,1fr);
}
@media(min-width:860px){
  .spec-cards{grid-template-columns:repeat(3,minmax(0,1fr));}
}

.spec-card{
  display:flex;
  flex-direction:column;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:1.4rem;
  transition:border-color .35s,transform .35s var(--ease);
}
.spec-card:hover{border-color:var(--accent-line);transform:translateY(-4px);}
.spec-card--highlight{
  border-color:rgba(79,172,254,.45);
  background:linear-gradient(180deg,rgba(30,58,95,.3) 0%,var(--surface) 100%);
}

.spec-card__head{
  padding-bottom:.9rem;
  margin-bottom:.9rem;
  border-bottom:1px solid var(--line-strong);
}
.spec-card__title{
  font-family:'Bebas Neue',sans-serif;
  font-size:1.5rem;
  letter-spacing:.08em;
  color:var(--accent);
  margin:0;
}
.spec-card__lead{
  font-size:.82rem;
  color:var(--text-faint);
  margin:.25rem 0 0;
}

.spec-list{margin:0;display:grid;gap:.7rem;}
.spec-list dt{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-faint);
}
.spec-list dd{
  margin:.15rem 0 0;
  font-size:.9rem;
  line-height:1.5;
  color:var(--text-muted);
}
.spec-list dd b{color:var(--accent-2);}

/* ---------- 15. Rechtstexte ---------- */
.legal{max-width:var(--container-text);}
.legal h2{
  font-family:'Montserrat',sans-serif;
  font-size:1.3rem;
  font-weight:700;
  letter-spacing:0;
  margin:2.5rem 0 .9rem;
  color:var(--text);
}
.legal h3{
  font-family:'Montserrat',sans-serif;
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:0;
  margin:1.9rem 0 .6rem;
  color:var(--text);
}
.legal h2:first-of-type{margin-top:0;}
.legal p,.legal li{color:var(--text-muted);font-size:.95rem;line-height:1.75;}
.legal ul{padding-left:1.25rem;margin:0 0 1.1rem;}
.legal li{margin-bottom:.35rem;}
.legal a{color:var(--accent);overflow-wrap:anywhere;}
.legal strong{color:var(--text);}
.legal .summary{
  background:var(--accent-soft);
  border-left:3px solid var(--accent);
  border-radius:var(--r-sm);
  padding:.8rem 1.1rem;
  font-size:.9rem;
  color:#7dd3fc;
  margin-bottom:1.2rem;
}
.legal address{font-style:normal;}

/* ---------- 16. Footer ---------- */
.footer{
  background:#000;
  border-top:1px solid var(--line);
  padding-block:clamp(2.5rem,6vw,3.5rem) clamp(1.5rem,4vw,2rem);
}
.footer__grid{
  display:grid;
  gap:2rem;
  margin-bottom:2.25rem;
}
@media(min-width:760px){.footer__grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:2.5rem;}}

.footer__logo img{height:48px;width:auto;margin-bottom:1rem;}
.footer__about{font-size:.88rem;color:var(--text-dim);max-width:38ch;}

.footer h2{
  font-family:'Montserrat',sans-serif;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:1rem;
}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;}
.footer a{
  color:var(--text-dim);
  text-decoration:none;
  font-size:.9rem;
  transition:color .25s;
  overflow-wrap:anywhere;
}
.footer a:hover{color:var(--accent);}
.footer address{font-style:normal;font-size:.9rem;color:var(--text-dim);line-height:1.8;}

.footer__bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.75rem 1.5rem;
  padding-top:1.5rem;
  border-top:1px solid var(--line);
  font-size:.82rem;
  color:var(--text-faint);
}
.footer__legal{display:flex;gap:1.25rem;flex-wrap:wrap;}

/* ---------- 17. Mobile Sticky CTA (Testversion) ---------- */
/* Komplett entfernbar: <div class="mobile-bar"> im HTML löschen
   und diesen Block plus --stickybar im :root entfernen. */
.mobile-bar{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:55;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  background:var(--line);
  border-top:1px solid rgba(79,172,254,.25);
  padding-bottom:env(safe-area-inset-bottom);
  transform:translateY(110%);
  transition:transform .35s var(--ease);
}
.mobile-bar[data-visible="true"]{transform:translateY(0);}

.mobile-bar a{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.2rem;
  min-height:58px;
  padding:.5rem .4rem;
  background:rgba(8,8,8,.97);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  color:var(--text-muted);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  text-decoration:none;
  transition:color .25s,background .25s;
}
.mobile-bar a svg{width:19px;height:19px;color:var(--accent);}
.mobile-bar a:active{background:rgba(79,172,254,.12);}
.mobile-bar a.is-primary{color:var(--accent);}

@media(max-width:1099px){
  :root{--stickybar:62px;}
}

@media(min-width:1100px){
  .mobile-bar{display:none;}
}

/* ---------- 18. Animationen ---------- */
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(30px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes heroBounce{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-10px);}
}

.animate-fade-in{animation:fadeInUp .8s ease forwards;}
.animate-delay-1{animation-delay:.2s;opacity:0;}
.animate-delay-2{animation-delay:.4s;opacity:0;}
.animate-delay-3{animation-delay:.6s;opacity:0;}

/* Scroll-Reveal für Sektionen */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.reveal.is-visible{opacity:1;transform:none;}
.reveal:nth-child(2){transition-delay:.08s;}
.reveal:nth-child(3){transition-delay:.16s;}
.reveal:nth-child(4){transition-delay:.24s;}

/* ---------- 19. Reduced Motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .animate-delay-1,.animate-delay-2,.animate-delay-3{opacity:1;}
  .reveal{opacity:1;transform:none;}
  .hero__scroll svg{animation:none;}
}

/* ---------- 20. Schutz gegen Grid-Mindestbreiten ----------
   Grid- und Flex-Kinder werden sonst von langen deutschen Komposita
   (z. B. "Keramikversiegelung") auf deren min-content-Breite aufgeblaeht
   und sprengen auf schmalen Displays das Layout. */
.grid > *,
.split > *,
.location > *,
.calc-intro > *,
.packages > *,
.usp > *,
.process > *,
.reviews > *,
.contact-cards > *,
.footer__grid > *,
.form-grid > *,
.extras-list > *,
.faq > *,
.collapse > *,
.nav__panel-sub ul > *,
.nav__inner > *,
.price-box__head > *{
  min-width:0;
}

/* ---------- 21. Utilities ---------- */
.text-center{text-align:center;}
.mt-0{margin-top:0;}
.mt-1{margin-top:.75rem;}
.mt-2{margin-top:1.5rem;}
.mt-3{margin-top:2.25rem;}
.actions-start{justify-content:flex-start;}
.mb-2{margin-bottom:1.5rem;}
.nowrap{white-space:nowrap;}
[hidden]{display:none!important;}