/* Der Stil der Inhaltsseiten - gemeinsam fuer Startseite, Lehrkraefte, Creator und Institutionen. Lag bis eben inline in index.html; sobald es mehr als eine Seite gibt, muss er geteilt werden, sonst laufen sie auseinander. Genau aus dem Grund liegt kopf.css schon laenger daneben. */ :root{ color-scheme:dark; --paper:#13161B; --card:#1E2228; --ink:#F0F1F3; --soft:#98A0AC; --line:#343941; --accent:#A87BDB; --accent-satt:#BF9BE6; --auf:#0E0F11; --still:#262A31; --sz1:#35373A; --sz2:#5A5B5E; --sz3:#7A7B7E; --sz4:#9EA0A2; --sz-akz2:#765999; --sz-glanz:#CBB0EE; --disp:ui-rounded,'SF Pro Rounded','Nunito',system-ui,-apple-system,'Segoe UI',sans-serif; /* Abstand zwischen Kaesten, die nebeneinander oder untereinander stehen. */ --luft:22px; } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } } body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--disp); -webkit-font-smoothing:antialiased; line-height:1.55; } .bahn{ width:100%; max-width:680px; margin:0 auto; padding:0 22px; } h1,h2,h3{ letter-spacing:-.03em; text-wrap:balance; margin:0; } p{ margin:0; } a{ color:var(--accent); } /* Luft: die Abschnitte duerfen atmen. Enge wirkt gehetzt, und eine Seite, die etwas von Ruhe erzaehlt, darf nicht selbst gedraengt aussehen. */ /* Enger als vorher (104px -> 76px). Luft ist gut, aber siebzehn Bildschirme Scrollweg sind keine Ruhe mehr, sondern eine Strecke. */ section{ padding:clamp(40px,7vh,76px) 0; } /* Der Hero fuellt den Schirm. Wer die Seite oeffnet, soll EIN Bild sehen und EINEN Satz - nicht drei Dinge gleichzeitig. `100svh` statt `100vh`: Auf dem Handy zaehlt vh die Adressleiste mit, und der Knopf saesse dann unter der Kante. `min-height` statt `height`, damit ein sehr kleiner Schirm mitwaechst statt abzuschneiden. */ header.oben{ min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:clamp(24px,6vh,56px) 0 clamp(80px,12vh,120px); text-align:center; position:relative; } /* Der Hinweis zum Weiterscrollen. Ein Bildschirm ohne sichtbare Unterkante sieht aus, als waere die Seite zu Ende - genau die Falle, die volle Hoehe aufmacht. */ .weiter-runter{ position:absolute; left:0; right:0; bottom:clamp(22px,4vh,40px); display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--soft); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; } .weiter-runter svg{ width:20px; height:20px; } @media (prefers-reduced-motion:no-preference){ .weiter-runter svg{ animation:wippen 2.4s ease-in-out infinite; } } @keyframes wippen{ 0%,100%{ transform:none } 50%{ transform:translateY(5px) } } .figur{ color:var(--accent); width:clamp(84px,12vw,124px); height:auto; aspect-ratio:79.67/85.62; margin:0 auto 22px; display:block; } /* Die Illustrationen bringen ihren eigenen Grund mit, und der ist derselbe wie der der Seite - deshalb steht kein Rahmen darum (Marc). Genau dafuer ist der Seitengrund auf die Farbe der Grafiken gezogen worden. Die Breite ist gedeckelt, und zwar nicht aus Geschmack: Die Vorlagen sind 256 bis 334 Pixel breit, mehr Material gibt es nicht. Wer sie groesser zieht, bekommt Unschaerfe - auf einem Retina-Schirm schon ab etwa der halben Anzeigebreite. */ .bild{ display:block; width:100%; height:auto; margin:0 auto 26px; } /* Der Hero kommt mit 708x592 aus einer eigenen Vorlage und darf deshalb als einziges Bild wirklich gross werden - bis 340 px ist er selbst auf einem Retina-Schirm noch scharf. */ .bild-hero{ max-width:min(460px, 86vw); margin-bottom:clamp(18px,3vh,30px); } .bild-gross{ max-width:292px; } .bild-spot{ max-width:232px; } @media (prefers-reduced-motion:no-preference){ .bild{ animation:bildAuf .5s cubic-bezier(.2,.7,.2,1) both; } } @keyframes bildAuf{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } } h1{ font-size:clamp(30px,6.2vw,48px); font-weight:800; line-height:1.08; margin-bottom:18px; } .unterclaim{ font-size:clamp(16.5px,2.5vw,20px); font-weight:600; color:var(--soft); max-width:28ch; margin:0 auto 26px; text-wrap:balance; } .dreiklang{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 24px; margin-bottom:28px; } .dreiklang span{ font-size:clamp(17px,3vw,23px); font-weight:800; letter-spacing:-.03em; } .dreiklang span:nth-child(2){ color:var(--accent); } .knopf{ display:inline-block; background:var(--accent); color:var(--auf); text-decoration:none; font-size:16.5px; font-weight:800; padding:16px 34px; border-radius:16px; box-shadow:0 3px 0 var(--accent-satt); } .knopf:hover{ background:var(--accent-satt); box-shadow:0 3px 0 var(--accent); } .unterknopf{ font-size:13px; font-weight:600; color:var(--soft); margin-top:12px; } /* Die vier Versprechen: Zeichen in Textfarbe, nicht in Lila. Farbe traegt hier nichts bei - sie wuerde nur mit den Szenen konkurrieren. */ /* KEINE KACHELN. Diese vier Punkte stehen immer INNERHALB eines Aufklappers - eine Kachel darin waere ein Kasten im Kasten. Ein Haarstrich oben genuegt: er trennt die vier Punkte voneinander, ohne jeden einzeln einzurahmen. */ .blick{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px 22px; margin:26px 0 4px; text-align:left; } @media (min-width:640px){ .blick{ grid-template-columns:repeat(4,1fr); gap:22px 26px; } } .blick div{ padding-top:14px; border-top:1px solid var(--line); } .blick svg{ width:20px; height:20px; color:var(--accent); margin-bottom:10px; display:block; } .blick b{ display:block; font-size:14.5px; font-weight:800; margin-bottom:4px; } .blick span{ display:block; font-size:13px; font-weight:600; color:var(--soft); line-height:1.45; } /* Ab hier spricht die Seite mit Eltern, nicht mit Kindern. Die Kante macht den Wechsel sichtbar, damit sich die beiden Stimmen nicht vermischen. */ /* ---- Harte Fakten --------------------------------------------------------- Vier Zahlen nebeneinander, gross. Keine Ueberschrift: Zahlen, die eine Ueberschrift brauchen, sind keine harten Fakten. */ .fakten{ padding-top:clamp(34px,6vh,64px); padding-bottom:clamp(34px,6vh,64px); border-bottom:1px solid var(--line); } .zahlen{ display:grid; grid-template-columns:1fr 1fr; gap:26px 18px; text-align:center; } @media (min-width:640px){ .zahlen{ grid-template-columns:repeat(4,1fr); } } /* ---- Aufklappen: Ueberschrift und Teaser, alles Weitere einen Tipp entfernt (Marc). EIN Mechanismus, ueberall derselbe - vier Sonderloesungen waeren vier Dinge zum Lernen.
statt eigenem Zustand: Es funktioniert ohne JavaScript, ist von Haus aus mit der Tastatur bedienbar, und Suchmaschinen sehen den Inhalt trotzdem. Die FAQ weiter unten nutzt es schon - so bleibt es eine Sprache. */ .mehr{ margin-top:20px; } .mehr > summary{ display:inline-flex; align-items:center; gap:9px; cursor:pointer; list-style:none; font-size:14.5px; font-weight:800; color:var(--accent); padding:9px 0; } .mehr > summary::-webkit-details-marker{ display:none; } .mehr > summary::after{ content:""; width:8px; height:8px; flex-shrink:0; border-right:2.4px solid currentColor; border-bottom:2.4px solid currentColor; transform:rotate(45deg) translateY(-2px); } .mehr[open] > summary::after{ transform:rotate(-135deg) translateY(-2px); } .mehr[open] > summary{ color:var(--soft); } /* EINGERUECKT (Marc). Aufgeklappt gehoert der Inhalt sichtbar unter seine Ueberschrift - ohne Einzug steht er buendig mit dem Fliesstext darueber und man sieht nicht mehr, dass er zu dem Aufklapper gehoert. KEIN STRICH LINKS: Hier stand kurz einer als Klammer. Marc hat gefragt, was der graue Balken sei - und genau das ist die Antwort darauf. Ein Zeichen, das man erklaeren muss, erklaert nichts. Der Einzug allein sagt dasselbe leiser. Auf sehr schmalen Schirmen faellt er kleiner aus - dort ist jeder Millimeter Textbreite mehr wert. */ .mehr-inhalt{ padding:6px 0 2px 14px; } /* Der erste Absatz bringt oft seinen eigenen Aussenabstand mit (.kette hat bis zu 40 px). Der ist fuer den Fliesstext gedacht, in dem der Absatz sonst steht - im Aufklapper reisst er ein Loch direkt unter die Ueberschrift. */ .mehr-inhalt > :first-child{ margin-top:0; } @media (min-width:420px){ .mehr-inhalt{ padding-left:20px; } } /* Im Chat sitzt der Aufklapper zwischen Sprechblasen, nicht unter einem Absatz - er braucht Abstand nach oben und darf nicht am Rand kleben. */ .mehr-chat{ margin:6px 0 0 42px; } @media (prefers-reduced-motion:no-preference){ .mehr[open] .mehr-inhalt{ animation:mehrAuf .32s cubic-bezier(.2,.7,.2,1) both; } } @keyframes mehrAuf{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:none } } .zahlen b{ display:block; font-size:clamp(34px,7vw,52px); font-weight:800; letter-spacing:-.04em; line-height:1; color:var(--accent); font-variant-numeric:tabular-nums; } /* Der Satz, der Bloops Haltung traegt. Er steht allein, ohne Kasten und ohne Ueberschrift - eine Aussage ueber Ruhe darf nicht selbst laut auftreten. */ .ruhe{ margin-top:clamp(28px,5vh,44px); font-size:clamp(17px,2.6vw,21px); font-weight:600; color:var(--soft); line-height:1.55; max-width:46ch; } .ruhe span{ display:inline-block; margin-top:14px; color:var(--ink); font-weight:800; } .zahlen span{ display:block; margin-top:8px; font-size:13.5px; font-weight:600; color:var(--soft); line-height:1.35; text-wrap:balance; } .eltern-start{ border-top:1px solid var(--line); } /* ---- Die vier Wege -------------------------------------------------------- Nach dem gemeinsamen Anfang teilt sich die Seite. Jede Karte nennt EINE Person und EINEN Satz, der nur fuer sie stimmt - eine Karte, die fuer alle passt, spricht mit niemandem. */ .wege{ display:grid; grid-template-columns:1fr; gap:var(--luft); margin-top:34px; } @media (min-width:560px){ .wege{ grid-template-columns:1fr 1fr; } } /* text-align:left ist noetig, seit die Karte ein