/* Wissensseiten: /datev-buchungsstapel, /belege-aufbewahren, /sevdesk-alternative
   ============================================================================

   Emil am 17.08.2026: „auf allen neuen marketing seiten sind die spacings
   komisch und der text hat nicht die volle weite. […] inspiriere dich für das
   design der seiten viel mehr an den schon bestehenden seiten."

   GEMESSEN, bevor gebaut wurde (1440 px Fenster, Cache aus):

                            bestehende Seiten   Wissensseiten (vorher)
       Inhaltscontainer     1220 px             846 px
       Abstand vor  <h2>      18 px              58 px

   Beide Zahlen hatten eine Ursache, und die stand in einem Inline-<style>, den
   alle drei Seiten byteweise gleich mitschleppten:

       .fliess { max-width: 68ch; }

   68ch sind hier 846 px. Der Container lag damit 374 px schmaler als die
   .shell, in der er steckt — der Text klebte links, rechts stand ein Drittel
   der Seite leer. DAS ist „nicht die volle Weite".

   DIE HAUSREGEL WAR AUFGESCHRIEBEN und wurde übergangen. bp2.css:560 warnt
   wörtlich: „ACHTUNG: Breite hier in rem, nicht in ch. ch bezieht sich auf die
   Schrift DIESES Elements". Genau deshalb steht das Textmaß unten in rem.

   ZWEITE URSACHE, ZWEITE ZAHL: Die alten Regeln setzten die Abstände auf die
   Überschrift selbst (`.fliess h2 { margin-top: clamp(...) }`) statt auf einen
   Kopfblock. Das Haus macht es umgekehrt — `.sec-head { margin-bottom }` —,
   und deshalb liefen die beiden Rhythmen auseinander.

   DER AUFBAU, DEN DIE BESTEHENDEN SEITEN BENUTZEN und den diese Datei
   übernimmt: schmaler Kopfblock, breiter Inhalt. Auf /funktionen ist das
   `.sec-head` (46 rem) über `.three` (volle Breite). Hier ist es Fließtext
   auf dem Hausmaß (68ch, rund 883 px) neben allem, was Daten zeigt —
   Tabellen, Codeblöcke und Antwortkarten laufen über die volle Breite.
   Die Seite besteht damit aus zwei Kanten statt aus einer schmalen Spalte.
   ============================================================================ */

.wissen {
  /* KEIN max-width. Die .shell deckelt schon auf 1220 px; ein zweiter Deckel
     hier war der ganze Fehler. */

  /* DER OBERE ABSTAND WIRD GEDRÜCKT, und der Wert ist nicht erfunden:
     bp2.css:544 gibt jedem <section> `padding-block: clamp(4.5rem,10vw,9rem)`
     — bei 1440 px sind das 144 px. Nach einem Hero, der seinen eigenen
     Fußabstand mitbringt, steht das als Loch da; gemessen waren es 221 px
     zwischen Lead und erstem Inhalt.

     /funktionen löst das seit jeher im Markup: `<section style="padding-top:
     clamp(2rem,4vw,3rem);">` (funktionen.html:270). Genau dieser Wert steht
     hier — nur als Regel statt als Inline-Attribut, damit er für alle drei
     Seiten gilt und nicht dreimal abgeschrieben wird. */
  padding-top: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

/* DAS TEXTMASS STEHT HIER ABSICHTLICH NICHT.

   Mein erster Versuch setzte `max-width: 44rem` (704 px) — und war damit
   SCHMALER als die 766 px, über die Emil sich beschwert hat. Der Reflex,
   einen Deckel zu setzen, hätte den gemeldeten Fehler verschlimmert.

   bp2.css deckelt Absätze bereits global auf 68ch; auf den bestehenden
   Marketingseiten ergibt das 883 px. Genau diese Regel greift hier jetzt
   auch — ohne dass eine zweite Zahl danebensteht, die irgendwann auseinander-
   läuft. Listen erben denselben Deckel über die Absatzregel nicht, deshalb
   bekommen sie ihn unten ausdrücklich. */
.wissen > ul,
.wissen > ol {
  max-width: 55rem;
  padding-left: 1.15rem;
  margin-block: 1.2rem;
}

/* Abschnittsköpfe.

   DAS HAUS BENUTZT `.sec-head` — einen Block aus Kicker, Überschrift und
   Lead — und hängt den Abstand an diesen Block. Hier steht unter jeder
   Überschrift Fließtext, kein Lead; ein `.sec-head` um ein einziges Element
   wäre ein Wrapper ohne Inhalt. Die Überschrift bekommt deshalb direkt das
   Hausmaß (46rem, wie `.sec-head`) und einen Abstand aus derselben Reihe.

   NICHT ÜBERNOMMEN habe ich die 4.5rem Fußabstand von `.sec-head`: Dort
   trennen sie den Kopf von einem Kachelraster, hier stünde ein Loch zwischen
   Überschrift und dem Satz, der zu ihr gehört. Oben viel, unten wenig — das
   ist es, was eine Überschrift ihrem Abschnitt zuordnet.

   DIE BREITE IST 55rem UND NICHT DIE 46rem VON `.sec-head`: Der Text darunter
   läuft über den globalen 68ch-Deckel auf 883 px. Eine Überschrift, die
   schmaler ist als ihr eigener Absatz, bricht früher um als der Fließtext und
   sieht aus wie ein Fehler. 55rem sind 880 px und damit dieselbe Kante. */
.wissen > .h2 {
  max-width: 55rem;
  margin-top: clamp(3.4rem, 6vw, 5.4rem);
  margin-bottom: clamp(0.9rem, 1.6vw, 1.2rem);
}

/* Gilt für JEDES erste Element, nicht nur für Überschriften: Die Seiten
   beginnen mal mit einer Antwortkarte, mal mit einer Überschrift. Eine Regel,
   die nur den einen Fall kennt, lässt den anderen abfallen — und das fällt
   erst auf der dritten Seite auf. */
.wissen > *:first-child {
  margin-top: 0;
}

.wissen > h3 {
  font-size: var(--fs-titel);
  margin-top: clamp(2rem, 3.4vw, 2.6rem);
  margin-bottom: 0.6rem;
}

.wissen li {
  margin-bottom: 0.5rem;
}

/* ---------------------------------------------------------------- Antwortkarte

   VORHER: `border-left: 3px solid var(--green)`. Ein farbiger Seitenstreifen
   kommt sonst nirgends auf der Marketingseite vor — er war die auffälligste
   Stelle auf Emils Bildern und stammte aus keinem Hausbaustein.

   JETZT: `.card` aus bp2.css, also dieselbe Fläche, derselbe Radius und
   dieselbe Polsterung wie überall sonst. Die Karte nimmt die volle Breite —
   sie ist damit das breite Element neben dem schmalen Fließtext, genauso wie
   `.three` neben `.sec-head` steht. */
.wissen .antwort {
  margin-block: clamp(1.8rem, 3.2vw, 2.6rem);
}

/* DIE ÜBERSCHRIFT IN DER KARTE.

   Zwei Fehler auf einmal, beide erst im Bild sichtbar geworden:

   1. bp2.css:184 setzt `h1,h2,h3,h4 { margin: 0 }` — global. Jede Seite muss
      ihre Abstände selbst mitbringen. Der alte Inline-Block tat das über
      `.fliess h2` für ALLE Überschriften; meine Regel oben trifft mit
      `.wissen > .h2` nur direkte Kinder. Die Karten-Überschriften standen
      danach auf Null Abstand und liefen bei `line-height: 1.02` in ihren
      eigenen Text hinein.

   2. `.h2` ist mit bis zu 3.6rem eine ABSCHNITTS-Überschrift. In einer Karte
      ist sie größer als der Abschnittstitel darüber und dreht damit die
      Rangfolge um.

   Die Klasse bleibt im Markup, weil `<h2>` hier die Gliederung trägt (die
   Fragen stehen so auch im FAQ-Schema). Geändert wird nur, wie sie aussieht. */
.wissen .antwort .h2 {
  font-size: var(--fs-titel-l);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 0.7rem;
}

/* DER TEXT IN DER KARTE IST FLIESSTEXT, KEINE BILDUNTERSCHRIFT.

   bp2.css:618 setzt `.card p { color: var(--ink-2); margin: 0; font-size: 1rem }`.
   Das ist für die Hauskarte richtig — sie trägt EINEN kurzen Satz. Die
   Antwortkästen hier haben zwei bis drei Absätze, und mit `margin: 0` klebten
   sie aneinander: gemessen 0 px Abstand bei 28,5 px Zeilenabstand. Zwei
   Absätze, die enger stehen als ihre eigenen Zeilen, liest niemand mehr als
   zwei Absätze — und damit war die Form „Antwort zuerst, Erklärung darunter"
   dahin, für die es den Kasten überhaupt gibt.

   Der Fließtext derselben Seite misst 17 px — NICHT `--fs-basis` (16 px).
   Die 17 kommen vom `body` und werden vererbt; `.card p { font-size: 1rem }`
   bricht genau diese Vererbung. Deshalb steht hier `inherit` und keine Zahl:
   Eine dritte Größe danebenzuschreiben hieße, sie beim nächsten Umstellen der
   Grundschrift zu vergessen. */
.wissen .antwort p {
  font-size: inherit;
  color: var(--ink);
  margin: 0 0 1rem;
}

.wissen .antwort .kurz {
  font-size: var(--fs-gross);
  font-weight: 650;
  max-width: 55rem;
}

.wissen .antwort p:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------- Tabelle

   Volle Breite. Eine Tabelle ist kein Fließtext: Sie auf das Lesemaß zu
   zwingen, presst die Spalten zusammen und erzwingt Umbrüche in Zellen, die
   in einer Zeile stehen sollten. */
.wissen .tab {
  width: 100%;
  border-collapse: collapse;
  margin-block: clamp(1.4rem, 2.6vw, 2rem);
  font-size: var(--fs-basis);
}

.wissen .tab th,
.wissen .tab td {
  text-align: left;
  padding: 0.8rem 0.7rem;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

.wissen .tab th {
  font-weight: 700;
  color: var(--ink);
}

.wissen .tab td:first-child {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

@media (max-width: 640px) {
  .wissen .tab,
  .wissen .tab tbody,
  .wissen .tab tr,
  .wissen .tab td { display: block; }
  .wissen .tab thead { display: none; }
  .wissen .tab tr {
    padding-block: 0.7rem;
    border-bottom: 1px solid var(--line);
  }
  .wissen .tab td { border: 0; padding: 0.1rem 0; }
}

/* --------------------------------------------------------------- Codeblock */

.wissen .code {
  background: var(--surface);
  border-radius: var(--r);
  padding: clamp(1rem, 2.4vw, 1.5rem);
  margin-block: clamp(1.4rem, 2.6vw, 2rem);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-klein);
  line-height: 1.75;
  overflow-x: auto;
  white-space: pre;
}

/* ---------------------------------------------------------------- Quellen */

.wissen .quelle {
  font-size: var(--fs-neben);
  color: var(--ink-3);
  margin-top: clamp(2.6rem, 5vw, 4rem);
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  max-width: 55rem;
}

.wissen .quelle a { text-decoration: underline; }

/* ------------------------------------------------------------------- Kopf

   `.head` steht in keiner zentralen Datei — jede Marketingseite setzt sie
   selbst. Deshalb liefen die Wissensseiten hier auseinander, ohne dass es
   jemandem auffiel.

   GEMESSEN AN DEN BESTEHENDEN SEITEN (1440 px), das ist die Vorlage:

                    /funktionen   /sicherheit   Wissensseiten (vorher)
       Ausrichtung  center        center        start
       h1             941 px        847 px        860 px
       .lead          883 px        883 px        944 px

   Zwei Befunde daraus. Erstens: Die bestehenden Seiten ZENTRIEREN ihren Hero,
   die neuen nicht — deshalb klebte der Text links und rechts stand die Fläche
   leer. Zweitens: Die 883 px der bestehenden `.lead` sind gar keine eigene
   Regel, sondern der globale Absatzdeckel aus bp2.css. Die Wissensseiten haben
   ihn mit `62ch` überschrieben und lagen damit 61 px daneben. Hier steht
   deshalb KEIN eigener Deckel für .lead — der aus dem Haus greift von selbst.

   Die Überschrift bleibt kleiner als auf /funktionen (3.2rem statt 4.2rem):
   Die Titel hier sind Nachschlagetitel und entsprechend lang.

   ZENTRIERT WIRD ÜBER DIE HAUSKLASSE `.centered` im Markup, nicht hier:
   bp2.css:579 setzt dort bereits `text-align: center` samt
   `margin-inline: auto` auf alle Kinder. Dieselbe Regel ein zweites Mal
   danebenzuschreiben ist genau die Sorte Verdopplung, aus der die
   Wissensseiten ursprünglich entstanden sind. */
.head {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.4rem, 3vw, 2.2rem);
}

.head h1 {
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  /* rem, nicht ch — bp2.css:560. 54rem = 864 px und liegt damit zwischen den
     847 px von /sicherheit und den 941 px von /funktionen. */
  max-width: 54rem;
}