/* ============================================================
   Jens Böttcher Hydraulik – Stylesheet (Grundgerüst)
   Struktur: Tokens -> Base -> Layout -> Komponenten
   ============================================================ */

/* --- Design-Tokens (CI-Farben, bitte final abstimmen) --- */
:root {
    --color-primary: #d52889;   /* aus altem theme-color */
    --color-dark:    #1a1a1a;
    --color-text:    #2a2a2a;
    --color-muted:   #666;
    --color-bg:      #fff;
    --color-bg-alt:  #f5f5f7;
    --maxw:          1160px;
    --gap:           1.5rem;
    --radius:        8px;
    --font:          system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* --- Base --- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--font); color: var(--color-text); line-height: 1.6; }
h1, h2, h3 { line-height: 1.2; color: var(--color-dark); }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }

/* --- Layout --- */
.container { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gap); }
.site-main { min-height: 50vh; }

/* --- Header / Nav --- */
.site-header { background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.08); position: sticky; top: 0; z-index: 100; }
.header-inner { max-width: 1320px; margin-inline: auto; display: flex; align-items: stretch; justify-content: space-between; gap: 1rem; }
.logo { display: flex; align-items: center; padding: .5rem var(--gap); }
.logo img { height: 56px; width: auto; }

/* Button-Navigation (dunkle Blöcke, aktiv = magenta) wie Alt-Site */
.nav-toggle { display: none; }
.main-nav { display: flex; }
.main-nav > ul { display: flex; align-items: stretch; list-style: none; margin: 0; padding: 0; }
.main-nav > ul > li { position: relative; display: flex; }
.main-nav > ul > li > a { display: flex; align-items: center; gap: .4rem; padding: 0 1.1rem; background: #3a3a3a; color: #fff; font-weight: 500; border-left: 1px solid rgba(255,255,255,.12); }
.main-nav > ul > li > a:hover { background: #4a4a4a; text-decoration: none; }
.main-nav > ul > li.is-current > a,
.main-nav > ul > li > a[aria-current="page"] { background: var(--color-primary); color: #fff; }
.main-nav .caret { font-size: .7em; line-height: 1; }
.main-nav .submenu { position: absolute; top: 100%; left: 0; min-width: 250px; background: #fff; border: 1px solid #eee; box-shadow: 0 8px 24px rgba(0,0,0,.14); list-style: none; margin: 0; padding: .3rem 0; display: none; z-index: 120; }
.main-nav .submenu a { display: block; padding: .55rem 1.1rem; color: var(--color-text); white-space: nowrap; }
.main-nav .submenu a:hover { background: var(--color-bg-alt); text-decoration: none; }
.main-nav .submenu a[aria-current="page"] { color: var(--color-primary); font-weight: 700; }
.submenu-toggle { display: none; background: none; border: 0; cursor: pointer; font-size: 1rem; color: inherit; padding: 0 .3rem; }
@media (min-width: 901px) {
    .main-nav .has-children:hover .submenu,
    .main-nav .has-children:focus-within .submenu { display: block; }
}

/* --- Zweispaltiges Inhalts-Layout (Content + Sidebar) wie Alt-Site --- */
.page-layout { display: grid; grid-template-columns: 1fr 320px; gap: 2.5rem; align-items: start; padding-block: 2.5rem; }
.page-content { min-width: 0; }
.page-title { font-size: clamp(1.6rem, 3vw, 2.1rem); padding-bottom: .6rem; border-bottom: 3px solid var(--color-primary); margin: 0 0 1.4rem; }
.page-content h2 { margin-top: 2rem; }
.content-list { padding-left: 1.2rem; }
.content-list li { margin: .3rem 0; }
.page-content .breadcrumb { margin-bottom: 1rem; }

/* Sidebar */
.page-sidebar { display: grid; gap: 1.5rem; position: sticky; top: 90px; }
.sidebar-box { background: var(--color-bg-alt); border-radius: var(--radius); padding: 1.3rem; }
.sidebar-box h2 { margin: 0 0 .6rem; font-size: 1.4rem; }
.sidebar-contact { font-size: 1.05rem; }
.sidebar-cta { margin-top: .6rem; }
.quality-badge { width: 100%; max-width: 220px; height: auto; }

/* --- Hero --- */
.hero { background: var(--color-bg-alt); padding-block: 4rem; }
.hero-kicker { text-transform: uppercase; letter-spacing: .05em; color: var(--color-muted); margin: 0 0 .5rem; }
.hero h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin: 0 0 1rem; }
.hero-lead { font-size: 1.2rem; max-width: 60ch; }

/* --- Buttons --- */
.btn { display: inline-block; padding: .8rem 1.6rem; border-radius: var(--radius); font-weight: 700; }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { text-decoration: none; opacity: .9; }
.btn:disabled { background: #c8c8cc; color: #fff; cursor: default; opacity: 1; }

/* --- Karten-Grid (Leistungen / News) --- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--gap); }
.card { display: block; padding: 1.5rem; background: #fff; border: 1px solid #eee; border-radius: var(--radius); color: inherit; transition: box-shadow .2s; }
.card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.08); text-decoration: none; }
.card h3 { margin-top: .3rem; }

/* --- Sektionen --- */
section { padding-block: 3rem; }
.page-header { background: var(--color-bg-alt); }
.breadcrumb { color: var(--color-muted); font-size: .9rem; margin-bottom: .5rem; }

/* --- Footer --- */
.site-footer { background: var(--color-dark); color: #ddd; padding-block: 3rem 1rem; margin-top: 4rem; }
.site-footer a { color: #fff; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; }
.footer-col h3 { color: #fff; }
.footer-col ul { list-style: none; padding: 0; }
/* Social-Profile im Footer (Icons als Inline-SVG, wie auf der Alt-Site) */
.footer-social { display: flex; gap: 1rem; margin-top: 1rem; }
.footer-social a { display: inline-flex; align-items: center; justify-content: center;
                   width: 40px; height: 40px; border-radius: 50%; color: #fff;
                   background: rgba(255,255,255,.10); transition: background .2s, color .2s; }
.footer-social a:hover { background: var(--color-primary); color: #fff; text-decoration: none; }
.footer-bottom { border-top: 1px solid #444; margin-top: 2rem; padding-top: 1rem; font-size: .85rem; color: #999; }

/* --- Leistungs-Detailseite --- */
.leistung-hero { display: block; width: 100%; height: auto; border-radius: var(--radius); margin: 1.5rem 0; }
.sub-list { columns: 2; gap: 2rem; }
.cta-inline { margin-top: 2rem; }

/* --- FAQ (FAQPage-Schema wird zusaetzlich als JSON-LD ausgegeben) --- */
.faq { background: var(--color-bg-alt); }
.faq-item { background: #fff; border: 1px solid #eee; border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: .75rem; }
.faq-item summary { font-weight: 600; cursor: pointer; }
.faq-item[open] summary { margin-bottom: .5rem; }

/* --- Über uns: Bereichs-Kacheln (Entwicklung/Handel/Produktion/Karriere) --- */
/* 280px -> im Content neben der Sidebar ergibt das ein sauberes 2x2-Raster,
   auf voller Breite 3-4 Spalten, mobil einspaltig (min(…,100%) gegen Ueberlauf) */
.about-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
              gap: 1rem; margin: 1.2rem 0 2rem; }
.about-card { padding: 0; overflow: hidden; min-width: 0; }
.about-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.about-card-body { padding: 1rem 1.1rem 1.2rem; }
.about-card-body h3 { margin: 0 0 .35rem; }
.about-card-body p { margin: 0; font-size: .92rem; color: var(--color-muted); }

/* --- Stellenangebote (Karriere) – ausklappbar wie auf der Alt-Site --- */
.job-item { background: #fff; border: 1px solid #e2e2e6; border-radius: var(--radius);
            padding: 1rem 1.25rem; margin-bottom: .85rem; }
.job-item summary { font-weight: 700; font-size: 1.1rem; cursor: pointer;
                    color: var(--color-primary); }
.job-item summary:hover { text-decoration: underline; }
.job-item[open] { border-color: #d7d7dd; box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.job-item[open] summary { margin-bottom: .75rem; }
.job-body h3 { margin: 1.1rem 0 .35rem; font-size: 1.02rem; }
.job-apply { margin-top: 1.2rem; padding-top: .9rem; border-top: 1px solid #eee; }

/* --- Kontaktformular --- */
.contact-form { display: grid; gap: 1rem; max-width: 40rem; margin-top: 1.5rem; }
.contact-form label { display: grid; gap: .35rem; font-weight: 600; }
.contact-form input, .contact-form textarea { padding: .6rem .7rem; border: 1px solid #ccc; border-radius: var(--radius); font: inherit; }
.contact-form .checkbox { grid-auto-flow: column; justify-content: start; align-items: center; gap: .5rem; font-weight: 400; }
.contact-form button { justify-self: start; }
/* Honeypot: fuer echte Nutzer komplett unsichtbar, fuer Bots im DOM sichtbar */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Formular-Meldungen --- */
.form-msg { padding: .9rem 1.1rem; border-radius: var(--radius); margin: 1rem 0; }
.form-ok  { background: #e7f6ec; border: 1px solid #b7e3c4; color: #1c6b3a; }
.form-err { background: #fdecec; border: 1px solid #f4c2c2; color: #a12525; }

/* --- Bildergalerie (Original-Fotos der Alt-Site) --- */
.gallery-section { background: var(--color-bg-alt); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem .75rem; }
/* Jede Kachel ist eine <figure>: Bild + Bildunterschrift.
   min-width:0 verhindert den Grid-Ueberlauf (min-width:auto der Grid-Items). */
.gallery-figure { margin: 0; min-width: 0; display: flex; flex-direction: column; }
.gallery-item { display: block; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: #ddd; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-caption { margin-top: .4rem; font-size: .85rem; line-height: 1.35;
                   color: var(--color-muted); overflow-wrap: break-word; hyphens: auto; }

/* --- Hersteller-Logos (Ersatzteile) --- */
/* --- Hersteller-Logos (Ersatzteile) – Raster mit Karten wie auf der Alt-Site ---
   Original: 4 Spalten, quadratische weisse Karten mit dünnem Rahmen und
   abgerundeten Ecken, Logos FARBIG (kein Graustufen-Filter). */
/* Spaltenzahl ergibt sich aus der VERFUEGBAREN Breite (auto-fill), nicht aus
   Viewport-Breakpoints -> passt auch im schmalen Content neben der Sidebar und
   im einspaltigen Mobil-Layout. minmax(min(150px,100%), 1fr) verhindert zudem
   den klassischen Grid-Ueberlauf durch min-width:auto der Grid-Items. */
.brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
              gap: 1.1rem; margin: 1.5rem 0 2rem; }
.brand-card { display: flex; align-items: center; justify-content: center; margin: 0;
              min-width: 0; aspect-ratio: 1 / 1; padding: .8rem; background: #fff;
              border: 1px solid #e2e2e6; border-radius: 12px; overflow: hidden;
              transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease; }
.brand-card:hover { border-color: #d0d0d6; box-shadow: 0 6px 18px rgba(0,0,0,.09); transform: translateY(-2px); }
/* WICHTIG - Bild NICHT auf width/height:100% setzen:
   WebKit/Safari rechnet dann mit aspect-ratio der Karte zirkulaer und leitet die
   Kartengroesse aus der intrinsischen Bildgroesse (300px) ab. Ergebnis waren
   202x230-Karten, die aus dem Content-Bereich in die Sidebar liefen und den
   Folgetext ueberlappten (gemeldet 03.08.2026). Mit max-* + auto bleibt die
   Karte massgebend. */
.brand-card img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

/* --- Hero-Slider (Startseite) --- */
.hero-slider { position: relative; overflow: hidden; background: #111; }
.hero-slider .slides { position: relative; height: clamp(360px, 46vw, 600px); }
/* Inaktive Slides liegen deckungsgleich uebereinander. Ohne visibility/pointer-events
   bleiben sie trotz opacity:0 klickbar und der letzte Slide im DOM faengt JEDEN Klick
   auf "Mehr erfahren" ab (Bug bis 14.08.2026: alles landete auf /karriere).
   visibility:hidden nimmt sie zusaetzlich aus Tab-Reihenfolge und Screenreader. */
.slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .8s ease, visibility 0s linear .8s; display: flex; align-items: center; }
.slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .8s ease, visibility 0s linear 0s; }
.slide::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.6), rgba(0,0,0,.15)); }
.slide-caption { position: relative; color: #fff; }
.slide-caption .hero-kicker { color: #fff; opacity: .9; }
.slide-caption h2 { font-size: clamp(1.8rem, 4vw, 3rem); margin: .2rem 0 1rem; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.slider-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,.4); color: #fff; border: 0; font-size: 2rem; width: 44px; height: 64px; cursor: pointer; }
.slider-btn:hover { background: rgba(0,0,0,.65); }
.slider-prev { left: 0; } .slider-next { right: 0; }
.slider-dots { position: absolute; bottom: 14px; left: 0; right: 0; display: flex; justify-content: center; gap: .5rem; }
.slider-dots .dot { width: 12px; height: 12px; border-radius: 50%; border: 0; background: rgba(255,255,255,.5); cursor: pointer; }
.slider-dots .dot.is-active { background: var(--color-primary); }

/* --- Intro (Startseite) --- */
.intro { padding-block: 3rem; }
.intro h1 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
.intro .lead { font-size: 1.15rem; }

/* --- Bildkacheln (Handel/Produktion/Kontakt/Karriere) --- */
.tiles { padding-bottom: 3rem; }
.tile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.tile { position: relative; display: block; border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 2; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.tile:hover img { transform: scale(1.06); }
.tile-label { position: absolute; left: 0; right: 0; bottom: 0; padding: .6rem 1rem; background: linear-gradient(transparent, rgba(0,0,0,.75)); color: #fff; font-weight: 700; font-size: 1.15rem; }

/* --- News-Karten mit Bild (Startseite) --- */
.news-card { padding: 0; overflow: hidden; }
.news-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.news-card-body { padding: 1.2rem; }
.news-card time { color: var(--color-muted); font-size: .85rem; }

/* --- Neuigkeiten-Seite --- */
.news-post { display: grid; grid-template-columns: 240px 1fr; gap: 1.5rem; padding: 1.5rem 0; border-top: 1px solid #eee; }
.news-post-figure { margin: 0; min-width: 0; }
.news-post-img { width: 100%; border-radius: var(--radius); object-fit: cover; display: block; }
.news-post-caption { margin-top: .4rem; font-size: .85rem; line-height: 1.35; color: var(--color-muted); }
.news-post time { color: var(--color-muted); font-size: .85rem; }

/* --- Sidebar: WhatsApp + Kundenstimmen --- */
.btn-whatsapp { background: #25d366; color: #fff; display: inline-flex; align-items: center; gap: .5rem; }
.btn-whatsapp:hover { background: #1eb457; text-decoration: none; }
.sidebar-whatsapp-lead { margin-bottom: .4rem; font-weight: 600; }
.sidebar-reviews .stars { color: #f5b301; letter-spacing: 1px; }
.reviews-rating { font-size: 1.05rem; }
.reviews-names { list-style: none; padding: 0; margin: .3rem 0; color: var(--color-muted); }
.reviews-link { font-size: .9rem; }
/* Kundenstimme (statisch gepflegt, pro Aufruf zufaellig ausgewaehlt) */
.review-quote { margin: .8rem 0; padding-left: .9rem; border-left: 3px solid var(--color-primary); }
.review-quote blockquote { margin: 0; font-style: italic; }
.review-quote figcaption { margin-top: .45rem; font-size: .88rem; color: var(--color-muted); }
.review-quote .review-author { font-weight: 600; color: var(--color-text); font-style: normal; }
.reviews-disclosure { margin: .7rem 0 0; font-size: .78rem; line-height: 1.45; color: var(--color-muted); }

/* --- Rechtsseiten / einfache Inhaltsseiten --- */
.legal-page { padding-block: 2.5rem; max-width: 900px; }
.legal-page h2 { margin-top: 2rem; }
/* --- Zwei-Klick-Consent fuer externe Inhalte (Google Maps) ---
   ACHTUNG - Klassen NICHT in "consent-*" zurueckbenennen!
   Fanboy's Cookiemonster-Liste (uBlock Origin, AdGuard, Ghostery, Brave, Safari-
   Blocker) enthaelt die generische Regel  ##.consent-bar  . Sie versteckt JEDES
   Element mit dieser Klasse per display:none !important - unabhaengig von der
   Domain. Am 02.08.2026 war deshalb der Widerruf-Button unsichtbar, obwohl er im
   DOM stand. Praefix "extc-" (external content) kommt in keiner Filterliste vor.
   Die data-consent-* Attribute sind unkritisch (Cosmetic Filter zielen auf
   Klassen/IDs) und behalten ihre sprechende Bedeutung. */
.extc-box { margin: 1rem 0 1.5rem; }
.extc-placeholder { background: var(--color-bg-alt); border: 1px solid #e3e3e8; border-radius: var(--radius); padding: 1.8rem 1.5rem; text-align: center; }
.extc-placeholder .extc-title { margin-top: 0; }
.extc-placeholder p { max-width: 62ch; margin-inline: auto; }
.extc-actions { margin: 1.3rem 0 .7rem; }
.extc-remember { font-size: .88rem; color: var(--color-muted); }
.extc-remember label { display: inline-flex; align-items: flex-start; gap: .45rem; text-align: left; cursor: pointer; }
.extc-alt, .extc-hint { font-size: .88rem; color: var(--color-muted); }
.extc-frame { border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; line-height: 0; }
.extc-frame iframe { display: block; width: 100%; border: 0; }
/* Widerruf-Leiste unter der Karte: deutlich sichtbar, nicht als grauer Mini-Link */
.extc-bar { display: flex; flex-wrap: wrap; gap: .8rem 1rem; align-items: center; justify-content: space-between;
               background: var(--color-bg-alt); border: 1px solid #e3e3e8; border-top: 0;
               border-radius: 0 0 var(--radius) var(--radius); padding: .7rem 1rem; font-size: .9rem; }
.extc-bar-info { color: var(--color-muted); }
.btn-revoke { font: inherit; font-weight: 600; color: var(--color-primary); background: #fff;
              border: 1px solid var(--color-primary); border-radius: var(--radius);
              padding: .45rem 1rem; cursor: pointer; white-space: nowrap; }
.btn-revoke:hover { background: var(--color-primary); color: #fff; }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--color-primary); text-decoration: underline; cursor: pointer; }
.link-button:disabled { color: var(--color-muted); cursor: default; text-decoration: none; }
.extc-status { font-weight: 700; color: var(--color-muted); }
.extc-status.is-granted { color: var(--color-primary); }
.extc-revoked-note { background: var(--color-bg-alt); border-left: 3px solid var(--color-primary); padding: .7rem 1rem; font-size: .9rem; }

/* --- Zeitstrahl Firmengeschichte (v1.3, 2026-09-02) ---
   1.3: .tl-figure--ganz fuer Dokumentscans (Zeitungsartikel): vollstaendig
        zeigen statt auf 16:9 beschneiden, anklickbar zum Grossansehen.
   1.2: Zitat-Block (.tl-zitat) ergaenzt.
   1.1: Bilderraster (.tl-bilder--raster) fuer mehrere Fotos je Meilenstein;
        .tl-title mit .page-content davor, weil .page-content h2 spezifischer ist.
   1.0: erste Fassung
   Achse steht links, Karten rechts daneben. Bewusst NICHT die uebliche
   zentrierte Achse mit abwechselnd links/rechts versetzten Karten: die
   bricht auf dem Handy in ein anderes Layout um und ist auf jeder zweiten
   Website zu sehen. Links stehende Achse nutzt stattdessen den magentafarbenen
   Balken, den .review-quote und .extc-revoked-note hier schon verwenden,
   und braucht mobil keinen Layoutwechsel. */
.tl-intro { font-size: 1.05rem; color: var(--color-muted); max-width: 62ch; margin: 0 0 2rem; }

.timeline { position: relative; list-style: none; margin: 0 0 2.5rem; padding: 0 0 .5rem 2.5rem; }
/* Achse: oben kraeftig, unten auslaufend - die Geschichte ist nicht zu Ende */
.timeline::before { content: ""; position: absolute; left: 6px; top: .75rem; bottom: 0;
                    width: 2px; background: linear-gradient(var(--color-primary) 75%, #d7d7dd); }

.tl-item { position: relative; margin-bottom: 1.25rem; min-width: 0; }
.tl-item::before { content: ""; position: absolute; left: -2.5rem; top: .8rem; z-index: 1;
                   width: 14px; height: 14px; border-radius: 50%;
                   background: #fff; border: 3px solid var(--color-primary); }

.tl-card { background: #fff; border: 1px solid #eee; border-left: 3px solid var(--color-primary);
           border-radius: var(--radius); padding: 1.1rem 1.3rem 1.2rem; }
.tl-card > p:last-child { margin-bottom: 0; }

.tl-year { margin: 0 0 .15rem; font-size: .82rem; font-weight: 700; letter-spacing: .06em;
           text-transform: uppercase; color: var(--color-primary); }
/* .page-content h2 (Z. 62) setzt margin-top:2rem und ist spezifischer als eine
   reine Klasse - deshalb hier mit .page-content davor, sonst reisst zwischen
   Jahreszahl und Ueberschrift eine Luecke auf. */
.page-content .tl-title { margin: 0 0 .6rem; font-size: 1.12rem; }

/* Zitat im Zeitstrahl – gleiches Motiv wie .review-quote, nur etwas ruhiger,
   damit es neben der magentafarbenen Kartenkante nicht doppelt schreit. */
.tl-zitat { margin: 1.1rem 0 0; padding: .1rem 0 .1rem 1rem;
            border-left: 3px solid #e2e2e6; }
.tl-zitat p { margin: 0; font-style: italic; color: #3a3a3a; }
.tl-zitat cite { display: block; margin-top: .45rem; font-style: normal;
                 font-size: .85rem; font-weight: 700; color: var(--color-muted); }
.tl-zitat cite::before { content: "— "; }

.tl-bilder { margin: 1.1rem 0 0; }
.tl-figure { margin: 0; min-width: 0; }
.tl-figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
                 border-radius: var(--radius); }
.tl-credit { margin: .4rem 0 0; font-size: .78rem; color: var(--color-muted); }

/* Dokumentscan statt Foto (Zeitungsartikel). Ein Beleg darf nicht beschnitten
   werden - bei 16:9 mit cover faellt genau das weg, was ihn zum Beleg macht:
   Ueberschrift oben und Textspalten unten. Deshalb das Seitenverhaeltnis des
   Bildes selbst, heller Grund und ein feiner Rahmen, damit der weisse
   Zeitungsbogen nicht in der weissen Karte verschwimmt. */
.tl-figure--ganz img { aspect-ratio: auto; object-fit: contain; height: auto;
                       background: #fff; border: 1px solid #e2e2e6; }
/* Kleingedrucktes bleibt in Spaltenbreite unlesbar - deshalb ist der Scan ein
   Link auf die Bilddatei. Der Zeiger sagt das an, der Hinweis darunter auch. */
.tl-figure--ganz a { display: block; }
.tl-figure--ganz a:hover img, .tl-figure--ganz a:focus-visible img { border-color: var(--color-primary); }

/* Mehrere Bilder zu einem Meilenstein: nebeneinander statt untereinander,
   sonst schiebt ein Eintrag mit drei Fotos den Rest des Zeitstrahls weg.
   Etwas hoeher als 16:9, weil Handyfotos sonst zu stark beschnitten werden. */
.tl-bilder--raster { display: grid; gap: .5rem;
                     grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
.tl-bilder--raster .tl-figure img { aspect-ratio: 4 / 3; }

/* Ausblick: noch nicht passiert, deshalb offener Punkt und abgesetzter Grund */
.tl-item--future::before { background: var(--color-primary); border-color: #fff;
                           box-shadow: 0 0 0 3px var(--color-primary); }
.tl-item--future .tl-card { background: var(--color-bg-alt); border-color: #e2e2e6;
                            border-left-color: var(--color-primary); }

/* --- Zweispaltig -> einspaltig --- */
@media (max-width: 860px) {
    .page-layout { grid-template-columns: 1fr; }
    .page-sidebar { position: static; }
}

@media (max-width: 640px) {
    .timeline { padding-left: 1.6rem; }
    .timeline::before { left: 4px; }
    .tl-item::before { left: -1.6rem; width: 11px; height: 11px; border-width: 2px; }
    .tl-card { padding: .95rem 1rem 1rem; }
    .tl-title { font-size: 1.05rem; }
}

/* --- Navigation: ab hier als aufklappbares Mobile-Menü --- */
@media (max-width: 900px) {
    .header-inner { align-items: center; padding-block: .3rem; flex-wrap: wrap; }
    .nav-toggle { display: inline-flex; align-items: center; gap: .6rem; margin: .4rem var(--gap) .4rem auto; background: var(--color-dark); color: #fff; border: 0; border-radius: var(--radius); padding: .6rem 1rem; font: inherit; cursor: pointer; }
    .nav-toggle-bar, .nav-toggle-bar::before, .nav-toggle-bar::after { display: block; width: 18px; height: 2px; background: #fff; position: relative; }
    .nav-toggle-bar::before, .nav-toggle-bar::after { content: ""; position: absolute; left: 0; }
    .nav-toggle-bar::before { top: -6px; }
    .nav-toggle-bar::after { top: 6px; }
    /* WICHTIG: .main-nav ist auch mobil ein Flex-Container (Regel oben ohne
       Media Query). Ohne column-Richtung stehen der "Menü"-Button und die
       Liste NEBENEINANDER – der Button wird dann zum hohen schwarzen Block
       links neben dem aufgeklappten Menü (gefunden 03.08.2026). */
    .main-nav { width: 100%; flex-direction: column; }
    .main-nav > ul { display: none; flex-direction: column; width: 100%; }
    .main-nav.is-open > ul { display: flex; }
    .main-nav > ul > li { display: block; border-top: 1px solid rgba(255,255,255,.15); }
    .main-nav > ul > li > a { justify-content: space-between; padding: .9rem var(--gap); border-left: 0; }
    .main-nav .caret { display: none; }
    /* Aufklapp-Pfeil: eigenes, grosszuegiges Tippziel (>= 48 px, Apple/Google
       empfehlen mind. 44 px). Vorher war es ein 1rem-Zeichen mit .3rem Padding
       -> auf dem Handy kaum zu treffen.
       KEIN height:100%: Bezugsrahmen ist das <li>, das bei geoeffnetem
       Untermenue viel hoeher ist – der Pfeil saesse dann mittendrin statt
       neben dem Menuetitel. Feste Hoehe = Hoehe des Links. */
    .submenu-toggle { display: inline-flex; align-items: center; justify-content: center;
                      position: absolute; right: 0; top: 0; width: 3.4rem; height: 3.4rem;
                      min-height: 48px; font-size: 1.6rem; line-height: 1; color: #fff;
                      padding: 0; z-index: 2; transition: transform .2s ease; }
    .submenu-toggle:hover, .submenu-toggle:focus-visible { background: rgba(255,255,255,.10); }
    /* Pfeil dreht sich, wenn das Untermenue offen ist – zeigt den Zustand */
    .has-children.open > .submenu-toggle { transform: rotate(180deg); }
    /* Platz fuer den Pfeil, damit lange Menuetitel nicht darunter laufen */
    .main-nav .has-children > a { padding-right: 3.6rem; }
    .main-nav .submenu { position: static; display: none; box-shadow: none; border: 0; padding: 0; min-width: 0; background: #2c2c2c; }
    .main-nav .submenu a { color: #eee; padding-left: 2.2rem; }
    .main-nav .has-children.open .submenu { display: block; }
}

/* --- Startseiten-Komponenten responsiv --- */
@media (max-width: 780px) {
    .tile-grid { grid-template-columns: repeat(2, 1fr); }
    .news-post { grid-template-columns: 1fr; }
}

/* --- Kleinstbildschirme --- */
@media (max-width: 640px) {
    .sub-list { columns: 1; }
    .logo img { height: 46px; }
}