/* ==========================================================================
   shop-formulare.de

   Namensschema: ein Praefix, einfache Bindestriche. Die sechs Schwesterseiten
   nutzen alle BEM mit __ und --; hier steht bewusst etwas anderes, damit sich
   Markup und Stylesheet unterscheiden und nicht nur die Woerter.

   Reihenfolge in dieser Datei:
     1 Grundlagen      2 Aufbau        3 Kopf und Fuss
     4 Abschnitte      5 Bausteine     6 Nachbauten
     7 Breiten-Abfragen  ← IMMER GANZ UNTEN

   Zu 7: eine Media Query erhoeht die Spezifitaet NICHT. Eine Basisregel, die
   nach der Abfrage steht, gewinnt auf jeder Breite. Deshalb stehen alle
   Breiten-Abfragen am Ende der Datei und nirgends dazwischen.
   ========================================================================== */

:root {
  --fm-ton:        #4c3fb5;
  --fm-ton-tief:   #372a92;
  --fm-ton-hell:   #eeecfb;
  --fm-ton-rand:   #d3cdf3;
  --fm-tinte:      #1a1834;
  --fm-grau:       #565472;
  --fm-grau-hell:  #f5f4fa;
  --fm-linie:      #e3e1ee;
  --fm-weiss:      #fff;
  --fm-warn:       #9a5b00;
  --fm-warn-hell:  #fdf5e8;
  --fm-schrift:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fm-fest:       ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --fm-verlauf:    linear-gradient(168deg, #f4f2fd 0%, #fafaff 46%, #fff 100%);
}

/* --- 1 Grundlagen -------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fm-weiss);
  color: var(--fm-grau);
  font-family: var(--fm-schrift);
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

/* overflow-wrap: ein einzelnes langes Wort muss brechen duerfen. Ohne das
   sprengt "Verbraucherstreitbeilegung/Universalschlichtungsstelle" im
   Impressum die Seite auf 636 px bei 360 px Fensterbreite - gemessen. */
h1, h2, h3, h4 { color: var(--fm-tinte); margin: 0; line-height: 1.18; letter-spacing: -0.021em; overflow-wrap: break-word; }
h1 { font-size: 43px; font-weight: 800; }
h2 { font-size: 31px; font-weight: 800; }
h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.012em; }
h4 { font-size: 16.5px; font-weight: 700; letter-spacing: 0; }

p { margin: 0 0 18px; overflow-wrap: break-word; }
/* Ueberschriften haben margin 0; der erste Absatz danach braucht Luft. */
h1 + p, h2 + p, h3 + p { margin-top: 14px; }
p:last-child { margin-bottom: 0; }
b, strong { color: var(--fm-tinte); font-weight: 700; }
a { color: var(--fm-ton); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; height: auto; }
code, kbd { font-family: var(--fm-fest); font-size: 0.92em; }

/* --- 2 Aufbau ------------------------------------------------------------ */

.fm-spur { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 26px; }

.fm-zone { padding: 78px 0; }
.fm-zone-hell { background: var(--fm-grau-hell); }
.fm-zone-ton { background: var(--fm-ton-hell); }
.fm-zone-verlauf { background: var(--fm-verlauf); }
.fm-zone-schmal { padding: 54px 0; }

/* --- 3 Kopf und Fuss ----------------------------------------------------- */

.fm-kopf {
  border-bottom: 1px solid var(--fm-linie);
  background: var(--fm-weiss);
  position: sticky;
  top: 0;
  z-index: 20;
}
.fm-kopf-reihe { display: flex; align-items: center; gap: 26px; height: 62px; }
.fm-marke-logo { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; color: var(--fm-tinte); }
.fm-marke-logo:hover { text-decoration: none; }
.fm-marke-zeichen {
  width: 25px; height: 25px; border-radius: 7px; flex: 0 0 auto;
  background: var(--fm-ton); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
}
.fm-nav { display: flex; align-items: center; gap: 19px; margin-left: auto; min-width: 0; }
.fm-nav a { color: var(--fm-grau); font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.fm-nav a:hover { color: var(--fm-ton); text-decoration: none; }
.fm-nav a[aria-current="page"] { color: var(--fm-ton); }
.fm-kopf-rechts { display: flex; align-items: center; gap: 15px; flex: 0 0 auto; }
.fm-kopf-rechts a { color: var(--fm-grau); font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.fm-kopf-demo { color: var(--fm-ton-tief); }
.fm-kopf-rechts a:hover { text-decoration: none; }

.fm-fuss { border-top: 1px solid var(--fm-linie); padding: 40px 0; font-size: 14px; color: var(--fm-grau); }
.fm-fuss-reihe { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; justify-content: space-between; }

/* --- 4 Abschnitte -------------------------------------------------------- */

/* Kopfzeile eines Abschnitts. Bewusst ein <header> mit <p>+<h2>, waehrend die
   Schwesterseiten dafuer verschachtelte <div> nutzen. */
.fm-titelzeile { max-width: 760px; margin: 0 auto 44px; text-align: center; }
.fm-titelzeile p { margin: 16px 0 0; font-size: 17px; }

.fm-schild {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--fm-weiss); border: 1px solid var(--fm-ton-rand); border-radius: 999px;
  padding: 8px 16px 8px 14px;
  font-size: 13px; font-weight: 800; color: var(--fm-tinte);
  margin-bottom: 20px;
}
.fm-schild i { width: 7px; height: 7px; border-radius: 50%; background: var(--fm-ton); display: block; }

.fm-krume { font-size: 13.5px; margin-bottom: 26px; color: var(--fm-grau); }
.fm-krume a { color: var(--fm-grau); }
.fm-krume-teil { margin: 0 8px; opacity: 0.45; }
.fm-krume-hier { color: var(--fm-tinte); font-weight: 600; }

/* --- 5 Bausteine --------------------------------------------------------- */

.fm-raster { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fm-raster-1 { grid-template-columns: minmax(0, 1fr); max-width: 700px; margin: 0 auto; }
.fm-raster-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fm-raster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fm-raster-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Karten sind <article>, nicht <div>. */
.fm-karte {
  background: var(--fm-weiss); border: 1px solid var(--fm-linie); border-radius: 13px;
  padding: 22px 22px 24px; min-width: 0;
}
.fm-karte h3 { margin-bottom: 8px; }
/* Die Anzahl neben einer Ueberschrift, z. B. "Eingabe 23". */
.fm-zahl { display: inline-block; margin-left: 6px; background: var(--fm-ton-hell); color: var(--fm-ton-tief); border-radius: 6px; padding: 2px 8px; font-size: 12.5px; font-weight: 800; vertical-align: middle; }
.fm-leer { color: var(--fm-grau); opacity: 0.6; }
.fm-karte p { font-size: 15px; }

/* Nummerierte Ablaeufe sind <ol>/<li>, nicht <div>-Ketten. */
.fm-stufen { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(5, minmax(0, 1fr)); counter-reset: fmstufe; }
.fm-stufen li {
  background: var(--fm-weiss); border: 1px solid var(--fm-linie); border-radius: 13px;
  padding: 20px 18px 22px; min-width: 0;
}
.fm-stufen-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fm-stufen-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fm-stufe-nr { display: block; font-family: var(--fm-fest); font-size: 12.5px; font-weight: 700; color: var(--fm-ton); margin-bottom: 12px; }
.fm-stufe-kopf { display: block; font-weight: 700; color: var(--fm-tinte); margin-bottom: 7px; font-size: 16px; }
.fm-stufe-text { display: block; font-size: 14.5px; }

.fm-knopf {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--fm-ton); color: #fff; border-radius: 10px;
  padding: 12px 20px; font-size: 15px; font-weight: 700;
}
.fm-knopf:hover { background: var(--fm-ton-tief); text-decoration: none; }
.fm-knopf-leise { background: var(--fm-weiss); color: var(--fm-tinte); border: 1px solid var(--fm-linie); }
.fm-knopf-leise:hover { background: var(--fm-grau-hell); }

.fm-merke {
  background: var(--fm-ton-hell); border: 1px solid var(--fm-ton-rand); border-radius: 12px;
  padding: 18px 20px; font-size: 15px;
}
.fm-raster + .fm-merke, .fm-stufen + .fm-merke, .fm-lauf + .fm-merke { margin-top: 22px; }
.fm-merke-warn { background: var(--fm-warn-hell); border-color: #f0dfc2; }

.fm-lauf { overflow-x: auto; }
.fm-tafel { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.fm-tafel-breit { table-layout: fixed; }
/* table-layout: fixed nimmt die Breiten aus der ERSTEN Zeile, also aus dem
   thead - deshalb stehen sie dort und nicht an den Zellen des Rumpfes. */
.fm-tafel-breit thead th:first-child { width: 250px; }
.fm-tafel-breit thead th + th { width: calc((100% - 250px) / 3); }
.fm-tafel th { text-align: left; font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--fm-grau); font-weight: 800; padding: 0 14px 10px 0; border-bottom: 1px solid var(--fm-linie); }
.fm-tafel td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--fm-linie); vertical-align: top; }
.fm-tafel tr:last-child td, .fm-tafel tr:last-child th[scope="row"] { border-bottom: 0; }
.fm-tafel td:first-child { color: var(--fm-tinte); font-weight: 600; }

/* Die Vergleichstafel. Die eigene Spalte ist hinterlegt, damit klar ist, wer
   hier spricht - nicht damit sie besser aussieht. */
.fm-tafel-breit { min-width: 760px; }
.fm-tafel-breit th[scope="row"] { text-align: left; font-size: 14px; width: 250px; text-transform: none; letter-spacing: 0; color: var(--fm-tinte); font-weight: 600; padding: 12px 18px 12px 0; vertical-align: top; }
.fm-tafel-breit td { vertical-align: top; }
.fm-tafel-eigen { background: var(--fm-ton-hell); }
.fm-tafel-breit thead .fm-tafel-eigen { color: var(--fm-ton-tief); border-bottom-color: var(--fm-ton-rand); }
.fm-tafel-wert { display: flex; gap: 8px; align-items: flex-start; line-height: 1.45; }
.fm-tafel-zeichen { flex: 0 0 auto; margin-top: 3px; }
.fm-wert-y { color: #2c6b46; }
.fm-wert-p { color: var(--fm-warn); }
.fm-wert-n { color: #9a2f26; }
.fm-wert-i { color: var(--fm-grau); }
.fm-tafel-wert span { color: var(--fm-grau); }
.fm-wert-y span, .fm-wert-p span, .fm-wert-n span { color: var(--fm-tinte); }

.fm-nur-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* --- 6 Nachbauten -------------------------------------------------------- */

/* Der Fuss traegt vier Spalten mit Listen. Die Regeln haengen am Fuss, damit
   kein weiterer Klassenname noetig ist, den es nur einmal gaebe. */
.fm-fuss-titel { margin: 0 0 12px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fm-grau); }
.fm-fuss ul { list-style: none; margin: 0; padding: 0; }
.fm-fuss li { margin-bottom: 8px; }
.fm-fuss li a { color: var(--fm-grau); }
.fm-fuss li a:hover { color: var(--fm-ton); text-decoration: none; }
.fm-fuss p { font-size: 14px; }
.fm-fuss img { margin-top: 14px; opacity: 0.82; }
.fm-fuss .fm-marke-logo { margin-bottom: 12px; }
.fm-fuss-reihe { margin: 34px 0 0; padding-top: 22px; border-top: 1px solid var(--fm-linie); font-size: 13.5px; }
.fm-fuss-reihe a { color: var(--fm-grau); }
.fm-fuss .fm-raster-4 { gap: 26px 20px; }

/* Nachbau 1: die Gliederung, wie der Admin den Elementbaum zeigt. Bewusst eine
   Tabelle - im Admin ist es auch eine, und die Einrueckung traegt Bedeutung. */
.fm-baum { border: 1px solid var(--fm-linie); border-radius: 13px; overflow: hidden; background: var(--fm-weiss); }
.fm-baum-kopf { display: flex; align-items: center; gap: 9px; padding: 13px 18px; border-bottom: 1px solid var(--fm-linie); background: var(--fm-grau-hell); font-size: 13px; font-weight: 700; color: var(--fm-tinte); }
.fm-baum table { width: 100%; border-collapse: collapse; font-size: 14px; }
.fm-baum th { text-align: left; font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--fm-grau); font-weight: 800; padding: 11px 14px; border-bottom: 1px solid var(--fm-linie); }
.fm-baum td { padding: 10px 14px; border-bottom: 1px solid var(--fm-linie); vertical-align: middle; }
.fm-baum tr:last-child td { border-bottom: 0; }
.fm-baum-nr { font-family: var(--fm-fest); font-size: 12px; color: var(--fm-grau); white-space: nowrap; }
.fm-baum-name { color: var(--fm-tinte); font-weight: 600; }
.fm-baum-breite { font-family: var(--fm-fest); font-size: 12.5px; color: var(--fm-grau); white-space: nowrap; }
/* Die Einrueckung sagt, worin ein Element liegt. Drei Ebenen reichen - tiefer
   geht die Hierarchie des Plugins nicht: Gruppe, Zeile, Element. */
.fm-baum-e2 .fm-baum-name { padding-left: 18px; }
.fm-baum-e3 .fm-baum-name { padding-left: 36px; }
.fm-baum-art { display: inline-block; border-radius: 6px; padding: 3px 9px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.fm-baum-struktur { background: var(--fm-ton-hell); color: var(--fm-ton-tief); }
.fm-baum-inhalt { background: #eef4ee; color: #2c6b46; }
.fm-baum-feld { background: var(--fm-grau-hell); color: var(--fm-tinte); }

/* Nachbau 2: das Formular, wie es die Storefront ausgibt. Keine echten
   Eingabefelder - die Seite sammelt nichts ein, also stehen hier auch keine
   input-Elemente, die man ausfuellen koennte. */
.fm-form { border: 1px solid var(--fm-linie); border-radius: 13px; background: var(--fm-weiss); padding: 20px 20px 22px; }
.fm-form-gruppe { border: 0; margin: 0 0 18px; padding: 0; }
.fm-form-gruppe:last-child { margin-bottom: 0; }
.fm-form-legende { display: block; font-size: 15px; font-weight: 700; color: var(--fm-tinte); margin-bottom: 12px; padding-bottom: 9px; border-bottom: 1px solid var(--fm-linie); width: 100%; }
.fm-form-zeile { display: grid; gap: 12px; grid-template-columns: repeat(12, minmax(0, 1fr)); margin-bottom: 12px; }
.fm-form-zeile:last-child { margin-bottom: 0; }
/* Alle sechs Breiten des Plugins, auch die derzeit ungenutzten: 12, 9, 8,
   6, 4, 3. Ein Beispiel darf jederzeit eine davon verwenden. */
.fm-sp3  { grid-column: span 3; }
.fm-sp4  { grid-column: span 4; }
.fm-sp6  { grid-column: span 6; }
.fm-sp8  { grid-column: span 8; }
.fm-sp9  { grid-column: span 9; }
.fm-sp12 { grid-column: span 12; }
.fm-form-feld { min-width: 0; }
.fm-form-marke { display: block; font-size: 12.5px; font-weight: 600; color: var(--fm-tinte); margin-bottom: 5px; }
/* Die Breite als Zahl am Feld - nur im Raster-Nachbau, sonst nirgends. */
.fm-form-wert { display: inline-block; margin-left: 5px; font-family: var(--fm-fest); font-size: 11px; font-weight: 700; color: var(--fm-ton); background: var(--fm-ton-hell); border-radius: 4px; padding: 1px 6px; }
.fm-form-pflicht { color: #b3261e; }
.fm-form-kasten { border: 1px solid var(--fm-linie); border-radius: 8px; background: var(--fm-weiss); padding: 9px 11px; font-size: 13.5px; color: #8b89a3; min-height: 38px; }
.fm-form-kasten-hoch { min-height: 74px; }
/* Ein Feld, das die Pruefung nicht bestanden hat. */
.fm-form-kasten-fehler { border-color: #d9736a; background: #fdf7f6; color: var(--fm-tinte); }
.fm-form-fehler { display: block; margin-top: 5px; font-size: 12px; color: #9a2f26; }
.fm-form-wahl { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fm-form-wahl::after { content: ""; width: 0; height: 0; flex: 0 0 auto; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--fm-grau); }
.fm-form-gewaehlt { color: var(--fm-tinte); }
.fm-form-schiene { height: 4px; border-radius: 2px; background: var(--fm-ton-rand); margin: 17px 0; position: relative; }
.fm-form-griff { position: absolute; top: 50%; width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; border-radius: 50%; background: var(--fm-ton); }
/* Die Position des Griffs ist der Messwert. Als Klasse, nicht als style-Attribut. */
.fm-form-griff-1 { left: 10%; }
.fm-form-griff-2 { left: 20%; }
.fm-form-griff-3 { left: 30%; }
.fm-form-griff-4 { left: 40%; }
.fm-form-griff-5 { left: 50%; }
.fm-form-griff-6 { left: 60%; }
.fm-form-griff-7 { left: 70%; }
.fm-form-griff-8 { left: 80%; }
.fm-form-griff-9 { left: 90%; }
.fm-form-griff-10 { left: 100%; }
/* Einzelauswahl: drei Optionen, eine gefuellt. */
.fm-form-runden { list-style: none; margin: 0; padding: 4px 0 0; font-size: 13.5px; }
.fm-form-runden li { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--fm-grau); }
.fm-form-runden li:last-child { margin-bottom: 0; }
.fm-form-runden i { flex: 0 0 auto; width: 14px; height: 14px; border: 1px solid var(--fm-linie); border-radius: 50%; display: block; }
/* Mehrfachauswahl: dieselbe Liste, aber eckig und mit Haken. */
.fm-form-kaesten i { border-radius: 4px; }
.fm-form-kaesten .fm-form-kasten-an { border-color: var(--fm-ton); background: var(--fm-ton); position: relative; }
.fm-form-kaesten .fm-form-kasten-an::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* Der Typselektor in der Zeile darueber traegt eine Klasse UND einen Typ.
   Eine reine Klassenregel verliert dagegen - deshalb steht hier beides. */
.fm-form-runden i.fm-form-rund-an { border-color: var(--fm-ton); border-width: 4px; }
.fm-form-haken { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; }
.fm-form-haken i { flex: 0 0 auto; width: 16px; height: 16px; border: 1px solid var(--fm-linie); border-radius: 4px; margin-top: 2px; display: block; }
/* Upload-Feld: gestrichelt, damit es sich von einem Eingabefeld unterscheidet. */
.fm-form-ablage { border: 1px dashed var(--fm-ton-rand); border-radius: 8px; background: var(--fm-ton-hell); padding: 13px 12px; font-size: 13px; color: var(--fm-grau); text-align: center; }
.fm-form-ablage b { display: block; color: var(--fm-tinte); font-size: 13.5px; margin-bottom: 2px; }

/* Der Merker an einem Feld, das an einer Bedingung haengt. */
.fm-form-regel { display: inline-block; margin-left: 6px; background: var(--fm-grau-hell); color: var(--fm-grau); border: 1px solid var(--fm-linie); border-radius: 5px; padding: 1px 7px; font-size: 11px; font-weight: 600; vertical-align: middle; }

.fm-form-melden { border-radius: 9px; padding: 11px 13px; font-size: 13.5px; }
.fm-melden-warn { background: var(--fm-warn-hell); border: 1px solid #f0dfc2; color: var(--fm-warn); }
.fm-melden-gut { background: #edf6f0; border: 1px solid #cfe6d8; color: #2c6b46; }
/* Vier Meldungsarten kennt das Plugin; nb_formular() waehlt ueber 'ton'.
   Gruen und Gelb kommen derzeit vor, Blau und Rot bleiben stehen - sie sind
   Teil desselben Wertebereichs, nicht toter Code. */
.fm-melden-info { background: #eef3fa; border: 1px solid #d3e0f0; color: #2b5480; }
.fm-melden-fehler { background: #fdf0ef; border: 1px solid #f2d5d2; color: #9a2f26; }
.fm-form-zeile + .fm-form-melden { margin-top: 4px; }
.fm-form-knopf { display: inline-block; background: var(--fm-ton); color: #fff; border-radius: 8px; padding: 10px 18px; font-size: 14px; font-weight: 700; }

/* Zwei Zustaende nebeneinander: dasselbe Formular, eine andere Auswahl. */
.fm-paar { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fm-paar-kopf { display: flex; align-items: baseline; gap: 9px; margin-bottom: 11px; font-size: 13.5px; }
.fm-paar-kopf b { font-size: 14px; }

/* Nachbau 3: die Einsendungen im Admin. */
.fm-liste { border: 1px solid var(--fm-linie); border-radius: 13px; overflow: hidden; background: var(--fm-weiss); }
.fm-liste table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.fm-liste th { text-align: left; font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--fm-grau); font-weight: 800; padding: 11px 14px; border-bottom: 1px solid var(--fm-linie); background: var(--fm-grau-hell); white-space: nowrap; }
.fm-liste td { padding: 11px 14px; border-bottom: 1px solid var(--fm-linie); }
.fm-liste tr:last-child td { border-bottom: 0; }
.fm-liste td:first-child { color: var(--fm-tinte); font-weight: 600; }
/* Kurze Werte stehen besser in einer Zeile, laengere brauchen den Umbruch.
   Deshalb die Ausnahme statt einer Regel fuer alle. */
.fm-liste-umbruch td { white-space: normal; }
.fm-liste-kontext { font-family: var(--fm-fest); font-size: 12px; color: var(--fm-grau); }

/* Rechtstexte: eine Spalte, ruhig gesetzt, mit Luft zwischen den Absaetzen. */
.fm-recht { max-width: 780px; }
.fm-recht h2 { font-size: 24px; margin: 40px 0 14px; }
.fm-recht h3 { font-size: 18px; margin: 30px 0 10px; }
.fm-recht ul { margin: 0 0 18px; padding-left: 22px; }
.fm-recht li { margin-bottom: 9px; }
.fm-quelle { margin-top: 34px; font-size: 13px; color: var(--fm-grau); }

/* Das Glossar: Begriff und Erklaerung nebeneinander, nicht untereinander. */
.fm-glossar { margin: 0; }
.fm-glossar-paar { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--fm-linie); }
.fm-glossar-paar:last-child { border-bottom: 0; }
.fm-glossar dt { color: var(--fm-tinte); font-weight: 700; font-size: 16px; }
.fm-glossar dd { margin: 0; }

/* Die Bildunterschrift sagt, was der Nachbau ist - und dass er einer ist. */
.fm-unterschrift { margin: 11px 0 0; font-size: 13px; color: var(--fm-grau); }

/* Senkrechter Takt innerhalb eines Abschnitts. Bewusst als Nachbarschafts-
   Regeln und nicht als "jedes Kind bekommt margin-top": eine solche
   Sammelregel haette auch den Kopfbereich getroffen, wo die Abstaende schon
   stimmen. */
.fm-unterschrift + .fm-raster,
.fm-unterschrift + .fm-paar,
.fm-unterschrift + p,
.fm-raster + .fm-paar,
.fm-raster + p,
.fm-paar + .fm-raster,
.fm-liste + .fm-raster,
.fm-raster + .fm-form,
.fm-raster + .fm-baum,
.fm-raster + .fm-liste,
.fm-lauf + .fm-raster { margin-top: 32px; }

/* In Karten mit weiterfuehrendem Link steht der Link unten, sonst haengt er
   je nach Textlaenge auf einer anderen Hoehe als beim Nachbarn. */
.fm-karte { display: flex; flex-direction: column; }
.fm-karte-fuss { margin-top: auto; padding-top: 12px; }

/* --- 6b Der Hero ---------------------------------------------------------
   Zwei Spalten: links der Text, rechts die Buehne. Die Buehne zeigt in einem
   Bild, worum es geht - oben der Elementbaum aus der Administration, unten das
   Formular, das daraus wird. Ein Screenshot waere schaerfer, altert aber mit
   jeder Oberflaechenaenderung; das hier altert mit dem Plugin. */

.fm-held { display: grid; gap: 52px; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); align-items: center; }
.fm-held h1 { margin-bottom: 0; }
/* Das Schild steht in der H1, damit sie sagt, was das Produkt ist - es sieht aus wie vorher */
.fm-held h1 .fm-schild { display: flex; width: fit-content; max-width: 100%; letter-spacing: normal; line-height: 1.62; overflow-wrap: normal; }
.fm-held-titel { display: block; }
/* Die zwei Textlinks unter den Knoepfen fuehren in die Seite hinein; die
   Knoepfe darueber fuehren hinaus, zu Store und Demoshop. */
.fm-held-weiter { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 14px; font-size: 14px; font-weight: 600; }
/* Der Hero traegt die Buehne und wird dadurch hoch. Weniger Polster, damit der
   naechste Abschnitt noch angeschnitten ist und zum Weiterlesen einlaedt. */
.fm-zone-held { padding: 56px 0 62px; }

/* Die Zahlen unter den Knoepfen: eine Zeile, durch Punkte getrennt. Keine
   Pillen - die sehen aus wie anklickbare Filter und lenken vom Knopf ab. */
.fm-belege { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; margin: 24px 0 0; font-size: 14px; color: var(--fm-grau); }
.fm-belege a { color: var(--fm-grau); }
.fm-belege a:hover { color: var(--fm-ton); text-decoration: none; }
.fm-belege b { color: var(--fm-ton-tief); font-size: 17px; font-weight: 800; }
.fm-belege-teil { width: 4px; height: 4px; border-radius: 50%; background: var(--fm-linie); display: inline-block; }

/* Die Buehne selbst: eine Karte, die aussieht wie ein Formular in der
   Storefront. Kein Admin-Fenster und kein Pfeil - im Hero soll stehen, was der
   Kunde sieht, nicht wie es gebaut wird. */
.fm-buehne .fm-form { box-shadow: 0 20px 48px -28px rgba(26, 24, 52, 0.45); }

/* Enger gesetzt als der grosse Nachbau, damit mehr Elemente hineinpassen. */
.fm-buehne .fm-form { padding: 20px 20px 22px; }
.fm-buehne .fm-form-legende { font-size: 14px; margin-bottom: 13px; padding-bottom: 9px; }
.fm-buehne .fm-form-marke { font-size: 11.5px; margin-bottom: 4px; }
.fm-buehne .fm-form-kasten { padding: 7px 10px; font-size: 12.5px; min-height: 33px; }
.fm-buehne .fm-form-zeile { gap: 10px; margin-bottom: 11px; }
.fm-buehne .fm-form-melden { padding: 9px 11px; font-size: 12px; margin-bottom: 11px; }
.fm-buehne .fm-form-regel { font-size: 10px; padding: 1px 6px; }
.fm-buehne .fm-form-ablage { padding: 8px 10px; font-size: 12px; }
/* Zwei Zeilen hoch, damit das Nachrichtenfeld als Textfeld lesbar ist. Die
   Regel muss die Buehnen-Klasse mitnennen, sonst gewinnt deren min-height
   von 33px - zwei Klassen schlagen eine. */
.fm-buehne .fm-form-kasten.fm-form-kasten-zwei { min-height: 52px; }
.fm-buehne .fm-form-schiene { margin: 14px 0 10px; }
.fm-buehne .fm-form-haken { font-size: 12.5px; }
.fm-buehne .fm-form-knopf { padding: 9px 16px; font-size: 13px; }

/* --- 6c Weitere Nachbauten ------------------------------------------------ */

/* Schematische Seite: ein Shop-Ausschnitt, an dem sich zeigen laesst, WO ein
   Formular steht. Bewusst grob - es geht um die Stelle, nicht um das Aussehen. */
.fm-seite { border: 1px solid var(--fm-linie); border-radius: 13px; overflow: hidden; background: var(--fm-weiss); }
.fm-seite-leiste { display: flex; align-items: center; gap: 9px; padding: 11px 15px; border-bottom: 1px solid var(--fm-linie); background: var(--fm-grau-hell); font-size: 12.5px; font-weight: 700; color: var(--fm-tinte); }
.fm-seite-koerper { padding: 16px; display: grid; gap: 14px; }
.fm-seite-raster { display: grid; gap: 14px; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.fm-platte { background: var(--fm-grau-hell); border-radius: 9px; }
.fm-platte-bild { min-height: 128px; display: flex; align-items: center; justify-content: center; color: var(--fm-grau); font-size: 12.5px; }
.fm-strich { height: 9px; border-radius: 5px; background: var(--fm-grau-hell); }
.fm-strich-kurz { width: 48%; }
.fm-strich-halb { width: 70%; }
.fm-strich-gruppe { display: grid; gap: 8px; }
.fm-knopf-platte { height: 34px; width: 58%; border-radius: 8px; background: var(--fm-ton-rand); }

/* Die Stelle, an der das Formular sitzt. */
.fm-stelle { border: 2px dashed var(--fm-ton); border-radius: 10px; background: var(--fm-ton-hell); padding: 11px 13px; }
.fm-stelle-name { display: block; font-size: 12px; font-weight: 800; color: var(--fm-ton-tief); margin-bottom: 3px; }
.fm-stelle-text { display: block; font-size: 12px; color: var(--fm-grau); }
.fm-stelle-blass { border-style: dashed; border-color: var(--fm-linie); background: var(--fm-grau-hell); }
.fm-stelle-blass .fm-stelle-name { color: var(--fm-grau); }

/* Reiter auf der Produktseite */
.fm-reiter { display: flex; gap: 4px; border-bottom: 1px solid var(--fm-linie); }
.fm-reiter span { padding: 8px 12px; font-size: 12.5px; color: var(--fm-grau); border-bottom: 2px solid transparent; }
.fm-reiter .fm-reiter-an { color: var(--fm-ton-tief); font-weight: 700; border-bottom-color: var(--fm-ton); }

/* Beschriftete Zeichnung: Nummern am Formular, Erklaerung darunter. */
.fm-zeiger { display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; border-radius: 50%; background: var(--fm-ton); color: #fff; font-size: 11px; font-weight: 800; margin-right: 7px; flex: 0 0 auto; vertical-align: middle; }
.fm-legende { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fm-legende li { display: flex; align-items: flex-start; gap: 2px; font-size: 14px; }
.fm-legende b { color: var(--fm-tinte); }
.fm-gruppe-rand { border: 2px solid var(--fm-ton-rand); border-radius: 10px; padding: 12px; }
/* Die Zeile traegt ihre Nummer am Rahmen, nicht an einem Feld - sonst
   staende sie neben der Nummer eines Elements und meinte etwas anderes. */
.fm-zeile-rand { outline: 2px dashed var(--fm-ton-rand); outline-offset: 3px; border-radius: 4px; position: relative; }
.fm-zeile-rand::before { content: "2"; position: absolute; left: -11px; top: -13px; width: 19px; height: 19px; border-radius: 50%; background: var(--fm-ton); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }

/* --- 6d Bausteine der gewaehlten Fassungen -------------------------------- */

/* Kachelblatt: ein Feldtyp je Kachel */
/* Beispiel-Galerie: die ganze Karte ist der Link, nicht nur ein Wort darin. */
.fm-karte-klick { display: block; text-decoration: none; color: inherit; transition: border-color 0.15s, box-shadow 0.15s; }
.fm-karte-klick:hover { border-color: var(--fm-ton-rand); box-shadow: 0 14px 34px -26px rgba(76, 63, 181, 0.55); text-decoration: none; }
.fm-karte-mehr { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--fm-ton); }
.fm-karte-klick:hover .fm-karte-mehr { text-decoration: underline; }

/* Die festen Spalten des Exports als Band, in der Reihenfolge der Datei. */
.fm-spalten { display: flex; flex-wrap: wrap; gap: 8px; }
.fm-spalte { display: inline-flex; align-items: baseline; gap: 7px; border: 1px solid var(--fm-linie); border-radius: 8px; background: var(--fm-weiss); padding: 7px 11px; font-size: 13px; color: var(--fm-tinte); }
.fm-spalte i { font-family: var(--fm-fest); font-style: normal; font-size: 11px; color: var(--fm-grau); }
.fm-spalte-offen { border-style: dashed; color: var(--fm-grau); }

/* Die Anleitung: je Schritt Text links, das wachsende Formular rechts. */
.fm-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; counter-reset: none; }
.fm-schritt { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 30px; align-items: center; border: 1px solid var(--fm-linie); border-radius: 16px; background: var(--fm-weiss); padding: 24px; }
.fm-schritt-nr { display: inline-block; font-family: var(--fm-fest); font-size: 12px; font-weight: 800; color: var(--fm-ton); background: var(--fm-ton-hell); border-radius: 999px; padding: 3px 10px; margin-bottom: 10px; }
.fm-schritt-wort h3 { margin: 0 0 8px; }
.fm-schritt-wort p { margin: 0; }
.fm-schritt-bild .fm-form { margin: 0; }

.fm-kacheln { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Die Galerie zeigt 23 Typen; vier Spalten waeren zu breit fuer die kleinen
   Nachbauten, deshalb fuenf und etwas weniger Luft. */
.fm-kacheln-galerie { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.fm-kacheln-galerie .fm-kachel { padding: 10px; }
.fm-kacheln-galerie .fm-form-kasten { min-height: 32px; padding: 7px 9px; font-size: 12px; }
.fm-kacheln-galerie .fm-form-kasten-zwei { min-height: 44px; }
.fm-kacheln-galerie .fm-form-runden { font-size: 12px; gap: 4px; }
.fm-kacheln-galerie .fm-form-ablage { padding: 8px 8px; font-size: 11.5px; }
.fm-kacheln-galerie .fm-form-haken { font-size: 12px; }
.fm-muster-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.fm-muster-farbe { display: flex; align-items: center; gap: 7px; font-family: var(--fm-fest); }
.fm-muster-farbe i { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 4px; background: #4c3fb5; }
.fm-muster-leer { border: 1px dashed var(--fm-linie); border-radius: 8px; padding: 8px; text-align: center; font-size: 11.5px; color: var(--fm-grau); }
.fm-liste-punkte { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 7px; font-size: 13.5px; }
.fm-liste-punkte li { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; border-bottom: 1px solid var(--fm-linie); padding-bottom: 7px; }
.fm-liste-punkte li:last-child { border-bottom: 0; padding-bottom: 0; }
.fm-liste-punkte span { font-family: var(--fm-fest); font-size: 11.5px; color: var(--fm-grau); }
/* Einstellungen: Name fett, der Hilfetext aus der config.xml darunter. Muss
   NACH .fm-liste-punkte li stehen - gleiche Spezifitaet, die spaetere Regel
   gewinnt. */
.fm-liste-punkte-breit li { display: block; }
.fm-liste-punkte-breit em { display: block; margin-top: 3px; font-style: normal; font-size: 12.5px; color: var(--fm-grau); }
.fm-kachel { border: 1px solid var(--fm-linie); border-radius: 11px; padding: 12px; background: var(--fm-weiss); }
.fm-kachel-name { display: block; font-size: 12px; font-weight: 700; color: var(--fm-tinte); margin-bottom: 8px; }
.fm-kachel-typ { display: block; font-family: var(--fm-fest); font-size: 10.5px; color: var(--fm-grau); margin-top: 8px; }

/* Werkzeugleiste ueber einer Liste */
.fm-werkzeug { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--fm-linie); background: var(--fm-grau-hell); }
.fm-filter { border: 1px solid var(--fm-linie); border-radius: 999px; background: var(--fm-weiss); padding: 5px 11px; font-size: 12px; color: var(--fm-grau); }
.fm-filter-an { border-color: var(--fm-ton-rand); background: var(--fm-ton-hell); color: var(--fm-ton-tief); font-weight: 700; }
.fm-werkzeug-rechts { margin-left: auto; }

/* Lineal ueber dem Raster */
.fm-lineal { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; margin-bottom: 8px; }
.fm-lineal span { text-align: center; font-family: var(--fm-fest); font-size: 10px; color: var(--fm-grau); background: var(--fm-grau-hell); border-radius: 4px; padding: 3px 0; }

/* Rahmen, der einen Ausschnitt als Shop-Seite kennzeichnet */
.fm-rahmen { border: 1px solid var(--fm-linie); border-radius: 14px; overflow: hidden; background: var(--fm-weiss); box-shadow: 0 20px 48px -28px rgba(26, 24, 52, 0.45); }
.fm-rahmen-leiste { display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: var(--fm-grau-hell); border-bottom: 1px solid var(--fm-linie); }
.fm-rahmen-punkte { display: flex; gap: 5px; }
.fm-rahmen-punkte i { width: 8px; height: 8px; border-radius: 50%; background: var(--fm-linie); display: block; }
.fm-rahmen-adresse { flex: 1 1 auto; background: var(--fm-weiss); border: 1px solid var(--fm-linie); border-radius: 999px; padding: 3px 11px; font-size: 11px; color: var(--fm-grau); }
.fm-rahmen .fm-form { border: 0; border-radius: 0; box-shadow: none; }

/* Drei Ausschnitte nebeneinander, je eine Position */
.fm-dreier { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fm-mini-seite { border: 1px solid var(--fm-linie); border-radius: 11px; padding: 10px; background: var(--fm-weiss); display: grid; gap: 7px; }
.fm-mini-seite .fm-platte-bild { min-height: 42px; font-size: 11px; }
.fm-mini-seite .fm-strich { height: 6px; }
.fm-mini-titel { display: block; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--fm-tinte); margin-top: 9px; }
.fm-mini-stelle { border: 2px dashed var(--fm-ton); border-radius: 7px; background: var(--fm-ton-hell); height: 26px; }
.fm-mini-leer { border: 1px dashed var(--fm-linie); border-radius: 7px; height: 26px; }

/* Attributliste am Fehlerfeld */
.fm-attribut { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 7px; font-size: 12.5px; }
.fm-attribut li { display: flex; gap: 9px; align-items: baseline; color: var(--fm-grau); }
.fm-attribut code { background: var(--fm-grau-hell); border-radius: 5px; padding: 2px 7px; color: var(--fm-tinte); }
.fm-attribut-server { color: var(--fm-ton-tief); font-weight: 600; }

/* Ein Ort: Nachbau und Erklaerung nebeneinander, abwechselnd links und rechts.
   Drei Textkarten haetten dreimal dasselbe Bild ergeben - naemlich keines. */
.fm-ort { display: grid; gap: 32px; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; margin-bottom: 34px; }
.fm-ort:last-of-type { margin-bottom: 0; }
.fm-ort-gedreht > div:first-child { order: 2; }
.fm-ort h3 { margin-bottom: 10px; }

/* --- 6e Plan-Karten -------------------------------------------------------
   Wie auf den Schwesterseiten: eine Karte je Plan, die empfohlene hervorgehoben,
   darunter jeweils, was dazukommt. */
/* Der Wechsel Monat/Jahr. Die beiden Radioknoepfe stehen vor den Karten,
   damit ~ sie erreicht; sichtbar sind nur die beiden Beschriftungen. Der
   Knopf bleibt bedienbar und mit der Tastatur erreichbar - deshalb versteckt
   ihn eine Maske und nicht display: none. */
.fm-takt-block { position: relative; }
.fm-takt-knopf { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.fm-takt-wahl { display: flex; justify-content: center; gap: 4px; margin: 0 0 22px; padding: 4px; border: 1px solid var(--fm-linie); border-radius: 999px; background: var(--fm-weiss); width: fit-content; margin-inline: auto; }
.fm-takt-wahl label { padding: 7px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: var(--fm-grau); cursor: pointer; }
.fm-takt-wahl label:hover { color: var(--fm-ton); }
.fm-takt-wahl label i { font-style: normal; font-size: 11.5px; font-weight: 700; margin-left: 7px; padding: 2px 7px; border-radius: 999px; background: var(--fm-ton-hell); color: var(--fm-ton); }
#fm-takt-jahr:checked ~ .fm-takt-wahl .fm-takt-jahr i { background: rgba(255, 255, 255, 0.22); color: #fff; }
.fm-plan-spar { display: block; margin-top: 3px; font-weight: 800; color: var(--fm-ton); }
#fm-takt-jahr:checked ~ .fm-takt-wahl .fm-takt-jahr,
#fm-takt-monat:checked ~ .fm-takt-wahl .fm-takt-monat { background: var(--fm-ton); color: #fff; }
#fm-takt-jahr:focus-visible ~ .fm-takt-wahl .fm-takt-jahr,
#fm-takt-monat:focus-visible ~ .fm-takt-wahl .fm-takt-monat { outline: 2px solid var(--fm-ton); outline-offset: 2px; }
#fm-takt-jahr:checked ~ .fm-plaene .fm-preis-monat,
#fm-takt-monat:checked ~ .fm-plaene .fm-preis-jahr { display: none; }

.fm-plaene { display: grid; gap: 18px; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto auto auto auto; align-items: stretch; }
.fm-plan { display: grid; grid-row: span 5; grid-template-rows: subgrid; align-content: start; border: 1px solid var(--fm-linie); border-radius: 14px; background: var(--fm-weiss); padding: 22px 20px 24px; position: relative; }
.fm-plan-heraus { border-color: var(--fm-ton); box-shadow: 0 16px 40px -28px rgba(76, 63, 181, 0.6); }
.fm-plan-marke { position: absolute; top: -11px; left: 20px; background: var(--fm-ton); color: #fff; border-radius: 999px; padding: 3px 11px; font-size: 11px; font-weight: 800; }
.fm-plan-name { font-size: 15px; font-weight: 800; color: var(--fm-tinte); }
.fm-plan-preis { margin: 10px 0 2px; font-size: 30px; font-weight: 800; color: var(--fm-tinte); line-height: 1.1; }
.fm-plan-preis small { font-size: 14px; font-weight: 600; color: var(--fm-grau); }
.fm-plan-takt { margin: 0 0 14px; font-size: 12.5px; color: var(--fm-grau); }
.fm-plan-satz { margin: 0 0 14px; font-size: 13.5px; }
.fm-plan-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; align-content: start; font-size: 13.5px; }
.fm-plan-liste li { display: flex; gap: 8px; align-items: flex-start; }
.fm-plan-liste i { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 3.5px; border-radius: 50%; background: var(--fm-ton-hell); position: relative; }
.fm-plan-liste i::after { content: ""; position: absolute; inset: 0; margin: auto; width: 3px; height: 7px; border: solid var(--fm-ton); border-width: 0 2px 2px 0; transform: translateY(-0.4px) rotate(45deg); }
.fm-plan-liste .fm-plan-ohne { background: var(--fm-grau-hell); }
.fm-plan-liste .fm-plan-ohne::after { width: 7px; height: 0; border-width: 0 0 2px 0; border-color: var(--fm-grau); transform: none; }
.fm-plan-aus { color: var(--fm-grau); }

/* --- 7 Breiten-Abfragen — hier und nur hier ------------------------------ */

@media (max-width: 1000px) {
  /* Die Ortsblöcke stapeln, sobald die schmale Spalte den Nachbau darin
     quetscht - gemessen lief die Einsendungstafel ab 1100px über. Dieselbe
     Rechnung gilt für ein zweispaltiges Raster mit einer Tabelle darin: es
     bleiben nur ~340px, zu wenig für vier Spalten. */
  .fm-raster-2:has(.fm-liste) { grid-template-columns: minmax(0, 1fr); }
  .fm-ort { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .fm-ort-gedreht > div:first-child { order: 0; }
  /* Die Buehne neben dem Text wird zu schmal - sie kommt darunter. */
  .fm-held { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .fm-buehne { max-width: 520px; }
  .fm-stufen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fm-raster-3, .fm-raster-4, .fm-stufen-4, .fm-plaene { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 940px) {
  .fm-kopf-reihe { gap: 16px; }
  .fm-nav { margin-left: 0; overflow-x: auto; scrollbar-width: none; }
  .fm-nav::-webkit-scrollbar { display: none; }
}

@media (max-width: 820px) {
  .fm-paar { grid-template-columns: minmax(0, 1fr); }
  .fm-schritt { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .fm-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fm-kacheln-galerie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  h1 { font-size: 35px; }
  h2 { font-size: 27px; }
  .fm-zone { padding: 58px 0; }
  .fm-raster, .fm-stufen-3, .fm-stufen-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Ab hier bleibt neben Logo und Store-Knopf kein brauchbarer Streifen mehr
   uebrig. Die Leiste bekommt eine eigene Zeile ueber die volle Breite - und
   der Kopf hoert auf zu kleben, sonst frisst er zwei Zeilen vom Schirm. */
@media (max-width: 720px) {
  .fm-kopf { position: static; }
  .fm-kopf-reihe { flex-wrap: wrap; height: auto; padding-top: 11px; }
  .fm-marke-logo { order: 1; }
  .fm-kopf-rechts { order: 2; margin-left: auto; }
  .fm-nav { order: 3; flex-basis: 100%; margin-top: 12px; padding-bottom: 11px; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  h1 { font-size: 30px; }
  h2 { font-size: 24px; }
  .fm-spur { padding: 0 18px; }
  .fm-raster, .fm-raster-2, .fm-raster-3, .fm-raster-4, .fm-stufen, .fm-stufen-3, .fm-stufen-4, .fm-plaene { grid-template-columns: minmax(0, 1fr); }
  .fm-legende, .fm-seite-raster { grid-template-columns: minmax(0, 1fr); }
  .fm-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fm-kacheln-galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fm-dreier { grid-template-columns: minmax(0, 1fr); }
  .fm-glossar-paar { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  /* Das 12er-Raster des Formulars bricht auf eine Spalte - nebeneinander
     stehende Viertel waeren auf dem Telefon nicht mehr lesbar. */
  .fm-sp3, .fm-sp4, .fm-sp6, .fm-sp8, .fm-sp9 { grid-column: span 12; }
  .fm-baum td, .fm-baum th { padding: 9px 11px; }
  .fm-baum-e3 .fm-baum-name { padding-left: 22px; }
  .fm-kopf-reihe { gap: 12px; }
  .fm-nav { gap: 14px; }
  .fm-nav a, .fm-kopf-rechts a { font-size: 13.5px; }
  .fm-kopf-rechts { gap: 11px; }
  .fm-knopf { padding: 10px 15px; }
}