/* PageSetter Landingpage
   Der Aufbau folgt der freigegebenen Hell-/Dunkel-Referenz. Alle Regeln sind
   auf die öffentliche Anmeldeseite begrenzt und verändern den Editor nicht. */

body.anmeldeseite {
  --landing-grund: #fbf8f2;
  --landing-abschnitt: #f6f1e8;
  --landing-karte: rgba(255, 253, 249, .72);
  --landing-text: #1e1b17;
  --landing-leise: #6e6254;
  --landing-gold: #b4976d;
  --landing-gold-hell: #d8c7ad;
  --landing-linie: #ded3c3;
  --landing-schatten: 0 12px 36px rgba(82, 63, 39, .055);
  display: block;
  height: auto;
  min-height: 100vh;
  padding: 0;
  overflow-x: clip;
  color: var(--landing-text);
  background:
    radial-gradient(900px 620px at 8% 3%, rgba(213, 192, 159, .11), transparent 64%),
    linear-gradient(90deg, rgba(255,255,255,.42), transparent 18%, transparent 82%, rgba(255,255,255,.34)),
    var(--landing-grund);
}

html[data-thema="dunkel"] body.anmeldeseite {
  --landing-grund: #111310;
  --landing-abschnitt: #1a1815;
  --landing-karte: rgba(24, 24, 20, .72);
  --landing-text: #fff9ef;
  --landing-leise: #d1c5b4;
  --landing-gold: #b89a6c;
  --landing-gold-hell: #7b674b;
  --landing-linie: #3e382d;
  --landing-schatten: 0 14px 42px rgba(0, 0, 0, .28);
  background:
    radial-gradient(760px 620px at 88% 4%, rgba(184, 154, 108, .055), transparent 68%),
    linear-gradient(90deg, rgba(0,0,0,.18), transparent 24%, transparent 78%, rgba(0,0,0,.24)),
    var(--landing-grund);
}

@media (prefers-color-scheme: dark) {
  html[data-thema="system"] body.anmeldeseite {
    --landing-grund: #111310;
    --landing-abschnitt: #1a1815;
    --landing-karte: rgba(24, 24, 20, .72);
    --landing-text: #fff9ef;
    --landing-leise: #d1c5b4;
    --landing-gold: #b89a6c;
    --landing-gold-hell: #7b674b;
    --landing-linie: #3e382d;
    --landing-schatten: 0 14px 42px rgba(0, 0, 0, .28);
    background:
      radial-gradient(760px 620px at 88% 4%, rgba(184, 154, 108, .055), transparent 68%),
      linear-gradient(90deg, rgba(0,0,0,.18), transparent 24%, transparent 78%, rgba(0,0,0,.24)),
      var(--landing-grund);
  }
}

.landingpage {
  width: min(1180px, calc(100% - 64px));
  margin: 0 auto;
  padding: 46px 0 76px;
  color: var(--landing-text);
}

.landingmarke {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--landing-gold);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
}
.landingmarke img { width: 31px; height: 31px; border-radius: 8px; }
.landingmarke .marke-dunkel { display: none; }
html[data-thema="dunkel"] .landingmarke .marke-hell { display: none; }
html[data-thema="dunkel"] .landingmarke .marke-dunkel { display: block; }
@media (prefers-color-scheme: dark) {
  html[data-thema="system"] .landingmarke .marke-hell { display: none; }
  html[data-thema="system"] .landingmarke .marke-dunkel { display: block; }
}

.landinghero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
  gap: clamp(48px, 7vw, 96px);
  align-items: start;
  padding: 27px 0 39px;
}
.landinghero.ohne-warteliste { grid-template-columns: minmax(0, 720px); }
.landinghero .vorstellung { padding-top: 34px; }
.landinghero .schlagzeile {
  margin: 0 0 34px;
  color: var(--landing-text);
  font-size: 58px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.025em;
}
.landingzier {
  display: block;
  width: min(100%, 420px);
  margin: 0 0 26px;
  color: var(--landing-gold);
}
.landingzier span { display: block; width: 100%; height: 1px; background: var(--landing-gold-hell); }
.landinghero .fliesstext {
  max-width: 560px;
  margin: 0 0 29px;
  color: var(--landing-leise);
  font-size: 17px;
  line-height: 1.72;
}

.landinghero .startspalte { display: grid; width: 100%; gap: 18px; }
.landinghero .wartelistenkarte,
.landinghero .anmeldekarte {
  width: 100%;
  margin: 0;
  padding: 22px 21px 20px;
  color: var(--landing-text);
  background: var(--landing-karte);
  background-image: none;
  border: 1px solid var(--landing-linie);
  border-radius: 7px;
  box-shadow: var(--landing-schatten);
  backdrop-filter: blur(3px);
}
.landinghero .wartelistenkarte { min-height: 420px; }
.landinghero .anmeldekarte.kompakt { min-height: 424px; }
.landinghero .wartelistenkarte h2 {
  margin: 0 0 3px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
}
.landinghero .wartelistenkarte .unterzeile {
  margin: 0 0 42px;
  color: var(--landing-gold);
  font-size: 16px;
  line-height: 1.35;
}
.landinghero .wartelistenkarte .beisatz,
.landinghero .anmeldekarte .beisatz {
  margin: 0 0 24px;
  color: var(--landing-leise);
  font-size: 14px;
  line-height: 1.5;
}
.landinghero .feldgruppe { margin-bottom: 20px; }
.landinghero .wartelistenkarte .beisatz { margin-bottom: 26px; }
.landinghero .anmeldekarte.kompakt form { margin-top: 28px; }
.landinghero .feldgruppe label,
.landinghero .wartelistenkarte label,
.landinghero .anmeldekarte label {
  margin-bottom: 5px;
  color: var(--landing-text);
  font-size: 13.5px;
  font-weight: 600;
}
.landinghero .wartelistenkarte input[type="email"],
.landinghero .anmeldekarte input[type="text"],
.landinghero .anmeldekarte input[type="password"] {
  min-height: 39px;
  padding: 8px 10px;
  color: var(--landing-text);
  background: transparent;
  border: 1px solid var(--landing-linie);
  border-radius: 6px;
  font-size: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.landinghero .anmeldekarte input:focus,
.landinghero .wartelistenkarte input:focus {
  border-color: var(--landing-gold);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--landing-gold) 16%, transparent);
}
.landinghero .feldmitzeichen svg { right: 10px; width: 15px; height: 15px; color: var(--landing-gold); }
.landinghero .zustimmung,
.landinghero .ankreuzzeile {
  gap: 9px;
  margin: 19px 0 26px;
  color: var(--landing-leise);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
}
.landinghero .wartelistenkarte label.zustimmung {
  margin: 19px 0 22px;
  font-size: 13px;
  font-weight: 400;
}
.landinghero .wartelistenkarte label.zustimmung > span { max-width: 190px; }
.landinghero .anmeldekarte label.ankreuzzeile {
  margin: 19px 0 26px;
  font-size: 13px;
  font-weight: 400;
}
.landinghero .zustimmung input,
.landinghero .ankreuzzeile input { width: 14px; height: 14px; margin: 2px 0 0; }
.landinghero .zustimmung .kleingedrucktes { display: none; }
.landinghero .ankreuzzeile small { color: var(--landing-leise); font-size: 11.5px; line-height: 1.4; }
.landinghero .knopf.voll,
.landinghero .knopf.voll.gross {
  min-height: 42px;
  padding: 8px 14px;
  justify-content: center;
  color: #fffdf7;
  background: linear-gradient(90deg, #b99a6d, #c9ad80);
  border: 1px solid #b59568;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: none;
}
.landinghero .knopf.voll:hover { background: linear-gradient(90deg, #ad8c60, #c1a476); }
.landinghero .knopf.voll:disabled { opacity: .76; }
.landinghero .knopf.voll svg { width: 14px; height: 14px; }
.landinghero .zugangkopf {
  margin: 0 0 17px;
  color: var(--landing-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}
.landinghero .zugangkopf svg { width: 15px; height: 15px; color: var(--landing-gold); }
.landinghero .anmeldereiter { margin-bottom: 11px; }
.landinghero .anmeldereiter button { padding: 5px 8px; font-size: 13px; }
.landinghero .passwortknopf { color: var(--landing-gold); }
.landinghero .anmeldefehler { font-size: 13px; }

.landingvorteile {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--landing-linie);
  border-bottom: 1px solid var(--landing-linie);
  padding: 38px 0 43px;
}
.landingvorteile article {
  position: relative;
  padding: 0 18px;
  text-align: center;
}
.landingvorteile article + article::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 1px;
  width: 1px;
  background: var(--landing-linie);
}
.landingicon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: 0 auto 13px;
  color: var(--landing-gold);
  font-size: 35px;
  line-height: 1;
}
.landingicon svg { width: 36px; height: 36px; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.landing-aa { font-size: 35px; }
.landingvorteile h2 {
  min-height: 35px;
  margin: 0;
  color: var(--landing-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
}
.landingvorteile p {
  margin: 9px 0 0;
  color: var(--landing-leise);
  font-size: 12.5px;
  line-height: 1.5;
}

.landingabschnitt,
.formatabschnitt,
.ablaufabschnitt,
.landingcta {
  border-bottom: 1px solid var(--landing-linie);
}

/* Ab hier beginnt die etwas hellere Inhaltsflaeche. Der Vollflaechenwechsel
   liegt auf demselben Element wie die horizontale Trennlinie und kann deshalb
   auch bei Zoom oder Hochformat niemals durch eine Textzeile wandern. */
.landingvorteile,
.landingabschnitt,
.formatabschnitt,
.ablaufabschnitt,
.landingcta,
.landingfooter {
  position: relative;
  z-index: 0;
}
.landingvorteile::before,
.landingabschnitt::before,
.formatabschnitt::before,
.ablaufabschnitt::before,
.landingcta::before,
.landingfooter::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--landing-abschnitt);
  pointer-events: none;
}

.landingabschnitt {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(52px, 8vw, 108px);
}
.inhaltabschnitt { min-height: 407px; padding: 58px 0 55px; align-items: center; }
.landingtext h2,
.ablaufabschnitt h2 {
  margin: 0;
  color: var(--landing-text);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.22;
}
.kurzlinie { display: block; width: 42px; height: 1px; margin: 24px 0 31px; background: var(--landing-gold-hell); }
.landingtext p,
.ablaufabschnitt p {
  margin: 0 0 28px;
  color: var(--landing-leise);
  font-size: 15px;
  line-height: 1.68;
}
.editorillustration { display: block; width: 100%; height: auto; filter: none; }
html[data-thema="dunkel"] .editorillustration,
html[data-thema="dunkel"] .pi-beispiel > img { opacity: .68; }
@media (prefers-color-scheme: dark) {
  html[data-thema="system"] .editorillustration,
  html[data-thema="system"] .pi-beispiel > img { opacity: .68; }
}

.pi-abschnitt { min-height: 760px; padding: 60px 0 58px; grid-template-columns: 1.06fr .94fr; gap: clamp(52px, 7vw, 96px); align-items: start; }
.pi-vorteile { display: grid; gap: 31px; }
.pi-vorteile article { display: grid; grid-template-columns: 58px 1fr; gap: 15px; }
.pi-rund {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  color: var(--landing-gold);
  background: color-mix(in srgb, var(--landing-gold) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--landing-linie) 72%, transparent);
  border-radius: 50%;
  font-size: 25px;
}
.pi-rund svg { width: 24px; height: 24px; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.pi-vorteile h2 { margin: 4px 0 7px; color: var(--landing-text); font-size: 17px; font-weight: 600; line-height: 1.25; }
.pi-vorteile p { margin: 0; color: var(--landing-leise); font-size: 14px; line-height: 1.58; }
.pi-vorteile a { display: inline-flex; align-items: center; gap: 5px; margin-top: 14px; color: var(--landing-gold); font-size: 13.5px; text-decoration: none; border-bottom: 1px solid var(--landing-gold-hell); }
.pi-vorteile a svg { width: 13px; height: 13px; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.pi-beispiel { padding-top: 7px; }
.pi-beispielkarte {
  padding: 15px;
  background: var(--landing-karte);
  border: 1px solid var(--landing-linie);
  border-radius: 5px;
  box-shadow: var(--landing-schatten);
}
.pi-beispielkarte h2 { margin: 0 0 12px; font-size: 14.5px; font-weight: 600; }
.pi-ergebnis { display: flex; align-items: center; gap: 8px; padding: 10px 0; margin: 0; border-top: 1px solid var(--landing-linie); font-size: 12.5px; }
.pi-ergebnis i { width: 8px; height: 8px; border: 2px solid #69b884; border-radius: 50%; }
.pi-beispielkarte ul { display: grid; gap: 6px; list-style: none; margin: 0; padding: 0; }
.pi-beispielkarte li { display: flex; align-items: flex-start; gap: 9px; padding: 9px 9px 8px; border: 1px solid var(--landing-linie); border-radius: 4px; background: color-mix(in srgb, var(--landing-karte) 88%, transparent); }
.pi-beispielkarte li > span { width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: #e4b84b; flex: none; }
.pi-beispielkarte li.orange > span { background: #d98653; }
.pi-beispielkarte li.rot > span { background: #d6545d; }
.pi-beispielkarte li.gruen > span { background: #52bd79; }
.pi-beispielkarte li b { display: block; color: var(--landing-text); font-size: 12px; font-weight: 600; }
.pi-beispielkarte li small { display: block; margin-top: 1px; color: var(--landing-leise); font-size: 10.5px; }
.pi-alle { display: block; width: 100%; margin-top: 10px; padding: 8px; color: var(--landing-leise); background: transparent; border: 0; border-top: 1px solid var(--landing-linie); font-size: 11.5px; }
.pi-pfeil { display: grid; place-items: center; height: 25px; color: var(--landing-gold-hell); }
.pi-pfeil svg { width: 20px; height: 20px; transform: rotate(90deg); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.pi-beispiel > img { display: block; width: 100%; max-height: 300px; object-fit: contain; }

.formatabschnitt { padding: 53px 0 57px; }
.formatabschnitt > h2 { margin: 0 0 36px; color: var(--landing-text); font-size: 29px; font-weight: 500; text-align: center; }
.formatgitter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.formatgitter article {
  display: flex;
  flex-direction: column;
  min-height: 405px;
  padding: 19px 13px 12px;
  text-align: center;
  background: color-mix(in srgb, var(--landing-karte) 72%, transparent);
  border: 1px solid var(--landing-linie);
  border-radius: 4px;
}
.formatgitter .landingicon { width: 35px; height: 35px; margin-bottom: 8px; }
.formatgitter .landingicon svg { width: 31px; height: 31px; }
.formatgitter h3 { margin: 0 0 15px; color: var(--landing-text); font-size: 18px; font-weight: 600; }
.formatgitter p { min-height: 116px; margin: 0; color: var(--landing-leise); font-size: 12px; line-height: 1.53; }
.formatbild { height: 142px; margin-top: auto; overflow: hidden; background: color-mix(in srgb, var(--landing-gold) 4%, transparent); border: 1px solid var(--landing-linie); }
.formatbild img { width: 100%; height: 100%; object-fit: contain; opacity: .76; }
.formatbild.comicbild img { width: 138%; max-width: none; margin-left: -19%; object-fit: cover; }
.formatbild.webbild img { object-fit: cover; object-position: top; filter: grayscale(1) sepia(.25); opacity: .46; }

.ablaufabschnitt { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(48px, 7vw, 88px); min-height: 304px; padding: 52px 0 47px; align-items: center; }
.ablaufabschnitt p { max-width: 270px; margin-bottom: 8px; }
.ablaufabschnitt ul { list-style: none; margin: 0; padding: 0; color: var(--landing-leise); font-size: 13.5px; line-height: 1.7; }
.ablaufabschnitt li { display: flex; align-items: center; gap: 6px; }
.ablaufabschnitt li svg { width: 14px; height: 14px; flex: none; color: var(--landing-gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ablaufgrafik { display: flex; align-items: center; justify-content: flex-end; }
.ablaufgrafik span { display: grid; place-items: center; width: 58px; height: 58px; flex: none; color: var(--landing-gold); border: 1px solid var(--landing-linie); border-radius: 50%; font-size: 29px; }
.ablaufgrafik span svg { width: 27px; height: 27px; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.ablaufgrafik i { width: 24px; height: 1px; border-top: 1px dashed var(--landing-gold-hell); }

.landingcta { padding: 48px 0 37px; text-align: center; }
.landingcta h2 { margin: 0 0 13px; color: var(--landing-text); font-size: 26px; font-weight: 500; }
.landingcta p { max-width: 420px; margin: 0 auto 20px; color: var(--landing-leise); font-size: 13px; line-height: 1.55; }
.landing-cta-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 13px; min-width: 246px; min-height: 42px; padding: 10px 22px; color: #fffdf7; background: linear-gradient(90deg, #b99a6d, #c9ad80); border: 1px solid #b59568; border-radius: 6px; font-size: 14px; font-weight: 600; text-decoration: none; }
.landing-cta-knopf svg { width: 14px; height: 14px; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.landing-cta-knopf:hover { background: linear-gradient(90deg, #ad8c60, #c1a476); }

/* Der Zugang ist bewusst Teil des Footers: auf grossen Bildschirmen stehen
   Benutzername, Passwort und Aktion in einer ruhigen horizontalen Zeile. */
.landingfooter { padding: 34px 0 22px; }
.footerzugang {
  padding: 22px 24px 20px;
  color: var(--landing-text);
  border: 1px solid var(--landing-linie);
  border-radius: 7px;
  background: color-mix(in srgb, var(--landing-karte) 50%, transparent);
}
.footerzugang-kopf {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 17px;
}
.footerzugang-kopf img { width: 28px; height: 28px; flex: none; border-radius: 7px; }
.footerzugang-kopf h2 { margin: 0 0 3px; font-size: 16px; font-weight: 600; line-height: 1.3; }
.footerzugang-kopf p { margin: 0; color: var(--landing-leise); font-size: 12.5px; line-height: 1.45; }
.footerzugang-kopf .zugang-vertrauen {
  margin-top: 8px;
  color: var(--landing-leise);
  font-size: 12px;
}
.zugang-vertrauen strong { color: var(--landing-text); font-weight: 600; }
.zugang-vertrauen a { color: var(--landing-gold); text-underline-offset: 3px; }
.footerzugang .anmeldereiter { margin: 0 0 14px 40px; }
.footerzugang .anmeldereiter button { padding: 5px 9px; font-size: 13px; }
.footer-anmelderaster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(145px, .55fr);
  gap: 14px;
  align-items: start;
}
.footer-anmelderaster .feldgruppe { min-width: 0; margin: 0; }
.footer-anmelderaster .footer-breit { grid-column: 1 / -1; }
.footerzugang label { margin-bottom: 5px; color: var(--landing-text); font-size: 13px; font-weight: 600; }
.footerzugang input[type="text"],
.footerzugang input[type="password"] {
  width: 100%;
  min-height: 41px;
  padding: 8px 11px;
  color: var(--landing-text);
  background: transparent;
  border: 1px solid var(--landing-linie);
  border-radius: 6px;
  font-size: 14px;
}
.footerzugang input:focus {
  border-color: var(--landing-gold);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--landing-gold) 16%, transparent);
}
.footerzugang .beisatz { margin: 6px 0 0; color: var(--landing-leise); font-size: 12px; line-height: 1.45; }
.footer-anmelden { min-height: 41px; align-self: end; justify-content: center; }
.footer-anmelderaster:has(#wiederholungsgruppe:not([hidden])) .footer-anmelden {
  grid-column: 1 / -1;
  width: min(100%, 260px);
  justify-self: end;
}
.footer-angemeldet-bleiben {
  display: inline-flex;
  align-items: flex-start;
  gap: 9px;
  margin: 14px 0 0;
  color: var(--landing-leise);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.4;
}
.footer-angemeldet-bleiben input { width: 15px; height: 15px; margin: 1px 0 0; }
.footer-angemeldet-bleiben small { display: block; color: var(--landing-leise); font-size: 11px; }
.footerzugang .anmeldefehler { margin: 12px 0 0; font-size: 13px; }
.footer-folgeschritt { width: min(100%, 560px); margin: 0 auto; }
.footer-folgeschritt .feldgruppe { margin: 16px 0; }
.footer-schrittknopfe { display: flex; justify-content: flex-end; gap: 9px; }
.footer-schrittknopfe .knopf { justify-content: center; min-width: 130px; }
.footerzugang .codeliste { columns: 2; }
.landingfooter-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 30px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--landing-linie);
}
.landingfooter-menu a {
  color: var(--landing-leise);
  font-size: 13px;
  text-decoration: none;
  text-underline-offset: 4px;
}
.landingfooter-menu a:hover,
.landingfooter-menu a:focus-visible { color: var(--landing-text); text-decoration: underline; }

/* Der notwendige Cookie-Hinweis folgt der gleichen ruhigen Kartenästhetik. */
body.anmeldeseite .cookiebanner {
  left: 50%; right: auto; bottom: 20px; transform: translateX(-50%);
  width: min(960px, calc(100% - 32px));
  color: var(--landing-text); background: color-mix(in srgb, var(--landing-grund) 92%, transparent);
  border: 1px solid var(--landing-linie); box-shadow: var(--landing-schatten);
  backdrop-filter: blur(12px);
}
body.anmeldeseite .cookiebanner .text { color: var(--landing-leise); }
body.anmeldeseite .cookiebanner .text b { color: var(--landing-text); }
body.anmeldeseite .startseite { padding-bottom: 0; }
body.anmeldeseite.ohne-hinweis .landingpage { padding-bottom: 76px; }

@media (max-width: 920px) {
  .landingpage { width: min(100% - 40px, 760px); padding-top: 28px; }
  .landinghero { grid-template-columns: 1fr; gap: 28px; padding-top: 35px; }
  .landinghero .vorstellung { padding-top: 0; }
  .landinghero .schlagzeile { font-size: clamp(46px, 12vw, 58px); }
  .landinghero .fliesstext { max-width: 38em; }
  .landingzier { width: min(100%, 420px); }
  .landinghero .startspalte { width: min(100%, 520px); }
  .landingvorteile { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
  .landingvorteile article:nth-child(3)::before { display: none; }
  .landingabschnitt, .ablaufabschnitt { grid-template-columns: 1fr; }
  .inhaltabschnitt { gap: 20px; }
  .editorillustration { max-width: 460px; margin: 0 auto; }
  .pi-abschnitt { gap: 40px; }
  .pi-beispiel { width: min(100%, 390px); margin: 0 auto; }
  .formatgitter { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .ablaufgrafik { justify-content: flex-start; }
}

@media (max-width: 720px) {
  .footer-anmelderaster { grid-template-columns: 1fr; }
  .footer-anmelderaster .footer-breit,
  .footer-anmelderaster:has(#wiederholungsgruppe:not([hidden])) .footer-anmelden {
    grid-column: 1;
  }
  .footer-anmelden { width: 100%; }
  .footer-anmelderaster:has(#wiederholungsgruppe:not([hidden])) .footer-anmelden {
    width: 100%;
  }
}

@media (max-width: 440px) {
  .landingpage { width: min(100% - 24px, 390px); }
  .landingmarke { font-size: 16px; }
  .landingmarke img { width: 31px; height: 31px; }
  .landinghero .schlagzeile { font-size: 44px; }
  .landingvorteile { grid-template-columns: 1fr; }
  .landingvorteile article + article::before { top: -17px; right: 18%; bottom: auto; left: 18%; width: auto; height: 1px; }
  .landingvorteile article:nth-child(3)::before { display: block; }
  .landingvorteile h2 { min-height: 0; }
  .formatgitter { grid-template-columns: 1fr; }
  .formatgitter article { min-height: 365px; }
  .formatgitter p { min-height: 84px; }
  .ablaufgrafik span { width: 52px; height: 52px; }
  .ablaufgrafik i { width: 15px; }
  .landingfooter { padding-top: 28px; }
  .footerzugang { padding: 18px 16px; }
  .footerzugang .anmeldereiter { margin-left: 0; }
  .footerzugang-kopf { align-items: center; }
  .footer-angemeldet-bleiben { display: flex; }
  .landingfooter-menu { display: grid; grid-template-columns: 1fr 1fr; text-align: center; }
  .footer-schrittknopfe { display: grid; }
  body.anmeldeseite .cookiebanner { display: grid; gap: 12px; }
}

/* Appweiter PageSetter-Styleguide: dieselbe ruhige Tiefe, Kontur und
   Bedienlogik wie im Publication-Intelligence-Begleiter. */
.landingpage, .landinghero > *, .landingabschnitt > *,
.ablaufabschnitt > *, .landingfooter > * { min-width: 0; }
.landinghero .wartelistenkarte,
.landinghero .anmeldekarte,
.footerzugang,
.formatgitter article,
.pi-beispiel,
.editorillustration {
  border-radius: 16px;
  border-color: color-mix(in srgb, var(--landing-linie) 84%, transparent);
  box-shadow: 0 1px 1px rgba(50,40,28,.04), var(--landing-schatten);
}
.landingpage input:not([type="checkbox"]),
.landingpage select, .landingpage textarea,
.landingpage .knopf, .landing-cta-knopf {
  min-height: 42px; border-radius: 11px;
}
.landingpage a, .landingpage button {
  transition: color .16s ease, background-color .16s ease,
    border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.landingpage button:not(:disabled):active,
.landing-cta-knopf:active { transform: scale(.985); }

@media (max-width: 1240px) {
  .landingpage { width: min(100% - 40px, 1120px); }
}
@media (max-width: 560px) {
  .landingpage { width: min(100% - 24px, 520px); }
  .landinghero .schlagzeile { overflow-wrap: anywhere; }
}