/* ============================================================
   styles.css — zentrales Stylesheet für alle Seiten
   Änderungen hier wirken sich auf die gesamte Website aus.
   ============================================================ */

/* ---- Schrift: JetBrains Mono, selbst gehostet (OFL-Lizenz) ---- */
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ---- Grundwerte (hier zentral anpassbar) ---- */
:root {
  --farbe-text:      #1a1a1a;
  --farbe-text-grau: #6e6e6e;
  --farbe-grund:     #ffffff;
  --galerie-breite:  50vw;      /* Breite der Galerie rechts */
  --schatten:        -12px 0 20px rgba(0, 0, 0, 0.18);
}

* { box-sizing: border-box; }

html {
  font-size: 17px;
}

body {
  margin: 0;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 400;
  line-height: 1.6;
  color: var(--farbe-text);
  background: var(--farbe-grund);
}

/* ============================================================
   Layout: Inhalt links (weiß, mit Schatten) liegt ÜBER der
   Galerie, die fest das rechte Drittel füllt.
   ============================================================ */

.inhalt {
  position: relative;
  z-index: 2;                          /* liegt über der Galerie */
  width: calc(100vw - var(--galerie-breite));
  min-height: 100vh;
  background: var(--farbe-grund);
  box-shadow: var(--schatten);
  padding: 18vh 8vw 10vh 12vw;
}

/* ============================================================
    Nur Startseite: "//"-Präfix hängt links raus,
    alles darunter steht bündig mit dem Überschriften-Text 
    ============================================================ */
.startseite h1,
.startseite h2 { 
  text-indent: -3ch; 
  margin: 10px;
}

.startseite .untertitel {
    padding-bottom: 30px;
}
.startseite .linkliste { padding-left: 10px; }

/* ============================================================
   Galerie: füllt das rechte Drittel des Bildschirms komplett,
   Bilder überblenden langsam ineinander (siehe js/galerie.js).
   ============================================================ */

.galerie {
  position: fixed;
  top: 0;
  right: 0;
  width: var(--galerie-breite);
  height: 100vh;
  z-index: 1;
  overflow: hidden;
  background: #dcdcdc;                 /* sichtbar, bis das erste Bild geladen ist */
}

.galerie img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;                   /* Bild füllt die Fläche, wird beschnitten */
  object-position: center;             /* Standard: mittig */
  opacity: 0;
  transition: opacity 2.5s ease-in-out;   /* Dauer der Überblendung */
}

.galerie img.aktiv {
  opacity: 1;
}

/* ---- Bildausrichtung ----
   Standardmäßig wird das Bild mittig beschnitten. Wenn bei einem
   Bild eher der linke oder rechte Rand sichtbar bleiben soll,
   einfach im HTML eine dieser Klassen an das <img> hängen:

     <img src="..." class="anker-links">
     <img src="..." class="anker-rechts">

   Feinjustierung ist auch in Prozent möglich, direkt am Bild:
     <img src="..." style="object-position: 70% center">
*/
.galerie img.anker-links  { object-position: left center; }
.galerie img.anker-rechts { object-position: right center; }
.galerie img.anker-mitte { object-position: center center; }

/* Fotograf:innen-Vermerk unten rechts auf der Galerie */
.galerie-credit {
  position: absolute;
  right: 0.8rem;
  bottom: 0.6rem;
  z-index: 2;
  font-size: 0.65rem;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.55);
}

/* ============================================================
   Typografie
   ============================================================ */

/* Der "// "-Präfix aus dem Mockup, automatisch vor Überschriften */
h1::before, h2::before {
  content: "// ";
}

h1 {
  font-size: 1.9rem;
  font-weight: 700;
  margin: 0 0 0.2rem;
}

h2 {
  font-size: 1.15rem;
  font-weight: 400;
  margin: 4rem 0 0.8rem;
}

/* Untertitel direkt unter h1 (grau, eingerückt wie im Mockup) */
.untertitel {
  margin: 0;
  padding-left: 10px;                   /* Einrückung = Breite von "// " */
  color: var(--farbe-text-grau);
}

p { margin: 0 0 1rem; }

a {
  color: inherit;
  text-decoration: none;
  
  
}
a:hover, a:focus-visible {
  color: var(--farbe-text-grau);
  border-bottom: 1px solid currentColor;
}
a:focus-visible {
  outline: 2px solid var(--farbe-text);
  outline-offset: 2px;
}

/* Linklisten (z.B. Quicklinks) — schlicht, eingerückt, ohne Punkte */
ul.linkliste {
  list-style: none;
  margin: 0;
  padding-left: 36px;
}
ul.linkliste li { margin-bottom: 0.35rem; }
ul.linkliste a  { border-bottom: none; }
ul.linkliste a:hover { border-bottom: 1px solid currentColor; }

/* ============================================================
   Blog-Artikel (schmalere Textspalte für gute Lesbarkeit)
   ============================================================ */
.artikel {
  max-width: 62ch;
}
.artikel .datum {
  color: var(--farbe-text-grau);
  font-size: 0.8rem;
}

/* ============================================================
   Mobil: Galerie wird zum Banner oben, Inhalt darunter
   ============================================================ */
@media (max-width: 900px) {
  .galerie {
    position: relative;
    width: 100%;
    height: 42vh;
  }
  .inhalt {
    width: 100%;
    min-height: auto;
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.18);
    padding: 3rem 8vw 4rem;
  }
}

/* Reduzierte Bewegung: harte Schnitte statt Überblendung */
@media (prefers-reduced-motion: reduce) {
  .galerie img { transition: none; }
}