/* Die gesamte Gestaltung von jalveo.de.
 *
 * Bis zum 18.08.2026 stand das alles in index.html, in zwei <style> Bloecken
 * mit zusammen rund 2640 Zeilen. Das ging, solange es eine einzige Seite gab.
 * Mit Unterseiten waere jede davon eine vollstaendige Kopie gewesen, und jede
 * Aenderung an einer Farbe Handarbeit an einem Dutzend Stellen.
 *
 * Der Dateiname traegt eine Pruefsumme des Inhalts. Aendert sich das CSS,
 * aendert sich der Name, und kein Browser zeigt eine alte Fassung an. Genau
 * dieses Problem gab es im August 2026 schon einmal mit Bildern: gleicher
 * Name, neuer Inhalt, ein Jahr Zwischenspeicher -- auf dem Handy neu, auf dem
 * Rechner alt. Erzeugt wird der Name von deploy/seiten-bauen.mjs.
 *
 * ALLE Pfade hier drin beginnen mit einem Schraegstrich, also ab der
 * Wurzel der Domain. Relative Pfade wie fonts/inter.woff2 wuerden aus
 * dieser Datei heraus als /stil/fonts/inter.woff2 aufgeloest -- die
 * Schriften waeren weg, und auf einer Unterseite in einem Ordner waere
 * es noch eine Ebene falscher.
 */

/* ============================================================ Schriften */
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-latin-ext-0.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;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-latin-1.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;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-latin-ext-0.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;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-latin-1.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;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-latin-ext-0.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;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-latin-1.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;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-latin-ext-0.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;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-latin-1.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;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/inter-latin-ext-0.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;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/inter-latin-1.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;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/spacegrotesk-latin-ext-2.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;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/spacegrotesk-latin-3.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;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/spacegrotesk-latin-ext-2.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;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/spacegrotesk-latin-3.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;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/spacegrotesk-latin-ext-2.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;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/spacegrotesk-latin-3.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;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/spacegrotesk-latin-ext-2.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;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/spacegrotesk-latin-3.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;
}

/* ---------------------------------------------------------------------------
   Ersatzschriften mit angeglichener Metrik (Etappe 4b, 04.09.2026)

   WOZU

   Gemessen in Etappe 4a: mit blockierten Schriftdateien faellt der CLS der
   Seiten auf 0. Der Rest kam vom Umschalten der Ersatzschrift auf die echte
   -- die Ueberschrift wird beim Wechsel hoeher oder breiter, alles darunter
   rutscht. font-display:swap bleibt richtig, aber der Sprung muss weg.

   WIE DIE ZAHLEN ENTSTANDEN SIND

   Nicht geschaetzt, sondern in Chrome an der echten Schrift gemessen
   (deploy-fremdes Messskript, Werte im Bericht zu Etappe 4b):

     Space Grotesk   Ascent 98,40 %   Descent 29,20 % der Geviertgroesse
     Arial           Ascent 90,50 %   Descent 21,20 %
     Inter           Ascent 96,90 %   Descent 24,10 %

   Die Laufweite an vier echten Ueberschriften dieser Seite, darunter
   "Sichtbar werden ist kein Zufall", bei gleicher Groesse:

     Space Grotesk zu Arial   101,04 % bei Schnitt 600, 101,12 % bei 700
                              -> size-adjust 101,08 %
     Inter zu Arial           106,22 %  -> size-adjust 106,22 %

   Aus size-adjust folgen die beiden Ueberhaenge: ascent-override ist
   Ascent geteilt durch size-adjust, weil sich die Ueberhaenge auf das
   BEREITS skalierte Geviert beziehen. Rechnerisch ergibt das 97,35 und
   91,23 Prozent.

   NACHGESTIMMT, und zwar gemessen: Chrome rundet den Zeilenkasten je
   Schriftgroesse auf ganze Pixel. Bei 14,08 Pixel -- der Groesse der
   Knoepfe in der Kopfzeile -- rundete der rechnerische Wert 91,23 auf 16
   statt auf 17 Pixel. Die Kopfzeile wurde dadurch drei Pixel niedriger,
   die ganze Seite rutschte beim Schriftwechsel nach: gemessen 0,442 auf
   /webseite-mieten/ bei 768 und 0,2206 auf /kostenlose-webseite/ bei 390.

   Deshalb an vierzehn echten Schriftgroessen dieser Seite (12 bis 53,4
   Pixel) durchgestimmt und der Wert genommen, der am haeufigsten auf
   dieselbe Pixelzahl rundet wie die echte Schrift:
     Inter Ersatz     91,25 %  trifft 14 von 14 Groessen
     Grotesk Ersatz   97,50 %  trifft 13 von 14; bei 32 Pixel ein Pixel mehr

     Grotesk Ersatz   98,40 / 1,0108 = 97,35 %    29,20 / 1,0108 = 28,89 %
     Inter Ersatz     96,90 / 1,0622 = 91,23 %    24,10 / 1,0622 = 22,69 %

   WARUM FESTE LOKALE QUELLEN

   Ohne src waere die Ersatzfamilie die Standardschrift des Systems, und die
   ist ueberall eine andere -- die Metrik stimmte dann nur auf dem Rechner,
   auf dem gemessen wurde. Arial und Liberation Sans sind masshaltig
   zueinander, Helvetica Neue misst 101,10 % statt 101,04 % und liegt damit
   im Rauschen. Roboto steht zuletzt fuer Android und weicht ab; das ist der
   bewusste Rest. Findet ein System keine davon, faellt die Regel aus und es
   bleibt bei system-ui wie bisher.
   --------------------------------------------------------------------------- */
@font-face{
  font-family:'Grotesk Ersatz';
  src:local('Arial'),local('Helvetica Neue'),local('Liberation Sans'),local('Roboto');
  size-adjust:101.08%;
  ascent-override:97.50%;
  descent-override:28.89%;
  line-gap-override:0%;
  /* NUR die Zeichen, die die echte Schrift ueberhaupt hat.

     Ohne diese Zeile griff die Ersatzfamilie auch fuer Zeichen, die Space
     Grotesk NICHT enthaelt -- der Pfeil in "Weiter →" (U+2192) zum Beispiel.
     Der fiel vorher auf system-ui und sah anders aus als in Arial; schlimmer,
     er brachte die Metrik der Ersatzfamilie in diese Zeile ein und machte den
     Knopf einen Pixel hoeher. Gemessen: die Kopfzeile wuchs um 3 Pixel, die
     ganze Seite rutschte nach, CLS 0,2206 auf /kostenlose-webseite/ bei 390.

     Mit dem Bereich der echten Schrift bleibt der Pfeil bei system-ui wie
     bisher, und die Ersatzfamilie tut genau das, wofuer sie da ist. */
  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, 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;
}
@font-face{
  font-family:'Inter Ersatz';
  src:local('Arial'),local('Helvetica Neue'),local('Liberation Sans'),local('Roboto');
  size-adjust:106.22%;
  ascent-override:91.25%;
  descent-override:22.69%;
  line-gap-override:0%;
  /* NUR die Zeichen, die die echte Schrift ueberhaupt hat.

     Ohne diese Zeile griff die Ersatzfamilie auch fuer Zeichen, die Space
     Grotesk NICHT enthaelt -- der Pfeil in "Weiter →" (U+2192) zum Beispiel.
     Der fiel vorher auf system-ui und sah anders aus als in Arial; schlimmer,
     er brachte die Metrik der Ersatzfamilie in diese Zeile ein und machte den
     Knopf einen Pixel hoeher. Gemessen: die Kopfzeile wuchs um 3 Pixel, die
     ganze Seite rutschte nach, CLS 0,2206 auf /kostenlose-webseite/ bei 390.

     Mit dem Bereich der echten Schrift bleibt der Pfeil bei system-ui wie
     bisher, und die Ersatzfamilie tut genau das, wofuer sie da ist. */
  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, 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;
}


/* ========================================================== Gestaltung */
  *{box-sizing:border-box;}
  :root{
    /*
     * MONDLICHT. Gesetzt am 02.09.2026 nach AUFTRAG-MONDLICHT.md.
     *
     * Die Neonfarben sind weg, das Weltall bleibt. An die Stelle von Blau,
     * Violett, Pink und Limette tritt Mondlicht: Schwarz mit Blaustich,
     * tiefes Blau, Sternweiss, Silber.
     *
     * WARUM DIE ALTEN NAMEN STEHEN BLEIBEN
     *
     * --lime steht an 66 Stellen, --violet an 20, --grad an 16, --pink an 12.
     * Wuerde man sie umbenennen, waeren das 114 Aenderungen quer durch die
     * Datei und den Quelltext. Stattdessen zeigen die alten Namen auf die
     * neuen Werte: jede Verwendung laeuft unveraendert weiter, und die Seite
     * wechselt die Stimmung an genau einer Stelle.
     */
    --nacht:        #05070E;   /* Grund, Schwarz mit Blaustich */
    --nacht-weich:  #0A0F1C;   /* abgesetzte Flaechen */
    --tiefblau:     #131826;   /* Karten */
    --tiefblau-2:   #1B2233;   /* Karten, zweite Ebene */
    --sternweiss:   #F7F2E6;   /* Ueberschriften und Fliesstext */
    --silber:       #BCB4A2;   /* Nebentext */
    --silber-tief:  #9E9583;   /* Beschriftungen */
    --blau:         #3568A6;   /* Raender, ruhige Flaechen */
    --blau-hell:    #6E9FDE;   /* Links, aktive Zustaende */
    --mond:         #F4E6BE;   /* das Mondlicht, jetzt mit dem leichten Gelb */
    --mond-warm:    #F4E6BE;   /* der Kern des Lichts: Hof und Hover */
    --terrakotta:   #E2775C;   /* aus dem Logo (#D15741), fuer dunklen Grund aufgehellt */

    /* Die alten Namen zeigen auf die neuen. */
    --bg:       var(--nacht);
    --bg-soft:  var(--nacht-weich);
    --card:     var(--tiefblau);
    --card-2:   var(--tiefblau-2);
    --line:     rgba(231,219,190,.12);
    --ink:      var(--sternweiss);
    --ink-soft: var(--silber);
    --blue:     var(--blau-hell);
    --violet:   var(--blau);
    --pink:     var(--terrakotta);
    --lime:     var(--mond);

    --grad:   linear-gradient(120deg, var(--blau), var(--blau-hell) 58%, var(--mond));
    --grad-2: linear-gradient(120deg, var(--mond), var(--blau-hell) 50%, var(--blau));

    --shadow:    0 30px 80px -30px rgba(5,10,22,.75);
    --shadow-sm: 0 10px 30px -14px rgba(0,0,0,.6);

    /* Vom Aufmacher-Netz gelesen. Als Zahlentripel, damit die Deckung
       dazugerechnet werden kann. Das Skript liest sie ueber getComputedStyle;
       deshalb findet eine Suche nach var(--netz-punkt) nichts. */
    --netz-punkt: 110,159,222;
    --netz-linie: 53,104,166;
    --netz-puls:  244,230,190;
    --netz-spur:  5,7,14;

    /* Steht zusaetzlich lokal in .warum-Abschnitt und wird dort gesetzt --
       hier nur, damit der Wert an einer Stelle dokumentiert ist. */
    --warum-grund: 19,24,38;

    /* Schritt 5: von 28/20/14 herunter. Eine ruhige Seite braucht weniger. */
    --radius-lg: 20px;
    --radius-md: 14px;
    --radius-sm: 10px;

    --check-icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6L9 17l-5-5' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  }
  html{scroll-behavior:smooth;}
  /* Wer im Betriebssystem "Bewegung reduzieren" eingeschaltet hat, tut das oft
     wegen Schwindel oder Migraene. Alle 33 anderen Animationen der Seite werden
     dafuer abgeschaltet -- das weiche Scrollen bis zum 23.08.2026 nicht: ein
     Klick auf "Kontakt aufnehmen" schob den Bildschirm auch dann in 179
     Schritten ueber 1,5 Sekunden 17.057 Pixel weit. Genau die Art Bewegung,
     die die Einstellung verhindern soll. */
  @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }
  body{
    margin:0;font-family:'Inter','Inter Ersatz',system-ui,sans-serif;background:var(--bg);color:var(--ink);
    -webkit-font-smoothing:antialiased;overflow-x:hidden;
  }
  h1,h2,h3,h4{font-family:'Space Grotesk','Grotesk Ersatz',system-ui,sans-serif;margin:0;letter-spacing:-0.03em;}
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
  .grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
  ::selection{background:var(--violet);color:var(--sternweiss);}

  /* background blobs */
  .blob{position:fixed;border-radius:50%;filter:blur(90px);opacity:0.35;z-index:0;pointer-events:none;}
  .blob-1{width:520px;height:520px;background:var(--blue);top:-160px;left:-160px;}
  .blob-2{width:600px;height:600px;background:var(--pink);top:900px;right:-220px;}
  .blob-3{width:480px;height:480px;background:var(--violet);top:2200px;left:-200px;}
  .blob-4{width:500px;height:500px;background:var(--lime);opacity:0.14;top:3400px;right:-160px;}

  section{position:relative;z-index:1;padding:100px 0;}
  @media (max-width:640px){ section{padding:64px 0;} }

  /* ---------- Header ---------- */
  header{
    position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);
    background:rgba(5,7,14,0.72);border-bottom:1px solid var(--line);
  }
  .nav{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;}
  /* Der Markenschriftzug wird NIE mit einer Webschrift nachgebaut, auch nicht
     hier im Header. Er liegt nur als Bilddatei vor, Gecko und Schrift in einem. */
  /* flex:none ist hier das Entscheidende.
     Ohne das darf der Schriftzug schrumpfen, und genau das ist am 21.08.2026
     passiert: mit sechs Menuepunkten und der Erreichbarkeitszeile war die
     Leiste zu voll, und das Bild wurde auf 0 Pixel zusammengedrueckt. Ein
     Logo, das verschwindet, ist schlimmer als ein Menuepunkt weniger. */
  .brand{display:flex;align-items:center;flex:none;}
  .brand img{height:32px;width:auto;}
  @media (max-width:420px){ .brand img{height:27px;} }

  /* min-width:0 erlaubt der Mitte zu schrumpfen, ohne die beiden Aussenteile
     zu verdraengen. white-space:nowrap verhindert, dass "So funktioniert's"
     auf zwei Zeilen umbricht und die Leiste hoeher macht. */
  .navlinks{display:flex;gap:26px;margin-left:26px;min-width:0;}
  .navlinks a{
    font-size:0.92rem;font-weight:600;color:var(--ink-soft);
    white-space:nowrap;transition:color .15s;
  }
  .navlinks a:hover{color:var(--ink);}
  /* Enger, bevor etwas verschwindet: erst ruecken die Punkte zusammen. */
  @media (max-width:1180px){ .navlinks{gap:18px;margin-left:20px;font-size:0.88rem;} }
  @media (max-width:1040px){ .navlinks{gap:14px;} .navlinks a{font-size:0.85rem;} }
  @media (max-width:940px){ .navlinks{display:none;} }

  /* Zugang zum Kundenbereich. Bewusst neben dem Hauptknopf statt in der
     Navigation: er richtet sich an bestehende Kunden, nicht an Interessenten,
     und bleibt deshalb auch auf dem Handy sichtbar, wo die Navigation wegfaellt. */
  .nav-rechts{display:flex;align-items:center;gap:14px;flex:none;}
  .nav-rechts .btn{white-space:nowrap;}
  .nav-login{
    font-size:0.88rem;font-weight:600;color:var(--ink-soft);white-space:nowrap;
    border:1px solid var(--line);border-radius:999px;padding:9px 18px;
    transition:border-color .18s ease, color .18s ease;
  }
  .nav-login:hover{border-color:var(--violet);color:var(--ink);}
  @media (max-width:1040px){ .nav-login{display:none;} }
  @media (max-width:640px){ .nav-rechts{gap:8px;} }
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:13px 26px;border-radius:999px;font-weight:700;font-size:0.95rem;
    cursor:pointer;border:none;transition:transform .18s ease, box-shadow .18s ease;
  }
  .btn:hover{transform:translateY(-2px);}
  .btn-primary{background:var(--grad);color:var(--sternweiss);box-shadow:0 12px 30px -10px rgba(5,10,22,0.7);}
  .btn-outline{background:transparent;color:var(--ink);border:1.5px solid var(--line);}
  .btn-outline:hover{border-color:var(--violet);}
  .btn-sm{padding:10px 20px;font-size:0.88rem;}

  /* marquee ticker */
  /* Weiche Raender, Teil 34.5: die Woerter liefen vorher hart abgeschnitten
     aus dem Bild, man sah halbe Buchstaben. */
  .ticker{
    position:relative;background:rgba(255,255,255,0.022);border-bottom:1px solid var(--line);
    overflow:hidden;white-space:nowrap;padding:12px 0;
    /* Diese beiden Zeilen standen seit dem ersten Commit doppelt da:
       weiter oben im selben Block mit 6%/94%, hier mit 8%/92%. Der Browser
       verwarf die erste Fassung beim Einlesen, sichtbar war immer diese.
       Die tote Fassung ist am 23.08.2026 entfernt worden. */
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  }
  .ticker-track{display:inline-flex;animation:ticker 46s linear infinite;}
  .ticker:hover .ticker-track{animation-play-state:paused;}
  .ticker-track span{
    display:inline-flex;align-items:center;gap:9px;font-family:'Inter','Inter Ersatz',system-ui,sans-serif;font-size:0.75rem;
    font-weight:600;letter-spacing:0.1em;color:var(--ink);text-transform:uppercase;padding:0 24px;
  }
  .ticker-track span::before{
    content:"";width:13px;height:13px;flex:none;border-radius:50%;background:var(--grad);
    -webkit-mask:var(--check-icon) center/contain no-repeat;
    mask:var(--check-icon) center/contain no-repeat;
  }
  @keyframes ticker{from{transform:translateX(0);}to{transform:translateX(-50%);}}
  @media (prefers-reduced-motion:reduce){ .ticker-track{animation:none;} }

  /* ---------- Hero ---------- */
  .hero{padding:90px 0 60px;}
  .hero-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:50px;align-items:center;}
  @media (max-width:960px){ .hero-grid{grid-template-columns:1fr;} }
  .eyebrow-chip{
    display:inline-flex;align-items:center;gap:8px;font-family:'Space Grotesk','Grotesk Ersatz',system-ui,sans-serif;font-size:0.7rem;font-weight:600;
    text-transform:uppercase;letter-spacing:0.1em;color:var(--ink);background:var(--card-2);
    border:1px solid var(--line);padding:8px 16px;border-radius:999px;margin-bottom:22px;
  }
  .eyebrow-chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--grad);}
  .hero h1{font-size:clamp(2.4rem,6vw,4.4rem);line-height:1.04;font-weight:700;margin-bottom:22px;}
  .hero p.lead{font-size:1.15rem;color:var(--ink-soft);max-width:520px;margin:0 0 30px;line-height:1.5;}
  .hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:28px;}
  .stickers{display:flex;flex-wrap:wrap;gap:10px;}
  .stickers.center{justify-content:center;margin-top:30px;}
  .kundenbereich-link{
    text-align:center;margin:22px 0 0;font-size:0.9rem;color:var(--ink-soft);
  }
  .kundenbereich-link a{
    color:var(--ink);text-decoration:underline;text-underline-offset:4px;
    transition:color .18s ease;
  }
  .kundenbereich-link a:hover{color:var(--pink);}

  .sticker{
    font-size:0.8rem;font-weight:700;background:var(--card-2);border:1px solid var(--line);
    padding:8px 14px;border-radius:999px;color:var(--ink-soft);
  }
  .sticker.hot{background:var(--grad);color:var(--sternweiss);border:none;}
  .hero-visual{position:relative;display:flex;align-items:center;justify-content:center;}
  .hero-orb{
    width:100%;aspect-ratio:1/1;max-width:420px;border-radius:50%;
    background:conic-gradient(from 140deg,var(--blue),var(--violet),var(--pink),var(--blue));
    display:flex;align-items:center;justify-content:center;position:relative;
    box-shadow:0 40px 100px -30px rgba(53,104,166,0.5);
  }
  .hero-orb::before{
    content:"";position:absolute;inset:14px;border-radius:50%;background:var(--bg);
  }
  .hero-orb img{position:relative;width:58%;z-index:2;filter:drop-shadow(0 20px 40px rgba(0,0,0,0.5));}
  .float-chip{
    position:absolute;background:var(--card);border:1px solid var(--line);border-radius:999px;
    padding:10px 16px;font-size:0.82rem;font-weight:700;box-shadow:var(--shadow-sm);
    animation:floaty 5s ease-in-out infinite;
  }
  .chip-1{top:6%;left:-4%;}
  .chip-2{bottom:8%;right:-6%;animation-delay:1.4s;}
  @keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}
  @media (max-width:640px){ .float-chip{display:none;} }

  /* ---------- section head ---------- */
  .section-head{max-width:680px;margin:0 0 50px;}
  .section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
  .section-head h2{font-size:clamp(1.8rem,4vw,2.6rem);margin:14px 0 16px;font-weight:700;}
  .section-head p{color:var(--ink-soft);font-size:1.05rem;line-height:1.55;margin:0;}

  /* ---------- Problem ---------- */
  .p-card{
    background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);
    padding:28px;position:relative;transition:transform .2s ease;
  }
  .p-card:nth-child(2){transform:rotate(0.6deg);}
  .p-card:nth-child(3){transform:rotate(-0.6deg);}
  .p-card:hover{transform:translateY(-6px) rotate(0deg);}
  .p-card h3{font-size:1.2rem;margin:0 0 10px;}
  .p-card p{color:var(--ink-soft);margin:0;font-size:0.95rem;line-height:1.5;}

  /* ---------- Process ---------- */
  /* Preis und Vertrauenszeile unter den vier Schritten.
     Nimmt den Verlaufsrahmen des hervorgehobenen Preispakets auf, damit sie
     sichtbar zur Preiswelt gehoert, ohne ein drittes Sale Banner zu sein. */
  .pricehint{
    display:flex;align-items:center;justify-content:center;gap:8px 16px;flex-wrap:wrap;
    max-width:720px;margin:36px auto 0;padding:15px 28px;
    border:1.5px solid transparent;border-radius:999px;
    background:linear-gradient(var(--card),var(--card)) padding-box, var(--grad) border-box;
    box-shadow:var(--shadow-sm);text-align:center;
    transition:transform .22s ease, box-shadow .28s ease;
  }
  .pricehint:hover{transform:translateY(-2px);box-shadow:0 18px 44px -18px rgba(5,10,22,0.75);}
  .pricehint b{font-family:'Space Grotesk','Grotesk Ersatz',system-ui,sans-serif;font-weight:700;font-size:1.02rem;letter-spacing:-0.02em;}
  .pricehint span{color:var(--ink-soft);font-size:0.9rem;}
  .pricehint::after{
    content:"→";color:var(--violet);font-weight:700;flex:none;
    transition:transform .22s ease;
  }
  .pricehint:hover::after{transform:translateX(4px);}
  @media (max-width:560px){
    .pricehint{flex-direction:column;gap:6px;padding:18px 24px;margin-top:28px;}
    .pricehint::after{display:none;}
  }
  @media (prefers-reduced-motion:reduce){
    .pricehint,.pricehint::after{transition:none;}
    .pricehint:hover{transform:none;}
  }

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

  /* ---------- Pricing ---------- */
  .sale-banner{
    max-width:1180px;margin:0 auto 34px;text-align:center;padding:13px 20px;border-radius:999px;
    background:var(--grad);color:var(--sternweiss);font-weight:700;font-size:0.92rem;font-family:'Space Grotesk','Grotesk Ersatz',system-ui,sans-serif;
  }
  /* ===== Preiskarten, Teil 35 ==========================================
     Am 19.08.2026 neu gebaut, HANDY ZUERST.

     Auf dem Handy liegen die drei Karten NEBENEINANDER in einer Spur, die
     seitwaerts gewischt wird. Darunter Punkte, die zeigen, wo man ist.
     Auf grossen Schirmen stehen alle drei nebeneinander im Raster.

     Das Wischen macht der Browser selbst, mit overflow-x und scroll-snap.
     Kein Skript. Faellt JavaScript aus, kann man weiter wischen -- nur die
     Punkte bewegen sich dann nicht mit, und das ist die harmloseste
     denkbare Einbusse. Die Startposition auf dem Kometen setzt ein Skript,
     ohne das beginnt man beim Stern; auch das ist kein Schaden. */
  .price-buehne{ position:relative; }
  /* Volle Breite auf dem Handy: die Spur bricht aus der Textspalte aus, damit
     die Karte breit genug bleibt und die Nachbarkarte trotzdem hervorlugt.
     Auf grossen Schirmen ist der Ausbruch wirkungslos, weil .wrap dort ohnehin
     breiter ist als das Raster. */
  @media (max-width:760px){
    .price-buehne{
      width:100vw; position:relative; left:50%; transform:translateX(-50%);
    }
  }
  /* ================================================================
     AM HANDY LIEGEN DIE KARTEN UNTEREINANDER. KEIN WISCHEN.

     Bis zum 24.08.2026 war das hier ein waagerechtes Wischband mit
     Einrastpunkten, und ein Skript sprang beim Laden auf die Empfehlung.
     Zwei Probleme auf einmal, beide vom Inhaber gemeldet:

     "Die Empfehlung als allererstes und bei Stern Nova kommt danach: Das ist
     so irrefuehrend." -- Man landete mitten im Band, Stern lag links
     ausserhalb. Wer nicht wischte, sah die guenstigste Fassung nie.

     "Man muss nach rechts und links halten mit dem Handy, und da bleibt die
     ganze Seite haengen." -- Ein waagerechtes Wischfeld in einer senkrecht
     scrollenden Seite ist genau die Stelle, an der ein Telefon nicht
     entscheiden kann, was gemeint ist. Bei einem schraegen Wisch blockiert
     es beides, und die Seite fuehlt sich kaputt an. scroll-snap und
     overscroll-behavior machen es schlimmer, nicht besser.

     Untereinander loest beides. Drei Karten sind kein Katalog -- man
     scrollt ohnehin. Und die Reihenfolge im HTML ist die richtige:
     Stern, Komet, Nova, vom Kleinsten zum Groessten. Die Empfehlung wird
     MARKIERT, nicht vorgezogen. Wer vergleichen will, liest von oben nach
     unten; das kann jeder.
     ================================================================ */
  .price-grid{
    display:grid;
    grid-auto-flow:row;
    grid-template-columns:1fr;
    gap:18px;
    /* Kein overflow-x, kein scroll-snap, kein overscroll-behavior.
       Es gibt nichts mehr, was waagerecht laufen koennte. */
    /* Seitlicher Rand, damit die Karten nicht an den Fensterkanten kleben.

       Im alten Wischband war er da, damit die Nachbarkarte hervorlugte. Ohne
       ihn stehen die Karten randlos -- und der Zier-Gecko an der oberen Ecke
       ragt acht Pixel darueber hinaus. Am 24.08.2026 gemessen: die ganze
       Startseite liess sich dadurch bei 360 Pixeln acht Pixel nach rechts
       schieben. Ein Zierbild, das die Seite wackeln laesst. */
    padding:22px 14px 0;
    margin:0 auto;
    max-width:548px;
  }
  /* Die Wischpunkte haben ohne Wischband keinen Sinn mehr. */
  .price-punkte{ display:none; }

  /* Rasterfelder duerfen schrumpfen.

     Ohne diese Zeile gilt min-width:auto, und ein Rasterfeld wird dann nie
     schmaler als sein breitester unteilbarer Inhalt. Am 24.08.2026 gemessen:
     bei 360 Pixeln Fensterbreite war der Karteninhalt 368 Pixel breit und
     schob die ganze Startseite acht Pixel nach rechts -- die Seite liess sich
     waagerecht verschieben. Vorher gab es das nicht, weil die Karten in einem
     Wischband lagen, in dem Ueberbreite erwuenscht war. */
  .price-card{ min-width:0; }
  .price-grid::-webkit-scrollbar{ display:none; }
  .price-card{ scroll-snap-align:center; }

  .price-punkte{
    display:flex; justify-content:center; gap:9px; margin:14px 0 0;
  }
  .price-punkte span{
    width:7px; height:7px; border-radius:50%;
    background:rgba(255,255,255,0.22);
    transition:background 0.2s ease, transform 0.2s ease;
  }
  .price-punkte span[data-aktiv]{
    background:var(--lime); transform:scale(1.35);
  }

  /* Ab hier der grosse Schirm: Raster statt Spur, keine Punkte.

     900 und nicht 761: Die drei Karten haben eine Mindestbreite von 267 Pixeln.
     Drei davon plus zwei Abstaende von 24 und der Seitenrand von zweimal 24
     brauchen 897 Pixel. Bei 761 schaltete die Seite trotzdem schon auf drei
     Spalten -- die dritte Karte (Nova) stand dann bis zu 129 Pixel ueber dem
     Rasterrand. Am 23.08.2026 gemessen: bei 768 Pixeln Fensterbreite waren
     105 Pixel der Nova-Karte ausserhalb des Fensters, 39 Prozent ihrer Breite,
     und weil die Seite waagerechtes Scrollen unterbindet, kam man nicht heran.
     Betroffen war genau der Bereich, in dem ein Tablet quer steht.

     Wer die Mindestbreite der Karten aendert, rechnet diesen Wert neu. */
  @media (min-width:900px){
    .price-grid{
      grid-auto-flow:row;
      grid-template-columns:repeat(3,1fr);
      grid-auto-columns:auto;
      gap:24px; max-width:1080px; margin:0 auto;
      align-items:stretch;
      overflow:visible; padding:26px 0 0;
    }
    .price-punkte{ display:none; }
  }
  .price-card{
    background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
    padding:32px 26px;display:flex;flex-direction:column;position:relative;
  }
  /*
   * Die Empfehlung: der Rahmen LAEUFT.
   *
   * Aufbau wie vorher - der Kartengrund liegt als padding-box darueber, der
   * Verlauf als border-box darunter, sichtbar bleiben die zwei Pixel Rand.
   * Neu ist, dass der Verlauf ein KEGEL ist und sein Winkel durchdreht. Der
   * feste Verlauf von Blau nach Pink bleibt als erste Schicht darunter
   * liegen: dadurch ist der Rahmen immer vollstaendig farbig und der
   * wandernde helle Punkt legt sich nur darueber. Ohne diese Grundschicht
   * waeren drei Viertel des Rahmens in jedem Augenblick unsichtbar.
   *
   * --dreh ist oben als @property angemeldet (fuer die Schrittkarten). Ohne
   * @property kennt der Browser den Wert nur als Text, kann ihn nicht weich
   * durchdrehen und laesst die Bewegung aus - der feste Verlauf bleibt dann
   * stehen, es geht also nichts kaputt.
   */
  .price-card.featured{
    /* Ein Pixel weniger Innenabstand als die anderen Karten.
       Grund: dieser Rahmen ist 2px stark, der der anderen 1px. Ohne Ausgleich
       sitzt der gesamte Karteninhalt einen Bildpunkt tiefer und die
       Schaltflaeche steht 1px unter denen der Nachbarn -- gemessen, nicht
       vermutet, und auf einer Preistafel faellt so etwas auf. */
    padding:31px 25px;
    border:2px solid transparent;
    background:
      linear-gradient(var(--card),var(--card)) padding-box,
      conic-gradient(from var(--dreh),
        rgba(255,255,255,0) 0deg,
        rgba(255,255,255,0) 190deg,
        rgba(255,255,255,0.92) 262deg,
        rgba(255,255,255,0) 330deg,
        rgba(255,255,255,0) 360deg) border-box,
      var(--grad) border-box;
    box-shadow:var(--shadow);
  }
  .price-tag,.price-tag-new{
    position:absolute;top:-14px;left:26px;font-size:0.72rem;font-weight:800;padding:6px 14px;
    border-radius:999px;letter-spacing:0.04em;
  }
  .price-tag{background:var(--grad);color:var(--sternweiss);}
  .price-tag-new{background:var(--card-2);color:var(--lime);border:1px solid var(--line);}
  /* ===== Paketsymbole ==============================================
     Stern, Komet und Nova als freigestellte Bilder, aus Jalveo_Paketlogos.
     Die Effekte stammen aus der mitgelieferten effekte.css, hier nur an die
     Kartengroesse angepasst: dort standen clamp(96px,12vw,160px) - in einer
     330 Pixel breiten Preiskarte haette das die halbe Karte gefuellt und die
     Ueberschrift nach unten gedrueckt.

     WICHTIG, warum Schweben und Zeigen getrennt liegen: die Vorlage setzte
     transform sowohl in der Dauerbewegung als auch im :hover. Eine laufende
     Animation gewinnt gegen eine gewoehnliche Regel - der Hebe-Effekt beim
     Zeigen waere also nie zu sehen gewesen. Deshalb bewegt sich hier das
     BILD (Animation) und der KASTEN darum hebt sich (hover). */
  /* Kopfzeile: Text links, Symbol rechts. baseline waere hier falsch - die
     drei Textzeilen sind unterschiedlich hoch, das Symbol soll auf ihrer
     MITTE sitzen und nicht auf der Schriftlinie der ersten. */
  .paket-kopf{
    display:flex;align-items:center;gap:14px;
    margin:0 0 18px;
  }
  .paket-kopf-text{ flex:1;min-width:0; }
  .paket-symbol{
    width:clamp(66px, 6.5vw, 86px);
    flex:none;margin:0;
    transition:transform .35s ease, filter .35s ease;
  }
  .paket-symbol picture{ display:contents; }
  .paket-logo{
    display:block;width:100%;height:auto;object-fit:contain;
    will-change:transform, filter;
  }
  /* Zeigen: der KASTEN hebt sich und wird heller, das BILD behaelt seine
     eigene Bewegung. Beides muss getrennt bleiben - eine laufende Animation
     gewinnt gegen eine gewoehnliche Regel, ein transform oder filter im
     :hover auf demselben Element waere also wirkungslos. Genau daran ist die
     mitgelieferte effekte.css gescheitert. */
  .price-card:hover .paket-symbol{
    transform:translateY(-8px) scale(1.06);
    filter:brightness(1.14) saturate(1.08);
  }

  /* Jedes Symbol bewegt sich wie das, was es zeigt. */

  /* Stern: funkeln. Kein Schweben - ein Stern steht, er blitzt. Die
     Helligkeitsspitzen sitzen bewusst unregelmaessig (18 % und 55 %) und
     nicht auf halber Strecke: ein gleichmaessiges Auf und Ab liest sich als
     Atmen, ein ungleichmaessiges als Funkeln. */
  .paket-logo-stern{ animation:paketFunkeln 5.2s ease-in-out infinite; }
  @keyframes paketFunkeln{
    0%,100%{ transform:scale(1) rotate(0deg);
             filter:drop-shadow(0 0 12px rgba(53,104,166,0.45)) brightness(1); }
    18%    { transform:scale(1.055) rotate(2deg);
             filter:drop-shadow(0 0 28px rgba(110,159,222,0.85)) brightness(1.28); }
    32%    { transform:scale(1.01) rotate(1deg);
             filter:drop-shadow(0 0 14px rgba(53,104,166,0.5)) brightness(1.03); }
    55%    { transform:scale(1.065) rotate(-2deg);
             filter:drop-shadow(0 0 32px rgba(237,230,210,0.8)) brightness(1.32); }
    74%    { transform:scale(1) rotate(0deg);
             filter:drop-shadow(0 0 12px rgba(53,104,166,0.45)) brightness(1); }
  }

  /* Komet: er BEWEGT sich nicht. Vorher schaukelte er hin und her wie eine
     Schaukel - das sah aus, als haenge er an einem Faden. Ein Komet fliegt,
     und was an ihm lebt, ist der Schweif.

     Deshalb steht das Bild still, und nur das Feuer brennt: der Schein sitzt
     versetzt nach oben rechts, also in Richtung des Schweifs, und schwankt
     ungleichmaessig in Weite und Helligkeit. Kein transform, keine Drehung. */
  .paket-logo-komet{ animation:paketFeuer 2.9s ease-in-out infinite; }
  @keyframes paketFeuer{
    0%,100%{ filter:drop-shadow(7px -7px 15px rgba(53,104,166,0.55))
                    drop-shadow(15px -15px 28px rgba(110,159,222,0.32))
                    brightness(1); }
    24%    { filter:drop-shadow(10px -10px 22px rgba(237,230,210,0.72))
                    drop-shadow(21px -21px 38px rgba(110,159,222,0.5))
                    brightness(1.14); }
    41%    { filter:drop-shadow(8px -8px 17px rgba(53,104,166,0.6))
                    drop-shadow(17px -17px 31px rgba(110,159,222,0.38))
                    brightness(1.04); }
    63%    { filter:drop-shadow(12px -12px 26px rgba(237,230,210,0.8))
                    drop-shadow(24px -24px 44px rgba(110,159,222,0.55))
                    brightness(1.2); }
    82%    { filter:drop-shadow(8px -8px 18px rgba(53,104,166,0.58))
                    drop-shadow(17px -17px 32px rgba(110,159,222,0.36))
                    brightness(1.05); }
  }

  /* Nova: pulsieren. Das passt zu dem, was eine Nova ist, und bleibt. */
  .paket-logo-nova{ animation:paketNova 4.5s ease-in-out infinite; }
  @keyframes paketNova{
    0%,100%{ transform:scale(1);
             filter:drop-shadow(0 0 15px rgba(53,104,166,0.55)); }
    50%    { transform:scale(1.045);
             filter:drop-shadow(0 0 26px rgba(237,230,210,0.74)); }
  }

  @media (prefers-reduced-motion:reduce){
    .paket-logo{
      animation:none;
      filter:none;
    }
    .paket-symbol{ transition:none; }
    .price-card:hover .paket-symbol{ transform:none;filter:none; }
  }
  /* Auf dem Handy kleiner: dort steht die Karte allein und das Symbol wuerde
     sonst vor dem Preis stehen statt neben ihm. */
  @media (max-width:640px){
    .paket-symbol{ width:78px;margin-bottom:10px; }
  }

  .price-card h3{font-size:1.2rem;margin:0 0 4px;}
  .price-sub{color:var(--ink-soft);font-size:0.88rem;margin:0 0 18px;}
  .price-amount{font-size:2.1rem;font-weight:700;font-family:'Space Grotesk','Grotesk Ersatz',system-ui,sans-serif;display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;margin-bottom:20px;}
  .price-was{font-size:1.05rem;font-weight:600;color:var(--ink-soft);text-decoration:line-through;font-family:'Inter','Inter Ersatz',system-ui,sans-serif;}
  .price-off{font-size:0.72rem;font-weight:800;color:#05070E;background:var(--lime);padding:3px 10px;border-radius:999px;white-space:nowrap;font-family:'Inter','Inter Ersatz',system-ui,sans-serif;}
  /* Preis Choreografie: hochzaehlen, Umzug als Streichpreis, runterzaehlen,
     gruen aufleuchten. Ohne JS oder mit reduzierter Bewegung bleibt alles
     statisch im Endzustand. */
  .price-amount{position:relative;}
  .price-now{display:inline-block;font-variant-numeric:tabular-nums;}
  .preis-anim .price-was,.preis-anim .price-off{opacity:0;transition:opacity .45s ease;}
  .preis-anim.preis-strich-da .price-was{opacity:1;}
  .preis-anim.preis-fertig .price-off{opacity:1;}
  .preis-klon{
    position:absolute;z-index:5;font-weight:700;font-family:'Space Grotesk','Grotesk Ersatz',system-ui,sans-serif;color:var(--ink);
    pointer-events:none;white-space:nowrap;line-height:1.2;
    transition:transform .6s cubic-bezier(.4,0,.2,1),font-size .6s cubic-bezier(.4,0,.2,1),color .6s ease;
  }
  .preis-klon::after{
    content:"";position:absolute;left:0;top:54%;height:2px;width:0;
    background:currentColor;transition:width .3s ease .35s;
  }
  .preis-klon.preis-klon-los{font-weight:600;font-family:'Inter','Inter Ersatz',system-ui,sans-serif;color:var(--ink-soft);}
  .preis-klon.preis-klon-los::after{width:100%;}
  .preis-blitz{animation:preisBlitz .95s ease-out;}
  @keyframes preisBlitz{
    0%{color:var(--lime);}
    60%{color:var(--lime);}
    100%{color:inherit;text-shadow:none;}
  }
  @media (prefers-reduced-motion:reduce){
    .preis-klon{transition:none;}
    .preis-blitz{animation:none;}
  }
  .price-features{list-style:none;padding:0;margin:0 0 26px;display:flex;flex-direction:column;gap:11px;flex:1;}
  .price-features li{display:flex;gap:10px;font-size:0.9rem;color:var(--ink-soft);align-items:flex-start;}
  .price-features li::before{content:"✓";color:var(--lime);font-weight:800;flex:none;}
  .pakete-warum{
    max-width:52ch;margin:16px auto 0;
    font-size:1.02rem;color:var(--ink);
  }
  .price-note{margin-top:40px;text-align:center;color:var(--ink-soft);font-size:0.88rem;max-width:640px;margin-left:auto;margin-right:auto;}

  /* --- Karteninhalt neu: Bauform statt Seitenzahl ------------------------ */
  /* Die Bauform (One Pager, Multi Pager, Individuell) sagt, WAS gebaut wird,
     die Erklaerzeile darunter sagt es noch einmal in Alltagssprache und darf
     dabei ruhig leiser sein - sie ist Hilfe, nicht Werbung. */
  .price-bauform,
  /* .paket-zusatz ist die frühere .price-bauform, nur eine Ebene weiter innen:
     sie steht seit dem 18.08.2026 INNERHALB der h3, damit Google beim
     Paketnamen auch "Webseite im Abo" liest. display:block bringt sie in eine
     eigene Zeile, genau wie der Absatz vorher. Deshalb dieselben Werte --
     wer einen davon ändert, muss den anderen mitziehen. */
  .paket-zusatz{
    margin:0 0 2px;font-size:0.95rem;font-weight:600;color:var(--ink);
    font-family:'Space Grotesk','Grotesk Ersatz',system-ui,sans-serif;
  }
  .paket-zusatz{ display:block;font-weight:600; }
  .paket-name{ display:block; }
  .price-erklaerung{
    margin:0;font-size:0.85rem;line-height:1.45;color:var(--ink-soft);
  }
  .price-nachsatz{
    margin:0 0 18px;font-size:0.82rem;line-height:1.45;color:var(--ink-soft);
    font-style:italic;
  }
  /* Der Knopf sitzt immer unten, egal wie unterschiedlich lang die Listen
     sind. Das macht .price-features mit flex:1 - der Knopf braucht nur noch
     margin-top:auto als zweite Sicherung, falls die Liste einmal fehlt. */
  .price-knopf{margin-top:auto;width:100%;justify-content:center;}

  /* Auf dem Handy stehen die Karten untereinander - in derselben Reihenfolge
     wie auf dem Rechner: Stern, Komet, Nova.

     Hier stand einmal #paket-komet{order:-1}, damit die Empfehlung zuerst
     kommt. Wieder heraus: die Preise steigen von links nach rechts, und
     genau das erwartet man auch von oben nach unten. Wer die Empfehlung
     vorzieht, bricht diese Ordnung und lasst den Leser mit 299 € beginnen
     statt mit 149 €. Die Empfehlung faellt ohnehin durch Rahmen, Schein und
     das Maskottchen auf. */
  /* Die frühere Regel, die die Karten auf dem Handy untereinander stellte,
     ist am 19.08.2026 entfallen -- sie werden jetzt gewischt. */

  /* --- In jedem Paket enthalten ----------------------------------------- */
  /* Ueber die volle Breite, dunkler abgesetzt, damit es als eigener Kasten
     liest und nicht als Fussnote der letzten Karte. */
  .enthalten-band{
    margin-top:56px;padding:52px 0;
    background:var(--card-2);
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  }
  .enthalten{max-width:980px;margin:0 auto;text-align:center;}
  .enthalten-titel{
    margin:0 0 28px;font-family:'Space Grotesk','Grotesk Ersatz',system-ui,sans-serif;font-weight:700;
    font-size:clamp(1.35rem,3.2vw,1.9rem);color:var(--ink);
    letter-spacing:-0.01em;
  }
  /* Mehrspaltig, aber linksbuendig innerhalb der Spalten: eine zentrierte
     Liste mit unterschiedlich langen Eintraegen franst an beiden Seiten aus
     und wird dadurch schwer zu ueberfliegen. */
  .enthalten-liste{
    list-style:none;padding:0;margin:0;text-align:left;
    display:grid;grid-template-columns:repeat(3,1fr);gap:14px 32px;
  }
  @media (max-width:860px){ .enthalten-liste{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:560px){ .enthalten-liste{grid-template-columns:1fr;} }
  .enthalten-liste li{
    display:flex;gap:10px;align-items:flex-start;
    font-size:0.95rem;line-height:1.4;color:var(--ink);
  }
  .enthalten-liste li::before{
    content:"✓";color:var(--lime);font-weight:800;flex:none;
  }
  .enthalten-schluss{
    margin:30px 0 0;font-size:1rem;font-weight:600;color:var(--ink);
  }

  .compare-box{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:840px;margin:40px auto 0;}
  @media (max-width:640px){ .compare-box{grid-template-columns:1fr;} }
  .compare-col{border-radius:var(--radius-lg);padding:26px;border:1px solid var(--line);}
  .compare-col-bad{background:rgba(237,230,210,0.06);}
  .compare-col-good{background:rgba(244,230,190,0.06);border-color:rgba(244,230,190,0.3);}
  .compare-label{font-weight:700;font-size:0.92rem;margin-bottom:16px;font-family:'Space Grotesk','Grotesk Ersatz',system-ui,sans-serif;}
  .compare-col-bad .compare-label{color:var(--pink);}
  .compare-col-good .compare-label{color:var(--lime);}
  .compare-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px;}
  .compare-list li{display:flex;gap:10px;font-size:0.88rem;color:var(--ink-soft);align-items:flex-start;line-height:1.4;}
  .compare-col-bad .compare-list li::before{content:"✕";color:var(--pink);font-weight:800;flex:none;}
  .compare-col-good .compare-list li::before{content:"✓";color:var(--lime);font-weight:800;flex:none;}

  /* Der Preis im Logoabschnitt: eine Karte, mittig, so breit wie eine
     Paketkarte. logo-einzeln gab es dafuer schon, brauchte aber ein
     zusaetzliches Raster darum - hier reicht eine Breitenbegrenzung. */
  .logo-preis{ max-width:360px;margin:44px auto 0; }
  .logo-preis .price-card{ height:auto; }
  .logo-preis-recht{
    margin:12px 0 0;text-align:center;
    font-size:0.78rem;line-height:1.5;color:var(--ink-soft);
  }
  /* Die Galerie folgt direkt darunter und braucht Luft dazwischen. */
  #logo .galerie-block{ margin-top:56px; }

  .logo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1080px;margin:0 auto;align-items:stretch;}
  @media (max-width:960px){ .logo-grid{grid-template-columns:1fr 1fr;} }
  @media (max-width:640px){ .logo-grid{grid-template-columns:1fr;} }
  /* Steht NACH .logo-grid, sonst gewinnt dessen dreispaltiges Raster und die
     einzelne Karte klebt in der ersten Spalte am linken Rand. */
  .logo-grid.logo-einzeln{ grid-template-columns:minmax(0,420px); justify-content:center; }

  /* ---------- Beispiele / before-after slider ---------- */
  .ex-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
  @media (max-width:860px){ .ex-grid{grid-template-columns:1fr;} }
  .ba-card{border-radius:var(--radius-md);overflow:hidden;background:var(--card);border:1px solid var(--line);}
  .ba-slider{position:relative;height:260px;overflow:hidden;user-select:none;touch-action:pan-y;}
  /* isolation kapselt die z-index der Kinder in die jeweilige Ebene ein.
     Ohne das steche die Vorher Beschriftung durch die Nachher Ebene hindurch,
     sobald der Regler weit rechts steht. */
  .ba-before,.ba-after{position:absolute;inset:0;color:var(--sternweiss);isolation:isolate;}

  /* Karten mit echten Bildern.
     Die beiden Motive kommen ueber zwei Variablen am .ba-slider herein, damit
     ein weiteres Beispiel nur zwei Bildpfade braucht und kein neues CSS. */
  /* Kein min-height zusammen mit aspect-ratio: das treibt die BREITE hoch
     (Breite = min-height x Seitenverhaeltnis) und sprengt die Karte. */
  .ba-slider.has-media{height:auto;aspect-ratio:16/9;}
  @media (max-width:860px){ .ba-slider.has-media{aspect-ratio:3/2;} }
  .ba-slider.has-media .ba-before,
  .ba-slider.has-media .ba-after{
    background-color:var(--ba-surface,#e4e0de);
    background-repeat:no-repeat;
    background-position:var(--ba-pos,center);
  }
  .ba-slider.has-media .ba-before{
    background-image:var(--ba-before-img);
    background-size:var(--ba-before-size,76% auto);
  }
  .ba-slider.has-media .ba-after{
    background-image:var(--ba-after-img);
    background-size:var(--ba-after-size,76% auto);
  }
  /* Statt einer grossen Abdunklung, die das Motiv zudeckt, sitzen Beschriftung
     und Notiz auf eigenen dunklen Plaketten. Die Logos bleiben so voll sichtbar. */
  .ba-slider.has-media .ba-before::after,
  .ba-slider.has-media .ba-after::after{
    content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
    background:linear-gradient(to top,
      rgba(5,7,14,0.34), rgba(5,7,14,0.10) 26%, rgba(5,7,14,0) 46%);
  }
  .ba-slider.has-media .ba-label,
  .ba-slider.has-media .ba-note{
    background:rgba(5,7,14,0.66);
    backdrop-filter:blur(6px);
    border-radius:999px;
  }
  .ba-slider.has-media .ba-note{
    padding:7px 13px;
    border-radius:12px;
    font-size:0.78rem;
  }
  /* Auf schmalen Schirmen duerfen die Plaketten das Motiv nicht zudecken */
  @media (max-width:860px){
    .ba-slider.has-media .ba-note{font-size:0.72rem;padding:6px 11px;line-height:1.3;}
    .ba-slider.has-media .ba-after .ba-note{max-width:46%;}
    .ba-slider.has-media .ba-before .ba-note{max-width:46%;}
  }
  .ba-label,.ba-note{z-index:2;}
  .ba-before{background:linear-gradient(150deg,#3a3450,#232037);}
  .ba-after{background:var(--grad);}
  .ba-after-clip{position:absolute;inset:0;overflow:hidden;width:50%;}
  .ba-label{position:absolute;top:14px;font-size:0.66rem;font-weight:800;text-transform:uppercase;letter-spacing:0.08em;background:rgba(0,0,0,0.35);padding:4px 10px;border-radius:999px;}
  .ba-after .ba-label{left:14px;}
  .ba-before .ba-label{right:14px;}
  .ba-note{position:absolute;bottom:18px;font-size:0.82rem;font-weight:600;line-height:1.35;}
  .ba-after .ba-note{left:18px;text-align:left;max-width:75%;}
  .ba-before .ba-note{right:18px;text-align:right;max-width:40%;}
  .ba-handle{
    position:absolute;top:0;bottom:0;left:50%;width:0;transform:translateX(-50%);
    cursor:ew-resize;z-index:5;
  }
  .ba-handle::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:3px;background:var(--sternweiss);box-shadow:0 0 12px rgba(0,0,0,0.4);}
  .ba-handle:focus-visible{outline:3px solid var(--lime);outline-offset:2px;}
  .ba-handle::after{
    content:"↔";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:42px;height:42px;background:var(--sternweiss);color:var(--nacht);border-radius:50%;
    display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:800;
    box-shadow:0 8px 20px rgba(0,0,0,0.35);
  }
  .ba-body{padding:20px 22px 24px;}
  .ba-tag{font-size:0.72rem;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;color:var(--violet);background:rgba(53,104,166,0.14);padding:4px 10px;border-radius:999px;display:inline-block;margin-bottom:10px;}
  .ba-body h4{margin:0 0 6px;font-size:1.05rem;}
  .ba-body p{margin:0;color:var(--ink-soft);font-size:0.9rem;}

  .proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:24px;}
  @media (max-width:860px){ .proj-grid{grid-template-columns:1fr;} }
  .proj-card{border-radius:var(--radius-md);overflow:hidden;background:var(--card);border:1px solid var(--line);}
  .proj-thumb{height:140px;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--sternweiss);font-size:1.3rem;font-family:'Space Grotesk','Grotesk Ersatz',system-ui,sans-serif;}
  .proj-thumb.a{background:linear-gradient(135deg,var(--blue),var(--violet));}
  .proj-thumb.b{background:linear-gradient(135deg,var(--violet),var(--pink));}
  .proj-thumb.c{background:linear-gradient(135deg,var(--pink),#E08A52);}
  .proj-body{padding:18px 20px 22px;}
  .proj-body h4{margin:0 0 6px;font-size:1rem;}
  .proj-body p{margin:0 0 10px;color:var(--ink-soft);font-size:0.88rem;}

  /* ---------- Testimonials ---------- */
  /* ===== Kundenstimmen ==============================================
     Zwei Karten statt drei: es gibt zwei Kunden. Ein Raster fuer drei mit
     einer leeren Spalte sieht aus wie ein Fehler, und eine dritte erfundene
     Stimme dazuzuschreiben, war ja gerade das Problem. */
  .stimmen-paar{
    display:grid;grid-template-columns:1fr 1fr;gap:22px;
    max-width:920px;margin:0 auto;align-items:stretch;
  }
  @media (max-width:820px){ .stimmen-paar{grid-template-columns:1fr;} }

  .stimme{
    display:flex;flex-direction:column;
    background:var(--card);border:1px solid var(--line);
    border-radius:var(--radius-md);padding:26px;
  }

  /* Die Sterne. Lime, weil das die Akzentfarbe der Seite ist - Gold waere
     die Farbe fremder Bewertungsportale und wuerde eines vortaeuschen. */
  .stimme-sterne{
    display:flex;gap:3px;margin:0 0 16px;
  }
  .stimme-sterne svg{
    width:17px;height:17px;fill:var(--lime);flex:none;
  }

  .stimme-text{
    margin:0 0 22px;flex:1;
    font-size:0.98rem;line-height:1.6;color:var(--ink);
  }

  /* Die Person unten, mit einer Linie abgesetzt: darueber steht, WAS gemacht
     wurde, darunter, FUER WEN. */
  .stimme-person{
    display:flex;gap:13px;align-items:flex-start;
    padding-top:18px;border-top:1px solid var(--line);
  }
  .stimme-avatar{
    width:40px;height:40px;border-radius:50%;flex:none;
    background:var(--grad);color:var(--sternweiss);
    display:flex;align-items:center;justify-content:center;
    font-weight:700;font-family:'Space Grotesk','Grotesk Ersatz',system-ui,sans-serif;font-size:0.85rem;
    letter-spacing:0.02em;
  }
  .stimme-wer{ min-width:0; }
  .stimme-name{ margin:0;font-weight:700;font-size:0.94rem;color:var(--ink); }
  .stimme-rolle{ margin:2px 0 0;font-size:0.82rem;line-height:1.45;color:var(--ink-soft); }
  .stimme-link{
    display:inline-block;margin-top:7px;
    font-size:0.82rem;font-weight:600;color:var(--lime);
    text-decoration:none;text-underline-offset:3px;
  }
  .stimme-link:hover{ text-decoration:underline; }
  .stimme-link::after{ content:" \2192"; }

  /* .t-grid, .t-card, .quote, .t-avatar, .t-name, .t-role und
     .placeholder-flag sind mit den erfundenen Stimmen entfallen. Wer eine
     davon wieder braucht, baut sie neu - sie standen alle nur fuer diesen
     einen Abschnitt. */

  /* ---------- FAQ ---------- */
  .faq{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:14px;}
  .faq details{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);padding:20px 24px;}
  .faq summary{font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:1rem;}
  .faq summary::-webkit-details-marker{display:none;}
  .faq summary::after{content:"+";font-size:1.3rem;color:var(--violet);flex:none;transition:transform .2s;}
  .faq details[open] summary::after{transform:rotate(45deg);}
  .faq p{color:var(--ink-soft);margin:14px 0 0;line-height:1.55;font-size:0.94rem;}

  /* ---------- Final CTA ---------- */
  .final{
    border-radius:var(--radius-lg);padding:60px 40px;text-align:center;position:relative;overflow:hidden;
    background:var(--card);border:1px solid var(--line);
  }
  .final::before{
    content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,var(--blue),var(--violet),var(--pink),var(--blue));
    opacity:0.16;animation:spin 20s linear infinite;z-index:0;
  }
  @keyframes spin{to{transform:rotate(360deg);}}
  .final > *{position:relative;z-index:1;}
  .final h2{font-size:clamp(1.9rem,4.5vw,2.6rem);margin:14px 0 16px;}
  .final p{color:var(--ink-soft);max-width:560px;margin:0 auto 30px;font-size:1.05rem;line-height:1.55;}
  .hero-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

  .aichat-preview{max-width:420px;margin:30px auto 0;text-align:left;}
  .aichat-window{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;}
  .aichat-header{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid var(--line);font-weight:700;font-size:0.9rem;}
  .aichat-dot{width:8px;height:8px;border-radius:50%;background:var(--lime);}
  .aichat-soon{margin-left:auto;font-size:0.68rem;font-weight:700;background:var(--card-2);color:var(--ink-soft);padding:4px 10px;border-radius:999px;}
  .aichat-body{padding:16px 18px;display:flex;flex-direction:column;gap:10px;}
  .aichat-bubble{padding:10px 14px;border-radius:14px;font-size:0.86rem;max-width:85%;line-height:1.4;}
  .aichat-bot{background:var(--card-2);align-self:flex-start;}
  .aichat-user{background:var(--grad);color:var(--sternweiss);align-self:flex-end;}
  .aichat-input-row{display:flex;gap:8px;padding:14px 18px;border-top:1px solid var(--line);}
  .aichat-input-row input{flex:1;background:var(--card-2);border:1px solid var(--line);border-radius:999px;padding:10px 14px;color:var(--ink-soft);font-size:0.85rem;}
  .aichat-send-disabled{opacity:0.5;cursor:not-allowed;}

  /* Sprungmarke mit Abstand, damit die klebende Kopfzeile die Ueberschrift
     nicht verdeckt, wenn jemand aus dem Aufmacher hierher springt. */
  .sprungmarke{display:block;position:relative;top:-90px;visibility:hidden;}
  .kontakt-form{max-width:620px;margin:30px auto 0;text-align:left;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius-md);padding:26px;}
  .kontakt-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px;}
  @media (max-width:560px){ .kontakt-grid{grid-template-columns:1fr;} }
  .kontakt-feld label{display:block;font-size:0.78rem;font-weight:700;color:var(--ink-soft);margin-bottom:6px;}
  .kontakt-feld input,.kontakt-feld textarea,.kontakt-feld select{width:100%;background:var(--card-2);border:1px solid var(--line);border-radius:10px;padding:11px 13px;color:var(--ink);font-size:0.9rem;font-family:inherit;resize:vertical;}
  .kontakt-feld input:focus-visible,.kontakt-feld textarea:focus-visible,.kontakt-feld select:focus-visible{outline:2px solid var(--lime);outline-offset:2px;}
  /* Das Auswahlfeld selbst zeichnen. Ohne appearance:none setzt jedes System
     seinen eigenen hellen Kasten hin - auf dieser dunklen Seite ein weisser
     Fleck zwischen lauter dunklen Feldern. Der Pfeil ist ein eingebettetes
     SVG, also kein zusaetzlicher Abruf. */
  .kontakt-feld select{
    appearance:none;-webkit-appearance:none;
    padding-right:38px;cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b6b0c9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 12px center;
    background-size:16px 16px;
  }
  /* Die Liste selbst kann CSS nicht einfaerben, die malt das System. Damit
     die Eintraege dort nicht weiss auf weiss stehen, bekommen sie hier
     ausdruecklich dunkle Schrift. */
  .kontakt-feld select option{color:var(--nacht);background:var(--sternweiss);}

  /* Freitext fuer "Sonstiges", ohne eine Zeile JavaScript.
     Sichtbar ist er standardmaessig; erst wenn der Browser :has() kennt,
     wird er ausgeblendet und nur bei der Auswahl "sonstiges" wieder
     eingeblendet. So bleibt das Feld auch dort erreichbar, wo :has() fehlt. */
  @supports selector(:has(*)){
    .kontakt-branche-frei{display:none;}
    .kontakt-form:has(#k-branche option[value="sonstiges"]:checked) .kontakt-branche-frei{display:block;}
    .kontakt-gefunden-frei{display:none;}
    .kontakt-form:has(#k-gefunden option[value="sonstiges"]:checked) .kontakt-gefunden-frei{display:block;}
  }
  .kontakt-feld-breit{grid-column:1 / -1;}
  .kontakt-senden{width:100%;font:inherit;}
  /* Der Honigtopf. Nicht display:none: manche automatischen Ausfueller
     ueberspringen versteckte Felder, ein weggeschobenes fuellen sie aus. */
  .kontakt-topf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
  .kontakt-status{margin:14px 0 0;font-size:0.88rem;text-align:center;min-height:1.2em;}
  .kontakt-status.gut{color:var(--lime);}
  .kontakt-status.schlecht{color:var(--terrakotta);}
  /* Die beiden No-JS-Bestaetigungen: unsichtbar, bis die Route nach dem
     nativen POST auf ihren Anker zurueckleitet. */
  .kontakt-ziel{display:none;margin:14px 0 0;font-size:0.88rem;text-align:center;}
  .kontakt-ziel:target{display:block;}
  .kontakt-ziel.gut{color:var(--lime);}
  .kontakt-ziel.schlecht{color:var(--terrakotta);}
  /* --- Die Danke-Tafel ------------------------------------------------
     Sie tritt an die Stelle des Formulars, nicht daneben: wer abgeschickt
     hat, soll nicht auf leere Felder sehen und sich fragen, ob er noch
     einmal muss. */
  .kontakt-danke{
    text-align:center;padding:34px 26px 30px;
    background:var(--bg-soft);border:1px solid var(--line);
    border-radius:var(--radius-md);
  }
  .kontakt-danke[hidden]{ display:none; }
  .kontakt-danke:focus-visible{ outline:2px solid var(--lime);outline-offset:3px; }
  .gecko-danke{ width:132px;margin:0 auto 14px; }
  .kontakt-danke-satz{
    margin:0;font-family:'Space Grotesk','Grotesk Ersatz',system-ui,sans-serif;font-weight:700;
    font-size:clamp(1.15rem,2.6vw,1.5rem);line-height:1.3;color:var(--ink);
  }
  .kontakt-danke-klein{
    margin:10px 0 0;font-size:0.9rem;color:var(--ink-soft);
  }

  /* OHNE JavaScript: die Route kommt mit #nachricht-angekommen zurueck.
     :target macht die Tafel sichtbar und dieselbe Regel raeumt das Formular
     weg. Das [hidden] muss dabei ausdruecklich ueberstimmt werden - das
     Attribut steht im Markup, damit die Tafel ohne Stylesheet nicht schon
     beim Betreten der Seite dasteht.

     Ohne :has() (sehr alte Browser) bleibt das Formular stehen und die Tafel
     erscheint darunter. Das ist unschoen, aber niemand verliert etwas. */
  @supports selector(:has(*)){
    .kontakt-huelle:has(#nachricht-angekommen:target) .kontakt-form{ display:none; }
  }
  #nachricht-angekommen:target{ display:block; }

  /* Die Abschnittsbilder im Doppelblock. 1620x600, also 27:10 - das
     Seitenverhaeltnis steht fest, damit beim Laden nichts springt.
     Die Bilder sind selbst schon dunkel, brauchen also keinen Verlauf
     darueber; nur einen leisen Rand, damit sie nicht randlos im Schwarz
     schwimmen. */
  .doppelt-bild{
    margin:20px 0 0;border-radius:var(--radius-md);overflow:hidden;
    border:1px solid rgba(255,255,255,0.07);
    aspect-ratio:27/10;background:var(--card-2);
  }
  .doppelt-bild picture{ display:contents; }
  .doppelt-bild img{
    display:block;width:100%;height:100%;object-fit:cover;
  }

  /* Das Newsletterhaekchen. Abgesetzt vom Rest des Formulars, damit man
     sieht: das ist etwas anderes als die Anfrage. */
  .kontakt-newsletter{
    display:flex;gap:11px;align-items:flex-start;
    margin:18px 0 4px;padding:13px 15px;
    background:var(--card-2);border:1px solid var(--line);border-radius:12px;
    cursor:pointer;
  }
  .kontakt-newsletter input{
    width:17px;height:17px;flex:none;margin-top:1px;
    accent-color:var(--violet);cursor:pointer;
  }
  .kontakt-newsletter span{
    font-size:0.82rem;line-height:1.5;color:var(--ink-soft);
  }
  .kontakt-newsletter:hover span{ color:var(--ink); }

  .kontakt-recht{color:var(--ink-soft);font-size:0.78rem;line-height:1.5;margin:16px 0 0;}
  .kontakt-recht a{color:var(--ink);text-underline-offset:3px;}
  .callback-form{max-width:520px;margin:30px auto 0;text-align:left;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius-md);padding:26px;}
  .callback-intro{color:var(--ink-soft);font-size:0.92rem;margin:0 0 18px;}
  .callback-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px;}
  @media (max-width:560px){ .callback-grid{grid-template-columns:1fr;} }
  .callback-field label{display:block;font-size:0.78rem;font-weight:700;color:var(--ink-soft);margin-bottom:6px;}
  .callback-field input,.callback-field textarea{width:100%;background:var(--card-2);border:1px solid var(--line);border-radius:10px;padding:11px 13px;color:var(--ink);font-size:0.9rem;font-family:inherit;resize:vertical;}
  .callback-field-breit{grid-column:1 / -1;}
  .callback-submit{width:100%;}
  .callback-note{color:var(--ink-soft);font-size:0.8rem;margin:14px 0 0;text-align:center;}


  footer{border-top:1px solid var(--line);padding:34px 0;}
  .foot-grid{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;}
  .foot-contact{color:var(--ink-soft);font-size:0.88rem;line-height:1.5;margin:0;}
  .foot-wirkung{
    margin:10px 0 0;font-size:0.86rem;line-height:1.5;
    color:var(--ink-soft);max-width:42ch;
  }
  .foot-links{display:flex;gap:20px;}

  /* Die Abschlusszeile traegt seit dem 18.08.2026 die Rechtstexte. */
  .foot-bottom{
    display:flex; justify-content:space-between; align-items:center;
    gap:14px 26px; flex-wrap:wrap;
  }
  .foot-recht{ display:flex; gap:20px; flex-wrap:wrap; }
  .foot-recht a{ color:var(--ink-soft); text-decoration:none; }
  .foot-recht a:hover{ color:var(--ink); text-decoration:underline; }

  /* Die Fusszeile traegt ab dem 18.08.2026 die Verweise auf alle Unterseiten.
     Vorher waren es vier Verweise in einer Reihe, jetzt vier Spalten. Der
     Aufmacher-Teil links bleibt breiter als die Spalten, deshalb oben
     ausgerichtet statt mittig -- mittig sieht bei unterschiedlich hohen
     Bloecken schief aus. */
  .foot-grid{ align-items:flex-start; }
  .foot-spalten{
    display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:12px 30px; flex:1 1 520px;
  }
  .foot-spalte{ display:flex; flex-direction:column; gap:7px; min-width:0; }
  .foot-titel{
    margin:0 0 3px; font-size:0.78rem; font-weight:700;
    letter-spacing:0.06em; text-transform:uppercase; color:var(--ink);
  }
  .foot-spalte a{
    color:var(--ink-soft); text-decoration:none; font-size:0.86rem;
    line-height:1.4; hyphens:auto;
  }
  .foot-spalte a:hover{ color:var(--ink); text-decoration:underline; }

  @media (max-width:900px){
    .foot-spalten{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px 24px; }
  }
  @media (max-width:420px){
    .foot-spalten{ grid-template-columns:1fr; }
  }
  .foot-links a{color:var(--ink-soft);font-size:0.86rem;}
  .foot-links a:hover{color:var(--ink);}
  /* Kontrast: volle Deckkraft statt 0.6, sonst rund 3,9 zu 1 und damit unter
     dem Mindestwert fuer Fliesstext. */
  .foot-bottom{margin-top:20px;color:var(--ink-soft);font-size:0.82rem;text-align:center;}

  /* Sichtbar fuer Suchmaschinen und Screenreader, nicht fuer das Auge.
     Bewusst nicht display:none, das wuerde beides ausschliessen. */
  .nur-vorlesen{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }

  /* NUR wenn JavaScript laeuft, wird Inhalt zum Einblenden versteckt.
     Ohne diese Kopplung an js-an bleibt bei einem Skriptfehler die halbe
     Seite dauerhaft unsichtbar - und der Besucher sieht nicht einmal, dass
     etwas fehlt. Die Klasse js-an wird im Kopf der Datei gesetzt, bevor
     irgendetwas gemalt wird. */
  .js-an .reveal{
    opacity:0;transform:translateY(28px);filter:blur(6px);
    transition:opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1), filter .75s ease;
    transition-delay:var(--reveal-delay,0ms);
  }
  .js-an .reveal.is-visible{opacity:1;transform:none;filter:none;}
  /* Notfall: laeuft das Einblendeskript nicht an, zeigt der Wecker aus dem
     Seitenkopf nach fuenf Sekunden alles. Lieber ohne Choreografie lesbar
     als choreografiert unsichtbar. */
  .reveal-notfall .reveal{opacity:1 !important;transform:none !important;filter:none !important;}
  @media (prefers-reduced-motion:reduce){
    .js-an .reveal{opacity:1;transform:none;filter:none;transition:none;}
  }
  /* ===== Aufmacher: Synapsennetz =================================
     Loest die Three.js Cosmic Hero ab. Ein Canvas statt drei fremder
     Bibliotheken -- three.min.js, das Postprocessing und GSAP sind damit
     ersatzlos entfallen, das waren rund 700 KB, die jeder Besucher vor dem
     ersten Bild laden musste. */
  .aufmacher{
    position:relative;
    min-height:100svh;
    display:grid;
    place-items:center;
    overflow:hidden;
    padding:120px 0 80px;
  }
  /*
   * Das Foto liegt GANZ hinten, hinter dem Netz.
   *
   * Als ::before und nicht als eigenes Element: ein Pseudoelement ist das
   * erste Kind, und weil weder es noch das <canvas> ein z-index tragen,
   * entscheidet die Reihenfolge im Baum - das Foto also zuerst, das Netz
   * darueber, der Inhalt mit z-index:1 obenauf.
   *
   * Der Verlauf davor ist kein Schmuck, sondern Handwerk: das Foto ist zwar
   * schon dunkel geliefert, aber nach unten hin muss es vollstaendig in den
   * Seitengrund laufen, sonst entsteht an der Unterkante des Aufmachers eine
   * sichtbare Kante gegen den naechsten Abschnitt. Oben nimmt er zusaetzlich
   * Deckung, damit die Kopfzeile lesbar bleibt.
   *
   * image-set laesst den Browser zwischen WebP und JPEG waehlen. Die Zeile
   * DAVOR nennt nur das JPEG: kennt ein Browser image-set nicht, verwirft er
   * die zweite Zeile und behaelt die erste, statt am Ende ohne Bild
   * dazustehen.
   */
  .aufmacher::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background-repeat:no-repeat, no-repeat;
    background-position:center top, center 62%;
    background-size:cover, cover;
    background-image:
      linear-gradient(180deg,
        rgba(5,7,14,0.82) 0%,
        rgba(5,7,14,0.46) 34%,
        rgba(5,7,14,0.58) 66%,
        rgba(5,7,14,0.97) 100%),
      url("/images/mondlicht/hero-nachthimmel-v1-1600.jpg");
    background-image:
      linear-gradient(180deg,
        rgba(5,7,14,0.82) 0%,
        rgba(5,7,14,0.46) 34%,
        rgba(5,7,14,0.58) 66%,
        rgba(5,7,14,0.97) 100%),
      image-set(
        url("/images/mondlicht/hero-nachthimmel-v1-1920.avif") type("image/avif"),
          url("/images/mondlicht/hero-nachthimmel-v1-1920.webp") type("image/webp"),
        url("/images/mondlicht/hero-nachthimmel-v1-1600.jpg") type("image/jpeg"));
  }
  /* W01 seit 03.09.2026: der sternfreie Nachthimmel, die einzige Lichtquelle
     oben rechts, die Mitte ruhig fuer die Ueberschrift. Die Sterne malt
     weiterhin die Leinwand #netz darueber.
     Auf schmalen Fenstern ein art-directed Hochformatschnitt (2:3, rechts
     angeschlagen): gemessen behaelt nur der rechte Rand die Lichtquelle, ein
     mittiger Schnitt verliert sie voellig. 9:16 haette nur 607px Breite
     ergeben und muesste hochskaliert werden. */
  @media (max-width:820px){
    .aufmacher::before{
      background-image:
        linear-gradient(180deg,
          rgba(5,7,14,0.84) 0%,
          rgba(5,7,14,0.52) 34%,
          rgba(5,7,14,0.62) 66%,
          rgba(5,7,14,0.97) 100%),
        url("/images/mondlicht/hero-nachthimmel-mobil-v1-720.jpg");
      background-image:
        linear-gradient(180deg,
          rgba(5,7,14,0.84) 0%,
          rgba(5,7,14,0.52) 34%,
          rgba(5,7,14,0.62) 66%,
          rgba(5,7,14,0.97) 100%),
        image-set(
          url("/images/mondlicht/hero-nachthimmel-mobil-v1-720.avif") type("image/avif"),
            url("/images/mondlicht/hero-nachthimmel-mobil-v1-720.webp") type("image/webp"),
          url("/images/mondlicht/hero-nachthimmel-mobil-v1-720.jpg") type("image/jpeg"));
    }
  }

  /* Das Netz liegt HINTER dem Inhalt und ist aria-hidden: es ist Zierde, kein
     Inhalt. Die Vorlage hatte role="img" auf dem Behaelter MIT dem Text darin,
     damit verschwindet die Ueberschrift fuer Screenreader komplett. */
  #netz{ position:absolute; inset:0; width:100%; height:100%; display:block; }

  .aufmacher-inhalt{ position:relative; z-index:1; }
  .aufmacher-inhalt > *{ max-width:640px; }

  /* Das Originallogo als Ganzes, Gecko und Schriftzug in einer Datei.
     Der Schriftzug darf NICHT mit einer Webschrift nachgebaut werden,
     das ist die Hausschrift der Marke und liegt nur als Bild vor. */
  .aufmacher h1{
    margin:0 0 22px;
    line-height:0;
  }
  .aufmacher-logo{
    height:clamp(64px, 10vw, 132px);
    width:auto;
    /* Der dunkle Schatten zuerst: er hebt den hellen Schriftzug vom dunklen
       Grund ab, die beiden farbigen Scheine legen den Markenglanz darueber. */
    filter:drop-shadow(0 3px 16px rgba(5,7,14,0.55))
           drop-shadow(0 0 26px rgba(110,159,222,0.45))
           drop-shadow(0 0 58px rgba(237,230,210,0.32));
    animation:markeSchwebt 4.5s ease-in-out infinite;
  }
  @keyframes markeSchwebt{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-8px); }
  }
  @media (prefers-reduced-motion: reduce){
    .aufmacher-logo{ animation:none; }
  }
  .aufmacher-zeilen{ margin:0 0 20px; }
  .aufmacher-zeilen .subtitle-line{
    margin:0 0 6px;font-size:clamp(1.1rem,2.3vw,1.4rem);font-weight:700;color:var(--sternweiss);
  }
  .aufmacher .aufmacher-satz{
    /* 560 statt 500 Pixel: der Satz ist seit dem 17.08.2026 rund doppelt so
       lang wie der frueher hier stehende. In 500 Pixeln waeren daraus fuenf
       Zeilen geworden, und fuenf Zeilen Fliesstext im Aufmacher liest
       niemand. */
    font-size:1.05rem;color:rgba(255,255,255,0.72);max-width:560px;margin:0 auto 30px;
  }

  /* Die Zeile unter dem Knopf. Sie steht bewusst NICHT im Fliesstext
     darueber: das Versprechen "kostenloser Erstentwurf" soll den Knopf
     begleiten, nicht in einem Absatz untergehen. Der Punkt davor ist ein
     Trenner ohne Bedeutung und deshalb aria-hidden. */
  .aufmacher-versprechen{
    margin:14px 0 0;font-size:0.92rem;font-weight:600;
    color:rgba(255,255,255,0.78);
    display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;
  }
  .aufmacher-versprechen b{ color:var(--lime,#8ef0a8);font-weight:700; }
  .aufmacher-versprechen span[aria-hidden]{ opacity:0.4; }

  @media (max-width:640px){
    .aufmacher{ padding:100px 0 60px; }
    .aufmacher .aufmacher-satz{ font-size:0.98rem; }
    /* Auf schmalen Schirmen wird aus der Zeile sonst ein Zweizeiler, und die
       zweite Zeile laeuft genau unter den festen Kontaktknopf unten rechts.
       Der Ort steht ohnehin im Vorlesetext der Ueberschrift, in der Fusszeile
       und in den Strukturdaten - hier darf er weg. */
    .aufmacher-versprechen{ font-size:0.86rem;gap:7px; }
    .versprechen-ort{ display:none; }
  }
  /* Unter 420px laeuft auch noch "unverbindlich" unter den festen
     Kontaktknopf unten rechts - gemessen 17px bei 360px, 6px bei 390px.
     Uebrig bleibt der Satz, auf den es ankommt. */
  @media (max-width:419px){
    .versprechen-zusatz{ display:none; }
  }


  /* ===== Logo Galerie, Teil 31 ===============================
     Zwei Baender, die gegeneinander laufen. Verschoben wird ausschliesslich
     mit transform - eine Verschiebung malt die Grafikkarte, alles andere
     zwingt bei jedem Bild zu einer neuen Layoutrechnung. */
  .galerie-block{ margin-top:clamp(40px,6vw,72px); }
  .galerie-titel{ text-align:center;font-size:1.15rem;margin:0 0 22px; }

  /* Das Sinnbild im Kundenbereich. Klein gehalten: es soll zeigen, worum es
     geht, und nicht den Abschnitt uebernehmen. */
  .dashboard-bild{
    max-width:440px;margin:30px auto 32px;
  }
  .dashboard-bild svg{
    display:block;width:100%;height:auto;
    border-radius:var(--radius-md);
    box-shadow:0 26px 60px -30px rgba(5,10,22,0.7);
  }
  @media (max-width:640px){ .dashboard-bild{ max-width:330px;margin:24px auto 26px; } }

  .galerie{
    display:flex;flex-direction:column;gap:16px;
    /* Weiche Kanten links und rechts, damit die Logos nicht abgeschnitten
       wirken, sondern hinauslaufen. */
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  }
  .galerie-reihe{ overflow:hidden; }
  .galerie-band{
    display:flex;gap:16px;width:max-content;
    will-change:transform;transform:translate3d(0,0,0);
  }

  /* Freigestellte Logos in einer durchlaufenden Reihe, KEINE hellen Kacheln.
     Frueher sass jedes Logo auf seiner eigenen sandfarbenen Flaeche - das
     zerlegte die Reihe in lauter Einzelkaesten und sah nach Briefmarken aus.

     Alle Dateien haben bereits einen durchsichtigen Hintergrund. Sie sind
     aber ALLE dunkel gezeichnet (Tokyo Jungle #0E3B2E, KOS dunkelgruen,
     BashBerry bordeaux) - freigestellt auf dem schwarzen Seitengrund waeren
     sie schlicht unsichtbar.

     Deshalb der Filter: brightness(0) macht jeden sichtbaren Punkt schwarz,
     invert(1) macht ihn weiss. Die Durchsichtigkeit bleibt dabei erhalten,
     es wird also nur die Zeichnung eingefaerbt, nicht ein Kasten. Das ist
     der uebliche Aufbau einer Markenreihe: eine Farbe, gleiche Anmutung,
     keine Kachel gewinnt gegen die andere.

     Preis dieser Loesung: die Markenfarben sind in der Reihe nicht zu sehen.
     Farbig geht nur mit einer hellen Flaeche dahinter - genau der Kasten,
     der hier weg sollte. */
  .logo-kachel{
    flex:0 0 auto;width:190px;margin:0;
    background:none;border:0;border-radius:0;
    padding:8px 14px;text-align:center;
    transition:transform .25s ease, opacity .25s ease;
  }
  .logo-kachel:hover{ transform:translateY(-3px); }
  .logo-kachel .logo-buehne{
    display:flex;align-items:center;justify-content:center;height:76px;
  }
  /* picture darf nicht zwischen Buehne und Bild stehen, sonst misst
     max-height gegen das picture und begrenzt nichts. */
  .logo-kachel .logo-buehne picture{ display:contents; }
  .logo-kachel .logo-buehne img,
  .logo-kachel .logo-buehne svg{
    display:block;max-height:76px;max-width:100%;
    width:auto;height:auto;object-fit:contain;
    /* Optischer Ausgleich je Logo, gepflegt in deploy/referenzen.json.
       Ein breites Wortlogo und ein rundes Bildlogo gleich zu skalieren
       heisst nicht, dass sie gleich gross WIRKEN. */
    transform:scale(var(--gewicht,1));
    filter:brightness(0) invert(1);
    /* Etwas zurueckgenommen, damit die Reihe nicht gegen die Ueberschriften
       anschreit. Beim Zeigen auf ein Logo kommt es voll heraus. */
    opacity:0.62;
    transition:opacity .25s ease;
  }
  .logo-kachel:hover .logo-buehne img,
  .logo-kachel:hover .logo-buehne svg{ opacity:1; }
  .logo-kachel figcaption{
    margin-top:12px;font-size:0.74rem;font-weight:700;letter-spacing:0.04em;
    text-transform:uppercase;color:var(--ink-soft);opacity:0.7;
  }

  @media (max-width:700px){
    /* Auf dem Handy nur eine Reihe, von Hand wischbar, keine Automatik. */
    .galerie-reihe-zwei{ display:none; }
    .galerie-reihe{ overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; }
    .galerie-band{ transform:none !important; }
    .logo-kachel{ scroll-snap-align:center;width:158px; }
    .galerie{ -webkit-mask-image:none;mask-image:none; }
  }

  @media (prefers-reduced-motion:reduce){
    /* Steht still und wird zum ruhigen Raster. */
    .galerie{ -webkit-mask-image:none;mask-image:none; }
    .galerie-reihe{ overflow:visible; }
    .galerie-band{
      transform:none !important;flex-wrap:wrap;width:auto;justify-content:center;
    }
    .logo-kachel{ transition:none; }
    .logo-kachel:hover{ transform:none; }
  }

  /* ===== Logo Vergleich, Teil 28 =============================
     Entschieden fuer den SCHIEBEREGLER statt zwei Ansichten nebeneinander.
     Grund ist das Handy: nebeneinander halbiert die Breite, dann sind beide
     Logos so klein, dass man den Unterschied nicht mehr sieht - genau das,
     was nicht passieren soll. Der Regler zeigt beide ueber die volle Breite. */
  .wege{
    display:grid;grid-template-columns:1fr 1fr;gap:36px;
    max-width:1080px;margin:40px auto 0;
    /* Gleich hoch, Teil 33.4: die beiden Seiten sind verschieden gebaut,
       sollen aber als Paar wirken und nicht wie zwei fremde Bausteine. */
    align-items:stretch;
  }
  /* ACHTUNG: .weg heisst HIER "einer der zwei Wege zum Logo".
     Der Abschnitt mit den vier Schritten hiess frueher ebenfalls .weg und
     stand weiter unten in dieser Datei - sein vierspaltiges Raster hat diese
     beiden Spalten also ueberschrieben: Ueberschrift, Absatz und Regler
     standen ploetzlich in vier duennen Saeulen nebeneinander. Die Schritte
     heissen deshalb jetzt .schritte / .schritt-*. Wer hier oder dort einen
     Namen aendert, prueft vorher, ob es ihn schon gibt. */
  .weg{ display:flex;flex-direction:column; }
  /* Gleiche Hoehe ueber die KARTE, nicht ueber die Bilder.
     Erst standen hier flex:1 auf dem Bildbereich - das hat die Platzhalter
     ueber ihr Seitenverhaeltnis hinausgezogen, aus einem 4:3 Kasten wurde
     ein hohes Rechteck. Jetzt behalten die Bilder ihre Form, und der
     Ausgleich passiert im Leerraum darunter. */
  .weg > .vergleich-blaettern{ margin-top:auto;padding-top:20px; }
  @media (max-width:860px){ .wege{grid-template-columns:1fr;gap:44px;} }
  .weg h3{font-size:1.2rem;margin:0 0 10px;}
  .weg > p{margin:0 0 20px;font-size:0.95rem;}

  .vergleich-buehne{
    position:relative;border-radius:var(--radius-md);overflow:hidden;
    border:1px solid var(--line);background:var(--card-2);
    touch-action:pan-y;user-select:none;
  }

  /* Die linke Spalte: ein einzelnes fertiges Logo, ohne Regler.
     Bewusst dieselben Masse, Ecken und derselbe helle Grund wie bei der
     Buehne rechts - sonst stuenden zwei verschieden grosse Kaesten
     nebeneinander und die beiden Wege waeren optisch nicht gleichwertig. */
  .logo-zeigen{
    position:relative;aspect-ratio:16/7;
    border-radius:var(--radius-md);overflow:hidden;
    border:1px solid var(--line);background:#f4f1ea;
  }
  /* Dieselbe Groesse und Form wie der Regler gegenueber, aber fuer ein Foto:
     dunkler Grund statt Creme, formatfuellend statt eingepasst. */
  .logo-zeigen.logo-zeigen-foto{
    background:var(--card-2);
  }
  /* Doppelte Klasse, damit die Regel traegt: .logo-zeigen img steht WEITER
     UNTEN in dieser Datei und setzt padding:7% und object-fit:contain. Bei
     gleicher Spezifitaet gewinnt die spaetere Regel - das Foto sass deshalb
     mit Rand mitten im Kasten statt ihn zu fuellen. */
  .logo-zeigen.logo-zeigen-foto img{
    object-fit:cover;padding:0;
  }
  .logo-zeigen picture{ display:contents; }
  .logo-zeigen img{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:contain;padding:7%;
  }
  .vergleich-bild{position:relative;}
  /* Die Buehne gibt die Form vor, beide Bilder liegen deckungsgleich darin.

     object-fit:contain, NICHT cover: die beiden KOS Logos sind 1000x210 und
     1000x231 gross, also nicht exakt gleich hoch. Mit cover wurde das neue
     Logo unten abgeschnitten ("...INGSMAKLER & KREDITVERMITTLUN"). contain
     zeigt beide vollstaendig, der helle Grund faengt den Hoehenunterschied.

     Heller Grund, weil Logos fuer helle Flaechen entworfen sind. Auf dem
     dunklen Seitenhintergrund waere ein dunkles Logo unsichtbar. */
  .vergleich-buehne{ aspect-ratio:16/7;background:#f4f1ea; }
  .vergleich-bild{ position:absolute;inset:0; }
  .vergleich-bild img{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:contain;padding:7%;
  }
  .vergleich-marke{ background:rgba(5,7,14,0.78); }
  /* clip-path statt Breite: das Aufdecken laeuft ohne neue Layoutrechnung. */
  .vergleich-nachher{
    position:absolute;inset:0;
    clip-path:inset(0 0 0 var(--schnitt,50%));
  }
  .vergleich-marke{
    position:absolute;top:10px;z-index:2;
    font-size:0.68rem;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;
    background:rgba(5,7,14,0.72);color:var(--ink);
    padding:5px 10px;border-radius:999px;
  }
  .vergleich-vorher .vergleich-marke{left:10px;}
  .vergleich-nachher .vergleich-marke{right:10px;}

  .vergleich-griff{
    position:absolute;top:0;bottom:0;left:var(--schnitt,50%);
    width:44px;transform:translateX(-50%);
    background:none;border:0;padding:0;cursor:ew-resize;z-index:3;
  }
  .vergleich-griff::before{
    content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;
    transform:translateX(-50%);background:rgba(255,255,255,0.85);
  }
  .vergleich-griff::after{
    content:"\2039 \203A";position:absolute;left:50%;top:50%;
    transform:translate(-50%,-50%);
    width:38px;height:38px;border-radius:999px;
    background:rgba(255,255,255,0.92);color:#05070E;
    font-size:0.9rem;font-weight:700;line-height:38px;text-align:center;
    box-shadow:0 6px 18px rgba(0,0,0,0.45);
  }
  .vergleich-griff:focus-visible{outline:2px solid var(--lime);outline-offset:2px;}
  .vergleich-hinweis{margin:12px 0 0;font-size:0.76rem;color:rgba(255,255,255,0.38);}

  /* ----- Weg A: wie ein Logo entsteht, Teil 33.2 -------------------
     Drei Entwuerfe klein nebeneinander, der gewaehlte gross darunter.
     Kein Schieberegler: es gibt hier kein Vorher zu vergleichen. */
  .entstehung{ display:flex;flex-direction:column;gap:12px; }
  .entwuerfe{ display:grid;grid-template-columns:repeat(3,1fr);gap:10px; }
  .entwurf .bild-platzhalter{ border-radius:8px;font-size:0.72rem; }

  .entwurf-gewaehlt{
    position:relative;max-width:72%;align-self:center;width:100%;
    border:1px solid rgba(244,230,190,0.4);border-radius:var(--radius-md);
    padding:6px;background:rgba(244,230,190,0.05);
  }
  .entwurf-gewaehlt .bild-platzhalter{ border-style:solid;border-color:rgba(255,255,255,0.1); }
  .gewaehlt-marke{
    position:absolute;top:-10px;left:14px;z-index:2;
    font-size:0.64rem;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;
    background:var(--lime);color:#05070E;padding:4px 10px;border-radius:999px;
  }
  .entstehung-text{
    margin:12px 0 0;font-size:0.86rem;color:var(--ink-soft);
  }
  /* Beide Platzhalter standen mittig und lagen dadurch genau uebereinander.
     Im Vergleich sitzt der Vorher Text links, der Nachher Text rechts. */
  .vergleich-vorher .bild-platzhalter{ justify-content:flex-start;padding-left:16%; }
  .vergleich-nachher .bild-platzhalter{ justify-content:flex-end;padding-right:16%; }

  .vergleich-blaettern{display:flex;gap:8px;justify-content:center;margin-top:16px;}
  .blatt{
    width:8px;height:8px;border-radius:999px;border:0;padding:0;cursor:pointer;
    background:rgba(255,255,255,0.22);transition:background .2s;
  }
  .blatt.aktiv{background:var(--lime);}

  .einsatz{max-width:1080px;margin:clamp(40px,6vw,72px) auto 0;}
  .einsatz h3{font-size:1.1rem;margin:0 0 16px;text-align:center;}
  .einsatz-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
  @media (max-width:760px){ .einsatz-grid{grid-template-columns:1fr 1fr;} }

  /* Platzhalter im richtigen Seitenverhaeltnis. */
  .bild-platzhalter{
    aspect-ratio:var(--seiten,4/3);
    display:flex;align-items:center;justify-content:center;
    background:repeating-linear-gradient(45deg,rgba(255,255,255,0.04) 0 10px,transparent 10px 20px);
    border:1px dashed rgba(255,255,255,0.16);border-radius:10px;
    color:rgba(255,255,255,0.34);font-size:0.8rem;font-style:italic;
    text-align:center;padding:10px;
  }

  /* ===== Einordnung, Teil 28.5 ===============================
     Vier Zeilen untereinander statt Karten nebeneinander: Karten machen aus
     einer Einordnung einen Wettbewerb. Keine Signalfarben. */
  .einordnung{
    max-width:760px;margin:36px auto 0;
    border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  }
  .einordnung-zeile{
    display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:baseline;
    padding:20px 24px;border-top:1px solid var(--line);
  }
  .einordnung-zeile:first-child{border-top:0;}
  @media (max-width:640px){
    .einordnung-zeile{grid-template-columns:1fr;gap:6px;padding:18px 20px;}
  }
  .einordnung-zeile b{font-size:0.98rem;}
  .einordnung-zeile p{margin:0;color:var(--ink-soft);font-size:0.93rem;}
  .einordnung-wir{background:rgba(53,104,166,0.09);}
  .einordnung-wir b{color:var(--lime);}

  /* ===== Zwei gleich gebaute Bloecke, Teil 32 =================
     Links Ueberschrift und Text, rechts die Liste - bei BEIDEN gleich herum.
     Der Abstand dazwischen ist bewusst knapp, sonst wirken sie wie zwei
     fremde Seiten. */
  .doppelt{
    display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:center;
    max-width:1040px;margin:0 auto;
  }
  .doppelt + .doppelt{ margin-top:clamp(28px,4vw,52px); }
  @media (max-width:860px){
    .doppelt{grid-template-columns:1fr;gap:22px;}
    .doppelt + .doppelt{ margin-top:36px; }
  }
  .doppelt h2{font-size:clamp(1.55rem,3.2vw,2.15rem);margin:14px 0 14px;}
  .doppelt p{margin:0;}
  .doppelt-schluss{
    max-width:56ch;margin:clamp(30px,4vw,48px) auto 0;text-align:center;
    color:var(--ink-soft);font-size:1.02rem;
  }

  .merkmale{
    list-style:none;margin:0;padding:26px;
    background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
    display:flex;flex-direction:column;gap:14px;
  }
  .merkmale li{
    display:flex;gap:11px;align-items:flex-start;
    font-size:0.94rem;color:var(--ink);
  }
  .merkmale li::before{content:"\2713";color:var(--lime);font-weight:800;flex:none;}

  /* Platzhalter sollen beim Durchsehen auffallen. */
  .platzhalter-text{
    color:rgba(255,255,255,0.34) !important;font-style:italic;
    border-left:2px dashed rgba(255,255,255,0.16);padding-left:14px;
  }

  /* ===== Abschnitt A: warum der Onlineauftritt entscheidet ==========
     Der ruhige Teil. Absichtlich ohne Karte, ohne Rand, ohne Schein: er
     steht direkt ueber dem farbigen Ablauf, und zwei laute Abschnitte
     hintereinander heben sich gegenseitig auf. Getrennt werden die beiden
     Bloecke nur durch Abstand und eine haarduenne Linie. */
  .warum-paar{
    display:grid;grid-template-columns:1fr 1fr;gap:28px;
    max-width:980px;margin:38px auto 0;
    /* Beide gleich hoch: sie sind ein Paar, keine Rangfolge. */
    align-items:stretch;
  }
  .warum-block{
    display:flex;flex-direction:column;
    padding:0;
    border-radius:var(--radius-md);
    /* EIN Wert fuer den Kartengrund, aus dem auch der Bildverlauf gebaut
       wird. Vorher war der Grund fast durchsichtig (Weiss mit 1,8 Prozent):
       dadurch schienen die fest stehenden .blob Flecken durch die Karte, und
       unter dem Bild sass eine sichtbare Stufe - gemessen 14,12,22 ueber der
       Kante gegen 20,29,52 darunter. Ein deckender Grund nimmt beides weg. */
    --warum-grund:19,24,38;
    background:rgb(var(--warum-grund));
    border:1px solid rgba(255,255,255,0.075);
    /* overflow versteckt die Ecken des Bildes: es sitzt bis an den Rand und
       muesste sonst eigene, exakt passende Radien tragen. */
    overflow:hidden;
    /* Ein Hauch von dem Licht, das im Bild liegt. Kein Rahmen, kein Puls -
       nur so viel, dass die Karte nicht auf dem Schwarz aufliegt. */
    box-shadow:0 26px 60px -46px rgba(5,10,22,0.85);
    transition:border-color .4s ease, box-shadow .4s ease;
  }
  .warum-block:hover{
    border-color:rgba(255,255,255,0.14);
    box-shadow:0 30px 70px -42px rgba(5,10,22,1);
  }

  /* Das gelieferte Motiv, 1600x720, also 20:9. Das Seitenverhaeltnis steht
     hier fest, damit beim Laden nichts springt. */
  .warum-bild{
    position:relative;aspect-ratio:20/9;overflow:hidden;
    background:rgb(var(--warum-grund));
  }
  .warum-bild picture{display:contents;}
  .warum-bild img{
    display:block;width:100%;height:100%;object-fit:cover;
    /* Langsam und weit: eine schnelle Bewegung wuerde den ruhigen Abschnitt
       zerreissen. */
    transition:transform 1.1s cubic-bezier(.16,1,.3,1);
    will-change:transform;
  }
  .warum-block:hover .warum-bild img{transform:scale(1.045);}
  /* Der Uebergang vom Bild in die Karte. Ohne ihn endet das Motiv an einer
     geraden Kante mitten in der Karte, und die Karte zerfaellt in zwei
     Haelften. Der Verlauf laeuft in --card-2, den Grund direkt darunter. */
  .warum-bild::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:52%;
    pointer-events:none;
    background:linear-gradient(180deg,
      transparent,
      rgba(var(--warum-grund),0.55) 55%,
      rgb(var(--warum-grund)));
  }

  .warum-text{
    display:flex;flex-direction:column;flex:1;
    /* Negativer Rand nach oben: der Text ruecht in den Verlauf hinein,
       dadurch wirken Bild und Text als ein Stueck statt als zwei. */
    margin-top:-26px;position:relative;z-index:1;
    padding:0 26px 24px;
  }
  @media (prefers-reduced-motion:reduce){
    .warum-bild img{transition:none;}
    .warum-block:hover .warum-bild img{transform:none;}
  }
  .warum-symbol{
    display:flex;align-items:center;justify-content:center;
    width:40px;height:40px;flex:none;margin-bottom:16px;
    color:var(--ink-soft);
  }
  .warum-symbol svg{width:26px;height:26px;}
  .warum-block h3{
    font-size:1.12rem;margin:0 0 10px;line-height:1.3;
  }
  .warum-text > p{
    margin:0;color:var(--ink-soft);font-size:0.95rem;line-height:1.6;
  }
  /* Die Schlusszeile ist die Aussage, die haengen bleibt. Eigene Zeile,
     groesser als der Fliesstext, in der Akzentfarbe - und mit margin-top:auto
     unten angeschlagen, damit sie in BEIDEN Bloecken auf derselben Linie
     steht, auch wenn der Fliesstext unterschiedlich lang laeuft. */
  /* Doppelte Klasse, damit die Farbe traegt: .warum-text > p ist
     spezifischer als eine einfache Klasse und hat den Akzent stillschweigend
     ueberschrieben - die Zeile stand hell statt gruen da, ohne Fehlermeldung
     und ohne dass im CSS etwas falsch aussah. */
  .warum-schluss.warum-schluss{
    margin:22px 0 0;padding-top:16px;
    border-top:1px solid rgba(255,255,255,0.07);
    font-size:1.04rem;font-weight:600;line-height:1.4;
    color:var(--lime);
  }
  .warum-text > p + .warum-schluss{ margin-top:auto; }
  @media (max-width:760px){
    .warum-paar{grid-template-columns:1fr;gap:18px;margin-top:30px;}
    .warum-text{padding:0 20px 20px;}
    .warum-schluss{font-size:1rem;}
  }

  /* ===== Der Weg: fuenf Schritte =================================
     Symbole aus Lucide (lucide.dev, ISC). Eine Sammlung fuer alle fuenf und
     fuer Abschnitt A darueber, damit Strichstaerke und Rundungen
     zusammenpassen.

     Jede Karte bringt ihre Farbe als Zahlentripel im Markup mit:
       --karte  satte Farbe, fuer Rand und Schein
       --zahl   aufgehellte Fassung, fuer Ziffer und Symbol
     Zwei Werte, weil Violett und Blau in voller Saettigung auf dem dunklen
     Grund unter 3:1 Kontrast liegen - als Flaeche unauffaellig, als Schrift
     unlesbar. */
  .schritte{
    list-style:none;margin:44px 0 0;padding:0;
    /* Breiter als die .wrap Spalte (1180px). In dieser steckten fuenf Karten
       mit je 212 Pixeln - zu schmal fuer deutsche Woerter: schon "Kurzes
       Kontaktformular ausfuellen" musste getrennt werden. Mit 1340 Pixeln
       bekommt jede Karte rund 250 und die meisten Zeilen stehen am Stueck.
       Der Ausbruch aus der Spalte ist auf diesen einen Block begrenzt; die
       Ueberschrift darueber bleibt in der Flucht der uebrigen Abschnitte. */
    width:min(1340px, 100vw - 48px);
    position:relative;left:50%;transform:translateX(-50%);
    /* minmax(0,1fr) statt 1fr: 1fr heisst minmax(AUTO,1fr), und auto ist die
       Mindestbreite des Inhalts. Karte 4 enthaelt "Suchmaschinenoptimierung"
       - dieses eine Wort war breiter als der gleiche Anteil und hat die
       Spalte auf 242px aufgeblasen, waehrend die anderen vier bei 205px
       standen. Mit minmax(0,...) sind alle fuenf exakt gleich breit, das
       lange Wort bricht stattdessen um. */
    /* Spalten leicht unterschiedlich breit, damit die Reihe nicht wie ein
       Tabellenkopf wirkt. Karte 3 ist die breiteste - sie traegt das
       wichtigste Versprechen. */
    display:grid;grid-template-columns:0.94fr 1fr 1.16fr 1.02fr 0.96fr;gap:18px;
    /* start statt stretch: jede Karte ist so hoch, wie ihr Inhalt braucht.
       Erzwungen gleiche Hoehe hiess vorher, den Ueberschuss zwischen die
       Stichpunkte zu verteilen - bei Karte 3 mit ihren zwei Punkten riss das
       ein Loch von 150 Pixeln mitten in die Karte. Die Ordnung stellt
       stattdessen der Versatz unten her. */
    align-items:start;
    position:relative;
  }

  /* Der Versatz. Die Karten stehen bewusst nicht auf einer Linie: 1 oben,
     2 tiefer, 3 fast oben, 4 am tiefsten, 5 dazwischen. Das nimmt der Reihe
     das Starre und faengt zugleich ab, dass die Karten von sich aus
     verschieden hoch sind - unten laufen sie dadurch ungefaehr zusammen. */
  .schritt-karte:nth-child(1){ margin-top:0; }
  .schritt-karte:nth-child(2){ margin-top:52px; }
  .schritt-karte:nth-child(3){ margin-top:10px; }
  .schritt-karte:nth-child(4){ margin-top:62px; }
  .schritt-karte:nth-child(5){ margin-top:22px; }

  /* Die waagerechte Verbindungslinie ist hier weg. Sie lag auf Symbolhoehe
     und setzte voraus, dass alle Symbole auf einer Linie sitzen - seit die
     Karten versetzt stehen, waere sie eine gerade Linie quer durch fuenf
     verschiedene Hoehen. Den Weg tragen jetzt die Schrittzahlen. Auf dem
     Handy, wo die Karten wieder untereinander stehen, kommt sie zurueck. */
  .schritte::before{ content:none; }
  .schritte::after{ content:none; }

  /* Der Winkel des laufenden Randes. Als @property angemeldet, damit der
     Browser ihn als WINKEL kennt und weich durchdrehen kann - eine nicht
     angemeldete Variable waere fuer ihn nur Text und wuerde in Stufen
     springen. Browser ohne @property behalten den festen Rand: nichts geht
     kaputt, es bewegt sich nur nichts. */
  @property --dreh{
    syntax:"<angle>"; inherits:false; initial-value:0deg;
  }

  .schritt-karte{
    position:relative;z-index:1;
    background:var(--card);
    /* Die Deckung steht je Karte im Markup (--rand), nicht hier fest.
       Mit einem gemeinsamen Wert waeren die Raender verschieden stark: bei
       0.34 kam Gruen auf 2.30:1 gegen den Seitengrund, Violett nur auf
       1.50:1 - dieselbe Zahl, halb so sichtbar. Die Werte in den Karten
       sind so gewaehlt, dass JEDE Farbe 3.2:1 erreicht und die fuenf
       Raender dadurch gleich kraeftig WIRKEN. Gemischt wird gegen den
       SEITENGRUND, nicht gegen den Kartengrund: der Rand liegt auf der
       Aussenkante, hinter ihm ist die Seite. Diese Verwechslung kostete
       beim ersten Anlauf 0.4 Kontrast. */
    border:1px solid rgba(var(--karte),var(--rand,0.5));
    border-radius:var(--radius-md);padding:24px 20px 22px;
    display:flex;flex-direction:column;
    /* Ruhiger Schein, kein Pulsieren, keine Bewegung. Der innere Ring hebt
       den Rand an, der weiche Schatten traegt die Farbe nach aussen. */
    box-shadow:inset 0 0 0 1px rgba(var(--karte),0.06),
               0 14px 34px -26px rgba(var(--karte),0.55);
  }
  /* Karte 3: die einzige Hervorhebung im Abschnitt. Hellerer Rand, leicht
     abgesetzter Grund. Bewusst ohne Groessen- oder Bewegungsunterschied -
     eine Karte, die zusaetzlich waechst oder leuchtet, zieht den Blick vom
     Weg ab, um den es hier geht. */
  .schritt-karte-hervor{
    /* Deutlich ueber den anderen: 5.0:1 statt 3.2:1. */
    border-color:rgba(var(--karte),0.67);
    background:
      linear-gradient(180deg, rgba(var(--karte),0.085), rgba(var(--karte),0.025)),
      var(--card);
    box-shadow:inset 0 0 0 1px rgba(var(--karte),0.12),
               0 18px 44px -24px rgba(var(--karte),0.7);
  }

  /* ---- Bewegung: der Rand laeuft, das Symbol atmet -------------------
     Ein heller Punkt wandert einmal um die Karte. Gemacht ist er aus einem
     Kegelverlauf, aus dem eine Maske die Mitte herausstanzt - sichtbar
     bleibt nur der eine Pixel Rand.

     Langsam und je Karte anders lang, damit die fuenf nicht im Gleichschritt
     blinken: das waere Kirmes. Man soll die Bewegung am Rand des Blickfelds
     spueren und nicht hinsehen muessen. Kein Blinken, kein Puls - der feste
     Rand bleibt immer stehen, der Punkt legt sich nur darueber. */
  .schritt-karte::after{
    content:"";position:absolute;inset:-1px;border-radius:inherit;
    pointer-events:none;
    padding:1px;
    background:conic-gradient(from var(--dreh),
      rgba(var(--karte),0) 0deg,
      rgba(var(--karte),0) 205deg,
      rgba(var(--zahl),0.85) 270deg,
      rgba(var(--karte),0) 335deg,
      rgba(var(--karte),0) 360deg);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
            mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite:exclude;
    animation:randLauf var(--lauf,11s) linear infinite;
  }
  @keyframes randLauf{ to{ --dreh:360deg; } }

  /* Das Symbol hebt und senkt sich um zwei Pixel, sein Schein geht dabei auf
     und zu. Die Schrittzahl bekommt denselben Takt, aber nur als Schein:
     eine wandernde Ziffer waere unruhig zu lesen. */
  .schritt-symbol{
    animation:symbolAtmen var(--atem,6s) ease-in-out infinite;
    will-change:transform;
  }
  @keyframes symbolAtmen{
    0%,100%{ transform:translateY(0);
             box-shadow:0 0 0 0 rgba(var(--karte),0),
                        0 0 14px -4px rgba(var(--karte),0.35); }
    50%    { transform:translateY(-2px);
             box-shadow:0 0 0 3px rgba(var(--karte),0.10),
                        0 0 22px -2px rgba(var(--karte),0.65); }
  }
  .schritt-nr{
    animation:zahlSchein var(--atem,6s) ease-in-out infinite;
  }
  @keyframes zahlSchein{
    0%,100%{ text-shadow:0 0 12px rgba(var(--zahl),0.25); }
    50%    { text-shadow:0 0 20px rgba(var(--zahl),0.60); }
  }

  /* Je Karte eigene Laufzeit und eigener Startpunkt. Negative Verzoegerung
     heisst: die Bewegung ist beim Laden schon mittendrin, alle fuenf starten
     also nicht gemeinsam bei null. */
  .schritt-karte:nth-child(1){ --lauf:11s;  --atem:6s;   }
  .schritt-karte:nth-child(2){ --lauf:13s;  --atem:7s;   }
  .schritt-karte:nth-child(3){ --lauf:9s;   --atem:5.4s; }
  .schritt-karte:nth-child(4){ --lauf:14s;  --atem:7.6s; }
  .schritt-karte:nth-child(5){ --lauf:12s;  --atem:6.4s; }
  .schritt-karte:nth-child(2)::after{ animation-delay:-3s;   }
  .schritt-karte:nth-child(3)::after{ animation-delay:-6s;   }
  .schritt-karte:nth-child(4)::after{ animation-delay:-1.5s; }
  .schritt-karte:nth-child(5)::after{ animation-delay:-8s;   }
  .schritt-karte:nth-child(2) .schritt-symbol,
  .schritt-karte:nth-child(2) .schritt-nr{ animation-delay:-1.2s; }
  .schritt-karte:nth-child(3) .schritt-symbol,
  .schritt-karte:nth-child(3) .schritt-nr{ animation-delay:-2.4s; }
  .schritt-karte:nth-child(4) .schritt-symbol,
  .schritt-karte:nth-child(4) .schritt-nr{ animation-delay:-3.1s; }
  .schritt-karte:nth-child(5) .schritt-symbol,
  .schritt-karte:nth-child(5) .schritt-nr{ animation-delay:-4.3s; }

  /* Wer wenig Bewegung eingestellt hat, bekommt gar keine. */
  @media (prefers-reduced-motion:reduce){
    .schritt-karte::after,
    .schritt-symbol,
    .schritt-nr{ animation:none; }
  }

  /* Karte 1 ist ganz anklickbar, ohne eigenen Knopf darin. */
  .schritt-ziel{
    display:flex;flex-direction:column;height:100%;
    text-decoration:none;color:inherit;
  }
  .schritt-karte:has(.schritt-ziel){padding:0;}
  .schritt-karte:has(.schritt-ziel) .schritt-ziel{padding:24px 20px 22px;}
  .schritt-karte:has(.schritt-ziel):hover{border-color:rgba(var(--karte),0.95);}
  .schritt-ziel:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:var(--radius-md);}

  /* Symbol links, Schrittzahl rechts aussen. */
  .schritt-kopf{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    margin-bottom:16px;
  }
  .schritt-symbol{
    flex:none;
    width:46px;height:46px;border-radius:12px;
    display:flex;align-items:center;justify-content:center;
    background:rgba(var(--karte),0.13);
    border:1px solid rgba(var(--karte),0.30);
    color:rgb(var(--zahl));
  }
  .schritt-symbol svg{width:24px;height:24px;}

  /* Die Schrittzahl ist jetzt ein Hauptelement, kein Abzeichen mehr:
     groesser als die Ueberschrift der Karte und in der Kartenfarbe. */
  .schritt-nr{
    font-family:'Space Grotesk','Grotesk Ersatz',system-ui,sans-serif;font-weight:700;
    font-size:1.75rem;line-height:1;
    color:rgb(var(--zahl));
    font-variant-numeric:tabular-nums;
  }

  /* Der reservierte Platz fuer zwei Zeilen ist weg: er sollte die
     Listenanfaenge auf eine Linie bringen, und genau diese Linie gibt es
     nicht mehr, seit die Karten versetzt stehen. In der kurzen Ueberschrift
     stuende er jetzt nur als Luecke.

     Weisse Schrift mit einem Hauch der Kartenfarbe dahinter: die Farbe
     kommt als Schein, nicht als Schriftfarbe - so bleibt der Kontrast bei
     18:1 und die Ueberschrift bekommt trotzdem etwas von der Karte ab. */
  .schritt-karte h3{
    font-size:1.02rem;margin:0 0 12px;line-height:1.3;
    
  }

  /* Die Abschnittsueberschrift steht auf EINER Zeile, sobald Platz da ist.
     Sie brach nicht wegen ihrer Groesse um, sondern weil .section-head auf
     680 Pixel begrenzt ist - eine Breite, die fuer LESETEXT gut ist und fuer
     eine Ueberschrift zu eng. Hier wird nur diese Grenze aufgehoben.

     Kein white-space:nowrap: das erzwingt die eine Zeile auch dann, wenn sie
     nicht passt, und schiebt den Rest aus dem Bild. Beim ersten Versuch
     stand deshalb "In fuenf Schritten zu deiner neuer" da - die letzten
     Buchstaben lagen ausserhalb. Ohne nowrap sucht der Browser selbst den
     Umbruch, und solange die Zeile passt, gibt es keinen. */
  @media (min-width:1080px){
    #ablauf .section-head{ max-width:none; }
  }

  /* Stichpunkte statt Fliesstext: eine Zeile je Aussage, damit die Karte
     ueberflogen werden kann. */
  .schritt-punkte{
    list-style:none;margin:0;padding:0;
    display:flex;flex-direction:column;gap:9px;
    /* Nichts mehr verteilen: die Karten sind nicht mehr gleich hoch, also
       gibt es keinen Ueberschuss, der irgendwohin muss. Die Stichpunkte
       stehen einfach untereinander. */
  }
  .schritt-punkte li{
    position:relative;padding-left:15px;
    color:var(--ink-soft);font-size:0.875rem;line-height:1.45;
    /* Deutsche Bandwurmwoerter in einer 165 Pixel breiten Spalte:
       "Suchmaschinenoptimierung" passt in keine Zeile. hyphens:auto trennt
       nach den Regeln von lang="de", break-word ist der Notnagel, falls der
       Browser keine Trennmuster hat. */
    hyphens:auto;overflow-wrap:break-word;
  }
  .schritt-punkte li::before{
    content:"";position:absolute;left:0;top:0.5em;
    width:5px;height:5px;border-radius:999px;
    background:rgb(var(--zahl));opacity:0.75;
  }
  /* Karte 1 hat nur EINEN Stichpunkt. Da gibt es zwischen den Zeilen nichts
     zu verteilen, der Rest der Kartenhoehe bleibt unter ihm frei.
     Zwischenzeitlich stand er mittig - das schloss die Luecke, verschob aber
     den Listenanfang um 21 Pixel gegen alle anderen Karten. Die Vorgabe
     "Ueberschriften und Listen beginnen in allen Karten auf derselben Hoehe"
     wiegt schwerer: eine Zeile, die aus der Reihe tanzt, faellt beim
     Querlesen sofort auf, freier Raum unter einem einzelnen Punkt nicht. */

  /* 3 + 2 statt 5 nebeneinander, sobald fuenf Spalten zu schmal fuer eine
     lesbare Zeile werden. Sechs Spalten als Raster, jede Karte nimmt zwei:
     so stehen in Reihe eins drei Karten, und die beiden aus Reihe zwei
     lassen sich mittig darunter setzen statt links angeschlagen. */
  @media (max-width:1180px){
    .schritte{grid-template-columns:repeat(6,1fr);gap:20px;}
    .schritt-karte{grid-column:span 2;}
    /* Der Versatz gilt nur fuer die eine lange Reihe. In zwei Reihen wuerde
       er die Karten nur ausfransen lassen, ohne etwas zu ordnen. */
    .schritt-karte:nth-child(1),
    .schritt-karte:nth-child(2),
    .schritt-karte:nth-child(3),
    .schritt-karte:nth-child(4),
    .schritt-karte:nth-child(5){ margin-top:0; }
    .schritt-karte:nth-child(4){grid-column:2 / span 2;}
    .schritt-karte:nth-child(5){grid-column:4 / span 2;}
  }

  /* Darunter untereinander. Bewusst KEINE Zwischenstufe mit zwei Spalten:
     der Auftrag kennt drei Anordnungen - fuenf nebeneinander, 3+2, und
     untereinander. Zwei Spalten haetten eine vierte erfunden, in der die
     fuenfte Karte allein in der dritten Reihe steht. */
  @media (max-width:820px){
    .schritte{grid-template-columns:1fr;gap:14px;}
    .schritt-karte,
    .schritt-karte:nth-child(4),
    .schritt-karte:nth-child(5){grid-column:auto;}
    .schritt-karte:nth-child(1),
    .schritt-karte:nth-child(2),
    .schritt-karte:nth-child(3),
    .schritt-karte:nth-child(4),
    .schritt-karte:nth-child(5){ margin-top:0; }
    /* Senkrechte Verbindungslinie zwischen den Karten. Farben und grosse
       Schrittzahlen bleiben. */
    .schritte::before{
      content:"";display:block;
      left:41px;right:auto;top:56px;bottom:56px;height:auto;width:1px;
      background:linear-gradient(180deg,transparent,var(--line) 6%,var(--line) 94%,transparent);
    }
    .schritt-kopf{margin-bottom:12px;}
    .schritt-nr{font-size:1.6rem;}
    /* Untereinander ist gleiche Hoehe kein Zusammenhalt mehr, sondern nur
       Leerraum in den kurzen Karten. Jede ist so hoch, wie ihr Inhalt
       braucht. */
    .schritt-punkte{flex:none;justify-content:flex-start;}
  }


  /* ===== Maskottchen ==============================================
     Der Gecko taucht auf der Startseite an GENAU FUENF Stellen auf, ueber
     die ganze Laenge verteilt: bei den fuenf Schritten, auf der Empfehlung,
     auf dem Band "In jedem Paket enthalten", bei den Referenzen und ganz
     unten am Formular.

     Fuenf und nicht mehr, und nie zwei gleichzeitig im Bild. Ein Maskottchen,
     das an jedem Absatz steht, macht aus einer Seite fuer Betriebe einen
     Kinderladen - und dieselbe Figur, die man staendig sieht, hoert nach
     kurzer Zeit auf, ueberhaupt aufzufallen.

     Die Groessen sind bewusst kleiner als in der mitgelieferten Vorlage
     (dort clamp(120px,18vw,280px)): 280 Pixel waeren neben einer Ueberschrift
     das groesste Element im Bild gewesen.

     Aufbau immer gleich und aus gutem Grund:
       .gecko        der KASTEN - traegt Platz, Groesse und den Hover
       .gecko img    das BILD   - traegt die Dauerbewegung
     Beides muss getrennt bleiben. Eine laufende Animation gewinnt gegen eine
     gewoehnliche Regel; ein transform im :hover auf demselben Element waere
     wirkungslos. Genau daran scheiterte der Hover in gecko_effekte.css. */
  .gecko{
    position:relative;
    flex:none;
    pointer-events:none;
    transition:transform .32s ease, filter .32s ease;
  }
  .gecko picture{ display:contents; }
  .gecko img{
    display:block;width:100%;height:auto;object-fit:contain;
    filter:drop-shadow(0 14px 22px rgba(0,0,0,0.45));
    will-change:transform;
  }

  /* Die Bewegungen aus gecko_effekte.css, in Weite und Tempo etwas
     zurueckgenommen: 10 Pixel Hub neben einer Ueberschrift zieht den Blick
     vom Text weg. */
  .gecko-schwebt img{ animation:geckoSchweben 4.6s ease-in-out infinite; }
  .gecko-winkt img{   animation:geckoWinken   3.2s ease-in-out infinite; }
  .gecko-zeigt img{   animation:geckoZeigen   3.0s ease-in-out infinite; }
  .gecko-sitzt img{   animation:geckoSitzen   4.2s ease-in-out infinite; }
  .gecko-prueft img{  animation:geckoPruefen  3.6s ease-in-out infinite; }

  @keyframes geckoSchweben{
    0%,100%{ transform:translateY(0) rotate(-0.5deg); }
    50%    { transform:translateY(-7px) rotate(0.5deg); }
  }
  @keyframes geckoWinken{
    0%,100%{ transform:rotate(0deg); }
    14%    { transform:rotate(-2.5deg); }
    28%    { transform:rotate(2.5deg); }
    42%    { transform:rotate(-1deg); }
    56%    { transform:rotate(0deg); }
  }
  /* Zeigt nach unten: der Hub geht deshalb nach UNTEN, nicht zur Seite -
     die Bewegung soll in dieselbe Richtung laufen wie die Geste. */
  @keyframes geckoZeigen{
    0%,100%{ transform:translateY(0); }
    50%    { transform:translateY(6px); }
  }
  @keyframes geckoSitzen{
    0%,100%{ transform:translateY(0); }
    50%    { transform:translateY(-4px); }
  }
  @keyframes geckoPruefen{
    0%,100%{ transform:rotate(0deg) scale(1); }
    50%    { transform:rotate(1deg) scale(1.02); }
  }

  /* --- Die fuenf Standorte ------------------------------------------- */

  /* 1. Bei den fuenf Schritten: rechts neben der Ueberschrift, zeigt nach
        unten auf die Karten. */
  .gecko-ablauf{
    width:clamp(96px, 10vw, 132px);
    align-self:flex-end;
    margin-bottom:-14px;
  }
  #ablauf .section-head{ display:flex;align-items:flex-end;gap:20px; }
  /* Der Textblock waechst NICHT: mit flex:1 wurde er ueber die ganze Breite
     gezogen und schob den Gecko ans rechte Ende, wo er allein im Dunkeln
     stand. So steht er direkt neben der Ueberschrift und zeigt von dort aus
     nach unten auf die Karten. */
  #ablauf .section-head > div:first-child{ flex:0 1 auto;min-width:0; }

  /* 2. Auf der Empfehlung: sitzt oben rechts auf der Kartenkante und hebt
        den Daumen. Absolut gesetzt, damit die Karte selbst nicht hoeher
        wird - sonst waere die empfohlene Karte hoeher als die anderen. */
  /* Zwei Anlaeufe waren daneben, beide gemessen:
       top:-52px  lag genau dort, wo seit dem Umbau der Kopfzeile das
                  Paketsymbol steht.
       top:-74px  lag dafuer ueber der Unterzeile des Abschnitts ("Vom
                  Onepager bis zur individuellen Webseite ...").
     Oben ist zwischen Unterzeile und Kartenkante schlicht kein Platz. Der
     Gecko sitzt deshalb an der UNTEREN rechten Ecke, halb ausserhalb - dort
     steht nichts, und er wirkt wie ein Aufkleber auf der Empfehlung. */
  .gecko-paket{
    position:absolute;top:-44px;right:-16px;
    width:58px;z-index:3;
  }

  /* 3. Auf dem Band "In jedem Paket enthalten": sitzt auf der Oberkante. */
  .gecko-band{
    position:absolute;top:-64px;right:8%;
    width:112px;z-index:2;
  }
  .enthalten-band{ position:relative; }

  /* 4. Bei den Referenzen: prueft eine Webseite, links neben der
        Ueberschrift. Der Abschnittskopf steht mittig, deshalb hier absolut
        gesetzt statt in den Fluss gestellt. */
  /* Bezug ist die volle Spalte, NICHT der Abschnittskopf: der ist auf 680
     Pixel begrenzt und steht mittig, ein "left:2%" darin landete mitten auf
     dem Wort "Seiten" und machte die Ueberschrift unleserlich. An der Spalte
     ausgerichtet steht der Gecko links im freien Raum daneben. */
  .gecko-referenzen{
    position:absolute;left:0;top:34px;
    width:clamp(88px, 9vw, 124px);
  }
  #referenzen .wrap{ position:relative; }
  /* Unter 1100 Pixeln wird der freie Raum neben dem Kopf zu schmal. */
  @media (max-width:1100px){ .gecko-referenzen{ display:none; } }

  /* 6. In den FAQ: zwinkert. Rechts neben dem Kopf, als Gegenstueck zum
        pruefenden Gecko bei den Referenzen, der links steht. */
  .gecko-faq{
    position:absolute;right:0;top:30px;
    width:clamp(84px, 8.5vw, 116px);
  }
  #faq .wrap{ position:relative; }
  @media (max-width:1100px){ .gecko-faq{ display:none; } }

  /* Die Ueberblendung. Beide Bilder liegen deckungsgleich, das zwinkernde
     ist unsichtbar und blitzt zweimal je Runde kurz auf. Die zweite Runde
     sitzt dicht hinter der ersten - so wirkt es wie ein Blinzeln und nicht
     wie ein Bildfehler. */
  .gecko-blinzelt{ position:relative; }
  .gecko-blinzelt picture{ display:block; }
  .gecko-blinzelt picture:last-of-type{ position:absolute;inset:0; }
  .gecko-blinzelt .gecko-zwinkert{
    opacity:0;
    animation:geckoZwinkern 6.5s linear infinite;
  }
  @keyframes geckoZwinkern{
    0%,  40%   { opacity:0; }
    41%, 43.5% { opacity:1; }
    44%, 49%   { opacity:0; }
    50%, 52.5% { opacity:1; }
    53%, 100%  { opacity:0; }
  }
  @media (prefers-reduced-motion:reduce){
    .gecko-blinzelt .gecko-zwinkert{ animation:none;opacity:0; }
  }

  /* 5. Ganz unten am Formular: winkt zum Abschied. */
  .gecko-final{
    width:clamp(84px, 8vw, 112px);
    margin:0 auto 6px;
  }

  /* Auf dem Handy bleiben nur die drei, die dort Platz haben und nichts
     ueberdecken. Die beiden an den Ueberschriften wuerden dort in der Zeile
     stehen und sie umbrechen lassen. */
  @media (max-width:760px){
    .gecko-ablauf,
    .gecko-referenzen{ display:none; }
    #ablauf .section-head{ display:block; }
    .gecko-paket{ top:-38px;right:-10px;width:52px; }
    .gecko-band{ top:-52px;right:6%;width:88px; }
    .gecko-final{ width:82px; }
  }

  @media (prefers-reduced-motion:reduce){
    .gecko,
    .gecko img{ animation:none;transition:none; }
  }

  /* ===== Referenzen ==========================================
     Drei Geraete je Karte, jedes im ECHTEN Seitenverhaeltnis seines
     Bildschirms. Die Rahmen sind reines CSS und tragen bewusst kein
     Herstellerzeichen: eine angedeutete Apple Kerbe waere eine fremde Marke
     auf unserer Seite, und sie waere gelogen, weil die Seite auf jedem Geraet
     laeuft. */
  .ref-grid{
    display:grid;grid-template-columns:repeat(2,1fr);gap:28px;
    max-width:1120px;margin:44px auto 0;
  }
  @media (max-width:900px){ .ref-grid{grid-template-columns:1fr;} }

  .ref-karte{
    background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
    padding:26px 26px 24px;overflow:hidden;
    transition:border-color .3s ease;
  }
  .ref-karte:hover{border-color:rgba(53,104,166,0.45);}

  .ref-buehne{
    position:relative;aspect-ratio:16/10;margin-bottom:22px;
  }

  /* Die drei Rahmen. Die Seitenverhaeltnisse sind die der Aufnahmen:
     Rechner 1440x900, Tablet 834x1112, Handy 390x844. Wer hier eine Zahl
     aendert, staucht das Bild darin. */
  .ref-geraet{
    position:absolute;background:var(--nacht-weich);overflow:hidden;
    border:1px solid rgba(255,255,255,0.16);
    box-shadow:0 22px 48px -20px rgba(0,0,0,0.9);
  }
  .ref-desktop{
    left:0;bottom:12%;width:74%;aspect-ratio:1440/900;
    border-radius:8px 8px 3px 3px;border-width:4px;border-color:var(--tiefblau-2);
  }
  /* Der Fuss des Rechners, angedeutet. */
  .ref-desktop::after{
    content:"";position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);
    width:116%;height:6px;border-radius:0 0 6px 6px;
    background:linear-gradient(180deg,#33304d,#1a182a);
  }
  .ref-tablet{
    right:12%;bottom:5%;width:27%;aspect-ratio:834/1112;
    border-radius:10px;border-width:3px;border-color:var(--tiefblau-2);
  }
  .ref-handy{
    right:0;bottom:0;width:15%;aspect-ratio:390/844;
    border-radius:11px;border-width:3px;border-color:var(--tiefblau-2);
  }

  /* Das Fenster, durch das die Seitenaufnahme wandert. */
  .ref-schirm{ position:absolute;inset:0;overflow:hidden; }
  .ref-lauf{
    display:block;width:100%;height:auto;
    /* NUR Verschiebung, nie top oder margin: eine Transformation laeuft auf
       der Grafikkarte, alles andere zwingt den Browser bei jedem Bild zu
       einer neuen Layoutrechnung. Genau daran wird eine Seite zaeh. */
    will-change:transform;
    transform:translate3d(0,0,0);
  }
  .ref-karte.laeuft .ref-lauf{
    transition:transform var(--lauf-dauer,12s) linear;
  }
  .ref-karte.laeuft.zurueck .ref-lauf{
    transition:transform 1.1s cubic-bezier(.4,0,.2,1);
  }

  .ref-text h3{font-size:1.15rem;margin:0 0 4px;}
  .ref-fach{color:var(--ink-soft);font-size:0.86rem;margin:0 0 10px;}
  .ref-satz{color:var(--ink-soft);font-size:0.92rem;margin:0 0 18px;max-width:46ch;}
  .ref-satz-fehlt{color:rgba(255,255,255,0.3);font-style:italic;}
  .ref-knopf{ display:inline-block; }
  .ref-leer{text-align:center;color:var(--ink-soft);margin:40px auto 0;}

  .ref-hinweis{
    margin:30px auto 0;max-width:640px;text-align:center;
    color:var(--ink-soft);font-size:0.84rem;line-height:1.55;
  }

  @media (prefers-reduced-motion:reduce){
    .ref-karte, .ref-lauf{ transition:none !important; }
    .ref-karte:hover{ border-color:var(--line); }
  }

  /* ===== Raketenszene =========================================
     Uebernommen aus der Demo jalveo-rakete. Drei Dinge sind anders:

     1. padding:0. Die Seite vergibt global section{padding:100px 0}. Das
        haette die klebende Flaeche 100 Pixel zu frueh ausgesperrt UND die
        selbst gerechnete Fortschrittsformel um genau diese 100 Pixel
        verfaelscht - der Schlusssatz waere nie sauber erschienen.
     2. Kein hud-progress. Die Seite hat mit .readbar oben bereits einen
        2 Pixel hohen Fortschrittsbalken im selben Verlauf. Zwei davon
        gleichzeitig lesen sich als Fehler, nicht als Absicht.
     3. Die Variablen der Demo (--pad, --font-mono, --grad-hell) gibt es hier
        nicht. Sie stehen jetzt ausgeschrieben da. --grad-hell fehlte am
        gefaehrlichsten: der Schlusssatz setzt color:transparent und holt die
        Farbe aus dem Verlauf. Ohne die Variable waere er unsichtbar gewesen,
        ohne jede Fehlermeldung. */
  /* OHNE JavaScript gibt es die Szene gar nicht.

     Sonst staende hier eine leere Leinwand ueber knapp drei Bildschirmhoehen
     dunklem Grund - der Besucher scrollt durch eine schwarze Wand und haelt
     die Seite fuer kaputt. Gleiches Muster wie bei .reveal: was nur mit
     JavaScript funktioniert, existiert auch nur mit JavaScript. */
  .scene-section{ display:none; }
  .js-an .scene-section{ display:block; position:relative; padding:0; background:var(--bg); color:var(--ink); }
  .scene-sticky{ position:sticky; top:0; height:100svh; overflow:hidden; }
  .scene-canvas{ display:block; width:100%; height:100%; }
  /* 130 statt 170 (08.09.2026). Der Aufstieg braucht Strecke, damit START,
     AUFSTIEG und STERN nacheinander lesbar sind, aber nicht so viel: bei
     170svh standen 1,7 Bildschirmhoehen Aufstieg 1,7 Bildschirmhoehen
     stehendem Schlussbild gegenueber. */
  .scene-spacer{ height:130svh; }
  @media (max-width:640px){ .scene-spacer{ height:115svh; } }

  /* Haltestrecke, Teil 34.1.

     Sie dient NUR dem Lesen: die Szene steht hier vollstaendig still und
     vollstaendig sichtbar. Das Ausblenden passiert erst danach und haengt am
     naechsten Abschnitt - deshalb ist sie jetzt kuerzer als beim ersten
     Versuch, wo sie beides tragen musste und dabei ein schwarzes Loch
     hinterliess. */
  /* 30 statt 70. Das Schlussbild haelt ohnehin schon eine ganze
     Bildschirmhoehe, weil die klebende Flaeche erst am Abschnittsende
     loslaesst. Die Haltestrecke muss nur reichen, damit der Satz gelesen und
     die Szene weggeblendet werden kann. */
  .scene-abspann{ height:30svh; }
  @media (max-width:640px){ .scene-abspann{ height:25svh; } }

  /* Bewegt wird nur diese Huelle, und nur mit Deckkraft und Transformation.
     Keine Hoehe, kein Rand, nichts, was das Layout neu rechnen laesst. */
  .scene-huelle{
    position:absolute;inset:0;
    transform-origin:50% 42%;
    will-change:transform,opacity;
    transform:translate3d(0,0,0);
  }
  /* Teil 34.2: der naechste Abschnitt faehrt von unten heran.

     Er beginnt leicht versetzt und durchsichtig und ist in seiner Endlage,
     wenn er oben steht. Der weiche Verlauf an seiner Oberkante nimmt die
     harte Kante ueber dem Bild.

     Voreinstellung ist der ENDZUSTAND: ohne JavaScript und bevor gerechnet
     wird, steht der Abschnitt normal da. */
  /*
   * Die harte Kante zur Szene darueber.
   *
   * Die farbigen .blob Flecken haengen mit position:fixed hinter der ganzen
   * Seite. Der Szenenabschnitt darueber deckt sie ab, und .scene-saum malt an
   * seiner Unterkante volles --bg. Dieser Abschnitt hat gar keinen Grund -
   * also lagen die Flecken ab der ersten Zeile in voller Staerke frei.
   * Gemessen: eine Zeile ueber der Kante 8,8,14, eine Zeile darunter sofort
   * 25,51,95 links und 49,14,39 rechts. Das war die Linie quer ueber die
   * Seite.
   *
   * Der Grund hier faengt deshalb mit --bg an und wird nach 26svh
   * durchsichtig. Weil er auf dem Abschnitt selbst liegt und nicht auf einer
   * daruebergelegten Schicht, verdeckt er nichts vom Text - er ersetzt nur
   * den fehlenden Grund. Links und rechts wirkt er gleichermassen, die
   * Flecken auf beiden Seiten kommen zusammen hervor.
   */
  .kommt-hoch{
    position:relative;
    background:linear-gradient(180deg, var(--bg) 0, transparent 26svh);
  }
  .kommt-hoch > .wrap{
    will-change:transform,opacity;
    transform:translate3d(0,0,0);
  }
  .kommt-hoch::before{
    content:"";position:absolute;left:0;right:0;top:0;height:18svh;
    pointer-events:none;z-index:2;
    background:linear-gradient(180deg,var(--bg),transparent);
    opacity:var(--saum,0);
  }
  @media (prefers-reduced-motion:reduce){
    .kommt-hoch > .wrap{ transform:none !important; }
  }

  .scene-saum{
    position:absolute;left:0;right:0;bottom:0;height:26svh;
    pointer-events:none;
    background:linear-gradient(180deg,transparent,var(--bg));
  }

  .scene-hud{
    position:absolute; left:0; bottom:0; width:100%;
    display:flex; justify-content:space-between; align-items:flex-end; gap:20px;
    padding:clamp(20px,4vw,44px);
    /* Rechts unten schweben der Kontaktknopf und der Nach oben Knopf,
       beide 54 Pixel breit mit 24 Pixel Abstand zur Kante. Ohne diesen
       Freiraum liefe die Hoehenanzeige genau dahinter. */
    padding-right:calc(clamp(20px,4vw,44px) + 78px);
    /* Der Himmel ist im unteren Drittel hell. Ohne diesen Schleier stuende
       weisse Schrift auf hellem Flieder, und das faellt hinter den
       Kontraststand zurueck, den die Seite sonst haelt. */
    background:linear-gradient(to top,rgba(5,7,14,0.75),rgba(5,7,14,0) 100%);
    text-shadow:0 1px 4px rgba(0,0,0,.85),0 2px 20px rgba(0,0,0,.7);
  }
  .hud-left .label{ color:var(--ink); display:block; letter-spacing:.2em; font-size:13px; font-weight:700; }
  .hud-sub{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; letter-spacing:.1em; color:var(--ink-soft); }
  .hud-right{ display:flex; align-items:baseline; gap:10px; }
  .hud-right b{
    font-family:'Space Grotesk','Grotesk Ersatz',system-ui,sans-serif;
    font-size:clamp(2.6rem,7vw,6rem); font-weight:700; letter-spacing:-.05em; line-height:.9;
    font-variant-numeric:tabular-nums; text-shadow:0 2px 8px rgba(0,0,0,.9),0 4px 30px rgba(0,0,0,.7);
  }
  .hud-right .label{ color:var(--ink-soft); letter-spacing:.2em; font-size:13px; font-weight:700; }
  /* Die beiden Textwechsel im HUD, in der Demo mit GSAP, hier als Klasse. */
  .hud-left, .hud-right{ transition:opacity .35s ease, transform .35s ease; }
  .hud-wechsel{ opacity:0; transform:translateY(9px); }

  .scene-claim{
    position:absolute; left:0; top:0; width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
    pointer-events:none; padding:0 clamp(20px,4vw,44px);
  }
  .scene-claim p{
    margin:0; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:12.5px; letter-spacing:.3em; text-transform:uppercase; text-align:center;
    color:var(--ink); text-shadow:0 1px 4px rgba(0,0,0,.9),0 2px 24px rgba(0,0,0,.75);
  }
  .scene-final{
    position:absolute; left:0; top:0; width:100%; height:100%;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:14px; pointer-events:none; padding:0 clamp(20px,4vw,44px); opacity:0;
  }
  .scene-final b{
    font-family:'Space Grotesk','Grotesk Ersatz',system-ui,sans-serif;
    font-size:clamp(1.5rem,4.4vw,3.6rem); font-weight:700; letter-spacing:-.035em; line-height:1;
    text-transform:uppercase; text-align:center;
    /* Aufgehellt gegenueber --grad: der Satz steht auf dem Nachthimmel, dort
       kaeme der Originalverlauf nur auf etwa 2:1 Kontrast.

       Bis zum 08.09.2026 lief der Verlauf von Hellblau ueber Violett nach
       Pink -- die letzten Neonfarben der Szene. Keiner Messung aufgefallen,
       weil die Palettenmessung die LEINWAND prueft und dieser Satz DOM-Text
       ist. Jetzt Blau ueber Sternweiss nach Mond. */
    background:linear-gradient(120deg,var(--blau-hell),var(--sternweiss) 55%,var(--mond));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .scene-final span{
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:12px; letter-spacing:.26em; text-transform:uppercase; text-align:center;
    color:var(--ink); text-shadow:0 1px 6px rgba(0,0,0,.9);
  }
  /* Auf schmalen Bildschirmen wird es eng: die Mittelzeile lag genau auf der
     Rakete, und die Hoehenanzeige brach neben dem linken Text um. Deshalb
     rueckt der Spruch nach oben und das HUD stapelt sich. */
  @media (max-width:560px){
    .scene-claim{ align-items:flex-start; padding-top:18vh; }
    .scene-claim p{ font-size:11px; letter-spacing:.22em; }
    .scene-hud{
      flex-direction:column; align-items:flex-start; gap:10px;
      padding-right:calc(clamp(20px,4vw,44px) + 78px);
    }
    .hud-right b{ font-size:clamp(2.2rem,13vw,3.4rem); }
    .hud-sub{ font-size:11px; }
  }

  /* Notausgang: wirft die Szene beim Zeichnen, wird sie ganz abgeschaltet.
     Dann steht dort nichts statt einer bildschirmhohen schwarzen Flaeche. */
  .scene-section.szene-aus .scene-sticky,
  .scene-section.szene-aus .scene-spacer{ display:none; }
  @media (prefers-reduced-motion:reduce){
    .hud-left, .hud-right{ transition:none; }
    /* Kein Scrollweg, nur ein stehendes Bild. Wer Bewegung reduziert hat,
       soll die Szene sehen duerfen, aber nicht durch drei Bildschirmhoehen
       gescrollt werden, um an ihr vorbeizukommen. */
    .scene-spacer{ height:0; }
  }

  /* ===== Vorspann ============================================= */
  .vorspann{ display:none; }
  .vorspann-an .vorspann{
    display:flex; position:fixed; inset:0; z-index:200;
    flex-direction:column; align-items:center; justify-content:center; gap:26px;
    background:var(--bg);
  }
  .vorspann-marke{
    /* Ursprung links oben: dann genuegen Verschiebung und Skalierung, um genau
       auf der Kopfzeilenmarke zu landen, ohne zweite Rechnung fuer die Mitte. */
    transform-origin:left top;
    will-change:transform;
  }
  .vorspann-marke img{ display:block; height:clamp(52px,9vw,104px); width:auto; }
  .vorspann-marke.fliegt{ transition:transform .55s cubic-bezier(.65,0,.35,1); }
  .vorspann-balken{
    width:min(220px,50vw); height:2px; border-radius:2px; overflow:hidden;
    background:rgba(255,255,255,0.16);
  }
  .vorspann-balken i{ display:block; height:100%; width:0; background:var(--grad); transition:width .5s ease; }
  .vorspann.geht .vorspann-balken{ opacity:0; transition:opacity .25s ease; }
  .vorspann.weg{ opacity:0; pointer-events:none; transition:opacity .45s ease; }
  /* Die Marke in der Kopfzeile bleibt unsichtbar, bis das fliegende Logo
     gelandet ist -- sonst stuenden zwei Logos gleichzeitig da. */
  .vorspann-an .brand{ opacity:0; }
  .vorspann-an.gelandet .brand{ opacity:1; transition:opacity .3s ease; }
  @media (prefers-reduced-motion:reduce){
    .vorspann-marke.fliegt{ transition:none; }
    .vorspann-balken i{ transition:none; }
  }

  /* ===== Preiszeilen der erzeugten Bloecke =====================
     Die Karten selbst benutzen die bestehenden price-card Regeln weiter
     oben, damit Neigung, Lichtkegel und das Atmen der Empfehlungskarte
     erhalten bleiben. Neu sind nur die drei Zeilen unter dem Betrag. */
  .price-je{ font-family:'Inter','Inter Ersatz',system-ui,sans-serif; font-size:0.95rem; font-weight:600; color:var(--ink-soft); }
  .price-amount{ margin-bottom:6px; }
  .price-netto{ margin:0 0 14px; font-size:0.82rem; color:var(--ink-soft); }
  .price-dazu{ margin:0 0 6px; font-size:0.84rem; color:var(--ink-soft); }
  .price-dazu b{ color:var(--ink); }
  .price-klein-netto{ color:rgba(255,255,255,0.42); }
  .price-features.immer li::before{ color:var(--blue); }
  .price-features.zusatz li::before{ content:"+"; color:var(--lime); }

  /* ============================================================
     Bewegungsebene
     ============================================================ */

  /* Lesefortschritt ueber die ganze Seite, sitzt auf der Headerkante */
  .readbar{
    position:fixed;top:0;left:0;height:2px;width:100%;z-index:60;
    background:transparent;pointer-events:none;
  }
  .readbar span{
    display:block;height:100%;width:0%;background:var(--grad);
    box-shadow:inset 0 0 0 1px rgba(244,230,190,.22);
    transform-origin:left center;
  }

  /* Ueberschriften ziehen zeilenweise hoch */
  .line-mask{display:block;overflow:hidden;}
  .line-mask > span{
    display:block;
    transform:translateY(105%);
    transition:transform .9s cubic-bezier(.16,1,.3,1);
    transition-delay:var(--line-delay,0ms);
  }
  .is-visible .line-mask > span,
  .line-mask.is-visible > span{transform:translateY(0);}

  /* Zahlen, die beim Erscheinen hochlaufen */
  .count-up{font-variant-numeric:tabular-nums;}

  /* Parallax der Hintergrundfarbflecken */
  .blob{will-change:transform;}

  @media (prefers-reduced-motion:reduce){
    .line-mask > span{transform:none;transition:none;}
    .readbar{display:none;}
  }

  /* ============================================================
     Buttons
     ============================================================ */
  .btn{position:relative;overflow:hidden;isolation:isolate;}
  .btn.is-magnet{transition:transform .12s ease-out, box-shadow .18s ease;}
  .btn:active{transform:translateY(0) scale(0.97);}

  /* Glanz, der einmal ueber den Hauptbutton laeuft */
  .btn-primary::after{
    content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,0.42) 50%,transparent 62%);
    transform:translateX(-130%);
  }
  .btn-primary:hover::after{transform:translateX(130%);transition:transform .75s cubic-bezier(.22,1,.36,1);}
  .btn-primary:hover{box-shadow:0 18px 44px -12px rgba(5,10,22,0.85);}

  .btn-outline{transition:transform .18s ease, border-color .18s ease, background .18s ease;}
  .btn-outline:hover{border-color:var(--violet);background:rgba(53,104,166,0.10);}

  /* Sichtbarer Fokus fuer Tastaturbedienung */
  a:focus-visible, button:focus-visible, summary:focus-visible,
  input:focus-visible, [tabindex]:focus-visible{
    outline:2px solid var(--lime);
    outline-offset:3px;
    border-radius:6px;
  }

  @media (prefers-reduced-motion:reduce){
    .btn-primary::after{display:none;}
    .btn:active{transform:none;}
  }

  /* ============================================================
     Karten: leichte 3D Neigung und Lichtkegel unter dem Zeiger
     ============================================================ */

  .tilt{
    transform-style:preserve-3d;
    will-change:transform;
    /* Uebergaenge der Reveal Ebene bewusst vollstaendig wiederholt,
       damit die Kurzschreibweise sie nicht ueberschreibt */
    transition:opacity .75s cubic-bezier(.16,1,.3,1),
               transform .55s cubic-bezier(.16,1,.3,1),
               filter .75s ease,
               box-shadow .35s ease,
               border-color .35s ease;
    transition-delay:var(--reveal-delay,0ms);
  }
  .tilt.is-tilting{
    transition:transform .1s linear, box-shadow .35s ease, border-color .35s ease;
    transition-delay:0ms;
  }
  .tilt::after{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),
               rgba(53,104,166,0.16), transparent 42%);
    opacity:0;transition:opacity .3s ease;
  }
  .tilt.is-tilting::after{opacity:1;}
  .tilt.is-tilting{border-color:rgba(53,104,166,0.45);}
  /* .p-card und .step bringen position:relative schon mit */
  .proj-card{position:relative;}
  .stimme{position:relative;}

  /* Der Schein der Empfehlung atmet, der Rahmen laeuft.
     Zwei Animationen an einem Element gehen nur in EINER Regel - stand die
     Atmung in einer eigenen, ueberschrieb sie den laufenden Rahmen
     stillschweigend, und der Rahmen stand wieder still. Deshalb hier beide
     zusammen und nur an dieser Stelle.
     Bewusst leiser als frueher: der Farbwechsel von Violett nach Pink zog so
     stark, dass die Karte staendig im Augenwinkel blinkte und die anderen
     beiden wie Ausschuss aussahen. */
  .price-card.featured{
    animation:randLauf 8s linear infinite, featuredGlow 6s ease-in-out infinite;
  }
  @keyframes featuredGlow{
    0%,100%{box-shadow:0 26px 70px -34px rgba(5,10,22,0.30);}
    50%{box-shadow:0 30px 80px -32px rgba(5,10,22,0.6);}
  }

  @media (prefers-reduced-motion:reduce){
    .tilt{transition:none;}
    .tilt::after{display:none;}
    .price-card.featured{animation:none;}
  }
  @media (hover:none){
    .tilt::after{display:none;}
  }

  /* ============================================================
     Salamander als Markenzeichen
     ============================================================ */

  /* Logo im Header reagiert auf Zeiger und Scrolltiefe.
     Bewusst nur Skalierung, kein Kippen: das ganze Logo schief zu stellen
     waere ein Eingriff in die Wortmarke. */
  .brand img{
    transition:transform .35s cubic-bezier(.34,1.56,.64,1), filter .4s ease;
    filter:none;
    transform-origin:left center;
  }
  .brand:hover img{transform:scale(1.05);}
  header.is-deep .brand img{
    filter:drop-shadow(0 0 10px rgba(53,104,166,0.4)) drop-shadow(0 0 22px rgba(237,230,210,0.3));
  }

  /* Grosses, sehr leises Wasserzeichen hinter dem Abschluss */
  .final{position:relative;}
  .final-mark{
    position:absolute;right:-40px;bottom:-30px;width:min(380px,42vw);
    opacity:0.05;pointer-events:none;user-select:none;z-index:0;
    transform:rotate(-8deg);
  }
  .final > *{position:relative;z-index:1;}
  @media (max-width:860px){ .final-mark{width:260px;right:-60px;opacity:0.04;} }

  /* Zurueck nach oben, erscheint erst tief in der Seite */
  /* visibility:hidden nimmt den Knopf aus der Tabulatorreihenfolge, solange
     er unsichtbar ist. opacity und pointer-events allein taten das nicht. */
  .totop{visibility:hidden;
    position:fixed;right:24px;bottom:92px;z-index:55;
    width:54px;height:54px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:var(--card-2);border:1px solid var(--line);
    box-shadow:0 14px 34px -12px rgba(0,0,0,0.7);
    cursor:pointer;padding:0;
    opacity:0;transform:translateY(16px) scale(0.85);pointer-events:none;
    transition:opacity .35s ease, transform .35s cubic-bezier(.34,1.56,.64,1), border-color .25s ease;
  }
  .totop.is-on{visibility:visible;opacity:1;transform:none;pointer-events:auto;}
  .totop:hover{border-color:var(--violet);}
  .totop img{
    width:30px;height:auto;
    transform:rotate(-90deg);
    transition:transform .35s cubic-bezier(.34,1.56,.64,1);
  }
  .totop:hover img{transform:rotate(-90deg) translateX(3px) scale(1.1);}
  .totop::before{
    content:"";position:absolute;inset:-3px;border-radius:50%;
    background:var(--grad);opacity:0;transition:opacity .3s ease;z-index:-1;
    filter:blur(9px);
  }
  .totop:hover::before{opacity:0.8;}
  /* Auf kleinen Schirmen weicht er der Buchungsleiste aus */
  @media (max-width:640px){ .totop{right:16px;bottom:148px;width:46px;height:46px;} .totop img{width:25px;} }

  @media (prefers-reduced-motion:reduce){
    .brand img, .totop, .totop img{transition:none;}
    .brand:hover img{transform:none;}
  }

  /* Schwebender Kontaktknopf, immer erreichbar */
  /* Bis 03.09.2026 WhatsApp-Grün (#25d366 → #128c7e) mit weißer Schrift --
     das einzige Palettenfremde, das auf jeder Seite dauerhaft im Bild stand.
     Jetzt --blau mit --sternweiss, beim Überfahren --blau-hell mit --nacht. */
  .kontakt-fab{
    position:fixed;right:24px;bottom:24px;z-index:55;
    width:54px;height:54px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;color:var(--sternweiss);
    background:var(--blau);
    box-shadow:0 14px 34px -12px rgba(53,104,166,0.8);
    transition:transform .25s ease, box-shadow .3s ease, background .2s ease, color .2s ease;
  }
  .kontakt-fab:hover{
    transform:translateY(-3px);
    background:var(--blau-hell);color:var(--nacht);
    box-shadow:0 0 0 7px rgba(110,159,222,0.18), 0 18px 40px -12px rgba(110,159,222,0.9);
  }
  @media (max-width:640px){ .kontakt-fab{right:16px;bottom:88px;width:48px;height:48px;} }
  @media (prefers-reduced-motion:reduce){ .kontakt-fab{transition:none;} .kontakt-fab:hover{transform:none;} }

  /* ============================================================
     Feinschliff
     ============================================================ */

  /* Sprungmarken landen nicht mehr unter dem klebenden Header */
  section[id]{scroll-margin-top:112px;}

  /* Buchungsleiste, die auf dem Handy immer erreichbar bleibt */
  /* Dauerdrehung im Abschlussblock anhalten, wenn weniger Bewegung gewuenscht ist. */
  @media (prefers-reduced-motion:reduce){ .final::before{animation:none;} }


/* ===================================================== Unterseiten, Teil 32
   Ab dem 18.08.2026. Die Startseite besteht aus Abschnitten mit grossen
   Bildern; eine Unterseite ist eine Textseite, die jemand von Google kommend
   wirklich liest. Andere Aufgabe, andere Masse: schmalere Spalte, mehr Luft
   zwischen den Zeilen, deutlich gesetzte Zwischenueberschriften.

   Die Zeilenlaenge ist auf 68 Zeichen begrenzt. Laenger findet das Auge beim
   Zeilenwechsel den Anfang nicht mehr zuverlaessig. */
.seite{ padding:120px 0 90px; position:relative; z-index:1; }
.seite .wrap{ max-width:820px; }

.seite-krume{
  font-size:0.85rem; color:var(--ink-soft); margin:0 0 18px;
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
}
.seite-krume a{ color:var(--ink-soft); text-decoration:none; }
.seite-krume a:hover{ color:var(--ink); text-decoration:underline; }

.seite h1{
  font-size:clamp(1.9rem, 4.2vw, 2.9rem); line-height:1.15; margin:0 0 18px;
  letter-spacing:-0.01em;
}
.seite-vorspann{
  font-size:1.12rem; line-height:1.65; color:var(--ink-soft);
  margin:0 0 10px; max-width:64ch;
}

.seite h2{
  font-size:clamp(1.3rem, 2.6vw, 1.75rem); line-height:1.25;
  margin:56px 0 14px; letter-spacing:-0.01em;
}
.seite h3{ font-size:1.08rem; margin:30px 0 8px; }
.seite p{ margin:0 0 15px; line-height:1.72; max-width:68ch; color:var(--ink-soft); }
.seite p strong{ color:var(--ink); font-weight:600; }
.seite ul, .seite ol{ margin:0 0 18px; padding-left:22px; max-width:68ch; }
.seite li{ margin:0 0 8px; line-height:1.65; color:var(--ink-soft); }
.seite li strong{ color:var(--ink); font-weight:600; }
.seite a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.seite a:hover{ color:var(--lime); }

/* Tabellen sind auf einer Preisseite das ehrlichste Mittel: nebeneinander
   statt nacheinander. Auf dem Handy wuerden sie die Seite sprengen, deshalb
   scrollt der Rahmen und nicht das Dokument. */
.seite-tabelle{ overflow-x:auto; margin:0 0 22px; -webkit-overflow-scrolling:touch; }
.seite-tabelle table{ border-collapse:collapse; width:100%; min-width:460px; font-size:0.95rem; }
.seite-tabelle th, .seite-tabelle td{
  text-align:left; padding:11px 14px; border-bottom:1px solid var(--line);
  vertical-align:top;
}
.seite-tabelle th{ color:var(--ink); font-weight:600; white-space:nowrap; }
.seite-tabelle td{ color:var(--ink-soft); }
.seite-tabelle tr:last-child td{ border-bottom:none; }

/* Ein hervorgehobener Kasten fuer das, was der Leser mitnehmen soll. */
.seite-kasten{
  border:1px solid var(--line); border-radius:16px; padding:20px 22px;
  background:var(--card); margin:26px 0;
}
.seite-kasten p:last-child{ margin-bottom:0; }
.seite-kasten h3{ margin-top:0; }

.seite-schluss{
  margin-top:64px; padding-top:34px; border-top:1px solid var(--line);
}
.seite-schluss h2{ margin-top:0; }
.seite-schluss .btn{ margin-top:8px; }

@media (max-width:640px){
  .seite{ padding:96px 0 70px; }
  .seite h2{ margin:40px 0 12px; }
}


/* ================================================== Verweise im Fliesstext
   Ab dem 18.08.2026. Die Startseite ist und bleibt ein One Pager -- man
   scrollt, man klickt sich nicht durch ein Menue. Die dreizehn Unterseiten
   haengen deshalb NICHT in der Kopfleiste, sondern als kleine Zeile dort im
   Text, wo das Thema gerade vorkommt.

   Zwei Gruende, in dieser Reihenfolge:
   1. Fuer den Besucher: der Verweis steht da, wo die Frage aufkommt, nicht in
      einer Leiste, in der er ihn suchen muesste.
   2. Fuer Google: ein Verweis im Fliesstext zaehlt deutlich mehr als einer in
      der Fusszeile, weil er im Zusammenhang steht.

   Absichtlich klein und zurueckhaltend gesetzt: die Zeile soll die
   Choreografie des Aufmachers nicht stoeren. Wer sie nicht braucht,
   ueberliest sie. */
.mehr-dazu{
  margin:14px 0 0; font-size:0.88rem; line-height:1.6;
  color:var(--ink-soft);
}
.mehr-dazu a{
  color:var(--ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,0.28);
}
.mehr-dazu a:hover{ color:var(--lime); text-decoration-color:var(--lime); }
.mehr-dazu span[aria-hidden]{ opacity:0.35; }

/* Der Block am Ende der Fragen darf etwas mehr Luft und Breite haben. */
.mehr-dazu-block{
  margin-top:26px; padding-top:20px; border-top:1px solid var(--line);
  max-width:none;
}

/* Im Abschnitt "Was kostet mich das" steht die Zeile mittig unter der
   Ueberschrift, wie der Satz darueber. */
.section-head .mehr-dazu, .center .mehr-dazu{ text-align:center; }


/* ============================================ Klickbare Karten, Teil 34
   Ab dem 18.08.2026 fuehren mehrere Karten auf der Startseite zu einer
   Unterseite: die zwei Kaesten im Abschnitt "Warum", die Schritte 1, 3, 4, 5
   und die Paketkarten Stern und Komet.

   DER WICHTIGE TEIL IST DER SICHTBARE HINWEIS. Karte 1 der fuenf Schritte war
   vorher schon klickbar, und nichts sagte es -- gefunden hat das niemand. Eine
   Flaeche, die klickbar ist, ohne dass man es sieht, ist keine Bedienung,
   sondern ein Versteck. Deshalb steht auf jeder klickbaren Karte unten eine
   Zeile mit Text und Pfeil.

   Der Pfeil rueckt beim Ueberfahren um 3px nach rechts. Das ist die kleinste
   Bewegung, die als Antwort gelesen wird, und sie kostet keine Layoutrechnung
   (transform statt margin). */

.karte-hinweis{
  display:flex; align-items:center; gap:6px;
  margin-top:auto; padding-top:14px;
  font-size:0.84rem; font-weight:600;
  color:rgb(var(--zahl, 212 255 63));
}
.karte-pfeil{
  display:inline-block;
  transition:transform 0.18s ease;
}
a:hover .karte-pfeil, a:focus-visible .karte-pfeil{ transform:translateX(3px); }

/* Die Schrittkarten sind Flexspalten, margin-top:auto drueckt den Hinweis
   nach unten -- damit steht er auf allen Karten auf derselben Hoehe, egal wie
   viele Punkte darueber stehen. */
.schritt-ziel{ cursor:pointer; }

/* ---- Die zwei Kaesten im Abschnitt "Warum" ---- */
.warum-ziel{
  display:flex; flex-direction:column; height:100%;
  text-decoration:none; color:inherit;
}
.warum-block:has(.warum-ziel){ cursor:pointer; }
.warum-block:has(.warum-ziel):hover{
  border-color:rgba(255,255,255,0.22);
}
.warum-block:has(.warum-ziel):hover .warum-bild img{ transform:scale(1.03); }
.warum-bild img{ transition:transform 0.4s ease; }
.warum-ziel:focus-visible{
  outline:2px solid var(--lime); outline-offset:3px;
  border-radius:var(--radius-md);
}
/* Der Hinweis in diesen Kaesten ist WEISS, nicht lime.
   Direkt darueber steht der Abschlusssatz ("Vertrauen beginnt mit dem ersten
   Klick.") schon in Lime. Zwei limefarbene Zeilen uebereinander lesen sich wie
   eine Aussage in zwei Teilen, nicht wie Aussage plus Handlung -- der Verweis
   ging darin unter. Weiss mit Pfeil liest sich als das, was es ist. */
.warum-ziel .karte-hinweis{
  color:var(--ink);
  margin-top:14px; padding-top:14px;
  border-top:1px solid var(--line);
}
.warum-ziel .karte-pfeil{ color:var(--lime); }
.warum-block:has(.warum-ziel):hover .karte-hinweis{ color:var(--lime); }
/* Der Abschlusssatz in Lime stand vorher direkt ueber dem Hinweis und
   verdoppelte die Farbe. Etwas Abstand trennt die zwei Zeilen. */
.warum-ziel .warum-schluss{ margin-bottom:4px; }

/* ---- Paketkarten ---- */
.price-mehr{
  display:inline-flex; align-items:center; gap:6px;
  margin:6px 0 0; font-size:0.84rem; font-weight:600;
  color:var(--ink); text-decoration:underline;
  text-underline-offset:3px; text-decoration-color:rgba(255,255,255,0.3);
}
.price-mehr:hover{ color:var(--lime); text-decoration-color:var(--lime); }

/* Ohne :has() -- alte Browser bekommen keinen Zeigefinger und keinen
   Rahmenwechsel, der Verweis funktioniert trotzdem. Gleiches Muster wie beim
   uebrigen :has() Einsatz in dieser Datei. */
@supports not selector(:has(*)){
  .warum-ziel{ display:block; }
}

@media (max-width:640px){
  .karte-hinweis{ font-size:0.8rem; padding-top:12px; }
}


/* Der Gleichwertigkeitssatz unter der Paketueberschrift. Bewusst kleiner und
   ruhiger als der Satz darueber: er raeumt einen Irrtum aus, er wirbt nicht. */
.pakete-gleichwertig{
  margin:8px auto 0; max-width:52ch;
  font-size:0.9rem; line-height:1.6; color:var(--ink-soft);
}

/* ═══════════════════════════════ Preisbereich, Teil 36 ═══════════════════
   Der Rest des am 19.08.2026 neu gebauten Preisbereichs: Kartenaufbau mit
   ausgerichteten Schaltflaechen, der Aufklappbereich, das
   Zufriedenheitsversprechen und die Fussnote.

   Alles ohne fremde Server: keine Schrift, kein Symbol, keine Datei von
   ausserhalb. Dieser Abschnitt loest also keinen Einwilligungsbanner aus. */

/* --- Karte: alles unterhalb der Leistungen sitzt UNTEN ------------------- */
/* margin-bottom:auto an der Liste schiebt alles Folgende an den Fuss der
   Karte. Weil die Karten im Raster gleich hoch sind (align-items:stretch)
   und alle denselben unteren Innenabstand haben, endet die Schaltflaeche bei
   allen dreien auf derselben Hoehe -- auch bei Nova, das keinen Textlink hat. */
.price-features{ margin-bottom:auto; }
.price-knopf{ margin-top:16px; width:100%; text-align:center; }

/* Der Preis ist das groesste Element der Karte. */
.price-amount{ margin:6px 0 2px; }
.price-amount .price-now{
  font-family:'Space Grotesk','Grotesk Ersatz',system-ui,sans-serif; font-weight:700; letter-spacing:-0.02em;
  font-size:clamp(2.1rem, 7vw, 2.9rem); line-height:1.05; color:var(--ink);
}
.price-amount .price-je{ font-size:0.95rem; font-weight:600; color:var(--ink-soft); }
/* Nova hat keinen Betrag, sondern den Satz "Preis nach Umfang". Er soll
   dieselbe Rolle spielen, passt aber als Text nicht in dieselbe Groesse. */
.price-amount-text .price-now{ font-size:clamp(1.5rem, 4.6vw, 1.95rem); }

/* Die Bruttozeile: klein und grau, direkt unter dem Preis. */
.price-netto{
  margin:0 0 12px; font-size:0.8rem; line-height:1.5; color:var(--ink-soft);
}
.price-dazu{ margin:0 0 4px; font-size:0.86rem; line-height:1.55; color:var(--ink-soft); }
.price-dazu b{ color:var(--ink); font-weight:700; }
/* inline-block: sonst bricht "(1.059,10 € brutto)" mitten in der Klammer um
   und "brutto)" steht allein in der naechsten Zeile. */
.price-klein-netto{ opacity:0.7; display:inline-block; }

/* Der Textlink ist ein <button>: er fuehrt nirgendwohin, er klappt auf.
   Deshalb muessen die Knopfvorgaben des Browsers zurueckgesetzt werden. */
button.price-mehr{
  appearance:none; background:none; border:0; padding:0;
  font:inherit; cursor:pointer; text-align:left;
  display:inline-flex; align-items:center; gap:6px;
  margin:14px 0 0; font-size:0.86rem; font-weight:600;
  color:var(--ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,0.3);
}
button.price-mehr:hover{ color:var(--lime); text-decoration-color:var(--lime); }
button.price-mehr:focus-visible{ outline:2px solid var(--lime); outline-offset:3px; border-radius:6px; }

/* --- Aufklappbereich ----------------------------------------------------- */
.unterschied{
  max-width:1080px; margin:26px auto 0;
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--card); overflow:hidden;
}
.unterschied-kopf{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 22px; cursor:pointer; list-style:none;
  font-family:'Space Grotesk','Grotesk Ersatz',system-ui,sans-serif; font-weight:700; font-size:1.02rem; color:var(--ink);
}
.unterschied-kopf::-webkit-details-marker{ display:none; }
.unterschied-kopf:focus-visible{ outline:2px solid var(--lime); outline-offset:-2px; }
/* Ein gezeichneter Pfeil statt eines Zeichens aus einer Schrift: so sieht er
   auf jedem Geraet gleich aus und braucht keine fremde Symbolschrift. */
.unterschied-pfeil{
  flex:none; width:11px; height:11px; border-right:2px solid var(--ink-soft);
  border-bottom:2px solid var(--ink-soft); transform:rotate(45deg);
  transition:transform 0.2s ease; margin-top:-4px;
}
.unterschied[open] .unterschied-pfeil{ transform:rotate(-135deg); margin-top:3px; }
.unterschied-inhalt{ padding:2px 22px 24px; }
.unterschied-inhalt > p{ margin:0 0 12px; color:var(--ink-soft); line-height:1.7; max-width:70ch; }

.unterschied-paar{ display:grid; gap:18px; margin:22px 0 4px; }
@media (min-width:761px){ .unterschied-paar{ grid-template-columns:1fr 1fr; gap:26px; } }
.unterschied-block{
  border:1px solid var(--line); border-radius:14px; padding:18px 20px;
  background:var(--card-2);
}
.unterschied-titel{
  margin:0 0 10px; font-family:'Space Grotesk','Grotesk Ersatz',system-ui,sans-serif; font-weight:700;
  font-size:0.78rem; letter-spacing:0.09em; text-transform:uppercase;
  color:var(--lime);
}
.unterschied-block ul{ margin:0; padding-left:18px; }
.unterschied-block li{ margin:0 0 7px; color:var(--ink-soft); line-height:1.6; font-size:0.94rem; }

.unterschied-bild{
  margin:22px 0 0; padding:18px 20px;
  border-left:3px solid var(--lime); background:rgba(244,230,190,0.05);
  border-radius:0 12px 12px 0;
}
.unterschied-bild p{ margin:0 0 10px; color:var(--ink); line-height:1.7; }
.unterschied-bild p:last-child{ margin-bottom:0; }

.unterschied-schluss{
  margin:16px 0 0 !important; font-size:0.86rem; line-height:1.6;
  color:var(--ink-soft); opacity:0.85;
}

/* --- Zufriedenheitsversprechen ------------------------------------------- */
/* Das Wort "Garantie" kommt hier bewusst nicht vor: es ist rechtlich ein
   eigener Begriff (§ 443 BGB) mit eigenen Folgen. */
.vertrauen{
  max-width:980px; margin:38px auto 0; padding-top:30px;
  border-top:1px solid var(--line); text-align:left;
}
.vertrauen-titel{
  margin:0 0 16px; text-align:center;
  font-family:'Space Grotesk','Grotesk Ersatz',system-ui,sans-serif; font-weight:700; font-size:1.05rem; color:var(--ink);
}
.vertrauen-liste{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
@media (min-width:761px){ .vertrauen-liste{ grid-template-columns:1fr 1fr; gap:14px 26px; } }
.vertrauen-liste li{
  position:relative; padding-left:26px; line-height:1.65;
  color:var(--ink-soft); font-size:0.93rem;
}
/* Der Haken ist gezeichnet, nicht gesetzt: keine Symbolschrift von aussen. */
.vertrauen-liste li::before{
  content:""; position:absolute; left:2px; top:6px;
  width:6px; height:11px; border-right:2px solid var(--lime);
  border-bottom:2px solid var(--lime); transform:rotate(45deg);
}

/* --- Fussnote ------------------------------------------------------------ */
.preis-fussnote{
  max-width:980px; margin:30px auto 0; text-align:left;
}
.preis-fussnote p{
  margin:0 0 8px; font-size:0.78rem; line-height:1.6; color:var(--ink-soft);
  opacity:0.8;
}
.preis-fussnote p:last-child{ margin-bottom:0; }

@media (max-width:760px){
  .unterschied{ margin-inline:20px; }
  .unterschied-kopf{ padding:16px 18px; font-size:0.95rem; }
  .unterschied-inhalt{ padding:2px 18px 20px; }
  .vertrauen, .preis-fussnote{ padding-inline:4px; }
}

/* Der kleine zweite Verweis auf der Referenzkarte: die eingefrorene Kopie.
   Bewusst unauffaellig -- der Hauptweg fuehrt zur echten Kundenseite, dies
   ist der Nachweis, was WIR gebaut haben. */
.ref-kopie{
  display:inline-block; margin:10px 0 0;
  font-size:0.8rem; color:var(--ink-soft);
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,0.2);
}
.ref-kopie:hover{ color:var(--ink); text-decoration-color:var(--ink); }

/* Die Regeln fuer .nav-zeiten sind am 21.08.2026 entfallen, mit der Zeile
   selbst. Siehe den Kommentar in index.html an der Stelle, wo sie stand. */

/* --- Referenzseiten, ab 19.08.2026 -------------------------------------- */
.seite-krume-zurueck{ margin:0 0 22px !important; font-size:0.86rem; }
.referenz-bilder{ display:grid; gap:22px; margin:22px 0 26px; }
@media (min-width:761px){
  .referenz-bilder{ grid-template-columns:2fr 1fr; align-items:start; }
}
.referenz-bilder figure{ margin:0; }
.referenz-bilder img{
  width:100%; height:auto; display:block;
  border:1px solid var(--line); border-radius:14px;
  background:var(--card-2);
}
.referenz-bilder figcaption{
  margin:9px 0 0; font-size:0.82rem; line-height:1.55; color:var(--ink-soft);
}

/* ======================================================================== */
/* KI-Sichtbarkeit und Webseiten-Check, ab 21.08.2026                       */
/*                                                                          */
/* Zuerst das Handy, danach der grosse Schirm. Keine Karussells, keine       */
/* automatischen Bildwechsel, keine hochlaufenden Zaehler: die Zahlen auf    */
/* diesen Seiten sind Belege und keine Vorfuehrung.                         */
/* ======================================================================== */

/* Knoepfe innerhalb einer Textseite.
   .seite a setzt Unterstreichung und Textfarbe fuer JEDEN Verweis -- ein
   Knopf bekam dadurch einen Unterstrich und beim Ueberfahren gruene Schrift
   auf violettem Grund. Das betraf auch den vorhandenen Knopf am Seitenende. */
.seite a.btn{ text-decoration:none; }
.seite a.btn-primary, .seite a.btn-primary:hover{ color:var(--nacht); }
.seite a.btn-outline:hover{ color:var(--ink); }

/* --- Hervorgehobener Punkt in einer Paketkarte -------------------------- */
/* Genau EIN Punkt je Karte traegt das, sonst hebt sich nichts mehr ab.
   Welcher, steht in pakete.json unter leistungen_hervor. */
.price-features li.price-feature-hervor{
  flex-direction:column; gap:4px;
  margin:2px 0; padding:10px 12px;
  background:rgba(244,230,190,0.07);
  border:1px solid rgba(244,230,190,0.28);
  border-radius:12px;
  color:var(--ink);
}
/* Das Haekchen sitzt sonst ueber dem Text statt davor, weil die Karte hier
   eine Spalte ist und keine Zeile. */
.price-features li.price-feature-hervor::before{ display:none; }
.price-features li.price-feature-hervor > span{
  display:block; padding-left:22px; position:relative; font-weight:600;
}
.price-features li.price-feature-hervor > span::before{
  content:"✓"; position:absolute; left:0; top:0;
  color:var(--lime); font-weight:800;
}
.price-feature-mehr{
  align-self:flex-start; margin-left:22px;
  display:inline-flex; align-items:center; gap:5px;
  font-size:0.8rem; font-weight:700; color:var(--lime);
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:rgba(244,230,190,0.4);
}
.price-feature-mehr:hover{ text-decoration-color:var(--lime); }

/* --- Die einzelne Zeile unter den Paketkarten --------------------------- */
.preis-ki-zeile{
  margin:26px auto 0; max-width:60ch; text-align:center;
  font-size:0.95rem; line-height:1.6; color:var(--ink-soft);
}
.preis-ki-zeile a{
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
  color:var(--ink); font-weight:700;
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,0.3);
}
.preis-ki-zeile a:hover{ color:var(--lime); text-decoration-color:var(--lime); }
/* Auf der Preisseite steht dieselbe Zeile im Textfluss und nicht mittig. */
.seite .preis-ki-zeile{ text-align:left; margin-left:0; max-width:68ch; }

/* ============================================== KI-Sichtbarkeit ========= */

.geo-einstieg{
  margin:0 0 30px; padding:0 0 0 18px;
  border-left:3px solid var(--violet);
}
.seite .geo-einstieg p{ color:var(--ink); font-size:1.02rem; }
.seite .geo-einstieg p:last-child{ margin-bottom:0; font-weight:600; }

/* Die Belegzahlen. Gross, ruhig, Quelle klein darunter. */
.geo-zahlen{ display:grid; gap:16px; margin:26px 0 30px; }
@media (min-width:620px){ .geo-zahlen{ grid-template-columns:1fr 1fr; } }
.geo-zahl{
  padding:22px 22px 18px;
  background:var(--card); border:1px solid var(--line); border-radius:16px;
}
.geo-zahl-stark{
  background:linear-gradient(160deg, rgba(53,104,166,0.16), rgba(110,159,222,0.08));
  border-color:rgba(53,104,166,0.45);
}
.seite .geo-zahl-wert{
  font-family:'Space Grotesk','Grotesk Ersatz',system-ui,sans-serif;
  font-size:clamp(2.3rem, 9vw, 3.1rem); line-height:1; font-weight:700;
  letter-spacing:-0.03em; color:var(--ink); margin:0 0 10px; max-width:none;
}
.geo-zahl-pfeil{ opacity:0.45; font-size:0.72em; }
.seite .geo-zahl-text{
  margin:0 0 10px; font-size:0.94rem; line-height:1.5; color:var(--ink-soft);
  max-width:34ch;
}
.seite .geo-zahl-quelle, .seite .geo-quelle{
  margin:0; font-size:0.74rem; line-height:1.45; color:var(--ink-soft);
  opacity:0.72;
}
.seite .geo-quelle{ margin:-12px 0 24px; }

/* Der Kasten mit den Verbraucherzahlen. */
.geo-kasten{ background:var(--card-2); }
.seite .geo-kasten strong{ color:var(--lime); font-weight:700; }
.seite .geo-kasten .geo-quelle{ margin:10px 0 0; }

/* Kernaussagen. Sie fassen den Abschnitt in einem Satz zusammen -- genau die
   Form, die eine KI aus einer Seite herausziehen kann. */
.geo-kern{
  border-left:3px solid var(--lime);
  border-radius:0 16px 16px 0;
  background:rgba(244,230,190,0.05);
}
.seite .geo-kern p{ color:var(--ink); }

/* Wer was macht: drei Spalten, auf dem Handy untereinander. */
.geo-teilung{ display:grid; gap:14px; margin:22px 0 26px; }
@media (min-width:760px){ .geo-teilung{ grid-template-columns:repeat(3,1fr); } }
.geo-teil{
  padding:20px; background:var(--card);
  border:1px solid var(--line); border-radius:16px;
}
.seite .geo-teil-titel{
  margin:0 0 10px; font-family:'Space Grotesk','Grotesk Ersatz',system-ui,sans-serif;
  font-size:0.72rem; font-weight:700; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--lime);
}
.seite .geo-teil p{ margin:0; font-size:0.92rem; line-height:1.62; }

/* --- "Was wir nicht behaupten" ------------------------------------------ */
/* Eigene Flaeche ueber die volle Breite. Es ist das staerkste
   Vertrauenselement der Seite und soll nicht wie ein weiterer Absatz wirken. */
.geo-band{
  margin:44px 0; padding:38px 0 34px;
  background:var(--bg-soft);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.geo-band .wrap{ max-width:820px; }
.seite .geo-band h2{ margin-top:0; }
.seite .geo-band-vor{ margin-bottom:24px; }
.geo-nicht{
  margin:0 0 16px; padding:18px 20px;
  background:var(--card); border:1px solid var(--line);
  border-left:3px solid var(--pink); border-radius:0 14px 14px 0;
}
.geo-nicht:last-child{ margin-bottom:0; }
.seite .geo-nicht-satz{
  margin:0 0 10px; font-family:'Space Grotesk','Grotesk Ersatz',system-ui,sans-serif;
  font-size:1.02rem; font-weight:600; line-height:1.4;
  color:var(--ink); text-decoration:line-through;
  text-decoration-color:rgba(237,230,210,0.65); text-decoration-thickness:2px;
}
.seite .geo-nicht p:last-child{ margin-bottom:0; font-size:0.94rem; }

/* --- Die beiden Jahresprogramme ----------------------------------------- */
.geo-netto{
  font-size:0.8rem !important; line-height:1.55; opacity:0.8; margin-top:-12px;
}
.geo-programme{ display:grid; gap:18px; margin:24px 0 22px; }
/* Ohne align-items:start stehen beide Karten gleich hoch. Der Knopf sitzt
   ueber margin-top:auto immer unten, also auf gleicher Hoehe -- dieselbe
   Regel wie bei den Paketkarten. */
@media (min-width:820px){ .geo-programme{ grid-template-columns:1fr 1fr; } }
.geo-programm{
  padding:24px 22px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius-md);
  display:flex; flex-direction:column;
}
.geo-programm-kopf{
  display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:space-between; gap:6px 14px;
}
.seite .geo-programm-name{
  margin:0; font-family:'Space Grotesk','Grotesk Ersatz',system-ui,sans-serif;
  font-size:0.74rem; font-weight:700; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--ink-soft);
}
/* Der Preis ist das groesste Element der Karte, wie bei den Paketen. */
.seite .geo-programm-preis{
  margin:0; font-family:'Space Grotesk','Grotesk Ersatz',system-ui,sans-serif;
  font-size:clamp(1.8rem, 6vw, 2.3rem); line-height:1.05; font-weight:700;
  letter-spacing:-0.02em; color:var(--ink); max-width:none;
}
.seite .geo-programm-preis span{
  font-size:0.9rem; font-weight:600; color:var(--ink-soft); letter-spacing:0;
}
.seite .geo-programm-netto{
  margin:6px 0 16px; font-size:0.78rem; line-height:1.5; color:var(--ink-soft);
}
.seite .geo-programm-unter{
  margin:0 0 10px; font-size:0.95rem; font-weight:600; color:var(--ink);
}
.seite .geo-programm-warum{ margin:0 0 16px; font-size:0.9rem; line-height:1.62; }
.geo-programm-liste{
  list-style:none; padding:0 !important; margin:0 0 18px !important;
  display:flex; flex-direction:column; gap:10px; flex:1;
}
.seite .geo-programm-liste li{
  display:flex; gap:10px; align-items:flex-start;
  font-size:0.89rem; line-height:1.55; margin:0;
}
.seite .geo-programm-liste li::before{
  content:"✓"; color:var(--lime); font-weight:800; flex:none;
}
.seite .geo-programm-folge{
  margin:0 0 16px; padding-top:14px; border-top:1px solid var(--line);
  font-size:0.86rem; line-height:1.55;
}
.seite .geo-programm-folge b{ color:var(--ink); }
.geo-programm-knopf{ margin-top:auto; width:100%; text-align:center; }

/* Was NICHT enthalten ist. Sichtbar, nicht im Kleingedruckten. */
.geo-nicht-enthalten{
  margin:0 0 10px; padding:20px 22px;
  background:var(--card-2);
  border:1px dashed rgba(255,255,255,0.22); border-radius:16px;
}
.seite .geo-nicht-enthalten-titel{
  margin:0 0 8px; font-weight:700; color:var(--ink); font-size:1rem;
}
.seite .geo-nicht-enthalten p:last-child{ margin-bottom:0; font-size:0.93rem; }

/* --- Autor und Quellen -------------------------------------------------- */
.geo-autor{
  margin:44px 0 20px; padding:22px;
  background:var(--card); border:1px solid var(--line); border-radius:16px;
}
.seite .geo-autor-titel{
  margin:0 0 10px; font-family:'Space Grotesk','Grotesk Ersatz',system-ui,sans-serif;
  font-size:0.72rem; font-weight:700; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--ink-soft);
}
.seite .geo-autor p{ font-size:0.93rem; }
.seite .geo-autor-adresse{ margin:10px 0 4px; }
.seite .geo-autor-stand{ margin:0; font-size:0.78rem !important; opacity:0.7; }
.seite .geo-quellen{
  margin:0 0 10px; font-size:0.76rem; line-height:1.7; color:var(--ink-soft);
  opacity:0.75; max-width:none;
}

/* ================================================ Webseitencheck ======== */
/* Am 21.08.2026 neu gebaut. Vorher standen Formular und Erklaerkaesten
   nebeneinander, das Formular klebte links und liess darunter eine grosse
   leere Flaeche. Jetzt: alles mittig, eine einzige Zeile, und die Angaben zur
   Person kommen erst danach -- in einer Tafel, die alles andere abdeckt. */

.check{
  position:relative; z-index:1;
  margin:0; padding:64px 0 60px;
  background:
    radial-gradient(1100px 380px at 50% -60px, rgba(53,104,166,0.26), transparent 70%),
    var(--bg-soft);
  border-top:1px solid rgba(53,104,166,0.35);
  border-bottom:1px solid rgba(53,104,166,0.35);
}
.seite .check .check-wrap, .check .check-wrap{ max-width:1080px; }

/* --- Kopf --------------------------------------------------------------- */
.check-kopf{ text-align:center; margin:0 auto 30px; max-width:660px; }
.check-augenbraue{
  margin:0 0 12px !important; font-family:'Space Grotesk','Grotesk Ersatz',system-ui,sans-serif;
  font-size:0.7rem; font-weight:700; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--lime); max-width:none !important;
}
.check h2, .seite .check h2{
  margin:0 0 8px; font-size:clamp(2.1rem, 7vw, 3.2rem); line-height:1.05;
  font-weight:700; letter-spacing:-0.03em;
}
.check-schlagzeile, .seite .check-schlagzeile{
  margin:0 auto 14px !important; max-width:none !important;
  font-family:'Space Grotesk','Grotesk Ersatz',system-ui,sans-serif;
  font-size:clamp(1.05rem, 3.4vw, 1.35rem); line-height:1.3; font-weight:600;
  color:var(--lime);
}
.check-unterzeile, .seite .check-unterzeile{
  margin:0 auto !important; max-width:58ch !important;
  font-size:1rem; line-height:1.62; color:var(--ink-soft);
}

/* --- Die eine Zeile ----------------------------------------------------- */
/* Der Kasten soll leuchten, damit man draufdruecken WILL. Drei Schichten,
   von aussen nach innen:

     1. ein weicher, farbiger Schein hinter dem Kasten (::before, blur),
        der langsam heller und dunkler wird,
     2. ein Lichtpunkt, der einmal um den Rand wandert (::after) -- dieselbe
        Technik wie bei den Schrittkarten: ein Kegelverlauf, aus dem eine
        Maske die Mitte herausstanzt, sichtbar bleibt nur der eine Pixel Rand,
     3. der feste Rand selbst, der immer stehen bleibt.

   Der feste Rand ist wichtig: faellt die Bewegung aus -- weil ein Browser
   @property nicht kennt oder jemand Bewegung abgestellt hat --, sieht der
   Kasten immer noch aus wie ein Kasten und nicht wie ein Fehler. */
.check-huelle{
  position:relative;
  max-width:660px; margin:0 auto;
  padding:26px 24px 22px;
  background:var(--card);
  border:1px solid rgba(53,104,166,0.55);
  border-radius:var(--radius-lg);
  box-shadow:inset 0 0 0 1px rgba(244,230,190,.12),
             0 24px 60px -30px rgba(53,104,166,0.75);
}
.check-huelle::before{
  content:""; position:absolute; inset:-14px; z-index:-1;
  border-radius:calc(var(--radius-lg) + 12px);
  background:var(--grad);
  filter:blur(26px); opacity:0.34;
  animation:checkSchein 4.5s ease-in-out infinite;
}
@keyframes checkSchein{ 50%{ opacity:0.62; } }
.check-huelle::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit;
  pointer-events:none; padding:1px;
  background:conic-gradient(from var(--dreh),
    rgba(244,230,190,0) 0deg,
    rgba(244,230,190,0) 215deg,
    rgba(244,230,190,0.95) 275deg,
    rgba(244,230,190,0) 340deg,
    rgba(244,230,190,0) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
  animation:randLauf 7s linear infinite;
}
/* Ist die Tafel offen oder der Check abgeschickt, hoert das Leuchten auf --
   es soll zum Anfangen locken, nicht beim Ausfuellen blinken. */
.check-huelle[data-check-ruhig]::before{ animation:none; opacity:0.18; }
.check-huelle[data-check-ruhig]::after{ animation:none; }
@media (prefers-reduced-motion:reduce){
  .check-huelle::before{ animation:none; opacity:0.42; }
  .check-huelle::after{ animation:none; }
}
.check-eingang-schild{
  display:block; text-align:center; margin:0 0 10px;
  font-size:0.8rem; font-weight:700; color:var(--ink-soft);
}
/* Eingabe und Knopf in einer Zeile, auf dem Handy untereinander.
   min-width:0 am Feld: sonst erzwingt die Standardbreite eines <input> mehr
   Platz, als die Zeile hat, und der Knopf wird aus dem Kasten gedrueckt. */
.check-zeile{ display:flex; gap:10px; }
.check-zeile input{
  flex:1 1 auto; min-width:0;
  background:var(--card); border:1px solid var(--line); border-radius:999px;
  padding:16px 22px; color:var(--ink); font-size:1.02rem; font-family:inherit;
}
.check-zeile input::placeholder{ color:var(--ink-soft); opacity:0.5; }
.check-zeile input:focus-visible{ outline:2px solid var(--lime); outline-offset:2px; }
.check-weiter{ flex:none; padding:16px 30px; font:inherit; }
.check-weiter[disabled]{ opacity:0.5; cursor:default; transform:none; }
@media (max-width:560px){
  .check-zeile{ flex-direction:column; }
  .check-weiter{ width:100%; }
}
.check-fehler{
  margin:10px 0 0 !important; min-height:1.2em; text-align:center;
  font-size:0.85rem; line-height:1.5; color:#ff8ea8; max-width:none !important;
}
.check-fehler:empty{ min-height:0; margin:0 !important; }
.check-klein, .seite .check-klein{
  margin:14px 0 0 !important; text-align:center;
  font-size:0.78rem; line-height:1.55; color:var(--ink-soft); opacity:0.8;
  max-width:none !important;
}

/* --- Die Pruefung: erst ein Ring, dann ein Haken ------------------------- */
.check-pruefung{ text-align:center; padding:26px 0 4px; }
/* Die Befunde des echten Checks. Erscheinen einer nach dem anderen, waehrend
   die Pruefung laeuft -- oder, wenn sie schon durch ist, im Lesetempo. */
.check-befunde{
  list-style:none; margin:18px 0 0; padding:0;
  display:grid; gap:8px;
  max-height:min(46vh, 380px); overflow-y:auto;
  text-align:left; scroll-padding-block:12px;
}
.check-befund{
  display:grid; gap:2px;
  padding:10px 14px;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--line);
  border-left:3px solid var(--ink-soft);
  border-radius:10px;
  animation:befund .32s ease both;
}
@media (prefers-reduced-motion:reduce){ .check-befund{ animation:none; } }
@keyframes befund{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.check-befund[data-stand="gut"]{ border-left-color:var(--lime); }
.check-befund[data-stand="mittel"]{ border-left-color:#E8A24A; }
.check-befund[data-stand="schlecht"]{ border-left-color:var(--pink); }
.check-befund[data-stand="unbekannt"]{ border-left-color:var(--line); }

/* Noch nicht dran: sichtbar, aber zurueckgenommen. Man soll sehen, was kommt. */
.check-befund[data-stand="wartet"]{ opacity:0.42; border-left-color:var(--line); }
/* Gerade dran: der Balken links pulsiert. Das ist die einzige Bewegung hier
   -- der Rest steht, damit man lesen kann. */
.check-befund[data-stand="laeuft"]{
  border-left-color:var(--blue);
  background:rgba(110,159,222,0.07);
}
.check-befund[data-stand="laeuft"]::before{
  content:""; position:absolute; left:-3px; top:0; bottom:0; width:3px;
  background:var(--blue); animation:pruefpuls 1.1s ease-in-out infinite;
}
.check-befund{ position:relative; }
@keyframes pruefpuls{ 0%,100%{ opacity:1; } 50%{ opacity:0.25; } }
@media (prefers-reduced-motion:reduce){
  .check-befund[data-stand="laeuft"]::before{ animation:none; }
}
.check-befund b{
  font-family:'Space Grotesk','Grotesk Ersatz',system-ui,sans-serif;
  font-size:0.92rem; font-weight:600; color:var(--ink); letter-spacing:-0.005em;
}
.check-befund span{ font-size:0.84rem; line-height:1.45; color:var(--ink-soft); }

.check-ring{
  width:54px; height:54px; margin:0 auto; border-radius:50%;
  border:3px solid rgba(255,255,255,0.12); border-top-color:var(--violet);
  animation:checkDreht 0.85s linear infinite;
}
@keyframes checkDreht{ to{ transform:rotate(360deg); } }
.check-haken-zeichen{ display:none; }
.check-haken-zeichen svg{ width:54px; height:54px; margin:0 auto; display:block; }
.check-haken-zeichen circle{
  fill:none; stroke:var(--lime); stroke-width:2.5; opacity:0.4;
}
.check-haken-zeichen path{
  fill:none; stroke:var(--lime); stroke-width:4;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:48; stroke-dashoffset:48;
  animation:checkHaken 0.45s ease forwards;
}
@keyframes checkHaken{ to{ stroke-dashoffset:0; } }
[data-fertig] .check-ring{ display:none; }
[data-fertig] .check-haken-zeichen{ display:block; }
.check-pruef-text, .seite .check-pruef-text{
  margin:14px 0 0 !important; max-width:none !important;
  font-size:0.98rem; line-height:1.5; color:var(--ink); font-weight:600;
}
@media (prefers-reduced-motion:reduce){
  .check-ring{ animation:none; }
  .check-haken-zeichen path{ animation:none; stroke-dashoffset:0; }
}

/* --- Die Tafel ---------------------------------------------------------- */
/* Ein echtes <dialog>: Fokusfalle, Escape und der abgedunkelte Hintergrund
   kommen vom Browser. Sichtbar wird sie nur mit [open]. */
.check-tafel{
  border:0; padding:0; margin:0; max-width:none; max-height:none;
  width:100%; height:100%; background:transparent; color:inherit;
  overflow:auto; overscroll-behavior:contain;
}
.check-tafel[open]{ display:flex; align-items:center; justify-content:center; }
.check-tafel::backdrop{ background:rgba(6,5,10,0.86); }
@supports (backdrop-filter: blur(1px)){
  .check-tafel::backdrop{ backdrop-filter:blur(7px); }
}
.check-tafel-innen{
  position:relative; width:min(560px, 100%); margin:auto;
  padding:38px 32px 30px;
  background:
    radial-gradient(600px 240px at 50% -60px, rgba(53,104,166,0.3), transparent 70%),
    var(--card);
  border:1px solid rgba(53,104,166,0.5); border-radius:var(--radius-lg);
  box-shadow:0 40px 100px -30px rgba(0,0,0,0.8);
  animation:checkTafelAuf 0.28s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes checkTafelAuf{ from{ opacity:0; transform:translateY(18px) scale(0.97); } }
@media (prefers-reduced-motion:reduce){ .check-tafel-innen{ animation:none; } }
.check-tafel-zu{
  position:absolute; top:12px; right:14px;
  appearance:none; background:none; border:0; cursor:pointer;
  width:38px; height:38px; border-radius:50%; line-height:1;
  font-size:1.7rem; color:var(--ink-soft);
}
.check-tafel-zu:hover{ background:var(--card-2); color:var(--ink); }
.check-tafel-zu:focus-visible{ outline:2px solid var(--lime); outline-offset:2px; }

.check-tafel-kopf{ text-align:center; margin:0 0 24px; }
.check-tafel-haken svg{ width:56px; height:56px; margin:0 auto 14px; display:block; }
.check-tafel-haken circle{ fill:none; stroke:var(--lime); stroke-width:2.5; opacity:0.4; }
.check-tafel-haken path{
  fill:none; stroke:var(--lime); stroke-width:4;
  stroke-linecap:round; stroke-linejoin:round;
}
.check-tafel h3, .seite .check-tafel h3,
.check-danke h3, .seite .check-danke h3{
  margin:0 0 8px; font-size:clamp(1.3rem, 4.6vw, 1.65rem); line-height:1.25;
}
.check-tafel-adresse, .seite .check-tafel-adresse{
  margin:0 0 10px !important; max-width:none !important;
  font-family:'Space Grotesk','Grotesk Ersatz',system-ui,sans-serif; font-weight:600;
  font-size:0.95rem; color:var(--lime); word-break:break-all;
}
.check-tafel-kopf p, .seite .check-tafel-kopf p{
  margin:0 auto !important; max-width:40ch !important;
  font-size:0.94rem; line-height:1.6; color:var(--ink-soft);
}

.check-felder{ display:grid; gap:14px; }
.check-feld label{
  display:block; font-size:0.78rem; font-weight:700;
  color:var(--ink-soft); margin-bottom:6px;
}
.check-feld input{
  width:100%; background:var(--card-2); border:1px solid var(--line);
  border-radius:12px; padding:13px 15px;
  color:var(--ink); font-size:0.98rem; font-family:inherit;
}
.check-feld input:focus-visible{ outline:2px solid var(--lime); outline-offset:2px; }

.check-haken{
  display:flex; gap:11px; align-items:flex-start;
  margin:18px 0 0; padding:13px 15px;
  background:var(--card-2); border:1px solid var(--line); border-radius:12px;
  cursor:pointer;
}
.check-haken input{
  width:17px; height:17px; flex:none; margin-top:2px;
  accent-color:var(--violet); cursor:pointer;
}
.check-haken span{ font-size:0.8rem; line-height:1.55; color:var(--ink-soft); }
.check-haken:hover span{ color:var(--ink); }
.check-haken a{ color:var(--ink); text-underline-offset:3px; text-decoration:underline; }

.check-senden{ width:100%; margin-top:18px; }
.check-status{
  margin:12px 0 0 !important; font-size:0.88rem; text-align:center;
  min-height:1.2em; max-width:none !important;
}
.check-status.schlecht{ color:var(--terrakotta); }
.check-klein-tafel{ margin-top:10px !important; }

/* OHNE JavaScript ist ein <dialog> unsichtbar. Dann wird sie zu einem
   gewoehnlichen Abschnitt -- sonst waere das Formular nicht ausfuellbar.
   data-check-schrittweise setzt das Skript selbst, es steht nie im Markup. */
html:not(:has([data-check-schrittweise])) .check-tafel{
  display:block; position:static; width:auto; height:auto;
  margin:26px auto 0;
}
html:not(:has([data-check-schrittweise])) .check-tafel-innen{
  animation:none; width:auto;
}
html:not(:has([data-check-schrittweise])) .check-tafel-zu{ display:none; }
html:not(:has([data-check-schrittweise])) .check-weiter{ display:none; }
html:not(:has([data-check-schrittweise])) .check-tafel-haken{ display:none; }

/* --- Bestaetigung ------------------------------------------------------- */
.check-danke{ text-align:center; padding:14px 4px 8px; }
.check-danke .check-tafel-haken svg{ width:52px; height:52px; margin-bottom:12px; }
.check-danke p, .seite .check-danke p{
  margin:0 auto !important; max-width:46ch !important;
  font-size:0.95rem; line-height:1.65; color:var(--ink-soft);
}
.check-danke:focus-visible{ outline:2px solid var(--lime); outline-offset:6px; }

/* --- Was daneben stand, steht jetzt darunter ---------------------------- */
.check-neben{ display:grid; gap:18px; margin:40px auto 0; max-width:1000px; }
@media (min-width:820px){ .check-neben{ grid-template-columns:1fr 1fr; align-items:start; } }
.check-liste-kasten{
  padding:24px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius-md);
}
.check-neben h3, .seite .check-neben h3{
  margin:0 0 10px; font-size:1.12rem; line-height:1.3;
}
.check-liste-vor, .seite .check-liste-vor{
  margin:0 0 14px !important; font-size:0.88rem; color:var(--ink-soft);
  max-width:none !important;
}
.check-liste{
  list-style:none; padding:0 !important; margin:0 !important;
  display:flex; flex-direction:column; gap:11px;
}
.check-liste li, .seite .check-liste li{
  display:flex; gap:10px; align-items:flex-start; margin:0;
  font-size:0.89rem; line-height:1.55; color:var(--ink-soft);
}
.check-liste li::before{ content:"✓"; color:var(--lime); font-weight:800; flex:none; }
.check-mensch{
  padding:24px;
  background:linear-gradient(160deg, rgba(244,230,190,0.10), rgba(244,230,190,0.02));
  border:1px solid rgba(244,230,190,0.34); border-radius:var(--radius-md);
}
.check-mensch p, .seite .check-mensch p{
  margin:0 0 12px !important; max-width:none !important;
  font-size:0.9rem; line-height:1.62; color:var(--ink-soft);
}
.check-mensch-schluss, .seite .check-mensch-schluss{
  margin:0 !important; color:var(--ink) !important; font-weight:600;
}

@media (max-width:640px){
  .check{ padding:48px 0 44px; }

  /* Auf schmalen Geraeten kommt das Eingabefeld VOR die drei Schritte.

     Gemessen am 24.08.2026 auf /webseitencheck/: bei 390x844 begann das Feld
     bei 891 Pixeln, die Falte liegt bei 844 -- 47 Pixel darunter. Bei einem
     schmalen Android (360x800) waren es 148. Wer auf eine Anzeige klickt,
     sieht dann nichts zum Anklicken, und es sieht auch nicht abgeschnitten
     aus: die drei Schritte stehen vollstaendig da und nichts fordert zum
     Weiterscrollen auf.

     Die Schritte kuendigen den Anruf an -- deshalb standen sie oben. Sie
     duerfen aber darunter: die Ankuendigung traegt der Pflichthaken in der
     Tafel, genau dort, wo die Telefonnummer verlangt wird ("einverstanden,
     dass Jalveo sich per E Mail und Telefon bei mir meldet"). Vor der Nummer
     steht sie also weiterhin. Was oben stand, war Erklaerung, nicht der
     rechtliche Traeger.

     Nur bis 760 Pixel. Auf groesseren Schirmen passt beides ohne Scrollen,
     und dort ist die Reihenfolge Erklaerung-dann-Formular die bessere. */
  .check-wrap{ display:flex; flex-direction:column; }
  .check-kopf{ order:1; }
  .check-huelle{ order:2; }
  .check-ablauf{ order:3; margin-top:26px; }
  /* Der Bildblock ganz zuletzt. Ohne diese Zeile steht er mit dem Vorgabewert
     0 VOR allem anderen -- und er ist 1238 Pixel hoch. Beim ersten Versuch
     rutschte das Eingabefeld dadurch von 891 auf 1762 Pixel, also genau in die
     falsche Richtung. */
  .check-neben{ order:4; }
  .check-tafel-innen{ padding:32px 20px 24px; border-radius:var(--radius-md); }
}

/* Die Verweiszeile unter den beiden Kaesten in #warum, ab 21.08.2026. */
.warum-mehr{ text-align:center; margin-top:26px !important; }

/* --- Abbildungen im Check, ab 21.08.2026 -------------------------------- */
/* Zwei sind freigestellt (durchsichtiger Grund), eine hat ihren eigenen
   dunklen Grund. Deshalb bekommt nur die letzte einen Rahmen -- ein Rahmen
   um ein freigestelltes Motiv sieht aus wie ein vergessener Kasten. */
.check-bild{ margin:0 0 18px; }
.check-bild img{ width:100%; height:auto; display:block; border-radius:14px; }
.check-mensch .check-bild img{ border:1px solid rgba(255,255,255,0.08); }

.check-danke-gecko{ width:150px; margin:0 auto 4px; }
.check-danke-gecko img{ width:100%; height:auto; display:block; }

/* --- Landingpage: Kopf und Fuss auf das Noetigste ----------------------- */
/* Eine Landingpage hat genau ein Ziel. Jeder Menuepunkt daneben ist ein
   Ausweg. Der Schriftzug bleibt trotzdem stehen, damit jemand sieht, bei
   wem er ist -- er fuehrt nur nirgendwohin. */
.kopf-knapp{
  position:relative; z-index:5;
  border-bottom:1px solid var(--line);
  background:rgba(5,7,14,0.72);
}
@supports (backdrop-filter: blur(1px)){
  .kopf-knapp{ backdrop-filter:blur(10px); }
}
.kopf-knapp .nav{ justify-content:center; padding:16px 24px; }
.kopf-knapp .brand img{ height:30px; width:auto; }

.fuss-knapp{
  position:relative; z-index:1;
  margin-top:60px; padding:22px 0 26px;
  border-top:1px solid var(--line);
}
.fuss-knapp .wrap{
  display:flex; flex-wrap:wrap; gap:8px 22px;
  align-items:center; justify-content:center;
  font-size:0.78rem; color:var(--ink-soft);
}
.fuss-knapp-recht{ display:flex; gap:18px; flex-wrap:wrap; justify-content:center; }
.fuss-knapp a{ color:var(--ink-soft); text-decoration:none; }
.fuss-knapp a:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }

/* Ohne klebende Kopfleiste braucht der Seitenanfang weniger Vorlauf, und die
   Ueberschrift darf mittig stehen wie im Aufmacher. */
.seite-landung{ padding:44px 0 0; }
.seite-landung > .wrap:first-child{ max-width:820px; text-align:center; }
.seite-landung h1{
  font-size:clamp(2.2rem, 6.4vw, 3.6rem); line-height:1.05;
}
.seite-landung .seite-vorspann{
  margin-left:auto; margin-right:auto; max-width:60ch;
}
/* Auf einer Landingpage ist der Check die Seite und nicht ein Abschnitt
   darin -- also kein abgesetzter Streifen mit eigenen Raendern. */
.seite-landung .check{
  border:0; padding-top:34px;
  background:radial-gradient(1100px 380px at 50% -60px, rgba(53,104,166,0.26), transparent 70%);
}

/* --- Landingpage /webseitencheck/, ab 21.08.2026 ------------------------ */
.landung-block{ max-width:820px !important; padding-top:14px; }
.seite-landung h2{ text-align:center; }
.landung-punkte{ display:grid; gap:14px; margin:26px 0 34px; }
@media (min-width:720px){ .landung-punkte{ grid-template-columns:1fr 1fr; } }
.landung-punkt{
  padding:20px; background:var(--card);
  border:1px solid var(--line); border-radius:16px;
}
/* Der letzte Punkt steht allein in der zweiten Spalte -- ueber beide Spalten
   gezogen wirkt die Reihe abgeschlossen statt abgebrochen. */
@media (min-width:720px){ .landung-punkt:last-child{ grid-column:1 / -1; } }
.seite .landung-punkt-titel{
  margin:0 0 8px; font-family:'Space Grotesk','Grotesk Ersatz',system-ui,sans-serif;
  font-size:1rem; font-weight:600; color:var(--ink); line-height:1.35;
}
.seite .landung-punkt p{ margin:0; font-size:0.92rem; line-height:1.62; }

.landung-bild{ margin:0 0 34px; }
.landung-bild img{ width:100%; height:auto; display:block; }
.seite .landung-bild figcaption{
  margin:10px 0 0; text-align:center;
  font-size:0.82rem; line-height:1.55; color:var(--ink-soft);
}

.landung-schluss{
  padding:24px 26px; text-align:center;
  background:linear-gradient(160deg, rgba(244,230,190,0.10), rgba(244,230,190,0.02));
  border:1px solid rgba(244,230,190,0.34); border-radius:var(--radius-md);
}
.seite .landung-schluss-satz{
  margin:0 auto 10px !important; max-width:46ch !important;
  font-family:'Space Grotesk','Grotesk Ersatz',system-ui,sans-serif;
  font-size:1.1rem; line-height:1.35; font-weight:600; color:var(--ink);
}
.seite .landung-schluss p:last-child{
  margin:0 auto !important; max-width:52ch !important; font-size:0.92rem;
}

/* --- Die drei Schritte über dem Formular, ab 21.08.2026 ----------------- */
/* Der Anruf steht hier, nicht im Kleingedruckten: ein angekündigter Anruf
   wird angenommen, ein überraschender nicht. */
.check-ablauf{
  list-style:none; padding:0; margin:0 auto 26px; max-width:900px;
  display:grid; gap:12px; counter-reset:none;
}
@media (min-width:780px){ .check-ablauf{ grid-template-columns:repeat(3,1fr); gap:16px; } }
.check-ablauf-schritt{
  display:flex; gap:13px; align-items:flex-start; margin:0;
  padding:16px 18px; background:var(--card);
  border:1px solid var(--line); border-radius:14px;
}
.check-ablauf-nr{
  flex:none; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk','Grotesk Ersatz',system-ui,sans-serif;
  font-size:0.82rem; font-weight:700; color:var(--bg);
  background:var(--lime);
}
.check-ablauf-text{ display:block; }
.check-ablauf-text b{
  display:block; margin-bottom:3px; font-size:0.94rem;
  font-weight:600; color:var(--ink); line-height:1.35;
}
.check-ablauf-text span{
  display:block; font-size:0.85rem; line-height:1.55; color:var(--ink-soft);
}

/* Der eigene dunkle Grund des Bildes "mensch".
   ACHTUNG: dieser Wert ist in die Bilddatei EINGEBACKEN (rgb 5,4,13) und
   kann nicht per CSS geändert werden. Er ist hier hinterlegt, damit das Bild
   in seinem eigenen Grund sitzt statt im Seitengrund -- ändert jemand den
   Seitengrund, bleibt es dadurch ein gerahmtes Bild und wird nicht zu einem
   unerklärlichen dunklen Rechteck. Steht als Punkt 11 in OFFENE-PUNKTE.md. */
.check-mensch .check-bild img{ background:#05040d; }


/* ═══ Ruhe. Gesetzt am 02.09.2026, AUFTRAG-MONDLICHT.md Schritt 5 ═════════
 *
 * GEMESSEN, NICHT GESCHAETZT
 *
 * Bei Scrollhoehe 3500 liefen ZWOELF Dauerschleifen gleichzeitig im Bild --
 * die fuenf Schrittkarten steuerten allein zehn davon bei, je ein Atmen des
 * Symbols und ein Schein der Ziffer. Dazu wanderte auf jeder Karte ein Licht
 * am Rand entlang.
 *
 * Der Auftrag: "Alles, was ohne Zutun des Besuchers dauerhaft pulsiert, wird
 * langsamer oder still."
 *
 * WAS STILLSTEHT
 *
 * Alles rein Schmueckende. Das Atmen der Symbole, der Schein der Ziffern,
 * das Licht am Kartenrand, das Funkeln der drei Paketsymbole, das Schweben
 * der Wortmarke, der Schein am Check.
 *
 * WAS BLEIBT
 *
 * Der Lesebalken und der Ring waehrend der Pruefung: sie zeigen einen
 * Zustand an, das ist Information. Das Laufband unter der Kopfzeile: es
 * traegt Text. Die Drehung im Abschlussfeld mit 20 Sekunden: sie ist so
 * langsam, dass sie nicht als Bewegung auffaellt.
 *
 * WAS LANGSAMER WIRD
 *
 * Die Geckos. Sie sind der Charakter der Seite und sollen nicht verschwinden
 * -- aber vier zappelnde Tiere gleichzeitig sind keine Ruhe. Alle Dauern
 * verdoppelt: aus Zappeln wird Atmen.
 */

.schritt-karte::after,
.schritt-symbol,
.schritt-nr,
.paket-logo-stern,
.paket-logo-komet,
.paket-logo-nova,
.aufmacher-logo,
.float-chip,
.price-card.featured,
.check-huelle::before,
.check-huelle::after{
  animation: none;
}

/* Die Geckos atmen statt zu zappeln. */
.gecko-schwebt img{ animation-duration: 9.2s; }
.gecko-winkt img{ animation-duration: 6.4s; }
.gecko-zeigt img{ animation-duration: 6s; }
.gecko-sitzt img{ animation-duration: 8.4s; }
.gecko-prueft img{ animation-duration: 7.2s; }
.gecko-blinzelt .gecko-zwinkert{ animation-duration: 13s; }


/* ═══ Der Verlauf, zurueckgenommen ════════════════════════════════════════
 *
 * --grad stand an 16 Stellen. Der Auftrag: "Auf einer ruhigen Seite traegt
 * er an zwei oder drei."
 *
 * ER BLEIBT an genau zwei: der Verlaufsschrift im Aufmacher und dem Rand der
 * empfohlenen Paketkarte. Beides sind Stellen, an denen er etwas auszeichnet.
 *
 * DER HAUPTKNOPF WIRD FLAECHE, und das ist keine Geschmacksfrage.
 *
 * Gemessen am gemalten Bildpunkt: weisser Text auf dem Verlauf ergibt links
 * 4,74:1, in der Mitte 3,10:1 und rechts 1,73:1 -- der Verlauf endet in
 * --mond, und weiss auf Mond ist 1,26:1. Die Beschriftung war ueber die
 * rechte Haelfte des Knopfes praktisch unlesbar.
 *
 * Die Kontrasttabelle im Auftrag nennt "Nacht auf Mond (Knopftext) 15,99:1".
 * Genau das ist hier gesetzt: Mondflaeche, Text in Nachtschwarz.
 */

.btn-primary{
  background: var(--mond);
  color: var(--nacht);
}
.btn-primary:hover{ background: var(--mond-warm); color: var(--nacht); }

/* Flaechen mit weissem Text: --blau haelt 5,70:1, --blau-hell nur 2,74:1. */
.sticker.hot,
.sale-banner,
.price-tag,
.stimme-avatar,
.aichat-user,
.ba-after{ background: var(--blau); }

/* Schmuckpunkte ohne Text. */
.ticker-track span::before,
.eyebrow-chip::before{ background: var(--blau-hell); }

/* Balken. */
.vorspann-balken i,
.readbar span{ background: var(--blau-hell); }

.totop::before{ background: var(--blau); }
.check-huelle::before{ background: var(--tiefblau-2); }


/* ── DER WARME HOF ──────────────────────────────────────────────────
   Nachgetragen am 02.09.2026. "Um diese Mondlichtfarbe, so ein
   leichtes Gelb, kann man auf jeden Fall mit rein."

   Das Mondlicht war vorher nur hell. Jetzt leuchtet es auch: die
   hellen Flaechen bekommen einen warmen Schein nach aussen, statt
   hart an der Kante aufzuhoeren. Nur dort, wo wirklich Licht sitzt --
   der Hauptknopf und die Haken. Sonst waere es Kirmes.

   Der Grund bleibt kalt. Waerme braucht etwas, woran sie sich misst. */
:root{ --schein: 244,230,190; }

.btn-primary{
  box-shadow: 0 0 0 1px rgba(var(--schein),.20),
              0 10px 34px -14px rgba(var(--schein),.34);
}
.btn-primary:hover{
  box-shadow: 0 0 0 1px rgba(var(--schein),.34),
              0 12px 42px -14px rgba(var(--schein),.46);
}

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

/* ── KOPFZEILENHÖHE DER PAKETKARTEN ─────────────────────────────────
   Nachgetragen am 02.09.2026, als eigener Schritt freigegeben.

   Die Erklärzeile bricht je Karte und Breite verschieden um, und weil
   der Betrag direkt darunter steht, sass er dann verschieden hoch.
   GEMESSEN, nicht geschaetzt:

     Breite   Stern    Komet    Nova     Betraege standen
     1280px   2 Zeilen 2 Zeilen 1 Zeile  752,7 / 752,8 / 748,9
     1100px   2        2        1        752,8 / 753,0 / 737,5
      900px   2        3        2        738,3 / 758,2 / 739,0
      760px   1        1        1        gestapelt, kein Vergleich

   Der groesste Wert ist 3 Zeilen (Komet bei 900px, 59,1px bei einer
   Zeilenhoehe von 19,72px). Genau darauf ist die Mindesthoehe bemessen:
   3 × 1.45em = 59,16px. Das ist KEINE runde Zahl aus dem Gefuehl,
   sondern der gemessene Hoechstwert.

   Nur ab 900px: darunter stehen die Karten untereinander, dort waeren
   drei Zeilen Mindesthoehe pro Karte verschenkter Platz und die Frage
   nach einer gemeinsamen Linie stellt sich gar nicht.

   Wichtig: Das ist bestand SEIT LANGEM und nicht erst seit dem
   Nova-Preis. Bei 900px war Komet der Ausreisser, ganz ohne Nova. */
@media (min-width:900px){
  .price-erklaerung{ min-height: calc(3 * 1.45em); }
}

/* ── ZUM-INHALT-VERWEIS UND MENÜKNOPF ──────────────────────────────────────
   Die Klasse heisst .zum-inhalt und NICHT .sprungmarke: die gab es schon,
   als Ankerversatz mit visibility:hidden fuer #check und #kontakt. Mit dem
   gleichen Namen waeren zwei unsichtbare Anker zu sichtbaren Kaesten
   geworden -- und der Verweis selbst waere unfokussierbar geblieben.

   Nachgetragen am 02.09.2026, beides im Freigabelauf gemeldet:
   B5 (kein Verweis zum Inhalt) und B7 (kein Menü am Handy).

   Das Muster für den Knopf stammt aus dem Waldwelt-Umbau, dort steht es
   seit dem 28.08.2026. Übernommen statt neu erfunden; geändert sind nur
   die Farben (Mondlicht statt Sand), der Umbruchpunkt (940px statt 900,
   weil hier .navlinks bei 940 weicht) und die Antippflächen: 44 statt
   41 Pixel, damit sie über der Empfehlung liegen und nicht knapp darunter. */

.zum-inhalt{
  position:absolute; top:0; left:-9999px; z-index:200;
  background:var(--mond); color:var(--nacht);
  padding:12px 20px; border-radius:0 0 var(--radius-sm) 0;
  font-weight:700; text-decoration:none; font-size:0.95rem;
}
.zum-inhalt:focus{
  left:0;
  outline:3px solid var(--blau-hell); outline-offset:2px;
}
/* Der Aufmacher ist nur programmatisch fokussierbar, nicht in der
   Tabreihenfolge -- tabindex="-1" nimmt ihn dort ausdrücklich heraus. */
.aufmacher:focus{ outline:none; }
.aufmacher:focus-visible{ outline:3px solid var(--blau-hell); outline-offset:-3px; }

.menueknopf{ display:none; }

@media (max-width:940px){
  .nav{ position:relative; }

  /* Die Leiste wird zur Spalte und klappt unter dem Kopf auf. */
  .navlinks{
    display:none;
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; gap:0;
    margin-left:0; padding:6px 0;
    background:var(--nacht-weich);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-sm);
    z-index:60;
  }
  .navlinks[data-offen]{ display:flex; }
  .navlinks a{
    display:flex; align-items:center;
    min-height:44px; padding:0 24px;
    font-size:0.95rem; color:var(--ink-soft);
  }
  .navlinks a:hover,
  .navlinks a:focus-visible{ color:var(--ink); background:rgba(244,230,190,.06); }

  .menueknopf{
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; flex:none; padding:0;
    background:transparent; border:1px solid var(--line);
    border-radius:var(--radius-sm); cursor:pointer; color:var(--ink);
  }
  .menueknopf:focus-visible{ outline:3px solid var(--blau-hell); outline-offset:2px; }
  .menueknopf-striche{ display:grid; gap:4px; }
  .menueknopf-striche i{
    display:block; width:18px; height:2px; background:currentColor;
    border-radius:1px; transition:transform .18s ease, opacity .18s ease;
  }
  .menueknopf[aria-expanded="true"] .menueknopf-striche i:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .menueknopf[aria-expanded="true"] .menueknopf-striche i:nth-child(2){ opacity:0; }
  .menueknopf[aria-expanded="true"] .menueknopf-striche i:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
}

@media (max-width:940px) and (prefers-reduced-motion: reduce){
  .menueknopf-striche i{ transition:none; }
}

/* ── TITELBILD DER UNTERSEITEN ──────────────────────────────────────
   Seit 03.09.2026, Etappe 3. Ein System fuer alle Unterseiten, erzeugt von
   deploy/seiten-bauen.mjs aus dem Metadatum "titelbild". Hoechstens 820px
   breit, 16:9 mit object-fit cover, feste Flaeche ueber aspect-ratio, damit
   nichts springt, bevor das Bild da ist. Je Seite variiert NUR
   object-position, und das steht als Inline-Stil am <img>, nicht als Klasse.
   Diese Regeln MUESSEN im kritischen CSS liegen (alle drei Dateien neu
   bauen), sonst springt der Inhalt, sobald das grosse Stilblatt eintrifft --
   dieselbe Falle wie in Etappe 1b. */
.seite-titelbild{
  display:block; width:100%; max-width:820px; aspect-ratio:16/9;
  margin:26px 0 30px; overflow:hidden;
  border-radius:var(--radius-md); background:var(--tiefblau);
  border:1px solid var(--line);
}
.seite-titelbild img{ display:block; width:100%; height:100%; object-fit:cover; }
@media (max-width:640px){ .seite-titelbild{ margin:20px 0 24px; border-radius:var(--radius-sm); } }

/* Inhaltsbilder der Unterseiten (Etappe 3b): ein Bild in Spaltenbreite und
   eine Reihe aus drei Schrittbildern mit HTML-Beschriftung darunter. */
.seite-bild{ display:block; margin:26px 0 30px; overflow:hidden; border-radius:var(--radius-md); background:var(--tiefblau); border:1px solid var(--line); }
.seite-bild img{ display:block; width:100%; height:auto; }
.seite-schritte{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin:26px 0 30px; }
.seite-schritt{ margin:0; }
.seite-schritt picture{ display:block; overflow:hidden; aspect-ratio:3/2; border-radius:var(--radius-md); background:var(--tiefblau); border:1px solid var(--line); }
.seite-schritt img{ display:block; width:100%; height:100%; object-fit:cover; }
.seite-schritt figcaption{ margin-top:10px; font-size:.95rem; line-height:1.5; color:var(--silber); }
.seite-schritt figcaption strong{ display:block; color:var(--sternweiss); margin-bottom:2px; }
@media (max-width:700px){ .seite-schritte{ grid-template-columns:1fr; gap:16px; } .seite-bild{ margin:20px 0 24px; border-radius:var(--radius-sm); } }

/* Projektkarten auf /referenzen/ (Etappe 4a). Die Bildschirmfotos sind die
   echten Kundenseiten in IHREN Farben -- die ausdrueckliche Ausnahme im
   BRAND-LOCK. Deshalb kein Farbfilter, keine Tonung, nur ein Rahmen.
   object-position oben: die Aufnahmen sind ganze Seiten (720 x 1800), im
   Fenster steht der Kopf mit dem Aufmacher. */
.ref-projekte{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 20px; margin:26px 0 34px; }
.ref-projekt{ margin:0; }
.ref-projekt picture{ display:block; overflow:hidden; aspect-ratio:16/10; border-radius:var(--radius-md); background:var(--tiefblau); border:1px solid var(--line); }
.ref-projekt img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 0; }
.ref-projekt h3{ margin:14px 0 2px; }
.ref-projekt-fach{ margin:0 0 10px; color:var(--silber); font-size:.9rem; }
.ref-projekt-satz{ margin:0 0 10px; }
.ref-projekt-stand{ margin:0 0 10px; color:var(--silber); font-size:.88rem; }
.ref-projekt-wege{ margin:0; font-size:.92rem; }
@media (max-width:760px){ .ref-projekte{ grid-template-columns:1fr; gap:24px; margin:20px 0 28px; } .ref-projekt picture{ border-radius:var(--radius-sm); } }

/* Standbild der Raketenszene (Etappe 4b). Sichtbar genau dort, wo die
   Leinwand nichts zeigt: nach dem Notausgang szene-aus und bei reduzierter
   Bewegung. In beiden Faellen weicht die klebende Flaeche. */
.scene-standbild{ display:none; }
.scene-standbild img{ display:block; width:100%; height:auto; }
.scene-section.szene-aus .scene-standbild{ display:block; }
@media (prefers-reduced-motion:reduce){
  .scene-sticky{ display:none; }
  .scene-standbild{ display:block; }
}

/* Versuch vom 07.09.2026: der Kundenbereich-Knopf in der Kopfzeile.

   Bei reduzierter Bewegung und kaltem Zwischenspeicher zeigt die Startseite
   bei 390 Pixeln einen Sprung von 0,0945. Ohne Vorspann ist die Kopfzeile vom
   ersten Bild an sichtbar, und beim Wechsel von der Ersatzschrift auf Inter
   wird die Beschriftung 8 Pixel breiter: der Knopf wandert nach links, und
   die Zeile rueckt mit.

   Gemessen: 186 Pixel mit der Ersatzschrift, 193,6 mit Inter. Eine feste
   Mindestbreite von 194 haelt beide Zustaende auf derselben Breite. Es ist
   bewusst min-width und nicht width: waere die Beschriftung eines Tages
   laenger, waechst der Knopf weiter, statt den Text abzuschneiden. */
@media (min-width:375px) and (max-width:640px){
  .nav-rechts .btn{ min-width:194px; justify-content:center; }
}


/* Kopfzeile auf sehr schmalen Fenstern (07.09.2026).

   Gemessen bei 320 Pixeln: Marke 92, Kundenbereich-Knopf 194, Menueknopf 44.
   Alle drei stehen mit fester Breite nebeneinander und enden bei 354 -- 34
   Pixel ueber der Fensterkante. Sichtbar war es nicht, weil body
   overflow-x:hidden traegt: die Seite liess sich nicht schieben, der
   Menueknopf wurde einfach abgeschnitten. Ein Knopf, den man nicht mehr
   trifft, ist schlimmer als eine Seite, die wackelt.

   Dasselbe Muster wie am 24.08.2026 bei den Paketkarten (ff5a8d8): nicht
   verstecken, sondern die Masse so waehlen, dass es passt. Seitlicher Rand
   von 24 auf 16, Marke von 27 auf 22 Pixel Hoehe, Knopf enger und eine Spur
   kleiner. Zusammen 283 Pixel Inhalt in 288 Pixeln Platz.

   Der Haltepunkt liegt bei 374 und nicht bei 390: bei 390 sitzt die
   Mindestbreite des Knopfes, die den Schriftsprung verhindert. */
@media (max-width:374px){
  .nav{ padding-left:16px; padding-right:16px; }
  .brand img{ height:22px; }
  /* 168 ist die gemessene Breite des Knopfes in dieser Groesse. Sie steht
     hier aus demselben Grund wie die 194 weiter oben: ohne feste Breite
     wandert der Knopf beim Schriftwechsel, und die Zeile rueckt mit.
     Gemessen ohne diese Zeile: CLS 0,63 bei 360 Pixeln. */
  .nav-rechts .btn{ min-width:168px; padding-left:14px; padding-right:14px; font-size:0.8rem; }
}