/* ==========================================================================
   Theme A: Skizzenbuch und Labor
   Papier, Tusche-Blau, Source Serif 4 als klare Überschrift, IBM Plex Mono als Messwert-Ebene,
   Atkinson Hyperlegible als barrierefreier Fließtext, Monarch-Orange als einziger Akzent.
   ========================================================================== */

:root {
    --paper: #F2F0EA;
    --paper-deep: #E9E6DE;
    --ink: #101A2E;
    --steel: #5F87A8;
    --steel-text: #3F6786;
    --monarch: #D8782C;
    --graphite: #5C6674;
    --night: #0B1220;

    --bg: var(--paper);
    --bg-alt: var(--paper-deep);
    --fg: var(--ink);
    --fg-muted: var(--graphite);
    --line: rgba(16, 26, 46, 0.14);
    --accent: var(--monarch);
    --accent-fg: var(--night);
    --stage-bg: var(--night);
    --stage-fg: var(--paper);
    --stage-muted: #8FB0CC;
    --focus: var(--monarch);

    --font-display: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
    --font-body: "Atkinson Hyperlegible", "Segoe UI", Helvetica, Arial, sans-serif;
    --font-mono: "IBM Plex Mono", Consolas, "Courier New", monospace;

    --header-h: 72px;
    --shadow: 0 24px 48px rgba(16, 26, 46, 0.18);

    --fs-hero: clamp(3.4rem, 9vw, 8rem);
    --fs-section: clamp(2.6rem, 6vw, 5.5rem);
    --fs-post-title: clamp(1.75rem, 3vw, 2.75rem);
    --ratio-portrait: 5 / 6;
}

/* Papierkorn über allem, sehr zurückhaltend */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.06 0 0 0 0 0.1 0 0 0 0 0.18 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Inhalte über das Papierkorn heben. Fest stehende Elemente dürfen hier keine
   Position bekommen, sonst verlieren sie ihr position: fixed aus base.css:
   die Kopfzeile wurde mitgescrollt, der Pfeil nach oben tauchte nie auf. */
main, .site-footer { position: relative; z-index: 1; }
.site-header { z-index: 100; }
.mini-player { z-index: 90; }
.scroll-top { z-index: 80; }

/* Typografie-Grundlagen */
a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: text-decoration-thickness 150ms, color 150ms; }
a:hover { text-decoration-thickness: 2px; }

.label, .section__label, .hero__roles, .site-nav__link, .lang-switch__btn, .button, .site-footer__inner {
    font-family: var(--font-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.8125rem;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
    background: transparent;
    transition: background-color 300ms var(--ease), box-shadow 300ms var(--ease);
}
.site-header.is-scrolled,
.site-header.is-open {
    background: rgba(242, 240, 234, 0.92);
    backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 var(--line);
}
.site-header__name {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.site-nav {
    background: rgba(242, 240, 234, 0.97);
    box-shadow: 0 24px 40px rgba(16, 26, 46, 0.12);
}
.site-nav__link { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.site-nav__link:hover { color: var(--monarch); }
.site-nav__link.is-active { color: var(--steel-text); }

.site-header__social { color: var(--ink); }
.site-header__social:hover { color: var(--monarch); }

.lang-switch { border: 1px solid var(--ink); border-radius: var(--radius-pill); overflow: hidden; }
.lang-switch__btn { min-height: 36px; color: var(--ink); }
.lang-switch__btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

@media (min-width: 900px) {
    .site-nav { background: transparent; box-shadow: none; }
    .site-nav__link { border-bottom: 0; }
    .site-nav__link.is-active { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.35em; text-decoration-color: var(--monarch); }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero__roles { color: var(--steel-text); }

.hero__title {
    line-height: 0.96;
    letter-spacing: -0.015em;
    font-weight: 600;
    font-variation-settings: "opsz" 60;
}
/* Kein Kursiv im Namen: die Schreibschrift-Anmutung war schwer zu lesen */
.hero__title em { font-style: normal; }

.hero__intro { line-height: 1.55; }

.button--primary {
    border: 1.5px solid var(--ink);
    border-radius: var(--radius-pill);
    color: var(--ink);
    text-decoration: none;
}
.button--primary:hover { background: var(--ink); color: var(--paper); }
.button--link { color: var(--steel-text); text-decoration: none; border-bottom: 1px solid var(--steel-text); min-height: 32px; }
.button--link:hover { color: var(--monarch); border-color: var(--monarch); }

.brush { color: var(--ink); }
.brush--hero { margin-top: 12px; width: 200px; }
.brush--hero .brush__thin { stroke: var(--steel); }

.hero__portrait { max-width: 400px; }
.hero__portrait::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--ink);
    opacity: 0.08;
    transform: rotate(-2deg);
    border-radius: var(--radius);
}
.hero__portrait img {
    position: relative;
    transform: rotate(1.5deg);
    box-shadow: 0 30px 60px rgba(16, 26, 46, 0.22);
}
.hero__caption { font-family: var(--font-mono); letter-spacing: 0.06em; font-size: 0.75rem; }

.hero__watermark {
    right: -8%; top: 8%;
    width: min(60vw, 720px);
    opacity: 0.06;
}

@media (min-width: 900px) {
    .hero__portrait { justify-self: end; margin-right: 40px; }
}

/* --------------------------------------------------------------------------
   Sektionen als Kapitel
   -------------------------------------------------------------------------- */

.section__label { color: var(--steel-text); }
.section__title {
    line-height: 0.95;
    letter-spacing: -0.02em;
}
.section__intro { font-size: 1.1875rem; }

.section--art { background: linear-gradient(180deg, var(--paper) 0%, var(--paper-deep) 100%); }

/* Physik: Millimeterpapier */
.section--physics {
    background-color: var(--paper);
    background-image:
        linear-gradient(rgba(95, 135, 168, 0.16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(95, 135, 168, 0.16) 1px, transparent 1px),
        linear-gradient(rgba(95, 135, 168, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(95, 135, 168, 0.08) 1px, transparent 1px);
    background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
}

/* Musik und Film: dunkle Bühne, alle Token umgeschaltet */
.section--music,
.section--film {
    --bg: var(--night);
    --fg: var(--paper);
    --fg-muted: #A9B4C4;
    --line: rgba(242, 240, 234, 0.16);
    --steel-text: #8FB0CC;
    --shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
    background: var(--night);
    color: var(--paper);
}
.section--film { background: #070C16; }
.section--music .section__label,
.section--film .section__label { color: var(--stage-muted); }
.section--music .brush, .section--film .brush { color: var(--paper); }

/* --------------------------------------------------------------------------
   Beiträge
   -------------------------------------------------------------------------- */

.post__media img { box-shadow: var(--shadow); }
.post__title { line-height: 1.05; }
.post__text { line-height: 1.65; }
.post__text a { color: var(--steel-text); }
.post__text a:hover { color: var(--monarch); }

/* Beitrag ohne Bild: schlicht und klein, mit zurückhaltender Randnotiz-Markierung */
.post--text .post__body {
    padding-left: 20px;
    border-left: 1px solid var(--line);
}
.post--text .post__text { font-size: 1rem; line-height: 1.7; max-width: var(--measure); }
.post--text .post__title { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel-text); }

/* Film: Zeitungsausschnitte */
.section--film .post__media img { transform: rotate(-1.2deg); border: 10px solid #F5F1E6; border-radius: var(--radius-none); }
.section--film .post__media img { --media-border: 10px solid #F5F1E6; }
.section--film .post:nth-child(even) .post__media img { transform: rotate(1deg); }

/* --------------------------------------------------------------------------
   Player als Bühne
   -------------------------------------------------------------------------- */

.player {
    padding: clamp(20px, 4vw, 48px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(160deg, rgba(242, 240, 234, 0.05), rgba(242, 240, 234, 0.01));
}
.player__cover img {
    box-shadow: -30px 40px 70px rgba(0, 0, 0, 0.6);
}
@media (min-width: 900px) {
    .player__cover img { transform: perspective(900px) rotateY(8deg); }
}
.player__artist { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stage-muted); }
.player__title { font-size: clamp(2.2rem, 4vw, 3.25rem); line-height: 1; }
.player__credits { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--stage-muted); }

.player__btn { border: 1px solid rgba(242, 240, 234, 0.3); color: var(--paper); }
.player__btn:hover { background: rgba(242, 240, 234, 0.1); }
.player__btn--play { border: 0; background: var(--monarch); color: var(--night); box-shadow: 0 0 0 8px rgba(216, 120, 44, 0.15); }
.player__btn--play:hover { transform: scale(1.04); background: #E8934E; }
.player__btn--mute { border: 0; width: 36px; height: 36px; }
.player__time { color: var(--stage-muted); }
.player__track-btn { color: var(--paper); }
.player__track-btn:hover { background: rgba(242, 240, 234, 0.06); }

/* --------------------------------------------------------------------------
   Footer und Kleinkram
   -------------------------------------------------------------------------- */

.site-footer { border-top: 1px solid var(--line); color: var(--graphite); }
.site-footer__inner { text-transform: none; letter-spacing: 0.04em; font-size: 0.8125rem; }
.brush--footer { width: 120px; color: var(--ink); }
.site-footer a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.site-footer a:hover { border-color: var(--monarch); color: var(--monarch); }

.scroll-top { background: var(--ink); color: var(--paper); box-shadow: 0 10px 30px rgba(16, 26, 46, 0.25); }
.scroll-top:hover { background: var(--monarch); color: var(--night); }

.video-facade__btn { font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.8125rem; border-radius: var(--radius-pill); }

/* Ladesequenz im Hero */
@media (prefers-reduced-motion: no-preference) {
    .hero__roles, .hero__title, .hero__intro, .hero__actions, .brush--hero, .hero__portrait {
        animation: hero-in 900ms var(--ease) both;
    }
    .hero__title { animation-delay: 80ms; }
    .hero__intro { animation-delay: 180ms; }
    .hero__actions { animation-delay: 260ms; }
    .brush--hero { animation-delay: 340ms; }
    .hero__portrait { animation-delay: 200ms; }
    .brush__main { stroke-dasharray: 260; stroke-dashoffset: 260; animation: brush-draw 1200ms var(--ease) 500ms forwards; }
    .brush__thin { stroke-dasharray: 140; stroke-dashoffset: 140; animation: brush-draw 900ms var(--ease) 800ms forwards; }
}
@keyframes hero-in {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}
@keyframes brush-draw { to { stroke-dashoffset: 0; } }

/* Unterseiten */
.page-legal .site-header { background: rgba(242, 240, 234, 0.92); box-shadow: 0 1px 0 var(--line); }
.legal__section a { color: var(--steel-text); }
.legal__section a:hover { color: var(--monarch); }

.player__spotify { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: #1DB954; border-bottom: 1px solid rgba(29, 185, 84, 0.4); }
.player__spotify:hover { color: #F2F0EA; border-color: #F2F0EA; }
.spotify__artist { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; }
.spotify__artist a { color: var(--stage-muted); text-decoration: none; border-bottom: 1px solid var(--line); }