/* Blog livformusic.com (PLAN_news_v13 P2): Tokens, Schriften, Kopf, Fuss, Fokusring und Ton-Knopf von livforit.ch
   (src/css/site.css Z. 1–24, 205–225, 323–330, nur gelesen). Der Build hängt die Seitenverhältnis-Klassen .ar-* an. */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/blog/fonts/DMSans-var.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url(/blog/fonts/Montserrat-800.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root {
  --bg: #0A0A0A; --surface: #121212; --text: #E8E8E3; --muted: #9A9A94;
  --green: #6DBF4B; --gold: #D4A93A; --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --deep: #2A4F30; --line: #2A2A2A;
}
*, *::before, *::after { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.55 'DM Sans', sans-serif; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: var(--green); }
a:hover { color: #8FD46E; }
h1, h2, h3 { font-family: 'Montserrat', sans-serif; font-weight: 800; color: var(--green); margin: 0; line-height: 1.02; letter-spacing: -0.015em; }
p { margin: 0; }
.wrap { max-width: 1180px; margin: 0 auto; padding-inline: 20px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--green); color: var(--bg); padding: 10px 14px; z-index: 9; }
.skip:focus { left: 8px; }
.skip:hover, .skip:focus { color: var(--bg); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.icon { width: 24px; height: 24px; fill: currentColor; }

/* Kopf: Logo (Rücklink livforit.ch), Social-Icons, Booking, EN/DE */
.top { max-width: 1180px; margin: 0 auto; padding: 14px 20px; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; }
.top__logo img { height: 40px; width: auto; }
.top__social { display: flex; align-items: center; gap: 4px; margin-right: auto; }
.top__social a, .foot__social a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--green); }
.top__social a:hover, .foot__social a:hover { color: #8FD46E; }
.top__links { display: flex; align-items: center; gap: 8px; }
.top__links > a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 12px; text-decoration: none; font-weight: 700; }
.lang { display: flex; gap: 4px; }
.lang a { color: var(--muted); text-decoration: none; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: .1em; display: inline-block; min-width: 44px; min-height: 44px; line-height: 40px; text-align: center; border: 2px solid transparent; border-radius: 999px; }
.lang a[aria-current] { color: var(--green); border-color: var(--green); }
.lang a:hover { color: #8FD46E; }
@media (min-width: 1100px) { .top__social { gap: 8px; } }
/* Telefon: Icons als zweite Zeile mittig, damit Logo, Booking und EN/DE in einer Zeile bleiben */
@media (max-width: 599px) { .top__social { order: 3; flex: 1 0 100%; justify-content: center; gap: 0; margin-right: 0; } .top__social a { min-width: 36px; } .top__links > a { padding-inline: 8px; } .top__links { flex-wrap: wrap; justify-content: flex-end; gap: 0 4px; } }

/* Index */
.intro { padding-block: clamp(32px, 7vw, 88px) clamp(20px, 3vw, 36px); display: flex; flex-direction: column; gap: 18px; }
.intro h1 { font-size: clamp(44px, 9vw, 96px); text-wrap: balance; overflow-wrap: anywhere; }
.intro__lead { font-size: clamp(18px, 2.2vw, 24px); max-width: 38ch; }
.leer { padding-block: 0 clamp(56px, 8vw, 120px); color: var(--muted); }

/* Medienrahmen: Breite aus dem Seitenverhältnis (--ar aus der Kopfzeile ratio:), höchstens 78 % der Fensterhöhe hoch.
   So hat ein Hochformat-Clip auf dem Desktop keine schwarzen Seitenränder; der Bildinhalt wird nie gemessen. */
.media { position: relative; aspect-ratio: var(--ar, 16 / 9); width: min(100%, calc(78vh * (var(--ar, 16 / 9)))); margin-inline: auto; background: #000; }
.media video, .media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.ton { position: absolute; right: 12px; bottom: 12px; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--text); background: rgba(10, 10, 10, .55); border: 1px solid rgba(255, 255, 255, .5); cursor: pointer; transition: transform 160ms var(--ease-out); }
.ton:active { transform: scale(.97); }
.ton--pause { right: 64px; }
.ton[aria-pressed="true"] { border-color: var(--green); color: var(--green); }

.stage { display: flex; flex-direction: column; gap: 28px; padding-block: 0 clamp(56px, 8vw, 120px); }
.stage__text { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
.stage__text h2 { font-size: clamp(32px, 5vw, 56px); text-wrap: balance; overflow-wrap: anywhere; }
.stage__text h2 a { color: inherit; text-decoration: none; }
.stage__text p { font-size: 19px; max-width: 46ch; }
@media (min-width: 900px) {
  .stage { flex-direction: row; align-items: flex-end; gap: 48px; }
  .stage .media { flex: 0 0 auto; width: min(60%, calc(78vh * (var(--ar, 16 / 9)))); margin-inline: 0; }
  .stage__text { flex: 1 1 0; }
}
time { color: var(--muted); font-size: 15px; font-variant-numeric: tabular-nums; }
.btn { display: inline-flex; align-items: center; min-height: 50px; padding: 0 26px; border-radius: 999px; font-weight: 700; text-decoration: none; transition: transform 100ms var(--ease-out); }
.btn:active { transform: scale(.97); }
.btn--green { background: var(--green); color: var(--bg); }
.btn--green:hover { background: #8FD46E; color: var(--bg); }

.more { padding-block: 0 clamp(56px, 8vw, 120px); display: flex; flex-direction: column; gap: 24px; }
.more h2 { font-size: clamp(32px, 5vw, 56px); }
.rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; align-items: center; gap: 20px; padding: 12px; min-height: 64px; background: var(--surface); text-decoration: none; color: var(--text); border-radius: 12px; transition: background 150ms var(--ease-out); }
.row:hover { background: #1a1a1a; color: var(--text); }
.row__thumb { position: relative; flex: 0 0 auto; width: clamp(64px, 18vw, 200px); aspect-ratio: var(--ar, 16 / 9); max-height: 140px; background: #000; overflow: hidden; }
.row__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.row__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.row__title { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: clamp(20px, 3vw, 30px); color: var(--green); line-height: 1.1; overflow-wrap: anywhere; }

/* Aktuell (PLAN_aktuell_v4 N1): Bild 16:9 aus PhotoCraft, daneben Titel, Datum, Ort und Knopf */
.aktuell { display: flex; flex-direction: column; gap: 20px; padding-block: 0 clamp(40px, 6vw, 80px); }
.aktuell__bild { aspect-ratio: 16 / 9; background: #000; }
.aktuell__bild img { width: 100%; height: 100%; object-fit: cover; }
.aktuell__text { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; }
.aktuell__text h2 { font-size: clamp(28px, 4.4vw, 48px); text-wrap: balance; overflow-wrap: anywhere; }
.aktuell__text h2 a { color: inherit; text-decoration: none; }
.aktuell__meta { color: var(--muted); overflow-wrap: anywhere; }
.aktuell__etikett { color: var(--muted); font-size: 15px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
@media (min-width: 900px) {
  .aktuell { flex-direction: row; align-items: center; gap: 48px; }
  .aktuell__bild { flex: 0 0 560px; }
  .aktuell__text { flex: 1 1 0; }
}

/* Presskit: Releases und Auftritte als Listen */
.press-liste { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: .45em; }
.press-liste time { font-size: inherit; }
.press-titel { font-weight: 700; }

/* Beitragsseite (Modus Read) und Rechtsseiten */
.post, .legal { padding-block: clamp(16px, 3vw, 40px) clamp(56px, 8vw, 120px); display: flex; flex-direction: column; gap: 20px; }
.post h1 { font-size: clamp(36px, 7vw, 76px); text-wrap: balance; overflow-wrap: anywhere; }
.legal h1 { font-size: clamp(30px, 6vw, 48px); hyphens: auto; overflow-wrap: break-word; }
.post__back a { text-decoration: none; font-weight: 700; display: inline-flex; min-height: 44px; align-items: center; }
.post .media { margin-inline: 0; }
.post__text, .legal__text { max-width: 66ch; display: flex; flex-direction: column; gap: 1em; font-size: 18px; line-height: 1.6; overflow-wrap: break-word; }
.post__text h2, .legal__text h2 { font-size: clamp(24px, 3vw, 32px); margin-top: .6em; }
.post__text h3, .legal__text h3 { font-size: clamp(20px, 2.4vw, 24px); margin-top: .4em; }
.post__nav { display: flex; flex-wrap: wrap; gap: 8px 32px; justify-content: space-between; margin-top: 16px; }
.post__nav a { text-decoration: none; font-weight: 700; display: inline-flex; min-height: 44px; align-items: center; overflow-wrap: anywhere; min-width: 0; }

/* Fuss wie livforit.ch: Copyright vorn grün, Icons, Rückwege zu livforit.ch (Plan Z. 140), Rechtslinks; der Flächenwechsel trennt (keine Linie) */
.foot { background: var(--surface); }
.foot__in { padding-block: 28px 40px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.foot__social { display: flex; flex-direction: row; align-items: center; gap: 4px; }
.foot__copy { color: var(--green); }
.foot__legal, .foot__links { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.foot__legal a, .foot__links a { text-decoration: none; }
/* Knopf «Cookie settings» (E10 D2): sieht aus wie die Fusslinks; consent.js öffnet das Banner über [data-consent-open] */
.foot__legal button { font: inherit; color: var(--green); background: none; border: 0; padding: 0; cursor: pointer; }
.foot__legal button:hover { color: #8FD46E; }
@media (min-width: 1100px) {
  .foot__in { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 20px 40px; }
  .foot__social { gap: 8px; margin-inline: auto; }
  .foot__legal, .foot__links { flex-direction: row; align-items: center; gap: 24px; }
}
@media (max-width: 599px) {
  .foot__in { align-items: center; }
  .foot__social { gap: 0; } .foot__social a { min-width: 36px; }
  .foot__legal, .foot__links { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px 12px; }
  .foot__copy { order: 1; align-self: center; }
}

@media (prefers-reduced-motion: reduce) { .btn, .ton, .row { transition: none; } }
::selection { background: var(--green); color: var(--bg); }

/* EPK (PLAN_epk_v1): sichtbare Platzhalter für Lücken, nur Vorschau */
.press-platzhalter { border-left: 4px solid #E0B84A; background: rgba(224, 184, 74, .12); padding: 12px 16px; margin-top: 24px; }
.press-platzhalter ul { margin: 6px 0 0; padding-left: 18px; }

/* P2 (L53d 31.10.2026): Absatzabstand in den gelieferten Bios auf /press/ */
#press-kurzbio p + p, #press-bio p + p { margin-top: 1em; }

/* Seitenverhältnisse aus ratio: (tools/build_blog.py) */