/* Typografie-Schema für Projekte-, Serien-, Portrait-, Dokumentations-,
   Kommunikations- und Über-mich-Seite. Wird NACH style.css eingebunden und
   überschreibt dort nur Schriften, Größen und Zeilenabstände. Startseite,
   Unterwegs, Impressum und Datenschutz binden diese Datei nicht ein. */

@font-face { font-family: "Source Serif 4"; src: url("../fonts/SourceSerif4-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/SourceSerif4-LightItalic.ttf") format("truetype"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/SourceSerif4-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/SourceSerif4-BoldItalic.ttf") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/InstrumentSans-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/InstrumentSans-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans SemiCondensed"; src: url("../fonts/InstrumentSans_SemiCondensed-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }

/* Schrumpfverhalten: Volle Größe ab ca. 1150px Breite, beim Verschmälern
   fallen die Größen flacher ab als in style.css (höhere Mindestwerte). */
:root {
  --title-size: clamp(1.7rem, 2.23vw + 18.6px, 2.64rem);
  --body-lead-size: clamp(1rem, 0.32vw + 14.9px, 1.16rem);
}

/* Überschriften: Seiten-, Rubrik-, Projekttitel, Zwischenüberschriften */
.projects-intro h1,
.hero-text h1,
.rubric-heading,
.article-text h2,
#kontakt-ueber h2,
.projects-subheading,
.project-title,
.project-status {
  font-family: "Instrument Sans", Arial, Helvetica, sans-serif;
}

/* Über mich: Titel und Zwischenüberschriften linksbündig zum Fließtextblock */
.hero-text-tight h1,
.article-text h2 {
  text-align: left;
}

/* Laufweite +30 nur im Seitentitel */
.projects-intro h1,
.hero-text h1 {
  letter-spacing: 0.03em;
}

.project-title {
  font-size: clamp(1.25rem, 1.35vw + 15px, 1.9rem);
  letter-spacing: 0.135em;
}

/* Jahreszahlen/Status behalten die bisherige Größe von style.css */
.project-meta,
.project-status {
  font-size: clamp(0.68rem, 1.76vw, 1.26rem);
}

/* Fließtext */
.projects-intro p,
.hero-text p:not(.section-nav),
.rubric-intro,
.project-text,
.article-text p {
  font-family: "Source Serif 4", Georgia, serif;
  font-weight: 300;
  font-size: var(--body-lead-size);
}

.projects-intro p,
.hero-text p:not(.section-nav),
.rubric-intro {
  line-height: 1.55;
}

.project-text,
.article-text p {
  line-height: 1.65;
}

/* Verlinkte Projektblöcke (Bild und Text): keine Unterstreichung, kein Hover-Effekt */
a.project-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* Projekt-Detailseite (transrapid/index.html): kein Hero, daher oben Platz
   für den Header wie bei .projects-intro. Bild-Abstände: zwei Leerzeilen. */
.project-detail {
  padding-top: calc(6.4rem - 30px);
  --two-lines: calc(var(--body-lead-size) * 1.65 * 2);
}

.project-detail .project-frame {
  margin-bottom: var(--two-lines);
}

.project-detail .project-frame:first-child {
  margin-bottom: 3.2rem;
}

/* Bild ohne weißen Rahmen: so breit wie die Außenkanten der Rahmen */
.project-detail .project-plain {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: var(--two-lines);
}

.project-detail .project-frame:last-child,
.project-detail .project-plain:last-child {
  margin-bottom: 0;
}

/* Titel auf Spaltenbreite (assets/js/fit-title.js setzt die Schriftgröße);
   die nachlaufende Laufweite wird per negativem Rand ausgeglichen. */
.project-detail-title[data-fit-width] {
  line-height: 1;
  white-space: nowrap;
}

.project-detail-title .fit-inner {
  display: inline-block;
  margin-right: -0.135em;
}

.project-detail-title {
  font-family: "Instrument Sans", Arial, Helvetica, sans-serif;
  font-size: var(--title-size);
  letter-spacing: 0.135em;
  text-transform: uppercase;
  text-align: left;
  margin: 0 0 3.2rem;
}

/* Rubriktitel innerhalb der Detailseite: wie die Projekttitel der Übersicht */
.project-detail .project-subtitle {
  font-weight: 400;
  margin: 0 0 calc(0.6em + 0.8rem);
}

.project-detail .project-text {
  margin: 0 0 var(--two-lines);
}

/* Absätze eines längeren Einleitungstextes: normaler Absatzabstand */
.project-detail .project-text.project-text-para {
  margin-bottom: 1.2em;
}

/* Titelbild der Detailseite: ohne Rahmen, mehr Abstand zum Titel */
.project-detail .project-plain-lead {
  margin-bottom: 3.2rem;
}

/* --- Helle Variante (invertiert): body.page-light ------------------------------- */

.page-light {
  background: var(--color-bg-light);
  color: var(--color-text-light);
}

.page-light .project-detail-title,
.page-light .project-title,
.page-light .project-text {
  color: var(--color-text-light);
}

.page-light .site-footer {
  background: var(--color-bg-light);
}

/* Burger und Sprachschalter oben: dunkel auf hellem Grund ... */
.page-light .menu-toggle span {
  background: var(--color-text-light);
  box-shadow: none;
}

.page-light .lang-switch button {
  color: var(--color-text-light);
  text-shadow: none;
}

/* ... aber hell, solange das (schwarze) Menü offen ist */
.page-light:has(.site-menu.is-open) .menu-toggle span {
  background: #fff;
}

.page-light:has(.site-menu.is-open) .lang-switch button {
  color: #fff;
}

/* --- Serienblöcke (Transrapid) --------------------------------------------------- */

.series-block {
  margin-top: 5.6rem;
}

/* Serientitel ("TRANSRAPID 06"): Name in Seitentitel-Größe, Nummer doppelt so groß.
   Die Nummer sitzt tiefer, sodass ihre Oberkante bündig mit der Oberkante der
   Großbuchstaben des Namens liegt (Versalhöhe Instrument Sans 0,72 em: die
   große Ziffer wird um 0,72 x Namensgröße = 0,36 em ihrer eigenen Größe
   abgesenkt). Der Absatz-Abstand darunter wird um die Absenkung vergrößert. */
.project-detail .series-title {
  font-size: var(--title-size);
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.1;
  margin-bottom: calc(0.6em + 0.8rem + 0.72em);
}

/* Abschnitt "Bilder" mit Binnenlinks zu den Serien */
.project-detail .series-title.series-title-plain.section-heading-images {
  margin-top: 0;
  margin-bottom: calc(0.3em + 0.4rem);
}

.series-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em 1.6em;
  font-family: "Instrument Sans", Arial, Helvetica, sans-serif;
  font-size: var(--body-lead-size);
  margin: 0;
}

.series-nav a {
  color: var(--color-text-light);
  font-weight: 600;
  text-decoration: none;
}

.series-nav a:hover,
.series-nav a:focus-visible {
  color: #6f88a3; /* Graublau, deutlich heller */
  text-decoration: underline;
}

/* Sprungziele: etwas Luft über dem Titel, wenn man per Link anspringt */
.series-block {
  scroll-margin-top: 1.5rem;
}

/* Serientitel ohne Nummer (Komet, Shanghai Transrapid): kein Zusatzabstand */
.project-detail .series-title.series-title-plain {
  margin-bottom: calc(0.6em + 0.8rem);
}

.series-title .series-num {
  display: inline-block;
  font-family: "Instrument Sans SemiCondensed", "Instrument Sans", Arial, Helvetica, sans-serif;
  margin-left: 0.15em;
  font-size: 2em;
  line-height: 0;
  vertical-align: -0.36em;
}

/* Trennstreifen zwischen Blöcken: von Fensterkante zu Fensterkante, horizontal
   wiederholt, eine Kachel so breit wie die Textspalte (Seitenverhältnis der
   Grafik 1786:235), 60px Luft darüber und darunter. */
.series-divider {
  width: 100vw;
  margin: 60px 0 60px calc(50% - 50vw);
  height: calc(var(--content-max) * 1.8 * 235 / 1786);
  background: url("../images/g_tr-hell.webp") repeat-x center top / calc(var(--content-max) * 1.8) 100%;
}

.project-detail .project-text:has(+ .series-divider) {
  margin-bottom: 0;
}

.series-divider + .series-block {
  margin-top: 0;
}

/* Streifen am Seitenende: 60px bis zum Footer, ohne den sonst großen Endabstand */
.project-block:has(> .series-divider:last-child) {
  margin-bottom: 0;
}

/* Text nach einer Galerie: Abstand wie zwischen Text und Galerie */
.project-detail .series-gallery + .project-text {
  margin-top: var(--two-lines);
}

/* Horizontale Bildergalerie (Logik in assets/js/gallery.js) von Fensterkante zu
   Fensterkante. Höhe und Bildgrößen setzt das Script. Hintergrund: Streifen-
   grafik, horizontal wiederholt, eine Kachel doppelt so breit wie die Spalte,
   läuft per --bg-x mit halber Geschwindigkeit mit. */
.series-gallery {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  box-sizing: border-box;
  height: 24rem; /* Platzhalter bis zum Script */
  padding: 1.2rem 0;
  /* seitlich abschneiden, senkrecht nicht (Bremseffekt verschiebt die Bilder leicht) */
  overflow-x: clip;
  overflow-y: visible;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  /* Streifenhintergrund vorerst entfernt:
     background: url("../images/g_tr-hell.webp") repeat-x calc(50% + var(--bg-x, 0px)) 50% / calc(var(--content-max) * 2) auto; */
  scroll-snap-align: center;
  outline: none;
}

.series-gallery.is-dragging {
  cursor: grabbing;
}

/* Endlos-Karussell: Der Track sitzt mit seinem Ursprung in der Galeriemitte
   (gallery.js verschiebt ihn); jedes Bild liegt absolut darin, vertikal
   zentriert, und wird von gallery.js per transform im Kreis platziert. */
.series-gallery-track {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  will-change: transform;
}

.series-gallery-track img {
  position: absolute;
  left: 0;
  top: 50%;
  display: block;
  max-width: none;
  -webkit-user-drag: none;
}

.series-gallery.is-single .series-gallery-btn {
  display: none;
}

/* Pfeile: nur bei Maus (Hover), zurückhaltend; 20 % größer als in der Lightbox */
.series-gallery-btn {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20%;
  display: none;
  align-items: center;
  background: none;
  border: 0;
  padding: 0 1rem;
  color: var(--color-text-light);
  font-size: 4.8rem;
  line-height: 1;
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.series-gallery-prev {
  left: 0;
  justify-content: flex-start;
}

.series-gallery-next {
  right: 0;
  justify-content: flex-end;
}

@media (hover: hover) and (pointer: fine) {
  .series-gallery-btn {
    display: flex;
  }

  .series-gallery:hover .series-gallery-btn {
    opacity: 0.35;
  }

  .series-gallery .series-gallery-btn:hover,
  .series-gallery .series-gallery-btn:focus-visible {
    opacity: 0.9;
  }
}

.series-gallery .series-gallery-btn.is-disabled {
  opacity: 0;
  pointer-events: none;
}

/* Sanftes Einrasten der Seite auf die Galerien beim senkrechten Scrollen.
   proximity: nur nahe an einer Galerie, damit lange Texte lesbar bleiben. */
html:has(.series-gallery) {
  scroll-snap-type: y proximity;
}

/* style.css setzt overflow-x: hidden auf html UND body; dadurch wird der body
   zum eigenen Scroll-Container, und die Rastpunkte der Galerien gehören nicht
   mehr zum Seiten-Viewport (Einrasten greift nicht). clip schneidet ebenso ab,
   erzeugt aber keinen Scroll-Container. */
html:has(.series-gallery),
html:has(.series-gallery) body {
  overflow-x: clip;
}

/* Mobiles Querformat: Galerie als Quasi-Vollbild, ohne Streifen, Seite rastet
   exakt auf die Oberkante ein. */
@media (orientation: landscape) and (max-height: 500px) {
  .series-gallery {
    height: 100dvh;
    /* kein Innenrand: Die Bilder füllen die Höhe bis zum Rand (sonst bliebe unten
       ein weißer Streifen). Notch-Abstand nicht nötig, die Bilder stehen mittig
       und lassen bei Fensterformaten wie 19,5:9 ohnehin seitlich Platz. */
    padding: 0;
    background: none;
    scroll-snap-align: start;
  }
}

/* Über mich: Einleitungsabsätze nicht kursiv */
.article-text p.lead {
  font-style: normal;
}