/* ZUENTEC — Design-Token gemäß Corporate-Design-Skill (Master: ~/.claude/skills/corporate-design) */
:root {
--primaer: #245273;
--akzent: #A3C1D5;
--dunkler-grund: #101826;
--hintergrund: #f4f5f7;
--karte: #ffffff;
--text: #1c1e21;
--gedaempft: #6b7280;
--rand: #e5e7eb;
--aktion: var(--primaer);
--aktion-text: #ffffff;
--band-grund: #dbe7f0;
--band-text: #1c1e21;
/* Hoehe der festen Kopfleiste. KEIN Farbton, sondern ein Mass: Die Leiste
steht seit 16.08.2026 fest, und ein Sprungziel muss unter ihr hervorkommen
(scroll-padding-top weiter unten). Wie hoch sie ist, haengt davon ab, in
wie viele Zeilen die Navigation umbricht - das kann CSS nicht wissen.
Der Wert hier passt zur einzeiligen Leiste (0,9 rem + 40 px Logo +
0,9 rem + Rand) und ist der Rueckfallwert ohne JavaScript;
menue.js misst die tatsaechliche Hoehe und schreibt sie hierher. */
--kopfhoehe: 4.4rem;
}
/* Dunkle Palette doppelt einbinden: Systemwahl UND explizite Wahl */
@media (prefers-color-scheme: dark) {
:root:not([data-thema="hell"]) {
--hintergrund: #111317;
--karte: #1b1e24;
--text: #e5e7eb;
--gedaempft: #9ca3af;
--rand: #2d323b;
--aktion: var(--akzent);
--aktion-text: #101826;
--band-grund: #1b2a3a;
--band-text: #e5e7eb;
}
}
:root[data-thema="dunkel"] {
--hintergrund: #111317;
--karte: #1b1e24;
--text: #e5e7eb;
--gedaempft: #9ca3af;
--rand: #2d323b;
--aktion: var(--akzent);
--aktion-text: #101826;
--band-grund: #1b2a3a;
--band-text: #e5e7eb;
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: "Segoe UI", system-ui, sans-serif;
font-size: 1rem;
line-height: 1.6;
color: var(--text);
background: var(--hintergrund);
}
/* Kopfbereich — nur hier spricht die Markenschrift.
FEST SEIT 16.08.2026: Die Leiste bleibt beim Blättern stehen, damit
Navigation, Darstellungs- und Sprachwahl auf den langen Seiten (ORDNA hat
dreizehn Kapitel, der Änderungsverlauf 48 Einträge) nicht erst ein Rückweg
nach oben sind. Drei Dinge hängen daran und dürfen nicht wegfallen:
der Hintergrund muss DECKEND bleiben (var(--karte)), sonst scheint der
Inhalt durch; kein Vorfahr von header.kopf darf overflow bekommen, sonst
wirkt sticky nicht mehr; und die Sprungziele brauchen den Abstand aus
--kopfhoehe. */
header.kopf {
position: sticky;
top: 0;
z-index: 15;
background: var(--karte);
border-bottom: 1px solid var(--rand);
padding: 0.9rem 1.5rem;
display: flex;
align-items: center;
/* Zeilenabstand 0,7 rem, Spaltenabstand 1,5 rem: Die 1,5 rem waren als
Abstand zwischen Marke und Navigation NEBENEINANDER gedacht. Sobald die
Navigation umbricht, wurden daraus 24 px senkrechter Leerraum in einer
Leiste, die jetzt dauerhaft stehenbleibt. */
gap: 0.7rem 1.5rem;
flex-wrap: wrap;
}
.marke { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; }
/* Kein display hier — sonst überschreibt es die Hell/Dunkel-Umschaltung unten */
/* width:auto ist Pflicht, nicht Kosmetik (gemessen 16.08.2026): Das ![]()
trägt width="320" height="64" als Attribut. Setzt CSS nur die Höhe, bleibt
die Breite bei 320 px stehen — die SVG zeichnet sich dann mit ihrem
viewBox 320×64 auf 200×40 in die Mitte dieser Fläche, links und rechts
je 60 px Leerraum. Unsichtbar, aber es waren genau diese 120 px, die die
Navigation zwischen 1024 und 1440 px in eine zweite Zeile drückten. Bei
fester Leiste kostet jede Zeile dauerhaft Platz. */
.marke img { height: 40px; width: auto; }
/* Logo-Variante je Farbmodus — gilt überall (Kopf, Hero, Ablaufgrafik) */
.logo-hell { display: block; }
.logo-dunkel { display: none; }
@media (prefers-color-scheme: dark) {
:root:not([data-thema="hell"]) .logo-hell { display: none; }
:root:not([data-thema="hell"]) .logo-dunkel { display: block; }
}
:root[data-thema="dunkel"] .logo-hell { display: none; }
:root[data-thema="dunkel"] .logo-dunkel { display: block; }
/* Zeilenabstand 0,5 rem statt 1,2 rem — aus demselben Grund wie in
header.kopf: Der 1,2-rem-Abstand ist zwischen zwei Menüpunkten NEBENEINANDER
gedacht. Bricht die Navigation um, zahlt die feste Leiste ihn senkrecht. */
nav.haupt { display: flex; gap: 0.5rem 1.2rem; margin-left: auto; align-items: center; flex-wrap: wrap; }
nav.haupt a { color: var(--text); text-decoration: none; }
nav.haupt a:hover, nav.haupt a[aria-current="page"] { color: var(--aktion); }
/* Der Produkt-CTA ist die einzige gefuellte Flaeche der Kopfleiste. Bis
14.08.2026 waren es die beiden Aufklappmenues — Darstellung und Sprache
sahen damit wichtiger aus als das, weswegen der Besucher hier ist. */
nav.haupt a.knopf-kopf {
color: var(--aktion-text);
padding: 0.42rem 1.1rem;
font-weight: 600;
}
nav.haupt a.knopf-kopf:hover { color: var(--aktion-text); }
/* Kopfmenüs Darstellung + Sprachwahl: details-Aufklappmenüs im
Schaltflächenstil des Corporate Designs — funktionieren ohne JavaScript;
menue.js schließt sie nur zusätzlich beim Klick daneben und mit Escape,
thema.js schaltet die Darstellungs-Optionen und markiert die aktive. */
.sprachwahl, .themawahl { font-size: 0.87rem; position: relative; }
.sprachwahl summary, .themawahl summary {
cursor: pointer; list-style: none; -webkit-user-select: none; user-select: none;
background: none; color: var(--gedaempft);
border: 1px solid var(--rand);
/* 0.45rem statt 0.32rem: ergibt mit der Zeilenhoehe ein Ziel von rund
40 px Hoehe — WCAG 2.2 (2.5.8) verlangt 24 px, Fingerbedienung mehr. */
padding: 0.45rem 0.9rem; border-radius: 8px;
}
.sprachwahl summary::-webkit-details-marker,
.themawahl summary::-webkit-details-marker { display: none; }
.sprachwahl summary::after, .themawahl summary::after { content: " ▾"; font-size: 0.75em; }
.sprachwahl summary:hover, .themawahl summary:hover,
.sprachwahl[open] summary, .themawahl[open] summary {
color: var(--aktion); border-color: var(--aktion);
}
.sprachliste, .themaliste {
position: absolute; right: 0; top: calc(100% + 0.45rem); z-index: 10;
margin: 0; padding: 0.3rem 0; list-style: none; min-width: 8.5rem;
background: var(--karte); border: 1px solid var(--rand); border-radius: 8px;
}
.sprachliste a, .sprachliste span, .themaliste button {
display: block; padding: 0.35rem 1.1rem; white-space: nowrap;
color: var(--gedaempft); text-decoration: none;
}
.themaliste button {
width: 100%; text-align: left; background: none; border: none;
font: inherit; cursor: pointer;
}
.sprachliste a:hover, .themaliste button:hover { background: var(--hintergrund); color: var(--aktion); }
.sprachliste span[aria-current], .themaliste button[aria-current] { color: var(--text); font-weight: 600; }
main { max-width: 60rem; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
.hero { text-align: center; padding: 3rem 0 2rem; }
/* Hero mit Hintergrundbild (helle KI-Grafiken; im Dark Mode ohne Bild,
bis dunkle Fassungen vorliegen — siehe OFFENE-PUNKTE.md) */
.hero-bild {
border-radius: 12px;
padding: 4rem 1.5rem 5rem;
background-size: cover;
background-repeat: no-repeat;
}
/* Die Hintergrundbilder liegen als WebP vor (15.08.2026): 953 KB PNG wurden
30 KB, 603 KB wurden 11 KB. Sie liegen hinter einem 90-%-Overlay, dem die
Kompression nichts anhaben kann — der PNG-Master liegt im Repo unter
produktbilder/hintergruende/ und gehoert nicht ins Webroot. */
.hero-zuentec {
background-image:
linear-gradient(rgba(244, 245, 247, 0.9), rgba(244, 245, 247, 0.9)),
url("../bilder/hintergrund-zuentec-hell.webp?v=3a764f50");
background-position: center bottom;
}
.hero-ordna {
background-image:
linear-gradient(rgba(244, 245, 247, 0.9), rgba(244, 245, 247, 0.9)),
url("../bilder/hintergrund-ordna-hell.webp?v=b80c1703");
background-position: center;
}
@media (prefers-color-scheme: dark) {
:root:not([data-thema="hell"]) .hero-bild { background-image: none; padding: 3rem 0 2rem; }
}
:root[data-thema="dunkel"] .hero-bild { background-image: none; padding: 3rem 0 2rem; }
.hero h1 { font-size: 2rem; margin: 0 0 0.5rem; }
.slogan { font-size: 1.15rem; color: var(--aktion); font-style: italic; margin: 0 0 1rem; }
.hinweis { font-size: 0.87rem; color: var(--gedaempft); }
/* Hilfe-Symbol der ORDNA-Oberflaeche, wie im Programm gezeichnet.
NICHT das Emoji ❓ (U+2753) verwenden: Ein Emoji bezieht seine Farbe aus
der Emoji-Schrift und kommt ROT — und Rot ist im Corporate Design
ausschliesslich Statusfarbe fuer Fehler, nie Dekoration. ORDNA hat das
Emoji aus genau diesem Grund selbst ersetzt (0.24.0, Aenderungseintrag
"the help symbol in the header is no longer red ... it now carries the
same blue as the other controls"); die Webseite zeigte danach weiter das
rote Emoji und widersprach damit ihrem eigenen Aenderungsverlauf.
Die Pfaddaten stehen unveraendert wie in ..\Projekt_ORDNA\web\index.html
(#hilfe-knopf) im HTML. Die Farbe kommt aus --aktion und ist wertgleich
mit --akzent der App (#245273 hell, #a3c1d5 dunkel), stimmt also in
beiden Farbmodi mit dem Programm ueberein.
WER DAS SYMBOL IN ORDNA AENDERT, zieht es hier und in
werkzeuge\unterlagen.ps1 nach — dort steht dasselbe SVG fuer den
maschinell erzeugten Aenderungsverlauf. */
.sym-hilfe {
display: inline-block; width: 1.05em; height: 1.05em;
vertical-align: -0.16em; color: var(--aktion);
}
h2 { font-size: 1.5rem; margin-top: 3rem; line-height: 1.3; }
.karte {
background: var(--karte);
border: 1px solid var(--rand);
border-radius: 10px;
padding: 1.3rem 1.5rem;
margin: 1rem 0;
}
.karte h3 { margin-top: 0; }
a { color: var(--aktion); }
.knopf {
display: inline-block;
background: var(--aktion);
color: var(--aktion-text);
padding: 0.55rem 1.3rem;
border-radius: 8px;
text-decoration: none;
border: none;
font-size: 1rem;
cursor: pointer;
}
.knopf:hover { filter: brightness(1.1); }
/* Kontaktseite: mailto-Knopf und Kopier-Rückfall nebeneinander */
.kontakt-aktion { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }
/* Logo als Hero-Überschrift (ZUENTEC-Startseite) */
.hero-wortbild { margin: 0 0 0.8rem; }
.hero-wortbild img { max-width: min(460px, 92%); height: auto; margin: 0 auto; }
/* Kachel-Symbole (SVG-Nachbau des KI-Blatts Erkennen/Benennen/Wiederfinden) */
.kachel-symbol { display: block; width: 88px; height: 88px; margin: 0.3rem auto 0.9rem; }
.kachel-symbol .sym-haupt { fill: var(--primaer); }
.kachel-symbol .sym-lauf { fill: var(--karte); }
.kachel-symbol .sym-akzent { fill: var(--akzent); }
.kachel-symbol .sym-akzent-linie {
fill: none; stroke: var(--akzent);
stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round;
}
.kachel-symbol .sym-haken {
fill: none; stroke: #245273;
stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
}
/* Dark Mode: Marke wird weiß, Akzent bleibt (Corporate-Design-Regel) */
@media (prefers-color-scheme: dark) {
:root:not([data-thema="hell"]) .kachel-symbol .sym-haupt { fill: #ffffff; }
}
:root[data-thema="dunkel"] .kachel-symbol .sym-haupt { fill: #ffffff; }
/* Verzeichnisbaum im Datei-Explorer-Stil */
.symbolvorrat { display: none; }
.baum { font-size: 0.9rem; line-height: 2; overflow-x: auto; }
.baum ul { list-style: none; margin: 0; padding-left: 1.5rem; }
.baum > ul { padding-left: 0; }
.baum .zeile { display: flex; align-items: center; gap: 0.45rem; white-space: nowrap; }
.baum .pfeil { color: var(--gedaempft); font-size: 0.7rem; width: 0.9rem; flex: none; text-align: center; }
.baum svg.sym { width: 16px; height: 16px; flex: none; }
.baum .sym-ordner { color: var(--akzent); }
.baum .sym-datei { color: var(--gedaempft); }
/* Produktbilder: Variante je Farbmodus (analog logo-hell/logo-dunkel) */
.bild-hell { display: block; }
.bild-dunkel { display: none; }
@media (prefers-color-scheme: dark) {
:root:not([data-thema="hell"]) .bild-hell { display: none; }
:root:not([data-thema="hell"]) .bild-dunkel { display: block; }
}
:root[data-thema="dunkel"] .bild-hell { display: none; }
:root[data-thema="dunkel"] .bild-dunkel { display: block; }
figure.screenshot { margin: 1.5rem 0; }
figure.screenshot img { width: 100%; height: auto; border: 1px solid var(--rand); border-radius: 10px; }
figure.screenshot figcaption { font-size: 0.87rem; color: var(--gedaempft); margin-top: 0.4rem; text-align: center; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin: 1rem 0; }
.kacheln .karte { margin: 0; }
/* Schmalere Kacheln, damit die vier Handbücher in eine Reihe passen */
.kacheln-vier { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.zitat {
border-left: 4px solid var(--akzent);
padding: 0.4rem 1.2rem;
margin: 1.5rem 0;
font-style: italic;
}
.zitat .hinweis { font-style: normal; }
/* Fußzeile zentriert unter dem Inhalt — der Darstellungs-Schalter sitzt
seit 14.08.2026 als Aufklappmenü in der Kopfleiste. */
footer.fuss {
border-top: 1px solid var(--rand);
padding: 1.2rem 1.5rem;
font-size: 0.87rem;
color: var(--gedaempft);
display: flex;
gap: 1.2rem;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
footer.fuss a { color: var(--gedaempft); }
/* ============================================================
Bausteine der Produktseite (ORDNA)
Reihenfolge wie auf der Seite: Hero → Problem → Vorher/Nachher →
Schritte → Alltag → Beweis → Band → Vertrauen → Abgrenzung →
Download → Aufklappbares
============================================================ */
/* Hero: Marke über der Nutzenüberschrift.
Die Akronym-Zeile im ORDNA-Lockup ist 31 von 1000 viewBox-Einheiten hoch.
Bei 1000/31 rem Breite erreicht sie damit genau die Fließtextgröße (1rem) —
darunter wird sie unleserlich. Wer das Lockup austauscht, rechnet hier nach. */
.hero-marke { margin: 0 0 1.3rem; }
.hero-marke img {
width: calc(1000rem / 31);
max-width: 100%;
height: auto;
margin: 0 auto;
}
.hero .hero-titel { font-size: clamp(1.7rem, 4.2vw, 2.5rem); line-height: 1.2; margin: 0 0 0.9rem; }
.hero-untertitel { font-size: 1.08rem; max-width: 36rem; margin: 0 auto 1.6rem; }
.hero-aktion {
display: flex; justify-content: center; align-items: center;
gap: 1.3rem; flex-wrap: wrap; margin: 0 0 1.3rem;
}
.knopf-gross { font-size: 1.08rem; padding: 0.8rem 1.8rem; font-weight: 600; }
.knopf-zweit { background: none; color: var(--aktion); border: 1px solid var(--aktion); }
.knopf-zweit:hover { background: var(--aktion); color: var(--aktion-text); filter: none; }
/* Entscheidungskriterien direkt unter dem Hauptknopf */
.merkmalzeile {
list-style: none; display: flex; justify-content: center; flex-wrap: wrap;
margin: 0 0 0.9rem; padding: 0; font-size: 0.87rem; color: var(--gedaempft);
}
.merkmalzeile li { padding: 0 0.9rem; border-right: 1px solid var(--rand); }
.merkmalzeile li:last-child { border-right: none; }
/* Problemabschnitt: Alltagsfragen als Kacheln */
.fragen {
display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: 0.9rem; margin: 1.4rem 0; list-style: none; padding: 0;
}
.fragen li {
background: var(--karte); border: 1px solid var(--rand);
border-left: 3px solid var(--akzent); border-radius: 10px;
padding: 1rem 1.2rem; font-style: italic;
}
/* Vorher / Nachher */
.vorher-nachher { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.4rem 0; }
/* min-width: 0 ist hier keine Kosmetik: Ein Grid-Kind ist von Haus aus
mindestens so breit wie sein laengster unumbrechbarer Inhalt. Die
Dateinamen in .dateiliste stehen mit white-space: nowrap - ohne diese
Zeile schob der laengste Name (469 px) die GANZE SEITE auf 493 px und ein
360-px-Telefon bekam einen waagerechten Rollbalken. Gemessen 15.08.2026.
Das overflow-x: auto der Liste greift erst, wenn ihr Kasten schrumpfen darf. */
.vorher-nachher .karte { margin: 0; min-width: 0; }
.dateiliste { min-width: 0; }
.vorher-nachher h3 { font-size: 0.95rem; margin: 0 0 0.7rem; color: var(--gedaempft); }
.dateiliste {
font-family: Consolas, "Courier New", monospace; font-size: 0.85rem;
line-height: 1.9; margin: 0; padding: 0; list-style: none; overflow-x: auto;
}
.dateiliste li { white-space: nowrap; }
/* 55 rem = 880 px: Ab hier wird die halbe Spalte schmaler als der laengste
Dateiname (gemessen 17.08.2026: 359 px brauchen 407 px Spalte). Bis dahin
standen die beiden Karten bis 46 rem nebeneinander — und die Namen liefen
in ein waagerechtes Rollfeld, das den Namen genau dort abschnitt, wo er
etwas zeigen sollte. Nebeneinander bleiben sie nur noch, solange sie
hineinpassen; darunter steht jede Karte auf voller Breite.
.abgrenzung behaelt seine eigene Grenze bei 46 rem — dort geht es um
Fliesstext, nicht um unumbrechbare Namen. */
@media (max-width: 55rem) {
.vorher-nachher { grid-template-columns: 1fr; }
}
/* Auf dem Telefon passt auch die volle Breite nicht (375 px Fenster lassen
279 px Inhalt, der laengste Name braucht 359 px). Dann lieber umbrechen als
abschneiden: Ein Rollbalken im Karteninneren wird uebersehen, und der
abgeschnittene Name sieht aus wie ein Fehler. Der haengende Einzug zeigt,
dass die zweite Zeile zum selben Namen gehoert. */
@media (max-width: 46rem) {
.dateiliste li {
white-space: normal; overflow-wrap: anywhere;
padding-left: 1.1rem; text-indent: -1.1rem;
}
}
.spalte-vorher .dateiliste { color: var(--gedaempft); }
.spalte-nachher .dateiliste .ordner-teil { color: var(--aktion); font-weight: 600; }
/* Ablaufgrafik Dokument → ORDNA → Archiv (Mitte: das ORDNA-App-Icon) */
.ablauf { display: block; width: 100%; max-width: 36rem; height: auto; margin: 0.5rem auto 1.8rem; }
.ablauf .ab-icon-haupt { fill: var(--primaer); }
.ablauf .ab-icon-akzent { fill: var(--akzent); }
.ablauf .ab-form { fill: none; stroke: var(--gedaempft); stroke-width: 2; }
.ablauf .ab-akzent { fill: var(--akzent); }
.ablauf .ab-pfeil { fill: none; stroke: var(--gedaempft); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ablauf text { font-family: "Segoe UI", system-ui, sans-serif; text-anchor: middle; }
.ablauf .ab-beschriftung { fill: var(--gedaempft); font-size: 12px; }
/* Dark Mode: Bildmarke wird weiß, Akzentelement bleibt (Corporate-Design-Regel) */
@media (prefers-color-scheme: dark) {
:root:not([data-thema="hell"]) .ablauf .ab-icon-haupt { fill: #ffffff; }
}
:root[data-thema="dunkel"] .ablauf .ab-icon-haupt { fill: #ffffff; }
/* Drei Schritte */
.schritte { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin: 1.2rem 0; }
.schritte .karte { margin: 0; }
.schritte .kachel-symbol { width: 72px; height: 72px; margin: 0.2rem auto 1rem; }
.schritte h3 { display: flex; align-items: center; gap: 0.6rem; }
.schritt-nummer {
display: inline-flex; align-items: center; justify-content: center;
flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%;
background: var(--aktion); color: var(--aktion-text);
font-size: 0.9rem; font-weight: 600;
}
/* Alltagssituationen: Frage links, Antwort rechts */
.alltag { margin: 1.4rem 0; }
.alltag > div {
display: grid; grid-template-columns: 19rem 1fr; gap: 0.5rem 2rem;
padding: 1.2rem 0; border-top: 1px solid var(--rand);
}
.alltag > div:last-child { border-bottom: 1px solid var(--rand); }
.alltag-frage { font-style: italic; font-size: 1.05rem; margin: 0; color: var(--aktion); }
.alltag-antwort { margin: 0; }
/* Beweis: Ordnerbaum und Bildschirmfoto nebeneinander */
.beweis { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 1rem; align-items: start; margin: 1.2rem 0; }
.beweis .karte, .beweis figure.screenshot { margin: 0; }
/* Etwas kleiner als frei stehend — sonst laufen lange Dateinamen aus der Spalte */
.beweis .baum { font-size: 0.8rem; }
/* Handlungsband zwischen den Abschnitten */
.cta-band {
background: var(--band-grund); color: var(--band-text);
border-radius: 12px; padding: 1.7rem 1.5rem; margin: 3rem 0; text-align: center;
}
.cta-band p { margin: 0 0 1rem; font-size: 1.05rem; }
.cta-band p:last-child { margin: 0; }
.cta-band .hinweis { color: var(--band-text); opacity: 0.8; font-size: 0.87rem; margin: 0.8rem 0 0; }
/* Datenschutz: hervorgehobene Fläche */
.hervorkarte { border: 2px solid var(--akzent); }
.hervorsatz { font-size: 1.12rem; font-weight: 600; color: var(--aktion); }
/* Vertrauensraster */
.vertrauen {
display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
gap: 1.3rem 2rem; margin: 1.4rem 0; list-style: none; padding: 0;
}
.vertrauen li { position: relative; padding-left: 1.9rem; }
.vertrauen li::before {
content: "✓"; position: absolute; left: 0; top: 0;
color: var(--aktion); font-weight: 700;
}
/* Abgrenzung: gedacht für / nicht gedacht für */
.abgrenzung { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.2rem 0; }
.abgrenzung .karte { margin: 0; }
.liste-ja, .liste-nein { list-style: none; padding: 0; margin: 0.6rem 0 0; }
.liste-ja li, .liste-nein li { position: relative; padding-left: 1.6rem; margin-bottom: 0.6rem; }
.liste-ja li::before { content: "✓"; position: absolute; left: 0; color: var(--aktion); font-weight: 700; }
.liste-nein li::before { content: "–"; position: absolute; left: 0; color: var(--gedaempft); font-weight: 700; }
/* Ruhiger Hinweiskasten (kein Warnton) */
.hinweiskasten {
background: var(--karte); border: 1px solid var(--rand);
border-left: 3px solid var(--akzent); border-radius: 8px;
padding: 1rem 1.2rem; margin: 1.2rem 0; font-size: 0.94rem;
}
/* Downloadbereich */
.download-aktion { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin: 1.3rem 0 0.6rem; }
/* Freiwillige Unterstuetzung. Der Abschnitt steht seit 16.08.2026 am ENDE
der ORDNA-Seite (Kommentar 14b dort), bewusst NICHT im Download-Abschnitt
und nicht davor: Dort stuende die Bitte vor dem Moment, in dem jemand das
Programm ueberhaupt gestartet haben kann. Traeger ist seither ein mit
einem Link darin, vorher ein