/* ==========================================================================
   Glowfish — Gestaltung der Website
   Hell, klar, Markenblau aus dem Logo. Schrift Manrope, selbst ausgeliefert
   (keine Verbindung zu Google). Keine Fremdbibliothek.
   ========================================================================== */

@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url(/schrift/manrope-latin-ext.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url(/schrift/manrope-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --blau:          #1a63c8;
    --blau-tief:     #0d4392;
    --blau-hell:     #4d9bee;
    --blau-schleier: #eaf2fd;
    --navy:          #0b1f3d;

    --text:          #16202c;
    --text-leise:    #5a6675;
    --linie:         #dfe5ec;
    --flaeche:       #f4f6f9;
    --weiss:         #ffffff;

    --gruen:         #1f7a4d;
    --rot:           #b3261e;

    --radius:        8px;
    --radius-gross:  14px;
    --breite:        1200px;
    --schrift:       "Manrope", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --schatten:      0 1px 2px rgba(16, 32, 44, .06), 0 8px 24px rgba(16, 32, 44, .06);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--schrift);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background: var(--weiss);
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blau-tief); text-decoration: none; }
a:hover { color: var(--blau); text-decoration: underline; text-underline-offset: 3px; }

h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.02em; }
h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); font-weight: 800; }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.2vw, 2.1rem); }
h3 { font-size: 1.15rem; }
p  { margin: 0 0 1em; }
b, strong { font-weight: 700; }

/* --- Grundraster ------------------------------------------------------- */
.mitte { width: min(100% - 2.5rem, var(--breite)); margin-inline: auto; }
.abschnitt { padding: clamp(2.6rem, 6vw, 4.5rem) 0; }
.abschnitt--hell { background: var(--flaeche); }
.abschnitt--dunkel { background: var(--navy); color: #dbe6f7; }
.abschnitt--dunkel h2, .abschnitt--dunkel h3 { color: #fff; }
.abschnitt--dunkel a { color: #9fc0f5; }

.kopfzeile-block { max-width: 720px; margin: 0 0 clamp(1.6rem, 3.5vw, 2.4rem); }
.kopfzeile-block--mittig { text-align: center; margin-inline: auto; }
.kopfzeile-block p { color: var(--text-leise); font-size: 1.08rem; margin: 0; }
.abschnitt--dunkel .kopfzeile-block p { color: #b4c4dc; }

/* --- Kopfzeile mit Menü ------------------------------------------------ */
.kopf {
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--linie);
}
/* Die Kopfzeile darf breiter laufen als der Inhalt darunter: Logo, sieben
   Menuepunkte, Rufnummer und Schaltflaeche passen in 1200 px nicht nebeneinander.
   Die Begrenzung des Inhalts bleibt davon unberuehrt. */
.kopf .mitte { width: min(100% - 2.5rem, 1440px); }
.kopf__innen { display: flex; align-items: center; gap: 1.2rem; height: 72px; }
/* Die Marke behaelt ihre Breite; schrumpfen darf die Navigation. Sonst
   schiebt sich bei knappem Platz ein Menuepunkt ueber den Schriftzug. */
.marke { display: flex; align-items: center; gap: .6rem; color: var(--text); text-decoration: none; font-weight: 800; font-size: 1.35rem; letter-spacing: -.03em; flex: 0 0 auto; white-space: nowrap; }
.marke:hover { text-decoration: none; color: var(--text); }
.marke img { width: 36px; height: 36px; }

.navi { display: flex; align-items: center; gap: .1rem; margin-left: .6rem; }
.navi > a, .navi__gruppe > a {
    display: inline-flex; align-items: center; gap: .35rem;
    color: var(--text); text-decoration: none;
    padding: .55rem .75rem; border-radius: var(--radius);
    font-size: .98rem; font-weight: 600;
}
.navi > a:hover, .navi__gruppe > a:hover, .navi__gruppe:hover > a, .navi__gruppe:focus-within > a { background: var(--flaeche); color: var(--blau-tief); text-decoration: none; }
.navi a[aria-current="page"] { color: var(--blau-tief); }
.navi__gruppe { position: relative; }
.navi__gruppe > a::after {
    content: ""; width: .42rem; height: .42rem; margin-left: .1rem;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg); opacity: .6;
}
.navi__menue {
    position: absolute; left: 0; top: calc(100% + 6px);
    min-width: 320px; background: #fff;
    border: 1px solid var(--linie); border-radius: var(--radius-gross);
    box-shadow: var(--schatten); padding: .6rem;
    display: none; z-index: 60;
}
.navi__gruppe:hover > .navi__menue, .navi__gruppe:focus-within > .navi__menue { display: block; }
/* Unsichtbare Brücke über den Spalt zwischen Menüpunkt und Aufklappmenü, sonst schließt es beim Hinfahren. */
.navi__menue::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.navi__eintrag {
    display: grid; grid-template-columns: 38px 1fr; gap: .15rem .8rem; align-items: center;
    padding: .6rem .7rem; border-radius: var(--radius); color: var(--text); text-decoration: none;
}
.navi__eintrag:hover { background: var(--flaeche); text-decoration: none; color: var(--text); }
.navi__eintrag svg { grid-row: span 2; width: 38px; height: 38px; padding: 8px; border-radius: 9px; background: var(--blau-schleier); color: var(--blau); }
.navi__eintrag b { font-size: .95rem; font-weight: 700; }
.navi__eintrag span { font-size: .84rem; color: var(--text-leise); line-height: 1.35; }

.kopf__rechts { margin-left: auto; display: flex; align-items: center; gap: .9rem; flex: 0 0 auto; }
.kopf__telefon { font-weight: 700; color: var(--text); font-size: .95rem; white-space: nowrap; }
.kopf__telefon:hover { color: var(--blau); text-decoration: none; }

.navi-schalter { display: none; background: #fff; border: 1px solid var(--linie); color: var(--text); border-radius: var(--radius); padding: .5rem .8rem; font-size: .95rem; font-weight: 600; cursor: pointer; margin-left: auto; font-family: inherit; }
.navi .knopf--klein { display: none; }

@media (max-width: 1380px) {
    .kopf__telefon { display: none; }
    .navi > a, .navi__gruppe > a { padding: .55rem .5rem; font-size: .92rem; }
}
@media (max-width: 1150px) {
    .navi-schalter { display: block; }
    .kopf__rechts { display: none; }
    .navi .knopf--klein { display: inline-block; }
    .navi {
        position: absolute; top: 72px; left: 0; right: 0;
        background: #fff; flex-direction: column; align-items: stretch;
        padding: .6rem 1.25rem 1.2rem; gap: .1rem; display: none;
        border-bottom: 1px solid var(--linie); box-shadow: var(--schatten);
        max-height: calc(100dvh - 72px); overflow-y: auto; margin: 0;
    }
    .navi[data-offen="ja"] { display: flex; }
    .navi > a, .navi__gruppe > a { padding: .8rem .6rem; font-size: 1rem; }
    .navi__gruppe > a::after { display: none; }
    .navi__menue { position: static; display: block; min-width: 0; border: 0; box-shadow: none; padding: 0 0 .4rem .4rem; }
    .navi .knopf { margin-top: .6rem; text-align: center; }
}

/* --- Schaltflächen ----------------------------------------------------- */
.knopf {
    display: inline-block;
    background: var(--blau);
    color: #fff;
    border: 1px solid var(--blau);
    padding: .75rem 1.35rem;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.4;
    transition: background .15s ease, border-color .15s ease;
}
.knopf:hover { background: var(--blau-tief); border-color: var(--blau-tief); color: #fff; text-decoration: none; }
.knopf:disabled, .knopf[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.knopf--rand { background: #fff; color: var(--blau-tief); border-color: #bccde6; }
.knopf--rand:hover { background: var(--blau-schleier); color: var(--blau-tief); border-color: var(--blau); }
.knopf--hell { background: #fff; color: var(--navy); border-color: #fff; }
.knopf--hell:hover { background: #e6eef9; color: var(--navy); border-color: #e6eef9; }
.knopf--breit { width: 100%; text-align: center; }
.knopf--gross { font-size: 1.05rem; padding: .9rem 1.7rem; }
.knopf--klein { font-size: .9rem; padding: .45rem .95rem; }

/* --- Bühne (Startseite) und Aufmacher (Unterseiten) -------------------- */
.buehne { background: var(--flaeche); border-bottom: 1px solid var(--linie); }
.buehne__innen { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items: center; padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.buehne__kicker { display: inline-flex; align-items: center; gap: .5rem; font-size: .88rem; font-weight: 700; color: var(--blau-tief); background: #fff; border: 1px solid var(--linie); border-radius: 20px; padding: .3rem .8rem; margin-bottom: 1.2rem; }
.buehne h1 { max-width: 16ch; }
.buehne__text { font-size: clamp(1.05rem, .95rem + .4vw, 1.2rem); color: var(--text-leise); max-width: 52ch; margin-bottom: 1.6rem; }
.buehne__knoepfe { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.4rem; }
.buehne__fakten { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; font-size: .92rem; color: var(--text-leise); }
.buehne__fakten span::before { content: "✓"; color: var(--gruen); font-weight: 800; margin-right: .4rem; }
.buehne__bild { border-radius: var(--radius-gross); overflow: hidden; box-shadow: var(--schatten); aspect-ratio: 4 / 3; }
.buehne__bild img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
    .buehne__innen { grid-template-columns: 1fr; gap: 1.8rem; }
    .buehne h1 { max-width: none; }
    .buehne__bild { aspect-ratio: 16 / 9; }
}

.aufmacher { background: var(--flaeche); border-bottom: 1px solid var(--linie); padding: clamp(2.2rem, 5vw, 3.6rem) 0; }
.aufmacher__innen { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
.aufmacher h1 { max-width: 18ch; }
.aufmacher__text { font-size: clamp(1.02rem, .95rem + .3vw, 1.15rem); color: var(--text-leise); max-width: 56ch; margin-bottom: 1.3rem; }
.aufmacher__punkte { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--linie); color: var(--text-leise); font-size: .92rem; }
.aufmacher__punkte b { color: var(--text); display: block; font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; }
.aufmacher__bild { border-radius: var(--radius-gross); overflow: hidden; box-shadow: var(--schatten); aspect-ratio: 4 / 3; }
.aufmacher__bild img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
    .aufmacher__innen { grid-template-columns: 1fr; gap: 1.6rem; }
    .aufmacher h1 { max-width: none; }
    .aufmacher__bild { aspect-ratio: 16 / 9; }
}

/* --- Produktkategorien (Startseite) ----------------------------------- */
.kategorien { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.kategorie {
    display: grid; grid-template-columns: 46px 1fr; gap: .2rem 1rem; align-items: start;
    background: #fff; border: 1px solid var(--linie); border-radius: var(--radius-gross);
    padding: 1.15rem 1.2rem; color: var(--text); text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.kategorie:hover { text-decoration: none; color: var(--text); border-color: var(--blau-hell); box-shadow: var(--schatten); transform: translateY(-2px); }
.kategorie svg { grid-row: span 3; width: 46px; height: 46px; padding: 10px; border-radius: 11px; background: var(--blau-schleier); color: var(--blau); }
.kategorie b { font-size: 1.05rem; font-weight: 800; }
.kategorie span { font-size: .92rem; color: var(--text-leise); line-height: 1.4; }
.kategorie i { font-style: normal; font-weight: 700; color: var(--blau-tief); font-size: .92rem; margin-top: .25rem; }

/* --- Faktenband -------------------------------------------------------- */
.band { display: grid; gap: 1.2rem 2rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); padding: 1.6rem 0; }
.band div { border-left: 3px solid var(--blau); padding-left: 1rem; }
.band b { display: block; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.band span { color: var(--text-leise); font-size: .93rem; }

/* --- Bildtafel: Foto neben Text ---------------------------------------- */
.tafel { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 3.5rem); align-items: center; }
.tafel--rechts .tafel__bild { order: 2; }
.tafel__bild { border-radius: var(--radius-gross); overflow: hidden; box-shadow: var(--schatten); aspect-ratio: 4 / 3; }
.tafel__bild img { width: 100%; height: 100%; object-fit: cover; }
.tafel__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 1.4rem; margin: 1.2rem 0 0; padding: 0; list-style: none; font-size: .96rem; }
.tafel__liste li { padding-left: 1.4rem; position: relative; }
.tafel__liste li::before { content: "✓"; position: absolute; left: 0; color: var(--gruen); font-weight: 800; }
@media (max-width: 820px) { .tafel { grid-template-columns: 1fr; } .tafel--rechts .tafel__bild { order: 0; } .tafel__liste { grid-template-columns: 1fr; } }

/* --- Produktkacheln ---------------------------------------------------- */
.kacheln { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); align-items: stretch; }
.kacheln--vier { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.kacheln--drei { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.kacheln--fuenf { grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); }
/* Fünf Kacheln nebeneinander: etwas enger, damit Preis und Knopf in einer Zeile bleiben. */
.kacheln--fuenf .kachel { padding: 1.4rem 1.1rem 1.2rem; }
.kacheln--fuenf .kachel__preis b { font-size: 1.7rem; }
.kacheln--fuenf .kachel__daten { gap: .5rem; }
.kacheln--fuenf .kachel__daten b { font-size: 1rem; }
.kacheln--fuenf .kachel .knopf { padding-inline: .6rem; font-size: .92rem; }

.kachel {
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: var(--radius-gross);
    padding: 1.5rem 1.4rem 1.4rem;
    display: flex;
    flex-direction: column;
    position: relative;
    min-width: 0;
    transition: box-shadow .16s ease, border-color .16s ease, transform .16s ease;
}
@supports (grid-template-rows: subgrid) {
    /* grid-template-columns bekommt hier bewusst eine echte Spaltenfunktion
       (minmax(0,1fr)) statt der Vorgabe "none": ohne sie darf die Spalte
       durch Inhalt breiter werden wollen als die Kachel selbst (Knopf, lange
       Listenpunkte) — bei gleich breiten Nachbarspalten wächst dann nicht
       die Spalte, sondern der Inhalt ragt über den Kachelrahmen hinaus. Mit
       minmax(0,1fr) bleibt die Spalte immer exakt so breit wie die Kachel,
       jeder Inhalt muss sich einordnen. */
    .kachel--produkt { display: grid; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); grid-row: span 7; align-content: start; }
    /* Übersichtskacheln tragen ein Foto statt Kennwerten; sie stehen für
       sich und brauchen die zeilenweise Ausrichtung nicht. */
    .kachel--uebersicht { display: flex; flex-direction: column; grid-row: auto; }
}
.kachel:hover { border-color: var(--blau-hell); box-shadow: var(--schatten); }
@media (hover: hover) and (pointer: fine) {
    /* Hervorhebung nur dort, wo eine Maus wirklich "schwebt" — auf
       Touch-Geräten gibt es keinen Zeigerabstand, das würde nur zu einem
       hängenbleibenden Zustand nach dem Antippen führen. */
    .kachel:hover { transform: translateY(-2px) scale(1.015); z-index: 1; }
}
.kachel--betont { border-color: var(--blau); box-shadow: 0 0 0 3px rgba(26,99,200,.10); }
.kachel__marke {
    position: absolute; top: -11px; left: 1.3rem;
    background: var(--blau); color: #fff;
    font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    padding: .22rem .7rem; border-radius: 20px;
}
.kachel__bild { margin: -1.5rem -1.4rem 1.1rem; border-radius: var(--radius-gross) var(--radius-gross) 0 0; overflow: hidden; height: 190px; }
.kachel__bild img { width: 100%; height: 100%; object-fit: cover; }
.kachel__name { font-size: 1.25rem; font-weight: 800; margin: 0 0 .15rem; letter-spacing: -.02em; }
.kachel__zweck { color: var(--text-leise); font-size: .93rem; margin: 0 0 1rem; min-height: 2.7em; }
/* Der abschliessende Knopf wird ans untere Ende der Kachel geschoben. Da die
   Kacheln eines Rasters ohnehin auf gleiche Hoehe gestreckt werden, stehen die
   Knoepfe damit alle auf einer Linie - auch wenn die Texte darueber
   unterschiedlich lang sind. Produktkacheln bleiben aussen vor, die richten
   ihre Zeilen bereits ueber Subgrid aus. */
.kachel:not(.kachel--produkt) > .knopf:last-child { margin-top: auto; }
.kachel__preis { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .5rem; margin-bottom: .1rem; min-width: 0; }
.kachel__preis b { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; overflow-wrap: break-word; }
.kachel__preis span { color: var(--text-leise); font-size: .95rem; }
.kachel__preis-fuss { color: var(--text-leise); font-size: .82rem; margin: 0 0 1.1rem; }
.kachel__liste { list-style: none; margin: 0 0 1.3rem; padding: 0; flex: 1 1 auto; min-width: 0; }
.kachel__liste li { padding: .3rem 0 .3rem 1.45rem; position: relative; font-size: .94rem; overflow-wrap: break-word; }
.kachel__liste li::before { content: "✓"; position: absolute; left: .1rem; top: .28rem; color: var(--gruen); font-weight: 800; }
.kachel__daten { display: flex; gap: .75rem; margin: 0 0 1rem; padding: .75rem 0; border-block: 1px solid var(--linie); }
/* min-width:0 ist hier die eigentliche Reparatur: Ohne sie darf ein
   Flex-Kind mit einem einzelnen, nicht umbrechbaren Wort (z. B.
   "POSTFÄCHER") breiter bleiben wollen als sein Drittel der Zeile — die
   Zeile läuft dann über den Kachelrahmen hinaus, statt das Wort brechen zu
   lassen. */
.kachel__daten div { text-align: center; flex: 1; min-width: 0; }
.kachel__daten b { display: block; font-size: 1.1rem; font-weight: 800; overflow-wrap: break-word; }
.kachel__daten span { color: var(--text-leise); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; overflow-wrap: break-word; hyphens: auto; }
.kachel__daten--leer { border: 0; padding: 0; margin: 0; }

/* --- Merkmale ---------------------------------------------------------- */
.merkmale { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.merkmale--drei { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.merkmal { background: #fff; border: 1px solid var(--linie); border-radius: var(--radius-gross); padding: 1.3rem 1.3rem 1.2rem; }
.merkmal h3 { margin-bottom: .35rem; font-size: 1.05rem; }
.merkmal p { color: var(--text-leise); font-size: .95rem; margin: 0; }
.abschnitt--dunkel .merkmal { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.abschnitt--dunkel .merkmal p { color: #b4c4dc; }

/* --- Tabellen ---------------------------------------------------------- */
.tabelle-rahmen { position: relative; overflow-x: auto; border: 1px solid var(--linie); border-radius: var(--radius-gross); background: #fff; }
table.daten { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 620px; }
table.daten th, table.daten td { padding: .85rem 1rem; text-align: center; border-bottom: 1px solid var(--linie); }
table.daten th { background: var(--flaeche); font-weight: 700; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-leise); }
table.daten th:first-child, table.daten td:first-child { text-align: left; }
table.daten th, table.daten td { white-space: nowrap; }
table.daten td.fliesstext { white-space: normal; }
table.daten tr:last-child td { border-bottom: 0; }
table.daten tbody tr:hover { background: #fafcff; }

/* --- Formularfelder ---------------------------------------------------- */
.feld { margin-bottom: 1.05rem; }
.feld > label { display: block; font-size: .92rem; font-weight: 700; margin-bottom: .3rem; }
.feld__hinweis { color: var(--text-leise); font-size: .85rem; margin: .3rem 0 0; }
input[type=text], input[type=email], input[type=tel], input[type=search], input[type=password], select, textarea {
    width: 100%;
    font: inherit;
    font-size: 1rem;
    padding: .7rem .85rem;
    border: 1px solid #c5d0de;
    border-radius: var(--radius);
    background: #fff;
    color: var(--text);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--blau-hell); outline-offset: 1px; border-color: var(--blau); }
input[aria-invalid="true"] { border-color: var(--rot); }
.feld__fehler { color: var(--rot); font-size: .88rem; margin: .3rem 0 0; }
.zeile { display: grid; gap: 0 1rem; grid-template-columns: 1fr 1fr; }
.zeile--drittel { grid-template-columns: 1fr 2fr; }
@media (max-width: 620px) { .zeile, .zeile--drittel { grid-template-columns: 1fr; } }

/* --- Auswahlkacheln ---------------------------------------------------- */
.wahl { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
/* Das Raster streckt den Wrapper, die Kachel darin bleibt sonst so hoch wie ihr
   Text - dann steht neben einer zweizeiligen eine kurze, niedrigere Kachel. */
.wahl > * { display: flex; }
.wahl > * > .wahl__kachel { flex: 1 1 auto; }
.wahl__feld { position: absolute; opacity: 0; pointer-events: none; }
.wahl__kachel { display: block; cursor: pointer; border: 1px solid var(--linie); border-radius: var(--radius); padding: .95rem 1.1rem; background: #fff; transition: border-color .12s ease, background .12s ease; }
.wahl__kachel:hover { border-color: var(--blau-hell); }
.wahl__feld:checked + .wahl__kachel { border-color: var(--blau); background: var(--blau-schleier); box-shadow: 0 0 0 2px rgba(26,99,200,.12); }
.wahl__feld:focus-visible + .wahl__kachel { outline: 2px solid var(--blau-hell); outline-offset: 2px; }
.wahl__kachel b { display: block; font-size: 1rem; }
.wahl__kachel span { display: block; color: var(--text-leise); font-size: .87rem; margin-top: .1rem; }

/* --- Hinweisfelder ----------------------------------------------------- */
.hinweis { border-radius: var(--radius); padding: .85rem 1.1rem; font-size: .95rem; margin: 0 0 1.2rem; border: 1px solid; }
.hinweis--info { background: var(--blau-schleier); border-color: #c3daf7; color: #10386f; }
.hinweis--gut, .hinweis--erfolg { background: #eef7f2; border-color: #b9ded0; color: #14532d; }
.hinweis--warnung { background: #fdf6e7; border-color: #ecd9a8; color: #6b4b00; }
.hinweis--fehler { background: #fdefee; border-color: #f0c3bf; color: #8c1d16; }

/* --- Fußzeile ---------------------------------------------------------- */
.fuss { background: var(--flaeche); border-top: 1px solid var(--linie); color: var(--text-leise); padding: 3rem 0 1.6rem; font-size: .93rem; }
.fuss__raster { display: grid; gap: 2rem; grid-template-columns: 1.3fr repeat(3, 1fr); margin-bottom: 2.2rem; }
@media (max-width: 820px) { .fuss__raster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .fuss__raster { grid-template-columns: 1fr; } }
.fuss h2 { color: var(--text); font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .9rem; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: .45rem; }
.fuss a { color: var(--text-leise); text-decoration: none; }
.fuss a:hover { color: var(--blau); text-decoration: underline; }
.fuss__unten { border-top: 1px solid var(--linie); padding-top: 1.3rem; display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: center; }
.fuss__unten p { margin: 0; }
.fuss__zahlarten { margin-left: auto; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.fuss__zahlarten span { border: 1px solid var(--linie); background: #fff; border-radius: 6px; padding: .2rem .6rem; font-size: .82rem; }
.fuss__zahlarten span:first-child { border: 0; background: none; padding: 0; }

/* --- Einwilligung ------------------------------------------------------ */
/* Dunkler Grund: Der Hinweis liegt ueber der Seite und soll sich klar davon
   absetzen, statt wie ein weiterer Inhaltsblock zu wirken. */
.einwilligung { position: fixed; inset: auto 0 0 0; z-index: 100; background: #1b1f24; color: #e6eaf0; border-top: 2px solid var(--blau-hell); box-shadow: 0 -8px 40px rgba(0,0,0,.45); padding: 1.3rem 0; }
.einwilligung a { color: #9fc0f5; }
.einwilligung a:hover { color: #c9dcfb; }
/* Der zweite Knopf traegt auf hellem Grund einen blassen Rahmen - auf dunklem
   Grund waere er ein weisser Block. Hier steht er als heller Umriss. */
.einwilligung .knopf--rand { background: transparent; color: #e6eaf0; border-color: #55606f; box-shadow: none; }
.einwilligung .knopf--rand:hover { background: rgba(255,255,255,.08); color: #fff; border-color: #8ea2bb; }
/* Die Knoepfe stehen unten rechts, nicht auf halber Hoehe des Textes: Der Text
   ist mehrzeilig, mittig ausgerichtete Knoepfe schwimmen darin. Unten rechts
   ist ausserdem die Stelle, an der man eine Entscheidung erwartet. */
.einwilligung__innen { display: flex; gap: 1.6rem; align-items: flex-end; flex-wrap: wrap; }
.einwilligung__text { flex: 1 1 320px; font-size: .93rem; }
/* Nur die Ueberschrift steht auf eigener Zeile. Galt die Regel fuer jedes
   fettgedruckte Wort, riss sie hervorgehobene Begriffe mitten im Satz aus
   der Zeile heraus. */
#einwilligung-titel { display: block; font-size: 1.02rem; margin-bottom: .2rem; }
.einwilligung__knoepfe { display: flex; gap: .6rem; flex-wrap: wrap; margin-left: auto; justify-content: flex-end; }
@media (max-width: 620px) {
    /* Auf schmalen Geraeten stehen die Knoepfe unter dem Text und fuellen die
       Breite - nebeneinander waeren sie dort zu schmal zum Treffen. */
    .einwilligung__knoepfe { margin-left: 0; width: 100%; }
    .einwilligung__knoepfe .knopf { flex: 1 1 auto; text-align: center; }
}

/* --- Kleinteile -------------------------------------------------------- */
.marke-klein { display: inline-block; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: .2rem .65rem; border-radius: 20px; background: var(--blau-schleier); color: var(--blau-tief); }
.leise { color: var(--text-leise); font-size: .9rem; }
.mittig { text-align: center; }
.abstand-oben { margin-top: 1.6rem; }
.nur-lesbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pfad { font-size: .86rem; color: var(--text-leise); padding: 0 0 .8rem; }
.pfad a { color: var(--text-leise); }

/* --- Fortschritt der Bestellung ---------------------------------------- */
.schritte { display: flex; gap: .4rem; margin-bottom: 2rem; flex-wrap: wrap; }
.schritte__punkt { flex: 1 1 0; min-width: 92px; font-size: .82rem; color: var(--text-leise); padding-top: .55rem; border-top: 3px solid var(--linie); }
.schritte__punkt[data-stand="aktiv"] { color: var(--blau-tief); font-weight: 700; border-top-color: var(--blau); }
.schritte__punkt[data-stand="fertig"] { color: var(--gruen); border-top-color: var(--gruen); }

/* --- Bestätigungscode -------------------------------------------------- */
.code { display: flex; gap: .55rem; justify-content: center; margin: 1.4rem 0; }
.code input { width: 3.1rem; height: 3.8rem; text-align: center; font-size: 1.6rem; font-weight: 700; padding: 0; border: 2px solid #c5d0de; border-radius: 12px; font-variant-numeric: tabular-nums; }
.code[data-stand="falsch"] input { border-color: var(--rot); background: #fdefee; color: var(--rot); }
.code[data-stand="richtig"] input { border-color: var(--gruen); background: #eef7f2; color: var(--gruen); }
.code[data-stand="falsch"] { animation: wackeln .5s; }
@keyframes wackeln { 0%, 100% { transform: translateX(0); } 15%, 45%, 75% { transform: translateX(-9px); } 30%, 60%, 90% { transform: translateX(9px); } }
@media (prefers-reduced-motion: reduce) { .code[data-stand="falsch"] { animation: none; } html { scroll-behavior: auto; } .kategorie:hover, .kachel:hover { transform: none; } }

/* --- Warenkorb --------------------------------------------------------- */
.korb { background: #fff; border: 1px solid var(--linie); border-radius: var(--radius-gross); padding: 1.4rem; position: sticky; top: 92px; }
.korb h3 { font-size: 1.05rem; }
.korb__zeile { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid #eef1f5; font-size: .95rem; }
.korb__zeile span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.korb__summe { display: flex; justify-content: space-between; padding-top: .9rem; margin-top: .6rem; border-top: 2px solid var(--text); font-weight: 800; font-size: 1.15rem; }
.korb__hinweis { color: var(--text-leise); font-size: .84rem; margin-top: .8rem; }
.korb__weg { background: none; border: 0; padding: 0; margin-left: .35rem; color: var(--text-leise); font: inherit; font-size: .8rem; text-decoration: underline; cursor: pointer; }
.korb__weg:hover { color: var(--rot); }
.korb__leeren { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid #eef1f5; }
.korb__leeren .korb__weg { margin: 0; font-size: .86rem; }
.bestell-raster { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.bestell-raster > * { min-width: 0; }
@media (max-width: 900px) { .bestell-raster { grid-template-columns: 1fr; } .korb { position: static; } }

/* --- Suche ------------------------------------------------------------- */
.suche { display: flex; gap: .6rem; max-width: 620px; }
.suche input { flex: 1 1 auto; }
.treffer { margin-top: 1.2rem; border: 1px solid var(--linie); border-radius: var(--radius-gross); background: #fff; overflow: hidden; max-width: 720px; }
.treffer__zeile { display: flex; align-items: center; gap: 1rem; padding: .85rem 1.1rem; border-bottom: 1px solid #eef1f5; }
.treffer__zeile:last-child { border-bottom: 0; }
.treffer__name { flex: 1 1 auto; font-weight: 700; word-break: break-all; }
.treffer__preis { white-space: nowrap; font-variant-numeric: tabular-nums; }
.treffer__frei { color: var(--gruen); font-weight: 700; font-size: .9rem; }
.treffer__belegt { color: var(--text-leise); font-size: .9rem; }

/* --- Textseiten -------------------------------------------------------- */
.text-seite { max-width: 780px; }
.text-seite h2 { margin-top: 2.2rem; font-size: 1.35rem; }
.text-seite h3 { margin-top: 1.6rem; font-size: 1.08rem; }
.text-seite ul, .text-seite ol { padding-left: 1.3rem; }
.text-seite li { margin-bottom: .4rem; }
.text-seite dl { margin: 0 0 1.4rem; }
.text-seite dt { font-weight: 700; margin-top: .8rem; }
.text-seite dd { margin: 0 0 .4rem; color: var(--text-leise); }

/* --- Fragen und Antworten ---------------------------------------------- */
.fragen { display: grid; gap: .6rem; max-width: 820px; }
.fragen details { background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: 0 1.1rem; }
.fragen summary { cursor: pointer; font-weight: 700; padding: .9rem 0; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; color: var(--blau); font-weight: 800; }
.fragen details[open] summary::after { content: "–"; }
.fragen p { color: var(--text-leise); margin: 0 0 1rem; }

/* --- Farbe ------------------------------------------------------------- */
/* Jede Produktgruppe hat einen eigenen Akzent; Seiten und Kacheln greifen ihn
   über --akz ab. Ohne Zuordnung bleibt es beim Markenblau. */
:root {
    --akz-web:    #1a63c8;
    --akz-server: #6b3fd6;
    --akz-domain: #0e8f8a;
    --akz-games:  #1f9e4e;
    --akz-stream: #e4602c;
    --akz-dyndns: #d4900a;
    --akz-navy:   #35507a;
}
.f-web    { --akz: var(--akz-web); }
.f-server { --akz: var(--akz-server); }
.f-domain { --akz: var(--akz-domain); }
.f-games  { --akz: var(--akz-games); }
.f-stream { --akz: var(--akz-stream); }
.f-dyndns { --akz: var(--akz-dyndns); }
.f-navy   { --akz: var(--akz-navy); }

.kategorie svg, .navi__eintrag svg {
    color: #fff; stroke-width: 2.1;
    background: linear-gradient(135deg, var(--akz, var(--blau)), color-mix(in srgb, var(--akz, var(--blau)) 62%, #fff));
    box-shadow: 0 4px 10px color-mix(in srgb, var(--akz, var(--blau)) 35%, transparent);
}
.kategorie:hover { border-color: var(--akz, var(--blau)); background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--akz, var(--blau)) 7%, #fff)); }
.kategorie i { color: var(--akz, var(--blau-tief)); }
.navi__eintrag:hover { background: color-mix(in srgb, var(--akz, var(--blau)) 8%, #fff); }

.buehne { position: relative; overflow: hidden; border-bottom: 0; background: linear-gradient(120deg, #e6f0ff 0%, #f6f8fb 52%, #fff0e6 100%); }
.buehne::before, .buehne::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.buehne::before { width: 560px; height: 560px; right: -140px; top: -260px; background: radial-gradient(circle, rgba(77,155,238,.30), transparent 65%); }
.buehne::after  { width: 460px; height: 460px; left: -180px; bottom: -260px; background: radial-gradient(circle, rgba(228,96,44,.20), transparent 65%); }
.buehne__innen { position: relative; }
.buehne__kicker { color: #fff; border: 0; background: linear-gradient(90deg, var(--blau), var(--akz-server)); box-shadow: 0 3px 8px rgba(26,99,200,.25); }
.aufmacher { border-bottom: 0; background: linear-gradient(120deg, color-mix(in srgb, var(--akz, var(--blau)) 12%, #fff) 0%, #f6f8fb 55%, #fdf3ec 100%); }
.aufmacher__punkte b { color: var(--akz, var(--text)); }

.knopf { background: linear-gradient(180deg, #2b78e0, #1a63c8); border-color: #1a63c8; box-shadow: 0 2px 6px rgba(26,99,200,.25); }
.knopf:hover { background: linear-gradient(180deg, #1f69cf, #0d4392); border-color: #0d4392; }
.knopf--rand { background: #fff; color: var(--blau-tief); border-color: #bccde6; box-shadow: none; }
.knopf--rand:hover { background: var(--blau-schleier); color: var(--blau-tief); border-color: var(--blau); }
.knopf--hell { background: #fff; color: var(--navy); border-color: #fff; box-shadow: none; }
.knopf--hell:hover { background: #e6eef9; color: var(--navy); border-color: #e6eef9; }

.band div:nth-child(1) { border-color: var(--akz-web); }
.band div:nth-child(2) { border-color: var(--akz-games); }
.band div:nth-child(3) { border-color: var(--akz-domain); }
.band div:nth-child(4) { border-color: var(--akz-stream); }

.kachel--produkt { border-color: color-mix(in srgb, var(--akz, var(--blau)) 35%, var(--linie)); border-top: 4px solid var(--akz, var(--blau)); }
.kachel--produkt .kachel__preis b { color: var(--akz, var(--text)); }
.kachel--betont { border-color: var(--akz, var(--blau)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--akz, var(--blau)) 14%, transparent), var(--schatten); }
.kachel__marke { background: linear-gradient(90deg, var(--akz, var(--blau)), color-mix(in srgb, var(--akz, var(--blau)) 70%, #fff)); }
.kachel--uebersicht .kachel__preis b { color: var(--akz, var(--text)); }

.merkmal { border-top: 3px solid var(--akz-web); }
.merkmale > .merkmal:nth-child(4n+2) { border-top-color: var(--akz-games); }
.merkmale > .merkmal:nth-child(4n+3) { border-top-color: var(--akz-stream); }
.merkmale > .merkmal:nth-child(4n+4) { border-top-color: var(--akz-server); }
.abschnitt--dunkel { background: linear-gradient(135deg, #0b1f3d 0%, #143d7c 100%); }
.abschnitt--dunkel .merkmal { border-top-color: rgba(255,255,255,.35); }

.fuss { background: var(--navy); border-top: 0; color: #b4c4dc; }
.fuss h2 { color: #fff; }
.fuss a { color: #dbe6f7; }
.fuss a:hover { color: #fff; }
.fuss .marke { color: #fff; }
.fuss__unten { border-top-color: rgba(255,255,255,.14); }
.fuss__zahlarten span { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #dbe6f7; }

/* --- Beratung ---------------------------------------------------------- */
.berater__verlauf { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .4rem; }
.berater__verlauf li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; font-size: .92rem; color: var(--text-leise); border-left: 3px solid var(--gruen); padding-left: .8rem; }
.berater__verlauf b { color: var(--text); font-weight: 700; }
.berater__aendern { background: none; border: 0; padding: 0; color: var(--blau); font: inherit; font-size: .86rem; text-decoration: underline; cursor: pointer; }
.berater__aendern:hover { color: var(--blau-tief); }

/* --- Systemstatus ------------------------------------------------------ */
.status__banner { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; border-radius: var(--radius-gross); padding: 1rem 1.2rem; color: #fff; margin-bottom: 1.6rem; }
.status__banner b { font-size: 1.1rem; }
.status__banner span { font-size: .92rem; opacity: .9; }
.status__banner a { color: #fff; text-decoration: underline; }
.status__banner--gut { background: linear-gradient(90deg, #1f7a4d, #2ea36a); }
.status__banner--stoerung { background: linear-gradient(90deg, #b3261e, #d4553f); }
.status__liste { display: grid; gap: .5rem 1.6rem; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.status__system--pausiert { opacity: .72; }
.status__system { display: flex; align-items: center; gap: .7rem; padding: .55rem .8rem; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); }
.status__punkt { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--gruen); }
.status__punkt--gestoert { background: #d4900a; }
.status__punkt--pausiert { background: #b9c2ce; }
.status__punkt--unten { background: var(--rot); }
.status__name { flex: 1 1 auto; font-weight: 600; font-size: .95rem; }
.status__quote { color: var(--text-leise); font-size: .88rem; font-variant-numeric: tabular-nums; }

/* --- Querverweise ------------------------------------------------------
   Eine schlanke Zeile am Ende eines Abschnitts, die auf verwandte Seiten
   zeigt. Bewusst kein Kasten und keine Einleitung: Sie soll fuehren, nicht
   den Blick aufhalten. */
.verweise { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; align-items: baseline; margin: 1.6rem 0 0; font-size: .95rem; color: var(--text-leise); }
.verweise b { font-weight: 600; color: var(--text); }
.verweise a { font-weight: 600; }
.verweise a::after { content: " →"; font-weight: 400; opacity: .55; }
.abschnitt--dunkel .verweise { color: #b4c4dc; }