/* =============================================================
   Deep River Records - Stylesheet
   Handgeschriebenes CSS mit CSS Grid, keine Frameworks.

   1  Fonts        5  Layout        9  Formular
   2  Reset        6  Buttons      10  Footer
   3  Tokens       7  Header       11  Rechtstexte
   4  Basis        8  Sektionen    12  Motion
   ============================================================= */

/* -------------------------------------------------------------
   1  FONTS - lokal gehostet, keine Anfrage an Dritte (DSGVO)
   ------------------------------------------------------------- */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/bricolage-grotesque-latin.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: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/manrope-latin.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: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* -------------------------------------------------------------
   2  RESET
   ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, picture, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, li { overflow-wrap: break-word; }
ul[class], ol[class] { list-style: none; padding: 0; }
nav ul, nav ol { list-style: none; padding: 0; }
:target { scroll-margin-top: 6.5rem; }

/* -------------------------------------------------------------
   3  TOKENS
   Ein Akzent fuer die ganze Seite: das Markenblau aus dem Siegel
   (#0C57A6). Radien-System: Flaechen 20px, Felder 12px, Buttons
   als Pille. Dieses System gilt ueberall, ohne Ausnahme.
   ------------------------------------------------------------- */
:root {
  color-scheme: light dark;

  /* --- Farben, Hell (Standard) --- */
  --bg:          #FAFBFD;
  --surface:     #FFFFFF;
  --surface-2:   #EFF4F9;
  --ink:         #0B1A2B;
  --ink-2:       #46586E;
  --ink-3:       #5A6D86;
  --line:        #DCE4EE;
  --line-2:      #C4D1E0;
  --brand:       #0C57A6;
  --brand-hover: #073F7B;
  --brand-wash:  #E7F0F9;
  --btn-bg:      #0C57A6;
  --btn-bg-hover:#094A8F;
  --btn-ink:     #FFFFFF;
  --panel:       #0B2748;
  --panel-2:     #123458;
  --panel-ink:   #EAF2FB;
  --panel-ink-2: #A9C4E2;
  --panel-line:  rgba(233, 241, 250, 0.18);
  --danger:      #A32020;
  --danger-wash: #FCEEEE;
  --danger-line: #E9BEBE;
  --ok:          #0B6B3A;
  --shadow-sm:   0 1px 2px rgba(11, 26, 43, .05), 0 4px 12px rgba(11, 26, 43, .05);
  --shadow-md:   0 2px 6px rgba(11, 26, 43, .06), 0 18px 44px rgba(11, 26, 43, .10);
  --img-tint:    0;
  --header-bg:   rgba(250, 251, 253, 0.82);

  /* --- Typografie --- */
  --font-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg:   clamp(1.125rem, 1.02rem + 0.42vw, 1.375rem);
  --fs-xl:   clamp(1.3rem, 1.12rem + 0.75vw, 1.75rem);
  --fs-2xl:  clamp(1.7rem, 1.36rem + 1.4vw, 2.6rem);
  --fs-3xl:  clamp(1.95rem, 1.5rem + 2.1vw, 3.6rem);

  /* --- Raster & Abstaende --- */
  --maxw:      1180px;
  --gutter:    clamp(1.25rem, 4vw, 2.5rem);
  --gap:       clamp(1.5rem, 3vw, 2.5rem);
  --section-y: clamp(4.5rem, 9vw, 8.5rem);

  /* --- Radien --- */
  --r-surface: 20px;
  --r-field:   12px;
  --r-pill:    999px;

  /* --- Motion --- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dunkel gilt in zwei Faellen: automatisch nach Systemeinstellung, solange
   niemand etwas anderes gewaehlt hat, und manuell ueber data-theme="dark".
   Die Werteliste steht deshalb zweimal. CSS bietet keinen Weg, dieselbe
   Deklarationsliste an zwei Selektoren zu haengen, von denen einer in einer
   Media Query steckt. Beim Aendern also BEIDE Bloecke anfassen.
   Der erste Block greift ausserdem ohne JavaScript: dann setzt niemand
   data-theme, und die Seite folgt weiterhin der Systemeinstellung. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #070E18;
    --surface:     #0C1725;
    --surface-2:   #111F31;
    --ink:         #E9F1FA;
    --ink-2:       #A5BAD2;
    --ink-3:       #8398B1;
    --line:        #1C2C41;
    --line-2:      #2B3F59;
    --brand:       #58A6F0;
    --brand-hover: #8CC5F7;
    --brand-wash:  #0F2942;
    --btn-bg:      #1A6FC4;
    --btn-bg-hover:#2480DA;
    --btn-ink:     #FFFFFF;
    --panel:       #103054;
    --panel-2:     #16406E;
    --panel-ink:   #EAF2FB;
    --panel-ink-2: #B3CCE8;
    --panel-line:  rgba(233, 241, 250, 0.16);
    --danger:      #FFA6A6;
    --danger-wash: #2A1417;
    --danger-line: #5B2A2E;
    --ok:          #6FD79E;
    --shadow-sm:   0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md:   0 2px 8px rgba(0, 0, 0, .45), 0 22px 50px rgba(0, 0, 0, .5);
    --img-tint:    0.14;
    --header-bg:   rgba(7, 14, 24, 0.82);
  }
}
:root[data-theme="dark"] {
  --bg:          #070E18;
  --surface:     #0C1725;
  --surface-2:   #111F31;
  --ink:         #E9F1FA;
  --ink-2:       #A5BAD2;
  --ink-3:       #8398B1;
  --line:        #1C2C41;
  --line-2:      #2B3F59;
  --brand:       #58A6F0;
  --brand-hover: #8CC5F7;
  --brand-wash:  #0F2942;
  --btn-bg:      #1A6FC4;
  --btn-bg-hover:#2480DA;
  --btn-ink:     #FFFFFF;
  --panel:       #103054;
  --panel-2:     #16406E;
  --panel-ink:   #EAF2FB;
  --panel-ink-2: #B3CCE8;
  --panel-line:  rgba(233, 241, 250, 0.16);
  --danger:      #FFA6A6;
  --danger-wash: #2A1417;
  --danger-line: #5B2A2E;
  --ok:          #6FD79E;
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md:   0 2px 8px rgba(0, 0, 0, .45), 0 22px 50px rgba(0, 0, 0, .5);
  --img-tint:    0.14;
  --header-bg:   rgba(7, 14, 24, 0.82);
}

/* Formularelemente und Scrollbalken sollen dem gewaehlten Modus folgen. */
:root[data-theme="dark"]  { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

/* -------------------------------------------------------------
   4  BASIS
   ------------------------------------------------------------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  min-height: 100%;
  background-color: var(--bg);
  /* Sehr weicher Verlauf am oberen Rand: die Wasseroberflaeche der Marke. */
  background-image: radial-gradient(115% 55% at 50% -14%, var(--brand-wash) 0%, transparent 60%);
  background-repeat: no-repeat;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.65;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.022em;
  text-wrap: balance;
  hyphens: auto;
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); letter-spacing: -0.012em; line-height: 1.25; }

p { text-wrap: pretty; }

a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--brand-hover); }

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

.lead { font-size: var(--fs-lg); color: var(--ink-2); line-height: 1.58; }
.measure    { max-width: 62ch; }
.measure-sm { max-width: 46ch; }
.muted      { color: var(--ink-2); }

.eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -5rem;
  z-index: 100;
  padding: 0.7em 1.2em;
  background: var(--btn-bg);
  color: var(--btn-ink);
  border-radius: var(--r-field);
  text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip-link:focus-visible { top: 1rem; color: var(--btn-ink); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* -------------------------------------------------------------
   5  LAYOUT
   ------------------------------------------------------------- */
.wrap {
  width: min(100% - (var(--gutter) * 2), var(--maxw));
  margin-inline: auto;
}

.section       { padding-block: var(--section-y); }
.section-tight { padding-block: clamp(3rem, 6vw, 5.5rem); }
/* Abschluss einer Inhaltsseite. Dort ist das letzte Element oft eine
   einzelne Textzeile, die mit dem normalen Sektionsabstand am Footer
   klebt. Deshalb hier etwas mehr Luft nach unten. */
.section-end   { padding-bottom: calc(var(--section-y) + clamp(1.5rem, 4vw, 3.5rem)); }

.grid12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
}
@media (max-width: 899px) {
  .grid12 { grid-template-columns: minmax(0, 1fr); }
  .grid12 > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
}

.rule { height: 1px; border: 0; background: var(--line); }

/* Einheitlicher Bildrahmen mit ruhigem Hover-Zoom. */
.frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-surface);
  background: var(--surface-2);
  isolation: isolate;
}
/* Absolut gefüllt statt height:100%. Zwischen Figur und Bild steht ein
   <picture>-Element ohne eigene Höhe, an dem sich height:100% nicht
   auflösen kann. Das Bild behielt dadurch sein Eigenformat, object-fit
   und object-position blieben wirkungslos, und wo Figur- und Bildformat
   nicht zufällig übereinstimmten, blieb unter dem Bild eine leere
   Fläche stehen. inset:0 gegen die positionierte Figur löst das. */
.frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease);
}
/* Im Dunkelmodus die Fotos minimal abdunkeln, damit sie nicht ausbrennen. */
.frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #0B2748;
  opacity: var(--img-tint);
  pointer-events: none;
}
a:hover .frame img,
.frame:hover img { transform: scale(1.035); }

/* Quellennachweis: hochkant an der rechten Bildkante, unten buendig.
   Bewusst ohne abdunkelnden Verlauf. Stattdessen traegt ein mehrlagiger
   Schatten als enger Halo die Schrift. Hinweis fuer spaetere Aenderungen:
   ueber den hellsten Bildstellen (weisse Mauer, grauer Vorhang) liegt
   reines Weiss damit rechnerisch bei 2,3 bis 2,8:1 und damit unter
   WCAG AA. Fuer einen Bildnachweis ist das bewusst so entschieden; bei
   Fliesstext waere es das nicht. */
.credit {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  padding: 0.85rem 0.7rem;
  writing-mode: vertical-rl;
  font-family: var(--font-display);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1;
  color: #FFFFFF;
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.95),
    0 1px 3px rgba(0, 0, 0, 0.85),
    0 0 9px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
@media (max-width: 599px) {
  .credit { font-size: 0.5625rem; padding: 0.7rem 0.55rem; }
}
@media (prefers-reduced-motion: reduce) {
  .frame img { transition: none; }
  a:hover .frame img, .frame:hover img { transform: none; }
}

/* -------------------------------------------------------------
   6  BUTTONS
   Pillenform als dokumentierte Ausnahme im Radien-System.
   ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.82em 1.6em;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease),
              color 0.25s var(--ease), transform 0.15s var(--ease),
              box-shadow 0.25s var(--ease);
}
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:active { transform: none; }
}

.btn-primary {
  background: var(--btn-bg);
  color: var(--btn-ink);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--btn-bg-hover); color: var(--btn-ink); }

.btn-ghost {
  background: transparent;
  border-color: var(--line-2);
  color: var(--ink);
}
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-wash); }

/* Auf dem tiefblauen Panel invertiert: weisse Flaeche, dunkle Schrift. */
.btn-on-panel {
  background: #FFFFFF;
  color: #0B2748;
}
.btn-on-panel:hover { background: #DCE9F7; color: #0B2748; }

.btn-block { width: 100%; justify-content: center; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
}

/* Textlink mit Pfeil, fuer sekundaere Wege */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-decoration: none;
}
.link-arrow svg { width: 1.1em; height: 1.1em; transition: transform 0.3s var(--ease); }
.link-arrow:hover svg { transform: translateX(3px); }
.link-arrow::after {
  content: "";
  position: absolute;
}
@media (prefers-reduced-motion: reduce) { .link-arrow:hover svg { transform: none; } }

/* -------------------------------------------------------------
   7  HEADER / NAVIGATION
   Eine Zeile auf dem Desktop, Hoehe 68px.
   ------------------------------------------------------------- */
.header-sentinel { position: absolute; top: 0; height: 1px; width: 1px; }

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease),
              backdrop-filter 0.3s var(--ease);
}
.header.is-stuck {
  background: var(--header-bg);
  border-bottom-color: var(--line);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
}
@media (prefers-reduced-transparency: reduce) {
  .header.is-stuck { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--ink);
  flex: none;
}
.brand img { width: 42px; height: 42px; }
.brand__name {
  display: grid;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.12;
  letter-spacing: -0.015em;
}
.brand__name span:last-child {
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.9rem); }
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.9rem);
  margin: 0;
  list-style: none;
  padding: 0;
}
.nav__list a {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  padding-block: 0.35rem;
  transition: color 0.2s var(--ease);
}
.nav__list a:hover,
.nav__list a[aria-current="page"] { color: var(--ink); }

/* Aktionen rechts im Kopf. Sie stehen ausserhalb der Navigation, damit
   der Umschalter auch mobil sichtbar bleibt, wenn das Menue zugeklappt ist. */
.header__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-field);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease),
              background-color 0.2s var(--ease);
}
.icon-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-wash);
}
.icon-btn svg { width: 20px; height: 20px; }

/* Ohne JavaScript haette der Umschalter keine Funktion, also bleibt er weg.
   Die Seite folgt dann weiterhin der Systemeinstellung. */
.theme-toggle { display: none; }
.js .theme-toggle { display: inline-flex; }
/* JavaScript setzt data-theme immer ausdruecklich, deshalb genuegt das
   Attribut, um das passende Symbol zu zeigen: Mond heisst "wird dunkel",
   Sonne heisst "wird hell". */
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

.nav__toggle { display: none; }
.nav__toggle .icon-close { display: none; }
.nav__toggle[aria-expanded="true"] .icon-close { display: block; }
.nav__toggle[aria-expanded="true"] .icon-open  { display: none; }

@media (max-width: 899px) {
  .nav__toggle { display: inline-flex; }
  .nav {
    position: absolute;
    inset: 100% 0 auto;
    display: grid;
    gap: 0.25rem;
    padding: 1rem var(--gutter) 1.6rem;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
  }
  .nav[hidden] { display: none; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list a {
    display: block;
    padding: 0.85rem 0;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--line);
  }
  .nav .btn { margin-top: 1rem; justify-content: center; }
}

/* -------------------------------------------------------------
   8  SEKTIONEN
   ------------------------------------------------------------- */

/* --- 8.1 Hero: Textblock, darunter ein Bildband ueber die volle Breite --- */
.hero { padding-top: clamp(2.5rem, 6vw, 5.5rem); }

.hero__copy { padding-bottom: clamp(2.5rem, 5vw, 4rem); }

/* Ab 900px sitzt das Siegel in der freien Flaeche rechts neben dem Text.
   Das Grid liegt bewusst auf .hero__copy und nicht auf dem Textblock
   selbst, sonst wuerden Eyebrow, Headline, Lead und Buttons zu eigenen
   Rasterzeilen und ihre Abstaende waeren dahin. */
@media (min-width: 900px) {
  .hero__copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
  }
}
.hero__mark {
  width: clamp(150px, 17vw, 232px);
  height: auto;
  justify-self: end;
}
@media (max-width: 899px) {
  /* Im Kopfbereich steht das Logo bereits, hier waere es nur Dopplung. */
  .hero__mark { display: none; }
}
.hero h1 {
  /* Eigene Groesse: der Textblock hat hier die volle Spaltenbreite. */
  font-size: clamp(2.3rem, 1.5rem + 3.1vw, 4.2rem);
  max-width: 20ch;
  margin-block: 0.9rem 1.2rem;
}
.hero .lead { max-width: 48ch; }
.hero .btn-row { margin-top: 2rem; }

/* Volle Viewport-Breite. Bewusst ohne Radius: ein randloses Band hat
   keine seitlichen Kanten, die man runden koennte. Das ist die einzige
   dokumentierte Ausnahme im Radien-System. */
.hero__band {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 2.2 / 1;
  /* Auf sehr breiten Schirmen wuerde das Seitenverhaeltnis das Band ueber
     850px hoch machen. Der Deckel schneidet stattdessen sanft zu. */
  max-height: min(72vh, 700px);
  overflow: hidden;
  background: var(--surface-2);
}
/* Gleicher Grund wie bei .frame img: absolut füllen, damit object-fit
   greift und unter dem Bild keine leere Fläche stehen bleibt. */
.hero__band img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.hero__band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #0B2748;
  opacity: var(--img-tint);
  pointer-events: none;
}
@media (max-width: 720px) {
  .hero__band { aspect-ratio: 4 / 3; }
}

/* --- 8.2 Statement: editorialer Absatz, darunter ein breites Bild --- */
.statement__copy { grid-column: 1 / 10; }
.statement h2 { margin-bottom: 1.4rem; }
.statement__band {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-radius: var(--r-surface);
  overflow: hidden;
}
.statement__band .frame { aspect-ratio: 21 / 9; }
/* Im breiten Band interessiert die untere Bildhaelfte: Hand, Griffbrett,
   Notenblatt. Deshalb den Ausschnitt nach unten verschieben. */
.statement__band .frame img { object-position: 50% 50%; }
@media (max-width: 899px) {
  .statement__band .frame { aspect-ratio: 4 / 3; }
  .statement__band .frame img { object-position: 50% 60%; }
}

.signature {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.75rem;
  margin-top: 1.8rem;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  color: var(--ink-3);
}
.signature strong { color: var(--ink); font-weight: 600; }

/* --- 8.3 Fuer Musiker: zwei gleich grosse Spalten, ohne Kaesten ---
   Bild, darunter Ueberschrift und Text. Keine Rahmen, keine Flaechen,
   keine Karten. Beide Spalten sind sechs Rasterspalten breit, beide
   Bilder haben damit exakt dieselbe Groesse. */
.audience__head { grid-column: 1 / 9; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }

.audience__item--a { grid-column: 1 / 7; }
.audience__item--b { grid-column: 7 / -1; }

.audience__item .frame { aspect-ratio: 4 / 3; margin-bottom: clamp(1.2rem, 2.5vw, 1.8rem); }
.audience__item h3 { margin-bottom: 0.6rem; }
.audience__item p  { color: var(--ink-2); max-width: 46ch; }

/* --- 8.4 Partnerband: ruhige, getoente Flaeche --- */
.partners {
  background: var(--surface-2);
  border-block: 1px solid var(--line);
}
.partners__inner { text-align: center; }
.partners p.lead { margin-inline: auto; max-width: 48ch; }

.partners__names {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: clamp(1rem, 4vw, 3.5rem);
  margin-block: clamp(1.8rem, 4vw, 3rem) 1.2rem;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.1rem + 2.2vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.partners__more { font-size: var(--fs-sm); color: var(--ink-3); }

/* --- 8.5 Kontakt-Panel: das eine Vollton-Objekt der Seite --- */
.cta__panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-surface);
  padding: clamp(2.2rem, 5vw, 4.5rem);
  background: linear-gradient(148deg, var(--panel-2), var(--panel));
  color: var(--panel-ink);
  box-shadow: var(--shadow-md);
}
/* Ueberschrift und Absatz laufen ueber die volle Panelbreite, ohne
   Zeilenlaengen-Deckel. Die Ueberschrift ist deshalb groesser skaliert
   als eine normale h2, sonst bliebe rechts eine tote Flaeche stehen. */
.cta__panel h2 {
  font-size: clamp(1.8rem, 1.1rem + 3.1vw, 3.6rem);
  text-wrap: pretty;
}
.cta__panel p  { color: var(--panel-ink-2); margin-top: 1.1rem; }
.cta__panel .btn-row { margin-top: 2.2rem; }

.cta__direct {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 2.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.6rem, 3vw, 2.2rem);
  border-top: 1px solid var(--panel-line);
}
.cta__direct a {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  color: var(--panel-ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-decoration: none;
}
.cta__direct a:hover { color: #FFFFFF; text-decoration: underline; }
.cta__direct svg { width: 1.15em; height: 1.15em; color: var(--panel-ink-2); flex: none; }

/* -------------------------------------------------------------
   9  FORMULAR (Kontaktseite)
   ------------------------------------------------------------- */
.page-head { padding-block: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 3vw, 2.5rem); }
.page-head h1 { margin-top: 0.9rem; }
.page-head p  { margin-top: 1.1rem; }

.contact__form  { grid-column: 1 / 8; }
.contact__aside { grid-column: 9 / -1; }

.form {
  display: grid;
  gap: 1.15rem;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  box-shadow: var(--shadow-sm);
}
.form__row {
  display: grid;
  gap: 1.15rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 599px) { .form__row { grid-template-columns: minmax(0, 1fr); } }

/* align-content: start verhindert, dass ein Feld ohne Hinweistext
   sein Eingabefeld auf die Hoehe des Nachbarfeldes streckt. */
.field { display: grid; gap: 0.45rem; align-content: start; }
.field > label,
.fieldset > legend {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--ink);
}
.field .hint { font-size: var(--fs-xs); color: var(--ink-3); }
.req { color: var(--brand); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.78em 0.95em;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--r-field);
  color: var(--ink);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease),
              background-color 0.2s var(--ease);
}
.field textarea { min-height: 9.5rem; resize: vertical; line-height: 1.6; }
.field select { appearance: none; padding-right: 2.6rem; cursor: pointer;
  /* Pfeil als CSS-Dreieck, damit kein zusaetzlicher Request noetig ist. */
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 1.15rem top 55%, right 0.85rem top 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-3); opacity: 1; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--brand-wash);
}
.field :is(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-wash);
}

.check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.55;
}
.check input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.22rem;
  accent-color: var(--brand);
  cursor: pointer;
}
.check a { font-weight: 600; }

/* Honeypot: im DOM vorhanden, fuer Menschen und Screenreader entfernt. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__note { font-size: var(--fs-xs); color: var(--ink-3); }

/* Rueckmeldungen: inline, nicht als Toast. */
.form__msg {
  display: flex;
  gap: 0.7rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--r-field);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.form__msg[hidden] { display: none; }
.form__msg svg { width: 1.25rem; height: 1.25rem; flex: none; margin-top: 0.15rem; }
.form__msg--error {
  background: var(--danger-wash);
  border: 1px solid var(--danger-line);
  color: var(--danger);
}

.form.is-sending button[type="submit"] { pointer-events: none; opacity: 0.75; }
.form .spinner { display: none; width: 1.1em; height: 1.1em; flex: none;
  border: 2px solid rgba(255, 255, 255, .4); border-top-color: #FFFFFF;
  border-radius: 50%; animation: spin 0.7s linear infinite; }
.form.is-sending .spinner { display: block; }
.form.is-sending .btn-icon { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .form .spinner { animation-duration: 1.6s; } }

.form__success {
  display: grid;
  justify-items: start;
  gap: 0.9rem;
  padding: clamp(1.8rem, 3vw, 2.6rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  box-shadow: var(--shadow-sm);
}
.form__success[hidden] { display: none; }
.form__success svg { width: 2.6rem; height: 2.6rem; color: var(--ok); }
.form__success p { color: var(--ink-2); }

/* Kontaktdaten neben dem Formular */
.contact-card {
  display: grid;
  gap: 1.4rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--surface-2);
  border-radius: var(--r-surface);
}
.contact-card dl { display: grid; gap: 1.2rem; margin: 0; }
.contact-card dt {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.25rem;
}
.contact-card dd { margin: 0; }
.contact-card dd a {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 600;
  text-decoration: none;
}
.contact-card dd a:hover { text-decoration: underline; }
.contact-card svg { width: 1.1em; height: 1.1em; flex: none; }
.contact-card address { font-style: normal; color: var(--ink-2); }

/* -------------------------------------------------------------
   10  FOOTER
   ------------------------------------------------------------- */
/* Kein margin-top: die vorangehende Sektion bringt ihren eigenen
   Innenabstand mit, sonst addieren sich zwei volle Sektionsabstaende. */
.footer {
  padding-top: clamp(3rem, 6vw, 4.5rem);
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}
.footer__grid { padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.footer__brand { grid-column: 1 / 5; }
.footer__nav   { grid-column: 6 / 9; }
.footer__legal { grid-column: 9 / -1; }

.footer__brand p { margin-top: 1rem; color: var(--ink-2); font-size: var(--fs-sm); }
.footer__brand address { font-style: normal; }

.footer h2 {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 1rem;
}
.footer ul { display: grid; gap: 0.6rem; list-style: none; padding: 0; }
.footer ul li { min-width: 0; }
.footer ul a {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  text-decoration: none;
  overflow-wrap: break-word;
  hyphens: auto;
}
.footer ul a:hover { color: var(--brand); text-decoration: underline; }

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-block: 1.4rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--ink-3);
}
.footer__bar a { color: var(--ink-3); text-decoration: none; }
.footer__bar a:hover { color: var(--brand); text-decoration: underline; }

@media (max-width: 899px) {
  .footer__grid { gap: 2.25rem; }
}

/* -------------------------------------------------------------
   11  RECHTSTEXTE  (Impressum, Datenschutz)
   ------------------------------------------------------------- */
.prose { grid-column: 1 / 9; }
.prose > * + * { margin-top: 1.1rem; }
.prose h2 {
  font-size: var(--fs-xl);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.prose h3 { font-size: var(--fs-lg); margin-top: 2rem; }
.prose p, .prose li { color: var(--ink-2); }
.prose ul { padding-left: 1.2rem; display: grid; gap: 0.4rem; }
.prose li::marker { color: var(--ink-3); }
.prose address { font-style: normal; }
.prose strong { color: var(--ink); }

.toc { grid-column: 10 / -1; }
.toc-inner {
  position: sticky;
  top: 6.5rem;
  padding: 1.4rem;
  background: var(--surface-2);
  border-radius: var(--r-surface);
}
.toc h2 {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.9rem;
}
.toc ul { display: grid; gap: 0.55rem; list-style: none; padding: 0; }
/* min-width: 0 ist noetig, weil Grid-Elemente sonst auf ihrer
   min-content-Breite bestehen und lange Komposita wie
   "Verbraucherstreitbeilegung" aus dem Kasten laufen. */
.toc li { min-width: 0; }
.toc a {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  text-decoration: none;
  overflow-wrap: break-word;
  hyphens: auto;
}
.toc a:hover { color: var(--brand); text-decoration: underline; }
@media (max-width: 899px) { .toc { display: none; } }

/* -------------------------------------------------------------
   12  MOTION
   Nur Einblendungen beim Scrollen (Reihenfolge/Hierarchie) und
   Zustandswechsel. Alles per prefers-reduced-motion abschaltbar.
   ------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}