/* Gemeinsamer Unterbau der Light-Beispiele. Farben und Schriften setzt jedes Beispiel in seiner stil.css. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--grund); color: var(--text);
  font: var(--groesse, 17px)/1.6 var(--schrift-text);
  overflow-wrap: break-word;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; font-family: var(--schrift-titel); font-weight: var(--titel-gewicht, 400); text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--fokus, currentColor); outline-offset: 3px; }

.huelle { width: min(var(--breite, 1180px), calc(100% - 2 * var(--rand))); margin-inline: auto; }
:root { --rand: 48px; }
.unsichtbar {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.nur-handy { display: none; }

/* Kopfleiste des Beispiels */
.kopfleiste {
  display: flex; align-items: center; gap: 28px;
  padding-block: 20px;
}
.kopfleiste .logo { flex: none; display: block; line-height: 0; }
.kopfleiste .logo svg { height: var(--logo-hoehe, 44px); width: auto; overflow: visible; }
.kopfleiste nav { display: flex; gap: 24px; margin-left: auto; }
.kopfleiste nav a { text-decoration: none; padding: 8px 0; line-height: 1.5; white-space: nowrap; }
.kopfleiste .knopf { white-space: nowrap; }
.kurz-text { display: none; }
.kopfleiste nav a:hover { text-decoration: underline; text-underline-offset: 6px; }

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px;
  border: 1px solid var(--akzent); border-radius: var(--rundung, 0);
  background: var(--akzent); color: var(--akzent-text);
  font-family: var(--schrift-knopf, var(--schrift-text)); font-weight: 600; line-height: 1.5;
  text-decoration: none; text-align: center;
  transition: background .2s, color .2s, transform .2s;
}
.knopf:hover { transform: translateY(-1px); }
.knopf.zweit { background: transparent; color: var(--text); border-color: var(--linie); }
.knopf[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

.bild { display: block; overflow: hidden; background: var(--flaeche); }
.bild img { width: 100%; height: 100%; object-fit: cover; }

/* Formulare */
.formular { display: grid; gap: 26px; }
.frage { margin: 0; padding: 0; border: 0; min-width: 0; }
.frage legend, .frage > label:not(.haken, .schalter), .feldname { display: block; padding: 0; margin-bottom: 10px; font-weight: 600; line-height: 1.5; }
.wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 16px;
  border: 1px solid var(--linie); border-radius: var(--rundung-chip, 999px);
  background: var(--feld, transparent); line-height: 1.5;
  transition: background .15s, border-color .15s, color .15s;
}
.chip input:checked + span { background: var(--gewaehlt, var(--akzent)); border-color: var(--gewaehlt, var(--akzent)); color: var(--gewaehlt-text, var(--akzent-text)); }
.chip input:focus-visible + span { outline: 2px solid var(--fokus, currentColor); outline-offset: 2px; }
.chip input:disabled { cursor: not-allowed; }
.chip input:disabled + span { opacity: .4; text-decoration: line-through; }
.chip input[aria-invalid] + span { border-color: var(--fehler); }
.haken, .schalter { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 8px 0; font-weight: 400; line-height: 1.5; cursor: pointer; }
.haken input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--akzent); }
.haken > span, .schalter > span { padding-top: 0; }
.eingabe, .auswahl {
  display: block; width: 100%; max-width: 420px; min-height: 48px; padding: 10px 14px;
  border: 1px solid var(--linie); border-radius: var(--rundung, 0);
  background: var(--feld, var(--flaeche)); color: var(--text);
}
.eingabe[aria-invalid], .auswahl[aria-invalid] { border-color: var(--fehler); }
.formhinweis { margin-top: 8px; font-size: .88em; line-height: 1.5; color: var(--leise); }
.feld-fehler { display: block; margin-top: 8px; color: var(--fehler); font-size: .9em; line-height: 1.5; }
.feld-fehler:empty { display: none; }
.anfrage-status { min-height: 0; color: var(--fehler); line-height: 1.5; }
.anfrage-status:empty { display: none; }

/* Fenster */
#modal {
  width: min(560px, calc(100% - 28px)); max-height: 90dvh; padding: 0;
  border: 1px solid var(--linie); border-radius: var(--rundung-fenster, 8px);
  background: var(--flaeche); color: var(--text);
  box-shadow: 0 30px 90px #0005;
}
#modal::backdrop { background: rgb(10 12 14 / .55); backdrop-filter: blur(4px); }
.dialoginner { padding: 28px; }
.dialoghead { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.dialoghead h2 { font-size: 28px; line-height: 1.2; }
.dialoginner p + p { margin-top: 12px; }
.close {
  flex: none; width: 40px; height: 40px; margin: -6px -8px 0 0;
  border: 0; background: none; font-size: 28px; line-height: 1;
}
.anfrage-text { padding-left: 16px; border-left: 3px solid var(--akzent-linie, var(--akzent)); }
.anfrage-text p + p { margin-top: 6px; }
.anfrage-zwischen { padding-top: 10px; }
.anfrage-hinweis { margin-top: 18px; color: var(--leise); }
.anfrage-hinweis strong { display: block; color: var(--text); }
.anfrage-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.anfrage-knoepfe button, .dialoginner .knopf-klein {
  min-height: 44px; padding: 8px 18px;
  border: 1px solid var(--linie); border-radius: var(--rundung, 0); background: none;
}
.anfrage-knoepfe button:first-child { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); }

/* Fuß */
.fuss { padding-block: 64px 32px; }
.fuss-ende { display: block; margin-inline: auto; }
.fuss-wort { display: block; font-family: var(--schrift-titel); font-size: clamp(56px, 13vw, 190px); line-height: 1; text-decoration: none; }
.fuss-zeile {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--linie);
  font-size: 15px; line-height: 1.5;
}
.fuss-zeile > div { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.fuss-zeile a, .fuss-zeile button {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0;
  border: 0; background: none; text-decoration: underline; text-underline-offset: 5px;
}

@media (min-width: 760px) and (max-width: 1099px) {
  :root { --rand: 32px; }
  .kopfleiste { gap: 20px; }
  .kopfleiste nav { gap: 16px; font-size: 15px; }
  .kopfleiste .knopf { min-height: 44px; padding: 8px 14px; font-size: 15px; }
  .lang-text { display: none; }
  .kurz-text { display: inline; }
}

@media (max-width: 759px) {
  :root { --rand: 16px; }
  .lang-text { display: none; }
  .kurz-text { display: inline; }
  .nur-gross { display: none; }
  .nur-handy { display: revert; }
  .bild img.nur-handy { display: block; }
  .kopfleiste { flex-wrap: wrap; gap: 6px 16px; padding-block: 14px 8px; }
  .kopfleiste .logo svg { height: var(--logo-hoehe-handy, 36px); }
  .kopfleiste .knopf { margin-left: auto; min-height: 44px; padding: 8px 14px; font-size: 15px; }
  .kopfleiste nav { order: 3; width: 100%; margin: 0; gap: 4px 18px; flex-wrap: wrap; font-size: 15px; }
  .kopfleiste nav a { padding: 6px 0; }
  .dialoginner { padding: 22px 18px; }
  .dialoghead h2 { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
.motion-off *, .motion-off *::before, .motion-off *::after { transition: none !important; animation: none !important; }