/* =============================================================
AKD Styles — akaishidaiko.de
Geladen via wp_enqueue_style in akd-event-single.php
Struktur (oben = allgemein → unten = spezifisch):
1. Utilities
2. Typografie
3. Buttons & Links
4. Komponenten (hell)
5. Komponenten (dunkel)
6. Pressefoto Card
7. Listing / Auftritt-Tabelle
8. Formular (form-ID-spezifisch)
9. Asset Cards (Logos & Farben)
10. Video Playlist (akd-videoplayer)
13. Lightbox (site-weit)
14. Journal Single — Post Content
15. Post Navigation (akd-post-nav)
16. Lesefortschritt (akd-rp)
============================================================= */
/* ── 0a. JOURNAL SINGLE — Jupiter X Titel + Breadcrumbs ausblenden ──────────
Jupiter X rendert Titel und Breadcrumbs via .jupiterx-main-header,
unabhängig von Elementors --page-title-display Variable.
body.single-post greift auf allen WordPress Blog-Post-Singles.
──────────────────────────────────────────────────────────────────────────── */
body.single-post .jupiterx-main-header {
display: none !important;
}
/* ── 0. HERO LAYOUT FIX ──────────────────────────────────────────────────────
Jede Ebene zwischen der rechten Spalte und dem Jet-Slider ist
position:absolute + inset:0 — dadurch füllt jede Schicht ihren Container
unabhängig von height-Vererbung. Die Spalte selbst ist Containing Block.
──────────────────────────────────────────────────────────────────────────── */
.hero.elementor-section {
align-items: stretch !important;
}
#ace999c {
position: relative !important;
min-height: 92vh !important;
}
#ace999c > .elementor-widget-wrap,
#ace999c .elementor-widget,
#ace999c .elementor-widget-container {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
}
#ace999c .jet-slider,
#ace999c .jet-slider__holder,
#ace999c .jet-slider__inner,
#ace999c .jet-slider__slide {
height: 100% !important;
min-height: 0 !important;
}
/* ── 1. UTILITIES ────────────────────────────────────────────────────────────
Kleine Hilfsklassen ohne eigene Struktur. Können auf beliebige
Elemente angewendet werden, um Farbe oder Transparenz zu steuern.
──────────────────────────────────────────────────────────────────────────── */
.akd-red { color: #c8302a !important; }
.akd-tp-20 { opacity: 0.8; }
.akd-tp-40 { opacity: 0.6; }
.akd-tp-60 { opacity: 0.4; }
/* ── 2. TYPOGRAFIE ───────────────────────────────────────────────────────────
Seitenweite Text-Klassen: Hero-Absatz mit Initiale, japanische Inline-Spans
und der nummerierte Kreis-Badge für Überschriften.
──────────────────────────────────────────────────────────────────────────── */
/* AKD Überschrift Widget: Überschrift standardmäßig zentriert */
.elementor-widget-akd-heading h1,
.elementor-widget-akd-heading h2,
.elementor-widget-akd-heading h3,
.elementor-widget-akd-heading h4 {
text-align: center;
}
/* Variante Hell — Creme-Farben für dunkle Sektionen */
.elementor-widget-akd-heading.akd-heading--light h1,
.elementor-widget-akd-heading.akd-heading--light h2,
.elementor-widget-akd-heading.akd-heading--light h3,
.elementor-widget-akd-heading.akd-heading--light h4 {
color: #f4efe6;
}
.elementor-widget-akd-heading.akd-heading--light .akd-heading__section {
color: #f4efe6;
}
/* AKD Überschrift: Abschnitt-Label oberhalb der Überschrift
Verwendung: AKD Überschrift Widget → Feld „Abschnitt", z. B. „§02 – Pressetexte" */
.akd-heading__section {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #8a7f72;
text-align: left;
margin: 0 0 0.75em;
}
/* Japanische Inline-Spans — kleiner, roter Serif-Text in Überschriften
Verwendung: 出演
Modifier: akd-tp-20/40/60 für Transparenz */
.akd-jp {
color: #c8302a;
font-family: 'Shippori Mincho','Noto Serif JP',Georgia,serif;
font-style: normal;
font-size: 0.5em;
letter-spacing: 0.05em;
vertical-align: 0.3em;
}
/* Nummerierter Kreis-Badge — für Überschriften mit Nummerierung
Verwendung: 01 Überschrift */
.akd-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.1em;
height: 2.1em;
border: 1.5px solid currentColor;
border-radius: 50%;
font-size: 0.8em;
letter-spacing: 0;
margin-right: 0.4em;
vertical-align: middle;
flex-shrink: 0;
}
/* ── 3. BUTTONS & LINKS ──────────────────────────────────────────────────────
Wiederverwendbare interaktive Elemente. Ghost-Button als Standard,
Modifier für rote und gefüllte Varianten. Einfache Link-Klasse für
rot unterstrichene Inline-Links.
──────────────────────────────────────────────────────────────────────────── */
/* Ghost Button — Standard (heller Hintergrund) */
.akd-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 28px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
text-decoration: none;
border: 1px solid #0a0a0a;
color: #0a0a0a;
background: transparent;
cursor: pointer;
transition: background 0.2s, color 0.2s, border-color 0.2s;
white-space: nowrap;
border-radius: 0;
}
.akd-btn:hover {
background: #0a0a0a;
color: #f4efe6;
}
/* Modifier: roter Ghost Button */
.akd-btn--red {
border-color: #c8302a;
color: #c8302a;
}
.akd-btn--red:hover {
background: #c8302a;
color: #f4efe6;
border-color: #c8302a;
}
/* Modifier: gefüllter roter Button */
.akd-btn--filled {
background: #c8302a;
color: #f4efe6;
border-color: #c8302a;
}
.akd-btn--filled:hover {
background: #a8251f;
border-color: #a8251f;
}
/* Inline-Link — roter unterstrichener Textlink */
.akd-link {
color: #c8302a;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
transition: opacity 0.15s;
}
.akd-link:hover {
opacity: 0.75;
}
/* ── 4. KOMPONENTEN (HELL) ───────────────────────────────────────────────────
Eigenständige UI-Blöcke für helle Seitenbereiche. Jede Komponente
ist in sich geschlossen und über eine BEM-ähnliche Namenskonvention
(akd-[name]__[element]) ansprechbar.
──────────────────────────────────────────────────────────────────────────── */
/* Stats Row — horizontale Kennzahlen-Zeile (Gegründet, Standorte etc.)
Verwendung: akd-stats > akd-stats__item > label + value + sub */
.akd-stats {
display: flex;
gap: 0;
}
.akd-stats__item {
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
}
.akd-stats__label,
.akd-stats__sub {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #6b6558;
margin: 0;
}
.akd-stats__value {
font-family: 'Shippori Mincho', 'Noto Serif JP', Georgia, serif;
font-size: 44px;
font-weight: 400;
color: #0a0a0a;
line-height: 1;
margin: 0;
}
@media (max-width: 767px) {
.akd-stats {
flex-wrap: wrap;
gap: 36px 0;
}
.akd-stats__item {
flex: 0 0 50%;
}
.akd-stats__value {
font-size: 40px;
}
}
/* Specs Table — zweispaltige Merkmalstabelle mit gestrichelten Trennlinien
Verwendung: */
.akd-specs {
width: 100%;
border-collapse: collapse;
font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.akd-specs tr {
border-top: 1px dashed #c4b9aa;
}
.akd-specs tr:last-child {
border-bottom: 1px dashed #c4b9aa;
}
.akd-specs td {
padding: 14px 0;
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
vertical-align: middle;
}
.akd-specs td:first-child {
color: #8a7f72;
font-weight: 400;
}
.akd-specs td:last-child {
text-align: right;
font-weight: 700;
color: #0a0a0a;
}
/* Nav Cards Grid — 2-spaltiges Kachelraster für Navigations-Links
Modifier: --active für die aktive Seite, --sm für kompakte Variante
Verwendung: akd-nav-cards > akd-nav-card > num + title */
.akd-nav-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
}
.akd-nav-card {
display: block;
border: 1px solid #0a0a0a;
margin: -1px 0 0 -1px;
padding: 28px 32px 32px;
text-decoration: none;
background: transparent;
transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.akd-nav-card:hover {
transform: translateX(8px);
}
.akd-nav-card:hover,
.akd-nav-card--active {
background: #0a0a0a;
color: #f4efe6;
}
.akd-nav-card__num {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
font-weight: 400;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #8a7f72;
margin: 0 0 16px;
display: block;
transition: color 0.2s;
}
.akd-nav-card--active .akd-nav-card__num,
.akd-nav-card:hover .akd-nav-card__num {
color: #c8302a;
}
.akd-nav-card__title {
font-family: 'Shippori Mincho', 'Noto Serif JP', Georgia, serif;
font-size: 28px;
font-weight: 400;
color: #0a0a0a;
margin: 0;
line-height: 1.2;
transition: color 0.2s;
}
.akd-nav-card:hover .akd-nav-card__title,
.akd-nav-card--active .akd-nav-card__title {
color: #f4efe6;
}
.akd-nav-card--sm {
padding: 16px 20px 20px;
margin-left: auto;
}
.akd-nav-card--sm .akd-nav-card__num {
font-size: 9px;
margin-bottom: 8px;
}
.akd-nav-card--sm .akd-nav-card__title {
font-size: 18px;
}
@media (max-width: 767px) {
.akd-nav-cards {
grid-template-columns: 1fr;
}
}
/* Stadtliste — dynamische Tag-Cloud der Auftrittsorte, skaliert nach Häufigkeit
Wird per PHP-Shortcode [akd_stadtliste] ausgegeben */
.akd-stadtliste {
font-family: 'Shippori Mincho', 'Noto Serif JP', Georgia, serif;
font-weight: 400;
color: #0a0a0a;
line-height: 1.8;
margin: 0;
}
.akd-stadtliste__item {
display: inline;
white-space: nowrap;
transition: color 0.15s;
}
.akd-stadtliste__item:hover {
color: #c8302a;
}
.akd-stadtliste__count {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 0.42em;
font-weight: 400;
color: #8a7f72;
vertical-align: super;
margin-left: 2px;
letter-spacing: 0;
}
.akd-stadtliste__dot {
color: #c4b9aa;
font-size: 16px;
vertical-align: middle;
}
.akd-stadtliste__more {
font-family: 'Shippori Mincho', 'Noto Serif JP', Georgia, serif;
font-size: 16px;
color: #8a7f72;
font-style: italic;
}
/* Drum Sound Cards — nebeneinanderstehende Karten für Don / Kon
Gedacht für dunkle Hintergründe (Border halbtransparent)
Verwendung: akd-drum-cards > akd-drum-card > name + label */
.akd-drum-cards {
display: flex;
gap: 16px;
}
.akd-drum-card {
flex: 1;
border: 1px solid rgba(244, 239, 230, 0.25);
padding: 40px 28px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.akd-drum-card__name {
font-family: 'Shippori Mincho', 'Noto Serif JP', Georgia, serif;
font-size: 52px;
font-weight: 400;
color: #c8302a;
line-height: 1;
margin: 0 0 18px;
}
.akd-drum-card__label {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(244, 239, 230, 0.45);
margin: 0;
line-height: 1.6;
}
/* Info Card — zentrierte Informationskachel: optionale Nummer + Header / Info / Footer
Verwendung: akd-info-card > akd-info-card__header + akd-info-card__info + akd-info-card__footer
Header kann optional akd-num enthalten: 01 Labeltext */
.akd-info-card {
text-align: center;
padding: 1.5rem 2rem;
}
.akd-info-card__header {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #c8302a;
margin: 0 0 16px;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.akd-info-card__info {
font-family: 'Shippori Mincho', 'Noto Serif JP', Georgia, serif;
font-size: 15px;
font-weight: 900;
color: #0a0a0a;
margin: 0 0 16px;
line-height: 1.2;
}
.akd-info-card__footer {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #8a7f72;
margin: 0;
}
.akd-info-card__body,
.akd-info-card__body p {
font-family: 'Archivo', system-ui, sans-serif;
font-size: 15px;
font-weight: 300;
color: #0a0a0a;
line-height: 1.6;
text-align: left;
margin: 0;
}
/* ── 5. KOMPONENTEN (DUNKEL) ─────────────────────────────────────────────────
UI-Blöcke für dunkle Sektionen (#0a0a0a Hintergrund). Text und Borders
in hellen Tönen (#f4efe6), Akzente in Rot.
──────────────────────────────────────────────────────────────────────────── */
/* CTA Card — großformatiger Link-Block mit Kanji-Dekoration, Hover: rot + Slide
Verwendung: > inner > (label + title) + kanji */
.akd-cta-card {
display: block;
border: 1px solid rgba(244, 239, 230, 0.2);
padding: 28px 40px;
text-decoration: none;
transition: background 0.25s ease, transform 0.25s ease;
cursor: pointer;
}
.akd-cta-card:hover {
background: #c8302a;
transform: translateX(8px);
}
.akd-cta-card__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.akd-cta-card__label {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #f4efe6;
opacity: 0.6;
margin: 0 0 10px;
}
.akd-cta-card__title {
font-family: 'Shippori Mincho', 'Noto Serif JP', Georgia, serif;
font-size: 28px;
font-weight: 400;
color: #f4efe6;
margin: 0;
line-height: 1.2;
}
.akd-cta-card__kanji {
font-family: 'Shippori Mincho', 'Noto Serif JP', Georgia, serif;
font-size: 44px;
color: #f4efe6;
opacity: 0.45;
flex-shrink: 0;
line-height: 1;
}
/* CTA Card Block — 3-spaltiges Grid, vertikale Karten mit Hover-Rotfüllung
Modifier: --block (Variante), --featured (startet rot)
──────────────────────────────────────────────────────────────────────────── */
.akd-cta-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
}
.akd-cta-card--block {
display: flex;
flex-direction: column;
gap: 0;
padding: 32px 36px 36px;
background: #0a0a0a;
border: 1px solid rgba(244, 239, 230, 0.1);
text-decoration: none;
position: relative;
overflow: hidden;
transition: background 0.3s ease;
transform: none;
}
/* Rot-Fill via Pseudo-Element — fließt von unten hoch */
.akd-cta-card--block::before {
content: '';
position: absolute;
inset: 0;
background: #c8302a;
transform: translateY(100%);
transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 0;
}
.akd-cta-card--block:hover::before { transform: translateY(0); }
.akd-cta-card--block:hover { background: #c8302a; transform: none; }
/* Featured: startet bereits rot */
.akd-cta-card--featured { background: #c8302a; }
.akd-cta-card--featured::before { transform: translateY(0); }
/* Alle Kindelemente über dem Pseudo-Element */
.akd-cta-card--block > * { position: relative; z-index: 1; }
/* Kopfzeile: Num links, Kanji rechts */
.akd-cta-card__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 48px;
}
.akd-cta-card__num {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #c8302a;
transition: color 0.2s;
}
.akd-cta-card--block:hover .akd-cta-card__num,
.akd-cta-card--featured .akd-cta-card__num { color: rgba(244, 239, 230, 0.7); }
.akd-cta-card--block .akd-cta-card__kanji {
font-family: 'Shippori Mincho', 'Noto Serif JP', Georgia, serif;
font-size: 56px;
line-height: 1;
color: #f4efe6;
opacity: 0.18;
transition: opacity 0.3s;
flex-shrink: 0;
}
.akd-cta-card--block:hover .akd-cta-card__kanji,
.akd-cta-card--featured .akd-cta-card__kanji { opacity: 0.35; }
/* Body */
.akd-cta-card__body { flex: 1; }
.akd-cta-card--block .akd-cta-card__label {
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(244, 239, 230, 0.5);
margin: 0 0 12px;
transition: color 0.2s;
}
.akd-cta-card--block:hover .akd-cta-card__label,
.akd-cta-card--featured .akd-cta-card__label { color: rgba(244, 239, 230, 0.75); }
.akd-cta-card--block .akd-cta-card__title {
font-family: 'Shippori Mincho', 'Noto Serif JP', Georgia, serif;
font-size: clamp(28px, 3vw, 40px);
font-weight: 400;
color: #f4efe6;
margin: 0 0 16px;
line-height: 1.15;
}
.akd-cta-card__text {
font-family: 'Archivo', system-ui, sans-serif;
font-size: 14px;
line-height: 1.65;
color: rgba(244, 239, 230, 0.6);
margin: 0;
transition: color 0.2s;
}
.akd-cta-card--block:hover .akd-cta-card__text,
.akd-cta-card--featured .akd-cta-card__text { color: rgba(244, 239, 230, 0.85); }
/* CTA-Link unten */
.akd-cta-card__cta {
display: block;
margin-top: 32px;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(244, 239, 230, 0.5);
transition: color 0.2s, letter-spacing 0.2s;
}
.akd-cta-card--block:hover .akd-cta-card__cta,
.akd-cta-card--featured .akd-cta-card__cta {
color: #f4efe6;
letter-spacing: 0.24em;
}
/* Responsive */
@media (max-width: 768px) {
.akd-cta-grid { grid-template-columns: 1fr; }
.akd-cta-card--block { padding: 28px 24px 32px; }
.akd-cta-card--block .akd-cta-card__title { font-size: 28px; }
}
/* ── Hover-Stil-Varianten ─────────────────────────────────────────────────
--hover-up : Rot-Fill von unten via Pseudo-Element (Standard für --block)
--hover-right: Slide nach rechts + roter Hintergrund (Standard für simple)
──────────────────────────────────────────────────────────────────────── */
/* Nach oben: ::before füllt von unten */
.akd-cta-card--hover-up {
overflow: hidden;
position: relative;
}
.akd-cta-card--hover-up > * { position: relative; z-index: 1; }
.akd-cta-card--hover-up::before {
content: '';
position: absolute;
inset: 0;
background: #c8302a;
transform: translateY(100%);
transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 0;
}
.akd-cta-card--hover-up:hover::before { transform: translateY(0); }
/* Unterdrückt das translateX der Basisklasse */
.akd-cta-card--hover-up:hover { transform: none; }
/* Nach rechts auf --block: slideX statt ::before-Fill */
.akd-cta-card--block.akd-cta-card--hover-right::before { display: none; }
.akd-cta-card--block.akd-cta-card--hover-right:hover { transform: translateX(8px); }
/* ── Farbschema: Hell — orientiert an akd-nav-card ───────────────────────
Klasse akd-cta-scheme--light wird vom Elementor prefix_class-System
automatisch auf den Widget-Wrapper gesetzt (analog zu akd-heading--light).
Hover-Fill: dunkel (#0a0a0a) statt rot — Label wird auf Hover rot.
──────────────────────────────────────────────────────────────────────── */
/* Einfache CTA-Karte (simple), hell */
.elementor-widget-akd-cta-block.akd-cta-scheme--light .akd-cta-card {
border-color: #0a0a0a;
}
.elementor-widget-akd-cta-block.akd-cta-scheme--light .akd-cta-card__label { color: #8a7f72; opacity: 1; }
.elementor-widget-akd-cta-block.akd-cta-scheme--light .akd-cta-card__title { color: #0a0a0a; }
.elementor-widget-akd-cta-block.akd-cta-scheme--light .akd-cta-card__kanji { color: #0a0a0a; opacity: 0.12; }
/* Hover: dunkles Fill + creme Texte + rotes Label (nav-card-Style) */
.elementor-widget-akd-cta-block.akd-cta-scheme--light .akd-cta-card:hover { background: #0a0a0a; }
.elementor-widget-akd-cta-block.akd-cta-scheme--light .akd-cta-card--hover-up::before { background: #0a0a0a; }
.elementor-widget-akd-cta-block.akd-cta-scheme--light .akd-cta-card:hover .akd-cta-card__label { color: #c8302a; opacity: 1; }
.elementor-widget-akd-cta-block.akd-cta-scheme--light .akd-cta-card:hover .akd-cta-card__title { color: #f4efe6; }
.elementor-widget-akd-cta-block.akd-cta-scheme--light .akd-cta-card:hover .akd-cta-card__kanji { color: #f4efe6; opacity: 0.35; }
/* CTA Block, hell */
.elementor-widget-akd-cta-block.akd-cta-scheme--light .akd-cta-card--block {
background: #f4efe6;
border-color: rgba(10, 10, 10, 0.2);
}
/* ::before-Fill dunkel überschreiben */
.elementor-widget-akd-cta-block.akd-cta-scheme--light .akd-cta-card--block::before { background: #0a0a0a; }
.elementor-widget-akd-cta-block.akd-cta-scheme--light .akd-cta-card--block:hover { background: #0a0a0a; }
/* Texte (Ruhezustand) */
.elementor-widget-akd-cta-block.akd-cta-scheme--light .akd-cta-card__num { color: #c8302a; }
.elementor-widget-akd-cta-block.akd-cta-scheme--light .akd-cta-card--block .akd-cta-card__kanji { color: #0a0a0a; opacity: 0.12; }
.elementor-widget-akd-cta-block.akd-cta-scheme--light .akd-cta-card--block .akd-cta-card__label { color: rgba(10, 10, 10, 0.5); }
.elementor-widget-akd-cta-block.akd-cta-scheme--light .akd-cta-card--block .akd-cta-card__title { color: #0a0a0a; }
.elementor-widget-akd-cta-block.akd-cta-scheme--light .akd-cta-card__text { color: rgba(10, 10, 10, 0.6); }
.elementor-widget-akd-cta-block.akd-cta-scheme--light .akd-cta-card__cta { color: rgba(10, 10, 10, 0.5); }
/* Hover: creme Texte, Num bleibt rot */
.elementor-widget-akd-cta-block.akd-cta-scheme--light .akd-cta-card--block:hover .akd-cta-card__num { color: #c8302a; }
.elementor-widget-akd-cta-block.akd-cta-scheme--light .akd-cta-card--block:hover .akd-cta-card__kanji { color: #f4efe6; opacity: 0.35; }
.elementor-widget-akd-cta-block.akd-cta-scheme--light .akd-cta-card--block:hover .akd-cta-card__label { color: rgba(244, 239, 230, 0.75); }
.elementor-widget-akd-cta-block.akd-cta-scheme--light .akd-cta-card--block:hover .akd-cta-card__title { color: #f4efe6; }
.elementor-widget-akd-cta-block.akd-cta-scheme--light .akd-cta-card--block:hover .akd-cta-card__text { color: rgba(244, 239, 230, 0.85); }
.elementor-widget-akd-cta-block.akd-cta-scheme--light .akd-cta-card--block:hover .akd-cta-card__cta { color: #f4efe6; }
/* Hint Banner — dunkler Infoblock mit Label, Fließtext und Ghost-Button
Responsiv: auf Mobile stapeln sich Inhalt und Button vertikal
Verwendung: akd-hint > (body > label + text) + btn */
.akd-hint {
background: #0a0a0a;
padding: 32px 40px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
}
.akd-hint__body {
flex: 1;
min-width: 0;
}
.akd-hint__label {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #c8302a;
margin: 0 0 12px;
}
.akd-hint__text {
font-family: 'Shippori Mincho', 'Noto Serif JP', Georgia, serif;
font-size: 20px;
line-height: 1.5;
color: #f4efe6;
margin: 0;
}
.akd-hint__text em {
color: #c8302a;
font-style: italic;
}
.akd-hint__btn {
display: inline-flex;
align-items: center;
white-space: nowrap;
flex-shrink: 0;
border: 1px solid #f4efe6;
color: #f4efe6;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 14px 24px;
text-decoration: none;
transition: background 0.2s, color 0.2s;
}
.akd-hint__btn:hover {
background: #f4efe6;
color: #0a0a0a;
}
@media (max-width: 767px) {
.akd-hint {
flex-direction: column;
align-items: flex-start;
gap: 20px;
padding: 24px 20px;
}
.akd-hint__label {
word-break: normal;
white-space: normal;
}
.akd-hint__btn {
align-self: stretch;
justify-content: center;
}
}
/* Person Card — dunkle Karte mit Foto (oben) und Namenszeile (unten)
Foto kann Platzhalter oder echtes ![]()
sein
Verwendung: akd-person-card > photo + info > (name + meta) + kanji */
.akd-person-card {
background: #0d0d14;
overflow: hidden;
}
.akd-person-card__photo {
aspect-ratio: 4 / 3;
display: flex;
align-items: center;
justify-content: center;
background: #0d0d14;
border-bottom: 1px solid rgba(244, 239, 230, 0.1);
}
.akd-person-card__photo-label {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(244, 239, 230, 0.2);
}
.akd-person-card__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
.akd-person-card__info {
border: 1px solid rgba(244, 239, 230, 0.15);
padding: 22px 28px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.akd-person-card__name {
font-family: 'Shippori Mincho', 'Noto Serif JP', Georgia, serif;
font-size: 28px;
font-weight: 400;
color: #f4efe6;
margin: 0 0 8px;
line-height: 1.2;
}
.akd-person-card__meta {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
font-weight: 400;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(244, 239, 230, 0.45);
margin: 0;
}
.akd-person-card__kanji {
font-family: 'Shippori Mincho', 'Noto Serif JP', Georgia, serif;
font-size: 38px;
color: #c8302a;
flex-shrink: 0;
line-height: 1;
margin: 0;
}
/* ── 6. PRESSEFOTO CARD ──────────────────────────────────────────────────────
JetEngine Listing für Attachments (post_type: attachment).
Shortcode: [akd_photo_card] — zeigt akd-press-thumb, Overlay bei Hover,
Klick öffnet die custom Lightbox (data-lb JSON).
Overlay: Kategorie-Pill oben links + Zoom-Icon oben rechts.
──────────────────────────────────────────────────────────────────────────── */
.akd-photo-card {
display: block;
position: relative;
overflow: hidden;
text-decoration: none;
background: #0a0a0a;
cursor: zoom-in;
}
.akd-photo-card__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform 0.4s ease;
}
.akd-photo-card:hover .akd-photo-card__img {
transform: scale(1.04);
}
.akd-photo-card__overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(10,10,10,0.52) 0%,
transparent 40%,
transparent 60%,
rgba(10,10,10,0.38) 100%
);
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 14px 16px;
opacity: 0;
transition: opacity 0.22s ease;
pointer-events: none;
}
.akd-photo-card:hover .akd-photo-card__overlay {
opacity: 1;
}
/* Kategorie-Pill oben links */
.akd-photo-card__cat {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 9px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #f4efe6;
background: rgba(10,10,10,0.55);
padding: 4px 9px;
line-height: 1.4;
border: 1px solid rgba(244,239,230,0.25);
}
/* Zoom-Icon oben rechts */
.akd-photo-card__zoom {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
color: #f4efe6;
background: rgba(10,10,10,0.45);
border-radius: 50%;
flex-shrink: 0;
}
/* ── 7. LISTING / AUFTRITT-TABELLE ──────────────────────────────────────────
Styles für das JetEngine Listing-Template "Auftritt Card Tabelle" (ID 5144).
Jede Zeile wird per PHP-Shortcode [akd_auftritt_row] gerendert.
Der Footer ist ein separates HTML-Widget unterhalb des Listings.
──────────────────────────────────────────────────────────────────────────── */
/* Event Row — einzelne Auftrittszeile mit Datum, Titel, Ort und Pfeil */
.akd-event-row {
display: flex;
align-items: center;
gap: 32px;
padding: 28px 0;
border-top: 1px dashed #c4b9aa;
text-decoration: none;
transition: transform 0.22s ease, background 0.22s ease;
}
.akd-event-row:hover {
transform: translateX(8px);
background: rgba(200, 48, 42, 0.04);
}
.akd-event-row__date {
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 80px;
flex-shrink: 0;
}
.akd-event-row__day {
font-family: 'Shippori Mincho', 'Noto Serif JP', Georgia, serif;
font-size: 48px;
font-weight: 400;
color: #c8302a;
line-height: 1;
display: block;
}
.akd-event-row__month {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #6b6558;
display: block;
margin-top: 4px;
}
.akd-event-row__info {
flex: 1;
min-width: 0;
}
.akd-event-row__title {
font-family: 'Shippori Mincho', 'Noto Serif JP', Georgia, serif;
font-size: 24px;
font-weight: 400;
color: #0a0a0a;
margin: 0 0 6px;
line-height: 1.2;
}
.akd-event-row__venue {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #8a7f72;
margin: 0;
}
.akd-event-row__location {
display: flex;
align-items: center;
gap: 16px;
flex-shrink: 0;
min-width: 140px;
justify-content: flex-end;
}
.akd-event-row__city {
font-family: 'Shippori Mincho', 'Noto Serif JP', Georgia, serif;
font-size: 20px;
color: #0a0a0a;
}
.akd-event-row__arrow {
color: #c8302a;
font-size: 18px;
flex-shrink: 0;
}
/* Untere Linie der letzten Zeile im Listing-Kontext */
.akd-event-list > .akd-event-row:last-child,
.jet-listing-grid__items > .jet-listing-grid__item:last-child .akd-event-row {
border-bottom: 1px dashed #c4b9aa;
}
/* Event List Footer — Hinweis + Link unterhalb des Listings */
.akd-event-list-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 20px;
margin-top: 4px;
border-top: 1px dashed #c4b9aa;
}
.akd-event-list-footer__note {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #8a7f72;
margin: 0;
}
.akd-event-list-footer__link {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #c8302a;
text-decoration: underline;
text-underline-offset: 3px;
}
.akd-event-list-footer__link:hover { opacity: 0.75; }
/* ── 8. FORMULAR ─────────────────────────────────────────────────────────────
Overrides für das JetEngine Booking-Formular ID 5078 (Mitmachen-Seite).
Styles sind absichtlich sehr spezifisch gehalten, um nur dieses eine
Formular zu betreffen und keine anderen JetEngine-Formulare zu beeinflussen.
──────────────────────────────────────────────────────────────────────────── */
/* Gruppe-Feld: Radio-Buttons als nebeneinanderstehende Ghost-Buttons */
form[data-form-id="5078"] [data-field="gruppe"] .jet-form__fields-group,
form[data-form-id="5078"] [data-field="gruppe"] .jet-form-col__end > div {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 8px !important;
}
form[data-form-id="5078"] [data-field="gruppe"] .jet-form__field-wrap {
flex: 0 0 auto !important;
}
form[data-form-id="5078"] [data-field="gruppe"] input[type="radio"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
form[data-form-id="5078"] [data-field="gruppe"] .jet-form__field-label {
display: flex !important;
align-items: center;
justify-content: center;
padding: 12px 28px;
border: 1px solid #0a0a0a !important;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
cursor: pointer;
transition: background 0.2s, color 0.2s, border-color 0.2s;
color: #0a0a0a !important;
background: transparent !important;
user-select: none;
white-space: nowrap;
border-radius: 0 !important;
}
form[data-form-id="5078"] [data-field="gruppe"] .jet-form__field-label:hover {
background: #0a0a0a !important;
color: #f4efe6 !important;
}
form[data-form-id="5078"] [data-field="gruppe"] .jet-form__field-label:has(input:checked) {
background: #c8302a !important;
color: #f4efe6 !important;
border-color: #c8302a !important;
}
/* Datenschutz-Feld: Checkbox über volle Breite, Label als Block-Element
damit Text + Link in einem Fluss bleiben (kein Flex-Spalten-Problem) */
form[data-form-id="5078"] [data-field="datenschutz"] {
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
}
form[data-form-id="5078"] [data-field="datenschutz"] .jet-form-col__start {
display: none !important;
}
form[data-form-id="5078"] [data-field="datenschutz"] .jet-form-col__end {
display: block !important;
width: 100% !important;
flex: 0 0 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
box-sizing: border-box !important;
}
form[data-form-id="5078"] [data-field="datenschutz"] .jet-form__fields-group,
form[data-form-id="5078"] [data-field="datenschutz"] .checkradio-wrap,
form[data-form-id="5078"] [data-field="datenschutz"] .checkboxes-wrap {
display: block !important;
width: 100% !important;
max-width: none !important;
flex: none !important;
flex-wrap: unset !important;
grid-template-columns: unset !important;
columns: unset !important;
gap: 0 !important;
box-sizing: border-box !important;
}
form[data-form-id="5078"] [data-field="datenschutz"] .jet-form__field-wrap {
display: block !important;
width: 100% !important;
max-width: none !important;
flex: none !important;
box-sizing: border-box !important;
}
form[data-form-id="5078"] [data-field="datenschutz"] .jet-form__field-label {
display: block !important;
position: relative !important;
width: 100% !important;
box-sizing: border-box !important;
padding: 2px 0 0 34px !important;
background: none !important;
border: none !important;
cursor: pointer;
font-family: inherit;
font-size: 15px;
line-height: 1.55;
color: #0a0a0a !important;
letter-spacing: normal !important;
text-transform: none !important;
font-weight: 400;
}
form[data-form-id="5078"] [data-field="datenschutz"] input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
position: absolute !important;
left: 0 !important;
top: 4px !important;
width: 20px;
height: 20px;
border: 1px solid #0a0a0a;
background: transparent;
cursor: pointer;
margin: 0 !important;
flex-shrink: 0;
}
form[data-form-id="5078"] [data-field="datenschutz"] input[type="checkbox"]:checked {
background: #0a0a0a;
}
form[data-form-id="5078"] [data-field="datenschutz"] input[type="checkbox"]:checked::after {
content: "";
position: absolute;
left: 5px;
top: 2px;
width: 6px;
height: 11px;
border: 2px solid #f4efe6;
border-top: none;
border-left: none;
transform: rotate(45deg);
}
form[data-form-id="5078"] [data-field="datenschutz"] .jet-form__field-label a {
color: #c8302a;
text-decoration: underline;
}
form[data-form-id="5078"] [data-field="datenschutz"] .jet-form__field-label a:hover {
opacity: 0.75;
}
/* ── 9. ASSET CARDS (Logos & Farben) ─────────────────────────────────────────
Download-Karten für Logos, SVGs und Farb-Palette im Pressebereich.
──────────────────────────────────────────────────────────────────────────── */
.akd-asset-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
width: 100%;
}
.akd-asset-card {
display: flex;
flex-direction: column;
border: 1px solid #f4efe6;
padding: 10px;
text-decoration: none;
overflow: hidden;
background: #f4efe6;
}
.akd-asset-card--dark {
background: #0a0a0a;
}
/* Vorschau-Bereich */
.akd-asset-card__preview {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 32px;
min-height: 200px;
}
.akd-asset-card__preview--light { background: #f4efe6; }
.akd-asset-card__preview--dark { background: #0a0a0a; }
.akd-asset-card__preview img {
max-width: 70%;
max-height: 140px;
width: auto;
height: auto;
display: block;
}
/* Farbpaletten-Swatches */
.akd-asset-card__swatches {
display: flex;
gap: 8px;
align-items: center;
}
.akd-asset-card__swatch {
width: 44px;
height: 44px;
flex-shrink: 0;
}
.akd-asset-card__swatch--bordered {
border: 1px solid #c4b9aa;
}
/* Footer */
.akd-asset-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px;
border-top: 1px solid #0a0a0a;
gap: 12px;
}
.akd-asset-card--dark .akd-asset-card__footer {
border-top-color: #2a2a2a;
}
.akd-asset-card__label {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #0a0a0a;
}
.akd-asset-card--dark .akd-asset-card__label {
color: #f4efe6;
}
.akd-asset-card__dl {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
font-weight: 400;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #8a7f72;
white-space: nowrap;
display: flex;
align-items: center;
gap: 12px;
}
.akd-asset-card--dark .akd-asset-card__dl {
color: #6b6558;
}
.akd-asset-card__dl a {
color: inherit;
text-decoration: none;
transition: color 0.15s;
}
.akd-asset-card__dl a:hover { color: #c8302a; }
/* Hover-Effekt auf Download-Karten */
a.akd-asset-card { transition: background 0.2s; }
a.akd-asset-card:hover .akd-asset-card__dl { color: #c8302a; }
/* Palette-Zeilen unter den Swatches */
.akd-asset-card__palette {
margin-top: 20px;
display: flex;
flex-direction: column;
gap: 6px;
width: 100%;
}
.akd-asset-card__palette-row {
display: flex;
align-items: center;
gap: 10px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 9px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #6b6558;
}
.akd-asset-card__palette-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
@media (max-width: 767px) {
.akd-asset-cards {
grid-template-columns: 1fr;
}
.akd-asset-card {
margin: 0 0 -1px 0;
}
}
/* ─────────────────────────────────────────────────────────────────────────────
10. VIDEO PLAYLIST (.akd-videoplayer wraps .elementor-widget-raven-video-playlist)
─────────────────────────────────────────────────────────────────────────────
DOM-Struktur (Raven Widget):
.raven-tabs
.raven-tabs-main-area
.raven-tabs-wrapper ← Playlist-Sidebar
.raven-tabs-content-wrapper ← Video-Player
.raven-tabs-inner-tabs ← Info-Bereich (Beschreibung)
Layout-Trick: display:contents auf .raven-tabs-main-area → Kinder werden
direkte Grid-Items von .raven-tabs.
───────────────────────────────────────────────────────────────────────────── */
/* ── Grid-Grundstruktur ──────────────────────────────────────────────────── */
.akd-videoplayer .raven-tabs {
display: grid;
grid-template-columns: 1fr 340px;
background: #0a0a0a;
overflow: hidden;
}
.akd-videoplayer .raven-tabs-main-area {
display: contents; /* Kinder am Eltern-Grid beteiligen */
}
/* ── Video-Player (oben links) ───────────────────────────────────────────── */
.akd-videoplayer .raven-tabs-content-wrapper {
grid-column: 1;
grid-row: 1;
position: relative;
background: #000;
aspect-ratio: 16 / 9;
overflow: hidden;
}
.akd-videoplayer .raven-tabs-content-wrapper iframe,
.akd-videoplayer .raven-tabs-content-wrapper video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
/* ── Info-Bereich (unten links) ──────────────────────────────────────────── */
.akd-videoplayer .raven-tabs-inner-tabs {
grid-column: 1;
grid-row: 2;
background: #f4efe6;
padding: 28px 32px 32px;
}
/* Innere Tab-Navigation + Buttons ausblenden */
.akd-videoplayer .raven-inner-tabs-wrapper,
.akd-videoplayer .raven-inner-tab-title.raven-tab-mobile-title,
.akd-videoplayer .raven-inner-tab-buttons { display: none; }
/* Beschreibungstext */
.akd-videoplayer .raven-inner-tab-text p {
font-family: 'Archivo', system-ui, sans-serif;
font-size: 15px;
line-height: 1.7;
color: #3a3530;
margin: 0;
}
/* injizierter Titel */
.akd-videoplayer .akd-vp-info-title {
font-family: 'Shippori Mincho', 'Noto Serif JP', Georgia, serif;
font-size: clamp(22px, 3.2vw, 38px);
font-weight: 700;
line-height: 1.1;
color: #0a0a0a;
margin: 0 0 14px;
letter-spacing: -0.01em;
}
/* injizierte Meta-Leiste (dunkel, unten) */
.akd-videoplayer .akd-vp-meta-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
background: #0a0a0a;
padding: 14px 20px;
margin-top: 20px;
flex-wrap: wrap;
}
.akd-videoplayer .akd-vp-yt-link {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: #c8302a;
text-decoration: none;
white-space: nowrap;
}
.akd-videoplayer .akd-vp-yt-link:hover { color: #f4efe6; }
.akd-videoplayer .akd-vp-dur-info {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: #4a4a4a;
}
/* ── Playlist-Sidebar (volle Höhe rechts) ────────────────────────────────── */
.akd-videoplayer .raven-tabs-wrapper {
grid-column: 2;
grid-row: 1 / span 2;
background: #0f0f0f;
border-left: 1px solid #1a1a1a;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* Playlist-Header */
.akd-videoplayer .raven-tabs-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 18px;
border-bottom: 1px solid #1e1e1e;
flex-shrink: 0;
}
.akd-videoplayer .raven-video-playlist-tabs-title {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #c8302a;
margin: 0;
}
/* Japanische Zeichen im Header — normales Gewicht */
.akd-videoplayer .raven-video-playlist-tabs-title .akd-jp-soft {
font-weight: 400;
color: #6b6558;
letter-spacing: 0.05em;
}
.akd-videoplayer .raven-tabs-videos-count {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 9px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #4a4a4a;
}
.akd-videoplayer .raven-tabs-toggle-videos-display-button { display: none; }
/* ── Scroll-Bereich der Playlist ─────────────────────────────────────────── */
.akd-videoplayer .raven-tabs-items-wrapper {
flex: 1;
overflow: hidden;
position: relative;
}
.akd-videoplayer .raven-tabs-items {
height: 100%;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #2a2a2a transparent;
}
.akd-videoplayer .shadow { display: none; }
/* ── Playlist-Eintrag (Grid: Nummer | Thumbnail | Text) ─────────────────── */
.akd-videoplayer .raven-tab-title.raven-tab-desktop-title {
display: grid;
grid-template-columns: 22px 108px 1fr;
grid-template-rows: auto auto;
column-gap: 10px;
align-items: start;
padding: 14px 14px 14px 12px;
border-bottom: 1px solid #181818;
cursor: pointer;
transition: background 0.14s;
position: relative;
}
.akd-videoplayer .raven-tab-title.raven-tab-desktop-title:hover { background: #161616; }
/* Fortlaufende Nummer (injiziert via JS) */
.akd-videoplayer .akd-vp-num {
grid-column: 1;
grid-row: 1 / span 2;
align-self: center;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 9px;
font-weight: 700;
color: #3a3a3a;
letter-spacing: 0.05em;
line-height: 1;
}
.akd-videoplayer .raven-tab-title.e-active .akd-vp-num { color: #c8302a; }
/* Thumbnail */
.akd-videoplayer .raven-tab-thumbnail {
grid-column: 2;
grid-row: 1 / span 2;
align-self: center;
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
background: #1a1a1a;
flex-shrink: 0;
}
.akd-videoplayer .raven-tab-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Roter Rahmen beim aktiven Eintrag */
.akd-videoplayer .raven-tab-title.e-active .raven-tab-thumbnail {
outline: 2px solid #c8302a;
outline-offset: 0;
}
/* Hover-Overlay via .icon-play */
.akd-videoplayer .raven-tab-thumbnail .icon-play {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(200, 48, 42, 0.6);
opacity: 0;
transition: opacity 0.16s;
font-size: 0; /* FA-Icon ausblenden */
}
.akd-videoplayer .raven-tab-thumbnail .icon-play::after {
content: '▶';
color: #fff;
font-size: 16px;
line-height: 1;
}
.akd-videoplayer .raven-tab-title:hover .raven-tab-thumbnail .icon-play { opacity: 1; }
.akd-videoplayer .raven-tab-thumbnail .icon-watched { display: none; }
/* Dauer-Badge auf dem Thumbnail (injiziert via JS) */
.akd-videoplayer .akd-vp-dur {
position: absolute;
bottom: 4px;
right: 4px;
background: rgba(0, 0, 0, 0.82);
color: #f4efe6;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 8px;
font-weight: 700;
padding: 2px 5px;
line-height: 1.4;
pointer-events: none;
}
/* Videotitel in der Liste */
.akd-videoplayer .raven-tab-title-text {
grid-column: 3;
grid-row: 1;
font-family: 'Shippori Mincho', 'Noto Serif JP', Georgia, serif;
font-size: 13px;
font-weight: 600;
line-height: 1.35;
color: #6b6558;
margin: 0;
padding-top: 1px;
}
.akd-videoplayer .raven-tab-title-text a {
color: inherit;
text-decoration: none;
pointer-events: none;
}
.akd-videoplayer .raven-tab-title.e-active .raven-tab-title-text { color: #f4efe6; }
/* "WIRD ABGESPIELT"-Badge (injiziert, nur bei .e-active sichtbar) */
.akd-videoplayer .akd-vp-playing {
display: none;
grid-column: 3;
grid-row: 2;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 8px;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: #c8302a;
margin-top: 6px;
}
.akd-videoplayer .raven-tab-title.e-active .akd-vp-playing { display: block; }
/* Originale Dauer-Anzeige ausblenden (ersetzen durch Badge) */
.akd-videoplayer .raven-tab-duration { display: none; }
/* ── NOW PLAYING Badge über dem Video (injiziert via JS) ─────────────────── */
.akd-videoplayer .akd-vp-now-playing {
position: absolute;
top: 12px;
right: 12px;
background: #c8302a;
color: #f4efe6;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 6px 12px;
z-index: 10;
pointer-events: none;
display: flex;
align-items: center;
gap: 7px;
}
.akd-videoplayer .akd-vp-now-playing .akd-vp-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #fff;
animation: akd-vp-blink 1.2s ease-in-out infinite;
flex-shrink: 0;
}
@keyframes akd-vp-blink { 0%,100%{ opacity: 1 } 50%{ opacity: 0.25 } }
/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
.akd-videoplayer .raven-tabs {
grid-template-columns: 1fr;
}
.akd-videoplayer .raven-tabs-content-wrapper { grid-row: 1; }
.akd-videoplayer .raven-tabs-inner-tabs { grid-row: 3; }
.akd-videoplayer .raven-tabs-wrapper {
grid-column: 1;
grid-row: 2;
border-left: none;
border-top: 1px solid #1e1e1e;
max-height: 320px;
}
}
/* ─────────────────────────────────────────────────────────────────────────────
11. AKD VIDEO PLAYLIST WIDGET (.akd-vpl)
Eigenes Elementor-Widget — kein CSS-Override nötig, volle Kontrolle.
Grid-Layout:
col 1 (1fr): .akd-vpl__player (Zeile 1) + .akd-vpl__info (Zeile 2)
col 2 (340px): .akd-vpl__sidebar (beide Zeilen, volle Höhe)
───────────────────────────────────────────────────────────────────────────── */
/* ── Root ──────────────────────────────────────────────────────────────────── */
.akd-vpl {
display: grid;
grid-template-columns: 1fr 340px;
grid-template-rows: auto 1fr;
background: #0a0a0a;
overflow: hidden;
font-family: 'Archivo', system-ui, sans-serif;
}
/* ── Video-Player (oben links) ─────────────────────────────────────────────── */
.akd-vpl__player {
grid-column: 1;
grid-row: 1;
position: relative;
background: #000;
aspect-ratio: 16 / 9;
overflow: hidden;
}
.akd-vpl__player iframe,
.akd-vpl__player video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
}
.akd-vpl__placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.1em;
color: #4a4a4a;
text-transform: uppercase;
}
/* NOW PLAYING Badge */
.akd-vpl__np-badge {
position: absolute;
top: 12px;
right: 12px;
background: #c8302a;
color: #f4efe6;
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 6px 12px;
display: flex;
align-items: center;
gap: 7px;
pointer-events: none;
z-index: 10;
}
.akd-vpl__np-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #fff;
flex-shrink: 0;
animation: akd-vpl-blink 1.2s ease-in-out infinite;
}
@keyframes akd-vpl-blink { 0%,100%{ opacity:1 } 50%{ opacity:0.2 } }
/* ── Info-Bereich (unten links) ────────────────────────────────────────────── */
.akd-vpl__info {
grid-column: 1;
grid-row: 2;
background: #f4efe6;
}
.akd-vpl__panel {
display: none;
padding: 28px 32px 32px;
grid-template-columns: 7fr 3fr;
gap: 0 32px;
align-items: start;
}
.akd-vpl__panel.is-active { display: grid; }
.akd-vpl__panel-meta {
grid-column: 1 / -1;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #c8302a;
margin: 0 0 10px;
display: flex;
align-items: center;
gap: 10px;
}
.akd-vpl__panel-meta::before {
content: '';
display: block;
width: 28px;
height: 2px;
background: #c8302a;
flex-shrink: 0;
}
.akd-vpl__panel-title {
grid-column: 1 / -1;
font-family: 'Shippori Mincho', 'Noto Serif JP', Georgia, serif;
font-size: clamp(24px, 3vw, 40px);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.01em;
color: #0a0a0a;
margin: 0 0 14px;
}
.akd-vpl__desc {
font-size: 15px;
line-height: 1.7;
color: #3a3530;
}
.akd-vpl__desc p { margin: 0 0 12px; }
.akd-vpl__desc p:last-child { margin-bottom: 0; }
/* Meta-Leiste: Tags + YouTube-Link (3fr-Spalte im Panel-Grid) */
.akd-vpl__meta-bar {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
background: transparent;
padding: 0;
margin: 0;
}
.akd-vpl__tags { display: flex; gap: 8px; flex-wrap: wrap; }
.akd-vpl__tag {
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.15em;
color: #6b6558;
border: 1px solid #c4b9aa;
padding: 4px 9px;
}
/* ── Sidebar (volle Höhe rechts) ───────────────────────────────────────────── */
.akd-vpl__sidebar {
grid-column: 2;
grid-row: 1 / span 2;
background: #f4efe6;
border-left: 1px solid #c4b9aa;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* Sidebar-Header */
.akd-vpl__sidebar-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border-bottom: 1px solid #c4b9aa;
flex-shrink: 0;
}
.akd-vpl__sidebar-title {
font-family: 'JetBrains Mono', monospace !important;
font-size: 10px !important;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #c8302a;
margin: 0;
line-height: 1.2 !important;
display: flex;
align-items: center;
gap: 8px;
}
.akd-vpl__sidebar-title::before {
content: '';
display: block;
width: 20px;
height: 2px;
background: #c8302a;
flex-shrink: 0;
}
.akd-vpl__count {
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #8a7f72;
white-space: nowrap;
}
/* Playlist-Scroll-Bereich */
.akd-vpl__list {
flex: 1;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #c4b9aa transparent;
background: #f4efe6;
}
/* Playlist-Eintrag: Nummer | Thumbnail | Titel/Meta */
.akd-vpl__item {
display: grid;
grid-template-columns: 108px 1fr;
column-gap: 12px;
align-items: center;
padding: 12px 14px 12px 12px;
border-bottom: 1px dashed #c4b9aa;
background: #f4efe6;
cursor: pointer;
transition: background 0.14s;
outline: none;
}
.akd-vpl__item:hover { background: #ece7de; }
.akd-vpl__item.is-active { background: #0a0a0a; }
.akd-vpl__item:focus-visible { box-shadow: inset 0 0 0 2px #c8302a; }
/* Nummer — overlaid oben-links im Thumbnail */
.akd-vpl__num {
position: absolute;
top: 0;
left: 0;
z-index: 2;
font-family: 'JetBrains Mono', monospace;
font-size: 8px;
font-weight: 700;
color: #f4efe6;
letter-spacing: 0.05em;
line-height: 1;
background: rgba(10, 10, 10, 0.72);
padding: 4px 6px;
}
.akd-vpl__item.is-active .akd-vpl__num {
background: #c8302a;
color: #fff;
}
/* Thumbnail */
.akd-vpl__thumb {
grid-column: 1;
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
background: #1a1a1a;
align-self: center;
flex-shrink: 0;
transition: outline 0.1s;
}
.akd-vpl__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.akd-vpl__thumb-placeholder {
width: 100%;
height: 100%;
background: #1e1e1e;
}
/* Aktiver Eintrag: roter Rahmen + dunkles Overlay (verdeckt ggf. YouTube-Icon im Thumbnail-Bild) */
.akd-vpl__item.is-active .akd-vpl__thumb { outline: 2px solid #c8302a; }
.akd-vpl__item.is-active .akd-vpl__thumb::after {
content: '';
position: absolute;
inset: 0;
background: rgba(10, 10, 10, 0.52);
pointer-events: none;
}
/* Play-Icon auf aktivem Item ausblenden (läuft bereits im Hauptplayer) */
.akd-vpl__item.is-active .akd-vpl__thumb-play { display: none; }
/* Hover-Overlay Play-Button — feste Größe, zentriert */
.akd-vpl__thumb-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
background: #c8302a;
opacity: 0;
transition: opacity 0.16s;
pointer-events: none;
}
.akd-vpl__thumb-play::after {
content: '';
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 6px 0 6px 10px;
border-color: transparent transparent transparent #fff;
margin-left: 2px;
}
.akd-vpl__item:hover .akd-vpl__thumb-play { opacity: 1; }
/* Dauer-Badge auf Thumbnail */
.akd-vpl__dur {
position: absolute;
bottom: 4px;
right: 4px;
background: rgba(0, 0, 0, 0.82);
color: #f4efe6;
font-family: 'JetBrains Mono', monospace;
font-size: 8px;
font-weight: 700;
padding: 2px 5px;
line-height: 1.4;
pointer-events: none;
}
/* Titel in Playlist-Eintrag */
.akd-vpl__item-title {
font-family: 'Shippori Mincho', 'Noto Serif JP', Georgia, serif;
font-size: 13px;
font-weight: 600;
line-height: 1.35;
color: #0a0a0a;
margin: 0;
padding-top: 1px;
transition: color 0.14s;
}
.akd-vpl__item.is-active .akd-vpl__item-title { color: #f4efe6; }
/* Meta (Datum · Ort) in Playlist */
.akd-vpl__item-meta {
font-family: 'JetBrains Mono', monospace;
font-size: 8px;
letter-spacing: 0.1em;
color: #8a7f72;
margin: 5px 0 0;
text-transform: uppercase;
}
.akd-vpl__item.is-active .akd-vpl__item-meta { color: #4a4a4a; }
/* "WIRD ABGESPIELT" Badge — erscheint vor dem Titel */
.akd-vpl__playing {
display: none;
font-family: 'JetBrains Mono', monospace;
font-size: 8px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #c8302a;
margin: 0 0 5px;
}
.akd-vpl__item.is-active .akd-vpl__playing { display: block; }
/* ── 12. AUFTRITTE ARCHIV ────────────────────────────────────────────────────
Shortcode [akd_auftritte_archiv] — vergangene Auftritte mit Jahres-Navigation,
Photo-Cards (volle Breite + Slideshow) und Text-Cards (1/3 Breite).
──────────────────────────────────────────────────────────────────────────── */
.akd-archive__nav {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 32px;
padding-bottom: 20px;
border-bottom: 1px dashed #c4b9aa;
}
.akd-archive__year-btn {
font-family: 'JetBrains Mono', monospace !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
color: #0a0a0a !important;
background: #f4efe6 !important;
border: 1px solid #0a0a0a !important;
padding: 7px 16px !important;
cursor: pointer;
transition: background 0.14s, color 0.14s;
appearance: none;
border-radius: 0 !important;
box-shadow: none !important;
}
.akd-archive__year-btn:hover { background: #0a0a0a !important; color: #f4efe6 !important; }
.akd-archive__year-btn.is-active { background: #0a0a0a !important; color: #f4efe6 !important; }
/* Custom Dropdown — "Älter"-Trigger + Panel */
.akd-archive__year-more {
position: relative;
}
/* Pfeil-Indikator am Trigger */
.akd-archive__year-more-btn::after {
content: '';
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 3.5px 0 3.5px;
border-color: currentColor transparent transparent transparent;
margin-left: 7px;
vertical-align: middle;
transition: transform 0.18s;
}
.akd-archive__year-more-btn[aria-expanded="true"]::after {
transform: rotate(180deg);
}
/* Dropdown-Panel */
.akd-archive__year-dropdown {
display: none;
position: absolute;
top: 100%;
left: 0;
margin-top: -1px; /* Border des Triggers überlappen */
flex-direction: column;
min-width: 100%;
border: 1px solid #0a0a0a !important;
background: #f4efe6;
z-index: 50;
}
.akd-archive__year-dropdown.is-open { display: flex; }
/* Einträge im Panel */
.akd-archive__year-dropdown .akd-archive__year-btn {
border: none !important;
border-bottom: 1px solid rgba(10,10,10,0.1) !important;
border-radius: 0 !important;
box-shadow: none !important;
width: 100%;
text-align: center;
padding: 8px 20px !important;
}
.akd-archive__year-dropdown .akd-archive__year-btn:last-child {
border-bottom: none !important;
}
/* Grid */
.akd-archive__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
align-items: start;
}
/* Photo-Card */
.akd-archive__card--photo {
grid-column: 1 / -1;
display: grid;
grid-template-columns: 2fr 1fr;
background: #f4efe6;
border: 1px solid #c4b9aa;
overflow: hidden;
}
/* ── 10b. INHALTSVERZEICHNIS (AKD TOC) ───────────────────────────────────────
Widget: AKD Inhaltsverzeichnis — automatische H2/H3-Extraktion
──────────────────────────────────────────────────────────────────────────── */
.akd-toc {
border: 1px solid #c4b9aa;
padding: 28px 32px 8px;
background: #f4efe6;
}
.akd-toc__head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.akd-toc__label {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #c8302a;
}
.akd-toc__arrow {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 12px;
color: #8a7f72;
}
.akd-toc__hr {
border: none;
border-top: 1px solid #0a0a0a;
margin: 0 0 0;
}
.akd-toc__list {
list-style: none;
margin: 0;
padding: 0;
}
.akd-toc__item {
display: flex;
align-items: baseline;
gap: 20px;
padding: 14px 0;
border-bottom: 1px dashed #c4b9aa;
}
.akd-toc__item:last-child { border-bottom: none; }
.akd-toc__item--indent { padding-left: 32px; }
.akd-toc__num {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
color: #c8302a;
flex-shrink: 0;
min-width: 24px;
}
.akd-toc__title {
font-family: 'Shippori Mincho', 'Noto Serif JP', Georgia, serif;
font-size: 18px;
font-weight: 400;
color: #0a0a0a;
text-decoration: none;
line-height: 1.3;
transition: color 0.15s ease;
}
.akd-toc__title:hover { color: #c8302a; }
/* ── 11. JOURNAL ─────────────────────────────────────────────────────────────
[akd_journal_feed] + [akd_journal_archiv]
──────────────────────────────────────────────────────────────────────────── */
/* ── Wrapper ─────────────────────────────────────────────────────────────── */
.akd-journal {
display: flex;
flex-direction: column;
gap: 0;
}
/* ── Hero ────────────────────────────────────────────────────────────────── */
.akd-journal-hero {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 520px;
border: 1px solid #c4b9aa;
overflow: hidden;
margin-bottom: 56px;
}
.akd-journal-hero__img-wrap {
display: block;
position: relative;
overflow: hidden;
aspect-ratio: 16 / 9;
}
.akd-journal-hero__img-wrap::after {
content: '';
position: absolute;
inset: 0;
box-shadow: inset 0 0 0 15px #f4efe6;
transition: box-shadow 0.45s ease;
pointer-events: none;
z-index: 1;
}
.akd-journal-hero:hover .akd-journal-hero__img-wrap::after { box-shadow: inset 0 0 0 0px #f4efe6; }
.akd-journal-hero__img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border: 1px solid #0a0a0a;
}
.akd-journal-hero__body {
display: flex;
flex-direction: column;
padding: 48px 52px 48px 52px;
background: #f4efe6;
}
/* Eyebrow — roter Balken + Kategorie-Name */
.akd-journal-hero__eyebrow {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.akd-journal-hero__eyebrow::before {
content: '';
display: block;
width: 28px;
height: 2px;
background: #c8302a;
flex-shrink: 0;
}
.akd-journal-hero__cat {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 9px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #c8302a;
text-decoration: none;
}
.akd-journal-hero__cat:hover { text-decoration: underline; }
.akd-journal-hero__title {
font-family: 'Shippori Mincho', 'Noto Serif JP', Georgia, serif !important;
font-size: clamp(28px, 3vw, 42px) !important;
font-weight: 700 !important;
line-height: 1.2 !important;
color: #0a0a0a !important;
margin: 0 0 20px !important;
}
.akd-journal-hero__title a {
color: inherit;
text-decoration: none;
}
.akd-journal-hero__title a:hover { color: #c8302a; }
.akd-journal-hero__excerpt {
font-family: 'Archivo', system-ui, sans-serif;
font-size: 16px;
line-height: 1.7;
color: #6b6558;
margin: 0 0 32px;
flex: 1;
}
/* Meta-Leiste unten */
.akd-journal-hero__meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 20px 32px;
border-top: 1px solid #c4b9aa;
padding-top: 24px;
}
.akd-journal-hero__meta-item {
display: flex;
flex-direction: column;
gap: 2px;
}
.akd-journal-hero__meta-label {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 8px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #8a7f72;
}
.akd-journal-hero__meta-val {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
color: #0a0a0a;
}
/* Weiterlesen-Button — gefüllter schwarzer Button */
.akd-journal-hero__btn {
display: inline-flex;
align-items: center;
padding: 12px 24px;
background: #0a0a0a;
color: #f4efe6 !important;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
text-decoration: none !important;
transition: background 0.18s ease;
margin-left: auto;
white-space: nowrap;
}
.akd-journal-hero__btn:hover { background: #c8302a; color: #f4efe6 !important; }
/* ── Grid ─────────────────────────────────────────────────────────────────── */
.akd-journal-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1px; /* Gap via Border-Trick: 1px gaps, bg transparent */
background: #c4b9aa; /* sichtbar als Trennlinie zwischen den Karten */
border: 1px solid #c4b9aa;
margin-bottom: 40px;
}
/* Schmale Karte (2 nebeneinander, Standard) */
.akd-journal-card {
display: flex;
flex-direction: column;
background: #f4efe6;
overflow: hidden;
transition: background 0.18s ease;
}
.akd-journal-card:hover { background: #ece7dd; }
.akd-journal-card__img-wrap {
display: block;
position: relative;
height: 345px;
overflow: hidden;
flex-shrink: 0;
}
/* Inset-Rahmen via box-shadow — ändert nie die Wrapper-Größe */
.akd-journal-card__img-wrap::after {
content: '';
position: absolute;
inset: 0;
box-shadow: inset 0 0 0 15px #f4efe6;
transition: box-shadow 0.45s ease;
pointer-events: none;
z-index: 1;
}
.akd-journal-card:hover .akd-journal-card__img-wrap::after { box-shadow: inset 0 0 0 0px #f4efe6; }
.akd-journal-card__img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border: 1px solid #0a0a0a;
}
.akd-journal-card__body {
padding: 24px 28px 28px;
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
.akd-journal-card__cat {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 8px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #c8302a;
text-decoration: none;
}
.akd-journal-card__cat:hover { text-decoration: underline; }
.akd-journal-card__title {
font-family: 'Shippori Mincho', 'Noto Serif JP', Georgia, serif !important;
font-size: 20px !important;
font-weight: 600 !important;
line-height: 1.3 !important;
color: #0a0a0a !important;
margin: 0 !important;
flex: 1;
}
.akd-journal-card__title a {
color: inherit;
text-decoration: none;
}
.akd-journal-card__title a:hover { color: #c8302a; }
.akd-journal-card__excerpt {
font-family: 'Archivo', system-ui, sans-serif;
font-size: 14px;
line-height: 1.65;
color: #6b6558;
margin: 0;
}
/* Trennlinie + Meta-Zeile (Datum · Lesezeit · Weiterlesen) */
.akd-journal-card__footer {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px 16px;
border-top: 1px solid #c4b9aa;
padding-top: 16px;
margin-top: auto;
}
.akd-journal-card__date,
.akd-journal-card__readtime {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 9px;
letter-spacing: 0.1em;
color: #8a7f72;
}
.akd-journal-card__readmore {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 9px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #c8302a;
text-decoration: none;
margin-left: auto;
transition: opacity 0.15s ease;
}
.akd-journal-card__readmore:hover { opacity: 0.72; text-decoration: underline; }
/* Breite Karte (volle Spaltenbreite, jedes 3.) */
.akd-journal-card--wide {
grid-column: 1 / -1;
flex-direction: row;
}
.akd-journal-card--wide .akd-journal-card__img-wrap {
height: auto;
min-height: 230px;
width: 42%;
flex-shrink: 0;
}
.akd-journal-card--wide:hover .akd-journal-card__img-wrap::after { box-shadow: inset 0 0 0 0px #f4efe6; }
.akd-journal-card--wide .akd-journal-card__body {
padding: 36px 44px;
justify-content: center;
}
.akd-journal-card--wide .akd-journal-card__title {
font-size: 26px !important;
}
/* ── Load More ────────────────────────────────────────────────────────────── */
.akd-journal-more {
display: flex;
justify-content: center;
padding: 40px 0 16px;
}
.akd-journal-more__btn {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #0a0a0a;
background: transparent;
border: 1px solid #0a0a0a;
padding: 14px 36px;
cursor: pointer;
transition: background 0.18s ease, color 0.18s ease;
}
.akd-journal-more__btn:hover {
background: #0a0a0a;
color: #f4efe6;
}
/* ── Journal Archiv (dunkel) ──────────────────────────────────────────────── */
.akd-journal-archiv {
display: flex;
flex-direction: column;
}
.akd-journal-archiv__year {
border-top: 1px solid rgba(244,239,230,0.12);
}
.akd-journal-archiv__year:last-child {
border-bottom: 1px solid rgba(244,239,230,0.12);
}
/* Accordion-Header */
.akd-journal-archiv__hd {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
width: 100%;
padding: 40px 0;
background: none;
border: none;
cursor: pointer;
text-align: left;
color: #f4efe6;
gap: 24px;
}
.akd-journal-archiv__year-meta {
display: flex;
flex-direction: column;
gap: 2px;
}
.akd-journal-archiv__year-num {
font-family: 'Shippori Mincho', 'Noto Serif JP', Georgia, serif;
font-size: clamp(64px, 8vw, 112px);
font-weight: 700;
line-height: 1;
color: #c8302a;
display: block;
transition: color 0.18s ease;
}
.akd-journal-archiv__hd:hover .akd-journal-archiv__year-num { color: #f4efe6; }
.akd-journal-archiv__year-count {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 9px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #8a7f72;
display: block;
}
/* Toggle-Pfeil */
.akd-journal-archiv__toggle {
color: #8a7f72;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: color 0.18s ease;
}
.akd-journal-archiv__toggle svg {
transition: transform 0.3s ease;
}
.akd-journal-archiv__year.is-open .akd-journal-archiv__toggle svg {
transform: rotate(180deg);
}
.akd-journal-archiv__hd:hover .akd-journal-archiv__toggle { color: #f4efe6; }
/* Post-Liste */
.akd-journal-archiv__list {
display: flex;
flex-direction: column;
padding-bottom: 40px;
}
.akd-journal-archiv__row {
display: grid;
grid-template-columns: 60px 140px 1fr auto;
align-items: baseline;
gap: 0 24px;
padding: 16px 0;
border-top: 1px dashed rgba(196,185,170,0.3);
text-decoration: none;
transition: background 0.15s ease;
color: #f4efe6;
}
.akd-journal-archiv__row:hover { color: #c8302a; }
.akd-journal-archiv__date {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.06em;
color: #8a7f72;
flex-shrink: 0;
}
.akd-journal-archiv__cat {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 8px;
font-weight: 500;
letter-spacing: 0.18em;
color: #c8302a;
flex-shrink: 0;
}
.akd-journal-archiv__title {
font-family: 'Archivo', system-ui, sans-serif;
font-size: 16px;
line-height: 1.35;
color: inherit;
transition: color 0.15s ease;
}
.akd-journal-archiv__arrow {
font-size: 14px;
color: #8a7f72;
flex-shrink: 0;
transition: color 0.15s ease, transform 0.15s ease;
display: inline-block;
}
.akd-journal-archiv__row:hover .akd-journal-archiv__arrow {
color: #c8302a;
transform: translateX(4px);
}
/* ── Responsive Journal ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
.akd-journal-hero { grid-template-columns: 1fr; min-height: auto; }
.akd-journal-hero__img-wrap { aspect-ratio: 16 / 9; height: auto; }
.akd-journal-hero__body { padding: 32px 28px; }
.akd-journal-hero__btn { margin-left: 0; }
.akd-journal-hero__meta { gap: 16px 24px; }
}
@media (max-width: 680px) {
.akd-journal-grid { grid-template-columns: 1fr; }
.akd-journal-card--wide { flex-direction: column; }
.akd-journal-card--wide .akd-journal-card__img-wrap { width: 100%; aspect-ratio: 4/3; }
.akd-journal-archiv__row { grid-template-columns: 50px 1fr auto; }
.akd-journal-archiv__cat { display: none; }
.akd-journal-archiv__year-num { font-size: 52px; }
}
/* ──────────────────────────────────────────────────────────────────────────── */
/* Standalone Photo Gallery Widget — kein Card-Wrapper vorhanden */
.akd-photo-gallery,
.elementor-widget-akd-photo-gallery,
.elementor-widget-akd-photo-gallery .elementor-widget-container {
width: 100%;
max-width: 100%;
display: block;
box-sizing: border-box;
overflow: hidden;
}
.akd-archive__slideshow {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
background: #0a0a0a;
}
.akd-archive__slide a { cursor: zoom-in; }
.akd-archive__slides { width: 100%; height: 100%; }
.akd-archive__slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.45s ease;
pointer-events: none;
}
.akd-archive__slide.is-active {
opacity: 1;
pointer-events: auto;
}
.akd-archive__slide img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.akd-archive__slide a { cursor: zoom-in; display: block; position: relative; width: 100%; height: 100%; overflow: hidden; }
.akd-archive__slide.is-active a:hover img { transform: scale(1.04); }
/* Zoom-Icon Overlay (analog zu .akd-photo-card__zoom) */
.akd-archive__zoom {
position: absolute;
top: 12px;
right: 12px;
width: 34px;
height: 34px;
background: rgba(10,10,10,0.50);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #f4efe6;
opacity: 0;
transition: opacity 0.22s ease;
pointer-events: none;
z-index: 2;
}
.akd-archive__zoom svg { fill: none !important; stroke: currentColor; }
.akd-archive__slide.is-active a:hover .akd-archive__zoom { opacity: 1; }
.akd-archive__slide-prev,
.akd-archive__slide-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 3;
width: 36px;
height: 36px;
background: rgba(10,10,10,0.55);
color: #f4efe6;
border: none;
font-size: 22px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.14s;
}
.akd-archive__slide-prev { left: 10px; }
.akd-archive__slide-next { right: 10px; }
.akd-archive__slide-prev:hover,
.akd-archive__slide-next:hover { background: #c8302a; }
.akd-archive__dots {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 6px;
z-index: 3;
}
.akd-archive__dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(244,239,230,0.45);
cursor: pointer;
transition: background 0.14s;
}
.akd-archive__dot.is-active { background: #c8302a; }
.akd-archive__count {
position: absolute;
bottom: 10px;
right: 12px;
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.12em;
color: #f4efe6;
background: rgba(10,10,10,0.6);
padding: 3px 7px;
z-index: 3;
pointer-events: none;
}
.akd-archive__credit {
position: absolute;
bottom: 10px;
left: 12px;
font-family: 'JetBrains Mono', monospace;
font-size: 8px;
font-weight: 400;
letter-spacing: 0.08em;
color: rgba(244, 239, 230, 0.45);
background: rgba(10, 10, 10, 0.45);
padding: 3px 7px;
z-index: 3;
pointer-events: none;
}
.akd-archive__card-info {
display: flex;
flex-direction: column;
justify-content: center;
gap: 10px;
padding: 28px 32px;
text-decoration: none;
background: #f4efe6;
transition: background 0.14s;
position: relative;
}
.akd-archive__card--photo:hover .akd-archive__card-info { background: #ece7de; }
.akd-archive__card-arrow {
font-family: 'JetBrains Mono', monospace;
font-size: 16px;
color: #c8302a;
margin-top: 8px;
display: block;
transition: transform 0.15s;
}
.akd-archive__card--photo:hover .akd-archive__card-arrow { transform: translateX(4px); }
/* Text-Card */
.akd-archive__card--text {
display: flex;
flex-direction: column;
gap: 6px;
padding: 18px 20px 20px;
background: #f4efe6;
border: 1px dashed #c4b9aa;
border-top: 2px solid #c4b9aa;
text-decoration: none;
transition: background 0.14s, border-top-color 0.14s;
position: relative;
}
.akd-archive__card--text:hover { background: #ece7de; border-top-color: #c8302a; }
/* Shared */
.akd-archive__card-date {
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #c8302a;
margin: 0;
}
.akd-archive__card-title {
font-family: 'Shippori Mincho', 'Noto Serif JP', Georgia, serif;
font-weight: 700;
color: #0a0a0a;
margin: 0;
line-height: 1.25;
}
.akd-archive__card--photo .akd-archive__card-title { font-size: clamp(18px, 2vw, 26px); }
.akd-archive__card--text .akd-archive__card-title { font-size: 14px; }
.akd-archive__card-venue {
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
letter-spacing: 0.1em;
color: #8a7f72;
text-transform: uppercase;
margin: 0;
}
/* MD / FR Gruppe-Badge */
.akd-gruppe-badge {
position: absolute;
top: 14px;
right: 14px;
font-family: 'JetBrains Mono', monospace;
font-size: 8px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
background: #4a2f6b;
color: #e8def0;
padding: 4px 9px;
line-height: 1;
pointer-events: none;
}
/* Archiv Responsive */
@media (max-width: 768px) {
.akd-archive__grid { grid-template-columns: 1fr; }
.akd-archive__card--photo { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
.akd-archive__card--text { grid-column: 1; }
}
/* ── Responsive (Video-Player) ───────────────────────────────────────────── */
@media (max-width: 900px) {
.akd-vpl {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
}
.akd-vpl__player { grid-column: 1; grid-row: 1; }
.akd-vpl__sidebar { grid-column: 1; grid-row: 2; border-left: none; border-top: 1px solid #1e1e1e; max-height: 300px; }
.akd-vpl__info { grid-column: 1; grid-row: 3; }
/* Info-Panel: einspaltig — Button unter Beschreibung */
.akd-vpl__panel {
grid-template-columns: 1fr;
padding: 24px 20px 28px;
gap: 20px 0;
}
.akd-vpl__panel-meta,
.akd-vpl__panel-title,
.akd-vpl__desc,
.akd-vpl__meta-bar { grid-column: 1; }
.akd-vpl__meta-bar { align-items: flex-start; }
}
/* ── 13. LIGHTBOX (site-weit) ────────────────────────────────────────────────
Öffnet sich bei Klick auf .akd-photo-card[data-lb] (Pressefoto-Karten mit
reichem Metadaten-Panel) sowie bei allen anderen Bild-Links auf der Site
(Elementor-Galerien, Archiv-Slideshow etc.) — dann ohne Metadaten.
Struktur: dunkles Overlay → Shell (Flex-Row) → Stage links + Panel rechts.
──────────────────────────────────────────────────────────────────────────── */
/* ── Body-Lock ─────────────────────────────────────────────────────────────── */
body.akd-lb-open {
overflow: hidden;
}
/* ── SVG-Reset: Jupiter X überschreibt global fill auf currentColor ──────────
Alle SVGs im Lightbox + Foto-Card explizit auf fill:none setzen.
Inline-Styles in JS haben Vorrang für dynamisch erzeugte LB-SVGs. */
.akd-lb svg,
.akd-photo-card__zoom svg,
.akd-photo-card__overlay svg {
fill: none !important;
overflow: visible;
}
.akd-lb__close { color: #8a7f72 !important; }
.akd-lb__nav { color: #f4efe6 !important; }
.akd-photo-card__zoom { color: #f4efe6; }
/* ── Overlay ────────────────────────────────────────────────────────────────── */
.akd-lb {
position: fixed;
inset: 0;
z-index: 99999;
background: rgba(10, 10, 10, 0.92);
display: flex;
align-items: center;
justify-content: center;
padding: 0;
opacity: 0;
pointer-events: none;
transition: opacity 0.22s ease;
}
.akd-lb.is-open {
opacity: 1;
pointer-events: auto;
}
/* ── Shell: Stage + Panel nebeneinander ─────────────────────────────────────── */
.akd-lb__shell {
display: flex;
flex-direction: row;
width: 100%;
height: 90vh;
max-height: 90vh;
box-shadow: 0 32px 80px rgba(0, 0, 0, 0.7);
}
/* ── Stage (Bild, links, flex:1) ───────────────────────────────────────────── */
.akd-lb__stage {
flex: 1 1 0;
min-width: 0;
background: #0a0a0a;
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.akd-lb__img {
display: block;
width: 100%;
height: 100%;
object-fit: contain; /* füllt Stage, Seitenverhältnis bleibt */
user-select: none;
-webkit-user-drag: none;
}
/* ── Prev / Next ────────────────────────────────────────────────────────────── */
.akd-lb__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(10, 10, 10, 0.55);
border: 1px solid rgba(244, 239, 230, 0.18);
color: #f4efe6;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
z-index: 2;
}
.akd-lb__nav:hover {
background: rgba(200, 48, 42, 0.85);
border-color: transparent;
}
.akd-lb__prev { left: 16px; }
.akd-lb__next { right: 16px; }
/* ── Counter unten mittig auf Stage ─────────────────────────────────────────── */
.akd-lb__counter {
position: absolute;
bottom: 14px;
left: 50%;
transform: translateX(-50%);
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
font-weight: 400;
letter-spacing: 0.12em;
color: rgba(244, 239, 230, 0.5);
pointer-events: none;
white-space: nowrap;
}
/* ── Panel (Metadaten, rechts) ──────────────────────────────────────────────── */
.akd-lb__panel {
width: 360px;
flex-shrink: 0;
background: #f4efe6;
overflow-y: auto;
padding: 40px 36px 48px;
display: flex;
flex-direction: column;
gap: 0;
position: relative;
}
/* ── Schließen-Button (oben rechts im Panel) ────────────────────────────────── */
.akd-lb__close {
position: absolute;
top: 20px;
right: 20px;
background: none;
border: none;
color: #8a7f72;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: color 0.15s ease;
padding: 0;
}
.akd-lb__close:hover { color: #0a0a0a; }
/* ── Eyebrow ────────────────────────────────────────────────────────────────── */
.akd-lb__eyebrow {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
}
.akd-lb__eyebrow::before {
content: '';
display: block;
width: 28px;
height: 2px;
background: #c8302a;
flex-shrink: 0;
}
.akd-lb__eyebrow span {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 9px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #c8302a;
}
/* ── Kategorie-Badge ────────────────────────────────────────────────────────── */
.akd-lb__cat {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 9px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #6b6558;
margin: 0 0 10px;
}
/* ── Titel ──────────────────────────────────────────────────────────────────── */
/* Doppelter Selektor und !important nötig — Jupiter X überschreibt alle h2 */
.akd-lb .akd-lb__title {
font-family: 'Shippori Mincho', 'Noto Serif JP', Georgia, serif !important;
font-size: 17px !important;
font-weight: 600 !important;
line-height: 1.35 !important;
color: #0a0a0a !important;
margin: 0 0 14px !important;
}
/* ── Beschreibung ───────────────────────────────────────────────────────────── */
.akd-lb__desc {
font-family: 'Archivo', system-ui, sans-serif;
font-size: 14px;
line-height: 1.65;
color: #6b6558;
margin: 0 0 24px;
}
/* ── Meta-Tabelle ───────────────────────────────────────────────────────────── */
.akd-lb__meta {
display: flex;
flex-direction: column;
gap: 0;
border-top: 1px dashed #c4b9aa;
margin-bottom: 28px;
}
.akd-lb__meta-row {
display: flex;
align-items: baseline;
gap: 12px;
padding: 11px 0;
border-bottom: 1px dashed #c4b9aa;
}
.akd-lb__meta-label {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 9px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #8a7f72;
flex-shrink: 0;
min-width: 56px;
}
.akd-lb__meta-value {
font-family: 'Archivo', system-ui, sans-serif;
font-size: 13px;
line-height: 1.45;
color: #0a0a0a;
}
/* ── Download-Button ────────────────────────────────────────────────────────── */
.akd-lb__download {
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 28px;
text-decoration: none;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
/* akd-btn base überschreiben für dark-on-cream */
background: transparent !important;
color: #0a0a0a !important;
border: 1px solid #0a0a0a !important;
padding: 11px 22px !important;
transition: background 0.18s ease, color 0.18s ease !important;
}
.akd-lb__download:hover {
background: #0a0a0a !important;
color: #f4efe6 !important;
}
/* ── Keyboard-Hinweis ───────────────────────────────────────────────────────── */
.akd-lb__kbd {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 9px;
letter-spacing: 0.08em;
color: #8a7f72;
margin: 0;
line-height: 1.8;
}
.akd-lb__kbd kbd {
display: inline-block;
background: rgba(10, 10, 10, 0.08);
border: 1px solid #c4b9aa;
border-radius: 2px;
padding: 1px 5px;
font-family: inherit;
font-size: inherit;
color: #6b6558;
line-height: 1.6;
}
/* ── Responsive: Panel unter Stage bei schmalen Viewports (Portrait) ─────────── */
@media (max-width: 768px) {
.akd-lb {
align-items: flex-end;
}
.akd-lb__shell {
flex-direction: column;
height: 100vh;
max-height: 100vh;
max-width: 100%;
width: 100%;
box-shadow: none;
}
.akd-lb__stage {
flex: 1 1 0;
min-height: 0;
}
.akd-lb__img {
/* width/height: 100% + object-fit:contain gilt vom Desktop — keine Überschreibung nötig */
max-height: 55vh;
}
.akd-lb__panel {
width: 100%;
max-height: 45vh;
padding: 24px 20px 32px;
}
.akd-lb__prev { left: 8px; }
.akd-lb__next { right: 8px; }
}
/* ── Responsive: Landscape-Handy — Bild füllt Viewport, Panel scrollbar darunter */
@media (orientation: landscape) and (max-height: 560px) {
/* Overlay wird zum Scrollcontainer */
.akd-lb {
align-items: flex-start;
overflow-y: auto;
}
/* Shell stapelt vertikal und wächst mit dem Inhalt */
.akd-lb__shell {
flex-direction: column;
height: auto;
max-height: none;
min-height: 100vh;
min-height: 100svh;
width: 100%;
box-shadow: none;
}
/* Stage füllt exakt den sichtbaren Viewport */
.akd-lb__stage {
flex: 0 0 100vh;
flex: 0 0 100svh;
width: 100%;
min-height: 0;
}
.akd-lb__img {
max-height: none;
}
/* Panel liegt direkt unterhalb des Stages — User scrollt herunter */
.akd-lb__panel {
width: 100%;
max-height: none;
overflow-y: visible;
padding: 28px 24px 48px;
flex-shrink: 0;
}
/* Schließen-Button immer sichtbar (fixed), da er sonst unter dem Fold liegt */
.akd-lb__close {
position: fixed;
top: 12px;
right: 12px;
background: rgba(10, 10, 10, 0.55) !important;
border-radius: 50%;
color: #f4efe6 !important;
width: 36px;
height: 36px;
}
.akd-lb__close:hover {
background: rgba(200, 48, 42, 0.85) !important;
color: #f4efe6 !important;
}
.akd-lb__prev { left: 8px; }
.akd-lb__next { right: 8px; }
}
/* ── 14. JOURNAL SINGLE — POST CONTENT ──────────────────────────────────────
Scope: Klasse :is(.akd-post-content, .akd-post, [data-elementor-type="wp-post"]) auf dem Dynamic-Field-Widget
(Elementor → Erweitert → CSS-Klassen → "akd-post-content")
─────────────────────────────────────────────────────────────────────────── */
/* ── Fließtext ─── */
:is(.akd-post-content, .akd-post, [data-elementor-type="wp-post"]) p,
:is(.akd-post-content, .akd-post, [data-elementor-type="wp-post"]) li {
font-family: 'Archivo', system-ui, sans-serif;
font-size: 17px;
line-height: 1.72;
color: #0a0a0a;
margin-bottom: 1.7em;
}
/* ── Smooth Scroll (global, wirkt auf alle Anker-Links) ─── */
html {
scroll-behavior: smooth;
}
/* ── H2: § XX Counter-Label + Anker-Offset ─── */
/* counter-reset sitzt am Wrapper, damit jeder Post bei § 01 beginnt. */
/* Die eigentliche Schriftgröße kommt von Elementor Global Typography. */
:is(.akd-post-content, .akd-post, [data-elementor-type="wp-post"]) {
counter-reset: akd-h2;
}
:is(.akd-post-content, .akd-post, [data-elementor-type="wp-post"]) h2 {
counter-increment: akd-h2;
scroll-margin-top: 100px;
margin-top: 2.4em;
/* Globale H2 ist 72px/900 — im Fließtext deutlich kleiner */
font-size: clamp(1.5rem, 3vw, 1.9rem) !important;
font-weight: 700 !important;
line-height: 1.2 !important;
letter-spacing: -0.01em !important;
}
:is(.akd-post-content, .akd-post, [data-elementor-type="wp-post"]) h2::before {
display: block;
content: "§ " counter(akd-h2, decimal-leading-zero);
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #c8302a;
margin-bottom: 8px;
}
/* ── H3: Anker-Offset ─── */
:is(.akd-post-content, .akd-post, [data-elementor-type="wp-post"]) h3 {
scroll-margin-top: 100px;
}
/* ── Ordered List — roter Mono-Counter (01, 02, 03 …) ─── */
:is(.akd-post-content, .akd-post, [data-elementor-type="wp-post"]) ol {
list-style: none;
padding: 0;
margin: 1.5em 0;
counter-reset: akd-ol;
}
:is(.akd-post-content, .akd-post, [data-elementor-type="wp-post"]) ol li {
counter-increment: akd-ol;
display: flex;
gap: 1.5em;
padding: 18px 0;
border-bottom: 1px dashed #c4b9aa;
font-size: 17px;
line-height: 1.65;
margin-bottom: 0;
}
:is(.akd-post-content, .akd-post, [data-elementor-type="wp-post"]) ol li::before {
content: counter(akd-ol, decimal-leading-zero);
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
font-weight: 700;
color: #c8302a;
flex-shrink: 0;
padding-top: 5px;
letter-spacing: 0.08em;
min-width: 1.8em;
}
/* Erste Liste-Item erhält obere Linie */
:is(.akd-post-content, .akd-post, [data-elementor-type="wp-post"]) ol li:first-child {
border-top: 1px dashed #c4b9aa;
}
/* ── Unordered List ─── */
:is(.akd-post-content, .akd-post, [data-elementor-type="wp-post"]) ul {
padding-left: 0;
margin: 1em 0;
list-style: none;
}
:is(.akd-post-content, .akd-post, [data-elementor-type="wp-post"]) ul li {
position: relative;
padding-left: 1.6em;
margin-bottom: 0.5em;
}
:is(.akd-post-content, .akd-post, [data-elementor-type="wp-post"]) ul li::before {
content: "—";
color: #c8302a;
position: absolute;
left: 0;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
}
/* ── Blockquote ─── */
:is(.akd-post-content, .akd-post, [data-elementor-type="wp-post"]) blockquote {
border-left: 3px solid #c8302a;
margin: 2em 0;
padding: 0.25em 0 0.25em 1.5em;
font-family: 'Shippori Mincho', 'Noto Serif JP', Georgia, serif;
font-size: 1.1em;
font-style: italic;
color: #0a0a0a;
}
/* ── Links im Content ─── */
:is(.akd-post-content, .akd-post, [data-elementor-type="wp-post"]) a {
color: #c8302a;
text-decoration: underline;
text-underline-offset: 3px;
}
:is(.akd-post-content, .akd-post, [data-elementor-type="wp-post"]) a:hover {
text-decoration: none;
}
/* ── Bilder ─── */
:is(.akd-post-content, .akd-post, [data-elementor-type="wp-post"]) img {
max-width: 100%;
height: auto;
display: block;
margin: 2em 0;
}
/* ── 15. POST NAVIGATION (.akd-post-nav) ─────────────────────────────────────
Shortcode [akd_post_nav] — Prev/Next Navigation über dem Footer
─────────────────────────────────────────────────────────────────────────── */
.akd-post-nav {
display: grid;
grid-template-columns: 1fr 1fr;
background: #111010;
width: 100%;
}
/* ── Item (gemeinsam) ─── */
.akd-post-nav__item,
.akd-post-nav__item--empty {
display: flex;
align-items: center;
gap: 32px;
padding: 52px 56px;
text-decoration: none;
transition: background 0.22s ease;
border-top: 1px solid rgba(196, 185, 170, 0.12);
}
.akd-post-nav__item:hover {
background: rgba(200, 48, 42, 0.07);
}
/* ── Prev: Pfeil links, Text rechts ─── */
.akd-post-nav__item--prev {
border-right: 1px solid rgba(196, 185, 170, 0.12);
}
/* ── Next: Text links, Pfeil rechts ─── */
.akd-post-nav__item--next {
justify-content: flex-end;
text-align: right;
}
/* ── Pfeil ─── */
.akd-post-nav__arrow {
font-size: 36px;
line-height: 1;
color: #c8302a;
flex-shrink: 0;
font-family: 'Shippori Mincho', 'Noto Serif JP', Georgia, serif;
transition: transform 0.22s ease;
}
.akd-post-nav__item--prev:hover .akd-post-nav__arrow {
transform: translateX(-6px);
}
.akd-post-nav__item--next:hover .akd-post-nav__arrow {
transform: translateX(6px);
}
/* ── Label (Richtung · Datum) ─── */
.akd-post-nav__label {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #8a7f72;
margin-bottom: 14px;
line-height: 1;
}
/* ── Titel ─── */
.akd-post-nav__title {
font-family: 'Shippori Mincho', 'Noto Serif JP', Georgia, serif;
font-size: clamp(18px, 2vw, 28px);
font-weight: 700;
line-height: 1.28;
color: #c8302a;
margin: 0;
}
/* ── Mobile: untereinander ─── */
@media (max-width: 767px) {
.akd-post-nav {
grid-template-columns: 1fr;
}
.akd-post-nav__item,
.akd-post-nav__item--empty {
padding: 36px 28px;
gap: 20px;
}
.akd-post-nav__item--prev {
border-right: none;
border-bottom: 1px solid rgba(196, 185, 170, 0.12);
}
/* Next auf Mobile: Text links, Pfeil rechts (gleiche Richtung wie Prev) */
.akd-post-nav__item--next {
flex-direction: row;
text-align: left;
justify-content: flex-start;
}
.akd-post-nav__item--next .akd-post-nav__arrow {
order: 2;
margin-left: auto;
}
.akd-post-nav__item--next .akd-post-nav__body {
order: 1;
}
}
/* ── 16. LESEFORTSCHRITT (.akd-rp) ──────────────────────────────────────────
Elementor Widget: AKD Lesefortschritt
Gleicher visueller Stil wie .akd-toc (border, cream BG, Mono-Labels).
JS in wp_footer Priority 28 aktualisiert Bar, Prozentzahl und Restzeit.
─────────────────────────────────────────────────────────────────────────── */
.akd-rp {
border: 1px solid #c4b9aa;
padding: 28px 32px 24px;
background: #f4efe6;
}
.akd-rp__head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.akd-rp__label {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #c8302a;
}
.akd-rp__arrow {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 12px;
color: #8a7f72;
}
.akd-rp__hr {
border: none;
border-top: 1px solid #0a0a0a;
margin: 0 0 18px;
}
.akd-rp__row {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 10px;
}
.akd-rp__row--time {
margin-top: 10px;
margin-bottom: 0;
}
.akd-rp__key {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: #8a7f72;
}
.akd-rp__pct {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 13px;
font-weight: 700;
color: #c8302a;
letter-spacing: 0.04em;
}
.akd-rp__time {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
font-weight: 700;
color: #0a0a0a;
letter-spacing: 0.04em;
}
/* Fortschrittsbalken */
.akd-rp__track {
height: 3px;
background: #c4b9aa;
border-radius: 2px;
overflow: hidden;
}
.akd-rp__bar {
height: 100%;
width: 0%;
background: #c8302a;
border-radius: 2px;
transition: width 0.25s ease;
}
/* ── 16b. WEITERE BEITRÄGE — Blog-Karten (.akd-blog-cards) ──────────────────
Elementor Widget: AKD Weitere Beiträge
3-spaltiges Kartengrid für Blog-Post-Singles (Leseempfehlungen).
─────────────────────────────────────────────────────────────────────────── */
.akd-blog-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media (max-width: 1024px) {
.akd-blog-cards {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.akd-blog-cards {
grid-template-columns: 1fr;
}
}
/* Karte */
.akd-blog-card {
border: 1px solid #c4b9aa;
background: #fff;
overflow: hidden;
display: flex;
flex-direction: column;
transition: border-color 0.2s ease;
}
.akd-blog-card:hover {
border-color: #0a0a0a;
}
/* Link-Wrapper */
.akd-blog-card__link {
display: flex;
flex-direction: column;
height: 100%;
text-decoration: none;
color: inherit;
}
/* Bild */
.akd-blog-card__img-wrap {
width: 100%;
height: 265px;
overflow: hidden;
flex-shrink: 0;
}
.akd-blog-card__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform 0.4s ease;
}
.akd-blog-card:hover .akd-blog-card__img {
transform: scale(1.03);
}
/* Inhalt */
.akd-blog-card__body {
padding: 20px 24px 24px;
display: flex;
flex-direction: column;
flex: 1;
}
/* Kategorie + Datum */
.akd-blog-card__meta {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
}
.akd-blog-card__cat {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
background: #c8302a;
color: #f4efe6;
padding: 3px 8px;
white-space: nowrap;
}
/* Kategorie-Farben nach Slug */
.akd-blog-card__cat--uber-uns,
.akd-blog-card__cat--ueber-uns {
background: #4a2f6b;
}
.akd-blog-card__date {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 9px;
letter-spacing: 0.08em;
color: #8a7f72;
}
/* Titel */
.akd-blog-card__title {
font-family: 'Shippori Mincho', 'Noto Serif JP', Georgia, serif;
font-size: clamp(20px, 2vw, 28px);
font-weight: 700;
line-height: 1.2;
color: #0a0a0a;
margin: 0 0 16px;
transition: color 0.2s ease;
}
.akd-blog-card:hover .akd-blog-card__title {
color: #c8302a;
}
/* Trennlinie */
.akd-blog-card__hr {
border: none;
border-top: 1px dashed #c4b9aa;
margin: 0 0 16px;
}
/* Footer: Autor + CTA */
.akd-blog-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
}
.akd-blog-card__byline {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 9px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #8a7f72;
}
.akd-blog-card__cta {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #c8302a;
transition: letter-spacing 0.2s ease;
}
.akd-blog-card:hover .akd-blog-card__cta {
letter-spacing: 0.2em;
}
/* ── 17. SHARE BOX (.akd-share-box) ─────────────────────────────────────────
Teilen-Widget: gleiches visuelles System wie .akd-toc / .akd-rp.
Buttons nutzen .akd-btn (globale Klasse) + JS-Hooks aus dem Plugin.
─────────────────────────────────────────────────────────────────────────── */
.akd-share-box {
border: 1px solid #c4b9aa;
padding: 28px 32px 24px;
background: #f4efe6;
width: 100%;
box-sizing: border-box;
}
.akd-share-box__head {
margin-bottom: 20px;
}
.akd-share-box__label {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #c8302a;
}
.akd-share-box__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
/* Buttons im Grid: volle Breite, zentriert, kein Linkstil */
.akd-share-box__grid .akd-btn {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
text-align: center;
cursor: pointer;
text-decoration: none;
/*