/* ============================================================
   xml-rechnung.css — Layout- und Textbausteine fuer xml-rechnung.eu
   Ergaenzung zu validator.css, NICHT deren Ersatz.
   Laedt NACH semantic.min.css und NACH validator.css.
   Traegt bewusst ohne Fomantic, damit sich beide nicht beissen.

   Ziel: schlicht bleiben, aber deutlich mehr Kontrast. Drei Mittel:
   dunkler Hero, getoente Wechselflaechen, kraeftige Abschnittsmarken.
   ============================================================ */

:root{
  --ink:        #0B1B2B;   /* Fließtext, deutlich dunkler als Fomantic-Default */
  --ink-soft:   #4A5A6A;
  --brand:      #1E3A8A;   /* Hausfarbe, wie im Logo */
  --brand-deep: #0F2547;   /* Hero-Hintergrund */
  --brand-tint: #EEF2FB;
  --good:       #166534;
  --good-tint:  #F0FDF4;
  --warn:       #854D0E;
  --warn-tint:  #FFFBEB;
  --tint:       #F4F7FA;   /* getönte Sektion */
  --line:       #DDE4EC;
  --faint:      #8895A2;   /* Beschriftungen unter Kennzahlen */

  /* Diagrammfarben. Heller als die Palettenfarben, gleiche Toene: --brand
     auf zwei Pixel Text ist kraeftig, dieselbe Farbe auf einem Ring von
     200px Durchmesser ist schwer. Chart.js kennt keine CSS-Variablen — die
     Werte stehen zusaetzlich in stats.html und sind dort nachzuziehen.
     Untergrenze ist 3:1 gegen Weiss (WCAG 1.4.11, nicht-textueller
     Kontrast): ein Ringsegment, das man von der Flaeche daneben nicht
     unterscheidet, ist keine Auskunft. Gelb und Grau sitzen knapp
     darueber, heller ginge nicht mehr. */
  --dia-blau:   #5B7FD1;
  --dia-gruen:  #3E9E70;
  --dia-gelb:   #C68729;
  --dia-rot:    #CE6F66;
  --dia-grau:   #8494A4;

  /* Warmer Akzent. Die Palette war bis hierhin durchgehend kuehl — Navy,
     Grau, ein Gruen und ein Bernstein als duenne Kanten. Das ist die
     Farbwelt einer Behoerde, nicht die eines Betriebs. Genau drei Stellen
     bekommen deshalb einen warmen Ton: der helle Hauptknopf und der
     Menueknopf beim Ueberfahren, und das Herz in der Fusszeile. Mehr
     kippt ins Bunte. */
  --warm:       #A8552F;
  --warm-soft:  #FBF2EC;

  /* Hero-Flaeche. Die Startseite ist die Haustuer und bleibt Navy; jeder
     Themenbereich bekommt seinen eigenen Ton, damit die Unterseiten sich
     als Raeume dahinter lesen und nicht als weitere Startseiten.
     Gesetzt wird das ueber eine Klasse am <body>, nicht pro Element:
     Hero, Abschlussblock, Fusslinie der Menueleiste und der helle Knopf
     lesen alle aus derselben Variablen. Eine neue Seite kostet damit eine
     Zeile. */
  --hero-bg:    #0F2547;
  --hero-rule:  #1E3A8A;

  /* Akzent der Seite: Wortmarke, Links, Abschnittsmarken, Kartenkanten,
     Tarifrahmen, Knoepfe. Steht getrennt von --brand, weil --brand der Wert
     aus dem Logo ist und dort fest bleibt; --accent ist das, was eine Seite
     daraus macht. Ohne Thema sind beide gleich. Ein Thema faerbt den Akzent
     MIT — sonst steht ein petrolfarbener Hero ueber navyblauen Kreisen, und
     das sieht nach Versehen aus. */
  --accent:     #1E3A8A;
}

/* Themen. Nur Seiten mit eigenem Thema bekommen eine Klasse; Startseite,
   Funktionen und Registrierung bleiben beim Navy — sie sind das Produkt
   selbst und keine Themenraeume. */
body.thema-pruefen { --hero-bg:#0D3A43; --hero-rule:#17707E; --accent:#17707E; }  /* Petrol — pruefen     */
body.thema-howto   { --hero-bg:#0D3A43; --hero-rule:#17707E; --accent:#17707E; }  /* dito, dasselbe Thema */
body.thema-archiv  { --hero-bg:#3B1F26; --hero-rule:#8E3B4E; --accent:#8E3B4E; }  /* Bordeaux — archivieren */

body,
.ui.header,
.ui.button,
.ui.menu,
.ui.message{
  font-family:'Ubuntu',-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif !important;
}
body{ color:var(--ink); background:#fff; -webkit-font-smoothing:antialiased; margin:0;
      font-size:16px; line-height:1.5; }
*{ box-sizing:border-box; }
/* Links faerben mit dem Thema. --accent ist auf den ungethemten Seiten
   identisch mit --brand, dort aendert sich also nichts; auf einer
   petrolfarbenen oder bordeauxroten Seite stand sonst jeder zweite Satz in einem
   zweiten kraeftigen Blau, das mit nichts auf der Seite zu tun hat. Alle
   drei Themenfarben halten als Text auf Weiss die 4.5:1 der Stufe AA. */
a{ color:var(--accent); }

/* ---------- Layout-Grundlagen ----------
   Bewusst eigenständig, damit der Entwurf auch ohne Fomantic trägt.
   Die Breite entspricht dem Fomantic-Container (1127px), damit sich
   nichts verschiebt, wenn er zwischen Menü und Footer eingesetzt wird. */
.wrap{ max-width:1127px; margin:0 auto; padding:0 22px; }
.cols2{ display:grid; gap:26px; }
@media(min-width:768px){ .cols2{ grid-template-columns:1fr 1fr; gap:40px; } }

.btn{
  display:inline-block; padding:13px 24px;
  border:1px solid transparent; border-radius:4px; cursor:pointer;
  font-family:inherit; font-size:16px; font-weight:500; text-decoration:none;
  white-space:nowrap;
}
/* Knopfpaar: bleibt auch auf schmalen Breiten nebeneinander */
.btn-row{ display:flex; flex-wrap:nowrap; gap:12px; margin-top:38px; }
@media(max-width:420px){ .btn-row{ flex-wrap:wrap; } .btn-row .btn{ flex:1 1 100%; text-align:center; } }
.btn.light{ background:#fff; color:var(--hero-bg); }
.btn.ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
/* Gefuellter Knopf im Seiteninhalt — etwa "Datei auswaehlen" im
   Ablagefeld. Faerbt mit dem Thema, sonst steht ein blauer Knopf mitten
   in einer petrolfarbenen Seite. Weisse Schrift haelt auf allen drei
   Themenfarben die 4.5:1. */
.btn.solid{ background:var(--accent); color:#fff; }
.btn:hover{ opacity:.9; }
/* Der helle Hauptknopf ist die zweite der drei warmen Stellen. */
.btn.light:hover{ background:var(--warm); color:#fff; opacity:1; }

/* Menüleiste — auf der Live-Seite bleibt das Fomantic-Menü aus dem Bestand */
.topbar{ background:#fff; border-bottom:1px solid var(--line); }
/* Zweigeteilt: Marke und Themenlinks links, Zugänge rechts.
   Getrennt durch .sp (margin-left:auto), nicht durch zwei Container.

   align-items:baseline, nicht center: Marke (19px), Menuepunkte (15px) und
   Versionsnummer (12.5px) sind unterschiedlich gross. center legt ihre
   *Kaesten* uebereinander, und weil die Grundlinie in einem hohen Kasten
   tiefer sitzt als in einem niedrigen, standen die Woerter bis zu zwei Pixel
   versetzt. baseline richtet die Schriftlinien selbst aus.
   Die Hoehe kommt dafuer aus Polsterung statt aus height: bei
   baseline-Ausrichtung haengt die Zeilengruppe oben im Kasten, ein festes
   height:56px wuerde sie an den oberen Rand ziehen. 15px + 28.5px Zeile +
   15px ergeben wieder die 56px von vorher. */
.topbar .wrap{ display:flex; align-items:baseline; gap:22px; padding-top:15px; padding-bottom:15px; flex-wrap:wrap; }
.topbar .brand{ margin-right:8px; }
/* Die Wortmarke faerbt mit. Sie ist zwar die Marke, aber als navyblauer
   Schriftzug ueber einem bordeauxroten Hero war sie das letzte Blau im Kopf und
   hat sich gebissen. Alle drei Themenfarben halten als Text auf Weiss die
   4.5:1 der WCAG-Stufe AA — Navy 10.4, Petrol 5.7, Bordeaux 7.3. */
.topbar .brand{ font-size:19px; font-weight:700; color:var(--accent); text-decoration:none; }
.topbar .sp{ margin-left:auto; }
.topbar a.nav{ font-size:15px; color:var(--ink-soft); text-decoration:none; }
.topbar a.nav:hover{ color:var(--accent); }

/* Die Hauptaktion ist ein Knopf, kein Link. Als Textlink zwischen vier
   gleich aussehenden Menuepunkten war nicht zu erkennen, wo es hineingeht
   — eine Produktseite muss das zeigen. Sitzt rechts bei den Zugaengen,
   nicht zwischen den Themen. */
.topbar a.cta{
  font-size:15px; font-weight:700; text-decoration:none;
  /* Akzent, nicht Marke: auf einer Seite mit eigenem Thema stand sonst ein
     navyblauer Knopf ueber einem bordeauxroten Hero — zwei kraeftige Farben, die
     sich beissen. Der Knopf faerbt jetzt mit; wiedererkannt wird er an
     Form, Platz und Beschriftung, nicht an der Farbe. */
  background:var(--accent); color:#fff;
  padding:8px 15px; border-radius:4px; white-space:nowrap;
  /* align-self:baseline, nicht center: die .topbar richtet ihre Kinder an
     der Schriftlinie aus (siehe oben). center legt den KASTEN des Knopfes
     mittig — sein Text sitzt dann tiefer als die Menuepunkte daneben.
     baseline richtet die Schrift IM Knopf an derselben Linie aus, die
     Polsterung waechst symmetrisch darum herum. */
  align-self:baseline;
}
.topbar a.cta:hover{ background:var(--warm); }

/* Zweiter Weg, zweiter Rang: "E-Rechnung pruefen" fuehrt an derselben Stelle
   hinein wie "Kostenlos starten", nur ohne Konto. Beide als gefuellte Knoepfe
   nebeneinander hoben sich gegenseitig auf — dann ist wieder nicht zu sehen,
   wo es hineingeht, und genau deswegen wurde die Hauptaktion ueberhaupt zum
   Knopf gemacht (siehe oben).

   Nicht .btn.ghost wiederverwenden: Das ist der Ghost fuer den DUNKLEN Hero,
   mit weisser Schrift und weissem Rand. Auf der weissen Leiste waere er
   unsichtbar.

   Die Polsterung ist um den Rand vermindert — 7px + 1px Rand ergeben wieder
   die 8px des gefuellten Knopfes. Sonst staende der Ghost zwei Pixel hoeher
   und breiter neben ihm, und das sieht man in einer Leiste sofort. */
.topbar a.cta.ghost{
  background:transparent; color:var(--accent);
  border:1px solid var(--accent); padding:7px 14px;
}
/* Beim Ueberfahren dieselbe Farbe wie der gefuellte Knopf — aber weiterhin
   ungefuellt. Ein Ghost, der beim Hover zufuellt, saehe im Ruhezustand des
   Nachbarn aus wie dieser und stiftete genau die Verwechslung, die er
   vermeiden soll. */
.topbar a.cta.ghost:hover{ background:transparent; color:var(--warm); border-color:var(--warm); }

/* Dritte Stufe, fuer "Zur App": ein Knopf, aber der leiseste. Er richtet
   sich an Leute, die schon ein Konto haben — das ist kein Werbeweg, sondern
   eine Tuer. Gleiche Vokabel wie .btn.line im Seiteninhalt: weisser Grund,
   Akzentschrift, Rand in der Linienfarbe.

   Die Rangfolge steht damit in drei Abstufungen da, von leise nach laut:
   grauer Rand (Tuer) — Akzentrand (zweiter Weg) — gefuellt (Hauptaktion). */
.topbar a.cta.line{
  background:#fff; color:var(--accent);
  border:1px solid var(--line); padding:7px 14px;
}
.topbar a.cta.line:hover{ background:#fff; color:var(--accent); border-color:var(--accent); }

/* Die Zugaenge bleiben als Gruppe zusammen — siehe den Kommentar in
   partials/menu.html. Innen enger als die 22px der Leiste: Die drei
   gehoeren zusammen und sollen nicht wie drei Menuepunkte wirken.
   flex-wrap, damit sie auf sehr schmalen Schirmen untereinander rutschen,
   statt die Leiste zu sprengen. */
.topbar .actions{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
/* Duenne Linie in der Themenfarbe: moderiert den Hero an und bindet die
   Leiste an die Seite, auf der sie steht. */
.topbar{ box-shadow:0 1px 0 var(--hero-rule); }

.footer-segment{ padding:34px 0 46px; border-top:1px solid var(--line); text-align:center; }
.footer-segment p{ margin:0; font-size:15px; }
.footer-segment .made{ margin-top:8px; color:var(--ink-soft); }
.footer-segment .heart{ color:var(--warm); }

/* ---------- Sektionen ---------- */
.sec{ padding:70px 0; }
.sec.tinted{ background:var(--tint); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.sec .ui.header{ color:var(--ink); letter-spacing:-.02em; }

/* Kopfzeile einer Sektion: Nummer + Titel in einer Zeile */
.sec-head{ display:flex; align-items:flex-start; gap:18px; margin-bottom:26px; }
/* Abschnittsmarke: gefüllter Kreis mit Icon.
   Das Icon ist ein Inline-SVG mit stroke="currentColor" — es braucht keine
   Icon-Schrift und erbt die Farbe des Kreises. Varianten über eine Klasse,
   nicht über style="". */
.sec-num{
  flex:0 0 auto; width:46px; height:46px; border-radius:50%;
  background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.sec-num.soft{ background:var(--ink-soft); }
.sec-num.good{ background:var(--good); }
.sec-num.warm{ background:var(--warm); }
.sec-num.dark{ background:var(--ink); }
.sec-num .ic{ width:23px; height:23px; display:block; }
.sec-num .glyph{ font-size:24px; font-weight:700; line-height:1; }
.sec-head h2{ font-size:29px; font-weight:700; margin:4px 0 0; line-height:1.2; letter-spacing:-.02em; }
.sec-head .sub{ color:var(--ink-soft); font-size:17px; margin-top:8px; max-width:62ch; }

/* Quellenangabe unter dem Abschnittstitel. War eine blaue Plakette — und
   damit das am haeufigsten wiederholte Element der ganzen Site. Der
   optische Rhythmus las sich dadurch als "Gesetz, Gesetz, Gesetz",
   obwohl die Texte laengst die Loesung nach vorn stellen. Jetzt eine
   leise graue Zeile mit kleinem Buchzeichen: Beleg statt Ansage.
   Das Zeichen steckt als data-URI hier, nicht im Markup — die Farbe ist
   deshalb fest hinterlegt, ein SVG im background erbt kein currentColor. */
.para{
  display:inline-flex; align-items:center; gap:7px; margin-top:11px;
  font-size:13px; color:#8B98A5;
}
.para::before{
  content:''; flex:0 0 auto; width:14px; height:14px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B98A5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5A2.5 2.5 0 0 1 6.5 3H20v15H6.5A2.5 2.5 0 0 0 4 20.5z'/%3E%3Cpath d='M8 7.5h8M8 11h5'/%3E%3C/svg%3E") center/14px no-repeat;
}

/* ---------- Hero ---------- */
.hero{
  background:var(--hero-bg);
  color:#fff;
  padding:82px 0 78px;
  border-bottom:5px solid var(--hero-rule);
}
.hero .stamp{
  display:inline-block; margin-bottom:22px;
  border:1px solid rgba(255,255,255,.35); border-radius:3px;
  padding:6px 12px; font-size:13.5px; font-weight:500; letter-spacing:.03em;
  color:rgba(255,255,255,.72);
}
.hero h1{
  font-size:44px; font-weight:700; line-height:1.14; letter-spacing:-.025em;
  margin:0; color:#fff; max-width:20ch;
}
.hero .lead{ font-size:19.5px; line-height:1.55; color:rgba(255,255,255,.84); margin-top:22px; max-width:56ch; }
/* Zweite, ruhigere Zeile im Hero: was das Produkt IST. Ohne sie beantwortet
   die Seite die Frage nicht, ob man etwas installieren muss. */
.hero .lead2{ font-size:17px; line-height:1.55; color:rgba(255,255,255,.6); margin-top:14px; max-width:54ch; }

/* Links auf dem dunklen Hero. Ohne diese Regel erben sie a{color:var(--accent)}
   — auf datenschutz.html also Navy auf Navy, praktisch unsichtbar. Weiss und
   damit heller als der Fliesstext daneben (der liegt bei .84), sonst muesste
   allein der Unterstrich den Link verraten. Der Unterstrich beginnt gedaempft
   und wird beim Ueberfahren voll — dieselbe Bewegung wie bei den Knoepfen.
   :not(.btn), weil in anderen Heros Knoepfe stehen, die ihre Farbe mitbringen. */
.hero a:not(.btn){
  color:#fff; text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.45); text-underline-offset:3px;
}
.hero a:not(.btn):hover{ text-decoration-color:#fff; }

/* die drei Stichzeilen */
.facts{ display:flex; flex-wrap:wrap; gap:0; margin-top:38px; }
.fact{
  flex:1 1 220px; padding:0 26px;
  border-left:3px solid rgba(255,255,255,.22);
}
.fact:first-child{ padding-left:0; border-left:none; }
.fact .t{ font-size:17px; font-weight:700; color:#fff; }
.fact .d{ font-size:15px; line-height:1.5; color:rgba(255,255,255,.68); margin-top:5px; }

.hero .ui.button{ margin-top:38px; font-weight:500; }
.hero .ui.white.button{ background:#fff; color:var(--brand-deep); }
.hero .ui.white.basic.button{ box-shadow:0 0 0 1px rgba(255,255,255,.5) inset !important; color:#fff !important; }

/* ---------- Produktbild ----------
   Die Site verkauft eine Software. Ohne ein Bild der Oberflaeche bleibt sie
   eine Broschuere: Der Besucher kann nach dem Lesen nicht sagen, ob er eine
   Webseite bekommt oder etwas installieren muss. Der Rahmen sitzt direkt
   unter dem Hero und ragt in ihn hinein, damit das Bild und nicht ein
   Textkasten das groesste Element der Seite ist.
   Solange kein Screenshot da ist, steht .ph darin — deutlich als
   Platzhalter erkennbar, damit er beim Durchsehen nicht uebersehen wird. */
/* Ohne Modifikator ein neutraler Rahmen: so steht das Bild in einem
   Abschnitt, wo ueber ihm eine Ueberschrift und kein Hero sitzt. Nur
   .ueberlappt zieht es in den Hero hinein — das ist die Startseite, wo das
   Bild bewusst das groesste Element sein soll. */
.shot{ margin-bottom:8px; }
.shot.ueberlappt{ margin-top:-56px; }
/* Produktbild im Abschnitt: erst die Ueberschrift, dann das Bild, dann der
   Text. Zeigen vor Erklaeren — auf einer Funktionsseite beantwortet das Bild
   die erste Frage ("wie sieht das aus") schneller als jeder Absatz. */
.sec .shot{ margin:28px 0 32px; }
.shot .frame{
  background:#fff; border:1px solid var(--line); border-radius:8px;
  box-shadow:0 18px 46px rgba(11,27,43,.18); overflow:hidden;
}
.shot .frame img{ display:block; width:100%; height:auto; }
.shot .cap{ font-size:14.5px; color:var(--ink-soft); margin-top:10px; }
.shot .ph{
  aspect-ratio:16/9; display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:6px; text-align:center; padding:24px;
  background:repeating-linear-gradient(45deg,#F4F7FA,#F4F7FA 12px,#EDF2F7 12px,#EDF2F7 24px);
  border:2px dashed #B9C6D6; color:var(--ink-soft);
}
.shot .ph b{ font-size:17px; color:var(--ink); }
.shot .ph span{ font-size:14.5px; max-width:44ch; }

/* ---------- Upload ----------
   Wird auf der Startseite nicht mehr verwendet. Der Baustein bleibt hier
   stehen, damit er unverändert auf die Validator-Unterseite umziehen kann. */
.upload{
  margin-top:-38px; margin-bottom:0;
  background:#fff; border:2px dashed #B9C6D6; border-radius:6px;
  padding:30px 34px; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  transition:border-color .2s, background .2s;
  box-shadow:0 8px 26px rgba(11,27,43,.09);
}
.upload:hover{ border-color:var(--accent); background:#FAFCFF; }
/* Waehrend eine Datei ueber dem Feld haengt. Das Skript setzt die Klasse
   schon immer, eine Regel dazu gab es nicht — das Ziehen war deshalb
   stumm, und wer eine Rechnung ueber dem Feld haelt, sieht als Einziges
   den Mauszeiger. Deutlicher als :hover: durchgezogene Kante statt
   gestrichelter und eine getoente Flaeche, damit der Unterschied zum
   blossen Ueberfahren erkennbar bleibt. */
.upload.dragover{
  border-style:solid; border-color:var(--accent);
  /* Die getoente Flaeche kommt aus dem Akzent, damit sie auf jeder
     Themenfarbe stimmt. Die erste Zeile ist der Rueckfall fuer Browser
     ohne color-mix(); sie steht absichtlich zuerst. */
  background:var(--tint);
  background:color-mix(in srgb, var(--accent) 9%, #fff);
}
.upload .t{ font-size:20px; font-weight:700; }
.upload .d{ font-size:15.5px; color:var(--ink-soft); margin-top:4px; max-width:52ch; }

/* ---------- Pruefergebnis ----------
   Baut /js/validation.js zusammen: erst die lesbar gemachte Rechnung, dann
   das Urteil und die Angaben daneben. Die Klassen entstehen im Skript, die
   Optik steht hier. */

/* Das Ablagefeld haengt per margin-top:-38px im Hero. Sobald ein Ergebnis
   angezeigt wird, blendet das Skript es aus — ohne diese Polsterung faengt
   die Vorschau dann buendig an der Hero-Kante an. */
#probe.zeigt-ergebnis{ padding-top:36px; }

.vorschau-kopf{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.vorschau-kopf .t{ font-size:17.5px; font-weight:700; }
.vorschau-kopf .d{ font-size:15px; color:var(--ink-soft); }

/* Derselbe Rahmen wie beim Produktbild: Die Vorschau ist ein Bild der
   Rechnung und soll so aussehen — nicht wie ein eingebetteter Fremdkoerper.
   Der Rahmen schneidet ab, das Dokument darin scrollt. */
.vorschau{
  background:#fff; border:1px solid var(--line); border-radius:8px;
  box-shadow:0 18px 46px rgba(11,27,43,.18); overflow:hidden;
}
.vorschau iframe{
  display:block; width:100%; border:0;
  /* Feste Hoehe: Das Dokument liegt in einer sandbox ohne
     allow-same-origin, seine tatsaechliche Hoehe ist von aussen nicht
     lesbar. Lieber etwas Luft unten als eine abgeschnittene Rechnung. */
  height:min(70vh, 720px); min-height:420px;
}

/* Die Angaben aus der Rechnung: Bezeichnung links, Wert rechts, eine Zeile
   je Angabe. Gleiche Machart wie die Paketpreise auf der Preisseite. */
.angaben{ margin-top:12px; }
.angabe{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:9px 0; border-top:1px solid var(--line); font-size:15.5px;
}
.angabe:first-child{ border-top:none; }
.angabe .k{ color:var(--ink-soft); }
.angabe .w{ font-weight:500; text-align:right; overflow-wrap:anywhere; }

/* ---------- Fließtext ----------
   Der Normalfall im Abschnitt. Listen sind die Ausnahme, nicht umgekehrt:
   sie stehen nur da, wo der Inhalt wirklich aus abzählbaren Punkten
   besteht. Höchstens EIN Listenbaustein pro Abschnitt. */
.prose{ max-width:64ch; }
.prose p{ font-size:17px; line-height:1.65; margin:0 0 18px; }
.prose p:last-child{ margin-bottom:0; }
.prose p b{ font-weight:700; }
.prose .q{ font-size:17px; font-weight:700; display:block; margin-bottom:2px; }
.cols2 .prose{ max-width:none; }
/* Zwischentitel im Fliesstext. Braucht eine Seite, die laenger ist als ein
   Abschnitt — die Rechtstexte etwa: dort steht unter einer Ueberschrift ein
   Dutzend Unterpunkte, und .sec-head gaebe jedem davon eine eigene Marke. */
.prose h3{ font-size:18px; font-weight:700; margin:26px 0 8px; letter-spacing:-.01em; }
.prose h3:first-child{ margin-top:0; }
.prose ul{ margin:10px 0 18px; padding-left:22px; font-size:17px; line-height:1.65; }
.prose li{ margin-bottom:6px; }

/* ---------- Formular ----------
   Eigenstaendig statt Fomantic. Nicht aus Prinzip: validator.css erzwingt
   Ubuntu nur auf body, .ui.header, .ui.button, .ui.menu und .ui.message —
   Beschriftungen und Eingabefelder von .ui.form fallen deshalb auf Fomantics
   Schrift zurueck, und Fomantics Primary-Blau (#2185d0) ist nicht --brand.
   Beides zusammen laesst das Formular wie ein Fremdkoerper aussehen.
   Die Bedienelemente bleiben die des Browsers: ein <select> ohne
   Fomantic-Aufsatz ist auf dem Telefon das bessere Bedienelement, und das
   Absende-Skript liest ohnehin nur .val() und :checked. */
.formular{
  background:#fff; border:1px solid var(--line); border-top:3px solid var(--accent);
  border-radius:4px; padding:26px 28px;
  /* Eigene Textfarbe, nicht geerbte. Auf register.html liegt der Kasten in
     einer hellen Sektion und faellt das nicht auf; auf der Landingpage liegt
     er im Hero, und .hero setzt color:#fff — weisse Beschriftungen auf
     weissem Grund. Ein Kasten mit eigener Flaeche muss seine Schriftfarbe
     mitbringen. */
  color:var(--ink);
}
.feld{ margin-bottom:18px; }
.feld:last-of-type{ margin-bottom:0; }
/* Auch .feld > div > label: in .felder2 stehen zwei Felder nebeneinander,
   jedes in einem eigenen <div>. Ohne den zweiten Selektor fielen Vorname und
   Nachname aus der Formularoptik heraus — 16px normal statt 14px mittel, und
   ohne Abstand zum Eingabefeld. */
.feld > label,
.feld > div > label{
  display:block; font-size:14px; font-weight:500; color:var(--ink);
  margin-bottom:6px; letter-spacing:.01em;
}
.feld > label .pflicht,
.feld > div > label .pflicht{ color:var(--brand); font-weight:700; }
.feld .dazu{ display:block; font-weight:400; font-size:13px; color:var(--ink-soft); margin-top:2px; }

.formular input[type="text"],
.formular input[type="email"],
.formular input[type="password"],
.formular select{
  display:block; width:100%;
  font-family:inherit; font-size:16px; line-height:1.4; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:3px;
  padding:11px 13px;
}
.formular select{ height:44px; }
.formular input:focus, .formular select:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-tint);
}
.formular input::placeholder{ color:#A9B4C0; }

/* Zwei Felder in einer Zeile, unter 520px gestapelt */
.felder2{ display:grid; gap:18px; }
@media(min-width:520px){ .felder2{ grid-template-columns:1fr 1fr; } }

/* Kontrollkasten mit Beschriftung daneben, nicht darunter */
.haken{ display:flex; align-items:flex-start; gap:10px; font-size:15.5px; line-height:1.5; }
.haken input{ width:17px; height:17px; margin:3px 0 0; flex:0 0 auto; accent-color:var(--brand); }

/* Absendeknopf: ueber die ganze Breite, und ein Wartezustand.
   Fomantics .loading haengt an .ui.button und faellt mit ihm weg — der
   Ersatz ist eine eigene Klasse, die das Skript setzt. Ohne sie waere der
   Knopf nach dem Klick still, und der zweite Klick schickte die
   Registrierung ein zweites Mal. */
.btn.breit{ display:block; width:100%; text-align:center; }
.btn.laedt{ position:relative; color:transparent !important; pointer-events:none; }
.btn.laedt::after{
  content:''; position:absolute; top:50%; left:50%; width:18px; height:18px;
  margin:-9px 0 0 -9px; border-radius:50%;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation:dreht .7s linear infinite;
}
@keyframes dreht{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .btn.laedt::after{ animation-duration:2.4s; }
}

/* ---------- Kennzahlen ----------
   Grosse Zahl mit Beschriftung, in einer Reihe. Bewusst ohne Rahmen und
   ohne Flaeche: .card wuerde jede Zahl zu einem eigenen Gegenstand machen,
   und wo acht davon nebeneinander stehen, ist das ein Raster ohne Aussage.
   Die Trennlinie oben haelt die Reihe zusammen — dasselbe Mittel wie bei
   .fact im Hero, nur auf hellem Grund. */
.zahlen{ display:flex; flex-wrap:wrap; gap:2.4rem; padding-top:22px; border-top:1px solid var(--line); }
.zahl{ display:flex; flex-direction:column; gap:2px; }
.zahl b{ font-size:34px; font-weight:700; line-height:1; letter-spacing:-.02em;
         font-variant-numeric:tabular-nums; }
.zahl span{ font-size:12.5px; font-weight:500; letter-spacing:.07em; text-transform:uppercase;
            color:var(--faint); }
/* Anteil in Klammern hinter der absoluten Zahl. Klein und ruhig: die Zahl
   ist die Auskunft, der Anteil ordnet sie ein. */
.zahl .anteil{ font-size:15px; font-weight:500; letter-spacing:0; color:var(--ink-soft); }
/* Nicht --good und nicht #B60205: als 34px-Zahl wirken die Palettenfarben
   hart. Eine Stufe heller, Kontrast auf Weiss bleibt ueber 4:1 und damit
   fuer grossen Text ausreichend. */
.zahl.gut b{ color:#2E8B5F; }
.zahl.schlecht b{ color:#C2564E; }
.zahl.brand b{ color:var(--brand); }

/* ---------- Prüfliste ---------- */
.checks{ counter-reset:c; margin-top:6px; }
.check{
  counter-increment:c;
  position:relative; padding:16px 0 16px 46px;
  border-bottom:1px solid var(--line);
}
.check:last-child{ border-bottom:none; }
/* Aufzählungsmarke: kleiner Kreis mit Winkel statt Zahl.
   Als data-URI, damit die Markup-Struktur unberührt bleibt. Die Farbe ist
   fest %231E3A8A (= --brand); ein SVG im background erbt currentColor nicht. */
.check::before{
  content:'';
  position:absolute; left:0; top:17px;
  width:26px; height:26px; border-radius:50%;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E3A8A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9.5 5.5 6.5 6.5-6.5 6.5'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
  border:2px solid var(--accent);
}
.sec.tinted .check::before{ background-color:#fff; }
.check .q{ font-size:17.5px; font-weight:700; }
.check .a{ font-size:16px; color:var(--ink-soft); margin-top:4px; line-height:1.55; }
.check .a b{ color:var(--ink); font-weight:500; }

/* Hinweiskasten mit Kante — ersetzt bunte Fomantic-Messages */
.note{
  border-left:4px solid var(--accent);
  /* Die Flaeche kommt aus dem Akzent, damit sie zur Seite passt. Fest auf
     --brand-tint stand auf archivieren.html ein blaeulicher Kasten mitten in
     einer bordeauxroten Seite. Erste Zeile ist der Rueckfall ohne color-mix(). */
  background:var(--brand-tint);
  background:color-mix(in srgb, var(--accent) 7%, #fff);
  padding:16px 20px; margin-top:24px; font-size:16px; line-height:1.55;
}
.note.good{ border-left-color:var(--good); background:var(--good-tint); }
/* Weisser Kasten mit Rahmen statt getoenter Flaeche. Fuer Hinweise, die zu
   zweit untereinander stehen: zwei getoente Kaesten lesen sich als ein Block,
   einer davon in Weiss trennt sie. Der Akzent bleibt links, sonst waere es
   eine Karte und kein Hinweis — wie bei .card, nur liegend. */
.note.line{
  background:#fff; border:1px solid var(--line);
  border-left:4px solid var(--accent); border-radius:4px;
}
.note.warn{ border-left-color:#CA8A04; background:var(--warn-tint); }
.note .t{ font-weight:700; display:block; margin-bottom:3px; }

/* ---------- Kartenraster ---------- */
.cards{ display:grid; gap:16px; margin-top:26px; }
@media(min-width:768px){ .cards.three{ grid-template-columns:repeat(3,1fr); } .cards.two{ grid-template-columns:repeat(2,1fr); } }
.card{
  background:#fff; border:1px solid var(--line); border-top:3px solid var(--accent);
  border-radius:4px; padding:22px 24px;
}
.card.g{ border-top-color:var(--good); }
.card h3{ font-size:17.5px; font-weight:700; margin:0; }
.card p{ font-size:15.5px; color:var(--ink-soft); line-height:1.55; margin:7px 0 0; }

/* ---------- Aufzählung mit Häkchen ---------- */
ul.ticks{ list-style:none; margin:18px 0 0; padding:0; }
ul.ticks li{ position:relative; padding:7px 0 7px 30px; font-size:16.5px; line-height:1.5; }
ul.ticks li::before{
  content:'\2713'; position:absolute; left:0; top:7px;
  color:var(--good); font-weight:700; font-size:17px;
}
ul.ticks li b{ font-weight:700; }

/* ---------- Preis ---------- */
.price{ display:grid; gap:18px; margin-top:8px; }
@media(min-width:768px){ .price{ grid-template-columns:1fr 1fr; } }
.tarif{ background:#fff; border:1px solid var(--line); border-radius:5px; padding:26px 28px; }
.tarif.main{ border:2px solid var(--accent); }
.tarif .lbl{ font-size:12.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--accent); }
.tarif .big{ font-size:33px; font-weight:700; letter-spacing:-.02em; margin-top:9px; line-height:1.1; }
.tarif .sm{ font-size:15.5px; color:var(--ink-soft); margin-top:10px; line-height:1.55; }
/* Die Zeile unter dem Preis: Einheit und Steuerhinweis. Steht bei jedem
   Preis, nicht einmal im Kleingedruckten — netto anzuschreiben ist nur
   zulaessig, weil sich das Angebot an Unternehmer richtet, und dann muss es
   auch dort stehen, wo die Zahl steht. */
.tarif .je{ font-size:14px; color:var(--ink-soft); margin-top:7px; }

/* ---------- Tarifkarte mit Kaufknopf ----------
   .price traegt genau zwei Karten — das reicht fuer den Anreisser auf der
   Startseite. Die Preisseite zeigt Prepaid *und* jeden buchbaren Tarif aus
   config/pricing.php, heute drei, nach dem naechsten Tarif vier. Deshalb
   .price.auto: die Spaltenzahl folgt dem Katalog und nicht umgekehrt.
   .kauf ist der Fuss der Karte. flex-column plus margin-top:auto haelt ihn
   unten, damit die Knoepfe auf einer Linie sitzen, auch wenn ein Tarif einen
   Satz mehr Text traegt. */
@media(min-width:768px){ .price.auto{ grid-template-columns:repeat(auto-fit, minmax(258px,1fr)); } }
.price.auto .tarif{ display:flex; flex-direction:column; }
.kauf{ margin-top:auto; padding-top:20px; }
.kauf .btn{ display:block; width:100%; text-align:center; }
.kauf .btn + .btn{ margin-top:8px; }
/* Paketknopf: Menge links, Preis rechts. */
.kauf .btn.pack{ display:flex; align-items:center; justify-content:space-between; gap:14px; text-align:left; }
.kauf .btn.pack b{ font-weight:700; white-space:nowrap; }
/* ---------- Paketpreise und der eine Weg ----------
   Auf der Preisseite wird nicht gebucht: angemeldet wird kostenlos,
   nachgekauft wird im Kundenbereich. Die Paketpreise bleiben trotzdem
   sichtbar — sie sind die Auskunft, nach der jemand auf diese Seite kommt.
   Als Zeile, nicht als Knopf: ein Knopf verspricht eine Handlung. */
.pakete{ margin-top:auto; padding-top:20px; }
.paket{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:9px 0; border-top:1px solid var(--line);
  font-size:15.5px; color:var(--ink-soft);
}
.paket:first-child{ border-top:none; }
.paket b{ color:var(--ink); font-weight:700; white-space:nowrap; }

/* Der einzige Knopf im Tarifbereich, unter dem Raster statt in jeder
   Karte: Gewaehlt wird hier nichts, es geht genau einen Weg weiter. */
.weg{ margin-top:30px; }
.weg p{ font-size:15.5px; color:var(--ink-soft); line-height:1.55; margin:12px 0 0; max-width:62ch; }

/* Faerbt mit dem Thema, wie die uebrigen Knoepfe. */
.btn.line{ background:#fff; color:var(--accent); border-color:var(--line); }
.btn.line:hover{ border-color:var(--accent); opacity:1; }

/* ---------- Abschluss ---------- */
.close{ background:var(--hero-bg); color:#fff; padding:70px 0; }
.close-grid{ display:grid; gap:38px; }
@media(min-width:860px){ .close-grid{ grid-template-columns:1.15fr .85fr; gap:56px; } }
.close h2{ font-size:32px; font-weight:700; color:#fff; letter-spacing:-.02em; margin:0; max-width:20ch; }
.close p{ font-size:18px; color:rgba(255,255,255,.84); margin-top:14px; max-width:52ch; line-height:1.55; }

/* die drei Schritte zum Anfangen */
.howto{ counter-reset:h; list-style:none; margin:26px 0 0; padding:0; }
.howto li{
  counter-increment:h; position:relative; padding:9px 0 9px 40px;
  font-size:16.5px; color:#C9D6E8; line-height:1.5;
}
.howto li b{ color:#fff; font-weight:700; }
.howto li::before{
  content:counter(h); position:absolute; left:0; top:9px;
  width:25px; height:25px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.45); color:#fff;
  font-size:13px; font-weight:700; line-height:22px; text-align:center;
}
.close .btn-row{ margin-top:32px; }

/* Risikoabbau — der Kasten, der die Ausreden wegnimmt */
.reassure{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18);
  border-radius:5px; padding:24px 26px; align-self:start;
}
.r-head{
  font-size:12.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:rgba(255,255,255,.66); margin-bottom:14px;
}
.reassure ul{ list-style:none; margin:0; padding:0; }
.reassure li{
  position:relative; padding:9px 0 9px 26px; font-size:15.5px;
  color:rgba(255,255,255,.8); line-height:1.5; border-top:1px solid rgba(255,255,255,.1);
}
.reassure li:first-child{ border-top:none; }
.reassure li b{ color:#fff; font-weight:700; }
.reassure li::before{
  content:'\2713'; position:absolute; left:0; top:9px;
  color:#7FD4A6; font-weight:700; font-size:15px;
}
.r-foot{ margin-top:16px; font-size:13.5px; color:rgba(255,255,255,.55); }

/* ---------- Anschluss an den Bestand ----------
   Drei Stellen, an denen die neue Optik auf Vorhandenes trifft. Sie stehen
   hier und nicht als <style> in einer Seite, weil sie jede Seite dieser
   Site betreffen. */

/* Die aktive Seite in der Menueleiste. Das Bestandsmenue hatte dafuer
   Fomantics .active; die .topbar braucht eine eigene Marke. */
.topbar a.nav.active{ color:var(--ink); font-weight:500; }
/* validator.css setzt auf .footer-segment margin-top:80px, padding:40px 0
   und eine hellgraue Linie — jeweils mit !important. Die Datei bleibt
   unangetastet, weil xvalidator.de und xml-invoice.io ihre Fusszeile von
   dort beziehen; also wird hier mit gleicher Waffe zurueckgesetzt. Betroffen
   ist nur xml-rechnung.eu: nur diese Site laedt xml-rechnung.css. */
.footer-segment{
  margin-top:0 !important;
  padding:34px 0 46px !important;
  border-top:1px solid var(--line) !important;
}

/* Der Haftungsausschluss aus dem Bestand. Frueher eine graue
   Fomantic-Message; als Kasten faellt er staerker auf als der Inhalt, den
   er begleitet. Hier: kleiner Satz ueber der Fusszeile, ohne Flaeche. */
.legal{ padding:34px 0 0; }
.legal p{ font-size:13.5px; line-height:1.6; color:var(--ink-soft); margin:0 0 10px; max-width:92ch; }
.legal p:last-child{ margin-bottom:0; }
.legal b{ color:var(--ink); font-weight:500; }

/* ---------- Landingpage ----------
   Ein Ziel, ein Weg hinein. Der Besucher kommt aus dem Pruefergebnis auf
   xvalidator.de: Seine Rechnung ist gerade durchgegangen, er hat im selben
   Kasten gelesen, dass die Datei geloescht wird. Ueberzeugen muss man ihn
   nicht mehr, ihm fehlt das Konto — und jede Seite dazwischen kostet einen
   Teil davon. Deshalb steht das Formular im Hero und nicht hinter einem
   Knopf, und der Kopf traegt keine Themennavigation.
   Die Seite benutzt sonst die Bausteine der uebrigen Site; neu sind nur das
   Raster und der Schatten, der das weisse Formular auf der dunklen Flaeche
   haelt. */
.hero.lp{ padding:52px 0 60px; }
.hero.lp h1{ font-size:38px; max-width:19ch; }
/* Drei Bloecke in der Quelle: Text, Formular, Belege. Auf dem Telefon
   stapeln sie in genau dieser Reihenfolge — das Formular steht dann direkt
   unter der Ansage und nicht hinter vier Belegzeilen, durch die man erst
   scrollen muss. Auf dem Bildschirm rutscht das Formular in die rechte
   Spalte und ueber beide Zeilen, die Belege unter den Text. */
.lp-grid{ display:grid; gap:32px; }
@media(min-width:900px){
  .lp-grid{
    grid-template-columns:1.05fr .95fr; column-gap:54px; row-gap:34px;
    align-items:start;
  }
  .lp-text  { grid-column:1; grid-row:1; }
  .lp-form  { grid-column:2; grid-row:1 / span 2; }
  .lp-belege{ grid-column:1; grid-row:2; }
}
.lp-grid .formular{ box-shadow:0 18px 46px rgba(11,27,43,.28); }
/* Ueberschrift im Formularkasten. Auf register.html steht sie darueber im
   Fliesstext; hier liegt der Kasten auf dem Hero, und eine weisse Zeile
   ueber einem weissen Kasten waere zweimal dieselbe Ansage. */
.formular .titel{ font-size:20px; font-weight:700; margin:0; letter-spacing:-.01em; }
.formular .unter{ font-size:14.5px; color:var(--ink-soft); margin:5px 0 20px; line-height:1.5; }

/* ============================================================
   Nachschlagebereich /howto
   ------------------------------------------------------------
   Diese Seiten verkaufen nicht, sie erklaeren. Wer hier landet, kommt
   meistens aus einer Suchmaschine und sucht eine Auskunft — ein Hero
   mit Knopfpaar wuerde ihm die Antwort verstellen. Der Bereich bekommt
   seine Farbe deshalb nicht aus einer Dekorationsflaeche, sondern aus
   der Unternavigation: derselbe Ton wie auf den Themenseiten, aber auf
   einem Streifen, den man auch benutzt.
   ============================================================ */

/* ---------- Themenband ----------
   Liest --hero-bg aus body.thema-howto und kostet damit keine eigene
   Farbe. Sitzt direkt unter der Menueleiste; deren Fusslinie
   (box-shadow in --hero-rule) bildet den Uebergang. */
.subnav{ background:var(--hero-bg); }
.subnav .wrap{ display:flex; align-items:stretch; flex-wrap:wrap; gap:0 30px; }
.subnav a{
  display:block; padding:14px 0 11px;
  font-size:15px; color:rgba(255,255,255,.72); text-decoration:none;
  border-bottom:3px solid transparent;
}
.subnav a:hover{ color:#fff; }
/* Die aktive Seite steht weiss auf der Unterkante des Streifens: die
   Ortsangabe traegt damit das Band und nicht ein zweiter Farbton. */
.subnav a.active{ color:#fff; font-weight:500; border-bottom-color:#fff; }

/* ---------- Seitenkopf ohne Hero ----------
   Bereichsmarke, Titel, ein Satz. Keine Knoepfe: die Aktion steht am
   Fuss der Seite, wo sie nach dem Lesen hingehoert. */
.kopf{ padding:44px 0 0; }
.kopf .marke{
  font-size:12.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--accent);
}
/* Auf den Unterseiten ist die Marke der Weg zurueck zur Uebersicht. Sie
   sieht dabei aus wie die unverlinkte Marke daneben — ein blauer Link an
   dieser Stelle waere ein dritter Farbton im Kopf. */
.kopf .marke a{ color:inherit; text-decoration:none; }
.kopf .marke a:hover{ text-decoration:underline; }
.kopf h1{ font-size:37px; font-weight:700; line-height:1.15; letter-spacing:-.025em;
          margin:11px 0 0; max-width:24ch; }
.kopf .lead{ font-size:18.5px; line-height:1.55; color:var(--ink-soft);
             margin:13px 0 0; max-width:62ch; }

/* Sprungmarken — nur auf den langen Nachschlageseiten, wo die Seite
   laenger ist als der Bildschirm. */
.sprung{ margin-top:22px; font-size:15px; color:var(--faint); }
.sprung a{ text-decoration:none; }
.sprung a:hover{ text-decoration:underline; }
.sprung i{ font-style:normal; margin:0 9px; }
/* Dieselbe Zeile im Hero. Die helle Fassung waere dort unlesbar. */
.hero .sprung{ color:rgba(255,255,255,.5); margin-top:30px; }
.hero .sprung a{ color:rgba(255,255,255,.85); }
.hero .sprung a:hover{ color:#fff; }
/* Angesprungene Abschnitte nicht buendig unter die Menueleiste setzen. */
.sec[id]{ scroll-margin-top:16px; }

/* ---------- Artikel ----------
   Der Fliesstext der Erklaerseiten. Traegt Ueberschriften, Absaetze,
   Listen, Tabellen und Codeschnipsel selbst, damit in den Vorlagen kein
   style="" mehr stehen muss. Die Zeilenlaenge ist begrenzt: 68 Zeichen
   liest sich, eine Zeile ueber die volle Containerbreite nicht. */
.artikel{ padding:24px 0 76px; }
.artikel h2{
  font-size:26px; font-weight:700; letter-spacing:-.02em; line-height:1.25;
  margin:54px 0 16px; padding-bottom:11px; border-bottom:1px solid var(--line);
  max-width:68ch; scroll-margin-top:20px;
}
.artikel > h2:first-child{ margin-top:0; }
.artikel h2 a{ color:inherit; text-decoration:none; }
.artikel h2 a:hover{ color:var(--accent); }
.artikel h3{ font-size:19px; font-weight:700; margin:32px 0 8px; letter-spacing:-.01em;
             scroll-margin-top:20px; }
.artikel p{ font-size:17px; line-height:1.7; margin:0 0 16px; max-width:68ch; }
.artikel ul{ margin:12px 0 20px; padding-left:22px; font-size:17px; line-height:1.7; max-width:68ch; }
.artikel li{ margin-bottom:7px; }
.artikel code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:14.5px; background:var(--tint); border:1px solid var(--line);
  border-radius:3px; padding:1px 5px; overflow-wrap:anywhere;
}
/* Kennwerte unter einem Abschnitt: Syntax, Version, Herausgeber. Steht
   als eine ruhige Zeile da, nicht als vierte Liste auf der Seite. */
.artikel .kennwert{ font-size:15.5px; color:var(--ink-soft); }

/* ---------- Tabellen ----------
   Eigenstaendig statt .ui.celled.table: Fomantics Tabelle bringt ihre
   eigene Schrift und ihren eigenen Rahmen mit und sieht neben dem
   uebrigen Text wie ein Fremdkoerper aus. Der Kasten scrollt waagerecht,
   damit auf dem Telefon die Seite ruhig bleibt und die Tabelle wandert. */
/* Gehaengt an .tbl, nicht an .artikel: Der Kasten markiert "hier steht
   eine Tabelle" und wird auch ausserhalb des Nachschlagebereichs
   gebraucht — die Dienstetabelle auf der Rechtsseite etwa. */
.tbl{ overflow-x:auto; margin:16px 0 28px; }
.tbl table{ border-collapse:collapse; width:100%; font-size:15.5px; line-height:1.5; }
.tbl th{
  text-align:left; font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-soft); background:var(--tint); white-space:nowrap;
  padding:10px 13px; border-bottom:1px solid var(--line);
}
.tbl td{ padding:9px 13px; border-bottom:1px solid var(--line); vertical-align:top; }
.tbl tbody tr:hover{ background:#FAFCFF; }
/* Eine getoente Sektion faerbt den Kopf sonst wie ihren eigenen Grund. */
.sec.tinted .tbl th{ background:#EAEFF5; }

/* ---------- Weiterlesen ----------
   Am Fuss jeder Seite die Nachbarn. Der Bereich ist in erster Linie
   Sucheinstieg: wer ueber "Was ist ZUGFeRD" hereinkommt, landet mitten
   im Bestand und braucht einen Weg weiter, nicht nur einen zurueck. */
.weiter{ margin-top:62px; padding-top:28px; border-top:1px solid var(--line); }
.weiter .t{
  font-size:12.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--faint);
}
.weiter .cards{ margin-top:16px; }
.weiter .card h3 a{ color:inherit; text-decoration:none; }
.weiter .card h3 a:hover{ color:var(--accent); }

/* ---------- Abschluss im Nachschlagebereich ----------
   Schmaler als der .close der Produktseiten: eine Spalte, ein Absatz,
   das Knopfpaar. Der Risikokasten gehoert auf die Seiten, die verkaufen
   — hier waere er der Verkaufsblock, den man beim Nachschlagen nicht
   sucht. Weg darf er trotzdem nicht: dies ist die einzige Stelle, an
   der der Bereich zeigt, dass es zu der Erklaerung auch etwas gibt. */
.close.schmal{ padding:56px 0; }
.close.schmal h2{ font-size:27px; max-width:26ch; }
.close.schmal p{ font-size:17px; max-width:58ch; }

/* ---------- Mobil ---------- */
@media(max-width:767px){
  #probe.zeigt-ergebnis{ padding-top:26px; }
  .vorschau iframe{ height:min(64vh, 520px); min-height:320px; }
  /* Werte wie eine IBAN passen neben der Bezeichnung nicht mehr in eine
     Zeile — auf dem Telefon steht der Wert deshalb darunter. */
  .angabe{ flex-direction:column; gap:2px; }
  .angabe .w{ text-align:left; }
  .hero.lp{ padding:38px 0 44px; }
  .hero.lp h1{ font-size:29px; }
  .subnav .wrap{ gap:0 22px; }
  .subnav a{ font-size:14.5px; padding:12px 0 9px; }
  .kopf{ padding:32px 0 0; }
  .kopf h1{ font-size:28px; }
  .kopf .lead{ font-size:17px; }
  .artikel{ padding:28px 0 56px; }
  .artikel h2{ font-size:22px; margin:42px 0 13px; }
  .close.schmal{ padding:44px 0; }
  .close.schmal h2{ font-size:23px; }
  .hero{ padding:56px 0 52px; }
  .hero h1{ font-size:32px; }
  .hero .lead{ font-size:17.5px; }
  .shot.ueberlappt{ margin-top:-28px; }
  .sec .shot{ margin:22px 0 26px; }
  .fact{ flex:1 1 100%; padding:14px 0 0 0; border-left:none; border-top:1px solid rgba(255,255,255,.2); margin-top:14px; }
  .fact:first-child{ border-top:none; margin-top:0; padding-top:0; }
  .sec{ padding:48px 0; }
  .sec-head{ gap:13px; }
  .sec-num{ width:36px; height:36px; line-height:36px; font-size:17px; }
  .sec-head h2{ font-size:23px; }
  .upload{ margin-top:-24px; padding:22px; }
}

/* ---------- Offene Stellen in den Rechtstexten ----------
   Markiert Passagen, die vor der Veroeffentlichung noch geklaert werden
   muessen. Bewusst auffaellig: sie sollen beim Lesen stoeren. Sind alle
   Stellen abgearbeitet, koennen Regel und Absaetze ersatzlos weg. */
.hinweis{
  border-left:3px solid #C0873F; background:#FDF6EC;
  padding:12px 16px; margin:18px 0; border-radius:0 6px 6px 0;
  font-size:15.5px; line-height:1.6; color:#6B4E21;
}