@charset "windows-1252";
/* =========================================================================
   OecherDeal 2026 - Design-System (neue Frontend-Schicht)
   Wird NUR von den neuen Seiten geladen (nicht zusammen mit portal.css).
   Tokens + Basis + Header + Footer + Buttons. Seiten-Komponenten folgen
   in eigenen Abschnitten weiter unten (pro umgestellter Seite).
   ========================================================================= */

/* ---- Fonts (lokal selbst gehostet, variable woff2) ---- */
@font-face{
  font-family:'Bricolage Grotesque';font-style:normal;font-weight:600 800;font-display:swap;
  src:url(../fonts/bricolage-grotesque-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Bricolage Grotesque';font-style:normal;font-weight:600 800;font-display:swap;
  src:url(../fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(../fonts/plus-jakarta-sans-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(../fonts/plus-jakarta-sans-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---- Tokens (aus dem freigegebenen Entwurf, Logo-Palette) ---- */
:root{
  --aqua-light:#b3d6e5; --aqua:#309fcf; --aqua-600:#2b8cb6; --aqua-700:#25799d; --sky:#8fc0d6;
  --ink:#0e2221; --ink-2:#39504e; --soft:#6f827f;
  --ground:#f5f4ef; --surface:#ffffff; --tint:#ecf5f9; --tint-2:#deecf2; --line:#e6e6de; --line-cool:#cbdee6;
  --danger:#d93a34; --danger-600:#c02f29;
  /* Text auf Akzentflaechen, Farbverlauf des dunklen Bandes und das Leuchten hinter Preisen.
     Diese drei Werte unterscheiden sich je Farbschema (siehe unten). */
  --auf-akzent:#ffffff;
  --band-1:#12293e; --band-2:#204865;
  --glanz:48,159,207;
  --auf-ink:#cfdfe8; --auf-ink-leise:#a6bec9;
  --akzent-text:#25799d;
  /* Kleine Flaechen mit Schrift in --auf-akzent (Schilder, Reiter, kleine Knoepfe). Eigene Variable seit
     22.09.2026: --aqua-700 ist in anderen Schemata eine Schriftfarbe und taugt dort nicht als Flaeche. */
  --akzent-klein:#25799d; --akzent-klein-hover:#1d5f7c;
  --font-display:"Bricolage Grotesque",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --font-body:"Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --wrap:1180px;
  --shadow-card:0 1px 2px rgba(14,34,33,.05);
  --shadow-pop:0 16px 40px -22px rgba(14,34,33,.4);
}

/* ========================================================================
   FARBSCHEMA "AACHEN" (Stadtfarben Schwarz-Gelb, Wappen: in Gold ein schwarzer Adler).
   Gelb #FFCC00 wie in der Stadtflagge; Schwarz als Trag- und Schriftfarbe.
   Umschaltbar ueber die beiden Farbflaechen im Seitenkopf (Cookie od_farbe).
   ======================================================================== */
html[data-farbe="aachen"]{
  --aqua-light:#ffe89a; --aqua:#ffcc00; --aqua-600:#edbd00; --aqua-700:#8a6a00; --sky:#ffcc00;
  --ink:#141414; --ink-2:#3d3b34; --soft:#6f6c62;
  --ground:#f7f5ef; --surface:#ffffff; --tint:#fff7dd; --tint-2:#ffedb8; --line:#e7e3d7; --line-cool:#e8dcb4;
  --auf-akzent:#141414;
  --band-1:#141414; --band-2:#3a3116;
  --glanz:255,204,0;
  --auf-ink:#ece7d6; --auf-ink-leise:#b8b2a0;
  --akzent-text:#8a6a00;
  --akzent-klein:#ffcc00; --akzent-klein-hover:#edbd00;
}

/* ---- Basis / Reset ---- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font-body);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--font-display);letter-spacing:-.02em;color:var(--ink)}
.od-wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px}
.od-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--aqua);outline-offset:2px}

/* ---- Header ---- */
.od-header{background:var(--surface);border-bottom:1px solid var(--line)}
.od-topbar{max-width:var(--wrap);margin:0 auto;padding:14px 26px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.od-logo{height:62px;width:auto;display:block}
.od-marke{display:flex;align-items:center;gap:14px;min-width:0}
.od-marke>a{flex:none}
.od-regionen{margin:0;color:var(--soft);font-size:13.5px;font-weight:600;letter-spacing:.01em;line-height:1.3}
.od-nav{display:flex;gap:24px;align-items:center;font-weight:700;font-size:15px}
.od-nav a{color:var(--ink);text-decoration:none;white-space:nowrap}
.od-nav a:hover{color:var(--akzent-text)}
.od-nav a.on{color:var(--akzent-text)}
.od-nav a.cta{background:var(--aqua);color:var(--auf-akzent);padding:11px 20px;border-radius:999px;font-weight:800;font-size:19px}
.od-nav a.cta:hover{background:var(--aqua-600)}
/* Farbwahl im Kopf: zwei Flaechen (OecherDeal / Stadtfarben Aachen), die aktive ist umrandet. */
/* Farbschemata im Kopf als 2x2-Quadrat aus kleinen Flaechen (seit 22.09.2026, vier Schemata) */
.od-farbwahl{display:inline-grid;grid-template-columns:repeat(2,16px);gap:4px;align-items:center;margin-right:2px}
.od-farbe{width:16px;height:16px;padding:0;border:1px solid var(--line);border-radius:4px;background:none;cursor:pointer;display:grid;place-items:center;transition:border-color .15s,transform .12s}
.od-farbe span{display:block;width:100%;height:100%;border-radius:3px}
.od-farbe-od span{background:linear-gradient(135deg,#309fcf 50%,#b3d6e5 50%)}
.od-farbe-aachen span{background:linear-gradient(135deg,#141414 50%,#ffcc00 50%)}
.od-farbe-dunkel span{background:linear-gradient(135deg,#0f171e 50%,#309fcf 50%)}
.od-farbe-heinsberg span{background:linear-gradient(135deg,#da121a 50%,#ffffff 50%)}
.od-farbe:hover{transform:translateY(-1px);border-color:var(--soft)}
.od-farbe.aktiv{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.od-farbe:focus-visible{outline:2px solid var(--aqua);outline-offset:2px}
/* Konto-Menue (seit 22.09.2026): Chip mit Initialen/Namen als Knopf, darunter "Meine Daten" und "Abmelden" */
.od-userchip{position:relative}
.od-userchip summary{display:inline-flex;align-items:center;gap:8px;background:var(--tint);border:1px solid var(--line-cool);border-radius:999px;padding:4px 10px 4px 5px;cursor:pointer;list-style:none;user-select:none}
.od-userchip summary::-webkit-details-marker{display:none}
.od-userchip summary:hover,.od-userchip[open] summary{border-color:var(--aqua)}
.od-userchip summary:focus-visible{outline:2px solid var(--aqua);outline-offset:2px}
.od-userchip.on .nm{color:var(--akzent-text)}
.od-userchip .pfeil{width:16px;height:16px;color:var(--soft);transition:transform .15s}
.od-userchip[open] .pfeil{transform:rotate(180deg)}
.od-umenu{position:absolute;right:0;top:calc(100% + 8px);min-width:190px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px -16px rgba(0,0,0,.35);padding:6px;z-index:60;display:flex;flex-direction:column}
.od-nav .od-umenu a{padding:10px 14px;border-radius:9px;font-weight:700;font-size:14.5px;color:var(--ink)}
.od-nav .od-umenu a:hover{background:var(--tint)}
.od-nav .od-umenu a.on{color:var(--akzent-text)}
.od-nav .od-umenu a.logout{color:var(--akzent-text);border-top:1px solid var(--line);border-radius:0 0 9px 9px;margin-top:4px}
.od-userchip .av{width:32px;height:32px;border-radius:50%;background:var(--akzent-klein);color:var(--auf-akzent);font-weight:800;font-size:12.5px;display:grid;place-items:center}
.od-userchip .nm{font-weight:700;font-size:14px;color:var(--ink)}

/* ---- Footer ---- */
.od-footer{margin-top:56px;background:var(--band-1);color:var(--auf-ink-leise)}
.od-foot-in{max-width:var(--wrap);margin:0 auto;padding:30px 26px;display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between}
.od-foot-in .links{display:flex;gap:20px;flex-wrap:wrap;font-size:14px}
.od-foot-in a{color:var(--auf-ink);text-decoration:none}
.od-foot-in a:hover{color:#fff}
.od-foot-in .claim{font-size:13px;color:#7fa19d}

/* ---- Buttons ---- */
.od-btn{appearance:none;border:0;cursor:pointer;font:inherit;font-weight:800;font-size:19px;background:var(--aqua);color:var(--auf-akzent);padding:14px 22px;border-radius:12px;text-align:center;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:9px;transition:background .15s,transform .08s}
.od-btn:hover{background:var(--aqua-600)}
.od-btn:active{transform:translateY(1px)}
.od-btn.full{width:100%}
.od-btn.ghost{background:var(--surface);color:var(--aqua-700);border:1.5px solid var(--line-cool)}
.od-btn.ghost:hover{background:var(--tint);border-color:var(--aqua)}
.od-btn.danger{background:var(--danger)}
.od-btn.danger:hover{background:var(--danger-600)}
.od-btn:disabled{background:#e6e9e8;color:var(--soft);cursor:not-allowed}
.od-btn.sm{font-size:13.5px;padding:11px 15px;border-radius:11px;background:var(--akzent-klein)}
.od-btn.sm:hover{background:var(--akzent-klein-hover)}
.od-btn.ghost.sm{background:var(--surface)}
.od-btn.ghost.sm:hover{background:var(--tint)}
.od-btn svg{width:18px;height:18px}
.od-btn.sm svg{width:15px;height:15px}

/* ---- Responsive (Basis) ---- */
@media (max-width:560px){
  .od-topbar{flex-wrap:wrap;gap:10px}
  .od-nav{gap:14px;flex-wrap:wrap;font-size:14px}
  .od-foot-in{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ========================================================================
   HOMEPAGE (Phase 2) - Startseite: Toolbar, Zwei-Deal-Reihe, Raster,
   3-Schritte-Band, Newsletter. Aus dem freigegebenen Entwurf portiert.
   ======================================================================== */
.photo{position:relative;overflow:hidden;background:var(--tint-2)}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
/* Sicherheitsnetz kleine Bilder (Altbestand 243 px, od_photo_klein): hoechstens 1,5-fach, mittig auf weichgezeichnetem Grund */
.photo .od-grund{display:none}
.photo[data-klein] .od-grund{display:block;position:absolute;inset:-24px;background:center/cover no-repeat;filter:blur(20px) saturate(1.15);opacity:.6}
.photo[data-klein] img{width:min(92%,var(--od-max));height:auto;max-height:92%;margin:auto;border-radius:6px;box-shadow:0 10px 24px -12px rgba(14,34,33,.55)}
/* Deal-Bilder liegen im Format 3:2 vor; der Rahmen hat dasselbe Verhaeltnis, damit nichts beschnitten wird. */
.featured-card .photo,.card .photo{aspect-ratio:3/2}
.pct{background:var(--band-1);color:#fff;font-weight:800;font-family:var(--font-display);letter-spacing:-.01em;line-height:1}
.was s{color:var(--ink-2);text-decoration:line-through;text-decoration-color:var(--aqua);text-decoration-thickness:2px}
.now .ab{font-size:.5em;font-weight:700;color:var(--soft);margin-right:3px;letter-spacing:.01em;text-shadow:none}
.firma{display:block;color:var(--ink-2);font-weight:600}
.ort{display:flex;align-items:center;gap:5px;color:inherit;font-size:inherit;font-weight:inherit;margin-top:3px}
.ort svg{width:.95em;height:.95em;flex:none;color:var(--akzent-text)}

/* Toolbar (dunkle Kategorie-Leiste + Suche) */
.toolbar{background:var(--band-1)}
.toolbar-in{max-width:var(--wrap);margin:0 auto;padding:12px 26px;display:flex;align-items:center;gap:7px;flex-wrap:nowrap}
/* Suchfeld wie ein Kategorie-Knopf: gleiche Hoehe, gleiche Schrift, gleiche Reihe. */
.search{flex:none;width:220px;min-width:0;display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:8px 14px;font-size:13px;line-height:1.2;transition:border-color .15s,background .15s}
.search:focus-within{border-color:var(--sky);background:rgba(255,255,255,.16)}
.search svg{color:var(--sky);flex:none;width:14px;height:14px}
.search input{border:0;background:transparent;outline:none;color:#fff;font:inherit;font-size:13px;font-weight:700;line-height:1.2;width:100%;padding:0}
.search input::placeholder{color:rgba(255,255,255,.6)}
/* Kategorien immer in EINER Zeile; reicht der Platz nicht, laesst sich die Reihe seitlich schieben.
   Die Bildlaufleiste bleibt unsichtbar (wie bei Chip-Leisten ueblich), Wischen/Rad/Tastatur funktionieren. */
.catrow{display:flex;gap:7px;flex-wrap:nowrap;flex:1 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;scroll-padding-inline-start:150px;scroll-snap-type:x mandatory}
.catrow::-webkit-scrollbar{display:none}
.chip{flex:none}
/* "Alle Deals" bleibt beim Schieben links stehen; die uebrigen Knoepfe laufen dahinter vorbei. */
.catrow .chip:first-child{position:sticky;left:0;z-index:2;background:var(--band-1);box-shadow:7px 0 0 var(--band-1)}
.catrow .chip:first-child.active{background:var(--sky)}
/* Beim Schieben rastet die Reihe an den Knoepfen ein, damit neben "Alle Deals" nie ein halber Knopf steht. */
.catrow .chip:not(:first-child){scroll-snap-align:start}
/* Auslauf am Ende: damit auch der letzte Knopf vollstaendig neben "Alle Deals" stehen kann. */
.catrow::after{content:"";flex:none;width:var(--kat-auslauf,0px)}
/* Pfeilknoepfe zum Schieben der Kategorienreihe (nur sichtbar, wenn es weitergeht) */
.katnav{flex:none;width:30px;height:30px;padding:0;display:grid;place-items:center;background:transparent;border:1px solid rgba(255,255,255,.22);border-radius:999px;color:var(--auf-ink);cursor:pointer;transition:all .15s}
.katnav:hover{color:#fff;border-color:rgba(255,255,255,.5)}
.katnav svg{width:15px;height:15px}
.katnav[hidden]{display:none}
.katnav:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
.chip{display:inline-flex;align-items:center;background:transparent;border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:8px 14px;font-weight:700;font-size:13px;color:var(--auf-ink);cursor:pointer;text-decoration:none;transition:all .15s;white-space:nowrap}
.chip:hover{color:#fff;border-color:rgba(255,255,255,.5)}
.chip.active{background:var(--sky);color:var(--ink);border-color:var(--sky)}
button.chip{font-family:inherit;line-height:1.2}
.chip:focus-visible{outline:2px solid var(--sky);outline-offset:2px}

/* Zwei-Deal-Reihe */
.topdeals{max-width:var(--wrap);margin:26px auto 0;padding:0 26px;display:grid;grid-template-columns:1fr;gap:15px;align-items:start}
.topdeals .featured-card.zweiter{display:none}
.featured-card{position:relative;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .12s,box-shadow .12s;background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow-pop)}
.featured-card .newbadge{position:absolute;top:14px;right:14px;z-index:4;background:var(--akzent-klein);color:var(--auf-akzent);font-family:var(--font-display);font-weight:800;font-size:14px;letter-spacing:-.01em;padding:7px 14px;border-radius:999px;box-shadow:0 6px 16px -4px rgba(var(--glanz),.55)}
.featured-card .photo{width:100%}
.featured-card .ribbon{position:absolute;top:16px;left:16px;z-index:2;background:var(--akzent-klein);color:var(--auf-akzent);font-weight:800;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;padding:8px 14px;border-radius:999px;box-shadow:0 6px 16px -4px rgba(var(--glanz),.6)}
.featured-card .pct{position:absolute;bottom:16px;left:16px;z-index:2;font-size:24px;padding:12px 17px;border-radius:14px;box-shadow:0 8px 20px -6px rgba(14,34,33,.5)}
.featured-card .info{flex:1;min-width:0;padding:18px 22px 20px;display:flex;flex-direction:column;gap:7px}
.featured-card .cat{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--akzent-text)}
.featured-card h2,.featured-card h3{font-family:var(--font-display);font-weight:800;font-size:27px;line-height:1.06;margin:2px 0 0;color:var(--ink);letter-spacing:-.03em;text-wrap:balance}
.featured-card .firma{color:var(--ink-2);font-size:14.5px}
.featured-card .p{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.featured-card .p .now{font-weight:800;font-size:34px;color:var(--aqua-700);text-shadow:0 0 20px rgba(var(--glanz),.38);font-variant-numeric:tabular-nums;letter-spacing:-.03em;line-height:1}
.featured-card .p .was{color:var(--ink-2);font-weight:700;font-size:17px;font-variant-numeric:tabular-nums}
.featured-card .zeile{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;color:var(--ink-2);font-size:14.5px;font-weight:600}
.featured-card .zeile .firma{display:inline-flex;align-items:center;gap:8px 16px;flex-wrap:wrap}
.featured-card .zeile .ort{margin-top:0}
.featured-card .kauf{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:6px}
.featured-card .kauf .od-btn{flex:none;font-size:15px;padding:12px 18px}

/* Deal-Raster */
.section{max-width:var(--wrap);margin:34px auto 0;padding:0 26px}
.section .head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:18px}
.section h2{font-family:var(--font-display);font-weight:800;font-size:26px;margin:0;letter-spacing:-.03em;color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .12s,box-shadow .12s}
.card:hover,.featured-card:hover{transform:translateY(-4px);box-shadow:0 18px 34px -20px rgba(14,34,33,.34)}
/* Zweiter Top-Deal: laeuft als normale Kachel im Raster mit, solange die erste Reihe nur einen Deal zeigt. */
.card.card-zweit{display:flex}
/* Filter aktiv (Kategorie oder Suche): Top-Deals aus, alle passenden Deals als Kacheln im Raster */
.card.card-top{display:none}
.section.nur-top{display:none}
body.od-filter .topdeals{display:none}
body.od-filter .section.nur-top{display:block}
body.od-filter .card.card-top,body.od-filter .card.card-zweit{display:flex}
/* Suche blendet per hidden-Attribut aus; .card/.gridmore setzen display, daher explizit */
.card[hidden],.gridmore[hidden]{display:none!important}
.card .photo{min-height:0}
.card .photo .pct{position:absolute;top:11px;left:11px;z-index:2;font-size:16px;padding:7px 11px;border-radius:10px;box-shadow:0 6px 14px -6px rgba(14,34,33,.5)}
.card .body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:5px;flex:1}
.card .catline{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--akzent-text)}
.card h3{font-family:var(--font-display);font-weight:800;font-size:16.5px;margin:0;line-height:1.18;color:var(--ink);text-wrap:balance;letter-spacing:-.01em}
.card .firma{font-size:12.5px;color:var(--ink-2)}
/* Preis und Anzahl verkaufter Gutscheine stehen untereinander (je eine Zeile). */
.card .foot{margin-top:auto;display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding-top:11px;border-top:1px solid var(--tint-2)}
.card .p{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.card .p .now{font-weight:800;font-size:21px;color:var(--aqua-700);text-shadow:0 0 14px rgba(var(--glanz),.32);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.card .p .was{font-size:13.5px;color:var(--ink-2);font-weight:700;font-variant-numeric:tabular-nums}
.card .sold{font-size:12.5px;color:var(--ink-2);font-weight:600}
.gridsentinel{height:1px}
.gridmore{display:flex;justify-content:center;margin-top:30px;color:var(--soft);font-weight:700;font-size:14px}

/* 3-Schritte-Band */
.band{background:linear-gradient(135deg,var(--band-1),var(--band-2));color:var(--auf-ink);margin-top:44px}
.band-in{max-width:var(--wrap);margin:0 auto;padding:34px 26px}
.band .eyebrow{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--sky)}
.band h2{font-family:var(--font-display);font-weight:800;font-size:30px;color:#fff;margin:6px 0 22px;letter-spacing:-.03em}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step{display:flex;flex-direction:column;gap:9px}
.step .n{width:44px;height:44px;border-radius:13px;background:rgba(143,192,214,.18);color:var(--sky);display:grid;place-items:center;font-weight:800;font-size:18px;font-family:var(--font-display)}
.step b{color:#fff;font-size:17px}
.step span{color:var(--auf-ink-leise);font-size:14px}

/* Newsletter-Band */
.nl{background:var(--tint);border-top:1px solid var(--line-cool);border-bottom:1px solid var(--line-cool)}
.nl-in{max-width:var(--wrap);margin:0 auto;padding:54px 26px;display:grid;grid-template-columns:1.15fr 1fr;gap:26px;align-items:center}
.nl h2{font-family:var(--font-display);font-weight:800;font-size:27px;margin:2px 0 0;color:var(--ink);letter-spacing:-.03em}
.nl p{margin:8px 0 0;color:var(--ink-2);max-width:44ch;font-size:14.5px}
.nl .eyebrow{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--akzent-text)}
.nl form{display:flex;gap:10px}
.nl input{flex:1;min-width:0;border:1px solid var(--line-cool);border-radius:12px;padding:15px 18px;font:inherit;font-size:15px;background:var(--surface);color:var(--ink)}
.nl input:focus-visible{outline:2px solid var(--aqua);outline-offset:1px}
.nl .od-btn{flex:none}
.site-footer-flush{margin-top:0}

/* Homepage responsive (Viewport-Media statt Container-Queries) */
/* Ab 800px Fensterbreite stehen zwei Deals nebeneinander; der zweite laeuft dann nicht mehr im Raster mit. */
@media (min-width:800px){
  .topdeals{grid-template-columns:1fr 1fr;align-items:stretch}
  .topdeals .featured-card.zweiter{display:flex}
  .card.card-zweit{display:none}
  /* Knopf in beiden Kacheln unten und ueber die volle Breite (Kacheln sind gleich hoch) */
  .featured-card .kauf{flex-direction:column;align-items:stretch;gap:10px;margin-top:auto}
  .featured-card .info{padding:18px 20px 20px}
  .topdeals .od-btn{width:100%;font-size:16px;padding:13px 20px}
}
@media (max-width:960px){
  .topdeals{gap:12px}
  .grid{grid-template-columns:repeat(3,1fr)}
}
/* Zwei Kacheln nebeneinander (ab 800px) sind schmaler: Titel und Preis etwas kleiner. */
@media (min-width:800px) and (max-width:1100px){
  .featured-card .info{padding:16px 18px 18px;gap:6px}
  .featured-card h2,.featured-card h3{font-size:21px;line-height:1.16}
  .featured-card .zeile{font-size:13px}
  .featured-card .p .now{font-size:27px}
  .featured-card .p .was{font-size:15px}
}
@media (max-width:820px){
  .steps{grid-template-columns:1fr;gap:14px}.nl-in{grid-template-columns:1fr}
  .band-in{padding:26px 16px}.band{margin-top:32px}.band h2{font-size:24px;margin-bottom:16px}
  .band .step{display:grid;grid-template-columns:38px 1fr;column-gap:12px;row-gap:2px}
  .band .step .n{width:38px;height:38px;border-radius:11px;font-size:16px;grid-row:1 / span 2}
}
@media (max-width:560px){
  .featured-card .kauf .od-btn{width:100%}
  .grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .nl form{flex-direction:column}.nl .od-btn{width:100%}
  .search{width:150px}
}
/* bis 400px (iPhone & Co.) bleiben es zwei Spalten - kompakte Kacheln siehe "Handy" am Dateiende */

/* ========================================================================
   DEAL-DETAIL (Phase 3) - Galerie, Beschreibung, Highlights, Konditionen,
   Anbieter, sticky Kaufbox (Varianten oder Festpreis+Menge), Related.
   ======================================================================== */
.crumb{background:var(--surface);border-bottom:1px solid var(--line)}
.crumb-in{max-width:var(--wrap);margin:0 auto;padding:12px 26px;display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--soft);flex-wrap:wrap}
.crumb-in a{color:var(--aqua);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.crumb-in a:hover{color:var(--aqua-700)}
.crumb-in .sep{color:#c9d6d6}.crumb-in .cur{color:var(--ink-2)}
.detail{max-width:var(--wrap);margin:26px auto 0;padding:0 26px;display:grid;grid-template-columns:1fr 380px;gap:34px;align-items:start}
.main-col{min-width:0}
/* Bildrahmen im Deal-Bildformat 3:2 (Nutzerwunsch 18.09.2026: nur das Bild, keine farbigen Streifen daneben) */
.gallery .main{border-radius:20px;aspect-ratio:3/2;box-shadow:0 16px 40px -22px rgba(14,34,33,.4)}
.gallery .main .pct{position:absolute;bottom:16px;left:16px;z-index:2;font-size:22px;padding:11px 16px;border-radius:14px;box-shadow:0 8px 20px -6px rgba(14,34,33,.5)}
.gallery .thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}
.gallery .thumbs .photo{border-radius:12px;aspect-ratio:3/2;box-sizing:content-box;cursor:pointer;border:2px solid transparent;transition:border-color .12s}
.gallery .thumbs .photo:hover{border-color:var(--line-cool)}
.gallery .thumbs .photo.active{border-color:var(--aqua)}
.titlewrap{margin-top:24px}
.eyebrow{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--akzent-text)}
.titlewrap h1{font-family:var(--font-display);font-weight:800;font-size:clamp(28px,4vw,40px);line-height:1.05;letter-spacing:-.03em;margin:10px 0 0;color:var(--ink);text-wrap:balance}
.provider{display:flex;align-items:center;gap:14px;margin-top:14px;flex-wrap:wrap;color:var(--ink-2);font-size:14px;font-weight:600}
.provider .who{color:var(--ink-2)}
.provider .loc{display:inline-flex;align-items:center;gap:5px}.provider .loc svg{width:14px;height:14px;color:var(--akzent-text)}
.provider .sold{display:inline-flex;align-items:center;gap:6px}.provider .sold b{color:inherit;font-weight:inherit}
.block{margin-top:34px}
.block h2{font-family:var(--font-display);font-weight:800;font-size:22px;letter-spacing:-.02em;margin:0 0 14px;color:var(--ink)}
.block p{margin:0 0 12px;color:var(--ink-2);max-width:66ch}
.block .rich{color:var(--ink-2);max-width:70ch}
/* Redaktionsbilder: der Editor schreibt width UND height als Inline-Stil (z. B. 620x974). Auf schmalen
   Schirmen begrenzt max-width die Breite, die feste Hoehe bliebe stehen und das Bild wuerde gestreckt.
   Deshalb hier !important - Inline-Stile schlagen sonst jede Regel. (Nutzerfrage 19.09.2026) */
.block .rich img{border-radius:12px;height:auto !important;max-width:100%}
.perks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px;max-width:70ch}
.perks li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.perks li svg{flex:none;width:20px;height:20px;color:var(--aqua);margin-top:1px}
.providerbox{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px;display:grid;grid-template-columns:1fr 300px;gap:22px;align-items:start}
.providerbox h3{font-family:var(--font-display);font-weight:800;font-size:18px;margin:0 0 6px;color:var(--ink)}
.providerbox .addr{color:var(--ink-2);font-size:14px;line-height:1.6}
.providerbox .contact{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.providerbox .contact a{display:inline-flex;align-items:center;gap:9px;color:var(--ink-2);text-decoration:none;font-size:14px;font-weight:600;width:fit-content}
.providerbox .contact a:hover{color:var(--akzent-text)}
.providerbox .contact a svg{width:16px;height:16px;flex:none;color:var(--akzent-text)}
/* Karte des Anbieters (Google Maps nach Einwilligung, od_consent_karte) */
.map{display:flex;flex-direction:column;gap:8px}
.map .od-karte{aspect-ratio:4/3;max-width:none;margin:0;border-radius:14px;border:1px solid var(--line-cool)}
.map .od-karte:not(.on){background:linear-gradient(135deg,#1d3a38,#27504d)}
.map .od-karte .od-embed-in svg{color:var(--aqua-light)}
.map .maplink{align-self:flex-start;font-size:13px;font-weight:700;color:var(--akzent-text);text-decoration:none}
.map .maplink:hover{text-decoration:underline}
.cond{background:var(--tint);border:1px solid var(--line-cool);border-radius:18px;padding:22px 24px}
.cond h2{margin-top:0}
.cond ul{margin:0;padding-left:18px;color:var(--ink-2);font-size:14px;line-height:1.7}
/* Kaufbox */
.buy{position:sticky;top:20px}
.buybox{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:0 16px 40px -22px rgba(14,34,33,.4)}
.buybox .price{display:flex;align-items:baseline;gap:12px;margin-top:14px;flex-wrap:wrap}
.buybox .price .now{font-weight:800;font-size:40px;color:var(--aqua-700);text-shadow:0 0 20px rgba(var(--glanz),.38);font-variant-numeric:tabular-nums;letter-spacing:-.03em;line-height:1}
.buybox .price .was{color:var(--ink-2);font-weight:700;font-size:17px;font-variant-numeric:tabular-nums}
.buybox .variants{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.variants .vlabel{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--soft)}
.variant{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1.5px solid var(--line-cool);border-radius:12px;padding:12px 14px;cursor:pointer;transition:border-color .12s,background .12s}
.variant:hover{border-color:var(--aqua)}
.variant.sel{border-color:var(--aqua);background:var(--tint)}
/* Ausverkaufte Variante (seit 22.09.2026): sichtbar, aber nicht waehlbar */
.variant.aus{cursor:not-allowed;background:var(--tint-2);border-color:var(--line);opacity:.75}
.variant.aus:hover{border-color:var(--line)}
.variant.aus .vn,.variant.aus .vp .n{color:var(--soft)}
.variant.aus .vp .n{text-decoration:line-through}
.variant .vaus{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--danger-600);white-space:nowrap}
.vausall{margin:10px 0 0;font-size:13.5px;font-weight:700;color:var(--danger-600)}
.od-btn.aus{opacity:.55;cursor:not-allowed;pointer-events:none}
/* Ausverkaufter Deal in der Kachel (seit 22.09.2026): Schild an der Stelle des Rabatt-Schilds, Foto
   zurueckgenommen. Das Schild ist in allen Farbschemata fest dunkel, weil es auf dem Foto liegt. */
/* Signalrot fest eingetragen, nicht var(--danger): das Schild liegt auf dem Foto und soll in jedem
   Farbschema gleich kraeftig sein (im dunklen Schema ist --danger ein helles Rot). */
.ausband{position:absolute;z-index:2;background:#cc2a22;color:#fff;font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:.07em;line-height:1;box-shadow:0 6px 16px -6px rgba(0,0,0,.55)}
.card .photo .ausband{top:11px;left:11px;font-size:12px;padding:8px 11px;border-radius:10px}
.featured-card .ausband{bottom:16px;left:16px;font-size:15px;padding:12px 16px;border-radius:14px}
/* Ausverkauft soll auf den ersten Blick auffallen (Nutzerwunsch 22.09.2026): Foto ganz schwarz-weiss und
   leicht abgedunkelt. Das Schild liegt ueber dem Schleier und bleibt farbig. */
.ist-aus .photo img,.ist-aus .photo .od-grund{filter:grayscale(1)}
.ist-aus .photo::after{content:"";position:absolute;inset:0;background:rgba(10,17,24,.3);z-index:1;pointer-events:none}
.ist-aus .p .now,.ist-aus .p .now .ab{color:var(--ink-2);text-shadow:none}
.variant .vn{font-weight:700;color:var(--ink);font-size:14.5px}
.variant .vp{text-align:right;white-space:nowrap}
.variant .vp .n{font-weight:800;color:var(--aqua-700);font-variant-numeric:tabular-nums}
.variant .vp .w{font-size:12px;color:var(--soft);text-decoration:line-through;text-decoration-color:var(--aqua);margin-left:6px;font-variant-numeric:tabular-nums}
.variant .radio{width:20px;height:20px;border-radius:50%;border:2px solid #c4d3d3;flex:none;display:grid;place-items:center}
.variant.sel .radio{border-color:var(--aqua)}
.variant.sel .radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--aqua)}
.buybox .qty{margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.buybox .qty .vlabel{margin:0}
.stepper{display:flex;align-items:center;border:1.5px solid var(--line-cool);border-radius:12px;overflow:hidden}
.stepper button{appearance:none;border:0;background:var(--surface);color:var(--aqua-700);font:inherit;font-size:20px;font-weight:800;width:44px;height:44px;cursor:pointer;line-height:1;display:grid;place-items:center}
.stepper button:hover{background:var(--tint)}
.stepper .qn{min-width:40px;text-align:center;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink)}
.buybox .od-btn{margin-top:16px;width:100%}
.buybox .count{margin-top:12px;display:flex;align-items:center;justify-content:space-between;font-size:14px;color:var(--ink-2);font-weight:600}
.buybox .count b{color:inherit;font-weight:inherit}
.assur{margin-top:16px;border-top:1px solid var(--line);padding-top:14px;display:flex;flex-direction:column;gap:9px}
.assur .a{display:flex;gap:9px;align-items:center;font-size:13px;color:var(--ink-2);font-weight:600}
.assur .a svg{flex:none;width:17px;height:17px;color:var(--akzent-text)}
.related{max-width:var(--wrap);margin:56px auto 0;padding:0 26px}
.related h2{font-family:var(--font-display);font-weight:800;font-size:24px;letter-spacing:-.02em;margin:0 0 20px;color:var(--ink)}
@media (max-width:900px){
  .detail{grid-template-columns:1fr;gap:26px}
  .buy{position:static}
  .providerbox{grid-template-columns:1fr}
}

/* ========================================================================
   BESTELLSEITE / CHECKOUT (Phase 4)
   ======================================================================== */
.pagehead{max-width:var(--wrap);margin:26px auto 0;padding:0 26px}
.pagehead h1{font-family:var(--font-display);font-weight:800;font-size:clamp(26px,3.2vw,34px);line-height:1.06;letter-spacing:-.03em;margin:0;color:var(--ink)}
.pagehead p{margin:8px 0 0;color:var(--ink-2);font-size:15px;max-width:62ch}
.checkout{max-width:var(--wrap);margin:22px auto 0;padding:0 26px;display:grid;grid-template-columns:1fr 380px;gap:34px;align-items:start}
.checkout .steps{display:flex;flex-direction:column;gap:18px;min-width:0}
.checkout .step{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px 24px;transition:opacity .2s}
.checkout .step.locked{opacity:.5;pointer-events:none}
.checkout .step .sh{display:flex;align-items:center;gap:12px}
.checkout .step .num{width:30px;height:30px;border-radius:50%;background:var(--akzent-klein);color:var(--auf-akzent);font-family:var(--font-display);font-weight:800;display:grid;place-items:center;font-size:15px;flex:none}
.checkout .step.done .num{background:var(--akzent-klein-hover)}
.checkout .step h2{font-family:var(--font-display);font-weight:800;font-size:20px;letter-spacing:-.02em;margin:0;color:var(--ink)}
.checkout .step .sb{margin-top:16px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field span{font-size:12.5px;font-weight:700;color:var(--ink-2)}
.field input{font:inherit;font-size:15px;padding:13px 14px;border:1.5px solid var(--line-cool);border-radius:12px;background:var(--surface);color:var(--ink);width:100%}
.field input:focus{outline:none;border-color:var(--aqua);box-shadow:0 0 0 3px rgba(var(--glanz),.15)}
.tworow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hint{font-size:12.5px;color:var(--soft);margin:0 0 14px;line-height:1.5}
.hint.center{text-align:center;margin:12px 0 0}
.link{color:var(--aqua-700);font-weight:700;font-size:13px;text-decoration:none}
.link:hover{text-decoration:underline}
.welcome{font-size:14.5px;color:var(--ink-2);font-weight:600;margin:0 0 14px}
.formmsg{background:#fdeceb;border:1px solid #f0bfba;color:#8a2b26;font-size:13.5px;font-weight:600;padding:10px 14px;border-radius:12px;margin:0 0 14px}
.rowend{display:flex;justify-content:flex-end;margin:-4px 0 14px}
.idrow{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--tint);border:1px solid var(--line-cool);border-radius:12px;padding:11px 14px;margin-bottom:16px;font-size:13.5px}
.idrow .em{font-weight:700;color:var(--ink)}
/* Rueckkehr von PayPal: auffaelliger Kasten, solange der Webhook die Gutscheine noch anlegt - der
   duenne Hinweis davor wurde uebersehen und fuehrte zu Anrufen (Nutzerhinweis 22.09.2026). */
.gswarte{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:18px;padding:18px 20px;border-radius:16px;
  background:var(--tint);border:1.5px solid var(--aqua);box-shadow:0 10px 26px -18px rgba(14,34,33,.5)}
.gswarte .gsw-ic{width:42px;height:42px;flex:none;border-radius:50%;background:var(--surface);color:var(--aqua-700);display:grid;place-items:center}
.gswarte .gsw-ic svg{width:23px;height:23px;animation:gsw-puls 1.6s ease-in-out infinite}
.gswarte .gsw-text{flex:1 1 320px;min-width:0;font-size:14.5px;color:var(--ink-2);line-height:1.5}
.gswarte .gsw-text b{display:block;font-family:var(--font-display);font-size:17px;color:var(--ink);letter-spacing:-.01em;margin-bottom:3px}
.gswarte.fertig{border-color:var(--aqua-600)}
.gswarte.fertig .gsw-ic svg{animation:none}
@keyframes gsw-puls{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.gswarte .gsw-ic svg{animation:none}}
.donebox{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-2);font-weight:600}
.donebox svg{width:20px;height:20px;color:var(--aqua);flex:none}
.donebox b{color:var(--ink)}
.authtabs{display:inline-flex;background:var(--tint);border:1px solid var(--line-cool);border-radius:12px;padding:4px;gap:4px;margin-bottom:18px}
.authtabs button{appearance:none;border:0;background:transparent;color:var(--soft);font:inherit;font-weight:700;font-size:14px;padding:9px 18px;border-radius:9px;cursor:pointer;transition:background .15s,color .15s}
.authtabs button.active{background:var(--akzent-klein);color:var(--auf-akzent)}
.pays{display:flex;flex-direction:column;gap:10px}
.pay{display:flex;align-items:center;gap:12px;border:1.5px solid var(--line-cool);border-radius:12px;padding:14px;cursor:pointer;transition:border-color .12s,background .12s}
.pay:hover{border-color:var(--aqua)}
.pay.sel{border-color:var(--aqua);background:var(--tint)}
.pay input{accent-color:var(--aqua);width:18px;height:18px;flex:none}
.pay .pn{font-weight:700;color:var(--ink);font-size:14.5px;flex:1}
.pay .pt{font-size:11.5px;font-weight:800;color:var(--aqua-700);background:var(--tint-2);padding:4px 10px;border-radius:999px;white-space:nowrap}
.pay .pt.slow{color:#8a6a2a;background:#f3ecda}
.availnote{margin:14px 0 0;font-size:12.5px;color:var(--soft);line-height:1.55;display:flex;gap:8px}
.availnote svg{width:16px;height:16px;color:var(--aqua);flex:none;margin-top:1px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--ink-2);margin-bottom:16px;cursor:pointer;line-height:1.5}
.check input{accent-color:var(--aqua);width:18px;height:18px;margin-top:1px;flex:none}
.check a{color:var(--aqua-700);font-weight:700;text-decoration:none}
.check small{display:block;font-size:11.5px;color:var(--soft);font-weight:500;margin-top:3px}
/* Bestelluebersicht */
.summary{position:sticky;top:20px}
.sumbox{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:var(--shadow-pop)}
.sumbox h3{font-family:var(--font-display);font-weight:800;font-size:16px;margin:0 0 16px;color:var(--ink)}
.sumdeal{display:flex;gap:13px;align-items:flex-start}
.sumdeal .photo{width:78px;height:78px;border-radius:12px;flex:none}
.sumdeal .st{font-family:var(--font-display);font-weight:800;font-size:15px;color:var(--ink);line-height:1.15}
.sumdeal .sf{color:var(--ink-2);font-weight:600;font-size:12.5px;margin-top:3px}
.sumdeal .sv{color:var(--soft);font-size:12px;margin-top:2px}
.qtyrow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.qtyrow .ql{font-weight:700;color:var(--ink);font-size:14px}
.sumrow{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;color:var(--ink-2);margin-top:12px}
.sumrow .g{color:var(--aqua-700);font-weight:700}
.sumsep{border-top:1px solid var(--line);margin:16px 0}
.sumtotal{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.sumtotal .l{font-family:var(--font-display);font-weight:800;font-size:16px;color:var(--ink)}
.sumtotal .v{font-family:var(--font-display);font-weight:800;font-size:28px;color:var(--aqua-700);text-shadow:0 0 16px rgba(var(--glanz),.32);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
/* Zahlungsdaten (Ueberweisung / Bestaetigung) */
.paybox{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.paylead{font-size:13px;color:var(--ink-2);line-height:1.55;margin:0 0 14px;max-width:74ch}
.payrows{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 20px}
.payrows>div{display:flex;flex-direction:column;gap:2px;background:var(--tint);border:1px solid var(--line-cool);border-radius:12px;padding:10px 14px;min-width:0}
.payrows dt{font-size:11px;font-weight:800;color:var(--soft);text-transform:uppercase;letter-spacing:.05em}
.payrows dd{margin:0;font-size:14px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.payrows dd.amt{color:var(--aqua-700);font-size:16px}
.okwrap{max-width:720px;margin:30px auto 0;padding:0 26px}
.okcard{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:30px;box-shadow:var(--shadow-card)}
.okcard .ok-ic{width:56px;height:56px;border-radius:50%;background:var(--tint);color:var(--aqua-700);display:grid;place-items:center;margin-bottom:16px}
.okcard .ok-ic svg{width:30px;height:30px}
.okcard h1{font-family:var(--font-display);font-weight:800;font-size:26px;line-height:1.15;letter-spacing:-.02em;margin:0 0 8px;color:var(--ink)}
.okcard .okakt{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.okcard p{color:var(--ink-2);margin:0 0 12px;line-height:1.55}
/* Zahlung steht noch aus (PayPal/Karte): kein gruener Haken, sondern sichtbar ein offener Schritt -
   der PayPal-Knopf braucht ein paar Sekunden, und solange hielten Kunden die Bestellung fuer
   abgeschlossen (Nutzerhinweis 22.09.2026). */
.okcard.offen .ok-ic{background:rgba(204,42,34,.1);color:#cc2a22}
.okcard .okhint{margin-top:16px;font-size:13.5px;color:var(--soft)}
.pp-warte{display:flex;align-items:center;gap:9px;margin-bottom:12px;font-size:14px;font-weight:700;color:var(--ink-2)}
.pp-warte[hidden]{display:none}
.pp-dreh{width:17px;height:17px;flex:none;border-radius:50%;border:2.5px solid var(--line);border-top-color:var(--aqua-600);animation:pp-dreh .8s linear infinite}
@keyframes pp-dreh{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.pp-dreh{animation-duration:2.4s}}
@media (max-width:900px){
  .checkout{grid-template-columns:1fr;gap:22px}
  .summary{position:static;order:-1}
}
@media (max-width:560px){ .tworow{grid-template-columns:1fr}.payrows{grid-template-columns:1fr} }

/* ========================================================================
   LOGIN (Phase 5) - Overlay/Modal + Login-Seite
   ======================================================================== */
/* Overlay scrollbar (seit 22.09.2026): vorher place-items:center ohne overflow - ein Fenster, das hoeher als der
   Bildschirm war (QR-Code mit langen Konditionen), liess sich nicht scrollen. Jetzt scrollt der Hintergrund; das
   Fenster bleibt mittig, solange es passt (margin:auto), und beginnt sonst oben. */
.od-scrim{position:fixed;inset:0;background:rgba(9,22,21,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:grid;justify-items:center;padding:34px 16px;z-index:100;overflow-y:auto;overscroll-behavior:contain}
.od-scrim[hidden]{display:none}
.od-loginpage{min-height:62vh;display:grid;place-items:center;padding:40px 16px}
.od-modal{background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:0 34px 80px -24px rgba(0,0,0,.55);width:100%;max-width:412px;padding:32px 30px 30px;position:relative;margin:auto 0}
.od-x{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--soft);cursor:pointer;display:grid;place-items:center}
.od-x:hover{color:var(--ink);border-color:var(--aqua)}
.od-x svg{width:18px;height:18px}
.od-mlogo{height:54px;width:auto;display:block;margin-bottom:18px}
.od-modal h2{font-family:var(--font-display);font-weight:800;font-size:25px;letter-spacing:-.02em;margin:0 0 6px;color:var(--ink)}
.od-msub{font-size:14px;color:var(--ink-2);margin:0 0 22px;line-height:1.45}
.od-regnote{margin:20px 0 0;padding-top:18px;border-top:1px solid var(--line);font-size:13px;color:var(--soft);line-height:1.55}
.od-regnote b{color:var(--ink-2)}
.od-modal .ok-ic{width:52px;height:52px;border-radius:50%;background:var(--tint);color:var(--aqua-700);display:grid;place-items:center;margin-bottom:14px}
.od-modal .ok-ic svg{width:28px;height:28px}
.od-modal .od-msub b{color:var(--ink)}

/* ========================================================================
   MEINE GUTSCHEINE (Phase 5)
   ======================================================================== */
.filt{max-width:var(--wrap);margin:18px auto 0;padding:0 26px}
.filt .tabs{display:inline-flex;background:var(--surface);border:1px solid var(--line-cool);border-radius:12px;padding:4px;gap:4px}
.filt .tab{appearance:none;border:0;background:transparent;color:var(--soft);font:inherit;font-weight:700;font-size:13.5px;padding:9px 16px;border-radius:9px;cursor:pointer;transition:background .15s,color .15s}
.filt .tab.active{background:var(--akzent-klein);color:var(--auf-akzent)}
.vlist{max-width:var(--wrap);margin:18px auto 0;padding:0 26px;display:flex;flex-direction:column;gap:16px}
.vcard{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--shadow-card)}
.vt{font-family:var(--font-display);font-weight:800;font-size:18px;color:var(--ink);letter-spacing:-.01em;line-height:1.15}
.vmeta{color:var(--ink-2);font-size:13px;margin-top:5px;line-height:1.6}
.vmeta b{color:var(--ink)}
.vstate{font-size:12px;font-weight:800;padding:6px 12px;border-radius:999px;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.vstate svg{width:13px;height:13px}
.vstate.ok{background:var(--tint);color:var(--aqua-700)}
.vstate.used{background:#edefee;color:var(--soft)}
.vstate.wait{background:#f5ecd8;color:#8a6a2a}
.ghead{display:grid;grid-template-columns:112px 1fr auto;gap:18px;align-items:center}
.vthumb{width:112px;height:86px;border-radius:12px;flex:none}
.gh-side{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
/* Offene Bestellungen kompakt halten (Nutzerwunsch 22.09.2026): sie stehen oben und nahmen mit den
   ausgebreiteten Ueberweisungsdaten so viel Platz ein, dass die bezahlten Gutscheine darunter
   uebersehen wurden. Die Bankdaten stehen jetzt hinter "Ueberweisungsdaten anzeigen". */
.vcard.wait{padding:14px 16px}
.vcard.wait .ghead{grid-template-columns:76px 1fr auto;gap:13px}
.vcard.wait .vthumb{width:76px;height:58px;border-radius:10px}
.vcard.wait .vt{font-size:16px}
.vcard.wait .vmeta{margin-top:3px;line-height:1.5}
.vcard.wait .paybox{margin-top:11px;padding-top:11px}
.vcard.wait .paylead{margin:0}
.vcard.wait .wr-fuss{margin-top:11px;padding-top:11px}
.payzeile{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.payfold{margin-top:9px}
.payfold>summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--aqua-700);list-style:none;display:inline-flex;align-items:center;gap:7px}
.payfold>summary::-webkit-details-marker{display:none}
.payfold>summary::before{content:"";width:0;height:0;border:5px solid transparent;border-left-color:currentColor;transition:transform .15s}
.payfold[open]>summary::before{transform:rotate(90deg) translateX(-2px)}
.payfold .payrows{margin-top:11px}
.gcount{font-size:12px;font-weight:800;color:var(--aqua-700);background:var(--tint);padding:6px 12px;border-radius:999px;white-space:nowrap}
.codes{list-style:none;margin:16px 0 0;padding:16px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:14px}
.code{display:grid;grid-template-columns:1fr auto auto;gap:16px;align-items:center}
.code.used{opacity:.6}
.code .cn{font-size:13.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.code .cn b{color:var(--ink)}
.code .cacts{display:flex;gap:8px;justify-content:flex-end}
.waitnote{font-size:12.5px;color:var(--soft);line-height:1.5}
@media (max-width:760px){
  .ghead{grid-template-columns:84px 1fr;gap:14px}
  .vthumb{width:84px;height:70px}
  .gh-side{grid-column:1 / -1;flex-direction:row;justify-content:space-between;align-items:center}
  .code{grid-template-columns:1fr;gap:8px;align-items:flex-start}
  .code .cacts{justify-content:stretch}.code .cacts .od-btn{flex:1}
}

/* ========================================================================
   MEIN KONTO (Phase 5)
   ======================================================================== */
.account{max-width:1000px;margin:20px auto 0;padding:0 26px;display:grid;grid-template-columns:220px 1fr;gap:30px;align-items:start}
.acnav{position:sticky;top:20px;display:flex;flex-direction:column;gap:4px}
.acnav a{padding:10px 14px;border-radius:11px;color:var(--ink-2);font-weight:700;font-size:14px;text-decoration:none;white-space:nowrap}
.acnav a:hover{background:var(--surface);color:var(--ink)}
.acnav a.on{background:var(--akzent-klein);color:var(--auf-akzent)}
.acol{display:flex;flex-direction:column;gap:18px;min-width:0}
.acard{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px;scroll-margin-top:20px}
.acard h2{font-family:var(--font-display);font-weight:800;font-size:20px;letter-spacing:-.02em;margin:0 0 4px;color:var(--ink)}
.acard .desc{color:var(--soft);font-size:13px;margin:0 0 18px;line-height:1.5}
.acard .row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.actionrow{display:flex;align-items:center;gap:14px;margin-top:4px;flex-wrap:wrap}
.pagehead.wr-kopf{max-width:720px}
.wr-wrap{max-width:720px;margin:20px auto 0;padding:0 26px}
.wr-liste{display:flex;flex-direction:column;gap:10px}
.wr-best{border:1.5px solid var(--line-cool);border-radius:12px;padding:12px 14px;background:var(--surface)}
.wr-best-kopf{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.wr-best:has(input:checked){border-color:var(--aqua);background:var(--tint)}
.wr-best input{margin-top:3px;flex:none;width:18px;height:18px;accent-color:var(--akzent-klein)}
/* Teilwiderruf: Auswahl der Gutscheine bzw. Menge nur bei der gewaehlten Bestellung */
.wr-gs{margin:12px 0 2px 30px;display:flex;flex-direction:column;gap:8px}
.wr-best:not(:has(input[type=radio]:checked)) .wr-gs{display:none}
.wr-gs-titel{font-size:13px;font-weight:700;color:var(--ink-2)}
.wr-gs-zeile{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink);cursor:pointer}
.wr-gs-zeile input{margin:0}
.wr-menge span{display:block;font-size:13px;font-weight:700;color:var(--ink-2);margin-bottom:6px}
.wr-menge select{font:inherit;font-size:15px;padding:10px 12px;border:1.5px solid var(--line-cool);border-radius:10px;background:var(--surface);color:var(--ink);max-width:100%}
.wr-best b{display:block;color:var(--ink);font-size:15px}
.wr-best small{display:block;color:var(--ink-2);font-size:13px;margin-top:3px;line-height:1.45}
.wr-best small.wr-frist{color:var(--akzent-text);font-weight:700}
.wr-daten{margin:16px 0;display:flex;flex-direction:column;gap:8px}
.wr-daten div{display:grid;grid-template-columns:140px 1fr;gap:10px;font-size:14px}
.wr-daten dt{color:var(--soft);font-weight:700}
.wr-daten dd{margin:0;color:var(--ink)}
.wr-wrap .wr-knopf{margin-top:8px}
/* Widerrufsfunktion (Paragraph 356a BGB, seit 22.09.2026): Knopf unten in der Gutschein-Kachel, zurueckhaltend
   (Nutzerentscheidung 22.09.2026: kein hervorgehobener Kasten), aber klar beschriftet und gut erkennbar */
.wr-fuss{display:flex;justify-content:flex-end;border-top:1px solid var(--line);margin-top:4px;padding:12px 0 0}
@media (max-width:640px){.wr-fuss .od-btn{width:100%;justify-content:center}.wr-wrap{padding:0 16px}.wr-daten div{grid-template-columns:1fr;gap:2px}}
.saved{display:inline-flex;align-items:center;gap:6px;color:var(--aqua-700);font-weight:700;font-size:13.5px}
.saved svg{width:16px;height:16px}
.switchrow{display:flex;align-items:center;justify-content:space-between;gap:16px}
.switchrow .lbl{font-weight:700;color:var(--ink);font-size:14.5px}
.switchrow .lbl small{display:block;font-weight:500;color:var(--soft);font-size:12px;margin-top:2px}
.switch{position:relative;width:52px;height:30px;flex:none}
.switch input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:2}
.switch .track{position:absolute;inset:0;background:var(--line-cool);border-radius:999px;transition:background .15s}
.switch .knob{position:absolute;top:3px;left:3px;width:24px;height:24px;background:#fff;border-radius:50%;transition:transform .15s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.switch input:checked ~ .track{background:var(--aqua)}
.switch input:checked ~ .knob{transform:translateX(22px)}
.acard.danger h2{color:var(--danger)}
.delwarn{color:var(--ink-2);font-size:14px;font-weight:600;line-height:1.55;margin:4px 0 18px;max-width:72ch}
@media (max-width:820px){
  .account{grid-template-columns:1fr;gap:16px}
  .acnav{position:static;flex-direction:row;flex-wrap:wrap;gap:6px}
}

/* ========================================================================
   RECHTSSEITEN (AGB, Datenschutz, Impressum, Widerruf, Kontakt)
   Inhalte kommen aus inc_layout/od2026/texte/*.php (p, br, strong, ul, a, h1/h2).
   ======================================================================== */
.od-legal{max-width:820px;margin:36px auto 0;padding:0 26px}
.od-legal .legalcard{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:34px 38px;box-shadow:var(--shadow-card)}
.od-legal h1{font-family:var(--font-display);font-weight:800;font-size:32px;letter-spacing:-.02em;margin:0 0 20px;color:var(--ink)}
.od-legal h2{font-family:var(--font-display);font-weight:800;font-size:21px;margin:26px 0 10px;color:var(--ink)}
.od-legal p{color:var(--ink-2);line-height:1.65;margin:0 0 12px;font-size:15px;overflow-wrap:anywhere}
.od-legal p strong{color:var(--ink)}
.od-legal ul{margin:0 0 14px;padding-left:22px;color:var(--ink-2);line-height:1.6}
.od-legal li{margin:0 0 6px}
.od-legal a{color:var(--aqua-700);font-weight:700;text-decoration:none}
.od-legal a:hover{text-decoration:underline}
.od-legal img{max-width:100%;height:auto}
/* Rechtstexte des Dienstes (seit 22.09.2026): Unterpunkte, Stand, Muster-Widerrufsformular */
.od-legal h3{font-family:var(--font-display);font-weight:800;font-size:16px;margin:18px 0 6px;color:var(--ink)}
.od-legal h2+h3{margin-top:8px}
.od-legal .stand{font-size:13.5px;color:var(--soft);margin:-12px 0 22px}
.od-legal .muster{margin-top:34px;padding:24px 26px;border:1.5px dashed var(--line-cool);border-radius:16px;background:var(--tint)}
.od-legal .muster h2{margin-top:0}
.od-legal .muster .felder{margin:16px 0 0;display:grid;grid-template-columns:minmax(0,1fr);gap:4px}
.od-legal .muster dt{font-weight:700;color:var(--ink);font-size:14.5px;margin-top:10px}
.od-legal .muster dd{margin:0;min-height:30px;border-bottom:1px solid var(--line-cool)}
.od-legal .muster dd small{display:block;font-size:12.5px;color:var(--soft);padding-top:4px}
@media (max-width:560px){ .od-legal .legalcard{padding:22px 18px}.od-legal h1{font-size:26px} }

/* ========================================================================
   CONSENT MANAGEMENT (inc_layout/od2026/consent.php, js/od2026-consent.js)
   Banner unten, nicht blockierend; "Alle akzeptieren" und "Nur notwendige" gleichwertig.
   ======================================================================== */
.od-cc{position:fixed;left:0;right:0;bottom:0;z-index:90;padding:0 16px 16px;pointer-events:none}
.od-cc[hidden]{display:none}
.od-cc-in{pointer-events:auto;max-width:980px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 60px -20px rgba(9,22,21,.45);padding:20px 22px;display:flex;gap:22px;align-items:center}
.od-cc-txt h2{font-family:var(--font-display);font-weight:800;font-size:19px;margin:0 0 6px}
.od-cc-txt p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.od-cc-txt a{color:var(--aqua-700);font-weight:700;text-decoration:none}
.od-cc-txt a:hover{text-decoration:underline}
.od-cc-acts{display:flex;flex-direction:column;gap:8px;flex:0 0 190px}
.od-cc-acts .od-btn{width:100%}
.od-cc-modal{max-width:620px;max-height:calc(100vh - 68px);overflow:auto}
.od-cc-kats{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.od-cc-kat{border:1px solid var(--line-cool);border-radius:14px;padding:14px 16px}
.od-cc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;cursor:pointer}
.od-cc-head b{display:block;font-size:15px;color:var(--ink)}
.od-cc-head small{display:block;font-size:13px;color:var(--ink-2);line-height:1.45;margin-top:2px}
.od-cc-sw{appearance:none;-webkit-appearance:none;flex:0 0 46px;width:46px;height:26px;border-radius:13px;background:#cfd8d7;position:relative;cursor:pointer;margin:2px 0 0;transition:background .15s}
.od-cc-sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.od-cc-sw:checked{background:var(--aqua)}
.od-cc-sw:checked::after{transform:translateX(20px)}
.od-cc-sw:disabled{opacity:.55;cursor:not-allowed}
.od-cc-sw:focus-visible{outline:2px solid var(--aqua-700);outline-offset:2px}
.od-cc-kat details{margin-top:8px}
.od-cc-kat summary{font-size:13px;font-weight:700;color:var(--aqua-700);cursor:pointer}
.od-cc-dienst{margin:10px 0 0;padding:10px 12px;background:var(--tint);border-radius:10px;font-size:12.5px;color:var(--ink-2)}
.od-cc-dienst dt{font-weight:800;color:var(--ink);margin-bottom:4px}
.od-cc-dienst dd{margin:0 0 3px}
.od-cc-dienst dd span{display:inline-block;min-width:88px;font-weight:700;color:var(--ink)}
.od-cc-dienst a{color:var(--aqua-700);font-weight:700}
.od-cc-mfoot{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.od-cc-linkbtn{appearance:none;background:none;border:0;padding:0;font:inherit;font-size:13px;font-weight:700;color:var(--aqua-700);cursor:pointer;text-decoration:underline}
/* Platzhalter fuer externe Videos */
.od-embed{position:relative;aspect-ratio:16/9;width:100%;max-width:640px;border-radius:14px;overflow:hidden;background:var(--band-1);color:#d7e6e5;margin:14px 0}
.od-embed.on{background:#000}
.od-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.od-embed-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:18px;text-align:center}
.od-embed-in .t{margin:0;font-weight:800;color:#fff;font-size:15px}
.od-embed .od-embed-in .d{margin:0 0 4px;font-size:12.5px;line-height:1.45;max-width:420px;color:#d7e6e5}
.od-embed .od-embed-in .t{color:#fff}
.od-embed-in .d a{color:var(--aqua-light)}
.od-embed-in .od-cc-linkbtn{color:var(--aqua-light);font-size:12.5px}
@media (max-width:720px){
  .od-cc{padding:0 10px 10px}
  .od-cc-in{flex-direction:column;align-items:stretch;gap:14px;padding:16px}
  .od-cc-acts{flex:none}
  .od-cc-mfoot{grid-template-columns:1fr}
}

/* Admin-Vorschau (deal-detail.php?vorschau=1): schwebendes Schild, veraendert das Seitenlayout nicht */
.od-vorschau{position:absolute;top:84px;right:16px;z-index:200;display:flex;align-items:center;gap:12px;padding:8px 10px 8px 16px;border-radius:999px;background:#F0003D;color:#fff;font-size:14px;box-shadow:0 10px 28px -10px rgba(0,0,0,.55);white-space:nowrap}
.od-vorschau strong{font-weight:800;letter-spacing:.02em;text-transform:uppercase;font-size:13px}
.od-vorschau a{color:#F0003D;background:#fff;text-decoration:none;font-weight:700;font-size:13px;padding:5px 12px;border-radius:999px}
@media (max-width:560px){.od-vorschau{top:10px;right:10px;max-width:calc(100% - 110px);white-space:normal;flex-wrap:wrap;justify-content:center;gap:6px 10px;padding:8px 10px;border-radius:14px;font-size:12.5px;text-align:center}}

/* ---- Startseite: weisser Hintergrund, Kacheln per Schatten statt Rahmen abgegrenzt (seit 17.09.2026) ---- */
body.od-start{background:var(--surface)}
body.od-start{--shadow-kachel:0 1px 3px rgba(14,34,33,.07),0 8px 24px -8px rgba(14,34,33,.20);--shadow-kachel-hover:0 2px 6px rgba(14,34,33,.08),0 20px 40px -12px rgba(14,34,33,.32)}
body.od-start .featured-card,body.od-start .card{border-color:transparent;box-shadow:var(--shadow-kachel)}
body.od-start .card:hover,body.od-start .featured-card:hover{box-shadow:var(--shadow-kachel-hover)}
body.od-start .card .foot{border-top-color:var(--line)}
body.od-start .featured-card{border-radius:10px}
body.od-start .card{border-radius:8px}
/* Startseite: Buttons und Badges passend zu den kleineren Kachelradien */
body.od-start .od-btn,body.od-start .od-nav a.cta,body.od-start .chip,body.od-start .search,body.od-start .nl input{border-radius:6px}
body.od-start .featured-card .newbadge,body.od-start .featured-card .ribbon{border-radius:5px}
body.od-start .od-userchip summary{border-radius:8px}
body.od-start .featured-card .pct{border-radius:7px}
body.od-start .card .photo .pct{border-radius:5px}
body.od-start .od-cc-in{border-radius:10px}

/* ---- Farbschema "Aachen": kraeftigere Stadtfarben an den grossen Flaechen (18.09.2026) ---- */
/* Gelber Streifen unter der Kopfleiste - Anklang an die schwarz-gelbe Stadtflagge */
html[data-farbe="aachen"] .od-header{border-bottom:3px solid #ffcc00}
/* Seitenflaeche mit warmem Ton statt reinem Weiss, damit die weissen Kacheln staerker wirken */
html[data-farbe="aachen"] body.od-start{background:#fbf6e6}
/* Rabattschild in Gelb mit schwarzer Schrift */
html[data-farbe="aachen"] .pct{background:#ffcc00;color:#141414}
/* Kategorie-Knoepfe in der dunklen Leiste mit gelbem Rand */
html[data-farbe="aachen"] .chip{border-color:rgba(255,204,0,.4)}
html[data-farbe="aachen"] .chip:hover{border-color:#ffcc00;color:#fff}
html[data-farbe="aachen"] .katnav{border-color:rgba(255,204,0,.4)}
html[data-farbe="aachen"] .katnav:hover{border-color:#ffcc00}
html[data-farbe="aachen"] .search{border-color:rgba(255,204,0,.35)}
/* Drei-Schritte-Band: Schwarz mit gelber Schrift */
html[data-farbe="aachen"] .band{background:#141414}
html[data-farbe="aachen"] .band h2{color:#ffcc00}
html[data-farbe="aachen"] .band .eyebrow{color:#ffcc00}
html[data-farbe="aachen"] .band .step .n{background:rgba(255,204,0,.16);color:#ffcc00}
/* Newsletter-Band kraeftig gelb, Knopf schwarz mit gelber Schrift */
html[data-farbe="aachen"] .nl{background:#ffcc00;border-color:#e0b400}
html[data-farbe="aachen"] .nl .eyebrow{color:#5c4700}
html[data-farbe="aachen"] .nl p{color:#3d3000}
html[data-farbe="aachen"] .nl input{border-color:#e0b400}
html[data-farbe="aachen"] .nl .od-btn{background:#141414;color:#ffcc00}
html[data-farbe="aachen"] .nl .od-btn:hover{background:#000}
/* Fusszeile: gelbe Links auf Schwarz */
html[data-farbe="aachen"] .od-foot-in a{color:#e9dfbe}
html[data-farbe="aachen"] .od-foot-in a:hover{color:#ffcc00}
html[data-farbe="aachen"] .od-foot-in .claim{color:#9a927c}
/* ========================================================================
   FARBSCHEMA "DUNKEL" (Dark Mode fuer das ganze Portal, seit 22.09.2026; ersetzt das Schema "Dueren").
   Dunkles Blau-Grau als Grund, Karten eine Stufe heller, helle Schrift. Akzent bleibt das OecherDeal-Blau
   #309fcf (Knoepfe mit weisser Schrift ab 19 px wie im Hellen); als Textfarbe aufgehellt #6cc4ea
   (auf #17222c ca. 7:1). Kleine weisse Schrift auf #25799d (4,9:1) wie im Hellen.
   color-scheme:dark laesst auch Formularfelder, Auswahllisten und Scrollleisten des Browsers dunkel erscheinen.
   Fest eingetragene helle Flaechen (Meldungen, Statusschilder, Kaufleiste, Schalter) unten eigens nachgezogen.
   ======================================================================== */
html[data-farbe="dunkel"]{
  color-scheme:dark;
  --aqua-light:#1f4a60; --aqua:#309fcf; --aqua-600:#3bb0e0; --aqua-700:#6cc4ea; --sky:#8fc0d6;
  --ink:#e8eef2; --ink-2:#b9c7d0; --soft:#8a9ba6;
  --ground:#0f171e; --surface:#17222c; --tint:#1c2c38; --tint-2:#233645; --line:#2a3945; --line-cool:#314657;
  --danger:#ff6b63; --danger-600:#ff8a84;
  --auf-akzent:#ffffff;
  --band-1:#0a1118; --band-2:#16364d;
  --glanz:48,159,207;
  --auf-ink:#cfdfe8; --auf-ink-leise:#8fa6b3;
  --akzent-text:#6cc4ea;
  --akzent-klein:#25799d; --akzent-klein-hover:#1d5f7c;
  --shadow-card:0 1px 2px rgba(0,0,0,.45);
  --shadow-pop:0 16px 40px -18px rgba(0,0,0,.85);
}
/* Startseite: Seite dunkler als die Kacheln, sonst verschwimmen sie (im Hellen ist die Seite weiss) */
html[data-farbe="dunkel"] body.od-start{background:var(--ground);
  --shadow-kachel:0 1px 3px rgba(0,0,0,.5),0 8px 24px -8px rgba(0,0,0,.6);--shadow-kachel-hover:0 2px 6px rgba(0,0,0,.55),0 20px 40px -12px rgba(0,0,0,.75)}
html[data-farbe="dunkel"] .od-header{border-bottom-color:var(--line)}
/* aktiver Kategorie-Chip: heller Grund (--sky) braucht dunkle Schrift - --ink ist hier hell */
html[data-farbe="dunkel"] .chip.active{color:#0a1118}
html[data-farbe="dunkel"] .od-btn:disabled{background:#26333d;color:var(--soft)}
html[data-farbe="dunkel"] .crumb-in .sep{color:#40525f}
html[data-farbe="dunkel"] .formmsg{background:#3a1d1c;border-color:#6b2e2b;color:#ffb4ae}
html[data-farbe="dunkel"] .pay .pt.slow,html[data-farbe="dunkel"] .vstate.wait{background:#3a3020;color:#e6c47a}
html[data-farbe="dunkel"] .vstate.used{background:#24313b;color:var(--soft)}
html[data-farbe="dunkel"] .od-cc-sw{background:#3a4955}
html[data-farbe="dunkel"] .qreinl.papier{background:color-mix(in srgb,var(--danger) 14%,var(--surface));border-color:color-mix(in srgb,var(--danger) 45%,var(--surface));color:var(--danger)}
/* Kaufleiste am Handy nutzt im Hellen die Schriftfarbe als Grund - im Dunklen waere sie hell */
html[data-farbe="dunkel"] .od-kaufleiste{background:var(--band-1);border-top:1px solid var(--line)}
/* Bilder minimal abdunkeln, damit weisse Fotos nicht blenden */
html[data-farbe="dunkel"] .photo img{filter:brightness(.94)}
/* ========================================================================
   FARBSCHEMA "HEINSBERG" (Stadtwappen: in Rot ein silberner, gekroenter Loewe mit gekreuztem
   Doppelschwanz, schwarz umrandet; seit 22.09.2026).
   Das Wappen-Rot #DA121A traegt grosse Flaechen (Kategorienleiste, "In 3 Schritten") - Weiss darauf
   erreicht 5,1:1 und reicht damit auch fuer kleine Schrift. Silber = Weiss und helles Grau, Schwarz fuer
   Konturen und Text. Kein Gelb - so hebt sich Heinsberg klar von Dueren (Rot-Gelb-Schwarz) ab.
   ======================================================================== */
html[data-farbe="heinsberg"]{
  --aqua-light:#f6c9cb; --aqua:#da121a; --aqua-600:#bc1016; --aqua-700:#bc1016; --sky:#ffffff;
  --ink:#141414; --ink-2:#3a3a3a; --soft:#6b6b6b;
  --ground:#f6f6f4; --surface:#ffffff; --tint:#f4f4f4; --tint-2:#e9e9e9; --line:#e2e2e2; --line-cool:#dcdcdc;
  --auf-akzent:#ffffff;
  --band-1:#141414; --band-2:#4b0609;
  --glanz:218,18,26;
  --auf-ink:#ffffff; --auf-ink-leise:#d6d6d6;
  --akzent-text:#bc1016;
  --akzent-klein:#da121a; --akzent-klein-hover:#bc1016;
}
/* Kategorienleiste rot wie der Schild, darueber eine schwarze Kontur wie die Umrisse im Wappen */
html[data-farbe="heinsberg"] .od-header{border-bottom:3px solid #141414}
html[data-farbe="heinsberg"] .toolbar{background:#da121a}
html[data-farbe="heinsberg"] .catrow .chip:first-child{background:#da121a;box-shadow:7px 0 0 #da121a}
html[data-farbe="heinsberg"] .catrow .chip:first-child.active{background:#ffffff}
html[data-farbe="heinsberg"] .chip{border-color:rgba(255,255,255,.45)}
html[data-farbe="heinsberg"] .chip:hover{border-color:#fff}
html[data-farbe="heinsberg"] .katnav{border-color:rgba(255,255,255,.45)}
html[data-farbe="heinsberg"] .search{background:rgba(0,0,0,.14);border-color:rgba(255,255,255,.45)}
html[data-farbe="heinsberg"] .search input::placeholder{color:rgba(255,255,255,.8)}
/* Rabatt-Schild silbern mit roter Schrift - Loewe und Schild in umgekehrten Farben */
html[data-farbe="heinsberg"] .pct{background:#ffffff;color:#da121a}
/* "In 3 Schritten": roter Grund, weisse Schrift */
html[data-farbe="heinsberg"] .band{background:#da121a;color:#fff}
html[data-farbe="heinsberg"] .band h2{color:#fff}
html[data-farbe="heinsberg"] .band .eyebrow{color:#fff}
html[data-farbe="heinsberg"] .band .step span{color:#fff}
html[data-farbe="heinsberg"] .band .step .n{background:rgba(255,255,255,.2);color:#fff}
/* Newsletter-Kasten silbern mit rotem Rand */
html[data-farbe="heinsberg"] .nl{background:#f4f4f4;border-top:3px solid #da121a}
html[data-farbe="heinsberg"] .od-foot-in a{color:#ffffff}
html[data-farbe="heinsberg"] .od-foot-in a:hover{color:#f6c9cb}
html[data-farbe="heinsberg"] .od-foot-in .claim{color:#9a9a9a}

/* ---- "Meine Gutscheine": QR-Fenster mit Anbieter, Deal, Variante und Konditionen (18.09.2026) ---- */
.qrkopf{margin:0 0 16px;text-align:center}
.qrkopf .qrfirma{font-weight:800;font-size:15px;color:var(--ink)}
.qrkopf .qrdeal{font-family:var(--font-display);font-weight:800;font-size:18px;line-height:1.2;margin-top:2px;color:var(--ink);letter-spacing:-.01em}
.qrkopf .qrvariante{font-size:14px;font-weight:600;color:var(--ink-2);margin-top:4px}
.qrkond{text-align:left;background:var(--tint);border:1px solid var(--line-cool);border-radius:12px;padding:12px 14px;margin:0 0 14px}
.qrkond-titel{font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--akzent-text);margin-bottom:6px}
.qrkond ul{margin:0;padding-left:18px;font-size:13.5px;color:var(--ink-2);line-height:1.5}
.qrkond li{margin:3px 0}
/* Abgelaufene Einloesefrist: roter Hinweis (Karte und QR-Fenster) */
.vabgelaufen{color:var(--danger);font-weight:700}
/* Hinweis ueber dem QR-Code im Gutschein-Fenster (seit 22.09.2026): viele Kunden scannen den Code selbst */
.qr-nur-anbieter{color:var(--danger-600);font-size:13px;font-weight:700;line-height:1.4;margin:0 0 8px}
.qrhinweis{font-size:14px;margin:0 0 12px}
/* QR-Fenster: Einloesung laut Deal (nur mit Ausdruck / Handy genuegt) */
.qreinl{font-size:14px;line-height:1.45;text-align:left;border-radius:10px;padding:10px 12px;margin:0 0 14px}
.qreinl.papier{background:color-mix(in srgb,var(--danger) 9%,#fff);border:1px solid color-mix(in srgb,var(--danger) 35%,#fff);color:var(--danger-600)}
.qreinl.handy{background:var(--tint);border:1px solid var(--line-cool);color:var(--ink-2)}
.qreinl b{color:inherit}
.qreinl.handy b{color:var(--akzent-text)}

/* ========================================================================
   Handy (bis 640px, seit 18.09.2026): kompakter Kopf in einer Zeile, Kategorienleiste mit Such-Symbol,
   zwei Spalten kompakter Kacheln. Rueckweg: Git-Marke mobil-basis.
   ======================================================================== */
.od-mnav,.od-mmenu{display:none}
@media (max-width:640px){
  .od-topbar{padding:8px 12px 8px 16px;gap:8px;flex-wrap:nowrap}
  .od-logo{height:44px}
  .od-marke{gap:8px}
  .od-regionen{font-size:10px;line-height:1.25;max-height:50px;overflow:hidden}
  .od-nav{display:none}
  .od-mnav{display:flex;align-items:center;gap:2px}
  .od-mico{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:58px;height:50px;padding:0 4px;background:none;border:0;border-radius:10px;color:var(--ink);font:inherit;font-size:11px;font-weight:700;line-height:1;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .od-mico svg{width:24px;height:24px;flex:none}
  .od-mico.on{color:var(--akzent-text)}
  .od-mico:active{background:var(--tint)}
  .od-mico:focus-visible{outline:2px solid var(--aqua);outline-offset:1px}
  .od-mico .av{width:24px;height:24px;border-radius:50%;background:var(--akzent-klein);color:var(--auf-akzent);font-size:10px;font-weight:800;display:grid;place-items:center}
  .od-mmenu:not([hidden]){display:flex;flex-direction:column;padding:0 16px 10px;border-top:1px solid var(--line);background:var(--surface);box-shadow:0 14px 24px -18px rgba(14,34,33,.45)}
  .od-mmenu > a,.od-mfarbe{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;padding:0 2px;border-bottom:1px solid var(--line);font-weight:700;font-size:16px;color:var(--ink);text-decoration:none}
  .od-mmenu > a.on{color:var(--akzent-text)}
  .od-mmenu > a:last-child{border-bottom:0}
  .od-mfarbe .od-farbwahl{display:inline-flex;gap:10px}
  .od-mfarbe .od-farbe{width:34px;height:34px;border-radius:9px}
  .od-mlogout span{font-weight:600;font-size:14px;color:var(--ink-2)}

  /* Kategorienleiste: Wischen statt Pfeilknoepfe, Suche als Symbol am Ende, klappt ueber die ganze Breite auf */
  .toolbar-in{padding:9px 16px;gap:7px}
  .katnav{display:none!important}
  .search{width:auto;flex:none;padding:8px 10px;cursor:pointer}
  .search svg{width:16px;height:16px}
  .search input{width:0;flex:0 0 0}
  .toolbar.suche-offen .catrow{display:none}
  .toolbar.suche-offen .search{flex:1;padding:8px 14px;cursor:text}
  .toolbar.suche-offen .search input{width:100%;flex:1 1 auto;font-size:16px}

  /* Top-Deal */
  .topdeals{margin-top:16px;padding:0 16px}
  .featured-card .ribbon{top:12px;left:12px;font-size:10.5px;padding:7px 11px}
  .featured-card .pct{bottom:12px;left:12px;font-size:19px;padding:9px 12px}
  .featured-card .info{padding:14px 16px 16px;gap:6px}
  .featured-card h2,.featured-card h3{font-size:22px;line-height:1.12}
  .featured-card .zeile{font-size:13.5px;gap:4px 12px}
  .featured-card .p .now{font-size:29px}
  .featured-card .p .was{font-size:15px}

  /* Raster: zwei Spalten kompakte Kacheln */
  .section{margin-top:22px;padding:0 16px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .card .photo .pct{top:7px;left:7px;font-size:13px;padding:5px 7px}
  .card .body{padding:9px 10px 11px;gap:3px}
  .card .catline{font-size:9.5px;letter-spacing:.05em}
  .card h3{font-size:14px;line-height:1.2;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;text-wrap:pretty}
  .card .firma{font-size:11.5px;line-height:1.3}
  .card .firma .ort{margin-top:1px}
  .card .foot{padding-top:7px;gap:1px}
  .card .p{gap:2px 6px}
  .card .p .now{font-size:17px}
  .card .p .was{font-size:11.5px}
  .card .sold{font-size:11px}

  /* Detailseite: Kaufbereich weiter unten -> feste Kaufleiste (Regeln bis 900px siehe unten) */
  /* Detailseite: Brotkrumen nur "Alle Deals" (der Titel steht direkt darunter gross), Titel kleiner */
  .crumb-in{padding:10px 16px}
  .crumb-in .sep,.crumb-in .cur{display:none}
  .detail{margin-top:16px;padding:0 16px}
  .titlewrap h1{font-size:25px;line-height:1.1}

  /* Einheitlicher Seitenrand 16px (wie Kopf und Startseite) */
  .od-wrap,.related,.pagehead,.checkout,.filt,.vlist,.od-legal{padding-left:16px;padding-right:16px}
  .od-foot-in,.band-in,.nl-in{padding-left:16px;padding-right:16px}

  /* Bestellbestaetigung: Knoepfe untereinander ueber die volle Breite */
  .okwrap{margin-top:16px;padding:0 16px}
  .okcard{padding:22px 20px}
  .okcard .okakt .od-btn{flex:1 1 100%}

  /* Mein Konto: Reiter in einer Zeile zum Wischen, bleiben beim Scrollen oben stehen */
  .account{padding:0 16px}
  .acnav{position:sticky;top:0;z-index:20;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:6px;margin:0 -16px;padding:8px 16px;background:var(--ground)}
  .acnav::-webkit-scrollbar{display:none}
  .acnav a{flex:none;padding:8px 12px;font-size:13.5px}
  .acard{scroll-margin-top:64px}

  /* Cookie-Hinweis: gleicher Text, kompakter; "Alle akzeptieren" und "Nur notwendige" gleich gross nebeneinander */
  .od-cc{padding:0 8px 8px}
  .od-cc-in{flex-direction:column;align-items:stretch;gap:12px;padding:14px 16px 14px;border-radius:14px}
  .od-cc-txt h2{font-size:16px;margin:0 0 4px}
  .od-cc-txt p{font-size:12.5px;line-height:1.45}
  .od-cc-acts{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .od-cc-acts .od-btn{min-height:44px;padding:10px 8px;font-size:14px}
  .od-cc-acts .od-btn.ghost{grid-column:1 / -1;min-height:40px;border-color:transparent;background:none;text-decoration:underline;text-underline-offset:3px}
}
/* Feste Kaufleiste der Detailseite (bis 900px, einspaltiges Layout). Seit 18.09.2026 auffaelliger (Nutzerwunsch):
   dunkle Leiste mit Akzentstreifen, oben Preis + Anzahl, darunter der Knopf ueber die volle Breite;
   gleitet beim ersten Erscheinen hoch, der Knopf leuchtet einmal auf. */
.od-kaufleiste{display:none}
@media (max-width:900px){
  .od-kaufleiste{display:flex;flex-direction:column;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:80;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--ink);color:#fff;
    border-top:3px solid var(--aqua);box-shadow:0 -14px 30px -12px rgba(9,22,21,.55);
    transition:transform .25s ease;animation:od-kl-rein .45s ease-out backwards}
  .od-kaufleiste.weg{transform:translateY(115%)}
  .od-kaufleiste .kl-zeile{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .od-kaufleiste .price{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
  .od-kaufleiste .price .now{font-weight:800;font-size:27px;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.02;text-shadow:none}
  .od-kaufleiste .price .now .ab{color:rgba(255,255,255,.7)}
  .od-kaufleiste .price .was{color:rgba(255,255,255,.72);font-weight:700;font-size:13px}
  .od-kaufleiste .price .was s{color:rgba(255,255,255,.72);text-decoration-color:var(--aqua)}
  .od-kaufleiste .kl-summe{font-size:13px;font-weight:800;color:var(--aqua-light)}
  .od-kaufleiste .kl-summe[hidden]{display:none}
  .od-kaufleiste .kl-stepper{flex:none;border-color:rgba(255,255,255,.35);border-radius:12px;background:transparent}
  .od-kaufleiste .kl-stepper button{background:transparent;color:#fff;width:42px;height:42px;font-size:22px}
  .od-kaufleiste .kl-stepper button:hover,.od-kaufleiste .kl-stepper button:active{background:rgba(255,255,255,.12)}
  .od-kaufleiste .kl-stepper .qn{color:#fff;min-width:34px;font-size:18px}
  .od-kaufleiste .od-btn{width:100%;justify-content:center;padding:15px 18px;font-size:17px;font-weight:800;
    box-shadow:0 8px 22px -8px rgba(var(--glanz),.9);animation:od-kl-puls 1.4s ease-out .6s 1}
  body.mit-kaufleiste{padding-bottom:132px}
}
@keyframes od-kl-rein{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes od-kl-puls{0%{box-shadow:0 0 0 0 rgba(var(--glanz),.75)}70%{box-shadow:0 0 0 14px rgba(var(--glanz),0)}100%{box-shadow:0 8px 22px -8px rgba(var(--glanz),.9)}}
@media (prefers-reduced-motion:reduce){.od-kaufleiste,.od-kaufleiste .od-btn{animation:none}}

/* Grossansicht eines Deal-Bildes (deal-detail.php): Antippen des Hauptbilds; X oben rechts, erneutes Antippen,
   Tippen daneben oder Escape schliessen */
.photo.main.zoombar{cursor:zoom-in}
.photo.main.zoombar:focus-visible{outline:3px solid var(--aqua);outline-offset:3px}
.od-zoom{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:56px 12px 24px;background:rgba(9,18,17,.92);cursor:zoom-out;-webkit-tap-highlight-color:transparent}
.od-zoom[hidden]{display:none}
.od-zoom-fig{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:8px}
.od-zoom img{display:block;max-width:100%;max-height:calc(100vh - 110px);width:auto;height:auto;object-fit:contain;border-radius:6px;box-shadow:0 20px 60px -20px rgba(0,0,0,.7)}
.od-zoom-cr{font-size:12px;line-height:1.3;color:rgba(255,255,255,.72);text-align:center}
.od-zoom-cr[hidden]{display:none}
.od-zoom-x{position:absolute;top:calc(10px + env(safe-area-inset-top));right:10px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;cursor:pointer}
.od-zoom-x svg{width:24px;height:24px}
.od-zoom-x:hover{background:rgba(255,255,255,.26)}
.od-zoom-x:focus-visible{outline:2px solid #fff;outline-offset:2px}
html.od-zoom-offen,html.od-zoom-offen body{overflow:hidden}

/* Bildnachweis ganz unten im Deal (Copyright aus der Bildbibliothek, seit 19.09.2026) */
.bildnachweis{margin:18px 0 0;font-size:12px;line-height:1.5;color:var(--soft)}

/* Einleitung der Kategorieseiten (seit 19.09.2026) */
.kat-text{background:var(--surface);border-bottom:1px solid var(--line)}
.kat-text.kat-text-unten{border-bottom:0;border-top:1px solid var(--line)}
.kat-text-in{max-width:1180px;margin:0 auto;padding:18px 16px 20px}
.kat-text h2{font-family:var(--font-display);font-weight:800;font-size:20px;letter-spacing:-.02em;margin:0 0 6px;color:var(--ink)}
.kat-text p{margin:0 0 10px;color:var(--ink-2);max-width:78ch;font-size:15px;line-height:1.55}
.kat-text p:last-child{margin-bottom:0}
@media (max-width:640px){.kat-text-in{padding:14px 16px 16px}.kat-text h2{font-size:18px}.kat-text p{font-size:14.5px}}