/* ============================================================================ Gemeinsames Aussehen aller Kunden-Vorlagen. Bewusst OHNE Canvas-Effekte: die gehoeren zur Portfolioseite und waeren fuer eine Arztpraxis fehl am Platz. Hier zaehlt Ruhe, Lesbarkeit und dass der Besucher schnell findet, was er sucht. Farben kommen aus CSS-Variablen. Das Adminpanel setzt --accent ueber site.config.json -> design.akzent; alles andere folgt daraus. ========================================================================= */ :root{ --bg:#EFF2ED; --bg-warm:#E7EBE1; --surface:#FBFAF7; --ink:#1F3B33; --sub:#5A6E66; --accent:#C98F65; --line:rgba(31,59,51,0.14); --gutter:32px; --ecken:0px; /* Zweite Zierfarbe - fuer Verlaeufe, Schriftzuege und alles, was aus einer Farbe in eine andere laeuft. OHNE eigene Angabe ist sie die Zierfarbe selbst; ein Verlauf von Rot nach Rot ist einfach eine rote Flaeche. Deshalb muss kein Bauteil zwei Faelle kennen: es rechnet immer mit --accent-2 und bekommt ohne Zutun das Richtige. */ --accent-2:var(--akzent-zwei, var(--accent)); /* --- Farbe des Nebels --- Zwei Toene, beide einstellbar (design.nebelTon, design.nebelKernTon). Ohne Angabe folgt der Nebel der Zierfarbe - eine Seite, deren Rauch eine andere Farbe hat als ihr Licht, sieht nach Versehen aus. Der KERN ist die hellere Mitte einer Schwade. Er ist der Grund, warum Rauch nach beleuchtetem Rauch aussieht und nicht nach eingefaerbter Watte - aber er ist auch die Stelle, an der es schnell milchig wird. Deshalb nur 18 % Weiss in der Vorgabe und ein eigener Regler daneben: wer es rauchiger will, dreht ihn zur Zierfarbe hin. Die Deckkraft steckt hier drin und nicht in der Farbe selbst: der Farbwaehler im Panel liefert nur einen Farbwert ohne Durchsichtigkeit. */ --nebel-farbe:color-mix(in srgb, var(--nebel-ton, var(--accent)) 60%, transparent); --nebel-kern:color-mix(in srgb, var(--nebel-kern-ton, color-mix(in srgb, var(--nebel-ton, var(--accent)) 82%, #fff)) 45%, transparent); /* Wie stark alles leuchtet, als FAKTOR (0 = gar nicht, 1 = wie entworfen). Gesetzt vom Loader aus design.leuchtkraft. Jede Schein-Regel multipliziert ihre eigene Deckkraft damit - so bleibt das Verhaeltnis der Bauteile zueinander erhalten, egal wie hell es insgesamt gedreht wird. */ --leuchtkraft:1; /* Schriften. Der Loader ueberschreibt diese Werte, wenn im Adminpanel eine Schrift aus shared/fonts/ gewaehlt wurde - sonst gilt genau das, was hier steht. Die Ersatzangaben dahinter greifen, solange die Schriftdatei noch laedt oder fehlt; die Seite ist damit nie ohne Schrift. */ --schrift-text:'Public Sans', system-ui, sans-serif; --schrift-ueberschrift:'Fraunces', Georgia, serif; --schrift-mono:'IBM Plex Mono', ui-monospace, monospace; /* Leuchtender Rand. Im Hellen ein normaler Schatten, im Dunklen der Schein um eine Kante herum. Steht hier und nicht in site.css, weil Karten, Knoepfe und Bilder ihn gemeinsam benutzen sollen - eine Website, in der jedes Bauteil anders leuchtet, sieht nicht nach einer Website aus. */ --leuchten:0 6px 20px rgba(31,59,51,.08); --fehler:#B4472F; } /* --------------------------------------------------------------------------- Dunkle Fassung. Gesetzt wird sie als Attribut am durch erscheinung() im loader.js, Quelle ist site.config.json -> design.helligkeit. WARUM EIN ZWEITER TOKENSATZ UND NICHT EINE DUNKLE ZIERFARBE: Eine helle Seite mit dunkler Zierfarbe ist keine dunkle Seite. Umgekehrt muesste jede dunkle Vorlage sonst ein Dutzend Variablen einzeln neu setzen - und die naechste wieder, mit leicht anderen Werten. Dann leuchtet jede Seite anders und keine sieht gewollt aus. Es sind dieselben Variablennamen wie oben. Kein einziges Bauteil weiter unten in dieser Datei muss davon wissen; wer hier neue Regeln schreibt, nimmt einfach var(--bg) und bekommt beides geschenkt. Die Zierfarbe (--accent) steht bewusst NICHT hier: sie kommt aus dem Adminpanel und ist die eine Farbe, die der Betreiber selbst waehlt. --------------------------------------------------------------------------- */ :root[data-helligkeit="dunkel"]{ /* Der Grundton ist einstellbar (design.grund) - nicht jede dunkle Seite ist schwarz, manche ist tiefblau oder braun. Ohne Angabe bleibt es beim bisherigen Fast-Schwarz. */ --bg:var(--grund, #0B0B0E); /* Nur eine Spur heller als --bg. Zwei deutlich verschiedene Dunkeltoene lesen sich als Fehler, nicht als Gliederung. AUS --bg gerechnet, nicht danebengeschrieben: sonst bliebe die Seite grau, sobald jemand den Grundton auf Blau stellt. */ --bg-warm:color-mix(in srgb, var(--bg) 96%, #fff); --surface:color-mix(in srgb, var(--bg) 93%, #fff); --ink:#F2F0EF; --sub:#A8A4A6; --line:rgba(255,255,255,0.13); --leuchten:0 0 26px rgba(0,0,0,.55); --fehler:#FF8A6E; } /* Bilder und Videos wirken auf schwarzem Grund heller als sie sind - das Auge hat keinen hellen Bezugspunkt mehr. Eine Spur zurueckgenommen sitzen sie ruhiger in der Seite. */ :root[data-helligkeit="dunkel"] img, :root[data-helligkeit="dunkel"] video{filter:brightness(.94);} *{box-sizing:border-box; margin:0; padding:0;} html{ scroll-behavior:smooth; /* BEIM SPRINGEN OBEN PLATZ LASSEN FUER DIE MITLAUFENDE KOPFZEILE. Ohne das schiebt der Browser die Oberkante des Ziels an die Oberkante des Fensters, und dort steht die Kopfzeile: Beschriftung und Ueberschrift des Abschnitts liegen dahinter. Die 14 Pixel obendrauf sind Luft, damit das Ziel nicht auf Kante klebt. Die Hoehe misst ui.js (kopfPlatz) und schreibt sie nach --kopfhoehe. Sie steht auf 0, sobald der Kopf nicht mehr klebt - dann verdeckt er nichts, und ein freigehaltener Streifen waere eine Luecke. Der Ausweichwert gilt nur fuer die Zeitspanne vor der ersten Messung. */ scroll-padding-top:calc(var(--kopfhoehe, 76px) + 14px); } /* ---------- Der Ladeschirm ---------- Zwischen "HTML ist da" und "loader.js hat die Abschnitte gefuellt" steht in der Seite nur das Geruest: Ueberschriften ohne Inhalt, leere Kaesten, Platzhalter. Beim Neuladen war das einen Wimpernschlag lang zu sehen. Ein Versuch, nur "main" zu verbergen, reichte nicht: Kopf, Fuss und die leeren Baender blieben sichtbar, und man sah weiterhin eine halbfertige Seite. Jetzt deckt ein Schirm ALLES ab, und darauf steht das Zeichen der Marke - dieselbe Ansicht, mit der die Seite gleich anfaengt, statt eines Zwischenzustands. Der Schirm steht fest im HTML und nicht in JavaScript: er soll genau in der Zeitspanne da sein, in der JavaScript noch nicht gelaufen ist. DIE SELBSTBEFREIUNG IST DER WICHTIGE TEIL: die Animation blendet ihn nach 1,8 Sekunden auch dann weg, wenn "bereit" nie kommt - bei einem Fehler im Ladeweg, abgeschaltetem JavaScript oder einer content.json, die nicht antwortet. Ein Schirm, der in diesen Faellen liegenbliebe, waere eine Seite, die es gar nicht mehr gibt. */ .ladeschirm{ position:fixed; inset:0; z-index:9999; display:grid; place-items:center; background:var(--bg); animation:ladeschirmWeg .45s ease 1.8s both; } .ladeschirm img{ width:clamp(84px, 12vw, 150px); height:auto; /* Ein ruhiges Atmen. Kein Kreisel: das Zeichen IST die Marke, und ein rotierendes Logo sieht aus wie ein Fehler, der behoben wird. */ animation:ladeschirmAtem 1.6s ease-in-out infinite; } /* Fertig - der Schirm geht weg. NICHT ueber dieselbe Animation: eine laufende Animation wird nicht neu gestartet, nur weil sich Dauer oder Verzoegerung aendern - der Schirm blieb dadurch stehen, obwohl "bereit" gesetzt war. Und ein Ausblenden, das an einer Animation haengt, bleibt haengen, sobald der Browser Animationen anhaelt (Hintergrundtab, Sparmodus). Deshalb hier ein schlichter Endzustand mit Ueberblendung. Faellt auch die aus, ist der Schirm eben sofort weg - das ist der harmlose Fall. visibility wird verzoegert geschaltet, damit die Ueberblendung noch zu sehen ist, bevor das Element aus dem Weg geht. */ :root.bereit .ladeschirm{ animation:none; opacity:0; visibility:hidden; transition:opacity .3s ease, visibility 0s linear .3s; } @keyframes ladeschirmWeg{ to{ opacity:0; visibility:hidden; } } @keyframes ladeschirmAtem{ 0%,100%{ opacity:.55; transform:scale(.97); } 50% { opacity:1; transform:scale(1); } } @media(prefers-reduced-motion: reduce){ .ladeschirm img{ animation:none; } .ladeschirm{ animation-duration:.01s; } } body{ background:var(--bg); color:var(--ink); font-family:var(--schrift-text); line-height:1.65; -webkit-font-smoothing:antialiased; } h1,h2,h3{font-family:var(--schrift-ueberschrift); font-weight:500; letter-spacing:-0.01em;} a{color:inherit;} img,video{max-width:100%;} @media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important; transition-duration:.001ms !important;} } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; } /* Icons aus sections.js. Die Groesse haengt an der Schriftgroesse ihrer Umgebung, nicht an einer festen Pixelzahl: ein Icon neben einer Ueberschrift soll mitwachsen, eines in der Fusszeile klein bleiben. vertical-align statt flex, damit es auch mitten im Fliesstext sitzen kann. */ .icon{width:1.35em; height:1.35em; vertical-align:-.28em; flex:none;} .wrap{max-width:1120px; margin:0 auto; padding:0 var(--gutter);} .mono{ font-family:var(--schrift-mono); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:14px; } /* Sanftes Einblenden beim Scrollen - dieselbe Klasse wie im Portfolio, damit loader.js nur einen Mechanismus kennt. */ .dg{opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .6s cubic-bezier(.2,.7,.3,1);} .dg.in{opacity:1; transform:none;} .dg-1{transition-delay:.06s;} .dg-2{transition-delay:.13s;} .dg-3{transition-delay:.2s;} .dg-4{transition-delay:.27s;} /* ---------- Kopfzeile ---------- */ header{ position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } /* Verhalten der Kopfzeile - gesetzt vom Loader aus site.config.json. Vorgabe ist "mitlaufend", also genau das bisherige Verhalten. */ :root[data-kopf="normal"] header{position:relative; z-index:50;} /* relative statt static: ohne Versatz sieht es genauso aus, verschafft dem Kopf aber eine eigene Ebene ueber den Zeichenflaechen. Mit static greift z-index nicht, und der Kopf verschwaende hinter dem Nebel. */ :root[data-kopf="versteckend"] header{transition:transform .28s ease;} :root[data-kopf="versteckend"] header.weg{transform:translateY(-100%);} @media (prefers-reduced-motion: reduce){ :root[data-kopf="versteckend"] header{transition:none;} } /* "fest" immer sichtbar, die Seite endet DARUEBER - es wird nichts dahinter gerendert. Die Hoehe misst ui.js als --fusshoehe. "mitlaufend" klebt am unteren Rand, der Inhalt scrollt dahinter durch. */ :root[data-fuss="mitlaufend"] footer{position:sticky; bottom:0; z-index:45;} :root[data-fuss="fest"] footer{ position:fixed; left:0; right:0; bottom:0; z-index:45; background:color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter:blur(12px); border-top:1px solid var(--line); } body{padding-bottom:var(--fusshoehe, 0px);} .nav{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 0;} .marke{font-family:var(--schrift-ueberschrift); font-size:1.08rem; font-weight:600;} /* Dachmarke oben, eigener Name klein darunter (loader.js, logo()). Der kleine Name traegt die Zierfarbe der Seite - das ist auf einen Blick der Unterschied zwischen den acht Unterseiten, deren Kopf sonst identisch waere. Enge Zeilen, damit die beiden ein Block bleiben und nicht wie zwei getrennte Angaben aussehen. */ /* Die Spalte ist nur so breit wie ihr breitestes Kind - der Schriftzug. align-items:flex-end schiebt den kleinen Namen dann an dessen RECHTE Kante. Ohne "width:max-content" waere die Spalte so breit wie der ganze Kopf, und "rechtsbuendig" hiesse "am Fensterrand". */ .marke-namen{ display:flex; flex-direction:column; align-items:flex-end; width:max-content; max-width:100%; line-height:1.05; min-width:0; } .marke-namen .marke{font-size:1.02rem;} /* Der Schriftzug als Bild. Die Hoehe richtet sich nach der Schriftgroesse, die er ersetzt - so bleibt der Kopf gleich hoch, egal ob dort Schrift oder Zeichnung steht. */ .marke-bild{display:block; height:1.15em; width:auto;} .marke-unter{ font-family:var(--schrift-mono); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } @media(max-width:560px){ .marke-unter{display:none;} } /* --- Der Markenname im Kopf mit wanderndem Verlauf (design.markeVerlauf) --- Die Farben sind NICHT erfunden: es sind die fuenf Stufen aus dem Schriftzug-SVG der Dachmarke (nachtundtag_Nmae_color_gradient_v4.svg), Violett ueber Magenta nach Orange. Damit steht im Kopf derselbe Verlauf wie auf dem Zeichen daneben - haette ich ihn nachempfunden, waeren es zwei aehnliche Verlaeufe, und der Unterschied faellt genau dann auf, wenn beide nebeneinanderstehen. Der Verlauf ist doppelt so breit wie die Schrift und wandert; sichtbar ist immer nur ein Ausschnitt. Deshalb wirkt es wie Licht, das ueber den Namen laeuft, und nicht wie ein Farbwechsel. background-clip:text faerbt die Buchstabenform selbst. Die Schriftfarbe muss dafuer durchsichtig sein - sonst liegt sie deckend darueber. Als EIGENE Klasse und nicht an ".marke": die vier Kundenvorlagen haben einen ruhigen Namen im Kopf, und ein wanderndes Leuchten waere dort deplatziert. */ .marke-verlauf{ background-image:linear-gradient(100deg, #8e2dff 0%, #c930ff 15%, #ff2aa8 25%, #ff3a43 35%, #ff5a1f 50%, #ff3a43 65%, #ff2aa8 75%, #c930ff 85%, #8e2dff 100%); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; animation:markeVerlauf 9s linear infinite; } @keyframes markeVerlauf{ from{ background-position:0% 50%; } to { background-position:200% 50%; } } /* Wer "Bewegung reduzieren" eingestellt hat, bekommt den Verlauf - aber stehend. Die Farbe ist die Marke, die Bewegung nur Zierde. */ @media(prefers-reduced-motion: reduce){ .marke-verlauf{ animation:none; background-position:25% 50%; } } .nav-links{display:flex; gap:24px; list-style:none; font-size:.88rem;} .nav-links a{text-decoration:none; opacity:.75; position:relative; padding-bottom:5px;} .nav-links a:hover{opacity:1; color:var(--accent);} /* Der Abschnitt, in dem der Besucher gerade steht. Gesetzt beim Scrollen von mitlesen() im loader.js. Als eigener Strich unter dem Wort und nicht als text-decoration: der laesst sich anfahren (er waechst aus der Mitte) und liegt immer auf derselben Hoehe, egal ob das Wort Unterlaengen hat. */ .nav-links a.aktiv{opacity:1; color:var(--accent);} .nav-links a::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:currentColor; transform:scaleX(0); transform-origin:center; transition:transform .25s ease; } .nav-links a.aktiv::after{transform:scaleX(1);} #mobileMenu a.aktiv{color:var(--accent);} .nav-cta{ text-decoration:none; font-size:.85rem; font-weight:600; white-space:nowrap; background:var(--ink); color:var(--bg); padding:10px 18px; border-radius:var(--ecken); } .nav-cta:hover{background:var(--accent);} @media(max-width:820px){ .nav-links{display:none;} } /* ---------- Startbereich ---------- */ .hero{padding:96px 0 72px; background:var(--bg-warm); border-bottom:1px solid var(--line);} .hero h1{font-size:clamp(2rem,4.6vw,3.2rem); line-height:1.12; max-width:20ch; margin-bottom:20px;} .hero h1 em{font-style:italic; color:var(--accent);} /* Namenszug als Bild statt als Schrift (content/schriftzug/). Die Breite ist gedeckelt, nicht die Hoehe: ein Schriftzug ist ein breites, flaches Bild, und was er an Hoehe braucht, weiss nur er selbst. */ .hero-schriftzug{margin-bottom:20px;} /* Jedes Bild sitzt in einem eigenen Kasten. Der Kasten bestimmt die Groesse, das Bild fuellt ihn aus - und der Kasten kann tragen, was ein nicht tragen kann: ein ::after fuer den wandernden Verlauf (siehe unten). */ .hero-zeichen-bild{ display:block; position:relative; line-height:0; width:100%; max-width:min(560px, 100%); } .hero-schriftzug img{display:block; width:100%; height:auto;} .hero-sub{font-size:1.08rem; color:var(--sub); max-width:56ch; margin-bottom:30px;} .hero-ctas{display:flex; gap:12px; flex-wrap:wrap;} /* Zeilenumbrueche aus der Textdatei bleiben stehen. Wer im Adminpanel im Textfeld die Eingabetaste drueckt, meint einen Umbruch - HTML wirft ihn sonst weg und macht aus vier gesetzten Zeilen einen Fliesstext, der irgendwo umbricht. Mit pre-line entscheidet der Betreiber, wo die Zeile endet, ohne HTML zu kennen. pre-LINE und nicht pre: mehrfache Leerzeichen und Einzuege bleiben zusammengefasst, sonst zoege eine versehentlich eingerueckte Zeile die Einrueckung mit auf die Seite. */ .hero-sub{white-space:pre-line;} /* --- Vollbildfoto hinter dem Startbereich --- Wird nur gebaut, wenn ein Bild da ist (sections.js). Der Startbereich behaelt seine Flaechenfarbe als Unterlage: laedt das Foto langsam oder gar nicht, steht der Text trotzdem nicht auf Weiss. Das Foto liegt VOLL BREIT, nicht im .wrap - deshalb ein eigener Kasten und nicht ein background-image am Startbereich: nur so lassen sich Verdunkelung und Nebel als eigene Schichten daruebersetzen, und nur so kann der Nebel sich bewegen, ohne das Foto mitzunehmen. */ .hero-mit-grund{position:relative; overflow:hidden;} .hero-mit-grund .wrap{position:relative; z-index:2;} /* Die ganze Hintergrundschicht - Foto, Verdunkelung und Nebel zusammen - loest sich nach unten auf. Vorher endete sie mit einer geraden Kante quer durch die Seite: der Startbereich hoerte auf, und darunter war schlagartig Schwarz. Die Verdunkelung allein reichte dagegen nicht, weil der Nebel VOR ihr liegt und sich davon nichts sagen laesst. Eine Maske ueber der ganzen Schicht wirkt dagegen auf alles darin, egal in welcher Reihenfolge es gezeichnet wird. */ .hero-grund{ position:absolute; inset:0; z-index:0; pointer-events:none; -webkit-mask-image:linear-gradient(180deg, #000 0 62%, transparent 100%); mask-image:linear-gradient(180deg, #000 0 62%, transparent 100%); } .hero-foto{ width:100%; height:100%; object-fit:cover; display:block; /* Eine Spur unscharf und weiter weg: das Foto ist Atmosphaere, nicht Inhalt. Scharf im Hintergrund konkurriert es mit dem Portrait davor. */ filter:blur(2px) saturate(1.05); transform:scale(1.06); } /* Verdunkelung. Zwei Verlaeufe uebereinander: nach UNTEN, damit das Foto in die Seitenfarbe uebergeht statt an einer Kante abzureissen - und flaechig, damit die Schrift ueberall lesbar bleibt. --hero-dunkel kommt aus design.heroVerdunkeln. */ .hero-schleier{ position:absolute; inset:0; background: /* Oben etwas dunkler, damit die Kopfzeile Halt hat. Nach UNTEN hin bewusst NICHTS mehr: das Ausklingen macht die Maske an .hero-grund. Stand hier zusaetzlich ein dunkler Verlauf, ergab das einen grauen Streifen kurz vor dem Ende - zwei Auflösungen uebereinander. */ linear-gradient(180deg, color-mix(in srgb, var(--bg) 55%, transparent) 0%, transparent 26%), color-mix(in srgb, var(--bg) calc(var(--hero-dunkel, .55) * 100%), transparent); } /* --- Nebel --- Drei weiche Schwaden, jede eine einzige radiale Flaeche. Sie wandern langsam gegeneinander; wuerde nur EINE wandern, saehe man den Weg. Die Farbe kommt aus --nebel-farbe (site.css) - hier steht nur, wie gross die Schwaden sind und wohin sie ziehen. */ /* Das Feld, in dem die Schwaden liegen. Hier passieren die zwei Dinge, die aus weichen Flecken Rauch machen: 1. RAUSCHMASKE. Ein Stueck SVG mit feTurbulence, direkt als Datenadresse eingebettet - keine Datei, kein Nachladen. Es loechert die Schwaden unregelmaessig, und weil die Maske langsam wandert, zieht das Muster durch den Rauch statt mit ihm mitzufahren. Genau das laesst es leben. 2. KANTENSCHAERFUNG. blur() macht die Raender weich, contrast() zieht sie danach wieder zusammen. Aus zwei sich beruehrenden Flecken wird dabei EINE Form mit einer geschwungenen Taille - der Uebergang, den man von Flammen und Rauchzungen kennt. Ohne den zweiten Schritt bleiben es Kreise, die einander ueberlappen. Beides sitzt am FELD und nicht an den einzelnen Schwaden: sonst bekommt jede ihr eigenes Muster, und man sieht fuenf Scheiben statt einer Wand. */ .hero-nebel-lagen{position:absolute; inset:0; opacity:var(--nebel-staerke, .4);} .hero-nebel-feld{ position:absolute; inset:-10%; /* NUR Weichzeichnen. Hier stand zusaetzlich contrast(5.5), mit der Begruendung, es ziehe die Raender wieder zusammen - das war falsch. Der CSS-Filter contrast() rechnet ausschliesslich auf Rot, Gruen und Blau und ruehrt die Deckkraft NICHT an. Er konnte also nie Kanten formen; er hat nur die helleren Stellen des Rauchs ins gesaettigte Rot gedrueckt - und damit genau das Leuchten entfernt, an dem man Rauch ueberhaupt erkennt. Auf schwarzem Grund blieb fast nichts uebrig. Die Kanten macht jetzt die Maske, dort wo die Deckkraft wohnt. */ filter:blur(8px); /* Nur die Rauschmaske. Das Ausklingen nach unten macht die Maske an .hero-grund - sie liegt ueber der ganzen Schicht und wirkt damit auch auf den Nebel. Hier stand kurz eine zweite Maskenebene dafuer; sie tat dasselbe ein zweites Mal, und der Nebel loeste sich dadurch doppelt so schnell auf wie das Foto darunter. */ -webkit-mask-image:var(--rauschen); mask-image:var(--rauschen); -webkit-mask-size:var(--masche) var(--masche); mask-size:var(--masche) var(--masche); -webkit-mask-repeat:repeat; mask-repeat:repeat; } /* Die Rauschbilder. Jedes ist ein Stueck SVG als Datenadresse - zusammen keine 700 Zeichen, also weniger als eine einzige Zeile eines Fotos. Eine Bilddatei waere hier nicht nur groesser, sondern auch schlechter: eine PNG-Kachel kachelt sichtbar, sobald man sie zweimal nebeneinander legt. stitchTiles='stitch' ist der entscheidende Zusatz. Ohne ihn rechnet feTurbulence jede Kachel fuer sich, und an jeder Kante trifft Rauschen auf fremdes Rauschen - man sieht ein Gitter. Mit "stitch" wird das Rauschfeld ueber die Kachelgrenze hinweg fortgesetzt, und die Kachel ist nahtlos. Genau dieses Gitter war im Nebel zu sehen. baseFrequency klein = grobe Wolken, gross = feiner Grus. Die drei Lagen sind absichtlich weit auseinander: grobe Ballen, mittlere Schwaden, feiner Flug. Uebereinander ergibt das die Struktur, die eine einzelne Lage nicht haben kann. */ /* Der zweite Schritt in jedem Rauschbild ist die feColorMatrix. Sie rechnet auf der DECKKRAFT (letzte Zeile: neu = 4*alt - 1.4) und ist damit das, was contrast() im CSS-Filter nicht konnte: Rauschwert unter 0.35 -> ganz durchsichtig Rauschwert ueber 0.60 -> ganz deckend dazwischen -> ein schmaler Verlauf Aus dem gleichmaessigen Grauschleier, den feTurbulence liefert, werden so ausgefranste Zungen mit klaren Raendern - Rauch statt Dunst. Die drei Lagen sind verschieden hart: grob und weich oben, fein und hart unten. */ .hero-nebel-feld[data-lage="1"]{ --rauschen:url("data:image/svg+xml;utf8,"); --masche:900px; animation:nebelZug1 71s linear infinite; } .hero-nebel-feld[data-lage="2"]{ --rauschen:url("data:image/svg+xml;utf8,"); --masche:540px; animation:nebelZug2 47s linear infinite; } .hero-nebel-feld[data-lage="3"]{ --rauschen:url("data:image/svg+xml;utf8,"); --masche:300px; opacity:.7; animation:nebelZug3 33s linear infinite; } /* Die Masken ziehen in verschiedene Richtungen und mit verschiedenem Tempo. Der Weg ist jeweils ein GANZZAHLIGES Vielfaches der Maschenweite - nur dann sitzt das Muster am Ende wieder genau auf dem Anfang und der Durchlauf springt nicht sichtbar zurueck. HIER STANDEN FESTE PIXELWERTE, UND GENAU DAS WAR DER SPRUNG. 900, 540 und 300 px passten zu den Maschenweiten der eingebauten Rauschbilder. Die mitgelieferten Texturen aus shared/nebel/ haben aber 1100, 640 und 360 px - und eine Site mit eigenen Texturen setzt wieder andere. Der Weg war damit KEIN Vielfaches der Masche mehr: am Ende jedes Durchlaufs sass das Muster ein Stueck daneben und sprang zurueck. Auf der groben Lage einmal alle 71 Sekunden, gut sichtbar. Jetzt rechnet der Weg mit var(--masche) - egal, welche Textur darunter liegt. Der Nebel laeuft damit wirklich endlos; eine Grenze gibt es nicht, die Animation wiederholt nur eine Strecke, die exakt aufgeht. */ @keyframes nebelZug1{ from{-webkit-mask-position:0 0; mask-position:0 0;} to {-webkit-mask-position:var(--masche) calc(-1 * var(--masche)); mask-position:var(--masche) calc(-1 * var(--masche));} } @keyframes nebelZug2{ from{-webkit-mask-position:0 0; mask-position:0 0;} to {-webkit-mask-position:calc(-1 * var(--masche)) calc(-2 * var(--masche)); mask-position:calc(-1 * var(--masche)) calc(-2 * var(--masche));} } @keyframes nebelZug3{ from{-webkit-mask-position:0 0; mask-position:0 0;} to {-webkit-mask-position:var(--masche) calc(-2 * var(--masche)); mask-position:var(--masche) calc(-2 * var(--masche));} } .hero-nebel{ position:absolute; border-radius:50%; /* Eine Plateaustufe vor dem Auslaufen: erst danach hat contrast() etwas zu fassen. Ein glatter Verlauf von voll nach nichts wuerde dabei nur heller, nicht kantiger. */ background:radial-gradient(closest-side, var(--nebel-kern, transparent) 0%, var(--nebel-farbe, color-mix(in srgb, var(--ink) 14%, transparent)) 34%, transparent 72%); filter:blur(18px); will-change:transform; } .hero-nebel.n1{left:-16%; bottom:-18%; width:62%; height:72%; animation:nebel1 31s ease-in-out infinite;} .hero-nebel.n2{right:-14%; bottom:-22%; width:70%; height:80%; animation:nebel2 43s ease-in-out infinite;} .hero-nebel.n3{left:26%; bottom:-28%; width:56%; height:66%; animation:nebel3 37s ease-in-out infinite;} .hero-nebel.n4{left:6%; bottom:-12%; width:44%; height:52%; animation:nebel4 25s ease-in-out infinite;} .hero-nebel.n5{right:12%; bottom:-16%; width:50%; height:58%; animation:nebel5 29s ease-in-out infinite;} .hero-nebel.n6{left:38%; bottom:-20%; width:46%; height:60%; animation:nebel2 35s ease-in-out infinite;} /* Nur verschieben, drehen und skalieren - alles drei rechnet die Grafikkarte, ohne die Seite neu zu setzen. Ein wandernder "left"-Wert wuerde bei jedem Bild das Layout neu berechnen und auf schwachen Geraeten ruckeln. Die Drehung ist der Unterschied zu vorher: eine Schwade, die nur wandert, behaelt ihre Form - eine, die sich dabei dreht, quillt. */ @keyframes nebel1{ 0%,100%{transform:translate3d(0,0,0) rotate(0deg) scale(1);} 50% {transform:translate3d(22%,-14%,0) rotate(26deg) scale(1.3);} } @keyframes nebel2{ 0%,100%{transform:translate3d(0,0,0) rotate(0deg) scale(1.12);} 50% {transform:translate3d(-26%,-18%,0) rotate(-22deg) scale(.9);} } @keyframes nebel3{ 0%,100%{transform:translate3d(-10%,4%,0) rotate(8deg) scale(1);} 50% {transform:translate3d(16%,-20%,0) rotate(-18deg) scale(1.35);} } @keyframes nebel4{ 0%,100%{transform:translate3d(6%,0,0) rotate(-12deg) scale(1.15);} 50% {transform:translate3d(-18%,-24%,0) rotate(20deg) scale(.85);} } @keyframes nebel5{ 0%,100%{transform:translate3d(0,6%,0) rotate(16deg) scale(.95);} 50% {transform:translate3d(12%,-26%,0) rotate(-10deg) scale(1.25);} } /* "Bewegung reduzieren" schaltet oben schon jede Animation auf .001ms - die Schwaden bleiben dann einfach stehen und sind trotzdem zu sehen. Genau so ist es gemeint: es geht Stimmung verloren, kein Inhalt. */ /* --- Startbereich mit Bildkarte --- Die Karte steht LINKS im Markup, aber der Text ist der Hauptinhalt: auf schmalen Schirmen bricht die Karte deshalb unter den Text, nicht darueber. Sonst muesste jeder erst an einem Foto vorbeiscrollen, um zu erfahren, wessen Foto es ist. */ .hero-mit-bild .wrap{display:flex; align-items:center; gap:clamp(24px,5vw,64px);} .hero-mit-bild .hero-text{flex:1 1 380px; min-width:0;} .hero-karte{ flex:0 0 clamp(240px,28vw,340px); order:-1; border:1px solid var(--line); border-radius:var(--ecken); background:var(--surface); box-shadow:var(--leuchten); overflow:hidden; } .hero-karte-bild{aspect-ratio:3/4; background:var(--bg-warm); display:flex; align-items:center; justify-content:center;} /* Ein Foto, das SCHON eine fertige Karte ist ("beschriftung: im-bild"). Es wird nicht in ein Seitenverhaeltnis gezwungen und nicht beschnitten: an einer gestalteten Karte ist jeder Rand Absicht. Der Kasten nimmt stattdessen die Form des Bildes an. */ .hero-karte[data-beschriftung="im-bild"] .hero-karte-bild{ aspect-ratio:auto; display:block; } .hero-karte[data-beschriftung="im-bild"] .hero-karte-bild img{ height:auto; object-fit:contain; } /* --bild-stelle kommt aus "ausschnitt:" in der meta.txt des Portraits (siehe hero() in sections.js) - dasselbe Wort wie bei den Personenkarten. Ohne Angabe bleibt es bei der Mitte. */ .hero-karte-bild img, .hero-karte-bild video{ width:100%; height:100%; object-fit:cover; object-position:var(--bild-stelle, center); } /* --- Freigestelltes Portrait auf Glas --- "freisteller: ja" in der meta.txt des Bildordners. Das Bild ist dann eine PNG-Datei ohne Hintergrund. Die Karte wird zur Scheibe: backdrop-filter nimmt, was HINTER ihr gemalt ist - also das Hintergrundfoto des Startbereichs - und zeichnet es unscharf. Deshalb funktioniert der Glaseffekt nur ueber einem Bild; auf einfarbigem Grund bleibt eine leicht getoente Flaeche uebrig, was auch nicht falsch aussieht. */ /* --- Die Scheibe hinter dem Portrait --- Art und Staerke kommen aus site.config.json (karteArt, karteStaerke) und stehen als Attribut bzw. als Variable an der Karte. EINE Rechnung fuer beide Glasarten: sie unterscheiden sich nur darin, ob zusaetzlich unscharf gezeichnet wird. Bei Staerke 0 bleibt von beiden nichts uebrig - "voll durchsichtig" braucht deshalb keinen eigenen Modus. backdrop-filter nimmt, was HINTER der Karte gemalt ist - also das Hintergrundfoto des Startbereichs. Ueber einfarbigem Grund bleibt nur die Toenung uebrig, was ebenfalls nicht falsch aussieht. */ .hero-karte[data-scheibe="milchglas"], .hero-karte[data-scheibe="klarglas"]{ background:color-mix(in srgb, var(--ink) calc(var(--scheibe-staerke, .55) * 22%), transparent); } .hero-karte[data-scheibe="milchglas"]{ backdrop-filter:blur(calc(var(--scheibe-staerke, .55) * 26px)) saturate(1.15); -webkit-backdrop-filter:blur(calc(var(--scheibe-staerke, .55) * 26px)) saturate(1.15); } .hero-karte[data-scheibe="flaeche"]{background:var(--surface);} /* DER Fehler, der die Durchsichtigkeit unbrauchbar machte: Der Bildkasten IN der Karte trug seine eigene Flaechenfarbe (--bg-warm) - eine undurchsichtige. Die Karte war also brav durchscheinend, und darin stand ein grauer Kasten, der alles verdeckte. Von aussen sah es aus, als bewirke der Regler nichts. Dasselbe gilt fuer die Namensplatte unten: sie darf nur so viel Deckung bekommen, wie zum Lesen noetig ist - und die kommt hier, nicht aus der Freisteller-Regel weiter unten. */ .hero-karte[data-scheibe="milchglas"] .hero-karte-bild, .hero-karte[data-scheibe="klarglas"] .hero-karte-bild{background:none;} /* Die Namensplatte hat einen EIGENEN Regler (--platte-staerke) und folgt nicht der Scheibe darueber. Der Grund ist inhaltlich: die Scheibe soll den Raum zeigen, die Platte soll einen Namen lesbar machen. Das sind zwei verschiedene Aufgaben, und wer die Scheibe ganz aufmacht, will deshalb noch lange keinen Namen, der im Nebel verschwindet. Vorgabe ist 100 - also deckend. Der Schatten bleibt trotzdem: er kostet nichts und traegt den Text auch dann, wenn jemand die Platte doch durchsichtig stellt. */ /* Die Farbe der Platte ist einstellbar (design.platteTon). Ohne Angabe ist es der GRUNDTON der Seite, nicht die Flaechenfarbe: --surface ist im Dunklen absichtlich eine Spur heller als der Grund - richtig fuer eine Karte, die auf der Seite liegt, falsch fuer eine Platte, die im Entwurf schwarz ist. Sie sah dadurch grau aus. */ .hero-karte[data-scheibe="milchglas"] .hero-karte-fuss, .hero-karte[data-scheibe="klarglas"] .hero-karte-fuss{ background:color-mix(in srgb, var(--platte-ton, var(--bg)) calc(var(--platte-staerke, 1) * 100%), transparent); border-top:1px solid var(--line); text-shadow:0 1px 10px var(--bg), 0 0 3px var(--bg); } /* WICHTIG ZUM VERSTAENDNIS: durchscheinen kann nur, wo KEIN Bild ist. Ein normales Foto fuellt den Bildkasten vollstaendig aus - dann bleibt von der Scheibe nur der Rand und die Namensplatte zu sehen. Erst ein freigestelltes PNG gibt die Flaeche rund um die Person frei, und dann steht der Raum des Startbereichs dahinter. */ .hero-karte-frei .hero-karte-bild{ background:none; /* Etwas hoeher als 3/4: die Person soll stehen, nicht in einem Kasten sitzen. object-position unten, damit sie auf der Fusszeile aufsetzt und nicht in der Mitte schwebt. */ aspect-ratio:4/5; align-items:flex-end; } .hero-karte-frei .hero-karte-bild img{ object-fit:contain; object-position:bottom; /* Ein Schatten unter der Person - ohne ihn klebt der Freisteller wie ein Aufkleber auf der Scheibe. */ filter:drop-shadow(0 12px 26px rgba(0,0,0,.55)); transition:filter .35s ease; } .hero-karte-frei:hover .hero-karte-bild img{ filter:drop-shadow(0 12px 26px rgba(0,0,0,.55)) drop-shadow(0 0 22px color-mix(in srgb, var(--accent) 45%, transparent)); } /* Die Namensplatte bleibt IMMER etwas gedeckt, auch wenn die Scheibe darueber auf 0 steht: sie traegt Text, und Text auf einem bewegten Foto ist nicht mehr zu lesen. Sie folgt der Staerke, aber erst ab einem Grundwert. */ /* Beim Freisteller bleibt die Unschaerfe unter der Platte - dort steht Text direkt vor dem Foto. Die Deckung kommt aus der Regel oben, damit es nur EINE Stelle gibt, an der die Staerke wirkt. */ /* Beim Freisteller bleibt die Unschaerfe unter der Platte - dort steht Text direkt vor dem Foto. Sie richtet sich nach der PLATTE, nicht nach der Scheibe: eine halb durchsichtige Platte ohne Unschaerfe waere ein Fenster auf ein scharfes Foto, und darauf liest sich kein Name. */ .hero-karte-frei[data-scheibe="milchglas"] .hero-karte-fuss{ backdrop-filter:blur(calc((1 - var(--platte-staerke, 1)) * 16px + 4px)); -webkit-backdrop-filter:blur(calc((1 - var(--platte-staerke, 1)) * 16px + 4px)); } /* Anklickbares Portrait (Kurzbiografie im Flyover). Ein