/* ============================================================
   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;

  --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;
  }
}

: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;
}

/* ---------- 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;}

.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);}
.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;
}
/* 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(--karte);color:var(--auf-karte);
  border:var(--kante) solid var(--tinte);padding:12px 16px;
  font-weight:700;
}
/* 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;}

/* ---------- 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 ---------- */
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;}
.team li{
  background:var(--karte);color:var(--auf-karte);
  border:var(--kante) solid var(--tinte);padding:20px;
  display:flex;gap:16px;align-items:flex-start;
}
.kuerzel{
  flex:none;width:52px;height:52px;display:grid;place-items:center;
  background:var(--flut);color:var(--auf-flut);
  border:var(--kante) solid var(--flut-kante);
  font-weight:800;font-size:1rem;letter-spacing:-.02em;
}
.team h3{margin:0 0 4px;font-size:1.02rem;font-weight:800;letter-spacing:-.01em;}
.team p{margin:0;font-size:.9rem;color:var(--karte-leise);line-height:1.55;}

/* ---------- 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;}
.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;}

.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;
}

/* ---------- 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);}

.fusslinks{display:flex;gap:18px;font-weight:600;}
.fusslinks a{text-decoration:none;border-bottom:2px solid transparent;}
.fusslinks a:hover{border-bottom-color:currentColor;}

/* ---------- Schmale Schirme ---------- */
@media (max-width:900px){
  /* 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 bleibt als Symbol erhalten, die Ziffern
     entfallen — sie brächen sonst neben Logo und Login um. */
  .kopf-telefon span{display:none;}
  .kopf-telefon{border:var(--kante) solid currentColor;padding:7px 9px;}
  .kopf-telefon svg{width:20px;height:20px;}

  /* 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;}
}

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