/* Open Sans, selbst gehostet als Variable Font (Gewichte 300-800).
   Keine Verbindung zu Google beim Seitenaufruf - das ist Absicht. */

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('fonts/open-sans-400-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: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('fonts/open-sans-400-latin-ext.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;
}

/* =========================================================================
   Siro-Blog - Grundform
   Herausgeloest aus dem Blog der Zollhaus-Marketing-Website (assets/style.css,
   Stand 16.09.2026). Nur was Uebersicht und Artikel brauchen.
   Die Markenfarbe setzt der Generator an der Stelle MARKE ein - sonst steht
   im ganzen Blatt keine feste Farbe der Marke.
   ========================================================================= */

:root {
  /* Markenblau */
  --blue-500:#1a7bc0; --blue-600:#1669a3; --blue-700:#125483;
  --blue-400:#4292cb; --blue-100:#d7e8f4; --blue-50:#eef5fa;
  --blue-fokus:rgba(26,123,192,.28);

  /* Ink */
  --ink-900:#231f20; --ink-700:#4a4647; --ink-500:#77716f; --ink-300:#b3aeac;

  /* Neutrals */
  --white:#fff; --gray-50:#f7f8fa; --gray-100:#eef0f3; --gray-200:#e2e5ea; --gray-300:#cfd3da;

  /* Semantik */
  --color-primary:var(--blue-500);
  --color-primary-hover:var(--blue-600);
  --color-primary-active:var(--blue-700);
  --text-heading:var(--ink-900); --text-body:var(--ink-900); --text-muted:var(--ink-500);
  --text-on-brand:var(--white); --text-link:var(--blue-500); --text-link-hover:var(--blue-700);
  --surface-page:var(--white); --surface-alt:var(--gray-50); --surface-card:var(--white);
  --surface-tint:var(--blue-50);
  --border-subtle:var(--gray-200); --border-strong:var(--gray-300);

  /* Typografie */
  --font-sans:"Open Sans",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --weight-regular:400; --weight-semibold:600;
  --text-display:44px; --text-h1:34px; --text-h2:26px; --text-h3:20px; --text-h4:17px;
  --text-lead:19px; --text-body-lg:17px; --text-base:15px; --text-sm:13px; --text-xs:11px;
  --leading-tight:1.15; --leading-snug:1.35; --leading-normal:1.6;
  --tracking-tight:-0.01em; --tracking-normal:0; --tracking-wide:.04em;

  /* Abstaende */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;

  --radius-sm:3px; --radius-md:6px; --radius-lg:10px; --radius-pill:999px;
  --border-width:1px;

  --shadow-sm:0 1px 2px rgba(35,31,32,.06);
  --shadow-md:0 4px 14px rgba(35,31,32,.08);
  --shadow-lg:0 12px 32px rgba(35,31,32,.10);
  --shadow-focus:0 0 0 3px var(--blue-fokus);

  --container-max:1160px; --container-narrow:760px;
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --duration-fast:120ms; --duration-base:200ms;

  --kopf-hoehe:76px;
}

/* Grundlagen ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body{
  margin:0;background:var(--surface-page);color:var(--text-body);
  font-family:var(--font-sans);font-size:var(--text-base);font-weight:var(--weight-regular);
  line-height:var(--leading-normal);-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{color:var(--text-heading);font-weight:var(--weight-semibold);
  line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);margin:0 0 var(--space-4)}
h1{font-size:var(--text-h1)} h2{font-size:var(--text-h2)} h3{font-size:var(--text-h3)} h4{font-size:var(--text-h4)}
p{margin:0 0 var(--space-4)}

/* Worttrennung ----------------------------------------------------------
   Lange Woerter sollen ungetrennt bleiben, solange sie in die Zeile passen,
   und erst dann brechen - an einer Stelle, an der man im Deutschen trennt.
   Frueher schrieb man dafuer den weichen Trennstrich ­ von Hand ins
   Wort. Das macht heute der Browser selbst.

   hyphens:auto trennt nach den Regeln der SEITENSPRACHE. Ohne <html lang="de">
   passiert deshalb gar nichts - das Attribut steht in jeder Seite, wer es
   entfernt, schaltet die Trennung stillschweigend ab.

   hyphenate-limit-chars haelt kurze Woerter heraus: erst ab 10 Zeichen wird
   getrennt, und nie naeher als 4 Zeichen an Anfang oder Ende. Browser, die
   die Zeile nicht kennen, trennen etwas grosszuegiger - unschoener, nie falsch.

   overflow-wrap ist das letzte Netz fuer das, was sich nicht trennen laesst,
   etwa eine lange Adresse: lieber hart umbrechen als die Seite waagerecht
   wegschieben. */
h1,h2,h3,h4,p,li,figcaption,dt,dd{
  -webkit-hyphens:auto;hyphens:auto;
  -webkit-hyphenate-limit-before:4;-webkit-hyphenate-limit-after:4;
  hyphenate-limit-chars:10 4 4;
  overflow-wrap:break-word;
}
/* Wo Trennung stoert: Navigation, Schaltflaechen, Etiketten, Kennzahlen.
   Das sind kurze Beschriftungen, die man am Stueck liest - ein Trennstrich
   waere dort ein Stolperstein, kein Dienst. `manual` heisst nicht "nie",
   sondern "nur da, wo ein &shy; steht". */
.zum-inhalt,.navi-link,.klappmenue a,.knopf,.marke,.augenmerk,.schlagwort,
.filter,.fuss h2,.kennzahl-wert,.logowand-feld{
  -webkit-hyphens:manual;hyphens:manual;
}
a{color:var(--text-link);text-decoration:none;transition:color var(--duration-fast) var(--ease-standard)}
a:hover{color:var(--text-link-hover);text-decoration:underline}
:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-radius:var(--radius-sm)}
[hidden]{display:none!important}
.nur-fuer-screenreader{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.zum-inhalt{position:absolute;left:var(--space-4);top:-60px;z-index:200;background:var(--blue-500);
  color:#fff;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);
  transition:top var(--duration-base) var(--ease-standard)}
.zum-inhalt:focus{top:var(--space-4);text-decoration:none;color:#fff}

/* Layout ---------------------------------------------------------------- */
.huelle{width:100%;max-width:var(--container-max);margin:0 auto;padding:0 var(--space-5)}
.huelle-schmal{max-width:var(--container-narrow)}
.block{padding:var(--space-9) 0}
.block-eng{padding:var(--space-8) 0}
.block-alt{background:var(--surface-alt)}
.block-tint{background:var(--surface-tint)}
.block-ink{background:var(--ink-900);color:#fff}
.block-ink h2,.block-ink h3{color:#fff}
.block-ink p{color:rgba(255,255,255,.82)}
.block-ink .augenmerk{color:#8ec4e8}
.block-ink .vorspann{color:rgba(255,255,255,.86)}

.gitter{display:grid;gap:var(--space-5)}
@media (min-width:700px){ .g2{grid-template-columns:repeat(2,1fr)} }
@media (min-width:900px){ .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} }
@media (min-width:700px) and (max-width:899px){ .g3,.g4{grid-template-columns:repeat(2,1fr)} }

.augenmerk{display:inline-block;font-size:var(--text-sm);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--blue-600);
  margin:0 0 var(--space-3)}
.vorspann{font-size:var(--text-lead);line-height:var(--leading-snug);color:var(--ink-700)}
.gedaempft{color:var(--text-muted)}
.mittig{text-align:center}
.kopfzeile-block{max-width:var(--container-narrow);margin:0 auto var(--space-7)}
.kopfzeile-block.mittig{text-align:center}
.kopfzeile-block.eng{margin-bottom:var(--space-6)}
.nach-block{margin-top:var(--space-7)}

/* Knoepfe --------------------------------------------------------------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-family:inherit;font-size:var(--text-base);font-weight:var(--weight-semibold);
  padding:var(--space-3) var(--space-5);border-radius:var(--radius-md);border:var(--border-width) solid transparent;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background var(--duration-fast) var(--ease-standard),
             color var(--duration-fast) var(--ease-standard),
             border-color var(--duration-fast) var(--ease-standard),
             transform var(--duration-fast) var(--ease-standard)}
.knopf:hover{text-decoration:none;transform:translateY(-1px)}
.knopf:active{transform:translateY(0)}
.knopf-primaer{background:var(--color-primary);color:#fff}
.knopf-primaer:hover{background:var(--color-primary-hover);color:#fff}
.knopf-primaer:active{background:var(--color-primary-active)}
.knopf-sekundaer{background:transparent;color:var(--blue-600);border-color:var(--blue-500)}
.knopf-sekundaer:hover{background:var(--blue-50);color:var(--blue-700)}
.knopf-hell{background:#fff;color:var(--ink-900)}
.knopf-hell:hover{background:var(--gray-100);color:var(--ink-900)}
.knopf-geist{background:transparent;color:var(--blue-600);padding-left:0;padding-right:0}
.knopf-geist:hover{background:transparent;color:var(--blue-700);text-decoration:underline}
.knopf-gross{font-size:var(--text-body-lg);padding:var(--space-4) var(--space-6)}
.knopf-reihe{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.knopf-reihe-mittig{justify-content:center}

/* Kopfbereich ----------------------------------------------------------- */
.kopf{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:var(--border-width) solid var(--border-subtle)}
.kopf-innen{display:flex;align-items:center;justify-content:space-between;
  height:var(--kopf-hoehe);gap:var(--space-5)}
.kopf-logo{display:flex;align-items:center;flex:0 1 auto;min-width:0}
.kopf-logo img{height:26px;width:auto}
/* Das Wortzeichen ist sehr breit (Verhaeltnis rund 11,5:1). Auf schmalen Schirmen
   schiebt es sonst den Menueknopf aus dem Bild - gemessen: 8 px Querscrollen bei 375 px. */
@media (max-width:560px){
  .huelle{padding:0 var(--space-4)}
  .kopf-logo img{height:auto;width:208px}
}
@media (max-width:360px){
  .kopf-logo img{width:176px}
}
.kopf-logo:hover{text-decoration:none}
.haupt-navi{display:none}
@media (min-width:1000px){
  .haupt-navi{display:flex;align-items:center;gap:var(--space-2)}
}
.navi-link{color:var(--ink-700);font-size:var(--text-base);padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-md);white-space:nowrap;max-width:100%}
/* Sicherheitsnetz: nowrap haelt Beschriftungen zusammen, schiebt aber bei einer
   zu langen Beschriftung die ganze Seite waagerecht weg - auf schmalen Geraeten
   gemessen mit „Wegbeschreibung bei Google Maps aufrufen" (429px bei 320px Platz).
   Auf Telefonbreite darf ein Knopf deshalb umbrechen. Bei den vorhandenen
   Beschriftungen passiert das nicht, alle bleiben unter 288px. */
@media (max-width:699px){ .knopf{white-space:normal} }
.navi-link:hover{color:var(--ink-900);background:var(--gray-100);text-decoration:none}
.navi-link[aria-current="page"]{color:var(--blue-600);font-weight:var(--weight-semibold)}
.kopf-tat{display:none}
@media (min-width:1000px){ .kopf-tat{display:inline-flex} }

/* Klappmenue */
.menue-knopf{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  background:transparent;border:var(--border-width) solid var(--border-subtle);
  border-radius:var(--radius-md);cursor:pointer;color:var(--ink-900)}
@media (min-width:1000px){ .menue-knopf{display:none} }
.menue-knopf svg{width:22px;height:22px}
.klappmenue{position:fixed;inset:var(--kopf-hoehe) 0 auto 0;background:#fff;
  border-bottom:var(--border-width) solid var(--border-subtle);box-shadow:var(--shadow-lg);
  padding:var(--space-4) 0 var(--space-6);z-index:99;max-height:calc(100vh - var(--kopf-hoehe));
  overflow-y:auto}
.klappmenue[hidden]{display:none!important}
.klappmenue a{display:block;padding:var(--space-3) var(--space-5);color:var(--ink-900);
  font-size:var(--text-body-lg);border-bottom:1px solid var(--gray-100)}
.klappmenue a:hover{background:var(--gray-50);text-decoration:none}
.klappmenue .knopf{margin:var(--space-4) var(--space-5) 0;width:calc(100% - var(--space-5)*2)}
/* `.klappmenue a` (dunkle Schrift) ist spezifischer als `.knopf-primaer` und gewann – der Knopf
   im Klappmenue stand mit dunkler Schrift auf Blau (Holger, iPhone, 16.09.2026). */
.klappmenue a.knopf-primaer{color:#fff;border-bottom:0}
.klappmenue a.knopf-primaer:hover{background:var(--color-primary-hover);color:#fff}
@media (min-width:1000px){ .klappmenue{display:none!important} }

/* Karten ---------------------------------------------------------------- */
.karte{background:var(--surface-card);border:var(--border-width) solid var(--border-subtle);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:var(--space-6);
  display:flex;flex-direction:column}
.karte h3,.karte h2{margin-bottom:var(--space-2)}
/* In einer Karte ist die Ueberschrift semantisch eine h2 (sie folgt direkt auf die h1
   der Seite), soll aber wie eine h3 aussehen. Groesse hier festlegen, nicht im Markup. */
.karte h2{font-size:var(--text-h3)}
.karte p{color:var(--ink-700);margin-bottom:var(--space-4)}
.karte p:last-child{margin-bottom:0}
.karte-tat{margin-top:auto;padding-top:var(--space-2)}
a.karte{color:inherit}
a.karte:hover{text-decoration:none;box-shadow:var(--shadow-lg);transform:translateY(-2px);
  border-color:var(--blue-100)}
a.karte{transition:box-shadow var(--duration-base) var(--ease-standard),
                   transform var(--duration-base) var(--ease-standard),
                   border-color var(--duration-base) var(--ease-standard)}
a.karte h3,a.karte h2{color:var(--ink-900)}
a.karte:hover h3,a.karte:hover h2{color:var(--blue-600)}

/* Blog ------------------------------------------------------------------ */
.beitrag-bild{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-md);
  margin-bottom:var(--space-4)}
.beitrag-meta{font-size:var(--text-sm);color:var(--text-muted);margin-bottom:var(--space-2);
  display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}
.marke{display:inline-block;font-size:var(--text-xs);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;padding:3px var(--space-3);
  border-radius:var(--radius-pill);background:var(--blue-50);color:var(--blue-700)}
.filterleiste{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-7)}
.filter{font-family:inherit;font-size:var(--text-sm);padding:var(--space-2) var(--space-4);
  border-radius:var(--radius-pill);border:var(--border-width) solid var(--border-subtle);
  background:#fff;color:var(--ink-700);cursor:pointer;
  transition:background var(--duration-fast) var(--ease-standard),
             border-color var(--duration-fast) var(--ease-standard),
             color var(--duration-fast) var(--ease-standard)}
.filter:hover{background:var(--gray-50);color:var(--ink-900)}
.filter[aria-pressed="true"]{background:var(--blue-50);border-color:var(--blue-500);
  color:var(--blue-700);font-weight:var(--weight-semibold)}
.beitrag-text{max-width:var(--container-narrow);margin:0 auto}
.beitrag-text p{font-size:var(--text-body-lg);line-height:var(--leading-normal);color:var(--ink-900)}
.beitrag-text h2{font-size:var(--text-h2);margin-top:var(--space-8)}
.beitrag-text h3{font-size:var(--text-h3);margin-top:var(--space-6)}
.beitrag-text img{border-radius:var(--radius-md);margin:var(--space-6) 0}
.beitrag-text ul,.beitrag-text ol{color:var(--ink-900);font-size:var(--text-body-lg);
  padding-left:var(--space-5);margin-bottom:var(--space-5)}
.beitrag-text li{margin-bottom:var(--space-2)}
.schlagworte{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-7);
  padding-top:var(--space-5);border-top:var(--border-width) solid var(--border-subtle)}
.schlagwort{font-size:var(--text-sm);color:var(--text-muted)}
.leer-hinweis{padding:var(--space-8) 0;text-align:center;color:var(--text-muted)}

/* Videoeinbettung (Zwei-Klick) --------------------------------------------
   Vor dem Klick geht KEINE Anfrage an YouTube: Vorschaubild und Knopf liegen
   auf dem eigenen Server. Erst der Klick tauscht die Flaeche gegen den
   YouTube-Rahmen. Ohne JavaScript bleibt der Verweis in der Bildunterschrift
   der Weg zum Video - eine Zusatzfunktion darf den Zugang nie versperren. */
.video{margin:var(--space-6) 0}
.video-flaeche{display:block;position:relative;width:100%;padding:0;border:none;
  background:var(--ink-900);border-radius:var(--radius-md);overflow:hidden;cursor:pointer;
  aspect-ratio:16/9}
.video-flaeche img{width:100%;height:100%;object-fit:cover;margin:0;border-radius:0;
  transition:opacity var(--duration-base) var(--ease-standard)}
.video-flaeche:hover img{opacity:.82}
.video-knopf{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:68px;height:68px;border-radius:50%;background:var(--blue-500);color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg);
  transition:background var(--duration-fast) var(--ease-standard),
             transform var(--duration-base) var(--ease-standard)}
.video-flaeche:hover .video-knopf{background:var(--blue-600);transform:translate(-50%,-50%) scale(1.06)}
.video-knopf svg{width:26px;height:26px;margin-left:3px}
.video-rahmen{width:100%;aspect-ratio:16/9;border:none;border-radius:var(--radius-md);display:block}
.video figcaption{margin-top:var(--space-3);font-size:var(--text-sm);color:var(--text-muted);
  line-height:var(--leading-snug)}
@media (prefers-reduced-motion:reduce){
  .video-flaeche:hover .video-knopf{transform:translate(-50%,-50%)}
}

/* Fussbereich ----------------------------------------------------------- */
.fuss{background:var(--ink-900);color:rgba(255,255,255,.78);padding:var(--space-9) 0 var(--space-6);
  font-size:var(--text-base)}
.fuss a{color:rgba(255,255,255,.78)}
.fuss a:hover{color:#fff}
.fuss h2{color:#fff;font-size:var(--text-sm);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;margin-bottom:var(--space-4)}
.fuss-gitter{display:grid;gap:var(--space-7)}
@media (min-width:700px){ .fuss-gitter{grid-template-columns:1.4fr 1fr 1fr} }
@media (min-width:1000px){ .fuss-gitter{grid-template-columns:1.6fr 1fr 1fr 1fr} }
.fuss-logo{height:24px;width:auto;margin-bottom:var(--space-5)}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss li{margin-bottom:var(--space-3)}
.fuss-sozial{display:inline-flex;align-items:center;gap:var(--space-2)}
.fuss-sozial svg{width:16px;height:16px;flex:none;opacity:.8}
.fuss-sozial:hover svg{opacity:1}
.fuss-schluss{margin-top:var(--space-8);padding-top:var(--space-5);
  border-top:1px solid rgba(255,255,255,.14);display:flex;flex-wrap:wrap;gap:var(--space-4);
  justify-content:space-between;font-size:var(--text-sm);color:rgba(255,255,255,.6)}
.fuss-schluss a{color:rgba(255,255,255,.6)}
.fuss-schluss nav{display:flex;flex-wrap:wrap;gap:var(--space-4)}

/* Nach-oben-Knopf ------------------------------------------------------- */
.nach-oben{position:fixed;right:var(--space-5);bottom:var(--space-5);width:46px;height:46px;
  border-radius:50%;background:var(--blue-500);color:#fff;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);
  opacity:0;visibility:hidden;z-index:90;
  transition:opacity var(--duration-base) var(--ease-standard),
             visibility var(--duration-base) var(--ease-standard),
             background var(--duration-fast) var(--ease-standard)}
.nach-oben.sichtbar{opacity:1;visibility:visible}
.nach-oben:hover{background:var(--blue-600)}
.nach-oben svg{width:20px;height:20px}

/* Grosse Schriften erst ab Tablet --------------------------------------- */
@media (min-width:800px){
  :root{--text-h1:40px;--text-h2:30px}
}


/* Siro-Ergaenzungen ------------------------------------------------------- */
/* Blog ohne Logodatei: der Name als Wortmarke */
.kopf-name{font-size:var(--text-h4);font-weight:var(--weight-semibold);color:var(--ink-900);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fuss-name{display:block;color:#fff;font-size:var(--text-h4);font-weight:var(--weight-semibold);
  margin-bottom:var(--space-4)}
/* KI-Hinweis: steht nur im Artikel, nie in Uebersicht, Auszug oder Feed */
.ki-hinweis{font-size:var(--text-sm);color:var(--text-muted);margin-top:var(--space-6);
  padding:var(--space-3) var(--space-4);background:var(--surface-alt);border-radius:var(--radius-md)}
.bildquelle{font-size:var(--text-xs);color:var(--text-muted);margin:calc(var(--space-3) * -1) 0 var(--space-5)}
.bildquelle a{color:inherit;text-decoration:underline}
/* Seitenzaehlung der Uebersicht */
.seitenzahlen{display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:center;
  margin-top:var(--space-7)}
.seitenzahlen a,.seitenzahlen span{min-width:44px;padding:var(--space-2) var(--space-3);text-align:center;
  border-radius:var(--radius-md);border:var(--border-width) solid var(--border-subtle)}
.seitenzahlen [aria-current]{background:var(--blue-50);border-color:var(--blue-500);color:var(--blue-700);
  font-weight:var(--weight-semibold)}
/* Aufmacher im Artikel: ganzes Bild im Originalformat statt 16:9-Zuschnitt (Holger,
   16.09.2026). Ein 3:2-Bild verlor sonst unten einen Streifen - und dort sitzt das KI-Label.
   width/height stehen am <img>, der Platz ist also vor dem Laden reserviert. */
.beitrag-bild.aufmacher{aspect-ratio:auto;height:auto;object-fit:initial}
/* Karte mit KI-Label: Zuschnitt unten ansetzen, damit die Kennzeichnung sichtbar bleibt. */
.beitrag-bild.ki-label{object-position:center bottom}

/* Bilder im Text immer ueber die volle Textbreite (Holger, 16.09.2026). Browser geben
   <figure> von Haus aus 40 px Aussenabstand links und rechts - ein Stockbild stand dadurch
   eingerueckt. Kleinere Bilder werden bewusst hochgezogen: ein schmales Bild mitten im
   Text sah schlechter aus als ein etwas weiches. */
.beitrag-text figure{margin:var(--space-6) 0}
.beitrag-text img{width:100%}
.beitrag-text figure img{margin:0}
.beitrag-text figcaption{margin-top:var(--space-3);font-size:var(--text-sm);color:var(--text-muted);
  line-height:var(--leading-snug)}
.beitrag-text figcaption a{color:inherit;text-decoration:underline}

/* Randzitat / Hervorhebung. Gestaltung wie im Blog von Bernd Behrens (Theme aak-pro:
   grauer Kasten, fett und kursiv, grosses Anfuehrungszeichen links). Das Zeichen kommt aus
   einer Systemschrift statt aus Font Awesome - keine fremde Schrift im Blog. */
.beitrag-text blockquote{position:relative;margin:var(--space-6) 0;
  padding:var(--space-5) var(--space-6) var(--space-5) 84px;background:var(--gray-100);
  border-radius:var(--radius-md)}
.beitrag-text blockquote::before{content:"\201C";position:absolute;left:20px;top:10px;
  font:700 80px/1 Georgia,"Times New Roman",serif;color:var(--ink-300)}
.beitrag-text blockquote p{margin:0;font-size:var(--text-body-lg);font-weight:700;font-style:italic;
  line-height:var(--leading-snug);color:var(--ink-900)}
/* Ein Zitat ist ein Satz zum Am-Stueck-Lesen - Trennstriche wie „abge-straft" stoeren dort
   (Sichtpruefung 375 px). overflow-wrap aus der Grundregel bleibt als Netz. */
.beitrag-text blockquote p{-webkit-hyphens:manual;hyphens:manual}
.beitrag-text blockquote p + p{margin-top:var(--space-3)}
@media (max-width:560px){
  .beitrag-text blockquote{padding-left:60px}
  .beitrag-text blockquote::before{left:14px;font-size:60px}
}

/* Vorheriger und naechster Beitrag unter dem Artikel */
.nachbarn{display:grid;gap:var(--space-4);margin-top:var(--space-7);padding-top:var(--space-5);
  border-top:var(--border-width) solid var(--border-subtle)}
@media (min-width:700px){ .nachbarn{grid-template-columns:1fr 1fr} .nachbarn .spaeter{text-align:right} }
.nachbarn span{display:block;font-size:var(--text-sm);color:var(--text-muted)}