/* ============================================================
   DEUKOS Bildbausteine (Praefix abb-), Stand 26.10.2026
   Ergaenzt /blog/styles.css und die Seiten-Styles. Nur NEUE Klassen,
   keine bestehende Klasse wird ueberschrieben. Erzeugt weder Ueberschriften
   noch Text noch Schema: SEO-neutral. Spezifitaet teils bewusst doppelt
   (.x.x), damit .article-body li/ol/a/h3 aus den Inline-Styles nicht greifen.
   Einbinden NACH styles.css:  <link rel="stylesheet" href="/blog/bausteine.css?v=20261026">
   ============================================================ */
:root {
  --abb-text: #131B2E;
  --abb-text-2: #45464D;
  --abb-text-3: #66686E;
  --abb-linie: rgba(19, 27, 46, 0.10);
  --abb-grund: #EEF1F4;            /* Platzhalter, bis das Bild da ist */
  --abb-akzent: #0051D5;
  --abb-akzent-dunkel: #003EA8;
  --abb-radius: 10px;
  --abb-ease: cubic-bezier(0.22, 1, 0.36, 1);   /* ease-out-quint */
}

/* --- gemeinsame Bildflaeche ------------------------------------ */
.abb-kopf img, .abb-bild img, .abb-paar img, .abb-schritt img {
  display: block; width: 100%; height: auto;   /* Seitenverhaeltnis aus width/height-Attributen: kein CLS */
  background: var(--abb-grund);
  border: 1px solid var(--abb-linie);
  border-radius: var(--abb-radius);
}
.abb-kopf figcaption, .abb-bild figcaption, .abb-paar > figcaption, .abb-schritt figcaption {
  max-width: 68ch; margin-top: 10px;
  font-size: 14.5px; line-height: 1.55; color: var(--abb-text-2);
}
.abb-quelle { display: block; margin-top: 2px; font-size: 13px; color: var(--abb-text-3); }

/* --- (a) Kopfbild unter H1/Lede (LCP-Bild, nie animiert) -------- */
.abb-kopf { max-width: 1040px; margin: -24px auto 64px; padding: 0 32px; }
.abb-kopf img { border-radius: 14px; box-shadow: 0 1px 2px rgba(19,27,46,.05), 0 18px 40px -22px rgba(19,27,46,.30); }

/* --- (b) Abbildung im Fliesstext ------------------------------- */
.abb-bild { margin: 40px 0; }
.abb-bild--schmal img { max-width: 440px; margin: 0 auto; }  /* Hochkant-Dialoge */
@media (min-width: 1040px) {
  .abb-breit { width: 960px; margin-left: calc(50% - 480px); margin-right: calc(50% - 480px); }
}
/* Streifenbild (Breite >= 4x Hoehe): auf dem Handy feste Hoehe, waagerecht wischbar */
@media (max-width: 640px) {
  .abb-streifen picture { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--abb-radius); }
  .abb-streifen picture img { width: auto; max-width: none; height: 160px; }
}

/* --- (c) Schritt-Abbildung fuer Anleitungen -------------------- */
ol.abb-schritte.abb-schritte { list-style: none; padding: 0; margin: 8px 0 48px; counter-reset: abb-nr; }
.abb-schritte .abb-schritt {
  counter-increment: abb-nr; position: relative;
  margin: 0; padding: 28px 0 12px 64px;
  border-top: 1px solid var(--abb-linie);
  font-size: inherit; line-height: inherit;
}
.abb-schritte .abb-schritt::before {
  content: counter(abb-nr, decimal-leading-zero);
  position: absolute; left: 0; top: 30px;
  font: 700 15px/1.6 var(--font-display, Inter, system-ui, sans-serif);
  letter-spacing: .06em; color: var(--abb-akzent); font-variant-numeric: tabular-nums;
}
.abb-schritte .abb-schritt h3 { margin: 0 0 8px; }
.abb-schritte .abb-schritt p { margin-bottom: .8em; }
.abb-schritte .abb-schritt figure { margin: 18px 0 12px; }
@media (max-width: 640px) {
  .abb-schritte .abb-schritt { padding-left: 0; padding-top: 52px; }
  .abb-schritte .abb-schritt::before { top: 24px; }
}

/* --- (d) Vorher/Nachher-Paar ----------------------------------- */
.abb-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 40px 0; }
.abb-paar__seite { margin: 0; }
.abb-paar__marke {
  display: block; margin-bottom: 8px;
  font: 600 12px/1.3 var(--font-display, Inter, system-ui, sans-serif);
  letter-spacing: .08em; text-transform: uppercase; color: var(--abb-text-3);
}
.abb-paar__marke--neu { color: var(--abb-akzent); }
.abb-paar > figcaption { grid-column: 1 / -1; margin-top: 0; }
@media (max-width: 640px) { .abb-paar { grid-template-columns: 1fr; gap: 16px; } }

/* --- (e) Passende Themen: Linkliste statt Kartengitter ---------- */
.abb-themen { margin: 56px 0 8px; }
.abb-themen__titel.abb-themen__titel {
  margin: 0 0 8px; font: 600 12px/1.3 var(--font-display, Inter, system-ui, sans-serif);
  letter-spacing: .08em; text-transform: uppercase; color: var(--abb-text-3);
}
ul.abb-themen__liste.abb-themen__liste { list-style: none; padding: 0; margin: 0; }
.abb-themen__liste.abb-themen__liste li { margin: 0; border-top: 1px solid var(--abb-linie); font-size: inherit; }
.abb-themen__liste.abb-themen__liste li:last-child { border-bottom: 1px solid var(--abb-linie); }
.abb-themen__liste.abb-themen__liste a {
  display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr) auto; gap: 4px 20px;
  align-items: baseline; padding: 16px 2px; min-height: 44px;
  text-decoration: none; color: var(--abb-text);
}
.abb-themen__name { font: 600 17px/1.4 var(--font-display, Inter, system-ui, sans-serif); }
.abb-themen__text { font-size: 15px; line-height: 1.5; color: var(--abb-text-2); }
.abb-themen__liste.abb-themen__liste a::after {
  content: "\2192"; color: var(--abb-akzent);
  transition: transform .25s var(--abb-ease);
}
.abb-themen__liste.abb-themen__liste a:hover .abb-themen__name { color: var(--abb-akzent-dunkel); }
.abb-themen__liste.abb-themen__liste a:hover::after { transform: translateX(4px); }
.abb-themen__liste.abb-themen__liste a:focus-visible { outline: 2px solid var(--abb-akzent); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 640px) {
  .abb-themen__liste.abb-themen__liste a { grid-template-columns: minmax(0, 1fr) auto; }
  .abb-themen__text { grid-column: 1; grid-row: 2; }
  .abb-themen__liste.abb-themen__liste a::after { grid-column: 2; grid-row: 1; }
}

/* --- (f) Einblenden beim Scrollen ------------------------------
   Greift NUR, wenn das Skript lief (html.abb-an) und keine reduzierte
   Bewegung gewuenscht ist. Nur opacity/transform: kein Layout, kein CLS.
   Nie auf .abb-kopf oder Elemente im ersten Bildschirm setzen (LCP). */
@media (prefers-reduced-motion: no-preference) {
  .abb-an .abb-auf { transition: opacity .6s var(--abb-ease), transform .6s var(--abb-ease); }
  .abb-an .abb-auf:not(.abb-da) { opacity: 0; transform: translateY(14px); }
}
@media print { .abb-auf { opacity: 1 !important; transform: none !important; } }
/* ============================================================
   Zusatz P1 (26.10.2026): Fusszeile v2, Kopfleiste, Paar 4:3, Folgeliste.
   Quelle Fusszeile: 01_footer.md Abschnitt 6. Ueberschreibt nur
   .site-footer--v2 (spaeter geladen als blog/styles.css).
   ============================================================ */
.abb-themen--folge { margin-top: 24px; }
.abb-paar--43 img { aspect-ratio: 4 / 3; object-fit: cover; }
.abb-themen--folge .abb-themen__liste + .abb-themen__titel { margin-top: 32px; }

/* Kopfleiste: unter 769 px zeigt styles.css nur das Mobilmenue; zwischen 769 und 900 px
   brach die Leiste mit FAQ-Eintrag (orte/*) sonst zweizeilig um (gemessen). Deckt die
   Vorgabe "unter 560 px ausblenden" mit ab. */
.site-nav__link { white-space: nowrap; }
@media (max-width: 900px) { .site-nav__link--anl { display: none; } }

.site-footer--v2 { text-align: left; padding: 32px 24px 24px; }
.sf-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.sf-col summary { font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--color-text-secondary); list-style: none; cursor: pointer; padding: 6px 0; }
.sf-col summary::-webkit-details-marker { display: none; }
.sf-col a { display: block; padding: 5px 0; font-size: 13px; }
.sf-recht { max-width: 1100px; margin: 20px auto 0; padding-top: 16px; border-top: .5px solid var(--color-border); font-size: 13px; }
@media (max-width: 900px) { .sf-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .sf-grid { grid-template-columns: 1fr; gap: 0; }
  .sf-col { border-bottom: .5px solid var(--color-border); }
  .sf-col summary { padding: 14px 0; font-size: 12px; }
  .sf-col summary::after { content: "+"; float: right; }
  .sf-col[open] summary::after { content: "\2013"; }
  .sf-col a { padding: 10px 0; }
}
@media (min-width: 561px) { .sf-col summary { pointer-events: none; } }
/* Handy: Fusszeile buendig mit dem Text (32 px), keine Doppellinie ueber der Rechtsleiste */
@media (max-width: 560px) {
  .site-footer--v2 { padding-left: 32px; padding-right: 32px; }
  .site-footer--v2 .sf-recht { border-top: 0; margin-top: 8px; }
}

/* ============================================================
   Zusatz Videos (27.10.2026): Zwei-Klick-Baustein, Quelle video/video.css
   ============================================================ */
/* DEUKOS Video-Baustein (Praefix vid), Stand 26.10.2026
   Zwei-Klick-Einbettung: vor dem Klick nur ein lokales Vorschaubild, keine Anfrage an YouTube/Google.
   Nur NEUE Klassen. Einbinden nach styles.css:  <link rel="stylesheet" href="/blog/video.css?v=20261026"> */
.vid { --vid-text: #131B2E; --vid-text-2: #45464D; --vid-akzent: #0051D5; --vid-akzent-dunkel: #003EA8;
  margin: 40px 0; font-family: inherit; }
.vid__rahmen { position: relative; background: #EEF1F4; border: 1px solid rgba(19,27,46,.10); border-radius: 10px; overflow: hidden; }
.vid--quer .vid__rahmen { aspect-ratio: 16 / 9; width: 100%; }
.vid--hoch { max-width: 300px; }
.vid--hoch .vid__rahmen { aspect-ratio: 9 / 16; width: 100%; }
@media (min-width: 900px) { .vid--hoch.vid--rechts { float: right; margin: 8px 0 24px 32px; } }
.vid__start { position: absolute; inset: 0; display: block; color: #fff; text-decoration: none; cursor: pointer; }
.vid__start picture, .vid__start img, .vid__rahmen iframe { display: block; width: 100%; height: 100%; border: 0; }
.vid__start img { object-fit: cover; }
.vid__play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  background: var(--vid-akzent); box-shadow: 0 1px 2px rgba(19,27,46,.25); transition: background-color .2s ease-out; }
.vid__play::after { content: ""; position: absolute; left: 25px; top: 19px; border-style: solid; border-width: 13px 0 13px 21px;
  border-color: transparent transparent transparent #fff; }
.vid__start:hover .vid__play, .vid__start:focus-visible .vid__play { background: var(--vid-akzent-dunkel); }
.vid__start:focus-visible { outline: 3px solid var(--vid-akzent); outline-offset: -3px; }
.vid__dauer { position: absolute; right: 10px; bottom: 10px; padding: 2px 7px; border-radius: 4px; background: var(--vid-text);
  color: #fff; font-size: 13px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.vid figcaption { max-width: 68ch; margin-top: 10px; font-size: 14.5px; line-height: 1.55; color: var(--vid-text-2); }
.vid__hinweis { display: block; margin-top: 2px; font-size: 13px; color: #66686E; }
.vid__hinweis a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.vid__hinweis a:hover { color: var(--vid-akzent); }
@media (prefers-reduced-motion: reduce) { .vid__play { transition: none; } }
/* ============================================================
   Paket 3 (27.10.2026, SEO-Audit Nr. 3): Kaufkasten am Ende der Anleitungen.
   Der Text erbte die dunkle Fliesstextfarbe aus .article-body (2,44:1 auf Hausblau).
   Weiss auf #0051d5 = 6,6:1 (WCAG AA). Selektor bewusst staerker als .article-body p / a.
   ============================================================ */
.article-body .article-cta,
.article-body .article-cta .article-cta__title,
.article-body .article-cta p.article-cta__text { color: #fff; }
.article-body .article-cta p.article-cta__text { opacity: 1; }
.article-body .article-cta a.article-cta__sub-link { color: #fff; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px; }
.article-body .article-cta a.article-cta__sub-link:hover,
.article-body .article-cta a.article-cta__sub-link:focus-visible { text-decoration-thickness: 2px; }
/* ============================================================
   Zusatz Paket 7 (27.10.2026): Zeile "DEUKOS folgen" in der Fusszeile.
   Liniensymbole in Textgrau, beim Darueberfahren/Fokus blau auf hellblauem
   Grund, Tippflaeche 40 x 40 px. Nur neue Klassen.
   ============================================================ */
.sf-social { max-width: 1100px; margin: 20px auto 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.sf-social__titel { font-size: 13px; color: var(--color-text-secondary, #45464D); margin-right: 8px; }
.site-footer--v2 .sf-social__link { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  padding: 0; border-radius: 10px; color: var(--color-text-secondary, #45464D); text-decoration: none;
  transition: color .2s ease, background-color .2s ease; }
.site-footer--v2 .sf-social__link:hover,
.site-footer--v2 .sf-social__link:focus-visible { color: #0051D5; background-color: #EEF5FF; }
.site-footer--v2 .sf-social__link:focus-visible { outline: 2px solid #0051D5; outline-offset: 2px; }
.sf-social__link svg { display: block; }
@media (max-width: 560px) { .sf-social { margin-top: 16px; } }
@media (prefers-reduced-motion: reduce) { .site-footer--v2 .sf-social__link { transition: none; } }