/*
Theme Name:   TICCON V2
Theme URI:    https://ticcon.de/
Author:       TICCON
Description:  Theme der TICCON Webseite V2. Alle Texte, Bilder und Videos sind im WordPress-Backend pflegbar - unter "Design > Customizer" sowie ueber die Menuepunkte "Arbeiten", "Leistungen", "Team" und "Historie".
Version:      2.5.2
Requires at least: 6.0
Requires PHP: 7.4
License:      Proprietary
Text Domain:  ticcon
*/

/* =========================================================
   style.css — Noir Studio · Luxury Noir & Blanc — v2.0
   Multi-page Website Design System
========================================================= */

/* =========================================
   CSS Custom Properties
========================================= */
:root {
    --bg-color:     #0a0a0a;
    --bg-alt:       #111111;
    --bg-card:      #161616;
    --text-color:   #f0f0f0;
    --text-muted:   #888888;
    --text-dim:     #555555;
    --accent-color: #ffffff;
    --accent-glow:  rgba(255,255,255,0.12);
    --gold:         #c8a96e;
    --gold-dim:     rgba(200,169,110,0.25);

    --font-sans:    'Inter', -apple-system, sans-serif;
    --font-serif:   'Playfair Display', serif;

    --nav-height:   80px;
    --radius-sm:    4px;
    --radius-md:    10px;
    --radius-lg:    20px;

    --ease-smooth:  cubic-bezier(0.25, 1, 0.5, 1);
    --ease-out:     cubic-bezier(0.0, 0.0, 0.2, 1);
}

/* =========================================
   Reset & Base
========================================= */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: 16px;
}

body {
    font-family: var(--font-sans);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--bg-color);
}

img, video {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

ul, ol {
    list-style: none;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
}

/* =========================================
   Typography
========================================= */
h1, h2, h3, h4 {
    font-family: var(--font-serif);
    font-weight: 400;
    letter-spacing: 0.04em;
    line-height: 1.2;
}

.section-label {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1rem;
    display: block;
}

.section-title {
    font-size: clamp(2rem, 4vw, 3.5rem);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.75rem;
}

.section-subtitle {
    font-family: var(--font-sans);
    color: var(--text-muted);
    font-size: 1.05rem;
    margin-bottom: 3.5rem;
    font-weight: 300;
    letter-spacing: 0.02em;
}

/* =========================================
   Navigation — Main Header
========================================= */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--nav-height);
    padding: 0 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 9000;
    transition: background 0.4s ease, box-shadow 0.4s ease, top 0.35s ease;
}

/* Beim Runterscrollen ausgeblendet (nav.js). Bewusst über top statt transform:
   transform würde — wie backdrop-filter — das fixe Mobilmenü-Overlay auf die
   Navbar begrenzen. Tastatur-Fokus und offenes Menü holen sie zurück. */
.navbar.nav-hidden {
    top: calc(-1 * var(--nav-height) - 2px);
}

.navbar.nav-hidden:focus-within,
html.has-modal-open .navbar.nav-hidden {
    top: 0;
}

.navbar.at-top {
    background: linear-gradient(to bottom,
        rgba(10,10,10,0.85) 0%,
        rgba(10,10,10,0) 100%);
}

/* Hintergrund + Blur des Scroll-Zustands liegen auf ::before, nicht auf der
   Navbar selbst: backdrop-filter macht ein Element zum Bezugsrahmen für
   position:fixed-Nachfahren. Auf .navbar gesetzt, schrumpft dadurch das
   Mobilmenü-Overlay von core/navigation (fixed, inset:0) auf die Navbar-Höhe. */
.navbar::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(10,10,10,0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(255,255,255,0.06);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.navbar.scrolled::before {
    opacity: 1;
}

.nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    font-family: var(--font-serif);
    font-size: 1.35rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--text-color);
    text-decoration: none;
    flex-shrink: 0;
    transition: color 0.3s;
}

.nav-brand:hover {
    color: var(--accent-color);
}

/* Marke ist jetzt ein core/group (.nav-brand) aus core/image (.nav-brand-logo,
   die Klasse sitzt am <figure>) + core/paragraph (.nav-brand-name). Schrift/
   Farbe erbt der Schriftzug von .nav-brand oben. */
.nav-brand .wp-block-image {
    margin: 0;
    line-height: 0;
}

/* Bildmarke links neben dem Schriftzug.
   Die Grafik sitzt nicht mittig auf ihrer Flaeche: oben bleiben 5 Prozent
   frei, unten 15. Ohne den Versatz stuende die Marke sichtbar zu hoch
   neben den Grossbuchstaben. */
.nav-brand-logo img {
    display: block;
    height: 46px;
    width: auto;
    transform: translateY(3px);
}

.wp-block-site-logo .custom-logo {
    max-width: 80px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.nav-brand-name {
    margin: 0;
    line-height: 1;
}

@media (max-width: 768px) {
    .nav-brand { gap: 0.6rem; }
    .nav-brand-logo img { height: 38px; }
}

/* Main nav links list */
.nav-links {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Each nav item (wrapper for link + dropdown) */
.nav-item {
    position: relative;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.5rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-color);
    white-space: nowrap;
    transition: color 0.3s ease;
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0.85rem;
    right: 0.85rem;
    height: 1px;
    background: var(--accent-color);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--ease-smooth);
}

.nav-link:hover,
.nav-item:hover > .nav-link,
.nav-link.active {
    color: var(--accent-color);
}

.nav-link:hover::after,
.nav-item:hover > .nav-link::after,
.nav-link.active::after {
    transform: scaleX(1);
}

/* Chevron arrow */
.nav-link .chevron {
    width: 10px;
    height: 10px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.nav-item:hover > .nav-link .chevron {
    transform: rotate(-135deg) translateY(-2px);
}

/* ── Dropdown Panel ── */
.nav-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 220px;
    background: rgba(14,14,14,0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: var(--radius-md);
    padding: 0.6rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7);
}

.nav-item:hover > .nav-dropdown,
.nav-item:focus-within > .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-dropdown a {
    display: block;
    padding: 0.6rem 1.2rem;
    font-size: 0.78rem;
    font-weight: 300;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    transition: color 0.2s, padding-left 0.2s;
    white-space: nowrap;
}

.nav-dropdown a:hover {
    color: var(--text-color);
    padding-left: 1.6rem;
}

.nav-dropdown a + a {
    border-top: 1px solid rgba(255,255,255,0.04);
}

/* ── Language Switcher ── */
.lang-switcher {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 50px;
    margin-left: 0.5rem;
    transition: border-color 0.3s;
}

.lang-switcher:hover {
    border-color: rgba(255,255,255,0.4);
}

.lang-btn {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dim);
    transition: color 0.2s;
    padding: 0 0.2rem;
    line-height: 1;
}

.lang-btn.active {
    color: var(--accent-color);
}

.lang-divider {
    color: var(--text-dim);
    font-size: 0.65rem;
    user-select: none;
}

/* Rechte Kopfleiste: Menue (core/navigation) + Sprachumschalter bilden eine
   Gruppe, damit .navbar per space-between die Marke links und beides zusammen
   rechts setzt. */
.navbar .nav-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.navbar .nav-right .lang-switcher {
    margin-left: 0;
}

/* Mobil (ab hier zeigt core/navigation den Hamburger) rueckt der Umschalter
   links neben den Button, damit der Button aussen bleibt. */
@media (max-width: 600px) {
    .navbar .nav-right .lang-switcher {
        order: -1;
    }
}

/* ── Mobile Menu Toggle ── */
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    cursor: pointer;
    z-index: 9100;
}

.nav-toggle span {
    display: block;
    width: 24px;
    height: 1.5px;
    background: var(--text-color);
    transition: transform 0.3s, opacity 0.3s;
}

.nav-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile Navigation */
.nav-mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10,10,10,0.98);
    backdrop-filter: blur(12px);
    z-index: 8900;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.nav-mobile-overlay.open {
    display: flex;
    opacity: 1;
}

.nav-mobile-overlay .mob-link {
    font-family: var(--font-serif);
    font-size: 2.2rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.3s, letter-spacing 0.3s;
}

.nav-mobile-overlay .mob-link:hover {
    color: var(--text-muted);
    letter-spacing: 0.12em;
}

.nav-mobile-overlay .mob-sub {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1rem;
    margin-top: -0.5rem;
}

.nav-mobile-overlay .mob-sub a {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    transition: color 0.2s;
}

.nav-mobile-overlay .mob-sub a:hover {
    color: var(--text-color);
}

/* =========================================================
   Navigation als core/navigation-Block (Site-Editor-editierbar)

   Bildet das ursprüngliche .nav-link / .nav-dropdown /
   .nav-mobile-overlay Design auf die .wp-block-navigation-
   Struktur ab. Verhalten (Hover-Flyout, Mobile-Overlay,
   Öffnen/Schließen) kommt aus dem Core-Block selbst.

   WICHTIG: Core rendert die Liste tief in .responsive-container-
   divs verschachtelt → nur Descendant-Selektoren (Leerzeichen),
   kein '>'. Und Core-Defaults (Submenü #fff, Text #000) haben
   Spezifität (0,3,0)/(0,4,0) → als Anker '.tc-nav.wp-block-navigation'
   verwenden, damit wir mit (0,4,0)+ sicher gewinnen.
   Alte .nav-links/.nav-item/... Regeln oben sind ungenutzt.
========================================================= */

.navbar .tc-nav.wp-block-navigation {
    flex: 0 1 auto;
}

/* Basis: alle Menü-Links (Top + Submenu) — Schrift & Uppercase */
.navbar .tc-nav.wp-block-navigation .wp-block-navigation-item__content {
    font-family: var(--font-sans);
    text-transform: uppercase;
    transition: color 0.3s ease, padding-left 0.2s ease;
}

/* ── Top-Level-Links (direkte Kinder des äußeren Containers) ── */
.navbar .tc-nav.wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
    position: relative;
    padding: 0.5rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    color: var(--text-color);
    white-space: nowrap;
}

/* Unterstrich beim Hover (wie .nav-link::after) */
.navbar .tc-nav.wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
    content: '';
    position: absolute;
    left: 0.85rem;
    right: 0.85rem;
    bottom: 0.3rem;
    height: 1px;
    background: var(--accent-color);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--ease-smooth);
}
.navbar .tc-nav.wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.navbar .tc-nav.wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content {
    color: var(--accent-color);
}
.navbar .tc-nav.wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after {
    transform: scaleX(1);
}

/* Chevron am Submenü-Eltern (Core-SVG) */
.navbar .tc-nav.wp-block-navigation .wp-block-navigation__submenu-icon {
    color: currentColor;
}
.navbar .tc-nav.wp-block-navigation .wp-block-navigation__submenu-icon svg {
    transition: transform 0.3s ease;
}
.navbar .tc-nav.wp-block-navigation .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-icon svg,
.navbar .tc-nav.wp-block-navigation .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation__submenu-icon svg {
    transform: rotate(180deg);
}

/* ── Dropdown-Flyout (wie .nav-dropdown) — überstimmt Core #fff/#000 ── */
.navbar .tc-nav.wp-block-navigation .wp-block-navigation__submenu-container {
    min-width: 220px;
    background-color: rgba(14, 14, 14, 0.97);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-md);
    padding: 0.6rem 0;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
    color: var(--text-muted);
}
.navbar .tc-nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    padding: 0.6rem 1.2rem;
    font-size: 0.78rem;
    font-weight: 300;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    white-space: nowrap;
}
.navbar .tc-nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
    color: var(--text-color);
    padding-left: 1.6rem;
}
.navbar .tc-nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item + .wp-block-navigation-item {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

/* ── Hamburger (wie .nav-toggle) ── */
.navbar .tc-nav.wp-block-navigation .wp-block-navigation__responsive-container-open {
    color: var(--text-color);
}
.navbar .tc-nav.wp-block-navigation .wp-block-navigation__responsive-container-open svg {
    width: 26px;
    height: 26px;
    fill: currentColor;
}

/* ── Vollbild-Overlay mobil (wie .nav-mobile-overlay) — überstimmt Core #fff/#000 ── */
.navbar .tc-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
    background-color: rgba(10, 10, 10, 0.98);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: var(--text-color);
    padding: 4rem 1.5rem;
}
.navbar .tc-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    justify-content: center;
    align-items: center;
    width: 100%;
}
.navbar .tc-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    gap: 1.5rem;
    align-items: center;
    justify-content: center;
}
.navbar .tc-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    font-family: var(--font-serif);
    font-size: 2.2rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: none;
    color: var(--text-color);
}
.navbar .tc-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
    background-color: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    min-width: 0;
}
.navbar .tc-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 300;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.navbar .tc-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    color: var(--text-color);
}

/* =========================================
   Hero Section
========================================= */
.hero {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 40%;
    background: linear-gradient(to bottom, transparent, var(--bg-color));
    z-index: 1;
    pointer-events: none;
}

.hero-bg-video {
    position: absolute;
    top: 50%; left: 50%;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto;
    z-index: 0;
    transform: translate(-50%, -50%);
    object-fit: cover;
    opacity: 0.6;
}

.hero-overlay {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 1rem;
}

.hero-overlay h1 {
    font-size: clamp(2.5rem, 6vw, 7rem);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-bottom: 1rem;
}

.hero-overlay p {
    font-family: var(--font-sans);
    font-size: clamp(0.9rem, 1.5vw, 1.2rem);
    font-weight: 300;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

/* Hero scroll indicator */
.hero-scroll {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-dim);
}

.hero-scroll span {
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.scroll-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, var(--text-dim), transparent);
    animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
    0%, 100% { opacity: 0.3; transform: scaleY(1); }
    50% { opacity: 1; transform: scaleY(0.5); }
}

/* =========================================
   Page Header (for inner pages)
========================================= */
.page-hero {
    position: relative;
    height: 55vh;
    min-height: 380px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 0 5% 5rem;
    overflow: hidden;
    background: var(--bg-color);
}

.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 20% 60%, rgba(200,169,110,0.05) 0%, transparent 60%);
}

.page-hero-content {
    position: relative;
    z-index: 1;
}

.page-hero h1 {
    font-size: clamp(3rem, 7vw, 8rem);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 0.9;
    color: var(--text-color);
}

/* =========================================
   Layout Utilities
========================================= */
.pad-section { padding: 7rem 5%; }
.pad-section-sm { padding: 4rem 5%; }
.bg-alt { background-color: var(--bg-alt); }
.bg-card { background-color: var(--bg-card); }

.container {
    max-width: 1440px;
    margin: 0 auto;
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

/* =========================================
   Home — Teaser Cards (Offering Preview)
========================================= */
.teaser-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.teaser-card {
    position: relative;
    padding: 3.5rem 2.5rem;
    background: var(--bg-alt);
    overflow: hidden;
    transition: background 0.4s ease;
    text-decoration: none;
    color: inherit;
    display: block;
}

.teaser-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 3px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--ease-smooth);
}

.teaser-card:hover {
    background: var(--bg-card);
}

.teaser-card:hover::before {
    transform: scaleX(1);
}

.teaser-card-num {
    font-family: var(--font-serif);
    font-size: 4rem;
    font-weight: 400;
    color: rgba(255,255,255,0.04);
    line-height: 1;
    margin-bottom: 1.5rem;
    transition: color 0.4s;
}

.teaser-card:hover .teaser-card-num {
    color: rgba(200,169,110,0.12);
}

.teaser-card h3 {
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.75rem;
    font-family: var(--font-serif);
}

.teaser-card p {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.7;
    font-weight: 300;
}

.teaser-arrow {
    display: inline-block;
    margin-top: 1.5rem;
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 0.3s, transform 0.3s;
}

.teaser-card:hover .teaser-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* =========================================
   Home — Featured Work Preview
========================================= */
.featured-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
}

.featured-item {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    cursor: pointer;
    background: var(--bg-card);
}

.featured-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.7s var(--ease-smooth), filter 0.5s;
    filter: brightness(0.7) saturate(0.8);
}

.featured-item:hover img {
    transform: scale(1.05);
    filter: brightness(0.55) saturate(0.6);
}

.featured-item-info {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 2rem 1.5rem 1.5rem;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    transform: translateY(10px);
    opacity: 0;
    transition: opacity 0.4s, transform 0.4s;
}

.featured-item:hover .featured-item-info {
    opacity: 1;
    transform: translateY(0);
}

.featured-item-info span {
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    display: block;
    margin-bottom: 0.4rem;
}

.featured-item-info h3 {
    font-size: 1.2rem;
    letter-spacing: 0.06em;
}

/* =========================================
   CTA Banner
========================================= */
.cta-banner {
    padding: 8rem 5%;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(200,169,110,0.06) 0%, transparent 65%);
}

.cta-banner h2 {
    font-size: clamp(2rem, 5vw, 4.5rem);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 2rem;
    position: relative;
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2.5rem;
    border: 1px solid var(--text-color);
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-color);
    text-decoration: none;
    transition: background 0.3s, color 0.3s, border-color 0.3s;
    position: relative;
}

.btn-primary::after {
    content: '→';
    transition: transform 0.3s;
}

.btn-primary:hover {
    background: var(--text-color);
    color: var(--bg-color);
}

.btn-primary:hover::after {
    transform: translateX(4px);
}

/* =========================================
   Offering Page
========================================= */
.offering-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 80vh;
    align-items: stretch;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.offering-panel:nth-child(even) {
    direction: rtl;
}

.offering-panel:nth-child(even) > * {
    direction: ltr;
}

.offering-text {
    padding: 7rem 6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.offering-num {
    font-family: var(--font-serif);
    font-size: 7rem;
    font-weight: 400;
    color: rgba(255,255,255,0.03);
    line-height: 1;
    margin-bottom: -1rem;
}

.offering-text h2 {
    font-size: clamp(2.2rem, 3.5vw, 4rem);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1.5rem;
}

.offering-text p {
    font-size: 1rem;
    color: var(--text-muted);
    font-weight: 300;
    line-height: 1.9;
    max-width: 480px;
    margin-bottom: 2rem;
}

.offering-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag {
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.35rem 0.9rem;
    border: 1px solid rgba(255,255,255,0.12);
    color: var(--text-muted);
    border-radius: 50px;
    transition: border-color 0.3s, color 0.3s;
}

.tag:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.offering-visual {
    position: relative;
    overflow: hidden;
    background: var(--bg-card);
    min-height: 500px;
}

.offering-visual img {
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0.6;
    transition: transform 0.8s var(--ease-smooth), opacity 0.5s;
}

.offering-panel:hover .offering-visual img {
    transform: scale(1.04);
    opacity: 0.75;
}

.offering-visual-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(10,10,10,0.3), transparent);
}

/* =========================================
   Work Page — Filter + Grid
========================================= */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 4rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.filter-btn {
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.55rem 1.2rem;
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-muted);
    border-radius: 50px;
    transition: all 0.3s ease;
    background: transparent;
}

.filter-btn:hover {
    border-color: rgba(255,255,255,0.3);
    color: var(--text-color);
}

.filter-btn.active {
    background: var(--text-color);
    border-color: var(--text-color);
    color: var(--bg-color);
}

/* Work Grid */
.work-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 2px;
}

.work-card {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: var(--bg-card);
    cursor: pointer;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.work-card.hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.97);
    position: absolute;
    visibility: hidden;
}

.work-card img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.7s var(--ease-smooth);
    filter: saturate(0.7) brightness(0.75);
}

.work-card:hover img {
    transform: scale(1.07);
    filter: saturate(0.5) brightness(0.55);
}

.work-card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2rem;
    background: linear-gradient(transparent 40%, rgba(0,0,0,0.75));
    opacity: 0;
    transition: opacity 0.4s ease;
}

.work-card:hover .work-card-overlay {
    opacity: 1;
}

.work-card-cat {
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.4rem;
}

.work-card-title {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    letter-spacing: 0.04em;
}

/* Lightbox */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.95);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
    padding: 2rem;
    backdrop-filter: blur(4px);
}

.lightbox-overlay.open {
    opacity: 1;
    visibility: visible;
}

.lightbox-content {
    position: relative;
    max-width: 1100px;
    width: 100%;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.lightbox-overlay.open .lightbox-content {
    transform: scale(1);
}

.lightbox-content img {
    width: 100%;
    border-radius: var(--radius-sm);
}

.lightbox-close {
    position: absolute;
    top: -3rem;
    right: 0;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    transition: color 0.2s;
    background: none;
    border: none;
    line-height: 1;
}

.lightbox-close:hover { color: var(--text-color); }

.lightbox-info {
    margin-top: 1.2rem;
}

.lightbox-info span {
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    display: block;
    margin-bottom: 0.3rem;
}

.lightbox-info h3 {
    font-size: 1.5rem;
    letter-spacing: 0.05em;
}

/* =========================================
   History — Animated Timeline
========================================= */
.timeline-section {
    padding: 4rem 5% 8rem;
    position: relative;
}

/* Vertical center line */
.timeline-track {
    position: absolute;
    left: 50%;
    top: 0;
    /* Die letzten 11 rem übernimmt der Strahl des Abspanns — sonst lägen
       zwei goldene Linien übereinander. */
    bottom: 11rem;
    width: 1px;
    transform: translateX(-50%);
    pointer-events: none;
    overflow: hidden;
}

.timeline-line {
    position: absolute;
    top: 0; left: 0;
    width: 1px;
    height: 100%;
    /* Der Ausklang unten war lang genug, dass die Linie schon weit über
       der letzten Station verschwand. Sie hält jetzt bis kurz vor die
       Kante durch und wird vom Strahl des Abspanns aufgenommen. */
    background: linear-gradient(to bottom,
        transparent 0%,
        var(--gold) 15%,
        var(--gold) 95%,
        rgba(200, 169, 110, 0.45) 100%);
    transform-origin: top;
    transform: scaleY(0);
    transition: transform 0.1s linear;
    box-shadow: 0 0 8px rgba(200,169,110,0.4),
                0 0 20px rgba(200,169,110,0.15);
}

/* Each milestone item */
.timeline-item {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0 3rem;
    margin-bottom: 8rem;
    position: relative;
    align-items: center;
}

.timeline-item:last-child {
    margin-bottom: 2rem;
}

/* Alternating left / right */
.timeline-item .tl-left {
    grid-column: 1;
    text-align: right;
}

.timeline-item .tl-center {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.timeline-item .tl-right {
    grid-column: 3;
    text-align: left;
}

/* Odd items: content on the left.
   Der Block sitzt rechts in seiner Spalte, direkt an der Mittellinie —
   der Text darin läuft aber wie überall von links nach rechts. Rechtsbündiger
   Fließtext hat an jedem Zeilenanfang eine andere Startkante und liest sich
   dadurch spürbar schlechter. */
.timeline-item:nth-child(odd) .tl-content {
    grid-column: 1;
    text-align: left;
}

.timeline-item:nth-child(odd) .tl-empty {
    grid-column: 3;
}

/* Even items: content on the right */
.timeline-item:nth-child(even) .tl-content {
    grid-column: 3;
    text-align: left;
}

.timeline-item:nth-child(even) .tl-empty {
    grid-column: 1;
}

/* The glowing dot on the center line */
.tl-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 4px rgba(200,169,110,0.15),
                0 0 20px rgba(200,169,110,0.5),
                0 0 40px rgba(200,169,110,0.2);
    position: relative;
    z-index: 1;
    transform: scale(0);
    transition: transform 0.5s var(--ease-smooth), box-shadow 0.5s;
}

.timeline-item.in-view .tl-dot {
    transform: scale(1);
}

.timeline-item.in-view .tl-dot:hover {
    box-shadow: 0 0 0 8px rgba(200,169,110,0.1),
                0 0 30px rgba(200,169,110,0.7),
                0 0 60px rgba(200,169,110,0.3);
}

/* Year label */
.tl-year {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    letter-spacing: 0.15em;
    color: var(--gold);
    margin-top: 0.6rem;
    font-weight: 400;
}

/* Content block */
.tl-content {
    opacity: 0;
    transition: opacity 0.7s ease, transform 0.7s var(--ease-smooth);
}

.timeline-item:nth-child(odd) .tl-content {
    transform: translateX(30px);
}

.timeline-item:nth-child(even) .tl-content {
    transform: translateX(-30px);
}

.timeline-item.in-view .tl-content {
    opacity: 1;
    transform: translateX(0);
}

.tl-content h3 {
    font-size: clamp(1.15rem, 1.7vw, 1.6rem);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0;
    line-height: 1.25;
    max-width: 380px;
    /* Umbrüche stehen als <br> im Text; balance greift nur, wenn keine gesetzt sind */
    text-wrap: balance;
}

.timeline-item:nth-child(odd) .tl-content h3 {
    margin-left: auto;
}

.tl-content p {
    font-size: 0.92rem;
    color: var(--text-muted);
    font-weight: 300;
    line-height: 1.8;
    max-width: 380px;
}

.timeline-item:nth-child(odd) .tl-content p {
    margin-left: auto;
}

/* Glow line between dot and content */
.tl-connector {
    width: 3rem;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(200,169,110,0.4));
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s 0.3s ease;
}

.timeline-item:nth-child(even) .tl-connector {
    background: linear-gradient(to left, transparent, rgba(200,169,110,0.4));
    transform-origin: left;
}

.timeline-item.in-view .tl-connector {
    transform: scaleX(1);
}

/* Timeline page decorative large number */
.tl-bg-year {
    font-family: var(--font-serif);
    font-size: clamp(8rem, 15vw, 18rem);
    color: rgba(255,255,255,0.015);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    user-select: none;
    line-height: 1;
    font-weight: 400;
    top: -2rem;
    white-space: nowrap;
}

/* =========================================
   About Page
========================================= */
.about-statement {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    padding: 8rem 5%;
}

.about-statement h2 {
    font-size: clamp(2rem, 4vw, 4rem);
    line-height: 1.3;
    letter-spacing: 0.05em;
    margin-bottom: 2rem;
}

/* Das Zitat darüber steht bewusst mittig — bei einem Fließtext über mehrere
   Zeilen wandert die Startkante sonst pro Zeile, und 900 px sind ohnehin zu
   breit zum Lesen. Deshalb hier linksbündig auf ruhigem Maß, Block mittig. */
.about-statement p {
    font-size: 1.1rem;
    color: var(--text-muted);
    font-weight: 300;
    line-height: 1.9;
    text-align: left;
    max-width: 62ch;
    margin-left: auto;
    margin-right: auto;
}

/* Stats / Numbers */
.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    background: rgba(255,255,255,0.03);
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.stat-item {
    padding: 4rem 2rem;
    text-align: center;
    background: var(--bg-alt);
}

.stat-number {
    font-family: var(--font-serif);
    font-size: clamp(3rem, 5vw, 5.5rem);
    font-weight: 400;
    color: var(--text-color);
    line-height: 1;
    margin-bottom: 0.5rem;
    display: block;
}

/* Der Zusatz hinter der Zahl (+, M, …) steht kleiner und auf der
   Grundlinie. In voller Größe drängt sich ein "M" neben "500" vor,
   obwohl es die Einheit ist und nicht der Wert. */
.stat-suffix {
    font-size: 0.58em;
    letter-spacing: 0.01em;
    margin-left: 0.06em;
}

.stat-label {
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-dim);
}

/* Team Grid */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.team-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--bg-card);
}

.team-card-img {
    aspect-ratio: 3/4;
    overflow: hidden;
}

.team-card-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease-smooth);
    filter: saturate(0.5) brightness(0.8);
}

.team-card:hover .team-card-img img {
    transform: scale(1.04);
    filter: saturate(0.3) brightness(0.7);
}

.team-card-info {
    padding: 1.5rem;
}

.team-card-info h3 {
    font-size: 1.2rem;
    letter-spacing: 0.05em;
    margin-bottom: 0.3rem;
}

.team-card-info span {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
}

/* =========================================
   Contact Page
========================================= */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 8rem;
    align-items: start;
    padding: 7rem 5%;
    max-width: 1440px;
    margin: 0 auto;
}

.contact-info h2 {
    font-size: clamp(2rem, 3.5vw, 4rem);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 2rem;
}

.contact-info p {
    font-size: 1rem;
    color: var(--text-muted);
    font-weight: 300;
    line-height: 1.9;
    margin-bottom: 3rem;
}

.contact-detail {
    margin-bottom: 1.5rem;
}

.contact-detail .label {
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.3rem;
    display: block;
}

.contact-detail a,
.contact-detail span {
    font-size: 1rem;
    color: var(--text-color);
    font-weight: 300;
    text-decoration: none;
    transition: color 0.2s;
}

.contact-detail a:hover {
    color: var(--text-muted);
}

/* Contact Form */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-group {
    position: relative;
}

.form-group label {
    display: block;
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 0.5rem;
    transition: color 0.3s;
}

.form-group:focus-within label {
    color: var(--gold);
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding: 0.75rem 0;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 300;
    color: var(--text-color);
    outline: none;
    transition: border-color 0.3s;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
}

.form-group select {
    background-color: transparent;
    color: var(--text-muted);
}

.form-group select option {
    background-color: #1a1a1a;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-bottom-color: var(--gold);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-dim);
}

.form-group textarea {
    min-height: 140px;
    resize: vertical;
}

.form-group .focus-line {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
    pointer-events: none;
}

.form-group:focus-within .focus-line {
    transform: scaleX(1);
}

.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.btn-submit {
    align-self: flex-start;
    margin-top: 1rem;
    padding: 1rem 2.5rem;
    border: 1px solid var(--text-color);
    background: transparent;
    color: var(--text-color);
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
}

.btn-submit:hover {
    background: var(--text-color);
    color: var(--bg-color);
}

/* =========================================
   Footer
========================================= */
.site-footer {
    padding: 6rem 5% 3rem;
    border-top: 1px solid rgba(255,255,255,0.05);
    background-color: var(--bg-color);
}

.footer-inner {
    max-width: 1440px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 4rem;
    margin-bottom: 5rem;
}

.footer-brand h2 {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-bottom: 1rem;
}

.footer-brand p {
    font-size: 0.88rem;
    color: var(--text-muted);
    font-weight: 300;
    line-height: 1.8;
    max-width: 280px;
}

.footer-col h4 {
    font-family: var(--font-sans);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 1.2rem;
    font-weight: 500;
}

.footer-col ul li {
    margin-bottom: 0.6rem;
}

.footer-col ul li a {
    font-size: 0.88rem;
    color: var(--text-muted);
    font-weight: 300;
    transition: color 0.2s;
}

.footer-col ul li a:hover {
    color: var(--text-color);
}

.footer-bottom {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255,255,255,0.05);
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-bottom p {
    font-size: 0.78rem;
    color: var(--text-dim);
    font-weight: 300;
}

.footer-legal {
    display: flex;
    gap: 1.5rem;
}

.footer-legal a {
    font-size: 0.78rem;
    color: var(--text-dim);
    transition: color 0.2s;
}

.footer-legal a:hover {
    color: var(--text-muted);
}

/* Footer liegt als editierbarer Block-Template-Part vor (parts/footer.html,
   Core-Blöcke). Diese Regeln neutralisieren Core-Block-Eigenheiten, damit das
   obige .site-footer/.footer-* Design unverändert greift. */
.site-footer .wp-block-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer .footer-legal {
    display: flex;
    gap: 1.5rem;
}

/* =========================================
   Social Media Reel (carried from v1)
========================================= */
.social-split-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6rem;
}

.social-text { flex: 0 1 420px; }
.social-text .section-subtitle { margin-bottom: 2rem; }

.sample-text {
    font-size: 1rem;
    color: var(--text-muted);
    font-weight: 300;
    line-height: 1.8;
}

.social-visual {
    flex: 0 1 auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 1.2rem;
}

.reel-device-simulation {
    width: 320px;
    aspect-ratio: 9/16;
    background: #000;
    border-radius: var(--radius-lg);
    position: relative;
    box-shadow: 0 30px 60px rgba(0,0,0,0.8),
                0 0 0 1px rgba(255,255,255,0.05);
    overflow: hidden;
}

.reel-container {
    width: 100%; height: 100%;
    overflow-y: hidden;
    scroll-behavior: smooth;
}

.reel-video {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    background: #111;
}

.reel-pagination {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    z-index: 10;
    align-self: center;
}

.reel-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background-color: var(--text-muted);
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s, height 0.3s;
}

.reel-dot.active {
    background-color: var(--accent-color);
    transform: scale(1.1);
    height: 18px;
    border-radius: 4px;
}

/* =========================================
   Horizontal Carousel (Editorial & Products)
========================================= */
.carousel-wrapper {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    padding-bottom: 1.5rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
    cursor: grab;
}

.carousel-wrapper:active { cursor: grabbing; }

.carousel-wrapper::-webkit-scrollbar { height: 2px; }
.carousel-wrapper::-webkit-scrollbar-track { background: transparent; }
.carousel-wrapper::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,0.1);
    border-radius: 4px;
}

.carousel-track {
    display: flex;
    gap: 1.5rem;
    padding: 0 5%;
    width: max-content;
    height: 500px;
}

.carousel-track figure { height: 100%; flex-shrink: 0; }
.carousel-track img {
    height: 100%; width: auto;
    object-fit: contain;
    border-radius: var(--radius-sm);
    transition: transform 0.5s var(--ease-smooth);
}
.carousel-track figure:hover img { transform: scale(1.02); }

/* Music Videos */
.music-video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.music-card {
    text-decoration: none;
    color: var(--text-color);
    display: block;
    transition: transform 0.3s ease;
}

.music-card:hover { transform: translateY(-6px); }

.video-thumbnail {
    position: relative;
    aspect-ratio: 16/9;
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 1rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

.video-thumbnail img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.music-card:hover .video-thumbnail img { transform: scale(1.05); }

.play-icon {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    color: #fff;
    background: rgba(0,0,0,0.45);
    width: 56px; height: 56px;
    display: flex;
    align-items: center; justify-content: center;
    border-radius: 50%;
    opacity: 0.8;
    backdrop-filter: blur(4px);
    transition: opacity 0.3s, transform 0.3s;
}

.music-card:hover .play-icon {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.12);
}

.music-card h3 {
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: 1rem;
    letter-spacing: 0.05em;
    text-align: center;
}

/* =========================================
   Animations & Scroll Reveals
========================================= */
.fade-up {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.9s var(--ease-smooth), transform 0.9s var(--ease-smooth);
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.slide-in-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.9s var(--ease-smooth), transform 0.9s var(--ease-smooth);
}

.slide-in-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.slide-in-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.9s var(--ease-smooth), transform 0.9s var(--ease-smooth);
}

.slide-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}

.delay-1 { transition-delay: 0.15s; }
.delay-2 { transition-delay: 0.3s; }
.delay-3 { transition-delay: 0.45s; }
.delay-4 { transition-delay: 0.6s; }

/* =========================================
   Responsive
========================================= */
@media (max-width: 1024px) {
    .offering-panel { grid-template-columns: 1fr; }
    .offering-panel:nth-child(even) { direction: ltr; }
    .offering-text { padding: 4rem 2rem; }
    .offering-visual { min-height: 400px; }

    .contact-layout { grid-template-columns: 1fr; gap: 4rem; }

    .footer-inner { grid-template-columns: 1fr 1fr; gap: 3rem; }

    .stats-row { grid-template-columns: 1fr 1fr; }

    .timeline-item {
        grid-template-columns: 1fr !important;
        padding-left: 3rem;
    }

    .timeline-track { left: 1.5rem; }

    .timeline-item .tl-left,
    .timeline-item .tl-center,
    .timeline-item .tl-right,
    .timeline-item .tl-content,
    .timeline-item .tl-empty {
        grid-column: 1 !important;
        text-align: left !important;
    }

    .timeline-item .tl-content h3,
    .timeline-item .tl-content p { margin-left: 0 !important; }

    .timeline-item .tl-center {
        position: absolute;
        left: -3rem;
        top: 50%;
        transform: translateY(-50%);
    }

    .timeline-item .tl-connector { display: none; }

    .timeline-item:nth-child(even) .tl-content { transform: translateX(-30px); }
}

@media (max-width: 900px) {
    .social-split-layout { flex-direction: column; text-align: center; gap: 4rem; }
    .social-text { flex: 1 1 auto; max-width: 100%; }
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .music-video-grid { grid-template-columns: 1fr; }
    .teaser-grid { grid-template-columns: 1fr; }
    .featured-strip { grid-template-columns: 1fr; }
    .work-grid { grid-template-columns: 1fr; }
    .team-grid { grid-template-columns: 1fr 1fr; }
    .form-grid-2 { grid-template-columns: 1fr; }
    .stats-row { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .nav-links { display: none; }
    .nav-toggle { display: flex; }
    .pad-section { padding: 5rem 5%; }
    .carousel-track { height: 320px; }
    .stats-row { grid-template-columns: 1fr; }
    .footer-inner { grid-template-columns: 1fr; }
    .team-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .page-hero h1 { font-size: 3rem; }
    .offering-text { padding: 3rem 1.5rem; }
    .reel-device-simulation { width: 280px; }
}
/* =========================================
   WordPress-Anpassungen (TICCON V2)
   Ergänzungen gegenüber der statischen Version.
========================================= */

/* Featured-Work-Kacheln sind jetzt echte Links statt onclick-Divs */
.featured-item {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Sprachumschalter im Mobilmenü */
.mob-lang {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    align-items: center;
}

.mob-lang .lang-btn {
    font-size: 1rem;
    letter-spacing: 0.1em;
}

.mob-lang .lang-divider { color: var(--text-dim); }

/* Kleinerer Seitenkopf für Standard-Seiten und Fehlerseiten */
.page-hero-sm { min-height: 45vh; }

/* Honeypot-Feld im Kontaktformular — für Menschen unsichtbar */
.tc-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Fehlerzustand der Formular-Rückmeldung */
.form-success.is-error {
    border-color: rgba(255, 100, 100, 0.35);
    color: rgba(255, 140, 140, 0.95);
}

/* Kontaktseite aus Standard-Blöcken (Gruppe .contact-layout + ticcon/contact-form).
   Übernimmt, was tc_render_contact_body als Inline-Style mitbringt. */
.contact-layout .contact-title {
    font-size: clamp(2rem, 3.5vw, 4rem);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 2rem;
}

.contact-layout .contact-intro {
    font-size: 1rem;
    color: var(--text-muted);
    font-weight: 300;
    line-height: 1.9;
    margin-bottom: 3rem;
}

.contact-detail p {
    margin: 0;
    font-size: 1rem;
    color: var(--text-color);
    font-weight: 300;
}

.contact-detail.contact-address { margin-top: 2rem; }

/* Scroll-Reveal gibt es nur im Frontend (nav.js) — im Editor sichtbar lassen */
.block-editor-block-list__layout .fade-up,
.block-editor-block-list__layout .slide-in-left,
.block-editor-block-list__layout .slide-in-right {
    opacity: 1;
    transform: none;
}

/* Inhalte aus dem WordPress-Editor (Standard-Seiten) */
.tc-entry h1,
.tc-entry h2,
.tc-entry h3 { color: var(--text-color); }

.tc-entry img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
}

.tc-entry ul,
.tc-entry ol {
    margin: 0 0 1.5rem 1.25rem;
    color: var(--text-muted);
}

.tc-entry a { color: var(--gold); }

/* WordPress-Adminleiste überlagert die fixierte Navigation nicht */
.admin-bar .navbar { top: 32px; }

@media screen and (max-width: 782px) {
    .admin-bar .navbar { top: 46px; }
}

/* =========================================
   Cookie-Hinweis (#cookie-consent)
   Balken unten, plus kleines Cookie-Symbol
   unten links zum erneuten Öffnen.
========================================= */
#cookie-consent {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: none;
    padding: 1.75rem 5%;
    background: rgba(10, 10, 10, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

#cookie-consent.visible {
    display: block;
    animation: tc-consent-in 0.35s var(--ease-out) both;
}

#cookie-consent.fade-out {
    animation: tc-consent-out 0.3s var(--ease-out) both;
}

@keyframes tc-consent-in {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes tc-consent-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(100%); }
}

.consent-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
}

.consent-copy {
    max-width: 68ch;
}

.consent-copy h2 {
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.6rem;
}

.consent-copy p {
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--text-muted);
}

.consent-link {
    color: var(--text-color);
    border-bottom: 1px solid var(--gold-dim);
    transition: border-color 0.3s;
    white-space: nowrap;
}

.consent-link:hover {
    border-bottom-color: var(--gold);
}

.consent-actions {
    flex-shrink: 0;
}

/* Die Knoepfe sind core/button-Bloecke aus parts/cookie-consent.html.
   Deshalb wird hier .wp-block-button__link gestaltet und nicht eine
   eigene Klasse — Redaktion darf die Bloecke im Site-Editor anfassen,
   ohne dass das Aussehen zerfaellt. */
#cookie-consent .wp-block-buttons {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.75rem;
}

#cookie-consent .wp-block-button__link {
    display: block;
    padding: 0.85rem 1.75rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 0;
    background: transparent;
    color: var(--text-color);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.3s, color 0.3s, border-color 0.3s;
}

#cookie-consent .wp-block-button__link:hover {
    border-color: var(--text-color);
    background: rgba(255, 255, 255, 0.06);
}

#cookie-consent .consent-btn-solid .wp-block-button__link {
    background: var(--text-color);
    border-color: var(--text-color);
    color: var(--bg-color);
}

#cookie-consent .consent-btn-solid .wp-block-button__link:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--bg-color);
}

/* ── Wiederöffnen-Knopf ──────────────────────────────── */
.consent-reopen {
    position: fixed;
    left: 1.75rem;
    bottom: 1.75rem;
    z-index: 9500;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    background: rgba(10, 10, 10, 0.8);
    color: var(--text-muted);
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.3s, color 0.3s, border-color 0.3s;
}

/* Das hidden-Attribut muss die display-Regel oben schlagen. */
.consent-reopen[hidden],
#cookie-consent[hidden] {
    display: none;
}

.consent-reopen:hover {
    opacity: 1;
    color: var(--gold);
    border-color: var(--gold-dim);
}

.consent-reopen svg {
    width: 20px;
    height: 20px;
}

@media (max-width: 768px) {
    #cookie-consent {
        padding: 1.5rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom));
        max-height: 70vh;
        overflow-y: auto;
    }

    .consent-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 1.25rem;
    }

    #cookie-consent .wp-block-buttons {
        flex-direction: column;
    }

    #cookie-consent .wp-block-button,
    #cookie-consent .wp-block-button__link {
        width: 100%;
    }

    .consent-reopen {
        left: 1rem;
        bottom: 1rem;
    }
}