@font-face {
  font-family: "ABC Favorit Mono Edu";
  src: url("fonts/ABCFavoritMonoEdu-Regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "ABC Favorit Mono Edu";
  src: url("fonts/ABCFavoritMonoEdu-Bold.otf") format("opentype");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "ABC Favorit Edu";
  src: url("fonts/ABCFavoritEdu-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "ABC Favorit Edu";
  src: url("fonts/ABCFavoritEdu-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Textmarkierung: schwarze Fläche, weisse Schrift */
::selection {
  background: #000000;
  color: #ffffff;
}
::-moz-selection {
  background: #000000;
  color: #ffffff;
}

html,
body {
  height: 100%;
  background: #ffffff;
  color: #000000;
  overflow: hidden; /* Gesamtseite fix; Inhalte scrollen intern im Panel */
}

/* ===========================================================
   MOBILE-HINWEIS — auf kleinen Screens: Seite ausblenden, zentrierten
   Hinweis zeigen, dahinter scrollt der Source-Code automatisch.
   =========================================================== */
.mobile-hinweis {
  display: none; /* nur per Media-Query auf Mobile sichtbar */
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #ffffff;
  overflow: hidden;
}
.mobile-code-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.mobile-code {
  margin: 0;
  padding: 1rem;
  font-family: "ABC Favorit Mono Edu", monospace;
  font-size: 0.7rem;
  line-height: 1.5;
  color: #cccccc; /* dezenter Code-Hintergrund */
  white-space: pre-wrap;
  word-break: break-word;
  will-change: transform;
}
.mobile-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.8rem;
  text-align: left;
  padding: 33vh 1rem 0; /* unten im oberen Drittel, nicht perfekt mittig */
  font-family: "ABC Favorit Edu", sans-serif;
  font-weight: 700;
}
.mobile-text .mark {
  font-size: 1.6rem;
  padding: 0 0.15em;
}
.mobile-text p {
  font-family: "ABC Favorit Mono Edu", monospace;
  font-weight: 400;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .mobile-hinweis {
    display: block;
  }
}

/* ===========================================================
   LANDING — frei platziertes Raster auf weissem Grund (Figma).
   Die öffnenden { der drei Titel fluchten auf einer Linie:
   --linie steuert diese x-Position zentral.
   =========================================================== */
.landing {
  --linie: 20%; /* gemeinsame Flucht-Linie der öffnenden { */
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 660px;
  overflow: hidden;
  font-family: "ABC Favorit Edu", sans-serif;
  font-weight: 500;
}

/* schwarze Markierung, weisse Schrift */
.mark {
  background: #000000;
  color: #ffffff;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Copyright auf der Landing: nur sichtbar, wenn ALLE Klassen geschlossen sind
   (.nichts-offen). Sitzt unten rechts an derselben Stelle wie der Copyright im
   geöffneten MyDearClass-Panel (gleiche Ränder: 2vh unten, 2vw rechts). */
.landing-copyright {
  position: absolute;
  right: 2vw;
  bottom: 2vh;
  margin: 0;
  z-index: 2; /* über der Mal-Fläche (z-index 1), unter den Titeln (10) */
  font-weight: 400;
  font-size: clamp(0.82rem, 0.95vw, 1.5rem);
  /* difference-Blend: invertiert gegen die gemalten Medien dahinter -> immer
     lesbar. Weiss als Grundfarbe (auf weissem Grund schwarz, auf dunklem hell). */
  color: #ffffff;
  mix-blend-mode: difference;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.landing.nichts-offen .landing-copyright {
  opacity: 1;
}

/* ----- Mal-Fläche: liegt über dem Viewport, unter den Titeln. Mausbewegung
   "malt" zufällige Medien (siehe malModus() im JS). Klicks gehen durch. ----- */
.mal-flaeche {
  position: fixed;
  inset: 0;
  z-index: 1; /* unter den Titeln (z-index 10), über dem weissen Grund */
  pointer-events: none;
  overflow: hidden;
}
/* Gemaltes Medium: zentriert an der Cursorposition (left/top per JS), ~8vw.
   Ohne Animation: erscheint und verschwindet sofort. */
.mal-item {
  position: absolute;
  width: 8vw;
  transform: translate(-50%, -50%);
}
.mal-item img,
.mal-item video {
  width: 100%;
  height: auto;
  display: block;
}

/* gemeinsamer Textblock */
.landing .block {
  font-size: clamp(0.82rem, 0.95vw, 1.5rem);
  line-height: 1.5;
}
.landing .block-titel {
  font-weight: 500; /* gleicher Schnitt wie der übrige Block-Text */
}
.landing .block p {
  white-space: nowrap;
}
/* Fragestellung + Claim brechen um (stehen in einem <div class="block"> mit <p>) */
.landing .fragestellung p,
.landing .block-claim p {
  white-space: normal;
}
.landing .block p:not(.block-titel) {
  transition: transform 0.2s ease;
}
.landing .block p:not(.block-titel):hover {
  transform: translateX(4px);
}

/* Grid-Container: füllt den ganzen Landing-Bereich,
   4 gleichbreite Spalten, zwei inhaltliche Zeilen + Copyright-Zeile */
.landing-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr 1fr;
  grid-template-rows: 1fr auto;
  align-content: end;
  align-items: start;
  padding: 0 2vw 2vh 2vw;
  gap: 4vh 2vw;
  pointer-events: none;
}
.landing-grid .block {
  pointer-events: auto;
}

/* Zeile 1: Concept | Fragestellung | Claim */
.block-concept   { grid-column: 1; grid-row: 1; }
.fragestellung   { grid-column: 2; grid-row: 1; align-self: start; max-width: 28ch; white-space: normal; }
.block-claim     { grid-column: 4; grid-row: 1; align-self: start; }

/* Zeile 2: Tools | Mentors | Fonts | Institut+Copyright */
.block-tools         { grid-column: 1; grid-row: 2; }
.block-mentors       { grid-column: 2; grid-row: 2; }
.block-fonts         { grid-column: 3; grid-row: 2; }
.block-copyright-wrap { grid-column: 4; grid-row: 2; align-self: stretch; font-weight: 500; display: flex; flex-direction: column; justify-content: space-between; }
.block-copyright     { font-weight: 400; }

.block-concept .block-luecke { margin-top: 1.25rem; }

/* ===========================================================
   DREI GLEICHWERTIGE TITEL.
   Geöffneter Titel rückt nach OBEN (Zeile 1), seine } an den rechten Rand,
   Inhalt füllt dazwischen. Die geschlossenen Titel stapeln sich UNTEN.
   Der Positionswechsel (--top) ist animiert.
   =========================================================== */
.titel {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--top, 6%);
  /* Titel-Leiste liegt IMMER über den offenen Panels. Sonst überdeckt ein
     offenes Panel (z. B. Process, left:0 bottom:0) die unteren Titel und
     schluckt deren Klicks -> SourceCode liesse sich nicht mehr öffnen. */
  z-index: 10;
  font-family: "ABC Favorit Edu", sans-serif;
  font-weight: 700;
  /* wächst dynamisch mit der Bildschirmbreite (auch auf grossen Screens);
     so bemessen, dass der längste Titel zwischen linkem Rand und --linie passt */
  font-size: clamp(1.22rem, 2.475vw, 3.906rem); /* 10% kleiner */
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: #000000;
  cursor: pointer;
  margin: 0;
  transition: top 1.1s cubic-bezier(0.22, 0.7, 0.2, 1);
}
/* Ist eine Klasse offen, werden die übrigen (geschlossenen) Titel ausgegraut.
   Sie bleiben klickbar (nur Farbe gedimmt). */
.landing.eine-offen .titel[aria-expanded="false"] {
  color: #b3b3b3;
  transition:
    top 1.1s cubic-bezier(0.22, 0.7, 0.2, 1),
    color 0.3s ease;
}
/* Direkter Wechsel von einer offenen Klasse zur nächsten: während dieser
   kurzen Schliess-Phase alle Titel grau halten, damit die bereits
   ausgegrauten nicht kurz schwarz aufblitzen. Nur die danach neu geöffnete
   Klasse wird wieder voll schwarz (via .eine-offen, .wechsel ist dann weg). */
.landing.wechsel .titel {
  color: #b3b3b3;
  transition: top 0.27s cubic-bezier(0.22, 0.7, 0.2, 1);
}
/* schnellere Schliess-Animation (2x) */
.titel.schliessen {
  transition: top 0.27s cubic-bezier(0.22, 0.7, 0.2, 1);
}

/* MyDearClass: fester Titel, nicht klickbar/aufklappbar. */
.titel-statisch {
  cursor: default;
}
.titel-statisch:hover .t-box,
.titel-statisch:hover .kl-zu {
  background: none;
  color: #000000;
}

/* Wort + öffnendes { als eine Einheit (.t-box): rechte Kante so, dass das {
   knapp vor der Flucht-Linie endet -> alle { fluchten untereinander. */
.t-box {
  position: absolute;
  right: calc(100% - var(--linie) + 0.18em);
  padding: 0.14em 0.18em 0.2em;
}
/* schliessende } direkt nach der Linie (geschlossen) bzw. am rechten Rand
   (offen). Linke Kante auf --linie. */
.kl-zu {
  position: absolute;
  left: calc(var(--linie) + 0.1em);
  padding: 0.14em 0.18em 0.2em;
  /* nur die Bewegung gleitet; Hintergrund/Farbe schalten sofort (kein Hover-Delay) */
  transition: left 1.0s cubic-bezier(0.22, 0.7, 0.2, 1);
}
.titel.schliessen .kl-zu {
  transition: left 0.25s cubic-bezier(0.22, 0.7, 0.2, 1);
}

/* sichtbarer Fokus für Tastatur-Bedienung */
.titel:focus-visible .t-box,
.titel:focus-visible .kl-zu {
  outline: 2px solid #000000;
  outline-offset: 3px;
}

/* Hover (geschlossen): Wort + { UND } als schwarze Box andeuten */
.titel:not([aria-expanded="true"]):hover .t-box,
.titel:not([aria-expanded="true"]):hover .kl-zu {
  background: #000000;
  color: #ffffff;
}

/* OFFEN: Wort + { werden schwarze Box (weisse Schrift),
   } wandert an den rechten Rand */
.titel[aria-expanded="true"] .t-box {
  background: #000000;
  color: #ffffff;
}
.titel[aria-expanded="true"] .kl-zu {
  /* } gleitet an den rechten Rand (left animierbar -> sanfte Bewegung) */
  left: calc(100% - 2vw - 1.1em);
  background: #000000;
  color: #ffffff;
}

/* ----- Klassen-Inhalt: füllt den Bereich zwischen { und der } oben rechts.
   Höchstens einer sichtbar (der des offenen Titels); sonst alle versteckt. ----- */
.klassen-inhalt {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* unter der Titel-Leiste (z-index:10), damit Titel klickbar bleiben */
  z-index: 1;
}
.klassen-inhalt > * {
  pointer-events: auto;
}
.klassen-inhalt[hidden] {
  display: none;
}
/* Platzhalter-Inhalt der anderen Klassen (MyThesis) — klappt direkt unter
   dem zugehörigen Titel aus (--inhalt-top vom JS gesetzt) */
.klasse-block {
  position: absolute;
  top: var(--inhalt-top, 30%);
  left: calc(var(--inhalt-left, 30%) + 3vw);
  right: var(--inhalt-right, 2vw);
  max-width: 52ch;
}
.klasse-titel {
  display: inline-block;
  font-family: "ABC Favorit Edu", sans-serif;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.05;
  background: #000000;
  color: #ffffff;
  padding: 0.05em 0.2em 0.12em;
  margin: 0.6rem 0 1.1rem;
}
.klasse-text {
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: 46ch;
}

/* ----- Alle Content-Panels: top/left/right per JS, grauer Hintergrund ----- */
.mdc-panel {
  position: absolute;
  bottom: 0;
  overflow: hidden;
  background: #f0f0f0; /* helles Grau (80% heller als die Ausgrauung) */
  font-family: "ABC Favorit Edu", sans-serif;
}

/* Info-Panel (MyDearClass): scrollbar, Grid-Layout.
   isolation:isolate macht das Panel zur Blend-Wurzel -> der difference-Text
   blendet gegen ALLES darunter im Panel (inkl. Video), statt nur gegen den
   eigenen Stacking-Kontext. */
.info-panel {
  overflow-y: auto;
  overflow-x: hidden;
  isolation: isolate;
}

/* Showreel als Panel-Hintergrund (ersetzt die graue Fläche). Füllt die
   gesamte Panelfläche; die Concept-Texte liegen darüber.
   KEIN z-index/position-Stacking, das den Blend von den Texten trennt:
   Video bleibt im normalen Fluss-Hintergrund des Panels, damit der
   difference-Text dagegen blenden kann. */
.info-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.info-panel .landing-grid-inner {
  position: relative;
  color: #ffffff;
}
/* Jeder Schrift-Block: Padding + Position als Kontext für die Test-Fläche. */
.info-panel .landing-grid-inner .block {
  position: relative;
  padding: 0.5em 0.7em;
}
/* Halbtransparentes Rechteck hinter jedem Block. Liegt im Block-Kontext
   (z-index:0) -> über dem Panel-Video (das im DOM davor steht), aber unter dem
   Block-Text. Der difference-Blend des Textes bleibt unberührt (liegt auf den
   <p>). */
.info-panel .landing-grid-inner .block::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgb(237 237 237 / 29%);
}
/* Block-Text über das Rechteck heben (sonst verdeckt das ::before ihn).
   WICHTIG: nur die <p> heben (sie tragen den difference-Blend), NICHT die
   verschachtelten Wrapper-<div> (z.B. .block-institut). Ein gehobenes Wrapper-
   <div> würde einen Stacking-Kontext bilden, der den difference-Blend der <p>
   darin gegen das Video kappt. Wrapper bleiben z-index:auto und transparent
   fürs Stacking, ihre <p> werden einzeln gehoben. */
.info-panel .landing-grid-inner .block p {
  position: relative;
  z-index: 1;
}
/* difference-Blend auf jeden einzelnen Text (<p>): invertiert direkt gegen das
   Showreel dahinter -> lesbar, unabhängig von der Bildhelligkeit.
   Der Blend liegt NUR auf <p> (nie auf den <div>-Block-Containern), sonst
   würde eine Container-Isolation die inneren <p> wieder einsperren.
   .landing-grid-inner > p  = die Blöcke, die SELBST ein <p> sind
                              (.fragestellung, .block-claim)
   .block p                 = die <p> innerhalb eines <div class="block">
                              (Tools/Mentors/Fonts/Institut/Copyright) */
.info-panel .landing-grid-inner > p,
.info-panel .landing-grid-inner .block p {
  mix-blend-mode: difference;
}
/* Links im Concept-Block: unsichtbar integriert -> erben Textfarbe (inkl.
   difference-Blend des <p>), kein Unterstrich. Nur klickbar. */
.info-panel .landing-grid-inner a {
  color: inherit;
  text-decoration: none;
}

/* GridView-Panel: nutzt die Process-Mechanik (Liste links + scrollbare Bühne
   rechts). Das Panel selbst scrollt nicht; nur die .methoden-buehne. */

/* dichtes, gleichmässiges Raster: alle Medien gleich gross, viele pro Zeile.
   Beginnt rechts der {-Flucht (--prozess-box-rechts), wie der Process-Inhalt. */
.gridview-grid {
  display: grid;
  /* --gv-min steuert die Kachelgrösse (small/medium/large per JS) */
  grid-template-columns: repeat(auto-fill, minmax(var(--gv-min, 180px), 1fr));
  gap: 2px;
  /* gleiche Innenabstände wie der Bild-Inhalt im Process-Panel, ohne Top
     (Inhalt schliesst oben bündig an). */
  padding: 0 2vw 2.5rem calc(var(--prozess-box-rechts, var(--linie)) + 3vw);
}
.gv-zelle {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3; /* einheitliche Kacheln, egal welches Seitenverhältnis */
  background: #e4e4e4;
}
.gv-zelle img,
.gv-zelle video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.gv-zelle:hover img,
.gv-zelle:hover video {
  transform: scale(1.06);
}
/* Laufnummer oben links (wie im Process-Grid) */
.gv-nr {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background: #000000;
  color: #ffffff;
  font-family: "ABC Favorit Mono Edu", monospace;
  font-size: 11px;
  line-height: 1;
  padding: 3px 5px;
}

/* Process-Panel: feste Höhe (top..bottom per JS). Innen: Liste links + Bühne
   rechts. Das Panel selbst scrollt nicht; nur die Bühne scrollt intern.
   Das Panel beginnt am linken Rand (wegen der Methoden-Liste), daher liegt
   die graue Fläche erst ab der {-Flucht (--prozess-box-rechts), wie bei
   MyDearClass innerhalb der { }. */
.process-panel {
  overflow: hidden;
  background: linear-gradient(
    to right,
    transparent 0,
    transparent var(--prozess-box-rechts, var(--linie)),
    #f0f0f0 var(--prozess-box-rechts, var(--linie))
  );
}

/* Grid innerhalb des Info-Panels: spiegelt das landing-grid */
.landing-grid-inner {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr 1fr;
  grid-template-rows: auto auto;
  align-content: end;             /* ganzer Block klebt unten */
  align-items: start;             /* innerhalb Zeile 1: Oberkanten fluchten */
  height: 100%;
  padding: 0 2vw 2vh 5vw;
  gap: 4vh 2vw;
}
.landing-grid-inner .block-concept   { grid-column: 1; grid-row: 1; }
.landing-grid-inner .fragestellung   { grid-column: 2; grid-row: 1; align-self: start; max-width: 28ch; white-space: normal; }
.landing-grid-inner .block-claim     { grid-column: 4; grid-row: 1; align-self: start; }
.landing-grid-inner .block-tools          { grid-column: 1; grid-row: 2; align-self: end; }
.landing-grid-inner .block-mentors        { grid-column: 2; grid-row: 2; align-self: end; }
.landing-grid-inner .block-fonts          { grid-column: 3; grid-row: 2; }
.landing-grid-inner .block-copyright-wrap { grid-column: 4; grid-row: 2; align-self: stretch; font-weight: 500; display: flex; flex-direction: column; justify-content: space-between; }

/* Panel füllt seine Fläche; relativ, damit Liste + Bühne darin liegen. */
.galerie.galerie-panel {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  border-top: none;
}

/* Methoden-Liste: feste Spalte ganz links, Zeilen immer sichtbar an fixer
   Position. Rechte Kante der Liste = rechte Box-Kante (--prozess-box-rechts). */
.methoden-liste {
  position: absolute;
  top: 0.6em;
  left: 0;
  width: var(--prozess-box-rechts, var(--linie));
  display: flex;
  flex-direction: column;
  gap: 1.2em;
  z-index: 2;
}

/* Bühne rechts: alle Bild-Inhalte liegen untereinander und werden durchgehend
   smooth gescrollt. Die aktive Methode bestimmt sich per Scrollspy. */
.methoden-buehne {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.methoden-buehne::-webkit-scrollbar {
  display: none;
}

/* Eine Methoden-Zeile als Flex-Box, immer Box-breit, rechtsbündig an der
   {-Flucht. Zwischen { und } liegt ein Spacer, dessen Breite animiert:
   geschlossen 0 (alles kompakt rechts), aktiv max (} gleitet zur {-Flucht,
   Name+{ zur linken Box-Kante). */
.methode {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.18em;
  align-self: flex-end;
  width: calc(
    var(--prozess-box-rechts, var(--linie)) - var(--prozess-box-links, 0px)
  );
  font-family: "ABC Favorit Edu", sans-serif;
  font-weight: 500;
  font-size: clamp(0.82rem, 0.95vw, 1.5rem);
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
}
/* Spacer zwischen { und }: will wachsen (flex-grow), aber max-width begrenzt.
   Animiert max-width: geschlossen 0 -> aktiv volle Box-Breite. */
.methode-spacer {
  flex: 1 1 0;
  max-width: 0;
  transition: max-width 0.5s cubic-bezier(0.22, 0.7, 0.2, 1);
}
.methode[aria-expanded="true"] .methode-spacer {
  max-width: 100%;
}

/* Hover (geschlossen): Farbe andeuten */
.methode:not([aria-expanded="true"]):hover .methode-name,
.methode:not([aria-expanded="true"]):hover .methode-kl-auf,
.methode:not([aria-expanded="true"]):hover .methode-kl-zu {
  background: #000;
  color: #fff;
}

/* Offen: ganze Zeile wird durchgehende schwarze Box (Name+{ links, } rechts,
   Spacer dazwischen ebenfalls schwarz) */
.methode[aria-expanded="true"] .methode-name,
.methode[aria-expanded="true"] .methode-kl-auf,
.methode[aria-expanded="true"] .methode-spacer,
.methode[aria-expanded="true"] .methode-kl-zu {
  background: #000;
  color: #fff;
}
.methode-name {
  padding: 0.1em 0.15em 0.15em;
}
.methode-kl-auf {
  padding: 0.1em 0.12em 0.15em;
}
.methode-kl-zu {
  padding: 0.1em 0.12em 0.15em;
}

/* fokus */
.methode:focus-visible .methode-name,
.methode:focus-visible .methode-kl-auf,
.methode:focus-visible .methode-kl-zu {
  outline: 2px solid #000;
  outline-offset: 2px;
}

/* Alle Inhalte liegen untereinander in der Bühne und sind sichtbar; man
   scrollt durchgehend smooth durch. Content beginnt rechts der Methoden-Liste
   (= rechte Box-Kante) + Padding -> selbe Fläche wie MyDearClass-Content.
   Mindesthöhe = Bühnenhöhe, damit jede Methode oben andocken kann. */
.methode-inhalt {
  min-height: 100%;
}
.methode-inhalt > .methode-inhalt-inner {
  padding: 0 2vw 2.5rem calc(var(--prozess-box-rechts, var(--linie)) + 3vw);
}

/* Text-Spalte: statisch im Fluss (kein sticky), bleibt im Panel */
.methode-text {
  position: static;
  top: auto;
  align-self: start;
  max-width: none;
  display: none; /* Monatstext vorerst ausgeblendet */
}

/* Bild-Spalte: voller Raum */
.methode-bilder {
  min-width: 0;
}

/* ----- SourceCode-Panel: backup sketch.js in CodeMirror, voll scrollbar -----
   Beginnt rechts von der {-Fluchtlinie, oben bündig mit dem SourceCode-Titel,
   zieht bis zum unteren Bildschirmrand (randabfallend). */
.code-panel {
  position: absolute;
  /* top/left/right werden per JS auf die exakten Box-Ecken gesetzt */
  bottom: 0;
  padding: 0 2vw 0 5vw;
  display: flex;
  flex-direction: column;
  background: #f0f0f0; /* gleicher grauer Grund wie das MyDearClass-Panel */
}
/* Engine-Beschreibung links der {-Flucht, unter dem SourceCode-Titel (gleiche
   Spalte/Breite wie die Methoden-Liste bei Process). top/left/width werden per
   JS auf die Box-Geometrie gesetzt; Stil wie der Blocksatz-Text. */
.code-sheet-text {
  position: absolute;
  z-index: 6;
  margin: 0;
  font-family: "ABC Favorit Edu", sans-serif;
  font-size: clamp(0.78rem, 0.85vw, 1.2rem);
  line-height: 1.5;
  text-align: justify;
  hyphens: auto;
}
/* der Editor füllt den Bereich und scrollt nur vertikal -> ganzer Code einsehbar */
.code-editor {
  flex: 1 1 auto;
  min-height: 0; /* erlaubt dem Flex-Kind zu schrumpfen -> interner Scroll */
}
.code-editor .CodeMirror {
  height: 100%;
  background: transparent;
  font-family: "ABC Favorit Mono Edu", monospace;
  font-size: 0.8rem;
  line-height: 1.5;
}
/* schlichtes, einfarbiges Theme: alles in einem ruhigen Grau,
   Kommentar-Token gleich gefärbt -> ganze Doku wirkt wie ein Kommentar */
.cm-s-mydearclass.CodeMirror,
.cm-s-mydearclass .CodeMirror-line,
.cm-s-mydearclass span.cm-comment,
.cm-s-mydearclass span.cm-meta,
.cm-s-mydearclass span.cm-string,
.cm-s-mydearclass span.cm-keyword,
.cm-s-mydearclass span.cm-variable,
.cm-s-mydearclass span.cm-variable-2,
.cm-s-mydearclass span.cm-def,
.cm-s-mydearclass span.cm-property,
.cm-s-mydearclass span.cm-number,
.cm-s-mydearclass span.cm-operator,
.cm-s-mydearclass span.cm-punctuation,
.cm-s-mydearclass span.cm-atom {
  color: #000000;
}
.cm-s-mydearclass .CodeMirror-selected {
  background: rgba(0, 0, 0, 0.06);
}
.cm-s-mydearclass .CodeMirror-cursor {
  border: none;
}
.cm-s-mydearclass .CodeMirror-gutters {
  border: none;
  background: transparent;
}
/* dezente Zeilennummern */
.cm-s-mydearclass .CodeMirror-linenumber {
  color: #cccccc;
}
/* keine Scrollbars (Zeilen brechen um; vertikal wird per Autoscroll bewegt) */
.code-editor .CodeMirror-hscrollbar,
.code-editor .CodeMirror-vscrollbar {
  display: none;
}
/* CodeMirror reserviert sonst Platz für die Scrollbar -> rechts ein Spalt */
.code-editor .CodeMirror-scroll {
  margin-right: 0;
  padding-right: 0;
  /* native vertikale Scrollbar des Scroll-Containers ausblenden (Autoscroll
     bewegt den Code, eine sichtbare Leiste ist nicht erwünscht). */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* alt. Edge/IE */
}
.code-editor .CodeMirror-scroll::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
  width: 0;
  height: 0;
}

/* blinkender Code-Cursor im schwarzen Titel-Block (weiss) */
.caret {
  display: inline-block;
  width: 0.5ch;
  height: 0.95em;
  margin-left: 0.18em;
  vertical-align: -0.08em;
  background: #ffffff;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* gemeinsame Entrance-Animation */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.mdc-panel,
.code-panel,
.klasse-block {
  opacity: 0;
}
.mdc-panel.eingeblendet,
.code-panel.eingeblendet,
.klasse-block.eingeblendet {
  animation: fade-in 0.1125s ease-out forwards;
}
/* WICHTIG: Das info-panel darf KEINE opacity < 1 / opacity-Animation tragen.
   Eine Group-Opacity erzeugt einen Compositing-Kontext, der den
   mix-blend-mode: difference der Concept-Texte gegen das Video bricht.
   Daher hier ohne opacity-Fade (das Panel erscheint ohnehin erst nach der
   Klammer-Animation). */
.info-panel,
.info-panel.eingeblendet {
  opacity: 1;
  animation: none;
}

.footer-copyright {
  font-size: 0.8rem;
}

/* ===========================================================
   PROZESS-GALERIE (unter der Landing)
   =========================================================== */

.galerie {
  font-family: "ABC Favorit Edu", sans-serif;
  font-weight: 500;
  padding: 2vw;
  /* deutliche Trennung von der Startseite oben */
  border-top: 1px solid #000000;
  padding-top: 4rem;
}

/* eine Zeile pro Monat: schmale Textspalte links, Bilder rechts.
   Text ist der ruhige Anker, Bilder bekommen mehr Raum aber treten
   beim Scrollen erst ein (siehe .reveal). */
.monat-row {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) 1.3fr;
  gap: 5vw;
  align-items: start;
  padding-top: 7rem;
}
.monat-row:first-child {
  padding-top: 1rem;
}

/* Prozesstext links: klebt beim Scrollen, damit die Spalte ruhig bleibt */
.monat-text {
  position: sticky;
  top: 2rem;
  align-self: start;
  font-size: 0.9rem;
  line-height: 1.65;
  max-width: 42ch;
}
.monat-text h2 {
  display: none; /* Dokument-Titel nicht je Monat wiederholen */
}
/* Mono-Kennzeile vor dem Monats-Titel (per JS gesetzt) */
.monat-index {
  display: block;
  font-family: "ABC Favorit Mono Edu", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b3b3b3;
  margin-bottom: 0.8rem;
}
/* Monats-Titel: gross, expressiv, schwarz markiert */
.monat-text h3 {
  display: inline;
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.15;
  background: #000000;
  color: #ffffff;
  padding: 0 0.1em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* Abstand nach dem Titel über ein Pseudo-Element, da h3 jetzt inline ist */
.monat-text h3 + * {
  margin-top: 1.75rem;
}
/* Zwischenüberschriften: kleine Mono-Labels mit Markierung */
.monat-text h4 {
  display: inline-block;
  font-family: "ABC Favorit Mono Edu", monospace;
  font-size: 0.76rem;
  font-weight: normal;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 2.25rem;
  margin-bottom: 0.6rem;
  background: #000000;
  color: #ffffff;
  padding: 1px 5px;
}
.monat-text p {
  margin-bottom: 0.9rem;
}
/* erster Absatz nach dem Titel als Lead, etwas grösser */
.monat-text h3 + p,
.monat-text h3 + * + p:first-of-type {
  font-size: 1rem;
}
.monat-text strong {
  font-weight: 500;
}
.monat-text ul {
  list-style: none;
  margin: 0 0 0.85rem 0;
  padding: 0;
}
.monat-text li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.4rem;
}
/* Mono-Aufzählungszeichen, passt zum Code-Thema */
.monat-text li::before {
  content: "//";
  position: absolute;
  left: 0;
  font-family: "ABC Favorit Mono Edu", monospace;
  color: #b3b3b3;
}

/* ein Dropdown pro Monat (rechte Spalte) */
.monat {
  border-top: 1px solid #000000;
}
.galerie .monat-row:last-child .monat {
  border-bottom: 1px solid #000000;
}

/* Klappkopf: Mono, dezent, im Stil der Startseite */
.monat-kopf {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.9rem 0;
  font-family: "ABC Favorit Mono Edu", monospace;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  text-align: left;
  text-transform: uppercase;
}
.monat-kopf .zeichen {
  font-family: "ABC Favorit Mono Edu", monospace;
  font-size: 0.95rem;
}
/* offen -> [ – ], zu -> [ + ] */
.monat-kopf[aria-expanded="true"] .zeichen::after {
  content: "[ – ]";
}
.monat-kopf[aria-expanded="false"] .zeichen::after {
  content: "[ + ]";
}

/* Inhalt zu, bis geöffnet */
.monat-inhalt {
  display: none;
  padding-bottom: 2rem;
}
.monat-inhalt.offen {
  display: block;
}

/* mehrere Kategorien pro Monat -> Sections mit Abstand */
.kategorie {
  padding-top: 1.5rem;
}
.kategorie + .kategorie {
  margin-top: 2.5rem;
}
/* Kategorie-Titel: kleines Mono-Label mit Markierung */
.kategorie-titel {
  display: inline-block;
  font-family: "ABC Favorit Mono Edu", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: #000000;
  color: #ffffff;
  padding: 1px 4px;
  margin-bottom: 0.9rem;
}

/* 12-Spalten-Raster, regelmässig und luftig (grosse gaps).
   normal = span 6 (1/2) -> zwei gleich grosse Bilder pro Zeile.
   gross  = span 9 (3/4) -> jedes dritte Bild, allein in seiner Zeile.
   grid-auto-flow:row hält die Reihenfolge. */
.bilder-grid {
  --reihen-gap: 120px; /* fixer vertikaler Abstand zwischen den Zeilen */
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--reihen-gap) 3vw;
  align-items: start;
}
.bild-wrap {
  position: relative;
  overflow: hidden;
}
/* Regelmässiges Raster: jedes Bild span 6 (zwei nebeneinander, gleich gross).
   Jedes dritte Bild ist 1.5x so gross (span 9) und steht allein in der Zeile. */
.bild-wrap.normal { grid-column: span 6; }
.bild-wrap.gross  { grid-column: span 9; }
/* leere Zelle füllt den verbleibenden Platz der Zeile auf */
.bilder-grid .luecke {
  visibility: hidden;
}
.luecke.l-3 { grid-column: span 3; }
.luecke.l-6 { grid-column: span 6; }
.luecke.l-9 { grid-column: span 9; }

/* Text-Absatz: 1/4 Zelle breit (span 3), beide gleich breit. Zwei
   nebeneinander ergeben ein zweispaltiges Layout (1/4 + 1/4 = halbe Breite).
   Sitzt als sauberer Block im Grid (wie ein Bild), keine Überlappung. */
.text-absatz {
  grid-column: span 3;
  align-self: start;
  font-size: clamp(0.78rem, 0.85vw, 1.2rem);
  line-height: 1.5;
  margin: 0;
  padding: 0;
  text-indent: 1.6em; /* Erstzeilen-Einzug pro Absatz */
  text-align: justify; /* Blocksatz */
  hyphens: auto; /* Silbentrennung verhindert grosse Wortlücken im Blocksatz */
}
.text-absatz strong { font-weight: 700; }

/* Titel über einem Text-Absatz: markiert (.mark) und auf eigener Zeile, direkt
   über dem Fliesstext (kein Abstand dazwischen). Kein Erstzeilen-Einzug, linker
   Rand bündig zum Absatz. */
.text-titel {
  display: table; /* Block-Box, aber nur so breit wie der Text (mark-Optik) */
  text-indent: 0;
  text-align: left;
  margin-bottom: 0;
}

.bilder-grid img,
.bilder-grid video {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* Hover: Bild zoomt minimal heran. */
.bild-wrap:hover img,
.bild-wrap:hover video {
  transform: scale(1.04);
}

/* Scroll-Reveal: Bilder "fallen ein" -> von weiter oben/kleiner herab,
   mit leichtem Überschwung (back-easing). */
.reveal {
  opacity: 0;
  transform: translateY(-26px) scale(0.94);
  transition:
    opacity 0.55s ease-out,
    transform 0.7s cubic-bezier(0.22, 1.2, 0.36, 1);
  transition-delay: var(--delay, 0ms);
}
.reveal.sichtbar {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* Prozesstext blendet sanft ein (kein transform, da position:sticky) */
.monat-text {
  opacity: 0;
  transition: opacity 0.7s ease-out;
}
.monat-text.sichtbar {
  opacity: 1;
}
/* Methoden-Text ist immer sichtbar (Fade kommt vom Eltern-Container) */
.methode-text {
  opacity: 1 !important;
}

/* Bildnummern-Overlay (temporär), erscheint deutlicher beim Hover */
.bild-nr {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background: #000000;
  color: #ffffff;
  font-family: "ABC Favorit Mono Edu", monospace;
  font-size: 12px;
  line-height: 1;
  padding: 3px 5px;
}

/* ===========================================================
   SEITEN-FOOTER (ganz unten, invertiert)
   =========================================================== */

.seiten-footer {
  background: #000000;
  color: #ffffff;
  margin-top: 6rem;
  padding: 4rem 2vw 2.5rem;
  font-family: "ABC Favorit Edu", sans-serif;
}
.seiten-footer-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.footer-zeile {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-brand {
  /* invertierte Markierung: weisser Grund, schwarze Schrift */
  font-size: 1.6rem;
  background: #ffffff;
  color: #000000;
  padding: 0 0.15em;
}

.footer-meta {
  font-family: "ABC Favorit Mono Edu", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.85;
}
.blink {
  animation: blink 1s steps(1) infinite;
}

/* ASCII-Klasse als Code-Gimmick */
.footer-ascii {
  font-family: "ABC Favorit Mono Edu", monospace;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #8a8a8a;
  margin: 2.5rem 0;
  white-space: pre;
  overflow-x: auto;
}

.footer-zeile-bottom {
  font-family: "ABC Favorit Mono Edu", monospace;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  border-top: 1px solid #333333;
  padding-top: 1.2rem;
}

.top-link {
  background: none;
  border: none;
  color: #ffffff;
  cursor: pointer;
  font: inherit;
  letter-spacing: 0.03em;
  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
  opacity: 0.85;
}
.top-link:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.seiten-footer .footer-copyright {
  margin-top: 1.5rem;
  font-family: "ABC Favorit Mono Edu", monospace;
  font-size: 0.72rem;
  opacity: 0.6;
}

/* Bewegungsreduktion respektieren */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .reveal,
  .monat-text {
    opacity: 1 !important;
    transform: none !important;
  }
}