@font-face {
  font-family: "ABC Prophet";
  src: url("../fonts/ABCProphetTrial-Regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "ABC Prophet";
  src: url("../fonts/ABCProphetTrial-RegularItalic.otf") format("opentype");
  font-weight: normal;
  font-style: italic;
}

/* Sessions-Schriften für die Type-Seiten (content/fonts/, von Mira selbst
   hochgeladen) — je Session eine eigene @font-face, Name entspricht der
   hochgeladenen Datei (Dateinamen sind case-sensitive). */
@font-face {
  font-family: "session1-Filled";
  src: url("../content/fonts/DYSWIS-BlindStrokes-Filled.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "session1-outlined";
  src: url("../content/fonts/DYSWIS-BlindStrokes-Outlined.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Session2";
  src: url("../content/fonts/DYSWIS-Toolbox.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Session4";
  src: url("../content/fonts/DYSWIS-NoSay.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "session5";
  src: url("../content/fonts/DYSWIS-NoCompromise.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "session3";
  src: url("../content/fonts/DYSWIS-PvP.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
/* Font-family bewusst "session1-parallel" statt "session1" — Position 1
   (Parallel Strokes) und die schon bestehende "session1-Filled" (jetzt
   Position 2, Blind Strokes) haben rein zufällig beide "session1" im
   hochgeladenen Dateinamen, meinen aber unterschiedliche Schriften. */
@font-face {
  font-family: "session1-parallel";
  src: url("../content/fonts/DYSWIS-Handschrift.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

:root{
  --black:#000;
  --white:#fff;
  --border-w:1px;
  --menu-gap:2px;
  --menu-item-height:40px;
  --menu-font-size:20px;
  /* Spalten-Kopfzeilen (.content-header: Intro, Instructions, Phuong,
     Mira, Specimen …) — größer als die Menü-Reiter. */
  --header-height:52px;
  --header-font-size:30px;
  --content-font-size:16px;
  --font-main:"ABC Prophet", sans-serif;
}

*{ box-sizing:border-box; }

html,
body{
  margin:0;
  padding:0;
  background:var(--white);
  color:var(--black);
  font-family:var(--font-main);
  font-size:var(--content-font-size);
}

.title{
  font-family:var(--font-main);
}

a{
  color:inherit;
  text-decoration:none;
}

/* Inline-Links im Fließtext (Redebeiträge, Bio, Manifesto-Text) bleiben
   schwarz, nur unterstrichen. Bewusst nicht global auf alle <a>, sonst
   wären auch Menü/Navigations-Links betroffen. */
.turn-text a,
.interview-intro-text a,
.manifesto-text a,
.intro-meta a{
  text-decoration:underline;
}

button{
  font-family:inherit;
  font-size:inherit;
  cursor:pointer;
}

  /* =========================================================
   MENU — GLOBAL
   ========================================================= */

/* Bleibt beim Scrollen oben stehen, auf jeder Seite. main.js schreibt
   die tatsächliche gerenderte Höhe in --menu-height, damit sticky
   Elemente weiter unten (z.B. .interview-sidebar) wissen, wie weit sie
   selbst vom oberen Rand abrücken müssen, um nicht darunter zu verschwinden. */
.site-menu{
  position:sticky;
  top:0;
  z-index:50;
  background:var(--white);
}
/* Der Abstand unter der letzten Menüzeile (deren margin-bottom) liegt
   außerhalb der sticky Box und war damit durchsichtig — beim Scrollen
   lief der Seitentext sichtbar durch diesen 2px-Spalt. Ein weißer Streifen
   genau in dieser Lücke klebt mit dem Menü mit, ohne Höhe/--menu-height
   und damit alle darauf aufbauenden sticky Abstände zu verändern. */
.site-menu::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:100%;
  height:var(--menu-gap);
  background:var(--white);
  pointer-events:none;
}

.menu-level-1,
.menu-level-2,
.menu-level-3{
  display:flex;
  background:var(--white);
  margin-bottom:var(--menu-gap);
  gap:var(--menu-gap);
}

/* Grid statt Flex: 5 exakt gleich breite Spalten (Titel + 4 Modi),
   unabhängig davon, wie viel Platz der Titeltext eigentlich bräuchte —
   mit Flex (flex-grow-Verhältnis) blieb die Titelzelle immer etwas
   breiter als 1/5, weil Flex-Items nie unter ihre Inhalts-Mindestbreite
   schrumpfen (white-space:nowrap). minmax(0,1fr) hebt diese Mindestbreite
   auf, wodurch die Spalte wirklich exakt 1/5 wird; überschüssiger Text
   wird stattdessen abgeschnitten (siehe text-overflow:ellipsis unten). */
.menu-level-1{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  align-items:stretch;
}

.menu-level-2.hidden,
.menu-level-3.hidden{
  display:none;
}

/* .nav-items bleibt als Wrapper im DOM (für main.js), trägt aber selbst
   keine eigene Box mehr — seine 4 .nav-item-Kinder werden dadurch direkt
   zu Grid-Items von .menu-level-1 und bekommen je 1 der 5 Spalten. */
.menu-level-1 .nav-items{
  display:contents;
}

.nav-item{
  display:flex;
  height:var(--menu-item-height);
  padding:6px 15px;
  align-items:center;
  gap:10px;
  flex:1 0 0;
  background:var(--black);
  color:var(--white);
  border-top:var(--border-w) solid var(--black);
  border-right:var(--border-w) solid var(--black);
  border-left:var(--border-w) solid var(--black);
  white-space:nowrap;
  text-align:left;
  font-size:var(--menu-font-size);
  cursor:pointer;
}

/* Level-1-Zellen (Titel + 4 Modi) dürfen unter ihre Inhalts-Mindestbreite
   schrumpfen (siehe .menu-level-1 grid oben) — passt der Text nicht in
   die exakt 1/5 breite Spalte, wird er abgeschnitten statt die Spalte
   zu verbreitern. */
.menu-level-1 .nav-item,
.title-cell{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}

.nav-item.active{
  background:var(--white);
  color:var(--black);
  height:calc(var(--menu-item-height) - var(--border-w));
}

/* Erster/letzter Tab jeder Menüzeile sitzt an der äußeren Seitenkante,
   daher dort keine Randlinie. Level 1 ausgenommen: "Work" (erstes
   Kind) sitzt neben der Titelzelle, nicht am Seitenrand — behält also
   seine linke Linie. "About" (letztes Kind) sitzt echt am rechten Rand. */
.menu-level-2 .nav-item:first-child,
.menu-level-3 .nav-item:first-child{
  border-left:none;
}
.nav-items .nav-item:last-child,
.menu-level-2 .nav-item:last-child,
.menu-level-3 .nav-item:last-child{
  border-right:none;
}

/* Level-2/3-Reiter (Sessions, Interviews, Exercise/Output/Feedback)
   bleiben bei jeder Fensterbreite eine einzige Reihe über die volle
   Menübreite: mit flex:1 0 0 + white-space:nowrap konnten sie nicht unter
   ihre Textbreite schrumpfen, beim Verkleinern des Fensters rutschten die
   letzten Reiter rechts aus dem Bild. Jetzt schrumpfen alle gleichmäßig,
   ein zu langer Name läuft am rechten Rand mit einem Verlauf aus. Passt
   der Text, liegt der Verlauf unsichtbar auf dem gleichfarbigen Padding. */
.menu-level-2 .nav-item,
.menu-level-3 .nav-item{
  flex:1 1 0;
  position:relative;
  overflow:hidden;
  min-width:0;
}

.menu-level-2 .nav-item::after,
.menu-level-3 .nav-item::after{
  content:"";
  position:absolute;
  top:0; right:0; bottom:0;
  width:16px;
  background:linear-gradient(to right, transparent, var(--black));
  pointer-events:none;
}

.menu-level-2 .nav-item.active::after,
.menu-level-3 .nav-item.active::after{
  background:linear-gradient(to right, transparent, var(--white));
}

/* Der gerade gewählte Reiter wird nie angeschnitten — bei breitem Fenster
   bleibt er gleich breit wie die anderen, wird es eng, weichen die
   übrigen Reiter aus. */
.menu-level-2 .nav-item.active,
.menu-level-3 .nav-item.active{
  min-width:max-content;
}

/* Home / title cell */
.title-cell{
  height:var(--menu-item-height);
  display:flex;
  align-items:center;
  padding:6px 15px;
  font-size:var(--menu-font-size);
  background:var(--white);
  color:var(--black);
  border-top:var(--border-w) solid var(--black);
  white-space:nowrap;
  cursor:pointer;
}

/* Dot */
.nav-item .dot{
  width:8px;
  height:8px;
  border-radius:50%;
  border:var(--border-w) solid var(--white);
  display:inline-block;
}

.nav-item.active .dot{
  border-color:var(--black);
  background:var(--black);
}

/* Mobiler Menü-Trigger ("Menu" / aktueller Modus + Punkt), ersetzt auf
   schmalen Screens die inline sichtbare Level-1-Liste (siehe Media Query
   unten). Auf Desktop bleibt er ausgeblendet. */
.mode-toggle{
  display:none;
}

/* =========================================================
   MENU — MOBILE (Level 1 als Dropdown)
   ========================================================= */

@media (max-width:760px){
  /* Kopfzeile (Titel + Menu-Trigger) bleibt eine Zeile, das Dropdown mit
     den vier Modi rutscht per order + flex-basis:100% direkt darunter —
     dafür zurück auf Flex statt des 5-Spalten-Grids vom Desktop. */
  .menu-level-1{
    display:flex;
    flex-wrap:wrap;
  }

  .title-cell{
    order:1;
    flex:1 1 auto;
    padding-right:15px;
  }

  .mode-toggle{
    order:2;
    display:flex;
    flex:0 0 auto;
    align-items:center;
    gap:10px;
    height:var(--menu-item-height);
    padding:6px 15px;
    background:var(--black);
    color:var(--white);
    border-top:var(--border-w) solid var(--black);
    border-right:var(--border-w) solid var(--black);
    border-left:var(--border-w) solid var(--black);
    font-size:var(--menu-font-size);
    white-space:nowrap;
    cursor:pointer;
  }

  .site-menu.mobile-open .mode-toggle{
    background:var(--white);
    color:var(--black);
  }

  .mode-toggle .dot{
    width:8px;
    height:8px;
    border-radius:50%;
    border:var(--border-w) solid var(--white);
    display:none;
  }

  .mode-toggle.mode-active .dot{
    display:inline-block;
    background:var(--white);
  }

  .site-menu.mobile-open .mode-toggle .dot{
    border-color:var(--black);
    background:var(--black);
  }

  /* Level-1-Items: auf Desktop eine Reihe, hier standardmäßig verborgen
     und als vertikale Liste unter der Kopfzeile, sobald der Trigger
     geöffnet ist. */
  .menu-level-1 .nav-items{
    order:3;
    display:none;
    flex:0 0 100%;
    flex-direction:column;
  }

  .site-menu.mobile-open .menu-level-1 .nav-items{
    display:flex;
  }

  .menu-level-1 .nav-items .nav-item{
    flex:0 0 auto;
    width:100%;
  }

  .menu-level-1 .nav-items .nav-item:last-child{
    border-bottom:var(--border-w) solid var(--black);
  }

  /* Solange das Dropdown offen ist, bleiben Level 2/3 ausgeblendet, damit
     sie sich nicht mit der Liste überlagern — sie kommen automatisch
     zurück, sobald ein Modus gewählt wird (selectMode schließt das Dropdown). */
  .site-menu.mobile-open .menu-level-2,
  .site-menu.mobile-open .menu-level-3{
    display:none;
  }

  /* Aktiver Reiter (Level 2, z.B. Interview-Namen) wächst auf seine volle
     Textbreite, statt wie die anderen gleichmäßig geteilt zu werden — die
     übrigen Reiter weichen dafür und schrumpfen. */
  .menu-level-2 .nav-item{
    flex:1 1 0;
  }
  .menu-level-2 .nav-item.active{
    flex:0 0 auto;
  }
  .menu-level-2 .nav-item.active::after{
    display:none;
  }

  /* Ganz oben auf der Seite braucht es keine eigene Rahmenlinie mehr —
     die Kopfzeile bildet auf mobil den obersten Seitenrand selbst. */
  .title-cell,
  .mode-toggle{
    border-top:none;
  }
}


/* =========================================================
   CONTENT LAYOUT — .content-header ist die Basis-Kopfzeile, von jedem
   Seiten-Modul weiter unten wiederverwendet (Interview, Method, Type,
   Manifesto, About).
   ========================================================= */

.content-header{
  height:var(--header-height);
  display:flex;
  align-items:center;
  padding:0 15px;
  background:var(--white);
  border-top:var(--border-w) solid var(--black);
  border-right:var(--border-w) solid var(--black);
  border-left:var(--border-w) solid var(--black);
  font-size:var(--header-font-size);
}

/* =========================================================
   INTERVIEW-MODUL — 3-Spalten-Dialog mit Hover-Fokus
   ========================================================= */

/* Linke Spalte: Portrait+Text und Sprungleiste untereinander, als eine
   Einheit neben dem Dialog-Grid — dadurch beginnt das Grid (Kopfzeile) auf
   gleicher Höhe direkt unter dem Menü, statt unter einem volle-Breite-Vorspann */
.interview-sidebar{
  /* 1/5 der Seitenbreite. */
  width:20%;
  display:flex;
  flex-direction:column;
  /* position:fixed statt sticky — die Sidebar bleibt dadurch komplett
     unbewegt stehen, unabhängig davon wie lang das Interview daneben
     ist (bei sticky löst sie sich am Ende der eigenen Box wieder).
     Dafür raus aus dem Flex-Fluss: .interview-grid bekommt stattdessen
     einen margin-left in gleicher Breite, damit nichts überlappt.
     overflow-y:auto macht den Bio-Text unabhängig vom restlichen
     Interview scrollbar, sobald er die verfügbare Höhe übersteigt. */
  position:fixed;
  left:0;
  /* + var(--menu-gap): die Sidebar ist fixed und startet sonst exakt bei
     --menu-height, während der Inhalt rechts (.interview-grid, normaler
     Textfluss) durch den margin-bottom des Menüs automatisch 1 Gap tiefer
     beginnt — ohne den Ausgleich ragt die border-right der Sidebar oben
     ca. 2px über die rechte Kopfzeile hinaus. */
  top:calc(var(--menu-height, 40px) + var(--menu-gap));
  bottom:0;
  overflow-y:auto;
  border-right:var(--border-w) solid var(--black);
}

/* Vorspann: Portrait oben, Beschreibungstext darunter */
.interview-intro{
  display:flex;
  flex-direction:column;
  margin-bottom:var(--menu-gap);
}
.interview-portrait{
  display:flex;
  /* untereinander: Bild füllt den Platz, ein optionaler Fotocredit sitzt
     darunter IM Quadrat — so ist der Block auf allen Interview-Seiten
     gleich groß, egal ob mit oder ohne Credit */
  flex-direction:column;
  align-items:stretch;
  /* Gleichmäßig 2px auf allen Seiten statt vorher nur oben/unten mit
     85%-Breite (die ließ links/rechts viel mehr Luft als 2px) — die
     Sidebar-Breite selbst (342px) bleibt dabei unverändert, nur der
     Freiraum innerhalb der Box wird auf 2px reduziert. */
  padding:2px;
  /* quadratisches Bildfeld (wie die graue Platzhalterfläche); das Bild
     füllt es per object-fit:cover — zugeschnitten, nie verzerrt */
  aspect-ratio:1/1;
  /* Bild darf das Feld nicht über das Quadrat hinaus strecken */
  min-height:0;
  overflow:hidden;
  /* Oberkante über die volle Spaltenbreite, wie die Spalten-Kopfzeilen */
  border-top:var(--border-w) solid var(--black);
}
.interview-portrait svg,
.interview-portrait img{ display:block; width:100%; max-width:100%; flex:1 1 0; min-height:0; object-fit:cover; }
/* Fotocredit weiß in der unteren linken Ecke AUF dem Bild (absolut über
   dem Bild, nimmt ihm keinen Platz weg — das Bild füllt das Quadrat
   innerhalb des 2px-Rahmens ganz aus). */
.interview-portrait{ position:relative; }
.interview-photo-credit{
  position:absolute;
  left:2px;
  bottom:2px;
  padding:6px 8px;
  color:var(--white);
  font-size:11px;
  line-height:1.3;
  pointer-events:none;
}
/* Auf hellen Bildern (z.B. Studio HanLi) schwarz statt weiß */
.interview-photo-credit.credit-dark{ color:var(--black); }

/* Interview-Seiten: Bildzeile auf Schwarz (auch der 2px-Rahmen ums Bild),
   geht ohne Linie direkt in das ebenfalls schwarze Intro über. */
.interview-sidebar .interview-portrait{
  background:var(--black);
}
.interview-intro-text{
  padding:20px 15px;
  font-size:var(--content-font-size);
  line-height:1.4;
  border-top:var(--border-w) solid var(--black);
}
/* Linke Spalte (Interview-Sidebar, Info-Seite): Scrollleiste ausblenden —
   sie stand bei längeren Intros als weißer Streifen zwischen schwarzem
   Inhalt und Spaltenlinie. Scrollen per Mausrad/Trackpad geht weiter. */
.interview-sidebar,
.about-right,
.notes-panel{
  scrollbar-width:none;
}
.interview-sidebar::-webkit-scrollbar,
.about-right::-webkit-scrollbar,
.notes-panel::-webkit-scrollbar{
  display:none;
}

/* Interview-Seiten: Intro-Text unter dem Porträt invertiert (weiß auf
   schwarz) und bis zum unteren Rand der Sidebar gezogen; unten Platz
   für die feste Navigation, damit sie keinen Text verdeckt. */
.interview-sidebar .interview-intro{
  flex:1 0 auto;
  margin-bottom:0;
}
.interview-sidebar .interview-intro-text{
  flex:1 0 auto;
  background:var(--black);
  color:var(--white);
  padding-bottom:calc(var(--menu-item-height) + 20px);
}
.interview-intro-text p{ margin:0 0 .8em; }
.interview-intro-text p:last-child{ margin-bottom:0; }

/* Layout: linke Spalte, Dialog-Grid rechts daneben */
.interview-layout{
  display:flex;
  align-items:stretch;
  gap:var(--menu-gap);
  /* Spaltenköpfe (Namen) in Menügröße und -höhe wie auf der Reflection-
     Seite; sticky-/Scroll-Abstände rechnen mit derselben Variable. */
  --header-height:var(--menu-item-height);
}
.interview-layout .interview-grid .content-header{
  font-size:var(--menu-font-size);
}

.interview-grid{
  flex:1 1 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--menu-gap);
  /* Containing Block für absolut positionierte Grid-Items wie
     .interview-highlight — ohne das würde deren position:absolute bis
     zum nächsten positionierten Vorfahren (bzw. dem Viewport) durchreichen
     statt auf die eigene Grid-Zelle beschränkt zu bleiben. */
  position:relative;
}

/* Ausgleich dafür, dass .interview-sidebar jetzt fixed und damit aus dem
   Flex-Fluss raus ist — sonst würde das Grid darunter liegen. Nur auf
   Interview-Seiten (mit .interview-layout-Sidebar), NICHT auf Seiten wie
   notes1.html, die .interview-grid ganz ohne Sidebar nutzen. */
.interview-layout .interview-grid{
  margin-left:calc(20% + var(--menu-gap));
}

/* Variante ohne Sidebar (z.B. Session-Notes): nur 2 Spalten */
.interview-grid.cols-2{
  grid-template-columns:repeat(2,1fr);
}

/* Spaltenbreiten wie im Method-Modul (Exercise1.html): 3:3:2 statt gleicher Drittel */
.interview-grid.cols-3{
  grid-template-columns:3fr 3fr 2fr;
}

/* 4 gleich breite Spalten, z.B. für Interviews mit 2 Gesprächspartner:innen
   + Phuong/Mira statt nur 1 */
.interview-grid.cols-4{
  grid-template-columns:repeat(4,1fr);
}

/* Feedback-Seite: Notes-Spalte links UND rechts (je 2fr, gleich schmal),
   Phuong/Mira in der Mitte (je 3fr) */
.interview-grid.cols-4-notes{
  grid-template-columns:2fr 3fr 3fr 2fr;
}

/* Unsichtbares Grid-Item, das nur eine Spaltentrennlinie über die volle
   Höhe zeichnet — für Spalten, deren eigene Elemente keine Border haben
   (z.B. Redebeiträge, oder eine leere Spalte ganz ohne Turns). Die
   Spaltenposition kommt per style="grid-column:N" direkt am Element,
   die Zeilen-Spanne (grid-row) setzt main.js dynamisch passend zur
   tatsächlichen Redebeitrags-Anzahl.
   position+z-index über den sticky .content-header-Zellen (z-index:10):
   die haben einen eigenen weißen Hintergrund und liegen sonst ohne
   z-index-Vergleich automatisch darüber, was die Trennlinie genau auf
   Höhe der Kopfzeile unsichtbar macht. */
.col-divider{
  border-right:var(--border-w) solid var(--black);
  pointer-events:none;
  position:relative;
  z-index:11;
}

/* Feedback-Seiten: schwarze Fläche über die volle Höhe der beiden äußeren
   Highlight-Spalten (von main.js eingefügt, Zeilen-Spanne wie .col-divider). */
.col-fill{
  background:var(--black);
  pointer-events:none;
  position:relative;
}
.interview-grid.cols-4-notes > .content-header:nth-of-type(1),
.interview-grid.cols-4-notes > .content-header:nth-of-type(4){
  background:var(--black);
}
.interview-grid.cols-4-notes > .content-header:nth-of-type(1)::after,
.interview-grid.cols-4-notes > .content-header:nth-of-type(4)::after{
  background:linear-gradient(to bottom, var(--black), transparent);
}

/* Feedback-Seiten (main.js baut .cols-4-notes zu .cols-notes um):
   links eine feste Spalte "Notes" (1/3) im Design der Manifesto-Spalte
   der Reflection-Seite — weiß auf schwarz, "Note N" 16px, Text 28px,
   30px Abstand —, rechts daneben das Gespräch Phuong|Mira auf 2/3. */
.interview-grid.cols-notes{
  grid-template-columns:1fr 1fr;
  margin-left:calc(33.3333% + var(--menu-gap) * 0.6667);
  width:calc(66.6667% - var(--menu-gap) * 0.6667);
  --header-height:var(--menu-item-height);
}
.interview-grid.cols-notes > .content-header{
  font-size:var(--menu-font-size);
}
.notes-panel{
  position:fixed;
  top:calc(var(--menu-height, 40px) + var(--menu-gap));
  left:0;
  bottom:0;
  width:calc(33.3333% - var(--menu-gap) * 0.3333);
  overflow-y:auto;
  background:var(--black);
  color:var(--white);
}
.notes-panel > .content-header{
  position:sticky;
  top:0;
  height:var(--menu-item-height);
  font-size:var(--menu-font-size);
  background:var(--black);
  color:var(--white);
  border:none;
  z-index:10;
}
.notes-list{
  /* rechts etwas mehr Luft zum Gespräch daneben */
  padding:1px 45px 40px 15px;
  font-size:28px;
  line-height:1.25;
}
.note-item{
  display:block;
  margin:0 0 30px;
  cursor:pointer;
  transition:opacity .15s ease;
}
.note-item:last-child{ margin-bottom:0; }
.note-item:hover{ opacity:.6; }
.note-item p{ margin:0; }
.note-label{
  display:block;
  font-size:var(--content-font-size);
  line-height:1.2;
  margin:0 0 .3em;
}

/* Kopfzeile: 3 Zellen, eine pro Person  */
.interview-grid .content-header{
  display:flex;
  align-items:center;
  gap:10px;
  grid-row:1;
  border-left:none;
  position:sticky;
  /* + var(--menu-gap): ohne das klebt die Kopfzeile beim Scrollen direkt
     ohne Lücke am Menü, statt wie im ungescrollten Zustand einen 2px-Gap
     dazwischen zu behalten (siehe .interview-sidebar/.manifesto-left, wo
     das aus demselben Grund schon berücksichtigt wird). */
  top:calc(var(--menu-height, 40px) + var(--menu-gap));
  z-index:10;
  font-size:var(--header-font-size);
}
/* Redebeiträge scrollen unter der stickenden Kopfzeile durch — bleibt
   man mitten in einer Zeile stehen, schneidet die (opake) Kopfzeile sie
   hart in der Mitte ab, die untere Hälfte hängt sichtbar direkt darunter
   (auch im Stillstand, nicht nur während der Scroll-Bewegung). Ein
   weicher Verlauf direkt unter der Kopfzeile kaschiert diesen Schnitt,
   ähnlich wie das ausgeblendete Textende bei .turn-text.truncatable. */
.interview-grid .content-header::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:100%;
  height:14px;
  background:linear-gradient(to bottom, var(--white), transparent);
  pointer-events:none;
}
.interview-grid .content-header .dot{ display:none; }
/* Letzte Kopfzeile (z.B. "Mira") sitzt an der rechten Außenkante der
   Seite — dort keine Randlinie. :has() statt fixem nth-child, weil die
   Spaltenzahl je nach Interview variiert (3 oder 4 Personen). */
.interview-grid .content-header:not(:has(+ .content-header)){
  border-right:none;
}

/* Feste Navigation unten links: Trigger-Button in Sidebar-Breite, öffnet
   beim Hover (bzw. Klick auf Touch-Geräten, siehe main.js) ein Panel mit
   den Sprungmarken zu den Redebeiträgen — wächst nach OBEN auf, weil das
   Panel per bottom:100% direkt über dem Trigger andockt und seine eigene
   Höhe per max-height-Transition aufklappt statt nach unten zu schieben. */
.interview-nav{
  position:fixed;
  left:0;
  bottom:0;
  width:20%; /* wie .interview-sidebar */
  z-index:60;
}
.interview-nav-trigger{
  height:var(--menu-item-height);
  display:flex;
  align-items:center;
  padding:0 15px;
  background:var(--black);
  color:var(--white);
  font-size:var(--content-font-size);
  cursor:pointer;
}
/* Interview-Seiten: "Navigation" bleibt schwarz, aber durch eine weiße
   Linie oben vom ebenfalls schwarzen Intro-Text darüber getrennt. */
.interview-nav:not(.manifesto-nav) .interview-nav-trigger{
  border-top:var(--border-w) solid var(--white);
  font-size:var(--menu-font-size);
}
.interview-nav-panel{
  position:absolute;
  left:0;
  bottom:100%;
  width:100%;
  display:flex;
  flex-direction:column;
  max-height:0;
  overflow:hidden;
  transition:max-height .35s cubic-bezier(.4,0,.2,1);
}
.interview-nav:hover .interview-nav-panel,
.interview-nav.open .interview-nav-panel{
  max-height:60vh;
}
.interview-nav-panel a{
  /* Innenabstand + Mindesthöhe wie ein Menüpunkt (.nav-item); lange
     Punkte brechen um und werden entsprechend höher. */
  display:flex;
  align-items:center;
  min-height:var(--menu-item-height);
  padding:6px 15px;
  background:var(--white);
  color:var(--black);
  border-top:var(--border-w) solid var(--black);
  border-right:var(--border-w) solid var(--black);
  border-left:var(--border-w) solid var(--black);
  font-size:18px;
  line-height:1.3;
  cursor:pointer;
}
.interview-nav-panel a:hover{
  background:var(--black);
  color:var(--white);
}

/* Ein Redebeitrag */
.interview-turn{
  padding:10px 15px;
  position:relative;
  opacity:0; transform:translateY(8px);
  transition:opacity .5s ease, transform .5s ease, background .2s ease, color .2s ease;
  /* Damit scrollIntoView() (Sprungmarken-Navigation) nie einen Redebeitrag
     unter der klebenden Kopfzeile (Menü + Spalten-Reiter) versteckt lässt —
     ohne das könnte ein kurzer vorheriger Redebeitrag in einer anderen
     Spalte nicht genug Platz für den nächsten schaffen. */
  scroll-margin-top:calc(var(--menu-height, 40px) + var(--header-height));
}
.interview-turn.visible{ opacity:1; transform:none; }
/* Interview-Seiten: weniger Luft zwischen den einzelnen Redebeiträgen
   (oben/unten 4px statt 10px). Steht vor .topic-divider, damit die
   Themen-Trenner ihr eigenes Polster behalten. */
.interview-layout .interview-turn{
  padding-top:4px;
  padding-bottom:4px;
}

/* Fokus-Effekt beim Hover: invertiert wie eure .nav-item.active-Logik,
   nur umgekehrt (hier: schwarz/weiß tauschen statt weiß/schwarz) */
.interview-turn:hover,
.interview-turn.active{
  background:var(--black);
}
.interview-turn:hover .turn-text,
.interview-turn.active .turn-text,
.interview-turn:hover .turn-name,
.interview-turn.active .turn-name{
  color:var(--white);
}

/* Per Direktlink angesprungener Redebeitrag (main.js, .linked): kurz
   schwarz/weiß invertiert wie beim Hover, dann weich zurück. Hintergrund
   NUR am ganzen Beitrag animieren, Text/Name nur in der Farbe — sonst
   bekamen .turn-text/.turn-name beim Ausblenden einen eigenen schwarzen
   Hintergrund und zeichneten einen sichtbaren inneren Kasten. */
@keyframes turn-linked-bg{
  0%, 55%{ background:var(--black); }
  100%{ background:transparent; }
}
@keyframes turn-linked-color{
  0%, 55%{ color:var(--white); }
  100%{ color:var(--black); }
}
.interview-turn.linked{
  animation:turn-linked-bg 2.6s ease forwards;
}
.interview-turn.linked .turn-text,
.interview-turn.linked .turn-name{
  animation:turn-linked-color 2.6s ease forwards;
}

/* Regieanweisung / Randnotiz ohne festen Sprecher — geht über alle drei
   Spalten (data-col="1 / 4"), zentriert und kursiv statt linksbündig */
.interview-turn.interview-note{
  text-align:center;
  /* Rein informative Randnotiz, keine Aussage einer Person — deshalb
     keinerlei Hover-/Klick-Interaktion (schwarze Box, Bild-Popup, …).
     pointer-events:none nimmt sie komplett aus der Maus-/Touch-Erkennung
     raus, wodurch weder :hover in CSS noch main.js' Event-Listener greifen. */
  pointer-events:none;
}
.interview-turn.interview-note .turn-text{
  font-style:italic;
}

/* Themen-Trenner (main.js erzeugt sie aus den Navigationspunkten) über
   alle Spalten — Interviews und Reflection: zentriert, ohne Linien, 28px,
   nicht kursiv (anders als andere .interview-note). */
.interview-turn.topic-divider{
  margin:15px 0;
  padding:6px 15px;
}
/* Erster Trenner direkt unter der Kopfzeile — ohne Abstand nach oben. */
.content-header + .interview-turn.topic-divider{
  margin-top:0;
}
/* Sprungziele (Navigation springt auf den Trenner) auf der Reflection-
   Seite nicht unter der klebenden Mira/Phuong-Kopfzeile verstecken. */
.manifesto-left .interview-turn{
  scroll-margin-top:calc(var(--menu-height, 40px) + var(--menu-gap) + var(--header-height));
}
.interview-turn.topic-divider .turn-text{
  font-style:normal;
  font-size:28px;
  line-height:1.25;
  max-height:none;
}

/* Highlight-Zitat in der äußeren Notes-Spalte, größer gesetzt neben der
   Original-Aussage (aus ==...== markierten Textstellen erzeugt, siehe
   scripts/build-interview-turns.js). Keine Interaktion, daher wie
   .interview-note pointer-events:none.
   position:absolute (statt relative von .interview-turn geerbt): trägt
   so nicht zur Höhe seiner Grid-Zeile bei und darf beliebig lang sein,
   ohne sie aufzublähen. width als feste Pixelbreite (--highlight-col-
   width, von main.js gemessen) statt %-Wert: Chromium löst %-width bei
   position:absolute-Grid-Items spaltenabhängig inkonsistent auf. */
.interview-turn.interview-highlight{
  pointer-events:none;
  position:absolute;
  top:0;
  width:var(--highlight-col-width, 20%);
}
.interview-turn.interview-highlight[data-col="1"]{ left:0; }
.interview-turn.interview-highlight[data-col="4"]{ right:0; }
/* Auf der schwarzen Spaltenfläche (.col-fill) steht jedes Zitat in einer
   weißen Box, nur so hoch wie sein Text. Mobil (weiter unten) umgekehrt
   schwarz auf weißer Seite. */
.interview-turn.interview-highlight{ background:var(--white); color:var(--black); }
/* Zitat, das sonst ins nächste derselben Spalte hineinragen würde: endet
   2px davor (main.js setzt max-height), Verlauf zeigt "geht weiter", beim
   Hover klappt es auf volle Höhe auf und liegt über dem nächsten. */
.interview-turn.interview-highlight.clipped{
  overflow:hidden;
  pointer-events:auto;
  transition:max-height .35s cubic-bezier(.4,0,.2,1);
}
.interview-turn.interview-highlight.clipped::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:3em;
  background:linear-gradient(to bottom, transparent, var(--white));
  pointer-events:none;
  transition:opacity .25s ease;
}
.interview-turn.interview-highlight.clipped:hover{
  max-height:var(--full-height) !important;
  z-index:14;
  /* schwarze Kante, damit das aufgeklappte Zitat sich vom darunter
     liegenden absetzt */
  box-shadow:0 var(--menu-gap) 0 var(--black);
}
.interview-turn.interview-highlight.clipped:hover::after{ opacity:0; }
/* allgemeine Hover-Regel der Redebeiträge (schwarz/weiß) hier nicht */
.interview-turn.interview-highlight.clipped:hover{ background:var(--white); }
.interview-turn.interview-highlight.clipped:hover .turn-text{ color:var(--black); }
/* Zur Mitte hin keine schwarze Linie neben der weißen Box: die Box liegt
   über den .col-divider-Trennlinien (z-index:11) und reicht um Spalten-
   abstand + Linienbreite zur Mitte hin, sodass sie dort nahtlos in die
   weiße Mittelfläche übergeht. Links/oben/unten bleibt die schwarze Fläche.
   (data-col 1 sitzt mit left:0 fest → wächst nach rechts, data-col 4 mit
   right:0 → wächst nach links.) */
@media (min-width:761px){
  .cols-4-notes .interview-turn.interview-highlight{
    z-index:12;
    width:calc(var(--highlight-col-width, 20%) + var(--menu-gap) + var(--border-w));
  }
}
.interview-turn.interview-highlight .turn-text{
  font-size:22px;
  line-height:1.3;
  /* Nie kürzen — Zitate sind kurz genug, sollen aber unabhängig von der
     5-Zeilen-Logik nie per Fade/Hover-Overlay abgeschnitten werden. */
  max-height:none;
  overflow:visible;
}
.interview-turn.interview-highlight .turn-text.truncatable{
  -webkit-mask-image:none;
  mask-image:none;
}
/* Highlights sind oft Satzausschnitte ("the alphabet is …") — erster
   Buchstabe immer groß, ohne den Transkript-Text selbst zu verändern. */
.interview-turn.interview-highlight .turn-text p:first-child::first-letter{
  text-transform:uppercase;
}

/* Name pro Beitrag — nur auf schmalen Screens sichtbar (Desktop übernimmt die Kopfzeile) */
.turn-name{
  display:none;
  font-size:calc(var(--content-font-size) + 2px);
  font-weight:normal;
  margin-bottom:8px;
}

/* Text auf 5 Zeilen begrenzt */
.text-wrap{ position:relative; }
.turn-text{
  font-size:var(--content-font-size); line-height:1.4;
  max-height:7em; /* ≈ 5 Zeilen bei line-height 1.4 */
  overflow:hidden; position:relative;
}
.turn-text.fits{ max-height:none; }
.turn-text p{ margin:0 0 .8em; }
.turn-text p:last-child{ margin-bottom:0; }

/* Inline-Bild innerhalb eines Redebeitrags (z.B. Venn-Diagramm). Auf
   Desktop ausgeblendet — dort übernimmt stattdessen das per data-img
   verknüpfte Cursor-Popup (.cursor-figure) die Bildanzeige beim Hover
   über die ganze Sprechblase. Auf Mobil (siehe Media Query unten, kein
   Hover/Popup möglich) bleibt es Teil des ohnehin voll ausgeschriebenen
   Texts, ohne Rahmen. */
.turn-image{
  display:none;
  width:100%;
  height:auto;
  margin:0 0 .8em;
}
/* Textende weich ausblenden per Maske auf dem Text selbst (statt eines
   weiß/schwarz-Verlaufs darüber): unabhängig von der Hintergrundfarbe,
   daher kein kurz sichtbarer Kasten, während der Hover-Hintergrund
   überblendet. */
.turn-text.truncatable{
  -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 2em), transparent);
  mask-image:linear-gradient(to bottom, #000 calc(100% - 2em), transparent);
}
/* Maske erst entfernen, wenn der Text wirklich aufklappt (.expanded,
   von main.js nach der Hover-Verzögerung gesetzt) — während der Wartezeit
   bleibt das Textende weich ausgeblendet statt hart abgeschnitten. */
.interview-turn.expanded .turn-text.truncatable{
  -webkit-mask-image:none;
  mask-image:none;
}

/* Gekürzter Text klappt beim Hover im Seitenfluss auf und schiebt alles
   darunter nach unten (statt als Overlay darüber zu liegen, in dem man
   sich beim Scrollen verlor). main.js setzt max-height inline auf die
   gemessene Texthöhe, die Transition läuft organisch dorthin und beim
   Verlassen zurück auf 7em. */
.turn-text.truncatable{
  transition:max-height .45s cubic-bezier(.4,0,.2,1), color .2s ease;
}

/* Bild folgt dem Mauszeiger */
.cursor-figure{
  position:fixed; top:0; left:0; width:270px; z-index:100;
  opacity:0; pointer-events:none;
  transform:translate(-9999px,-9999px);
  transition:opacity .2s ease;
}
.cursor-figure.visible{ opacity:1; }
.cursor-figure .frame{
  aspect-ratio:4/3.1;
  border:var(--border-w) solid var(--black);
  background:var(--white);
  overflow:hidden;
}
.cursor-figure .frame svg{ display:block; width:100%; height:100%; }
.cursor-figure .frame img{ display:block; width:100%; height:100%; object-fit:cover; }
.cursor-figure .cap{
  font-size:13px; line-height:1.35;
  background:var(--white); border:var(--border-w) solid var(--black); border-top:none;
  padding:8px 10px;
}
.cursor-figure .cap b{ display:block; font-weight:bold; margin-bottom:2px; }

@media (max-width: 760px){
  .interview-layout{ flex-direction:column; }
  .interview-sidebar{ position:static; width:100%; bottom:auto; overflow-y:visible; border-right:none; border-bottom:var(--border-w) solid var(--black); }
  .interview-portrait{ flex:0 0 auto; border-bottom:var(--border-w) solid var(--black); }
  /* .interview-layout .interview-grid (Desktop) ist spezifischer als ein
     einfaches .interview-grid — ohne !important würde der Sidebar-Versatz
     (margin-left) hier stehen bleiben und die Spalte auf einen
     schmalen Rest zusammenquetschen. */
  .interview-grid{
    grid-template-columns:1fr !important;
    margin-left:0 !important;
    /* Platz am Seitenende, damit die letzten Redebeiträge nicht unter der
       fixen Navigationsleiste verschwinden. */
    padding-bottom:calc(var(--menu-item-height) + 20px);
  }
  /* Feedback-Seiten haben keine Navigationsleiste, die Reflection hält den
     Platz dafür schon über .manifesto-left frei — dort kein Extra-Abstand,
     sonst bleibt am Seitenende ein leerer Streifen. */
  .interview-grid.cols-4-notes,
  .interview-grid.cols-notes,
  .manifesto-left .interview-grid{
    padding-bottom:0;
  }
  /* Feedback: Gespräch volle Breite, Notes darunter im normalen Fluss */
  .interview-grid.cols-notes{ width:100%; margin-left:0; }
  .notes-panel{ position:static; width:100%; overflow-y:visible; }
  .notes-panel > .content-header{ position:static; }
  .interview-grid .content-header{ display:none !important; }
  /* Feedback-Seiten: .col-divider bekommt von main.js grid-row "1 / N+2"
     und belegt so in der einzigen Mobil-Spalte N+1 leere Zeilen — die
     Redebeiträge (grid-row:auto, s.u.) rutschen dahinter, und die
     Zeilenabstände (gap) summieren sich zu einer weißen Lücke vor dem
     ersten Text. Einspaltig gibt es keine Spaltentrennlinie zu ziehen. */
  .col-divider,
  .col-fill{ display:none; }
  /* main.js schreibt für Desktop ein festes grid-row je Redebeitrag
     inline (z.B. row:157) — bleibt das auf Mobil stehen, während nur
     Highlights (weiter unten) auf grid-row:auto zurückgesetzt werden,
     schiebt das CSS-Grid-Autoplacement die Highlights hinter ALLE
     explizit platzierten Redebeiträge (sichtbar als "alle Highlights
     ganz unten gebündelt"). Reset hier für ALLE .interview-turn, damit
     wieder die normale DOM-Reihenfolge gilt (Highlights stehen im HTML
     schon direkt hinter ihrem Quell-Turn). */
  .interview-turn{ grid-column:1 !important; grid-row:auto !important; }
  .turn-name{ display:block; }
  .cursor-figure{ display:none; }

  /* Auf mobil kein "5 Zeilen + Overlay aufklappen" — der Text steht
     direkt in voller Länge da. Tippen auf einen Redebeitrag färbt den
     Hintergrund trotzdem schwarz (siehe .interview-turn.active oben),
     nur eben ohne Höhen-Animation, weil nichts mehr aufzuklappen ist. */
  .turn-text{ max-height:none !important; overflow:visible; }
  .turn-text.truncatable{ -webkit-mask-image:none; mask-image:none; }
  .turn-image{ display:block; }

  /* Navigation: auf Desktop links unten fest positioniert (342px breit,
     Hover öffnet nach oben). Auf mobil stattdessen über die volle
     Fensterbreite unten fixiert, Klick öffnet/schließt (siehe main.js:
     initInterview bindet dafür bereits einen click-Listener, sobald kein
     Hover verfügbar ist — hier wird nur die Sichtbarkeit/Position
     angepasst). Bleibt beim Scrollen stehen, genau wie das Menü oben. */
  .interview-nav{ width:100%; }
  /* :hover bleibt auf manchen Touch-Browsern nach dem Tippen "hängen" und
     würde das Panel offen halten, obwohl main.js die .open-Klasse längst
     entfernt hat — auf mobil steuert daher ausschließlich .open. */
  .interview-nav:hover .interview-nav-panel{ max-height:0; }
  .interview-nav.open .interview-nav-panel{ max-height:60vh; }

  /* Notes/Feedback-Seiten: auf Mobil steht das Highlight ganz normal
     zwischen den Redebeiträgen im Textfluss (einspaltig gestapelt) —
     das absolute Positioning vom Desktop (siehe oben) würde es sonst
     aus dem Fluss reißen und andere Redebeiträge überlappen. Zusätzlich
     teilt es sich am Desktop bewusst die Grid-Zeile mit seinem
     Quell-Turn (siehe main.js) — auf Mobil landen durch das erzwungene
     grid-column:1 (oben) sonst BEIDE in derselben Zelle übereinander.
     grid-row:auto lässt es stattdessen ganz normal in die nächste freie
     Zeile einsortieren; width:auto hebt die 20%-Breite vom Desktop auf. */
  .interview-turn.interview-highlight{
    position:static;
    grid-row:auto !important;
    width:auto;
    background:var(--black);
    color:var(--white);
  }
}

/* =========================================================
   SESSION INTRO-MODUL — 2-Spalten-Layout: Bild-Platzhalter + Text
   ========================================================= */

.intro-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--menu-gap);
}

/* Linke Spalte: große Leitfrage, rundum gerahmt */
.intro-question{
  border:var(--border-w) solid var(--black);
  display:flex;
  align-items:center;
  padding:60px 40px;
  min-height:80vh;
  font-size:44px;
  line-height:1.2;
}
.intro-question p{ margin:0; }

/* Rechte Spalte: Titel, Text und Metadaten-Tabelle, ohne Rahmen */
.intro-text{
  padding:0 15px;
  font-size:var(--content-font-size);
  line-height:1.4;
}
.intro-text p{ margin:0 0 .8em; }
.intro-text p:last-child{ margin-bottom:1.5em; }

.intro-title{
  font-size:22px;
  font-weight:normal;
  font-family:var(--font-main);
  margin:0 0 .8em;
}

.intro-meta{
  width:100%;
  border-collapse:collapse;
}
.intro-meta th,
.intro-meta td{
  text-align:left;
  font-weight:normal;
  font-size:var(--content-font-size);
  padding:10px 0;
  border-bottom:var(--border-w) solid var(--black);
}
.intro-meta th{
  border-top:var(--border-w) solid var(--black);
}
/* Zusammengehörige Zeilen (Time/Warm-up Task/Main Exercise) ohne Linie
   und Abstand dazwischen, wie fortlaufende Zeilen statt einzelner
   Parameter — join-next entfernt die eigene Trennlinie/Abstand nach
   unten, join-prev den Abstand nach oben zur vorherigen Zeile. */
.intro-meta .intro-meta-join-next{
  border-bottom:none;
  padding-bottom:0;
}
.intro-meta .intro-meta-join-prev{
  padding-top:0;
}
/* Manueller Zeilenumbruch innerhalb einer Zelle (z.B. lange Tools-Liste):
   die umgebrochene Zeile soll nicht am Zellenrand, sondern auf Höhe des
   Werts nach dem Label ("Tools: ") weiterlaufen. padding-left auf dem
   Label-<span> statt direkt auf dem <td> — <br> selbst hat keine Breite,
   daher muss der Einzug am Text NACH dem Umbruch ansetzen. */
.intro-meta-hang{
  display:block;
  padding-left:42px;
}

@media (max-width: 760px){
  .intro-layout{ grid-template-columns:1fr; }
  .intro-question{ min-height:40vh; font-size:32px; padding:30px 20px; }
}

/* =========================================================
   METHOD-MODUL — 3 Spalten wie beim Interview-Grid: "Intro" (Text),
   "Instructions" (Aufzählung), "Visuals" (Bilder). Spalte 1 und 2 sind
   gleich breit, Spalte 3 (Visuals) bleibt schmaler (Verhältnis 3:3:2).
   Jede Spalte hat oben einen Reiter im
   .content-header-Stil der Interview-Seite (Ivo/Phuong/Mira) — genauso
   breit wie die eigene Spalte und beim Scrollen sticky.
   ========================================================= */

/* Die Seite selbst scrollt nicht — sie füllt exakt die Höhe unterhalb
   des Menüs. Nur die Visuals-Spalte bekommt ihren eigenen Scrollbereich,
   Intro und Instructions bleiben unbewegt stehen. */
.method-layout{
  display:grid;
  /* Reihenfolge Intro | Behind the Scenes | Instructions (per order, im
     HTML stehen Instructions vor den Visuals); Breiten wie zuvor:
     Intro 3, Visuals 2, Instructions 3. */
  grid-template-columns:3fr 2fr 3fr;
  gap:var(--menu-gap);
  align-items:start;
  height:calc(100vh - var(--menu-height, 40px));
  overflow:hidden;
}

.method-col-intro{ order:1; }
.method-col-visuals{ order:2; }
.method-col-instructions{ order:3; }
.method-col{
  display:flex;
  flex-direction:column;
  height:100%;
  overflow:hidden;
}

/* Reiter: gleiche Optik wie .interview-grid .content-header, aber pro
   Spalte statt in einer gemeinsamen Grid-Reihe — bleibt trotzdem exakt
   so breit wie die eigene Spalte, weil er ein Block-Kind von .method-col ist.
   Alle drei Spalten scrollen einzeln; ihr Reiter klebt jeweils oben
   im eigenen Scrollbereich. */
.method-layout .content-header{
  z-index:10;
  margin-bottom:var(--menu-gap);
  flex:0 0 auto;
  /* Spaltenüberschriften in Menügröße und -höhe */
  font-size:var(--menu-font-size);
  height:var(--menu-item-height);
}

/* Visuals-Spalte scrollt, Reiter klebt am oberen Rand des eigenen
   Scrollbereichs. */
.method-col-visuals{
  overflow-y:auto;
}
.method-col-visuals .content-header{
  position:sticky;
  top:0;
  border-left:none;
  /* rechts grenzt die schwarze Instructions-Spalte an — keine Linie nötig */
  border-right:none;
}

/* Trennlinien zwischen den Spalten über die volle Spaltenhöhe statt nur
   auf Höhe des Reiters — der Reiter selbst verliert dafür jeweils seinen
   eigenen Rand an der Stelle, sonst wäre die Linie dort doppelt so dick
   wie darunter. */
.method-col-intro{
  border-right:var(--border-w) solid var(--black);
  /* scrollt wie die beiden anderen Spalten, sobald der (28px-)Text
     über das Fenster hinausgeht */
  overflow-y:auto;
}
.method-col-intro .content-header{
  position:sticky;
  top:0;
}
/* Intro ist die linke Außenspalte — dort keine Randlinie an der äußeren
   Seitenkante, passend zum Rest der Seite. */
.method-col-intro .content-header{ border-right:none; border-left:none; }
/* Instructions als rechte Spalte im Design der Manifesto-Spalte der
   Reflection-Seite: weiß auf schwarz, randloser schwarzer Reiter, Text
   28px (Zeilenabstand 1.25), "Step N" 16px, 30px zwischen den Absätzen. */
.method-col-instructions{
  overflow-y:auto;
  background:var(--black);
  color:var(--white);
}
.method-col-instructions .content-header{
  position:sticky;
  top:0;
  background:var(--black);
  color:var(--white);
  border-top:none;
  border-left:none;
  border-right:none;
}
.method-col-instructions .method-text{
  padding:1px 15px 40px;
  font-size:28px;
  line-height:1.25;
}
.method-col-instructions .method-text p,
.method-col-instructions .method-text ul,
.method-col-instructions .method-text ol{
  margin-bottom:30px;
}
.method-col-instructions .method-text p:last-child,
.method-col-instructions .method-text ul:last-child,
.method-col-instructions .method-text ol:last-child{
  margin-bottom:0;
}
/* Einleitungssatz einer Aufzählung ("…decide whether") direkt über der
   Liste statt mit vollem Absatzabstand; ebenso eine Aufzählung direkt
   über ihren erläuternden Absätzen (No Compromise: "Stage N" →
   Allowed/Forbidden), außer der nächste Absatz beginnt einen neuen Step. */
.method-col-instructions .method-text p:has(+ ul),
.method-col-instructions .method-text ul:has(+ p:not(:has(.step-label))){
  margin-bottom:.3em;
}

.method-col-instructions .step-label{
  margin-bottom:.3em;
}
.method-col-instructions .method-text hr{
  border-top-color:var(--white);
  margin-bottom:30px;
}

/* Text- und Listen-Spalten (Intro, Instructions) — kein Rahmen,
   gleiche Typo wie .intro-text */
.method-text{
  padding:15px 15px 20px;
  font-size:var(--content-font-size);
  line-height:1.4;
}
.method-text p{ margin:0 0 .8em; }
.method-text p:last-child{ margin-bottom:0; }
.method-text .method-text-heading{ font-size:var(--menu-font-size); }
.method-text .method-text-indent{ padding-left:20px; }
.method-text hr{
  border:none;
  border-top:var(--border-w) solid var(--black);
  margin:0 0 .8em;
}

/* Intro-Spalte: große Leitfrage über dem Fließtext */
.method-intro-headline{
  font-size:36px;
  font-weight:normal;
  font-family:var(--font-main);
  line-height:1.2;
  margin:0 0 .5em;
}

/* Listen sollen sich wie Fließtext einfügen, nicht wie Standard-Listen wirken */
.method-text ul,
.method-text ol{
  margin:0 0 .8em;
  padding-left:1.2em;
}
/* Aufzählungen: Punkt bündig an der linken Textkante, der Text danach
   mit kleinem Abstand — Folgezeilen beginnen auf derselben Höhe wie die
   erste Zeile (hängender Einzug statt Umbruch unter den Punkt). */
.method-text ul{
  list-style:none;
  padding-left:0;
}
.method-text ul > li{
  position:relative;
  padding-left:.8em;
}
/* Punkt selbst gezeichnet — das "•" von ABC Prophet ist sehr groß;
   so skaliert er mit der Schriftgröße und sitzt mittig zur x-Höhe. */
/* Erläuternde Absätze innerhalb eines Punkts (No Compromise: Allowed/
   Forbidden unter "Stage N") beginnen auf derselben Höhe wie dessen
   Text; zwischen solchen Gruppen etwas mehr Luft. */
.method-text ul > li > p,
.method-col-instructions .method-text ul > li > p{
  margin:0;
}
.method-text ul > li:has(> p){
  margin-bottom:.8em;
}
.method-text ul > li:has(> p):last-child{
  margin-bottom:0;
}
.method-text ul > li::before{
  content:"";
  position:absolute;
  left:0;
  top:.5em;
  width:.28em;
  height:.28em;
  border-radius:50%;
  background:currentColor;
}
.method-text ul:last-child,
.method-text ol:last-child{ margin-bottom:0; }
.method-text li{ margin:0 0 .4em; }
.method-text li:last-child{ margin-bottom:0; }

/* Nummerierte Listen (Instructions) bekommen statt "1." / "2." die
   Beschriftung "Step 1", "Step 2" … vor jedem Punkt */
.method-text ol{
  list-style:none;
  counter-reset:step;
  padding-left:0;
}
.method-text ol li{
  counter-increment:step;
  display:flex;
  gap:.5em;
}
.method-text ol li::before{
  content:"Step " counter(step) ".";
  flex:0 0 auto;
  font-weight:bold;
}

/* Visuals-Spalte: Bilder untereinander, ohne Rahmen */
.method-images{
  display:flex;
  flex-direction:column;
  gap:var(--menu-gap);
}
.method-image{
  margin:0;
  aspect-ratio:4/3;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.method-image img,
.method-image video{ display:block; width:100%; height:100%; object-fit:cover; }

@media (max-width: 760px){
  /* Fixe Höhe + Scroll-nur-in-Visuals ist auf einer einspaltig
     gestapelten mobilen Seite keine sinnvolle UX — hier scrollt wieder
     die ganze Seite ganz normal. */
  .method-layout{ grid-template-columns:1fr; height:auto; overflow:visible; }
  .method-col{ height:auto; overflow:visible; }
  .method-col-visuals{ overflow-y:visible; }
  .method-layout .content-header{ position:static; }
}

/* =========================================================
   TYPE-MODUL — 3 Spalten (2fr/1fr/1fr = 50%/25%/25%):
     "Tool"      — Live-Schriftprobe in der Session-Schrift, mit Download,
                   Eingabefeld und Reglern für Größe/Spacing (Interaktion
                   siehe main.js: initTypeTool, da <script>-Tags in per
                   innerHTML geladenen Fragmenten nicht ausgeführt werden)
     "Info"      — Fließtext, wiederverwendet .method-text/-heading
   ========================================================= */

.type-layout{
  display:grid;
  /* Tool | Info im Verhältnis 2:1 (Specimen-Spalte entfernt) */
  grid-template-columns:2fr 1fr;
  gap:var(--menu-gap);
  align-items:start;
  height:calc(100vh - var(--menu-height, 40px));
  overflow:hidden;
}

.type-col{
  display:flex;
  flex-direction:column;
  height:100%;
  overflow:hidden;
}

.type-layout .content-header{
  z-index:10;
  margin-bottom:var(--menu-gap);
  flex:0 0 auto;
  /* Spaltenüberschriften in Menügröße und -höhe */
  font-size:var(--menu-font-size);
  height:var(--menu-item-height);
}

/* Trennlinien zwischen den Spalten über die volle Spaltenhöhe, wie bei
   .method-col — Tool ist die linke Außenspalte (kein eigener Header,
   daher kein border-Sonderfall nötig), Info die rechte Außenspalte. */
.type-col-tool{
  border-right:var(--border-w) solid var(--black);
}
.type-col-info{
  overflow-y:auto;
}
/* Zwischenüberschriften im Info-Text (Form-finding, Digitization) in
   Fließtextgröße statt 20px */
.type-col-info .method-text .method-text-heading{
  font-size:var(--content-font-size);
}
/* Spaltenüberschrift "Information" klebt oben im eigenen Scrollbereich;
   Info ist die rechte Außenspalte — dort keine Randlinien links/rechts. */
.type-col-info .content-header{
  position:sticky;
  top:0;
  border-left:none;
  border-right:none;
}

/* Kopfzeile: Versionsnummer oben links, Download-Link oben rechts. */
.type-tool-topbar{
  flex:0 0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px;
  font-size:var(--content-font-size);
  border-top:var(--border-w) solid var(--black);
}
.type-tool-topbar a{
  text-decoration:underline;
  cursor:pointer;
}

/* Bühne: Eingabefeld vertikal/horizontal zentriert, wächst mit der
   verbleibenden Höhe zwischen Kopf- und Reglerzeile. */
.type-tool-stage{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:15px;
  overflow:auto;
  text-align:center;
}

.type-tool-text{
  font-size:140px;
  line-height:1.2;
  outline:none;
  max-width:100%;
  word-break:break-word;
  cursor:text;
}
/* Jede Session-Type-Seite bekommt ihre eigene Schrift über eine
   Modifier-Klasse statt eines global fixen font-family, da jede Session
   eine eigene @font-face hat (siehe oben). */
.type-tool-text.font-session1{ font-family:"session1-Filled", sans-serif; }
.type-tool-text.font-session2{ font-family:"Session2", sans-serif; }
.type-tool-text.font-session4{ font-family:"Session4", sans-serif; }
.type-tool-text.font-session5{ font-family:"session5", sans-serif; }
.type-tool-text.font-session3{ font-family:"session3", sans-serif; }
.type-tool-text.font-parallel{ font-family:"session1-parallel", sans-serif; }
.type-tool-text.font-session1-outlined{ font-family:"session1-outlined", sans-serif; }

/* Filled/Outlined-Umschalter (Blind Strokes): reiner weiß/schwarz-Switch
   ohne Beschriftung — main.js (initTypeTool) tauscht bei jedem Umschalten
   die font-family-Klasse am Eingabefeld aus (siehe data-font-off/-on am
   Checkbox-Input). */
.type-tool-font-toggle{
  display:inline-flex;
  align-items:center;
  cursor:pointer;
}
.type-tool-font-toggle input{
  position:absolute;
  opacity:0;
  width:0;
  height:0;
}
.type-tool-font-toggle-track{
  display:inline-block;
  position:relative;
  width:36px;
  height:18px;
  border-radius:9px;
  border:var(--border-w) solid var(--white);
  background:var(--white);
  transition:background .2s ease;
}
.type-tool-font-toggle-thumb{
  position:absolute;
  top:1px;
  left:1px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--black);
  transition:transform .2s ease, background .2s ease;
}
.type-tool-font-toggle input:checked + .type-tool-font-toggle-track{
  background:var(--black);
}
.type-tool-font-toggle input:checked + .type-tool-font-toggle-track .type-tool-font-toggle-thumb{
  transform:translateX(18px);
  background:var(--white);
}
/* Sessions 3–5: reine Großbuchstaben-Schriften — getippter Text wird
   unabhängig von Groß-/Kleinschreibung beim Tippen immer in Versalien
   dargestellt (wirkt nur auf die Anzeige, nicht auf den gespeicherten
   Text — reicht hier aber aus). */
.type-tool-text.caps-only{ text-transform:uppercase; }
/* Sessions 1-2: umgekehrt — nur Kleinbuchstaben. */
.type-tool-text.lowercase-only{ text-transform:lowercase; }
/* Platzhalter im leeren contenteditable-Feld — main.js hält den Inhalt
   bei komplett gelöschtem Text auf innerHTML='' zurück (Browser lassen
   sonst oft ein leeres <br> zurück, das :empty verhindern würde). */
.type-tool-text:empty:before{
  content:attr(data-placeholder);
  color:#999;
}

.type-tool-controls{
  flex:0 0 auto;
  display:flex;
  border-top:var(--border-w) solid var(--black);
}
/* Ein Regler (Size/Spacing) — schwarzer Hintergrund/weiße Schrift wie
   .interview-nav-trigger, gleiche Höhe (--menu-item-height), beide
   nebeneinander statt untereinander. */
.type-tool-control-row{
  height:var(--menu-item-height);
  flex:1;
  display:flex;
  align-items:center;
  gap:15px;
  padding:0 15px;
  background:var(--black);
  color:var(--white);
  font-size:var(--content-font-size);
}
/* Trennlinie zwischen den Reglern/dem Schrift-Umschalter — vertikal, da
   sie nebeneinander stehen. Gilt automatisch für jede weitere Zelle in
   der Leiste (z.B. den Filled/Outlined-Umschalter vor Size). */
.type-tool-control-row + .type-tool-control-row{
  border-left:var(--border-w) solid var(--white);
}
/* Umschalter-Zelle (z.B. Filled/Outlined) — schmaler als Size/Spacing,
   da kein Label danebensteht, nur der Switch selbst, mittig zentriert. */
.type-tool-control-row.type-tool-control-row-toggle{
  flex:0 0 auto;
  justify-content:center;
}
.type-tool-control-row span{
  flex:0 0 auto;
}
/* Nativer Regler-Look (Betriebssystem-abhängig, dicke Spur + große
   Kapsel) ersetzt durch eine schmale weiße Linie + einen runden Punkt,
   passend zum reduzierten Look der restlichen Seite. */
.type-tool-control-row input[type="range"]{
  flex:1;
  -webkit-appearance:none;
  appearance:none;
  background:transparent;
  accent-color:var(--white);
  cursor:pointer;
}
.type-tool-control-row input[type="range"]::-webkit-slider-runnable-track{
  height:1px;
  background:var(--white);
}
.type-tool-control-row input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--white);
  margin-top:-4.5px;
}
.type-tool-control-row input[type="range"]::-moz-range-track{
  height:1px;
  background:var(--white);
  border:none;
}
.type-tool-control-row input[type="range"]::-moz-range-thumb{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--white);
  border:none;
}

@media (max-width: 760px){
  /* minmax(0,1fr) statt 1fr: eine einzelne 1fr-Spalte darf trotzdem nicht
     unter ihre Inhalts-Mindestbreite schrumpfen (Grid-Autoplacement-Regel,
     dieselbe Ursache wie beim Level-1-Menü) — die Regler nebeneinander in
     .type-tool-controls brauchten mehr als die Bildschirmbreite, wodurch
     die ganze Spalte (und mobile Browser dadurch die komplette Seite)
     über die Bildschirmbreite hinauswuchs. minmax(0,…) hebt die
     Mindestbreite auf, die Regler-Zeilen dürfen jetzt echt schrumpfen. */
  .type-layout{ grid-template-columns:minmax(0,1fr); height:auto; overflow:visible; }
  .type-col{ height:auto; overflow:visible; }
  .type-col-info{ overflow-y:visible; }
  .type-layout .content-header{ position:static; }
  .type-tool-control-row{ min-width:0; }
  .type-tool-control-row input[type="range"]{ min-width:0; }
}

/* =========================================================
   MANIFESTO-MODUL — 2 gleich große Spalten: links das Gespräch
   (nochmal unterteilt in Mira/Phuong, per .interview-grid.cols-2
   wiederverwendet), rechts der Manifesto-Fließtext. Die Navigation
   unten übernimmt .interview-nav 1:1, nur mit einer Breite, die
   main.js (initInterview) dynamisch auf die tatsächliche Breite der
   linken Spalte synct (--manifesto-left-width), statt der festen
   342px der Interview-Sidebar.

   Die rechte Spalte ist wie .interview-sidebar fixiert (eigener
   overflow-y:auto-Bereich, exakt von Menü- bis Fensterunterkante) statt
   mit der linken Spalte mitzuwachsen — dadurch scrollt sie nur so weit,
   wie ihr eigener Text reicht, unabhängig von der viel längeren linken
   Spalte, die ganz normal mit der Seite scrollt.
   ========================================================= */

.manifesto-layout{
  position:relative;
  /* Kopfzeilen (Mira/Phuong, Manifesto) in Menügröße —
     daher auch in Menühöhe statt der höheren Standard-Kopfzeile. Die
     sticky-Abstände rechnen mit derselben Variable und passen sich mit an. */
  --header-height:var(--menu-item-height);
}

.manifesto-left{
  /* 2/3 - 1/3-Aufteilung. */
  width:calc(66.6667% - var(--menu-gap) * 0.6667);
  padding-bottom:calc(var(--menu-item-height) + 20px);
  /* Trennlinie zur rechten Spalte — läuft automatisch über die volle
     Höhe der linken Spalte, da sie (im Gegensatz zu .manifesto-right)
     ganz normal im Textfluss steht und nicht fixiert ist. */
  border-right:var(--border-w) solid var(--black);
}

.manifesto-right{
  position:fixed;
  /* + var(--menu-gap): gleicher Abstand zum Menü wie bei .manifesto-left,
     die als normales Flow-Element durch den margin-bottom des Menüs
     automatisch 1 Gap tiefer startet als --menu-height allein angibt —
     sonst läge die eigene border-top der Kopfzeile direkt ohne Lücke am
     Menü an und wäre davon optisch kaum zu unterscheiden. */
  top:calc(var(--menu-height, 40px) + var(--menu-gap));
  right:0;
  bottom:0;
  /* 1/3 der Seitenbreite. */
  width:calc(33.3333% - var(--menu-gap) * 0.3333);
  overflow-y:auto;
  /* Invertiert: weißer Text/weiße Linien auf schwarzem Grund, im
     Gegensatz zur linken Spalte. */
  background:var(--black);
  color:var(--white);
  border-right:var(--border-w) solid var(--white);
}

/* Alle Spaltenüberschriften der Reflection-Seite (Mira/Phuong,
   "Manifesto of Collaboration") in Menügröße. */
.manifesto-right > .content-header,
.manifesto-left .interview-grid .content-header{
  font-size:var(--menu-font-size);
}
/* Titel bleibt beim Scrollen innerhalb der eigenen Spalte oben stehen,
   wie .method-col-visuals .content-header. Kein border-left/-top — die
   rechte Spalte soll komplett randlos bleiben. Eigener schwarzer
   Hintergrund, da die Basis-.content-header-Regel von einem weißen
   Hintergrund ausgeht. */
.manifesto-right > .content-header{
  position:sticky;
  top:0;
  background:var(--black);
  border-top:none;
  border-left:none;
  z-index:10;
}

/* Genau EINE Trennlinie an den äußeren Spaltenkanten statt doppelt
   gemalter Ränder: .manifesto-left/-right tragen ihre volle-Höhe-Border
   selbst, die Top-Level-.content-header rechts verzichtet daher auf eine
   eigene rechte Kante (wie .method-col-intro auf der Exercise-Seite).
   Mira behält ihre normale border-right (Basis-Regel) — einzige Quelle
   der kurzen Linie zwischen Mira/Phuong. Phuong sitzt an der äußeren
   Kante der linken Spalte, wo ihre eigene border-right sich mit
   .manifesto-lefts Border überlagern würde, daher hier ausgenommen. */
.manifesto-right > .content-header,
.manifesto-left .interview-grid > .content-header:nth-child(2){
  border-right:none;
}

/* Navigation unten links: gleiche Optik wie .interview-nav, aber Breite
   folgt der tatsächlich gerenderten Breite von .manifesto-left statt
   einer festen Sidebar-Breite. Muss VOR der Mobile-Media-Query stehen,
   damit deren .interview-nav{width:100%} auf schmalen Screens weiterhin
   gewinnt (gleiche Selektor-Spezifität, Reihenfolge im Stylesheet entscheidet). */
.manifesto-nav{
  width:var(--manifesto-left-width, 50vw);
}
/* "Navigation" in Menügröße wie die übrigen Kopfzeilen der Seite. */
.manifesto-nav .interview-nav-trigger{
  font-size:var(--menu-font-size);
}

/* Manifesto-Fließtext (Einleitung + Articles) in 28px, die
   "Article N"-Überschriften kleiner in Menügröße. */
.manifesto-text{
  /* Oben nur 1px: so steht die erste Zeile von "A collaboration is
     when…" (28px) mit ihrer Grundlinie auf derselben Linie wie "Mira"/
     "Phuong" in der Kopfzeile links (am Screenshot nachgemessen). */
  padding:1px 15px 40px;
  font-size:28px;
  line-height:1.25;
}
/* Abstand zwischen den Absätzen: 30px */
.manifesto-text .manifesto-intro{
  margin:0 0 30px;
}
.manifesto-article{
  margin:0 0 30px;
}
.manifesto-article:last-child{ margin-bottom:0; }
/* "Article N" in Fließtextgröße (16px), Article-Text bleibt 28px */
.manifesto-article h3{
  font-size:var(--content-font-size);
  line-height:1.2;
  font-weight:normal;
  font-family:var(--font-main);
  margin:0 0 .3em;
}
.manifesto-article p{ margin:0; }

/* "Step 1", "Step 2" … in den Exercise-Anleitungen: eigene Zeile in
   gleicher Größe wie die "Article N"-Überschriften des Manifests (16px). */
.step-label{
  display:block;
  font-size:var(--content-font-size);
  line-height:1.2;
  margin:0 0 .2em;
}

@media (max-width: 760px){
  /* Reihenfolge auf mobil gedreht: "Manifesto of Collaboration" zuerst,
     das Gespräch darunter — .manifesto-left steht im
     HTML zuerst, deshalb hier per flex-order getauscht statt im Markup. */
  .manifesto-layout{ display:flex; flex-direction:column; }
  .manifesto-left{ order:2; }
  .manifesto-right{ order:1; }

  /* Vertikale Trennlinie ergibt bei gestapeltem Layout keinen Sinn —
     .manifesto-right übernimmt die Trennung stattdessen per border-top. */
  .manifesto-left{ width:100%; border-right:none; }
  .manifesto-right{
    position:static;
    width:100%;
    height:auto;
    overflow-y:visible;
    border-right:none;
    /* Kein border-top nötig — der Wechsel von weißem zu schwarzem
       Hintergrund markiert die Grenze bereits selbst; eine weiße Linie
       wäre gegen die weiße .manifesto-left darüber unsichtbar. */
  }
  .manifesto-right > .content-header{
    position:static;
  }
  .manifesto-text{ padding-top:25px; }
  /* Lange Überschriften brechen auf schmalen Screens um — feste
     Kopfzeilenhöhe würde die zweite Zeile abschneiden, daher mitwachsen. */
  .manifesto-right > .content-header{
    height:auto;
    min-height:var(--header-height);
    padding-top:8px;
    padding-bottom:8px;
    line-height:1.15;
  }
  .manifesto-left .interview-grid{ grid-template-columns:1fr !important; }
  .manifesto-left .interview-grid .content-header{ display:none !important; }
  .manifesto-left .interview-turn{ grid-column:1 !important; }
}

/* =========================================================
   About-Seite: About-Text links (75%, normaler Textfluss),
   daneben rechts (25%, fixed wie .interview-sidebar) zwei
   Platzhalter-Bild+Text-Blöcke untereinander, getrennt durch
   eine Trennlinie. Gleiches Grundmuster wie .manifesto-layout,
   nur nicht invertiert (rechte Spalte bleibt weiß/schwarz wie
   der Rest der Seite, keine Vertauschung der Farben).
   ========================================================= */

.about-layout{
  position:relative;
}

/* Spalten getauscht: Porträts/Bios (.about-right) stehen links, fix wie
   die Interview-Sidebar (Trennlinie über deren border-right), aber so
   breit wie die rechte Spalte der Reflection-Seite (.manifesto-right,
   1/3); der About-Text (.about-left) rechts daneben im normalen
   Textfluss. Klassennamen bleiben aus Kompatibilität (Markup/Mobil-Regeln). */
.about-left{
  margin-left:calc(33.3333% + var(--menu-gap) * 0.6667);
  width:calc(66.6667% - var(--menu-gap) * 0.6667);
  padding-bottom:calc(var(--menu-item-height) + 20px);
  box-sizing:border-box;
}

.about-right{
  position:fixed;
  top:calc(var(--menu-height, 40px) + var(--menu-gap));
  left:0;
  bottom:0;
  width:calc(33.3333% - var(--menu-gap) * 0.3333);
  overflow-y:auto;
  border-right:var(--border-w) solid var(--black);
}

.about-text{
  /* oben nur 1px — gleicher Abstand zur Spaltenüberschrift wie bei
     "Manifesto of Collaboration" (.manifesto-text) */
  padding:1px 40px 25px 15px;
  /* 28px wie der Manifesto-Text der Reflection-Seite, gleicher
     Zeilenabstand */
  font-size:28px;
  line-height:1.25;
}
/* Spaltenüberschriften "About" und "Imprint" — in Menügröße und -höhe wie
   die Kopfzeilen der Reflection-Seite, bleibt beim Scrollen oben stehen.
   Links keine eigene Linie (die liefert die border-right der Bio-
   Spalte), rechts keine an der Seitenkante. */
.about-left > .content-header{
  height:var(--menu-item-height);
  font-size:var(--menu-font-size);
  border-left:none;
  border-right:none;
  position:sticky;
  top:calc(var(--menu-height, 40px) + var(--menu-gap));
  z-index:10;
}
/* Imprint-Überschrift und -Text in Fließtextgröße */
.about-left > .content-header.about-imprint-header{
  font-size:var(--content-font-size);
}
.about-text.about-imprint{
  font-size:var(--content-font-size);
  line-height:1.4;
}
/* Info-Seite links: die beiden Bio-Blöcke unter dem Porträt invertiert
   (weiß auf schwarz), Trennlinie dazwischen weiß. Der letzte Block wächst
   bis zum unteren Rand der fixen Spalte, damit darunter kein weißer
   Rest stehen bleibt. */
.about-right .interview-intro{
  min-height:100%;
  margin-bottom:0;
}
.about-right .interview-intro-text{
  background:var(--black);
  color:var(--white);
  border-top-color:var(--white);
}
/* Porträtfeld ebenfalls auf Schwarz (2px-Rahmen ums Bild), ohne Linie
   zum ersten Text darunter. */
.about-right .interview-portrait{
  background:var(--black);
}
.about-right .interview-portrait + .interview-intro-text{
  border-top:none;
}
.about-right .interview-intro-text:last-child{
  flex:1 0 auto;
}
.about-text p{ margin:0 0 1.2em; }
.about-text p:last-child{ margin-bottom:0; }

@media (max-width: 760px){
  .about-layout{ display:flex; flex-direction:column; }
  .about-left{ width:100%; margin-left:0; padding-bottom:0; }
  .about-right{
    position:static;
    width:100%;
    border-right:none;
    height:auto;
    overflow-y:visible;
  }
}

/* =========================================================
   Startseite: 2 Spalten, zusammen genau eine Bildschirmhöhe unter dem
   Menü. Links 6 Session-Namen in ihrer jeweiligen Output-Schrift, rechts
   der Einleitungstext. Die Schriftgrößen beider Spalten setzt initHome()
   (main.js) passend zur tatsächlichen Spaltengröße.
   ========================================================= */
.home-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  /* 2px Lücke zwischen den Spalten wie auf den anderen Seiten — unterbricht
     die Oberlinie direkt neben der senkrechten Trennlinie */
  column-gap:var(--menu-gap);
  height:calc(100vh - var(--menu-height, 40px) - var(--menu-gap));
}
/* Oberlinie 2px (Menü-Abstand) unter dem Menü, je Spalte eigene Linie —
   die Lücke zwischen den Spalten unterbricht sie direkt neben der
   senkrechten Trennlinie, wie auf den anderen Seiten. */
.home-sessions,
.home-text{
  border-top:var(--border-w) solid var(--black);
  box-sizing:border-box;
}
.home-sessions{
  display:grid;
  grid-template-rows:repeat(6, 1fr);
  border-right:var(--border-w) solid var(--black);
  min-height:0;
}
.home-session{
  position:relative;
  display:block;
  padding:8px 25px;
  border-bottom:var(--border-w) solid var(--black);
  overflow:hidden;
  min-height:0;
  white-space:nowrap;
  line-height:1;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
/* Position setzt fitHome() (main.js) anhand der sichtbaren Umrisse */
.home-session span{
  position:absolute;
  display:block;
}
/* Hover invertiert schwarz/weiß wie .home-word */
.home-session:hover{
  background:var(--black);
  color:var(--white);
}
.home-session:last-child{ border-bottom:none; }
.home-text{
  padding:15px 25px;
  overflow:hidden;
  min-height:0;
}
.home-text p{
  margin:0;
  line-height:1.15;
  letter-spacing:-0.02em;
}
/* Hover invertiert schwarz/weiß, gleiches Prinzip wie .interview-turn:hover */
.home-word{
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.home-word:hover{
  background:var(--black);
  color:var(--white);
}

/* Mobil untereinander: oben der Text in normaler Lesegröße, darunter die
   Session-Zeilen in fester Höhe (deren Oberlinie trennt beide). */
@media (max-width: 760px){
  .home-layout{ grid-template-columns:1fr; height:auto; }
  .home-text{ order:-1; }
  .home-sessions{ grid-template-rows:repeat(6, 90px); border-right:none; }
  .home-session{ padding:8px 15px; }
  .home-text{ padding:15px; }
  .home-text p{ font-size:26px; }
}


/* Bildschutz (siehe js/main.js): kein Herausziehen, kein Markieren,
   kein "Bild sichern"-Menü beim Lange-Drücken auf iOS. */
img, video, svg, picture {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}