/* ══════════════════════════════════════════════════════════════════════ SUMENIA ACADEMY — das gemeinsame Stilblatt 22.08.2026 ══════════════════════════════════════════════════════════════════════ WARUM ES DIESE DATEI GIBT. Bis heute trug jede Academy-Seite ihr Stilblatt selbst — bei zwei Seiten vertretbar, bei drei ist es Drift: Wer eine Farbe aendert, aendert sie an einer Stelle und vergisst zwei. Genau davor warnt die Eiserne Regel 2. WORAUS SIE ENTSTANDEN IST: aus dem Stilblatt von ftp-verstehen.html, ergaenzt um das, was nur im Cornerstone stand (.rechnung, .nichtgesagt, .breit) und um die enge Tabellenfassung (.tab.eng). Nachgewiesen mit einem Bildvergleich: Jede Seite wurde bei 1280 und 390 px vor und nach dem Umbau aufgenommen und Punkt fuer Punkt verglichen. ⚠️ DIE ZAHLEN KOMMEN AUS public/index.html, Zeile 123 ff. Wer hier eine aendert, aendert sie dort auch — oder gar nicht. ⚠️ DIESE DATEI BRAUCHT EINE ?v=-KENNUNG in jeder Seite, die sie einbindet. Dafuer musste werkzeug/kennungen.mjs beigebracht werden, in Unterordner zu steigen — vorher las es nur die oberste Ebene von public/ und haette die Kennung nie nachgezogen. Dasselbe gilt fuer test/kennungen.mjs. Beide sind am 22.08.2026 nachgezogen worden. AUFBAU 1 Grundlage Farben, Leitern, Kopfzeile, Fusszeile 2 Artikel Fliesstext, Zitat, Tabelle, Modell, Mythen, Grafik, Gesundheitskasten, Weiterlesen, Quellen Seiteneigenes bleibt in der jeweiligen Seite. ══════════════════════════════════════════════════════════════════════ */ :root{ --bg:#06080f; --bg2:#080b14; --ink:#eef1f8; --mut:#94a0b8; --dim:#7884a2; --hair:rgba(255,255,255,.09); --cyan:#22d3ee; --violet:#a855f7; --pink:#ec4899; --grad:linear-gradient(100deg,#22d3ee 0%,#a855f7 52%,#ec4899 100%); --s1:11px; --s2:12px; --s3:13px; --s4:15px; --s5:17px; --s6:clamp(17px,1.7vw,20px); --s7:clamp(18px,2vw,22px); --s8:clamp(22px,2.6vw,28px); --s9:clamp(26px,3.8vw,40px); --s10:clamp(32px,5.2vw,56px); --s11:clamp(38px,7.4vw,80px); --a4:4px; --a8:8px; --a12:12px; --a16:16px; --a20:20px; --a24:24px; --a32:32px; --a40:40px; --a48:48px; --a64:64px; --a96:96px; --rand:clamp(20px,5vw,32px); --takt:clamp(72px,8vw,128px); --takt-klein:clamp(48px,5vw,80px); --takt-kopf:clamp(130px,20vh,220px); --r1:12px; --r2:16px; --r3:20px; --r4:24px; --r-pille:100px; --r-kreis:50%; --sp-breit:1180px; --sp-mittel:900px; --sp-schmal:680px; --sp-spalte:480px; --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; --lese:68ch; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{background:var(--bg);color:var(--ink);font-family:var(--font); -webkit-font-smoothing:antialiased;overflow-x:clip;line-height:1.5} a{color:inherit;text-decoration:none} .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} h1,h2,h3{text-wrap:balance;letter-spacing:-.02em;line-height:1.15} :focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:var(--a4)} /* ── Kopfzeile ───────────────────────────────────────────────────────── */ header.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center; justify-content:space-between;padding:var(--a16) var(--rand); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); background:linear-gradient(180deg,rgba(6,8,15,.72),rgba(6,8,15,0)); transition:background .3s,border-color .3s;border-bottom:1px solid transparent} header.nav.scrolled{background:rgba(6,8,15,.82);border-bottom:1px solid var(--hair)} .brand{display:flex;align-items:center;gap:var(--a12);min-height:44px;font-weight:600; font-size:var(--s5);letter-spacing:-.01em} .brand .dot{width:28px;height:28px;background:url(/brand/favicon.svg) center/28px 28px no-repeat} .brand small{font-size:var(--s2);letter-spacing:.14em;text-transform:uppercase;color:var(--dim); font-weight:600;padding-left:var(--a4)} .nav-cta{font-size:var(--s4);font-weight:600;padding:var(--a12) var(--a16); border-radius:var(--r-pille);border:1px solid var(--hair);display:inline-flex;align-items:center; min-height:44px;background:rgba(255,255,255,.04);transition:.2s;color:var(--ink)} .nav-cta:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2)} .nav-lang{display:inline-flex;gap:var(--a8);align-items:center;margin-left:auto;margin-right:var(--a12)} .nav-lang button{position:relative;font:600 var(--s1)/1 'Inter',system-ui,sans-serif;letter-spacing:.06em; min-width:44px;min-height:44px;padding:0 var(--a12);border:0;background:none;color:var(--dim); display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:color .18s} .nav-lang button.on{color:var(--ink)} .nav-lang button[disabled]{cursor:not-allowed;opacity:.45} .nav-lang button.on::before{content:"";position:absolute;inset:5px 0;border-radius:var(--r-pille); padding:1px;background:var(--grad); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none} .nav-cta .lang{display:inline} .nav-cta .kurz{display:none} @media(max-width:560px){ .brand small{display:none} .nav-lang{margin-right:var(--a4);gap:0} .nav-lang button{padding:0 var(--a4)} .nav-cta{font-size:var(--s3);padding:0 var(--a16);white-space:nowrap} .nav-cta .lang{display:none} .nav-cta .kurz{display:inline} } @media(max-width:420px){ .brand{font-size:0;gap:0;min-width:44px;justify-content:flex-start} .brand .dot{flex:none} } main{padding:0 var(--rand)} .spalte{max-width:var(--lese);margin:0 auto} .krumen{max-width:var(--lese);margin:0 auto;padding-top:calc(var(--takt-kopf) * .62); font-size:var(--s3);color:var(--dim);display:flex;align-items:center;gap:var(--a8);flex-wrap:wrap} .krumen a{min-height:44px;display:inline-flex;align-items:center;transition:color .15s} .krumen a:hover{color:var(--ink)} .krumen .trenner{opacity:.5} .artikelkopf{max-width:var(--lese);margin:0 auto;padding-bottom:var(--a48)} /* ⚠️ AN DEN ARTIKELKOPF GEBUNDEN, nicht global. «rubrik» heisst auf der Academy-Startseite etwas anderes: dort ist es die kleine Zeile auf einer Karte, ohne den Verlaufsstrich davor. Ohne diese Bindung bekam jede Karte den Strich und 24 px Abstand dazu — gefunden im Bildvergleich vor und nach dem Umbau, nicht beim Lesen. */ .artikelkopf .rubrik{font-size:var(--s2);letter-spacing:.16em;text-transform:uppercase;color:var(--mut); font-weight:700;display:inline-flex;align-items:center;gap:var(--a12);margin-bottom:var(--a24)} .artikelkopf .rubrik::before{content:"";width:28px;height:1px;background:var(--grad)} h1{font-size:var(--s10);font-weight:650;margin-bottom:var(--a20)} .untertitel{font-size:var(--s6);color:var(--mut);margin-bottom:var(--a32)} .versprechen{border-left:2px solid transparent;border-image:var(--grad) 1; padding-left:var(--a20);font-size:var(--s5);color:var(--ink)} .versprechen .dauer{font:600 var(--s3)/1 var(--mono);color:var(--dim); display:block;margin-bottom:var(--a8);letter-spacing:.06em} article{font-size:var(--s5);line-height:1.75} article > * + *{margin-top:var(--a24)} article h2{font-size:var(--s8);font-weight:650;margin-top:var(--takt-klein); padding-top:var(--a32);border-top:1px solid var(--hair)} article h3{font-size:var(--s6);font-weight:650;margin-top:var(--a40)} article p{color:var(--mut)} article p strong,article strong{color:var(--ink);font-weight:600} article ul{list-style:none;display:flex;flex-direction:column;gap:var(--a12)} article li{color:var(--mut);padding-left:var(--a24);position:relative} article li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:1px;background:var(--dim)} article li strong{color:var(--ink)} /* ── Ein Verweis mitten im Fliesstext ═════════════════════════════════ GEMESSEN: Als gewoehnlicher Inline-Verweis war er 154 x 21 px — unter den 44 px, die in diesem Projekt fuer jedes Tippziel gelten. WIE ER GROESSER WIRD, OHNE ANDERS AUSZUSEHEN: inline-block plus 12 px Innenabstand oben und unten, und derselbe Betrag als negativer Aussenabstand wieder abgezogen. Die Flaeche waechst, der Textfluss bleibt Zeile fuer Zeile derselbe. ⚠️ UND DESHALB EINE UNTERSTREICHUNG STATT EINES RAHMENS: Ein border-bottom sitzt am KASTEN und waere durch den Innenabstand 12 px unter den Text gerutscht. text-decoration haengt an den Buchstaben und wandert nicht mit. ⚠️ inline-block bricht nicht um. Das ist bei zwei Woertern richtig und bei einem halben Satz falsch — laengere Verweise gehoeren in eine eigene Zeile, nicht in den Satz. */ article a.quer{color:var(--cyan);display:inline-block;padding:12px 0;margin:-12px 0; text-decoration:underline;text-decoration-color:rgba(34,211,238,.35); text-underline-offset:3px;text-decoration-thickness:1px} article a.quer:hover{text-decoration-color:var(--cyan)} .fuehrend{font-size:var(--s6);color:var(--ink)} .merksatz{font-size:var(--s7);font-weight:600;color:var(--ink); padding:var(--a32) 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair); text-wrap:balance} .zitat{border:1px solid var(--hair);border-radius:var(--r2);background:var(--bg2); padding:var(--a24) var(--a24) var(--a20);position:relative;overflow:hidden} .zitat::before{content:"";position:absolute;inset:0 auto 0 0;width:2px;background:var(--grad)} .zitat q{display:block;font-size:var(--s5);color:var(--ink);font-style:normal;quotes:"«" "»"} .zitat .sinn{margin-top:var(--a16);font-size:var(--s4);color:var(--dim);font-style:italic} .zitat .herkunft{margin-top:var(--a16);font:600 var(--s2)/1.4 var(--font); letter-spacing:.06em;text-transform:uppercase;color:var(--mut)} /* ── Die grosse Zahl ══════════════════════════════════════════════════ Dieselbe Behandlung wie «267 W» im Cornerstone, auf ausdruecklichen Hinweis aus der Textvorlage: Abschnitt 2 ist der Moment, in dem der Leser etwas erfaehrt, das er vorher nicht wusste. Die Streuung steht GLEICH GROSS daneben und nicht kleingedruckt darunter — sie ist die eigentliche Nachricht. */ .grossezahl{border:1px solid var(--hair);border-radius:var(--r3);background:var(--bg2); padding:var(--a40) var(--a32);text-align:center;position:relative;overflow:hidden} .grossezahl::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--grad)} .grossezahl .wert{font:600 clamp(30px,6vw,52px)/1.05 var(--mono);letter-spacing:-.02em;display:block} .grossezahl .einheit{font-size:var(--s6);color:var(--mut);font-family:var(--font)} .grossezahl .darunter{margin-top:var(--a20);font-size:var(--s4);color:var(--mut)} .grossezahl .spanne{margin-top:var(--a16);font:500 var(--s4)/1.6 var(--mono);color:var(--ink)} .tab{border:1px solid var(--hair);border-radius:var(--r2);overflow:hidden} .tab .zeile{display:grid;grid-template-columns:200px 1fr 210px;gap:var(--a16); padding:var(--a16) var(--a20);border-bottom:1px solid var(--hair);font-size:var(--s4)} .tab .zeile:last-child{border-bottom:0} .tab .kopfzeile{background:rgba(255,255,255,.03);font:600 var(--s2)/1.4 var(--font); letter-spacing:.08em;text-transform:uppercase;color:var(--dim)} .tab .name{color:var(--ink);font-weight:600} .tab .wert{color:var(--mut)} .tab .wert b{color:var(--ink);font-weight:600} .tab .wert .gemessen{color:var(--cyan)} @media(max-width:760px){ .tab .zeile{grid-template-columns:1fr;gap:var(--a4)} .tab .kopfzeile{display:none} .tab .wert::before{content:attr(data-spalte) " · ";color:var(--dim);font-size:var(--s2); text-transform:uppercase;letter-spacing:.08em} } /* ── Das Modell · Bauteil aus dem Cornerstone ────────────────────────── */ .dcu{max-width:var(--sp-breit);margin-left:auto;margin-right:auto} .dcu-raster{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--a20);align-items:stretch} .dcu-stufe{border:1px solid var(--hair);border-radius:var(--r3);background:var(--bg2); padding:var(--a32) var(--a24);display:flex;flex-direction:column;gap:var(--a16); position:relative;overflow:hidden} .dcu-stufe::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--grad)} .dcu-stufe:nth-child(1)::before{opacity:.22} .dcu-stufe:nth-child(2)::before{opacity:.55} .dcu-stufe:nth-child(3)::before{opacity:1} .dcu-stufe .kopf{font:700 var(--s1)/1 var(--mono);letter-spacing:.16em;color:var(--dim)} .dcu-stufe h3{font-size:var(--s6);font-weight:650;margin:0} .dcu-stufe p{font-size:var(--s4);color:var(--mut);margin:0;line-height:1.6} .dcu-wert{font:600 var(--s9)/1 var(--mono);letter-spacing:-.02em} .dcu-umgebung{display:flex;flex-wrap:wrap;gap:var(--a8)} .dcu-umgebung span{font-size:var(--s3);color:var(--mut);border:1px solid var(--hair); border-radius:var(--r-pille);padding:6px var(--a12)} .dcu-fragen{list-style:none;display:flex;flex-direction:column;gap:var(--a12);margin:0} .dcu-fragen li{font-size:var(--s4);color:var(--ink);padding-left:var(--a20);position:relative} .dcu-fragen li::before{content:"?";position:absolute;left:0;color:var(--cyan);font-weight:700} @media(max-width:900px){ .dcu-raster{grid-template-columns:1fr} } /* ── Die Mythen ══════════════════════════════════════════════════════ Fuenf Bloecke, die Behauptung gross und durchgestrichen, die Aufloesung darunter. Das Durchstreichen ist hier kein Schmuck: Es sagt in einem Blick, dass der Satz oben NICHT gilt — auch fuer jemanden, der nur ueberfliegt. Fuer Vorleseprogramme steht es zusaetzlich im Text. */ .mythen{display:flex;flex-direction:column;gap:var(--a16)} .mythos{border:1px solid var(--hair);border-radius:var(--r2);background:var(--bg2); padding:var(--a24);display:grid;grid-template-columns:auto 1fr;gap:var(--a20) var(--a16); align-items:start} .mythos .nein{font:700 var(--s2)/1 var(--font);letter-spacing:.1em;text-transform:uppercase; color:var(--pink);border:1px solid rgba(236,72,153,.4);border-radius:var(--r-pille); padding:8px var(--a12);white-space:nowrap} .mythos .satz{font-size:var(--s6);font-weight:600;color:var(--dim); text-decoration:line-through;text-decoration-color:rgba(236,72,153,.5);align-self:center} .mythos .aufloesung{grid-column:1/-1;font-size:var(--s4);color:var(--mut);line-height:1.7} .mythos .aufloesung strong{color:var(--ink)} @media(max-width:560px){ .mythos{grid-template-columns:1fr;gap:var(--a12)} .mythos .nein{justify-self:start} } /* ── Die Verlaufsgrafik ═══════════════════════════════════════════════ ⚠️ SIE IST DER ABSCHNITT, nicht seine Verzierung. Die Textvorlage sagt es ausdruecklich: «Wenn nur eine Grafik gebaut wird, dann diese.» Was sie zeigt: drei Messungen und um jede ein Band von ± 2,9 % — der gemessenen Streuung desselben Tests bei derselben Person. Benachbarte Baender ueberlappen, das erste und das letzte nicht mehr. NACHGERECHNET, damit das Bild nicht behauptet, was die Zahlen nicht hergeben: 251 W ± 7,3 → 243,7 … 258,3 259 W ± 7,5 → 251,5 … 266,5 ueberlappt mit beiden Nachbarn 267 W ± 7,7 → 259,3 … 274,7 258,3 < 259,3 → KEINE Ueberlappung Die Aussage des Abschnitts steht damit im Bild und nicht nur im Text. Selbst gezeichnet als SVG — kein fremdes Verteilnetz (D4), keine Programmbibliothek, nichts nachzuladen. */ .grafik{border:1px solid var(--hair);border-radius:var(--r3);background:var(--bg2); padding:var(--a32) var(--a24) var(--a24);overflow:hidden} .grafik svg{display:block;width:100%;height:auto} .grafik .legende{display:flex;flex-wrap:wrap;gap:var(--a16);margin-top:var(--a20); font-size:var(--s3);color:var(--dim)} .grafik .legende span{display:inline-flex;align-items:center;gap:var(--a8)} .grafik .legende i{width:14px;height:14px;border-radius:3px;display:inline-block} .gesundheit{border:1px solid rgba(34,211,238,.28);border-radius:var(--r3); background:rgba(34,211,238,.04);padding:var(--a32)} .gesundheit h2{border:0;margin:0 0 var(--a16);padding:0;font-size:var(--s7)} .gesundheit p{color:var(--mut)} .gesundheit p + p{margin-top:var(--a16)} .weiter{display:flex;flex-direction:column;margin-top:var(--a24)} .weiter a,.weiter .geplant{display:flex;align-items:flex-start;gap:var(--a16); padding:var(--a20) 0;border-bottom:1px solid var(--hair);transition:.15s} .weiter a:hover{padding-left:var(--a8)} .weiter .titel{font-size:var(--s5);font-weight:600;color:var(--ink);display:block} .weiter .geplant .titel{color:var(--dim);font-weight:500} .weiter .satz{font-size:var(--s4);color:var(--mut);display:block;margin-top:var(--a4)} .weiter .rechts{margin-left:auto;flex:none;padding-left:var(--a16)} .stand{font:600 var(--s1)/1 var(--font);letter-spacing:.08em;text-transform:uppercase; padding:6px var(--a12);border-radius:var(--r-pille);border:1px solid var(--hair); color:var(--dim);white-space:nowrap;display:inline-block} .demozeile{border-radius:var(--r3);padding:1px;background:var(--grad)} .demozeile-innen{border-radius:calc(var(--r3) - 1px);background:var(--bg2); padding:var(--a32);display:grid;grid-template-columns:1fr auto;gap:var(--a24);align-items:center} .demozeile .satz{font-size:var(--s6);color:var(--ink);line-height:1.4} .demozeile .satz span{color:var(--mut);display:block} .knopf{display:inline-flex;align-items:center;gap:var(--a8);min-height:52px; padding:0 var(--a24);border-radius:var(--r-pille);font-size:var(--s4);font-weight:600; background:var(--ink);color:#06080f;transition:.2s;white-space:nowrap} .knopf:hover{transform:translateY(-1px);box-shadow:0 8px 30px rgba(255,255,255,.12)} @media(max-width:700px){ .demozeile-innen{grid-template-columns:1fr} } .quellen{margin-top:var(--takt-klein)} .quellen ol{list-style:none;counter-reset:q;display:flex;flex-direction:column;gap:var(--a20)} .quellen li{counter-increment:q;padding-left:var(--a32);position:relative; font-size:var(--s4);color:var(--mut);line-height:1.6} .quellen li::before{content:counter(q);position:absolute;left:0;top:0; font:600 var(--s2)/1.6 var(--mono);color:var(--dim)} .quellen .art{font-style:italic;color:var(--dim)} .quellen .durchsicht{margin-top:var(--a32);font-size:var(--s3);color:var(--dim)} footer.ft{margin-top:var(--takt);border-top:1px solid var(--hair); padding:var(--takt-klein) var(--rand) var(--a48)} .ft-innen{max-width:var(--sp-breit);margin:0 auto;display:grid; grid-template-columns:2fr 1fr 1fr;gap:var(--a40)} .ft h5{font-size:var(--s2);letter-spacing:.12em;text-transform:uppercase;color:var(--dim); margin-bottom:var(--a16);font-weight:600} .ft a{display:flex;align-items:center;min-height:44px;font-size:var(--s4);color:var(--mut);transition:color .15s} .ft a:hover{color:var(--ink)} .ft p{font-size:var(--s4);color:var(--mut);max-width:44ch;margin-top:var(--a12)} .ft-unten{max-width:var(--sp-breit);margin:var(--a48) auto 0;padding-top:var(--a24); border-top:1px solid var(--hair);display:flex;justify-content:space-between;gap:var(--a16); flex-wrap:wrap;font-size:var(--s3);color:var(--dim)} @media(max-width:760px){ .ft-innen{grid-template-columns:1fr;gap:var(--a24)} } /* ── Aus dem Cornerstone uebernommen ──────────────────────────────────── */ .breit{max-width:var(--sp-breit);margin:0 auto} .rechnung{font:600 var(--s7)/1.4 var(--mono);color:var(--ink); background:var(--bg2);border:1px solid var(--hair);border-radius:var(--r2); padding:var(--a24);text-align:center} .rechnung .ergebnis{color:transparent;background:var(--grad); -webkit-background-clip:text;background-clip:text} .nichtgesagt{border:1px dashed rgba(255,255,255,.18);border-radius:var(--r2); padding:var(--a24);text-align:center;font-size:var(--s7);font-weight:600; color:var(--dim);text-decoration:line-through;text-decoration-color:rgba(255,255,255,.25)} /* Die enge Tabellenfassung: zwei Textspalten statt einer Text- und einer Ergebnisspalte. Der Cornerstone benutzt sie fuer «aeussere und innere Belastung». */ /* ⚠️ NUR OBERHALB DES UMBRUCHS. Ohne den Rahmen @media(min-width) gewinnt diese Regel gegen die Stapelregel weiter oben: Drei Klassen schlagen zwei, und ein @media erhoeht die Spezifitaet NICHT (CLAUDE.md, Handy- Regel). Gemessen: Bei 390 px stand die Tabelle des Cornerstones dreispaltig statt gestapelt, die Seite wurde 115 px hoeher, und die Ueberschriften brachen Buchstabe fuer Buchstabe um. Gefunden im Bildvergleich, nicht beim Lesen. */ @media(min-width:761px){ .tab.eng .zeile{grid-template-columns:170px 1fr 1fr} } /* Der Sprachschalter der Startseite kennt einen gesperrten Zustand. */ .nav-lang button:hover:not([disabled]){color:var(--mut)} /* ── Zwei Spalten statt drei ─────────────────────────────────────────── Wie .tab.eng nur oberhalb des Umbruchs, aus demselben Grund: Ein @media erhoeht die Spezifitaet nicht, drei Klassen schlagen zwei. */ @media(min-width:761px){ .tab.zwei .zeile{grid-template-columns:220px 1fr} } /* ── Eine kurze Tagesreihe ═════════════════════════════════════════════ Vier Tage nebeneinander, eine Zahl je Tag. ⚠️ KEINE BEWERTUNG. Kein Rot, kein Gruen, keine Ampel — bei einem Gesundheitswert ist das keine Geschmacksfrage, sondern die Grenze, die Sumenia nicht ueberschreitet. Der auffaellige Tag wird MARKIERT, nicht benotet: eine Haarlinie und ein Satz, der sagt, was daran auffaellt. */ .tage{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--a12)} .tag{border:1px solid var(--hair);border-radius:var(--r2);background:var(--bg2); padding:var(--a20) var(--a12);text-align:center} .tag .name{font:600 var(--s2)/1 var(--font);letter-spacing:.1em;text-transform:uppercase; color:var(--dim);display:block;margin-bottom:var(--a12)} .tag .zahl{font:600 var(--s8)/1 var(--mono);color:var(--ink)} .tag.ausserhalb{border-color:rgba(255,255,255,.28)} .tag .hinweis{display:block;margin-top:var(--a8);font-size:var(--s1); letter-spacing:.06em;text-transform:uppercase;color:var(--mut)} @media(max-width:560px){ .tage{grid-template-columns:repeat(2,1fr)} } /* ── Zwei Zeitstrahlen mit Herzschlaegen ──────────────────────────────── */ .strahlen{display:flex;flex-direction:column;gap:var(--a24)} .strahl .wer{font:600 var(--s3)/1 var(--font);color:var(--mut);margin-bottom:var(--a8)} /* ── Vier Spalten: eine Kennzahl ueber mehrere Zeitpunkte ────────────── Zuerst gebraucht in «Trainingsbelastung verstehen», Abschnitt 13 — der ersten Stelle, an der drei Academy-Kapitel nebeneinanderliegen. Wie .tab.eng und .tab.zwei nur oberhalb des Umbruchs: Ein @media erhoeht die Spezifitaet nicht, drei Klassen schlagen zwei. */ @media(min-width:761px){ .tab.wochen .zeile{grid-template-columns:220px 1fr 1fr 1fr} } /* ── Zwei Dinge nebeneinandergestellt ══════════════════════════════════ «30 Minuten locker gegen 30 Minuten intensiv» — zwei Kaesten und dazwischen das Wort, um das es geht. Kein Sieger, keine Farbe: Die Aussage des Abschnitts ist gerade, dass man es NICHT sieht. */ .gegen{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--a16);align-items:stretch} .gegen .seite{border:1px solid var(--hair);border-radius:var(--r2);background:var(--bg2); padding:var(--a24);text-align:center;display:flex;flex-direction:column;justify-content:center;gap:var(--a8)} .gegen .seite b{font-size:var(--s6);font-weight:650;color:var(--ink)} .gegen .seite span{font-size:var(--s3);color:var(--mut)} .gegen .wort{align-self:center;font:600 var(--s3)/1 var(--font);letter-spacing:.12em; text-transform:uppercase;color:var(--dim)} @media(max-width:560px){ .gegen{grid-template-columns:1fr} .gegen .wort{justify-self:center;padding:var(--a4) 0} } /* ── Zwei Stimmen, gleich stark ════════════════════════════════════════ «Schlaf-Wert 91» gegen «Ich fühle mich erschöpft». ⚠️ KEINE SEITE DARF GESTALTERISCH GEWINNEN. Kein Pfeil, kein Haken, kein Kreuz, keine Farbe, die eine Seite auszeichnet — dazwischen steht nur Raum. Die Aussage des Abschnitts ist, dass beide stimmen können; eine Gestaltung, die eine Seite grösser macht, widerspricht dem Text. Am Handy stehen sie untereinander, gleich hoch. */ .stimmen{display:grid;grid-template-columns:1fr 1fr;gap:var(--a20)} .stimme{border:1px solid var(--hair);border-radius:var(--r3);background:var(--bg2); padding:clamp(24px,3.5vw,40px);display:flex;flex-direction:column;justify-content:center; gap:var(--a12);min-height:200px;text-align:center} .stimme .wer{font:600 var(--s2)/1 var(--font);letter-spacing:.14em;text-transform:uppercase; color:var(--dim)} .stimme .was{font-size:var(--s8);font-weight:650;color:var(--ink);line-height:1.2} .stimme .zahl{font:600 clamp(44px,7vw,72px)/1 var(--mono);letter-spacing:-.02em;color:var(--ink)} .stimme .klein{font-size:var(--s3);color:var(--mut)} @media(max-width:640px){ .stimmen{grid-template-columns:1fr} } /* ── Ein Kasten, der etwas festhält ──────────────────────────────────── Fuer Stellen, an denen eine Entscheidung erklaert wird — etwa warum keine Geraetemarken genannt werden. Ruhiger als der Gesundheitskasten, deutlicher als ein Absatz. */ .merkkasten{border:1px solid var(--hair);border-left:2px solid var(--violet); border-radius:var(--r2);background:rgba(255,255,255,.02);padding:var(--a24); font-size:var(--s4);color:var(--mut);line-height:1.7} .merkkasten b,.merkkasten strong{color:var(--ink);font-weight:600} .merkkasten > * + *{margin-top:var(--a12)} /* ── Der Merkkasten in Rangstufe der Rechnung darueber ═════════════════ ⚠️ .stark IST EINE BEDINGUNG UND KEINE GESTALTUNG. Im Kapitel VO₂max, Abschnitt 3, steht ein Rechenweg («4,2 l/min ÷ 74 kg ≈ 57») und darunter der Satz, dass das Mathematik und keine Trainingsempfehlung ist. Der Anhang der Quelldatei verlangt ausdruecklich, dass dieser Kasten NICHT kleiner gesetzt wird als die Rechnung. Der normale .merkkasten steht auf --s4 (15px), .rechnung auf --s7 (18–22px) — kleiner gesetzt liest sich der Rechenweg wie ein Vorschlag und die Warnung wie eine Fussnote. Genau die Umkehrung, die hier ausgeschlossen ist. Wer --s7 hier senkt, muss den Anhang widerlegen. */ .merkkasten.stark{font-size:var(--s7);line-height:1.5;color:var(--ink); border-left-width:3px;border-left-color:var(--cyan); background:rgba(34,211,238,.04);padding:var(--a32)} .merkkasten.stark > * + *{margin-top:var(--a16);font-size:var(--s5);color:var(--mut)}