/* ---------------------------------------------------------------------------
   Skilo – Produktseite
   Ein Stylesheet, keine Abhängigkeiten, keine externen Schriften.
   Aufbau und Klassennamen sind dieselben wie bei den übrigen Produktseiten
   von Creative-IT Solutions, damit der Inhalt sich ohne Nacharbeit in die
   Rubrik „Produkte" kopieren lässt.

   Die Farben sind Skilos eigene: das Blaugrün einer Seekarte statt des
   Klaro-Blaus. Sie stehen als Custom Properties ganz oben – einmal ändern
   reicht.
   --------------------------------------------------------------------------- */

:root {
    /* Seekarten-Blaugrün. Derselbe Wert wie --sea in der Anwendung selbst,
       damit Produktseite und Programm nicht auseinanderlaufen. */
    --see:        #1C6079;
    --see-dunkel: #144B60;
    --see-blass:  #EDF3F5;
    /* Gefüllte Flächen bleiben in beiden Modi kräftig – auf hellem Blaugrün
       wäre weiße Schrift im Dunkelmodus kaum lesbar. */
    --see-flaeche: #1C6079;
    --auf-see:     #ffffff;

    --text:        #13252D;
    --text-leise:  #46606B;
    --text-fein:   #8AA0A9;
    --grund:       #ffffff;
    --grund-sanft: #F5F8F9;
    --karte:       #ffffff;
    --rand:        #DEE7EA;
    --rand-stark:  #C3D2D7;

    --gruen:  #2E6B4F;
    --gelb:   #9A5A06;
    --rot:    #B3261E;

    --radius:      14px;
    --radius-klein: 8px;
    --schatten:    0 1px 2px rgba(19, 37, 45, .06), 0 8px 24px rgba(19, 37, 45, .06);
    --schatten-stark: 0 2px 4px rgba(19, 37, 45, .08), 0 16px 48px rgba(19, 37, 45, .12);

    --breite: 1120px;
    --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --text:        #E4EDEF;
        --text-leise:  #9FB6BE;
        --text-fein:   #6E8A94;
        --grund:       #0B141A;
        --grund-sanft: #101E26;
        --karte:       #122029;
        --rand:        #223C46;
        --rand-stark:  #335866;
        --see:         #63BAD6;
        --see-dunkel:  #8FD0E4;
        --see-blass:   #12303C;
        --see-flaeche: #1F6E8B;
        --auf-see:     #ffffff;
        --schatten:    0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .3);
        --schatten-stark: 0 2px 4px rgba(0, 0, 0, .4), 0 16px 48px rgba(0, 0, 0, .45);
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --text:        #E4EDEF;
    --text-leise:  #9FB6BE;
    --text-fein:   #6E8A94;
    --grund:       #0B141A;
    --grund-sanft: #101E26;
    --karte:       #122029;
    --rand:        #223C46;
    --rand-stark:  #335866;
    --see:         #63BAD6;
    --see-dunkel:  #8FD0E4;
    --see-blass:   #12303C;
    --see-flaeche: #1F6E8B;
    --auf-see:     #ffffff;
    --schatten:    0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .3);
    --schatten-stark: 0 2px 4px rgba(0, 0, 0, .4), 0 16px 48px rgba(0, 0, 0, .45);
    color-scheme: dark;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--schrift);
    font-size: 17px;
    line-height: 1.65;
    color: var(--text);
    background: var(--grund);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.02em; }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); font-weight: 750; }
h3 { font-size: 1.12rem; font-weight: 700; }
p  { margin: 0 0 1em; }
a  { color: var(--see); }

.wrap { max-width: var(--breite); margin: 0 auto; padding: 0 24px; }
.schmal { max-width: 760px; }

section { padding: 72px 0; }
section.sanft { background: var(--grund-sanft); }

.vorspann {
    display: inline-block;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--see);
    margin-bottom: 10px;
}

.leise { color: var(--text-leise); }
.gross { font-size: 1.15rem; }

/* Kopf -------------------------------------------------------------------- */
.kopf {
    position: sticky; top: 0; z-index: 20;
    background: color-mix(in srgb, var(--grund) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--rand);
}
.kopf .wrap { display: flex; align-items: center; gap: 20px; height: 64px; }
.marke { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.2rem; color: var(--text); text-decoration: none; }
.marke-zeichen {
    width: 30px; height: 30px; border-radius: 9px;
    background: var(--see-flaeche); color: var(--auf-see);
    display: grid; place-items: center;
}
.marke-zeichen svg { width: 18px; height: 18px; }
.kopfnav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
/* :not(.knopf) ist wichtig: ".kopfnav a" wiegt schwerer als ".knopf-voll" und
   wuerde dem Knopf sonst seine Schriftfarbe wegnehmen. */
.kopfnav a:not(.knopf) { color: var(--text-leise); text-decoration: none; font-size: .95rem; font-weight: 500; }
.kopfnav a:not(.knopf):hover { color: var(--text); }
@media (max-width: 720px) { .kopfnav a:not(.knopf) { display: none; } }

/* Knöpfe ------------------------------------------------------------------ */
.knopf {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 20px; border-radius: var(--radius-klein);
    font-weight: 650; font-size: .97rem; text-decoration: none;
    border: 1px solid transparent; cursor: pointer;
    transition: background .15s, border-color .15s, transform .1s;
}
.knopf:active { transform: translateY(1px); }
.knopf-voll { background: var(--see-flaeche); color: var(--auf-see); }
.knopf-voll:hover { background: var(--see-dunkel); }
.knopf-rand { border-color: var(--rand-stark); color: var(--text); background: var(--karte); }
.knopf-rand:hover { border-color: var(--see); color: var(--see); }

/* Aufmacher --------------------------------------------------------------- */
.aufmacher { padding: 88px 0 64px; }
.aufmacher h1 { max-width: 16ch; }
.aufmacher .gross { max-width: 56ch; color: var(--text-leise); }
.aufmacher-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.aufmacher-fein { margin-top: 18px; font-size: .9rem; color: var(--text-fein); }

/* Board-Andeutung --------------------------------------------------------- */
.board {
    margin-top: 52px;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
    padding: 18px;
    background: var(--grund-sanft);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    box-shadow: var(--schatten-stark);
    overflow-x: auto;
}
@media (max-width: 860px) { .board { grid-template-columns: repeat(4, 210px); } }
.spalte-kopf {
    display: flex; align-items: center; gap: 8px;
    font-size: .8rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--text-leise); margin-bottom: 10px;
}
.zahl {
    font-size: .72rem; padding: 1px 7px; border-radius: 20px;
    background: var(--rand); color: var(--text-leise); letter-spacing: 0;
}
.karte {
    background: var(--karte); border: 1px solid var(--rand);
    border-left: 3px solid var(--see);
    border-radius: 10px; padding: 11px 13px; margin-bottom: 10px;
    box-shadow: var(--schatten);
}
.karte-nr { font-size: .72rem; font-weight: 700; color: var(--text-fein); letter-spacing: .04em; }
.karte-titel { font-size: .93rem; font-weight: 600; margin: 3px 0 8px; line-height: 1.35; }
.karte-fuss { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.plakette {
    font-size: .72rem; padding: 2px 8px; border-radius: 20px;
    border: 1px solid var(--rand-stark); color: var(--text-leise);
}
.plakette-rot   { border-color: var(--rot);   color: var(--rot); }
.plakette-gelb  { border-color: var(--gelb);  color: var(--gelb); }
.plakette-gruen { border-color: var(--gruen); color: var(--gruen); }
.kopfbild {
    width: 24px; height: 24px; border-radius: 50%;
    display: grid; place-items: center; color: #fff;
    font-size: .68rem; font-weight: 700; margin-left: auto;
}

/* Raster ------------------------------------------------------------------ */
.raster { display: grid; gap: 22px; }
.raster-2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.raster-3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }

.merkmal {
    background: var(--karte); border: 1px solid var(--rand);
    border-radius: var(--radius); padding: 22px;
}
.merkmal-zeichen {
    width: 38px; height: 38px; border-radius: 10px;
    background: var(--see-blass); color: var(--see);
    display: grid; place-items: center; margin-bottom: 13px;
}
.merkmal-zeichen svg { width: 20px; height: 20px; }
.merkmal h3 { margin-bottom: 6px; }
.merkmal p { margin: 0; font-size: .95rem; color: var(--text-leise); }

/* Zielgruppen ------------------------------------------------------------- */
.wer { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.wer span {
    padding: 7px 15px; border-radius: 30px;
    border: 1px solid var(--rand-stark); background: var(--karte);
    font-size: .92rem; color: var(--text-leise);
}

/* Preise ------------------------------------------------------------------ */
.preise { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); margin-top: 34px; align-items: start; }
.tarif {
    background: var(--karte); border: 1px solid var(--rand);
    border-radius: var(--radius); padding: 26px; position: relative;
    display: flex; flex-direction: column; height: 100%;
}
.tarif-hervor { border-color: var(--see); border-width: 2px; box-shadow: var(--schatten-stark); }
.tarif-fahne {
    position: absolute; top: -12px; left: 26px;
    background: var(--see-flaeche); color: var(--auf-see);
    font-size: .74rem; font-weight: 700; letter-spacing: .04em;
    padding: 4px 12px; border-radius: 20px; text-transform: uppercase;
}
/* Eine Fahne, die nichts anpreist, sondern nur einordnet. */
.tarif-fahne-still { background: var(--rand-stark); color: var(--text-leise); }
.tarif h3 { font-size: 1.25rem; margin-bottom: 4px; }
.tarif-zweck { font-size: .9rem; color: var(--text-leise); margin-bottom: 18px; min-height: 2.8em; }
.preis { display: flex; align-items: baseline; gap: 7px; margin-bottom: 4px; }
.preis b { font-size: 2.4rem; font-weight: 800; letter-spacing: -.03em; }
.preis span { color: var(--text-leise); font-size: .95rem; }
/* Steht ein Wort statt einer Zahl im Preisfeld, wirkt die Zahlengröße marktschreierisch. */
.preis-wort b { font-size: 1.55rem; letter-spacing: -.01em; }
.preis-fein { font-size: .84rem; color: var(--text-fein); margin-bottom: 20px; }
.tarif ul { list-style: none; padding: 0; margin: 0 0 22px; }
.tarif li { display: flex; gap: 9px; align-items: flex-start; font-size: .94rem; padding: 5px 0; color: var(--text-leise); }
.tarif li svg { width: 17px; height: 17px; flex: none; margin-top: 4px; color: var(--gruen); }
.tarif .knopf { margin-top: auto; justify-content: center; }

/* Vergleichstabelle ------------------------------------------------------- */
.tabellenrahmen { overflow-x: auto; margin-top: 28px; border: 1px solid var(--rand); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: .94rem; background: var(--karte); }
th, td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--rand); }
th { font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-leise); background: var(--grund-sanft); }
tbody tr:last-child td { border-bottom: none; }
td.ja { color: var(--gruen); font-weight: 600; }
td.nein { color: var(--text-fein); }

/* Fragen ------------------------------------------------------------------ */
details {
    border: 1px solid var(--rand); border-radius: var(--radius-klein);
    background: var(--karte); margin-bottom: 12px;
}
summary { padding: 16px 20px; font-weight: 650; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; margin-left: auto; color: var(--text-fein); font-size: 1.3rem; font-weight: 400; line-height: 1; }
details[open] summary::after { content: "−"; }
details p { padding: 0 20px 18px; margin: 0; color: var(--text-leise); font-size: .96rem; }

/* Abschluss --------------------------------------------------------------- */
.abschluss {
    background: var(--see-flaeche); color: var(--auf-see);
    border-radius: var(--radius); padding: 48px 40px; text-align: center;
}
.abschluss h2 { color: var(--auf-see); }
.abschluss p { color: rgba(255, 255, 255, .9); max-width: 52ch; margin-inline: auto; }
.abschluss .knopf { background: #fff; color: #1d4ed8; margin-top: 12px; }
.abschluss .knopf:hover { background: rgba(255, 255, 255, .9); }

/* Fuß --------------------------------------------------------------------- */
.fuss { border-top: 1px solid var(--rand); padding: 40px 0; font-size: .9rem; color: var(--text-leise); }
.fuss .wrap { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.fuss nav { margin-left: auto; display: flex; gap: 20px; flex-wrap: wrap; }
.fuss a { color: var(--text-leise); text-decoration: none; }
.fuss a:hover { color: var(--see); }

.hinweis {
    border-left: 3px solid var(--gelb);
    background: var(--grund-sanft);
    padding: 14px 18px; border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
    font-size: .93rem; color: var(--text-leise);
    /* Luft nach oben, sonst klebt der Kasten am Block darüber und liest sich
       wie dessen Fußnote statt wie ein eigener Hinweis. Der Abstand ist
       derselbe wie zwischen zwei Zusatzkästen (.dazubuchen: 26px). */
    margin-top: 26px;
}
/* In der Preisspalte steht er unter zwei Kästen, die selbst schon mittig und
   schmal sind — dann soll er dieselbe Breite und Ausrichtung haben. */
#loslegen .hinweis { max-width: 760px; margin-left: auto; margin-right: auto; }

/* ===========================================================================
   Aufmacher-Preis, Versprechen, Funktionsgruppen, Preismatrix und Anleitung
   ---------------------------------------------------------------------------
   Diese Regeln kamen mit dem Umbau der Gliederung dazu. Gemessen wurde vorher
   und nachher; die Zahlen stehen bei den einzelnen Blöcken, weil sie die
   Begründung sind: Der Preis lag auf dem Telefon 10.497 px tief, der
   Funktionsteil war 5.569 px hoch.
   =========================================================================== */

/* Preishinweis im Aufmacher ------------------------------------------------
   Die häufigste Frage stand bisher zwölf Bildschirme weiter unten. */
.aufmacher-preis { margin-top: 20px; font-size: 1rem; color: var(--text-leise); }
.aufmacher-preis b { color: var(--text); font-weight: 750; }

/* Drei Versprechen ---------------------------------------------------------
   Bewusst kräftiger als .merkmal: Diese drei sollen sich vom Kachelraster
   weiter unten abheben, sonst sind wieder alle Aussagen gleich laut. */
.versprechen {
    display: grid; gap: 22px; margin-top: 36px;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.versprechen > div {
    background: var(--karte);
    border: 1px solid var(--rand);
    border-top: 3px solid var(--see);
    border-radius: var(--radius);
    padding: 24px 24px 20px;
    box-shadow: var(--schatten);
}
.versprechen h3 { font-size: 1.28rem; font-weight: 750; margin-bottom: 10px; }
.versprechen p { font-size: .97rem; color: var(--text-leise); margin: 0; }

/* Die Stichworte darunter sind die Brücke ins Kachelraster: Wer wissen will,
   woraus das Versprechen besteht, liest hier die Funktionsnamen. */
.dazu { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.dazu span {
    font-size: .8rem; padding: 3px 11px; border-radius: 20px;
    background: var(--see-blass); color: var(--see); font-weight: 600;
}

/* Gruppen im Funktionsteil ------------------------------------------------
   Jede Gruppe ist ein aufklappbarer Block: Überschrift, Anzahl und ein Satz,
   der sagt, was drinsteckt. Alle vier stehen zu - der Anriss trägt die
   Aussage, bis jemand mehr will.

   Zwei Fassungen davor, beide verworfen - der Reihe nach probiert, weil sich
   erst am gerenderten Bild zeigt, was trägt:

   - Gruppen zugeklappt OHNE Anriss: vier geschlossene Türen und keine einzige
     Aussage. Wer die Seite öffnet, hat dann nichts zu lesen. Genau deshalb
     ist der Anriss keine Zutat, sondern die Bedingung fürs Zuklappen.
   - Jede Kachel einzeln aufklappbar: zwei Klicks bis zur ersten Aussage. Wer
     eine Gruppe geöffnet hat, hat schon gesagt "zeig mir das" - dann noch ein
     Klick je Kachel ist eine Tür zu viel.

   <details> statt JavaScript: Die Seite hat bis heute keine Zeile davon, der
   Text bleibt im DOM und wird von Suchmaschinen gefunden. */
.gruppe-block { border: 0; background: none; border-radius: 0; margin: 0 0 14px; }

/* Der Kopf einer Gruppe ist eine Karte, nicht eine Zeile mit Wort am Rand.
   Vorher stand "anzeigen" ganz rechts in der Kopfzeile - auf 1.120 px Breite
   bis zu einem Meter entfernt von dem Satz, auf den es sich bezieht. Jetzt
   steht die Aufforderung direkt unter dem Anriss, und die ganze Karte ist die
   Schaltfläche. */
summary.gruppe {
    display: flex; align-items: flex-start; gap: 16px;
    padding: 20px 22px; margin: 0;
    background: var(--karte); border: 1px solid var(--rand);
    border-radius: var(--radius);
    list-style: none; cursor: pointer;
    transition: border-color .13s, box-shadow .13s, background .13s;
}
summary.gruppe::-webkit-details-marker { display: none; }

/* Das "+" der Fragenliste hier nicht. Zwei Regeln nötig: stil.css setzt das
   Zeichen im offenen Zustand über "details[open] summary::after" - das wiegt
   schwerer als ein einfaches summary.gruppe::after und ließ ein verirrtes "−"
   unter dem Anriss stehen. */
summary.gruppe::after { content: none; }
details[open] > summary.gruppe::after { content: none; }

summary.gruppe:hover { border-color: var(--see); box-shadow: var(--schatten); }
summary.gruppe:focus-visible { outline: 2px solid var(--see); outline-offset: 3px; }

.gruppe-zeichen {
    width: 42px; height: 42px; flex: none; border-radius: 11px;
    background: var(--see-blass); color: var(--see);
    display: grid; place-items: center;
}
.gruppe-zeichen svg { width: 22px; height: 22px; }

.gruppe-text { min-width: 0; }
.gruppe-text h3 { margin: 0 0 5px; font-size: 1.22rem; font-weight: 750; }

/* font-weight zurücksetzen: stil.css gibt jedem <summary> 650 für die
   Fragenliste, und über zwei Zeilen Fließtext wirkt das wie ein Schrei. */
.gruppe-text .anriss {
    display: block; max-width: 78ch;
    font-size: .98rem; font-weight: 400; line-height: 1.55; color: var(--text-leise);
}

/* Die Anzahl steckt jetzt im Aufforderungssatz statt in einer Plakette
   daneben: "6 Funktionen anzeigen" sagt Umfang und Handlung in einem. */
.schalter {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
    font-size: .93rem; font-weight: 650; color: var(--see);
}
.schalter::before { content: attr(data-anzahl) " Funktionen anzeigen"; }
details[open] > summary .schalter::before { content: "Wieder zuklappen"; }
.schalter .pfeil { width: 16px; height: 16px; transition: transform .15s; }
details[open] > summary .schalter .pfeil { transform: rotate(180deg); }
summary.gruppe:hover .schalter { text-decoration: underline; }

/* Aufgeklappt wandert der Rahmen um Kopf UND Inhalt: Der Block wird zu einem
   Kasten, der Kopf zu seiner Kopfzeile.

   Vorher lag der Rahmen nur um den Kopf, die Kacheln standen frei darunter.
   Auf dem Rechner ging das noch durch, weil die Kacheln dreispaltig und damit
   sichtbar schmaler sind als der Kopf. Auf dem Telefon ist alles gleich breit
   und untereinander - dort stand der Inhalt einfach als nächste Karte da, ohne
   erkennbare Zugehörigkeit zu der Gruppe, die man gerade geöffnet hatte. */
details[open].gruppe-block {
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    background: var(--grund-sanft);
    overflow: hidden;                 /* sonst stößt die Kopffläche über die Ecken */
}
/* Der Kopf gibt seinen eigenen Rahmen ab - den zeichnet jetzt der Kasten - und
   bleibt heller als der Inhalt: So liest er sich als Kopfzeile und nicht als
   erste von mehreren gleichrangigen Karten. */
details[open] > summary.gruppe {
    border: 0; border-radius: 0; box-shadow: none;
    background: var(--karte);
    border-bottom: 1px solid var(--rand);
}
details[open] > summary.gruppe:hover { background: var(--grund-sanft); }

.gruppe-block > .raster { margin: 0; padding: 18px; gap: 16px; }

/* h4 fehlt in der h1,h2,h3-Regel von stil.css und behielte sonst die Vorgabe
   des Browsers - rund 22 px Abstand nach oben. */
.merkmal h4 {
    margin: 0 0 6px; font-size: 1.12rem; font-weight: 700;
    line-height: 1.2; letter-spacing: -.02em;
}

/* stil.css rückt Absätze in <details> für die Fragenliste ein (0 20px 18px).
   Die Kacheln stehen jetzt IN einem <details> und erbten das. Hier zurück-
   genommen, statt die Regel dort enger zu fassen: Die Fragenliste soll sich
   nicht ändern, nur weil hier etwas danebenliegt. */
.gruppe-block .merkmal p { padding: 0; }

/* Zielgruppen sitzen jetzt unter den Versprechen statt in einem eigenen
   Abschnitt - und als Satz statt als acht Pillen: gemessen kosteten die Pillen
   auf dem Telefon rund 250 px und sagten nichts, was der Satz nicht sagt. */
.wer-zeile {
    margin: 30px auto 0; padding-top: 24px; max-width: 760px;
    border-top: 1px solid var(--rand); text-align: center; font-size: .97rem;
}

/* Preise: zwei Wege, je zwei Preise ---------------------------------------
   Ein Weg ist ein Block, darin zwei Preiskarten nebeneinander - auf dem
   Rechner ergibt das die 2x2-Matrix, auf dem Telefon stapeln sich die vier
   Karten in der Reihenfolge, in der man sie liest. Kein eigenes Raster für
   das Telefon nötig; die Matrix ist nur die breite Ansicht derselben
   Verschachtelung. */
/*
 * min(430px, 100%) statt 430px: Ohne das kann die Spalte nicht unter 430 px
 * schrumpfen, und auf einem Telefon mit 375 px Anzeigebreite laesst sich die ganze
 * Seite um 79 px seitwaerts schieben - gemessen. Dieselbe Falle steckte in jeder
 * anderen auto-fit-Regel dieser Datei, deshalb sind sie alle umgestellt.
 */
.wege {
    display: grid; gap: 22px; margin-top: 34px;
    grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr));
    align-items: start;
}
.weg {
    position: relative;
    background: var(--karte); border: 1px solid var(--rand);
    border-radius: var(--radius); padding: 26px 24px 22px;
}
.weg-hervor { border-color: var(--see); border-width: 2px; box-shadow: var(--schatten-stark); }

.weg-kopf h3 { font-size: 1.3rem; margin-bottom: 6px; }
.weg-kopf p { font-size: .93rem; color: var(--text-leise); margin: 0 0 20px; }

.weg-preise { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
.tarif-klein {
    background: var(--grund-sanft); border: 1px solid var(--rand);
    border-radius: var(--radius-klein); padding: 16px 16px 14px;
    display: flex; flex-direction: column;
}

/* "Für alle" und "Fürs Ehrenamt" sind die Spaltenköpfe der Matrix. Sie stehen
   in jeder Karte statt einmal über der Spalte: Beim Umbruch aufs Telefon gibt
   es keine Spalten mehr, und ohne die Beschriftung stünden dort vier Preise
   ohne Angabe, für wen sie gelten. */
.wem {
    display: inline-block; align-self: flex-start;
    font-size: .72rem; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; padding: 2px 9px; border-radius: 20px;
    background: var(--rand); color: var(--text-leise); margin-bottom: 12px;
}
.wem-ehrenamt { background: var(--see-blass); color: var(--see); }

.tarif-klein .preis { margin-bottom: 4px; }
.tarif-klein .preis b { font-size: 1.9rem; }
.tarif-klein .preis-fein { font-size: .8rem; margin-bottom: 16px; }

/* Die Jahreszahl steht als eigene Zeile über dem Kleingedruckten, nicht darin:
   Im Grau der preis-fein liest sie niemand, und ein Rabatt, den man übersieht,
   wirkt nicht. Nur bei den monatlichen Preisen - beim Einmalkauf gibt es
   nichts vorauszuzahlen. */
.jahr {
    font-size: .84rem; margin: 0 0 12px; padding: 5px 9px;
    border-radius: var(--radius-klein);
    background: var(--see-blass); color: var(--see);
}
.jahr strong { font-weight: 750; }
.tarif-klein .knopf { margin-top: auto; justify-content: center; padding: 9px 14px; }

.weg > ul, .ueberall ul { list-style: none; padding: 0; margin: 20px 0 0; }
.weg li, .ueberall li {
    display: flex; gap: 9px; align-items: flex-start;
    font-size: .93rem; padding: 4px 0; color: var(--text-leise);
}
.weg li svg, .ueberall li svg { width: 16px; height: 16px; flex: none; margin-top: 4px; color: var(--gruen); }
/* Was NICHT enthalten ist, steht mit in der Liste und nicht im Kleingedruckten.
   Eine Aufzählung, die nur Haken kennt, beantwortet die Frage nicht, die vor
   dem Kauf wirklich gestellt wird: was fehlt mir hier? */
.weg li svg.ohne { color: var(--text-leise); }
.weg li:has(svg.ohne) { color: var(--text-leise); }
/* Der Text hinter dem Haken ist ein Stück, kein Satz von Stücken. Stand dort
   ein <b> am Anfang, machte Flexbox daraus eine eigene Spalte und brach
   „Törn-Pass:" auf drei Zeilen um. */
.weg li > span { flex: 1; min-width: 0; }
.weg li strong, .weg li b, .ueberall li strong, .ueberall li b { color: var(--text); }
/* Der Satz unter den Haken erklärt, warum der Preis so ist. Er gehört zur
   Karte, nicht zum Kleingedruckten der Seite — deshalb hier und nicht in der
   allgemeinen .fein-Regel. */
.weg > .fein { margin: 16px 0 0; font-size: .87rem; }

/* Was überall gilt, stand vorher in jeder der drei Tarifkarten noch einmal.
   Einmal gesagt macht die Unterschiede sichtbar, statt sie zu verstecken. */
.ueberall { margin-top: 24px; text-align: center; }
.ueberall h3 { font-size: .88rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--text-leise); }
.ueberall ul { display: flex; flex-wrap: wrap; gap: 6px 26px; justify-content: center; }

/* Anleitung für Telefon und Tablet ----------------------------------------
   Zwei nummerierte Schritte statt eines Satzes: Die Überschrift verspricht
   "in zwei Schritten", also sollen auch zwei zu sehen sein. */
.anleitung ol { margin: 0; padding-left: 1.25em; }
.anleitung li { font-size: .95rem; color: var(--text-leise); margin-bottom: 8px; }
.anleitung li::marker { color: var(--see); font-weight: 700; }
.anleitung .fein { font-size: .87rem; margin: 10px 0 0; }

/* Das Zeichen, das man antippen soll - als Tastenkappe, damit es als Ding im
   Text erkennbar ist und nicht als Verzierung gelesen wird. */
.taste {
    display: inline-flex; align-items: center; justify-content: center;
    /* Mindestmaß statt festem Maß.
       Hier stand width/height fest auf 26px — gedacht für ein Symbol. Im Text
       standen aber Wörter darin („Teilen", „Menü"), und die fielen unten aus
       der Kappe heraus. Ein Kästchen, das seinen Inhalt nicht hält, sieht
       nicht nach Taste aus, sondern nach Fehler.

       Jetzt trägt es beides: ein Symbol bleibt quadratisch, ein Wort macht
       die Kappe breiter statt überzulaufen. */
    min-width: 26px; height: 26px; padding: 0 6px;
    vertical-align: -7px; margin: 0 1px;
    font-size: .84em; line-height: 1; white-space: nowrap;
    border: 1px solid var(--rand-stark); border-radius: 7px;
    background: var(--grund-sanft); color: var(--text);
}
/* Nur ein Symbol drin: dann bleibt die Kappe quadratisch. */
.taste:has(> svg:only-child) { padding: 0; width: 26px; }
.taste svg { width: 15px; height: 15px; flex: none; }

/* Einrichtung nach Aufwand ------------------------------------------------
   Steht unter der Preismatrix, nicht als Merkmal in einer Karte: Es gehört zu
   keinem der vier Wege, sondern kommt zu jedem dazu. Bewusst nüchtern gehalten
   und ohne Preis - ein Stundensatz gehört verhandelt, nicht plakatiert. */
.dazubuchen {
    display: flex; gap: 16px; align-items: flex-start;
    max-width: 760px; margin: 26px auto 0; padding: 20px 22px;
    background: var(--karte); border: 1px solid var(--rand);
    border-radius: var(--radius);
}
/* Die Hülle um den Text. Ohne sie wird jeder Absatz zu einer eigenen Spalte
   des Flex-Kastens — dann steht „ab 15 €" als schmale Säule neben dem Satz,
   Wort für Wort untereinander. Mit nur einem Absatz fiel das nie auf. */
.dazubuchen-text { flex: 1; min-width: 0; }
.dazubuchen-zeichen {
    width: 38px; height: 38px; flex: none; border-radius: 10px;
    background: var(--see-blass); color: var(--see);
    display: grid; place-items: center;
}
.dazubuchen-zeichen svg { width: 20px; height: 20px; }
.dazubuchen h3 { font-size: 1.08rem; margin: 0 0 6px; }
.dazubuchen p { font-size: .93rem; color: var(--text-leise); margin: 0 0 8px; }
.dazubuchen p:last-child { margin: 0; font-size: .88rem; }

/* Der Stundensatz gleich unter der Überschrift und nicht im Fließtext: Er ist
   die Angabe, wegen der jemand diesen Kasten überhaupt liest. */
.dazubuchen .satz {
    font-size: .95rem; color: var(--text); margin: 0 0 10px;
}
.dazubuchen .satz strong { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }

/* Verweise auf die Vorführung ---------------------------------------------
   Im Abschluss stehen zwei Wege nebeneinander. Der zweite Knopf ist im farbigen
   Kasten nur umrandet: Zwei weiße Flächen nebeneinander machen beide gleich
   laut, und dann wählt niemand. */
.abschluss-knoepfe {
    display: flex; flex-wrap: wrap; gap: 12px;
    justify-content: center; margin-top: 12px;
}
.abschluss .knopf-hell {
    background: transparent; color: var(--auf-see);
    border-color: rgba(255, 255, 255, .55);
}
.abschluss .knopf-hell:hover { background: rgba(255, 255, 255, .12); }

/* Der Hinweis im Preisteil steht zwischen Matrix und Aufwandskasten - dort,
   wo jemand die Preise gesehen hat und noch nicht weiß, ob es passt. */
.erst-ansehen {
    max-width: 760px; margin: 26px auto 0; text-align: center;
    font-size: .95rem; color: var(--text-leise);
}


/* ---------------------------------------------------------------------------
   Der Kachelschirm im Aufmacher
   Skilos Wiedererkennungszeichen ist nicht eine Liste, sondern die Fläche aus
   großen Schaltflächen: unterwegs, mit einer Hand, ohne hinzusehen. Deshalb
   steht sie hier statt eines Bildschirmfotos – sie skaliert mit, bleibt im
   Dunkelmodus lesbar und wiegt nichts.
   --------------------------------------------------------------------------- */

.kacheln {
    margin-top: 52px;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
    padding: 18px;
    background: var(--grund-sanft);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    box-shadow: var(--schatten-stark);
}
.kachel {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; min-height: 104px; padding: 14px 10px;
    background: var(--karte); border: 1px solid var(--rand);
    border-radius: var(--radius-klein); text-align: center;
}
/* Die Zeichen sind dieselben einfarbigen Glyphen wie in der Anwendung: sie
   bleiben im Rotlicht lesbar, was Farbemoji nicht tun. */
.kachel-zeichen { font-size: 1.7rem; line-height: 1; color: var(--see); }
.kachel span { font-size: .84rem; font-weight: 600; color: var(--text); }
.kachel-primaer { background: var(--see-flaeche); border-color: var(--see-flaeche); }
.kachel-primaer .kachel-zeichen, .kachel-primaer span { color: var(--auf-see); }
.kacheln-fuss {
    grid-column: 1 / -1; margin: 4px 0 0; padding-top: 12px;
    border-top: 1px solid var(--rand);
    font-size: .82rem; color: var(--text-fein); text-align: center;
}
@media (max-width: 700px) {
    .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 36px; }
}

/* Technische Angaben in der Tabelle: pdo_sqlite, .htaccess. Ohne eigene Regel
   nimmt der Browser eine Systemschrift in Originalgröße – die steht in einer
   Textzeile viel zu groß und reißt die Zeile auseinander. */
code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .88em;
    padding: .1em .4em;
    background: var(--see-blass);
    border-radius: 5px;
    color: var(--text);
}