/* Zimmerweise · Bausteine der Website --------------------------------------- */

/* Knöpfe ---------------------------------------------------------------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 20px;
  border: 1.5px solid transparent; border-radius: var(--r-feld);
  font: 600 1rem/1.2 var(--f-sans); letter-spacing: -0.005em; text-align: center; text-decoration: none;
  cursor: pointer; user-select: none;
  transition: transform var(--d-kurz) var(--ease), background-color var(--d-kurz) linear, box-shadow var(--d-kurz) linear, border-color var(--d-kurz) linear;
}
.knopf:hover { text-decoration: none; }
.knopf:active { transform: translateY(1px) scale(0.99); }
.knopf--haupt { background: var(--stift); color: #fff; box-shadow: var(--s-knopf); }
.knopf--haupt:hover { background: var(--stift-tief); color: #fff; }
.knopf--neben { background: var(--original); color: var(--stift); border-color: var(--stift); }
.knopf--neben:hover { background: var(--stift-hauch); color: var(--stift); }
.knopf--still { background: transparent; color: var(--stift); padding-inline: 4px; text-decoration: underline; text-underline-offset: 0.2em; }
.knopf--klein { min-height: 44px; padding: 10px 16px; font-size: 0.9375rem; }
.knopf--breit { width: 100%; }
.knopf--pfeil::after, .knopf--pdf::after {
  content: ""; width: 18px; height: 18px; flex: 0 0 auto; background: currentColor;
  -webkit-mask: var(--pfeil) center / contain no-repeat; mask: var(--pfeil) center / contain no-repeat;
  transition: transform var(--d-mittel) var(--ease);
}
.knopf--pfeil:hover::after { transform: translateX(3px); }
.knopf--pdf::after { -webkit-mask-image: var(--pfeil-runter); mask-image: var(--pfeil-runter); }
.knopf--pdf:hover::after { transform: translateY(2px); }

/* Das Blatt mit seinen Durchschlägen -------------------------------------- */
.blatt {
  position: relative;
  background: var(--original);
  border: 1px solid #E8E5DA;
  border-radius: var(--r-blatt);
  box-shadow: var(--s-blatt);
}
/* Stapel: das Blatt und darunter seine Durchschläge (Gelb = Einzug, Rosa = Auszug) */
.stapel { position: relative; isolation: isolate; }
.stapel > .blatt { position: relative; z-index: 1; }
.stapel--durchschlag::before, .stapel--durchschlag::after,
.stapel--einzug::before, .stapel--auszug::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  border-radius: var(--r-blatt);
  box-shadow: 0 10px 24px -16px rgba(27, 29, 58, 0.35);
}
.stapel--durchschlag::before, .stapel--einzug::before { background: var(--gelb); border: 1px solid var(--gelb-kante); transform: translate(4px, 8px); }
.stapel--durchschlag::after { background: var(--rosa); border: 1px solid var(--rosa-kante); transform: translate(8px, 15px); z-index: -1; }
.stapel--auszug::before { background: var(--rosa); border: 1px solid var(--rosa-kante); transform: translate(4px, 8px); }
@media (min-width: 640px) {
  .stapel--durchschlag::before, .stapel--einzug::before { transform: translate(8px, 10px) rotate(0.9deg); }
  .stapel--durchschlag::after { transform: translate(15px, 19px) rotate(1.7deg); }
  .stapel--auszug::before { transform: translate(8px, 10px) rotate(-0.9deg); }
}
/* Lochung im linken Rand */
.blatt--gelocht {
  background-image:
    radial-gradient(circle at 50% 50%, var(--papier-tief) 0 5.5px, #D9D5C7 5.5px 6.5px, transparent 7px),
    radial-gradient(circle at 50% 50%, var(--papier-tief) 0 5.5px, #D9D5C7 5.5px 6.5px, transparent 7px);
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background-position: 9px calc(50% - 56px), 9px calc(50% + 56px);
}

/* Formularkopf: die Kopfzeile eines Durchschreibesatzes */
.formkopf {
  display: flex; flex-wrap: wrap; align-items: stretch;
  border: 1px solid var(--stift-linie); border-radius: 3px;
  font: 500 0.6875rem/1.25 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--stift);
  background: var(--original); overflow: hidden;
}
.formkopf > * { flex: 1 1 auto; padding: 7px 10px; display: flex; align-items: center; gap: 6px; white-space: nowrap; min-width: 0; }
.formkopf b { font-weight: 600; }
/* Telefon: Titelzeile oben über die ganze Breite, darunter die übrigen Felder */
.formkopf__breit { flex-basis: 100%; border-bottom: 1px solid var(--stift-linie); }
.formkopf > :not(.formkopf__breit) + * { border-left: 1px solid var(--stift-linie); }
@media (min-width: 800px) {
  .formkopf { flex-wrap: nowrap; letter-spacing: 0.08em; }
  .formkopf > * { flex: 0 0 auto; }
  .formkopf__breit { flex: 1 1 auto; border-bottom: 0; }
  .formkopf > * + * { border-left: 1px solid var(--stift-linie); }
}

/* Feldlegende: Überschrift als Feld eines Formulars */
.feld-titel { display: inline-flex; align-items: center; gap: 10px; }
.feld-titel + h2, .feld-titel + h3 { margin-top: var(--a-3); }
.feld-titel__nr {
  display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px;
  border: 1.5px solid var(--stift); border-radius: 3px;
  font: 600 0.75rem/1 var(--f-mono); color: var(--stift);
}
.feld-titel__text { font: 500 0.75rem/1.3 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--stift); }

/* Ankreuzfeld: die Hauptaktion als Formularfeld --------------------------- */
.ankreuzen { border: 0; margin: 0; padding: 0; min-width: 0; }
.ankreuzen__frage { display: block; margin-bottom: var(--a-2); font: 500 0.75rem/1.3 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--grau); }
.ankreuzen__liste { display: grid; gap: var(--a-2); max-width: 520px; }
.ankreuzen__option {
  position: relative; display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 14px;
  min-height: 64px; padding: 12px 16px 12px 14px;
  background: var(--original); border: 1.5px solid var(--linie-stark); border-radius: var(--r-feld);
  color: var(--tinte); text-decoration: none;
  box-shadow: 0 1px 0 rgba(27, 29, 58, 0.04);
  transition: border-color var(--d-kurz) linear, box-shadow var(--d-mittel) var(--ease), transform var(--d-kurz) var(--ease);
}
.ankreuzen__option:hover { border-color: var(--stift); box-shadow: 0 12px 24px -16px rgba(59, 47, 143, 0.55); text-decoration: none; }
.ankreuzen__option:active { transform: translateY(1px); }
.ankreuzen__kasten {
  width: 30px; height: 30px; border: 2px solid var(--tinte); border-radius: 3px; background: var(--original);
  position: relative;
}
.ankreuzen__kasten::after {
  content: ""; position: absolute; inset: -4px; background: var(--kreuz) center / contain no-repeat;
  opacity: 0; transform: scale(0.6) rotate(-8deg);
  transition: opacity var(--d-kurz) linear, transform var(--d-mittel) var(--ease-aus);
}
.ankreuzen__option:hover .ankreuzen__kasten::after,
.ankreuzen__option:focus-visible .ankreuzen__kasten::after,
.ankreuzen__option--gewaehlt .ankreuzen__kasten::after { opacity: 1; transform: none; }
.ankreuzen__text { display: grid; gap: 2px; }
.ankreuzen__titel { font-weight: 600; font-size: 1.0625rem; line-height: 1.25; hyphens: manual; }
.ankreuzen__info { font: 400 0.75rem/1.35 var(--f-mono); color: var(--grau); letter-spacing: 0.02em; }
.ankreuzen__pfeil { width: 20px; height: 20px; background: var(--stift); -webkit-mask: var(--pfeil) center / contain no-repeat; mask: var(--pfeil) center / contain no-repeat; transition: transform var(--d-mittel) var(--ease); }
.ankreuzen__option:hover .ankreuzen__pfeil { transform: translateX(3px); }
.ankreuzen__option--gewaehlt { background: var(--stift); border-color: var(--stift); color: #fff; box-shadow: var(--s-knopf); }
.ankreuzen__option--gewaehlt:hover { background: var(--stift-tief); border-color: var(--stift-tief); color: #fff; }
.ankreuzen__option--gewaehlt .ankreuzen__kasten { border-color: #fff; }
.ankreuzen__option--gewaehlt .ankreuzen__info { color: #DCD8F3; }
.ankreuzen__option--gewaehlt .ankreuzen__pfeil { background: #fff; }
.zusicherung { margin-top: var(--a-3); display: flex; align-items: flex-start; gap: 8px; font-size: 0.875rem; color: var(--grau); line-height: 1.45; }
.zusicherung::before { content: ""; flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; background: var(--gruen); -webkit-mask: var(--haken) center / contain no-repeat; mask: var(--haken) center / contain no-repeat; }


/* Stempel ---------------------------------------------------------------- */
.stempel {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border: 2px solid currentColor; border-radius: 4px;
  font: 600 0.6875rem/1.1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gruen); transform: rotate(-3deg);
  mix-blend-mode: multiply;
}
.stempel--rot { color: var(--rot); transform: rotate(2.5deg); }
.stempel--stift { color: var(--stift); }

/* Chips ------------------------------------------------------------------ */
.marke-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 3px 10px;
  border-radius: 999px; border: 1px solid var(--linie-stark); background: var(--original);
  font: 500 0.75rem/1.2 var(--f-mono); color: var(--grau); letter-spacing: 0.02em;
}
.marke-chip--einzug { background: var(--gelb-hell); border-color: var(--gelb-kante); color: var(--gelb-text); }
.marke-chip--auszug { background: var(--rosa-hell); border-color: var(--rosa-kante); color: var(--rosa-text); }

/* Seitenkopf (Unterseiten) ------------------------------------------------ */
.seitenkopf { padding: var(--a-5) 0 var(--a-7); }
.seitenkopf__ober { margin-bottom: var(--a-3); }
.seitenkopf h1 { max-width: 24ch; }
.seitenkopf__einleitung { margin-top: var(--a-4); font-size: var(--t-l); line-height: 1.55; color: #33365A; max-width: 60ch; }
.seitenkopf__aktionen { margin-top: var(--a-5); display: flex; flex-wrap: wrap; gap: var(--a-3); }

/* Abschnitte: eine Aussage pro Abschnitt ---------------------------------- */
.abschnitt { padding: var(--a-8) 0; }
.abschnitt + .abschnitt { padding-top: 0; }
.abschnitt__kopf { max-width: 760px; margin-bottom: var(--a-6); }
.abschnitt__kopf p { margin-top: var(--a-3); color: #33365A; font-size: var(--t-l); }
.abschnitt__kopf--mitte { margin-inline: auto; text-align: center; }
.abschnitt__kopf--mitte .feld-titel { justify-content: center; }

.zweier { display: grid; gap: var(--a-6); align-items: center; }
.zweier__text > * + * { margin-top: var(--a-4); }
.zweier__text h2 { max-width: 18ch; }
.zweier__text .text { color: #33365A; }
.zweier__text .text > * + * { margin-top: var(--a-3); }
@media (min-width: 960px) {
  .zweier { grid-template-columns: 1fr 1fr; gap: var(--a-8); }
  .zweier--umgekehrt .zweier__bild { order: -1; }
}

/* Punkte mit angekreuzten Kästchen */
.punkte { list-style: none; padding: 0; display: grid; gap: 10px; }
.punkte li { position: relative; padding-left: 34px; line-height: 1.5; }
.punkte li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px;
  border: 1.5px solid var(--tinte); border-radius: 2px; background: var(--original);
}
.punkte li::after { content: ""; position: absolute; left: -3px; top: -1px; width: 26px; height: 26px; background: var(--kreuz) center / contain no-repeat; }

/* Text aus dem Inhalt (Markdown, HTML) ------------------------------------ */
.prosa { color: #2A2D4E; font-size: 1.0625rem; line-height: 1.7; }
.prosa > * + * { margin-top: 1.05em; }
.prosa h2 { font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.85rem); margin-top: 2em; padding-top: 0.4em; scroll-margin-top: 96px; }
.prosa h3 { font-size: 1.2rem; margin-top: 1.6em; scroll-margin-top: 96px; }
.prosa h2 + *, .prosa h3 + * { margin-top: 0.6em; }
.prosa ul, .prosa ol { padding-left: 1.35em; }
.prosa li + li { margin-top: 0.4em; }
.prosa li::marker { color: var(--stift); }
.prosa blockquote { border-left: 3px solid var(--gelb-kante); background: var(--gelb-hell); padding: 14px 18px; border-radius: 0 6px 6px 0; }
.prosa code { font-family: var(--f-mono); font-size: 0.9em; background: var(--stift-hauch); padding: 1px 5px; border-radius: 4px; }
.prosa a { overflow-wrap: anywhere; }
.prosa img { border-radius: var(--r-blatt); }
.prosa hr { margin: 2em 0; }
/* Tabellen: Formularlinien, einheitlich */
.tabelle-huelle, .prosa .tabelle-huelle { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--linie-stark); border-radius: 6px; background: var(--original); }
.prosa table, table.tabelle { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.45; background: var(--original); }
.prosa > table { display: block; overflow-x: auto; border: 1px solid var(--linie-stark); border-radius: 6px; }
.prosa th, .prosa td, .tabelle th, .tabelle td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linie); }
.prosa th, .tabelle th { font: 500 0.75rem/1.3 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--stift); background: var(--stift-hauch); border-bottom: 1px solid var(--stift-linie); }
.prosa tr:last-child td, .tabelle tr:last-child td { border-bottom: 0; }

/* Hinweis und Rechtshinweis */
.hinweis {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
  padding: 14px 16px; border-radius: 6px; background: var(--gelb-hell); border: 1px solid var(--gelb-kante);
  font-size: 0.9375rem; color: var(--tinte); line-height: 1.5;
}
.hinweis::before { content: "§"; font: 600 1rem/1.4 var(--f-mono); color: var(--gelb-text); }
.hinweis--stift { background: var(--stift-hauch); border-color: var(--stift-linie); }
.hinweis--stift::before { content: "i"; color: var(--stift); }

/* Häufige Fragen: ein Akkordeon in Formularoptik -------------------------- */
.fragen { display: grid; gap: var(--a-2); }
.frage { background: var(--original); border: 1px solid var(--linie); border-radius: var(--r-feld); box-shadow: 0 1px 0 rgba(27, 29, 58, 0.03); }
.frage[open] { border-color: var(--stift-linie); box-shadow: 0 16px 30px -24px rgba(59, 47, 143, 0.5); }
.frage summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 24px; gap: var(--a-3); align-items: center;
  min-height: 56px; padding: 14px 18px; font-weight: 600; line-height: 1.35;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: ""; width: 22px; height: 22px; border: 1.5px solid var(--stift); border-radius: 3px;
  background: var(--winkel) center / 16px no-repeat; transition: transform var(--d-mittel) var(--ease);
}
.frage[open] summary::after { transform: rotate(180deg); }
.frage__antwort { padding: 0 18px 18px; color: #33365A; line-height: 1.65; }
.frage__antwort > * + * { margin-top: 0.7em; }
@media (min-width: 960px) {
  .fragen--zwei { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* Fotos mit aufgelegtem Formularzettel ------------------------------------ */
.foto {
  position: relative; margin: 0; border-radius: var(--r-karte); overflow: visible;
}
.foto__bild { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-karte); box-shadow: var(--s-blatt); background: var(--papier-tief); }
.foto--hoch .foto__bild { aspect-ratio: 4 / 5; }
.zettel {
  position: absolute; z-index: 2;
  background: var(--original); border: 1px solid #E8E5DA; border-radius: 4px;
  box-shadow: var(--s-hoch);
  padding: 10px 12px 12px; min-width: 180px; max-width: 240px;
  transform: rotate(-2deg);
}
.zettel--gelb { background: var(--gelb-hell); border-color: var(--gelb-kante); }
.zettel--rosa { background: var(--rosa-hell); border-color: var(--rosa-kante); }
.zettel__kopf { font: 500 0.625rem/1.2 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--stift); padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--stift-linie); display: flex; justify-content: space-between; gap: 8px; }
.zettel__zeile { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: baseline; padding: 3px 0; border-bottom: 1px dashed var(--linie-stark); font-size: 0.8125rem; color: var(--grau); }
.zettel__zeile:last-child { border-bottom: 0; }
.zettel__wert { font: 600 1.35rem/1 var(--f-hand); color: var(--stift); }
.zettel__wert--rot { color: var(--rot); }
.zettel { max-width: min(240px, 92%); }
.zettel--unten-links { left: 4px; bottom: -22px; }
.zettel--oben-rechts { right: 6px; top: -18px; transform: rotate(2deg); }
.zettel--unten-rechts { right: 6px; bottom: -24px; transform: rotate(1.5deg); }
@media (min-width: 640px) {
  .zettel--unten-links { left: -8px; }
  .zettel--oben-rechts { right: -8px; }
  .zettel--unten-rechts { right: -6px; }
}
@media (min-width: 960px) {
  .zettel--unten-links { left: -28px; bottom: -28px; }
  .zettel--oben-rechts { right: -24px; top: -24px; }
  .zettel--unten-rechts { right: -26px; bottom: -30px; }
}
.foto__nachweis { margin-top: 8px; font: 400 0.6875rem/1.3 var(--f-mono); color: var(--grau); }

/* Karten (Ratgeber, Vorlagen) --------------------------------------------- */
.karten { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--a-4); }
@media (min-width: 640px) { .karten--zwei, .karten--drei { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .karten--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.karte {
  position: relative; display: flex; flex-direction: column; gap: var(--a-3);
  padding: var(--a-5); background-color: var(--original); border: 1px solid #E8E5DA; border-radius: var(--r-blatt);
  box-shadow: var(--s-blatt); color: var(--tinte); text-decoration: none;
  transition: transform var(--d-mittel) var(--ease), box-shadow var(--d-mittel) var(--ease);
}
a.karte:hover { transform: translateY(-3px); box-shadow: var(--s-hoch); text-decoration: none; }
.karte h2, .karte h3 { font-size: 1.25rem; line-height: 1.3; }
.karte p { color: #3E4163; font-size: 0.9375rem; line-height: 1.55; }
.karte__fuss { margin-top: auto; padding-top: var(--a-3); border-top: 1px dashed var(--linie-stark); display: flex; justify-content: space-between; align-items: center; gap: var(--a-3); font: 500 0.75rem/1.3 var(--f-mono); color: var(--grau); letter-spacing: 0.03em; }
.karte__weiter { color: var(--stift); display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.karte__weiter::after { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--pfeil) center / contain no-repeat; mask: var(--pfeil) center / contain no-repeat; }

/* Zahlen: Fakten als ausgefüllte Formularfelder --------------------------- */
.zahlen { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--stift-linie); border-radius: 6px; background: var(--original); overflow: hidden; }
.zahl { padding: 12px 14px 14px; border-bottom: 1px solid var(--stift-linie); display: grid; gap: 4px; }
.zahl:last-child { border-bottom: 0; }
@media (min-width: 640px) {
  .zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zahl { grid-template-columns: 1fr; gap: 4px; align-content: start; padding: 14px 14px 16px; border-right: 1px solid var(--stift-linie); border-bottom: 1px solid var(--stift-linie); }
  .zahl:nth-child(2n) { border-right: 0; }
}
.zahl__wert { font: 600 1.9rem/1 var(--f-hand); color: var(--stift); }
.zahl__text { font-size: 0.875rem; line-height: 1.45; color: var(--grau); hyphens: manual; }
@media (min-width: 960px) {
  .zahlen--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .zahlen--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .zahlen--4 .zahl, .zahlen--3 .zahl { border-bottom: 0; border-right: 1px solid var(--stift-linie); }
  .zahlen--4 .zahl:last-child, .zahlen--3 .zahl:last-child { border-right: 0; }
  .zahl { padding: 18px 20px 20px; }
  .zahl__wert { font-size: 2.6rem; }
}

/* Telefonrahmen (Illustration) ------------------------------------------- */
.telefon {
  position: relative; width: 280px; aspect-ratio: 9 / 18.6;
  background: #15172E; border-radius: var(--r-telefon); padding: 9px;
  box-shadow: var(--s-hoch), inset 0 0 0 1.5px #3A3D63;
}
.telefon::before { content: ""; position: absolute; top: 15px; left: 50%; width: 76px; height: 20px; margin-left: -38px; background: #15172E; border-radius: 12px; z-index: 3; }
.telefon__schirm { position: relative; height: 100%; border-radius: 30px; overflow: hidden; background: var(--papier); display: flex; flex-direction: column; }

/* Herunterladen-Karte für Vorlagen ---------------------------------------- */
.pdfkarte { display: grid; grid-template-columns: 88px 1fr; gap: var(--a-4); align-items: start; padding: var(--a-4); background: var(--original); border: 1px solid #E8E5DA; border-radius: 6px; box-shadow: var(--s-blatt); }
.pdfkarte__vorschau { position: relative; width: 88px; }
.pdfkarte__vorschau img { width: 88px; aspect-ratio: 210 / 297; object-fit: cover; border: 1px solid var(--linie-stark); border-radius: 2px; background: #fff; box-shadow: 4px 4px 0 var(--gelb), 4px 4px 0 1px var(--gelb-kante); }
.pdfkarte--auszug .pdfkarte__vorschau img { box-shadow: 4px 4px 0 var(--rosa), 4px 4px 0 1px var(--rosa-kante); }
.pdfkarte--neutral .pdfkarte__vorschau img, .pdfkarte--wgb .pdfkarte__vorschau img { box-shadow: 4px 4px 0 var(--stift-hauch), 4px 4px 0 1px var(--stift-linie); }
.pdfkarte__text { display: grid; gap: 6px; min-width: 0; }
.pdfkarte__titel { font-weight: 600; font-size: 1.0625rem; line-height: 1.3; }
.pdfkarte__daten { font: 400 0.75rem/1.4 var(--f-mono); color: var(--grau); }
.pdfkarte .knopf { margin-top: 6px; justify-self: start; }

/* Rückmeldung nach Formular ---------------------------------------------- */
.meldung { padding: 14px 16px; border-radius: 6px; border: 1.5px solid; font-size: 0.9375rem; line-height: 1.5; }
.meldung--erfolg { border-color: var(--gruen); background: var(--gruen-hauch); color: #134D31; }
.meldung--fehler { border-color: var(--rot); background: var(--rot-hauch); color: #8E241C; }

/* Formulare der Website (Kontakt) ---------------------------------------- */
.formular { display: grid; gap: var(--a-5); }
.formular__feld { display: grid; gap: 6px; }
.formular__feld label { font-weight: 600; font-size: 0.9375rem; }
.formular__feld input, .formular__feld textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; font-size: 1rem; line-height: 1.45;
  background: var(--original); border: 1.5px solid var(--linie-stark); border-radius: var(--r-feld);
  transition: border-color var(--d-kurz) linear, box-shadow var(--d-kurz) linear;
}
.formular__feld textarea { min-height: 180px; resize: vertical; }
.formular__feld input:focus, .formular__feld textarea:focus { outline: none; border-color: var(--stift); box-shadow: 0 0 0 3px var(--stift-hauch); }
.formular__feld [aria-invalid="true"] { border-color: var(--rot); }
.formular__fehler { color: var(--rot); font-size: 0.875rem; font-weight: 500; }
.formular__hilfe { color: var(--grau); font-size: 0.8125rem; }
.honig { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.abschnitt__kopf--breit { max-width: none; display: grid; gap: var(--a-4); }
.abschnitt__kopf--breit h2 { max-width: 22ch; }
.abschnitt__kopf--breit .feld-titel { margin-bottom: 0; }
@media (min-width: 960px) {
  .abschnitt__kopf--breit { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: var(--a-8); row-gap: var(--a-4); align-items: start; }
  .abschnitt__kopf--breit > .feld-titel, .abschnitt__kopf--breit > h2 { grid-column: 1; }
  .abschnitt__kopf--breit > :not(.feld-titel):not(h2) { grid-column: 2; }
  .abschnitt__kopf--breit > h2 + * { grid-row: 1 / span 3; }
}
.spalten-2 { color: #33365A; }
.spalten-2 > * + * { margin-top: var(--a-3); }

/* Vertikaler Rhythmus: Titel, Absatz, Liste, Knopf überall gleich (Spezifität 0) */
:where(h2, h3) + :where(.prosa, .punkte, .schrittliste, p, ul, ol, .text, .fragen) { margin-top: var(--a-3); }
:where(.prosa, .text, p, .zw-vergleich) + :where(.punkte, .schrittliste, ul, ol) { margin-top: var(--a-4); }
:where(.prosa, .text, .punkte, .schrittliste, ul, ol, p) + :where(.abschnitt__knopf, p, .prosa, .text) { margin-top: var(--a-4); }

/* Fehlerliste über dem Formular (nach einer Antwort des Servers) */
.fehlerliste { padding: 14px 16px 14px 18px; border: 1.5px solid var(--rot); border-left-width: 6px; border-radius: 6px; background: var(--rot-hauch); color: #8E241C; display: grid; gap: 8px; margin-bottom: var(--a-4); }
.fehlerliste:focus { outline: 3px solid var(--rot); outline-offset: 3px; }
.fehlerliste__titel { font-weight: 700; color: #7A1F18; }
.fehlerliste ul { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; }
.fehlerliste a { color: #8E241C; }
.meldung:focus { outline: 3px solid var(--stift); outline-offset: 3px; }
.meldung + .formular, .meldung + .fehlerliste { margin-top: var(--a-4); }