/* ==========================================================================
   Vertragsmanager
   Statisches HTML/CSS-Projekt
   ========================================================================== */

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

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/instrument-sans-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;
}

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/instrument-sans-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('../fonts/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;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/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;
}

/* --------------------------------------------------------------------------
   2. Design-Tokens (Farben aus "Foundations · Farben", Figma)
   -------------------------------------------------------------------------- */

:root {
  /* Primitives (Figma: Foundations - Farben) */
  --purple-700: #4338CA;  /* color/purple/700 - Markenfarbe */
  --purple-600: #5B3FD4;  /* color/purple/600 */
  --purple-500: #7C5CFC;  /* color/purple/500 */
  --purple-200: #D5CAFE;  /* color/purple/200 */
  --purple-50:  #F1EDFE;  /* color/purple/50  */
  --neutral-900: #1A1A1A; /* color/neutral/900 */
  --neutral-500: #888888; /* color/neutral/500 */
  --neutral-400: #AAAAAA; /* color/neutral/400 */
  --neutral-200: #EBEBEB; /* color/neutral/200 */
  --neutral-100: #F4F4F4; /* color/neutral/100 */
  --neutral-0:   #FFFFFF; /* color/neutral/0   */

  /* Semantische Aliase (Namen aus dem Ursprungsprojekt beibehalten) */
  --c1: var(--neutral-0);
  --c2: var(--neutral-100);
  --c3: var(--neutral-200);
  --c4: var(--purple-600);      /* Links, Fokus, Akzent */
  --c5: #4A4A4A;                /* Fliesstext: Neutral-Ramp zwischen 900 und 500 */
  --c6: var(--neutral-900);
  --c7: var(--purple-200);      /* Seitenflaeche: Header, Hero, Footer */
  --c8: var(--neutral-900);
  --c-menu-active: var(--purple-700);
  --c-btn: var(--purple-600);
  --c-btn-hover: var(--purple-700);
  --purple-900: #332A58;      /* dunkle Markenflaeche, Kundenvorgabe (nicht in Foundations) */
  --c-card-dark: var(--purple-900);
  --c-surface: var(--neutral-100);

  --font-head: 'Instrument Sans', Arial, Helvetica, sans-serif;
  --font-body: 'Inter', Arial, Helvetica, sans-serif;

  /* Seitenränder: 4 % am Rand, 10 % (des Sitewidth-Rasters) für Inhalte */
  --pad-page: 4%;
  --pad-content: calc((100% - 60px) * 0.1);

  --radius: 16px;
  --radius-sm: 8px;
  --radius-pill: 32px;

  --fs-h1: 57px;
  --fs-h2: 40px;
  --fs-h3: 37px;
  --fs-h4: 28px;
  --fs-h5: 24px;
  --fs-h6: 18px;
  --fs-body: 19px;
  --lh-head: 1.25;
  --lh-body: 1.8;

  --shadow-card: 0 2px 14px rgba(26, 26, 26, 0.06);
  --shadow-focus: 0 0 0 3px rgba(124, 92, 252, 0.25);
}

/* --------------------------------------------------------------------------
   3. Reset / Basis
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background-color: var(--c7);
}

main {
  padding-bottom: 10vh;
}

/* Der letzte Abschnitt der Startseite traegt einen eigenen Hintergrund und
   soll buendig an den Footer stossen - hier also kein Abstand darunter. */
.main--flush {
  padding-bottom: 0;
}

body {
  margin: 0;
  background-color: var(--c1);
  color: var(--c5);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

img,
svg {
  max-width: 100%;
  height: auto;
  border: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: var(--lh-head);
  color: var(--c8);
  margin: 0 0 0.6em;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

p {
  margin: 0 0 1em;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--c8);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover,
a:focus-visible {
  color: var(--c4);
}

:focus-visible {
  outline: 2px solid var(--c4);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  background: var(--c8);
  color: var(--c1);
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
  left: 0;
  color: var(--c1);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   4. Layout-Bausteine
   -------------------------------------------------------------------------- */

.section {
  padding: 40px var(--pad-content);
}

.section--lg { padding-top: 134px; padding-bottom: 200px; }
.section--faq { padding-top: 79px; padding-bottom: 111px; }
.section--hero-card { padding-top: 120px; padding-bottom: 105px; }

/* Abschluss-Sektion: Liste ohne Karte, direkt auf dem Seitenhintergrund.
   Oben 60px, dazu die 60px Unterkante der letzten Feature-Reihe = 120px
   Abstand nach oben; unten 100px bis zur Footer-Kante. */
.section--overview {
  padding-top: 80px;
  padding-bottom: 170px;
  background-color: var(--c-surface);
  text-align: center;
}

.section--overview .title-xl {
  margin-bottom: 44px;
}

.section--feature { padding-top: 60px; padding-bottom: 136px; }
.section--feature:last-of-type { padding-bottom: 60px; }
.section--boxes { padding-left: 30px; padding-right: 30px; }
.section--cream { background-color: var(--c7); }
.section--feedback { padding: 90px 0 0; }
.section--tight { padding-top: 0; }
.section--flush { padding-bottom: 0; }

.container {
  width: 100%;
  margin: 0 auto;
}

.container--narrow {
  max-width: 900px;
}

/* Unsichtbarer Abstandhalter (im Original eine transparente Trennlinie) */
.separator {
  height: 0;
  margin: 10px 0 0;
  border: 0;
}

.separator--visible {
  height: 1px;
  margin: 24px 0;
  border-top: 1px solid var(--c3);
}


/* Große Fließtext-Überschrift (im Original 57 px, Schnitt 400) */
.title-xl {
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: 1.25;
  color: var(--c8);
  margin: 0 0 62px;
}

.section--lg .title-xl {
  margin-bottom: 53px;
}

.title-center { text-align: center; }

/* Manuell gesetzte Umbrueche greifen nur im Desktop-Layout. Darunter
   bricht der Text wieder von selbst um. */
.br-desktop { display: none; }

@media (min-width: 1025px) {
  .br-desktop { display: inline; }
}

/* Unterhalb von 1025px bricht der Text wieder automatisch um. text-wrap
   verhindert dabei einzelne Woerter in der letzten Zeile, hyphens trennt
   lange Komposita, statt sie ueberstehen zu lassen. Browser ohne
   Unterstuetzung ignorieren die Angaben folgenlos. */
@media (max-width: 1024px) {
  .hero__title,
  .title-xl,
  .card-dark__title,
  .feature-row__title {
    text-wrap: balance;
  }

  .hero__text,
  .lead,
  .card-dark__lead,
  .feature-row__body p {
    text-wrap: pretty;
    hyphens: auto;
  }
}

.swiss-made {
  margin: 0 0 40px;
}

.swiss-made img {
  display: block;
  width: 500px;
  max-width: 100%;
}

.title-48 {
  font-size: 48px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--c8);
  margin: 0 0 40px;
}

.lead {
  font-size: 20px;
  line-height: 36px;
  margin: 0;
}

.lead--center { text-align: center; }

.cta-center {
  margin: 60px 0 0;
  text-align: center;
}

.faq-block {
  max-width: 888px;
  margin: 0 auto;
}

.faq-block .title-xl {
  max-width: 582px;
  margin: 0 auto 84px;
}

.faq-intro {
  margin: 0 0 40px;
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 17px 40px;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  line-height: 21px;
  text-align: center;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

.btn svg {
  flex: none;
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.btn--primary {
  background-color: var(--c-btn);
  color: var(--c1);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background-color: var(--c-btn-hover);
  color: var(--c1);
}

/* Auf dunklem Grund kippt der Hover ins Helle */
.btn--on-dark:hover,
.btn--on-dark:focus-visible {
  background-color: var(--c1);
  color: var(--c8);
}

/* Optisch ein Button, aber ohne Funktion (Platzhalter bis zum Launch). */
.btn--static,
.btn--static:hover {
  cursor: default;
  pointer-events: none;
}

.btn--bold {
  font-weight: 600;
}

/* Textlink-Variante („Feedback geben") */
.btn--ghost {
  background-color: transparent;
  color: var(--c8);
  font-weight: 600;
  border-radius: 4px;
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  color: var(--c4);
}

/* --------------------------------------------------------------------------
   5b. Hinweisstreifen ueber dem Header
   -------------------------------------------------------------------------- */

/* Durchgehender Streifen ganz oben. Traegt die Pflichtkennzeichnung
   "Anzeige" und nutzt dieselben Seitenraender wie der Header darunter. */
.topbar {
  background-color: var(--purple-900);
  color: var(--c1);
  padding: 10px var(--pad-page);
}

.topbar__label {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--c1);
}

/* --------------------------------------------------------------------------
   6. Header / Navigation
   -------------------------------------------------------------------------- */

.site-header {
  position: relative;
  z-index: 900;
  background-color: var(--c7);
  padding: 60px var(--pad-page) 30px;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
}

.site-header__logo {
  flex: none;
  display: block;
  width: 280px;
  max-width: 45vw;
}

.site-header__logo img {
  display: block;
  width: 100%;
}

.nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 35px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__link {
  display: inline-block;
  padding: 5px 0 7px;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  line-height: 32.4px;
  color: var(--c5);
  border-bottom: 2px solid transparent;
}

.nav__link:hover,
.nav__link:focus-visible {
  color: var(--c-menu-active);
}

.nav__link[aria-current='page'] {
  color: var(--c-menu-active);
  border-bottom-color: var(--c-menu-active);
}

.site-header__actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav-toggle {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--c8);
  cursor: pointer;
}

.nav-toggle svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
}

.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded='true'] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded='true'] .nav-toggle__close { display: block; }

/* --------------------------------------------------------------------------
   7. Hero (Startseite)
   -------------------------------------------------------------------------- */

.hero {
  padding: 25px var(--pad-content) 120px;
  background-color: var(--c7);
}

.hero__body {
  width: 50%;
  min-width: 0;
  padding-top: 10px;
}

/* Badge und App-Screenshot liegen bereits auf weißem Grund und ragen
   per negativem Außenabstand in den cremefarbenen Hero hinein. */
.hero-app {
  padding: 0 var(--pad-page);
}

.hero-app__inner {
  display: flex;
  align-items: flex-start;
  gap: 46px;
}

.hero-app__badge {
  flex: 0 0 45%;
  margin-top: -59px;
}

.hero-app__media {
  flex: 1 1 0;
  min-width: 0;
  margin-top: -530px;
  text-align: center;
}

.hero-app__media img {
  display: inline-block;
  width: 100%;
  max-width: 540px;
}

/* Sehr grosse Bildschirme: Die Ueberschrift erreicht ihre Maximalgroesse und
   der Text bricht seltener um, der Hero wird dadurch niedriger. Das Phone
   rueckt aber immer um denselben festen Wert nach oben und wuerde hinter dem
   Header abgeschnitten. Mindesthoehe = Hero-Hoehe bei 1440px, damit das Phone
   dort sitzt wie auf normalen Desktop-Breiten. */
@media (min-width: 1441px) {
  .hero { min-height: 519px; }
}

.hero__title {
  /* Fluid bis 54px: so bleibt "Tschüss Vertragskram," auf allen Desktop-
     Breiten in einer Zeile, statt je nach Fensterbreite umzubrechen. */
  font-size: clamp(38px, 3.5vw, 54px);
  line-height: 1.25;
  margin: 0 0 31px;
}


.hero__text {
  font-size: 20px;
  line-height: 36px;
  margin: 0;
}

.hero__badges {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hero__badge {
  display: inline-block;
  transition: transform 0.25s ease;
}

.hero__badge:hover {
  transform: translateY(-6px);
}

.hero__badge img {
  display: block;
  width: 200px;
}

/* Hinweis ueber den Store-Badges: Die App ist noch nicht verfuegbar.
   Schriftgroesse wie der Hero-Fliesstext darueber (.hero__text).
   Hoehe 38px (28px Zeile + 10px Abstand) - um genau diesen Wert ruecken die
   Badge-Bloecke per margin-top nach oben, damit die Badges an ihrer Position
   bleiben. */
.hero__badges-label {
  margin: 0 0 10px;
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  color: var(--c8);
}

.hero__badge-note {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.6;
}



/* --------------------------------------------------------------------------
   8. Karten-Sektionen
   -------------------------------------------------------------------------- */

.card-dark {
  padding: 40px 40px 60px;
  background-color: var(--c-card-dark);
  border-radius: var(--radius);
  color: var(--c1);
  text-align: center;
}

.card-dark h2 {
  font-size: var(--fs-h3);
  line-height: 46.25px;
  color: var(--c1);
  margin: 0 0 56px;
}

.card-dark p {
  color: var(--c1);
}

.card-dark__lead {
  max-width: 100%;
  margin: 0;
  font-size: 19px;
  line-height: 34.2px;
}

.card-dark .checklist {
  margin-top: 40px;
}

/* Auf dem dunklen Grund braucht der Haken-Kreis den hellsten Ton,
   sonst verliert er sich im Hintergrund. */
.card-dark .checklist li::before {
  background-color: var(--c1);
}

.card-dark__cta {
  margin: 68px 0 0;
}

.card-dark--hero {
  padding-bottom: 40px;
}

.card-dark__title {
  font-size: var(--fs-h3);
  line-height: 46.25px;
  color: var(--c1);
  text-align: center;
  margin: 0 0 56px;
}

.card-dark--hero .card-dark__lead {
  max-width: 865px;
  margin: 0 auto;
}

.card-light {
  padding: 40px;
  background-color: var(--c2);
  border-radius: var(--radius);
}

.card-light .form {
  margin-bottom: 19px;
}

.card-light__pre {
  font-size: 20px;
  line-height: 36px;
  margin: 16px 0 0;
}

.card-light__title {
  font-size: var(--fs-h1);
  line-height: 71.25px;
  margin: 0 0 57px;
}

/* --------------------------------------------------------------------------
   9. Checkliste
   -------------------------------------------------------------------------- */

.checklist {
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.checklist li {
  position: relative;
  padding: 4.7px 0 4.7px 44px;
  font-size: 22px;
  line-height: 40px;
}

.checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--c7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231A1A1A' d='M9.55 17.6 4 12.05l1.4-1.4 4.15 4.15L18.6 5.75 20 7.15z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 17px 17px;
}

.checklist--columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 48px;
}

/* --------------------------------------------------------------------------
   10. Zwei-Spalten-Reihen (Features, Über uns, Feedback)
   -------------------------------------------------------------------------- */

.feature-row {
  display: flex;
  align-items: center;
  gap: 46px;
}

.feature-row__media,
.feature-row__body {
  flex: 1 1 50%;
  min-width: 0;
}

.feature-row__media img {
  display: block;
  width: 100%;
}

.feature-row--reverse .feature-row__media {
  order: 2;
}

.feature-row__body h2 {
  font-size: var(--fs-h2);
  margin-top: 0;
}

.feature-row__title {
  font-size: 50px;
  line-height: 1.2;
  margin: 0 0 27px;
}

.feature-row__body p {
  font-size: 19px;
  line-height: 34.2px;
}

/* --------------------------------------------------------------------------
   11. Info-Boxen (Über uns)
   -------------------------------------------------------------------------- */

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

.info-box {
  display: flex;
  gap: 19px;
  padding: 60px 60px 45px;
  background-color: var(--c7);
  border-radius: var(--radius-sm);
}

.info-box__icon {
  flex: none;
  width: 60px;
}

.info-box__icon svg {
  width: 57px;
  height: 32px;
  fill: var(--c8);
}

.info-box__body {
  min-width: 0;
}

.info-box h3 {
  font-size: 22px;
  line-height: 1.25;
  color: var(--c8);
  margin: 0 0 20px;
}

.info-box p {
  font-size: 19px;
  line-height: 34.2px;
  color: var(--c8);
  margin: 0;
}

/* --------------------------------------------------------------------------
   12. Akkordeon (FAQ)
   -------------------------------------------------------------------------- */

.accordion {
  width: 100%;
  max-width: 888px;
  margin: 0 auto;
  text-align: left;
}

.accordion__heading {
  margin: 0;
}

.accordion__button {
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  padding: 10px 0;
  background: transparent;
  border: 0;
  text-align: left;
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 600;
  line-height: 22px;
  color: var(--c8);
  cursor: pointer;
  transition: color 0.2s ease;
}

.accordion__button:hover {
  color: var(--c4);
}

.accordion__icon {
  flex: none;
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.accordion__button[aria-expanded='true'] .accordion__icon-plus { display: none; }
.accordion__button[aria-expanded='false'] .accordion__icon-minus { display: none; }

.accordion__panel {
  display: none;
  padding: 10px 0 15px 28px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--c5);
}

.accordion__panel.is-open {
  display: block;
}

.accordion__panel p {
  margin: 0;
}

/* --------------------------------------------------------------------------
   13. Formulare
   -------------------------------------------------------------------------- */

.form__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
}

.form__field {
  flex: 1 1 100%;
  margin-bottom: 20px;
}

.form__field--half {
  flex: 1 1 calc(50% - 12px);
}

.form__label {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 34.2px;
  font-weight: 400;
  color: var(--c5);
}

.form__label .req {
  color: var(--c4);
}

.form__input,
.form__textarea {
  display: block;
  width: 100%;
  height: 50px;
  padding: 0 16px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--c8);
  background-color: var(--c1);
  border: 2px solid var(--c3);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form__textarea {
  height: auto;
  min-height: 114px;
  padding: 13px 16px;
  line-height: 1.6;
  resize: vertical;
}

.form__input::placeholder,
.form__textarea::placeholder {
  color: var(--neutral-400);
}

.form__input:focus,
.form__textarea:focus {
  outline: 0;
  border-color: var(--c4);
  box-shadow: var(--shadow-focus);
}

.form__legend {
  margin: 0;
  padding: 0;
  font-size: 19px;
  line-height: 34.2px;
  color: var(--c5);
}

.form__checks {
  border: 0;
  margin: 29px 0 38px;
  padding: 0;
}

.form__check {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 9.7px;
  font-size: 19px;
  line-height: 34.2px;
}

.form__checks .form__legend + .form__check {
  margin-top: 29px;
}

.form__check input {
  flex: none;
  width: 14px;
  height: 14px;
  accent-color: var(--c4);
}

.form__check label {
  cursor: pointer;
}

/* Pflicht-Zustimmung zum Datenschutz */
.form__consent {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 24px;
}

.form__consent input {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 8px;
  accent-color: var(--c4);
}

.form__consent label {
  font-size: 17px;
  line-height: 34.2px;
  color: var(--c5);
  cursor: pointer;
}

.form__consent a {
  color: var(--c4);
  text-decoration: underline;
}

.form__consent a:hover {
  color: var(--c8);
}

/* Honeypot – unsichtbar für Menschen, sichtbar für Bots */
.form__hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.alert {
  display: none;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
  padding: 16px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 16px;
  line-height: 1.5;
}

.alert.is-visible {
  display: flex;
}

.alert svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  fill: currentColor;
}

.alert--success {
  background-color: var(--purple-50);
  border-color: var(--c4);
  color: var(--c8);
}

.alert--error {
  background-color: rgba(207, 46, 46, 0.08);
  border-color: #cf2e2e;
  color: #8f1f1f;
}

.alert__close {
  margin-left: auto;
  padding: 0 4px;
  background: none;
  border: 0;
  font-size: 20px;
  line-height: 1;
  color: inherit;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background-color: var(--c7);
  padding: 60px var(--pad-page) 76px;
}

.site-footer__inner {
  display: flex;
  align-items: center;
  gap: 24px;
}

.site-footer__logo {
  flex: none;
  display: block;
  width: 280px;
  max-width: 60vw;
}

.site-footer__logo img {
  display: block;
  width: 100%;
}

.site-footer__meta {
  margin-top: 50px;
}

.site-footer__brand {
  margin: 0;
  font-size: 17px;
  line-height: 23.97px;
  color: var(--c8);
}

.site-footer__links {
  margin: 200px 0 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 27px;
  color: var(--c8);
}

.site-footer__links a {
  color: var(--c8);
}

.site-footer__links a:hover {
  color: var(--c4);
}

.to-top {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background-color: var(--c8);
  color: var(--c1);
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease, background-color 0.25s ease;
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
}

.to-top:hover {
  background-color: var(--c-btn);
  color: var(--c1);
}

.to-top svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* --------------------------------------------------------------------------
   15. Rechtstexte
   -------------------------------------------------------------------------- */

/* Feedback-Seite: Kopfbereich zentriert, darunter Bild links / Formular rechts */
.feedback-head {
  text-align: center;
  padding: 0 70px 40px;
}

.feedback-head h1 {
  font-size: 48px;
  line-height: 1.25;
  margin: 0 0 40px;
}

.feedback-head p {
  font-size: 19px;
  line-height: 34.2px;
  margin: 0;
}

.feedback-body {
  display: flex;
  align-items: flex-start;
}

.feedback-body__media,
.feedback-body__form {
  flex: 1 1 50%;
  min-width: 0;
  padding: 0 28px;
}

.feedback-body__media {
  text-align: center;
}

.feedback-body__media img {
  display: inline-block;
  width: 480px;
  max-width: 100%;
}

/* Rechtstexte: volle Inhaltsbreite auf Weiß, wie im Original */
.legal {
  width: 100%;
  margin: 40px 0 0;
  background-color: var(--c1);
  padding: 13vh 5vw 40px 0;
}

.legal h1 {
  font-size: var(--fs-h2);
  margin-top: 0;
}

.legal h2 { font-size: var(--fs-h4); margin-top: 1.6em; }
.legal h3 { font-size: var(--fs-h5); margin-top: 1.6em; }
.legal h4 { font-size: var(--fs-h6); margin-top: 1.6em; }

.legal p,
.legal li {
  font-size: 17px;
  line-height: 1.75;
}

.legal a {
  color: var(--c4);
  text-decoration: underline;
}

.legal ul,
.legal ol {
  padding-left: 1.4em;
}

.legal table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 16px;
}

.legal th,
.legal td {
  border: 1px solid var(--c3);
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}

/* --------------------------------------------------------------------------
   16. Cookie-Banner
   -------------------------------------------------------------------------- */

.cookie-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: rgba(26, 26, 26, 0.45);
}

.cookie-overlay.is-open {
  display: flex;
}

.cookie {
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 28px;
  background-color: var(--c1);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(26, 26, 26, 0.25);
}

.cookie__title {
  margin: 0 0 12px;
  font-size: 20px;
}

.cookie__text {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--c5);
}

.cookie__categories {
  display: none;
  margin: 0 0 16px;
  border-top: 1px solid var(--c3);
}

.cookie__categories.is-open {
  display: block;
}

.cookie__category {
  border-bottom: 1px solid var(--c3);
  padding: 12px 0;
}

.cookie__category-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 15px;
  font-weight: 500;
  color: var(--c8);
}

.cookie__category-head label {
  cursor: pointer;
}

.cookie__category input {
  width: 18px;
  height: 18px;
  accent-color: var(--c4);
}

.cookie__always {
  font-size: 13px;
  color: var(--c5);
}

.cookie__category-text {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--c5);
}

.cookie__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cookie__btn {
  display: block;
  width: 100%;
  padding: 11px 18px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  border: 1px solid var(--c-btn);
  border-radius: var(--radius-pill);
  background-color: var(--c-btn);
  color: var(--c1);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.cookie__btn:hover {
  background-color: var(--c8);
  border-color: var(--c8);
  color: var(--c1);
}

.cookie__btn--secondary {
  background-color: transparent;
  color: var(--c8);
  border-color: var(--c3);
}

.cookie__btn--secondary:hover {
  background-color: var(--c2);
  border-color: var(--c3);
  color: var(--c8);
}

.cookie__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

.cookie__links a {
  color: var(--c5);
  text-decoration: underline;
}

.cookie-reopen {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 800;
  display: none;
  padding: 8px 16px;
  font-family: var(--font-body);
  font-size: 13px;
  background-color: var(--c1);
  color: var(--c8);
  border: 1px solid var(--c3);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card);
  cursor: pointer;
}

.cookie-reopen.is-visible {
  display: block;
}

/* --------------------------------------------------------------------------
   Store-Hinweis-Dialoge
   -------------------------------------------------------------------------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: rgba(26, 26, 26, 0.45);
}

.modal-overlay.is-open {
  display: flex;
}

.modal {
  position: relative;
  width: 100%;
  max-width: 460px;
  padding: 32px 28px 28px;
  background-color: var(--c1);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(26, 26, 26, 0.25);
  text-align: left;
}

.modal__title {
  margin: 0 0 12px;
  padding-right: 32px;
  font-size: 22px;
  line-height: 1.25;
}

.modal__text {
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--c5);
}

.modal__btn {
  display: block;
  width: 100%;
  padding: 12px 18px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  border: 1px solid var(--c-btn);
  border-radius: var(--radius-pill);
  background-color: var(--c-btn);
  color: var(--c1);
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.modal__btn:hover {
  opacity: 0.9;
}

.modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 24px;
  line-height: 1;
  color: var(--c5);
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.modal__close:hover {
  background-color: var(--c2);
  color: var(--c8);
}

/* Die Badges sind Buttons, sollen aber wie reine Bilder wirken. */
.hero__badge {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   17. Animationen
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   18. Responsive
   -------------------------------------------------------------------------- */

/* Menü klappt im Original ab 1124 px zusammen */
@media (max-width: 1124px) {
  .nav-toggle {
    display: flex;
    order: 3;
  }

  .site-header__inner {
    flex-wrap: nowrap;
  }

  .site-header__actions {
    order: 2;
    margin-left: auto;
  }

  .nav {
    order: 4;
    flex: 1 1 100%;
    display: none;
  }

  .nav.is-open {
    display: block;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 20px;
    background-color: var(--c1);
    border-radius: var(--radius-sm);
    overflow: hidden;
  }

  .nav__list li + li {
    border-top: 1px solid var(--c3);
  }

  .nav__link {
    display: block;
    padding: 14px 18px;
    line-height: 1.5;
    border-bottom: 0;
  }

  .nav__link[aria-current='page'] {
    background-color: var(--c2);
  }
}

@media (max-width: 1200px) {
  :root {
    --fs-h1: 46px;
    --fs-h2: 34px;
    --fs-h3: 30px;
  }

  /* Kein fester Wert mehr: die clamp()-Groesse aus .hero__title greift weiter,
     damit der gesetzte Umbruch nach "Vertragskram," auch hier haelt. */
  .hero__app { margin-top: 90px; }
  .card-light__title { font-size: var(--fs-h1); line-height: 1.25; }
  .checklist li { font-size: 19px; line-height: 34px; }
}

@media (max-width: 1024px) {
  :root {
    --pad-page: 5vw;
    --pad-content: 5vw;
    --fs-body: 18px;
  }

  .site-header {
    padding-top: 50px;
    padding-bottom: 25px;
  }

  .section {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  /* Bis 1024 px bleibt der Hero zweispaltig – nur kompakter. */
  .hero {
    padding-top: 30px;
    padding-bottom: 230px;
  }

  .hero__title { font-size: 48px; }

  .hero-app__badge { margin-top: -164px; }
  .hero-app__media { margin-top: -530px; }
  .hero-app__media img { max-width: 383px; }

  /* Im Kopfbereich bleibt nur der Download-Button */
  .site-header__actions .btn--ghost { display: none; }
  .btn { padding: 13px 32px; font-size: 17px; }

  .info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .legal {
    padding-top: 8vh;
  }

  .site-footer__links { margin-top: 80px; }
}

@media (max-width: 782px) {
  :root {
    --fs-h1: 38px;
    --fs-h2: 30px;
    --fs-h3: 26px;
    --fs-h4: 24px;
    --fs-h5: 21px;
  }

  .site-header {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  /* Kein Burger-Menue mehr: Wortmarke und CTA stehen mobil untereinander,
     beide zentriert. So bleibt die Wortmarke gross genug lesbar, statt sich
     die Zeile mit dem Button teilen zu muessen. */
  .site-header__inner {
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 38px;
  }

  .site-header__logo {
    width: 240px;
    max-width: 70vw;
  }

  .site-header__actions {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-left: 0;
  }

  .site-header__actions .btn { width: 100%; padding: 11px 24px; font-size: 16px; white-space: nowrap; text-align: center; justify-content: center; }

  .section {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .hero {
    padding-top: 20px;
    padding-bottom: 70px;
  }

  .hero__body { width: 100%; }
  .hero__title { font-size: 40px; margin-bottom: 20px; }
  .hero__text { font-size: 18px; line-height: 1.7; }

  /* Gestapelt: erst der Screenshot, dann das Badge */
  .hero-app__inner {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .hero-app__badge {
    flex: none;
    order: 2;
    margin-top: 0;
    text-align: center;
  }

  .hero-app__media {
    flex: none;
    order: 1;
    width: 100%;
    margin-top: -60px;
  }

  .hero-app__media img { max-width: 300px; }
  .hero__badges {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .hero__badge { margin: 0 auto; }
  .hero__badge img { width: 200px; }
  .hero__badge-note { text-align: center; }
  .hero__badges-label { font-size: 18px; text-align: center; }

  .title-xl.title-center { text-align: left; }

  .section--lg { padding-top: 40px; padding-bottom: 40px; }
  .section--lg .title-xl { margin-bottom: 40px; }

  .card-dark,
  .card-light {
    padding: 28px 22px 40px;
  }

  .card-light { padding-bottom: 28px; }
  .card-light__title { font-size: var(--fs-h1); line-height: 1.25; }

  .checklist li {
    padding-left: 42px;
  }

  .checklist li::before {
    width: 30px;
    height: 30px;
    top: 7px;
    background-size: 16px 16px;
  }

  .checklist--columns {
    grid-template-columns: minmax(0, 1fr);
  }

  .feature-row {
    flex-direction: column;
    gap: 24px;
  }

  .feature-row--reverse .feature-row__media { order: 0; }
  .feature-row__media { order: -1; }

  .info-grid { grid-template-columns: minmax(0, 1fr); }

  .form__field--half { flex: 1 1 100%; }
  .form__legend { font-size: 18px; line-height: 1.6; }

  .accordion__button {
    font-size: 18px;
    line-height: 1.35;
  }

  .accordion__panel {
    padding-left: 28px;
    font-size: 16px;
  }

  .site-footer {
    padding-top: 40px;
  }

  .site-footer__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .site-footer__meta { margin-top: 32px; }
  .site-footer__links { margin-top: 24px; }

    .legal {
    padding: 60px 25px 40px;
  }

  .feedback-head { padding: 0 0 24px; }

  .feedback-body { flex-direction: column; gap: 32px; }

  .feedback-body__media { order: -1; }

  .to-top { left: 16px; bottom: 16px; }
  .cookie-reopen { right: 16px; bottom: 16px; }
}

/* Muss hinter dem allgemeinen .section-Block des 782px-Breakpoints stehen. */
@media (max-width: 782px) {
  .section--overview {
    padding-top: 40px;
    padding-bottom: 120px;
    text-align: left;
  }

  .section--overview .title-xl { margin-bottom: 26px; }
}