/* Edlerritter IT-Consulting · Rechenblatt (Startseite, "Ungefaehr ist das Problem")
   Steuerung: js/rechenblatt.js. Auf einem karierten Blatt wird vorgerechnet:
   Zahlen schreiben sich, die Summenlinie wird gezogen, das Ergebnis zaehlt
   hoch und wird orange eingekreist. Einmal pro Browser-Sitzung, nie bei
   reduzierter Bewegung. Ohne JavaScript und danach steht der fertige Zettel.

   Herkunft: Vorlage "edlerritter-rechnung.html" vom 06.10.2026. Texte,
   Zahlen und Zeitachse sind aus der Vorlage, mit diesen Abweichungen:
   - Jeder Selektor haengt an .erz, jede Klasse traegt das Praefix erz-.
     Die Vorlage hatte .big, .rule, .cap, .op, .n, .t und .w ohne Bindung;
     die gibt es im Hero-Film und im Angebots-Film schon, ihr .big haette
     dort die 12.400 Euro und die Szenenueberschriften veraendert.
   - Abstaende und Grund aus .band.band--hell wie die Nachbarabschnitte,
     Spalte --lese (640px). Ueberschriften in der Groesse der bisherigen
     Kostenzeile (24px mal --h2-scale).
   - Schrift: nur Poppins 400/500/700. Die Vorlage nutzte 600; ohne diese
     Datei haette der Browser Bold genommen. Beschriftungen wie .eyebrow.
   - Farben auf die Tokens: Grau = --muted, kleines Orange auf Hell
     (Operatoren, Link) = --accent-ink wegen AA. Volles --accent nur gross:
     Ergebnis, Kreis, Markierungen, Randlinie. Ab 24px fett gilt 3:1.
   - Die Markierungen sind die .mark-Pille der Seite. Zweizeilig wird jede
     Zeile eine eigene Pille (box-decoration-break), die Vorlage machte
     daraus einen Block um beide Zeilen.

   Die 12.400 Euro sind KEIN Preis von Marvin, sondern Kosten, die der
   Betrieb ohnehin traegt. Deshalb steht die Zahl unter dem Satz "Das kostet
   Ihren Betrieb pro Jahr rund": freistehend koennte man sie auf der Seite
   eines Beraters als Honorar lesen. */

.erz {
  --erz-papier: #FCFCFA; --erz-karo: #E6EAE8; --erz-rand: #E1E5E3;
  /* Der Zettel ist gedreht, die untere rechte Ecke wandert dabei um
     Hoehe mal sin(Winkel) nach rechts: bei 1,2 Grad und 570px Hoehe 12px.
     So viel bleibt rechts frei, damit nichts ueber die Spalte ragt. */
  --erz-dreh: -1.2deg; --erz-ueber: 12px;
  overflow-x: clip;
}
.erz * { box-sizing: border-box; }
.erz-in {
  max-width: calc(var(--lese) * var(--h2-scale)); margin: 0 auto;
  display: grid; gap: clamp(28px, 4vw, 40px);
}
.erz-in > * { min-width: 0; }

/* ---------- Ueberschriften mit Markierung ---------- */
.erz .erz-h {
  margin: 0; font-weight: 700; font-size: calc(24px * var(--h2-scale));
  line-height: 1.4; letter-spacing: -.02em; color: var(--ink); text-wrap: balance;
}
.erz .erz-ln { display: block; margin-bottom: 6px; }
.erz .erz-w { display: inline-block; }
/* Die Pille kommt von .mark (style.css). Hier nur der Wisch: der Grund ist
   ein Verlauf, dessen Breite --mk von 0 bis 1 zieht. Mit clone hat jede
   Zeile ihren eigenen Grund, beide Pillen wachsen gleichzeitig. Die hoehere
   Zeilenhoehe haelt zwei Pillen auseinander: Poppins braucht 1,4em plus
   Innenabstand, bei 1,4 Zeilenhoehe ueberlappten sie rechnerisch um 4px. */
.erz .erz-mark {
  line-height: 1.7;
  background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 0 / calc(var(--mk, 1) * 100%) 100%;
}

/* ---------- Das Rechenblatt ---------- */
.erz .erz-sheet {
  position: relative; justify-self: start;
  width: calc(100% - var(--erz-ueber)); max-width: calc(560px * var(--h2-scale));
  background-color: var(--erz-papier);
  background-image: linear-gradient(var(--erz-karo) 1px, transparent 1px), linear-gradient(90deg, var(--erz-karo) 1px, transparent 1px);
  background-size: 20px 20px; background-position: -1px -1px;
  border: 1px solid var(--erz-rand); border-radius: 6px;
  padding: clamp(22px, 4vw, 34px) clamp(18px, 4vw, 34px) clamp(22px, 4vw, 30px) clamp(46px, 7vw, 64px);
  box-shadow: 0 1px 0 rgba(23, 40, 30, .05), 0 30px 60px -36px rgba(23, 40, 30, .45);
  transform: rotate(var(--erz-dreh)); transform-origin: 30% 0;
  /* Zeilen und Ergebnissatz richten sich nach der Blattbreite (cqi), nicht
     nach dem Fenster: in drei Spalten ist das Blatt schmaler als einspaltig. */
  container-type: inline-size;
}
/* Randlinie wie auf Schulpapier */
.erz .erz-sheet::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: clamp(30px, 5vw, 44px);
  width: 2px; background: var(--accent); opacity: .55;
}
.erz .erz-tape {
  position: absolute; top: -12px; left: 50%; width: 96px; height: 24px; margin-left: -48px;
  background: rgba(234, 66, 39, .16);
  border-left: 1px dashed rgba(234, 66, 39, .35); border-right: 1px dashed rgba(234, 66, 39, .35);
  transform: rotate(2deg);
}
.erz .erz-top {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-bottom: clamp(14px, 2.6vw, 20px);
}
.erz .erz-top span {
  font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.erz .erz-top svg { width: 30px; height: auto; flex: none; }

/* Drei Spalten: Operator, Wert, Einheit. Die Breiten in em, damit sie mit
   der Schrift mitwachsen; dreistellige Werte brauchen rund 1,9em. Die
   Schrift folgt der Blattbreite: die laengste Zeile "x 25 Minuten
   Doppelarbeit am Tag" braucht samt Spalten rund 20,2em, 4,8cqi haelt sie
   einzeilig, sobald das Blatt dafuer breit genug ist (ab 17px). Der Wert
   steht rechtsbuendig, Einer unter Einern. Bricht die Einheit um ("Minuten
   Doppelarbeit am Tag" am Handy), bleibt der Wert auf ihrer ersten Zeile. */
.erz .erz-rows { display: grid; gap: clamp(6px, 1.4vw, 10px); }
.erz .erz-row {
  display: grid; grid-template-columns: 1em 2.9em minmax(0, 1fr); gap: .55em; align-items: baseline;
  font-size: clamp(17px, 4.8cqi, calc(22px * var(--h2-scale))); line-height: 1.35; color: var(--ink);
}
.erz .erz-op { font-weight: 700; color: var(--accent-ink); text-align: center; }
.erz .erz-n { font-weight: 700; text-align: right; white-space: nowrap; }
.erz .erz-t { min-width: 0; text-wrap: balance; }
.erz .erz-rule { display: block; width: 100%; height: 12px; margin: 4px 0 2px; overflow: visible; }
.erz .erz-rule path { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }

/* ---------- Ergebnis ----------
   Die Schriftgroesse der Zahl richtet sich nach der Breite des Blatts (cqi),
   nicht des Fensters: "12.400 €" ist 3,9em breit, der Kreis reicht bis 4,4em.
   Mit 23cqi bleibt beides auch auf 320px im Blatt. Die Zahl bricht nie um.
   Der Kreis ragt 0,12em ueber die Zahl, so viel Abstand plus 8px bekommt
   sie zur Zeile darueber, sonst streifte er "Das kostet Ihren Betrieb". */
.erz .erz-res {
  margin-top: clamp(20px, 3.6vw, 30px); container-type: inline-size;
  --erz-gross: clamp(44px, 23cqi, calc(104px * var(--h2-scale)));
}
.erz .erz-cap {
  margin: 0; font-size: clamp(18px, 5cqi, calc(23px * var(--h2-scale))); font-weight: 700;
  line-height: 1.3; letter-spacing: -.01em; color: var(--ink); text-wrap: balance;
}
.erz .erz-big { position: relative; display: inline-block; margin-top: calc(var(--erz-gross) * .12 + 8px); padding: 0 .12em; }
/* Rechtsbuendig: Die Poppins-Teilmenge hat nur proportionale Ziffern. Beim
   Hochzaehlen bleibt so das Euro-Zeichen stehen, die Breite reserviert
   js/rechenblatt.js vorab (min-width in em). */
.erz .erz-big b {
  display: block; font-size: var(--erz-gross);
  font-weight: 700; line-height: 1; letter-spacing: -.04em; color: var(--accent);
  text-align: right; white-space: nowrap;
}
.erz .erz-ring { position: absolute; left: -6%; top: -14%; width: 112%; height: 132%; overflow: visible; pointer-events: none; }
.erz .erz-ring path { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; opacity: .85; }

/* "Nochmal rechnen": ohne JavaScript per hidden aus, es taete nichts. */
.erz .erz-hint {
  margin: clamp(14px, 2.6vw, 20px) 0 0 auto; appearance: none; background: none; border: 0;
  padding: 8px 4px; font: inherit; font-size: 13px; font-weight: 500; color: var(--muted);
  cursor: pointer; display: flex; align-items: center; gap: 6px;
}
.erz .erz-hint[hidden] { display: none; }
.erz .erz-hint:hover { color: var(--accent-ink); }
.erz .erz-hint svg { width: 14px; height: 14px; }
.erz .erz-hint:focus-visible, .erz .erz-src a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
@media (pointer: coarse), (max-width: 900px) {
  .erz .erz-hint { min-height: 44px; padding: 0 8px; margin-right: -8px; }
}

.erz .erz-src { margin: -8px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.erz .erz-src a { text-underline-offset: 3px; }

/* Handy: flacher gedreht, damit weniger Rand rechts frei bleiben muss
   (0,8 Grad bei bis zu 570px Hoehe: 8px). Schmalerer Heftrand und eine
   knappere Wertspalte, sonst brach "Minuten Doppelarbeit am Tag" auf 360px
   in drei Zeilen (gemessen: 185px Text, 184px Spalte; jetzt 5px Reserve).
   Unter 355px bleiben es drei Zeilen, der Wert steht trotzdem oben. */
@media (max-width: 520px) {
  .erz { --erz-dreh: -.8deg; --erz-ueber: 8px; }
  .erz .erz-sheet { padding-left: 40px; padding-right: 16px; }
  .erz .erz-sheet::before { left: 26px; }
  .erz .erz-row { grid-template-columns: .9em 2.1em minmax(0, 1fr); gap: .4em; }
}

/* Breite Bildschirme: Frage links oben, Zettel in der Mitte, Antwort rechts
   unten; man liest diagonal vom Problem ueber die Rechnung zum Plan. Die
   Quellenzeile bleibt unter dem Zettel. Beide Textbloecke stehen buendig zum
   Zettel (links rechtsbuendig), damit die Gruppe auch auf 2560px beisammen
   bleibt. Gemessen: "Die Standortbestimmung" braucht 304px (24px Schrift)
   bzw. 353px (ab 1500px); die Seitenspalte hat mit diesen Werten ab 1360px
   mindestens 325px bzw. 360px, "Die" faellt also nie allein in eine Zeile. */
@media (min-width: 1360px) {
  .erz-in {
    --erz-blatt: clamp(500px, 36vw, calc(560px * var(--h2-scale) + var(--erz-ueber)));
    max-width: var(--container-max);
    grid-template-columns: minmax(0, 1fr) var(--erz-blatt) minmax(0, 1fr);
    column-gap: clamp(40px, 3vw, 64px);
  }
  .erz .erz-frage { grid-column: 1; grid-row: 1; justify-self: end; align-self: start; max-width: 16em; text-align: right; }
  .erz .erz-sheet { grid-column: 2; grid-row: 1; }
  .erz .erz-src { grid-column: 2; grid-row: 2; }
  .erz .erz-schluss { grid-column: 3; grid-row: 1; justify-self: start; align-self: end; max-width: 16em; }
}

/* Animationszustand: nur solange das Script laeuft */
.erz.is-armed [data-a] { will-change: opacity, transform, clip-path; }
@media (prefers-reduced-motion: reduce) { .erz .erz-hint { display: none; } }