/* pp.css */ /* 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-3/--gold-2 am 30.09.2026 (PageSpeed-Auftrag, Kontrast) etwas dunkler gestellt (vorher #a09aa3 / #a87a2f, je knapp unter 3:1 auf hellem Grund) - jetzt >=4.5:1 (WCAG AA) auf --bg/--card/--gold-bg, gleiche Farbfamilie (Pflaume-Grau/Gold), nur besser lesbar. */ --ink:#241a26; --ink-2:#6c626f; --ink-3:#716a74; --line:#e9e2dc; --line-2:#dbd2cb; --plum:#2b1b2e; --plum-2:#1d1120; --plum-soft:#f2ecf1; --gold:#c2913f; --gold-2:#8b6527; --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} .fgrid.f3{grid-template-columns:1.5fr 1fr 1fr} @media(max-width:860px){.fgrid{grid-template-columns:1fr 1fr}.fgrid>div:first-child{grid-column:1/-1}} footer .ftitel{color:#fff;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;margin-bottom:13px;font-weight:600;line-height:1.22} 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} /* Seiten mit eigenem Hero-Suchfeld (Startseiten) zeigen am Handy nur eins, nicht zwei Suchfelder übereinander. */ .pp-start .tsuche{display:none} 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;margin-top:26px} .info h3:first-child{margin-top:0} .info p{font-size:15px;color:var(--ink-2);line-height:1.7;margin-top:12px;max-width:84ch} .info ul{margin:12px 0 0;padding-left:22px;color:var(--ink-2);font-size:15px;line-height:1.7} .info li{margin-bottom:6px} .info a{color:var(--gold-2);text-decoration:underline} .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;position:relative} .hsuche svg{position:absolute;left:20px;top:23px;color:var(--ink-3);z-index:1;pointer-events:none} form.hsuche input{flex:1 0 100%;padding:10px 12px 10px 38px;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) ======================================================================== */ .landkopf .krume{color:#a396a2} .landkopf .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;overflow:hidden} .llogo img{width:100%;height:100%;object-fit:contain;padding:5px;box-sizing:border-box} .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,.wopt a{display:inline-block;text-decoration:none;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,.wopt a:hover{border-color:var(--ink-3)} .wopt button.an,.wopt a.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:#3b765f;margin-top:10px;text-align:center}/* 30.09.2026 PageSpeed: #3d7a62 war 4,46:1 auf --gruen-bg, knapp unter AA */ .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;overflow:hidden} .slogo img{width:100%;height:100%;object-fit:contain;padding:6px;box-sizing:border-box} @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)} /* echte Produktfotos (29.09.) */ .pbild .pfoto{display:block;width:150px;height:188px;object-fit:contain;background:#fff;padding:10px;box-sizing:border-box} .sbild .sfoto{display:block;width:52px;height:65px;object-fit:contain;background:#fff} @media(max-width:760px){.sbild .sfoto{width:44px;height:55px}} /* ======================================================================== Land-Kopfknopf: Handy zeigt nur Flagge + Ländercode statt vollem Namen. ======================================================================== */ .land .lkurz{display:none} @media(max-width:760px){.land .lvoll{display:none}.land .lkurz{display:inline}} /* ======================================================================== Einmaliger "Du bist in X?"-Hinweis (footer.php + pp.js), unten rechts, dezent. Wird per JS eingeblendet, wenn noch nicht entschieden. ======================================================================== */ .pp-popup{position:fixed;right:16px;bottom:16px;z-index:60;background:var(--card);border:1px solid var(--line); border-radius:16px;padding:16px 18px;box-shadow:0 20px 40px -20px rgba(36,26,38,.45);max-width:300px} .pp-popup[hidden]{display:none} .pp-popup-x{position:absolute;right:10px;top:8px;border:0;background:none;color:var(--ink-3);font-size:15px;cursor:pointer;padding:2px 6px} .pp-popup-text{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;padding-right:16px} .pp-popup-knoepfe{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap} .pp-popup-knoepfe .btn{flex:none} @media(max-width:480px){.pp-popup{left:14px;right:14px;bottom:14px;max-width:none}} /* ======================================================================== Cookie-Zustimmungs-Banner (footer.php + pp.js), volle Breite unten. Zwei gleichwertige Knöpfe (kein optisch bevorzugtes "Akzeptieren"), Link zur Datenschutzerklärung im Text. Erscheint vor dem Länder-Popup (.pp-popup), nie gleichzeitig – siehe pp.js:ppConsentInit(). ======================================================================== */ .pp-cookiebar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--plum);color:#e8dfe6; box-shadow:0 -12px 30px -14px rgba(36,26,38,.5)} .pp-cookiebar[hidden]{display:none} .pp-cookiebar-in{max-width:var(--shell);margin:0 auto;padding:16px 22px;display:flex;align-items:center; gap:18px;flex-wrap:wrap} .pp-cookiebar-text{flex:1 1 420px;font-size:13.5px;line-height:1.55;color:#e8dfe6} .pp-cookiebar-text a{color:var(--gold);text-decoration:underline} /* Banner ist seit dem Coin7-Stil-Umbau (29.09.2026) eine weiße Karte, keine dunkle Leiste mehr – Knopf-Farben/-Anordnung stehen jetzt vollständig in assets/css/pp-cookie.css (lädt danach). Die drei Zeilen mit hellem Rand-Knopf-Text auf dunklem Grund von vorher sind bewusst entfernt, die machten "Anpassen"/"Alle ablehnen" auf der neuen weißen Karte fast unsichtbar (heller Text auf hellem Grund). */ /* ======================================================================== Live-Vorschläge unter dem Suchfeld (Kopf und Hero). ======================================================================== */ .pp-suchfeld{position:relative} .pp-vorschlaege{position:absolute;left:0;right:0;top:100%;margin-top:6px;background:var(--card); border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 40px -20px rgba(36,26,38,.5); overflow:hidden;z-index:70;text-align:left} .pp-vorschlaege[hidden]{display:none} .pv-eintrag{display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;text-decoration:none;color:var(--ink)} .pv-eintrag:hover,.pv-eintrag.aktiv{background:var(--bg)} .pv-bild{width:30px;height:38px;border-radius:6px;overflow:hidden;flex:none;background:#fff;border:1px solid var(--line)} .pv-bild img{width:100%;height:100%;object-fit:contain} .pv-text{flex:1;min-width:0} .pv-text b{display:block;font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pv-text span{display:block;font-size:11.5px;color:var(--ink-2)} .pv-preis{font-size:13px;font-weight:600;color:var(--gruen);white-space:nowrap;flex:none} /* ======================================================================== Listenseiten (Marken/Marke/Herren/Damen/Unisex/Suche) – gleicher Stil wie Länder-Startseite (pp-land), nur eigener Kopf ohne Hero-Verlauf. ======================================================================== */ .plkopf{background:var(--card);border-bottom:1px solid var(--line);padding:26px 0} .plkopf h1{font-size:clamp(24px,3vw,32px);font-weight:500;letter-spacing:-.02em} .plkopf p{margin-top:8px;font-size:14.5px;color:var(--ink-2)} .abc{margin:0 0 10px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)} .marken.gross a{padding:16px 15px} .filterzeile{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:18px} .filterzeile select{font:inherit;font-size:14px;padding:9px 13px;border-radius:10px;border:1px solid var(--line-2);background:var(--card)} .leer{background:var(--card);border:1px dashed var(--line-2);border-radius:16px;padding:26px;text-align:center;color:var(--ink-2)} /* Suchkarten/Marke-Karten: schlanke Reihen statt großer Kacheln */ .sreihen{display:flex;flex-direction:column;gap:10px} .sreihe{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:14px; padding:12px 16px;transition:border-color .15s} .sreihe:hover{border-color:var(--gold-line)} .sreihe .sbildklein{width:40px;height:50px;border-radius:8px;overflow:hidden;flex:none;background:#fff;border:1px solid var(--line)} .sreihe .sbildklein img{width:100%;height:100%;object-fit:contain} .sreihe .stext{flex:1;min-width:0} .sreihe .stext b{display:block;font-size:14.5px;font-weight:600} .sreihe .stext span{display:block;font-size:12.5px;color:var(--ink-2);margin-top:2px} .sreihe .spreis{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:15px;font-weight:600;color:var(--gruen);white-space:nowrap;flex:none} .sreihe .spreis.aus{color:var(--ink-3);font-weight:500;font-size:13px} .sreihe .spreis .kmeta{margin-top:0} /* Markenkacheln mit Logo (Startseiten, /marken/, Kopf von /marke//). Die Logo-Dateien selbst sind bereits optisch vereinheitlicht (getrimmt, auf vergleichbare Fläche skaliert, siehe pp_marken_logos) – die Box hier ist deshalb für alle Logos gleich groß, kein Sonderfall nötig. */ .markenlogos{display:grid;grid-template-columns:repeat(6,1fr);gap:10px} @media(max-width:1000px){.markenlogos{grid-template-columns:repeat(3,1fr)}} @media(max-width:560px){.markenlogos{grid-template-columns:repeat(3,1fr);gap:7px}} .mlogo{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 8px; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:84px; box-shadow:0 1px 2px rgba(36,26,38,.04);transition:border-color .15s,transform .15s} .mlogo:hover{border-color:var(--gold-line);transform:translateY(-2px)} .mlogo img{width:70%;max-width:110px;height:36px;object-fit:contain} .mlogo .mname{font-size:13.5px;font-weight:600;text-align:center;line-height:1.25} .mlogo .manz{font-size:10.5px;color:var(--ink-3)} @media(max-width:560px){ .mlogo{min-height:72px;padding:8px 5px;gap:4px;border-radius:11px} .mlogo img{width:75%;height:28px} .mlogo .mname{font-size:11px} .mlogo .manz{font-size:9px} } .mkopf-logo{max-width:160px;height:48px;object-fit:contain;margin-bottom:8px;display:block} /* Karten-Metazeile (Shopanzahl + vorbereitete Gutschein-/Cashback-Plaketten) */ .kmeta{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-3);margin-top:3px} .minibadge{font-size:10.5px;font-weight:700;border-radius:100px;padding:2px 7px} .minibadge.gold{background:var(--gold-bg);color:var(--gold-2)} .minibadge.gruen{background:var(--gruen-bg);color:var(--gruen)} /* Seiten-Navigation (Paginierung) */ .seiten{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:26px;font-size:14px;color:var(--ink-2)} .seiten a.btn{min-width:120px} .seiten .aus{opacity:.4;pointer-events:none} /* Platzhalter im Hero-Suchfeld heller (Hasan 29.09.) */ form.hsuche input::placeholder{color:#b3aca3;opacity:1} /* Markenname klein unter dem Logo (Hasan 29.09.) */ .mlogo .mname-klein{display:block;font-size:11px;line-height:1.2;color:var(--ink-2,#555);margin-top:4px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%} /* Lange Hinweistexte in der Preisaufstellung umbrechen, Shop-Logos breiter (29.09.) */ .srech > div{min-width:0} .srech > div b{white-space:normal;text-align:right;min-width:0;overflow-wrap:anywhere} .slogo:has(img){padding:4px} .slogo img{width:100%;height:100%;object-fit:contain} /* Markenraster: lange Namen duerfen Spalten nicht verbreitern (29.09.) */ .markenlogos{grid-template-columns:repeat(6,minmax(0,1fr))} @media(max-width:1000px){.markenlogos{grid-template-columns:repeat(3,minmax(0,1fr))}} .markenlogos .mlogo{min-width:0} .markenlogos .mname-klein{white-space:normal;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* pp-ratgeber.css */ /* Ratgeber (page-templates/ratgeber-liste.php + ratgeber-artikel.php). Baut bewusst auf vorhandene Klassen aus pp.css auf (.plkopf, .krume, .info, .faq/.fr, .g3, .skopf, .leer) statt sie zu duplizieren – hier nur, was für den Ratgeber wirklich neu ist. */ /* Anker-Offset: die Kopfzeile ist sticky (pp.css: .top{position:sticky}), ein Sprung per Inhaltsverzeichnis darf die Überschrift nicht darunter verstecken. */ .rg-artikel h2[id], .rg-inhalt h2[id] { scroll-margin-top: 84px; } /* -------------------------- Artikel-Liste -------------------------- */ .rg-liste { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } @media(max-width:640px) { .rg-liste { grid-template-columns: 1fr; } } .rg-karte { display: flex; flex-direction: column; gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; color: var(--ink); } .rg-karte:hover { border-color: var(--gold-line); } .rg-karte b { font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; } .rg-karte-text { font-size: 14px; color: var(--ink-2); line-height: 1.55; } .rg-karte-datum { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; } .rg-karte-klein { padding: 16px 18px; } .rg-karte.rg-vorschau { border-style: dashed; border-color: var(--gold-line); } .rg-vorschau-marke { display: inline-block; align-self: flex-start; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gold-2); background: var(--gold-bg); border-radius: 100px; padding: 3px 10px; } .rg-admin-hinweis { margin-top: 18px; font-size: 13px; color: var(--ink-3); } /* --------------------------- Artikel-Seite --------------------------- */ .rg-vorschau-banner { background: var(--gold-bg); color: var(--gold-2); border: 1px solid var(--gold-line); border-radius: 12px; padding: 10px 16px; font-size: 14px; font-weight: 600; margin-bottom: 18px; } .rg-artikel { max-width: 760px; } .rg-artikel h1 { font-size: clamp(24px, 3vw, 32px); font-weight: 500; letter-spacing: -.02em; margin-bottom: 8px; } .rg-datum { font-size: 13.5px; color: var(--ink-3); margin-bottom: 22px; } .rg-toc { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 16px 20px; margin-bottom: 22px; } .rg-toc b { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); } .rg-toc ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; } .rg-toc a { font-size: 14.5px; color: var(--ink); } .rg-toc a:hover { color: var(--gold-2); } .rg-inhalt { margin-bottom: 20px; } .rg-inhalt h2 { font-size: 20px; margin-top: 28px; } .rg-inhalt h2:first-child { margin-top: 0; } .rg-inhalt h3 { font-size: 16.5px; margin-top: 18px; } /* pp-menue.css */ /* Hauptmenü am Handy (Menü-Knopf links vom Logo, header.php). Vorbild: die gleiche Lösung auf daily-coupons.info – eigenständiger Knopf
, das bestehende