@font-face { font-family:"Atkinson"; src:url("fonts/atkinson-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Atkinson"; src:url("fonts/atkinson-700.woff2") format("woff2"); font-weight:700; font-display:swap; }
@font-face { font-family:"Fraunces"; src:url("fonts/fraunces.woff2") format("woff2"); font-weight:300 900; font-display:swap; }
:root { --navy:#12304A; --navy2:#0B2134; --sea:#1B6F80; --sand:#F5EEDF; --paper:#FFFCF6; --sun:#F2C14E; --sun2:#E3AC2A; --ink:#1D2935; --grey:#55616E; --line:#E6DCC8; --ok:#2E7D32; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:"Atkinson","Segoe UI",system-ui,-apple-system,Roboto,sans-serif; color:var(--ink); background:var(--paper); font-size:19px; line-height:1.6; -webkit-text-size-adjust:100%; }
a { color:var(--sea); text-underline-offset:3px; }
a:focus-visible, summary:focus-visible, .kauf:focus-visible { outline:3px solid var(--sun); outline-offset:3px; border-radius:6px; }
.w { max-width:820px; margin:0 auto; padding:0 20px; }
.ww { max-width:1100px; margin:0 auto; padding:0 20px; }
h1, h2, h3 { font-family:"Fraunces",Georgia,serif; font-weight:650; letter-spacing:-.01em; }
img, svg { max-width:100%; }

/* Kopfleiste */
.top { position:sticky; top:0; z-index:40; background:rgba(11,33,52,.97); color:#fff; box-shadow:0 6px 20px -10px rgba(0,0,0,.5); }
[id] { scroll-margin-top:78px; }
.top .ww { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:62px; }
.marke { display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font-weight:700; letter-spacing:.14em; font-size:16px; }
.marke svg { width:30px; height:30px; flex:none; }
.top .von { font-size:15px; color:#C9D4DE; letter-spacing:.06em; }
@media (max-width:440px) { .top .von { display:none; } }

/* Kopfbereich der Verkaufsseite */
.hero { position:relative; overflow:hidden; color:#fff; background:radial-gradient(900px 500px at 85% 0%, #1E4A6B 0%, transparent 60%), linear-gradient(180deg, var(--navy) 0%, var(--navy2) 100%); padding:34px 0 70px; }
.hero .rose { position:absolute; right:-140px; top:-60px; width:520px; height:520px; opacity:.09; pointer-events:none; }
.hero .w { position:relative; }
.kick { font-size:14px; font-weight:700; letter-spacing:.12em; color:#E9D9A8; }
.koord { display:inline-flex; align-items:center; gap:8px; margin-top:14px; padding:6px 14px; border:1px solid rgba(255,255,255,.25); border-radius:999px; font-size:15px; letter-spacing:.06em; color:#DCE5EC; }
.koord svg { width:16px; height:16px; }
.hero h1 { font-size:clamp(34px,7.4vw,54px); line-height:1.08; margin:16px 0 16px; color:#fff; }
.hero p.lead { font-size:20px; margin:0 0 26px; color:#E6EDF3; }
.kauf { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:68px; text-align:center; background:var(--sun); color:var(--navy2); text-decoration:none; font-weight:700; font-size:22px; line-height:1.25; padding:16px 18px; border-radius:14px; box-shadow:0 10px 0 -4px var(--sun2), 0 18px 34px -12px rgba(0,0,0,.55); transition:transform .15s; }
.kauf:hover { transform:translateY(-2px); }
.kauf small { display:block; font-weight:400; font-size:16px; margin-top:2px; }
.kauf .pfeil { display:inline-block; margin-left:8px; }
.vertrauen { list-style:none; padding:0; margin:24px 0 0; display:grid; gap:10px; font-size:17px; color:#E6EDF3; }
@media (min-width:620px) { .vertrauen { grid-template-columns:1fr 1fr; } }
.vertrauen li { display:flex; gap:10px; align-items:flex-start; }
.vertrauen li::before { content:"✓"; flex:none; display:grid; place-items:center; width:26px; height:26px; margin-top:1px; border-radius:50%; background:var(--sun); color:var(--navy2); font-weight:700; font-size:15px; }
.welle { position:absolute; left:0; right:0; bottom:-1px; width:100%; height:46px; display:block; }

/* Abschnitte */
section { padding:44px 0 6px; }
h2 { font-size:clamp(28px,5.4vw,36px); line-height:1.15; color:var(--navy); margin:0 0 16px; }
h2::before { content:""; display:block; width:46px; height:5px; border-radius:3px; background:var(--sun); margin-bottom:14px; }
p { margin:0 0 14px; }
.karten { display:grid; gap:16px; }
@media (min-width:760px) { .karten { grid-template-columns:1fr 1fr 1fr; } }
.karte { background:#fff; border:1px solid var(--line); border-radius:18px; padding:22px 20px; box-shadow:0 14px 30px -24px rgba(18,48,74,.6); }
.karte .ic { width:54px; height:54px; border-radius:16px; background:var(--sand); display:grid; place-items:center; margin-bottom:12px; }
.karte .ic svg { width:30px; height:30px; }
.karte h3 { margin:0 0 6px; font-size:22px; color:var(--navy); line-height:1.2; }
.karte p { margin:0; font-size:18px; }
.gruppen { list-style:none; padding:0; margin:0 0 18px; display:grid; gap:10px; }
@media (min-width:620px) { .gruppen { grid-template-columns:1fr 1fr; } }
.gruppen li { display:flex; gap:14px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 16px; font-size:18px; }
.gruppen .n { flex:none; min-width:46px; height:46px; padding:0 8px; border-radius:12px; background:var(--navy); color:#fff; display:grid; place-items:center; font-family:"Fraunces",Georgia,serif; font-weight:700; font-size:22px; }
.gruppen b { display:block; color:var(--navy); font-size:19px; }
.hinweis { display:flex; gap:12px; background:var(--sand); border-radius:14px; padding:16px 18px; }
.hinweis::before { content:"i"; flex:none; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--sea); color:#fff; font-weight:700; font-family:Georgia,serif; font-style:italic; }
.hinweis p { margin:0; }
.beispiel { position:relative; background:#fff; border:1px solid var(--line); border-radius:18px; padding:20px 20px 18px 20px; box-shadow:0 18px 40px -28px rgba(18,48,74,.7); }
.beispiel .pin { position:absolute; right:18px; top:-18px; width:40px; height:40px; }
.beispiel h3 { margin:0 44px 2px 0; color:var(--navy); font-size:23px; line-height:1.2; }
.beispiel .adr { color:var(--grey); font-size:17px; }
.badge { display:inline-block; background:var(--ok); color:#fff; font-size:15px; font-weight:700; padding:3px 10px; border-radius:6px; margin:10px 0 6px; }
.beispiel p { margin:6px 0 0; font-size:18px; }
.knopfreihe { display:flex; gap:10px; margin-top:16px; }
.knopfreihe span { flex:1; text-align:center; background:var(--sea); color:#fff; border-radius:10px; padding:12px; font-weight:700; font-size:18px; }
.knopfreihe span.r { background:#fff; color:var(--navy); border:2px solid var(--navy); }
.schritte { list-style:none; padding:0; margin:0; counter-reset:s; }
.schritte li { position:relative; counter-increment:s; padding:0 0 22px 66px; min-height:52px; }
.schritte li::before { content:counter(s); position:absolute; left:0; top:-2px; width:48px; height:48px; border-radius:50%; background:var(--sun); color:var(--navy2); display:grid; place-items:center; font-family:"Fraunces",Georgia,serif; font-weight:700; font-size:24px; }
.schritte li:not(:last-child)::after { content:""; position:absolute; left:23px; top:52px; bottom:4px; width:2px; background:var(--line); }
.schritte b { color:var(--navy); }
.wer { display:grid; gap:18px; background:var(--sand); border-radius:20px; padding:24px 22px; }
@media (min-width:700px) { .wer { grid-template-columns:120px 1fr; align-items:start; } }
.wer svg { width:96px; height:96px; }
.wer p:last-child { margin-bottom:0; }
.ehrlich p { border-left:5px solid var(--sea); background:#fff; border-radius:0 12px 12px 0; padding:14px 16px; }
.ehrlich b { color:var(--navy); }
.preis { position:relative; background:linear-gradient(180deg, var(--navy) 0%, var(--navy2) 100%); color:#fff; border-radius:24px; padding:30px 22px 26px; text-align:center; box-shadow:0 30px 60px -36px rgba(11,33,52,.9); }
.preis::before { content:""; position:absolute; inset:10px; border:2px dashed rgba(242,193,78,.45); border-radius:18px; pointer-events:none; }
.preis .kick { position:relative; }
.preis .betrag { position:relative; font-family:"Fraunces",Georgia,serif; font-size:clamp(54px,12vw,72px); font-weight:700; line-height:1; margin:12px 0 10px; color:#fff; }
.preis p { position:relative; margin:0 0 20px; color:#E6EDF3; font-size:18px; }
.preis .kauf { position:relative; max-width:460px; margin:0 auto; }
.faq details { background:#fff; border:1px solid var(--line); border-radius:14px; margin:0 0 10px; }
.faq summary { list-style:none; cursor:pointer; padding:16px 54px 16px 18px; min-height:56px; position:relative; font-weight:700; color:var(--navy); font-size:19px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; position:absolute; right:16px; top:50%; transform:translateY(-50%); width:30px; height:30px; border-radius:50%; background:var(--sand); display:grid; place-items:center; font-size:22px; line-height:1; }
.faq details[open] summary::after { content:"–"; }
.faq details p { margin:0; padding:0 18px 16px; }

/* Fuß */
.fuss { margin-top:56px; background:var(--navy2); color:#C9D4DE; font-size:16px; line-height:1.6; padding:34px 0 46px; }
.fuss a { color:#fff; }
.fuss .marke { margin-bottom:12px; }
.fuss p { margin:0 0 8px; }
.fuss .klein { font-size:15px; margin-top:14px; } .fuss .klein a { color:#C9D4DE; }
.ids { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; font-size:18px; }
.ids th, .ids td { text-align:left; padding:14px 16px; border-bottom:1px solid var(--line); }
.ids th { background:var(--sand); color:var(--navy); font-size:16px; letter-spacing:.04em; }
.ids tr:last-child td { border-bottom:0; }
.platz { border:2px dashed #C9BC9F; border-radius:18px; padding:22px 20px; color:var(--grey); background:#fff; }

/* Kaufleiste unten am Handy */
.leiste { position:fixed; left:0; right:0; bottom:0; z-index:50; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:rgba(11,33,52,.97); box-shadow:0 -10px 30px rgba(0,0,0,.25); transform:translateY(110%); transition:transform .25s ease; }
.leiste.an { transform:none; }
.leiste .kauf { min-height:58px; font-size:19px; padding:10px 14px; box-shadow:none; }
.leiste .kauf small { font-size:14px; }
@media (min-width:900px) { .leiste { display:none; } }

/* Startseite */
.start { position:relative; overflow:hidden; color:#fff; background:radial-gradient(800px 520px at 70% 10%, #1E4A6B 0%, transparent 62%), linear-gradient(180deg, var(--navy) 0%, var(--navy2) 100%); padding:26px 0 80px; }
.start .ww { position:relative; display:grid; gap:10px; align-items:center; }
@media (min-width:900px) { .start .ww { grid-template-columns:1.05fr 1fr; gap:30px; } .start .emblem { order:2; } }
.emblem { width:min(74vw,300px); margin:0 auto; aspect-ratio:1; }
@media (min-width:900px) { .emblem { width:min(100%,460px); } }
.emblem svg { width:100%; height:100%; overflow:visible; }
.start h1 { font-size:clamp(36px,8vw,60px); line-height:1.05; margin:6px 0 16px; color:#fff; }
.start h1 em { font-style:italic; color:var(--sun); font-weight:600; }
.start p.lead { font-size:20px; color:#E6EDF3; margin:0 0 26px; max-width:560px; }
.knoepfe { display:grid; gap:12px; max-width:520px; }
.kauf.hell { background:transparent; color:#fff; border:2px solid rgba(255,255,255,.55); box-shadow:none; font-size:20px; min-height:60px; }
.vier { display:grid; gap:14px; }
@media (min-width:700px) { .vier { grid-template-columns:1fr 1fr; } }
.intro p { max-width:760px; }
.preiszeile { margin-top:18px; background:var(--sand); border-radius:14px; padding:16px 18px; font-size:18px; }
.preiszeile b { color:var(--navy); }
.guides { display:grid; gap:18px; }
@media (min-width:760px) { .guides { grid-template-columns:1fr 1fr; } }
.ticket { display:flex; flex-direction:column; text-decoration:none; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:22px; overflow:hidden; box-shadow:0 22px 44px -30px rgba(18,48,74,.75); transition:transform .15s; }
.ticket:hover { transform:translateY(-3px); }
.ticket .kopf { position:relative; background:linear-gradient(135deg, var(--navy) 0%, var(--sea) 130%); color:#fff; padding:22px 22px 26px; overflow:hidden; }
.ticket .kopf svg.r { position:absolute; right:-40px; top:-40px; width:190px; height:190px; opacity:.13; }
.ticket .land { font-size:15px; letter-spacing:.12em; font-weight:700; color:#E9D9A8; }
.ticket h3 { margin:6px 0 4px; font-size:38px; line-height:1.05; color:#fff; }
.ticket .koord2 { font-size:15px; color:#C9D4DE; letter-spacing:.05em; }
.ticket .rumpf { padding:18px 22px 22px; border-top:2px dashed var(--line); display:flex; flex-direction:column; gap:10px; flex:1; }
.ticket .rumpf p { margin:0; font-size:18px; }
.ticket .fakten { display:flex; flex-wrap:wrap; gap:8px; }
.ticket .fakten span { background:var(--sand); border-radius:999px; padding:4px 12px; font-size:16px; font-weight:700; color:var(--navy); }
.ticket .los { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--sun); color:var(--navy2); border-radius:12px; padding:14px 16px; font-weight:700; font-size:19px; }
.bald { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.bald span { border:2px dashed #C9BC9F; color:var(--grey); border-radius:999px; padding:8px 16px; font-size:17px; font-weight:700; }
.partner { background:linear-gradient(135deg, #FFF5D9 0%, var(--sand) 100%); border:1px solid #EAD9A6; border-radius:24px; padding:28px 22px; }
.partner .zahl { font-family:"Fraunces",Georgia,serif; font-size:clamp(56px,13vw,84px); font-weight:700; color:var(--navy); line-height:1; }
.partner ol { padding-left:24px; margin:0 0 14px; } .partner li { margin:0 0 8px; }
.partner code { font-family:inherit; background:#fff; border:1px solid var(--line); border-radius:6px; padding:1px 7px; font-weight:700; color:var(--navy); }

/* Bewegung nur, wenn erwünscht */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } .kauf, .ticket, .leiste { transition:none; } .nadel { animation:none !important; } }
.nadel { transform-origin:50% 50%; transform-box:fill-box; animation:pendel 7s ease-in-out infinite; }
@keyframes pendel { 0%,100% { transform:rotate(-9deg); } 50% { transform:rotate(7deg); } }