.wf-gesucht { flex-wrap: wrap; }
.wf-gesucht button { flex: 1 1 auto; }

.wf-haupt { display: grid; gap: 0 1.5rem; grid-template-columns: minmax(0, 1fr); margin-top: 1rem; }
@media (min-width: 820px) { .wf-haupt { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; } }

.wf-rolle { font-weight: 400; font-size: 0.85em; color: var(--landing-text-muted); margin-left: 0.3rem; }
.wf-feld-gesucht input { background: var(--landing-accent-subtle); border-color: var(--landing-accent); font-weight: 700; cursor: default; }
.wf-feld-gesucht label::after { content: " · gesucht"; color: var(--landing-accent); font-weight: 700; }
.wf-feld-abgeleitet input { color: var(--landing-text-muted); font-style: italic; border-style: dashed; }
.wf-feld-abgeleitet label::after { content: " · berechnet"; color: var(--landing-text-muted); font-weight: 600; }

.wf-status { min-height: 1.4em; margin: 0.2rem 0 0.6rem; font-size: 0.92rem; color: var(--landing-text-muted); }
.wf-status.wf-warnung { color: #b45309; font-weight: 600; }
:is(html, body).dark-theme .wf-status.wf-warnung { color: #f0b060; }

.wf-beispiele { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 1rem; }
.wf-beispiele .et-hint { margin: 0 0.2rem 0 0; }
.wf-beispiele button {
  min-height: 40px; padding: 0.35rem 0.75rem; font: inherit; font-size: 0.9rem; cursor: pointer;
  color: var(--landing-text); background: var(--landing-card);
  border: 1px solid var(--landing-border); border-radius: var(--landing-radius-sm);
}
.wf-beispiele button:hover { border-color: var(--landing-accent); color: var(--landing-accent); }

.wf-skizze { margin: 0.4rem 0 0; overflow: visible; }
.wf-skizze svg { display: block; width: 100%; height: auto; max-width: 560px; margin: 0 auto; }
.wf-skizze .wf-flaeche { fill: var(--landing-accent-subtle); stroke: none; }
.wf-skizze .wf-rechter, .wf-skizze .wf-bogen { fill: none; stroke: var(--landing-text-muted); stroke-width: 1.3; }
.wf-skizze .wf-punkt { fill: var(--landing-text-muted); }
.wf-skizze .wf-linie { stroke: var(--landing-text-muted); stroke-width: 2.5; stroke-linecap: round; }
.wf-skizze .wf-treffer { stroke: transparent; stroke-width: 22; pointer-events: stroke; }
.wf-skizze .wf-treffer-flaeche { fill: transparent; }
.wf-skizze .wf-text { font-family: var(--landing-font-mass, var(--landing-font)); font-size: 14px; fill: var(--landing-text-muted); }
.wf-skizze .wf-klein { font-size: 11px; font-style: italic; }
.wf-skizze .wf-teil { cursor: pointer; }
.wf-skizze .wf-teil:hover .wf-linie { stroke: var(--landing-accent); }
.wf-skizze .wf-teil:hover .wf-bogen { stroke: var(--landing-accent); stroke-width: 2.5; }
.wf-skizze .wf-ist-bekannt .wf-linie { stroke: var(--landing-text); }
.wf-skizze .wf-ist-bekannt .wf-bogen { stroke: var(--landing-text); stroke-width: 2; }
.wf-skizze .wf-ist-bekannt .wf-text { fill: var(--landing-text); font-weight: 600; }
.wf-skizze .wf-ist-gesucht .wf-linie { stroke: #d97706; stroke-width: 5; }
.wf-skizze .wf-ist-gesucht .wf-bogen { stroke: #d97706; stroke-width: 4; }
.wf-skizze .wf-ist-gesucht .wf-text { fill: #b45309; font-weight: 700; font-size: 15px; }
:is(html, body).dark-theme .wf-skizze .wf-ist-gesucht .wf-text { fill: #f0a040; }

.wf-rechenweg { margin: 0.5rem 0 0; padding-left: 1.3rem; }
.wf-rechenweg li { margin-bottom: 0.7rem; line-height: 1.5; }
.wf-rechenweg .et-formel { margin-top: 0.3rem; overflow-x: auto; white-space: nowrap; }
.wf-rechenweg .wf-leer { list-style: none; margin-left: -1.3rem; color: var(--landing-text-muted); }

.wf-gleichung { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; margin: 0.5rem 0 0.2rem;
  font-family: var(--landing-font-mass, ui-monospace, monospace); font-size: 1.15rem; }
.wf-bruch { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; line-height: 1.25; }
.wf-bruch > span { padding: 0 0.3rem; min-width: 1.6em; text-align: center; }
.wf-bz { border-bottom: 2px solid currentColor; }
.wf-gl { color: var(--landing-text-muted); }
.wf-fn, .wf-ziel { font-weight: 700; }
.wf-weg1 { color: #2f6fb8; font-weight: 700; }
.wf-weg2 { color: #c2620b; font-weight: 700; }
:is(html, body).dark-theme .wf-weg1 { color: #7fb0ea; }
:is(html, body).dark-theme .wf-weg2 { color: #f0a040; }

.wf-kreuz { position: relative; display: inline-grid; grid-template-columns: 70px 60px 80px; align-items: center; justify-items: center;
  width: 210px; height: 84px; margin-right: 0.3rem; font-size: 1.3rem; }
.wf-kreuz .wf-bruch > span { padding: 0.15rem 0.3rem; }
.wf-pfeile { position: absolute; left: 0; top: 0; width: 210px; height: 84px; pointer-events: none; overflow: visible; }
.wf-pfeil1, .wf-pfeil2 { stroke-width: 2; fill: none; }
.wf-pfeil1 { stroke: #2f6fb8; }
.wf-pfeil2 { stroke: #c2620b; }
.wf-spitze1 { fill: #2f6fb8; }
.wf-spitze2 { fill: #c2620b; }
.wf-kreuz-mal .wf-pfeil1, .wf-kreuz-mal .wf-pfeil2 { stroke-dasharray: 5 4; opacity: 0.8; }
.wf-kreuz-mal .wf-pfeil1, :is(html, body).dark-theme .wf-kreuz-mal .wf-pfeil1 { stroke: var(--landing-text-muted); }
:is(html, body).dark-theme .wf-pfeil1 { stroke: #7fb0ea; }
:is(html, body).dark-theme .wf-pfeil2 { stroke: #f0a040; }
:is(html, body).dark-theme .wf-spitze1 { fill: #7fb0ea; }
:is(html, body).dark-theme .wf-spitze2 { fill: #f0a040; }

.wf-merk { margin: 0.6rem 0 0; padding: 1rem 1.1rem; background: var(--landing-bg-alt); border-left: 4px solid var(--landing-accent); border-radius: var(--landing-radius-sm); }
.wf-merk-reihe { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.wf-merk-karte { display: flex; flex-direction: column; align-items: center; padding: 0.5rem; background: var(--landing-card); border: 1px solid var(--landing-border); border-radius: var(--landing-radius-sm); }
.wf-merk-karte .wf-gleichung { font-size: 1.6rem; margin: 0; }
.wf-merk-name { font-size: 0.85rem; color: var(--landing-text-muted); }
.wf-merk-legende { display: flex; flex-wrap: wrap; gap: 0.2rem 1.2rem; margin: 0.8rem 0 0; font-size: 0.9rem; }
.wf-merk-eintrag b { display: inline-block; min-width: 1.2em; color: var(--landing-accent); }
.wf-merk-umstellen { margin-top: 1rem; }
.wf-merk-titel { margin: 0; font-weight: 700; }
.wf-merk-text { margin: 0.4rem 0 0; font-size: 0.92rem; }
.wf-rechenweg .wf-gleichung { margin-top: 0.4rem; }

@media print {
  .wf-beispiele, .wf-gesucht { display: none; }
}