/* ===========================================================
   Blogbeitrag — Layout 4b
   Sebastian Schäfer, Marke: Petrol #0e7490 → #8ccdc5
   Schriften: Tahoma (Titel), Trebuchet MS (Text), Courier New (Labels)
   =========================================================== */

/* Keine eigenen Custom Properties mehr hier (WEB-41, Mehr-Linsen-Review
   Runde 4): Diese Datei setzte bislang eine zweite, lokale Tokenliste an,
   die teils andere Werte für denselben Zweck führte als style.css
   (--linie z. B. dreifach: hier, dort, und noch einmal hartkodiert weiter
   unten) und teils nur Zweitnamen für identische Werte war (--petrol-hell
   = --mint, --neben = --grau, --nacht = --nachtpetrol, Letzteres nirgends
   benutzt). Alle Tokens fallen jetzt auf die :root-Werte aus style.css
   durch, eine einzige Palette, ein Nachschlageort. */
.sos-beitrag {
  background: #fff;
  color: var(--tinte);
  font-family: 'Trebuchet MS', Tahoma, sans-serif;
}

/* ---------- Kategorie-Reiter ---------- */
.sos-reiter {
  display: flex;
  column-gap: 26px;
  /* row-gap höher als column-gap, gleicht die -8px aus, die die
     Tippflächen-Vergrößerung unten bei umgebrochenen Reitern vom Abstand
     abzieht (dasselbe Prinzip wie WEB-31 beim Kopfbereich). */
  row-gap: 34px;
  align-items: flex-end;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--linie);
  margin: 34px auto 34px;
  padding: 0 24px;
  max-width: 1060px;
}
/* padding-top/margin-top: vergrößert die Tippfläche (WEB-48, Mehr-Linsen-
   Review Runde 4) nach demselben Muster wie WEB-24/WEB-29, ohne die
   sichtbare Position der Unterkante/des border-bottom zu verschieben. */
.sos-reiter__item {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--grau);
  text-decoration: none;
  padding: 8px 2px 12px;
  margin: -8px -2px 0;
}
.sos-reiter__item:hover { color: var(--petrol); }
.sos-reiter__item:focus-visible { outline: 2px solid var(--petrol); outline-offset: 2px; }
.sos-reiter__item.is-aktiv {
  color: var(--petrol);
  font-weight: 700;
  border-bottom: 3px solid var(--petrol);
  margin: -8px -2px -2px;
  padding: 8px 2px 12px;
}

/* ---------- Kopf ---------- */
.sos-kopf {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  max-width: 1060px;
  margin: 0 auto 36px;
  padding: 0 24px;
}
/* Ohne Beitragsbild keine 180px-Spalte reservieren, sonst bleibt eine
   Leerstelle stehen und die Titelspalte wirkt zusammengequetscht (Nutzer-
   feedback 2026-09-20, Entwurf ohne Beitragsbild). */
.sos-kopf.sos-kopf--ohne-bild { grid-template-columns: minmax(0, 1fr); }
.sos-kopf__teaser {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}
.sos-kopf__text { display: flex; gap: 16px; align-items: flex-start; }
.sos-kopf__marke {
  width: 6px;
  height: 96px;
  flex: none;
  margin-top: 5px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--petrol), var(--mint));
}
.sos-kopf__titel {
  font-family: Tahoma, Verdana, sans-serif;
  font-weight: 400;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.16;
  margin: 0 0 14px;
  text-wrap: pretty;
}
.sos-kopf__vorspann {
  font-size: 18px;
  line-height: 1.6;
  color: var(--grau);
  margin: 0 0 14px;
  text-wrap: pretty;
}
.sos-kopf__meta {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--grau);
  margin: 0;
}

/* ---------- Zweispaltiger Körper ---------- */
.sos-spalten {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: 48px;
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 24px;
}
/* Explizite Spalten statt der impliziten 2-Elemente-Auto-Platzierung (WEB-45):
   .sos-begleit gibt es jetzt als bis zu zwei getrennte Geschwister
   (--toc/--mehr, single.php), ohne grid-column würde das Grid sie reihenweise
   auffüllen und die zweite Begleitspalte in Spalte 1 unter den Text schieben
   statt in Spalte 2 darunter zu stapeln. */
.sos-text { grid-column: 1; }
.sos-begleit { grid-column: 2; }

/* ---------- Text ---------- */
.sos-text p {
  font-size: 18.5px;
  line-height: 1.85;
  margin: 0 0 26px;
  text-wrap: pretty;
}
.sos-text h2 {
  font-family: Tahoma, Verdana, sans-serif;
  font-weight: 700;
  font-size: 25px;
  line-height: 1.35;
  margin: 40px 0 20px;
  scroll-margin-top: 24px;
}
.sos-text a { color: var(--petrol); text-decoration: underline; text-underline-offset: 3px; }
/* var(--petrol-dunkel) statt --tuerkis: Der Hover-Zustand ist Textfarbe wie
   jeder andere und muss dieselben 4,5:1 halten, --tuerkis kam auf Weiß nur
   auf 2,82:1. --petrol-dunkel ist bereits die etablierte Hover-Farbe der
   Seite (Knöpfe), 7,2:1. Gefunden im Mehr-Linsen-Review Runde 4, Linse
   UI/UX (WEB-38). */
.sos-text a:hover { color: var(--petrol-dunkel); }
.sos-text ul, .sos-text ol { font-size: 18.5px; line-height: 1.85; padding-left: 22px; margin: 0 0 26px; }
.sos-text li { margin-bottom: 8px; }

.sos-text figure, .sos-text .wp-block-image { margin: 0 0 44px; }
.sos-text figure img, .sos-text .wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}
.sos-text figcaption {
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 13px;
  color: var(--grau);
  margin-top: 10px;
}

/* Kleines, fließendes Bild statt voller Spaltenbreite: für ein Bild, das nur
   einen Gedanken belegt (z. B. ein Fremdbild, docs/BLOG.md), nicht für echte
   Beitragsfotografie. Bewusst als eigene, anzuwählende Klasse statt
   Standardverhalten, weil "volle Spaltenbreite" für dieses Layout die
   Vorgabe ist (siehe BEITRAG-SCHREIBEN.md). Unter 680px kein Umfluss mehr,
   sonst bliebe für den Text kaum Platz. */
.sos-text figure.bild-fliessend {
  float: right;
  width: 45%;
  max-width: 260px;
  margin: 4px 0 20px 28px;
}
.sos-text figure.bild-fliessend img { width: 100%; }
@media (max-width: 680px) {
  .sos-text figure.bild-fliessend {
    float: none;
    width: 100%;
    max-width: none;
    margin: 0 0 26px;
  }
}

/* Zitat: Farbbalken statt Kasten */
.sos-text blockquote {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin: 0 0 44px;
  padding: 0;
  border: 0;
}
.sos-text blockquote::before {
  content: "";
  width: 4px;
  align-self: stretch;
  flex: none;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--petrol), var(--mint));
}
.sos-text blockquote p {
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 25px;
  line-height: 1.45;
  color: var(--petrol);
  margin: 0;
}

/* ---------- Links zum Thema ---------- */
.sos-linkblock { margin-top: 34px; }
.sos-links {
  padding: 20px 24px;
  border-radius: 14px;
  background: var(--eisblau);
}
.sos-links__label {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--grau);
  margin: 0 0 10px;
}
.sos-links__liste a {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 11px 0;
  border-top: 1px solid var(--linie);
  color: var(--petrol);
  text-decoration: none;
}
.sos-links__liste a:first-child { padding-top: 0; border-top: 0; }
.sos-links__liste a:last-child { padding-bottom: 0; }
.sos-links__liste a:hover .sos-links__titel { text-decoration: underline; text-underline-offset: 3px; }
.sos-links__liste a:focus-visible { outline: 2px solid var(--petrol); outline-offset: 2px; }
.sos-links__liste svg { flex: none; margin-top: 4px; }
.sos-links__titel { display: block; font-size: 15px; line-height: 1.45; color: var(--petrol); }
.sos-links__quelle {
  display: block;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--grau);
  margin-top: 3px;
}
.sos-links__notiz { display: block; font-size: 13px; line-height: 1.6; color: var(--grau); margin-top: 5px; }

/* Für Screenreader hörbar, visuell unsichtbar: kein display:none, das
   nähme es auch aus dem Accessibility-Tree. Ergänzung ggü. dem
   Originalpaket (WCAG 3.2.5), das den Tab-Wechsel nur über das
   aria-hidden-Pfeilsymbol ankündigte. */
.sos-versteckt {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Gruß, Autor ---------- */
/* Kein display:flex mehr (WEB-47, Mehr-Linsen-Review Runde 4): Sobald der
   Satz auf schmalen Bildschirmen (unter ca. 375px) auf zwei Zeilen
   umbrach, hielt align-items:center das Herz-SVG als eigenes Flex-Item
   vertikal mittig zwischen beiden Zeilen statt am Satzende, live bestätigt
   bei 360px. Als normales Inline-Element fließt es stattdessen mit dem
   letzten Wort mit, wie jedes andere Zeichen im Satz. */
.sos-gruss {
  padding-top: 30px;
  border-top: 1px solid var(--linie);
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 17px;
  color: var(--grau);
}
.sos-gruss svg { margin-left: 8px; vertical-align: -2px; }
/* Voller Breite, mit Icons/Schrift kräftig genug, um sie zu füllen (Nutzer-
   Referenzbild 2026-09-20): Die vorherigen Versuche schrumpften Polsterung
   UND Inhalt gemeinsam, das ergab eine große Fläche mit winzigen Elementen
   darin, "leer und trotzdem hoch". Jetzt umgekehrt: großzügige, aber feste
   Polsterung, dafür Icons/Schrift deutlich größer, damit die Fläche nicht
   mehr leer wirkt. */
.sos-autor {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 22px;
  padding: 22px 28px;
  background: var(--eisblau-2);
  border-radius: 14px;
}
.sos-autor img { width: 32px; height: 49px; }
/* line-height: sonst erbt jede Zeile das globale body { line-height: 1.6 },
   das bläht jede einzelne Textzeile auf, ganz unabhängig von margin/
   padding drumherum. Genau das erzeugte den "zu hoch"-Eindruck. */
/* .sos-autor .sos-autor__name statt nur .sos-autor__name: Beide Zeilen sind
   <p>-Tags innerhalb von .sos-text, dessen .sos-text p (Klasse+Element,
   Spezifität 0-1-1) eine reine Klassenregel (0-1-0) unabhängig von der
   Position im Stylesheet schlägt. Genau das ließ jede Zahl hier bisher
   wirkungslos, egal wie oft geändert. Live per getComputedStyle geprüft:
   font-size/line-height/margin kamen tatsächlich aus .sos-text p (18,5px/
   1,85/26px), nicht aus diesen Regeln. Gefunden 2026-09-20 nach mehreren
   erfolglosen Anpassungsrunden. */
.sos-autor .sos-autor__name { font-family: Tahoma, Verdana, sans-serif; font-size: 19px; line-height: 1.25; margin: 0; }
.sos-autor .sos-autor__zeile { font-size: 15px; line-height: 1.25; color: var(--grau); margin: 3px 0 0; }

/* ---------- Weitergeben ---------- */
/* Zusätzliche halbdurchsichtige --nachtpetrol-Unterlage (0,5 Deckkraft, wie
   schon bei der Hauptnavigation, WEB-26/WEB-32) hinter dem ursprünglichen
   Verlauf: Titel/Text/Icons erreichten am hellen Ende (Richtung #4aa8a6)
   nur 2,82:1 bzw. 2,45:1 bzw. 1,41:1, weit unter den geforderten 4,5:1
   (Text) bzw. 3:1 (Icons als bedeutungstragende Grafik). Rechnerisch
   geprüft über den ganzen Verlauf: mit der Unterlage mindestens 4,77:1
   (Text), 5,89:1 (Titel), 4,0:1 (Icons, siehe unten). Gefunden im
   Mehr-Linsen-Review Runde 4, Linse UI/UX (WEB-36/WEB-37). */
.sos-weitergeben {
  margin-top: 24px;
  padding: 26px 32px;
  border-radius: 16px;
  background: linear-gradient(rgba(18, 51, 61, .5), rgba(18, 51, 61, .5)),
              linear-gradient(115deg, var(--petrol), var(--tuerkis));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
/* .sos-weitergeben .sos-weitergeben__titel: gleicher Spezifitätsgrund wie
   bei .sos-autor oben, dieselben zwei <p>-Tags-im-.sos-text-Falle. */
.sos-weitergeben .sos-weitergeben__titel { font-family: Tahoma, Verdana, sans-serif; font-size: 23px; line-height: 1.25; color: #fff; margin: 0; }
.sos-weitergeben .sos-weitergeben__text { font-size: 15px; line-height: 1.3; color: rgba(255,255,255,.85); margin: 4px 0 0; }
/* flex-wrap: Bei vier bis fünf Icons (von der Einstellungsseite selbst
   empfohlen) reichte der Platz auf schmalen Bildschirmen nicht, die Reihe
   lief über die Karte und den Bildschirmrand hinaus, echtes horizontales
   Scrollen der ganzen Seite. Live auf 390px bestätigt. Gefunden im
   Mehr-Linsen-Review Runde 4, Linse Mobil/Responsive (WEB-44). */
.sos-weitergeben__icons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; flex: none; }

.sos-share {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(255,255,255,.18);
  transition: background .15s ease;
}
.sos-share:hover { background: rgba(255,255,255,.32); }
/* Doppelring wie .marke/nav.haupt (WEB-26): Der allgemeine Petrol-Fokusring
   wäre auf diesem Verlauf stellenweise fast unsichtbar. */
.sos-share:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--nachtpetrol);
}
.sos-share--gross { width: 58px; height: 58px; }
.sos-share img { display: block; border: 0; border-radius: 4px; }

/* ---------- Begleitspalte ---------- */
.sos-begleit { align-self: start; position: sticky; top: 24px; }
.sos-begleit__label {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--grau);
  margin: 0 0 12px;
}
.sos-begleit__label--trenner { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--linie); }
/* gap 11px→5px, Polsterung 3px oben/unten am Link gleicht das exakt aus
   (WEB-40/WEB-46, Mehr-Linsen-Review Runde 4): 13,5px-Text lag bei 21,6px
   Zeilenbox, unter der 24px-Tippflächen-Richtgröße, gemessen bei 390px. */
.sos-toc { display: grid; gap: 5px; padding-left: 14px; border-left: 2px solid var(--linie); }
.sos-toc__item { font-size: 13.5px; padding: 3px 0; color: var(--grau); text-decoration: none; }
.sos-toc__item:hover { color: var(--petrol); }
.sos-toc__item:focus-visible { outline: 2px solid var(--petrol); outline-offset: 2px; }
.sos-toc__item.is-aktiv {
  color: var(--petrol);
  font-weight: 700;
  margin-left: -16px;
  padding-left: 14px;
  border-left: 2px solid var(--petrol);
}
.sos-begleit__liste { display: grid; gap: 6px; }
.sos-begleit__liste a { font-size: 13.5px; line-height: 1.45; padding: 3px 0; color: var(--petrol); text-decoration: none; }
.sos-begleit__liste a:hover { text-decoration: underline; }
.sos-begleit__liste a:focus-visible { outline: 2px solid var(--petrol); outline-offset: 2px; }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 980px) {
  .sos-spalten { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .sos-text, .sos-begleit { grid-column: 1; }
  .sos-begleit { position: static; }
  /* Nur das Inhaltsverzeichnis rückt vor den Text, "Mehr zu <Kategorie>"
     bleibt dahinter (WEB-45, siehe Kommentar in single.php). */
  .sos-begleit--toc { order: -1; }
}
@media (max-width: 680px) {
  .sos-kopf { grid-template-columns: minmax(0, 1fr); }
  .sos-kopf__teaser { width: 100%; height: 220px; }
  .sos-kopf__marke { display: none; }
  .sos-text p, .sos-text ul, .sos-text ol { font-size: 17px; }
  .sos-text blockquote p { font-size: 21px; }
}

/* ---------- Druck ---------- */
@media print {
  .sos-reiter, .sos-begleit, .sos-weitergeben { display: none; }
  .sos-links { background: none; padding: 0; border-top: 1pt solid #ccc; }
  .sos-spalten { grid-template-columns: 1fr; }
  .sos-text p { font-size: 11pt; line-height: 1.6; }
}