/* =====================================================
   walterklein.com — style.css
   =====================================================

   INHALTSVERZEICHNIS
   ------------------
   1. EINSTELLUNGEN  ← hier kannst du fast alles anpassen
   2. Basis
   3. Seiten-Header (sticky, immer sichtbar)
   4. Hero-Titel (einmalig ganz oben)
   5. Beitrags-Header (sticky pro Eintrag)
   6. Beitrags-Inhalt (Text + Bilder)
   7. Bilder & Bildunterschriften
   8. Footer
   9. Lightbox
   10. Responsive (Mobilgeräte)

===================================================== */


/* =====================================================
   1. EINSTELLUNGEN
   Hier kannst du Farben, Schriften, Abstände und
   das Layout auf einen Blick anpassen.
===================================================== */

/* ── Schriften einbinden ── */
@font-face {
  font-family: 'Teenage Fantasy Romance Novel';
  src: url('fonts/TEENAGEROMANCENOVEL.ttf') format('truetype');
}
@font-face {
  font-family: 'Pomice';
  src: url('fonts/PomiceLightSlant45.otf') format('opentype');
}
@font-face {
  font-family: 'Serial-C';
  src: url('fonts/SerialCTRIAL-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'FA';
  src: url('fonts/FA_LFQEXGLCLC.ttf') format('truetype');
}
@font-face {
  font-family: 'IBM';
  src: url('fonts/IBMPlexMono-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Sig';
  src: url('fonts/JULIET__.ttf') format('truetype');
}


:root {

  /* --- FADE-EFFEKT OBEN & UNTEN --- */
--fade-hoehe: 40px;   /* Wie stark der Rand ausblendet */

  /* --- FARBEN ---
     Einfach die Hex-Werte (#…) gegen deine eigenen tauschen. */
  --farbe-gruen:       #2ed868;   /* Hauptfarbe: Headlines, Bullet, Akzente */
  --farbe-schwarz:     #000000;   /* Fließtext, Bildunterschriften          */
  --farbe-weiss:       #ffffff;   /* Seitenhintergrund                      */
  --farbe-grau-hell:   #d0d0d0;   /* Trennlinien (zwischen Beiträgen, Header, Footer) */
  --farbe-grau-mitte:  #888888;   /* Datum, abb-Nummern, dezente Texte      */
  --farbe-transparent: transparent;
  --farbe-goldbraun:   #bfa759; /* Test */

  /* --- TRENNLINIEN ---
     Farbe: --farbe-grau-hell (siehe oben)
     Stärke hier einstellen:                          */
  --linie-staerke:     0px;       /* Dicke aller Trennlinien                */

  /* --- SCHRIFTEN ---
     Eigene Fonts: @font-face oben einfügen, dann hier den Namen eintragen. */
  --font-h1:  'FA', monospace; 
  --font-titel: 'Serial-C', serif;      /* Headlines, Meta, Navigation */
  --font-text:  'Monaco', monospace; /* Fließtext der Beiträge      */
  --font-info:  'Monaco', monospace;
  --font-text-v2: 'IBM', monospace; /* Fließtext Version 2 */
  --font-sig: 'Sig', serif; /* am Ende jedes Entrys */ 

  /* --- SCHRIFTGRÖSSEN --- */
  --groesse-hero:       3.6rem;   /* "Gerro goes Paris" ganz oben  */
  --groesse-headline:   1.45rem;  /* Headline pro Beitrag          */
  --groesse-fliesstext: 1rem;     /* Fließtext                     */
  --groesse-klein:      0.78rem;  /* Bildunterschriften, Datum      */

  /* --- LAYOUT ---
     Tipp: alle Werte als % oder rem angeben.
     Beim Ändern von --abstand-links muss auch
     top: in .entry-header evtl. angepasst werden. */

  --abstand-links:  28%;    /* Leerer Platz links – schiebt alles nach rechts */
  --breite-text:    37%;    /* Breite der Textspalte                           */
  --luecke-mitte:   2rem;   /* Abstand zwischen Text und Bildspalte            */
  --seitenrand:     2rem;   /* Außenabstand links und rechts                   */

  /* --- ABSTÄNDE VERTIKAL --- */
  --abstand-hero-oben:     2.5rem; /* Luft über dem Hero-Titel          */
  --abstand-hero-unten:    0rem;   /* Luft unter dem Hero-Titel         */
  --abstand-eintrag-unten: 5rem;   /* Luft am Ende jedes Beitrags       */

}


/* =====================================================
   2. BASIS
   Grundlegendes Reset und Body-Styling.
   Hier normalerweise nichts ändern.
===================================================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* Basis-Schriftgröße: alle rem-Werte beziehen sich darauf.
     Größer = alles wächst mit. */
  font-size: 13px;
}

body {
  font-family: var(--font-titel);
  background: var(--farbe-weiss);
  color: var(--farbe-schwarz);
  min-height: 100vh;
}

body::before,
body::after {
  content: '';
  position: fixed;
  left: 0;
  right: 0;
  height: var(--fade-hoehe);
  z-index: 300;
  pointer-events: none;
}

body::before {
  top: 0;
  background: linear-gradient(to bottom, var(--farbe-weiss), transparent);
}

body::after {
  bottom: 0;
  background: linear-gradient(to top, var(--farbe-weiss), transparent);
}

/* =====================================================
   3. SEITEN-HEADER
   Schmale Leiste ganz oben, immer sichtbar.
   Zeigt den Blog-Untertitel in Grün.
===================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 200; /* Liegt über allem anderen */
  background: var(--farbe-transparent);
  border-bottom: var(--linie-staerke) solid var(--farbe-grau-hell);
  padding: 0.5rem var(--seitenrand);
}

/* Grid damit der Titel bündig mit dem Text startet */
/*.site-header-inner {
  display: grid;
  grid-template-columns: var(--abstand-links) 1fr;
}
*/

/* Flex damit der Titel z.B. mittig steht */
.site-header {
	display: flex;
	justify-content: center;
	align-items: center;
}

.site-title {
  grid-column: 2;
  font-family: var(--font-text);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--farbe-gruen);
}


/* =====================================================
   4. HERO-TITEL
   Das große "WORTMARKE" – erscheint nur einmal
   ganz oben auf der Seite.
===================================================== */

.hero {
  padding: var(--abstand-hero-oben) var(--seitenrand) var(--abstand-hero-unten);
  display: grid;
  grid-template-columns: var(--abstand-links) 1fr;
}

.hero-title {
  grid-column: 2;
  font-family: var(--font-h1);
  font-size: var(--groesse-hero);
  font-weight: 700;
  line-height: 1.0;
  color: var(--farbe-gruen);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}


/* =====================================================
   5. BEITRAGS-HEADER (sticky pro Eintrag)
   Jeder Beitrag hat eine eigene Headline + Meta-Zeile,
   die beim Scrollen oben hängen bleibt – bis der
   nächste Beitrag kommt und sie ablöst.
===================================================== */

.entry {
  position: relative;
  border-top: var(--linie-staerke) solid var(--farbe-grau-hell);
}

.entry-header {
  position: sticky;
  top: 1rem; /* Direkt unter dem Seiten-Header – anpassen wenn der Header höher wird */
  z-index: 100;
  background: var(--farbe-transparent);
  padding: 0rem var(--seitenrand) 0.5rem;
  display: flex;
  justify-content: flex-start;
  /*grid-template-columns: var(--abstand-links) 1fr; */
}

.entry-header-inner {
  grid-column: 2;
}

/* Die grüne Headline des Beitrags */
.entry-headline {
  font-family: var(--font-titel);
  font-size: var(--groesse-headline);
  font-weight: 700;
  color: var(--farbe-gruen);
  line-height: 1.15;
  margin-bottom: 0.35rem;
}

/* "● 001  mar 31" */
.entry-meta {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.85rem;
}

/* Grüner Bullet-Punkt */
.entry-status {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--farbe-grau-mitte); /* grau = nicht live */
  flex-shrink: 0;
}
.entry-status.live {
  background: var(--farbe-gruen);      /* grün = live/aktuell */
  box-shadow: 0 0 5px var(--farbe-gruen);
}

.entry-number { font-weight: 700; }
.entry-date   { color: var(--farbe-grau-mitte); }


/* =====================================================
   6. BEITRAGS-INHALT
   Dreispaltiges Grid:
   [Leerraum links] [Text] [Lücke] [Bilder]
===================================================== */

.entry-body {
  display: grid;
  grid-template-columns: var(--abstand-links) var(--breite-text) var(--luecke-mitte) 1fr;
  padding: 0rem var(--seitenrand) var(--abstand-eintrag-unten);
}

/* Textspalte */
.entry-text {
  grid-column: 2;
  font-family: var(--font-text-v2);
  font-size: var(--groesse-fliesstext);
  line-height: 1.3;
}

.entry-text p + p {
  text-indent: 2em;
}

.entry-text p {
  margin-bottom: 1.1em;
  text-align: left;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* "xoxo Gerro" – zentriert am Ende */
.entry-text p.sign-off {
  text-align: center;
  color: var(--farbe-gruen);
  font-family: var(--font-sig);
  font-size: var(--groesse-headline);
  margin-top: 1.5em;
  margin-bottom: 0;
}

/* Bildspalte */
.entry-imgs {
  grid-column: 4;
  display: flex;
  flex-direction: column;
  gap: 0rem; /* Abstand zwischen den einzelnen Bildern */
}


/* =====================================================
   7. BILDER & BILDUNTERSCHRIFTEN
   Bilder sind klickbar → öffnen die Lightbox.
   Fehlt ein Bild, erscheint ein Platzhalter.

   BILDER EINBINDEN:
   Lege deine Fotos in einen Ordner "img/" neben
   dieser CSS-Datei. Im HTML dann:
   <img src="img/mein-foto.jpg" alt="Beschreibung" />
===================================================== */

figure.img-item {
  cursor: pointer;
  display: block;
}

figure.img-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 0.12s;
}

figure.img-item:hover img {
  opacity: 0.85; /* Hover-Effekt – 1 = kein Effekt */
}

/* Platzhalter wenn Bild fehlt */
figure.img-item.placeholder img { display: none; }
figure.img-item.placeholder::before {
  content: '';
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #ebebeb;
  border: 1px dashed var(--farbe-grau-mitte);
}

/* Bildunterschrift: "abb 001   Beschreibung" */
figcaption {
  display: flex;
  gap: 0.8rem;
  margin-top: 0.3rem;
  font-family: var(--font-info);
  font-size: var(--groesse-klein);
  line-height: 1.35;
}

.fig-num     { color: var(--farbe-grau-mitte); min-width: 4rem; flex-shrink: 0; }
.fig-caption { color: var(--farbe-schwarz); }


/* =====================================================
   8. FOOTER
===================================================== */

footer {
  padding: 1.2rem var(--seitenrand) 2rem;
  border-top: var(--linie-staerke) solid var(--farbe-grau-hell);
}

footer a {
  font-size: var(--groesse-klein);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--farbe-schwarz);
  text-decoration: none;
}
footer a:hover { color: var(--farbe-gruen); }


/* =====================================================
   9. LIGHTBOX
   Öffnet sich beim Klick auf ein Bild.
   Steuerung: Pfeiltasten ← →, ESC zum Schließen,
   oder die kleinen Vorschaubilder unten anklicken.
===================================================== */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none; /* wird per JS geöffnet */
  flex-direction: column;
  background: rgba(255, 255, 255, 0.82);
}
.lightbox.open { display: flex; }

/* *** Schließen-Button oben rechts */
.lb-close {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  background: none;
  border: none;
  font-family: var(--font-titel);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--farbe-schwarz);
  letter-spacing: 0.15em;
  z-index: 10;
}
.lb-close:hover { color: var(--farbe-gruen); }

/* Großes Bild in der Mitte */
.lb-inner {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3.5rem 5rem 0;
  overflow: hidden;
}

.lb-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.12);
}

/* ← fig 001 / 004 → */
.lb-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.7rem 0 0.3rem;
}

.lb-nav {
  background: none;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  color: var(--farbe-schwarz);
  padding: 0.2rem 0.5rem;
}
.lb-nav:hover { color: var(--farbe-gruen); }

.lb-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--farbe-gruen);
}

.lb-counter {
  font-size: var(--groesse-klein);
  letter-spacing: 0.06em;
  color: var(--farbe-grau-mitte);
  min-width: 6.5rem;
  text-align: center;
}

/* Bildunterschrift + Thumbnails unten */
.lb-caption-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0.3rem 5rem 1.5rem;
  gap: 2rem;
}

.lb-caption-text {
  font-size: var(--groesse-klein);
  color: var(--farbe-schwarz);
  flex: 1;
  line-height: 1.35;
}


/* =====================================================
   10. RESPONSIVE
   Auf kleinen Bildschirmen (Handy/Tablet) wird das
   Layout eingespaltig: Bilder erscheinen unter dem Text.
===================================================== */

@media (max-width: 800px) {

  .entry-body {
    grid-template-columns: 1fr; /* Kein Mehrspaltenlayout mehr */
  }

  .entry-text { grid-column: 1; }
  .entry-imgs {
    grid-column: 1;
    margin-top: 1.5rem;
  }

  .hero-title { font-size: 2rem; }

  .lb-inner       { padding: 3rem 1.2rem 0; }
  .lb-caption-row { padding: 0.3rem 1.2rem 1.2rem; flex-direction: column; }

}

/* =====================================================
   11. DRAG & DROP BILDER
   Zwei PNGs die zufällig auf der Seite platziert
   werden und per Drag & Drop verschoben werden können.
   Größe anpassen mit: width
   Bilder tauschen im HTML: src="img/sticker1.png"
===================================================== */

.drag-img {
  position: fixed;
  z-index: 400;
  cursor: grab;
  width: 240px;    /* ← Größe anpassen */
  user-select: none;
}