/* Mink Bautransporte GmbH - Demo von NK IT Service
   Welt: Bautafel und Baken. Elfenbein (Fahrzeuglack), Bordeaux (Leitfarbe), Schwarz.
   Schriften: Barlow Condensed (Schilder, Titel), Barlow (Text). Selbst gehostet. */

/* ---------- Schriften ---------- */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/barlow-400-latin.woff2?v=20261009") 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: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/barlow-400-latin-ext.woff2?v=20261009") 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: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/barlow-500-latin.woff2?v=20261009") 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: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/barlow-500-latin-ext.woff2?v=20261009") 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: "Barlow Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/BarlowCondensed-500-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: "Barlow Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/BarlowCondensed-500-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; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/BarlowCondensed-600-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: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/BarlowCondensed-600-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; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/BarlowCondensed-700-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: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/BarlowCondensed-700-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; }

/* ---------- Tokens ---------- */
:root {
  --elfenbein: #f1eadb;        /* Fahrzeuglack, Tafelgrund */
  --elfenbein-tief: #e4dac4;   /* Tafelkante, Trennlinien auf Elfenbein */
  --papier: #ffffff;           /* Leseflaechen */
  --linie: #ddd5c4;            /* Linien auf Weiss */
  --bordeaux: #6e1c2a;         /* Leitfarbe: Aktion, Betonung */
  --bordeaux-tief: #4f1119;    /* Hover, gedrueckt */
  --schwarz: #161311;          /* Fuss, Entsorgung, Schrift der Wortmarke */
  --schwarz-hell: #24201c;     /* Tafel auf Schwarz */
  --tinte: #221c19;            /* Fliesstext */
  --tinte-2: #5a5148;          /* Zweittext auf Weiss (7,6:1) */
  --tinte-2-elf: #5c524a;      /* Zweittext auf Elfenbein (6,1:1) */
  --auf-schwarz: #f1eadb;      /* Text auf Schwarz */
  --auf-schwarz-2: #c9bfae;    /* Zweittext auf Schwarz (10:1) */
  --gold: #c9a24a;             /* nur Sterne im Emblem */
  --fokus: #b8324a;            /* Fokusring: helles Bordeaux */

  --schild: "Barlow Condensed", "Arial Narrow", sans-serif;
  --text: "Barlow", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1240px;
  --rand: clamp(1rem, 4vw, 2.5rem);
  --ecke: 2px;
  --kopf-h: 76px;
  --baken-h: 14px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);   /* quint */
  --dauer: 220ms;

  --z-kopf: 30;
  --z-nav: 40;
  --z-lightbox: 60;
  --z-banner: 50;
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-h) + 1rem); }
body {
  margin: 0;
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--tinte);
  background: var(--papier);
}
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0; font-family: var(--schild); line-height: 1.02; text-wrap: balance; }
h1 { font-weight: 700; font-size: clamp(2.8rem, 6vw, 5.25rem); letter-spacing: -0.01em; text-transform: uppercase; }
h2 { font-weight: 700; font-size: clamp(2rem, 3.6vw, 3.25rem); letter-spacing: -0.005em; text-transform: uppercase; }
h3 { font-weight: 600; font-size: clamp(1.45rem, 2vw, 1.85rem); }
/* Lange Komposita (Entsorgungstransporte) duerfen bei schmalen Breiten und erhoehten Textabstaenden nicht ueberlaufen.
   "anywhere" wirkt auch auf die Mindestbreite in Grid-Spalten (1fr), "break-word" allein reicht dort nicht; aeltere Browser nutzen break-word. */
h1, h2, h3 { overflow-wrap: break-word; overflow-wrap: anywhere; hyphens: auto; }
p { margin: 0 0 1em; max-width: 68ch; }
p:last-child { margin-bottom: 0; }
a { color: var(--bordeaux); text-underline-offset: 0.16em; text-decoration-thickness: 1.5px; }
a:not(.schild):hover { color: var(--bordeaux-tief); }
ul { margin: 0; padding: 0; list-style: none; }
strong { font-weight: 500; }
::selection { background: var(--bordeaux); color: #fff; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }
button { font: inherit; color: inherit; }
.tabellen-ziffern { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }

.wrap { width: min(100% - 2 * var(--rand), var(--wrap)); margin-inline: auto; }
.abschnitt { padding-block: clamp(3.5rem, 8vw, 7rem); }
.abschnitt-elfenbein { background: var(--elfenbein); }
.abschnitt-schwarz { background: var(--schwarz); color: var(--auf-schwarz); }
.abschnitt-schwarz p { color: var(--auf-schwarz); }
.abschnitt-schwarz a { color: var(--auf-schwarz); }
.abschnitt-schwarz a:hover { color: #fff; }
.zweittext { color: var(--tinte-2); }
.abschnitt-elfenbein .zweittext { color: var(--tinte-2-elf); }
.abschnitt-schwarz .zweittext { color: var(--auf-schwarz-2); }

.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--bordeaux); color: #fff; padding: 0.6rem 1rem; border-radius: var(--ecke); text-decoration: none; font-family: var(--schild); font-weight: 600; }
.skip-link:focus { top: 1rem; }
/* Zweiter Schalter "Bewegung anhalten" am Seitenanfang, erscheint bei Fokus wie der Skip-Link */
.bewegung-sprung { display: inline-flex; align-items: center; gap: 0.45rem; border: 0; font-size: 1rem; cursor: pointer; }
.bewegung-sprung svg { width: 1em; height: 1em; flex: none; }
/* Nur fuer Screenreader (Live-Ansage im Formular) */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Scrollbalken aus der Palette */
html { scrollbar-color: var(--bordeaux) var(--elfenbein); }
.buehne, .filmstreifen { scrollbar-width: thin; scrollbar-color: var(--bordeaux) transparent; }

/* ---------- Baken-Band (Leitbaken, 45 Grad, an drei Kanten) ---------- */
.baken {
  position: relative; overflow: hidden;
  height: var(--baken-h);
  background: repeating-linear-gradient(-45deg, var(--bordeaux) 0 22px, var(--elfenbein) 22px 44px);
  background-size: 62.2px 100%;
}
/* Dauerlauf von links nach rechts. Nur mit Klasse .bewegung (setzt main.js zusammen mit dem Schalter
   "Bewegung anhalten" im Fuss, WCAG 2.2.2). Die Streifen liegen auf einer um eine Periode (62.2px)
   breiteren Ebene, die per transform wandert: nahtlos, ohne Neuzeichnen. */
.bewegung .baken::before { content: ""; position: absolute; top: 0; bottom: 0; left: -62.2px; right: 0; background: inherit; animation: baken-lauf 2.4s linear infinite; }
.bewegung.bewegung-aus .baken::before { animation-play-state: paused; }
@keyframes baken-lauf { to { transform: translateX(62.2px); } }

/* ---------- Schilder (Buttons und Links) ---------- */
.schild {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 3.1rem; padding: 0.65rem 1.35rem;
  font-family: var(--schild); font-weight: 600; font-size: 1.15rem; letter-spacing: 0.02em; text-transform: uppercase;
  text-decoration: none; border-radius: var(--ecke); border: 2px solid transparent; cursor: pointer;
  transform-origin: 50% 100%;
  transition: transform var(--dauer) var(--ease-out), background-color var(--dauer) var(--ease-out), color var(--dauer) var(--ease-out), border-color var(--dauer) var(--ease-out);
  font-variant-numeric: tabular-nums;
}
.schild svg { width: 1.15em; height: 1.15em; flex: none; }
.schild:hover { transform: perspective(600px) rotateX(-4deg) translateY(-1px); }
.schild:active { transform: perspective(600px) rotateX(2deg); }
.schild-bordeaux { background: var(--bordeaux); color: #fff; border-color: var(--bordeaux); }
.schild-bordeaux:hover { background: var(--bordeaux-tief); border-color: var(--bordeaux-tief); color: #fff; }
.schild-schwarz { background: var(--schwarz); color: var(--elfenbein); border-color: var(--schwarz); }
.schild-schwarz:hover { background: var(--schwarz-hell); color: #fff; }
.schild-rahmen { background: transparent; color: var(--schwarz); border-color: var(--schwarz); }
.schild-rahmen:hover { background: var(--schwarz); color: var(--elfenbein); }
.abschnitt-schwarz .schild-rahmen { color: var(--elfenbein); border-color: var(--elfenbein); }
.abschnitt-schwarz .schild-rahmen:hover { background: var(--elfenbein); color: var(--schwarz); }

/* Textlink mit Pfeil (Wegweiser) */
.wegweiser { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--schild); font-weight: 600; font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.02em; text-decoration: none; color: var(--bordeaux); }
.wegweiser svg { width: 1.1em; height: 1.1em; transition: transform var(--dauer) var(--ease-out); }
.wegweiser:hover svg { transform: translateX(4px); }
.abschnitt-schwarz .wegweiser { color: var(--elfenbein); }

/* ---------- Tafeln (Bautafel-Grammatik) ---------- */
.tafel { background: var(--elfenbein); border-top: 4px solid var(--bordeaux); }
.tafel-papier { background: var(--papier); }
.tafel-schwarz { background: var(--schwarz-hell); color: var(--auf-schwarz); border-top-color: var(--elfenbein); }
.tafel-zeilen { margin: 0; }
.tafel-zeilen > div { display: grid; grid-template-columns: minmax(7.5rem, 11rem) 1fr; gap: 0.5rem 1.25rem; padding: 0.75rem 0; border-top: 1px solid var(--elfenbein-tief); align-items: baseline; }
.tafel-zeilen > div:first-child { border-top: 0; }
.tafel-zeilen dt { font-family: var(--schild); font-weight: 600; font-size: 0.98rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tinte-2-elf); margin: 0; }
.tafel-zeilen dd { margin: 0; font-weight: 500; color: var(--tinte); font-variant-numeric: tabular-nums; }
.tafel-zeilen dd a { color: var(--tinte); text-decoration: none; }
.tafel-zeilen dd a:hover { color: var(--bordeaux); text-decoration: underline; }
.tafel-schwarz .tafel-zeilen > div { border-top-color: rgba(241, 234, 219, 0.18); }
.tafel-schwarz .tafel-zeilen dt { color: var(--auf-schwarz-2); }
.tafel-schwarz .tafel-zeilen dd, .tafel-schwarz .tafel-zeilen dd a, .abschnitt-schwarz .tafel-zeilen dd, .abschnitt-schwarz .tafel-zeilen dd a { color: var(--auf-schwarz); }
.tafel-papier .tafel-zeilen > div { border-top-color: var(--linie); }
.tafel-papier .tafel-zeilen dt { color: var(--tinte-2); }
.tafel-zeilen .nowrap { white-space: nowrap; }

/* Sektionskopf als Schildtafel: Titel steht in der Tafel, kein Etikett darueber */
.kopf-tafel { display: grid; grid-template-columns: 1fr; gap: 1rem; padding: 1.5rem 0 0; border-top: 4px solid var(--bordeaux); margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.kopf-tafel p { font-size: clamp(1.1rem, 1.5vw, 1.3rem); max-width: 60ch; margin: 0; }
.abschnitt-schwarz .kopf-tafel { border-top-color: var(--elfenbein); }
@media (min-width: 820px) {
  .kopf-tafel { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; gap: 2rem; }
}

/* ---------- Kopf (Schilderleiste) ---------- */
.kopf { position: sticky; top: 0; z-index: var(--z-kopf); background: var(--elfenbein); border-bottom: 1px solid var(--elfenbein-tief); }
.kopf-zeile { display: flex; align-items: center; gap: 1.25rem; min-height: var(--kopf-h); }
.marke { display: block; flex: none; margin-right: auto; }
.marke img { height: 52px; width: auto; }
.hauptnav { display: flex; align-items: center; gap: clamp(0.5rem, 1.5vw, 1.5rem); }
.hauptnav a:not(.schild) { font-family: var(--schild); font-weight: 600; font-size: 1.15rem; letter-spacing: 0.03em; text-transform: uppercase; text-decoration: none; color: var(--schwarz); padding: 0.4rem 0.3rem; position: relative; }
.hauptnav a:not(.schild)::after { content: ""; position: absolute; left: 0.3rem; right: 0.3rem; bottom: 0.1rem; height: 3px; background: var(--bordeaux); transform: scaleX(0); transform-origin: left; transition: transform var(--dauer) var(--ease-out); }
.hauptnav a:not(.schild):hover::after, .hauptnav a:not(.schild)[aria-current="true"]::after { transform: scaleX(1); }
.kopf-tel { margin-left: 0.5rem; min-height: 2.75rem; padding: 0.45rem 1rem; white-space: nowrap; }

/* Sprachumschalter: Flagge plus Kuerzel, aktive Sprache in Bordeaux mit Schild-Unterstrich wie die Nav */
.sprachen { display: flex; align-items: center; flex: none; }
.sprachen a { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; min-width: 2.75rem; min-height: 2.75rem; padding: 0 0.25rem; font-family: var(--schild); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.04em; line-height: 1; text-transform: uppercase; text-decoration: none; color: var(--schwarz); }
.sprachen a::after { content: ""; position: absolute; left: 0.25rem; right: 0.25rem; bottom: 0.35rem; height: 3px; background: var(--bordeaux); transform: scaleX(0); transform-origin: left; transition: transform var(--dauer) var(--ease-out); }
.sprachen a:hover::after, .sprachen a[aria-current="true"]::after { transform: scaleX(1); }
.sprachen a[aria-current="true"] { color: var(--bordeaux); }
.sprachen .flagge { width: 21px; height: 14px; flex: none; }
.nav-knopf { display: none; background: transparent; border: 2px solid var(--schwarz); border-radius: var(--ecke); width: 48px; height: 48px; align-items: center; justify-content: center; cursor: pointer; color: var(--schwarz); }
.nav-knopf svg { width: 26px; height: 26px; }
.nav-knopf .zu { display: none; }
.nav-knopf[aria-expanded="true"] .auf { display: none; }
.nav-knopf[aria-expanded="true"] .zu { display: block; }
/* Unter 1280 px passt die Schilderleiste mit sechs Wegweisern, Telefon und Sprachumschalter nicht mehr in eine Zeile: Menue-Knopf */
@media (max-width: 1279px) {
  .kopf-zeile { gap: 0.5rem; }
  .nav-knopf { display: inline-flex; }
  .hauptnav { position: fixed; inset: var(--kopf-h) 0 auto 0; z-index: var(--z-nav); flex-direction: column; align-items: stretch; gap: 0; background: var(--elfenbein); border-top: 4px solid var(--bordeaux); padding: 0.5rem var(--rand) 1.25rem; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: transform var(--dauer) var(--ease-out), opacity var(--dauer) var(--ease-out), visibility 0s linear var(--dauer); }
  /* Geringe Hoehe (Querformat, Zoom): Menue scrollt in sich, alle Punkte und der Telefonlink bleiben erreichbar */
  .hauptnav { max-height: calc(100vh - var(--kopf-h)); max-height: calc(100dvh - var(--kopf-h)); overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: 0.75rem; }
  body.nav-offen .hauptnav { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
  .hauptnav a:not(.schild) { padding: 0.9rem 0; border-bottom: 1px solid var(--elfenbein-tief); font-size: 1.35rem; }
  .hauptnav a:not(.schild)::after { display: none; }
  /* Aktive Seite im Menue: Balken ist hier aus, daher Bordeaux mit Unterstrich (9,5:1 auf Elfenbein) */
  .hauptnav a:not(.schild)[aria-current="page"], .hauptnav a:not(.schild)[aria-current="true"] { color: var(--bordeaux); text-decoration-line: underline; text-decoration-thickness: 3px; text-underline-offset: 0.3em; }
  .kopf-tel { margin: 1rem 0 0; justify-content: center; }
}
@media (max-width: 560px) { .marke img { height: 44px; } }
@media (max-width: 374px) { .kopf-zeile { gap: 0.375rem; } .marke img { height: 40px; } .sprachen a { padding: 0; gap: 0.25rem; } }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--schwarz); }
.hero-bild { position: relative; height: clamp(520px, calc(100vh - var(--kopf-h) - 13rem), 860px); }
.hero-bild picture { display: block; height: 100%; overflow: hidden; }
/* nur das Foto im picture: das Jubilaeumslogo (.emblem, img seit 19.10.2026) liegt ebenfalls in .hero-bild */
.hero-bild picture img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.hero-tafel { position: absolute; left: var(--rand); bottom: -1.5rem; z-index: 3; width: min(100% - 2 * var(--rand), 640px); padding: clamp(1.4rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2.25rem) clamp(1.4rem, 3vw, 2rem); }
.hero-tafel h1 { margin: 0 0 1rem; line-height: 0.92; }
.hero-tafel h1 span { color: var(--bordeaux); }
.hero-zeilen { display: flex; flex-wrap: wrap; gap: 0.35rem 0.85rem; margin: 0 0 0.5rem; font-family: var(--schild); font-weight: 600; font-size: clamp(1.1rem, 1.6vw, 1.35rem); letter-spacing: 0.03em; text-transform: uppercase; color: var(--tinte); }
.hero-zeilen li { display: flex; align-items: center; gap: 0.85rem; }
/* Raute haengt am folgenden Eintrag: beim Umbruch wandert sie mit und bleibt nie allein am Zeilenende */
.hero-zeilen li + li::before { content: ""; display: inline-block; flex: none; width: 8px; height: 8px; background: var(--bordeaux); transform: rotate(45deg); }
.hero-ort { margin: 0 0 1.5rem; font-family: var(--text); font-weight: 500; font-size: clamp(1.0625rem, 1.3vw, 1.15rem); color: var(--bordeaux); max-width: none; }
.nur-schmal { display: none; }
.hero-aktionen { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.emblem { position: absolute; top: clamp(0.75rem, 1.6vw, 1.5rem); right: var(--rand); z-index: 2; width: clamp(150px, 12vw + 40px, 260px); height: auto; }
/* Wappen auf Wunsch gross (1440 px: 160 px); von 761 bis 1199 px links oben wie auf dem Handy, rechts steht dort das Fuehrerhaus */
@media (min-width: 760.02px) and (max-width: 1199.98px) { .emblem { right: auto; left: var(--rand); } }
.hero + .baken { position: relative; z-index: 1; }
.hero-abstand { height: 1.5rem; }
@media (max-width: 760px) {
  .hero-bild { height: auto; }
  .hero-bild picture { height: clamp(300px, 41vh, 560px); }
  .hero-tafel { padding: 1.15rem 1.1rem 1.15rem; }
  .hero-tafel h1 { margin-bottom: 0.6rem; }
  .hero-zeilen { margin-bottom: 0.35rem; }
  .hero-ort { margin-bottom: 0.75rem; }
  /* Nebeneinander, solange beide passen; bei erhoehten Textabstaenden (WCAG 1.4.12) untereinander statt Ueberlauf */
  .hero-aktionen { gap: 0.5rem; flex-wrap: wrap; }
  .hero-aktionen .schild { flex: 1 1 0; min-height: 2.9rem; padding: 0.5rem 0.6rem; font-size: 1.0625rem; white-space: nowrap; }
  .hero-aktionen .schild-bordeaux svg { display: none; }
  .nur-breit { display: none; }
  .nur-schmal { display: inline; }
  .hero-bild picture img { object-position: 74% 55%; }
  .hero-tafel { position: relative; left: auto; bottom: auto; width: auto; margin: calc(-1 * 4.5rem) var(--rand) 0; z-index: 3; }
  .hero-abstand { display: none; }
  .hero + .baken { margin-top: 0; }
  /* Handy: Emblem links oben, damit das Fuehrerhaus des vorderen Lkw (rechts im Bild) frei bleibt */
  .emblem { top: 1rem; right: auto; left: var(--rand); }
}
/* CTA der Unterseiten: Telefonnummer im internationalen Format braucht auf schmalen Handys eine eigene Zeile */
@media (max-width: 420px) { .cta-aktionen { flex-wrap: wrap; } .cta-aktionen .schild { flex: 1 1 100%; } }

/* ---------- Einleitung: Seit 100 Jahren ---------- */
.intro { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.intro h2 { font-size: clamp(2.2rem, 4.2vw, 3.6rem); }
.intro h2 span { color: var(--bordeaux); }
.intro-text p { font-size: clamp(1.1rem, 1.5vw, 1.3rem); }
.intro .tafel { margin-top: 1.5rem; padding: 0.25rem 1.25rem 0.5rem; }
.intro .tafel-zeilen > div { grid-template-columns: minmax(7rem, 9.5rem) 1fr; }
@media (min-width: 900px) {
  .intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
  .intro h2 { position: sticky; top: calc(var(--kopf-h) + 1.5rem); }
}

/* ---------- Leistungen: drei grosse Zeilen ---------- */
.leistung { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: center; padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.leistung + .leistung { border-top: 1px solid var(--elfenbein-tief); }
.leistung-bild { position: relative; overflow: hidden; border-radius: var(--ecke); background: var(--schwarz); }
.leistung-bild img { width: 100%; height: auto; object-fit: cover; aspect-ratio: 4 / 3; }
.leistung-bild.hoch img { aspect-ratio: 4 / 4.6; }
.leistung-text h3 { font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 700; text-transform: uppercase; margin-bottom: 0.75rem; }
.leistung-text p { font-size: 1.0625rem; }
.leistung-text .tafel { margin: 1.25rem 0 1.5rem; padding: 0.15rem 1.15rem 0.4rem; border-top-width: 3px; }
.leistung-text .tafel-zeilen > div { grid-template-columns: minmax(6rem, 7.5rem) 1fr; padding: 0.6rem 0; }
.leistung-text .tafel-zeilen dd { font-weight: 400; }
@media (min-width: 820px) {
  .leistung { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); }
  .leistung:nth-child(even) .leistung-bild { order: 2; }
  .leistung:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
}

/* ---------- Entsorgung (dunkel) ---------- */
.entsorgung-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.entsorgung-bild { overflow: hidden; border-radius: var(--ecke); }
.entsorgung-bild img { width: 100%; height: auto; object-fit: cover; aspect-ratio: 4 / 3; }
.entsorgung-text p { font-size: 1.0625rem; }
.wege { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 2rem 0; }
.weg { padding: 1.35rem 1.35rem 1.5rem; }
.weg h3 { text-transform: uppercase; font-weight: 700; font-size: clamp(1.6rem, 2.2vw, 2rem); margin-bottom: 0.5rem; }
.weg p { font-size: 1.0625rem; color: var(--auf-schwarz); }
.weg ul { margin-top: 0.85rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.weg li { font-family: var(--schild); font-weight: 600; font-size: 0.98rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.3rem 0.6rem; border: 1.5px solid rgba(241, 234, 219, 0.35); border-radius: var(--ecke); color: var(--auf-schwarz); }
/* Innenabstand seitlich wie die Weg-Tafeln darueber (1.35rem); .tafel sitzt am selben Element, nicht darin */
.entsorgung-ablauf { margin-top: 2rem; padding: 0.25rem 1.35rem 0.5rem; }
.entsorgung-hintergrund { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 2rem; border-top: 1px solid rgba(241, 234, 219, 0.2); display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.entsorgung-hintergrund h3 { font-weight: 600; text-transform: uppercase; margin-bottom: 0.4rem; font-size: 1.35rem; }
.entsorgung-hintergrund p { font-size: 1.0625rem; color: var(--auf-schwarz-2); }
@media (min-width: 700px) { .wege { grid-template-columns: 1fr 1fr; } .entsorgung-hintergrund { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2.5rem; } }
@media (min-width: 980px) {
  .entsorgung-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
  .entsorgung-bild { position: sticky; top: calc(var(--kopf-h) + 1.5rem); }
  .entsorgung-bild img { aspect-ratio: 4 / 4.2; }
}

/* ---------- Fuhrpark: Register + Buehne ---------- */
.register { margin-bottom: clamp(2rem, 4vw, 3.5rem); padding: 0.25rem 1.35rem 0.5rem; background: var(--papier); }
.register .tafel-zeilen > div { grid-template-columns: minmax(7rem, 10rem) 1fr; padding: 0.95rem 0; border-top-color: var(--linie); }
.register .tafel-zeilen dt { color: var(--bordeaux); font-size: 1.15rem; }
.register .tafel-zeilen dd { font-weight: 400; font-size: 1.0625rem; }

.buehne-rahmen { position: relative; }
.buehne { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; gap: 0; -webkit-overflow-scrolling: touch; }
.buehne::-webkit-scrollbar { height: 6px; }
.buehne::-webkit-scrollbar-thumb { background: var(--bordeaux); }
.slide { position: relative; flex: 0 0 100%; margin: 0; scroll-snap-align: start; scroll-snap-stop: always; height: clamp(360px, 72vh, 820px); background: var(--schwarz); }
.slide-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.slide button { display: block; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background: transparent; cursor: zoom-in; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slide-paar img { object-position: 50% 45%; }
.slide-titel { position: absolute; left: var(--rand); bottom: 1.25rem; max-width: min(88%, 520px); padding: 0.6rem 0.95rem 0.65rem; border-top: 0; font-family: var(--text); font-weight: 500; font-size: clamp(0.98rem, 1.3vw, 1.15rem); color: var(--tinte); pointer-events: none; }
.buehne-pfeile { position: absolute; right: var(--rand); bottom: 1.25rem; display: flex; gap: 0.5rem; z-index: 2; }
.buehne-pfeile .schild { width: 3.1rem; padding: 0; }
.buehne-fuss { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; flex-wrap: wrap; }
.buehne-stand { font-family: var(--schild); font-weight: 600; font-size: 1.1rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tinte-2-elf); font-variant-numeric: tabular-nums; }
.filmstreifen { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 8px; scroll-snap-type: x proximity; }
.filmstreifen button { flex: 0 0 auto; width: 118px; height: 78px; padding: 0; border: 3px solid transparent; border-radius: var(--ecke); background: var(--schwarz); cursor: pointer; overflow: hidden; scroll-snap-align: start; transition: border-color var(--dauer) var(--ease-out); }
.filmstreifen button img { width: 100%; height: 100%; object-fit: cover; }
.filmstreifen button[aria-current="true"] { border-color: var(--bordeaux); }
/* Zweites Merkmal neben der Farbe (WCAG 1.4.1): innerer Elfenbein-Ring am aktuellen Bild */
.filmstreifen button[aria-current="true"]::before { content: ""; position: absolute; inset: 0; border: 2px solid var(--elfenbein); pointer-events: none; }
.filmstreifen button:hover { border-color: var(--bordeaux-tief); }
/* Fokus auf Fotos: Ring nach innen (Buehne und Filmstreifen scrollen und schneiden aussen ab),
   zweifarbig Elfenbein + Bordeaux, damit er auf hellen wie dunklen Bildstellen mind. 3:1 erreicht */
.slide button, .raster button, .filmstreifen button { position: relative; }
.slide button:focus-visible, .raster button:focus-visible, .filmstreifen button:focus-visible { outline: 3px solid var(--elfenbein); outline-offset: -3px; }
.slide button:focus-visible::after, .raster button:focus-visible::after, .filmstreifen button:focus-visible::after { content: ""; position: absolute; inset: 3px; border: 3px solid var(--fokus); pointer-events: none; }
@media (max-width: 600px) {
  .slide { height: clamp(300px, 56vh, 520px); }
  .slide-paar { grid-template-columns: 1fr 1fr; }
  .slide-titel { bottom: 4.6rem; max-width: calc(100% - 2 * var(--rand)); font-size: 0.92rem; }
  .filmstreifen button { width: 92px; height: 62px; }
}

/* Lightbox */
.lightbox { --fokus: var(--elfenbein); border: 0; padding: 0; margin: auto; width: min(100vw, 1600px); max-width: 100vw; height: 100vh; max-height: 100vh; background: transparent; color: var(--elfenbein); }
.lightbox::backdrop { background: rgba(22, 19, 17, 0.94); }
.lightbox-inhalt { position: relative; display: grid; grid-template-rows: 1fr auto; height: 100%; padding: 0.75rem; }
.lightbox-bild { display: flex; align-items: center; justify-content: center; min-height: 0; }
.lightbox-bild img { max-width: 100%; max-height: calc(100vh - 6.5rem); width: auto; height: auto; object-fit: contain; border-radius: var(--ecke); }
.lightbox-leiste { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 0.25rem 0.25rem; }
.lightbox-leiste p { margin: 0; font-family: var(--text); font-weight: 500; font-size: 1.0625rem; color: var(--elfenbein); text-align: center; max-width: none; }
.lightbox-leiste .schild { min-height: 2.75rem; }
.lightbox-schliessen { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 2; width: 3rem; padding: 0; }

/* ---------- Unternehmen ---------- */
.unternehmen { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.unternehmen-hoch { margin: 0; }
.unternehmen-panorama { margin-block: 0; }
.unternehmen-hoch img { width: 100%; height: auto; object-fit: cover; aspect-ratio: 4 / 5; border-radius: var(--ecke); }
.unternehmen-panorama { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.unternehmen-panorama img { width: 100%; height: auto; object-fit: cover; aspect-ratio: 16 / 7; border-radius: var(--ecke); }
.unternehmen figcaption, .unternehmen-panorama figcaption { display: inline-block; margin-top: -2.6rem; margin-left: var(--rand); position: relative; padding: 0.6rem 0.95rem 0.65rem; border-top: 0; font-size: 0.98rem; font-weight: 500; max-width: min(88%, 560px); }
.unternehmen-text p { font-size: 1.0625rem; }
.zeitleiste { margin-top: 1.5rem; padding: 0.25rem 1.25rem 0.5rem; }
.zeitleiste .tafel-zeilen > div { grid-template-columns: minmax(7rem, 9rem) 1fr; }
.emblem-klein { width: 200px; height: auto; margin-bottom: 1.25rem; }
/* Unternehmen-Seite: Wappen groesser als im Startbild (Wunsch Betreiber 09.10.2026) */
.emblem-seite { width: clamp(220px, 18vw + 40px, 320px); }
@media (min-width: 900px) {
  .unternehmen { grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
  .unternehmen-hoch img { aspect-ratio: 3 / 4; }
  .unternehmen-panorama img { aspect-ratio: 20 / 9; }
}
/* Chronik (19.10.2026): Wegmarken der Firmengeschichte nach Angaben des Betreibers.
   Ab 1100 px zwei Spalten; die Lesefolge laeuft spaltenweise (1-6 links, 7-11 rechts), wie im Markup. */
.chronik-abschnitt { padding-top: 0; }
.chronik { list-style: none; margin: 0; padding: 0; }
.chronik li { display: grid; grid-template-columns: minmax(6.5rem, 10rem) minmax(0, 1fr); gap: 0.3rem 1.25rem; padding: 1rem 0; border-top: 1px solid var(--linie); align-items: baseline; }
.chronik-jahr { font-family: var(--schild); font-weight: 700; font-size: clamp(1.3rem, 0.9vw + 1rem, 1.6rem); line-height: 1.15; color: var(--bordeaux); font-variant-numeric: tabular-nums; }
.chronik p { margin: 0; max-width: 60ch; }
@media (max-width: 520px) { .chronik li { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1100px) {
  .chronik { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(6, auto); grid-auto-flow: column; column-gap: clamp(2rem, 4vw, 4rem); }
}
/* Partner (19.10.2026): nur Partnerfirmen (das Jubilaeumslogo gehoert nicht hierher); weitere Firmen reihen sich in die Liste ein */
.partner-abschnitt { padding-top: 0; }
.partner-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.75rem; }
.partner-karte { display: flex; flex-direction: column; gap: 0.85rem; height: 100%; padding: 1rem 1rem 0.9rem; background: var(--papier); border-top: 4px solid var(--bordeaux); border-radius: var(--ecke); color: var(--bordeaux); text-decoration: none; }
.partner-karte img { width: 100%; height: auto; }
.partner-web { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; }
.partner-web svg { width: 1rem; height: 1rem; flex: none; }
.partner-karte:hover .partner-web { text-decoration: underline; }
/* Firmenarchiv als buendiges Fotoalbum (16.10.2026): Archivbilder werden nicht beschnitten.
   Ab 900 px teilt jede Reihe die Breite im Verhaeltnis der Seitenverhaeltnisse (--spalten, im Markup),
   dadurch sind alle Bilder einer Reihe gleich hoch. Darunter fliessen die Bilder frei im Raster. */
.archiv-abschnitt { padding-top: 0; }
.archiv { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem 0.75rem; align-items: start; }
.archiv-reihe { display: contents; }
.archiv figure { margin: 0; }
.archiv button { display: block; width: 100%; padding: 0; border: 0; background: var(--schwarz); cursor: zoom-in; border-radius: var(--ecke); overflow: hidden; }
.archiv img { display: block; width: 100%; height: auto; transition: transform var(--dauer) var(--ease-out); }
.archiv button:hover img { transform: scale(1.02); }
.archiv figcaption { margin-top: 0.55rem; font-size: 0.95rem; font-weight: 500; line-height: 1.4; color: var(--tinte); }
@media (min-width: 900px) {
  .archiv { grid-template-columns: minmax(0, 1fr); row-gap: 1.75rem; }
  .archiv-reihe { display: grid; grid-template-columns: var(--spalten); gap: 0.75rem; align-items: start; }
}

/* ---------- Ablauf: Wegweiser-Kette ---------- */
.ablauf { display: grid; grid-template-columns: 1fr; gap: 0; position: relative; }
.schritt { position: relative; padding: 1.35rem 1.35rem 1.5rem; }
.schritt + .schritt { border-top: 1px solid var(--linie); }
.schritt h3 { text-transform: uppercase; font-weight: 700; font-size: 1.5rem; margin-bottom: 0.5rem; }
.schritt p { font-size: 1.0625rem; color: var(--tinte-2-elf); }
.schritt .pfeil { position: absolute; right: -1.15rem; top: 50%; width: 2.3rem; height: 2.3rem; margin-top: -1.15rem; display: none; align-items: center; justify-content: center; background: var(--bordeaux); color: #fff; border-radius: 50%; z-index: 1; }
.schritt .pfeil svg { width: 1.2rem; height: 1.2rem; }
@media (min-width: 820px) {
  .ablauf { grid-template-columns: 1fr 1fr 1fr; }
  .schritt { padding: 1.75rem 2.25rem 1.9rem 1.75rem; }
  .schritt + .schritt { border-top: 0; border-left: 1px solid var(--linie); }
  .schritt:not(:last-child) .pfeil { display: inline-flex; }
}

/* ---------- Kontakt ---------- */
.kontakt { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.kontakt-tafel { padding: 0.25rem 1.35rem 0.5rem; }
.kontakt-tafel .tafel-zeilen > div { grid-template-columns: minmax(6.5rem, 8rem) 1fr; padding: 0.9rem 0; }
.kontakt-tafel dd a, .kontakt-tafel .kontakt-wert { display: inline-flex; align-items: center; gap: 0.5rem; }
.kontakt-tafel dd svg { width: 1.1em; height: 1.1em; color: var(--bordeaux); flex: none; }
.kontakt-hinweis { margin-top: 1.5rem; font-size: 0.98rem; }
.formular { padding: clamp(1.25rem, 3vw, 2rem); }
.formular h3 { text-transform: uppercase; font-weight: 700; font-size: 1.5rem; margin-bottom: 0.35rem; }
.formular > p { font-size: 0.98rem; margin-bottom: 1.25rem; }
/* align-content: start - eine Meldung im Nachbarfeld derselben Reihe streckt dieses Feld nicht */
.feld { display: grid; gap: 0.35rem; margin-bottom: 1rem; align-content: start; }
.feld label { font-family: var(--schild); font-weight: 600; font-size: 0.98rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tinte-2-elf); }
.feld input, .feld select, .feld textarea { font: inherit; font-size: 1.0625rem; color: var(--tinte); background: var(--papier); border: 1.5px solid var(--elfenbein-tief); border-bottom: 2px solid var(--schwarz); border-radius: var(--ecke); padding: 0.7rem 0.85rem; width: 100%; caret-color: var(--bordeaux); }
.feld input::placeholder, .feld textarea::placeholder { color: var(--tinte-2-elf); opacity: 1; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: 3px solid var(--fokus); outline-offset: 1px; border-bottom-color: var(--bordeaux); }
.feld textarea { min-height: 7.5rem; resize: vertical; }
.feld select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23161311' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1.1rem; padding-right: 2.5rem; }
.feld-reihe { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }
.feld-zustimmung { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.92rem; margin: 0.25rem 0 1.25rem; }
.feld-zustimmung input { width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; accent-color: var(--bordeaux); flex: none; }
.feld-zustimmung label { color: var(--tinte); }
.formular-fuss { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.formular-fuss .pflicht { font-size: 0.92rem; color: var(--tinte-2-elf); margin: 0; }
.formular-status { display: none; margin-top: 1.25rem; padding: 1rem 1.15rem; background: var(--papier); border-top: 3px solid var(--bordeaux); font-weight: 500; }
.formular-status.zeigen { display: block; }
.formular-fehler { display: none; margin: -0.35rem 0 1rem; color: var(--bordeaux); font-size: 0.92rem; font-weight: 500; }
.formular-fehler.zeigen { display: block; }
/* Fehlerbild je Feld: setzt main.js beim Absenden (aria-invalid + Meldung .feld-fehler), entfernt es bei gültiger Eingabe.
   Unterkante 3px Bordeaux (2px Rand + 1px Innenschatten, ohne Höhensprung), Fläche leicht getönt; Meldungstext Bordeaux auf Elfenbein 9,4:1 */
.feld [aria-invalid="true"] { border-bottom-color: var(--bordeaux); box-shadow: inset 0 -1px 0 var(--bordeaux); background-color: #fbf4f3; }
.feld-zustimmung input[aria-invalid="true"]:not(:focus-visible) { outline: 2px solid var(--bordeaux); outline-offset: 2px; }
.feld-fehler { display: flex; align-items: flex-start; gap: 0.4rem; margin: 0.1rem 0 0; color: var(--bordeaux); font-size: 0.95rem; font-weight: 500; line-height: 1.4; }
.feld-fehler svg { width: 1.1em; height: 1.1em; flex: none; margin-top: 0.12em; }
/* Einzug = Kästchen 1.25rem + Abstand 0.7rem + Browser-Standardrand des Kästchens (4px links, 3px rechts): bündig mit dem Labeltext */
.feld-zustimmung + .feld-fehler { margin: -0.8rem 0 1.25rem calc(1.95rem + 7px); font-size: 0.95rem; }
@media (min-width: 560px) { .feld-reihe { grid-template-columns: 1fr 1fr; } }
/* Zweispaltig erst ab 1180 px: darunter waeren Formularfelder und Angebots-Tafel zu schmal (Platzhalter abgeschnitten, FR ein Wort je Zeile) */
@media (min-width: 1180px) { .kontakt { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; } }

/* ---------- Fuss ---------- */
.fuss { background: var(--schwarz); color: var(--auf-schwarz-2); }
.fuss-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; padding-block: clamp(2.5rem, 5vw, 4rem) 2rem; }
.fuss-marke { display: inline-block; padding: 1rem 1.15rem; background: var(--elfenbein); }
.fuss-marke img { width: 200px; height: auto; }
.fuss address { font-style: normal; margin-top: 1.25rem; line-height: 1.6; font-variant-numeric: tabular-nums; }
.fuss address a { color: var(--auf-schwarz); text-decoration: none; }
.fuss address a:hover { color: #fff; text-decoration: underline; }
/* Instagram-Profil (16.10.2026) unter der Anschrift */
.fuss-social { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.9rem; padding-block: 0.3rem; color: var(--auf-schwarz); font-weight: 500; text-decoration: none; }
.fuss-social svg { width: 1.25rem; height: 1.25rem; flex: none; }
.fuss-social:hover { color: #fff; text-decoration: underline; }
.fuss h3 { font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; color: var(--auf-schwarz); margin-bottom: 0.75rem; }
.fuss-nav a { display: block; padding: 0.3rem 0; color: var(--auf-schwarz-2); text-decoration: none; }
.fuss-nav a:hover { color: #fff; }
.fuss-unten { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.25rem 0 1.5rem; border-top: 1px solid rgba(241, 234, 219, 0.18); font-size: 0.92rem; }
.fuss-unten p { margin: 0; max-width: none; }
.fuss-unten a { color: var(--auf-schwarz-2); }
.fuss-unten a:hover { color: #fff; }
.demo-plakette { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.75rem; border: 1.5px solid rgba(241, 234, 219, 0.35); border-radius: var(--ecke); font-family: var(--schild); font-weight: 600; font-size: 0.92rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--auf-schwarz); }
/* Schalter "Bewegung anhalten" (von main.js eingesetzt, nur wenn sich etwas bewegt) */
.bewegung-knopf { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.75rem; padding: 0 0.25rem; background: none; border: 0; border-radius: var(--ecke); font: inherit; color: var(--auf-schwarz-2); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.bewegung-knopf:hover { color: #fff; }
.bewegung-knopf svg { width: 1em; height: 1em; flex: none; }
.demo-plakette .punkt { width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg); }
@media (min-width: 760px) { .fuss-grid { grid-template-columns: 1.2fr 0.8fr 1fr; gap: 3rem; } }

/* ---------- Unterseiten: Seitenkopf, Fotoraster, Richtwerte, Fragen ---------- */
.seitenkopf { position: relative; background: var(--schwarz); }
.seitenkopf picture { display: block; height: clamp(300px, 46vh, 520px); overflow: hidden; }
.seitenkopf img { width: 100%; height: 100%; object-fit: cover; }
.seitenkopf-tafel { position: absolute; left: var(--rand); bottom: -1.5rem; z-index: 3; width: min(100% - 2 * var(--rand), 720px); padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1.25rem, 3vw, 2.25rem); }
.seitenkopf-tafel h1 { font-size: clamp(2.4rem, 4.6vw, 4rem); margin-bottom: 0.6rem; }
.seitenkopf-tafel h1 span { color: var(--bordeaux); }
.seitenkopf-tafel p { margin: 0; font-size: clamp(1.0625rem, 1.3vw, 1.15rem); color: var(--tinte); max-width: 60ch; }
.seitenkopf + .baken { position: relative; z-index: 1; }
.seitenkopf-abstand { height: 1.5rem; }
@media (max-width: 760px) {
  .seitenkopf picture { height: clamp(220px, 34vh, 420px); }
  .seitenkopf-tafel { position: relative; left: auto; bottom: auto; width: auto; margin: -3rem var(--rand) 0; padding: 1.15rem 1.1rem 1.2rem; }
  .seitenkopf-abstand { display: none; }
}
/* Seitenkopf Unternehmen: damals (Archivfoto) geht in heute (Fraese) ueber; Tafel unter den Fotos, damit beide sichtbar bleiben */
.seitenkopf-bilder { position: relative; height: clamp(300px, 46vh, 520px); overflow: hidden; }
.seitenkopf-bilder img { position: absolute; top: 0; height: 100%; }
.seitenkopf-bilder .bild-damals { left: 0; width: 52%; z-index: 1; object-position: 0 30%; -webkit-mask-image: linear-gradient(to right, #000 66%, transparent); mask-image: linear-gradient(to right, #000 66%, transparent); }
.seitenkopf-bilder .bild-heute { right: 0; width: 64%; object-position: 40% 60%; }
@media (min-width: 761px) {
  /* Fraese-Foto fuellt den ganzen Kopf, Archivfoto oben links bleibt ueber der Tafel sichtbar */
  .seitenkopf-doppel { --kopf-h: clamp(300px, 52vh, 560px); display: flow-root; padding-top: calc(var(--kopf-h) - 8.5rem); }
  .seitenkopf-doppel .seitenkopf-bilder { position: absolute; inset: 0; height: auto; }
  .seitenkopf-doppel .seitenkopf-bilder .bild-heute { object-position: 20% 60%; }
  .seitenkopf-doppel .seitenkopf-bilder .bild-damals { height: auto; min-height: var(--kopf-h);
    -webkit-mask-image: linear-gradient(to right, #000 66%, transparent), linear-gradient(to bottom, #000 80%, transparent); -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, #000 66%, transparent), linear-gradient(to bottom, #000 80%, transparent); mask-composite: intersect; }
  .seitenkopf-doppel .seitenkopf-tafel { position: relative; left: auto; bottom: auto; margin: 0 var(--rand) -1.5rem; }
}
@media (max-width: 600px) {
  .seitenkopf-bilder { height: clamp(300px, 92vw, 440px); }
  .seitenkopf-bilder .bild-damals, .seitenkopf-bilder .bild-heute { width: 100%; }
  .seitenkopf-bilder .bild-damals { height: 60%; object-position: 50% 35%; -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent); mask-image: linear-gradient(to bottom, #000 76%, transparent); }
  .seitenkopf-bilder .bild-heute { top: auto; bottom: 0; height: 54%; object-position: 35% 60%; }
}

/* Fotoraster: grosse Kacheln, Hochformate spannen zwei Reihen */
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); grid-auto-rows: 240px; grid-auto-flow: dense; gap: 0.75rem; }
.raster figure { margin: 0; position: relative; }
.raster .hoch { grid-row: span 2; }
.raster .breit { grid-column: span 2; }
.raster button { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: var(--schwarz); cursor: zoom-in; border-radius: var(--ecke); overflow: hidden; }
.raster img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dauer) var(--ease-out); }
.raster button:hover img { transform: scale(1.02); }
.raster figcaption { position: absolute; left: 0.75rem; bottom: 0.75rem; max-width: calc(100% - 1.5rem); padding: 0.4rem 0.7rem; border-top: 0; font-size: 0.92rem; font-weight: 500; color: var(--tinte); pointer-events: none; }
@media (max-width: 640px) { .raster { grid-auto-rows: 200px; } .raster .breit { grid-column: span 1; } }

/* Richtwerte als Tafel-Tabelle */
.richtwerte { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.richtwerte th, .richtwerte td { text-align: left; padding: 0.7rem 0.75rem; border-top: 1px solid var(--elfenbein-tief); vertical-align: top; }
.richtwerte th { font-family: var(--schild); font-weight: 600; font-size: 0.98rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tinte-2-elf); }
.richtwerte thead th { border-top: 0; padding-top: 0.25rem; }
.richtwerte td:not(:first-child), .richtwerte th:not(:first-child) { text-align: right; white-space: nowrap; }
.richtwerte td:first-child { font-weight: 500; }
.tafel-tabelle { padding: 0.5rem 1.25rem 0.75rem; overflow-x: auto; }
@media (max-width: 560px) { .richtwerte { font-size: 0.92rem; } .richtwerte th, .richtwerte td { padding: 0.55rem 0.45rem; } .richtwerte th { white-space: normal; letter-spacing: 0.03em; } .richtwerte td { hyphens: auto; overflow-wrap: anywhere; } .tafel-tabelle { padding-inline: 0.85rem; } }
.tabelle-hinweis { margin-top: 0.75rem; font-size: 0.92rem; }

/* Fragen und Antworten als Tafelzeilen */
.fragen .tafel-zeilen > div { grid-template-columns: minmax(12rem, 22rem) 1fr; padding: 1rem 0; }
.fragen .tafel-zeilen dt { text-transform: none; letter-spacing: 0; font-size: 1.15rem; color: var(--tinte); }
.fragen .tafel-zeilen dd { font-weight: 400; }
@media (max-width: 760px) { .fragen .tafel-zeilen > div { grid-template-columns: 1fr; gap: 0.3rem; } }

/* Zweispalter Text + Tafel */
.zweispalt { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 900px) { .zweispalt { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; } }
.zweispalt .tafel { padding: 0.25rem 1.25rem 0.5rem; }
.abschnitt-schwarz .tafel-tabelle { background: var(--schwarz-hell); border-top-color: var(--elfenbein); }
.abschnitt-schwarz .richtwerte th, .abschnitt-schwarz .richtwerte td { border-top-color: rgba(241, 234, 219, 0.18); }
.abschnitt-schwarz .richtwerte th { color: var(--auf-schwarz-2); }
.abschnitt-schwarz .richtwerte td { color: var(--auf-schwarz); }

/* Aktuelles: Beitraege untereinander, Foto mit Bildunterschrift, darunter Titel und Text wie in der Kopf-Tafel */
.beitrag { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); }
.beitrag + .beitrag { margin-top: clamp(3.5rem, 7vw, 6rem); padding-top: clamp(3.5rem, 7vw, 6rem); border-top: 1px solid var(--linie); }
.beitrag-bild { margin: 0; }
.beitrag-bild img { width: 100%; height: auto; object-fit: cover; aspect-ratio: 20 / 9; border-radius: var(--ecke); }
.beitrag-bild figcaption { display: inline-block; position: relative; margin: -2.6rem 0 0 var(--rand); padding: 0.6rem 0.95rem 0.65rem; border-top: 0; font-size: 0.98rem; font-weight: 500; max-width: min(88%, 560px); }
.beitrag-text { padding-top: 1.5rem; border-top: 4px solid var(--bordeaux); }
.beitrag-text h2 { margin-bottom: 1rem; }
.beitrag-text h2 span { color: var(--bordeaux); }
.beitrag-text p { font-size: clamp(1.0625rem, 1.3vw, 1.15rem); }
.beitrag-text .wegweiser { margin-top: 0.5rem; }
.beitrag-hoch .beitrag-bild img { aspect-ratio: 4 / 3; object-position: 50% 45%; }
@media (min-width: 900px) {
  .beitrag-breit .beitrag-text { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
  .beitrag-breit .beitrag-text h2 { margin-bottom: 0; }
  .beitrag-hoch { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
  .beitrag-hoch .beitrag-bild img { aspect-ratio: 1 / 1; }
}
@media (max-width: 760px) { .beitrag-breit .beitrag-bild img { aspect-ratio: 4 / 3; object-position: 78% 50%; } }
/* Beitrag mit Querformat-Foto 4:3 neben dem Text (100 Jahre: vorderer Sattelzug mit Emblem) */
.beitrag-quer .beitrag-bild img { aspect-ratio: 4 / 3; }
@media (min-width: 900px) {
  .beitrag-quer { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
}

/* Sektions-Wegweiser auf der Startseite */
.mehr { margin-top: clamp(1.5rem, 3vw, 2.5rem); display: flex; justify-content: flex-end; }
.hauptnav a[aria-current="page"]::after { transform: scaleX(1); }

/* ---------- Rechtsseiten ---------- */
.recht { padding-block: clamp(2.5rem, 6vw, 5rem); }
.recht .wrap { max-width: 800px; }
.recht h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); margin-bottom: 1.5rem; overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 420px) { .recht h1 { font-size: 9.2vw; } }
.recht h2 { font-size: 1.5rem; margin: 2.2em 0 0.5em; text-transform: none; letter-spacing: 0; }
.recht h3 { font-size: 1.15rem; margin: 1.6em 0 0.4em; }
.recht ul { list-style: disc; padding-left: 1.25rem; max-width: 68ch; }
.recht li { margin-bottom: 0.3em; }
.recht .demo-hinweis { margin-top: 2.5rem; padding: 1.25rem 1.35rem; }

/* ---------- Erscheinen beim Scrollen: bewusst entfernt ----------
   Inhalte sind von Anfang an sichtbar und stehen still (Vorgabe: nichts erst per Animation sichtbar machen).
   Auch eine reine Verschiebung wurde verworfen: sie versetzt Sprungziele und Fokus-Scrollen um 12 px. */

/* ---------- NK-IT Interesse-Banner (fixe Verkaufsleiste) ---------- */
.interesse-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-banner); background: var(--schwarz); color: var(--auf-schwarz-2); border-top: 4px solid var(--bordeaux); }
.ib-wrap { max-width: var(--wrap); margin-inline: auto; padding: 0.9rem var(--rand); display: flex; align-items: center; justify-content: space-between; gap: clamp(1rem, 3vw, 2.5rem); }
.ib-pitch { min-width: 0; }
.ib-title { font-family: var(--schild); font-weight: 600; font-size: clamp(1.1rem, 1.6vw, 1.35rem); color: #fff; margin: 0 0 0.3rem; line-height: 1.25; max-width: none; }
.ib-benefits { display: flex; flex-wrap: wrap; gap: 0.2rem 1.4rem; margin: 0 0 0.35rem; padding: 0; }
.ib-benefits li { position: relative; padding-left: 1.05rem; font-size: 0.92rem; color: var(--auf-schwarz-2); line-height: 1.45; }
.ib-benefits li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.45rem; height: 0.45rem; background: var(--elfenbein); transform: rotate(45deg); }
.ib-contact { margin: 0; font-size: 0.92rem; color: var(--auf-schwarz-2); display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; align-items: center; max-width: none; }
.ib-contact-name { font-weight: 500; color: #fff; }
.ib-contact-link { color: var(--elfenbein); text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem; font-variant-numeric: tabular-nums; }
.ib-contact-link svg { width: 14px; height: 14px; }
.ib-contact-link:hover { color: #fff; text-decoration: underline; }
.ib-actions { flex: none; text-align: center; }
.ib-question { margin: 0 0 0.45rem; font-family: var(--schild); font-weight: 600; font-size: 1.15rem; color: #fff; max-width: none; }
.ib-buttons { display: flex; gap: 0.6rem; }
.ib-btn { font-family: var(--schild); font-weight: 600; font-size: 1.0625rem; text-transform: uppercase; letter-spacing: 0.02em; padding: 0.62rem 1.1rem; border-radius: var(--ecke); cursor: pointer; border: 2px solid transparent; transition: background-color var(--dauer) var(--ease-out), color var(--dauer) var(--ease-out), border-color var(--dauer) var(--ease-out); }
.ib-btn-yes { background: var(--elfenbein); color: var(--schwarz); border-color: var(--elfenbein); }
.ib-btn-yes:hover { background: #fff; border-color: #fff; }
.ib-btn-no, .ib-btn-ghost { background: transparent; color: #fff; border-color: rgba(241, 234, 219, 0.45); }
.ib-btn-no:hover, .ib-btn-ghost:hover { border-color: #fff; }
.interesse-banner :focus-visible { outline: 3px solid var(--elfenbein); outline-offset: 2px; }
.ib-done { justify-content: center; }
.ib-status { margin: 0; display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.98rem; line-height: 1.5; color: #fff; max-width: 78ch; }
.ib-status:focus { outline: none; }
.ib-status svg { width: 20px; height: 20px; flex: none; color: var(--elfenbein); margin-top: 0.15rem; }
.ib-status a { color: var(--elfenbein); }
.ib-status a:hover { color: #fff; }
.ib-err strong { color: #fff; }
.ib-close { position: relative; flex: none; background: transparent; border: 2px solid rgba(241, 234, 219, 0.45); color: #fff; border-radius: var(--ecke); width: 36px; height: 36px; font-size: 0.92rem; line-height: 1; cursor: pointer; transition: border-color var(--dauer) var(--ease-out); }
.ib-close::before { content: ""; position: absolute; inset: -7px; }
.ib-close:hover { border-color: #fff; }
.ib-privacy { margin: 0.55rem 0 0; font-size: 0.78rem; color: var(--auf-schwarz-2); max-width: none; }
.ib-privacy a { color: var(--elfenbein); }
.ib-privacy a:hover { color: #fff; }
@media (max-width: 900px) {
  .ib-wrap { flex-direction: column; align-items: stretch; gap: 0.5rem; padding-block: 0.7rem 0.75rem; }
  .ib-benefits { display: none; }
  .ib-title { margin-bottom: 0.1rem; padding-right: 2.8rem; font-size: 1.0625rem; line-height: 1.2; }
  .ib-contact { display: none; }
  .ib-actions { text-align: left; }
  .ib-question { font-size: 1.0625rem; margin-bottom: 0.35rem; }
  .ib-buttons { flex-wrap: nowrap; gap: 0.5rem; }
  .ib-btn { flex: 1 1 0; padding: 0.55rem 0.5rem; font-size: 0.98rem; white-space: nowrap; }
  .ib-privacy { margin-top: 0.4rem; font-size: 0.78rem; line-height: 1.3; }
  .ib-wrap.ib-start { position: relative; }
  .ib-wrap.ib-start .ib-close { position: absolute; top: 0.8rem; right: var(--rand); }
}
/* Unter 360 px brechen die Antwort-Schaltflaechen um, damit "Nein, kein Interesse" nicht abgeschnitten wird */
@media (max-width: 359px) { .ib-btn { white-space: normal; } }
/* Geringe Hoehe (Querformat, Zoom): Leiste steht im Fluss am Seitenende und verdeckt nichts */
@media (max-height: 500px) { .interesse-banner { position: static; } }
@media (max-width: 1279px) { body.nav-offen .interesse-banner { visibility: hidden; } }

/* ---------- Tafelzeilen auf schmalen Breiten stapeln (steht bewusst hinter allen Einzelregeln) ---------- */
@media (max-width: 560px) {
  .tafel-zeilen > div, .intro .tafel-zeilen > div, .leistung-text .tafel-zeilen > div, .register .tafel-zeilen > div, .zeitleiste .tafel-zeilen > div, .kontakt-tafel .tafel-zeilen > div, .entsorgung-ablauf .tafel-zeilen > div, .zweispalt .tafel-zeilen > div { grid-template-columns: 1fr; gap: 0.2rem; }
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .baken::before { animation: none !important; }
  .schild, .schild:hover, .schild:active { transform: none; transition: none; }
  .wegweiser svg, .hauptnav a::after, .sprachen a::after, .filmstreifen button, .ib-btn { transition: none; }
  .hauptnav { transition: none; }
  .archiv img { transition: none; }
  .archiv button:hover img { transform: none; }
}

/* ---------- Druck ---------- */
@media print {
  .kopf, .fuss, .nav-knopf, .skip-link, .bewegung-sprung, .interesse-banner, .baken, .buehne-pfeile, .filmstreifen, .lightbox, .bewegung-knopf { display: none !important; }
  .hero-tafel { position: static; width: auto; }
}

/* ---------- Windows-Hochkontrast (forced colors) ----------
   Das System ersetzt alle Farben; Farbflaechen wie Bordeaux-Unterstriche und farbige Rahmen gehen dabei verloren.
   Zustaende kommen hier ueber Form (Balken, Rahmenstaerke, Unterstreichung) in Systemfarben zurueck.
   Baken, Rauten und Bordeaux-Oberkanten der Tafeln sind Deko und duerfen wegfallen. Ohne Kontrastmodus wirkungslos. */
@media (forced-colors: active) {
  /* Logo ist ein dunkles PNG ohne Grund: eigene Elfenbein-Flaeche, sonst steht es schwarz auf Schwarz */
  .marke, .fuss-marke { forced-color-adjust: none; background-color: var(--elfenbein); }
  .marke { padding: 4px 6px; border-radius: var(--ecke); }
  .marke:focus-visible { outline-color: Highlight; }
  /* Emblem und Flaggen bringen eigene Flaechen und Farben mit (Absicherung fuer Browser, die SVG-Fuellungen erzwingen) */
  .emblem, .emblem-klein, .sprachen .flagge { forced-color-adjust: none; }

  /* Aktive Seite und aktive Sprache: Schild-Unterstrich in Linkfarbe statt Bordeaux (Hintergrund wuerde zu Canvas) */
  .hauptnav a:not(.schild)::after, .sprachen a::after { background-color: LinkText; }

  /* Filmstreifen: aktives Bild mit doppelt starkem Rahmen in Highlight (Rahmen + innerer Ring),
     uebrige Bilder mit duennem Schaltflaechenrahmen; Fokus als Ring aussen, damit beide Zustaende zugleich sichtbar sind */
  .filmstreifen { padding: 6px 6px 8px; }
  .filmstreifen button { border-color: ButtonText; }
  .filmstreifen button:hover, .filmstreifen button[aria-current="true"] { border-color: Highlight; }
  .filmstreifen button[aria-current="true"]::before { content: ""; position: absolute; inset: 0; border: 3px solid Highlight; pointer-events: none; }
  .filmstreifen button:focus-visible { outline: 3px solid CanvasText; outline-offset: 2px; }
  .filmstreifen button:focus-visible::after { content: none; }

  /* Fotofokus Buehne und Raster: zweifarbig wie im Normalbild, damit der Ring auf hellen und dunklen Bildstellen traegt */
  .slide button:focus-visible, .raster button:focus-visible { outline-color: Highlight; }
  .slide button:focus-visible::after, .raster button:focus-visible::after { border-color: Canvas; }

  /* Auswahlfeld: der dunkle Pfeil (Hintergrundgrafik) verschwindet auf Schwarz, daher System-Pfeil */
  .feld select { appearance: auto; background-image: none; }
  /* Ungueltige Eingabe: die Bordeaux-Unterkante geht verloren, daher kraeftig gestrichelt */
  .feld [aria-invalid="true"] { border-bottom-style: dashed; border-bottom-width: 3px; }
  /* Das System entfernt die Streifen der Baken-Baender: kein Lauf, kein Schalter */
  .baken::before { animation: none !important; }
  .bewegung-knopf { display: none; }
  /* Symbole in der Kontakt-Tafel: festes Bordeaux waere auf Schwarz nur 2:1, daher Farbe des Links */
  .kontakt-tafel dd svg { color: inherit; }

  @media (max-width: 1279px) {
    /* Menue: Unterkante trennt das offene Menue vom Inhalt (aktive Seite ist schon unterstrichen) */
    .hauptnav { border-bottom: 2px solid CanvasText; }
  }
}