:root{
  --bg:#FFFFFF; --surface:#FFFFFF; --ink:#0B1F33; --muted:#4A5F73;
  --sea:#03549A; --sign:#0A6FD1; --on-sign:#fff; --line:#DDE5EC; --dark:#0B1F33; --on-dark:#E8F0F7;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0A1824; --surface:#112638; --ink:#E8F0F7; --muted:#9DB2C5;
    --sea:#6AA9E0; --line:#25415A; --dark:#06121D; --on-dark:#E8F0F7;
  }
}
:root[data-theme="dark"]{
  --bg:#0A1824; --surface:#112638; --ink:#E8F0F7; --muted:#9DB2C5;
  --sea:#6AA9E0; --line:#25415A; --dark:#06121D; --on-dark:#E8F0F7;
}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 16px);scroll-behavior:smooth}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.6 "Source Sans 3",system-ui,sans-serif}
h1,h2,h3{font-family:"Sora",system-ui,sans-serif;line-height:1.05;margin:0;letter-spacing:-.03em}
a{color:inherit}
:focus-visible{outline:3px solid var(--sign);outline-offset:3px}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px}


.btn{display:inline-block;background:var(--sign);color:var(--on-sign);font-weight:600;text-decoration:none;padding:14px 26px;border-radius:999px;border:0}
.btn:hover{filter:brightness(1.06)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}

.hero{padding:72px 0 40px}
.hero h1{font-weight:700;font-size:clamp(2.2rem,7vw,4.6rem);max-width:15ch;line-height:1.1}
.hero p{max-width:52ch;color:var(--muted);font-size:1.2rem;margin:24px 0 32px}
.hero .actions{display:flex;gap:14px;flex-wrap:wrap}

.road{position:relative;height:56px;margin-top:56px;overflow:hidden}
.road::after{content:"";position:absolute;left:0;right:0;bottom:10px;border-top:4px dashed var(--ink);opacity:.35}
.road svg{position:absolute;bottom:14px;left:0;width:190px;height:auto;color:var(--sea);animation:drive 5s cubic-bezier(.3,.6,.3,1) both}
@keyframes drive{from{transform:translateX(-240px)}to{transform:translateX(min(70vw,760px))}}

section{padding:72px 0}
section h2{font-weight:700;font-size:clamp(1.7rem,4vw,2.5rem);line-height:1.15;margin-bottom:16px}
.lead{max-width:60ch;color:var(--muted)}

.offer{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:36px}
.card h3{font-weight:700;font-size:1.45rem;line-height:1.2;margin-bottom:12px}
.card p{margin:0 0 24px;color:var(--muted)}
.card a.more{font-weight:600;color:var(--sea);text-underline-offset:4px}
.card.main{background:var(--dark);color:var(--on-dark);border-color:var(--dark)}
.card.main p{color:#B9CCDD}
.card.main a.more{color:#8CC2F5}

.booking{margin-top:32px;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:24px;min-height:200px}
#app-booking-container:empty::before{content:"Das Buchungsmodul wird hier geladen, sobald die Seite auf deiner eigenen Domain läuft.";color:var(--muted)}

.protect{background:var(--sea);color:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .protect{background:#0B3F70}}
:root[data-theme="dark"] .protect{background:#0B3F70}
.protect .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.protect p{max-width:50ch;margin:0;color:#E1EEF9}
.protect .btn{justify-self:start}

.contact{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:32px}
.contact dl{margin:0;display:grid;gap:18px}
.contact dt{font-weight:600;color:var(--muted);font-size:.95rem}
.contact dd{margin:2px 0 0;font-size:1.2rem}
.contact dd a{text-underline-offset:4px}
.note{background:var(--surface);border:1px solid var(--line);border-left:6px solid var(--sign);border-radius:12px;padding:24px 28px}
.note strong{font-family:"Sora",sans-serif;font-size:1.3rem;display:block;margin-bottom:6px}

footer{background:var(--dark);color:var(--on-dark);padding:36px 0 calc(36px + env(safe-area-inset-bottom,0px))}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.95rem}
footer nav{display:flex;gap:20px;flex-wrap:wrap}
footer nav a{color:#B9CCDD;text-decoration:none}
footer nav a:hover{color:#fff}

@media (max-width:760px){
  .offer,.contact,.protect .wrap{grid-template-columns:1fr}
  .hero{padding-top:44px}
  section{padding:52px 0}
  .card{padding:28px}
}
@media (prefers-reduced-motion:reduce){
  .road svg{animation:none;transform:translateX(40vw)}
  html{scroll-behavior:auto}
}

.page-head{padding:56px 0 72px}
.page-head h1{font-weight:700;font-size:clamp(2.1rem,6vw,3.8rem);margin-bottom:16px}

/* Header */
.topbar{background:#03549A;color:#DCEAF7;font-size:.9rem}
.topbar .wrap{display:flex;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.topbar a{text-decoration:none}
.topbar a:hover{color:#fff}
.topbar .contact-links{display:flex;gap:24px;flex-wrap:wrap}
header{background:#fff;color:#0B1F33;border-bottom:3px solid var(--sign)}
header .wrap{display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:12px;padding-bottom:12px}
.brand{display:block;line-height:0}
.brand img{height:56px;width:auto;max-width:100%;display:block}
header nav{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
header nav a.link{color:#0B1F33;text-decoration:none;font-weight:600;padding:10px 14px;border-radius:999px}
header nav a.link:hover{color:#03549A;background:rgba(3,84,154,.09)}
header nav a.link[aria-current="page"]{color:#fff;background:#03549A}
header nav .btn{padding:10px 20px;margin-left:8px}
@media (max-width:760px){
  .topbar .hours{display:none}
  .topbar .wrap{justify-content:center}
  header .wrap{justify-content:center}
  header nav{justify-content:center}
  header nav .btn{margin-left:0}
}


.protect .btn{background:#fff;color:#03549A}

/* Video-Hero */
.hero-video{position:relative;color:#fff;min-height:min(78vh,640px);display:flex;align-items:center;overflow:hidden;background:#06121D}
.hero-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,40,78,.88) 0%,rgba(3,40,78,.55) 55%,rgba(3,40,78,.15) 100%)}
.hero-content{position:relative;width:100%;padding-top:72px;padding-bottom:72px}
.hero-video h1{font-weight:700;font-size:clamp(2.2rem,7vw,4.6rem);max-width:15ch;line-height:1.1;margin:0}
.hero-video p{max-width:52ch;color:#E1EEF9;font-size:1.2rem;margin:24px 0 32px}
.hero-video .actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-video .btn.ghost{color:#fff;box-shadow:inset 0 0 0 2px #fff;background:transparent}
.road{margin-top:28px}
.film{margin-top:32px;border-radius:20px;overflow:hidden;background:#000;box-shadow:0 12px 40px rgba(3,40,78,.25)}
.film video{display:block;width:100%;height:auto;aspect-ratio:16/9}
@media (prefers-reduced-motion:reduce){
  .hero-video video{display:none}
  .hero-video{background:#06121D url(hero-poster.jpg) center/cover}
}

/* Mobile-Menü */
.menu-toggle{display:none;align-items:center;gap:12px;background:#03549A;color:#fff;border:0;border-radius:12px;padding:12px 16px;font:600 1rem "Source Sans 3",system-ui,sans-serif;cursor:pointer}
.menu-toggle .bars{display:block;width:20px;height:2px;background:currentColor;box-shadow:0 6px 0 currentColor,0 -6px 0 currentColor;transition:box-shadow .2s}
.menu-toggle[aria-expanded="true"] .bars{box-shadow:0 0 0 currentColor,0 0 0 currentColor}
@media (max-width:760px){
  header .wrap{flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center}
  .brand img{height:46px}
  .menu-toggle{display:inline-flex}
  header nav{display:none;width:100%;flex-direction:column;align-items:stretch;gap:4px;padding-top:10px;border-top:1px solid var(--line)}
  header nav.open{display:flex}
  header nav a.link{padding:14px 16px;border-radius:12px}
  header nav .btn{margin:6px 0 4px;text-align:center}
}

/* Straße im Titelbereich */
.hero-video .road{position:absolute;left:0;right:0;bottom:0;margin:0;height:56px;color:#fff;--bg:#0A3A66;z-index:1}
.hero-video .road::after{border-top-color:#fff;opacity:.55}
.hero-video .hero-content{padding-bottom:96px}

/* Buchungsmodul über die volle Breite */
.booking-full{width:100%;max-width:none;margin:32px 0 0;padding:0 clamp(8px,2vw,32px);background:transparent;border:0;border-radius:0;min-height:60vh}
.booking-full #app-booking-container{width:100%}

/* Schutz-Paket-Seite */
section.tight{padding:40px 0}
.price-badge{display:inline-flex;align-items:baseline;gap:10px;margin-top:24px;background:var(--sea);color:#fff;border-radius:999px;padding:12px 28px}
.price-badge strong{font:700 2rem "Sora",sans-serif}
.benefits{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:28px}
.benefits .card{padding:28px}
.benefits .card h3{font-size:1.2rem}
.benefits .card p{margin:0}
.checks{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px 32px}
.checks li{position:relative;padding-left:32px}
.checks li::before{content:"";position:absolute;left:4px;top:.45em;width:8px;height:14px;border:solid var(--sea);border-width:0 3px 3px 0;transform:rotate(45deg) scale(.9)}
.table-wrap{overflow-x:auto;margin-top:28px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:520px}
caption{text-align:left;padding:14px 20px;color:var(--muted);font-size:.95rem}
th,td{padding:14px 20px;text-align:left;border-top:1px solid var(--line)}
thead th{background:var(--sea);color:#fff;border-top:0;font-weight:600}
tbody th{font-weight:600}
tbody tr:nth-child(even){background:rgba(3,84,154,.05)}
.rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px;margin-top:28px}
.rules h3{font-size:1.1rem;margin-bottom:8px}
.rules p{margin:0;color:var(--muted)}
.fine{margin-top:32px;font-size:.95rem;color:var(--muted);max-width:75ch}
.fine a{color:var(--sea)}
.cta-band{background:var(--sea);color:#fff;text-align:center;padding:64px 0}
.cta-band h2{color:#fff}
.cta-band p{margin:0 0 24px;color:#E1EEF9}
.cta-band .btn{background:#fff;color:#03549A}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .cta-band,:root:not([data-theme="light"]) .price-badge,:root:not([data-theme="light"]) thead th{background:#0B3F70}
  :root:not([data-theme="light"]) .checks li::before{border-color:#6AA9E0}
}

.banner{margin:28px 0 0}
.banner a{display:inline-block;line-height:0;border-radius:8px;overflow:hidden;box-shadow:0 4px 18px rgba(3,40,78,.18)}
.banner img{display:block;max-width:100%;height:auto;border:0}

.flyer{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:28px}
.flyer a{display:block;line-height:0;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:0 6px 24px rgba(3,40,78,.12)}
.flyer img{display:block;width:100%;height:auto}
@media (max-width:760px){.flyer{grid-template-columns:1fr}}

.page-head.compact{padding:36px 0 8px}
.page-head.compact h1{margin-bottom:8px}
.page-head.compact .lead a{color:var(--sea);font-weight:600;text-underline-offset:4px}
section.flyer-section{padding-top:16px}
.flyer-section .flyer{margin-top:8px}

.head-line{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px}
.page-head.compact .head-line .btn{color:var(--on-sign);font-weight:600;padding:10px 22px}



/* Footer geordnet */
footer{padding:36px 0 calc(24px + env(safe-area-inset-bottom,0px));font-size:1rem}
footer .wrap{display:block}
footer .f-cols{display:grid;grid-template-columns:1.3fr 1.3fr 1fr;gap:28px 40px}
footer .f-title{font:700 1.15rem "Sora",sans-serif;color:#fff;margin:0 0 10px}
footer .f-head{font-weight:600;color:#fff;margin:0 0 10px}
footer address{font-style:normal;color:#B9CCDD;line-height:1.55}
footer .f-hint{margin:12px 0 0;color:#8CC2F5;font-weight:600;font-size:.95rem}
footer .f-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
footer a{color:#B9CCDD;text-decoration:none}
footer a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
footer .f-copy{margin:28px 0 0;color:#8FA9BE;font-size:.88rem}
@media (max-width:760px){footer .f-cols{grid-template-columns:1fr 1fr}footer .f-cols>div:first-child{grid-column:1/-1}}

/* Kontaktformular */
.form-layout{display:grid;grid-template-columns:1.7fr 1fr;gap:40px;align-items:start}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-weight:600;font-size:.95rem}
.field input[type=text],.field input[type=email],.field input[type=tel],.field select,.field textarea{width:100%;font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.field textarea{resize:vertical;min-height:140px}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--sea);outline-offset:1px;border-color:var(--sea)}
.field.check{flex-direction:row;align-items:flex-start;gap:12px}
.field.check input{margin-top:5px;width:20px;height:20px;flex:none;accent-color:var(--sea)}
.field.check label{font-weight:400;font-size:.95rem;color:var(--muted)}
.field.check a{color:var(--sea)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact-form .btn{border:0;cursor:pointer;font:inherit;font-weight:600}
.contact-box{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:28px}
.contact-box h2{font-size:1.3rem;margin-bottom:14px}
.contact-box address{font-style:normal;margin-bottom:14px}
.contact-box a{color:var(--sea);text-underline-offset:4px}
.contact-box .hint{margin:14px 0 0;color:var(--muted)}
.status{border-radius:14px;padding:16px 20px;margin-bottom:20px;font-weight:600}
.status.ok{background:#E3F4E8;color:#14532D}
.status.err{background:#FDE8E8;color:#7F1D1D}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .status.ok{background:#12351F;color:#BDEBCB}
  :root:not([data-theme="light"]) .status.err{background:#3D1717;color:#F8C9C9}
}
@media (max-width:860px){.form-layout{grid-template-columns:1fr}}
@media (max-width:560px){.contact-form{grid-template-columns:1fr}}

/* Rechtliche Seiten */
.legal{max-width:75ch}
.legal h2{font-size:1.25rem;margin:32px 0 10px}
.legal h2:first-child{margin-top:0}
.legal p{margin:0 0 12px}
.legal a{color:var(--sea);text-underline-offset:4px}
mark.todo{background:#FFE08A;color:#3A2A00;padding:2px 6px;border-radius:6px;font-weight:600}

/* Karte */
.map-box{margin-top:24px;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--surface);min-height:260px;display:flex}
.map-box iframe{width:100%;height:420px;border:0;display:block}
.map-consent{margin:auto;padding:32px 24px;max-width:56ch;text-align:center}
.map-consent p{margin:0 0 16px;color:var(--muted)}
.map-consent a{color:var(--sea)}
.map-actions{display:flex;gap:12px 20px;justify-content:center;align-items:center;flex-wrap:wrap}
.map-actions .btn{border:0;cursor:pointer;font:inherit;font-weight:600}

/* Dachboxen */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
@media (max-width:700px){.facts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.facts{grid-template-columns:1fr}}
.fact{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px 22px;display:flex;flex-direction:column;gap:4px}
.fact strong{font:700 1.45rem/1.2 "Sora",sans-serif;color:var(--sea)}
.fact span{color:var(--muted);font-size:.95rem}
.prices{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:28px}
.price-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:32px;display:flex;flex-direction:column;gap:6px}
.price-card h3{font-size:1.2rem}
.price-card .amount{margin:6px 0 12px;display:flex;align-items:baseline;gap:10px;color:var(--muted)}
.price-card .amount strong{font:700 2.4rem/1 "Sora",sans-serif;color:var(--ink)}
.price-card ul{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:8px}
.price-card li{padding:8px 0;border-top:1px solid var(--line)}
.price-card .btn{align-self:flex-start;margin-top:auto}
@media (max-width:700px){.prices{grid-template-columns:1fr}}

/* Foto */
.banner-img{display:block;width:100%;max-height:300px;object-fit:cover;border-radius:20px;margin-top:24px}
.banner-img.tall{max-height:none;height:auto;object-fit:contain}

/* Design A: hell und klar */
:root{--band:#EEF4FA;--band-ink:#10253A;--band-muted:#4A5F73}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--band:#112638;--band-ink:#E8F0F7;--band-muted:#9DB2C5}}
:root[data-theme="dark"]{--band:#112638;--band-ink:#E8F0F7;--band-muted:#9DB2C5}
.hero-shade{background:linear-gradient(90deg,rgba(11,31,51,.82) 0%,rgba(11,31,51,.35) 70%,rgba(11,31,51,.08) 100%)}
.card,.card.main{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-top:4px solid var(--sea);border-radius:6px;box-shadow:none}
.card.main p{color:var(--muted)}
.card.main a.more{color:var(--sea)}
.price-card,.contact-box{border-radius:6px;border-top:4px solid var(--sea)}
.fact{border-radius:6px;border-top:3px solid var(--sea)}
.table-wrap,.flyer a,.banner-img,.map-box{border-radius:6px}
.field input[type=text],.field input[type=email],.field input[type=tel],.field select,.field textarea{border-radius:8px}
.protect,.cta-band{background:var(--band);color:var(--band-ink)}
.protect h2,.cta-band h2{color:var(--band-ink)}
.protect p,.cta-band p{color:var(--band-muted)}
.protect .btn,.cta-band .btn{background:var(--sign);color:var(--on-sign)}

/* Frage-Pop-up */
dialog.ask{border:0;border-radius:8px;padding:28px;width:calc(100% - 32px);max-width:520px;background:var(--surface);color:var(--ink);box-shadow:0 24px 70px rgba(11,31,51,.35)}
dialog.ask::backdrop{background:rgba(11,31,51,.55)}
.ask-form{grid-template-columns:1fr;position:relative;gap:14px}
.ask-form h2{font-size:1.4rem;padding-right:36px;margin:0}
.ask-fields{display:grid;gap:14px}
.ask-close{position:absolute;top:-8px;right:-8px;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:var(--ink);font-size:1.8rem;line-height:1;cursor:pointer}
.ask-close:hover{background:var(--band)}
.ask-form .btn{border:0;cursor:pointer;font:inherit;font-weight:600;justify-self:start}

/* Winterangebot */
section.tight.promo{padding:32px 0 0}
.promo a{display:block;line-height:0}
.promo-img{display:block;width:100%;height:auto;border-radius:6px;border:1px solid var(--line)}
p.promo{margin:24px 0 0;line-height:0}

/* Startseite: volle Breite */
body.home main .wrap,#v-home .wrap{max-width:none;padding-left:clamp(24px,4vw,80px);padding-right:clamp(24px,4vw,80px)}
body.home .hero-video h1,#v-home .hero-video h1{max-width:18ch}
body.home .hero-video p,#v-home .hero-video p{max-width:60ch}