/* NF Mentoring · pages/uber-uns.css · Build-Output von build.mjs – nicht von Hand ändern. Quellen: src/pages/uber-uns/, src/blocks/. */

/* ── src/zeichnungen/zeichnung.css ── */
/* Zeichnungs-System: Farben und Strich der Isometrie-Zeichnungen (src/zeichnungen/NAME.svg).
   Die SVG tragen keine Farben, nur Klassen. Werte sind Markenfarben aus RULES.md oder Mischungen daraus.
   Hell ist Standard (wie das Vorbild, Bauplan V1). Dunkel gilt unter data-theme bordeaux, bordeaux-2 und ink.
   Linienfarben sind deckend vorgemischt (Tinte zu 55 % auf Creme), damit sich Kanten, die zweimal
   gezeichnet werden, nicht verdunkeln. */

:root,
[data-theme="cream"] {
  --z-strich: 1.5px;                /* eine Linienstärke für alle Konturen */
  --z-strich-weg: 2.25px;           /* roter Weg wie der rote Faden im Vorbild, 1,5-fach */
  --z-linie: #716F6E;               /* ink #08080A zu 55 % auf cream #F1EDE8 */
  --z-linie-zart: #B0ADAA;          /* ink zu 28 %: Grundriss, Maßketten, Zeilen */
  --z-flaeche-1: #FBFBFB;           /* oben: white */
  --z-flaeche-2: #EDE8E1;           /* links: cream-2 mit 7 % ink (V1 TONE_WALL) */
  --z-flaeche-3: #DFDBD7;           /* rechts: cream mit 16 % ink (V1 TONE_WALL) */
  --z-boden: #F5F0E8;               /* Bodenfläche: cream-2 wie die Grundplatte im Vorbild */
  --z-akzent: #B4121E;              /* red */
  --z-akzent-flaeche: #ECD7D1;      /* wine #AE1D2B zu 12 % auf cream-2 */
  --z-durch: 0.26;                  /* roter Weg hinter Wänden, wie das Röntgenbild im Vorbild */
}

[data-theme="bordeaux"],
[data-theme="bordeaux-2"],
[data-theme="ink"] {
  --z-linie: #B6A9A8;               /* cream zu 70 % auf bordeaux #2D0912 */
  --z-linie-zart: #6C5256;          /* cream zu 32 % */
  --z-flaeche-1: #4C2D34;           /* oben: bordeaux mit 16 % cream */
  --z-flaeche-2: #3F1D25;           /* links: bordeaux mit 9 % cream */
  --z-flaeche-3: #30191F;           /* rechts: bordeaux-2 #1F070E mit 8 % cream */
  --z-boden: #33101A;               /* bordeaux mit 3,5 % cream */
  --z-akzent: #C66A68;              /* red-light (75 % red-soft + 25 % cream) für Linien */
  --z-akzent-flaeche: #4B0C16;      /* red #B4121E zu 22 % auf bordeaux */
  --z-durch: 0.4;
}

[data-theme="ink"] {
  --z-linie: #ABA8A5;               /* cream zu 70 % auf ink #08080A */
  --z-linie-zart: #535151;
}

/* Grundwerte: Füllung und Strich kommen nur aus den Klassen */
.zeichnung {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  fill: none;
  stroke: none;
  stroke-width: var(--z-strich);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.zeichnung :where(path, circle, ellipse) { vector-effect: non-scaling-stroke; }

.zeichnung .z-linie { stroke: var(--z-linie); }
.zeichnung .z-linie-zart { stroke: var(--z-linie-zart); }
.zeichnung .z-akzent { stroke: var(--z-akzent); }
.zeichnung .z-weg { stroke: var(--z-akzent); stroke-width: var(--z-strich-weg); }
.zeichnung .z-weg-durch { opacity: var(--z-durch); }
.zeichnung .z-flaeche-1 { fill: var(--z-flaeche-1); }
.zeichnung .z-flaeche-2 { fill: var(--z-flaeche-2); }
.zeichnung .z-flaeche-3 { fill: var(--z-flaeche-3); }
.zeichnung .z-boden { fill: var(--z-boden); }
.zeichnung .z-akzent-flaeche { fill: var(--z-akzent-flaeche); }
.zeichnung .z-punkt { fill: var(--z-akzent); }

/* Aufbau beim Eintritt: steuert allein core.js (NF.zeichnung, DESIGN.md §7). Es entfernt pathLength, misst die Linien
   in px und setzt .is-bereit/.is-sichtbar; die Zustände stehen in site/css/base.css. Ohne Skript und mit reduzierter
   Bewegung steht die Zeichnung fertig da. (Die früheren [data-z-aufbau]/[pathLength]-Regeln setzte kein Skript mehr;
   pathLength schneidet bei Maßstab ≠ 1 die Wegenden ab, deshalb entfernt, V2-I.) */

/* ── src/blocks/cta-band.css ── */
/* Baustein cta-band · Namensraum .b-cta-band (Slice V5-P0). Steht in einer Section mit data-theme (Farben über --text …).
   Rev. 6 (V9-A0): ruhiger, symmetrischer Schlussblock auf white oder grey: zentriert, höchstens 640 px breit, Text 36rem,
   gleiche Abstände (die Section liefert oben/unten --section-y), Knopf einzeilig mit Microcopy darunter, mobil volle Breite.
   Keine eigene Fläche, kein Verlauf, kein Raster: Hintergrund, Schrift (--text/--text-soft/--text-mute ≥ 4,5:1) und der zarte
   Rotschein des Knopfs (--nf-shadow-btn-hell) kommen aus dem Theme der Section.
   V11-C (Farbwelt Rev. 7, bauplan v11 §1/§4): Schluss-CTA auf data-theme="red" (Rot-Verlauf); der Primärknopf liest --btn1-*
   und steht dort invers (weiß mit rotem Text, 6,98:1), Microcopy --text-mute (Weiß 85 %, 5,39:1 am hellsten Stopp #AE1D2B).
   Variante, wenn die Section davor dunkel ist (olive/red, nie zwei dunkle Flächen nacheinander): dieselbe Section mit
   data-theme="olive-light" (Knopf Rot-Verlauf, Microcopy grey-500 4,62:1 am Verlaufsende); der Baustein selbst bleibt
   gleich: die Section in src/pages wählt das Attribut (Regel: Vorgänger-Section olive oder red → olive-light, sonst red). */
.b-cta-band { display: grid; justify-items: center; gap: 16px; width: 100%; max-width: 40rem; margin-inline: auto; text-align: center; }
.b-cta-band__titel { max-width: 100%; }
.b-cta-band__text { max-width: 36rem; }
.b-cta-band__aktion { display: grid; justify-items: center; gap: 12px; margin-top: 12px; }
.b-cta-band__cta { white-space: nowrap; }
.b-cta-band__micro { margin: 0; color: var(--text-mute); }
@media (max-width: 599px) {
  .b-cta-band__aktion { justify-items: stretch; width: 100%; }
  .b-cta-band__cta { width: 100%; }
}
@media (max-width: 400px) { .b-cta-band__cta { white-space: normal; } .b-cta-band__cta, .b-cta-band__micro { text-wrap: balance; } }   /* V9-FX1 (mob-freebies-05): keine Waise „passt“/„unverbindlich“ */

/* ── src/pages/uber-uns/01-hero.css ── */
/* /uber-uns · 01-hero · Namensraum .pg-uber-uns-01-hero (Slice V5-PN2)
   Oliv (Farbwelt Rev. 4, Raster-Klasse bleibt), Pille. Mobil gestapelt (Pille · H1 · Leitsatz · CTA · Film), ab 1024 px Text links (5 Spalten),
   Imagefilm rechts (7 Spalten, mittlere Größe, gerahmt). Bausteine aus base.css: .section .raster .pill .h1 .accent .lead
   .btn .frame .consent .frame__caption. */
.pg-uber-uns-01-hero { padding-top: calc(var(--header-h) + clamp(40px, 6vw, 88px)); overflow: hidden; }
.pg-uber-uns-01-hero__grid { display: grid; gap: 40px; }
.pg-uber-uns-01-hero__text { display: grid; justify-items: start; align-content: center; }
.pg-uber-uns-01-hero__pill { margin-bottom: 18px; }
.pg-uber-uns-01-hero__title { max-width: 12em; }
.pg-uber-uns-01-hero__lead { max-width: 40ch; margin-top: 22px; }
.pg-uber-uns-01-hero__aktion { display: grid; justify-items: start; gap: 12px; margin-top: 32px; }
.pg-uber-uns-01-hero__micro { margin: 0; }
.pg-uber-uns-01-hero__film { min-width: 0; margin: 0; }
.pg-uber-uns-01-hero__caption { margin-top: 12px; color: var(--text-soft); font-size: var(--fs-small); font-weight: 600; line-height: 1.45; text-wrap: pretty; }

@media (max-width: 400px) {
  .pg-uber-uns-01-hero__aktion .btn { white-space: normal; text-align: left; }
}

@media (min-width: 1024px) {
  .pg-uber-uns-01-hero__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(48px, 5.5vw, 96px);
    align-items: center;
  }
  .pg-uber-uns-01-hero__film { width: 100%; max-width: 720px; justify-self: end; }
}

/* Eintritt (01-hero.js): Startzustand nur unter dem Motion-Gate, nur transform und clip-path; dieselben Werte stehen als
   „from“ im fromTo() der JS-Datei. */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  html:not(.is-static) .pg-uber-uns-01-hero [data-motion] {
    transform: translate3d(0, var(--reveal-y), 0);
    clip-path: inset(0% 0% 100% 0%);
  }
}

/* ── src/pages/uber-uns/02-mission.css ── */
/* /uber-uns · 02-mission · Namensraum .pg-uber-uns-02-mission (Slice V5-PN2)
   Fläche white (farbwelt.md §3.2, vorher Creme; erklärt). Kopf gestapelt (H2 · Leitsatz · Text, höchstens 40 rem breit), darunter die Kennzahlen als Karte über die
   volle Breite (base.css: mobil 2 × 2, ab 768 px vier Spalten).
   V11-D (Rev. 7): Section ist die Oliv-Bühne der Seite (data-theme olive); Text und Kennzahlen lesen die Rollen des Themes. */
.pg-uber-uns-02-mission__kopf { display: grid; gap: 20px; max-width: 44rem; }
.pg-uber-uns-02-mission__title { max-width: 16em; }
.pg-uber-uns-02-mission__text { margin: 0; max-width: 60ch; color: var(--text-soft); line-height: 1.65; text-wrap: pretty; }
.pg-uber-uns-02-mission .pg-uber-uns-02-mission__stats { margin-top: clamp(36px, 5vw, 56px); }
@media (min-width: 1024px) {
  .pg-uber-uns-02-mission .pg-uber-uns-02-mission__stats .stat { padding: 26px 28px 24px; }
}
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  html:not(.is-static) .pg-uber-uns-02-mission [data-motion] {
    transform: translate3d(0, var(--reveal-y), 0);
    clip-path: inset(0% 0% 100% 0%);
  }
}

/* ── src/pages/uber-uns/03-kopf.css ── */
/* /uber-uns · 03-kopf · Namensraum .pg-uber-uns-03-kopf (Slice V5-PN2)
   Fläche white (Rev. 6, V9-B1; vorher Oliv). Mobil gestapelt (Foto höchstens 340 px · Text), ab 1024 px Foto links (380 px, oben bündig), Text rechts.
   Missionssatz mit Linie links (Oliv über --line). Social-Links als Pillen-Links (≥ 44 px Tippziel). */
.pg-uber-uns-03-kopf { overflow: hidden; }
.pg-uber-uns-03-kopf__grid { display: grid; gap: 36px; }
.pg-uber-uns-03-kopf__foto { width: min(78vw, 340px); margin: 0; }
.pg-uber-uns-03-kopf__text { display: grid; justify-items: start; align-content: start; }
.pg-uber-uns-03-kopf__pill { margin-bottom: 18px; }
.pg-uber-uns-03-kopf__lead { max-width: 44ch; margin-top: 18px; }
.pg-uber-uns-03-kopf__absatz { max-width: 62ch; margin: 16px 0 0; color: var(--text-soft); line-height: 1.65; text-wrap: pretty; }
.pg-uber-uns-03-kopf__lead + .pg-uber-uns-03-kopf__absatz { margin-top: 22px; }
.pg-uber-uns-03-kopf__mission {
  max-width: 62ch;
  margin: 26px 0 0;
  padding-left: 18px;
  border-left: var(--z-pfeil, 2px) solid var(--line);
}
.pg-uber-uns-03-kopf__mission p { margin: 0; color: var(--text); line-height: 1.6; text-wrap: pretty; }
.pg-uber-uns-03-kopf__mission strong { font-weight: 800; }
.pg-uber-uns-03-kopf__links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 30px; }
.pg-uber-uns-03-kopf .pg-uber-uns-03-kopf__social { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pg-uber-uns-03-kopf__social-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--btn2-line);
  border-radius: var(--radius-pill);
  color: var(--text);
  font-size: var(--fs-small);
  font-weight: 700;
  text-decoration: none;
  transition: border-color var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out);
}
.pg-uber-uns-03-kopf__social-link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .pg-uber-uns-03-kopf__social-link:hover { border-color: var(--btn2-hover-line); background: var(--btn2-hover-bg); color: var(--btn2-hover-text); }
}
@media (min-width: 1024px) {
  .pg-uber-uns-03-kopf__grid {
    grid-template-columns: clamp(300px, 27vw, 380px) minmax(0, 1fr);
    column-gap: clamp(48px, 6vw, 112px);
    align-items: start;
  }
  .pg-uber-uns-03-kopf__foto { width: 100%; }
}
/* V9-B1 Symmetrie: gestapelt (bis 767 px) steht das Porträt mittig statt links mit leerer Fläche daneben */
@media (max-width: 767px) {
  .pg-uber-uns-03-kopf__foto { justify-self: center; }
}
/* V9-FX2 (dp-06): 768–1023 Foto links neben Pille, H2 und Text statt allein über dem Text (rechts blieben 360 px leer) */
@media (min-width: 768px) and (max-width: 1023px) {
  .pg-uber-uns-03-kopf__grid { grid-template-columns: clamp(240px, 34vw, 300px) minmax(0, 1fr); column-gap: 40px; align-items: start; }
  .pg-uber-uns-03-kopf__foto { width: 100%; }
}

@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  html:not(.is-static) .pg-uber-uns-03-kopf [data-motion] {
    transform: translate3d(0, var(--reveal-y), 0);
    clip-path: inset(0% 0% 100% 0%);
  }
}

/* ── src/pages/uber-uns/04-team.css ── */
/* /uber-uns · 04-team · Namensraum .pg-uber-uns-04-team (Slice V5-PN2)
   Fläche grey (Rev. 6, V9-B1). Zwei Personenkarten (weiß, Doppelrand, weicher Schatten), oben eine graue Bildkachel mit dem Freisteller unten
   bündig, darunter Name, Rolle, Text. Mobil untereinander, ab 768 px nebeneinander. Logo-Leiste: Originallogos klein auf
   weißen Kacheln (nie umgefärbt), mobil drei, ab 768 px vier, ab 1024 px sechs Spalten. */
.pg-uber-uns-04-team__title { max-width: 16em; }
.pg-uber-uns-04-team .pg-uber-uns-04-team__personen {
  display: grid;
  gap: 20px;
  margin: clamp(28px, 4vw, 44px) 0 0;
  padding: 0;
  list-style: none;
}
.pg-uber-uns-04-team__person {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  padding: var(--frame-pad);
  border: 1px solid var(--surface-card-line);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
}
.pg-uber-uns-04-team__bild {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: clamp(220px, 26vw, 300px);
  margin: 0;
  overflow: hidden;
  border-radius: calc(var(--radius-lg) - var(--frame-pad));
  background: var(--nf-grey-50);   /* Rev. 6 (V9-B1): helle Kachel in der weißen Karte statt Oliv-Verlauf, Freisteller entsäumt */
}
.pg-uber-uns-04-team__bild img { width: auto; max-width: 92%; height: 92%; object-fit: contain; object-position: 50% 100%; }
.pg-uber-uns-04-team__body { display: grid; align-content: start; gap: 10px; padding: 22px 16px 16px; }
.pg-uber-uns-04-team__name { margin: 0; color: var(--text); font: 800 var(--fs-h3)/var(--lh-h3) var(--font-sans); }
.pg-uber-uns-04-team__rolle { margin: 0; color: var(--nf-olive-deep); font-weight: 800; line-height: 1.4; }
.pg-uber-uns-04-team__text { margin: 0; color: var(--text-soft); line-height: 1.6; text-wrap: pretty; }

/* Logo-Leiste */
.pg-uber-uns-04-team__partner { display: grid; gap: 18px; margin-top: clamp(48px, 6vw, 80px); }
.pg-uber-uns-04-team__partner-text { margin: 0; color: var(--text); font: 800 var(--fs-h3)/var(--lh-h3) var(--font-sans); text-wrap: balance; }
.pg-uber-uns-04-team .pg-uber-uns-04-team__logos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pg-uber-uns-04-team__logo {
  display: grid;
  place-items: center;
  min-width: 0;
  height: 64px;
  padding: 10px 12px;
  border: 1px solid var(--surface-card-line);
  border-radius: var(--radius-sm);
  background: var(--nf-white-pure);
}
.pg-uber-uns-04-team__logo img { width: auto; max-width: 100%; height: auto; max-height: 30px; object-fit: contain; }
.pg-uber-uns-04-team__logo--hoch img { max-height: 42px; }

@media (min-width: 768px) {
  .pg-uber-uns-04-team .pg-uber-uns-04-team__personen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .pg-uber-uns-04-team .pg-uber-uns-04-team__logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .pg-uber-uns-04-team .pg-uber-uns-04-team__personen { gap: 32px; }
  .pg-uber-uns-04-team__body { padding: 26px 22px 20px; }
  .pg-uber-uns-04-team .pg-uber-uns-04-team__logos { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
  .pg-uber-uns-04-team__logo { height: 72px; }
}
/* V10-C: Logo-Wand mobil per Kern (data-ein, Welle über --ein-i); hier nur Deckkraft statt Deckkraft + Anheben, damit höchstens
   12 statt 24 Übergänge gleichzeitig laufen (Bauplan §7.5: ≤ 20 Animationen im Bild). Startzustand nur unter .ein-bereit (core). */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  .pg-uber-uns-04-team__logos.ein-bereit [data-ein-item] { transition-property: opacity; }
  .pg-uber-uns-04-team__logos.ein-bereit:not(.is-ein) [data-ein-item] { translate: none; }
}
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  html:not(.is-static) .pg-uber-uns-04-team [data-motion] {
    transform: translate3d(0, var(--reveal-y), 0);
    clip-path: inset(0% 0% 100% 0%);
  }
}

/* ── src/pages/uber-uns/05-events.css ── */
/* /uber-uns · 05-events · Namensraum .pg-uber-uns-05-events (Slice V5-PN2, Kopie der Layout-Regeln aus src/sections/08-community.css; die Startseite bleibt unverändert)
   DESIGN.md Revision 2 §5, Fläche white (Rev. 6, V9-B1; vorher grey/olive), keine Pille, Budget ≤ 2,4 Bildschirmhöhen am Desktop.
   Bausteine aus base.css: .section .h2 .accent .lead .frame .frame--sm .frame__media .consent .objekt .station__lupe;
   die Lupe (a[data-lupe]) verdrahtet core.js. Hier nur: Raster, Marken an der Zeichnung, Zuschnitt der Eventfotos,
   Textblöcke, Bildunterschriften.
   Marken community-saal (viewBox 960 × 640, README src/zeichnungen): Leinwand 589.9 / 153.8 → 61.448 % / 24.031 %,
   rote Figur 455 / 331.1 → 47.396 % / 51.734 %.
   < 1024 px: Kopf · Zeichnung · Block 1 · Film · Fotos (2 Sp.) · Block 2 · Block 3 mit Chats · Gruppenfoto + Story
   ≥ 1024 px: 12 Spalten, Zeichnung rechts über 7 Spalten (≥ 700 px bei 1440), Belege in zwei Reihen darunter.
   FE-3 (S1-09): Block 3 „Community-Gruppen und Online-Treffen“ ist ein details (Akkordeon aus base.css, Titel in der summary, Panel
   mit Text und Chat-Collage). Bis 1023 px ist er zu (05-events.js) und blendet Gruppenfoto und Story mit aus (die stehen als
   Geschwister danach im Raster, damit ab 1024 px die Zeile unverändert bleibt); ab 1024 px ist er offen, die summary nur noch die
   Überschrift (keine Kartenfläche, kein Icon, Klick schaltet nichts) und das Raster wie vorher. */

/* Glow der Freisteller (.objekt::before ragt 10 % über den Rand) bleibt im Abschnitt: mobil keine Überbreite */
.pg-uber-uns-05-events { overflow: hidden; }

.pg-uber-uns-05-events__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "kopf kopf"
    "saal saal"
    "days days"
    "film film"
    "fotos fotos"
    "events events"
    "gruppen gruppen"
    "gruppe story";
  column-gap: 14px;
}
.pg-uber-uns-05-events__kopf { grid-area: kopf; display: grid; gap: 16px; max-width: 40rem; }
.pg-uber-uns-05-events__saal { grid-area: saal; position: relative; margin-top: 20px; }
.pg-uber-uns-05-events__block--days { grid-area: days; }
.pg-uber-uns-05-events__film { grid-area: film; min-width: 0; margin-top: 32px; }
.pg-uber-uns-05-events__fotos { grid-area: fotos; margin-top: 28px; }
.pg-uber-uns-05-events__block--events { grid-area: events; margin-top: 36px; }
.pg-uber-uns-05-events__block--gruppen { grid-area: gruppen; margin-top: 40px; }
.pg-uber-uns-05-events__gruppe { grid-area: gruppe; align-self: end; margin: 28px 0 0; }
.pg-uber-uns-05-events__story { grid-area: story; align-self: end; margin: 28px 0 0; }

/* Zeichnung mit HTML-Beschriftung */
.pg-uber-uns-05-events__saal .zeichnung { display: block; width: 100%; height: auto; }
.pg-uber-uns-05-events__marke {
  position: absolute;
  color: var(--text);
  font: 800 var(--fs-caption)/1.1 var(--font-sans);
  white-space: nowrap;
  pointer-events: none;
}
/* Mobil als Pille auf der Leinwand (dort ist die Leinwand schmaler als der Text); ab 1024 px in ihrer Ebene */
.pg-uber-uns-05-events__marke--leinwand,
.pg-uber-uns-05-events__marke--du {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border: 1px solid var(--nf-line-soft-strong);
  border-radius: var(--radius-pill);
  background: var(--nf-white-pure);
  box-shadow: var(--nf-shadow-soft);
}
.pg-uber-uns-05-events__marke--leinwand {
  left: 61.448%;
  top: 24.031%;
  transform: translate(-50%, -50%);
}
/* rechts neben dem Kopf der roten Figur, mit rotem Punkt wie die Marken in 07 */
.pg-uber-uns-05-events__marke--du {
  left: 47.396%;
  top: 51.734%;
  padding-left: 7px;
  transform: translate(14px, -50%);
}
.pg-uber-uns-05-events__marke--du::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--z-akzent);
}

/* Textblöcke */
.pg-uber-uns-05-events__block { display: grid; align-content: start; gap: 6px; max-width: 46ch; }
.pg-uber-uns-05-events__titel { margin: 0; color: var(--text); font: 800 var(--fs-h3)/var(--lh-h3) var(--font-sans); text-wrap: balance; }
.pg-uber-uns-05-events__block--days { margin-top: 28px; }
.pg-uber-uns-05-events__text { margin: 0; color: var(--text-soft); line-height: 1.6; text-wrap: pretty; }

/* Block 3 als Akkordeon (FE-3): summary = Titel + Plus-Icon, Panel = Text und Chat-Collage wie vorher als Raster mit 6 px Abstand */
.pg-uber-uns-05-events__summary { gap: 12px; }
.pg-uber-uns-05-events__summary .pg-uber-uns-05-events__titel { flex: 1 1 auto; min-width: 0; }
.pg-uber-uns-05-events__panel { display: grid; align-content: start; gap: 6px; }
/* Beim Start schließt 05-events.js den Block: dabei keine Zuklapp-Animation */
.pg-uber-uns-05-events__block--gruppen.is-init::details-content,
.pg-uber-uns-05-events__block--gruppen.is-init .accordion__panel { transition: none; }
@media (max-width: 1023px) {
  .pg-uber-uns-05-events__block--gruppen:not([open]) ~ .pg-uber-uns-05-events__gruppe,
  .pg-uber-uns-05-events__block--gruppen:not([open]) ~ .pg-uber-uns-05-events__story { display: none; }
}
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  .pg-uber-uns-05-events__block--gruppen[open] ~ .pg-uber-uns-05-events__gruppe,
  .pg-uber-uns-05-events__block--gruppen[open] ~ .pg-uber-uns-05-events__story { animation: pg-uber-uns-05-events-ein 260ms var(--ease-out) both; }
}
@keyframes pg-uber-uns-05-events-ein { from { opacity: 0; translate: 0 6px; } }

/* Echte Bilder: gerahmt, per Klick groß (Lupe aus base.css/core.js) */
.pg-uber-uns-05-events__lupe-link { display: block; color: inherit; }
.pg-uber-uns-05-events__lupe-link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
/* Lupe-Symbol oben rechts: unten stehen in Story und Grafik eingebrannte Texte, die nie überlagert werden */
.pg-uber-uns-05-events__lupe-link .station__lupe { top: 10px; right: 10px; bottom: auto; box-shadow: 0 0 0 3px var(--bg); }
@media (hover: hover) and (pointer: fine) {
  .pg-uber-uns-05-events__lupe-link { transition: transform var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out); }
  .pg-uber-uns-05-events__lupe-link:hover { transform: translateY(-2px); border-color: var(--btn2-line); }
}
.pg-uber-uns-05-events__fotos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pg-uber-uns-05-events__foto { margin: 0; min-width: 0; }
.pg-uber-uns-05-events__bild { aspect-ratio: 4 / 3; object-fit: cover; }
.pg-uber-uns-05-events__bild--applaus { object-position: 50% 40%; }   /* V9-FX2: Köpfe komplett mit ca. 12 % Bildhöhe Luft darüber (85 % schnitt den Haaransatz an, 70 % ließ nur ca. 4 %); Füße bleiben im Bild */
.pg-uber-uns-05-events__caption { margin-top: 8px; color: var(--text-mute); font-size: var(--fs-small); line-height: 1.4; }

/* Chats: ohne Lupe (Screenshots mit Personenbezug, content/sections/08-community.md); mobil volle Breite bis 560 px,
   ab 1024 px so breit wie die Textspalte (bei 1440 ca. 510 px; das Original ist 1920 px breit, Namen bleiben unlesbar) */
.pg-uber-uns-05-events__chats { width: min(100%, 560px); margin: 18px 0 0; }
/* V9-B1: die Chat-Collage hat einen eingebrannten dunklen Rauch ohne freistellbare Kante (Prüfung B1-BILD); auf Weiß wirkte sie
   als schmutziges Rechteck. Deshalb liegt sie wie ein Bildschirmfoto in einer neutralen dunklen Kachel mit Radius (Bild, keine Fläche). */
.pg-uber-uns-05-events__chats { padding: clamp(10px, 1.2vw, 14px); overflow: hidden; border-radius: var(--radius-md); background: var(--nf-ink-2); }
/* Rev. 5/6 (helle Fläche): der eingebrannte dunkle Rauch reicht bis an die Bildkante (oben/unten bis 69 % Deckung)
   und zeigt auf Hell ein hart beschnittenes Rechteck; die Maske lässt ihn an allen vier Rändern auslaufen. */
.pg-uber-uns-05-events__chats img {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent), linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent), linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-composite: intersect;
}

@media (min-width: 1024px) {
  .pg-uber-uns-05-events__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas: none;
    column-gap: var(--col-gap);
  }
  .pg-uber-uns-05-events__kopf { grid-column: 1 / 6; grid-row: 1; align-self: end; }
  .pg-uber-uns-05-events__block--days { grid-column: 1 / 6; grid-row: 2; margin-top: 32px; align-self: start; }
  .pg-uber-uns-05-events__saal { grid-column: 6 / 13; grid-row: 1 / 3; align-self: center; margin: 0 -8px 0 0; }
  .pg-uber-uns-05-events__film { grid-column: 1 / 7; grid-row: 3 / 5; align-self: start; margin-top: 56px; }
  .pg-uber-uns-05-events__fotos { grid-column: 7 / 13; grid-row: 3; margin-top: 56px; gap: 20px; }
  .pg-uber-uns-05-events__block--events { grid-column: 7 / 13; grid-row: 4; margin-top: 22px; }
  .pg-uber-uns-05-events__block--gruppen { grid-column: 1 / 6; grid-row: 5; margin-top: 64px; align-self: center; max-width: none; }
  .pg-uber-uns-05-events__block--gruppen .pg-uber-uns-05-events__text { max-width: 46ch; }
  /* Akkordeon-Fläche weg: der Block ist wieder offen und sieht aus wie vorher; die summary ist nur die Überschrift */
  .pg-uber-uns-05-events__grid > details.pg-uber-uns-05-events__block--gruppen[open] {
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .pg-uber-uns-05-events__summary { display: block; min-height: 0; padding: 0; margin-bottom: 6px; cursor: default; }
  .pg-uber-uns-05-events__summary .accordion__icon { display: none; }
  .pg-uber-uns-05-events__panel { max-width: none; padding: 0; }
  /* auch ein (ohne JS) zugeklapptes Details zeigt seinen Text weiter */
  .pg-uber-uns-05-events__block--gruppen::details-content { content-visibility: visible; block-size: auto; }
  .pg-uber-uns-05-events__chats { width: 100%; }
  /* Gruppenfoto 4 Spalten, Story 3 Spalten (höchstens 220 px): die Story bleibt ab 1024 px ≥ 180 px breit */
  .pg-uber-uns-05-events__gruppe { grid-column: 6 / 10; grid-row: 5; align-self: start; margin-top: 64px; margin-left: clamp(0px, 2vw, 24px); }   /* V9-B1: oben bündig mit der Story */
  .pg-uber-uns-05-events__story { grid-column: 10 / 13; grid-row: 5; align-self: start; justify-self: end; width: min(100%, 220px); margin-top: 64px; }
  .pg-uber-uns-05-events__marke { font-size: var(--fs-small); }
  /* in der Ebene der Leinwand (README src/zeichnungen: translate(-50 %, -50 %) skewY(30deg)) */
  .pg-uber-uns-05-events__marke--leinwand {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    transform: translate(-50%, -50%) skewY(30deg);
  }
}

/* Eintritt (08-community.js): Startzustände nur unter dem Motion-Gate, nur transform und clip-path; dieselben Werte
   stehen als „from“ im fromTo() der JS-Datei. */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  html:not(.is-static) .pg-uber-uns-05-events [data-motion] {
    transform: translate3d(0, var(--reveal-y), 0);
    clip-path: inset(0% 0% 100% 0%);
  }
}

/* ── src/pages/uber-uns/06-standorte.css ── */
/* /uber-uns · 06-standorte · Namensraum .pg-uber-uns-06-standorte (Slice V5-PN2)
   Fläche white (farbwelt.md §3.2, vorher Creme): Karten als Apple-Kachel (grey-50, ohne Schatten). Kopf gestapelt (Pille · H2 · Leitsatz), darunter zwei Standortkarten: mobil untereinander, ab 768 px nebeneinander.
   Karte = helle Fläche mit Doppelrand, Foto gerahmt (16:9,5 wie das Original), Name, Adresse als Karten-Link, Öffnungszeiten,
   Telefon und E-Mail als Links, WhatsApp als kleiner Sekundärknopf (Oliv-Kontur aus base.css, Rollen --btn2-*). Tippziele ≥ 44 px. */
.pg-uber-uns-06-standorte__kopf { display: grid; justify-items: start; gap: 18px; max-width: 40rem; }
.pg-uber-uns-06-standorte .pg-uber-uns-06-standorte__liste {
  display: grid;
  gap: 20px;
  margin: clamp(32px, 4.5vw, 52px) 0 0;
  padding: 0;
  list-style: none;
}
.pg-uber-uns-06-standorte__ort {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  padding: var(--frame-pad);
  border: 1px solid var(--surface-card-line);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
}
/* Foto: Rahmen schon durch die Karte, hier ohne zweiten Rand */
.pg-uber-uns-06-standorte .pg-uber-uns-06-standorte__foto { padding: 0; border: 0; background: none; box-shadow: none; }
.pg-uber-uns-06-standorte__foto .frame__media { aspect-ratio: 800 / 473; object-fit: cover; }
.pg-uber-uns-06-standorte__body { display: grid; justify-items: start; align-content: start; gap: 14px; padding: 22px 16px 16px; }
.pg-uber-uns-06-standorte__name { margin: 0; color: var(--text); font: 800 var(--fs-h3)/var(--lh-h3) var(--font-sans); }
.pg-uber-uns-06-standorte__adresse { margin: -10px 0 0; }
.pg-uber-uns-06-standorte__link {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  min-height: 44px;
  padding-block: 10px;
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
  transition: color var(--dur-ui) var(--ease-out);
}
.pg-uber-uns-06-standorte__wert {
  text-decoration: underline;
  text-decoration-color: var(--nf-line-olive-pill);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--dur-ui) var(--ease-out);
}
.pg-uber-uns-06-standorte__link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: 4px; }
@media (hover: hover) and (pointer: fine) {
  .pg-uber-uns-06-standorte__link:hover { color: var(--nf-wine); }
  .pg-uber-uns-06-standorte__link:hover .pg-uber-uns-06-standorte__wert { text-decoration-color: currentColor; }
}
.pg-uber-uns-06-standorte__art { min-width: 4.5em; color: var(--text-soft); font-size: var(--fs-small); font-weight: 600; }
.pg-uber-uns-06-standorte__zeiten { display: grid; gap: 8px; width: 100%; margin: 0; padding: 14px 0; border-block: 1px solid var(--hairline); }
.pg-uber-uns-06-standorte__zeiten div { display: grid; gap: 2px; }
.pg-uber-uns-06-standorte__zeiten dt { color: var(--text); font-weight: 800; font-size: var(--fs-small); }
.pg-uber-uns-06-standorte__zeiten dd { margin: 0; color: var(--text-soft); font-variant-numeric: tabular-nums lining-nums; }
.pg-uber-uns-06-standorte .pg-uber-uns-06-standorte__kontakt { display: grid; gap: 0; margin: -8px 0 0; padding: 0; list-style: none; }
.pg-uber-uns-06-standorte .pg-uber-uns-06-standorte__wa { margin-top: 4px; }
@media (min-width: 480px) {
  .pg-uber-uns-06-standorte__zeiten div { grid-template-columns: 11.5em minmax(0, 1fr); align-items: baseline; gap: 12px; }
}
@media (min-width: 768px) {
  .pg-uber-uns-06-standorte .pg-uber-uns-06-standorte__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
/* V9-FX2 (dp-13): 768–1023 ist die Karte nur ca. 340 px breit; neben der festen Tagesspalte (11,5em) brach die Zeit in vier
   Zeilen, und nur die Ingolstädter Adresse lief zweizeilig (Zeitenblöcke 27 px versetzt). Dort Tag über Zeit, PLZ/Ort in
   beiden Karten in eigener Zeile. */
@media (min-width: 768px) and (max-width: 1023px) {
  .pg-uber-uns-06-standorte__zeiten div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .pg-uber-uns-06-standorte__plz { display: block; }
}
@media (min-width: 1024px) {
  .pg-uber-uns-06-standorte .pg-uber-uns-06-standorte__liste { gap: 32px; }
  .pg-uber-uns-06-standorte__body { padding: 26px 22px 22px; }
}
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  html:not(.is-static) .pg-uber-uns-06-standorte [data-motion] {
    transform: translate3d(0, var(--reveal-y), 0);
    clip-path: inset(0% 0% 100% 0%);
  }
}

/* V11-D Rhythmus Rev. 7: zweite Hell-Oliv-Fläche der Seite, Verlauf gespiegelt (bauplan §4) */
.pg-uber-uns-06-standorte { --h-winkel: 195deg; }