/* SUPana design system - extracted unchanged from the live pages.
   Do not reformat: every page reproduces its original stylesheet
   as design-base.css followed by its own page-<slug>.css. */

/* ---------- Tokens ---------- */
:root{
  --deep:#07262A;
  --deep-2:#0C3A40;
  --mid:#10585F;
  --foam:#EDF3F2;
  --paper:#FFFFFF;
  --sand:#B5ACA3;
  --orange:#F29225;
  --aqua:#11B2B7;
  --aqua-lt:#6FD8DA;
  --orange-dk:#D97B10;

  --bg:var(--foam);
  --surface:var(--paper);
  --text:var(--deep);
  --text-soft:#4A6468;
  --line:rgba(7,38,42,.14);
  --line-soft:rgba(7,38,42,.08);

  --f:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-display:"Archivo Black","Archivo","Helvetica Neue",Arial,sans-serif;

  --pad:clamp(20px,5vw,64px);
  --maxw:1240px;
  --r:14px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#05191C; --surface:#0A2A2F; --text:#E6EFEE; --text-soft:#9FB6B8;
    --line:rgba(230,239,238,.16); --line-soft:rgba(230,239,238,.09);
  }
}
:root[data-theme="dark"]{
  --bg:#05191C; --surface:#0A2A2F; --text:#E6EFEE; --text-soft:#9FB6B8;
  --line:rgba(230,239,238,.16); --line-soft:rgba(230,239,238,.09);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--f);
  font-size:clamp(16px,1.05vw,17.5px);line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
section{padding-block:clamp(64px,9vw,120px)}
section[id]{scroll-margin-top:110px}

/* ---------- Type ---------- */
h1,h2{margin:0;font-family:var(--f-display);font-weight:400;line-height:.98;letter-spacing:-.032em}
h3{margin:0;font-weight:700;line-height:1.25;letter-spacing:-.012em}
h1{font-size:clamp(2.7rem,6.6vw,5.1rem)}
h2{font-size:clamp(2rem,4.1vw,3.3rem)}
h3{font-size:1.18rem;line-height:1.25;letter-spacing:-.012em}
p{margin:0}
.lead{font-size:clamp(1.06rem,1.5vw,1.28rem);line-height:1.55;color:var(--text-soft);max-width:56ch}
.sec-intro .lead{max-width:none;margin-inline:auto}
.sec-intro{max-width:72ch;margin:0 auto clamp(38px,5vw,64px);text-align:center}
.sec-intro p{margin-top:18px;color:var(--text-soft);max-width:none}
.sec-intro .btn{margin-top:26px}
.band .sec-intro p{color:rgba(237,243,242,.72)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font:inherit;font-weight:700;
  padding:.92em 1.6em;border-radius:999px;border:1.5px solid transparent;
  text-decoration:none;cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease;
  /* ohne diese Zeile bekommen Button-Elemente die helle Systemfarbe und sind im Dunkelmodus unlesbar */
  background:transparent;
}
.btn-primary{background:var(--orange);color:#1A1206;border-color:var(--orange)}
.btn-primary:hover{background:var(--orange-dk);border-color:var(--orange-dk);color:#fff}
.btn-ghost{border-color:var(--aqua);color:var(--text)}
.btn-ghost:hover{border-color:var(--aqua);background:color-mix(in srgb,var(--aqua) 14%,transparent)}
.btn-light{background:var(--foam);color:var(--deep);border-color:var(--foam)}
.btn-light:hover{background:#fff;border-color:#fff}

/* ---------- Header ---------- */
.site-head{
  position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 72%,transparent);
  backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--line-soft);
}
.head-in{display:flex;align-items:center;gap:24px;min-height:92px}
.logo{display:inline-flex;align-items:center;text-decoration:none}
.logo img{height:57px;width:auto;display:block}
.foot-brand .logo img{height:52px}
.nav{display:flex;gap:19px;margin-left:auto;align-items:center}
.nav a{text-decoration:none;color:var(--text-soft);font-size:.92rem;font-weight:500;white-space:nowrap}
.nav a[aria-current]{color:var(--text);font-weight:600}
.nav a:hover{color:var(--text)}
.head-cta{display:flex;gap:10px;align-items:center}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:10px;padding:9px 11px;cursor:pointer;color:inherit}
@media (max-width:1180px){
  .nav{display:none}
  .burger{display:block}
  .head-cta .btn-ghost{display:none}
  .head-cta{margin-left:12px}
  .nav.open{display:flex;position:absolute;inset:92px 0 auto;flex-direction:column;align-items:flex-start;
    gap:2px;background:var(--surface);padding:14px var(--pad) 22px;border-bottom:1px solid var(--line)}
  .nav.open a{padding:10px 0;font-size:1.05rem;color:var(--text);width:100%;border-bottom:1px solid var(--line-soft)}
}

/* ---------- Placeholder images ---------- */
.ph{
  position:relative;overflow:hidden;border-radius:var(--r);
  background:
    linear-gradient(140deg,#12525A 0%,#1C7078 38%,#2E8B8C 68%,#59A9A0 100%);
  isolation:isolate;
}
.ph::before{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40' viewBox='0 0 120 40'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.28' stroke-width='1.4'%3E%3Cpath d='M-10 12 q15 -8 30 0 t30 0 t30 0 t30 0'/%3E%3Cpath d='M-10 26 q15 -8 30 0 t30 0 t30 0 t30 0'/%3E%3C/g%3E%3C/svg%3E");
  background-size:120px 40px;
}
.ph::after{
  content:attr(data-label);position:absolute;left:14px;bottom:12px;
  font-size:.74rem;font-weight:600;letter-spacing:.01em;color:rgba(255,255,255,.9);
  background:rgba(7,38,42,.45);padding:5px 10px;border-radius:999px;backdrop-filter:blur(4px);
}
.ph[data-quiet]::after{display:none}
.ph.has-img::before,.ph.has-img::after{display:none}
.ph.has-img{background:var(--deep)}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.mapbox .ph.has-img{position:relative}
.mapbox .ph.has-img img{position:absolute;inset:0}
.mapbox .ph.has-img::before{content:"";display:block;position:absolute;inset:40% 0 0;z-index:1;opacity:1;
  background:linear-gradient(180deg,rgba(7,38,42,0),rgba(7,38,42,.72));background-size:auto}
.wide-media .ph{overflow:hidden}
.ph.label-right::after{left:auto;right:16px;bottom:16px}
.ph.label-top::after{top:16px;bottom:auto}
.ratio-45{aspect-ratio:4/5}
.ratio-11{aspect-ratio:1/1}
.ratio-169{aspect-ratio:16/9}
.ratio-32{aspect-ratio:3/2}

/* ---------- Hero ---------- */




.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero-note{margin-top:30px;font-size:.9rem;color:var(--text-soft)}
.hero-media{position:relative}
.hero-media .ph{aspect-ratio:4/5;border-radius:220px 220px var(--r) var(--r)}
.badge{
  position:absolute;left:-18px;bottom:56px;background:var(--surface);color:var(--text);
  border:1px solid var(--line);border-radius:16px;padding:14px 18px;box-shadow:0 18px 40px -28px rgba(7,38,42,.6);
  max-width:230px;
}
.badge .t{font-weight:700;font-size:.98rem}
.badge .s{font-size:.83rem;color:var(--text-soft);margin-top:3px;line-height:1.35}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-media .ph{aspect-ratio:3/2;border-radius:var(--r)}
  .badge{position:static;margin-top:16px;max-width:none}
}

/* stats strip */
.stats{display:grid;grid-template-columns:repeat(4,1fr);column-gap:clamp(22px,3.4vw,54px);
  margin-top:clamp(44px,6vw,72px);padding-top:28px;border-top:1px solid var(--line)}
.stat{position:relative}
.stat + .stat::before{content:"";position:absolute;top:0;bottom:0;
  left:calc(clamp(22px,3.4vw,54px) / -2);border-left:1px solid var(--line)}
@media (max-width:720px){
  .stats{grid-template-columns:1fr 1fr;row-gap:26px}
  .stat:nth-child(3)::before{display:none}
  .stat:nth-child(n+3){padding-top:24px;border-top:1px solid var(--line)}
}
.stat b{display:block;font-size:clamp(1.7rem,3vw,2.4rem);font-family:var(--f-display);
  font-weight:400;line-height:1;letter-spacing:-.03em}
.stat span{display:block;font-size:.9rem;color:var(--text-soft);margin-top:7px}

/* ---------- Waterline divider ---------- */
.waterline{display:block;width:100%;height:clamp(38px,5vw,72px);color:var(--deep)}
.waterline path{fill:currentColor}

/* ---------- Steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px);counter-reset:s}
.step{padding-top:22px;border-top:2px solid var(--aqua)}
.step .n{font-size:.85rem;font-weight:700;color:var(--orange-dk);letter-spacing:.02em}
.step h3{margin:10px 0 8px}
.step p{color:var(--text-soft);font-size:.97rem}
@media (max-width:820px){.steps{grid-template-columns:1fr}}

/* ---------- Spots ---------- */
.spot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px);margin-top:clamp(32px,4vw,52px)}
.spot{text-decoration:none;display:block}
.spot .ph{aspect-ratio:3/2}
.spot-body{display:flex;justify-content:space-between;gap:14px;margin-top:14px;align-items:baseline}
.spot h3{font-size:1.1rem}
.spot .meta{font-size:.88rem;color:var(--text-soft);margin-top:4px}
.spot .price{font-weight:700;white-space:nowrap;font-size:.95rem}
.spot:hover h3{color:var(--orange-dk)}
@media (max-width:980px){.spot-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.spot-grid{grid-template-columns:1fr}}

/* ---------- Preise ---------- */
.price-table{margin-top:clamp(28px,4vw,44px);border-top:1px solid var(--line)}
.price-row{
  display:grid;grid-template-columns:1.5fr 2.3fr .8fr .8fr;gap:20px;align-items:center;
  padding:22px 0;border-bottom:1px solid var(--line-soft);
}
.price-row.head{padding:12px 0;border-bottom:1px solid var(--line)}
.price-row.head span{font-size:.82rem;color:var(--text-soft);font-weight:600}
.price-row .name{font-weight:700;font-size:1.05rem}
.price-row .desc{color:var(--text-soft);font-size:.93rem}
.price-row .num{font-family:var(--f-display);font-weight:400;font-size:1.06rem;letter-spacing:-.02em;text-align:right}
@media (max-width:760px){
  .price-row{grid-template-columns:1fr auto;gap:6px 16px}
  .price-row.head{display:none}
  .price-row .desc{grid-column:1/-1}
  .price-row .num{text-align:left;font-size:1rem}
  .price-row .num::before{content:attr(data-l) " ";font-size:.78rem;color:var(--text-soft);font-weight:600;}
  .price-row .num{display:inline-flex;gap:6px;align-items:baseline}
}
.price-foot{margin-top:22px;font-size:.92rem;color:var(--text-soft);max-width:60ch}

/* ---------- Anbieter (dark band) ---------- */
.band{background:var(--deep);color:var(--foam)}
.band h2{color:#fff}
.band .lead{color:rgba(237,243,242,.72);margin-top:22px}
.band-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
.band ul{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:2px}
.band li{display:flex;gap:14px;padding:15px 0;border-top:1px solid rgba(237,243,242,.14);font-size:.99rem}
.band li svg{flex:none;margin-top:3px;color:var(--aqua-lt)}
.band li b{}
.band li span{color:rgba(237,243,242,.68)}
.band-actions{margin-top:34px;display:flex;gap:12px;flex-wrap:wrap}
.notif{background:#0C3A40;border:1px solid rgba(237,243,242,.16);border-radius:20px;padding:22px}
.notif .top{display:flex;align-items:center;gap:10px;font-size:.82rem;color:rgba(237,243,242,.6)}
.notif .dot{width:8px;height:8px;border-radius:50%;background:var(--orange)}
.notif .title{font-family:var(--f-display);font-weight:400;letter-spacing:-.02em;font-size:1.24rem;margin-top:14px;line-height:1.2}
.notif dl{margin:18px 0 0;display:grid;grid-template-columns:auto 1fr;gap:9px 18px;font-size:.93rem}
.notif dt{color:rgba(237,243,242,.6)}
.notif dd{margin:0;font-weight:600}
.notif .row{display:flex;gap:10px;margin-top:22px}
.notif .fake{flex:1;text-align:center;padding:.7em;border-radius:999px;font-size:.9rem;font-weight:700}
.notif .fake.ok{background:var(--orange);color:#1A1206}
.notif .fake.no{border:1px solid rgba(237,243,242,.25);color:rgba(237,243,242,.8)}
@media (max-width:900px){.band-grid{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq{max-width:none}
details{border-bottom:1px solid var(--line-soft)}
details summary{
  list-style:none;cursor:pointer;padding:24px 0;display:flex;justify-content:space-between;gap:20px;
  font-weight:700;font-size:1.05rem;
}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";font-weight:400;font-size:1.5rem;line-height:1;color:var(--orange-dk);transition:transform .22s ease}
details[open] summary::after{transform:rotate(45deg)}
details .a{padding:0 0 24px;color:var(--text-soft);max-width:none;padding-right:8%}

/* ---------- CTA + Footer ---------- */
.endcta{background:var(--orange);color:#1A1206;padding-block:clamp(36px,4vw,54px)}
.endcta .wrap{text-align:center}
.endcta h2{max-width:26ch;margin-inline:auto;font-size:clamp(1.75rem,3.2vw,2.6rem)}
.endcta p{margin-top:12px;max-width:66ch;margin-inline:auto;color:rgba(26,18,6,.78);font-size:.97rem}
.endcta .btn-dark{background:var(--deep);color:#fff;border-color:var(--deep)}
.endcta .btn-dark:hover{background:#000;border-color:#000}
/* Nebenbutton auch au&szlig;erhalb des orangen Abschlussblocks, dort auf dunklem Grund */
.btn-ctaghost{border-color:rgba(237,243,242,.5);color:#fff;background:transparent}
.btn-ctaghost:hover{background:#fff;color:var(--deep);border-color:#fff}
.endcta .btn-ctaghost{border-color:rgba(26,18,6,.45);color:#1A1206;background:transparent}
.endcta .btn-ctaghost:hover{background:#1A1206;color:#fff;border-color:#1A1206}
.endcta form{display:flex;gap:10px;margin-top:32px;flex-wrap:wrap;max-width:470px;margin-inline:auto;justify-content:center}
.endcta input{
  flex:1 1 220px;font:inherit;padding:.9em 1.1em;border-radius:999px;border:1.5px solid rgba(26,18,6,.28);
  background:rgba(255,255,255,.62);color:#1A1206;
}
.endcta input::placeholder{color:rgba(26,18,6,.5)}
.endcta small{display:block;margin-top:16px;font-size:.8rem;color:rgba(26,18,6,.7);max-width:52ch;margin-inline:auto}

.site-foot{background:var(--deep);color:rgba(237,243,242,.72);padding-block:clamp(48px,6vw,72px)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.site-foot h4{margin:0 0 16px;font-size:.84rem;font-weight:700;color:#fff;}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:.93rem}
.site-foot a{text-decoration:none}
.site-foot a:hover{color:#fff}
.foot-bottom{margin-top:48px;padding-top:22px;border-top:1px solid rgba(237,243,242,.14);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.86rem}
.foot-brand p{margin-top:14px;font-size:.93rem;max-width:34ch}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}

/* ---------- One orchestrated entrance ---------- */
@media (prefers-reduced-motion:no-preference){
  .rise{opacity:0;transform:translateY(14px);animation:rise .7s cubic-bezier(.2,.7,.3,1) forwards}
  .rise:nth-child(1){animation-delay:.05s}
  .hero .lead{animation-delay:.16s}
  .hero-actions{animation-delay:.26s}
  .hero-note{animation-delay:.34s}