/*
* Discovery Panel Core — Frontend Design System
* Datei: assets/css/frontend.css
*
* Gliederung:
* 2. Design Tokens (:root CSS Custom Properties)
* 2b. Basis-Typografie (.dp-layout-home — Schriften, Hierarchie)
* 3. Utilities (.dp-balance, .dp-notice)
* 25. Rev 36 (Featured Cards, Excerpts, Memory, Closing Section)
* 26. Rev 37 (WP/GP Theme-Reste, Logo-Polish, Mikro-UX, Mobile)
* 27. Rev 38 ([dp_homepage] Wrapper-Alias, Full-Bleed, Typografie-Scope)
* 28. Rev 39/40 (Hero-Neustart, Interaction Strip, Cards, GP-Kompatibilität, Kontrast)
* 29. Rev 43/48 (Grafik-Assets, Warmth; Sternfeld-Strip entfernt)
* 32. Rev 48 (Warm Magazine Reset: Hero-Stage-Layout, Cover-Quadrat, Logo 200px, HP-Footer warm)
* 34. Rev 52 (dp_episode Einzelseiten-Template: Hero, Hauptspalte, Sidebar)
* 35. Rev 57 (Hero-Verfeinerung: Warmth, Player-Höhe, Hierarchie, Kartenlook)
* 36. Rev 58 (Homepage-Sektionen vereinheitlicht: Eyebrows, Strip, Karten, Memory)
* 37. Rev 59 (Desktop-Nav Member-Dropdown: Trigger, Dropdown, Ausgeloggt-Gruppe)
* 43. Rev 70 (Keep us connected…: Landingpage [dp_game_page], Homepage Game-Panel)
* 35. Rev 74 (Hero-Player: Script-Embed-Wrapper dp-hero-stage__player-embed, dynamische Höhe)
* 38. Rev 81 (Homepage Großer Wurf: Cover-Höhe, Player-Spalte, fixed Podigee URL,
* Rail 2/3+1/3, Reels-Panel, Scroll-Arrow, Neue Folgen Podcast-Grid)
* 40. Rev 85 (Vertikales Dropdown: L1→L2→L3, keine Flyouts, Ebenenfarben, Chevrons)
* 41. Rev 87 (DP Standard Sidebar: Am meisten gewünscht + Beliebte Episoden)
* 44. Rev 92 (Standard-Seiten: Inhalt-Karte, Typografie, Kommentare warmem Magazinstil)
* Entfernt (Rev 48 Reset):
* Section 30 (Rev 44): dp-hero-post__* — Markup nicht mehr aktiv
* Section 31 (Rev 45): dp-hero-tile — Markup nicht mehr aktiv
* Section 32 alt (Rev 46): Dark Stage Hero (Navy, Sternfeld, Glassmorphism)
* Section 33 (Rev 47): Illustrated Dark Editorial (dunkle Gesamtseite)
*
* 4. Buttons (.dp-btn)
* 5. Cards (.dp-card)
* 6. Poll-Block (.dp-poll)
* 7. Episode-Block (.dp-episode)
* 8. Ranking (.dp-ranking)
* 9. Community-Boxen (.dp-community-box, .dp-support-box, .dp-social-box)
*
* Keine externen Abhängigkeiten. Kein Reset. Kein Framework.
* Fonts: Figtree (Sans) und Bitter (Serif) werden von GeneratePress geladen.
* Keine @font-face-Definitionen in diesem Plugin — GP verwaltet die Schriften zentral.
*/
/* =========================================================================
2. Design Tokens — CSS Custom Properties
========================================================================= */
:root {
/* --- Markenfarben --- */
--dp-primary: #304a98;
--dp-primary-dark: #233878;
--dp-primary-light: #4a66c0;
--dp-primary-subtle: #eff2fd;
--dp-accent: #cf1682;
--dp-accent-dark: #a8106a;
--dp-accent-light: #e83d9f;
--dp-accent-subtle: #fdf0f8;
/* --- Neutral Scale (hell → dunkel) --- */
--dp-n-0: #ffffff;
--dp-n-50: #f7f8fb;
--dp-n-100: #eef0f6;
--dp-n-200: #dde1ee;
--dp-n-300: #c3cade;
--dp-n-400: #9aa4c4;
--dp-n-500: #697491;
--dp-n-600: #4a5270;
--dp-n-700: #303652;
--dp-n-800: #1c2038;
--dp-n-900: #0d1020;
/* --- Semantische Farb-Aliases --- */
--dp-text: var(--dp-n-800);
--dp-text-muted: var(--dp-n-500);
--dp-text-inverse: var(--dp-n-0);
--dp-bg: var(--dp-n-0);
--dp-bg-subtle: var(--dp-n-50);
--dp-border: var(--dp-n-200);
--dp-border-strong: var(--dp-n-300);
/* --- Zustandsfarben --- */
--dp-success: #1a7f37;
--dp-success-bg: #f0fdf4;
--dp-error: #c0392b;
--dp-error-bg: #fef2f2;
--dp-gold: #c9a227;
--dp-silver: #9e9e9e;
--dp-bronze: #a0522d;
/* --- Typografie — Font Stacks ---
Figtree (Sans) und Bitter (Serif) werden von GeneratePress geladen.
GP erzeugt CSS-Variablen var(--gp-font--figtree) / var(--gp-font--bitter).
Wir nutzen diese direkt — kein @font-face nötig. */
--dp-font-body: var(--gp-font--figtree, 'Figtree', system-ui, sans-serif);
--dp-font-headline: var(--gp-font--figtree, 'Figtree', system-ui, sans-serif);
--dp-font-serif: var(--gp-font--bitter, 'Bitter', Georgia, serif);
--dp-font-ui: var(--gp-font--figtree, 'Figtree', system-ui, sans-serif);
--dp-font-mono: ui-monospace, 'SFMono-Regular', 'Consolas', 'Courier New', monospace;
/* --- Typografie — Semantische Farb-Aliases --- */
--dp-text-heading: var(--dp-n-900); /* Maximaler Kontrast für Headlines */
--dp-text-body: var(--dp-n-700); /* Ruhiger für Lesetext */
/* --- Typografie — Zeilenhöhen --- */
--dp-lh-tight: 1.15; /* Display-Headlines */
--dp-lh-snug: 1.35; /* Card-Titel, H3–H4 */
--dp-lh-base: 1.65; /* Fließtext */
--dp-lh-loose: 1.80; /* Lead-Absätze */
/* --- Typografie — Letter-Spacing --- */
--dp-tracking-tight: -.030em; /* Display-Headlines */
--dp-tracking-snug: -.015em; /* H2–H3 */
--dp-tracking-normal: .010em; /* Body (leicht geöffnet) */
--dp-tracking-wide: .070em; /* Eyebrows, Labels in Caps */
/* --- Abstände --- */
--dp-sp-1: .25rem;
--dp-sp-2: .5rem;
--dp-sp-3: .75rem;
--dp-sp-4: 1rem;
--dp-sp-5: 1.25rem;
--dp-sp-6: 1.5rem;
--dp-sp-7: 1.75rem;
--dp-sp-8: 2rem;
--dp-sp-10: 2.5rem;
--dp-sp-12: 3rem;
/* --- Borders & Radien --- */
--dp-radius-sm: 4px;
--dp-radius: 8px;
--dp-radius-lg: 14px;
--dp-radius-xl: 20px;
--dp-line: 1px solid var(--dp-border);
--dp-line-strong: 1px solid var(--dp-border-strong);
/* --- Schatten-Scale --- */
--dp-shadow-sm: 0 1px 3px rgba(13,16,32,.08), 0 1px 2px rgba(13,16,32,.05);
--dp-shadow-md: 0 4px 16px rgba(13,16,32,.10), 0 2px 4px rgba(13,16,32,.05);
--dp-shadow-lg: 0 12px 40px rgba(13,16,32,.14), 0 4px 8px rgba(13,16,32,.06);
--dp-shadow-focus-primary: 0 0 0 3px rgba(48,74,152,.25);
--dp-shadow-focus-accent: 0 0 0 3px rgba(207,22,130,.25);
/* --- Flächen --- */
--dp-surface: #f5f7fc; /* leichter Blauschimmer — Section-Hintergrund */
--dp-surface-raised: #ffffff; /* Karten auf Surface */
/* --- RGB-Werte für rgba() --- */
--dp-primary-rgb: 48, 74, 152;
--dp-accent-rgb: 207, 22, 130;
/* --- Typografische Größenskala --- */
--dp-text-xs: .68rem; /* Labels, Eyebrows */
--dp-text-sm: .775rem; /* Meta, sekundärer Text */
--dp-text-base: .875rem; /* Fließtext */
--dp-text-lead: .9375rem; /* Lead-Text */
--dp-text-lg: 1.25rem; /* kleine Überschriften */
--dp-text-xl: 1.5625rem; /* Section Titles */
--dp-text-2xl: 2.0625rem; /* Section Headlines */
--dp-text-3xl: 2.75rem; /* Display */
/* --- Transitions --- */
--dp-t: 150ms ease;
--dp-t-slow: 280ms ease;
}
/* =========================================================================
2a. Global font-size override — GeneratePress defaults to 17px, we want 15px.
Our plugin CSS loads after GP's all.css, so this safely wins.
========================================================================= */
body,
button,
input,
select,
textarea {
font-size: 15px;
}
/* =========================================================================
3. Utilities
========================================================================= */
/* --- Kontostand --- */
.dp-balance {
font-family: var(--dp-font-body);
font-weight: 600;
color: var(--dp-success);
}
/* --- Notices / Feedback --- */
.dp-notice {
font-family: var(--dp-font-body);
padding: var(--dp-sp-3) var(--dp-sp-4);
margin: var(--dp-sp-4) 0;
border-left: 3px solid var(--dp-border-strong);
background: var(--dp-bg-subtle);
border-radius: 0 var(--dp-radius-sm) var(--dp-radius-sm) 0;
font-size: .9rem;
color: var(--dp-text);
}
.dp-notice p {
margin: 0;
}
.dp-notice a {
color: var(--dp-primary);
}
.dp-notice--success {
border-color: var(--dp-success);
background: var(--dp-success-bg);
color: #14532d;
}
.dp-notice--error {
border-color: var(--dp-error);
background: var(--dp-error-bg);
color: #7f1d1d;
}
.dp-notice--info {
border-color: var(--dp-primary);
background: var(--dp-primary-subtle);
color: var(--dp-primary-dark);
}
.dp-notice--warning {
border-color: #d97706;
background: #fffbeb;
color: #78350f;
}
/* =========================================================================
4. Buttons — .dp-btn
========================================================================= */
.dp-btn {
display: inline-flex;
align-items: center;
gap: var(--dp-sp-2);
padding: var(--dp-sp-3) var(--dp-sp-6);
font-family: var(--dp-font-body);
font-size: var(--dp-text-sm);
font-weight: 600;
line-height: 1.4;
letter-spacing: .025em;
text-transform: uppercase;
border: 1px solid transparent;
border-radius: var(--dp-radius);
cursor: pointer;
text-decoration: none;
transition:
background var(--dp-t),
color var(--dp-t),
border-color var(--dp-t),
box-shadow var(--dp-t),
transform var(--dp-t);
white-space: nowrap;
}
/* Primary — Accent-Farbe */
.dp-btn--primary {
background: var(--dp-accent);
color: var(--dp-text-inverse);
border-color: var(--dp-accent);
box-shadow: 0 1px 3px rgba(207,22,130,.25), 0 1px 2px rgba(207,22,130,.15);
}
.dp-btn--primary:hover {
background: var(--dp-accent-dark);
border-color: var(--dp-accent-dark);
color: var(--dp-text-inverse);
box-shadow: 0 6px 18px rgba(207,22,130,.45), 0 2px 6px rgba(207,22,130,.25);
text-decoration: none;
transform: translateY(-2px);
}
.dp-btn--primary:active {
transform: translateY(0);
box-shadow: 0 1px 3px rgba(207,22,130,.25);
}
.dp-btn--primary:focus-visible {
outline: none;
box-shadow: var(--dp-shadow-focus-accent);
}
/* Secondary — Outline */
.dp-btn--secondary {
background: transparent;
color: var(--dp-primary);
border-color: var(--dp-primary);
}
.dp-btn--secondary:hover {
background: var(--dp-primary);
color: var(--dp-text-inverse);
box-shadow: 0 6px 18px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.10);
text-decoration: none;
transform: translateY(-2px);
}
.dp-btn--secondary:active {
background: var(--dp-primary-dark);
border-color: var(--dp-primary-dark);
color: var(--dp-text-inverse);
transform: translateY(0);
box-shadow: none;
}
.dp-btn--secondary:focus-visible {
outline: none;
box-shadow: var(--dp-shadow-focus-primary);
}
/* Ghost — nur Text, kein Rahmen */
.dp-btn--ghost {
background: transparent;
color: var(--dp-text-muted);
border-color: transparent;
letter-spacing: .015em;
}
.dp-btn--ghost:hover {
color: var(--dp-primary);
background: var(--dp-primary-subtle);
text-decoration: none;
}
.dp-btn--ghost:focus-visible {
outline: none;
box-shadow: var(--dp-shadow-focus-primary);
}
/* Disabled-Zustand für alle Varianten */
.dp-btn:disabled,
.dp-btn[aria-disabled="true"] {
opacity: .4;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
/* =========================================================================
6. Poll-Block — [dp_poll] / [dp_polls]
========================================================================= */
.dp-poll {
position: relative;
background: var(--dp-bg);
border: var(--dp-line);
border-radius: var(--dp-radius-lg);
padding: var(--dp-sp-6) var(--dp-sp-6) var(--dp-sp-6) calc(var(--dp-sp-6) + 3px);
margin: var(--dp-sp-6) 0;
overflow: hidden;
}
/* Akzentlinie links — wie .dp-card--poll */
.dp-poll::before {
content: '';
position: absolute;
left: 0;
top: var(--dp-sp-5);
bottom: var(--dp-sp-5);
width: 3px;
border-radius: 0 var(--dp-radius-sm) var(--dp-radius-sm) 0;
background: var(--dp-accent);
}
.dp-poll__title {
font-family: var(--dp-font-headline);
font-size: 1.1rem;
font-weight: 700;
color: var(--dp-text);
margin: 0 0 var(--dp-sp-2);
line-height: 1.3;
}
.dp-poll__description {
font-family: var(--dp-font-body);
color: var(--dp-text-muted);
font-size: .9rem;
margin-bottom: var(--dp-sp-4);
}
.dp-poll__balance {
font-family: var(--dp-font-body);
font-size: .85rem;
color: var(--dp-text-muted);
margin-bottom: var(--dp-sp-5);
}
/* --- Optionen --- */
.dp-poll__options {
border: none;
padding: 0;
margin: 0 0 var(--dp-sp-4);
}
.dp-poll__options legend {
font-family: var(--dp-font-body);
font-weight: 600;
font-size: .85rem;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--dp-text-muted);
margin-bottom: var(--dp-sp-3);
padding: 0;
}
.dp-poll__option {
display: block;
padding: var(--dp-sp-2) 0;
cursor: pointer;
font-family: var(--dp-font-body);
font-size: .95rem;
color: var(--dp-text);
transition: color var(--dp-t);
}
.dp-poll__option:hover {
color: var(--dp-accent);
}
.dp-poll__option input[type="radio"] {
margin-right: var(--dp-sp-2);
accent-color: var(--dp-accent);
cursor: pointer;
}
/* --- Formular --- */
.dp-poll__stake {
margin: var(--dp-sp-3) 0 var(--dp-sp-5);
display: flex;
align-items: center;
gap: var(--dp-sp-3);
flex-wrap: wrap;
}
.dp-poll__stake label {
font-family: var(--dp-font-body);
font-size: .9rem;
color: var(--dp-text);
}
.dp-poll__stake input[type="number"] {
width: 6em;
padding: var(--dp-sp-2) var(--dp-sp-3);
border: var(--dp-line);
border-radius: var(--dp-radius);
font-family: var(--dp-font-body);
font-size: .9rem;
color: var(--dp-text);
background: var(--dp-bg);
transition: border-color var(--dp-t);
}
.dp-poll__stake input[type="number"]:focus {
outline: none;
border-color: var(--dp-accent);
}
.dp-poll__stake input[type="number"]:focus-visible {
outline: 2px solid var(--dp-accent-light);
outline-offset: 1px;
}
/* Submit-Button — erbt dp-btn--primary Logik */
.dp-poll__submit {
display: inline-flex;
align-items: center;
padding: var(--dp-sp-3) var(--dp-sp-5);
font-family: var(--dp-font-body);
font-size: .875rem;
font-weight: 600;
line-height: 1.4;
background: var(--dp-accent);
color: var(--dp-text-inverse);
border: 1px solid var(--dp-accent);
border-radius: var(--dp-radius);
cursor: pointer;
transition:
background var(--dp-t),
border-color var(--dp-t),
transform var(--dp-t);
}
.dp-poll__submit:hover {
background: var(--dp-accent-dark);
border-color: var(--dp-accent-dark);
}
.dp-poll__submit:active {
transform: translateY(1px);
}
.dp-poll__submit:focus-visible {
outline: 3px solid var(--dp-accent-light);
outline-offset: 2px;
}
.dp-poll__voted {
font-family: var(--dp-font-body);
font-size: .9rem;
color: var(--dp-text-muted);
font-style: italic;
}
/* --- Ergebnis-Anzeige --- */
.dp-poll__results {
margin-top: var(--dp-sp-6);
padding-top: var(--dp-sp-5);
border-top: var(--dp-line);
}
.dp-poll__results h4 {
font-family: var(--dp-font-headline);
font-size: .875rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--dp-text-muted);
margin: 0 0 var(--dp-sp-4);
}
.dp-poll__results-list {
list-style: none;
padding: 0;
margin: 0;
}
.dp-poll__result-item {
margin-bottom: var(--dp-sp-4);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--dp-sp-2);
}
.dp-poll__result-label {
min-width: 10em;
font-family: var(--dp-font-body);
font-weight: 600;
font-size: .9rem;
color: var(--dp-text);
}
/* width-Attribut bleibt inline (dynamisch); alle anderen Styles hier */
.dp-poll__result-bar {
display: inline-block;
height: 8px;
min-width: 2px;
background: var(--dp-accent);
border-radius: var(--dp-radius-sm);
vertical-align: middle;
transition: width var(--dp-t-slow);
}
.dp-poll__result-stats {
font-family: var(--dp-font-body);
font-size: .8rem;
color: var(--dp-text-muted);
}
.dp-poll__result-total {
font-family: var(--dp-font-body);
color: var(--dp-text-muted);
font-size: .8rem;
margin-top: var(--dp-sp-3);
}
/* =========================================================================
7. Episode-Block — [dp_episode]
========================================================================= */
.dp-episode {
position: relative;
background: var(--dp-bg);
border: var(--dp-line);
border-radius: var(--dp-radius-lg);
padding: var(--dp-sp-6);
margin: var(--dp-sp-6) 0;
overflow: hidden;
}
/* Akzentlinie oben: primary bei unbesprochen, success bei besprochen */
.dp-episode::before {
content: '';
position: absolute;
top: 0;
left: var(--dp-sp-5);
right: var(--dp-sp-5);
height: 3px;
border-radius: 0 0 var(--dp-radius-sm) var(--dp-radius-sm);
background: var(--dp-primary);
}
.dp-episode--besprochen::before {
background: var(--dp-success);
}
.dp-episode--geplant::before {
background: var(--dp-n-300);
}
/* --- Header --- */
.dp-episode__header {
display: flex;
gap: var(--dp-sp-4);
align-items: flex-start;
margin-bottom: var(--dp-sp-5);
}
.dp-episode__cover-wrap {
flex-shrink: 0;
width: 72px;
height: 72px;
border-radius: var(--dp-radius);
overflow: hidden;
line-height: 0;
}
.dp-episode__cover {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.dp-episode__header-text {
flex: 1;
min-width: 0;
}
.dp-episode__eyebrow {
font-family: var(--dp-font-body);
font-size: .72rem;
font-weight: 600;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--dp-text-muted);
margin: 0 0 var(--dp-sp-1);
}
.dp-episode__title {
font-family: var(--dp-font-headline);
font-size: 1.2rem;
font-weight: 700;
color: var(--dp-text);
margin: 0 0 var(--dp-sp-2);
line-height: 1.25;
}
.dp-episode__status-badge {
display: inline-block;
font-family: var(--dp-font-body);
font-size: .7rem;
font-weight: 600;
letter-spacing: .05em;
text-transform: uppercase;
padding: 2px var(--dp-sp-2);
border-radius: var(--dp-radius-sm);
background: var(--dp-primary-subtle);
color: var(--dp-primary);
}
.dp-episode__status-badge--besprochen {
background: var(--dp-success-bg);
color: var(--dp-success);
}
.dp-episode__status-badge--geplant {
background: var(--dp-n-100);
color: var(--dp-n-600);
}
/* --- Panelium Community-Pool --- */
.dp-episode__pool {
margin: var(--dp-sp-5) 0;
padding: var(--dp-sp-5) var(--dp-sp-5);
background: var(--dp-bg-subtle);
border-radius: var(--dp-radius);
border: var(--dp-line);
}
.dp-episode__pool-count {
display: flex;
align-items: baseline;
gap: var(--dp-sp-2);
margin-bottom: var(--dp-sp-1);
}
.dp-episode__pool-icon {
font-size: 1.1rem;
color: var(--dp-accent);
line-height: 1;
}
.dp-episode__pool-number {
font-family: var(--dp-font-headline);
font-size: 1.75rem;
font-weight: 700;
color: var(--dp-text);
font-variant-numeric: tabular-nums;
line-height: 1;
}
.dp-episode__pool-label {
font-family: var(--dp-font-body);
font-size: .8rem;
color: var(--dp-text-muted);
margin: 0 0 var(--dp-sp-3);
}
.dp-episode__pool-bar-wrap {
height: 4px;
background: var(--dp-n-200);
border-radius: 2px;
overflow: hidden;
}
.dp-episode__pool-bar {
height: 100%;
background: linear-gradient(90deg, var(--dp-primary), var(--dp-accent));
border-radius: 2px;
transition: width 0.6s ease;
min-width: 0;
}
/* --- Voting-Formular --- */
.dp-episode__voting {
margin-top: var(--dp-sp-3);
}
.dp-episode__form {
display: flex;
flex-direction: column;
gap: var(--dp-sp-4);
}
.dp-episode__form-row {
display: flex;
flex-direction: column;
gap: var(--dp-sp-2);
}
.dp-episode__form-label {
font-family: var(--dp-font-body);
font-size: .9rem;
font-weight: 500;
color: var(--dp-text);
}
.dp-episode__input-group {
display: flex;
align-items: center;
gap: var(--dp-sp-2);
border: 1.5px solid var(--dp-border-strong);
border-radius: var(--dp-radius);
padding: var(--dp-sp-2) var(--dp-sp-3);
background: var(--dp-bg);
width: fit-content;
transition: border-color var(--dp-t);
}
.dp-episode__input-group:focus-within {
border-color: var(--dp-primary);
outline: 2px solid var(--dp-primary-subtle);
outline-offset: 1px;
}
.dp-episode__input-prefix {
font-size: 1rem;
color: var(--dp-accent);
line-height: 1;
pointer-events: none;
}
.dp-episode__input-group input[type="number"] {
width: 7em;
border: none;
outline: none;
background: transparent;
font-family: var(--dp-font-body);
font-size: 1rem;
font-weight: 600;
color: var(--dp-text);
font-variant-numeric: tabular-nums;
/* Spinners ausblenden */
-moz-appearance: textfield;
}
.dp-episode__input-group input[type="number"]::-webkit-outer-spin-button,
.dp-episode__input-group input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.dp-episode__balance-hint {
font-family: var(--dp-font-body);
font-size: .8rem;
color: var(--dp-text-muted);
margin: 0;
}
.dp-episode__balance-hint strong {
color: var(--dp-success);
font-weight: 600;
}
.dp-episode__submit {
align-self: flex-start;
}
/* --- Voting abgeschlossen --- */
.dp-episode__voting-closed {
font-family: var(--dp-font-body);
font-size: .82rem;
color: var(--dp-text-muted);
margin: var(--dp-sp-4) 0 0;
text-align: center;
}
/* --- Player --- */
.dp-episode__player {
margin-bottom: var(--dp-sp-6);
border-radius: var(--dp-radius);
overflow: hidden;
}
/* --- Shownotes --- */
.dp-episode__shownotes {
/* wrapper, kein eigenes padding — player + body direkt */
}
.dp-episode__shownotes-body {
font-family: var(--dp-font-body);
font-size: .95rem;
line-height: 1.8;
color: var(--dp-text);
}
/* Typografische Feinheiten innerhalb der Shownotes */
.dp-episode__shownotes-body h1,
.dp-episode__shownotes-body h2,
.dp-episode__shownotes-body h3 {
font-family: var(--dp-font-headline);
font-weight: 700;
color: var(--dp-text);
margin-top: var(--dp-sp-8);
margin-bottom: var(--dp-sp-3);
line-height: 1.3;
}
.dp-episode__shownotes-body h2 { font-size: 1.15rem; }
.dp-episode__shownotes-body h3 { font-size: 1rem; }
.dp-episode__shownotes-body p {
margin: 0 0 var(--dp-sp-4);
}
.dp-episode__shownotes-body a {
color: var(--dp-primary);
text-decoration: underline;
text-underline-offset: 2px;
}
.dp-episode__shownotes-body a:hover {
color: var(--dp-primary-dark);
}
.dp-episode__shownotes-body ul,
.dp-episode__shownotes-body ol {
padding-left: var(--dp-sp-6);
margin: 0 0 var(--dp-sp-4);
}
.dp-episode__shownotes-body li {
margin-bottom: var(--dp-sp-2);
}
.dp-episode__shownotes-body strong {
font-weight: 600;
color: var(--dp-text);
}
.dp-episode__shownotes-body blockquote {
margin: var(--dp-sp-5) 0;
padding: var(--dp-sp-3) var(--dp-sp-5);
border-left: 3px solid var(--dp-primary-light);
background: var(--dp-primary-subtle);
border-radius: 0 var(--dp-radius) var(--dp-radius) 0;
color: var(--dp-text);
font-style: italic;
}
/* =========================================================================
8. Ranking — [dp_top_episodes]
========================================================================= */
.dp-ranking {
margin: var(--dp-sp-6) 0;
font-family: var(--dp-font-body);
}
.dp-ranking__filter {
font-size: .8rem;
font-weight: 500;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--dp-text-muted);
margin-bottom: var(--dp-sp-4);
}
.dp-ranking__list {
list-style: none;
padding: 0;
margin: 0;
}
.dp-ranking__item {
display: flex;
align-items: center;
gap: var(--dp-sp-3);
padding: var(--dp-sp-3) 0;
border-bottom: var(--dp-line);
flex-wrap: wrap;
transition: background var(--dp-t);
}
.dp-ranking__item:last-child {
border-bottom: none;
}
/* --- Rangzahl --- */
.dp-ranking__rank {
min-width: 2em;
font-family: var(--dp-font-headline);
font-weight: 700;
font-size: .85rem;
color: var(--dp-text-muted);
text-align: right;
flex-shrink: 0;
}
/* Top-3 Metallfarben */
.dp-ranking__item:nth-child(1) .dp-ranking__rank { color: var(--dp-gold); }
.dp-ranking__item:nth-child(2) .dp-ranking__rank { color: var(--dp-silver); }
.dp-ranking__item:nth-child(3) .dp-ranking__rank { color: var(--dp-bronze); }
/* --- Titel + Link --- */
.dp-ranking__title {
flex: 1 1 10em;
font-size: .95rem;
font-weight: 500;
color: var(--dp-text);
}
.dp-ranking__title a {
color: inherit;
text-decoration: none;
transition: color var(--dp-t);
}
.dp-ranking__title a:hover {
color: var(--dp-primary);
text-decoration: underline;
}
.dp-ranking__title a:focus-visible {
outline: 2px solid var(--dp-primary-light);
outline-offset: 2px;
border-radius: var(--dp-radius-sm);
}
/* --- Balken (relative Stärke) --- */
.dp-ranking__bar-wrap {
flex: 0 0 8em;
height: 6px;
background: var(--dp-n-100);
border-radius: var(--dp-radius);
overflow: hidden;
}
/* width-Attribut bleibt inline (dynamisch) */
.dp-ranking__bar {
display: block;
height: 100%;
background: var(--dp-primary);
border-radius: var(--dp-radius);
min-width: 2px;
}
.dp-ranking__item:nth-child(1) .dp-ranking__bar { background: var(--dp-accent); }
/* --- Panelium-Wert --- */
.dp-ranking__panelium {
flex-shrink: 0;
font-size: .82rem;
font-weight: 600;
color: var(--dp-success);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
/* =========================================================================
9. Body — Platz für die sticky Nav
========================================================================= */
/*
* .has-dp-nav wird via PHP body_class-Filter gesetzt.
* env(safe-area-inset-bottom) kompensiert iPhone-Homebalken (iOS 11+).
*/
body.has-dp-nav {
/* 4.25rem Icons + 2rem Status-Bar + .5rem Puffer */
padding-bottom: calc(6.75rem + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 768px) {
body.has-dp-nav {
/* Desktop: kein Status-Bar */
padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
}
}
/* =========================================================================
10. Sticky Bottom Navigation — .dp-nav
========================================================================= */
.dp-nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
background: #1e1608;
border-top: 1px solid rgba(201, 163, 38, .22);
box-shadow: 0 -4px 24px rgba(0, 0, 0, .35);
/* iPhone-Homebalken-Sicherheitsbereich */
padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* --- Status-Bar (über den Icon-Tabs, nur mobil) --- */
.dp-nav__status {
display: flex;
align-items: center;
justify-content: center;
padding: .38rem 1rem;
background: rgba(0, 0, 0, .25);
border-bottom: 1px solid rgba(201, 163, 38, .12);
min-height: 2rem;
}
.dp-nav__status-user {
display: flex;
align-items: center;
gap: .45rem;
text-decoration: none;
color: rgba(255, 255, 255, .85);
font-size: .72rem;
font-weight: 500;
line-height: 1;
}
.dp-nav__status-user:hover { color: #c9a326; text-decoration: none; }
.dp-nav__status-avatar {
width: 18px;
height: 18px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.dp-nav__status-name {
color: rgba(255, 255, 255, .75);
max-width: 9em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dp-nav__status-sep { color: rgba(255, 255, 255, .3); }
.dp-nav__status-balance {
color: #c9a326;
font-weight: 700;
display: flex;
align-items: center;
gap: .2rem;
}
.dp-nav__status-guest {
display: flex;
align-items: center;
gap: .5rem;
font-size: .72rem;
color: rgba(255, 255, 255, .45);
}
.dp-nav__status-login,
.dp-nav__status-join {
color: rgba(255, 255, 255, .65);
text-decoration: none;
transition: color .15s;
}
.dp-nav__status-login { color: #c9a326; font-weight: 600; }
.dp-nav__status-login:hover { color: #e8c84a; text-decoration: none; }
.dp-nav__status-join:hover { color: rgba(255, 255, 255, .9); text-decoration: none; }
.dp-nav__panelium-info-btn {
background: none;
border: 1px solid rgba(201,163,38,.40);
border-radius: 50%;
color: rgba(201,163,38,.80);
cursor: pointer;
font-size: .65rem;
font-weight: 700;
line-height: 1;
padding: 0;
width: 16px;
height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-left: .25rem;
transition: background .15s, color .15s;
}
.dp-nav__panelium-info-btn:hover {
background: rgba(201,163,38,.15);
color: #c9a326;
}
/* Panelium-Info-Popover */
.dp-panelium-popover {
position: fixed;
bottom: calc(6.75rem + env(safe-area-inset-bottom, 0px) + 8px);
left: 50%;
transform: translateX(-50%);
width: min(340px, calc(100vw - 32px));
background: #1e1608;
border: 1px solid rgba(201,163,38,.35);
border-radius: 14px;
padding: 1.1rem 1.2rem 1rem;
box-shadow: 0 8px 32px rgba(0,0,0,.55);
z-index: 9999;
animation: dpPopoverIn .18s ease;
}
@keyframes dpPopoverIn {
from { opacity: 0; transform: translateX(-50%) translateY(10px); }
to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.dp-panelium-popover__close {
position: absolute;
top: .6rem; right: .7rem;
background: none; border: none;
color: rgba(255,255,255,.45);
font-size: 1.1rem; line-height: 1;
cursor: pointer; padding: .1rem .3rem;
}
.dp-panelium-popover__close:hover { color: rgba(255,255,255,.80); }
.dp-panelium-popover__title {
font-size: .82rem;
font-weight: 700;
color: #c9a326;
margin: 0 0 .5rem;
}
.dp-panelium-popover__text {
font-size: .78rem;
line-height: 1.55;
color: rgba(255,255,255,.72);
margin: 0 0 .75rem;
}
.dp-panelium-popover__link {
font-size: .75rem;
font-weight: 600;
color: #c9a326;
text-decoration: none;
}
.dp-panelium-popover__link:hover { text-decoration: underline; }
/* ==========================================================================
Top-Banner — „Was gab es seit deinem letzten Besuch?"
Position: fixed top, schiebt sich über den Header.
Hellgold #ede1a8 auf dunkelbraun #3b2b08, umgekehrtes Trapez via clip-path.
========================================================================== */
.dp-top-banner {
position: fixed;
top: 0;
left: 50%;
max-width: 95vw;
z-index: 100000;
color: #3b2b08;
transform: translateX(-50%) translateY(-100%);
transition: transform .35s cubic-bezier(.4, 0, .2, 1);
will-change: transform;
/* Shadow on outer wrapper — not clipped by the inner clip-path */
filter: drop-shadow(0 3px 6px rgba(59,43,8,.50)) drop-shadow(0 8px 18px rgba(59,43,8,.28));
}
.dp-top-banner__shape {
background: #ede1a8;
padding-left: 2.5rem;
padding-right: 2.5rem;
/* Inverted trapezoid with softly rounded bottom corners via SVG clipPath */
clip-path: url(#dp-banner-clip);
}
/* Admin-Bar schiebt den Banner nach unten */
.admin-bar .dp-top-banner {
top: 32px;
}
@media screen and (max-width: 782px) {
.admin-bar .dp-top-banner { top: 46px; }
}
.dp-top-banner--visible {
transform: translateX(-50%) translateY(0);
}
.dp-top-banner__inner {
display: flex;
align-items: center;
gap: .5rem;
min-height: 40px;
}
.dp-top-banner__messages {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .4rem .6rem;
justify-content: center;
font-size: .72rem;
font-weight: 600;
line-height: 1.3;
padding: .35rem 0;
}
.dp-top-banner__item {
color: #3b2b08;
text-decoration: none;
white-space: nowrap;
transition: opacity .15s;
}
.dp-top-banner__item:hover {
opacity: .72;
text-decoration: underline;
color: #3b2b08;
}
.dp-top-banner__sep {
color: rgba(59,43,8,.45);
font-weight: 400;
flex-shrink: 0;
}
.dp-top-banner__close {
flex-shrink: 0;
background: none;
border: none;
color: #3b2b08;
font-size: 1.1rem;
line-height: 1;
cursor: pointer;
padding: .2rem .4rem;
border-radius: 4px;
transition: color .15s, background .15s;
}
.dp-top-banner__close:hover {
color: #3b2b08;
background: rgba(59,43,8,.10);
}
@media (max-width: 600px) {
/* Mobil: volle Breite, kein Trapez */
.dp-top-banner {
left: 0;
max-width: 100%;
transform: translateY(-100%);
}
.dp-top-banner--visible {
transform: translateY(0);
}
.dp-top-banner__shape {
clip-path: none;
padding-left: 1rem;
padding-right: 1rem;
}
.dp-top-banner__messages {
font-size: .68rem;
gap: .3rem .5rem;
}
.dp-top-banner__item {
white-space: normal;
}
}
/* Status-Bar auf Desktop ausblenden */
@media (min-width: 768px) {
.dp-nav__status { display: none; }
}
/* --- Icon-Liste --- */
.dp-nav__list {
display: flex;
align-items: stretch;
margin: 0;
padding: 0;
list-style: none;
height: 4.25rem;
}
.dp-nav__item {
flex: 1;
display: flex;
}
/* --- Link (Icon + Label, vertikal zentriert) --- */
.dp-nav__link {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .2rem;
width: 100%;
padding: .5rem .25rem;
color: rgba(255, 255, 255, .45);
text-decoration: none;
font-family: var(--dp-font-body);
font-size: .65rem;
font-weight: 500;
letter-spacing: .03em;
text-align: center;
transition: color .15s, background .15s;
-webkit-tap-highlight-color: transparent;
user-select: none;
}
.dp-nav__link:hover {
color: #c9a326;
background: rgba(201, 163, 38, .08);
text-decoration: none;
}
/* Aktiver State */
.dp-nav__link--active {
color: #c9a326;
}
.dp-nav__link--active .dp-nav__icon svg {
stroke: #c9a326;
}
/* Goldene Oberlinie beim aktiven Item */
.dp-nav__item:has(.dp-nav__link--active) {
border-top: 2px solid #c9a326;
margin-top: -1px;
}
/* --- Icon --- */
.dp-nav__icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.5rem;
height: 1.5rem;
transition: transform .15s;
}
.dp-nav__link--active .dp-nav__icon {
transform: translateY(-1px);
}
.dp-nav__icon svg {
display: block;
stroke: currentColor;
transition: stroke .15s;
}
/* --- Label --- */
.dp-nav__label {
display: block;
max-width: 5em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.2;
}
/* --- Focus --- */
.dp-nav__link:focus-visible {
outline: 2px solid #c9a326;
outline-offset: -2px;
border-radius: 4px;
}
/* --- Desktop: Nav auf max-width begrenzen --- */
@media (min-width: 768px) {
.dp-nav {
left: 50%;
right: auto;
transform: translateX(-50%);
width: 100%;
max-width: 480px;
border-radius: 12px 12px 0 0;
border-left: 1px solid rgba(201, 163, 38, .18);
border-right: 1px solid rgba(201, 163, 38, .18);
}
}
/* =========================================================================
11. Header — [dp_header]
Branded site header mit Logo, optionalem Panelium-Badge.
Sticky, light background, klarer primärer Akzentrand.
========================================================================= */
.dp-header {
position: sticky;
top: 0;
z-index: 900;
background: var(--dp-bg);
border-bottom: 2px solid var(--dp-primary);
box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.dp-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--dp-sp-6);
padding: var(--dp-sp-4) var(--dp-sp-6);
max-width: 1360px;
margin: 0 auto;
}
/* --- Logo --- */
.dp-header__logo {
display: flex;
align-items: center;
text-decoration: none;
flex-shrink: 0;
}
.dp-header__logo:focus-visible {
outline: 2px solid var(--dp-primary-light);
outline-offset: 4px;
border-radius: var(--dp-radius-sm);
}
.dp-header__logo-img {
max-height: 3rem;
width: auto;
display: block;
}
@media (min-width: 768px) {
.dp-header__logo-img {
max-height: 3.75rem;
}
}
/* Text-Wortmarke (Fallback wenn kein Bild-Logo) */
.dp-header__logo-text {
font-family: var(--dp-font-headline);
font-size: 1.35rem;
font-weight: 800;
color: var(--dp-primary);
letter-spacing: -.03em;
line-height: 1;
}
@media (min-width: 768px) {
.dp-header__logo-text {
font-size: 1.6rem;
}
}
/* --- Rechte Seite (Balance + künftige Utility-Links) --- */
.dp-header__right {
display: flex;
align-items: center;
gap: var(--dp-sp-3);
flex-shrink: 0;
}
/* --- Panelium-Balance --- */
.dp-header__balance {
display: flex;
align-items: center;
gap: var(--dp-sp-2);
padding: var(--dp-sp-2) var(--dp-sp-4);
background: var(--dp-primary-subtle);
border: 1px solid rgba(48, 74, 152, .25);
border-radius: 999px;
cursor: default;
white-space: nowrap;
line-height: 1;
}
.dp-header__balance-icon {
font-size: .95rem;
color: var(--dp-primary);
line-height: 1;
}
.dp-header__balance-value {
font-family: var(--dp-font-body);
font-size: .85rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--dp-primary-dark);
letter-spacing: .01em;
}
/* =========================================================================
13. Crew-Teaser + Badge — Subtile Membership-Hinweise
========================================================================= */
/* ---- Badge ---- */
.dp-crew-badge {
display: inline-flex;
align-items: center;
gap: var(--dp-sp-1);
font-family: var(--dp-font-body);
font-size: .68rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--dp-accent);
background: var(--dp-accent-subtle);
border: 1px solid color-mix(in srgb, var(--dp-accent) 25%, transparent);
border-radius: var(--dp-radius-sm);
padding: 2px var(--dp-sp-2);
/* Fallback für Browser ohne color-mix: */
border-color: #f4b8dc;
}
/* ---- Teaser-Box (nach Game oder Voting) ---- */
.dp-crew-teaser {
margin-top: var(--dp-sp-6);
padding: var(--dp-sp-4) var(--dp-sp-5);
border-radius: var(--dp-radius);
background: var(--dp-accent-subtle);
border: 1px solid color-mix(in srgb, var(--dp-accent) 20%, transparent);
/* Fallback: */
border-color: #f4b8dc;
display: flex;
flex-direction: column;
gap: var(--dp-sp-2);
}
/* Kompaktere Variante innerhalb von Episode-Voting */
.dp-crew-teaser--inline {
margin-top: var(--dp-sp-5);
padding: var(--dp-sp-3) var(--dp-sp-4);
}
.dp-crew-teaser__text {
font-family: var(--dp-font-body);
font-size: .875rem;
color: var(--dp-text);
line-height: 1.55;
margin: 0;
}
.dp-crew-teaser__link {
font-family: var(--dp-font-body);
font-size: .82rem;
font-weight: 600;
color: var(--dp-accent-dark);
text-decoration: none;
transition: opacity var(--dp-t);
align-self: flex-start;
}
.dp-crew-teaser__link:hover {
opacity: .75;
}
.dp-crew-teaser__link:focus-visible {
outline: 2px solid var(--dp-accent);
outline-offset: 2px;
border-radius: var(--dp-radius-sm);
}
/* =========================================================================
14. Sternenflotte-Seite — [dp_sternenflotte]
========================================================================= */
.dp-fleet-page {
display: flex;
flex-direction: column;
gap: var(--dp-sp-10);
}
/* ---- Intro ---- */
.dp-fleet-page__intro {
display: flex;
gap: var(--dp-sp-5);
align-items: flex-start;
}
.dp-fleet-page__intro-icon {
flex-shrink: 0;
color: var(--dp-accent);
padding-top: 2px;
}
.dp-fleet-page__intro-text {
flex: 1;
}
.dp-fleet-page__intro-title {
font-family: var(--dp-font-headline);
font-size: clamp(1.4rem, 4vw, 2rem);
font-weight: 700;
color: var(--dp-text);
margin: 0 0 var(--dp-sp-3);
line-height: 1.2;
}
.dp-fleet-page__intro-body {
font-family: var(--dp-font-body);
font-size: 1.05rem;
color: var(--dp-text-muted);
line-height: 1.7;
margin: 0;
}
/* ---- Benefits ---- */
.dp-fleet-page__benefits {
display: grid;
grid-template-columns: 1fr;
gap: var(--dp-sp-5);
}
@media (min-width: 480px) {
.dp-fleet-page__benefits {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 800px) {
.dp-fleet-page__benefits {
grid-template-columns: repeat(3, 1fr);
}
}
.dp-fleet-page__benefit {
padding: var(--dp-sp-6);
background: var(--dp-bg-subtle);
border: var(--dp-line);
border-radius: var(--dp-radius-lg);
display: flex;
flex-direction: column;
gap: var(--dp-sp-3);
}
.dp-fleet-page__benefit-icon {
color: var(--dp-primary);
line-height: 0;
}
/* Jede Karte bekommt eine eigene Akzentfarbe für das Icon */
.dp-fleet-page__benefit:nth-child(1) .dp-fleet-page__benefit-icon {
color: var(--dp-accent);
}
.dp-fleet-page__benefit:nth-child(2) .dp-fleet-page__benefit-icon {
color: var(--dp-primary);
}
.dp-fleet-page__benefit:nth-child(3) .dp-fleet-page__benefit-icon {
color: var(--dp-gold);
}
.dp-fleet-page__benefit-title {
font-family: var(--dp-font-headline);
font-size: 1.05rem;
font-weight: 700;
color: var(--dp-text);
margin: 0;
line-height: 1.3;
}
.dp-fleet-page__benefit-text {
font-family: var(--dp-font-body);
font-size: .9rem;
color: var(--dp-text-muted);
line-height: 1.65;
margin: 0;
}
/* ---- CTA ---- */
.dp-fleet-page__cta-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--dp-sp-4);
text-align: center;
padding: var(--dp-sp-8) 0;
border-top: var(--dp-line);
}
.dp-fleet-page__cta-sub {
font-family: var(--dp-font-body);
font-size: .9rem;
color: var(--dp-text-muted);
margin: 0;
font-style: italic;
}
/* =========================================================================
15. Homepage Layout — [dp_layout_home]
GeneratePress-kompatibel. Max-Width-Container. Viel Whitespace.
========================================================================= */
/* ---- Container ---- */
.dp-container {
width: 100%;
max-width: 1360px;
margin-inline: auto;
padding-inline: var(--dp-sp-6);
}
.dp-container--narrow {
max-width: 800px;
}
/* ---- Section-Basis ---- */
.dp-section {
padding-block: var(--dp-sp-12);
}
@media (min-width: 1100px) {
.dp-section {
padding-block: 5rem;
}
}
/* ---- Section-Header (Eyebrow + Title + Link) ---- */
.dp-section__header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--dp-sp-4);
margin-bottom: var(--dp-sp-8);
flex-wrap: wrap;
}
.dp-eyebrow,
.dp-section__eyebrow {
display: flex;
align-items: center;
justify-content: center;
gap: var(--dp-sp-2);
font-family: var(--dp-font-body);
font-size: var(--dp-text-xs);
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: #c9a326 !important;
margin: 0 0 var(--dp-sp-2);
}
/* Horizontale Akzentlinie vor dem Eyebrow-Text */
.dp-eyebrow::before,
.dp-section__eyebrow::before {
content: '';
display: block;
width: 18px;
height: 2px;
background: currentColor;
border-radius: 1px;
flex-shrink: 0;
opacity: .7;
}
.dp-section__headline,
.dp-section__title {
font-family: var(--dp-font-headline);
font-weight: 700;
color: var(--dp-text);
margin: 0;
line-height: 1.15;
}
.dp-section__headline {
font-size: clamp(1.65rem, 5vw, 2.75rem);
letter-spacing: -.03em;
}
.dp-section__title {
font-size: clamp(1.25rem, 3vw, 1.8rem);
letter-spacing: -.025em;
}
.dp-section__headline a,
.dp-section__title a {
color: inherit;
text-decoration: none;
transition: color var(--dp-t);
}
.dp-section__headline a:hover,
.dp-section__title a:hover {
color: var(--dp-primary);
}
.dp-section__subline {
font-family: var(--dp-font-body);
font-size: var(--dp-text-sm);
font-weight: 500;
letter-spacing: .045em;
text-transform: uppercase;
color: var(--dp-text-muted);
margin: var(--dp-sp-2) 0 0;
}
.dp-section__lead {
font-family: var(--dp-font-serif);
font-size: var(--dp-text-lead);
line-height: 1.75;
color: var(--dp-n-600);
margin: var(--dp-sp-4) 0 0;
max-width: 54ch;
}
/* "Alle ansehen"-Link mit animiertem Pfeil */
.dp-section__more-link {
display: inline-flex;
align-items: center;
gap: .4em;
font-family: var(--dp-font-body);
font-size: var(--dp-text-sm);
font-weight: 600;
letter-spacing: .03em;
color: var(--dp-primary);
text-decoration: none;
white-space: nowrap;
transition: color var(--dp-t);
flex-shrink: 0;
}
.dp-section__more-link::after {
content: '→';
transition: transform var(--dp-t);
}
.dp-section__more-link:hover {
color: var(--dp-primary-dark);
}
.dp-section__more-link:hover::after {
transform: translateX(3px);
}
/* ---- 1. Hero ---- */
.dp-section--hero {
padding-block: var(--dp-sp-12) var(--dp-sp-12);
background: var(--dp-bg);
}
/* ---- 4. Ranking ---- */
.dp-section--ranking {
background: var(--dp-bg);
}
.dp-ranking-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--dp-sp-3);
}
.dp-ranking-list__item {
display: flex;
align-items: center;
gap: var(--dp-sp-4);
padding: var(--dp-sp-4) var(--dp-sp-5);
background: var(--dp-bg-subtle);
border: var(--dp-line);
border-radius: var(--dp-radius-lg);
transition: border-color var(--dp-t);
}
.dp-ranking-list__item:hover {
border-color: var(--dp-border-strong);
}
.dp-ranking-list__item--gold {
background: linear-gradient(135deg, #fffbeb, #fef9e7);
border-color: color-mix(in srgb, var(--dp-gold) 30%, transparent);
/* Fallback: */
border-color: #e8d06e;
}
.dp-ranking-list__item--silver {
background: linear-gradient(135deg, #f8f9fa, #f1f3f5);
border-color: color-mix(in srgb, var(--dp-silver) 30%, transparent);
/* Fallback: */
border-color: #c4c4c4;
}
.dp-ranking-list__item--bronze {
background: linear-gradient(135deg, #fdf6f0, #fbeee5);
border-color: color-mix(in srgb, var(--dp-bronze) 30%, transparent);
/* Fallback: */
border-color: #c9896a;
}
.dp-ranking-list__rank {
font-family: var(--dp-font-headline);
font-size: 1rem;
font-weight: 700;
color: var(--dp-text-muted);
min-width: 1.5em;
text-align: center;
font-variant-numeric: tabular-nums;
}
.dp-ranking-list__item--gold .dp-ranking-list__rank { color: var(--dp-gold); }
.dp-ranking-list__item--silver .dp-ranking-list__rank { color: var(--dp-silver); }
.dp-ranking-list__item--bronze .dp-ranking-list__rank { color: var(--dp-bronze); }
.dp-ranking-list__info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--dp-sp-1);
}
.dp-ranking-list__episode-num {
font-family: var(--dp-font-body);
font-size: .7rem;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--dp-text-muted);
}
.dp-ranking-list__title {
font-family: var(--dp-font-headline);
font-size: .95rem;
font-weight: 600;
color: var(--dp-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dp-ranking-list__title a {
color: inherit;
text-decoration: none;
transition: color var(--dp-t);
}
.dp-ranking-list__title a:hover {
color: var(--dp-primary);
}
.dp-ranking-list__bar-wrap {
height: 3px;
background: var(--dp-n-200);
border-radius: 2px;
overflow: hidden;
margin-top: var(--dp-sp-1);
}
.dp-ranking-list__bar {
height: 100%;
background: linear-gradient(90deg, var(--dp-primary), var(--dp-accent));
border-radius: 2px;
transition: width 0.8s ease;
}
.dp-ranking-list__panelium {
font-family: var(--dp-font-body);
font-size: .82rem;
font-weight: 700;
color: var(--dp-accent);
font-variant-numeric: tabular-nums;
white-space: nowrap;
flex-shrink: 0;
}
/* ---- 7. Memory Entry ---- */
.dp-section--memory {
background: var(--dp-n-900);
position: relative;
overflow: hidden;
}
.dp-memory {
display: flex;
flex-direction: column;
gap: var(--dp-sp-6);
align-items: flex-start;
}
@media (min-width: 640px) {
.dp-memory {
flex-direction: row;
align-items: center;
gap: var(--dp-sp-8);
}
}
.dp-section--memory .dp-section__eyebrow {
color: var(--dp-accent-light);
}
.dp-section--memory .dp-section__title {
color: var(--dp-n-0);
}
.dp-section--memory .dp-section__lead {
color: var(--dp-n-400);
max-width: none;
}
.dp-memory__icon {
flex-shrink: 0;
}
.dp-memory__symbol {
font-size: 4rem;
color: var(--dp-accent);
line-height: 1;
display: block;
opacity: .8;
}
.dp-memory__text {
flex: 1;
}
.dp-memory__detail {
font-family: var(--dp-font-headline);
font-size: 1rem;
font-style: italic;
font-weight: 500;
color: var(--dp-n-500);
margin: var(--dp-sp-4) 0 0;
padding-top: var(--dp-sp-4);
border-top: 1px solid var(--dp-n-800);
}
/* =========================================================================
16. Podcast-Sektionen — [dp_podcast_hero] + [dp_latest_episodes]
Bilder IMMER quadratisch, object-fit: cover, kein Verzerren.
========================================================================= */
/* ---- [dp_podcast_hero] ---- */
.dp-podcast-hero {
container-type: inline-size;
padding: var(--dp-sp-8) 0;
}
.dp-podcast-hero__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--dp-sp-8);
align-items: center;
}
@media (min-width: 680px) {
.dp-podcast-hero__grid {
grid-template-columns: minmax(220px, 360px) 1fr;
gap: var(--dp-sp-10);
}
}
/* Quadratisches Cover — erzwungen via aspect-ratio */
.dp-podcast-hero__cover-wrap {
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: var(--dp-radius-lg);
background: var(--dp-n-100);
box-shadow: 0 12px 40px rgba(0,0,0,.16);
line-height: 0;
}
.dp-podcast-hero__cover-wrap--empty {
display: flex;
align-items: center;
justify-content: center;
background: var(--dp-n-100);
}
.dp-podcast-hero__cover-link {
display: block;
width: 100%;
height: 100%;
}
.dp-podcast-hero__cover {
display: block;
width: 100%;
height: 100%;
object-fit: cover; /* kein Verzerren */
object-position: center;
transition: transform 0.5s ease;
}
.dp-podcast-hero__cover-link:hover .dp-podcast-hero__cover {
transform: scale(1.03);
}
/* Body */
.dp-podcast-hero__body {
display: flex;
flex-direction: column;
gap: var(--dp-sp-3);
}
.dp-podcast-hero__eyebrow {
font-family: var(--dp-font-body);
font-size: .72rem;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--dp-primary);
margin: 0;
}
.dp-podcast-hero__title {
font-family: var(--dp-font-headline);
font-size: clamp(1.35rem, 3.5vw, 2rem);
font-weight: 700;
line-height: 1.2;
color: var(--dp-text);
margin: 0;
}
.dp-podcast-hero__title a {
color: inherit;
text-decoration: none;
transition: color var(--dp-t);
}
.dp-podcast-hero__title a:hover {
color: #c9a326;
text-decoration: none;
}
.dp-podcast-hero__meta {
font-family: var(--dp-font-body);
font-size: .78rem;
font-weight: 500;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--dp-text-muted);
margin: 0;
}
.dp-podcast-hero__teaser {
font-family: var(--dp-font-body);
font-size: 1rem;
line-height: 1.65;
color: var(--dp-n-700);
margin: 0;
}
.dp-podcast-hero__player {
border-radius: var(--dp-radius);
overflow: hidden;
margin-top: var(--dp-sp-1);
}
.dp-podcast-hero__actions {
display: flex;
flex-wrap: wrap;
gap: var(--dp-sp-3);
margin-top: var(--dp-sp-2);
}
/* ---- [dp_latest_episodes] ---- */
.dp-episodes-section {
display: flex;
flex-direction: column;
gap: var(--dp-sp-8);
padding: var(--dp-sp-8) 0;
}
/* Grid — Standard 2 Spalten mobil, 3 Spalten Desktop */
.dp-episodes-section__grid {
display: grid;
gap: var(--dp-sp-4);
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px) {
.dp-episodes-section__grid--3col {
grid-template-columns: repeat(3, 1fr);
}
.dp-episodes-section__grid--4col {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1100px) {
.dp-episodes-section__grid--4col {
grid-template-columns: repeat(4, 1fr);
}
}
/* 2-Spalten-Variante bleibt auch auf Desktop 2 Spalten */
.dp-episodes-section__grid--2col {
grid-template-columns: repeat(2, 1fr);
}
.dp-episodes-section__more {
display: flex;
justify-content: center;
}
/* ---- Episode Card (dp-ep-card) ---- */
.dp-ep-card {
display: flex;
flex-direction: column;
border-radius: var(--dp-radius-lg);
overflow: hidden;
background: var(--dp-surface-raised);
border: var(--dp-line);
box-shadow: var(--dp-shadow-sm);
transition:
box-shadow var(--dp-t-slow),
transform var(--dp-t-slow),
border-color var(--dp-t);
}
.dp-ep-card:hover {
box-shadow: var(--dp-shadow-md);
transform: translateY(-3px);
border-color: var(--dp-border-strong);
}
/* Quadratisches Thumbnail — erzwungen via aspect-ratio + object-fit */
.dp-ep-card__thumb {
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
background: var(--dp-n-100);
line-height: 0;
position: relative;
}
.dp-ep-card__thumb-link {
display: block;
width: 100%;
height: 100%;
}
.dp-ep-card__thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover; /* kein Verzerren — IMMER quadratisch */
object-position: center;
transition: transform 0.4s ease;
}
.dp-ep-card:hover .dp-ep-card__thumb img {
transform: scale(1.06); /* leichter Zoom bei hover */
}
.dp-ep-card__thumb-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: var(--dp-n-300);
}
/* Card Body */
.dp-ep-card__body {
padding: var(--dp-sp-3) var(--dp-sp-4) var(--dp-sp-4);
display: flex;
flex-direction: column;
gap: var(--dp-sp-2);
flex: 1;
}
.dp-ep-card__meta {
font-family: var(--dp-font-body);
font-size: .68rem;
font-weight: 600;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--dp-text-muted);
margin: 0;
}
.dp-ep-card__title {
font-family: var(--dp-font-headline);
font-size: .9rem;
font-weight: 700;
line-height: 1.3;
letter-spacing: -.01em;
color: var(--dp-text);
margin: 0;
/* 2-Zeilen-Clamp damit Grid-Reihen bündig bleiben */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.dp-ep-card__title a {
color: inherit;
text-decoration: none;
transition: color var(--dp-t);
}
.dp-ep-card__title a:hover {
color: var(--dp-primary);
}
.dp-ep-card__footer {
display: flex;
align-items: center;
gap: var(--dp-sp-2);
margin-top: auto;
padding-top: var(--dp-sp-2);
flex-wrap: wrap;
}
.dp-ep-card__badge {
font-family: var(--dp-font-body);
font-size: .63rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
padding: 2px var(--dp-sp-2);
border-radius: var(--dp-radius-sm);
background: var(--dp-primary-subtle);
color: var(--dp-primary);
}
.dp-ep-card__badge--besprochen {
background: var(--dp-success-bg);
color: var(--dp-success);
}
.dp-ep-card__badge--geplant {
background: var(--dp-n-100);
color: var(--dp-n-600);
}
.dp-ep-card__panelium {
font-family: var(--dp-font-body);
font-size: .72rem;
font-weight: 600;
color: var(--dp-accent);
font-variant-numeric: tabular-nums;
margin-left: auto;
}
/* =============================================================
17. Reels — [dp_reels]
============================================================= */
/* ── Wrapper ─────────────────────────────────────────────── */
.dp-reels {
/* container-type erlaubt zukünftige Container-Queries */
container-type: inline-size;
}
/* ── Grid / Scroll-Container ─────────────────────────────── */
.dp-reels__grid {
display: flex;
gap: var(--dp-sp-3);
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding-block-end: var(--dp-sp-2); /* Platz für schmale Scrollbar */
scrollbar-width: thin;
scrollbar-color: var(--dp-n-300) transparent;
}
/* Desktop: Grid statt horizontalem Scroll */
@media (min-width: 640px) {
.dp-reels__grid {
display: grid;
overflow-x: visible;
scroll-snap-type: none;
padding-block-end: 0;
}
.dp-reels__grid--2col { grid-template-columns: repeat(2, 1fr); }
.dp-reels__grid--3col { grid-template-columns: repeat(3, 1fr); }
.dp-reels__grid--4col { grid-template-columns: repeat(4, 1fr); }
}
/* ── Card ────────────────────────────────────────────────── */
.dp-reel-card {
/* Mobile: feste Breite ~72 vw — nächste Card noch sichtbar */
flex: 0 0 72vw;
max-width: 280px;
scroll-snap-align: start;
display: flex;
flex-direction: column;
gap: var(--dp-sp-2);
}
@media (min-width: 640px) {
.dp-reel-card {
flex: none;
max-width: none;
}
}
/* ── Media-Container (9:16) ──────────────────────────────── */
.dp-reel-card__media {
position: relative;
width: 100%;
aspect-ratio: 9 / 16;
overflow: hidden;
border-radius: var(--dp-radius);
background: var(--dp-n-900);
}
/* ── Placeholder (Thumbnail + Play-Button) ───────────────── */
.dp-reel-card__placeholder {
position: absolute;
inset: 0;
}
.dp-reel-card__thumb {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.dp-reel-card__thumb--empty {
width: 100%;
height: 100%;
background: var(--dp-n-800);
}
/* ── Play-Button ─────────────────────────────────────────── */
.dp-reel-card__play {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, .30);
border: none;
cursor: pointer;
color: #fff;
transition: background var(--dp-t);
/* Hover-Zone = gesamte Card */
}
.dp-reel-card__play:hover,
.dp-reel-card__play:focus-visible {
background: rgba(0, 0, 0, .52);
}
.dp-reel-card__play:focus-visible {
outline: 2px solid var(--dp-accent);
outline-offset: -3px;
}
.dp-reel-card__play svg {
/* Schatten für Lesbarkeit auf hellen Thumbnails */
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .65));
transition: transform var(--dp-t);
}
.dp-reel-card__play:hover svg {
transform: scale(1.12);
}
/* ── Dauer-Badge ─────────────────────────────────────────── */
.dp-reel-card__duration {
position: absolute;
bottom: var(--dp-sp-2);
right: var(--dp-sp-2);
background: rgba(0, 0, 0, .72);
color: #fff;
font-family: var(--dp-font-body);
font-size: .72rem;
font-weight: 700;
letter-spacing: .03em;
padding: 2px 6px;
border-radius: 4px;
font-variant-numeric: tabular-nums;
pointer-events: none; /* kein Click, kein Tab */
}
/* ── iframe nach Klick ───────────────────────────────────── */
/* Ersetzt .dp-reel-card__placeholder, sitzt direkt in .dp-reel-card__media */
.dp-reel-card__iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: none;
display: block;
border-radius: var(--dp-radius);
background: var(--dp-n-900);
}
/* WebVTT-Untertitel — ::cue unterstützt kein padding/border-radius, aber bg + shadow */
video.dp-reel-card__iframe::cue {
background: rgba(0, 0, 0, 0.72);
color: #ffffff;
font-size: 1em;
font-family: var(--dp-font-body, system-ui, sans-serif);
font-weight: 500;
line-height: 1.45;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
/* ── Titel unter der Card ────────────────────────────────── */
.dp-reel-card__title {
font-family: var(--dp-font-body);
font-size: .85rem;
font-weight: 600;
color: var(--dp-n-800);
line-height: 1.3;
margin: 0;
/* 2-zeiliger Clamp für gleichmäßige Abstände im Grid */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* =============================================================
18. Shop-Section — [dp_shop_random]
============================================================= */
/* ── Wrapper ─────────────────────────────────────────────── */
.dp-shop-section {
display: flex;
flex-direction: column;
gap: var(--dp-sp-6);
}
.dp-shop-section__heading {
font-family: var(--dp-font-head);
font-size: 1.15rem;
font-weight: 700;
color: var(--dp-n-900);
margin: 0;
letter-spacing: -.01em;
}
/* ── Grid ────────────────────────────────────────────────── */
.dp-shop-section__grid {
display: grid;
gap: var(--dp-sp-4);
grid-template-columns: 1fr;
}
@media (min-width: 480px) {
.dp-shop-section__grid--2col,
.dp-shop-section__grid--3col,
.dp-shop-section__grid--4col { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 720px) {
.dp-shop-section__grid--3col { grid-template-columns: repeat(3, 1fr); }
.dp-shop-section__grid--4col { grid-template-columns: repeat(4, 1fr); }
}
/* ── Produktkarte ────────────────────────────────────────── */
.dp-product-card {
background: var(--dp-n-0);
border: 1px solid var(--dp-n-200);
border-radius: var(--dp-radius);
overflow: hidden;
display: flex;
flex-direction: column;
transition: box-shadow var(--dp-t), transform var(--dp-t);
}
.dp-product-card:hover {
box-shadow: 0 4px 20px rgba(0, 0, 0, .10);
transform: translateY(-2px);
}
/* ── Produktbild (quadratisch) ───────────────────────────── */
.dp-product-card__image-link {
display: block;
text-decoration: none;
}
.dp-product-card__image-wrap {
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
background: var(--dp-n-100);
}
.dp-product-card__image-wrap img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform 0.4s ease;
}
.dp-product-card:hover .dp-product-card__image-wrap img {
transform: scale(1.05);
}
.dp-product-card__image-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: var(--dp-n-400);
}
/* ── Karten-Inhalt ───────────────────────────────────────── */
.dp-product-card__body {
padding: var(--dp-sp-3) var(--dp-sp-4);
display: flex;
flex-direction: column;
gap: var(--dp-sp-2);
flex: 1;
}
.dp-product-card__title {
font-family: var(--dp-font-body);
font-size: .88rem;
font-weight: 600;
color: var(--dp-n-800);
margin: 0;
line-height: 1.35;
/* 2-Zeilen-Clamp */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.dp-product-card__title a {
color: inherit;
text-decoration: none;
}
.dp-product-card__title a:hover {
color: var(--dp-primary);
}
.dp-product-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--dp-sp-2);
margin-top: auto;
padding-top: var(--dp-sp-2);
}
.dp-product-card__price {
font-family: var(--dp-font-body);
font-size: .9rem;
font-weight: 700;
color: var(--dp-accent);
font-variant-numeric: tabular-nums;
}
/* WooCommerce überschreibt oft den del/ins, hier neutral halten */
.dp-product-card__price del {
color: var(--dp-n-500);
font-weight: 400;
font-size: .8rem;
}
.dp-product-card__link {
font-family: var(--dp-font-body);
font-size: .78rem;
font-weight: 600;
color: var(--dp-primary);
text-decoration: none;
white-space: nowrap;
transition: color var(--dp-t);
}
.dp-product-card__link:hover {
color: var(--dp-accent);
}
/* ── "Zum Shop"-Link ─────────────────────────────────────── */
.dp-shop-section__more {
text-align: center;
}
/* =============================================================
19. Member Panel — [dp_member_panel]
============================================================= */
/* ── Basis ───────────────────────────────────────────────── */
.dp-member-panel {
border-radius: var(--dp-radius-lg);
padding: var(--dp-sp-8) var(--dp-sp-6);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--dp-sp-5);
}
/* ── Gast (nicht eingeloggt) ─────────────────────────────── */
.dp-member-panel--guest {
background: var(--dp-primary-subtle);
border: 1px solid var(--dp-n-200);
}
.dp-member-panel__icon {
color: var(--dp-accent);
line-height: 0;
}
.dp-member-panel__headline {
font-family: var(--dp-font-head);
font-size: 1.4rem;
font-weight: 700;
color: var(--dp-n-900);
margin: 0;
letter-spacing: -.02em;
}
.dp-member-panel__lead {
font-family: var(--dp-font-body);
font-size: .95rem;
color: var(--dp-n-700);
line-height: 1.6;
margin: 0;
max-width: 38ch;
}
.dp-member-panel__actions {
display: flex;
flex-wrap: wrap;
gap: var(--dp-sp-3);
justify-content: center;
}
.dp-member-panel__hint {
font-family: var(--dp-font-body);
font-size: .78rem;
color: var(--dp-n-500);
margin: 0;
}
.dp-member-panel__fleet-link {
color: var(--dp-primary);
text-decoration: none;
}
.dp-member-panel__fleet-link:hover {
text-decoration: underline;
}
/* ── Eingeloggt ──────────────────────────────────────────── */
.dp-member-panel--member {
background: var(--dp-n-900);
color: var(--dp-n-0);
}
.dp-member-panel__greeting {
display: flex;
flex-direction: column;
gap: var(--dp-sp-1);
}
.dp-member-panel__eyebrow {
font-family: var(--dp-font-body);
font-size: .7rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--dp-accent);
margin: 0;
}
.dp-member-panel__name {
font-family: var(--dp-font-head);
font-size: 1.5rem;
font-weight: 700;
color: var(--dp-n-0);
margin: 0;
letter-spacing: -.02em;
}
.dp-member-panel__level {
font-family: var(--dp-font-body);
font-size: .8rem;
color: var(--dp-n-400);
margin: 0;
font-style: italic;
}
/* ── Panelium-Balance ────────────────────────────────────── */
.dp-member-panel__balance {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--dp-sp-1);
padding: var(--dp-sp-4) var(--dp-sp-6);
background: rgba(255, 255, 255, .06);
border-radius: var(--dp-radius);
border: 1px solid rgba(255, 255, 255, .10);
}
.dp-member-panel__balance-icon {
font-size: 2rem;
color: var(--dp-accent);
line-height: 1;
}
.dp-member-panel__balance-value {
font-family: var(--dp-font-head);
font-size: 2.5rem;
font-weight: 700;
color: var(--dp-n-0);
font-variant-numeric: tabular-nums;
line-height: 1;
}
.dp-member-panel__balance-label {
font-family: var(--dp-font-body);
font-size: .72rem;
color: var(--dp-n-400);
letter-spacing: .04em;
text-transform: uppercase;
}
/* Buttons im dunklen Panel: Farb-Override */
.dp-member-panel--member .dp-btn--primary {
background: var(--dp-accent);
color: #fff;
border-color: var(--dp-accent);
}
.dp-member-panel--member .dp-btn--primary:hover {
filter: brightness(1.1);
}
.dp-member-panel--member .dp-btn--secondary {
color: var(--dp-n-0);
border-color: rgba(255, 255, 255, .35);
background: transparent;
}
.dp-member-panel--member .dp-btn--secondary:hover {
border-color: var(--dp-n-0);
background: rgba(255, 255, 255, .08);
}
/* =============================================================
20. Memory-Seite — [dp_memory]
============================================================= */
/* ── Wrapper ─────────────────────────────────────────────── */
.dp-memory {
display: flex;
flex-direction: column;
gap: var(--dp-sp-5);
}
/* ── Filter-Formular ─────────────────────────────────────── */
.dp-memory__filters {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--dp-sp-2);
padding: var(--dp-sp-3) var(--dp-sp-4);
background: var(--dp-n-50, var(--dp-primary-subtle));
border-radius: var(--dp-radius);
border: 1px solid var(--dp-n-200);
}
.dp-memory__filter-select {
font-family: var(--dp-font-body);
font-size: .85rem;
color: var(--dp-n-800);
background: var(--dp-n-0);
border: 1px solid var(--dp-n-300);
border-radius: var(--dp-radius-sm);
padding: var(--dp-sp-2) var(--dp-sp-3);
cursor: pointer;
min-width: 140px;
transition: border-color var(--dp-t);
}
.dp-memory__filter-select:focus-visible {
outline: 2px solid var(--dp-primary);
outline-offset: 1px;
border-color: var(--dp-primary);
}
.dp-memory__filter-submit {
padding: var(--dp-sp-2) var(--dp-sp-4);
}
.dp-memory__filter-reset {
font-family: var(--dp-font-body);
font-size: .8rem;
color: var(--dp-n-500);
text-decoration: none;
transition: color var(--dp-t);
}
.dp-memory__filter-reset:hover {
color: var(--dp-accent);
}
/* ── Header: Count + Legende ─────────────────────────────── */
.dp-memory__header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--dp-sp-3);
}
.dp-memory__count {
font-family: var(--dp-font-body);
font-size: .85rem;
font-weight: 600;
color: var(--dp-n-600);
margin: 0;
font-variant-numeric: tabular-nums;
}
/* Farbcode-Legende */
.dp-memory__legend {
display: flex;
flex-wrap: wrap;
gap: var(--dp-sp-3);
list-style: none;
margin: 0;
padding: 0;
}
.dp-memory__legend-item {
font-family: var(--dp-font-body);
font-size: .72rem;
font-weight: 600;
letter-spacing: .03em;
display: flex;
align-items: center;
gap: 5px;
color: var(--dp-n-600);
}
/* Farbpunkt vor dem Label */
.dp-memory__legend-item::before {
content: '';
display: inline-block;
width: 10px;
height: 10px;
border-radius: 2px;
flex-shrink: 0;
}
.dp-memory__legend-item--unbesprochen::before { background: #f97316; }
.dp-memory__legend-item--besprochen::before { background: var(--dp-success); }
.dp-memory__legend-item--geplant::before { background: var(--dp-primary); }
/* ── Episode-Grid ────────────────────────────────────────── */
.dp-memory__grid {
display: grid;
gap: var(--dp-sp-2);
grid-template-columns: repeat(3, 1fr); /* Mobil: 3 Spalten */
}
@media (min-width: 480px) {
.dp-memory__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 720px) {
.dp-memory__grid { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 1000px) {
.dp-memory__grid { grid-template-columns: repeat(6, 1fr); }
}
/* ── Episode-Card ────────────────────────────────────────── */
.dp-memory-card {
display: block;
text-decoration: none;
border-radius: var(--dp-radius-sm);
overflow: hidden;
/* Farbrahmen je Status (3px solide) */
border: 3px solid transparent;
transition: border-color var(--dp-t), transform var(--dp-t), box-shadow var(--dp-t);
background: var(--dp-n-0);
}
.dp-memory-card--unbesprochen { border-color: #f97316; }
.dp-memory-card--besprochen { border-color: var(--dp-success); }
.dp-memory-card--geplant { border-color: var(--dp-primary); }
.dp-memory-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
}
/* ── Thumbnail (immer quadratisch) ───────────────────────── */
.dp-memory-card__thumb-wrap {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
background: var(--dp-n-100);
}
.dp-memory-card__thumb-wrap img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform 0.35s ease;
}
.dp-memory-card:hover .dp-memory-card__thumb-wrap img {
transform: scale(1.08);
}
/* ── Beschreibungs-Overlay ───────────────────────────────── */
.dp-memory-card__desc {
position: absolute;
inset: 0;
background: rgba(10, 5, 20, .86);
color: rgba(255, 255, 255, .93);
font-size: .62rem;
line-height: 1.5;
padding: .4rem .5rem;
display: flex;
align-items: center;
opacity: 0;
transition: opacity .2s ease;
overflow: hidden;
pointer-events: none;
}
.dp-memory-card:hover .dp-memory-card__desc { opacity: 1; }
@media (hover: none) {
.dp-memory-card__desc { display: none; }
}
html.dp-dark .dp-memory-card__desc { background: rgba(0, 0, 0, .88) !important; }
/* Placeholder (kein Thumbnail) */
.dp-memory-card__thumb-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: var(--dp-n-800);
color: var(--dp-n-400);
font-family: var(--dp-font-body);
font-size: .65rem;
font-weight: 700;
letter-spacing: .05em;
text-align: center;
padding: var(--dp-sp-1);
}
/* ── Titel unter dem Bild ────────────────────────────────── */
.dp-memory-card__title {
font-family: var(--dp-font-body);
font-size: .62rem;
font-weight: 600;
color: var(--dp-n-800);
line-height: 1.3;
margin: 0;
padding: 4px var(--dp-sp-1) 5px;
background: var(--dp-n-0);
/* Einzeilig mit Ellipsis */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ── Kein Ergebnis ───────────────────────────────────────── */
.dp-memory__empty {
font-family: var(--dp-font-body);
font-size: .95rem;
color: var(--dp-n-600);
text-align: center;
padding: var(--dp-sp-8) 0;
}
.dp-memory__empty a {
color: var(--dp-primary);
text-decoration: underline;
}
/* ── Pagination ──────────────────────────────────────────── */
.dp-memory__pagination ul {
display: flex;
flex-wrap: wrap;
gap: var(--dp-sp-1);
list-style: none;
padding: 0;
margin: 0;
justify-content: center;
align-items: center;
}
.dp-memory__page-link {
display: flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 var(--dp-sp-2);
border: 1px solid var(--dp-n-300);
border-radius: var(--dp-radius-sm);
color: var(--dp-n-700);
text-decoration: none;
font-family: var(--dp-font-body);
font-size: .82rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
transition: border-color var(--dp-t), color var(--dp-t), background var(--dp-t);
}
.dp-memory__page-link:hover {
border-color: var(--dp-primary);
color: var(--dp-primary);
background: var(--dp-primary-subtle);
}
.dp-memory__page-link--current {
background: var(--dp-primary);
border-color: var(--dp-primary);
color: #fff;
pointer-events: none; /* aktuelle Seite nicht klickbar */
}
.dp-memory__page-link--current:hover {
background: var(--dp-primary);
color: #fff;
}
.dp-memory__page-link--arrow {
font-size: 1rem;
min-width: 40px;
}
.dp-memory__page-link:focus-visible {
outline: 2px solid var(--dp-accent);
outline-offset: 2px;
}
.dp-memory__page-ellipsis {
display: flex;
align-items: center;
padding: 0 4px;
color: var(--dp-n-400);
font-size: .9rem;
user-select: none;
}
/* ============================================================
21. Navigation — Desktop GP-Menü + Mobile Sticky Bottom Nav
============================================================ */
/* ── Mobile: Sticky Bottom Nav bereits via Abschnitt 6 (dp-nav) vorhanden.
Auf Desktop ≥ 768px ausblenden + Body-Padding zurücksetzen. ────────── */
@media (min-width: 768px) {
.dp-nav {
display: none !important;
}
body.has-dp-nav {
padding-bottom: 0 !important;
}
}
/* ── GeneratePress Site-Header — Branding-Upgrade ───────────────────────── */
/* Header-Container */
.site-header {
background: var(--dp-bg) !important;
border-bottom: 2px solid var(--dp-primary) !important;
}
/* Mobile: Header sticky — Hamburger-Button bleibt beim Scrollen erreichbar */
@media (max-width: 767px) {
.site-header {
position: sticky !important;
top: 0 !important;
z-index: 200 !important;
}
}
/* Innen-Wrapper auf Systembreite ausrichten */
.site-header .inside-header {
max-width: 1360px !important;
padding-block: 1rem !important;
}
/* Custom Logo via WP Customizer */
.site-header .site-logo img,
.site-header .custom-logo {
max-height: 3.75rem !important;
width: auto !important;
height: auto !important;
display: block;
}
/* Site-Title als Wortmarke (kein Bild-Logo) */
.site-header .site-title,
.site-header .site-title a,
.site-header .site-title a:visited {
font-family: var(--dp-font-headline) !important;
font-size: 1.5rem !important;
font-weight: 800 !important;
color: var(--dp-text) !important;
text-decoration: none !important;
letter-spacing: -.025em !important;
line-height: 1.1;
}
.site-header .site-title a:hover {
color: var(--dp-primary) !important;
}
.site-header .site-description {
font-size: .75rem;
color: var(--dp-text-muted);
letter-spacing: .04em;
text-transform: uppercase;
margin-top: 2px;
}
/* ── GeneratePress Primärmenü — warm, kein Blau ──────────────────────────── */
@media (min-width: 768px) {
/* Nav-Liste: keine Überlappung, genug Luft zum Button-Bereich */
.main-navigation .main-nav > ul {
gap: 0;
flex-wrap: nowrap;
align-items: center;
}
/* Basis-Link */
.main-navigation .main-nav ul > li > a,
.main-navigation .main-nav ul > li > a:visited {
color: #3a3228;
font-family: var(--dp-font-body);
font-size: .875rem;
font-weight: 600;
letter-spacing: .005em;
padding: .5rem .75rem;
border-radius: 0;
position: relative;
transition: color var(--dp-t);
background: transparent;
}
/* Unterline-Indikator — warm gold */
.main-navigation .main-nav ul > li > a::after {
content: '';
position: absolute;
inset-inline: .75rem;
bottom: 0;
height: 2px;
background: #c9a326;
border-radius: 1px;
transform: scaleX(0);
transform-origin: center;
transition: transform var(--dp-t);
}
.main-navigation .main-nav ul > li > a:hover,
.main-navigation .main-nav ul > li > a:focus-visible {
color: #c9a326;
background: transparent;
outline: none;
}
.main-navigation .main-nav ul > li > a:hover::after,
.main-navigation .main-nav ul > li > a:focus-visible::after {
transform: scaleX(1);
}
/* Aktiver Menüpunkt */
.main-navigation .main-nav ul > li.current-menu-item > a,
.main-navigation .main-nav ul > li.current-menu-ancestor > a {
color: #c9a326;
}
.main-navigation .main-nav ul > li.current-menu-item > a::after,
.main-navigation .main-nav ul > li.current-menu-ancestor > a::after {
transform: scaleX(1);
}
/* GP Dropdown-Toggle-Button (Pfeil) — warm, kein Überlapp */
.main-navigation .main-nav ul > li .dropdown-menu-toggle {
color: #8a7560;
padding: 0 .35rem;
background: transparent;
border: none;
}
.main-navigation .main-nav ul > li .dropdown-menu-toggle:hover {
color: #c9a326;
}
.main-navigation .main-nav ul > li .dropdown-menu-toggle svg {
width: 12px; height: 12px;
}
/* Tablet-Fix: Label und Pfeil immer auf einer Zeile — verhindert dass bei
knappem Platz der Pfeil unter den Menüpunkt-Text rutscht */
.main-navigation .main-nav ul > li.menu-item-has-children {
display: flex;
align-items: center;
flex-wrap: nowrap;
position: relative; /* sicherstellen, damit sub-menu sich relativ zum li positioniert */
}
.main-navigation .main-nav ul > li.menu-item-has-children > a {
white-space: nowrap;
flex: 1 1 auto;
min-width: 0;
}
.main-navigation .main-nav ul > li.menu-item-has-children > .dropdown-menu-toggle {
flex-shrink: 0;
}
/* Dropdown-Fix: display:flex + align-items:center am li verändert die
CSS-static-position von absolut positionierten Kindern. Das sub-menu muss
daher explizit unter dem li-Element verankert werden (top:100%, left:0),
damit es nicht vertikal zentriert oder nach oben verschoben erscheint. */
.main-navigation .main-nav > ul > li.menu-item-has-children > ul,
.main-navigation .main-nav > ul > li.menu-item-has-children > ul.sub-menu {
position: absolute !important;
top: 100% !important;
left: 0 !important;
}
/* Dropdown-Submenü */
.main-navigation .main-nav ul ul {
background: #fffdf9;
border: 1px solid rgba(180,150,100,.25);
border-top: 2px solid #c9a326;
border-radius: 0 0 8px 8px;
box-shadow: 0 8px 28px rgba(60,30,10,.10);
padding: .4rem 0;
min-width: 260px;
}
/* 2. Ebene: li mit Unter-Untermenü — Flex für vertikale Pfeil-Zentrierung */
.main-navigation .main-nav ul ul li.menu-item-has-children {
display: flex;
align-items: center;
}
.main-navigation .main-nav ul ul li.menu-item-has-children > a {
flex: 1 1 auto;
min-width: 0;
}
.main-navigation .main-nav ul ul li.menu-item-has-children .dropdown-menu-toggle {
float: none;
flex: 0 0 auto;
align-self: center;
margin-top: 0;
padding-top: 0;
padding-bottom: 0;
padding-right: .75rem;
padding-left: .5rem;
}
.main-navigation .main-nav ul ul > li > a,
.main-navigation .main-nav ul ul > li > a:visited {
color: #3a3228 !important;
font-size: .85rem;
font-weight: 500;
padding: .5rem 1.2rem;
border-radius: 0;
transition: background var(--dp-t), color var(--dp-t);
}
.main-navigation .main-nav ul ul > li > a::after {
display: none;
}
.main-navigation .main-nav ul ul > li > a:hover,
.main-navigation .main-nav ul ul > li > a:focus-visible {
background: rgba(201,163,38,.08) !important;
color: #c9a326 !important;
outline: none;
}
}
/* ── Panelium-Guthaben Badge im Desktop-Menü ────────────────────────────── */
.dp-nav-balance {
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .3rem .75rem .3rem .6rem;
background: rgba(201,163,38,.12);
border: 1px solid rgba(201,163,38,.35);
border-radius: 999px;
line-height: 1;
pointer-events: none;
cursor: default;
white-space: nowrap;
}
/* In GeneratePress-Kontexten sitzt das direkt in der Navliste */
.main-navigation .main-nav ul > li.dp-nav-balance {
display: inline-flex;
align-items: center;
padding: 0 .5rem;
}
.main-navigation .main-nav ul > li.dp-nav-balance > a {
display: none; /* kein Link-Wrapper beim injizierten */
}
.dp-nav-balance__icon {
font-size: 1rem;
color: var(--dp-accent);
line-height: 1;
}
.dp-nav-balance__value {
font-family: var(--dp-font-ui);
font-size: .825rem;
font-weight: 600;
color: var(--dp-n-100);
letter-spacing: .01em;
}
/* Mobile: Badge ausblenden (Balance ist dort per [dp_header]-Shortcode sichtbar) */
@media (max-width: 767px) {
.dp-nav-balance {
display: none !important;
}
}
/* =========================================================================
9. Community-Boxen — .dp-community-box
========================================================================= */
/* ── Basis-Box ─────────────────────────────────────────────────────────── */
.dp-community-box {
font-family: var(--dp-font-body);
background: var(--dp-bg-subtle);
border: var(--dp-line);
border-radius: var(--dp-radius-lg);
padding: var(--dp-sp-6) var(--dp-sp-8);
max-width: 560px;
margin: var(--dp-sp-6) 0;
}
.dp-community-box__title {
font-family: var(--dp-font-headline);
font-size: 1.15rem;
font-weight: 700;
color: var(--dp-text);
margin: 0 0 var(--dp-sp-3);
line-height: 1.3;
}
/* ── Support-Box ────────────────────────────────────────────────────────── */
.dp-support-box {
border-left: 4px solid var(--dp-accent);
}
.dp-support-box .dp-community-box__icon {
color: var(--dp-accent);
margin-bottom: var(--dp-sp-3);
display: block;
}
.dp-community-box__text {
color: var(--dp-text-muted);
font-size: .9rem;
line-height: 1.6;
margin: 0 0 var(--dp-sp-4);
}
.dp-community-box__actions {
display: flex;
flex-wrap: wrap;
gap: var(--dp-sp-3);
margin-bottom: var(--dp-sp-3);
}
.dp-community-box__hint {
font-size: .8rem;
color: var(--dp-text-muted);
margin: 0;
}
/* ── Social-Box ─────────────────────────────────────────────────────────── */
.dp-social-box {
border-left: 4px solid var(--dp-primary);
}
.dp-social-box__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--dp-sp-2);
}
.dp-social-box__item a {
display: inline-flex;
align-items: center;
gap: var(--dp-sp-3);
color: var(--dp-primary);
text-decoration: none;
font-size: .9rem;
font-weight: 500;
padding: var(--dp-sp-2) 0;
transition: color var(--dp-t);
}
.dp-social-box__item a:hover {
color: var(--dp-primary-dark);
text-decoration: underline;
}
.dp-social-box__icon {
flex-shrink: 0;
color: inherit;
line-height: 0;
}
.dp-social-box__label {
line-height: 1.4;
}
/* =========================================================================
10. STIV-Übersichtsseite — [dp_stiv_overview]
Star Trek IV: The Voyage Home – Besprechungsreihe
========================================================================= */
.dp-stiv-overview {
font-family: var(--dp-font-body);
color: var(--dp-text);
}
/* ── Hero / Intro ────────────────────────────────────────────────��────────── */
.dp-stiv-hero {
background: var(--dp-n-800);
border-radius: var(--dp-radius-lg);
padding: var(--dp-sp-10) var(--dp-sp-8);
margin-bottom: var(--dp-sp-10);
position: relative;
overflow: hidden;
}
.dp-stiv-hero::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: linear-gradient(to bottom, var(--dp-primary), var(--dp-accent));
border-radius: var(--dp-radius-lg) 0 0 var(--dp-radius-lg);
}
.dp-stiv-hero__label {
font-family: var(--dp-font-body);
font-size: .68rem;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--dp-primary-light);
margin-bottom: var(--dp-sp-3);
}
.dp-stiv-hero__title {
font-family: var(--dp-font-headline);
font-size: clamp(1.35rem, 3vw, 1.9rem);
font-weight: 700;
color: #ffffff;
margin: 0 0 var(--dp-sp-4);
line-height: 1.2;
letter-spacing: -.01em;
}
.dp-stiv-hero__intro {
font-size: .93rem;
color: var(--dp-n-300);
line-height: 1.72;
max-width: 640px;
margin: 0 0 var(--dp-sp-6);
}
.dp-stiv-hero__meta {
display: flex;
gap: var(--dp-sp-2);
flex-wrap: wrap;
}
.dp-stiv-hero__badge {
display: inline-flex;
align-items: center;
gap: var(--dp-sp-1);
font-family: var(--dp-font-body);
font-size: .73rem;
font-weight: 600;
color: var(--dp-n-300);
background: rgba(255, 255, 255, .07);
border: 1px solid rgba(255, 255, 255, .11);
border-radius: 20px;
padding: 3px 11px;
}
/* ── Trennlinien ──────────────────────────────────────────────────────────── */
.dp-stiv-divider {
border: none;
border-top: var(--dp-line);
margin: var(--dp-sp-10) 0;
}
/* ── Abschnitts-Überschriften ────────────────────────��────────────────────── */
.dp-stiv-section-heading {
font-family: var(--dp-font-headline);
font-size: 1.0rem;
font-weight: 700;
color: var(--dp-text);
margin: 0 0 var(--dp-sp-6);
display: flex;
align-items: baseline;
gap: var(--dp-sp-3);
flex-wrap: wrap;
}
.dp-stiv-section-heading__count {
font-family: var(--dp-font-body);
font-size: .8rem;
font-weight: 400;
color: var(--dp-text-muted);
}
/* ── Teilpost-Karten ─────────────────────────────────────────────────────���── */
.dp-stiv-parts-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--dp-sp-3);
}
.dp-stiv-part-card {
display: flex;
gap: var(--dp-sp-4);
align-items: flex-start;
background: var(--dp-bg);
border: var(--dp-line);
border-radius: var(--dp-radius);
padding: var(--dp-sp-4) var(--dp-sp-5);
position: relative;
overflow: hidden;
transition: border-color var(--dp-t), box-shadow var(--dp-t);
text-decoration: none;
}
.dp-stiv-part-card::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--dp-border-strong);
transition: background var(--dp-t-slow);
}
.dp-stiv-part-card:hover {
border-color: var(--dp-border-strong);
box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}
.dp-stiv-part-card:hover::before {
background: var(--dp-primary);
}
.dp-stiv-part-card__num {
flex-shrink: 0;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--dp-font-headline);
font-size: .78rem;
font-weight: 700;
color: var(--dp-text-muted);
background: var(--dp-bg-subtle);
border: var(--dp-line);
border-radius: 50%;
margin-top: 1px;
flex-shrink: 0;
}
.dp-stiv-part-card__body {
flex: 1;
min-width: 0;
}
.dp-stiv-part-card__title {
font-family: var(--dp-font-headline);
font-size: .94rem;
font-weight: 700;
color: var(--dp-text);
text-decoration: none;
display: block;
line-height: 1.35;
margin-bottom: var(--dp-sp-1);
transition: color var(--dp-t);
}
.dp-stiv-part-card__title:hover {
color: var(--dp-primary);
text-decoration: none;
}
.dp-stiv-part-card__meta {
font-size: .74rem;
color: var(--dp-text-muted);
margin-bottom: var(--dp-sp-2);
display: flex;
gap: var(--dp-sp-2);
align-items: center;
flex-wrap: wrap;
}
.dp-stiv-part-card__dot {
color: var(--dp-border-strong);
}
.dp-stiv-part-card__excerpt {
font-size: .865rem;
color: var(--dp-n-600);
line-height: 1.57;
margin: 0;
}
/* ── Kommentare-Abschnitt ─────────────────────────────────────────────────── */
.dp-stiv-comments-empty {
font-style: italic;
color: var(--dp-text-muted);
font-size: .9rem;
padding: var(--dp-sp-5) var(--dp-sp-6);
background: var(--dp-bg-subtle);
border-radius: var(--dp-radius);
border: var(--dp-line);
text-align: center;
}
.dp-stiv-comment-group {
margin-bottom: var(--dp-sp-8);
}
.dp-stiv-comment-group__header {
display: flex;
align-items: baseline;
gap: var(--dp-sp-2);
flex-wrap: wrap;
padding: var(--dp-sp-3) var(--dp-sp-4);
background: var(--dp-primary-subtle);
border-left: 3px solid var(--dp-primary);
border-radius: 0 var(--dp-radius-sm) var(--dp-radius-sm) 0;
margin-bottom: var(--dp-sp-4);
}
.dp-stiv-comment-group__from {
font-size: .7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .09em;
color: var(--dp-primary);
flex-shrink: 0;
}
.dp-stiv-comment-group__link {
font-family: var(--dp-font-headline);
font-size: .88rem;
font-weight: 700;
color: var(--dp-text);
text-decoration: none;
transition: color var(--dp-t);
}
.dp-stiv-comment-group__link:hover {
color: var(--dp-primary);
text-decoration: none;
}
.dp-stiv-comment-group__count {
font-size: .73rem;
color: var(--dp-text-muted);
margin-left: auto;
white-space: nowrap;
flex-shrink: 0;
}
.dp-stiv-comment-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--dp-sp-3);
}
.dp-stiv-comment {
background: var(--dp-bg);
border: var(--dp-line);
border-radius: var(--dp-radius);
padding: var(--dp-sp-4) var(--dp-sp-5);
}
.dp-stiv-comment__meta {
font-size: .76rem;
color: var(--dp-text-muted);
margin-bottom: var(--dp-sp-2);
display: flex;
gap: var(--dp-sp-2);
align-items: center;
flex-wrap: wrap;
}
.dp-stiv-comment__author {
font-weight: 600;
color: var(--dp-n-700);
}
.dp-stiv-comment__dot {
color: var(--dp-border-strong);
}
.dp-stiv-comment__body {
font-size: .89rem;
line-height: 1.63;
color: var(--dp-text);
}
.dp-stiv-comment__body p {
margin: 0 0 var(--dp-sp-2);
}
.dp-stiv-comment__body p:last-child {
margin-bottom: 0;
}
/* ── Leer-Zustand ───────────────────────────────────────────────────────���─── */
.dp-stiv-empty {
font-style: italic;
color: var(--dp-text-muted);
padding: var(--dp-sp-8);
background: var(--dp-bg-subtle);
border: var(--dp-line);
border-radius: var(--dp-radius);
text-align: center;
font-size: .9rem;
}
/* ── Responsive ───────────────────────────────────────────────────────────��─ */
@media (max-width: 600px) {
.dp-stiv-hero {
padding: var(--dp-sp-8) var(--dp-sp-5);
margin-bottom: var(--dp-sp-8);
}
.dp-stiv-part-card {
gap: var(--dp-sp-3);
padding: var(--dp-sp-3) var(--dp-sp-4);
}
.dp-stiv-part-card__num {
width: 24px;
height: 24px;
font-size: .7rem;
}
.dp-stiv-comment-group__count {
margin-left: 0;
}
.dp-stiv-divider {
margin: var(--dp-sp-8) 0;
}
}
/* =========================================================================
23/24. (HomepageLayout + HomepageShortcode CSS removed — shortcodes unregistered)
========================================================================= */
/* =========================================================================
25. Homepage Rev 36 — Featured Cards, Excerpts, Memory, Closing Section
========================================================================= */
/* ---- Memory-Sektion: Dual-CTAs ---- */
.dp-memory__actions {
display: flex;
flex-wrap: wrap;
gap: var(--dp-sp-3);
margin-top: var(--dp-sp-6);
}
/* ---- Closing Section — drei dunkle Tiles ---- */
.dp-section--closing {
background: var(--dp-n-900);
background-image:
radial-gradient(ellipse at 15% 60%, rgba(48,74,152,.20) 0%, transparent 55%),
radial-gradient(ellipse at 85% 20%, rgba(207,22,130,.12) 0%, transparent 50%);
}
.dp-section--closing .dp-section__eyebrow {
color: var(--dp-accent-light);
}
.dp-section--closing .dp-section__title {
color: var(--dp-n-0);
}
/* Zentrierter Header (kein Space-between) */
.dp-section__header--centered {
justify-content: center;
text-align: center;
}
/* Tile-Grid: 1 Spalte → 3 Spalten ab 640 px */
.dp-closing-tiles {
display: grid;
grid-template-columns: 1fr;
gap: var(--dp-sp-6);
margin-top: var(--dp-sp-8);
}
@media (min-width: 640px) {
.dp-closing-tiles {
grid-template-columns: repeat(3, 1fr);
gap: var(--dp-sp-7);
}
}
/* Einzelne Tile */
.dp-closing-tile {
background: rgba(255, 255, 255, .04);
border: 1px solid rgba(255, 255, 255, .08);
border-radius: var(--dp-radius-xl);
padding: var(--dp-sp-8) var(--dp-sp-7);
display: flex;
flex-direction: column;
gap: var(--dp-sp-4);
transition: background var(--dp-t);
}
.dp-closing-tile:hover {
background: rgba(255, 255, 255, .07);
}
/* Sternenflotte-Tile — blaue Akzentborder */
.dp-closing-tile--fleet {
border-color: rgba(48, 74, 152, .35);
}
/* Tile-Icon */
.dp-closing-tile__icon {
font-size: 2rem;
line-height: 1;
color: var(--dp-primary-light);
}
.dp-closing-tile--fleet .dp-closing-tile__icon {
color: var(--dp-primary-light);
}
.dp-closing-tile--podcast .dp-closing-tile__icon {
color: var(--dp-accent-light);
}
.dp-closing-tile--shop .dp-closing-tile__icon {
color: var(--dp-n-400);
}
/* SVG-Icons in Tiles: feste Größe über CSS */
.dp-closing-tile__icon svg {
display: block;
width: 2.5rem;
height: 2.5rem;
opacity: .7;
}
/* Tile-Titel */
.dp-closing-tile__title {
font-family: var(--dp-font-headline);
font-size: var(--dp-text-lg);
font-weight: 700;
color: #fff;
margin: 0;
line-height: var(--dp-lh-tight);
letter-spacing: var(--dp-tracking-snug);
}
/* Tile-Text */
.dp-closing-tile__text {
font-size: var(--dp-text-sm);
color: var(--dp-n-400);
line-height: var(--dp-lh-base);
margin: 0;
flex: 1; /* drückt CTA ans Ende */
}
/* =========================================================================
26. Landingpage Polish — WP/GP Theme-Reste + Final Polish
========================================================================= */
/* ── C. Hero-Sektion: visueller Übergangs-Streifen am unteren Rand */
.dp-section--hero {
position: relative;
}
.dp-section--hero::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(
90deg,
transparent 0%,
var(--dp-border-strong) 25%,
var(--dp-border-strong) 75%,
transparent 100%
);
pointer-events: none;
}
/* ── D. Ghost-Buttons auf dunklem Hintergrund sichtbar machen ────────────── */
.dp-section--memory .dp-btn--ghost,
.dp-section--closing .dp-btn--ghost {
color: var(--dp-n-200);
border-color: rgba(255, 255, 255, .2);
}
.dp-section--memory .dp-btn--ghost:hover,
.dp-section--closing .dp-btn--ghost:hover {
background: rgba(255, 255, 255, .07);
color: #fff;
border-color: rgba(255, 255, 255, .4);
text-decoration: none;
transform: translateY(-1px);
}
.dp-section--memory .dp-btn--ghost:focus-visible,
.dp-section--closing .dp-btn--ghost:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}
/* ── E. Mikro-UX ─────────────────────────────────────────────────────────── */
/* Touch-Target: Mindestgröße für Accessibility */
.dp-btn {
min-height: 44px;
}
/* Ranking-Listeneinträge: Hover subtiler machen */
.dp-ranking-list__item {
cursor: default;
}
.dp-ranking-list__title a {
cursor: pointer;
}
/* =========================================================================
27. [dp_homepage] — Wrapper-Alias für das neue Homepage-System (Rev 38)
=========================================================================
Alle Scoped-Regeln, die bisher .dp-layout-home als Selektor hatten,
gelten jetzt auch für .dp-homepage. So bleibt der alte Shortcode-Wrapper
kompatibel, falls er noch irgendwo im DB-Content auftaucht.
========================================================================= */
/* Basis-Layout — Flex-Column analog zu .dp-layout-home */
.dp-homepage {
display: flex;
flex-direction: column;
}
/* Full-Bleed: .dp-homepage bricht aus dem GP-Container aus */
body.dp-full-layout .dp-homepage {
margin-left: calc(50% - 50vw);
width: 100vw;
box-sizing: border-box;
}
/* Verhindert horizontale Scrollleiste durch 100vw > sichtbarer Viewport (Windows-Scrollbar ~17px).
clip statt hidden: kein Scroll-Container → position:sticky der Navbar bleibt funktional. */
body.dp-full-layout {
overflow-x: clip;
}
/* Homepage Lightmode: Body auf GP-Streifen-Farbe zwingen, Alternierung warm */
html:not(.dp-dark) body.dp-full-layout {
background-color: #ebe8e2 !important;
}
html:not(.dp-dark) .dp-homepage .dp-section:nth-child(even) {
background: #f5f2eb;
}
/* Typografie-Scope — identisch zu .dp-layout-home (Section 2b) */
.dp-homepage {
font-family: var(--dp-font-body);
font-size: var(--dp-text-base);
line-height: var(--dp-lh-base);
color: var(--dp-text-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.dp-homepage h1,
.dp-homepage h2,
.dp-homepage h3 {
font-family: var(--dp-font-headline);
color: var(--dp-text-heading);
letter-spacing: var(--dp-tracking-tight);
line-height: var(--dp-lh-tight);
font-weight: 700;
margin-top: 0;
margin-bottom: var(--dp-sp-3);
}
.dp-homepage h1 { font-size: var(--dp-text-3xl); }
.dp-homepage h2 { font-size: var(--dp-text-2xl); }
.dp-homepage h3 {
font-size: var(--dp-text-xl);
letter-spacing: var(--dp-tracking-snug);
}
.dp-homepage h4,
.dp-homepage h5,
.dp-homepage h6 {
font-family: var(--dp-font-headline);
color: var(--dp-text-heading);
letter-spacing: var(--dp-tracking-snug);
line-height: var(--dp-lh-snug);
font-weight: 600;
margin-top: 0;
margin-bottom: var(--dp-sp-2);
}
.dp-homepage h4 { font-size: var(--dp-text-lg); }
.dp-homepage h5 { font-size: var(--dp-text-base); }
.dp-homepage h6 { font-size: var(--dp-text-sm); }
.dp-homepage p {
margin-top: 0;
margin-bottom: var(--dp-sp-3);
color: var(--dp-text-body);
}
.dp-homepage .dp-lead {
font-size: var(--dp-text-lg);
line-height: var(--dp-lh-snug);
color: var(--dp-text-muted);
}
.dp-homepage a {
color: var(--dp-primary);
text-decoration: none;
}
.dp-homepage a:hover {
text-decoration: underline;
text-underline-offset: 0.2em;
}
.dp-homepage button,
.dp-homepage input,
.dp-homepage select,
.dp-homepage textarea {
font-family: var(--dp-font-ui);
}
/* Marken-Textauswahl */
.dp-homepage ::selection {
background: rgba(var(--dp-accent-rgb), .18);
color: inherit;
}
/* Fokus-Ring: sichtbar für Tastatur-Navigation */
.dp-homepage a:focus-visible:not(.dp-btn) {
outline: 2px solid var(--dp-primary);
outline-offset: 2px;
border-radius: var(--dp-radius-sm);
}
/* ── F. Mobile Polish — kein Kollaps, sauberes Stacking ─────────────────── */
@media (max-width: 599px) {
/* Section-Padding reduzieren — weniger Leerraum auf kleinen Screens */
.dp-section {
padding-block: var(--dp-sp-10);
}
/* Container: schmalere seitliche Abstände */
.dp-container {
padding-inline: var(--dp-sp-4);
}
/* Closing Tiles: weniger Padding, Buttons volle Breite */
.dp-closing-tile {
padding: var(--dp-sp-6) var(--dp-sp-5);
}
.dp-closing-tile .dp-btn {
width: 100%;
justify-content: center;
}
/* Memory-Aktionen: untereinander statt nebeneinander */
.dp-memory__actions {
flex-direction: column;
}
.dp-memory__actions .dp-btn {
width: 100%;
justify-content: center;
}
/* Section-Header: kein zu enger Abstand */
.dp-section__header {
margin-bottom: var(--dp-sp-6);
}
}
/* =========================================================================
28. Rev 39 — Visueller Neustart: Hero · Interaction Strip · Cards · Nav
=========================================================================
A. Hero-Markenband (Logo only, kein Claim-Text)
B. Hero-Post-Karte (quadratisches Cover + Content + Player)
C. Community-Sidebar
D. Interaction Strip (Game · Bewerten · Sternenflotte)
E. Card-Upgrades (multi-layer shadow, Panel-Look)
F. Grafische Elemente (Glow, Divider, Texture)
G. Bottom Navigation (Desktop ausblenden)
========================================================================= */
/* ── C. Interaction Strip ────────────────────────────────────────────────── */
.dp-interaction-strip {
background: var(--dp-n-900);
background-image:
radial-gradient(circle at 20% 50%, rgba(48, 74, 152, .18) 0%, transparent 60%),
radial-gradient(circle at 80% 50%, rgba(207, 22, 130, .10) 0%, transparent 60%);
padding-block: var(--dp-sp-5);
position: relative;
}
/* Feine Scan-Line-Textur */
.dp-interaction-strip::before {
content: '';
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(
0deg,
transparent,
transparent 3px,
rgba(255, 255, 255, .015) 3px,
rgba(255, 255, 255, .015) 4px
);
pointer-events: none;
}
.dp-interaction-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1px;
background: rgba(255, 255, 255, .06);
border-radius: var(--dp-radius-lg);
overflow: hidden;
}
@media (min-width: 560px) {
.dp-interaction-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.dp-interaction-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--dp-sp-2);
padding: var(--dp-sp-5) var(--dp-sp-4);
background: rgba(255, 255, 255, .03);
text-decoration: none;
color: var(--dp-n-300);
text-align: center;
transition:
background var(--dp-t),
color var(--dp-t);
position: relative;
cursor: pointer;
}
.dp-interaction-card::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%) scaleX(0);
width: 40%;
height: 2px;
border-radius: 0 0 2px 2px;
transition: transform var(--dp-t-slow);
}
.dp-interaction-card--game::before { background: var(--dp-primary); }
.dp-interaction-card--vote::before { background: var(--dp-accent); }
.dp-interaction-card--fleet::before { background: #3dd6c0; }
.dp-interaction-card:hover {
background: rgba(255, 255, 255, .07);
color: #fff;
text-decoration: none;
}
.dp-interaction-card:hover::before {
transform: translateX(-50%) scaleX(1);
}
.dp-interaction-card:hover .dp-interaction-card__icon {
transform: translateY(-2px);
}
.dp-interaction-card__icon {
display: flex;
align-items: center;
justify-content: center;
transition: transform var(--dp-t-slow);
color: inherit;
}
.dp-interaction-card--game:hover .dp-interaction-card__icon { color: var(--dp-primary-light, #7fa0ff); }
.dp-interaction-card--vote:hover .dp-interaction-card__icon { color: var(--dp-accent); }
.dp-interaction-card--fleet:hover .dp-interaction-card__icon { color: #3dd6c0; }
.dp-interaction-card__label {
font-family: var(--dp-font-headline);
font-size: var(--dp-text-sm);
font-weight: 700;
letter-spacing: var(--dp-tracking-snug);
color: inherit;
line-height: 1.2;
}
.dp-interaction-card__sub {
font-size: var(--dp-text-xs);
color: var(--dp-n-500);
letter-spacing: var(--dp-tracking-normal);
line-height: 1.3;
}
/* ── E. Card-Upgrades — Panel-Look, Materialität ─────────────────────────── */
/* Ranking-Liste: Panel-Look */
.dp-ranking-list__item {
background: var(--dp-surface-raised);
border: 1px solid rgba(0, 0, 0, .05);
box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
border-radius: var(--dp-radius);
margin-bottom: var(--dp-sp-2);
transition: box-shadow var(--dp-t), border-color var(--dp-t);
}
.dp-ranking-list__item:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, .08), 0 0 0 1px rgba(48, 74, 152, .1);
border-color: rgba(48, 74, 152, .12);
}
.dp-ranking-list__panelium {
display: inline-flex;
align-items: center;
gap: 4px;
}
/* ── F. Grafische Elemente: Glow, Divider ────────────────────────────────── */
/* Hero-Section: leichter Tiefen-Gradient */
.dp-section--hero {
background:
radial-gradient(ellipse at 60% 0%, rgba(48, 74, 152, .07) 0%, transparent 60%),
var(--dp-bg);
position: relative;
padding-top: 0;
}
/* Dekorativer Divider zwischen Hero und Interaction Strip */
.dp-section--hero::after {
display: none; /* kein zusätzlicher after — Strip hat eigenes BG */
}
/* Sektions-Divider: feine Linie mit Mittelpunkt-Ornament */
.dp-section + .dp-section {
position: relative;
}
/* Memory-Sektion: Panel-Icon aufwerten */
.dp-memory__icon {
color: rgba(255, 255, 255, .3);
display: flex;
align-items: center;
justify-content: center;
}
.dp-memory__symbol {
display: none; /* altes ◈-Zeichen — durch SVG im PHP ersetzt */
}
/* ── G. Bottom Navigation ────────────────────────────────────────────────── */
/* Desktop: Nav ausblenden — nur Mobile sinnvoll */
@media (min-width: 860px) {
.dp-nav {
display: none;
}
}
/* Mobile: Nav wieder auf volle Breite (kein Center-Crop) */
@media (max-width: 859px) {
.dp-nav {
left: 0;
right: 0;
transform: none;
width: 100%;
max-width: none;
border-radius: 0;
border-left: none;
border-right: none;
}
}
/* ── H. Section Hero: zusätzliche Desktop-Optimierungen ─────────────────── */
/* Auf sehr breiten Screens: mehr Luft im Hero-Grid */
@media (min-width: 1100px) {
.dp-section--hero > .dp-container {
padding-top: var(--dp-sp-10);
padding-bottom: var(--dp-sp-12);
}
}
/* Interaction Strip: Mobile — volle Karten statt Side-by-Side */
@media (max-width: 559px) {
.dp-interaction-card {
flex-direction: row;
justify-content: flex-start;
text-align: left;
padding: var(--dp-sp-4) var(--dp-sp-5);
gap: var(--dp-sp-4);
}
.dp-interaction-card::before {
width: 100%;
left: 0;
transform: scaleX(0);
transform-origin: left;
}
.dp-interaction-card:hover::before {
transform: scaleX(1);
}
}
/* ── Rev 40 — GP-Kompatibilität, Kontrast, Korrekturen ─────────────────── */
/* Hero Section: Atemraum nach dem GP-Site-Header */
.dp-section--hero {
padding-top: var(--dp-sp-10);
}
@media (min-width: 860px) {
.dp-section--hero {
padding-top: var(--dp-sp-12);
}
}
/* ── Interaction Strip — besser lesbar und kontrastreicher ───────────────── */
/* Karten: mehr Grundhelligkeit auf dunklem Grund */
.dp-interaction-card {
background: rgba(255, 255, 255, .06);
border-bottom: 1px solid rgba(255, 255, 255, .04);
}
.dp-interaction-card:hover {
background: rgba(255, 255, 255, .12);
}
/* Label: helleres Weiß */
.dp-interaction-card__label {
color: var(--dp-n-100); /* fast weiß statt n-300 */
}
/* Sub-Text: besser lesbar */
.dp-interaction-card__sub {
color: var(--dp-n-400); /* heller als bisheriges n-500 */
}
/* Trennlinie zwischen Grid-Zellen sichtbarer */
.dp-interaction-grid {
background: rgba(255, 255, 255, .08);
}
/* Ranking: sichtbarere Trennung */
.dp-ranking-list__item {
border-color: var(--dp-border);
}
/* ── Desktop Bottom-Nav Padding: bereits 768px abgedeckt ────────────────── */
/* Sicherheitshalber auch bei 860px aufheben (Section 28 override) */
@media (min-width: 860px) {
body.has-dp-nav {
padding-bottom: 0;
}
}
/* ── News-Panel ──────────────────────────────────────────────────────────── */
.dp-news-panel {
background: var(--dp-surface-raised);
border-radius: var(--dp-radius-xl);
border: 1px solid var(--dp-border);
border-top: 3px solid var(--dp-secondary, #cf1682);
box-shadow:
0 1px 4px rgba(0, 0, 0, .05),
0 4px 16px rgba(0, 0, 0, .07);
overflow: hidden;
}
.dp-news-panel__eyebrow {
font-size: var(--dp-text-xs);
font-weight: 600;
letter-spacing: var(--dp-tracking-wide);
text-transform: uppercase;
color: var(--dp-secondary, #cf1682);
margin: 0;
padding: var(--dp-sp-4) var(--dp-sp-5) 0;
}
.dp-news-panel__thumb {
display: block;
width: 100%;
aspect-ratio: 16 / 7;
overflow: hidden;
background: var(--dp-n-100);
margin-top: var(--dp-sp-3);
}
.dp-news-panel__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .35s ease;
}
.dp-news-panel:hover .dp-news-panel__thumb img {
transform: scale(1.04);
}
.dp-news-panel__body {
padding: var(--dp-sp-4) var(--dp-sp-5) var(--dp-sp-5);
display: flex;
flex-direction: column;
gap: var(--dp-sp-2);
}
.dp-news-panel__date {
font-size: var(--dp-text-xs);
color: var(--dp-text-muted);
margin: 0;
}
.dp-news-panel__title {
font-family: var(--dp-font-headline);
font-size: var(--dp-text-base);
font-weight: 700;
color: var(--dp-text-heading);
letter-spacing: var(--dp-tracking-snug);
line-height: var(--dp-lh-snug);
margin: 0;
}
.dp-news-panel__title a {
color: inherit;
text-decoration: none;
transition: color var(--dp-t);
}
.dp-news-panel__title a:hover {
color: var(--dp-primary);
}
.dp-news-panel__excerpt {
font-size: var(--dp-text-sm);
color: var(--dp-text-muted);
line-height: var(--dp-lh-base);
margin: 0;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.dp-news-panel__link {
font-size: var(--dp-text-sm);
font-weight: 600;
color: var(--dp-primary);
text-decoration: none;
margin-top: var(--dp-sp-1);
transition: color var(--dp-t);
}
.dp-news-panel__link:hover {
color: var(--dp-primary);
text-decoration: underline;
}
/* ══════════════════════════════════════════════════════════════════════════
Section 29 — Rev 43 · Grafik-Assets aus uploads/graphics
══════════════════════════════════════════════════════════════════════════
Asset-Mapping:
panelium.png → Panelium-Badge (Hexagon, Gold, "PANELIUM")
2.png.png → Interaction-Strip-Hintergrund (Sternfeld / Milchstraße)
3.png.png → Memory-Sektion Hintergrund (warmer Partikel-Glow)
4.png → Sektion-Divider (goldene Zierlinie + Diamant-Ornament)
*/
/* ── Interaction Strip: subtile Radial-Akzente, kein Sternfeld ──────────
Warme Magazin-Richtung: kein Space-/Galaxy-Foto-Hintergrund.
*/
.dp-interaction-strip {
background-image:
radial-gradient(circle at 20% 50%, rgba(48, 74, 152, .10) 0%, transparent 60%),
radial-gradient(circle at 80% 50%, rgba(207, 22, 130, .07) 0%, transparent 60%);
}
/* ── Memory-Sektion: Partikel-Glow als atmosphärischer Hintergrund ───────
Dunkle Semi-Transparenz-Schicht oben, damit Text lesbar bleibt.
Der warme goldene Kern des Fotos scheint sichtbar durch.
position: relative und overflow: hidden sind im Basis-CSS bereits gesetzt.
*/
.dp-section--memory {
background-image:
linear-gradient(rgba(4, 8, 20, .70), rgba(4, 8, 20, .58)),
url('/wp-content/uploads/graphics/3.png.png');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
/* Memory-Sektion: Textfarben bleiben lesbar (bereits in Basis-CSS definiert,
aber explizit hier als Rev-43-Absicherung */
.dp-section--memory .dp-memory__detail {
color: rgba(255, 255, 255, .45);
border-top-color: rgba(255, 255, 255, .12);
}
/* ── Panelium-Badge (PNG-Asset 1) ────────────────────────────────────────
Wird in Memory-Sektion (96px) und Closing-Fleet-Tile (72px) eingesetzt.
border-radius: 50% schneidet den dunklen Außenrand des PNGs sauber ab
und macht den Badge zu einer runden, badge-artigen Darstellung.
*/
.dp-panelium-badge {
display: block;
border-radius: 50%;
object-fit: cover;
}
/* Im Memory-Block: etwas größer, leichter Glow-Ring zur Betonung */
.dp-memory__icon .dp-panelium-badge {
width: 96px;
height: 96px;
box-shadow:
0 0 0 1px rgba(200, 132, 42, .25),
0 0 24px rgba(200, 132, 42, .20),
0 4px 16px rgba(0, 0, 0, .45);
}
/* Im Closing-Fleet-Tile: kompakter, passend zur Tile-Größe */
.dp-panelium-badge--tile {
width: 72px;
height: 72px;
box-shadow:
0 0 0 1px rgba(200, 132, 42, .20),
0 0 16px rgba(200, 132, 42, .15);
}
/* ── Allgemeine Warmth-Verbesserungen ────────────────────────────────────
Subtile Anpassungen die das Layout weniger steril wirken lassen.
*/
/* Hero-Section: wärmerer Schatten unten — visuelle Schwere */
.dp-section--hero {
box-shadow: 0 4px 40px rgba(0, 0, 0, .06);
}
/* Closing-Fleet-Tile: wärmere Akzentborder */
.dp-closing-tile--fleet {
border-color: rgba(200, 132, 42, .30); /* Gold statt Blau */
border-top: 2px solid rgba(200, 132, 42, .50);
}
/* Ranking-Items: etwas mehr Substanz */
.dp-ranking-list__item {
transition: background var(--dp-t);
}
.dp-ranking-list__item:hover {
background: var(--dp-primary-subtle);
}
/*
Sections 30 + 31 entfernt (Rev 48 Reset, 2026-04-13).
Section 30: dp-hero-post__* Klassen — Markup aus Rev 44 nicht mehr aktiv.
Section 31: dp-hero-tile Klassen — Markup aus Rev 45 nicht mehr aktiv.
Kein aktiver PHP-Code verwendet diese Klassen.
*/
/* [Section 30/31 CSS hier entfernt — siehe Kommentar oben] */
/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
Section 32 — Rev 48 · Warm Magazine Reset (2026-04-13)
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
Design-Reset: Warmes Magazin / Fanzine. Entfernt:
- Dark Stage Hero (Navy + Sternfeld + Glassmorphism) aus Rev 46
- Illustrated Dark Editorial System aus Rev 47
Feste Invarianten:
1. Cover quadratisch — immer, ueberall (padding-top-Trick, browseruebergreifend).
2. Logo gross + praesent — max 200x200px auf der Homepage.
*/
/* ── Homepage: warmes Off-White ─────────────────────────────────────────── */
.dp-homepage {
background: #f5f2ec;
}
.dp-section--ranking {
background: transparent;
}
/* ── Hero-Stage Layout (dp-hero-stage) ─────────────────────────────────── */
.dp-section--hero {
padding-top: 0;
}
.dp-section--hero > .dp-container {
padding-top: var(--dp-sp-8);
padding-bottom: var(--dp-sp-10);
}
/*
* Hero-Stage Grid: 3 Zonen horizontal auf Desktop, gestapelt auf Mobile.
*
* Zone 1 (cover): quadratisches Episodenbild — Invariante
* Zone 2 (text): Titel + Excerpt + CTA
* Zone 3 (player): Podigee-Player NEBEN Text auf Desktop
* Zone 4 (rail): Community + News — immer eine Reihe darunter
*
* Grid-Template-Areas erlauben explizite Platzierung ohne Reihenfolge-Probleme.
* Kein player im DOM (--no-player) → text übernimmt player-Spalte.
*/
/* Mobile: gestapelt */
.dp-hero-stage {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"cover"
"text"
"player"
"rail";
gap: var(--dp-sp-4);
align-items: start;
}
.dp-hero-stage__cover { grid-area: cover; }
.dp-hero-stage__text { grid-area: text; }
.dp-hero-stage__player { grid-area: player; }
.dp-hero-stage__rail { grid-area: rail; }
.dp-hero-stage__fallback { grid-area: text / text / player / player; }
/* Tablet 680px: Cover links, Text rechts / Player + Rail voll */
@media (min-width: 680px) {
.dp-hero-stage {
grid-template-columns: 220px 1fr;
grid-template-areas:
"cover text"
"player player"
"rail rail";
gap: var(--dp-sp-5);
}
}
/* Desktop 900px: Cover | Text | Player nebeneinander — Rail darunter */
@media (min-width: 900px) {
.dp-hero-stage {
grid-template-columns: 260px 1fr 300px;
grid-template-areas:
"cover text player"
"rail rail rail";
gap: var(--dp-sp-5);
}
.dp-hero-stage__rail {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--dp-sp-4);
}
/* Kein Player: Text übernimmt Player-Spalte */
.dp-hero-stage--no-player {
grid-template-areas:
"cover text text"
"rail rail rail";
}
/* Kein Post: Fallback über Cover+Text+Player */
.dp-hero-stage--no-post {
grid-template-areas:
"fallback fallback fallback"
"rail rail rail";
}
.dp-hero-stage--no-post .dp-hero-stage__fallback {
grid-area: fallback;
}
}
@media (min-width: 1200px) {
.dp-hero-stage {
grid-template-columns: 300px 1fr 340px;
gap: var(--dp-sp-6);
}
}
/* ── Cover: Bulletproof quadratisch ─────────────────────────────────────
Invariante: Cover IMMER quadratisch — keine Ausnahmen.
padding-top: 100% erzwingt das Quadrat in jedem Grid- und Flex-Kontext.
*/
.dp-hero-stage__cover {
position: relative;
aspect-ratio: unset;
height: auto;
min-height: unset;
align-self: start;
border-radius: var(--dp-radius-xl);
overflow: hidden;
box-shadow:
0 2px 8px rgba(0, 0, 0, .10),
0 8px 32px rgba(0, 0, 0, .12);
}
.dp-hero-stage__cover::before {
content: '';
display: block;
padding-top: 100%;
}
.dp-hero-stage__cover img,
.dp-hero-stage__cover-link {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.dp-hero-stage__cover img {
object-fit: cover;
object-position: center;
display: block;
transition: transform .55s ease;
}
.dp-hero-stage__cover:hover img {
transform: scale(1.04);
}
@media (max-width: 679px) {
.dp-hero-stage__cover {
max-width: 240px;
margin: 0 auto;
}
}
.dp-hero-stage__cover--empty {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(
135deg,
rgba(48, 74, 152, .08) 0%,
rgba(255, 248, 235, .80) 50%,
rgba(207, 22, 130, .06) 100%
);
color: var(--dp-primary);
}
/* ── Body: Text + Player ────────────────────────────────────────────────── */
/* dp-hero-stage__body entfernt (Rev 49) — text und player sind jetzt direkte Grid-Kinder */
.dp-hero-stage__text {
display: flex;
flex-direction: column;
gap: var(--dp-sp-3);
min-width: 0;
align-self: start;
}
.dp-hero-stage__eyebrow {
font-size: 0.62rem;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--dp-primary);
opacity: .80;
margin: 0;
}
.dp-hero-stage__title {
font-family: var(--dp-font-headline);
font-size: clamp(1.4rem, 2.2vw, 2.0rem);
font-weight: 800;
color: var(--dp-n-900);
line-height: 1.15;
letter-spacing: -.03em;
margin: 0;
}
.dp-hero-stage__title a {
color: inherit;
text-decoration: none;
transition: color .2s;
}
.dp-hero-stage__title a:hover {
color: #c9a326;
text-decoration: none;
}
.dp-hero-stage__meta {
font-size: 0.65rem;
font-weight: 600;
letter-spacing: .10em;
text-transform: uppercase;
color: var(--dp-n-500, #6b7280);
margin: 0;
}
.dp-hero-stage__excerpt {
font-family: var(--dp-font-serif);
font-size: var(--dp-text-lead);
line-height: 1.75;
color: var(--dp-n-700);
margin: 0;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.dp-hero-stage__actions {
display: flex;
flex-wrap: wrap;
gap: var(--dp-sp-3);
margin-top: var(--dp-sp-2);
}
/* ── Player ──────────────────────────────────────────────────────────────── */
.dp-hero-stage__player {
background: var(--dp-surface, #f5f7ff);
border: 1px solid rgba(0, 0, 0, .07);
border-radius: var(--dp-radius-xl);
overflow: hidden;
align-self: start; /* nicht auf Grid-Zeilenhöhe strecken */
}
.dp-hero-stage__player-label {
display: flex;
align-items: center;
gap: var(--dp-sp-2);
padding: var(--dp-sp-3) var(--dp-sp-4) 0;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--dp-text-muted);
margin: 0;
}
.dp-hero-stage__player-label svg {
opacity: .55;
width: 12px;
height: 12px;
flex-shrink: 0;
}
.dp-hero-stage__player iframe {
/* Basisregel — Section 35 / Inline-Style vom Podigee JS überschreiben height */
width: 100%;
min-height: 200px;
border: none;
display: block;
background: transparent;
}
/* ── Rail ────────────────────────────────────────────────────────────────── */
.dp-hero-stage__rail {
display: flex;
flex-direction: column;
gap: var(--dp-sp-4);
}
/* ── Fallback (kein Post) ────────────────────────────────────────────────── */
.dp-hero-stage__fallback {
display: flex;
flex-direction: column;
gap: var(--dp-sp-4);
padding: var(--dp-sp-6) 0;
/* Grid-Area wird in den Breakpoint-Regeln oben gesetzt */
}
/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
GP-Anpassungen auf der Homepage (body.dp-full-layout)
Scope: nur Homepage — kein Eingriff in andere Seiten.
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
/* GP-Footer: ausgeblendet auf allen DP-Seiten — dp-hp-footer ersetzt ihn */
body.has-dp-nav .site-footer {
display: none !important;
}
/* -- GP-Wrapper: Padding + Constraints entfernen -- dp-homepage bricht full-bleed aus */
body.dp-full-layout .site-main {
margin: 0 !important;
}
body.dp-full-layout .inside-article {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
body.dp-full-layout .entry-header {
display: none !important;
}
body.dp-full-layout .entry-content {
max-width: none !important;
padding: 0 !important;
}
/* ── GP-Header: Logo gross + praesent ───────────────────────────────────
Ziel: mind. 200 x 200 px auf der Homepage.
Kein Dark-Glass, kein Farb-Override. Nur Logo-Groesse und Header-Padding.
Eine Logo-Instanz. Keine Theme-Kollision.
*/
body.dp-full-layout .site-header .custom-logo,
body.dp-full-layout .site-header .custom-logo-link img,
body.dp-full-layout .site-header .site-logo img,
body.dp-full-layout .site-header img.custom-logo {
max-height: 200px !important;
max-width: 200px !important;
width: auto !important;
height: auto !important;
}
body.dp-full-layout .site-header {
padding-top: var(--dp-sp-4) !important;
padding-bottom: var(--dp-sp-4) !important;
}
/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
Homepage-Footer (dp-hp-footer) — Warmes Creme
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.dp-hp-footer {
background: #f0ebe0;
border-top: 1px solid rgba(0, 0, 0, .10);
padding: var(--dp-sp-12) 0 var(--dp-sp-8);
}
.dp-hp-footer__inner {
display: grid;
grid-template-columns: 1fr;
gap: var(--dp-sp-8);
}
@media (min-width: 640px) {
.dp-hp-footer__inner {
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: var(--dp-sp-10);
align-items: start;
}
}
.dp-hp-footer__site-name {
font-family: var(--dp-font-headline);
font-size: 1.1rem;
font-weight: 700;
color: var(--dp-n-900);
margin: 0 0 var(--dp-sp-3);
letter-spacing: -.02em;
}
.dp-hp-footer__claim {
font-family: var(--dp-font-serif);
font-size: var(--dp-text-sm);
line-height: 1.65;
color: var(--dp-n-600, #5a5e6b);
margin: 0 0 var(--dp-sp-4);
max-width: 22ch;
}
.dp-hp-footer__panelium-note {
display: flex;
align-items: center;
gap: var(--dp-sp-2);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: .10em;
text-transform: uppercase;
color: rgba(140, 90, 20, .80);
margin: 0;
}
.dp-hp-footer__panelium-note svg {
opacity: .70;
flex-shrink: 0;
}
.dp-hp-footer__col-label {
font-size: 0.62rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--dp-n-500, #6b7280);
margin: 0 0 var(--dp-sp-4);
}
.dp-hp-footer__links {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--dp-sp-3);
}
.dp-hp-footer__links li a {
font-size: var(--dp-text-sm);
color: var(--dp-n-700);
text-decoration: none;
transition: color .2s;
}
.dp-hp-footer__links li a:hover {
color: var(--dp-primary);
}
.dp-social-row {
display: flex;
justify-content: center;
gap: 16px;
padding: 20px 0 8px;
border-top: 1px solid rgba(255,255,255,.10);
margin-top: 8px;
}
.dp-social-row__link {
display: flex;
align-items: center;
justify-content: center;
opacity: .65;
transition: opacity .2s, transform .2s;
border-radius: 8px;
}
.dp-social-row__link:hover {
opacity: 1;
transform: translateY(-3px);
}
.dp-social-row__link img {
width: 128px;
height: 128px;
object-fit: contain;
display: block;
}
/* Share-Leiste über Kommentaren */
.dp-share-bar {
padding: 28px 0 16px;
border-top: 1px solid rgba(0,0,0,.10);
margin-bottom: 24px;
text-align: center;
}
.dp-share-bar__label {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.09em;
color: rgba(0,0,0,.40);
margin: 0 0 14px;
}
.dp-share-bar__links {
display: flex;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
}
.dp-share-bar__btn {
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
padding: 0;
cursor: pointer;
opacity: .60;
transition: opacity .2s, transform .2s;
border-radius: 8px;
text-decoration: none;
}
.dp-share-bar__btn:hover {
opacity: 1;
transform: translateY(-3px);
background: none;
}
.dp-share-bar__btn img {
width: 128px;
height: 128px;
object-fit: contain;
display: block;
}
.dp-hp-footer__bar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--dp-sp-4);
margin-top: var(--dp-sp-10);
padding-top: var(--dp-sp-6);
border-top: 1px solid rgba(0, 0, 0, .08);
}
.dp-hp-footer__copy {
font-size: 0.7rem;
color: var(--dp-n-500, #6b7280);
margin: 0;
}
.dp-hp-footer__legal {
display: flex;
gap: var(--dp-sp-5);
}
.dp-hp-footer__legal a {
font-size: 0.7rem;
color: var(--dp-n-600, #5a5e6b);
text-decoration: none;
transition: color .2s;
}
.dp-hp-footer__legal a:hover {
color: var(--dp-primary);
}
/* ══════════════════════════════════════════════════════════════════════════
Section 33 — Rev 49 · Header Member-Panel + Mobile-Overrides
══════════════════════════════════════════════════════════════════════════
Nav-Struktur:
GP-Primärmenü = flex-row
Letzte - : dp-nav-member (eingeloggt) oder dp-nav-login (Gast)
margin-left: auto schiebt dieses li an den rechten Rand der Nav.
Mobile: Member-Panel und Login ausgeblendet (Hamburger-Menü unverändert).
*/
/* ── Nav-Liste: flex-row sicherstellen ───────────────────────────────────── */
/* WICHTIG: nur > ul (direkte Kind-UL = Root-Menü), NICHT ul (alle Nachkommen).
Ein zu breites `ul` würde auch .sub-menu erfassen und deren Eintraege horizontal
layouten (flex-row). Korrigiert in Rev 88. */
@media (min-width: 768px) {
.main-navigation .main-nav > ul {
display: flex;
align-items: center;
}
}
/* ── Member-Panel: rechts in der Nav ────────────────────────────────────── */
.main-navigation .main-nav ul > li.dp-nav-member,
.main-navigation .main-nav ul > li.dp-nav-login {
margin-left: auto;
padding: 0 var(--dp-sp-2);
}
/* Member: Name + Balance als kompaktes Badge */
.dp-nav-member__inner {
display: inline-flex;
align-items: center;
gap: var(--dp-sp-2);
padding: .26rem .75rem .26rem .6rem;
background: rgba(180,150,100,.10);
border: 1px solid rgba(180,150,100,.30);
border-radius: 999px;
white-space: nowrap;
cursor: default;
pointer-events: none;
line-height: 1;
}
.dp-nav-member__name {
font-size: .78rem;
font-weight: 600;
color: var(--dp-n-700);
letter-spacing: .005em;
max-width: 12ch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dp-nav-member__balance {
display: inline-flex;
align-items: center;
gap: .2rem;
padding-left: var(--dp-sp-2);
border-left: 1px solid rgba(0, 0, 0, .10);
}
.dp-nav-member__balance-icon {
font-size: .85rem;
color: var(--dp-accent);
line-height: 1;
}
.dp-nav-member__balance-value {
font-family: var(--dp-font-ui, var(--dp-font-body));
font-size: .78rem;
font-weight: 700;
color: var(--dp-n-700);
letter-spacing: .01em;
}
/* Login: Pill — passend zum eingeloggten Panel.
Hohe Spezifität nötig: GP setzt font-size:15px + line-height:60px via
.main-navigation .main-nav ul li a (0,2,3) */
.main-navigation .main-nav ul li a.dp-nav-login__link {
display: inline-flex;
align-items: center;
padding: .28rem .75rem .28rem .65rem;
background: rgba(180,150,100,.10);
border: 1px solid rgba(180,150,100,.30);
border-radius: 999px;
font-size: .78rem;
font-weight: 600;
line-height: 1;
letter-spacing: .005em;
color: #3a3228;
text-decoration: none;
white-space: nowrap;
transition: background .18s, border-color .18s;
box-shadow: none;
}
.main-navigation .main-nav ul li a.dp-nav-login__link:hover {
background: rgba(180,150,100,.18);
border-color: rgba(180,150,100,.50);
color: #3a3228;
box-shadow: none;
}
/* Mobile: Member-Panel und Login ausblenden */
@media (max-width: 767px) {
.main-navigation .main-nav ul > li.dp-nav-member,
.main-navigation .main-nav ul > li.dp-nav-login {
display: none !important;
}
}
/* ── Mobile Cover: volle Breite (kein 240px-Cap) ────────────────────────── */
@media (max-width: 679px) {
.dp-hero-stage__cover {
max-width: 280px;
margin: 0 auto;
}
}
/* ── Player auf Tablet: volle Breite; Höhe dynamisch via Podigee JS ─────── */
/* (Kein height-Override nötig — Podigee Script-Embed setzt Inline-Höhe) */
/* ==========================================================================
Section 34 — dp_episode Einzelseiten-Template (rev 52)
Warmes Magazin / Fanzine — Archiv-Seite fuer unbesprochene Episoden
========================================================================== */
/* -- Seiten-Wrapper -------------------------------------------------------- */
.dp-episode-page-wrap {
background: #f5f2ec;
min-height: 60vh;
padding: 0 0 4rem;
}
.dp-ep-container {
max-width: 1100px;
margin: 0 auto;
padding: 0 1.5rem;
}
/* -- Hero ------------------------------------------------------------------ */
.dp-ep-hero {
display: grid;
grid-template-columns: 180px 1fr;
gap: 2rem;
align-items: start;
padding: 1.5rem 0 1.25rem;
border-bottom: 1px solid #e0d9ce;
margin-bottom: 1.25rem;
}
/* Cover: quadratisch (padding-top-Trick) */
.dp-ep-cover-wrap {
position: relative;
width: 100%;
padding-top: 100%;
border-radius: 10px;
overflow: hidden;
background: #e8e2d8;
box-shadow: 0 4px 20px rgba(0,0,0,.12);
}
.dp-ep-cover-inner {
position: absolute;
inset: 0;
}
.dp-ep-cover-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.dp-ep-cover-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(145deg, #d9b36c22 0%, #8c6b4222 100%);
}
.dp-ep-cover-placeholder__icon {
font-size: 3rem;
color: #c4a97a;
opacity: .6;
}
.dp-ep-hero__text {
display: flex;
flex-direction: column;
gap: .6rem;
padding-top: .3rem;
}
.dp-ep-eyebrow {
font-size: .8rem;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: #8c7a62;
margin: 0;
}
.dp-ep-title {
font-size: 2.1rem;
font-weight: 700;
line-height: 1.2;
color: #1c2038;
margin: 0;
}
.dp-ep-title-en {
font-size: 1.05rem;
color: #6b5f4e;
font-style: italic;
margin: 0;
}
.dp-ep-air-date {
font-size: .85rem;
color: #9a8b77;
margin: .2rem 0 0;
}
/* Status-Badges */
.dp-ep-status {
display: inline-block;
margin-top: .4rem;
padding: .28rem .75rem;
border-radius: 999px;
font-size: .75rem;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
}
.dp-ep-status--unbesprochen {
background: #fdf5e6;
color: #8c5a1a;
border: 1px solid #e8c87a;
}
.dp-ep-status--geplant {
background: #f0f5ff;
color: #2f4f88;
border: 1px solid #b8c8e8;
}
.dp-ep-status--besprochen {
background: #edf7f0;
color: #1f6b40;
border: 1px solid #90d4a8;
}
/* -- Zwei-Spalten-Layout --------------------------------------------------- */
.dp-ep-layout {
display: grid;
grid-template-columns: 1fr 300px;
gap: 2rem;
align-items: start;
}
/* -- Gemeinsame Section-Karte ---------------------------------------------- */
.dp-ep-section {
background: #fff;
border: 1px solid #e8e2d8;
border-radius: 10px;
padding: 1rem 1.25rem;
margin-bottom: .75rem;
}
.dp-ep-section:last-child { margin-bottom: 0; }
.dp-ep-section__heading {
font-size: .7rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: #9a8b77;
margin: 0 0 .75rem;
padding-bottom: .5rem;
border-bottom: 1px solid #ede7dc;
}
/* -- Aufklappbare Abschnitte (details/summary) ------------------------------ */
.dp-ep-collapsible {
cursor: default;
}
.dp-ep-collapsible > summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
gap: .5rem;
margin-bottom: 0;
border-bottom: none;
padding-bottom: 0;
transition: color .15s;
}
.dp-ep-collapsible > summary::-webkit-details-marker { display: none; }
.dp-ep-collapsible > summary::after {
content: '▸';
font-size: .65rem;
margin-left: auto;
color: #c4a97a;
transition: transform .2s;
flex-shrink: 0;
}
.dp-ep-collapsible[open] > summary::after {
transform: rotate(90deg);
}
.dp-ep-collapsible[open] > summary {
margin-bottom: .75rem;
padding-bottom: .5rem;
border-bottom: 1px solid #ede7dc;
}
.dp-ep-collapsible > summary:hover { color: #6b5a3a; }
@keyframes dp-details-fade {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.dp-ep-collapsible[open] > *:not(summary) {
animation: dp-details-fade .2s ease;
}
/* -- Kurzbeschreibung ------------------------------------------------------- */
.dp-ep-description__text {
font-size: 1.05rem;
line-height: 1.7;
color: #3a3020;
margin: .25rem 0 0;
font-style: italic;
}
/* -- Metadatenblock --------------------------------------------------------- */
.dp-ep-facts__list {
display: grid;
grid-template-columns: auto 1fr;
gap: .4rem 1.5rem;
margin: 0;
}
.dp-ep-facts__row { display: contents; }
.dp-ep-facts__label {
font-size: .82rem;
font-weight: 600;
color: #9a8b77;
white-space: nowrap;
padding: .15rem 0;
}
.dp-ep-facts__value {
font-size: .88rem;
color: #3a3020;
padding: .15rem 0;
}
/* -- Themen-/Trigger-Tags -------------------------------------------------- */
.dp-ep-tags {
display: flex;
flex-wrap: wrap;
gap: .5rem;
}
.dp-ep-tag {
display: inline-block;
padding: .28rem .8rem;
background: #faf6ee;
border: 1px solid #d9c9a8;
border-radius: 999px;
font-size: .78rem;
color: #6b5430;
text-decoration: none;
font-weight: 500;
transition: background .15s, border-color .15s;
}
.dp-ep-tag:hover {
background: #f0e6cc;
border-color: #c4a96a;
color: #4a3418;
}
/* -- Kreativteam ----------------------------------------------------------- */
.dp-ep-credits__list {
display: grid;
grid-template-columns: auto 1fr;
gap: .4rem 1.5rem;
margin: 0;
}
.dp-ep-credits__row { display: contents; }
.dp-ep-credits__label {
font-size: .82rem;
font-weight: 600;
color: #9a8b77;
white-space: nowrap;
padding: .15rem 0;
}
.dp-ep-credits__value {
font-size: .88rem;
color: #3a3020;
padding: .15rem 0;
}
/* -- Shownotes ------------------------------------------------------------- */
.dp-ep-player { margin-bottom: 1.25rem; }
.dp-ep-shownotes__lead {
font-family: var(--dp-font-serif);
font-size: 1.05rem;
line-height: 1.75;
color: var(--dp-text);
margin-bottom: 1.5rem;
padding-bottom: 1.25rem;
border-bottom: 1px solid rgba(0,0,0,.08);
}
.dp-ep-shownotes__body {
font-size: .95rem;
line-height: 1.75;
color: var(--dp-text);
}
/* -- Sidebar --------------------------------------------------------------- */
.dp-ep-sidebar {
display: flex;
flex-direction: column;
gap: 1rem;
}
.dp-ep-card {
background: #fff;
border: 1px solid #e8e2d8;
border-radius: 10px;
padding: 1.25rem 1.4rem;
}
.dp-ep-card__heading {
font-size: .78rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #9a8b77;
margin: 0 0 1rem;
padding-bottom: .5rem;
border-bottom: 1px solid #ede7dc;
}
.dp-ep-card__note {
font-size: .82rem;
color: #9a8b77;
margin: .75rem 0 0;
line-height: 1.5;
}
.dp-ep-card__note a {
color: var(--dp-primary);
text-decoration: underline;
}
.dp-ep-card__note--login {
display: flex;
align-items: center;
gap: .45rem;
flex-wrap: wrap;
}
.dp-ep-card__note--login a.dp-nav-login__trigger {
color: #3a3228;
text-decoration: none;
flex-shrink: 0;
}
/* ── Sternebewertung (interaktiv) ─────────────────────────────────────── */
.dp-ep-stars {
display: flex;
gap: .15rem;
margin: .5rem 0 .75rem;
}
/* Stern-Buttons: kein Browser-Default */
.dp-ep-star {
flex: 1;
background: none;
border: none;
padding: .25rem .1rem;
font-size: clamp(1.5rem, 6vw, 2.25rem);
line-height: 1;
color: #d0c4b0;
cursor: pointer;
transition: color .1s, transform .1s;
text-align: center;
}
.dp-ep-star:focus-visible { outline: 2px solid var(--dp-primary); border-radius: 2px; }
/* Aktiv-Zustand (gespeichert) */
.dp-ep-star--active {
color: #d9a93c;
}
/* Hover-Zustand (Mouse über dem Star-Container) */
.dp-ep-star--hover {
color: #d9a93c;
transform: scale(1.15);
}
/* Community-Durchschnitt */
.dp-ep-rating-aggregate {
display: flex;
align-items: baseline;
gap: .35rem;
margin-bottom: .6rem;
}
.dp-ep-rating-average {
font-size: 1.9rem;
font-weight: 700;
color: #3a3020;
line-height: 1;
}
.dp-ep-rating-max {
font-size: .9rem;
color: #9a8b77;
}
.dp-ep-rating-count {
font-size: .75rem;
color: #9a8b77;
}
/* Eigene Bewertungs-Anzeige */
.dp-ep-rating-current {
font-size: .8rem;
color: #6b5f4e;
margin: .4rem 0;
}
.dp-ep-rating-current strong { color: #3a3020; }
/* +Panelium-Hinweis */
.dp-ep-rating-bonus {
display: flex;
align-items: center;
gap: .3rem;
font-size: .78rem;
color: #6b5f4e;
background: #f0ead8;
border-radius: 6px;
padding: .35rem .6rem;
margin: .5rem 0;
}
.dp-ep-rating-bonus__icon { color: #d9b36c; font-size: .9rem; }
.dp-ep-rating-bonus--earned { color: #5a6e45; background: #edf4e0; }
.dp-ep-rating-bonus--earned .dp-ep-rating-bonus__icon { color: #7aab50; }
/* Submit-Button der Rating-Form */
.dp-ep-rating-form__submit {
width: 100%;
margin-top: .6rem;
}
.dp-ep-rating-form__submit:disabled {
opacity: .45;
cursor: not-allowed;
}
/* Panelium-Pool-Bar */
.dp-ep-pool { margin-bottom: .75rem; }
.dp-ep-pool__count {
display: flex;
align-items: baseline;
gap: .3rem;
margin-bottom: .4rem;
}
.dp-ep-pool__icon { font-size: 1.1rem; color: #d9b36c; }
.dp-ep-pool__number {
font-size: 1.4rem;
font-weight: 700;
color: #3a3020;
line-height: 1;
}
.dp-ep-pool__label { font-size: .75rem; color: #9a8b77; }
.dp-ep-pool__bar-wrap {
height: 5px;
background: #ede7dc;
border-radius: 99px;
overflow: hidden;
}
.dp-ep-pool__bar {
height: 100%;
background: linear-gradient(90deg, #d9b36c, #c49240);
border-radius: 99px;
transition: width .4s ease;
min-width: 0;
}
/* Vote-Formular */
.dp-ep-vote-form {
display: flex;
flex-direction: column;
gap: .6rem;
}
.dp-ep-vote-form__label {
font-size: .82rem;
font-weight: 600;
color: #6b5f4e;
}
.dp-ep-vote-form__input-wrap {
display: flex;
align-items: center;
gap: .4rem;
border: 1px solid #d9c9a8;
border-radius: 6px;
padding: .35rem .6rem;
background: #faf6ee;
}
.dp-ep-vote-form__prefix {
color: #d9b36c;
font-size: 1rem;
flex-shrink: 0;
}
.dp-ep-vote-form__input-wrap input[type=number] {
border: none;
background: transparent;
font-size: .95rem;
color: #3a3020;
width: 100%;
outline: none;
-moz-appearance: textfield;
}
.dp-ep-vote-form__balance {
font-size: .78rem;
color: #9a8b77;
margin: 0;
}
.dp-ep-vote-form__submit {
width: 100%;
justify-content: center;
}
/* -- Feedback ------------------------------------------------------------- */
.dp-ep-feedback-wrap { margin-bottom: 1.5rem; }
/* -- Kommentare ------------------------------------------------------------ */
.dp-ep-comments-wrap {
margin-top: 2.5rem;
padding-top: 2rem;
border-top: 1px solid #e0d9ce;
}
/* -- Responsive ------------------------------------------------------------ */
@media (max-width: 860px) {
.dp-ep-layout {
grid-template-columns: 1fr;
}
.dp-ep-sidebar {
order: -1;
flex-direction: column;
}
.dp-ep-card {
width: 100%;
}
}
@media (max-width: 640px) {
.dp-ep-hero {
grid-template-columns: 1fr;
gap: 1.25rem;
padding: 1.5rem 0;
}
.dp-ep-hero__cover-area {
max-width: 220px;
margin: 0 auto;
width: 100%;
}
.dp-ep-title { font-size: 1.5rem; }
.dp-ep-sidebar { flex-direction: column; }
.dp-ep-section,
.dp-ep-card { padding: .85rem 1rem; }
}
/* ==========================================================================
Section 36 — Rev 58 · Homepage-Sektionen vereinheitlicht
Warmes Magazin / Fanzine — Sektion-Eyebrows, Karten, Interaction Strip,
Ranking, Memory-Sektion.
Scope: .dp-homepage — kein Eingriff auf anderen Seiten.
Keine Struktur- oder Grid-Änderungen.
========================================================================== */
/* ── 1. Sektion-Eyebrows und -Titel: warm Amber statt Primary-Blau ──────────
dp-section__eyebrow::before nutzt background: currentColor —
Farb-Change reicht, kein eigenes ::before nötig.
Ausnahmen: memory + closing sind dunkel und behalten ihre hellen Farben.
*/
.dp-homepage .dp-eyebrow,
.dp-homepage .dp-section__eyebrow {
color: #c9a326 !important;
opacity: 1;
}
.dp-homepage .dp-section__title {
color: #1a1510;
}
.dp-homepage .dp-section__more-link {
color: #7a5c28;
}
.dp-homepage .dp-section__more-link:hover {
color: #4a3410;
}
/* Dunkle Sektionen: Gold bleibt, ist gut lesbar auf dunklem Hintergrund */
.dp-homepage .dp-section--memory .dp-eyebrow,
.dp-homepage .dp-section--memory .dp-section__eyebrow,
.dp-homepage .dp-section--closing .dp-eyebrow,
.dp-homepage .dp-section--closing .dp-section__eyebrow {
color: #c9a326 !important;
opacity: 1;
}
.dp-homepage .dp-section--memory .dp-section__title,
.dp-homepage .dp-section--closing .dp-section__title {
color: var(--dp-n-0);
}
.dp-homepage .dp-section--memory .dp-section__more-link,
.dp-homepage .dp-section--closing .dp-section__more-link {
color: rgba(240, 220, 175, .85);
}
/* Sektion-Abstand: etwas mehr Luft für Magazin-Rhythmus */
.dp-homepage .dp-section--ranking {
padding-top: var(--dp-sp-12);
padding-bottom: var(--dp-sp-12);
}
/* ── 2. Interaction Strip: warm-dunkel statt cold navy ──────────────────────
Übergang Hero (warm cream) → Strip (warm dark) → Episoden (warm cream):
weniger Fremdkörper-Effekt, mehr Magazin-Rhythmus.
*/
.dp-homepage .dp-interaction-strip {
background: #1e1610;
background-image:
radial-gradient(ellipse at 15% 55%, rgba(160, 120, 50, .12) 0%, transparent 55%),
radial-gradient(ellipse at 85% 45%, rgba(140, 80, 30, .08) 0%, transparent 55%);
}
/* Trennstriche zwischen Karten: leicht sichtbar auf warm-dunklem Grund */
.dp-homepage .dp-interaction-grid {
background: rgba(255, 248, 220, .04);
}
.dp-homepage .dp-interaction-card {
background: rgba(255, 248, 220, .03);
border-bottom-color: rgba(255, 248, 220, .06);
}
.dp-homepage .dp-interaction-card:hover {
background: rgba(255, 248, 220, .08);
}
/* ── Persönliche Episodenstatistik (Interaction Strip) ──────────────────── */
.dp-hp-ep-stats {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: .35rem .75rem;
margin-top: 1.25rem;
padding-top: 1rem;
border-top: 1px solid rgba(255,255,255,.1);
font-size: .78rem;
color: rgba(255,255,255,.55);
}
.dp-hp-ep-stats__label {
font-size: .65rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: #c9a326;
margin-right: .25rem;
}
.dp-hp-ep-stats__item {
color: rgba(255,255,255,.65);
}
.dp-hp-ep-stats__item strong {
color: #fff;
font-weight: 700;
}
.dp-hp-ep-stats__sep {
color: rgba(255,255,255,.25);
}
/* Dark mode: strip ist bereits dunkel, Regel trotzdem für Konsistenz */
html.dp-dark .dp-hp-ep-stats { border-top-color: rgba(255,255,255,.08); }
html.dp-dark .dp-hp-ep-stats__label { color: #c9a326; }
html.dp-dark .dp-hp-ep-stats__item { color: rgba(255,255,255,.6); }
html.dp-dark .dp-hp-ep-stats__item strong { color: #f5f0fa; }
/* ── 3. Ranking: warme Borders, Fortschrittsbalken Gold ─────────────────────
Goldene Bar-Füllung passt besser zum Magazin-Fanzine-Stil als blau.
*/
.dp-homepage .dp-ranking-list__item {
border-color: rgba(180, 150, 100, .25);
background: rgba(255, 252, 245, .80);
}
.dp-homepage .dp-ranking-list__item:hover {
border-color: rgba(180, 150, 100, .50);
background: rgba(255, 252, 245, 1);
}
/* Platz-Nummer: warm braun statt neutral */
.dp-homepage .dp-ranking-list__rank {
color: #a07830;
}
/* Fortschrittsbalken-Hintergrund + Füllung */
.dp-homepage .dp-ranking-list__bar-wrap {
background: rgba(180, 150, 100, .18);
}
.dp-homepage .dp-ranking-list__bar {
background: linear-gradient(90deg, #c9a227 0%, #e8c870 100%);
}
/* Panelium-Zahl rechts: warm */
.dp-homepage .dp-ranking-list__panelium {
color: #8a6530;
}
/* Gold/Silber/Bronze-Items behalten ihre eigenen Gradient-Hintergründe */
/* ── 6. Memory-Sektion: warm-dunkler Hintergrund + angepasste Texte ─────────
Partikel-Glow-Foto (3.png.png) bleibt — nur das dunkle Overlay wird warm.
bg: kühles #040814 → warmes #1a1208.
*/
.dp-homepage .dp-section--memory {
background: #1a1208;
background-image:
linear-gradient(rgba(26, 18, 8, .72), rgba(26, 18, 8, .55)),
url('/wp-content/uploads/graphics/3.png.png');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.dp-homepage .dp-section--memory .dp-section__lead {
color: rgba(220, 195, 150, .85);
}
.dp-homepage .dp-memory__detail {
color: rgba(210, 185, 135, .60);
border-top-color: rgba(210, 185, 135, .18);
}
/* Ghost-Buttons in der Memory-Sektion: warm */
.dp-homepage .dp-section--memory .dp-btn--ghost {
color: rgba(240, 220, 170, .90);
border-color: rgba(240, 220, 170, .30);
}
.dp-homepage .dp-section--memory .dp-btn--ghost:hover {
background: rgba(240, 220, 170, .10);
border-color: rgba(240, 220, 170, .55);
color: rgba(255, 240, 200, 1);
}
/* =========================================================================
Section 35 — Rev 57 · Hero-Verfeinerung
Warmes Magazin / Fanzine — Hierarchie, Player-Höhe, Kartenlook, Warmth
Keine Grid-Änderungen — rein visuell.
========================================================================== */
/* ── 1. Hero-Sektion: warmer Hintergrund + untere Trennlinie ─────────────── */
.dp-section--hero {
background: #faf8f4; /* wärmeres Off-White, hebt sich von der Seite ab */
border-bottom: 1px solid rgba(180, 150, 100, .15);
}
/* ── 2. Cover: wärmerer Schatten, leichter Glow ─────────────────────────── */
.dp-hero-stage__cover {
box-shadow:
0 2px 8px rgba(100, 60, 20, .10),
0 8px 32px rgba(0, 0, 0, .13);
}
/* ── 3. Text-Zone: etwas mehr Luft zwischen den Elementen ───────────────── */
.dp-hero-stage__text {
gap: var(--dp-sp-4); /* sp-3 → sp-4: Elemente atmen mehr */
padding-top: var(--dp-sp-2);
}
/* Eyebrow: letter-spacing-Feintuning für Hero-Kontext */
.dp-hero-stage__eyebrow {
letter-spacing: .14em;
}
/* Titel: GP liefert Space Grotesk; Größe & Gewicht bleiben, Farbe minimal wärmer */
.dp-hero-stage__title {
color: #1a1510; /* warm near-black statt neutralem n-900 */
}
/* Meta (Datum): etwas wärmer als neutral-grau */
.dp-hero-stage__meta {
color: #8a7560;
letter-spacing: .08em;
}
/* Excerpt: bessere Lesbarkeit — vollständiger Fließtext-Kontrast */
.dp-hero-stage__excerpt {
color: #3a3228;
font-size: var(--dp-text-lead);
-webkit-line-clamp: 5;
}
/* ── 4. Player-Karte: warm, mit Goldakzent oben ─────────────────────────── */
.dp-hero-stage__player {
background: #faf8f4; /* warm statt bluish #f5f7ff */
border: 1px solid rgba(180, 150, 100, .20); /* warm statt rgba(0,0,0,.07) */
border-top: 3px solid #c9a227; /* Goldakzent oben */
box-shadow: 0 2px 12px rgba(100, 60, 20, .07);
/*
* Kein overflow: hidden hier — der Script-Embed erzeugt ein iframe, dessen
* Höhe Podigee JS via postMessage dynamisch setzt. Die Karte soll mitwachsen.
* border-radius-Clipping übernimmt der ::before-Trick (oder der Label-Gap reicht).
* overflow: hidden wird via Section 32 gesetzt — wir überschreiben es hier NICHT,
* weil Section 32's overflow:hidden beim height:auto-Container korrekt funktioniert:
* der Container wächst auf die iframe-Höhe, es gibt kein Overflow-Clipping.
*/
}
/* Player-Label: warm Amber statt text-muted (blaugrau) */
.dp-hero-stage__player-label {
color: #a07830;
padding-bottom: var(--dp-sp-2); /* Luft zwischen Label und Embed-Wrapper */
}
.dp-hero-stage__player-label svg {
opacity: .70;
}
/*
* Embed-Wrapper: Behälter für das Podigee Script-Embed.
* Das Podigee JS erzeugt ein