/** * Animation \u00b7 Header Reverse-Sticky (CSS) * * Typ: Styles (CSS) * Position: Frontend * * Geh\u00f6rt zum gleichnamigen JS-Snippet. Das JS entscheidet nur die * Richtung und setzt Klassen an ; bewegt wird hier. * * Die Selektoren h\u00e4ngen am Datenattribut, nicht an Element-IDs \u2013 damit * \u00fcberleben sie Umbauten im Bricks-Builder. */ #brx-header { transition: transform .5s cubic-bezier(.22, .61, .36, 1); will-change: transform; } html.dn-nav-hidden #brx-header { transform: translate3d(0, -110%, 0); } /* Die Leiste legt einen weichen Schatten an, sobald gescrollt wurde */ [data-dn-anim~="header-reveal"] > * { transition: box-shadow .45s ease; } html.dn-nav-stuck [data-dn-anim~="header-reveal"] > * { box-shadow: 0 10px 34px rgb(var(--text-rgb) / 0.14); } /* Navigation: roter Punkt links, springt beim Zeigen auf. Kein Unterstrich mehr - der lag unter einem Men\u00fcpunkt, der jetzt die volle Leistenh\u00f6he hat, und w\u00e4re am unteren Rand der Leiste gelandet. */ [data-dn-anim~="header-reveal"] .bricks-nav-menu > li > a, [data-dn-anim~="header-reveal"] .bricks-nav-menu > li > .brx-submenu-toggle > a { position: relative; } [data-dn-anim~="header-reveal"] .bricks-nav-menu > li > a::before, [data-dn-anim~="header-reveal"] .bricks-nav-menu > li > .brx-submenu-toggle > a::before { content: ""; position: absolute; top: 50%; left: -1.9rem; width: .7rem; height: .7rem; margin-top: -.35rem; border-radius: 50%; background: var(--brand); opacity: 0; transform: translateX(-.5rem) scale(.2); /* Der R\u00fcckschwinger am Ende l\u00e4sst den Punkt aufspringen statt einzublenden - dieselbe Kurve wie bei den Buttons, nur mit \u00dcberschwung. */ transition: transform .42s cubic-bezier(.34, 1.56, .64, 1), opacity .2s ease; } [data-dn-anim~="header-reveal"] .bricks-nav-menu > li:focus-within > a::before, [data-dn-anim~="header-reveal"] .bricks-nav-menu > li:focus-within > .brx-submenu-toggle > a::before, [data-dn-anim~="header-reveal"] .bricks-nav-menu > li.open > .brx-submenu-toggle > a::before { opacity: 1; transform: translateX(0) scale(1);} @media (hover: hover) { [data-dn-anim~="header-reveal"] .bricks-nav-menu > li:hover > a::before, [data-dn-anim~="header-reveal"] .bricks-nav-menu > li:hover > .brx-submenu-toggle > a::before { opacity: 1; transform: translateX(0) scale(1);} } /* Aus dem Punkt l\u00e4uft ein Ring heraus, solange gezeigt wird - derselbe Effekt wie am Eyebrow der \u00dcberschriften, dort l\u00e4uft er einmal beim Eintreten, hier im Takt. Der Ring liegt als zweites Pseudo-Element deckungsgleich auf dem Punkt. */ [data-dn-anim~="header-reveal"] .bricks-nav-menu > li > a::after, [data-dn-anim~="header-reveal"] .bricks-nav-menu > li > .brx-submenu-toggle > a::after { content: ""; position: absolute; top: 50%; left: -1.9rem; width: .7rem; height: .7rem; margin-top: -.35rem; border: 1px solid var(--brand); border-radius: 50%; opacity: 0; pointer-events: none; } [data-dn-anim~="header-reveal"] .bricks-nav-menu > li:focus-within > a::after, [data-dn-anim~="header-reveal"] .bricks-nav-menu > li:focus-within > .brx-submenu-toggle > a::after, [data-dn-anim~="header-reveal"] .bricks-nav-menu > li.open > .brx-submenu-toggle > a::after { /* Verz\u00f6gert, damit erst der Punkt sitzt und dann der Ring losl\u00e4uft. */ animation: dn-nav-ping 1.6s cubic-bezier(.22, .61, .36, 1) .25s infinite;} @media (hover: hover) { [data-dn-anim~="header-reveal"] .bricks-nav-menu > li:hover > a::after, [data-dn-anim~="header-reveal"] .bricks-nav-menu > li:hover > .brx-submenu-toggle > a::after { /* Verz\u00f6gert, damit erst der Punkt sitzt und dann der Ring losl\u00e4uft. */ animation: dn-nav-ping 1.6s cubic-bezier(.22, .61, .36, 1) .25s infinite;} } @keyframes dn-nav-ping { 0% { transform: scale(1); opacity: .6; } 70%, 100% { transform: scale(3.4); opacity: 0; } } /* Buttons: minimales Anheben, weiche Farbwechsel. Der Uebergang selbst steht NICHT hier, sondern als CSS-Transition-Einstellung an den beiden Button-Elementen. Von hier aus kam er nicht mehr an, seit es echte Button-Elemente sind - Bricks schreibt Element-Einstellungen als #brxe- und damit staerker als jede Klassenregel. Was am Element haengt, muss unten bei prefers-reduced-motion also auch ueber die IDs abgeraeumt werden. */ [data-dn-anim~="header-reveal"] .dn-btn { cursor: pointer; } @media (hover: hover) { [data-dn-anim~="header-reveal"] .dn-btn:hover { transform: translateY(-1px); } } [data-dn-anim~="header-reveal"] .dn-btn:active { transform: translateY(0px); } /* Kein Hover-Schatten am Umriss-Knopf: er faellt sonst auf den Auszug, der direkt darunter klebt. Die Rueckmeldung ist der Auszug selbst. */ /* Der rote Schein liegt von Anfang an unter dem Knopf - das war vorher der Zustand beim Zeigen. Beim Zeigen wird er nur noch etwas dichter. */ [data-dn-anim~="header-reveal"] .dn-btn--solid { box-shadow: 0 10px 30px rgb(var(--brand-rgb) / 0.45); } @media (hover: hover) { [data-dn-anim~="header-reveal"] .dn-btn--solid:hover { box-shadow: 0 14px 38px rgb(var(--text-rgb) / 0.28); } } /* Beide Knoepfe sind Bricks-Button-Elemente. Bricks haengt das SVG selbst an und gibt ihm `height: 1em`, es haengt also an der Schriftgroesse des Knopfes und waechst an jedem Breakpoint von allein mit. Hier steht nur noch, wie es sich zur Schrift verhaelt - beides relativ, keine px. Die Farbe steht hier mit, weil beide SVG mit currentColor zeichnen und sonst die Textfarbe des Knopfes erben wuerden. Das 24/7-Zeichen soll rot sein, die Beschriftung daneben schwarz - dafuer braucht das SVG einen eigenen Wert. Das Button-Element bietet dafuer nur `iconTypography`, und das schreibt auf `i`, also auf Icon-Fonts, nicht auf ein SVG. */ [data-dn-anim~="header-reveal"] .dn-btn--outline > svg { font-size: 1.1em; color: var(--brand); } [data-dn-anim~="header-reveal"] .dn-btn--solid > svg { font-size: .65em; } /* Der Pfeil im Kontakt-Button steht von vornherein angehoben - das war vorher der Zustand beim Zeigen und sieht als Normalfall besser aus. Beim Zeigen dreht er stattdessen eine Vierteldrehung nach links. */ [data-dn-anim~="header-reveal"] .dn-btn--solid > svg { transform: translate(2px, -2px); transition: transform .34s cubic-bezier(.22, .61, .36, 1); } @media (hover: hover) { [data-dn-anim~="header-reveal"] .dn-btn--solid:hover > svg { transform: translate(2px, -2px) rotate(-90deg); } } [data-dn-anim~="header-reveal"] .dn-btn--solid:focus-visible > svg, [data-dn-anim~="header-reveal"] .dn-btn--solid:active > svg { transform: translate(2px, -2px) rotate(-90deg); } /* Der Notdienst-Auszug klappt aus dem Knopf heraus - eine Kontur, kein zweites Element daneben. WAS HIER STEHT UND WAS NICHT. Aussehen, Groesse, Abstaende und Texte des Auszugs kommen aus Bricks; er ist eine Huelle mit echten Elementen darin (siehe tools/notdienst-panel.py). Hier steht nur, was Bricks nicht kann: das Aufklappen per clip-path und die beiden Ecken, die der Knopf beim Oeffnen flach legt. GESCHWEISST STATT GLEICH BREIT. Die Nummer ist ueber doppelt so lang wie das Wort "Notdienst". Gleiche Breite gaebe es nur gegen einen zu breiten Knopf oder eine zu kleine Nummer. Stattdessen teilen sich Knopf und Auszug die rechte Kante; der Auszug rutscht mit -1px genau auf den unteren Rand des Knopfes, sodass ein Strich entsteht und nicht zwei. ist-offen setzt das JS auf Geraeten ohne Hover - dort oeffnet der erste Tipp den Auszug, der zweite waehlt. */ [data-dn-anim~="header-reveal"] .dn-notruf-wrap:hover #brxe-btnnot, [data-dn-anim~="header-reveal"] .dn-notruf-wrap:focus-within #brxe-btnnot, [data-dn-anim~="header-reveal"] .dn-notruf-wrap.ist-offen #brxe-btnnot { /* Der Auszug liegt mit seiner Oberkante genau auf dem unteren Rand des Knopfes. Rechnerisch deckt sich das aufs Pixel, beim Zeichnen nicht immer: die Kante liegt auf einer halben Pixelzeile, und dann malt der Browser zwei Striche statt einem. Der Knopf gibt seinen unteren Rand deshalb ab, die Oberkante des Auszugs uebernimmt ihn - sie laeuft ohnehin weiter nach links. */ border-bottom-color: transparent; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } /* Der rote Pfeil hinter der Nummer, gleiche Geste wie in der Kontaktkarte: beim Zeigen eine Vierteldrehung nach links. Bricks haengt das SVG an das Button-Element und gibt ihm height: 1em, die Groesse haengt also an der Schrift der Nummer - hier steht nur das Verhaeltnis. Die Farbe muss ebenfalls hierher: das SVG zeichnet mit currentColor und wuerde sonst das Schwarz der Nummer erben. Nativ ginge es nicht, das Button-Element bietet dafuer nur iconTypography, und dessen Regel schreibt auf `i`, also auf Icon-Fonts. */ [data-dn-anim~="header-reveal"] .dn-notruf .brxe-button > svg { font-size: 0.8em; color: var(--brand); transition: transform .3s cubic-bezier(.22, .61, .36, 1); } [data-dn-anim~="header-reveal"] .dn-notruf .brxe-button:hover > svg, [data-dn-anim~="header-reveal"] .dn-notruf .brxe-button:focus-visible > svg { transform: rotate(-90deg); } [data-dn-anim~="header-reveal"] .dn-notruf { z-index: 2; pointer-events: none; clip-path: inset(0% 0% 100% 0%); transition: clip-path .3s cubic-bezier(.22, .61, .36, 1); } [data-dn-anim~="header-reveal"] .dn-notruf-wrap:hover .dn-notruf, [data-dn-anim~="header-reveal"] .dn-notruf-wrap:focus-within .dn-notruf, [data-dn-anim~="header-reveal"] .dn-notruf-wrap.ist-offen .dn-notruf { clip-path: inset(0% 0% 0% 0%); pointer-events: auto; } /* Auf dem Telefon bleibt vom Notdienst-Knopf nur das Icon uebrig. Das Button-Element gibt seinen Text als nackten Textknoten aus, den CSS nicht greifen kann - deshalb steckt das Wort in einem span. */ @media (max-width: 478px) { [data-dn-anim~="header-reveal"] .dn-btn__text { display: none; } } @media (prefers-reduced-motion: reduce) { #brx-header, [data-dn-anim~="header-reveal"] > *, [data-dn-anim~="header-reveal"] .bricks-nav-menu > li > a::before, [data-dn-anim~="header-reveal"] .dn-btn > svg { transition: none; } /* Ueber die IDs, weil der Uebergang am Element haengt. */ #brxe-btnnot, #brxe-btnkon { transition: none; } [data-dn-anim~="header-reveal"] .dn-notruf, [data-dn-anim~="header-reveal"] .dn-notruf .brxe-button > svg { transition: none; } html.dn-nav-hidden #brx-header { transform: none; } [data-dn-anim~="header-reveal"] .bricks-nav-menu > li > a::after, [data-dn-anim~="header-reveal"] .bricks-nav-menu > li > .brx-submenu-toggle > a::after { animation: none; } }