/* ==================================================================
   jaeschke.flegel · Das Gestaltungssystem
   ==================================================================

   Neu gebaut am 15.10.2026. Simon: "Bau die Webseite genau so, wie du
   sie neu designt hast. Du musst dich an gar nichts halten, nur die
   Texte, die Seiten und die Themen sind wichtig. Tob dich aus."

   Also von vorn. Diese Datei ist die einzige Quelle für Farbe, Maß und
   Bewegung. Keine Farbe steht woanders.

   Aufbau
     1  Schriften
     2  Werte: Farben, Maße, Kurven
     3  Grundlagen und der lebende Grund
     4  Kopf: schwebende Inseln
     5  Knöpfe
     6  Abschnitte und Überschriften
     7  Der Hero: ein Browser, der sich selbst baut
     8  Laufband und Laufschrift
     9  Karten, Zitate, Punkte
    10  Der Regler: vorher / nachher
    11  Der Bilderreigen
    12  Ablauf: vier Schritte
    13  Preise
    14  Wir beide
    15  Wachstum
    16  Referenzen
    17  Fragen und Antworten
    18  Kontakt
    19  Fuß und großer Schriftzug
    20  Auftauchen
    21  Weniger Bewegung

   Grundsätze, die überall gelten:
     - Dunkel, weil Rot auf Dunkel leuchtet und auf Beige nur daliegt.
     - Zwei Rot: eins für Flächen, ein helleres für Schrift. Ein einziges
       kann nicht beides - entweder die weiße Schrift auf dem Knopf oder
       der rote Text auf dunklem Grund fällt durch.
     - Bewegung hat immer eine feste Dauer und ein Tempolimit. Wer schnell
       scrollt, soll sie trotzdem sehen.
     - Nichts bewegt sich dauerhaft ohne Grund. Was sich bewegt, antwortet
       auf Scrollen oder auf den Zeiger.
   ================================================================== */

/* ---------- 1 Schriften ---------- */

@font-face{font-family:'Bricolage Grotesque';
  src:url('fonts/bricolage-grotesque.woff2') format('woff2');
  font-weight:200 800;font-display:swap}
@font-face{font-family:'Newsreader';
  src:url('fonts/newsreader.woff2') format('woff2');
  font-weight:200 700;font-display:swap}
@font-face{font-family:'Newsreader';
  src:url('fonts/newsreader-italic.woff2') format('woff2');
  font-weight:200 700;font-style:italic;font-display:swap}
/* Die Schreibschrift von Ascendia - Simon mag sie, und sie ist das
   einzige Handgeschriebene auf einer sonst sehr gebauten Seite. */
@font-face{font-family:'Delius Swash Caps';
  src:url('fonts/delius-swash-caps.woff2') format('woff2');
  font-weight:400;font-display:swap}
@font-face{font-family:'DM Mono';
  src:url('fonts/dm-mono-400.woff2') format('woff2');
  font-weight:400;font-display:swap}
@font-face{font-family:'DM Mono';
  src:url('fonts/dm-mono-500.woff2') format('woff2');
  font-weight:500;font-display:swap}

/* ---------- 2 Werte ---------- */

:root{
  /* Grund. Ein sehr tiefes Blauschwarz. Nicht reines Schwarz - darauf
     wirkt leuchtende Farbe hart. Mit einem Hauch Blau darin hat das
     Licht etwas, worin es sich ausbreiten kann. */
  --nacht:#05060D;
  --nacht-2:#0A0D1C;

  /* Karten sind keine Flächen mehr, sondern Glas: ein Hauch Helligkeit,
     und was dahinter liegt, scheint unscharf durch. Deshalb stehen hier
     durchsichtige Werte und kein Vollton. */
  --karte:rgba(238,242,255,.055);
  --karte-2:rgba(238,242,255,.085);
  --papier:#EEF2FF;

  /* Schrift */
  --text:#EEF2FF;
  --leise:#AFB8D8;
  --leiser:#8B97C0;

  /* Die Leitfarbe. Die Namen stammen aus der Zeit, als sie rot war -
     sie heißen weiter so, weil sie an 240 Stellen stehen und ein
     Umbenennen nur Fehler einbringt. Gemeint ist: die Farbe, die führt.

     --rot        trägt Flächen. Darauf steht DUNKLE Schrift.
     --rot-text   ist Schrift auf dunklem Grund.
     Türkis kann beides nicht gleichzeitig: Weiß darauf sind 1,9:1,
     Blauschwarz darauf sind 10:1.

     Das Markenrot selbst bleibt - es steht im Logo, und nur dort. */
  --rot:#2CE0CE;
  --rot-tief:#1FC9B8;
  --rot-hoch:#5CEEDF;
  --rot-text:#36E4D2;
  --rot-zart:#A6F3EA;
  --rot-nebel:rgba(44,224,206,.14);

  /* Die zweite und dritte Stimme: Violett trägt die Verläufe, Koralle
     ist der seltene Akzent. Drei Farben, nicht dreißig. */
  --violett:#8B6CF8;
  --violett-zart:#C3B4FD;
  --koralle:#FF6B4A;
  --auf-leit:#04121A;

  --linie:rgba(238,242,255,.13);
  --linie-stark:rgba(238,242,255,.26);

  /* Maße */
  --rund:20px;
  --rund-klein:13px;
  --pad:clamp(20px,5vw,56px);
  --breit:1240px;
  --schmal:760px;

  /* Kurven. Eine zum Hereinkommen, eine zum Antworten, eine fürs Lange. */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-aus:cubic-bezier(.16,1,.3,1);
  --ease-weich:cubic-bezier(.4,0,.2,1);

  --display:'Bricolage Grotesque','Trebuchet MS','Segoe UI',system-ui,sans-serif;
  --lese:'Newsreader','Iowan Old Style',Georgia,'Times New Roman',serif;
  --fest:'DM Mono','SFMono-Regular',Consolas,'Liberation Mono',monospace;
  --hand:'Delius Swash Caps','Segoe Script','Bradley Hand',cursive;

  /* Die sicheren Ränder des Geräts. Als Variable, weil env() beim Prüfen
     nicht gesetzt werden kann. */
  --oben:env(safe-area-inset-top,0px);
  --unten:env(safe-area-inset-bottom,0px);

  color-scheme:dark;
}

/* ---------- 3 Grundlagen ---------- */

*,*::before,*::after{box-sizing:border-box}

html{scroll-padding-top:clamp(84px,9vh,112px);
  background:var(--nacht);
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  overflow-x:clip;
}
body{
  margin:0;
  background:var(--nacht);
  color:var(--text);
  font-family:var(--lese);
  font-size:clamp(16px,1.04vw,18px);
  line-height:1.68;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}

img,svg,video{display:block;max-width:100%}
/* Browser geben jedem `figure` 40 px Aussenabstand links und rechts.
   Gemessen: Zwischen den Bildern im Einblick lagen 82 statt 2 Pixel.
   Das war die "viel zu grosse Luecke". */
figure{margin:0}
a{color:var(--rot-text);text-decoration-color:rgba(54,228,210,.42);
  text-underline-offset:3px;transition:color .3s var(--ease)}
a:hover{color:var(--rot-zart)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible{
  outline:2.5px solid var(--rot-zart);outline-offset:3px;border-radius:6px}

.wrap{position:relative;z-index:2;max-width:var(--breit);margin:0 auto;padding:0 var(--pad)}
.wrap.schmal{max-width:var(--schmal)}
.mitte{text-align:center}
.mitte .lead{margin-inline:auto}

.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.spring{position:absolute;left:var(--pad);top:-80px;z-index:60;
  background:var(--rot);color:var(--auf-leit);padding:.8rem 1.2rem;border-radius:999px;
  font-family:var(--fest);font-size:.82rem;text-decoration:none;
  transition:top .25s var(--ease)}
.spring:focus{top:calc(var(--oben) + 12px)}

/* Der lebende Grund: drei Rotflächen, die sehr langsam gegeneinander
   wandern, plus Körnung. Man sieht es nicht, man spürt es. Beides liegt
   fest im Bild und fängt keine Klicks ab. */
.schleier,.koernung,.fleck{position:fixed;pointer-events:none}
.schleier{inset:-25%;z-index:0;
  background:
    radial-gradient(40% 32% at 20% 26%,rgba(44,224,206,.26),transparent 68%),
    radial-gradient(34% 28% at 80% 60%,rgba(139,108,248,.28),transparent 70%),
    /* Der warme Anteil bleibt, aber nur oben und schwaecher. */
    radial-gradient(26% 20% at 55% 8%,rgba(255,107,74,.08),transparent 72%);
  filter:blur(34px);
  animation:schleier 46s ease-in-out infinite alternate}
@keyframes schleier{
  0%  {transform:translate3d(-2%,-1%,0) scale(1)}
  50% {transform:translate3d(3%,2%,0)   scale(1.09)}
  100%{transform:translate3d(-1%,3%,0)  scale(1.03)}
}
/* z-index 35 statt 1: Das Korn muss UEBER dem Inhalt liegen, sonst
   bricht es die Stufen in den Verlaeufen der Karten nicht - und genau
   die sieht man als "Pixel". Unter Kopf (40) und Menue (39) bleibt es,
   damit es dort nichts truebt. */
/* Wieder UNTER dem Inhalt. Gemessen: ueber dem Inhalt stieg die Zeit
   je Bild von 13,9 auf 20,8 ms, mit eigener Ebene wurde es noch
   schlechter. Ein Korn ueber der ganzen Seite ist zu teuer.

   Die Stufen in den Verlaeufen werden stattdessen dort bekaempft, wo
   sie entstehen - siehe Abschnitt 37. */
.koernung{inset:0;z-index:1;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px}
/* Ein Lichtfleck folgt dem Zeiger. Nur mit Maus - auf dem Handy gibt es
   keinen Zeiger, und dort wäre es nur Rechenarbeit ohne Wirkung. */
.fleck{left:0;top:0;width:340px;height:340px;margin:-170px 0 0 -170px;z-index:1;opacity:0;
  background:radial-gradient(circle,rgba(44,224,206,.22),rgba(139,108,248,.08) 44%,transparent 70%);
  transition:opacity .7s var(--ease)}
body.mit-maus .fleck{opacity:1}

/* ---------- 3b Licht im Hintergrund ---------- */

/* Drei grosse, weiche Lichter, die langsam gegeneinander wandern. Sie
   liegen hinter allem und sind einzeln kaum zu sehen - zusammen nehmen
   sie dem Schwarz die Leere.

   Bewegt wird nur `transform`, nie Groesse oder Position: so bleibt die
   Rechnung auf der Grafikkarte. */
.lichter{position:fixed;inset:-20vmax;z-index:0;pointer-events:none;
  overflow:hidden;contain:strict}
/* Deutlich kräftiger als vorher. Bei .55 war von den Lichtern fast
   nichts zu sehen und die Seite wirkte einfach schwarz. Sie sind das
   Einzige, was hinter dem Glas liegt - wenn sie fehlen, hat das Glas
   nichts zu brechen. */
.lichter i{position:absolute;display:block;border-radius:50%;
  opacity:.8;will-change:transform}
.lichter i:nth-child(1){width:46vmax;height:46vmax;left:-6vmax;top:2vmax;
  background:radial-gradient(circle,rgba(44,224,206,.5) 0%,rgba(44,224,206,.2) 34%,transparent 72%);
  animation:wandern1 34s ease-in-out infinite alternate}
.lichter i:nth-child(2){width:38vmax;height:38vmax;right:-4vmax;top:26vmax;
  background:radial-gradient(circle,rgba(139,108,248,.5) 0%,rgba(139,108,248,.2) 34%,transparent 74%);
  animation:wandern2 46s ease-in-out infinite alternate}
/* VIOLETT statt Koralle - und das ist die Loesung fuer den "komischen
   roten Hintergrund", den Simon seit fuenf Runden unten sieht.

   Gemessen an sieben Scrollstellen, jede 24. Bildzeile des Fensters:
     bei   0 %   y820: 31,18,22   y844: 35,20,23
     bei  40 %   y820: 48,33,38   y844: 53,34,38
     bei  95 %   y820: 39,28,32   y844: 45,30,33
   Rot deutlich ueber Blau, immer an der unteren Fensterkante, bei
   jeder Scrollstellung. Es war nie ein Streifen unter der Seite und
   nie ein Fehler im Fuss: Es war dieses Licht, das fest im Bild steht
   und unten herausragt.

   Umfaerben statt verschieben: Ein Kreis, der nur woanders steht,
   steht irgendwann wieder falsch. Violett kann an keiner Kante warm
   aussehen. Das Warme der Seite kommt weiter aus dem Schleier - der
   sitzt oben und beruehrt die Unterkante nie. */
.lichter i:nth-child(3){width:52vmax;height:52vmax;left:22vmax;bottom:-12vmax;
  background:radial-gradient(circle,rgba(123,104,238,.32) 0%,rgba(139,108,248,.13) 34%,transparent 76%);
  animation:wandern3 58s ease-in-out infinite alternate}
@keyframes wandern1{to{transform:translate3d(14vmax,10vmax,0) scale(1.14)}}
@keyframes wandern2{to{transform:translate3d(-16vmax,-8vmax,0) scale(.88)}}
@keyframes wandern3{to{transform:translate3d(10vmax,-14vmax,0) scale(1.1)}}

/* Ein feines Gitter darueber. Es ist kaum zu sehen, aber ohne es wirkt
   die Flaeche wie ein Loch statt wie ein Raum. */
/* Deutlich blasser. Simon: "diese Bauplanstriche, diese
   Quadratestriche - die moechte ich blasser haben". Es soll den Raum
   andeuten, nicht ein Karopapier sein. */
.gitter{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.42;
  background-image:
    linear-gradient(to right,rgba(238,242,255,.022) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(238,242,255,.022) 1px,transparent 1px);
  background-size:clamp(44px,5vw,78px) clamp(44px,5vw,78px);
  -webkit-mask-image:radial-gradient(130% 90% at 50% 0,#000 20%,transparent 78%);
  mask-image:radial-gradient(130% 90% at 50% 0,#000 20%,transparent 78%)}

@media (prefers-reduced-motion:reduce){
  .lichter i{animation:none}
}

/* ---------- 4 Kopf ---------- */

/* Keine Leiste über die ganze Breite: drei schwebende Inseln, und der
   Grund läuft ungestört dahinter durch. */
.kopf{position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;gap:.7rem;
  padding:calc(var(--oben) + clamp(12px,1.6vw,20px)) var(--pad) clamp(12px,1.6vw,20px);
  pointer-events:none}
.kopf>*{pointer-events:auto}

.insel{display:flex;align-items:center;border-radius:999px;
  background:rgba(8,11,22,.9);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  box-shadow:inset 0 0 0 1px var(--linie),0 16px 36px -24px rgba(0,0,0,.95)}

.marke{gap:.55rem;padding:.44rem 1.05rem .44rem .48rem;text-decoration:none;
  font-family:var(--display);font-weight:800;font-size:1.02rem;
  letter-spacing:-.03em;color:var(--text);white-space:nowrap}
.marke:hover{color:var(--text)}
.marke img{width:30px;height:34px;object-fit:contain;flex:none}
.punkt{display:inline-block;width:.3em;height:.3em;border-radius:50%;
  background:var(--rot);margin:0 .05em}

.kopf nav{margin-left:auto;gap:.1rem;padding:.3rem;font-family:var(--fest);font-size:.78rem}
.kopf nav a{color:var(--leise);text-decoration:none;padding:.52rem .85rem;border-radius:999px;
  transition:color .3s var(--ease),background-color .3s var(--ease)}
.kopf nav a:hover{color:var(--text);background:rgba(238,242,255,.08)}
.kopf nav a[aria-current="page"]{color:var(--rot-text)}
@media (max-width:1040px){.kopf nav{display:none}}

/* Der Schub nach rechts haengt am Burger, nicht am Menue: Auf dem
   Handy ist das Menue ausgeblendet, und mit ihm verschwand der Schub -
   dann klebte der Burger am Logo. */
.burger{margin-left:auto;width:46px;height:46px;border:0;cursor:pointer;padding:0;
  display:grid;place-content:center;gap:5px;background:none}
.burger i{display:block;width:17px;height:2px;border-radius:2px;background:var(--text);
  transition:transform .4s var(--ease),opacity .3s var(--ease)}
body.menue-auf .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menue-auf .burger i:nth-child(2){opacity:0}
body.menue-auf .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Scrollbar und ohne Zentrier-Falle.

   `place-content:center` schiebt Inhalt, der hoeher ist als das Fenster,
   zur Haelfte ueber die Oberkante hinaus - und dieser Teil ist dann
   nicht mehr erreichbar, auch nicht durch Scrollen. Genau das ist auf
   dem iPad passiert: Der erste Punkt war abgeschnitten.

   Die Loesung ist ein innerer Kasten mit `margin:auto`: Passt alles,
   steht es mittig. Passt es nicht, faengt es oben an und man kann
   scrollen. */
.menue{position:fixed;inset:0;z-index:39;display:flex;
  overflow-y:auto;overscroll-behavior:contain;
  padding:calc(var(--oben) + clamp(78px,10vh,104px)) var(--pad)
          calc(var(--unten) + clamp(24px,4vh,40px));
  background:rgba(5,6,13,.9);backdrop-filter:blur(30px) saturate(1.3);
  -webkit-backdrop-filter:blur(30px) saturate(1.3);
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s}
.menue-innen{margin:auto;display:flex;flex-direction:column;align-items:center;
  gap:.3rem;text-align:center;width:100%}
body.menue-auf .menue{opacity:1;visibility:visible}
.menue a{font-family:var(--display);font-weight:700;
  font-size:clamp(1.5rem,4.8vw,2.5rem);letter-spacing:-.03em;
  color:var(--text);text-decoration:none;padding:.26rem 1.1rem;border-radius:16px;
  opacity:0;transform:translateY(16px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),color .3s var(--ease)}
.menue a:hover{color:var(--rot-text)}
body.menue-auf .menue a{opacity:1;transform:none;transition-delay:calc(var(--i,0) * 52ms + 90ms)}
.menue .menue-fuss{margin-top:1.8rem;font-family:var(--fest);font-size:.82rem;color:var(--leise)}
.menue .menue-fuss a{font-family:var(--fest);font-size:.82rem;padding:.2rem .5rem}

/* ---------- 5 Knöpfe ---------- */

.knopf{position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:.5rem;overflow:hidden;cursor:pointer;border:0;text-decoration:none;
  font-family:var(--fest);font-size:.84rem;font-weight:500;letter-spacing:.02em;
  padding:1rem 1.65rem;border-radius:999px;
  background:var(--karte);color:var(--text);
  backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:inset 0 0 0 1px var(--linie);
  transition:transform .4s var(--ease),background-color .4s var(--ease),
             box-shadow .4s var(--ease),color .3s var(--ease)}
.knopf:hover{color:var(--text);background:rgba(238,242,255,.13);transform:translateY(-2px);
  box-shadow:inset 0 0 0 1px var(--linie-stark)}
.knopf svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Der volle Knopf leuchtet: ein Verlauf von Türkis nach Violett, und
   die Schrift darauf ist dunkel. Helle Schrift auf Türkis wären 1,9:1
   - unlesbar, egal wie schön es aussieht. */
.knopf.voll{background:linear-gradient(100deg,var(--rot),#7FE6DE 52%,var(--violett));
  color:var(--auf-leit);font-weight:600;
  box-shadow:0 16px 40px -16px rgba(44,224,206,.75)}
.knopf.voll:hover{color:var(--auf-leit);
  box-shadow:0 24px 54px -18px rgba(44,224,206,1)}
/* Ein Lichtstreifen läuft alle sechs Sekunden einmal darüber. */
.knopf.voll::after{content:"";position:absolute;inset:-60%;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.3) 50%,transparent 58%);
  animation:glanz 6s ease-in-out infinite;pointer-events:none}
@keyframes glanz{0%,72%{transform:translateX(-130%)}100%{transform:translateX(130%)}}

.knopf.hell{background:var(--papier);color:#0B1020;box-shadow:none;backdrop-filter:none}
.knopf.hell:hover{background:#fff;color:#0B1020}
.knopf.klein{padding:.85rem 1.35rem;font-size:.82rem;color:var(--text)}
.knopf.klein:hover{color:var(--text)}

.knoepfe{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:clamp(26px,3vw,38px)}
.mitte .knoepfe,.hero .knoepfe{justify-content:center}

/* ---------- 6 Abschnitte ---------- */

section{position:relative;z-index:2;padding:clamp(52px,5.6vw,84px) 0}
section.eng{padding:clamp(38px,4vw,58px) 0}

/* Der Einstieg eines Abschnitts: auf breiten Schirmen steht die
   Einleitung neben der Ueberschrift statt darunter. Sonst bleibt rechts
   die halbe Zeile leer, und der Block wird unnoetig hoch. */
.einstieg{display:grid;gap:.2rem}
.einstieg h2{margin:0}
.einstieg .lead{margin:.9rem 0 0}
.einstieg .lead+.lead{margin-top:.8rem}
@media (min-width:900px){
  .einstieg{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:clamp(32px,4.4vw,72px);align-items:end}
  .einstieg .kicker{grid-column:1;grid-row:1;align-self:end}
  .einstieg h2{grid-column:1;grid-row:2}
  .einstieg .lead{grid-column:2;grid-row:2;margin:0;max-width:46ch;align-self:end}
  .einstieg .lead~.lead{grid-row:3;align-self:start;margin-top:.9rem}

  /* Ausnahme: Im Kontaktabschnitt steht der Einstieg in einer halben
     Spalte. Zwei Haelften davon sind je gut 230 px breit, und eine
     66-px-Ueberschrift bricht darin an jeder Silbe - sie laeuft dann
     ueber den Vorspann daneben. Hier bleibt eine Spalte. */
  #kontakt .einstieg{grid-template-columns:minmax(0,1fr)}
  #kontakt .einstieg .kicker,
  #kontakt .einstieg h2,
  #kontakt .einstieg .lead{grid-column:1;grid-row:auto}
  #kontakt .einstieg .lead{margin:clamp(14px,1.8vw,22px) 0 0;max-width:52ch}
}

.kicker{display:inline-flex;align-items:center;gap:.6rem;margin:0 0 1.1rem;
  font-family:var(--fest);font-size:.73rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--rot-text)}
.kicker::before{content:"";width:22px;height:1px;background:var(--rot);flex:none}
.mitte .kicker{justify-content:center}

h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.035em;
  line-height:1.03;margin:0 0 1rem;text-wrap:balance}
h1{font-size:clamp(2.5rem,7.4vw,5.6rem);letter-spacing:-.045em}
h2{font-size:clamp(1.95rem,4.6vw,3.3rem)}
h3{font-size:clamp(1.1rem,2vw,1.35rem);font-weight:700;letter-spacing:-.02em;line-height:1.2}
h2 .dot,h1 .dot{color:var(--rot)}

p{margin:0 0 1.05rem;max-width:68ch}
.lead{font-size:1.08em;color:var(--leise);max-width:60ch}
.klein{font-family:var(--fest);font-size:.78rem;letter-spacing:.02em;color:var(--leiser)}

/* ---------- 7 Der Hero ---------- */

/* Ein Browserfenster, das sich beim Scrollen selbst baut: erst Linien,
   dann Kästen, dann Farbe, dann die fertige Seite. Alles gezeichnet,
   kein Film - deshalb gestochen scharf auf jedem Bildschirm und ein paar
   Kilobyte statt vier Megabyte.

   Die Bühne bleibt stehen, während der Weg darunter abgescrollt wird. */
/* 200vh statt 360vh. Der Film ist derselbe, der Weg dorthin ist
   kuerzer - auf dem iPad waren 360vh spuerbar zu viel Wischerei. */
/* 260vh. Bei 200 war der Uebergang vom Titel zum Fenster zu knapp
   ("viel zu schneller"), bei 360 war der Weg zu lang. Dazwischen
   liegt die Mitte - und die Geschmeidigkeit kommt ohnehin aus der
   Kurve, nicht aus der Laenge. */
/* Etwas laenger, damit das fertige Handy noch eine Weile steht -
   sonst bleibt keine Zeit, es anzufassen. */
/* Laenger: Simon: "Man ist mit zwei Scrollen gefuehlt schon fertig,
   und der Uebergang zur Seite ist richtig abrupt." 330 -> 460 vh am
   Rechner, 230 -> 330 vh am Handy. */
.hero{padding:0;height:var(--hero-weg,460vh);position:relative;z-index:2}
@media (max-width:760px){.hero{--hero-weg:330vh}}
@media (max-height:620px) and (orientation:landscape){.hero{--hero-weg:200vh}}

/* Flache Schirme: alles eine Spur kleiner, damit der Einstieg gar nicht
   erst gegen den unteren Rand draengt. */
@media (max-height:760px){
  .hero-innen{gap:clamp(12px,1.6vw,20px)}
  .hero h1{font-size:clamp(1.9rem,4.6vw,3.2rem)}
  .hero .lead{font-size:.98rem;max-width:48ch}
  .hero-zahlen{gap:clamp(14px,3vw,38px)}
}
/* Sehr flache Schirme (iPhone SE, kleine Android-Geraete): Gemessen
   waren dort 533 Pixel Inhalt bei 522 Pixel Platz - also lag oben
   etwas unter der Kopfzeile und unten der Hinweis im Text. Hier wird
   alles so weit gestrafft, dass es ohne Ueberschneidung passt. */
@media (max-height:720px){
  .hero-innen{gap:9px}
  .hero h1{font-size:clamp(1.62rem,6.6vw,2.1rem);line-height:1.04}
  .hero .lead{font-size:.88rem;line-height:1.5;max-width:40ch}
  .hero-schild{font-size:.64rem;padding:.3rem .72rem}
  .hero .knopf{padding:.76rem 1.3rem;font-size:.78rem}
  .hero .knoepfe{gap:.5rem;margin-top:4px}
  .hero-zahlen{gap:10px 14px;margin-top:2px}
  .hero-zahlen b{font-size:1.24rem}
  .hero-zahlen span{font-size:.58rem}
  .hero-wink{font-size:.72rem}
  .hero-wink span{height:22px}
}
/* Unten bleibt ein Band frei: dort steht der Hinweis zum Scrollen.
   Ohne dieses Band lag er auf den Zahlen ("14 Tage") - zwei Texte
   uebereinander, beide unleserlich. */
/* Sichere Mitte statt `place-items:center`.

   `center` schiebt Inhalt, der hoeher ist als der Kasten, zur Haelfte
   oben hinaus - und dort ist er weg. Auf dem Handy war deshalb oben
   etwas abgeschnitten und unten lag der Text auf dem Hinweis.

   Mit `margin:auto` am inneren Kasten passiert genau das Richtige:
   ist Platz, steht er mittig; ist keiner, faengt er oben an. */
.hero-buehne{position:sticky;top:0;height:100svh;min-height:520px;
  display:flex;flex-direction:column;align-items:center;overflow:hidden;
  /* Oben so viel frei wie die Kopf-Inseln hoch sind, unten das Band
     fuer den Hinweis. Ohne das obere Mass rutschte auf kleinen Handys
     das Schild "In zwei Wochen online" unter die Kopfzeile. */
  padding-top:calc(var(--oben) + clamp(66px,9vh,96px));
  padding-bottom:clamp(58px,8vh,88px)}
.hero-innen{position:relative;z-index:2;width:100%;max-width:var(--breit);
  margin:auto 0;padding:0 var(--pad);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:clamp(18px,2.2vw,28px)}

.hero-schild{display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--fest);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rot-zart);padding:.44rem .95rem;border-radius:999px;
  background:var(--rot-nebel);box-shadow:inset 0 0 0 1px rgba(166,243,234,.26)}
.hero-schild i{width:6px;height:6px;border-radius:50%;background:var(--rot);
  animation:pochen 2.6s ease-in-out infinite}
@keyframes pochen{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.78)}}

.hero-innen{
  opacity:calc(1 - var(--weg,0));
  transform:translate3d(0,calc(var(--weg,0) * -46px),0) scale(calc(1 - var(--weg,0) * .07));
  will-change:transform,opacity}
/* `hero-weg`, nicht `weg`: `.weg` sind die Kontaktkaerchen unten, und
   die Glas-Regeln im Feinschliff haben damit versehentlich die ganze
   Buehne zur Scheibe gemacht - das war die "glasige Box" um das
   Hero-Fenster. */
.hero-buehne.hero-weg .hero-innen{pointer-events:none}
.hero h1{margin:0;max-width:15ch}
/* Jedes Wort kommt einzeln herein. Das ist der Unterschied zwischen
   "Text erscheint" und "ein Satz baut sich auf". */
.hero h1 .wort{display:inline-block;opacity:0;transform:translateY(.46em) rotate(1.6deg);
  animation:wortRein .9s var(--ease-aus) forwards;animation-delay:calc(var(--i) * 78ms)}
@keyframes wortRein{to{opacity:1;transform:none}}
.hero .lead{max-width:54ch;margin:0}

.hero-zahlen{display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(20px,4.4vw,64px);margin-top:clamp(10px,1.6vw,20px)}
@media (max-width:620px){
  .hero-zahlen{display:grid;grid-template-columns:1fr 1fr;
    gap:clamp(16px,4vw,26px) clamp(10px,3vw,20px);width:100%;max-width:330px;margin-inline:auto}
}
.hero-zahlen b{display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(1.6rem,3.4vw,2.5rem);letter-spacing:-.03em;line-height:1}
.hero-zahlen span{display:block;margin-top:.42rem;font-family:var(--fest);
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--leiser)}

/* Das Fenster, das sich baut. */
.bau{position:absolute;inset:0;z-index:1;display:grid;place-items:center;
  pointer-events:none;perspective:1500px}
/* Auf dem Handy darf das Fenster fast die ganze Breite nehmen - sonst
   steht eine kleine Kachel in viel Leere. */
.bau-gruppe{position:relative;width:min(92vw,880px);
  opacity:var(--bau-da,0);
  transform:rotateX(var(--kipp,12deg)) scale(var(--zoom,.84));
  transform-origin:50% 56%;
  will-change:transform,opacity}
/* Kein Kasten, keine Flaeche, kein Schatten. Die Zeichnung steht direkt
   auf dem Seitenhintergrund.

   Warum: Der Schatten war 140 px gross, die Buehne schneidet mit
   `overflow:hidden` an ihrer Unterkante ab - das ergab eine graue
   Flaeche mit einem harten Schnitt, der ueber dem Schlagwortband zu
   sehen war. Ohne Schatten gibt es nichts mehr abzuschneiden. */
.bau-rahmen{width:100%;aspect-ratio:16/10;position:relative;
  border-radius:clamp(12px,1.4vw,20px);overflow:hidden;
  background:none;box-shadow:none}
.bau-leiste{position:absolute;top:0;left:0;right:0;height:clamp(22px,2.6vw,34px);
  background:none;border-bottom:1px solid var(--linie);
  display:flex;align-items:center;gap:6px;padding:0 clamp(10px,1.2vw,16px)}
.bau-leiste i{width:8px;height:8px;border-radius:50%;background:rgba(238,242,255,.16);flex:none}
.bau-leiste .adresse{margin-left:10px;height:11px;flex:1;max-width:260px;border-radius:999px;
  background:rgba(238,242,255,.07)}
.bau-flaeche{position:absolute;inset:clamp(22px,2.6vw,34px) 0 0;overflow:hidden}
.bau-flaeche svg{width:100%;height:100%;display:block}
/* Zwei Zeichnungen uebereinander, sichtbar ist immer nur eine: breit auf
   dem Rechner, hochkant auf dem Handy. Beide erben dieselben Werte vom
   Elternteil, laufen also im selben Takt. */
.bau-flaeche .bau-hoch{display:none}
@media (max-width:760px){
  .bau-flaeche .bau-breit{display:none}
  .bau-flaeche .bau-hoch{display:block}
}

/* Phase 1: die Linien zeichnen sich. */
.bau-linie{fill:none;stroke:var(--rot-text);stroke-width:1.1;
  stroke-dasharray:var(--len,600);stroke-dashoffset:calc(var(--len,600) * (1 - var(--zeichnen,0)));
  opacity:calc(.9 - var(--fuellen,0) * .9)}
/* Phase 2: graue Kästen wachsen. */
.bau-kasten{fill:rgba(238,242,255,.08);
  opacity:calc(var(--fuellen,0) * (1 - var(--farbe,0)));
  transform-origin:center;
  transform:scaleY(var(--fuellen,0))}
/* Phase 3: Farbe und Inhalt. */
.bau-inhalt{opacity:var(--farbe,0)}
.bau-inhalt .flaeche-1{fill:#1E1A19}
.bau-inhalt .flaeche-2{fill:rgba(238,242,255,.055)}
.bau-inhalt .akzent{fill:var(--rot)}
.bau-inhalt .hell{fill:rgba(238,242,255,.9)}
.bau-inhalt .matt{fill:rgba(238,242,255,.34)}
.bau-inhalt .zart{fill:rgba(166,243,234,.5)}

/* Das Handy schiebt sich daneben, sobald die Seite steht. */
/* Groesser: Simon: "Da ist noch sehr viel Platz." */
@media (min-width:760px){.bau-gruppe{width:min(84vw,1120px)}}
/* 19 statt 13 Prozent: Simon: "Beim PC kannst du das Handy im
   Hero-Video groesser machen." */
.bau-handy{position:absolute;right:-6.5%;bottom:-11%;width:clamp(110px,21%,262px);
  aspect-ratio:9/19;border-radius:clamp(8px,1vw,14px);overflow:hidden;
  background:linear-gradient(160deg,#211B19,#120E0D);
  box-shadow:0 30px 60px -28px rgba(0,0,0,1),inset 0 0 0 1px var(--linie-stark);
  opacity:var(--handy,0);
  transform:translate3d(calc((1 - var(--handy,0)) * 40px),0,0) rotate(calc((1 - var(--handy,0)) * 6deg))}
.bau-handy svg{width:100%;height:100%}

/* Der Hinweis zum Scrollen, der verschwindet, sobald man scrollt. */
.hero-wink{position:absolute;left:50%;bottom:calc(var(--unten) + clamp(14px,2vw,24px));
  transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:.55rem;
  font-family:var(--fest);font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--leise);opacity:var(--wink,1);transition:opacity .5s var(--ease);
  pointer-events:none;
  /* Kein Kasten darunter. Den Platz haelt die Buehne mit ihrer
     Innenkante frei - ein zweiter Grund waere ein Kasten um zwei
     Woerter, und davon hat die Seite genug. */
  padding:.3rem .2rem;text-shadow:0 2px 14px rgba(5,6,13,.9)}
.hero-wink span{display:block;width:2px;height:32px;border-radius:2px;
  background:linear-gradient(var(--rot),transparent);
  animation:winkLauf 2.2s ease-in-out infinite}
@keyframes winkLauf{0%{transform:scaleY(0);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:top}
  50.1%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}}

@media (max-width:760px){
  /* Hochkant und so hoch wie moeglich: ein 16:10-Fenster ist auf dem
     Handy 340x212 Pixel gross und steht in einer 850 Pixel hohen Buehne.
     Das war die "Box", die Simon gestoert hat - nicht der Rahmen, die
     Leere drumherum. */
  .bau-gruppe{width:min(88vw,420px)}
  .bau-rahmen{width:100%;aspect-ratio:100/164;border-radius:clamp(16px,4vw,26px)}
  .bau-leiste{height:clamp(20px,5vw,28px)}
  .bau-flaeche{inset:clamp(20px,5vw,28px) 0 0}
  /* Das Handy daneben waere neben einem Handy doppelt gemoppelt. */
  .bau-handy{display:none}
  .hero-innen{gap:14px}

  /* Auf einem schmalen Schirm wirkt linksbuendiger Text neben einer
     mittigen Reihe unruhig. Hier steht alles in einer Spalte, also
     richtet sich auch alles gleich aus. */
  .einstieg{text-align:center}
  .einstieg .kicker{justify-content:center;align-self:center}
  .einstieg h2,.einstieg .lead{margin-inline:auto}
  .einstieg .lead{max-width:46ch}
  .knoepfe{justify-content:center}
  .stimmen-kopf{justify-items:center;text-align:center}
  .stimmen-kopf h2{margin-inline:auto}
  .note{justify-items:center}
  .seiten-kopf{text-align:center}
  .seiten-kopf .kicker{justify-content:center}
  .seiten-kopf h1,.seiten-kopf .lead,.seiten-stand{margin-inline:auto}
  .pfad{justify-content:center}

}

/* ---------- 8 Laufband und Laufschrift ---------- */

/* Kein Kasten, keine Striche: nur Text, der durchs Bild zieht und an den
   Rändern weich ausläuft. Es hält auch nicht an, wenn der Zeiger darüber
   steht - eine Dauerschleife ist eine Dauerschleife. */
.band{margin:0;padding:.8rem 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent)}
.band-innen{display:flex;gap:.6rem;width:max-content;animation:laufen 44s linear infinite}
@keyframes laufen{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Alle Pillen gleich. Jede vierte in Rot sah nach Zufall aus, nicht
   nach Takt - und welche rot war, wechselte beim Scrollen mit.

   Kein `text-transform:uppercase`: Diese Schrift hat ein sehr breites
   grosses A, und zwischen lauter schmalen Grossbuchstaben faellt es
   als Fehler auf. Die Woerter stehen jetzt so da, wie man sie
   schreibt. */
.band-innen span{display:inline-flex;align-items:center;white-space:nowrap;
  font-family:var(--fest);font-weight:500;
  font-size:clamp(.76rem,1.1vw,.9rem);letter-spacing:.02em;
  color:var(--leise);
  padding:.48rem 1.1rem;border-radius:999px;
  background:var(--karte);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 0 0 1px var(--linie)}

.laufschrift{overflow:hidden;display:flex;flex-direction:column;gap:clamp(2px,.4vw,8px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.ls-zeile{display:flex;gap:clamp(20px,3vw,46px);width:max-content;white-space:nowrap;
  will-change:transform}
/* Geschoben wird vom Skript, im Takt des Scrollens. Keine Dauerschleife:
   die wuerde gegen den Scrollwert arbeiten. */
.ls-zeile.rechts{transform:translate3d(-50%,0,0)}
/* Kleiner als vorher. Fuenf Zentimeter hohe Buchstaben, die auch noch
   schnell laufen, wirken laut - Simon: "schoen gemacht, aber nicht
   professionell". */
.ls-zeile b{font-family:var(--display);font-weight:800;
  font-size:clamp(1.8rem,5vw,3.5rem);letter-spacing:-.04em;line-height:1.1;
  color:transparent;-webkit-text-stroke:1.2px rgba(238,242,255,.44)}
.ls-zeile b:nth-child(3n){color:rgba(238,242,255,.4);-webkit-text-stroke:0}
.ls-zeile b.rot{color:var(--rot-text);-webkit-text-stroke:0;opacity:.9}

/* ---------- 9 Karten, Zitate, Punkte ---------- */

/* Eine Scheibe, kein Kasten: Der Grund ist fast durchsichtig, was
   dahinter liegt wird verwischt, und oben sitzt ein heller Strich -
   dort, wo das Licht auf echtes Glas faellt. */
.karte{position:relative;border-radius:var(--rund);padding:clamp(22px,2.6vw,32px);
  background:var(--karte);backdrop-filter:blur(20px) saturate(1.45);
  -webkit-backdrop-filter:blur(20px) saturate(1.45);
  box-shadow:inset 0 1px 0 0 rgba(238,242,255,.16),
             inset 0 0 0 1px var(--linie),
             0 30px 70px -48px #000;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),
             background-color .45s var(--ease)}
.karte:hover{transform:translateY(-5px);background:var(--karte-2);
  box-shadow:inset 0 1px 0 0 rgba(238,242,255,.24),
             inset 0 0 0 1px var(--linie-stark),
             0 40px 86px -44px rgba(44,224,206,.4)}
/* Ein Lichtfleck folgt dem Zeiger ueber der Scheibe. Die Werte setzt
   das Skript; ohne Maus bleibt er aus und kostet nichts. */
.karte::before{content:"";position:absolute;inset:0;z-index:0;opacity:0;
  border-radius:inherit;pointer-events:none;
  background:radial-gradient(260px circle at var(--kx,50%) var(--ky,50%),
    rgba(44,224,206,.2),transparent 70%);
  transition:opacity .45s var(--ease)}
.karte:hover::before{opacity:1}
.karte>*{position:relative;z-index:1}
.karte h3{margin:0 0 .5rem}
.karte p{margin:0;color:var(--leise);font-size:.98em}
.karte p:last-child{margin-bottom:0}

.raster{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(14px,1.8vw,22px);margin-top:clamp(30px,3.6vw,46px)}
.raster.zwei{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.raster.drei{grid-template-columns:repeat(auto-fit,minmax(252px,1fr))}
.raster.vier{grid-template-columns:repeat(auto-fit,minmax(218px,1fr))}

/* Die drei Sätze, die Kunden über ihre alte Agentur sagen. */
.zitate{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(14px,1.8vw,22px);margin-top:clamp(30px,3.6vw,46px);
  grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.zitat{position:relative;border-radius:var(--rund);padding:clamp(24px,2.8vw,34px);
  background:linear-gradient(165deg,var(--karte-2),var(--karte));
  box-shadow:inset 0 0 0 1px var(--linie);
  border-top:3px solid var(--rot);
  transition:transform .45s var(--ease),border-color .45s var(--ease)}
.zitat:hover{transform:translateY(-4px);border-top-color:var(--rot-zart)}
.zitat q{display:block;quotes:none;font-family:var(--display);font-weight:700;
  font-size:clamp(1.12rem,2.1vw,1.4rem);letter-spacing:-.02em;line-height:1.24;
  margin:0 0 .8rem;color:var(--text)}
.zitat q::before{content:"„"}
.zitat q::after{content:"\201C"}
.zitat p{margin:0;color:var(--leise);font-size:.97em}

/* Ein Merkmal mit Symbol. */
.merkmal{display:flex;gap:1rem;align-items:flex-start}
.merkmal .sym{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:var(--rot-nebel);box-shadow:inset 0 0 0 1px rgba(166,243,234,.22)}
.merkmal .sym svg{width:19px;height:19px;fill:none;stroke:var(--rot-zart);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.merkmal h3{font-size:1.04rem;margin:0 0 .3rem}
.merkmal p{margin:0;color:var(--leise);font-size:.95em}

/* ---------- 10 Der Regler: vorher / nachher ---------- */

/* 16:10 statt 16:9. Die gezeigte Seite hat Kopf, grosses Bild,
   Zahlenzeile, drei Karten und einen Fuss - bei 16:9 blieb fuer das
   Bild so wenig Hoehe, dass die Ueberschrift darauf nicht mehr
   hinpasste. */
.regler{position:relative;margin-top:0;border-radius:var(--rund);
  overflow:hidden;aspect-ratio:16/10;background:var(--karte);
  container-type:inline-size;
  box-shadow:inset 0 0 0 1px var(--linie),0 40px 80px -50px rgba(0,0,0,1);
  touch-action:pan-y;cursor:ew-resize;user-select:none}
/* Auf dem Handy etwas hoeher, damit beide Seiten Platz haben. */
@media (max-width:620px){.regler{aspect-ratio:5/4}}
.regler-seite{position:absolute;inset:0}
/* Ruhestellung 34 statt 50 Prozent: Die neue Seite soll den groesseren
   Teil haben und ihre Ueberschrift zeigen - die alte lugt links herein
   und fordert zum Ziehen auf. */
.regler{--teiler:34%}
.regler-neu{clip-path:inset(0 0 0 var(--teiler,34%))}
.regler-alt{clip-path:inset(0 calc(100% - var(--teiler,34%)) 0 0)}
.regler img{width:100%;height:100%;object-fit:cover}
.regler-legende{display:flex;justify-content:space-between;gap:1rem;max-width:none;
  margin:clamp(26px,3vw,38px) 0 .7rem}
.regler-legende span{font-family:var(--fest);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;padding:.34rem .8rem;border-radius:999px}
.regler-legende .alt{background:var(--karte);color:var(--leise);
  box-shadow:inset 0 0 0 1px var(--linie)}
/* Die Schilder tragen die Farben der jeweiligen Seite, nicht unsere:
   links das Blaugrau von 2014, rechts das Orange des Malerbetriebs. */
.regler-legende .neu{background:rgba(194,65,12,.2);color:#F6C9A8;
  box-shadow:inset 0 0 0 1px rgba(246,201,168,.36)}
.regler-griff{position:absolute;top:0;bottom:0;left:var(--teiler,50%);width:2px;z-index:4;
  background:var(--papier);transform:translateX(-1px);pointer-events:none}
.regler-griff::after{content:"";position:absolute;top:50%;left:50%;width:46px;height:46px;
  margin:-23px 0 0 -23px;border-radius:50%;background:var(--papier);
  box-shadow:0 10px 26px -10px rgba(0,0,0,.9)}
.regler-griff::before{content:"";position:absolute;top:50%;left:50%;width:46px;height:46px;
  margin:-23px 0 0 -23px;border-radius:50%;z-index:1;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A110F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6 3 12l6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center/19px no-repeat}

/* Die alte Seite ist gezeichnet, kein Bild: So ist sie so schnell wie der
   Rest der Seite und bleibt auf jedem Bildschirm scharf. */
.alt-seite{position:absolute;inset:0;background:#E9E6DF;overflow:hidden;
  font-family:'Times New Roman',Times,serif;color:#1a1a1a}
.alt-seite .alt-kopf{background:#2F4F7A;color:#fff;padding:2.2% 3%;
  font-size:clamp(11px,1.55cqw,18px);font-weight:700;letter-spacing:.02em}
.alt-seite .alt-nav{background:#d8d4cc;padding:1.4% 3%;display:flex;gap:1.6em;
  font-size:clamp(8px,1cqw,12px);color:#2F4F7A}
.alt-seite .alt-inhalt{padding:3% 3% 9%;display:flex;gap:3%;align-items:flex-start}
.alt-seite .alt-text{flex:1}
.alt-seite .alt-klein{display:block;margin:1.4em 0 .5em;
  font-size:clamp(9px,1.15cqw,14px);color:#8B0000}
.alt-seite .alt-spalte{width:32%;display:flex;flex-direction:column;gap:6%}
.alt-seite .alt-kasten{border:1px solid #a9a49b;background:#dedad2;padding:5% 6%}
.alt-seite .alt-kasten-titel{display:block;margin-bottom:.5em;font-weight:700;
  font-size:clamp(8px,1cqw,12px);color:#2F4F7A}
.alt-seite .alt-zaehler{display:inline-block;background:#111;color:#8ef58e;
  font-family:var(--fest);letter-spacing:.12em;padding:.3em .5em;
  font-size:clamp(8px,1cqw,12px)}
.alt-seite .alt-fuss{position:absolute;left:0;right:0;bottom:0;
  display:flex;justify-content:space-between;gap:2%;
  padding:1.6% 3%;background:#d8d4cc;border-top:1px solid #a9a49b;
  font-size:clamp(6px,.85cqw,10px);color:#5a564f}
.alt-seite .alt-text b{display:block;font-size:clamp(10px,1.35cqw,16px);margin-bottom:.5em;color:#8B0000}
.alt-seite .alt-zeile{height:clamp(3px,.52cqw,6px);background:#bdb8ae;border-radius:1px;
  margin-bottom:.5em}
/* Dicker Rahmen, gequetschtes Bild, flaue Farben: so sahen Fotos auf
   Seiten von 2014 aus. Ein scharfes, schoen beschnittenes Foto wuerde
   dem Vergleich die Pointe nehmen. */
.alt-seite .alt-bild{width:100%;aspect-ratio:4/3;background:#c9c4bb;overflow:hidden;
  border:3px solid #fff;outline:1px solid #a9a49b}
/* Das Foto wird absichtlich in die falsche Form gezogen (fill statt
   cover). So hat 2014 fast jede Seite ausgesehen. */
.alt-seite .alt-bild img{width:100%;height:100%;object-fit:fill;display:block;
  filter:saturate(.62) contrast(.86) brightness(1.04)}

/* Dieselbe Firma, von uns gebaut. Auch das ist gezeichnet - nur das Foto
   ist echt. So stehen links und rechts zwei Websites nebeneinander,
   statt einer Website und einem Foto. */
/* --- Die Vorschau: eine fertige Seite fuer einen Malerbetrieb ---

   Bewusst HELL und WARM. Eine Vorschau in unseren eigenen Farben zeigt
   nichts - sie sieht aus wie ein Ausschnitt unserer Seite. Hier ist
   alles anders: cremefarbener Grund statt Nacht, gebranntes Orange
   statt Tuerkis, Serifen in der Ueberschrift statt Grotesk.

   Alle Masse in `cqw` - die Vorschau muss vom Handy bis zum grossen
   Schirm genau gleich aussehen, nur kleiner. */
.neu-seite{
  --d-grund:#FBF7F0;
  --d-tinte:#1A2430;
  --d-leise:#5A6775;
  --d-akzent:#C2410C;
  --d-gruen:#1E5F4F;
  --d-linie:rgba(26,36,48,.12);
  position:absolute;inset:0;overflow:hidden;background:var(--d-grund);
  display:flex;flex-direction:column;color:var(--d-tinte);
  font-family:var(--display)}

.neu-kopf{display:flex;align-items:center;gap:4%;padding:1.7% 3.2%;flex:none;
  border-bottom:1px solid var(--d-linie);background:#fff}
.neu-logo{display:flex;align-items:center;gap:.5em;font-weight:800;
  font-size:clamp(11px,1.5cqw,17px);letter-spacing:-.02em;color:var(--d-tinte)}
.neu-logo i{width:.72em;height:.72em;border-radius:3px;background:var(--d-akzent);flex:none;
  transform:rotate(12deg)}
.neu-nav{display:flex;gap:1.5em;margin-left:auto;font-family:var(--display);font-weight:600;
  font-size:clamp(8px,1.05cqw,12px);color:var(--d-leise)}
.neu-cta{font-family:var(--display);font-weight:700;font-size:clamp(9px,1.15cqw,13px);
  color:#fff;background:var(--d-akzent);padding:.55em 1.2em;border-radius:5px;
  white-space:nowrap;box-shadow:0 .5cqw 1.4cqw -.6cqw rgba(194,65,12,.6)}

/* Das grosse Bild mit dem Text darauf. */
.neu-held{position:relative;flex:1 1 auto;min-height:40%}
.neu-held img{width:100%;height:100%;object-fit:cover;filter:saturate(1.02)}
/* Der Schleier kommt von RECHTS, weil dort der Text steht. Links
   bleibt das Bild frei - dort schiebt sich ohnehin die alte Seite
   darueber. */
.neu-held::after{content:"";position:absolute;inset:0;
  background:linear-gradient(270deg,rgba(10,16,22,.9) 0%,rgba(10,16,22,.78) 34%,
    rgba(10,16,22,.4) 62%,rgba(10,16,22,0) 88%)}
.neu-ueber{position:absolute;right:4%;top:50%;transform:translateY(-50%);z-index:2;
  max-width:56%;text-align:right;
  display:flex;flex-direction:column;align-items:flex-end;gap:.6em}
.neu-ueber b{font-family:var(--lese);font-weight:600;line-height:1.06;letter-spacing:-.02em;
  font-size:clamp(16px,3.3cqw,36px);color:#fff}
.neu-sub{font-family:var(--display);font-weight:500;font-size:clamp(8px,1.05cqw,13px);
  color:rgba(255,255,255,.8)}
.neu-reihe{display:flex;gap:.6em;margin-top:.2em}
.neu-knopf{font-family:var(--display);font-weight:700;font-size:clamp(9px,1.2cqw,14px);
  color:#fff;background:var(--d-akzent);padding:.62em 1.3em;border-radius:5px;
  white-space:nowrap;box-shadow:0 .7cqw 1.8cqw -.7cqw rgba(194,65,12,.9)}
.neu-knopf.zart{background:rgba(255,255,255,.14);color:#fff;box-shadow:none;
  outline:1px solid rgba(255,255,255,.45);outline-offset:-1px}

/* Die Bewertung steht jetzt im Textblock. Als eigenes Kaestchen im
   Bild war sie je nach Reglerstellung verdeckt. */
.neu-note{display:inline-flex;align-items:center;gap:.5em;
  background:rgba(255,255,255,.14);border-radius:999px;padding:.34em .9em;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.neu-note b{font-weight:800;font-size:clamp(9px,1.15cqw,14px);line-height:1;color:#fff}
.neu-note i{font-style:normal;font-size:clamp(6px,.82cqw,10px);color:#F5C45A;letter-spacing:.04em}
.neu-note em{font-style:normal;font-family:var(--fest);font-size:clamp(5px,.7cqw,9px);
  color:rgba(255,255,255,.78);white-space:nowrap}

/* Die Zahlenzeile. */
.neu-zahlen{display:flex;flex:none;background:var(--d-gruen);color:#fff}
.neu-zahlen span{flex:1;padding:1.5% 2%;display:flex;flex-direction:column;align-items:center;
  gap:.1em;border-right:1px solid rgba(255,255,255,.16)}
.neu-zahlen span:last-child{border-right:0}
.neu-zahlen b{font-weight:800;font-size:clamp(10px,1.6cqw,19px);line-height:1}
.neu-zahlen em{font-style:normal;font-family:var(--fest);font-size:clamp(5px,.7cqw,9px);
  letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.76);white-space:nowrap}

/* Drei Leistungen mit Bild. */
.neu-karten{display:flex;gap:2%;padding:1.8% 3.2%;flex:none;background:var(--d-grund)}
.neu-karte{flex:1;border-radius:6px;overflow:hidden;background:#fff;
  box-shadow:0 .6cqw 1.6cqw -.8cqw rgba(10,16,22,.4),inset 0 0 0 1px var(--d-linie);
  display:flex;flex-direction:column}
.neu-karte img{width:100%;aspect-ratio:2/1;object-fit:cover;display:block}
.neu-karte b{font-weight:700;font-size:clamp(8px,1.05cqw,13px);padding:.7em .8em 0;
  color:var(--d-tinte)}
.neu-karte em{font-style:normal;font-family:var(--fest);font-size:clamp(6px,.76cqw,9px);
  color:var(--d-leise);padding:.25em .8em .8em}

/* Der Fuss mit Zitat und Nummer. */
.neu-fuss{display:flex;align-items:center;justify-content:space-between;gap:3%;
  flex:none;padding:1.4% 3.2%;background:var(--d-tinte);color:#fff}
.neu-zitat{font-family:var(--lese);font-style:italic;font-size:clamp(8px,1.05cqw,13px);
  color:rgba(255,255,255,.88)}
.neu-tel{font-family:var(--display);font-weight:700;font-size:clamp(8px,1.1cqw,14px);
  color:#F6C9A8;white-space:nowrap}

@container (max-width:460px){
  .neu-nav{display:none}
  .neu-ueber{max-width:72%}
  .neu-karten{display:none}
  .neu-zahlen span:nth-child(n+3){display:none}
}

/* ---------- 11 Der Bilderreigen ---------- */

/* Bricht aus dem Satzspiegel aus und laeuft bis an beide Raender.

   `--leiste` ist die gemessene Breite der Bildlaufleiste; das Skript
   setzt sie. Ohne sie waere `100vw` um genau diesen Betrag zu breit und
   die Seite bekaeme einen waagerechten Ueberlauf. Fehlt das Skript,
   bleibt `--leiste` bei 0 - dann ist die Reihe nur so breit wie der
   Satzspiegel, aber nie breiter als das Fenster. */
.reigen{position:relative;margin-top:clamp(24px,2.8vw,36px);
  width:calc(100vw - var(--leiste, 0px));
  max-width:none;
  margin-inline:calc(50% - (100vw - var(--leiste, 0px)) / 2)}
.reigen .reigen-spur{padding-inline:clamp(14px,3vw,46px)}
/* Fast aneinander. Simon fand die Luecken auch bei 6 bis 10 Pixeln
   noch zu gross - die Reihe soll wie ein Film wirken, nicht wie eine
   Sammlung einzelner Bilder. */
/* 9 bis 14 Pixel. Die 2 Pixel vorher waren zu knapp - sie stammen aus
   der Zeit, als der echte Abstand noch von den 40 px des `figure` kam
   und ich am falschen Wert gedreht habe. */
/* Kein Scrollbalken mehr, sondern eine geschobene Spur: Nur so kann
   die Reihe endlos laufen. Eine Leiste zum Scrollen hat immer ein
   Ende - und genau dort wurden die Pfeile grau. */
/* Echtes seitliches Scrollen statt einer geschobenen Spur.

   Vorher wurde mit `transform` geschoben und je Wisch genau ein
   Schritt zugelassen - das war das Stocken, das Simon beschreibt. Der
   Browser kann das Wischen besser, als ich es nachbauen kann; endlos
   wird es durch den dreifachen Inhalt und das unsichtbare Zuruecksetzen
   im Skript. */
/* `scroll-snap` nur, wenn jemand die Reihe anfasst. Waehrend sie von
   selbst fliesst, wuerde es sie bei jedem Bild auf die naechste Karte
   zurueckziehen - die Reihe stuende dann still. */
.reigen-spur{position:relative;padding-bottom:4px;
  display:flex;gap:clamp(9px,1vw,14px);
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y;cursor:grab}
.reigen-spur::-webkit-scrollbar{display:none}
.reigen-spur.angefasst{scroll-snap-type:x mandatory}
.reigen-spur.zieht{cursor:grabbing}
/* Kein `will-change`: Die Spur ist dreimal elf Karten breit, also
   rund 7500 Pixel. Mit `will-change` haelt der Browser dafuer dauernd
   eine eigene Ebene in dieser Groesse bereit - das kostet mehr, als
   es bringt. Ohne baut er sie nur waehrend der Bewegung auf. */
.reigen-zug{display:flex;gap:clamp(9px,1vw,14px);width:max-content}
.reigen-zug.schiebt{transition:transform .62s var(--ease-aus)}
/* Groesser am Rechner: Bei 212 Pixeln wirkten die Bilder klein, und
   daneben stand viel Leere. */
.reigen-karte{flex:0 0 clamp(168px,19vw,272px);scroll-snap-align:center;
  border-radius:var(--rund-klein);overflow:hidden;position:relative;aspect-ratio:4/5;
  background:var(--karte);box-shadow:inset 0 0 0 1px var(--linie);
  transition:transform .5s var(--ease)}
.reigen-karte img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease),filter .6s var(--ease);
  filter:saturate(.82) brightness(.82)}
.reigen-karte:hover img{transform:scale(1.05);filter:saturate(1) brightness(.95)}
.reigen-karte figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(14px,1.6vw,20px);
  background:linear-gradient(transparent,rgba(5,6,13,.92) 62%);
  font-family:var(--fest);font-size:.76rem;letter-spacing:.02em;color:var(--text)}
.reigen-pfeile{display:flex;gap:.5rem;justify-content:flex-end;margin-top:.6rem}
.reigen-pfeile button{width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;background:rgba(238,242,255,.06);
  box-shadow:inset 0 0 0 1px var(--linie);
  transition:background-color .3s var(--ease),transform .3s var(--ease)}
.reigen-pfeile button:hover{background:rgba(238,242,255,.12);transform:translateY(-2px)}
.reigen-pfeile svg{width:17px;height:17px;fill:none;stroke:var(--text);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------- 12 Ablauf ---------- */

.ablauf{display:grid;gap:clamp(26px,4vw,64px);align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-top:clamp(30px,3.6vw,48px)}
@media (max-width:900px){.ablauf{grid-template-columns:1fr}}
.ablauf-steht{position:sticky;top:clamp(92px,13vh,150px)}
@media (max-width:900px){.ablauf-steht{position:static}}
.ablauf-bild{border-radius:var(--rund);overflow:hidden;aspect-ratio:4/3;position:relative;
  background:linear-gradient(150deg,#241D1B,#15100F);
  box-shadow:inset 0 0 0 1px var(--linie),0 40px 80px -46px rgba(0,0,0,1)}
.ablauf-bild .leiste{position:absolute;inset:0 0 auto;height:34px;
  background:rgba(238,242,255,.045);border-bottom:1px solid var(--linie);
  display:flex;align-items:center;gap:6px;padding:0 14px}
.ablauf-bild .leiste i{width:8px;height:8px;border-radius:50%;background:rgba(238,242,255,.16)}
.ablauf-bild .leiste .adresse{margin-left:8px;height:10px;flex:1;max-width:190px;
  border-radius:999px;background:rgba(238,242,255,.07)}

/* Vier Bilder liegen uebereinander, sichtbar ist immer nur das zum
   Schritt. Sie wechseln mit einer Blende, damit der Sprung nicht hart ist. */
.ab-bild{position:absolute;inset:34px 8% 18% 8%;display:grid;place-items:center;
  opacity:0;transform:scale(.97);pointer-events:none;
  transition:opacity .5s var(--ease),transform .6s var(--ease)}
.ab-bild svg{width:100%;height:100%;overflow:visible}
.ablauf-bild[data-schritt="1"] .ab-1,
.ablauf-bild[data-schritt="2"] .ab-2,
.ablauf-bild[data-schritt="3"] .ab-3,
.ablauf-bild[data-schritt="4"] .ab-4{opacity:1;transform:none}

.ab-bild .hell{fill:rgba(238,242,255,.86)}
.ab-bild .matt{fill:rgba(238,242,255,.32)}
.ab-bild .zart{fill:rgba(166,243,234,.3)}
.ab-bild .akzent{fill:var(--rot)}
.ab-bild .flaeche-1{fill:rgba(238,242,255,.055)}
.ab-bild .flaeche-2{fill:rgba(238,242,255,.1)}

/* 01 Gespraech */
.ab-bild .sprech{fill:rgba(238,242,255,.07);stroke:var(--rot-text);stroke-width:1.4}
.ab-bild .sprech-kreis{fill:rgba(44,224,206,.18)}
.ab-bild .kopf-fig{fill:var(--rot-zart)}
.ab-bild .welle path{fill:none;stroke:var(--rot-text);stroke-width:1.6;stroke-linecap:round;
  opacity:.55}

/* 02 Entwurf: Risslinien und ein Stift */
.ab-bild .riss{fill:rgba(238,242,255,.05);stroke:var(--rot-text);stroke-width:1.1;
  stroke-dasharray:5 3.5;opacity:.85}
.ab-bild .stift{fill:var(--rot)}

/* 03 Feinschliff: ein Zeiger auf der fertigen Seite */
.ab-bild .zeiger path{fill:var(--papier);stroke:#0B1020;stroke-width:1.2;stroke-linejoin:round}

/* 04 Online: der gruene Punkt, den jeder kennt */
.ab-bild .online .punkt{fill:#4FB477}

.ablauf-bild .wort{position:absolute;left:0;right:0;bottom:clamp(10px,1.4vw,16px);
  text-align:center;
  font-family:var(--display);font-weight:800;letter-spacing:-.035em;
  font-size:clamp(1.1rem,2.3vw,1.6rem);color:rgba(238,242,255,.46);
  transition:color .5s var(--ease),transform .5s var(--ease)}
.ablauf-bild .zahl{position:absolute;right:clamp(14px,1.8vw,22px);top:clamp(44px,5vw,56px);
  font-family:var(--display);font-weight:800;font-size:clamp(2rem,5vw,3.4rem);
  letter-spacing:-.05em;line-height:1;color:rgba(44,224,206,.3)}

/* Die Linie neben den Schritten. Der Punkt wandert beim Scrollen mit und
   faerbt die Linie hinter sich ein - man sieht, wie weit man ist. */
.schritt-spalte{position:relative;padding-left:clamp(26px,3vw,44px)}
@media (max-width:620px){.schritt-spalte{padding-left:22px}}
.linie{position:absolute;left:clamp(7px,.9vw,13px);top:14px;bottom:14px;width:2px;
  border-radius:2px;background:var(--linie-stark);overflow:visible}
.linie-voll{position:absolute;left:0;top:0;width:100%;border-radius:2px;
  height:calc(var(--weit,0) * 100%);
  background:linear-gradient(180deg,var(--rot-zart),var(--rot));
  box-shadow:0 0 14px -2px rgba(44,224,206,.8)}
.linie-punkt{position:absolute;left:50%;top:calc(var(--weit,0) * 100%);
  width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;
  background:var(--rot);
  box-shadow:0 0 0 4px rgba(44,224,206,.22),0 0 22px 2px rgba(44,224,206,.8)}
.linie-punkt::after{content:"";position:absolute;inset:-7px;border-radius:50%;
  border:1px solid rgba(166,243,234,.5);
  animation:punktRing 2.4s ease-out infinite}
@keyframes punktRing{
  0%{transform:scale(.7);opacity:.9}
  100%{transform:scale(1.9);opacity:0}
}
/* Der Knoten jedes Schrittes sitzt auf der Linie und leuchtet auf,
   sobald der Schritt dran ist. */
.knoten{position:absolute;left:calc(clamp(26px,3vw,44px) * -1 + clamp(7px,.9vw,13px) + 1px);
  top:clamp(26px,2.6vw,34px);width:9px;height:9px;margin-left:-4.5px;
  border-radius:50%;background:var(--nacht-2);
  box-shadow:inset 0 0 0 2px var(--linie-stark);
  transition:box-shadow .5s var(--ease),background-color .5s var(--ease),
             transform .5s var(--ease)}
@media (max-width:620px){.knoten{left:calc(-22px + 7px + 1px)}}
.schritt.erreicht .knoten{background:var(--rot);
  box-shadow:inset 0 0 0 2px var(--rot-zart),0 0 18px 2px rgba(44,224,206,.8)}
.schritt.dran .knoten{transform:scale(1.35)}

.schritte{display:flex;flex-direction:column;gap:clamp(12px,1.4vw,18px)}
.schritt{position:relative;border-radius:var(--rund-klein);padding:clamp(20px,2.2vw,28px);
  background:var(--karte);backdrop-filter:blur(20px) saturate(1.45);
  -webkit-backdrop-filter:blur(20px) saturate(1.45);
  box-shadow:inset 0 1px 0 0 rgba(238,242,255,.12),inset 0 0 0 1px var(--linie);
  transition:box-shadow .5s var(--ease),background-color .5s var(--ease)}
.schritt.dran{box-shadow:inset 0 1px 0 0 rgba(238,242,255,.26),
             inset 0 0 0 1px rgba(44,224,206,.44),
             0 30px 70px -46px rgba(44,224,206,.7);
  background:linear-gradient(150deg,rgba(44,224,206,.14),var(--karte))}
.schritt h3{display:flex;align-items:baseline;gap:.8rem;margin:0 0 .4rem}
.schritt h3 em{font-family:var(--fest);font-style:normal;font-size:.76rem;
  color:var(--rot-text);letter-spacing:.06em}
.schritt p{margin:0;color:var(--leise);font-size:.97em}
.schritt .mehr{display:inline-flex;align-items:center;gap:.4rem;margin-top:.8rem;
  font-family:var(--fest);font-size:.74rem;letter-spacing:.06em;color:var(--rot-text);
  text-decoration:none;opacity:0;transform:translateX(-6px);
  transition:opacity .4s var(--ease),transform .4s var(--ease)}
.schritt.dran .mehr,.schritt:hover .mehr{opacity:1;transform:none}
.schritt .mehr svg{width:13px;height:9px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------- 13 Preise ---------- */

.tarife{display:grid;gap:clamp(16px,1.9vw,24px);margin-top:clamp(34px,4vw,52px);
  grid-template-columns:repeat(auto-fit,minmax(276px,1fr));
  /* Gleich hoch, egal wie lang der Text ist. Vorher war Start die
     hoechste Karte und Premium die niedrigste - das liest sich, als
     stecke bei Start am meisten drin. */
  align-items:stretch}
/* Premium ist der beste Tarif und soll auch die groesste Karte sein:
   eine Spur breiter als die anderen beiden. */
@media (min-width:980px){
  .tarife{grid-template-columns:1fr 1fr 1.12fr}
}
.tarif{position:relative;border-radius:var(--rund);padding:clamp(26px,2.9vw,36px);
  background:var(--karte);backdrop-filter:blur(20px) saturate(1.45);
  -webkit-backdrop-filter:blur(20px) saturate(1.45);
  box-shadow:inset 0 1px 0 0 rgba(238,242,255,.16),
             inset 0 0 0 1px var(--linie),0 30px 70px -48px #000;
  display:flex;flex-direction:column;gap:.7rem;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.tarif>*{position:relative;z-index:1}
.tarif .name{margin:0;font-family:var(--fest);font-size:.76rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:500;color:var(--leise)}
.tarif .preis{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.tarif .vorher{font-family:var(--fest);font-size:.92rem;color:var(--leiser);
  text-decoration:line-through}
.tarif .jetzt{font-family:var(--display);font-weight:800;
  font-size:clamp(2.1rem,4.1vw,2.9rem);letter-spacing:-.04em;line-height:1;color:var(--text)}
.tarif .marke{display:inline-flex;align-self:flex-start;
  font-family:var(--fest);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.3rem .7rem;border-radius:999px;background:var(--rot-nebel);color:var(--rot-zart);
  box-shadow:inset 0 0 0 1px rgba(166,243,234,.26)}
.tarif>p{margin:.2rem 0 0;color:var(--leise);font-size:.97em}
.tarif ul{list-style:none;margin:.5rem 0 0;padding:0;display:flex;flex-direction:column;gap:.46rem}
.tarif li{display:grid;grid-template-columns:1.15em 1fr;gap:.6rem;align-items:baseline;
  font-size:.95em;color:var(--leise);line-height:1.44}
.tarif li i{font-style:normal;font-family:var(--fest);font-size:.88em;color:var(--rot-text)}
.tarif li.aus{color:var(--leiser)}
.tarif li.aus i{color:var(--leiser)}
.tarif .alles{display:inline-flex;align-items:center;gap:.4rem;margin-top:.3rem;
  font-family:var(--fest);font-size:.73rem;letter-spacing:.05em;color:var(--rot-text);
  text-decoration:none;border-bottom:1px solid transparent;align-self:flex-start;
  transition:border-color .3s var(--ease)}
.tarif .alles:hover{border-bottom-color:var(--rot-text)}
.tarif .knopf{margin-top:auto;align-self:stretch}

/* Business: ein Rand, der langsam atmet. Zweite Geige, nicht mehr. */
.tarif.beliebt{box-shadow:inset 0 1px 0 0 rgba(238,242,255,.2),
  inset 0 0 0 1px rgba(44,224,206,.3),0 30px 70px -46px rgba(44,224,206,.5)}
@media (min-width:980px){.tarif.beliebt{transform:translateY(-8px)}}
.tarif.beliebt::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:0;
  pointer-events:none;box-shadow:inset 0 0 0 1px var(--rot);
  opacity:.2;animation:atmen 4.6s ease-in-out infinite}
@keyframes atmen{0%,100%{opacity:.14}50%{opacity:.58}}

/* Premium: umgedreht. Die beiden anderen sind dunkel, dieser ist hell -
   der größte Unterschied, den es gibt, und er braucht keine zweite Farbe. */
@property --winkel{syntax:'<angle>';initial-value:0deg;inherits:false}
/* Premium bleibt umgedreht: die beiden anderen sind Glas, dieser ist
   hell und geschlossen. Das ist der groesste Unterschied, den es auf
   einer dunklen Seite gibt, und er braucht keine zweite Form. Nur der
   Ton ist jetzt kuehl statt warm, damit er in diese Welt gehoert. */
.tarif.voll{background:linear-gradient(165deg,#FBFCFF,#DDE4F6);color:#0B1020;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:0 44px 96px -34px rgba(44,224,206,.55),inset 0 0 0 1px rgba(44,224,206,.3)}
@media (min-width:980px){
  .tarif.voll{transform:translateY(-20px) scale(1.012);
    padding:clamp(30px,3.2vw,42px)}
}

/* Premium ist der Tarif, auf den die Seite hinauslaeuft. Damit das ohne
   Lesen klar ist, atmet die Karte leicht: der Schein darunter wird alle
   paar Sekunden staerker und wieder schwaecher. Sehr langsam - eine
   schnelle Bewegung waere Gezappel, keine Betonung. */
.tarif.voll{animation:premiumAtmen 7s ease-in-out infinite}
@keyframes premiumAtmen{
  0%,100%{box-shadow:0 44px 96px -34px rgba(44,224,206,.5),
                     inset 0 0 0 1px rgba(44,224,206,.28)}
  50%    {box-shadow:0 52px 112px -32px rgba(139,108,248,.78),
                     inset 0 0 0 1px rgba(44,224,206,.46)}
}
@media (prefers-reduced-motion:reduce){
  .tarif.voll{animation:none}
}

/* Die Marke am Premium-Tarif bekommt einen Lichtstreif wie der volle
   Knopf - dieselbe Sprache an der wichtigsten Stelle. */
.krone{overflow:hidden}
.tarif.voll .name{color:#0F6C63}
.tarif.voll .jetzt{color:#0B1020}
.tarif.voll .vorher{color:rgba(42,52,80,.62)}
.tarif.voll>p,.tarif.voll li{color:#39415C}
.tarif.voll li i{color:#0F6C63}
.tarif.voll li.aus,.tarif.voll li.aus i{color:#6A7290}
.tarif.voll .marke{background:rgba(15,108,99,.12);color:#0F6C63;
  box-shadow:inset 0 0 0 1px rgba(15,108,99,.26)}
.tarif.voll .alles{color:#0F6C63}
.tarif.voll .alles:hover{border-bottom-color:#0F6C63}
.tarif.voll .knopf{background:linear-gradient(100deg,#0F6C63,#3A2E86);color:#F2FBFF;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:0 16px 36px -16px rgba(15,108,99,.75)}
.tarif.voll .knopf:hover{background:linear-gradient(100deg,#0C5B54,#2F2470);color:#F2FBFF}

/* Ein Lichtring wandert einmal in sieben Sekunden um die Karte. Gedreht
   wird nur der Winkel des Verlaufs, nicht das Element - sonst dreht sich
   die Abdeckung mit, und aus dem Ring wird ein schräger Strich. */
.tarif.voll::before{content:"";position:absolute;inset:-2px;border-radius:inherit;
  z-index:0;padding:2px;pointer-events:none;
  background:conic-gradient(from var(--winkel),
    rgba(44,224,206,0) 0deg,rgba(44,224,206,0) 42deg,
    var(--rot) 92deg,var(--rot-zart) 118deg,var(--rot) 144deg,
    rgba(44,224,206,0) 200deg,rgba(44,224,206,0) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:ringDrehen 7s linear infinite}
@keyframes ringDrehen{to{--winkel:360deg}}
.tarif.voll::after{content:"";position:absolute;inset:-16% -9%;z-index:-1;border-radius:50%;
  pointer-events:none;filter:blur(24px);
  background:radial-gradient(58% 48% at 50% 50%,rgba(44,224,206,.42),transparent 70%);
  animation:scheinen 7s ease-in-out infinite}
@keyframes scheinen{0%,100%{opacity:.6}50%{opacity:1}}

.krone{position:absolute;top:-15px;left:clamp(22px,2.6vw,34px);z-index:3;
  display:inline-flex;align-items:center;gap:.42rem;padding:.38rem .85rem;border-radius:999px;
  overflow:hidden;white-space:nowrap;
  font-family:var(--fest);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  /* Dunkle Schrift. Weiss auf Tuerkis waren 1,6:1 - die Krone sass auf
     der wichtigsten Karte und war trotzdem kaum zu lesen. */
  color:var(--auf-leit);font-weight:600;
  background:linear-gradient(100deg,var(--rot),var(--violett));
  box-shadow:0 14px 30px -12px rgba(44,224,206,.9),inset 0 1px 0 rgba(255,255,255,.3)}
.krone::after{content:"";position:absolute;inset:-60%;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%);
  animation:glanz 5s ease-in-out infinite}
.krone svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.9;flex:none}

.preis-note{margin-top:clamp(22px,2.6vw,32px);color:var(--leise);font-size:.95em;max-width:76ch}

/* ---------- 14 Wir beide ---------- */

/* Zwei ruhige Bilder nebeneinander, nicht zwei Plakate. Die Reihe ist
   auf 760 px begrenzt und steht mittig - vorher zogen sich die beiden
   Kacheln ueber die ganze Breite und wurden dadurch sehr gross. */
.wir{display:grid;gap:clamp(18px,2.2vw,28px);margin-top:clamp(28px,3.2vw,42px);
  grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
  max-width:760px;margin-inline:auto}
.kopf-karte{position:relative;border-radius:var(--rund);overflow:hidden;
  background:var(--karte);box-shadow:inset 0 0 0 1px var(--linie);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.kopf-karte:hover{transform:translateY(-5px);
  box-shadow:inset 0 0 0 1px var(--linie-stark),0 34px 70px -40px rgba(0,0,0,1)}
/* Keine feste Form und kein `cover`: dann zeigt der Browser genau das
   Bild. Jeder Beschnitt schneidet hier an einem Gesicht. */
.kopf-karte img{width:100%;height:auto;display:block;
  filter:saturate(.9) brightness(.94);will-change:scale;
  transition:filter .6s var(--ease),scale .9s cubic-bezier(.22,.68,.3,1)}
.kopf-karte:hover img{filter:saturate(1) brightness(1.04);scale:1.035}
/* Der Textblock liegt unter der Bildkante und faehrt beim Ueberfahren
   herauf. Der Verlauf muss kraeftig sein: Das Zitat steht auf dem Foto,
   und ein helles Hemd darunter macht aus hellem Text sonst Grau auf
   Weiss. */
/* `translate` statt `transform`: Das Bild darueber waechst ueber
   `scale`. Solange beide dieselbe Eigenschaft benutzten, ueberholten
   sie sich beim schnellen Hin- und Herfahren - das war das Ruetteln.

   Mehr Haltepunkte im Verlauf: Drei Stufen auf 60 % Hoehe ergeben auf
   dunklem Grund sichtbare Streifen. */
.kopf-karte .unten{position:absolute;left:0;right:0;bottom:0;
  padding:clamp(16px,2vw,24px);
  background:linear-gradient(180deg,
    rgba(4,5,11,0) 0%,rgba(4,5,11,.12) 14%,rgba(4,5,11,.34) 28%,
    rgba(4,5,11,.62) 44%,rgba(4,5,11,.85) 62%,rgba(4,5,11,.96) 82%,rgba(4,5,11,.99) 100%);
  translate:0 100%;opacity:0;transform:none;
  transition:translate .62s cubic-bezier(.22,.68,.3,1),opacity .5s var(--ease)}
.kopf-karte:hover .unten,
.kopf-karte:focus-within .unten{translate:0 0;opacity:1}

/* Ohne Maus gibt es kein Ueberfahren. Dort steht der Text von Anfang an
   da - sonst erfaehrt niemand auf dem Handy, wer das ist. */
/* Ohne Maus faehrt der Text herauf, sobald die Karte ins Bild kommt -
   dieselbe Bewegung wie am Rechner, nur ein anderer Ausloeser. */
/* Ohne Maus faehrt der Text mit dem Scrollen herein und wieder
   hinaus - gesteuert ueber denselben Nah-Wert wie bei den Gruenden.
   Vorher stand er einfach da, sobald die Karte im Bild war. */
@media (hover:none){
  .kopf-karte .unten{transform:none;transition:none;
    translate:0 calc((1 - var(--nah,0)) * 100%);
    opacity:var(--nah,0)}
  .kopf-karte::after{opacity:calc(1 - var(--nah,0))}
}
@media (prefers-reduced-motion:reduce){
  .kopf-karte .unten{transform:none;opacity:1;transition:none}
}

/* Solange der Text unten liegt, sagt ein kleiner Hinweis, dass da noch
   etwas kommt. Er verschwindet, sobald der Text da ist. */
.kopf-karte::after{content:"";position:absolute;left:50%;bottom:14px;
  width:26px;height:26px;margin-left:-13px;border-radius:50%;
  background:rgba(5,6,13,.72);
  box-shadow:inset 0 0 0 1px var(--linie-stark);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F8F4ED' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18 15l-6-6-6 6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:13px;
  opacity:.85;transition:opacity .35s var(--ease);pointer-events:none;z-index:2}
.kopf-karte:hover::after,.kopf-karte:focus-within::after{opacity:0}
@media (hover:none){.kopf-karte::after{display:none}}
.kopf-karte b{display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(1.1rem,2vw,1.35rem);letter-spacing:-.025em}
.kopf-karte span{display:block;margin-top:.2rem;font-family:var(--fest);font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--rot-text)}
.kopf-karte blockquote{margin:.7rem 0 0;font-family:var(--lese);font-style:italic;
  font-size:.95em;color:#C6CEE8;line-height:1.5}

/* ---------- 14b Stimmen aus dem Google-Profil ---------- */

/* Eine endlose Reihe statt einer Liste zum Wischen.

   Beide Raender laufen weich aus. Ein harter Schnitt an einer Seite und
   ein sauberer Rand an der anderen sieht aus wie ein Fehler; weich an
   beiden sieht aus wie Absicht - und genau das hatte Simon verlangt:
   entweder beide Seiten angeschnitten oder keine.

   Angehalten wird beim Ueberfahren und beim Beruehren, damit man in
   Ruhe lesen kann. */
.stimmen-lauf{position:relative;overflow:hidden;margin-top:clamp(26px,3vw,38px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.stimmen-lauf .stimmen{width:max-content;overflow:visible;margin:0;padding:4px 0 8px;
  animation:stimmenLauf var(--stimmen-dauer,70s) linear infinite}
.stimmen-lauf:hover .stimmen,.stimmen-lauf:focus-within .stimmen{animation-play-state:paused}
@keyframes stimmenLauf{to{transform:translate3d(-50%,0,0)}}
/* Die Bewertungsreihe laeuft auch bei "Bewegung reduzieren" weiter -
   langsamer. Sie liegt am Rand des Blicks, zieht nichts mit und haelt
   an, sobald man sie beruehrt. Genau das verlangt die Regel, die
   wirklich zaehlt ("Pause, Stop, Hide"). */
@media (prefers-reduced-motion:reduce){
  .stimmen-lauf .stimmen{animation-duration:calc(var(--stimmen-dauer,70s) * 1.8)}
}

.stimmen-kopf{display:grid;align-items:end;gap:clamp(18px,2.6vw,34px)}
@media (min-width:820px){.stimmen-kopf{grid-template-columns:1fr auto}}
.stimmen-kopf h2{margin:0;max-width:16ch}

/* Die Note als eigener Block: eine Zahl, die man von weitem sieht. */
.note{flex:none;display:grid;justify-items:center;gap:.3rem;text-decoration:none;
  padding:clamp(14px,1.8vw,20px) clamp(20px,2.4vw,28px);border-radius:var(--rund);
  background:var(--karte);box-shadow:inset 0 0 0 1px var(--linie);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.note:hover{transform:translateY(-3px);
  box-shadow:inset 0 0 0 1px rgba(166,243,234,.4),0 24px 50px -32px rgba(0,0,0,.95)}
.note-zahl{font-family:var(--display);font-weight:800;line-height:1;
  font-size:clamp(2.1rem,4vw,2.9rem);letter-spacing:-.04em;color:var(--text)}
.sterne{display:flex;gap:3px}
.sterne svg{width:15px;height:15px;fill:#E8B54A;display:block}
.note-quelle{font-family:var(--fest);font-size:.7rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--leise);white-space:nowrap}

.stimmen-reigen{position:relative;margin-top:clamp(30px,3.6vw,46px)}
.stimmen{list-style:none;margin:0;padding:0 0 4px;
  display:flex;gap:clamp(10px,1.1vw,16px);
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  scroll-padding-left:0}
.stimmen::-webkit-scrollbar{display:none}
.stimmen>li{flex:0 0 clamp(250px,25vw,316px);scroll-snap-align:start}
.stimmen:focus-visible{outline:2px solid var(--rot-text);outline-offset:6px;border-radius:var(--rund)}
.stimme{display:flex;flex-direction:column;gap:.9rem;
  border-radius:var(--rund);padding:clamp(20px,2.3vw,28px);
  background:var(--karte);box-shadow:inset 0 0 0 1px var(--linie);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.stimme:hover{transform:translateY(-4px);
  box-shadow:inset 0 0 0 1px var(--linie-stark),0 26px 56px -34px rgba(0,0,0,.95)}
/* Das Anfuehrungszeichen gehoert zur Zierde, nicht zum Text - deshalb
   als Pseudoelement und nicht als Zeichen im Zitat. */
.klein-sterne svg{width:12px;height:12px}
.stimme-mehr{align-self:flex-start;font-family:var(--fest);font-size:.72rem;
  letter-spacing:.04em;color:var(--rot-text);text-decoration:none;
  border-bottom:1px solid rgba(54,228,210,.34);
  transition:border-color .3s var(--ease)}
.stimme-mehr:hover{border-bottom-color:var(--rot-text)}
.stimme::before{content:none}
.stimme blockquote{margin:0;flex:1;font-family:var(--lese);font-size:1.02rem;
  line-height:1.62;color:var(--text)}
.stimme-wer{display:flex;flex-direction:column;gap:.18rem;
  padding-top:1rem;border-top:1px solid var(--linie)}
.stimme-wer b{font-family:var(--display);font-weight:700;font-size:.98rem;letter-spacing:-.01em}
.stimme-wer span{font-family:var(--fest);font-size:.7rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--leiser)}
.stimmen-fuss{margin:clamp(22px,2.6vw,30px) 0 0}

@media (max-width:620px){
  .stimmen-kopf{flex-direction:column;align-items:stretch}
  .note{justify-items:start}
}

/* ---------- 15 Wachstum ---------- */

.gruende{display:flex;flex-direction:column;gap:clamp(10px,1.2vw,14px);
  margin-top:clamp(30px,3.6vw,46px)}
/* Die Hervorhebung haengt an einem Wert, nicht an einer Klasse.

   `--nah` ist 0 bis 1: wie nah die Mitte des Kastens an der Bildmitte
   liegt. Den Wert setzt das Skript bei jedem Bild des Scrollens. Dadurch
   waechst die Hervorhebung mit der Bewegung, statt bei einer Schwelle
   umzuspringen - vorher sprang sie von Kasten zu Kasten, weil eine
   Klasse nur an oder aus kennt. */
.grund{position:relative;display:grid;grid-template-columns:auto 1fr;
  gap:clamp(14px,1.8vw,24px);
  align-items:start;border-radius:var(--rund-klein);padding:clamp(18px,2.2vw,26px);
  background:var(--karte);box-shadow:inset 0 0 0 1px var(--linie);
  translate:calc(var(--nah,0) * 6px) 0;
  transition:translate .35s var(--ease)}
.grund>*{position:relative;z-index:1}
.grund::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  border-radius:inherit;opacity:var(--nah,0);
  box-shadow:inset 0 0 0 1px rgba(166,243,234,.44);
  background:linear-gradient(130deg,rgba(44,224,206,.14),transparent 70%);
  transition:opacity .25s linear}
/* Mit Maus fuehrt der Zeiger: Was man anfaehrt, ist ganz hell. */
.grund:hover::after{opacity:1;transition:opacity .35s var(--ease)}
.grund:hover{translate:6px 0}
/* Die Nummer wird mit der Hervorhebung klarer. */
.grund .nr{transition:opacity .3s linear,color .3s linear}
.grund .nr{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,2.8vw,2rem);
  letter-spacing:-.04em;line-height:1;color:var(--rot);min-width:1.6em;
  opacity:calc(.42 + var(--nah,0) * .58)}
.grund:hover .nr{opacity:1}
.grund h3{margin:0 0 .3rem}
.grund p{margin:0;color:var(--leise);font-size:.96em}

/* ---------- 16 Referenzen ---------- */

.refs{list-style:none;margin:clamp(30px,3.6vw,46px) 0 0;padding:0;
  display:flex;flex-direction:column;gap:clamp(24px,3vw,40px)}
.ref{display:grid;gap:clamp(20px,2.8vw,40px);align-items:center;
  grid-template-columns:minmax(0,1.22fr) minmax(0,1fr)}
@media (max-width:880px){.ref{grid-template-columns:1fr}}
.ref-bild{position:relative;display:block;border-radius:var(--rund);line-height:0;
  background:var(--karte);
  box-shadow:0 34px 72px -40px rgba(0,0,0,1),inset 0 0 0 1px var(--linie);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.ref-bild:hover{transform:translateY(-5px);box-shadow:0 44px 86px -40px rgba(0,0,0,1)}
.ref-bild>img:first-child{width:100%;height:auto;border-radius:var(--rund)}
.ref-handy{position:absolute;right:-14px;bottom:-20px;width:clamp(72px,11%,112px);height:auto;
  border-radius:11px;border:2px solid var(--karte);
  box-shadow:0 18px 36px -18px rgba(0,0,0,1)}
.ref-art{font-family:var(--fest);font-size:.71rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--rot-text);margin:0 0 .5rem}
.ref-knoepfe{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:clamp(16px,1.8vw,22px)}
.ref-punkte{list-style:none;margin:0 0 1.4rem;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.ref-punkte li{font-family:var(--fest);font-size:.73rem;padding:.34rem .72rem;border-radius:999px;
  color:var(--leise);background:var(--rot-nebel);
  box-shadow:inset 0 0 0 1px rgba(166,243,234,.2)}

/* ---------- 17 Fragen ---------- */

.fragen{display:flex;flex-direction:column;gap:clamp(10px,1.2vw,14px);
  margin-top:clamp(30px,3.6vw,44px)}
.fragen details{border-radius:var(--rund-klein);background:var(--karte);overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--linie);
  transition:box-shadow .45s var(--ease),background-color .45s var(--ease)}
.fragen details[open]{box-shadow:inset 0 0 0 1px rgba(166,243,234,.42);
  background:linear-gradient(170deg,rgba(44,224,206,.1),var(--karte))}
.fragen summary{list-style:none;cursor:pointer;position:relative;
  padding:clamp(17px,2vw,23px) 3.2rem clamp(17px,2vw,23px) clamp(18px,2.2vw,28px);
  font-family:var(--display);font-weight:700;font-size:clamp(1rem,1.9vw,1.13rem);
  letter-spacing:-.018em;color:var(--text);transition:color .3s var(--ease)}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary:hover{color:var(--rot-text)}
.fragen summary::before,.fragen summary::after{content:"";position:absolute;
  right:clamp(18px,2.2vw,28px);top:50%;width:13px;height:2px;border-radius:2px;
  background:var(--rot-text);transition:transform .4s var(--ease),opacity .4s var(--ease)}
.fragen summary::before{transform:translateY(-50%)}
.fragen summary::after{transform:translateY(-50%) rotate(90deg)}
.fragen details[open] summary::after{transform:translateY(-50%);opacity:0}
.fragen .antwort{padding:0 clamp(18px,2.2vw,28px) clamp(18px,2.2vw,25px);color:var(--leise)}
.fragen .antwort p{max-width:72ch}
.fragen .antwort p:last-child{margin-bottom:0}
.fragen details[open] .antwort{animation:antwortRein .45s var(--ease) both}
@keyframes antwortRein{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
.hebt{color:var(--rot-text);font-weight:600;
  background:linear-gradient(transparent 62%,rgba(44,224,206,.26) 62%);padding:0 .1em}

/* ---------- 18 Kontakt ---------- */

.kontakt-raster{display:grid;gap:clamp(26px,3.4vw,56px);align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);margin-top:clamp(30px,3.6vw,46px)}
@media (max-width:900px){.kontakt-raster{grid-template-columns:1fr}}

.wege{display:flex;flex-direction:column;gap:.7rem;margin-top:clamp(22px,2.6vw,32px)}
.weg{display:flex;align-items:center;gap:.9rem;padding:.9rem 1.1rem;border-radius:var(--rund-klein);
  background:var(--karte);box-shadow:inset 0 0 0 1px var(--linie);text-decoration:none;
  color:var(--text);transition:background-color .35s var(--ease),transform .35s var(--ease)}
.weg:hover{background:var(--karte-2);transform:translateX(4px);color:var(--text)}
.weg .sym{flex:none;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  background:var(--rot-nebel)}
.weg .sym svg{width:17px;height:17px;fill:none;stroke:var(--rot-zart);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.weg b{display:block;font-family:var(--fest);font-size:.92rem;font-weight:500;letter-spacing:.01em;
  text-transform:none}
.weg span{display:block;font-family:var(--fest);font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--leiser);margin-top:.1rem}

/* Die nächsten freien Termine, direkt im Kontaktabschnitt. */
.termin-kasten{margin-top:clamp(22px,2.6vw,32px);padding-top:clamp(20px,2.4vw,28px);
  border-top:1px solid var(--linie)}
.termin-heute{display:inline-flex;align-items:center;gap:.55rem;margin:0 0 1rem;
  font-family:var(--fest);font-size:.8rem;padding:.42rem .9rem;border-radius:999px;
  background:rgba(238,242,255,.07);box-shadow:inset 0 0 0 1px rgba(166,243,234,.28)}
.termin-heute::before{content:"";width:8px;height:8px;border-radius:50%;flex:none;
  background:#7FC08A;box-shadow:0 0 0 3px rgba(127,192,138,.2);
  animation:pochen 2.6s ease-in-out infinite}
.termin-zeiten{list-style:none;margin:.9rem 0 1.2rem;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.termin-zeit{display:inline-flex;flex-direction:column;gap:.1rem;padding:.5rem .85rem;
  min-height:48px;justify-content:center;border-radius:11px;text-decoration:none;
  font-family:var(--fest);color:var(--text);background:rgba(238,242,255,.06);
  box-shadow:inset 0 0 0 1px var(--linie);
  transition:background-color .3s var(--ease),box-shadow .3s var(--ease)}
.termin-zeit:hover{background:var(--rot-nebel);color:var(--text);
  box-shadow:inset 0 0 0 1px var(--rot-zart)}
.termin-zeit em{font-style:normal;font-size:.68rem;letter-spacing:.06em;color:var(--rot-text)}
.termin-zeit b{font-size:.92rem;font-weight:500}

form{display:grid;gap:1rem}
.reihe2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:560px){.reihe2{grid-template-columns:1fr}}
.feld{display:flex;flex-direction:column;gap:.4rem}
.feld label{font-family:var(--fest);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--leiser)}
.feld input,.feld textarea{
  font-family:var(--lese);font-size:1rem;color:var(--text);
  background:rgba(238,242,255,.05);border:1px solid var(--linie-stark);border-radius:var(--rund-klein);
  padding:.82rem .95rem;width:100%;min-height:48px;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),background-color .3s var(--ease)}
.feld textarea{min-height:7.5rem;resize:vertical;line-height:1.6}
.feld input::placeholder,.feld textarea::placeholder{color:var(--leiser)}
.feld input:focus,.feld textarea:focus{outline:0;border-color:var(--rot);
  background:rgba(238,242,255,.08);box-shadow:0 0 0 3px rgba(44,224,206,.22)}
.falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{margin:0;font-family:var(--fest);font-size:.74rem;color:var(--leiser);line-height:1.6}

.gesendet{display:none;border-radius:var(--rund-klein);padding:clamp(20px,2.4vw,28px);
  background:linear-gradient(150deg,rgba(127,192,138,.14),var(--karte));
  box-shadow:inset 0 0 0 1px rgba(127,192,138,.3)}
.gesendet.da{display:block;animation:antwortRein .5s var(--ease) both}
.gesendet.fehler{background:linear-gradient(150deg,rgba(44,224,206,.16),var(--karte));
  box-shadow:inset 0 0 0 1px rgba(166,243,234,.34)}
.gesendet b{display:block;font-family:var(--display);font-weight:800;font-size:1.15rem;
  letter-spacing:-.025em;margin-bottom:.5rem}
.gesendet p{margin:0 0 .6rem;color:var(--leise);font-size:.96em}
.gesendet p:last-child{margin-bottom:0}

/* ---------- 19 Fuß ---------- */

/* Kein harter Anfang mehr.

   Vorher lag auf dem Fuss eine halbdurchsichtige dunkle Flaeche, die
   genau an seiner Oberkante ansetzte: ueber dem Strich hell, darunter
   schlagartig dunkler, quer ueber die ganze Breite. Genau das hat
   Simon als Cut gesehen - gemessen ein Sprung von 11,11,22 auf
   17,17,29 an einer einzigen Zeile.

   Jetzt laeuft dieselbe Abdunklung als Verlauf ueber die ersten 220
   Pixel ein. Die Trennlinie bleibt, aber die Flaeche dahinter kommt
   leise. */
/* Der Fuss wird nach unten hin VOLL deckend und endet in genau der
   Farbe des Dokumentgrunds.

   Grund: Zieht man auf dem iPhone am unteren Ende weiter, zeigt iOS
   den Grund des Dokuments. Solange der Fuss nur halbdurchsichtig war,
   schienen die Lichter durch ihn hindurch - darunter kam der reine
   Grund ohne Lichter, und genau dort war die Kante zu sehen, die Simon
   beschreibt. Deckend gibt es nichts mehr zu unterscheiden. */
/* Unten Luft: Ohne sie ragt die riesige Wortmarke mit ihren
   Unterlaengen aus dem Fuss heraus. Die letzten Bildzeilen der Seite
   lagen dann ausserhalb seiner deckenden Flaeche - gemessen 15,13,19
   statt 5,6,13 - und beim Ueberziehen war der Sprung sichtbar. */
/* KEINE Linie mehr oben. Sie war der "Cut", den Simon beschreibt:
   darueber der helle Grund der Seite, darunter der dunkle Fuss, und
   dazwischen ein Strich. Jetzt geht das eine ins andere ueber - der
   Verlauf darunter faengt dafuer frueher an. */
footer{position:relative;z-index:2;margin-top:clamp(40px,6vw,86px);
  /* Der Sicherheitsabstand am unteren Rand gehoert MIT in den Fuss.
     Sonst endet das Dokument darueber, und in dem Streifen darunter
     liegt nur noch das feste warme Licht - das war der braune Balken,
     den Simon auf jedem Geraet gesehen hat. Gemessen aus seinem Foto:
     33 Bildpunkte hoch, der Sicherheitsabstand am iPhone ist 34. */
  /* Unten kein Abstand mehr: Der angeschnittene Schriftzug IST das
     Ende der Seite. Der Sicherheitsabstand am iPhone bleibt. */
  padding:clamp(36px,4.4vw,56px) 0 var(--unten);
  background:linear-gradient(180deg,
    rgba(5,6,13,0) 0,
    rgba(5,6,13,.3) 90px,
    rgba(5,6,13,.72) 210px,
    var(--nacht) 360px)}
.fuss{display:grid;gap:clamp(26px,3.4vw,50px);
  grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr))}
@media (max-width:900px){.fuss{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.fuss{grid-template-columns:1fr}}
.fuss-marke{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--text);
  font-family:var(--display);font-weight:800;font-size:1.15rem;letter-spacing:-.03em}
.fuss-marke img{width:32px;height:36px;object-fit:contain}
.fuss-motto{margin:.9rem 0 .3rem;font-family:var(--fest);font-size:.76rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--rot-text)}
.fuss-adr{margin:.8rem 0 0;font-family:var(--fest);font-size:.76rem;color:var(--leiser);line-height:1.9}
.fuss .fuss-h{margin:0 0 .9rem;font-family:var(--fest);font-size:.71rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--leiser);font-weight:400}
.fuss ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.56rem}
.fuss ul a{font-family:var(--fest);font-size:.8rem;color:var(--leise);text-decoration:none;
  transition:color .3s var(--ease)}
.fuss ul a:hover{color:var(--text)}
.sozial{display:flex;gap:.3rem;margin-top:1.2rem}
.sozial a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  color:var(--leise);text-decoration:none;
  transition:color .3s var(--ease),background-color .3s var(--ease),transform .3s var(--ease)}
.sozial a:hover{color:var(--text);background:var(--rot-nebel);transform:translateY(-2px)}
.sozial svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
/* `max-width:none`, weil jeder Absatz hoechstens 68 Zeichen breit sein
   darf - gemessen waren das hier 402 Pixel. Die Trennlinie ueber dem
   Copyright hoerte deshalb mitten auf der Seite auf. */
.fuss-recht{margin-top:clamp(20px,2.4vw,32px);padding-top:1.3rem;border-top:1px solid var(--linie);
  max-width:none;
  font-family:var(--fest);font-size:.74rem;color:var(--leiser);
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center}
.fuss-recht a{color:var(--leiser);text-decoration:none}
.fuss-recht a:hover{color:var(--text)}

/* Der große Schriftzug, unten auslaufend. Anklickbar: er führt nach oben. */
/* Gross und ganz unten, so wie vorher. Sie faehrt beim Erreichen von
   unten herein und wird dabei klar; der Verlauf ist oben deutlich und
   nach unten hin blasser, damit sie am Seitenende ausklingt statt
   abzubrechen. */
.riesig-rahmen{margin-top:clamp(26px,4vw,52px);padding-bottom:clamp(6px,.8vw,14px);
  user-select:none}
.riesig-rahmen a{display:block;text-decoration:none}
/* 12,6 vw statt 20: Bei Ascendia heisst der Name "ascendia" (8
   Zeichen), hier "jaeschke.flegel" (15). Mit 20 vw war er bei 1440
   rund 2250 Pixel breit und wurde rechts abgeschnitten - gerechnet
   passt er bei knapp 12,6 vw genau ueber die Breite. */
.riesig{font-family:var(--display);font-size:clamp(34px,12.6vw,230px);font-weight:800;
  letter-spacing:-.055em;line-height:.82;padding-bottom:0;
  text-align:center;white-space:nowrap;
  background:linear-gradient(180deg,rgba(238,242,255,.3) 0%,
             rgba(139,108,248,.22) 46%,
             rgba(44,224,206,.1) 74%,
             rgba(44,224,206,0) 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  will-change:transform,opacity}
.riesig .punkt{width:.17em;height:.17em;background:rgba(44,224,206,.32);
  margin:0 .04em .06em;vertical-align:baseline}

/* ---------- 19b Unterseiten ---------- */

/* Der Kopf einer Unterseite. Kein 360vh-Film, nur ein ruhiger Anfang -
   wer hier landet, will etwas nachlesen, nicht bestaunt werden. */
.seiten-kopf{position:relative;z-index:2;
  padding:clamp(104px,13vh,150px) 0 clamp(34px,4vw,52px)}
.seiten-kopf h1{margin:0;max-width:18ch}
.seiten-kopf .lead{margin:clamp(14px,1.8vw,22px) 0 0}
.seiten-stand{margin:.7rem 0 0;font-family:var(--fest);font-size:.76rem;
  letter-spacing:.06em;color:var(--leiser)}
.seiten-kopf .knoepfe{margin-top:clamp(22px,2.6vw,32px)}
/* Der Abschnitt direkt unter dem Kopf braucht keinen eigenen Abstand
   mehr - sonst klafft zwischen Titel und erstem Satz eine Luecke. */
.seiten-kopf+section{padding-top:0}

/* Abschnittsueberschriften auf Unterseiten. Sie sind nicht der Titel der
   Seite, sondern gliedern sie - deshalb kleiner als auf der Startseite.
   Und sie brauchen Luft nach oben, sonst stossen sie an die Karten des
   Abschnitts davor. */
section.eng .wrap>h2{font-size:clamp(1.55rem,3vw,2.15rem);
  margin:clamp(42px,5vw,70px) 0 clamp(14px,1.8vw,22px)}
section.eng .wrap>h2:first-child{margin-top:0}
section.eng .wrap>.lead{margin-bottom:clamp(8px,1.2vw,16px)}
section.eng .wrap>p{max-width:72ch}

/* Brotkrumen: zeigen, wo man ist, und fuehren mit einem Klick zurueck. */
.pfad{margin:0 0 clamp(18px,2.2vw,26px);padding:0;list-style:none;
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  font-family:var(--fest);font-size:.74rem;color:var(--leiser)}
.pfad li{display:flex;align-items:center;gap:.5rem}
.pfad li+li::before{content:"/";color:var(--linie-stark)}
.pfad a{color:var(--leise);text-decoration:none;
  border-bottom:1px solid transparent;transition:color .3s var(--ease),border-color .3s var(--ease)}
.pfad a:hover{color:var(--text);border-bottom-color:var(--linie-stark)}
.pfad [aria-current]{color:var(--rot-text)}

/* Rechtstexte: eine Spalte, grosszuegige Zeilen, nichts Buntes. Hier
   zaehlt nur, dass man es ohne Muehe liest. */
.rechtstext{max-width:var(--schmal)}
.rechtstext h2{font-size:clamp(1.3rem,2.5vw,1.72rem);
  margin:clamp(34px,4vw,52px) 0 .8rem;scroll-margin-top:clamp(84px,9vh,112px)}
.rechtstext h2:first-of-type{margin-top:clamp(18px,2.2vw,28px)}
.rechtstext h3{font-size:clamp(1.05rem,1.9vw,1.24rem);margin:clamp(22px,2.6vw,32px) 0 .5rem}
.rechtstext p{margin:0 0 1rem;color:var(--leise);line-height:1.78}
.rechtstext strong{color:var(--text);font-weight:600}
.rechtstext address{font-style:normal;margin:0 0 1rem;color:var(--leise);line-height:1.9}
.rechtstext ul{margin:0 0 1.1rem;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:.5rem}
.rechtstext ul li{display:grid;grid-template-columns:.7em 1fr;gap:.7rem;
  color:var(--leise);line-height:1.72}
.rechtstext ul li::before{content:"";width:5px;height:5px;margin-top:.62em;
  border-radius:50%;background:var(--rot);flex:none}
.rechtstext a{color:var(--rot-text);text-decoration:none;
  border-bottom:1px solid rgba(54,228,210,.34);
  transition:border-color .3s var(--ease)}
.rechtstext a:hover{border-bottom-color:var(--rot-text)}

/* Ein eingerahmter Hinweis mitten im Text. */
.hinweis{margin:clamp(26px,3vw,38px) 0;padding:clamp(20px,2.4vw,28px);
  border-radius:var(--rund-klein);background:var(--karte);
  box-shadow:inset 0 0 0 1px var(--linie)}
.hinweis::before{content:"";display:block;width:34px;height:2px;
  background:var(--rot);margin-bottom:1rem;border-radius:2px}
.hinweis p{margin:0 0 .7rem;color:var(--leise)}
.hinweis p:last-child{margin-bottom:0}
.hinweis strong{color:var(--text)}

/* Nur fuer Bestandskunden sichtbar gemachte Hinweise. */
.nurbestand{margin:clamp(22px,2.6vw,32px) 0 0;padding:clamp(18px,2.2vw,26px);
  border-radius:var(--rund-klein);
  background:linear-gradient(140deg,rgba(44,224,206,.12),var(--karte));
  box-shadow:inset 0 0 0 1px rgba(166,243,234,.26);
  color:var(--leise);font-size:.96em;line-height:1.72}
.nurbestand strong{color:var(--text)}
.nurbestand a{color:var(--rot-text)}

/* Die Listenkarten auf "Leistungen". */
.gruppen{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(14px,1.7vw,22px);
  margin-top:clamp(26px,3vw,38px);
  grid-template-columns:repeat(auto-fit,minmax(288px,1fr))}
.gruppe{border-radius:var(--rund);padding:clamp(24px,2.7vw,32px);
  background:var(--karte);box-shadow:inset 0 0 0 1px var(--linie);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.gruppe:hover{transform:translateY(-4px);
  box-shadow:inset 0 0 0 1px var(--linie-stark),0 26px 56px -34px rgba(0,0,0,.95)}
.gruppe h3{margin:0 0 1.1rem;font-size:clamp(1.08rem,1.9vw,1.28rem)}
.gruppe ul{list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:.9rem}
.gruppe li{display:grid;grid-template-columns:1.2em 1fr;gap:.7rem;
  align-items:baseline;color:var(--leise);line-height:1.66;font-size:.97em}
.gruppe li>span:first-child{font-family:var(--fest);font-size:.9em;color:var(--rot-text)}
.gruppe li b{color:var(--text);font-weight:600}

/* Die Vergleichstabelle. Auf dem Handy wandert sie seitlich, deshalb
   bleibt die erste Spalte stehen - sonst weiss man nicht mehr, welche
   Zeile man gerade liest. */
.tabelle-rahmen{margin-top:clamp(26px,3vw,38px);overflow-x:auto;
  border-radius:var(--rund);background:var(--karte);
  box-shadow:inset 0 0 0 1px var(--linie);
  scrollbar-width:thin}
.vergleich{width:100%;border-collapse:collapse;min-width:620px;
  font-size:.94rem}
.vergleich caption{text-align:left;padding:clamp(20px,2.4vw,28px) clamp(20px,2.4vw,28px) 0;
  font-family:var(--fest);font-size:.73rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--rot-text)}
.vergleich th,.vergleich td{padding:.82rem clamp(12px,1.4vw,18px);text-align:left;
  border-bottom:1px solid var(--linie)}
.vergleich thead th{position:sticky;top:0;z-index:2;
  background:var(--karte-2);
  font-family:var(--fest);font-size:.74rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--leise);font-weight:500;white-space:nowrap}
.vergleich tbody th[scope=row]{font-weight:500;color:var(--text);
  position:sticky;left:0;z-index:1;background:var(--karte);
  min-width:190px}
.vergleich .gruppenzeile th{background:var(--karte-2);
  font-family:var(--fest);font-size:.72rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--rot-text);font-weight:500}
.vergleich td{text-align:center;color:var(--leise)}
.vergleich .ja{color:var(--rot-text);font-family:var(--fest)}
.vergleich .nein{color:var(--leiser);font-family:var(--fest)}
.vergleich .wert{font-family:var(--fest);font-size:.86em;color:var(--text)}
.vergleich tbody tr:hover th[scope=row],
.vergleich tbody tr:hover td{background:rgba(238,242,255,.035)}
/* Die Premium-Spalte bekommt einen leichten Schimmer, damit das Auge
   sie findet - sie ist der Tarif, auf den die Seite hinauslaeuft. */
.vergleich .c3{background:rgba(44,224,206,.07)}
.vergleich thead .c3{background:rgba(44,224,206,.16);color:var(--rot-zart)}

/* Wartung, Hosting, Adresse: was danach freiwillig dazukommt. */
.bausteine{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(14px,1.7vw,22px);
  margin-top:clamp(26px,3vw,38px);
  grid-template-columns:repeat(auto-fit,minmax(262px,1fr))}
.baustein{position:relative;display:flex;flex-direction:column;gap:.7rem;
  border-radius:var(--rund);padding:clamp(24px,2.7vw,32px);
  background:var(--karte);backdrop-filter:blur(20px) saturate(1.45);
  -webkit-backdrop-filter:blur(20px) saturate(1.45);
  box-shadow:inset 0 1px 0 0 rgba(238,242,255,.16),
             inset 0 0 0 1px var(--linie),0 30px 70px -48px #000;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.baustein:hover{transform:translateY(-5px);
  box-shadow:inset 0 1px 0 0 rgba(238,242,255,.24),
             inset 0 0 0 1px var(--linie-stark),0 40px 86px -44px rgba(44,224,206,.4)}
.baustein h3{margin:0;font-size:clamp(1.08rem,1.9vw,1.28rem)}
.baustein .baustein-preis{font-family:var(--display);font-weight:800;
  font-size:clamp(1.5rem,2.8vw,2rem);letter-spacing:-.035em;line-height:1;
  color:var(--text)}
.baustein p{margin:0;color:var(--leise);font-size:.97em;line-height:1.7}
.baustein .marke{display:inline-flex;align-self:flex-start;
  font-family:var(--fest);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.3rem .7rem;border-radius:999px;background:var(--rot-nebel);color:var(--rot-zart);
  box-shadow:inset 0 0 0 1px rgba(166,243,234,.26)}
.baustein.hebt{box-shadow:inset 0 0 0 1px rgba(166,243,234,.34)}
.fest-text{font-family:var(--fest);font-size:.86rem;color:var(--leise);
  letter-spacing:.02em;line-height:1.7}
/* Ein Hinweissatz nach einer Knopfreihe braucht Abstand nach oben,
   sonst klebt er am Knopf. */
.knoepfe+.fest-text,.knoepfe+p{margin-top:clamp(20px,2.4vw,30px)}
.fest-text+.fest-text{margin-top:.7rem}

/* ---------- 19b2 Die Linie um den Kasten ---------- */

/* Beim Ueberfahren wandert ein heller Abschnitt einmal um die Kante.

   Gebaut aus einem Kegelverlauf, der ueber eine Maske nur auf dem Rand
   zu sehen ist. Ein Rahmen (`border`) kann das nicht: Er wird an allen
   gesetzten Seiten gezeichnet, auch waehrend der Kasten noch waechst -
   und hinterlaesst dann Striche mitten im Kasten. Dieser Weg kann das
   nicht, weil nie etwas anderes als der Rand sichtbar ist.

   Gedreht wird nur der Winkel des Verlaufs, nicht das Element: Beim
   Drehen des Elements wuerde die Maske mitdrehen und aus dem Rand ein
   Band quer durchs Bild machen. */
@property --kante-winkel{syntax:'<angle>';initial-value:0deg;inherits:false}

.kante{position:relative;isolation:isolate}
.kante::after{
  content:"";position:absolute;inset:-1px;z-index:5;
  border-radius:inherit;pointer-events:none;
  padding:1.4px;
  background:conic-gradient(from var(--kante-winkel),
    transparent 0deg,
    rgba(166,243,234,.1) 10deg,
    var(--rot-text) 24deg,
    var(--violett-zart) 34deg,
    rgba(166,243,234,.1) 44deg,
    transparent 54deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  opacity:0;
  transition:opacity .45s var(--ease)}

@keyframes kanteRunde{to{--kante-winkel:360deg}}

/* Die Staffel. Jeder Kasten bekommt sein eigenes Zeitfenster in einer
   gemeinsamen Runde: Kasten 1 leuchtet, dann 2, dann 3, dann 4, dann
   wieder von vorn. So ist dauernd etwas in Bewegung, aber nie mehr als
   eine Linie gleichzeitig.

   Vorher liefen ohne Maus alle gleichzeitig los, weil alle gleichzeitig
   ins Bild kommen. Genau das hat Simon als "sehr viel auf einmal"
   beschrieben. */
/* Zwei Bewegungen uebereinander statt einer:
   `kanteRunde` dreht den Lichtpunkt - immer, bei allen.
   `kanteAn`    entscheidet, wer gerade zu sehen ist.

   66 % an, versetzt um ein Viertel der Runde: Damit sind staendig
   zwischen zwei und drei Kaesten hell, beim Wechsel kurz alle vier.
   Vorher waren es 22 % an - also nie zwei gleichzeitig und oft gar
   keiner. Genau das hat Simon bemaengelt. */
@keyframes kanteAn{
  0%   {opacity:0}
  4%   {opacity:.85}
  62%  {opacity:.85}
  70%  {opacity:0}
  100% {opacity:0}
}
.kante.da::after{
  animation:kanteRunde 3.4s linear infinite,
            kanteAn calc(var(--staffel,4) * 2.6s) linear infinite;
  /* --kn ist die Stellung des Kastens in seiner Gruppe, modulo vier.
     Sie kommt vom Skript: Das Stilblatt kann nicht wissen, der
     wievielte ein Kasten ist. */
  /* NEGATIVE Verzoegerung: Damit laeuft jeder Kasten von Anfang an
     mitten in seiner Runde, statt erst nach ein paar Sekunden
     anzufangen. Sonst leuchtet direkt nach dem Einblenden nur einer -
     gemessen: 1 1 1 1 2 2 2 ... */
  animation-delay:0s,calc(var(--kn,0) * -2.6s)}

/* Faehrt man einen Kasten an, wird er hervorgehoben: volles Licht,
   schnellere Runde, dickere Linie. Die anderen laufen weiter - so
   bleibt die Reihe lebendig, und trotzdem ist klar, wo man steht. */
.kante:hover::after,.kante:focus-within::after{
  opacity:1;padding:2px;
  animation:kanteRunde 2.2s linear infinite}

@media (prefers-reduced-motion:reduce){
  .kante::after{display:none}
}

/* Nur dort, wo ein Kasten wirklich eine Auswahl ist: die vier Punkte,
   die Leistungsgruppen, die Bausteine und die Tarife. Auf jedem Zitat,
   jedem Schritt und jeder Referenz war es zu viel - dann ist es keine
   Betonung mehr, sondern Unruhe. */

/* ---------- 19c Waisen mittig ---------- */

/* Bleibt in der letzten Reihe nur ein Kaestchen uebrig, steht es sonst
   allein ganz links und sieht aus wie vergessen. Mit Flexbox und
   `justify-content:center` rueckt es von selbst in die Mitte - ohne dass
   irgendwo die Spaltenzahl geraten werden muss.

   `--sp` ist die Zahl der Kaestchen je Reihe. Daraus kommt die Breite;
   dadurch bleibt ein einzelnes Kaestchen so breit wie die anderen und
   zieht sich nicht ueber die ganze Zeile. */
.reihe-mitte{display:flex;flex-wrap:wrap;justify-content:center;
  --sp:3;--l:clamp(14px,1.7vw,22px);gap:var(--l)}
.reihe-mitte>*{
  flex:1 1 calc((100% - (var(--sp) - 1) * var(--l)) / var(--sp));
  max-width:calc((100% - (var(--sp) - 1) * var(--l)) / var(--sp));
  min-width:min(100%,238px)}

/* Wie viele je Reihe, je nach Platz. */
.raster.vier{--sp:4}
@media (max-width:1180px){.raster.vier{--sp:2}}
@media (max-width:560px){.raster.vier{--sp:1}}
.zitate,.gruppen,.bausteine{--sp:3}
@media (max-width:1040px){.zitate,.gruppen,.bausteine{--sp:2}}
@media (max-width:640px){.zitate,.gruppen,.bausteine{--sp:1}}

/* ---------- 20 Auftauchen ---------- */

/* Einmal herein, dann steht es. Beim Zurückscrollen verschwindet nichts:
   Was man gelesen hat, soll nicht wieder weggehen. */
/* `translate` statt `transform`.

   Grund: Die Tarife neigen sich zum Zeiger - das laeuft ueber
   `transform`. Solange der Auftritt dieselbe Eigenschaft benutzt,
   ueberschreibt die spaetere Regel die fruehere, und von der
   Verschiebung bleibt nichts. Die Karten blendeten dann nur noch auf,
   statt zu kommen: genau das "Aufploppen", das Simon gestoert hat.

   `translate` ist eine eigene Eigenschaft. Beide koennen nebeneinander
   laufen, ohne sich zu stoeren. */
/* Die Kurve `--ease-aus` ist kopflastig: nach einem Fuenftel der Zeit
   waren 68 % der Deckkraft da - gemessen. Das wirkt wie "sofort da".
   Zwei ruhigere Kurven und mehr Zeit: Jetzt sind es nach 160 ms rund
   20 %, und die Karte kommt wirklich herein, statt zu erscheinen. */
/* Aufschwimmen statt auftauchen. Simon: "nicht aufploppen, sondern
   aufschwimmen."

   Drei Dinge zusammen machen den Unterschied: ein laengerer Weg von
   unten (38 statt 26 Pixel), eine Spur kleiner am Anfang, und eine
   Kurve, die klar auslaeuft statt gleichmaessig durchzuziehen.
   `scale` ist eine eigene Eigenschaft - sie stoert weder das Anheben
   beim Ueberfahren (`transform`) noch den Weg (`translate`). */
.auf{opacity:0;translate:0 38px;scale:.976;
  transition:opacity 1.25s cubic-bezier(.25,.46,.3,1),
             translate 1.45s cubic-bezier(.16,.72,.26,1),
             scale 1.45s cubic-bezier(.16,.72,.26,1)}
.auf.da{opacity:1;translate:none;scale:none}
.auf[style*="--n"]{transition-delay:calc(var(--n) * 110ms)}

/* ---------- 21 Weniger Bewegung ---------- */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* Kein Rundumschlag mehr ueber `*`. Der hat jede Bewegung der Seite
     erschlagen - auch das Schlagwortband, das bei Simon deshalb
     stillstand. Abgeschaltet wird gezielt, was den Blick mitzieht. */
  .auf{opacity:1;translate:none;scale:none;transition:none}
  .hero h1 .wort{opacity:1;transform:none;animation:none}
  .schleier,.lichter i,.fleck{animation:none}
  .knopf.voll::after,.krone::after{animation:none;display:none}
  .reigen-karte,.kopf-karte,.karte,.tarif{transition-duration:.001ms}
  /* Der Hero braucht dann keinen langen Scrollweg: Wer keine Bewegung
     will, soll nicht vier Bildschirme weit scrollen, um sie nicht zu sehen. */
  .hero{height:auto}
  .hero-buehne{position:relative;height:auto;min-height:0;padding:clamp(70px,12vw,140px) 0}
  .bau{position:relative;inset:auto;margin-top:clamp(30px,4vw,50px)}
  .hero-wink{display:none}
}

/* ---------- Druck ---------- */
@media print{
  .schleier,.koernung,.fleck,.kopf,.menue,.band,.laufschrift,.riesig-rahmen{display:none}
  body{background:#fff;color:#000}
  .hero{height:auto}
  .hero-buehne{position:static;height:auto}
}

/* ---------- 22 Handy-Feinschliff ---------- */

/* Diese Regeln stehen bewusst ganz am Ende. Bei gleicher Staerke gewinnt
   die spaetere Regel, und mehrere Grundregeln (.wir, .reigen-karte,
   section) stehen weiter oben in dieser Datei. Weiter vorne haetten
   diese Zeilen keine Wirkung - gemerkt habe ich das nur durch Nachmessen
   im Browser, in der Datei sieht man es nicht. */

@media (max-width:760px){
  /* Zwei Bilder untereinander ueber die ganze Breite sind riesig.
     Begrenzt und mittig sind sie ruhiger. */
  .wir{max-width:300px;gap:14px}

  /* Groessere Karten im Reigen: eins ganz und eines halb sagt mehr als
     zwei halbe. */
  .reigen-karte{flex:0 0 clamp(188px,54vw,232px)}
  .reigen{margin-top:18px}
  .reigen-pfeile{margin-top:10px}

  /* Weniger Luft zwischen den Abschnitten. */
  section{padding:clamp(40px,9vw,60px) 0}
  .seiten-kopf+section{padding-top:0}

  /* Die Bewertungskarten duerfen breiter sein - auf dem Handy liest man
     eine nach der anderen, nicht drei nebeneinander. */
  .stimmen>li{flex:0 0 min(82vw,320px)}

  /* Die Tarifkarten stehen untereinander; Premium bleibt die
     hervorgehobene, aber ohne Groessensprung - der wirkt in einer
     Spalte wie ein Fehler. */
  .tarif.voll{transform:none;padding:clamp(26px,6vw,34px)}
  .tarif.beliebt{transform:none}

  /* Die Linie am Ablauf rueckt naeher an die Karten. */
  .schritt-spalte{padding-left:20px}

  /* Der grosse Schriftzug braucht auf schmalen Schirmen weniger Luft
     nach unten, sonst entsteht ein leerer Streifen. */
  .riesig-rahmen{margin-top:clamp(18px,5vw,30px)}
}

/* ---------- 23 Glas-Feinschliff ---------- */

/* Dieser Block steht bewusst ganz am Ende.

   Was hier steht, sind nicht neue Bauteile, sondern der letzte Schliff
   an vorhandenen: Flaechen, die auf durchsichtig umgestellt wurden,
   brauchen das Verwischen dahinter, sonst sind sie nur blass statt
   glaesern. Bei gleicher Staerke gewinnt die spaetere Regel - deshalb
   hier und nicht mitten im Stilblatt, wo schon einmal drei Handy-Regeln
   wirkungslos verpufft sind, weil sie zu frueh standen. */

.zitat,.reigen-karte,.kopf-karte,.note,.grund,
.fragen details,.weg,.gesendet,.hinweis,.nurbestand,.gruppe,
.tabelle-rahmen,.feld input,.feld textarea,.feld select{
  backdrop-filter:blur(16px) saturate(1.35);
  -webkit-backdrop-filter:blur(16px) saturate(1.35)}

/* Die Bewertungen bewusst OHNE `backdrop-filter`: Die Reihe laeuft
   dauernd, und eine unscharfe Flaeche muss dann Bild fuer Bild neu
   gerechnet werden. Auf dem Handy war das als Zucken zu sehen -
   Simon: "die gehen so an und aus". Eine feste Flaeche sieht fast
   gleich aus und kostet nichts. */
.stimme{background:#121728;backdrop-filter:none;-webkit-backdrop-filter:none}

/* Eine helle Kante oben an jeder Scheibe. Echtes Glas hat dort eine
   Lichtkante - ohne sie sieht eine durchsichtige Flaeche aus wie ein
   Loch im Hintergrund, nicht wie eine Platte davor. */
.zitat,.reigen-karte,.note,.stimme,.grund,.fragen details,
.weg,.hinweis,.gruppe,.baustein,.tarif:not(.voll),.karte{
  box-shadow:inset 0 1px 0 0 rgba(238,242,255,.15),
             inset 0 0 0 1px var(--linie),
             0 30px 70px -50px #000}

/* Die Inseln im Kopf: kuehl statt warm, und etwas staerker verwischt -
   sie liegen ueber allem und muessen trotzdem lesbar bleiben. */
.insel{background:rgba(8,11,22,.74);
  backdrop-filter:blur(22px) saturate(1.5);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);
  box-shadow:inset 0 1px 0 0 rgba(238,242,255,.16),
             inset 0 0 0 1px var(--linie),0 18px 40px -26px #000}

/* Eingabefelder sind auch Glas. Ein kraeftiger Rahmen beim Hineingehen,
   damit klar ist, wo man schreibt. */
.feld input,.feld textarea,.feld select{background:var(--karte)}
.feld input:focus,.feld textarea:focus,.feld select:focus{
  background:rgba(238,242,255,.1);
  box-shadow:0 0 0 3px rgba(44,224,206,.18)}

/* Der Griff am Regler leuchtet jetzt, statt nur hell zu sein. */
.regler-griff{box-shadow:0 0 0 2px rgba(5,6,13,.6),0 0 24px -2px rgba(44,224,206,.8)}

/* Bilder in der Glaswelt: eine Spur kuehler, damit sie nicht wie
   aufgeklebt wirken. Beim Ueberfahren kommen die echten Farben zurueck
   - das ist die Belohnung fuers Hinsehen. */
.reigen-karte img,.ref-bild img,.kopf-karte img{
  filter:saturate(.82) contrast(1.04) brightness(.95);
  transition:filter .7s var(--ease),transform 1s var(--ease)}
.reigen-karte:hover img,.ref-bild:hover img,.kopf-karte:hover img{
  filter:saturate(1.04) contrast(1.02) brightness(1.02)}

/* ---------- 24 Wie es auf der neuen Seite weitergeht ---------- */

/* Drei Kacheln unter dem Regler. Simon hat sie vermisst: "Da fehlen
   unten noch ein paar Bilder."

   Nur die erste Kachel ist ein Foto. Die beiden anderen sind gezeichnet
   - ein Handy und ein Formular. Das hat zwei Gruende: Bildschirmfotos
   von einer erfundenen Seite waeren eine Behauptung, und gezeichnet
   bleibt es auf jedem Bildschirm scharf. */
.weiter-reihe{display:grid;gap:clamp(14px,1.8vw,22px);margin-top:clamp(16px,2vw,24px);
  grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.weiter{margin:0;display:flex;flex-direction:column;gap:.9rem}
.weiter-bild{position:relative;border-radius:var(--rund-klein);overflow:hidden;
  aspect-ratio:4/3;background:var(--karte);
  backdrop-filter:blur(16px) saturate(1.35);-webkit-backdrop-filter:blur(16px) saturate(1.35);
  box-shadow:inset 0 1px 0 0 rgba(238,242,255,.15),inset 0 0 0 1px var(--linie);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.weiter:hover .weiter-bild{transform:translateY(-4px);
  box-shadow:inset 0 1px 0 0 rgba(238,242,255,.26),inset 0 0 0 1px var(--linie-stark),
             0 34px 74px -46px rgba(44,224,206,.5)}
.weiter figcaption{display:flex;flex-direction:column;gap:.3rem}
.weiter figcaption b{font-family:var(--display);font-weight:700;font-size:1.04rem;
  letter-spacing:-.02em}
.weiter figcaption span{color:var(--leise);font-size:.93em;line-height:1.56}

/* Die Galerie: drei Bilder, das erste gross. Beim Ueberfahren tauschen
   sie die Groesse - eine kleine Belohnung fuers Hinsehen. */
.weiter-galerie{display:grid;gap:3px;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;
  padding:3px}
.weiter-galerie img{width:100%;height:100%;object-fit:cover;border-radius:7px;
  transition:filter .6s var(--ease),transform .8s var(--ease)}
.weiter-galerie img:first-child{grid-row:span 2}
.weiter:hover .weiter-galerie img{transform:scale(1.04)}

/* Das gezeichnete Handy. */
.weiter-handy{display:grid;place-items:center;padding:10px}
.wh-geraet{width:min(50%,118px);aspect-ratio:9/18;border-radius:14px;padding:7px 6px 8px;
  background:linear-gradient(170deg,rgba(238,242,255,.1),rgba(238,242,255,.03));
  box-shadow:inset 0 0 0 1.5px var(--linie-stark);
  display:flex;flex-direction:column;gap:4px;overflow:hidden}
.wh-kopf{display:flex;align-items:center;gap:3px}
.wh-kopf i{width:7px;height:7px;border-radius:50%;background:var(--rot);flex:none}
.wh-kopf em{flex:1;height:2px;border-radius:2px;background:var(--linie-stark)}
.wh-held{position:relative;border-radius:6px;padding:6px 5px;
  background:linear-gradient(140deg,rgba(44,224,206,.3),rgba(139,108,248,.26));
  display:flex;flex-direction:column;gap:4px}
.wh-held b{font-family:var(--display);font-weight:800;font-size:7.5px;line-height:1.14;
  letter-spacing:-.02em;color:var(--text)}
.wh-held span{display:block;width:60%;height:5px;border-radius:3px;background:rgba(5,6,13,.5)}
.wh-zeile{height:3px;border-radius:3px;background:var(--linie-stark)}
.wh-knopf{margin-top:auto;border-radius:999px;padding:4px 0;text-align:center;
  font-family:var(--fest);font-size:6.5px;letter-spacing:.06em;color:var(--auf-leit);
  background:linear-gradient(100deg,var(--rot),var(--violett))}

/* Das gezeichnete Formular. */
.weiter-formular{display:flex;flex-direction:column;gap:7px;
  padding:clamp(14px,1.8vw,20px)}
.wf-titel{font-family:var(--display);font-weight:700;font-size:.82rem;letter-spacing:-.02em}
.wf-feld{border-radius:8px;padding:5px 8px;background:rgba(238,242,255,.06);
  box-shadow:inset 0 0 0 1px var(--linie);display:flex;flex-direction:column;gap:4px}
.wf-feld span{font-family:var(--fest);font-size:.56rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--leiser)}
.wf-feld i{display:block;height:3px;width:54%;border-radius:3px;background:var(--linie-stark)}
.wf-feld.gross{flex:1}
.wf-feld.gross i{width:78%}
/* Der Strich im ersten Feld blinkt wie eine Schreibmarke. */
.wf-feld:first-of-type i{background:var(--rot);width:30%;
  animation:schreibmarke 2.4s steps(1,end) infinite}
@keyframes schreibmarke{0%,70%{opacity:1}71%,100%{opacity:.25}}
.wf-knopf{margin-top:2px;border-radius:999px;padding:7px 0;text-align:center;
  font-family:var(--fest);font-size:.66rem;letter-spacing:.04em;color:var(--auf-leit);
  background:linear-gradient(100deg,var(--rot),var(--violett));
  box-shadow:0 10px 24px -12px rgba(44,224,206,.9)}

@media (prefers-reduced-motion:reduce){
  .wf-feld:first-of-type i{animation:none}
}


/* ---------- 25 Faden, Hoch-Knopf, magnetischer Knopf ---------- */

/* Der Faden misst den Weg durch die Seite. Er faerbt sich dabei von
   Tuerkis ueber Violett nach Koralle - dieselben drei Lichter, die
   hinter der Seite liegen, nur aufgereiht. */
.faden{position:fixed;top:0;left:0;right:0;height:3px;z-index:45;pointer-events:none}
.faden i{display:block;height:100%;width:0;border-radius:0 3px 3px 0;
  background:linear-gradient(90deg,var(--rot),var(--violett) 62%,var(--koralle));
  box-shadow:0 0 12px -1px rgba(44,224,206,.9)}

/* Zurueck nach oben. Erscheint erst, wenn es etwas zu holen gibt -
   vorher waere es ein Knopf ohne Aufgabe. */
.hoch{position:fixed;right:clamp(14px,2.2vw,28px);
  bottom:calc(var(--unten) + clamp(14px,2.2vw,28px));z-index:38;
  width:48px;height:48px;border:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  background:rgba(8,11,22,.72);color:var(--text);
  backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:inset 0 1px 0 0 rgba(238,242,255,.18),inset 0 0 0 1px var(--linie),
             0 18px 40px -22px #000;
  opacity:0;visibility:hidden;transform:translateY(12px) scale(.9);
  transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s,
             box-shadow .4s var(--ease)}
body.weit-unten .hoch{opacity:1;visibility:visible;transform:none}
.hoch:hover{box-shadow:inset 0 1px 0 0 rgba(238,242,255,.3),
            inset 0 0 0 1px rgba(44,224,206,.5),0 20px 46px -20px rgba(44,224,206,.7)}
.hoch svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* Der magnetische Knopf. Die Verschiebung setzt das Skript; hier steht
   nur, dass sie sanft nachlaeuft statt zu springen. */
.knopf.voll{transition:transform .25s var(--ease),box-shadow .4s var(--ease),
            background-color .4s var(--ease),color .3s var(--ease)}
.knopf.voll.magnet{transition:transform .12s linear,box-shadow .4s var(--ease)}

@media (prefers-reduced-motion:reduce){
  .hoch{transition:none}
  .faden i{box-shadow:none}
}

/* ---------- 26 Grosse genug zum Antippen ---------- */

/* Gemessen: 41 Links waren niedriger als 44 Pixel. Bei Links im
   Fliesstext ist das in Ordnung - bei Menuepunkten nicht. Ein Finger
   ist etwa 44 Pixel breit, und daneben zu treffen ist der haeufigste
   Grund, warum eine Seite sich auf dem Handy billig anfuehlt.

   Geaendert wird nur die Innenkante, nicht die Schrift: Die Punkte
   sehen gleich aus, sie sind nur leichter zu treffen. */
.kopf nav a{padding-block:.72rem}
.fuss ul{gap:.1rem}
.fuss ul a{display:inline-flex;align-items:center;min-height:44px;padding-block:.2rem}
.sozial a{width:44px;height:44px}
.menue .menue-fuss a{display:inline-flex;align-items:center;min-height:44px}


/* ---------- 27 Regler-Schild, Premium und Business ---------- */

/* Das Schild am Griff: Es sagt, was man tun kann, und verschwindet,
   sobald man es getan hat. */
.regler-schild{position:absolute;z-index:5;top:calc(50% + 34px);left:var(--teiler,34%);
  transform:translateX(-50%);pointer-events:none;
  font-family:var(--fest);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--auf-leit);background:var(--papier);
  padding:.26rem .7rem;border-radius:999px;white-space:nowrap;
  box-shadow:0 8px 20px -8px rgba(0,0,0,.9);
  animation:schildAtmen 2.4s ease-in-out infinite;
  transition:opacity .4s var(--ease)}
@keyframes schildAtmen{0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(3px)}}
.regler.angefasst .regler-schild{opacity:0}
@media (prefers-reduced-motion:reduce){.regler-schild{animation:none}}

/* --- Business tritt vor: eigener Grund statt nur eines Rahmens. --- */
.tarif.beliebt{
  background:linear-gradient(165deg,rgba(44,224,206,.12),rgba(238,242,255,.05) 62%);
  box-shadow:inset 0 1px 0 0 rgba(238,242,255,.24),
             inset 0 0 0 1px rgba(44,224,206,.4),
             0 36px 80px -46px rgba(44,224,206,.7)}
@media (min-width:980px){.tarif.beliebt{transform:translateY(-12px)}}
.tarif.beliebt .marke{background:rgba(44,224,206,.2);color:var(--rot-zart);
  box-shadow:inset 0 0 0 1px rgba(44,224,206,.45);font-weight:700}

/* --- Premium: ein Lichtkegel dahinter. ---

   Der Kegel liegt HINTER der Karte, nicht auf ihr: So wirkt die Karte
   beleuchtet statt angemalt. Er sitzt am Abschnitt, damit er ueber den
   Kartenrand hinausleuchten darf. */
#preise .tarife,.preis-raster{position:relative}
.tarif.voll::after{content:"";position:absolute;z-index:-1;
  left:-14%;right:-14%;top:-10%;bottom:-14%;border-radius:50%;
  background:radial-gradient(62% 54% at 50% 48%,
             rgba(44,224,206,.26) 0%,rgba(80,170,228,.2) 24%,
             rgba(139,108,248,.14) 48%,rgba(139,108,248,.05) 66%,transparent 80%);
/* Keine Unschaerfe mehr: Eine grosse, weich gerechnete Flaeche zeigt
   auf dunklem Grund Stufen - und kostet bei jedem Bild Rechenzeit.
   Ein Verlauf mit mehreren Haltepunkten ist genauso weich und
   stufenfrei. */
  pointer-events:none;
  animation:kegel 7s ease-in-out infinite}
/* Nur die Deckkraft atmet, nicht die Groesse. Eine unscharfe Flaeche
   muss bei jeder Groessenaenderung neu gerechnet werden - das waren die
   zwei schweren Bilder in der Messung. */
@keyframes kegel{0%,100%{opacity:.7}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.tarif.voll::after{animation:none}}

.tarif.voll .jetzt{font-size:clamp(2.4rem,4.8vw,3.4rem)}
@media (min-width:980px){
  .tarif.voll{transform:translateY(-26px) scale(1.035)}
}

/* Alle drei Tarife neigen sich zum Zeiger. Die Werte setzt das Skript;
   hier steht nur, wie daraus eine Neigung wird.

   Jede Stellung bekommt ihre eigene Regel samt `:hover`. Sonst gewinnt
   die aeltere Hover-Regel (`.tarif:hover{transform:translateY(-4px)}`)
   wegen hoeherer Spezifitaet - und die Neigung waere ausgerechnet dann
   weg, wenn der Zeiger darauf liegt. */
.tarif{transform:perspective(1100px) rotate3d(var(--neig-x,0),var(--neig-y,0),0,6deg)}
.tarif:hover{transform:perspective(1100px)
  rotate3d(var(--neig-x,0),var(--neig-y,0),0,6deg) translateY(-6px)}
@media (min-width:980px){
  .tarif.beliebt,.tarif.beliebt:hover{transform:perspective(1100px)
    rotate3d(var(--neig-x,0),var(--neig-y,0),0,6deg) translateY(-12px)}
  .tarif.voll,.tarif.voll:hover{transform:perspective(1100px)
    rotate3d(var(--neig-x,0),var(--neig-y,0),0,6deg) translateY(-26px) scale(1.035)}
}
@media (prefers-reduced-motion:reduce){
  .tarif,.tarif:hover{transform:none}
}

/* Ein Glanz, der dem Zeiger ueber die Premium-Karte folgt.
   KEIN `overflow:hidden` am Tarif - die Krone sitzt bei top:-15px und
   waere damit abgeschnitten. Der Glanz beschneidet sich selbst ueber
   `border-radius:inherit`. */
.tarif.voll .glanz{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
  border-radius:inherit;
  background:radial-gradient(320px circle at var(--kx,50%) var(--ky,50%),
    rgba(255,255,255,.8),rgba(255,255,255,0) 70%);
  transition:opacity .45s var(--ease);mix-blend-mode:overlay}
.tarif.voll:hover .glanz{opacity:1}

/* ---------- 28 Flache Schirme: der letzte Millimeter ---------- */

/* Dieser Block steht ganz am Ende, und das ist der Punkt: Die gleichen
   Regeln standen schon im Hero-Abschnitt - und waren wirkungslos, weil
   die Grundregel fuer `.hero-wink` weiter unten im Stilblatt steht und
   bei gleicher Staerke die spaetere gewinnt. Derselbe Fehler ist in
   diesem Stilblatt schon dreimal passiert.

   Gemessen: Auf 360x640 lag der Hinweis 16 Pixel im Text, auf 375x667
   drei. Mit mehr Luft unten und einem kleineren Hinweis passt es. */
@media (max-height:720px){
  .hero-buehne{padding-bottom:clamp(76px,11vh,98px)}
  .hero-wink{font-size:.68rem;gap:.32rem;padding:.18rem .2rem;letter-spacing:.14em}
  .hero-wink span{height:18px}
}


/* ---------- 29 Handy: Ablauf, Galerie, Vergleich ---------- */

/* --- Der Ablauf auf dem Handy ---
   Er stand auch dort in zwei Spalten - 180 Pixel fuer die Zeichnung.
   Jetzt eine Spalte, und die Zeichnung bleibt als flaches Band oben
   stehen, waehrend die Schritte darunter durchlaufen. So sieht man bei
   jedem Schritt, was gerade passiert. */
/* Auf dem Handy gibt es das grosse Fenster nicht mehr. Ein Band, das
   oben stehen bleibt, nimmt dauerhaft ein Drittel des Bildschirms -
   Simon: "das ist nicht gut geloest, das stoert".

   Stattdessen traegt jeder Schritt seine eigene kleine Zeichnung. */
/* Die kleine Zeichnung im Schritt. Am Rechner nicht zu sehen - dort
   gibt es das grosse Fenster daneben. */
.schritt-bild{display:none;height:122px;margin:-2px 0 14px;padding:10px 14px;
  border-radius:10px;overflow:hidden;
  align-items:center;justify-content:center;
  background:linear-gradient(150deg,rgba(238,242,255,.07),rgba(238,242,255,.02));
  box-shadow:inset 0 0 0 1px var(--linie)}
/* Die Zeichnung bekommt eine feste Hoehe und ihr eigenes
   Seitenverhaeltnis. Mit prozentualer Hoehe allein nahm das SVG sein
   Verhaeltnis aus dem viewBox und wurde 172 statt 84 Pixel hoch -
   gemessen, nicht geraten. */
.schritt-bild .ab-bild{position:static;inset:auto;display:block;
  height:100%;aspect-ratio:160/110;opacity:1;transform:none;transition:none}
.schritt-bild svg{width:100%;height:100%;overflow:visible}

@media (max-width:760px){
  .ablauf{grid-template-columns:1fr;gap:0}
  .ablauf-steht{display:none}
  .schritt-bild{display:flex}
}

/* Der Grund der Zeichnung war noch ein warmes Braun aus der alten
   Welt. */
.ablauf-bild{background:linear-gradient(150deg,#141A30,#090C18)}

/* --- Die Galerie: drei Abzuege auf dem Tisch ---
   Vorher ein 2x2-Raster mit 3 px Luecke - das sah nach Kontaktabzug
   aus. Jetzt liegen die Bilder uebereinander wie Fotos, die jemand
   hingelegt hat, und faechern beim Zeigen auf. */
.weiter-galerie{display:block;position:relative;padding:0;overflow:visible}
/* "height:auto" ist noetig: Die fruehere Regel setzt "height:100%",
   und solange Breite UND Hoehe gesetzt sind, wird "aspect-ratio"
   ignoriert - dann liegt ein einziges verzerrtes Bild im Rahmen statt
   dreier Abzuege nebeneinander. */
.weiter-galerie img{position:absolute;width:53%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:8px;box-shadow:0 18px 36px -18px rgba(0,0,0,.95),
    inset 0 0 0 1px rgba(238,242,255,.22);
  transition:transform .6s var(--ease),filter .6s var(--ease)}
.weiter-galerie img:nth-child(1){left:2%;top:6%;transform:rotate(-8deg);z-index:1}
.weiter-galerie img:nth-child(2){right:2%;top:4%;transform:rotate(7deg);z-index:2}
.weiter-galerie img:nth-child(3){left:21%;bottom:5%;transform:rotate(-2deg);z-index:3;
  width:56%}
.weiter:hover .weiter-galerie img:nth-child(1){transform:rotate(-12deg) translate(-7%,-5%)}
.weiter:hover .weiter-galerie img:nth-child(2){transform:rotate(11deg) translate(7%,-6%)}
.weiter:hover .weiter-galerie img:nth-child(3){transform:rotate(0deg) translateY(5%) scale(1.04)}
.weiter-galerie{overflow:hidden;border-radius:var(--rund-klein)}

/* --- Die Vergleichstabelle auf schmalen Schirmen ---
   Vier Spalten passen nicht auf 393 Pixel. Man sah eine Spalte ohne
   Kopfzeile und musste quer scrollen, um zu erraten, welcher Tarif
   gemeint ist. Jetzt waehlt man oben den Tarif, und die Tabelle zeigt
   nur dessen Spalte - zwei Spalten, keine Querscrollerei. */
.tarif-schalter{display:none}
@media (max-width:860px){
  .tarif-schalter{display:flex;gap:6px;margin:0 0 12px;
    background:var(--karte);border-radius:999px;padding:5px;
    box-shadow:inset 0 0 0 1px var(--linie)}
  .tarif-schalter button{flex:1;border:0;cursor:pointer;border-radius:999px;
    padding:.62rem .3rem;font-family:var(--fest);font-size:.78rem;
    background:none;color:var(--leise);
    transition:background-color .3s var(--ease),color .3s var(--ease)}
  .tarif-schalter button[aria-pressed="true"]{
    background:linear-gradient(100deg,var(--rot),var(--violett));
    color:var(--auf-leit);font-weight:600}
  .tabelle-rahmen{overflow:visible}
  .vergleich{min-width:0;width:100%}
  .tabelle-rahmen[data-spalte="1"] .c2,.tabelle-rahmen[data-spalte="1"] .c3,
  .tabelle-rahmen[data-spalte="2"] .c1,.tabelle-rahmen[data-spalte="2"] .c3,
  .tabelle-rahmen[data-spalte="3"] .c1,.tabelle-rahmen[data-spalte="3"] .c2{display:none}
  .vergleich th[scope="row"]{white-space:normal}
}


/* ---------- 30 Was auch bei "Bewegung reduzieren" laeuft ---------- */

/* Diese Regeln stehen ganz am Ende, damit sie den frueheren
   Abschaltungen zuvorkommen. Gemeinsam ist allen: eine kleine Schleife
   am Rand, die nichts mitzieht und die man anhalten kann, indem man
   sie beruehrt. */
@media (prefers-reduced-motion:reduce){
  .band-innen{animation:laufen 70s linear infinite}
  .kante.da::after{animation:kanteRunde 5s linear infinite,
                             kanteAn calc(var(--staffel,4) * 3.6s) linear infinite;
    animation-delay:0s,calc(var(--kn,0) * -3.6s)}
  .tarif.voll{animation:premiumAtmen 9s ease-in-out infinite}
  .tarif.voll::after{animation:kegel 9s ease-in-out infinite}
  .hero-schild i{animation:pochen 3.2s ease-in-out infinite}
  .regler-schild{animation:schildAtmen 3s ease-in-out infinite}
}


/* ---------- 31 Die ganze Tarifkarte ist anklickbar ---------- */

/* Simon: "Wenn man irgendwo auf die Box klickt, moechte ich, dass man
   zur Preisseite kommt."

   Geloest mit einem Link, der sich ueber die ganze Karte legt. Das ist
   der ehrliche Weg: Es bleibt ein Link - mit Tastatur erreichbar, mit
   Vorleseprogramm lesbar, mit mittlerer Maustaste in einem neuen
   Fenster zu oeffnen. Die Knoepfe in der Karte liegen darueber und
   funktionieren weiter. */
.tarif-ganz{position:absolute;inset:0;z-index:2;border-radius:inherit;
  text-indent:-9999px;overflow:hidden;white-space:nowrap}
.tarif-ganz:focus-visible{outline:2.5px solid var(--rot-zart);outline-offset:3px}
.tarif .knopf,.tarif .alles,.tarif a:not(.tarif-ganz){position:relative;z-index:3}

/* ---------- 32 Die Wortmarke wie bei Ascendia ---------- */

/* Dicker und nach unten verschwimmend: Die Schrift wird am unteren
   Rand weich ausgeblendet, statt an einer Kante aufzuhoeren. */
.riesig{font-weight:800;letter-spacing:-.062em;line-height:.82;
  -webkit-text-stroke:0;
  background:linear-gradient(180deg,
    rgba(238,242,255,.42) 0%,
    rgba(166,243,234,.3) 38%,
    rgba(139,108,248,.16) 66%,
    rgba(139,108,248,.04) 86%,
    rgba(139,108,248,0) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-mask-image:linear-gradient(180deg,#000 54%,rgba(0,0,0,.35) 82%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 54%,rgba(0,0,0,.35) 82%,transparent 100%)}
/* Wie bei Ascendia: deutlich groesser und unten ANGESCHNITTEN. Der
   Rahmen ist niedriger als die Schrift und schneidet ab - dadurch
   wirkt sie schwer und die Seite endet mit einer Kante statt mit einer
   Reihe Unterlaengen.
   Simon hat das mehrfach gewuenscht; bisher war die Schrift ganz zu
   sehen und wirkte dadurch duenn. */
.riesig-rahmen{margin-top:clamp(20px,3vw,40px);padding-bottom:0;
  overflow:hidden;height:clamp(26px,9.8vw,180px)}
/* Platz fuer die Unterlaengen von j, g und p. */
.riesig{padding-bottom:0}


/* ---------- 33 Portraits am Handy nebeneinander ---------- */

/* Nicht aus Geschmack, sondern wegen der Schaerfe: Die Fotos sind 600
   Pixel breit. Ueber die ganze Handybreite gezogen braeuchten sie bei
   dreifacher Punktdichte 1179 - also nur 51 Prozent dessen, was noetig
   waere. Nebeneinander brauchen sie 540 und sind damit scharf. */
/* Zu zweit nebeneinander waeren die Fotos scharf (540 statt 1179
   Bildpunkte noetig) - aber Simon findet sie dann zu klein, und er hat
   recht: Zwei Gesichter auf je 180 Pixel sind keine Vorstellung mehr.

   Also bleiben sie gross und einspaltig. Die Schaerfe kommt, sobald
   groessere Originale da sind - 600 Pixel reichen fuer eine ganze
   Handybreite nicht. */

/* ---------- 34 Kein Gummiband am Seitenende ---------- */

/* Zieht man am unteren Ende weiter, zeigt das Geraet einen Bereich,
   den die Seite nicht mehr faerben kann. Der Fuss endet zwar jetzt in
   genau der Farbe des Dokumentgrunds - aber die festen Lichter liegen
   dort nicht mehr darueber, und genau diesen Unterschied hat Simon als
   "starken Cut" gesehen.

   Ohne Gummiband gibt es den Bereich gar nicht erst. */
html,body{overscroll-behavior-y:none}


/* ---------- 35 Das Handy im Hero zum Anfassen ---------- */

/* Der Knopf liegt genau ueber dem gezeichneten Handy. `.bau` faengt
   keine Klicks ab - hier muss es wieder an, sonst kommt nichts an. */
.bau-tippen{position:absolute;right:-6.5%;bottom:-11%;z-index:4;
  width:clamp(110px,21%,262px);aspect-ratio:9/19;
  border:0;background:none;padding:0;cursor:pointer;pointer-events:auto;
  border-radius:clamp(8px,1vw,14px);
  opacity:var(--handy,0);
  transition:opacity .4s var(--ease)}
.bau-tippen[hidden]{display:none}

/* Der Ring, der zum Anfassen einlaedt. Er laeuft erst, wenn das Handy
   fertig dasteht, und hoert auf, sobald man einmal getippt hat. */
.bau-tippen::after{content:"";position:absolute;inset:-6%;border-radius:inherit;
  box-shadow:0 0 0 2px rgba(44,224,206,.7),0 0 26px 2px rgba(44,224,206,.45);
  opacity:0;animation:tippenRing 2.6s ease-in-out infinite}
@keyframes tippenRing{0%,100%{opacity:.25;transform:scale(1)}50%{opacity:.85;transform:scale(1.035)}}
.bau-tippen:hover::after,.bau-tippen:focus-visible::after{opacity:1;animation:none;
  box-shadow:0 0 0 2px rgba(44,224,206,1),0 0 34px 4px rgba(44,224,206,.6)}
/* Waehrend die Szene laeuft, ist der Ring ruhig. Danach laedt er
   wieder ein - man soll es beliebig oft ansehen koennen. */
.hero.spielt-gerade .bau-tippen::after{animation:none;opacity:.2}

/* Das Schild sagt deutlich, was zu tun ist - mit einer Hand daneben,
   die tippt. Simon: "Was man machen muss, das musst du besser
   machen." */
/* Linksbuendig an der Kante des Handys statt mittig darueber: Auf
   schmalen Schirmen steht das Handy am rechten Rand, und ein mittig
   zentriertes Schild ragte dort hinaus. */
.bau-tippen-schild{position:absolute;left:0;top:-34px;transform:none;
  display:inline-flex;align-items:center;gap:.34rem;
  font-family:var(--fest);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--auf-leit);background:linear-gradient(100deg,var(--rot),var(--violett));
  padding:.34rem .74rem;border-radius:999px;white-space:nowrap;
  box-shadow:0 10px 26px -8px rgba(44,224,206,1);
  transition:opacity .4s var(--ease)}
.bau-tippen-schild b{font-weight:600}
.bau-finger{width:14px;height:14px;flex:none;
  animation:fingerTippt 1.9s ease-in-out infinite}
@keyframes fingerTippt{0%,70%,100%{transform:translateY(0)}82%{transform:translateY(3px)}}
/* Ein kleiner Pfeil vom Schild auf das Handy. */
.bau-tippen-schild::after{content:"";position:absolute;left:18px;bottom:-5px;
  width:9px;height:9px;transform:rotate(45deg);
  background:var(--violett)}
.hero.spielt-gerade .bau-tippen-schild{opacity:0}

/* Der Satz unter dem Fenster, wenn die Szene gelaufen ist. */
.bau-sagt{position:absolute;left:0;right:0;bottom:-13%;z-index:4;margin:0;
  text-align:center;font-family:var(--fest);font-size:clamp(.72rem,1vw,.84rem);
  letter-spacing:.04em;color:var(--rot-zart);
  opacity:0;translate:0 8px;
  transition:opacity .6s var(--ease),translate .6s var(--ease-aus)}
.bau-sagt.da{opacity:1;translate:0 0}

/* --- Die Szene im Handy --- */
.hz-anfrage{opacity:0}
.hz-haken{opacity:0}
.hz-fuellung{transform-box:fill-box;transform-origin:left center;transform:scaleX(0)}

/* Gespielt wird ueber eine Klasse am Handy: So laeuft jede Animation
   genau einmal und von vorn, auch beim zweiten Tippen. */
.bau-handy.spielt .hz-seite{animation:hzRaus .45s var(--ease) forwards}
.bau-handy.spielt .hz-anfrage{animation:hzRein .5s var(--ease) .3s forwards}
.bau-handy.spielt .hz-f1 .hz-fuellung{animation:hzTippen .5s steps(12,end) .75s forwards}
.bau-handy.spielt .hz-f2 .hz-fuellung{animation:hzTippen .5s steps(10,end) 1.3s forwards}
.bau-handy.spielt .hz-f3 .hz-fuellung{animation:hzTippen .6s steps(14,end) 1.85s forwards}
.bau-handy.spielt .hz-knopf{animation:hzKnopf .5s var(--ease) 2.6s forwards}
.bau-handy.spielt .hz-haken{animation:hzHaken .5s var(--ease-aus) 3s forwards}

@keyframes hzRaus{to{opacity:0;transform:translateY(-4px)}}
@keyframes hzRein{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes hzTippen{to{transform:scaleX(1)}}
@keyframes hzKnopf{to{fill:#8B6CF8;opacity:0}}
@keyframes hzHaken{from{opacity:0;transform:scale(.6);transform-origin:20px 66px}
  to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  /* Die Szene laeuft auch hier - sie passiert nur, wenn man sie
     selbst ausloest, und bewegt nichts, worauf man liest. */
  .bau-tippen::after{animation:tippenRing 4s ease-in-out infinite}
}


/* ---------- 36 Die Handy-Szene auf schmalen Schirmen ---------- */

@media (max-width:760px){
  /* Das Fenster wird etwas schmaler, damit das Handy daneben Platz
     hat. Vorher war dort gar keins - und genau das hat gefehlt. */
  .bau-gruppe{width:min(78vw,340px)}

  /* Das Handy fliegt von rechts herein, genau wie am Rechner, nur
     groesser im Verhaeltnis - sonst waere es auf einem Handy ein
     Fleck. `display` wieder an: Es war hier ausgeblendet. */
  /* Nur so weit nach rechts, dass es ganz im Bild bleibt: Bei -19 %
     stand ein Fuenftel des Handys ausserhalb des Schirms. */
  .bau-handy{display:block;left:auto;top:auto;
    right:-7%;bottom:-7%;width:44%;height:auto;aspect-ratio:9/19;
    border-radius:clamp(11px,3.4vw,18px);
    opacity:var(--handy,0);pointer-events:none;
    transform:translate3d(calc((1 - var(--handy,0)) * 64px),0,0)
              rotate(calc((1 - var(--handy,0)) * 9deg))}

  .bau-tippen{left:auto;top:auto;right:-7%;bottom:-7%;
    width:44%;height:auto;aspect-ratio:9/19;
    border-radius:clamp(11px,3.4vw,18px)}
  .bau-sagt{bottom:-15%}
}


/* ---------- 37 Stufen in grossen Verlaeufen brechen ---------- */

/* Zwei sehr aehnliche Farben ueber eine grosse Flaeche ergeben
   sichtbare Stufen - das ist das "man sieht noch manchmal ein bisschen
   Pixel". Dagegen hilft ein feines Korn.

   Es liegt hier direkt im Hintergrund der wenigen betroffenen
   Flaechen, nicht als Ebene ueber der ganzen Seite: So kostet es
   nichts, weil es einmal gezeichnet und nie neu gerechnet wird. */
/* Nur die zwei wirklich grossen Flaechen bekommen das Korn.

   Erst stand es auf sieben Klassen - also auf rund 25 Elementen. Jedes
   davon muss der Browser einzeln aus einer Rauschfunktion berechnen,
   und gemessen stieg die Zeit je Bild dadurch auf 28 ms. Bei zwei
   Flaechen kostet es nichts und wirkt genauso: Stufen sieht man nur
   dort, wo ein Verlauf gross und flach ist. */
/* Der Verlauf muss erhalten bleiben - deshalb wird er hier noch einmal
   gesetzt, diesmal als zweite Lage unter dem Korn. */
.tarif.voll{background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E"),
  linear-gradient(165deg,#FBFCFF,#EDF1FA 46%,#DDE4F6)}
footer{background-image:linear-gradient(180deg,
    rgba(5,6,13,0) 0,rgba(5,6,13,.16) 54px,rgba(5,6,13,.34) 104px,
    rgba(5,6,13,.52) 150px,rgba(5,6,13,.68) 196px,rgba(5,6,13,.82) 242px,
    rgba(5,6,13,.93) 288px,var(--nacht) 330px)}


/* ---------- 38 Der Rand oben und unten ---------- */

/* Gemessen: Die oberste Bildzeile der Seite war 21,35,39, der
   Dokumentgrund 5,6,13. Am iPhone malt iOS hinter die Statusleiste
   den Grund - der Unterschied war die Kante, die Simon seit Tagen
   sieht. `viewport-fit=cover` war richtig und hat nichts geholfen,
   weil nicht der Platz fehlte, sondern die Farbe nicht passte.

   Dieser Schleier macht die ersten und letzten Bildpunkte exakt zur
   Grundfarbe und laesst das Licht danach zurueckkommen. Er liegt fest
   im Bild, also stimmt es bei jeder Scrollstellung. */
.saum{position:fixed;left:0;right:0;z-index:2;pointer-events:none}
/* Nur noch der Streifen hinter der Statusleiste, nicht der halbe
   Kopfbereich. */
.saum.oben{top:0;height:calc(var(--oben) + 54px);
  background:linear-gradient(180deg,
    var(--nacht) 0,var(--nacht) calc(var(--oben) + 6px),
    rgba(5,6,13,.8) calc(var(--oben) + 22px),
    rgba(5,6,13,.4) calc(var(--oben) + 38px),
    rgba(5,6,13,0) 100%)}
/* Der untere Schleier ist ERSATZLOS WEG.

   Er lag fest im Bild und damit dauerhaft als dunkle Leiste ueber den
   unteren 86 Pixeln - bei jeder Scrollstellung. Das war der "komische
   andere Hintergrund", und die Bewertungen liefen durch ihn hindurch
   und verschwanden dabei.

   Gebraucht wird er nicht: Der Fuss endet seit Runde 13 exakt in der
   Grundfarbe, gemessen 5,6,13 gegen 5,6,13. */
.saum.unten{display:none}

/* Der Kopf liegt darueber (z-index 40), der Inhalt darunter - der
   Schleier faerbt also nur den Hintergrund, nicht die Schrift. */


/* Zwischen der Vorschau und dem Einblick lagen rund 190 Pixel Leere.
   Die Bilder sind jetzt groesser, der Abstand darf kleiner werden. */
#regler-sec{padding-bottom:clamp(38px,4.2vw,62px)}
#arbeiten{padding-top:clamp(48px,5.4vw,78px)}


/* ---------- 39 Die Laufschrift laeuft am Handy von selbst ---------- */

/* Am Rechner und am iPad haengt sie am Scrollen - dort ist der Weg
   lang genug, und die Reaktion auf die eigene Bewegung ist schoen.

   Am Handy ist der Weg kurz und der Finger ungleichmaessig; die Zeilen
   ruckeln dann mit. Dort laeuft sie als Dauerschleife, wie ein Film. */
@media (max-width:760px){
  .laufschrift.laeuft-selbst .ls-zeile{
    animation:lsLinks 17s linear infinite;will-change:transform}
  .laufschrift.laeuft-selbst .ls-zeile.rechts{
    animation-name:lsRechts;animation-duration:20s}
}
@keyframes lsLinks{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes lsRechts{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}

/* ---------- 40 Rhythmus am Rechner ---------- */

/* Simon: "nicht alle komplett in der Mitte und in einer Reihe - das ist
   zu statisch". Drei zurueckhaltende Mittel, keine Tricks. */
@media (min-width:1040px){

  /* a) Jeder zweite Abschnitt spiegelt seinen Einstieg: Ueberschrift
        rechts, Vorspann links. Der Blick wandert dadurch die Seite
        hinunter hin und her. */
  /* #kontakt NICHT: Dort hat der Einstieg nur eine Spalte, und
     `grid-column:2` wuerde eine zweite erfinden. */
  #punkt .einstieg .kicker,#punkt .einstieg h2,
  #ablauf .einstieg .kicker,#ablauf .einstieg h2,
  #wachstum .einstieg .kicker,#wachstum .einstieg h2{grid-column:2}
  #punkt .einstieg .lead,#ablauf .einstieg .lead,
  #wachstum .einstieg .lead{grid-column:1;align-self:end}
  #punkt .einstieg .kicker,#ablauf .einstieg .kicker,
  #wachstum .einstieg .kicker{justify-self:start}

  /* b) Die Kaestchen stehen nicht mehr auf einer Linie. */
  .raster.vier>*:nth-child(even),
  .zitate>*:nth-child(even),
  .gruppen>*:nth-child(even){margin-top:clamp(20px,2.4vw,38px)}
  .tarife>*:nth-child(2){margin-top:clamp(14px,1.6vw,24px)}

  /* c) ENTFERNT. Hier standen drei Regeln, die die Reihen um wenige
        Prozent neben die Mitte geschoben haben - und weil sie eine
        Kennung benutzen (`#punkt`), wogen sie schwerer als Abschnitt
        52 und haben dessen Verbreiterung blockiert. Gemessen bei 1920:
        Die Reihe sollte bei 114 anfangen und fing bei 285 an.
        Was sie wollten, macht Abschnitt 52 jetzt richtig. */
  #wachstum .grund:nth-child(odd){margin-right:clamp(16px,2.6vw,46px)}
  #wachstum .grund:nth-child(even){margin-left:clamp(16px,2.6vw,46px)}
}


/* ---------- 43 Der Fuss: kurz und zweiseitig ---------- */

/* Vorher vier Spalten untereinander, alles linksbuendig, sehr lang.
   Die Seitenlinks stehen ohnehin im Menue hinter den drei Strichen -
   im Fuss bleiben Kontakt und Recht. */
.fuss{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr)}
@media (max-width:900px){.fuss{grid-template-columns:1fr 1fr}}
@media (max-width:520px){
  .fuss{grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,28px)}
  .fuss>*:first-child{grid-column:1 / -1}
}
.fuss-h{margin-bottom:.5rem}
/* Die Spalte "Recht" rueckt nach rechts aussen - so hat der Fuss zwei
   Seiten statt einer langen Kante. */
@media (min-width:901px){
  .fuss>*:last-child{text-align:right}
  .fuss>*:last-child .fuss-h{display:block}
  .fuss>*:last-child ul a{justify-content:flex-end}
}

/* ---------- 44 Die Kaesten stehen versetzt ---------- */

/* Simon: "Du hast nur die Groessen veraendert, nicht die
   Positionierung - genau die wollte ich: eine Box weiter links, eine
   weiter unten, eine weiter oben und rechts."

   Also echte Versaetze. Ueber `margin`, nicht ueber `transform`:
   `transform` braucht die Karte fuer das Anheben beim Ueberfahren,
   und `translate` fuer den Auftritt. Ein dritter Anspruch auf
   dieselbe Eigenschaft waere der naechste Namenskonflikt. */
/* NACHTRAG, gemessen: Der seitliche Versatz darf NICHT ueber `margin`
   laufen. Die Kaesten rechnen ihre Breite auf den Pixel genau aus -
   `calc(25% - 16,5px)`, viermal 254 Pixel plus dreimal 22 Luecke ergibt
   1082 bei 1083 verfuegbaren. Zwei Pixel Rand je Kasten, und der vierte
   faellt in die naechste Zeile; darunter klafft dann eine halbe Seite.

   `left` verschiebt, ohne Platz zu brauchen. Senkrecht bleibt es bei
   `margin-top` - dort SOLL der Platz mitwachsen, sonst stossen die
   Kaesten an den naechsten Abschnitt. */
@media (min-width:1040px){
  .raster.vier>*,.zitate>*{position:relative}

  .raster.vier>*:nth-child(1){margin-top:16px;left:-12px}
  .raster.vier>*:nth-child(2){margin-top:58px;left:5px}
  .raster.vier>*:nth-child(3){margin-top:0;left:-7px}
  .raster.vier>*:nth-child(4){margin-top:38px;left:12px}

  .zitate>*:nth-child(1){margin-top:30px;left:-16px}
  .zitate>*:nth-child(2){margin-top:0;left:0}
  .zitate>*:nth-child(3){margin-top:48px;left:16px}

  .gruppen>*:nth-child(3n+1){margin-top:0}
  .gruppen>*:nth-child(3n+2){margin-top:38px}
  .gruppen>*:nth-child(3n+3){margin-top:-16px}

  /* Die Reihe braucht oben und unten Luft fuer die Versaetze, sonst
     stossen die herausragenden Kaesten an den Nachbarabschnitt. */
  .raster.vier,.zitate,.gruppen{padding:18px 0 26px}
  .raster.vier>*,.zitate>*,.gruppen>*{align-self:flex-start}
}

/* ---------- 46 Der Einstieg kommt nacheinander ---------- */

/* Simon: "Es ist viel zu viel auf einmal zu sehen - schoener und nicht
   so viel auf einmal, aber nichts weglassen."

   Nichts faellt weg. Es kommt nur nacheinander: Schild, Ueberschrift,
   Vorspann, Knoepfe, Zahlen, Zeichnung, Hinweis - jedes rund eine
   Zehntelsekunde nach dem vorigen. Man liest von oben nach unten mit,
   statt vor einer fertigen Wand zu stehen. Nach einer knappen Sekunde
   steht alles da.

   Wichtig: `backwards` und nicht `both`. Mit `both` bliebe der Endwert
   der Bilderfolge dauerhaft stehen - und damit waere `--wink` beim
   Hinweis und `--bau-da` bei der Zeichnung ueberschrieben. Der Hinweis
   wuerde beim Scrollen nicht mehr verschwinden. Mit `backwards` gilt
   der Anfangswert nur waehrend der Wartezeit, danach hat wieder das
   Stilblatt das Wort. */
@keyframes heroEin{from{opacity:0;translate:0 16px}to{opacity:1;translate:none}}

@media (max-width:760px){
  /* Die Zeichnung ist NICHT mehr dabei: Sie liegt hinter dem Text und
     wird vom Scrollen eingeblendet - eine zweite Einblendung beim Laden
     waere doppelt. */
  .hero-innen>*,.hero-wink{
    animation:heroEin .78s cubic-bezier(.22,.68,.3,1) backwards}
  .hero-innen>*:nth-child(1){animation-delay:.06s}
  .hero-innen>*:nth-child(2){animation-delay:.15s}
  .hero-innen>*:nth-child(3){animation-delay:.26s}
  .hero-innen>*:nth-child(4){animation-delay:.37s}
  .hero-innen>*:nth-child(5){animation-delay:.48s}
  .hero-wink{animation-delay:.86s}
}

/* Wer Bewegung abgestellt hat, sieht alles sofort - aber alles. */
@media (prefers-reduced-motion:reduce){
  .hero-innen>*,.hero-wink{animation:none}
}

/* ---------- 49 Der Fuss hat auf jedem Geraet zwei Seiten ---------- */

/* Gemessen: Am Rechner stimmte es nach Runde 18 - Marke links, Kontakt
   in der Mitte, Recht rechts aussen. Am iPad und am Handy aber rutschte
   "Recht" in eine zweite Zeile nach links, und daneben blieb eine leere
   Haelfte. Damit stand dort wieder alles links - genau das, was Simon
   gestoert hat, nur eine Zeile tiefer.

   Jetzt nimmt die Marke unter 900 Pixeln die ganze Breite, und Kontakt
   und Recht stehen darunter nebeneinander: links und rechts, wie am
   Rechner auch. */
@media (max-width:900px){
  .fuss{grid-template-columns:1fr 1fr;gap:clamp(18px,3.4vw,32px) clamp(16px,4vw,40px)}
  .fuss>*:first-child{grid-column:1 / -1}
  .fuss>*:last-child{text-align:right}
  .fuss>*:last-child ul a{justify-content:flex-end}
}


/* ---------- 50 Die Zahlen rasten ein ---------- */

/* Simon fand die Animation der Zahlen schoen. Sie laufen jetzt
   nacheinander los, die Kurve laeuft klar aus - und am Ende federt die
   Zahl einmal winzig nach, damit sie wirklich "einrastet" statt
   einfach stehenzubleiben. */
@keyframes zahlRastet{
  0%  {transform:translateY(0)   scale(1)}
  40% {transform:translateY(-2px) scale(1.055)}
  100%{transform:translateY(0)   scale(1)}
}
.hero-zahlen b{display:inline-block;transform-origin:50% 80%}
.hero-zahlen b.eingerastet{animation:zahlRastet .46s cubic-bezier(.22,.68,.3,1)}

/* Waehrend des Zaehlens etwas heller - so sieht man, dass die Zahl
   lebt, und beim Einrasten beruhigt sie sich. */
.hero-zahlen b.zaehlt{color:var(--rot-zart)}

@media (prefers-reduced-motion:reduce){
  .hero-zahlen b.eingerastet{animation:none}
}


/* ---------- 51 Der Einstieg am Handy: gebaut wie am Rechner ---------- */

/* Simon: "Mach das wieder so wie vorher. Die allererste Seite soll nur
   von 'In zwei Wochen online' bis 'ab 499 / 24 Std.' gehen. Die Zahlen
   zwei nebeneinander und zwei darunter. Das Fenster ist viel zu klein
   geworden - im Grunde so wie bei der PC-Version."

   Vier Anlaeufe lang habe ich daraus ein eigenes Band unter dem Text
   gemacht, immer kleiner und immer enger. Die sind raus. Hier steht
   jetzt genau ein Bauplan, und es ist derselbe wie am Rechner:

   Der Text steht mittig in der Buehne. Die Zeichnung liegt DAHINTER
   ueber die ganze Flaeche und ist am Anfang unsichtbar. Beim Scrollen
   geht der Text weg und sie kommt - gross. */
@media (max-width:760px){
  .hero-buehne{justify-content:center;
    padding-bottom:calc(var(--unten) + clamp(62px,9vh,92px))}
  .hero-innen{order:0;flex:0 0 auto;margin:auto 0;
    gap:clamp(13px,2.2vh,20px)}

  /* Wieder ueber die ganze Buehne, wie am Rechner. */
  .bau{position:absolute;inset:0;order:0;width:auto;height:auto;
    display:grid;place-items:center;align-items:center;
    padding:0;overflow:visible}
  /* 92 Prozent der Breite statt 340 Pixeln. */
  .bau-gruppe{width:min(92vw,880px);transform-origin:50% 56%}

  /* Quer wie am Rechner, nicht hochkant. */
  .bau-rahmen{aspect-ratio:16/10;border-radius:clamp(12px,3vw,18px);
    background:rgba(238,242,255,.022);
    box-shadow:inset 0 0 0 1px rgba(238,242,255,.09)}
  .bau-leiste{height:clamp(18px,4.4vw,26px)}
  .bau-flaeche{inset:clamp(18px,4.4vw,26px) 0 0}
  .bau-flaeche .bau-breit{display:block}
  .bau-flaeche .bau-hoch{display:none}

  /* Das Handy daneben im selben Verhaeltnis wie am Rechner, nur etwas
     groesser - sonst waere es auf einem Handy ein Fleck.

     Es steht INNERHALB der rechten Fensterkante, nicht daneben:
     Gemessen bei 430 nimmt das Fenster 92 Prozent der Breite, rechts
     daneben ist kein Platz mehr, und bei `right:-6%` stand das Handy
     halb ausserhalb des Schirms. Am Rechner ist das Fenster nur 76
     Prozent breit - dort passt es daneben. */
  .bau-handy,.bau-tippen{display:block;left:auto;top:auto;
    right:1.5%;bottom:-22%;width:23%;height:auto;aspect-ratio:9/19;
    border-radius:clamp(9px,2.6vw,14px)}
  .bau-sagt{bottom:-28%}
  /* Das Schild haengt links an der Kante des Handys und zeigt damit
     nach innen - rechts waere kein Platz. */
  .bau-tippen-schild{left:auto;right:0;top:-32px}
  .bau-tippen-schild::after{left:auto;right:18px}

  /* Zwei Zahlen nebeneinander, zwei darunter. */
  .hero-zahlen{display:grid;grid-template-columns:1fr 1fr;
    gap:clamp(12px,2.2vh,20px) clamp(10px,3vw,22px);
    width:100%;max-width:340px;margin:clamp(4px,1vh,12px) auto 0}
  .hero-zahlen>*{min-width:0}
  .hero-zahlen b{font-size:1.2rem;letter-spacing:-.03em}
  .hero-zahlen span{font-size:.56rem;letter-spacing:.05em;
    line-height:1.3;white-space:normal}

  .hero .knoepfe{flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:4px}
  .hero .knoepfe .knopf{flex:0 1 auto;padding:.82rem 1.1rem;
    font-size:.76rem;white-space:nowrap}

  /* Der Hinweis haengt wieder frei am unteren Rand - unter dem Text
     ist jetzt kein Band mehr, mit dem er sich stossen koennte. */
  .hero-wink{position:absolute;left:50%;right:auto;width:auto;
    transform:translateX(-50%);margin:0;
    bottom:calc(var(--unten) + clamp(14px,2.4vh,26px));
    background:none;backdrop-filter:none;-webkit-backdrop-filter:none;
    padding:.3rem .2rem}

  .hero .lead{max-width:40ch}
}

/* Auf kurzen Schirmen etwas enger, damit alles von "In zwei Wochen
   online" bis zu den Zahlen auf das erste Bild passt. */
@media (max-width:760px) and (max-height:700px){
  .hero-innen{gap:10px}
  .hero-zahlen{gap:9px 16px;margin-top:2px}
  .hero-zahlen b{font-size:1.06rem}
  .hero .lead{font-size:.98rem}
}

/* ---------- 52 Die Seite nutzt die Breite ---------- */

/* Simon: "Man sieht so eine imaginaere Linie - von da bis da gibt es
   diese Texte, aber weiter links und weiter rechts ist nie was. Die
   Webseite geht ja auch noch weiter."

   Er hat recht: Die Spalte war auf 1240 Pixel festgenagelt, egal wie
   breit der Schirm ist. Auf einem 1920er Schirm blieben links und
   rechts je 340 Pixel ungenutzt. */
@media (min-width:1360px){:root{--breit:1340px}}
@media (min-width:1560px){:root{--breit:1460px}}
@media (min-width:1800px){:root{--breit:1580px}}

/* Und die Kaestchenreihen ragen zusaetzlich nach beiden Seiten ueber
   die Textspalte hinaus. Text bleibt lesbar schmal, die Kaesten nehmen
   den Platz. */
@media (min-width:1280px){
  /* Die Tarife sind NICHT dabei. Simon: "Bei den Preisen fand ich das
     vorher besser, nicht so breit gezogen." */
  .raster.vier,.zitate,.gruppen,.bausteine{
    --aus:clamp(0px,calc((100vw - var(--breit)) / 2 - 18px),112px);
    width:calc(100% + var(--aus) * 2);
    max-width:none;
    margin-left:calc(var(--aus) * -1);
    margin-right:calc(var(--aus) * -1)}
}

/* Der Versatz der einzelnen Kaesten war zwoelf Pixel - das sieht
   niemand. Jetzt bis zu dreissig, und weil jetzt mehr Platz da ist,
   stoert es auch nichts. */
@media (min-width:1360px){
  /* GEMESSEN bei 1440: Kasten 2 endete bei 723, Kasten 3 begann bei
     715 - acht Pixel Ueberlappung. Schuld war der Versatz: +14 fuer
     den einen, -16 fuer den naechsten, zusammen 30 bei 22 Pixeln
     Luecke.

     Jetzt wandern die Versaetze nur in EINE Richtung. Dann bleibt der
     Abstand zwischen je zwei Kaesten ueberall gleich (Simon: "den
     Abstand von den jeweiligen Boxen gleich haben"), und ueberlappen
     kann nichts mehr. Das Versetzte macht die Hoehe. */
  .raster.vier>*:nth-child(1){left:-30px}
  .raster.vier>*:nth-child(2){left:-10px}
  .raster.vier>*:nth-child(3){left:10px}
  .raster.vier>*:nth-child(4){left:30px}

  .zitate>*:nth-child(1){left:-34px}
  .zitate>*:nth-child(2){left:0}
  .zitate>*:nth-child(3){left:34px}
}


/* ---------- 53 Die Kopfleiste steht mittig ---------- */

/* Simon: "Die Leiste mit Arbeitsweise bis Kontakt sieht nicht mittig
   aus."

   Stimmt, gemessen bei 1440: Ihre Mitte lag bei 776, die Mitte des
   Fensters bei 720 - 56 Pixel daneben. Grund war die Bauweise: Logo,
   Menue und Striche standen in einer Reihe, und das Menue wurde von
   links nach rechts gedrueckt. Weil das Logo breiter ist als die drei
   Striche, blieb rechts weniger uebrig.

   Jetzt drei Spalten: links und rechts gleich breit, das Menue genau
   dazwischen. `minmax(max-content,1fr)` statt `1fr`, damit auf einem
   knappen Schirm nichts uebereinander rutscht - dort steht das Menue
   dann lieber etwas daneben als im Logo. */
@media (min-width:1041px){
  .kopf{display:grid;
    grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr);
    align-items:center}
  .kopf .marke{justify-self:start}
  .kopf nav{margin-left:0;justify-self:center}
  .kopf .burger{margin-left:0;justify-self:end}
}


/* ---------- 54 Zwei handgeschriebene Zeilen am Fenster ---------- */

/* Simon: "Bei dem Hero-Video oben und unten noch irgendwas hinzufuegen,
   eine kleine Schrift. Ich mag diese Schreibschrift, die ich bei
   Ascendia habe - aber in Weiss."

   Zwei Notizen am gezeichneten Fenster, wie mit der Hand danebenge-
   schrieben. Sie kommen und gehen mit dem Fenster (`--bau-da`), damit
   sie nicht allein im Bild haengen. */
.bau-notiz{position:absolute;z-index:3;pointer-events:none;
  font-family:var(--hand);font-weight:400;color:#fff;
  font-size:clamp(.82rem,1.5vw,1.18rem);letter-spacing:.01em;line-height:1.3;
  text-shadow:0 2px 16px rgba(5,6,13,.95);
  opacity:calc(var(--bau-da,0) * .92);
  transition:opacity .4s var(--ease)}
/* Oben RECHTS und unten LINKS - so hat Simon es gesagt. */
/* Gerade, nicht angewinkelt. Simon: "Die Schrift ist angewinkelt,
   das sieht komisch aus." */
.bau-notiz.oben{right:2%;top:-2.4em;text-align:right}
.bau-notiz.unten{left:2%;bottom:-2.6em}
/* Ein feiner Strich fuehrt von der Notiz zum Fenster - wie ein Pfeil
   in einer Skizze. */
.bau-notiz::after{content:"";position:absolute;width:26px;height:1px;
  background:linear-gradient(270deg,rgba(255,255,255,.55),transparent);
  bottom:-.5em;right:.2em}
.bau-notiz.unten::after{top:-.5em;bottom:auto;right:auto;left:.2em;
  background:linear-gradient(90deg,rgba(255,255,255,.55),transparent)}

@media (max-width:760px){
  .bau-notiz{font-size:.8rem}
  .bau-notiz.oben{top:-2.2em;right:1%}
  .bau-notiz.unten{bottom:-2.3em;left:1%}
}

/* ---------- 55 Die Bewertungen passen ins Bild ---------- */

/* Gemessen am Handy: Die Karte ragte links UND rechts aus dem Schirm -
   man konnte keine einzige zu Ende lesen. Simon: "Ich sehe die
   Google-Bewertungen schon wieder nicht." Sie waren da, nur nie ganz. */
@media (max-width:760px){
  /* Am Handy eine Karte je Bild, die naechste lugt herein. */
  /* Gemessen: Bei 82 vw war bei 393 Pixeln Breite keine Karte je
     ganz im Bild. 76 vw plus Innenabstand passt. */
  .stimmen>li{flex:0 0 min(76vw,310px)}

}

/* ---------- 56 Der Einstieg am Handy: Feinschliff ---------- */

/* Simon: "Oben ist noch ein bisschen Platz - Schild und Ueberschrift
   ein bisschen hoeher, den Vorspann lass wo er ist. Und die Zahlen
   weiter runter und groesser, da ist noch Platz." */
@media (max-width:760px){
  .hero-buehne{justify-content:flex-start}
  .hero-innen{margin:0;padding-top:clamp(26px,5vh,54px);
    gap:0}

  .hero h1{margin-top:clamp(10px,1.8vh,16px)}
  /* Der Vorspann behaelt seinen Platz: Was oben eingespart wird, kommt
     hier wieder dazu. */
  .hero .lead{margin-top:clamp(26px,5vh,48px);max-width:40ch}
  .hero .knoepfe{margin-top:clamp(20px,3.4vh,30px)}

  /* Deutlich weiter unten und groesser - darunter war nur Leere. */
  .hero-zahlen{margin-top:clamp(40px,8vh,78px)}
  .hero-zahlen b{font-size:1.46rem}
  .hero-zahlen span{font-size:.62rem;letter-spacing:.06em}
}

@media (max-width:760px) and (max-height:700px){
  .hero-innen{padding-top:clamp(12px,2.6vh,26px)}
  .hero .lead{margin-top:clamp(16px,3vh,26px);font-size:.98rem}
  .hero-zahlen{margin-top:clamp(20px,4vh,36px)}
  .hero-zahlen b{font-size:1.24rem}
}


/* ---------- 57 Der Einstieg am Rechner ---------- */

/* Simon: "In zwei Wochen ein bisschen hoeher, da ist noch Platz.
   Ueberschrift, Text und die zwei Knoepfe mittig und ein bisschen
   groesser. Und ich faende es geil, wenn man nur das sieht und die
   Zahlen erst mit dem Scrollen hereinfliegen." */
@media (min-width:761px){
  /* Hoeher: `translate` und nicht `transform` - `transform` gehoert
     hier schon dem Ausblenden beim Scrollen. */
  .hero-innen{translate:0 -4vh}
  .hero h1{font-size:clamp(2.6rem,6.4vw,5.4rem);max-width:16ch}
  .hero .lead{font-size:1.16em;max-width:52ch}
  .hero .knoepfe{margin-top:clamp(30px,3.4vw,44px)}
  .hero .knopf{padding:1.1rem 1.9rem;font-size:.92rem}

  /* ---- Die Zahlen fliegen herein ----
     Sie stehen nicht mehr im Textblock, sondern frei in der Buehne:
     eine oben rechts in der Ecke, eine unten links in der Ecke, eine
     oben links zur Mitte, eine unten rechts zur Mitte. Jede kommt aus
     ihrer eigenen Richtung. */
  .hero-zahlen{position:absolute;inset:0;z-index:3;display:block;
    max-width:none;width:auto;margin:0;pointer-events:none}
  .hero-zahlen>*{position:absolute;width:max-content;text-align:center;
    opacity:var(--zahlen,0);
    translate:calc((1 - var(--zahlen,0)) * var(--zx,0px))
              calc((1 - var(--zahlen,0)) * var(--zy,0px));
    scale:calc(.84 + .16 * var(--zahlen,0));
    /* Blaues Licht, das aufdimmt - und ein Verschwimmen beim Gehen.
       Beide Werte kommen aus dem Einstieg. */
    filter:drop-shadow(0 10px 30px rgba(5,6,13,.9))
           drop-shadow(0 0 calc(var(--zahlen-licht,0) * 26px)
                       rgba(92,140,248,calc(var(--zahlen-licht,0) * .85)))
           blur(var(--zahlen-weich,0px))}
  .hero-zahlen>*:nth-child(1){right:6.5%;top:15%;  --zx:86px; --zy:-62px}
  .hero-zahlen>*:nth-child(2){left:5.5%; bottom:14%;--zx:-86px;--zy:70px}
  .hero-zahlen>*:nth-child(3){left:19%;  top:25.5%;--zx:-70px;--zy:-54px}
  .hero-zahlen>*:nth-child(4){right:21%; bottom:23%;--zx:74px; --zy:62px}
  .hero-zahlen b{font-size:clamp(1.5rem,2.6vw,2.3rem)}
  .hero-zahlen span{font-size:.72rem;letter-spacing:.09em}
}

/* Auf sehr breiten Schirmen duerfen sie weiter nach aussen. */
@media (min-width:1500px){
  .hero-zahlen>*:nth-child(1){right:9%;top:14%}
  .hero-zahlen>*:nth-child(2){left:8%;bottom:13%}
  .hero-zahlen>*:nth-child(3){left:22%;top:26%}
  .hero-zahlen>*:nth-child(4){right:24%;bottom:22%}
}

/* Am Handy bleiben sie, wo Simon sie wollte: zwei und zwei unter den
   Knoepfen, von Anfang an da. */
@media (max-width:760px){
  .hero-zahlen{position:static;order:1;flex:0 0 auto;
    display:grid;grid-template-columns:1fr 1fr;
    gap:clamp(12px,2.2vh,20px) clamp(10px,3vw,22px);
    width:100%;max-width:340px;margin-inline:auto;
    animation:heroEin .78s cubic-bezier(.22,.68,.3,1) .48s backwards}
  .hero-zahlen>*{position:static;opacity:1;translate:none;scale:none}
}

/* ---------- 58 Die dritte Handschrift ---------- */

/* Die dritte, senkrechte Notiz ist wieder raus: Sie stand quer in der
   Mitte und sah aus wie vergessen, nicht wie dazugeschrieben. */

/* ---------- 59 Die blaue Schleife ---------- */

/* Simon: "Manchmal ist zu viel Abstand mit gar nichts. Da kannst du so
   eine kurvige Linie ziehen, die animiert wird, in Blau - so eine
   Schleife."

   Sie zeichnet sich selbst, sobald sie ins Bild kommt: ein langer
   Strich, dessen Luecke weggezogen wird. */
.schleife{position:relative;z-index:2;margin:0 auto;
  width:min(100%,var(--breit));padding:0 var(--pad);
  height:clamp(70px,9vw,150px);pointer-events:none}
.schleife svg{width:100%;height:100%;overflow:visible}
.schleife path{fill:none;stroke-width:2.2;stroke-linecap:round;
  stroke-dasharray:1 1;stroke-dashoffset:1;
  transition:stroke-dashoffset 2.6s cubic-bezier(.22,.68,.3,1)}
.schleife.da path{stroke-dashoffset:0}
/* Die Schleife selbst bewegt sich nicht mit `translate` herein - sie
   zeichnet sich. Der allgemeine Auftritt wuerde beides mischen. */
.schleife.auf{opacity:1;translate:none;scale:none}

@media (prefers-reduced-motion:reduce){
  .schleife path{transition:none;stroke-dashoffset:0}
}

/* ---------- 60 Los geht es: beide Spalten gleich hoch ---------- */

/* Simon: "Die rechte Seite faengt auch ganz oben an, hoert aber viel
   frueher auf - das sieht komisch aus. Mittig soll es sein." */
@media (min-width:901px){
  .kontakt-raster{align-items:center}
}

/* ---------- 61 Die haeufigen Fragen stehen nicht mehr stramm ---------- */

/* Simon: "Zu strikt untereinander - da kannst du dich austoben mit
   links und rechts, weiter oben, weiter unten."

   Jede zweite Frage rueckt nach rechts, jede dritte ein Stueck nach
   links, und die Breite wechselt leicht. Dadurch entsteht eine Treppe
   statt eines Stapels - ohne dass eine Frage schwerer zu finden ist. */
@media (min-width:1040px){
  .fragen{gap:clamp(14px,1.6vw,22px)}
  .fragen details{position:relative;width:88%}
  .fragen details:nth-child(odd){margin-left:0;margin-right:auto}
  .fragen details:nth-child(even){margin-left:auto;margin-right:0}
  .fragen details:nth-child(3n+1){left:-26px}
  .fragen details:nth-child(3n+2){left:18px}
  .fragen details:nth-child(4n+3){margin-left:auto;margin-right:auto}
}


/* ---------- 62 Die Bewertungen: wischen UND von selbst ---------- */

/* Die Bilderfolge ist weg. Sie konnte nur eines von beidem: laufen
   oder sich anfassen lassen. Jetzt scrollt die Liste selbst - der
   Finger laeuft weich, und alle paar Sekunden geht sie von allein
   einen Schritt weiter, solange niemand sie anfasst. */
.stimmen-lauf{overflow:visible}
.stimmen-lauf .stimmen{animation:none;width:auto;
  overflow-x:auto;scrollbar-width:none;
  /* AUSDRUECKLICH aus. Die Grundregel `.stimmen` setzt `mandatory`,
     und eine staerkere Regel, die es nur weglaesst, schaltet es nicht
     ab - die Reihe rastete deshalb bei jedem Bild auf die Karte
     zurueck und stand still. */
  scroll-snap-type:none;
  -webkit-overflow-scrolling:touch;
  padding-inline:var(--pad);scroll-padding-inline:var(--pad)}
.stimmen-lauf .stimmen::-webkit-scrollbar{display:none}
.stimmen-lauf .stimmen.angefasst{scroll-snap-type:x mandatory}
.stimmen>li{scroll-snap-align:center}
@media (max-width:760px){
  .stimmen-lauf{margin-inline:calc(var(--pad) * -1)}
}


/* ---------- 63 Das Seitenende haelt an ---------- */

/* Simon: "Die Webseite soll gar nicht so weit runterscrollen koennen,
   sondern stoppen - genau wie bei Ascendia."

   Gemessen ist unter dem Fuss kein Pixel Scrollweg mehr (Dokumenthoehe
   16107, Fussende 16107). Was er sieht, ist das Nachfedern am Ende:
   Der Inhalt rutscht kurz hoch, und darunter kommen die festen
   Hintergrundlichter zum Vorschein.

   Darum liegt am Seitenende eine deckende Flaeche unter dem Fuss - und
   NUR dann, wenn man wirklich ganz unten ist. So kann sie nie etwas
   verdecken, was man lesen will. Der Fuss liegt darueber (z-index 3),
   die Lichter darunter (0). */
/* Die Abdeckung haengt jetzt am Fuss selbst, als Schlagschatten.

   Vorher war es eine FESTE Flaeche. Auf dem iPhone verschiebt sich
   beim Nachfedern aber auch alles Feste mit - sie war also genau dann
   weg, wenn man sie gebraucht haette. Ein Schatten wird dagegen mit
   dem Fuss gezeichnet, bleibt an ihm haengen und braucht keinen Platz:
   Die Seite wird dadurch keinen Pixel laenger.

   Zweimal versetzt (50vh und 100vh), damit der abgedeckte Bereich
   unter dem Fuss auch auf hohen Schirmen reicht. Der Teil, der ueber
   dem Seitenende liegt, verschwindet hinter dem Fuss selbst. */
footer{z-index:3;
  box-shadow:0 50vh 0 0 var(--nacht),0 100vh 0 0 var(--nacht)}
.saum.unten{display:none}

/* ---------- 64 Die Fragen fliegen herein und stehen versetzt ---------- */

/* Simon: "Die kannst du rein animieren, langsam und geschmeidig. Und
   noch mehr verschieben: zwei in der Mitte, zwei weiter links, zwei
   wieder in der Mitte, zwei weiter rechts - und auch innerhalb davon
   versetzt." */
@media (min-width:1040px){
  .fragen details{position:relative;width:76%;
    transition:box-shadow .45s var(--ease),background-color .45s var(--ease),
               opacity 1.3s cubic-bezier(.25,.46,.3,1),
               translate 1.5s cubic-bezier(.16,.72,.26,1)}
  .fragen details:nth-child(1){margin-inline:auto;left:-28px}
  .fragen details:nth-child(2){margin-inline:auto;left:34px}
  .fragen details:nth-child(3){margin-right:auto;margin-left:0;left:-10px}
  .fragen details:nth-child(4){margin-right:auto;margin-left:0;left:52px}
  .fragen details:nth-child(5){margin-inline:auto;left:16px}
  .fragen details:nth-child(6){margin-inline:auto;left:-40px}
  .fragen details:nth-child(7){margin-left:auto;margin-right:0;left:14px}
  .fragen details:nth-child(8){margin-left:auto;margin-right:0;left:-34px}
  /* Sie kommen von der Seite herein, auf der sie stehen. */
  .fragen details.auf:nth-child(odd){translate:-54px 26px}
  .fragen details.auf:nth-child(even){translate:54px 26px}
  .fragen details.auf.da{translate:none}
}

/* ---------- 65 Der Einstieg kommt auf JEDEM Geraet herein ---------- */

/* Simon: "Beim Handy, PC und iPad moechte ich, dass beim Oeffnen erst
   nur der Hintergrund da ist und sich die ersten Texte hereinanimieren."
   Bisher galt das nur am Handy. */
.hero-innen>*,.hero-wink{
  animation:heroEin .86s cubic-bezier(.22,.68,.3,1) backwards}
.hero-innen>*:nth-child(1){animation-delay:.10s}
.hero-innen>*:nth-child(2){animation-delay:.22s}
.hero-innen>*:nth-child(3){animation-delay:.36s}
.hero-innen>*:nth-child(4){animation-delay:.50s}
.hero-wink{animation-delay:.78s}

/* ---------- 66 Die Zahlen am Handy ---------- */

/* Simon: "Die Zahlen sind weiter links gelandet und immer noch zu
   klein. Und sie bleiben beim Hero-Video drauf."

   Also: jede Zahl mittig in ihrer Haelfte, deutlich groesser, und sie
   gehen mit dem Text weg - bevor das Fenster kommt. */
@media (max-width:760px){
  .hero-zahlen{text-align:center;max-width:360px;
    opacity:calc(1 - var(--weg,0))}
  .hero-zahlen>*{display:flex;flex-direction:column;align-items:center;gap:.18rem}
  .hero-zahlen b{font-size:1.72rem;letter-spacing:-.035em;line-height:1.05}
  .hero-zahlen span{font-size:.64rem;letter-spacing:.07em;text-align:center}
}
@media (max-width:760px) and (max-height:700px){
  .hero-zahlen b{font-size:1.42rem}
}


/* ---------- 67 Die Startanimation wartet, bis man die Seite sieht ---- */

/* Chrome und Safari laden die Seite beim Tippen in der Adresszeile
   schon im Voraus, unsichtbar im Hintergrund. Lief die Animation beim
   Laden los, war sie vorbei, bevor man die Seite sah - genau das hat
   Simon beschrieben.

   Jetzt haelt sie an, bis das Skript `start-bereit` setzt. */
html:not(.start-bereit) .hero-innen>*,
html:not(.start-bereit) .hero-wink,
html:not(.start-bereit) .hero-zahlen{opacity:0}
html:not(.start-bereit) .hero h1 .wort{animation:none}
html.start-bereit .hero h1 .wort{
  animation:wortRein .9s var(--ease-aus) forwards;
  animation-delay:calc(.22s + var(--i) * 78ms)}

/* ---------- 68 Die haeufigen Fragen: gleich gross, eine Zeile ------- */

/* Simon: "Mir gefaellt nicht, dass die Kaesten nicht einheitlich gross
   sind und dass eine lange Frage zwei Zeilen hat. Und sie sollen
   weiter nach links und weiter nach rechts."

   Also: alle gleich breit, die Frage in einer Zeile (dafuer etwas
   kleiner und mit engerem Innenabstand), und die ganze Reihe nutzt
   wie die Kaestchenreihen die volle Breite. */
@media (min-width:1040px){
  /* Gemessen: Die Fragen stehen in einer SCHMALEN Spalte (712 statt
     1228 Pixel), deshalb half das Hinausziehen um 32 Pixel nichts.
     Also wird hier nicht die Spalte erweitert, sondern die Reihe an
     der Fensterbreite ausgerichtet - unabhaengig davon, wie schmal
     ihre Spalte ist. */
  .fragen{--voll:min(calc(100vw - 2 * var(--pad)),1560px);
    width:var(--voll);max-width:none;
    margin-left:calc(50% - var(--voll) / 2);
    margin-right:0}
  .fragen details{width:62%;max-width:none}
  .fragen summary{font-size:clamp(.92rem,1.26vw,1.04rem);
    padding:clamp(15px,1.5vw,19px) 3rem clamp(15px,1.5vw,19px) clamp(18px,1.8vw,24px);
    white-space:nowrap;overflow:hidden}
  /* Weiter nach aussen als bisher: Simon will die Seitenraender
     benutzt sehen, nicht nur die Mitte. */
  .fragen details:nth-child(1){margin-inline:auto;left:-40px}
  .fragen details:nth-child(2){margin-inline:auto;left:46px}
  .fragen details:nth-child(3){margin-right:auto;margin-left:0;left:-30px}
  .fragen details:nth-child(4){margin-right:auto;margin-left:0;left:40px}
  .fragen details:nth-child(5){margin-inline:auto;left:34px}
  .fragen details:nth-child(6){margin-inline:auto;left:-46px}
  .fragen details:nth-child(7){margin-left:auto;margin-right:0;left:34px}
  .fragen details:nth-child(8){margin-left:auto;margin-right:0;left:-40px}
}

/* ---------- 69 Business so gross wie Start ---------- */

/* Simon: "Die Box von Business soll genauso gross sein wie Start,
   sonst sieht es aus, als waere Start besser. Premium kann so gross
   bleiben." */
@media (min-width:900px){
  .tarife{align-items:stretch}
  .tarife>*{align-self:stretch}
  .tarife>*:nth-child(2){margin-top:0}
}

/* ---------- 70 Die Handschrift am Fenster, Handy ---------- */

/* Simon: "Oben und unten ist so viel Platz - die Schrift kannst du
   groesser machen und weiter weg vom Fenster." */
@media (max-width:760px){
  .bau-notiz{font-size:1.04rem}
  .bau-notiz.oben{top:-3.4em;right:4%}
  .bau-notiz.unten{bottom:-3.6em;left:4%}
}


/* ---------- 71 ENTFERNT ---------- */

/* Hier stand der erste, falsch verstandene Anlauf fuer "Wer wir sind".
   Er setzte `#wir .einstieg` auf EINE Spalte - und Abschnitt 75
   schickt den Vorspann in Spalte 2. Die gab es dann nicht mehr, der
   Browser legte eine neue an, und die Ueberschrift stand mit einem
   Wort je Zeile da. */

/* ---------- 72 Der blaue Strich unter wichtigen Stellen ---------- */

/* Er zeichnet sich von links nach rechts, sobald der Absatz
   hereinkommt. Ueber `background-size` und nicht ueber ein eigenes
   Element: So laeuft der Strich auch dann richtig, wenn die Stelle
   ueber zwei Zeilen geht.

   `mark` bringt vom Browser einen gelben Grund und schwarze Schrift
   mit - beides muss ausdruecklich weg. */
mark.strich{background-color:transparent;color:inherit;
  background-image:linear-gradient(90deg,#5C8CF8,#8B6CF8);
  background-repeat:no-repeat;background-position:0 100%;
  background-size:0 .1em;padding-bottom:.1em;
  transition:background-size 1.2s cubic-bezier(.16,.72,.26,1);
  transition-delay:calc(.45s + var(--m,0) * .5s)}
.da mark.strich{background-size:100% .1em}

@media (prefers-reduced-motion:reduce){
  mark.strich{transition:none;background-size:100% .1em}
}


/* ---------- 73 Die Startanimation steht GANZ hinter dem Zeichen ----- */

/* Vorher lief die Bilderfolge immer - nur die Ueberschrift war
   abgesichert. Nach dem Vorausladen aus der Adresszeile war sie
   deshalb laengst durch, und man sah nur noch die Ueberschrift
   hereinkommen. Jetzt gilt es fuer alles. */
.hero-innen>*,.hero-wink{animation:none}
html.start-bereit .hero-innen>*,
html.start-bereit .hero-wink{
  animation:heroEin .86s cubic-bezier(.22,.68,.3,1) backwards}
html.start-bereit .hero-innen>*:nth-child(1){animation-delay:.10s}
html.start-bereit .hero-innen>*:nth-child(2){animation-delay:.24s}
html.start-bereit .hero-innen>*:nth-child(3){animation-delay:.40s}
html.start-bereit .hero-innen>*:nth-child(4){animation-delay:.56s}
html.start-bereit .hero-wink{animation-delay:.86s}
@media (max-width:760px){
  .hero-zahlen{animation:none}
  html.start-bereit .hero-zahlen{
    animation:heroEin .86s cubic-bezier(.22,.68,.3,1) .7s backwards}
}

/* ---------- 74 Die Ueberschrift in zwei Zeilen ---------- */

/* Simon: "Ihre Website. und darunter Von Hand gebaut - aber ein
   bisschen weiter nach rechts, nicht genau untereinander." */
.hero h1{max-width:none}
.hero h1 .z1,.hero h1 .z2{display:block}
/* Die erste Zeile etwas nach LINKS, die zweite etwas nach RECHTS -
   beide um ihre eigene Mitte. Simon: "Ihre Website mittig, ein
   bisschen weiter nach links; darunter Von Hand gebaut mittig, ein
   bisschen weiter nach rechts." */
.hero h1 .z1{position:relative;left:calc(clamp(14px,3vw,64px) * -1)}
.hero h1 .z2{position:relative;left:clamp(14px,3vw,64px)}
@media (max-width:760px){
  .hero h1 .z1{left:-16px}
  .hero h1 .z2{left:16px}
}

/* ---------- 75 Wer wir sind, zweiter Anlauf ---------- */

/* Simon: "Das hast du falsch verstanden. Links 'Wer wir sind', darunter
   'Wir sind zu zweit. Das ist der Punkt.' Rechts daneben kommt der
   Text. Und darunter, rechts von der Ueberschrift und ein bisschen
   weiter runter, kommen die zwei Bilder."

   Also bleibt der Einstieg genau so, wie er auf der ganzen Seite
   aussieht - Ueberschrift links, Text rechts -, und nur die Bilder
   wandern in die rechte Spalte darunter. */
@media (min-width:1040px){
  #wir .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:clamp(32px,4.4vw,72px);align-items:start}
  /* Der Einstieg behaelt sein eigenes Raster ueber die ganze Breite. */
  #wir .einstieg{grid-column:1 / -1;grid-row:1}
  #wir .einstieg .kicker{grid-column:1;grid-row:1}
  #wir .einstieg h2{grid-column:1;grid-row:2}
  #wir .einstieg .lead{grid-column:2;grid-row:2;align-self:start;margin:0}
  #wir .einstieg .lead~.lead{grid-row:3;margin-top:.9rem}

  /* Die Bilder: rechte Spalte, unter dem Text, etwas tiefer. */
  #wir .wir{grid-column:2;grid-row:2;margin:0;max-width:none;
    grid-template-columns:1fr 1fr;margin-top:clamp(14px,2vw,34px);
    /* `start`, sonst dehnt das Raster die erste Karte auf die Hoehe
       der Zeile - gemessen 375 gegen 338 Pixel. */
    align-items:start}
  #wir .wir>*:nth-child(2){margin-top:clamp(22px,2.6vw,44px)}
}

/* ---------- 76 Die beiden Bilder sind gleich gross ---------- */

/* Simon: "Bei Nils ist das Bild komisch abgeschnitten, und ich moechte
   die Bilder gleich gross haben."

   Die Dateien sind 600x748 und 600x750 - fast, aber eben nicht genau
   gleich. Ein festes Verhaeltnis macht beide gleich, und der Ausschnitt
   sitzt oben: Dort ist das Gesicht. */
/* ZURUECKGENOMMEN: Ich hatte hier ein festes Verhaeltnis mit
   Ausschnitt gesetzt, um die beiden Karten gleich hoch zu machen.
   Simon: "Mir gefaellt nicht, dass du so an unsere Gesichter
   rangezoomt hast - lass das so, wie das Bild aussieht."
   Die zwei Pixel Unterschied in der Hoehe sind das kleinere Uebel. */
.kopf-karte img{aspect-ratio:auto;object-fit:fill}

/* ---------- 77 Der grosse Schriftzug passt am Handy ins Bild ------- */

/* 20 vw sind bei "ascendia" richtig und bei "jaeschke.flegel" zu viel:
   Der Name ist fast doppelt so lang und wurde am Handy rechts
   abgeschnitten. */
/* Die Sonderregel fuers Handy ist weg: Eine Groesse, die sich an der
   Fensterbreite ausrichtet, passt ueberall. */

/* ---------- 78 Kein Knopf mehr nach oben ---------- */
.hoch{display:none}


/* ---------- 79 Wer wir sind: der Text rueckt nach oben ---------- */

/* Simon: "Der Text soll ungefaehr da anfangen, wo eine Linie von 'Die
   ganze Preisliste ansehen' nach rechts laufen wuerde - also oben im
   Abschnitt, nicht erst auf Hoehe der Ueberschrift. 'Wer wir sind'
   bleibt links, wo es ist, und die Bilder darunter ein bisschen
   weiter nach links." */
@media (min-width:1040px){
  #wir .einstieg .lead{grid-row:1;align-self:start;margin-top:.2rem}
  #wir .einstieg .lead~.lead{grid-row:2;align-self:start;margin-top:.9rem}
  /* Die Bilder beginnen unter dem zweiten Absatz und ruecken nach
     links aus ihrer Spalte heraus. */
  #wir .wir{grid-row:3;margin-top:clamp(18px,2.4vw,40px);
    margin-left:clamp(-120px,-6vw,-40px)}
}

/* ---------- 80 Die Zahlen am Handy: derselbe Auftritt ---------- */

/* Simon: "Erst die Startanimation, dann fliegen die Zahlen rein und
   druecken den Text weg, dann zaehlen sie hoch, leuchten auf,
   verschwimmen - und dann kommt das Hero-Video."

   Also genau das, was am Rechner laeuft, nur zwei und zwei statt in
   den vier Ecken. Sie liegen dafuer auch hier frei in der Buehne. */
@media (max-width:760px){
  .hero-zahlen{position:absolute;left:0;right:0;
    top:50%;translate:0 -50%;
    z-index:3;display:grid;grid-template-columns:1fr 1fr;
    gap:clamp(22px,5vh,46px) clamp(10px,4vw,26px);
    width:auto;max-width:none;margin:0;padding:0 var(--pad);
    pointer-events:none;animation:none;opacity:1}
  .hero-zahlen>*{display:flex;flex-direction:column;align-items:center;gap:.2rem;
    opacity:var(--zahlen,0);
    translate:calc((1 - var(--zahlen,0)) * var(--zx,0px))
              calc((1 - var(--zahlen,0)) * var(--zy,0px));
    scale:calc(.84 + .16 * var(--zahlen,0));
    filter:drop-shadow(0 10px 30px rgba(5,6,13,.9))
           drop-shadow(0 0 calc(var(--zahlen-licht,0) * 22px)
                       rgba(92,140,248,calc(var(--zahlen-licht,0) * .85)))
           blur(var(--zahlen-weich,0px))}
  /* Jede kommt aus ihrer eigenen Ecke. */
  .hero-zahlen>*:nth-child(1){--zx:-60px;--zy:-54px}
  .hero-zahlen>*:nth-child(2){--zx:60px; --zy:-48px}
  .hero-zahlen>*:nth-child(3){--zx:-54px;--zy:52px}
  .hero-zahlen>*:nth-child(4){--zx:58px; --zy:56px}
  .hero-zahlen b{font-size:1.7rem;letter-spacing:-.035em;line-height:1.05}
  .hero-zahlen span{font-size:.64rem;letter-spacing:.07em;text-align:center}
}

/* ---------- 81 Die Fragen kommen deutlich herein ---------- */

/* Simon sieht sie weiterhin aufploppen. Also deutlicher: weiter von
   der Seite, laenger unterwegs, und nacheinander statt alle zugleich. */
.fragen details{transition:box-shadow .45s var(--ease),background-color .45s var(--ease),
  opacity 1.4s cubic-bezier(.25,.46,.3,1),
  translate 1.6s cubic-bezier(.16,.72,.26,1);
  transition-delay:calc(var(--n,0) * 90ms)}
.fragen details.auf{translate:0 44px}
.fragen details.auf.da{translate:none}
@media (min-width:1040px){
  .fragen details.auf:nth-child(odd){translate:-110px 30px}
  .fragen details.auf:nth-child(even){translate:110px 30px}
  .fragen details.auf.da{translate:none}
}

/* ---------- 82 Die Lichter gehen zum Seitenende aus ---------- */

/* Sie liegen fest im Bild. Beim Nachfedern am unteren Rand rutscht der
   Inhalt kurz hoch, und darunter kamen sie zum Vorschein - das ist der
   "komische Hintergrund" am iPhone. Sind sie am Ende aus, liegt dort
   nur noch die Grundfarbe, genau wie am Rechner. Zu sehen ist davon
   nichts: Der Fuss ist an der Stelle ohnehin deckend. */
.lichter,.schleier{opacity:calc(1 - var(--lichter-aus,0))}


/* ---------- 83 Die Ueberschrift steht wirklich untereinander ------- */

/* Gemessen bei 1440: z1 y262..351, z2 y262..351 - dieselbe Zeile,
   obwohl beide `display:block` sind.

   Der Grund steht im fertigen Quelltext:
     <span class="wort"><span class="z1">Ihre Website.</span></span>
     <span class="wort"><span class="z2">Von Hand gebaut.</span></span>
   Das Skript zerlegt die Ueberschrift in Woerter und legt um jeden
   Teil einen `.wort`-Mantel - und der ist `inline-block`. Meine beiden
   Bloecke steckten also in zwei nebeneinanderstehenden Maenteln.
   Am Handy fiel es nicht auf, weil dort der Platz fehlte.

   Jetzt ist der Mantel selbst ein Block. Damit kommt die Ueberschrift
   Zeile fuer Zeile herein statt Wort fuer Wort - das passt hier
   ohnehin besser, weil es nur zwei Teile sind. */
.hero h1>.wort{display:block}

/* ---------- 84 Am Handy steht der erste Text mittig ---------- */

/* Simon: "Der Text ganz am Anfang soll mittig sein und nicht oben." */
@media (max-width:760px){
  .hero-buehne{justify-content:center}
  .hero-innen{margin:auto 0;padding-top:0}
}

/* ---------- 85 Die Fragen fliegen weit von der Seite herein -------- */

/* Simon: "Das erste von links, das zweite von rechts, das dritte von
   links - so wie bei Ascendia." Die Richtung stimmte schon; der Weg
   war zu kurz, um sie zu sehen. Jetzt von weit ausserhalb. */
@media (min-width:1040px){
  .fragen details.auf:nth-child(odd){translate:-260px 20px}
  .fragen details.auf:nth-child(even){translate:260px 20px}
  .fragen details.auf.da{translate:none}
}
@media (max-width:1039px){
  .fragen details.auf:nth-child(odd){translate:-120px 18px}
  .fragen details.auf:nth-child(even){translate:120px 18px}
  .fragen details.auf.da{translate:none}
}


/* ---------- 86 Wer wir sind, nach Simons Skizze ---------- */

/* Simon hat drei Kaesten ins Bild gemalt: oben rechts (der Text soll
   dahin), links um "Wer wir sind" (hoeher) und unten um die Bilder
   (hoeher und weiter links).

   Gemessen war der Abstand: Der Abschnitt faengt bei y84 an, der
   Vorspann steht schon bei y168 - der ist also oben. Der Kicker aber
   erst bei y276, weil er in derselben Rasterzeile steht wie der
   Vorspann und `align-self:end` hat: Er klebte an deren Unterkante,
   145 Pixel tiefer als noetig. */
@media (min-width:1040px){
  #wir .einstieg .kicker{align-self:start}
  #wir .einstieg h2{margin-top:.2rem}
  /* Und die Bilder deutlich weiter nach links. */
  #wir .wir{margin-left:clamp(-230px,-12vw,-90px);
    margin-top:clamp(8px,1.4vw,22px)}
}


/* ---------- 87 Zwei Reihen, die von selbst laufen ---------- */

/* Kein Scrollbereich mehr, keine Pfeile, kein Wischen - eine reine
   Bilderfolge. Der Inhalt steht doppelt da und wandert um genau eine
   Haelfte nach links; an der Nahtstelle steht dasselbe Bild.

   `pointer-events:none` auf den Karten: Sonst waehlt man beim Wischen
   ueber die Reihe Text aus, und auf dem Handy bleibt die Seite
   haengen. */
#reigen-spur,#stimmen-spur{
  display:block;overflow:hidden;
  scroll-snap-type:none;touch-action:auto;
  padding-inline:0;margin-inline:0;cursor:default}
#reigen-spur::-webkit-scrollbar,#stimmen-spur::-webkit-scrollbar{display:none}
.lauf-zug{display:flex;width:max-content;align-items:stretch}
#reigen-spur .lauf-zug{gap:clamp(9px,1vw,14px)}
#stimmen-spur .lauf-zug{gap:clamp(10px,1.1vw,16px)}
#reigen-spur .reigen-karte,#stimmen-spur>.lauf-zug>li{pointer-events:none}
#stimmen-spur>.lauf-zug>li a{pointer-events:auto}

@keyframes reiheLaeuft{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

/* Die Reihe soll ueber die ganze Fensterbreite laufen und an den
   Raendern weich auslaufen - sonst schneidet sie hart ab. */
#reigen-spur,#stimmen-spur{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%)}

/* ZURUECKGENOMMEN: Diese Regel hielt beide Reihen an - mit
   `!important`, also auch gegen das Skript. Drei Zeilen weiter oben
   (Abschnitt 87) steht aber, dass sie bei "Bewegung reduzieren"
   langsamer weiterlaufen sollen: Sie liegen am Rand des Blicks,
   ziehen nichts mit und halten an, sobald man sie beruehrt.
   Das Tempo halbiert jetzt das Skript. */

/* ---------- 88 Die Tarife bewegen sich von selbst ---------- */

/* Simon: "Bei den Preisen kann man die Karten mit dem Zeiger bewegen -
   ich moechte, dass sie sich von alleine ein bisschen bewegen, und
   zwar auf PC, iPad und Handy."

   Drei Karten, drei leicht verschiedene Takte: So atmet die Reihe,
   statt im Gleichschritt zu wippen. */
/* So, wie sich die Karte frueher unter dem Zeiger geneigt hat - nur
   von selbst. Und abgestuft: Start wenig, Business mehr, Premium am
   meisten, mit einem halben Dreh.
   Der erste Versuch war mit knapp einem Grad viel zu zaghaft; Simon
   hat ihn gar nicht als dieselbe Bewegung erkannt. */
@keyframes tarifNeigt{
  0%,100%{transform:perspective(900px) rotateX(3deg)  rotateY(-5deg) translateY(0)}
  50%    {transform:perspective(900px) rotateX(-3deg) rotateY(5deg)  translateY(-10px)}
}
@keyframes tarifNeigtMehr{
  0%,100%{transform:perspective(900px) rotateX(5deg)  rotateY(-9deg)  translateY(0) scale(1)}
  50%    {transform:perspective(900px) rotateX(-5deg) rotateY(9deg)   translateY(-16px) scale(1.015)}
}
/* Premium dreht sich einmal halb durch und kommt zurueck - das ist
   der "3D-Flip", den Simon sich gewuenscht hat. */
@keyframes tarifFlip{
  0%  {transform:perspective(900px) rotateX(4deg) rotateY(-10deg) translateY(0)}
  38% {transform:perspective(900px) rotateX(-2deg) rotateY(26deg) translateY(-14px)}
  62% {transform:perspective(900px) rotateX(-4deg) rotateY(-22deg) translateY(-18px)}
  100%{transform:perspective(900px) rotateX(4deg) rotateY(-10deg) translateY(0)}
}
.tarife>*{animation:tarifNeigt 8s ease-in-out infinite;will-change:transform;
  transform-style:preserve-3d}
.tarife>*:nth-child(2){animation-name:tarifNeigtMehr;animation-duration:9.5s;animation-delay:-2.5s}
.tarife>*:nth-child(3){animation-name:tarifFlip;animation-duration:12s;animation-delay:-4s}
/* Beim Ueberfahren haelt die Karte an und kommt nach vorn - dann kann
   man in Ruhe lesen. */
.tarife>*:hover{animation-play-state:paused}

@media (prefers-reduced-motion:reduce){
  .tarife>*{animation:none}
}

/* ---------- 89 Die beiden Bilder stehen nebeneinander ---------- */

/* Simon: "Die Bilder moechte ich nebeneinander, nicht eins hoeher und
   eins niedriger." */
@media (min-width:1040px){
  #wir .wir>*:nth-child(2){margin-top:0}
}

/* ---------- 90 Die Handy-Szene im Einstieg ---------- */

/* Simon: "Wenn man auf das Handy tippt, kommt der Text 'Anfrage' - und
   der liegt ueber 'In zwei Wochen fertig'." Waehrend die Szene laeuft,
   tritt die Notiz zurueck. */
.hero.spielt-gerade .bau-notiz{opacity:0;transition:opacity .35s var(--ease)}


/* ---------- 91 Die Bewertungskarten sehen aus wie vorher ---------- */

/* ZURUECKGENOMMEN, und es war mein Fehler: Die Breite der Karten stand
   in `.stimmen>li{flex:0 0 ...}`. Die laufende Reihe haengt sie jetzt
   in einen Zug - damit sind sie keine direkten Kinder mehr, und die
   Regel griff nicht. Darum sahen sie ploetzlich anders aus, ohne dass
   ich etwas am Aussehen geaendert haette.
   Jetzt gilt die Breite fuer jedes `li` in der Reihe, egal wie tief. */
.stimmen li{flex:0 0 clamp(250px,25vw,316px)}
@media (max-width:760px){
  .stimmen li{flex:0 0 min(76vw,310px)}
}

/* ---------- 92 Der Satz steht unter dem Handy, nicht darauf ------- */

/* Simon: "So schnell geht eine Anfrage liegt ueber der Handy-Grafik."
   Er steht jetzt unter der ganzen Zeichnung statt unter dem Handy. */
.bau-sagt{bottom:auto;top:calc(100% + clamp(10px,1.6vw,20px))}
@media (max-width:760px){
  .bau-sagt{top:calc(100% + clamp(8px,2.4vw,16px))}
}

/* ---------- 93 Der erste Absatz unten im Preis-Abschnitt ---------- */

/* Simon: "Den ersten Absatz machst du ganz unten bei 'Die ganze
   Preisliste ansehen' rein, den zweiten ganz oben in die naechste
   Seite." Ein Absatz kann nicht ueber die Grenze zwischen zwei
   Abschnitten hinweg stehen - also steht einer davor und einer
   dahinter. */
.preis-fuss{display:grid;gap:clamp(18px,2.4vw,32px);align-items:start;
  margin-top:clamp(20px,2.4vw,30px)}
@media (min-width:1040px){
  .preis-fuss{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:clamp(32px,4.4vw,72px)}
  .preis-fuss>p:first-child{grid-column:1;margin:0}
  .preis-fuss-text{grid-column:2;margin:0}
}


/* ---------- 94 Weniger Abstand im Abschnitt "Wer wir sind" -------- */

/* Simon: "Zwischen den beiden Texten ist viel zu viel Abstand - nur
   eine Zeile. Und zwischen 'Wer wir sind' und der Ueberschrift auch."

   Der erste Abstand ist die Grenze zwischen zwei Abschnitten: Der eine
   endet, der andere faengt an, und beide haben ihren Innenabstand.
   Hier werden beide auf eine Zeilenhoehe zusammengezogen.

   Der zweite Abstand kam aus dem Raster: Die Ueberschrift steht in
   Zeile 2, und Zeile 1 war so hoch wie der Vorspann daneben. Jetzt
   nimmt der Vorspann beide Zeilen, und die Ueberschrift folgt direkt
   auf den Kicker. */
@media (min-width:1040px){
  #preise{padding-bottom:clamp(14px,1.6vw,22px)}
  #wir{padding-top:clamp(14px,1.6vw,22px)}
  #wir .einstieg .lead{grid-row:1 / span 2;align-self:start}
  #wir .einstieg h2{grid-row:2;margin-top:.35rem}
  #wir .wir{grid-row:3}
}

/* ---------- 95 Am Handy stehen beide Absaetze unter der Ueberschrift */

/* Reihenfolge am Handy: Knopf, "Wer wir sind", "Wir sind zu zweit",
   dann beide Absaetze. Das Umhaengen macht das Skript (Abschnitt 10b);
   hier steht nur, wie es danach aussieht. */
@media (max-width:1039px){
  .preis-fuss{display:block}
  .preis-fuss-text{margin-top:clamp(12px,2.6vw,20px)}
  #wir .einstieg .lead+.lead{margin-top:.85rem}
}

/* ---------- 96 Mehr Luft zwischen den Tarifkarten ---------- */

/* Simon: "Weil die sich so anwinkeln, gehen die Boxen manchmal
   uebereinander." Die Neigung bleibt - der Abstand waechst. */
.tarife{gap:clamp(22px,2.6vw,40px)}
@media (max-width:900px){
  .tarife{gap:clamp(26px,6vw,40px)}
}

/* ---------- 97 Der Satz unter der Handy-Szene ---------- */

/* Er stand bei `100%` der Zeichnung - und das Handy ragt rund ein
   Viertel darunter hinaus, also stand der Satz darauf. Jetzt deutlich
   tiefer; Platz ist dort reichlich. */
.bau-sagt{top:calc(100% + clamp(30px,4vw,54px))}
@media (max-width:760px){
  .bau-sagt{top:calc(100% + clamp(58px,15vw,96px))}
}


/* ---------- 98 Noch mehr Luft zwischen den Tarifkarten ---------- */

/* Gemessen am Handy: Karte 2 endete bei 781, Karte 3 begann bei 786 -
   fuenf Pixel. Die Neigung macht die Karte hoeher, als ihr Kasten ist,
   also reicht der Abstand des Kastens nicht. */
/* Gemessen nach dem ersten Versuch: 25 und 61 Pixel - der erste
   Abstand war immer noch zu klein, weil die mittlere Karte sich am
   staerksten neigt. */
@media (max-width:900px){
  .tarife{gap:clamp(68px,17vw,104px)}
}

/* ---------- 99 Der Satz unter der Handy-Szene, noch tiefer ------- */
.bau-sagt{top:calc(100% + clamp(44px,5.5vw,76px))}
@media (max-width:760px){
  .bau-sagt{top:calc(100% + clamp(86px,22vw,140px))}
}


/* ---------- 100 Die Bilder sind fertig, sobald man sie sieht ------- */

/* Simon: "Das Bild wird groesser und die Farben kommen erst, wenn man
   draufklickt. Das gefaellt mir nicht - ich moechte, dass das Bild
   schon fertig ist. Nur der Text soll hochkommen."

   Also keine Entsaettigung, keine Abdunklung, kein Wachsen. Was
   bleibt, ist der Text, der beim Ueberfahren heraufkommt - und am
   Handy mit dem Scrollen. */
.reigen-karte img,.ref-bild img,.kopf-karte img,
.reigen-karte:hover img,.ref-bild:hover img,.kopf-karte:hover img{
  filter:none;transform:none;scale:none}

/* ---------- 101 Beide Reihen laufen gleichmaessig durch ---------- */

/* Auch am Handy: ein ruhiges Durchlaufen von rechts nach links,
   langsam genug zum Mitlesen, anzuhalten mit dem Finger. Die Schritte
   von Karte zu Karte sind raus. */
@media (max-width:760px){
  .stimmen li{flex:0 0 min(80vw,320px)}
}


/* ---------- 102 Die Bildkarten bleiben stehen ---------- */

/* Beim letzten Mal habe ich nur die BILDER ruhiggestellt - keinen
   Zoom, keine Farbaenderung. Die KARTE hebt sich beim Ueberfahren aber
   zusaetzlich an (`translateY(-5px)`), und genau das sieht aus, als
   springe das Bild. Simon: "die Bilder springen immer noch, wenn man
   mit dem Zeiger drauf geht."

   Jetzt bleibt auch die Karte stehen. Was kommt, ist allein der Text. */
.reigen-karte,.kopf-karte,.ref-bild{transition:box-shadow .45s var(--ease)}
.reigen-karte:hover,.kopf-karte:hover,.ref-bild:hover{transform:none;scale:none}

/* ---------- 103 Die Tarife: eine Stufe zurueck ---------- */

/* Simon: "Start gar keine Animation, Business bekommt die kleine von
   Start, Premium die kleine, die Business gerade hat." Der halbe Dreh
   ist damit raus - er war zu viel. Auf PC, iPad und Handy gleich.
   Beim Ueberfahren halten sie weiter an. */
.tarife>*{animation:none}
.tarife>*:nth-child(2){animation:tarifNeigt 8s ease-in-out infinite;
  animation-delay:-2s;will-change:transform}
.tarife>*:nth-child(3){animation:tarifNeigtMehr 9.5s ease-in-out infinite;
  animation-delay:-4s;will-change:transform}
.tarife>*:hover{animation-play-state:paused}

@media (prefers-reduced-motion:reduce){
  .tarife>*{animation:none}
}


/* ---------- 104 Die Bewertungen bleiben am Handy sichtbar ---------- */

/* Im Browser am Rechner laufen sie durch - gemessen ueber 28 Sekunden,
   immer zwei Karten im Bild. Am iPhone war nach der ersten Karte
   nichts mehr zu sehen. Das ist kein Rechenfehler, sondern Safari:

   - Eine BEWEGTE Ebene, die mit `mask-image` weich auslaeuft, muss in
     einen eigenen Zwischenspeicher gezeichnet werden. Bei ueber 5000
     Pixeln Breite gibt Safari das auf und laesst Flaechen leer.
   - Ohne ausdrueckliche eigene Ebene entscheidet Safari waehrend des
     Laufs neu, wie gezeichnet wird - dann flackert es.

   Am Handy also: kein weiches Auslaufen (der Rahmen schneidet dort
   ohnehin sauber ab) und eine feste eigene Ebene. */
/* `will-change` statt `translateZ(0)`: Beides erzwingt die eigene
   Ebene, aber `translateZ(0)` setzt `transform` - und genau die
   Eigenschaft bewegt die Bilderfolge. Zwei Anspruechen auf dieselbe
   Eigenschaft bin ich auf dieser Seite schon oft genug begegnet. */
.lauf-zug{will-change:transform;backface-visibility:hidden}
@media (max-width:760px){
  #stimmen-spur,#reigen-spur{
    -webkit-mask-image:none;mask-image:none}
}


/* ---------- 105 Das Bild bestimmt die Hoehe, nicht der Kasten ----- */

/* Simon: "Warum hast du reingezoomt? Ich moechte das Originalbild in
   einer Box."

   Gemessen war zwar nichts verzerrt - die Dateien sind 4:5 und die
   Kaesten auch. Aber solange der KASTEN das Verhaeltnis vorgibt,
   wird jedes Bild, das einmal anders geschnitten ist, beschnitten.
   Jetzt gibt das Bild die Hoehe vor; der Kasten legt sich darum.
   Die Bewegung und der Text darueber bleiben, wie sie sind. */
.reigen-karte{aspect-ratio:auto}
.reigen-karte img{height:auto;object-fit:contain;aspect-ratio:auto}
.kopf-karte img{height:auto;object-fit:contain;aspect-ratio:auto}
.ref-bild img{height:auto;object-fit:contain;aspect-ratio:auto}
/* Alle Karten einer laufenden Reihe gleich hoch: Sonst wackelt die
   Reihe, sobald ein Bild ein anderes Verhaeltnis hat. */
#reigen-spur .lauf-zug{align-items:flex-start}

/* ---------- 106 Die Unterschrift neben den Bildern ---------- */

/* Links neben den beiden Portraits war auf dem Rechner eine grosse
   leere Flaeche. Simon: "Da kannst du vielleicht noch was Kleines
   machen." Eine handgeschriebene Unterschrift - dieselbe Schrift wie
   am Hero-Fenster - und darunter, wo die beiden sitzen. */
.wir-zeichen{display:none}
@media (min-width:1040px){
  /* `align-self:end`: Sie steht auf der Hoehe, auf der die Bilder
     enden - nicht oben in der Zeile. Simon: "ungefaehr da, wo das
     Bild endet, vielleicht ein bisschen weiter unten." */
  #wir .wrap .wir-zeichen{display:flex;flex-direction:column;gap:.45rem;
    grid-column:1;grid-row:3;align-self:end;
    margin-bottom:clamp(6px,1.4vw,24px);padding-left:clamp(0px,2vw,34px)}
  .wir-strich{width:72px;height:1px;background:linear-gradient(90deg,var(--rot),transparent)}
  .wir-namen{font-family:var(--hand);font-size:clamp(1.5rem,2.6vw,2.3rem);
    color:var(--text);line-height:1.1}
  .wir-ort{font-family:var(--fest);font-size:.76rem;letter-spacing:.12em;
    text-transform:uppercase;color:var(--leiser)}
}

/* ---------- 107 In den laufenden Reihen wird nichts markiert ------ */

/* Simon: "Wenn ich gedrueckt halte, bleibt es super stehen - aber dann
   kann man auf einmal einen Text kopieren."
   Ein langer Druck auf Text markiert ihn; in einer laufenden Reihe
   will das niemand. */
#reigen-spur,#stimmen-spur{
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none}


/* ---------- 108 Die zwei Portraits sind die Originalbilder -------- */

/* Simon: "Die Bilder sind immer noch nicht original. Schau bei
   'unsere webseite bilder' - IMG_6520.JPG und OFXV2938.JPG. Nimm
   einfach das Originalbild, fuer alle Layouts."

   Die alten Dateien waren beim Herunterladen schon auf ein
   Hochformat zugeschnitten. Jetzt liegen die ganzen Aufnahmen da:
   Nils quer (1400 x 934), Simon hoch (934 x 1400). Nichts
   beschnitten, nichts gezoomt, nichts verzerrt.

   Zwei verschieden geformte Bilder nebeneinander werden nur dann
   eine ruhige Reihe, wenn sie GLEICH HOCH sind. Dafuer bekommt jede
   Karte so viel Breite, wie ihr Bild breit ist: `flex-grow` ist das
   Seitenverhaeltnis (`--ar` am Element). Zwei Bilder mit gleicher
   Hoehe haben Breiten im Verhaeltnis ihrer Seitenverhaeltnisse -
   also stimmt die Hoehe von allein, auf jeder Fensterbreite. */
.wir{display:flex;flex-wrap:nowrap;align-items:flex-start}
.kopf-karte{flex:var(--ar,1) 1 0%;min-width:0}
/* Das Bild fuellt seine Karte und behaelt sein eigenes Verhaeltnis. */
.kopf-karte img{width:100%;height:auto;aspect-ratio:auto;object-fit:fill}

/* Unter 760 Pixeln untereinander - nebeneinander waere jedes Bild zu
   klein, um ein Gesicht zu erkennen. Dieselbe Grenze wie bei der
   Regel `.wir{max-width:300px}` weiter oben, sonst entstuende
   dazwischen ein Streifen, in dem beide Bilder in einen 300 Pixel
   breiten Kasten gequetscht werden (gemessen: 207 und 92 Pixel). */
@media (max-width:760px){
  .wir{flex-direction:column}
  .kopf-karte{flex:0 0 auto;width:100%}
}

/* ---------- 109 Beide Portraits haben dasselbe Format ---------- */

/* Simon: "Mein Bild ist so wie es ist perfekt. Das Bild von Nils
   passt du an meins an, dass es gleich gross ist - und zwar fuer
   jedes Layout. Aber zoom nicht zu weit ran, ich will noch
   Hintergrund sehen."

   Die Aufnahme von Nils (IMG_6520.JPG) ist quer, 1536 x 1024. Daraus
   ein Hochformat 2:3 wie bei Simon: ausgeschnitten 478 x 717, also
   70 Prozent der Bildhoehe. Das reicht, damit Nils ungefaehr so gross
   im Bild steht wie Simon, und laesst Wiese, Baeume und Himmel
   stehen. Mehr Zoom waere das, was Simon nicht wollte.

   Beide Dateien sind jetzt 934 x 1400. `--ar` ist bei beiden Karten
   gleich - damit sind die Kaesten auf jeder Fensterbreite gleich
   breit UND gleich hoch, ohne eine einzige Sonderregel. */


/* ---------- 110 Der Schleier ohne Weichzeichner ---------- */

/* Simon: "Die Webseite buggt und laggt beim Scrollen."

   Gemessen mit angehaltener und mit laufender Seite: 24 bis 30 Bilder
   je Sekunde, auch im Stillstand; eine leere Seite im selben Browser
   schafft 60. Das Rechenwerk war dabei zu 90 Prozent unbeschaeftigt -
   es lag also nicht am Skript, sondern am Zeichnen.

   Jede laufende Animation einzeln abgeschaltet:

     nichts aus              24 Bilder/s
     `schleier` aus          60 Bilder/s
     jede andere einzeln     23 bis 25 Bilder/s

   `.schleier` ist 2,9 Millionen Bildpunkte gross, traegt
   `filter: blur(34px)` und wandert 46 Sekunden lang. Jedes Bild muss
   der Browser die ganze Flaeche neu weichzeichnen - das schafft keine
   Grafikkarte nebenbei.

   Der Weichzeichner bringt hier nichts: Darunter liegen drei
   `radial-gradient`, die von sich aus weich auslaufen. Ohne ihn
   unterscheidet sich das Bild um einen mittleren quadratischen Fehler
   von 0,28 (PSNR 53,6 dB) - unsichtbar.

   Gegengeprueft: nur schieben statt wachsen bringt 23 Bilder/s,
   Weichzeichner auf 12 px bringt 27. Nur das Weglassen hilft. */
.schleier{filter:none}

/* Dasselbe gilt fuer den Lichtfleck am Zeiger, falls er je einen
   Weichzeichner bekommt: Eine wandernde Flaeche und `filter` vertragen
   sich nicht. Weiche Kanten kommen aus dem Verlauf, nicht aus dem
   Filter. */

/* ---------- 111 Anhalten nur mit echtem Zeiger ---------- */

/* Die Regel `:hover` wirkt auf dem iPhone nach dem ersten Tippen
   weiter - der nachgemachte Zeiger bleibt dort stehen. Darum gilt das
   Anhalten beim Ueberfahren nur, wo es wirklich einen Zeiger gibt. */
@media (hover:none){
  .stimmen-lauf:hover .stimmen{animation-play-state:running}
}


/* ---------- 112 Glas nur dort, wo man es sieht ---------- */

/* Auf der Preisseite tragen 32 Elemente `backdrop-filter`, zusammen
   5,4 Millionen Bildpunkte. Das ist der groesste verbliebene Posten
   beim Scrollen - und bei den Bausteinen ist er umsonst: Hinter
   ihnen liegt nur der ruhige dunkle Grund, und einen ruhigen Grund
   weichzuzeichnen aendert nichts.

   Nachgemessen (1440, Mausrad ueber die ganze Seite):

                               Mittel   Bilder ueber 33 ms
     alles wie jetzt           24,6 ms        42 %
     Bausteine ohne Glas       22,6 ms        32 %
     Tabellenrahmen ohne Glas  20,1 ms        20 %

   Und wie viel sieht man davon? Als PSNR gegen das jetzige Bild,
   an zwei Scrollhoehen:

     Bausteine ohne Glas       75,4 / 56,8 dB   -> nicht zu sehen
     Tabellenrahmen ohne Glas  41,5 dB          -> zu sehen

   Also: Die Bausteine verlieren das Glas, der Tabellenrahmen behaelt
   es. Der Kasten selbst, seine Linie und sein Verlauf bleiben
   unveraendert. */
.baustein{backdrop-filter:none;-webkit-backdrop-filter:none}


/* ---------- 113 Die Zahlen im Einstieg bleiben in den Ecken ------- */

/* Simon, zum iPad: "Das Hero-Video und die allererste Animation sind
   komplett komisch."

   Gemessen, auf zehn Breiten, jeweils genau an der Stelle, an der die
   Zahlen ganz da sind und der Text noch steht:

     iPad quer 1024   Zahl 3 "5,0" liegt auf der H1 (50 x 58 px),
                      Zahl 4 "24 Std." auf den Knoepfen (43 x 51 px)
     iPad quer 1080   Zahl 3 (45 x 59)   Zahl 4 (26 x 46)
     iPad quer 1194   Zahl 3 (37 x 62)
     PC 1280          Zahl 3 (30 x 63)
     PC 1440 / 1920   sauber

   Der Grund steht in Abschnitt 57: Die beiden inneren Zahlen stehen
   bei 19 und 21 Prozent der FENSTERBREITE. Auf einem breiten Schirm
   ist das weit aussen vom Text, auf einem schmalen mitten drin.

   Unter 1360 Pixeln stehen darum alle vier in den Ecken: zwei oben,
   zwei unten, alle am Rand. Der Textblock steht mittig und ist nie so
   hoch, dass er bis in die Ecken reicht - damit ist die
   Ueberschneidung baulich ausgeschlossen, nicht nur weggerueckt.

   Ab 1360 bleibt alles genau so, wie es ist: Dort stimmt es, und
   Simon sagt zum Rechner "Design ist super". */
@media (min-width:761px) and (max-width:1359px){
  .hero-zahlen>*:nth-child(1){right:4.5%;top:11%;   left:auto;bottom:auto;
    --zx:72px; --zy:-56px}
  .hero-zahlen>*:nth-child(3){left:4.5%; top:11%;   right:auto;bottom:auto;
    --zx:-72px;--zy:-56px}
  .hero-zahlen>*:nth-child(2){left:4.5%; bottom:11%;right:auto;top:auto;
    --zx:-72px;--zy:60px}
  .hero-zahlen>*:nth-child(4){right:4.5%;bottom:11%;left:auto;top:auto;
    --zx:72px; --zy:60px}
}

/* ---------- 114 Das iPad hochkant ---------- */

/* Zwei Dinge, die nur auf einem hohen, schmalen Schirm auffallen.

   ERSTENS die Laenge: 460vh sind auf einem 1112 Pixel hohen iPad
   5115 Pixel Scrollweg - gegen 4140 auf dem Rechner und 2812 am
   Handy. Der laengste Einstieg von allen, auf dem Geraet mit dem
   hoechsten Bildschirm. 360vh bringen ihn auf 4003 Pixel, also auf
   dasselbe Mass wie am Rechner.

   ZWEITENS das Fenster: Ueber 760 Pixeln hat `.bau-rahmen` keinen
   Rand und keine Flaeche. Am Rechner faellt das nicht auf, weil die
   Szene 78 Prozent der Bildschirmhoehe fuellt. Auf dem iPad hochkant
   sind es 39 Prozent - und dann schweben nur noch eine Leiste und ein
   paar Kaesten im Schwarz. Am Handy hat der Rahmen genau deshalb eine
   zarte Linie und eine Spur Flaeche. Hier bekommt er sie auch, und
   die Szene darf etwas breiter werden. */
@media (min-width:761px) and (max-width:1039px) and (orientation:portrait){
  .hero{--hero-weg:360vh}
  .bau-gruppe{width:min(92vw,880px)}
  .bau-rahmen{background:rgba(238,242,255,.022);
    box-shadow:inset 0 0 0 1px rgba(238,242,255,.09)}

  /* Das Handy steht INNERHALB der rechten Fensterkante, nicht
     daneben - genau wie am Handy (Abschnitt 51). Bei 92 Prozent
     Fensterbreite ist rechts daneben kein Platz mehr: gemessen stand
     seine rechte Kante bei 850 Pixeln auf einem 834 Pixel breiten
     Schirm. */
  .bau-handy,.bau-tippen{right:2%;left:auto;width:21%}
  .bau-tippen-schild{left:auto;right:0}
  .bau-tippen-schild::after{left:auto;right:18px}
}

/* ---------- 115 Glas, das niemand sehen kann ---------- */

/* Auf der Startseite tragen 174 Elemente `backdrop-filter`, zusammen
   9,4 Millionen Bildpunkte. Die groesste Gruppe sind die 44 Bildkarten
   der laufenden Reihe: 4,0 Millionen Bildpunkte - und jede ist randvoll
   mit einem Foto (gemessen: Karte 272 x 340, Bild 272 x 340). Da ist
   nichts durchzusehen. Dasselbe gilt fuer die 72 Pillen im
   Schlagwortband. Beide Gruppen BEWEGEN sich staendig, also rechnet
   der Browser den Weichzeichner in jedem Bild neu.

   Abschnittsweise gemessen (1440, Mausrad ueber den Abschnitt):

                        vorher              nachher
     arbeiten        22,5 ms / 30 %      16,7 ms / 0 %

   Und wie viel sieht man davon? Ein Seitenaufbau, ein Standort, zwei
   Bilder - einmal mit, einmal ohne:

     Bildkarten ohne Glas    PSNR 48,6 dB    (anderswo: Bild gleich)
     Band-Pillen ohne Glas   PSNR 77,7 dB
     Tarife ohne Glas        PSNR 40,4 dB    <- das sieht man

   Die Tarife behalten ihr Glas. Am Radius zu drehen bringt nichts:
   20, 12 und 8 Pixel kosten gleich viel (18,4 / 18,5 / 18,7 ms),
   Chrome rechnet den Weichzeichner ohnehin verkleinert. */
.reigen-karte,.kopf-karte,.ref-bild,.weiter-bild,
.band-innen span{backdrop-filter:none;-webkit-backdrop-filter:none}


/* ---------- 116 "Bewegung reduzieren" heisst ruhig, nicht kaputt --- */

/* Simons iPad hat den Schalter "Bewegung reduzieren" an (Einstellungen
   > Bedienungshilfen > Bewegung). Safari meldet das als
   `prefers-reduced-motion: reduce`.

   Nachgestellt in Chrome mit genau diesem Schalter, 834 x 1112:

                                normal    mit dem Schalter
     Hoehe des Einstiegs       4003 px        1126 px
     Bilderreihe               laeuft         steht
     Bewertungen               laeuft         steht
     laufende Animationen          34             13

   Der Fehler war nicht, dass abgeschaltet wurde - sondern WAS. Die
   Regel soll alles nehmen, was den Blick MITZIEHT: Scroll-Filme,
   Parallaxe, Zoom, grosse Wege. Sie verlangt nicht, dass eine Seite
   ohne jeden Auftritt dasteht. Genau das war sie aber geworden.

   Jetzt: keine Bewegung, aber Aufblenden. */

@media (prefers-reduced-motion:reduce){
  /* Texte und Kaesten blenden ruhig auf - nur Deckkraft, kein Weg,
     keine Groessenaenderung. Vorher: `opacity:1;transition:none`,
     also gar kein Auftritt. Simon: "Die ploppen einfach auf." */
  .auf{opacity:0;translate:none;scale:none;
    transition:opacity .55s linear}
  .auf.da{opacity:1}
  .auf[style*="--n"]{transition-delay:calc(var(--n) * 70ms)}
  .fragen details.auf{translate:none}

  /* Die vier Zahlen stehen untereinander statt in den Ecken: Die
     Buehne ist hier nur noch so hoch wie ihr Inhalt, und `inset:0`
     legte sie quer ueber Text und Szene. */
  .hero-zahlen{position:static;inset:auto;display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(12px,2vh,20px) clamp(10px,3vw,24px);
    width:100%;max-width:420px;margin:clamp(20px,3vh,36px) auto 0}
  .hero-zahlen>*{position:static;inset:auto;opacity:1;
    translate:none;scale:none;filter:none;text-align:center}

  /* Das Fenster steht fertig da (das Skript setzt die Werte). Damit
     es nicht im Nichts haengt, bekommt es dieselbe zarte Linie wie
     auf dem iPad hochkant. */
  .bau-rahmen{background:rgba(238,242,255,.022);
    box-shadow:inset 0 0 0 1px rgba(238,242,255,.09)}

  /* Der grosse Schriftzug unten blendet mit auf. */
  #riesig{transition:opacity .6s linear}

  /* Die Reihenfolge: erst der Text, dann die Szene. Im Quelltext
     steht die Szene VOR dem Text, weil sie sonst dahinterliegt -
     sobald sie in den Fluss rutscht, stuende sie darueber. */
  .hero-innen{order:0}
  .hero-zahlen{order:1}
  .bau{order:2}
}


/* ---------- 117 Die Zahlen im Einstieg ohne Filterebene ---------- */

/* Simon, zum iPad: "Bei 14 Tage, 499 und so sehe ich drumherum diese
   Box. Und ich sehe so 100 Boxen hintereinander oder uebereinander,
   die dann kommen oder verschwinden."

   In Chrome ist um die Zahlen nichts: kein Hintergrund, kein Rand,
   kein Schatten - nachgemessen auf iPad quer, iPad hoch, Rechner und
   Handy. Was es gibt, ist ein `filter` mit zwei `drop-shadow` und
   einem `blur`, dessen Werte sich bei JEDEM Bild aendern (die Zahlen
   fliegen herein, leuchten auf und verschwimmen wieder).

   Genau das ist auf Safari die bekannte Schwachstelle: Ein Element
   mit `filter` bekommt eine eigene Zeichenebene. Aendert sich dabei
   auch noch `translate` und `scale`, zeichnet Safari die alte Ebene
   nicht sauber weg - man sieht den Rahmen der Filterflaeche ("diese
   Box") und beim Bewegen die alten Stellen stehen ("100 Boxen
   hintereinander").

   Dasselbe steht schon in Abschnitt 104 ueber die Bewertungsreihe:
   bewegte Flaeche + eigene Ebene = Safari gibt auf.

   Der Schatten kommt jetzt aus `text-shadow`. Der braucht keine
   eigene Ebene, sieht genauso aus und kann nichts stehen lassen.
   Das Verschwimmen beim Hinausgehen faellt weg - die Zahlen blenden
   ohnehin gleichzeitig aus. */
@media (min-width:761px){
  .hero-zahlen>*{filter:none}
  .hero-zahlen b{
    text-shadow:0 8px 26px rgba(5,6,13,.9),
                0 0 calc(var(--zahlen-licht,0) * 26px)
                rgba(92,140,248,calc(var(--zahlen-licht,0) * .6))}
  .hero-zahlen span{text-shadow:0 6px 18px rgba(5,6,13,.9)}
}

/* ---------- 118 Das iPad quer: die Szene passt ins Fenster ------- */

/* Simon: "Wenn ich das iPad schraeg habe, ist die Taskleiste ganz
   oben ueber der Webseite-Grafik. Das Handy ist unten abgeschnitten.
   Und die Animation danach sehe ich nicht, weil das abgeschnitten
   wurde."

   Nachgerechnet bei 1194 x 834:

     Buehne hoch           834
     - oben frei           ca. 96   (Kopfzeile plus Luft)
     - unten frei          ca. 70
     = Platz               ca. 668
     Szene                 1003 breit = 627 hoch
     + Handy haengt 11 %   = 69
     = gebraucht           696        -> 28 Pixel zu viel, oben und
                                         unten gleichzeitig

   Also wird die Szene auf kurzen Schirmen nicht mehr nach der BREITE
   bemessen, sondern nach der HOEHE: so breit, dass sie mit dem Handy
   darunter in den freien Platz passt. Der Rechner ist ausgenommen
   (ueber 1366 Pixel breit) - dort stimmt es, und Simon sagt zum
   Rechner "Design ist super". */
@media (min-width:761px) and (max-width:1366px) and (max-height:1024px)
   and (orientation:landscape){
  /* 1.44 statt 1.6: Das Fenster ist 16:10, das Handy haengt 11 % tief
     darunter, und ueber dem Fenster steht noch die Handschrift. */
  .bau-gruppe{width:min(84vw,1120px,calc((100vh - 250px) * 1.44))}
}

/* ---------- 119 Das Schlagwortband bleibt auf dem iPad sichtbar -- */

/* Simon: "Das, was unter dem Hero-Video kommt, mit Wartung, SEO und
   so - das sehe ich gar nicht, das animiert sich nicht, da ist
   einfach nichts."

   In Chrome laeuft es: gemessen 72 Pillen, 7537 Pixel breit,
   `laufen 44s`, sichtbar. Aber das ist genau der Fall aus
   Abschnitt 104:

     "Eine BEWEGTE Ebene, die mit `mask-image` weich auslaeuft, muss
      in einen eigenen Zwischenspeicher gezeichnet werden. Bei ueber
      5000 Pixeln Breite gibt Safari das auf und laesst Flaechen
      leer."

   Gemessene Breiten des Bandes: iPad quer 7537, Rechner 7954,
   iPad hoch 4808, Handy 4808. Ueber 5000 - und auf dem iPad ist
   leer, was auf dem Rechner laeuft.

   Dieselbe Abhilfe wie damals: kein weiches Auslaufen dort, wo
   getippt wird, und eine feste eigene Ebene. Am Handy bleibt alles
   wie es ist - Simon: "Beim iPhone moechte ich gar nichts aendern." */
.band-innen{will-change:transform;backface-visibility:hidden}
@media (hover:none) and (min-width:761px){
  .band{-webkit-mask-image:none;mask-image:none}
}

/* ---------- 120 Der Ablauf auf dem iPad wie am Handy ------------- */

/* Simon: "Bei der Hochkant-Version sieht man die Grafik bei Ablauf
   nicht, weil das oben bleibt. So wie beim Handy ist eigentlich gut."

   Stimmt: Unter 900 Pixeln steht der Ablauf schon in einer Spalte,
   und das grosse Fenster steht dann einfach oben drueber und
   scrollt weg. Die Loesung vom Handy - jeder Schritt traegt seine
   eigene kleine Zeichnung - galt aber erst ab 760 abwaerts. Dazwischen
   (761 bis 900, also iPad hochkant) gab es weder das eine noch das
   andere. */
@media (max-width:900px){
  .ablauf-steht{display:none}
  .schritt-bild{display:flex}
}

/* ---------- 121 "Und so geht es weiter" auf dem iPad ------------- */

/* Simon: "Die Galerie oben, darunter direkt die Anfrage, und in der
   Mitte von den beiden ungefaehr das Handy."

   Vorher: Galerie und Handy nebeneinander, die Anfrage darunter links
   - rechts daneben ein leeres Feld so gross wie eine ganze Karte. */
@media (min-width:761px) and (max-width:1039px){
  .weiter-reihe{grid-template-columns:1fr 1fr;align-items:start}
  .weiter-reihe>*:nth-child(1){grid-column:1;grid-row:1}
  .weiter-reihe>*:nth-child(3){grid-column:1;grid-row:2}
  .weiter-reihe>*:nth-child(2){grid-column:2;grid-row:1 / span 2;
    align-self:center}
}

/* ---------- 122 Premium steht in der Mitte ---------- */

/* Simon: "Start links, Business rechts - und Premium moechte ich dann
   in der Mitte haben."

   Im Raster faellt die dritte Karte in die zweite Zeile ganz nach
   links. Mit `flex-wrap` und `justify-content:center` rutscht sie von
   selbst in die Mitte, ohne eine einzige Sonderregel fuer die dritte
   Karte.

   Der Abstand: zwischen den Zeilen bleibt er gross (Abschnitt 98 -
   die Karten neigen sich und stiessen sonst aneinander), zwischen den
   Spalten wird er normal. 104 Pixel waren fuer uebereinander gedacht,
   nicht fuer nebeneinander. */
@media (min-width:761px) and (max-width:1039px){
  .tarife{display:flex;flex-wrap:wrap;justify-content:center;
    align-items:stretch;
    row-gap:clamp(68px,17vw,104px);
    column-gap:clamp(22px,3vw,34px)}
  .tarife>*{flex:0 1 calc(50% - clamp(22px,3vw,34px) / 2 - 1px);
    min-width:0}
}

/* ---------- 123 Ein Licht hinter Premium ---------- */

/* Simon: "Du kannst um Premium herum so einen Leuchteffekt machen,
   der sich in den Horizont streckt - also nicht senkrecht, sondern
   waagerecht."

   Ein breites, flaches Licht hinter der Karte. Es liegt UNTER ihr
   (`z-index:-1`) und faengt keine Klicks ab. Keine Animation: Die
   Karte bewegt sich schon von selbst, und ein pulsendes Licht
   dahinter waere das Dritte im Bild. */
.tarif.voll{position:relative}
.tarif.voll::before{content:"";position:absolute;z-index:-1;
  /* Weit nach links und rechts, flach in der Hoehe: Das Licht legt
     sich wie ein Streifen hinter die Karte, nicht wie ein Kranz um
     sie herum. Simon: "der sich in den Horizont streckt - also nicht
     senkrecht, sondern waagerecht." */
  left:-52%;right:-52%;top:26%;bottom:26%;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(58% 50% at 50% 50%,
    rgba(139,108,248,.62),rgba(44,224,206,.3) 46%,transparent 76%);
  filter:blur(34px)}
@media (max-width:760px){
  .tarif.voll::before{left:-22%;right:-22%;top:30%;bottom:30%;filter:blur(24px)}
}

/* ---------- 124 "Wer wir sind" steht auf dem iPad mittig --------- */

/* Simon: "Den Text bei Wer wir sind kannst du mittig machen - also
   mittig auf die Webseite."

   Am Handy steht er schon mittig, am Rechner in der rechten Spalte
   neben der Ueberschrift. Dazwischen stand er linksbuendig ueber die
   ganze Breite. */
@media (min-width:761px) and (max-width:1039px){
  #wir .einstieg{text-align:center}
  #wir .einstieg .lead{margin-inline:auto;max-width:56ch}
  #wir .einstieg .kicker{justify-content:center}
}


/* ---------- 125 Band und Laufschrift liegen UEBER dem Grund ------ */

/* Simon, zum iPad hochkant: "Unter dem Hero-Video, das SEO, Wartung
   und so weiter - diese Animation sehe ich nicht. Ah, jetzt ist sie
   auf einmal aufgeploppt. Warum? Keine Ahnung."

   Nachgesehen, welche Bloecke unter `<main>` welche Ebene haben:

     section.hero      position:relative  z-index:2    ok
     div.band          position:static    z-index:auto  <<<
     section ... (12x) position:relative  z-index:2    ok
     div.laufschrift   position:static    z-index:auto  <<<

   Jeder Abschnitt der Seite ist `position:relative; z-index:2` -
   damit liegt er ueber den zwei festen Hintergrundebenen
   (`.schleier` z-index:0 und `.koernung` z-index:1). Das Band und die
   Laufschrift sind die einzigen zwei Bloecke, die das nicht sind:
   Sie stehen nackt im Textfluss und werden deshalb VOM HINTERGRUND
   UEBERMALT.

   In Chrome faellt das kaum auf - die beiden Ebenen sind
   durchscheinend. Auf Safari ist `.schleier` eine grosse eigene
   Zeichenebene, und was darunter liegt, erscheint dort erst, wenn
   irgendetwas ein Neuzeichnen ausloest. Genau das hat Simon gesehen:
   lange nichts, dann ploetzlich da.

   Dieselbe Ebene wie fuer jeden Abschnitt - mehr ist es nicht. */
.band,.laufschrift{position:relative;z-index:2}


/* ---------- 126 Leistung links, Preis rechts ---------- */

/* Simon: "Ueberall, wo ueber Preise gesprochen wird, fehlt ein
   Leerzeichen - da ist ein Wort und dann kommt direkt der Preis."

   Stimmt, und zwar wortwoertlich. Die Zeilen auf der Preisseite sehen
   im Quelltext so aus:

     <li><span>Zusaetzliche Seite</span><b>89 Euro</b></li>

   Zwischen den beiden Elementen steht kein Leerzeichen, und `.zl`
   hatte im ganzen Stilblatt KEINE Regel. Also blieb es ein ganz
   normaler Listenpunkt, und beide standen direkt aneinander -
   nachgemessen 0 Pixel Abstand, auf jedem Geraet, in 20 Zeilen.

   Ein Leerzeichen in den Quelltext zu schreiben waere die halbe
   Loesung. Eine Preisliste gehoert in zwei Spalten: die Leistung
   links, der Preis rechts, dazwischen eine ruhige Linie. */
.zl{list-style:none;margin:0;padding:0}
.zl li{display:flex;align-items:baseline;justify-content:space-between;
  gap:clamp(14px,2.4vw,30px);padding:.46rem 0;
  border-bottom:1px solid var(--linie)}
.zl li:last-child{border-bottom:0}
.zl li>span{min-width:0}
.zl li>b{flex:0 0 auto;font-weight:700;white-space:nowrap;text-align:right}
/* "je Seite", "je Bild": kleiner und leiser, aber in derselben Zeile. */
.zl .ab{display:block;font-style:normal;font-family:var(--fest);
  font-size:.72em;font-weight:400;letter-spacing:.04em;color:var(--leiser);
  margin-top:.1rem}

/* ---------- 127 Das Ziel steht in jedem Abschnitt ---------- */

/* Simon: "Allgemein fuer jedes Layout muss das Ziel der Webseite klar
   sein. Das Ziel ist, Kunden zu gewinnen - deswegen muss immer
   irgendwie ein Knopf da sein oder immer wieder darauf aufmerksam
   gemacht werden."

   Nachgezaehlt hatten 9 von 15 Abschnitten keinen Weg zur Anfrage:
   band, problem, punkt, regler-sec, arbeiten, laufschrift, wir,
   stimmen, wachstum. Jeder inhaltliche Abschnitt hat jetzt eine
   Zeile am Ende - jede mit einem eigenen Satz, nicht siebenmal
   derselbe Knopf. */
.ziel-zeile{margin:clamp(26px,3.4vw,44px) 0 0;text-align:center}

/* ---------- 128 Die Leiste, die immer da ist ---------- */

/* Sie kommt, sobald der Einstieg vorbei ist, und geht wieder, sobald
   das Formular im Bild steht - dort waere sie doppelt. Das schaltet
   das Skript (Abschnitt 16).

   Am Handy ueber die ganze Breite, darueber nichts anderes: Der
   Hoch-Knopf weicht nach oben aus. Am Rechner nur eine schmale
   Pille unten in der Mitte - dort stoert eine Leiste. */
.ziel-leiste{position:fixed;z-index:37;left:0;right:0;
  bottom:calc(var(--unten) + 10px);
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:0 clamp(12px,3vw,20px);
  pointer-events:none;
  opacity:0;translate:0 14px;
  transition:opacity .45s var(--ease),translate .45s var(--ease)}
.ziel-leiste.da{opacity:1;translate:none}
.ziel-leiste>*{pointer-events:auto}
.ziel-leiste .knopf{flex:1 1 auto;max-width:520px;justify-content:center;
  box-shadow:0 18px 44px -18px rgba(0,0,0,.95)}
.ziel-tel{flex:0 0 auto;width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;color:var(--text);
  background:rgba(8,11,22,.82);
  backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:inset 0 0 0 1px var(--linie-stark),0 18px 44px -20px #000}
.ziel-tel svg{width:22px;height:22px;fill:currentColor}

@media (min-width:761px){
  /* Am Rechner und am iPad nur eine Pille in der Mitte, nicht breit. */
  .ziel-leiste{left:50%;right:auto;translate:-50% 14px;width:auto;
    bottom:calc(var(--unten) + 18px)}
  .ziel-leiste.da{translate:-50% 0}
  .ziel-leiste .knopf{flex:0 0 auto}
}
/* Der Hoch-Knopf weicht der Leiste aus. */
body.ziel-leiste-da .hoch{bottom:calc(var(--unten) + clamp(76px,12vw,96px))}
@media (prefers-reduced-motion:reduce){
  .ziel-leiste{transition:opacity .3s linear;translate:none}
  .ziel-leiste.da{translate:none}
}

/* ---------- 129 Am Handy weniger Text ---------- */

/* Simon: "Bei iPhone finde ich ein bisschen viel Text, also schon
   sehr viel Text, weil es so klein ist."

   Nachgezaehlt: 1908 Woerter auf der Startseite. Was hier ausgeblendet
   wird, sind Saetze, die etwas wiederholen, das an anderer Stelle
   schon steht - kein einziges Versprechen und keine einzige Zahl.
   Am Rechner und am iPad bleibt alles, wie es ist. */
@media (max-width:560px){
  .mehr{display:none}
}