/* electric-rocken.de — Stylesheet
   Eine Datei, keine Frameworks, keine fremden Schriften oder Dienste.

   Leitidee: ein Gitarrenverstaerker. Der Kopf ist das schwarze Tolex mit dem
   Namensschild, der Inhalt die cremefarbene Frontplatte.
   Jede der acht Rubriken hat eine eigene Kabelfarbe - wie Patchkabel, die
   alle in denselben Verstaerker gesteckt sind. Bunt, weil die Themen bunt
   sind; geordnet, weil jede Farbe genau ein Thema meint und immer mit ihrem
   Namen zusammen erscheint, nie allein.

   Alle Rubrikfarben sind nachgerechnet: mindestens 3:1 auf heller Platte,
   mindestens 4,5:1 auf dunklem Tolex. */

/* ---------------------------------------------------------- Farbrollen */
:root {
  color-scheme: light;

  /* Frontplatte */
  --grund:       #F2ECDD;
  --karte:       #FBF7EE;
  --flaeche:     #E8E0CC;
  --linie:       #D6CCB4;
  --linie-weich: #E4DCC8;

  --tinte:       #1C1A15;
  --tinte-2:     #4F4A40;
  /* 09.11.2026 von #746D60 abgedunkelt: die kleinen Datums- und
     Rubrikzeilen kamen auf heller Karte nur auf 4,35:1, noetig sind
     4,5:1. Jetzt 5,1:1. */
  --tinte-3:     #6B6456;

  /* Tolex: der Kopf ist in beiden Modi dunkel, wie beim Verstaerker */
  --tolex:       #17150F;
  --tolex-2:     #2A261D;
  --tolex-text:  #EFE8D8;
  --tolex-text-2:#B9B09E;


  /* Kabelfarben, eine je Rubrik */
  --k-werkstatt:    #DC642A;  /* Roehrenorange */
  --k-automation:   #2F80ED;  /* Signalblau */
  --k-konstruktion: #9B59D0;  /* Filamentviolett */
  --k-haus:         #B54C7E;  /* Rosenrot */
  --k-tiere:        #3B964C;  /* Wiesengruen */
  --k-fahrzeuge:    #A97C0D;  /* Blinkergelb, abgedunkelt fuer helle Platte */
  --k-heimat:       #7A8A91;  /* Sandsteingrau */
  --k-feuerwehr:    #D7263D;  /* Signalrot */
  --k:              var(--k-werkstatt);

  --radius:    10px;
  --radius-sm: 6px;
  --schatten:  0 1px 1px rgba(40, 32, 20, .06), 0 12px 28px -20px rgba(40, 32, 20, .45);
  --mass:      68ch;

  /* Kopfschrift: schmale Grotesk wie die Beschriftung einer Frontplatte.
     Bahnschrift ist auf jedem Windows vorhanden; die anderen sind Ersatz. */
  --schrift-kopf: "Bahnschrift Condensed", "Bahnschrift", "Barlow Condensed",
                  "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --schrift-text: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;
  --schrift-mono: ui-monospace, "Cascadia Mono", SFMono-Regular, Consolas,
                  "Liberation Mono", Menlo, monospace;

  --st--1: clamp(.83rem, .81rem + .10vw, .89rem);
  --st-0:  clamp(1.02rem, .99rem + .16vw, 1.11rem);
  --st-1:  clamp(1.25rem, 1.16rem + .40vw, 1.55rem);
  --st-2:  clamp(1.55rem, 1.36rem + .85vw, 2.15rem);
  --st-3:  clamp(1.95rem, 1.6rem + 1.5vw, 2.9rem);
  --st-4:  clamp(2.4rem, 1.8rem + 2.6vw, 4rem);
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --grund: #17150F; --karte: #211E17; --flaeche: #2A261D;
    --linie: #3A352B; --linie-weich: #2F2B23;
    --tinte: #EFE8D8; --tinte-2: #C9C0AE; --tinte-3: #978E7E;
    --tolex: #0E0D09; --tolex-2: #221F18;
    --schatten: 0 1px 1px rgba(0, 0, 0, .4), 0 12px 28px -20px rgba(0, 0, 0, .9);
    --k-werkstatt: #E8692C; --k-automation: #3986EE; --k-konstruktion: #AA70D6;
    --k-haus: #C26E96; --k-tiere: #3E9E50; --k-fahrzeuge: #E5A913;
    --k-heimat: #8C9BA2; --k-feuerwehr: #E15769;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --grund: #17150F; --karte: #211E17; --flaeche: #2A261D;
  --linie: #3A352B; --linie-weich: #2F2B23;
  --tinte: #EFE8D8; --tinte-2: #C9C0AE; --tinte-3: #978E7E;
  --tolex: #0E0D09; --tolex-2: #221F18;
  --schatten: 0 1px 1px rgba(0, 0, 0, .4), 0 12px 28px -20px rgba(0, 0, 0, .9);
  --k-werkstatt: #E8692C; --k-automation: #3986EE; --k-konstruktion: #AA70D6;
  --k-haus: #C26E96; --k-tiere: #3E9E50; --k-fahrzeuge: #E5A913;
  --k-heimat: #8C9BA2; --k-feuerwehr: #E15769;
}

/* Jede Rubrik setzt ihre Kabelfarbe, alles darunter erbt sie als --k. */
.r-werkstatt    { --k: var(--k-werkstatt); }
.r-automation   { --k: var(--k-automation); }
.r-konstruktion { --k: var(--k-konstruktion); }
.r-haus         { --k: var(--k-haus); }
.r-tiere        { --k: var(--k-tiere); }
.r-fahrzeuge    { --k: var(--k-fahrzeuge); }
.r-heimat       { --k: var(--k-heimat); }
.r-feuerwehr    { --k: var(--k-feuerwehr); }

/* ------------------------------------------------------------ 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: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font: var(--st-0)/1.68 var(--schrift-text);
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  font-family: var(--schrift-kopf);
  font-stretch: condensed;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: .005em;
  margin: 0 0 .45em;
  text-wrap: balance;
}
h1 { font-size: var(--st-4); }
/* Abstaende ueber Ueberschriften knapp halten - luftig, aber nicht zergliedert (Axel, 07.11.2026) */
h2 { font-size: var(--st-2); margin-top: 1.3em; }
h3 { font-size: var(--st-1); margin-top: 1.1em; }
p, ul, ol { margin: 0 0 1.1em; }
p, li { max-width: var(--mass); text-wrap: pretty; }
/* Blocksatz ueberall (Axel, 07.11.2026); die Silbentrennung (lang="de")
   verhindert grosse Luecken zwischen den Woertern. */
p, li { text-align: justify; -webkit-hyphens: auto; hyphens: auto; }
/* Kurze Texte in schmalen Spalten (Karten, Einleitungen, Listenzeilen) bleiben
   linksbuendig - Blocksatz reisst dort grosse Luecken. */
:is(.karte, .seitenkopf, .logbuch, .themen__liste, .fuss) :is(p, li) { text-align: left; -webkit-hyphens: manual; hyphens: manual; }
/* Ueberschriften und ganze Karten/Zeilen nie im Blocksatz (Axel, 08.11.2026) */
h1, h2, h3, h4, .karten > li, .logbuch > li { text-align: left; -webkit-hyphens: manual; hyphens: manual; }
.gehoert-zu { margin: 1.5rem 0 0; color: var(--tinte-2); font-size: var(--st--1); }
.notizen-dazu { margin: 2.2rem 0 0; clear: both; }

.klein, small { font-size: var(--st--1); color: var(--tinte-3); }

/* Links tragen die Kabelfarbe ihres Zusammenhangs als Unterstrich. */
a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--k);
  text-decoration-thickness: 2px;
  text-underline-offset: .2em;
}
a:hover { text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid var(--k); outline-offset: 3px; border-radius: 3px; }

img { max-width: 100%; height: auto; }
figure { margin: 1.8em 0; }
figure img { border-radius: var(--radius-sm); display: block; }
figcaption { font-size: var(--st--1); color: var(--tinte-3); margin-top: .5em; max-width: var(--mass); }

code { font-family: var(--schrift-mono); font-size: .9em; background: var(--flaeche); padding: .1em .35em; border-radius: 4px; }
pre { background: var(--flaeche); padding: 1em; border-radius: var(--radius-sm); overflow-x: auto; }
pre code { background: none; padding: 0; }

table { border-collapse: collapse; width: 100%; margin: 1.5em 0; font-size: var(--st--1); }
.tabelle { overflow-x: auto; margin: 1.5em 0; }
.tabelle table { margin: 0; }
th, td { text-align: left; padding: .55em .7em; border-bottom: 1px solid var(--linie-weich); vertical-align: top; }
th { background: var(--flaeche); font-family: var(--schrift-kopf); font-stretch: condensed; letter-spacing: .03em; }
td { font-variant-numeric: tabular-nums; }

blockquote { margin: 1.6em 0; padding: .2em 0 .2em 1.1em; border-left: 4px solid var(--k); color: var(--tinte-2); }
hr { border: 0; border-top: 1px solid var(--linie); margin: 2.6em 0; }

.wrap { width: min(74rem, 100% - 2rem); margin-inline: auto; }
@media (min-width: 40em) { .wrap { width: min(74rem, 100% - 3rem); } }

.skip-link { position: absolute; left: -9999px; background: var(--tolex); color: var(--tolex-text); padding: .6em 1em; }
.skip-link:focus { left: 0; top: 0; z-index: 50; }

/* Nur fuer Vorleseprogramme sichtbar */
.unsichtbar {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Auf dem dunklen Kopf braucht der Fokusrahmen eine helle Farbe */
.kopf :focus-visible, .fuss :focus-visible { outline-color: var(--k-fahrzeuge); }

/* Beschriftung wie auf einer Frontplatte: schmal, Versalien, gesperrt */
.beschriftung {
  font-family: var(--schrift-kopf); font-stretch: condensed;
  text-transform: uppercase; letter-spacing: .12em;
  font-size: .78rem; font-weight: 600;
}

/* --------------------------------------------------------- Kopf (Tolex) */
.kopf { background: var(--tolex); color: var(--tolex-text); position: sticky; top: 0; z-index: 20; }
.kopf::after {
  /* Keder unter dem Kopf: die Paspel, die beim Verstaerker Tolex und Front trennt */
  content: ""; display: block; height: 3px;
  background: linear-gradient(90deg, var(--k-werkstatt), var(--k-fahrzeuge), var(--k-tiere),
              var(--k-automation), var(--k-konstruktion), var(--k-haus),
              var(--k-feuerwehr), var(--k-heimat));
}
/* Eine Zeile wie die Oberseite eines Verstaerkers: links das Namensschild,
   rechts die Bedienung. Die neun Themen liegen hinter einem
   Schalter, damit oben nur drei Punkte stehen; auf dem Handy rutscht die
   Navigation in eine zweite Zeile, Suche und Farbschalter bleiben oben. */
.kopf__innen {
  display: flex; align-items: center; gap: .5rem 1.1rem; flex-wrap: wrap;
  padding: .7rem 0; position: relative;
}
.kopf__innen .schild { flex: 0 1 auto; min-width: 0; }
.kopf__innen .nav { margin-left: auto; }

.schild { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: var(--tolex-text); }
.schild__name {
  display: flex; flex-direction: column; line-height: 1;
  font-family: var(--schrift-kopf); font-stretch: condensed; font-weight: 700;
}
.schild__name b { font-size: 1.45rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; }
.schild__name span { font-size: .78rem; letter-spacing: .2em; color: var(--tolex-text-2); margin-top: .3em; font-weight: 500; }
.schild__name svg { width: .8em; height: .8em; vertical-align: -.05em; color: var(--k-fahrzeuge); }

.nav { display: flex; gap: 1.4rem; align-items: center; }
.nav > a, .themen > summary {
  color: var(--tolex-text-2); text-decoration: none; font-size: var(--st--1);
  padding: .55em 0; border-bottom: 2px solid transparent;
  display: inline-flex; align-items: center; gap: .45em; white-space: nowrap;
}
.nav > a:hover, .themen > summary:hover { color: var(--tolex-text); }
.nav > a[aria-current="page"] { color: var(--tolex-text); border-bottom-color: var(--k-fahrzeuge); }
.nav__themen { display: inline-flex; align-items: center; gap: .4em; min-width: 0; max-width: 100%; }
.nav__themen--aktiv { color: var(--tolex-text); border-bottom-color: var(--k); }
.buchse { width: .55em; height: .55em; border-radius: 50%; background: var(--k); flex: none; }

/* Themen: eigenes Aufklappmenue ohne Skript (details/summary) */
.themen > summary { cursor: pointer; list-style: none; user-select: none; }
.themen > summary::-webkit-details-marker { display: none; }
.themen > summary::after {
  content: ""; width: .42em; height: .42em; margin: 0 .1em .2em .15em;
  border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.themen[open] > summary { color: var(--tolex-text); }
.themen[open] > summary::after { transform: rotate(-135deg); margin-bottom: -.15em; }
.themen--aktiv > summary { color: var(--tolex-text); border-bottom-color: var(--k); }
.themen { min-width: 0; }
.themen > summary { display: flex; max-width: 100%; }
.themen__aktuell { display: inline-flex; align-items: center; gap: .4em; min-width: 0; }
.themen__aktuell-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.themen__aktuell::before { content: "·"; color: var(--tolex-text-2); margin-right: .05em; }

.themen__liste {
  position: absolute; top: calc(100% + 3px); right: 0; z-index: 30;
  width: min(40rem, 100%); margin: 0; padding: .6rem; list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .15rem;
  background: var(--tolex-2); border: 1px solid #3a352b; border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 18px 40px -12px #000a;
}
.themen__liste a {
  display: flex; align-items: center; gap: .6em; padding: .6em .7em;
  color: var(--tolex-text); text-decoration: none; border-radius: 6px;
  font-size: var(--st--1); line-height: 1.25;
}
.themen__liste a:hover { background: #ffffff10; }
.themen__liste a[aria-current="page"] { background: #ffffff14; box-shadow: inset 3px 0 0 var(--k); }
.themen__liste .buchse {
  /* Buchse wie am Geraet: farbiger Ring um ein dunkles Loch */
  width: .95em; height: .95em; background: radial-gradient(circle, var(--tolex) 0 32%, var(--k) 36%);
}
.themen__name { flex: 1; min-width: 0; }
.themen__zahl { color: var(--tolex-text-2); font-family: var(--schrift-mono); font-size: .8em; }
.themen__alle { grid-column: 1 / -1; border-top: 1px solid #3a352b; margin-top: .35rem; padding-top: .35rem; }
.themen__alle a { color: var(--tolex-text-2); }

.schalter {
  background: var(--tolex-2); border: 1px solid #3a352b; color: var(--tolex-text);
  border-radius: 999px; height: 2.3rem; flex: none;
}
.schalter:hover { border-color: var(--tolex-text-2); }
.schalter {
  width: 2.3rem; cursor: pointer; color: var(--tolex-text-2);
  display: grid; place-items: center; font-size: 1rem; line-height: 1;
}
.schalter:hover { color: var(--tolex-text); }

@media (prefers-reduced-motion: no-preference) {
  .themen > summary::after { transition: transform .2s ease; }
}

/* Suche direkt als Eingabefeld im Kopf (Axel, 08.11.2026) */
.kopfsuche { position: relative; display: flex; align-items: center; flex: none; margin: 0; }
.kopfsuche svg { position: absolute; left: .75rem; color: var(--tolex-text-2); pointer-events: none; }
.kopfsuche__feld {
  height: 2.3rem; width: 11rem; padding: 0 .9rem 0 2.2rem; border-radius: 999px;
  background: var(--tolex-2); border: 1px solid #3a352b; color: var(--tolex-text);
  font: inherit; font-size: var(--st--1); transition: width .25s ease, border-color .2s;
}
.kopfsuche__feld::placeholder { color: var(--tolex-text-2); opacity: 1; }
.kopfsuche__feld:hover { border-color: var(--tolex-text-2); }
.kopfsuche__feld:focus { outline: none; border-color: var(--k-fahrzeuge); width: 15rem; }
.kopfsuche__feld::-webkit-search-cancel-button { filter: invert(1); }
.jahr { margin: 2rem 0 .3rem; font-size: var(--st-2); }
@media (max-width: 54em) {
  .kopf__innen { gap: .35rem .7rem; padding-bottom: 0; }
  .kopf__innen .kopfsuche { margin-left: auto; }
  .kopfsuche__feld, .kopfsuche__feld:focus { width: min(11rem, 42vw); }
  .kopf__innen .nav {
    order: 5; width: 100%; margin-left: 0; gap: 1.6rem;
    border-top: 1px solid #ffffff12;
  }
  .themen__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  /* Auf dem Telefon zeigt nur die farbige Buchse, in welchem Thema man ist -
     der Name steht ohnehin gross darunter. Vorleser hoeren ihn weiter. */
  .themen__aktuell::before { content: none; }
  .themen__aktuell-name {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}
@media (max-width: 22em) {
  /* Ganz schmale Telefone: Lupe ohne Wort, das Wort bleibt fuer Vorleser */
  .kopfsuche__feld, .kopfsuche__feld:focus { width: 8.5rem; }
}

/* ------------------------------------------------------- Seitenwechsel */
/* Weiche Uebergaenge zwischen den Seiten, ohne Skript (View Transitions).
   Browser, die das nicht kennen, wechseln wie bisher. */
@view-transition { navigation: auto; }
.kopf { view-transition-name: kopf; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ------------------------------------------------- Startseite: Buehne */
/* Axel, 07.11.2026: "supermodern und catchy" - die Sinuskurve bleibt.
   Ein Oszilloskop-Raster mit zwei laufenden Spuren hinter einer grossen
   Ueberschrift; darueber die Themen als Stecker, darunter Text, echte Zahlen
   und ein Band mit den neuesten Arbeiten, das endlos durchlaeuft.
   Kopf und Buehne gehen ineinander ueber, der bunte Keder sitzt darunter. */
.start .kopf { position: relative; }
.start .kopf::after { display: none; }

.buehne {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(60% 55% at 75% 32%, rgba(229, 169, 19, .11) 0%, transparent 62%),
    radial-gradient(55% 65% at 6% 95%, rgba(19, 146, 141, .09) 0%, transparent 60%),
    var(--tolex);
  color: var(--tolex-text);
  padding: clamp(1.2rem, 3vw, 2.4rem) 0 0;
}
.buehne::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: linear-gradient(90deg, var(--k-werkstatt), var(--k-fahrzeuge), var(--k-tiere),
              var(--k-automation), var(--k-konstruktion), var(--k-haus),
              var(--k-feuerwehr), var(--k-heimat));
}

/* Oszilloskop: feines Raster, zur Mitte hin sichtbar, zwei Spuren */
.oszi {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 56px 56px; background-position: center top;
  -webkit-mask-image: radial-gradient(110% 80% at 55% 35%, #000 30%, transparent 80%);
          mask-image: radial-gradient(110% 80% at 55% 35%, #000 30%, transparent 80%);
}
/* Die Spuren laufen hinter der Ueberschrift, ueber die ganze Fensterbreite */
.buehne__kern { position: relative; }
.spuren {
  position: absolute; z-index: -1; pointer-events: none;
  top: 50%; left: 50%; width: 100vw; height: clamp(110px, 20vw, 230px);
  transform: translate(-50%, -50%);
}
.oszi__spur { position: absolute; left: 0; top: 0; width: 200%; height: 100%; overflow: visible; }
.oszi__spur path { fill: none; vector-effect: non-scaling-stroke; }
/* Jede Spur steckt in einer Huelle, die langsam Hoehe und Wellenlaenge
   aendert (Axel: "deutlich langsamer", Frequenz oder Amplitude duerfen sich
   aendern). Die Huelle streckt nur auf 1 bis 1,6-fache Breite - schmaler
   wuerde rechts eine Luecke reissen. */
.spur { position: absolute; inset: 0; transform-origin: 0 50%; }
.spur, .oszi__spur { will-change: transform; }
.spur--1 path { stroke: var(--k-fahrzeuge); stroke-width: 2.4; stroke-linecap: round; }
/* Glanz ohne Filter: dieselbe Kurve breit und blass darunter - Filter auf
   bewegten Ebenen lassen die ganze Seite ruckeln */
.spur--1 .spur__glanz { stroke-width: 9; opacity: .22; }
.spur--2 { top: 8%; opacity: .45; }
.spur--2 path { stroke: var(--k-automation); stroke-width: 1.3; }
.js .spur--1 .oszi__spur { animation: spur 60s linear infinite; }
.js .spur--2 .oszi__spur { animation: spur 95s linear infinite reverse; }
/* "backwards": waehrend der Verzoegerung gilt schon der erste Schritt. Ohne das
   stand Spur 2 bis Sekunde 2,5 auf voller Hoehe und sprang dann sichtbar kleiner
   (Axel, 08.11.2026). */
.js .spur--1 { animation: einblenden 1.6s ease-out .2s both, atmen-1 26s ease-in-out 1.8s infinite alternate backwards; }
.js .spur--2 { animation: einblenden 2s ease-out .5s both, atmen-2 37s ease-in-out 2.5s infinite alternate backwards; }
@keyframes spur { to { transform: translateX(-50%); } }
@keyframes einblenden { from { opacity: 0; } }
@keyframes atmen-1 {
  0%   { transform: scale(1, 1); }
  35%  { transform: scale(1.35, .55); }
  70%  { transform: scale(1.1, .8); }
  100% { transform: scale(1.6, 1); }
}
@keyframes atmen-2 {
  0%   { transform: scale(1.5, .7); }
  50%  { transform: scale(1, 1.05); }
  100% { transform: scale(1.3, .5); }
}

/* Die Themen als Stecker in ihrer Kabelfarbe */
.stecker {
  list-style: none; margin: 0 0 clamp(1.3rem, 3vw, 2.2rem); padding: 0;
  display: flex; flex-wrap: wrap; gap: .45rem;
}
.stecker li { max-width: none; }
.stecker a {
  display: inline-flex; align-items: center; gap: .45em; white-space: nowrap;
  padding: .4em .9em .4em .6em; border-radius: 999px;
  border: 1px solid #3d382e; background: rgba(23, 21, 15, .6);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--tolex-text-2); text-decoration: none;
  font-family: var(--schrift-kopf); font-stretch: condensed; font-weight: 600;
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  transition: border-color .2s, color .2s, transform .2s, box-shadow .2s;
}
.stecker a:hover, .stecker a:focus-visible {
  color: var(--tolex-text); border-color: var(--k); transform: translateY(-1px);
  box-shadow: 0 0 0 1px var(--k), 0 0 20px -4px var(--k);
}
@media (max-width: 40em) {
  .stecker {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-inline: -1rem; padding: .2rem 1rem;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 1rem, #000 calc(100% - 2.5rem), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 1rem, #000 calc(100% - 2.5rem), transparent);
  }
  .stecker::-webkit-scrollbar { display: none; }
}

/* Die Ueberschrift: drei Zeilen, so gross wie die Breite es zulaesst.
   Bemessen fuer "REPARIEREN," (11 Zeichen, schmale Versalien rund 0,48
   Schriftgroessen je Zeichen, breitere Ersatzschriften rund 0,6). Woerter
   werden nie getrennt. */
.buehne__titel {
  margin: 0; font-size: clamp(2.7rem, 12.5vw, 8.2rem); line-height: .86;
  text-transform: uppercase; letter-spacing: -.005em; color: var(--tolex-text);
  overflow-wrap: normal; word-break: keep-all; hyphens: none; text-wrap: nowrap;
}
/* Hinter der Ueberschrift dunkelt ein weicher Schatten die Spuren ab, damit
   der Text ruhig lesbar bleibt (Axel, 08.11.2026) */
.buehne__titel { position: relative; }
.buehne__titel::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  /* Die Flaeche reicht weit nach links, damit der Schatten auch dort ganz
     auslaeuft, bevor sie endet - sonst entsteht eine harte Kante */
  inset: -25% -10% -25% -45%;
  background: radial-gradient(ellipse 52% 60% at 45% 50%,
              rgba(16, 14, 10, .94) 0%, rgba(16, 14, 10, .78) 45%, rgba(16, 14, 10, 0) 80%);
}
.zeile { display: block; overflow: hidden; padding: .02em 0 .05em; }
.zeile > span { display: inline-block; }
.zeile--glut > span {
  background: linear-gradient(90deg, var(--k-werkstatt), var(--k-fahrzeuge) 35%,
              var(--k-feuerwehr) 65%, var(--k-konstruktion), var(--k-werkstatt));
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Jede Zeile steigt aus ihrer Kante auf; die letzte glueht danach weiter */
.js .zeile > span { animation: zeile-auf .95s cubic-bezier(.2, .8, .2, 1) both; }
.js .zeile:nth-child(2) > span { animation-delay: .12s; }
.js .zeile--glut > span {
  animation: zeile-auf .95s cubic-bezier(.2, .8, .2, 1) .24s both,
             glut 9s ease-in-out 1.4s infinite alternate;
}
@keyframes zeile-auf { from { transform: translateY(108%); } to { transform: none; } }
@keyframes glut { to { background-position: 100% 0; } }

.buehne__unten {
  display: grid; gap: 1.6rem 3rem; align-items: end;
  margin-top: clamp(1.4rem, 3vw, 2.4rem);
}
@media (min-width: 62em) { .buehne__unten { grid-template-columns: minmax(0, 1fr) auto; } }
.buehne__lead {
  font-size: var(--st-1); color: var(--tolex-text-2); max-width: 44ch;
  line-height: 1.5; margin: 0; text-align: left; -webkit-hyphens: manual; hyphens: manual;
}
.buehne__wege { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.5rem 0 0; max-width: none; }
.weg {
  display: inline-flex; align-items: center; gap: .5em; min-height: 46px;
  padding: .7em 1.25em; border-radius: 999px; text-decoration: none;
  font-family: var(--schrift-kopf); font-stretch: condensed; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; font-size: .9rem;
  color: var(--tolex-text); border: 1.5px solid #4a443a;
  transition: border-color .2s, background-color .2s, transform .2s, box-shadow .2s;
}
.weg:hover { border-color: var(--tolex-text); transform: translateY(-1px); text-decoration: none; }
.weg--voll { background: var(--k-fahrzeuge); color: #17150F; border-color: var(--k-fahrzeuge); }
.weg--voll:hover { background: #f2bd34; border-color: #f2bd34; box-shadow: 0 0 24px -6px var(--k-fahrzeuge); }

/* Echte Zahlen aus dem Bestand, wie Anzeigen auf einer Frontplatte */
.zahlen { display: grid; grid-template-columns: repeat(4, minmax(5.4rem, auto)); gap: .6rem; margin: 0; }
.zahlen > div {
  padding: .7rem 1rem .65rem; border-radius: var(--radius);
  background: rgba(23, 21, 15, .62); border: 1px solid #332e25; border-top: 3px solid var(--k);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.zahlen dt {
  font-family: var(--schrift-kopf); font-stretch: condensed; font-weight: 600;
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tolex-text-2);
}
.zahlen dd {
  margin: .15rem 0 0; color: var(--tolex-text); line-height: 1;
  font-family: var(--schrift-kopf); font-stretch: condensed; font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.6rem); font-variant-numeric: tabular-nums;
}
/* Jede Zahl fuehrt zu ihrer Liste; der Link liegt auf der Zahl und wird
   ueber das ganze Kaestchen gezogen */
.zahlen > div { position: relative; transition: background-color .2s, border-color .2s; }
.zahlen dd a { color: inherit; text-decoration: none; }
.zahlen dd a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.zahlen > div:hover, .zahlen > div:focus-within { background: rgba(40, 36, 27, .78); border-color: #4a4335; }
.zahlen dd a:focus-visible { outline: none; }
.zahlen > div:focus-within { outline: 2px solid var(--k); outline-offset: 2px; }
@media (max-width: 40em) {
  .zahlen { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; }
  .zahlen > div { padding: .5rem .55rem .45rem; }
  .zahlen dt { font-size: .6rem; letter-spacing: .08em; }
  .zahlen dd { font-size: 1.45rem; }
}

/* Ueber dem Band: kleine Ueberschrift, fuehrt ins Logbuch */
.band__kopf {
  margin-top: clamp(2.2rem, 5vw, 3.6rem); margin-bottom: .7rem;
  font-family: var(--schrift-kopf); font-stretch: condensed; font-weight: 600;
  font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; text-align: left;
}
.band__kopf a { display: inline-flex; align-items: center; gap: .45em; color: var(--tolex-text-2);
                text-decoration: none; --k: var(--k-tiere); }
.band__kopf a:hover, .band__kopf a:focus-visible { color: var(--tolex-text); }
.band__kopf + .band { margin-top: 0; }

/* Das Band: die neuesten Notizen laufen langsam durch, halten unter der
   Maus und beim Durchtabben an. Die Liste steht zweimal hintereinander. */
.band {
  position: relative; overflow: hidden;
  margin-top: clamp(2.2rem, 5vw, 3.6rem); padding-bottom: clamp(1.6rem, 4vw, 2.6rem);
}
/* Weiche Raender als Verlauf darueber statt Maske - eine Maske zwingt den
   Browser, das laufende Band in jedem Bild neu zu zeichnen (es zitterte) */
.band::before, .band::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 6%; z-index: 1; pointer-events: none;
}
.band::before { left: 0; background: linear-gradient(90deg, var(--tolex), transparent); }
.band::after { right: 0; background: linear-gradient(270deg, var(--tolex), transparent); }
/* Beide Listen sitzen auf einer Bahn, die als Ganzes um die Haelfte wandert */
.band__bahn { display: flex; width: max-content; will-change: transform; }
.band__spur {
  list-style: none; margin: 0; padding: 0 .8rem 0 0;
  display: flex; gap: .8rem; flex: none;
}
.js .band__bahn { animation: band 110s linear infinite; }
.band:hover .band__bahn, .band:focus-within .band__bahn { animation-play-state: paused; }
@keyframes band { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.band .kachel { width: clamp(11rem, 21vw, 17rem); aspect-ratio: 4 / 3; flex: none; max-width: none; }
/* Mit Skript laeuft das Band per Skript und laesst sich mit Maus oder Finger
   ziehen (Axel, 08.11.2026); senkrechtes Wischen scrollt weiter die Seite */
.band--zieh { cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.band--zieh .band__bahn { animation: none !important; }
.band--zieht { cursor: grabbing; }
.band--zieh img { -webkit-user-drag: none; pointer-events: none; }

.kachel { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--tolex-2);
          box-shadow: 0 0 0 1px #2c2820, 0 18px 40px -22px #000;
          container-type: inline-size; }
/* In kleinen Kacheln: Titel kleiner, Rubrik weg - die Kabelkante zeigt sie */
@container (max-width: 150px) {
  .kachel__text { padding: 1.2rem .45rem .4rem; }
  .kachel__titel {
    font-size: .74rem; line-height: 1.12; white-space: normal; hyphens: auto;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .kachel__rubrik { display: none; }
}
.kachel__rubrik { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kachel a { display: block; height: 100%; color: inherit; text-decoration: none; }
.kachel img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0;
              transition: transform .6s cubic-bezier(.2, .8, .2, 1), filter .4s; }
.kachel::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--k);
}
.kachel a:hover img, .kachel a:focus-visible img { transform: scale(1.06); }
/* Titel auf jeder Kachel, auf dunklem Verlauf, damit er auf jedem Foto lesbar bleibt */
.kachel__text {
  position: absolute; left: 0; right: 0; bottom: 4px; padding: 1.6rem .75rem .6rem;
  display: flex; flex-direction: column; gap: .1rem;
  background: linear-gradient(to top, rgba(14, 13, 9, .92), rgba(14, 13, 9, .55) 55%, transparent);
  color: var(--tolex-text); pointer-events: none;
}
.kachel__titel {
  font-family: var(--schrift-kopf); font-stretch: condensed; font-weight: 700;
  font-size: 1.08rem; line-height: 1.1; letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kachel__rubrik {
  display: inline-flex; align-items: center; gap: .35em;
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tolex-text-2);
  font-family: var(--schrift-kopf); font-stretch: condensed; font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .js .spur, .js .spur .oszi__spur, .js .band__bahn, .js .zeile--glut > span { animation: none; }
  .js .zeile > span { animation: none; }
  .band { overflow-x: auto; }
  .band__spur[aria-hidden="true"] { display: none; }
}

/* Abschnitte der Startseite */
.abschnitt { margin: clamp(1.8rem, 4vw, 2.8rem) 0 0; }
.abschnitt__titel { text-transform: uppercase; letter-spacing: .02em; margin: 0 0 .25em; }
.abschnitt__unter { color: var(--tinte-3); margin: 0 0 1.2rem; }

/* ---------------------------------------------------------- Aufdecken */
/* Elemente gleiten beim Scrollen herein. Nur wenn Skript laeuft (.js) -
   ohne Skript ist alles sofort sichtbar. Wer reduzierte Bewegung
   eingestellt hat, sieht alles sofort und ohne Bewegung. */
.js .aufdecken {
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1);
}
.js .aufdecken.sichtbar { opacity: 1; transform: none; }
/* Gestaffelt innerhalb von Rastern und Listen */
.js :is(.karten, .logbuch) > .aufdecken:nth-child(2) { transition-delay: .07s; }
.js :is(.karten, .logbuch) > .aufdecken:nth-child(3) { transition-delay: .14s; }
.js :is(.karten, .logbuch) > .aufdecken:nth-child(4) { transition-delay: .21s; }
.js :is(.karten, .logbuch) > .aufdecken:nth-child(5) { transition-delay: .28s; }
.js :is(.karten, .logbuch) > .aufdecken:nth-child(6) { transition-delay: .35s; }
@media (prefers-reduced-motion: reduce) {
  .js .aufdecken { opacity: 1; transform: none; transition: none; }
}

/* Die Regler drehen sich hoch, sobald sie ins Bild kommen - wie beim
   Einschalten eines Verstaerkers. */
.js .regler-zu .knopf::after { transform: rotate(-135deg); }
.js .regler-zu .knopf { box-shadow: 0 0 0 4px color-mix(in srgb, var(--k) 35%, transparent), 0 0 0 6px var(--karte), 0 0 0 7px var(--linie), 0 6px 12px -4px #0007; }
.regler li:nth-child(2) .knopf::after { transition-delay: .06s; }
.regler li:nth-child(3) .knopf::after { transition-delay: .12s; }
.regler li:nth-child(4) .knopf::after { transition-delay: .18s; }
.regler li:nth-child(5) .knopf::after { transition-delay: .24s; }
.regler li:nth-child(6) .knopf::after { transition-delay: .30s; }
.regler li:nth-child(7) .knopf::after { transition-delay: .36s; }
.regler li:nth-child(8) .knopf::after { transition-delay: .42s; }
.regler li:nth-child(9) .knopf::after { transition-delay: .48s; }
.knopf { transition: transform .2s, box-shadow .6s; }


/* Reglerreihe: ein Drehknopf je Rubrik. Die Zeigerstellung zeigt den Anteil
   der Rubrik an allen Beitraegen - der groesste steht auf Anschlag. */
.regler {
  list-style: none; margin: 1.6rem 0 2.6rem; padding: 1.4rem 1rem 1.1rem;
  /* Auf dem Telefon zwei nebeneinander, auf dem Tablet vier, am Rechner
     alle in einer Reihe. Die Spaltenzahl richtet sich nach den Reglern, die
     wirklich da sind - eine feste Zahl liess sonst eine leere Spalte stehen
     und die Reihe sass nicht mehr mittig (09.11.2026). */
  display: grid; gap: 1.2rem .4rem; grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--karte); border: 1px solid var(--linie-weich);
  border-radius: var(--radius); box-shadow: var(--schatten);
}
@media (min-width: 34em) { .regler { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 60em) {
  .regler { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}
@media (max-width: 24em) {
  /* Ganz schmale Telefone: KONSTRUKTION passt sonst nicht in die Spalte */
  .regler { padding-inline: .4rem; }
  .regler .beschriftung { letter-spacing: .04em; hyphens: auto; }
}
.regler a { display: flex; flex-direction: column; align-items: center; gap: .55rem; text-decoration: none; color: var(--tinte); text-align: center; }
/* Zeigerstellung 0 bis 10 als Klassen statt als style-Attribut: die
   Sicherheitsrichtlinie der Seite laesst keine eingebetteten Stile zu. */
.z0 { --winkel: -135deg; }   .z1 { --winkel: -121.5deg; } .z2 { --winkel: -108deg; }
.z3 { --winkel: -94.5deg; }  .z4 { --winkel: -81deg; }    .z5 { --winkel: -67.5deg; }
.z6 { --winkel: -54deg; }    .z7 { --winkel: -40.5deg; }  .z8 { --winkel: -27deg; }
.z9 { --winkel: -13.5deg; }  .z10 { --winkel: 0deg; }     .z11 { --winkel: 13.5deg; }
.z12 { --winkel: 27deg; }    .z13 { --winkel: 40.5deg; }  .z14 { --winkel: 54deg; }
.z15 { --winkel: 67.5deg; }  .z16 { --winkel: 81deg; }    .z17 { --winkel: 94.5deg; }
.z18 { --winkel: 108deg; }   .z19 { --winkel: 121.5deg; } .z20 { --winkel: 135deg; }
.knopf {
  position: relative; width: 58px; height: 58px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #4a453b, #1c1a15 70%);
  box-shadow: 0 0 0 4px var(--k), 0 0 0 6px var(--karte), 0 0 0 7px var(--linie), 0 6px 12px -4px #0007;
  transition: transform .2s;
}
.knopf::after {
  content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 18px; margin-left: -1.5px;
  border-radius: 2px; background: #f4ecdc;
  transform-origin: 50% 22px; transform: rotate(var(--winkel));
  transition: transform .9s cubic-bezier(.2, .8, .2, 1);
}
.regler a:hover .knopf { transform: scale(1.05); }
.regler .beschriftung { color: var(--tinte-2); line-height: 1.25; }
.regler .zahl { font-family: var(--schrift-mono); font-size: .75rem; color: var(--tinte-3); }
.regler .leer .knopf { opacity: .55; }

/* --------------------------------------------------------------- Karten */
.karten { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); margin: 0 0 2.5rem; padding: 0; list-style: none; }
.karte {
  background: var(--karte); border-radius: var(--radius); box-shadow: var(--schatten);
  overflow: hidden; display: flex; flex-direction: column;
  border-top: 5px solid var(--k);
}
.karte a { text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%; }
.karte a:hover h3 { text-decoration: underline; text-decoration-color: var(--k); text-decoration-thickness: 2px; }
.karte__bild { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; background: var(--flaeche); border-radius: 0; }
.karte__platzhalter { aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--flaeche); color: var(--k); }
.karte__platzhalter svg { width: 34%; height: auto; opacity: .55; }
.karte__text { padding: .9rem 1.05rem 1.1rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.karte h3, .karte__titel { font-size: var(--st-1); margin: 0; }
.karte p { font-size: var(--st--1); color: var(--tinte-2); margin: 0; max-width: none; }
.meta { font-size: var(--st--1); color: var(--tinte-3); margin-top: auto; display: flex; align-items: center; gap: .45em; flex-wrap: wrap; }

/* ------------------------------------------------------------- Logbuch */
.logbuch { list-style: none; padding: 0; margin: 0 0 2.5rem; }
/* Ab einem breiten Fenster zweispaltig: der Platz rechts bleibt sonst leer
   und die Liste wird unnoetig lang (Axel, 08.11.2026). */
@media (min-width: 64em) {
  .logbuch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
}
.logbuch li {
  border-bottom: 1px solid var(--linie-weich); padding: 1rem 0; position: relative;
  display: grid; gap: 0 1.1rem; grid-template-columns: 5rem 1fr; align-items: start;
}
@media (min-width: 46em) { .logbuch li { grid-template-columns: 7rem 1fr; } }
.logbuch__bild {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm);
  display: block; background: var(--flaeche);
}
.logbuch__platzhalter { display: grid; place-items: center; color: var(--k); }
.logbuch__platzhalter svg { width: 38%; height: 38%; }
.logbuch .meta { margin: 0 0 .2em; color: var(--tinte-3); font-size: var(--st--1); text-align: left; }
.logbuch time { white-space: nowrap; }
.logbuch h3 { margin: 0 0 .15em; font-size: var(--st-1); }
.logbuch h3 a { text-decoration: none; }
/* Die ganze Zeile ist der Link zum Eintrag */
.logbuch h3 a::after { content: ""; position: absolute; inset: 0; }
.logbuch li:hover h3 a { text-decoration: underline; text-decoration-color: var(--k); }
.logbuch li:has(a:focus-visible) { outline: 3px solid var(--k); outline-offset: 3px; border-radius: 3px; }
.logbuch h3 a:focus-visible { outline: none; }
.logbuch p { margin: 0; color: var(--tinte-2); font-size: var(--st--1); text-align: left; }

/* ------------------------------------------------------------- Seitenkopf */
.seitenkopf { padding: clamp(1.6rem, 4vw, 2.6rem) 0 1rem; margin-bottom: 1.4rem; position: relative; }
.seitenkopf::after { content: ""; display: block; width: 4.5rem; height: 5px; border-radius: 3px; background: var(--k); margin-top: .9rem; }
.seitenkopf h1 { font-size: var(--st-3); margin-bottom: .2em; }
.seitenkopf p { color: var(--tinte-2); max-width: 60ch; margin: 0; }

/* -------------------------------------------------------------- Beitrag */
/* Der Text eines Beitrags laeuft ueber die volle Seitenbreite, wie Kopf und
   Bilder - kein Bild ragt ueber den Text hinaus (Axel, 07.11.2026). */
.beitrag { padding-bottom: 3rem; }
.beitrag__meta { color: var(--tinte-3); font-size: var(--st--1); margin: -1.2rem 0 2rem; display: flex; align-items: center; gap: .5em; flex-wrap: wrap; }
.beitrag :is(p, li, figcaption), .beitrag .hinweis { max-width: none; }
.beitrag figure img { box-shadow: var(--schatten); }
/* Titelbild: immer volle Breite; sehr hohe Bilder werden oben und unten
   beschnitten, damit der Text nicht erst nach mehreren Bildschirmen beginnt. */
.beitrag .titelbild { margin-top: 0; }
.beitrag .titelbild img { width: 100%; max-height: 75vh; object-fit: cover; object-position: center 30%; }
/* Einzelbilder: immer rechts im Text, so klein wie ein Bild der Bildreihe,
   auch auf dem Telefon; ein Klick zeigt sie gross (Axel, 07.11.2026). */
.beitrag .rechts {
  float: right; clear: right; margin: .35em 0 1em 1.2rem;
  max-width: min(clamp(9rem, 22vw, 18rem), 45%);
}
/* Schmaler als ein uebliches Telefon: neben dem Bild bliebe kaum Platz fuer Text */
@media (max-width: 22em) { .beitrag .rechts { float: none; max-width: 70%; margin: 1em 0; } }
.beitrag .rechts a { display: block; border-radius: var(--radius-sm); overflow: hidden; }
.beitrag .rechts img { display: block; }
.beitrag .rechts figcaption { line-height: 1.35; }
/* Ueberschriften ruecken neben ein stehendes Bild, statt darunter zu warten;
   nur Bildreihen, Tabellen und Trenner brauchen die volle Breite (Axel, 08.11.2026). */
.beitrag :is(.galerie, .tabelle, .titelbild, .formel, hr) { clear: both; }

/* Formeln als Text statt als Bild: so lassen sie sich vergroessern, vorlesen,
   durchsuchen und kopieren (Axel, 09.11.2026). */
.formel { margin: 1.5em 0; text-align: center; }
.formel p { margin: 0; display: inline-flex; align-items: center; gap: .5em;
            font-size: var(--st-1); }
.bruch { display: inline-flex; flex-direction: column; text-align: center; }
.bruch > span:first-child { padding: 0 .45em .14em; }
.bruch > span:last-child { padding: .14em .45em 0; border-top: 1.5px solid currentColor; }
.beitrag::after { content: ""; display: block; clear: both; }

/* Fremde 3D-Ansichten (Sketchfab) im Text: fester Rahmen ueber die volle
   Breite. Geladen wird erst beim Scrollen, vorher geht nichts an den fremden
   Server (Axel, 08.11.2026). */
.beitrag .einbettung { clear: both; margin: 1.8em 0; }
.einbettung iframe {
  display: block; width: 100%; aspect-ratio: 16 / 10; border: 0;
  border-radius: var(--radius-sm); background: #1a1814; box-shadow: var(--schatten);
}

/* Kurze Videos laufen wie ein GIF. Ohne eigene Regel nimmt der Browser die
   Aufnahmegroesse, und das Bild ragt rechts aus dem Text heraus. Breite wie
   ein Bild, hochkant Aufgenommenes zusaetzlich in der Hoehe begrenzt
   (Axel, 08.11.2026). */
.beitrag figure.video { clear: both; }
/* Die Breite steckt im Rahmen, nicht im Film: nur so ist der Rahmen genauso
   breit wie der Film und der Schalter sitzt in dessen Ecke. */
.beitrag figure.video .video__rahmen {
  position: relative; display: inline-block; max-width: min(32rem, 100%);
}
.beitrag figure.video .video__rahmen--hoch { max-width: min(20rem, 100%); }
.beitrag figure.video video {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-sm); box-shadow: var(--schatten);
}

/* Anhalten eines Films, der von selbst laeuft. Klein in der Ecke und erst zu
   sehen, wenn die Maus darueber liegt oder die Tastatur hinkommt - der Film
   soll weiter wie ein Gif wirken. Ohne Skript gibt es den Schalter nicht, er
   waere dann ohne Wirkung (.js setzt seite.js). */
.video__schalter { display: none; }
.js .video__schalter {
  display: grid; place-items: center; position: absolute;
  right: .55rem; bottom: .55rem; width: 2.2rem; height: 2.2rem;
  padding: 0; border: 1px solid rgba(255, 255, 255, .5); border-radius: 50%;
  background: rgba(23, 21, 15, .62); color: #fff; cursor: pointer;
  opacity: 0; transition: opacity .18s ease;
}
.video__rahmen:hover .video__schalter,
.video__rahmen:focus-within .video__schalter,
.video__schalter:focus { opacity: 1; }
.video__zeichen { width: .72rem; height: .82rem; background: currentColor;
  clip-path: polygon(0 0, 38% 0, 38% 100%, 0 100%, 0 0, 62% 0, 100% 0, 100% 100%, 62% 100%, 62% 0); }
/* angehalten: Zeichen wird zum Dreieck (abspielen) */
.video__schalter[aria-pressed="true"] .video__zeichen {
  clip-path: polygon(8% 0, 100% 50%, 8% 100%); }
@media (prefers-reduced-motion: reduce) { .js .video__schalter { opacity: 1; } }
@media (hover: none) { .js .video__schalter { opacity: 1; } }

/* Bildreihe: mehrere Bilder hintereinander im Raster; ein Klick zeigt sie
   gross (Lichtkasten in seite.js). */
.galerie {
  display: grid; gap: .9rem; margin: 1.8em 0; align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, clamp(9rem, 22vw, 14rem)), 1fr));
}
.galerie figure { margin: 0; }
.galerie a { display: block; border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--schatten); }
.beitrag .galerie img {
  /* Kein fester Zuschnitt: jedes Bild behaelt seine Form, die Unterschrift
     beginnt direkt unter ihrem eigenen Bild statt auf gemeinsamer Linie. */
  width: 100%; height: auto; box-shadow: none; border-radius: 0;
  transition: transform .3s;
}
.galerie a:hover img { transform: scale(1.04); }
.galerie figcaption {
  margin-top: .4em; line-height: 1.35;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
@media (prefers-reduced-motion: reduce) { .galerie img { transition: none; } }

.lichtkasten {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: rgba(14, 12, 9, .95); color: #f1ebe0;
}
.lichtkasten::backdrop { background: rgba(14, 12, 9, .95); }
.lichtkasten[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: center; }
.lichtkasten__bild {
  max-width: calc(100vw - 1.5rem); max-height: calc(100dvh - 6.5rem);
  object-fit: contain; border-radius: var(--radius-sm); margin-top: 3.5rem;
  /* Zoomen uebernimmt das Skript, damit Wischen und Vergroessern sich nicht
     in die Quere kommen (Axel, 08.11.2026: "mit Doppeltipp zoomen"). */
  touch-action: none; transform-origin: center center; will-change: transform;
}
.lichtkasten__bild.ruhig { transition: transform .25s ease-out; }
/* Vergroessert: die Pfeile und die Unterschrift treten zurueck, damit das Bild
   die Flaeche hat; geschlossen wird weiter ueber das Kreuz. */
.lichtkasten--zoom .lichtkasten__zurueck,
.lichtkasten--zoom .lichtkasten__weiter { opacity: .25; }
.lichtkasten--zoom .lichtkasten__text { opacity: .45; }
.lichtkasten__text { font-size: var(--st--1); margin: 0; padding: .7rem 1rem 1.1rem; text-align: center; max-width: 70ch; }
.lichtkasten button {
  position: absolute; width: 3rem; height: 3rem; border-radius: 50%;
  border: 1.5px solid #ffffff55; background: #00000066; color: #fff;
  font: 600 1.6rem/1 var(--schrift-kopf); cursor: pointer;
  display: grid; place-items: center;
}
.lichtkasten button:hover { background: #000000aa; border-color: #fff; }
.lichtkasten button[hidden] { display: none; }
.lichtkasten__zu { top: .6rem; right: .6rem; }
.lichtkasten__zurueck { left: .6rem; top: 50%; transform: translateY(-50%); }
.lichtkasten__weiter { right: .6rem; top: 50%; transform: translateY(-50%); }

.hinweis {
  background: var(--flaeche); border-left: 4px solid var(--k);
  border-radius: var(--radius-sm); padding: .85em 1.1em;
  font-size: var(--st--1); color: var(--tinte-2); margin: 0 0 2rem; max-width: var(--mass);
}
.hinweis p { margin: 0; max-width: none; }

/* --------------------------------------------------------------- Suche */
.suchfeld {
  width: min(100%, 32rem); font: inherit; padding: .65em .9em;
  border: 2px solid var(--linie); border-radius: var(--radius-sm);
  background: var(--karte); color: var(--tinte); margin: .3rem 0 1.5rem;
}
.suchfeld:focus { border-color: var(--k); outline: none; }
#treffer { list-style: none; padding: 0; margin: 0; }
#treffer li { border-bottom: 1px solid var(--linie-weich); padding: .9rem 0; }
#treffer h3 { margin: 0 0 .15em; font-size: var(--st-1); }
#treffer p { margin: 0; font-size: var(--st--1); color: var(--tinte-2); }

/* ----------------------------------------------------------------- Fuss */
.fuss { background: var(--tolex); color: var(--tolex-text-2); margin-top: 3rem; padding: 2.4rem 0 3rem; font-size: var(--st--1); }
.fuss__innen { display: grid; gap: 1.6rem 2.4rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.fuss h2 { color: var(--tolex-text); font-size: .8rem; margin: 0 0 .7em; letter-spacing: .14em; text-transform: uppercase; }
.fuss ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .35em; }
.fuss a { color: var(--tolex-text); text-decoration-color: #5a5346; }
.fuss a:hover { text-decoration-color: var(--k-fahrzeuge); }
.fuss p { margin: 0; }

/* --------------------------------------------------------------- Druck */
@media print {
  .js .aufdecken { opacity: 1 !important; transform: none !important; }
  .kopf, .fuss, .schalter, .oszi, .band, .stecker, .zahlen, .regler, .buehne__wege, .nav { display: none !important; }
  .buehne { background: none; color: #000; padding: 0; }
  .buehne h1, .buehne__lead { color: #000; }
  .buehne h1 span { color: #000; background: none; }
  a { text-decoration: none; }
  .beitrag a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
}