/* ============================================================
   SZ WEBSITES — Design System
   One typeface (Inter), one token set, one cascade.
   ============================================================ */

/* Inter, selbst gehostet.
   Bewusst nicht von fonts.googleapis.com: das strikte CSP dieser Seite
   erlaubt nur eigene Quellen, und ohne Umweg über Google werden auch keine
   Besucher-IPs an Dritte übertragen. Variable Schrift, deckt 400–700 ab.
   Inter steht unter der SIL Open Font License 1.1. */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('assets/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('assets/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* Farbe
     Die Seite ist zu rund 95 Prozent schwarz, weiss und grau. Blau ist
     Akzent, keine Flaechenfarbe: es steht auf dem wichtigsten Knopf, der
     aktiven Navigation, Links, Fokus, einzelnen Zahlen und wenigen Linien.
     Die Graustufen sind bewusst neutral (kein Farbstich), damit das Blau
     der einzige Farbreiz bleibt. */
  /* Nicht reines Weiss. Eine grosse Flaeche #FFFFFF mit fast schwarzem Text
     ergibt 19,5:1 — technisch einwandfrei, aber das flimmert und ermuedet.
     Der Seitengrund ist deshalb ein gebrochenes Weiss, die Karten darauf
     sind das echte Weiss. Dadurch heben sie sich ab, und Weiss wird zur
     Aussage statt zur Grundlast. */
  /* Mittleres Grau statt gebrochenem Weiss. Erst dadurch werden die
     weissen Sterne und die schwarzen Streifen ueberhaupt sichtbar, und die
     weissen Karten bekommen echte Kante. Text haelt hier 11,3:1. */
  --bg-0:#D9DEE6;
  --bg-1:#FFFFFF;
  --bg-2:#EAEDF2;
  --bg-3:#DFE3EA;
  --line:rgba(11,13,16,.10);
  --line-strong:rgba(11,13,16,.18);
  /* Weiches Schwarz statt hartem: 14:1 auf dem Grund reicht vollkommen
     und ist fuer laengeres Lesen angenehmer als 19,5:1. */
  --ink:#21252E;
  --ink-muted:#474D5B;
  /* Die Vorgabe nennt #737780 als Muted. Fuer kleinen Text reicht das nicht
     (4,2:1 auf der helleren Flaeche, gefordert sind 4,5). Fuer Schrift
     deshalb eine Spur heller, der Originalton bleibt fuer Nicht-Text. */
  /* Auf hellem Grund muss der Nebentext dunkler werden: #9499A2 erreichte
     auf Weiss nur 2,4:1. #5A6070 haelt 5,6:1 auch auf der hellsten
     Flaeche. */
  --ink-faint:#4E5563;
  --muted:#8A90A0;
  /* Drei Stufen, weil auf hellem Grund jede Rolle einen anderen Wert
     braucht:
       --accent        Text, Links, Linien, Fokus  — #1D4ED8, 6,1:1
       --accent-strong gefuellte Flaechen, weisse Schrift — #2563EB, 5,17:1
       --accent-hell   reine Zier ohne Text — #3B82F6
     #3B82F6 als Text scheitert auf Weiss mit 3,68:1, #2563EB liegt auf dem
     gebrochenen Weiss mit 4,4-4,7:1 zu knapp an der Grenze. */
  --accent:#1A44C8;
  /* Gefuellte Knopfflaeche. Weiss auf #3B82F6 ergibt nur 3,68:1 und faellt
     damit durch; auf #2563EB sind es 5,17:1. Electric Blue bleibt die
     Identitaetsfarbe fuer Rahmen, Linien, Links und Fokus. */
  --accent-strong:#2563EB;
  --accent-tief:#1D4ED8;
  --accent-hell:#3B82F6;
  --accent-soft:rgba(37,99,235,.08);
  /* Auf dem grauen Grund darf das Muster deutlich staerker stehen als auf
     Weiss — es traegt jetzt einen Teil des Charakters. */
  --pattern-stripe:rgba(11,13,16,.07);
  --accent-ink:#FFFFFF;

  /* Type */
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --fs-display:clamp(2.75rem,3.2vw + 2rem,5.25rem);
  --fs-h1:clamp(2.35rem,1.8vw + 1.9rem,3.75rem);
  --fs-h2:clamp(1.9rem,1.3vw + 1.6rem,2.85rem);
  --fs-h3:1.375rem;
  --fs-lg:1.125rem;
  --fs-body:1rem;
  --fs-sm:.9rem;
  --fs-label:.75rem;

  /* Layout */
  --container:1560px;
  --pad-inline:clamp(20px,5vw,64px);
  --section-pad:clamp(64px,9vw,112px);
  --section-pad-lg:clamp(80px,11vw,148px);

  /* Radius */
  --r-sm:6px;
  --r-md:10px;
  --r-lg:14px;
  --r-karte:18px;
  --karte-grund:#FFFFFF;
  --karte-scheibe:rgba(255,255,255,.97);
  --r-pill:999px;

  /* Shadow */
  --shadow-sm:0 1px 2px rgba(11,13,16,.06);
  --shadow-md:0 14px 34px -16px rgba(11,13,16,.16);

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur-fast:160ms;
  --dur-base:340ms;
  --dur-slow:620ms;

  color-scheme:light;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
/* hidden muss immer gewinnen. Das Attribut wirkt nur ueber die schwache
   Browserregel [hidden]{display:none} — jede eigene display-Angabe auf der
   Klasse (flex, grid …) hebelt es aus, und das Element bleibt sichtbar.
   Genau so stand das Kontomenue im Adminbereich dauerhaft offen, und
   gesperrte Reiter waren fuer Mitarbeiter sichtbar. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;
  /* Heller Grund. Ein einziger, sehr schwacher Blauschimmer oben links —
     mehr braucht es nicht, damit die Flaeche nicht klinisch wirkt. */
  background:
    radial-gradient(ellipse 1200px 820px at 12% -12%, rgba(37,99,235,.055), transparent 64%),
    var(--bg-0);
  background-repeat:no-repeat;
  background-attachment:fixed;
  color:var(--ink);
  font:400 var(--fs-body)/1.6 var(--font-sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}

/* Diagonales Streifenmuster — Vorlage von Uiverse.io (SergeyTwg),
   Farbe auf einen kaum sichtbaren Hauch Akzentgrün gesetzt.
   Liegt als fixierte Ebene hinter dem Inhalt, über dem Body-Verlauf. */
body::before{
  content:"";
  position:fixed;
  top:-50%;
  left:-50%;
  width:200%;
  height:200%;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(
      88.5deg,
      var(--pattern-stripe) 0%,
      var(--pattern-stripe) 40%,
      transparent 40%,
      transparent 100%
    ) 0 0,
    linear-gradient(
      91.5deg,
      transparent 0%,
      transparent 60%,
      var(--pattern-stripe) 60%,
      var(--pattern-stripe) 100%
    ) 0 0;
  background-size:75px 100%;
  transform:rotate(-15deg) skew(15deg,15deg);
  animation:bg-drift 34s linear infinite;
}

/* Zweite Ebene: ein sehr langsam wanderndes gruenes Licht. Liegt ueber
   den Streifen, unter dem Inhalt. Bewegt wird ausschliesslich per
   transform, das kostet beim Scrollen nichts. */
body::after{
  content:"";
  position:fixed;
  top:-25%;
  left:-25%;
  width:150%;
  height:150%;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(ellipse 38% 32% at 24% 28%, rgba(59,130,246,.07), transparent 62%),
    radial-gradient(ellipse 34% 30% at 76% 70%, rgba(11,13,16,.025), transparent 60%);
  animation:bg-glow 46s ease-in-out infinite;
}

/* Ein Versatz von genau einer Musterbreite laesst die Schleife
   unsichtbar umspringen. */
@keyframes bg-drift{
  from{transform:rotate(-15deg) skew(15deg,15deg) translateX(0)}
  to{transform:rotate(-15deg) skew(15deg,15deg) translateX(75px)}
}
@keyframes bg-glow{
  0%{transform:translate3d(-5%,-3%,0) scale(1)}
  50%{transform:translate3d(5%,4%,0) scale(1.1)}
  100%{transform:translate3d(-5%,-3%,0) scale(1)}
}
@media (prefers-reduced-motion:reduce){
  body::before,body::after{animation:none}
}
img,svg,canvas,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}
em{font-style:italic;color:inherit}
::selection{background:var(--accent-soft);color:var(--ink)}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.skip-link{
  position:absolute;left:16px;top:-60px;z-index:100;
  background:var(--accent);color:var(--accent-ink);
  padding:12px 18px;border-radius:var(--r-sm);font-weight:600;font-size:var(--fs-sm);
  transition:top var(--dur-fast) var(--ease);
}
.skip-link:focus{top:16px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* ---------- Type helpers ---------- */
/* Der Vorspann steht ueber fast jedem Abschnitt. In Akzentfarbe waere Blau
   damit ueberall — er bleibt deshalb grau. */
.eyebrow{
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:0 0 16px;
}
.intro{
  max-width:52ch;
  font-size:var(--fs-lg);
  line-height:1.65;
  color:var(--ink-muted);
  margin:20px 0 0;
}

/* ---------- Layout primitives ---------- */
.section{
  max-width:var(--container);
  margin:0 auto;
  padding:var(--section-pad) var(--pad-inline);
}
.section-tight{padding-top:calc(var(--section-pad) * .55);padding-top:0}
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
  margin-bottom:56px;
}
.section-head h2{max-width:16ch}
.section-head .intro{margin-top:0;text-align:right}
.section-head-center{text-align:center;align-items:center;flex-direction:column}
.section-head-center .intro{text-align:center;margin-inline:auto}

h1,h2{
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.05;
  color:var(--ink);
}
h1{font-size:var(--fs-display)}
h2{font-size:var(--fs-h2);font-weight:600}
h3{font-weight:600;font-size:var(--fs-h3);letter-spacing:-.01em;color:var(--ink)}
p{color:var(--ink-muted)}

/* accent word inside headlines */
/* Kursiv statt farbig: eine Ueberschrift in voller Akzentfarbe ist die
   groesste Flaeche der Seite und macht Blau zur Hauptfarbe. Der Wechsel
   von aufrecht zu kursiv setzt denselben Akzent, ohne zu schreien. */
h1 em,h2 em,h3 em{
  font-style:italic;
  font-weight:inherit;
  color:var(--ink);
}

/* ---------- Buttons & links ---------- */
.button{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 22px;
  border-radius:var(--r-pill);
  background:var(--bg-3);
  color:var(--ink);
  border:1px solid var(--line-strong);
  font-weight:600;
  font-size:var(--fs-sm);
  white-space:nowrap;
  transition:transform var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.button[hidden]{display:none}
.button span{
  display:inline-block;
  transition:transform var(--dur-fast) var(--ease);
  font-size:1.05em;
}
.button:hover{border-color:var(--line-strong);background:var(--bg-2)}
.button:hover span{transform:translateX(4px)}
.button:active{transform:translateY(1px)}
.button.primary{
  background:var(--accent-strong);
  color:var(--accent-ink);
  border-color:var(--accent);
}
.button.primary:hover{background:var(--accent-strong);border-color:var(--accent-strong)}

.text-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  font-size:var(--fs-sm);
  color:var(--ink);
  padding-bottom:2px;
  background-image:linear-gradient(var(--ink),var(--ink));
  background-position:0 100%;
  background-repeat:no-repeat;
  background-size:100% 1px;
}
.text-link span{transition:transform var(--dur-fast) var(--ease)}
.text-link:hover span{transform:translate(2px,-2px)}

/* generic inline row-arrow link used in service/route rows */
.row-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  font-size:var(--fs-sm);
  color:var(--ink);
}
.row-link span{transition:transform var(--dur-fast) var(--ease)}
.row-link:hover span{transform:translateX(4px)}

/* ============================================================
   HEADER
   ============================================================ */
/* Kopfzeile schwebt als Kapsel. Oben mit Abstand zum Rand, beim
   Scrollen setzt sich die Flaeche darunter ab. Der Abstand bleibt
   konstant, es verschiebt sich beim Scrollen also nichts. */
.site-header{
  position:sticky;
  top:14px;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  /* Schmaler als der Inhalt, sonst liest sich die Kapsel als Balken statt
     als Pille. */
  max-width:min(1240px, calc(100% - 2 * var(--pad-inline)));
  margin:14px auto 0;
  padding:10px 12px 10px clamp(18px,2vw,24px);
  border-radius:var(--r-pill);
  /* Form und Schatten wie UI-Baustein 13 (Suchfeld als Pille): weiche,
     gefuellte Pille ohne harte Kante. Sie steht durchgehend — auf dem
     grauen Grund braucht die Navigation eine eigene Flaeche. */
  background:var(--bg-1);
  border:1px solid rgba(11,13,16,.06);
  box-shadow:
    0 1px 1px rgba(11,13,16,.03),
    0 20px 40px -26px rgba(11,13,16,.45);
  transition:background var(--dur-base) var(--ease),
             border-color var(--dur-base) var(--ease),
             box-shadow var(--dur-base) var(--ease),
             backdrop-filter var(--dur-base) var(--ease);
}
/* Beim Scrollen aendert sich nur die Tiefe, nicht die Form. Der Text, der
   darunter wegscrollt, darf nicht durchschimmern — deshalb volle Deckung. */
.site-header.is-scrolled{
  border-color:rgba(11,13,16,.10);
  box-shadow:
    0 1px 1px rgba(11,13,16,.04),
    0 26px 50px -28px rgba(11,13,16,.55);
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:-.01em;
  line-height:1;
  white-space:nowrap;
}
.brand span{color:var(--accent)}
.brand small{
  display:block;
  font-size:.55rem;
  font-weight:600;
  letter-spacing:.12em;
  color:var(--ink-faint);
  margin-top:4px;
}
.brand-logo{width:26px;height:29px;object-fit:contain}

nav#site-navigation{display:flex;align-items:center;gap:6px}
.site-header nav>a{
  font-size:var(--fs-sm);
  font-weight:500;
  color:var(--ink-muted);
  transition:color var(--dur-fast) var(--ease);
}
/* Die einfachen Punkte bekommen beim Ueberfahren eine eigene kleine Pille —
   dieselbe Form wie die Kapsel, in der sie sitzen. Der Innenabstand steht
   auch in Ruhe, sonst wuerde die Zeile beim Ueberfahren springen. */
.site-header nav>a:not(.nav-cta):not(.nav-verlosung){
  padding:8px 13px;
  border-radius:var(--r-pill);
  transition:color var(--dur-fast) var(--ease),
             background var(--dur-fast) var(--ease);
}
.site-header nav>a[aria-current="page"]{color:var(--ink);font-weight:600}
@media (hover:hover) and (pointer:fine){
  .site-header nav>a:not(.nav-cta):not(.nav-verlosung):hover{
    color:var(--ink);
    background:var(--accent-soft);
  }
}
.site-header nav>a:not(.nav-cta):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
/* Die Marke hebt sich beim Ueberfahren nur leicht — sie ist kein Knopf. */
.site-header .brand{transition:opacity var(--dur-fast) var(--ease)}
@media (hover:hover) and (pointer:fine){
  .site-header .brand:hover{opacity:.72}
}
.nav-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 18px;
  background:var(--accent-strong);
  color:var(--accent-ink);
  border-radius:var(--r-pill);
  font-weight:600;
  transition:background var(--dur-fast) var(--ease);
}
.nav-cta:hover{background:var(--accent-strong)}
.site-header nav>a.nav-cta{color:var(--accent-ink)}

/* Menue-Button — Vorlage von Uiverse.io (Subu19).
   Die Vorlage schaltet ueber eine Checkbox. Hier bleibt es ein <button>
   mit aria-expanded, damit die Menuelogik und die Tastaturbedienung
   erhalten bleiben; gesteuert wird ueber .site-header.open.
   Strichfarbe statt Schwarz/Crimson: Seitentinte und Akzentgruen. */
.menu-toggle{
  display:none;
  width:40px;height:40px;
  align-items:center;justify-content:center;
  border-radius:var(--r-sm);
  position:relative;
  z-index:60;
}
.menu-toggle svg{width:26px;height:auto;overflow:visible}
.menu-toggle .line{
  transition:stroke-dashoffset .5s var(--ease),transform .5s var(--ease),stroke .3s ease;
  stroke-width:6px;
  stroke:var(--ink);
  stroke-linecap:butt;
}
.menu-toggle .lineTop{
  stroke-dasharray:40 40;
  stroke-dashoffset:25;
  transform-origin:2px 6px;
}
.menu-toggle .lineMid{
  stroke-dasharray:40 40;
}
.menu-toggle .lineBottom{
  stroke-dasharray:40 40;
  stroke-dashoffset:60;
  transform-origin:2px 28px;
}
.site-header.open .menu-toggle .line{stroke:var(--accent)}
.site-header.open .menu-toggle .lineTop{
  stroke-dashoffset:0;
  transform:rotateZ(45deg) translate(3px,-5px);
}
.site-header.open .menu-toggle .lineMid{stroke-dashoffset:40}
.site-header.open .menu-toggle .lineBottom{
  stroke-dashoffset:0;
  transform:rotateZ(-45deg) translate(3px,5px);
}

.nav-contact{display:none}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  max-width:var(--container);
  margin:0 auto;
  padding:clamp(24px,5vw,48px) var(--pad-inline) clamp(32px,4vw,56px);
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  align-items:stretch;
  gap:clamp(32px,5vw,64px);
}
/* Hero mit Preisstapel rechts. Die leere Spalte stammte vom entfernten
   Bild; jetzt steht dort der konkreteste Inhalt, den die Seite hat. */
.hero--prices{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.hero--prices .hero-copy{max-width:660px}

/* Preisstapel im Hero. Aufbau aus der Uiverse-Vorlage (kamehame-ha)
   uebernommen, aber umgestellt: Vollflaechige Farbbloecke konkurrierten
   mit dem gruenen CTA und der Preis stand kleiner als der Paketname.
   Jetzt traegt die Karte den Ton als Waesche und Rand, wie auf der
   Preisseite, und liest sich als Zeile: Name links, Preis rechts. */
.hero-prices{
  display:flex;
  flex-direction:column;
  gap:16px;
  align-self:center;
  justify-self:end;
  width:100%;
  max-width:460px;
}
.hero-prices .card{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:26px 28px;
  border-radius:var(--r-lg);
  background:linear-gradient(150deg,var(--tone-wash),transparent 70%),var(--bg-1);
  border:1px solid var(--tone-edge);
  color:var(--ink);
  transition:transform 320ms var(--ease),opacity 320ms var(--ease),
             border-color 320ms var(--ease),box-shadow 320ms var(--ease);
}
.hero-prices .card-top{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
}
.hero-prices .tip{font-size:1.32rem;font-weight:700;letter-spacing:-.014em}
.hero-prices .second-text{
  font-size:1.26rem;font-weight:700;letter-spacing:-.012em;
  color:var(--tone);white-space:nowrap;
}
.hero-prices .card-note{font-size:.95rem;color:var(--ink-muted)}


.hero-prices .card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

@media (hover:hover) and (pointer:fine){
  .hero-prices .card:hover{
    transform:translateX(6px);
    border-color:var(--tone);
    box-shadow:0 16px 34px -20px rgba(11,13,16,.12);
  }
  /* Die Vorlage zeichnet die uebrigen Karten weich. Hier waere das
     Preisinformation, die man gerade vergleichen will, also nur dimmen. */
  .hero-prices:hover > .card:not(:hover){opacity:.55}
}
@media (prefers-reduced-motion:reduce){
  .hero-prices .card:hover{transform:none}
}
@media (max-width:1000px){
  .hero-prices{max-width:none;justify-self:stretch;margin-top:8px}
}
.hero-copy{
  max-width:620px;
  display:flex;
  flex-direction:column;
}
.hero h1{margin:0}
.hero-line{display:inline-block}
.hero .intro{font-size:var(--fs-lg);max-width:46ch}
.actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:28px}
.split-cta .actions{margin-top:0}
.hero .actions{
  gap:28px;
  margin-top:auto;
  padding-top:34px;
}
.trust{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  color:var(--ink-faint);
  font-size:var(--fs-sm);
  margin-top:32px;
}
.trust span:not(:last-child)::after{content:'·';margin-left:10px;color:var(--line-strong)}

/* Grundform kommt jetzt aus .hero-proof > a weiter unten. */
.review-stars{color:var(--accent);letter-spacing:1px}
.review-stars.is-empty{color:var(--ink-faint)}

.hero-showcase{
  position:relative;
  margin:0;
  justify-self:end;
  width:100%;
  max-width:clamp(540px,46vw,760px);
  max-height:clamp(360px,58vh,580px);
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--line-strong);
  box-shadow:var(--shadow-md);
}
.hero-showcase::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(200deg, rgba(11,13,16,.04) 0%, rgba(255,255,255,.80) 78%, rgba(255,255,255,.90) 100%),
    radial-gradient(ellipse 70% 55% at 12% 8%, rgba(59,130,246,.22), transparent 65%);
  mix-blend-mode:multiply;
  pointer-events:none;
}
.hero-showcase img{
  width:100%;
  height:100%;
  max-height:clamp(360px,58vh,580px);
  object-fit:cover;
  object-position:64% 50%;
  aspect-ratio:1/1;
}

/* ============================================================
   ROW LISTS (services / leistungen-routes / vorteile)
   ============================================================ */
.row-list{border-top:1px solid var(--line)}
.row-item{
  position:relative;
  display:grid;
  grid-template-columns:56px minmax(0,1fr) auto;
  align-items:center;
  gap:32px;
  padding:40px 0 40px 28px;
  border-bottom:1px solid var(--line);
  transition:background var(--dur-base) var(--ease);
}
.row-item::before{
  content:'';
  position:absolute;
  left:0;top:0;bottom:0;
  width:2px;
  background:var(--accent);
  transform:scaleY(0);
  transform-origin:center;
  transition:transform var(--dur-base) var(--ease);
}
.row-item:hover{background:linear-gradient(90deg,var(--bg-1),transparent)}
.row-item:hover::before{transform:scaleY(1)}
.row-item .row-index{
  font-size:var(--fs-sm);
  font-weight:600;
  color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
  transition:color var(--dur-base) var(--ease);
}
.row-item:hover .row-index{color:var(--accent)}
.row-item h3{
  font-size:clamp(1.5rem,1vw + 1.25rem,2.1rem);
  letter-spacing:-.015em;
  transition:transform var(--dur-base) var(--ease);
}
.row-item:hover h3{transform:translateX(6px)}
.row-item p{margin:6px 0 0;max-width:46ch}
.row-item .row-link{justify-self:end}

/* ============================================================
   STUDIO / PERSONAL SECTION
   ============================================================ */
.studio-section{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:clamp(40px,6vw,96px);
}
.studio-intro h2{max-width:12ch}
.studio-copy h3{max-width:20ch;margin-bottom:16px}
.studio-copy p{max-width:52ch;margin-bottom:24px}
.studio-metrics{
  margin-top:48px;
  border-top:1px solid var(--line);
}
.studio-metrics>div{
  padding:26px 0;
  border-bottom:1px solid var(--line);
}
.studio-metrics span{
  display:block;
  font-weight:600;
  font-size:var(--fs-lg);
  color:var(--ink);
  margin-bottom:8px;
}
.studio-metrics p{margin:0;max-width:44ch}

/* ============================================================
   RESULTS (vorher/nachher proof section)
   ============================================================ */
.results-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.results-stat{
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:24px 22px;
}
.results-stat-head{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.results-stat-icon{width:18px;height:18px;color:var(--accent);flex:none}
.results-stat-label{font-size:var(--fs-sm);color:var(--ink-muted);margin:0}
.results-stat-value{
  font-size:clamp(1.9rem,1.4vw + 1.5rem,2.6rem);
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--ink);
  margin:0;
}
.results-stat-delta{font-size:var(--fs-sm);color:var(--accent);margin:8px 0 0}
.results-stat-spark{width:100%;height:28px;display:block;margin-top:16px}
.results-stat-spark polyline{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.results-stat.reveal-item .results-stat-spark polyline{
  stroke-dasharray:170;
  stroke-dashoffset:170;
  transition:stroke-dashoffset 1.1s var(--ease) calc(var(--reveal-delay,0ms) + .3s);
}
.results-stat.reveal-item.is-visible .results-stat-spark polyline{stroke-dashoffset:0}
.results-stat-bar{
  margin-top:22px;
  height:6px;
  border-radius:var(--r-pill);
  background:var(--bg-2);
  position:relative;
}
.results-stat-bar::before{
  content:'';
  position:absolute;
  inset:0;
  width:var(--fill,100%);
  border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--accent-strong),var(--accent));
}
.results-stat.reveal-item .results-stat-bar::before{
  width:0;
  transition:width 1.1s var(--ease) calc(var(--reveal-delay,0ms) + .3s);
}
.results-stat.reveal-item.is-visible .results-stat-bar::before{width:var(--fill,100%)}
.results-stat-bar::after{
  content:'';
  position:absolute;
  top:50%;
  left:var(--fill,100%);
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--ink);
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 3px var(--bg-1);
}
.results-stat.reveal-item .results-stat-bar::after{
  opacity:0;
  transition:opacity .4s var(--ease) calc(var(--reveal-delay,0ms) + 1.15s);
}
.results-stat.reveal-item.is-visible .results-stat-bar::after{opacity:1}

/* ============================================================
   REVIEWS (home overview + full page)
   ============================================================ */
.review-overview-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(32px,5vw,64px);
  align-items:center;
}
.review-summary-card{
  display:flex;
  align-items:center;
  gap:20px;
  padding:24px 26px;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--bg-1);
  transition:border-color var(--dur-fast) var(--ease);
}
.review-summary-card:hover{border-color:var(--line-strong)}
.review-summary-score{display:flex;flex-direction:column;gap:2px}
.review-summary-score strong{font-size:1.5rem;font-weight:700}
.review-summary-score span{color:var(--ink-faint);font-size:var(--fs-sm)}
.review-summary-arrow{margin-left:auto;font-size:1.2rem;color:var(--ink-faint)}
.review-preview-list{display:grid;gap:14px;margin-top:16px}
.review-preview-card,.review-card{
  padding:24px 26px;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--bg-1);
}
.review-card-meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px}
.review-card-meta h3{font-size:var(--fs-body);font-weight:600}
.review-date{color:var(--ink-faint);font-size:var(--fs-sm)}
.review-rating{display:block;color:var(--accent);letter-spacing:2px;margin-bottom:10px}
.review-card p,.review-preview-card p{margin:0;color:var(--ink-muted)}
.review-preview-empty h3{margin-bottom:6px}

.reviews-list-heading{
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:36px;
}
.reviews-public-summary{display:flex;align-items:center;gap:12px;color:var(--ink-muted);font-size:var(--fs-sm)}
.review-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.review-empty{
  grid-column:1/-1;
  padding:48px;
  text-align:center;
  border:1px dashed var(--line-strong);
  border-radius:var(--r-lg);
  color:var(--ink-muted);
}
.review-empty strong{display:block;color:var(--ink);margin-bottom:6px}
.review-load-more{display:flex;justify-content:center;margin-top:32px}

.review-guide,.faq-overview{
  padding:24px 26px;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--bg-1);
  max-width:340px;
  color:var(--ink-muted);
  font-size:var(--fs-sm);
}
.review-guide p:first-child,.faq-overview p:first-child{color:var(--ink);font-weight:600;margin-bottom:6px}
.review-guide p,.faq-overview p{margin:0}

.reviews-hero,.faq-hero{
  display:grid;
  grid-template-columns:1.3fr .8fr;
  gap:clamp(32px,5vw,64px);
  align-items:start;
}

/* review form */
.review-form-section{max-width:var(--container);margin:0 auto;padding:0 var(--pad-inline) var(--section-pad)}
.review-form-inner{
  display:grid;
  grid-template-columns:.9fr 1.3fr;
  gap:clamp(32px,5vw,72px);
  padding-top:var(--section-pad);
  border-top:1px solid var(--line);
}
.review-form-copy h2{max-width:14ch;margin-bottom:16px}
.review-form-note{margin-top:18px;font-size:var(--fs-sm);color:var(--ink-faint)}
.review-form{display:grid;gap:20px}
.rating-fieldset{border:0;padding:0;margin:0}
.rating-fieldset legend{font-weight:600;font-size:var(--fs-sm);margin-bottom:12px;padding:0}
.star-picker{display:flex;gap:8px}
.star-select{
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;
  color:var(--ink-faint);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.star-select.is-selected{color:var(--accent);border-color:var(--accent-strong);background:var(--accent-soft)}
.rating-status{margin:10px 0 0;font-size:var(--fs-sm);color:var(--ink-faint)}
.review-form-success{
  padding:20px 22px;border-radius:var(--r-md);
  background:var(--accent-soft);border:1px solid var(--accent-strong);
}
.review-form-success strong{display:block;color:var(--ink);margin-bottom:4px}
.review-form-success p{margin:0}

/* ============================================================
   CTA
   ============================================================ */
.home-cta{
  border-top:1px solid var(--line);
  display:grid;
  gap:20px;
}
.home-cta>div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;
}
.home-cta h2{max-width:16ch}
.home-cta>p{max-width:56ch;margin:0}

/* ============================================================
   FOOTER
   ============================================================ */
/* Auf dem grauen Grund bekommt der Fuss ein eigenes weisses Band ueber die
   volle Breite. Das trennt ihn sauber vom Inhalt und gibt der Kleinschrift
   dort wieder den Kontrast, den sie auf Weiss hatte. */
footer{
  position:relative;
  max-width:var(--container);
  margin:0 auto;
  padding:var(--section-pad) var(--pad-inline) 48px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:32px;
  flex-wrap:wrap;
}
footer::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0 calc(-50vw + 50%);
  background:var(--bg-1);
  border-top:1px solid var(--line);
}
.footer-meta p{margin:12px 0 0;font-size:var(--fs-sm);color:var(--ink-faint)}
.footer-contact{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  font-size:var(--fs-sm);
  color:var(--ink-faint);
  margin-top:10px;
}
.footer-contact a:hover{color:var(--ink)}
/* Drei beschriftete Spalten statt einer rechtsbuendigen Linkwolke. Die
   Wolke brach je nach Fensterbreite anders um und hatte keine Ordnung. */
.footer-nav{
  display:flex;
  flex-wrap:wrap;
  /* Die Spalten verteilen sich ueber die rechte Haelfte, statt als Block
     am aeussersten Rand zu kleben. */
  flex:1 1 420px;
  max-width:760px;
  margin-left:auto;
  justify-content:space-between;
  gap:32px clamp(30px,4.5vw,64px);
}
.footer-spalte{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:9px;
  min-width:132px;
}
.footer-titel{
  margin:0 0 5px;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.footer-spalte a{
  position:relative;
  font-size:var(--fs-sm);
  color:var(--ink-muted);
  transition:color var(--dur-fast) var(--ease),
             transform var(--dur-fast) var(--ease);
}
/* Die Linie waechst von links mit, statt einfach da zu sein. */
.footer-spalte a::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-3px;
  height:1px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--dur-base) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .footer-spalte a:hover{color:var(--ink);transform:translateX(3px)}
  .footer-spalte a:hover::after{transform:scaleX(1)}
}
.footer-spalte a:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:3px}
.footer-spalte a[aria-current="page"]{color:var(--ink);font-weight:600}

/* Der Markenblock darf mehr Raum haben als die Spalten. */
.footer-meta{max-width:360px}
.footer-meta .brand{font-size:1.15rem}

/* ---------- Instagram-Knopf im Fuss ----------

   Vorlage von Uiverse.io (vinodjangid07). Uebernommen: Glasflaeche mit
   feinem Rand ueber einer Flaeche im Instagram-Verlauf, die beim Ueberfahren
   um 35 Grad aus der Ecke kippt.
   Geaendert: isolation:isolate auf dem Knopf — ohne eigenen Stapelkontext
   rutscht die Verlaufsflaeche mit z-index:-1 hinter den Seitengrund und ist
   unsichtbar. transform-origin steht auf der Ruhelage statt nur im Hover,
   sonst springt der Drehpunkt beim Verlassen. Veraltete -moz-/-webkit-
   Verlaeufe und der IE-Filter sind raus, Fokus zeigt dasselbe wie Hover. */

.footer-sozial{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:18px;
}
.footer-sozial-text{font-size:var(--fs-sm);color:var(--ink-faint)}

.insta-knopf{
  --insta-verlauf:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
  --insta-rand:rgba(156,156,156,.466);
  --insta-glas-aktiv:rgba(156,156,156,.466);

  position:relative;
  isolation:isolate;
  display:flex;
  align-items:center;
  justify-content:center;
  width:45px;
  height:45px;
  border-radius:7px;
  color:var(--ink);
}
.insta-glas{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  border:1px solid var(--insta-rand);
  border-radius:10px;
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  transition:background-color .3s;
}
.insta-glas svg{width:22px;height:22px}
.insta-grund{
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:9px;
  background:var(--insta-verlauf);
  transform-origin:bottom;
  pointer-events:none;
  transition:transform .3s;
}
.insta-knopf:hover .insta-grund,
.insta-knopf:focus-visible .insta-grund{transform:rotate(35deg)}
.insta-knopf:hover .insta-glas,
.insta-knopf:focus-visible .insta-glas{background-color:var(--insta-glas-aktiv)}
.insta-knopf:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

@media (prefers-reduced-motion:reduce){
  .insta-grund,.insta-glas{transition:none}
  .insta-knopf:hover .insta-grund,
  .insta-knopf:focus-visible .insta-grund{transform:none}
}

/* WhatsApp-Button — Vorlage von Uiverse.io (Gaurang7717) */
.whatsapp-float{
  position:fixed;
  right:28px;
  bottom:24px;
  z-index:40;
  width:45px;
  height:45px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  background-color:transparent;
  border-radius:7px;
  cursor:pointer;
  transition:all .3s;
}
.whatsapp-float .svgContainer{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background-color:transparent;
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  letter-spacing:.8px;
  border-radius:10px;
  transition:all .3s;
  border:1px solid rgba(156,156,156,.466);
}
.whatsapp-float .BG{
  position:absolute;
  width:100%;
  height:100%;
  /* Die Markenfarbe erscheint erst beim Beruehren. In Ruhe bleibt der Knopf
     neutral — ein gruenes Kaestchen waere der einzige Farbfleck der Seite. */
  background:var(--bg-3);
  z-index:-1;
  border-radius:9px;
  pointer-events:none;
  transition:all .3s;
}
.whatsapp-float:hover .BG{
  background:#25D366;
  transform:rotate(35deg);
  transform-origin:bottom;
}
.whatsapp-float:hover .svgContainer{
  background-color:rgba(156,156,156,.466);
}
.whatsapp-float svg{width:22px;height:22px;color:currentColor}
.whatsapp-float:hover,
.whatsapp-float:focus-visible{color:#fff}
@media (prefers-reduced-motion:reduce){
  .whatsapp-float:hover .BG{transform:none}
}

/* ============================================================
   CTA "Kostenlos anfragen" — Vorlage von Uiverse.io (cssbuttons-io)
   Farben auf die Seitenpalette gemappt: Kreis in Akzentgrün,
   Pfeil und Hover-Text in Akzent-Tinte, Grundtext in Seitentinte.
   Auf .learn-more begrenzt, damit die Vorlage nicht alle Buttons
   der Seite zurücksetzt (Menü, Formulare, Sternewahl).
   ============================================================ */
.learn-more{
  position:relative;
  display:inline-block;
  cursor:pointer;
  border:0;
  vertical-align:middle;
  text-decoration:none;
  background:transparent;
  padding:0;
  font-family:inherit;
  /* Feste 18rem sind auf sehr schmalen Geraeten (320px) breiter als der
     Inhaltsbereich und schoben die ganze Seite waagerecht. */
  width:min(18rem,100%);
  height:auto;
}
.learn-more .circle{
  transition:width .45s cubic-bezier(.65,0,.076,1);
  position:relative;
  display:block;
  margin:0;
  width:3rem;
  height:3rem;
  background:var(--accent-strong);
  border-radius:1.625rem;
}
.learn-more .circle .icon{
  transition:transform .45s cubic-bezier(.65,0,.076,1),background .45s cubic-bezier(.65,0,.076,1);
  position:absolute;
  top:0;
  bottom:0;
  margin:auto;
  background:var(--accent-ink);
}
.learn-more .circle .icon.arrow{
  left:.625rem;
  width:1.125rem;
  height:.125rem;
  background:none;
}
.learn-more .circle .icon.arrow::before{
  position:absolute;
  content:"";
  top:-.29rem;
  right:.0625rem;
  width:.625rem;
  height:.625rem;
  border-top:.125rem solid var(--accent-ink);
  border-right:.125rem solid var(--accent-ink);
  transform:rotate(45deg);
}
.learn-more .button-text{
  transition:color .45s cubic-bezier(.65,0,.076,1);
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  padding:.75rem 0;
  margin:0 0 0 1.6rem;
  color:var(--ink);
  font-weight:700;
  font-size:var(--fs-sm);
  letter-spacing:.04em;
  line-height:1.6;
  text-align:center;
  text-transform:uppercase;
  white-space:nowrap;
}
.learn-more:hover .circle{width:100%}
.learn-more:hover .circle .icon.arrow{
  background:var(--accent-ink);
  transform:translate(1rem,0);
}
.learn-more:hover .button-text{color:var(--accent-ink)}
.learn-more:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:1.625rem}
@media (prefers-reduced-motion:reduce){
  .learn-more:hover .circle .icon.arrow{transform:none}
}

/* ============================================================
   PROCESS / ROUTE CARDS (leistungen overview + ablauf shared shell)
   ============================================================ */
.process{
  max-width:var(--container);
  margin:0 auto;
  padding:var(--section-pad) var(--pad-inline);
}
.process-heading{max-width:640px;margin-bottom:56px}
.process-heading h1,.process-heading h2{max-width:14ch}
.process-heading>p:not(.eyebrow){max-width:50ch}
.process-cta{margin-top:24px}

/* leistungen: 4 routes as rows (not cards) */
.process-route.row-list{margin-top:0}
.process-route .route-card{
  display:grid;
  grid-template-columns:64px minmax(160px,.6fr) minmax(0,1.4fr) auto;
  align-items:center;
  gap:28px;
  padding:30px 0;
  border-bottom:1px solid var(--line);
}
.process-route .route-card:first-child{border-top:1px solid var(--line)}
.process-route .route-card b{
  font-weight:600;
  color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
}
.process-route .route-card small{
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:.08em;
  color:var(--ink-faint);
  text-transform:uppercase;
}
.process-route .route-card h2{font-size:var(--fs-h3);font-weight:600;letter-spacing:-.01em;margin:0}
.process-route .route-card p{margin:0;max-width:44ch}
.process-route .route-card i{
  font-style:normal;
  color:var(--ink-faint);
  font-size:1.2rem;
  justify-self:end;
  transition:transform var(--dur-base) var(--ease),color var(--dur-fast) var(--ease);
}
.process-route .route-card:hover i{transform:translate(3px,-3px);color:var(--accent)}
.process-route .route-card:hover h2{color:var(--accent)}

/* ablauf: vertical timeline */
.ablauf-timeline{position:relative}
.ablauf-timeline .route-card{
  position:relative;
  display:grid;
  grid-template-columns:88px 1fr;
  gap:28px;
  padding:0 0 56px 0;
  border:0;
}
.ablauf-timeline .route-card:last-child{padding-bottom:0}
.ablauf-timeline .step-marker{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}
.ablauf-timeline .step-marker::before{
  content:'';
  position:absolute;
  top:40px;bottom:-56px;
  width:1px;
  background:var(--line);
}
.ablauf-timeline .route-card:last-child .step-marker::before{display:none}
.ablauf-timeline .step-marker::after{
  content:'';
  position:absolute;
  top:40px;bottom:-56px;
  width:1px;
  background:var(--accent);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .7s var(--ease);
}
.ablauf-timeline .route-card.is-visible .step-marker::after{transform:scaleY(1)}
.ablauf-timeline .step-marker b{
  width:40px;height:40px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-strong);
  background:var(--bg-1);
  font-weight:600;
  font-size:var(--fs-sm);
  color:var(--ink-muted);
  font-variant-numeric:tabular-nums;
  transition:border-color var(--dur-base) var(--ease),color var(--dur-base) var(--ease),background var(--dur-base) var(--ease);
}
.ablauf-timeline .route-card.is-visible .step-marker b{
  border-color:var(--accent);
  color:var(--accent-ink);
  background:var(--accent-strong);
}
.ablauf-timeline .route-content small{
  display:block;
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:.08em;
  color:var(--ink-faint);
  text-transform:uppercase;
  margin-bottom:10px;
}
.ablauf-timeline .route-content h2{font-size:var(--fs-h3);font-weight:600;margin-bottom:10px;max-width:26ch}
.ablauf-timeline .route-content p{margin:0;max-width:52ch}
.ablauf-timeline .route-card i{display:none}

/* ============================================================
   LEISTUNGEN — hero row, included section
   ============================================================ */
.services-page-intro{margin-top:8px}

/* compact top intro used on inner pages (leistungen/faq/bewertungen/kontakt/preise) */
.page-hero{
  padding-top:clamp(28px,4vw,48px);
  padding-bottom:clamp(36px,5vw,56px);
}
.page-hero h1{max-width:18ch}

/* ============================================================
   PRICING
   ============================================================ */
.prices-page>.eyebrow,
.prices-page h1{max-width:20ch}
.prices-page .intro{margin-bottom:0}

/* Zweispaltiger Seitenkopf: die Ueberschrift links, die Rabattkachel rechts
   oben. Rechts war bisher nur Leerraum, und oben faellt die Kachel eher ins
   Auge als unter dem Fliesstext. */
@media (min-width:1000px){
  .page-hero.prices-page{
    display:grid;
    /* feste Breite fuer die Kachel — bei 'auto' zieht sie sich auf die
       ungebrochene Zeilenlaenge ihres Textes und quetscht die Ueberschrift */
    grid-template-columns:minmax(0,1fr) clamp(340px,26vw,420px);
    column-gap:clamp(32px,5vw,72px);
    align-items:start;
  }
  .prices-page>.eyebrow{grid-area:1/1}
  .prices-page>h1{grid-area:2/1}
  .prices-page>.intro{grid-area:3/1}
  .prices-page>.price-promise{
    grid-area:1/2/4/3;
    justify-self:end;
    margin-top:6px;
  }
}
/* ---------- Neukundenkachel ----------

   Die Zahl steht als raeumlicher Schriftzug neben dem Satz. Vorlage von
   Uiverse.io (Thomas-Cabrit): dreimal dieselbe Zahl, in der Tiefe gestaffelt
   und mit einem Verlauf in die Schrift geschnitten, dazu ein langsames
   Wiegen. Uebernommen ist dieser Aufbau, geaendert sind die Farben — statt
   Blau der Akzentton der Seite. */

.price-promise{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  margin-top:40px;
  padding:24px 30px 28px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  border:1px solid rgba(59,130,246,.30);
  border-radius:var(--r-karte);
  background:
    linear-gradient(90deg,transparent,rgba(11,13,16,.16),transparent) top center/60% 1px no-repeat,
    linear-gradient(122deg, rgba(59,130,246,.10) 0%, transparent 54%),
    var(--karte-grund);
  box-shadow:0 26px 64px rgba(11,13,16,.09);
  width:min(100%,420px);
}
/* weicher Schein, damit die Kachel aus der Flaeche heraustritt */
.price-promise::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:-40px;top:50%;
  width:280px;height:280px;
  transform:translateY(-50%);
  border-radius:50%;
  background:var(--accent);
  opacity:.14;
  filter:blur(60px);
  pointer-events:none;
}
.price-promise .eyebrow{margin-bottom:10px}
.price-promise p{margin:0;color:var(--ink)}
.price-promise-text{min-width:0}
.price-promise-text strong{color:var(--ink)}

.rabatt-holo{
  flex:none;
  width:100%;
  height:142px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding-left:24px;
  perspective:900px;
}
.rabatt-holo-buehne{
  position:relative;
  width:142px;
  height:142px;
  display:flex;
  align-items:center;
  justify-content:center;
  transform-style:preserve-3d;
  pointer-events:none;
  animation:rabatt-wiegen 6.2s ease-in-out infinite;
}
@keyframes rabatt-wiegen{
  0%  {transform:rotateX(16deg) rotateY(-18deg)}
  50% {transform:rotateX(18deg) rotateY(18deg)}
  100%{transform:rotateX(16deg) rotateY(-18deg)}
}

.rabatt-holo-lage{
  position:absolute;
  font-weight:900;
  font-size:88px;
  letter-spacing:-5px;
  line-height:1;
  transform-style:preserve-3d;
  -webkit-text-stroke:1px rgba(96,165,250,.7);
  background:linear-gradient(90deg,
    rgba(59,130,246,.18) 0%,
    rgba(59,130,246,.95) 35%,
    rgba(147,197,253,.85) 60%,
    rgba(59,130,246,.22) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 10px 22px rgba(11,13,16,.09));
  opacity:.95;
}
.rabatt-holo-lage--hinten{
  opacity:.18;
  filter:blur(1px);
  transform:translateZ(-70px);
  -webkit-text-stroke:1px rgba(96,165,250,.45);
}
.rabatt-holo-lage--mitte{
  opacity:.42;
  filter:blur(.4px);
  transform:translateZ(-34px);
  -webkit-text-stroke:1px rgba(96,165,250,.55);
}
.rabatt-holo-lage--vorn{
  opacity:.98;
  transform:translateZ(0);
  -webkit-text-stroke:1px rgba(96,165,250,.78);
}
/* Schein und Glaskante hinter der Zahl, wie in der Vorlage */
.rabatt-holo-buehne::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:26px;
  background:radial-gradient(circle at 40% 35%,
    rgba(59,130,246,.16), rgba(0,0,0,0) 62%);
  filter:blur(8px);
  opacity:.9;
  transform:translateZ(-80px);
}
.rabatt-holo-buehne::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:26px;
  border:1px solid rgba(11,13,16,.10);
  background:linear-gradient(120deg,
    rgba(11,13,16,.035), rgba(11,13,16,.01) 45%, rgba(0,0,0,0));
  opacity:.55;
  transform:translateZ(-45px);
}

@media (max-width:640px){
  .price-promise{padding:22px 24px 26px}
  .rabatt-holo{height:128px;padding-left:20px}
  .rabatt-holo-buehne{width:128px;height:128px}
  .rabatt-holo-lage{font-size:80px;letter-spacing:-4px}
}

@media (prefers-reduced-motion:reduce){
  .rabatt-holo-buehne{animation:none}
}

.price-packages{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:40px;
  border-top:0;
}
/* ---------- Preiskarten ----------

   Vorlage von Uiverse.io (dylanharriscameron). Uebernommen ist der Aufbau:
   ein weich verwaschener Farbfleck wandert im Viereck hinter einer
   Glasscheibe, die etwas kleiner ist als die Karte. Durch den schmalen
   Spalt ringsum wird der Fleck als wanderndes Licht am Rand sichtbar.

   Geaendert: der weisse, neumorphe Grund der Vorlage passt nicht zur
   dunklen Seite. Statt dessen eine dunkle Scheibe, und jede Karte bekommt
   ihren eigenen Farbton aus der Seitenpalette. Die Scheibe bleibt bewusst
   fast undurchsichtig — der Fleck darf den Rand faerben, aber nicht den
   Textkontrast im Takt der Bewegung verschieben. */

.price-packages>article{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  padding:34px 0 0;
  border:1px solid var(--card-edge);
  border-radius:var(--r-karte);
  background:var(--karte-grund);
  box-shadow:
    0 24px 60px rgba(11,13,16,.09),
    0 2px 6px rgba(11,13,16,.06);
  transition:transform .45s cubic-bezier(.2,.8,.25,1),
             box-shadow .45s ease,
             border-color .45s ease;
}

/* Der wandernde Farbfleck. */
.price-packages>article::before{
  content:"";
  position:absolute;
  z-index:0;
  top:50%;left:50%;
  width:62%;
  aspect-ratio:1;
  border-radius:50%;
  background:var(--card-tone);
  opacity:.30;
  filter:blur(42px);
  pointer-events:none;
  animation:fleck-wandern 14s infinite ease;
}

/* Die Glasscheibe darueber. Der Spalt von 6px laesst den Fleck als
   Lichtsaum stehen. */
.price-packages>article::after{
  content:"";
  position:absolute;
  inset:6px;
  z-index:1;
  border-radius:calc(var(--r-karte) - 6px);
  background:
    linear-gradient(90deg,transparent,rgba(11,13,16,.10),transparent) top center/70% 1px no-repeat,
    linear-gradient(168deg,var(--card-wash) 0%,transparent 52%),
    var(--karte-scheibe);
  -webkit-backdrop-filter:blur(34px);
  backdrop-filter:blur(34px);
  box-shadow:inset 0 0 0 1px rgba(11,13,16,.035);
  pointer-events:none;
}
.price-packages>article>*{position:relative;z-index:2}

@keyframes fleck-wandern{
  0%  {transform:translate(-100%,-100%) translate3d(0,0,0)}
  25% {transform:translate(-100%,-100%) translate3d(100%,0,0)}
  50% {transform:translate(-100%,-100%) translate3d(100%,100%,0)}
  75% {transform:translate(-100%,-100%) translate3d(0,100%,0)}
  100%{transform:translate(-100%,-100%) translate3d(0,0,0)}
}

@media (hover:hover) and (pointer:fine){
  .price-packages>article:hover{
    transform:translateY(-6px);
    border-color:var(--card-tone);
    box-shadow:
      0 34px 80px rgba(11,13,16,.10),
      0 0 0 1px var(--card-edge);
  }
  .price-packages>article:hover::before{
    opacity:.8;
    animation-duration:7s;
  }
}
@media (prefers-reduced-motion:reduce){
  .price-packages>article{transition:none}
  .price-packages>article:hover{transform:none}
  .price-packages>article::before{
    animation:none;
    transform:translate(-50%,-50%);
    opacity:.5;
  }
}

/* Drei Toene: Gruen, Gruen nach Blau, Gruen nach Bronze — dieselbe Triade
   wie im uebrigen Seitenbild. */
/* Frueher trug jede Karte einen eigenen Farbton (gruen, blau, bronze). Drei
   Farben nebeneinander nehmen der Seite die Ruhe und lassen keine Karte
   hervortreten. Jetzt sind alle drei neutral; Farbe bekommt nur die, auf die
   es ankommt — siehe .is-empfohlen weiter unten. Der wandernde Fleck bleibt,
   aber als helles Grau statt als Farbfleck. */
.price-packages>article{
  --card-tone:#4E5563;
  --card-wash:rgba(11,13,16,.03);
  --card-edge:rgba(11,13,16,.12);
}
.price-packages>article:nth-child(2)::before{animation-delay:-4.6s}
.price-packages>article:nth-child(3)::before{animation-delay:-9.2s}

/* Die hervorgehobene Karte traegt ein Faehnchen und einen kraeftigeren Rand. */
/* Die empfohlene Karte ist die einzige mit Farbe. Das ist der ganze Zweck
   des Akzents: eine Entscheidung hervorheben, nicht drei gleichzeitig. */
.price-packages>article.is-empfohlen{
  --card-tone:var(--accent);
  --card-wash:rgba(59,130,246,.10);
  --card-edge:rgba(59,130,246,.34);
}
.price-packages>article.is-empfohlen::before{opacity:.42}
.price-packages>article.is-empfohlen>.package-kicker{padding-right:140px}
.price-packages>article>*{padding-left:34px;padding-right:34px}
.price-packages .price-includes,
.price-packages .price-display{
  margin-left:34px;
  margin-right:34px;
  padding-left:0;
  padding-right:0;
}
.price-packages>article>.package-badge{
  position:absolute;
  top:22px;right:22px;
  z-index:3;
  margin:0;
  padding:7px 15px;
  border-radius:999px;
  box-shadow:0 6px 20px -6px rgba(37,99,235,.5);
  background:var(--accent-strong);
  color:var(--accent-ink);
  font-size:var(--fs-label);
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.price-packages>article .package-kicker{color:var(--card-tone)}
.package-kicker{
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-muted);
  margin:0;
}
.price-packages h2{
  font-size:1.85rem;
  letter-spacing:-.02em;
  margin:12px 0 0;
}
.price-packages>article>p:not(.package-kicker):not(.price-scope):not(.package-badge){
  margin:10px 0 0;
  max-width:40ch;
  color:var(--ink-muted);
  font-size:var(--fs-sm);
}

.price-includes{
  margin:24px 0 0;
  display:grid;
  gap:12px;
  border-top:1px solid var(--card-edge,var(--line));
  padding-top:22px;
}
.price-includes li{
  position:relative;
  padding-left:32px;
  font-size:var(--fs-sm);
  color:var(--ink-muted);
  line-height:1.5;
}
/* Haken aus zwei Rahmenkanten — kein Bild noetig. */
.price-includes li::before{
  content:'';
  position:absolute;left:0;top:.1em;
  width:20px;height:20px;
  border-radius:50%;
  background:color-mix(in srgb, var(--card-tone,var(--accent)) 18%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--card-tone,var(--accent)) 42%, transparent);
}
.price-includes li::after{
  content:'';
  position:absolute;left:6.5px;top:.42em;
  width:5px;height:9px;
  border:solid var(--card-tone,var(--accent));
  border-width:0 2px 2px 0;
  transform:rotate(42deg);
}

/* Preisblock: der Neukundenpreis ist die eigentliche Aussage und steht
   deshalb gross, der regulaere Preis nennt nur den Bezug. */
.price-display{
  margin-top:auto;
  padding-top:24px;
  border-top:1px solid var(--card-edge,var(--line));
  display:grid;
  gap:4px;
}
.price-display p{margin:0}
.price-display .standard-price{
  display:flex;align-items:baseline;gap:8px;
  font-size:var(--fs-sm);
  color:var(--ink-faint);
}
.price-display .standard-price strong{
  font-size:var(--fs-sm);
  font-weight:600;
  color:var(--ink-faint);
}
.price-display .new-customer-price{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-top:6px;
  color:inherit;
}
.price-display .new-customer-price span{
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--card-tone,var(--accent));
}
.price-display .new-customer-price strong{
  font-size:2.1rem;
  line-height:1.1;
  letter-spacing:-.03em;
  font-weight:700;
  color:var(--ink);
}
.price-scope{margin:10px 0 0;font-size:.8rem;color:var(--ink-faint)}

.price-packages>article>a{
  margin:22px 34px 34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight:600;
  font-size:var(--fs-sm);
}

.price-note{
  margin:28px 0 0;
  font-size:.8rem;
  color:var(--ink-faint);
  max-width:70ch;
}

.payment-options,.add-on-services{border-top:1px solid var(--line)}
.payment-intro{max-width:640px;margin-bottom:40px}
.add-on-intro{margin-bottom:40px}
.payment-methods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.payment-method{
  display:flex;align-items:center;gap:18px;
  padding:22px 24px;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
}
/* Beide Zahlungswege bekommen dieselbe Kachel, sonst steht das helle
   PayPal-Feld allein neben einem freistehenden Symbol und kippt die Reihe. */
.payment-logo{
  width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  border-radius:var(--r-sm);
}
.payment-logo img{max-width:100%;max-height:100%}

.payment-logo.bank-logo{background:var(--bg-2);border:1px solid var(--line)}
.payment-logo.bank-logo svg{width:26px;height:26px;color:var(--accent)}

/* Das PayPal-Logo ist dunkelblau und wuerde auf dem dunklen Grund absaufen.
   Ein heller Untergrund ist zugleich die Variante, die PayPal selbst fuer
   dunkle Hintergruende vorsieht. Gebrochenes Weiss statt reinem Weiss, damit
   die Kachel nicht aus der Seite herausleuchtet. */
.payment-logo.paypal-logo{
  background:#f4f6f4;
  padding:7px 6px;
}
.payment-method h3{margin-bottom:4px}
.payment-method p{margin:0}

.add-on-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}

/* Zusatzleistungen als Glaskarten — Vorlage von Uiverse.io.
   Weisswerte fuer den dunklen Grund heruntergezogen, die Lichtkanten
   liegen als Hintergrundebenen mit im Element. */
.add-on-card{
  position:relative;
  overflow:hidden;
  padding:26px;
  border-radius:var(--r-lg);
  background:
    linear-gradient(90deg,transparent,rgba(11,13,16,.10),transparent) top center/100% 1px no-repeat,
    var(--bg-1);
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
  border:1px solid rgba(11,13,16,.17);
  box-shadow:
    0 8px 26px -14px rgba(11,13,16,.10),
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -1px 0 rgba(11,13,16,.03),
    inset 0 0 6px 3px rgba(11,13,16,.035);
  transition:border-color var(--dur-base) var(--ease),transform var(--dur-base) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .add-on-card:hover{border-color:rgba(59,130,246,.38);transform:translateY(-3px)}
}
.add-on-head{display:flex;align-items:flex-start;gap:16px}
.add-on-icon{
  flex:0 0 auto;
  width:44px;height:44px;
  display:grid;place-items:center;
  border-radius:50%;
  border:1px solid rgba(11,13,16,.14);
  background:rgba(11,13,16,.035);
  color:var(--accent);
}
.add-on-icon svg{width:20px;height:20px}
.add-on-title{min-width:0}
.add-on-card h3{margin:8px 0 6px;font-size:1.18rem}
.add-on-card strong{display:block;color:var(--ink);font-weight:700}
.add-on-card>p{
  margin:20px 0 0;
  padding-top:18px;
  border-top:1px solid rgba(11,13,16,.12);
  color:var(--ink-muted);
  font-size:var(--fs-sm);
}
.add-on-list{display:grid;gap:9px;margin:16px 0 0;padding:0;list-style:none}
.add-on-list li{
  display:grid;grid-template-columns:16px 1fr;gap:10px;
  align-items:start;
  font-size:var(--fs-sm);
  color:var(--ink-muted);
}
.add-on-list li::before{
  content:"";
  width:11px;height:6px;margin-top:.42em;
  border-left:1.8px solid var(--accent);
  border-bottom:1.8px solid var(--accent);
  transform:rotate(-45deg);
}

/* Kopf zweispaltig: Ueberschrift links, Erklaerung rechts */
.add-on-intro{display:grid;gap:18px}
@media (min-width:860px){
  .add-on-intro{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:0 48px;
    align-items:start;
    max-width:none;
  }
  .add-on-intro>.intro{
    padding-left:48px;
    border-left:1px solid var(--line);
    margin:0;
    align-self:center;
  }
}
.eyebrow--dash{display:flex;align-items:center;gap:12px}
.eyebrow--dash::before{
  content:"";
  width:26px;height:1px;
  background:var(--accent);
  flex:0 0 auto;
}


/* ============================================================
   FAQ
   ============================================================ */
.faq-list-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:32px}
.faq-list-heading>p{max-width:36ch;margin:0;color:var(--ink-muted)}
.faq-grid{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:24px 0;
  cursor:pointer;
  font-weight:600;
  font-size:var(--fs-lg);
  color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:'+';
  flex-shrink:0;
  width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;
  font-weight:400;
  color:var(--ink-faint);
  border:1px solid var(--line-strong);
  border-radius:50%;
  transition:transform var(--dur-base) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.faq-item[open] summary::after{transform:rotate(135deg);color:var(--accent);border-color:var(--accent-strong)}
.faq-item summary:hover::after{border-color:var(--accent-strong);color:var(--accent)}
.faq-answer{
  overflow:hidden;
  padding-bottom:24px;
  margin-top:-8px;
  transition:height var(--dur-base) var(--ease);
}
.faq-answer p{margin:0;max-width:64ch}
.faq-answer a{text-decoration:underline;text-underline-offset:2px;color:var(--ink)}

.split-cta{
  display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;
  border-top:1px solid var(--line);
}
.split-cta h2{max-width:14ch}
.split-cta .intro{margin-top:8px}

/* ============================================================
   CONTACT
   ============================================================ */
.contact.contact-page{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:clamp(40px,6vw,88px);
  align-items:start;
  padding-top:clamp(48px,7vw,88px);
}
.contact-page h1{max-width:14ch}
.direct-contact{margin-top:32px}
.whatsapp svg{width:18px;height:18px;flex:0 0 auto;color:var(--accent)}
.whatsapp{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:13px 20px;
  border:1px solid var(--line-strong);
  border-radius:var(--r-pill);
  font-weight:600;
  font-size:var(--fs-sm);
  transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
}
.whatsapp span{color:var(--accent)}
.whatsapp:hover{background:var(--bg-2);border-color:var(--accent)}

#contact-form{display:grid;gap:18px}
.form-honeypot{position:absolute;width:1px;height:1px;overflow:hidden;left:-9999px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
#contact-form label,
#review-form label{
  display:block;
  font-size:var(--fs-sm);
  font-weight:600;
  color:var(--ink-muted);
}
#contact-form label > input,#contact-form label > select,#contact-form label > textarea,
#review-form label > input,#review-form label > select,#review-form label > textarea{
  display:block;
  width:100%;
  margin-top:8px;
}
.optional{font-weight:400;color:var(--ink-faint)}
#contact-form input,#contact-form select,#contact-form textarea,
#review-form input,#review-form select,#review-form textarea{
  padding:13px 15px;
  background:var(--bg-1);
  border:1px solid var(--line-strong);
  border-radius:var(--r-md);
  color:var(--ink);
  font-size:var(--fs-body);
  font-weight:400;
  transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
}
#contact-form input::placeholder,#contact-form textarea::placeholder,
#review-form input::placeholder,#review-form textarea::placeholder{color:var(--ink-faint)}
#contact-form input:focus,#contact-form select:focus,#contact-form textarea:focus,
#review-form input:focus,#review-form select:focus,#review-form textarea:focus{
  border-color:var(--accent);
  background:var(--bg-2);
  outline:none;
}
/* Bei Mausklick genuegt der gefaerbte Rand. Wer sich mit der Tastatur durch das
   Formular bewegt, braucht dagegen eine deutlich sichtbare Markierung — sonst
   ist nicht erkennbar, in welchem Feld man gerade steht (WCAG 2.4.7).
   Das obige outline:none stammt aus einer ID-Regel und schlaegt die globale
   :focus-visible-Regel, deshalb hier noch einmal ausdruecklich. */
#contact-form input:focus-visible,#contact-form select:focus-visible,#contact-form textarea:focus-visible,
#review-form input:focus-visible,#review-form select:focus-visible,#review-form textarea:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
#contact-form select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 8l5 5 5-5' stroke='%23A1A5AE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.form-help{display:block;margin-top:6px;font-weight:400;color:var(--ink-faint);font-size:.78rem}
#contact-form textarea,#review-form textarea{resize:vertical;min-height:130px}
.consent{display:flex;align-items:flex-start;gap:10px;font-size:.82rem;color:var(--ink-faint)}
.consent input{margin-top:3px;accent-color:var(--accent)}
#contact-form .consent label,
#review-form .consent label,
.consent label{display:block;font-weight:400;font-size:.82rem;color:var(--ink-muted)}
.consent a{text-decoration:underline;color:var(--accent)}
.contact-actions{margin-top:6px}
.form-note{min-height:1.2em;font-size:var(--fs-sm);margin:0}
.form-note[data-state="error"]{color:#B3261E}
.form-note[data-state="success"]{color:var(--accent)}
.form-note[data-state="loading"]{color:var(--ink-faint)}
.no-script-note{color:var(--ink-muted)}

body.modal-open{overflow:hidden}
.modal-overlay{
  position:fixed;inset:0;z-index:80;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:rgba(8,9,11,.82);
  backdrop-filter:blur(6px);
}
.modal-overlay[hidden]{display:none}
.modal-card{
  position:relative;
  max-width:520px;width:100%;
  max-height:calc(100dvh - 48px);
  overflow-y:auto;
  padding:44px 40px;
  background:var(--bg-1);
  border:1px solid var(--line-strong);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);
}
.modal-close{
  position:absolute;top:18px;right:18px;
  width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;color:var(--ink-faint);
  border-radius:50%;
}
.modal-close:hover{color:var(--ink);background:var(--bg-2)}
.success-check{
  width:52px;height:52px;
  border-radius:50%;
  background:var(--accent-soft);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;
}
.success-check svg{width:24px;height:24px;fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.success-lead{color:var(--ink-muted);margin:14px 0 0}
.success-detail{
  margin-top:24px;padding:18px 20px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-md);
}
.success-detail strong{display:block;color:var(--ink);margin-bottom:6px}
.success-detail p{margin:0 0 8px}
.success-detail small{color:var(--ink-faint);font-size:.78rem}
.success-actions{margin-top:26px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.success-secondary{font-size:var(--fs-sm);font-weight:600;color:var(--ink-muted)}
.success-secondary:hover{color:var(--ink)}

/* ============================================================
   LEGAL
   ============================================================ */
.legal{
  max-width:760px;
  margin:0 auto;
  padding:var(--section-pad) var(--pad-inline) calc(var(--section-pad) * 1.2);
}
.legal h1{margin-bottom:32px}
.legal h2{font-size:1.25rem;margin:40px 0 12px}
.legal p,.legal li{color:var(--ink-muted);line-height:1.7}
.legal ul{margin:12px 0;display:grid;gap:8px}
.legal li{padding-left:18px;position:relative}
.legal li::before{content:'';position:absolute;left:0;top:.6em;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.legal a{text-decoration:underline;text-underline-offset:2px;color:var(--ink)}
.legal .notice{
  padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--bg-1);color:var(--ink-muted);margin-bottom:8px;
}
.legal .notice strong{color:var(--ink)}
.legal small{color:var(--ink-faint)}
/* Auch auf den Rechtsseiten bleibt die Kapsel, nur schmaler — sie sitzt
   ueber derselben Spalte wie der Text. */
body:has(.legal) .site-header{max-width:760px}
body:has(.legal) footer{max-width:760px}

/* ============================================================
   MOTION / REVEAL
   ============================================================ */
.reveal-item{
  opacity:0;
  transform:translateY(22px);
  transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease);
  transition-delay:var(--reveal-delay,0ms);
}
.reveal-item.is-visible{opacity:1;transform:translateY(0)}
.motion-reduced .reveal-item{opacity:1;transform:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* ---------- Geraetemockup fuer Referenzen ----------

   Der Rahmen wird gezeichnet, nicht fotografiert: Browserfenster und Telefon
   sind CSS, nur die beiden Bildschirminhalte sind Bilder. Das bleibt auf jedem
   Display scharf, wiegt einen Bruchteil einer fertigen Montage und laesst sich
   fuer das naechste Projekt wiederverwenden, ohne neu zu rendern.

   Alle Innenmasse in cqw (Prozent der Mockup-Breite), damit die Proportionen
   von der schmalen Karte bis zur vollen Seitenbreite exakt gleich bleiben. */

.device-showcase{
  container-type:inline-size;
  position:relative;
  aspect-ratio:16 / 11;
  width:100%;
}

/* --- Browserfenster --- */
/* Hoehe kommt aus dem Mockup, nicht aus dem Bild: 86% Breite im Verhaeltnis
   16:10 plus Leiste ergibt 83.4% der Mockuphoehe. So bleibt der Rahmen exakt
   an seinem Platz, auch wenn das Bild langsam laedt oder ganz ausfaellt. */
.device-browser{
  position:absolute;
  inset:0 auto auto 0;
  width:86%;
  height:83.4%;
  border-radius:1.6cqw;
  overflow:hidden;
  background:var(--bg-3);
  border:0.28cqw solid var(--line-strong);
  box-shadow:0 4cqw 8cqw -3cqw rgba(11,13,16,.10);
}

.device-bar{
  display:flex;
  align-items:center;
  gap:1.1cqw;
  height:3.6cqw;
  padding:0 1.4cqw;
  background:var(--bg-2);
  border-bottom:0.2cqw solid var(--line);
}

.device-dots{display:flex;gap:0.75cqw;flex:none}
.device-dots i{
  width:0.95cqw;height:0.95cqw;
  border-radius:50%;
  background:var(--line-strong);
}

/* Neutrale Adressleiste ohne Text: das Mockup soll keine Domain behaupten. */
.device-bar span:last-child{
  flex:1;
  height:1.8cqw;
  border-radius:var(--r-pill);
  background:var(--bg-1);
}

.device-browser img{
  display:block;
  width:100%;
  height:calc(100% - 3.6cqw);
  object-fit:cover;
  object-position:center top;
  /* Ohne geladenes Bild soll der Alternativtext den Rahmen nicht aufblaehen. */
  overflow:hidden;
  color:transparent;
}

/* --- Telefon --- */
.device-phone{
  position:absolute;
  inset:auto 0 0 auto;
  width:24%;
  height:75.6%;
  padding:0.85cqw;
  border-radius:3.1cqw;
  background:var(--bg-3);
  border:0.28cqw solid var(--line-strong);
  box-shadow:0 3cqw 7cqw -2cqw rgba(11,13,16,.10);
}

.device-phone-screen{
  position:relative;
  height:100%;
  border-radius:2.4cqw;
  overflow:hidden;
  background:var(--bg-2);
}

.device-phone-screen img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  color:transparent;
}

/* Lautsprecherschlitz. */
.device-phone-screen::after{
  content:"";
  position:absolute;
  top:0.7cqw;left:50%;
  transform:translateX(-50%);
  width:4cqw;height:0.55cqw;
  border-radius:var(--r-pill);
  background:rgba(11,13,16,.07);
}

/* Erst auf sehr schmalen Karten wird das Telefon zur Briefmarke – dann lieber
   nur das Browserfenster zeigen und dieses auf die volle Breite ziehen. */
@container (max-width: 260px){
  .device-browser{width:100%}
  .device-phone{display:none}
  .device-showcase{aspect-ratio:16 / 11.4}
}

/* Anfrage-Knopf je Paket.
 *
 * Vorher war das ein Textlink mit angehaengtem Pfeil — auf einer Seite, auf
 * der es um 450 bis 1350 Euro geht, las sich das nicht wie die Hauptaktion.
 * Jetzt ein gefuellter Knopf, der die Farbe seines Pakets aus --card-tone
 * erbt; gruen, blau und bronze stehen dort ohnehin schon.
 *
 * Der Glanzstreifen ist die Idee aus dem "Frutiger"-Knopf von Uiverse.io
 * (SelfMadeSystem). Dort laeuft er endlos; hier faehrt er einmal durch, wenn
 * jemand den Knopf beruehrt. Dauerbewegung auf drei Knoepfen nebeneinander
 * waere Unruhe statt Aufmerksamkeit.
 */
.package-cta{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:4px;
  padding:15px 24px;
  border-radius:var(--r-pill);
  background:var(--accent-strong);
  color:var(--accent-ink);
  font-size:var(--fs-sm);
  font-weight:700;
  letter-spacing:.01em;
  text-decoration:none;
  transition:transform var(--dur-base) var(--ease),
             box-shadow var(--dur-base) var(--ease),
             filter var(--dur-base) var(--ease);
}

.package-cta-text{position:relative;z-index:2}

/* Der Streifen startet links ausserhalb und faehrt bei Beruehrung einmal
   durch. Bewusst ueber transform statt background-position: bei einem
   Verlauf, der breiter als das Element ist, sind Prozentwerte bei
   background-position nicht mehr anschaulich — und transform laeuft
   ausserdem auf der Grafikkarte. */
.package-cta-sheen{
  position:absolute;
  top:0;bottom:0;
  left:-45%;
  width:45%;
  z-index:1;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
  transform:skewX(-18deg) translateX(0);
  pointer-events:none;
}

@media (hover:hover) and (pointer:fine){
  .package-cta:hover{
    transform:translateY(-2px);
    filter:brightness(1.06);
    box-shadow:0 12px 26px -14px var(--card-tone,var(--accent));
  }
  .package-cta:hover .package-cta-sheen,
  .package-cta:focus-visible .package-cta-sheen{
    animation:package-cta-sheen 620ms var(--ease) forwards;
  }
}
.package-cta:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.package-cta:active{transform:translateY(0)}

@keyframes package-cta-sheen{
  from{transform:skewX(-18deg) translateX(0)}
  to{transform:skewX(-18deg) translateX(330%)}
}

/* Ohne Bewegungswunsch bleibt der Streifen weg — der Knopf funktioniert
   auch ohne ihn, die Farbe traegt die Aussage. */
@media (prefers-reduced-motion:reduce){
  .package-cta,.package-cta:hover{transition:none;transform:none}
  .package-cta .package-cta-sheen{display:none}
}

/* Beleg direkt unter dem Aufmacher. Zwei Kacheln statt zweier kleiner
   Pillen: bei einem unbekannten Anbieter ist "hat der das schon gemacht"
   die erste Frage, also darf die Antwort nicht wie eine Fussnote aussehen.
   Die Zahl traegt die Aussage, die Beschriftung erklaert sie. */
.hero-proof{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:26px;
}

.hero-proof > a{
  flex:1 1 210px;
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px 22px;
  border:1px solid var(--line-strong);
  border-radius:var(--r-lg);
  background:linear-gradient(150deg,var(--accent-soft),transparent 65%),var(--bg-1);
  color:var(--ink-muted);
  font-size:var(--fs-sm);
  text-decoration:none;
  transition:border-color var(--dur-base) var(--ease),
             transform var(--dur-base) var(--ease),
             box-shadow var(--dur-base) var(--ease);
}
.hero-proof > a[hidden]{display:none}

@media (hover:hover) and (pointer:fine){
  .hero-proof > a:hover{
    border-color:var(--accent);
    transform:translateY(-3px);
    box-shadow:0 14px 30px -18px rgba(11,13,16,.12);
  }
}
@media (prefers-reduced-motion:reduce){
  .hero-proof > a,.hero-proof > a:hover{transition:none;transform:none}
}

.hero-proof > a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Die eigentliche Zahl: gross, in der Akzentfarbe, ohne Zierrat. */
.hero-proof strong{
  color:var(--accent);
  font-size:2.1rem;
  font-weight:700;
  line-height:1;
  letter-spacing:-.02em;
  white-space:nowrap;
}

/* Pfeil ans Ende, damit erkennbar bleibt, dass die Kachel weiterfuehrt. */
.hero-proof b{
  margin-left:auto;
  font-style:normal;
  font-weight:400;
  color:var(--ink-faint);
  transition:transform var(--dur-base) var(--ease),color var(--dur-base) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .hero-proof > a:hover b{color:var(--accent);transform:translateX(3px)}
}

/* Zahl oben, Erlaeuterung darunter — in beiden Kacheln gleich. */
.hero-proof-text{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}
.hero-proof-text > span{color:var(--ink-muted);line-height:1.25}
.hero-review-link .review-stars{
  font-size:1.15rem;
  letter-spacing:2px;
  flex:none;
}

/* Auf sehr schmalen Geraeten nebeneinander zu eng — dann untereinander. */
@media (max-width:420px){
  .hero-proof > a{flex:1 1 100%}
}

/* Die drei haeufigsten Einwaende beantwortet direkt neben dem Knopf, statt
   verstreut auf Unterseiten. Alle drei Aussagen stehen so schon auf der
   Kontaktseite bzw. in der Bestaetigungsmail. */
.hero-reassure{
  display:flex;
  flex-wrap:wrap;
  gap:8px 22px;
  margin:20px 0 0;
  padding:0;
  list-style:none;
  font-size:var(--fs-sm);
  color:var(--ink-muted);
}
.hero-reassure li{
  display:flex;
  align-items:center;
  gap:8px;
}
.hero-reassure li::before{
  content:"";
  width:15px;height:15px;
  flex:none;
  border-radius:50%;
  background:var(--accent-soft);
  /* Haken als Maske, damit er die Akzentfarbe erbt */
  box-shadow:inset 0 0 0 1px rgba(59,130,246,.45);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' stroke='%233B82F6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
}

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

/* Fuer Ueberschriften, die nur Screenreader brauchen. */
.visually-hidden{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  clip-path:inset(50%);
  overflow:hidden;
  white-space:nowrap;
}


.reference-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:clamp(24px,3vw,40px);
}

.reference-card{
  display:flex;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--bg-1);
  overflow:hidden;
  transition:border-color var(--dur-base) var(--ease),transform var(--dur-base) var(--ease);
}

.reference-card figure{
  display:flex;
  flex-direction:column;
  margin:0;
  width:100%;
}

.reference-media{
  padding:clamp(18px,4cqw,30px) clamp(18px,4cqw,30px) 0;
  background:
    radial-gradient(120% 90% at 50% 0%,var(--accent-soft),transparent 62%),
    var(--bg-2);
}

.reference-card figcaption{
  display:flex;
  flex-direction:column;
  flex:1;
  gap:10px;
  padding:26px 26px 30px;
  border-top:1px solid var(--line);
}

.reference-kicker{
  margin:0;
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:.72rem;
  letter-spacing:.12em;
  color:var(--ink-faint);
}

.reference-card h3{margin:0;font-size:1.32rem}
.reference-card figcaption p:not(.reference-kicker){margin:0;color:var(--ink-muted)}

/* Knopf zum laufenden Projekt — Vorlage von Uiverse.io (zjssun).
   Auf die Seite umgestellt: Akzentgruen statt Blau, und der Schein ist von
   100px auf 34px zurueckgenommen, weil die Karten sonst im Raster flimmern.
   Steht in der Karte statt in der Adressleiste des Mockups: dort waere der
   Text bei ueblicher Kartenbreite nur wenige Pixel hoch und damit unlesbar.

   In der Vorlage lautet die Regel "#btn:hover, :focus". Das zweite Stueck ist
   nicht an den Knopf gebunden und faerbt jedes fokussierte Element der Seite
   ein; hier ist es deshalb sauber auf diesen Knopf bezogen. */
.reference-visit{
  display:inline-flex;
  align-items:center;
  gap:9px;
  align-self:flex-start;
  margin:8px 0 0;
  padding:10px 18px;
  border:1px solid var(--line-strong);
  border-radius:var(--r-sm);
  background:transparent;
  color:var(--ink-muted);
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
  text-decoration:none;
  user-select:none;
  transition:
    color var(--dur-base) var(--ease),
    background-color var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease);
}

.reference-visit span{transition:transform var(--dur-base) var(--ease)}

.reference-visit:hover,
.reference-visit:focus-visible{
  color:var(--accent-ink);
  background:var(--accent-strong);
  border-color:var(--accent-strong);
  /* Ein einzelner, enger Schein statt der drei gestapelten Leuchtringe der
     Vorlage. Dauerleuchten wirkt billig; hier hebt es den Knopf nur an. */
  box-shadow:0 6px 18px -6px rgba(37,99,235,.55);
}

.reference-visit:hover span{transform:translate(2px,-2px)}

.reference-visit:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.reference-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:auto 0 0;
  padding:14px 0 0;
  list-style:none;
}

.reference-tags li{
  padding:5px 11px;
  border:1px solid var(--line-strong);
  border-radius:var(--r-pill);
  font-size:.78rem;
  color:var(--ink-muted);
}

.reference-note{margin-top:36px}

@media (hover:hover) and (pointer:fine){
  .reference-card:hover{
    border-color:var(--line-strong);
    transform:translateY(-4px);
  }
}

@media (prefers-reduced-motion:reduce){
  .reference-card{transition:none}
  .reference-card:hover{transform:none}
}

@media (max-width:1180px){
  .studio-section{grid-template-columns:1fr}
  .studio-intro{margin-bottom:8px}
  .review-overview-grid{grid-template-columns:1fr}
  .reviews-hero,.faq-hero{grid-template-columns:1fr}
  .review-form-inner{grid-template-columns:1fr;gap:32px}
  .price-packages{grid-template-columns:1fr 1fr}
  .price-packages>article:last-child{grid-column:1/-1}
  .results-stats{grid-template-columns:1fr 1fr}
}

@media (max-width:1000px){
  .hero{grid-template-columns:1fr;padding-top:20px}
  .hero-showcase{order:-1;justify-self:stretch;max-width:none}
  .hero-showcase img{aspect-ratio:4/5}
  .contact.contact-page{grid-template-columns:1fr}
  .services{grid-template-columns:1fr}
  .services article{border-right:0 !important;padding-left:0 !important}
  .process-route .route-card{grid-template-columns:44px 1fr;grid-template-areas:"num title" ". label" ". text" ". arrow"}
  .process-route .route-card b{grid-area:num}
  .process-route .route-card h2{grid-area:title}
  .process-route .route-card small{grid-area:label}
  .process-route .route-card p{grid-area:text}
  .process-route .route-card i{grid-area:arrow;justify-self:start;margin-top:8px}
  .add-on-grid,.payment-methods{grid-template-columns:1fr}
}

@media (max-width:1180px){
  /* Ab hier passt die Navigationszeile nicht mehr nebeneinander und
     ragte sonst rechts aus der Seite. Die uebrigen Regeln fuer schmale
     Schirme greifen weiterhin erst ab 780px. */
  .menu-toggle{display:flex}
  /* Mobiles Menue als Glasflaeche — Vorlage von Uiverse.io.
     Weisswerte fuer den dunklen Grund heruntergezogen. Zusaetzlich ein
     dunkler Schleier unter der Glasschicht: ohne ihn schimmert die Seite
     durch und die Menuepunkte werden je nach Scrollposition unlesbar. */
  nav#site-navigation{
    position:fixed;
    inset:0;
    z-index:55;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:0;
    padding:
      calc(92px + env(safe-area-inset-top)) var(--pad-inline)
      calc(28px + env(safe-area-inset-bottom));
    overflow-y:auto;
    overscroll-behavior:contain;
    background:
      linear-gradient(90deg,transparent,rgba(11,13,16,.08),transparent) top center/100% 1px no-repeat,
      rgba(255,255,255,.92);
    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);
    box-shadow:
      inset 0 1px 0 rgba(11,13,16,.10),
      inset 0 -1px 0 rgba(11,13,16,.04),
      inset 0 0 10px 5px rgba(11,13,16,.04);
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    transition:opacity var(--dur-base) var(--ease),transform var(--dur-base) var(--ease),visibility var(--dur-base);
  }
  .site-header.open nav#site-navigation{opacity:1;visibility:visible;transform:translateY(0)}
  /* Marke bleibt ueber der Glasflaeche stehen, sonst verschwindet sie beim Oeffnen */
  .site-header .brand{position:relative;z-index:60}
  .site-header nav>a,
  .site-header nav>a:not(.nav-cta):not(.nav-verlosung){
    font-size:1.22rem;
    font-weight:600;
    color:var(--ink);
    display:flex;
    align-items:center;
    justify-content:flex-start;
    min-height:52px;
    padding:0;
    border-radius:0;
    border-bottom:1px solid var(--line);
    background:transparent;
  }
  /* Die aktuelle Seite bekommt einen Strich am linken Rand statt nur Fettung. */
  .site-header nav>a[aria-current="page"]{
    color:var(--accent);
    border-left:3px solid var(--accent);
    padding-left:13px;
  }
  .site-header nav>a:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
  /* Verlosung und Preise sind Knoepfe, keine Listenzeilen — sie stehen
     deshalb unter der Liste, ueber die volle Breite. */
  .site-header nav>a.nav-verlosung{
    margin-top:20px;
    justify-content:center;
    border-bottom:0;
    border-radius:var(--r-pill);
    min-height:52px;
  }
  .site-header nav>a.nav-cta{
    margin-top:10px;
    justify-content:center;
    border-bottom:0;
    border-radius:var(--r-pill);
    font-size:var(--fs-body);
    min-height:52px;
  }
  .nav-contact{
    display:flex;
    justify-content:center;
    gap:32px;
    margin-top:auto;
    padding-top:20px;
    border-top:1px solid var(--line);
    opacity:0;visibility:hidden;
    transition:opacity var(--dur-base) var(--ease);
  }
  .site-header.open .nav-contact{opacity:1;visibility:visible;transition-delay:.1s}
  .nav-contact a{
    font-size:var(--fs-sm);
    font-weight:600;
    color:var(--ink-muted);
    display:flex;
    align-items:center;
    min-height:44px;
  }
  body.menu-open{overflow:hidden}
}

@media (max-width:780px){
  .site-header{padding-top:10px;padding-bottom:10px;top:10px;margin-top:10px}

  .hero{padding-bottom:48px}
  .hero .actions{gap:20px}
  .section,.process,.review-form-section{padding-top:calc(var(--section-pad) * .7);padding-bottom:calc(var(--section-pad) * .7)}
  .section-head{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:36px}
  .section-head .intro{text-align:left}
  .footer-contact{margin-top:14px}
  footer{flex-direction:column;gap:28px}
  footer>div:last-child{justify-content:flex-start;max-width:none}
  .price-packages{grid-template-columns:1fr}
  .reference-grid{grid-template-columns:1fr}
  .price-packages>article:last-child{grid-column:auto}
  .results-stats{grid-template-columns:1fr}
  .review-list{grid-template-columns:1fr}
  .faq-item summary{font-size:1.05rem}
  .split-cta,.home-cta>div{flex-direction:column;align-items:flex-start}
  .whatsapp-float{width:44px;height:44px;right:24px;bottom:20px}
  .row-item{
    grid-template-columns:32px 1fr;
    grid-template-areas:"index body" ". link";
    row-gap:12px;
    padding:28px 0 28px 16px;
  }
  .row-item .row-index{grid-area:index}
  .row-item .row-body{grid-area:body}
  .row-item .row-link{grid-area:link;justify-self:start}
}

@media (max-width:520px){
  /* Auf schmalen Schirmen ist der grosse Innenabstand der Preiskarten zu
     teuer — der Text bekaeme sonst kaum noch Zeilenlaenge. */
  .price-packages>article{padding-top:26px}
  .price-packages>article>*{padding-left:22px;padding-right:22px}
  .price-packages .price-includes,
  .price-packages .price-display{margin-left:22px;margin-right:22px}
  .price-packages>article>a{margin:20px 22px 24px}
  .price-packages h2{font-size:1.6rem}
  .price-display .new-customer-price strong{font-size:1.85rem}
  .price-packages>article.is-empfohlen>.package-kicker{padding-right:104px}
  .form-grid{grid-template-columns:1fr}
  .hero h1{letter-spacing:-.01em}
  .studio-metrics span{font-size:var(--fs-body)}
}

/* Knopf im Kopfbereich: gleiche Form und gleicher Glanzstreifen wie die
   Paketknoepfe, nur kompakter. Eine dritte Knopfvariante haette die Seite
   nur unruhiger gemacht. */
.site-header nav > a.nav-cta{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  --card-tone:var(--accent);
  padding:11px 22px;
  border-radius:var(--r-pill);
  background:var(--accent-strong);
  color:var(--accent-ink);
  font-weight:700;
  transition:transform var(--dur-base) var(--ease),
             box-shadow var(--dur-base) var(--ease),
             filter var(--dur-base) var(--ease);
}
.site-header nav > a.nav-cta .package-cta-sheen{
  position:absolute;
  top:0;bottom:0;left:-45%;
  width:45%;
  z-index:1;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
  transform:skewX(-18deg) translateX(0);
  pointer-events:none;
}
.site-header nav > a.nav-cta span:not(.package-cta-sheen){position:relative;z-index:2}

@media (hover:hover) and (pointer:fine){
  .site-header nav > a.nav-cta:hover{
    transform:translateY(-2px);
    filter:brightness(1.06);
    box-shadow:0 12px 26px -14px var(--accent);
  }
  .site-header nav > a.nav-cta:hover .package-cta-sheen,
  .site-header nav > a.nav-cta:focus-visible .package-cta-sheen{
    animation:package-cta-sheen 620ms var(--ease) forwards;
  }
}
@media (prefers-reduced-motion:reduce){
  .site-header nav > a.nav-cta,
  .site-header nav > a.nav-cta:hover{transition:none;transform:none}
  .site-header nav > a.nav-cta .package-cta-sheen{display:none}
}

/* ---------- Sternenfeld ----------

   Vorlage von Uiverse.io (sinful_9361). Uebernommen ist der Aufbau: drei
   Lagen aus box-shadow-Punkten, jede 2000px hoch, die um genau ihre eigene
   Hoehe nach oben wandern — dadurch schliesst die Kachel nahtlos an sich
   selbst an. Ein zweites, um 2000px versetztes Feld je Lage fuellt die
   Luecke waehrend der Bewegung.

   Geaendert: der violette Grund der Vorlage ist Schwarz, wie gewuenscht.
   Die Sternkoordinaten sind hier mit festem Startwert erzeugt statt aus der
   Vorlage kopiert — gleiches Bild, aber wartbar.

   Drei Lagen mit verschiedenen Geschwindigkeiten ergeben Tiefe: kleine
   Sterne wandern schnell, grosse langsam. */

/* Der Grund sitzt auf dem Seitenkoerper und die Sternlagen stehen fest im
   Fenster. Nur so liegen sie auch hinter dem Kopfbereich, der als
   schwebende Pille ueber dem Inhalt haengt. */
/* Auf dem grauen Grund traegt das Sternenfeld wieder: weisse Punkte in drei
   Lagen, wie in der ersten Fassung der Seite. */
body{
  background:var(--bg-0);
  background-attachment:fixed;
}


.sternenfeld{
  position:relative;
  isolation:isolate;
}

.sterne{
  position:fixed;
  top:0;left:0;
  z-index:-2;
  /* Die Punkte entstehen als Schlagschatten dieses Vierecks. Ohne den
     Radius waeren es ab 2px sichtbare Quadrate. */
  border-radius:50%;
  background:transparent;
  pointer-events:none;
}
.sterne::after{
  content:"";
  position:absolute;
  top:2000px;
  background:transparent;
}

/* Ein weicher Schein in der Markenfarbe, damit die Flaeche nicht voellig
   fremd neben den uebrigen Seiten steht. */
.sternenschein{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(120% 80% at 50% 100%,
    rgba(37,99,235,.09) 0%, transparent 62%);
}

@keyframes sterne-zug{
  from{transform:translateY(0)}
  to{transform:translateY(-2000px)}
}

/* Bewegung ist hier reine Zier — bei entsprechender Einstellung steht sie. */
@media (prefers-reduced-motion:reduce){
  .sternenfeld > .sterne{animation:none !important}
}

.sterne-klein{
  width:2px;height:2px;
  animation:sterne-zug 50s linear infinite;
  box-shadow:
    36px 1240px rgba(255,255,255,1),
    1295px 1903px rgba(255,255,255,1),
    686px 1054px rgba(255,255,255,1),
    1532px 1092px rgba(255,255,255,1),
    949px 1354px rgba(255,255,255,1),
    3px 1036px rgba(255,255,255,1),
    1813px 1881px rgba(255,255,255,1),
    1080px 1141px rgba(255,255,255,1),
    1715px 1351px rgba(255,255,255,1),
    1883px 626px rgba(255,255,255,1),
    229px 1000px rgba(255,255,255,1),
    957px 83px rgba(255,255,255,1),
    1299px 140px rgba(255,255,255,1),
    572px 1569px rgba(255,255,255,1),
    882px 198px rgba(255,255,255,1),
    1772px 1992px rgba(255,255,255,1),
    1225px 1401px rgba(255,255,255,1),
    563px 1946px rgba(255,255,255,1),
    1324px 898px rgba(255,255,255,1),
    561px 1447px rgba(255,255,255,1),
    1343px 938px rgba(255,255,255,1),
    909px 494px rgba(255,255,255,1),
    1132px 1981px rgba(255,255,255,1),
    819px 755px rgba(255,255,255,1),
    1255px 572px rgba(255,255,255,1),
    1013px 909px rgba(255,255,255,1),
    205px 845px rgba(255,255,255,1),
    1268px 1695px rgba(255,255,255,1),
    930px 167px rgba(255,255,255,1),
    945px 986px rgba(255,255,255,1),
    1724px 790px rgba(255,255,255,1),
    1252px 1790px rgba(255,255,255,1),
    1024px 367px rgba(255,255,255,1),
    18px 929px rgba(255,255,255,1),
    1287px 1364px rgba(255,255,255,1),
    688px 621px rgba(255,255,255,1),
    1231px 593px rgba(255,255,255,1),
    12px 711px rgba(255,255,255,1),
    1074px 583px rgba(255,255,255,1),
    951px 1659px rgba(255,255,255,1),
    1664px 826px rgba(255,255,255,1),
    119px 850px rgba(255,255,255,1),
    617px 259px rgba(255,255,255,1),
    324px 649px rgba(255,255,255,1),
    1889px 1848px rgba(255,255,255,1),
    1097px 1647px rgba(255,255,255,1),
    1766px 406px rgba(255,255,255,1),
    1097px 1976px rgba(255,255,255,1),
    408px 1765px rgba(255,255,255,1),
    1884px 1099px rgba(255,255,255,1),
    891px 901px rgba(255,255,255,1),
    1303px 1650px rgba(255,255,255,1),
    1392px 211px rgba(255,255,255,1),
    1602px 1785px rgba(255,255,255,1),
    1221px 1553px rgba(255,255,255,1),
    1349px 15px rgba(255,255,255,1),
    87px 1760px rgba(255,255,255,1),
    967px 1289px rgba(255,255,255,1),
    578px 1958px rgba(255,255,255,1),
    75px 1103px rgba(255,255,255,1),
    467px 1374px rgba(255,255,255,1),
    81px 1685px rgba(255,255,255,1),
    1460px 1518px rgba(255,255,255,1),
    646px 1219px rgba(255,255,255,1),
    192px 597px rgba(255,255,255,1),
    650px 463px rgba(255,255,255,1),
    438px 750px rgba(255,255,255,1),
    368px 1170px rgba(255,255,255,1),
    715px 733px rgba(255,255,255,1),
    652px 1230px rgba(255,255,255,1),
    1194px 1012px rgba(255,255,255,1),
    422px 410px rgba(255,255,255,1),
    1828px 77px rgba(255,255,255,1),
    600px 678px rgba(255,255,255,1),
    1053px 1757px rgba(255,255,255,1),
    1823px 708px rgba(255,255,255,1),
    1253px 168px rgba(255,255,255,1),
    692px 146px rgba(255,255,255,1),
    1586px 72px rgba(255,255,255,1),
    82px 1263px rgba(255,255,255,1),
    179px 1995px rgba(255,255,255,1),
    131px 31px rgba(255,255,255,1),
    1960px 921px rgba(255,255,255,1),
    214px 298px rgba(255,255,255,1),
    307px 1690px rgba(255,255,255,1),
    791px 55px rgba(255,255,255,1),
    1393px 1118px rgba(255,255,255,1),
    1594px 1847px rgba(255,255,255,1),
    682px 597px rgba(255,255,255,1),
    28px 1341px rgba(255,255,255,1),
    624px 169px rgba(255,255,255,1),
    1101px 1502px rgba(255,255,255,1),
    1609px 93px rgba(255,255,255,1),
    1175px 580px rgba(255,255,255,1),
    673px 467px rgba(255,255,255,1),
    1363px 1902px rgba(255,255,255,1),
    215px 681px rgba(255,255,255,1),
    1671px 884px rgba(255,255,255,1),
    1238px 590px rgba(255,255,255,1),
    1381px 1030px rgba(255,255,255,1),
    619px 599px rgba(255,255,255,1),
    76px 1565px rgba(255,255,255,1),
    859px 427px rgba(255,255,255,1),
    610px 1105px rgba(255,255,255,1),
    475px 1484px rgba(255,255,255,1),
    1455px 1680px rgba(255,255,255,1),
    1903px 767px rgba(255,255,255,1),
    671px 803px rgba(255,255,255,1),
    850px 1590px rgba(255,255,255,1),
    354px 3px rgba(255,255,255,1),
    28px 1430px rgba(255,255,255,1),
    1880px 276px rgba(255,255,255,1),
    611px 864px rgba(255,255,255,1),
    11px 410px rgba(255,255,255,1),
    1380px 1254px rgba(255,255,255,1),
    56px 1645px rgba(255,255,255,1),
    580px 1333px rgba(255,255,255,1),
    1669px 1432px rgba(255,255,255,1),
    1840px 1064px rgba(255,255,255,1),
    1865px 1099px rgba(255,255,255,1),
    33px 888px rgba(255,255,255,1),
    994px 1557px rgba(255,255,255,1),
    606px 437px rgba(255,255,255,1),
    949px 711px rgba(255,255,255,1),
    1104px 1344px rgba(255,255,255,1),
    865px 1514px rgba(255,255,255,1),
    1226px 740px rgba(255,255,255,1),
    506px 146px rgba(255,255,255,1),
    1830px 1779px rgba(255,255,255,1),
    375px 1213px rgba(255,255,255,1),
    1108px 749px rgba(255,255,255,1),
    940px 1192px rgba(255,255,255,1),
    1422px 1316px rgba(255,255,255,1),
    1471px 1435px rgba(255,255,255,1),
    101px 742px rgba(255,255,255,1),
    1944px 1619px rgba(255,255,255,1),
    54px 1192px rgba(255,255,255,1),
    683px 1619px rgba(255,255,255,1),
    189px 115px rgba(255,255,255,1),
    987px 535px rgba(255,255,255,1),
    294px 1651px rgba(255,255,255,1),
    286px 1512px rgba(255,255,255,1),
    201px 847px rgba(255,255,255,1),
    1706px 1297px rgba(255,255,255,1),
    1122px 1879px rgba(255,255,255,1),
    1354px 996px rgba(255,255,255,1),
    1121px 180px rgba(255,255,255,1),
    1327px 1107px rgba(255,255,255,1),
    1463px 919px rgba(255,255,255,1),
    866px 1691px rgba(255,255,255,1),
    436px 1532px rgba(255,255,255,1),
    1984px 865px rgba(255,255,255,1),
    911px 220px rgba(255,255,255,1),
    1300px 52px rgba(255,255,255,1),
    955px 98px rgba(255,255,255,1),
    386px 1956px rgba(255,255,255,1),
    321px 208px rgba(255,255,255,1),
    1384px 814px rgba(255,255,255,1),
    834px 1767px rgba(255,255,255,1),
    1331px 1671px rgba(255,255,255,1),
    1590px 1643px rgba(255,255,255,1),
    1262px 1518px rgba(255,255,255,1),
    1078px 1537px rgba(255,255,255,1),
    1738px 750px rgba(255,255,255,1),
    1873px 679px rgba(255,255,255,1),
    51px 336px rgba(255,255,255,1),
    969px 948px rgba(255,255,255,1),
    1984px 1166px rgba(255,255,255,1),
    1534px 1960px rgba(255,255,255,1),
    782px 1605px rgba(255,255,255,1),
    1197px 1646px rgba(255,255,255,1),
    1773px 225px rgba(255,255,255,1),
    1896px 945px rgba(255,255,255,1),
    106px 1027px rgba(255,255,255,1),
    1451px 1427px rgba(255,255,255,1),
    651px 1062px rgba(255,255,255,1),
    1166px 1405px rgba(255,255,255,1),
    1836px 1780px rgba(255,255,255,1),
    691px 887px rgba(255,255,255,1),
    277px 1651px rgba(255,255,255,1),
    61px 802px rgba(255,255,255,1),
    1928px 1655px rgba(255,255,255,1),
    1047px 586px rgba(255,255,255,1),
    399px 1540px rgba(255,255,255,1),
    674px 896px rgba(255,255,255,1),
    125px 1214px rgba(255,255,255,1),
    887px 1806px rgba(255,255,255,1),
    209px 68px rgba(255,255,255,1),
    1732px 994px rgba(255,255,255,1),
    1050px 1591px rgba(255,255,255,1),
    897px 1775px rgba(255,255,255,1),
    1805px 349px rgba(255,255,255,1),
    1030px 623px rgba(255,255,255,1),
    1974px 1532px rgba(255,255,255,1),
    205px 100px rgba(255,255,255,1),
    670px 1198px rgba(255,255,255,1),
    1068px 1926px rgba(255,255,255,1),
    382px 902px rgba(255,255,255,1),
    1088px 135px rgba(255,255,255,1),
    515px 1502px rgba(255,255,255,1),
    1526px 783px rgba(255,255,255,1),
    1628px 1905px rgba(255,255,255,1),
    777px 1281px rgba(255,255,255,1),
    1617px 1337px rgba(255,255,255,1),
    1196px 1411px rgba(255,255,255,1),
    281px 1610px rgba(255,255,255,1),
    166px 987px rgba(255,255,255,1),
    1234px 1333px rgba(255,255,255,1),
    1176px 1811px rgba(255,255,255,1),
    1876px 1436px rgba(255,255,255,1),
    1222px 1006px rgba(255,255,255,1),
    917px 1000px rgba(255,255,255,1),
    1127px 1924px rgba(255,255,255,1),
    1349px 764px rgba(255,255,255,1),
    1068px 729px rgba(255,255,255,1),
    1165px 1550px rgba(255,255,255,1),
    842px 134px rgba(255,255,255,1),
    66px 1353px rgba(255,255,255,1),
    508px 928px rgba(255,255,255,1),
    583px 1642px rgba(255,255,255,1),
    1375px 678px rgba(255,255,255,1),
    717px 1598px rgba(255,255,255,1),
    471px 168px rgba(255,255,255,1),
    338px 730px rgba(255,255,255,1),
    202px 1384px rgba(255,255,255,1),
    1552px 552px rgba(255,255,255,1),
    1981px 73px rgba(255,255,255,1),
    1000px 233px rgba(255,255,255,1),
    1566px 635px rgba(255,255,255,1),
    1814px 1270px rgba(255,255,255,1),
    847px 611px rgba(255,255,255,1),
    635px 870px rgba(255,255,255,1),
    1430px 1255px rgba(255,255,255,1),
    839px 1308px rgba(255,255,255,1),
    1651px 1098px rgba(255,255,255,1),
    1961px 1806px rgba(255,255,255,1),
    1012px 910px rgba(255,255,255,1),
    1302px 267px rgba(255,255,255,1),
    1070px 929px rgba(255,255,255,1),
    695px 1047px rgba(255,255,255,1),
    457px 1276px rgba(255,255,255,1),
    1000px 364px rgba(255,255,255,1),
    465px 447px rgba(255,255,255,1),
    1732px 1089px rgba(255,255,255,1),
    433px 1058px rgba(255,255,255,1),
    213px 856px rgba(255,255,255,1),
    130px 1282px rgba(255,255,255,1),
    1596px 1061px rgba(255,255,255,1),
    1079px 406px rgba(255,255,255,1),
    1578px 23px rgba(255,255,255,1),
    343px 1632px rgba(255,255,255,1),
    1330px 570px rgba(255,255,255,1),
    101px 1043px rgba(255,255,255,1),
    1987px 1799px rgba(255,255,255,1),
    1712px 187px rgba(255,255,255,1),
    1229px 1106px rgba(255,255,255,1),
    1845px 734px rgba(255,255,255,1),
    1126px 477px rgba(255,255,255,1),
    836px 334px rgba(255,255,255,1),
    1829px 516px rgba(255,255,255,1),
    1078px 1009px rgba(255,255,255,1),
    864px 108px rgba(255,255,255,1),
    1217px 682px rgba(255,255,255,1),
    1537px 1374px rgba(255,255,255,1),
    1405px 407px rgba(255,255,255,1),
    1165px 752px rgba(255,255,255,1),
    1337px 1444px rgba(255,255,255,1),
    1312px 1866px rgba(255,255,255,1),
    1543px 135px rgba(255,255,255,1),
    142px 533px rgba(255,255,255,1),
    434px 519px rgba(255,255,255,1),
    1701px 1167px rgba(255,255,255,1),
    1976px 1684px rgba(255,255,255,1),
    1406px 159px rgba(255,255,255,1),
    797px 948px rgba(255,255,255,1),
    199px 826px rgba(255,255,255,1),
    983px 841px rgba(255,255,255,1),
    967px 1051px rgba(255,255,255,1),
    1195px 1753px rgba(255,255,255,1),
    1017px 1862px rgba(255,255,255,1),
    920px 1355px rgba(255,255,255,1),
    674px 498px rgba(255,255,255,1),
    630px 241px rgba(255,255,255,1),
    362px 1202px rgba(255,255,255,1),
    660px 1843px rgba(255,255,255,1),
    1391px 1486px rgba(255,255,255,1),
    1590px 472px rgba(255,255,255,1),
    494px 847px rgba(255,255,255,1),
    772px 1442px rgba(255,255,255,1),
    355px 1200px rgba(255,255,255,1),
    1513px 918px rgba(255,255,255,1),
    610px 315px rgba(255,255,255,1),
    1729px 1681px rgba(255,255,255,1),
    1715px 1975px rgba(255,255,255,1),
    1646px 566px rgba(255,255,255,1),
    1118px 1796px rgba(255,255,255,1),
    834px 1112px rgba(255,255,255,1),
    1080px 1611px rgba(255,255,255,1),
    1492px 1249px rgba(255,255,255,1),
    1263px 1562px rgba(255,255,255,1),
    699px 1412px rgba(255,255,255,1),
    56px 775px rgba(255,255,255,1),
    595px 108px rgba(255,255,255,1),
    1331px 1578px rgba(255,255,255,1),
    1893px 1742px rgba(255,255,255,1),
    1000px 30px rgba(255,255,255,1),
    1156px 1476px rgba(255,255,255,1),
    932px 728px rgba(255,255,255,1),
    673px 165px rgba(255,255,255,1),
    857px 71px rgba(255,255,255,1),
    770px 736px rgba(255,255,255,1),
    841px 1246px rgba(255,255,255,1),
    286px 1457px rgba(255,255,255,1),
    716px 1579px rgba(255,255,255,1),
    710px 152px rgba(255,255,255,1),
    75px 387px rgba(255,255,255,1),
    1047px 655px rgba(255,255,255,1),
    904px 316px rgba(255,255,255,1),
    765px 1309px rgba(255,255,255,1),
    1334px 372px rgba(255,255,255,1),
    449px 1256px rgba(255,255,255,1),
    488px 1269px rgba(255,255,255,1),
    1142px 192px rgba(255,255,255,1),
    1263px 540px rgba(255,255,255,1),
    872px 1375px rgba(255,255,255,1),
    167px 1224px rgba(255,255,255,1),
    1603px 1806px rgba(255,255,255,1),
    1808px 915px rgba(255,255,255,1),
    885px 444px rgba(255,255,255,1),
    907px 1218px rgba(255,255,255,1),
    1686px 1550px rgba(255,255,255,1),
    1868px 1571px rgba(255,255,255,1),
    1342px 1573px rgba(255,255,255,1),
    782px 1109px rgba(255,255,255,1),
    1130px 953px rgba(255,255,255,1),
    443px 1872px rgba(255,255,255,1),
    1947px 936px rgba(255,255,255,1),
    1822px 731px rgba(255,255,255,1),
    1213px 1417px rgba(255,255,255,1),
    511px 1878px rgba(255,255,255,1),
    1261px 1568px rgba(255,255,255,1),
    1119px 874px rgba(255,255,255,1),
    255px 1365px rgba(255,255,255,1),
    1070px 785px rgba(255,255,255,1),
    1487px 672px rgba(255,255,255,1),
    1996px 1743px rgba(255,255,255,1),
    137px 1879px rgba(255,255,255,1),
    44px 197px rgba(255,255,255,1),
    1538px 1179px rgba(255,255,255,1),
    1237px 713px rgba(255,255,255,1),
    1993px 1453px rgba(255,255,255,1),
    1774px 377px rgba(255,255,255,1),
    1965px 161px rgba(255,255,255,1),
    1454px 1130px rgba(255,255,255,1),
    619px 739px rgba(255,255,255,1),
    1857px 880px rgba(255,255,255,1),
    914px 2px rgba(255,255,255,1),
    886px 648px rgba(255,255,255,1),
    1871px 523px rgba(255,255,255,1),
    1464px 624px rgba(255,255,255,1),
    12px 1780px rgba(255,255,255,1),
    1958px 499px rgba(255,255,255,1),
    1739px 406px rgba(255,255,255,1),
    1357px 1836px rgba(255,255,255,1),
    508px 1539px rgba(255,255,255,1),
    86px 1409px rgba(255,255,255,1),
    606px 1199px rgba(255,255,255,1),
    1509px 692px rgba(255,255,255,1),
    1968px 153px rgba(255,255,255,1),
    1091px 1179px rgba(255,255,255,1),
    252px 1044px rgba(255,255,255,1),
    664px 35px rgba(255,255,255,1),
    974px 780px rgba(255,255,255,1),
    954px 1844px rgba(255,255,255,1),
    1786px 1053px rgba(255,255,255,1),
    1023px 895px rgba(255,255,255,1),
    1772px 921px rgba(255,255,255,1),
    420px 497px rgba(255,255,255,1),
    55px 1207px rgba(255,255,255,1),
    808px 1495px rgba(255,255,255,1),
    1561px 772px rgba(255,255,255,1),
    1498px 492px rgba(255,255,255,1),
    70px 517px rgba(255,255,255,1),
    950px 1066px rgba(255,255,255,1),
    1608px 1209px rgba(255,255,255,1),
    633px 720px rgba(255,255,255,1),
    1639px 441px rgba(255,255,255,1),
    1423px 1513px rgba(255,255,255,1),
    375px 1927px rgba(255,255,255,1),
    1275px 1494px rgba(255,255,255,1),
    1796px 1980px rgba(255,255,255,1),
    201px 153px rgba(255,255,255,1),
    1029px 181px rgba(255,255,255,1),
    683px 1610px rgba(255,255,255,1),
    941px 132px rgba(255,255,255,1),
    827px 91px rgba(255,255,255,1),
    783px 307px rgba(255,255,255,1),
    1397px 1618px rgba(255,255,255,1),
    777px 379px rgba(255,255,255,1),
    465px 560px rgba(255,255,255,1),
    819px 733px rgba(255,255,255,1),
    909px 1278px rgba(255,255,255,1),
    1198px 847px rgba(255,255,255,1),
    124px 1363px rgba(255,255,255,1),
    154px 1012px rgba(255,255,255,1),
    994px 1771px rgba(255,255,255,1),
    1675px 85px rgba(255,255,255,1),
    1982px 964px rgba(255,255,255,1),
    1368px 1792px rgba(255,255,255,1),
    1771px 762px rgba(255,255,255,1),
    671px 1464px rgba(255,255,255,1),
    34px 1345px rgba(255,255,255,1),
    422px 1291px rgba(255,255,255,1),
    129px 138px rgba(255,255,255,1),
    1371px 1578px rgba(255,255,255,1),
    1265px 1969px rgba(255,255,255,1),
    989px 382px rgba(255,255,255,1),
    246px 1061px rgba(255,255,255,1),
    704px 414px rgba(255,255,255,1),
    396px 1776px rgba(255,255,255,1),
    549px 218px rgba(255,255,255,1),
    1862px 328px rgba(255,255,255,1),
    1608px 842px rgba(255,255,255,1),
    873px 1460px rgba(255,255,255,1),
    346px 212px rgba(255,255,255,1),
    365px 1973px rgba(255,255,255,1),
    1238px 1307px rgba(255,255,255,1),
    1779px 1020px rgba(255,255,255,1),
    1093px 1506px rgba(255,255,255,1),
    1252px 540px rgba(255,255,255,1),
    1150px 1257px rgba(255,255,255,1),
    1401px 1873px rgba(255,255,255,1),
    848px 311px rgba(255,255,255,1),
    200px 22px rgba(255,255,255,1),
    350px 950px rgba(255,255,255,1),
    491px 908px rgba(255,255,255,1),
    180px 1044px rgba(255,255,255,1),
    1775px 1231px rgba(255,255,255,1),
    1317px 421px rgba(255,255,255,1),
    193px 1327px rgba(255,255,255,1),
    454px 1276px rgba(255,255,255,1),
    1129px 1558px rgba(255,255,255,1),
    952px 512px rgba(255,255,255,1),
    1789px 1476px rgba(255,255,255,1),
    1392px 977px rgba(255,255,255,1),
    385px 1983px rgba(255,255,255,1),
    541px 1599px rgba(255,255,255,1),
    1208px 759px rgba(255,255,255,1),
    1979px 1320px rgba(255,255,255,1),
    1106px 449px rgba(255,255,255,1),
    1197px 1895px rgba(255,255,255,1),
    179px 435px rgba(255,255,255,1),
    585px 599px rgba(255,255,255,1),
    1313px 1231px rgba(255,255,255,1),
    1499px 1094px rgba(255,255,255,1),
    964px 915px rgba(255,255,255,1),
    1642px 1196px rgba(255,255,255,1),
    1083px 1568px rgba(255,255,255,1),
    719px 84px rgba(255,255,255,1),
    1928px 811px rgba(255,255,255,1),
    699px 403px rgba(255,255,255,1),
    1798px 1812px rgba(255,255,255,1),
    219px 1772px rgba(255,255,255,1),
    186px 632px rgba(255,255,255,1),
    859px 1998px rgba(255,255,255,1),
    321px 1482px rgba(255,255,255,1),
    398px 336px rgba(255,255,255,1),
    1692px 1436px rgba(255,255,255,1),
    614px 789px rgba(255,255,255,1),
    107px 423px rgba(255,255,255,1),
    834px 43px rgba(255,255,255,1),
    315px 999px rgba(255,255,255,1),
    1148px 1802px rgba(255,255,255,1),
    963px 1548px rgba(255,255,255,1),
    945px 1653px rgba(255,255,255,1),
    590px 1222px rgba(255,255,255,1),
    38px 1542px rgba(255,255,255,1),
    156px 1889px rgba(255,255,255,1),
    1685px 1651px rgba(255,255,255,1),
    51px 943px rgba(255,255,255,1),
    1866px 1921px rgba(255,255,255,1),
    1338px 246px rgba(255,255,255,1),
    468px 1426px rgba(255,255,255,1),
    1421px 14px rgba(255,255,255,1),
    39px 108px rgba(255,255,255,1),
    583px 889px rgba(255,255,255,1),
    1800px 1492px rgba(255,255,255,1),
    813px 289px rgba(255,255,255,1),
    670px 644px rgba(255,255,255,1),
    245px 284px rgba(255,255,255,1),
    1774px 1202px rgba(255,255,255,1),
    359px 1529px rgba(255,255,255,1),
    1463px 1039px rgba(255,255,255,1),
    108px 444px rgba(255,255,255,1),
    569px 1722px rgba(255,255,255,1),
    632px 111px rgba(255,255,255,1),
    390px 1157px rgba(255,255,255,1),
    1114px 251px rgba(255,255,255,1),
    1919px 1200px rgba(255,255,255,1),
    1126px 211px rgba(255,255,255,1),
    1146px 15px rgba(255,255,255,1),
    1309px 134px rgba(255,255,255,1),
    707px 1781px rgba(255,255,255,1),
    1583px 194px rgba(255,255,255,1),
    1570px 599px rgba(255,255,255,1),
    1375px 1217px rgba(255,255,255,1),
    1421px 1919px rgba(255,255,255,1),
    1052px 534px rgba(255,255,255,1),
    383px 39px rgba(255,255,255,1),
    888px 1520px rgba(255,255,255,1),
    1217px 1241px rgba(255,255,255,1),
    80px 913px rgba(255,255,255,1),
    355px 1765px rgba(255,255,255,1),
    773px 865px rgba(255,255,255,1),
    1978px 1864px rgba(255,255,255,1),
    1871px 1978px rgba(255,255,255,1),
    819px 1402px rgba(255,255,255,1),
    1970px 1657px rgba(255,255,255,1),
    1137px 809px rgba(255,255,255,1),
    1825px 1661px rgba(255,255,255,1),
    1575px 454px rgba(255,255,255,1),
    728px 576px rgba(255,255,255,1),
    722px 1727px rgba(255,255,255,1),
    78px 1040px rgba(255,255,255,1),
    607px 1845px rgba(255,255,255,1),
    162px 492px rgba(255,255,255,1),
    1003px 1822px rgba(255,255,255,1),
    1876px 216px rgba(255,255,255,1),
    1200px 1919px rgba(255,255,255,1),
    146px 391px rgba(255,255,255,1),
    1352px 1896px rgba(255,255,255,1),
    245px 701px rgba(255,255,255,1),
    1746px 1583px rgba(255,255,255,1),
    1792px 525px rgba(255,255,255,1),
    1168px 1242px rgba(255,255,255,1),
    1195px 1014px rgba(255,255,255,1),
    794px 508px rgba(255,255,255,1),
    1480px 1657px rgba(255,255,255,1),
    1864px 141px rgba(255,255,255,1),
    1692px 1638px rgba(255,255,255,1),
    750px 1582px rgba(255,255,255,1),
    1026px 1860px rgba(255,255,255,1),
    1649px 1180px rgba(255,255,255,1),
    1778px 1945px rgba(255,255,255,1),
    1347px 1967px rgba(255,255,255,1),
    1027px 1881px rgba(255,255,255,1),
    392px 1151px rgba(255,255,255,1),
    1375px 1160px rgba(255,255,255,1),
    1369px 591px rgba(255,255,255,1),
    966px 654px rgba(255,255,255,1),
    1908px 1863px rgba(255,255,255,1),
    742px 1810px rgba(255,255,255,1),
    760px 1640px rgba(255,255,255,1),
    225px 928px rgba(255,255,255,1),
    1001px 1146px rgba(255,255,255,1),
    1193px 115px rgba(255,255,255,1),
    1779px 368px rgba(255,255,255,1),
    1447px 409px rgba(255,255,255,1),
    742px 70px rgba(255,255,255,1),
    1693px 1096px rgba(255,255,255,1),
    393px 1640px rgba(255,255,255,1),
    1394px 1732px rgba(255,255,255,1),
    1572px 69px rgba(255,255,255,1),
    725px 173px rgba(255,255,255,1),
    265px 1732px rgba(255,255,255,1),
    960px 662px rgba(255,255,255,1),
    1540px 325px rgba(255,255,255,1),
    986px 614px rgba(255,255,255,1),
    1397px 615px rgba(255,255,255,1),
    616px 22px rgba(255,255,255,1),
    549px 1884px rgba(255,255,255,1),
    1936px 1033px rgba(255,255,255,1),
    1766px 942px rgba(255,255,255,1),
    763px 1000px rgba(255,255,255,1),
    1349px 884px rgba(255,255,255,1),
    880px 221px rgba(255,255,255,1),
    425px 250px rgba(255,255,255,1),
    1591px 1510px rgba(255,255,255,1),
    688px 817px rgba(255,255,255,1),
    1986px 657px rgba(255,255,255,1),
    1229px 105px rgba(255,255,255,1),
    1516px 1920px rgba(255,255,255,1),
    665px 1749px rgba(255,255,255,1),
    1888px 752px rgba(255,255,255,1),
    348px 1660px rgba(255,255,255,1),
    1570px 1612px rgba(255,255,255,1),
    480px 561px rgba(255,255,255,1),
    1702px 491px rgba(255,255,255,1),
    519px 569px rgba(255,255,255,1),
    823px 847px rgba(255,255,255,1),
    1270px 1142px rgba(255,255,255,1),
    372px 1307px rgba(255,255,255,1),
    1165px 911px rgba(255,255,255,1),
    1994px 43px rgba(255,255,255,1),
    851px 896px rgba(255,255,255,1),
    67px 606px rgba(255,255,255,1),
    1909px 433px rgba(255,255,255,1),
    1289px 728px rgba(255,255,255,1),
    1571px 682px rgba(255,255,255,1),
    1556px 1135px rgba(255,255,255,1),
    1013px 1074px rgba(255,255,255,1),
    555px 1883px rgba(255,255,255,1),
    1988px 1913px rgba(255,255,255,1),
    1311px 404px rgba(255,255,255,1),
    928px 1159px rgba(255,255,255,1),
    990px 364px rgba(255,255,255,1),
    1512px 1593px rgba(255,255,255,1),
    1328px 383px rgba(255,255,255,1),
    1411px 496px rgba(255,255,255,1),
    1218px 995px rgba(255,255,255,1),
    1325px 1403px rgba(255,255,255,1),
    1356px 1805px rgba(255,255,255,1),
    278px 1068px rgba(255,255,255,1),
    1447px 291px rgba(255,255,255,1),
    1719px 1077px rgba(255,255,255,1),
    280px 799px rgba(255,255,255,1),
    502px 392px rgba(255,255,255,1),
    1592px 1686px rgba(255,255,255,1),
    59px 309px rgba(255,255,255,1),
    1773px 1739px rgba(255,255,255,1),
    1933px 5px rgba(255,255,255,1),
    32px 1075px rgba(255,255,255,1),
    882px 1717px rgba(255,255,255,1),
    752px 813px rgba(255,255,255,1),
    1989px 1237px rgba(255,255,255,1),
    751px 1468px rgba(255,255,255,1),
    1140px 761px rgba(255,255,255,1),
    1441px 1415px rgba(255,255,255,1),
    1092px 1621px rgba(255,255,255,1),
    1481px 1204px rgba(255,255,255,1),
    1748px 1090px rgba(255,255,255,1),
    1129px 514px rgba(255,255,255,1),
    205px 1039px rgba(255,255,255,1),
    1449px 831px rgba(255,255,255,1),
    438px 353px rgba(255,255,255,1),
    192px 302px rgba(255,255,255,1),
    118px 719px rgba(255,255,255,1),
    865px 552px rgba(255,255,255,1),
    1173px 877px rgba(255,255,255,1),
    204px 462px rgba(255,255,255,1),
    414px 384px rgba(255,255,255,1),
    361px 1842px rgba(255,255,255,1),
    586px 695px rgba(255,255,255,1),
    335px 1874px rgba(255,255,255,1),
    1719px 1947px rgba(255,255,255,1),
    1392px 1683px rgba(255,255,255,1),
    348px 1647px rgba(255,255,255,1),
    235px 1804px rgba(255,255,255,1),
    1254px 75px rgba(255,255,255,1),
    716px 1348px rgba(255,255,255,1),
    1757px 402px rgba(255,255,255,1),
    841px 919px rgba(255,255,255,1),
    148px 28px rgba(255,255,255,1),
    1393px 1136px rgba(255,255,255,1),
    1508px 1631px rgba(255,255,255,1),
    1779px 235px rgba(255,255,255,1),
    869px 1843px rgba(255,255,255,1),
    584px 371px rgba(255,255,255,1),
    1309px 335px rgba(255,255,255,1),
    68px 1824px rgba(255,255,255,1),
    248px 890px rgba(255,255,255,1),
    715px 916px rgba(255,255,255,1),
    1876px 572px rgba(255,255,255,1),
    1912px 39px rgba(255,255,255,1),
    1471px 1563px rgba(255,255,255,1),
    823px 386px rgba(255,255,255,1),
    1361px 1256px rgba(255,255,255,1),
    1586px 345px rgba(255,255,255,1),
    373px 343px rgba(255,255,255,1),
    469px 377px rgba(255,255,255,1),
    815px 918px rgba(255,255,255,1),
    1151px 1148px rgba(255,255,255,1),
    180px 1600px rgba(255,255,255,1),
    1081px 1314px rgba(255,255,255,1),
    1583px 1984px rgba(255,255,255,1),
    1338px 1071px rgba(255,255,255,1),
    476px 1585px rgba(255,255,255,1),
    314px 1021px rgba(255,255,255,1),
    531px 1231px rgba(255,255,255,1),
    1587px 588px rgba(255,255,255,1),
    1643px 1534px rgba(255,255,255,1),
    505px 1844px rgba(255,255,255,1),
    1898px 1646px rgba(255,255,255,1),
    1804px 470px rgba(255,255,255,1),
    1019px 339px rgba(255,255,255,1),
    1963px 1869px rgba(255,255,255,1),
    318px 113px rgba(255,255,255,1),
    1880px 373px rgba(255,255,255,1),
    960px 1627px rgba(255,255,255,1),
    1345px 282px rgba(255,255,255,1),
    154px 749px rgba(255,255,255,1),
    1042px 1927px rgba(255,255,255,1),
    1811px 670px rgba(255,255,255,1),
    548px 1452px rgba(255,255,255,1),
    748px 518px rgba(255,255,255,1),
    1461px 1205px rgba(255,255,255,1),
    805px 1723px rgba(255,255,255,1),
    986px 1796px rgba(255,255,255,1),
    1435px 1245px rgba(255,255,255,1),
    1513px 887px rgba(255,255,255,1);
}
.sterne-klein::after{
  width:1px;height:1px;
  box-shadow:
    36px 1240px rgba(255,255,255,1),
    1295px 1903px rgba(255,255,255,1),
    686px 1054px rgba(255,255,255,1),
    1532px 1092px rgba(255,255,255,1),
    949px 1354px rgba(255,255,255,1),
    3px 1036px rgba(255,255,255,1),
    1813px 1881px rgba(255,255,255,1),
    1080px 1141px rgba(255,255,255,1),
    1715px 1351px rgba(255,255,255,1),
    1883px 626px rgba(255,255,255,1),
    229px 1000px rgba(255,255,255,1),
    957px 83px rgba(255,255,255,1),
    1299px 140px rgba(255,255,255,1),
    572px 1569px rgba(255,255,255,1),
    882px 198px rgba(255,255,255,1),
    1772px 1992px rgba(255,255,255,1),
    1225px 1401px rgba(255,255,255,1),
    563px 1946px rgba(255,255,255,1),
    1324px 898px rgba(255,255,255,1),
    561px 1447px rgba(255,255,255,1),
    1343px 938px rgba(255,255,255,1),
    909px 494px rgba(255,255,255,1),
    1132px 1981px rgba(255,255,255,1),
    819px 755px rgba(255,255,255,1),
    1255px 572px rgba(255,255,255,1),
    1013px 909px rgba(255,255,255,1),
    205px 845px rgba(255,255,255,1),
    1268px 1695px rgba(255,255,255,1),
    930px 167px rgba(255,255,255,1),
    945px 986px rgba(255,255,255,1),
    1724px 790px rgba(255,255,255,1),
    1252px 1790px rgba(255,255,255,1),
    1024px 367px rgba(255,255,255,1),
    18px 929px rgba(255,255,255,1),
    1287px 1364px rgba(255,255,255,1),
    688px 621px rgba(255,255,255,1),
    1231px 593px rgba(255,255,255,1),
    12px 711px rgba(255,255,255,1),
    1074px 583px rgba(255,255,255,1),
    951px 1659px rgba(255,255,255,1),
    1664px 826px rgba(255,255,255,1),
    119px 850px rgba(255,255,255,1),
    617px 259px rgba(255,255,255,1),
    324px 649px rgba(255,255,255,1),
    1889px 1848px rgba(255,255,255,1),
    1097px 1647px rgba(255,255,255,1),
    1766px 406px rgba(255,255,255,1),
    1097px 1976px rgba(255,255,255,1),
    408px 1765px rgba(255,255,255,1),
    1884px 1099px rgba(255,255,255,1),
    891px 901px rgba(255,255,255,1),
    1303px 1650px rgba(255,255,255,1),
    1392px 211px rgba(255,255,255,1),
    1602px 1785px rgba(255,255,255,1),
    1221px 1553px rgba(255,255,255,1),
    1349px 15px rgba(255,255,255,1),
    87px 1760px rgba(255,255,255,1),
    967px 1289px rgba(255,255,255,1),
    578px 1958px rgba(255,255,255,1),
    75px 1103px rgba(255,255,255,1),
    467px 1374px rgba(255,255,255,1),
    81px 1685px rgba(255,255,255,1),
    1460px 1518px rgba(255,255,255,1),
    646px 1219px rgba(255,255,255,1),
    192px 597px rgba(255,255,255,1),
    650px 463px rgba(255,255,255,1),
    438px 750px rgba(255,255,255,1),
    368px 1170px rgba(255,255,255,1),
    715px 733px rgba(255,255,255,1),
    652px 1230px rgba(255,255,255,1),
    1194px 1012px rgba(255,255,255,1),
    422px 410px rgba(255,255,255,1),
    1828px 77px rgba(255,255,255,1),
    600px 678px rgba(255,255,255,1),
    1053px 1757px rgba(255,255,255,1),
    1823px 708px rgba(255,255,255,1),
    1253px 168px rgba(255,255,255,1),
    692px 146px rgba(255,255,255,1),
    1586px 72px rgba(255,255,255,1),
    82px 1263px rgba(255,255,255,1),
    179px 1995px rgba(255,255,255,1),
    131px 31px rgba(255,255,255,1),
    1960px 921px rgba(255,255,255,1),
    214px 298px rgba(255,255,255,1),
    307px 1690px rgba(255,255,255,1),
    791px 55px rgba(255,255,255,1),
    1393px 1118px rgba(255,255,255,1),
    1594px 1847px rgba(255,255,255,1),
    682px 597px rgba(255,255,255,1),
    28px 1341px rgba(255,255,255,1),
    624px 169px rgba(255,255,255,1),
    1101px 1502px rgba(255,255,255,1),
    1609px 93px rgba(255,255,255,1),
    1175px 580px rgba(255,255,255,1),
    673px 467px rgba(255,255,255,1),
    1363px 1902px rgba(255,255,255,1),
    215px 681px rgba(255,255,255,1),
    1671px 884px rgba(255,255,255,1),
    1238px 590px rgba(255,255,255,1),
    1381px 1030px rgba(255,255,255,1),
    619px 599px rgba(255,255,255,1),
    76px 1565px rgba(255,255,255,1),
    859px 427px rgba(255,255,255,1),
    610px 1105px rgba(255,255,255,1),
    475px 1484px rgba(255,255,255,1),
    1455px 1680px rgba(255,255,255,1),
    1903px 767px rgba(255,255,255,1),
    671px 803px rgba(255,255,255,1),
    850px 1590px rgba(255,255,255,1),
    354px 3px rgba(255,255,255,1),
    28px 1430px rgba(255,255,255,1),
    1880px 276px rgba(255,255,255,1),
    611px 864px rgba(255,255,255,1),
    11px 410px rgba(255,255,255,1),
    1380px 1254px rgba(255,255,255,1),
    56px 1645px rgba(255,255,255,1),
    580px 1333px rgba(255,255,255,1),
    1669px 1432px rgba(255,255,255,1),
    1840px 1064px rgba(255,255,255,1),
    1865px 1099px rgba(255,255,255,1),
    33px 888px rgba(255,255,255,1),
    994px 1557px rgba(255,255,255,1),
    606px 437px rgba(255,255,255,1),
    949px 711px rgba(255,255,255,1),
    1104px 1344px rgba(255,255,255,1),
    865px 1514px rgba(255,255,255,1),
    1226px 740px rgba(255,255,255,1),
    506px 146px rgba(255,255,255,1),
    1830px 1779px rgba(255,255,255,1),
    375px 1213px rgba(255,255,255,1),
    1108px 749px rgba(255,255,255,1),
    940px 1192px rgba(255,255,255,1),
    1422px 1316px rgba(255,255,255,1),
    1471px 1435px rgba(255,255,255,1),
    101px 742px rgba(255,255,255,1),
    1944px 1619px rgba(255,255,255,1),
    54px 1192px rgba(255,255,255,1),
    683px 1619px rgba(255,255,255,1),
    189px 115px rgba(255,255,255,1),
    987px 535px rgba(255,255,255,1),
    294px 1651px rgba(255,255,255,1),
    286px 1512px rgba(255,255,255,1),
    201px 847px rgba(255,255,255,1),
    1706px 1297px rgba(255,255,255,1),
    1122px 1879px rgba(255,255,255,1),
    1354px 996px rgba(255,255,255,1),
    1121px 180px rgba(255,255,255,1),
    1327px 1107px rgba(255,255,255,1),
    1463px 919px rgba(255,255,255,1),
    866px 1691px rgba(255,255,255,1),
    436px 1532px rgba(255,255,255,1),
    1984px 865px rgba(255,255,255,1),
    911px 220px rgba(255,255,255,1),
    1300px 52px rgba(255,255,255,1),
    955px 98px rgba(255,255,255,1),
    386px 1956px rgba(255,255,255,1),
    321px 208px rgba(255,255,255,1),
    1384px 814px rgba(255,255,255,1),
    834px 1767px rgba(255,255,255,1),
    1331px 1671px rgba(255,255,255,1),
    1590px 1643px rgba(255,255,255,1),
    1262px 1518px rgba(255,255,255,1),
    1078px 1537px rgba(255,255,255,1),
    1738px 750px rgba(255,255,255,1),
    1873px 679px rgba(255,255,255,1),
    51px 336px rgba(255,255,255,1),
    969px 948px rgba(255,255,255,1),
    1984px 1166px rgba(255,255,255,1),
    1534px 1960px rgba(255,255,255,1),
    782px 1605px rgba(255,255,255,1),
    1197px 1646px rgba(255,255,255,1),
    1773px 225px rgba(255,255,255,1),
    1896px 945px rgba(255,255,255,1),
    106px 1027px rgba(255,255,255,1),
    1451px 1427px rgba(255,255,255,1),
    651px 1062px rgba(255,255,255,1),
    1166px 1405px rgba(255,255,255,1),
    1836px 1780px rgba(255,255,255,1),
    691px 887px rgba(255,255,255,1),
    277px 1651px rgba(255,255,255,1),
    61px 802px rgba(255,255,255,1),
    1928px 1655px rgba(255,255,255,1),
    1047px 586px rgba(255,255,255,1),
    399px 1540px rgba(255,255,255,1),
    674px 896px rgba(255,255,255,1),
    125px 1214px rgba(255,255,255,1),
    887px 1806px rgba(255,255,255,1),
    209px 68px rgba(255,255,255,1),
    1732px 994px rgba(255,255,255,1),
    1050px 1591px rgba(255,255,255,1),
    897px 1775px rgba(255,255,255,1),
    1805px 349px rgba(255,255,255,1),
    1030px 623px rgba(255,255,255,1),
    1974px 1532px rgba(255,255,255,1),
    205px 100px rgba(255,255,255,1),
    670px 1198px rgba(255,255,255,1),
    1068px 1926px rgba(255,255,255,1),
    382px 902px rgba(255,255,255,1),
    1088px 135px rgba(255,255,255,1),
    515px 1502px rgba(255,255,255,1),
    1526px 783px rgba(255,255,255,1),
    1628px 1905px rgba(255,255,255,1),
    777px 1281px rgba(255,255,255,1),
    1617px 1337px rgba(255,255,255,1),
    1196px 1411px rgba(255,255,255,1),
    281px 1610px rgba(255,255,255,1),
    166px 987px rgba(255,255,255,1),
    1234px 1333px rgba(255,255,255,1),
    1176px 1811px rgba(255,255,255,1),
    1876px 1436px rgba(255,255,255,1),
    1222px 1006px rgba(255,255,255,1),
    917px 1000px rgba(255,255,255,1),
    1127px 1924px rgba(255,255,255,1),
    1349px 764px rgba(255,255,255,1),
    1068px 729px rgba(255,255,255,1),
    1165px 1550px rgba(255,255,255,1),
    842px 134px rgba(255,255,255,1),
    66px 1353px rgba(255,255,255,1),
    508px 928px rgba(255,255,255,1),
    583px 1642px rgba(255,255,255,1),
    1375px 678px rgba(255,255,255,1),
    717px 1598px rgba(255,255,255,1),
    471px 168px rgba(255,255,255,1),
    338px 730px rgba(255,255,255,1),
    202px 1384px rgba(255,255,255,1),
    1552px 552px rgba(255,255,255,1),
    1981px 73px rgba(255,255,255,1),
    1000px 233px rgba(255,255,255,1),
    1566px 635px rgba(255,255,255,1),
    1814px 1270px rgba(255,255,255,1),
    847px 611px rgba(255,255,255,1),
    635px 870px rgba(255,255,255,1),
    1430px 1255px rgba(255,255,255,1),
    839px 1308px rgba(255,255,255,1),
    1651px 1098px rgba(255,255,255,1),
    1961px 1806px rgba(255,255,255,1),
    1012px 910px rgba(255,255,255,1),
    1302px 267px rgba(255,255,255,1),
    1070px 929px rgba(255,255,255,1),
    695px 1047px rgba(255,255,255,1),
    457px 1276px rgba(255,255,255,1),
    1000px 364px rgba(255,255,255,1),
    465px 447px rgba(255,255,255,1),
    1732px 1089px rgba(255,255,255,1),
    433px 1058px rgba(255,255,255,1),
    213px 856px rgba(255,255,255,1),
    130px 1282px rgba(255,255,255,1),
    1596px 1061px rgba(255,255,255,1),
    1079px 406px rgba(255,255,255,1),
    1578px 23px rgba(255,255,255,1),
    343px 1632px rgba(255,255,255,1),
    1330px 570px rgba(255,255,255,1),
    101px 1043px rgba(255,255,255,1),
    1987px 1799px rgba(255,255,255,1),
    1712px 187px rgba(255,255,255,1),
    1229px 1106px rgba(255,255,255,1),
    1845px 734px rgba(255,255,255,1),
    1126px 477px rgba(255,255,255,1),
    836px 334px rgba(255,255,255,1),
    1829px 516px rgba(255,255,255,1),
    1078px 1009px rgba(255,255,255,1),
    864px 108px rgba(255,255,255,1),
    1217px 682px rgba(255,255,255,1),
    1537px 1374px rgba(255,255,255,1),
    1405px 407px rgba(255,255,255,1),
    1165px 752px rgba(255,255,255,1),
    1337px 1444px rgba(255,255,255,1),
    1312px 1866px rgba(255,255,255,1),
    1543px 135px rgba(255,255,255,1),
    142px 533px rgba(255,255,255,1),
    434px 519px rgba(255,255,255,1),
    1701px 1167px rgba(255,255,255,1),
    1976px 1684px rgba(255,255,255,1),
    1406px 159px rgba(255,255,255,1),
    797px 948px rgba(255,255,255,1),
    199px 826px rgba(255,255,255,1),
    983px 841px rgba(255,255,255,1),
    967px 1051px rgba(255,255,255,1),
    1195px 1753px rgba(255,255,255,1),
    1017px 1862px rgba(255,255,255,1),
    920px 1355px rgba(255,255,255,1),
    674px 498px rgba(255,255,255,1),
    630px 241px rgba(255,255,255,1),
    362px 1202px rgba(255,255,255,1),
    660px 1843px rgba(255,255,255,1),
    1391px 1486px rgba(255,255,255,1),
    1590px 472px rgba(255,255,255,1),
    494px 847px rgba(255,255,255,1),
    772px 1442px rgba(255,255,255,1),
    355px 1200px rgba(255,255,255,1),
    1513px 918px rgba(255,255,255,1),
    610px 315px rgba(255,255,255,1),
    1729px 1681px rgba(255,255,255,1),
    1715px 1975px rgba(255,255,255,1),
    1646px 566px rgba(255,255,255,1),
    1118px 1796px rgba(255,255,255,1),
    834px 1112px rgba(255,255,255,1),
    1080px 1611px rgba(255,255,255,1),
    1492px 1249px rgba(255,255,255,1),
    1263px 1562px rgba(255,255,255,1),
    699px 1412px rgba(255,255,255,1),
    56px 775px rgba(255,255,255,1),
    595px 108px rgba(255,255,255,1),
    1331px 1578px rgba(255,255,255,1),
    1893px 1742px rgba(255,255,255,1),
    1000px 30px rgba(255,255,255,1),
    1156px 1476px rgba(255,255,255,1),
    932px 728px rgba(255,255,255,1),
    673px 165px rgba(255,255,255,1),
    857px 71px rgba(255,255,255,1),
    770px 736px rgba(255,255,255,1),
    841px 1246px rgba(255,255,255,1),
    286px 1457px rgba(255,255,255,1),
    716px 1579px rgba(255,255,255,1),
    710px 152px rgba(255,255,255,1),
    75px 387px rgba(255,255,255,1),
    1047px 655px rgba(255,255,255,1),
    904px 316px rgba(255,255,255,1),
    765px 1309px rgba(255,255,255,1),
    1334px 372px rgba(255,255,255,1),
    449px 1256px rgba(255,255,255,1),
    488px 1269px rgba(255,255,255,1),
    1142px 192px rgba(255,255,255,1),
    1263px 540px rgba(255,255,255,1),
    872px 1375px rgba(255,255,255,1),
    167px 1224px rgba(255,255,255,1),
    1603px 1806px rgba(255,255,255,1),
    1808px 915px rgba(255,255,255,1),
    885px 444px rgba(255,255,255,1),
    907px 1218px rgba(255,255,255,1),
    1686px 1550px rgba(255,255,255,1),
    1868px 1571px rgba(255,255,255,1),
    1342px 1573px rgba(255,255,255,1),
    782px 1109px rgba(255,255,255,1),
    1130px 953px rgba(255,255,255,1),
    443px 1872px rgba(255,255,255,1),
    1947px 936px rgba(255,255,255,1),
    1822px 731px rgba(255,255,255,1),
    1213px 1417px rgba(255,255,255,1),
    511px 1878px rgba(255,255,255,1),
    1261px 1568px rgba(255,255,255,1),
    1119px 874px rgba(255,255,255,1),
    255px 1365px rgba(255,255,255,1),
    1070px 785px rgba(255,255,255,1),
    1487px 672px rgba(255,255,255,1),
    1996px 1743px rgba(255,255,255,1),
    137px 1879px rgba(255,255,255,1),
    44px 197px rgba(255,255,255,1),
    1538px 1179px rgba(255,255,255,1),
    1237px 713px rgba(255,255,255,1),
    1993px 1453px rgba(255,255,255,1),
    1774px 377px rgba(255,255,255,1),
    1965px 161px rgba(255,255,255,1),
    1454px 1130px rgba(255,255,255,1),
    619px 739px rgba(255,255,255,1),
    1857px 880px rgba(255,255,255,1),
    914px 2px rgba(255,255,255,1),
    886px 648px rgba(255,255,255,1),
    1871px 523px rgba(255,255,255,1),
    1464px 624px rgba(255,255,255,1),
    12px 1780px rgba(255,255,255,1),
    1958px 499px rgba(255,255,255,1),
    1739px 406px rgba(255,255,255,1),
    1357px 1836px rgba(255,255,255,1),
    508px 1539px rgba(255,255,255,1),
    86px 1409px rgba(255,255,255,1),
    606px 1199px rgba(255,255,255,1),
    1509px 692px rgba(255,255,255,1),
    1968px 153px rgba(255,255,255,1),
    1091px 1179px rgba(255,255,255,1),
    252px 1044px rgba(255,255,255,1),
    664px 35px rgba(255,255,255,1),
    974px 780px rgba(255,255,255,1),
    954px 1844px rgba(255,255,255,1),
    1786px 1053px rgba(255,255,255,1),
    1023px 895px rgba(255,255,255,1),
    1772px 921px rgba(255,255,255,1),
    420px 497px rgba(255,255,255,1),
    55px 1207px rgba(255,255,255,1),
    808px 1495px rgba(255,255,255,1),
    1561px 772px rgba(255,255,255,1),
    1498px 492px rgba(255,255,255,1),
    70px 517px rgba(255,255,255,1),
    950px 1066px rgba(255,255,255,1),
    1608px 1209px rgba(255,255,255,1),
    633px 720px rgba(255,255,255,1),
    1639px 441px rgba(255,255,255,1),
    1423px 1513px rgba(255,255,255,1),
    375px 1927px rgba(255,255,255,1),
    1275px 1494px rgba(255,255,255,1),
    1796px 1980px rgba(255,255,255,1),
    201px 153px rgba(255,255,255,1),
    1029px 181px rgba(255,255,255,1),
    683px 1610px rgba(255,255,255,1),
    941px 132px rgba(255,255,255,1),
    827px 91px rgba(255,255,255,1),
    783px 307px rgba(255,255,255,1),
    1397px 1618px rgba(255,255,255,1),
    777px 379px rgba(255,255,255,1),
    465px 560px rgba(255,255,255,1),
    819px 733px rgba(255,255,255,1),
    909px 1278px rgba(255,255,255,1),
    1198px 847px rgba(255,255,255,1),
    124px 1363px rgba(255,255,255,1),
    154px 1012px rgba(255,255,255,1),
    994px 1771px rgba(255,255,255,1),
    1675px 85px rgba(255,255,255,1),
    1982px 964px rgba(255,255,255,1),
    1368px 1792px rgba(255,255,255,1),
    1771px 762px rgba(255,255,255,1),
    671px 1464px rgba(255,255,255,1),
    34px 1345px rgba(255,255,255,1),
    422px 1291px rgba(255,255,255,1),
    129px 138px rgba(255,255,255,1),
    1371px 1578px rgba(255,255,255,1),
    1265px 1969px rgba(255,255,255,1),
    989px 382px rgba(255,255,255,1),
    246px 1061px rgba(255,255,255,1),
    704px 414px rgba(255,255,255,1),
    396px 1776px rgba(255,255,255,1),
    549px 218px rgba(255,255,255,1),
    1862px 328px rgba(255,255,255,1),
    1608px 842px rgba(255,255,255,1),
    873px 1460px rgba(255,255,255,1),
    346px 212px rgba(255,255,255,1),
    365px 1973px rgba(255,255,255,1),
    1238px 1307px rgba(255,255,255,1),
    1779px 1020px rgba(255,255,255,1),
    1093px 1506px rgba(255,255,255,1),
    1252px 540px rgba(255,255,255,1),
    1150px 1257px rgba(255,255,255,1),
    1401px 1873px rgba(255,255,255,1),
    848px 311px rgba(255,255,255,1),
    200px 22px rgba(255,255,255,1),
    350px 950px rgba(255,255,255,1),
    491px 908px rgba(255,255,255,1),
    180px 1044px rgba(255,255,255,1),
    1775px 1231px rgba(255,255,255,1),
    1317px 421px rgba(255,255,255,1),
    193px 1327px rgba(255,255,255,1),
    454px 1276px rgba(255,255,255,1),
    1129px 1558px rgba(255,255,255,1),
    952px 512px rgba(255,255,255,1),
    1789px 1476px rgba(255,255,255,1),
    1392px 977px rgba(255,255,255,1),
    385px 1983px rgba(255,255,255,1),
    541px 1599px rgba(255,255,255,1),
    1208px 759px rgba(255,255,255,1),
    1979px 1320px rgba(255,255,255,1),
    1106px 449px rgba(255,255,255,1),
    1197px 1895px rgba(255,255,255,1),
    179px 435px rgba(255,255,255,1),
    585px 599px rgba(255,255,255,1),
    1313px 1231px rgba(255,255,255,1),
    1499px 1094px rgba(255,255,255,1),
    964px 915px rgba(255,255,255,1),
    1642px 1196px rgba(255,255,255,1),
    1083px 1568px rgba(255,255,255,1),
    719px 84px rgba(255,255,255,1),
    1928px 811px rgba(255,255,255,1),
    699px 403px rgba(255,255,255,1),
    1798px 1812px rgba(255,255,255,1),
    219px 1772px rgba(255,255,255,1),
    186px 632px rgba(255,255,255,1),
    859px 1998px rgba(255,255,255,1),
    321px 1482px rgba(255,255,255,1),
    398px 336px rgba(255,255,255,1),
    1692px 1436px rgba(255,255,255,1),
    614px 789px rgba(255,255,255,1),
    107px 423px rgba(255,255,255,1),
    834px 43px rgba(255,255,255,1),
    315px 999px rgba(255,255,255,1),
    1148px 1802px rgba(255,255,255,1),
    963px 1548px rgba(255,255,255,1),
    945px 1653px rgba(255,255,255,1),
    590px 1222px rgba(255,255,255,1),
    38px 1542px rgba(255,255,255,1),
    156px 1889px rgba(255,255,255,1),
    1685px 1651px rgba(255,255,255,1),
    51px 943px rgba(255,255,255,1),
    1866px 1921px rgba(255,255,255,1),
    1338px 246px rgba(255,255,255,1),
    468px 1426px rgba(255,255,255,1),
    1421px 14px rgba(255,255,255,1),
    39px 108px rgba(255,255,255,1),
    583px 889px rgba(255,255,255,1),
    1800px 1492px rgba(255,255,255,1),
    813px 289px rgba(255,255,255,1),
    670px 644px rgba(255,255,255,1),
    245px 284px rgba(255,255,255,1),
    1774px 1202px rgba(255,255,255,1),
    359px 1529px rgba(255,255,255,1),
    1463px 1039px rgba(255,255,255,1),
    108px 444px rgba(255,255,255,1),
    569px 1722px rgba(255,255,255,1),
    632px 111px rgba(255,255,255,1),
    390px 1157px rgba(255,255,255,1),
    1114px 251px rgba(255,255,255,1),
    1919px 1200px rgba(255,255,255,1),
    1126px 211px rgba(255,255,255,1),
    1146px 15px rgba(255,255,255,1),
    1309px 134px rgba(255,255,255,1),
    707px 1781px rgba(255,255,255,1),
    1583px 194px rgba(255,255,255,1),
    1570px 599px rgba(255,255,255,1),
    1375px 1217px rgba(255,255,255,1),
    1421px 1919px rgba(255,255,255,1),
    1052px 534px rgba(255,255,255,1),
    383px 39px rgba(255,255,255,1),
    888px 1520px rgba(255,255,255,1),
    1217px 1241px rgba(255,255,255,1),
    80px 913px rgba(255,255,255,1),
    355px 1765px rgba(255,255,255,1),
    773px 865px rgba(255,255,255,1),
    1978px 1864px rgba(255,255,255,1),
    1871px 1978px rgba(255,255,255,1),
    819px 1402px rgba(255,255,255,1),
    1970px 1657px rgba(255,255,255,1),
    1137px 809px rgba(255,255,255,1),
    1825px 1661px rgba(255,255,255,1),
    1575px 454px rgba(255,255,255,1),
    728px 576px rgba(255,255,255,1),
    722px 1727px rgba(255,255,255,1),
    78px 1040px rgba(255,255,255,1),
    607px 1845px rgba(255,255,255,1),
    162px 492px rgba(255,255,255,1),
    1003px 1822px rgba(255,255,255,1),
    1876px 216px rgba(255,255,255,1),
    1200px 1919px rgba(255,255,255,1),
    146px 391px rgba(255,255,255,1),
    1352px 1896px rgba(255,255,255,1),
    245px 701px rgba(255,255,255,1),
    1746px 1583px rgba(255,255,255,1),
    1792px 525px rgba(255,255,255,1),
    1168px 1242px rgba(255,255,255,1),
    1195px 1014px rgba(255,255,255,1),
    794px 508px rgba(255,255,255,1),
    1480px 1657px rgba(255,255,255,1),
    1864px 141px rgba(255,255,255,1),
    1692px 1638px rgba(255,255,255,1),
    750px 1582px rgba(255,255,255,1),
    1026px 1860px rgba(255,255,255,1),
    1649px 1180px rgba(255,255,255,1),
    1778px 1945px rgba(255,255,255,1),
    1347px 1967px rgba(255,255,255,1),
    1027px 1881px rgba(255,255,255,1),
    392px 1151px rgba(255,255,255,1),
    1375px 1160px rgba(255,255,255,1),
    1369px 591px rgba(255,255,255,1),
    966px 654px rgba(255,255,255,1),
    1908px 1863px rgba(255,255,255,1),
    742px 1810px rgba(255,255,255,1),
    760px 1640px rgba(255,255,255,1),
    225px 928px rgba(255,255,255,1),
    1001px 1146px rgba(255,255,255,1),
    1193px 115px rgba(255,255,255,1),
    1779px 368px rgba(255,255,255,1),
    1447px 409px rgba(255,255,255,1),
    742px 70px rgba(255,255,255,1),
    1693px 1096px rgba(255,255,255,1),
    393px 1640px rgba(255,255,255,1),
    1394px 1732px rgba(255,255,255,1),
    1572px 69px rgba(255,255,255,1),
    725px 173px rgba(255,255,255,1),
    265px 1732px rgba(255,255,255,1),
    960px 662px rgba(255,255,255,1),
    1540px 325px rgba(255,255,255,1),
    986px 614px rgba(255,255,255,1),
    1397px 615px rgba(255,255,255,1),
    616px 22px rgba(255,255,255,1),
    549px 1884px rgba(255,255,255,1),
    1936px 1033px rgba(255,255,255,1),
    1766px 942px rgba(255,255,255,1),
    763px 1000px rgba(255,255,255,1),
    1349px 884px rgba(255,255,255,1),
    880px 221px rgba(255,255,255,1),
    425px 250px rgba(255,255,255,1),
    1591px 1510px rgba(255,255,255,1),
    688px 817px rgba(255,255,255,1),
    1986px 657px rgba(255,255,255,1),
    1229px 105px rgba(255,255,255,1),
    1516px 1920px rgba(255,255,255,1),
    665px 1749px rgba(255,255,255,1),
    1888px 752px rgba(255,255,255,1),
    348px 1660px rgba(255,255,255,1),
    1570px 1612px rgba(255,255,255,1),
    480px 561px rgba(255,255,255,1),
    1702px 491px rgba(255,255,255,1),
    519px 569px rgba(255,255,255,1),
    823px 847px rgba(255,255,255,1),
    1270px 1142px rgba(255,255,255,1),
    372px 1307px rgba(255,255,255,1),
    1165px 911px rgba(255,255,255,1),
    1994px 43px rgba(255,255,255,1),
    851px 896px rgba(255,255,255,1),
    67px 606px rgba(255,255,255,1),
    1909px 433px rgba(255,255,255,1),
    1289px 728px rgba(255,255,255,1),
    1571px 682px rgba(255,255,255,1),
    1556px 1135px rgba(255,255,255,1),
    1013px 1074px rgba(255,255,255,1),
    555px 1883px rgba(255,255,255,1),
    1988px 1913px rgba(255,255,255,1),
    1311px 404px rgba(255,255,255,1),
    928px 1159px rgba(255,255,255,1),
    990px 364px rgba(255,255,255,1),
    1512px 1593px rgba(255,255,255,1),
    1328px 383px rgba(255,255,255,1),
    1411px 496px rgba(255,255,255,1),
    1218px 995px rgba(255,255,255,1),
    1325px 1403px rgba(255,255,255,1),
    1356px 1805px rgba(255,255,255,1),
    278px 1068px rgba(255,255,255,1),
    1447px 291px rgba(255,255,255,1),
    1719px 1077px rgba(255,255,255,1),
    280px 799px rgba(255,255,255,1),
    502px 392px rgba(255,255,255,1),
    1592px 1686px rgba(255,255,255,1),
    59px 309px rgba(255,255,255,1),
    1773px 1739px rgba(255,255,255,1),
    1933px 5px rgba(255,255,255,1),
    32px 1075px rgba(255,255,255,1),
    882px 1717px rgba(255,255,255,1),
    752px 813px rgba(255,255,255,1),
    1989px 1237px rgba(255,255,255,1),
    751px 1468px rgba(255,255,255,1),
    1140px 761px rgba(255,255,255,1),
    1441px 1415px rgba(255,255,255,1),
    1092px 1621px rgba(255,255,255,1),
    1481px 1204px rgba(255,255,255,1),
    1748px 1090px rgba(255,255,255,1),
    1129px 514px rgba(255,255,255,1),
    205px 1039px rgba(255,255,255,1),
    1449px 831px rgba(255,255,255,1),
    438px 353px rgba(255,255,255,1),
    192px 302px rgba(255,255,255,1),
    118px 719px rgba(255,255,255,1),
    865px 552px rgba(255,255,255,1),
    1173px 877px rgba(255,255,255,1),
    204px 462px rgba(255,255,255,1),
    414px 384px rgba(255,255,255,1),
    361px 1842px rgba(255,255,255,1),
    586px 695px rgba(255,255,255,1),
    335px 1874px rgba(255,255,255,1),
    1719px 1947px rgba(255,255,255,1),
    1392px 1683px rgba(255,255,255,1),
    348px 1647px rgba(255,255,255,1),
    235px 1804px rgba(255,255,255,1),
    1254px 75px rgba(255,255,255,1),
    716px 1348px rgba(255,255,255,1),
    1757px 402px rgba(255,255,255,1),
    841px 919px rgba(255,255,255,1),
    148px 28px rgba(255,255,255,1),
    1393px 1136px rgba(255,255,255,1),
    1508px 1631px rgba(255,255,255,1),
    1779px 235px rgba(255,255,255,1),
    869px 1843px rgba(255,255,255,1),
    584px 371px rgba(255,255,255,1),
    1309px 335px rgba(255,255,255,1),
    68px 1824px rgba(255,255,255,1),
    248px 890px rgba(255,255,255,1),
    715px 916px rgba(255,255,255,1),
    1876px 572px rgba(255,255,255,1),
    1912px 39px rgba(255,255,255,1),
    1471px 1563px rgba(255,255,255,1),
    823px 386px rgba(255,255,255,1),
    1361px 1256px rgba(255,255,255,1),
    1586px 345px rgba(255,255,255,1),
    373px 343px rgba(255,255,255,1),
    469px 377px rgba(255,255,255,1),
    815px 918px rgba(255,255,255,1),
    1151px 1148px rgba(255,255,255,1),
    180px 1600px rgba(255,255,255,1),
    1081px 1314px rgba(255,255,255,1),
    1583px 1984px rgba(255,255,255,1),
    1338px 1071px rgba(255,255,255,1),
    476px 1585px rgba(255,255,255,1),
    314px 1021px rgba(255,255,255,1),
    531px 1231px rgba(255,255,255,1),
    1587px 588px rgba(255,255,255,1),
    1643px 1534px rgba(255,255,255,1),
    505px 1844px rgba(255,255,255,1),
    1898px 1646px rgba(255,255,255,1),
    1804px 470px rgba(255,255,255,1),
    1019px 339px rgba(255,255,255,1),
    1963px 1869px rgba(255,255,255,1),
    318px 113px rgba(255,255,255,1),
    1880px 373px rgba(255,255,255,1),
    960px 1627px rgba(255,255,255,1),
    1345px 282px rgba(255,255,255,1),
    154px 749px rgba(255,255,255,1),
    1042px 1927px rgba(255,255,255,1),
    1811px 670px rgba(255,255,255,1),
    548px 1452px rgba(255,255,255,1),
    748px 518px rgba(255,255,255,1),
    1461px 1205px rgba(255,255,255,1),
    805px 1723px rgba(255,255,255,1),
    986px 1796px rgba(255,255,255,1),
    1435px 1245px rgba(255,255,255,1),
    1513px 887px rgba(255,255,255,1);
}

.sterne-mittel{
  width:3px;height:3px;
  animation:sterne-zug 100s linear infinite;
  box-shadow:
    1052px 1848px rgba(255,255,255,.92),
    1634px 451px rgba(255,255,255,.92),
    1539px 1251px rgba(255,255,255,.92),
    174px 430px rgba(255,255,255,.92),
    1558px 1164px rgba(255,255,255,.92),
    273px 1103px rgba(255,255,255,.92),
    1699px 717px rgba(255,255,255,.92),
    1260px 1149px rgba(255,255,255,.92),
    134px 1467px rgba(255,255,255,.92),
    1619px 1704px rgba(255,255,255,.92),
    1954px 1264px rgba(255,255,255,.92),
    1561px 1631px rgba(255,255,255,.92),
    175px 431px rgba(255,255,255,.92),
    566px 1663px rgba(255,255,255,.92),
    244px 463px rgba(255,255,255,.92),
    61px 1977px rgba(255,255,255,.92),
    1732px 1211px rgba(255,255,255,.92),
    992px 1750px rgba(255,255,255,.92),
    37px 1936px rgba(255,255,255,.92),
    1887px 862px rgba(255,255,255,.92),
    1485px 1931px rgba(255,255,255,.92),
    293px 1199px rgba(255,255,255,.92),
    447px 1036px rgba(255,255,255,.92),
    1804px 1988px rgba(255,255,255,.92),
    494px 940px rgba(255,255,255,.92),
    123px 372px rgba(255,255,255,.92),
    1886px 1813px rgba(255,255,255,.92),
    1727px 538px rgba(255,255,255,.92),
    1653px 1341px rgba(255,255,255,.92),
    1023px 148px rgba(255,255,255,.92),
    1113px 250px rgba(255,255,255,.92),
    1108px 1409px rgba(255,255,255,.92),
    152px 375px rgba(255,255,255,.92),
    1782px 1px rgba(255,255,255,.92),
    1209px 1021px rgba(255,255,255,.92),
    777px 1295px rgba(255,255,255,.92),
    1607px 27px rgba(255,255,255,.92),
    138px 1521px rgba(255,255,255,.92),
    1005px 1240px rgba(255,255,255,.92),
    465px 1415px rgba(255,255,255,.92),
    519px 459px rgba(255,255,255,.92),
    971px 886px rgba(255,255,255,.92),
    796px 1659px rgba(255,255,255,.92),
    1260px 181px rgba(255,255,255,.92),
    377px 716px rgba(255,255,255,.92),
    529px 383px rgba(255,255,255,.92),
    1062px 942px rgba(255,255,255,.92),
    703px 1960px rgba(255,255,255,.92),
    682px 1450px rgba(255,255,255,.92),
    914px 1884px rgba(255,255,255,.92),
    64px 11px rgba(255,255,255,.92),
    302px 1889px rgba(255,255,255,.92),
    840px 1085px rgba(255,255,255,.92),
    899px 1845px rgba(255,255,255,.92),
    1172px 220px rgba(255,255,255,.92),
    624px 1796px rgba(255,255,255,.92),
    1166px 1231px rgba(255,255,255,.92),
    847px 1956px rgba(255,255,255,.92),
    1835px 572px rgba(255,255,255,.92),
    179px 1489px rgba(255,255,255,.92),
    1676px 994px rgba(255,255,255,.92),
    1933px 1638px rgba(255,255,255,.92),
    314px 431px rgba(255,255,255,.92),
    599px 1762px rgba(255,255,255,.92),
    359px 321px rgba(255,255,255,.92),
    327px 593px rgba(255,255,255,.92),
    484px 1820px rgba(255,255,255,.92),
    92px 1602px rgba(255,255,255,.92),
    419px 974px rgba(255,255,255,.92),
    732px 913px rgba(255,255,255,.92),
    1517px 273px rgba(255,255,255,.92),
    1828px 1415px rgba(255,255,255,.92),
    1020px 444px rgba(255,255,255,.92),
    1913px 1240px rgba(255,255,255,.92),
    610px 118px rgba(255,255,255,.92),
    12px 233px rgba(255,255,255,.92),
    832px 1232px rgba(255,255,255,.92),
    518px 1008px rgba(255,255,255,.92),
    1509px 1718px rgba(255,255,255,.92),
    247px 1759px rgba(255,255,255,.92),
    407px 185px rgba(255,255,255,.92),
    453px 715px rgba(255,255,255,.92),
    1739px 723px rgba(255,255,255,.92),
    824px 1259px rgba(255,255,255,.92),
    598px 1561px rgba(255,255,255,.92),
    659px 677px rgba(255,255,255,.92),
    1652px 210px rgba(255,255,255,.92),
    971px 1136px rgba(255,255,255,.92),
    1012px 910px rgba(255,255,255,.92),
    1859px 655px rgba(255,255,255,.92),
    722px 44px rgba(255,255,255,.92),
    1295px 218px rgba(255,255,255,.92),
    777px 43px rgba(255,255,255,.92),
    1712px 584px rgba(255,255,255,.92),
    1051px 1515px rgba(255,255,255,.92),
    1975px 563px rgba(255,255,255,.92),
    937px 1160px rgba(255,255,255,.92),
    354px 570px rgba(255,255,255,.92),
    2px 242px rgba(255,255,255,.92),
    1089px 610px rgba(255,255,255,.92),
    74px 1828px rgba(255,255,255,.92),
    910px 859px rgba(255,255,255,.92),
    1906px 31px rgba(255,255,255,.92),
    149px 713px rgba(255,255,255,.92),
    1969px 1556px rgba(255,255,255,.92),
    949px 1719px rgba(255,255,255,.92),
    932px 1497px rgba(255,255,255,.92),
    447px 1744px rgba(255,255,255,.92),
    1305px 1501px rgba(255,255,255,.92),
    1273px 531px rgba(255,255,255,.92),
    985px 1750px rgba(255,255,255,.92),
    385px 1435px rgba(255,255,255,.92),
    1064px 870px rgba(255,255,255,.92),
    1251px 1761px rgba(255,255,255,.92),
    665px 618px rgba(255,255,255,.92),
    1045px 350px rgba(255,255,255,.92),
    1692px 263px rgba(255,255,255,.92),
    1542px 1364px rgba(255,255,255,.92),
    1240px 1438px rgba(255,255,255,.92),
    941px 1847px rgba(255,255,255,.92),
    1483px 1965px rgba(255,255,255,.92),
    1994px 887px rgba(255,255,255,.92),
    1532px 1474px rgba(255,255,255,.92),
    1408px 1257px rgba(255,255,255,.92),
    1986px 1321px rgba(255,255,255,.92),
    235px 1711px rgba(255,255,255,.92),
    1849px 1913px rgba(255,255,255,.92),
    772px 1955px rgba(255,255,255,.92),
    1085px 1417px rgba(255,255,255,.92),
    1462px 1334px rgba(255,255,255,.92),
    1344px 1534px rgba(255,255,255,.92),
    1340px 695px rgba(255,255,255,.92),
    1916px 1824px rgba(255,255,255,.92),
    25px 798px rgba(255,255,255,.92),
    933px 184px rgba(255,255,255,.92),
    957px 1249px rgba(255,255,255,.92),
    536px 492px rgba(255,255,255,.92),
    224px 1193px rgba(255,255,255,.92),
    1885px 1696px rgba(255,255,255,.92),
    877px 5px rgba(255,255,255,.92),
    1691px 169px rgba(255,255,255,.92),
    328px 997px rgba(255,255,255,.92),
    1381px 53px rgba(255,255,255,.92),
    1537px 1159px rgba(255,255,255,.92),
    706px 1940px rgba(255,255,255,.92),
    1317px 1805px rgba(255,255,255,.92),
    579px 781px rgba(255,255,255,.92),
    1312px 1849px rgba(255,255,255,.92),
    1191px 1819px rgba(255,255,255,.92),
    1711px 485px rgba(255,255,255,.92),
    642px 264px rgba(255,255,255,.92),
    1176px 471px rgba(255,255,255,.92),
    62px 999px rgba(255,255,255,.92),
    1942px 39px rgba(255,255,255,.92),
    527px 556px rgba(255,255,255,.92),
    807px 1272px rgba(255,255,255,.92),
    1639px 1349px rgba(255,255,255,.92),
    245px 905px rgba(255,255,255,.92),
    577px 326px rgba(255,255,255,.92),
    1320px 452px rgba(255,255,255,.92),
    720px 1555px rgba(255,255,255,.92),
    1242px 1831px rgba(255,255,255,.92),
    902px 193px rgba(255,255,255,.92),
    437px 1475px rgba(255,255,255,.92),
    1158px 1674px rgba(255,255,255,.92),
    509px 1351px rgba(255,255,255,.92),
    633px 982px rgba(255,255,255,.92),
    1540px 1238px rgba(255,255,255,.92),
    1505px 982px rgba(255,255,255,.92),
    877px 1018px rgba(255,255,255,.92),
    989px 1528px rgba(255,255,255,.92),
    639px 87px rgba(255,255,255,.92),
    1689px 376px rgba(255,255,255,.92),
    752px 1026px rgba(255,255,255,.92),
    1329px 728px rgba(255,255,255,.92),
    754px 1957px rgba(255,255,255,.92),
    96px 852px rgba(255,255,255,.92),
    1585px 1512px rgba(255,255,255,.92),
    235px 1182px rgba(255,255,255,.92),
    18px 1374px rgba(255,255,255,.92),
    326px 475px rgba(255,255,255,.92),
    1306px 456px rgba(255,255,255,.92),
    1393px 1633px rgba(255,255,255,.92),
    798px 992px rgba(255,255,255,.92),
    1798px 134px rgba(255,255,255,.92),
    105px 357px rgba(255,255,255,.92),
    1836px 693px rgba(255,255,255,.92),
    818px 225px rgba(255,255,255,.92),
    266px 600px rgba(255,255,255,.92),
    298px 119px rgba(255,255,255,.92),
    676px 688px rgba(255,255,255,.92),
    1916px 16px rgba(255,255,255,.92),
    1592px 656px rgba(255,255,255,.92),
    7px 340px rgba(255,255,255,.92),
    1268px 1786px rgba(255,255,255,.92),
    26px 1014px rgba(255,255,255,.92),
    1489px 1883px rgba(255,255,255,.92),
    1465px 3px rgba(255,255,255,.92),
    1677px 1353px rgba(255,255,255,.92),
    1706px 1361px rgba(255,255,255,.92);
}
.sterne-mittel::after{
  width:2px;height:2px;
  box-shadow:
    1052px 1848px rgba(255,255,255,.92),
    1634px 451px rgba(255,255,255,.92),
    1539px 1251px rgba(255,255,255,.92),
    174px 430px rgba(255,255,255,.92),
    1558px 1164px rgba(255,255,255,.92),
    273px 1103px rgba(255,255,255,.92),
    1699px 717px rgba(255,255,255,.92),
    1260px 1149px rgba(255,255,255,.92),
    134px 1467px rgba(255,255,255,.92),
    1619px 1704px rgba(255,255,255,.92),
    1954px 1264px rgba(255,255,255,.92),
    1561px 1631px rgba(255,255,255,.92),
    175px 431px rgba(255,255,255,.92),
    566px 1663px rgba(255,255,255,.92),
    244px 463px rgba(255,255,255,.92),
    61px 1977px rgba(255,255,255,.92),
    1732px 1211px rgba(255,255,255,.92),
    992px 1750px rgba(255,255,255,.92),
    37px 1936px rgba(255,255,255,.92),
    1887px 862px rgba(255,255,255,.92),
    1485px 1931px rgba(255,255,255,.92),
    293px 1199px rgba(255,255,255,.92),
    447px 1036px rgba(255,255,255,.92),
    1804px 1988px rgba(255,255,255,.92),
    494px 940px rgba(255,255,255,.92),
    123px 372px rgba(255,255,255,.92),
    1886px 1813px rgba(255,255,255,.92),
    1727px 538px rgba(255,255,255,.92),
    1653px 1341px rgba(255,255,255,.92),
    1023px 148px rgba(255,255,255,.92),
    1113px 250px rgba(255,255,255,.92),
    1108px 1409px rgba(255,255,255,.92),
    152px 375px rgba(255,255,255,.92),
    1782px 1px rgba(255,255,255,.92),
    1209px 1021px rgba(255,255,255,.92),
    777px 1295px rgba(255,255,255,.92),
    1607px 27px rgba(255,255,255,.92),
    138px 1521px rgba(255,255,255,.92),
    1005px 1240px rgba(255,255,255,.92),
    465px 1415px rgba(255,255,255,.92),
    519px 459px rgba(255,255,255,.92),
    971px 886px rgba(255,255,255,.92),
    796px 1659px rgba(255,255,255,.92),
    1260px 181px rgba(255,255,255,.92),
    377px 716px rgba(255,255,255,.92),
    529px 383px rgba(255,255,255,.92),
    1062px 942px rgba(255,255,255,.92),
    703px 1960px rgba(255,255,255,.92),
    682px 1450px rgba(255,255,255,.92),
    914px 1884px rgba(255,255,255,.92),
    64px 11px rgba(255,255,255,.92),
    302px 1889px rgba(255,255,255,.92),
    840px 1085px rgba(255,255,255,.92),
    899px 1845px rgba(255,255,255,.92),
    1172px 220px rgba(255,255,255,.92),
    624px 1796px rgba(255,255,255,.92),
    1166px 1231px rgba(255,255,255,.92),
    847px 1956px rgba(255,255,255,.92),
    1835px 572px rgba(255,255,255,.92),
    179px 1489px rgba(255,255,255,.92),
    1676px 994px rgba(255,255,255,.92),
    1933px 1638px rgba(255,255,255,.92),
    314px 431px rgba(255,255,255,.92),
    599px 1762px rgba(255,255,255,.92),
    359px 321px rgba(255,255,255,.92),
    327px 593px rgba(255,255,255,.92),
    484px 1820px rgba(255,255,255,.92),
    92px 1602px rgba(255,255,255,.92),
    419px 974px rgba(255,255,255,.92),
    732px 913px rgba(255,255,255,.92),
    1517px 273px rgba(255,255,255,.92),
    1828px 1415px rgba(255,255,255,.92),
    1020px 444px rgba(255,255,255,.92),
    1913px 1240px rgba(255,255,255,.92),
    610px 118px rgba(255,255,255,.92),
    12px 233px rgba(255,255,255,.92),
    832px 1232px rgba(255,255,255,.92),
    518px 1008px rgba(255,255,255,.92),
    1509px 1718px rgba(255,255,255,.92),
    247px 1759px rgba(255,255,255,.92),
    407px 185px rgba(255,255,255,.92),
    453px 715px rgba(255,255,255,.92),
    1739px 723px rgba(255,255,255,.92),
    824px 1259px rgba(255,255,255,.92),
    598px 1561px rgba(255,255,255,.92),
    659px 677px rgba(255,255,255,.92),
    1652px 210px rgba(255,255,255,.92),
    971px 1136px rgba(255,255,255,.92),
    1012px 910px rgba(255,255,255,.92),
    1859px 655px rgba(255,255,255,.92),
    722px 44px rgba(255,255,255,.92),
    1295px 218px rgba(255,255,255,.92),
    777px 43px rgba(255,255,255,.92),
    1712px 584px rgba(255,255,255,.92),
    1051px 1515px rgba(255,255,255,.92),
    1975px 563px rgba(255,255,255,.92),
    937px 1160px rgba(255,255,255,.92),
    354px 570px rgba(255,255,255,.92),
    2px 242px rgba(255,255,255,.92),
    1089px 610px rgba(255,255,255,.92),
    74px 1828px rgba(255,255,255,.92),
    910px 859px rgba(255,255,255,.92),
    1906px 31px rgba(255,255,255,.92),
    149px 713px rgba(255,255,255,.92),
    1969px 1556px rgba(255,255,255,.92),
    949px 1719px rgba(255,255,255,.92),
    932px 1497px rgba(255,255,255,.92),
    447px 1744px rgba(255,255,255,.92),
    1305px 1501px rgba(255,255,255,.92),
    1273px 531px rgba(255,255,255,.92),
    985px 1750px rgba(255,255,255,.92),
    385px 1435px rgba(255,255,255,.92),
    1064px 870px rgba(255,255,255,.92),
    1251px 1761px rgba(255,255,255,.92),
    665px 618px rgba(255,255,255,.92),
    1045px 350px rgba(255,255,255,.92),
    1692px 263px rgba(255,255,255,.92),
    1542px 1364px rgba(255,255,255,.92),
    1240px 1438px rgba(255,255,255,.92),
    941px 1847px rgba(255,255,255,.92),
    1483px 1965px rgba(255,255,255,.92),
    1994px 887px rgba(255,255,255,.92),
    1532px 1474px rgba(255,255,255,.92),
    1408px 1257px rgba(255,255,255,.92),
    1986px 1321px rgba(255,255,255,.92),
    235px 1711px rgba(255,255,255,.92),
    1849px 1913px rgba(255,255,255,.92),
    772px 1955px rgba(255,255,255,.92),
    1085px 1417px rgba(255,255,255,.92),
    1462px 1334px rgba(255,255,255,.92),
    1344px 1534px rgba(255,255,255,.92),
    1340px 695px rgba(255,255,255,.92),
    1916px 1824px rgba(255,255,255,.92),
    25px 798px rgba(255,255,255,.92),
    933px 184px rgba(255,255,255,.92),
    957px 1249px rgba(255,255,255,.92),
    536px 492px rgba(255,255,255,.92),
    224px 1193px rgba(255,255,255,.92),
    1885px 1696px rgba(255,255,255,.92),
    877px 5px rgba(255,255,255,.92),
    1691px 169px rgba(255,255,255,.92),
    328px 997px rgba(255,255,255,.92),
    1381px 53px rgba(255,255,255,.92),
    1537px 1159px rgba(255,255,255,.92),
    706px 1940px rgba(255,255,255,.92),
    1317px 1805px rgba(255,255,255,.92),
    579px 781px rgba(255,255,255,.92),
    1312px 1849px rgba(255,255,255,.92),
    1191px 1819px rgba(255,255,255,.92),
    1711px 485px rgba(255,255,255,.92),
    642px 264px rgba(255,255,255,.92),
    1176px 471px rgba(255,255,255,.92),
    62px 999px rgba(255,255,255,.92),
    1942px 39px rgba(255,255,255,.92),
    527px 556px rgba(255,255,255,.92),
    807px 1272px rgba(255,255,255,.92),
    1639px 1349px rgba(255,255,255,.92),
    245px 905px rgba(255,255,255,.92),
    577px 326px rgba(255,255,255,.92),
    1320px 452px rgba(255,255,255,.92),
    720px 1555px rgba(255,255,255,.92),
    1242px 1831px rgba(255,255,255,.92),
    902px 193px rgba(255,255,255,.92),
    437px 1475px rgba(255,255,255,.92),
    1158px 1674px rgba(255,255,255,.92),
    509px 1351px rgba(255,255,255,.92),
    633px 982px rgba(255,255,255,.92),
    1540px 1238px rgba(255,255,255,.92),
    1505px 982px rgba(255,255,255,.92),
    877px 1018px rgba(255,255,255,.92),
    989px 1528px rgba(255,255,255,.92),
    639px 87px rgba(255,255,255,.92),
    1689px 376px rgba(255,255,255,.92),
    752px 1026px rgba(255,255,255,.92),
    1329px 728px rgba(255,255,255,.92),
    754px 1957px rgba(255,255,255,.92),
    96px 852px rgba(255,255,255,.92),
    1585px 1512px rgba(255,255,255,.92),
    235px 1182px rgba(255,255,255,.92),
    18px 1374px rgba(255,255,255,.92),
    326px 475px rgba(255,255,255,.92),
    1306px 456px rgba(255,255,255,.92),
    1393px 1633px rgba(255,255,255,.92),
    798px 992px rgba(255,255,255,.92),
    1798px 134px rgba(255,255,255,.92),
    105px 357px rgba(255,255,255,.92),
    1836px 693px rgba(255,255,255,.92),
    818px 225px rgba(255,255,255,.92),
    266px 600px rgba(255,255,255,.92),
    298px 119px rgba(255,255,255,.92),
    676px 688px rgba(255,255,255,.92),
    1916px 16px rgba(255,255,255,.92),
    1592px 656px rgba(255,255,255,.92),
    7px 340px rgba(255,255,255,.92),
    1268px 1786px rgba(255,255,255,.92),
    26px 1014px rgba(255,255,255,.92),
    1489px 1883px rgba(255,255,255,.92),
    1465px 3px rgba(255,255,255,.92),
    1677px 1353px rgba(255,255,255,.92),
    1706px 1361px rgba(255,255,255,.92);
}

.sterne-gross{
  width:4px;height:4px;
  animation:sterne-zug 150s linear infinite;
  box-shadow:
    540px 735px rgba(255,255,255,.82),
    1943px 717px rgba(255,255,255,.82),
    540px 960px rgba(255,255,255,.82),
    770px 1036px rgba(255,255,255,.82),
    610px 476px rgba(255,255,255,.82),
    1793px 879px rgba(255,255,255,.82),
    772px 375px rgba(255,255,255,.82),
    1144px 1636px rgba(255,255,255,.82),
    1538px 821px rgba(255,255,255,.82),
    140px 1700px rgba(255,255,255,.82),
    1261px 805px rgba(255,255,255,.82),
    577px 269px rgba(255,255,255,.82),
    327px 1674px rgba(255,255,255,.82),
    1093px 1000px rgba(255,255,255,.82),
    1272px 1705px rgba(255,255,255,.82),
    1518px 738px rgba(255,255,255,.82),
    1067px 576px rgba(255,255,255,.82),
    1053px 1939px rgba(255,255,255,.82),
    52px 106px rgba(255,255,255,.82),
    1945px 70px rgba(255,255,255,.82),
    366px 1032px rgba(255,255,255,.82),
    1144px 989px rgba(255,255,255,.82),
    1695px 817px rgba(255,255,255,.82),
    989px 1413px rgba(255,255,255,.82),
    912px 613px rgba(255,255,255,.82),
    1686px 1695px rgba(255,255,255,.82),
    871px 283px rgba(255,255,255,.82),
    600px 1103px rgba(255,255,255,.82),
    761px 859px rgba(255,255,255,.82),
    938px 858px rgba(255,255,255,.82),
    340px 386px rgba(255,255,255,.82),
    1618px 844px rgba(255,255,255,.82),
    1850px 1789px rgba(255,255,255,.82),
    942px 232px rgba(255,255,255,.82),
    1925px 477px rgba(255,255,255,.82),
    1483px 1485px rgba(255,255,255,.82),
    1569px 1332px rgba(255,255,255,.82),
    1091px 1614px rgba(255,255,255,.82),
    1345px 1794px rgba(255,255,255,.82),
    1078px 1849px rgba(255,255,255,.82),
    1653px 1469px rgba(255,255,255,.82),
    1906px 887px rgba(255,255,255,.82),
    1316px 55px rgba(255,255,255,.82),
    613px 1053px rgba(255,255,255,.82),
    258px 1509px rgba(255,255,255,.82),
    529px 1801px rgba(255,255,255,.82),
    640px 305px rgba(255,255,255,.82),
    309px 1903px rgba(255,255,255,.82),
    969px 66px rgba(255,255,255,.82),
    540px 1898px rgba(255,255,255,.82),
    925px 1067px rgba(255,255,255,.82),
    1634px 1795px rgba(255,255,255,.82),
    1036px 912px rgba(255,255,255,.82),
    1858px 837px rgba(255,255,255,.82),
    377px 808px rgba(255,255,255,.82),
    1023px 1044px rgba(255,255,255,.82),
    1787px 709px rgba(255,255,255,.82),
    608px 482px rgba(255,255,255,.82),
    192px 1093px rgba(255,255,255,.82),
    1655px 1444px rgba(255,255,255,.82),
    1839px 59px rgba(255,255,255,.82),
    1483px 1822px rgba(255,255,255,.82),
    297px 407px rgba(255,255,255,.82),
    1750px 976px rgba(255,255,255,.82),
    601px 98px rgba(255,255,255,.82),
    442px 520px rgba(255,255,255,.82),
    1733px 775px rgba(255,255,255,.82),
    726px 1075px rgba(255,255,255,.82),
    1303px 596px rgba(255,255,255,.82),
    1444px 916px rgba(255,255,255,.82),
    1742px 1896px rgba(255,255,255,.82),
    1435px 1862px rgba(255,255,255,.82),
    1581px 1812px rgba(255,255,255,.82),
    785px 1010px rgba(255,255,255,.82),
    1215px 1573px rgba(255,255,255,.82),
    1390px 230px rgba(255,255,255,.82),
    845px 814px rgba(255,255,255,.82),
    193px 51px rgba(255,255,255,.82),
    1515px 1144px rgba(255,255,255,.82),
    317px 1731px rgba(255,255,255,.82),
    1356px 1123px rgba(255,255,255,.82),
    1007px 824px rgba(255,255,255,.82),
    1844px 282px rgba(255,255,255,.82),
    1559px 561px rgba(255,255,255,.82),
    773px 77px rgba(255,255,255,.82),
    25px 1260px rgba(255,255,255,.82),
    745px 1238px rgba(255,255,255,.82),
    958px 886px rgba(255,255,255,.82),
    1585px 757px rgba(255,255,255,.82),
    182px 933px rgba(255,255,255,.82),
    448px 1186px rgba(255,255,255,.82),
    1573px 1460px rgba(255,255,255,.82),
    1562px 1180px rgba(255,255,255,.82),
    1033px 404px rgba(255,255,255,.82),
    1468px 232px rgba(255,255,255,.82),
    1780px 578px rgba(255,255,255,.82),
    1766px 1191px rgba(255,255,255,.82),
    812px 667px rgba(255,255,255,.82),
    556px 297px rgba(255,255,255,.82),
    1347px 1441px rgba(255,255,255,.82);
}
.sterne-gross::after{
  width:3px;height:3px;
  box-shadow:
    540px 735px rgba(255,255,255,.82),
    1943px 717px rgba(255,255,255,.82),
    540px 960px rgba(255,255,255,.82),
    770px 1036px rgba(255,255,255,.82),
    610px 476px rgba(255,255,255,.82),
    1793px 879px rgba(255,255,255,.82),
    772px 375px rgba(255,255,255,.82),
    1144px 1636px rgba(255,255,255,.82),
    1538px 821px rgba(255,255,255,.82),
    140px 1700px rgba(255,255,255,.82),
    1261px 805px rgba(255,255,255,.82),
    577px 269px rgba(255,255,255,.82),
    327px 1674px rgba(255,255,255,.82),
    1093px 1000px rgba(255,255,255,.82),
    1272px 1705px rgba(255,255,255,.82),
    1518px 738px rgba(255,255,255,.82),
    1067px 576px rgba(255,255,255,.82),
    1053px 1939px rgba(255,255,255,.82),
    52px 106px rgba(255,255,255,.82),
    1945px 70px rgba(255,255,255,.82),
    366px 1032px rgba(255,255,255,.82),
    1144px 989px rgba(255,255,255,.82),
    1695px 817px rgba(255,255,255,.82),
    989px 1413px rgba(255,255,255,.82),
    912px 613px rgba(255,255,255,.82),
    1686px 1695px rgba(255,255,255,.82),
    871px 283px rgba(255,255,255,.82),
    600px 1103px rgba(255,255,255,.82),
    761px 859px rgba(255,255,255,.82),
    938px 858px rgba(255,255,255,.82),
    340px 386px rgba(255,255,255,.82),
    1618px 844px rgba(255,255,255,.82),
    1850px 1789px rgba(255,255,255,.82),
    942px 232px rgba(255,255,255,.82),
    1925px 477px rgba(255,255,255,.82),
    1483px 1485px rgba(255,255,255,.82),
    1569px 1332px rgba(255,255,255,.82),
    1091px 1614px rgba(255,255,255,.82),
    1345px 1794px rgba(255,255,255,.82),
    1078px 1849px rgba(255,255,255,.82),
    1653px 1469px rgba(255,255,255,.82),
    1906px 887px rgba(255,255,255,.82),
    1316px 55px rgba(255,255,255,.82),
    613px 1053px rgba(255,255,255,.82),
    258px 1509px rgba(255,255,255,.82),
    529px 1801px rgba(255,255,255,.82),
    640px 305px rgba(255,255,255,.82),
    309px 1903px rgba(255,255,255,.82),
    969px 66px rgba(255,255,255,.82),
    540px 1898px rgba(255,255,255,.82),
    925px 1067px rgba(255,255,255,.82),
    1634px 1795px rgba(255,255,255,.82),
    1036px 912px rgba(255,255,255,.82),
    1858px 837px rgba(255,255,255,.82),
    377px 808px rgba(255,255,255,.82),
    1023px 1044px rgba(255,255,255,.82),
    1787px 709px rgba(255,255,255,.82),
    608px 482px rgba(255,255,255,.82),
    192px 1093px rgba(255,255,255,.82),
    1655px 1444px rgba(255,255,255,.82),
    1839px 59px rgba(255,255,255,.82),
    1483px 1822px rgba(255,255,255,.82),
    297px 407px rgba(255,255,255,.82),
    1750px 976px rgba(255,255,255,.82),
    601px 98px rgba(255,255,255,.82),
    442px 520px rgba(255,255,255,.82),
    1733px 775px rgba(255,255,255,.82),
    726px 1075px rgba(255,255,255,.82),
    1303px 596px rgba(255,255,255,.82),
    1444px 916px rgba(255,255,255,.82),
    1742px 1896px rgba(255,255,255,.82),
    1435px 1862px rgba(255,255,255,.82),
    1581px 1812px rgba(255,255,255,.82),
    785px 1010px rgba(255,255,255,.82),
    1215px 1573px rgba(255,255,255,.82),
    1390px 230px rgba(255,255,255,.82),
    845px 814px rgba(255,255,255,.82),
    193px 51px rgba(255,255,255,.82),
    1515px 1144px rgba(255,255,255,.82),
    317px 1731px rgba(255,255,255,.82),
    1356px 1123px rgba(255,255,255,.82),
    1007px 824px rgba(255,255,255,.82),
    1844px 282px rgba(255,255,255,.82),
    1559px 561px rgba(255,255,255,.82),
    773px 77px rgba(255,255,255,.82),
    25px 1260px rgba(255,255,255,.82),
    745px 1238px rgba(255,255,255,.82),
    958px 886px rgba(255,255,255,.82),
    1585px 757px rgba(255,255,255,.82),
    182px 933px rgba(255,255,255,.82),
    448px 1186px rgba(255,255,255,.82),
    1573px 1460px rgba(255,255,255,.82),
    1562px 1180px rgba(255,255,255,.82),
    1033px 404px rgba(255,255,255,.82),
    1468px 232px rgba(255,255,255,.82),
    1780px 578px rgba(255,255,255,.82),
    1766px 1191px rgba(255,255,255,.82),
    812px 667px rgba(255,255,255,.82),
    556px 297px rgba(255,255,255,.82),
    1347px 1441px rgba(255,255,255,.82);
}

/* ---------- Startseite: Hero als eigene Seite ----------
   Der Hero fuellt das Fenster und traegt nichts als die Kernaussage. Alles
   Weitere hat eigene Seiten — Leistungen, Referenzen, Preise, Ueber mich.
   Mittig gesetzt, weil hier nichts danebensteht, das Ausrichtung braeuchte. */
.hero-solo{
  min-height:100svh;
  margin-top:calc(-1 * var(--kopf-hoehe, 0px));
  display:flex;
  align-items:center;
  justify-content:center;
  /* Der Kopfbereich liegt darueber, also unten mehr Luft als oben. */
  padding:clamp(96px,14vh,150px) var(--pad-inline) clamp(48px,9vh,90px);
}

.hero-solo-inner{
  position:relative;
  z-index:1;
  width:100%;
  max-width:760px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:26px;
}

/* Hinweis auf das juengste Projekt. Steht bewusst ueber der Ueberschrift:
   wer zum ersten Mal hier ist, sieht sofort, dass hier etwas passiert. */
.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:6px 16px 6px 6px;
  border:1px solid var(--line-strong);
  border-radius:var(--r-pill);
  background:rgba(247,248,250,.94);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  font-size:var(--fs-sm);
  color:var(--ink-muted);
  text-decoration:none;
  transition:border-color var(--dur-base) var(--ease),color var(--dur-base) var(--ease);
}
.hero-badge:hover{border-color:var(--accent);color:var(--ink)}
.hero-badge:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.hero-badge-tag{
  padding:3px 11px;
  border-radius:var(--r-pill);
  background:var(--accent-strong);
  color:var(--accent-ink);
  font-size:.76rem;
  font-weight:700;
}

.hero-solo h1{
  margin:0;
  font-size:clamp(2.9rem,7.4vw,5.4rem);
  line-height:1.02;
  letter-spacing:-.035em;
}

.hero-solo-lead{
  margin:0;
  max-width:46ch;
  font-size:var(--fs-lg);
  color:var(--ink-muted);
}

.hero-solo-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:14px 26px;
  margin-top:4px;
}
/* Der Knopf erbt Form und Glanzstreifen von .package-cta; hier fehlt nur
   die Paketfarbe, also das Akzentgruen als Rueckfallwert. */
.hero-solo-primary{
  --card-tone:var(--accent);
  padding:16px 30px;
  font-size:var(--fs-body);
}
.hero-solo-secondary{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:var(--fs-body);
  font-weight:600;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color var(--dur-fast) var(--ease);
}
.hero-solo-secondary:hover{border-bottom-color:var(--ink)}
.hero-solo-secondary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.hero-solo-secondary span{color:var(--ink-faint)}

/* ---------- Rutschknopf ----------

   Vorlage von Uiverse.io (andrew-demchenk0). Uebernommen: Pillenknopf mit
   Symbol im Kreis links; beim Ueberfahren rutscht eine gefuellte Pille mit
   dem Symbol nach rechts ueber den ganzen Knopf, und ein zweiter Text faehrt
   von links herein.
   Geaendert: Die festen Pixelversaetze der Vorlage (96px, -100px, 130px)
   haengen hier an zwei Variablen — Breite und Hoehe —, alles andere wird
   daraus berechnet. Schwarz/Weiss ist gegen Rand und Akzentfuellung
   getauscht, Fokus loest dieselbe Bewegung aus wie Hover, und der zweite
   Text ist fuer Vorlesehilfen ausgeblendet (sonst hiesse der Link "Per
   WhatsApp Jetzt schreiben").

   Zur Schichtung: Das Symbol traegt dauerhaft ein transform und bildet damit
   einen eigenen Stapelkontext. Die Pille (::before, z-index:-1) liegt darin
   unter dem Symbol, der ganze Kontext aber ueber dem ersten Text. Deshalb
   verdeckt die Pille im Hover Text 1, waehrend Text 2 — im Markup nach dem
   Symbol — obenauf liegt. Die Reihenfolge im Markup ist also nicht egal. */

.rutsch-knopf{
  --rutsch-hoehe:58px;
  --rutsch-breite:232px;
  --rutsch-grund:rgba(11,13,16,.02);
  --rutsch-rand:rgba(11,13,16,.18);
  --rutsch-text:var(--ink);
  --rutsch-fuell:var(--accent);
  --rutsch-fuell-text:var(--accent-ink);
  --rutsch-kreis:calc(var(--rutsch-hoehe) - 2px);
  --rutsch-weg:calc(var(--rutsch-breite) - var(--rutsch-kreis) - 2px);

  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  width:var(--rutsch-breite);
  height:var(--rutsch-hoehe);
  padding:0 20px 0 calc(var(--rutsch-kreis) + 14px);
  border:1px solid var(--rutsch-rand);
  border-radius:999px;
  background:var(--rutsch-grund);
  color:var(--rutsch-text);
  font:inherit;
  text-decoration:none;
  cursor:pointer;
  transition:transform .2s ease;
}

.rutsch-symbol{
  position:absolute;
  top:0;
  left:0;
  display:grid;
  place-items:center;
  width:var(--rutsch-kreis);
  height:var(--rutsch-kreis);
  color:var(--rutsch-fuell-text);
  transform:translateX(0);
  transition:transform .5s;
}
.rutsch-symbol svg{width:21px;height:21px}
.rutsch-symbol::before{
  content:"";
  position:absolute;
  top:0;
  left:calc(-1 * var(--rutsch-weg));
  z-index:-1;
  width:var(--rutsch-breite);
  height:var(--rutsch-kreis);
  border-radius:999px;
  background:var(--rutsch-fuell);
}

.rutsch-text1{
  font-size:var(--fs-body);
  font-weight:600;
  white-space:nowrap;
  transition:opacity .3s;
}
.rutsch-text2{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:var(--rutsch-kreis);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:var(--fs-body);
  font-weight:700;
  white-space:nowrap;
  color:var(--rutsch-fuell-text);
  transform:translateX(-110%);
  transition:transform .6s;
}

.rutsch-knopf:hover .rutsch-symbol,
.rutsch-knopf:focus-visible .rutsch-symbol{transform:translateX(var(--rutsch-weg))}
.rutsch-knopf:hover .rutsch-text2,
.rutsch-knopf:focus-visible .rutsch-text2{transform:translateX(0)}
.rutsch-knopf:hover .rutsch-text1,
.rutsch-knopf:focus-visible .rutsch-text1{opacity:0}
.rutsch-knopf:active{transform:scale(1.03)}
.rutsch-knopf:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .rutsch-knopf,.rutsch-symbol,.rutsch-text1,.rutsch-text2{transition:none}
  .rutsch-knopf:active{transform:none}
}

/* Beleg ganz unten, ruhig gesetzt. Beide Haelften erscheinen nur, wenn es
   etwas zu zeigen gibt — sonst bliebe eine Null stehen. */
.hero-solo-trust{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px 26px;
  margin:14px 0 0;
  font-size:var(--fs-sm);
  color:var(--ink-muted);
}
.hero-solo-trust [hidden]{display:none}
.hero-solo-trust strong{color:var(--ink);font-weight:700}

/* Beim Laden steigen die Zeilen des Heros nacheinander von unten herein.
   Der Versatz ist bewusst klein — es soll ruhig wirken, nicht springen.
   animation-fill-mode:both haelt den Anfangszustand waehrend der
   Verzoegerung, sonst blitzte jede Zeile kurz an ihrem Platz auf. */
@keyframes hero-aufsteigen{
  from{opacity:0;transform:translateY(26px)}
  to  {opacity:1;transform:translateY(0)}
}

.hero-solo-inner > *{
  animation:hero-aufsteigen .85s cubic-bezier(.22,.68,.24,1) both;
}
.hero-solo-inner > .hero-badge{animation-delay:.05s}
.hero-solo-inner > h1{animation-delay:.16s}
.hero-solo-inner > .hero-solo-lead{animation-delay:.28s}
.hero-solo-inner > .hero-solo-actions{animation-delay:.40s}
.hero-solo-inner > .hero-solo-trust{animation-delay:.52s}

/* Ohne Bewegung erscheint alles sofort und vollstaendig. */
@media (prefers-reduced-motion:reduce){
  .hero-solo-inner > *{animation:none}
}

@media (max-width:620px){
  .hero-solo{padding-top:clamp(88px,12vh,120px)}
  .hero-solo-inner{gap:20px}
  .hero-solo-actions{flex-direction:column;align-items:stretch;width:100%}
  .hero-solo-primary{width:100%}
  .hero-solo-secondary{justify-content:center}
  .hero-solo-actions .rutsch-knopf{align-self:center}
}

/* ---------- Shader hinter dem Hero ----------
   Der Shader hat helle Stellen (bis rgb(241,245,252)). Ohne Abdunklung
   waere die helle Ueberschrift darauf nicht mehr lesbar. Der Verlauf ist
   links am dichtesten, wo Text steht, und laesst rechts mehr durch, wo nur
   die Preiskarten liegen — die bringen ihren eigenen Grund mit. */
.hero-shader{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.hero-shader > canvas[data-shader]{
  position:absolute;
  inset:0;
  z-index:-2;
  display:block;
  width:100%;
  height:100%;
}
.hero-shader::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(96deg,
      rgba(255,255,255,.94) 0%,
      rgba(8,9,11,.80) 45%,
      rgba(8,9,11,.52) 100%),
    linear-gradient(180deg,
      rgba(8,9,11,.62) 0%,
      rgba(8,9,11,.18) 34%,
      rgba(8,9,11,.30) 68%,
      rgba(8,9,11,.66) 100%);
}

/* Auf dem bewegten Grund reicht das gedaempfte Grau nicht mehr fuer 4,5:1.
   Im Hero deshalb eine hellere Stufe — nur dort, der Rest der Seite bleibt. */
.hero-shader .hero .intro{
  color:var(--ink-muted);
}

/* Hochkant laeuft der Text ueber die ganze Breite, also auch ueber die
   helleren Stellen rechts. Dort gleichmaessig abdunkeln statt von links. */
@media (max-width:760px){
  .hero-shader::after{
    background:
      linear-gradient(180deg,
        rgba(255,255,255,.94) 0%,
        rgba(8,9,11,.86) 40%,
        rgba(8,9,11,.89) 76%,
        var(--bg-0) 100%);
  }
}

/* ---------- Shader-Flaeche ---------- */
/* Huelle fuer <canvas data-shader>. Der Shader fuellt sie vollstaendig aus;
   Inhalt darueber gehoert in ein Geschwisterelement mit position:relative. */
.shader-flaeche{
  position:relative;
  overflow:hidden;
  background:var(--bg-0);
}
.shader-flaeche > canvas[data-shader]{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
}


/* ============================================================
   VERLOSUNG
   ============================================================ */

/* Der Navigationspunkt zur Verlosung soll auffallen, ohne dem Preis-Knopf
   Konkurrenz zu machen: gleiche Pille, aber nur umrandet. */
.site-header nav > a.nav-verlosung{
  padding:10px 18px;
  border:1px solid var(--line-strong);
  border-radius:var(--r-pill);
  color:var(--ink);
  font-weight:600;
}
@media (hover:hover) and (pointer:fine){
  .site-header nav > a.nav-verlosung:hover{
    background:rgba(59,130,246,.10);
    border-color:var(--accent);
  }
}

.verlosung-hero h1{max-width:16ch}
.verlosung-hero .intro{max-width:46ch;margin-bottom:0}

/* ---------- Countdown ----------

   Nach dem Muster der Zaehlkarten, wie es auf Uiverse.io in mehreren
   Beitraegen zu finden ist: dunkle Karten mit Lichtkante, in den Seitenfarben
   nachgebaut. Die Karten stehen still — eine laufende Klappbewegung waere
   neben dem Sternenfeld zu unruhig. Die Trennlinie quer durch die Ziffern,
   die zur Vorlage gehoert, ist bewusst weggelassen: sie las sich wie ein
   Durchstreichen. */
.countdown{
  margin-top:34px;
  max-width:560px;
}
.countdown-label{
  margin:0 0 12px;
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.countdown-uhr{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.countdown-feld{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:20px 8px 14px;
  text-align:center;
  border:1px solid rgba(11,13,16,.10);
  border-radius:16px;
  background:linear-gradient(180deg,#FFFFFF 0%, #F7F8FA 52%, #FFFFFF 100%);
  box-shadow:
    0 18px 40px rgba(11,13,16,.08),
    inset 0 1px 0 rgba(11,13,16,.04);
}
.countdown-feld strong{
  display:block;
  font-size:clamp(2rem,5vw,2.9rem);
  line-height:1;
  font-weight:800;
  letter-spacing:-.03em;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.countdown-feld span{
  display:block;
  margin-top:10px;
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.countdown-datum{
  margin:14px 0 0;
  font-size:var(--fs-sm);
  color:var(--ink-muted);
}
.countdown-datum strong{color:var(--accent)}
.countdown-ende{
  margin:14px 0 0;
  font-size:var(--fs-sm);
  font-weight:700;
  color:var(--accent);
}
.countdown[data-countdown-over] .countdown-uhr{opacity:.4}

/* ---------- Der Gewinn ---------- */
.verlosung-preis{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  margin-top:36px;
  display:flex;
  align-items:center;
  gap:26px;
  max-width:760px;
  padding:22px 30px 22px 12px;
  border:1px solid rgba(59,130,246,.30);
  border-radius:var(--r-karte);
  background:
    linear-gradient(122deg, rgba(59,130,246,.09) 0%, transparent 54%),
    var(--karte-grund);
  box-shadow:0 26px 64px rgba(11,13,16,.09);
}
.verlosung-preis .rabatt-holo{
  flex:none;
  width:186px;
  height:126px;
  justify-content:center;
  padding-left:0;
}
.verlosung-preis .rabatt-holo-buehne{width:126px;height:126px}
.verlosung-preis .rabatt-holo-lage{font-size:74px;letter-spacing:-4px}
.verlosung-preis-text{min-width:0}
.verlosung-preis-text .eyebrow{margin-bottom:8px}
.verlosung-preis-text p{margin:0;color:var(--ink-muted);font-size:var(--fs-sm);line-height:1.6}
.verlosung-preis-text strong{color:var(--ink)}

/* ---------- Anmeldung ---------- */
.verlosung-anmeldung{border-top:1px solid var(--line)}
.verlosung-spalten{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(28px,4vw,56px);
  align-items:start;
}
.verlosung-formular-huelle{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:34px;
  border:1px solid var(--card-edge,rgba(11,13,16,.12));
  border-radius:var(--r-karte);
  background:var(--karte-grund);
  box-shadow:0 24px 60px rgba(11,13,16,.09);
  --card-tone:var(--accent);
}
/* derselbe wandernde Lichtfleck wie auf den Preiskarten */
.verlosung-formular-huelle::before{
  content:"";
  position:absolute;
  z-index:0;
  top:50%;left:50%;
  width:52%;
  aspect-ratio:1;
  border-radius:50%;
  background:var(--accent);
  opacity:.20;
  filter:blur(52px);
  pointer-events:none;
  animation:fleck-wandern 16s infinite ease;
}
.verlosung-formular-huelle::after{
  content:"";
  position:absolute;
  inset:6px;
  z-index:1;
  border-radius:calc(var(--r-karte) - 6px);
  background:
    linear-gradient(90deg,transparent,rgba(11,13,16,.08),transparent) top center/70% 1px no-repeat,
    var(--karte-scheibe);
  -webkit-backdrop-filter:blur(34px);
  backdrop-filter:blur(34px);
  pointer-events:none;
}
.verlosung-formular-huelle > *{position:relative;z-index:2}
.verlosung-formular-huelle h2{margin:10px 0 0;font-size:1.7rem;letter-spacing:-.02em}
.verlosung-formular-huelle .intro{margin:10px 0 0;font-size:var(--fs-sm);max-width:44ch}
@media (prefers-reduced-motion:reduce){
  .verlosung-formular-huelle::before{animation:none;transform:translate(-50%,-50%)}
}

.raffle-form{margin-top:26px;display:grid;gap:20px}

/* ---------- Eingabefelder ----------

   Nach dem Muster der schwebenden Beschriftung, das es auf Uiverse.io in
   vielen Beitraegen gibt: die Beschriftung steht im leeren Feld als
   Platzhalter und wandert beim Tippen oder Fokussieren nach oben. Farben,
   Radius und Schrift folgen der Seite. */
.uiverse-feld{position:relative}
.uiverse-feld input,
.uiverse-feld textarea{
  width:100%;
  padding:20px 16px 10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(247,248,250,.92);
  color:var(--ink);
  font:inherit;
  font-size:var(--fs-sm);
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.uiverse-feld textarea{padding-top:24px;resize:vertical;min-height:112px;line-height:1.55}
.uiverse-feld label{
  position:absolute;
  left:17px;top:16px;
  pointer-events:none;
  color:var(--ink-faint);
  font-size:var(--fs-sm);
  transform-origin:left top;
  transition:transform .18s ease, color .18s ease;
}
.uiverse-feld label .optional{color:var(--ink-faint);font-weight:400}
.uiverse-feld input:focus,
.uiverse-feld textarea:focus{
  border-color:var(--accent);
  background:rgba(255,255,255,.94);
  outline:none;
}
.uiverse-feld input:focus-visible,
.uiverse-feld textarea:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.uiverse-feld input:focus + label,
.uiverse-feld input:not(:placeholder-shown) + label,
.uiverse-feld textarea:focus + label,
.uiverse-feld textarea:not(:placeholder-shown) + label{
  transform:translateY(-9px) scale(.78);
  color:var(--accent);
}
.feld-hinweis{
  margin:7px 0 0;
  font-size:.78rem;
  color:var(--ink-faint);
}
.feld-hinweis span{color:var(--ink-muted)}

/* ---------- Kontaktweg als Segmentwahl ---------- */
.weg-wahl{border:0;padding:0;margin:0;min-width:0}
.weg-wahl legend{
  padding:0;
  margin-bottom:10px;
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.weg-optionen{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  padding:6px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(247,248,250,.92);
}
.weg-option{position:relative;margin:0}
.weg-option input{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  margin:0;
  opacity:0;
  cursor:pointer;
}
.weg-option span{
  display:block;
  padding:11px 8px;
  border-radius:999px;
  text-align:center;
  font-size:var(--fs-sm);
  font-weight:600;
  color:var(--ink-muted);
  transition:background .2s ease, color .2s ease;
}
.weg-option input:checked + span{
  background:var(--accent-strong);
  color:var(--accent-ink);
  font-weight:700;
}
.weg-option input:focus-visible + span{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
@media (hover:hover) and (pointer:fine){
  .weg-option input:not(:checked):hover + span{color:var(--ink)}
}

.raffle-form .consent{align-items:flex-start}
.raffle-cta{width:100%;justify-content:center;margin-top:4px}
.raffle-form-success{
  margin:0;
  padding:18px 20px;
  border:1px solid rgba(59,130,246,.36);
  border-radius:var(--r-lg);
  background:rgba(59,130,246,.09);
}
.raffle-form-success strong{display:block;color:var(--accent)}
.raffle-form-success p{margin:6px 0 0;font-size:var(--fs-sm);color:var(--ink-muted)}

/* ---------- Ablauf daneben ---------- */
.verlosung-ablauf{
  padding:30px 28px;
  border:1px solid var(--line);
  border-radius:var(--r-karte);
  background:var(--bg-1);
}
.verlosung-schritte{
  margin:18px 0 0;
  padding:0;
  list-style:none;
  counter-reset:schritt;
  display:grid;
  gap:20px;
}
.verlosung-schritte li{
  position:relative;
  padding-left:46px;
  counter-increment:schritt;
}
.verlosung-schritte li::before{
  content:counter(schritt);
  position:absolute;
  left:0;top:-2px;
  width:32px;height:32px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(59,130,246,.12);
  border:1px solid rgba(59,130,246,.38);
  color:var(--accent);
  font-size:.86rem;
  font-weight:800;
}
.verlosung-schritte strong{display:block;color:var(--ink)}
.verlosung-schritte span{
  display:block;
  margin-top:4px;
  font-size:var(--fs-sm);
  color:var(--ink-muted);
  line-height:1.5;
}
.verlosung-notiz{
  margin:22px 0 0;
  padding-top:18px;
  border-top:1px solid var(--line);
  font-size:.82rem;
  color:var(--ink-faint);
  line-height:1.55;
}

/* ---------- Teilnahmebedingungen ---------- */
.verlosung-bedingungen{border-top:1px solid var(--line)}
.verlosung-bedingungen h2{margin:10px 0 0;max-width:22ch}
.bedingungen-raster{
  margin-top:34px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:26px 40px;
}
.bedingungen-raster h3{
  margin:0 0 8px;
  font-size:1rem;
  color:var(--ink);
}
.bedingungen-raster p{
  margin:0;
  font-size:var(--fs-sm);
  color:var(--ink-muted);
  line-height:1.65;
}

@media (max-width:1000px){
  .verlosung-spalten{grid-template-columns:1fr}
}
@media (max-width:720px){
  .countdown-uhr{gap:8px}
  .countdown-feld{padding:16px 4px 12px;border-radius:13px}
  .countdown-feld span{font-size:.66rem;letter-spacing:.08em}
  .verlosung-preis{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    padding:24px 26px 26px;
  }
  .verlosung-preis .rabatt-holo{width:100%;justify-content:flex-start;padding-left:4px}
  .verlosung-formular-huelle{padding:26px 22px}
  .bedingungen-raster{grid-template-columns:1fr;gap:24px}
  .weg-optionen{grid-template-columns:1fr;border-radius:18px}
  .weg-option span{border-radius:14px}
}


/* ---------- Zweitrangige Paketknoepfe ----------
   Auf der Preisseite stehen drei Karten nebeneinander. Waeren alle drei
   Knoepfe gefuellt, gaebe es drei gleich laute Aufforderungen und drei
   blaue Flaechen. Gefuellt ist deshalb nur der Knopf der empfohlenen Karte.
   Die anderen tragen dieselbe Form, aber dunkle Flaeche und feine Kante —
   beim Beruehren zieht eine blaue Kante nach. */
.price-packages>article:not(.is-empfohlen) .package-cta{
  background:transparent;
  color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line-strong);
}
@media (hover:hover) and (pointer:fine){
  .price-packages>article:not(.is-empfohlen) .package-cta:hover{
    background:rgba(59,130,246,.10);
    box-shadow:inset 0 0 0 1px var(--accent);
  }
}
.price-packages>article:not(.is-empfohlen) .package-cta .package-cta-sheen{display:none}

/* ---------- Zweiter Knopf im Hero ----------
   Die Vorgabe fuer zweitrangige Knoepfe: dunkle Flaeche, weisser Text, feine
   Kante, Blau erst bei Beruehrung. Der Symbolkreis ist deshalb in Ruhe
   neutral und faerbt sich erst, wenn die Fuellung darueberfaehrt. */
.rutsch-knopf{
  --rutsch-grund:rgba(11,13,16,.03);
  --rutsch-fuell:var(--accent-strong);
}
.rutsch-symbol{
  color:var(--ink);
  background:transparent;
}
.rutsch-symbol::before{
  background:var(--bg-3);
  transition:background var(--dur-base) var(--ease);
}
.rutsch-knopf:hover .rutsch-symbol,
.rutsch-knopf:focus-visible .rutsch-symbol{color:var(--accent-ink)}
.rutsch-knopf:hover .rutsch-symbol::before,
.rutsch-knopf:focus-visible .rutsch-symbol::before{background:var(--rutsch-fuell)}

/* Eine Zahl, die zaehlt, darf den Akzent tragen. */
/* Auf dem grauen Grund traegt das Blau hier nicht (4,0:1) — die Zahl
   steht deshalb im normalen Schriftton, das Gewicht reicht als Betonung. */
.hero-solo-trust strong{color:var(--ink)}