.sf-beispiel { font-size: 1.2rem; margin: 0 0 0.3rem; }
.sf-eingaben { display: grid; gap: 0 1rem; grid-template-columns: minmax(0, 1fr); margin-top: 1rem; }
@media (min-width: 640px) { .sf-eingaben { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.sf-skizze svg { display: block; height: auto; }
.sf-skizze :is(line, rect, polygon), .sf-druckblatt :is(line, rect, polygon) { vector-effect: non-scaling-stroke; }
.sf-skizze text { font-family: var(--landing-font); font-size: var(--sf-schrift); fill: var(--landing-text); }
.sf-skizze .sf-klein { fill: var(--landing-text-muted); }
.sf-skizze .sf-marke, .sf-druckblatt .sf-marke {
  font-family: var(--landing-font-titel); font-weight: 700; letter-spacing: 0.02em;
  fill: rgba(27, 29, 33, 0.07); pointer-events: none; user-select: none;
}
.sf-skizze .sf-titel { font-family: var(--landing-font-titel); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; fill: var(--landing-text-muted); }
.sf-skizze .sf-holz { fill: var(--landing-accent-subtle); stroke: var(--landing-accent); stroke-width: 1.5; }
.sf-skizze .sf-pfette { fill: var(--landing-bg-alt); stroke: var(--landing-text-muted); stroke-width: 1; }
.sf-skizze .sf-achse { stroke: var(--landing-accent); stroke-width: 1; stroke-dasharray: 8 3 2 3; }
.sf-skizze .sf-mass { stroke: var(--landing-text-muted); stroke-width: 1; }
.sf-skizze .sf-verdeckt { stroke: var(--landing-accent); stroke-width: 1; stroke-dasharray: 3 3; }
.sf-skizze .sf-kervenlinie { fill: none; stroke: #d97706; stroke-width: 2.5; stroke-linejoin: miter; vector-effect: non-scaling-stroke; }
.sf-skizze .sf-kerve.sf-aktiv .sf-kervenlinie, .sf-skizze .sf-kerve:focus-visible .sf-kervenlinie { stroke-width: 4; }
.sf-skizze path.sf-treffer { fill: none; vector-effect: non-scaling-stroke; }
.sf-skizze .sf-risslinie { stroke: #2e7d5b; stroke-width: 1; stroke-dasharray: 10 3 2 3; }
.sf-skizze .sf-risstext { fill: #2e7d5b; }
.sf-skizze .sf-waagriss.sf-aktiv .sf-risslinie,
.sf-skizze .sf-waagriss:focus-visible .sf-risslinie { stroke-width: 2.5; stroke-dasharray: none; }
.sf-skizze .sf-ordnungslinie { stroke: var(--landing-text-muted); stroke-width: 1; stroke-dasharray: 2 4; }
.sf-skizze .sf-treffer { stroke: transparent; stroke-width: 16; pointer-events: stroke; cursor: pointer; }
.sf-skizze .sf-nummer { font-family: var(--landing-font-mass); fill: var(--landing-accent); cursor: pointer; }
.sf-skizze [data-erkl] { cursor: pointer; outline: none; }
.sf-skizze .sf-ordnung.sf-aktiv .sf-ordnungslinie,
.sf-skizze .sf-ordnung:focus-visible .sf-ordnungslinie { stroke: var(--landing-accent); stroke-width: 2; stroke-dasharray: none; }
.sf-skizze .sf-holz.sf-aktiv, .sf-skizze .sf-pfette.sf-aktiv { stroke-width: 3; }
.sf-skizze .sf-aktiv .sf-mass, .sf-skizze .sf-achse.sf-aktiv { stroke: var(--landing-accent); stroke-width: 2; }

.sf-erklaerung {
  min-height: 3em; margin: 0.4rem 0 1rem; padding: 0.6rem 0.8rem;
  font-size: 0.92rem; color: var(--landing-text);
  background: var(--landing-bg-alt); border-left: 3px solid var(--landing-accent);
}
.sf-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: 1.2rem; }
.sf-leiste .et-schalter { margin: 0; flex: 1 1 14rem; min-width: 0; }
.sf-leiste .et-schalter button { min-width: 0; }
.sf-zoom { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; min-width: 0; }
.sf-zoom button, .et-vollbild-leiste .sf-zoom-wert + button {
  min-height: 44px; min-width: 44px; padding: 0.4rem 0.7rem; font: inherit; font-weight: 600; cursor: pointer;
  color: var(--landing-text); background: var(--landing-card);
  border: 1px solid var(--landing-border); border-radius: var(--landing-radius-sm);
}
.sf-zoom button:hover { border-color: var(--landing-accent); color: var(--landing-accent); }
.sf-zoom-wert { min-width: 3.6rem; text-align: center; font-variant-numeric: tabular-nums; font-size: 0.9rem; color: var(--landing-text-muted); }
#sf-zeichnung { margin-top: 0.6rem; max-height: 75vh; overflow: auto; border: 1px solid var(--landing-border); }
.sf-skizze svg { max-width: none; min-width: 0; margin: 0 auto; }
.sf-vollbild-erklaerung { margin: 0; flex: 0 0 auto; }

#sf-tabelle :is(th, td):nth-child(2) { text-align: left; }
.sf-hinweise { margin: 0 0 1rem; padding: 0.6rem 0.8rem; border: 1px solid var(--landing-accent); font-size: 0.9rem; }
.sf-hinweise p { margin: 0.2rem 0; }

.sf-druckzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.sf-druckzeile label { font-weight: 600; font-size: 0.95rem; }
.sf-druckzeile select {
  min-height: 48px; padding: 0.4rem 0.6rem; font: inherit;
  color: var(--landing-text); background: var(--landing-bg);
  border: 1px solid var(--landing-border); border-radius: var(--landing-radius-sm);
}
.sf-druckzeile button {
  min-height: 48px; padding: 0.55rem 1rem; font: inherit; font-weight: 600; cursor: pointer;
  color: var(--landing-accent); background: transparent;
  border: 1px solid var(--landing-accent); border-radius: var(--landing-radius-sm);
}
.sf-druckzeile button:hover { background: var(--landing-accent-subtle); }

.sf-druckblatt { display: none; }
@page { size: A4 landscape; margin: 10mm; }
@media print {
  .sf-eingaben, .et-gruppe, .et-ergebnis, #sf-zeichnung, .sf-erklaerung,
  .et-rechenweg, .sf-rechner > .et-hint, .sf-beispiel, .et-lead, h1,
  .et-haftung, .sf-rechner .et-hint, #sf-ausgabe > h2 { display: none !important; }
  .sf-druckblatt { display: block; margin-bottom: 4mm; }
  .sf-druckblatt svg { display: block; max-width: none; }
  .sf-druckblatt text { font-family: var(--landing-font); font-size: var(--sf-schrift); fill: #000; }
  .sf-druckblatt .sf-holz { fill: none; stroke: #000; stroke-width: 0.35mm; }
  .sf-druckblatt .sf-pfette { fill: #eee; stroke: #000; stroke-width: 0.18mm; }
  .sf-druckblatt .sf-achse { stroke: #000; stroke-width: 0.13mm; stroke-dasharray: 3mm 1mm 0.5mm 1mm; fill: none; }
  .sf-druckblatt .sf-mass { stroke: #000; stroke-width: 0.13mm; }
  .sf-druckblatt .sf-verdeckt { stroke: #000; stroke-width: 0.18mm; stroke-dasharray: 1.5mm 1mm; }
  .sf-druckblatt .sf-ordnungslinie { stroke: #000; stroke-width: 0.1mm; stroke-dasharray: 0.5mm 1mm; }
  .sf-druckblatt .sf-treffer { display: none; }
  .sf-druckblatt .sf-risslinie { stroke: #000; stroke-width: 0.13mm; stroke-dasharray: 2mm 0.6mm 0.4mm 0.6mm; }
  .sf-druckblatt .sf-risstext { fill: #000; }
  .sf-druckblatt .sf-marke { fill: rgba(0, 0, 0, 0.07); }
  .sf-druckblatt .sf-kervenlinie { fill: none; stroke: #000; stroke-width: 0.5mm; vector-effect: non-scaling-stroke; }
  .sf-druckblatt .sf-holzbild { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .sf-leiste, #sf-vollbild { display: none !important; }
  .sf-druckblatt .sf-leiste { fill: #000; }
  .sf-druckblatt .sf-leiste-text { font-size: 3px; fill: #000; }
  .sf-druckkopfzeile { font-size: 9pt; margin: 0 0 3mm; }
  #sf-ausgabe h3 { break-before: page; }
  #sf-ausgabe h3 ~ h3 { break-before: auto; }
}