/* Fonts: + im jeder Seite
(kein @import — das erzeugt eine Request-Kette CSS → CSS → Font und bremst LCP). */
/* =========================================================================
Dragonia DE — "Boudoir-Magazin"
Perlmutt-Salon · Playfair Display Titelblatt · Magenta-Neon Signal
Namespace: ddc- | Layout: magazine | Theme: light | Shape: rounded
========================================================================= */
/* ---------- Tokens ---------- */
:root{
--bg-main:#FBF6F0;
--bg-card:#FFFFFF;
--accent:#FFDB6A;
--accent-2:#C4006A; /* Textakzent — AA-tauglich (Neon #E8007C bleibt in Glow/Grad) */
--text-main:#1A1016;
--text-muted:#6B5A63;
--border:rgba(232,0,124,0.22);
--ink-deep:#140B10;
--ivory:#F3E9DE;
--magenta-soft:rgba(232,0,124,.08);
--magenta-halo:0 0 28px rgba(232,0,124,.35);
--gold-line:linear-gradient(90deg,var(--accent) 0%,rgba(255,219,106,0) 100%);
--cta-grad:linear-gradient(100deg,#FFDB6A 0%,#FFC94D 42%,#E8007C 100%);
--shadow-card:0 10px 30px -18px rgba(232,0,124,.45),0 2px 8px -4px rgba(26,16,22,.10);
--shadow-lift:0 18px 44px -20px rgba(232,0,124,.55);
--font-head:"Playfair Display",Georgia,"Times New Roman",serif;
--font-body:"Source Sans 3","Segoe UI",Helvetica,Arial,sans-serif;
--wrap:1280px; /* magazine → wide */
--gutter:clamp(1rem,4vw,2rem);
--r-lg:20px; /* SHAPE = rounded */
--r-md:14px;
--r-sm:10px;
--sp-sec:clamp(3rem,6vw,4.75rem); /* DENSITY = moderate */
--sp-blk:clamp(1.5rem,3vw,2.25rem);
--hdr-h:74px;
}
/* ---------- Reset / base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
margin:0;overflow-x:hidden;
background:var(--bg-main);
color:var(--text-main);
font-family:var(--font-body);
font-size:clamp(1rem,.97rem + .18vw,1.075rem);
line-height:1.68;
font-weight:400;
-webkit-font-smoothing:antialiased;
overflow-wrap:break-word;
hyphens:auto; /* lange dt. Komposita sauber trennen statt hart brechen */
}
/* Keine Trennstriche in Überschriften, Links, Zitaten, Buttons und Versalien-Labels:
dort trennt der dt. Algorithmus auch Eigennamen und engl. Zitate ("TRI-BUNA", "ma-naged"). */
:where(h1,h2,h3,h4,a,blockquote,th,.ddc-eyebrow,.ddc-chip,.ddc-btn,.ddc-review__src,
.ddc-toc__title,.ddc-panel__title,.ddc-footer__title,.ddc-stat__label,.ddc-card__label){hyphens:manual}
img{max-width:100%}
[id]{scroll-margin-top:calc(var(--hdr-h) + 1rem)} /* Anker nicht unter den Sticky-Header */
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:700;line-height:1.12;margin:0 0 .6em;letter-spacing:-.012em}
h1{font-size:clamp(2.1rem,1.3rem + 3.4vw,3.9rem);font-weight:900;text-wrap:balance}
h2{font-size:clamp(1.65rem,1.15rem + 1.9vw,2.6rem);text-wrap:balance}
h3{font-size:clamp(1.2rem,1.05rem + .7vw,1.55rem)}
h4{font-size:1.08rem;font-family:var(--font-body);font-weight:700;letter-spacing:.01em}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.15em;padding-inline-start:1.35em}
li{margin-bottom:.45em}
strong{font-weight:700}
:focus-visible{outline:3px solid var(--accent-2);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent-2);color:#fff}
/* ---------- Container / sections ---------- */
.ddc-container{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.ddc-section{padding-block:var(--sp-sec);position:relative}
.ddc-section--alt{background:linear-gradient(180deg,#FFF9F1 0%,#F7EDE3 100%)}
.ddc-section--tight{padding-block:clamp(2rem,4vw,3rem)}
.ddc-section > .ddc-container > :last-child{margin-bottom:0}
/* Magazin-Kolumnentitel: Eyebrow mit Goldlinie */
.ddc-eyebrow{
display:flex;align-items:center;gap:.7rem;
font-family:var(--font-body);font-size:.74rem;font-weight:700;
letter-spacing:.22em;text-transform:uppercase;color:var(--accent-2);
margin:0 0 .9rem;
}
.ddc-eyebrow::after{content:"";flex:1;height:3px;min-width:2rem;background:var(--gold-line);border-radius:2px}
.ddc-eyebrow--center{justify-content:center}
.ddc-eyebrow--center::after{display:none}
/* Lesbare Zeilenlänge: Fließtext bleibt bei ~72 Zeichen, Layoutblöcke bleiben breit */
.ddc-section > .ddc-container > p,
.ddc-overview__inner{max-width:72ch}
.ddc-lede{font-size:clamp(1.08rem,1rem + .4vw,1.28rem);color:var(--text-muted);max-width:66ch}
.ddc-muted{color:var(--text-muted)}
.ddc-fine{font-size:.83rem;line-height:1.6;color:var(--text-muted)}
/* Magazine-Asymmetrie: 2fr/1fr Redaktionsraster */
.ddc-layout{display:grid;gap:clamp(1.5rem,3.5vw,3rem);align-items:start}
@media(min-width:1000px){
.ddc-layout{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.ddc-layout--flip > :first-child{order:2}
}
.ddc-layout > *{min-width:0}
/* Redaktioneller Zweispalter + Drop-Cap */
.ddc-editorial > h2 + p::first-letter{
font-family:var(--font-head);font-weight:900;color:var(--accent-2);
float:inline-start;font-size:3.4em;line-height:.82;
margin-inline-end:.09em;margin-block-start:.06em;
text-shadow:var(--magenta-halo);
}
.ddc-quote{
border:0;border-inline-start:3px solid var(--accent);
margin:var(--sp-blk) 0;padding:.2rem 0 .2rem 1.15rem;
font-family:var(--font-head);font-style:italic;font-size:1.18rem;line-height:1.5;
}
.ddc-quote cite{display:block;margin-top:.55rem;font-family:var(--font-body);font-style:normal;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.ddc-quote cite a{color:var(--accent-2);text-decoration:underline;text-underline-offset:2px}
/* ---------- Icons ---------- */
.ddc-icon{width:1.5em;height:1.5em;display:inline-block;vertical-align:middle;flex-shrink:0;stroke:currentColor;fill:none}
.ddc-icon--lg{width:2rem;height:2rem}
.ddc-icon--accent{color:var(--accent-2)}
/* ---------- Buttons ---------- */
.ddc-btn{
display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
min-height:48px;padding:.78rem 1.6rem;
font-family:var(--font-body);font-size:1rem;font-weight:700;letter-spacing:.01em;
border:0;border-radius:var(--r-md);cursor:pointer;text-decoration:none;
background:var(--cta-grad);color:var(--text-main);
box-shadow:0 6px 20px -10px rgba(232,0,124,.6);
transition:box-shadow .18s ease,transform .18s ease,filter .18s ease;
}
.ddc-btn:hover{box-shadow:0 0 0 1px rgba(232,0,124,.35),0 0 26px rgba(232,0,124,.42),0 10px 26px -12px rgba(232,0,124,.6);transform:translateY(-1px)}
.ddc-btn:active{transform:translateY(0)}
.ddc-btn--ghost{
background:transparent;color:var(--accent-2);
box-shadow:inset 0 0 0 1.5px var(--accent-2);
}
.ddc-btn--ghost:hover{background:var(--magenta-soft);box-shadow:inset 0 0 0 1.5px var(--accent-2),0 0 20px rgba(232,0,124,.25)}
.ddc-btn--sm{min-height:42px;padding:.5rem 1.05rem;font-size:.9rem;border-radius:var(--r-sm)}
.ddc-btn--wide{width:100%}
/* ---------- Header ---------- */
.ddc-header{
position:sticky;top:0;z-index:1000;
background:rgba(251,246,240,.94);
backdrop-filter:saturate(140%) blur(10px);
border-bottom:1px solid var(--border);
}
.ddc-header__bar{
display:flex;align-items:center;gap:clamp(.5rem,2vw,1.4rem);
min-height:var(--hdr-h);
padding-block:.55rem;
}
.ddc-header__bar > *{min-width:0}
.ddc-logo{display:inline-flex;align-items:center;flex-shrink:0;text-decoration:none;gap:.55rem}
.ddc-logo__img{height:40px;width:auto;max-width:min(45vw,190px);object-fit:contain;display:block}
.ddc-logo__text{font-family:var(--font-head);font-weight:900;font-size:1.5rem;letter-spacing:-.02em;color:var(--text-main)}
.ddc-logo__text em{font-style:normal;color:var(--accent-2);text-shadow:var(--magenta-halo)}
.ddc-nav{margin-inline-start:auto}
.ddc-nav ul{display:flex;align-items:center;gap:clamp(.4rem,1.4vw,1.35rem);list-style:none;margin:0;padding:0}
.ddc-nav li{margin:0}
.ddc-nav a:not(.ddc-btn){
display:block;padding:.55rem .25rem;text-decoration:none;
font-size:.94rem;font-weight:600;color:var(--text-main);
position:relative;transition:color .16s ease;
}
.ddc-nav a:not(.ddc-btn)::after{
content:"";position:absolute;left:.25rem;right:.25rem;bottom:.28rem;height:2px;
background:var(--accent-2);border-radius:2px;transform:scaleX(0);transform-origin:left;
transition:transform .18s ease;
}
.ddc-nav a:not(.ddc-btn):hover{color:var(--accent-2)}
.ddc-nav a:not(.ddc-btn):hover::after,
.ddc-nav a:not(.ddc-btn):focus-visible::after,
.ddc-nav a:not(.ddc-btn)[aria-current="page"]::after{transform:scaleX(1)}
.ddc-nav > .ddc-btn{display:none}
/* Grouped submenu hooks (unused on this site, kept consistent) */
.ddc-nav__group{position:relative}
.ddc-submenu{display:none;position:absolute;top:100%;inset-inline-start:0;min-width:230px;z-index:1000;
list-style:none;margin:0;padding:.5rem;background:var(--bg-card);
border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-card)}
.ddc-nav__group:hover .ddc-submenu,.ddc-nav__group:focus-within .ddc-submenu{display:block}
.ddc-nav__toggle{display:none;background:none;border:0;cursor:pointer;color:inherit;font-size:.8rem;padding:.4rem}
.ddc-header__cta{flex-shrink:0}
.ddc-burger{
display:none;flex-shrink:0;
width:44px;height:44px;padding:0;margin-inline-start:auto;
align-items:center;justify-content:center;flex-direction:column;gap:5px;
background:transparent;border:1px solid var(--border);border-radius:var(--r-sm);cursor:pointer;
}
.ddc-burger span{display:block;width:22px;height:2px;background:var(--text-main);border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.ddc-header.is-open .ddc-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.ddc-header.is-open .ddc-burger span:nth-child(2){opacity:0}
.ddc-header.is-open .ddc-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:1120px){
.ddc-burger{display:flex}
.ddc-nav{display:none;margin-inline-start:0}
.ddc-header.is-open .ddc-nav{
display:flex;position:absolute;left:0;right:0;top:100%;
background:var(--bg-card);border-block:1px solid var(--border);
box-shadow:var(--shadow-card);padding:1rem var(--gutter) 1.35rem;
}
.ddc-header.is-open .ddc-nav ul{flex-direction:column;align-items:stretch;gap:0;width:100%}
.ddc-nav a:not(.ddc-btn){padding:.85rem .2rem;border-bottom:1px solid var(--border);font-size:1.02rem}
.ddc-nav a:not(.ddc-btn)::after{display:none}
.ddc-nav__toggle{display:inline-block}
.ddc-nav__group.is-open .ddc-submenu{display:block;position:static;box-shadow:none;border:0;padding-inline-start:1rem}
.ddc-nav .ddc-btn{width:100%;margin-top:1rem}
.ddc-nav > .ddc-btn{display:block;width:100%}
.ddc-header__cta{display:none}
}
@media(max-width:400px){
.ddc-logo__img{height:32px;max-width:44vw}
}
/* ---------- Hero (home) ---------- HERO_PATTERN = overlay */
.ddc-hero{position:relative;overflow:hidden}
.ddc-hero__img{display:block;width:100%;height:auto;max-height:70vh;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-lg)}
.ddc-hero__inner{position:relative;z-index:1}
.ddc-hero--home{
position:relative;
min-height:clamp(420px,60vh,620px);
display:flex;align-items:center;
background:linear-gradient(120deg,#2A0F1E 0%,#40122B 55%,#1A1016 100%);
padding-block:clamp(3rem,7vw,5rem);
}
.ddc-hero--home .ddc-hero__img{
position:absolute;inset:0;width:100%;height:100%;max-height:none;
aspect-ratio:auto;object-fit:cover;border-radius:0;z-index:0;
}
.ddc-hero--home::after{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background:linear-gradient(90deg,rgba(10,6,12,.92) 0%,rgba(14,7,16,.78) 45%,rgba(14,7,16,.5) 100%);
}
.ddc-hero--home .ddc-hero__inner{
position:relative;z-index:1;width:100%;
max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);
color:#FFF7EE;
}
.ddc-hero--home .ddc-hero__text{max-width:60ch}
.ddc-hero--home h1{color:#FFF7EE;margin-bottom:.35em}
.ddc-hero--home h1 em{font-style:normal;color:#FF2E9A;text-shadow:var(--magenta-halo),0 0 6px rgba(232,0,124,.5)}
.ddc-hero--home .ddc-eyebrow{color:var(--accent)}
.ddc-hero--home .ddc-eyebrow::after{background:linear-gradient(90deg,var(--accent) 0%,rgba(255,219,106,0) 100%)}
.ddc-hero__sub{font-size:clamp(1.03rem,.98rem + .45vw,1.3rem);color:rgba(255,247,238,.86);margin-bottom:1.6rem;max-width:56ch}
.ddc-hero__actions{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center}
.ddc-hero--home .ddc-btn--ghost{color:#FFF7EE;box-shadow:inset 0 0 0 1.5px rgba(255,247,238,.55)}
.ddc-hero--home .ddc-btn--ghost:hover{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1.5px var(--accent)}
.ddc-hero__meta{display:flex;flex-wrap:wrap;gap:.5rem .7rem;margin-top:1.4rem;font-size:.85rem;color:rgba(255,247,238,.75)}
/* 18+ Chip in Gold */
.ddc-chip{
display:inline-flex;align-items:center;gap:.4rem;
padding:.3rem .8rem;border-radius:999px;
font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
background:var(--accent);color:var(--text-main);
}
/* Outline-Chip: auf hellem Grund lesbar (Gold auf Weiß = 1.34), Gold nur auf dunklem Grund */
.ddc-chip--outline{background:transparent;color:var(--text-main);box-shadow:inset 0 0 0 1.5px var(--accent-2)}
.ddc-hero--home .ddc-chip--outline,
.ddc-cta .ddc-chip--outline,
.ddc-footer .ddc-chip--outline{color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent)}
/* ---------- Hero (inner) = kompakter Kolumnentitel ---------- */
.ddc-hero--inner{
position:relative;overflow:hidden;
min-height:180px;display:flex;align-items:center;
padding-block:clamp(1.5rem,3.5vw,2.4rem);
border-radius:0;
background:linear-gradient(115deg,#FFF6EC 0%,#F7E7DA 60%,#F3DCE9 100%);
border-bottom:1px solid var(--border);
}
.ddc-hero--inner .ddc-hero__inner{
position:relative;z-index:1;width:100%;
padding-inline:max(var(--gutter),calc((100% - var(--wrap))/2 + var(--gutter)));
}
.ddc-hero--inner h1{margin-bottom:.2em;font-size:clamp(1.8rem,1.3rem + 2vw,3rem)}
.ddc-hero--inner .ddc-hero__sub{color:var(--text-muted);margin-bottom:0;max-width:62ch}
.ddc-hero--inner .ddc-hero__img{
position:absolute;inset:0;width:100%;height:100%;max-height:none;
aspect-ratio:auto;object-fit:cover;border-radius:0;z-index:0;
}
.ddc-hero--inner:has(.ddc-hero__img) .ddc-hero__inner::after{
content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(90deg,rgba(12,7,14,.9) 0%,rgba(12,7,14,.7) 55%,rgba(12,7,14,.5) 100%);
}
.ddc-hero--inner:has(.ddc-hero__img) h1,
.ddc-hero--inner:has(.ddc-hero__img) .ddc-hero__sub,
.ddc-hero--inner:has(.ddc-hero__img) .ddc-breadcrumb,
.ddc-hero--inner:has(.ddc-hero__img) .ddc-breadcrumb a,
.ddc-hero--inner:has(.ddc-hero__img) .ddc-eyebrow{color:#FFF7EE}
:where(.ddc-hero--inner .ddc-hero__inner > :not(.ddc-hero__img)){position:relative;z-index:2}
/* ---------- Page header (legal) ---------- */
.ddc-page-header{
position:relative;overflow:hidden;
padding-block:clamp(1.6rem,3.5vw,2.6rem);
background:linear-gradient(115deg,#FFF6EC 0%,#F6E6DA 100%);
border-bottom:1px solid var(--border);
}
.ddc-page-header h1{margin-bottom:.15em}
.ddc-page-header .ddc-hero__sub{color:var(--text-muted);margin-bottom:0}
.ddc-breadcrumb{font-size:.82rem;color:var(--text-muted);margin-bottom:.7rem}
.ddc-breadcrumb ol{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0;padding:0}
.ddc-breadcrumb li{margin:0;display:flex;align-items:center;gap:.4rem}
.ddc-breadcrumb li+li::before{content:"/";color:var(--accent-2);opacity:.7}
.ddc-breadcrumb a{color:var(--text-muted);text-decoration:none}
.ddc-breadcrumb a:hover{color:var(--accent-2);text-decoration:underline}
/* ---------- TOC ---------- */
.ddc-toc{
background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);
padding:clamp(1.1rem,2.4vw,1.6rem);box-shadow:var(--shadow-card);
}
.ddc-toc__title{font-family:var(--font-body);font-size:.78rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-2);margin:0 0 .8rem}
.ddc-toc ol{list-style:none;margin:0;padding:0;counter-reset:toc;
display:grid;gap:.2rem .9rem;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.ddc-toc li{counter-increment:toc;margin:0;min-width:0}
.ddc-toc a{
display:flex;gap:.6rem;align-items:baseline;
padding:.7rem 0;text-decoration:none;color:var(--text-main);font-weight:600;font-size:.95rem;
border-bottom:1px solid rgba(232,0,124,.1);
}
.ddc-toc a::before{content:counter(toc,decimal-leading-zero);font-family:var(--font-head);color:var(--accent-2);font-size:.85rem;flex-shrink:0}
.ddc-toc a:hover{color:var(--accent-2)}
.ddc-toc summary{cursor:pointer;list-style:none;font-weight:700}
/* ---------- Overview ---------- */
.ddc-overview__inner > :last-child{margin-bottom:0}
.ddc-overview h2{margin-bottom:.5em}
/* ---------- Feature cards → FEATURES_PATTERN = icon-rows ---------- */
.ddc-features{display:block;margin:0;padding:0;list-style:none}
.ddc-feature{
display:flex;align-items:flex-start;gap:clamp(.9rem,2vw,1.4rem);
padding-block:clamp(1.1rem,2.4vw,1.6rem);
border-bottom:1px solid var(--border);margin:0;
}
.ddc-features > .ddc-feature:first-child{padding-top:0}
.ddc-features > .ddc-feature:last-child{border-bottom:0;padding-bottom:0}
.ddc-feature > *{min-width:0}
.ddc-feature__icon{
flex-shrink:0;width:56px;height:56px;border-radius:var(--r-md);
display:flex;align-items:center;justify-content:center;
background:linear-gradient(140deg,#FFF0C4 0%,#FFDB6A 100%);
color:var(--text-main);box-shadow:0 6px 18px -12px rgba(232,0,124,.7);
}
.ddc-feature__icon .ddc-icon{width:1.7rem;height:1.7rem}
.ddc-feature__title{margin:0 0 .3em;font-family:var(--font-head);font-size:1.22rem;font-weight:700}
.ddc-feature__body{margin:0;color:var(--text-muted)}
@media(max-width:480px){
.ddc-feature__icon{width:44px;height:44px}
.ddc-feature__icon .ddc-icon{width:1.35rem;height:1.35rem}
}
/* ---------- Cards grid ---------- */
.ddc-cards{display:grid;gap:clamp(1rem,2.2vw,1.5rem);grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.ddc-cards > *{min-width:0}
.ddc-card{
background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);
padding:clamp(1.15rem,2.4vw,1.7rem);box-shadow:var(--shadow-card);
transition:box-shadow .18s ease,transform .18s ease;
}
.ddc-card:hover{box-shadow:var(--shadow-lift);transform:translateY(-2px)}
.ddc-card > :last-child{margin-bottom:0}
.ddc-card__title{margin:0 0 .45em;font-size:1.2rem}
.ddc-card__value{font-family:var(--font-head);font-size:1.9rem;font-weight:900;color:var(--accent-2);line-height:1.05;margin:0 0 .2em}
.ddc-card__label{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin:0}
/* ---------- Tables ---------- */
/* Scrollbare Tabelle: Schatten am Rand zeigt, dass seitlich noch etwas steht */
.ddc-table-wrap{overflow-x:auto;max-width:100%;margin-block:1.5rem;
border:1px solid var(--border);border-radius:var(--r-lg);
background:
linear-gradient(90deg,var(--bg-card) 40%,rgba(255,255,255,0)) 0 0,
linear-gradient(90deg,rgba(255,255,255,0),var(--bg-card) 60%) 100% 0,
radial-gradient(farthest-side at 0 50%,rgba(196,0,106,.20),rgba(196,0,106,0)) 0 0,
radial-gradient(farthest-side at 100% 50%,rgba(196,0,106,.20),rgba(196,0,106,0)) 100% 0,
var(--bg-card);
background-repeat:no-repeat;
background-size:44px 100%,44px 100%,16px 100%,16px 100%,100% 100%;
background-attachment:local,local,scroll,scroll,local;
box-shadow:var(--shadow-card);-webkit-overflow-scrolling:touch}
.ddc-table-wrap:focus-visible{outline:3px solid var(--accent-2);outline-offset:2px}
.ddc-table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:520px}
.ddc-table caption{caption-side:top;text-align:start;padding:1rem 1.1rem .4rem;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.ddc-table th{
background:var(--accent-2);color:#fff;white-space:nowrap;
font-family:var(--font-body);font-weight:700;font-size:.82rem;letter-spacing:.09em;text-transform:uppercase;
text-align:start;padding:.85rem 1.05rem;
}
.ddc-table td{padding:.85rem 1.05rem;border-top:1px solid rgba(232,0,124,.14);vertical-align:top}
.ddc-table tbody tr:nth-child(even){background:rgba(255,219,106,.10)}
.ddc-table tbody tr:hover{background:var(--magenta-soft)}
.ddc-table td:first-child{font-weight:600}
/* Payments table specifics */
.ddc-payments td:first-child{white-space:nowrap}
/* Auf Tablets drückt die nowrap-Spalte die übrigen zusammen */
@media(max-width:900px){.ddc-payments td:first-child{white-space:normal}}
.ddc-pay-name{display:flex;align-items:center;gap:.6rem;font-weight:600}
.ddc-pay-name .ddc-icon{color:var(--accent-2)}
/* ---------- Two cols + content panel ---------- */
.ddc-two-cols{display:grid;gap:clamp(1.4rem,3vw,2.6rem);align-items:start}
.ddc-two-cols > *{min-width:0}
@media(min-width:900px){
.ddc-two-cols{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr)}
.ddc-two-cols--flip > :first-child{order:2}
}
.ddc-two-cols__text > :last-child{margin-bottom:0}
.ddc-panel{
background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);
padding:clamp(1.15rem,2.4vw,1.65rem);box-shadow:var(--shadow-card);
position:sticky;top:calc(var(--hdr-h) + 1rem);
}
@media(max-width:899px){.ddc-panel{position:static}}
.ddc-panel > :last-child{margin-bottom:0}
.ddc-panel__title{
margin:0 0 1rem;font-family:var(--font-body);font-size:.76rem;font-weight:700;
letter-spacing:.2em;text-transform:uppercase;color:var(--accent-2);
display:flex;align-items:center;gap:.55rem;
}
.ddc-panel__title::after{content:"";flex:1;height:3px;background:var(--gold-line);border-radius:2px}
.ddc-facts{margin:0;display:grid;gap:0}
.ddc-facts__row{
display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem 1rem;
padding:.65rem 0;border-bottom:1px solid rgba(232,0,124,.14);
}
.ddc-facts__row:last-child{border-bottom:0;padding-bottom:0}
.ddc-facts dt{font-size:.88rem;color:var(--text-muted);margin:0}
.ddc-facts dd{margin:0;font-weight:700;text-align:end}
.ddc-checklist{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.ddc-checklist li{display:flex;align-items:flex-start;gap:.6rem;margin:0;font-size:.95rem}
.ddc-checklist .ddc-icon{color:var(--accent-2);margin-top:.15em}
.ddc-stat-tiles{display:grid;gap:.65rem;grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr))}
.ddc-stat-tiles > *{min-width:0}
.ddc-stat-tile{background:linear-gradient(160deg,#FFF9EE 0%,#FFF 100%);border:1px solid var(--border);border-radius:var(--r-md);padding:.85rem .9rem}
.ddc-stat-tile b{display:block;font-family:var(--font-head);font-size:1.45rem;font-weight:900;color:var(--text-main);line-height:1.1}
.ddc-stat-tile span{display:block;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-top:.2rem}
.ddc-score{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap}
.ddc-score__num{font-family:var(--font-head);font-size:2.6rem;font-weight:900;line-height:1;color:var(--accent-2);text-shadow:var(--magenta-halo)}
.ddc-score__stars{display:flex;gap:.15rem;color:var(--accent)}
.ddc-score__stars .ddc-icon{width:1.1rem;height:1.1rem;fill:currentColor}
.ddc-score__label{font-size:.82rem;color:var(--text-muted);width:100%}
/* Experten-Rating-Strip */
.ddc-ratings{display:flex;flex-wrap:wrap;gap:.6rem .9rem;align-items:center;
padding:.85rem 1rem;background:var(--bg-card);border:1px solid var(--border);
border-radius:var(--r-md);box-shadow:var(--shadow-card);font-size:.88rem}
/* Schmal: als Liste statt umbrechender Flex-Zeile — das Icon zentrierte sich sonst
über den ganzen Block und die Angaben rutschten unmotiviert nebeneinander. */
@media(max-width:640px){
.ddc-ratings{
display:grid;grid-template-columns:auto minmax(0,1fr);
gap:.55rem .6rem;align-items:start;justify-items:start;
padding:.9rem 1rem;
}
.ddc-ratings > .ddc-icon{grid-column:1;grid-row:1;margin-top:.1em}
.ddc-ratings > :not(.ddc-icon){grid-column:2;min-width:0}
.ddc-ratings > span:not(.ddc-chip){display:block;width:100%}
/* Trennlinie oben statt unten — so bleibt am Ende der Liste keine lose Kante */
.ddc-ratings > span:not(.ddc-chip) + span:not(.ddc-chip){
padding-top:.5rem;border-top:1px solid var(--border);
}
.ddc-ratings b{display:inline-block}
}
.ddc-ratings a{color:var(--accent-2);text-decoration:underline;text-underline-offset:2px}
.ddc-ratings b{font-family:var(--font-head);font-size:1.05rem}
/* ---------- Numbered list ---------- */
.ddc-steps{list-style:none;counter-reset:step;margin:0;padding:0;display:grid;gap:clamp(.9rem,2vw,1.35rem)}
.ddc-steps > li{
counter-increment:step;position:relative;margin:0;
padding:1.05rem 1.2rem 1.05rem 3.9rem;
background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);
box-shadow:var(--shadow-card);
}
.ddc-steps > li::before{
content:counter(step,decimal-leading-zero);
position:absolute;inset-inline-start:1.1rem;top:1rem;
font-family:var(--font-head);font-weight:900;font-size:1.5rem;line-height:1;
color:var(--accent-2);text-shadow:var(--magenta-halo);
}
.ddc-steps h3{font-size:1.1rem;margin:0 0 .3em}
.ddc-steps p{margin:0;color:var(--text-muted)}
.ddc-steps > li > :last-child{margin-bottom:0}
/* ---------- Stats bar → STATS_PATTERN = counters ---------- */
.ddc-stats{display:grid;gap:clamp(1.3rem,3.5vw,2.6rem);
grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));
text-align:center;padding-block:.5rem}
.ddc-stats > *{min-width:0}
.ddc-stat{margin:0}
.ddc-stat__value{
display:block;font-family:var(--font-head);font-weight:900;
font-size:clamp(2.2rem,5vw,3.5rem);line-height:1;color:var(--accent-2);
letter-spacing:-.02em;
}
.ddc-stat__label{display:block;margin-top:.5rem;font-size:.76rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted)}
/* ---------- Categories bar ---------- */
.ddc-cats{display:flex;flex-wrap:wrap;gap:.55rem;list-style:none;margin:0;padding:0}
.ddc-cats li{margin:0}
.ddc-cats a,.ddc-cats span{
display:inline-flex;align-items:center;gap:.4rem;min-height:40px;
padding:.45rem 1rem;border-radius:999px;text-decoration:none;
font-size:.9rem;font-weight:600;color:var(--text-main);
background:var(--bg-card);border:1px solid var(--border);
transition:background .16s ease,color .16s ease,box-shadow .16s ease;
}
.ddc-cats a:hover{background:var(--accent-2);color:#fff;border-color:var(--accent-2);box-shadow:0 0 18px rgba(232,0,124,.3)}
/* ---------- Reviews ---------- */
.ddc-reviews{display:grid;gap:clamp(1rem,2.2vw,1.5rem);grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.ddc-reviews > *{min-width:0}
.ddc-review{
background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);
padding:clamp(1.1rem,2.4vw,1.6rem);box-shadow:var(--shadow-card);
border-inline-start:3px solid var(--accent);
}
.ddc-review blockquote{margin:0 0 .8rem;font-family:var(--font-head);font-style:italic;font-size:1.1rem;line-height:1.45}
.ddc-review__trans{display:block;margin-top:.5rem;font-family:var(--font-body);font-style:italic;font-size:.92rem;color:var(--text-muted)}
.ddc-review__src{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin:0}
.ddc-review__src a{color:var(--accent-2);text-decoration:underline;text-underline-offset:2px}
/* ---------- RTP / Slot grid ---------- */
.ddc-rtp{display:grid;gap:clamp(.6rem,1.5vw,1rem);grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:640px){.ddc-rtp{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:960px){.ddc-rtp{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ddc-rtp-item{position:relative;overflow:hidden;min-width:0;border-radius:var(--r-lg);
background:var(--bg-card);border:1px solid var(--border);box-shadow:var(--shadow-card);
transition:box-shadow .18s ease,transform .18s ease}
.ddc-rtp-item:hover{box-shadow:var(--shadow-lift);transform:translateY(-2px)}
.ddc-rtp-item__thumb{aspect-ratio:3/2;position:relative;overflow:hidden;
background:linear-gradient(140deg,#F7E7DA 0%,#F3DCE9 55%,#FFF0C4 100%)}
.ddc-rtp-item__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ddc-rtp-item__name{margin:0;padding:.6rem .75rem .7rem;font-size:.9rem;font-weight:600;line-height:1.3}
.ddc-rtp-tooltip{
position:absolute;bottom:0;left:0;right:0;opacity:0;transition:opacity .2s ease;
padding:.6rem .7rem;background:linear-gradient(0deg,rgba(12,7,14,.94) 0%,rgba(12,7,14,.72) 100%);
color:#FFF7EE;font-size:.8rem;line-height:1.4;
}
.ddc-rtp-item:hover .ddc-rtp-tooltip,.ddc-rtp-item:focus-within .ddc-rtp-tooltip{opacity:1}
.ddc-rtp-tooltip b{color:var(--accent)}
/* ---------- FAQ → FAQ_PATTERN = two-col ---------- */
.ddc-faq{display:grid;gap:0 clamp(1.5rem,3.5vw,3rem);align-items:start;grid-template-columns:1fr}
@media(min-width:900px){.ddc-faq{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ddc-faq > *{min-width:0}
.ddc-faq details{border-bottom:1px solid var(--border)}
.ddc-faq summary{cursor:pointer;padding:1rem 0;font-weight:600;list-style:none;
font-family:var(--font-body);font-size:1.02rem;display:flex;align-items:baseline}
.ddc-faq summary::-webkit-details-marker{display:none}
.ddc-faq summary::before{content:'+';margin-right:.5rem;transition:transform .2s ease;
color:var(--accent-2);font-weight:700;font-size:1.15rem;line-height:1}
.ddc-faq details[open] summary::before{content:'−'}
.ddc-faq details > :not(summary){padding:.5rem 0 1rem;color:var(--text-muted)}
.ddc-faq details > :not(summary):last-child{margin-bottom:0}
/* ---------- Legal body ---------- */
.ddc-legal{counter-reset:legal;max-width:none}
.ddc-legal h2{counter-increment:legal;font-size:clamp(1.3rem,1.1rem + .9vw,1.75rem);margin-top:2.2em}
.ddc-legal h2:first-child{margin-top:0}
.ddc-legal h2::before{
content:counter(legal) ". ";color:var(--accent-2);font-family:var(--font-head);
}
.ddc-legal h3{margin-top:1.6em;font-size:1.15rem}
.ddc-legal p,.ddc-legal li{color:var(--text-main)}
.ddc-legal a{color:var(--accent-2);text-decoration:underline;text-underline-offset:2px}
.ddc-legal dl{margin:0 0 1.2em}
.ddc-legal dt{font-weight:700;margin-top:.8em}
.ddc-legal dd{margin:0 0 .4em}
/* ---------- CTA block ---------- */
.ddc-cta{
padding-block:var(--sp-sec);
background:linear-gradient(115deg,#1A1016 0%,#3A0F27 55%,#1A1016 100%);
position:relative;overflow:hidden;
}
.ddc-cta::before{
content:"";position:absolute;inset-inline-end:-10%;top:-40%;width:60%;height:180%;
background:radial-gradient(closest-side,rgba(232,0,124,.35),transparent 70%);
pointer-events:none;
}
.ddc-cta__inner{
position:relative;z-index:1;
display:flex;flex-direction:column;gap:1.05rem;align-items:center;text-align:center;
}
.ddc-cta h2{color:#FFF7EE;margin:0;max-width:24ch}
.ddc-cta h2 em{font-style:normal;color:#FF2E9A;text-shadow:var(--magenta-halo)}
.ddc-cta p{color:rgba(255,247,238,.82);margin:0;max-width:62ch}
.ddc-cta .ddc-eyebrow{color:var(--accent);margin:0;justify-content:center}
.ddc-cta .ddc-eyebrow::after{display:none}
.ddc-cta__actions{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center;margin:0}
.ddc-cta__fine{font-size:.8rem;color:rgba(255,247,238,.62);margin:0;max-width:66ch}
/* ---------- Footer ---------- */
.ddc-footer{
background:linear-gradient(180deg,#1A1016 0%,#221019 100%);
color:rgba(255,247,238,.78);
padding-block:clamp(2.5rem,5vw,3.75rem) 1.5rem;
margin-top:0;
font-size:.94rem;
}
.ddc-footer__top{
display:grid;gap:clamp(1.6rem,3.5vw,2.6rem);
grid-template-columns:1fr;
}
@media(min-width:820px){
.ddc-footer__top{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr)}
}
.ddc-footer__top > *{min-width:0}
.ddc-footer .ddc-logo{margin-bottom:.9rem}
.ddc-footer .ddc-logo__text{color:#FFF7EE}
.ddc-footer__about{margin:0 0 1rem;color:rgba(255,247,238,.7);max-width:46ch}
.ddc-footer__title{
font-family:var(--font-body);font-size:.74rem;font-weight:700;letter-spacing:.2em;
text-transform:uppercase;color:var(--accent);margin:0 0 .9rem;
}
.ddc-footer ul{list-style:none;margin:0;padding:0}
.ddc-footer li{margin:0 0 .55rem}
.ddc-footer a{color:rgba(255,247,238,.8);text-decoration:none}
.ddc-footer a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ddc-footer__chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.4rem}
.ddc-footer__help{margin:0;color:rgba(255,247,238,.7)}
.ddc-footer__help a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.ddc-footer__disclaimer{
margin-top:clamp(1.8rem,4vw,2.6rem);padding-top:1.4rem;
border-top:1px solid rgba(255,219,106,.22);
font-size:.82rem;line-height:1.65;color:rgba(255,247,238,.62);
}
.ddc-footer__disclaimer p{margin:0 0 .7rem}
.ddc-footer__bottom{
display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;justify-content:space-between;align-items:center;
margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid rgba(255,247,238,.12);
font-size:.8rem;color:rgba(255,247,238,.55);
}
.ddc-footer__bottom p{margin:0}
/* ---------- Utilities ---------- */
.ddc-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ddc-skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:2000;background:var(--accent);color:var(--text-main);padding:.7rem 1.1rem;border-radius:0 0 var(--r-sm) 0;font-weight:700}
.ddc-skip:focus{inset-inline-start:0}
main[tabindex="-1"]:focus{outline:none} /* Ziel des Skip-Links, kein Rahmen um die ganze Seite */
.ddc-center{text-align:center}
.ddc-mt-0{margin-top:0}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
.ddc-btn:hover,.ddc-card:hover,.ddc-rtp-item:hover{transform:none}
}
/* sa-responsive-net */
table th{white-space:nowrap}
figure,blockquote,dl,dd,fieldset{margin:0}
/* sa-logo-chip */
.ddc-footer .ddc-logo__img{filter:none;background:transparent;padding:0}
.ddc-footer .ddc-footer__logo-chip{background:transparent;padding:0}
/* sa-logo-fit */
.ddc-logo__img{object-fit:contain}
/* sa-ph-media */
.ddc-page-header:has(.ddc-hero__img){position:relative;overflow:hidden;isolation:isolate;min-height:clamp(200px,30vh,300px);display:flex;flex-direction:column;justify-content:center}
.ddc-page-header:has(.ddc-hero__img) .ddc-hero__img{position:absolute;inset:0;width:100%;height:100%;max-height:none;aspect-ratio:auto;object-fit:cover;margin:0;z-index:0}
.ddc-page-header:has(.ddc-hero__img)::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,12,18,.72),rgba(10,12,18,.5))}
:where(.ddc-page-header:has(.ddc-hero__img)>:not(.ddc-hero__img)){position:relative}
.ddc-page-header:has(.ddc-hero__img)>:not(.ddc-hero__img){z-index:2}
.ddc-page-header:has(.ddc-hero__img),.ddc-page-header:has(.ddc-hero__img) h1,.ddc-page-header:has(.ddc-hero__img) a,.ddc-page-header:has(.ddc-hero__img) p,.ddc-page-header:has(.ddc-hero__img) li,.ddc-page-header:has(.ddc-hero__img) span{color:#fff}
/* sa-hero-media */
.ddc-hero:has(>.ddc-hero__img){position:relative;isolation:isolate}
.ddc-hero:has(>.ddc-hero__img)>.ddc-hero__img{z-index:0}
.ddc-hero:has(>.ddc-hero__img)::after{z-index:1}
:where(.ddc-hero:has(>.ddc-hero__img)>:not(.ddc-hero__img)){position:relative}
.ddc-hero:has(>.ddc-hero__img)>:not(.ddc-hero__img){z-index:2}
/* sa-rhythm */
:where(.ddc-table-wrap){margin-block:1.5rem}
:where(main) :where(ul,ol,table,.ddc-table-wrap)+p{margin-block-start:1rem}
/* sa-slot-link */
.ddc-rtp-item,.ddc-rtp-item:hover,.ddc-rtp-item:focus{color:inherit;text-decoration:none;cursor:pointer}
/* ---------- Abstände & Touch (Review-Fixes) ---------- */
/* Buttons in einem Absatz: klebten mit ~4px (HTML-Leerzeichen) aneinander */
p:has(> .ddc-btn){display:flex;flex-wrap:wrap;gap:.85rem;align-items:center}
/* Absatz direkt nach einem Block-Container: die haben margin:0, der Text klebte an der Karte */
:where(.ddc-steps,.ddc-toc,.ddc-table-wrap,.ddc-faq,.ddc-cards,.ddc-reviews,.ddc-two-cols,.ddc-stat-tiles) + p{margin-top:clamp(1.25rem,2.5vw,1.75rem)}
:where(.ddc-steps,.ddc-toc,.ddc-table-wrap,.ddc-faq,.ddc-cards,.ddc-reviews,.ddc-two-cols,.ddc-stat-tiles) + p.ddc-mt-0{margin-top:clamp(1.25rem,2.5vw,1.75rem)}
/* Einzelne Review-Karte auf Textbreite halten — sonst 1216px Karte über 72ch-Text */
.ddc-reviews:has(> :only-child){max-width:72ch}
.ddc-footer__chips{margin-top:.85rem}
@media(max-width:768px){
/* Overlay war 90deg (Desktop-Textspalte links); mobil steht Text über der hellen Bildhälfte */
.ddc-hero--home::after{background:linear-gradient(180deg,rgba(10,6,12,.74) 0%,rgba(12,7,16,.90) 100%)}
.ddc-hero--inner:has(.ddc-hero__img) .ddc-hero__inner::after{background:linear-gradient(180deg,rgba(12,7,14,.72),rgba(12,7,14,.90))}
}
@media(max-width:767px){
.ddc-eyebrow{font-size:.8rem;letter-spacing:.16em}
.ddc-fine,.ddc-footer__disclaimer{font-size:.88rem}
.ddc-footer__bottom{font-size:.85rem}
.ddc-footer li{margin-bottom:.3rem}
.ddc-footer li a{display:inline-block;padding-block:.4rem}
.ddc-breadcrumb a{display:inline-block;padding-block:.3rem}
.ddc-ratings{gap:.75rem .9rem}
}
@media(max-width:480px){
.ddc-steps > li{padding-inline-start:2.9rem}
.ddc-steps > li::before{font-size:1.25rem;inset-inline-start:.9rem}
}
/* Tabellen auf schmalen Viewports als Karten: bei min-width 520px war auf 320px nur
die erste Spalte sichtbar, die Zeilen wurden 200px hoch — es sah kaputt aus.
Spaltentitel kommen aus data-label (im Markup gesetzt), thead wird versteckt. */
@media(max-width:640px){
.ddc-table-wrap{
overflow-x:visible;border:0;border-radius:0;box-shadow:none;
background:none;margin-block:1.25rem;
}
.ddc-table{min-width:0;width:100%;display:block;font-size:1rem}
/* display:block an der Tabelle lässt table-caption auf min-content schrumpfen */
.ddc-table caption{display:block;width:100%;padding:0 0 .8rem}
.ddc-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ddc-table tbody,.ddc-table tr,.ddc-table td{display:block;width:100%}
.ddc-table tbody tr{
background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md);
box-shadow:var(--shadow-card);padding:.9rem 1rem;margin-bottom:.85rem;
}
.ddc-table tbody tr:last-child{margin-bottom:0}
.ddc-table tbody tr:nth-child(even),
.ddc-table tbody tr:hover{background:var(--bg-card)}
.ddc-table td{border-top:0;padding:.5rem 0 0}
.ddc-table td::before{
content:attr(data-label);display:block;
font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
color:var(--accent-2);margin-bottom:.15rem;
}
/* erste Zelle = Kartentitel, Label dort überflüssig */
.ddc-table td:first-child{
padding-top:0;padding-bottom:.6rem;margin-bottom:.35rem;
border-bottom:1px solid var(--border);
font-family:var(--font-head);font-size:1.15rem;font-weight:700;line-height:1.25;
}
.ddc-table td:first-child::before{display:none}
.ddc-payments td:first-child,.ddc-table th{white-space:normal}
.ddc-pay-name{font-weight:700}
}
@media(max-width:380px){
.ddc-hero__actions .ddc-btn,.ddc-cta__actions .ddc-btn,p:has(> .ddc-btn) .ddc-btn{width:100%}
}