/* AI Week Düsseldorf — Design-System v1.0 (Stand 22.09.2026)
   Dokumentschicht für Booklet, Partnerunterlagen und Blätter der Woche.
   Basis: KI-Campus-Design-System v1.1 (04-marketing/projekte/ki-campus/design-system.md)
   und dessen One-Pager (04-marketing/projekte/ki-campus/artifacts/onepager-ki-campus.html).
   Regeln und Begründungen: styleguide-ai-week-duesseldorf.md im selben Ordner.
   Nur hell. Alle Seitenstile hängen an .seite, damit die Datei in fremde Seiten eingebunden werden kann.
   Schriften: <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600;800&family=Source+Sans+3:wght@400;600;700&display=swap"> */

:root {
  color-scheme: light;

  /* Farben aus KI Campus v1.1 — Werte nicht ändern, nur hier referenzieren */
  --grund: #F8F7F4;      /* Seitengrund, dominiert */
  --panel: #FCFBF9;      /* helle Flächen: Kacheln, Deko-Panels */
  --ink: #252930;        /* Anthrazit: trägt alle Information */
  --tuerkis: #6CC9D1;    /* nur Flächen, nie Schrift */
  --lavendel: #ABA1E2;   /* nur Flächen, nie Schrift */
  --lila: #9535FF;       /* AI-Hub-Lila: ausschließlich die kurze Linie */

  /* Neutrale Abstufungen aus dem KI-Campus-One-Pager */
  --ink-2: #5E626B;      /* Nebentext, Legenden */
  --ink-3: #7B818A;      /* Fußzeile, Bildnachweis */
  --haarlinie: #E3E1DB;  /* Kachelrand, Trennlinien in Listen */
  --umgebung: #ECEAE4;   /* nur Bildschirm: Fläche hinter den Seiten */
  --schatten: 0 2px 10px rgba(37, 41, 48, .07);

  --display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --text: "Source Sans 3", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;

  /* Seite: quer 16:9, wie Accelerator-Booklet und Golf-Post-Vorlage */
  --seite-b: 1280px;
  --seite-h: 720px;
  --rand-x: 88px;        /* ≈ 7 % der Breite, linke Textkante wie KI-Campus-Cover */
  --rand-o: 60px;
  --rand-u: 40px;
  --spalte-gap: 24px;
}

/* ---------- Seite ---------- */

@page { size: 1280px 720px; margin: 0; }

.seite {
  box-sizing: border-box;
  width: var(--seite-b);
  height: var(--seite-h);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: var(--rand-o) var(--rand-x) var(--rand-u);
  background: var(--grund);
  color: var(--ink);
  font-family: var(--text);
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.seite *, .seite *::before, .seite *::after { box-sizing: border-box; }
.seite p { margin: 0; max-width: 60ch; }
.seite > .inhalt { flex: 1; min-height: 0; position: relative; z-index: 1; }

.booklet { margin: 0; background: var(--umgebung); padding-block: 28px; }
.booklet .seite { margin: 0 auto 28px; box-shadow: var(--schatten); }
@media print {
  html, body { margin: 0 !important; padding: 0 !important; background: none !important; }
  .booklet { background: none; padding: 0; }
  .booklet .seite { margin: 0; box-shadow: none; break-after: page; zoom: 1 !important; }
}

/* ---------- Raster: 12 Spalten im Satzspiegel (1104 px) ---------- */

.raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalte-gap); row-gap: 28px; }
.sp-3 { grid-column: span 3; } .sp-4 { grid-column: span 4; } .sp-5 { grid-column: span 5; }
.sp-6 { grid-column: span 6; } .sp-7 { grid-column: span 7; } .sp-8 { grid-column: span 8; }
.sp-12 { grid-column: 1 / -1; }

/* ---------- Typografie (Größen gelten für die 1280-px-Seite) ---------- */

.kennzeichnung {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.seite h1, .seite h2, .seite h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--ink);
}
.seite h1 { font-size: 112px; line-height: .9; letter-spacing: -.012em; }
.seite h2 { font-size: 46px; line-height: .95; letter-spacing: -.01em; }
.seite h3 { font-size: 19px; line-height: 1.1; letter-spacing: -.004em; }
.seite .lead { font-size: 24px; line-height: 1.38; max-width: 40ch; }
.seite .klein { font-size: 14px; line-height: 1.4; color: var(--ink-2); }

/* Die Linie: AI-Hub-Lila, kurz, immer unter Titel oder Wortmarke, nie allein */
.linie { width: 96px; height: 5px; background: var(--lila); margin-top: 22px; }
.linie.kurz { width: 56px; height: 4px; margin-top: 16px; }

/* ---------- Kopf und Fuß ---------- */

.kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 34px; position: relative; z-index: 1; }
.fuss {
  margin-top: auto;
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--ink-3);
  position: relative;
  z-index: 1;
}
.fuss .nr { font-family: var(--display); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.fuss .rechts { display: flex; gap: 20px; }

/* ---------- Signatur: die Wochenleiste ---------- */
/* Fünf getrennte Quadrate für Mo–Fr. Farbe trägt keine Schrift, das Kürzel steht darunter. */

.wochenleiste { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; }
.wochenleiste li {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  font-family: var(--display); font-weight: 600; font-size: 11px; line-height: 1;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
.wochenleiste li::before {
  content: ""; width: 22px; height: 22px;
  background: var(--panel); box-shadow: inset 0 0 0 1px var(--haarlinie);
}
.wochenleiste li.aktiv { color: var(--ink); }
.wochenleiste li.aktiv::before { background: var(--tuerkis); box-shadow: none; }
/* Ganze Woche (Titel, Überblick): alle fünf gefüllt, im Wechsel */
.wochenleiste.voll li { color: var(--ink); }
.wochenleiste.voll li::before { background: var(--tuerkis); box-shadow: none; }
.wochenleiste.voll li:nth-child(even)::before { background: var(--lavendel); }
.wochenleiste.gross { gap: 14px; }
.wochenleiste.gross li { font-size: 13px; gap: 9px; }
.wochenleiste.gross li::before { width: 40px; height: 40px; }

/* ---------- Deko: Flächenstaffelung (nur Titel, Kapitel, Rückseite) ---------- */

.deko { position: absolute; top: 0; right: 0; bottom: 0; width: 380px; pointer-events: none; z-index: 0; }
.deko i { position: absolute; display: block; }
.deko .t { right: 0; top: 0; width: 150px; height: 47%; background: var(--tuerkis); }
.deko .l { right: 0; bottom: 0; width: 150px; height: 47%; background: var(--lavendel); }
.deko .p1 { right: 96px; top: 13%; width: 200px; height: 44%; background: var(--panel); box-shadow: var(--schatten); }
.deko .p2 { right: 130px; bottom: 9%; width: 150px; height: 34%; background: var(--panel); box-shadow: var(--schatten); }

/* Absenderplakette: helles Panel mit den Logos, ersetzt auf Titel und Rückseite die leeren Panels */
.deko.marke .p1, .deko.marke .p2 { display: none; }
.plakette {
  position: absolute; right: 56px; top: 20%; width: 272px;
  background: var(--panel); box-shadow: var(--schatten);
  padding: 30px 30px 32px; display: grid; gap: 20px; z-index: 1;
}
.plakette img, .plakette svg { display: block; width: 100%; height: auto; }
.plakette hr { border: 0; border-top: 1px solid var(--haarlinie); margin: 0; width: 100%; }

/* ---------- Bausteine ---------- */

/* Fakten: Kennzahlen als Kacheln mit Farbquadrat in der Ecke (Regel Lorenz, 13.09.2026) */
.fakten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.fakten.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fakt { position: relative; overflow: hidden; background: var(--panel); border: 1px solid var(--haarlinie); padding: 20px 20px 22px; }
.fakt::after { content: ""; position: absolute; right: -6px; top: -6px; width: 32px; height: 32px; background: var(--tuerkis); }
.fakt:nth-child(even)::after { background: var(--lavendel); }
.fakt .zahl { font-family: var(--display); font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: -.015em; padding-right: 30px; font-variant-numeric: tabular-nums; }
.fakt .zahl small { font-size: 16px; font-weight: 600; letter-spacing: .02em; margin-left: 4px; }
.fakt .was { font-size: 15px; line-height: 1.35; color: var(--ink-2); margin-top: 10px; }

/* Kacheln: Gruppen, Rubriken, Angebote — keine Streifen, keine senkrechten Trennstriche */
.kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.kacheln.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kacheln.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kacheln.fuenf { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.kacheln.fuenf .kachel { padding: 20px 18px 22px; }
/* Wochenübersicht: je Tag eine Kachel, der Abend unter einer Haarlinie */
.kachel .abend { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--haarlinie); }
.kachel .abend .kennzeichnung { margin-bottom: 6px; }
.kachel { position: relative; overflow: hidden; background: var(--panel); border: 1px solid var(--haarlinie); padding: 24px 24px 26px; }
.kachel::after { content: ""; position: absolute; right: -6px; top: -6px; width: 44px; height: 44px; background: var(--tuerkis); }
.kachel:nth-child(even)::after { background: var(--lavendel); }
.kachel h3 { padding-right: 44px; }
.kachel p { font-size: 16px; line-height: 1.45; margin-top: 12px; max-width: none; }
.kachel .kennzeichnung { margin-bottom: 10px; }

/* Anker: eine große Zahl mit Erklärung zwischen zwei Anthrazit-Linien */
.anker { display: grid; grid-template-columns: auto 1fr; gap: 0 28px; align-items: center; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding-block: 20px; }
.anker .gross { font-family: var(--display); font-weight: 800; font-size: 64px; line-height: .9; letter-spacing: -.02em; white-space: nowrap; }
.anker .gross small { display: block; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin-top: 10px; }
.anker p { font-size: 17px; max-width: none; }

/* Punkte: Aufzählung mit kurzem Türkis-Balken */
.punkte { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 60ch; }
.punkte li { position: relative; padding-left: 24px; font-size: 17px; line-height: 1.45; }
.punkte li::before { content: ""; position: absolute; left: 0; top: .62em; width: 12px; height: 4px; background: var(--tuerkis); }

/* Ablauf: Zeit links, Inhalt rechts, Haarlinien dazwischen */
.ablauf { display: grid; grid-template-columns: 132px 1fr; margin: 0; }
.ablauf dt, .ablauf dd { margin: 0; padding-block: 12px; border-top: 1px solid var(--haarlinie); }
.ablauf dt { font-family: var(--display); font-weight: 600; font-size: 14px; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.ablauf dd { font-size: 16px; line-height: 1.4; }
.ablauf dd b { font-weight: 700; }
.ablauf dt:last-of-type, .ablauf dd:last-of-type { border-bottom: 1px solid var(--haarlinie); }

/* Kontakt: Rückseite und Aufforderung, hell zwischen zwei Anthrazit-Linien wie der Anker. Keine dunklen Flächen */
.kontakt { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding-block: 26px 28px; }
.kontakt .adresse { font-family: var(--display); font-weight: 800; font-size: 34px; line-height: 1.15; letter-spacing: -.005em; margin-top: 16px; }
.kontakt .adresse + p { margin-top: 10px; }

/* Fotos aus dem DAM: unbearbeitet, randabfallend, Nachweis in der Fußzeile */
.foto { margin: 0; position: relative; overflow: hidden; background: var(--haarlinie); }
.foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.foto.rechts { position: absolute; top: 0; right: 0; bottom: 0; width: 46%; z-index: 0; }
.foto.oben { position: absolute; top: 0; left: 0; right: 0; height: 52%; z-index: 0; }
/* Fotos tragen keine Schrift: neben einem Foto rechts bleibt die Fußzeile in der Textspalte */
.seite:has(.foto.rechts) .fuss { width: calc(var(--seite-b) * .54 - var(--rand-x) - var(--spalte-gap)); }

/* Absenderzeile: wer die Woche veranstaltet */
.absender { font-size: 14px; line-height: 1.45; color: var(--ink-2); max-width: 46ch; }
.absender b { color: var(--ink); font-weight: 600; }