/*
  perfumeprices – zusammengeführtes CSS aus den drei Entwürfen
  (startseite.html, laenderseite.html, detailseite-neu.html).
  Gemeinsame Regeln stehen einmal in "Basis (gemeinsam)".
  Wo sich zwei Entwürfe bei derselben Klasse unterscheiden (z. B. .krume,
  .kicker, .info, .fg2), ist die Basisregel die eines Entwurfs und die
  jeweils andere Fassung ist über die Body-Klasse der Seite (.pp-start /
  .pp-land / .pp-duft, gesetzt von functions.php je nach Template)
  nachgeführt – das Aussehen jeder einzelnen Seite bleibt dadurch exakt
  wie im Entwurf.
*/

/* ========================================================================
   Basis (gemeinsam: Variablen, Reset, Kopfzeile, Buttons, Sections, Grids,
   Flakon-Bild, Footer, gemeinsame mobile Basis) – identisch in allen drei
   Entwürfen
   ======================================================================== */
:root{
  --bg:#f7f3ef; --card:#fff;
  --ink:#241a26; --ink-2:#6c626f; --ink-3:#a09aa3;
  --line:#e9e2dc; --line-2:#dbd2cb;
  --plum:#2b1b2e; --plum-2:#1d1120; --plum-soft:#f2ecf1;
  --gold:#c2913f; --gold-2:#a87a2f; --gold-bg:#fbf3e4; --gold-line:#ecd9ae;
  --gruen:#1a7a55; --gruen-bg:#e6f4ee; --gruen-line:#bfe0d2;
  --rose:#b05468; --rose-bg:#fceef0;
  --shell:1200px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:400 15.5px/1.6 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:-.018em;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 22px}

/* Kopf */
.top{background:var(--plum);color:#e8dfe6;position:sticky;top:0;z-index:40}
.top .wrap{display:flex;align-items:center;gap:22px;height:64px}
.marke{font-size:21px;letter-spacing:-.03em;font-weight:500;flex:none}
.marke em{font-style:normal;color:var(--gold)}
.top nav{display:flex;gap:20px;font-size:14.5px;color:#bcaebb}
.top nav a:hover,.top nav a.on{color:#fff}
.tsuche{flex:1;max-width:340px;margin-left:auto;position:relative}
.tsuche input{width:100%;font:inherit;font-size:14.5px;padding:9px 14px 9px 38px;border-radius:100px;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:#fff}
.tsuche input::placeholder{color:#a396a2}
.tsuche input:focus{outline:2px solid var(--gold);outline-offset:-1px}
.tsuche svg{position:absolute;left:13px;top:11px;color:#a396a2}
.land{display:inline-flex;align-items:center;gap:8px;font-size:14px;border:1px solid rgba(255,255,255,.2);
  border-radius:100px;padding:6px 12px;white-space:nowrap}
.land:hover{border-color:var(--gold);color:#fff}
@media(max-width:940px){.top nav{display:none}}
.fg{border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.25);display:block;flex:none}

.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.gold{background:var(--gold);color:#2a1e08}
.btn.gold:hover{background:var(--gold-2);color:#fff}
.btn.plum{background:var(--plum);color:#fff}
.btn.plum:hover{background:var(--plum-2)}
.btn.rand{background:var(--card);color:var(--ink);border-color:var(--line-2);font-weight:500}
.btn.rand:hover{border-color:var(--ink-3)}
.btn.voll{width:100%}
.btn.sm{font-size:13.5px;padding:9px 15px;border-radius:10px}

section{padding:40px 0}
.skopf{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.skopf h2{font-size:24px}
.skopf p{font-size:14.5px;color:var(--ink-2);margin-top:6px}
.skopf .r{margin-left:auto}
.link{font-size:14.5px;font-weight:600;color:var(--gold-2);display:inline-flex;align-items:center;gap:7px}
.link:hover{gap:10px}

/* Flakon-Bild */
.flakon{border-radius:14px;display:grid;place-items:center;position:relative;overflow:hidden}
.flakon svg{position:relative;z-index:1}

.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:980px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}

footer{background:var(--plum);color:#a396a2;margin-top:40px;padding:42px 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 h4{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:38ch;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}

@media(max-width:760px){
  .wrap{padding:0 14px}
  .top{position:static}
  .top .wrap{height:auto;flex-wrap:wrap;gap:10px;padding-top:10px;padding-bottom:10px}
  .tsuche{order:9;flex:1 0 100%;max-width:none;margin:0}
  section{padding:28px 0}
  .skopf h2{font-size:20px}
}

/* Kicker (Basis: wie im Hero der Startseite; auf der Länderseite im
   dunklen .landkopf etwas engerer Abstand, s. u.) */
.kicker{display:inline-block;font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);margin-bottom:18px}
.kicker.gold{color:var(--gold-2)}
.pp-land .landkopf .kicker{margin-bottom:12px}

/* Land-/Flaggen-Symbole neben Schrift (Basis: wie in Länder- und Detailseite,
   dort minimal unterschiedlicher Randabstand) */
.fg2{border-radius:2px;box-shadow:0 0 0 1px rgba(36,26,38,.14);display:inline-block;vertical-align:-2px;
  margin-right:7px;flex:none}
.pp-duft .fg2{margin-right:6px}

/* Breadcrumb (Basis: wie auf der Detailseite, auf hellem Grund).
   Auf der Länderseite steht die Krume im dunklen .landkopf – dort andere
   Farben, siehe Abschnitt Länderseite. */
.krume{font-size:13.5px;color:var(--ink-3);padding:18px 0 16px}
.krume a{color:var(--ink-2)}
.pp-duft .krume a:hover{color:var(--gold-2)}

/* Info-Kasten (Basis: wie auf der Länderseite; auf der Detailseite
   zusätzlicher Abstand unter der Überschrift, s. u.) */
.info{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px 26px;
  box-shadow:0 1px 2px rgba(36,26,38,.04)}
.info h3{font-size:19px}
.info p{font-size:15px;color:var(--ink-2);line-height:1.7;margin-top:12px;max-width:84ch}
.pp-duft .info h3{margin-bottom:12px}
.pp-duft .info p{margin-top:11px}
@media(max-width:760px){
  .info{padding:18px}
}

/* ========================================================================
   Startseite (front-page.php)
   ======================================================================== */
@media(max-width:760px){
  .hero .wrap{padding-left:14px;padding-right:14px}
  .hero h1{font-size:30px}
  .hero .lead{font-size:15.5px}
  .hsuche{padding:8px;gap:8px}
  .hsuche svg{display:none}
  .hsuche input{flex:1 0 100%;padding:10px 12px;background:var(--bg);border-radius:10px}
  .hsuche .btn{flex:1 0 100%}
  .beliebt a{display:inline-block;margin:0 10px 6px 0}
  .hkarte{padding:16px;border-radius:16px}
  .hend b{font-size:24px}
  .ps{padding:13px;gap:11px}
  .dupes,.alarm{padding:20px 16px;border-radius:18px}
  .afeld{flex-wrap:wrap;padding:8px}
  .afeld input{flex:1 0 100%;padding:10px 12px;background:var(--bg);border-radius:10px}
  .afeld .btn{flex:1 0 100%}
}

/* ---------- Hero ---------- */
.hero{background:
    radial-gradient(760px 420px at 82% -20%, rgba(194,145,63,.32) 0%, transparent 62%),
    radial-gradient(500px 340px at 8% 110%, rgba(176,84,104,.22) 0%, transparent 60%),
    linear-gradient(160deg,#3a2540,var(--plum-2));color:#fff}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);gap:48px;align-items:center;
  padding-top:56px;padding-bottom:56px}
@media(max-width:940px){.hero .wrap{grid-template-columns:minmax(0,1fr);gap:34px;padding-top:36px;padding-bottom:40px}}
.hin,.hkarte{min-width:0}
.hero h1{font-size:clamp(32px,4.4vw,50px);font-weight:500;letter-spacing:-.03em;line-height:1.1}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero .lead{margin-top:16px;font-size:17px;color:#cbbdc9;max-width:50ch;line-height:1.6}
.hsuche{display:flex;align-items:center;gap:10px;background:#fff;border-radius:14px;padding:7px 7px 7px 16px;
  margin-top:26px;max-width:600px;flex-wrap:wrap}
.hsuche svg{color:var(--ink-3);flex:none}
.hsuche input{flex:1;min-width:0;border:0;font:inherit;font-size:16px;padding:11px 0;color:var(--ink)}
.hsuche input:focus{outline:0}
.beliebt{margin-top:14px;font-size:13.5px;color:#a396a2}
.beliebt a{color:#e8dfe6;border-bottom:1px solid rgba(255,255,255,.28);margin-right:13px}

.hkarte{background:#fff;border-radius:20px;padding:20px;color:var(--ink);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.65)}
.hkarte .ht{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.hzeile{display:flex;align-items:center;gap:13px;margin-top:12px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.hn b{display:block;font-size:17px;font-weight:600;letter-spacing:-.02em}
.hn span{display:block;font-size:13px;color:var(--ink-2);margin-top:2px}
.hrech{margin-top:12px}
.hrech div{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:14px;color:var(--ink-2)}
.hrech div b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.hrech div.ab{color:var(--gruen)}
.hrech div.ab b{color:var(--gruen)}
.hend{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:12px;padding-top:13px;
  border-top:1px solid var(--line)}
.hend span{font-size:14px;color:var(--ink-2)}
.hend b{font-size:28px;font-weight:600;letter-spacing:-.03em;color:var(--gruen);font-variant-numeric:tabular-nums}
.hml{font-size:12.5px;color:var(--ink-3);margin-top:6px;text-align:right}

/* ---------- Preisstürze ---------- */
.ps{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;
  display:flex;gap:14px;align-items:flex-start;
  box-shadow:0 1px 2px rgba(36,26,38,.04);transition:border-color .15s,box-shadow .15s,transform .15s}
.ps:hover{border-color:var(--gold-line);box-shadow:0 16px 30px -26px rgba(194,145,63,.9);transform:translateY(-2px)}
.pin{min-width:0}
.pin b{display:block;font-size:15px;font-weight:600;line-height:1.3}
.pin .art{display:block;font-size:12.5px;color:var(--ink-2);margin-top:3px}
.pin .ab{display:block;font-size:16px;font-weight:600;color:var(--gruen);margin-top:9px;
  font-variant-numeric:tabular-nums}
.pin .minus{display:inline-block;font-size:12px;font-weight:700;color:var(--rose);background:var(--rose-bg);
  border-radius:100px;padding:3px 9px;margin-top:7px}

/* ---------- Marken ---------- */
.marken{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
@media(max-width:1000px){.marken{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.marken{grid-template-columns:1fr 1fr}}
.marken a{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:15px 14px;
  font-size:15px;font-weight:500;letter-spacing:-.01em;box-shadow:0 1px 2px rgba(36,26,38,.04);
  transition:border-color .15s,transform .15s}
.marken a:hover{border-color:var(--gold-line);transform:translateY(-2px)}
.marken a span{display:block;font-size:12.5px;color:var(--ink-3);font-weight:400;margin-top:3px}

/* ---------- Duftfamilien ---------- */
.familien{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
@media(max-width:1000px){.familien{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.familien{grid-template-columns:1fr 1fr}}
.fam{border-radius:16px;padding:16px 14px 15px;border:1px solid transparent;transition:transform .15s,box-shadow .15s}
.fam:hover{transform:translateY(-2px);box-shadow:0 14px 28px -24px rgba(36,26,38,.7)}
.fam .fp{display:block;width:30px;height:30px;border-radius:50%;margin-bottom:11px}
.fam b{display:block;font-size:14.5px;font-weight:600;line-height:1.3}
.fam span{display:block;font-size:12.5px;margin-top:3px;opacity:.75}
.fam.frisch{background:#dceff4;border-color:#bfdfe8;color:#12505d}
.fam.frisch .fp{background:#6fc8d9}
.fam.zitrus{background:#f9eecd;border-color:#ecdba7;color:#6d5410}
.fam.zitrus .fp{background:#e3b53f}
.fam.blumig{background:#fbe6ed;border-color:#f2cdd9;color:#8a3050}
.fam.blumig .fp{background:#e08ba6}
.fam.holzig{background:#f6ead3;border-color:#e7d3ac;color:#6b4c15}
.fam.holzig .fp{background:#c2913f}
.fam.orient{background:#f0e2ee;border-color:#ddc6da;color:#6b3159}
.fam.orient .fp{background:#a5628f}
.fam.gruen{background:#e4f1e8;border-color:#c4e0cd;color:#255f3c}
.fam.gruen .fp{background:#5fae7f}

/* ---------- Dupes (Startseite) ---------- */
.dupes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:40px;align-items:center;
  background:var(--card);border:1px solid var(--line);border-radius:22px;padding:30px 32px;
  box-shadow:0 1px 2px rgba(36,26,38,.04)}
@media(max-width:860px){.dupes{grid-template-columns:1fr;gap:24px;padding:22px}}
.dtext h2{font-size:26px}
.dtext p{font-size:15.5px;color:var(--ink-2);margin:12px 0 20px;max-width:48ch;line-height:1.65}
.dz{display:flex;align-items:center;gap:13px;padding:11px 0;border-bottom:1px solid var(--line)}
.dz:last-child{border-bottom:0;padding-bottom:0}
.dn{flex:1;min-width:0}
.dn b{display:block;font-size:14.5px;font-weight:600}
.dn span{display:block;font-size:12.5px;color:var(--ink-2);margin-top:2px}
.dp{font-size:16px;font-weight:600;color:var(--gruen);white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------- Warum ---------- */
.warum{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 18px;
  box-shadow:0 1px 2px rgba(36,26,38,.04)}
.wic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;margin-bottom:13px}
.warum b{display:block;font-size:15.5px;font-weight:600}
.warum p{font-size:14px;color:var(--ink-2);margin-top:7px;line-height:1.55}

/* ---------- Preisalarm ---------- */
.alarm{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:36px;align-items:center;
  background:linear-gradient(150deg,#3a2540,var(--plum-2));border-radius:22px;padding:32px 34px;color:#fff;
  position:relative;overflow:hidden}
.alarm::after{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(194,145,63,.3),transparent 70%)}
.alarm > *{position:relative;z-index:1}
@media(max-width:860px){.alarm{grid-template-columns:1fr;gap:22px;padding:24px}}
.alarm h2{font-size:26px;font-weight:500;letter-spacing:-.025em}
.alarm p{color:#cbbdc9;margin-top:12px;font-size:15.5px;max-width:48ch;line-height:1.6}
.afeld{display:flex;gap:9px;background:#fff;border-radius:14px;padding:7px 7px 7px 15px;align-items:center}
.afeld input{flex:1;min-width:0;border:0;font:inherit;font-size:15px;padding:10px 0;color:var(--ink)}
.afeld input:focus{outline:0}

/* ---------- Ratgeber ---------- */
.rat{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px;display:block;
  box-shadow:0 1px 2px rgba(36,26,38,.04);transition:border-color .15s,transform .15s}
.rat:hover{border-color:var(--gold-line);transform:translateY(-2px)}
.rkat{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold-2);background:var(--gold-bg);border-radius:100px;padding:4px 11px}
.rat h3{font-size:17px;margin-top:12px;line-height:1.35}
.rat p{font-size:14px;color:var(--ink-2);margin-top:9px;line-height:1.55}
.rmeta{display:block;font-size:12.5px;color:var(--ink-3);margin-top:13px}

/* ========================================================================
   Länderseite (page-templates/land.php)
   ======================================================================== */
.pp-land .krume{color:#a396a2}
.pp-land .krume a{color:#cbbdc9}
.landkopf{background:
    radial-gradient(700px 400px at 84% -20%, rgba(194,145,63,.30) 0%, transparent 62%),
    linear-gradient(160deg,#3a2540,var(--plum-2));color:#fff}
.landkopf .wrap{padding-bottom:38px}
.lkzeile{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.grossfahne{flex:none}
.fgg{border-radius:7px;box-shadow:0 0 0 1px rgba(255,255,255,.25),0 16px 30px -18px rgba(0,0,0,.8);display:block}
.landkopf h1{font-size:clamp(27px,3.6vw,38px);font-weight:500;letter-spacing:-.03em;line-height:1.14}
.landkopf h1 em{font-style:normal;color:var(--gold)}
.landkopf .lead{margin-top:13px;font-size:16.5px;color:#cbbdc9;max-width:64ch;line-height:1.6}
.lzahlen{display:flex;gap:34px;flex-wrap:wrap;margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.13)}
.lzahlen b{display:block;font-size:24px;font-weight:600;letter-spacing:-.03em}
.lzahlen span{display:block;font-size:13px;color:#a396a2;margin-top:2px}

.fgm{border-radius:3px;box-shadow:0 0 0 1px rgba(36,26,38,.12);display:block;margin-bottom:10px}

/* Shops */
.lshop{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;display:flex;
  flex-direction:column;gap:14px;box-shadow:0 1px 2px rgba(36,26,38,.04)}
.lshop:hover{border-color:var(--gold-line)}
.lk{display:flex;align-items:center;gap:12px}
.llogo{width:46px;height:46px;border-radius:12px;border:1px solid var(--line);background:#fff;
  display:grid;place-items:center;font-size:13px;font-weight:800;flex:none}
.lt{flex:1;min-width:0}
.lt b{display:block;font-size:16px;font-weight:600}
.lt span{display:flex;align-items:center;font-size:12.5px;color:var(--ink-2);margin-top:3px}
.lanz{font-size:11.5px;font-weight:700;background:var(--gold-bg);color:var(--gold-2);border-radius:100px;
  padding:4px 10px;white-space:nowrap}
.lvers{margin:0;background:var(--bg);border-radius:12px;padding:4px 14px}
.lvers div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.lvers div:last-child{border-bottom:0}
.lvers dt{font-size:13px;color:var(--ink-2)}
.lvers dd{margin:0;font-size:13.5px;font-weight:500;text-align:right}

/* Einfuhr */
.einfuhr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:40px;align-items:center;
  background:var(--card);border:1px solid var(--line);border-radius:22px;padding:30px 32px;
  box-shadow:0 1px 2px rgba(36,26,38,.04)}
@media(max-width:860px){.einfuhr{grid-template-columns:1fr;gap:24px;padding:22px 18px}}
.etext h2{font-size:26px}
.etext p{font-size:15.5px;color:var(--ink-2);margin:12px 0 20px;max-width:50ch;line-height:1.65}
.erech{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.et{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.ez{display:flex;justify-content:space-between;gap:12px;padding:8px 0;font-size:14.5px;color:var(--ink-2)}
.ez b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.ez.auf,.ez.auf b{color:var(--rose)}
.eend{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:10px;padding-top:12px;
  border-top:1px solid var(--line-2)}
.eend span{font-size:14px;color:var(--ink-2)}
.eend b{font-size:26px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}

/* Düfte (Länderseite) */
.dk{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;display:flex;gap:14px;
  align-items:flex-start;box-shadow:0 1px 2px rgba(36,26,38,.04);transition:border-color .15s,transform .15s}
.dk:hover{border-color:var(--gold-line);transform:translateY(-2px)}
.dki{min-width:0}
.dki b{display:block;font-size:15px;font-weight:600;line-height:1.3}
.dki .art{display:block;font-size:12.5px;color:var(--ink-2);margin-top:3px}
.dpreis{display:block;font-size:17px;font-weight:600;color:var(--gruen);margin-top:9px;
  font-variant-numeric:tabular-nums}
.dshops{display:block;font-size:11.5px;color:var(--ink-3);margin-top:4px}

/* Länderkacheln */
.laender{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:900px){.laender{grid-template-columns:1fr 1fr}}
.ld{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;
  box-shadow:0 1px 2px rgba(36,26,38,.04);transition:border-color .15s,transform .15s}
.ld:hover{border-color:var(--gold-line);transform:translateY(-2px)}
.ld b{display:block;font-size:15px;font-weight:600}
.ld span{display:block;font-size:12.5px;color:var(--ink-2);margin-top:3px}

@media(max-width:760px){
  .landkopf h1{font-size:25px}
  .lkzeile{gap:16px}
  .fgg{width:64px;height:auto}
  .lzahlen{gap:20px}
  .lzahlen b{font-size:20px}
  .etext h2{font-size:21px}
}

/* ========================================================================
   Detailseite (page-templates/duft.php)
   ======================================================================== */

/* ---------- Produktkopf ---------- */
.pkopf{display:grid;grid-template-columns:auto minmax(0,1fr) 330px;gap:32px;align-items:start;
  background:var(--card);border:1px solid var(--line);border-radius:22px;padding:28px 30px;
  box-shadow:0 1px 2px rgba(36,26,38,.04)}
@media(max-width:1060px){.pkopf{grid-template-columns:auto minmax(0,1fr)}.pbest{grid-column:1/-1}}
@media(max-width:620px){.pkopf{grid-template-columns:1fr;gap:20px;padding:18px}}
.pbild{border-radius:18px;overflow:hidden;flex:none}
.pmarke{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-2)}
.pkopf h1{font-size:clamp(28px,3.4vw,38px);font-weight:500;letter-spacing:-.03em;margin-top:6px}
.pnoten{font-size:15.5px;color:var(--ink-2);margin-top:9px}
.pnoten span{color:var(--ink)}
.pnotenliste{display:flex;gap:7px;flex-wrap:wrap;margin-top:13px}
.note{font-size:12.5px;background:var(--plum-soft);color:var(--plum);border-radius:100px;padding:5px 12px}
.wahl{display:flex;gap:26px;flex-wrap:wrap;margin-top:22px}
.wl{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:8px}
.wopt{display:flex;gap:6px;flex-wrap:wrap}
.wopt button{appearance:none;font:inherit;font-size:14px;padding:8px 15px;border-radius:10px;
  border:1px solid var(--line-2);background:var(--card);color:var(--ink-2);cursor:pointer}
.wopt button:hover{border-color:var(--ink-3)}
.wopt button.an{background:var(--plum);border-color:var(--plum);color:#fff;font-weight:600}

.pbest{background:var(--gruen-bg);border:1px solid var(--gruen-line);border-radius:18px;padding:20px}
.bl{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#16694a}
.bp{font-size:38px;font-weight:600;letter-spacing:-.035em;color:var(--gruen);line-height:1.05;margin-top:6px;
  font-variant-numeric:tabular-nums}
.bml{font-size:13.5px;color:#2b6b52;margin-top:4px}
.bverlauf{margin-top:16px}
.bverlauf svg{width:100%;height:60px;display:block}
.vlab{display:flex;justify-content:space-between;font-size:11.5px;color:#2b6b52;margin-top:4px}
.alarmbtn{margin-top:14px;background:#fff;border-color:var(--gruen-line);color:#16694a;font-weight:600}
.alarmbtn:hover{border-color:var(--gruen)}
.bhin{font-size:12px;color:#3d7a62;margin-top:10px;text-align:center}
.cashbacklink{display:block;margin-top:10px;text-align:right;font-size:13px;font-weight:600;color:var(--gruen)}
.cashbacklink:hover{text-decoration:underline}

.sort{font:inherit;font-size:14px;padding:9px 13px;border-radius:10px;border:1px solid var(--line-2);background:var(--card)}

/* ---------- Shop-Angebote ---------- */
.sland2 .lz{white-space:nowrap}
.shops{display:flex;flex-direction:column;gap:12px}
.shop{background:var(--card);border:1px solid var(--line-2);border-radius:18px;padding:18px 20px;position:relative;
  box-shadow:0 1px 2px rgba(36,26,38,.05),0 10px 22px -20px rgba(36,26,38,.5)}
.shop:hover{border-color:var(--gold-line)}
.shop.best{border-color:var(--gruen);box-shadow:0 1px 2px rgba(26,122,85,.1),0 16px 30px -22px rgba(26,122,85,.65)}
.shop.ausland{border-style:dashed}
.krone{position:absolute;top:-11px;left:20px;font-size:11.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;background:var(--gruen);color:#fff;border-radius:100px;padding:4px 13px}

.szeile{display:grid;grid-template-columns:52px 54px minmax(0,1fr) auto;gap:14px;align-items:center;
  padding-bottom:14px;border-bottom:1px solid var(--line)}
@media(max-width:760px){.szeile{grid-template-columns:44px 46px minmax(0,1fr);gap:11px}
  .szeile .sp{grid-column:1/-1;text-align:left;padding-top:4px}}
.sbild{border-radius:12px;overflow:hidden;display:block;flex:none}
.sbild svg{display:block}
.slogo{width:54px;height:54px;border-radius:13px;border:1px solid var(--line);background:#fff;
  display:grid;place-items:center;font-size:14px;font-weight:800;letter-spacing:-.02em;flex:none}
@media(max-width:760px){.slogo{width:46px;height:46px;font-size:12px}.sbild svg{width:44px;height:55px}}
.sn{min-width:0}
.sn b{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:17.5px;font-weight:600;letter-spacing:-.02em}
.sprod{display:block;font-size:13px;color:var(--ink-2);margin-top:3px}
.sland2{display:block;font-size:12.5px;color:var(--ink-3);margin-top:4px;line-height:1.5}
.sbadge{font-size:11.5px;font-weight:600;letter-spacing:0;background:var(--gold-bg);color:var(--gold-2);
  border-radius:100px;padding:3px 10px}
.sbadge.warn{background:var(--rose-bg);color:var(--rose)}
.sp{text-align:right;flex:none}
.sp b{display:block;font-size:25px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.sp span{display:block;font-size:12px;color:var(--ink-3);margin-top:2px;white-space:nowrap}
.shop.best .sp b{color:var(--gruen)}

.sunten{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:24px;align-items:center;margin-top:13px}
@media(max-width:760px){.sunten{grid-template-columns:1fr;gap:13px}}
.srech{display:flex;flex-direction:column;gap:2px;min-width:0}
.srech div{display:flex;justify-content:space-between;gap:14px;font-size:14px;color:var(--ink-2);padding:4px 0}
.srech div b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.srech div.ab,.srech div.ab b{color:var(--gruen)}
.srech div.auf,.srech div.auf b{color:var(--rose)}

/* Zwei Knöpfe nebeneinander bei Shops mit eigenem Gutschein
   (Wunsch des Betreibers: "Code kopieren" + "Zum Shop" statt nur "Zum Shop") */
.szwei{display:flex;gap:10px}
.szwei .btn{flex:1;min-width:0}

.mehr{display:block;width:100%;margin-top:14px;appearance:none;font:inherit;font-size:14.5px;font-weight:600;
  padding:14px;border-radius:14px;border:1px dashed var(--line-2);background:var(--card);color:var(--ink-2);cursor:pointer}
.mehr:hover{border-color:var(--gold);color:var(--gold-2)}
.mehr:disabled{color:var(--ink-3);cursor:default;border-style:solid}

/* ---------- Alternativen ---------- */
.alt{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;display:flex;gap:14px;
  align-items:flex-start;box-shadow:0 1px 2px rgba(36,26,38,.04);transition:border-color .15s,transform .15s}
.alt:hover{border-color:var(--gold-line);transform:translateY(-2px)}
.an2{flex:1;min-width:0}
.an2 b{display:block;font-size:15px;font-weight:600}
.an2 > span:first-of-type{display:block;font-size:12.5px;color:var(--ink-2);margin-top:3px}
.naehe{display:block;height:5px;border-radius:100px;background:var(--line);margin-top:11px;overflow:hidden}
.naehe i{display:block;height:100%;border-radius:100px;background:var(--gold)}
.nlab{display:block;font-size:11.5px;color:var(--ink-3);margin-top:5px}
.apreis{font-size:16px;font-weight:600;color:var(--gruen);white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------- Info (Detailseite: Fakten + FAQ) ---------- */
.fakten{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;margin:18px 0 0}
.fakten div{padding:10px 0;border-bottom:1px solid var(--line)}
.fakten dt{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.fakten dd{margin:3px 0 0;font-size:14.5px}
.faq{display:flex;flex-direction:column;gap:9px}
details.fr{border:1px solid var(--line);border-radius:13px}
details.fr summary{list-style:none;cursor:pointer;padding:14px 16px;font-weight:600;font-size:14.5px;
  display:flex;align-items:center;gap:12px}
details.fr summary::-webkit-details-marker{display:none}
details.fr summary .p{margin-left:auto;width:25px;height:25px;border-radius:8px;background:var(--gold-bg);
  color:var(--gold-2);display:grid;place-items:center;font-weight:700;flex:none;transition:transform .15s}
details.fr[open] summary .p{transform:rotate(45deg)}
details.fr .a{padding:0 16px 15px;font-size:14px;color:var(--ink-2);line-height:1.6}

/* ---------- Code-Fenster ---------- */
dialog.cd{border:0;border-radius:22px;padding:0;max-width:440px;width:calc(100% - 28px);color:var(--ink);position:relative}
dialog.cd::backdrop{background:rgba(29,17,32,.6)}
.cdk{padding:28px 26px 22px;text-align:center}
.cdt{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-2)}
.cdk h3{font-size:19px;margin-top:8px}
.codefeld{margin:18px 0 10px;display:flex;border:2px dashed var(--gold);border-radius:14px;overflow:hidden}
.codefeld .v{flex:1;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;font-size:21px;
  letter-spacing:.08em;padding:14px 16px;background:var(--gold-bg);color:var(--gold-2)}
.codefeld button{border:0;background:var(--gold);color:#2a1e08;font-weight:700;font-size:14.5px;padding:0 20px;cursor:pointer}
.cdk .hin{font-size:13.5px;color:var(--ink-2)}
.fb{border-top:1px solid var(--line);padding:15px 26px 20px;text-align:center}
.fb p{font-size:14px;font-weight:600}
.fb .kn{display:flex;gap:10px;justify-content:center;margin-top:10px}
.fb .kn button{border:1px solid var(--line-2);background:var(--card);border-radius:100px;padding:8px 20px;
  font-size:14px;font-weight:600;cursor:pointer}
.fb .kn button:hover{border-color:var(--gruen);color:var(--gruen)}
.cdx{position:absolute;right:14px;top:14px;border:1px solid var(--line-2);background:#fff;width:31px;height:31px;
  border-radius:50%;cursor:pointer;color:var(--ink-2);font-size:15px}

/* ---------- Handyleiste ---------- */
.handyleiste{display:none}
@media(max-width:760px){
  .pp-duft{padding-bottom:76px}
  .pkopf h1{font-size:27px}
  .pbild{justify-self:center}
  .bp{font-size:32px}
  .shop{padding:14px}
  .sp b{font-size:22px}
  .pp-duft .skopf{gap:10px}
  .pp-duft .skopf .r{margin-left:0;width:100%}
  .sort{width:100%}
  .sn b{font-size:16px}
  .sprod{font-size:12.5px}
  .krone{left:14px;font-size:11px;padding:3px 11px}
  .fakten{grid-template-columns:1fr}
  .handyleiste{display:flex;align-items:center;gap:12px;position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:var(--card);border-top:1px solid var(--line);padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    box-shadow:0 -8px 24px -18px rgba(36,26,38,.5)}
  .handyleiste .t{flex:1;min-width:0;line-height:1.2}
  .handyleiste .t small{display:block;font-size:11.5px;color:var(--ink-3)}
  .handyleiste .t b{font-size:19px;font-weight:600;color:var(--gruen);letter-spacing:-.02em}
}

/* ========================================================================
   Land- und Sprachumschalter (gemeinsam, identisch in allen drei Entwürfen)
   ======================================================================== */
button.land{appearance:none;background:none;color:inherit;font:inherit;cursor:pointer}
dialog.umsch{border:0;border-radius:22px;padding:0;max-width:620px;width:calc(100% - 28px);color:var(--ink);
  position:relative;background:var(--card)}
dialog.umsch::backdrop{background:rgba(29,17,32,.6)}
.ukopf{padding:26px 26px 18px}
.ukopf h3{font-size:21px}
.ukopf p{font-size:14px;color:var(--ink-2);margin-top:8px;max-width:52ch}
.ublock{padding:0 26px 18px}
.ul{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:11px}
.ulaender{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media(max-width:560px){.ulaender{grid-template-columns:1fr}}
.uland{display:flex;align-items:center;gap:11px;appearance:none;font:inherit;font-size:14.5px;text-align:left;
  padding:10px 13px;border-radius:12px;border:1px solid var(--line);background:var(--card);cursor:pointer;color:inherit}
.uland:hover{border-color:var(--gold-line);background:var(--gold-bg)}
.uland.an{border-color:var(--plum);background:var(--plum);color:#fff}
.uland .un{flex:1;min-width:0}
.uland .uw{font-size:12px;color:var(--ink-3)}
.uland.an .uw{color:#bcaebb}
.usprachen{display:flex;gap:8px;flex-wrap:wrap}
.uspr{appearance:none;font:inherit;font-size:14px;padding:9px 14px;border-radius:100px;border:1px solid var(--line);
  background:var(--card);cursor:pointer;color:inherit;display:inline-flex;align-items:center;gap:8px}
.uspr:hover{border-color:var(--gold-line)}
.uspr.an{border-color:var(--plum);background:var(--plum);color:#fff}
.uspr span{font-size:11px;font-weight:700;letter-spacing:.06em;opacity:.55}
.ufoot{border-top:1px solid var(--line);padding:16px 26px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.uh{flex:1;min-width:180px;font-size:12.5px;color:var(--ink-2)}