:root{
    --stempel:#E63946;
    --tinte:#16223A;
    --gold:#FFB703;
    --gruen:#2A9D8F;
    --papier:#FFFDF8;
    --sand:#FBEEDC;
    --grau:#5B6472;
    --linie:#E8E2D6;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ min-height:100%; background:var(--papier); }
body{
    min-height:100vh; background-attachment:fixed;
    font-family:'Instrument Sans', sans-serif; color:var(--tinte);
    background:
        radial-gradient(1100px 600px at 85% 15%, rgba(255,183,3,.12), transparent 60%),
        radial-gradient(900px 700px at 10% 90%, rgba(230,57,70,.07), transparent 55%),
        var(--papier);
    display:flex; flex-direction:column; align-items:center;
    padding:32px 20px;
    overflow-x:hidden;
}

/* ---------- Land/Sprache ---------- */
.cs-leiste{ position:fixed; top:16px; right:20px; z-index:40; }
.cs-land-knopf{
    display:inline-flex; align-items:center; gap:9px; cursor:pointer;
    background:#fff; border:1px solid var(--linie); border-radius:999px;
    padding:8px 16px 8px 10px; font:700 13.5px 'Instrument Sans', sans-serif; color:var(--tinte);
    box-shadow:0 4px 12px rgba(22,34,58,.06);
}
.cs-land-knopf:hover{ border-color:var(--tinte); }
.cs-land-knopf .flagge{ display:block; width:24px; height:16px; border-radius:3px; overflow:hidden; box-shadow:0 0 0 1px rgba(22,34,58,.1); }
.cs-land-knopf .flagge svg{ display:block; width:100%; height:100%; }
.cs-land-knopf .pfeil{ width:12px; height:12px; }

.overlay{
    position:fixed; inset:0; background:rgba(22,34,58,.55); z-index:50;
    display:none; align-items:center; justify-content:center; padding:20px;
}
.overlay.offen{ display:flex; }
.overlay-box{
    background:var(--papier); border-radius:24px; max-width:520px; width:100%; max-height:85vh; overflow-y:auto;
    padding:34px 36px 30px; position:relative; box-shadow:0 30px 70px rgba(22,34,58,.35);
}
.overlay-box h3{ font-family:'Bricolage Grotesque', sans-serif; font-size:26px; font-weight:800; margin-bottom:18px; }
.overlay-zu{
    position:absolute; top:16px; right:16px; width:38px; height:38px; border:1.5px solid var(--linie);
    background:#fff; border-radius:50%; font-size:17px; font-weight:700; cursor:pointer; color:var(--tinte);
    font-family:inherit; line-height:1;
}
.overlay-zu:hover{ background:var(--sand); }
.overlay-box.breit{ max-width:880px; }
.sp-inhalt{ display:grid; grid-template-columns:1.6fr 1fr; gap:34px; }
.sp-laender{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.sp-land{
    display:flex; align-items:center; gap:10px; border:1.5px solid var(--linie); background:#fff;
    border-radius:14px; padding:11px 14px; cursor:pointer; text-align:left;
    font-size:14px; font-weight:700; color:var(--tinte); text-decoration:none;
}
.sp-land:hover{ border-color:var(--stempel); }
.sp-land.an{ border-color:var(--stempel); background:rgba(230,57,70,.06); }
.sp-land .flagge{ display:block; width:27px; height:18px; border-radius:4px; overflow:hidden; flex:0 0 auto; box-shadow:0 0 0 1px rgba(22,34,58,.1); }
.sp-land .flagge svg{ display:block; width:100%; height:100%; }
.sp-sprachen{ display:flex; flex-wrap:wrap; gap:9px; align-content:flex-start; }
.sp-sprache{
    border:1.5px solid var(--linie); background:#fff; border-radius:999px; padding:9px 18px;
    font-size:14px; font-weight:700; cursor:pointer; color:var(--tinte); text-decoration:none;
}
.sp-sprache:hover{ border-color:var(--stempel); }
.sp-sprache.an{ background:var(--tinte); border-color:var(--tinte); color:#fff; }
.cs-weiter-reihe{ margin-top:24px; padding-top:20px; border-top:1.5px solid var(--linie); text-align:right; }
.cs-weiter{
    display:inline-flex; align-items:center; gap:8px; background:var(--stempel); color:#fff;
    border-radius:999px; padding:12px 26px; font-weight:800; font-size:15px; text-decoration:none;
}
.cs-weiter:hover{ background:#C1121F; }

/* ---------- Kopf ---------- */
.kopf{ text-align:center; margin:36px 0 44px; }
.mega{
    font-family:'Bricolage Grotesque', sans-serif; font-weight:800;
    font-size:clamp(38px, 5.6vw, 68px); line-height:1.04; letter-spacing:-.02em;
}
.mega .rot{ color:var(--stempel); }

/* ---------- Bühne ---------- */
.buehne{
    max-width:1160px; width:100%;
    display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:60px;
}
.buehne > section{ min-width:0; }

.badge{
    display:inline-flex; align-items:center; gap:9px;
    border:1.5px solid var(--linie); background:#fff; border-radius:999px;
    padding:9px 18px; font-size:13px; font-weight:700; letter-spacing:.05em;
    color:var(--grau); margin-bottom:26px;
}
.badge .punkt{
    width:9px; height:9px; border-radius:50%; background:var(--gruen);
    animation:pulsieren 2s ease-in-out infinite;
}
@keyframes pulsieren{
    0%,100%{ box-shadow:0 0 0 0 rgba(42,157,143,.45); }
    55%{ box-shadow:0 0 0 8px rgba(42,157,143,0); }
}

.hero-titel{
    font-family:'Bricolage Grotesque', sans-serif; font-weight:800;
    font-size:clamp(28px, 3.3vw, 40px); line-height:1.12; letter-spacing:-.015em;
    margin-bottom:20px;
}
.hero-titel .rot{ color:var(--stempel); }
.unterzeile{ font-size:17px; line-height:1.65; color:var(--grau); max-width:560px; margin-bottom:24px; }
.unterzeile b{ color:var(--tinte); }

/* Was es geben wird */
.vorteile{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:12px 22px; margin-bottom:28px; max-width:600px; }
.vorteile li{ display:flex; gap:12px; align-items:flex-start; }
.vorteile .ico{
    flex:0 0 38px; height:38px; border-radius:12px; background:#fff; border:1.5px solid var(--linie);
    display:flex; align-items:center; justify-content:center; color:var(--stempel);
}
.vorteile .ico svg{ width:20px; height:20px; }
.vorteile strong{ display:block; font-size:15px; margin-bottom:2px; }
.vorteile span{ font-size:13.5px; color:var(--grau); line-height:1.45; }

/* Deal-Arten Ticker */
.ticker{
    max-width:600px; overflow:hidden; position:relative; margin-bottom:30px;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker-spur{ display:flex; gap:10px; width:max-content; animation:laufen 32s linear infinite; }
.ticker:hover .ticker-spur{ animation-play-state:paused; }
@keyframes laufen{ to{ transform:translateX(-50%); } }
.art-chip{
    display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
    background:var(--sand); border-radius:999px; padding:8px 14px 8px 10px;
    font-size:13px; font-weight:600;
}
.art-chip svg{ width:16px; height:16px; color:var(--stempel); }

.absender{ font-size:13px; color:var(--grau); letter-spacing:.06em; }
.absender .marke{ font-weight:700; color:var(--tinte); }

/* ---------- Handy ---------- */
.handy-halter{ display:flex; justify-content:center; }
.handy{
    width:300px; height:610px; border-radius:46px; background:var(--tinte); padding:12px;
    box-shadow:0 40px 80px rgba(22,34,58,.28), inset 0 0 0 2px #2a3a5c;
    transform:rotate(3deg); position:relative;
}
.schirm{ width:100%; height:100%; border-radius:36px; background:#F7F4EE; overflow:hidden; position:relative; display:flex; flex-direction:column; }
.kerbe{ position:absolute; top:10px; left:50%; transform:translateX(-50%); width:90px; height:24px; border-radius:20px; background:var(--tinte); z-index:3; }

.app-kopf{ padding:46px 16px 10px; background:#fff; }
.app-logo{ font:800 17px 'Bricolage Grotesque', sans-serif; margin-bottom:10px; }
.app-logo .rot{ color:var(--stempel); }
.suche{
    display:flex; align-items:center; gap:8px; background:#F3EFE7; border-radius:12px;
    padding:9px 11px; font-size:12px; color:var(--grau);
}
.suche svg{ width:14px; height:14px; flex:0 0 14px; }
.suche b{ color:var(--tinte); }
.umschalter{ display:flex; gap:6px; margin-top:10px; }
.umschalter span{
    flex:1; text-align:center; font-size:11px; font-weight:700; padding:6px; border-radius:9px;
    background:#F3EFE7; color:var(--grau);
}
.umschalter span.an{ background:var(--tinte); color:#fff; }

.deal-liste{ flex:1; overflow:hidden; padding:10px 12px; display:flex; flex-direction:column; gap:9px; }
.deal{
    background:#fff; border-radius:14px; padding:10px; display:flex; gap:10px; align-items:center;
    box-shadow:0 2px 8px rgba(22,34,58,.06); position:relative;
    opacity:0; transform:translateY(14px);
    animation:reinkommen .5s ease forwards;
}
.deal:nth-child(2){ animation-delay:.35s; }
.deal:nth-child(3){ animation-delay:.7s; }
.deal:nth-child(4){ animation-delay:1.05s; }
@keyframes reinkommen{ to{ opacity:1; transform:none; } }
.deal-wert{
    flex:0 0 52px; height:52px; border-radius:11px; display:flex; align-items:center; justify-content:center;
    font:800 15px 'Bricolage Grotesque', sans-serif; color:#fff; background:var(--stempel);
}
.deal-wert.gold{ background:var(--gold); color:var(--tinte); }
.deal-wert.gruen{ background:var(--gruen); }
.deal-wert.tinte{ background:var(--tinte); }
.deal-wert svg{ width:22px; height:22px; }
.deal-txt{ flex:1; min-width:0; }
.deal-art{ font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--stempel); }
.deal-name{ font-size:12.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.deal-ort{ font-size:10.5px; color:var(--grau); }
.herz{
    flex:0 0 26px; height:26px; border:0; background:none; cursor:pointer; color:#C9C2B5;
    display:flex; align-items:center; justify-content:center;
}
.herz svg{ width:18px; height:18px; }
.herz.an{ color:var(--stempel); }
.herz.an svg path{ fill:currentColor; }

/* Gutschein perforiert */
.deal.gutschein{ border:1.5px dashed #E3D8C4; box-shadow:none; }

.app-nav{ display:flex; justify-content:space-around; align-items:center; background:#fff; padding:9px 6px 14px; border-top:1px solid var(--linie); }
.tab{ display:flex; flex-direction:column; align-items:center; gap:3px; font-size:9px; font-weight:600; color:var(--grau); }
.tab svg{ width:18px; height:18px; }
.tab.an{ color:var(--stempel); }

/* Pin-Schild am Handy */
.pin-schild{
    position:absolute; left:-58px; top:330px; z-index:4;
    background:#fff; border-radius:16px; padding:10px 14px 10px 10px; display:flex; gap:10px; align-items:center;
    box-shadow:0 18px 36px rgba(22,34,58,.18); transform:rotate(-3deg);
    animation:schweben 4s ease-in-out infinite;
}
.pin-schild .pin{ width:34px; height:34px; border-radius:50%; background:var(--stempel); color:#fff; display:flex; align-items:center; justify-content:center; }
.pin-schild .pin svg{ width:18px; height:18px; }
.pin-schild b{ display:block; font-size:13px; }
.pin-schild span{ font-size:11px; color:var(--grau); }
@keyframes schweben{ 0%,100%{ transform:rotate(-3deg) translateY(0); } 50%{ transform:rotate(-3deg) translateY(-8px); } }

/* ---------- Darum Lecker ---------- */
.warum{
    max-width:1160px; width:100%; margin-top:72px;
    display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;
}
.warum-titel{
    font-family:'Bricolage Grotesque', sans-serif; font-weight:800;
    font-size:clamp(26px, 2.8vw, 34px); line-height:1.15; letter-spacing:-.015em; margin-bottom:18px;
}
.warum-titel .rot{ color:var(--stempel); }
.warum-text p{ font-size:17px; line-height:1.7; color:var(--grau); margin-bottom:16px; }
.warum-text p:last-child{ margin-bottom:0; }
.warum-text b{ color:var(--tinte); }
.boxen{ display:grid; gap:14px; }
.box{
    display:flex; gap:16px; align-items:center; border-radius:20px; padding:20px 22px;
    font-size:16px; line-height:1.5;
}
.box svg{ flex:0 0 26px; width:26px; height:26px; }
.box.weiss{ background:#fff; border:1.5px solid var(--linie); color:var(--grau); }
.box.weiss svg{ color:var(--stempel); }
.box.weiss .ld{ font-weight:800; color:var(--tinte); }
.box.weiss .ld .rot{ color:var(--stempel); }
.box.gruen{ background:#EEF5EA; font-weight:700; }
.box.gruen svg{ color:var(--stempel); }
.box.gruen .akzent{ color:#5C8A2E; }
.box.blau{ background:#E8EEF7; font-weight:600; }
.box.blau svg{ color:var(--tinte); }

/* ---------- Localhero: Hinweis an Geschäfte ---------- */
.localhero-wrap{ max-width:1160px; width:100%; margin-top:96px; }
.localhero{
    background:var(--tinte); border-radius:26px; padding:38px 290px 38px 40px; color:#fff;
    display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap;
    position:relative;
}
/* Der Held schaut oben aus der Box heraus - deshalb kein overflow:hidden */
.localhero .lh-held{
    position:absolute; right:18px; bottom:0; width:250px; height:auto;
    pointer-events:none; filter:drop-shadow(0 12px 24px rgba(0,0,0,.28));
}
.localhero h2{ font:800 clamp(22px, 2.4vw, 28px)/1.2 'Bricolage Grotesque', sans-serif; color:#fff; margin-bottom:8px; }
.localhero p{ color:#B8C0CF; font-size:15px; line-height:1.6; }
.knopf{
    display:inline-flex; align-items:center; gap:8px; white-space:nowrap; position:relative; z-index:1;
    background:var(--stempel); color:#fff; text-decoration:none; font-weight:700; font-size:15px;
    padding:14px 22px; border-radius:14px; transition:transform .15s ease;
}
.knopf:hover{ transform:translateY(-2px); }

.fuss{ margin-top:40px; font-size:12px; color:var(--grau); text-align:center; }
.fuss a{ color:var(--grau); }

/* ---------- Mobil ---------- */
@media (max-width:900px){
    .cs-leiste{ position:static; display:flex; justify-content:flex-end; width:100%; margin-bottom:18px; }
    .sp-inhalt{ grid-template-columns:1fr; gap:24px; }
    .sp-laender{ grid-template-columns:repeat(2, 1fr); }
    .overlay-box.breit{ padding:28px 20px 24px; }
    .cs-weiter-reihe{ text-align:center; }
    .localhero-wrap{ margin-top:64px; }
    .localhero{ padding:28px 22px; }
    .localhero .lh-held{ display:none; }
}
@media (max-width:960px){
    .buehne{ grid-template-columns:1fr; gap:48px; }
    .warum{ grid-template-columns:1fr; gap:28px; margin-top:56px; }
    .handy{ transform:none; }
    .pin-schild{ left:-20px; }
}
@media (max-width:600px){
    body{ padding:24px 16px; }
    .kopf{ margin:44px 0 30px; }
    .vorteile{ grid-template-columns:1fr; }
    .handy{ width:270px; height:550px; }
    .pin-schild{ left:-12px; top:300px; }
    .knopf{ width:100%; justify-content:center; }
}