/* ========================================================================== iCOGNIZE — Landingpage Nur die Wortmarke: Bildmarke oben, Schriftzug darunter. Dunkle Flaeche, Metallverlaeufe, Schattenwurf, ein Lichtband das ueber das Logo wandert. Keine externen Ressourcen, keine Abhaengigkeiten. ========================================================================== */ :root{ --blau: #0098cc; /* Hausfarbe */ --blau-hell: #4ec0e6; --grund: #04080b; /* fast schwarz, leicht blaustichig */ --grund-2: #0a151d; --schrift: #dbe6ee; --gedaempft: #6b7c86; --linie: rgba(219,230,238,.10); --sans: "Segoe UI Variable Display","Segoe UI",-apple-system,BlinkMacSystemFont, Inter,system-ui,"Helvetica Neue",Arial,sans-serif; /* Groesse des Logos — hier stellst du sie ein. Das Logo ist jetzt annaehernd quadratisch (Verhaeltnis 0,93). */ --logo-breite: clamp(13rem, 33vw, 23rem); /* Takt des Lichtbandes und des Atmens im Hintergrund */ --glanz-dauer: 6s; /* Gesamttakt: kurzer Blitz, dann Ruhe */ --glanz-start: 1.2s; /* Vorlauf nach dem Laden */ --wasser-dauer: 7s; /* Takt der Baender auf der Wasseroberflaeche */ --atem-dauer: 22s; /* nur wirksam, wenn das Atmen aktiviert wird */ } *,*::before,*::after{ box-sizing:border-box; } /* Nur bekommt die volle Hoehe. FRUEHER STAND HIER AUCH body — das war ein Fehler, der erst mit der ersten Seite auffiel, deren Text laenger ist als der Bildschirm: eine feste Hoehe von 100% zusammen mit dem overflow-x:hidden weiter unten macht den selbst zum Rollbereich. Das Dokument bleibt dann so hoch wie das Fenster, und alles darunter — letzter Abschnitt, Schaltflaechen, Fusszeile — war schlicht nicht mehr erreichbar. body{min-height:100svh} genuegt voellig: die Seite fuellt den Bildschirm und waechst mit ihrem Inhalt. */ html{ height:100%; } html{ overflow-x:clip; /* Die Grundfarbe gehoert auch auf , nicht nur auf : beim Blaettern malt der Browser die Flaeche, bevor der Koerper steht. */ background:var(--grund); color-scheme:dark; } body{ margin:0; min-height:100svh; display:flex; flex-direction:column; font-family:var(--sans); color:var(--schrift); background:var(--grund); -webkit-font-smoothing:antialiased; /* clip statt hidden: hidden erzwingt overflow-y:auto und macht den damit zum Rollbereich — siehe oben. clip klemmt nur seitlich ab und laesst das Rollen dem Dokument. */ overflow-x:clip; } /* -------------------------------------------------------------------------- Der Raum hinter dem Logo Drei Ebenen: ein tiefer Farbverlauf, ein langsam atmender Lichtkern und eine feine Koernung. Die Koernung ist kein Bild, sondern ein im CSS erzeugtes Rauschen — sie nimmt dem Verlauf die Streifenbildung und gibt der Flaeche Textur. -------------------------------------------------------------------------- */ body::before{ content:""; position:fixed; inset:-10%; z-index:0; pointer-events:none; background: radial-gradient(46rem 34rem at 50% 40%, rgba(0,152,204,.13), transparent 70%), radial-gradient(70rem 46rem at 50% 44%, rgba(0,120,170,.06), transparent 74%), radial-gradient(30rem 22rem at 16% 96%, rgba(0,152,204,.04), transparent 70%), radial-gradient(34rem 26rem at 88% 8%, rgba(0,152,204,.035), transparent 70%), linear-gradient(175deg, var(--grund-2), var(--grund) 62%); } /* Lichtkern hinter dem Logo — bewusst STATISCH. Er hat einmal geatmet. Gemessen hat das rund ein Viertel der Bildrate gekostet, weil eine Flaeche dieser Groesse dabei in jedem Einzelbild neu gezeichnet wird. Zusammen mit dem wandernden Lichtband war die Seite auf schwaecheren Rechnern sichtbar ruckelig. Wer das Atmen zurueckhaben will: die beiden auskommentierten Zeilen aktivieren — und vorher auf einem langsamen Geraet gegenpruefen. */ .buehne::before{ content:""; position:absolute; z-index:-1; pointer-events:none; width:min(78vw, 54rem); aspect-ratio:1; border-radius:50%; background:radial-gradient(closest-side, rgba(0,152,204,.15), transparent 72%); opacity:.62; /* animation:atmen var(--atem-dauer) ease-in-out infinite alternate; */ /* will-change:opacity; */ } @keyframes atmen{ from{ opacity:.55; } to { opacity:1; } } body::after{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none; /* Kein mix-blend-mode: das Mischen der gesamten Flaeche kostet in jedem Einzelbild spuerbar Leistung. Eine niedrige Deckkraft genuegt. */ opacity:.035; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E"); /* Randabdunklung, damit die Mitte traegt */ box-shadow:inset 0 0 22rem 6rem rgba(0,0,0,.55); } /* --- Buehne -------------------------------------------------------------- */ .buehne{ position:relative; z-index:1; flex:1 1 auto; display:grid; place-items:center; padding:clamp(2rem,8vh,6rem) 1.5rem; } /* Die Spiegelung haengt aus dem Fluss heraus nach unten. Damit sie nicht an der Fusszeile klebt, verschiebt sich das Logo etwas nach oben. */ .marke{ /* Als Variable, weil der Uebergang zusaetzlich skaliert und die Verschiebung dabei erhalten bleiben muss. */ --marke-y: calc(var(--logo-breite) * -.30); transform:translateY(var(--marke-y)); } .marke{ position:relative; width:var(--logo-breite); line-height:0; /* Der Rand im viewBox des Logos, damit Spiegelung und Horizont ohne Rechnerei bündig sitzen: 70 von 942 in der Hoehe, 70 von 876 in der Breite. Bei geaenderten Logomassen hier mit anpassen. */ --rand-h: 7.429%; --rand-b: 7.989%; --inhalt-b: 84.022%; /* Abstand zwischen Logounterkante und Horizont */ --horizont: 5%; /* Luft zwischen Horizont und Beginn der Spiegelung — ohne sie klebt die Spiegelung an der Wasserlinie und wirkt angewachsen statt gespiegelt. */ --spiegel-abstand: 3.2%; /* Breite der Horizontlinie, bezogen auf die Logobreite. Der Deckel in vw weiter unten verhindert seitliches Schieben. */ --horizont-breite: 620%; /* Breite der Wasserflaeche, ebenfalls bezogen auf die Logobreite */ --wasser-breite: 220%; } /* --- Kleine Markenmarke fuer Produktseiten -------------------------------- */ /* Dieselbe Mechanik wie .marke (Wasser, Horizont, Spiegelung, Lichtband), nur mit einem Schriftzug statt der Bildmarke und deutlich kleiner. Der Inhalt fuellt hier sein eigenes viewBox randlos aus, darum kein Rand wie beim Logo. */ /* Er tritt allein ueber die GROESSE zurueck, nicht ueber die Schrift. Ein Zwischenversuch sperrte stattdessen die Buchstaben weit auseinander (letter-spacing 13 im SVG) und dimmte die Deckkraft. Das war falsch herum: gesperrt zog sich der Schriftzug ueber die ganze Breite und wurde dadurch erst recht dominant, waehrend Spiegelung, Horizont und Wasser darunter auf einen flachen Streifen zusammenschrumpften — also genau das Gegenteil des Gewollten. Eng gesetzt und klein bleibt der Effekt beisammen, und die Ueberschrift ordnet sich unter. NICHT aufsperren. */ .marke--produkt{ /* --logo-breite steht am .produktkopf, siehe dort: sie gilt fuer den Schriftzug UND die Bildmarke davor. */ /* Zurueckgenommen wird ueber die HELLIGKEIT, nicht ueber die Sperrung: der Schriftzug soll dem Wortzug "iCOGNIZE" auf der Seite davor aehneln, und der steht dort flach und grau (rgba(219,230,238,.5)). saturate/contrast nehmen dem Metall den Glanz, ohne die Mechanik anzutasten; die Deckkraft nimmt den Rest. Die Buchstaben bleiben eng gesetzt — Aufsperren macht den Schriftzug breit und damit auffaelliger, nicht ruhiger. */ opacity:.72; filter:saturate(.55) contrast(.78) brightness(1.04); --rand-h: 0%; --rand-b: 0%; --inhalt-b: 100%; /* Kein Bildzeichen ueber dem Schriftzug, das die Spiegelung nach unten druecken wuerde — der Ausgleich faellt darum deutlich kleiner aus als bei .marke. */ --marke-y: calc(var(--logo-breite) * -.12); } .marke__logo, .marke__glanz, .marke__spiegel{ display:block; width:100%; height:auto; overflow:visible; } /* Das Lichtband liegt deckungsgleich ueber dem Logo. */ .marke__glanz{ position:absolute; inset:0; height:100%; pointer-events:none; } /* --- Das Logo als Eingang ------------------------------------------------- */ /* Der Verweis umschliesst nur Logo und Lichtband. Seine Flaeche ist damit genau der Kasten des Logos — die Spiegelung im Wasser loest nichts aus. Kein position hier: die absolut gesetzten Ebenen sollen sich weiter auf .marke beziehen. */ .marke__tor{ display:block; line-height:0; cursor:pointer; text-decoration:none; -webkit-tap-highlight-color:transparent; } .marke__tor:focus-visible{ outline:2px solid rgba(120,220,255,.75); outline-offset:14px; border-radius:8px; } /* Der Schein hinter dem Logo. z-index:-1 setzt ihn hinter die Bildmarke; .marke bildet wegen seines transform den Stapelzusammenhang, weiter nach hinten als bis dorthin kann er also nicht rutschen. Es ist wieder eine weichgezeichnete Kopie des Logos — aber mit sehr viel groesseren Radien als beim ersten Versuch. Die Form ist erkennbar, die Kante nicht. Ein formloser Farbverlauf dazwischen hatte mit dem Logo nichts mehr zu tun; die enge Fassung sah aus wie ein Aufkleber. overflow:visible ist noetig — der Hof reicht weit ueber den viewBox hinaus und wuerde sonst am Rand des Logokastens abgeschnitten. will-change haelt das gefilterte Bild auf einer eigenen Ebene bereit. Ohne das rechnet der Browser die beiden Unschaerfen erst beim ersten Ueberfahren — der Schein setzte dann sichtbar verspaetet ein. */ .marke__schein{ position:absolute; inset:0; z-index:-1; width:100%; height:100%; overflow:visible; pointer-events:none; opacity:0; transition:opacity .32s ease; /* Kein mix-blend-mode. Frueher stand hier screen, mit dem Argument, Licht solle hinzukommen statt zuzudecken. Das galt, solange der Schein blau war. Weisses Licht auf normalem Weg kann ebenfalls nur aufhellen — der Unterschied ist gemessen kleiner als 7 von 255 in einem einzigen Kanal und betrifft keinen einzigen Bildpunkt sichtbar, waehrend screen rund 8 % Bildrate kostet. */ will-change:opacity; } /* Aufhellung des Metalls und Widerschein auf dem Wasser: ebenfalls nur ein- und ausgeblendet. */ .aufhellung{ opacity:0; transition:opacity .3s ease; } .marke__schein-wasser{ position:absolute; left:50%; transform:translateX(-50%); top:calc(100% - var(--rand-h) + var(--horizont)); width:min(170%, 94vw); height:76%; pointer-events:none; opacity:0; transition:opacity .42s ease; /* screen statt normal: Licht kommt hinzu, es deckt nicht zu. */ mix-blend-mode:screen; background:radial-gradient(56% 58% at 50% 4%, rgba(255,255,255,.26) 0%, rgba(232,246,255,.13) 32%, rgba(180,220,245,.045) 58%, transparent 80%); } /* Nur dort, wo es einen Mauszeiger gibt. Auf dem Telefon bleibt ein :hover nach dem Antippen haengen — der Schein bliebe dann stehen. */ @media (hover:hover){ .marke__tor:hover .marke__schein{ opacity:.85; } .marke__tor:hover .aufhellung{ opacity:.08; } .marke:has(.marke__tor:hover) .marke__schein-wasser{ opacity:1; } .marke:has(.marke__tor:hover) .marke__horizont{ opacity:1; } } /* Der Tastaturweg zeigt denselben Zustand — sonst waere die Seite mit der Tastatur bedienbar, aber nicht lesbar. */ .marke__tor:focus-visible .marke__schein{ opacity:.85; } .marke__tor:focus-visible .aufhellung{ opacity:.08; } .marke:has(.marke__tor:focus-visible) .marke__schein-wasser{ opacity:1; } .marke:has(.marke__tor:focus-visible) .marke__horizont{ opacity:1; } /* Wer Bewegung reduziert haben moechte, bekommt den Schein ohne Uebergang. */ @media (prefers-reduced-motion:reduce){ .marke__schein,.aufhellung,.marke__schein-wasser{ transition:none; } } /* --- Horizont, Spiegelung und Wasseroberflaeche --------------------------- */ .marke__horizont{ position:absolute; /* Deutlich breiter als das Logo, aber nie breiter als der Bildschirm — sonst laesst sich die Seite auf dem Telefon seitlich schieben. */ left:50%; transform:translateX(-50%); width:min(var(--horizont-breite), 96vw); top:calc(100% - var(--rand-h) + var(--horizont)); height:1px; pointer-events:none; /* Ruhewert leicht unter 1, damit die Linie beim Ueberfahren des Logos ein wenig mitgeht. */ opacity:.82; transition:opacity .42s ease; /* Zurueckhaltend: die Linie soll die Wasserflaeche andeuten, nicht behaupten. Sie reicht weit ueber das Logo hinaus und laeuft an beiden Enden vollstaendig aus. */ background:linear-gradient(to right, transparent 0%, rgba(0,152,204,.04) 14%, rgba(90,185,225,.14) 32%, rgba(150,220,248,.26) 50%, rgba(90,185,225,.14) 68%, rgba(0,152,204,.04) 86%, transparent 100%); } /* Die Spiegelung: dasselbe Logo, gekippt, gedaempft, weich und nach unten ausgeblendet. Sie steht still — eine bewegte Wasserflaeche haette dieselbe Bildrate gekostet, die wir gerade zurueckgewonnen haben. Der Verlauf als Maske blendet sie zum Horizont hin ein. Achtung auf die Richtung: die Maske wirkt im ungekippten Zustand, das Kippen kommt danach — deshalb liegt das Undurchsichtige unten im Verlauf und erscheint oben. */ .marke__spiegel{ position:absolute; left:var(--rand-b); width:var(--inhalt-b); top:calc(100% - var(--rand-h) + var(--horizont) + var(--spiegel-abstand)); /* Um die Mitte kippen, nicht um die Oberkante: sonst klappt die Spiegelung nach oben ueber das Logo statt nach unten unter den Horizont. */ transform:scaleY(-1); opacity:.28; /* Der Wasserfilter verzerrt die Spiegelung, die Weichzeichnung nimmt ihr die Schaerfe. Reihenfolge zaehlt: erst verzerren, dann weichzeichnen. */ filter:url(#ic-wasser) blur(.7px) saturate(.85); pointer-events:none; -webkit-mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.10) 34%, rgba(0,0,0,.45) 72%, #000 100%); mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.10) 34%, rgba(0,0,0,.45) 72%, #000 100%); } /* Auf den Produktseiten heisst der Wasserfilter anders (eigene, kleinere Filterdefinition im Markup der jeweiligen Seite) — ohne diese Regel liefe .marke__spiegel dort ins Leere und die Spiegelung bliebe unverzerrt. */ .marke--produkt .marke__spiegel{ filter:url(#pm-wasser) blur(.7px) saturate(.85); } /* --- Das wandernde Lichtband --------------------------------------------- */ /* Leicht geneigt, das laesst die Oberflaeche metallischer wirken als ein senkrechter Streifen. Es laeuft einmal durch und wartet dann. */ .glanz{ transform:translateX(0) skewX(-12deg); /* Verzoegerung, damit der erste Durchlauf nicht in den Seitenaufbau faellt — dort ruckelt er sonst sichtbar. */ animation:glanz var(--glanz-dauer) cubic-bezier(.33,0,.25,1) var(--glanz-start) infinite; will-change:transform; } @keyframes glanz{ 0% { transform:translateX(0) skewX(-12deg); } 18%, 100% { transform:translateX(175%) skewX(-12deg); } } /* Die Spiegelung hat einen engeren viewBox als das Logo (ohne den Rand fuer den Schatten), und ihr Lichtband ist breiter. Prozentwerte beziehen sich auf den jeweiligen viewBox — ohne eigene Kurve liefe das Band der Spiegelung langsamer und geriete gegenueber dem Original aus dem Tritt. Hergeleitet, damit beide Bandmitten in derselben Logospalte stehen: Logo: Mitte = -255 + t2 x 876,21 Spiegel: Mitte = -265 + t1 x 736,21 gleichgesetzt -> t1 = 0,0136 + t2 x 1,19016 t2 laeuft von 0 auf 175 %, also t1 von 1,4 % auf 209,6 %. */ .marke__spiegel .glanz{ animation-name:glanz-spiegel; } @keyframes glanz-spiegel{ 0% { transform:translateX(1.4%) skewX(-12deg); } 18%, 100% { transform:translateX(209.6%) skewX(-12deg); } } /* --- Punkteraster --------------------------------------------------------- */ /* Liegt als eigene Ebene hinter dem Inhalt und ueber der Grundfarbe. Fest im Bild, nicht mitscrollend — es ist Raum, kein Inhalt. */ .raster{ position:fixed; inset:0; width:100%; height:100%; display:block; z-index:0; pointer-events:none; /* der Zeiger gehoert dem Inhalt */ opacity:0; animation:raster-auf 1.6s ease .2s forwards; } @keyframes raster-auf{ from{ opacity:0 } to{ opacity:1 } } @media (prefers-reduced-motion:reduce){ .raster{ animation:none; opacity:1; } } /* --- Geruest der Seite hinter dem Logo ------------------------------------ */ /* Bewusst schmal gehalten: die Seite hat noch keinen Inhalt, sie soll deshalb auch nicht so tun als haette sie einen. */ .baustelle{ position:relative; z-index:1; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.1rem; padding:3rem 1.5rem; text-align:center; } /* Gross und fett, aber zurueckgenommen: die Wortmarke traegt die Seite, soll aber nicht mit der Aussage darunter um Aufmerksamkeit streiten. Deshalb Deckkraft statt voller Helligkeit — sie steht wie eingelassen in der Flaeche, nicht darauf. Die Sperrung faellt bei dieser Groesse enger aus als vorher, sonst zerfaellt das Wort. */ /* Bildmarke und Schriftzug in einer Zeile. inline-flex statt einfachem Text, damit das Zeichen mittig zur Schrift sitzt und mit ihr waechst — seine Hoehe ist in em angegeben. Die Sperrung sitzt auf dem WORT, nicht auf dem Verweis: sonst bekaeme auch der Abstand zwischen Zeichen und Wort die .24em ab. */ .baustelle__marke{ display:inline-flex; align-items:center; gap:.30em; font-size:clamp(1.9rem,6.5vw,3.6rem); font-weight:700; line-height:1.05; color:rgba(219,230,238,.5); text-decoration:none; margin-bottom:1.9rem; transition:color .3s ease, text-shadow .3s ease; } .baustelle__wort{ position:relative; /* Bezug fuer das Markenzeichen */ letter-spacing:.24em; /* Hinter dem letzten Buchstaben steht noch eine Sperrung; sie wieder abziehen, sonst sitzt die Zeile sichtbar links von der Mitte. */ margin-right:-.24em; } .baustelle__zeichen{ display:block; height:1.32em; width:auto; flex:none; } /* Das Markenzeichen sitzt oben rechts an der Schrift, nicht auf der Grundlinie. Absolut gesetzt statt ueber vertical-align: so haengt seine Hoehe nicht an der eigenen Schriftgroesse, es waechst die Zeilenbox nicht auf und die Mitte des Schriftzugs bleibt die Mitte der BUCHSTABEN — ein Zeichen, das die Zentrierung verschiebt, faellt sofort auf. Fuer Vorlesesoftware ausgeblendet; der Verweis hat ueber aria-label eine eigene Beschriftung. */ .marke__tm{ position:absolute; left:100%; top:-.02em; margin-left:-.10em; font-size:.30em; letter-spacing:0; line-height:1; opacity:.8; } .baustelle__marke:hover, .baustelle__marke:focus-visible{ color:rgba(214,240,255,.9); text-shadow:0 0 30px rgba(95,212,255,.35); } .baustelle__titel{ margin:0; font-size:clamp(1.35rem,4vw,2rem); font-weight:500; letter-spacing:.01em; } .baustelle__text{ margin:0; max-width:34rem; color:var(--gedaempft); /* Groesser und kursiv: der Satz ist kein Beiwerk, sondern die Aussage der Seite. Kursiv setzt ihn vom Titel darueber ab, ohne ihm mit noch mehr Gewicht Konkurrenz zu machen. clamp und nicht ein fester Wert, damit er auf schmalen Geraeten nicht ueber die Trommel hinauswaechst — und weil die Seite als EIN Bild ohne Rollen gedacht ist: jede zusaetzliche Zeile hier kostet unten Platz. */ font-size:clamp(1.02rem, 1.9vw, 1.22rem); font-style:italic; line-height:1.55; /* pre-line: gesetzte Zeilenenden gelten, mehrfache Leerzeichen nicht. Damit kann der Umbruch im Text stehen statt als
im HTML. */ white-space:pre-line; } .baustelle__wege{ margin:1rem 0 0; display:flex; flex-wrap:wrap; gap:.8rem 1.6rem; align-items:center; justify-content:center; } .baustelle__taste{ display:inline-block; padding:.6rem 1.3rem; border:1px solid rgba(78,192,230,.42); border-radius:3px; color:var(--schrift); text-decoration:none; transition:border-color .25s ease, box-shadow .25s ease, color .25s ease; } .baustelle__taste:hover, .baustelle__taste:focus-visible{ color:#bfeaff; border-color:rgba(120,220,255,.8); box-shadow:0 0 24px rgba(0,152,204,.22); } .baustelle__zurueck{ color:var(--gedaempft); text-decoration:none; border-bottom:1px solid transparent; } .baustelle__zurueck:hover, .baustelle__zurueck:focus-visible{ color:var(--schrift); border-bottom-color:var(--linie); } /* --- Liste auf der Bereichsseite ------------------------------------------ */ /* Nur dort gebraucht, wo eine Bereichsseite schon auf vorhandene Unterseiten zeigen kann — bisher allein auf produkte.html. */ .bereich__liste-titel{ margin:1.6rem 0 .5rem; color:var(--gedaempft); font-size:.92rem; } .bereich__liste{ list-style:none; margin:0 0 .4rem; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem 1.6rem; } .bereich__liste a{ color:var(--schrift); text-decoration:none; } /* Nicht mehr nur ein Wort in einer Zeile: auf produkte.html traegt jeder Verweis jetzt zusaetzlich die Geraeteumrisse darunter. Der Name behaelt seine eigene Unterstreichung beim Zeigen/Fokussieren (dafuer jetzt auf dem , nicht mehr auf dem — sonst liefe die Linie unter dem Bild mit durch); das Bild bekommt stattdessen einen staerkeren Schein. */ .bereich__liste a{ display:flex; flex-direction:column; align-items:center; gap:.8rem; padding:.4rem; } .bereich__liste-name{ border-bottom:1px solid transparent; transition:color .25s ease, border-color .25s ease; } .bereich__liste a:hover .bereich__liste-name, .bereich__liste a:focus-visible .bereich__liste-name{ color:#bfeaff; border-bottom-color:rgba(120,220,255,.45); } /* Die Geraeteumrisse: dieselbe Hausfarbe wie die Schein-Marker anderswo (--blau-hell), mit einem ruhigen, staendig sichtbaren Schein — anders als bei den fremden Referenzlogos gibt es hier keine fremde Marke zu zuegeln, das Bild darf also von Anfang an leuchten. Beim Zeigen mit der Maus oder Fokussieren legt sich derselbe Schein noch eine Stufe kraeftiger darueber und das Bild hebt sich minimal an. */ .bereich__liste-bild{ display:block; width:auto; height:5.5rem; max-width:100%; filter:drop-shadow(0 0 4px rgba(78,192,230,.65)) drop-shadow(0 0 11px rgba(0,152,204,.4)); transition:filter .3s ease, transform .25s ease; } @media (hover:hover){ .bereich__liste a:hover .bereich__liste-bild{ filter:drop-shadow(0 0 7px rgba(78,192,230,.95)) drop-shadow(0 0 18px rgba(0,152,204,.6)); transform:translateY(-2px); } } .bereich__liste a:focus-visible .bereich__liste-bild{ filter:drop-shadow(0 0 7px rgba(78,192,230,.95)) drop-shadow(0 0 18px rgba(0,152,204,.6)); transform:translateY(-2px); } @media (prefers-reduced-motion:reduce){ .bereich__liste-bild{ transition:none; } } /* --- Produktwahl-Rad -------------------------------------------------------*/ /* Ersetzt auf dieser Seite den fruecheren Text-Reiter "Produkte". Drei echte Verweise (funktionieren also auch ganz ohne Javascript, nur ohne die Radoptik — siehe die Regeln unten fuer :not(.radwahl--bereit)) stehen wie auf einer Trommel im Raum; das Mausrad blaettert hindurch, die Trommel rastet auf dem naechsten Produkt ein. Ziehen mit Maus oder Finger tut dasselbe, fuer Geraete ohne Mausrad. */ .radwahl{ position:relative; z-index:1; width:min(100%, 26rem); /* Luft nach oben und unten: die Trommel greift durch die starke Kippung weit aus und soll den Waegen darueber und der Fusszeile darunter nicht zu nahe kommen. */ margin:2.8rem 0 1.6rem; } /* Buehne: haelt Fenster und Pfeile zusammen und ist der Bezug fuer deren Platzierung. Noetig, weil die Ausblendmaske des Fensters alles mitnimmt, was darin liegt — die Pfeile muessen also daneben stehen, nicht darin. */ .radwahl__buehne{ position:relative; /* Hoeher als das frueher 12,5rem hohe Fenster: die staerker gekippte Trommel greift weiter aus, und die Pfeile brauchen oben und unten Luft, ohne dem nachbarn ins Wort zu fallen. */ height:18rem; } .radwahl__fenster{ position:absolute; inset:0; /* Kraeftigere Perspektive als zuvor (54rem): je kleiner der Wert, desto staerker die Fluchtung — erst damit sieht man eine Trommel und nicht eine Liste, die sich ein wenig neigt. Der Winkel je Feld steht in radwahl.js. */ perspective:26rem; perspective-origin:50% 50%; -webkit-user-select:none; user-select:none; touch-action:pan-x; cursor:ns-resize; -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%); mask-image:linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%); } /* --- Die beiden Pfeile ------------------------------------------------- */ /* Stehen ueber der oberen und unter der unteren Linie und tun dasselbe wie die Pfeiltasten. Am obersten bzw. untersten Feld schalten sie sich ab und zeigen damit nebenbei, dass die Trommel Enden hat. */ .radwahl__pfeil{ position:absolute; left:50%; transform:translateX(-50%); z-index:2; width:3.2rem; height:1.7rem; display:flex; align-items:center; justify-content:center; padding:0; background:none; border:0; border-radius:3px; color:var(--gedaempft); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:color .25s ease, opacity .25s ease, transform .25s ease; } .radwahl__pfeil svg{ width:1.5rem; height:auto; display:block; } .radwahl__pfeil--auf{ top:0; } .radwahl__pfeil--ab { bottom:0; } @media (hover:hover){ .radwahl__pfeil:hover:not(:disabled){ color:#bfeaff; } .radwahl__pfeil--auf:hover:not(:disabled){ transform:translate(-50%,-2px); } .radwahl__pfeil--ab:hover:not(:disabled){ transform:translate(-50%,2px); } } .radwahl__pfeil:focus-visible{ outline:2px solid rgba(120,220,255,.75); outline-offset:3px; } .radwahl__pfeil:disabled{ opacity:.22; cursor:default; } /* Ohne Javascript gibt es keine Trommel — dann sind die Pfeile sinnlos. */ .radwahl:not(.radwahl--bereit) .radwahl__pfeil{ display:none; } .radwahl__feld{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; text-decoration:none; font-weight:700; font-size:clamp(1.35rem,4.4vw,1.95rem); letter-spacing:.01em; color:var(--gedaempft); backface-visibility:hidden; -webkit-tap-highlight-color:transparent; transition:transform .5s cubic-bezier(.22,1,.36,1), opacity .5s ease, color .3s ease, text-shadow .3s ease; } /* Waehrend des Ziehens bzw. eines Mausrad-Schubs folgt das Feld direkt dem Zeiger, ohne den Uebergang hinterherzuruckeln. Erst das Einrasten am Ende bekommt wieder die weiche Kurve. */ .radwahl--zieht .radwahl__feld{ transition:none; } .radwahl__feld--aktiv{ color:#eaf7ff; text-shadow:0 0 12px rgba(78,192,230,.8), 0 0 26px rgba(0,152,204,.45); } @media (hover:hover){ .radwahl__feld:hover:not(.radwahl__feld--aktiv){ color:#a9c8d8; } } .radwahl__feld:focus-visible{ outline:2px solid rgba(120,220,255,.75); outline-offset:6px; border-radius:6px; } .radwahl__linie{ position:absolute; left:6%; right:6%; height:1px; pointer-events:none; background:linear-gradient(to right, transparent 0%, rgba(120,220,255,.35) 50%, transparent 100%); } /* Der Abstand der beiden Linien muss zur Schriftgroesse passen — und zur Konstanten BAND in radwahl.js, die entscheidet, welcher Klick als "vorne stehendes Feld oeffnen" gilt. Wer hier dreht, dreht dort mit. */ .radwahl__linie--oben{ top:calc(50% - 2.75rem); } .radwahl__linie--unten{ top:calc(50% + 2.75rem); } .radwahl__hinweis{ margin:.9rem 0 0; font-size:.82rem; color:var(--gedaempft); } /* Ohne Javascript — oder solange radwahl.js noch nicht gelaufen ist — liegt hier eine ganz gewoehnliche, senkrechte Liste aus drei Verweisen. Die Radoptik ist ein Zusatz, kein Ersatz fuer die eigentliche Navigation. */ .radwahl:not(.radwahl--bereit) .radwahl__buehne{ height:auto; } .radwahl:not(.radwahl--bereit) .radwahl__fenster{ position:static; height:auto; perspective:none; cursor:auto; -webkit-mask-image:none; mask-image:none; display:flex; flex-direction:column; gap:.3rem; } .radwahl:not(.radwahl--bereit) .radwahl__feld{ position:static; transform:none !important; opacity:1; color:var(--schrift); padding:.4rem 0; } .radwahl:not(.radwahl--bereit) .radwahl__linie{ display:none; } @media (prefers-reduced-motion:reduce){ .radwahl__feld{ transition:opacity .3s ease, color .3s ease, text-shadow .3s ease; } } /* --- Uebergang: ins Licht eintauchen -------------------------------------- */ /* Der Klick auf das Logo fuehrt nicht einfach auf die naechste Seite. Der Schein, den der Zeiger andeutet, flammt auf, das Logo waechst dem Betrachter entgegen, und das Licht ueberstrahlt die Flaeche. Die neue Seite tritt aus demselben Licht wieder hervor. Der Schleier wird von site.js erzeugt und nicht im HTML vorgehalten: ohne JavaScript gibt es keinen Uebergang, dann soll auch nichts im Weg liegen. Bewusst kein reines Weiss und keine volle Bildschirmhelligkeit als Blitz — ein Aufblitzen auf dunklem Grund ist unangenehm und fuer empfindliche Menschen ein echtes Problem. Das Licht ist hellblau und kommt aus der Mitte, wo das Logo steht. */ /* HIER STEHT BEWUSST KEIN RADIALVERLAUF. Ein Radialverlauf hat in seiner Mitte einen Radius von null. Firefox rechnet genau diesen einen Bildpunkt falsch und malt ihn dunkel — auf heller Flaeche ein schwarzer Punkt, immer an derselben Stelle. Nachgemessen an Alexanders Bildschirmfoto: der Punkt lag auf 1 Bildpunkt genau in der waagerechten Mitte des Seiteninhalts — also im Mittelpunkt des Verlaufs, nicht in der Bildmitte (die liegt wegen der Rollleiste 7 Punkte weiter rechts). Damit war es eindeutig der Verlauf. Eine deckende Farbe darunter half nicht: Firefox malt dort keine Luecke, sondern eine falsche Farbe. Das Licht kommt jetzt aus einer deckenden Grundfarbe mit zwei ueberlagerten LINEAREN Verlaeufen, die zu den Raendern hin abdunkeln. Die haben keinen Mittelpunkt und damit auch keine Rechenstelle, an der etwas schiefgehen kann. Der Eindruck bleibt fast derselbe. */ /* Nur fuer den Bruchteil EINES Bildes gesetzt, von uebergang.js im pageshow-Empfaenger. Hintergrund: kommt eine Seite aus dem Seitenspeicher des Browsers zurueck, traegt sie noch die Klasse, mit der sie verlassen wurde (alles auf Deckkraft null). Nimmt man die Klasse einfach ab, laufen die zugehoerigen UEBERGAENGE rueckwaerts ab — die Trommel faehrt eine halbe Sekunde lang wieder herein, waehrend darueber der schwarze Schleier abblendet. Zwei Bewegungen uebereinander. Diese Regel setzt die Uebergaenge fuer ein Bild aus, damit das Abnehmen ein Sprung ist und nicht selbst eine Bewegung. Bewusst nur `transition`, nicht `animation`: der wandernde Glanz auf dem Schriftzug ist eine Animation und wuerde sonst neu anfangen. */ html.ohne-bewegung *{ transition:none !important; } .uebergang{ position:fixed; inset:0; z-index:70; pointer-events:none; opacity:0; /* KEIN Radialverlauf mehr — siehe die Erklaerung ueber .uebergang. */ background-color:#e7f6ff; background-image: linear-gradient(to right, rgba(150,200,224,.55), rgba(150,200,224,0) 46%, rgba(150,200,224,0) 54%, rgba(150,200,224,.55)), linear-gradient(to bottom, rgba(150,200,224,.5) 0%, rgba(150,200,224,0) 38%, rgba(150,200,224,0) 48%, rgba(150,200,224,.62) 100%); } .uebergang--hin{ animation:uebergang-hin .46s cubic-bezier(.5,0,.78,.46) forwards; } /* Der Rueckweg: nach Schwarz, nicht ins Licht. */ .uebergang--schwarz{ background:var(--grund); animation:uebergang-schwarz .34s ease forwards; } @keyframes uebergang-schwarz{ from{ opacity:0 } to{ opacity:1 } } /* Die Ebene beim ANKOMMEN steht als leeres Element IM HTML und ist im Ruhezustand abgeschaltet. Sie muss schon im allerersten Bild der neuen Seite liegen: reicht ein Skript sie nach, sieht man dazwischen kurz die fertige Seite — Licht, Seite, wieder Licht. Genau das war der doppelte Blitz. uebergang.js setzt deshalb nur die Klasse an , und zwar oben im Kopf, bevor der Koerper gelesen ist. Bewusst ein Element und kein Pseudoelement der Wurzel (html::after): dort blieb in Firefox ein einzelner dunkler Punkt im Bild stehen. */ .ankunft{ position:fixed; inset:0; z-index:70; pointer-events:none; display:none; } /* Nur zur Fehlersuche, ueber ?probe=1 in der Adresse: derselbe Schleier, aber stehend. */ html.probe .ankunft{ display:block; opacity:.55; /* KEIN Radialverlauf mehr — siehe die Erklaerung ueber .uebergang. */ background-color:#e7f6ff; background-image: linear-gradient(to right, rgba(150,200,224,.55), rgba(150,200,224,0) 46%, rgba(150,200,224,0) 54%, rgba(150,200,224,.55)), linear-gradient(to bottom, rgba(150,200,224,.5) 0%, rgba(150,200,224,0) 38%, rgba(150,200,224,0) 48%, rgba(150,200,224,.62) 100%); } html.aus-dem-licht .ankunft{ display:block; /* KEIN Radialverlauf mehr — siehe die Erklaerung ueber .uebergang. */ background-color:#e7f6ff; background-image: linear-gradient(to right, rgba(150,200,224,.55), rgba(150,200,224,0) 46%, rgba(150,200,224,0) 54%, rgba(150,200,224,.55)), linear-gradient(to bottom, rgba(150,200,224,.5) 0%, rgba(150,200,224,0) 38%, rgba(150,200,224,0) 48%, rgba(150,200,224,.62) 100%); animation:uebergang-her .58s cubic-bezier(.32,.12,.3,1) forwards; } html.aus-dem-schwarz .ankunft{ display:block; background:var(--grund); animation:uebergang-her .46s ease forwards; } html.aus-dem-licht main{ animation:auftauchen .58s cubic-bezier(.32,.12,.3,1) both; } html.aus-dem-licht .fuss{ animation:auftauchen-fuss .58s ease both; } html.aus-dem-schwarz main{ animation:auftauchen .5s ease .1s both; } html.aus-dem-schwarz .fuss{ animation:auftauchen-fuss .5s ease .1s both; } @keyframes uebergang-hin{ from{ opacity:0 } to{ opacity:1 } } @keyframes uebergang-her{ from{ opacity:1 } to{ opacity:0 } } /* Das Logo waechst entgegen. Die Verschiebung aus --marke-y bleibt drin, sonst springt es beim Start der Bewegung nach unten. */ body.eintauchen .marke{ animation:eintauchen-marke .5s cubic-bezier(.5,0,.9,.5) forwards; } @keyframes eintauchen-marke{ from{ transform:translateY(var(--marke-y)) scale(1); } to { transform:translateY(var(--marke-y)) scale(1.28); } } /* Der Schein geht sofort voll auf. Der Selektor ist eine Stufe laenger als die Regel fuer den Zeiger, sonst gewaenne diese beim Klicken. */ body.eintauchen .marke .marke__schein{ opacity:1; transition:opacity .16s ease; } /* Fusszeile und Wasser treten zurueck — das Licht kommt vom Logo. */ body.eintauchen .fuss{ animation:eintauchen-weg .26s ease forwards; } body.eintauchen .marke__wasser{ animation:eintauchen-weg .34s ease forwards; } @keyframes eintauchen-weg{ from{ opacity:1 } to{ opacity:0 } } /* Ankommen: der Inhalt schaelt sich aus dem Licht heraus. */ @keyframes auftauchen{ from{ opacity:.35; transform:scale(1.035); } to { opacity:1; transform:none; } } @keyframes auftauchen-fuss{ from{ opacity:0 } to{ opacity:1 } } /* Wer Bewegung reduziert haben moechte, bekommt gar keinen Uebergang — site.js springt dann direkt auf die neue Seite. Diese Regel ist die zweite Sicherung, falls doch eine Klasse gesetzt wurde. */ @media (prefers-reduced-motion:reduce){ .uebergang{ display:none; } body.eintauchen .marke, body.eintauchen .fuss, body.eintauchen .marke__wasser, html.aus-dem-licht .ankunft, html.aus-dem-schwarz .ankunft, html.aus-dem-licht main, html.aus-dem-schwarz main, html.aus-dem-licht .fuss, html.aus-dem-schwarz .fuss{ animation:none; } html.aus-dem-licht .ankunft, html.aus-dem-schwarz .ankunft{ display:none; } } /* --- Produktseiten-Geruest ------------------------------------------------ */ /* Kopf mit der kleinen Markenmarke oben, darunter ein knapper Hinweistext samt Wegen zurueck — bewusst schmal, damit eine spaeter eingesetzte Produktbeschreibung densselben Rahmen wiederverwenden kann. */ /* --- Inhalt einer Bereichsseite ------------------------------------------ */ /* Eine Spalte, linksbuendig, mit einer Zeilenlaenge um die 60 Zeichen — mehr liest sich auf einer dunklen Flaeche schlecht. Der .produktinhalt darueber ist mittig gesetzt und bleibt fuer die noch leeren Geruestseiten. */ /* Mittig gesetzt wie die Seite, von der aus sie aufgerufen wird: dort steht alles in einer schmalen Spalte in der Mitte. Ueberschriften und der Leitsatz stehen zentriert, die Absaetze selbst linksbuendig — mehrere Zeilen mittig auszurichten liest sich schlecht. */ .bereich{ /* Wie weit der Schleier ueber die Textspalte hinausreicht. Innerhalb dieser Strecke blendet er auf, deshalb steht der Wert unten in der Verlaufsangabe noch einmal. */ --schleier-rand: 4rem; position:relative; z-index:1; flex:1 1 auto; width:min(100% - 3rem, 36rem); margin-inline:auto; text-align:center; } /* EIN SCHLEIER, GENAU SO BREIT WIE DER TEXT. Ohne ihn laufen die hellen Punkte des Rasters quer durch die Zeilen, und unter mehreren Absaetzen wird der Text unleserlich. Er liegt deshalb NUR hinter der Textspalte: links und rechts bleibt der Hintergrund vollstaendig sichtbar. Zwei Verlaeufe erledigen das. Der eine blendet waagerecht auf, und zwar in genau der Strecke, die der Schleier ueber die Spalte hinausragt (--schleier-rand). Dadurch ist er dort deckend, wo der erste Buchstabe steht, und ausserhalb der Spalte gar nicht mehr vorhanden. Der zweite ist eine Maske und nimmt oben und unten die Kante weg, damit der Streifen nicht abrupt anfaengt und aufhoert. position:absolute, nicht fixed: der Schleier gehoert zum Text und muss mit ihm rollen. Er haengt an .bereich und nicht am body, damit ihn nur Seiten mit Text bekommen. Weil .bereich mit position und z-index einen eigenen Stapelraum aufmacht, liegt das Kind mit z-index:-1 zwar hinter dem Text, aber immer noch VOR dem Raster. VERWORFEN: ein bildschirmfuellender Radialverlauf. Erst deckte er fast alles zu, dann war er schmaler und schwaecher — aber immer lag er auch dort, wo gar kein Text steht. */ .bereich::before{ content:""; position:absolute; inset:-1.5rem calc(var(--schleier-rand) * -1); z-index:-1; pointer-events:none; background:linear-gradient(to right, rgba(7,13,18,0) 0, rgba(7,13,18,.80) var(--schleier-rand), rgba(7,13,18,.80) calc(100% - var(--schleier-rand)), rgba(7,13,18,0) 100%); -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 3rem, #000 calc(100% - 3rem), transparent 100%); mask-image:linear-gradient(to bottom, transparent 0, #000 3rem, #000 calc(100% - 3rem), transparent 100%); } /* --- Rollen IN der Spalte statt im Fenster ------------------------------- */ /* Gewuenscht auf der Unternehmensseite: der Rollbalken soll nicht am Rand des Browserfensters stehen, sondern in der Textspalte selbst. Die Seite wird dafuer auf Fensterhoehe festgesetzt; Schriftzug oben und Fusszeile unten stehen still, nur die Spalte dazwischen laeuft durch. DREI DINGE, DIE DABEI ZU BEACHTEN SIND 1. Der Text rollt in einer EIGENEN Ebene (.bereich__rolle), nicht in .bereich selbst. Der Schleier haengt naemlich als Pseudoelement an .bereich; wuerde dieses Element rollen, wanderte der Schleier mit und liesse den durchlaufenden Text unbedeckt. So bleibt er stehen und deckt immer genau den sichtbaren Ausschnitt. 2. min-height:0 ist Pflicht. Flexkinder haben von Haus aus min-height:auto und schrumpfen deshalb NICHT unter ihren Inhalt — ohne diese Zeile waechst die Spalte einfach weiter und der Rollbalken landet wieder am Fenster. 3. Nur am Rechner. Auf dem Telefon ist ein festgesetztes Fenster unangenehm: die Adressleiste klappt nicht mehr weg, und der Finger muss den Kasten treffen. Unterhalb von 48rem bleibt deshalb alles beim Alten, die Seite rollt dort wie jede andere. */ .bereich__rolle{ padding-bottom:clamp(2.5rem,7vh,4.5rem); } @media (min-width:48rem){ body.fest{ height:100svh; overflow:hidden; } body.fest .bereich{ min-height:0; display:flex; flex-direction:column; } body.fest .bereich__rolle{ flex:1 1 auto; min-height:0; overflow-y:auto; /* Der Platz fuer den Balken wird von Anfang an freigehalten, sonst ruckt der Text beim ersten Erscheinen um dessen Breite zur Seite. */ scrollbar-gutter:stable; /* Rollt der Zeiger ueber die Spalte hinaus, soll nicht ploetzlich die Seite dahinter wandern. */ overscroll-behavior:contain; /* Luft zwischen Text und Balken. BEIDSEITIG, nicht nur rechts: die Spalte steht mittig auf der Seite und der Schleier liegt symmetrisch darum. Ein Abstand nur rechts ruecke den Blocksatz sichtbar aus der Mitte. Der Preis sind gut zwei Zentimeter weniger Zeilenlaenge, was bei 36rem Spaltenbreite nicht auffaellt. */ padding-inline:1.15rem; } /* Der Balken in der Handschrift der Seite. Firefox versteht die beiden Standardangaben, die auf Chrome und Safari zielenden Regeln darunter bleiben dort wirkungslos — beide Wege sind noetig. */ body.fest .bereich__rolle{ scrollbar-width:thin; scrollbar-color:rgba(120,180,210,.34) transparent; } body.fest .bereich__rolle::-webkit-scrollbar{ width:8px; } body.fest .bereich__rolle::-webkit-scrollbar-track{ background:transparent; } body.fest .bereich__rolle::-webkit-scrollbar-thumb{ background:rgba(120,180,210,.34); border-radius:4px; } body.fest .bereich__rolle::-webkit-scrollbar-thumb:hover{ background:rgba(140,205,235,.55); } /* tabindex="0" steht im HTML, damit sich der Bereich mit Bild-ab und den Pfeiltasten bedienen laesst — Chrome macht rollbare Kaesten sonst nicht erreichbar. Der Rahmen soll dabei nur bei Tastaturbedienung erscheinen. */ body.fest .bereich__rolle:focus{ outline:none; } body.fest .bereich__rolle:focus-visible{ outline:2px solid var(--blau-hell); outline-offset:2px; border-radius:.3rem; } /* Der Kopf darf auf einem flachen Fenster weniger Platz nehmen, sonst bleibt fuer den Text kaum etwas uebrig. */ @media (max-height:46rem){ body.fest .produktkopf{ padding-top:clamp(1.2rem,4vh,2.5rem); padding-bottom:1rem; } } } /* Der Schatten steht statt eines dichteren Schleiers: er trennt die Buchstaben vom wandernden Raster, ohne den Hintergrund zuzudecken. */ .bereich__leitsatz, .bereich__titel, .bereich__teil p, .bereich__zeit li{ text-shadow:0 1px 4px rgba(4,9,13,.9), 0 0 14px rgba(4,9,13,.7); } .bereich__leitsatz{ margin:0 0 2.4rem; font-size:clamp(1.1rem,2.6vw,1.3rem); line-height:1.6; color:#dbe6ee; } .bereich__teil{ margin:0 0 2.2rem; } /* --- Die Leistungsseite: Text und Zeichnung nebeneinander ------------------ */ /* Die Spalte ist hier breiter als sonst (36rem). Der Grund ist nicht Geschmack, sondern Rechnung: neben dem Text steht eine Zeichnung, beide teilen sich die Breite, und bei 36rem blieben fuer den Text keine 18rem — das sind rund fuenfunddreissig Zeichen je Zeile und damit deutlich unter dem, was sich angenehm liest. */ .bereich--leistungen, .bereich--chronik{ width:min(100% - 3rem, 54rem); } .leistung, .chronik{ display:grid; gap:1rem 2rem; align-items:center; margin-bottom:clamp(2.4rem, 6vh, 3.6rem); } /* Erst ab dieser Breite nebeneinander. Darunter steht die Zeichnung ueber dem Text — nicht daneben und geschrumpft, denn eine Strichzeichnung, die auf Daumenbreite zusammenfaellt, ist keine Illustration mehr, sondern Schmutz. */ @media (min-width:44rem){ .leistung, .chronik{ grid-template-columns:1fr 1fr; } /* Jede zweite gedreht: sonst laeuft das Auge sechsmal denselben Weg, und die Seite wirkt wie eine Tabelle. */ .leistung--gedreht .leistung__bild, .chronik--gedreht .chronik__bild{ order:2; } } .leistung__bild{ margin:0; border-radius:6px; border:1px solid var(--linie); background:var(--grund-2); overflow:hidden; } .leistung__bild img{ display:block; width:100%; height:auto; } /* Links, nicht mittig. .bereich setzt fuer die ganze Seite text-align:center — das ist fuer Leitsatz und Wege richtig, fuer einen Absatz von drei Zeilen aber nicht: zentrierter Fliesstext zwingt das Auge, den Zeilenanfang jedes Mal neu zu suchen. UND LINKSBUENDIG STATT BLOCKSATZ. .bereich__teil p setzt Blocksatz, und auf einer Seite mit voller Spaltenbreite ist das richtig. Hier steht der Text aber nur auf der halben Breite neben einer Zeichnung — rund fuenfundvierzig Zeichen je Zeile. Blocksatz zieht dann die Wortabstaende auf und reisst helle Gassen durch den Absatz, gemessen bis zur dreifachen Wortluecke. Silbentrennung bleibt an; sie hilft auch im Flattersatz gegen kurze Zeilen. */ .leistung__text, .chronik__text{ text-align:left; } /* ZWEI KLASSEN IM WAEHLER, und das ist kein Versehen. .bereich__teil p steht WEITER UNTEN in dieser Datei und setzt dort Blocksatz. Bei gleicher Spezifitaet gewinnt die spaetere Regel — ein schlichtes .leistung__text p blieb deshalb wirkungslos, obwohl es richtig aussah. Entweder man verschiebt den ganzen Block hinter den anderen, oder man haengt eine Klasse mehr davor. Das zweite ist haltbarer: es ueberlebt auch das naechste Umsortieren der Datei. */ .leistung .leistung__text p, .chronik .chronik__text p{ margin:0 0 .7rem; text-align:left; } .chronik .chronik__text p:last-child{ margin-bottom:0; } /* Der Wirbel als Hintergrund, aber LEISE. wirbel.js ist als Schaustueck gebaut: dichte, helle Linienbaender ueber die ganze Flaeche. Hinter Fliesstext ist das unlesbar — der Leitsatz stand in voller Staerke mitten im Strudel. Die Datei selbst kennt keine Stellschraube dafuer (sie stammt aus der Zeit vor den data-Merkmalen), deshalb wird sie hier gedaempft, nicht dort umgebaut. opacity, nicht filter: die Leinwand wird mit alpha:false gezeichnet, ist also deckend. Erst die Durchsicht laesst den dunklen Grund der Seite durchschlagen, und genau das nimmt den Baendern die Helligkeit. .08 -> .04. Gemessen an einer textfreien Randspalte der fertigen Seite faellt die Streuung der Helligkeit damit von 5.1 auf 3.5 — der Wirbel ist noch da, traegt die Flaeche aber nicht mehr. Darunter (.03) verschwindet er, und dann kann er auch ganz weg. */ .raster.wirbel{ animation-name:raster-auf-leise; } @keyframes raster-auf-leise{ from{ opacity:0 } to{ opacity:.04 } } /* Und derselbe Wert, wenn die Einblendung wegfaellt. Die Regel bei "Bewegung reduzieren" setzt opacity:1 fuer alle Raster; ohne diese Zeile stuende der Wirbel dort wieder in voller Staerke. */ @media (prefers-reduced-motion:reduce){ .raster.wirbel{ opacity:.04; } } /* Der Wandel hinter der Produktseite. Dieselbe Stellschraube wie beim Wirbel darueber, nur nicht so weit heruntergedreht: der Wirbel ist eine FLAECHE und deckt alles, der Wandel besteht aus duennen Drahtgittern, die den Grund grossenteils frei lassen. Bei .04 waere davon nichts mehr zu sehen. Wer ihn noch leiser will, dreht hier — und an beiden Stellen gleich, sonst springt er bei "Bewegung reduzieren". */ .raster.wandel{ animation-name:raster-auf-wandel; } @keyframes raster-auf-wandel{ from{ opacity:0 } to{ opacity:.85 } } @media (prefers-reduced-motion:reduce){ .raster.wandel{ opacity:.85; } } /* Der Schwarm hinter der Informationsseite. Deutlich leiser als der Wandel: der besteht aus ruhenden Drahtgittern, der Schwarm aus lauter kleinen Flaechen, die staendig in Bewegung sind. Bewegtes zieht den Blick von sich aus an und braucht deshalb weniger Deckkraft, um gleich stark zu wirken. Die Voegel verblassen ausserdem mit der Entfernung; das steckt im Shader und nicht hier, weil es je Vogel verschieden ist. */ .raster.voegel{ animation-name:raster-auf-voegel; } @keyframes raster-auf-voegel{ from{ opacity:0 } to{ opacity:.6 } } @media (prefers-reduced-motion:reduce){ .raster.voegel{ opacity:.6; } } /* --- Informationen: das Verzeichnis der Mitteilungen ---------------------- */ /* Schmaler als die Mediathek (60rem): hier steht je Eintrag eine Zeile Text, kein Bild. Auf 60rem risse der Titel ueber die ganze Breite und das Datum stuende allein am Anfang einer sehr langen Zeile. */ .bereich--informationen{ width:min(100% - 3rem, 52rem); } /* Die Zeile "Aktuelles zum Unternehmen" aus dem alten Auftritt. Dort war sie die Ueberschrift ueber der Liste; hier ist sie eine Aufschrift darueber, denn die Ueberschrift der Seite steht schon im Kopf. Deshalb klein und gesperrt statt gross — dieselbe Behandlung wie .netzwerk__titel. */ .infoliste__kopf{ margin:0 0 1.2rem; font-size:.88rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--gedaempft); } .infoliste{ list-style:none; margin:0 0 clamp(2rem, 5vh, 3rem); padding:0; display:grid; gap:1rem; } /* Der ganze Eintrag ist ein Kasten, aber NICHT der ganze Kasten ist der Verweis: das Ziel ist ein PDF, das sich in einem neuen Reiter oeffnet. Ein Kasten, der beim Klick irgendwo das Fenster wechselt, ueberrascht; ein Verweis mit Beschriftung sagt vorher, was kommt. Deshalb hier anders als bei den Filmkacheln der Mediathek. */ .infoliste__eintrag{ padding:1.1rem 1.3rem 1.2rem; border:1px solid var(--linie); border-radius:8px; background:rgba(10,21,29,.5); } /* Dasselbe Datum wie in der Chronik und der Mediathek. */ .infoliste__datum{ display:block; margin:0 0 .3rem; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gedaempft); } .infoliste__titel{ margin:0 0 .7rem; font-size:clamp(1rem, 2.2vw, 1.12rem); font-weight:600; line-height:1.4; color:var(--schrift); } /* KEIN Pfeilzeichen. Erster Versuch war ein "↗" im ::after — das Zeichen fehlt in Segoe UI und kam als leeres Kaestchen heraus. Ein Sinnbild, das der Schriftschnitt nicht kennt, ist keins. Stattdessen steht jetzt im TEXT, was sich oeffnet: "(PDF)". Das laesst sich uebersetzen, wird mitvorgelesen und sagt mehr als ein Pfeil, der nur "woandershin" bedeutet. */ .infoliste__weg{ display:inline-flex; align-items:center; gap:.4rem; font-size:.92rem; color:var(--blau-hell); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .25s, color .25s; } .infoliste__weg:hover, .infoliste__weg:focus-visible{ color:#fff; border-bottom-color:var(--blau-hell); } /* --- Die Mediathek: Filme, die auf YouTube liegen ------------------------- */ /* Die Karten VERWEISEN, sie betten nicht ein. Das ist keine Geschmacksfrage: ein eingebettetes