/* Subbeat — style.css v0.260813.2
   13.08.2026 (Kundenabnahme, 2. Punkt): echtes Kontaktformular im Kontakt-Abschnitt — Felder
   als dunkle Flaechen mit sichtbarer Kante (WCAG 1.4.11: --linie-stark), Versal-Beschriftungen
   in der Anzeige-Schrift, Honeypot unsichtbar, Statusbox mit rotem Akzentbalken.
   13.08.2026 (Kundenabnahme): News-Karte bekommt einen roten Rahmen statt der grauen Kante.
   Ueberarbeitung 31.07.2026 (Interaktions-Schicht): eigene Bewegungs-Kurven statt der zu weichen
   CSS-Standardwerte, Druck-Feedback auf allen klickbaren Flaechen, Hover nur auf echten
   Zeigegeraeten, Lightbox mit Ein-/Austritt statt hartem Schnitt, reduzierte Bewegung sanfter
   statt komplett abgeschaltet.
   31.07.2026 (Rot-System, Wunsch der Band): ein wiederkehrender roter Balken oeffnet jeden
   Abschnitt und schliesst den Fuss, das Termin-Datum sitzt in einem roten Ticket-Feld,
   Galerie/Partner/Zweitknopf bekommen rote Zeige-Zustaende.
   Vorher: v0.260801.1, v0.260724.1
   Design-Lesart: Onepager einer Live-Band fuer Konzertpublikum, dunkle "Konzertplakat"-Sprache,
   eigenstaendige Optik (nicht Kodran-Nachtgruen/Mint) — Flaechen statt Bubbles, grosse gesperrte
   Versalien, Gitarren-Rot als einziger Akzent. Dials: Variance 7 / Motion 4 / Density 4.
   Schriften: Geist (variabel) selbst gehostet, keine Google-Fonts-Einbindung, keine CDNs. */

/* ── Schriften (self-hosted) ─────────────────────────────────────────────── */
@font-face { font-family: 'Geist'; src: url('fonts/geist-var-latin.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: 'Geist'; src: url('fonts/geist-var-latin-ext.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist Mono'; src: url('fonts/geist-mono-var-latin.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: 'Geist Mono'; src: url('fonts/geist-mono-var-latin-ext.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Archivo (SIL OFL, variabel 400-900) traegt die Ueberschriften. Geist ist ein neutraler
   Tech-Grotesk -- als Plakatstimme fuer eine Band zu charakterlos, und durch ihre Verbreitung
   in generierten Oberflaechen inzwischen ein Allerweltsgesicht. Archivo stammt aus der
   Plakat-/Schilder-Tradition: kraeftigere Vertikalen, engere Punzen, traegt schwere Schnitte
   in Versalien ohne zu verlaufen. Fliesstext bleibt Geist -- dort ist Neutralitaet richtig.
   Lokal gehostet wie alles andere, keine externe Anfrage (PLAN.md §6). */
@font-face { font-family: 'Archivo'; src: url('fonts/archivo-var-latin.woff2') format('woff2'); font-weight: 400 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: 'Archivo'; src: url('fonts/archivo-var-latin-ext.woff2') format('woff2'); font-weight: 400 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ── Tokens: eine dunkle Buehne, ein Akzent, ein Formen-System (radius 0 durchgaengig) ───── */
:root {
  --bg: #121212; --flaeche: #1B1B1C; --flaeche-2: #202021; --flaeche-3: #19191A;
  --text: #F4F1EA; --gedaempft: #AFA9A0;
  /* --gedaempft-2 war #7C766E und lag als Textfarbe bei 3,6-4,2:1, also unter dem lesbaren
     Minimum von 4,5:1. Angehoben auf 4,53:1 gegen die hellste Flaeche, auf der sie vorkommt. */
  --gedaempft-2: #8D867D;
  /* Zwei Rot-Werte, weil ein Rot nicht beides kann: --rot ist die Fuellfarbe (Weiss darauf
     5,7:1, bestanden), taugt als Textfarbe auf Dunkel aber nur zu 2,8-3,3:1. --rot-text ist
     dasselbe Rot zum Off-White der Seite hin aufgehellt (nicht in RGB hochskaliert -- das
     kippt ins Neonhafte) und erreicht ueberall mindestens 4,66:1. */
  --rot: #C22A2F; --rot-text: #D26A6A; --rot-dunkel: #961F23; --rot-hell: rgba(194,42,47,.14);
  /* --linie trennt Flaechen (dekorativ, darf leise sein). --linie-stark ist die sichtbare Kante
     von Bedienelementen -- dort ist der Rahmen die einzige Information ueber die Form des
     Elements und braucht 3:1 (WCAG 1.4.11). #313030 lag bei 1,3:1. */
  --linie: #313030; --linie-stark: #6B6968;
  --schrift: 'Geist', system-ui, 'Segoe UI', sans-serif;
  --anzeige: 'Archivo', 'Geist', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'Cascadia Mono', monospace;
  --breite: 1180px;
  --luft: clamp(64px, 9vw, 116px);
  --gutter: clamp(20px, 5vw, 32px);
  --schatten: 0 20px 50px -24px rgba(0,0,0,.6);
  --ring: 0 0 0 3px rgba(194,42,47,.4);
  /* Bewegungs-Kurven: die CSS-Standardkurven (ease/ease-out) sind zu schwach, Bewegungen wirken
     damit unentschlossen. Zwei kraeftigere Varianten reichen fuer diese Seite:
     --aus fuer alles, was auftaucht oder verschwindet (startet schnell, antwortet sofort),
     --weich fuer das Wenige, das sich auf dem Bildschirm umformt (Burger-Balken zum Kreuz).
     Nie ease-in fuer Bedienelemente: der langsame Start trifft genau den Moment, in dem der
     Nutzer am genauesten hinsieht, und laesst die Seite traege wirken. */
  --aus: cubic-bezier(.23, 1, .32, 1);
  --weich: cubic-bezier(.77, 0, .175, 1);

  /* Design-Bruecke fuer den Editor-Kern (Fund 16.08.2026, Aranđel): reine Aliase auf die
     Tokens oben, damit editor-kern/editor.html (admin/index.html) automatisch in Subbeats
     eigenem Design erscheint statt in Overstages Blau. Namen sind der Vertrag mit dem Kern
     (s. Kommentar bei <link id="av-design-bruecke"> in admin/index.html) -- werden Werte
     oben geaendert, zieht die Bruecke automatisch mit, ohne dass admin/index.html angefasst
     werden muss.
  */
  --av-bg: var(--bg); --av-flaeche: var(--flaeche); --av-flaeche-2: var(--flaeche-2);
  --av-text: var(--text); --av-gedaempft: var(--gedaempft); --av-gedaempft-2: var(--gedaempft-2);
  --av-linie: var(--linie); --av-linie-stark: var(--linie-stark);
  /* Ergaenzt (Spec 2026-08-16): die restlichen sieben Vertrags-Variablen, die
     grundstil.css fuer die 19 neutralen Bausteine braucht. */
  --av-akzent: var(--rot); --av-auf-akzent: #fff;
  --av-schrift: var(--schrift); --av-anzeige: var(--anzeige);
  --av-breite: var(--breite); --av-radius: 0;
  --av-fehler: var(--rot-dunkel);
}

/* ── Basis ───────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; }
/* Kein scrollbar-gutter: eine dauerhaft reservierte Rinne verbreitert den Bezugsrahmen fuer
   position:fixed um die Scrollleiste — die mobile .nav-Flaeche (inset: 68px 0 0 0) wurde dadurch
   messbar breiter als der Inhaltsbereich und die Seite meldete einen Ueberlauf. Den Ruck beim
   Sperren des Hintergrund-Scrollens gleicht stattdessen site.js mit exakt der gemessenen
   Scrollleisten-Breite aus (sb_scrollSperren). */
html { scroll-behavior: smooth; }
body { font-family: var(--schrift); color: var(--text); background: var(--bg); line-height: 1.65; font-size: 17px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-wrap: break-word; overflow-x: hidden; }
img, svg { max-width: 100%; display: block; }
::selection { background: rgba(194,42,47,.38); color: #fff; }
section[id], [id] { scroll-margin-top: 92px; }

h1, h2, h3 { font-family: var(--anzeige); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; overflow-wrap: break-word; hyphens: auto; }
h1 { font-size: clamp(2.4rem, 1.1rem + 4.6vw, 4.2rem); line-height: 1.02; letter-spacing: -.005em; max-width: 15ch; }
h2 { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.7rem); line-height: 1.06; margin-bottom: .5em; letter-spacing: 0; }
h3 { font-size: 1.05rem; line-height: 1.3; letter-spacing: .01em; text-transform: none; font-weight: 640; margin-bottom: .3em; }
p { margin-bottom: 1em; }
a { color: var(--text); }

.innen { max-width: var(--breite); margin: 0 auto; padding: 0 var(--gutter); }
/* Nur das Textmass wird begrenzt, nicht der Behaelter: sonst zentriert sich der schmale Block
   in der Seite und seine linke Kante trifft keine der anderen Abschnittskanten mehr. */
.innen.schmal > * { max-width: 760px; }

a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--rot); outline-offset: 2px; }
.springen { position: absolute; left: -9999px; top: 12px; z-index: 60; background: var(--rot); color: #fff; padding: 10px 18px; text-decoration: none; font-weight: 700; }
.springen:focus-visible { left: 12px; }

/* ── Kopf / Navigation (max. 1 Zeile Desktop, Hoehe ≤ 80px) ──────────────── */
/* backdrop-filter direkt am .kopf wuerde einen "containing block" fuer alle position:fixed-
   Nachfahren erzeugen (u. a. die mobile .nav-Flaeche) -- dadurch positionierte sich das
   aufgeklappte Mobil-Menue nicht mehr relativ zum Bildschirm, sondern relativ zur ~68px hohen
   Kopfzeile und wurde auf einen winzigen, scrollbaren Streifen zusammengequetscht. Deshalb
   liegen Weichzeichnung/Hintergrund auf einem ::before, .kopf selbst bleibt filterfrei. */
.kopf { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--linie); }
.kopf::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.kopf-zeile { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; }
.marke { display: inline-flex; align-items: center; text-decoration: none; }
.marke-text { font-family: var(--anzeige); font-weight: 800; font-size: 1.1rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text); }
.marke-bild { height: 30px; width: auto; }
.marke-wortmarke-bild { height: 20px; width: auto; }

.burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: none; border: 1px solid var(--linie-stark); padding: 0; cursor: pointer; transition: transform .16s var(--aus), border-color .16s var(--aus); }
.burger:active { transform: scale(.94); }
/* Balken werden beim Oeffnen zum Kreuz: der mittlere blendet aus, die aeusseren wandern in die
   Mitte und kippen. Ein Symbolwechsel ohne Uebergang wirkt wie ein Bildfehler — hier zeigt die
   Bewegung, dass derselbe Knopf jetzt schliesst statt oeffnet. */
.burger span { display: block; height: 2px; width: 18px; margin: 0 auto; background: var(--text); transition: transform .22s var(--weich), opacity .14s var(--aus); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.4); }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav { display: flex; gap: 28px; align-items: center; }
.nav a:not(.knopf) { text-decoration: none; color: var(--gedaempft); font-weight: 600; font-size: .92rem; letter-spacing: .04em; text-transform: uppercase; position: relative; padding: 4px 0; transition: color .16s var(--aus); }
/* Unterstrich ueber scaleX statt ueber "right": eine Transition auf right laesst den Browser bei
   jedem Frame neu layouten, scaleX laeuft rein auf der GPU. Ursprung links, damit der Strich
   von der Wortkante aus einlaeuft und beim Verlassen dorthin zurueckzieht. */
.nav a:not(.knopf)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--rot); transform: scaleX(0); transform-origin: left center; transition: transform .2s var(--aus); }
.nav a:not(.knopf):hover::after, .nav a:not(.knopf):focus-visible::after { transform: scaleX(1); }
.nav a:not(.knopf):hover { color: var(--text); }

@media (max-width: 860px) {
  .burger { display: flex; }
  /* Die Flaeche faehrt auf und beim Schliessen bewusst schneller wieder hinaus (.2s statt .28s):
     beim Oeffnen schaut der Nutzer der Bewegung zu, beim Schliessen hat er bereits entschieden
     und will nur noch die Seite sehen. Langsam wo entschieden wird, schnell wo geantwortet wird. */
  .nav { position: fixed; inset: 68px 0 0 0; background: var(--bg); flex-direction: column; align-items: flex-start; padding: 28px var(--gutter); gap: 22px; transform: translateY(-10px); opacity: 0; pointer-events: none; transition: opacity .2s var(--aus), transform .2s var(--aus); overflow-y: auto; }
  .nav.offen { opacity: 1; transform: translateY(0); pointer-events: auto; transition-duration: .28s; }
  .nav a:not(.knopf) { font-size: 1.1rem; }
  /* Eintraege laufen leicht versetzt nach — das Menue baut sich auf, statt als fertiger Block
     aufzuploppen. Verzoegerungen bewusst kurz (40ms Schritt), sonst fuehlt sich das Oeffnen
     langsam an. Nur beim Oeffnen gestaffelt; beim Schliessen verschwindet alles gemeinsam. */
  .nav > * { transform: translateY(-6px); opacity: 0; transition: opacity .18s var(--aus), transform .18s var(--aus); }
  .nav.offen > * { transform: translateY(0); opacity: 1; }
  .nav.offen > :nth-child(1) { transition-delay: 40ms; }
  .nav.offen > :nth-child(2) { transition-delay: 80ms; }
  .nav.offen > :nth-child(3) { transition-delay: 120ms; }
  .nav.offen > :nth-child(4) { transition-delay: 160ms; }
  .nav.offen > :nth-child(5) { transition-delay: 200ms; }
  .nav .knopf { width: 100%; justify-content: center; }
}

/* ── Knoepfe: flach, eckig, ein Formen-System ────────────────────────────── */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; font-family: var(--anzeige); background: var(--rot); color: #fff !important; padding: 12px 28px; text-decoration: none; font-weight: 700; font-size: .95rem; letter-spacing: .03em; text-transform: uppercase; border: 1.5px solid var(--rot); cursor: pointer; transition: transform .16s var(--aus), background .16s var(--aus), border-color .16s var(--aus); white-space: nowrap; }
/* Druck-Feedback: der Knopf sinkt beim Klick spuerbar ein. Das ist die einzige Rueckmeldung, die
   sofort kommt — noch bevor der Sprung/Ladevorgang beginnt — und laesst die Seite antworten
   statt nur reagieren. Gilt fuer jede druckbare Flaeche, deshalb weiter unten wiederholt. */
.knopf:active { transform: scale(.97); }
.knopf.zweit { background: transparent; color: var(--text) !important; border-color: var(--gedaempft-2); }
.knopf.klein { min-height: 42px; padding: 9px 20px; font-size: .82rem; }

/* Hover-Zustaende nur fuer echte Zeigegeraete: auf Touch loest ein Tipp den Hover mit aus und
   der Zustand bleibt anschliessend haengen — der Knopf sieht dann dauerhaft "angefasst" aus. */
@media (hover: hover) and (pointer: fine) {
  .knopf:hover { background: var(--rot-dunkel); border-color: var(--rot-dunkel); transform: translateY(-1px); }
  .knopf:active:hover { transform: scale(.97); }
  .knopf.zweit:hover { border-color: var(--rot); background: transparent; }
}

/* Der Kicker (kleines gesperrtes Label ueber der Ueberschrift, hier zusaetzlich in Monospace)
   ist ersatzlos entfallen. Er trug nie eigene Information: ueber "Termine" stand "Naechste
   Konzerte", ueber der Musik-Ueberschrift "Repertoire" -- beides sagte dasselbe wie die
   Ueberschrift darunter, nur leiser. Eine Ueberschrift traegt ihr eigenes Gewicht. */

/* ── Hero: asymmetrischer Split, Buehnenfoto nur als geblurte Textur ganz hinten ──────────── */
/* overflow: hidden ist hier zwingend, nicht kosmetisch. Der Foto-Layer (::after) liegt bewusst
   mit inset:-20px ueber den Rand hinaus, damit der weiche Saum der Weichzeichnung ausserhalb des
   sichtbaren Bereichs endet. Ohne Beschneidung ragte genau dieser Ueberstand 20px UNTER den Hero
   und malte ueber den Anfang des naechsten Abschnitts -- .hero ist positioniert, die folgenden
   Abschnitte sind es nicht, also liegt der Hero in der Malreihenfolge oben. Sichtbar wurde dort
   eine helle Querkante, weil der abdunkelnde Schleier (::before, inset:0) an der Hero-Unterkante
   endet und den Ueberstand nicht mit abdeckt: zu sehen war der ungedaempfteste Teil des Fotos. */
.hero { padding: clamp(120px, 14vw, 168px) 0 clamp(64px, 8vw, 100px); position: relative; isolation: isolate; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 82% 30%, var(--rot-hell), transparent 70%); pointer-events: none; }
/* Buehnenfoto (falls vorhanden, render.php setzt --hero-bild) liegt via z-index:-1 ganz hinten --
   nur leicht geblurt, das Motiv soll noch erkennbar bleiben (Kunden-Wunsch, vorher zu stark
   verwischt). Ein Verlauf verdunkelt zusaetzlich staerker links (wo der Fliesstext sitzt) als
   rechts (wo ohnehin das Logo-Panel mit eigenem Glow liegt), damit der Text trotz sichtbarem
   Foto lesbar bleibt. inset ueber den Rand hinaus verhindert einen hellen Blur-Saum an der Kante. */
.hero-mit-foto::after { content: ""; position: absolute; inset: -20px; z-index: -1; background-image: linear-gradient(100deg, rgba(18,18,18,.8) 0%, rgba(18,18,18,.45) 50%, rgba(18,18,18,.2) 100%), var(--hero-bild); background-size: cover; background-position: center; filter: blur(6px); opacity: .8; }
/* Zweiter, staerkerer Schleier genau unter der Textspalte. Gemessen fiel der Fliesstext ueber
   den hellen Buehnenlichtern auf 1,88:1 und die Ueberschrift auf 3,65:1 -- ueber solchen Stellen
   war der Text praktisch nicht lesbar. Der Verlauf des Fotos allein reichte nicht, weil er die
   Helligkeit nur im Mittel senkt, nicht an den hellsten Punkten.
   Bewusst ein eigener Layer und keine staerkere Abdunklung des ganzen Fotos: so bleibt das
   Motiv rechts (am Logo-Panel) so sichtbar wie vom Kunden gewuenscht, waehrend links wirklich
   gelesen werden kann. Auf schmalen Bildschirmen steht der Text oben ueber der vollen Breite --
   dort verlaeuft der Schleier deshalb von oben nach unten statt von links nach rechts. */
.hero-mit-foto::before { background-image: radial-gradient(60% 60% at 82% 30%, var(--rot-hell), transparent 70%), linear-gradient(100deg, rgba(18,18,18,.86) 0%, rgba(18,18,18,.78) 34%, rgba(18,18,18,.3) 66%, rgba(18,18,18,0) 100%); }
@media (max-width: 860px) {
  .hero-mit-foto::before { background-image: radial-gradient(60% 60% at 82% 30%, var(--rot-hell), transparent 70%), linear-gradient(180deg, rgba(18,18,18,.88) 0%, rgba(18,18,18,.84) 46%, rgba(18,18,18,.3) 78%, rgba(18,18,18,0) 100%); }
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 6vw, 72px); align-items: center; position: relative; }
/* Volle Textfarbe statt der gedaempften: der Hero-Satz ist die Hauptaussage der Seite, nicht
   Beiwerk -- und ueber einem Foto ist jeder gedaempfte Ton der erste, der unlesbar wird. */
.hero-text { font-size: clamp(1.05rem, 1vw + .85rem, 1.25rem); line-height: 1.6; color: var(--text); margin: 0 0 30px; max-width: 40rem; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin: 0; }
.hero-visual { aspect-ratio: 4/5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; position: relative; }
.hero-visual::before { content: ""; position: absolute; inset: 0; background: radial-gradient(65% 55% at 50% 45%, var(--rot-hell), transparent 72%); }
.hero-wortmarke { position: relative; font-family: var(--anzeige); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.6rem); letter-spacing: .12em; color: var(--gedaempft-2); writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); }
.hero-logo { position: relative; width: clamp(260px, 78%, 480px); height: auto; }
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } .hero-visual { aspect-ratio: 16/9; } .hero-wortmarke { writing-mode: horizontal-tb; transform: none; } }

/* ── Abschnitte ──────────────────────────────────────────────────────────── */
/* Das rote Motiv der Seite: ein kurzer, kraeftiger Balken ueber jeder Abschnitts-Ueberschrift
   und ueber der Hero-Zeile. Bewusst ein typografischer Balken und KEIN kleines Label -- ein
   Label wuerde nur wiederholen, was die Ueberschrift schon sagt; der Balken traegt keine Worte,
   sondern Rhythmus. Weil er an jedem Abschnitt an derselben Stelle sitzt, liest sich das Rot als
   System und nicht als verstreute Farbtupfer -- genau das ist der Unterschied zwischen "mehr
   Rot" und "wertiger". Absichtlich ohne Einblendung: man sieht ihn bei jedem Scrollen, und was
   man staendig sieht, darf sich nicht jedes Mal bewegen. */
/* :not(.rechtsseite) ist noetig, nicht kosmetisch: Impressum und Datenschutz liegen in derselben
   .abschnitt > .innen-Struktur, ihre h2 sind aber Zwischenueberschriften eines Fliesstextes und
   keine Abschnitts-Eroeffnungen. Ohne den Ausschluss bekam dort jede der sechs Zwischen-
   ueberschriften einen roten Balken -- das Motiv verlor seine Bedeutung und die Rechtsseite sah
   aus wie eine Marketingseite. */
.abschnitt > .innen:not(.rechtsseite) > h2::before,
.abschnitt > .innen:not(.rechtsseite) > * > h2::before,
.hero-inhalt > h1::before {
  content: ""; display: block; width: 56px; height: 3px; background: var(--rot);
  margin-bottom: clamp(18px, 2vw, 26px);
}
.abschnitt { padding: var(--luft) 0 0; }

.abschnitt-kopf { max-width: 680px; }
.abschnitt-text p:last-child, .abschnitt-kopf p:last-child { margin-bottom: 0; }

/* ── News ────────────────────────────────────────────────────────────────── */
.news-liste { display: grid; gap: 20px; }
/* Roter Rahmen statt der leisen grauen Kante -- Wunsch der Band aus der Abnahme am 13.08.2026.
   2px, nicht 1px: ueber die volle Kartenbreite von rund 1100px verliert sich eine Haarlinie, der
   Rahmen soll aber als Rahmen lesen. Zwischenwerte helfen nicht -- 1,5px rundet der Browser bei
   einfacher Pixeldichte auf 1px ab (nachgemessen, getComputedStyle meldet dann 1px). Der Rahmen
   ist Dekoration und kein Bedienelement, die 3:1-Regel aus WCAG 1.4.11 greift hier also nicht. */
.news-karte { background: var(--flaeche); border: 2px solid var(--rot); padding: clamp(24px, 3vw, 36px); }
.news-datum { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--rot-text); margin-bottom: 10px; }
.news-karte-grid { display: grid; gap: 10px; }
.news-karte-text { display: grid; gap: 10px; align-content: start; }
.news-text { color: var(--gedaempft); max-width: 60ch; margin-bottom: 4px; }
.news-links { display: flex; gap: 22px; flex-wrap: wrap; margin: 0; }
/* Karten mit Video: Text links, groessere Vorschau-Kachel rechts daneben statt darunter mit Leerraum */
.news-karte.hat-video .news-karte-grid { grid-template-columns: minmax(0, 1fr) minmax(320px, 480px); gap: clamp(24px, 4vw, 40px); align-items: center; }
@media (max-width: 860px) { .news-karte.hat-video .news-karte-grid { grid-template-columns: 1fr; } }

/* ── Video-Fassade: Zwei-Klick-Loesung, laedt YouTube erst nach aktivem Klick ────────────── */
.yt-fassade { position: relative; aspect-ratio: 16/9; width: 100%; background: var(--flaeche-2); border: 1px solid var(--linie); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; }
.yt-knopf { display: inline-flex; align-items: center; gap: 10px; background: var(--rot); color: #fff; border: none; padding: 12px 22px; font-weight: 700; font-size: .9rem; letter-spacing: .03em; text-transform: uppercase; cursor: pointer; transition: background .16s var(--aus), transform .16s var(--aus); white-space: nowrap; }
.yt-knopf:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .yt-knopf:hover { background: var(--rot-dunkel); } }
.yt-knopf .ic { color: #fff; }
.yt-hinweis { position: relative; font-size: .72rem; line-height: 1.5; color: var(--gedaempft-2); text-align: center; max-width: 30ch; margin: 0; }
.yt-hinweis a { color: var(--gedaempft); }
/* Der Player blendet auf, statt hart in die Kachel zu springen: YouTube liefert im ersten Frame
   eine helle Flaeche, die auf dem dunklen Untergrund als Blitz auffaellt. */
.yt-fassade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; opacity: 0; transition: opacity .22s var(--aus); }
.yt-fassade iframe.da { opacity: 1; }
.link-pfeil { color: var(--text); text-decoration: none; font-weight: 700; font-size: .92rem; border-bottom: 2px solid var(--rot); padding-bottom: 2px; transition: color .16s var(--aus); }
@media (hover: hover) and (pointer: fine) { .link-pfeil:hover { color: var(--rot-text); } }

/* ── Ueber uns: Bandraster (6 Zellen: 5 Musiker + Silas/Live-Technik, 3x2 gleichmaessig) ──── */
/* margin-bottom: .abschnitt hat nur oben Innenabstand (das naechste Modul bringt seinen eigenen
   Abstand mit) -- bei einem direkt angrenzenden Modul MIT eigenem Rand/Hintergrund (musik-banner)
   sass die Randlinie sonst ohne jede Luft direkt unter den Bandkarten. */
.band-raster { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin: 40px 0 clamp(32px, 5vw, 56px); }
.band-karte { grid-column: span 2; position: relative; }
.band-foto { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.platzhalter { width: 100%; aspect-ratio: 3/4; background: var(--flaeche-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--linie); }
.platz-init { font-weight: 800; font-size: 2.2rem; color: var(--gedaempft-2); }
.platz-text { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gedaempft-2); }
.band-karte figcaption { display: flex; flex-direction: column; gap: 2px; padding: 12px 2px 0; }
.band-name { font-family: var(--anzeige); font-weight: 700; font-size: .96rem; text-transform: uppercase; letter-spacing: .04em; }
.band-rolle { font-size: .82rem; color: var(--gedaempft); }
@media (max-width: 700px) { .band-raster { grid-template-columns: repeat(2, 1fr); } .band-karte { grid-column: span 1; } }

/* ── Musik: durchgehendes Banner, andere Flaechen-Tiefe als Umgebung ─────── */
.musik-banner { background: var(--flaeche-3); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); padding-bottom: var(--luft); }
.musik-grid > * { max-width: 760px; }
.musik-text { color: var(--gedaempft); max-width: 58ch; }
.musik-links { display: flex; gap: 16px; flex-wrap: wrap; margin: 26px 0 0; }
.icon-link { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); border: 1.5px solid var(--linie-stark); padding: 12px 20px; font-weight: 700; font-size: .9rem; letter-spacing: .03em; text-transform: uppercase; transition: border-color .16s var(--aus), color .16s var(--aus), transform .16s var(--aus); }
.icon-link .ic { color: var(--gedaempft); transition: color .16s var(--aus); }
.icon-link:active { transform: scale(.97); }
.icon-link.gross { padding: 14px 24px; font-size: 1rem; }
@media (hover: hover) and (pointer: fine) {
  .icon-link:hover { border-color: var(--rot); color: var(--rot-text); }
  .icon-link:hover .ic { color: var(--rot-text); }
}

/* ── Galerie: Mosaik-Raster + Lightbox ohne externe Bibliothek ───────────── */
.galerie-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 36px; }
/* Hochformat 3/4 statt Querformat 4/3: alle gelieferten Galeriefotos sind 2:3-Hochformate
   (933x1400). Im Querformat-Raster schnitt object-fit: cover rund die Haelfte jeder Aufnahme
   weg -- Koepfe und Instrumente lagen ausserhalb der Kachel. Der Aufmacher spannt 2x2 gleicher
   Kacheln und hat damit dasselbe Verhaeltnis, ohne eigene Angabe. */
.galerie-zelle { position: relative; aspect-ratio: 3/4; border: none; padding: 0; background: var(--flaeche-2); cursor: zoom-in; overflow: hidden; }
/* Der rote Rahmen liegt auf einem eigenen, positionierten ::after und NICHT als inset-Schatten
   auf der Kachel selbst: Ein inset-Schatten wird unter den Kindelementen gezeichnet, und das
   Foto fuellt die Kachel exakt aus (gemessen 369x492 bei Kachel 369x492) -- der Rahmen waere
   also vollstaendig verdeckt und nie zu sehen gewesen. */
.galerie-zelle::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 3px var(--rot); opacity: 0; pointer-events: none; transition: opacity .18s var(--aus); }
.galerie-zelle.gross { grid-column: span 2; grid-row: span 2; }
.galerie-zelle:disabled { cursor: default; }
.galerie-foto { width: 100%; height: 100%; object-fit: cover; transition: transform .3s var(--aus); }
.galerie-zelle:active .galerie-foto { transform: scale(1.01); transition-duration: .12s; }
@media (hover: hover) and (pointer: fine) {
  .galerie-zelle:hover .galerie-foto { transform: scale(1.04); }
  /* Innenliegender Rahmen statt border: eine echte Rahmenlinie wuerde die Kachel um ihre
     Staerke verschieben und beim Ueberfahren das gesamte Raster zucken lassen. */
  .galerie-zelle:not(:disabled):hover::after { opacity: 1; }
}
.galerie-zelle .platzhalter { height: 100%; aspect-ratio: auto; border: none; }
@media (max-width: 700px) { .galerie-raster { grid-template-columns: repeat(2, 1fr); } .galerie-zelle, .galerie-zelle.gross { grid-column: span 1; grid-row: auto; aspect-ratio: 3/4; } }

/* Lightbox: bisher sprang sie ohne jeden Uebergang auf und zu — bei einer bildschirmfuellenden
   schwarzen Flaeche ist das der haerteste Schnitt der ganzen Seite. Jetzt faehrt der Hintergrund
   auf und das Bild waechst aus 96 % heran (nie aus 0: nichts in der echten Welt entsteht aus dem
   Nichts). Der Ursprung bleibt mittig, weil ein Dialog nicht an einem Ausloeser haengt, sondern
   im Bildschirm steht. Austritt kuerzer als Eintritt — beim Schliessen ist die Entscheidung
   gefallen, da soll nichts mehr nachlaufen. */
.lightbox { position: fixed; inset: 0; z-index: 70; background: rgba(10,10,10,.94); display: flex; align-items: center; justify-content: center; padding: 40px; opacity: 0; transition: opacity .16s var(--aus); }
.lightbox.auf { opacity: 1; transition-duration: .22s; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 88vh; object-fit: contain; transform: scale(.96); opacity: 0; transition: transform .16s var(--aus), opacity .16s var(--aus), filter .16s var(--aus); }
.lightbox.auf img { transform: scale(1); opacity: 1; transition-duration: .26s; }
/* Bildwechsel per Pfeiltaste: das alte Bild verschwindet nicht hart gegen das neue, sondern
   wird kurz weichgezeichnet ausgeblendet. Ohne die Weichzeichnung sieht man beim Kreuzblenden
   zwei getrennte Motive uebereinander liegen; der Weichzeichner verbindet sie zu einer Bewegung. */
.lightbox.auf img.wechsel { opacity: 0; filter: blur(6px); transform: scale(.99); transition-duration: .12s; }
.lightbox-schliessen { position: absolute; top: 20px; right: 24px; background: none; border: 1px solid var(--linie-stark); color: var(--text); width: 44px; height: 44px; font-size: 1.6rem; line-height: 1; cursor: pointer; transition: border-color .16s var(--aus), color .16s var(--aus), transform .16s var(--aus); }
.lightbox-schliessen:active { transform: scale(.92); }
.lightbox-pfeil { position: absolute; top: 50%; background: none; border: 1px solid var(--linie-stark); color: var(--text); width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .16s var(--aus), color .16s var(--aus), transform .16s var(--aus); }
/* translateY(-50%) gehoert in die Basis-Transform, sonst wuerde ein :active-scale die vertikale
   Zentrierung ueberschreiben und der Pfeil beim Druecken nach unten springen. */
.lightbox-pfeil { transform: translateY(-50%); }
.lightbox-pfeil:active { transform: translateY(-50%) scale(.92); }
.lightbox-pfeil.links { left: 16px; }
.lightbox-pfeil.rechts { right: 16px; }
@media (hover: hover) and (pointer: fine) {
  .lightbox-schliessen:hover { border-color: var(--rot); color: var(--rot-text); }
  .lightbox-pfeil:hover { border-color: var(--rot); color: var(--rot-text); }
}
@media (max-width: 600px) { .lightbox { padding: 24px; } .lightbox-pfeil { width: 44px; height: 44px; } .lightbox-pfeil.links { left: 6px; } .lightbox-pfeil.rechts { right: 6px; } }

/* ── Termine: Ticket-/Posterkarte statt Standard-Listenzeilen ────────────── */
/* Termin-Karte als Ticket: Das Datum sitzt in einem durchgehenden roten Feld, das ueber die
   volle Kartenhoehe laeuft (align-items: stretch, Karte ohne eigenen Innenabstand). Das ist der
   eine grosse rote Moment der Seite -- und er liegt bewusst genau dort, wo fuer die Band das
   Geschaeft liegt: bei den Konzertterminen. Weiss auf diesem Rot liegt bei 5,7:1, der Monat bei
   88 % Weiss noch bei 4,7:1 -- das Feld ist also nicht nur kraeftig, sondern auch lesbar. */
.termin-karte { display: grid; grid-template-columns: auto 1fr; align-items: stretch; border: 1px solid var(--linie); background: var(--flaeche); margin-top: 32px; overflow: hidden; }
.termin-datum { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; background: var(--rot); color: #fff; padding: clamp(20px, 3vw, 30px) 24px; min-width: 108px; }
.termin-info { padding: clamp(22px, 3vw, 32px) clamp(24px, 3vw, 34px); }
.termin-tag { font-size: 2.8rem; font-weight: 800; font-family: var(--anzeige); letter-spacing: -.02em; color: #fff; }
.termin-monat { font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.88); margin-top: 6px; }
.termin-meta { color: var(--gedaempft); font-size: .92rem; margin-bottom: 6px; }
.termin-hinweis { color: var(--gedaempft); margin-bottom: 0; font-size: .92rem; }
.termine-leer { color: var(--gedaempft); margin-top: 24px; }
/* Schmal: aus der linken Ticket-Kante wird ein roter Kopfstreifen ueber die volle Kartenbreite.
   Tag und Monat stehen dann nebeneinander auf einer Grundlinie (baseline statt center, sonst
   "haengt" die kleine Monatszeile neben der grossen Zahl in der Mitte). */
@media (max-width: 560px) {
  .termin-karte { grid-template-columns: 1fr; }
  .termin-datum { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 12px; padding: 16px clamp(24px, 3vw, 34px); min-width: 0; }
  .termin-tag { font-size: 2.1rem; }
}

/* ── Partner: Logo-Wand — Partnerlogos unveraendert/in echter Farbe auf dunkler Kachel ───────
   Palmen-/Sock-/Fels-Logo sind transparente PNGs mit hellen Farben, fuer dunklen Untergrund
   gemacht — auf Weiss praktisch unsichtbar. Logos mit eigenem opakem Hintergrund (SN Creatives,
   Lichtschall, SD Eventtechnik) bringen ihre Flaeche unveraendert mit, das bleibt so. */
/* Zwei bewusst getrennte Reihen (statt einer frei umbrechenden Flex-Zeile): die ersten 3
   Eintraege (Sebastian Sock, Kodran, SD Eventtechnik -- Nutzer-Vorgabe) bilden eine feste
   3er-Reihe oben, der Rest eine eigene Reihe darunter. So bleibt die Gruppierung unabhaengig
   von der Bildschirmbreite erhalten, statt vom automatischen Zeilenumbruch abzuhaengen. */
.partner-reihe { display: flex; flex-wrap: wrap; gap: 1px; background: var(--linie); }
.partner-reihe-oben { margin-top: 36px; }
.partner-reihe-unten { margin-top: 1px; }
.partner-zelle { position: relative; flex: 1 1 240px; background: var(--flaeche); display: flex; align-items: center; justify-content: center; min-height: 190px; padding: 28px; text-decoration: none; transition: transform .16s var(--aus), background .16s var(--aus); }
a.partner-zelle::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--rot); transform: scaleX(0); transform-origin: center; transition: transform .2s var(--aus); }
a.partner-zelle:active { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) {
  a.partner-zelle:hover { transform: translateY(-2px); background: var(--flaeche-3); }
  a.partner-zelle:hover::after { transform: scaleX(1); }
  a.partner-zelle:active:hover { transform: scale(.985); }
}
.partner-logo { max-height: 108px; max-width: 90%; width: auto; }
.partner-zelle-kodran .partner-logo { max-height: 48px; max-width: 85%; }

/* Sichtfenster: Manche Partner-Dateien haben riesige transparente Raender um ein kleines
   Motiv (2000x2000-Leinwand, Inhalt nur wenige Hundert Pixel hoch) und wirken dadurch bei
   einheitlicher Bild-Hoehe winzig. Die Datei bleibt unveraendert (object-fit: cover zoomt nur
   visuell auf den vermessenen Bildausschnitt, schneidet die Datei selbst nicht zu). Masse je
   Datei einzeln anhand der Inhalts-Bounding-Box berechnet. */
.sichtfenster { display: block; overflow: hidden; }
.sichtfenster .partner-logo { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; object-position: center; }
.sichtfenster-palmen { width: 204px; height: 114px; }
/* Sock-Logo hat eine sehr klein gesetzte Unterzeile ("techn'sche Dienstleistungen", nur ca.
   65px hoch auf der 2000px-Leinwand) -- bei 118px Sichtfenster-Hoehe war die praktisch
   unlesbar (~6px). Vergroessert, damit die Unterzeile ca. 10px erreicht -- aber bewusst nicht
   so gross wie zuvor (388px): das zwang die Kachel breiter als Kodran/SD daneben (444px vs.
   335px), weil die Flex-Kachel nie unter den Sichtfenster-Inhalt schrumpft. Bei 310px passen
   alle drei Kacheln der oberen Reihe wieder gleich breit nebeneinander (je ~371px).*/
.sichtfenster-sock { width: 310px; height: 218px; }
.sichtfenster-fels { width: 260px; height: 40px; }
@media (max-width: 480px) { .sichtfenster-palmen, .sichtfenster-sock, .sichtfenster-fels { width: 100%; max-width: 220px; } }
.partner-platzhalter { font-size: .82rem; letter-spacing: .03em; color: var(--gedaempft-2); text-align: center; }

/* Auf der Mobilansicht steht Kodran an erster Stelle der Partnerlogos (Nutzer-Vorgabe).
   Der Haltepunkt ist bewusst 860px -- derselbe, an dem die ganze Seite auf Mobil umschaltet
   (Burger-Menue). Ein engerer Wert reicht hier NICHT: Die Sock-Kachel kann wegen ihres
   Sichtfensters (310px Inhalt + Innenabstand) nicht unter ~366px schrumpfen und belegt deshalb
   bis etwa 910px Fensterbreite eine ganze Zeile fuer sich allein -- Kodran rutschte darunter.
   Erst darueber stehen alle drei Kacheln der oberen Reihe wirklich nebeneinander.
   Geloest ueber order statt ueber eine geaenderte Reihenfolge in content.json: Die Reihenfolge im
   Editor bestimmt weiterhin die Desktop-Anordnung (obere Dreier-Reihe: Sock, Kodran, SD), sie
   bleibt unangetastet. order wirkt nur innerhalb der Flex-Reihe -- weil Kodran ohnehin in der
   oberen Reihe liegt, steht es damit an erster Stelle aller Logos.
   Unbedenklich fuer die Tastaturbedienung: In dieser Reihe ist Kodran die einzige verlinkte
   Kachel, eine abweichende Fokus-Reihenfolge kann also gar nicht entstehen. */
@media (max-width: 860px) {
  .partner-zelle-kodran { order: -1; }
}

/* ── Kontakt: Split, zweite Auspraegung (andere Inhalte als Hero) ───────── */
.kontakt-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(32px, 6vw, 72px); align-items: start; }
.kontakt-text { color: var(--gedaempft); max-width: 46ch; }
.kontakt-mail { margin-top: 0; }
.kontakt-direkt { display: grid; gap: 14px; justify-items: start; }
.kontakt-direkt-label { font-family: var(--anzeige); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gedaempft-2); }
.social-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }

/* Kontaktformular (Kundenabnahme 13.08.2026): Felder als dunkle Flaechen mit harter Kante —
   kein Radius, kein Schatten, passend zum Formen-System der Seite. Die Kante nutzt
   --linie-stark, weil der Rahmen die einzige Information ueber die Form des Feldes ist
   (WCAG 1.4.11, gleiche Begruendung wie bei .icon-link). */
.kontakt-formular { margin-top: 26px; display: grid; gap: 16px; }
.kf-zeile { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.kf-feld { display: grid; gap: 6px; }
.kf-feld label { font-family: var(--anzeige); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gedaempft); }
.kf-feld input, .kf-feld textarea { width: 100%; background: var(--flaeche); border: 1.5px solid var(--linie-stark); border-radius: 0; color: var(--text); font: inherit; line-height: 1.5; padding: 12px 14px; transition: border-color .16s var(--aus); }
.kf-feld textarea { resize: vertical; min-height: 150px; }
.kf-feld input:focus-visible, .kf-feld textarea:focus-visible { outline: none; border-color: var(--rot); box-shadow: var(--ring); }
@media (hover: hover) and (pointer: fine) {
  .kf-feld input:hover, .kf-feld textarea:hover { border-color: var(--gedaempft); }
  .kf-feld input:focus-visible:hover, .kf-feld textarea:focus-visible:hover { border-color: var(--rot); }
}
.kf-senden { margin-top: 2px; }
.kf-hinweis { font-size: .82rem; line-height: 1.6; color: var(--gedaempft-2); max-width: 52ch; }
.kf-hinweis a { color: inherit; }
/* Statusbox: gleicher roter Akzentbalken wie die Abschnitts-Oeffner — der Text unterscheidet
   Erfolg und Fehler, nicht die Farbe (die Seite kennt kein Gruen, und Rot ist hier Akzent,
   nicht Warnfarbe). aria-live haengt am Halter, damit auch per JS eingesetzte Meldungen
   vorgelesen werden. */
.kf-meldung-halter:not(:empty) { margin-top: 22px; }
.kf-meldung { background: var(--flaeche); border-left: 3px solid var(--rot); padding: 12px 16px; font-size: .95rem; }
/* Honeypot: fuer Menschen unsichtbar aus dem Sichtbereich geschoben (nicht display:none —
   manche Bots ueberspringen unsichtbare Felder sonst ebenfalls). */
.kf-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 780px) { .kontakt-grid { grid-template-columns: 1fr; } .kf-zeile { grid-template-columns: 1fr; } }

/* ── Rechtsseiten (Impressum/Datenschutz) ────────────────────────────────── */
.rechtsseite h1 { margin-bottom: .6em; }
.rechtsseite h2 { font-size: 1.15rem; text-transform: none; font-weight: 700; letter-spacing: 0; margin-top: 1.6em; }
.rechtsseite p { color: var(--gedaempft); }
.fehltbox { background: var(--rot-hell); border: 1px solid var(--rot); color: var(--text) !important; padding: 16px 20px; margin-bottom: 1.6em; font-size: .92rem; }
/* Rechtsseiten (Phase 5): Aufzaehlung der Betroffenenrechte + dezenter Stand-Vermerk */
.rechtsseite ul { color: var(--gedaempft); padding-left: 1.2em; margin: .6em 0 1em; }
.rechtsseite ul li { margin: .3em 0; }
.rechts-stand { font-size: .85rem; margin-top: 2.2em; opacity: .8; }

/* ── Fuss ────────────────────────────────────────────────────────────────── */
/* Der Fuss schliesst die Seite mit demselben roten Balken, mit dem jeder Abschnitt beginnt --
   er sitzt genau auf der Trennlinie und an derselben linken Kante wie alle Ueberschriften.
   Damit ist das Motiv eine Klammer um die ganze Seite statt einer Verzierung an einer Stelle. */
.fuss { border-top: 1px solid var(--linie); padding: 48px 0 32px; margin-top: var(--luft); }
.fuss .innen { position: relative; }
.fuss .innen::before { content: ""; position: absolute; top: -49px; left: var(--gutter); width: 56px; height: 3px; background: var(--rot); }
.fuss-zeile { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.fuss-marke-block { display: flex; align-items: center; gap: 18px; }
.fuss-logo.marke-text { font-size: .95rem; }
.fuss-logo.marke-wortmarke-bild { height: 16px; }
.fuss-vertrauen { color: var(--gedaempft-2); font-size: .85rem; margin: 0; }
.fuss-links { display: flex; gap: 20px; }
.fuss-links a { color: var(--gedaempft); text-decoration: none; font-size: .88rem; transition: color .16s var(--aus); }
.fuss-links a:hover { color: var(--text); }
.fuss-zeile-2 { color: var(--gedaempft-2); font-size: .82rem; margin: 28px 0 0; }
.fuss-zeile-2 a { color: var(--gedaempft); }

/* ── Der eine komponierte Moment: der Hero beim Laden ─────────────────────── */
/* Vorher trug fast jedes Element der Seite dieselbe Scroll-Einblendung: jede Ueberschrift, jede
   Karte, jede Kachel fuhr identisch von unten herein. Das ist die auffaelligste Bewegungs-
   Gewohnheit generierter Seiten -- Bewegung als Beweis, dass gestaltet wurde, statt als Aussage.
   Sie ist ersatzlos entfallen. Was unterhalb des ersten Bildschirms liegt, ist beim Hinscrollen
   einfach da; das ist die selbstbewusstere Haltung und spart nebenbei den IntersectionObserver.
   Bewegung bleibt genau an einer Stelle: dem Ankommen auf der Seite. Ueberschrift, Text und
   Knoepfe setzen sich kurz nacheinander, das Logo-Panel folgt zuletzt.
   Ohne CSS-Animation (oder bei reduzierter Bewegung) ist der Normalzustand der sichtbare --
   die Animation blendet auf, sie versteckt nichts dauerhaft. */
@keyframes hero-auf { from { opacity: 0; transform: translateY(14px); } }
@keyframes hero-panel-auf { from { opacity: 0; transform: scale(.98); } }
.hero-inhalt > * { animation: hero-auf .5s var(--aus) both; }
.hero-inhalt > h1 { animation-delay: .04s; }
.hero-inhalt > .hero-text { animation-delay: .12s; }
.hero-inhalt > .hero-ctas { animation-delay: .19s; }
.hero-visual { animation: hero-panel-auf .6s var(--aus) .1s both; }

/* Reduzierte Bewegung heisst weniger und sanftere Bewegung, nicht gar keine: Ein-/Ausblenden
   und Farbwechsel bleiben (sie erklaeren, was passiert), jede Orts- und Groessenaenderung faellt
   weg. Die Lightbox blendet also weiterhin auf, waechst aber nicht mehr heran. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-inhalt > *, .hero-visual { animation: none; }
  .galerie-foto, .knopf, .partner-zelle, .icon-link, .burger span, .nav > * { transition: none !important; transform: none !important; }
  .nav { transition: opacity .15s linear; transform: none; }
  .lightbox img { transform: none; transition: opacity .15s linear; }
  .lightbox.auf img { transform: none; }
  .lightbox.auf img.wechsel { filter: none; transform: none; }
  .nav a:not(.knopf)::after { transition: none; }
  /* Die rote Kante der Partner-Kachel waechst normalerweise per scaleX aus der Mitte -- das ist
     Bewegung und faellt hier weg. Der Zustand bleibt erhalten, er erscheint nur sofort statt zu
     wachsen: reduzierte Bewegung heisst weniger Bewegung, nicht weniger Information. */
  a.partner-zelle::after { transition: none; }
  /* Der Galerie-Rahmen blendet ueber die Deckkraft auf und darf bleiben -- eine Deckkraft-
     aenderung ist keine Bewegung und erklaert, welche Kachel gerade angesteuert ist. */
}