/* =========================================================
   main.css — clean landing page + tile hover labels

   Ziel dieses Stylesheets:
   - Schlichtes, modernes Layout (Header → Banner → Kacheln → Footer)
   - Responsive Grid (passt sich an Bildschirmgrößen an)
   - Kachel-Hover: Bild zoomt leicht, wird abgedunkelt, Text blendet ein
   ========================================================= */


/* =========================================================
   1) BASE / RESET
   ---------------------------------------------------------
   "Reset" bedeutet: Wir machen Grundregeln, damit Browser
   möglichst gleich reagieren (sonst hat jeder Browser kleine
   Standard-Unterschiede).
   ========================================================= */

/* Setzt für ALLE Elemente ein berechenbares Box-Modell:
   - width/height beinhalten dann auch padding & border
   - vermeidet "warum ist das plötzlich breiter?!" */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* CSS-Variablen: wiederverwendbare Werte an einem Ort.
   Vorteil: Du kannst später Farb- oder Größen-Themen ändern,
   ohne überall im CSS suchen zu müssen. */
:root {
  --bg: #f7f7f7;          /* Hintergrundfarbe der Seite */
  --surface: #ffffff;     /* "Karten"-Hintergrund (Header, Banner, Footer) */
  --text: #1f2328;        /* Standard-Textfarbe */
  --muted: #6b7280;       /* "leiser" Text (z. B. Navigation, Footer) */
  --border: #e5e7eb;      /* feine Linien / Rahmen */
  --link: #0b5fff;        /* Linkfarbe (hier nur als Option; später nutzbar) */
  --maxw: 980px;          /* maximale Inhaltsbreite (zentriertes Layout) */
  --radius: 16px;         /* abgerundete Ecken (Banner/Kacheln) */
}

/* Aktiviert ein sanftes Scrollen bei Anker-Links (#id),
   sodass die Seite weich zum Ziel gleitet statt abrupt zu springen. */
html {
  scroll-behavior: smooth;
}

/* Deaktiviert sanftes Scrollen für Nutzer:innen,
   die in ihrem System „Bewegung reduzieren“ aktiviert haben. */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Damit Layouts mit 100% Höhe sauber funktionieren können,
   setzen wir html & body auf volle Höhe. */
html, body {
  height: 100%;
}

/* Grundstil der gesamten Seite */
body {
  margin: 0; /* Browser-Standardrand entfernen */
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.6;       /* Zeilenabstand → besser lesbar */
  color: var(--text);     /* Standard-Textfarbe */
  background: var(--bg);  /* Seitenhintergrund */
}


/* =========================================================
   2) HEADER (oben: Titel + kleine Navigation)
   ========================================================= */

/* Der Header ist eine "Surface" (weißer Block) + feine Linie unten */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

/* Innerer Header-Container:
   - zentriert und begrenzt auf max Breite
   - Flexbox: Title links, Navigation rechts */
.header-inner {
  max-width: var(--maxw);
  margin: 0 auto;                 /* zentriert den Container */
  padding: 1.25rem 1rem;          /* Innenabstand */
  display: flex;                  /* horizontale Anordnung */
  align-items: baseline;          /* Titel & Links auf "Textlinie" ausrichten */
  justify-content: space-between; /* maximaler Abstand zwischen links/rechts */
  gap: 1rem;                      /* Abstand, falls es umbrechen muss */
}

/* Der Seitentitel (Name) */
.site-title {
  margin: 0;             /* Standardabstände entfernen */
  font-size: 1.4rem;     /* moderat groß */
  letter-spacing: 0.2px; /* minimal "luftiger" */
}

/* Navigation als horizontale Linkliste */
.top-nav {
  display: flex;
  gap: 0.9rem;      /* Abstand zwischen Links */
  flex-wrap: wrap;  /* wenn wenig Platz: Zeilenumbruch statt Überlappung */
}

/* Links in der Top-Navigation: eher leise (muted) */
.top-nav a {
  font-size: 0.95rem;
  color: var(--muted);
  text-decoration: none; /* Unterstreichung weg */
}

/* Hover-Effekt: wird kräftiger & unterstrichen */
.top-nav a:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 4px; /* Unterstreichung etwas "unter" dem Text */
}


/* =========================================================
   3) MAIN CONTENT (zentrierte Inhaltsfläche)
   ========================================================= */

.content {
  max-width: var(--maxw);
  margin: 0 auto;                 /* zentriert */
  padding: 1.25rem 1rem 3rem;     /* unten mehr Platz, wirkt luftiger */
}



/* Der <hr>-Divider: wir stylen ihn, damit er "clean" aussieht */
.divider {
  border: 0;                          /* Standardrahmen entfernen */
  border-top: 1px solid var(--border);/* nur eine feine Linie oben */
  margin: 1.25rem 0;                  /* Abstand nach oben/unten */
}


/* Trennlinie zwischen EN/DE: extra subtil */
.lang-divider{
  border:0;
  border-top:1px solid rgba(42,50,68,.55);
  margin: .9rem 0;
}

/* Optional: Details-Blocks leicht „gerahmt“, aber unaufdringlich */
details.news-details{
  border:1px solid rgba(42,50,68,.55);
  border-radius:12px;
  padding:.5rem .65rem;
  background:rgba(15,19,32,.01);
  margin:.75rem 0;
}
details.news-details > summary{
  cursor:pointer;
  color:var(--muted);
  font-weight:650;         /* minimal weniger „laut“ */
  letter-spacing:.2px;
  list-style:none;
  user-select:none;
}
details.news-details > summary:hover{
  color:var(--text);       /* nur beim Hover etwas präsenter */
}

details.news-details > summary::-webkit-details-marker{display:none}
details.news-details[open] > summary{color:var(--text)}

/* =========================================================
   4) "WIDE BANNER" / HERO
   ---------------------------------------------------------
   Das ist dein "Breitbild"-Bereich:
   - kein Bild, aber Banner-Format
   - zentrierter Satz / Zitat
   ========================================================= */

.hero {
  background: var(--surface);          /* weißer Banner */
  border: 1px solid var(--border);     /* feiner Rahmen */
  border-radius: var(--radius);        /* abgerundete Ecken */
  padding: 2rem 1.25rem;               /* Innenabstand */
  min-height: 160px;                   /* macht es "bannerartig" */
  display: grid;
  place-items: center;                 /* zentriert Inhalt horizontal+vertikal */
}

/* Text im Banner:
   - begrenzte Zeilenlänge (max-width in Zeichen)
   - zentriert und etwas größer */
.hero-quote {
  margin: 0;
  max-width: 42ch;        /* "ch" = ungefähre Zeichenbreite → gute Lesbarkeit */
  text-align: center;
  font-size: 1.35rem;
  line-height: 1.35;
}


/* =========================================================
   5) TILE GRID (Fotokacheln)
   ---------------------------------------------------------
   Du hast ein Raster mit Kacheln.
   Jede Kachel ist:
   - ein Link (klickbar)
   - hat ein Bild
   - beim Hover:
       * Bild zoomt leicht
       * dunkler Overlay
       * Label blendet ein
   ========================================================= */

/* Optionaler Abstand nach oben (klein) */
.tile-section {
  margin-top: 0.5rem;
}

/* Das Grid: 3 Spalten standardmäßig */
.tile-grid {
  display: grid;
  gap: 1rem; /* Abstand zwischen Kacheln */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* repeat(3, ...) = 3 gleiche Spalten
     1fr = je ein Drittel der Breite
     minmax(0, 1fr) verhindert overflow-Probleme */
}


/* =========================================================
   6) RESPONSIVE DESIGN ( Queries)
   ---------------------------------------------------------
   Damit es auf Tablet/Handy gut aussieht.
   ========================================================= */

/* Ab 900px und kleiner: nur 2 Spalten (mehr Platz pro Kachel) */
@media (max-width: 900px) {
  .tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .toc_column {
    column-count: 2;
  }
}

/* Ab 560px und kleiner: Navigation unter den Titel + 1 Spalte Kacheln */
@media (max-width: 560px) {
  .header-inner {
    align-items: flex-start;   /* oben ausrichten */
    flex-direction: column;    /* Titel über Navigation */
  }
  .tile-grid {
    grid-template-columns: 1fr; /* eine Spalte */
  }
  .toc_column {
    column-count: 1;
  }
}

/* =========================================================
   Responsive News / Media Images
   ---------------------------------------------------------
   Ziel:
   - mobil: Bilder untereinander
   - größere Displays: 2 Bilder nebeneinander
   - Einzelbild bleibt vollbreit
   - auf Mobile kontrollierte, einheitliche Höhe
   ========================================================= */

.media img {
  max-width: 100%;
  height: auto;
  display: block;
}

.media-row {
  display: grid;
  grid-template-columns: 1fr; /* mobil: immer untereinander */
  gap: 1rem;
}

/* Falls nur ein einziges Bild vorhanden ist:
   bleibt es immer vollbreit */
.media-row:has(> .media:only-child) {
  grid-template-columns: 1fr;
}

.media-row .media {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Mobile / Standard:
   kontrollierte Höhe, kein wildes Hochwachsen */
.media-row img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
  border-radius: calc(var(--radius) - 4px);
}

/* Kompakte News-Bilder auf Mobile etwas niedriger */
.media-row--compact img {
  height: 220px;
  object-fit: cover;
}

/* Ab ausreichend breitem Display:
   2 Spalten, aber nur wenn mehr als 1 Bild da ist */
@media (min-width: 700px) {
  .media-row:not(:has(> .media:only-child)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .media-row img {
    height: 760px;
  }

  .media-row--compact img {
    height: 380px;
  }
}

/* Auf sehr kleinen Displays noch etwas kompakter */
@media (max-width: 420px) {
  .media-row img {
    height: 220px;
  }

  .media-row--compact img {
    height: 190px;
  }
}

/* =========================================================
   Astronomy Image Style
   Nur für Sternkarten / Astro-Inhalte
   ========================================================= */

.astronomy img {
  width: 100%;
  height: 380px;
  object-fit: contain;   /* vollständige Sternkarte sichtbar */
  background: #000;      /* füllt leere Fläche sauber */
  display: block;
}

/* =========================================================
   7) KACHEL-STYLING (Tile + Bild + Overlay + Label)
   ========================================================= */

/* Die Kachel selbst ist ein Link <a>:
   - relative Position, damit Label & Overlay absolut platziert werden können
   - overflow hidden, damit Zoom nicht über die Kachel hinaus "rausläuft"
   - aspect-ratio sorgt für ein einheitliches Format, egal wie groß das Bild ist */
.tile {
  position: relative;
  display: block;                 /* macht den Link block-weit klickbar */
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #111;               /* Fallback: falls Bild fehlt, sieht's ok aus */
  text-decoration: none;          /* Link-Unterstreichung weg */
  aspect-ratio: 16 / 10;          /* einheitliche "Foto-Kachel" Proportion */
}

/* Das Bild füllt die Kachel komplett.
   object-fit: cover bedeutet:
   - Bild wird NICHT verzerrt
   - Bild wird ggf. beschnitten, damit es das Format füllt */
.tile-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;                 /* verhindert kleine "Bild-Unterkante" Lücken */
  transform: scale(1.01);         /* minimaler Zoom (sieht oft nicer aus) */
  transition: transform 180ms ease; /* sanfter Zoom beim Hover */
}

/* Der dunkle Overlay ist kein extra HTML-Element, sondern ein pseudo-element.
   Vorteil: du brauchst im HTML keinen extra <div>.
   Standardmäßig ist er unsichtbar (rgba alpha 0). */
.tile::before {
  content: "";
  position: absolute;
  inset: 0;                         /* = top/right/bottom/left: 0 */
  background: rgba(0, 0, 0, 0);     /* transparent */
  transition: background 180ms ease;
  pointer-events: none;             /* Overlay blockiert nicht den Klick */
}

/* Der Text (Label) unten:
   - absolut positioniert
   - zunächst unsichtbar (opacity 0) und leicht nach unten verschoben */
.tile-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  padding: 0.85rem 1rem;
  color: #fff;

  font-size: 1.75rem;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.612); /* Die Syntax: text-shadow: [rechts] [unten] [unschärfe] [farbe]; */
  font-weight: 600;
  letter-spacing: 0.2px;

  opacity: 0;                        /* zunächst unsichtbar */
  transform: translateY(10px);       /* leicht nach unten */
  transition: opacity 180ms ease, transform 180ms ease;
}


/* =========================================================
   8) HOVER + FOCUS BEHAVIOR
   ---------------------------------------------------------
   Hover = Maus drüber
   Focus = Tastatur-Navigation (Tab)
   focus-visible = zeigt Fokus nur, wenn wirklich per Tastatur
   ========================================================= */

/* Wenn du hoverst oder per Tastatur fokussierst:
   - Bild zoomt etwas stärker */
.tile:hover .tile-image,
.tile:focus-visible .tile-image {
  transform: scale(1.06);
}

/* Overlay wird sichtbar (dunkelt ab), damit Label gut lesbar ist */
.tile:hover::before,
.tile:focus-visible::before {
  background: rgba(0, 0, 0, 0.35);
}

/* Label blendet ein und "rutscht" nach oben */
.tile:hover .tile-label,
.tile:focus-visible .tile-label {
  opacity: 1;
  transform: translateY(0);
}

/* Fokus-Rahmen für Tastaturbenutzer (Accessibility):
   - zeigt klar, welche Kachel aktiv ist */
.tile:focus-visible {
  outline: 3px solid rgba(11, 95, 255, 0.45);
  outline-offset: 3px;
}


/* =========================================================
   9) FOOTER
   ========================================================= */

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding: 1.25rem 1rem;
  text-align: center;
  color: var(--muted);
}


/* =========================================================
   Subtle page background images (blurred + desaturated)
   Apply by adding: <body class="has-bg bg-sailing">
   ========================================================= */

   
body.has-bg {
  position: relative; /* needed so ::before/::after can be positioned */
}

/* The background image layer (blurred + desaturated) */
body.has-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: var(--page-bg) center / cover no-repeat;

  filter: /*grayscale(1)*/ saturate(.5) blur(3px);
  transform: scale(1.08);

  opacity: 0.55; /* TEST: deutlich */
}

body.has-bg::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;

 
  background: rgba(247, 247, 247, 0.399); /* TEST: weniger Weiß, mehr "Durchscheinen" */
}

/*ZIELWERTE, ABER PASSEN NICHT*/
/*
body.has-bg::before { opacity: 0.28; filter: grayscale(1) saturate(0.25) blur(10px); }
body.has-bg::after  { background: rgba(247, 247, 247, 0.78); }
*/



/* Define per-section background images via CSS variables */
body.bg-sailing      { --page-bg: url("../img/sailing.jpg"); }
body.bg-code         { --page-bg: url("../img/code.png"); }
body.bg-electronics  { --page-bg: url("../img/electronics.jpg"); }
body.bg-making       { --page-bg: url("../img/making.jpg"); }
body.bg-nerdism      { --page-bg: url("../img/nerdism.jpg"); }
body.bg-words        { --page-bg: url("../img/words.jpg"); }
body.bg-botanics     { --page-bg: url("../img/botanics.jpg"); }
body.bg-music        { --page-bg: url("../img/music_music2.png"); }
body.bg-astronomy    { --page-bg: url("../img/moon_plabutsch03.jpeg"); }
body.bg-outdoor      { --page-bg: url("../img/outdoor001.jpeg"); }
body.bg-index        { --page-bg: url("../img/index_mashup.png"); }






/* =========================================================
   Card / Blog-Post UI-Bausteine - Für Endkonoten (Artikel)
   ---------------------------------------------------------
   Ziel:
   - “Karten” (Cards) für blogartige Einträge: Titel + Meta + Text + Medien
   - Platzhalter für Bilder/Medien (z.B. solange noch kein Foto vorhanden ist)
   - Ein kleines Inhaltsverzeichnis (TOC) mit sauberen Links
   ---------------------------------------------------------
   Hinweis:
   - Die Variablen (z.B. --surface, --border, --radius, --text, --muted)
     sollten irgendwo global definiert sein (meist :root).
   ========================================================= */


/* ---------------------------------------------------------
   .card
   ---------------------------------------------------------
   Der Container für einen Post/Abschnitt:
   - bekommt einen “Panel”-Hintergrund
   - leichte Umrandung (Border)
   - abgerundete Ecken
   - Innenabstand (Padding) für Luft
   - Außenabstand (Margin), damit mehrere Cards nicht kleben
--------------------------------------------------------- */
.card {
  /* Hintergrundfarbe über CSS-Variable:
     Vorteil: Dark-Mode/Theme-Wechsel nur über Variablen nötig */
  background: var(--surface);

  /* Dezente Umrandung, ebenfalls per Variable steuerbar */
  border: 1px solid var(--border);

  /* Einheitlicher Radius für “weiche” Cards */
  border-radius: var(--radius);

  /* Innenabstand: 1.25rem links/rechts & oben/unten
     rem skaliert mit der Schriftgröße (zugänglicher/responsiver) */
  padding: 1.25rem 1.25rem;

  /* Außenabstand: oben/unten 1rem, links/rechts 0
     -> Cards stehen untereinander mit angenehmer Distanz */
  margin: 1rem 0;
}


/* ---------------------------------------------------------
   .card-title
   ---------------------------------------------------------
   Titel innerhalb einer Card.
   Typisch: h2/h3 oder ein <div> mit dieser Klasse.
--------------------------------------------------------- */
.card-title {
  /* margin: 0 0 0.5rem;
     - oben 0: damit der Titel nicht “nach oben rausdrückt”
     - unten 0.5rem: kleiner Abstand zum nächsten Element (Meta/Text) */
  margin: 0 0 0.5rem;

  /* leicht größere Schrift als Fließtext:
     1.15rem ist subtil (nicht “Zeitungsüberschrift”, eher “Section Title”) */
  font-size: 1.15rem;
}


/* ---------------------------------------------------------
   .card-meta
   ---------------------------------------------------------
   Meta-Infos: Datum, Kategorie, Tags, Lesedauer, Autor, etc.
   Wird optisch “leiser” gemacht als der Haupttext.
--------------------------------------------------------- */
.card-meta {
  /* Kein Abstand oben (hängt direkt am Titel),
     dafür etwas mehr unten, damit der Bodytext Luft hat */
  margin: 0 0 0.9rem;

  /* Muted-Farbe: weniger Kontrast -> wirkt sekundär */
  color: var(--muted);

  /* Minimal kleiner als normaler Text:
     Lesbar, aber klar “Meta” */
  font-size: 0.95rem;
}


/* ---------------------------------------------------------
   .hint
   ---------------------------------------------------------
   Kleine Hinweise/Infotexte, z.B.:
   “Tipp: Klick auf …”, “Hinweis: …”, “TODO: …”
--------------------------------------------------------- */
.hint {
  /* Auch hier gedämpfte Farbe,
     damit es nicht wie Hauptcontent wirkt */
  color: var(--muted);

  /* Konsistent zur Meta-Größe */
  font-size: 0.95rem;
}


/* ---------------------------------------------------------
   .media
   ---------------------------------------------------------
   Wrapper um Medieninhalte (figure/img/video).
   Typisch: unterhalb vom Text.
--------------------------------------------------------- */
.media {
  /* Abstand nach oben:
     Der Medienblock soll nicht direkt am Text kleben.
     left/right/bottom bleiben 0, weil die Card schon padding hat. */
  margin: 1rem 0 0;
}


/* ---------------------------------------------------------
   .media-placeholder
   ---------------------------------------------------------
   Platzhalterfläche für Bilder/Medien:
   - solange noch kein Bild vorhanden ist
   - oder als “Dropzone”-Optik
--------------------------------------------------------- */
.media-placeholder {
  /* Gepunktete/gestrichelte Linie signalisiert “Platzhalter / kommt noch” */
  border: 1px dashed var(--border);

  /* Ein klein wenig weniger Radius als die Card,
     damit es “eingebettet” wirkt */
  border-radius: calc(var(--radius) - 4px);

  /* Heller Hintergrund (leicht transparent):
     - auf hellen Themes sehr sanft
     - auf dunklen Themes musst du ggf. anpassen, siehe Hinweis unten */
  background: rgba(255, 255, 255, 0.6);

  /* Mindesthöhe sorgt dafür, dass die Box “wie ein Bild” wirkt,
     auch wenn nur Text drin steht */
  min-height: 220px;

  /* Zentrierung des Inhalts:
     display:grid + place-items:center ist ein knackiger Weg,
     Text/Icons landen sauber mittig */
  display: grid;
  place-items: center;

  /* Gedämpfte Textfarbe, wieder “sekundär” */
  color: var(--muted);

  /* Innenabstand: damit Text nicht an der Border klebt */
  padding: 1rem;

  /* Zentrierter Text macht Placeholder-Messages ruhiger */
  text-align: center;
}


/* ---------------------------------------------------------
   .media figcaption
   ---------------------------------------------------------
   Bild-/Medienunterschrift im figure-Element.
   Beispiel:
   <figure class="media">
     <img ...>
     <figcaption>…</figcaption>
   </figure>
--------------------------------------------------------- */
.media figcaption {
  /* Abstand zur Bildkante nach oben */
  margin-top: 0.5rem;

  /* Unterschrift ist sekundär: muted */
  color: var(--muted);

  /* Etwas kleiner, aber noch gut lesbar */
  font-size: 0.95rem;
}


/* ---------------------------------------------------------
   .toc
   ---------------------------------------------------------
   Table of contents (Inhaltsverzeichnis), meist ein <ul> oder <ol>.
   Wir setzen:
   - keine extra margin (damit es sauber in Cards passt)
   - einheitliches left-padding für die Listenpunkte
--------------------------------------------------------- */
.toc {
  /* margin 0: Liste soll nicht extra Abstand nach außen erzeugen,
     besonders praktisch in kompakten Seitenleisten oder in Cards */
  margin: 0;

  /* Linke Einrückung der Liste:
     1.2rem ist “klassisch angenehm” für bullets/nummern */
  padding-left: 1.2rem;
}


/* ---------------------------------------------------------
   .toc a
   ---------------------------------------------------------
   Links im Inhaltsverzeichnis:
   - gleiche Farbe wie normaler Text (wirkt “integriert”)
   - keine Unterstreichung im Normalzustand (clean)
--------------------------------------------------------- */
.toc a {
  /* Textfarbe: nutzt die normale Textfarbe,
     damit es nicht wie “Fremdkörper-Linkblau” wirkt */
  color: var(--text);

  /* Unterstreichung erst bei Hover,
     sonst wirkt das TOC “ruhiger” */
  text-decoration: none;
}


/* ---------------------------------------------------------
   Hover-Zustand für TOC-Links
   ---------------------------------------------------------
   Unterstreichung nur beim Drüberfahren:
   - klare Interaktivitätsrückmeldung
   - underlined offset gibt ein bisschen Luft zur Schrift
--------------------------------------------------------- */
.toc a:hover {
  text-decoration: underline;

  /* Abstand der Unterstreichung zur Schrift:
     wirkt edler und besser lesbar */
  text-underline-offset: 3px;
}


.toc_column {
  column-count: 4;       /* Anzahl der Spalten */
  column-gap: 2rem;      /* Abstand zwischen Spalten */
}

.toc_column li {
  break-inside: avoid;
  margin-bottom: 0.35rem;
}


/* =========================================================
   GLOBAL LINK STYLING
   ---------------------------------------------------------
   Ziel:
   - Links klar erkennbar, aber nicht „blau schreiend“
   - Unterstreichung als Bedeutungsträger, nicht als Deko
   - Gute Lesbarkeit + sauberes Hover-/Focus-Verhalten
   ========================================================= */

a {
  color: var(--text);                 /* integriert in den Text */
  text-decoration: underline;
  text-decoration-color: rgba(31, 35, 40, 0.35); /* subtil */
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;

  transition:
    color 120ms ease,
    text-decoration-color 120ms ease;
}

/* Hover: klarer, aber nicht laut */
a:hover {
  color: var(--text);
  text-decoration-color: currentColor;
}

/* Fokus (Tastatur!) */
a:focus-visible {
  outline: 2px solid rgba(11, 95, 255, 0.45);
  outline-offset: 2px;
}



/* =========================================================
   News Markdown Extras
   ---------------------------------------------------------
   Ergänzt news.js um:
   - # / ## / ### Überschriften
   - ``` Codeblöcke
   - `inline code`
   ========================================================= */

.news-body h3,
.news-teaser h3 {
  margin: 1.2rem 0 0.65rem;
  font-size: 1.2rem;
  line-height: 1.3;
}

.news-body h4,
.news-teaser h4 {
  margin: 1rem 0 0.55rem;
  font-size: 1.05rem;
  line-height: 1.3;
}

.news-body h5,
.news-teaser h5 {
  margin: 0.9rem 0 0.5rem;
  font-size: 0.98rem;
  line-height: 1.3;
  color: var(--muted);
}

/* Codeblock */
.news-body pre,
.news-teaser pre {
  overflow-x: auto;
  margin: 1rem 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(15, 19, 32, 0.04);
  line-height: 1.5;
}

/* Monospace allgemein */
.news-body code,
.news-teaser code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.92em;
}

/* Inline-Code */
.news-body :not(pre) > code,
.news-teaser :not(pre) > code {
  padding: 0.12rem 0.38rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(15, 19, 32, 0.04);
  white-space: break-spaces;
}

/* Code innerhalb von pre nicht nochmal dekorieren */
.news-body pre code,
.news-teaser pre code {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 0.95em;
  white-space: pre;
}

/* Optional: etwas Luft zwischen Absätzen und Überschriften */
.news-body p + h3,
.news-body p + h4,
.news-body p + h5,
.news-teaser p + h3,
.news-teaser p + h4,
.news-teaser p + h5 {
  margin-top: 1.35rem;
}



/* =========================================================
   Cheatsheet blocks
   ---------------------------------------------------------
   Für HTML/CSS/Python-Cheatsheets:
   - Kartenartige Einzelblöcke
   - kleine Codefelder
   - leichtes Syntax Highlighting
   ========================================================= */

.cheat-grid {
  display: grid;
  gap: 1.25rem;
  margin: 1rem 0 2rem;
}

.cheat-item {
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 4px);
  background: rgba(15, 19, 32, 0.02);
}

.cheat-item h4 {
  margin-top: 0;
  margin-bottom: 0.6rem;
}

.cheat-code {
  display: block;
  overflow-x: auto;
  margin: 0.85rem 0;
  padding: 0.9rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(15, 19, 32, 0.04);
  line-height: 1.55;
  font-size: 0.95rem;
}

.cheat-code code {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  white-space: pre;
}

/* Simple HTML syntax highlighting */
.cheat-code-html .cheat-token-tag {
  color: #0b5fff;
}

.cheat-code-html .cheat-token-attr {
  color: #9a6700;
}

.cheat-code-html .cheat-token-val {
  color: #137333;
}

.cheat-code-html .cheat-token-com {
  color: var(--muted);
  font-style: italic;
}

@media (min-width: 901px) {
  .cheat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}





/* =========================================================
   Klickbare News-Bilder
   ---------------------------------------------------------
   Ziel:
   - Wenn ein Bild in einen Link <a> gewrappt ist,
     soll die gesamte Bildfläche klickbar sein
   - Keine normale Link-Unterstreichung bei Bildlinks
   - Dezenter Hover-/Focus-Effekt:
       * leicht transparenter
       * minimaler Zoom
       * klare Fokus-Markierung für Tastatur-Navigation
   ========================================================= */

/* Der Link direkt um das Bild:
   - display:block macht die gesamte Fläche sauber klickbar
   - text-decoration:none entfernt die globale Link-Unterstreichung
   - gleicher Radius wie das Bild, damit Fokusrahmen und Klickfläche
     sauber zur Bildform passen */
.media > a {
  display: block;
  text-decoration: none;
  border-radius: calc(var(--radius) - 4px);
}

/* Das Bild innerhalb des Links:
   - display:block verhindert kleine Inline-Bild-Abstände
   - transition sorgt für weiche Übergänge bei Hover/Focus */
.media > a img {
  display: block;
  transition: opacity 120ms ease, transform 120ms ease;
}

/* Hover mit Maus + Focus per Tastatur:
   - Bild wird minimal transparenter
   - leichter Zoom signalisiert Interaktivität
   - cursor: zoom-in deutet an, dass sich das Bild größer öffnen lässt */
.media > a:hover img,
.media > a:focus-visible img {
  opacity: 0.92;
  transform: scale(1.01);
  cursor: zoom-in;
}

/* Sichtbarer Fokusrahmen für Accessibility:
   - wichtig für Tastaturbenutzer:innen
   - outline liegt außerhalb des Elements und verschiebt das Layout nicht
   - border-radius hält die Fokuslinie optisch konsistent */
.media > a:focus-visible {
  outline: 2px solid rgba(11, 95, 255, 0.45);
  outline-offset: 3px;
  border-radius: calc(var(--radius) - 4px);
}


/* =========================================================
   Anchorage head block
   ---------------------------------------------------------
   Zweck:
   - Oberer "Steckbrief"-Bereich einer Bucht
   - Links: Karte / Screenshot
   - Rechts: kurzer Beschreibungstext + Faktenliste
   - Mobil: untereinander
   - Desktop: sauber 50 / 50
   ========================================================= */

/* ---------------------------------------------------------
   Container des gesamten Blocks
   ---------------------------------------------------------
   - grid: sorgt für klare Spaltenstruktur
   - mobil: 1 Spalte (untereinander)
   - gap: Luft zwischen Bild und Text
--------------------------------------------------------- */
.anchorage-head {
  display: grid;

  /* Standard (mobil): alles untereinander */
  grid-template-columns: 1fr;

  gap: 1rem;                /* Abstand zwischen den Elementen */
  align-items: start;       /* verhindert vertikales Strecken */
  margin: 1rem 0 1.25rem;  /* Abstand nach außen */
}

/* ---------------------------------------------------------
   Ab Tablet/Desktop:
   - exakt zwei gleich breite Spalten
   - bewusst streng → ruhiger Gesamteindruck
--------------------------------------------------------- */
@media (min-width: 760px) {
  .anchorage-head {
    grid-template-columns: 1fr 1fr; /* 50 / 50 Layout */
  }
}

/* ---------------------------------------------------------
   Beide Spalten (Bild + Text)
   ---------------------------------------------------------
   min-width: 0 ist wichtig (!):
   - verhindert, dass lange Inhalte das Grid sprengen
   - klassischer Flex/Grid-Fallstrick
--------------------------------------------------------- */
.anchorage-map,
.anchorage-summary {
  min-width: 0;
}

/* ---------------------------------------------------------
   Figure-Reset
   ---------------------------------------------------------
   entfernt Standard-Margin von <figure>,
   damit alles sauber bündig sitzt
--------------------------------------------------------- */
.anchorage-map {
  margin: 0;
}

/* ---------------------------------------------------------
   Link um das Bild
   ---------------------------------------------------------
   - macht das ganze Bild klickbar
   - entfernt Unterstreichung
   - Radius gleich wie Bild → saubere Fokus-/Hover-Kante
--------------------------------------------------------- */
.anchorage-map a {
  display: block;
  text-decoration: none;
  border-radius: calc(var(--radius) - 4px);
}

/* ---------------------------------------------------------
   Das eigentliche Kartenbild
   ---------------------------------------------------------
   - width: 100% → füllt exakt die linke Hälfte
   - aspect-ratio: erzwingt ein einheitliches Format
   - object-fit: cover → schneidet ggf. zu, aber bleibt sauber // altenative: contain
   - border + radius → visuell wie eine "eingesetzte Karte"
--------------------------------------------------------- */
.anchorage-map img {
  display: block;
  width: 100%;

  aspect-ratio: 3 / 2;   /* definiert sichtbares Format */
  object-fit: cover;     /* füllt Fläche, ggf. Beschnitt */

  border-radius: calc(var(--radius) - 4px);
  border: 1px solid var(--border);
}

/* ---------------------------------------------------------
   Bildunterschrift (z.B. OSM Copyright)
   ---------------------------------------------------------
   - klein, zurückhaltend
   - klar getrennt vom Bild
--------------------------------------------------------- */
.anchorage-map figcaption {
  margin-top: 0.45rem;
  color: var(--muted);
  font-size: 0.9rem;
}

/* ---------------------------------------------------------
   Rechte Spalte: Textbereich
   ---------------------------------------------------------
   - flex column → Text + Liste untereinander
   - gap sorgt für gleichmäßige Abstände
--------------------------------------------------------- */
.anchorage-summary {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* ---------------------------------------------------------
   Erster Absatz im Textblock
   ---------------------------------------------------------
   - entfernt Standard-Margin
   - sorgt für kompakteren, kontrollierten Einstieg
--------------------------------------------------------- */
.anchorage-summary > p {
  margin: 0;
}

/* ---------------------------------------------------------
   Faktenliste (kleiner Steckbrief)
   ---------------------------------------------------------
   - leicht eingerückt
   - bewusst schlicht gehalten
--------------------------------------------------------- */
.anchorage-facts {
  margin: 0;
  padding-left: 1.15rem;
}

/* Einzelne Listenelemente:
   - kleiner vertikaler Abstand für bessere Lesbarkeit */
.anchorage-facts li {
  margin-bottom: 0.25rem;
}