/* =========================================================================
   GRUNDLAYOUT
   Die Zeichenfläche füllt das ganze Fenster, das Panel liegt rechts darüber.
   ========================================================================= */

* {
  box-sizing: border-box;
}

/* Elemente mit dem Attribut "hidden" wirklich verstecken
   (sonst überschreibt z. B. "display: flex" das Verstecken) */
[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden; /* keine Scrollbalken, die Map füllt das Fenster */
  font-family: system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  color: #1d1d1f;
}

#canvas-container canvas {
  display: block; /* verhindert eine kleine Lücke unter dem Canvas */
}


/* =========================================================================
   BEDIENHINWEIS (unten links)
   -------------------------------------------------------------------------
   Das Regler-Panel ist am 20.09.2026 komplett entfallen: Alle Werte stehen
   jetzt fest im Code (FESTE_EINSTELLUNGEN in sketch.js). Geblieben ist nur
   dieser kleine graue Hinweis -- sonst wuerde niemand merken, dass der
   RECHTSKLICK die Verbindungen zeigt. Er blendet nach ein paar Sekunden aus
   und kommt bei Mausbewegung kurz zurueck (siehe sketch.js).
   ========================================================================= */

/* -------------------------------------------------------------------------
   SEITENTITEL OBEN LINKS
   Schrift wie die Kopfzeile der Detailansicht (IBM Plex Sans Condensed),
   nur größer. Zum Ändern reicht die eine Zeile font-size.
   ------------------------------------------------------------------------- */
#karten-titel {
  position: fixed;
  left: 22px;
  top: 16px;
  margin: 0;
  /* Dieselbe Schrift wie die großen Kurs-Überschriften in der
     Detailansicht (.nd-titel): IBM Plex Mono, Großbuchstaben, Buchstaben
     etwas enger zusammengerückt. */
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 400;
  font-size: 30px;           /* <- hier die Größe einstellen */
  letter-spacing: -0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  color: #fff;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;      /* faengt keine Klicks ab */
  transition: opacity 0.4s ease;
  z-index: 5;
}

/* Bei offener Detailansicht ausblenden: links bleibt nur ein schmaler
   Streifen Karte übrig, dort würde der Titel angeschnitten. */
body:has(#detailansicht.offen) #karten-titel {
  opacity: 0;
}


/* -------------------------------------------------------------------------
   HINWEIS FÜR KLEINE BILDSCHIRME
   Normalerweise unsichtbar. Er erscheint nur auf schmalen Bildschirmen und
   auf Touch-Geräten -- dort funktioniert die Karte nicht (kein Rechtsklick,
   kein Hover, zu wenig Rechenleistung für die Punktwolken).
   Die Abfrage unten steht GENAUSO in sketch.js (MOBIL_ABFRAGE); wird sie
   hier geändert, dort bitte mit ändern.
   ------------------------------------------------------------------------- */
#mobil-hinweis {
  display: none;
}

@media (max-width: 900px), (pointer: coarse) and (max-width: 1280px) {
  #mobil-hinweis {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 100;              /* über allem, auch über der Einleitung */
    align-items: center;
    justify-content: center;
    padding: 32px;
    background: #000;
    color: #fff;
    font-family: "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;
    text-align: center;
  }

  .mh-inhalt {
    max-width: 30em;
  }

  .mh-titel {
    margin: 0 0 16px;
    font-size: 24px;
    line-height: 1.2;
  }

  .mh-text {
    margin: 0;
    font-size: 17px;
    line-height: 1.5;
    color: #b9b9b9;
  }
}


#bedien-hinweis {
  position: fixed;
  left: 22px;
  bottom: 20px;
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.01em;
  color: #6a6a6a;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;   /* faengt keine Klicks ab */
  opacity: 0;
  transition: opacity 1s ease;
  z-index: 5;
}

#bedien-hinweis.sichtbar {
  opacity: 1;
}


/* =========================================================================
   EINLEITUNG ALS ERSTE EBENE
   -------------------------------------------------------------------------
   Die Einleitung liegt als eigene Seite (Ordner einleitung/) in einem
   Rahmen ueber der Karte. Die Karte laedt in der Zeit schon im Hintergrund
   fertig. Am Ende wird der Rahmen langsam durchsichtig -- dadurch kommt die
   fertige Karte weich durch, ohne Umweg ueber Schwarz und ohne Ladepause.
   ========================================================================= */

#einleitung-rahmen {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
  z-index: 50;
  opacity: 1;
  /* --ueberblenden steht in sketch.js (UEBERBLENDEN_DAUER) */
  transition: opacity var(--ueberblenden, 1.2s) ease-in-out;
}

/* letzter Schritt: Einleitung wird durchsichtig, Karte kommt durch */
#einleitung-rahmen.verblasst {
  opacity: 0;
  pointer-events: none;
}


/* =========================================================================
   DETAILANSICHT: SEITENLEISTE (gilt für beide Designs)
   -------------------------------------------------------------------------
   Liegt rechts außerhalb des Bildschirms (translateX 100 %) und fährt beim
   Öffnen (Klasse .offen) herein. Links bleibt die Map sichtbar.
   ========================================================================= */

#detailansicht {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  /* Breite: Fensterbreite minus 360 px Platz für die Map,
     aber mindestens 560 px und höchstens 1400 px
     (bei 1440 px Bildschirm = 1080 px; schmaler hat nicht funktioniert) */
  --leisten-breite: min(100vw, clamp(560px, 100vw - 360px, 1400px));
  width: var(--leisten-breite);
  background: #fff;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.35);
  z-index: 20;

  /* zu: rechts rausgeschoben und unsichtbar */
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s 0.6s;
}

/* offen: hereingefahren */
#detailansicht.offen {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s;
}

/* Der Inhalt scrollt, die Leiste selbst bleibt stehen.
   container-type: Maße im Inneren können sich mit "cqi" auf die Breite
   dieser Leiste beziehen (1cqi = 1 % der Leistenbreite). */
#detail-inhalt {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  container-type: inline-size;
}

/* Schließen-Knopf: Lisas X (assets/schliessen.svg), oben links in der
   Leiste. Bleibt beim Scrollen stehen. Größe und Lage aus Figma
   (94 px groß, 15 px von links, 18 px von oben bei 1734 px Breite). */
#detail-schliessen {
  position: absolute;
  top: calc(var(--leisten-breite) * 18 / 1734);
  left: calc(var(--leisten-breite) * 15 / 1734);
  z-index: 5;
  /* etwas kleiner als in Figma (94 px), damit mehr Luft zum Inhalt bleibt */
  width: max(32px, var(--leisten-breite) * 64 / 1734);
  height: max(32px, var(--leisten-breite) * 64 / 1734);
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

#detail-schliessen img {
  display: block;
  width: 100%;
  height: 100%;
  background: none !important;      /* nicht grau wie Bild-Platzhalter */
}

#detail-schliessen:hover {
  opacity: 0.7;
}

/* Im alten (weißen) Design: X schwarz statt weiß */
#detailansicht:not(.neues-design) #detail-schliessen img {
  filter: invert(1);
}


/* =========================================================================
   DETAILANSICHT: ALTES DESIGN (alle Kurse ohne neuesDesign)
   ========================================================================= */

#detailansicht:not(.neues-design) #detail-inhalt {
  padding: 72px 40px 40px;
  font-size: 15px;
  line-height: 1.55;
}

#detailansicht:not(.neues-design) h2 {
  margin: 0 0 4px;
  font-size: 26px;
}

#detailansicht:not(.neues-design) .werte {
  margin: 0 0 22px;
  color: #86868b;
  font-size: 13px;
}

#detailansicht:not(.neues-design) h3 {
  margin: 24px 0 6px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kursfarbe, #86868b);
}

#detailansicht:not(.neues-design) p,
#detailansicht:not(.neues-design) ul {
  margin: 0;
}

/* Bilder des Endprodukts nebeneinander */
.detail-bilder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.detail-bilder img,
.detail-bilder .bild-platzhalter {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
}

.bild-platzhalter {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eeeae0;
  color: #9a968c;
  font-size: 13px;
}


/* =========================================================================
   DETAILANSICHT: NEUES DESIGN (Figma-Frame "Final")
   -------------------------------------------------------------------------
   Figma-Frame ist 1734 px breit. Alle Maße sind in "cqi" umgerechnet
   (Prozent der Leistenbreite), damit das Layout bei jeder Breite so
   aussieht wie in Figma: Figma-px ÷ 1734 × 100 = cqi.
   ========================================================================= */

/* --- Schriften (liegen in assets/schriften, funktionieren auch offline) --- */
@font-face {
  font-family: "IBM Plex Mono";
  font-weight: 400;
  src: url("assets/schriften/IBMPlexMono-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans Condensed";
  font-weight: 400;
  src: url("assets/schriften/IBMPlexSansCondensed-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans Condensed";
  font-weight: 500;
  src: url("assets/schriften/IBMPlexSansCondensed-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans Condensed";
  font-weight: 600;
  src: url("assets/schriften/IBMPlexSansCondensed-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans Condensed";
  font-weight: 700;
  src: url("assets/schriften/IBMPlexSansCondensed-Bold.woff2") format("woff2");
}

#detailansicht.neues-design {
  background: #000;
  color: #fff;
}

#detailansicht.neues-design #detail-inhalt {
  scrollbar-color: #444 #000;
}

/* ---------------------------------------------------------------------
   STELLSCHRAUBEN: ABSTÄNDE UND SCHRIFTGRÖSSEN
   Nur diese wenigen Abstände werden benutzt, damit alles einheitlich ist.
   In Klammern: Wert im 1734 px breiten Figma-Frame.
   --------------------------------------------------------------------- */
#detail-inhalt > .nd-kopfzeile,
#detail-inhalt > section,
#detail-inhalt > h2 {
  /* Wachsen mit der Leistenbreite, werden aber (wie die Schrift) nie
     kleiner als der erste Wert in clamp() */
  --rand: clamp(24px, 5.5cqi, 95px);        /* (95 px)  Seitenrand links und rechts */
  --abstand-s: clamp(12px, 1.4cqi, 24px);   /* (24 px)  Überschrift → Text */
  --abstand-m: clamp(24px, 3.1cqi, 54px);   /* (54 px)  zwischen Textblöcken und Spalten */
  --abstand-l: clamp(56px, 9.05cqi, 157px); /* (157 px) zwischen den großen Abschnitten */

  /* Schriftgrößen wachsen mit der Breite wie in Figma, werden aber nie
     kleiner als der erste Wert (Lesbarkeit) */
  /* Tipp: Zum Verkleinern z. B. calc(clamp(…) - 3px) schreiben
     (war kurz ausprobiert, Lisa hat es wieder zurückgenommen) */
  --schrift-zitat: clamp(30px, 3.63cqi, 63px);        /* Figma 63 px */
  --schrift-ueberschrift: clamp(20px, 1.9cqi, 33px);  /* Figma 33 px */
  --schrift-text: clamp(15px, 1.33cqi, 23px);         /* Figma 23 px */

  font-family: "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;
  font-size: var(--schrift-text);
  line-height: 1.3;
}

.neues-design p,
.neues-design h3,
.neues-design h4,
.neues-design ul {
  margin: 0;
}

.neues-design img,
.neues-design .bild-platzhalter {
  display: block;
  width: 100%;
  object-fit: cover;
  background: #222;
  color: #777;
}

/* --- Überschriften-Stile, die mehrfach vorkommen --- */
.nd-ueberschrift {                   /* "Reflexion", "Mitgebrachte Skills" */
  font-size: var(--schrift-ueberschrift);
  font-weight: 600;
  margin-bottom: var(--abstand-s) !important;
}

.nd-klein-ueberschrift {             /* "Was ist noch offen?", Abschlussarbeit */
  font-size: var(--schrift-text);
  font-weight: 600;
  margin-bottom: var(--abstand-s) !important;
}


/* --- 1. KOPFZEILE ------------------------------------------------------ */
.nd-kopfzeile {
  display: flex;
  justify-content: space-between;
  gap: var(--abstand-m);
  padding: var(--abstand-m) var(--rand) 0;   /* oben Abstand M (Inhalt beginnt weiter oben) */
  /* Kurs-Art in normaler Textgröße (siehe --schrift-text). Der Incom-Link
     rechts daneben ist am 23.09.2026 entfallen. */
}

.nd-kopfzeile a {
  color: inherit;
  text-underline-offset: 0.15em;
}


/* --- 2. TITEL -----------------------------------------------------------
   Größe kommt aus JavaScript (--titel-groesse, siehe passeTitelAn()).
   Bricht zwischen Wörtern um; die Zeilen stehen dicht (Zeilenhöhe 1).
   (#detail-inhalt davor, damit die allgemeine Textgröße oben nicht gewinnt) */
#detail-inhalt > .nd-titel {
  margin: var(--abstand-m) 0 0;
  /* Der Titel liegt ÜBER dem Headerbild (Lisa, 23.09.2026): Der Einstiegs-
     block rutscht ein paar Pixel nach oben über die letzte Titelzeile, und
     vorher hat das Bild die Unterkante der Buchstaben abgeschnitten.
     Mit eigener Ebene (position/z-index) bleibt der Kursname ganz lesbar --
     die Stelle bleibt genau dieselbe. */
  position: relative;
  z-index: 1;
  padding: 0 0.9cqi;                 /* (15 px) fast bis an den Rand, wie in Figma */
  font-family: "IBM Plex Mono", monospace;
  font-weight: 400;
  font-size: var(--titel-groesse, 19.3cqi);
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  text-align: center;
  overflow-wrap: normal;
}


/* --- 3. EINSTIEG: Beschreibung, Bilder, Zitat ----------------------------
   Ein Raster aus 7 Spalten (Breiten aus Figma), damit sich die Bilder so
   überlappen können wie im Entwurf:
     Rand | Beschreibung | Lücke | großes Bild | Überlappung | kleines Bild | Rand
   Der ganze Block rutscht nach oben über die LETZTE Titelzeile
   (negativer Abstand = 35 % der Titel-Schriftgröße). Bricht der Titel auf
   zwei Zeilen um, liegt das Bild also über der zweiten Zeile. */
.nd-einstieg {
  display: grid;
  /* Beschreibung mindestens 160 px breit, das große Bild nimmt den Rest */
  grid-template-columns: 5.5cqi max(15.8cqi, 160px) 1.9cqi 1fr 4.3cqi 15.7cqi 7.6cqi;
  /* Wird die Beschreibung sehr lang, wächst nur die untere Zeile (Zitat),
     das Zitat bleibt direkt unter dem großen Bild */
  grid-template-rows: auto 1fr;
  margin-top: calc(var(--titel-groesse, 19.3cqi) * -0.35);
  position: relative;               /* liegt über dem Titel */
}

/* Untertitel zum Kursnamen: rechts neben dem großen Bild, linksbündig,
   mit Abstand M zum Bild (Figma: 52 px) */
.nd-untertitel {
  grid-column: 6 / 8;
  grid-row: 1;
  align-self: start;
  /* Abstand S unter der Unterkante der Titel-Buchstaben:
     Die Grundlinie des Titels liegt 0,225 × Titelgröße unter der Oberkante
     dieses Rasters (Titel-Zeilenhöhe 1, Überlappung 0,35) */
  margin-top: calc(var(--titel-groesse, 19.3cqi) * 0.225 + var(--abstand-s)) !important;
  padding: 0 0.9cqi 0 var(--abstand-m);
  text-align: left;
  font-size: var(--schrift-ueberschrift);
}

.nd-bild-gross {
  grid-column: 4 / 6;
  grid-row: 1;
  aspect-ratio: 927 / 760;
  position: relative;
  top: 5px;                         /* 5 px tiefer (nur das Bild, alles andere bleibt stehen) */
}

.nd-beschreibung {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  margin-top: 8.4cqi !important;    /* (146 px) beginnt unterhalb der Titel-Überlappung */
}

.nd-bild-klein {
  grid-column: 5 / 7;
  grid-row: 1 / 3;
  align-self: start;
  margin-top: 27.9cqi;              /* (483 px) unter dem oberen Bildrand */
  aspect-ratio: 348 / 395;
  position: relative;
  z-index: 1;
}

.nd-zitat {
  grid-column: 3 / 5;
  grid-row: 2;
  display: flex;
  gap: var(--abstand-m);
  margin-top: -1.7cqi;              /* (29 px) Zeichen ragt leicht ins Bild */
  position: relative;
  z-index: 2;
}

/* Die Anführungszeichen aus Lisas SVG. Als "Maske" benutzt, damit sie
   automatisch die Kategorie-Farbe bekommen. */
.nd-zitat-zeichen {
  flex: none;
  align-self: flex-start;           /* bleibt oben an der Textbox, rutscht bei langem Text nicht mit */
  width: 12.1cqi;                   /* (210 px) */
  aspect-ratio: 200 / 185;
  background: var(--kursfarbe, #52b9e0);
  -webkit-mask: url("assets/anfuehrungszeichen.svg") center / contain no-repeat;
  mask: url("assets/anfuehrungszeichen.svg") center / contain no-repeat;
}

.nd-zitat-text {
  margin-top: 4.6cqi !important;    /* (80 px) */
  font-size: var(--schrift-zitat);
  line-height: 1.15;
}

.nd-zitat-untertitel {
  margin-top: var(--abstand-s) !important;
}


/* --- 4. ABSCHLUSSARBEIT ------------------------------------------------ */
.nd-abschluss {
  display: grid;
  grid-template-columns: 34.5cqi 48.8cqi;   /* (598 px Bild | 846 px Text) */
  gap: var(--abstand-m);
  align-items: start;
  margin-top: var(--abstand-l);
  padding: 0 var(--rand);
}

/* Das Bild der Abschlussarbeit behält sein EIGENES Seitenverhältnis, auch
   hochkant: Lisa möchte die Arbeit immer ganz zeigen, nicht angeschnitten.
   Die Spaltenbreite und der Abstand zum Text bleiben dabei gleich -- das
   Bild beginnt oben auf Höhe des Textes und wird nach unten hin einfach
   länger. (Ohne diese Regel würde "object-fit: cover" weiter oben das Bild
   in ein festes Querformat schneiden.) */
img.nd-bild-abschluss {
  height: auto;
  object-fit: fill;
}

/* Der graue Platzhalter (wenn ein Kurs noch kein Bild hat) hat kein eigenes
   Seitenverhältnis und braucht deshalb weiterhin das Querformat aus Figma,
   sonst wäre er 0 Pixel hoch. */
.nd-bild-abschluss.bild-platzhalter {
  aspect-ratio: 598 / 409;
}


/* --- 5. SKILLS: farbiger Streifen ----------------------------------------- */
.nd-skills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--abstand-m);
  margin-top: var(--abstand-l);
  /* oben/unten Abstand M (schmalerer Streifen), seitlich doppelter Rand */
  padding: var(--abstand-m) calc(2 * var(--rand));
  background: var(--kursfarbe, #52b9e0);
  color: #fffdfa;
}

.nd-skills ul {
  padding-left: 1.5em;
}

.nd-skills li + li {
  margin-top: calc(var(--abstand-s) / 2);
}


/* --- 6. REFLEXION + PUNKTWOLKE ------------------------------------------
   - Die Wolke steht rechts im Textfluss ("float") und beginnt etwas ÜBER
     der Überschrift "Reflexion" (--wolke-hoeher).
   - Die Texte haben KEINE feste Breite: Für den Text ist die Wolke ein Kreis
     ("shape-outside"), und die Zeilen reichen immer bis --wolke-abstand vor
     die Wolke. Dadurch ist der Abstand Text ↔ Wolke bei allen Kursen gleich
     -- bei einer kleinen Wolke wird der Text also breiter.
   - Ihr Mittelpunkt liegt --wolke-versatz rechts HINTER der Kante, sodass
     vom leeren Kreis in der Mitte nur ein Stück zu sehen ist (setzt JS).
   - Unten ragt sie über das Seitenende hinaus und wird abgeschnitten.
   ========================================================================= */
.nd-reflexion {
  --wolke-radius: 55cqi;            /* Größe der größtmöglichen Wolke: Radius in % der Leistenbreite */
  --wolke-abstand: calc(2 * var(--abstand-m));  /* Abstand Wolke ↔ Text (bei allen Kursen gleich) */
  --wolke-hoeher: var(--abstand-m); /* so weit beginnt die Wolke über der Überschrift "Reflexion" */
  --wolke-versatz: 0px;             /* setzt zeichneDetailWolke() in detailansicht.js */
  position: relative;
  /* "clip" schneidet die Wolke unten ab, ohne dass der Abschnitt dafür
     höher wird (anders als "hidden") */
  overflow: clip;
  /* oben etwas weniger Abstand -- die Überschrift rutscht dafür per
     margin-top wieder auf ihren Platz, die Wolke aber bleibt oben */
  padding: calc(var(--abstand-l) - var(--wolke-hoeher)) 0 var(--abstand-l) var(--rand);  /* rechts 0: Wolke reicht bis an die Kante */
}

.nd-reflexion > .nd-ueberschrift {
  margin-top: var(--wolke-hoeher);
}

.nd-reflexion > :not(canvas) {
  position: relative;               /* Text liegt über der Wolke */
  margin-right: var(--rand);        /* unterhalb der Wolke nicht bis an die Kante */
}

.nd-reflexion p + h4 {
  margin-top: var(--abstand-m) !important;
}

#detail-wolke {
  float: right;
  width: calc(var(--wolke-radius) - var(--wolke-versatz));  /* sichtbarer Teil */
  height: calc(2 * var(--wolke-radius));                    /* ganze Wolke */
  /* Platz links neben der Leinwand, damit der Abstand zum Text auch bei der
     größten Wolke nicht abgeschnitten wird */
  margin-left: var(--wolke-abstand);
  /* Kreis für den Textfluss = tatsächliche Größe dieser Wolke, oben
     angehängt (Werte setzt zeichneDetailWolke() in detailansicht.js) */
  shape-outside: circle(var(--wolke-form-radius, var(--wolke-radius))
                        at calc(100% + var(--wolke-versatz)) var(--wolke-mitte-y, 50%));
  shape-margin: var(--wolke-abstand);
}