/* ═══════════════════════════════════════════════════════════════════════ vhc.de — GRUNDVORLAGE Farben, Schriften, Seitengerüst, Kopfleiste, Fußzeile, Knöpfe. Wird von JEDER Seite geladen, und zwar als erste. ═══════════════════════════════════════════════════════════════════════ ── WO STEHT WAS ─────────────────────────────────────────────────────── Bis zum 30.07. lag alles in einer einzigen style.css (1411 Zeilen) — jede Seite lud die Regeln aller anderen mit. Jetzt ist jede Seite ihr eigener Herr: grund.css diese Datei: was jede Seite hat rechtstext.css die Kästen mit Nummernspalte. Impressum, Datenschutz UND die drei Leistungsseiten benutzen sie — geteilter Baustein, keine Doppelung. leistungsseite.css IT-Service, KI-Prozesse, Web-Systeme: Seitenmotiv, Feldfarben, Einblick, Pakete datenschutz.css nur Datenschutzseite: Raumbild, Rechteliste startseite.css nur index.php: Hero, Kacheln, Klappmenüs, Profil, Kontaktbereich kontaktformular.css das Kontaktfenster (Startseite, Impressum) ── LADEREIHENFOLGE ──────────────────────────────────────────────────── Später geladen schlägt früher geladen, sobald zwei Regeln gleich stark sind: grund.css → rechtstext.css → seitenvorlage → startseite.css `leistungsseite.css` verfeinert Kästen aus `rechtstext.css` und MUSS danach kommen. Wer eine Vorlage ergänzt, ordnet sie nach demselben Grundsatz ein: allgemein vor besonders. Gesetzt wird die Reihenfolge in der Seite selbst über $css (siehe includes/kopf.php). ── KOMMENTARE UND DER LIVEGANG ──────────────────────────────────────── Erklärungen sind erwünscht — was ein Block tut, warum er so gebaut ist und welche Stellschraube wirkt, gehört hierher. In den PHP-Seiten geht das gefahrlos, weil PHP-Kommentare den Browser nie erreichen. Eine CSS-Datei wird dagegen ausgeliefert, wie sie ist. Deshalb gilt hier: Blöcke, die mit BAUNOTIZ: beginnen, sind Entstehungsspur — frühere Werte, Messungen aus dem Bau, stillgelegte Fassungen. Sie sind im Git wertvoll, gehören aber nicht ins Netz. VOR DEM LIVEGANG: grep -rn "BAUNOTIZ" assets/ und die gefundenen Blöcke aus den ausgelieferten Dateien entfernen. Alles ohne diese Kennzeichnung bleibt: Es erklärt den Bestand, nicht den Weg dorthin. (Zweiter Livegang-Punkt, siehe .htaccess: Zwischenspeicherung von `no-cache` auf lange Haltbarkeit umstellen. Die Kennung dafür liefert asset_url() in includes/config.php bereits mit.) ═══════════════════════════════════════════════════════════════════════ */ :root { --navy-1: #0b1220; --navy-2: #0d1728; --navy-3: #080f1c; --grey: #c4cad3; --green: #22c55e; --green-h:#4ade80; /* Warmer Akzent, bisher nur im Verlauf der Impressum-Überschrift. Bewusst in der Helligkeit auf --green-h abgestimmt, damit beide Akzente auf dem dunklen Grund gleich stark wirken und keiner den anderen überstrahlt. */ --orange: #fb923c; --tx: #eef1f6; --tx-dim: #9aa5b6; --tx-dim2:#aab4c4; --ink: #0d1728; /* dunkler Text auf Grau */ --font-head: "Rajdhani", "Oswald", "Segoe UI Semibold", system-ui, sans-serif; --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", Consolas, monospace; /* Breite der Inhaltsspalte. Gilt für Kopfleiste, Swoosh, alle Abschnitte und die Fußzeile — dadurch fluchtet alles übereinander. */ --wrap: 1180px; /* Swoosh-Geometrie. Die Navigation hängt an DERSELBEN linken Bezugslinie (.mh-head), damit Navigationsende und Swooshende bei jeder Breite bündig sind. */ --sw-start: 60px; /* Einzug des Kopf-Swoosh */ --sw-width: 1000px; /* Breite des Kopf-Swoosh */ } /* Hausschriften, selbst ausgeliefert (kein fremder Anbieter — Vorgabe der Datenschutzerklärung, Abschnitt 05: alle Schriftarten kommen von diesem Server). Quelle der Dateien: zentraler Fontordner der GameZone. */ /* ── Schriften: ALLE aus dem zentralen Archiv ────────────────────────── Ein Ort für alle Auftritte (vhc/global-media/fonts/), nichts kopiert, nichts verlinkt. Der frühere eigene Ordner assets/fonts/ ist damit aufgelöst — er war eine Doppelablage derselben fünf Dateien. Eingebunden über die VOLLE ADRESSE — dieselbe lokal wie live, damit beim Livegang nichts umgestellt werden muss. Möglich ist das, weil das Archiv die Bauumgebung (vhc.local) mit freigibt. Damit der Browser Schriften von dort annimmt, braucht es beides: die Freigabe im Archiv (vhc/global-media/fonts/.htaccess) und vhc.eu unter `font-src` in der .htaccess dieser Seite. Benutzt: Rajdhani (Überschriften), IBM Plex Sans/Mono (Fließtext, Kennzeichnungen), Cabin Sketch + Poetsen One + Playwrite DE Grund (Aktionsschild). `font-display: fallback` statt `swap`: Bei `swap` zeigt der Browser sofort eine Ersatzschrift und tauscht sie später sichtbar aus — beim Neuladen blitzte dadurch kurz ein völlig anderes Schriftbild auf. `fallback` wartet kurz (rund 100 ms) und tauscht danach nur noch, wenn die Schrift schnell genug kommt. Zusammen mit dem `preconnect` in kopf.php ist der Wechsel damit praktisch unsichtbar. */ @font-face { font-family:"Rajdhani"; src:url(https://www.vhc.eu/global-media/fonts/rajdhani-v17-latin/rajdhani-v17-latin-700.woff2) format("woff2"); font-weight:700; font-display:fallback; } @font-face { font-family:"IBM Plex Sans"; src:url(https://www.vhc.eu/global-media/fonts/ibm-plex-sans-v23-latin/ibm-plex-sans-v23-latin-regular.woff2) format("woff2"); font-weight:400; font-display:fallback; } @font-face { font-family:"IBM Plex Sans"; src:url(https://www.vhc.eu/global-media/fonts/ibm-plex-sans-v23-latin/ibm-plex-sans-v23-latin-700.woff2) format("woff2"); font-weight:700; font-display:fallback; } @font-face { font-family:"IBM Plex Mono"; src:url(https://www.vhc.eu/global-media/fonts/ibm-plex-mono-v20-latin/ibm-plex-mono-v20-latin-500.woff2) format("woff2"); font-weight:500; font-display:fallback; } @font-face { font-family:"IBM Plex Mono"; src:url(https://www.vhc.eu/global-media/fonts/ibm-plex-mono-v20-latin/ibm-plex-mono-v20-latin-700.woff2) format("woff2"); font-weight:700; font-display:fallback; } @font-face { font-family:"Cabin Sketch"; src:url(https://www.vhc.eu/global-media/fonts/cabin-sketch-v23-latin/cabin-sketch-v23-latin-700.woff2) format("woff2"); font-weight:700; font-display:fallback; } @font-face { font-family:"Poetsen One"; src:url(https://www.vhc.eu/global-media/fonts/poetsen-one-v3-latin/poetsen-one-v3-latin-regular.woff2) format("woff2"); font-weight:400; font-display:fallback; } @font-face { font-family:"Playwrite DE Grund"; src:url(https://www.vhc.eu/global-media/fonts/playwrite-de-grund-v11-latin/playwrite-de-grund-v11-latin-regular.woff2) format("woff2"); font-weight:400; font-display:fallback; } /* ═══════════════════════════════════════════════════════════════════════ GRUNDGERÜST ═══════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } /* EINE Regel für den Seitenkörper — vorher standen die Angaben an zwei Stellen der Datei verteilt (Grundregel oben, `position: relative` 850 Zeilen weiter unten als Nachtrag zum Bodenbild). Getrennt zu stehen gab ihnen keine andere Wirkung, machte aber jede Änderung zur Suche. Die drei Bestandteile und wofür sie da sind: 1. Aussehen — Schrift, Farbe, Grundton der Seite. 2. Spalte über die volle Fensterhöhe: zusammen mit `margin-top: auto` an der Fußzeile drückt das den Fuß nach unten, SOBALD der Inhalt das Fenster nicht füllt. Ohne diese Regel endete die Seite mitten im Fenster — gemessen auf der IT-Seite bei 1400 px Fensterhöhe 207 px Leerraum UNTER dem Fuß, während es bei 1000 px passte. Der Fuß „hing in der Luft", je nach Fenstergröße. 3. Bezugsrahmen für das Bodenbild, das am unteren SEITENrand klebt (siehe `.bodenbild` weiter unten). */ body { margin: 0; font-family: var(--font-sans); font-size: 17px; line-height: 1.65; color: var(--tx); background: var(--navy-3); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; display: flex; flex-direction: column; position: relative; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3 { margin: 0; line-height: 1.1; } p { margin: 0; } /* Die Inhaltsspalte. Trägt jede Sektion, die Kopfleiste und die Fußzeile — deshalb fluchtet alles miteinander. */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(20px, 5vw, 44px); } /* ═══════════════════════════════════════════════════════════════════════ HINTERGRUND — ganzflächiges Netzwerk ═══════════════════════════════════════════════════════════════════════ Fest am Fenster statt im Kopfbereich: Der Hintergrund soll EIN durchgehendes Feld hinter der ganzen Seite sein und nicht pro Abschnitt neu ansetzen. Stapelung von unten nach oben: Grundton des Körpers (--navy-3) .net-bg Ebene 0 Verlauf + Punktenetz + Schimmer Bildebene Ebene 0 Boden-, Raum- oder Seitenmotiv Inhalt Ebene 1 Die Bildebene liegt auf DERSELBEN Ebenennummer wie `.net-bg` — welche oben liegt, entscheidet allein die Reihenfolge im Markup (siehe includes/kopf.php). Der Inhalt braucht seine Ebene ausdrücklich, sonst verschwindet er hinter der festen Fläche. Weil diese Ebene den Hintergrund trägt, sind alle Abschnitte darüber durchsichtig (siehe `.section-dark`). */ .net-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: radial-gradient(120% 80% at 50% -10%, #14203050 0%, transparent 60%), linear-gradient(180deg, #0b1119 0%, #0e1622 100%); } .net-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* Der Schimmer trägt die Fläche ALLEIN, wenn das Punktenetz ausfällt — kein JavaScript, reduzierte Bewegung, oder Seite ohne Canvas. Deshalb ist er kein Beiwerk, sondern die Rückfallebene. */ .net-aurora { position: absolute; inset: 0; background: radial-gradient(60% 50% at 78% 22%, rgba(34,197,94,.16), transparent 60%), radial-gradient(55% 45% at 12% 78%, rgba(120,150,180,.14), transparent 62%); } /* Inhalt über die Hintergrundebenen heben. */ .hero-card, .section, .site-footer { position: relative; z-index: 1; } /* ── Bodenbild ───────────────────────────────────────────────────────── Motiv am unteren Rand, das nach oben ausblendet. Zwei Verankerungen: .bodenbild am unteren SEITENrand (Impressum). Es klebt ans Dokumentende, der Inhalt liegt darauf. .bodenbild--fest am unteren FENSTERrand (Startseite). Nötig wegen der Seitenlänge: gemessen 4286 px, wovon das Bild 651 px deckt — also 15 %, ganz unten. Fest am Fenster liegt es wie ein Horizont immer im Blick, und der Inhalt zieht darüber hinweg. Der Fuß darf davon NICHT wachsen: Das Bild ist absolut positioniert und damit aus dem Textfluss genommen, es trägt keine eigene Höhe bei. Die Ausblendung nach oben ist eine Maske, kein daraufgelegter Verlauf: Eine Maske senkt die Deckkraft des Elements selbst, deshalb bleibt das Netzwerk im ausgeblendeten Bereich sichtbar. Ein Farbverlauf darüber würde es zudecken. */ .bodenbild { position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; pointer-events: none; } .bodenbild--fest { position: fixed; } /* Grundfassung: Höhe folgt dem Bild, kein Beschnitt. `brightness` und NICHT `opacity` zum Abdunkeln — Deckkraft würde das Bild mit dem Netzwerk dahinter verrechnen und es fahl statt dunkel machen. Stellschraube: kleiner = dunkler. HINWEIS für künftige Bildwechsel: Ob die Maske gebraucht wird, hängt an der Datei. Bringt sie einen eigenen Alphakanal mit (gestalteter Verlauf), muss die Maske abgeschaltet werden — sonst blendet es doppelt aus: .bodenbild--fest img { -webkit-mask-image: none; mask-image: none; } Die aktuellen Bilder sind reines RGB ohne Alphakanal. */ .bodenbild img { display: block; width: 100%; height: auto; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 46%); mask-image: linear-gradient(to bottom, transparent 0%, #000 46%); filter: brightness(.85); } /* Die feste Fassung liegt großflächig im Blick und ist deshalb stärker zurückgenommen. Zwei getrennte Stellschrauben, bewusst nicht in einer verrechnet: `opacity` regelt, WIE VIEL vom Netzwerk dahinter durchkommt, `brightness`, wie hell das Bild selbst ist. Diese Regel steht NACH der Grundregel und gewinnt dadurch bei gleicher Stärke. Früher war sie als `.bodenbild.bodenbild--fest img` geschrieben — eine doppelt genannte Klasse, nur um die Reihenfolge zu übertrumpfen, weil die Grundregel damals weiter unten stand. Mit der richtigen Reihenfolge braucht es den Kunstgriff nicht. */ .bodenbild--fest img { opacity: .30; filter: brightness(.55); } /* ═══════════════════════════════════════════════════════════════════════ KNÖPFE ═══════════════════════════════════════════════════════════════════════ Bausteine: `.btn` trägt die Form, dazu genau eine Farbfassung (`.btn-primary` gefüllt / `.btn-ghost` umrandet) und wahlweise `.btn-lg` für die große Größe. DIE INNENABSTÄNDE STEHEN IN VARIABLEN. Grund ist `.btn-formular`: Dieser Knopf hat einen 2 px starken Rand statt der üblichen 1,5 px, und dieser halbe Punkt muss vom Innenabstand abgehen — sonst wäre er höher als der gefüllte Knopf daneben, weil der Rahmen zum Außenmaß addiert. Der Ausgleich hängt damit an der GRÖSSE, nicht am Knopf. Früher stand dafür eine zweite Regel `.btn-lg.btn-formular` in der Datei, deren einziger Zweck war, die erste zu schlagen. Über die Variablen rechnet sich der Ausgleich für jede Größe von selbst — und für eine künftige dritte Größe ebenfalls, ohne weitere Regel. */ .btn { --btn-py: 14px; --btn-px: 28px; display: inline-flex; align-items: center; justify-content: center; padding: var(--btn-py) var(--btn-px); font-family: var(--font-sans); font-size: 16px; font-weight: 700; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease; } .btn:hover { transform: translateY(-2px); } .btn-primary { background: var(--green); color: #04160b; box-shadow: 0 8px 22px rgba(34,197,94,.28); } .btn-primary:hover { background: #3ad46f; } .btn-ghost { background: transparent; color: var(--tx); border-color: rgba(154,165,182,.35); } .btn-ghost:hover { border-color: var(--green); color: var(--green-h); } .btn-lg { --btn-py: 17px; --btn-px: 40px; font-size: 18px; font-family: var(--font-mono); } /* Der Knopf, der das Kontaktfenster öffnet: leicht grün hinterlegt — deutlich schwächer als der gefüllte Mailknopf daneben —, dafür mit kräftigem Rand in DERSELBEN Farbe wie dieser. Bewusst eine eigene Klasse statt einer Änderung an `.btn-ghost`: Die umrandeten Knöpfe tragen auch „Den Aufbau ansehen" und „Zurück zur Übersicht" auf den Leistungsseiten, die unverändert bleiben sollen. */ .btn-formular { background: rgba(34,197,94,.13); border-color: var(--green); border-width: 2px; padding: calc(var(--btn-py) - 0.5px) calc(var(--btn-px) - 0.5px); } .btn-formular:hover { background: rgba(34,197,94,.22); border-color: var(--green-h); color: var(--tx); } /* ═══════════════════════════════════════════════════════════════════════ KOPFLEISTE ═══════════════════════════════════════════════════════════════════════ Markup in includes/kopf.php. Aufbau: ein Rahmen ohne Rundung über die volle Breite, darin die Zeile mit Logo und Navigation, darunter der Swoosh. */ .hero-card { margin: 0; max-width: 100%; border-radius: 0; overflow: hidden; } /* Gleichmäßiger Schleier über dem Netzwerk, mit HARTER Kante zum Bereich darunter — kein Ausblenden. Der Schleier läuft gegen SCHWARZ, nicht gegen das Navy der Palette: #080f1c ist praktisch so dunkel wie der Grund darunter (rund 13/22/31), damit gemischt ergab sich nachgemessen nur 20,5 → 17,5 an Helligkeit, also gar keine sichtbare Wirkung. Gegen Schwarz dunkelt derselbe Alphawert echt ab. Stellschraube: der Alphawert, kleiner = heller. */ .mh-grey { background: rgba(0,0,0,.28); /* Höhe knapp gehalten — gekürzt wurde AUSSCHLIESSLICH der Leerraum, der Inhalt blieb unangetastet (Logo 118 px, Navigation und Swoosh 58 px). Kein seitlicher Abstand: Der Inhalt sitzt in der zentrierten Spalte. */ padding: 24px 0 28px; } /* Endet exakt am Swooshende, dadurch ist die Navigation (space-between) bündig damit — unabhängig von der Fensterbreite, weil beide an derselben linken Bezugslinie hängen. */ .mh-head { display: flex; align-items: center; justify-content: space-between; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(20px, 5vw, 44px); } .brand { display: inline-flex; align-items: center; gap: 24px; } /* Rahmen in Silber (--grey) statt Weiß: Weiß stach auf dem dunklen Grund als hellster Punkt der ganzen Seite hervor. --grey ist die Palettenfarbe, kein neuer Sonderwert. Dieselbe Machart trägt das Logo im Profilbereich der Startseite, dort mitskaliert. */ .brand-logo { width: 118px; height: 118px; border-radius: 24px; border: 3px solid var(--grey); box-shadow: 0 12px 30px rgba(8,15,28,.30); } /* Firmenname in derselben Silberfarbe wie der Logorahmen — kein zweiter Sonderwert. */ .brand-word { font-family: var(--font-sans); font-weight: 700; font-size: clamp(22px, 2.4vw, 31px); line-height: 1.14; color: var(--grey); white-space: nowrap; letter-spacing: -.01em; } .mh-nav { display: flex; align-items: center; gap: 30px; } .mh-nav a { font-weight: 600; font-size: 17px; color: var(--tx-dim2); transition: color .18s ease; } .mh-nav a:hover { color: var(--green-h); } /* Der Kontaktpunkt ist ein gefülltes Feld im Grünakzent mit dunkler Schrift — auf dunklem Grund verschwände ein dunkles Feld. */ .mh-nav .nav-cta { background: var(--green); color: #04160b; padding: 11px 22px; border-radius: 999px; } .mh-nav .nav-cta:hover { background: var(--green-h); color: #04160b; } .mh-swoosh { margin-top: 10px; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(20px, 5vw, 44px); overflow: visible; } /* Feste flache Höhe mit `object-fit: fill` — ohne das entsteht ein Kasten um den Glanz herum. Die Dämpfung der Deckkraft betrifft NUR diesen Swoosh, nicht den Akzent unter „arbeitet." auf der Startseite: Der Glanz steckt im Bild selbst, gemessen sind nur rund 6 % der Bildpunkte der kräftige Kern und rund 35 % ein weicher Hof mit Alpha 10 bis 160. Genau dieser Hof blüht auf dunklem Grund auf. Die Deckkraft trifft ihn überproportional: Der schwache Hof fällt unter die Wahrnehmungsschwelle, der Kern bleibt als Linie stehen. EINE Stellschraube — kleiner = weniger Glanz. */ .swoosh-img { display: block; margin-left: 60px; width: calc(100% - 60px); height: 58px; object-fit: fill; transform: scaleX(-1); pointer-events: none; opacity: .7; } /* ═══════════════════════════════════════════════════════════════════════ ABSCHNITTE ═══════════════════════════════════════════════════════════════════════ Jede Seite besteht aus `
`-Blöcken. Durchsichtig, weil der Hintergrund von `.net-bg` und der Bildebene getragen wird — ein eigener Grund würde beide zudecken. */ .section { padding: clamp(70px, 9vw, 116px) 0; position: relative; } .section-dark { background: transparent; } /* Kleine Versalienzeile über einer Überschrift. Steht auf der Startseite und im Einblick der KI-Seite, deshalb hier und nicht in einer der beiden Seitenvorlagen. */ .section-kicker { font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: .18em; color: var(--green-h); margin: 0 0 16px; } /* ── Erstgespräch ────────────────────────────────────────────────────── Derselbe Kasten auf der Startseite und auf allen drei Leistungsseiten, Wortlaut überall gleich (Vorgabe der Spec). Der letzte Satz — „Was nicht passt, sage ich Ihnen auch." — bleibt stehen: Er unterscheidet das Gespräch von einem Verkaufstermin. */ .erstgespraech { margin-top: 40px; padding: 22px 26px; border: 1px solid rgba(34,197,94,.30); border-radius: 14px; background: rgba(34,197,94,.06); } .erstgespraech p { color: var(--tx-dim2); font-size: 16.5px; } .erstgespraech strong { color: var(--green-h); } /* ── Rückmeldung nach dem Kopieren ───────────────────────────────────── Gehört zum Mailknopf (Startseite und Impressum). Sie belegt ihren Platz dauerhaft und wechselt nur die Sichtbarkeit — sonst spränge der Abschnitt bei jedem Klick um eine Zeilenhöhe. */ .kopier-hinweis { min-height: 24px; margin-top: 12px; font-family: var(--font-mono); font-size: 14px; letter-spacing: .04em; color: var(--green-h); opacity: 0; transition: opacity .2s ease; } .kopier-hinweis.sichtbar { opacity: 1; } /* Fassung für die Adresszeilen im Impressum: steht NEBEN der Adresse und belegt keinen eigenen Platz. Als eigene Zeile hielt sie dort dauerhaft rund 31 px frei und verschob damit den ganzen Kontaktblock. */ .kopier-hinweis--inline { display: inline; min-height: 0; margin: 0 0 0 12px; font-size: 13px; white-space: nowrap; } /* Scheitert das Kopieren (ältere Browser ohne Zugriff auf die Zwischenablage), wird die Zeile zur Notlösung: Sie zeigt die Adresse zum Abschreiben — dann aber in normaler Textfarbe statt im Bestätigungsgrün. */ .kopier-hinweis.fehlschlag { color: var(--tx-dim2); } /* ═══════════════════════════════════════════════════════════════════════ FUSSZEILE ═══════════════════════════════════════════════════════════════════════ `margin-top: auto` schiebt sie an den unteren Rand, wenn der Inhalt das Fenster nicht füllt — das Gegenstück zur Spalte am Seitenkörper. Bei langem Inhalt steht sie wie gewohnt direkt darunter. */ .site-footer { background: transparent; color: var(--tx-dim2); padding: 30px 0; margin-top: auto; } /* Fassung auf Bildgrund: Alle Seiten tragen sie, weil überall ein Motiv dahinterliegt. Der Schleier läuft nur nach OBEN aus (keine Kante zum Abschnitt darüber) und bleibt zur Unterkante hin dunkel — dort steht die Schrift, und gemessen lagen die Helligkeitsspitzen des Bildes dahinter bei 148 bis 241 bei einer Schriftfarbe von 141. Ohne ruhigen Grund ist das nicht lesbar. Der Schleier blendet früh ein (14 %): Begann er erst auf Höhe der Schrift, wirkte sie an dessen Oberkante angeschlagen statt mittig — obwohl sie geometrisch exakt zentriert war (40 px Luft oben wie unten). Das verschobene Polster hält die Gesamthöhe der Grundregel, die Zeile sitzt nur 8 px tiefer. */ .site-footer.site-footer--bild { padding-top: 38px; padding-bottom: 22px; background: linear-gradient(to bottom, rgba(8,15,28,0) 0%, rgba(8,15,28,.70) 14%, rgba(8,15,28,.74) 100%); } .footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; } .footer-brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; color: var(--tx); font-size: 15px; } .footer-brand img { width: 34px; height: 34px; } .footer-links { display: flex; gap: 24px; } .footer-links a { font-size: 14.5px; color: var(--tx-dim); transition: color .18s ease; } .footer-links a:hover { color: var(--green-h); } /* Verweis auf die Seite, auf der man schon steht: bleibt sichtbar, ist aber kein Link mehr (im Markup ein , siehe includes/fuss.php). */ .footer-links .footer-aktuell { font-size: 14.5px; color: var(--tx-dim); opacity: .55; cursor: default; } .footer-copy { font-size: 13.5px; color: #7e8fa0; font-family: var(--font-mono); font-weight: 500; } /* ═══════════════════════════════════════════════════════════════════════ EINBLENDEN BEIM SCROLLEN ═══════════════════════════════════════════════════════════════════════ Ein Block mit `reveal` startet unsichtbar und zieht auf, sobald er ins Bild kommt. Geschaltet von assets/js/einblenden.js — ohne JavaScript bleibt er sichtbar, weil das Skript die Klasse dann sofort setzt. */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; } .reveal.in { opacity: 1; transform: none; } /* ═══════════════════════════════════════════════════════════════════════ SCHMALE FENSTER ═══════════════════════════════════════════════════════════════════════ Nur die Anpassungen der Bausteine DIESER Datei. Was zu einer Seite gehört, steht in deren eigener Vorlage — dort jeweils am Ende. Alle Haltepunkte sind `max-width`, die Seite wird also nach unten angepasst. Eine Fassung für sehr breite Schirme gibt es noch nicht (offener Punkt, siehe docs/todo.md #104). */ @media (max-width: 1000px) { .mh-nav { margin-right: 0; } .mh-swoosh { padding-right: 0; } } @media (max-width: 760px) { .mh-head { flex-wrap: wrap; gap: 18px; } .brand-logo { width: 92px; height: 92px; } .swoosh-img { margin-left: 0; width: 100%; height: 40px; } .erstgespraech { max-width: 460px; margin-inline: auto; } } @media (max-width: 560px) { /* Unter 560 px bleibt nur der Kontaktknopf stehen — vier Punkte nebeneinander passen dort nicht mehr neben das Logo. */ .mh-nav a:not(.nav-cta) { display: none; } } /* Reduzierte Bewegung: Der Besucher hat im Betriebssystem angegeben, dass Animationen ihn stören. Dann steht alles still, und `.reveal` ist von vornherein sichtbar. Gilt für die ganze Seite, deshalb hier. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } .reveal { opacity: 1; transform: none; } } /* ═══════════════════════════════════════════════════════════════════════ BAUNOTIZ: STILLGELEGTE FASSUNGEN UND FRÜHERE WERTE Vor dem Livegang entfernen (siehe Kopf dieser Datei). ═══════════════════════════════════════════════════════════════════════ ── Bildknöpfe in der Navigation ────────────────────────────────────── Fassung mit Grafiken statt Textlinks. Zurückgebaut, weil es für „Profil" keinen Knopf gibt und zwei Bilder mit einem Textlink dazwischen uneinheitlich aussahen. Kein Polster und kein Grund — der Knopf bringt seine Form selbst mit, ein Feld darunter wäre ein zweiter Rahmen. .mh-nav .nav-bild { padding: 0; background: none; display: inline-flex; } .mh-nav .nav-bild img { display: block; height: 46px; width: auto; transition: filter .2s ease, transform .2s ease; } .mh-nav .nav-bild:hover img { filter: brightness(1.12); transform: translateY(-1px); } ── Frühere Werte aus Entwurf 11 (für den Rückbau aufbewahrt) ───────── Kopfblock mit eigenem Verlauf, bevor er seinen Hintergrund an .net-bg abgab; der Grau-nach-Dunkel-Übergang hatte nur den Zweck, den grauen Kopf an die Dunkelzone anzuschließen: .mh-grey { background: linear-gradient(180deg, #b6bdc9 0%, #b5bcc8 94%, #8b94a4 97%, #454d5e 99%, #0a1120 100%); padding: 40px 0 74px; } Blockhöhe damals 300 px Kopf auf hellem Grund (Logo-Rahmen weiß, Schrift dunkel, dunkles Kontaktfeld): .brand-logo { border: 4px solid #fff; } .brand-word { color: var(--ink); } .mh-nav a { color: #26313f; } .mh-nav .nav-cta{ background: var(--navy-2); color: #fff; } .mh-nav .nav-cta:hover { background: var(--green); } Abschnitte mit eigenem Punktraster und deckender Fläche, bevor der Netzwerkgrund sie ersetzte: .section-dark { background: radial-gradient(circle at 1px 1px, rgba(148,163,184,.08) 1px, transparent 0), #0b1220; background-size: 34px 34px, auto; } Fußzeile mit eigenem Grund und höherem Polster (Bandhöhe 114 px): .site-footer { background: radial-gradient(circle at 1px 1px, rgba(148,163,184,.08) 1px, transparent 0), #0b1220; padding: 40px 0; } ── Dämpfungsschleier, ungenutzt ────────────────────────────────────── Seit dem Wechsel von „Schleier" auf „ersetzen" liegen die Dunkelzonen durchsichtig über dem Netzwerkgrund, statt ihn zu überdecken: --veil: rgba(11, 18, 32, .62); ── Ein Pflaster, das wieder entfernt wurde ─────────────────────────── Für Seiten mit Seitenmotiv gab es einmal einen kräftigeren Fußschleier über `.seitenbild ~ .site-footer`. Er kurierte das Symptom einer Fehldiagnose: Die Ursache war nicht der Schleier, sondern der fehlende Halt des Fußes bei kurzem Inhalt — behoben im Grundgerüst (Spalte am Körper, `margin-top: auto` am Fuß) und damit für JEDE Seite gleich. Merksatz aus dem Anlass: nicht überall ein neues Pflaster aufkleben, nicht bei jeder Seite das Rad neu erfinden. ═══════════════════════════════════════════════════════════════════════ */