/* Inter, lokal ausgeliefert statt von Google.
   Google Fonts aus dem Netz zu laden uebertraegt die IP-Adresse jedes
   Besuchers in die USA - ohne Einwilligung ist das in Deutschland
   abmahnfaehig (LG Muenchen I, 20.01.2022). Eine variable Schriftdatei
   deckt alle Schnitte ab. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/inter-var.woff2') format('woff2');
}

/* =========================================================
   Brainer — Website
   Reines HTML/CSS, kein Build, kein Framework.

   WICHTIG: Alle Werte stammen 1:1 aus dem Pencil-Entwurf
   (Datei Designspencil/brainerWebsiteBrainstorm, Frame
   "SaaS Hero — brainer"). Farben, Positionen, Größen,
   Abstände, Weichzeichner-Stärken und Verläufe sind
   übernommen, nicht nachempfunden. Wer etwas ändert,
   weicht vom Entwurf ab.

   Umrechnung der Verlaufsrichtung:
   Pencil rotation 0  -> CSS 90deg  (links nach rechts)
   Pencil rotation 90 -> CSS 180deg (oben nach unten)

   Aufbau:
     1. Bühne und Skalierung
     2. Grundlagen
     3. Nav
     4. Hero
     5. Vorschau (Lichtscheine + Karte)
     6. Everything you need
     7. In the open
     8. Download
     9. Footer
   ========================================================= */

/* ---------- 1. Bühne und Skalierung ----------
   Der Entwurf ist 1440 breit. Statt das Layout auf kleinen
   Schirmen umzubauen (und damit von den Entwurfsmaßen
   abzuweichen), wird die ganze Bühne verkleinert. Den Faktor
   setzt js/main.js als --scale. */
.stage {
  overflow: hidden;
  display: flex;
  justify-content: center;
}

.design {
  position: relative;
  width: 1440px;
  flex: 0 0 1440px;
  transform: scale(var(--scale, 1));
  transform-origin: top center;
}

/* ---------- 2. Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: #000000;
  color: #FFFFFF;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a   { text-decoration: none; color: inherit; }

/* Alle Überschriften teilen denselben Verlauf – metallisch von unten
   dunkel nach oben hell. Der dunkle Teil läuft bis drei Viertel der
   Höhe, erst das oberste Viertel geht auf Weiß:
   #5f5f5f 0 % -> #f2f2f2 75 % -> #ffffff 100 % */
.hero__title,
.features__title,
.open__title,
.download__title,
.dl-hero__title {
  margin: 0;
  font-weight: 700;
  background: linear-gradient(to top, #5f5f5f 0%, #f2f2f2 75%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- 3. Nav (1440 x 76, absolut gesetzt) ---------- */
.nav {
  position: relative;
  width: 1440px;
  height: 76px;
  background: #000000;
}

.brand {
  position: absolute;
  left: 48px;
  top: 23px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand__mark { width: 30px; height: 30px; border-radius: 7px; }
.brand__word { font-size: 19px; font-weight: 700; color: #FFFFFF; }

.nav__buttons {
  position: absolute;
  left: 1171px;
  top: 19.5px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-ghost {
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 400;
  color: #FFFFFF;
  background: #000000;
}

.btn-primary {
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 700;
  color: #000000;
  background: #FFFFFF;
  border-radius: 8px;
}

.nav-border { width: 1440px; height: 1px; background: #1F2937; }

/* ---------- 4. Hero (gap 30, padding oben 80) ---------- */
.hero {
  width: 1440px;
  /* Die Vorschaukarte ist 619 hoch, sitzt bei y=40 in einem 470 hohen
     Rahmen und ragt damit 189 px nach unten heraus. Ohne diesen Abstand
     würde der nächste Abschnitt sie überdecken. */
  padding-top: 80px;
  padding-bottom: 189px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  background: #000000;
}

.hero__title {
  font-size: 62px;
  line-height: 1.2;
  text-align: center;
}

.hero__sub {
  margin: 0;
  width: 415px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  color: #9CA3AF;
}

/* Knopf: Radius 10, padding 16/32, Verlauf praktisch weiß */
.cta {
  display: flex;
  align-items: center;
  padding: 16px 32px;
  border-radius: 10px;
  background: linear-gradient(90deg, #ffffff 0%, #ffffff 97%);
  color: #000000;
}
.cta__label {
  width: 206px;                 /* Entwurf: feste Breite */
  font-size: 16px;
  font-weight: 700;
}
.cta__platforms { display: flex; align-items: center; gap: 9px; }
.cta__apple     { width: 16px; height: 16px; }

/* Windows-Raute: 15 x 15, Quadrate 6.5 bei 0 und 8.5 */
.cta__windows {
  position: relative;
  width: 15px;
  height: 15px;
}
.cta__windows i {
  position: absolute;
  width: 6.5px;
  height: 6.5px;
  background: #000000;
}
.cta__windows i:nth-child(1) { left: 0;     top: 0; }
.cta__windows i:nth-child(2) { left: 8.5px; top: 0; }
.cta__windows i:nth-child(3) { left: 0;     top: 8.5px; }
.cta__windows i:nth-child(4) { left: 8.5px; top: 8.5px; }

/* ---------- 5. Vorschau (1200 x 470, Kinder absolut) ---------- */
.preview {
  position: relative;
  width: 1200px;
  height: 470px;
}

.glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

/* x=190 y=110, 820 x 70, Weichzeichner 70.
   Der Verlauf läuft quer: links kühles Violett, rechts warmes Rosa.
   Dieser Schein sitzt höher und heller, damit oberhalb der Karte
   noch etwas Licht steht. */
.glow--top {
  left: 190px;
  top: 110px;
  width: 820px;
  height: 70px;
  background: linear-gradient(90deg, #C77BFF 0%, #FFB0F0 100%);
  filter: blur(70px);
}

/* x=40 y=210, 1120 x 230, Weichzeichner 130.
   Enger und kräftiger als vorher, vor allem nach oben hin – und quer
   von kaltem Blau über Violett nach warmem Magenta. */
.glow--main {
  left: 40px;
  top: 210px;
  width: 1120px;
  height: 230px;
  background: linear-gradient(90deg, #5B3BFF 0%, #A93CFF 50%, #FF63D8 100%);
  filter: blur(130px);
}

/* Karte: x=50 y=40, 1100 x 619, Radius 12, Rand 1 innen.
   Sie ragt unten über den Vorschaurahmen hinaus – wie im Entwurf. */
.window {
  position: absolute;
  left: 50px;
  top: 40px;
  width: 1100px;
  height: 619px;
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #0B0B10;
  box-shadow: inset 0 0 0 1px #2a2a32;
}
.window__shot { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 6. Everything you need ---------- */
.features {
  width: 1440px;
  padding: 160px 120px 140px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 110px;
  background: #000000;
}

.features__title { font-size: 52px; line-height: 1.2; }

.row {
  width: 1200px;
  display: flex;
  align-items: center;
  gap: 70px;
}

.row__text {
  width: 565px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.row__text h3 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  color: #FFFFFF;
}
.row__lead,
.row__list {
  margin: 0;
  width: 540px;                 /* Entwurf: feste Textbreite */
  color: #9CA3AF;
}
.row__lead { font-size: 17px; line-height: 1.45; }
.row__list { font-size: 16px; line-height: 1.7; }

.row__shot {
  width: 565px;
  height: 318px;
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px #1b1b1b;
}
.row__shot img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 7. In the open ---------- */
.open {
  width: 1440px;
  padding: 150px 120px 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  background: #000000;
}


.open__title { font-size: 48px; line-height: 1.2; text-align: center; }

/* ---------- 7b. Streifen "What's new" ----------
   Uebernommen aus dem Entwurf: der Screenshot liegt links, der Keil ist
   um 4 Grad gekippt und ragt absichtlich ueber den Rahmen hinaus. Der
   Rahmen schneidet ihn wieder ab (overflow: hidden). */
.whatsnew {
  position: relative;
  display: block;
  width: 1440px;
  height: 470px;
  overflow: hidden;
  background: #0B0B10;
  text-decoration: none;
}

.whatsnew__shot {
  position: absolute;
  left: 0;
  top: 0;
  width: 820px;
  height: 470px;
  object-fit: cover;
}

/* Keil im Streifen. Aufgebaut wie der violette Verlauf vorher: oben eine
   helle Kante, dann der Farbverlauf nach unten – nur in Gold statt Violett.
   Kalt nach warm: Weiß über Altrosa zu einem dunklen, gedeckten Rosé.
   Rot führt, Grün liegt am tiefsten – das ergibt den rosigen Ton, ohne
   dass es pink wird. */
.whatsnew__wedge {
  position: absolute;
  left: 690px;
  top: -120px;
  width: 1000px;
  height: 720px;
  transform: rotate(-4deg);
  background: linear-gradient(180deg,
    #FFFFFF 0%,
    #F6E9E9 3%,
    #E0C4C6 22%,
    #C09CA1 50%,
    #8E6B72 100%);
}

.whatsnew__text {
  position: absolute;
  left: 860px;
  top: 140px;
  width: 460px;
  height: 148px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.whatsnew__title {
  font-size: 36px;
  font-weight: 700;
  color: #FFFFFF;
}

.whatsnew__btn {
  padding: 13px 24px;
  border-radius: 8px;
  background: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  color: #3A00C4;
}

/* Seitenverkehrt: Keil und Text nach links, Screenshot nach rechts.
   Die Werte sind die an der Mitte (720) gespiegelten Originalwerte. */
.whatsnew--flip { margin-top: 30px; }
.whatsnew--flip .whatsnew__shot { left: auto; right: 0; }

.whatsnew--flip .whatsnew__wedge { left: -250px; transform: rotate(4deg); }
.whatsnew--flip .whatsnew__text  { left: 120px; }

/* ---------- 7c. Unterseiten (Changelog, Roadmap, Impressum, Datenschutz)
   Gleiche Buehne, nur eine ruhige Textspalte statt der Sektionen. */
.page {
  width: 1440px;
  padding: 110px 120px 140px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  background: #000000;
}

.page__title { font-size: 48px; line-height: 1.2; }

/* Changelog und Roadmap haben keinen Untertitel – den Abstand, den er
   sonst schafft, übernimmt hier der erste Eintrag bzw. die Leerzeile. */
.page__title + .entry,
.page__title + .page__empty { margin-top: 40px; }

.page__lead {
  margin: 0 0 40px;
  width: 700px;
  font-size: 17px;
  line-height: 1.45;
  color: #9CA3AF;
}

/* Ein Eintrag im Changelog / in der Roadmap: links die Version, rechts
   der Text. Die Linie darueber trennt die Eintraege voneinander. */
.entry {
  width: 1200px;
  padding: 34px 0 0;
  display: flex;
  gap: 60px;
  border-top: 1px solid #1B1B1B;
}
.entry + .entry { margin-top: 34px; }

.entry__meta {
  width: 200px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.entry__version {
  font-size: 17px;
  font-weight: 700;
  color: #FFFFFF;
}
.entry__version--now { color: #A78BFA; }
.entry__version--no  { color: #6B7280; }

.entry__date { font-size: 14px; color: #6B7280; }

.entry__body { width: 800px; }
.entry__body h2 {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 700;
  color: #FFFFFF;
}
.entry__body p,
.entry__body li {
  font-size: 16px;
  line-height: 1.7;
  color: #9CA3AF;
}
.entry__body p { margin: 0 0 12px; }
.entry__body ul { margin: 0; padding-left: 20px; }

/* Impressum und Datenschutz: reiner Fliesstext */
.prose { width: 800px; }
.prose h2 {
  margin: 34px 0 12px;
  font-size: 20px;
  font-weight: 700;
  color: #FFFFFF;
}
.prose p,
.prose li {
  font-size: 16px;
  line-height: 1.7;
  color: #9CA3AF;
}
.prose p { margin: 0 0 12px; }
.prose a { color: #A78BFA; }

/* Noch offene Stellen im Text sichtbar machen, solange die echten
   Angaben fehlen. */

/* ---------- 8. Download ---------- */
.download {
  width: 1440px;
  padding: 150px 120px 170px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  background: #000000;
}

.download__title { font-size: 52px; line-height: 1.2; text-align: center; }

.download__sub {
  margin: 0;
  width: 700px;
  font-size: 17px;
  text-align: center;
  color: #9CA3AF;
}

/* Derselbe Knopf, nur größer: padding 17/34, gap 14 */
.cta--download {
  gap: 14px;
  padding: 17px 34px;
  background: #FFFFFF;
}
.cta__label--auto   { width: auto; font-size: 17px; }
.cta__platforms--lg { gap: 10px; }
.cta__apple--lg     { width: 17px; height: 18px; }
.cta__windows--lg   { width: 16px; height: 16px; }
.cta__windows--lg i { width: 7px; height: 7px; border-radius: 1px; }
.cta__windows--lg i:nth-child(1) { left: 0;   top: 0; }
.cta__windows--lg i:nth-child(2) { left: 9px; top: 0; }
.cta__windows--lg i:nth-child(3) { left: 0;   top: 9px; }
.cta__windows--lg i:nth-child(4) { left: 9px; top: 9px; }

/* ---------- 9. Footer ---------- */
.footer {
  width: 1440px;
  padding: 0 120px 44px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  background: #000000;
}

.footer__border { width: 1200px; height: 1px; background: #1F2937; }

.footer__cols {
  width: 1200px;
  display: flex;
  align-items: flex-start;
  gap: 80px;
}

.footer__brand {
  width: 420px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.footer__mark-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 700;
  color: #FFFFFF;
}
.footer__mark { width: 26px; height: 26px; border-radius: 6px; }
.footer__brand p {
  margin: 0;
  width: 360px;
  font-size: 15px;
  line-height: 1.6;
  color: #6B7280;
}

.footer__col {
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.footer__col h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
}
.footer__col a {
  font-size: 15px;
  color: #6B7280;
  transition: color .18s ease;
}
.footer__col a:hover { color: #FFFFFF; }

.footer__bottom {
  width: 1200px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  font-size: 14px;
  color: #4B5563;
}

/* ---------- 10. Einblenden beim Erscheinen ----------
   Die Elemente starten leicht versetzt und unsichtbar und fahren ein,
   sobald sie in den Blick kommen. Die Verzögerung steht als --delay
   am Element, damit sich Gruppen staffeln lassen. */
/* Grundsätzlich wird nur die Deckkraft animiert, nichts bewegt sich.
   Grund: Die ganze Bühne steht bereits auf transform: scale(). Kommt beim
   Einblenden ein zweites transform dazu, legt der Browser den Inhalt in eine
   eigene Ebene, rastert ihn dort und zeichnet ihn nach der Animation neu –
   der Text wirkt dann, als würde er am Ende in der Größe springen.
   Bewegen dürfen sich nur Elemente ohne Text (siehe .reveal--lift). */
.reveal {
  opacity: 0;
  transition: opacity .75s cubic-bezier(.22, .68, .3, 1) var(--delay, 0s);

  /* Solange die Deckkraft animiert wird, legt der Browser das Element in
     eine eigene Ebene und rastert es dort. Fällt die Ebene danach wieder
     weg, wird der Inhalt im skalierten Umfeld neu gezeichnet – das ist
     der Größensprung am Ende der Animation. will-change hält die Ebene
     dauerhaft, damit genau dieses Neuzeichnen ausbleibt. */
  will-change: opacity;
}

/* Die Vorschaukarte enthält keinen Text, sie darf sich bewegen */
.reveal--lift {
  transform: translateY(30px);
  transition:
    opacity .75s cubic-bezier(.22, .68, .3, 1) var(--delay, 0s),
    transform .75s cubic-bezier(.22, .68, .3, 1) var(--delay, 0s);
}

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

/* Wer Bewegung reduziert haben will, bekommt alles sofort und ruhig */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================================
   Download-Seite (downloads.html)
   Werte 1:1 aus dem Pencil-Rahmen "Downloads — mixed".
   ========================================================= */

/* Kopfbereich: 1440 x 760, Bild als Füllung, Inhalte absolut */
.dl-hero {
  position: relative;
  width: 1440px;
  height: 760px;
  overflow: hidden;
  /* Der Ausschnitt sitzt tiefer im Bild, damit Schreibtisch und Person
     sichtbar sind statt der Decke. Kleinerer Wert = Ausschnitt weiter oben. */
  background: url('../assets/dl-bg.png') center 55% / cover no-repeat, #07070d;
}

/* Abdunklung über dem Bild, damit der Text sicher lesbar bleibt */
.dl-hero__scrim {
  position: absolute;
  inset: 0;
  background: #07070d;
  opacity: .62;
}

/* Schwarzer Block mit Weichzeichner: löst das Bild nach unten auf,
   damit es ohne Kante in den schwarzen Teil der Seite übergeht */
.dl-hero__fade {
  position: absolute;
  left: -80px;
  top: 580px;
  width: 1600px;
  height: 320px;
  background: #000000;
  filter: blur(60px);
}

.dl-hero__brand   { position: absolute; left: 48px; top: 23px; z-index: 2; }
.dl-hero__buttons { position: absolute; left: 1171px; top: 19.5px; z-index: 2; }
.dl-hero__buttons .btn-ghost { background: transparent; }

.dl-hero__stack {
  position: absolute;
  left: 420px;
  top: 150px;
  width: 600px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.dl-hero__icon  { width: 118px; height: 118px; border-radius: 26px; }
.dl-hero__title { font-size: 46px; line-height: 1.2; text-align: center; }

.cta__arrow { font-size: 17px; font-weight: 700; }

.dl-hero__platform {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
}
.dl-hero__apple { width: 15px; height: 16px; }

/* Das Windows-Zeichen in derselben Größe wie der Apfel – vier Kacheln,
   gesetzt wie im Entwurf des großen CTA. */
.dl-hero__windows {
  position: relative;
  display: inline-block;
  width: 15px;
  height: 15px;
}
.dl-hero__windows i {
  position: absolute;
  width: 6.5px;
  height: 6.5px;
  background: currentColor;
}
.dl-hero__windows i:nth-child(1) { left: 0;     top: 0; }
.dl-hero__windows i:nth-child(2) { left: 8.5px; top: 0; }
.dl-hero__windows i:nth-child(3) { left: 0;     top: 8.5px; }
.dl-hero__windows i:nth-child(4) { left: 8.5px; top: 8.5px; }

/* Nur zu sehen, wenn sich das System nicht erkennen ließ */
.dl-hero__hint {
  margin: 0;
  font-size: 14px;
  color: #6B7280;
  text-align: center;
}

.dl-hero__meta { margin: 0; font-size: 13px; color: #9a9aad; }

/* Tabelle mit allen Dateien: 560 breit, mittig */
.dl-all {
  width: 1440px;
  padding: 0 270px 120px;
  display: flex;
  justify-content: center;
  background: #000000;
}

.dl-table {
  width: 420px;
  padding-bottom: 8px;
  border-radius: 12px;
  background: #0B0B10;
  box-shadow: inset 0 0 0 1px #1b1b1b;
}

.dl-table__head {
  height: 64px;
  padding: 0 32px;
  display: flex;
  align-items: center;
  font-size: 19px;
  font-weight: 700;
  color: #FFFFFF;
}

.dl-table__row {
  height: 78px;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  border-top: 1px solid #1b1b1b;
}

.dl-table__platform { font-size: 16px; font-weight: 700; color: #FFFFFF; }

.dl-table__link {
  font-size: 16px;
  font-weight: 700;
  color: #a78bff;
  transition: color .18s ease;
}
.dl-table__link:hover { color: #c4b2ff; }

/* Die Zeile zum eigenen System bekommt einen ruhigen Hinweis:
   eine Spur hellere Fläche und ein Strich am linken Rand. */
.dl-table__row.is-yours {
  background: #101016;
  box-shadow: inset 2px 0 0 #7939FF;
}

/* Auf der Download-Seite schließt der Fußbereich direkt an die Tabelle an */
.dl-all + .footer { padding-top: 0; }


/* =========================================================
   Schaltflächen beim Überfahren

   Der Entwurf kennt keinen Hover-Zustand, das hier ist also die
   einzige Stelle, die nicht aus Pencil stammt.

   Bewusst zurückhaltend: die helle Fläche wird eine Spur ruhiger und
   hebt sich einen Pixel an, mehr nicht. brightness() statt einer
   zweiten Farbe, weil der große CTA einen Verlauf als Hintergrund
   hat – eine background-color läge darunter und bliebe unsichtbar.
   Die schwarze Schrift bleibt davon unberührt.

   Die Regeln stehen bewusst am Dateiende: .reveal.is-visible setzt
   transform auf none und hat dieselbe Spezifität – die später
   notierte Regel gewinnt.
   ========================================================= */
.btn-primary,
.cta,
.whatsnew__btn {
  transition:
    filter .26s cubic-bezier(.33, 1, .68, 1),
    transform .26s cubic-bezier(.33, 1, .68, 1);
}

.btn-primary:hover,
.cta:hover,
.whatsnew:hover .whatsnew__btn {
  filter: brightness(.9);
  transform: translateY(-1px);
}

/* Beim Drücken sinkt die Fläche zurück und wird kurz etwas dunkler */
.btn-primary:active,
.cta:active {
  filter: brightness(.82);
  transform: translateY(0);
  transition-duration: .09s;
}

/* Der Knopf in der Navigation hat keine Fläche – er hellt nur auf */
.btn-ghost {
  border-radius: 8px;
  transition:
    background .26s cubic-bezier(.33, 1, .68, 1),
    color .26s cubic-bezier(.33, 1, .68, 1);
}
.btn-ghost:hover {
  background: #141418;
  color: #FFFFFF;
}

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

  .btn-primary:hover,
  .cta:hover,
  .whatsnew:hover .whatsnew__btn { transform: none; }
}

/* =========================================================
   Der Schein hinter der Vorschaukarte lebt

   Auch das steht nicht im Entwurf – Pencil kennt keine Bewegung.

   Drei Lagen arbeiten gegeneinander: die beiden Scheine aus dem
   Entwurf atmen mit unterschiedlicher Dauer, und darüber wandert ein
   heller Kern langsam durch das Bild. Weil die Zeiten (23 s, 31 s,
   26 s) kein gemeinsames Vielfaches haben, wiederholt sich das Muster
   praktisch nie.
   ========================================================= */
.glow--drift {
  left: 190px;
  top: 90px;
  width: 820px;
  height: 280px;
  background: radial-gradient(
    46% 58% at 50% 50%,
    rgba(255, 255, 255, .80) 0%,
    rgba(255, 186, 246, .42) 42%,
    rgba(167, 96, 255, .18) 68%,
    transparent 78%);
  filter: blur(90px);
  opacity: .38;
  animation: glow-drift 26s cubic-bezier(.45, 0, .55, 1) infinite;
}

/* Der Kern zieht eine langsame Schleife: erst nach links, dann nach
   oben, dann nach rechts – und wird dabei mal heller, mal schwächer. */
@keyframes glow-drift {
  0%   { transform: translate(0, 0)          scale(1);    opacity: .34; }
  18%  { transform: translate(-150px, 12px)  scale(1.05); opacity: .62; }
  34%  { transform: translate(-70px, -30px)  scale(.97);  opacity: .30; }
  52%  { transform: translate(110px, -20px)  scale(1.09); opacity: .58; }
  70%  { transform: translate(160px, 16px)   scale(1.0);  opacity: .32; }
  86%  { transform: translate(30px, 22px)    scale(1.04); opacity: .50; }
  100% { transform: translate(0, 0)          scale(1);    opacity: .34; }
}

.glow--top  { animation: glow-breathe-a 23s ease-in-out infinite; }
.glow--main { animation: glow-breathe-b 31s ease-in-out infinite; }

@keyframes glow-breathe-a {
  0%, 100% { opacity: .85; transform: translateX(0)     scale(1); }
  30%      { opacity: 1;   transform: translateX(-34px) scale(1.04); }
  65%      { opacity: .7;  transform: translateX(28px)  scale(.98); }
}

@keyframes glow-breathe-b {
  0%, 100% { opacity: .9;  transform: translateX(0)     scale(1); }
  40%      { opacity: .72; transform: translateX(40px)  scale(1.03); }
  75%      { opacity: 1;   transform: translateX(-30px) scale(.99); }
}

@media (prefers-reduced-motion: reduce) {
  .glow--drift,
  .glow--top,
  .glow--main { animation: none; }
}

/* ---------- Kontaktformular ---------- */

/* Farben aus der Seite statt eigener: Schwarz als Grund, #1B1B1B fuer
   Flaechen, die darauf liegen, #1F2937 fuer Linien, #9CA3AF fuer
   gedaempften Text. Das Lila #A78BFA ist derselbe Akzent wie in der
   App - hier nur am Fokusrand, damit man sieht, wo man tippt. */

.contact {
  display: flex;
  flex-direction: column;
  max-width: 520px;
  margin: 28px 0 8px;
}

.contact label {
  font-size: 13px;
  font-weight: 600;
  color: #9CA3AF;
  margin: 18px 0 7px;
  letter-spacing: .01em;
}

.contact label:first-child { margin-top: 0; }

.contact input,
.contact textarea {
  font: inherit;
  font-size: 15px;
  padding: 11px 13px;
  color: #FFFFFF;
  background: #0B0B10;
  border: 1px solid #1F2937;
  border-radius: 8px;
  transition: border-color .15s ease, background .15s ease;
}

.contact input::placeholder,
.contact textarea::placeholder { color: #5F5F5F; }

.contact input:hover,
.contact textarea:hover { border-color: #374151; }

.contact input:focus,
.contact textarea:focus {
  outline: none;
  border-color: #A78BFA;
  background: #1B1B1B;
}

.contact textarea { resize: vertical; min-height: 150px; line-height: 1.6; }

.contact button {
  margin-top: 24px;
  align-self: flex-start;
  cursor: pointer;
  border: 0;
}

/* Der Honigtopf. Nicht display:none - manche Programme erkennen das
   und lassen das Feld dann erst recht leer. So steht es im Dokument,
   ist aber fuer Menschen und Vorleseprogramme unerreichbar. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Rueckmeldung nach dem Absenden: ein farbiger Strich links statt
   eines bunten Kastens. Auf dunklem Grund wirkt eine volle Flaeche
   schnell wie eine Warnung, auch wenn alles gut ging. */
.msg-ok,
.msg-bad {
  padding: 13px 16px;
  margin-bottom: 22px;
  border-radius: 8px;
  background: #1B1B1B;
  border-left: 3px solid;
  font-size: 15px;
  max-width: 520px;
}

.msg-ok  { border-left-color: #34D399; }
.msg-bad { border-left-color: #F87171; }

.fineprint {
  font-size: 13px;
  line-height: 1.7;
  color: #9CA3AF;
  max-width: 520px;
  margin-top: 18px;
}

.fineprint a { color: #9CA3AF; text-underline-offset: 2px; }
.fineprint a:hover { color: #FFFFFF; }

@media (max-width: 600px) {
  .contact { max-width: 100%; }
}

/* ---------- Hinweis unten ---------- */

.notice {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  margin: 0 auto;
  max-width: 620px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  background: #0B0B10;
  border: 1px solid #1F2937;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,.5), 0 18px 48px rgba(0,0,0,.45);
  /* Ruhig hereinkommen, nicht springen: Wer liest, soll nicht
     erschrecken. */
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease;
  z-index: 50;
}
.notice.is-da  { opacity: 1; transform: none; }
.notice.is-weg { opacity: 0; transform: translateY(8px); }

.notice p { margin: 0; font-size: 13px; line-height: 1.6; color: #9CA3AF; }
.notice a { color: #A78BFA; text-underline-offset: 2px; }

.notice__ok {
  flex: none;
  font: inherit; font-size: 13px; font-weight: 700;
  padding: 8px 16px;
  border: 0; border-radius: 8px;
  background: #FFFFFF; color: #000000;
  cursor: pointer;
}
.notice__ok:hover { filter: brightness(.88); }

@media (max-width: 520px) {
  .notice { flex-direction: column; align-items: stretch; gap: 12px; }
  .notice__ok { width: 100%; }
}