@media (max-width: 30rem) { .usp__title em, .prod__title em, .herst__title em, .rez__title em, .karr__title em, .b2b__title em, .kontakt__title em, .pshops__title em, .pdaten__title em, .pverw__title em, .psorten__title em, .kavorteile__title em, .kastimmen__title em, .kawege__title em, .bogenhero__title em, .pukopf__title em, .pusicht__ueber em, .puwofuer__ueber em, .pukern__title em, .puwege__title em, .unwege__ueber em, .fewege__ueber em, .fekopf__title em, .blneu__ueber em, .blliste__ueber em, .blwege__ueber em, .unsaeulen__ueber em, .bildband__title em, .hiheute__title em, .heweg__ueber em, .heschael__title em, .hesicher__ueber em, .hewege__title em { font-size: 1.5em; } } /* ========================================================================== Reveal: Sektionsinhalte fahren beim Scrollen von unten ein Nicht die Sektion als Ganzes - eine 1200px hohe Flaeche, die sich um 24px bewegt, liest sich als Ruckeln, nicht als Bewegung. Bewegt werden die Bloecke darin: Kopfzeile, dann die Karten, leicht versetzt. Das ergibt die Bewegung, die man meint, wenn man "Sektion slidet rein" sagt. 24px Weg, 700ms, 80ms Versatz pro Nachbar. Weiter und langsamer wirkt traege, kuerzer sieht man nicht mehr. Nur opacity und transform - beides laeuft im Compositor, kein Layout, also kein Layout-Shift. CLS bleibt bei 0. Der versteckte Zustand haengt an html.js-reveal, und die Klasse setzt ein Inline-Skript im Kopf. Ohne JavaScript oder ohne IntersectionObserver steht alles sichtbar da - Inhalt darf nicht an einer Animation haengen. Die Klasse .is-in setzt der Observer, --reveal-i die Position unter den Geschwistern. Beides aus dem Skript, weil die Anzahl der Karten aus dem CMS kommt und in CSS nicht bekannt ist. ========================================================================== */ /* Bewegt wird ueber die Einzeleigenschaft translate, NICHT ueber transform. Grund: mit transform kollidierte das Reveal mit dem Hover der Karten. ".js-reveal [data-reveal].is-in" hat drei Selektoren, ".prod__card:hover" nur zwei - die Endstellung "transform: none" gewann also und das Anheben beim Hover fand nicht statt. Aufgefallen ist es nicht, weil Schatten und Bildzoom weiter funktionierten: der Schatten haengt an box-shadow, der Zoom am und nicht am eingeblendeten Element. translate und transform sind getrennte Eigenschaften und werden nacheinander angewandt. Das Reveal nutzt jetzt translate, der Hover weiterhin transform, und beide kommen sich nicht mehr in die Quere. */ /* DIE EINBLENDUNG LAEUFT ALS ANIMATION, NICHT ALS TRANSITION. Vorher stand hier eine transition mit dem Kuerzel. Das Kuerzel setzt transition-property, und ".js-reveal [data-reveal]" hat zwei Selektoren - damit loeschte diese Regel JEDE Transition, die an einer Karte selbst stand. Anheben und Schatten sprangen ohne Uebergang; der Hover wirkte hart. Ausgeglichen wurde das mit einer handgefuehrten Ausnahmeliste, in der jede Karte einzeln stehen musste. Die Liste ist VIERMAL unvollstaendig gewesen: .stkarte, dann .kaweg, und bei der Erhebung am 28.08.2026 fehlten gleichzeitig acht Kartenarten - .gbart, .gbfehlt, .hazgkarte, .karr__media, .kabereich, .kaweg, .stdbewerb__karte und .pverw__karte, letztere auf der Produktseite und .stdbewerb__karte auf vierzehn Stellenseiten. Eine Animation beruehrt transition-property nicht. Damit behaelt jede Karte ihre eigenen Uebergaenge, ohne irgendwo eingetragen zu sein - die Falle ist nicht entschaerft, sondern weg. ANIMIERT WERDEN NUR opacity UND translate. Der Hover der Karten laeuft ueber transform und box-shadow, also ueber andere Eigenschaften: die Animation und der Hover koennen sich nicht in die Quere kommen. Genau dafuer war der Wechsel von transform auf translate in einer frueheren Runde gedacht. forwards haelt den Endzustand. Ohne das faellt die Karte nach Ablauf der Animation auf opacity 0 zurueck. */ .js-reveal [data-reveal] { opacity: 0; translate: 0 var(--reveal-shift); } .js-reveal [data-reveal].is-in { animation: toem-reveal var(--dur-reveal) var(--ease-reveal) forwards; animation-delay: calc(var(--reveal-i, 0) * var(--reveal-step)); } @keyframes toem-reveal { from { opacity: 0; translate: 0 var(--reveal-shift); } to { opacity: 1; translate: 0 0; } } /* Der globale Reduced-Motion-Block kuerzt nur die Dauer - das waere hier ein hartes Aufblitzen. Also gar nicht erst verstecken. */ @media (prefers-reduced-motion: reduce) { .js-reveal [data-reveal] { opacity: 1; translate: none; } .js-reveal [data-reveal].is-in { animation: none; } } /* ========================================================================== Trefferflaechen auf Touch-Geraeten Gemessen waren die Links im Footer bei 36-42px und die drei Kontakt-Links bei 40. WCAG 2.5.8 verlangt 24px, Apple und Google empfehlen 44 bzw. 48 - unter 44 wird das Tippen unzuverlaessig. Der Block haengt an (hover: none), greift also nur auf Touch-Geraeten. Das Desktop-Layout bleibt unangetastet, auch die Footer-Hoehe. Die frueheren Topbar-Regeln sind mit der Topbar entfallen. ========================================================================== */ @media (hover: none) { /* Die Icons im Kopf sind auf dem Desktop 36px, weil dort der Platz fehlt. Mit dem Finger reicht das nicht. MINDESTMASS, KEINE GROESSE. Als width stand hier eine feste Zahl, und feinschliff.css laedt nach header.css - GEMESSEN blieben die Marken im Vollbildmenue deshalb bei 44 px, obwohl dort 48 gesetzt sind. Eine Untergrenze hebt an, was zu klein ist, und laesst groessere in Ruhe. */ .social__link { min-width: 2.75rem; min-height: 2.75rem; } .skip-link { display: inline-flex; align-items: center; min-height: 2.75rem; } .kontakt__target a, .footer__contact a, .footer__legal a, .footer__cookie { min-height: 2.75rem; } /* block -> flex, damit min-height auch bei einzeiligem Label traegt. */ .footer__col a { display: flex; align-items: center; min-height: 2.75rem; } } @media (max-width: 24rem) { .hero__lead br { display: none; } /* Bei 280px verfuegbarer Breite traegt die Schreibschrift rund 44px. */ .usp__title em, .prod__title em, .herst__title em, .rez__title em, .karr__title em, .b2b__title em, .kontakt__title em, .pshops__title em, .pdaten__title em, .pverw__title em, .psorten__title em, .kavorteile__title em, .kastimmen__title em, .kawege__title em, .bogenhero__title em, .pukopf__title em, .pusicht__ueber em, .puwofuer__ueber em, .pukern__title em, .puwege__title em, .unwege__ueber em, .blneu__ueber em, .blliste__ueber em, .blwege__ueber em, .unsaeulen__ueber em, .bildband__title em, .hiheute__title em, .heweg__ueber em, .heschael__title em, .hesicher__ueber em, .hewege__title em { font-size: 1.28em; } }