@font-face{font-family:'Plus Jakarta Sans';src:url(fonts/PlusJakartaSans-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url(fonts/PlusJakartaSans-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url(fonts/PlusJakartaSans-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url(fonts/PlusJakartaSans-800.woff2) format('woff2');font-weight:800;font-style:normal;font-display:swap}

/* Farben und Maße kommen 1:1 aus tokens.json der Gartelo Corporate Identity.
   Die Seite ist hell. Es gibt bewusst kein Dunkel-Thema. */
:root{
--bg-100:#eef3f1;
--bg-200:#ffffff;
--bg-300:#e1eae7;
--ink:#102423;
--ink-soft:#3e5451;
--ink-muted:#566a67;
--petrol:#0b4a4a;
--petrol-deep:#073636;
--mint:#2bd4a3;
--mint-deep:#0b7a5b;
--mint-tint:#dcf5ec;
--primary:var(--petrol);
--on-primary:#ffffff;
--on-petrol:#ffffff;
--on-mint:#102423;
--line:#d3dedb;
--line-strong:#6f8480;
--focus:var(--mint-deep);
--warn:#8a5a00;
--warn-tint:#fcefd4;
--danger:#b42318;
--danger-tint:#fbe4e1;
--shadow-sm:0 1px 2px rgba(16,36,35,0.08);
--shadow-md:0 1px 2px rgba(16,36,35,0.08), 0 12px 32px rgba(11,74,74,0.12);
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:24px;
--space-6:32px;
--space-7:48px;
--space-8:64px;
--space-9:96px;
--radius-sm:6px;
--radius-md:12px;
--radius-lg:20px;
--radius-xl:28px;
--radius-pill:999px;
color-scheme:light;
--font-sans:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,sans-serif;
--page-gutter:24px;
}
@media (max-width:560px){:root{--page-gutter:16px}}

*{box-sizing:border-box}
html{scroll-padding-top:16px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg-100);color:var(--ink);font:400 16px/1.6 var(--font-sans);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
main{flex:1 0 auto}
h1,h2,h3,p,ul,ol,fieldset,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
fieldset{border:0;min-width:0}
a{color:var(--mint-deep);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.wrap{width:100%;max-width:1120px;margin-inline:auto;padding-inline:var(--page-gutter)}
.label{font:700 12px/1.2 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Buttons */
.btn{font:700 15px/1 var(--font-sans);height:48px;padding:0 24px;border-radius:var(--radius-md);border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;white-space:nowrap}
.btn-p{background:var(--primary);color:var(--on-primary)}
.btn-p:hover{background:var(--petrol-deep)}
.btn-p:disabled{opacity:.6;cursor:default}
.btn-t{background:transparent;color:var(--petrol);padding:0}
.btn-t:hover{text-decoration:underline;text-underline-offset:4px}

/* Header */
.top{background:var(--bg-200)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;padding-block:12px}
.logo{display:block;height:32px;flex:none}
.logo img{display:block;height:100%;width:auto}

/* Hero */
.hero{padding-block:var(--space-8) var(--space-9)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--space-7);align-items:center}
.hero h1{font:700 clamp(40px,6.4vw,64px)/1.05 var(--font-sans);letter-spacing:-.025em;margin-block:var(--space-4) var(--space-5);text-wrap:balance}
.hero .sub{font:500 18px/1.5 var(--font-sans);color:var(--ink-soft);max-width:34em}
.hero .cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-5);margin-top:var(--space-6)}
.hero-card{display:flex;flex-direction:column;gap:var(--space-3);min-width:0}
.hero-card .cap{font:400 14px/1.5 var(--font-sans);color:var(--ink-muted)}

/* Tourkarte (Komponente Card) */
.gc{background:var(--bg-200);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:12px;color:var(--ink)}
.gc h3{font:700 21px/1.3 var(--font-sans);letter-spacing:-.01em}
.gc-stops{display:flex;flex-direction:column;gap:2px}
.gc-stops li{display:flex;align-items:center;gap:12px;min-height:36px;font:400 14px/1.3 var(--font-sans);color:var(--ink)}
.gc-stops li span:last-child{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--ink-soft);white-space:nowrap}
.gc-stops .mk{width:16px;height:16px;flex:none;display:flex;align-items:center;justify-content:center}
.gc-stops .mk svg{width:16px;height:16px;display:block}
.gc-stops .now{font-weight:700}
.gc-stops .now .mk i{width:8px;height:8px;border-radius:50%;background:var(--ink);display:block}
.gc-stops .open{color:var(--ink-soft)}
.gc-stops .open .mk i{width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--line-strong);display:block}
.gc-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-top:12px;border-top:1px solid var(--line)}
.gc-row b{font:700 13px/1 var(--font-sans);color:var(--ink-soft)}
.gc-num{font:800 20px/1 var(--font-sans);font-variant-numeric:tabular-nums}
.leaf{fill:var(--mint)}
.mk-frame{fill:var(--petrol)}

/* Sektionen */
.sec{padding-block:0 var(--space-9)}
.sec-head{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-7);max-width:44em}
.sec h2,.h2-big{font:700 clamp(30px,4.4vw,44px)/1.1 var(--font-sans);letter-spacing:-.02em;text-wrap:balance}
.sec-head p:not(.label),.lead{font:500 18px/1.5 var(--font-sans);color:var(--ink-soft)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-5)}
.step{background:var(--bg-200);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:var(--space-3);min-width:0}
.step h3{font:700 21px/1.3 var(--font-sans);letter-spacing:-.01em}
.step p{font:400 16px/1.6 var(--font-sans);color:var(--ink-soft)}
.scope{margin-top:var(--space-6);font:400 16px/1.6 var(--font-sans);color:var(--ink-soft);max-width:44em}

/* Preisrechner */
.calc{gap:var(--space-7)}
.inputs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-7)}
.verdict{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-7);align-items:start}
.panel{background:var(--bg-200);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:var(--space-6);min-width:0}
.field{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.field>label,.field>legend,.legend{font:700 15px/1.3 var(--font-sans);color:var(--ink)}
.hint{font:400 14px/1.5 var(--font-sans);color:var(--ink-muted)}
.slider{display:grid;grid-template-columns:minmax(0,1fr) 88px;gap:var(--space-4);align-items:center}
input[type=range]{width:100%;accent-color:var(--primary);height:48px;margin:0}
.num,.txt{font:500 16px/1 var(--font-sans);height:48px;padding:0 var(--space-3);border-radius:var(--radius-md);border:1px solid var(--line-strong);background:var(--bg-200);color:var(--ink);width:100%;min-width:0;font-variant-numeric:tabular-nums}
.txt{font-variant-numeric:normal}
.num::placeholder,.txt::placeholder{color:var(--ink-muted)}
.stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);border:0;margin-top:var(--space-3)}
.stage{position:relative;display:block;cursor:pointer;min-width:0}
.stage input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.stage .card{display:flex;flex-direction:column;gap:var(--space-2);height:100%;padding:var(--space-5);border-radius:var(--radius-lg);background:var(--bg-100);box-shadow:inset 0 0 0 1px var(--line)}
.stage:hover .card{background:var(--bg-300)}
.stage input:checked + .card{background:var(--bg-200);box-shadow:inset 0 0 0 2px var(--primary),var(--shadow-md)}
.stage input:focus-visible + .card{outline:2px solid var(--focus);outline-offset:2px}
.stage .name{font:700 12px/1.2 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted)}
.stage .price{font:800 40px/1 var(--font-sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stage .price small{font:500 14px/1.2 var(--font-sans);letter-spacing:0;color:var(--ink-muted);margin-left:4px}
.stage .scope-line{font:400 14px/1.5 var(--font-sans);color:var(--ink-soft)}
.stage .fit{display:none;align-self:flex-start;height:28px;align-items:center;padding:0 12px;border-radius:var(--radius-pill);background:var(--primary);color:var(--on-primary);font:700 13px/1 var(--font-sans)}
.stage.is-fit .fit{display:inline-flex}
.included{font:400 14px/1.6 var(--font-sans);color:var(--ink-soft)}
.included b{color:var(--ink)}
.seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2);margin-top:var(--space-2)}
.seg label{position:relative;display:block;cursor:pointer}
.seg input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.seg span{display:flex;align-items:center;justify-content:center;height:48px;border-radius:var(--radius-md);background:var(--bg-200);box-shadow:inset 0 0 0 1px var(--line-strong);font:700 15px/1 var(--font-sans);color:var(--ink);text-align:center}
.seg label:hover span{background:var(--bg-300)}
.seg input:checked + span{background:var(--primary);color:var(--on-primary);box-shadow:none}
.seg input:focus-visible + span{outline:2px solid var(--focus);outline-offset:2px}
.maxp{display:grid;grid-template-columns:120px auto;gap:var(--space-3);align-items:center}
.maxp .unit{font:500 15px/1 var(--font-sans);color:var(--ink-soft)}

/* Warteliste */
.wl{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--space-5);align-items:start}
.wl-intro{display:flex;flex-direction:column;gap:var(--space-4)}
.wl-fields{display:flex;flex-direction:column;gap:var(--space-5)}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.chip{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:var(--radius-pill);background:var(--bg-300);color:var(--ink-soft);font:700 13px/1 var(--font-sans);font-variant-numeric:tabular-nums}
.check{display:grid;grid-template-columns:24px minmax(0,1fr);gap:var(--space-3);align-items:start}
.check input{width:24px;height:24px;margin:0;accent-color:var(--primary)}
.check label{font:400 14px/1.55 var(--font-sans);color:var(--ink-soft)}
.err{font:700 14px/1.5 var(--font-sans);color:var(--danger);background:var(--danger-tint);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.done{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4)}
.done h3,.status h1{font:700 30px/1.2 var(--font-sans);letter-spacing:-.015em;text-wrap:balance}
.done p,.status p{font:400 16px/1.6 var(--font-sans);color:var(--ink-soft)}
.done p b,.status p b{color:var(--ink)}
.done .small,.status .small{font-size:14px;color:var(--ink-muted)}
.done .preview-note{font:700 14px/1.5 var(--font-sans);color:var(--warn);background:var(--warn-tint);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4)}
.ico-mail{color:var(--petrol)}
.js-note{font:400 14px/1.5 var(--font-sans);color:var(--ink-muted)}

/* Statusseiten (bestätigt, Link ungültig) */
.status-wrap{padding-block:var(--space-9)}
.status{max-width:560px;margin-inline:auto;background:var(--bg-200);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);padding:var(--space-8) var(--space-7);display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4)}

/* Rechtstexte (Impressum, Datenschutz) */
.page{padding-block:var(--space-8) var(--space-9)}
.page .wrap{max-width:860px}
.page-head{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-6)}
.page-head h1{font:700 clamp(34px,5vw,48px)/1.1 var(--font-sans);letter-spacing:-.025em;text-wrap:balance}
.legal{background:var(--bg-200);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:var(--space-7);display:flex;flex-direction:column;gap:var(--space-7)}
.legal section{display:flex;flex-direction:column;gap:var(--space-3)}
.legal h2{font:700 22px/1.3 var(--font-sans);letter-spacing:-.015em}
.legal h3{font:700 16px/1.4 var(--font-sans)}
.legal p,.legal li,.legal dd,.legal td{font:400 16px/1.6 var(--font-sans);color:var(--ink)}
.legal ul{display:flex;flex-direction:column;gap:var(--space-2);padding-left:20px;list-style:disc}
.legal li::marker{color:var(--ink-muted)}
.legal dl{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:var(--space-2) var(--space-5)}
.legal dt{font:700 16px/1.6 var(--font-sans);color:var(--ink)}
.legal address{font-style:normal}
.tbl{overflow-x:auto;border-radius:var(--radius-md);box-shadow:inset 0 0 0 1px var(--line)}
.tbl table{border-collapse:collapse;width:100%;min-width:420px}
.tbl th{font:700 12px/1.2 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);text-align:left;padding:var(--space-3) var(--space-4);background:var(--bg-100)}
.tbl td{padding:var(--space-3) var(--space-4);border-top:1px solid var(--line);vertical-align:top}
.tbl td:first-child{font-weight:700;width:42%}

/* Footer */
.foot{background:var(--petrol-deep);color:var(--on-petrol);padding-block:var(--space-7);flex:none}
.foot .wrap{display:flex;flex-wrap:wrap;gap:var(--space-5) var(--space-7);justify-content:space-between;align-items:flex-start}
.foot .logo{height:28px}
.foot p{font:400 14px/1.6 var(--font-sans);max-width:36em;color:#d5e3e0}
.foot nav{display:flex;gap:var(--space-5)}
.foot a{color:#fff;font:700 15px/1.2 var(--font-sans);text-decoration:none}
.foot a:hover{text-decoration:underline;text-underline-offset:4px}
.foot-col{display:flex;flex-direction:column;gap:var(--space-4)}

@media (max-width:880px){
.hero{padding-block:var(--space-7) var(--space-8)}
.hero .wrap,.wl,.inputs,.verdict{grid-template-columns:minmax(0,1fr)}
.inputs,.verdict{gap:var(--space-6)}
.calc{gap:var(--space-6)}
.sec{padding-block:0 var(--space-8)}
.sec-head{margin-bottom:var(--space-6)}
.page{padding-block:var(--space-7) var(--space-8)}
.status-wrap{padding-block:var(--space-8)}
}
@media (max-width:760px){.stages{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){
.panel{padding:var(--space-5)}
.step{padding:var(--space-5)}
.maxp{grid-template-columns:96px auto}
.seg span{font-size:14px;padding:0 4px}
.legal{padding:var(--space-5);gap:var(--space-6)}
.legal dl{grid-template-columns:minmax(0,1fr);gap:0}
.legal dd{margin-bottom:var(--space-3)}
.status{padding:var(--space-6) var(--space-5)}
.tbl td:first-child{width:auto}
}