/* Schrift Inter, selbst ausgeliefert (2026-09-27, korrigierte Fassung).

   Drei Dateien, weil Google die Schrift nach Zeichenbereichen zerlegt —
   der Browser laedt ueber unicode-range nur, was die Seite braucht:
     latin      47,1 KB  Grundalphabet, Umlaute, Ziffern — immer
     latinext   36,8 KB  polnisch, tschechisch u. a. — nur bei Bedarf
     cyrillic   18,3 KB  russisch — nur bei Bedarf

   ACHTUNG, aus einem echten Fehler: Die erste Fassung hatte NUR die
   latin-ext-Datei zugeschnitten und angenommen, sie enthalte alles
   Lateinische. Sie enthaelt das Grundalphabet NICHT — die Seite lief
   sechs Stunden in einer Ersatzschrift. Erzeugt und GEPRUEFT wird das
   jetzt von werkzeug-schrift-zuschneiden.py; das Skript verweigert die
   Ausgabe, wenn ein Pruefwort nicht darstellbar ist.

   font-weight: 400 700 ist Absicht: variable Schrift.
   SIL OFL 1.1, Lizenz in /assets/schrift/. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/schrift/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/schrift/inter-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/schrift/inter-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ──────────────────────────────────────────────────────────────
   Gemeinsames Stylesheet für die Unterseiten von faimex.de
   Entwurf, Sebastian, 2026-09-26

   Farbregeln (geprüft in kunden/faimex-de/farbpalette-2026-09-26.md):
   - Gold #C8A84B ist FLÄCHENFARBE, nie Schriftfarbe
     (auf Silbergrau nur 2,12:1 — durchgefallen)
   - Gold als Fläche mit Anthrazit-Schrift: 6,56:1 — erlaubt
   - Weiße Schrift auf Gold: 2,29:1 — verboten
   - Für Links, die golden wirken sollen: #7E6520 (5,02:1)
   - Trennlinien und Rahmen: #7E8891 (3,02:1 gegen #E9EBED)
   Schrift: Inter, wie auf der Startseite
   ────────────────────────────────────────────────────────────── */

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

:root {
  --clr-bg:      #E9EBED;  /* Seitengrau */
  --clr-surface: #FFFFFF;
  --clr-card:    #FFFFFF;
  --clr-border:  #7E8891;  /* 3,02:1 — Mindestwert für Linien ist 3:1 */
  --clr-accent:  #C8A84B;  /* Marken-Gold: nur Fläche, Linie, Symbol */
  --clr-link:    #7E6520;  /* goldwirkender Link, 5,02:1 */
  --clr-text:    #23272B;  /* Anthrazit, 13,54:1 auf Seitengrau */
  --clr-muted:   #5A6068;
  --radius: 12px;
  --seite: 1080px;
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--clr-bg);
  color: var(--clr-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── Menüleiste: identisch zur Startseite ──
   `nav#nav` statt `nav`, seit 2026-09-28. Vorher traf diese Regel
   JEDES <nav> auf der Seite. Der neue Weiterlesen-Block am Fuss
   eines Beitrags ist auch ein <nav> -- und hat sich prompt
   display:flex, sticky und die Hintergrundfarbe der Menueleiste
   geholt. Ueberschrift links, Liste rechts, der Rest verrutscht.
   Die Menueleiste traegt ueberall id="nav"; nachgesehen, nicht
   angenommen. */
nav#nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem 2rem;
  background: rgba(233,235,237,.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--clr-border);
}
/* Haus-Symbol als erster Menüpunkt vor „Marken" (2026-10-07, Holger): Weg zurück zur Startseite, vor allem von Impressum und Datenschutz.
   Am Desktop nur das Symbol (Text nur für Screenreader), im Handy-Menü mit Wort. */
.nav-home { display: inline-flex; align-items: center; gap: .4rem; }
.nav-home-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 768px) {
  .nav-home-text { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}
.nav-links { display: flex; gap: 1.25rem; list-style: none; }
.nav-links a { color: var(--clr-text); text-decoration: none; font-size: .9rem; }
.nav-links a:hover { color: var(--clr-link); text-decoration: underline; }
.nav-links a[aria-current="page"] { font-weight: 600; }
.nav-toggle { display: none; background: none; border: none; cursor: pointer;
  color: var(--clr-text); font-size: 1.4rem; }
.lang-switcher { display: flex; gap: .4rem; align-items: center; }
.lang-btn {
  background: none; border: 2px solid transparent; border-radius: 6px;
  padding: 3px; cursor: pointer; display: flex; align-items: center;
  transition: transform .15s, border-color .2s, background .2s;
}
.lang-btn svg { display: block; border-radius: 3px; }
.lang-btn:hover { transform: scale(1.12); border-color: rgba(200,168,75,.45); }
.lang-btn.active { border-color: var(--clr-accent); background: rgba(200,168,75,.16); }

@media (max-width: 768px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none; flex-direction: column;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--clr-surface); border: 1px solid var(--clr-border);
    padding: 1rem 2rem; gap: 1rem;
  }
  .nav-links.open { display: flex; }
}

/* ── Seitenkopf ── */
.kopf { padding: 4rem 1.5rem 2.5rem; }
.kopf-inner, .inhalt-inner { max-width: var(--seite); margin: 0 auto; }
.kruemel { font-size: .82rem; color: var(--clr-muted); margin-bottom: .9rem; }
.kruemel a { color: var(--clr-link); }
h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 700; line-height: 1.2; }
/* Goldene Linie statt goldener Schrift — das ist der erlaubte Weg */
h1::after {
  content: ""; display: block; width: 72px; height: 4px;
  background: var(--clr-accent); border-radius: 2px; margin-top: 1rem;
}
.einleitung { margin-top: 1.4rem; max-width: 62ch; color: var(--clr-muted); font-size: 1.05rem; }

/* ── Inhalt ── */
.inhalt { padding: 1rem 1.5rem 4rem; }
h2 { font-size: 1.35rem; font-weight: 600; margin-bottom: 1.2rem; }
.karten { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.karte {
  background: var(--clr-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.karte h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: .5rem; }
.karte p { color: var(--clr-muted); font-size: .95rem; }
.karte .themen { margin-top: .9rem; padding-left: 1.1rem; color: var(--clr-muted); font-size: .9rem; }
.karte .themen li { margin-bottom: .25rem; }

/* Status-Kennzeichen: goldene Fläche mit Anthrazit-Schrift, 6,56:1 */
.status {
  display: inline-block; margin-bottom: .8rem;
  padding: .2rem .65rem; border-radius: 999px;
  background: var(--clr-accent); color: var(--clr-text);
  font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.status.leise { background: transparent; color: var(--clr-muted); border: 1px solid var(--clr-border); }

.hinweis {
  margin-top: 2.5rem; padding: 1.5rem;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-left: 4px solid var(--clr-accent);
  border-radius: var(--radius);
}
.hinweis p { color: var(--clr-muted); max-width: 70ch; }
.hinweis a { color: var(--clr-link); }

/* Schaltflaeche: goldene Flaeche, Anthrazit-Schrift.
   Selektor a.knopf, damit er .hinweis a schlaegt — sonst erbt der Knopf
   die goldene Linkfarbe und steht Gold auf Gold (gemessen 2,43:1). */
a.knopf {
  display: inline-block; margin-top: 1.1rem;
  padding: .7rem 1.4rem; border-radius: 8px;
  background: var(--clr-accent); color: var(--clr-text);
  font-weight: 600; text-decoration: none;
}
a.knopf:hover { background: #d8bb63; }

/* ── Fußzeile ── */
footer {
  border-top: 1px solid var(--clr-border);
  padding: 2rem 1.5rem; text-align: center;
  color: var(--clr-muted); font-size: .88rem;
}
footer a { color: var(--clr-link); }

/* ── Rechtstexte: Impressum, Datenschutz ──
   Nur der Rahmen ist neu, der Text bleibt unangetastet. */
.page-wrap { max-width: 860px; margin: 0 auto; padding: 3.5rem 1.5rem 4rem; }
.page-label {
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--clr-muted); margin-bottom: .7rem;
}
.page-title { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 700; line-height: 1.2; }
.page-title::after {
  content: ""; display: block; width: 72px; height: 4px;
  background: var(--clr-accent); border-radius: 2px; margin: 1rem 0 2.2rem;
}
.card {
  background: var(--clr-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  padding: 1.75rem;
  margin-bottom: 1.5rem;
}
.card h2 { font-size: 1.2rem; font-weight: 600; margin-bottom: .9rem; }
.card h3 { font-size: 1.02rem; font-weight: 600; margin: 1.2rem 0 .5rem; }
.card p { margin-bottom: .7rem; color: var(--clr-text); }
.card p:last-child { margin-bottom: 0; }
.card ul, .card ol { margin: .4rem 0 .9rem 1.4rem; color: var(--clr-text); }
.card li { margin-bottom: .35rem; }
.card a { color: var(--clr-link); }
.card strong { font-weight: 600; }
/* Trennlinie: 3,02:1 gegen die weisse Karte ist nicht noetig,
   aber sichtbar muss sie sein — deshalb der Rahmenton. */
.divider { border: 0; border-top: 1px solid var(--clr-border); margin: 1.1rem 0; }

/* Platzhalter in Entwurfsseiten — sichtbar als das, was sie sind.
   Diese Seiten gehen NICHT live, solange hier Klammern stehen. */
.platzhalter {
  color: var(--clr-muted); font-style: italic;
  background: rgba(200,168,75,.10);
  border-left: 3px solid var(--clr-accent);
  padding: .7rem .9rem; border-radius: 6px; margin-bottom: 1.4rem;
}
.karte h3 a { color: var(--clr-text); text-decoration: none; }
.karte h3 a:hover { color: var(--clr-link); text-decoration: underline; }

/* JEDER Verweis in einer Karte bekommt die Hausfarbe.
   Holger am 2026-09-27: "Struktur passt, nur ist der Link in blau?"
   Er war blau, und zwar in der Voreinstellung des Browsers: Fuer die
   Themenliste gab es bis heute keine Regel, weil in ihr noch nie ein
   Verweis stand. Beim naechsten Besuch waere er violett geworden.
   Die Ueberschrift der Karte behaelt ihr dunkles Anthrazit -- die Regel
   darueber nennt mehr Bedingungen und gewinnt.
   `:visited` ausdruecklich mit: Sonst faerbt der Browser besuchte
   Verweise weiterhin selbst ein. */
.karte a,
.karte a:visited { color: var(--clr-link); }

/* --------------------------------------------------------------------
   BILDER (eingefuegt am 2026-09-27)

   Bis heute enthielt diese Datei KEINE einzige Regel fuer Bilder. Ein
   Bild im Beitragstext waere in seiner hinterlegten Breite dargestellt
   worden — bei 1.624 px hinterlegt und 375 px Handybreite laeuft es aus
   der Textspalte heraus. Gefunden beim Beantworten von Content-Connys
   Frage nach den Bildern im Ratgeber.

   height: auto gehoert zwingend dazu: Die Bildverarbeitung schreibt
   width und height als Attribute ins <img> (gegen Layout-Spruenge, die
   Google als eigenen Kennwert misst). Ohne height: auto wuerde die
   Hoehe aus dem Attribut starr gelten und das Bild beim Verkleinern
   verzerrt.
   -------------------------------------------------------------------- */
.page-wrap img,
.inhalt-inner img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  margin: 2rem 0;
}

/* Bildunterschrift, falls ein Beitrag eine braucht. */
.page-wrap figure,
.inhalt-inner figure { margin: 2rem 0; }
.page-wrap figure img,
.inhalt-inner figure img { margin: 0; }
.page-wrap figcaption,
.inhalt-inner figcaption {
  margin-top: .6rem;
  font-size: .9rem;
  color: var(--clr-muted);
}

/* Ein Bild, dessen Urfassung kleiner ist als die Textspalte.
   Grafik-Eddi hat gemessen: die Innenansicht des Barmasses ist
   280 x 270 px und bleibt scharf bis 280 px Anzeigebreite (auf Displays
   mit doppelter Pixeldichte bis 140 px). Eine groessere Vorlage gibt es
   im Haus nicht, und Hochrechnen hat Holger abgelehnt -- es sah
   waechsern aus.
   Deshalb wird dieses Bild HART begrenzt und nicht ueber die Spalte
   gezogen. Wer die Begrenzung entfernt, bekommt ein unscharfes Bild. */
.bild-klein { max-width: 280px; margin-left: 0; }
.bild-klein img { width: 100%; }

/* ── Fliesstext im Ratgeber-Beitrag ─────────────────────────────────
   NACHGETRAGEN AM 2026-09-27, aus einem Fehler.

   Bis hierher hatte dieses Stylesheet KEINE EINZIGE REGEL fuer
   laufenden Text. Ganz oben steht `* { margin: 0 }`, und ihren Abstand
   bekamen Absaetze bisher immer aus einem Kasten (.karte, .card,
   .hinweis) -- jede bisherige Seite bestand aus Kaesten. Der erste
   Ratgeber-Beitrag war die erste Seite mit echtem Fliesstext. Er stand
   deshalb ohne Abstand zwischen den Absaetzen und ueber die volle
   Fensterbreite da, obwohl das Stylesheet verlinkt war und geladen
   wurde.

   Alles hier gilt NUR unter `.beitrag-inhalt` (siehe _includes/
   beitrag.njk). Die Rubrikseiten arbeiten mit Karten und brauchen die
   volle Breite -- sie duerfen davon nichts abbekommen. */
/* Kopf und Text teilen sich dieselbe Spalte -- sonst steht die
   Ueberschrift auf einer anderen Kante als der Text darunter.

   BREITE, Holger am 2026-09-27, in drei Schritten:
   "probier mal, links und rechts dreissig Pixel Abstand",
   "30 Pixel sind immer noch zu wenig. Erhoehe auf 75 Pixel.",
   "nimm bitte die Raender auf 120 px links und rechts."
   Also 120 px JE SEITE (nicht geteilt), sonst volle Breite.
   Auf schmalen Geraeten waeren 120 px die halbe Seite -- deshalb faellt
   der Rand unter 1100 px auf 40 px und unter 480 px auf 20 px. */
.beitrag-kopf .kopf-inner,
.beitrag-inhalt .inhalt-inner { max-width: none; }
.beitrag-kopf  { padding-left: 120px; padding-right: 120px; }
.beitrag-inhalt { padding-left: 120px; padding-right: 120px; }
.beitrag-kopf .einleitung { max-width: none; }

@media (max-width: 1100px) {
  .beitrag-kopf  { padding-left: 40px; padding-right: 40px; }
  .beitrag-inhalt { padding-left: 40px; padding-right: 40px; }
}
@media (max-width: 480px) {
  .beitrag-kopf  { padding-left: 20px; padding-right: 20px; }
  .beitrag-inhalt { padding-left: 20px; padding-right: 20px; }
}

/* ── Schriftgroessen im Beitrag ─────────────────────────────────────
   Holger am 2026-09-27: "Teilweise ist die Schriftgroesse fuer
   Augenkranke."

   GEMESSEN, bevor ich etwas geaendert habe (1600 px Fenster):
     Ueberschrift 1   44,8 px      <- der Ausreisser
     Ueberschrift 2   24,0 px
     Einleitung       16,8 px
     Fliesstext       16,0 px
     Bildunterschrift 14,4 px
     Kruemelpfad      13,1 px
   Zu gross war also der Kopf, nicht der Text. Die grossen Ueberschriften
   stammen aus der Startseite, wo eine Zeile ueber ein halbes Bild geht --
   in einem Ratgeber-Beitrag wirken sie wie ein Plakat.

   Nur die beiden Ueberschriften werden kleiner, und NUR im Beitrag. Die
   Rubrik- und Shopseiten bleiben, wie sie sind; dazu hat Holger nichts
   gesagt, und eine Aenderung zur Zeit.

   ZWEITER DURCHGANG, gleicher Abend. Holger: "Augenkranke. Viel zu
   gross. Natuerlich. Es muss harmonischer sein. Viel harmonischer."

   Die Staffel ist jetzt eine Reihe mit gleichmaessigen Schritten, vom
   Fliesstext aus gerechnet (16 px), Faktor rund 1,18:

     Ueberschrift 1   28 px      16 x 1,18^3
     Ueberschrift 2   20 px      16 x 1,18^1,4
     Ueberschrift 3   17 px
     Einleitung       17 px
     Fliesstext       16 px      die Bezugsgroesse, unveraendert
     Bildunterschrift 14 px
     Kruemelpfad      13 px

   Der Gedanke dahinter: Eine Ueberschrift muss sich nicht durch GROESSE
   vom Text abheben, sondern durch Gewicht und Abstand. 28 px reichen
   voellig, wenn darueber und darunter genug Luft ist -- und genau das
   ist der Unterschied zwischen "gross" und "harmonisch".
   Die Zeilenhoehe des Fliesstextes geht von 1,6 auf 1,7: mehr Luft
   zwischen den Zeilen, gerade bei den breiten Zeilen mit 75 px Rand.

   Die Groessen der Zwischenueberschriften stehen direkt unten bei ihren
   Abstaenden -- eine Groesse an EINER Stelle. Ein zweiter Eintrag weiter
   oben gewinnt nicht, sondern verliert gegen die spaetere Zeile, und man
   sucht den Fehler im falschen Block. Genau das ist mir hier einmal
   passiert: h2 blieb bei 24 px. */
/* Untere Grenze 25,6 px mit Bedacht: Bei 1,45rem stand die Ueberschrift
   auf einem schmalen Fenster bei 23,2 px und damit fast auf der Hoehe
   der Zwischenueberschriften (20 px) -- dann sieht die Seite nicht
   harmonisch aus, sondern flach. */
.beitrag-kopf h1 { font-size: clamp(1.6rem, 2.2vw, 1.75rem); line-height: 1.25; }   /* 25,6 bis 28 px */
.beitrag-kopf .einleitung { font-size: 1.0625rem; }                                  /* 17 px */

/* Die goldene Linie unter der Ueberschrift.
   Sie stand fest auf 72 px (aus der Zeit der 1080-px-Spalte), dann auf
   18 % der Spalte. Beides war nicht gemeint. Holger am 2026-09-27:
   "Immer noch keine vollstaendige Unterlinie??"
   Sie ist also keine Akzentmarke, sondern eine LINIE UNTER DER
   UEBERSCHRIFT -- ueber die ganze Textspalte.
   Duenner als vorher, 3 statt 5 px: Ueber 1345 px wird aus einem
   kraeftigen Strich ein Balken. Soll sie dicker sein, ist es eine Zahl.
   NUR im Beitrag; Rubrik- und Shopseite behalten ihren kurzen Strich. */
.beitrag-kopf h1::after { width: 100%; height: 3px; }
/* Rahmen um den Kasten 'Wir suchen' auf /karriere/ (Holger 08.10.2026: 'so breit wie diese Linie
   und auch in der Farbe, nur nicht so dick'). Breite = volle Inhaltsbreite wie h1::after,
   Farbe = Akzentfarbe wie die Linie, Strich 1 px statt 3 px. */
.stellen-rahmen {
  box-sizing: border-box; width: 100%;
  border: 1px solid var(--clr-accent); border-radius: 8px;
  padding: 1.6rem 2rem 1.1rem; margin: 0 0 1.5rem;
}
.stellen-rahmen h2 { margin-top: 0; }
@media (max-width: 480px) { .stellen-rahmen { padding: 1.2rem 1.2rem .8rem; } }
.beitrag-inhalt { line-height: 1.7; }
.beitrag-inhalt figcaption { font-size: .875rem; }                                   /* 14 px */
.beitrag-inhalt h2 { margin-top: 2.8rem; margin-bottom: .7rem; font-size: 1.25rem; font-weight: 600; }
.beitrag-inhalt h2:first-child { margin-top: 0; }
.beitrag-inhalt h3 { margin-top: 1.9rem; margin-bottom: .5rem; font-size: 1.0625rem; font-weight: 600; }
.beitrag-inhalt p { margin-bottom: 1.1rem; }
.beitrag-inhalt ul, .beitrag-inhalt ol { margin: 0 0 1.4rem 1.3rem; }
.beitrag-inhalt li { margin-bottom: .55rem; padding-left: .2rem; }
.beitrag-inhalt li::marker { color: var(--clr-accent); }
.beitrag-inhalt a { color: var(--clr-link); }
/* ── Bilder im Beitrag ──────────────────────────────────────────────
   Holger am 2026-09-27: "Die Bilder alle links zentriert. Totaler
   Quatsch. Eventuell muessen wir um die Bilder einen kleinen Rahmen
   bauen und muessen aufpassen, dass wir gemischt die Bilder anordnen."

   Deshalb: ein heller Rahmen um jedes Bild, und drei Ausrichtungen, die
   der Beitrag von Fall zu Fall waehlt -- bild-mitte, bild-links,
   bild-rechts. Ohne Angabe steht ein Bild mittig.

   Auf dem Handy wird JEDES Bild volle Spaltenbreite und steht fuer
   sich. Ein umflossenes Bild in einer 350-px-Spalte laesst links drei
   Woerter je Zeile uebrig -- das ist kein Umfliessen mehr. */
.beitrag-inhalt figure {
  margin: 2.2rem auto;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  padding: .85rem .85rem .7rem;
  width: fit-content;
  max-width: 100%;
}
.beitrag-inhalt figure img { border-radius: 8px; }
.beitrag-inhalt figcaption { max-width: 46ch; }

/* Ein mittiges Bild bekommt eine Obergrenze. Ohne sie richtet es sich
   nach der Textspalte, und die ist seit den 75 px Rand sehr breit -- das
   Schaubild stand mit 789 px da und war das Groesste auf der Seite.
   Holger am 2026-09-27: "Dieses zentrale Bild ist immer noch zu gross."
   520 px reichen: Wer Einzelheiten sehen will, klickt es gross.

   Nur Bilder, die unmittelbar im Textfluss stehen (`> .inhalt-inner >`).
   Das Produktfoto steckt in `div.produkt` und ist damit ausgenommen --
   es hat seine eigenen 200 px. Ohne diese Einschraenkung gewinnt die
   Regel hier gegen die Produktregel, weil sie mehr Bedingungen nennt,
   und das Produktfoto waere wieder gross geworden. (Genau so passiert.) */
.beitrag-inhalt > .inhalt-inner > figure:not(.bild-links):not(.bild-rechts) {
  max-width: min(520px, 100%);
}

/* Ein umflossenes Bild klebte an der Kante der Textspalte -- bei 1435 px
   Spaltenbreite bleibt daneben eine sehr breite Textsaeule, und der
   Absatz ist zu Ende, bevor das Bild zu Ende ist. Holger: "Das
   rechtsbuendige Bild haette noch zwei Umbrueche vertragen und muss viel
   weiter nach links."
   Deshalb ein Abstand zur AUSSENKANTE, der mit der Spalte waechst: Das
   Bild rueckt nach innen, die Textsaeule daneben wird schmaler, und es
   umfliessen mehr Zeilen. Auf schmalen Fenstern ist der Abstand 0 --
   dort gibt es nichts zu verschieben. */
.beitrag-inhalt .bild-links  { float: left;  margin: .3rem 1.7rem 1.4rem clamp(0px, 20%, 320px); max-width: 46%; }
.beitrag-inhalt .bild-rechts { float: right; margin: .3rem clamp(0px, 20%, 320px) 1.4rem 1.7rem; max-width: 46%; }

/* Eine Ueberschrift faengt immer links an, nie neben einem Bild. */
.beitrag-inhalt h2 { clear: both; }

@media (max-width: 680px) {
  .beitrag-inhalt .bild-links,
  .beitrag-inhalt .bild-rechts {
    float: none; max-width: 100%; margin: 1.8rem auto;
  }
}

/* MUSS NACH den Ausrichtungen stehen, sonst gewinnt deren max-width.
   Die Innenansicht des Barmasses ist 280 x 270 px -- mehr gibt es im
   Haus nicht, und Hochrechnen hat Holger abgelehnt, es sah waechsern
   aus. 46 % der Textspalte waeren 315 px, auf dem Handy 327 px: beides
   ueber der Vorlage. Hier steht die harte Grenze, in jeder Breite.
   Das Polster des Rahmens zaehlt mit (box-sizing: border-box) -- das
   Bild selbst bleibt also noch ein Stueck unter 280 px. */
.beitrag-inhalt .bild-klein { max-width: 280px; }

/* ── Unser Produkt dazu ─────────────────────────────────────────────
   Holger am 2026-09-27: "Unser Produkt dazu ist ja utopisch, das
   grenzt ja schon an Selbstverherrlichung."

   Das Produktfoto lief ueber die volle Textspalte -- ein Ratgeber, der
   unten ein Plakat aufhaengt. Es wird klein und steht links neben dem
   Verweis. Der Beitrag soll die Frage beantworten; das Produkt ist der
   Nachsatz, nicht der Schluss-Akkord. */
.beitrag-inhalt .produkt { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; }
.beitrag-inhalt .produkt figure { margin: 0; max-width: 240px; flex: 0 0 auto; }
/* Die Bildunterschrift steckt in einer schmalen Spalte und brach in fuenf
   Zeilen von drei Woertern. Etwas kleiner und enger gesetzt liest sie
   sich als Bildunterschrift statt als Absatz. */
.beitrag-inhalt .produkt figcaption { font-size: .8rem; line-height: 1.45; }
.beitrag-inhalt .produktverweis { margin: 0; }

/* ── Vergroesserungsfunktion ("Lupe") ───────────────────────────────
   Das <dialog>-Element bringt den abgedunkelten Hintergrund, Esc und
   die Tastaturbedienung mit; hier steht nur das Aussehen.
   `.lupe-moeglich` setzt das Bauskript NICHT -- das setzt das kleine
   Skript in beitrag.njk, und zwar nur an Bildern, die gross genug
   sind. Ein Bild ohne diese Klasse sieht also auch nicht so aus, als
   koennte man es vergroessern. */
.lupe-moeglich img { cursor: zoom-in; }
.lupe-moeglich img:focus-visible { outline: 3px solid var(--clr-accent); outline-offset: 3px; }

dialog.lupe {
  border: 0; padding: 0; background: transparent;
  max-width: 100vw; max-height: 100vh;
  overflow: visible;
}
dialog.lupe::backdrop { background: rgba(35, 39, 43, .9); }
/* Die Breite rechnet das Skript in beitrag.njk aus, damit weder
   Fensterbreite noch Fensterhoehe etwas wegkuerzen muessen.
   `max-height` steht hier NUR als Netz, falls das Skript einmal nicht
   laeuft -- und zusammen mit `object-fit: contain` kuerzt es dann die
   Hoehe, ohne das Bild zu quetschen. Genau daran ist die erste Fassung
   gescheitert: feste Breite plus Hoehenbegrenzung ergibt ein breitge-
   zogenes Bild (1600 x 1600 wurde als 983 x 707 angezeigt). */
dialog.lupe img {
  display: block;
  max-width: 96vw;
  max-height: 92vh;
  object-fit: contain;
  border-radius: 10px;
  background: var(--clr-surface);
}
.lupe-schliessen {
  position: absolute; top: -14px; right: -14px;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--clr-border);
  background: var(--clr-surface); color: var(--clr-text);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.lupe-schliessen:hover { background: var(--clr-accent); }

@media (max-width: 600px) {
  .lupe-schliessen { top: 6px; right: 6px; }
}

/* ── Weiterlesen am Fuss eines Beitrags ─────────────────────────────
   Holger am 2026-09-28: "Querverweise muessen wir natuerlich auch auf
   die Seiten verlinken."
   Abgesetzt durch eine Linie und etwas Luft, damit klar ist: Hier hoert
   der Beitrag auf, das ist kein weiterer Abschnitt. */
.beitrag-inhalt .weiterlesen {
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--clr-border);
}
.beitrag-inhalt .weiterlesen h2 { margin-top: 0; font-size: 1.05rem; color: var(--clr-muted); }
.beitrag-inhalt .weiterlesen ul { list-style: none; margin: 0; padding: 0; }
.beitrag-inhalt .weiterlesen li { margin-bottom: .45rem; padding-left: 0; }
.beitrag-inhalt .weiterlesen li::before { content: "\203A"; color: var(--clr-accent); margin-right: .5rem; }
.beitrag-inhalt .weiterlesen h3 { margin: 1.4rem 0 .6rem; font-size: .95rem; color: var(--clr-muted); font-weight: 600; }
.beitrag-inhalt .weiterlesen .nur-deutsch-hinweis { font-size: .78rem; color: var(--clr-muted); margin-left: .3rem; }

/* Text, der nur vorgelesen wird und auf dem Bildschirm nicht erscheint.
   Ein Verweis, der ein neues Fenster oeffnet, muss das ansagen -- wer
   die Seite vorlesen laesst, merkt sonst nicht, dass er woanders ist.
   NICHT display:none: das wuerde ihn auch vom Vorlesen ausschliessen. */
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Rechtshinweis am Fuss einer Leistungsseite.
   Angelegt am 2026-09-30 fuer den Unabhaengigkeitshinweis auf
   /fulfillment/, den Juergen verlangt hat. Kleiner und ruhiger als der
   Fliesstext -- er ist eine Pflichtangabe, keine Werbebotschaft -- aber
   NICHT grau auf grau: Ein Hinweis, den man nicht lesen kann, ist keiner.
   Farbe ist --clr-muted, dieselbe wie Bildunterschriften. */
.rechtshinweis {
  margin-top: 2.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--clr-border);
  color: var(--clr-muted);
  font-size: .85rem;
  line-height: 1.6;
  max-width: 70ch;
}

/* Eigene Seite "Ueber uns" (2026-10-06): Text links, Hochformat-Video rechts. */
.ueber-seite { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr) 260px; align-items: start; }
.ueber-text p { max-width: 62ch; margin: 0 0 1rem; }
.ueber-text .ueber-leitsatz { font-style: italic; color: var(--clr-link); margin-bottom: .25rem; }
.ueber-text .ueber-leitsatz:first-of-type { margin-top: 1.4rem; }
.ueber-seite .ueber-video { margin: 0; position: sticky; top: 5.5rem; }
.ueber-video video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; background: #14161a; border-radius: 12px; }
.ueber-video figcaption { margin-top: .6rem; color: var(--clr-muted); font-size: .9rem; }
@media (max-width: 760px) {
  .ueber-seite { grid-template-columns: minmax(0, 1fr); }
  .ueber-seite .ueber-video { max-width: 260px; margin: 0 auto; position: static; }
}

.ueber-text .ueber-h2 { font-size: 1.35rem; margin: 2.2rem 0 .6rem; }