/* Eigene Ausnahmen zu Prisma.
 *
 * bundle.css und tokens.css gehoeren dem Designsystem und werden unveraendert
 * eingebaut. Was Oliver darueber hinaus ausdruecklich wuenscht, steht hier,
 * jede Regel mit Datum und Grund. Diese Datei wird nach bundle.css geladen und
 * soll klein bleiben; was sich bewaehrt, gehoert ins Designsystem zurueck.
 */

/* 20.10.2026, Oliver nach dem Livegang, mit Bildschirmfoto:
 * "Mobil koennten Foto und Name und Rolle zumindest mittig sein."
 *
 * Das Portraet steht auf dem Telefon allein in einer 350 Pixel breiten Zeile,
 * daneben leerer Raum; Name und Rolle gehoeren optisch dazu. Der Fliesstext
 * der Kurzbiografie bleibt linksbuendig: vier bis fuenf Zeilen mittig sind
 * gemessen schlechter lesbar (Audit vom 19.10.2026, Abschnitt 2).
 *
 * Nur bis 520 Pixel: darueber steht das Portraet neben dem Text, dort gibt es
 * die leere Zeile nicht.
 */
/* 20.10.2026, nachgebessert: die Abfrage lief ueber das Fenster (520), das
 * Designsystem stapelt das Portraet aber bei 480 Pixeln Inhalt (533 Fenster).
 * Zwischen 521 und 533 stand es gestapelt und links, also weder alt noch neu.
 * Jetzt dieselbe Schwelle wie das System. */
@container page (max-width: 480px) {
  .cc-person__img { display: block; margin-inline: auto; }
  .cc-person__name,
  .cc-person__role { text-align: center; }
}

/* 20.10.2026, Oliver mit Bildschirmfoto:
 * "Seitenfuss nimmt viel Platz ein. Das nebeneinander und etwas weniger
 * Zeilenabstand?"
 *
 * Gemessen bei 390 Pixeln: die Fusszeile war 1.028 Pixel hoch, weil Marke und
 * drei Listen untereinander standen, getrennt von 48 Pixeln Abstand. Jetzt
 * stehen die Listen zu zweit nebeneinander und der Abstand zwischen den Reihen
 * betraegt 28 Pixel: 776 Pixel, also ein Viertel weniger.
 *
 * Der Zeilenabstand innerhalb der Listen bleibt, wie er ist: jeder Link ist
 * 44 Pixel hoch, und das ist die Mindestgroesse fuer einen Daumen. Enger
 * waere kuerzer und schlechter.
 */
/* 20.10.2026, nachgebessert: dieselbe Schwelle wie das Designsystem, das die
 * Fusszeile bei 660 Pixeln Inhalt (733 Fenster) einspaltig schaltet. Ueber die
 * Fensterbreite abgefragt galt zwischen 521 und 744 Pixeln weiter die lange
 * Fusszeile mit der Marke links, auf dem iPad mini eingeschlossen. */
@container page (max-width: 660px) {
  .cc-footer__grid { grid-template-columns: 1fr 1fr; row-gap: 28px; column-gap: 20px; }
  .cc-footer__brand { grid-column: 1 / -1; }
  .cc-footer__col { grid-column: auto; }
  /* Die Liste Oekosystem traegt die langen Namen (DEEPTECH DEEPTALK, DeepTech
     Campus); gebunden durch den Umbruchschutz brauchen sie rund 180 Pixel und
     passen nicht in eine halbe Spalte von 157. Statt die Spalten vom Inhalt
     verbiegen zu lassen, steht diese Liste ausdruecklich ueber die ganze
     Breite, Unternehmen und Folgen daneben. */
  .cc-footer__grid > .cc-footer__col:nth-of-type(1) { grid-column: 1 / -1; }
}

/* 20.10.2026, Oliver mit Bildschirmfoto: "Logo unten mittig!"
 *
 * Die Wortmarke der Fusszeile stand links und liess rechts daneben Raum leer.
 * Jetzt steht sie mittig ueber dem Block; die Anschrift darunter bleibt
 * linksbuendig an der Kante der Listen, sonst entstuenden zwei Achsen.
 * Nur solange die Fusszeile einspaltig ist: darueber steht die Marke in der
 * ersten von zwoelf Spalten und gehoert dort an die linke Kante.
 */
@container page (max-width: 660px) {
  .cc-footer__mark { display: block; margin-inline: auto; max-width: 280px; }
  /* 20.10.2026, nachgereicht: "Jetzt noch ein ganz wenig mehr Abstand zum Text
     unter dem Logo", dann "Oben weniger, unten mehr Abstand". Gemessen waren
     ueber der Marke 100 Pixel und darunter 24; jetzt 64 darueber und 48
     darunter. Die Marke sitzt damit nicht mehr tief im leeren Raum, und der
     Abstand zur Anschrift traegt den Block. Der Rhythmus der Zeilen darunter
     bleibt unberuehrt. */
  .cc-footer__mark { margin-bottom: 24px; }
  /* Der Raum ueber der Marke kam aus dem Raster (96 Pixel) und nicht aus der
     Fusszeile selbst; eine Zugabe an der falschen Stelle machte ihn nur
     groesser. Jetzt 56 statt 96, gemessen 60 Pixel ueber der Marke. */
  .cc-footer__grid { padding-top: 56px; }
}

/* 20.10.2026, Oliver mit Bildschirmfoto: die Sprachauswahl schneidet unten den
 * Rahmen der Kapsel, danach: "Keine Abstaende bei der Sprachauswahl nach oben
 * und unten."
 *
 * Jetzt nachgestellt und die Ursache gemessen: das Telefon im Querformat ist
 * die einzige Lage, in der beides zugleich gilt. Die Kapsel schrumpft dort auf
 * 52 Pixel (Regel fuer niedrige Fenster, bundle.css Zeile 451), die
 * Sprachauswahl bleibt aber sichtbar, weil die Seite mit 829 Pixeln breiter ist
 * als die 660, ab denen sie sonst in das Menue wandert. 52 minus 50 ergibt
 * einen Pixel Luft oben und einen unten; der Schein der Sprachauswahl liegt
 * damit auf dem Rand der Kapsel.
 *
 * Gemessen bei 844 mal 390: Kapsel 52, Sprachauswahl 50, Luft 1 und 1.
 * Frueher hatte ich nur Breiten durchprobiert und immer ein hohes Fenster
 * benutzt; deshalb war es zwoelfmal nicht nachstellbar.
 *
 * Die Kapsel waechst auf 60 Pixel: fuenf Pixel Luft oben und unten, wie im
 * Hochformat sieben. Die Schaltflaechen bleiben 44 Pixel hoch, das ist das
 * Mindestmass fuer einen Daumen. Kosten: acht Pixel von 390, zwei Prozent.
 * Scrollweite und Hoehe des Menues rechnen mit derselben Zahl weiter.
 */
@media (orientation: landscape) and (max-height: 500px) {
  html { scroll-padding-top: calc(var(--band-height) + var(--space-2) + 60px + var(--space-2) + var(--space-5)); }
  .cc-bar { height: 60px; }
  .cc-masthead .cc-sheet {
    max-height: calc(100dvh - var(--band-height) - var(--space-2) - 60px - var(--space-2)
                     - var(--space-3) - var(--space-4) - env(safe-area-inset-top, 0px));
  }
}

/* 20.10.2026, Oliver: "Wirkt mobil auf dem Handy in der Queransicht sehr
 * gedrungen, alles sehr zusammengefasst. Ich weiss auch nicht, ob es am Anfang
 * vielleicht Sinn macht, das Logo zumindest mobil in der Mitte zu haben."
 *
 * Gemessen quer bei 844 mal 390: die Seite ist 829 breit, die Wortmarke 468.
 * Sie stand links, ihre optische Achse lag 138 Pixel neben der Seitenmitte,
 * rechts daneben blieben 319 Pixel leer. Satz und Schaltflaechen standen
 * ebenfalls an der linken Kante. Hochkant gibt es diesen leeren Raum nicht:
 * dort fuellt die Marke 350 von 350 Pixeln, Mitte ist Mitte, und der Satz
 * bleibt linksbuendig, weil vier Zeilen mittig schlechter zu lesen sind.
 *
 * Quer stehen Marke, Satz und Schaltflaechen jetzt auf der Seitenmitte,
 * Abweichung gemessen 0 Pixel. Der Satz bekommt dabei ein engeres Mass
 * (46 statt 52 Zeichen, 644 statt 728 Pixel), damit die zwei Zeilen als Block
 * stehen und nicht als Streifen. Die Belege darunter bleiben linksbuendig:
 * sie sind eine Liste mit Trennlinien, keine Bildunterschrift.
 */
@media (orientation: landscape) and (max-height: 500px) {
  .cc-hero__mark { margin-inline: auto; }
  .cc-hero__copy { margin-inline: auto; text-align: center; }
  .cc-hero__lead { margin-inline: auto; max-width: 46ch; }
  .cc-actions { justify-content: center; }
}

/* 20.10.2026, Oliver mit Bildschirmfoto aus dem Querformat: "Mobile
 * Queransicht ist immer noch sehr gedrungen. Vielleicht ist das Logo oder der
 * Text zu gross, oder die Buttons."
 *
 * Er hat recht, und das Mittigstellen allein hat es nicht geloest. Quer ist das
 * Fenster rund 390 Pixel hoch, abzueglich Browserleisten bleiben etwa 330. Die
 * Groessen kommen aber vom Schreibtisch, weil die Seite mit 829 Pixeln Inhalt
 * weit ueber der Telefonstufe (660) liegt: Wortmarke 85 Pixel hoch, Satz in 22
 * Pixeln, Schaltflaechen 48. Zusammen mit den Abstaenden fuellt das den ganzen
 * Bildschirm bis zur Unterkante.
 *
 * Darum eine eigene Stufe fuer flache Fenster: die Wortmarke bindet sich an
 * die Hoehe statt an die Breite, Satz und Schaltflaechen eine Stufe kleiner,
 * die Abstaende enger. Gemessen bei 844 mal 390 schrumpft der Block von 249
 * auf 182 Pixel; bei 844 mal 330 steht die Hauptaktion weiterhin im Bild.
 * Hochformat und Schreibtisch bleiben unberuehrt.
 */
@media (orientation: landscape) and (max-height: 500px) {
  .cc-hero__inner { padding-block: var(--space-6) var(--space-7); }
  .cc-hero__mark { width: min(100%, 760px, 84vh); }
  .cc-hero__copy { margin-top: var(--space-6); }
  .cc-page .cc-hero__lead { font-size: 17px; line-height: 26px; max-width: 42ch; margin-bottom: var(--space-6); }
  .cc-hero .cc-btn { min-height: 44px; padding-inline: var(--space-5); font-size: 15px; }
  .cc-proof { margin-top: var(--space-6); }
  .cc-proof li { padding-block: var(--space-3); }
  /* Die Kapsel hing zu dicht unter der Oberkante; quer ist dort auch der
     Ausschnitt des Geraets. Vier Pixel mehr oben, und zwischen Kapsel und
     Wortmarke steht der Abstand des Rasters statt der Rest. */
  .cc-masthead { padding-top: calc(var(--band-height) + var(--space-3) + env(safe-area-inset-top, 0px)); }
}

/* 20.10.2026, Oliver mit Bildschirmfoto aus dem Hochformat: "Die beiden
 * Knoepfe koennte man gleich gross nebeneinander machen oder untereinander.
 * Hauptsache mittig."
 *
 * Auf dem Telefon standen sie untereinander, linksbuendig und verschieden
 * breit (Gespraech anfragen 214, Ventures ansehen 196 Pixel): zwei Kanten
 * rechts, keine Ordnung. Jetzt sind sie gleich breit, mittig und
 * untereinander. Die Breite ist auf 320 Pixel begrenzt, damit sie auf
 * breiteren Telefonen nicht zu Baendern werden.
 */
@container page (max-width: 480px) {
  .cc-hero .cc-actions { flex-direction: column; align-items: center; }
  /* box-sizing ist bei .cc-btn content-box, die Polsterung von zweimal 32
     Pixeln kaeme sonst oben drauf und der Knopf stuende ueber die Spalte. */
  .cc-hero .cc-actions > * { box-sizing: border-box; width: min(100%, 320px); }
}

/* 20.10.2026, aus dem Audit: das offene Menue laesst den Auftakt durchscheinen.
 *
 * Auf dem Telefon liegt die Menueflaeche ueber der Hauptaktion. Durch die
 * Fuellung mit 78 Prozent Deckung zeichnet sich der goldene Knopf als gelber
 * Fleck hinter dem Wort "Kontakt" ab (gemessen rgb 75,66,35 gegen 29,28,25
 * daneben). Auf dem Telefon ist die Unschaerfe zudem auf 14 Pixel reduziert,
 * sie verdeckt also weniger als am Schreibtisch.
 *
 * Darum ist die Flaeche dort deckender. Der Glaseindruck bleibt: Rand, Schein
 * und Unschaerfe sind unveraendert, nur die Fuellung traegt mehr.
 */
@container page (max-width: 660px) {
  .cc-masthead .cc-sheet { background-color: color-mix(in srgb, var(--bg2) 94%, transparent); }
}

/* 20.10.2026, aus dem Audit: der Verlauf hat am Laptop schmalere Spalten als
 * auf dem Telefon.
 *
 * Drei Spalten ab 1.150 Pixeln Inhalt ergeben bei 1.165 nur 285 Pixel je
 * Spalte, also 24 bis 29 Zeichen in der Zeile und bis zu acht Zeilen je
 * Schritt. Auf dem Telefon sind es bei 302 Pixeln 37 bis 42 Zeichen. Weniger
 * als 45 Zeichen liest sich schlecht, deshalb bleiben es zwei Spalten, bis
 * jede davon mindestens rund 340 Pixel bekommt.
 */
@container page (1150px < width <= 1340px) {
  .cc-steps--trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 20.10.2026, Oliver: "Vielleicht blasst der Balken oben immer etwas aus, wenn
 * man die Seite nicht bewegt oder nicht mit der Maus darueber ist. Sonst ist er
 * schon sehr dominant." Dazu: "Das Logo faded dann ganz aus und wieder ein bei
 * Bewegung", "nur das Logo in der Leiste" und "fliessender und langsamer,
 * schlicht eleganter".
 *
 * leiste-ruhe.js setzt nach 2,6 Sekunden ohne Ereignis das Merkmal data-ruhe.
 *
 * Wichtig, aus dem Gegencheck vom 20.10.2026: die Deckkraft darf nicht am
 * ganzen Kopf haengen. Dort liegt die Kante (::before in bundle.css), die den
 * Seiteninhalt hinter der Kapsel verbirgt. Mit dem Kopf wurde sie mit
 * heruntergezogen, und gescrollt stand dann Fliesstext mitten in der Kapsel:
 * die Helligkeitsstreuung in der leeren Kapselflaeche stieg von 1,9 auf 31,6.
 * Darum treten jetzt nur Farbband und Kapsel zurueck, die Kante bleibt.
 *
 * Zwei Geschwindigkeiten: zuruecktreten 1.400 Millisekunden mit weichem
 * Auslauf, zurueckkommen 320. Langsam weg, sofort da.
 *
 * Die Zahlen: Schrift und Symbole in der Kapsel 80 Prozent, ganz oben zusaetzlich
 * das Glas auf 75, zusammen also 60 Prozent. Bei 60 Prozent haelt der Kontrast
 * nach Messung 3:1 fuer alles ausser der hellen Navigation (3,17 gemessen bei
 * 60, 2,27 bei 45); gescrollt, wo wirklich gelesen wird, bleiben es 80.
 * Die Wortmarke geht ganz weg, das war ausdruecklich gewuenscht.
 */
.cc-masthead > .cc-page,
.cc-masthead > .cc-band { transition: opacity 320ms var(--ease-standard, ease); }
.cc-masthead[data-ruhe] > .cc-band {
  opacity: .8;
  transition-duration: 1400ms;
  transition-timing-function: cubic-bezier(.33, 0, .2, 1);
}
/* Das Glas der Kapsel tritt nur ganz oben zurueck. Gescrollt verdeckt es den
   Inhalt, der darunter durchlaeuft; bei 80 Prozent Deckkraft stand die
   Ueberschrift "Momentum and foundation" mitten zwischen den Navigationslinks
   (Helligkeitsstreuung 6,2 statt 1,9). leiste-ruhe.js setzt data-oben,
   solange die Seite weniger als 40 Pixel gescrollt ist. */
.cc-masthead[data-ruhe][data-oben] > .cc-page {
  opacity: .75;
  transition-duration: 1400ms;
  transition-timing-function: cubic-bezier(.33, 0, .2, 1);
}
.cc-masthead .cc-bar > * { transition: opacity 320ms var(--ease-standard, ease); }
.cc-masthead[data-ruhe] .cc-bar > * {
  opacity: .8;
  transition-duration: 1400ms;
  transition-timing-function: cubic-bezier(.33, 0, .2, 1);
}
/* Die Wortmarke in der Kapsel: ganz weg, und sanft zurueck. Die Kurve ist
   bewusst nicht --ease-standard: die faengt sehr schnell an und laeuft lange
   aus, gemessen 52 Prozent schon nach 200 Millisekunden. Das wirkt trotz
   langer Dauer wie ein Aufblitzen. */
.cc-masthead .cc-bar__brand { transition: opacity 900ms cubic-bezier(.4, 0, .2, 1) 80ms, visibility var(--duration-ui); }
.cc-masthead[data-ruhe] .cc-bar__brand { opacity: 0; transition: opacity 1400ms cubic-bezier(.33, 0, .2, 1); }
/* Wer mit der Tastatur in die Kapsel kommt, soll nicht auf die Blende warten:
   der Fokusring liegt als Schatten auf der Marke und waere sonst eine knappe
   Sekunde lang unsichtbar (gemessen 0 bis 426 ms, voll erst bei 1.306 ms). */
.cc-masthead:focus-within .cc-bar__brand { transition-duration: 320ms; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
  .cc-masthead > .cc-page,
  .cc-masthead > .cc-band,
  .cc-masthead .cc-bar > *,
  .cc-masthead .cc-bar__brand,
  .cc-masthead[data-ruhe] > .cc-page,
  .cc-masthead[data-ruhe] > .cc-band,
  .cc-masthead[data-ruhe] .cc-bar > *,
  .cc-masthead[data-ruhe] .cc-bar__brand { transition: none; }
}