/* Dachwerk Riedholm, Runde 2: heller Grund, eine Fläche zum Wechseln, dunkler Fuß.
   Schriften und Farben aus der Firmen-DNA (Archivo, Source Sans 3; Ziegelorange, Schiefer, Papier, Ziegelrot). */

@font-face { font-family: "Archivo"; src: url("schriften/archivo-variable.woff2") format("woff2"); font-weight: 100 900; font-display: optional; }
@font-face { font-family: "Source Sans 3"; src: url("schriften/source-sans-3-variable.woff2") format("woff2"); font-weight: 200 900; font-display: optional; }

:root {
  --grund: #fbf8f3;        /* heller Grund, aus Papier #f6f1e7 aufgehellt */
  --flaeche: #f1eadd;      /* einzige zweite Fläche, zwischen Papier und Sand */
  --weiss: #fffdf9;        /* Briefblatt, Formular, Visitenkarte */
  --tinte: #272d28;        /* Schiefergrün */
  --neben: #545b53;        /* Nebentext */
  --linie: #ddd3c1;
  --feld: #8a8f84;         /* Feldrahmen, Grafik 3:1 */
  --ziegel: #f88758;       /* Ziegelorange, nur Flächen */
  --ziegel-hell: #fa9b73;
  --ziegelrot: #9a452d;    /* Ziegelrot für Text auf hell */
  --fuss: #272d28;
  --fuss-text: #e8e3d7;
  --fuss-neben: #b8bfb3;
  --titel: "Archivo", "Arial Narrow", Arial, sans-serif;
  --text: "Source Sans 3", "Segoe UI", Arial, sans-serif;
  --breite: 77.5rem;       /* 1240 px Inhaltsrahmen */
  --rand: clamp(1rem, 4vw, 2rem);
  --kopf: 4.5rem;          /* 72 px */
  --abstand: clamp(3rem, 6vw, 4.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf) + 1rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--grund); color: var(--tinte);
  font-family: var(--text); font-size: 1.0625rem; line-height: 1.55;
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, figure, blockquote, dl, dd, ul { margin: 0; }
ul { padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--titel); line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
h2 { font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.625rem); font-weight: 750; }
h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; }
a { color: var(--ziegelrot); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
::selection { background: var(--ziegel); color: var(--tinte); }
:focus-visible { outline: 3px solid var(--ziegelrot); outline-offset: 3px; border-radius: 4px; }
input, select, textarea, button { font: inherit; color: inherit; }
b, strong { font-weight: 700; }

.sprung { position: absolute; left: 1rem; top: -4rem; z-index: 50; background: var(--tinte); color: var(--weiss); padding: .75rem 1rem; border-radius: 6px; }
.sprung:focus { top: 1rem; }

.rahmen { max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand); }
.abschnitt { padding: var(--abstand) 0; }
.flaeche { background: var(--flaeche); }

.ki, .ki-marke { font-family: var(--text); font-size: .8125rem; font-weight: 600; letter-spacing: .01em; color: var(--neben); white-space: nowrap; }
.ki-marke { position: absolute; right: .5rem; bottom: .5rem; background: rgba(255, 253, 249, .9); color: var(--tinte); padding: .1rem .45rem; border-radius: 3px; }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: 0 1.25rem; border-radius: 6px; border: 2px solid transparent;
  font-family: var(--titel); font-weight: 700; font-size: 1rem; letter-spacing: 0;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.knopf-haupt { background: var(--ziegel); color: var(--tinte); }
.knopf-haupt:hover { background: var(--ziegel-hell); text-decoration: none; }
.knopf-haupt:active { transform: translateY(1px); }
.knopf-gross { min-height: 56px; padding: 0 1.75rem; font-size: 1.0625rem; }
.knopf-hell { border-color: rgba(255, 253, 249, .7); color: var(--weiss); background: transparent; }
.knopf-hell:hover { background: rgba(255, 253, 249, .12); }
.knopf-linie { border-color: var(--tinte); color: var(--tinte); background: transparent; }
.knopf-linie:hover { background: rgba(39, 45, 40, .06); }

.symbol { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- Musterleiste (R109), nicht klebend ---------- */
.nw-musterleiste { background: #1b201c; color: #fff; font-family: var(--text); font-size: .875rem; line-height: 1.35; }
.nw-musterleiste .mitte { max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand); display: flex; flex-wrap: wrap; gap: 0 1.25rem; align-items: center; justify-content: space-between; }
.nw-musterleiste .nw-text { padding: .3rem 0; }
.nw-musterleiste .nw-links { display: flex; align-items: center; gap: .25rem; }
.nw-musterleiste a { color: #fff; display: inline-flex; align-items: center; min-height: 44px; padding: 0 .65rem; border-radius: 4px; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); }
.nw-musterleiste a:hover { background: rgba(255, 255, 255, .12); }
.nw-musterleiste a.nw-cta { font-weight: 700; }
.nw-musterleiste .nw-ki { color: var(--ziegel); font-weight: 700; }
.nw-musterleiste .nw-lang { display: none; }
@media (min-width: 80em) { .nw-musterleiste .nw-lang { display: inline; } }
@media (max-width: 47.99em) {
  .nw-musterleiste { font-size: .8125rem; }
  .nw-musterleiste .nw-mittel { display: none; }
  .nw-musterleiste .mitte { gap: 0 .5rem; }
  .nw-musterleiste a { padding: 0 .45rem; }
}

/* ---------- Kopf: eine Zeile, die einzige klebende Leiste ---------- */
.kopf { position: sticky; top: 0; z-index: 20; background: var(--grund); border-bottom: 1px solid var(--linie); }
.kopf-innen { max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand); height: var(--kopf); display: flex; align-items: center; gap: .5rem; }
.marke { display: inline-flex; align-items: center; gap: .65rem; min-height: 44px; margin-right: auto; color: var(--tinte); text-decoration: none; min-width: 0; }
.marke img { width: 2.5rem; height: 2.5rem; flex: none; }
.marke-text { display: grid; line-height: 1.15; min-width: 0; }
.marke-name { font-family: var(--titel); font-weight: 750; font-size: 1.125rem; letter-spacing: -.01em; white-space: nowrap; }
.marke-zusatz { font-size: .875rem; color: var(--neben); white-space: nowrap; }
.menue { display: none; }
.kopf-telefon { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 44px; min-width: 44px; padding: 0 .5rem; color: var(--tinte); text-decoration: none; border-radius: 6px; font-family: var(--titel); font-weight: 700; font-variant-numeric: tabular-nums; }
.kopf-telefon:hover { background: rgba(39, 45, 40, .06); }
.kopf-telefon .symbol { color: var(--ziegelrot); }
@media (max-width: 35.99em) { .kopf-telefon { border: 1px solid var(--linie); } .kopf-innen { gap: .4rem; } .marke { gap: .5rem; } .marke img { width: 2.25rem; height: 2.25rem; } .marke-name { font-size: 1rem; } .marke-zusatz { font-size: .8125rem; } }
.kopf-nummer { display: none; font-size: 1.0625rem; white-space: nowrap; }
.kopf-knopf { display: none; }

.handy-menue { position: static; }
.handy-menue summary { list-style: none; display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; min-width: 44px; padding: 0 .6rem; border: 1px solid var(--linie); border-radius: 6px; cursor: pointer; font-family: var(--titel); font-weight: 650; }
.handy-menue summary::-webkit-details-marker { display: none; }
.handy-menue[open] summary { background: var(--tinte); color: var(--weiss); border-color: var(--tinte); }
.handy-liste { position: absolute; left: 0; right: 0; top: 100%; background: var(--grund); border-bottom: 1px solid var(--linie); padding: .5rem var(--rand) 1.25rem; display: grid; gap: .1rem; box-shadow: 0 18px 30px -20px rgba(39, 45, 40, .45); }
.handy-liste a:not(.knopf) { display: flex; align-items: center; min-height: 48px; color: var(--tinte); text-decoration: none; font-family: var(--titel); font-weight: 650; font-size: 1.125rem; border-bottom: 1px solid var(--linie); }
.handy-liste .knopf { margin-top: .9rem; }

@media (max-width: 22.49em) {
  .marke-zusatz { display: none; }
  .marke-name { font-size: .9375rem; }
  .handy-menue summary span { display: none; }
}
@media (min-width: 36em) { .kopf-nummer { display: inline; } }
@media (min-width: 72em) {
  .kopf-innen { gap: 1.25rem; }
  .menue { display: flex; gap: .15rem; margin-right: auto; }
  .menue a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .7rem; color: var(--tinte); text-decoration: none; font-family: var(--titel); font-weight: 600; font-size: 1rem; border-radius: 4px; }
  .menue a:hover { text-decoration: underline; text-decoration-color: var(--ziegelrot); text-underline-offset: 6px; text-decoration-thickness: 2px; }
  .marke { margin-right: .5rem; }
  .kopf-knopf { display: inline-flex; }
  .handy-menue { display: none; }
}
@media (min-width: 72em) and (max-width: 84.99em) { .marke-zusatz { display: none; } }

/* ---------- Erster Bildschirm ---------- */
.auftakt { display: grid; grid-template-columns: minmax(0, 1fr); }
.auftakt-text { min-width: 0; }
.auftakt-bild { position: relative; order: -1; }
.auftakt-bild img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 48% 50%; }
.auftakt-text { padding: 1.5rem var(--rand) 2.25rem; }
h1 { font-weight: 800; }
.h1-haupt { display: block; font-size: clamp(2.375rem, 1.5rem + 3.4vw, 4.5rem); letter-spacing: -.03em; line-height: 1; }
.h1-zusatz { display: block; margin-top: .6rem; font-size: clamp(1.375rem, 1.05rem + 1.1vw, 2rem); font-weight: 600; line-height: 1.15; color: var(--tinte); letter-spacing: -.015em; }
.auftakt-satz { margin-top: 1.1rem; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); color: var(--neben); max-width: 34rem; }
.auftakt-wege { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.telefon-gross { display: grid; min-height: 48px; align-content: center; color: var(--tinte); text-decoration: none; line-height: 1.2; }
.telefon-nummer { font-family: var(--titel); font-weight: 800; font-size: 1.5rem; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.telefon-zeit { font-size: .9375rem; color: var(--neben); }
.telefon-gross:hover .telefon-nummer { text-decoration: underline; text-decoration-color: var(--ziegel); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.fakten { margin-top: 1.75rem; padding-top: 1.1rem; border-top: 1px solid var(--linie); display: grid; grid-template-columns: repeat(3, minmax(0, max-content)); justify-content: start; gap: .25rem 1.75rem; font-size: 1rem; hyphens: auto; overflow-wrap: break-word; color: var(--neben); line-height: 1.3; }
.fakten b { display: block; font-family: var(--titel); font-weight: 750; font-size: 1.125rem; color: var(--tinte); }

@media (min-width: 64em) {
  .auftakt {
    grid-template-columns: minmax(var(--rand), 1fr) minmax(0, calc(var(--breite) * .42)) minmax(0, calc(var(--breite) * .58)) minmax(var(--rand), 1fr);
    height: clamp(34rem, calc(100svh - 7.25rem - 4.5rem), 54rem);
  }
  .auftakt-text { grid-column: 2; grid-row: 1; align-self: center; padding: 0 2.75rem 1rem 0; }
  .auftakt-bild { grid-column: 3 / 5; grid-row: 1; order: 0; height: 100%; }
  .auftakt-bild img { height: 100%; aspect-ratio: auto; object-position: 44% 50%; }
  .ki-marke { right: .75rem; bottom: .75rem; }
}

/* ---------- Kopfzeile eines Abschnitts: Überschrift links, ein Satz rechts ---------- */
.kopfzeile { display: grid; gap: .6rem 3rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); align-items: end; }
.kopfzeile p { color: var(--neben); max-width: 36rem; }
@media (min-width: 56em) { .kopfzeile { grid-template-columns: 1fr minmax(0, 30rem); } .kopfzeile p { justify-self: end; } }

/* ---------- Leistungen ---------- */
#leistungen { padding-top: 2.5rem; }
.leistungen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1rem; }
.leistung { display: flex; flex-direction: column; min-width: 0; position: relative; }
.leistung > .ki-marke { top: .5rem; bottom: auto; right: .5rem; }
.leistung img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 3px; }
.leistung h3 { margin-top: .9rem; }
.leistung p { margin-top: .35rem; color: var(--neben); hyphens: auto; overflow-wrap: break-word; }
.leistung .preis { margin-top: auto; padding-top: .55rem; font-family: var(--titel); font-weight: 700; color: var(--ziegelrot); font-variant-numeric: tabular-nums; }
.sturm { background: var(--tinte); color: var(--weiss); border-radius: 4px; overflow: hidden; }
.sturm img { border-radius: 0; }
.sturm-text { padding: 0 1rem 1.1rem; display: flex; flex-direction: column; flex: 1; }
.sturm h3 { color: var(--weiss); }
.sturm p { color: #d9ddd4; }
.sturm-wege { margin-top: auto; padding-top: .9rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.sturm-wege .knopf { flex: 1 1 auto; }
@media (max-width: 39.99em) {
  .leistungen { align-items: start; }
  .leistung .preis { margin-top: 0; }
  .leistung h3 { font-size: 1.0625rem; }
  .leistung p { font-size: 1rem; line-height: 1.45; }
  .sturm-wege .knopf { padding: .35rem .6rem; font-size: .9375rem; white-space: normal; text-align: center; line-height: 1.2; }
}
@media (min-width: 64em) {
  .leistungen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.25rem 2rem; }
  .sturm-text { padding: 0 1.4rem 1.4rem; }
}

/* ---------- Signatur: Ein Wort vom Meister ---------- */
.meister { display: grid; gap: 2.5rem; align-items: center; }
.blatt {
  background: var(--weiss); border-radius: 4px; padding: clamp(1.5rem, 4vw, 3.25rem);
  box-shadow: 0 1px 2px rgba(39, 45, 40, .08), 0 24px 48px -30px rgba(39, 45, 40, .45);
}
.blatt h2 { margin-bottom: 1.25rem; }
.blatt p { font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); line-height: 1.6; max-width: 36em; }
.blatt p + p { margin-top: .85em; }
.gruss { margin-top: 1.5rem; }
.gruss p { margin: 0; }
.unterschrift { width: 14rem; height: auto; color: var(--tinte); margin: .25rem 0 0 -.35rem; }
.gruss-name { font-size: 1rem !important; color: var(--neben); }
.meister-bild { position: relative; padding-bottom: 5.5rem; max-width: 30rem; }
.portraet { position: relative; }
.portraet img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px; }
.visitenkarte {
  position: absolute; right: 0; bottom: 0; width: min(19.5rem, 88%);
  background: var(--weiss); border-radius: 6px; padding: 1.1rem 1.3rem 1.2rem;
  box-shadow: 0 2px 4px rgba(39, 45, 40, .1), 0 22px 40px -22px rgba(39, 45, 40, .55);
  display: grid; grid-template-columns: 1fr auto;
}
.visitenkarte img { grid-column: 2; grid-row: 1 / 3; width: 2.125rem; height: 2.125rem; }
.vk-name { grid-column: 1; font-family: var(--titel); font-weight: 750; font-size: 1.1875rem; }
.vk-rolle { grid-column: 1; font-size: 1rem; color: var(--neben); }
.vk-nummer { grid-column: 1 / 3; margin-top: .6rem; display: inline-flex; align-items: center; min-height: 44px; font-family: var(--titel); font-weight: 800; font-size: 1.5rem; color: var(--tinte); text-decoration: none; font-variant-numeric: tabular-nums; border-top: 1px solid var(--linie); padding-top: .4rem; }
.vk-nummer:hover { color: var(--ziegelrot); }
.vk-zeit { grid-column: 1 / 3; font-size: 1rem; color: var(--neben); }
@media (max-width: 47.99em) {
  .portraet img { aspect-ratio: 4 / 3.4; object-position: 50% 18%; }
  .meister-bild { max-width: none; padding-bottom: 6.5rem; }
}
@media (min-width: 64em) {
  .meister { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; }
  .meister-bild { justify-self: end; width: 100%; padding-bottom: 0; }
  .visitenkarte { right: auto; left: -3.25rem; bottom: -1.75rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .js .gruss .zug { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .gruss.gezeichnet .zug { stroke-dashoffset: 0; transition: stroke-dashoffset .9s cubic-bezier(.45, .05, .35, 1); }
  .js .gruss.gezeichnet .zug-2 { transition-duration: 1.5s; transition-delay: .75s; }
  .js .gruss.gezeichnet .zug-3 { transition-duration: .5s; transition-delay: 2.3s; }
}

/* ---------- Referenzen ---------- */
.arbeiten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
.arbeit { display: flex; flex-direction: column; min-width: 0; }
.arbeit img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 3px; }
.arbeit figcaption { margin-top: .6rem; color: var(--neben); font-size: 1rem; line-height: 1.45; }
.arbeit figcaption b { color: var(--tinte); font-family: var(--titel); }
.arbeit-gross { grid-column: 1 / -1; }
@media (min-width: 64em) {
  .arbeiten { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); grid-template-rows: auto auto; gap: 2rem; }
  .arbeit-gross { grid-column: 1; grid-row: 1 / 3; }
  .arbeit-gross img { flex: 1; min-height: 0; aspect-ratio: auto; height: 100%; object-position: 50% 45%; }
  .arbeit-gross figcaption { font-size: 1.0625rem; }
}

.vertrauen { margin-top: clamp(2.5rem, 5vw, 3.5rem); display: grid; gap: 1.75rem; }
.team img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 3px; }
.team figcaption { margin-top: .6rem; color: var(--neben); font-size: 1rem; }
.stimmen { display: grid; gap: 1.25rem; align-content: center; }
.stimme { background: var(--weiss); border-radius: 4px; padding: 1.4rem 1.5rem 1.3rem; border: 1px solid var(--linie); }
.stimme p { font-size: clamp(1.125rem, 1rem + .4vw, 1.375rem); line-height: 1.45; font-weight: 500; }
.stimme footer { margin-top: .7rem; font-size: .9375rem; color: var(--neben); font-weight: 600; }
@media (min-width: 64em) {
  .vertrauen { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem; align-items: center; }
  .stimmen { gap: 1.5rem; padding-left: 1rem; }
  .stimme { padding: 1.75rem 2rem 1.5rem; }
}

/* ---------- Kontakt mit Anfrage ---------- */
.kontakt { display: grid; gap: 1.75rem; align-items: start; }
.anfrage { background: var(--weiss); border-radius: 6px; padding: clamp(1.25rem, 3vw, 2rem); display: grid; gap: 1.1rem; box-shadow: 0 1px 2px rgba(39, 45, 40, .08), 0 20px 40px -32px rgba(39, 45, 40, .45); min-width: 0; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend, .feld label { font-family: var(--titel); font-weight: 650; font-size: 1rem; padding: 0; margin-bottom: .45rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips legend { width: 100%; }
.chips label { position: relative; }
.chips input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chips span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border: 1px solid var(--feld); border-radius: 999px; background: var(--weiss); cursor: pointer; transition: background-color .12s ease; }
.chips label:hover span { background: var(--grund); }
.chips input:checked + span, .chips label:hover input:checked + span { background: var(--tinte); border-color: var(--tinte); color: var(--weiss); }
.chips input:focus-visible + span { outline: 3px solid var(--ziegelrot); outline-offset: 2px; }
.chips-klein span { min-width: 4.5rem; justify-content: center; }
.sturm-felder { display: grid; gap: .9rem; padding: 1rem; border-radius: 4px; background: var(--grund); border: 1px solid var(--linie); }
.js .sturm-felder:not(.offen) { display: none; }
.eilt { background: var(--tinte); color: var(--weiss); padding: .85rem 1rem; border-radius: 4px; font-weight: 600; }
.eilt a { color: var(--ziegel); font-family: var(--titel); font-weight: 800; white-space: nowrap; }
.fotos { display: grid; gap: .6rem; justify-items: start; }
.datei { position: relative; overflow: hidden; }
.datei input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.datei:focus-within { outline: 3px solid var(--ziegelrot); outline-offset: 2px; }
.vorschau { display: flex; flex-wrap: wrap; gap: .5rem; }
.vorschau:empty { display: none; }
.vorschau li { position: relative; }
.vorschau img { width: 5.5rem; height: 4.25rem; object-fit: cover; border-radius: 3px; }
.vorschau button { position: absolute; top: -.6rem; right: -.6rem; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; padding: 0; display: grid; place-items: center; }
.vorschau button span { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--tinte); color: var(--weiss); display: grid; place-items: center; font-size: 1rem; line-height: 1; }
.hinweis, .frei { font-size: .9375rem; color: var(--neben); font-weight: 400; }
.feld-reihe { display: grid; gap: 1.1rem; }
@media (min-width: 36em) { .feld-reihe { grid-template-columns: 1fr 1fr; } }
.feld { display: grid; min-width: 0; }
.feld input, .feld select, .feld textarea { width: 100%; min-height: 48px; padding: .6rem .8rem; border: 1px solid var(--feld); border-radius: 4px; background: #fff; }
.feld textarea { resize: vertical; min-height: 4.5rem; }
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible { outline: 3px solid var(--ziegelrot); outline-offset: 1px; border-color: var(--tinte); }
.feld [aria-invalid="true"], .chips.fehlt span { border-color: #b3261e; }
.anfrage > .knopf { justify-self: start; }
.rueckmeldung { padding: 1rem 1.1rem; border-radius: 4px; background: var(--flaeche); border: 1px solid var(--linie); }
.rueckmeldung.fehler { background: #fbeae6; border-color: #e3b2a6; }
.rueckmeldung strong { display: block; font-family: var(--titel); margin-bottom: .2rem; }

.kontakt-seite { display: grid; gap: 1.5rem; min-width: 0; }
.zusammenfassung { background: var(--tinte); color: var(--weiss); border-radius: 6px; padding: 1.4rem 1.5rem; }
.zf-titel { font-family: var(--titel); font-weight: 750; font-size: 1.25rem; margin-bottom: .6rem; }
.zusammenfassung dl div { display: grid; grid-template-columns: 7.5rem 1fr; gap: .75rem; padding: .45rem 0; border-top: 1px solid rgba(255, 253, 249, .16); }
.zusammenfassung dt { color: #c9cec4; }
.zusammenfassung dd { font-weight: 600; }
.zusammenfassung .gesetzt { color: var(--ziegel); }
.zf-satz { margin-top: .7rem; color: #d9ddd4; font-size: 1rem; }
.adresse div { display: grid; grid-template-columns: 7.5rem 1fr; gap: .75rem; padding: .55rem 0; border-top: 1px solid var(--linie); }
.adresse div:last-child { border-bottom: 1px solid var(--linie); }
.adresse dt { color: var(--neben); }
.adresse dd { min-width: 0; overflow-wrap: anywhere; }
.adresse a { display: inline-flex; align-items: center; min-height: 44px; margin: -.55rem 0; font-weight: 600; }
@media (max-width: 23.99em) { .zusammenfassung dl div, .adresse div { grid-template-columns: 6rem 1fr; } }
@media (min-width: 64em) {
  .kontakt { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2.5rem; }
  .kontakt-seite { position: sticky; top: calc(var(--kopf) + 1.25rem); }
}

/* ---------- Fuß ---------- */
.fuss { background: var(--fuss); color: var(--fuss-text); padding: clamp(2.5rem, 5vw, 3.5rem) 0 2rem; font-size: 1rem; }
.fuss a { color: var(--fuss-text); }
.fuss-oben { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(232, 227, 215, .18); }
.fuss-marke { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--titel); font-weight: 750; font-size: 1.25rem; }
.fuss-satz { font-family: var(--titel); font-weight: 600; font-size: 1.125rem; color: var(--ziegel); }
.fuss-spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1.5rem; padding: 1.5rem 0; }
.fuss-kopf { font-family: var(--titel); font-weight: 700; color: #fff; margin-bottom: .3rem; }
.fuss-spalten p { color: var(--fuss-neben); }
.fuss-spalten p a { display: inline-flex; min-height: 44px; align-items: center; margin: -.6rem 0; }
.fuss-links li a { display: inline-flex; align-items: center; min-height: 44px; }
.musterhinweis { padding-top: 1.25rem; border-top: 1px solid rgba(232, 227, 215, .18); font-size: .9375rem; color: var(--fuss-neben); max-width: 60rem; }
@media (min-width: 64em) { .fuss-spalten { grid-template-columns: 1fr 1fr 1.3fr .8fr; gap: 2.5rem; } }

/* ---------- Biberschwanz-Kante: Wiedererkennungszeichen des Betriebs (übernommen aus der Ursprungsfassung vom 23.09.2026) ----------
   Am oberen Rand eines Abschnitts hängen die Ziegel des vorhergehenden Abschnitts über: halbrunde Biberschwänze im 28-px-Raster,
   14 px hoch, in der Farbe der Fläche darüber (--kante-farbe). Reine Zierde, verdeckt keinen Inhalt: Abschnitte mit Kante bekommen
   oben 14 px mehr Innenabstand. */
.kante { position: relative; --kante-farbe: var(--grund); }
.kante-flaeche { --kante-farbe: var(--flaeche); }
.kante::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px; pointer-events: none;
  background: radial-gradient(circle at 50% 0, var(--kante-farbe) 13px, transparent 13.5px) 0 0 / 28px 14px repeat-x;
}
.abschnitt.kante { padding-top: calc(var(--abstand) + 14px); }
.fuss.kante { padding-top: calc(clamp(2.5rem, 5vw, 3.5rem) + 14px); }

/* F1 Dach-wird-eingedeckt: Die Kante legt sich Ziegel für Ziegel von links nach rechts, sobald der Abschnitt ins Bild kommt
   (Klasse .eingedeckt aus seite.js). steps() statt weicher Kurve, damit jeder Ziegel einzeln liegt. Versteckt wird nur unter
   html.js und nur ohne abbestellte Bewegung: Ohne JavaScript oder mit reduzierter Bewegung steht die Kante sofort fertig da. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes eindecken { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  .js .kante::before { clip-path: inset(0 100% 0 0); }
  .js .kante.eingedeckt::before { animation: eindecken 1.1s steps(40, end) forwards; }
}
@media print { .js .kante::before { clip-path: none; animation: none; } }