/* =========================================================
   design.css – Vereinigte Corporate Identity
   Domains: gabriel-waldeyer.com  UND  cibwal.com
   
   ARCHITEKTUR-PRINZIP:
   • Alle Klassen beider Domains sind enthalten (Vereinigungsmenge)
   • Nichts Altes wurde gestrichen → vollständig abwärtskompatibel
   • Neue Klassen (reading-width, section-title, btn-cta, …)
     funktionieren auf beiden Domains identisch
   • Domain-spezifische Varianten werden per Kommentar markiert
   • Schriftgrößen im Artikel-Kontext via clamp() → device-agnostisch,
     kein Riesenfont mehr auf Desktop-Monitoren
   
   Letzte Überarbeitung: 2026-05
   ========================================================= */


/* =========================================================
   1. CSS-VARIABLEN (Corporate-Token-Basis, beide Domains)
   
   Alle Farb-, Abstand- und Größenwerte zentral hier definiert.
   Änderung hier wirkt sich auf das gesamte Design aus.
   ========================================================= */

:root {
    /* --- Farben --- */
    --color-primary:        #066366;   /* Petrol  – Hauptfarbe Hintergrund/Text */
    --color-primary-dark:   #005F6A;   /* Petrol dunkel – Hover-Zustand Nav    */
    --color-accent-teal:    #066366;   /* Petrol – Akzentfarbe für "→ … im Detail"-Links (bisher nirgends definiert!) */
    --color-secondary:      gold;      /* Gold    – Akzentfarbe, Buttons, Links */
    --color-link-hover:     white;     /* Weiß    – Link-Hover im Footer        */

    /* --- Basis-Schriftgrößen (für Header, Footer, Legacy-Elemente)
           Diese werden in den Media Queries stufenweise skaliert.
           Fließtext in reading-width Artikeln nutzt stattdessen clamp(). --- */
    --font-size-small:  0.75rem;   /* Footer-Links, Metainfos   */
    --font-size-base:   1rem;      /* Normaler Fließtext        */
    --font-size-large:  2rem;      /* Große Absätze, Subheader  */
    --font-size-xlarge: 3rem;      /* H1/H2 in Header/Footer    */

    /* --- Abstände & Layout --- */
    --spacing:              10px;   /* Allgemeiner Innenabstand  */
    --side-padding:         10px;   /* Seitlicher Körperabstand  */
    --footer-logo-height:   30px;   /* Höhe des Footer-Logos     */
    --footer-gap:           20px;   /* Abstand Footer-Elemente   */
    --topbottom-padding:    10px;   /* Vertikal-Padding Header   */
    --maxwidth:             2100px; /* Maximale Inhaltsbreite    */
}


/* =========================================================
   2. RESET & BOX-MODELL
   ========================================================= */

* {
    box-sizing: border-box; /* Padding/Border in Breitenberechnung einschließen */
}

body {
    font-family: Calibri Light, sans-serif;
    background-color: white;
    color: var(--color-primary);
    margin: 0;
    padding: 0;
    padding-bottom: 50px; /* Platz für den fixed Footer am Seitenende */
    overflow-x: hidden;   /* Horizontales Scrollen verhindern          */
    box-sizing: border-box;
}

img {
    max-width: 100%; /* Bilder nie breiter als ihr Container */
    height: auto;
}


/* =========================================================
   3. HEADER
   
   Wird auf älteren Seiten (impressum, datenschutz etc.) 
   direkt als <header>-Element genutzt.
   ========================================================= */

header {
    background-color: var(--color-primary);
    color: var(--color-secondary);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0;
}

header > div {
    width: 100%;
    max-width: var(--maxwidth);
    margin: 0 auto;
    box-sizing: border-box;
}

header h1 {
    margin: 0 var(--spacing);
    font-size: var(--font-size-xlarge);
    line-height: 1.2;
    padding-top:    var(--topbottom-padding);
    padding-bottom: var(--topbottom-padding);
}

header p {
    margin: 0 var(--spacing);
    font-size: var(--font-size-large);
    padding-top:    var(--topbottom-padding);
    padding-bottom: var(--topbottom-padding);
}

header hr.divider {
    border: 0;
    border-top: 5px solid white;
    width: 95%;
    display: block;
    margin: var(--topbottom-padding) auto;
    box-sizing: border-box;
}

/* H1/H2 direkt im Body (ältere Seiten ohne Wrapper-Div) */
body > h1 {
    font-size: var(--font-size-xlarge);
    margin: 0;
    background-color: var(--color-primary);
    color: var(--color-secondary);
    text-align: center;
    text-decoration: none;
    width: 100%;
    padding: var(--topbottom-padding) 0;
}

body > h2 {
    font-size: var(--font-size-xlarge);
    margin: 0;
    background-color: var(--color-primary);
    color: var(--color-secondary);
    text-align: center;
    text-decoration: none;
    width: 100%;
    padding: var(--topbottom-padding) 0;
}

body > p {
    font-size: var(--font-size-large);
    padding-left:  var(--spacing);
    padding-right: var(--spacing);
}


/* =========================================================
   4. NAVIGATION
   
   Fixed oben, volle Breite.
   nav-lang:    Sprachwahl links  [ DE | EN ]
   nav-anchors: Anker-Links rechts (Säulen, Seiten)
   
   WICHTIG: nav.menu-container und footer nav.footer-links
   überschreiben diese fixed-Positionierung weiter unten.
   ========================================================= */

nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    background-color: #f9f9f9;
    border-bottom: 1px solid #ddd;
    margin-bottom: 0;
    position: fixed; /* Klebt am oberen Bildschirmrand */
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 99; /* Über dem Seiteninhalt, unter dem Footer (100) */
}

.nav-lang {
    font-size: 16px;
    color: var(--color-primary);
}

.nav-anchors {
    font-size: 15px;
    color: var(--color-primary);
}

.nav-link {
    background-color: transparent;
    color: var(--color-primary);
    font-weight: normal;
    text-decoration: none;
}

.nav-link:hover {
    background-color: var(--color-primary);
    color: gold;
    font-weight: bold;
}

/* Seiteninhalt beginnt unterhalb der fixed Nav */
main {
    padding-top: 60px;
}

@media (max-width: 480px) {
    nav {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        /* Auf dem Handy kann .nav-anchors auf mehrere Zeilen umbrechen.
           "fixed" + main{padding-top:60px} reichte dann nicht mehr aus und
           die Nav legte sich über die Überschrift. "sticky" nimmt die
           tatsächliche (variable) Höhe im Layout ein und bleibt beim
           Scrollen trotzdem oben kleben. */
        position: sticky;
    }
    .nav-anchors { font-size: 13px; }
    main {
        /* Der feste 60px-Ausgleich für die fixed-Nav entfällt, da die
           sticky-Nav jetzt selbst Platz im Fluss beansprucht. */
        padding-top: 8px;
    }
}


/* =========================================================
   5. ACCORDION-MENÜ (gabriel-waldeyer.com Startseite)
   
   Drei Säulen als aufklappbare Karten:
   SAP-Beratung | Transformation | Navigationshilfe
   
   nav.menu-container überschreibt die globale nav-fixed-
   Positionierung → ist NICHT fixed.
   ========================================================= */

/* Override: Accordion-Nav ist statisch, nicht fixed */
nav.menu-container {
    position: static;
    background-color: transparent;
    border-bottom: none;
    justify-content: center;
    padding: 20px;
}

.menu-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 20px;
}

.menu {
    background-color: var(--color-primary);
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    width: 300px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.menu h2 {
    margin: 0 0 10px;
    font-size: 1.5em; /* Bewusst em, nicht var() → relativ zur Karte */
    color: var(--color-secondary);
}

.menu select {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ced4da;
    border-radius: 5px;
    background-color: #f8f9fa;
    color: var(--color-primary);
}

.menu-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-links li {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.menu-links li:first-child {
    border-top: none;
}

.menu-links a {
    display: block;
    padding: 9px 12px;
    color: #fff;
    text-decoration: none;
    font-size: 0.95em;
    border-radius: 4px;
    transition: background 0.2s, color 0.2s;
    text-align: left;
}

.menu-links a:hover {
    background-color: gold;
    color: #066366;
    font-weight: bold;
}

.menu details {
    margin-top: 8px;
}

.menu summary {
    cursor: pointer;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 5px;
    padding: 8px 12px;
    color: gold;
    font-size: 0.9em;
    list-style: none;
    outline: none;
    user-select: none;
}

/* Standard-Dreieck des <summary>-Elements ausblenden */
.menu summary::-webkit-details-marker { display: none; }

/* Eigenes Auf/Zu-Symbol */
.menu summary::after        { content: " ▾"; float: right; }
details[open] summary::after { content: " ▴"; }


/* =========================================================
   6. ÜBERSCHRIFTEN-KLASSEN
   
   Wiederverwendbare H1/H2-Stile für beide Domains.
   Werden als class="header1_petrol" etc. am Tag gesetzt.
   
   WICHTIG: Innerhalb von .reading-width werden H1/H2 mit
   diesen Klassen via Section 11 auf clamp()-Größen
   herunterskaliert, damit der Text nicht riesig wird.
   ========================================================= */

.header1_petrol {
    /* Petrol-Hintergrund, Goldschrift – Haupt-Seitentitel */
    background-color: var(--color-primary);
    color: var(--color-secondary);
    text-align: center;
    text-decoration: none;
    padding-left: 25px;
    padding-right: 25px;
}

.header1_gold {
    /* Gold-Hintergrund, Petrolschrift – alternativer Titel */
    background-color: var(--color-secondary);
    color: var(--color-primary);
    text-align: center;
    text-decoration: none;
}

.header1_article {
    /* Weißer Hintergrund, Schwarz – Artikelüberschrift */
    background-color: white;
    color: black;
    text-align: center;
    text-decoration: none;
}

.header2_petrol {
    /* Wie header1_petrol aber für H2 */
    background-color: var(--color-primary);
    color: var(--color-secondary);
    text-align: center;
    text-decoration: none;
    padding-left: 25px;
    padding-right: 25px;
}

.header2_gold {
    background-color: var(--color-secondary);
    color: var(--color-primary);
    text-align: center;
    text-decoration: none;
}

.header2_article {
    /* Unterstrichen links, für Abschnitte im Artikeltext */
    background-color: white;
    color: black;
    text-align: left;
    text-decoration: underline;
}

/* ── Untertitel-Span im H1/H2 ──────────────────────────────
   Verwendung: <h1 class="header1_petrol">
                 Haupttitel<br>
                 <span class="h1-sub">Untertitel hier</span>
               </h1>

   Erbt die Goldfarbe des Eltern-H1, ist aber kleiner,
   leichter und hat etwas mehr Zeilenabstand für Lesbarkeit.
   Funktioniert in header1_petrol, header2_petrol und allen
   anderen header*-Klassen. */
.h1-sub {
    font-size: 0.6em;
    font-weight: 400;
    display: block;
    margin-top: 0.5em;
    line-height: 1.55;
}


/* =========================================================
   7. LINKS (Legacy-Klassen)
   
   Ältere Seiten setzen class="links" direkt auf <a>-Tags.
   Neue Seiten verwenden .nav-link oder .btn-cta.
   ========================================================= */

.links {
    background-color: white;
    color: var(--color-primary);
    font-weight: normal;
}

.links:hover {
    background-color: var(--color-primary-dark);
    color: var(--color-secondary);
    font-weight: bold;
}

/* btn-link: Unsichtbarer Link-Text innerhalb eines Buttons
   (Legacy: btn-gold > a.btn-link) */
.btn-link {
    color: inherit;
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%;
}


/* =========================================================
   8. BILDFORMATE
   ========================================================= */

/* Bild links mit Textumfluss – Standard */
.imgflowleft {
    float: left;
    margin-right: 30px;
    text-align: left;
}

/* Bild links mit Textumfluss – 30% Breite (Porträt-Fotos) */
.imgflowleft2 {
    height: 30%;
    width: 30%;
    float: left;
    margin-right: 30px;
    text-align: left;
}

/* Bild rechts mit Textumfluss */
.imgflowright {
    float: right;
    margin-left: 50px;
}

/* Bild rechts, 30% Breite */
.imgflowright2 {
    height: 30%;
    width: 30%;
    float: right;
    margin-left: 30px;
}

/* Zentriertes Bild ohne Umfluss */
.imgcentered {
    max-width: 100%;
    height: auto;
    width: auto;
    display: block;
    margin: 0 auto;
}

/* Markenzeichen / Logo inline im Text */
.imgbrand {
    float: none;
    margin-left: 0;
    margin-right: 5px;
    max-width: 100%;
    height: auto;
}

/* Zentrierter Bild-Container mit Abstand (neuere Seiten) */
.center-image {
    text-align: center;
    margin: 20px 0;
}

.center-image img {
    max-width: 100%;
    height: auto;
}

/* Legacy: center_side – ältere cibwal/gabriel-waldeyer Seiten
   Zentrierter Block-Wrapper, wird in neuen Seiten durch 
   .reading-width ersetzt */
.center_side {
    display: block;
    text-align: center;
}

/* Legacy: text-floatleft – Absatz neben einem float-left-Bild */
.text-floatleft {
    display: block;
    text-align: right; /* Spiegelbildlich zum Bild links */
}


/* =========================================================
   9. SPRACHUMSCHALTER (Legacy-Komponente)
   
   Ältere Seiten nutzten .language-switch mit Buttons.
   Neue Seiten nutzen nav-lang im <nav>-Element.
   ========================================================= */

.language-switch {
    display: flex;
    gap: 0.5em;
    justify-content: center;
    margin: 1em 0;
}

.language-switch button {
    background-color: var(--color-primary);
    color: var(--color-secondary);
    border: 1px solid var(--color-secondary);
    border-radius: 4px;
    padding: 0.4em 1em;
    cursor: pointer;
    font-size: 0.95em;
    font-family: inherit;
    transition: background-color 0.2s, color 0.2s;
}

.language-switch button:hover {
    background-color: var(--color-secondary);
    color: var(--color-primary);
}


/* =========================================================
   10. ARTIKEL-KOMPONENTEN (cibwal.com / video.html Stil)
   
   Diese Klassen bilden das neue Design-System für
   Artikel-Seiten auf beiden Domains.
   Alle Schriftgrößen hier via clamp() → skalieren
   stufenlos zwischen min und max, unabhängig von den
   Media-Query-Stufen aus Abschnitt 15.
   ========================================================= */

/* ── Lesbare Breite ────────────────────────────────────────
   Zentrierter Inhaltsblock mit maximaler Lesebreite.
   Verhindert überlange Zeilen auf breiten Monitoren. */
.reading-width {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* ── Abschnittstitel ───────────────────────────────────────
   Ersetzt <h2 class="header2_petrol"> in Artikel-Seiten.
   Kein Petrol-Hintergrund, stattdessen dezente Trennlinie. */
.section-title {
    font-size: clamp(1.25rem, 3.5vw, 1.9rem);
    font-weight: bold;
    color: var(--color-primary);
    margin-top: 2.2em;
    margin-bottom: 0.7em;
    letter-spacing: 0.02em;
    line-height: 1.3;
    border-bottom: 2px solid rgba(6, 99, 102, 0.15);
    padding-bottom: 0.3em;
}

/* ── Highlight-Box ─────────────────────────────────────────
   Hervorgehobener Textblock mit goldenem Rand links.
   .big-claim: etwas größere Schrift für Haupt-Aussagen. */
.highlight-box {
    background: rgba(6, 99, 102, 0.07);
    border-left: 4px solid gold;
    padding: clamp(0.9em, 3vw, 1.4em) clamp(1em, 3.5vw, 1.6em);
    margin: 1.5em 0;
    border-radius: 0 6px 6px 0;
    line-height: 1.8;
    font-size: clamp(1rem, 2.5vw, 1.2rem);
}

.highlight-box.big-claim {
    font-size: clamp(1.05rem, 2.8vw, 1.35rem);
    line-height: 1.8;
}

/* ── Zitat-Box ─────────────────────────────────────────────
   Kursiver Block für Zitate und Leitgedanken.
   Gold-Akzent links, heller Goldton als Hintergrund. */
.quote-box {
    font-style: italic;
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    padding: clamp(0.8em, 2.5vw, 1.2em) clamp(1em, 3vw, 1.6em);
    margin: 1.8em 0;
    border-left: 4px solid gold;
    background: rgba(255, 215, 0, 0.08);
    border-radius: 0 6px 6px 0;
    line-height: 1.85;
    color: #1a1a1a;
}

/* ── Bewertungs-Legende ───────────────────────────────────
   Kompakte Hinweis-Box zu Beginn der Vergleichsseiten.
   Klärt, welche Aussagen Fakt, Schul-Position, Interpretation
   oder eigene redaktionelle Bewertung sind. */
.legend-box {
    font-size: 0.85em;
    opacity: 0.9;
    border-left: 3px solid var(--color-accent-teal);
    background: rgba(6, 99, 102, 0.05);
    padding: clamp(0.7em, 2vw, 1em) clamp(0.9em, 2.5vw, 1.3em);
    margin: 1.3em 0 1.8em 0;
    border-radius: 0 6px 6px 0;
    line-height: 1.6;
}

.legend-box strong {
    color: var(--color-accent-teal);
}

/* ── Icon-Zeilen ───────────────────────────────────────────
   Flex-Zeile: links ein Icon/Emoji, rechts mehrzeiliger Text.
   Für Aufzählungen mit visueller Verstärkung. */
.icon-line {
    display: flex;
    align-items: flex-start;
    gap: 0.75em;
    margin-bottom: 1.1em;
    line-height: 1.75;
    font-size: clamp(1rem, 2.4vw, 1.15rem);
}

.icon {
    font-size: 1.35em;
    min-width: 1.5em;  /* Verhindert Zeilenumbruch beim Icon */
    flex-shrink: 0;
    margin-top: 0.05em;
}

/* ── Keyword-Hervorhebung ──────────────────────────────────
   Inline fett+petrol für Schlüsselbegriffe im Fließtext */
.keyword {
    font-weight: bold;
    color: var(--color-primary);
}

/* ── RICH-Akronym-Zeile ────────────────────────────────────
   Zentrierte Zeile mit R·I·C·H Buchstaben-Erklärung
   direkt unter dem H1 auf cibwal.com/video.html */
.rich-acronym {
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    letter-spacing: 0.01em;
    line-height: 1.9;
    text-align: center;
    margin: 0.5em 0 1.5em;
}

/* ── Benefit-Cards / Vorteils-Grid ────────────────────────
   Responsives Grid für Kacheln (Vorbilder, Vorteile etc.).
   Passt Spaltenanzahl automatisch der verfügbaren Breite an. */
.benefit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: clamp(0.75em, 2vw, 1.1em);
    margin: 1.8em 0;
}

.benefit-card,
.benefit-card:link,
.benefit-card:visited,
.benefit-card:hover,
.benefit-card:active {
    color: var(--color-primary);
}

.benefit-card {
    background: rgba(6, 99, 102, 0.05);
    border: 1px solid rgba(6, 99, 102, 0.2);
    border-radius: 8px;
    padding: clamp(0.85em, 2.5vw, 1.2em);
    line-height: 1.65;
    font-size: clamp(0.95rem, 2.2vw, 1.05rem);
    transition: box-shadow 0.2s, transform 0.15s;
}

.benefit-card:hover {
    box-shadow: 0 3px 12px rgba(6, 99, 102, 0.15);
    transform: translateY(-2px); /* Leichter Hebe-Effekt */
}

.benefit-card strong {
    color: var(--color-primary);
    display: block;
    margin-bottom: 0.3em;
}


/* =========================================================
   11. H1/H2 INNERHALB .reading-width
   
   Kernfix für Problem "Schrift zu groß":
   .header1_petrol und .header2_petrol erben body-weit
   var(--font-size-xlarge) = bis 3.1rem auf Desktop.
   Innerhalb eines Artikel-Wrappers (.reading-width) wird
   die Größe auf clamp() zurückgesetzt → liest sich wie
   in video.html, unabhängig von Monitor-Größe.
   ========================================================= */

.reading-width h1.header1_petrol,
.reading-width h1 {
    font-size: clamp(1.5rem, 4vw, 2.4rem);
    line-height: 1.3;
}

.reading-width h2.header2_petrol,
.reading-width h2 {
    font-size: clamp(1.2rem, 3vw, 1.9rem);
    line-height: 1.35;
}

/* Normaler Fließtext im Artikel ebenfalls clamp-basiert */
.reading-width p,
.reading-width li {
    font-size: clamp(1rem, 2.2vw, 1.15rem);
    line-height: 1.8;
}


/* =========================================================
   12. CTA-BUTTONS
   
   .btn-cta    – Primärbutton petrol/gold (neue Seiten)
   .btn-gold   – Legacy-Button gold/petrol (ältere Seiten)
   .btn-link   – Unsichtbarer Link innerhalb btn-gold
   .btn-group  – Flex-Container für mehrere Buttons
   ========================================================= */

/* Flex-Wrapper für mehrere nebeneinander stehende Buttons */
.btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(0.8em, 2vw, 1.2em);
    justify-content: center;
    margin: 2em 0;
}

/* Primär-Button: Petrol-Hintergrund, Gold-Rahmen und -Text */
.btn-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.65em;
    background-color: var(--color-primary);
    color: gold;
    text-decoration: none;
    font-family: Calibri, sans-serif;
    font-weight: bold;
    font-size: clamp(0.9rem, 2.3vw, 1.1rem);
    padding: 0.85em 1.5em;
    border-radius: 6px;
    border: 2px solid gold;
    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.15s;
    min-width: min(260px, 90vw);
    max-width: 340px;
}

.btn-cta:hover {
    background-color: gold;
    color: var(--color-primary);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
    transform: translateY(-1px);
}

/* Icon-Bereich links im Button */
.btn-cta .btn-icon {
    font-size: 1.55em;
    line-height: 1;
    flex-shrink: 0;
}

/* Haupttext im Button */
.btn-cta .btn-label {
    display: block;
    font-size: 1em;
}

/* Subtext/Untertitel im Button (kleinere Zeile darunter) */
.btn-cta .btn-sublabel {
    display: block;
    font-size: 0.78em;
    font-weight: normal;
    opacity: 0.85;
    margin-top: 0.1em;
}

/* Legacy Gold-Button (ältere Seiten: btn-gold > a.btn-link) */
.btn-gold {
    text-align: center;
    position: relative;
    background-color: gold;
    color: var(--color-primary);
    font-family: Calibri, sans-serif;
    border: none;
    cursor: pointer;
    padding: 0.5em 1.5em;
}

.btn-gold:hover {
    background-color: gold;
    box-shadow: black 0em 0.2em 0.2em 0em;
    font-weight: bold;
}

/* Unsichtbarer Link-Text innerhalb von btn-gold */
.btn-link {
    color: inherit;
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%;
}

/* Aside-Link: Dezenter Sekundär-Button (z.B. Pispers-Link) */
.aside-link {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8em;
    justify-content: center;
    margin: 1.2em 0 0.5em;
}

.aside-link .btn-cta {
    background-color: transparent;
    color: var(--color-primary);
    border-color: rgba(6, 99, 102, 0.35);
    font-weight: normal;
    font-size: clamp(0.82rem, 2vw, 0.95rem);
    padding: 0.6em 1.2em;
    min-width: min(220px, 90vw);
}

.aside-link .btn-cta:hover {
    background-color: rgba(6, 99, 102, 0.08);
    color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transform: none;
}

/* Fußnote unter aside-link (kursiv, grau, zentriert) */
.aside-note {
    font-size: clamp(0.82rem, 2vw, 0.92rem);
    color: #555;
    font-style: italic;
    text-align: center;
    margin: 0 0 1.5em;
}


/* =========================================================
   13. VIDEO-KOMPONENTEN (cibwal.com)
   
   .video-wrapper   – Responsiver 16:9 Video-Container
   .video-teaser    – Vorschaubild + Button auf index.html
   .video-teaser-thumb – Das Vorschaubild selbst
   ========================================================= */

/* 16:9-responsiver Video-Wrapper für <video>-Tag */
.video-wrapper {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 1.5em auto;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
}

.video-wrapper video {
    display: block;
    width: 100%;
    height: auto;
    background: #000;
}

/* Teaser-Block auf index.html: Thumbnail + Play-Button */
.video-teaser {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
    margin: 2em 0;
    text-align: center;
}

/* Vorschaubild des Videos */
.video-teaser-thumb {
    max-width: 340px;
    width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}


/* =========================================================
   14. FOOTER
   
   Fixed am unteren Bildschirmrand, volle Breite.
   Z-Index 100 → über der Nav (99) und allem anderen.
   
   footer nav.footer-links überschreibt die globale
   nav-fixed-Positionierung → Footer-Nav ist statisch.
   ========================================================= */

footer {
    background-color: var(--color-primary);
    color: var(--color-secondary);
    text-align: center;
    padding: 5px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed; /* Klebt am unteren Bildschirmrand */
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 100;
}

footer p {
    margin: 0;
    font-size: var(--font-size-small);
}

footer a {
    text-decoration: none;
    color: var(--color-secondary);
}

footer a:hover {
    color: var(--color-link-hover);
}

/* Innen-Container: Logo + Links nebeneinander */
.footer-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    gap: var(--footer-gap);
}

/* Logo-Bild im Footer */
.footer-logo {
    height: var(--footer-logo-height);
}

/* Link-Leiste im Footer */
.footer-links {
    display: flex;
    gap: var(--footer-gap);
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.footer-links a {
    text-decoration: none;
    color: var(--color-primary);      /* Petrol auf weißem Chip */
    background-color: var(--color-link-hover); /* weißer Chip-Hintergrund */
    font-weight: bold;
    font-size: var(--font-size-small);
    padding: 2px 5px;
}

.footer-links a:hover {
    font-weight: bold;
    color: var(--color-primary);
    background-color: var(--color-secondary); /* Gold beim Hover */
}

/* Override: Footer-Nav ist NICHT fixed (globales nav ist fixed) */
footer nav.footer-links {
    position: static;
    width: auto;
    padding: 0;
    background-color: transparent;
    border-bottom: none;
    margin-bottom: 0;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}


/* =========================================================
   15. MEDIA QUERIES – RESPONSIVE SKALIERUNG
   
   Die CSS-Variablen --font-size-* werden pro Breakpoint
   angepasst. Das betrifft Header, Footer und Legacy-Elemente.
   
   Fließtext in .reading-width ist DAVON UNABHÄNGIG via
   clamp() geregelt (Abschnitt 10/11) und skaliert stufenlos.
   ========================================================= */

/* ── Smartphones (bis 480px) ───────────────────────────── */
@media screen and (max-width: 480px) {
    :root {
        --font-size-small:  0.5rem;
        --font-size-base:   1.2rem;
        --font-size-large:  1.5rem;
        --font-size-xlarge: 1.8rem;
        --spacing:          2px;
        --footer-gap:       4px;
    }
    body    { margin-left: var(--spacing); margin-right: var(--spacing); }
    header,
    footer  { margin-left: var(--spacing); margin-right: var(--spacing); }

    .footer-logo { display: none; } /* Logo zu groß für schmalen Footer */
    .footer-container {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
    header h1,
    header h2       { font-size: var(--font-size-large); }
    .reading-width  { padding-left: 0.9rem; padding-right: 0.9rem; }
    .btn-cta        { min-width: min(90vw, 340px); max-width: 100%; }
    .benefit-grid   { grid-template-columns: 1fr; } /* Einspaltig */
    .section-title  { margin-top: 1.6em; }
}

/* ── Tablets klein (481px – 767px) ────────────────────── */
@media (min-width: 481px) and (max-width: 767px) {
    :root {
        --font-size-small:  0.6rem;
        --font-size-base:   1.4rem;
        --font-size-large:  1.7rem;
        --font-size-xlarge: 2.0rem;
        --spacing:          4px;
        --footer-gap:       7px;
    }
    body    { margin-left: var(--spacing); margin-right: var(--spacing); }
    header,
    footer  { margin-left: var(--spacing); margin-right: var(--spacing); }
    .footer-logo { display: none; }
    .footer-container {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
    header h1,
    header h2 { font-size: var(--font-size-large); }
}

/* ── Laptops (768px – 1024px) ──────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
    :root {
        --font-size-small:  1.0rem;
        --font-size-base:   1.6rem;
        --font-size-large:  1.9rem;
        --font-size-xlarge: 2.2rem;
        --spacing:          10px;
        --footer-gap:       10px;
    }
    body    { margin-left: var(--spacing); margin-right: var(--spacing); }
    header,
    footer  { margin-left: var(--spacing); margin-right: var(--spacing); }
    .footer-container { flex-direction: row; align-items: center; }
}

/* ── Desktop / größere Laptops (1025px – 1280px) ──────── */
@media (min-width: 1025px) and (max-width: 1280px) {
    :root {
        --font-size-small:  1.5rem;
        --font-size-base:   2.1rem;
        --font-size-large:  2.4rem;
        --font-size-xlarge: 2.7rem;
        --spacing:          15px;
        --footer-gap:       15px;
    }
    body    { margin-left: var(--spacing); margin-right: var(--spacing); }
    header,
    footer  { margin-left: var(--spacing); margin-right: var(--spacing); }
    .footer-container { flex-direction: row; align-items: center; }
}

/* ── HD-Monitore (1281px – 1920px) ────────────────────── */
@media (min-width: 1281px) and (max-width: 1920px) {
    :root {
        --font-size-small:  1.7rem;
        --font-size-base:   2.3rem;
        --font-size-large:  2.6rem;
        --font-size-xlarge: 2.9rem;
        --spacing:          20px;
        --footer-gap:       20px;
    }
    body    { margin-left: var(--spacing); margin-right: var(--spacing); }
    header,
    footer  { margin-left: var(--spacing); margin-right: var(--spacing); }
    .footer-container { flex-direction: row; align-items: center; }
}

/* ── Ultra-HD (ab 1921px) ──────────────────────────────── */
@media (min-width: 1921px) {
    :root {
        --font-size-small:  1.9rem;
        --font-size-base:   2.5rem;
        --font-size-large:  2.8rem;
        --font-size-xlarge: 3.1rem;
        --spacing:          25px;
        --footer-gap:       25px;
    }
    body    { margin-left: var(--spacing); margin-right: var(--spacing); }
    header,
    footer  { margin-left: var(--spacing); margin-right: var(--spacing); }
    .footer-container { flex-direction: row; align-items: center; }
}


/* =========================================================
   16. LEGACY-KOMPONENTEN – EIGNUNGS-TEST & ÄLTERE SEITEN
   
   Diese Styles werden von der Eignung-Seite
   (Berufliches-Intuitiv-Coaching/eignung/index.html)
   und weiteren älteren Seiten beider Domains benötigt.
   
   Sie werden hier NICHT verändert, nur zentralisiert,
   damit keine lokale design.css mehr nötig ist.
   ========================================================= */

/* ── Artikel-Bereich (ID, Legacy) ─────────────────────────
   Ältere Seiten nutzen <div id="article"> für den
   Hauptinhalt. Neue Seiten nutzen .reading-width. */
#article {
    text-align: left;
    color: black;
    border: none;
}

/* ── Fragebogen-Tabelle ────────────────────────────────────
   Struktur des Quiz auf der Eignung-Seite.
   Zentriert, Petrol-Farbe, border-collapse. */
#Fragebogentabelle {
    position: relative;
    top: 2em;
    color: var(--color-primary-dark);
    border-collapse: collapse;
    margin: 0 auto;
    font-family: Calibri, sans-serif;
    /* clamp() hält die Schrift auf allen Bildschirmgrößen lesbar.
       !important verhindert, dass die globalen table/th/td-Regeln
       in den großen Media Queries (HD, UHD) diese Größe überschreiben. */
    font-size: clamp(0.88rem, 1.6vw, 1rem) !important;
    width: 100%;
}

/* Einzelne Zellen des Fragebogens ebenfalls clamp-kontrolliert */
#Fragebogentabelle td,
#Fragebogentabelle th {
    font-size: clamp(0.88rem, 1.6vw, 1rem) !important;
    padding: 0.4em 0.6em;
    line-height: 1.55;
}

/* Radio-Button-Spalten: kompakt und zentriert */
#Fragebogentabelle td:not(.Fragezeile) {
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

/* Frage-Spalte: linksbündig */
#Fragebogentabelle .Fragezeile {
    text-align: left;
}

/* Kopf- und Trennzeilen der Fragebogen-Tabelle (gold) */
#Tabellenheader {
    background-color: gold;
    text-align: center;
    height: 1em;
}

/* Auswertungs-Ergebnis-Absatz (wird via JS eingeblendet) */
#Tabellenauswertung {
    border: none;
    color: #1a1a1a;
    position: relative;
    text-align: left;
    font-family: Calibri, sans-serif;
    font-weight: normal;
    display: none; /* Standardmäßig versteckt, JS setzt display:block */
    /* Optik wie highlight-box, Schrift immer lesbar – nie riesig */
    font-size: clamp(1rem, 2vw, 1.1rem) !important;
    line-height: 1.75;
    background: rgba(6, 99, 102, 0.07);
    border-left: 4px solid gold;
    border-radius: 0 6px 6px 0;
    padding: 1em 1.2em;
    margin: 1.5em 0;
}

/* Einzelne Frage-Zelle in der Tabelle */
.Fragezeile {
    padding-left: 0.5em;
    text-align: left;
}

.Fragezeile:hover {
    background-color: var(--color-primary-dark);
    color: gold;
    font-weight: bold;
}

/* Ergebnis-Container (ebenfalls via JS eingeblendet) */
#Ergebnis {
    display: none;
}

/* ── Legacy-Buttons (ID-basiert) ───────────────────────────
   Ältere Seiten nutzen <button id="SmallButton"> etc.
   Neue Seiten nutzen .btn-cta (Abschnitt 12). */

/* Auswertungs-Button auf der Eignung-Seite */
/* Auswertungs-Button (Eignungs-Check) – Optik wie btn-cta.
   Schriftgröße via clamp() → nie riesig auf großen Monitoren.
   Die Media-Query-Überschreibungen lassen height/padding skalieren,
   aber font-size bleibt durch !important bei clamp(). */
#SmallButton {
    text-align: center;
    position: relative;
    background-color: var(--color-primary);
    color: gold;
    border: 2px solid gold;
    border-radius: 6px;
    height: auto;
    padding: 0.75em 2em;
    font-family: Calibri, sans-serif;
    font-weight: bold;
    font-size: clamp(0.95rem, 2vw, 1.1rem) !important;
    cursor: pointer;
    display: block;
    margin: 1.5em auto;
    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

#SmallButton:hover {
    background-color: gold;
    color: var(--color-primary);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
    font-weight: bold;
    cursor: pointer;
}

/* Großer Aufruf-Button (Legacy) */
#BigButton {
    text-align: center;
    position: relative;
    background-color: white;
    height: 6em;
    color: var(--color-primary-dark);
    font-family: Calibri, sans-serif;
}

#BigButton:hover {
    background-color: gold;
    color: var(--color-primary-dark);
    box-shadow: black 0em 0.2em 0.2em 0em;
    cursor: pointer;
    font-weight: bold;
}

/* Fixierter gold Button (z.B. Calendly-Link) */
#FixButton {
    text-align: center;
    position: relative;
    background-color: gold;
    color: var(--color-primary);
    font-family: Calibri, sans-serif;
}

#FixButton:hover {
    background-color: gold;
    box-shadow: black 0em 0.2em 0.2em 0em;
    cursor: pointer;
    font-weight: bold;
}

/* Meeting-Button (größer, für Calendly etc.) */
#Meeting {
    padding-left: 1.0em;
    text-align: center;
    position: relative;
    background-color: white;
    height: 8em;
    color: var(--color-primary-dark);
    font-family: Calibri, sans-serif;
}

#Meeting:hover {
    background-color: gold;
    color: var(--color-primary-dark);
    box-shadow: black 0em 0.2em 0.2em 0em;
    cursor: pointer;
    font-weight: bold;
}

/* Menu-Button (Dropdown-Navigation älterer Seiten) */
#MenuButton {
    text-align: center;
    position: relative;
    height: auto;
    width: auto;
    font-family: Calibri, sans-serif;
}

#MenuButton:hover {
    cursor: pointer;
    font-weight: bold;
}

/* Sechs nummerierte Themen-Knöpfe (Navigations-Kacheln) */
#Knopf1, #Knopf2, #Knopf3, #Knopf4, #Knopf5, #Knopf6 {
    position: relative;
    background-color: gold;
    color: var(--color-primary-dark);
    font-family: Calibri, sans-serif;
}

#Knopf1, #Knopf4 { height: 2em; }
#Knopf2, #Knopf3, #Knopf5, #Knopf6 { height: 4em; }

#Knopf1:hover, #Knopf2:hover, #Knopf3:hover,
#Knopf4:hover, #Knopf5:hover, #Knopf6:hover {
    background-color: gold;
    color: var(--color-primary-dark);
    box-shadow: black 0em 0.2em 0.2em 0em;
    cursor: pointer;
    font-weight: bold;
}

/* ── Legacy-Links (ID-basiert, ältere Seiten) ──────────────
   id="links" wird auf älteren Seiten an mehreren <a>-Tags
   gesetzt. IDs sollten eindeutig sein – Legacy-Kompromiss. */
#links {
    color: var(--color-primary);
    text-decoration: underline;
    font-weight: normal;
}

#links:hover {
    color: var(--color-primary-dark);
    font-weight: bold;
}

#links_header {
    background-color: var(--color-primary);
    color: var(--color-primary-dark);
    font-weight: normal;
}

#links_header:hover {
    background-color: var(--color-primary-dark);
    color: gold;
    font-weight: bold;
}

#links_article {
    background-color: white;
    color: black;
    font-weight: normal;
    text-decoration: underline;
}

#links_article:hover {
    background-color: white;
    color: black;
    font-weight: bold;
}

/* ── Sichtbarkeits-Toggles (Legacy) ───────────────────────
   JS-gesteuerte Sichtbarkeit: display:none als Standard,
   JS setzt display:block wenn nötig. */
#highres           { display: none; }
#lowres            { display: none; }
#hochauflösend     { display: none; }
#geringeauflösung  { display: none; }
#Du                { display: block; }
#Sie               { display: none; }

/* Siezen/Duzen Buttons (Anrede-Umschalter älterer Seiten) */
#SieDu {
    position: relative;
    background-color: white;
    color: var(--color-primary-dark);
    font-family: Calibri, sans-serif;
    border: none;
    display: none;
}

#SieDu:hover {
    background-color: #D3D3D3;
    color: var(--color-primary-dark);
    box-shadow: black 0em 0.2em 0.2em 0em;
    cursor: pointer;
    font-weight: bold;
}

#DuSie {
    position: relative;
    background-color: white;
    color: var(--color-primary-dark);
    font-family: Calibri, sans-serif;
    border: none;
    display: block;
}

#DuSie:hover {
    background-color: #D3D3D3;
    color: var(--color-primary-dark);
    box-shadow: black 0em 0.2em 0.2em 0em;
    cursor: pointer;
    font-weight: bold;
}

/* ── Layout-Hilfs-IDs (Legacy) ─────────────────────────────
   Ältere Seiten nutzen IDs für Layout.
   Neue Seiten nutzen Klassen (.reading-width etc.). */
#sprache {
    display: block;
    text-align: right;
    float: right;
}

#language {
    display: block;
    text-align: right;
    float: right;
}

#english  { display: none;  text-align: left; float: left; }
#deutsch  { display: block; text-align: left; float: none; }

#zentrierung {
    display: block;
    text-align: center;
    clear: both;
}

#webseite {
    display: block;
    text-align: center;
}

#webseite, #englisch, #deutsch {
    margin-left: var(--spacing);
    margin-right: var(--spacing);
}

/* Kleiner Hilfstext (Microtext, z.B. Hinweise) */
#klitzeklein {
    font-size: 0.75em;
}

/* ── Legacy-Typografie-Klassen ─────────────────────────────
   Ältere Seiten setzen diese Klassen auf <p> oder <div>. */
.Ueberschrift2 { font-size: 1.5em; font-weight: bold; }
.Ueberschrift3 { font-size: 1.2em; font-weight: bold; }
.Knöpfe {
    padding-left: 0.5em;
    padding-right: 0.5em;
    text-align: center;
}

/* ── Audio-Player ──────────────────────────────────────────
   Geschwungene Box-Shadow-Transition für <audio>-Elemente */
#audio-with-controls {
    transition: all 0.5s linear;
    box-shadow: 2px 2px 4px 0px #006773;
    border-radius: 7px;
}

#audio-with-controls:hover {
    box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.4);
    transform: scale(1.05);
}


/* =========================================================
   17. COACHING-SEITE KOMPONENTEN
   
   Spezifische Layout-Blöcke für die Seite
   Berufliches-Intuitiv-Coaching/index.html.
   ========================================================= */

/* ── Zielgruppen-Grid ──────────────────────────────────────
   Zweispaltiges Kachel-Raster für „Für wen"-Abschnitte.
   Bricht auf Smartphones auf eine Spalte um. */
.zg-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
    margin: 1.8rem 0;
}

/* Einzelne Karte im Zielgruppen-Grid */
.zg-card {
    border: 1px solid var(--color-primary);
    border-radius: 6px;
    padding: 1.2rem 1.3rem;
    font-size: 0.91em;
    line-height: 1.6;
}

/* Kleines Kategorie-Label über der Karten-Überschrift */
.zg-card .zg-label {
    display: block;
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--color-primary);
    margin-bottom: 0.4em;
}

/* Hauptüberschrift innerhalb der Karte */
.zg-card strong.zg-head {
    display: block;
    font-size: 1.05em;
    margin-bottom: 0.5em;
}

/* ── Preis-Box ─────────────────────────────────────────────
   Horizontale Darstellung mehrerer Preisoptionen.
   Bricht auf Smartphones in eine Spalte um. */
.preis-box {
    border: 2px solid var(--color-primary);
    border-radius: 8px;
    padding: 1.4rem 1.6rem;
    margin: 2rem 0;
    display: flex;
    gap: 2.5rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

/* Ein einzelnes Preis-Element */
.preis-item {
    flex: 1;
    min-width: 200px;
}

/* Beschreibendes Label über dem Preis */
.preis-item .preis-label {
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-primary);
    display: block;
    margin-bottom: 0.3em;
}

/* Der eigentliche Preis-Wert (groß, fett) */
.preis-item .preis-wert {
    font-size: 1.3em;
    font-weight: 700;
}

/* Zusatztext unter dem Preis */
.preis-item .preis-sub {
    font-size: 0.84em;
    color: #555;
    margin-top: 0.25em;
}

/* Responsive Overrides für Coaching-Komponenten */
@media (max-width: 600px) {
    .zg-grid   { grid-template-columns: 1fr; }
    .preis-box { flex-direction: column; gap: 1.2rem; }
}


/* =========================================================
   18. LEGACY MEDIA QUERIES – FORMULAR & BUTTONS
   
   Die folgenden Breakpoints skalieren die Legacy-Elemente
   (Buttons, Tabellen, Fragebogen) für verschiedene
   Bildschirmgrößen.
   
   Fließtext in .reading-width ist davon UNABHÄNGIG (clamp).
   ========================================================= */

/* ── Smartphones (max 480px) ───────────────────────────── */
@media screen and (max-width: 480px) {
    input { height: 20px; width: 20px; }

    #MenuButton  { font-size: 22px; }
    .btn-gold    { font-size: 22px; }
    #FixButton   { height: auto; width: 300px; font-size: 33px; }
    #SmallButton { font-size: 33px; padding-left: 0.5em; padding-right: 0.5em; }
    #BigButton   { font-size: 33px; padding-left: 1em;   padding-right: 1em; }

    #Knopf1, #Knopf2, #Knopf3, #Knopf4, #Knopf5, #Knopf6 { font-size: 33px; }
    #Knopf2, #Knopf3, #Knopf5, #Knopf6 { height: 10em; }
    #Knopf1, #Knopf4                    { height: 5em; }

    #SieDu, #DuSie, #klitzeklein { font-size: 11px; }
    .imgbrand    { width: 20%; height: 20%; }

    table {
        border: 1px solid;
        font-size: 22px;
        width: 100%;
        box-sizing: border-box;
        table-layout: auto;
    }
    th, td {
        border: 1px solid;
        font-size: 22px;
        word-break: break-word;
        overflow-wrap: break-word;
    }
    /* #Tabellenauswertung: Schriftgröße via clamp() im Basis-CSS geregelt */
}

/* ── Tablets klein (481px – 767px) ────────────────────── */
@media (min-width: 481px) and (max-width: 767px) {
    input { height: 20px; width: 20px; }

    #MenuButton  { font-size: 22px; padding-left: 0.5em; padding-right: 0.5em; }
    .btn-gold    { font-size: 26px; }
    #FixButton   { height: auto; width: 400px; font-size: 33px; }
    #SmallButton { font-size: 33px; padding-left: 0.5em; padding-right: 0.5em; }
    #BigButton   { font-size: 33px; padding-left: 1em;   padding-right: 1em; }
    .Knöpfe      { padding-left: 0.2em; padding-right: 0.2em; }

    #Knopf1, #Knopf2, #Knopf3, #Knopf4, #Knopf5, #Knopf6 { font-size: 33px; }
    #Knopf2, #Knopf3, #Knopf5, #Knopf6 { height: 6em; }
    #Knopf1, #Knopf4                    { height: 3em; }

    #SieDu, #DuSie, #klitzeklein { font-size: 11px; }
    .imgbrand    { width: 20%; height: 20%; }

    table, th, td {
        border: 1px solid;
        font-size: 22px;
        margin-left: 5px;
        margin-right: 5px;
    }
    /* #Tabellenauswertung: Schriftgröße via clamp() im Basis-CSS geregelt */
}

/* ── Tablets Portrait (768px – 1024px) ─────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
    input { height: 20px; width: 20px; }

    #MenuButton  { font-size: 22px; padding-left: 0.5em; padding-right: 0.5em; }
    #FixButton   { height: auto; width: 500px; font-size: 33px; }
    #SmallButton { font-size: 33px; padding-left: 0.5em; padding-right: 0.5em; }
    #BigButton   { font-size: 33px; padding-left: 1em;   padding-right: 1em; }
    #Meeting     { font-size: 33px; }
    .imgbrand    { width: 20%; height: 20%; }

    #Knopf1, #Knopf2, #Knopf3, #Knopf4, #Knopf5, #Knopf6 { font-size: 33px; }
    #SieDu, #DuSie, #klitzeklein { font-size: 11px; }

    table, th, td {
        font-size: 22px;
        border: 1px solid;
        margin-left: 5px;
        margin-right: 5px;
    }
    /* #Tabellenauswertung: Schriftgröße via clamp() im Basis-CSS geregelt */
}

/* ── Laptops (1025px – 1280px) ─────────────────────────── */
@media (min-width: 1025px) and (max-width: 1280px) {
    input { height: 20px; width: 20px; }

    #MenuButton  { font-size: 22px; padding-left: 0.5em; padding-right: 0.5em; }
    .btn-gold    { font-size: 44px; }
    #FixButton   { height: auto; width: 700px; font-size: 44px; }
    #SmallButton { font-size: 33px; padding-left: 0.5em; padding-right: 0.5em; }
    #BigButton   { font-size: 33px; padding-left: 1em;   padding-right: 1em; }
    #Meeting     { font-size: 33px; }
    .imgbrand    { width: 30%; height: 30%; }

    #Knopf1, #Knopf2, #Knopf3, #Knopf4, #Knopf5, #Knopf6 { font-size: 33px; }
    #SieDu, #DuSie, #klitzeklein { font-size: 11px; }

    table, th, td {
        font-size: 22px;
        border: 1px solid;
        margin-left: 5px;
        margin-right: 5px;
    }
    /* #Tabellenauswertung: Schriftgröße via clamp() im Basis-CSS geregelt */
}

/* ── HD-Monitore (1281px – 1920px) ─────────────────────── */
@media (min-width: 1281px) and (max-width: 1920px) {
    input { height: 50px; width: 50px; }

    #MenuButton  { font-size: 66px; padding-left: 0.5em; padding-right: 0.5em; }
    .btn-gold    { font-size: 44px; }
    #FixButton   { height: auto; width: 900px; font-size: 66px; }
    #SmallButton { font-size: 66px; padding-left: 0.5em; padding-right: 0.5em; }
    #BigButton   { font-size: 66px; padding-left: 1em;   padding-right: 1em; }
    #Meeting     { font-size: 66px; }
    .imgbrand    { max-width: 100%; width: auto; height: auto; }

    #Knopf1, #Knopf2, #Knopf3, #Knopf4, #Knopf5, #Knopf6 { font-size: 66px; }
    #klitzeklein   { font-size: 22px; }
    #SieDu, #DuSie { font-size: 44px; }

    table, th, td {
        font-size: 55px;
        border: 1px solid;
        margin-left: 5px;
        margin-right: 5px;
    }
    /* #Tabellenauswertung: Schriftgröße via clamp() im Basis-CSS geregelt */
}

/* ── Ultra-HD (ab 1921px) ──────────────────────────────── */
@media (min-width: 1921px) {
    input { height: 70px; width: 70px; }

    #MenuButton  { font-size: 77px; padding-left: 0.5em; padding-right: 0.5em; }
    .btn-gold    { font-size: 55px; }
    #FixButton   { height: auto; width: 1200px; font-size: 77px; }
    #SmallButton { font-size: 88px; padding-left: 0.5em; padding-right: 0.5em; }
    #BigButton   { font-size: 88px; padding-left: 1em;   padding-right: 1em; }
    #Meeting     { font-size: 88px; }
    .imgbrand    { max-width: 100%; width: auto; height: auto; }

    #Knopf1, #Knopf2, #Knopf3, #Knopf4, #Knopf5, #Knopf6 { font-size: 88px; }
    #klitzeklein   { font-size: 33px; }
    #SieDu, #DuSie { font-size: 66px; }

    table, th, td {
        font-size: 77px;
        border: 1px solid;
        margin-left: 5px;
        margin-right: 5px;
    }
    /* #Tabellenauswertung: Schriftgröße via clamp() im Basis-CSS geregelt */
}

/* ── Ampel-Icons mit Erklär-Popup (legend-tooltips.js) ────────
   Gilt für 🟢 🔵 🟠 🟣 (Quellen-Legende) sowie 🟢 🟡 🔴 (Bewertungsskala)
   im gesamten Seitentext. Das Popup (#legend-tip) hängt das JS an <body>. */
.legend-icon {
    cursor: help;
    padding: 0 0.05em;
    border-radius: 3px;
    outline-offset: 2px;
}

.legend-box .legend-icon {
    border-bottom: 1px dotted currentColor;
    padding: 0 0.1em;
}

.legend-icon:hover,
.legend-icon:focus-visible {
    background: rgba(6, 99, 102, 0.14);
}

#legend-tip {
    position: fixed;
    z-index: 10000;
    box-sizing: border-box;
    max-width: min(22rem, calc(100vw - 1.5rem));
    padding: 0.6em 0.85em;
    background: var(--color-primary-dark, #005F6A);
    color: #fff;
    font-size: 0.85rem;
    line-height: 1.45;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease;
}

#legend-tip strong {
    display: block;
    margin-bottom: 0.15em;
    color: var(--color-secondary, gold);
}

#legend-tip.is-visible {
    opacity: 1;
    visibility: visible;
}


/* =========================================================
   NEU 2026-10-03: Humane Marktwirtschaft / Humane Market Economy
   (hmw.html, EN/hme.html)

   .hmw-list     – Aufzählung mit rundem Teal-Marker statt "*"
   .card-lead    – Kernsatz am Anfang einer Benefit-Card
   .card-note    – Folgezeilen in der Benefit-Card (Detailtext)
   .pdf-embed    – eingebettetes PDF (A4 hochkant) mit Fallback-Link
   ========================================================= */

/* ── Aufzählung mit professionellem Marker ───────────────── */
.hmw-list {
    list-style: none;
    margin: 0.9em 0 1.1em;
    padding: 0;
}

.hmw-list li {
    position: relative;
    padding-left: 1.6em;
    margin: 0.45em 0;
    line-height: 1.5;
}

.hmw-list li::before {
    content: "";
    position: absolute;
    left: 0.2em;
    top: 0.55em;
    width: 0.55em;
    height: 0.55em;
    border-radius: 50%;
    background: var(--color-accent-teal, #066366);
}

/* ── Benefit-Card: Kernsatz + Detailzeilen ───────────────── */
.benefit-card .card-lead {
    display: block;
    font-weight: 600;
    margin-bottom: 0.45em;
}

.benefit-card .card-note {
    display: block;
    margin-top: 0.45em;
}

/* ── Eingebettetes PDF ───────────────────────────────────── */
.pdf-embed {
    width: 100%;
    max-width: 760px;
    margin: 1.5em auto;
    border: 1px solid rgba(6, 99, 102, 0.25);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    background: #fff;
}

.pdf-embed object {
    display: block;
    width: 100%;
    aspect-ratio: 595 / 842;      /* A4 hochkant */
    min-height: 480px;
}

.pdf-embed .pdf-fallback {
    margin: 0;
    padding: 1em 1.2em;
    line-height: 1.6;
}

/* ── Vergleichstabelle (Marxismus-Abgrenzung, sdg/stf) ───────
   WICHTIG: Die Legacy-Blöcke in Abschnitt 16 setzen pro Breakpoint
   `table, th, td { font-size: 22px; border: 1px solid; margin… }`.
   Deshalb setzen die Regeln hier Schrift, Rahmen und Abstände
   explizit auf th/td (höhere Spezifität durch .cmp-table).
   Ab 761px Tabelle, darunter gestapelte Karten (data-label). */
.cmp-wrap {
    overflow-x: auto;
    margin: 1.2em 0;
    border: 1px solid rgba(6, 99, 102, 0.25);
    border-radius: 8px;
}
.cmp-table {
    width: 100%;
    border: 0;
    border-collapse: collapse;
    table-layout: fixed;
    margin: 0;
    font-size: 15px;
    line-height: 1.45;
}
.cmp-table caption {
    caption-side: top;
    text-align: left;
    padding: 0.6em 0.8em;
    font-size: 15px;
    font-weight: bold;
    color: var(--color-primary);
}
.cmp-table th,
.cmp-table td {
    margin: 0;
    padding: 0.55em 0.7em;
    font-size: 15px;
    line-height: 1.45;
    vertical-align: top;
    text-align: left;
    border: 0;
    border-bottom: 1px solid rgba(6, 99, 102, 0.15);
    overflow-wrap: anywhere;
    hyphens: auto;
}
.cmp-table thead th {
    background: var(--color-primary);
    color: #fff;
    font-size: 15px;
}
.cmp-table tbody th {
    width: 13%;
    background: rgba(6, 99, 102, 0.08);
    color: var(--color-primary);
}
.cmp-table td.cmp-marx    { background: rgba(170, 60, 40, 0.05); }
.cmp-table td.cmp-caspar  { background: rgba(6, 99, 102, 0.05); }
.cmp-table td.cmp-note    { background: rgba(255, 215, 0, 0.10); }

/* Auf breiten Bildschirmen über die schmale Lesespalte hinaus verbreitern */
@media (min-width: 1000px) {
    .cmp-wrap {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        width: min(1120px, calc(100vw - 48px));
    }
}

@media (max-width: 760px) {
    .cmp-table thead { position: absolute; left: -9999px; }
    .cmp-table,
    .cmp-table tbody,
    .cmp-table tr,
    .cmp-table th,
    .cmp-table td { display: block; width: 100%; }
    .cmp-table { table-layout: auto; font-size: 14px; }
    .cmp-table caption { display: block; width: 100%; }
    .cmp-table th,
    .cmp-table td { font-size: 14px; }
    .cmp-table tr { border-bottom: 3px solid rgba(6, 99, 102, 0.3); }
    .cmp-table tbody th { width: 100%; font-size: 15px; }
    .cmp-table td::before {
        content: attr(data-label);
        display: block;
        font-weight: bold;
        font-size: 12px;
        margin-bottom: 0.2em;
        color: var(--color-primary);
    }
}

/* Dreispaltige Variante der Vergleichstabelle (Rückfragen-Block) */
.cmp-table.cmp-3 tbody th { width: 24%; }
@media (max-width: 760px) {
    .cmp-table.cmp-3 tbody th { width: 100%; }
}

/* Dezente Randbemerkung (schritte/steps) */
.aside-note {
    font-size: 0.9em;
    font-style: italic;
    opacity: 0.8;
}