/*
* Ergebnisseite [dagobert_ergebnis] – Basis aus dem Prototyp übernommen
* (Farben, Karten, Radien, Fokus-Stile, prefers-reduced-motion), unter
* .dagobert-ergebnis gekapselt, damit nichts ins WordPress-Theme ausbricht.
*
* Stufen-Farben (Spez. Kap. 6.2/6.3 – neu gegenüber dem Prototyp, der Teil-B-
* Blöcke nicht nach Stufe einfärbt): Stufe 1 Salbei, Stufe 2 Bernstein,
* Stufe 3 Terrakotta. Bewusst kein Signalrot, kein Ampel-Alarm. Farbe ist nie
* alleiniger Bedeutungsträger – der Stufen-Titel steht ohnehin als Text da.
* Der Sammel-Block bekommt unabhängig von seinem Inhalt immer den
* Bernstein-Akzent (wie im Prototyp), keine Terrakotta-Färbung.
*
* Keine Dritt-Ressourcen (Spez. Kap. 3.3/E10): Nunito/Nunito Sans liegen seit
* M4 als woff2 im Plugin und werden über fonts.css lokal eingebunden – kein
* Google-Fonts-Abruf. Die Systemschriften bleiben als Fallback stehen, falls
* eine Datei mal nicht lädt.
*/
/* Der Prototyp setzt global `*{box-sizing:border-box}` (Zeile 15) – ohne diese
* Zeile rechnet der Browser Polsterung und Rahmen ZUSÄTZLICH zur angegebenen
* Breite/Höhe. Das ganze Karten- und Block-Layout hier ist auf border-box
* gebaut; fehlt die Regel, ragte z. B. eine Teil-A-Karte mit `height:100%`
* um ihre 24px Polsterung/Rahmen aus der Rasterzelle und überlappte die
* nächste Zeile.
*
* Gekapselt auf .dagobert-ergebnis, damit nichts ins Theme ausbricht. Das
* `margin:0; padding:0` des Prototyps wird bewusst NICHT übernommen: Das ist
* ein Reset für ein eigenständiges Dokument und würde hier die Absatz- und
* Listenabstände des Themes plattmachen. */
.dagobert-ergebnis,
.dagobert-ergebnis *,
.dagobert-ergebnis *::before,
.dagobert-ergebnis *::after {
box-sizing: border-box;
}
.dagobert-ergebnis {
--de-salbei: #6B8F71;
--de-salbei-tint: #EFF3EE;
--de-salbei-linie: #D7E1D8;
--de-bernstein: #D48B2E;
--de-bernstein-tint: #F9F0E3;
--de-bernstein-dunkel: #B87722;
--de-terrakotta: #A8492E;
--de-terrakotta-tint: #F6EAE5;
--de-dunkel: #2D3B2E;
/* Cream nach Beschluss Nr. 7. Vorher #FAF7F2 — die Ergebnisseite lief damit
* einen Hauch kühler als der Vorschul-Check selbst. Jetzt tragen beide
* denselben Grund. */
--de-warmweiss: #F7F2E9;
/* Die Karte liegt einen Hauch wärmer als Weiß auf dem Cream — reines #FFF
* schneidet auf diesem Grund sichtbar aus der Seite heraus. Aus Maries
* Vorlage übernommen. */
--de-karte: #FFFDF8;
--de-linie: rgba(45, 59, 46, .09);
/* ---------- Schriftstaffel ----------
*
* Die Überschriften-Ebenen der Seite hängen an EINER Zahl: --de-titel ist
* die Größe des h1, alles darunter ein Anteil davon. Wird das h1 später
* größer (Maries Entscheidung, am 15.08.2026 offen), wandert die ganze
* Staffel mit – niemand muss vier Werte nachrechnen. Kippen kann die
* Rangfolge dabei nicht, weil jeder Anteil kleiner als 1 ist und die
* Anteile untereinander feststehen.
*
* 1.00 h1 = 26 px
* 0.85 Begrüßung ≈ 22 px
* 0.81 Abschnitts-Überschrift ≈ 21 px
* 0.77 Stufenüberschrift ≈ 20 px
* ---- Bereichsname auf der Karte 19 px, fest (.de-a-elternwort)
*
* Der Bereichsname ist der Boden, über dem die Staffel bleiben muss. Er
* bleibt bewusst eine feste Zahl: Er ist Kartentext, keine Überschrift, und
* soll mit dem Fließtext daneben zusammenpassen statt mit dem Seitenkopf.
* Solange das h1 nur wächst, wächst der Abstand zu ihm mit.
*
* Die Sprünge sind klein (Verhältnis rund 1,11 je Stufe) – zwischen 19 und
* 26 px ist nicht mehr Platz. Getragen wird die Rangfolge deshalb zusätzlich
* von Gewicht, Farbe und Versalien; siehe die einzelnen Regeln. */
--de-titel: 26px;
--de-anrede: calc(var(--de-titel) * .85);
--de-abschnitt: calc(var(--de-titel) * .81);
--de-stufentitel: calc(var(--de-titel) * .77);
font-family: 'Nunito Sans', system-ui, -apple-system, sans-serif;
color: var(--de-dunkel);
background: var(--de-warmweiss);
font-size: 17px;
line-height: 1.6;
/* 560 px statt 640: eine Karte pro Zeile über die volle Breite braucht eine
* Spalte, in der eine Textzeile noch gut zu lesen ist. */
max-width: 560px;
margin: 0 auto;
padding: 24px 16px 56px;
}
.dagobert-ergebnis h1,
.dagobert-ergebnis h2,
.dagobert-ergebnis h3,
.dagobert-ergebnis .de-btn {
font-family: 'Nunito', 'Nunito Sans', system-ui, sans-serif;
}
.dagobert-ergebnis .de-brand {
font-weight: 800;
font-size: 15px;
color: var(--de-salbei);
letter-spacing: .02em;
margin-bottom: 14px;
}
.dagobert-ergebnis .de-brand span { color: var(--de-bernstein); }
/* Die Größe steht als Zahl nur noch an einer Stelle (--de-titel oben) – hier
* ändert sich am Ergebnis nichts, es sind dieselben 26 px. */
.dagobert-ergebnis h1 {
font-weight: 800;
font-size: var(--de-titel);
line-height: 1.25;
margin-bottom: 10px;
}
.dagobert-ergebnis .de-hinweis {
font-size: 14.5px;
color: #5C6B5E;
margin-top: 4px;
}
/* Nur für Screenreader: sichtbar nicht da, im Lesefluss der Vorlesestimme
* schon. Trägt den Bereichsnamen im „Weiterlesen“ — zehnmal dasselbe Wort ist
* sonst nicht auseinanderzuhalten, wenn man die Seite hört. */
.dagobert-ergebnis .de-vh {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* Zusatz-Texte (Grenzen · Trocken · Sprechen) stehen im aufgeklappten Teil,
* abgesetzt vom Bereichstext: Sie kommen aus einer anderen Regel als er. */
.dagobert-ergebnis .de-zusatz {
margin-top: 14px;
padding-top: 12px;
border-top: 1px dashed var(--de-salbei-linie);
}
.dagobert-ergebnis .de-btn {
display: inline-block;
margin-top: 18px;
border: none;
border-radius: 12px;
background: var(--de-bernstein-dunkel);
color: #fff;
font-weight: 800;
font-size: 16.5px;
padding: 14px 22px;
text-decoration: none;
}
.dagobert-ergebnis .de-btn:hover { background: #9C6419; }
/* summary gehört ausdrücklich dazu: Es ist weder a noch button, aber seit dem
* Kartenumbau das meistbenutzte Bedienelement der Seite. Ohne diese Zeile
* bliebe es beim Standardrahmen des Browsers — mal sichtbar, mal kaum. */
.dagobert-ergebnis a:focus-visible,
.dagobert-ergebnis button:focus-visible,
.dagobert-ergebnis summary:focus-visible {
outline: 3px solid var(--de-bernstein-dunkel);
outline-offset: 2px;
}
/* ===================== Abschnitte & Knöpfe ===================== */
.dagobert-ergebnis .de-teil { margin-top: 34px; }
/* Dritte Ebene der Staffel (0.81 vom h1, ≈ 21 px) — dieselbe Größe wie
* vorher, jetzt aber am h1 hängend. Ohne das würde sie beim Anheben des h1
* stehen bleiben und irgendwann von der Stufenüberschrift überholt, die eine
* Ebene TIEFER steht. */
.dagobert-ergebnis .de-teil > h2 {
font-weight: 800;
font-size: var(--de-abschnitt);
line-height: 1.3;
margin-bottom: 12px;
}
.dagobert-ergebnis .de-druck-zeile { margin-top: 14px; }
/* Leiser Zweitknopf: Der Druck-Knopf soll da sein, aber der Auswertung nicht
* die Aufmerksamkeit stehlen. Ghost-Pille mit Salbei-Rahmen, wie in Maries
* Vorlage — Bernstein ist im Projekt die Farbe der Conversion-Knöpfe, und
* „drucken“ ist keine. Text bleibt dunkel: Salbei auf Cream käme nur auf
* 3,25:1 und wäre als Beschriftung zu blass. */
.dagobert-ergebnis .de-btn-leise {
margin-top: 0;
background: transparent;
border: 1.5px solid var(--de-salbei);
border-radius: 999px;
color: var(--de-dunkel);
font-weight: 700;
font-size: 15px;
padding: 11px 22px;
cursor: pointer;
}
.dagobert-ergebnis .de-btn-leise:hover { background: var(--de-salbei-tint); }
/* ===================== Status-Chip (Teil C) ===================== */
/* Farbe ist nie alleiniger Bedeutungsträger (Spez. 6.2): Der Chip trägt das
* Kurzlabel immer als Text – die Einfärbung kommt obendrauf, nicht anstelle.
*
* Nur noch in Teil C. Auf den Bereichskarten steht die Stufe seit dem
* 15.08.2026 im Gruppenkopf statt auf jeder einzelnen Karte. */
.dagobert-ergebnis .de-chip {
display: inline-block;
font-family: 'Nunito', system-ui, sans-serif;
font-weight: 800;
font-size: 12px;
letter-spacing: .02em;
line-height: 1.3;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid currentColor;
}
.dagobert-ergebnis .de-chip[data-stufe="1"] { color: var(--de-salbei); background: var(--de-salbei-tint); }
.dagobert-ergebnis .de-chip[data-stufe="2"] { color: var(--de-bernstein-dunkel); background: var(--de-bernstein-tint); }
.dagobert-ergebnis .de-chip[data-stufe="3"] { color: var(--de-terrakotta); background: var(--de-terrakotta-tint); }
/* ===================== Bereichskarten (Spez. 6.2/6.3) =====================
*
* Eine Karte pro Zeile über die volle Breite, Bild links, Text rechts. Das
* frühere Raster `minmax(130px, 1fr)` ist ersatzlos weg: Zwei Karten
* nebeneinander ließen dem Text auf einem 390-px-Telefon rund 111 px, mit Bild
* daneben 39 px — dort brachen Wörter mitten im Wort. Über die volle Breite
* gibt es das Problem nicht mehr, und die Karte kann den Text tragen statt nur
* auf ihn zu verweisen. */
/* Viel Luft über der Gruppen-Überschrift: Sie muss sichtbar zum FOLGENDEN
* Kartenblock gehören, nicht zum vorherigen – sonst liest sich „Genauer
* hinschauen“ wie eine Fußzeile unter den starken Bereichen. */
.dagobert-ergebnis .de-a-gruppe { margin-top: 38px; }
.dagobert-ergebnis .de-a-gruppe:first-of-type { margin-top: 8px; }
/* Stufenname in Versalien, danach eine Haarlinie bis zum Rand (Maries
* Vorlage). Die Linie ist reine Deko und deshalb ein ::after — im DOM steht
* nur der Name, und genau der wird auch vorgelesen.
*
* Vierte Ebene der Staffel (0.77 vom h1, ≈ 20 px). Bis zum 15.08.2026 stand
* hier 13 px — die Überschrift war damit die KLEINSTE Schrift im Kopfbereich
* und rangierte unter den Bereichsnamen, die sie überschreibt. Genau
* andersherum gehört es.
*
* Die Sperrung geht dabei von .09em auf .05em zurück: Weite Sperrung ist ein
* Mittel für sehr kleine Versalien. Bei 20 px wirkt sie löchrig — und bei
* 320 px Fensterbreite kostet sie „GENAUER HINSCHAUEN" die Zeile.
*
* Über den 19 px des Bereichsnamens liegt die Zeile nicht nur rechnerisch:
* Versalien haben durchgehend Versalhöhe (bei 20 px rund 14,2 px), der
* gemischt gesetzte Name daneben kommt auf 13,5 px. Dazu Stufenfarbe und
* Linie — die Rangfolge trägt hier mehr als die reine Zahl.
*
* Der Klassenname ist bewusst nicht mehr „de-a-…": Seit dem 15.08.2026 steht
* dieselbe Überschrift auch in Teil C. */
.dagobert-ergebnis .de-stufen-titel {
display: flex;
align-items: center;
gap: 10px;
font-size: var(--de-stufentitel);
font-weight: 800;
line-height: 1.25;
letter-spacing: .05em;
text-transform: uppercase;
margin: 0 0 10px;
}
.dagobert-ergebnis .de-stufen-titel::after {
content: "";
flex: 1;
height: 1px;
background: currentColor;
opacity: .22;
}
/* Die Farbe hängt am Titel selbst, nicht mehr am umgebenden Abschnitt: So
* gilt dieselbe Regel in Teil A und Teil C, ohne sie zu verdoppeln. */
.dagobert-ergebnis .de-stufen-titel[data-stufe="1"] { color: var(--de-salbei); }
.dagobert-ergebnis .de-stufen-titel[data-stufe="2"] { color: var(--de-bernstein-dunkel); }
.dagobert-ergebnis .de-stufen-titel[data-stufe="3"] { color: var(--de-terrakotta); }
/* Maries langer Stufen-Titel aus config/stufen.php. Er stand vorher auf jedem
* einzelnen Block, also zehnmal auf der Seite. Einmal pro Gruppe sagt er
* dasselbe. */
.dagobert-ergebnis .de-a-gruppe-intro {
margin: 0 0 16px;
font-size: 16px;
opacity: .85;
}
.dagobert-ergebnis .de-a-karten {
list-style: none;
margin: 0;
padding: 0;
}
/* „Selbstständigkeit“ ist das längste Elternwort. Über die volle Breite passt
* es inzwischen, aber die Regel bleibt: Bei sehr großer Schriftgröße oder in
* einem schmalen Theme-Rahmen soll es umbrechen statt aus der Karte zu ragen.
* Die Silbentrennung greift nur, weil der Container lang="de" trägt (siehe
* render-ergebnis.php) – sonst trennt der Browser nach den Regeln der
* Seitensprache und bricht mitten im Wort. */
.dagobert-ergebnis .de-a-karte,
.dagobert-ergebnis .de-c-name {
overflow-wrap: break-word;
hyphens: auto;
}
/* Die Karte ist IMMER die Flex-Zeile — mit Bild hat sie zwei Kinder, ohne Bild
* eines. Genau deshalb genügt zum Einschalten der Stufenbilder das Umlegen von
* DAGOBERT_UI_STUFEN_BILDER_AKTIV: Am Layout ist dann nichts nachzuarbeiten.
*
* Ruhige, einheitliche Fläche statt farbiger Kante: Die Stufe steht als Wort
* im Gruppenkopf und im Chip. Zehn farbig berandete Kacheln untereinander
* würden die Liste zur Ampel machen, und Terrakotta ist die Farbe, die am
* lautesten spricht. */
.dagobert-ergebnis .de-a-karte {
display: flex;
gap: 16px;
align-items: flex-start;
background: var(--de-karte);
border: 1px solid var(--de-linie);
border-radius: 16px;
padding: 16px 18px;
margin-bottom: 12px;
color: var(--de-dunkel);
}
/* ---------- Stufenbild auf der Bereichskarte — GEBAUT, ABER AUS ----------
*
* Diese Regeln greifen erst, wenn DAGOBERT_UI_STUFEN_BILDER_AKTIV in
* texte-ui.php auf true steht. Solange der Schalter aus ist, rendert PHP kein
* Bild — die Karte ist dann dieselbe Zeile mit einem Kind weniger.
*
* Der frühere Grund für das Aus (kein Platz neben dem Text) ist mit dem
* einspaltigen Layout weg. Aus bleibt es nur noch, weil die drei
* Illustrationen nicht existieren.
*
* Richtwert 56–64 px. flex: 0 0 auto, damit das Bild bei langen Elternwörtern
* nicht zusammengedrückt wird — die Karte darf umbrechen, das Bild nicht
* schrumpfen.
*
* Solange die drei Bilddateien fehlen, rendert PHP statt ![]()
ein leeres
* . Das ist kein Fehlerzustand, sondern eine
* ruhige Farbfläche in der Stufenfarbe: eine Karte mit Loch sähe kaputt aus,
* ein kaputtes Bildsymbol noch mehr. */
.dagobert-ergebnis .de-a-bild {
flex: 0 0 60px;
width: 60px;
height: 60px;
border-radius: 14px;
}
.dagobert-ergebnis .de-a-bild-leer {
display: block;
background: var(--de-salbei-tint);
border: 1px solid var(--de-salbei-linie);
}
.dagobert-ergebnis .de-a-bild-leer[data-stufe="1"] {
background: var(--de-salbei-tint);
border-color: var(--de-salbei);
}
.dagobert-ergebnis .de-a-bild-leer[data-stufe="2"] {
background: var(--de-bernstein-tint);
border-color: var(--de-bernstein);
}
.dagobert-ergebnis .de-a-bild-leer[data-stufe="3"] {
background: var(--de-terrakotta-tint);
border-color: var(--de-terrakotta);
}
/* min-width: 0 verhindert, dass ein langes Wort die Flex-Zeile aufbläht,
* statt umzubrechen. */
.dagobert-ergebnis .de-a-text {
min-width: 0;
flex: 1 1 auto;
}
/* Der Name bekommt die volle Kartenbreite. Auf der Karte steht keine Stufe
* mehr — der Gruppenkopf sagt sie ohnehin, und ein Chip daneben nahm dem Namen
* so viel Platz, dass auf schmalen Telefonen „Bewegung" getrennt wurde. */
.dagobert-ergebnis .de-a-titel {
margin: 0 0 6px;
min-width: 0;
}
/* Das Elternwort steht groß, der Fachname leise darunter: Eltern suchen
* „Malen“, nicht „Graphomotorik“. */
.dagobert-ergebnis .de-a-elternwort {
display: block;
font-family: 'Nunito', system-ui, sans-serif;
font-weight: 800;
font-size: 19px;
line-height: 1.2;
}
.dagobert-ergebnis .de-a-bereich {
display: block;
font-size: 12.5px;
font-weight: 600;
color: #5C6B5E;
letter-spacing: .01em;
}
/* Der Anriss: die ersten ein bis zwei Sätze des Bausteins, unverändert. */
.dagobert-ergebnis .de-a-anriss {
margin: 0;
font-size: 16px;
line-height: 1.55;
opacity: .88;
}
/* ---------- Weiterlesen ----------
*
* Ein echtes : kein JavaScript nötig, mit der Tastatur bedienbar,
* wird als auf-/zugeklappt angesagt. Das native Dreieck fällt bei
* display:flex ohnehin weg, deshalb ein eigener Pfeil — reine Deko.
*
* „Weiterlesen“ und „Weniger anzeigen“ stehen beide echt im DOM und werden
* per display umgeschaltet. Über CSS-`content` erzeugter Text wird nicht
* überall vorgelesen; hier hängt zu viel daran. */
.dagobert-ergebnis .de-a-aufklapp > summary {
display: flex;
align-items: center;
gap: 7px;
min-height: 44px;
margin-top: 2px;
cursor: pointer;
font-size: 15px;
font-weight: 700;
color: var(--de-bernstein-dunkel);
list-style: none;
}
.dagobert-ergebnis .de-a-aufklapp > summary::-webkit-details-marker { display: none; }
.dagobert-ergebnis .de-a-aufklapp > summary::after {
content: "";
width: 7px;
height: 7px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
margin-bottom: 3px;
flex: none;
}
.dagobert-ergebnis .de-a-aufklapp[open] > summary::after {
transform: rotate(-135deg);
margin-bottom: -3px;
}
.dagobert-ergebnis .de-a-aufklapp > summary:hover { text-decoration: underline; }
.dagobert-ergebnis .de-a-zu { display: none; }
.dagobert-ergebnis .de-a-aufklapp[open] .de-a-auf { display: none; }
.dagobert-ergebnis .de-a-aufklapp[open] .de-a-zu { display: inline; }
/* Aufgeklappt rutscht die Zeile ANS ENDE. Sonst stünde sie mitten im Text:
* Der Anriss endet an einer Satzgrenze, und die Fortsetzung folgt direkt
* darunter — ein „Weniger anzeigen“ dazwischen zerschneidet einen Gedanken in
* zwei Hälften. Zugeklappt bleibt die Zeile oben, wo sie als Einladung
* gehört. */
.dagobert-ergebnis .de-a-aufklapp[open] {
display: flex;
flex-direction: column;
}
.dagobert-ergebnis .de-a-aufklapp[open] > summary { order: 2; }
/* Der Rest des Bausteins. Der erste Absatz setzt den Anriss fort — deshalb
* hier ein kleinerer Abstand als zwischen zwei echten Absätzen: Es ist
* derselbe Gedanke, nur an einer Satzgrenze getrennt. */
.dagobert-ergebnis .de-a-rest {
margin-top: 10px;
font-size: 16px;
line-height: 1.55;
opacity: .88;
}
.dagobert-ergebnis .de-a-rest > p { margin: 0 0 10px; }
.dagobert-ergebnis .de-a-rest > p:last-child { margin-bottom: 0; }
/* Punkte statt Ringe: Die Liste steckt in der Karten-Liste und wäre für den
* Browser sonst eine Unterliste. Und ohne eigenes padding rückt sie nicht um
* die vollen 40 px des Browser-Standards ein. */
.dagobert-ergebnis .de-a-liste {
list-style: disc;
margin: 0 0 10px;
padding-left: 22px;
}
.dagobert-ergebnis .de-a-liste li { margin-top: 4px; }
/* ===================== Teil C – Alle Fähigkeiten (Spez. 6.6) ===================== */
/* Dieselbe Gruppierung wie bei den Karten oben (15.08.2026). Viel Luft über
* der Überschrift, damit sie sichtbar zur FOLGENDEN Gruppe gehört – aus
* demselben Grund wie in Teil A. Die erste Gruppe steht dichter: Über ihr
* steht schon die Abschnitts-Überschrift. */
.dagobert-ergebnis .de-c-gruppe { margin-top: 26px; }
.dagobert-ergebnis .de-c-gruppe:first-of-type { margin-top: 14px; }
.dagobert-ergebnis .de-c-bereich {
background: var(--de-karte);
border: 1px solid var(--de-salbei-linie);
border-left: 4px solid var(--de-salbei-linie);
border-radius: 12px;
margin-top: 8px;
}
/* „Dezent hervorgehoben“ heißt dezent: nur die Kante trägt Farbe, der Chip
* sagt ohnehin schon, worum es geht. */
.dagobert-ergebnis .de-c-bereich[data-stufe="2"] { border-left-color: var(--de-bernstein); }
.dagobert-ergebnis .de-c-bereich[data-stufe="3"] { border-left-color: var(--de-terrakotta); }
.dagobert-ergebnis .de-c-bereich summary {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding: 12px 14px;
cursor: pointer;
font-weight: 700;
}
/* Ein summary mit display:flex verliert das native Aufklapp-Dreieck – ohne
* Ersatz sähen die Zeilen aus wie Karten, und niemand käme auf die Idee, sie
* zu öffnen. Deshalb ein eigener Pfeil; er ist reine Deko (aria-hidden per
* Natur des ::after) und dreht sich beim Öffnen. */
.dagobert-ergebnis .de-c-bereich summary::after {
content: "";
width: 8px;
height: 8px;
border-right: 2px solid var(--de-bernstein-dunkel);
border-bottom: 2px solid var(--de-bernstein-dunkel);
transform: rotate(45deg);
margin-left: 4px;
margin-bottom: 3px;
flex: none;
}
.dagobert-ergebnis .de-c-bereich[open] summary::after {
transform: rotate(-135deg);
margin-bottom: -3px;
}
.dagobert-ergebnis .de-c-name {
font-family: 'Nunito', system-ui, sans-serif;
font-weight: 800;
font-size: 16px;
}
.dagobert-ergebnis .de-c-elternwort {
font-size: 13px;
color: #5C6B5E;
}
.dagobert-ergebnis .de-c-bereich .de-chip { margin-left: auto; }
.dagobert-ergebnis .de-c-inhalt { padding: 0 14px 14px; }
.dagobert-ergebnis .de-c-stamm { font-weight: 700; margin-bottom: 6px; }
.dagobert-ergebnis .de-c-inhalt ul { margin: 0 0 0 20px; }
.dagobert-ergebnis .de-c-inhalt li { margin-top: 4px; }
/* ===================== Funnel-Boxen (Spez. 6.4) ===================== */
/* Seit dem Kartenumbau steht die Box IN der Karte, im aufgeklappten Teil. Ein
* gefüllter Kasten in einem Kasten sähe aus wie ein Fremdkörper — deshalb nur
* eine Trennlinie: Der Hinweis gehört zum Text darüber, er unterbricht ihn
* nicht. Er erscheint ohnehin nur bei Stufe 2. */
.dagobert-ergebnis .de-funnel {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--de-salbei-linie);
}
.dagobert-ergebnis .de-funnel-eintrag + .de-funnel-eintrag {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--de-salbei-linie);
}
.dagobert-ergebnis .de-funnel-titel {
font-family: 'Nunito', system-ui, sans-serif;
font-weight: 800;
font-size: 16px;
}
.dagobert-ergebnis .de-funnel-kurz { margin-top: 4px; }
/* Ein Link, kein Knopf: Ein Produkthinweis auf einer Auswertung über das
* eigene Kind darf nicht wie der nächste Schritt aussehen. */
.dagobert-ergebnis .de-funnel-link {
display: inline-block;
margin-top: 6px;
font-weight: 600;
color: var(--de-bernstein-dunkel);
text-decoration: none;
border-bottom: 1.5px solid rgba(212, 139, 46, .4);
}
.dagobert-ergebnis .de-funnel-link:hover { border-bottom-color: var(--de-bernstein); }
/* ===================== Seitenende (Spez. 6.5) ===================== */
.dagobert-ergebnis .de-welt {
background: var(--de-karte);
border: 1px solid var(--de-salbei-linie);
border-radius: 14px;
padding: 18px;
}
.dagobert-ergebnis .de-welt-eintrag + .de-welt-eintrag {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--de-salbei-linie);
}
.dagobert-ergebnis .de-welt-titel {
font-family: 'Nunito', system-ui, sans-serif;
font-weight: 800;
font-size: 16.5px;
}
.dagobert-ergebnis .de-welt-kurz { margin-top: 4px; }
.dagobert-ergebnis .de-abschluss { margin-top: 24px; }
.dagobert-ergebnis .de-abschluss a { color: #5C6B5E; }
/* ===================== Platzhalter & Admin-Hinweis ===================== */
/* Bewusst auffällig: Ein Platzhalter darf nie versehentlich live gehen und
* für Maries Stimme gehalten werden (Spez. Kap. 10.1). */
.dagobert-ergebnis .de-todo {
margin-top: 10px;
padding: 10px 12px;
border: 2px dashed var(--de-bernstein);
border-radius: 10px;
background: var(--de-bernstein-tint);
font-size: 14.5px;
}
.dagobert-ergebnis .de-todo-vermerk { color: #5C6B5E; font-size: 13px; }
.dagobert-ergebnis .de-admin-hinweis {
margin-bottom: 18px;
padding: 12px 14px;
border: 1px solid var(--de-terrakotta);
border-left: 6px solid var(--de-terrakotta);
border-radius: 10px;
background: var(--de-terrakotta-tint);
font-size: 14.5px;
}
.dagobert-ergebnis .de-admin-hinweis ul { margin: 8px 0 0 20px; }
@media (prefers-reduced-motion: reduce) {
.dagobert-ergebnis * {
animation: none !important;
transition: none !important;
}
}
/* ===================== Einblenden der Karten =====================
*
* Aus Maries Vorlage, gedämpft: 0,4 s statt 0,5 s, Staffelung über nth-child
* statt über Inline-Styles.
*
* Die Regel steht bewusst in `prefers-reduced-motion: no-preference` und nicht
* andersherum. Würde `opacity: 0` außerhalb stehen und nur die Animation
* abgeschaltet, bliebe für alle, die weniger Bewegung eingestellt haben, eine
* unsichtbare Seite übrig — und genau das täte die globale Regel oben mit
* ihrem `animation: none !important`. So kann das nicht passieren: Wer keine
* Bewegung will, bekommt die Karten schlicht sofort.
*
* Der Ausdruck ist zusätzlich in print.css abgesichert. */
@media (prefers-reduced-motion: no-preference) {
@keyframes de-karte-auf {
to { opacity: 1; transform: none; }
}
.dagobert-ergebnis .de-a-karte {
opacity: 0;
transform: translateY(10px);
animation: de-karte-auf .4s ease forwards;
}
.dagobert-ergebnis .de-a-karte:nth-child(2) { animation-delay: .05s; }
.dagobert-ergebnis .de-a-karte:nth-child(3) { animation-delay: .10s; }
.dagobert-ergebnis .de-a-karte:nth-child(4) { animation-delay: .15s; }
.dagobert-ergebnis .de-a-karte:nth-child(5) { animation-delay: .20s; }
.dagobert-ergebnis .de-a-karte:nth-child(n+6) { animation-delay: .25s; }
}
/* ===================== Neufassung Vorschul-Check (Beschluss Nr. 7) ===================== */
/* Anrede unter der Seitenüberschrift. Bewusst ein Absatz und keine zweite
* Überschrift: Die Seitenüberschrift benennt die Seite, die Anrede spricht
* die Eltern an — zwei verschiedene Dinge.
*
* Zweite Ebene der Staffel (0.85 vom h1, ≈ 22 px): Sie ist die persönlichste
* Zeile der Seite und war mit 18 px kaum von einer Hinweiszeile zu
* unterscheiden. Über dem h1 steht sie trotzdem nie – dafür sorgt der Anteil.
*
* Das Gewicht geht auf 800 mit: Salbei auf Cream sind nur 3,25:1. Als „große
* Schrift" (ab 18,66 px fett) genügen 3:1, darunter wären 4,5:1 nötig. Mit
* 18 px/700 lag die Zeile knapp unter dieser Grenze, jetzt liegt sie
* deutlich darüber. */
.dagobert-ergebnis .de-begruessung {
font-family: 'Nunito', system-ui, sans-serif;
font-weight: 800;
font-size: var(--de-anrede);
line-height: 1.25;
color: var(--de-salbei);
margin: 4px 0 12px;
}
/* Freigegebener Satz zu den Entwicklungsschritten — steht direkt unter den
* Hinweiszeilen und gilt allen. Etwas größer als eine Hinweiszeile: Er ist
* keine Fußnote, sondern die Haltung, mit der die Seite gelesen werden soll. */
.dagobert-ergebnis .de-entwicklungsschritte {
font-size: 16.5px;
line-height: 1.6;
margin: 14px 0 4px;
}
/* Kasten oben, nur beim Altersband 3–4. Salbei statt Bernstein: Das ist eine
* Einordnung, keine Warnung und kein Angebot. */
.dagobert-ergebnis .de-kasten {
background: var(--de-salbei-tint);
border: 1px solid var(--de-salbei-linie);
border-left: 6px solid var(--de-salbei);
border-radius: 12px;
padding: 14px 16px;
margin: 16px 0 4px;
}
.dagobert-ergebnis .de-kasten p { margin: 0; }
/* „Deine Mail ist unterwegs" — erscheint nur, wenn der Versand bestätigt ist. */
.dagobert-ergebnis .de-mail-unterwegs {
background: var(--de-bernstein-tint);
border-radius: 10px;
padding: 11px 14px;
margin: 14px 0 4px;
font-size: 15px;
}
/* Abgelaufener Ergebnis-Link. Bewusst ohne Fehler-Anmutung: Hier ist nichts
* kaputt, hier ist nur eine Frist vorbei. Deshalb dieselbe ruhige Optik wie
* die übrige Seite und kein Terrakotta. */
.dagobert-ergebnis.de-abgelaufen {
max-width: 560px;
}
.dagobert-ergebnis.de-abgelaufen h1 {
margin-bottom: 12px;
}