/* ============================================================
   COMING SOON - LeckerCard
   Datei: /css/comingsoon.css
   ============================================================ */
: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{ height:100%; }
body{ min-height:100%; }
body{
    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; justify-content:center;
    padding:32px 20px;
}

.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); }
}
.kopf{ text-align:center; margin-bottom:44px; }
.kopf img{ height:76px; width:auto; display:block; margin:0 auto 16px; }
.mega{
    font-family:'Bricolage Grotesque', sans-serif; font-weight:800;
    font-size:clamp(40px, 5.6vw, 68px); line-height:1.04; letter-spacing:-.02em;
}
.mega .rot{ color:var(--stempel); }

.hero-titel{
    font-family:'Bricolage Grotesque', sans-serif; font-weight:800;
    font-size:clamp(28px, 3.4vw, 42px); line-height:1.1; letter-spacing:-.015em;
    margin-bottom:20px;
}
.hero-titel .rot{ color:var(--stempel); }
.unterzeile{
    font-size:clamp(16px, 1.6vw, 19px); line-height:1.65; color:var(--grau);
    max-width:520px; margin-bottom:30px;
}
.unterzeile b{ color:var(--tinte); }
.punkte{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; }
.punkte span{
    background:var(--sand); border-radius:999px; padding:8px 16px;
    font-size:13.5px; font-weight:600;
}
.ticker{
    max-width:min(520px, 100%); overflow:hidden; margin-bottom:38px; padding:6px 0;
    -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:14px; width:max-content; align-items:flex-start; }
.br-kachel{
    flex-shrink:0; width:104px; text-align:center; overflow:hidden;
    transition:transform .38s cubic-bezier(.2,1.4,.4,1), opacity .35s ease,
               max-width .4s ease, margin-right .4s ease;
    max-width:104px;
}
.br-kachel .kreis{
    width:68px; height:68px; border-radius:50%; margin:0 auto 8px;
    background:#fff; border:1.5px solid var(--linie);
    display:flex; align-items:center; justify-content:center;
    color:var(--tinte); box-shadow:0 4px 10px rgba(22,34,58,.05);
}
.br-kachel .kreis svg{ width:32px; height:32px; }
.br-kachel .name{
    font-size:12px; font-weight:700; color:var(--grau); line-height:1.25;
    white-space:nowrap;
}
.br-kachel.neu{ transform:scale(.2); opacity:0; }
.br-kachel.raus{ max-width:0; margin-right:-14px; opacity:0; }

.absender{ border-top:1.5px solid var(--linie); padding-top:22px; max-width:520px; }
.absender .marke{
    font-family:'IBM Plex Mono', monospace; font-size:13px; font-weight:600;
    letter-spacing:.08em; color:var(--grau); margin-bottom:6px;
}
.absender .marke b{ color:var(--tinte); }
.absender .betreiber{ font-size:14px; color:var(--grau); }
.absender .betreiber b{ color:var(--tinte); }
.absender a{ color:var(--grau); }

.handy-halter{ display:flex; justify-content:center; }
.handy{
    width:310px; background:var(--tinte); border-radius:44px; padding:12px;
    box-shadow:0 30px 70px rgba(22,34,58,.28), 0 8px 22px rgba(22,34,58,.18);
    transform:rotate(3deg);
}
.schirm{
    background:var(--papier); border-radius:34px; overflow:hidden; position:relative;
    min-height:620px; display:flex; flex-direction:column;
}
.kerbe{
    width:110px; height:26px; background:var(--tinte);
    border-radius:0 0 16px 16px; margin:0 auto;
}
.app{ padding:16px 18px 14px; flex:1; display:flex; flex-direction:column; }

.app-nav{
    margin-top:auto; padding-top:13px; border-top:1.5px solid var(--linie);
    display:grid; grid-template-columns:repeat(5,1fr); align-items:end; text-align:center;
}
.app-nav .tab{ font-size:10.5px; font-weight:700; color:var(--grau); }
.app-nav .tab svg{ display:block; margin:0 auto 4px; width:21px; height:21px; }
.app-nav .tab.an{ color:var(--stempel); }
.app-kopf{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.app-logo{ font-family:'Bricolage Grotesque'; font-weight:800; font-size:17px; }
.app-logo em{ font-style:normal; color:var(--stempel); }
.app-avatar{
    width:30px; height:30px; border-radius:50%; background:var(--sand);
    display:flex; align-items:center; justify-content:center;
    font-size:12px; font-weight:800; color:var(--stempel);
}
.karte{
    background:#fff; border:1px solid var(--linie); border-radius:20px;
    padding:16px; box-shadow:0 6px 16px rgba(22,34,58,.06); margin-bottom:14px;
}
.karte-kopf{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px; }
.karte-kopf h3{ font-family:'Bricolage Grotesque'; font-size:16.5px; }
.karte-kopf .stand{
    font-family:'IBM Plex Mono', monospace; font-size:12.5px; font-weight:600;
    color:var(--stempel);
}
.karte .ziel{ font-size:12px; color:var(--grau); margin-bottom:13px; }
.stempel-gitter{ display:grid; grid-template-columns:repeat(5,1fr); gap:9px; }
.feld{
    aspect-ratio:1; border:2px dashed var(--linie); border-radius:50%;
    display:flex; align-items:center; justify-content:center; position:relative;
}
.feld .nr{
    font-family:'IBM Plex Mono', monospace; font-size:11px; font-weight:600;
    color:#C9C2B4;
}
.feld .abdruck{
    position:absolute; inset:2px; border-radius:50%;
    border:2.5px solid var(--stempel); color:var(--stempel);
    display:flex; align-items:center; justify-content:center;
    font-family:'Bricolage Grotesque'; font-weight:800; font-size:15px;
    background:rgba(230,57,70,.06);
    opacity:0; transform:scale(2.1) rotate(0deg);
}
.feld.voll .abdruck{ animation:aufstempeln .38s cubic-bezier(.2,1.4,.4,1) forwards; }
.feld.voll:nth-child(1) .abdruck{ animation-delay:.35s; --rot:-8deg; }
.feld.voll:nth-child(2) .abdruck{ animation-delay:.55s; --rot:5deg; }
.feld.voll:nth-child(3) .abdruck{ animation-delay:.75s; --rot:-4deg; }
.feld.voll:nth-child(4) .abdruck{ animation-delay:.95s; --rot:9deg; }
.feld.voll:nth-child(5) .abdruck{ animation-delay:1.15s; --rot:-6deg; }
.feld.voll:nth-child(6) .abdruck{ animation-delay:1.35s; --rot:3deg; }
.feld.voll:nth-child(7) .abdruck{ animation-delay:1.55s; --rot:-9deg; }
@keyframes aufstempeln{
    0%{ opacity:0; transform:scale(2.1) rotate(0deg); }
    100%{ opacity:1; transform:scale(1) rotate(var(--rot, -6deg)); }
}
.praemie{
    margin-top:14px; border-top:2px dashed var(--linie); padding-top:12px;
    display:flex; justify-content:space-between; align-items:center; position:relative;
}
.praemie::before, .praemie::after{
    content:""; position:absolute; top:-8px; width:16px; height:16px;
    border-radius:50%; background:var(--papier); border:1px solid var(--linie);
}
.praemie::before{ left:-25px; }
.praemie::after{ right:-25px; }
.praemie .was{ font-size:13px; font-weight:700; }
.praemie .noch{ font-size:11.5px; color:var(--grau); }
.praemie .gross{ font-size:22px; }
.angebot-mini{
    background:#fff; border:1px solid var(--linie); border-radius:16px;
    padding:12px 14px; display:flex; justify-content:space-between; align-items:center;
}
.angebot-mini .txt b{ font-size:13px; display:block; }
.angebot-mini .txt span{ font-size:11.5px; color:var(--grau); }
.angebot-mini .art{
    font-size:10px; font-weight:800; letter-spacing:.06em; padding:4px 10px;
    border-radius:999px; background:rgba(255,183,3,.2); color:#9A6B00;
}

/* ---------- Push: Neues Angebot (Coupon von der User-Seite) ---------- */
.app-push{
    margin-top:12px; opacity:0; transform:translateY(16px) scale(.85);
    transition:opacity .5s ease, transform .55s cubic-bezier(.2,1.4,.4,1);
}
.app-push.da{ opacity:1; transform:translateY(0) scale(1); }
.push-hinweis{
    font-family:'IBM Plex Mono', monospace; font-size:10px; font-weight:600;
    letter-spacing:.08em; color:var(--stempel); margin-bottom:6px;
    display:flex; align-items:center; gap:6px;
}
.push-hinweis::before{
    content:""; width:7px; height:7px; border-radius:50%; background:var(--stempel);
    animation:pulsieren 2s ease-in-out infinite;
}
.app-coupon{
    background:linear-gradient(120deg, var(--gold), #FFCE47); border-radius:14px;
    padding:11px 12px; font-weight:700; font-size:12px; display:flex;
    justify-content:space-between; align-items:center; color:var(--tinte);
}
.app-coupon span{ font-size:10.5px; font-weight:600; display:block; opacity:.75; }

/* ---------- Impressum-Overlay ---------- */

.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'; font-size:26px; font-weight:800; margin-bottom:18px;
}
.overlay-box p{ font-size:14.5px; line-height:1.7; color:var(--grau); margin-bottom:14px; }
.overlay-box p b{ color:var(--tinte); }
.overlay-hinweis{
    background:var(--sand); border-radius:14px; padding:12px 16px;
    font-size:13px; line-height:1.6; color:var(--tinte); 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); }

@media (prefers-reduced-motion: reduce){
    .badge .punkt{ animation:none; }
    .push-hinweis::before{ animation:none; }
    .app-push{ opacity:1; transform:none; transition:none; }
    .feld.voll .abdruck{ animation:none; opacity:1; transform:scale(1) rotate(var(--rot, -6deg)); }
}

@media (max-width: 900px){
    body{ padding:40px 20px; height:auto; min-height:100%; background:var(--papier); }
    .buehne{ grid-template-columns:1fr; gap:48px; text-align:center; }
    .kopf{ margin-bottom:38px; }
    .kopf img{ height:60px; }
    .ticker{ margin-left:auto; margin-right:auto; }
    .ticker-spur{ gap:12px; }
    .br-kachel{ width:86px; max-width:86px; }
    .br-kachel .kreis{ width:56px; height:56px; }
    .br-kachel .kreis svg{ width:26px; height:26px; }
    .br-kachel .name{ font-size:11px; }
    .br-kachel.raus{ max-width:0; margin-right:-12px; }
    .unterzeile, .absender{ margin-left:auto; margin-right:auto; }
    .punkte{ justify-content:center; }
    .handy{ transform:rotate(0deg); width:290px; }
}


/* ---------- App-Navi: Scan in der Mitte ---------- */
.app-nav .tab.scan{ color:var(--tinte); }
.app-nav .scan-knopf{
    width:42px; height:42px; border-radius:50%; background:var(--stempel); color:#fff;
    display:flex; align-items:center; justify-content:center;
    margin:-22px auto 4px; box-shadow:0 6px 14px rgba(230,57,70,.35);
}
.app-nav .scan-knopf svg{ margin:0; width:22px; height:22px; }

/* ---------- Branchen-Vorlage (wird per JS in den Ticker geholt) ---------- */
.cs-branchen{ display:none; }

/* ---------- Leiste oben: Landauswahl ---------- */
.cs-leiste{
    position:fixed; top:16px; right:20px; z-index:40;
}
.cs-land-knopf{
    display:inline-flex; align-items:center; gap:9px;
    border:1.5px solid var(--linie); background:#fff; border-radius:999px;
    padding:8px 16px 8px 10px; font-family:inherit; font-size:13.5px; font-weight:700;
    color:var(--tinte); cursor:pointer; box-shadow:0 4px 12px rgba(22,34,58,.06);
}
.cs-land-knopf:hover{ border-color:var(--stempel); }
.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,.10); }
.cs-land-knopf .flagge svg{ display:block; width:100%; height:100%; }
.cs-land-knopf .pfeil{ width:12px; height:12px; }

/* ---------- Overlay Landauswahl ---------- */
.overlay-box.breit{ max-width:880px; }
.sp-inhalt{ display:grid; grid-template-columns:1.6fr 1fr; gap:34px; }
.sp-titel{ font-size:12.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--grau); margin-bottom:14px; }
.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 small{ display:block; font-weight:600; font-size:11px; color:var(--grau); }
.sp-land .flagge{ display:block; width:27px; height:18px; border-radius:4px; overflow:hidden; flex:none;
    box-shadow:0 0 0 1px rgba(22,34,58,.10); }
.sp-land .flagge svg{ display:block; width:100%; height:100%; }
.sp-land.bald{ cursor:default; border-style:dashed; color:var(--grau); }
.sp-land.bald:hover{ border-color:var(--linie); }
.sp-land.bald .flagge{ opacity:.55; }
.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; }

@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; }
}