/* ============================================================
   BASIS-STYLES fuer coachhilfe.de
   ============================================================
   Ausgelagert am 29.08.2026 aus dem <style>-Block der index.html.
   Grund: Seit der Steuerkanzlei-Unterseite gibt es zwei Seiten mit
   demselben Aussehen. Als Kopie im Kopf jeder Datei muesste jede
   Farbaenderung zweimal gemacht werden - genau die Sorte Doppel-
   pflege, die in der Ablage schon Aerger gemacht hat.
   Wer hier etwas aendert, aendert es auf ALLEN Seiten. Das ist
   gewollt. Seitenspezifisches gehoert nicht hierher.
   Nach jeder Aenderung die Versionsnummer im <link> beider Seiten
   erhoehen (?v=...), sonst sehen wiederkehrende Besucher die alte Datei.
   ============================================================ */

  /* ============================================================
     SCHRIFT - liegt auf UNSEREM Server, nicht bei Google
     ============================================================
     Vorher benutzte die Seite die Schrift des jeweiligen Geraets:
     Segoe UI unter Windows, SF Pro auf dem iPhone, Roboto auf Android.
     Die Seite sah also auf jedem Geraet anders aus.

     Jetzt: Source Sans 3, SIL Open Font License - Selbsthosten
     ausdruecklich erlaubt, Lizenztext liegt in assets/fonts/OFL.txt.

     WICHTIG fuer die Cookie-Freiheit: Die Dateien liegen unter
     assets/fonts/ auf coachhilfe.de. Es geht KEINE Anfrage an Google.
     Genau darum ist weiterhin kein Banner noetig. Wer die Schrift je
     wieder von einem fremden Server einbindet, macht das kaputt - die
     Adresse muss immer mit assets/ beginnen.

     (Die Namen der bekannten Schrift-Server stehen hier bewusst NICHT
     ausgeschrieben. Die Pruefung auf fremde Dienste sucht nach genau
     diesen Zeichenfolgen im Quelltext und wuerde sonst auf diesen
     Kommentar anschlagen.)

     Es ist EINE Datei fuer alle Strichstaerken (variable Schrift),
     deshalb "font-weight: 300 900".
     "font-display: swap" heisst: Text ist sofort lesbar und wird
     nachtraeglich umgestellt - besser als eine leere Seite.
     ============================================================ */
  @font-face {
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url('fonts/source-sans-3-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: 'Source Sans 3';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url('fonts/source-sans-3-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;
  }

  /* Die Serife traegt seit dem 30.08.2026 nicht mehr nur das Logo, sondern
     alle Ueberschriften - damit die Website denselben Ton hat wie die
     Kundendokumente, die Ueberschriften schon immer in Source Serif setzen.
     Geladen ist weiterhin nur EIN Schriftschnitt (600), 39 statt 120 KB.
     Deshalb steht bei JEDER Ueberschrift font-weight: 600 - ein hoeherer
     Wert wuerde vom Browser kuenstlich fettgerechnet und matschig aussehen.
     Wer die Ueberschriften wirklich fetter will, muss den 700er Schnitt
     nach assets/fonts/ legen und hier ein zweites @font-face ergaenzen. */
  @font-face {
    font-family: 'Source Serif 4';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/source-serif-4-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: 'Source Serif 4';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/source-serif-4-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 {
    /* Sagt dem Handy: Diese Seite ist eine helle Seite. Ohne diese Zeile
       faerben manche Handys (vor allem Android-Chrome) die Seite
       eigenmaechtig dunkel ein - dabei verschwanden zuletzt die dunklen
       Striche des Menue-Knopfes komplett. */
    color-scheme: light;
    /* Eigene Schrift, dahinter die alten Systemschriften als Netz -
       falls die Datei einmal nicht laedt, bleibt die Seite lesbar. */
    --font:      'Source Sans 3', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* Nur fuers Logo - siehe Kommentar bei der Schrifteinbindung oben */
    --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --red:       #E8473C;
    --red-dark:  #C6362C;
    /* Nur fuer den Mauszeiger auf Knoepfen - eine Stufe unter --red-dark */
    --red-deep:  #AC2E25;
    /* --red-soft ist die Kartenfarbe (kleine Flaechen, muss sich vom
       Seitenhintergrund abheben). --blush ist NEU und nur fuer die
       grossen Abschnittsflaechen: deutlich heller, damit sie nicht mehr
       so schwer wirken. Beides getrennt zu halten ist Absicht - mit
       einem gemeinsamen Wert waeren die Einmalangebot-Karten
       verschwunden. */
    --red-soft:  #FDECEA;
    --blush:     #FEF2F0;
    --cream:     #FFF9F5;
    --ink:       #20242E;
    --muted:     #5C6472;
    --green:     #1FA97A;
    --green-soft:#E7F6F0;
    --white:     #FFFFFF;
    --border:    #F1E6DF;
    --shadow:    0 18px 45px -20px rgba(60, 30, 20, .28);
    --radius:    18px;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  /* Kein seitliches Verschieben auf dem Handy: overflow-x sicher zu.
     "hidden" auf html faengt aeltere Browser, "clip" auf body die neuen -
     clip macht body nicht zum Scroll-Container, das klebende Menue bleibt. */
  html { scroll-behavior: smooth; overflow-x: hidden; }
  body {
    font-family: var(--font);
    color: var(--ink);
    background: var(--cream);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
    max-width: 100%;
  }
  h1, h2, h3, .brand { font-family: var(--font-serif); line-height: 1.15; }
  a { color: inherit; text-decoration: none; }
  img { max-width: 100%; display: block; }
  section { padding: 92px 0; }
  /* Abstand beim Sprung aus dem Menue. Weniger als die Menuehoehe (74px) ist
     Absicht: So schiebt sich der obere Innenabstand des Abschnitts unter die
     Menueleiste und die Ueberschrift sitzt gleich darunter - statt einen
     halben Bildschirm tiefer. Zu GROSS darf der Wert nicht werden: Bei 90px
     blitzte der untere Rand des vorherigen Abschnitts durch, bei
     "Leistungen" war das die dunkle Zahlen-Leiste (schwarzer Streifen).
     Kleiner ist immer unbedenklich, weil dann weiter nach unten gescrollt
     wird. Ein Wert fuer Handy und PC. */
  section[id] { scroll-margin-top: 40px; }
  .wrap { width: min(1120px, 92%); margin: 0 auto; }
  .center { text-align: center; }

  /* ---------- Buttons ---------- */
  /* Die Knoepfe laufen seit dem 01.09.2026 in der Serife wie die
     Ueberschriften. Geladen ist nur der Schnitt 600, deshalb steht hier
     genau dieser Wert - alles darueber wuerde der Browser kuenstlich
     fettrechnen. */
  .btn {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--font-serif); font-weight: 600; font-size: 1.04rem;
    padding: 15px 28px; border-radius: 999px;
    cursor: pointer; border: 2px solid transparent;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    white-space: nowrap;
  }
  /* Schmalere Variante fuer Knoepfe im Fliesstext, etwa in der
     FAQ-Antwort zur Sprechstunde. Ein Knopf in Hauptgroesse wirkt dort
     wie ein zweiter Handlungsaufruf neben dem eigentlichen. */
  .btn-klein { padding: 10px 20px; font-size: .95rem; gap: 7px; box-shadow: none; }
  .btn-klein:hover { transform: none; }
  /* Alle roten Knoepfe laufen auf dem DUNKLEREN Rot.
     Grund: Weisse Schrift auf dem hellen Rot kommt nur auf 3,89:1 -
     vorgeschrieben sind 4,5:1. Mit dem dunklen Rot sind es 5,30:1.
     Im Alltag sieht man den Unterschied kaum, bei schwaecheren Augen
     oder Sonne auf dem Handy sehr wohl.
     Das helle Rot bleibt die Markenfarbe fuer Ueberschriften, Symbole
     und Akzente - dort steht es auf hellem Grund und ist unkritisch.
     Diese eine Regel deckt alle sechs Knoepfe ab, auch den im Rechner
     (assets/rechner.js baut ihn mit denselben Klassen). */
  .btn-primary { background: var(--red-dark); color: #fff; box-shadow: 0 12px 24px -10px rgba(198,54,44,.55); }
  .btn-primary:hover { background: var(--red-deep); transform: translateY(-2px); }
  .btn-ghost { background: #fff; color: var(--ink); border-color: var(--border); }
  .btn-ghost:hover { border-color: var(--red); color: var(--red); transform: translateY(-2px); }

  /* ---------- Header ---------- */
  header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255,249,245,.88);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
  }
  .nav { display: flex; align-items: center; justify-content: space-between; height: 74px; }
  /* ---------- Logo ----------
     War: gefuellte rote Kachel mit fetter Groteske - die Formensprache
     von App-Symbolen. Jetzt: duenner roter Kreis mit Monogramm in der
     Serifenschrift. Ruhiger, eleganter, ohne verspielt zu werden.

     Der Kreis ist bewusst nur eine Kontur. Damit er nicht duenn wirkt,
     ist er einen Tick groesser als die alte Kachel (42 statt 40).
     letter-spacing im Monogramm ist Absicht: Serifenbuchstaben brauchen
     Luft, sonst kleben A und S aneinander. */
  .brand { display: flex; align-items: center; gap: 11px; }
  .brand .dot {
    width: 42px; height: 42px; border-radius: 50%;
    background: none; border: 1.6px solid var(--red); color: var(--red);
    line-height: 1; display: grid; place-items: center;
    font-family: var(--font-serif); font-weight: 600; font-size: 1.12rem; letter-spacing: .5px;
  }
  /* "AS" per CSS statt als Text – so klebt Google es nicht in die Suchvorschau */
  .brand .dot::before { content: "AS"; }
  .brand-text { display: flex; flex-direction: column; line-height: 1.18; }
  .brand-name { font-family: var(--font-serif); font-weight: 600; font-size: 1.22rem; color: var(--ink); }
  .brand-role { font-weight: 600; font-size: .68rem; color: var(--red); text-transform: uppercase; letter-spacing: .4px; }
  /* 22px statt 30px: Mit dem zusaetzlichen Eintrag "Start" passt das Menue
     sonst erst ab rund 1050px Fensterbreite. */
  .nav-links { display: flex; align-items: center; gap: 22px; }
  .nav-links a { font-weight: 500; color: var(--muted); font-size: .97rem; }
  .nav-links a:hover { color: var(--ink); }
  .nav .btn { padding: 11px 22px; font-size: .95rem; }
  /* ---------- Der Knopf im Menue ----------
     FEHLER, der hier steckte: Die Regel ".nav-links a" faerbt alle
     Menuelinks grau. Sie ist spezifischer als ".btn-primary" und hat
     dessen Weiss ueberschrieben - die Knopfschrift war GRAU auf Rot,
     Kontrast 1,53:1. Vorgeschrieben sind mindestens 4,5:1.

     Behoben: Schrift wieder weiss, etwas kraeftiger. Die Sprungmarke
     ".nav-links a.btn-primary" ist noetig, damit diese Regel die graue
     Menuefarbe wirklich schlaegt.

     Die dunkle Fuellfarbe steht inzwischen bei .btn-primary fuer ALLE
     Knoepfe und wird hier nicht mehr wiederholt - so bleibt es bei einer
     einzigen Stelle, wenn die Farbe je wieder geaendert wird.
     Was hier bleibt: der schmalere Schatten. Der breite rote Schein der
     grossen Knoepfe wirkte auf dem kleinen Knopf im Menue grell. */
  .nav-links a.btn-primary {
    color: #fff;
    font-weight: 600;
    box-shadow: 0 4px 10px -4px rgba(198, 54, 44, .4);
  }
  .nav-links a.btn-primary:hover { color: #fff; }
  .burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
  /* Rot statt Dunkelgrau: Im erzwungenen Dunkelmodus mancher Handys
     verschwanden die dunklen Striche komplett. Rot bleibt in beiden
     Faellen sichtbar und ist zugleich die Markenfarbe. */
  .burger span { display: block; width: 26px; height: 2.5px; border-radius: 2px; background: var(--red); margin: 5px 0; transition: .3s; }

  /* ---------- Hero (zentriert wie eine Ueberschrift) ---------- */
  .hero { padding: 66px 0 80px; }
  .hero-grid { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .hero-copy { max-width: 820px; }
  /* Untere Grenze bewusst 1.85rem, nicht 2.2rem: "Buchhaltungsservice" ist
     19 Zeichen am Stueck. Bei 2.2rem (35 px) ist dieses eine Wort breiter
     als ein 375-px-Bildschirm und ragte sichtbar aus dem Bild heraus.
     break-word ist der Rettungsanker fuer noch schmalere Geraete - lieber
     ein getrenntes Wort als abgeschnittene Schrift. */
  .hero h1 { font-size: clamp(1.85rem, 5.4vw, 3.5rem); font-weight: 600; letter-spacing: -.5px; text-wrap: balance; overflow-wrap: break-word; }
  .hero h1 .hl { color: var(--red); }
  /* Vorzeile ueber der H1: ihr Verkaufssatz. Deutlich kleiner als die
     Ueberschrift, aber kraeftig genug, dass er als Erstes gelesen wird. */
  .hero .hero-hook {
    font-size: clamp(1.02rem, 1.9vw, 1.24rem); font-weight: 700;
    color: var(--ink); margin-bottom: 12px; text-wrap: balance;
  }
  .hero .hero-hook .hl { color: var(--red); }
  .hero p.lead { font-size: 1.16rem; color: var(--muted); margin: 22px auto 30px; max-width: 46ch; }
  .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
  /* Seit dem 30.08.2026 stehen hier fuenf Punkte statt drei. Alle fuenf in
     eine Zeile zu zwingen ginge nur mit sehr kleiner Schrift, und ein
     Umbruch 4+1 laesst den letzten allein stehen. Die Breite ist deshalb
     so gesetzt, dass bewusst 3+2 umbrochen wird - beide Zeilen zentriert
     und ungefaehr gleich schwer. Wer die Texte aendert, muss den Wert
     nachmessen. */
  .hero-trust { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 28px; justify-content: center; color: var(--muted); font-size: .92rem; max-width: 620px; margin-left: auto; margin-right: auto; }
  .hero .mock { margin: 46px auto 0; max-width: 520px; width: 100%; }
  .hero-trust span { display: inline-flex; align-items: center; gap: 7px; }
  .hero-trust .ck { color: var(--green); font-weight: 700; }

  /* Hero visual (CSS mock) */
  .mock {
    background: #fff; border: 1px solid var(--border); border-radius: 22px;
    box-shadow: var(--shadow); padding: 26px; position: relative;
  }
  .mock-bar { display: flex; gap: 6px; margin-bottom: 16px; }
  .mock-bar i { width: 11px; height: 11px; border-radius: 50%; background: #E9DED7; }
  .mock-bar i:first-child { background: var(--red); }
  .mock-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 13px; }
  .mock-row .l { display: flex; align-items: center; gap: 11px; }
  .mock-ic { width: 34px; height: 34px; border-radius: 9px; background: var(--red-soft); color: var(--red); display: grid; place-items: center; font-weight: 700; }
  /* Linksbuendig, weil .hero-copy zentriert und die Zeilen das erben wuerden.
     Bis 29.08.2026 stand die Unterzeile deshalb mittig unter der Hauptzeile -
     in einer Listendarstellung sieht das aus wie ein Fehler. */
  .mock-row .t1, .mock-row .t2 { text-align: left; }
  .mock-row .t1 { font-weight: 600; font-size: .92rem; }
  .mock-row .t2 { font-size: .78rem; color: var(--muted); }
  .pill { font-size: .74rem; font-weight: 700; padding: 4px 11px; border-radius: 999px; }
  .pill.ok { background: var(--green-soft); color: var(--green); }
  .pill.open { background: #FFF3E0; color: #C9820A; }
  /* Vorher/Nachher im Mockup, ergaenzt am 29.08.2026. Das Bild zeigte nur
     das Ergebnis - drei aufgeraeumte Zeilen. Wer den Schmerz nicht sieht,
     versteht die Loesung nicht: Der obere Block ist deshalb bewusst unruhig
     (gestrichelter Rand, rote Zustaende), der untere ruhig und gruen.
     Wer die Vorher-Zeilen entfernt, nimmt dem Bild seine Aussage. */
  .pill.fehlt { background: #FDECEA; color: var(--red); }
  .mock-label { text-align: left; font-size: .68rem; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); margin: 0 0 9px 2px; }
  .mock-label.nach { color: var(--green); margin-top: 2px; }
  .mock-row.vorher { border-style: dashed; background: #FDF8F6; }
  .mock-row.vorher .t1 { color: var(--muted); }
  .mock-ic.warn { background: #FDECEA; color: var(--red); }
  .mock-pfeil { display: grid; place-items: center; color: var(--red); font-size: 1.15rem; font-weight: 700; margin: 4px 0 10px; }
  .mock-float {
    /* Seit 29.08.2026 steht der Kasten im Fluss statt schwebend. Vorher lag
       er absolut ueber der letzten Zeile und ragte unten und rechts aus der
       Karte heraus - daneben blieb eine weisse Luecke, die aussah wie ein
       Fehler. Jetzt schliesst er die Karte sauber ab, auf jedem Schirm gleich. */
    margin-top: 16px;
    background: #fff; border: 1px solid var(--border); border-radius: 14px;
    box-shadow: var(--shadow); padding: 14px 17px; display: flex; align-items: center;
    justify-content: space-between; gap: 12px;
  }
  .mock-float .big { font-weight: 800; font-size: 1.3rem; color: var(--green); }

  /* ---------- Section headings ---------- */
  .eyebrow { color: var(--red); font-weight: 700; letter-spacing: .5px; text-transform: uppercase; font-size: .82rem; }
  .sec-title { font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 600; margin: 10px 0 14px; letter-spacing: -.4px; }
  .sec-sub { color: var(--muted); font-size: 1.08rem; max-width: 56ch; }
  .center .sec-sub { margin-left: auto; margin-right: auto; }

  /* ---------- Stats bar ---------- */
  .stats { background: var(--ink); color: #fff; padding: 46px 0; }
  .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: center; }
  .stats .num { font-weight: 800; font-size: 2.2rem; color: #fff; }
  .stats .lbl { color: #B9BFCB; font-size: .92rem; margin-top: 4px; }

  /* ---------- Cards grid ---------- */
  .grid { display: grid; gap: 22px; }
  .g3 { grid-template-columns: repeat(3, 1fr); }
  .g2 { grid-template-columns: repeat(2, 1fr); }
  .card {
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    padding: 30px 26px; transition: transform .18s ease, box-shadow .18s ease;
  }
  .card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
  .card .ic {
    width: 52px; height: 52px; border-radius: 14px; background: var(--red-soft);
    display: grid; place-items: center; margin-bottom: 18px;
    color: var(--red);
  }
  /* ---------- Symbole ----------
     Waren vorher bunte Emoji. Die kommen vom Betriebssystem und
     (die Zeichen stehen hier bewusst nicht ausgeschrieben - sonst
     schlaegt die Pruefung "sind noch Emoji drin?" auf diesen Kommentar an)
     sehen auf jedem Geraet anders aus - unter Windows anders als auf dem
     iPhone. Jetzt gezeichnete Symbole, direkt im Quelltext: gleiches Bild
     ueberall, keine zusaetzliche Datei, kein fremder Server.
     Sie erben ihre Farbe ueber "currentColor" vom Elternelement - deshalb
     sind sie in den Leistungskacheln rot und in den dunklen Kontaktkarten
     weiss, ohne dass jedes einzeln eingefaerbt werden muss. */
  .ic svg { width: 26px; height: 26px; display: block; }
  /* Symbole, die MITTEN im Text stehen. Groesse in em, damit sie mit der
     Schrift mitwachsen, und leicht abgesenkt, damit sie auf der Grundlinie
     sitzen statt darueber zu schweben. */
  .inline-ic { width: 1.05em; height: 1.05em; vertical-align: -.16em; flex: none; }
  .kkarte .ic svg { width: 23px; height: 23px; }
  .schloss svg { width: 19px; height: 19px; display: block; color: var(--red); }
  .card h3 { font-size: 1.18rem; font-weight: 600; margin-bottom: 8px; }
  /* Der Satz unter den Leistungskarten fasst zusammen, was die Karten
     zeigen: fuenf Mal "ich zeige es dir", ein Mal "ich mache es". Keine
     vergleichbare Anbieterin kann beides - deshalb steht das als eigener
     Satz und nicht als weitere Karte. Die DSGVO-Zeile gehoert bewusst
     DARUNTER und nicht in den Satz: Er wirkt nur, solange er kurz ist. */
  .beides { text-align: center; max-width: 62ch; margin: 52px auto 0; font-size: 1.35rem; font-weight: 700; color: var(--ink); line-height: 1.4; text-wrap: balance; }
  .beides-sub { text-align: center; max-width: 58ch; margin: 12px auto 0; color: var(--muted); font-size: .96rem; line-height: 1.55; }
  /* Der Leistungsabschnitt endet mit dem Satz "Ich zeige es dir" - danach
     folgte die volle Abschnittsluecke von 92 px, dazu nochmal 92 px vom
     naechsten Abschnitt. 184 px sind zu viel, wenn unten kein Kasten mehr
     steht, der die Luecke traegt. Der Abstand oben bleibt unangetastet. */
  #leistungen { padding-bottom: 32px; }
  .card p { color: var(--muted); font-size: .98rem; }

  /* ---------- Benefits ---------- */
  /* Die grossen Abschnittsflaechen (Warum mit mir, FAQ, Rechner) laufen
     jetzt auf --blush statt --red-soft. Grosse Flaechen wirken in derselben
     Farbe viel schwerer als kleine Karten - deshalb der eigene, hellere Ton.
     Zu hell darf er nicht werden: Bei #FEF6F4 war er vom Seitenhintergrund
     kaum noch zu unterscheiden und der Wechsel zwischen den Abschnitten ging
     verloren. */
  .benefits { background: var(--blush); }
  .ben-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
  .ben-list { list-style: none; display: grid; gap: 18px; }
  .ben-list li { display: flex; gap: 14px; }
  .ben-list .ck {
    flex: none; width: 30px; height: 30px; border-radius: 50%;
    background: var(--green); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .95rem;
  }
  .ben-list h4 { font-size: 1.05rem; font-weight: 700; }
  .ben-list p { color: var(--muted); font-size: .96rem; }

  /* ---------- Steps ---------- */
  .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: step; }
  .step { position: relative; padding-top: 8px; }
  .step .no {
    width: 46px; height: 46px; border-radius: 50%; background: var(--red); color: #fff;
    font-weight: 800; display: grid; place-items: center; margin-bottom: 16px;
  }
  .step h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: 6px; }
  .step p { color: var(--muted); font-size: .95rem; }

  /* ---------- About ---------- */
  /* "start" statt "center": Bei "center" haengt das Foto in der Mitte einer
     sehr langen Textspalte. Je schmaler das Fenster, desto laenger wird der
     Text - und desto tiefer rutschte das Foto. In einem kleineren Fenster
     stand es deutlich weiter unten als im grossen. Jetzt beginnt es immer
     oben auf einer Hoehe mit "Ueber mich", unabhaengig von der Fensterbreite. */
  .about-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 50px; align-items: start; }
  /* Portraet + Lexware-Siegel als eine Einheit */
  /* 402px statt 360px: Damit ist das Foto bei 4:5 genau 502px hoch und die
     Unterkante liegt auf einer Hoehe mit dem zweiten Haken. Ueber die Breite
     vergroessert statt ueber die Hoehe gestreckt - so bleibt der Bildaus-
     schnitt derselbe und es wird seitlich nichts abgeschnitten. */
  .about-media { position: relative; width: 100%; max-width: 402px; margin-left: auto; margin-right: auto; }
  .about-media .portrait {
    width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block;
    border-radius: 22px; box-shadow: var(--shadow);
  }
  .about-media .siegel {
    position: absolute; right: -18px; bottom: -18px; width: 116px; height: auto; display: block;
    border-radius: 16px; background: #fff; padding: 7px;
    box-shadow: 0 14px 32px -10px rgba(60,30,20,.4);
  }
  .about-badges { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
  .chip { background: var(--white); border: 1px solid var(--border); border-radius: 999px; padding: 9px 16px; font-size: .88rem; font-weight: 600; display: inline-flex; gap: 8px; align-items: center; }
  .rechtshinweis { margin-top: 20px; font-size: .86rem; color: var(--muted); border-left: 3px solid var(--red); padding-left: 12px; }


  /* ---------- FAQ ---------- */
  .faq { max-width: 780px; margin: 0 auto; }
  .qa { background: #fff; border: 1px solid var(--border); border-radius: 14px; margin-bottom: 14px; overflow: hidden; }
  .qa button {
    width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
    padding: 22px 24px; font-size: 1.05rem; font-weight: 600; color: var(--ink);
    display: flex; justify-content: space-between; align-items: center; gap: 16px; font-family: inherit;
  }
  .qa .plus { color: var(--red); font-size: 1.4rem; transition: transform .25s ease; flex: none; }
  .qa.open .plus { transform: rotate(45deg); }
  .qa .ans { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
  /* Seit die Antwort zu Lexware Office aus mehreren Absaetzen besteht,
     traegt nur der letzte den vollen Abstand nach unten - sonst reisst
     der Kasten innen auseinander. */
  .qa .ans p { padding: 0 24px 12px; color: var(--muted); }
  .qa .ans p:last-child { padding-bottom: 22px; }

  /* ---------- Contact / CTA (zentriert, ohne Formular) ---------- */
  .cta { background: var(--ink); color: #fff; }
  .cta-inner { text-align: center; max-width: 880px; margin: 0 auto; }
  .cta h2 { color: #fff; font-size: clamp(1.8rem, 3.4vw, 2.5rem); font-weight: 600; }
  .cta p.sub { color: #C3C9D4; margin: 14px auto 36px; font-size: 1.06rem; max-width: 52ch; }
  .kontakt-karten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .kkarte {
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--radius); padding: 28px 18px;
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
  }
  .kkarte:hover { transform: translateY(-4px); background: rgba(255,255,255,.1); border-color: var(--red); }
  /* Terminbuchung ist die wichtigste Aktion. Sie war komplett rot
     ausgefuellt - das war zu laut. Jetzt hebt sie nur noch die rote
     Umrandung hervor, alles andere sieht aus wie die drei Nachbarn.
     Deshalb sind hier auch die Sonderregeln fuer Symbol und Beschriftung
     weggefallen: Sie erben jetzt einfach das normale Aussehen. */
  .kkarte.kk-top { border-color: var(--red); }
  .kkarte.kk-top:hover { border-color: var(--red-dark); }
  .kkarte .ic {
    width: 48px; height: 48px; border-radius: 14px; background: rgba(255,255,255,.1);
    display: grid; place-items: center; font-size: 1.2rem; margin-bottom: 6px;
  }
  .kkarte .ic.li { font-weight: 800; font-size: .98rem; letter-spacing: -.5px; }
  .kkarte .kk-l { font-size: .76rem; text-transform: uppercase; letter-spacing: .5px; color: #9AA2B1; font-weight: 700; }
  .kkarte .kk-v { font-weight: 600; color: #fff; font-size: .97rem; word-break: break-word; }
  /* Vertraulichkeits-Zusage direkt vor dem Absenden. Etwas heller und
     eingerahmt als die Ortszeile darunter - sie soll gelesen werden. */
  .cta-vertraulich {
    /* 560px = exakt die Breite von Trenner und Formular darueber,
       sonst steht der Kasten links und rechts ueber. */
    margin: 32px auto 0; max-width: 560px;
    color: #C3C9D4; font-size: .9rem; line-height: 1.6; text-align: left;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 12px; padding: 13px 18px;
  }
  .cta-vertraulich strong { color: #fff; }
  .cta-ort { margin-top: 18px; color: #9AA2B1; font-size: .92rem; }

  /* Kontaktformular (sendet ueber kontakt.php auf Hostinger) */
  .kf-trenner { margin: 40px auto 6px; max-width: 560px; color: #9AA2B1; font-size: .92rem; display: flex; align-items: center; gap: 14px; }
  .kf-trenner::before, .kf-trenner::after { content: ""; height: 1px; flex: 1; background: rgba(255,255,255,.14); }
  .kontaktform { max-width: 560px; margin: 20px auto 0; background: #fff; border-radius: var(--radius); padding: 30px; text-align: left; }
  .kontaktform .feld { margin-bottom: 15px; }
  .kontaktform label { display: block; font-size: .86rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
  .kontaktform input[type=email], .kontaktform input[type=text], .kontaktform textarea {
    width: 100%; padding: 13px 15px; border: 1px solid var(--border); border-radius: 11px;
    font-family: inherit; font-size: 1rem; background: var(--cream); color: var(--ink);
  }
  .kontaktform input:focus, .kontaktform textarea:focus { outline: 2px solid var(--red); border-color: transparent; background: #fff; }
  /* Spamschutz-Feld unsichtbar, aber OHNE es weit nach links zu schieben -
     left:-9999px liess sich auf Handys seitlich "wegziehen". */
  .kontaktform .hp { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .kontaktform .zustimmung { display: flex; gap: 10px; align-items: flex-start; font-size: .84rem; color: var(--muted); margin: 4px 0 18px; }
  .kontaktform .zustimmung input { margin-top: 3px; flex: none; }
  .kontaktform .zustimmung a { color: var(--red); text-decoration: underline; }
  .kontaktform .btn-primary { width: 100%; justify-content: center; }

  /* ---------- Footer ---------- */
  footer { background: #191C24; color: #A9AFBC; padding: 56px 0 30px; }
  .foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 36px; margin-bottom: 34px; }
  /* Das Logo in der dunklen Fusszeile. Das Marken-Rot ist auf Dunkel zu
     dunkel - Kreis und Buchstaben waeren kaum zu sehen. Deshalb hier ein
     aufgehellter Ton derselben Farbe. Etwas kleiner als oben, die
     Fusszeile soll nicht mit dem Seitenkopf konkurrieren. */
  footer .brand {
    color: #fff; margin-bottom: 12px;
    font-family: var(--font-serif); font-weight: 600; font-size: 1.16rem;
  }
  /* Auf ihren Wunsch im Marken-Rot statt im aufgehellten Ton. Auf dem
     dunklen Grund sind das 4,25:1 - fuer ein Zeichen (kein Fliesstext)
     voellig in Ordnung. */
  footer .brand .dot {
    width: 36px; height: 36px; font-size: .96rem;
    border-color: var(--red); color: var(--red);
  }
  footer p { font-size: .92rem; max-width: 38ch; }
  footer h5 { color: #fff; font-size: .95rem; margin-bottom: 14px; font-weight: 700; }
  footer ul { list-style: none; display: grid; gap: 9px; }
  footer ul a { color: #A9AFBC; font-size: .92rem; }
  footer ul a:hover { color: var(--red); }
  footer .foot-recht { margin-top: 14px; font-size: .82rem; color: #7C8290; max-width: 44ch; }
  /* Seit dem 31.08.2026 mit Symbolen. Aus einer Absatzfolge mit <br> ist
     eine Liste geworden - nur so sitzt bei zweizeiligen Eintraegen das
     Symbol oben und nicht in der Mitte. "LinkedIn:" ist entfallen, das
     Symbol sagt es bereits. */
  footer .fcontact { list-style: none; margin-top: 15px; font-size: .92rem; display: grid; gap: 9px; }
  footer .fcontact li { display: flex; align-items: center; gap: 9px; }
  footer .fcontact svg { width: 17px; height: 17px; flex: none; color: var(--red); }
  footer .fcontact a { color: #E9ECF1; }
  footer .fcontact a:hover { color: var(--red); }

  /* Fussnote unter der Rechner-Tabelle, gehoert zum Sternchen an
     "Unterm Strich". */
  .rechner .tabelle-fuss { font-size: .82rem; line-height: 1.5; color: var(--muted); margin-top: 10px; }
  .rechner .tstern { color: var(--red); font-weight: 800; }
  .rechner .tz .tstern { font-size: .7em; vertical-align: super; margin-left: 1px; }
  .foot-bottom { border-top: 1px solid rgba(255,255,255,.08); padding-top: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: .84rem; }

  /* ---------- Preise (war frueher die Seite /angebote) ----------
     ALLE Regeln hier sind mit #preise eingegrenzt. Das ist kein Zierrat:
     rechner.css bringt eigene .stern- und .laufzeit-Regeln mit. Ohne die
     Eingrenzung wuerde die Laufzeit-Box IM Rechner ploetzlich zentriert
     und mit rotem Balken dargestellt. */
  #preise .block { text-align: center; margin: 8px 0 30px; }
  #preise .block .eyebrow { display: block; margin-bottom: 6px; }
  #preise .block h2 { font-size: 1.5rem; font-weight: 600; }
  #preise .block-hinweis { color: var(--muted); font-size: 1.12rem; line-height: 1.55; max-width: 62ch; margin: 14px auto 0; text-wrap: balance; }
  #preise .block-hinweis strong { color: var(--ink); }

  #preise .preis-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
  #preise .preis { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 34px 26px 28px; display: flex; flex-direction: column; position: relative; }
  #preise .preis.top { border: 2px solid var(--red); box-shadow: var(--shadow); }
  #preise .preis-tag { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: var(--red); color: #fff; font-size: .82rem; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; padding: 8px 20px; border-radius: 999px; white-space: nowrap; box-shadow: 0 4px 12px -4px rgba(200,54,44,.5); }
  #preise .preis h3 { font-size: 1.02rem; font-weight: 600; text-transform: uppercase; letter-spacing: .7px; text-align: center; }
  /* Eine Zeile Klartext, wofuer das Paket da ist. Die Pakete unterscheiden
     sich nicht nur in der Belegzahl, sondern in der Aufgabe: Ordnung halten,
     Geld reinholen, alles abgeben. */
  #preise .preis-fuer { text-align: center; color: var(--red); font-size: .88rem; font-weight: 600; margin-top: 8px; min-height: 4.5em; display: flex; align-items: center; justify-content: center; }
  #preise .preis-zahl { font-size: 2.5rem; font-weight: 800; color: var(--red); text-align: center; margin-top: 8px; line-height: 1.1; }
  #preise .preis-zahl .stern { font-size: 1.3rem; vertical-align: super; line-height: 0; }
  #preise .preis-sub { text-align: center; color: var(--muted); font-size: .88rem; margin-bottom: 24px; }
  /* Die Zeit-Zeile ist seit dem Umbau am 28.08.2026 die eigentliche Botschaft
     der Karte: Der Preis nennt Euro, diese Zeile nennt, was dabei herauskommt.
     Der negative Abstand oben holt sie an die Unterzeile heran - ohne ihn
     stuende sie verloren zwischen Preis und Leistungsliste. Wer sie entfernt,
     macht aus der Seite wieder einen Paketkatalog. */
  #preise .preis-zeit { text-align: center; color: var(--ink); font-size: .92rem; font-weight: 600; line-height: 1.45; margin: -14px 0 24px; }
  #preise .preis-liste { list-style: none; display: grid; gap: 11px; padding-top: 22px; border-top: 1px solid var(--border); margin-bottom: 26px; }
  #preise .preis-liste li { display: flex; gap: 10px; font-size: .95rem; color: var(--muted); }
  #preise .preis-liste li::before { content: "✔"; color: var(--green); font-weight: 700; flex: none; }
  #preise .preis-liste li.mehr { font-weight: 700; color: var(--ink); }
  #preise .preis-liste li.mehr::before { content: "★"; color: var(--red); }
  /* Ergaenzt am 31.08.2026 fuer die Starthilfe: Ein Listenpunkt kann jetzt
     eine zweite, kleinere Zeile tragen, in der die Einzelschritte stehen.
     Das <div> ist noetig, weil das li selbst ein Flex-Container ist - der
     Haken sitzt darin als ::before und darf nicht umgebrochen werden. */
  #preise .preis-liste li .unter { display: block; font-size: .85rem; line-height: 1.45; opacity: .82; margin-top: 3px; }
  /* Das hochgestellte Sternchen verweist auf die Fussnote unter den Karten.
     Es haengt bewusst NICHT im Rechner an den Betraegen - dort sind es
     Rechenergebnisse und kein Angebot. */
  #preise .preis-zahl sup { font-size: .45em; vertical-align: super; margin-left: 2px; font-weight: 700; }
  #preise .preis-fuss .stern { color: var(--red); font-weight: 800; }
  #preise .preis .btn { margin-top: auto; justify-content: center; }

  /* Sternchen-Erklaerung. Steht bewusst allein und mittig, damit die
     Vertragsbindung nicht in einem Fliesstext untergeht. */
  #preise .laufzeit {
    max-width: 760px; margin: 30px auto 0; text-align: center;
    background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--red);
    border-radius: 12px; padding: 14px 22px;
    font-size: .96rem; font-weight: 600; color: var(--ink);
  }
  #preise .laufzeit .stern { color: var(--red); font-weight: 800; }

  /* Drei Spalten, seit der Aufhol-Service dazugekommen ist */
  #preise .einmalig { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
  /* Zwei Karten statt drei: Der Einstiegs-Block und die Zusatzangebote
     tragen seit dem Umbau am 28.08.2026 nur noch zwei Karten. Ohne diese
     Regel bliebe rechts eine leere Spalte stehen und die Karten waeren
     unnoetig schmal. Die Klasse "zwei" wird im HTML zusaetzlich gesetzt. */
  #preise .preis-grid.zwei, #preise .einmalig.zwei { grid-template-columns: repeat(2, 1fr); }
  #preise .einm { background: var(--red-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 26px; }
  #preise .einm h3 { font-size: 1.16rem; font-weight: 600; margin-bottom: 8px; }
  #preise .einm p { color: var(--muted); font-size: .96rem; margin-bottom: 16px; }
  /* Preis und Zusatz stehen IMMER untereinander. Nebeneinander sah es je
     nach Textlaenge mal so, mal so aus: "399 €" ist kurz genug, dass der
     Hinweis daneben passte, "ab 449 €" nicht - dadurch wirkten die drei
     Karten uneinheitlich. */
  #preise .einm .p { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
  #preise .einm .p b { font-size: 1.55rem; font-weight: 800; color: var(--red); }
  #preise .einm .p .hin { font-size: .84rem; color: var(--muted); }

  /* Der Zeit-Absatz ueber den Preisen ist die Kernbotschaft der Seite: zwei
     Arbeitswochen im Jahr. Bewusst groesser gesetzt als die Hinweiskaesten
     weiter unten und bewusst VOR den Preisen - wer erst die Zahlen sieht,
     vergleicht Preise; wer erst die Rechnung sieht, vergleicht seine eigene
     Zeit mit dem Preis. Das ist der Unterschied zwischen Katalog und Angebot. */
  #preise .zeitrechnung { max-width: 760px; margin: 0 auto 44px; background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--red); border-radius: 12px; padding: 22px 26px; color: var(--ink); font-size: 1.02rem; line-height: 1.6; }
  #preise .fair { max-width: 760px; margin: 40px auto 0; background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--green); border-radius: 12px; padding: 18px 22px; color: var(--muted); font-size: .95rem; }
  #preise .fair.software { border-left-color: var(--red); margin-top: 34px; }
  #preise .fair.software + .fair { margin-top: 14px; }
  /* Die Zeile zur Sprechstunde. Bewusst leise gehalten - kleiner als die
     Karten, ohne Rahmen, ohne Farbe ausser dem Link. Sie soll gefunden
     werden, wenn jemand danach sucht, und sonst nicht auffallen. */
  #preise .einzelstunde { max-width: 760px; margin: 30px auto 0; text-align: center; font-size: .92rem; color: var(--muted); }
  #preise .einzelstunde a { color: var(--red); border-bottom: 1px solid rgba(198,54,44,.35); }
  #preise .einzelstunde a:hover { border-bottom-color: var(--red); }
  #preise .einzelstunde sup { font-size: .6em; vertical-align: super; }
  /* Auf der Kanzleiseite steht derselbe Kasten ausserhalb von #preise und
     bekam deshalb keinen Abstand nach oben - er klebte am Kasten mit der
     Abgrenzung. */
  #abgrenzung .fair { max-width: 760px; margin: 34px auto 0; background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--red); border-radius: 14px; padding: 18px 22px; font-size: .95rem; line-height: 1.6; color: var(--muted); }
  #preise .preis-fuss { text-align: center; color: var(--muted); font-size: .86rem; margin-top: 22px; max-width: 780px; margin-left: auto; margin-right: auto; }

  /* Leistungsumfang: was konkret gemacht wird */
  #preise .leistungen-box { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 32px 34px; max-width: 900px; margin: 0 auto; box-shadow: var(--shadow); }
  #preise .leistungen-liste { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 13px 34px; }
  #preise .leistungen-liste li { display: flex; gap: 10px; font-size: .96rem; color: var(--muted); }
  #preise .leistungen-liste li::before { content: "✔"; color: var(--green); font-weight: 700; flex: none; }

  /* ---------- Responsive ---------- */
  /* Das Menue braucht mit sieben Eintraegen knapp 1000px Platz. Der Burger
     erschien frueher erst ab 900px - dazwischen lief das Menue ueber den
     Rand hinaus. Deshalb steht die Menue-Umschaltung in einer EIGENEN
     Abfrage bei 1000px, getrennt vom uebrigen Layout bei 900px.
     Achtung: Die "open"-Regel muss in derselben Abfrage stehen, sonst
     laesst sich der Burger zwischen 900 und 1000px nicht oeffnen. */
  @media (max-width: 1000px) {
    .nav-links { display: none; }
    .burger { display: block; }
    .nav-links.open {
      display: flex; position: absolute; top: 74px; left: 0; right: 0;
      flex-direction: column; background: var(--cream); padding: 20px 5%;
      gap: 16px; border-bottom: 1px solid var(--border);
    }
  }
  @media (max-width: 900px) {
    .ben-grid, .about-grid { grid-template-columns: 1fr; }
    .kontakt-karten { grid-template-columns: repeat(2, 1fr); }
    .g3 { grid-template-columns: 1fr; }
    .g2 { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .steps { grid-template-columns: 1fr 1fr; }
    .foot-grid { grid-template-columns: 1fr; }
    /* Diese Sonderregel ist seit dem 29.08.2026 ueberfluessig: Der Kasten
       steht auf ALLEN Schirmen im Fluss, nicht mehr nur auf schmalen.
       Sie bleibt nur stehen, damit auf dem Handy die Randabstaende der
       Karte nicht doppelt zaehlen. */
    .mock-float { margin-top: 14px; }
    /* Preise: aus drei Spalten wird untereinander. Das "Beliebtestes Paket"-
       Schild braucht dann etwas Luft nach oben, sonst schneidet es die Karte
       darueber an. */
    #preise .preis-grid, #preise .einmalig,
    #preise .preis-grid.zwei, #preise .einmalig.zwei { grid-template-columns: 1fr; }
    #preise .leistungen-liste { grid-template-columns: 1fr; }
    #preise .preis.top { margin-top: 8px; }
  }
  @media (max-width: 560px) {
    section { padding: 62px 0; }
    /* Der erste Satz sass auf dem Handy 141 px tief: Menueleiste plus die
       66 px Innenabstand der Hero. Am Bildschirmrand wirkte der Anfang
       dadurch leer. Die eigene .hero-Regel schlaegt das allgemeine
       section-padding, deshalb muss sie hier ausdruecklich ueberschrieben
       werden - unten bleibt der Abstand, nur oben wird gekuerzt. */
    .hero { padding-top: 24px; }
    .about-media .siegel { right: 8px; bottom: 8px; width: 88px; }
    .kontakt-karten { grid-template-columns: 1fr; }
    .steps, .stats-grid { grid-template-columns: 1fr; }
    .hero-cta .btn { width: 100%; justify-content: center; }
  }

/* Verweis vom Zeit-Kasten in den Rechner. Der Kasten macht neugierig -
   ohne diesen Link endet die Neugier dort, weil der Rechner erst weiter
   unten kommt und niemand weiss, dass es ihn gibt. */
#preise .zeit-link {
  display: inline-block; margin-top: 10px; color: var(--red);
  font-weight: 700; text-decoration: none; border-bottom: 2px solid transparent;
  transition: border-color .2s ease;
}
#preise .zeit-link:hover { border-bottom-color: var(--red); }