/* Kreiswärme. Seitenstil. Die Engine-Klassen (.sc-*, [data-sc-*]) bleiben
   unangetastet; hier stehen Marke, eigene Bühnen und die Zeichnungen.
   Farben: Frostnacht als Grund, EIN Akzent (Glut-Orange). Die Wärmebild-Skala
   und das Eisblau des Kältemittels sind Datenfarben, keine zweiten Akzente. */
:root {
  --sc-canvas:     #0A1117;
  --sc-surface:    #121C24;
  --sc-ink:        #E7EEF2;
  --sc-ink-soft:   #A3B6C2;
  --sc-accent:     #FF7A45;
  --sc-accent-ink: #1A0E08;
  --sc-font-display: "Geologica", system-ui, sans-serif;
  --sc-font-text:    "Sarabun", system-ui, sans-serif;
  --sc-font-mono:    "Sarabun", system-ui, sans-serif;
  --sc-shadow-color: 206 45% 3%;
  --sc-r: 6px;
  --eis: #78B8E8;
  --frost: #CFE3EF;
  color-scheme: dark;
}
html { background: var(--sc-canvas); scrollbar-color: #2C3B47 var(--sc-canvas); }
body { font-family: var(--sc-font-text); background: var(--sc-canvas); color: var(--sc-ink); font-size: 1.06rem; }
::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: var(--sc-r); }
input, select { caret-color: var(--sc-accent); }

/* Anzeige: Geologica, ruhig und technisch. Heller Text auf dunkel bekommt
   etwas mehr Laufweite und Zeilenabstand. */
.sc-display {
  font-family: var(--sc-font-display);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.02;
}
.sc-display--xl { font-size: clamp(2.6rem, 1.5rem + 4.4vw, 5.6rem); font-weight: 650; }
.sc-display--lg { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.6rem); line-height: 1.06; }
.sc-body { color: var(--sc-ink-soft); font-size: clamp(1.06rem, 1rem + .3vw, 1.22rem); line-height: 1.66; letter-spacing: .006em; }
.sc-lede { font-family: var(--sc-font-display); font-weight: 400; color: var(--sc-ink); }
@media (max-width: 700px) {
  .sc-display--xl { font-size: clamp(2.2rem, 1.3rem + 5.4vw, 3rem); }
  .sc-display--lg { font-size: clamp(1.75rem, 1.2rem + 3vw, 2.3rem); }
  .sc-body { font-size: 1.04rem; line-height: 1.6; }
}


/* Korn gegen Banding auf dem dunklen Grund: ein festes Rauschbild statt eines
   SVG-Filters, damit jedes Neuzeichnen billig bleibt. */
.korn { position: fixed; inset: 0; pointer-events: none; z-index: 3; opacity: .05;
  background: url("assets/korn.png") 0 0 / 180px 180px; }

/* ---------- Kopf mit der Leitung ---------- */
.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 4px var(--sc-gutter); min-height: 80px;
  background: linear-gradient(color-mix(in oklab, var(--sc-canvas) 86%, transparent), color-mix(in oklab, var(--sc-canvas) 0%, transparent));
}
.wortmarke {
  justify-self: start;
  font: 400 21px/1 var(--sc-font-display); letter-spacing: -.01em; color: var(--sc-ink); text-decoration: none;
}
.wortmarke b, .fuss b { font-weight: 700; color: var(--sc-accent); }
.kopf__link {
  justify-self: end;
  color: var(--sc-ink); font-weight: 600; font-size: var(--sc-t-sm); text-decoration: underline;
  text-underline-offset: 5px; text-decoration-thickness: 1.5px;
  text-decoration-color: color-mix(in oklab, var(--sc-accent) 70%, transparent);
  transition: text-decoration-color 160ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .kopf__link:hover { text-decoration-color: var(--sc-accent); } }

.leitung { position: relative; width: 340px; height: 74px; }
.leitung__bahn { position: absolute; left: 10px; top: 22px; width: 320px; height: 30px; overflow: visible; }
.leitung__bahn [data-leitung-punkt] { stroke: var(--sc-canvas); stroke-width: 2; }
.leitung__stationen { list-style: none; margin: 0; padding: 0; }
.leitung__stationen a {
  position: absolute; left: var(--x); top: var(--y);
  width: 44px; height: 44px; translate: -50% -50%;
  display: grid; place-items: center; text-decoration: none; color: var(--sc-ink-soft);
}
.leitung__stationen i {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--sc-canvas); border: 2px solid currentColor;
  transition: background-color 200ms var(--sc-ease-out), transform 200ms var(--sc-ease-out);
}
.leitung__stationen span {
  position: absolute; white-space: nowrap; font: 500 12.5px/1 var(--sc-font-display); letter-spacing: .02em;
  color: var(--sc-ink-soft); transition: color 200ms var(--sc-ease-out);
}
.leitung__stationen a.oben span { bottom: 31px; }
.leitung__stationen a.unten span { top: 31px; }
.leitung__stationen a.ist-hier { color: var(--sc-ink); }
.leitung__stationen a.ist-hier i { background: currentColor; transform: scale(1.15); }
.leitung__stationen a.ist-hier span { color: var(--sc-ink); }
@media (hover: hover) and (pointer: fine) { .leitung__stationen a:hover span { color: var(--sc-ink); } }
@media (max-width: 860px) {
  .kopf { grid-template-columns: auto 1fr; min-height: 62px; }
  .kopf__link { display: none; }
  .leitung { justify-self: end; width: 196px; height: 44px; }
  .leitung__bahn { left: 8px; top: 9px; width: 180px; height: 26px; }
  .leitung__stationen span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* ---------- Knopf ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: var(--sc-r);
  font: 600 1rem/1 var(--sc-font-display); letter-spacing: .005em; text-decoration: none; white-space: nowrap;
  color: var(--sc-ink); border: 1.5px solid color-mix(in oklab, var(--sc-ink) 50%, transparent);
  background: transparent; cursor: pointer;
  transition: transform 140ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out);
}
.knopf:active { transform: translateY(1px); }
.knopf--voll {
  position: relative; overflow: hidden; isolation: isolate;
  color: var(--sc-accent-ink); background: var(--sc-accent); border-color: var(--sc-accent);
}
/* Feines Mosaik im Knopf, ein Lichtstreif wandert alle paar Sekunden darüber. */
.knopf--voll::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .34) 50%, transparent 65%) -200% 0 / 200% 100% no-repeat,
    repeating-linear-gradient(90deg, rgb(0 0 0 / .06) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(0deg, rgb(0 0 0 / .06) 0 1px, transparent 1px 6px);
  animation: streif 4.8s var(--sc-ease-in-out) infinite;
}
@keyframes streif { 0%, 55% { background-position: -200% 0, 0 0, 0 0; } 100% { background-position: 200% 0, 0 0, 0 0; } }
@media (hover: hover) and (pointer: fine) { .knopf--voll:hover { background: #FF8D5E; } }
@media (prefers-reduced-motion: reduce) { .knopf--voll::before { animation: none; } }

/* ---------- 1 Frost ---------- */
.frost { background: #0B1622; }
.frost__bild { position: absolute; inset: -70px 0; }
.frost__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; max-width: none; }
.frost__reif { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.frost__scrim {
  position: absolute; z-index: 3; pointer-events: none; left: 0; top: 0; width: min(62rem, 78vw); height: 82%;
  background: radial-gradient(120% 100% at 0% 18%, rgb(9 18 28 / .92), rgb(9 18 28 / .7) 48%, transparent 78%);
}
.frost__copy {
  position: absolute; z-index: var(--sc-z-copy);
  left: var(--sc-gutter); top: clamp(6.5rem, 17vh, 11rem); width: min(46rem, calc(100% - 2 * var(--sc-gutter)));
}
.frost__copy h1 { max-width: 13ch; }
.frost__sub { margin-top: var(--sc-5); max-width: 38ch; color: #C3D3DD; }
.frost__copy .knopf { margin-top: var(--sc-6); }
.frost__nachsatz {
  position: absolute; z-index: var(--sc-z-copy); left: var(--sc-gutter); top: clamp(7rem, 22vh, 13rem);
  max-width: 24ch; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); line-height: 1.22;
}
@media (max-width: 700px) {
  .frost__bild img { object-position: 50% 50%; }
  .frost__scrim { width: 100%; height: 100%; background: linear-gradient(rgb(9 18 28 / .94), rgb(9 18 28 / .8) 55%, transparent 86%); }
  .frost__copy { top: 5.6rem; }
  .frost__copy .knopf { margin-top: var(--sc-5); }
}

/* ---------- 2 Kälte trägt Wärme ---------- */
.kaelte { padding-top: clamp(2.5rem, 5vw, 5rem); }
.kaelte__raster { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.kaelte__text .sc-body { max-width: 56ch; }
.kaelte__bild { margin: 0; position: sticky; top: 96px; }
.kaelte__bild img { width: 100%; height: auto; border-radius: var(--sc-r); box-shadow: var(--sc-e3); }
.kaelte__bild figcaption, .thermo figcaption { margin-top: var(--sc-3); color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.55; max-width: 46ch; }
.thermo { margin: var(--sc-7) 0 0; max-width: 34rem; position: relative; padding: var(--sc-5); border-radius: var(--sc-r);
  background: var(--sc-surface); box-shadow: var(--sc-edge), var(--sc-e2); overflow: hidden; isolation: isolate; }
.thermo::before { /* feines Messraster im Blatt */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(rgb(207 227 239 / .05) 1px, transparent 1px), linear-gradient(90deg, rgb(207 227 239 / .05) 1px, transparent 1px);
  background-size: 18px 18px; mask-image: radial-gradient(90% 90% at 30% 40%, #000, transparent);
}
.thermo svg { width: 100%; height: auto; overflow: visible; }
.thermo__ticks line { stroke: #6E8796; stroke-width: 1.2; }
.thermo__ticks text, .thermo text { fill: #B9CAD4; font-family: var(--sc-font-text); }
.thermo__marke line { stroke-width: 1.2; stroke-dasharray: 3 4; }
.thermo__marke text { font-size: 14px; font-weight: 600; }
.thermo__marke--luft line { stroke: var(--frost); } .thermo__marke--luft circle { fill: var(--frost); }
.thermo__marke--kalt line { stroke: var(--eis); } .thermo__marke--kalt circle { fill: var(--eis); }
.thermo__marke--kalt text { fill: var(--eis); }
.thermo__pfeil { fill: none; stroke: var(--sc-accent); stroke-width: 2.2; }
.thermo__spitze { fill: var(--sc-accent); }
.thermo .thermo__wort { fill: var(--sc-accent); font-weight: 600; font-size: 14px; }
@media (max-width: 860px) {
  .kaelte__raster { grid-template-columns: 1fr; }
  .kaelte__bild { position: static; max-width: 30rem; }
}

/* ---------- 3 Der Kreis ---------- */
.kreis { background: radial-gradient(90% 80% at 70% 40%, #0F1A24, #091017 70%); }
.kreis__szene { position: absolute; inset: 0; }
.kreis::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 44%; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, rgb(9 16 23 / .9), rgb(9 16 23 / .7) 55%, transparent); }
.kreis__szene svg { width: 100%; height: 100%; display: block; }
.kreis__scrim { display: none; }
.kreis__text {
  position: absolute; z-index: var(--sc-z-copy);
  left: var(--sc-gutter); top: 50%; translate: 0 -42%;
  width: min(25rem, calc(31% - var(--sc-gutter)));
  display: grid;
}
.kreis__text > * { grid-area: 1 / 1; align-self: start; }
.kreis__text .sc-body { margin-top: var(--sc-4); }
.kreis__station {
  margin: 0; display: flex; align-items: center; gap: 14px;
  font: 600 clamp(1.8rem, 1.2rem + 1.9vw, 2.9rem)/1.05 var(--sc-font-display); letter-spacing: -.015em;
}
.kreis__station i { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.kreis__station i.kalt { background: var(--eis); }
.kreis__station i.heiss { background: #FF5A36; }
.kreis__station i.warm { background: #F2A65A; }
.kreis__hinweis { margin: var(--sc-4) 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
@media (max-width: 1100px) and (min-width: 861px) {
  .kreis__text { width: calc(38% - var(--sc-gutter) - 1rem); }
}
@media (max-width: 860px) {
  .kreis::after { display: none; }
  .kreis__scrim { display: block; position: absolute; inset: auto 0 0 0; height: 46%; z-index: 4; pointer-events: none;
    background: linear-gradient(to top, #091017 72%, transparent); }
  .kreis__text { top: auto; bottom: clamp(1.25rem, 4vh, 2.5rem); translate: none; width: auto; right: var(--sc-gutter); }
  .kreis__text > * { align-self: end; }
  .kreis__station { font-size: 1.7rem; }
  .kreis__text .sc-body { margin-top: var(--sc-3); font-size: 1rem; line-height: 1.55; }
  .kreis__text .sc-display--lg { font-size: 1.85rem; }
}

/* Die Szene (SVG, gebaut in kreis.js) */
.sz-himmel { fill: url(#sz-himmel); }
.sz-boden { fill: #142029; }
.sz-schnee { fill: #DCE9F1; }
.sz-wand { fill: #0E161D; stroke: #4A5E6C; stroke-width: 2.2; }
.sz-dach { fill: #101A22; stroke: #4A5E6C; stroke-width: 2.2; stroke-linejoin: round; }
.sz-decke { fill: #1B2832; }
.sz-raum { fill: #111B23; }
.sz-fenster { fill: #2A2416; stroke: #4A5E6C; stroke-width: 1.5; }
.sz-geraet { fill: #E3EAEE; fill-opacity: .07; stroke: #8FA6B4; stroke-width: 2; }
.sz-lamelle { stroke: #6C8494; stroke-width: 1; }
.sz-rohr { fill: none; stroke: #2A3944; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.sz-rohr-innen { fill: none; stroke: #0B131A; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.sz-wasser { fill: none; stroke: #2B3540; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.sz-verdichter { fill: #1C2730; stroke: #8FA6B4; stroke-width: 2; }
.sz-luefter { fill: none; stroke: #8FA6B4; stroke-width: 1.6; }
.sz-ventil { fill: #1C2730; stroke: #8FA6B4; stroke-width: 2; }
.sz-label { fill: #C9D7DF; font-family: var(--sc-font-text); font-weight: 600; font-size: var(--lab, 14px); }
.sz-label--klein { fill: #94A9B6; font-weight: 400; font-size: calc(var(--lab, 14px) * .86); }
.sz-label--warm { fill: #F7B98C; }
.sz-label--kalt { fill: #9DD0F5; }

/* ---------- 4 Einbau ---------- */
.einbau { display: flex; align-items: center; }
.einbau__schiene { gap: clamp(1rem, 2vw, 1.75rem); padding: 0 var(--sc-gutter); align-items: stretch; }
.einbau__kopf { flex: 0 0 min(27rem, 82vw); align-self: center; padding-right: 2rem; }
.einbau__kopf .sc-body { margin-top: var(--sc-5); }
.blatt {
  flex: 0 0 clamp(17rem, 25vw, 22rem); position: relative; overflow: hidden; isolation: isolate;
  padding: var(--sc-6) var(--sc-5) var(--sc-6); border-radius: var(--sc-r);
  background: var(--sc-surface); box-shadow: var(--sc-edge), var(--sc-e2);
}
.blatt::before { /* Karopapier des Planers */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(rgb(207 227 239 / .05) 1px, transparent 1px), linear-gradient(90deg, rgb(207 227 239 / .05) 1px, transparent 1px);
  background-size: 16px 16px; mask-image: linear-gradient(#000, transparent 70%);
}
.blatt::after { /* ein sehr langsames Licht */
  content: ""; position: absolute; inset: -40%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgb(255 122 69 / .06), transparent);
  animation: licht 11s var(--sc-ease-in-out) infinite alternate;
}
@keyframes licht { from { translate: -18% -12%; } to { translate: 20% 16%; } }
@media (prefers-reduced-motion: reduce) { .blatt::after { animation: none; } }
.blatt__bild { width: 100%; height: auto; margin-bottom: var(--sc-5); overflow: visible; }
.blatt h3 { margin: 0; font: 600 1.42rem/1.15 var(--sc-font-display); letter-spacing: -.01em; }
.blatt p { margin: var(--sc-3) 0 0; color: var(--sc-ink-soft); line-height: 1.6; font-size: 1.02rem; }
.z-wand { fill: none; stroke: #8FA6B4; stroke-width: 2; }
.z-linie { fill: none; stroke: #5D7483; stroke-width: 1.6; }
.z-strich { stroke-dasharray: 4 5; }
.z-warm { fill: none; stroke: var(--sc-accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.z-kalt { fill: none; stroke: var(--eis); stroke-width: 2.2; stroke-linecap: round; }
.z-warm-voll { fill: var(--sc-accent); }
.z-kalt-voll { fill: var(--eis); }
.z-text { fill: #94A9B6; font: 400 11px var(--sc-font-text); }
.einbau__schluss { flex: 0 0 clamp(16rem, 24vw, 21rem); margin: 0; align-self: center; }
.einbau__schluss img { width: 100%; height: auto; border-radius: var(--sc-r); box-shadow: var(--sc-e3); }
.einbau__schluss figcaption { margin-top: var(--sc-4); font: 400 1.25rem/1.35 var(--sc-font-display); color: var(--sc-ink); max-width: 22ch; }
@media (max-width: 700px) {
  .einbau__kopf { flex-basis: 80vw; }
  .blatt { flex-basis: 78vw; padding: var(--sc-5); }
  .einbau__schluss { flex-basis: 64vw; }
  .blatt__bild { max-height: 26vh; }
}

/* ---------- 5 Dein Haus ---------- */
.haus { padding-top: clamp(2.5rem, 5vw, 5rem); }
.haus__wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.haus__kopf .sc-body { max-width: 40ch; }
.wahl { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--sc-6) !important; }
.wahl label { position: relative; }
.wahl input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.wahl span {
  display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border-radius: var(--sc-r);
  border: 1.5px solid #3A4C59; font: 500 1rem/1 var(--sc-font-display); color: var(--sc-ink-soft);
  transition: background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out);
}
.wahl input:checked + span { background: var(--sc-ink); color: var(--sc-canvas); border-color: var(--sc-ink); }
.wahl input:focus-visible + span { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .wahl label:hover span { border-color: var(--sc-ink-soft); } }
.waermebild { margin: 0; }
.waermebild__flaeche {
  position: relative; aspect-ratio: 800 / 520; border-radius: var(--sc-r); overflow: hidden;
  background: #0B141B; box-shadow: var(--sc-edge), var(--sc-e3); --wisch: 30%;
}
.waermebild__flaeche svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.waermebild__thermo { clip-path: inset(0 0 0 var(--wisch)); }
.waermebild__strich { position: absolute; top: 0; bottom: 0; left: var(--wisch); width: 2px; translate: -1px 0; background: var(--sc-ink); pointer-events: none; }
.waermebild__strich span {
  position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; translate: -50% -50%; border-radius: 50%;
  background: var(--sc-ink); box-shadow: var(--sc-e2);
}
.waermebild__strich span::before, .waermebild__strich span::after {
  content: ""; position: absolute; top: 50%; width: 0; height: 0; translate: 0 -50%;
  border: 6px solid transparent;
}
.waermebild__strich span::before { left: 6px; border-right-color: var(--sc-canvas); }
.waermebild__strich span::after { right: 6px; border-left-color: var(--sc-canvas); }
.waermebild__regler {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize;
  -webkit-appearance: none; appearance: none; touch-action: pan-y;
}
.waermebild__regler:focus-visible + * , .waermebild__flaeche:focus-within { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.waermebild__fuss { display: flex; justify-content: space-between; gap: 1.5rem; align-items: start; margin-top: var(--sc-4); }
.waermebild figcaption { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.55; max-width: 52ch; }
.skala { display: flex; align-items: center; gap: 10px; flex: none; color: var(--sc-ink-soft); font-size: var(--sc-t-xs); }
.skala i { width: 110px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #1B2350, #6A1F7A, #D8402E, #F59A2B, #FBE38E); }
.waermebild__hinweis { margin: var(--sc-2) 0 0; font-size: var(--sc-t-xs); color: #8DA2AF; }
@media (max-width: 860px) {
  .haus__wrap { grid-template-columns: 1fr; }
  .waermebild__fuss { flex-direction: column; }
}

/* ---------- 6 Anfrage ---------- */
.anfrage-buehne { display: grid; place-items: center; padding: 84px var(--sc-gutter) 56px; }
.ring { position: relative; width: min(74rem, 100%); }
.ring__bahn { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ring__inhalt {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 25rem); gap: clamp(2rem, 4vw, 4rem);
  padding: clamp(2.2rem, 4.4vw, 4rem) clamp(2rem, 5vw, 5rem); align-items: center;
}
.ring__links .sc-body { margin-top: var(--sc-4); max-width: 42ch; }
.ring__haus { width: min(100%, 24rem); height: auto; margin-top: var(--sc-5); border-radius: var(--sc-r); }
.anfrage {
  display: grid; gap: var(--sc-4); padding: var(--sc-6); border-radius: var(--sc-r);
  background: var(--sc-surface); box-shadow: var(--sc-edge), var(--sc-e3); position: relative; isolation: isolate; overflow: hidden;
}
.anfrage::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(rgb(207 227 239 / .06) 1px, transparent 1.3px); background-size: 16px 16px;
  mask-image: radial-gradient(80% 70% at 100% 0%, #000, transparent);
}
.feld { display: grid; gap: 6px; }
.feld--reihe { grid-template-columns: .8fr 1.2fr; gap: 12px; }
.feld--reihe > div { display: grid; gap: 6px; }
.feld label { font: 500 .9rem/1.2 var(--sc-font-display); color: var(--sc-ink); }
.feld input, .feld select {
  min-height: 46px; padding: 0 12px; border-radius: var(--sc-r); width: 100%;
  border: 1.5px solid #3A4C59; background: #0D161D; color: var(--sc-ink);
  transition: border-color 160ms var(--sc-ease-out);
}
.feld input:focus, .feld select:focus { border-color: var(--sc-accent); outline: none; }
.feld input[aria-invalid="true"] { border-color: #FF8A7A; }
.feld__fehler { color: #FFAA9C; font-size: var(--sc-t-sm); }
.anfrage .knopf { width: 100%; margin-top: var(--sc-2); }
.anfrage__hinweis { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); line-height: 1.5; }
.fuss {
  position: absolute; left: var(--sc-gutter); right: var(--sc-gutter); bottom: 14px;
  display: flex; justify-content: space-between; gap: 1rem; font-size: var(--sc-t-xs); color: #8DA2AF;
}
.fuss span:first-child { font-family: var(--sc-font-display); color: var(--sc-ink-soft); }
@media (max-width: 860px) {
  .anfrage-buehne { padding: 68px 12px 46px; place-items: start center; }
  .ring__inhalt { grid-template-columns: 1fr; gap: 14px; padding: 22px 18px; }
  .ring__haus { display: none; }
  .ring__links .sc-body { margin-top: 8px; font-size: .98rem; line-height: 1.5; }
  .ring__links .sc-display--lg { font-size: 1.7rem; }
  .anfrage { padding: 16px; gap: 10px; }
  .feld input, .feld select { min-height: 44px; }
  .fuss { flex-direction: column; gap: 2px; bottom: 8px; }
  .fuss span:first-child { display: none; }
}
@media (max-height: 700px) and (max-width: 860px) {
  .ring__links .sc-body { display: none; }
}