/* Nur die Entwurfs-Landingpage; Farben und Komponenten aus styles.css. */
/* EINE SPALTE FÜR DIE GANZE SEITE. Vorher standen Einstieg, Formular und
   Person schmal in der Mitte, Beispiele und Ablauf breit und linksbündig –
   die Seite sprang beim Scrollen hin und her. Jetzt fluchten Kopf, alle
   Abschnitte und Fuß an derselben Kante. */
.entwurf-landing { --container: 880px; }
.entwurf-landing .page-hero { padding: clamp(32px, 5vw, 64px) 0 28px; }
.entwurf-landing .page-hero h1 { max-width: 20ch; }
.entwurf-landing .page-hero p { max-width: 65ch; }
.entwurf-landing .eyebrow { margin-bottom: 12px; }
.entwurf-landing .entwurf-zusage { margin: 14px 0 0; font-size: .94rem; }
.entwurf-landing .section { padding-block: clamp(32px, 4vw, 56px); }
.entwurf-landing #formular, .entwurf-landing [id^="feld-"],
.entwurf-landing .entwurf-fehler { scroll-margin-top: 100px; }
.entwurf-landing .button.primary {
  min-height: 52px;
  padding: 14px 20px;
  background: var(--accent);
  color: var(--bg);
  font-size: 1rem;
}
.entwurf-landing .button.primary:hover { background: var(--accent-quiet); }
.entwurf-landing .button:disabled { opacity: .7; cursor: wait; }
.entwurf-landing .entwurf-nav { display: flex; align-items: center; gap: 24px; font-size: .94rem; }
.entwurf-landing .entwurf-nav > a:first-child { color: var(--muted); }
.entwurf-landing .entwurf-formular { gap: 22px; margin-top: 26px; }
.entwurf-landing .entwurf-formular textarea { min-height: 100px; }
.entwurf-landing .entwurf-formular fieldset {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.entwurf-landing .entwurf-formular legend { padding: 0 0 16px; font-size: .94rem; font-weight: 650; }
.entwurf-landing .entwurf-formular .check-einwilligung {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: .875rem;
  line-height: 1.55;
}
.entwurf-landing .entwurf-formular .check-hinweis { margin: 0; font-size: .8125rem; }
.entwurf-landing .entwurf-optionen { border-block: 1px solid var(--border); }
.entwurf-landing .entwurf-optionen summary { padding: 16px 0; cursor: pointer; color: var(--accent); font-size: .875rem; font-weight: 600; }
.entwurf-landing .entwurf-optionen-inhalt { display: grid; gap: 24px; padding: 6px 0 24px; }
.entwurf-landing .farb-auswahl { margin-bottom: 20px; }
.entwurf-landing .entwurf-fehler { padding: 18px; border: 1px solid var(--error); border-radius: var(--radius); }
.entwurf-landing .entwurf-fehler ul { margin-bottom: 0; padding-left: 20px; }
.entwurf-landing .entwurf-fehler a { color: var(--error); text-decoration: underline; }
.entwurf-landing [aria-invalid="true"] { border-color: var(--error); }
.entwurf-landing .stil-karte:focus-within, .entwurf-landing .farb-karte:focus-within,
.entwurf-landing .datei-flaeche:focus-within { outline: 3px solid var(--accent); outline-offset: 3px; }
.entwurf-landing .trust-card { padding-block: 20px; }
.entwurf-landing .trust-card p { margin-bottom: 0; }
.entwurf-landing .entwurf-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.entwurf-landing .site-footer { padding-block: 28px; }
/* DAS FORMULAR FOLGT DEM FARBMODUS WIE DER REST DER SEITE. Bis zum
   24.09.2026 blieb es mit fest eingetragenen hellen Farben weiß – im
   Dunkelmodus stand dann ein grellweißer Block mitten in der dunklen
   Seite. Jetzt kommen alle Farben aus den Tokens in styles.css. */
.entwurf-landing .entwurf-formularkarte {
  padding: 35px 40px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 10px 40px rgb(0 0 0 / 6%);
}
.entwurf-landing .entwurf-formularkarte h2 {
  margin-bottom: 8px;
  font-size: clamp(22px, 2.4vw, 27px);
  letter-spacing: -.025em;
  line-height: 1.25;
}
.entwurf-landing .entwurf-formular-intro { margin: 0; font-size: .875rem; }
.entwurf-landing .entwurf-formular label { gap: 7px; font-size: .875rem; font-weight: 650; }
.entwurf-landing .entwurf-formular small { font-size: .8125rem; line-height: 1.55; }
.entwurf-landing .entwurf-freiwillig { margin-left: 6px; color: var(--muted); font-size: .75rem; font-weight: 400; }
.entwurf-landing .entwurf-formular :is(input:not([type]), input[type="text"], input[type="email"], input[type="tel"], textarea, select) {
  padding: 12px 14px;
  font-size: 1rem;
  line-height: 1.55;
  background-color: var(--surface);
}
.entwurf-landing .entwurf-formular select { padding-right: 42px; }
.entwurf-landing .entwurf-formular :is(input:not([type]), input[type="text"], input[type="email"], input[type="tel"], textarea, select):focus {
  border-color: var(--accent);
  outline: 3px solid color-mix(in srgb, var(--accent) 22%, transparent);
  outline-offset: 0;
}
.entwurf-landing #formular :is(button, summary, a, input[type="checkbox"]):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}
.entwurf-landing .entwurf-formularkarte a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.entwurf-landing .entwurf-abo-hinweis { margin: -10px 0 0; font-size: .8125rem; text-align: center; }
.entwurf-landing .entwurf-direkt { margin: 10px 0 0; font-size: .94rem; }
.entwurf-landing .entwurf-direkt a,
.entwurf-landing .entwurf-beispiel-hinweis a,
.entwurf-landing .entwurf-anschrift a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.entwurf-landing .entwurf-direkt span { margin-inline: 6px; color: var(--muted); }
/* BEISPIELE ALS WEBSITES, NICHT ALS FOTOS. Browserrahmen mit echter
   Adresse, daneben das Handy – so erkennt man auf einen Blick, was man
   bekommt. Eines pro Zeile, damit sie groß genug zum Lesen sind. */
.entwurf-landing .entwurf-beispiel-einleitung { max-width: 60ch; margin: 0; }
.entwurf-landing .beispiel-liste { display: grid; gap: 48px; margin-top: 32px; }
.entwurf-landing .beispiel { margin: 0; }
.entwurf-landing .beispiel-buehne { position: relative; }
.entwurf-landing .beispiel-buehne.mit-handy { padding-right: 18%; padding-bottom: 6%; }
.entwurf-landing .browser-rahmen {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 18px 50px rgb(20 18 40 / 12%);
}
.entwurf-landing .browser-leiste {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.entwurf-landing .browser-punkte { display: flex; gap: 6px; flex: none; }
.entwurf-landing .browser-punkte i { width: 10px; height: 10px; border-radius: 50%; background: var(--border); }
.entwurf-landing .browser-adresse {
  flex: 1;
  max-width: 320px;
  overflow: hidden;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: .8125rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.entwurf-landing .browser-rahmen img,
.entwurf-landing .handy-rahmen img { display: block; width: 100%; height: auto; }
.entwurf-landing .handy-rahmen {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 24%;
  overflow: hidden;
  border: 6px solid #1c1b22;
  border-radius: 26px;
  background: #1c1b22;
  box-shadow: 0 18px 44px rgb(20 18 40 / 28%);
}
.entwurf-landing .handy-rahmen img { border-radius: 20px; }
.entwurf-landing .beispiel figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-top: 16px;
}
.entwurf-landing .beispiel figcaption small { color: var(--muted); font-size: .875rem; }
.entwurf-landing .beispiel figcaption a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.entwurf-landing .entwurf-beispiel-hinweis { margin: 16px 0 0; font-size: .875rem; color: var(--muted); }
.entwurf-landing .entwurf-anschrift { margin-bottom: 0; line-height: 1.7; }
/* Die Cookie-Leiste bleibt dieselbe, nimmt hier aber weniger vom ersten
   Bildschirm weg: Wer über eine Anzeige kommt, soll zuerst das Angebot sehen. */
.entwurf-landing #ads-hinweis { padding: 10px 14px; gap: 8px; font-size: .8125rem; }
/* Auch bei ausbleibenden Scroll-Beobachtern bleiben alle Inhalte sichtbar. */
html.has-js .entwurf-landing .reveal { opacity: 1; transform: none; transition: none; }
@media (max-width: 620px) {
  .entwurf-landing .entwurf-formularkarte { padding: 25px 20px; border-radius: 14px; }
  .entwurf-landing .header-inner { flex-wrap: wrap; gap: 4px; padding-block: 8px; }
  .entwurf-landing .brand { gap: 6px; }
  .entwurf-landing .brand-mark-img { width: 32px; height: 32px; }
  .entwurf-landing .brand-name { font-size: 15px; }
  .entwurf-landing .entwurf-nav { width: 100%; justify-content: space-between; gap: 12px; }
  .entwurf-landing .entwurf-nav > a { min-height: 40px; display: inline-flex; align-items: center; }
  .entwurf-landing #formular, .entwurf-landing [id^="feld-"],
  .entwurf-landing .entwurf-fehler { scroll-margin-top: 112px; }
  .entwurf-landing .page-hero h1 { font-size: 36px; }
  .entwurf-landing .page-hero .button { width: 100%; }
  .entwurf-landing .stil-auswahl { grid-template-columns: 1fr; }
  /* Am Handy ist das Handy die Hauptsache: größer, der Rechner dahinter
     tritt zurück. */
  .entwurf-landing .beispiel-liste { gap: 36px; margin-top: 24px; }
  .entwurf-landing .beispiel-buehne.mit-handy { padding-right: 28%; padding-bottom: 14%; }
  .entwurf-landing .handy-rahmen { width: 38%; border-width: 4px; border-radius: 18px; }
  .entwurf-landing .handy-rahmen img { border-radius: 14px; }
  .entwurf-landing .browser-leiste { gap: 8px; padding: 6px 8px; }
  .entwurf-landing .browser-punkte i { width: 7px; height: 7px; }
  .entwurf-landing .browser-adresse { padding: 2px 8px; font-size: .6875rem; }
}