.hd{--blau:#1d71b8;--blau-dunkel:#155a91;--hellblau:#36a9e0;--blau-hell:#e3f2fb;--linie:#c3dcef;--text:#333;--leise:#56616d;--rot:#c0392b; --schatten:0 .75rem 2.5rem rgba(36,48,42,.08);font-family:'Open Sans',system-ui,sans-serif;font-size:1rem;line-height:1.7;color:var(--text);text-align:left;hyphens:auto;-webkit-hyphens:auto;-ms-hyphens:auto;overflow-wrap:break-word} .hd *{box-sizing:border-box} .hd p{margin:0 0 1em} .hd h1{font-size:1.5rem;line-height:1.25;margin:0 0 .5rem;color:var(--blau)} .hd h2{font-size:1.25rem;line-height:1.3;margin:0 0 .6rem;color:var(--blau)} .hd h3{font-size:1.05rem;line-height:1.3;margin:0 0 .4rem;color:var(--blau)} .hd .hinweis-vorschau{border-left:4px solid var(--hellblau);background:var(--blau-hell);padding:.5rem .9rem;font-size:.85rem;color:var(--leise);margin:0 0 1rem;border-radius:0 .5rem .5rem 0} .hd .unternav{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;margin:0 0 1.25rem;padding:0 0 .6rem;border-bottom:2px solid var(--hellblau);font-weight:600} .hd .unternav a{color:var(--blau);text-decoration:none} .hd .unternav a.an{color:var(--text);text-decoration:underline;text-underline-offset:.3em} .hd .pfad{font-size:.85rem;color:var(--leise);margin:0 0 .75rem} .hd .pfad a{color:var(--leise)} .hd .abschnitt{margin:0 0 2.25rem} .hd .flaeche{background:var(--blau-hell);border-radius:1.4rem;padding:1.5rem} .hd .lead{font-size:1.08rem;color:var(--leise);max-width:68ch} .hd .zwei{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:2rem;align-items:start} .hd .raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr));gap:1rem} .hd .karte{background:#fff;border:1px solid var(--linie);border-radius:.9rem;padding:1.1rem 1.2rem;box-shadow:var(--schatten);display:flex;flex-direction:column;gap:.35rem;min-width:0} .hd .karte.betont{border:2px solid var(--blau)} .hd .karte.aussage{border-left:5px solid var(--blau)} .hd .karte .unten{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;padding-top:.4rem} .hd .karte ul{margin:0;padding-left:1.1rem} .hd .karte ul li{list-style:disc;margin:.15rem 0} .hd .marke{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--blau)} .hd .begruessung-zeile{margin:0 0 .3rem;font-weight:700;color:var(--blau)} .hd .motto{color:var(--leise);font-style:italic} .hd .preis{font-size:1.4rem;font-weight:700;color:var(--text)} .hd .preis small{font-size:.85rem;font-weight:400;color:var(--leise)} .hd .pille{display:inline-block;align-self:flex-start;justify-self:start;font-size:.75rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:.15rem .6rem;border-radius:99px;background:var(--blau-hell);color:var(--blau)} .hd .pille.frei{background:var(--blau);color:#fff} .hd a.button{margin:0!important} .hd .knopf-zwei{display:inline-block;padding:10px 18px;border:1.5px solid var(--blau);border-radius:10px;color:var(--blau);font-weight:600;text-decoration:none;background:#fff} .hd .knopf-zwei:hover{background:var(--blau-hell);text-decoration:none} .hd .reihe{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center} .hd .chartbox{background:#fff;border:1px solid var(--linie);border-radius:1rem;padding:.5rem} .hd .chartbox img,.hd .bgbox svg{display:block;width:100%;height:auto} .hd-ki .bgbox svg{display:block;width:100%;height:auto} .bgbox{min-height:120px} .hd .legende{font-size:.82rem;color:var(--leise);margin-top:.4rem} .hd .punkt{display:inline-block;width:.75rem;height:.75rem;border-radius:.2rem;vertical-align:-.1rem;margin-right:.3rem} .hd .trefferbalken{margin-top:1rem} .hd .trefferbalken .kopf{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.5rem} .hd .trefferbalken .wert{font-weight:700;font-size:1.3rem;color:var(--blau)} .hd .trefferbalken .spur{height:.9rem;border-radius:99px;background:var(--blau-hell);overflow:hidden} .hd .trefferbalken .fuellung{height:100%;background:var(--blau);border-radius:99px;transition:width .35s ease} .hd .trefferbalken .skala{display:flex;justify-content:space-between;font-size:.75rem;color:var(--leise);margin-top:.3rem} .hd .tornav{display:flex;justify-content:space-between;margin-top:1.4rem;font-weight:600} .hd .torliste{list-style:none!important;margin:.3rem 0 0!important;padding:0!important;display:grid;gap:.25rem} .hd .torliste a{text-decoration:none;color:var(--blau)} .hd .torliste a:hover{text-decoration:underline} .hd .torliste li{list-style:none!important;margin:0!important;padding:0!important} .hd .torliste .nr{display:inline-block;min-width:1.8rem;font-weight:700;color:var(--blau)} .hd .tor-raster{grid-template-columns:repeat(auto-fill,minmax(16rem,1fr))} .hd .torname{display:inline-block;white-space:nowrap;margin:0 1rem .3rem 0} .hd .torname .punkt{margin-right:.15rem} .hd .torname .punkt:last-of-type{margin-right:.35rem} @media(max-width:600px){.hd table.kanaltab th:nth-child(3),.hd table.kanaltab td:nth-child(3){display:none}.hd .torname{white-space:normal;display:block}.hd table.begriffe tr:first-child{display:none}.hd table.begriffe tr{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--linie);padding:.4rem 0}.hd table.begriffe td{border:0!important;padding:.2rem .3rem}.hd table.begriffe td:nth-child(1){font-weight:600}.hd table.begriffe td:nth-child(2){color:var(--leise)}.hd table.begriffe td:nth-child(3){grid-column:1/-1}} .hd .stilwahl{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 .5rem} .hd .stilwahl button{font:600 .85rem 'Open Sans',sans-serif;border:1.5px solid var(--linie);background:#fff;border-radius:99px;padding:.3rem .8rem;cursor:pointer;color:var(--text);height:auto;width:auto;margin:0} .hd .stilwahl button.an{border-color:var(--blau);color:var(--blau);background:var(--blau-hell)} .hd .frage{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;font-size:.88rem;color:var(--leise);margin-top:.3rem} .hd .frage .frage-text{flex-basis:100%} .hd .frage button{font:600 .82rem 'Open Sans',sans-serif;border:1px solid var(--linie);background:#fff;border-radius:99px;padding:.2rem .75rem;cursor:pointer;color:var(--text);margin:0;height:auto;width:auto} .hd .frage button.an{background:var(--blau);border-color:var(--blau);color:#fff} .hd table.liste{width:100%;border-collapse:collapse;font-size:.95rem} .hd table.liste th,.hd table.liste td{text-align:left;padding:.55rem .5rem;border-bottom:1px solid var(--linie);vertical-align:top} .hd table.liste th{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--blau)} .hd table.liste a{color:var(--blau);font-weight:600;text-decoration:none} .hd table.liste a:hover{text-decoration:underline} .hd .scroll{overflow-x:auto} .hd .naechster{background:var(--blau);color:#fff;border-radius:1.4rem;padding:1.5rem;display:grid;gap:.6rem} .hd .naechster h2{color:#fff;margin:0} .hd .naechster .marke{color:#d6ebf8} .hd .naechster a.weiss{display:inline-block;background:#fff;color:var(--blau);border-radius:10px;padding:10px 18px;font-weight:700;text-decoration:none;justify-self:start} .hd .naechster a.weiss:hover{background:var(--blau-hell)} .hd .kaufbox{border:2px solid var(--blau);border-radius:.9rem;background:#fff;padding:1rem 1.2rem;display:grid;gap:.5rem} .hd .kaufinfo{font-size:.88rem;color:var(--leise);margin:0} .hd .form{display:grid;gap:.8rem;max-width:30rem;width:100%} .hd .form label{display:grid;gap:.25rem;font-weight:600;color:var(--blau);font-size:.92rem} .hd .form input{height:42px!important;margin:0!important;border:1px solid var(--hellblau)!important;border-radius:.5rem!important;background:#fff!important;color:var(--text)!important;padding:0 .8rem!important;line-height:normal!important;font-size:1rem!important;width:100%!important} .hd .tag{font-size:.85rem;color:var(--leise)} .hd .linie{border-top:1px solid var(--linie);padding:.7rem 0} .hd .linie b{color:var(--blau)} .hd .pot{color:#1f7a3a;font-weight:700} .hd .sch{color:var(--rot);font-weight:700} .hd .zwei.breit{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr)} /* Ergaenzung Auftrag 1620 (Svens Rueckmeldung zum Kopfbereich der Startseite auf breiten Bildschirmen): der Chart-Kasten in .zwei.schmal nahm bislang mit minmax(0,1fr) die Hoehe und fast die halbe Breite des Kopfbereichs ein. Die zweite Spalte ist jetzt auf 300px begrenzt, die Chart-Grafik darin auf 260px und zentriert; die Textspalte bekommt den Rest. */ .hd .zwei.schmal{grid-template-columns:minmax(0,1fr) 300px} .hd .zwei.schmal figure.chartbox{max-width:300px} .hd .zwei.schmal figure.chartbox .bgbox{max-width:260px;margin:0 auto} .hd .zwei.schmal figure.chartbox figcaption{text-align:center} .hd figure.chartbox{margin:0} .hd figure.chartbox figcaption{margin-top:.5rem} @media(max-width:860px){.hd .zwei,.hd .zwei.breit{grid-template-columns:1fr}} /* Ergaenzung Auftrag 1617 (Svens Rueckmeldung zur mobilen Startseite, Bildschirmfoto bei 390px): .zwei.schmal (Kopfbereich start.html) blieb bei max-width:860px aussen vor, dadurch wurden Text und Chart-Kasten auf dem Handy zu zwei schmalen Spalten statt einspaltig. Chart-Kasten wird darunter schmal und zentriert gehalten, statt die volle, auf dem Handy zu breite Spalte einzunehmen. */ @media(max-width:760px){.hd .zwei,.hd .zwei.schmal{grid-template-columns:1fr}.hd .zwei.schmal figure.chartbox{max-width:320px;margin:0 auto}} /* Human Design KI: Aufbau und Optik wie der Erkenntnisraum (/ki), eigene Klassen unter .hd-ki */ .hd-ki{--farbe-akzent:#1d71b8;--farbe-akzent-dunkel:#155a91;--farbe-akzent-hell:#e3f2fb;--farbe-linie:#c3dcef;--farbe-text:#333;--farbe-text-leise:#56616d;--farbe-hellblau:#36a9e0;--farbe-flaeche:#fff; --schatten:0 .75rem 2.5rem rgba(36,48,42,.08);font:1rem/1.55 'Open Sans',system-ui,sans-serif;color:var(--farbe-text)} .hd-ki *{box-sizing:border-box} .hd-ki form{width:100%;padding:0;margin:0} .hd-ki .uebertitel{margin:0;color:var(--farbe-akzent);font-size:1.5rem;font-weight:700;line-height:1.12} .hd-ki .anrede{margin:.4rem 0 1rem;color:var(--farbe-text)} .hd-ki p{color:var(--farbe-text-leise)} .hd-ki h2{margin:0 0 1rem;font-size:1.25rem;color:var(--farbe-akzent)} .hd-ki .gespann{display:grid;grid-template-columns:18rem minmax(0,1fr);gap:1.5rem;align-items:start} .hd-ki .spalte{position:sticky;top:1.5rem;border:1px solid var(--farbe-linie);border-radius:1.4rem;background:#fff;box-shadow:var(--schatten);padding:1rem} .hd-ki .spalte h2{font-size:1rem;margin:0 0 .6rem} .hd-ki .spalte h2+*{margin-bottom:1rem} .hd-ki .themen{display:grid;gap:.375rem} .hd-ki .thema{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-height:2.75rem;padding:.5rem .75rem;font:700 .875rem 'Open Sans',sans-serif;text-align:left;border:1px solid var(--farbe-akzent);border-radius:.35rem;background:#fff;color:var(--farbe-akzent-dunkel);text-decoration:none;cursor:pointer;width:100%;margin:0} .hd-ki .thema:hover{background:var(--farbe-akzent-hell);text-decoration:none} .hd-ki .thema[aria-pressed="true"]{background:var(--farbe-akzent);color:#fff} .hd-ki .thema small{font-weight:400;font-size:.8rem;white-space:nowrap} .hd-ki .thema-erkenntnisraum{margin-top:1rem;border-color:var(--farbe-linie)} .hd-ki .gemerkt-karte{margin-top:1.5rem;border:1px solid var(--farbe-linie);border-radius:.9rem;padding:.8rem 1rem} .hd-ki .gemerkt-karte p{margin:.3rem 0 0;font-size:.875rem} .hd-ki .dialog{border:1px solid var(--farbe-linie);border-radius:1.4rem;background:#fff;box-shadow:var(--schatten);padding:1.5rem} .hd-ki .beispielfragen{margin:0 0 1rem;border:1px solid var(--farbe-linie);padding:.75rem 1rem} .hd-ki .beispielfragen summary{display:flex;justify-content:space-between;align-items:center;list-style:none;cursor:pointer;font-weight:700} .hd-ki .beispielfragen summary::-webkit-details-marker{display:none} .hd-ki .beispielfragen summary::after{content:"▾";color:var(--farbe-akzent)} .hd-ki .beispielfragen[open] summary::after{content:"▴"} .hd-ki .beispielfragen-liste{display:grid;gap:.375rem;margin:.75rem 0 .25rem} .hd-ki .beispielfrage{display:block;width:100%;min-height:2.75rem;border:1px solid transparent;border-radius:.5rem;padding:.6rem .9rem;background:var(--farbe-akzent-hell);color:var(--farbe-text);font:400 1rem 'Open Sans',sans-serif;text-align:left;cursor:pointer;margin:0;height:auto} .hd-ki .beispielfrage:hover{background:#fff;border-color:var(--farbe-akzent)} .hd-ki .nachrichten{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1.5rem} .hd-ki .nachricht{max-width:min(85%,42rem);margin:0;border-radius:.9rem;padding:.75rem 1rem;overflow-wrap:anywhere} .hd-ki .nachricht p{margin:0;color:inherit} .hd-ki .nachricht p+p{margin-top:1em} .hd-ki .antwort{align-self:flex-start;width:min(85%,42rem);background:var(--farbe-akzent-hell);color:var(--farbe-text)} .hd-ki .eigene{align-self:flex-end;background:var(--farbe-akzent);color:#fff} .hd-ki .bereichshinweis{align-self:flex-start;max-width:85%;padding:.75rem 1rem;border-left:3px solid var(--farbe-akzent);background:var(--farbe-akzent-hell);color:var(--farbe-text-leise)} .hd-ki .bereichshinweis p{margin:0 0 .75rem} .hd-ki .bereichshinweis b{color:var(--farbe-akzent-dunkel)} .hd-ki .abo-knopf{display:inline-flex;min-height:2.75rem;align-items:center;border:1px solid var(--farbe-akzent);border-radius:.9rem;padding:.75rem 1rem;background:var(--farbe-akzent);color:#fff;font-weight:650;text-decoration:none} .hd-ki .abo-knopf:hover{background:var(--farbe-akzent-dunkel);text-decoration:none;color:#fff} .hd-ki .ki-link{color:var(--farbe-akzent);text-decoration:none} .hd-ki .ki-link:hover{text-decoration:underline} .hd-ki .dialog-eingabebereich{display:flex;flex-direction:column;width:100%;background:#fff;border:1.5px solid var(--farbe-hellblau);border-radius:1.4rem;box-shadow:var(--schatten);padding:1rem} .hd-ki .dialog-eingabebereich textarea{display:block;width:100%;min-height:4.5rem;margin:0;border:0!important;padding:0;background:transparent;resize:none;font:1rem 'Open Sans',sans-serif;color:var(--farbe-text);outline:none} .hd-ki .absenden-knopf{align-self:flex-end;width:3rem;height:3rem;margin:.75rem 0 0;padding:0;border:0;border-radius:50%;background:var(--farbe-akzent-dunkel);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer} .hd-ki .absenden-knopf:hover{background:var(--farbe-akzent)} .hd-ki .absenden-knopf svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .hd-ki .chartklein{border:1px solid var(--farbe-linie);border-radius:.9rem;padding:.25rem;background:#fff} .hd-ki .chartklein img{display:block;width:100%} @media(max-width:38rem){.hd-ki .gespann{grid-template-columns:1fr}.hd-ki .gespann>*{min-width:0}.hd-ki .spalte{position:static;order:2}.hd-ki .dialog{order:1;padding:.75rem}.hd-ki .nachricht,.hd-ki .antwort{max-width:94%;width:94%}} /* Ergaenzung Auftrag 1608 (Anschluss an den Dienst): Status- und Fehlermeldungen, Formularelemente, die in Svens Vorlagen noch nicht vorkamen. */ .hd .meldung{border-radius:.6rem;padding:.6rem .9rem;font-size:.9rem;margin:.6rem 0} .hd .meldung.laden{background:var(--blau-hell);color:var(--leise)} .hd .meldung.fehler{background:#fdecea;color:#8a2a20;border-left:4px solid var(--rot)} .hd .meldung.hinweis{background:var(--blau-hell);color:var(--text);border-left:4px solid var(--hellblau)} .hd .meldung.erfolg{background:#e6f4ea;color:#1f7a3a;border-left:4px solid #1f7a3a} .hd .kaufbox label.zustimmung{display:flex;gap:.5rem;align-items:flex-start;font-size:.85rem;color:var(--leise);font-weight:400;cursor:pointer} .hd .kaufbox label.zustimmung input{margin-top:.2rem;width:auto!important;height:auto!important} .hd .kaufbox button[disabled]{opacity:.5;cursor:not-allowed} .hd .analyse-rahmen{border:1px solid var(--linie);border-radius:1rem;overflow:hidden;background:#fff;min-height:60vh} .hd .analyse-rahmen iframe{display:block;width:100%;height:85vh;border:0} .hd .knopf-zwei[disabled],.hd button.knopf-zwei:disabled{opacity:.5;cursor:not-allowed} .hd .konto-reihe{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;justify-content:space-between;border-bottom:1px solid var(--linie);padding:.6rem 0} .hd .danger{color:var(--rot);border-color:var(--rot)!important} /* Ergaenzung Auftrag 1616: Pflicht-Haekchen der Registrierung im Formular (gleiche Darstellung wie das Haekchen in der Kaufbox); ohne Haekchen bleibt der Absendeknopf inaktiv. */ .hd .form label.einwilligung{display:flex;gap:.5rem;align-items:flex-start;font-size:.85rem;color:var(--leise);font-weight:400;cursor:pointer} /* Ergaenzung Auftrag 1621 (Svens Meldung vom 15.10.2026): die allgemeine Eingabefeld-Regel .hd .form input (Hoehe 42px, Rahmen, Hintergrund, Padding, width 100%) gilt auch fuer das Haekchen und verformt es so, dass es auf iPad/Safari unsichtbar wird. Hier werden genau diese Eigenschaften fuer die Checkbox wieder zurueckgesetzt. */ .hd .form input[type=checkbox]{-webkit-appearance:auto!important;appearance:auto!important;width:20px!important;height:20px!important;min-width:20px!important;flex-shrink:0;margin:.1rem 0 0!important;padding:0!important;border:1px solid var(--blau)!important;border-radius:.25rem!important;background:#fff!important;line-height:normal!important;accent-color:var(--blau);cursor:pointer} /* Ergaenzung Auftrag 1623 (Svens Live-Probe vom 15.10.2026 gegen https://www.spiritwissen.de/human-design-berechnen): trotz der Regel aus 1621 blieb das Kaestchen 20x20px gross, aber is_visible() lieferte False; das Site-CSS versteckt native Checkboxen offenbar per visibility hidden oder clip. Diese Regeln setzen Sichtbarkeit, Clip/Clip-Path, Transform und Ueberlauf fuer die Checkbox zurueck und entfernen die Pseudo-Elemente und das Einruecken, die das Site-CSS sonst fuer label.einwilligung erzeugt. */ .hd label.einwilligung input[type=checkbox], .hd input[type=checkbox] { visibility: visible !important; clip: auto !important; clip-path: none !important; transform: none !important; pointer-events: auto !important; left: auto !important; top: auto !important; overflow: visible !important; z-index: 1; } .hd label.einwilligung::before, .hd label.einwilligung::after { content: none !important; display: none !important; } .hd label.einwilligung { padding-left: 0 !important; text-indent: 0 !important; } .hd .form button[disabled]{opacity:.5;cursor:not-allowed} .hd .nur-visuell{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* Ergaenzung Auftrag 1625 (Svens Vorgabe vom 15.10.2026, 14:47): die Warte-Animation ist jetzt einheitlich mit dem Erkenntnisraum (warten.gif), keine eigene Loesung mehr; die Antwortblase erscheint sofort mit diesem Bild, wird bei Erfolg durch den Text ersetzt und bei Fehlern entfernt. */ .hd-ki .swki-waiting-gif{display:block;max-width:120px;height:auto;margin:.2rem 0} /* Ergaenzung Auftrag 1627: Fachseiten aus Svens alten AZ-Autorentexten. */ .hd .inhalt{max-width:68ch} .hd .inhalt img{max-width:100%;height:auto} .hd .inhalt figure{margin:0 1.5rem 1rem 0} .hd .inhalt figcaption{font-size:.85rem;color:var(--leise)} .hd .inhalt h2{margin-top:1.6rem} .hd .video-eingebettet{position:relative;max-width:560px;margin:.6rem 0} .hd .video-eingebettet iframe{display:block;width:100%;aspect-ratio:16/9;height:auto;border:0} .hd .weiss-text{color:#fff;text-decoration:underline} /* Ergaenzung Auftrag 1633 (Svens Rueckmeldung vom 15.10.2026, 23:04 zu Auftrag 1631): die Tore- und Kanal-Charts sind jetzt das vollstaendige Chart ohne Aktivierungen, 1:1 aus bodygraph-basis.svg uebernommen (gleiche -Skalierung, gleiche Zentren, Kanalbahnen und Tornummern-Elemente g1..g64/t1..t64 wie auf den Torseiten). Die 64 Tornummern (bzw. 36 Kanal-Linien) sitzen in derselben , die Koordinaten stammen unveraendert aus dieser Basis. Der Trefferkreis-Radius (7.2 lokale Einheiten je Tor, Halbbreite 4.5 je Kanal) ist bewusst kleiner als der kleinste Abstand zwischen zwei Zentren bzw. zwischen einem Kanal-Mittelpunkt und einer fremden Kanal-Trefferlinie (rechnerisch 16.0 bzw. 6.7 lokale Einheiten; die Trefferlinie von Kanal 26-44 ist dafuer auf ihre gatenahe Haelfte gekuerzt, weil ihr geometrischer Mittelpunkt sonst nur 2.3 Einheiten von der Trefferlinie des Kanals 2-14 entfernt läge), damit sich keine zwei Trefferflaechen ueberschneiden - unabhaengig von der Anzeigegroesse. Auf PC/Tablet fuellt das Chart seine Spalte (gleiche Breite wie auf den Torseiten, dort ebenfalls volle Spaltenbreite im .zwei-Raster). Auf dem Handy (<=480px) liegt es dafuer in einem 700px breiten, waagerecht scrollbaren Kasten (hoechstens etwa doppelte Bildschirmbreite, Vorgabe Sven 15.10.2026, 23:04), damit daraus mindestens 20x20px (Tore) bzw. 12px Linienbreite (Kanaele) werden; die Seite selbst scrollt dabei nicht waagerecht. */ .hd .zwei>div{min-width:0} .hd .chart-hinweis{font-weight:600;margin:0 0 .6rem} .hd .chart-kasten{background:#fff;border:1px solid var(--linie);border-radius:1rem;padding:.5rem;min-width:0;width:100%} .hd .chart-scroll{overflow-x:auto;min-width:0;width:100%} .hd .hd-chart{display:block;height:auto;width:100%} @media(max-width:480px){ .hd .hd-chart-tore,.hd .hd-chart-kanaele{width:700px;max-width:700px} } .hd .tor-treffer{fill:transparent;stroke:none;pointer-events:all} .hd .tor-link{cursor:pointer} .hd .tor-link:hover text[fill="#1F2933"],.hd .tor-link:focus text[fill="#1F2933"]{fill:#1d71b8!important;font-weight:700} .hd .tor-link:hover text[fill="#FFFFFF"],.hd .tor-link:focus text[fill="#FFFFFF"]{font-weight:700} .hd .tor-link:focus{outline:none} .hd .kanal-treffer{stroke:transparent;fill:none;pointer-events:all} .hd .kanal-hover{stroke:transparent;fill:none;pointer-events:none;stroke-linecap:round} .hd .kanal-link{cursor:pointer} .hd .kanal-link:hover .kanal-hover,.hd .kanal-link:focus .kanal-hover{stroke:#13436b} .hd .kanal-link:focus{outline:none} /* Ergaenzung Auftrag 1634 (Svens Rueckmeldung vom 15.10.2026, 23:08 zum Bildschirmfoto von /human-design/ernaehrung): die Fachtexte aus 1627 kamen als ein einziger Fliesstext an, weil im Generator jeder Absatzwechsel der Quelle (einfacher/doppelter Zeilenumbruch) beim Rendern von HTML verschluckt wurde - echte

/