/* Noto Sans — selbst ausgeliefert (Datenschutz: keine Verbindung zu Google Fonts). SIL OFL 1.1.
   EINE Variable-Datei je Teilmenge, Gewichte 300–700 über die wght-Achse. Quelle: Google-Fonts-Dateien,
   08.10.2026 — die vier Gewichts-Abrufe lieferten byteidentische Dateien, daher nur je eine. */
@font-face{font-family:"Noto Sans";font-style:normal;font-weight:300 700;font-display:swap;src:url(/schrift/noto-sans-variabel-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Noto Sans";font-style:normal;font-weight:300 700;font-display:swap;src:url(/schrift/noto-sans-variabel-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ============================================================
   Design-Vorschlag A — „Haus der Gruppe“
   Farben nach DREFA-Styleguide, am Logo gemessen:
   Rot #E70036 (HKS 15 / CMYK 0-100-70-0) · Grau #68676C (70 % Schwarz)
   Grundmotiv: die drei Quadrate der Bildmarke.
   ============================================================ */

:root{
  /* Markenfarben — unverändert, wie am Logo gemessen */
  /* Schrift: Noto Sans als freier Frutiger-Ersatz (Styleguide: Frutiger). Gemessen 08.10.2026 gegen
     FrutigerNext LT: Deckung 0,755 über 69 Glyphen, einstöckiges g, Kerning, 1.357 Zeichen inkl. ẞ, SIL OFL.
     Bekannter Makel: Versal-I mit Querstrichen. Im Bau selbst ausliefern (Datenschutz), nicht von Google laden. */
  --marke-rot:#E70036;
  --marke-grau:#68676C;

  /* Abgeleitete Oberfläche */
  --grund:#ffffff;
  --grund-2:#f5f4f6;
  --grund-dunkel:#1c1b1f;
  --linie:#dedce1;
  --linie-stark:#bdbac2;
  --text:#1c1b1f;
  --text-2:#68676C;        /* = Markengrau, 5,6:1 auf Weiß */
  --text-invers:#efeef1;
  --text-invers-2:#b9b8bf;

  /* Rot für Fließtext-Verweise: abgedunkelt, siehe Fußnote 2 */
  --rot-text:#c40030;
  --pixel-hell:rgba(231,0,54,.10);

  --q:12px;                 /* Kantenlänge eines Quadrats der Bildmarke */
  --g:1.7px;                /* Abstand, Verhältnis wie im Logo (≈0,14 q) */
  --rand:16px;              /* Seitenrand ab 320 px */
  --spalte:1120px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --marke-grau:#e6e5e9;   /* negative Darstellung des Logos, Styleguide */
    --grund:#17161a;
    --grund-2:#201f24;
    --grund-dunkel:#101014;
    --linie:#35333a;
    --linie-stark:#56545c;
    --text:#efeef1;
    --text-2:#a9a8af;
    --rot-text:#ff6680;
    --pixel-hell:rgba(255,106,128,.14);
  }
}
:root[data-theme="dark"]{
  --marke-grau:#e6e5e9;
  --grund:#17161a;
  --grund-2:#201f24;
  --grund-dunkel:#101014;
  --linie:#35333a;
  --linie-stark:#56545c;
  --text:#efeef1;
  --text-2:#a9a8af;
  --rot-text:#ff6680;
  --pixel-hell:rgba(255,106,128,.14);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--grund);
  color:var(--text);
  font-family:"Noto Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:1.0625rem;
  line-height:1.65;
  font-weight:400;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%}
.stl-rot{fill:var(--marke-rot)}
.stl-grau{fill:var(--marke-grau)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em}
a{color:var(--rot-text);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--marke-rot);outline-offset:3px}

.huelle{max-width:var(--spalte);margin:0 auto;padding-inline:var(--rand)}
.lesebreite{max-width:66ch}

/* ---------- Das Grundmotiv: drei Quadrate ---------- */
.trio{
  display:block;
  width:calc(3 * var(--q) + 2 * var(--g));
  height:var(--q);
  flex:0 0 auto;
  background-color:transparent;
  background-image:repeating-linear-gradient(to right,
    var(--trio-farbe,var(--marke-rot)) 0,
    var(--trio-farbe,var(--marke-rot)) var(--q),
    transparent var(--q),
    transparent calc(var(--q) + var(--g)));
}
.trio.band{--q:14px;--g:2px;margin-bottom:18px}
.trio.klein{--q:7px;--g:1px}
.trio.grau{--trio-farbe:var(--linie-stark)}

/* Trennung zwischen Abschnitten: Linie, von den drei Quadraten unterbrochen */
.trenn{
  border:0;margin:clamp(2.75rem,7vw,5rem) 0;height:12px;position:relative;
}
.trenn::after{content:"";position:absolute;inset:5px 0 auto 0;height:1px;background:var(--linie)}
.trenn::before{
  content:"";position:absolute;top:0;left:0;z-index:1;
  width:calc(3 * 12px + 2 * 1.7px);height:12px;
  background-color:var(--grund);
  background-image:repeating-linear-gradient(to right,
    var(--marke-rot) 0,var(--marke-rot) 12px,transparent 12px,transparent 13.7px);
  box-shadow:0 0 0 10px var(--grund);
}

/* ---------- Teststand-Band ---------- */
.teststand{background:var(--grund-dunkel);color:var(--text-invers)}
.teststand .huelle{display:flex;align-items:center;gap:12px;padding-block:9px;
  font-size:.875rem;line-height:1.4;letter-spacing:.01em}
.teststand strong{font-weight:700}

/* ---------- Kopfzeile ---------- */
.kopf{border-bottom:1px solid var(--linie);background:var(--grund)}
.kopf .huelle{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:18px 24px;padding-block:clamp(16px,2.4vw,26px);
}
.marke{display:block;text-decoration:none;color:inherit}
.marke svg{display:block;width:min(206px,56vw);height:auto}
.marke .wort{
  display:block;margin-top:9px;font-size:.8125rem;line-height:1.35;
  color:var(--text-2);letter-spacing:.015em;max-width:30ch;
}
.kopf-kontakt{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.tel{
  font-size:clamp(1.0625rem,2.4vw,1.25rem);font-weight:700;letter-spacing:.005em;
  color:var(--text);text-decoration:none;white-space:nowrap;
}
.tel:hover{color:var(--rot-text)}
.tel-zeile{display:flex;flex-direction:column;gap:3px}
.offen{
  display:inline-block;border:1px dashed var(--linie-stark);padding:1px 8px;
  font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-2);
}
.frist{font-size:.8125rem;color:var(--text-2);display:flex;align-items:center;gap:7px;flex-wrap:wrap}

.knopf{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--marke-rot);color:#fff;text-decoration:none;
  font-size:1.1875rem;font-weight:700;line-height:1.2;
  padding:13px 22px;border:0;white-space:nowrap;
}
.knopf:hover{filter:brightness(.88)}
.knopf .trio{--q:9px;--g:1.3px;--trio-farbe:#fff;opacity:.85}

/* ---------- Navigation ---------- */
.nav{border-bottom:1px solid var(--linie);background:var(--grund-2)}
.nav ul{list-style:none;margin:0 -14px;padding:0;display:flex;flex-wrap:wrap;gap:0}
.nav li{display:block}
.nav a{
  display:block;padding:12px 14px;text-decoration:none;color:var(--text);
  font-size:.9375rem;font-weight:600;letter-spacing:.015em;
  border-bottom:3px solid transparent;
}
.nav a:hover{border-bottom-color:var(--linie-stark)}
.nav a[aria-current="page"]{border-bottom-color:var(--marke-rot)}

/* ---------- Abschnittskopf ---------- */
.abschnitt{padding-block:clamp(2.25rem,5vw,3.5rem)}
h1,h2,h3{font-weight:700;letter-spacing:-.015em;line-height:1.12;margin:0}
h1{font-size:clamp(2.125rem,7.4vw,4rem);letter-spacing:-.025em}
h1 .rot{color:var(--marke-rot)}
h2{font-size:clamp(1.5rem,4vw,2.25rem);margin-bottom:.5em}
h3{font-size:clamp(1.0625rem,2.4vw,1.25rem);letter-spacing:0;margin-bottom:.4em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

/* ---------- Einordnung / Kopf der Seite ---------- */
.auftakt{position:relative;overflow:hidden;padding-block:clamp(2.5rem,7vw,5.5rem)}
.auftakt::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  --q:clamp(30px,8vw,52px);--g:calc(var(--q) * .138);
  top:calc(-1 * var(--q) * .55);left:calc(-1 * var(--q) * .62);
  width:calc(3 * var(--q) + 2 * var(--g));
  height:calc(3 * var(--q) + 2 * var(--g));
  background-color:var(--grund);
  background-image:
    repeating-linear-gradient(to bottom,transparent 0,transparent var(--q),
      var(--grund) var(--q),var(--grund) calc(var(--q) + var(--g))),
    repeating-linear-gradient(to right,var(--pixel-hell) 0,var(--pixel-hell) var(--q),
      transparent var(--q),transparent calc(var(--q) + var(--g)));
}
.auftakt .huelle{position:relative;z-index:1}
.auftakt .vorlauf{
  font-weight:300;font-size:clamp(1.1875rem,3vw,1.625rem);line-height:1.42;
  margin:clamp(1.25rem,3vw,2rem) 0 0;max-width:46ch;
}
.spruch{
  margin:clamp(2rem,5vw,3.25rem) 0 0;padding-left:clamp(18px,3vw,28px);
  border-left:4px solid var(--marke-rot);
  font-weight:300;font-size:clamp(1.1875rem,3.4vw,1.875rem);line-height:1.3;
  letter-spacing:-.012em;max-width:34ch;
}

/* ---------- Aufgaben-Raster ---------- */
.raster{
  list-style:none;margin:clamp(1.5rem,3vw,2.25rem) 0 0;padding:0;
  display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
}
.kachel{
  display:flex;flex-direction:column;gap:11px;height:100%;
  padding:20px 20px 24px;text-decoration:none;color:inherit;
  background:var(--grund);border:1px solid var(--linie);
  border-top:3px solid var(--linie-stark);
}
.kachel:hover{border-color:var(--linie-stark);border-top-color:var(--marke-rot);background:var(--grund-2)}
.kachel .trio{--q:9px;--g:1.3px}
.kachel b{font-size:clamp(1.125rem,2.2vw,1.3125rem);font-weight:700;line-height:1.2;letter-spacing:-.012em}
.kachel span{font-size:.9375rem;line-height:1.5;color:var(--text-2)}
.kachel .weiter{margin-top:auto;font-size:.8125rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--rot-text)}

.felder{list-style:none;margin:1.25rem 0 0;padding:0;
  display:grid;gap:4px 28px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.felder li{position:relative;padding:7px 0 7px 26px;border-bottom:1px solid var(--linie);font-size:1rem}
.felder li::before{
  content:"";position:absolute;left:0;top:1.02em;width:calc(3 * 6px + 2 * .85px);height:6px;
  background-image:repeating-linear-gradient(to right,
    var(--marke-rot) 0,var(--marke-rot) 6px,transparent 6px,transparent 6.85px);
}
.felder a{color:var(--text);font-weight:600;text-decoration:none;border-bottom:1px solid var(--linie-stark)}
.felder a:hover{color:var(--rot-text);border-bottom-color:currentColor}
.felder em{font-style:normal;color:var(--text-2);font-size:.9375rem}

/* ---------- Lücke ---------- */
.luecke{
  margin:clamp(1.5rem,3vw,2.25rem) 0 0;padding:18px 20px 20px;
  border:1px dashed var(--linie-stark);background:transparent;
}
.luecke .marke-luecke{
  display:flex;align-items:center;gap:10px;margin-bottom:10px;
  font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--rot-text);
}
.luecke h3{margin-bottom:.35em}
.luecke p{font-size:.9375rem;line-height:1.6;color:var(--text-2);max-width:72ch}
.luecke ul{margin:.6em 0 0;padding-left:0;list-style:none}
.luecke ul li{position:relative;padding-left:20px;font-size:.9375rem;color:var(--text-2);margin-bottom:.4em}
.luecke ul li::before{content:"";position:absolute;left:0;top:.68em;width:9px;height:1px;background:var(--linie-stark)}

/* ---------- Angebot: rote Fläche, nur große Schrift ---------- */
.angebot{background:var(--marke-rot);color:#fff}
.angebot .huelle{padding-block:clamp(2.25rem,5vw,3.5rem)}
.angebot h2{color:#fff;max-width:26ch}
.angebot .trio{--trio-farbe:#fff}
.angaben{
  list-style:none;margin:clamp(1.25rem,3vw,2rem) 0 0;padding:0;
  display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  background:rgba(255,255,255,.34);
}
.angaben li{
  background:var(--marke-rot);padding:16px 18px 18px;
  font-size:clamp(1.1875rem,2.6vw,1.5rem);font-weight:700;line-height:1.2;letter-spacing:-.012em;
}
.angaben li .trio{--q:9px;--g:1.3px;--trio-farbe:#fff;margin-bottom:11px}
.angebot-nach{background:var(--grund-2)}
.angebot-nach .huelle{padding-block:clamp(1.75rem,4vw,2.5rem)}
.angebot-nach p{max-width:62ch}
.angebot-nach .ohren{
  font-weight:300;font-size:clamp(1.1875rem,2.8vw,1.625rem);line-height:1.3;
  letter-spacing:-.012em;margin-top:1rem;
}

/* ---------- Belege ---------- */
.sender{list-style:none;margin:1.25rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.sender li{
  display:flex;align-items:center;gap:8px;
  border:1px solid var(--linie);padding:7px 12px 7px 11px;
  font-size:.9375rem;font-weight:700;letter-spacing:.02em;white-space:nowrap;
}
.sender li::before{content:"";width:7px;height:7px;background:var(--marke-rot);flex:0 0 auto}
.sender-hinweis{margin-top:1rem;font-size:.9375rem;color:var(--text-2);max-width:62ch}

.werke{list-style:none;margin:1.5rem 0 0;padding:0;border-top:1px solid var(--linie)}
.werke li{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;justify-content:space-between;
  padding:11px 0;border-bottom:1px solid var(--linie);
}
.werke b{font-weight:600;font-size:1rem;line-height:1.35}
.werke span{
  font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-2);white-space:nowrap;
}
.zitat{
  margin:1.5rem 0 0;padding-left:clamp(14px,2.4vw,20px);border-left:3px solid var(--linie-stark);
  font-weight:300;font-size:clamp(1.0625rem,2.4vw,1.3125rem);line-height:1.4;max-width:46ch;
}
.zitat cite{display:block;margin-top:.6em;font-size:.8125rem;font-style:normal;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);font-weight:700}

/* ---------- Zwei Spalten ---------- */
.zwei{display:grid;gap:clamp(1.5rem,4vw,3rem);grid-template-columns:1fr}
@media (min-width:860px){.zwei{grid-template-columns:1.15fr 1fr;align-items:start}}

/* ---------- Erreichbarkeit ---------- */
.kontakt-block{background:var(--grund-2);border-top:3px solid var(--marke-rot);padding:clamp(20px,3.5vw,28px)}
.kontakt-block .tel-gross{
  display:inline-block;font-size:clamp(1.5rem,5vw,2.25rem);font-weight:700;letter-spacing:-.02em;
  color:var(--text);text-decoration:none;margin:.25em 0 .35em;
}
.kontakt-block .tel-gross:hover{color:var(--marke-rot)}
.kontakt-block dl{margin:1.25rem 0 0;display:grid;gap:2px}
.kontakt-block dt{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.kontakt-block dd{margin:0 0 .85rem;font-size:1rem}

/* ---------- Fußzeile ---------- */
footer{border-top:1px solid var(--linie)}
.fuss-raster{
  display:grid;gap:clamp(1.75rem,4vw,2.5rem);grid-template-columns:1fr;
  padding-block:clamp(2.25rem,5vw,3.25rem);
}
@media (min-width:700px){.fuss-raster{grid-template-columns:1.3fr 1fr 1fr}}
.fuss-raster h2{font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-2);margin-bottom:1rem}
.fuss-raster .trio{--q:8px;--g:1.1px;margin-bottom:12px}
.fuss-raster ul{list-style:none;margin:0;padding:0}
.fuss-raster li{margin-bottom:.45em;font-size:.9375rem}
.fuss-raster a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--linie)}
.fuss-raster a:hover{color:var(--rot-text);border-bottom-color:currentColor}
.adresse{font-style:normal;font-size:.9375rem;line-height:1.7}
.adresse b{display:block;font-size:1rem;margin-bottom:.35em}
.unbestaetigt{
  display:inline-block;margin-top:.8em;border:1px dashed var(--linie-stark);padding:2px 8px;
  font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);
}
.offen-zeile{color:var(--text-2)}
.offen-zeile em{font-style:normal;color:var(--text-2)}

.hinweise{background:var(--grund-dunkel);color:var(--text-invers-2)}
.hinweise .huelle{padding-block:clamp(2rem,4.5vw,3rem)}
.hinweise svg{display:block;width:min(170px,46vw);height:auto;margin-bottom:22px}
.hinweise h2{font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-invers);margin-bottom:1.1rem}
.hinweise ol{margin:0;padding-left:1.4em;display:grid;gap:.85em}
.hinweise li{font-size:.875rem;line-height:1.6;max-width:80ch}
.hinweise b{color:var(--text-invers);font-weight:700}
.hinweise .negativ{--marke-grau:#e6e5e9}
.schluss{
  margin-top:clamp(1.75rem,4vw,2.5rem);padding-top:1.25rem;
  border-top:1px solid rgba(255,255,255,.16);
  font-size:.8125rem;line-height:1.6;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
}
.schluss .trio{--q:8px;--g:1.1px}

@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}


/* ============================================================
   Bausteine der Inhaltsseiten — im Idiom von Design A ergänzt
   ============================================================ */
main{padding-block:clamp(1.5rem,4vw,2.75rem) clamp(3rem,7vw,5rem)}
main > h1{margin-bottom:.35em}
main > .vorlauf, .auftakt .vorlauf{
  font-weight:300;font-size:clamp(1.1875rem,3vw,1.625rem);line-height:1.42;
  margin:clamp(1rem,2.5vw,1.6rem) 0 0;max-width:46ch;
}
main h2{margin-top:clamp(2.25rem,5.5vw,3.5rem)}
main h3{margin-top:clamp(1.4rem,3vw,2rem)}
main h2 + h3, main h2 + p, main h3 + p{margin-top:.6em}
main p{margin:0 0 .9em;max-width:70ch}
main ul, main ol{margin:0 0 1em;padding-left:1.3rem;max-width:70ch}
main li{margin-bottom:.35em}
main hr{border:0;margin:clamp(2.75rem,7vw,5rem) 0;height:12px;position:relative}
main hr::after{content:"";position:absolute;inset:5px 0 auto 0;height:1px;background:var(--linie)}
main hr::before{content:"";position:absolute;top:0;left:0;z-index:1;width:calc(3 * 12px + 2 * 1.7px);height:12px;
  background-color:var(--grund);background-image:repeating-linear-gradient(to right,var(--marke-rot) 0,var(--marke-rot) 12px,transparent 12px,transparent 13.7px);
  box-shadow:0 0 0 10px var(--grund)}

/* Hinweiskasten (bleibt) — Gegenstück zum gestrichelten Lückenkasten */
.kasten{margin:clamp(1.5rem,3vw,2.25rem) 0 0;padding:18px 20px 20px;
  border:1px solid var(--linie);border-left:3px solid var(--marke-rot);background:var(--grund-2)}
.kasten > b{display:flex;align-items:center;gap:10px;margin-bottom:10px;
  font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--rot-text)}
.kasten > b::before{content:"";width:calc(3 * 7px + 2 * 1px);height:7px;flex:0 0 auto;
  background-image:repeating-linear-gradient(to right,var(--marke-rot) 0,var(--marke-rot) 7px,transparent 7px,transparent 8px)}
.kasten p:last-child, .luecke p:last-child{margin-bottom:0}
.luecke > p{max-width:70ch}

/* Aufgaben-Raster der Inhaltsseiten (= As .raster/.kachel) */
.kachel > b{font-weight:700;font-size:1.0625rem;line-height:1.3}
.kachel > span:not(.trio){color:var(--text-2);font-size:.9375rem;line-height:1.5}

/* Tabellen */
table{border-collapse:collapse;width:100%;margin:1.25rem 0;font-size:.9375rem;line-height:1.5}
th,td{text-align:left;padding:.6rem .7rem;border-bottom:1px solid var(--linie);vertical-align:top}
th{font-weight:700;border-bottom-color:var(--linie-stark)}

/* Eingeklappte Langlisten */
details{border-top:1px solid var(--linie);padding:.75rem 0}
details:last-of-type{border-bottom:1px solid var(--linie)}
summary{cursor:pointer;font-weight:700;font-size:1rem;display:flex;align-items:center;gap:10px}
summary::before{content:"";width:calc(3 * 7px + 2 * 1px);height:7px;flex:0 0 auto;
  background-image:repeating-linear-gradient(to right,var(--marke-rot) 0,var(--marke-rot) 7px,transparent 7px,transparent 8px)}
summary::-webkit-details-marker{display:none}
details .werke{margin-top:.75rem}

/* Formular in Produktionssprache */
form{margin:1.5rem 0}
.feld{margin-bottom:1rem}
label{display:block;font-size:.875rem;font-weight:700;letter-spacing:.01em;margin-bottom:.3rem}
input,select,textarea{width:100%;font:inherit;font-size:1rem;line-height:1.4;padding:.6rem .7rem;
  border:1px solid var(--linie-stark);background:var(--grund);color:var(--text);border-radius:0}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--marke-rot);outline-offset:2px}
textarea{min-height:7rem;resize:vertical}
form .zwei{gap:0 1rem}
@media (min-width:34rem){form .zwei{grid-template-columns:1fr 1fr}}
form .knopf{margin-top:.5rem}

/* Anfahrt: Zwei-Klick-Karte */
.karte{border:1px solid var(--linie);margin:1.5rem 0;background:var(--grund-2)}
.karte-vorschau{padding:1.8rem 1.1rem;text-align:center}
.karte-marke{width:calc(3 * 14px + 2 * 2px);height:14px;margin:0 auto 1rem;
  background-image:repeating-linear-gradient(to right,var(--marke-rot) 0,var(--marke-rot) 14px,transparent 14px,transparent 16px)}
.karte-vorschau p{margin:0 0 .9rem;font-size:.9375rem;line-height:1.5;max-width:none}
.karte-vorschau .adresse{font-size:1.0625rem}
.karte-hinweis{color:var(--text-2);font-size:.8125rem !important;margin:.9rem 0 0 !important}
.karte iframe{display:block;width:100%;height:380px;border:0}
@media (max-width:34rem){.karte iframe{height:300px}}
.wege{font-size:.9375rem;line-height:1.8}
.wege a{margin-right:.4rem}


/* ── Fotos (2005/2006, mit Jahr in der Bildunterschrift) ──────────── */
figure.bild{margin:clamp(1.25rem,3vw,2rem) 0 0;max-width:none}
figure.bild img{display:block;width:100%;height:auto;border:1px solid var(--linie)}
/* Auftaktbild: Hochkant-Aufnahmen nicht über die Seite türmen — Ausschnitt statt voller Höhe */
figure.bild-auftakt img{max-height:clamp(16rem,46vw,28rem);object-fit:cover;object-position:center}
figure.bild figcaption{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:.8125rem;color:var(--text-2);letter-spacing:.01em}
figure.bild figcaption::before{content:"";width:calc(3 * 6px + 2 * .85px);height:6px;flex:0 0 auto;
  background-image:repeating-linear-gradient(to right,var(--linie-stark) 0,var(--linie-stark) 6px,transparent 6px,transparent 6.85px)}
.galerie{display:grid;gap:14px;grid-template-columns:1fr;margin:1.25rem 0 0}
@media (min-width:34rem){.galerie{grid-template-columns:1fr 1fr}}
.galerie figure.bild{margin:0}


/* Offene Stellen in Rechtstexten: [PRÜFEN] / [BESTÄTIGEN] — sichtbar, bis das Haus sie schließt */
mark.marke-offen{background:var(--grund-2);color:var(--text);border:1px dashed var(--linie-stark);padding:1px 6px;font-size:.9em;line-height:1.5}
mark.marke-offen b{color:var(--rot-text);font-weight:700;letter-spacing:.06em;font-size:.8em;text-transform:uppercase}

/* Datenschutzsatz ueber dem Absende-Knopf (14.10.2026) */
.anfrage .formular-hinweis{font-size:.8125rem;color:var(--text-2);margin:0 0 .9rem;line-height:1.5}
.anfrage .formular-hinweis a{color:inherit;text-decoration:underline}