:root{
  --bg:#f6f5f1; --card:#fff;
  --ink:#20222b; --ink-2:#5d6070; --ink-3:#969aa6;
  --line:#e7e5df; --line-2:#d7d4cc;
  --navy:#1d2140; --navy-2:#141733; --navy-soft:#e9eaf3;
  --akzent:#e26a4c; --akzent-2:#c6573b; --akzent-bg:#fbf2ee; --akzent-line:#edd2c8;
  --mint:#13a071; --mint-bg:#e5f6ef;
  --gold:#f5b300; --gold-bg:#fff6dc; --gold-ink:#7a5800;
  --gruen:#0e6b4a; --gruen-2:#0a5740; --gruen-bg:#e8f4ee; --gruen-line:#bfe0d2;
  --shell:1200px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:400 15.5px/1.55 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.014em;line-height:1.22}
p{margin:0}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
.wrap{max-width:var(--shell);margin:0 auto;padding:0 24px}

.hinweisleiste{background:var(--navy-2);color:#9ea2bd;font-size:12.5px;text-align:center;padding:7px 16px}
.hinweisleiste a{color:#c3c6da;text-decoration:underline}
.top{background:var(--navy);color:#fff;position:sticky;top:0;z-index:40}
.top .wrap{display:flex;align-items:center;gap:24px;height:66px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:-.03em;flex:none}
.logo .mk{width:34px;height:26px;border-radius:7px;background:var(--akzent);position:relative;display:grid;place-items:center;
  font-size:14px;font-weight:800;color:#fff}
.logo .mk::before,.logo .mk::after{content:"";position:absolute;top:50%;width:8px;height:8px;border-radius:50%;
  background:var(--navy);transform:translateY(-50%)}
.logo .mk::before{left:-4px}.logo .mk::after{right:-4px}
.logo em{font-style:normal;color:var(--akzent)}
.top nav{display:flex;gap:20px;font-size:14.5px;color:#c3c6da}
.top nav a:hover,.top nav a.on{color:#fff}
/* Länderauswahl im Kopf als Klappmenü (Hasan 23.09.): <details>/<summary>
   statt Link, öffnet/schließt ganz ohne JavaScript (siehe
   templates/kopf-land.php). display:flex auf .land nimmt der <summary>
   automatisch ihren eigenen Aufklapp-Pfeil weg (kein list-item-Layout
   mehr) - die zwei ::marker-Regeln fangen ältere Browser ab, die das
   nicht von selbst tun. */
.top .landwahl{margin-left:auto;position:relative}
.top .landwahl>.land{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:#c3c6da;
  border:1px solid rgba(255,255,255,.18);border-radius:100px;padding:7px 13px;cursor:pointer;list-style:none}
.top .landwahl>.land::marker,.top .landwahl>.land::-webkit-details-marker{display:none;content:""}
.top .landwahl>.land:hover,.top .landwahl[open]>.land{color:#fff;border-color:rgba(255,255,255,.4)}
/* Kuerzel-Fassung (siehe templates/kopf-land.php) nur unter 400 Pixel
   sichtbar, siehe @media(max-width:400px) weiter unten. */
.top .landwahl>.land .land-kurz{display:none}
/* Klappliste: gleiches Muster wie .such-liste (Kasten, Schatten, Zeilen
   mit Hover) - rechtsbündig zum Knopf, damit sie am rechten Bildrand
   nicht übersteht. Auf schmalen Bildschirmen setzt dc.js Position/Breite
   zusätzlich per Inline-Style auf volle Bildschirmbreite, aus demselben
   Grund wie bei .such-liste (der Knopf selbst ist dafür zu schmal). */
.landmenue{position:absolute;top:calc(100% + 8px);right:0;left:auto;width:300px;max-width:calc(100vw - 32px);
  background:#fff;border-radius:14px;box-shadow:0 22px 44px -12px rgba(0,0,0,.4);border:1px solid var(--line);
  overflow-y:auto;max-height:min(70vh,480px);z-index:80;padding:6px;box-sizing:border-box}
.landmenue a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;
  color:var(--ink);text-decoration:none;font-size:14px;line-height:1.35}
.landmenue a:hover,.landmenue a:focus-visible{background:var(--akzent-bg)}
.landmenue a[aria-current="true"]{background:var(--navy-soft);font-weight:700}
.landmenue a .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.landmenue a .anz{font-size:12px;color:var(--ink-3);flex:none;white-space:nowrap;margin-left:auto;padding-left:8px}
.landmenue a.alle{justify-content:center;text-align:center;font-weight:700;color:var(--akzent);
  margin-top:4px;border-top:1px solid var(--line);border-radius:0;padding:12px}
@media(max-width:760px){.landmenue{width:min(340px,calc(100vw - 32px))}}
.suche{flex:1;max-width:400px;margin-left:auto;position:relative}
/* Zweites Suchfeld im Kopf NUR fuer die globale Startseite (Betreiber
   23.09.: "Startseite sollte auch so sein mit Suchleiste" - Laenderseiten
   haben am Handy schon Suche+Laenderauswahl in Zeile 2, die Startseite
   bisher nicht, weil dort am Rechner absichtlich nur die grosse Suche im
   Textbereich steht, siehe templates/startseite.php). Am Rechner bleibt
   dieses zweite Feld unsichtbar - dort aendert sich nichts, die grosse
   Suche im Text bleibt Hasans Entwurf unveraendert. */
.km-start-suche{display:none}
.suche input{width:100%;font:inherit;font-size:14.5px;padding:10px 15px 10px 40px;border-radius:100px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);color:#fff}
.suche input::placeholder{color:#9ea2bd}
.suche input:focus{outline:2px solid var(--akzent);outline-offset:-1px;background:rgba(255,255,255,.12)}
.suche svg{position:absolute;left:14px;top:11px;color:#9ea2bd}
/* Vorschlagsliste beim Tippen (Hasan 23.09. 06:38) - steht unter dem
   Feld, deckt es nie zu, scrollt selbst bei vielen Treffern. Auf
   schmalen Bildschirmen setzt dc.js die Position/Breite zusätzlich per
   Inline-Style (position:fixed, volle Bildschirmbreite mit Seitenrand),
   weil das Elternelement (das kleine Suchfeld im Kopf) dafür selbst zu
   schmal ist - reines CSS reicht dort nicht (Hasan 23.09., zweite
   Rückmeldung: Namen liefen abgeschnitten, letzte Zeile lief unten raus). */
.such-liste{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;
  border-radius:14px;box-shadow:0 22px 44px -12px rgba(0,0,0,.4);border:1px solid var(--line);
  overflow-y:auto;max-height:min(80vh,540px);z-index:80;padding:6px;box-sizing:border-box}
.such-liste a{display:flex;align-items:center;gap:10px;padding:10px;border-radius:9px;
  color:var(--ink);text-decoration:none;font-size:14px;line-height:1.35}
.such-liste a:hover,.such-liste a.aktiv{background:var(--akzent-bg)}
.such-liste .lg{width:28px;height:28px;border-radius:8px;flex:none;object-fit:contain;
  background:#fff;border:1px solid var(--line)}
.such-liste .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.such-liste .anz{font-size:12px;color:var(--ink-3);flex:none;white-space:nowrap;margin-left:auto;padding-left:8px}
.such-liste a.alle{justify-content:center;text-align:center;font-weight:700;color:var(--akzent);
  margin-top:4px;border-top:1px solid var(--line);border-radius:0;
  padding:14px 12px;white-space:normal;line-height:1.4}
/* =========================================================================
   Hauptmenue am Handy (Hasan 23.09.: Betreiber "wieso sehe ich am Handy
   keine Menuepunkte" - <nav> stand vorher fest auf display:none, ohne
   Ersatz. Ersetzt auch den Notbehelf vom 15:50.

   Technik: eigenstaendiger Knopf <details class="hauptmenue"> (siehe
   templates/kopf-menue-auf.php), <nav> bleibt UNVERAENDERT und
   UNVERSCHACHTELT direkt daneben stehen, wie schon vor diesem Umbau -
   ein erster Versuch, <nav> zusaetzlich in das <details> hinein zu
   verschachteln und per zweifach verschachteltem display:contents am
   Rechner "durchzureichen", scheiterte an einer Chromium-Eigenart
   (<nav> bekam dabei Breite 0, obwohl Inhalt vorhanden war - Fund
   Cashback Claude 23.09., mit Playwright bei 1280 Pixeln nachgemessen).
   Jetzt steuert allein der Geschwisterselektor (~) anhand des
   offen/geschlossen-Zustands von .hauptmenue, ob <nav> und der
   Ratgeber-Block danach sichtbar sind - am Rechner braucht <nav>
   dadurch gar keine Sonderbehandlung mehr, es ist exakt dasselbe
   Element wie vorher.

   Ohne JavaScript: <details>/<summary> oeffnet/schliesst ganz von
   selbst, auch mit Tastatur (Enter/Leertaste) - dc.js legt nur noch
   obendrauf: Klick daneben schliesst, Escape schliesst, aria-expanded
   wird mitgefuehrt (siehe dort einrichtenHauptmenue()).

   Kopfzeile am Handy nach genauer Vorgabe des Betreibers (23.09.):
   Zeile 1 = Menueknopf (Quadrat, 44x44, drei Striche) links, Logo
   daneben. Zeile 2 = Suche, Laenderauswahl rechts daneben (so schmal
   wie noetig, ab 400 Pixel nur noch Fahne+Kuerzel). Per CSS-Grid mit
   benannten Bereichen geloest statt per Reihenfolge im Quelltext.
   Geoeffnetes Menue schiebt die Seite normal nach unten (eigene,
   volle Zeile im selben Grid statt ueberlagerndem Dropdown) - dadurch
   keine Positionsrechnung noetig, obwohl <nav> je nach Seite
   unterschiedlich hoch ist (Shopseite hat z. B. nur vier Punkte).
   ========================================================================= */
@media(max-width:860px){
  /* :has(.hauptmenue) grenzt bewusst auf die Vorlagen mit dem neuen
     Menueknopf ein (templates/kopf-menue-auf.php) - die Ratgeber-Seiten
     (mu-plugins/dc-ratgeber.php, dc_rg_kopf_oben()) benutzen .top .wrap
     ebenfalls, haben aber ihr eigenes, unveraendertes Kopf-Layout
     (Klappmenue .ratgebermenue statt Menueknopf). */
  .top .wrap:has(.hauptmenue){
    display:grid;grid-template-columns:auto 1fr auto;
    grid-template-areas:"knopf logo logo" "suche suche land";
    align-items:center;row-gap:10px;column-gap:10px;
    height:auto;padding-top:10px;padding-bottom:10px;
  }
  .top .wrap:has(.hauptmenue):not(:has(.landwahl)){grid-template-areas:"knopf logo logo" "suche suche suche"}
  .top .hauptmenue{grid-area:knopf}
  .top .logo{grid-area:logo}
  .top .suche{grid-area:suche;max-width:none;width:100%;margin-left:0}
  .top .landwahl{grid-area:land;margin-left:0}
  .km-start-suche{display:block}

  /* <nav> weg, bis der Knopf geoeffnet wird (Rueckfall gilt auch fuer
     die Ratgeber-Seiten OHNE Menueknopf, siehe Dateikopf - deren <nav>
     stand bisher auf den zwei jetzt entfernten, doppelten Regeln
     @media(max-width:980px)/(900px), ersatzlos ohne eigenes Klappmenue,
     das war Hasans Ausgangsbefund). */
  .top .wrap > nav{display:none}
  .hauptmenue[open] ~ nav{
    display:flex;flex-direction:column;grid-column:1/-1;gap:2px;
    background:#fff;border-radius:14px;box-shadow:0 12px 28px -10px rgba(0,0,0,.35);
    border:1px solid var(--line);padding:6px;box-sizing:border-box;
  }
  .hauptmenue[open] ~ nav a{
    display:flex;align-items:center;min-height:44px;padding:8px 12px;
    border-radius:9px;color:var(--ink);font-size:15px;font-weight:500;
    box-sizing:border-box;
  }
  .hauptmenue[open] ~ nav a:hover,.hauptmenue[open] ~ nav a:focus-visible{background:var(--akzent-bg)}
  .hauptmenue[open] ~ nav a.on{background:var(--navy-soft);color:var(--navy);font-weight:700}
  /* "Laender" im Klappmenue weglassen (Betreiber-Fund 23.09.: "country
     ist doppelt" - die Laenderauswahl sitzt am Handy schon oben im Kopf
     neben der Suche, siehe Zeile 2). Am Rechner bleiben beide stehen
     (eigene Uebersichtsseite vs. Auswahl im Kopf, stoert dort nicht) -
     diese Regel gilt nur hier im Klappmenue. */
  .hauptmenue[open] ~ nav a[href="/laender/"]{display:none}

  .top .hauptmenue>.menuknopf{
    display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;border-radius:10px;flex:none;cursor:pointer;
    color:#c3c6da;border:1px solid rgba(255,255,255,.18);list-style:none;
    box-sizing:border-box;
  }
  .top .hauptmenue>.menuknopf::marker,.top .hauptmenue>.menuknopf::-webkit-details-marker{display:none;content:""}
  .top .hauptmenue>.menuknopf:hover,.top .hauptmenue[open]>.menuknopf{color:#fff;border-color:rgba(255,255,255,.4)}
  .top .hauptmenue .mk-zu{display:none}
  .top .hauptmenue[open] .mk-auf{display:none}
  .top .hauptmenue[open] .mk-zu{display:block}

  /* Ratgeber/Guides an die Stelle von "Laender" (Betreiber 23.09.: "an
     seiner Stelle das Guide oder so" - Punkte, die Unterpunkte haben,
     zeigen diese ebenfalls, Ratgeber hat drei Unterpunkte). Die fertige
     Pille des Ratgeber-Agenten (.ratgebermenue, siehe dc_rg_kopf_menu())
     bleibt hier ausgeblendet - ihre eigene Klappliste ist selbst
     position:absolute und laege unvorhersehbar unter <nav> (dessen
     Hoehe je Seite unterschiedlich ist). Stattdessen eingerueckte,
     immer sichtbare Zeilen als eigene, volle Grid-Zeile direkt unter
     <nav> - wirkt wie der naechste Menuepunkt. */
  .top .ratgebermenue{display:none}
  .hm-ratgeber-mobil{display:none}
  .hauptmenue[open] ~ .hm-ratgeber-mobil{
    display:flex;flex-direction:column;grid-column:1/-1;gap:2px;margin-top:-8px;
    background:#fff;border-radius:14px;box-shadow:0 12px 28px -10px rgba(0,0,0,.35);
    border:1px solid var(--line);padding:6px;box-sizing:border-box;
  }
  .hm-ratgeber-haupt{
    display:flex;align-items:center;min-height:44px;padding:8px 12px;
    border-radius:9px;color:var(--ink);font-size:15px;font-weight:500;box-sizing:border-box;
  }
  .hm-ratgeber-haupt:hover,.hm-ratgeber-haupt:focus-visible{background:var(--akzent-bg)}
  .hm-ratgeber-unter{
    display:flex;align-items:center;min-height:44px;padding:8px 12px 8px 26px;
    border-radius:9px;color:var(--ink-2);font-size:14px;box-sizing:border-box;
  }
  .hm-ratgeber-unter:hover,.hm-ratgeber-unter:focus-visible{background:var(--akzent-bg);color:var(--ink)}

  /* Kopfstreifen "Links koennen Partnerlinks sein" wandert am Handy ganz
     nach unten (Betreiber 23.09.: "beim Web kannst lassen wie es ist").
     Bewusst EIN Textbaustein (kein zweites Vorkommen im HTML, siehe
     Vorgabe "nicht zweimal", wichtig fuer Suchmaschinen/Vorleseprogramme):
     body wird am Handy zur Flex-Spalte, .hinweisleiste rueckt per order
     ganz ans Ende (hinter <footer>), unveraendert im HTML an ihrer alten
     Stelle direkt nach <body>. #cookie-banner ist ohnehin position:fixed,
     <script> unsichtbar - beide unberuehrt von der Reihenfolge. */
  body{display:flex;flex-direction:column}
  /* Zwei bekannte Flexbox-Fallen, beide durch body als Flex-Spalte
     ausgeloest (Fund Cashback Claude 23.09., Beleg Shopseite bei 320
     Pixeln: 342 statt 320 Pixel):
     1) min-width:0 - ein Flex-Kind darf sonst nicht unter die
        Mindestbreite seines EIGENEN Inhalts schrumpfen (dieselbe Falle
        wie bei .raster>main,.seite weiter unten in dieser Datei).
     2) margin-inline:0 - .wrap zentriert sich mit margin:0 auto; bei
        einem Flex-Kind hat ein automatischer Rand Vorrang vor dem
        Strecken auf die volle Breite (align-items:stretch greift dann
        NICHT), das Element faellt auf seine Inhaltsbreite zurueck und
        ragt heraus. Unterhalb von 860 Pixeln macht das zentrierende
        margin:auto ohnehin nichts sichtbar anders (die Wirkung setzt
        erst bei der Container-Hoechstbreite 1200 Pixel ein), das
        Nullen ist hier also folgenlos fuer die Optik. !important, weil
        .wrap selbst "margin:0 auto" mit hoeherer Selektor-Genauigkeit
        setzt (eine Klasse schlaegt body>*). */
  body>*{min-width:0;margin-left:0 !important;margin-right:0 !important}
  .hinweisleiste{order:99;font-size:13px}
}

/* Rechner unveraendert (Hasan 23.09., ausdrueckliche Vorgabe): ab 861
   Pixel bleibt die Navigation exakt wie vorher - <nav> ist ohnehin
   unveraendert/unverschachtelt, hier muss nur der Menueknopf selbst weg
   und der eingerueckte Ratgeber-Block bleibt aus (die normale
   Ratgeber-Pille .ratgebermenue steht unveraendert daneben, genau wie
   auf den Ratgeber-Seiten selbst). */
@media(min-width:861px){
  .top .hauptmenue{display:none}
  .hm-ratgeber-mobil{display:none}
}

/* Laenderauswahl kompakt (Betreiber 23.09.: "Fahne und Kuerzel statt des
   ausgeschriebenen Landesnamens, wenn es bei 320 Pixeln sonst nicht
   passt" - Zeile 2 der Handy-Kopfzeile: Suche + Laenderauswahl
   nebeneinander). Siehe templates/kopf-land.php fuer die zwei Texte. */
@media(max-width:400px){
  .top .landwahl>.land .land-voll{display:none}
  .top .landwahl>.land .land-kurz{display:inline}
  .top .landwahl>.land{padding:7px 10px;gap:6px}
}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:15px;font-weight:600;
  padding:12px 20px;border-radius:12px;border:1px solid transparent;cursor:pointer;white-space:nowrap}
.btn.akzent{background:var(--akzent);color:#fff}.btn.akzent:hover{background:var(--akzent-2)}
.btn.rand{background:var(--card);color:var(--ink);border-color:var(--line-2);font-weight:600}
.btn.rand:hover{border-color:var(--ink-3)}
.btn.hell{background:#fff;color:var(--navy)}
.btn.sm{font-size:13.5px;padding:9px 15px;border-radius:10px}
.btn.voll{width:100%}

.fg{border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.08);display:block;flex:none;object-fit:cover}

section{padding:46px 0}
.skopf{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.skopf h1,.skopf h2{font-size:26px}
/* Zwischenüberschrift innerhalb einer Sektion (Hasan 22.09., Länderseite
   in Stufen: heimische Shops / Shops, die auch hierher liefern) */
section > h2,section > h3{font-size:19px;font-weight:800;color:var(--ink)}
.skopf p{font-size:15px;color:var(--ink-2);margin-top:7px}
.skopf .r{margin-left:auto}
.link{font-size:14.5px;font-weight:700;color:var(--akzent);display:inline-flex;align-items:center;gap:7px}
.link:hover{gap:10px}

/* Gutschein-Ticket (Start-/Länderseite) */
.gs{display:grid;grid-template-columns:118px minmax(0,1fr);background:var(--card);border:1px solid var(--line-2);
  border-radius:16px;overflow:hidden;box-shadow:0 1px 2px rgba(20,23,51,.05),0 10px 22px -20px rgba(20,23,51,.55);
  transition:border-color .15s,box-shadow .15s,transform .15s}
.gs:hover{border-color:var(--akzent-line);box-shadow:0 2px 4px rgba(20,23,51,.06),0 18px 34px -24px rgba(226,106,76,.9);transform:translateY(-2px)}
.wert{background:var(--akzent-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:16px 8px;position:relative;text-align:center}
.wert::after{content:"";position:absolute;right:0;top:12px;bottom:12px;border-right:2px dashed var(--akzent-line)}
.wert b{font-size:26px;font-weight:600;letter-spacing:-.015em;font-variant-numeric:tabular-nums;color:var(--akzent-2);line-height:1}
.wert span{font-size:10px;font-weight:600;letter-spacing:.14em;color:var(--akzent-2);margin-top:5px}
.gs.aktion .wert{background:var(--navy-soft)}
.gs.aktion .wert b,.gs.aktion .wert span{color:var(--navy)}
.gs.aktion .wert::after{border-color:#cdd0e3}
.gin{padding:15px 16px;display:flex;flex-direction:column;gap:8px;min-width:0}
.gshop{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-2)}
.gshop .lg{width:26px;height:26px;border-radius:7px;border:1px solid var(--line);display:grid;place-items:center;
  font-size:9.5px;font-weight:800;background:#fff;flex:none;object-fit:contain;padding:2px}
.gin h2,.gin h3,.gin h4{font-size:15.5px;line-height:1.45;font-weight:500;letter-spacing:-.005em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gmeta{display:flex;gap:6px;flex-wrap:wrap}
.mk2{font-size:12px;font-weight:500;padding:3px 9px;border-radius:6px}
.mk2.code{background:var(--navy-soft);color:var(--navy)}
.mk2.gepr{background:var(--mint-bg);color:var(--mint)}
.mk2.gold{background:var(--gold-bg);color:var(--gold-ink)}
.gbtn{margin-top:auto;display:flex;gap:8px;align-items:center}
.gbtn .b{flex:1;background:var(--akzent);color:#fff;font-weight:600;font-size:13.5px;padding:10px;border-radius:10px;
  text-align:center;border:0;cursor:pointer}
.gbtn .b.dunkel{background:var(--navy)}
.gbtn .b:hover{filter:brightness(1.07)}

/* Shop-Kachel */
.shop{display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;background:var(--card);
  border:1px solid var(--line-2);border-radius:16px;padding:18px 12px;box-shadow:0 1px 2px rgba(20,23,51,.04);transition:border-color .15s,transform .15s}
.shop:hover{border-color:var(--akzent-line);transform:translateY(-2px)}
.shop .lg{width:62px;height:62px;border-radius:14px;border:1px solid var(--line);background:#fff;display:grid;
  place-items:center;font-size:15px;font-weight:800;object-fit:contain;padding:6px}
.shop .nm{font-size:14.5px;font-weight:500}
.shop .cb{font-size:12.5px;font-weight:700;color:var(--akzent-2);background:var(--akzent-bg);border-radius:100px;padding:3px 10px}

/* Kategorie-Kachel */
.kat{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line-2);
  border-radius:14px;padding:14px 15px;box-shadow:0 1px 2px rgba(20,23,51,.04);transition:border-color .15s,transform .15s}
.kat:hover{border-color:var(--akzent-line);transform:translateY(-2px)}
.kat .ic{width:40px;height:40px;border-radius:12px;background:var(--akzent-bg);color:var(--akzent-2);
  display:grid;place-items:center;flex:none}
.kat b{display:block;font-size:14.5px}
.kat span{display:block;font-size:12.5px;color:var(--ink-2);margin-top:2px}

.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.g6{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
@media(max-width:1000px){.g6{grid-template-columns:repeat(4,1fr)}.g4{grid-template-columns:repeat(3,1fr)}.g3{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.g2,.g3,.g4{grid-template-columns:1fr}.g6{grid-template-columns:repeat(3,1fr)}}

footer{background:var(--navy);color:#9ea2bd;margin-top:40px;padding:44px 0 26px}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px}
@media(max-width:860px){.fgrid{grid-template-columns:1fr 1fr}.fgrid>div:first-child{grid-column:1/-1}}
footer h2{color:#fff;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;margin-bottom:13px}
footer a{display:block;font-size:14.5px;margin-bottom:8px}
footer a:hover{color:#fff}
footer .claim{font-size:14.5px;margin-top:12px;max-width:36ch;line-height:1.6}
.fuss{border-top:1px solid rgba(255,255,255,.1);margin-top:28px;padding-top:18px;font-size:13px;display:flex;gap:16px;flex-wrap:wrap}
.fuss .r{margin-left:auto}

/* ---------- Hero ---------- */
.hero{background:
    radial-gradient(700px 400px at 85% -20%, rgba(226,106,76,.26) 0%, transparent 62%),
    linear-gradient(160deg,#252a52,var(--navy-2));color:#fff}
.hero .wrap{padding-top:52px;padding-bottom:44px}
.hin{max-width:720px}
.hero .tag,.landkopf .tag{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;
  background:rgba(19,160,113,.18);border:1px solid rgba(19,160,113,.45);color:#7fe0bb;
  border-radius:100px;padding:5px 13px;margin-bottom:18px}
.hero h1,.landkopf h1{font-size:clamp(30px,4.2vw,46px)}
.hero h1 em,.landkopf h1 em{font-style:normal;color:var(--akzent)}
.hero .lead,.landkopf .lead,.uekopf .lead{margin-top:14px;font-size:17px;color:#c3c6da;max-width:56ch;line-height:1.55}
.gsuche{display:flex;align-items:center;gap:10px;background:#fff;border-radius:14px;padding:8px 8px 8px 16px;
  margin-top:26px;max-width:620px;position:relative}
.gsuche svg{color:var(--ink-3);flex:none}
.gsuche input{flex:1;min-width:0;border:0;font:inherit;font-size:16px;padding:10px 0;color:var(--ink)}
.gsuche input:focus{outline:0}
.beliebt{margin-top:14px;font-size:13.5px;color:#9ea2bd}
.beliebt a{color:#fff;border-bottom:1px solid rgba(255,255,255,.3);margin-right:12px}
.hzahlen{display:flex;gap:34px;flex-wrap:wrap;margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12)}
.hzahlen b{display:block;font-size:24px;font-weight:800;letter-spacing:-.03em}
.hzahlen span{display:block;font-size:13px;color:#9ea2bd;margin-top:2px}

/* ---------- Panels ---------- */
.zweispalt{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:860px){.zweispalt{grid-template-columns:1fr}}
.panel{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px 22px;min-width:0;overflow:hidden}
.pkopf{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.pkopf h3{font-size:18px}
.pill{font-size:12px;font-weight:700;padding:3px 10px;border-radius:100px;background:var(--navy-soft);color:var(--navy)}
.pill.warn{background:var(--gold-bg);color:var(--gold-ink)}
.zeile{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.zeile:last-child{border-bottom:0;padding-bottom:0}
.zeile .lg{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);display:grid;place-items:center;
  font-size:11px;font-weight:800;background:#fff;flex:none;object-fit:contain;padding:3px}
.zeile .zt{flex:1;min-width:0}
.zeile .zt b{font-size:14.5px;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.zeile .zt span{display:block;font-size:12.5px;color:var(--ink-2);margin-top:2px}
.zeile .rest{font-size:12.5px;font-weight:700;color:var(--gold-ink);background:var(--gold-bg);
  border-radius:100px;padding:4px 10px;white-space:nowrap}
.zeile .rest.neu{color:var(--mint);background:var(--mint-bg)}

/* ---------- Länder ---------- */
.laender{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
@media(max-width:1000px){.laender{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.laender{grid-template-columns:1fr 1fr}}
.ld{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 14px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:8px;transition:border-color .15s,transform .15s}
.ld:hover{border-color:var(--akzent-line);transform:translateY(-2px)}
.ld b{font-size:14.5px}
.ld span{font-size:12.5px;color:var(--ink-2)}

/* ---------- Schritte ---------- */
.sch{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px}
.sch .n{width:30px;height:30px;border-radius:50%;background:var(--akzent);color:#fff;display:grid;place-items:center;
  font-weight:800;font-size:14px;margin-bottom:11px}
.sch p{font-size:15px;color:var(--ink-2);line-height:1.55}
.sch p b{color:var(--ink)}
.panel.text h1,.panel.text h2{font-size:22px;margin-bottom:12px}
.panel.text h3,.panel.text h2.dc-abschnitt{font-size:16.5px;margin:22px 0 6px}
.panel.text p{font-size:15.5px;color:var(--ink-2);line-height:1.7;margin-top:12px;max-width:80ch}
.panel.text p.schluss{font-size:17px;color:var(--ink);margin-top:18px}
.panel.text a:not(.btn){color:var(--akzent)}
.panel.text a:not(.btn):hover{text-decoration:underline}
.faqgruppe{font-size:18px;margin:32px 0 4px}
.faqgruppe:first-of-type{margin-top:18px}
.faqliste{margin-top:8px}
.faqliste dt{font-weight:700;font-size:15.5px;margin-top:20px}
.faqliste dt:first-child{margin-top:0}
.faqliste dd{margin:6px 0 0;color:var(--ink-2);font-size:15px;line-height:1.65;max-width:74ch}
.faqliste dd a{color:var(--akzent)}

/* ---------- Startseiten-Infoabschnitt (Hasan 22.09. 22:29 ff.) ---------- */
.startinfo .panel h3{font-size:17px;margin-bottom:8px}
.startinfo .panel p{font-size:15px;color:var(--ink-2);line-height:1.65;margin-top:8px}
.startinfo .panel p:first-of-type{margin-top:0}
.siliste{list-style:none;margin:14px 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 24px}
.siliste li{font-size:15px;color:var(--ink-2);padding-left:20px;position:relative}
.siliste li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--akzent)}
@media(max-width:640px){.siliste{grid-template-columns:1fr}}
.si-schritte{font-weight:700;color:var(--ink)}
.si-entdecke{text-align:left}

/* ---------- Länderseite ---------- */
.landkopf{background:linear-gradient(160deg,#252a52,var(--navy-2));color:#fff}
.landkopf .wrap{padding-top:22px;padding-bottom:38px}
.landkopf .krume{font-size:13.5px;color:#9ea2bd;margin-bottom:20px}
.landkopf .krume a{color:#c3c6da}
.lkzeile{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.fg.gross{box-shadow:0 0 0 1px rgba(255,255,255,.2),0 14px 28px -18px rgba(0,0,0,.7);border-radius:6px}
/* h1/.lead der Länderseite jetzt oben mit .hero geteilt (Hasan 23.09.
   06:36: "gleiche Schriftgröße ... wie auf der Startseite") */
.lshop{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;display:flex;
  flex-direction:column;gap:14px}
.lshop .lk{display:flex;align-items:center;gap:12px}
.lshop .lk .lg{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:#fff;
  display:grid;place-items:center;font-size:13px;font-weight:800;flex:none;object-fit:contain;padding:4px}
.lshop .lk b{display:block;font-size:15.5px}
.lshop .lk span{display:block;font-size:12.5px;color:var(--ink-2);margin-top:2px}
.lshop .anz{margin-left:auto;font-size:12px;font-weight:700;background:var(--akzent-bg);color:var(--akzent-2);
  border-radius:100px;padding:4px 10px;white-space:nowrap}
.krume{font-size:13.5px;color:var(--ink-3);padding:18px 0 14px}
.krume a{color:var(--ink-2)}
.krume a:hover{color:var(--akzent)}

/* ---------- Shopseite ---------- */
.shopkopf{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:24px 26px;
  display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:0}
.slogo{width:96px;height:96px;border-radius:18px;border:1px solid var(--line);background:#fff;
  display:grid;place-items:center;flex:none;font-weight:800;font-size:17px;letter-spacing:-.02em;color:#1a3f8f;object-fit:contain;padding:8px}
.sid{flex:1;min-width:260px}
.sid h1{font-size:clamp(23px,2.6vw,30px)}
.sid .sub{color:var(--ink-2);margin-top:7px;font-size:15.5px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;padding:5px 12px;border-radius:100px}
.chip.mint{background:var(--mint-bg);color:var(--mint)}
.chip.gold{background:var(--gold-bg);color:var(--gold-ink)}
.chip.grau{background:var(--bg);color:var(--ink-2);font-weight:500}

.raster{display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px;margin-top:22px;align-items:start}
@media(max-width:980px){.raster{grid-template-columns:1fr}.seite{order:2}}
.seite{display:flex;flex-direction:column;gap:14px;position:sticky;top:84px}
@media(max-width:980px){.seite{position:static}}
.box{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px 18px 20px}
.box h2,.box h3{font-size:14px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-2);margin-bottom:13px}

.shopbox{text-align:center}
.shopbox .slogo{width:78px;height:78px;margin:0 auto 12px;font-size:15px}
.shopbox .url{font-size:14px;color:var(--ink-2);margin-bottom:14px;display:block}
.shopbox .klein{font-size:12px;color:var(--ink-3);margin-top:10px;line-height:1.45}

.zahlen{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.zahl{background:var(--bg);border-radius:12px;padding:11px 12px}
.zahl b{display:block;font-size:22px;font-weight:800;letter-spacing:-.03em}
.zahl span{display:block;font-size:12.5px;color:var(--ink-2);margin-top:1px}
.zahl.gross{grid-column:span 2;background:var(--gold-bg)}
.zahl.gross b{color:var(--gold-ink)}
.geprueft{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mint);font-weight:600;margin-top:12px}

.hl-gruppe{font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-3);margin:14px 0 4px}
.hl-gruppe:first-of-type{margin-top:0}
.links{list-style:none;margin:0;padding:0}
.links a{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.links li:last-child a{border-bottom:0;padding-bottom:0}
.links a:hover{color:var(--akzent)}
.links .ic{width:30px;height:30px;border-radius:9px;background:var(--navy-soft);color:var(--navy);
  display:grid;place-items:center;flex:none}
.links .ar{margin-left:auto;color:var(--ink-3)}

.zahlarten{display:flex;flex-wrap:wrap;gap:7px}
.za{font-size:12.5px;font-weight:600;padding:6px 11px;border-radius:8px;border:1px solid var(--line);background:var(--bg)}

.melden{background:var(--navy);color:#fff;border-color:var(--navy)}
.melden h3{color:#c3c6da}
.melden p{font-size:14px;color:#c3c6da;line-height:1.5;margin-bottom:14px}
.melden .btn{background:#fff;color:var(--navy)}

.tags{display:flex;flex-wrap:wrap;gap:7px}
.tags a{font-size:13px;padding:6px 12px;border-radius:100px;border:1px solid var(--line-2)}
.tags a:hover{border-color:var(--akzent);color:var(--akzent)}

.mini{list-style:none;margin:0;padding:0}
.mini a{display:flex;align-items:center;gap:11px;padding:8px 0;font-size:14.5px}
.mini a:hover{color:var(--akzent)}
.mini .lg{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);display:grid;place-items:center;
  font-size:11px;font-weight:800;flex:none;background:#fff;object-fit:contain;padding:3px}
.mini .n{margin-left:auto;font-size:12.5px;color:var(--ink-3)}

.filter{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.ft{appearance:none;font-size:14px;font-weight:600;padding:9px 16px;border-radius:100px;
  border:1px solid var(--line-2);background:var(--card);color:var(--ink-2);cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.ft[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.ft .c{font-size:11.5px;font-weight:700;padding:1px 7px;border-radius:100px;background:var(--bg);color:var(--ink-2)}
.ft[aria-pressed="true"] .c{background:rgba(255,255,255,.16);color:#fff}

main .gs{display:grid;grid-template-columns:128px minmax(0,1fr) auto;background:var(--card);
  border:1px solid var(--line);border-radius:18px;margin-bottom:12px;position:relative;
  transition:border-color .15s,box-shadow .15s;overflow:visible}
main .gs:hover{border-color:var(--akzent-line);box-shadow:0 2px 4px rgba(20,23,51,.06),0 18px 34px -24px rgba(226,106,76,.9)}
@media(max-width:700px){main .gs{grid-template-columns:96px minmax(0,1fr)}main .gs .rechts{grid-column:1/-1;padding:0 16px 16px}}
main .wert{border-radius:17px 0 0 17px;padding:18px 10px}
main .wert b{font-size:30px}
.mitte{padding:18px 20px;min-width:0}
.marken{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.mitte h4{font-size:16px;font-weight:500;letter-spacing:0;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.meta{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--ink-3);margin-top:8px}
.meta span{display:inline-flex;align-items:center;gap:6px}
.rechts{padding:18px 20px 18px 0;display:flex;align-items:center}
.codebtn{position:relative;display:inline-flex;align-items:stretch;border-radius:12px;overflow:hidden;
  cursor:pointer;border:0;padding:0;background:none;min-width:190px}
.codebtn .deck{background:var(--akzent);color:#fff;font-weight:700;font-size:14.5px;padding:13px 18px;flex:1;
  text-align:left;position:relative;z-index:1;clip-path:polygon(0 0,calc(100% - 64px) 0,calc(100% - 40px) 100%,0 100%)}
.codebtn .peek{position:absolute;right:0;top:0;bottom:0;width:62px;border:2px dashed var(--akzent);border-left:0;
  border-radius:0 12px 12px 0;display:grid;place-items:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:800;font-size:13px;color:var(--akzent-2);background:var(--akzent-bg);
  -webkit-user-select:text;user-select:text;cursor:text}
.codebtn:hover .deck{background:var(--akzent-2)}
.aktbtn{background:var(--navy);color:#fff;font-weight:600;font-size:14.5px;padding:13px 20px;border-radius:12px;
  border:0;cursor:pointer;min-width:190px;display:inline-flex;align-items:center;justify-content:center;text-align:center}
.aktbtn:hover{background:var(--navy-2)}

.block{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px 28px;margin-top:22px}
.block h2{font-size:22px}
.block .unter{color:var(--ink-2);margin-top:7px;font-size:15px}
.schritte{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:20px}
@media(max-width:860px){.schritte{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.schritte{grid-template-columns:1fr}}
.schritte .sch{background:var(--bg);border-radius:14px;padding:16px}
.schritte .sch p{font-size:14px}

.text p{font-size:15.5px;color:var(--ink-2);line-height:1.7;margin-top:14px;max-width:74ch}

.aehnlich{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}
@media(max-width:860px){.aehnlich{grid-template-columns:1fr 1fr}}
.ae{border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:9px}
.ae:hover{border-color:var(--akzent-line)}
.ae .kopf{display:flex;align-items:center;gap:10px}
.ae .lg{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);display:grid;place-items:center;
  font-weight:800;font-size:11px;background:#fff;flex:none;object-fit:contain;padding:4px}
.ae .nm{font-size:14.5px;font-weight:700}
.ae .w{font-size:20px;font-weight:800;color:var(--akzent-2);letter-spacing:-.03em}
.ae p{font-size:13px;color:var(--ink-2);line-height:1.45}

.aktuell{display:flex;gap:16px;align-items:center;background:var(--mint-bg);border-radius:16px;
  padding:18px 22px;margin-top:22px;flex-wrap:wrap}
.aktuell p{flex:1;min-width:240px;font-size:14.5px;color:#0d5f44;line-height:1.55}

/* ---------- Zwischenseite /gutschein/<id>/ (Hasan 22.09. 18:47) ---------- */
.gz-box{max-width:480px;margin:0 auto;text-align:center}
.gz-box .slogo{margin:0 auto 14px}
.gz-shop{font-size:13.5px;font-weight:600;color:var(--ink-2)}
.gz-titel{font-size:20px;font-weight:500;letter-spacing:-.005em;margin-top:6px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Code und Kopieren-Knopf als EIN Element (Hasan 22.09. 19:06, wie bei
   den Wettbewerber-Bildern): gemeinsamer gestrichelter Rahmen, gemeinsame
   Ecken aussen, keine Trennung dazwischen. Der Code kürzt sich mit
   Auslassungspunkten, wenn er nicht passt (text-overflow) - im DOM
   bleibt der volle Code stehen, also kopiert der Knopf immer vollständig. */
.codefeld{margin:20px 0 8px;display:flex;align-items:stretch;border:2px dashed var(--akzent);
  border-radius:14px;overflow:hidden;width:100%}
.codefeld .v{flex:1 1 50%;width:50%;min-width:0;display:flex;align-items:center;padding:16px 10px;
  background:var(--akzent-bg);color:var(--akzent-2);
  -webkit-user-select:text;user-select:text;cursor:text}
/* Eigene innere Zeile für die Kürzung: text-overflow:ellipsis zeigt die
   Auslassungspunkte nur zuverlässig bei linksbündigem, nicht-flexiblem
   Text - zentriert auf dem äusseren Feld (display:flex) blieb die
   Kürzung sonst ohne sichtbare Punkte und schnitt auf beiden Seiten ab. */
.codefeld .v .vt{display:block;width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:800;font-size:21px;letter-spacing:.05em;text-align:left;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Zweizeiliger Knopf (Hasan 22.09. 20:00/20:01): oben "Kopieren" fett,
   darunter klein und gedeckt "weiter zu <Shop> →", damit die
   Weiterleitung sichtbar ist. Kasten hälftig geteilt, 50/50, volle Breite
   der Karte, keine feste Knopfbreite mehr. */
.codefeld button{flex:1 1 50%;width:50%;min-width:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:1px;border:0;background:var(--akzent);color:#fff;padding:6px 8px;cursor:pointer}
.codefeld button:hover{background:var(--akzent-2)}
.codefeld button .k1{font-size:16px;font-weight:800;line-height:1.15;white-space:nowrap}
.codefeld button .k2{font-size:10.5px;font-weight:400;line-height:1.2;color:rgba(255,255,255,.82);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
@media(max-width:400px){
  .codefeld .v{padding:14px 6px}
  .codefeld .v .vt{font-size:15.5px}
  .codefeld button{padding:6px 4px}
  .codefeld button .k1{font-size:14.5px}
  .codefeld button .k2{font-size:9.5px}
}
.gz-besch{font-size:14px;color:var(--ink-2);line-height:1.5;margin-top:14px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gz-kop-status{font-size:13px;font-weight:700;margin-top:8px;min-height:17px}
.gz-kop-status.ok{color:var(--mint)}
.gz-kop-status.nein{color:var(--gold-ink)}
.gz-hin{font-size:13px;color:var(--ink-3);margin-top:12px;margin-bottom:0}
.gz-box .btn{margin-top:14px}
.gz-go{white-space:normal;line-height:1.3;text-align:center}
.gz-go[hidden]{display:none}
.gz-weitere{margin-top:18px;text-align:left}
.gz-weitere h2{font-size:14px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-2);margin-bottom:10px}
.gz-weitere .zeile{padding:10px 0}
.gz-weitere .zeile .zt b{white-space:normal}

/* ---------- Leerzustand: keine Gutscheincodes ---------- */
.keincode{background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);margin-bottom:12px}
.kc-text{padding:28px 30px;display:flex;gap:18px;align-items:flex-start}
.kc-ic{width:52px;height:52px;border-radius:15px;background:var(--gruen-bg);color:var(--gruen);
  display:grid;place-items:center;flex:none}
.kc-text h3{margin:0;font-size:19px;font-weight:800;letter-spacing:-.025em;line-height:1.25}
.kc-punkte{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.kc-punkte li{display:flex;gap:10px;font-size:14.5px;color:var(--ink-2);line-height:1.5}
.kc-punkte svg{flex:none;margin-top:3px;color:var(--gruen)}
.kc-gepr{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-size:13px;font-weight:600;
  color:var(--gruen);background:var(--gruen-bg);border-radius:100px;padding:5px 12px}
.kc-cb{background:linear-gradient(160deg,#f4faf7,#e8f4ee);border-left:1px solid var(--gruen-line);
  padding:28px 26px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.kc-cb small{font-size:13px;color:var(--ink-2);font-weight:600}
.kc-btn{margin-top:14px;width:100%;max-width:260px;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--gruen);color:#fff;font-weight:700;font-size:15px;padding:13px 20px;border-radius:12px;text-decoration:none}
.kc-btn:hover{background:var(--gruen-2)}

@media(max-width:760px){
  .wrap{padding:0 14px}
  .top{position:static}
  /* .top .wrap Layout (Grid, Zeilen, Bereiche) fuer die eigenen
     Vorlagen mit Menueknopf steht jetzt vollstaendig im Block
     @media(max-width:860px) weiter oben (:has(.hauptmenue)). Diese Zeile
     bleibt nur noch fuer Kopfzeilen OHNE Menueknopf bestehen - aktuell
     die Ratgeber-Seiten (dc_rg_kopf_oben(), eigenes .ratgebermenue statt
     Menueknopf) - sonst liefe deren Kopfzeile ungewrapt ueber den Rand. */
  .top .wrap:not(:has(.hauptmenue)){height:auto;flex-wrap:wrap;gap:10px;padding-top:10px;padding-bottom:10px}
  section{padding:32px 0}
  .skopf h1,.skopf h2{font-size:21px}
  .gs{grid-template-columns:92px minmax(0,1fr)}
  .panel{padding:16px}
  .zeile .rest{font-size:11.5px;padding:3px 8px}
  .wert b{font-size:22px}
}
@media(max-width:720px){
  .keincode{grid-template-columns:1fr;border-radius:16px}
  .kc-text{padding:20px 18px;gap:14px}
  .kc-ic{width:42px;height:42px;border-radius:12px}
  .kc-text h3{font-size:17px}
  .kc-cb{border-left:0;border-top:1px solid var(--gruen-line);padding:20px 18px}
}

/* ---------- Blätterfunktion (Übersichts- und Fortsetzungsseiten) ---------- */
.pager{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:26px}
.pager .aus{opacity:.4;pointer-events:none}
.pager .info{font-size:13.5px;color:var(--ink-2);font-weight:600}

/* ---------- Cookie-Banner (Hasan 23.09., 2. Rückmeldung: "breiter,
   dafür flacher" - wie ein schmaler breiter Streifen unten rechts, kein
   hoher Kasten) ----------
   Aufbau wie bei Coin7 (cookie-law-info: Kasten mit Überschrift, kurzem
   Text, Knopfzeile), unten RECHTS angedockt statt mittig/volle Breite -
   Schrift, Farben und Rundungen kommen aus dem eigenen Portal-Design
   (--card/--line/--ink/--akzent/--navy, gleicher Schatten wie
   .landmenue/.such-liste), das Coin7-Aussehen selbst wird nicht
   übernommen. Titel und Text stehen eng (wenig margin-bottom), der
   Datenschutz-Link steht in derselben Zeile wie die zwei Knöpfe statt in
   einer eigenen Textzeile - das spart die meiste Höhe. Am Handy nutzt er
   die volle Breite, unten bündig. */
.cookiebanner{position:fixed;right:24px;bottom:24px;left:auto;width:420px;max-width:calc(100vw - 32px);
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 22px 44px -12px rgba(0,0,0,.4);padding:16px 20px;z-index:200;
  max-height:min(60vh,320px);overflow-y:auto}
.cookiebanner[hidden]{display:none}
.cookiebanner .cb-titel{margin:0 0 3px;font-size:15px;line-height:1.25;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.cookiebanner .cb-text{margin:0 0 12px;font-size:13px;line-height:1.4;color:var(--ink-2)}
.cookiebanner .cb-zeile{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cookiebanner .cb-link{font-size:12.5px;font-weight:600;color:var(--akzent);text-decoration:underline;white-space:nowrap}
.cookiebanner .cb-btns{display:flex;gap:8px;margin-left:auto}
.cookiebanner .cb-btns button{font:inherit;font-size:13px;font-weight:700;
  padding:9px 14px;border-radius:10px;border:1px solid transparent;cursor:pointer;white-space:nowrap}
.cookiebanner .cb-alle{background:var(--akzent);color:#fff}
.cookiebanner .cb-alle:hover{background:var(--akzent-2)}
.cookiebanner .cb-notwendig{background:var(--navy);color:#fff}
.cookiebanner .cb-notwendig:hover{background:var(--navy-2)}
.cookiebanner .cb-btns button:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
@media(max-width:480px){
  .cookiebanner{right:0;left:0;bottom:0;width:100%;max-width:none;border-radius:16px 16px 0 0;
    box-shadow:0 -10px 30px -8px rgba(0,0,0,.3)}
  .cookiebanner .cb-zeile{flex-wrap:wrap}
  .cookiebanner .cb-btns{width:100%;margin-left:0}
  .cookiebanner .cb-btns button{flex:1}
}

/* 23.09.2026, 09:15 - Hasan mit Bildschirmfoto: "banner ist zu breit fuer
   handy". Auf schmalen Geraeten war der Kasten breiter als das Fenster, weil
   die zwei Knoepfe nicht umbrechen durften (white-space:nowrap) und damit eine
   Mindestbreite von rund 349 Pixeln erzwangen. Gemessen bei 320 Pixel
   Fensterbreite: Kasten 349 breit, der rechte Knopf abgeschnitten.
   Jetzt duerfen die Knoepfe schrumpfen und umbrechen, unter 360 Pixeln stehen
   sie untereinander. */
.cookiebanner{box-sizing:border-box}
.cookiebanner *{min-width:0}
@media(max-width:480px){
  .cookiebanner{padding:14px 16px}
  .cookiebanner .cb-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;margin-left:0}
  .cookiebanner .cb-btns button{white-space:normal;padding:10px 8px;font-size:13px;width:100%}
}
@media(max-width:359px){
  .cookiebanner .cb-btns{grid-template-columns:1fr}
}

/* 23.09.2026, 09:16 - Hasan mit zweitem Bildschirmfoto: die Seite laesst sich
   am Handy seitlich schieben, rechts steht ein weisser Rand. Ursache gemessen
   bei 320 Pixel Fensterbreite: die Shop-Kachel .lshop wird 335 breit, weil
   ihre Zeile .lk nicht schrumpfen darf (Vorgabe min-width:auto bei
   Flex-Kindern) und der Knopf .btn eine Mindestbreite von 190 Pixeln hat.
   Damit ist die Seite 349 breit statt 320. */
.lshop,.lshop .lk,.lshop .lk>div,.lshop .lk b,.lshop .lk span{min-width:0}
.lshop .lk b,.lshop .lk span{overflow-wrap:anywhere}
.lshop .anz{white-space:nowrap;flex:none}
@media(max-width:420px){
  .lshop{padding:14px}
  .lshop .btn,.lshop a.btn{min-width:0;width:100%}
}

/* 23.09.2026, 09:30 - Hasan mit zwei weiteren Bildschirmfotos: auch
   Startseite, Shop-Uebersicht (/shops/) und Shopseite schieben sich am
   Handy seitlich, rechts steht ein weisser Rand. Nachgemessen bei 320/360
   Pixel Fensterbreite (dieselbe Ursache wie beim Cookie-Banner und der
   Laenderseite: Flex-/Grid-Kinder schrumpfen von sich aus nicht unter
   ihre Inhaltsbreite). Bricht das Design am Rechner (1280 Pixel) NICHT,
   die Regeln greifen nur, wenn tatsaechlich zu wenig Platz da ist bzw.
   stehen in einer Media-Abfrage. */

/* Ursache 1 (Startseite und /shops/): die Shop-Kachel a.shop steckt im
   Kachelraster .g6/.g4/.g3. Als Grid-Kind durfte sie nicht unter die
   Breite von Name und Cashback-Wort schrumpfen - bei 320 Pixel wurde eine
   Kachel bis zu 134 Pixel breit statt der rund 89 Pixel, die eine Spalte
   von drei hergibt (Beleg: a.shop 380-459 Pixel rechter Rand statt 320). */
.shop{min-width:0}
.shop .nm,.shop .cb{overflow-wrap:anywhere}

/* Ursache 2 (Startseite): die Zeile "Beliebte Suchen" im Kopfbereich reiht
   mehrere Shop-Links direkt aneinander, ohne Leerzeichen dazwischen im
   HTML - dadurch hatte der Browser zwischen den Links keine Umbruchstelle
   und behandelte die ganze Kette wie ein einziges langes Wort (Beleg: a
   ohne Klasse, 414 Pixel rechter Rand statt 320, endet bei "Motointegrator").
   Korrektur 23.09. (Betreiber-Fund, Name brach mitten im Wort um, "Motoin"/
   "tegrator"): templates/startseite.php setzt jetzt ein unsichtbares
   Trennzeichen (Leerzeichenbreite 0, echte Umbruchstelle) zwischen die
   Links, optisch unveraendert dank .beliebt a{margin-right:12px}.
   overflow-wrap faellt deshalb auf break-word zurueck - bricht nur noch
   mitten im Wort, wenn ein einzelner Name allein breiter als die Zeile
   waere, nicht mehr bevorzugt zwischen den Links. */
.beliebt{overflow-wrap:break-word}

/* Ursache 3 (Shopseite /de/shop/.../): main und die Seitenspalte
   aside.seite sind beide Kinder des Rasters .raster. Ab 980 Pixel wird
   daraus eine einzige Spalte (1fr) - als Grid-Kinder durften main und
   .seite trotzdem nicht unter ihre Inhaltsbreite schrumpfen, darum zog
   die Angebotsliste (Knopf mit min-width:190px) die ganze Spalte auf 470
   Pixel statt der verfuegbaren 292 Pixel. Das hat jede Box in der Spalte
   mitgezogen (aside.seite, div.box, a.url, a.btn zeigten deshalb alle
   denselben zu grossen rechten Rand). */
.raster>main,.raster>.seite{min-width:0}

/* Ursache 4 (Shopseite, unten "Das koennte dich auch interessieren"): die
   Kachel a.ae sitzt im Raster .aehnlich (vier Spalten am Rechner, zwei
   Spalten ab 860 Pixel). Als Grid-Kind durfte a.ae nicht schrumpfen, und
   der Shop-Name .nm in der Kopfzeile .kopf (Logo + Name nebeneinander)
   durfte als Flex-Kind ebenfalls nicht unter seine Wortbreite - ein
   langer Name wie "Autobatterienbilliger" zog die Kachel auf 455 statt
   320/360 Pixel Seitenbreite.
   Am Rechner sorgt genau dieselbe min-width:auto-Regel schon heute dafuer,
   dass die vier Kacheln in .aehnlich NICHT gleich breit sind (Beleg vor
   der Reparatur: 167/180/220/167 Pixel statt gleichmaessig 184/184/184/184)
   - das war schon vorher so und wird hier bewusst NICHT angefasst, damit
   sich am Rechner nichts veraendert. Die Reparatur greift deshalb erst ab
   860 Pixel, wo .aehnlich ohnehin schon auf zwei Spalten umschaltet. */
@media(max-width:860px){
  .ae,.ae .kopf,.ae .kopf .nm{min-width:0}
  .ae .kopf .nm,.ae .w{overflow-wrap:anywhere}
}

/* =========================================================================
   Ratgeber-/Guides-Bereich (dc-ratgeber.php, 23.09.2026, Cashback Claude).
   Eigener, klar abgegrenzter Block am Dateiende - nur ANHAENGT, keine
   bestehende Regel oben veraendert. Nutzt dieselben Farb-/Radius-Variablen
   wie der Rest des Portals (kein zweites Design), neue eigene Klassen mit
   Vorsatz "rg-" bzw. "ratgebermenue", damit nichts mit bestehenden Klassen
   kollidiert.
   ========================================================================= */

/* Menuepunkt "Ratgeber"/"Guides" im Kopf, gleiches Klappmenue-Muster wie
   .landwahl (details/summary, kein JavaScript noetig), aber eigene Klasse
   und eigene Position: steht AUSSERHALB von <nav>, bleibt darum auch dann
   sichtbar, wenn dc.css die Hauptnavigation unter 980px ausblendet. */
.top .ratgebermenue{position:relative}
.top .ratgebermenue>.rg-btn{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:#c3c6da;
  border:1px solid rgba(255,255,255,.18);border-radius:100px;padding:7px 13px;cursor:pointer;list-style:none}
.top .ratgebermenue>.rg-btn::marker,.top .ratgebermenue>.rg-btn::-webkit-details-marker{display:none;content:""}
.top .ratgebermenue>.rg-btn:hover,.top .ratgebermenue[open]>.rg-btn{color:#fff;border-color:rgba(255,255,255,.4)}
.ratgebermenue-liste{position:absolute;top:calc(100% + 8px);left:0;right:auto;width:250px;max-width:calc(100vw - 32px);
  background:#fff;border-radius:14px;box-shadow:0 22px 44px -12px rgba(0,0,0,.4);border:1px solid var(--line);
  overflow-y:auto;max-height:min(70vh,420px);z-index:80;padding:6px;box-sizing:border-box}
.ratgebermenue-liste a{display:block;padding:10px 11px;border-radius:9px;color:var(--ink);text-decoration:none;
  font-size:14px;line-height:1.35}
.ratgebermenue-liste a:hover,.ratgebermenue-liste a:focus-visible{background:var(--akzent-bg)}
.ratgebermenue-liste a[aria-current="true"]{background:var(--navy-soft);font-weight:700}
.ratgebermenue-liste a.alle{text-align:center;font-weight:700;color:var(--akzent);margin-top:4px;
  border-top:1px solid var(--line);border-radius:0;padding:12px}
@media(max-width:760px){.ratgebermenue-liste{width:min(280px,calc(100vw - 32px))}}

/* Gruppenkarten auf der Uebersicht (drei Themengruppen). */
.rg-gruppenkarten{margin-top:20px}
.rg-gruppenkarte{display:block;background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:20px;transition:border-color .15s,transform .15s}
.rg-gruppenkarte:hover{border-color:var(--akzent-line);transform:translateY(-2px)}
.rg-gruppenkarte h2{font-size:17px;margin-bottom:8px}
.rg-gruppenkarte p{font-size:14px;color:var(--ink-2);line-height:1.55}
.rg-gruppenkarte .rg-anzahl{display:inline-block;margin-top:12px;font-size:12.5px;font-weight:700;
  color:var(--akzent-2);background:var(--akzent-bg);border-radius:100px;padding:3px 10px}

/* Artikel-Kacheln (Uebersicht und Gruppenseiten). */
.rg-kacheln{margin-top:10px}
.rg-kachel{display:flex;flex-direction:column;gap:8px;background:var(--card);border:1px solid var(--line-2);
  border-radius:14px;padding:16px 17px;box-shadow:0 1px 2px rgba(20,23,51,.04);transition:border-color .15s,transform .15s}
.rg-kachel:hover{border-color:var(--akzent-line);transform:translateY(-2px)}
.rg-kachel-datum{font-size:12px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.02em}
.rg-kachel h3{font-size:16px;line-height:1.35;font-weight:600}
.rg-kachel p{font-size:13.5px;color:var(--ink-2);line-height:1.5;margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* Artikelseite: begrenzte Lesebreite, groessere Schrift als im uebrigen
   Portal, deutliche Abstaende vor Zwischenueberschriften, Vorspann im
   ersten Absatz (Hasan/Koordinator 23.09.: "wie ein Mensch schreiben und
   schoen formatieren"). */
.rg-wrap{max-width:700px;margin:0 auto}
.rg-infozeile{font-size:13px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.03em;margin-top:8px}
.rg-infozeile a{color:var(--ink-3)}
.rg-infozeile a:hover{color:var(--akzent)}
.rg-h1{font-size:clamp(26px,4vw,36px);margin-top:10px;line-height:1.25}
.rg-byline{font-size:13.5px;color:var(--ink-2);margin-top:9px;margin-bottom:4px;font-weight:600}

.rg-inhalt{margin-top:28px;font-size:17.5px;line-height:1.72;color:var(--ink-2)}
.rg-inhalt h2{font-size:22px;color:var(--ink);margin-top:42px;margin-bottom:12px;line-height:1.3;font-weight:700}
.rg-inhalt>h2:first-child{margin-top:6px}
.rg-inhalt p{margin-top:16px;max-width:none}
.rg-inhalt p:first-of-type{font-size:19px;line-height:1.6;color:var(--ink);font-weight:500;margin-top:0}
.rg-inhalt ul{margin:18px 0;padding-left:24px}
.rg-inhalt li{margin-bottom:10px;line-height:1.65}
.rg-inhalt a{color:var(--akzent)}
.rg-inhalt a:hover{text-decoration:underline}
.rg-inhalt blockquote{background:var(--akzent-bg);border-left:4px solid var(--akzent);border-radius:0 12px 12px 0;
  padding:16px 20px;margin:26px 0;font-size:17px;color:var(--ink);font-style:normal}

/* Haeufige Fragen als aufklappbare Liste (details/summary, ohne JavaScript
   bedienbar), gleicher Aufbau wie das Klappmenue im Kopf. */
.rg-faq{margin-top:44px;padding-top:28px;border-top:1px solid var(--line)}
.rg-faq h2{font-size:20px;margin-bottom:6px}
.rg-faq-item{border-bottom:1px solid var(--line)}
.rg-faq-item summary{cursor:pointer;list-style:none;font-weight:700;font-size:15.5px;color:var(--ink);
  padding:15px 30px 15px 0;position:relative}
.rg-faq-item summary::-webkit-details-marker{display:none}
.rg-faq-item summary::after{content:"+";position:absolute;right:2px;top:11px;font-size:21px;font-weight:400;
  color:var(--akzent);transition:transform .15s}
.rg-faq-item[open] summary::after{transform:rotate(45deg)}
.rg-faq-antwort{padding:0 0 17px;color:var(--ink-2);font-size:15px;line-height:1.65}
.rg-faq-antwort p{margin:0}

/* Weiterfuehrende Artikel am Ende. */
.rg-weiterfuehrend{margin-top:40px;padding-top:28px;border-top:1px solid var(--line)}
.rg-weiterfuehrend h2{font-size:20px;margin-bottom:14px}
.rg-weiterfuehrend-liste{gap:12px}
.rg-verwandt{display:flex;flex-direction:column;gap:7px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:15px 16px;transition:border-color .15s,transform .15s}
.rg-verwandt:hover{border-color:var(--akzent-line);transform:translateY(-2px)}
.rg-verwandt b{font-size:14.5px;line-height:1.35;color:var(--ink);font-weight:600}

.rg-zurueck{margin-top:30px}

/* Handy: gleiche Ruhe, kein zu grosser Titel, keine zu lange Zeile - .wrap
   liefert bereits den Seitenrand (siehe @media(max-width:760px) oben). */
@media(max-width:640px){
  .rg-h1{font-size:24px}
  .rg-inhalt{font-size:16.5px;line-height:1.68}
  .rg-inhalt p:first-of-type{font-size:17.5px}
  .rg-inhalt h2{font-size:19px;margin-top:32px}
  .rg-gruppenkarte,.rg-kachel{padding:15px}
}

/* 23.09.2026, 20:30 - Kopfbereich der Uebersichtsseiten (Hasan: "das sollten
   wir auch zu jedem Menuepunkt oben hinzufuegen" und "du solltest das
   kopieren"). Gleiche Farben und Abstaende wie der Kopf der Laenderseiten
   (.landkopf), nur ohne Fahne und ohne Zahlenreihe, damit die Liste nicht
   nach unten rutscht. */
.uekopf{background:linear-gradient(180deg,#1b2140 0%,#232a4d 100%);padding:18px 0 26px;margin-bottom:26px}
.uekopf .krume{color:#aeb4d6}
.uekopf .krume a{color:#d8dcf2}
.uekopf .tag{display:inline-block;margin:10px 0 8px}
.uekopf .skopf{display:block;margin:0 0 14px}
.uekopf .skopf h1{color:#fff;margin:0 0 4px}
.uekopf .skopf p{color:#c3c8e6;margin:0}
.uekopf .skopf .r{display:none}
.uekopf .gsuche{max-width:620px;margin:0}

/* 23.09.2026, 20:34 - Nachbesserung: der Kopfbereich sass innerhalb des
   Inhaltsrahmens und war deshalb nicht randlos, die Plakette war dunkel auf
   dunkel. Jetzt randlos ueber die volle Breite und dieselbe Plakette wie auf
   der Laenderseite. */
.uekopf{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  background:linear-gradient(160deg,#252a52,var(--navy-2));color:#fff;padding:0}
.uekopf>.wrap{padding-top:18px;padding-bottom:30px}
.uekopf .tag{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;
  padding:7px 13px;border-radius:999px;background:rgba(45,212,161,.12);color:#5fe3b6;
  border:1px solid rgba(45,212,161,.25);margin:12px 0 10px}

/* 23.09.2026, 21:10 - Laenderseite lief am Handy ueber den Rand (gemessen:
   bei 320 Pixeln 380 breit, Verursacher h1, p.lead und die grosse Suche in
   der Zeile mit der Fahne). Flex-Kinder duerfen jetzt schrumpfen, die Zeile
   darf umbrechen, die Suche nimmt hoechstens die volle Breite. */
.landkopf .lkzeile{flex-wrap:wrap;min-width:0}
.landkopf .lkzeile>div{min-width:0;flex:1 1 260px}
.landkopf h1,.landkopf .lead{min-width:0;overflow-wrap:anywhere}
.landkopf .gsuche,.uekopf .gsuche{max-width:100%;box-sizing:border-box}
.landkopf .gsuche input,.uekopf .gsuche input{min-width:0}
@media(max-width:520px){
  .landkopf .fg.gross{width:56px;height:41px}
}

/* 23.09.2026, 21:55 - Hasan: Kopfbereich der Uebersichtsseiten wie die
   Laenderseite: Luft zwischen Text und Suche, nach der Suche endet der Kopf etwa dort,
   wo auf der Laenderseite der Strich steht (Zahlenzeile ausdruecklich NICHT). */
.uekopf .gsuche{margin:26px 0 0}
.uekopf>.wrap{padding-bottom:30px}
.uekopf section{padding-bottom:0}

/* 23.09.2026, 22:05 - Ratgeber-Seiten mit demselben dunklen Kopf und
   grosser Suche wie alle Uebersichtsseiten (Hasan). Artikel-Infozeile,
   Titel und Redaktionszeile hell auf dunkel. */
.rg-kopf .rg-infozeile{color:#aeb4d6;margin:10px 0 8px}
.rg-kopf .rg-infozeile a{color:#d8dcf2}
.rg-kopf .rg-h1{color:#fff;max-width:30ch}
.rg-kopf .rg-byline{color:#c3c8e6}