/* ============================================================
   connect_ed / unconf_ed  ·  Variante V2 „Bauplan"
   Statischer Nachbau der Framer-Seite /v2
   Design-Quelle: DESIGN-v2.md (Tokens, Type-Ramp, Spacing, Regeln)

   Aufbau dieser Datei
   01 Tokens
   02 Reset und Blatt
   03 Typografie (Rollen aus dem Design-System)
   04 Blattfelder (Sektionsrahmen, Fadenkreuze, Index)
   05 Navigation
   06 Hero
   07 Schriftfeld
   08 Sektionen 01 bis 06
   09 Tasten
   10 Footer
   11 Breakpoints Tablet (810 bis 1199) und Phone (unter 810)
   12 Reduzierte Bewegung
   ============================================================ */

/* ---------- 01 Tokens ------------------------------------- */
:root {
  /* Farben. Amber, Blau und Signal erscheinen ausschliesslich als
     Quadrat-Knoten, Pixel-Pfeil oder Mono-Label, nie als Flaeche. */
  --nacht:        #111110;
  --flaeche:      #1A1918;
  --bone:         #F0EBE0;
  --bone-soft:    rgba(240, 235, 224, 0.62);
  --linie:        rgba(240, 235, 224, 0.20);
  --linie-stark:  rgba(240, 235, 224, 0.45);
  --papier:       #EFEAE0;
  --ink:          #111110;
  --ink-soft:     rgba(17, 17, 16, 0.62);
  --linie-ink:    rgba(17, 17, 16, 0.22);
  --amber:        #F2B233;  /* Bildung */
  --blau:         #3A7BFF;  /* Tech */
  --signal:       #FF4F1F;  /* Treffpunkt, Aktion */

  /* Spacing-Leiter, Fibonacci */
  --f1:  8px;
  --f2: 13px;
  --f3: 21px;
  --f4: 34px;
  --f5: 55px;
  --f6: 89px;

  /* Blatt */
  --blatt: 1200px;
  --rand: var(--f4);      /* Seitenrand im Blattfeld */
  --radius: 2px;          /* einzige Rundung der Welt */

  /* Goldener Schnitt als Konstruktion: 1200 / phi */
  --phi-links: 742px;
  --phi-rechts: 458px;

  /* Fünf Stimmen, fünf Aufgaben. Sie werden nie vertauscht. */
  --schrift-pixel: "Geist Pixel", ui-monospace, monospace;      /* Wortmarke, Display */
  --schrift-mono:  "Geist Mono", ui-monospace, Menlo, monospace; /* Statement, Heading */
  --schrift-sans:  "Bricolage Grotesque", Arial, sans-serif;     /* Lead, Fließtext */
  --schrift-label: "Azeret Mono", ui-monospace, Menlo, monospace;/* Label, Meta */
  --schrift-index: "Doto", ui-monospace, monospace;              /* Indizes */
}

/* ---------- 02 Reset und Blatt ---------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--nacht);
  color: var(--bone);
  font-family: var(--schrift-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Das Blatt: alle Felder zentriert auf 1200, der Grund darunter
   bleibt Nacht in voller Breite. */
.blatt {
  max-width: var(--blatt);
  margin: 0 auto;
}

img, svg { display: block; }

a { color: inherit; }

/* ---------- 03 Typografie --------------------------------- */
/* Geist Pixel ist die Marke, Geist Mono spricht in Titeln,
   Bricolage im Fließtext, Azeret Mono beschriftet den Plan,
   Doto nummeriert. Alle Rollen laufen im regulären Schnitt. */

.t-display, .t-wortmarke { font-family: var(--schrift-pixel); margin: 0; font-weight: 400; }
.t-statement, .t-heading { font-family: var(--schrift-mono);  margin: 0; font-weight: 400; }
.t-lead, .t-body         { font-family: var(--schrift-sans);  margin: 0; font-weight: 400; }
.t-label, .t-meta        { font-family: var(--schrift-label); margin: 0; font-weight: 400; }
.t-index                 { font-family: var(--schrift-index); margin: 0; font-weight: 400; }

.t-display   { font-size: 100px; line-height: 0.95; letter-spacing: -0.03em; }
.t-statement { font-size: 72px;  line-height: 1.02; letter-spacing: -0.025em; }
.t-heading   { font-size: 44px;  line-height: 1.08; letter-spacing: -0.02em; }
.t-lead      { font-size: 28px;  line-height: 1.25; letter-spacing: -0.01em; }
.t-body      { font-size: 17px;  line-height: 1.6;  letter-spacing: 0; }
.t-wortmarke { font-size: 20px;  line-height: 1;    letter-spacing: -0.02em; }
.t-label     { font-size: 13px;  line-height: 1.3;  letter-spacing: 0.14em; text-transform: uppercase; }
.t-meta      { font-size: 13px;  line-height: 1.5;  letter-spacing: 0.02em; }
.t-index     { font-size: 44px;  line-height: 1;    letter-spacing: 0.04em;
               font-variation-settings: "ROND" 0; }   /* eckige Punkte, keine runden */

/* Farbvarianten der Rollen */
.is-soft   { color: var(--bone-soft); }
.is-signal { color: var(--signal); }
.is-ink    { color: var(--ink); }
.is-ink-soft { color: var(--ink-soft); }

/* Absatzabstand des Body-Presets */
.textstapel { display: flex; flex-direction: column; gap: 14px; }

/* Links: eine Regel fuer Nav und Footer, eine fuer Text */
.nav-link { text-decoration: none; color: var(--bone-soft); transition: color 0.2s ease; }
.nav-link:hover, .nav-link:focus-visible { color: var(--bone); }

.text-link {
  color: var(--bone); text-decoration: underline;
  text-underline-offset: 0.22em; text-decoration-thickness: 1px;
  transition: color 0.2s ease;
}
.text-link:hover { color: var(--signal); }


/* Piktogramme: die Groesse kommt vom Platz, den sie bekommen. */
.sym { display: block; flex: none; }

/* Der Pfeil einer Taste traegt die Textfarbe und schreitet erst beim
   Hover. Kein Scale, kein Versatz. */
.taste .sym rect { fill: currentColor; }
.taste:hover .sym rect { fill: var(--signal); }
.taste .sym g g { animation-play-state: paused; }
.taste:hover .sym g g { animation-play-state: running; }

/* ---------- 04 Blattfelder -------------------------------- */
/* Jede Sektion ist ein Blattfeld: Haarlinie links, rechts, unten,
   Fadenkreuz oben links und unten rechts, Doto-Index oben rechts. */
.feld {
  position: relative;
  scroll-margin-top: 55px;   /* die Sticky-Nav ist 55 px hoch */
  border-left: 1px solid var(--linie);
  border-right: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}
.feld--papier {
  background: var(--papier);
  color: var(--ink);
  border-color: var(--linie-ink);
}

/* Fadenkreuze, 11 px, in zwei Ecken */
.marke {
  position: absolute;
  width: 11px; height: 11px;
  pointer-events: none;
}
.marke::before, .marke::after {
  content: ""; position: absolute; background: var(--linie-stark);
}
.marke::before { left: 0; top: 5px; width: 11px; height: 1px; }
.marke::after  { left: 5px; top: 0; width: 1px; height: 11px; }
.marke--tl { left: 13px; top: 13px; }
.marke--br { right: 13px; bottom: 13px; }
.feld--papier .marke::before, .feld--papier .marke::after { background: var(--linie-ink); }

/* Register-Index */
.index {
  position: absolute; right: var(--f4); top: var(--f4);
  pointer-events: none;
}

/* Sichtbare Konstruktionslinie bei 742 */
.phi-linie {
  position: absolute; left: var(--phi-links); top: 0; bottom: 0;
  width: 1px; background: var(--linie); pointer-events: none;
}

/* ---------- 05 Navigation --------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 20;
  height: 55px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--f4);
  background: var(--nacht);
  border-left: 1px solid var(--linie);
  border-right: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}
.nav-marke {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--bone);
}
.nav-knoten { width: 8px; height: 8px; background: var(--signal); }
.nav-links { display: flex; align-items: center; gap: 28px; }

/* ---------- 06 Hero --------------------------------------- */
/* Feste Hoehe statt 100vh, damit die Geometrie in Pixeln pinnbar
   ist: die Fahrbahn der Bruecke liegt exakt auf der
   Konstruktionslinie y 502. */
.hero {
  position: relative;
  height: 830px;
  overflow: hidden;
}
.hero__raster { position: absolute; inset: 0; }

.hero__annotation {
  position: absolute; left: var(--f4); top: 78px;
  display: flex; align-items: center; gap: 10px;
}
.hero__annotation .sym { width: 14px; height: 14px; }

.hero__bruecke {
  position: absolute; left: 71px; top: 118px;
  width: 600px; height: 600px;
}
.hero__pfeil { position: absolute; top: 478px; width: 48px; height: 48px; }
.hero__pfeil--links { left: var(--f4); }
.hero__pfeil--rechts { right: var(--f4); }

.hero__schriftfeld {
  position: absolute; left: 776px; top: 78px; width: 390px;
  background: var(--nacht);
}

/* Titelband: Oberkante auf der Konstruktionslinie y 612 */
.titelband {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 218px;
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: var(--f4) var(--f4) 41px var(--f4);
  border-top: 1px solid var(--linie-stark);
  background: var(--nacht);
}
.titelband__titel { display: flex; flex-direction: column; gap: var(--f2); }
.titelband__tasten { display: flex; align-items: center; gap: var(--f2); }

/* ---------- 07 Schriftfeld -------------------------------- */
/* Der Plankopf der Zeichnung. */
.schriftfeld { display: flex; flex-direction: column; }
.schriftfeld__kopf {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--linie);
}
.schriftfeld__zeile {
  display: flex; gap: var(--f2);
  padding: 11px 0;
  border-bottom: 1px solid var(--linie);
}
.schriftfeld__feld { width: 165px; flex: none; }
.schriftfeld__wert { flex: 1; }

/* Eigene Sektion auf Tablet und Phone, im Desktop ausgeblendet */
.schriftfeld-sektion { display: none; padding: var(--f4) var(--f3); }

/* ---------- 08 Sektionen ---------------------------------- */

/* 01 Warum: ungleiches Paar 742 | 458 */
.s01 { display: flex; align-items: flex-start; }
.s01__links {
  width: var(--phi-links); flex: none;
  display: flex; flex-direction: column; gap: var(--f4);
  padding: var(--f6) var(--f4);
  border-right: 1px solid var(--linie);
}
.s01__rechts {
  flex: 1;
  display: flex; flex-direction: column; gap: var(--f4);
  padding: var(--f6) var(--f4);
}
.abbildung { display: flex; flex-direction: column; gap: var(--f2); }

/* 02 Wer am Tisch sitzt: gleiches Paar 600 | 600, nur Haarlinie */
.s02__kopf {
  display: flex; flex-direction: column; gap: var(--f4);
  padding: var(--f6) var(--f4) var(--f5);
  border-bottom: 1px solid var(--linie);
}
.s02__paar { display: flex; align-items: stretch; }
.s02__seite {
  flex: 1;
  display: flex; flex-direction: column; gap: var(--f3);
  padding: var(--f5) var(--f4);
}
.s02__seite + .s02__seite { border-left: 1px solid var(--linie); }
.s02__schluss {
  padding: var(--f5) var(--f4) var(--f6);
  border-top: 1px solid var(--linie);
}

/* 03 Verantwortung: die einzige Papier-Inversion der Seite */
.s03__kopf {
  display: flex; flex-direction: column; gap: var(--f4);
  padding: var(--f6) var(--f4) var(--f5);
}
.s03__zeile {
  display: flex; align-items: flex-start; gap: var(--f4);
  padding: 0 var(--f4) var(--f6);
}
.karte-auflager {
  width: 674px; flex: none;
  display: flex; flex-direction: column; align-items: center; gap: var(--f3);
  padding: var(--f4);
  background: var(--nacht);   /* auf Papier kehrt sich die Ordnung um */
  color: var(--bone);
  border-radius: var(--radius);
}
.s03__text {
  flex: 1;
  padding-left: var(--f3);
  border-left: 1px solid var(--linie-ink);
}

/* 04 Der Abend: Ablauf-Raster aus fuenf Zellen */
.s04__kopf {
  display: flex; flex-direction: column; gap: var(--f4);
  padding: var(--f6) var(--f4) var(--f5);
}
.raster {
  display: flex; align-items: stretch;
  border-top: 1px solid var(--linie-stark);
  border-bottom: 1px solid var(--linie-stark);
}
.zelle {
  flex: 1;
  display: flex; flex-direction: column; gap: var(--f2);
  padding: var(--f3) var(--f3) var(--f4);
}
.zelle + .zelle { border-left: 1px solid var(--linie); }
.s04__fuss {
  display: flex; align-items: center; gap: var(--f4);
  padding: var(--f5) var(--f4) var(--f6);
}
.s04__fuss p { width: 674px; }

/* 05 Keynote und Panels: dieselbe Raster-Grammatik */
.s05__kopf {
  display: flex; flex-direction: column; gap: var(--f3);
  padding: var(--f6) var(--f4) var(--f5);
}
.speaker-zelle { flex: 1; }
.speaker-zelle--keynote { flex: 2; }
.abb-platzhalter {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--f1);
  height: 190px;
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
}
.abb-platzhalter .sym { width: 34px; height: 34px; }
.speaker-zelle__inhalt {
  display: flex; flex-direction: column; gap: var(--f2);
}
.speaker-zelle__text { display: flex; flex-direction: column; gap: var(--f2); }
.welt { display: flex; align-items: center; gap: var(--f1); }
.welt__knoten { width: 8px; height: 8px; flex: none; }
.welt__knoten--bildung { background: var(--amber); }
.welt__knoten--tech    { background: var(--blau); }
.welt__knoten--keynote { background: var(--signal); }

/* 06 Wer laedt ein: ungleiches Paar 674 | 424 */
.s06 {
  display: flex; flex-direction: column; gap: var(--f4);
  padding: var(--f6) var(--f4);
}
.s06__zeile { display: flex; align-items: flex-start; gap: var(--f4); }
.karte {
  display: flex; flex-direction: column; gap: var(--f3);
  padding: var(--f4);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
}
.karte--gastgeber { width: 674px; flex: none; }
.karte--partner { flex: 1; }

/* Logo-Paar: EIL und AWS erscheinen immer gemeinsam */
.logo-paar { display: flex; align-items: center; gap: var(--f3); }
.logo-slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
}
.logo-slot--gross { width: 160px; height: 72px; }
.logo-slot--klein { width: 120px; height: 48px; }

/* Ort */
.ort { display: flex; align-items: flex-start; gap: var(--f4); padding: var(--f6) var(--f4); }
.ort__text { width: 520px; display: flex; flex-direction: column; gap: var(--f3); }
.ort__daten { flex: 1; display: flex; flex-direction: column; gap: var(--f2); }

/* Dabei sein */
.kontakt { display: flex; flex-direction: column; gap: var(--f4); padding: var(--f6) var(--f4); }
.kontakt p { width: 674px; }
.kontakt__aktion { display: flex; align-items: center; gap: var(--f3); }

/* ---------- 09 Tasten ------------------------------------- */
/* Die Aktion sieht aus wie eine Planbeschriftung. */
.taste {
  display: inline-flex; align-items: center; gap: var(--f2);
  padding: 14px 22px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-family: var(--schrift-label);
  font-size: 13px; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.taste .sym { width: 16px; height: 16px; flex: none; }
.taste--primary { background: var(--bone); color: var(--nacht); }
.taste--primary:hover { background: #FFFFFF; }
.taste--ghost { background: transparent; color: var(--bone); border-color: var(--linie-stark); }
.taste--ghost:hover { background: var(--flaeche); }
.taste--ink { background: var(--nacht); color: var(--bone); }
/* Beim Hover wird der Pfeil Signal und schreitet. Kein Scale, kein Versatz. */

/* ---------- 10 Footer ------------------------------------- */
.footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--f4) var(--f4) var(--f5);
  border-left: 1px solid var(--linie);
  border-right: 1px solid var(--linie);
  border-top: 1px solid var(--linie);
}
.footer__absender { display: flex; flex-direction: column; gap: var(--f2); }
.footer__links { display: flex; align-items: center; gap: 28px; }

/* ---------- 11 Breakpoints -------------------------------- */

/* Tablet: 810 bis 1199 */
@media (max-width: 1199px) {
  :root { --phi-links: 500px; }

  .t-display   { font-size: 76px; }
  .t-statement { font-size: 56px; }
  .t-heading   { font-size: 36px; }
  .t-lead      { font-size: 24px; }
  .t-label     { font-size: 12px; }
  .t-index     { font-size: 36px; }
  /* Body, Wortmarke und Meta bleiben auf Tablet unverändert. */

  .feld, .nav, .footer { border-left: none; border-right: none; }

  /* Hero: Bruecke 500 px, spannt das Blatt */
  .hero { height: 750px; }
  .hero__bruecke { left: 155px; top: 115px; width: 500px; height: 500px; }
  .hero__pfeil { top: 400px; }
  .hero__schriftfeld { display: none; }
  .titelband { height: 245px; }

  /* Schriftfeld als eigene Sektion in voller Blattbreite */
  .schriftfeld-sektion { display: block; }

  /* Ungleiche Paare weichen auf, gleiche bleiben nebeneinander */
  .s01 { flex-direction: column; }
  .s01__links { width: 100%; border-right: none; border-bottom: 1px solid var(--linie); padding: var(--f5) var(--f4); }
  .s01__rechts { padding: var(--f5) var(--f4); }

  .s02__kopf, .s03__kopf, .s04__kopf, .s05__kopf { padding: var(--f5) var(--f4) var(--f4); }
  .s02__seite { padding: var(--f4) var(--f4); }
  .s02__schluss { padding: var(--f4) var(--f4) var(--f5); }

  .s03__zeile { flex-direction: column; }
  .karte-auflager { width: 100%; }
  .s03__text { padding-left: 0; padding-top: var(--f3); border-left: none; border-top: 1px solid var(--linie-ink); }

  /* Ablauf-Raster: 2 + 2 + 1 */
  .raster { flex-wrap: wrap; }
  .zelle { flex: 1 1 50%; min-width: 0; border-top: 1px solid var(--linie); }
  .zelle:nth-child(odd) { border-left: none; }
  .zelle:nth-child(even) { border-left: 1px solid var(--linie); }
  .zelle:nth-child(-n+2) { border-top: none; }
  .zelle:last-child { flex-basis: 100%; }

  /* Speaker: Keynote ueber beide Spalten, Panels 2 + 2 */
  .speaker-zelle--keynote { flex-basis: 100%; }
  .speaker-zelle--keynote .abb-platzhalter { width: 152px; flex: none; }
  .speaker-zelle--keynote .speaker-zelle__inhalt { flex-direction: row; align-items: stretch; }
  .speaker-zelle--keynote .speaker-zelle__text { justify-content: flex-end; flex: 1; }

  .s06 { padding: var(--f5) var(--f4); }
  .s06__zeile { flex-direction: column; }
  .karte--gastgeber { width: 100%; }
  .karte--partner { width: 100%; }

  .ort, .kontakt { padding: var(--f5) var(--f4); }
  .ort__text { width: auto; flex: 1; }
  .s04__fuss p, .kontakt p { width: auto; max-width: 674px; }
}

/* Phone: unter 810 */
@media (max-width: 809px) {
  :root { --rand: var(--f3); }

  .t-display   { font-size: 52px; }
  .t-statement { font-size: 40px; }
  .t-heading   { font-size: 30px; }
  .t-lead      { font-size: 21px; }
  .t-body      { font-size: 16px; }
  .t-wortmarke { font-size: 18px; }
  .t-label     { font-size: 11px; }
  .t-meta      { font-size: 12px; }
  .t-index     { font-size: 30px; }

  .nav { padding: 0 var(--f3); }
  .nav-links { display: none; }        /* Anker bleiben ueber das Schriftfeld erreichbar */

  .index { right: var(--f3); top: var(--f3); }

  /* Hero: Bruecke 300 px */
  .hero { height: 640px; }
  .hero__bruecke { left: 45px; top: 53px; width: 300px; height: 300px; }
  .hero__pfeil { top: 245px; width: 34px; height: 34px; }
  .hero__pfeil--links { left: var(--f3); }
  .hero__pfeil--rechts { right: var(--f3); }
  .hero__annotation { left: var(--f3); top: 60px; }
  .titelband { height: auto; top: auto; padding: var(--f3) var(--f3) var(--f4); flex-direction: column; align-items: flex-start; gap: var(--f3); }
  .titelband__tasten { width: 100%; }

  .schriftfeld-sektion { padding: var(--f4) var(--f3); }
  .schriftfeld__zeile { flex-direction: column; gap: 4px; }
  .schriftfeld__feld { width: auto; }

  /* Alles einspaltig, Haarlinie unten statt rechts */
  .s01__links, .s01__rechts { padding: var(--f5) var(--f3); }
  .s02__kopf, .s03__kopf, .s04__kopf, .s05__kopf { padding: var(--f5) var(--f3) var(--f4); }
  .s02__paar { flex-direction: column; }
  .s02__seite { padding: var(--f4) var(--f3); }
  .s02__seite + .s02__seite { border-left: none; border-top: 1px solid var(--linie); }
  .s02__schluss { padding: var(--f4) var(--f3) var(--f5); }

  .s03__zeile { padding: 0 var(--f3) var(--f5); }
  .karte-auflager { padding: var(--f3); }

  .raster { flex-direction: column; }
  .zelle { flex: none; border-left: none; border-top: 1px solid var(--linie); padding: var(--f3); }
  .zelle:first-child { border-top: none; }
  .s04__fuss { flex-direction: column; align-items: flex-start; gap: var(--f3); padding: var(--f4) var(--f3) var(--f5); }

  .speaker-zelle--keynote .speaker-zelle__inhalt { flex-direction: column; }
  .speaker-zelle--keynote .abb-platzhalter { width: 100%; }

  .s06 { padding: var(--f5) var(--f3); }
  .karte { padding: var(--f3); }
  .ort { flex-direction: column; padding: var(--f5) var(--f3); }
  .ort__text { width: auto; }
  .kontakt { padding: var(--f5) var(--f3); }
  .kontakt__aktion { flex-direction: column; align-items: flex-start; gap: var(--f2); }
  .phi-linie { display: none; }        /* phi-Linien sind auf Phone aus */

  .footer { flex-direction: column; align-items: flex-start; gap: var(--f4); padding: var(--f4) var(--f3) var(--f5); }
  .footer__links { flex-wrap: wrap; gap: var(--f3); }
}

/* ---------- 12 Reduzierte Bewegung ------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}