/* Corporate Identity RealFloat AG
   Helles Theme: Navy (Primary) + Gold (Accent), Optik angelehnt an die Onepager. */
:root {
    /* Primärfarben */
    --primary: #0B1F3B;
    --on-primary: #F8FAFC;
    --secondary: #4B647A;
    --accent: #C8A24A;
    --accent-hover: #B08D3B;
    --on-accent: #0B1F3B;

    /* Neutralfarben */
    --text: #0F172A;
    --text-muted: #64748B;
    --bg: #F8FAFC;
    --bg-alt: #F1F5F9;
    --surface: #FFFFFF;       /* Karten, Panels, Formularfelder */
    --bg-hover: #FAFBFC;      /* Hover-Fläche auf hellem Grund */
    --border: #E2E8F0;
    --border-aktiv: #C8D2E0;  /* Rahmen geöffneter/aktiver Elemente */

    /* Semantic */
    --success: #4ADE80;
    --error: #F87171;
    --on-semantic: #0F172A;
    --error-text: #B91C1C;    /* Fehlermeldungen als Text auf hellem Grund */
    --diagramm-blau: #2E5C9E; /* Lebenszyklus-Diagramm: bleibende Mechanik */
    --on-primary-muted: rgba(248, 250, 252, 0.72); /* Nebentext auf Navy (Hero, Footer) */

    --radius: 2px;

    /* Hero-Ueberschrift: vertikaler Abstand von der Hero-Box-Oberkante bis
       zur Ueberschrift - EINHEITLICH fuer alle Seiten mit .hero (Start,
       Neuanlagen, Bestandsanlagen, Engineering-Service, ...), damit die
       Ueberschrift auf jedem Tab auf derselben Hoehe sitzt. Getrennt
       einstellbar fuer Desktop und Mobil (Mobil-Wert greift unten in der
       Media Query). Unabhaengig vom Slider auf der Startseite - dessen
       eigene Position steuern POSITION_X/POSITION_Y in slider.js, siehe
       Kommentar dort zur bewussten Trennung (align-items: start). */
    --hero-titel-abstand-oben: 4rem;
    --hero-titel-abstand-oben-mobil: 2.5rem;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Scrollbar-Platz immer reservieren: Auf langen Seiten (mit Scrollbar) und
   kurzen Seiten (ohne) bleibt die Layoutbreite identisch. Verhindert, dass
   die zentrierte .container - und damit Kopf-/Fussleiste - horizontal
   springt, je nachdem ob eine Scrollbar erscheint. */
html {
    scrollbar-gutter: stable;
}

/* Grundschrift auf dem Desktop 10 % grösser (17,6 px statt 16 px): alle
   rem-Masse wachsen mit, Pixelbreiten (Container, Raster, Icons) nicht.
   Auf dem Handy bleibt es bei 16 px, dort füllt der Text den Bildschirm
   ohnehin aus. Breakpoint wie .desktop-break. Die Vorschau-Vorlagen im
   Redaktionsskill setzen denselben Wert, damit Vorschau und Seite gleich
   umbrechen. */
@media (min-width: 721px) {
    html {
        font-size: 110%;
    }
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

a {
    color: var(--secondary);
}

/* Header / Nav */
.site-header {
    background: var(--primary);
    border-top: 4px solid var(--accent);
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.brand {
    display: block;
    text-decoration: none;
}

.brand-logo {
    display: block;
    height: 48px;
    width: auto;
}

.nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    list-style: none;
}

.nav-links a {
    color: var(--on-primary-muted);
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.15s;
}

.nav-links a:hover {
    color: var(--on-primary);
}

.nav-links a[aria-current="page"] {
    color: var(--on-primary);
    border-bottom: 2px solid var(--accent);
    padding-bottom: 2px;
}

/* Burger-Menü (ohne JavaScript, siehe render_head in inc.php): die Checkbox
   #nav-schalter ist unsichtbar, aber per Tastatur erreichbar, das Label ist
   der Knopf. Auf breiten Bildschirmen bleibt beides ausgeblendet. */
.nav-schalter {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.nav-knopf {
    display: none;
}

/* Unterhalb von 900 px passen Logo und sieben Menüpunkte nicht mehr in eine
   Zeile (gemessen: Umbruch bei 855 px, Reserve für andere Schriftarten).
   Dann ersetzt der Knopf das Menü, die Liste klappt bei :checked unter der
   Kopfzeile auf und schiebt den Inhalt nach unten. */
@media (max-width: 900px) {
    .nav-knopf {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        padding: 10px;
        cursor: pointer;
        border-radius: var(--radius);
    }

    .nav-knopf span {
        display: block;
        height: 2px;
        background: var(--on-primary);
        border-radius: 1px;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .nav-schalter:focus-visible + .nav-knopf {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

    /* Drei Striche werden zum X. */
    .nav-schalter:checked + .nav-knopf span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .nav-schalter:checked + .nav-knopf span:nth-child(2) {
        opacity: 0;
    }

    .nav-schalter:checked + .nav-knopf span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .nav-links {
        display: none;
        flex-direction: column;
        gap: 0;
        flex-basis: 100%;
        margin-top: 0.5rem;
        padding: 0.25rem 0 0.5rem;
        border-top: 1px solid rgba(248, 250, 252, 0.15);
    }

    .nav-schalter:checked ~ .nav-links {
        display: flex;
    }

    .nav-links a {
        display: block;
        padding: 0.7rem 0;
        font-size: 1.05rem;
    }

    .nav-links a[aria-current="page"] {
        border-bottom: 0;
        border-left: 3px solid var(--accent);
        padding-left: 0.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-knopf span {
        transition: none;
    }
}

/* Hero (Navy-Panel wie Onepager-Kopf) */
.hero {
    background: var(--primary);
    color: var(--on-primary);
    padding: var(--hero-titel-abstand-oben) 0 4.5rem;
}

@media (max-width: 720px) {
    .hero {
        padding-top: var(--hero-titel-abstand-oben-mobil);
    }
}

.hero h1 {
    /* Grösse so gewählt, dass "Elektro- und Automatisierungstechnik" in der
       ~670px breiten Hero-Textspalte auf EINE Zeile passt; der manuelle
       <br class="desktop-break"> setzt dann die zweite Zeile. */
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.25;
    margin: 0.75rem 0 1rem;
    max-width: 36ch;
}

.hero .lead {
    color: rgba(248, 250, 252, 0.78);
    font-size: 1.1rem;
    max-width: 62ch;
    margin-bottom: 2rem;
}

.hero-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Goldener Akzent ueber der Hero-Ueberschrift. Ersetzt die frueheren
   Eyebrow-Schlagworte, die inhaltlich nur die H1 wiederholt haben. Als
   Pseudo-Element umgesetzt: kein zusaetzliches Markup, gilt automatisch fuer
   jede Hero-Seite. Nimmt das Linien-Motiv auf, das die Seite schon nutzt
   (Header oben, Abschnittstitel links, Karten oben). */
.hero h1::before {
    content: "";
    display: block;
    width: 5rem;
    height: 1px;
    /* Enger Abstand: die Linie soll zur Ueberschrift gehoeren, nicht als
       eigenes Element darueber schweben. */
    margin-bottom: 0.85rem;
    background: var(--accent);
    opacity: 0.75;
}

/* Buttons */
.btn {
    display: inline-block;
    background: var(--accent);
    color: var(--on-accent);
    padding: 0.75rem 1.75rem;
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.btn:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.btn-ghost {
    background: transparent;
    color: var(--text);
    border-color: var(--border);
}

.btn-ghost:hover {
    background: var(--bg-alt);
    border-color: var(--secondary);
}

/* Inhaltssektionen */
.content {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
}

/* Basisgrösse aller Seitentitel (Kontakt, Blog, Impressum, Datenschutz).
   Hero und Blog-Beitrag überschreiben sie weiter unten - alle H1 bleiben
   dadurch in einem gemeinsamen Grössenband statt 32/40/45px zu mischen. */
h1 {
    font-size: 1.9rem;
    line-height: 1.25;
}

/* Manuell gesetzter Zeilenumbruch in Überschriften: greift nur, solange
   genug Breite da ist. Mobil bricht der Titel normal um. */
.desktop-break {
    display: none;
}

@media (min-width: 721px) {
    .desktop-break {
        display: inline;
    }
}

.section-title {
    font-size: 1.5rem;
    border-left: 4px solid var(--accent);
    padding-left: 0.75rem;
    margin-bottom: 0.35rem;
}

.section-hint {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

/* Telefonnummer: tel:-Link (auf dem Handy direkt waehlbar), sieht aber aus
   wie der umgebende Text - neben der ungelinkten E-Mail-Adresse wuerde ein
   unterstrichener Link sonst uneinheitlich wirken. */
.tel-link {
    color: inherit;
    text-decoration: none;
}

/* Karten (Teaser, Leistungen) */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

.card {
    background: var(--surface);
    padding: 1.5rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.card h2,
.card h3 {
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
}

.card p {
    color: var(--text-muted);
    font-size: 0.95rem;
}

.card-link {
    display: inline-block;
    margin-top: 0.9rem;
    color: var(--secondary);
    font-weight: 600;
    text-decoration: none;
}

.card-link:hover {
    color: var(--primary);
    text-decoration: underline;
}

/* Leistungs-Karten mit goldenem Seitenbalken */
.leistungen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}

/* Vierer-Bloecke: fest zweispaltig (oben 2, unten 2), unabhaengig von der
   Containerbreite. Unter 560 px einspaltig. */
.leistungen-2x2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 560px) {
    .leistungen-2x2 {
        grid-template-columns: 1fr;
    }
}

.leistung {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
}

.leistung h3 {
    font-size: 1.05rem;
    margin-bottom: 0.4rem;
}

.leistung p {
    color: var(--text-muted);
    font-size: 0.93rem;
}

/* Blocksatz in den Textkarten: gibt allen Karten eine gleich ruhige rechte
   Kante. Silbentrennung ist dabei Pflicht - deutsche Komposita reissen in
   den schmalen Spalten sonst grosse Luecken auf. Der Browser trennt anhand
   von lang="de" am <html>-Element. */
.card p,
.leistung p {
    text-align: justify;
    -webkit-hyphens: auto;
    hyphens: auto;
}

/* Leistungs-Karten mit Werkzeug-Chips (Engineering-Service). Das
   Flex-Layout drueckt die Chips an den Kartenboden, damit sie ueber alle
   Karten einer Reihe buendig abschliessen, auch bei ungleich langen
   Texten. */
.leistung-mit-chips {
    display: flex;
    flex-direction: column;
}

.leistung-mit-chips p {
    flex-grow: 1;
    margin-bottom: 0.85rem;
}

.leistung-chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.leistung-chips li {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.2rem 0.6rem;
    color: var(--secondary);
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
}

/* "Was wir uebernehmen" (Neuanlagen): Eigen- und Partnerleistungen als
   reine Titel-Karten in zwei Gruppen. Goldener Balken = setzen wir selbst
   um, Navy-Balken = Umsetzung ueber Partner. */
.uebernahme-gruppe {
    margin-top: 2rem;
}

.uebernahme-label {
    color: var(--secondary);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    margin-bottom: 0.85rem;
}

.uebernahme-karten {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.uebernahme-karte {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius);
    padding: 1.4rem 1.5rem;
    font-size: 1.05rem;
}

.uebernahme-karte-partner {
    border-left-color: var(--primary);
}

.uebernahme-abschluss {
    color: var(--text-muted);
    font-size: 0.93rem;
    margin-top: 1.25rem;
}

@media (max-width: 560px) {
    .uebernahme-karten {
        grid-template-columns: 1fr;
    }
}

/* "Ueber uns": Vorstellung mit Portrait (4:5) neben Text. */
.vorstellung {
    /* Gleicher Abstand zum Sektionstitel wie bei der Vision-Sektion, deren
       Unterzeile (Zeile + 1.5rem Abstand) hier bewusst entfaellt. */
    margin-top: 3rem;
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}

.vorstellung-bild {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radius);
}


.vorstellung-text h3 {
    font-size: 1.2rem;
    margin-bottom: 0.15rem;
}

.vorstellung-rolle {
    color: var(--text-muted);
    font-size: 0.93rem;
    margin-bottom: 1rem;
}

/* Mehrere Absaetze in Fliesstext-Bloecken: Abstand nur zwischen den
   Absaetzen (globaler Reset setzt alle Margins auf 0). Volle Containerbreite
   ist hier gewollt - buendig mit Hinweis-Kasten und CTA-Sektion. */
.textabsaetze p + p {
    margin-top: 0.75rem;
}

/* Zwischenueberschriften in langen Fliesstext-Sektionen (Ueber uns: Vision). */
.textabsaetze h3 {
    font-size: 1.1rem;
    margin: 1.75rem 0 0.5rem;
}

.textabsaetze h3:first-child {
    margin-top: 0;
}

/* Hervorgehobener Hinweis im Fliesstext (Ueber uns: Kundendaten).
   Optik wie die .leistung-Kacheln, damit es zum Rest der Seite passt. */
.hinweis-kasten {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    margin-top: 3.5rem;
}

.hinweis-kasten h3 {
    font-size: 1.05rem;
    margin: 0 0 0.4rem;
}

@media (max-width: 720px) {
    .vorstellung {
        grid-template-columns: 1fr;
    }

    .vorstellung-bild {
        max-width: 280px;
    }
}

/* ---------------------------------------------------------------------
   Prozesskette ("Rail"): nummerierte Knoten auf einer durchgehenden
   Linie. Mit Zielpraefix werden die Knoten zu Sprungschaltern auf die
   passende Akkordeon-Phase (siehe render_kette / akkordeon.js).
   Datengetrieben aus PHP - eine Stufe mehr = ein Array-Eintrag mehr.
   --------------------------------------------------------------------- */
.kette {
    position: relative;
    list-style: none;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    /* Abstand oben/unten getrennt einstellbar:
       margin-top    = Luft zum Einleitungstext darueber
       margin-bottom = Luft zur ersten Phasenkachel darunter 
       max-width     = Abstand der Phasenkacheln
       */
    margin-top: 3rem;
    margin-bottom: 3rem;
    max-width: 65rem;
    margin-left: auto;
    margin-right: auto;
    padding: 0 4px;
}

/* Verbindungslinie als Segmente: jedes Glied ab dem zweiten zeichnet die
   Strecke von der Mitte des vorigen Knotens zur eigenen Mitte (Glied-Breite
   = eine Spalte). Trifft dadurch immer exakt Knoten 1 bis N, unabhaengig von
   der Knotenzahl. Die Enden liegen hinter den Kreisen und werden verdeckt. */
.kette-glied + .kette-glied::before {
    content: "";
    position: absolute;
    top: 22px;            /* Mitte des 44px-Knotens */
    left: -50%;
    width: 100%;
    height: 1px;
    background: var(--accent);
    opacity: 0.55;
}

.kette-glied {
    position: relative;
    text-align: center;
    padding: 0 0.4rem;
}

.kette-knoten {
    display: grid;
    place-items: center;
    /* ueber die Verbindungslinie legen (sie ist absolut positioniert und
       laege sonst vor dem Kreis). */
    position: relative;
    z-index: 1;
    width: 44px;
    height: 44px;
    margin: 0 auto 0.6rem;
    border-radius: var(--radius);
    background: var(--primary);
    border: 2px solid var(--accent);
    color: var(--on-primary);
    font-size: 1rem;
    font-weight: 600;
    transition: background 0.18s ease, color 0.18s ease;
}

.kette-name {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: 0.5rem;
}

/* Knoten als Sprungschalter: die Kette wird zum Inhaltsverzeichnis. */
.kette-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.kette-link:hover .kette-knoten,
.kette-link:focus-visible .kette-knoten,
.kette-glied-aktiv .kette-knoten {
    background: var(--accent);
    color: var(--on-accent);
}

.kette-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
    border-radius: var(--radius);
}

.kette-chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.3rem;
}

.kette-chip {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.2rem 0.6rem;
    color: var(--text-muted);
    font-size: 0.8rem;
    white-space: nowrap;
}

/* Schmale Viewports: acht Glieder passen nicht nebeneinander. Statt die
   Kette waagerecht scrollbar zu machen, wird sie ausgeblendet. Kein
   Informationsverlust: das Akkordeon darunter nennt alle acht Phasen mit
   Nummer und Namen (gleiche Logik wie die Skala des Lebensdauer-Diagramms). */
@media (max-width: 820px) {
    .kette {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kette-knoten {
        transition: none;
    }
}

/* ---------------------------------------------------------------------
   Akkordeon: aufklappbare Projektphasen. Basis ist das native <details>,
   damit die Inhalte auch ohne JavaScript zugaenglich bleiben; akkordeon.js
   ergaenzt lediglich die weiche Auf- und Zuklapp-Animation.
   Datengetrieben ueber render_akkordeon() in inc.php.
   --------------------------------------------------------------------- */
.akkordeon {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.akkordeon-phase {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    /* Beim Sprung aus der Prozesskette etwas Luft nach oben lassen. */
    scroll-margin-top: 1.5rem;
}

.akkordeon-phase[open] {
    border-color: var(--border-aktiv);
}

.akkordeon-phase summary {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    /* Standard-Dreieck des Browsers abschalten - rechts steht ein eigener
       Chevron (::after). */
    list-style: none;
}

.akkordeon-phase summary::-webkit-details-marker {
    display: none;
}

.akkordeon-phase summary:hover {
    background: var(--bg-hover);
}

.akkordeon-phase summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.akkordeon-nummer {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: var(--radius);
    background: var(--primary);
    color: var(--on-primary);
    font-size: 0.875rem;
    font-weight: 600;
}

/* Aufgeklappte Phase: Nummer wechselt auf Gold - dieselbe Sprache wie der
   aktive Knoten in der Prozesskette. */
.akkordeon-phase[open] .akkordeon-nummer {
    background: var(--accent);
    color: var(--on-accent);
}

.akkordeon-titelblock {
    flex: 1;
    min-width: 0;
}

.akkordeon-titel {
    display: block;
    font-size: 1.06rem;
    font-weight: 600;
}

.akkordeon-unter {
    display: block;
    color: var(--text-muted);
    font-size: 0.875rem;
    font-weight: 400;
}

/* Chevron rechts: aus zwei Rahmenkanten gezeichnet, dreht beim Aufklappen. */
.akkordeon-phase summary::after {
    content: "";
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: -6px;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(45deg);
    transition: transform 0.22s ease;
}

.akkordeon-phase[open] summary::after {
    margin-top: 4px;
    transform: rotate(-135deg);
}

/* Zweispaltiger Inhalt: links der Ablauf, rechts das Beispiel. Der linke
   Einzug haelt die Flucht zur Ueberschrift neben dem Nummernkreis. */
.akkordeon-inhalt {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    padding: 1.5rem 1.5rem 1.75rem 4.75rem;
    border-top: 1px solid var(--border);
}

.akkordeon-label {
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    margin: 0 0 0.6rem;
}

.akkordeon-beispiel {
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.akkordeon-beispiel:last-child {
    margin-bottom: 0;
}

.akkordeon-ablauf ul {
    margin: 0;
    padding-left: 1.15rem;
    font-size: 0.94rem;
}

.akkordeon-ablauf li {
    margin-bottom: 0.4rem;
}

.akkordeon-ablauf ul ul {
    margin: 0.4rem 0 0;
    padding-left: 1.15rem;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.akkordeon-ablauf ul ul li {
    margin-bottom: 0.25rem;
}

.akkordeon-hinweis {
    grid-column: 1 / -1;
    margin: 0;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.875rem;
    font-style: italic;
}

/* Abschluss unter dem Akkordeon: eigener Kachel-Look, duenner Goldrand
   rundum statt der Akzentleiste, Text links und Button rechts in einer
   Zeile. Unter 720px reicht die Breite nicht mehr fuer die Zeile - dort
   rutscht der Button unter den Text. */
.akkordeon-abschluss {
    margin-top: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    background: var(--surface);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    padding: 1.5rem 1.75rem;
}

.akkordeon-abschluss-text h3 {
    margin-bottom: 0.35rem;
}

.akkordeon-abschluss-text p {
    color: var(--text-muted);
    font-size: 0.95rem;
}

.akkordeon-abschluss .btn {
    flex: none;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .akkordeon-abschluss {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 820px) {
    .akkordeon-inhalt {
        grid-template-columns: 1fr;
        gap: 1.75rem;
        padding: 1.25rem;
    }

    .akkordeon-phase summary {
        padding: 1rem 1.1rem;
        gap: 0.875rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .akkordeon-phase summary::after {
        transition: none;
    }
}

/* CTA-Sektion (Navy-Panel) */
.cta-sektion {
    background: var(--primary);
    border-radius: var(--radius);
    border-top: 4px solid var(--accent);
    color: var(--on-primary);
    text-align: center;
    padding: 2.5rem 1.5rem;
}

.cta-sektion h2 {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
}

.cta-sektion p {
    color: rgba(248, 250, 252, 0.75);
    margin-bottom: 1.5rem;
}

/* Referenz-Kacheln */
.ref-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.ref-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ref-bild {
    display: block;
    width: 100%;
    height: 170px;
    object-fit: cover;
}

.ref-bild-platzhalter {
    background: linear-gradient(135deg, rgba(11, 31, 59, 0.14), rgba(200, 162, 74, 0.14));
}

.ref-inhalt {
    padding: 1.25rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.ref-badge {
    align-self: flex-start;
    padding: 0.15rem 0.6rem;
    border-radius: var(--radius);
    font-size: 0.75rem;
    font-weight: 700;
}

.ref-badge-gruen {
    background: var(--success);
    color: var(--on-semantic);
}

.ref-badge-grau {
    background: var(--bg-alt);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.ref-projekt {
    font-size: 1.15rem;
    margin-top: 0.35rem;
}

/* Referenzen: Titel und Kunde bilden einen Block (.ref-kopf), die Trennlinie
   sitzt unter dem Block. So steht der Kunde immer direkt unter dem Titel,
   und bei einem kürzeren Titel bleibt der Leerraum zwischen Kunde und Linie.
   Blog-Kacheln haben keinen Kopfblock und keine Linie. */
.ref-kopf {
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.ref-kunde {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.ref-kopf .ref-kunde {
    margin-top: 0.35rem;
}

.ref-beschreibung {
    color: var(--text-muted);
    font-size: 0.92rem;
    margin-top: 0.4rem;
    /* Ausgewogenere Zeilen, keine einzelnen Wörter in der letzten Zeile
       (Browser ohne Unterstützung ignorieren die Angabe). */
    text-wrap: pretty;
}

/* Kacheln einer Reihe aneinander ausrichten: Bild, Badge (Blog: Datum),
   Titel, Kunde (Blog: Teaser) und Text liegen je auf einer gemeinsamen Zeile
   des Rasters (Subgrid). Jede Zeile wird so hoch wie ihr höchster Eintrag,
   dadurch stehen Trennlinie und Textbeginn in allen Kacheln auf gleicher
   Höhe, egal ob ein Titel eine oder zwei Zeilen hat. Referenzen: vier Zeilen
   je Kachel (Bild, Badge, Kopfblock mit Titel und Kunde, Text). Blog: fünf
   (Bild, Datum, Titel, Teaser, Link). Browser ohne Subgrid zeigen die
   Kacheln wie bisher (Flex-Spalte, Linien auf verschiedener Höhe). */
@supports (grid-template-rows: subgrid) {
    .ref-card {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 4;
        row-gap: 0;
    }

    .ref-inhalt {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 3;
        row-gap: 0.35rem;
    }

    .blog-karte {
        grid-row: span 5;
    }

    .blog-karte .ref-inhalt {
        grid-row: span 4;
    }

    /* Grid-Elemente dehnen sich sonst auf die volle Breite. */
    .ref-badge,
    .card-link {
        justify-self: start;
    }
}

/* Von typografie() in inc.php gesetzt: Bindestrich-Wörter wie S7-1500 oder
   ATEX-Vorgaben nicht am Bindestrich trennen. */
.nowrap {
    white-space: nowrap;
}

/* Lebenszyklus-Diagramm (Intervall-Balken, Jahre 0-50) */
.lz-diagramm {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2.5rem 2rem 2rem;
    /* Volle Inhaltsbreite wie die Karten darunter (vorher max-width 840px),
       dazu etwas mehr Höhe (Innenabstand, Zeilenabstand, Balken 18 px), damit
       die breite Karte nicht flach wirkt (Balken 16 px). */
}

.lz-zeile {
    display: grid;
    grid-template-columns: 105px 1fr 105px;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 2rem;
}

.lz-label {
    font-size: 0.9rem;
    font-weight: 600;
}

.lz-spur {
    position: relative;
    height: 16px;
    background: var(--bg-alt);
    border-radius: var(--radius);
}

.lz-balken {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: var(--radius);
    background: var(--accent); /* wird im Retrofit erneuert */
}

.lz-balken-bleibt {
    background: var(--diagramm-blau); /* langlebige Mechanik, bleibt im Einsatz */
}

.lz-wert {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-align: right;
    white-space: nowrap;
}

.lz-achse {
    display: flex;
    justify-content: space-between;
    grid-column: 2;
    margin: 0.2rem 0 0;
    padding: 0 2px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.lz-achse-zeile {
    display: grid;
    grid-template-columns: 105px 1fr 105px;
    gap: 0.9rem;
}

.lz-legende {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 1.5rem;
    margin-top: 1rem;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.lz-legende span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.lz-punkt {
    width: 12px;
    height: 12px;
    border-radius: var(--radius);
    flex: none;
}

.lz-quelle {
    margin-top: 0.75rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: center;
}

@media (max-width: 560px) {
    .lz-zeile {
        grid-template-columns: 80px 1fr 88px;
        gap: 0.5rem;
    }

    /* Skala ausgeblendet statt gequetscht: bei dieser Breite reicht der
       Platz nicht fuer sechs lesbare Zahlen mit Abstand (siehe
       .lz-achse - justify-content: space-between hat dann praktisch
       keinen freien Raum mehr zu verteilen, die Zahlen ruecken zu einem
       Zahlenstring zusammen). Kein Informationsverlust: jede Zeile nennt
       ihre Jahresspanne bereits rechts als Text ("20-50 Jahre" etc.). */
    .lz-achse-zeile {
        display: none;
    }

    /* Legende/Quelle folgen der Skala: ohne sie faellt der Bezugspunkt
       fuer die Zentrierung weg, also linksbuendig wie der Rest der Karte. */
    .lz-legende {
        justify-content: flex-start;
    }

    .lz-quelle {
        text-align: left;
    }
}

/* Karten-Raster, zweispaltig ab 340 px je Karte */
.leistungen-2sp {
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

/* Rechtsseiten */
.legal h1 {
    margin-bottom: 1.5rem;
}

.legal h2 {
    font-size: 1.2rem;
    margin: 2rem 0 0.5rem;
}

.legal p,
.legal ul {
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.legal ul {
    padding-left: 1.25rem;
}

/* Absatz mit zusätzlichem Abstand nach oben (Datenschutzerklärung: der
   Garantien-Satz nach der Empfängerliste). */
.legal .abstand {
    margin-top: 2rem;
}

/* Formular */
.form-page {
    max-width: 640px;
}

.form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.feld {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.feld label {
    font-weight: 600;
    font-size: 0.95rem;
}

.feld input,
.feld textarea {
    width: 100%;
    padding: 0.65rem 0.8rem;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font: inherit;
}

/* Nachrichtenfeld nur in der Höhe ziehbar, damit es nicht aus dem Layout bricht. */
.feld textarea {
    resize: vertical;
}

.feld input:focus,
.feld textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.feld-check label {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    font-weight: 400;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.feld-check input {
    margin-top: 0.25rem;
    width: auto;
    flex: none;
}

.feld-fehler {
    color: var(--error-text);
    font-size: 0.85rem;
}

/* Honeypot vor Menschen verstecken */
.honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Spamschutz-Widget (ALTCHA, unsichtbarer Modus): nimmt keinen Platz ein. */
altcha-widget {
    display: none;
}

.hinweis {
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    margin-top: 1rem;
    color: var(--on-semantic);
}

.hinweis-ok {
    background: rgba(74, 222, 128, 0.18);
    border: 1px solid var(--success);
}

.hinweis-fehler {
    background: rgba(248, 113, 113, 0.15);
    border: 1px solid var(--error);
    margin-bottom: 1.5rem;
}

code {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    padding: 0.1rem 0.35rem;
    border-radius: var(--radius);
    font-size: 0.85em;
}

/* Footer */
.site-footer {
    margin-top: auto;
    background: var(--primary);
    color: var(--on-primary-muted);
    padding: 1.75rem 0;
    font-size: 0.9rem;
}

.footer-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    align-items: center;
    justify-content: space-between;
}

.footer-claim {
    font-size: 0.85rem;
    color: rgba(248, 250, 252, 0.55);
    width: 100%;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: center;
}

.footer-links a,
.linklike {
    color: var(--on-primary-muted);
    text-decoration: none;
}

.footer-links a:hover,
.linklike:hover {
    color: var(--on-primary);
}

.linklike {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

/* Consent-Banner */
.consent {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 1000;
    display: flex;
    justify-content: center;
}

.consent[hidden] {
    display: none;
}

.consent-inner {
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 3px solid var(--accent);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    max-width: 560px;
    box-shadow: 0 10px 30px rgba(11, 31, 59, 0.25);
}

.consent-title {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.consent-text {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.consent-text a {
    color: var(--secondary);
}

.consent-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: flex-end;
}

.consent-actions .btn {
    padding: 0.55rem 1.25rem;
    font-size: 0.95rem;
}

/* ---------------------------------------------------------------------------
   Blog: Übersichtskacheln, Blätter-Navigation und Beitragsseite
   --------------------------------------------------------------------------- */
.blog-datum {
    display: block;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.blog-titel-link {
    color: var(--text);
    text-decoration: none;
}

.blog-titel-link:hover {
    color: var(--primary);
    text-decoration: underline;
}

.blog-blaettern {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}

.blog-blaettern-stand {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Beitragsseite: schmale Lesespalte.
   font-size skaliert den gesamten Beitrag auf 125 %. Weil die Breite in ch
   (schriftgrössen-relativ) definiert ist, wächst die Spalte proportional mit -
   die Zeilenlänge bleibt bei ~72 Zeichen, nur eben grösser gesetzt. Innere
   Überschriften sind in em (elternrelativ) definiert und skalieren dadurch mit. */
.beitrag {
    max-width: 72ch;
    margin: 0 auto;
    font-size: 1.25rem;
}

/* Beitragstext: auf dem Handy 125 % (20 px), auf dem Desktop 115 % der
   grösseren Grundschrift, also ebenfalls rund 20 px. */
@media (min-width: 721px) {
    .beitrag {
        font-size: 1.15rem;
    }
}

.beitrag h1 {
    /* em, damit der Titel die 125%-Skalierung der Lesespalte mitmacht. */
    font-size: 1.65em;
    line-height: 1.25;
    margin: 0.35rem 0 1rem;
}

.beitrag-bild {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    margin-bottom: 1.5rem;
}

.beitrag-inhalt h2 {
    font-size: 1.35em;
    margin: 1.75rem 0 0.6rem;
}

.beitrag-inhalt h3 {
    font-size: 1.1em;
    margin: 1.4rem 0 0.5rem;
}

.beitrag-inhalt p {
    margin-bottom: 0.9rem;
}

.beitrag-inhalt ul,
.beitrag-inhalt ol {
    margin: 0 0 0.9rem 1.4rem;
}

.beitrag-inhalt li {
    margin-bottom: 0.35rem;
}

.beitrag-inhalt a {
    color: var(--secondary);
}

.beitrag-inhalt a:hover {
    color: var(--primary);
}

/* Bilder, Grafiken, Bildunterschriften und Tabellen aus dem Beitrags-HTML
   (Format im Redaktions-Skill). Identisch zur Vorschau-Vorlage des Skills
   (redaktion/skill/blog/blog-vorschau.html), damit die Vorschau im Chat das
   zeigt, was live erscheint. Ohne max-width liefe ein Foto, das breiter als
   die Lesespalte ist, aus der Spalte heraus. */
.beitrag-inhalt img,
.beitrag-inhalt svg {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
}

.beitrag-inhalt figure {
    margin: 1.5rem 0;
}

.beitrag-inhalt figcaption {
    color: var(--text-muted);
    font-size: 0.85em;
    margin-top: 0.4rem;
}

.beitrag-inhalt table {
    border-collapse: collapse;
    margin: 0 0 0.9rem;
    width: 100%;
}

.beitrag-inhalt th,
.beitrag-inhalt td {
    border: 1px solid var(--border);
    padding: 0.4rem 0.6rem;
    text-align: left;
    font-size: 0.92em;
}

.beitrag-inhalt th {
    background: var(--bg-alt);
}

.beitrag-inhalt blockquote {
    margin: 0 0 0.9rem;
    padding: 0.2rem 0 0.2rem 1rem;
    border-left: 3px solid var(--accent);
    color: var(--text-muted);
}

.beitrag .cta-sektion {
    margin-top: 2.5rem;
}

/* Mehrere CTA-Buttons nebeneinander (z. B. Neuanlage + Retrofit) */
.cta-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.cta-buttons .btn {
    min-width: 270px;
}

/* FAQ-Abschnitt am Beitragsende (aufklappbare Fragen) */
.faq {
    margin-top: 2.5rem;
}

.faq h2 {
    font-size: 1.35em;
    margin-bottom: 0.75rem;
}

.faq-eintrag {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 0.75rem 1rem;
    margin-bottom: 0.6rem;
}

.faq-eintrag summary {
    cursor: pointer;
    font-weight: 600;
}

.faq-eintrag[open] summary {
    color: var(--primary);
}

.faq-eintrag p {
    margin-top: 0.6rem;
    color: var(--text-muted);
}