/* ============================================================
   LANDINGPAGE CHRIS PYSCHNEU
   ============================================================
   Aufbau dieser Datei:
     1. Farben und Grundwerte (hell und dunkel)
     2. Grundlagen (Schrift, Abstaende, Rahmen)
     3. Knoepfe
     4. Kopf, Einstieg, Ablauf, Person, Fragen, Anfrage, Fuss
     5. Rechtstexte (Impressum, Datenschutz)

   Die Seite richtet sich nach der Einstellung des Geraets:
   helles Geraet = helle Seite, dunkles Geraet = dunkle Seite.
   Farben sind dieselben wie in den Anzeigen.

   Rundungen: Knoepfe ganz rund, Karten und Bilder 20px, Felder 12px.
   Ebenen: nur die Haftleiste am Handy liegt ueber dem Inhalt (50).
   ============================================================ */

/* ---------- 1. Farben und Grundwerte ---------- */
:root {
  color-scheme: light dark;

  --schrift-titel: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --schrift-text: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --grund: #F7F4EE;
  --grund-getoent: #EFE8DD;
  --flaeche: #FFFDF9;
  --text: #2E211A;
  --text-leise: #6B574A;
  --linie: #DDD0BF;
  --akzent: #A34327;
  --knopf-grund: #A34327;
  --knopf-text: #FBF6EE;
  --knopf-hover: #8C3820;
  --feld-grund: #FFFDF9;
  --feld-rand: #9A8670;
  --fehler: #9B2C1B;
  --schatten: 0 22px 44px -22px rgba(70, 45, 25, .38);
  --form-a: #F0E8DC;
  --form-b: #EADFD0;
  --form-c: rgba(163, 67, 39, .11);

  --rund-karte: 20px;
  --rund-feld: 12px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --grund: #2C201A;
    --grund-getoent: #33261E;
    --flaeche: #3A2B22;
    --text: #F7F1E8;
    --text-leise: #D2C3B3;
    --linie: #4D3B2F;
    --akzent: #E8895F;
    --knopf-grund: #F7F1E8;
    --knopf-text: #2C201A;
    --knopf-hover: #FFFBF4;
    --feld-grund: #33261E;
    --feld-rand: #8F7B69;
    --fehler: #FFB4A2;
    --schatten: 0 22px 44px -22px rgba(0, 0, 0, .65);
    --form-a: #33261E;
    --form-b: #3A2B22;
    --form-c: rgba(163, 67, 39, .30);
  }
}
:root[data-theme="dark"] {
  --grund: #2C201A;
  --grund-getoent: #33261E;
  --flaeche: #3A2B22;
  --text: #F7F1E8;
  --text-leise: #D2C3B3;
  --linie: #4D3B2F;
  --akzent: #E8895F;
  --knopf-grund: #F7F1E8;
  --knopf-text: #2C201A;
  --knopf-hover: #FFFBF4;
  --feld-grund: #33261E;
  --feld-rand: #8F7B69;
  --fehler: #FFB4A2;
  --schatten: 0 22px 44px -22px rgba(0, 0, 0, .65);
  --form-a: #33261E;
  --form-b: #3A2B22;
  --form-c: rgba(163, 67, 39, .30);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--schrift-titel);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}
h2 { font-size: clamp(1.8rem, 1.35rem + 2vw, 2.6rem); }
h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.005em; }

p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }

a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 3px;
  border-radius: 6px;
}

.rahmen {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: 20px;
}
.rahmen-schmal { max-width: 800px; }
.rahmen-formular { max-width: 580px; }

.abschnitt { padding-block: 72px; }
.abschnitt-getoent { background: var(--grund-getoent); }
.abschnitt h2 { margin-bottom: 36px; }

.sprungmarke {
  position: absolute;
  left: 16px;
  top: -80px;
  padding: 10px 16px;
  background: var(--flaeche);
  color: var(--text);
  border-radius: var(--rund-feld);
}
.sprungmarke:focus { top: 12px; }

.unsichtbar {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- 3. Knoepfe ---------- */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 12px 22px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-family: var(--schrift-titel);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, transform .12s ease, border-color .2s ease;
}
.knopf .ph { font-size: 1.3em; }
.knopf:active { transform: translateY(1px); }
.knopf:focus-visible { border-radius: 999px; }

.knopf-haupt {
  background: var(--knopf-grund);
  color: var(--knopf-text);
}
.knopf-haupt:hover { background: var(--knopf-hover); }

.knopf-zweit {
  background: transparent;
  color: var(--text);
  border-color: var(--feld-rand);
}
.knopf-zweit:hover { border-color: var(--text); }

.knopf-breit { width: 100%; }

.knopf[disabled] {
  opacity: .7;
  cursor: progress;
}

/* ---------- 4a. Kopf ---------- */
.kopf-innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
}
.marke {
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.kopf-knopf {
  display: none;
  min-height: 46px;
  padding: 8px 20px;
  font-size: .95rem;
}

/* ---------- 4b. Einstieg ---------- */
.einstieg { padding-block: 20px 64px; }
.einstieg-raster {
  display: grid;
  gap: 36px;
}
.vorzeile {
  font-family: var(--schrift-titel);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--akzent);
  margin-bottom: 14px;
}
.einstieg h1 {
  font-size: clamp(2.45rem, 1.5rem + 4.6vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
}
.einstieg-absatz {
  margin-top: 18px;
  max-width: 34em;
  font-size: 1.125rem;
  color: var(--text-leise);
}
.knopf-reihe {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}

/* Die Karte liegt immer auf dem dunklen Motiv, deshalb feste Farben */
.angebot {
  position: relative;
  overflow: hidden;
  border-radius: var(--rund-karte);
  aspect-ratio: 16 / 11;
  background: #2C201A;
  box-shadow: var(--schatten);
  outline: 1px solid rgba(247, 241, 232, .09);
  outline-offset: -1px;
}
.angebot picture, .angebot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.angebot img { object-fit: cover; object-position: center 60%; }
.angebot-inhalt {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 26px;
  color: #F7F1E8;
}
.angebot-frage {
  font-family: var(--schrift-titel);
  font-weight: 500;
  font-size: 1.05rem;
}
.angebot-preis {
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: clamp(3.6rem, 2.4rem + 6vw, 5.25rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: #E8895F;
  margin-block: 6px 10px;
}
.angebot-zeile {
  font-size: 1.05rem;
  line-height: 1.4;
  color: #E4D6C6;
}

/* ---------- 4c. Ablauf ---------- */
.ablauf {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ablauf li {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 8px 14px;
  padding-block: 24px;
}
.ablauf li + li { border-top: 1px solid var(--linie); }
.ablauf li:first-child { padding-top: 0; }
.ablauf li:last-child { padding-bottom: 0; }
.ablauf-zahl {
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: 2.75rem;
  line-height: .95;
  color: var(--akzent);
}
.ablauf h3 { margin-bottom: 8px; }
.ablauf p { color: var(--text-leise); }

/* ---------- 4d. Person ---------- */
.person {
  display: grid;
  gap: 32px;
}
.person-bild img {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--rund-karte);
  box-shadow: var(--schatten);
}
.abschnitt .person-text h2 { margin-bottom: 20px; }
.person-text p + p { margin-top: 16px; }
.person-text p { max-width: 36em; }
.person-name {
  font-family: var(--schrift-titel);
  font-weight: 600;
  color: var(--text-leise);
}

/* ---------- 4e. Fragen ---------- */
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen details:first-child { border-top: 1px solid var(--linie); }
.fragen summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 2px;
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary .ph {
  flex: none;
  font-size: 1.35rem;
  color: var(--akzent);
  transition: transform .2s ease;
}
.fragen details[open] summary .ph { transform: rotate(45deg); }
.fragen details p {
  padding: 0 2px 22px;
  max-width: 38em;
  color: var(--text-leise);
}

/* ---------- 4f. Anfrage ---------- */
#anfrage { scroll-margin-top: 16px; }
.abschnitt .rahmen-formular h2 { margin-bottom: 14px; }
.anfrage-absatz {
  color: var(--text-leise);
  margin-bottom: 28px;
}
.karte {
  background: var(--flaeche);
  border-radius: var(--rund-karte);
  padding: 24px 20px;
  box-shadow: var(--schatten);
}
.feld { margin-bottom: 18px; }
.feld label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 1rem;
}
.feld-freiwillig { font-weight: 400; color: var(--text-leise); }
.feld input {
  width: 100%;
  height: 54px;
  padding: 0 16px;
  border: 1.5px solid var(--feld-rand);
  border-radius: var(--rund-feld);
  background: var(--feld-grund);
  color: var(--text);
  font: inherit;
  font-size: 1.0625rem;
}
.feld input:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 1px;
  border-color: var(--akzent);
}
.feld input[aria-invalid="true"] { border-color: var(--fehler); }
.feld-hilfe {
  margin-top: 6px;
  font-size: .92rem;
  color: var(--text-leise);
}
.feld-fehler, .formular-status {
  margin-top: 6px;
  font-size: .95rem;
  font-weight: 500;
  color: var(--fehler);
}
.feld-fehler:empty, .formular-status:empty { display: none; }
.formular-status { margin-top: 14px; }
.formular-hinweis {
  margin-top: 16px;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--text-leise);
}
.erfolg {
  text-align: center;
  padding: 20px 8px;
}
.erfolg .ph {
  font-size: 3.25rem;
  color: var(--akzent);
}
.erfolg h3 { margin-block: 12px 8px; font-size: 1.4rem; }
.erfolg p { color: var(--text-leise); }
.erfolg:focus { outline: none; }
.oder {
  margin-block: 18px;
  text-align: center;
  color: var(--text-leise);
}

/* ---------- 4g. Fuss und Haftleiste ---------- */
.fuss {
  border-top: 1px solid var(--linie);
  padding-block: 28px 104px;
  font-size: .95rem;
}
.fuss-innen {
  display: grid;
  gap: 10px;
}
.fuss-marke {
  font-family: var(--schrift-titel);
  font-weight: 700;
}
.fuss-hinweis { color: var(--text-leise); }
.fuss-links {
  display: flex;
  gap: 22px;
}

.haftleiste {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--grund);
  border-top: 1px solid var(--linie);
  transform: translateY(110%);
  transition: transform .28s cubic-bezier(.16, 1, .3, 1);
}
.haftleiste.sichtbar { transform: none; }

/* ---------- Ab Tablet ---------- */
@media (min-width: 600px) {
  .rahmen { padding-inline: 32px; }
  .knopf { white-space: nowrap; padding-inline: 28px; font-size: 1.0625rem; }
  .knopf-reihe { display: flex; flex-wrap: wrap; }
  .karte { padding: 36px; }
  .angebot { aspect-ratio: 16 / 9; }
  .angebot-inhalt { padding: 40px; }
}

/* ---------- Ab Desktop ---------- */
@media (min-width: 900px) {
  .abschnitt { padding-block: 108px; }
  .abschnitt h2 { margin-bottom: 52px; }

  .kopf-knopf { display: inline-flex; }

  .einstieg { padding-block: 44px 100px; }
  .einstieg-raster {
    grid-template-columns: 1.3fr .7fr;
    align-items: center;
    gap: 56px;
  }
  .einstieg-absatz { font-size: 1.2rem; }
  .angebot {
    aspect-ratio: 4 / 5;
    max-height: 520px;
    justify-self: end;
    width: 100%;
  }
  .angebot img { object-position: center; }
  .angebot-inhalt { padding: 36px; }

  .ablauf {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
    border-top: 1px solid var(--linie);
  }
  .ablauf li,
  .ablauf li:first-child,
  .ablauf li:last-child {
    display: block;
    padding-block: 32px 0;
  }
  .ablauf li + li { border-top: 0; }
  .ablauf-zahl { display: block; font-size: 3.5rem; margin-bottom: 18px; }

  .person {
    grid-template-columns: .8fr 1.2fr;
    align-items: center;
    gap: 72px;
  }
  .person-bild img { max-width: 400px; }

  .rahmen-formular h2, .anfrage-absatz { text-align: center; }

  .fuss { padding-bottom: 28px; }
  .fuss-innen {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 28px;
  }
  .haftleiste { display: none; }
}

/* ---------- Grosse Bildschirme ----------
   Auf breiten Bildschirmen wirkte der Einstieg leer. Deshalb hier:
   groessere Schrift, groessere Angebotskarte und ein paar ruhige
   Kreise im Hintergrund (das Motiv der Anzeigen). Am Handy und
   Tablet aendert sich dadurch nichts. */
@media (min-width: 1200px) {
  .einstieg {
    padding-block: 60px 76px;
    background-image:
      radial-gradient(circle 110px at calc(100% - 70px) 548px, var(--form-c) 99%, transparent 100%),
      radial-gradient(circle 300px at calc(100% + 70px) 372px, var(--form-b) 99.4%, transparent 100%),
      radial-gradient(circle 190px at calc(100% - 170px) 200px, var(--form-a) 99.2%, transparent 100%),
      radial-gradient(circle 240px at -30px 330px, var(--form-a) 99.3%, transparent 100%);
    background-repeat: no-repeat;
  }
  .einstieg-raster {
    grid-template-columns: 1.2fr .8fr;
    gap: 72px;
  }
  .einstieg h1 { font-size: 4.6rem; }
  .einstieg-absatz {
    margin-top: 22px;
    max-width: 30em;
    font-size: 1.3rem;
  }
  .knopf-reihe { margin-top: 34px; }
  .angebot { max-height: 600px; }
  .angebot-inhalt { padding: 44px; }
  .angebot-frage, .angebot-zeile { font-size: 1.15rem; }
  .angebot-preis { font-size: 6rem; }
  .einstieg + .abschnitt { padding-top: 92px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .knopf, .haftleiste, .fragen summary .ph { transition: none; }
}

/* ---------- 5. Rechtstexte ---------- */
.recht { padding-block: 32px 80px; }
.recht h1 {
  font-size: clamp(2rem, 1.5rem + 2.5vw, 2.75rem);
  margin-bottom: 12px;
}
.recht-einleitung {
  color: var(--text-leise);
  margin-bottom: 36px;
}
.recht h2 {
  font-size: 1.25rem;
  letter-spacing: -0.005em;
  margin: 36px 0 12px;
}
.recht p { margin-bottom: 14px; line-height: 1.65; }
.recht ul { margin: 0 0 14px; padding-left: 1.2em; line-height: 1.65; }
.recht li { margin-bottom: 4px; }
.recht-stand { color: var(--text-leise); font-size: .92rem; margin-top: 36px; }
.zurueck {
  display: inline-block;
  margin-bottom: 28px;
  font-weight: 500;
}