/* ═══════════════════════════════════════════════════════════════════════════ TECHNIKSCHICHT — NormHow · CSS ═══════════════════════════════════════════════════════════════════════════ Diese Datei enthaelt KEIN Design. Sie enthaelt die technischen Randbedingungen, unter denen das Design auf allen Geraeten haelt: Sprungmarken, Ueberlauf, Mindestgroessen, Bedienflaechen. Ihr Gegenstueck ist technik.js — dort steht das Verhalten beim Klick auf einen #-Link. Beide gehoeren zusammen und teilen sich den Wert --technik-scroll-offset (siehe Abschnitt 1). ARBEITSTEILUNG Torsten → Design und Inhalt: styles.css, normhow.css, .css, site.js, .js, alle .html Matthias → Technik: diese Datei und technik.js REGEL BEI PAKETUEBERNAHME Torstens Dateien werden vollstaendig uebernommen. Diese Datei bleibt unveraendert und wird als LETZTES Stylesheet eingebunden — dadurch gewinnt sie im Zweifel, ohne dass irgendwo !important noetig ist. Nichts aus dieser Datei gehoert in Torstens Dateien kopiert. EINBINDUNG (in jeder Seite, nach allen anderen Stylesheets) Stand: 4. August 2026 (Abschnitt 6 aus Runde 1) ═══════════════════════════════════════════════════════════════════════════ */ /* ── 1. Sprungmarken ──────────────────────────────────────────────────────── Kopfzeile (83px) und Unternavigation (50px) kleben oben und verdecken zusammen 133px. Ohne scroll-padding landet ein Ankersprung dahinter. Handy und Desktop brauchen verschiedene Werte, weil die Sektionen dort unterschiedlich viel Innenabstand mitbringen. Gemessen ueber 82 Sprungziele: nichts verdeckt, Abstand 32–43px. Der Wert steht als Variable, weil technik.js ihn mitliest: Ein Klick auf einen #-Link wird dort gerechnet, ein Direktaufruf mit #-Anhang vom Browser. Beide muessen an derselben Stelle landen — deshalb EINE Quelle. Wer den Abstand aendert, aendert ihn hier. */ html { --technik-scroll-offset: 78px; scroll-padding-top: var(--technik-scroll-offset); } @media (min-width: 761px) { html { --technik-scroll-offset: 50px; } } /* Die erste Sektion einer Seite hat weniger Innenabstand als die folgenden und landete dadurch enger. Strukturell geloest, nicht ueber die Kennung — "#einstieg" bezeichnet auf der Startseite den Hero, auf pakete.html einen normalen Abschnitt. */ main > section:first-of-type[id] { scroll-margin-top: 28px; } /* Fruehere Einzelbehelfe neutralisieren: Sie stammen aus der Zeit ohne scroll-padding und addieren sich sonst zu einem viel zu grossen Sprung. */ .faq-group { scroll-margin-top: 0; } /* ── 2. Ueberlaufschutz ───────────────────────────────────────────────────── Rasterspalten haben per Default min-width:auto. Lange deutsche Komposita ("Organisationsentwicklung", "Massnahmezulassung") drueckten die Spalte dadurch ueber den Containerrand — die Seite liess sich seitlich schieben. Der Fehler zeigt sich erst unter ~414px und nur beim Durchscrollen. */ .hero-grid > *, .about-hero-grid > *, .inquiry-grid > *, .qualification-grid > *, .career-layout > *, .faq-layout > *, .check-layout > * { min-width: 0; } .compass-tabs button { grid-template-columns: 46px minmax(0, 1fr); } .compass-tabs button > * { min-width: 0; } @media (max-width: 1060px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { .compass, .check-grid, .evidence-grid, .pain-grid, .process-grid, .source-card, .source-links { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 720px) { .service-grid { grid-template-columns: minmax(0, 1fr); } .service-card > * { min-width: 0; } } @media (max-width: 680px) { .worlds-grid { grid-template-columns: minmax(0, 1fr); } .world-card > * { min-width: 0; } } @media (max-width: 760px) { .case-picker, .focus-tabs, .audience-label, .demo-meta { flex-wrap: wrap; } .team-demo > *, .workshop-board > *, .audience-block > * { min-width: 0; } .network-stage { display: grid; gap: 12px; min-height: auto; } /* relative statt static: nimmt die Karte genauso aus der absoluten Anordnung heraus, bleibt aber Bezugspunkt fuer ihre eigene Verbindungslinie. Siehe Abschnitt 7.3. */ .network-company { position: relative; width: 100%; transform: none; } .network-center { position: static; width: 100%; height: auto; margin: 2px 0; padding: 16px; border-radius: 15px; transform: none; } .network-center strong { max-width: none; } .network-lines { display: none; } } /* ── 3. Ueberschriften ohne Silbentrennung ────────────────────────────────── Vorgabe Torsten: in Ueberschriften wird nicht getrennt. Passt ein Wort nicht, rueckt es als Ganzes in die naechste Zeile. Damit das aufgeht, muss das laengste Wort in seinen Container passen — sonst gibt es keine naechste Zeile, in die es rutschen koennte. Deshalb sinken die Groessen auf schmalen Geraeten weiter ab, statt zu trennen. overflow-wrap bleibt als unsichtbares Auffangnetz: Es greift nur, wenn ein Wort trotzdem zu breit waere. Gemessen ueber 179 Ueberschriften bei 320px: greift derzeit nirgends. */ h1, h2, h3, h4, h5, h6 { hyphens: none; -webkit-hyphens: none; overflow-wrap: break-word; text-wrap: balance; } .compass-tabs strong, .compass-tabs small, .audience-label { overflow-wrap: break-word; } @media (max-width: 760px) { h1 { font-size: clamp(1.9rem, 8.4vw, 2.7rem); letter-spacing: -.045em; } h2 { font-size: clamp(1.55rem, 6.6vw, 2.1rem); letter-spacing: -.035em; } h3 { font-size: clamp(1.05rem, 4.4vw, 1.35rem); } /* Seiten-CSS laedt vor dieser Datei; hier genuegt daher die normale Spezifitaet, ein body-Praefix oder !important ist nicht noetig. */ .hero-copy h1 { font-size: clamp(1.85rem, 8.2vw, 2.5rem); letter-spacing: -.04em; } .compass-result h3 { font-size: clamp(1.15rem, 5.2vw, 1.55rem); } .service-card h3, .world-card h3, .company-card h3, .authority-card h3, .package-card h3, .source-card h3 { font-size: clamp(1rem, 4.6vw, 1.28rem); line-height: 1.2; } /* Innenabstaende zuruecknehmen — schafft Platz fuer die Wortlaenge */ .compass-result, .service-card, .world-card, .company-card, .authority-card, .package-card { padding-inline: 20px; } } @media (max-width: 400px) { h1 { font-size: clamp(1.7rem, 8vw, 2.1rem); } h2 { font-size: clamp(1.4rem, 6.2vw, 1.75rem); } h3 { font-size: clamp(1rem, 4.1vw, 1.2rem); } } /* ── 4. Mindestschriftgroesse ─────────────────────────────────────────────── Untergrenze 11px. verkleinert per Browser-Default zusaetzlich um rund ein Fuenftel — auch in einem bereits kleinen Kasten. Eine Regel am umgebenden Element greift deshalb nicht, max() setzt einen harten Boden. */ small { font-size: max(11px, .8em); } /* ── 5. Bedienflaechen ────────────────────────────────────────────────────── Fusszeilen-Links waren 16px hoch. Mit dem Finger trifft man das nicht. */ .site-footer nav a, .site-footer ul a, .footer-bottom a, .footer-contact a { display: inline-block; padding-block: 12px; /* inline-block schrumpft auf Wortbreite und bricht lange Woerter sonst NICHT um — ohne diese zwei Zeilen sprengt "Organisationsentwicklung" die Fusszeilenspalte. */ max-width: 100%; overflow-wrap: break-word; } /* Altes Gestaltungssystem (404.html, leistungen/qm-systeme.html) */ .nk-footer__col li a, .nk-footer__partner a, .nk-footer__legal a, .nk-footer__about a { display: inline-block; padding-block: 12px; max-width: 100%; overflow-wrap: break-word; } .nk-footer__col { min-width: 0; } .nk-footer__col h4, .nk-footer__col a, .nk-footer__col li { overflow-wrap: break-word; } .nk-h1, .nk-h2, .nk-h3 { hyphens: none; -webkit-hyphens: none; overflow-wrap: break-word; } /* Fusszeilen-Raster: 1fr laesst lange Woerter die Spalte aufschieben */ .nk-footer__inner { grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); } @media (max-width: 980px) { .nk-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Dekorative Kreise sind absolut positioniert und ragen ueber den Rand hinaus. Sie sind reine Zier — abschneiden statt die Seite verbreitern. */ .qm-system, .nk-subhero { overflow: hidden; } .qm-eyebrow { flex-wrap: wrap; } /* Neuer Angebotsblock (Torsten, 03.08.): mobil auf 1fr gesetzt — dadurch greift wieder min-width:auto. Gleiche Ursache wie oben, gleiche Loesung. */ @media (max-width: 960px) { .offer-alignment__intro, .offer-alignment__grid { grid-template-columns: minmax(0, 1fr); } .offer-alignment__intro > *, .offer-alignment__grid > * { min-width: 0; } } @media (max-width: 760px) { .offer-alignment__intro h2 { font-size: clamp(1.55rem, 6.6vw, 2.1rem); letter-spacing: -.035em; } .qm-section { padding-inline: 20px; } } /* ── 6. Nachtraege aus Runde 1 (03.08.2026) ───────────────────────────────── Vier Punkte, die beim Einbau von Torstens Offline-Runde 1 auffielen. */ /* 6.1 Sanftes Scrollen bleibt aus. Torsten hat die lange Scroll-Animation bewusst abgeschafft (Runde 1, N-01). styles.css setzt deshalb scroll-behavior:auto — normhow.css Zeile 62 setzt aber weiterhin "smooth" und wird auf leistungen/qm-systeme.html NACH styles.css geladen. Dort lief die Animation daher weiter, und technik.js sprang mitten hinein. Hier durchgesetzt, weil diese Datei zuletzt kommt. Entfaellt, sobald qm-systeme.html ohne normhow.css auskommt. */ html { scroll-behavior: auto; } /* 6.2 Download-Liste der QM-Seite: zwei Ebenen mit demselben 1fr-Fehler. Innen liess die Textspalte sich nicht schrumpfen, aussen bekam der ganze Block seine Mindestbreite statt der verfuegbaren. Bei 320px 12px Ueberstand. Die aeusseren Raster stehen auch in der 960px-Regel auf 1fr — deshalb hier ohne Media Query, sie gilt fuer alle Breiten. */ .qm-hero__inner, .qm-check__inner, .qm-resources__inner, .qm-method__inner, .qm-compare__stage { grid-template-columns: minmax(0, 1fr); } @media (min-width: 961px) { .qm-resources__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .qm-hero__inner { grid-template-columns: 1.05fr .95fr; } } .qm-resources__inner > *, .qm-hero__inner > *, .qm-check__inner > * { min-width: 0; } .qm-downloads > a { grid-template-columns: 42px minmax(0, 1fr) auto; } .qm-downloads > a > * { min-width: 0; } .qm-downloads strong, .qm-downloads small { overflow-wrap: break-word; } /* 6.3 Die riesige Jahreszahl im Normhinweis ist Zierrat, sitzt absolut und ragt bewusst hinaus. Abschneiden statt die Seite verbreitern. */ .qm-revision { overflow: hidden; } /* 6.4 Partnerkarten: Der Verweis auf die Partner-Website war 18px hoch. Die Regel aus Abschnitt 5 greift nur in der Seitenfusszeile, nicht in den Kartenfuessen. */ .company-card footer a, .company-grid article footer a { display: inline-block; padding-block: 12px; max-width: 100%; overflow-wrap: break-word; } /* ── 7. Nachtraege aus Runde 6.8 (07.08.2026) ─────────────────────────────── ------------------------------------------------------------------------ */ /* 7.1 „Normgrundlagen" steht in der Ueberschrift des QM-Downloadbereichs mit white-space:nowrap, damit das Wort nicht getrennt wird — eine bewusste Gestaltungsentscheidung aus Runde 6.8, die wir erhalten. Bei 320px passt das Wort aber nicht mehr in die Zeile: 296px Wortbreite gegen 240px Inhaltsbreite, die Seite wurde dadurch um 12px breiter als der Bildschirm. Umbrechen hilft nicht — es ist ein einziges Wort. Also wird die Ueberschrift auf sehr schmalen Geraeten kleiner, statt die Seite zu sprengen. Ab 361px greift die Regel nicht mehr, dort passt das Wort ohnehin. */ @media (max-width: 360px) { .qm-downloads h2 { font-size: clamp(1.55rem, 7.8vw, 2.2rem); } } /* 7.2 Die Abschnittsleiste ist auf seitliches Wischen ausgelegt: der Behaelter traegt overflow-x:auto und flex-wrap:nowrap. Die Eintraege duerfen aber schrumpfen (flex-shrink steht auf dem Standardwert 1), und weil jeder Eintrag zusaetzlich overflow:hidden hat — noetig fuer den goldenen Unterstrich —, wird stattdessen die Beschriftung abgeschnitten. Gemessen auf pakete.html bei 412px: „03 Aufbau & Weiterentwicklung" braucht 211px und bekommt 91px. Sichtbar blieb „03 Aufbau &". Der Ueberlauf tritt nie ein, deshalb laesst sich die Leiste auch nicht wischen. Schrumpfen unterbinden. Dann greift der Ueberlauf wie vorgesehen und die Leiste wird seitlich verschiebbar, mit vollstaendigen Beschriftungen. */ .page-nav-links > a { flex-shrink: 0; } /* 7.3 Partnerseite: „Zusammenarbeit anzeigen" blieb auf dem Telefon wirkungslos. Nebeneinander stehen die drei Unternehmen um einen Mittelpunkt herum, und drei schraege Linien (.network-lines) laufen auf ihn zu. Abschnitt 2 flacht diese Anordnung unter 761px zu einer Spalte ab, weil die absolut gesetzten Karten sonst seitlich hinausragen — dabei werden die schraegen Linien abgeschaltet. Sie ergeben in einer Spalte auch keinen Sinn mehr. Uebrig blieb: beim Druck auf die Schaltflaeche aenderten sich nur die Rahmenfarben. Die Aussage der Grafik — diese Unternehmen arbeiten zusammen — war auf dem Telefon nicht mehr zu sehen. Die Loesung steckte schon im Stylesheet: Jede Karte hat eine .network-company :after-Linie samt Farbe und Bewegung, in der Handy-Ansicht aber auf display:none. Wir schalten sie ein und machen aus dem Ring eine Kette: 01 NormHow ─┐ 02 Business-Struktur ─┐ 03 m-layer ─┐ Projektbedarf Gleiche Farben wie nebeneinander (Gold, Tuerkis, Weiss), gleiche Bewegung, nur senkrecht. Der Abstand zwischen den Karten wird von 12px auf 34px vergroessert, damit die Linie Platz hat. Grenze bewusst 680px und nicht 760px wie in Abschnitt 2: Zwischen 681 und 760px stehen die drei Karten noch nebeneinander (styles.css schaltet erst unter 681px auf eine Spalte). Dort gilt weiter die urspruengliche Linienfuehrung. */ @media (max-width: 680px) { .network-stage { gap: 34px; } .network-company:after { display: block; bottom: -30px; height: 26px; } } /* ── 8. Nachtraege aus dem Bildpaket mit KI-Kennzeichnung (14.08.2026) ─────── 8.1 Das Portraet wurde unten beschnitten — samt Kennzeichnung. Torstens neues Bildpaket traegt den Hinweis "AI modified" unten rechts im Motiv. Gemessen an der ausgelieferten Seite kam er nirgends an: ueber-normhow.html Rahmen 4/5 =0.800 Bild 1003/1568 =0.640 -> 80 % der Bildhoehe sichtbar, Rest oben und unten weg kontakt.html Rahmen 451/500=0.902 dazu object-position: center 26% -> 71 % sichtbar, der Beschnitt lag fast ganz unten object-fit: cover fuellt den Rahmen und schneidet den Ueberstand ab. Bei einem hohen Bild in einem flacheren Rahmen faellt das weg, was oben und unten steht. Die Kennzeichnung sitzt in den untersten Prozent — sie war als erstes weg. Zwei Aenderungen, beide ohne Eingriff in die Gestaltung: - Rahmenverhaeltnis von 4/5 auf 5/7 (0.714). Damit bleiben rund 90 % des Motivs stehen statt 80 beziehungsweise 71. - object-position auf "center bottom": der verbleibende Beschnitt faellt vollstaendig nach oben. Dort steht leere Wand ueber dem Logo, unten steht die Kennzeichnung. Das Logo bleibt vollstaendig im Bild. transform-origin gehoert dazu: Beide Seiten vergroessern das Bild beim Ueberfahren um zwei Prozent. Vom Mittelpunkt aus wandert die Kennzeichnung dabei aus dem Rahmen. Vom unteren Rand aus bleibt sie stehen. */ .portrait-card img, .contact-portrait img { aspect-ratio: 5 / 7; height: auto; object-position: center bottom; transform-origin: center bottom; } /* .portrait-media gibt auf der Kontaktseite eine feste Hoehe von 500px vor. Die wuerde das Seitenverhaeltnis oben wieder aushebeln. */ .contact-portrait .portrait-media, .portrait-media { height: auto; } /* ── 9. Kontaktknopf im Menue erreichbar halten ─────────────────────────────── Gemessen am 17.08.2026 auf normhow.de. Das aufgeklappte Menue ist auf dem Handy hoeher als der Bildschirm, sobald "Leistungen" geoeffnet wird: 390 x 664 (Hochformat mit Adressleiste) Knopf bei y = 721, Rand bei 664 320 x 568 Knopf bei y = 721 844 x 390 (Querformat) Knopf bei y = 702, schon ohne geoeffnete Klappe unerreichbar Der Bereich laesst sich zwar scrollen, nur sieht man das nicht: Unten steht ein halb abgeschnittenes "FAQ", kein Hinweis, dass darunter noch etwas kommt. Der wichtigste Knopf der Seite ist damit unsichtbar, und wer trotzdem tippt, trifft irgendeinen Eintrag darueber. Loesung ohne Eingriff in die Gestaltung: Der Knopf klebt am unteren Rand des Menuebereichs. Ist Platz da, sitzt er wie bisher am Ende der Liste (margin-top: auto). Ist zu wenig Platz, bleibt er stehen und die Liste scrollt dahinter durch. Der doppelte Schatten ist kein Schmuck: Er malt einen Streifen in der Farbe des Menuegrunds um den Knopf herum. Ohne ihn scheinen die durchlaufenden Eintraege an den abgerundeten Ecken vorbei — und vor allem UNTER dem Knopf hindurch: Ein Bereich mit overflow scrollt seinen Inhalt auch ueber den unteren Innenabstand hinweg. Der Streifen muss deshalb mindestens so breit sein wie dieser Abstand, sonst blitzt der naechste Eintrag darunter auf. */ @media (max-width: 900px) { .navlinks.open > a.contact-button { position: sticky; bottom: 0; margin-top: auto; box-shadow: 0 0 0 26px #151719, 0 -22px 26px 26px #151719; } /* Ohne diesen Abstand klebt der Knopf bei kurzem Menue direkt am Bildschirmrand, statt den Innenabstand des Bereichs zu wahren. */ .navlinks.open { padding-bottom: 22px; } } /* ── 10. Kontaktknopf auf der Kontaktseite selbst lesbar halten ─────────────── styles.css faerbt den Eintrag der aktuellen Seite golden: .navlinks > a[aria-current=page] { color: var(--gold) } Auf kontakt.html traegt diesen Vermerk der Kontaktknopf — und der hat einen goldenen Grund. Ergebnis: goldene Schrift auf goldenem Grund, der Knopf ist leer. Gemessen am 17.08.2026 auf normhow.de, Schriftfarbe und Hintergrund beide rgb(198,154,66). Die Regel in styles.css bleibt unangetastet, sie ist fuer die uebrigen Eintraege richtig. Hier wird nur der eine Fall zurueckgeholt. */ .navlinks > a.contact-button[aria-current="page"] { color: #1a1405; }