/* ============================================================
   base4IT — Stylesheet des Neuaufbaus, Richtung „Signal"
   ============================================================
   Das Markengrün ist hier keine Zutat, sondern der Grund, auf dem
   die Startseite steht. Schwarze Schrift darauf, harte Ränder,
   fette Typografie. Ab den Unterseiten wird der Grund hell, damit
   lange Texte lesbar bleiben.

   Kopfzeile und Fußband sind davon ausgenommen: Sie stehen auf dem
   Grund der Seite und tragen keine Trennlinie. Das Grün beginnt erst
   im Seitenkopf darunter.

   Farben stehen ausschließlich in den Variablen unten. Wer eine
   ändert, ändert sie an genau einer Stelle je Erscheinungsbild —
   und muss daran denken, dass es drei Blöcke sind: hell, dunkel
   nach Systemeinstellung, dunkel nach ausdrücklicher Wahl.
   ============================================================ */

:root{
  /* Die grüne Flut — Grund der Startseite */
  --flut:#6BD425;
  --auf-flut:#0D1410;
  --flut-kante:#0D1410;

  /* Kacheln und Karten, die auf der Flut liegen */
  --karte:#FFFFFF;
  --auf-karte:#0D1410;
  --karte-leise:#3F4A3C;

  /* Heller Grund der Unterseiten. Nicht Weiß, sondern die sehr helle
     Sektionstönung der bisherigen Website — damit nicht die ganze Seite
     als weiße Fläche erscheint. Der Ton liegt überall: hinter Kopfzeile,
     Inhalt und Fußband. Was sich davon abheben soll, steht auf --karte
     und bleibt damit echt weiß. */
  --grund:#F0F9E3;
  --tinte:#0D1410;
  --tinte-leise:#4A5547;

  /* Kopfzeile und Fußband stehen auf demselben Grund wie die Seite: kein
     Grün, keine Trennlinie. Das Markengrün beginnt erst darunter, im
     Seitenkopf mit der Überschrift.

     Beide lesen weiterhin dieselben zwei Variablen — bewusst über var()
     statt über eigene Werte. Wer dem Band einmal wieder eine eigene Farbe
     geben will, ändert sie hier an einer Stelle statt an zweien. */
  --band:var(--grund);
  --auf-band:var(--tinte);

  /* Zweitfarbe der Marke. Derzeit nirgends im Einsatz — hier festgehalten,
     damit der Wert nicht verloren geht. */
  --zweitfarbe:#01A7C2;

  /* Die weiße Platte ist mit der Kopfgrafik der Startseite entfallen — sie
     war das Letzte, was sie noch trug. Logo und Siegel stehen seit dem
     Freistellen ohne sie da. Wer wieder eine Grafik auf eine helle Fläche
     legen will, holt sich hier ein --platte:#FFFFFF zurück.

     Freistellung der drei Marken, siehe .marke und .siegel weiter unten.
     Beide Werte hängen am Erscheinungsbild und stehen deshalb hier bei
     den Farben, nicht als eigene Regel je Modus.

     Das Logo gibt es als zwei Dateien: graue Wortmarke fürs Helle, helle
     fürs Dunkle. Umgeschaltet wird über display, damit auch der
     Handschalter greift — <picture> könnte nur die Systemeinstellung.

     Das BvdS-Siegel ist einfarbig #0E0E0E. Auf dunklem Grund verschwände
     es vollständig; weil es nur eine Farbe hat, ist das Umkehren
     verlustfrei und macht daraus eine helle Marke. Das Gütesiegel
     braucht das nicht: Es ist eine weiße Plakette mit dunkler Schrift
     und steht auf dunklem Grund von sich aus. */
  --logo-hell:block;
  --logo-dunkel:none;
  --siegel-umkehr:none;

  /* Farbe der Menüpunkte in der Kopfzeile. Bewusst nicht das helle
     Markengrün #6BD425: Auf der hellen Tönung käme es auf 1,9:1 und wäre
     als Text unlesbar — die Anforderung sind 4,5:1. Genommen ist deshalb
     das dunkle Markengrün, das im Dunkelmodus ohnehin schon die Flut
     trägt; es kommt auf 7,4:1 und bleibt erkennbar dieselbe Farbfamilie.
     Im Dunkelmodus dreht sich das Paar um. */
  --navi:#2A5C14;

  /* Fehlerfarben für Formulare (Wunsch des Auftraggebers vom 16.10.2026:
     ein fehlendes Häkchen sah aus wie normaler Text). Rot auf hellroter
     Tönung kommt auf 6,6:1, im Dunkelmodus Hellrot auf Dunkelrot auf 7,9:1. */
  --fehler:#B00020;
  --fehler-grund:#FDECEC;

  --kante:2px;
  --rand:56px;      /* Mindestabstand zum Fensterrand auf schmalen Schirmen */
  --luft:44px;      /* senkrechter Grundabstand */

  /* Abstand des Textes zur Kante des grünen Kopfblocks. Seit der Block nur
     noch so breit ist wie die Seite, wäre der Text sonst bündig an der
     Farbkante. Preis dafür: Der Kopftext rückt um dieses Maß gegenüber dem
     Inhalt darunter ein, die linken Kanten fluchten also nicht mehr. */
  --kopfluft:36px;

  /* Die Breite, in der die ganze Seite steht — Kopf, Inhalt und Fuß.
     1040 px sind nicht gegriffen: Der längste Zielgruppenname braucht in
     einer Zeile 287 px, die Kachel damit 331 px. Drei nebeneinander plus
     zwei Lücken ergeben 1017 px. Wer diesen Wert kleiner macht, bricht die
     obere Kachelreihe zweizeilig um. */
  --breite:1040px;
  --schrift:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --flut:#2A5C14;
    --auf-flut:#E9F7DE;
    --flut-kante:#7FE03A;
    --karte:#0D1410;
    --auf-karte:#E9F7DE;
    --karte-leise:#9BB292;
    --grund:#0D1410;
    --tinte:#E9F7DE;
    --tinte-leise:#9BB292;
    --logo-hell:none;
    --logo-dunkel:block;
    --siegel-umkehr:invert(1);
    --navi:#7FE03A;
    --fehler:#FF8A80;
    --fehler-grund:#3A1414;
  }
}

:root[data-theme="dark"]{
  --flut:#2A5C14;
  --auf-flut:#E9F7DE;
  --flut-kante:#7FE03A;
  --karte:#0D1410;
  --auf-karte:#E9F7DE;
  --karte-leise:#9BB292;
  --grund:#0D1410;
  --tinte:#E9F7DE;
  --tinte-leise:#9BB292;
  --logo-hell:none;
  --logo-dunkel:block;
  --siegel-umkehr:invert(1);
  --navi:#7FE03A;
  --fehler:#FF8A80;
  --fehler-grund:#3A1414;
}

/* ---------- Grundlagen ---------- */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--grund);
  color:var(--tinte);
  font-family:var(--schrift);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;}
img{max-width:100%;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,p{margin:0;}

:focus-visible{outline:3px solid var(--auf-flut);outline-offset:3px;}
:root[data-theme="dark"] :focus-visible,
:root:not([data-theme="light"]) :focus-visible{outline-color:currentColor;}

/* Jede Seite ist eine Spalte über die volle Schirmhöhe. Das sorgt dafür,
   dass das Fußband unten abschließt, statt bei kurzen Seiten — Danke,
   Fehlerseite — mitten im Bild zu enden. */
body{min-height:100vh;display:flex;flex-direction:column;}
body > main{flex:1;}

/* ---------- Die eine Spalte, in der alles steht ----------
   Bis --breite wächst der Inhalt mit; darüber bleibt er stehen und wird
   zentriert. Auf schmalen Schirmen bleibt links und rechts --rand frei.
   Kopfzeile, Inhalt und Fußband nutzen dieselbe Regel — nur so steht das
   Logo senkrecht über dem Text darunter. */
.huelle{
  width:min(100% - 2 * var(--rand), var(--breite));
  margin-inline:auto;
}

/* ---------- Kopfzeile ---------- */
.kopfzeile{
  background:var(--band);color:var(--auf-band);
}
/* Die Höhe der Kopfzeile ist die Summe aus Logohöhe und dieser Polsterung.
   Beides ist gewachsen, seit die Menüpunkte größer stehen: 12 px Polster
   um ein 44 px hohes Logo ergaben eine 68 px hohe Leiste, in der die
   Schrift keinen Platz mehr zum Atmen hatte. */
.kopfzeile-innen{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-block:20px;
}

/* Das Logo steht frei, ohne weiße Platte. Möglich wurde das, als die
   Kopfzeile ihr Grün verlor: Die graue Wortmarke steht auf der hellen
   Tönung von sich aus. Für den Dunkelmodus gibt es die zweite Datei, die
   ohnehin schon im Bestand lag — hellgrüne Würfel, helle Schrift. */
.marke{
  display:inline-flex;align-items:center;flex:none;
}
.marke img{height:52px;width:auto;}
.marke .logo-hell{display:var(--logo-hell);}
.marke .logo-dunkel{display:var(--logo-dunkel);}

/* Die Menüpunkte stehen in der Markenfarbe und größer als der Fließtext —
   sie sind der einzige Text in der Kopfzeile und dürfen ihn führen.
   Der Unterstrich bei Hover und aktueller Seite folgt über currentColor
   automatisch mit. */
.hauptnavi{display:flex;gap:28px;font-size:1.2rem;font-weight:700;}
.hauptnavi a{
  color:var(--tinte);
  text-decoration:none;padding:4px 0;border-bottom:2px solid transparent;
}
.hauptnavi a:hover,.hauptnavi a.hier{border-bottom-color:currentColor;}

/* „Zum Inhalt springen“ (17.10.2026): außerhalb des Bildes, bis er per
   Tabulator den Fokus bekommt — dann oben links über allem. */
.sprunglink{
  position:absolute;left:12px;top:-100px;z-index:1000;
  background:var(--flut);color:var(--auf-flut);font-weight:800;
  padding:10px 16px;border:var(--kante) solid var(--flut-kante);text-decoration:none;
}
.sprunglink:focus{top:12px;}
main:focus{outline:none;}

.kopf-knoepfe{display:flex;align-items:center;gap:14px;flex:none;}

/* Rufnummer und Login rechts in der Kopfzeile. Die Nummer ist ein Anruf-Link
   und kein Text: auf dem Telefon ein Fingertipp. */
.kopf-telefon{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.95rem;font-weight:700;text-decoration:none;
  border-bottom:2px solid transparent;
}
.kopf-telefon:hover{border-bottom-color:currentColor;}
.kopf-telefon svg{width:17px;height:17px;flex:none;}
.kopf-login{
  font-size:.9rem;font-weight:700;text-decoration:none;
  border:var(--kante) solid currentColor;padding:7px 14px;
}
.kopf-login:hover{background:var(--auf-band);color:var(--band);}
/* Kundenportal: nur als Symbol. Nachgemessen am 30.09.2026 — bei voller
   Breite (1040 px) bleiben neben Logo (176) und Menü (500) 316 px für die
   Knöpfe; Rufnummer und Farbschema brauchen 206, der ausgeschriebene Knopf
   bräuchte 163 weitere und brach „Über uns“ auf jeder Breite um. Das
   Symbol braucht 56. Name für Screenreader und Tooltip: aria-label/title. */
.kopf-portal{display:inline-flex;align-items:center;padding:7px 9px;}
.kopf-portal svg{width:20px;height:20px;flex:none;}
/* Unter 1100 px war die Zeile schon vor dem Portal-Knopf randvoll (das
   Menü lässt sich nicht schmaler als ~460 px umbrechen). Dort deshalb auch
   die Rufnummer nur als Symbol — dieselbe Regel, die vorher erst unter
   900 px griff. */
@media (max-width:1100px){
  .kopf-telefon span{display:none;}
  .kopf-telefon{border:var(--kante) solid currentColor;padding:7px 9px;}
  .kopf-telefon svg{width:20px;height:20px;}
}
/* Die Klasse ist für Links gebaut; als <button> (Portal) fehlten
   Hintergrund und Schrift, der Knopf stand weiß ohne lesbaren Text da. */
button.knopf-schlicht{
  background:none;font:inherit;font-size:.9rem;font-weight:700;
  cursor:pointer;align-self:flex-start;
}
.schemaknopf{
  background:none;border:var(--kante) solid currentColor;color:inherit;
  font:inherit;font-size:.85rem;padding:6px 12px;cursor:pointer;
  line-height:1;font-weight:700;
  /* Gleiche Höhe wie der Portal-Knopf daneben (2 + 7 + 20 + 7 + 2 px,
     siehe .kopf-portal) — mit 30 px stand er sichtbar kürzer daneben. */
  height:38px;display:inline-flex;align-items:center;
}
/* Beim Überfahren dreht sich der Knopf um: Schrift wird Grund, Grund wird
   Schrift. Vorher lag hier das Grün-Paar — auf dem grünen Kopf war das die
   Umkehr, auf dem hellen Kopf wäre es eine dritte Farbe. */
.schemaknopf:hover{background:var(--auf-band);color:var(--band);}
.burger{
  display:none;background:none;border:var(--kante) solid currentColor;color:inherit;
  padding:7px 9px;cursor:pointer;line-height:0;
}
.burger svg{width:20px;height:20px;display:block;}

/* Das Klappmenü ist der aufgeklappte Teil der Kopfzeile und trägt deshalb
   denselben Grund wie sie — sonst hinge unter dem hellen Kopf eine grüne
   Lasche. Die Trennlinien zwischen den Punkten bleiben: Ohne sie liefen die
   Menüpunkte ineinander. Sie sind aber gedämpft statt hart schwarz. */
.mobilnavi{
  display:none;flex-direction:column;gap:2px;
  padding-bottom:18px;font-size:1.05rem;font-weight:700;
  background:var(--band);
}
/* Eigene Schwelle nur für die Kopfzeile, unabhängig vom übrigen Umbruch
   bei 900 px. Grund: Das Menü hat vier Punkte, seit „Lösung“ dazugekommen
   ist, und steht größer als früher. Logo, Menü, Rufnummer und Schalter
   brauchen zusammen 868 px in der Hülle — die gibt es erst ab rund 1000 px
   Fensterbreite. Bei 935 px brach das Menü zweizeilig um und machte die
   Kopfzeile 110 px hoch. Darunter übernimmt das Klappmenü. */
@media (max-width:1010px){
  .hauptnavi{display:none;}
  .burger{display:block;}
}

.mobilnavi.offen{display:flex;}
.mobilnavi a{
  color:var(--tinte);
  text-decoration:none;padding:11px 0;border-bottom:1px solid var(--tinte-leise);
}

/* ---------- Die fünf Branchenlösungen ----------
   Stehen auf der Startseite wie auf der Fehlerseite im weißen Bereich
   unter dem grünen Kopf. Die Kacheln haben denselben Grund wie die Seite
   und leben deshalb von ihrer Kante — wie die Karten der Unterseiten. */
/* Gleichmäßiges Raster, drei mal zwei. Vorher waren es fünf Kacheln in einer
   ungleichen Aufteilung — drei oben, zwei breitere darunter. Mit der sechsten
   Kachel geht das Raster auf, und der Bruch entfällt. */
.tueren{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  margin-top:34px;
}

.tuer{
  background:var(--karte);color:var(--auf-karte);
  border:var(--kante) solid var(--flut-kante);
  padding:18px 20px 16px;
  display:flex;flex-direction:column;gap:6px;
  min-height:118px;height:100%;
  text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease;
}
a.tuer:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--flut-kante);}
.tuer-name{font-size:1.15rem;font-weight:800;letter-spacing:-.02em;line-height:1.2;}
.tuer-text{font-size:.85rem;color:var(--karte-leise);line-height:1.5;flex:1;}

/* Statt eines nackten Pfeils ein sichtbarer Linktext — ein Pfeil allein
   fällt in Barrierefreiheitsprüfungen durch, weil er keinen Zweck benennt. */
.tuer-mehr{font-size:.82rem;font-weight:700;line-height:1.3;}

/* ============================================================
   Zielgruppenseiten
   ============================================================
   Der Kopf trägt die grüne Flut weiter, damit die Herkunft von der
   Startseite sichtbar bleibt. Darunter wird der Grund hell — auf Grün
   liest sich kein langer Text. */

/* Der grüne Block läuft nicht mehr über die ganze Fensterbreite, sondern
   steht in derselben Spalte wie alles andere — dieselbe Rechnung wie in
   .huelle. Er endet ohne Trennlinie; die Farbkante ist die Kante.

   Die Hülle darin darf nicht ein zweites Mal einrücken, sonst stünde der
   Text schmaler als der Inhalt darunter und die linken Kanten fluchteten
   nicht mehr. Deshalb die Breite dort auf 100 % zurücksetzen. */
.seitenkopf{
  background:var(--flut);color:var(--auf-flut);
  width:min(100% - 2 * var(--rand), var(--breite));
  margin-inline:auto;
  padding:32px var(--kopfluft) 44px;
}
.seitenkopf > .huelle{width:100%;}
.zurueck{
  display:inline-block;font-size:.86rem;font-weight:700;
  text-decoration:none;border-bottom:2px solid transparent;margin-bottom:20px;
}
.zurueck:hover{border-bottom-color:currentColor;}
/* Kleiner gesetzt als zuvor (2–2.9 rem): Seit der grüne Block nur noch
   Seitenbreite hat und der Text darin einrückt, hatte die Überschrift zu
   wenig Platz und brach auf mittleren Schirmen drei- bis vierzeilig um. */
.seitenkopf h1{
  font-size:clamp(1.7rem,3.4vw,2.4rem);
  line-height:1.4;letter-spacing:-.03em;font-weight:800;
  text-wrap:balance;margin-bottom:16px;max-width:26ch;
}
.vorspann{font-size:1.05rem;line-height:1.55;font-weight:500;max-width:60ch;}

/* ---------- Webinar-Kasten (Landingpages, siehe partials/landingpage.php) ----------
   Weiße Karte auf dem grünen Kopfbereich, dieselbe Bauart wie .belegfeld:
   Auf --flut liest sich kein Fließtext, die Karte hebt sich per Farbwechsel
   ab statt per Rahmen allein. Nur sichtbar, wenn im Schema ein Datum
   gepflegt ist — ein zweiter, bewusst auffälliger Ausgang neben dem Knopf
   am Seitenende, deshalb eigens gerahmt statt nur eine Textzeile. */
.webinar{
  margin-top:28px;max-width:420px;
  background:var(--karte);color:var(--auf-karte);
  border:var(--kante) solid var(--flut-kante);
  padding:22px 24px;
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
}
.webinar-label{
  font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--karte-leise);
}
.webinar-termin{font-size:1.05rem;font-weight:800;letter-spacing:-.01em;}
.webinar-text{font-size:.92rem;line-height:1.5;color:var(--karte-leise);margin-bottom:6px;}
.webinar .knopf{text-decoration:none;}

/* Für Erläuterungen mit einem echten, gesetzten Umbruch an der Satz- bzw.
   Gedankenstrich-Grenze (siehe schema/index.php und schema/softwaremodule.php)
   statt natürlichem Zeilenfall. Die sonst übliche 60-ch-Grenze für Lesbarkeit
   würde diesen bewussten Umbruch zunichtemachen, sobald eine der beiden
   Zeilen für sich allein schon länger als 60 Zeichen ist — dann bräche der
   Browser zusätzlich noch einmal, und zwar wieder mitten im Satz. Ohne
   Breitengrenze nutzt der Text die volle Spaltenbreite der .huelle, die
   selbst schon begrenzt ist; der einzige verbleibende Umbruch ist der
   gesetzte. Trotz des Namens nicht mehr nur auf der Startseite im Einsatz —
   derselbe Bedarf trat am selben Tag auch auf der Softwaremodule-Seite auf. */
.vorspann-start{max-width:none;}

/* ---------- Kopf der Startseite ----------
   Der Kopfbereich trug nacheinander das Rückrufformular und danach eine
   Collage aus Papierstapel und Tablet. Beides ist weg. Das Formular war als
   Karte über die halbe Breite zu dominant; die Collage nahm dieselbe halbe
   Breite und erklärte weniger als die Überschrift daneben.

   Übrig bleibt Text über die volle Spalte — und weil daneben nichts mehr um
   Platz konkurriert, darf die Überschrift größer werden als auf den
   Unterseiten. Die Polsterung ist großzügiger als dort: Ohne Bild trägt der
   Block seine Höhe nicht mehr von selbst, und ein flacher grüner Streifen
   sähe nach Kopfzeile aus, nicht nach Anfang. */
.startkopf{padding-block:66px 70px;}

/* Deutlich größer als die 1,7–2,4 rem der Unterseiten. Die Begrenzung auf
   16 Zeichen ist der eigentliche Hebel: Sie zwingt „Mehr Wirkung – weniger
   Aufwand.“ in zwei Zeilen, und zwei kurze fette Zeilen tragen weiter als
   eine lange. Ohne die Grenze liefe die Zeile über die vollen 1040 px. */
.startkopf h1{
  font-size:clamp(2.1rem,5.2vw,3.3rem);
  line-height:1.12;margin-bottom:20px;max-width:16ch;
}
/* 62 Zeichen waren ursprünglich gemessen, nicht gegriffen, für den Text vor
   dem 06.09.2026 — mit den 52 Zeichen der Unterseiten brach die erste Zeile
   damals an falscher Stelle um. Seit absaetze() den gesetzten Umbruch eines
   Felds automatisch mit "vorspann-start" von jeder Zeichenbreite befreit
   (siehe lib/inhalt.php), greift diese Grenze hier nur noch, falls hero.text
   einmal ganz ohne eigenen Umbruch gepflegt wird — dann bleibt sie als
   Lesbarkeits-Fallback sinnvoll. */
.startkopf .vorspann{font-size:1.15rem;max-width:62ch;}
/* Braucht dieselbe Spezifität wie die Regel darüber, sonst gewinnt die
   engere 62-ch-Grenze trotz "vorspann-start" — genau das ist hier zunächst
   unbemerkt passiert. */
.startkopf .vorspann-start{max-width:none;}


.block{padding:var(--luft) 0;}
.block.letzter{padding-bottom:calc(var(--luft) * 1.4);}
.blocktitel{
  font-size:.8rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:22px;color:var(--tinte-leise);
}
/* Nur auf der Startseite: Die gedämpfte Farbe macht die Kicker-Zeile trotz
   font-weight:800 optisch dünn statt fett. Ein eigener Modifikator statt
   einer Änderung an .blocktitel selbst, damit die übrigen Seiten (Karriere,
   Über uns, Zielgruppen- und Kampagnenseiten, Fehlerseite) ihre gedämpfte
   Kicker-Farbe behalten. */
.blocktitel-start{color:var(--tinte);}

/* ---------- Was sich ändert ---------- */
/* Alle drei Kartenraster der Zielgruppenseiten (nutzen, module, pakete)
   standen bis zum 10.09.2026 nur mit Rahmen auf dem Seitengrund, ohne
   eigenen Untergrund. Jetzt auf --karte wie die Kernmodul-Karten auf
   Kundenseite und Softwaremodule-Seite — einheitliches Kartenbild über die
   ganze Website, nicht nur auf den neueren Seiten. */
/* min-height statt Grid-Tricks: Innerhalb einer Reihe gleicht das Raster
   die Kartenhöhe von sich aus an (align-items:stretch ist die Vorgabe),
   über mehrere Reihen hinweg aber nicht — eine kurze zweite Reihe bliebe
   sonst niedriger als eine textreiche erste. Der Wert ist grob auf die
   längste Karte mit zwei Textzeilen bemessen, nicht in Stein gemeißelt. */
.nutzen{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.nutzen li{
  background:var(--karte);color:var(--auf-karte);
  border:var(--kante) solid var(--tinte);
  padding:18px 20px;min-height:132px;
  display:flex;flex-direction:column;gap:5px;
}
.nutzen strong{font-size:1.05rem;font-weight:800;letter-spacing:-.01em;}
.nutzen span{font-size:.9rem;color:var(--karte-leise);line-height:1.55;}

/* ---------- Module ---------- */
.module{display:flex;flex-wrap:wrap;gap:10px;}
.module li{
  background:var(--karte);color:var(--auf-karte);
  border:var(--kante) solid var(--tinte);
  padding:9px 16px;font-size:.92rem;font-weight:600;
}
/* Der Beschreibungstext unter den Modulen (schema/<seite>.php, Feld
   module.text) stand ohne eigenen Abstand direkt unter der Chip-Reihe —
   wirkte gedrückt. .vorspann trägt sonst keinen margin-top, weil es an
   vielen Stellen direkt unter einer Überschrift steht; hier braucht es
   ihn zusätzlich, deshalb ein eigener Selektor statt einer generellen
   Änderung an .vorspann. */
.module + .vorspann{margin-top:18px;}

/* Link zur vollständigen Modulliste (softwaremodule.php), unter der
   kuratierten Auswahl dieser Zielgruppenseite. Steht in eigenem <p>, nicht
   als weiteres Kästchen in .module: Er ist kein Modul, sondern ein Verweis
   auf die vollständige Liste, und soll auch optisch nicht danach aussehen.
   Derselbe Abstand wie .module + .vorspann, aus demselben Grund. */
.modul-link{margin-top:18px;}

/* ---------- Preise ----------
   auto-fit statt einer festen Spaltenzahl: Nicht jede Zielgruppenseite
   zeigt gleich viele Pakete (Einzelstiftungen z. B. nur zwei statt drei) —
   das Raster verteilt die vorhandenen Karten gleichmäßig über die Breite,
   ganz gleich wie viele es sind, statt bei zwei Karten eine leere dritte
   Spalte freizulassen. */
.pakete{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;}
.pakete li{
  background:var(--karte);color:var(--auf-karte);
  border:var(--kante) solid var(--tinte);
  padding:22px 20px;
  display:flex;flex-direction:column;gap:10px;
}
.pakete li.hervor{background:var(--flut);color:var(--auf-flut);border-color:var(--flut-kante);}
.paket-name{
  font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
}
.paket-preis{font-size:1.75rem;font-weight:800;letter-spacing:-.03em;line-height:1;}
.paket-leistung{font-size:.88rem;line-height:1.5;color:var(--karte-leise);}
.pakete li.hervor .paket-leistung{color:inherit;}
.kleingedrucktes{
  margin-top:16px;font-size:.82rem;color:var(--tinte-leise);max-width:66ch;
}

/* ---------- Formular ---------- */
/* Der Knopf, der ein Anfrageformular in einem Fenster öffnet, folgt direkt
   auf den Einleitungstext — ohne eigenen Abstand rückte er zu dicht an den
   Text heran. Gilt für die Zielgruppenseiten (#angebot), die Karriereseite
   (#bewerben, seit 11.09.2026 ebenfalls ein Fenster statt eines offenen
   Formulars) sowie Referenzen und Über uns (#kontakt-aufruf, seitdem neu). */
#angebot .knopf.ruf-auf,
#bewerben .knopf.ruf-auf,
#kontakt-aufruf .knopf.ruf-auf{margin-top:22px;}
.anfrage{margin-top:26px;max-width:720px;display:flex;flex-direction:column;gap:14px;}
/* Kundenbereich hat nur ein Feld — bei 720px stünde es unangenehm breit. */
.kundenbereich-formular{max-width:360px;}
/* Fehlermeldung des Passwortformulars. Fett statt einer eigenen Warnfarbe:
   Die Palette der Seite kennt bisher kein Rot, eine einzelne neue Farbe nur
   für diesen einen Text wäre eine Design-Entscheidung für sich. */
.formularfehler{
  background:var(--fehler-grund);color:var(--fehler);
  border:3px solid var(--fehler);border-left-width:10px;padding:14px 18px;
  font-weight:800;font-size:1.02rem;
}
.formularfehler::before{content:"⚠ ";}
/* Die Überschrift der beiden Anfrage-Fenster (Zielgruppenseiten, Softwaremodule)
   sitzt direkt im .anfrage-Formular, hatte aber keine eigene Schriftgröße und
   fiel auf die Browser-Vorgabe (2em) zurück — brach dadurch in bis zu drei
   Zeilen um und wirkte wie zu viel Abstand vor dem Fließtext. Dieselbe Größe
   wie die Überschrift im Rückruf-Fenster (.rueckruf h2). Kein anderes
   .anfrage-Formular hat eine h2 direkt darin (karriere.php, kontakt.php haben
   ihre Überschrift außerhalb im umgebenden Abschnitt), die Regel trifft also
   gezielt nur die beiden Fenster. */
.anfrage h2{
  font-size:1.15rem;font-weight:800;line-height:1.3;
  padding-bottom:14px;border-bottom:1px solid var(--karte-leise);
  text-wrap:balance;
}
/* Im Fenster übernimmt schon .fenster-zu den Abstand zur Überschrift (negativer
   margin-bottom) — der sonst übliche obere Abstand von .anfrage käme oben drauf. */
.rueckruffenster .anfrage{margin-top:0;}
.feldpaar{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.anfrage label{display:flex;flex-direction:column;gap:6px;}
.anfrage label > span{font-size:.86rem;font-weight:700;}
.anfrage label em{font-style:normal;color:var(--tinte-leise);}
/* Eingabefelder stehen auf --karte, nicht auf dem Seitengrund: Ein Feld,
   das dieselbe Farbe hat wie die Seite, sieht nicht mehr aus wie ein Feld.
   Im Dunkelmodus sind beide Werte gleich, dort ändert sich dadurch nichts. */
.anfrage input,
.anfrage textarea{
  font:inherit;font-size:1rem;
  background:var(--karte);color:var(--auf-karte);
  border:var(--kante) solid var(--tinte);
  padding:11px 13px;width:100%;
}
.anfrage textarea{resize:vertical;min-height:96px;}
.anfrage input:focus-visible,
.anfrage textarea:focus-visible{outline:3px solid var(--flut);outline-offset:1px;}

/* Zwei Klassen tief, weil .anfrage label sonst gewinnt und das Häkchen
   unter statt neben den Text setzt. */
/* Das Einwilligungs-Häkchen steht unter jedem Formular der Seite, also auch
   unter dem Rückrufformular im Kopfbereich. Deshalb beide Selektoren an
   denselben Regeln, statt sie zu verdoppeln. */
.anfrage .consent,
.rueckruf .consent{
  display:flex;flex-direction:row;gap:10px;align-items:flex-start;
  font-size:.86rem;color:var(--tinte-leise);font-weight:400;
}
.anfrage .consent input,
.rueckruf .consent input{width:auto;margin-top:4px;flex:none;}
.anfrage .consent a,
.rueckruf .consent a{color:inherit;text-decoration:underline;}
.rueckruf .consent{font-size:.8rem;}
.pflichtfeld{font-size:.8rem;color:var(--tinte-leise);}

/* display:inline-block ist Pflicht, nicht Kosmetik: Als <a> wäre der Knopf
   ein Inline-Element — sein oberer Abstand würde ignoriert und seine
   Polsterung überlappte die Zeile darüber, statt Platz zu schaffen. Bei
   <button> ändert die Zeile nichts, der ist von sich aus inline-block. */
.knopf{
  display:inline-block;
  align-self:flex-start;
  background:var(--flut);color:var(--auf-flut);
  border:var(--kante) solid var(--flut-kante);
  font:inherit;font-size:1rem;font-weight:800;
  padding:14px 28px;cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}
.knopf:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--flut-kante);}
.knopf:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none;}

/* ============================================================
   Gemeinsame Seiten — Kunden, Über uns, Karriere, Kontakt
   ============================================================ */

.seitenkopf .augenbraue{
  font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:14px;
}
/* Seit dem 24.09.2026 ist der Kicker auf der Startseite kurz („Software für
   Non-Profit-Organisationen“ statt mit vorangestelltem Produktnamen) — das
   schafft Platz für eine größere Schrift als der Standardwert oben. Muss
   NACH „.seitenkopf .augenbraue“ stehen: gleiche Spezifität (zwei Klassen),
   sonst gewinnt die spätere Regel im Stylesheet unabhängig vom Inhalt. */
.startkopf .augenbraue{font-size:1.05rem;}
/* Optionale Zwischenüberschrift über einem Blocktitel (Über uns, Karriere;
   seit 17.10.2026 im Backend pflegbar, standardmäßig leer). */
.block > .huelle > .augenbraue{
  font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:10px;
}

/* ---------- Filter über der Kundenwand ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px;}
.chip{
  font:inherit;font-size:.88rem;font-weight:700;
  background:var(--karte);color:var(--auf-karte);
  border:var(--kante) solid var(--tinte);
  padding:9px 16px;cursor:pointer;
}
.chip[aria-pressed="true"]{
  background:var(--flut);color:var(--auf-flut);border-color:var(--flut-kante);
}

/* ---------- Kundenwand ---------- */
.logowand-einleitung{
  margin-bottom:12px;font-size:.9rem;color:var(--tinte-leise);max-width:66ch;
}
.logowand{
  display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(140px,auto);gap:12px;
  margin-bottom:var(--luft);
}
/* Mindest-Zeilenhöhe (grid-auto-rows) statt nur min-height am li: eine
   Kachel mit Logo + Namenszeile darunter (schema/kunden.php Feld
   „logo_name_zeigen“, z. B. die Arenberg-Stiftung) ist höher als die reinen
   Logo-Kacheln — ohne gemeinsame Zeilenhöhe wäre nur ihre eigene Zeile
   größer, alle anderen blieben kleiner. 140px ist die Höhe dieser Kachel
   bei vier Spalten; „auto“ statt eines starren Werts lässt die Zeile bei
   schmaleren Kacheln (z. B. zwei Spalten auf Mobilgeräten) weiter wachsen,
   falls der Name dort auf mehr Zeilen umbricht — sonst liefe der Text über
   den Kachelrand hinaus. */
.logowand li{
  background:var(--karte);color:var(--auf-karte);
  border:var(--kante) solid var(--tinte);
  padding:16px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-weight:700;font-size:.95rem;
}
/* Logo als Bild statt Name als Text (schema/kunden.php, Feld „logo“):
   knapperes Polster als bei den Textkacheln, damit das Bild den Kasten
   möglichst ausfüllt; width/height am img (aus b4it_bildmasse()) geben
   das Seitenverhältnis vor, object-fit:contain skaliert bis zum Rand,
   ohne es zu verzerren oder abzuschneiden. In Farbe, nicht Graustufen —
   Wiedererkennbarkeit war hier wichtiger als ein ruhigeres Rasterbild.

   max-height als feste Pixelgrenze, nicht als Prozentwert: .logowand li
   hat nur eine Mindesthöhe (min-height), keine feste Höhe — Prozent
   bezieht sich dann auf nichts Bestimmtes und wirkt in mehreren Browsern
   wie "kein Limit". Sichtbar geworden bei quadratischen oder breiten
   Logos (z. B. Bundesnetzagentur, fast quadratisch): max-width:100%
   allein ließ sie über den Kastenrand hinauswachsen, weil die Höhe an
   der vollen Kachelbreite hing statt an einer eigenen Grenze. */
.logowand li.mit-logo{padding:10px;}
/* max-height an der 140px hohen Kachel ausgerichtet (120px Innenraum nach
   Abzug der 10px Polsterung oben/unten): so groß wie möglich, ohne Rand zu
   berühren. */
.logowand li img{
  max-width:100%;max-height:108px;width:auto;height:auto;object-fit:contain;
}
/* Für Logos ohne eigenen lesbaren Schriftzug (z. B. ein reines Wappen,
   schema/kunden.php Feld „logo_name_zeigen“): Name als kleine Zeile unter
   dem Bild statt der reinen Zentrierung, deshalb eigene Spaltenrichtung
   und ein kleineres Bild-Limit, damit beides in die Kachel passt. */
.logowand li.mit-logo-name{flex-direction:column;gap:6px;}
.logowand li.mit-logo-name img{max-height:62px;}
.logowand-name{font-size:.78rem;font-weight:700;color:var(--auf-karte);}

/* ---------- Fallbeispiele ---------- */
.faelle{display:flex;flex-direction:column;gap:14px;}
.fall{
  background:var(--karte);color:var(--auf-karte);
  border:var(--kante) solid var(--tinte);padding:24px;
  display:grid;grid-template-columns:.85fr 1.6fr 170px;gap:26px;align-items:start;
}
.fall-org{font-weight:800;font-size:1.05rem;letter-spacing:-.01em;}
/* Zusätzlich zum Namenstext, nicht statt dessen (schema/kunden.php, Feld
   „logo“ bei „faelle“) — leer heißt: kein Logo, nur der Name wie bisher. */
.fall-logo{display:block;max-width:100%;max-height:40px;width:auto;height:auto;object-fit:contain;margin-bottom:8px;}
.fall-sektor{font-size:.84rem;color:var(--karte-leise);margin-top:3px;}
.fall-zitat{margin:0;}
/* min-height auf vier Zeilen (aktuell längstes Zitat, Arenberg-Karte):
   ohne feste Höhe steht „Name, Funktion“ je nach Zitatlänge unterschiedlich
   hoch — mit fester Höhe stehen alle drei Karten in einer Flucht. */
.fall-zitat blockquote{margin:0;font-size:1rem;line-height:1.55;min-height:6.2em;}
/* Name und Funktion sind optional (siehe schema/kunden.php) — ohne Namen
   bleibt das Zitat anonym, die figcaption fehlt dann ganz statt leer zu
   stehen. */
.fall-zitat figcaption{margin-top:8px;font-size:.84rem;color:var(--karte-leise);}
.fall-zitat figcaption strong{font-weight:800;color:var(--auf-karte);}
.fall-zahl{
  font-size:1.9rem;font-weight:800;letter-spacing:-.03em;line-height:1;
  text-align:right;font-variant-numeric:tabular-nums;
}
.fall-zahl span{
  display:block;font-size:.76rem;font-weight:600;letter-spacing:0;
  color:var(--karte-leise);margin-top:6px;
}

/* ---------- Fließtext ---------- */
.prosa{display:flex;flex-direction:column;gap:16px;max-width:68ch;font-size:1.02rem;}
.prosa p{margin:0;}

/* ---------- Werte ----------
   Die Anzahl wird im Backend gepflegt. Eine feste Spaltenzahl ließe je nach
   Anzahl eine Karte allein in der letzten Reihe stehen; auto-fit verteilt
   stattdessen auf so viele Spalten, wie sauber nebeneinander passen. */
.werte{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;}
.werte li{
  background:var(--karte);color:var(--auf-karte);
  border:var(--kante) solid var(--tinte);padding:20px;
  display:flex;flex-direction:column;gap:8px;
}
.werte strong{
  font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
}
.werte span{font-size:.92rem;color:var(--karte-leise);line-height:1.55;}

/* ---------- Team ---------- */
/* Feste zwei Spalten: die Bereichskarten teilen sich die volle Breite,
   die Karte mit Foto liegt darüber (grid-column 1/-1). */
.team{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.team li{
  background:var(--karte);color:var(--auf-karte);
  border:var(--kante) solid var(--tinte);padding:24px 28px;
  display:flex;gap:20px;align-items:flex-start;
}
.team h3{margin:0 0 6px;font-size:1.2rem;font-weight:800;letter-spacing:-.01em;}
.team p{margin:0;font-size:.98rem;color:var(--karte-leise);line-height:1.6;}
/* Person mit Foto (Geschäftsführung): volle Breite, großes rundes Porträt.
   Das Ausgangsbild ist schon kreisrund auf Weiß — clip-path schneidet den
   weißen Rand weg, damit er im dunklen Modus nicht als Ring erscheint. */
.team li.mit-foto{grid-column:1/-1;align-items:center;gap:28px;padding:24px 28px;}
.team-foto{
  flex:none;width:140px;height:140px;border-radius:50%;
  object-fit:cover;clip-path:circle(46%);
}
.team li.mit-foto h3{font-size:1.4rem;margin-bottom:2px;}
.team .team-funktion{
  margin:0 0 10px;font-size:.78rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--auf-karte);
}
.team li.mit-foto p:last-child{font-size:1rem;max-width:72ch;}
@media (max-width:720px){
  .team{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .team li{padding:20px;}
  .team li.mit-foto{flex-direction:column;align-items:flex-start;gap:16px;}
  .team-foto{width:112px;height:112px;}
}

/* ---------- Hosting-Feld ---------- */
.hosting{
  background:var(--flut);color:var(--auf-flut);
  border:var(--kante) solid var(--flut-kante);padding:28px;
  display:flex;justify-content:space-between;align-items:center;gap:26px;flex-wrap:wrap;
}
.hosting h2{font-size:1.35rem;font-weight:800;letter-spacing:-.02em;margin:8px 0 10px;}
.hosting p{max-width:58ch;font-size:.95rem;}
.hosting .augenbraue{
  font-size:.76rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}
.hosting-marke{
  flex:none;border:var(--kante) solid currentColor;padding:11px 18px;
  font-weight:800;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;
}

/* ---------- Stellen ---------- */
.stellen{display:flex;flex-direction:column;gap:14px;}
.stelle{
  background:var(--karte);color:var(--auf-karte);
  border:var(--kante) solid var(--tinte);padding:20px 24px;
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
}
.stelle h3{margin:0 0 9px;font-size:1.15rem;font-weight:800;letter-spacing:-.02em;}
.marken{display:flex;gap:8px;flex-wrap:wrap;}
.marken span{
  border:var(--kante) solid var(--karte-leise);padding:4px 10px;
  font-size:.8rem;font-weight:600;
}
.knopf-schlicht{
  border:var(--kante) solid var(--tinte);color:var(--tinte);
  padding:11px 20px;font-size:.9rem;font-weight:700;text-decoration:none;flex:none;
}
.knopf-schlicht:hover{background:var(--tinte);color:var(--grund);}

/* ---------- Kontaktfläche ---------- */
.kontaktflaeche{
  display:grid;grid-template-columns:.9fr 1.1fr;
  border:var(--kante) solid var(--flut-kante);
}
.kontakt-info{
  background:var(--flut);color:var(--auf-flut);padding:32px;
  display:flex;flex-direction:column;
}
.kontakt-info h2{font-size:1.35rem;font-weight:800;letter-spacing:-.02em;margin:8px 0 0;}
.kontakt-info .augenbraue{
  font-size:.76rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}
.schritte{display:flex;flex-direction:column;gap:14px;margin:22px 0 26px;}
.schritte li{display:flex;gap:14px;align-items:flex-start;font-size:.95rem;}
.schritte .nr{
  flex:none;width:28px;height:28px;display:grid;place-items:center;
  border:var(--kante) solid currentColor;font-weight:800;font-size:.85rem;
}
.direkt{display:flex;flex-direction:column;gap:7px;font-weight:700;margin-top:auto;}
.direkt a{text-decoration:none;border-bottom:2px solid currentColor;align-self:flex-start;}
.direkt-zeile{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;}
.direkt-zeile > span{font-weight:500;font-size:.9rem;min-width:5.5em;}
.kontakt-formular{padding:32px;}
.kontakt-formular .anfrage{margin-top:0;max-width:none;}

/* ---------- Erweiterungen am Formular ---------- */
.anfrage select{
  font:inherit;font-size:1rem;
  background:var(--karte);color:var(--auf-karte);
  border:var(--kante) solid var(--tinte);
  padding:11px 13px;width:100%;
}
.anfrage .hochladen{
  border:var(--kante) dashed var(--tinte-leise);
  padding:18px;text-align:center;cursor:pointer;
  font-size:.9rem;color:var(--tinte-leise);
  align-items:center;gap:4px;
}
.anfrage .hochladen:hover{border-color:var(--tinte);color:var(--tinte);}
/* Das Dateifeld bleibt bedienbar per Tastatur, ist aber nicht zu sehen —
   sichtbar ist die gestrichelte Fläche darum. */
.anfrage .hochladen input[type="file"]{position:absolute;left:-9999px;width:1px;}
.anfrage .hochladen:focus-within{outline:3px solid var(--flut);outline-offset:2px;}

/* ============================================================
   Rechtstexte und Dankeseite
   ============================================================ */

/* Zweispaltig mit Sprungmarken links; ohne Marken steht nur der Text. */
.rechtstext{display:grid;grid-template-columns:220px 1fr;gap:48px;align-items:start;}
.rechtstext.ohne-marken{grid-template-columns:1fr;}

.sprungmarken{
  position:sticky;top:24px;
  display:flex;flex-direction:column;gap:2px;
  border-left:var(--kante) solid var(--tinte);padding-left:16px;
}
.sprungmarken a{
  font-size:.86rem;color:var(--tinte-leise);text-decoration:none;padding:5px 0;
}
.sprungmarken a:hover{color:var(--tinte);text-decoration:underline;}

.dokument{max-width:70ch;}
.dokument h2{
  font-size:1.15rem;font-weight:800;letter-spacing:-.015em;
  margin:32px 0 10px;
}
.dokument h2:first-of-type{margin-top:0;}
.dokument p{margin:0 0 12px;font-size:.98rem;line-height:1.65;}
.dokument ul{margin:0 0 16px;padding-left:0;}
.dokument li{
  font-size:.98rem;line-height:1.6;padding-left:18px;position:relative;margin-bottom:6px;
}
.dokument li::before{content:"—";position:absolute;left:0;color:var(--tinte-leise);}
.hinweiskasten{
  border:var(--kante) solid var(--flut-kante);background:var(--flut);color:var(--auf-flut);
  padding:18px 20px;margin:0 0 28px;font-size:.94rem;font-weight:600;
}

/* ---------- Dankeseite ---------- */
.danke{
  background:var(--karte);color:var(--auf-karte);
  border:var(--kante) solid var(--tinte);padding:44px;max-width:620px;
  display:flex;flex-direction:column;align-items:flex-start;gap:16px;
}
.danke .haken{
  width:52px;height:52px;display:grid;place-items:center;
  background:var(--flut);color:var(--auf-flut);
  border:var(--kante) solid var(--flut-kante);
}
.danke .haken svg{width:28px;height:28px;display:block;}
.danke h1{font-size:1.9rem;font-weight:800;letter-spacing:-.03em;line-height:1.1;}
.danke p{font-size:1rem;color:var(--karte-leise);line-height:1.6;}

/* ============================================================
   Kampagnen-Landingpages
   ============================================================
   Diese Seiten benutzen ansonsten dasselbe Baukastenmaterial wie alle
   anderen — seitenkopf, augenbraue, nutzen, knopf. Neu ist nur der
   Abschlusskasten, und dass der Kopf ohne Menü auskommt: Ohne .hauptnavi
   in der Mitte schiebt die vorhandene Regel justify-content:space-between
   das Logo nach links und den Schalter nach rechts, was genau richtig ist.

   Der Weg weiter ist der einzige Ausgang der Seite und bekommt deshalb einen
   eigenen Rahmen — dieselbe Bauart wie der Kasten der Dankeseite.

   Breite seit dem 21.09.2026 an eine Karte aus .nutzen angeglichen (50 %
   minus die halbe Rasterlücke von 14px), statt einer festen 720px-Grenze —
   der Kasten soll optisch wie eine dritte Kartenreihe wirken, nicht breiter
   als die Karten darüber. Auf dem Telefon geht .nutzen auf eine Spalte,
   dort deshalb auch .weiterweg auf volle Breite (siehe Media Query unten). */
.weiterweg{
  background:var(--karte);color:var(--auf-karte);
  border:var(--kante) solid var(--tinte);padding:36px;
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  width:calc(50% - 7px);
}
.weiterweg h2{font-size:1.6rem;font-weight:800;letter-spacing:-.03em;line-height:1.12;}
.weiterweg p{font-size:1rem;color:var(--karte-leise);line-height:1.6;max-width:52ch;}

/* Der Knopf ist hier ein Verweis, kein Formularknopf: Unterstreichung weg,
   und ein Lidschlag Abstand nach oben. Alles Übrige erbt er von .knopf.

   text-wrap:balance, weil die Beschriftungen lang sind — „Zur Lösung für
   Fundraising-Organisationen" braucht auf dem Handy drei Zeilen und bräche
   sonst in eine lange, eine kurze und eine halbe. */
.weiterweg .knopf{text-decoration:none;margin-top:8px;text-wrap:balance;}

/* ============================================================
   Startseite — Abschnitte nach dem Briefing vom 21.08.2026
   ============================================================ */

/* ---------- Rückruf: Knopf und Fenster ----------
   Der einzige Aufruf zum Handeln der Seite. Er stand zwischenzeitlich als
   Karte im Kopfbereich und danach als Band quer darunter — beides nahm mehr
   Raum, als einem von acht Abschnitten zusteht. Jetzt öffnet ein Knopf ein
   Fenster; das Formular kommt erst, wenn jemand es will, und hat dann die
   ganze Aufmerksamkeit.

   Der Knopf im Kopfbereich steht auf dem Grün und braucht deshalb die
   Kartenfarben statt der Flut — sonst stünde Grün auf Grün. */
.seitenkopf .knopf.ruf-auf{
  margin-top:22px;text-decoration:none;
  background:var(--karte);color:var(--auf-karte);
  border-color:var(--auf-karte);
}
.weiterweg .knopf.ruf-auf{text-decoration:none;}

/* Das Fenster. Ohne Skript klappt es über :target an Ort und Stelle auf —
   dann ohne abdunkelnden Grund, aber vollständig bedienbar. */
.rueckruffenster{
  border:var(--kante) solid var(--flut-kante);
  background:var(--karte);color:var(--auf-karte);
  padding:28px;
  width:min(100% - 2 * var(--rand), 460px);
}
.rueckruffenster::backdrop{background:rgb(13 20 16 / .6);}
.rueckruffenster:target{display:block;margin-inline:auto;}
/* Das Angebotsformular der Zielgruppenseiten hat mehr Felder als das
   Rückruf-Formular der Startseite und stellt Vorname/Nachname sowie
   E-Mail/Telefon nebeneinander (.feldpaar) — bei 460px wirkten die Paare
   gequetscht. min() sorgt weiterhin dafür, dass auf schmalen Bildschirmen
   nie mehr als der verfügbare Platz genutzt wird. */
#angebotFenster{width:min(100% - 2 * var(--rand), 560px);}
/* Das Bewerbungsformular hat dieselben Vorname/Nachname- und E-Mail/Position-
   Paare wie das Angebotsformular, dazu noch den Datei-Upload — braucht
   deshalb dieselbe Breite. */
#bewerbungFenster{width:min(100% - 2 * var(--rand), 560px);}

.fenster-zu{display:flex;justify-content:flex-end;margin-bottom:-14px;}
.fenster-zu-knopf{
  background:none;border:none;color:inherit;cursor:pointer;
  padding:4px;line-height:0;
}
.fenster-zu-knopf svg{width:22px;height:22px;display:block;}

.rueckruf{display:flex;flex-direction:column;gap:12px;}
.rueckruf h2{
  font-size:1.15rem;font-weight:800;line-height:1.3;
  padding-bottom:14px;border-bottom:1px solid var(--karte-leise);
  text-wrap:balance;
}
.rueckruf label{display:flex;flex-direction:column;gap:5px;}
.rueckruf label > span{font-size:.84rem;font-weight:700;}
.rueckruf label em{font-style:normal;color:var(--karte-leise);}
.rueckruf input,
.rueckruf textarea{
  font:inherit;font-size:1rem;
  background:var(--karte);color:var(--auf-karte);
  border:var(--kante) solid var(--auf-karte);
  padding:10px 12px;width:100%;
}
.rueckruf textarea{resize:vertical;min-height:84px;}
.rueckruf .knopf{align-self:stretch;text-align:center;margin-top:2px;}
.mikrotext{font-size:.8rem;line-height:1.5;color:var(--karte-leise);}
.weiterweg .mikrotext{color:var(--tinte-leise);}
.mikrotext a{color:inherit;}

/* ---------- Vertrauensleiste ----------
   Dezent, direkt unter dem Kopfbereich. Kein Kasten, keine Farbe — sie soll
   belegen, nicht werben. Die drei Einträge stehen gleichmäßig verteilt über
   die Breite: justify-content statt fester Lücken, damit die kurze letzte
   Aussage nicht einfach neben der langen ersten klebt. */
.vertrauensleiste ul{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 34px;
  padding-block:16px;
  font-size:.88rem;font-weight:600;
}
.vertrauensleiste li{display:flex;align-items:center;gap:9px;}
.vertrauensleiste svg{width:17px;height:17px;flex:none;color:var(--navi);}

/* ---------- Die drei Kernmodule (Startseite) ----------
   Drei gleich breite Spalten — die drei fachlichen Bereiche einer Stiftung.
   Eigene Klasse „saeulen“ statt der geteilten „kernmodule“: Seit die Seite
   „Softwaremodule“ ein auto-fill-Raster für beliebig viele Karten braucht
   (siehe unten), passt eine feste Drei-Spalten-Regel nicht mehr zu diesem
   Klassennamen. Karte und Innenleben („kernmodul“, „modul-nr“, „modul-name“,
   „modul-text“) sind auf beiden Seiten gleich und bleiben deshalb geteilt. */
.saeulen{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px;}
/* Nur auf der Startseite: Diese drei Karten stehen auf demselben hellen
   Seitengrund wie der Rest der Unterseiten (--karte war dort praktisch
   identisch mit --grund, im Dunkelmodus sogar exakt derselbe Wert — die
   Karten verschwanden optisch). Markengrün (--flut) statt --karte hebt sie
   sichtbar vom Untergrund ab. Höhere Spezifität durch den Vorfahren-Selektor
   siegt zuverlässig über die geteilte .kernmodul-Regel unten, unabhängig von
   der Reihenfolge im Stylesheet. Betrifft bewusst nur „saeulen“, nicht die
   21 Karten auf softwaremodule.php (Klasse „kernmodule“), die weiterhin auf
   --karte stehen. */
.saeulen .kernmodul{
  background:var(--flut);color:var(--auf-flut);
  border-color:var(--flut-kante);
}
/* .modul-text ist sonst gedämpft (--karte-leise), kalibriert für die
   weiße/fast-schwarze .kernmodul-Karte anderswo — auf dem satten Grün hier
   war der Kontrast zu schwach. Volle Textfarbe wie Zahl und Überschrift. */
.saeulen .modul-text{color:var(--auf-flut);}

.kernmodul{
  background:var(--karte);color:var(--auf-karte);
  border:var(--kante) solid var(--tinte);
  padding:22px;
  display:flex;flex-direction:column;
  scroll-margin-top:24px;
}

/* Die Nummer ist reine Lesehilfe — sie sagt „so viele Module“, bevor
   jemand zählt. Deshalb aria-hidden im Markup: vorgelesen wäre sie eine
   Ziffer ohne Bedeutung. */
.modul-nr{
  font-size:.76rem;font-weight:800;letter-spacing:.16em;
  color:var(--karte-leise);margin-bottom:10px;
}
.modul-name{
  font-size:1.25rem;font-weight:800;letter-spacing:-.02em;line-height:1.2;
  margin:0 0 8px;
}
.modul-text{font-size:.92rem;color:var(--karte-leise);line-height:1.55;margin-bottom:6px;}

/* Die Schlagwörter benennen das Anliegen der Besucherin, statt eine
   Funktion zu erklären — deshalb kurze Begriffe als Chips statt Fließtext
   mit Name und Beschreibung, je einer pro Zeile statt nebeneinander
   umbrechend. Nur auf der Startseite im Einsatz, die Softwaremodule-Seite
   zeigt je Karte nur Name und Text ohne Schlagwortliste.
   align-items:flex-start hält jeden Chip bei seiner eigenen Breite, statt
   ihn über die ganze Spalte zu strecken. margin-top:auto schiebt die Liste
   in Spalten mit weniger Wörtern ans untere Ende, damit die drei Kästen
   trotz unterschiedlich vieler Schlagwörter auf gleicher Höhe abschließen. */
.modul-schlagworte{
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  margin-top:auto;padding-top:14px;
  border-top:1px solid var(--karte-leise);
}
.modul-schlagworte li{
  font-size:.8rem;font-weight:700;line-height:1.3;
  background:var(--grund);color:var(--tinte);
  border:1px solid var(--karte-leise);
  padding:6px 12px;
}
/* Auf den grünen Kernmodul-Karten der Startseite (.saeulen) bewusst
   festes Weiß statt --grund: Die Chips sollen sich als eigene kleine
   Textkarten vom Grün abheben, unabhängig vom Hell-/Dunkelmodus — mit
   --grund wären sie im Dunkelmodus genauso dunkel wie die Karte selbst. */
.saeulen .modul-schlagworte li{
  background:#FFFFFF;color:#0D1410;border-color:#0D1410;
}

/* Sprechblase je Schlagwort, sobald schema/index.php (Gruppe
   „kernmodule_schlagworte“, Feld „softwaremodul_nr“) eine Modulnummer
   trägt — zeigt Titel und vollen Text des verknüpften Softwaremoduls aus
   softwaremodule.php (siehe $sprechblase_fuer in index.php). Reines CSS
   über :hover/:focus-visible und attr(): kein Extra-Markup, keine
   Bildschirmleser-Ausgabe (der Inhalt ist eine Ergänzung, kein Ersatztext),
   aber auch kein Touch-Zugriff auf Mobilgeräten ohne Hover — dort bleibt
   nur das Schlagwort selbst sichtbar, wie bisher.

   white-space:pre-line statt nowrap: Der Inhalt ist jetzt ein ganzer
   Modultext (bis zu ~400 Zeichen, bei mehreren Nummern mehrere Absätze,
   getrennt durch \n\n aus PHP) statt eines kurzen Labels — feste Breite
   und Zeilenumbruch statt einer einzigen sehr langen Zeile. */
.mit-sprechblase{position:relative;cursor:help;}
.mit-sprechblase::after{
  content:attr(data-sprechblase);
  position:absolute;bottom:calc(100% + 10px);left:50%;
  transform:translateX(-50%);
  width:max-content;max-width:280px;
  background:var(--grund);color:var(--tinte);
  font-size:.76rem;font-weight:500;line-height:1.5;white-space:pre-line;text-align:left;
  padding:10px 12px;
  border:var(--kante) solid var(--tinte);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .12s ease;
  z-index:5;
}
.mit-sprechblase::before{
  content:"";position:absolute;bottom:100%;left:50%;
  transform:translateX(-50%);
  border:6px solid transparent;border-top-color:var(--tinte);
  margin-bottom:-2px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .12s ease;
  z-index:5;
}
.mit-sprechblase:hover::after,.mit-sprechblase:hover::before,
.mit-sprechblase:focus-visible::after,.mit-sprechblase:focus-visible::before{
  opacity:1;visibility:visible;
}

/* ---------- Alle Softwaremodule (eigene Seite) ----------
   Hier gibt es keine drei Bereiche, sondern 21 einzelne, voneinander
   unabhängige Module (Stand 09.09.2026) — jede Karte zeigt genau eines für
   sich, ohne Gruppierung und ohne Schlagwortliste darunter.

   Feste drei Spalten wie bei „saeulen“: Das ursprüngliche auto-fill-Raster
   passte bei 1040 px vier statt drei schmalere Karten nebeneinander — bei
   den beschreibungslastigen Modultexten wirkten die Karten dadurch eng.
   Drei breitere Spalten lesen sich ruhiger; wächst die Liste, entstehen
   einfach weitere Reihen.

   grid-auto-rows: Ohne feste Mindesthöhe streckt CSS Grid jede Zeile nur auf
   die höchste Karte DIESER Zeile — bei 21 Karten mit unterschiedlich langen
   Modultexten wirkten die Zeilen dadurch uneinheitlich hoch (die erste Zeile
   z. B. deutlich niedriger als die meisten anderen). 421px ist die Höhe der
   von Natur aus höchsten Karte („Stiftergemeinschaften“) bei drei Spalten;
   „auto“ lässt eine Zeile trotzdem weiterwachsen, falls eine künftige Karte
   noch mehr Text braucht. */
.kernmodule{
  display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(421px,auto);
  gap:14px;margin-top:34px;
}

/* Das Häkchen-Tag am Fuß jeder Karte, mit dem ein Modul für die Anfrage
   ausgewählt wird (softwaremodule.php, ein einziges <form> über Karten und
   Anfrageformular). Die echte Checkbox bleibt bedienbar (Tastatur, Screen­
   reader), ist aber visuell verborgen — sichtbar ist nur ihr Geschwister­
   element <span>, das wie ein Chip aussieht und beim Anhaken auf die
   Flutfarbe wechselt, dieselbe Sprache wie die Branchenfilter-Chips auf der
   Kundenseite (.chip[aria-pressed="true"]). margin-top:auto schiebt das Tag
   in Karten mit kürzerem Text ans untere Ende — dieselbe Technik wie bei
   „modul-schlagworte“ oben —, damit alle Karten einer Reihe trotz
   unterschiedlich langer Beschreibungen auf gleicher Höhe abschließen. */
.modul-tag{
  display:block;margin-top:auto;padding-top:14px;
  border-top:1px solid var(--karte-leise);
}
.modul-tag input{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.modul-tag span{
  display:inline-block;cursor:pointer;
  font-size:.82rem;font-weight:700;
  padding:8px 14px;
  border:var(--kante) solid var(--karte-leise);color:var(--auf-karte);
}
.modul-tag input:checked + span{
  background:var(--flut);color:var(--auf-flut);border-color:var(--flut-kante);
}
.modul-tag input:focus-visible + span{outline:3px solid var(--flut);outline-offset:2px;}

/* Zusammenfassung der Auswahl im Kopf des Anfrage-Fensters (#modulAuswahlListe,
   von assets/js/seite.js befüllt) — dieselbe Flutfarbe wie ein angehakter
   Chip an den Karten, damit die Auswahl im Fenster wiedererkennbar bleibt.
   #modulAuswahlHinweis ("Diese Module interessieren Sie.") steht nur, wenn
   auch die Liste steht, und wird vom selben Skript ein-/ausgeblendet. */
.modul-auswahl-hinweis{font-size:.86rem;font-weight:700;margin:0 0 8px;}
.modul-auswahl-liste{
  display:flex;flex-wrap:wrap;gap:6px;
  margin:0 0 18px;padding:0;list-style:none;
}
.modul-auswahl-liste li{
  font-size:.78rem;font-weight:700;
  padding:6px 12px;
  background:var(--flut);color:var(--auf-flut);
  border:1px solid var(--flut-kante);
}

/* Schwebende Leiste, die die Auswahl bestätigt (assets/js/seite.js zählt
   die angehakten Häkchen und blendet die Leiste ein). Ohne Skript bleibt
   sie über [hidden] verborgen — das Formular ist dann trotzdem über die
   normale Seite erreichbar, nur ohne diese Komfort-Ebene. */
/* So knapp wie möglich: Die Flutfarbe allein macht die Leiste schon
   erkennbar, sie muss dafür nicht groß sein. Eigene, kleinere Fassung des
   Knopfs statt der Standard-.knopf-Maße (14px/28px Polster, 1rem) — die
   passen für den einen Aufruf einer Seite, nicht für einen Hinweisstreifen. */
.auswahl-leiste{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  background:var(--flut);color:var(--auf-flut);
  border-top:var(--kante) solid var(--flut-kante);
  padding-block:8px;
}
.auswahl-leiste-innen{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px;
  font-size:.78rem;font-weight:700;
}
.auswahl-leiste-status{display:flex;flex-wrap:wrap;align-items:center;gap:14px;}
/* Zurücksetzen ist der Nebenweg neben „Jetzt anfragen“ — deshalb als
   unterstrichener Text statt als zweiter Knopf, sonst konkurrieren beide
   um dieselbe Aufmerksamkeit auf der schmalen Leiste. */
.auswahl-zuruecksetzen{
  background:none;border:none;padding:0;
  font:inherit;font-size:.78rem;font-weight:700;
  color:inherit;text-decoration:underline;text-underline-offset:2px;
  cursor:pointer;
}
.auswahl-zuruecksetzen:hover{text-decoration-thickness:2px;}
/* Die Anzahl der ausgewählten Module ist die eigentliche Nachricht der
   Leiste — deutlich größer als der geerbte Basiswert von .auswahl-leiste-innen. */
#auswahlZaehler{font-size:1.3rem;}
.auswahl-leiste .knopf.anfrage-knopf{
  padding:7px 14px;font-size:.8rem;font-weight:700;
  text-decoration:none;
}
/* Reserviert Platz am Fußende, solange die Leiste eingeblendet ist, damit
   sie den Abschluss-Knopf und die Fußzeile nicht überdeckt. Die Klasse
   setzt und entfernt dasselbe Skript, das die Leiste ein- und ausblendet. */
body.hat-auswahl-leiste{padding-bottom:60px;}

/* Beide Knöpfe stehen auf der Flutfarbe (Abschlussband bzw. Auswahl-Leiste)
   und brauchen deshalb dieselbe Umkehrung wie der Rückruf-Knopf im
   Kopfbereich — sonst verschwindet ein flutfarbener Knopf auf flutfarbenem
   Grund. Siehe .seitenkopf .knopf.ruf-auf weiter unten. */
.seitenkopf .knopf.anfrage-knopf,
.auswahl-leiste .knopf.anfrage-knopf{
  background:var(--karte);color:var(--auf-karte);border-color:var(--auf-karte);
}
.seitenkopf .knopf.anfrage-knopf{margin-top:22px;}

/* ---------- Vertrauen und Sicherheit ----------
   Drei nachprüfbare Punkte, darunter der Kundenbeleg. Die Punkte tragen
   keine Kastenkante, sondern nur das Zeichen davor: Sie sollen belegen,
   nicht werben — dieselbe Zurückhaltung wie in der Vertrauensleiste oben. */
.sicherheit{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 26px;margin-top:34px;}
.sicherheit li{display:flex;flex-direction:column;gap:5px;}
.sicherheit svg{width:26px;height:26px;color:var(--navi);margin-bottom:3px;}
.sicherheit strong{font-size:1rem;font-weight:800;line-height:1.3;}
.sicherheit span{font-size:.88rem;color:var(--tinte-leise);line-height:1.55;}

/* Der Beleg steht auf --karte und hebt sich damit als einziges Element des
   Abschnitts vom Seitengrund ab. Das ist Absicht: Die Punkte darüber sind
   Behauptungen des Hauses, das Zitat ist die Aussage eines Dritten.

   Die Karte war bis zum 09.09.2026 so breit wie die ganze Spalte (1040 px),
   während .beleg das Zitat selbst auf 60ch deckelt — bei großer, fetter
   Zitat-Schrift sind lange Zeilen sonst unangenehm zu lesen. Die Karte
   füllte den Rest als leere Fläche rechts, halb Zitat, halb Nichts. 68ch
   sind knapp mehr als die 60ch des Zitats plus die 64px Innenabstand links
   und rechts (box-sizing:border-box zählt das Polster zur Breite dazu) —
   die Karte passt sich jetzt dem Inhalt an, statt umgekehrt. */
.belegfeld{
  margin-top:34px;max-width:68ch;
  background:var(--karte);color:var(--auf-karte);
  border:var(--kante) solid var(--flut-kante);
  padding:30px 32px 26px;
}

/* ---------- Kundenbeleg ---------- */
.beleg{margin:0;max-width:60ch;}
.beleg blockquote{margin:0;}
.beleg blockquote p{
  font-size:1.3rem;line-height:1.45;font-weight:600;letter-spacing:-.01em;
  text-wrap:balance;
}
.beleg figcaption{
  margin-top:16px;display:flex;flex-direction:column;gap:2px;
  font-size:.9rem;
}
.beleg figcaption strong{font-weight:800;}
/* --karte-leise statt --tinte-leise: Der Beleg liegt seit dem Umbau auf
   einer Karte, nicht mehr auf dem Seitengrund. Beide Werte sind derzeit
   gleich; getrennt bleiben sie, damit eine geänderte Kartenfarbe die
   Zeilen darauf mitnimmt. */
.beleg figcaption span{color:var(--karte-leise);}

.belegreihe{
  margin-top:26px;padding-top:20px;border-top:1px solid var(--karte-leise);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
}
.beleglogos{display:flex;flex-wrap:wrap;gap:12px 26px;font-weight:700;font-size:.95rem;}
.beleglink{font-weight:700;font-size:.9rem;text-decoration:none;border-bottom:2px solid currentColor;}

/* ---------- Abschluss-Aufruf ----------
   Steht auf derselben grünen Fläche wie der Kopfbereich und trägt deshalb
   im Markup dieselbe Klasse .seitenkopf — Breite, Polsterung und die
   Knopffarben, die auf Grün nötig sind, kommen von dort. Hier steht nur,
   was den Abschluss vom Kopf unterscheidet.

   Der Aufruf war vorher ein umrandeter Kasten von 720 px im hellen Bereich.
   Als einer von acht Kästen der Seite ging er unter. Über die volle Breite
   und in Grün ist er das Ende der Seite und nicht bloß ihr letzter
   Abschnitt. */
.abschlussband{padding-block:58px 62px;}
.abschlussband h2{
  font-size:clamp(1.7rem,4vw,2.5rem);
  font-weight:800;letter-spacing:-.03em;line-height:1.14;
  text-wrap:balance;margin-bottom:16px;max-width:20ch;
}
.abschlussband .vorspann{max-width:50ch;}
/* Überschreibt die 50-ch-Grenze für den Abschluss-Text: Der trägt seit
   dem 06.09.2026 einen gesetzten Umbruch vor dem Gedankenstrich (siehe
   schema/index.php, abschluss.text). Bei 50 ch brach die zweite Zeile
   nach dem gesetzten Umbruch noch einmal — und zwar mitten im Produkt­
   namen "Non-Profit-Manager", weil Bindestriche gültige Umbruchstellen
   sind. .abschlussband .vorspann-start braucht dieselbe Spezifität wie
   .abschlussband .vorspann darüber, sonst gewinnt die engere Regel. */
.abschlussband .vorspann-start{max-width:none;}

/* Der Kleintext erbt die Schriftfarbe der Fläche statt der gedämpften
   Kartenfarbe: Gedämpft auf Grün fiele unter die geforderten 4,5:1. Die
   Rufnummer darin ist ein Nebenweg, kein zweiter Aufruf — sie steht
   deshalb im Kleintext und nicht als Knopf daneben. */
.abschlussband .mikrotext{color:inherit;margin-top:18px;font-size:.86rem;}
.abschlussband .mikrotext a{font-weight:700;border-bottom:2px solid currentColor;text-decoration:none;}

/* Dieselbe Erkenntnis wie beim Kleintext oben, jetzt fürs eingebettete
   Anfrageformular der Seite Softwaremodule: Pflichtfeld-Sternchen,
   Pflichtfeld-Hinweis und Einwilligungstext sind sonst in --tinte-leise
   gehalten — gedämpft auf Grün fiele auch das unter 4,5:1. */
.abschlussband .anfrage label em,
.abschlussband .pflichtfeld,
.abschlussband .anfrage .consent{
  color:inherit;
}

/* ---------- Fußband ---------- */
.fussband{
  background:var(--band);color:var(--auf-band);
}
.fussband-innen{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  flex-wrap:wrap;padding-block:14px;font-size:.9rem;
}

/* Beide Siegel stehen frei, ohne weiße Platte. Beide Dateien haben einen
   durchsichtigen Grund — die Platte war reine Kontrastmaßnahme, kein
   Hintergrund. Auf der hellen Tönung tragen sie von selbst:

     Gütesiegel  eine weiße Plakette mit dunkler Schrift. Ihr weißer
                 Körper verschmolz schon vorher mit der Platte; jetzt
                 verschmilzt er mit der Tönung. Auf dunklem Grund steht
                 sie ohne Zutun, deshalb dort keine Umkehr.
     BvdS        einfarbig #0E0E0E, gemessen zu 100 % deckungsgleich mit
                 dunklem Grund. Einfarbig heißt: Umkehren ist
                 verlustfrei — im Dunkelmodus wird daraus eine helle
                 Marke, siehe --siegel-umkehr.

   Die Höhe der Siegel bestimmt die Höhe des ganzen Bandes. 88 px hier
   ergeben 116 px Bandhöhe. Ohne die frühere Polsterung sind die 88 px
   jetzt vollständig Grafik statt 78 — das Band bleibt gleich hoch.

   Zur Einordnung: Ursprünglich waren es 96 px Angabe (138 px Band),
   danach 52 (70 px Band) — dort war die Schrift in den Siegeln zu klein,
   um sie noch zu erkennen. Dieser Wert liegt dazwischen und ist der
   Grund, aus dem die Fußzeile so hoch ist, wie sie ist. */
.siegel{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.siegel img{height:88px;width:auto;display:block;}
.siegel .bvds{filter:var(--siegel-umkehr);}

/* flex-wrap: Die fünf Links in einer Zeile sind 488 px breit — auf dem
   Handy ragten sie über den Rand, und jede Seite ließ sich waagrecht
   verschieben (bei 375 px: 508 statt 375 px, gemessen am 30.09.2026).
   Auf breiten Schirmen passen sie weiter in eine Zeile, dort ändert sich
   nichts. Senkrechter Abstand kleiner als der waagrechte, sonst zerfällt
   der Block auf dem Handy in einzelne Zeilen statt einer Gruppe. */
.fusslinks{display:flex;flex-wrap:wrap;gap:8px 18px;font-weight:600;}
.fusslinks a{text-decoration:none;border-bottom:2px solid transparent;}
.fusslinks a:hover{border-bottom-color:currentColor;}

/* ---------- Kundenportal (portal.php) ----------
   Baut auf den vorhandenen Formularregeln (.anfrage, .consent, .knopf) auf.
   Neu sind nur die Leiste des angemeldeten Bereichs, die Auswahlhäkchen und
   eine Bestätigungsmeldung als Gegenstück zu .formularfehler. */
.portal-leiste{
  width:min(100% - 2 * var(--rand), var(--breite));margin-inline:auto;
  background:var(--flut);color:var(--auf-flut);padding:18px var(--kopfluft);
}
/* baseline: Name und Menüpunkte stehen auf einer Linie (17.10.2026), die
   Organisation darunter, „Abmelden“ unter „Mein Konto“. */
.portal-leiste-innen{width:100%;display:flex;flex-wrap:wrap;align-items:baseline;gap:14px 28px;}
.portal-gruss{font-weight:800;font-size:1.1rem;flex:1 1 220px;}
.portal-gruss span{display:block;font-size:.86rem;font-weight:500;}
.portal-leiste-rechts{display:flex;flex-direction:column;align-items:flex-end;gap:10px;}
.portal-navi{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:flex-start;gap:6px 22px;font-weight:700;}
/* „Mein Konto“ und „Abmelden“ untereinander, der Knopf so breit wie der
   Menüpunkt (stretch + width:100%). */
.portal-navi-letzter{display:inline-flex;flex-direction:column;align-items:stretch;gap:8px;}
.portal-navi-letzter .portal-abmelden,.portal-navi-letzter .portal-abmelden button{width:100%;}
.portal-navi a{text-decoration:none;border-bottom:2px solid transparent;padding:4px 0;}
.portal-navi a:hover,.portal-navi a.hier{border-bottom-color:currentColor;}
/* Bewusst klein (16.10.2026): eine Nebenhandlung, kein Aufruf. */
.portal-abmelden .knopf-schlicht{
  background:none;font:inherit;font-size:.72rem;font-weight:700;cursor:pointer;line-height:1.2;
  border:1.5px solid currentColor;color:inherit;padding:3px 9px;
}
.portal-abmelden .knopf-schlicht:hover{background:var(--auf-flut);color:var(--flut);}
.portal-oben{margin-top:var(--luft);}

.portal-spalten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;align-items:start;}
.portal-spalten .anfrage{margin-top:0;}
.portal-spalten > div > .anfrage + .anfrage{margin-top:40px;}
.portal-formular h2{font-size:1.3rem;font-weight:800;padding-bottom:0;border-bottom:0;}
/* Alle Portalseiten stehen in Karten, zuerst der Einstieg („Schon
   registriert?“ / „Neu hier?“), seit 30.09.2026 auch die übrigen. --karte
   ist im hellen Modus Weiß und hebt sich vom hellgrünen Seitengrund ab; im
   dunklen Modus fast Schwarz wie die übrigen Karten der Seite (.kernmodul).
   .portal-gleich: zwei Karten nebeneinander gleich hoch, der Knopf sitzt in
   beiden unten (margin-top:auto) — so stehen die Knöpfe auf einer Linie,
   auch wenn eine Karte mehr Inhalt hat. */
.portal-gleich{align-items:stretch;}
.portal-karte{
  background:var(--karte);color:var(--auf-karte);
  border:var(--kante) solid var(--tinte);padding:32px;
  display:flex;flex-direction:column;gap:14px;
}
.portal-karte h2{font-size:1.3rem;font-weight:800;}
.portal-karte .portal-erklaerung{color:var(--karte-leise);}
.portal-karte .knopf,.portal-karte > .knopf-schlicht{text-decoration:none;margin-top:auto;}
/* Rechte Spalte der Kontoseite: zwei Karten untereinander. */
.portal-spalten > div > .portal-karte + .portal-karte{margin-top:32px;}
.portal-text.portal-karte{max-width:720px;}
.portal-erklaerung{font-size:.95rem;color:var(--tinte-leise);max-width:60ch;}
.portal-erklaerung.klein{font-size:.84rem;}
.portal-erklaerung a,.portal-text a:not(.knopf-schlicht){color:inherit;text-decoration:underline;}
.portal-text{max-width:60ch;display:flex;flex-direction:column;gap:14px;}
.portal-text .knopf-schlicht{display:inline-block;margin-top:8px;}

.portal-gruppe{border:0;padding:0;margin:0 0 12px;display:flex;flex-direction:column;gap:12px;}
.portal-gruppe legend{font-size:1.3rem;font-weight:800;margin-bottom:6px;padding:0;}
/* Interessen & Newsletter: eine Karte in voller Breite, zwei Spalten. */
.portal-einstellungen{max-width:none;margin-top:0;}
.portal-einstellungen-spalten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 48px;align-items:start;}
/* Bereich nur für Kunden unter den beiden Spalten (17.10.2026), durch eine
   Linie abgesetzt. */
.portal-kunden-bereich{border-top:1px solid var(--karte-leise);padding-top:24px;margin-top:12px;}
/* Erklärtexte über Interessen und Newsletter mindestens zweizeilig hoch,
   damit die ersten Karten beider Spalten auf einer Linie beginnen, auch wenn
   ein Text kürzer ist (17.10.2026). Untereinander (schmal) ohne. */
.portal-einstellungen-spalten:not(.portal-kunden-bereich) > .portal-gruppe > .portal-erklaerung:not(.klein){min-height:3.1em;}
/* Wie .consent, aber als Auswahlkarte: Häkchen links, Name fett, darunter
   die Beschreibung. Zwei Klassen tief aus demselben Grund wie dort. */
.anfrage .wahl{
  display:flex;flex-direction:row;gap:12px;align-items:flex-start;
  border:var(--kante) solid var(--tinte);padding:12px 14px;
  background:var(--karte);color:var(--auf-karte);cursor:pointer;
}
.anfrage .wahl input{width:auto;margin-top:5px;flex:none;}
.anfrage .wahl > span{font-size:.95rem;font-weight:400;}
.anfrage .wahl small{color:var(--karte-leise);}
/* --navi statt --flut: Das Grün des dunklen Modus (--flut) hebt sich vom
   dunklen Grund kaum ab, --navi ist in beiden Modi kräftig genug. */
.anfrage .wahl:has(input:checked){outline:3px solid var(--navi);outline-offset:-1px;}

.formularhinweis{
  background:var(--karte);color:var(--auf-karte);
  border:var(--kante) solid var(--tinte);border-left-width:8px;border-left-color:var(--flut-kante);
  padding:12px 16px;
}
.feldfehler{display:block;font-size:.95rem;font-weight:800;color:var(--fehler);margin-top:4px;}
.feldfehler::before{content:"⚠ ";}
.anfrage input[aria-invalid="true"]{
  border:3px solid var(--fehler);background:var(--fehler-grund);
}

/* Zustimmung im Portal: ein eigener, anklickbarer Kasten mit großem
   Häkchen. Fehlt das Häkchen, wird der ganze Kasten rot und die Meldung
   steht darin — vorher stand sie klein unter dem Kasten und ging unter. */
.zustimmung{
  border:var(--kante) solid var(--tinte);background:var(--karte);color:var(--auf-karte);
  padding:14px 16px;
}
.anfrage .zustimmung .consent{font-size:.95rem;color:inherit;cursor:pointer;gap:14px;align-items:center;}
.anfrage .zustimmung .consent input{width:26px;height:26px;margin:0;accent-color:var(--navi);cursor:pointer;}
.zustimmung .feldfehler{margin:12px 0 0;}
.zustimmung.hat-fehler{border:3px solid var(--fehler);border-left-width:10px;background:var(--fehler-grund);}
.zustimmung.hat-fehler .consent input{outline:3px solid var(--fehler);outline-offset:2px;}
.portal-geraete{list-style:none;padding:0;display:flex;flex-direction:column;gap:10px;}
.portal-geraete li{border-left:4px solid var(--flut);padding-left:12px;}

/* ---------- Portal: Versionshistorie (Modul software) ---------- */
/* Über die volle Breite wie Filter und Versionen darunter — .portal-text
   begrenzt die Karte sonst auf 720 px (Wunsch des Auftraggebers, 16.10.2026). */
.versionen-kopf.portal-text{max-width:none;margin-bottom:28px;}
.versionen-filter{
  display:flex;flex-wrap:wrap;gap:14px 16px;align-items:flex-end;
  background:var(--karte);color:var(--auf-karte);
  border:var(--kante) solid var(--tinte);padding:18px 20px;margin-bottom:22px;
}
.versionen-filter label{display:flex;flex-direction:column;gap:6px;font-size:.84rem;font-weight:700;}
.versionen-filter label:first-of-type{flex:1 1 260px;}
/* Feld, Auswahllisten und Knopf gleich hoch und an der Unterkante bündig:
   .knopf bringt sonst align-self:flex-start und eigene Polsterung mit und
   stand höher als die Felder (16.10.2026). */
.versionen-filter input,.versionen-filter select{
  font:inherit;font-size:.95rem;font-weight:400;padding:0 11px;height:46px;box-sizing:border-box;
  border:var(--kante) solid var(--tinte);background:var(--grund);color:var(--tinte);
}
.versionen-filter .knopf,
.versionen-filter .knopf-schlicht{
  margin:0;align-self:flex-end;height:46px;box-sizing:border-box;
  padding:0 24px;display:inline-flex;align-items:center;
}
.versionen-filter .knopf-schlicht{padding:0 18px;}
.versionen-treffer{font-weight:800;margin:0 0 14px;}
.versionen{display:flex;flex-direction:column;gap:14px;}
.version{background:var(--karte);color:var(--auf-karte);border:var(--kante) solid var(--tinte);}
.version > summary{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 18px;
  padding:18px 22px;cursor:pointer;list-style:none;
}
.version > summary::-webkit-details-marker{display:none;}
.version > summary::before{content:"+";font-weight:800;font-size:1.4rem;width:1ch;margin-right:4px;}
.version[open] > summary::before{content:"–";}
.version-name{font-size:1.3rem;font-weight:800;flex:1;}
.version-info{font-size:.86rem;color:var(--karte-leise);}
.version-inhalt{padding:0 22px 22px;border-top:var(--kante) solid var(--tinte);}
.version-drucken{margin:16px 0 4px;}
.version-inhalt h3{font-size:1.05rem;font-weight:800;margin:22px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--karte-leise);}
.eintraege{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.eintrag-kopf{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;}
.eintrag-art{
  font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 7px;border:1.5px solid var(--tinte);
}
.eintrag-art.art-feature{background:var(--flut);color:var(--auf-flut);border-color:var(--flut-kante);}
.eintrag-art.art-fehler{border-color:var(--fehler);color:var(--fehler);}
.eintrag-ticket{font-size:.82rem;color:var(--karte-leise);}
.eintrag-text{margin:4px 0 0;font-size:.92rem;line-height:1.55;color:var(--karte-leise);}

/* ---------- Portal: Dokumentation (Modul dokumentation) ---------- */
.dokumente-kopf.portal-text{max-width:none;margin-bottom:28px;}
/* Reiter je Kategorie, die gewählte grün und mit der Karte darunter
   verbunden (16.10.2026). Bewusst klein, damit alle fünf in einer Reihe
   stehen; auf dem Handy lässt sich die Reihe seitlich wischen, statt
   umzubrechen — die Seite selbst verschiebt sich dabei nicht. */
.dokumente-reiter{
  display:flex;flex-wrap:nowrap;gap:6px;margin-bottom:-2px;position:relative;z-index:1;
  overflow-x:auto;scrollbar-width:none;
}
.dokumente-reiter::-webkit-scrollbar{display:none;}
/* Gleich breit über die ganze Zeile; ein langer Name bricht im Reiter um,
   die Reiter bleiben dabei gleich hoch. Unter 600 px wischen statt quetschen. */
.dokumente-reiter a{
  flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  text-align:center;padding:8px 10px;font-weight:800;font-size:.84rem;line-height:1.25;text-decoration:none;
  background:var(--karte);color:var(--auf-karte);border:var(--kante) solid var(--tinte);
}
@media (max-width:600px){
  .dokumente-reiter a{flex:none;white-space:nowrap;}
}
.dokumente-reiter a:hover{background:var(--grund);}
/* Aktiver Reiter ohne Linie unten (16.10.2026): Die untere Kante ist
   durchsichtig, die Fläche läuft über die obere Kante der Karte darunter —
   der Reiter geht so sichtbar in seinen Inhalt über. */
.dokumente-reiter a[aria-current="page"]{
  background:var(--flut);color:var(--auf-flut);border-color:var(--flut-kante);
  border-bottom-color:transparent;position:relative;z-index:2;
}
.reiter-zahl{font-size:.7rem;font-weight:700;padding:0 5px;border:1.5px solid currentColor;}
.dokumente{display:flex;flex-direction:column;gap:18px;}
.dokumente-bereich{
  background:var(--karte);color:var(--auf-karte);
  border:var(--kante) solid var(--tinte);padding:22px 24px;
}
.dokumente-bereich h3{font-size:1.2rem;font-weight:800;margin:0 0 6px;}
.dokumente-einleitung{margin:0 0 12px;font-size:.92rem;color:var(--karte-leise);}
.dokumente-bereich ul{list-style:none;margin:0;padding:0;}
.dokumente-bereich li{
  display:flex;align-items:center;justify-content:space-between;gap:10px 18px;
  padding:12px 0;border-top:1px solid var(--karte-leise);
}
.dokumente-bereich li:first-child{border-top:none;}
.dokument-text{display:flex;flex-direction:column;gap:2px;min-width:0;}
.dokument-angaben{font-size:.82rem;color:var(--karte-leise);}
.dokument-text p{margin:4px 0 0;font-size:.92rem;line-height:1.55;color:var(--karte-leise);}
.dokumente-bereich .knopf-schlicht{flex:none;text-decoration:none;white-space:nowrap;}
@media (max-width:720px){
  .dokumente-bereich li{flex-direction:column;align-items:flex-start;}
}

/* Drucken einer Version (seite.js setzt die Klassen): nur sie, ohne Kopf,
   Fuß, Leiste und Filter — „Als PDF speichern“ im Druckdialog ergibt
   dasselbe wie die PDFs im alten Kundenbereich. */
@media print{
  body.drucke-version .kopfzeile,
  body.drucke-version .fussband,
  body.drucke-version .portal-leiste,
  body.drucke-version .versionen-kopf,
  body.drucke-version .versionen-filter,
  body.drucke-version .versionen-treffer,
  body.drucke-version .version:not(.wird-gedruckt),
  body.drucke-version .version-drucken{display:none !important;}
  body.drucke-version{background:#fff;color:#000;}
  body.drucke-version .version{border:none;}
  body.drucke-version .version > summary::before{content:none;}
  body.drucke-version .eintraege li{break-inside:avoid;}
}

/* ---------- Schmale Schirme ---------- */
@media (max-width:900px){
  .portal-spalten{grid-template-columns:1fr;gap:32px;}
  .portal-einstellungen-spalten{grid-template-columns:1fr;}
  .portal-einstellungen-spalten > .portal-gruppe > .portal-erklaerung:not(.klein){min-height:0;}
  .portal-karte{padding:26px;}
  .portal-leiste{padding-block:14px;}
  /* Untereinander statt rechts: Menü und Abmelden linksbündig unter der Begrüßung. */
  .portal-leiste-rechts{align-items:flex-start;}
  .portal-navi{justify-content:flex-start;}
  /* Auch die Luft im grünen Block wird knapper: 36 px auf beiden Seiten
     nähmen von 320 px Blockbreite mehr als ein Fünftel weg. */
  :root{--rand:28px;--luft:32px;--kopfluft:22px;}
  .hauptnavi{display:none;}
  .burger{display:block;}
  .tueren{grid-template-columns:1fr;}
  .saeulen{grid-template-columns:1fr;}
  .kernmodule{grid-template-columns:1fr;grid-auto-rows:auto;}
  .sicherheit{grid-template-columns:1fr;gap:22px;}
  .marke img{height:44px;}

  /* Kopfzeile: Die Rufnummer steht schon ab 1100 px nur als Symbol da,
     siehe .kopf-portal oben. */

  /* Kopf und Abschluss: Auf dem Telefon ist die großzügige Polsterung
     verschenkte Bildschirmhöhe — sie schöbe den ersten Satz unter die
     Falzkante. Beide Flächen bleiben grün, nur flacher. */
  .startkopf{padding-block:40px 46px;}
  .abschlussband{padding-block:38px 44px;}
  .belegfeld{padding:24px 22px 20px;}

  /* Das Fenster nimmt fast die volle Breite und rückt näher an den Rand. */
  .rueckruffenster{padding:22px;width:min(100% - 2 * var(--rand), 460px);}
  /* Über die volle Spaltenbreite: Der Knopf ist auf dem Telefon das
     Wichtigste im Bild und soll nicht als halbe Marke danebenstehen.
     display:block, nicht align-self — der Knopf steht in einem Textblock,
     nicht in einem Flex-Behälter. */
  .seitenkopf .knopf.ruf-auf{display:block;text-align:center;}

  .fussband-innen{flex-direction:column;align-items:flex-start;gap:14px;padding-block:14px;}
  .nutzen{grid-template-columns:1fr;}
  .pakete{grid-template-columns:1fr;}
  .feldpaar{grid-template-columns:1fr;}
  .logowand{grid-template-columns:repeat(2,1fr);}
  .fall{grid-template-columns:1fr;gap:16px;}
  .fall-zitat blockquote{min-height:0;}
  .fall-zahl{text-align:left;}
  .kontaktflaeche{grid-template-columns:1fr;}
  .kontakt-info,.kontakt-formular{padding:26px;}
  .stelle{flex-direction:column;align-items:flex-start;}
  .rechtstext{grid-template-columns:1fr;gap:28px;}
  .sprungmarken{position:static;}
  .danke{padding:28px;}
  .weiterweg{padding:26px;width:100%;}
  /* Über die volle Breite und mittig: Ein mehrzeiliger Knopf, der nur
     zwei Drittel des Kastens einnimmt, sieht nach Versehen aus. */
  .weiterweg .knopf{align-self:stretch;text-align:center;}
}

@media (max-width:480px){
  :root{--rand:20px;}
  .kopf-knoepfe .schemaknopf{display:none;}

  /* Kopf auf dem Handy: Telefon, Kundenportal und Menü standen als drei
     42 × 38 px große Kästen fast so hoch wie das Logo und wirkten wuchtig;
     bei 320 px Breite (iPhone SE 1. Generation) ragte der Kopf zudem um
     47 px über den Rand. Kleinere Kästen (30 × 30 px), kleinere Symbole,
     engere Abstände und ein etwas kleineres Logo — nachgemessen am
     30.09.2026 bei 320, 360, 375 und 414 px. */
  .kopfzeile-innen{gap:12px;padding-block:16px;}
  .marke img{height:40px;}
  .kopf-knoepfe{gap:8px;}
  .kopf-telefon,.kopf-portal,.burger{padding:4px;}
  .kopf-telefon svg,.kopf-portal svg,.burger svg{width:18px;height:18px;}
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important;}
}

/* Vorschau aus dem Backend (portal.php, seit 16.10.2026): auffälliger
   Balken über der Portalleiste, damit niemand die Vorschau für ein echtes
   Konto hält. */
.portal-vorschau{background:#FFF6D6;color:#4A3A00;border-bottom:2px solid #E5C35C;}
.portal-vorschau-innen{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 18px;padding-block:10px;}
.portal-vorschau p{margin:0;font-size:.9rem;}
.portal-vorschau .knopf-schlicht{color:#4A3A00;border-color:#4A3A00;padding:4px 12px;font-size:.84rem;text-decoration:none;}

/* Landing Page ausgeschaltet (partials/landingpage-beendet.php, 17.10.2026) */
.seitenkopf .knopfreihe{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;}
.seitenkopf .knopfreihe .knopf.ruf-auf{margin-top:0;}