/* ============================================================================ DIE SCHRIFT — NOTO SANS, VOM EIGENEN SERVER ============================================================================ WARUM STEHT DAS HIER UND NICHT BEI GOOGLE? Früher wurde die Schrift direkt von Google Fonts geladen. Dabei schickt der Browser jedes Besuchers eine Anfrage an einen Google-Server — und überträgt damit unter anderem seine IP-Adresse in die USA. Das ist datenschutzrechtlich heikel und muss in der Datenschutzerklärung offengelegt werden. Jetzt liegen die Schriftdateien in assets/fonts/ und werden vom eigenen Server ausgeliefert. Es geht KEINE Anfrage mehr an Google, es werden KEINE Daten an Dritte übertragen. Die Seite lädt dadurch sogar etwas schneller, weil keine Verbindung zu einem fremden Server nötig ist. WAS IST EINE „VARIABLE FONT“? Es sind nur zwei Dateien für ALLE Schriftschnitte (300 bis 700). Eine variable Schrift enthält alle Stärken in einer Datei — deshalb genügt je Zeichensatz eine einzige Datei statt fünf einzelnen. DIE ZWEI DATEIEN noto-sans-latin.woff2 Grundzeichen (a–z, Ziffern, Umlaute) noto-sans-latin-ext.woff2 seltenere Zeichen mittel-/osteuropäischer Sprachen. Wird nur geladen, wenn ein solches Zeichen auf der Seite vorkommt — dafür sorgt `unicode-range` unten. LIZENZ Noto Sans steht unter der SIL Open Font License 1.1. Sie erlaubt das Mitliefern auf dem eigenen Server ausdrücklich. Der vollständige Lizenztext liegt daneben in assets/fonts/OFL.txt und MUSS dort bleiben — die Lizenz verlangt, dass er mitgeliefert wird. ANDERE SCHRIFT GEWÜNSCHT? Neue woff2-Dateien nach assets/fonts/ legen, unten die Dateinamen und den Namen hinter `font-family` anpassen — und ebenso in der body-Regel weiter unten. Nichts in den HTML-Dateien ist dafür zu ändern. ============================================================================ */ @font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 300 700; /* eine Datei deckt diesen Bereich ab */ font-display: swap; /* Text sofort sichtbar, Schrift tauscht nach */ src: url('fonts/noto-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('fonts/noto-sans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ============================================================================ TECOMON — WEBSITE · styles.css ============================================================================ WAS IST DIESE DATEI? Hier steht das AUSSEHEN der Seite: Farben, Schriftgrößen, Abstände, Bewegungen. Kein Text und keine Inhalte — die stehen in index.html und in assets/site.js. Grundlage ist der „Tecomon CI-Katalog“, Ausgabe 01 · 2026. Wo ein Wert aus dem Katalog kommt, steht die Seitenzahl daneben. Diese Werte sind verbindlich und sollten nicht ohne Rücksprache geändert werden. WIE LIEST MAN EINE REGEL? Eine Regel hat immer diese Form: .row__title { ← WER: das Element, um das es geht font-size: 24px; ← WAS: eine Eigenschaft und ihr Wert color: var(--text-hi); ← weitere Eigenschaften, je Zeile eine } ← Ende der Regel Vor dem Namen steht ein Punkt, wenn es eine Klasse ist (.row__title gehört zu class="row__title" in index.html). Man findet also jede Regel, indem man den Klassennamen aus der HTML-Datei hier sucht. DER WICHTIGSTE BEREICH: :root GANZ UNTEN AUF DIESER SEITE Direkt hinter diesem Kommentar folgt der Block `:root`. Darin stehen die zentralen Werte der Seite — Farben, Maximalbreite, Abstände. Sie werden überall wiederverwendet. Ändert man dort einen Wert, ändert sich die ganze Seite mit. Das ist der beste Ort für Anpassungen. Die Schreibweise dafür: --gelb: #FAFF80; ← einmal festlegen (nur in :root) color: var(--gelb); ← überall benutzen (var = „nimm den Wert von“) SO SIND DIE NAMEN AUFGEBAUT Zwei Unterstriche trennen das Ganze von seinem Teil: .unit der Block einer Einheit selbst .unit__name der Name INNERHALB des Blocks .unit__story die Geschichte INNERHALB des Blocks Zwei Bindestriche kennzeichnen eine Abwandlung: .band ein normaler Abschnitt .band--hero derselbe Abschnitt, aber als Auftakt (mehr Abstand oben) .statement--sm dieselbe Aussage, aber kleiner In index.html stehen dann beide Klassen zusammen: class="band band--hero". HÄUFIG GEBRAUCHTE EIGENSCHAFTEN — kurz erklärt color Schriftfarbe background Hintergrundfarbe oder -verlauf font-size Schriftgröße font-weight Strichstärke: 300 leicht · 400 normal · 600 halbfett letter-spacing Laufweite, der Abstand zwischen den Buchstaben line-height Zeilenabstand (1.6 = das 1,6-fache der Schriftgröße) margin Abstand AUSSERHALB eines Elements padding Abstand INNERHALB, zwischen Rand und Inhalt border Linie am Rand opacity Deckkraft: 1 = voll sichtbar, 0 = unsichtbar transition wie schnell sich eine Änderung vollzieht ZWEI SCHREIBWEISEN, DIE ÖFTER VORKOMMEN clamp(22px, 5.4vw, 72px) „mindestens 22, am liebsten 5,4 % der Fensterbreite, höchstens 72“. So wächst ein Wert mit dem Fenster mit, ohne aus dem Ruder zu laufen. Das ist der Grund, weshalb die Seite auf Handy und Bildschirm gleich gut aussieht. rgba(244, 247, 253, .70) Eine Farbe mit Deckkraft: Rot, Grün, Blau und zuletzt die Deckkraft (.70 = 70 %). Alle Grautöne dieser Seite entstehen so — als Lichtweiß mit reduzierter Deckkraft, nie als eigenes Grau (CI). ETWAS AUSSCHALTEN, OHNE ES ZU LÖSCHEN Alles zwischen /* und *_/ (ohne Unterstrich) ist Kommentar und wirkt nicht. So lässt sich eine Zeile oder eine ganze Regel stilllegen und später wieder aktivieren. ÄNDERUNGEN SEHEN Datei speichern und die Seite im Browser neu laden (Strg+R bzw. Cmd+R). Bleibt sie unverändert: mit Shift neu laden. REIHENFOLGE ZÄHLT Stehen zwei Regeln für dasselbe Element, gewinnt die SPÄTERE. Deshalb stehen die Regeln für schmale Bildschirme am Ende der Datei — sie sollen die allgemeinen Regeln überschreiben. ============================================================================ */ /* ============================================================================ ZENTRALE WERTE — der wichtigste Block dieser Datei `:root` heißt: gilt für die ganze Seite. Die Werte hier werden überall sonst mit var(--name) aufgerufen. Wer die Seite anpassen will, fängt hier an — eine Änderung wirkt sofort an allen Stellen zugleich. ============================================================================ */ :root { /* ——— DIE FÜNF CI-FARBEN — verbindlich, CI-Katalog Seite 04 ——— Diese fünf Werte tragen das gesamte Erscheinungsbild. ACHTUNG: Die drei Einheitsfarben stehen zusätzlich in assets/site.js (als GELB, SANDROT, BLAU). Wird eine geändert, muss sie an BEIDEN Stellen geändert werden, sonst passen Punkte und Linien nicht mehr zu den Texten. */ --mitternachtsblau: #040914; /* Grundfläche der ganzen Seite */ --nachtblau: #0B1329; /* zweite dunkle Ebene, für Hover-Flächen */ --lichtweiss: #F4F7FD; /* Schrift auf dunklem Grund */ --gelb: #FAFF80; /* Signalgelb · Forge */ --sandrot: #E8785A; /* Sandrot · Orbit */ --blau: #007FFF; /* Systemblau · Connects */ /* ——— DIE GRAUSTUFEN ——— Die CI führt keine eigenen Grautöne. Jedes „Grau“ ist Lichtweiß mit reduzierter Deckkraft auf dem dunklen Grund. Von hell nach blass: --text-hi volle Helligkeit — Überschriften, wichtige Zahlen --text normaler Fließtext --text-lo Nebentexte, Erklärungen --text-mute kleine Labels, Randangaben --hairline / --hairline-soft die feinen Trennlinien Ist ein Text zu blass? Dann nicht die Farbe irgendwo einzeln ändern, sondern hier den passenden Wert leicht anheben (z. B. .70 → .78) — dann bleibt die Seite in sich einheitlich. */ --text-hi: #F4F7FD; --text: rgba(244, 247, 253, .70); --text-lo: rgba(244, 247, 253, .56); --text-mute: rgba(244, 247, 253, .45); --hairline: rgba(244, 247, 253, .15); --hairline-soft: rgba(244, 247, 253, .09); /* ——— DAS RASTER — CI-Katalog: Maximalbreite 1240 px, Innenabstand 72 px ——— --max Wie breit der Inhalt höchstens wird. Auf großen Bildschirmen bleibt er zentriert stehen und läuft nicht auseinander. --pad Der Abstand zu den Seitenrändern. Wächst mit dem Fenster: am Handy 22 px, am großen Bildschirm bis 72 px. --gap Der Abstand zwischen zwei Spalten. --band Der senkrechte Abstand zwischen den Abschnitten. Dieser eine Wert bestimmt maßgeblich, wie ruhig die Seite wirkt — kleiner heißt gedrängter, größer heißt luftiger. */ --max: 1240px; --pad: clamp(22px, 5.4vw, 72px); --gap: clamp(32px, 5.2vw, 80px); --band: clamp(84px, 12vh, 135px); /* --pad-head gilt NUR für die Kopfzeile. Sie läuft über die ganze Fensterbreite, deshalb hat sie ihren eigenen, kleineren Randabstand: Logo und Navigation stehen dadurch weit außen an den Fensterrändern und nicht im 1240-px-Raster des übrigen Inhalts. Kleinerer Wert = weiter nach außen. */ --pad-head: clamp(20px, 2.6vw, 46px); /* Die Bewegungskurve aller Übergänge: startet zügig, läuft weich aus. Sie wird überall wiederverwendet, damit sich alle Bewegungen auf der Seite gleich anfühlen. */ --ease: cubic-bezier(.22, .61, .36, 1); } /* ============================================================================ HELLE DARSTELLUNG — nur auf ausdrückliche Anforderung ============================================================================ >>> DIE SEITE IST IMMER DUNKEL. <<< Das dunkle Erscheinungsbild ist die CI (Mitternachtsblau als Grundfläche, CI-Katalog Seite 04) — nicht eine von zwei gleichrangigen Darstellungen. WANN GILT DIESER BLOCK? NUR, wenn am html-Element ausdrücklich `data-theme="light"` steht: Ohne dieses Merkmal bleibt die Seite dunkel — auch dann, wenn das Betriebssystem des Besuchers hell eingestellt ist. Das ist ausdrücklich so gewollt. >>> ACHTUNG: NICHT auf `@media (prefers-color-scheme: light)` umstellen. Das würde die Seite bei allen Besuchern mit hell eingestelltem Gerät automatisch umschalten — genau das soll NICHT passieren. WOZU DANN DIESER BLOCK? Für Fälle, in denen eine helle Fassung gebraucht wird: eine Druckansicht, ein Auszug für eine Präsentation, eine Einbettung auf hellem Grund oder ein späterer Umschalter. Er ist vorbereitet, aber nicht aktiv. WIE ES FUNKTIONIERT — der Grund, weshalb dieser Block so kurz ist Hier werden NUR die Werte aus `:root` überschrieben. Alle anderen Regeln der Datei bleiben unangetastet, weil sie ausnahmslos mit var(--name) arbeiten. Eine Überschrift ist also nicht „hell“ oder „dunkel“, sie ist `var(--text-hi)` — und was das bedeutet, entscheidet dieser Block. >>> FOLGE FÜR DIE PFLEGE: Wer unten eine Regel ergänzt, muss hier nichts nachziehen — SOLANGE er var(--name) benutzt und keine Farbe direkt hinschreibt. Steht irgendwo fest `color: #F4F7FD`, bleibt die Stelle im hellen Modus weiß auf weiß. Deshalb gilt: nie eine Farbe direkt notieren, immer eine Variable. DIE UMKEHRUNG DER GRAUSTUFEN Im dunklen Modus ist jedes „Grau“ Lichtweiß mit Deckkraft. Hier ist es umgekehrt: Mitternachtsblau mit Deckkraft auf hellem Grund. Das Prinzip der CI bleibt damit erhalten — es gibt weiterhin keinen eigenen Grauton, nur eine Farbe in unterschiedlicher Stärke. WARUM ANDERE AKZENTFARBEN? Die drei CI-Farben sind für DUNKLEN Grund gemacht. Auf hellem Grund versagen sie: Signalgelb (#FAFF80) auf Lichtweiß erreicht ein Kontrastverhältnis von 1,01:1 — es wäre praktisch unsichtbar. Deshalb treten hier abgedunkelte Entsprechungen an ihre Stelle. Alle drei erfüllen die Barrierefreiheitsstufe WCAG AA (mindestens 4,5:1): Signalgelb #FAFF80 → #836900 Ocker 4,91:1 Sandrot #E8785A → #CB411C dunkles Rot 4,54:1 Systemblau #007FFF → #006EDE dunkles Blau 4,57:1 Es sind dieselben Farbtöne, nur so weit abgedunkelt, dass sie auf hellem Grund lesbar bleiben. Die Zuordnung bleibt: Ocker gehört Forge, Rot gehört Orbit, Blau gehört Connects. ACHTUNG — DIE EINHEITSFARBEN STEHEN AUCH IN site.js Die drei Blöcke Orbit/Forge/Connects bekommen ihre Farbe aus assets/site.js (GELB, SANDROT, BLAU) und nicht von hier. Sie behalten deshalb auch im hellen Modus die kräftigen CI-Farben. Für den farbigen Punkt ist das richtig, für den Kernsatz darunter ist es grenzwertig: Signalgelb als Textfarbe ist auf hellem Grund kaum zu lesen. Weiter unten in dieser Datei steht deshalb eine gesonderte Regel dafür. ============================================================================ */ /* DIE GRUNDWERTE — sie tragen den ganzen Rest der Datei. */ :root[data-theme="light"] { /* Die Grundflächen tauschen die Rollen: Was im dunklen Modus die Schriftfarbe war, wird hier zur Fläche. */ --mitternachtsblau: #F4F7FD; /* Grundfläche der ganzen Seite */ --nachtblau: #E4E9F4; /* zweite Ebene, für Hover-Flächen */ --lichtweiss: #040914; /* dunkelste Schriftfarbe */ /* Die Akzentfarben in ihren abgedunkelten Entsprechungen. */ --gelb: #836900; --sandrot: #CB411C; --blau: #006EDE; /* Die Graustufen, gespiegelt: Mitternachtsblau mit abnehmender Deckkraft. Die Prozentwerte sind gegenüber dem dunklen Modus leicht angehoben — dunkle Schrift auf hellem Grund wirkt bei gleicher Deckkraft schwächer als umgekehrt. */ --text-hi: #040914; --text: rgba(5, 11, 26, .78); --text-lo: rgba(5, 11, 26, .60); --text-mute: rgba(5, 11, 26, .47); --hairline: rgba(5, 11, 26, .22); --hairline-soft: rgba(5, 11, 26, .13); } /* Markierter Text: Das Signalgelb der CI trägt hier als Fläche, weil der Text darüber dunkel ist. */ [data-theme="light"] ::selection { background: rgba(250, 255, 128, .55); color: #040914; } /* DIE KOPFZEILE Im dunklen Modus liegt hier ein dunkler Verlauf, der nach unten ausläuft. Der muss mitgetauscht werden — sonst steht dunkle Schrift auf dunklem Grund und die Kopfzeile bleibt ein schwarzer Balken. */ [data-theme="light"] .head { background: linear-gradient(180deg, rgba(244, 247, 253, .99) 0%, rgba(244, 247, 253, .82) 60%, rgba(244, 247, 253, .20) 100%); } /* DAS LOGO In index.html steht das WEISSE Logo (…-light.png) — richtig für den dunklen Normalfall, auf hellem Grund aber unsichtbar. Hier wird deshalb die schwarze Fassung eingesetzt. Sie liegt bereits im Projekt. `content` tauscht das Bild aus, ohne dass im HTML etwas zu ändern ist. Die Größe bleibt, weil sie am img-Element steht. ACHTUNG BEI DEN NAMEN: „dark“ und „light“ meinen die FARBE DES LOGOS, nicht den Modus — das schwarze Logo (-dark) gehört auf hellen Grund. */ [data-theme="light"] .head__brand img { content: url('tecomon-logo-dark.png'); opacity: 1; } [data-theme="light"] .foot__brand img { content: url('tecomon-logo-dark.png'); opacity: .55; } /* DIE KERNSÄTZE DER EINHEITEN Ihre Farbe kommt aus site.js und ist deshalb hier nicht erreichbar. Signalgelb als Schriftfarbe wäre auf hellem Grund unlesbar. Der Kernsatz bekommt deshalb die normale dunkle Textfarbe; der farbige Punkt daneben bleibt bunt und trägt die Zuordnung weiterhin. >>> Sollen die Kernsätze auch hier farbig sein, müssen in site.js zusätzliche Farbwerte hinterlegt werden. */ [data-theme="light"] .unit__claim { color: var(--text-hi); } /* Der Pfeil im Knopf: Ocker statt Signalgelb. */ [data-theme="light"] .cta__arrow { color: var(--gelb); } /* Die Hover-Unterkanten der Links. Im dunklen Modus sind sie gelb; auf hellem Grund verschwände Gelb, deshalb Ocker. */ [data-theme="light"] .head__nav a:hover, [data-theme="light"] .contact__value--link:hover, [data-theme="light"] .foot__legal a:hover, [data-theme="light"] .foot__socials a:hover { border-bottom-color: var(--gelb); } [data-theme="light"] .cta:hover { border-color: rgba(131, 105, 0, .55); } /* Links in den Rechtstexten sind unterstrichen — auch diese Linie in Ocker statt Gelb. */ [data-theme="light"] .legal a { text-decoration-color: rgba(131, 105, 0, .55); } [data-theme="light"] .legal a:hover { text-decoration-color: var(--gelb); } /* Die Kennung eines Unterabschnitts („a)“, „b)“ …). */ [data-theme="light"] .legal__sub { color: rgba(131, 105, 0, .85); } /* DER STERNENHIMMEL Ein Sternenfeld auf hellem Grund ergibt kein Bild — helle Punkte auf hellem Grund sind nicht sichtbar. Der Hintergrund wird deshalb ausgeblendet und die Fläche bleibt ruhig hell. >>> Soll der Himmel auch hier erscheinen, diese Regel entfernen und in site.js die Sternfarben auf dunkle Werte umstellen. */ [data-theme="light"] .sky canvas, [data-theme="light"] .glow { display: none; } /* Der Statuspunkt: Ocker statt Signalgelb, sonst wäre er unsichtbar. */ [data-theme="light"] .status__dot { background: var(--gelb); } /* DER GELBE KNOPF AUF DER KONTAKTKARTE Die Fläche ist hier dunkles Ocker statt Signalgelb. Auf Ocker muss die Schrift HELL stehen — dunkel auf dunkelgelb wäre kaum zu lesen. Im dunklen Modus ist es umgekehrt: dort ist die Fläche helles Signalgelb und die Schrift dunkel. */ [data-theme="light"] .card__cta { background: var(--gelb); color: #F4F7FD; } /* DIE KONTAKTKARTE Sie ist im dunklen Modus die einzige HELLE Fläche und lebt von diesem Gegensatz. Auf hellem Grund fehlt der Kontrast, deshalb bekommt sie hier einen deutlichen Rand und einen leiseren Schatten — sonst schwebte sie unsichtbar auf der Fläche. Ihre übrigen Innenfarben bleiben unverändert, sie sind bereits für weißen Grund gemacht. */ [data-theme="light"] .card { border: 1px solid rgba(5, 11, 26, .14); box-shadow: 0 18px 44px rgba(5, 11, 26, .16); } /* ——— NACHZÜGLER: Stellen mit fest notierter Farbe ——— An diesen Stellen steht die Farbe Lichtweiß direkt in der Regel, statt über eine Variable zu laufen (gewachsen, als es nur den dunklen Modus gab). Ohne die folgenden Zeilen wären sie hier weiß auf hellem Grund, also unsichtbar — das betrifft vor allem die FUSSZEILE. >>> WIRD EINE DIESER STELLEN OBEN AUF var(--name) UMGESTELLT, kann die zugehörige Zeile hier ersatzlos entfallen. */ [data-theme="light"] .rail__code { color: rgba(5, 11, 26, .48); } [data-theme="light"] .rail__tick { background: rgba(5, 11, 26, .22); } [data-theme="light"] .rail__tick--long { background: rgba(5, 11, 26, .36); } [data-theme="light"] .lead { color: rgba(5, 11, 26, .90); } [data-theme="light"] .coords { color: rgba(5, 11, 26, .48); } [data-theme="light"] .coords__rule { background: rgba(5, 11, 26, .34); } [data-theme="light"] .unit__role { color: rgba(5, 11, 26, .78); } [data-theme="light"] .unit__tag { color: rgba(5, 11, 26, .48); } [data-theme="light"] .contact__value { color: rgba(5, 11, 26, .88); } [data-theme="light"] .legal__h3 { color: rgba(5, 11, 26, .94); } /* DIE FUSSZEILE — hier standen die hellsten Werte der ganzen Datei. Ohne diese drei Zeilen wäre der Fußtext auf hellem Grund unlesbar. */ [data-theme="light"] .foot__row { color: rgba(5, 11, 26, .55); } [data-theme="light"] .foot__legal a, [data-theme="light"] .foot__socials a { color: rgba(5, 11, 26, .66); } [data-theme="light"] .foot__colophon { color: rgba(5, 11, 26, .45); } [data-theme="light"] .status__label { color: rgba(5, 11, 26, .75); } /* Alle Elemente rechnen Rand und Innenabstand in ihre Breite ein. Ohne diese Zeile würden Kästen mit Rahmen breiter als geplant. Nicht ändern. */ * { box-sizing: border-box; } /* ============================================================================ GRUNDEINSTELLUNGEN FÜR DIE GANZE SEITE ============================================================================ */ html { /* Der Grundton der Seite. Hier UND bei `body` gesetzt, damit auch beim Überscrollen (dem Nachfedern am Ende) kein weißer Streifen erscheint. */ background: var(--mitternachtsblau); /* Klickt man in der Navigation auf einen Punkt, gleitet die Seite sanft dorthin, statt zu springen. */ scroll-behavior: smooth; /* Hält beim Anspringen 130 px Luft nach oben — sonst verdeckt die fest stehende Kopfzeile die Überschrift des Abschnitts. Der Wert sollte etwas über der Höhe der Kopfzeile liegen (rund 90 px). */ scroll-padding-top: 130px; } body { margin: 0; /* kein Standardrand des Browsers */ background: var(--mitternachtsblau); color: var(--text); /* Grundfarbe aller Texte */ /* Noto Sans, geladen in index.html. Arial und Helvetica sind der Ersatz, falls Noto Sans nicht verfügbar ist. NIE eine Serifenschrift (CI). */ font-family: 'Noto Sans', Arial, Helvetica, sans-serif; font-weight: 400; font-size: 15px; /* Grundgröße; einzelne Stellen weichen ab */ line-height: 1.6; overflow-x: hidden; /* verhindert seitliches Verschieben */ /* Diese zwei Zeilen lassen die Schrift auf dunklem Grund feiner und ruhiger erscheinen. */ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Markierter Text wird gelb hinterlegt statt im Browserblau. */ ::selection { background: rgba(250, 255, 128, .24); color: var(--text-hi); } /* Bilder werden nie breiter als ihr Platz und behalten ihr Seitenverhältnis. */ img { max-width: 100%; height: auto; } /* LINKS sind auf dieser Seite Text mit einer gelben Unterkante — nie Knöpfe mit Fläche (CI). Deshalb keine Unterstreichung im Grundzustand. `transition` legt fest, dass ein Farbwechsel 0,6 Sekunden dauert, statt hart umzuschalten. */ a { color: var(--text-hi); text-decoration: none; transition: color .6s var(--ease), border-color .6s var(--ease); } /* ============================================================================ HINTERGRUND — Sternenfeld und drei atmende Lichtflächen Gehört zum
ganz oben in index.html. ============================================================================ */ .sky { position: fixed; /* bleibt beim Scrollen stehen */ inset: 0; /* füllt das ganze Fenster */ z-index: 0; /* liegt hinter dem Inhalt (der hat z-index: 1) */ /* WICHTIG: Die Fläche fängt keine Mausklicks ab. Dadurch bleibt alles darüber ungehindert benutzbar — und die Prüfung, ob die Maus über Antares liegt, muss in site.js gerechnet werden. */ pointer-events: none; background: var(--mitternachtsblau); } /* Die beiden Zeichenflächen (Sternenfeld und Verbindungslinien) liegen deckungsgleich übereinander und füllen das Fenster. */ .sky canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .glow { position: absolute; inset: 0; } /* ——— DIE DREI LICHTFLÄCHEN ——— Jede ist ein großer, weicher Farbverlauf, der langsam heller und dunkler wird — das „Atmen“ des Hintergrunds. Zu lesen ist eine Zeile so: radial-gradient(105% 62% at 74% 2%, …) → ein ovaler Verlauf, 105 % breit und 62 % hoch, mit Mittelpunkt bei 74 % von links und 2 % von oben. Danach folgen die Farbstufen von innen (sichtbar) nach außen (durchsichtig). Die Zeiten 86s / 124s / 157s sind absichtlich unrund und teilen sich nicht glatt: dadurch treffen die drei Flächen nie im gleichen Takt zusammen, und es entsteht kein erkennbarer Rhythmus. RUHIGER STELLEN: Die Sekunden erhöhen (z. B. 86s → 160s). GANZ ABSCHALTEN: In index.html die drei glow-Zeilen entfernen. */ .glow--a { background: radial-gradient(105% 62% at 74% 2%, rgba(30, 56, 128, .26) 0%, rgba(6, 14, 40, .08) 44%, rgba(5, 11, 26, 0) 72%); animation: breatheA 86s ease-in-out infinite; } .glow--b { background: radial-gradient(74% 50% at 6% 84%, rgba(42, 38, 96, .22) 0%, rgba(5, 11, 26, 0) 66%); animation: breatheB 124s ease-in-out infinite; } .glow--c { background: radial-gradient(58% 38% at 46% 46%, rgba(52, 86, 166, .13) 0%, rgba(5, 11, 26, 0) 70%); animation: breatheC 157s ease-in-out infinite; } /* Der Bewegungsablauf zu den drei Flächen. 0 % ist der Anfang, 100 % das Ende; `infinite` oben lässt es endlos wiederholen. Fläche b läuft gegenläufig (beginnt hell und wird in der Mitte dunkler), damit die drei sich nicht gegenseitig verstärken. */ @keyframes breatheA { 0%, 100% { opacity: .30 } 50% { opacity: .56 } } @keyframes breatheB { 0%, 100% { opacity: .44 } 50% { opacity: .18 } } @keyframes breatheC { 0%, 100% { opacity: .16 } 45% { opacity: .38 } } /* ============================================================================ RANDLEISTE LINKS — Abschnittsname, Skala, Scrollposition Die schmale senkrechte Leiste am linken Bildrand. Die beiden Textwerte füllt site.js laufend. ============================================================================ */ .rail { position: fixed; /* bleibt beim Scrollen stehen */ left: 26px; top: 50%; transform: translateY(-50%); /* zusammen mit top: 50% = senkrecht mittig */ z-index: 15; display: flex; flex-direction: column; /* die Teile stehen untereinander */ align-items: center; gap: 14px; /* Abstand zwischen ihnen */ pointer-events: none; /* nicht anklickbar, reine Anzeige */ } /* `writing-mode: vertical-rl` dreht die Schrift um 90° — dadurch laufen Abschnittsname und Prozentwert senkrecht. */ .rail__code, .rail__pct { writing-mode: vertical-rl; font-size: 9px; font-weight: 600; text-transform: uppercase; /* stellt alles in Versalien */ } .rail__code { letter-spacing: .34em; color: rgba(244, 247, 253, .34); } .rail__pct { letter-spacing: .30em; color: var(--text-mute); } /* Die Skala: kurze Striche mit drei längeren dazwischen. Welche lang sind, entscheidet die Zusatzklasse in index.html. */ .rail__scale { display: flex; flex-direction: column; align-items: center; gap: 7px; } .rail__tick { width: 5px; height: 1px; background: rgba(244, 247, 253, .16); } .rail__tick--long { width: 9px; background: rgba(244, 247, 253, .30); } /* ============================================================================ KOPFZEILE ============================================================================ */ /* Die Hülle um allen Inhalt. `z-index: 1` hebt sie über den Hintergrund. */ .shell { position: relative; z-index: 1; } /* Die Kopfzeile läuft über die GANZE Fensterbreite und steht dauerhaft am oberen Bildrand — man kann nicht an ihr vorbeiscrollen. `position: fixed` heißt: sie ist aus dem Textfluss herausgelöst und klebt am Fenster, nicht an der Seite. Der Unterschied zu `sticky`: sticky läuft erst mit und bleibt dann hängen — fixed steht von Anfang an und verschwindet nie. FOLGE DARAUS: Weil sie keinen Platz mehr im Textfluss belegt, würde der Auftakt sonst unter ihr beginnen. Deshalb hat `.band--hero` weiter unten einen Abstand nach oben. Wird die Kopfzeile höher (größeres `padding` oder Logo), muss dieser Wert dort mitwachsen. */ .head { position: fixed; top: 0; left: 0; right: 0; /* linker bis rechter Fensterrand */ z-index: 20; /* über allem anderen */ /* Deckend nach unten auslaufend, damit Text sauber darunter wegscrollt und nirgends durchscheint. */ background: linear-gradient(180deg, rgba(5, 11, 26, .99) 0%, rgba(5, 11, 26, .80) 60%, rgba(5, 11, 26, .20) 100%); } /* Der INHALT der Kopfzeile: Logo ganz links, Navigation ganz rechts — BIS AN DIE FENSTERRÄNDER, absichtlich NICHT auf die Rasterbreite (1240 px) begrenzt. Die Kopfzeile ist damit die einzige Stelle der Seite, die das Raster verlässt: sie spannt sich über die volle Breite. >>> SOLL DER INHALT DOCH IM RASTER STEHEN (also gleich weit eingerückt wie die Überschriften darunter)? Dann diese zwei Zeilen ergänzen: max-width: var(--max); margin: 0 auto; `--pad-head` steuert allein den Abstand zu den Fensterrändern. Kleiner heißt: Logo und Navigation rücken weiter nach außen. */ .head__inner { display: flex; align-items: center; justify-content: space-between; /* Logo links, Navigation rechts */ gap: 24px; flex-wrap: wrap; /* bricht auf schmalen Geräten um */ padding: 22px var(--pad-head); } /* Logo und Wortmarke. `height: 26px` bestimmt die angezeigte Größe des Logos — das ist die Stelle, an der man es größer oder kleiner macht. Im Ruhezustand liegt es bei 90 % Deckkraft und wird beim Überfahren voll sichtbar; der Übergang dauert eine Sekunde. */ .head__brand { display: inline-flex; align-items: center; gap: 13px; } /* Das Signet in der Kopfzeile. 40 px, weil das Logo feine Details trägt (der Ring aus Binärziffern und die schmalen Linien): kleiner gesetzt verschwimmt es zu einem grauen Fleck. Wird das Logo einmal gegen ein einfacheres getauscht, darf dieser Wert wieder sinken. */ .head__brand img { height: 40px; width: auto; display: block; opacity: .9; transition: opacity 1s var(--ease); } .head__brand:hover img { opacity: 1; } /* Die Wortmarke: Versalien, halbfett, Laufweite 0.24em — CI-Katalog Seite 03. `white-space: nowrap` verhindert, dass „Tecomon GmbH“ umbricht. */ .head__wordmark { font-size: 13px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--text-hi); white-space: nowrap; } /* Die Navigation. Die Menüpunkte tragen eine unsichtbare Unterkante, die erst beim aktiven Abschnitt sichtbar wird — dadurch verschiebt sich beim Wechsel nichts. */ .head__nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 30px); flex-wrap: wrap; } .head__nav a { font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text-lo); padding-bottom: 6px; border-bottom: 1px solid transparent; } /* Beim Überfahren mit der Maus wird der Punkt heller UND bekommt die gelbe Unterkante der CI. Weil die Unterkante im Ruhezustand schon unsichtbar vorhanden ist (border-bottom: transparent oben), verschiebt sich dabei nichts — es wird nur die Farbe eingeblendet. */ .head__nav a { transition: color .6s var(--ease), border-bottom-color .6s var(--ease); } .head__nav a:hover { color: var(--text-hi); border-bottom-color: rgba(250, 255, 128, .7); } /* Der Punkt zum Abschnitt, in dem man sich befindet. Das Merkmal `aria-current` setzt site.js beim Scrollen. Das gilt für ALLE Menüpunkte gleichermaßen — auch für „Kontakt“, der früher unabhängig vom Scrollen dauerhaft gelb unterstrichen war. */ .head__nav a[aria-current="true"] { color: var(--text-hi); border-bottom-color: var(--hairline); } /* ============================================================================ BÄNDER UND RASTER — das Gerüst hinter allen Abschnitten ============================================================================ */ /* Jeder Abschnitt in index.html ist ein `band`: höchstens 1240 px breit, zentriert, mit Abstand nach oben und zu den Seiten. Der Abstand nach unten fehlt absichtlich — er entsteht durch den nächsten Abschnitt. */ .band { max-width: var(--max); margin: 0 auto; padding: var(--band) var(--pad) 0; } /* Der Auftakt braucht einen Abstand nach oben: die Kopfzeile steht fest (`position: fixed`) und belegt keinen Platz im Textfluss — ohne diesen Abstand begänne die Überschrift unter ihr. Die Kopfzeile ist rund 71 px hoch. Der Wert hier muss also mindestens so groß sein; der Überschuss ist gewollte Luft. Kleiner = die Überschrift rückt näher an die Kopfzeile. Unter etwa 80 px würde sie darunter verschwinden. */ .band--hero { padding-top: clamp(104px, 13vh, 148px); } /* Für das Zitat: schmaler und mittig. */ .band--center { max-width: 1000px; text-align: center; } /* ——— DAS ZWEISPALTEN-RASTER ——— `duo` teilt in zwei gleich breite Spalten (1fr 1fr = je ein Anteil). WICHTIG ZU WISSEN: An mehreren Stellen in index.html steht in der linken Spalte ein leeres
. Das ist ABSICHT — es hält die linke Spalte frei und schiebt den Text nach rechts. Löscht man es, springt der Text nach links. Die Zusätze: duo--offset rückt den Block nach unten ab duo--wide-gap noch mehr Abstand nach oben duo--baseline stellt beide Spalten auf eine gemeinsame Grundlinie, damit Überschrift und Text unten abschließen */ .duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: start; } .duo--offset { margin-top: 52px; } .duo--wide-gap { margin-top: clamp(44px, 6vh, 76px); } .duo--baseline { align-items: end; } /* ============================================================================ TYPOGRAFIE — Noto Sans in den Schnitten 300 / 400 / 500 / 600 CI-Katalog: Überschriften im Schnitt 300 mit negativer Laufweite, Fließtext 15–16 px bei Zeilenhöhe 1,6–1,7 und höchstens 62 Zeichen, Labels in Versalien bis 12 px mit Laufweite ab 0.16em im Schnitt 600. Diese Regeln sind die Stellschrauben für alle Textgrößen. Jede Größe ist ein clamp(): kleinster Wert · Wunschwert · größter Wert. `letter-spacing` ist bei großen Überschriften NEGATIV (-.032em) — die Buchstaben rücken enger zusammen. Bei kleinen Labels ist sie stark POSITIV (.24em) — die Buchstaben stehen weit. Dieser Gegensatz ist ein Kennzeichen der CI und sollte erhalten bleiben. ============================================================================ */ /* Die größte Schrift der Seite, für die Hauptüberschrift im Auftakt. Kommt genau EINMAL pro Seite vor. `text-wrap: balance` verteilt die Wörter gleichmäßig auf die Zeilen, damit keine einzelne Restzeile mit einem Wort stehen bleibt. */ .display { margin: 0; max-width: 1020px; font-size: clamp(42px, 7.6vw, 108px); font-weight: 300; line-height: 1.0; letter-spacing: -.032em; color: var(--text-hi); text-wrap: balance; } /* Die großen Aussagen in den Abschnitten „Arbeit“ und „Kontakt“. `statement--sm` ist die kleinere Ausführung im Kontakt-Abschnitt. */ .statement { margin: 0; font-size: clamp(34px, 6vw, 86px); font-weight: 300; line-height: 1.08; letter-spacing: -.03em; color: var(--text-hi); text-wrap: balance; } .statement--sm { font-size: clamp(30px, 4.4vw, 56px); line-height: 1.14; } /* Abschnittsüberschriften (z. B. „Unsere Leistungen“). */ .heading { margin: 0; max-width: 460px; font-size: clamp(28px, 3.6vw, 52px); font-weight: 300; line-height: 1.16; letter-spacing: -.028em; color: var(--text-hi); text-wrap: balance; } /* Der hervorgehobene Einzeiler („Wir seit 2019.“) — größer als Fließtext, aber keine Überschrift. */ .lead { margin: 0; font-size: clamp(18px, 1.7vw, 22px); font-weight: 400; line-height: 1.5; letter-spacing: -.01em; color: rgba(244, 247, 253, .9); } /* Der normale Fließtext. `max-width: 62ch` begrenzt die Zeile auf etwa 62 Zeichen — die Faustregel für gute Lesbarkeit (CI). Zu lange Zeilen ermüden beim Lesen. `text-wrap: pretty` verhindert einzelne Wörter am Absatzende. */ .body { margin: 0; max-width: 62ch; font-size: 16px; font-weight: 400; line-height: 1.7; color: var(--text); text-wrap: pretty; } /* Die schmalere, blassere Ausführung für Nebentexte. */ .body--tight { max-width: 46ch; color: var(--text-lo); } /* Die kleinen Bezeichnungen in Versalien (z. B. „Ausgangspunkt“). CI: höchstens 12 px, Schnitt 600, Laufweite ab .16em. */ .label { margin: 0; font-size: 10.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--text-mute); line-height: 2; } /* Färbt beliebigen Text im Signalgelb. So entstehen der gelbe Punkt hinter „Transformation“, das gelbe „Muster“ und das gelbe Komma im Kontakt-Abschnitt. Einsetzbar an jeder Stelle in index.html: Wort */ .accent { color: var(--gelb); } /* Die Koordinatenzeile über der Hauptüberschrift. Der kurze Strich davor ist `coords__rule` — ein 22 px breites, 1 px hohes Kästchen. `flex: none` verhindert, dass es mitgestaucht wird. */ .coords { margin: 0 0 40px -1px; display: flex; align-items: center; gap: 12px; font-size: 10px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: rgba(244, 247, 253, .34); } .coords strong { font-weight: 600; letter-spacing: .24em; } .coords__rule { width: 22px; height: 1px; flex: none; background: rgba(244, 247, 253, .28); } /* ============================================================================ EINHEITEN — die drei großen Blöcke Antares / Forge / Connects Die Inhalte kommen aus der Liste `units` in assets/site.js. `var(--unit)` steht hier mehrfach: das ist die Farbe der jeweiligen Einheit. Sie wird nicht hier festgelegt, sondern von site.js für jeden Block einzeln gesetzt — aus dem Feld `color` der Liste. Dadurch färbt ein Farbkürzel dort Punkt, Kernsatz und Linie gemeinsam um. ============================================================================ */ .units { display: flex; flex-direction: column; margin-top: clamp(44px, 6vh, 70px); } /* Ein Block. Beim Überfahren tritt er hervor und die anderen treten zurück — dieses Verhalten steuert site.js (Abschnitt bindUnits), die Geschwindigkeit steht hier in `transition`. */ .unit { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: start; padding: 36px 0; border-top: 1px solid var(--hairline-soft); transition: border-color 1.2s var(--ease), opacity 1.1s var(--ease), transform .9s var(--ease); } .units .unit:last-child { border-bottom: 1px solid var(--hairline-soft); } /* Die Kopfzeile eines Blocks: farbiger Punkt und Rolle. */ .unit__meta { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; } .unit__dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--unit); } .unit__role { font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(244, 247, 253, .72); } /* Der Name der Einheit — groß und leicht. */ .unit__name { margin: 0 0 16px; font-size: clamp(30px, 3.2vw, 44px); font-weight: 300; line-height: 1.06; letter-spacing: -.028em; color: var(--text-hi); } /* Der Kernsatz — steht in der Farbe der Einheit und ist damit die auffälligste Stelle des Blocks. */ .unit__claim { margin: 0; max-width: 400px; font-size: clamp(17px, 1.6vw, 19px); font-weight: 400; line-height: 1.5; letter-spacing: -.01em; color: var(--unit); text-wrap: pretty; } /* Die rechte Spalte: Geschichte, Arbeitsweise, Stichwortzeile. Die Textfarben werden nach unten hin blasser — das führt das Auge von oben nach unten. */ .unit__side { display: flex; flex-direction: column; gap: 18px; max-width: 450px; } .unit__story { margin: 0; font-size: 15px; line-height: 1.7; color: var(--text); text-wrap: pretty; } .unit__work { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--text-lo); text-wrap: pretty; } .unit__tag { margin: 0; font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(244, 247, 253, .34); } /* ============================================================================ ZITAT Text und Quellenangabe stehen direkt in index.html. Mittig gesetzt durch `band--center` weiter oben. ============================================================================ */ .quote { margin: 0; font-size: clamp(22px, 3vw, 34px); font-weight: 300; line-height: 1.5; letter-spacing: -.015em; color: var(--text-hi); text-wrap: balance; } /* Die Quellenangabe darunter: klein, in Versalien, blass. */ .quote__who { margin: 34px 0 0; font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--text-mute); } /* ============================================================================ KONTAKT — Kontaktzeilen und der gelbe Knopf Die Zeilen kommen aus `contactLines` in assets/site.js. Der Knopf steht komplett in index.html. ============================================================================ */ /* Links die Kontaktzeilen, rechts der Knopf. `1fr auto` heißt: die Zeilen nehmen den freien Platz, der Knopf nur so viel, wie er braucht. */ .contact { margin-top: clamp(40px, 6vh, 56px); padding-top: 26px; border-top: 1px solid var(--hairline-soft); display: grid; grid-template-columns: 1fr auto; gap: clamp(32px, 5vw, 64px); align-items: center; } /* >>> DREI SPALTEN für E-Mail, Telefon, Ort. Kommt in site.js eine vierte Kontaktzeile hinzu, muss hier `repeat(3, auto)` auf 4 geändert werden — sonst rutscht die vierte in eine neue Reihe. */ /* Die Kontaktzeilen stehen nebeneinander. `auto-fit` heißt: so viele Spalten, wie Einträge vorhanden sind — es muss hier also nichts nachgezogen werden, wenn in site.js eine Zeile ergänzt oder gelöscht wird. */ .contact__lines { display: grid; grid-auto-flow: column; grid-auto-columns: auto; gap: clamp(26px, 4vw, 56px); justify-content: start; } /* Beim Überfahren hebt sich eine Zeile um 3 px. */ .contact__item { display: flex; flex-direction: column; gap: 7px; transition: transform .9s var(--ease); } .contact__item:hover { transform: translateY(-3px); } .contact__label { font-size: 9px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--text-mute); } .contact__value { font-size: 15px; font-weight: 400; color: rgba(244, 247, 253, .86); } /* Anklickbare Kontaktwerte (E-Mail, Telefon). Sie sehen im Ruhezustand aus wie der übrige Text — nur eine sehr feine Unterkante deutet an, dass hier etwas anklickbar ist. Beim Überfahren wird der Text hell und die Unterkante gelb, wie bei allen anderen Links der Seite. `width: fit-content` sorgt dafür, dass die Unterkante nur unter dem Text liegt und nicht über die ganze Spaltenbreite läuft. */ .contact__value--link { width: fit-content; text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid var(--hairline); transition: color .6s var(--ease), border-bottom-color .6s var(--ease); } .contact__value--link:hover { color: var(--text-hi); border-bottom-color: rgba(250, 255, 128, .7); } /* ——— DER KNOPF „Gespräch vereinbaren“ ——— Die einzige Stelle der Seite mit einem sichtbaren Rahmen. Im Ruhezustand ist er neutral; beim Überfahren wird der Rahmen gelb, der Knopf hebt sich 2 px und die Fläche wird eine Spur heller. Bewusst zurückhaltend — die CI verlangt keine flächigen Knöpfe. */ .cta { display: inline-flex; align-items: center; gap: 22px; padding: 19px 30px 19px 28px; border: 1px solid var(--hairline); transition: border-color 1s var(--ease), transform .9s var(--ease), background-color 1s var(--ease); } .cta:hover { border-color: rgba(250, 255, 128, .5); transform: translateY(-2px); background-color: var(--nachtblau); } .cta__stack { display: flex; flex-direction: column; gap: 6px; } /* Die kleine Zeile über der Hauptzeile („Unverbindlich“). */ .cta__kicker { font-size: 9px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--text-mute); } .cta__label { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--text-hi); } .cta__arrow { font-size: 15px; color: rgba(250, 255, 128, .85); } /* Derselbe Knopf, aber im Auftakt oben auf der Seite. Einziger Unterschied: der Abstand nach oben zur Zeile „Wir seit 2019.“. Alles andere (Rahmen, Hover, Größe) kommt aus der Regel `.cta` darüber — wird die geändert, ändert sich dieser Knopf automatisch mit. */ .cta--hero { margin-top: 34px; } /* ============================================================================ RECHTSTEXTE — Impressum und Datenschutzerklärung Gilt nur für impressum.html und datenschutz.html, nicht für die Startseite. Lange Rechtstexte brauchen andere Regeln als die Startseite: eine schmalere Spalte, mehr Zeilenabstand und deutlich kleinere Überschriften. Der Text soll ruhig lesbar sein, nicht wirken. `.legal` ist die Spalte, in der alles steht. Die Klassen darin sind absichtlich einfach gehalten, damit sich weitere Absätze ohne Nachdenken ergänzen lassen: Überschrift =

, Absatz =

. ============================================================================ */ /* BREITE DER TEXTSPALTE Rechtstexte sind lang; eine zu schmale Spalte macht die Seite endlos. Deshalb hier deutlich breiter als der Fließtext der Startseite (62ch) und breiter als eine reine Lesespalte — 1080 px, gedeckelt durch die Fensterbreite. >>> Schmaler gewünscht? Den Wert 1080px verringern (z. B. 900px). Breiter? Erhöhen — über 1240px hinaus passt es aber nicht mehr zum Raster der Startseite. */ .legal { max-width: 1080px; margin: 0 auto; padding: clamp(104px, 13vh, 148px) var(--pad) clamp(60px, 9vh, 100px); } /* Die Seitenüberschrift („Impressum“). Kleiner als die Startseiten-Headline: ein Rechtstext ist kein Auftritt. */ .legal__title { margin: 0 0 14px; font-size: clamp(34px, 4.4vw, 58px); font-weight: 300; line-height: 1.1; letter-spacing: -.028em; color: var(--text-hi); } /* Die kleine Zeile unter der Überschrift (Stand / Hinweis). */ .legal__meta { margin: 0 0 clamp(38px, 5vh, 60px); font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--text-mute); } /* HAUPTABSCHNITTE („1. Begriffsbestimmungen“) Die Linie darüber gliedert den langen Text in klar getrennte Blöcke. AUFBAU: Die Nummer steht in einem eigenen und hängt bei breiten Fenstern LINKS NEBEN dem Text in der Randspalte. Dadurch sieht man beim Scrollen sofort, in welchem Abschnitt man ist. Das Raster „auto 1fr“ heißt: erste Spalte so breit wie die Nummer, zweite Spalte nimmt den Rest. */ .legal__h2 { display: grid; grid-template-columns: 78px 1fr; align-items: baseline; gap: 0 18px; margin: clamp(56px, 7vh, 86px) 0 20px; padding-top: 26px; border-top: 1px solid var(--hairline); font-size: clamp(21px, 2.3vw, 28px); font-weight: 300; line-height: 1.28; letter-spacing: -.018em; color: var(--text-hi); scroll-margin-top: 110px; /* damit Sprungmarken nicht unter der Kopfzeile landen */ } /* DIE ABSCHNITTSNUMMER — der eigentliche Orientierungspunkt. Groß, in Signalgelb, mit enger Laufweite. Sie ist bewusst so auffällig: beim schnellen Scrollen soll man nur den Zahlen folgen müssen. >>> Kleiner gewünscht? font-size verringern. >>> Andere Farbe? color anpassen (var(--gelb) ist das CI-Signalgelb). */ .legal__num { font-size: clamp(30px, 3.4vw, 44px); font-weight: 300; line-height: .9; letter-spacing: -.04em; color: var(--gelb); font-variant-numeric: tabular-nums; /* alle Ziffern gleich breit — dadurch stehen die Nummern untereinander auf einer Kante */ text-align: right; } /* Der erste Abschnitt braucht keine Linie und keinen großen Abstand. */ .legal__h2:first-of-type { margin-top: 0; } /* UNTERABSCHNITTE („a) personenbezogene Daten“) Auch hier hängt die Kennung links außen, aber kleiner und blasser als die Hauptnummern — die Rangfolge bleibt dadurch sofort erkennbar. */ .legal__h3 { display: grid; grid-template-columns: 78px 1fr; align-items: baseline; gap: 0 18px; margin: 34px 0 12px; font-size: 16px; font-weight: 600; line-height: 1.45; color: rgba(244, 247, 253, .92); scroll-margin-top: 110px; } /* Die Kennung eines Unterabschnitts („a)“, „b)“ …). */ .legal__sub { font-size: 15px; font-weight: 600; letter-spacing: .04em; color: rgba(250, 255, 128, .72); text-align: right; } /* ÜBERSCHRIFTEN OHNE NUMMER — z. B. im Impressum („Haftungsausschluss“, „Haftung für Inhalte“). Sie haben keine Nummer daneben und brauchen deshalb auch keine Nummernspalte: die Überschrift nimmt die ganze Breite und bleibt dadurch in EINER Zeile. WICHTIG: Diese Regel muss NACH `.legal__h2` und `.legal__h3` stehen. Bei gleicher Stärke gewinnt in CSS die später notierte Regel — stünde sie davor, würde die Nummernspalte der Grundregeln gewinnen und der Text müsste sich in 78 px quetschen (er bräche dann in drei Zeilen um). Verwendung: class="legal__h2 legal__h2--plain" class="legal__h3 legal__h3--plain" */ .legal__h2--plain, .legal__h3--plain { display: block; /* kein Raster mehr — volle Breite */ text-wrap: balance; /* falls es doch umbricht: gleichmäßig */ } /* Absätze und Listen rücken auf die Textkante der Überschriften ein, damit eine durchgehende senkrechte Linie entsteht. Die Nummern stehen links davon frei. 96px = 78px Nummernspalte + 18px Abstand (siehe `.legal__h2`). Wird die Nummernspalte dort geändert, muss dieser Wert mitgeändert werden. */ .legal__body { padding-left: 96px; } /* Die Einleitungsabsätze VOR Abschnitt 1 haben keine Nummer daneben und werden deshalb nicht eingerückt. */ .legal__intro { padding-left: 0; } /* Die Quellenangabe des Generators am Ende — kleiner und blasser, weil sie nicht zum Regelungstext gehört. */ .legal__source { margin-top: clamp(46px, 6vh, 72px); padding-top: 24px; border-top: 1px solid var(--hairline-soft); font-size: 13px; color: var(--text-mute); } /* Auf schmalen Fenstern gibt es keine Randspalte: Nummern stehen dann über dem Text und die Einrückung entfällt (siehe „Schmale Ansichten“ am Ende dieser Datei). */ /* Fließtext. 15 px bei Zeilenhöhe 1.75 — etwas luftiger als auf der Startseite, weil hier viel gelesen wird. */ .legal p { margin: 0 0 16px; font-size: 15px; line-height: 1.75; color: var(--text); text-wrap: pretty; } /* Aufzählungen. Der Punkt sitzt außerhalb der Textkante, damit der Text sauber untereinander bleibt. */ .legal ul { margin: 0 0 18px; padding-left: 20px; } .legal li { margin-bottom: 9px; font-size: 15px; line-height: 1.75; color: var(--text); } /* Anschriften und Kontaktblöcke: enger gesetzt als Fließtext, weil jede Zeile für sich steht. `.legal__block p` hebt den Absatzabstand auf. */ .legal__block { margin: 0 0 26px; } .legal__block p { margin: 0 0 3px; color: var(--text); } /* Die kleine Bezeichnung über einem Block („Zentrale“, „Kontakt“). */ .legal__label { margin: 26px 0 8px; font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--text-mute); } /* Links im Rechtstext: hier AUSNAHMSWEISE unterstrichen. Auf der Startseite sind Links Text mit gelber Unterkante — in einem Rechtstext müssen sie dagegen unmissverständlich als Link erkennbar sein. */ .legal a { color: var(--text-hi); text-decoration: underline; text-decoration-color: rgba(250, 255, 128, .5); text-underline-offset: 3px; /* Lange URLs dürfen umbrechen, sonst sprengen sie die Spalte am Handy. */ overflow-wrap: anywhere; } .legal a:hover { text-decoration-color: var(--gelb); } /* Der Zurück-Link am Anfang der Seite. */ .legal__back { display: inline-block; margin-bottom: clamp(30px, 4vh, 46px); font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--text-lo); text-decoration: none; } .legal__back:hover { color: var(--text-hi); } /* ============================================================================ FUSSZEILE ============================================================================ */ .foot { max-width: var(--max); margin: 0 auto; padding: clamp(70px, 11vh, 110px) var(--pad) 56px; } /* Die drei Angaben verteilen sich über die Breite. Auf schmalen Geräten stehen sie untereinander (siehe „Schmale Ansichten“). */ .foot__row { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(244, 247, 253, .32); } /* Das Logo im Fuß ist kleiner und deutlich blasser als oben — es ist nur noch eine Wiederholung, kein Auftritt. */ /* Die Rechtslinks im Fuß (Impressum · Datenschutz). Sie erben die Versalien und die Laufweite von `.foot__row`, sind aber etwas heller als der übrige Fußtext, damit sie als Links erkennbar bleiben. */ .foot__legal { display: inline-flex; align-items: center; gap: 22px; flex-wrap: wrap; } .foot__legal a { font: inherit; color: rgba(244, 247, 253, .52); text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid transparent; } .foot__legal a:hover { color: var(--text-hi); border-bottom-color: rgba(250, 255, 128, .6); } .foot__brand { display: inline-flex; align-items: center; gap: 13px; } .foot__brand img { height: 28px; width: auto; display: block; opacity: .42; } .foot__colophon { color: rgba(244, 247, 253, .22); } /* ——— SOCIALS IM FUSS ——— Reine Textlinks, bewusst OHNE Icons/Logos: Marken-Logos von LinkedIn, Xing, Instagram, Facebook und YouTube unterliegen den jeweiligen Markenrichtlinien der Unternehmen und dürfen ohne Genehmigung meist nicht verwendet oder in fremden Farben eingesetzt werden. Ein Textlink umgeht dieses Problem und braucht keine Genehmigung. Optisch an `.foot__legal` angelehnt, damit beide Link-Gruppen im Fuß einheitlich aussehen. >>> LINKS EINTRAGEN: In index.html (und den beiden Rechtstext-Seiten) steht bei jedem Wort vorerst nur href="#". Sobald die echten Profil-Adressen feststehen, dort jeweils die richtige URL eintragen — sonst ändert sich hier nichts. */ .foot__socials { display: inline-flex; align-items: center; gap: 22px; flex-wrap: wrap; } .foot__socials a { font: inherit; color: rgba(244, 247, 253, .52); text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid transparent; transition: color .6s var(--ease), border-color .6s var(--ease); } .foot__socials a:hover { color: var(--text-hi); border-bottom-color: rgba(250, 255, 128, .6); } /* ——— DER STATUSPUNKT UNTEN RECHTS ——— Bleibt beim Scrollen an seinem Platz und ist nicht anklickbar. Der Punkt pulsiert alle 5,5 Sekunden einmal kurz auf. */ .status { position: fixed; right: 36px; bottom: 32px; z-index: 15; display: flex; align-items: center; gap: 11px; opacity: .5; transition: opacity .5s var(--ease); pointer-events: none; } .status__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gelb); animation: pulseDot 5.5s ease-in-out infinite; } .status__label { font-size: 9.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(244, 247, 253, .7); } .status__label sup { font-size: 7px; } /* Der Ablauf des Pulsierens: 88 % der Zeit blass, kurz bei 92 % ein Aufblitzen, dann zurück. Dadurch wirkt es wie ein Signal, nicht wie ein Blinken. */ @keyframes pulseDot { 0%, 88%, 100% { opacity: .25 } 92% { opacity: .95 } } /* ============================================================================ DIE KONTAKTKARTE UNTEN LINKS Schwebt 5 Sekunden nach dem Laden unten links ein (gesteuert von assets/site.js, Abschnitt „KONTAKTKARTE“). Bewusst HELL gehalten: eine weiße Karte auf dem dunklen Sternenhintergrund fällt auf, ohne dass sie grell wirken muss. Sie ist damit die einzige helle Fläche der Seite — genau das macht sie zum Blickfang. ============================================================================ */ .card { position: fixed; left: clamp(16px, 3vw, 34px); bottom: clamp(16px, 3vw, 34px); z-index: 60; /* über dem Inhalt, unter nichts anderem */ width: min(330px, calc(100vw - 32px)); padding: 30px 28px 28px; background: #FFFFFF; border-radius: 8px; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); /* Der Einschwebe-Effekt: Die Karte startet 18 px tiefer und unsichtbar. Sobald site.js die Klasse `is-in` setzt, fährt sie sanft an ihren Platz. Umgekehrt beim Schließen — deshalb die Übergangszeit an beiden Zuständen. */ opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); } .card.is-in { opacity: 1; transform: translateY(0); } /* Der Schließen-Knopf oben rechts. */ .card__close { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #0B1329; cursor: pointer; transition: background-color .5s var(--ease); } .card__close:hover { background: rgba(5, 11, 26, .07); } .card__close svg { width: 16px; height: 16px; display: block; } /* Das runde Foto. `object-fit: cover` füllt den Kreis vollständig aus und schneidet dabei die Ränder ab, statt das Bild zu verzerren. */ .card__photo { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; background: #E8EAEE; /* der graue Platzhalter-Grund */ margin-bottom: 12px; } .card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Der Platzhalter: Diese Klasse setzt site.js, wenn kein Foto hinterlegt ist. Dann erscheint mittig ein schlichtes Personen-Symbol. */ .card__photo--empty { display: inline-flex; align-items: center; justify-content: center; } .card__photo--empty img { display: none; } .card__photo--empty svg { width: 40px; height: 40px; color: #9BA3B0; } /* Der Name unter dem Foto. Klein und in Versalien gesetzt — er ordnet das Foto zu, soll aber der Ansprache darunter nicht die Aufmerksamkeit nehmen. */ .card__name { font-size: 9.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #8B94A3; margin-bottom: 10px; } /* Die Ansprache. Dunkel auf Weiß — hier gilt nicht die Schriftfarbe der übrigen Seite, weil der Grund hell ist. */ .card__title { font-size: 19px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; color: #040914; margin-bottom: 16px; } /* E-Mail und Telefon, untereinander. */ .card__lines { display: flex; flex-direction: column; gap: 4px; margin-bottom: 22px; } .card__lines a { font-size: 14px; color: #46505F; text-decoration: none; width: fit-content; border-bottom: 1px solid transparent; transition: color .5s var(--ease), border-color .5s var(--ease); } .card__lines a:hover { color: #040914; border-bottom-color: #040914; } /* Der gelbe Knopf. Anders als der Knopf im Auftakt ist dieser FLÄCHIG gelb — auf der weißen Karte braucht es diesen Kontrast, damit er trägt. */ .card__cta { display: block; padding: 15px 22px; border-radius: 999px; background: var(--gelb); color: #040914; font-size: 14px; font-weight: 700; letter-spacing: .01em; text-align: center; text-decoration: none; transition: filter .5s var(--ease), transform .5s var(--ease); } .card__cta:hover { filter: brightness(.94); transform: translateY(-1px); } /* Auf schmalen Bildschirmen sitzt die Karte über der ganzen Breite und rückt vom Statuspunkt unten rechts weg. */ @media (max-width: 560px) { .card { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 26px 22px 22px; } .card__title { font-size: 17px; } } /* Ist „Bewegung reduzieren“ aktiv, erscheint die Karte ohne Bewegung. */ @media (prefers-reduced-motion: reduce) { .card { transition: opacity .3s linear; transform: none; } .card.is-in { transform: none; } } /* ============================================================================ EINBLENDEN BEIM SCROLLEN — einmalig Gilt für jedes Element, das in index.html `data-reveal` trägt. Zeile 1: Grundzustand — unsichtbar und 14 px nach unten verschoben. Zeile 2: sobald site.js die Klasse `is-in` setzt, blendet es ein und rückt an seinen Platz. Das vorangestellte `.js` ist die Sicherung: die Regel gilt nur, wenn JavaScript läuft (index.html setzt diese Markierung im Kopf). Ohne JavaScript bleibt alles sofort sichtbar, statt unsichtbar hängen zu bleiben. `var(--reveal-delay, 0ms)` ist die kleine Verzögerung, die site.js je Element setzt (0, 110 oder 220 ms) — dadurch erscheinen benachbarte Elemente leicht nacheinander. Die 0ms dahinter ist der Ersatzwert, falls nichts gesetzt wurde. ============================================================================ */ .js [data-reveal] { opacity: 0; transform: translateY(14px); } .js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity 1.6s var(--ease) var(--reveal-delay, 0ms), transform 1.7s var(--ease) var(--reveal-delay, 0ms); } /* ============================================================================ SCHMALE ANSICHTEN — Tablet und Handy `@media (max-width: 860px)` heißt: die folgenden Regeln gelten NUR, wenn das Fenster höchstens 860 px breit ist. Sie überschreiben dann die allgemeinen Regeln von weiter oben — deshalb stehen sie am Dateiende. Die drei Stufen, von breit nach schmal: 1080 px die Randleiste links verschwindet 860 px alle zweispaltigen Bereiche werden einspaltig 560 px die Kopfzeile wird kompakter ZUM PRÜFEN: Das Browserfenster langsam schmaler ziehen — die Sprünge werden an diesen drei Breiten sichtbar. ============================================================================ */ /* Unter 1080 px ist zu wenig Platz neben dem Inhalt: die Randleiste geht. */ @media (max-width: 1080px) { .rail { display: none; } } /* Unter 980 px: die Personenfotos gehen von drei auf zwei Spalten, damit die Bilder nicht zu schmal werden. */ @media (max-width: 980px) { } /* Unter 860 px — der wichtigste Umbruch, hier wird die Seite einspaltig. */ @media (max-width: 860px) { /* Alle zweispaltigen Bereiche stehen jetzt untereinander. */ .duo, .unit { grid-template-columns: 1fr; } /* Der Textblock braucht keinen Ausgleich mehr, wenn das Foto darunter steht statt daneben. */ .duo--offset { margin-top: 32px; } /* Die absichtlich leeren

aus index.html werden ausgeblendet: einspaltig würden sie sonst als unerklärliche Lücke erscheinen. `:empty` trifft genau die Elemente ohne Inhalt. */ .duo--offset > div:empty, .duo--baseline > div:empty { display: none; } .unit { padding: 30px 0; gap: 22px; } /* RECHTSTEXTE: Auf schmalen Fenstern ist keine Randspalte für die Nummern übrig. Sie stehen deshalb ÜBER der Überschrift statt daneben, und die Einrückung des Textes entfällt. `grid-template-columns: 1fr` macht aus den zwei Spalten eine — die Nummer rutscht dadurch von selbst in die erste Zeile. */ .legal__h2, .legal__h3 { grid-template-columns: 1fr; gap: 6px 0; } .legal__num, .legal__sub { text-align: left; } .legal__body { padding-left: 0; } /* Etwas kleiner gesetzt, damit auch lange Überschriften auf dem Handy möglichst in einer Zeile bleiben. */ .legal__h2 { font-size: clamp(19px, 5.2vw, 23px); } /* Kontaktzeilen und Knopf untereinander statt nebeneinander. */ .contact { grid-template-columns: 1fr; align-items: start; } .contact__lines { grid-template-columns: 1fr; gap: 20px; } .cta { justify-self: start; } .status { right: 20px; bottom: 20px; } .foot__row { flex-direction: column; gap: 14px; } } /* Unter 560 px — Handy: die Kopfzeile wird flacher und enger gesetzt, damit vom ersten Bildschirm mehr Inhalt übrig bleibt. */ @media (max-width: 560px) { .head__inner { padding-top: 15px; padding-bottom: 15px; } .head__nav { gap: 14px; } .head__wordmark { font-size: 11px; letter-spacing: .2em; } /* Personenfotos einspaltig — zwei Spalten wären auf dem Handy zu klein, um Gesichter erkennen zu können. */ /* Die Kopfzeile ist hier flacher, deshalb genügt weniger Abstand oben. */ .band--hero { padding-top: clamp(96px, 15vh, 124px); } } /* ============================================================================ REDUZIERTE BEWEGUNG — Rücksicht auf empfindliche Nutzer Hat jemand in seinem Betriebssystem „Bewegung reduzieren“ eingeschaltet (Windows: Einstellungen → Erleichterte Bedienung · macOS: Bedienungs- hilfen → Anzeige · iOS und Android entsprechend), greifen diese Regeln automatisch. Dann entfallen das Atmen der Lichtflächen, das Pulsieren des Statuspunkts, das Einblenden beim Scrollen und alle Verschiebungen beim Überfahren. Das Gegenstück in assets/site.js schaltet zusätzlich Funkeln, Drift und Sternschnuppe ab. EINE AUSNAHME BLEIBT: der Antares-Hover im Sternenfeld. Er ist eine Reaktion auf eine Handlung des Nutzers, keine Bewegung, die von selbst geschieht — und deshalb unbedenklich. ZUM TESTEN: die Einstellung im Betriebssystem kurz einschalten und die Seite neu laden. ============================================================================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } /* springt statt zu gleiten */ .glow, .status__dot { animation: none; } /* kein Atmen, kein Pulsieren */ .js [data-reveal] { opacity: 1; transform: none; transition: none; } /* alles sofort sichtbar */ .cta:hover, .contact__item:hover { transform: none; } }