/* ============================================================
   CORVUS — style.css
   Palette: Rabengefieder. Anthrazit-Basis, irisierender
   Schimmer aus Petrol → Stahlblau → Violett.

   Kurz zur Namensvergabe, falls hier mal was angepasst wird:
   - .block__element  → Teil eines Bausteins (z. B. .plan__price)
   - .block--modifier → Variante desselben Bausteins (z. B. .plan--featured)
   - Jeder Baustein (Karten, Preise, Buttons, Icon-Links) hat einen
     eigenen Kommentarblock mit "====" als Überschrift — einfach
     danach suchen, um die passende Stelle zu finden.
   ============================================================ */

/* ---------- Fonts ----------
   Bewusst KEIN Google-Fonts-CDN (DSGVO / LG München).
   Wenn du eine eigene Schrift willst: Font-Dateien (woff2)
   lokal in /assets/fonts legen und hier einbinden:

------------------------------------------------------------ */

:root {
  /* Farben — tiefer als zuvor, damit der irisierende Akzent staerker traegt */
  --ink:        #08090C;   /* Hintergrund, fast schwarz */
  --ink-raised: #101319;   /* Karten */
  --ink-overlay:#161A22;   /* Karten auf Karten, Hover-Flaechen */
  --line:       #232833;   /* Rahmen */
  --paper:      #F4F2EE;   /* Text, warmes Off-White */
  --muted:      #9AA1AC;   /* Nebentext */
  --faint:      #5C636F;   /* Kleingedrucktes, Divider-Text */

  /* Der Schimmer — Rabenfeder im Licht */
  --aqua: #00FFFF;
  --aqualight: #09cae4;
  --petrol:  #2FA3AD;
  --steel:   #4C7DD9;
  --violet:  #8B7BC7;
  --blueviolet: #8A2BE2;
  --shimmer: linear-gradient(115deg,
              var(--aqua) 0%,
              var(--aqualight) 10%,
              var(--petrol) 20%,
              var(--steel)  30%,
              var(--violet) 40%,
              var(--blueviolet) 50%,
              var(--violet) 60%,
              var(--steel)  70%,
              var(--petrol) 80%,
              var(--aqualight) 90%,
              var(--aqua) 110%);

  /* Typo */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Rhythmus */
  --radius: 14px;
  --radius-lg: 22px;
  --section-pad: clamp(4rem, 10vw, 8rem);

  /* ---------- Motion ----------
     Die eingebauten CSS-Easings sind zu schwach; diese Kurven geben der
     Bewegung Absicht. ease-in wird bewusst NIE fuer UI benutzt: es
     startet langsam und laesst die Oberflaeche traege wirken.
     Dauern: UI-Feedback unter 300 ms, Scroll-Reveals duerfen laenger. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --dur-press: 160ms;   /* Button-Druck */
  --dur-hover: 220ms;   /* Hover, Farbwechsel */
  --dur-reveal: 640ms;  /* Scroll-Reveal, erzaehlend */
  --stagger: 55ms;      /* Abstand zwischen gestaffelten Elementen */
}

/* ---------- Reset & Basis ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; }

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

::selection { background: var(--steel); color: var(--ink); }

/* ============================================================
   SIGNATUR: Der Schimmer
   Irisierender Verlauf, der wie Licht über eine Rabenfeder
   wandert. Animiert im Hero, statisch als Akzent.
   ============================================================ */

.shimmer,
.shimmer-static {
  background: var(--shimmer);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.shimmer {
  animation: sheen 5s linear infinite;
}

@keyframes sheen {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}

/* ---------- Navigation ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem clamp(1.25rem, 5vw, 3rem);
  transition: background 0.4s, box-shadow 0.4s;
}

.nav.is-scrolled {
  background: rgba(8, 9, 12, 0.72);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 1px 0 var(--line);
}

/* ---------- Scroll-Fortschritt ----------
   Laeuft ueber die CSS-Scroll-Timeline, also komplett ohne JavaScript und
   ausserhalb des Main Threads. @supports ist zwingend: ohne Unterstuetzung
   wuerde die Animation sonst einmalig zeitbasiert durchlaufen. */
@supports (animation-timeline: scroll()) {
  .nav::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: var(--shimmer);
    background-size: 250% 100%;
    animation: scroll-progress linear both;
    animation-timeline: scroll(root block);
  }

  @keyframes scroll-progress {
    to { transform: scaleX(1); }
  }

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

.nav__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  /* Nie umbrechen: der Glitch-Effekt legt zwei Kopien mit eigenem
     Hintergrund uebereinander — auf zwei Zeilen wird daraus ein Kasten. */
  white-space: nowrap;
}

.nav__mark { width: 26px; height: 26px; }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  font-size: 0.95rem;
}

.nav__links a {
  text-decoration: none;
  color: var(--muted);
  transition: color 0.25s;
}

.nav__links a:hover { color: var(--paper); }

.nav__cta {
  color: var(--ink) !important;
  background: var(--shimmer);
  background-size: 250% 100%;
  border: none;
  border-radius: 999px;
  padding: 0.45rem 1.1rem;
  font-weight: 600;
  animation: sheen 5s linear infinite;
  transition: box-shadow 0.3s;
}

.nav__cta:hover { 
  box-shadow: 0,4px 20px rgba(76, 125, 217, 0.35);
 }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* "safe" verhindert, dass zentrierter Inhalt, der hoeher als der
     Bildschirm ist, oben aus dem Viewport herausgeschoben wird.
     Aeltere Browser ignorieren die Zeile und behalten "center". */
  justify-content: safe center;
  /* Oben Platz fuer die fixierte Navigation reservieren, sonst liegt
     die Eyebrow-Zeile auf schmalen Bildschirmen unter der Nav. */
  padding: 7rem clamp(1.25rem, 6vw, 5rem) 4rem;
  isolation: isolate;
}

/* ---------- Hero-Glow ----------
   Das Element stand bisher ohne Definition im Markup. Jetzt traegt es den
   radialen Akzent aus dem Figma-Entwurf und bewegt sich beim Scrollen
   leicht mit (Parallaxe, per --py aus script.js). */
.hero__glow {
  position: absolute;
  top: -18%;
  left: -14%;
  width: min(78vw, 1100px);
  aspect-ratio: 11 / 9;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(closest-side,
      rgba(76, 125, 217, 0.30),
      rgba(138, 43, 226, 0.13) 45%,
      transparent 100%);
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}

.eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.25rem;
}

/* Display-Groesse: groesser, enger, schwerer. Grosse Schrift braucht
   negatives Tracking, sonst faellt sie optisch auseinander. */
.hero__title {
  font-size: clamp(2.9rem, 8.6vw, 6.4rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;   /* verhindert einzelne Worte auf der letzten Zeile */
}

.hero__sub {
  max-width: 34rem;
  margin-top: 1.5rem;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  color: var(--muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.5rem;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 0.85rem 1.8rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: box-shadow var(--dur-hover) ease,
              border-color var(--dur-hover) ease,
              transform var(--dur-press) var(--ease-out);
}

/* Druck-Feedback: gibt sofort zurueck, dass der Klick angekommen ist.
   Subtil halten — 0.97 reicht, alles darunter wirkt wie ein Wackeln. */
.btn:active { transform: scale(0.97); }

.btn--primary {
  background: var(--shimmer);
  background-size: 250% 100%;
  color: var(--ink);
  animation: sheen 5s linear infinite;
}

.btn--ghost {
  border: 1px solid var(--line);
  color: var(--paper);
}

/* Hover nur dort, wo es echten Hover gibt — auf Touch loest ein Tap
   sonst den Hover-Zustand aus und laesst ihn haengen. */
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { box-shadow: 0 10px 34px rgba(76, 125, 217, 0.38); }
  .btn--ghost:hover   { border-color: var(--petrol); }
}

/* ---------- Sektionen ---------- */
.section {
  padding: var(--section-pad) clamp(1.25rem, 6vw, 5rem);
  max-width: 72rem;
  margin-inline: auto;
}

.section__title {
  font-size: clamp(2rem, 4.6vw, 3.3rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.028em;
  max-width: 42rem;
  margin-bottom: 3.25rem;
  text-wrap: balance;
}


/* ---------- Karten mit Cursor-Sheen ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}

.card {
  position: relative;
  background: var(--ink-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem 1.75rem;
  overflow: hidden;
  transition: transform 0.4s var(--ease-out), border-color 0.4s;
}

@media (hover: hover) and (pointer: fine) {
  .card:hover {
    transform: translateY(-4px);
    border-color: rgba(76, 125, 217, 0.4);
  }
}

/* Lichtreflex, folgt dem Cursor (JS setzt --mx / --my) */
[data-sheen]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
              rgba(76, 125, 217, 0.14),
              rgba(139, 123, 199, 0.07) 40%,
              transparent 70%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  [data-sheen]:hover::before { opacity: 1; }
}

/* ---------- Spotlight-Rand ----------
   Der Rahmen leuchtet dort auf, wo der Cursor steht. Umgesetzt als
   1px-Rahmen aus einem radialen Verlauf, aus dem die Innenflaeche per
   mask-composite ausgestanzt wird — dadurch bleibt nur die Kante uebrig.
   Nutzt dieselben --mx/--my, die das Sheen-Skript ohnehin schon setzt. */
@media (hover: hover) and (pointer: fine) {
  .card::after,
  .plan::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
                rgba(9, 202, 228, 0.6), rgba(139, 123, 199, 0.25) 42%, transparent 68%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--dur-hover) ease;
    pointer-events: none;
  }

  .card:hover::after,
  .plan:hover::after { opacity: 1; }
}

.card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
}

.card p {
  color: var(--muted);
  font-size: 0.98rem;
}

.card__tag {
  display: inline-block;
  margin-top: 1.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--petrol);
  border: 1px solid rgba(47, 163, 173, 0.35);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
}

/* ---------- Arbeitsweise ---------- */
.steps {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.step {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
}

.step__num {
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
}

.step h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }

.step p { color: var(--muted); font-size: 0.95rem; }

/* ---------- Referenz ---------- */
.reference {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  background: var(--ink-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(2rem, 5vw, 3.5rem);
  text-decoration: none;
  transition: transform 0.4s var(--ease-out), border-color 0.4s;
}

@media (hover: hover) and (pointer: fine) {
  .reference:hover {
    transform: translateY(-4px);
    border-color: rgba(76, 125, 217, 0.4);
  }
}

.reference__info { max-width: 32rem; }

.reference__info h3 {
  color: var(--muted);
}

.reference__info p {
  color: var(--muted);
  font-size: 0.98rem;
}

.reference__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  white-space: nowrap;
}

.reference__link .shimmer-static {
  color: white;
}

/* Der Pfeil hatte 1ms Transition — praktisch ein Sprung. Auf Hover-Tempo
   gebracht, damit die Bewegung zur Karte passt statt vorwegzulaufen. */
.reference__arrow {
  transition: transform var(--dur-hover) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .reference:hover .reference__arrow {
    transform: translate(4px, -4px);
  }
}

/* ---------- Kontakt ---------- */
.contact__inner {
  position: relative;
  overflow: hidden;
  background: var(--ink-raised);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 1.5);
  padding: clamp(2.5rem, 6vw, 4.5rem);
  text-align: center;
}

.contact__inner .section__title { margin-inline: auto; margin-bottom: 1rem; }

.contact__text {
  color: var(--muted);
  max-width: 30rem;
  margin: 0 auto 2.25rem;
}

.contact__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

/* ============================================================
   FOOTER — Marke, Sitemap, Rechtliches, Copyright-Zeile
   ============================================================ */
.footer {
  padding: clamp(3rem, 6vw, 4.5rem) clamp(1.25rem, 6vw, 5rem) 2rem;
  color: var(--muted);
  font-size: 0.9rem;
}

/* Einfacher Footer der Rechtstext-Seiten (Impressum/Datenschutz/AGB):
   dort steht statt .footer__grid nur ein <nav> mit den drei Links. */
.footer > nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 0.75rem;
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--line);
}

.footer__brand-name {
  display: block;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--paper);
  margin-bottom: 0.85rem;
}

.footer__tagline {
  max-width: 24rem;
  margin-bottom: 1.5rem;
}

.footer__contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.footer__contact .btn {
  padding: 0.6rem 1.25rem;
  font-size: 0.9rem;
}

.footer__col h3 {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper);
  margin-bottom: 1rem;
}

.footer__col ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.footer a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.25s;
}

.footer a:hover { color: var(--paper); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 1.75rem;
}

/* ---------- Scroll-Reveal ----------
   Nur transform und opacity — beide laufen auf der GPU und ueberspringen
   Layout und Paint. Uebergaenge statt Keyframes, damit ein Reveal, das
   waehrend des Scrollens unterbrochen wird, sauber umgelenkt wird. */
/* Der versteckte Ausgangszustand gilt NUR, wenn script.js bestaetigt hat,
   dass es die Reveals auch wieder einblenden kann (Klasse am <html>).
   Ohne diese Bremse waere jeder JS-Fehler gleichbedeutend mit einer
   halb unsichtbaren Seite — der Inhalt haengt sonst an einer Animation. */
.reveals-armed .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--delay, 0s);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Ueberschriften kommen zusaetzlich hinter einer Kante hervor. Der Blur
   verwischt den Moment, in dem Text und Hintergrund noch zwei getrennte
   Ebenen sind, und laesst daraus eine Bewegung werden. */
/* Der Wisch laeuft ueber mask-image, NICHT ueber clip-path.
   Grund: clip-path fliesst in die Berechnung des IntersectionObservers
   ein — ein vollstaendig weggeclipptes Element gilt als nicht sichtbar,
   der Observer feuert nie und das Element bleibt fuer immer versteckt.
   Die Animation wuerde ihren eigenen Ausloeser blockieren. Eine Maske
   ist dagegen reine Paint-Operation und fuer den Observer unsichtbar.

   Maske: doppelt so hoch wie das Element, untere Haelfte deckend.
   Position unten = deckend = sichtbar, Position oben = transparent. */
.reveals-armed .hero__title .reveal,
.reveals-armed .section__title.reveal {
  /* Inline-Boxen nehmen weder Maske noch filter an — die Zeilen im <h1>
     sind Spans und brauchen dafuer erst eine eigene Box. */
  display: inline-block;
  filter: blur(6px);
  -webkit-mask-image: linear-gradient(to top, #000 50%, transparent 50%);
          mask-image: linear-gradient(to top, #000 50%, transparent 50%);
  -webkit-mask-size: 100% 200%;
          mask-size: 100% 200%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 0 0;
          mask-position: 0 0;
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out),
              filter var(--dur-reveal) var(--ease-out),
              -webkit-mask-position var(--dur-reveal) var(--ease-out),
              mask-position var(--dur-reveal) var(--ease-out);
  transition-delay: var(--delay, 0s);
}

.reveals-armed .hero__title .reveal.is-visible,
.reveals-armed .section__title.reveal.is-visible {
  filter: blur(0);
  -webkit-mask-position: 0 100%;
          mask-position: 0 100%;
}

/* ============================================================
   SCROLL-GEBUNDENE BEWEGUNG
   Nicht "beim Scrollen ausgeloest", sondern an die Scroll-Position
   gekoppelt: die Elemente folgen dem Finger. Laeuft ueber die
   CSS-Scroll-Timeline und damit ausserhalb des Main Threads — bleibt
   also fluessig, waehrend der Browser noch laedt.
   @supports ist Pflicht, sonst liefen die Keyframes zeitbasiert los.
   ============================================================ */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* Karten steigen herein, waehrend sie ins Bild wandern.
       Der Reveal-Uebergang wird hier abgeschaltet — sonst wuerden
       zwei Mechaniken dieselben Eigenschaften steuern. */
    .cards > .card,
    .pricing > .plan,
    .steps > .step,
    .faq,
    .reference {
      transition: none;
      /* "backwards" statt "both": vor dem Bereich gilt der Startzustand,
         danach wieder der Grundzustand. Mit "both" wuerde die Animation
         transform dauerhaft halten — CSS-Animationen schlagen Inline-
         Styles, und die 3D-Neigung aus script.js waere wirkungslos. */
      animation: rise-in linear backwards;
      animation-timeline: view(block);
      animation-range: entry 4% entry 46%;
    }

    @keyframes rise-in {
      from { opacity: 0; transform: translateY(54px) scale(0.972); }
      to   { opacity: 1; transform: translateY(0)    scale(1); }
    }

    /* Der Hero verabschiedet sich, statt einfach wegzuscrollen. */
    .hero > :not(.hero__glow) {
      animation: hero-exit linear both;
      animation-timeline: view(block);
      animation-range: exit 0% exit 85%;
    }

    @keyframes hero-exit {
      to { opacity: 0; transform: translateY(-52px) scale(0.965); filter: blur(3px); }
    }

    /* Der Glow verblasst ueber die Hero-Laenge. Bewusst NUR opacity:
       transform gehoert der Parallaxe in script.js — zwei Quellen fuer
       dieselbe Eigenschaft, und die Animation gewinnt immer. */
    .hero__glow {
      animation: glow-fade linear both;
      animation-timeline: view(block);
      animation-range: cover 0% cover 100%;
    }

    @keyframes glow-fade {
      from { opacity: 1; }
      to   { opacity: 0.25; }
    }
  }
}

/* ---------- Navigations-Unterstrich ----------
   Waechst von links, statt einfach aufzublenden — die Richtung gibt
   der Bewegung eine Herkunft. */
@media (hover: hover) and (pointer: fine) {
  .nav__links > a:not(.nav__cta):not(.icon-link) {
    position: relative;
  }

  .nav__links > a:not(.nav__cta):not(.icon-link)::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 1px;
    background: var(--shimmer);
    background-size: 250% 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform var(--dur-hover) var(--ease-out);
  }

  .nav__links > a:not(.nav__cta):not(.icon-link):hover::after {
    transform: scaleX(1);
  }
}

/* Empfohlener Tarif bekommt einen getoenten Schein statt nur einer
   helleren Kante — die Farbe stammt aus dem Hintergrund, nicht aus
   generischem Schwarz. */
.plan--featured {
  box-shadow: 0 24px 70px -28px rgba(47, 163, 173, 0.55);
}

/* ---------- Reduced Motion ----------
   Reduzierte Bewegung heisst sanfter und weniger, nicht aus. Die
   Deckkraft bleibt als Orientierungshilfe erhalten; alles, was sich
   verschiebt, skaliert oder wischt, faellt weg. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .shimmer,
  .btn--primary,
  .plan__badge,
  .hero__glow {
    animation: none;
  }

  .reveal,
  .hero__title .reveal,
  .section__title.reveal {
    transform: none;
    filter: none;
    -webkit-mask-image: none;
            mask-image: none;
    transition: opacity 220ms ease;
  }

  .card:hover,
  .plan:hover,
  .reference:hover,
  .reference:hover .reference__arrow { transform: none; }

  .btn:active { transform: none; }
}

/* ---------- Mobil ---------- */
/* ---------- Burger-Button (nur mobil sichtbar) ---------- */
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 10px;
  background: transparent;
  border: 1px solid var(--line);
  cursor: pointer;
}

.nav__toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--paper);
  transition: transform 0.3s var(--ease-out), opacity 0.2s;
}

/* Burger wird zum X, wenn offen */
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 600px) {
  .nav:has(.nav__toggle) .nav__toggle { display: flex; }

  /* Links werden zum Dropdown-Panel unter der Nav */
  .nav:has(.nav__toggle) .nav__links {
    --corner: 12px;
    position: absolute;
    top: calc(100% + 8px);
    right: clamp(1.25rem, 5vw, 3rem);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-width: 210px;
    background: rgba(8, 9, 12, 0.95);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--line);
    padding: 0.5rem;
    clip-path: polygon(0 0, 100% 0,
                       100% calc(100% - var(--corner)),
                       calc(100% - var(--corner)) 100%,
                       0 100%);
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.25s, transform 0.25s var(--ease-out);
  }

  .nav:has(.nav__toggle) .nav__links.is-open {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .nav:has(.nav__toggle) .nav__links a {
    padding: 0.7rem 0.9rem;
    color: var(--paper);
  }

  .nav:has(.nav__toggle) .nav__cta {
    margin-top: 0.4rem;
    text-align: center;
  }

  .step { flex-direction: column; gap: 0.5rem; }
  .footer__grid { grid-template-columns: 1fr; gap: 2rem; }

  /* Markenname nicht umbrechen lassen — sonst wird die Nav zweizeilig
     und deckt den Anfang des Hero-Textes ab. */
  .nav__brand {
    font-size: 1rem;
    white-space: nowrap;
  }

  /* Auf dem Handy ist der Hero-Inhalt fast immer hoeher als der
     Bildschirm — dann von oben stapeln statt zentrieren. */
  .hero {
    justify-content: flex-start;
    padding-top: 8.5rem;
  }
}

/* ============================================================
   PREISE — Pricing-Karten (.plan)
   Eigene, sprechende Klassen statt Wiederverwendung von .card,
   damit hier gezielt etwas angepasst werden kann (z. B. Preis,
   Badge), ohne die Leistungs-Karten oben zu beeinflussen.
   ============================================================ */
.pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ink-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem 1.75rem;
  transition: transform 0.4s var(--ease-out), border-color 0.4s;
}

@media (hover: hover) and (pointer: fine) {
  .plan:hover {
    transform: translateY(-4px);
    border-color: rgba(76, 125, 217, 0.4);
  }
}

/* Optischer Akzent für den empfohlenen Tarif */
.plan--featured { border-color: var(--petrol); }

.plan__badge {
  position: absolute;
  top: -0.7rem;
  right: 1.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--shimmer);
  background-size: 250% 100%;
  animation: sheen 5s linear infinite;
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
}

.plan__name {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
}

.plan__price {
  font-size: 2.3rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 0.5rem;
  /* Tabellenziffern: gleiche Breite pro Ziffer, dadurch stehen die
     Preise in den nebeneinanderliegenden Karten auf einer Kante. */
  font-variant-numeric: tabular-nums;
}

.plan__price span {
  font-size: 1rem;
  font-weight: 500;
  color: var(--muted);
}

.plan__note {
  color: var(--muted);
  font-size: 0.85rem;
  margin-bottom: 1.5rem;
}

.plan__features {
  list-style: none;
  padding: 0;
  margin: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.plan__features li {
  display: flex;
  gap: 0.6rem;
  font-size: 0.95rem;
}

/* Aufzählungspunkt als kleiner Punkt statt Standard-Bullet */
.plan__features li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 0.55rem;
  border-radius: 50%;
  background: var(--petrol);
}

/* Kleingedrucktes unter einer Preis-Tabelle (z. B. Hinweis zum Ablauf) */
.section__note {
  color: var(--muted);
  font-size: 0.9rem;
  max-width: 44rem;
  margin-top: 1.75rem;
}

/* ============================================================
   ICON-LINK — kleines Icon (z. B. Instagram) neben Text/Buttons
   Ein Icon, ein Grauton, egal wo es auftaucht.
   ============================================================ */
.icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--muted);
  transition: color 0.25s, border-color 0.25s;
}

.icon-link svg {
  width: 20px;
  height: 20px;
}

.icon-link:hover { color: var(--paper); }

/* Variante für die Navigation: etwas kleiner, ohne Rahmen */
.nav__icon {
  width: 2rem;
  height: 2rem;
}

/* Variante neben dem Kontakt-Button: mit Rahmen wie ein Ghost-Button */
.contact__links .icon-link {
  border: 1px solid var(--line);
  border-radius: 999px;
}

.contact__links .icon-link:hover { border-color: var(--petrol); }

/* ============================================================
   SPRACH-UMSCHALTER — Button, der Text via [data-en] übersetzt
   (siehe script.js, Abschnitt "Sprachumschaltung")
   ============================================================ */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s;
}

.lang-toggle:hover { color: var(--paper); border-color: var(--petrol); }

/* ============================================================
   TRUST-BAR — schmale Vertrauens-Zeile unter dem Hero
   Bewusst als schlichte Textzeile mit Trennstrichen statt als
   groß angelegte Stat-Karten — nur echte, belegbare Zahlen.
   ============================================================ */
.trust-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem 1.4rem;
  margin-top: 2.25rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.trust-bar__item strong {
  color: var(--paper);
  font-weight: 700;
}

.trust-bar__divider {
  width: 1px;
  height: 1rem;
  background: var(--line);
}

.trust-bar__proof {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--petrol);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
  border: 1px solid rgba(47, 163, 173, 0.35);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  transition: border-color 0.25s, color 0.25s;
}

.trust-bar__proof:hover { border-color: var(--petrol); color: var(--paper); }

/* ============================================================
   KALKULATOR — Preisrechner aus echten Paketpreisen
   Keine erfundenen Feature-Preise: Die Buttons zeigen exakt
   Preis + Leistungen der .plan-Karten weiter oben — verknüpft
   über data-plan (siehe script.js, Abschnitt "Kalkulator").
   ============================================================ */
.calculator__intro {
  color: var(--muted);
  max-width: 42rem;
  margin: -1.5rem 0 2.5rem;
}

.calculator {
  background: var(--ink-raised);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 1.2);
  padding: clamp(1.75rem, 4vw, 3rem);
}

.calculator__group + .calculator__group { margin-top: 1.75rem; }

.calculator__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 0.75rem;
}

.calculator__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.calculator__option {
  padding: 0.55rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}

.calculator__option:hover { border-color: var(--petrol); color: var(--paper); }

.calculator__option.is-active {
  background: var(--shimmer);
  background-size: 250% 100%;
  animation: sheen 5s linear infinite;
  border-color: transparent;
  color: var(--ink);
}

.calculator__result {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.75rem;
  margin: 2.25rem 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}

.calculator__result-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

.calculator__result-value {
  display: block;
  font-size: 1.9rem;
  font-weight: 800;
  margin-bottom: 0.85rem;
}

.calculator__result-features {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.calculator__result-features li {
  display: flex;
  gap: 0.55rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.calculator__result-features li::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  margin-top: 0.5rem;
  border-radius: 50%;
  background: var(--petrol);
}

/* ============================================================
   FAQ — natives <details>/<summary>, keine eigene JS-Logik nötig
   ============================================================ */
.faq {
  display: flex;
  flex-direction: column;
  background: var(--ink-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:last-child { border-bottom: none; }

.faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.4rem 1.75rem;
  font-weight: 600;
  font-size: 1.02rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transition: color 0.25s;
}

.faq__item summary::-webkit-details-marker { display: none; }

.faq__item summary::after {
  content: "+";
  flex: none;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--muted);
  transition: transform 0.25s;
}

.faq__item[open] summary::after { transform: rotate(45deg); }

.faq__item summary:hover { color: var(--petrol); }

.faq__item p {
  padding: 0 1.75rem 1.5rem;
  color: var(--muted);
  font-size: 0.98rem;
  max-width: 46rem;
}

.faq__item p a { color: var(--petrol); }

/* ---------- Rechtshinweis im Kontaktblock ---------- */
.contact__note {
  margin-top: 2rem;
  font-size: 0.85rem;
  color: var(--muted);
  max-width: 28rem;
  margin-inline: auto;
}

/* ============================================================
   CYBER-THEME (nur security.html — scoped über body.page-security)
   Adaptiert aus drei CodePen-Vorlagen, umgebaut auf die
   Corvus-Palette und ohne externe Fonts/CDNs.
   ============================================================ */

/* ---------- 1. Grid-Hintergrund (Kästchen, alle Seiten) ---------- */
body::before {
  --size: 45px;
  --grid-line: rgba(9, 202, 228, 0.10);   /* aqualight, stark transparent */
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px var(--size))
      calc(var(--size) * 0.36) 50% / var(--size) var(--size),
    linear-gradient(var(--grid-line) 1px, transparent 1px var(--size))
      0% calc(var(--size) * 0.32) / var(--size) var(--size);
  mask: linear-gradient(-20deg, transparent 40%, white);
  -webkit-mask: linear-gradient(-20deg, transparent 40%, white);
  pointer-events: none;
}

/* ---------- Filmkorn ----------
   Eine reine Flaeche wirkt steril. Das Korn liegt als feste Ebene ueber
   dem Inhalt (unter der Nav) und nimmt der Dunkelflaeche das Digitale.
   Als SVG-Rauschen inline — kein zusaetzlicher Request, CSP-konform. */
html::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.038;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   LOGO-WASSERZEICHEN — grosses, transparentes Logo im Hintergrund,
   das langsam im Raum driftet (Perspektive + Rotation + Tiefe).
   Liegt ueber dem Kaesten-Raster (z-index -2), aber unter dem Inhalt.
   Staerke bequem ueber --logo-watermark-opacity justierbar.
   ============================================================ */
:root { --logo-watermark-opacity: 0.07; }

body::after {
  content: "";
  position: fixed;
  inset: -12%;                 /* groesser als der Viewport, damit beim
                                  Driften keine Kanten sichtbar werden */
  z-index: -1;
  background: url("assets/logo.png") no-repeat center / min(62vw, 560px);
  opacity: var(--logo-watermark-opacity);
  pointer-events: none;
  animation: logo-drift 48s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes logo-drift {
  0% {
    transform: perspective(900px) rotateX(0deg) rotateY(-14deg)
               translate3d(-2%, -1%, 0) scale(1);
  }
  35% {
    transform: perspective(900px) rotateX(7deg) rotateY(6deg)
               translate3d(2%, 1%, -70px) scale(1.05);
  }
  70% {
    transform: perspective(900px) rotateX(-5deg) rotateY(14deg)
               translate3d(1%, -2%, 50px) scale(0.97);
  }
  100% {
    transform: perspective(900px) rotateX(3deg) rotateY(-8deg)
               translate3d(-1%, 2%, 20px) scale(1.03);
  }
}

@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
}

/* ---------- 2. Glitch-Headline ---------- */
/* Prinzip: zwei Kopien des Texts (::before/::after, content: attr(data-text))
   liegen über dem Original. Per clip-path ist immer nur ein horizontaler
   Streifen sichtbar; Keyframes verschieben Streifen + Versatz + Farbsäume. */

.glitch {
  position: relative;
  display: inline-block;
}

.glitch::before,
.glitch::after {
  --top: 0;          /* Streifen-Offset von oben, 0–10 */
  --left: 0;         /* horizontaler Versatz, ±0.001–0.09 */
  --v-height: 30%;   /* sichtbare Streifenhöhe */
  --t-cut: calc(var(--top) * 10%);
  --b-cut: calc(var(--t-cut) + var(--v-height));

  content: attr(data-text);
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  background: var(--ink);
  transform: translateX(calc(var(--left) * 100%));
  text-shadow:
    calc(var(--left) * -3em) 0 0.02em var(--aqualight),
    calc(var(--left) * -6em) 0 0.02em var(--blueviolet);
  clip-path: polygon(0% var(--t-cut), 100% var(--t-cut),
                     100% var(--b-cut), 0% var(--b-cut));
}

.glitch::before { animation: glitch-b 1.7s infinite alternate-reverse; }
.glitch::after  { animation: glitch-a 3.1s infinite alternate; }

@keyframes glitch-a {
  10%, 30%, 50%, 70%, 90% { --top: 0; --left: 0; }
  0%   { --v-height: 15%; }
  20%  { --left: 0.005; }
  40%  { --left: 0.01;  --v-height: 20%; --top: 3; }
  60%  { --left: 0.03;  --v-height: 25%; --top: 6; }
  80%  { --left: 0.07;  --v-height: 5%;  --top: 8; }
  100% { --left: 0.083; --v-height: 30%; --top: 1; }
}

@keyframes glitch-b {
  10%, 30%, 50%, 70%, 90% { --top: 0; --left: 0; }
  0%   { --v-height: 15%; --top: 10; }
  20%  { --left: -0.005; }
  40%  { --left: -0.01;  --v-height: 17%; --top: 3; }
  60%  { --left: -0.03;  --v-height: 35%; --top: 6; }
  80%  { --left: -0.07;  --v-height: 5%;  --top: 8; }
  100% { --left: -0.083; --v-height: 30%; --top: 1; }
}

/* ---------- 3. Cyber-Kanten statt runder Ecken ---------- */
/* Abgeschnittene Ecke unten rechts — das Corner-Cut-Motiv der Vorlage */
.page-security .card,
.page-security .contact__inner {
  --corner: 16px;
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0,
                     100% calc(100% - var(--corner)),
                     calc(100% - var(--corner)) 100%,
                     0 100%);
}

/* Buttons überall eckig mit Corner-Cut — keine Pillen mehr */
.btn,
.nav__cta,
.page-security .card__tag {
  --corner: 10px;
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0,
                     100% calc(100% - var(--corner)),
                     calc(100% - var(--corner)) 100%,
                     0 100%);
}

/* ---------- Reduced Motion für alles Neue ---------- */
@media (prefers-reduced-motion: reduce) {
  .glitch,
  .glitch::before,
  .glitch::after {
    animation: none;
  }
  .glitch::before,
  .glitch::after { display: none; }
}