/* ============================================================================ ATAV — Massystem ---------------------------------------------------------------------------- Eine einzige Stelle, an der steht, welche Werte es auf der Webseite geben darf. Alles andere greift nur noch hierauf zu. Warum: gemessen am 05.08.2026 waren im Umlauf 69 verschiedene Schriftgroessen (allein auf /services 23) 151 verschiedene Innenabstaende 18 verschiedene Eckrundungen 100 verschiedene Farben Darunter Groessen wie 14.08 / 14.4 / 14.72 / 14.88 / 15.2 px nebeneinander. Der Unterschied ist mit dem Auge nicht zu sehen, sorgt aber dafuer, dass nichts zueinander passt. Diese Datei aendert von sich aus nichts. Sie wirkt erst, wenn eine Seite ihre Werte darueber bezieht. ========================================================================== */ :root{ /* --------------------------------------------------------------------- Schrift — sieben Stufen statt neunundsechzig Die Zahlen folgen einer Vierteilung: jede Stufe ist deutlich genug von der naechsten entfernt, dass der Unterschied sichtbar ist. --------------------------------------------------------------------- */ --schrift-xs: 0.8125rem; /* 13px — Fussnoten, Bildunterschriften */ --schrift-s: 0.875rem; /* 14px — Nebentext, Beschriftungen */ --schrift-m: 1rem; /* 16px — Fliesstext */ --schrift-l: 1.125rem; /* 18px — Einleitungen */ --schrift-xl: 1.3125rem; /* 21px — kleine Ueberschrift (h3) */ --schrift-2xl: 1.75rem; /* 28px — Abschnittsueberschrift (h2) klein */ --schrift-3xl: clamp(1.75rem, 3.4vw, 2.5rem); /* 28–40px — h2 */ --schrift-4xl: clamp(2.25rem, 5vw, 3.5rem); /* 36–56px — h1 */ /* Schriftschnitte — vier statt neun */ --fett-normal: 400; --fett-halb: 600; --fett-krftg: 700; --fett-stark: 800; /* Zeilenabstaende */ --zeile-eng: 1.15; /* grosse Ueberschriften */ --zeile-mittel:1.4; /* kleine Ueberschriften */ --zeile-weit: 1.65; /* Fliesstext */ /* --------------------------------------------------------------------- Abstaende — eine Vierer-Reihe Jeder Abstand auf der Seite ist ein Vielfaches von 4. Damit rasten Karten, Texte und Felder automatisch aufeinander ein. --------------------------------------------------------------------- */ --raum-1: 4px; --raum-2: 8px; --raum-3: 12px; --raum-4: 16px; --raum-5: 24px; --raum-6: 32px; --raum-7: 48px; --raum-8: 64px; --raum-9: 96px; /* Abstand zwischen Abschnitten — waechst mit dem Fenster mit */ --abschnitt: clamp(3.5rem, 7vw, 6rem); /* 56–96px */ /* --------------------------------------------------------------------- Eckrundungen — drei statt achtzehn --------------------------------------------------------------------- */ --rund-s: 8px; /* Felder, kleine Marken */ --rund-m: 16px; /* Karten */ --rund-voll: 999px; /* Pillen, Knoepfe */ /* --------------------------------------------------------------------- Farben — die tatsaechlich gebrauchten Rot und Dunkelblau sind die bestehenden Markenfarben der Live-Seite und bleiben unveraendert. --------------------------------------------------------------------- */ --rot: #D60000; --rot-hell: #ff3333; --rot-dunkel: #8b0000; --marine: #1e2a40; --marine-mittel:#2d426c; --marine-hell: #3b5998; --weiss: #ffffff; --grund: #f8f9fa; --text: #1e2a40; --text-weich: #555555; --text-leise: #888888; --text-hell: #ffffff; --linie: rgba(0,0,0,.08); --linie-stark: rgba(0,0,0,.14); --linie-hell: rgba(255,255,255,.15); /* --------------------------------------------------------------------- Schatten — drei Stufen --------------------------------------------------------------------- */ --schatten-s: 0 2px 10px rgba(0,0,0,.06); --schatten-m: 0 10px 30px rgba(0,0,0,.10); --schatten-l: 0 20px 60px rgba(214,0,0,.15); /* --------------------------------------------------------------------- Bewegung --------------------------------------------------------------------- */ --takt: cubic-bezier(.22,.7,.28,1); --dauer-kurz: .25s; --dauer: .4s; --dauer-lang: .7s; /* --------------------------------------------------------------------- Breiten --------------------------------------------------------------------- */ --breite-inhalt: 1200px; --breite-text: 68ch; /* angenehme Lesebreite */ } /* ============================================================================ Karten — ein Bauplan fuer alle Kartenarten ---------------------------------------------------------------------------- Auf /services gab es Karten mit 6, 8, 10, 12, 14, 16, 20 und 50 px Rundung und mit sieben verschiedenen Innenabstaenden. Ab hier haben alle Karten dieselben Masse; Unterschiede entstehen nur noch ueber Zusatzklassen. ========================================================================== */ .k-karte{ background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--rund-m); padding: var(--raum-6); transition: transform var(--dauer) var(--takt), box-shadow var(--dauer), border-color var(--dauer); } .k-karte:hover{ transform: translateY(-6px); box-shadow: var(--schatten-l); border-color: rgba(214,0,0,.3); } /* Karten in einer Reihe sind gleich hoch, egal wie lang der Text ist. Das war bisher der auffaelligste Bruch: Karten nebeneinander endeten auf unterschiedlicher Hoehe. */ .k-reihe{ display: grid; gap: var(--raum-5); align-items: stretch; } .k-reihe > *{ display: flex } .k-reihe > * > .k-karte{ width: 100%; display: flex; flex-direction: column } .k-reihe--2{ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) } .k-reihe--3{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) } .k-reihe--4{ grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) } /* ============================================================================ Abschnittskoepfe — Augenbraue, Ueberschrift, Einleitung ========================================================================== */ .k-kopf{ text-align: center; max-width: 760px; margin: 0 auto var(--raum-7) } .k-kopf h2{ font-size: var(--schrift-3xl); font-weight: var(--fett-stark); line-height: var(--zeile-eng); letter-spacing: -.02em; margin: 0 0 var(--raum-3); } .k-kopf p{ font-size: var(--schrift-l); line-height: var(--zeile-weit); color: var(--text-weich); margin: 0; } .k-strich{ width: 80px; height: 4px; border-radius: 2px; margin: 0 auto var(--raum-5); background: linear-gradient(90deg, var(--rot), #ffaa00); } /* ============================================================================ Knoepfe ========================================================================== */ .k-knopf{ display: inline-flex; align-items: center; justify-content: center; gap: var(--raum-2); padding: var(--raum-4) var(--raum-7); border-radius: var(--rund-voll); border: 1px solid transparent; font-size: var(--schrift-m); font-weight: var(--fett-stark); text-decoration: none; cursor: pointer; transition: transform var(--dauer) var(--takt), box-shadow var(--dauer); } .k-knopf:hover{ transform: translateY(-3px) } .k-knopf--voll{ background: linear-gradient(135deg, var(--rot), var(--rot-hell)); color: var(--text-hell) !important; box-shadow: 0 4px 25px rgba(214,0,0,.4); } .k-knopf--voll:hover{ box-shadow: 0 8px 35px rgba(214,0,0,.5) } .k-knopf--linie{ border-color: currentColor; background: transparent } /* ============================================================================ Hilfen ========================================================================== */ .k-inhalt{ max-width: var(--breite-inhalt); margin: 0 auto; padding: 0 var(--raum-5) } .k-abschnitt{ padding: var(--abschnitt) 0 } .k-lesetext{ max-width: var(--breite-text) } /* ============================================================================ 15 Leben — Bewegung, die den Inhalt traegt statt ihn zu ueberdecken ---------------------------------------------------------------------------- Zwei Grundsaetze: - Die Bewegung rechnet der Browser selbst (CSS-Scrollzeitachsen). Das ruckelt nicht und kostet keine Ladezeit. - Nichts darf unsichtbar bleiben, wenn die Bewegung ausfaellt. Deshalb gibt es zu jedem Effekt einen Rueckweg. ========================================================================== */ /* ---- Symbole ------------------------------------------------------------- */ .atav-symbol{ display:block; flex-shrink:0 } /* Symbol im runden Traeger bewegt sich beim Ueberfahren der Karte leicht mit */ .sv-type-icon .atav-symbol, .k-karte .atav-symbol{ transition: transform var(--dauer) var(--takt) } .k-karte:hover .atav-symbol, .sv-type-card:hover .atav-symbol{ transform: scale(1.08) rotate(-3deg) } /* ---- Aufziehen beim Scrollen -------------------------------------------- */ .e-auf{ opacity:0; transform: translateY(24px) } @supports (animation-timeline: view()){ .e-auf{ animation: e-aufziehen linear both; animation-timeline: view(); animation-range: entry 6% cover 28%; } } @keyframes e-aufziehen{ to{ opacity:1; transform:none } } /* Rueckweg 1: das Skript setzt .e-da, wenn die Zeitachse fehlt */ .e-auf.e-da{ opacity:1; transform:none; transition: opacity .8s var(--takt), transform .8s var(--takt) } /* Rueckweg 2: nichts bleibt haengen, wenn gar kein Skript laeuft */ .e-auf.e-frei{ opacity:1 !important; transform:none !important; animation:none !important } /* Gestaffelt: Karten einer Reihe kommen nacheinander statt gleichzeitig */ .e-staffel > *:nth-child(1){ animation-delay: 0ms } .e-staffel > *:nth-child(2){ animation-delay: 70ms } .e-staffel > *:nth-child(3){ animation-delay: 140ms } .e-staffel > *:nth-child(4){ animation-delay: 210ms } .e-staffel > *:nth-child(5){ animation-delay: 280ms } .e-staffel > *:nth-child(6){ animation-delay: 350ms } /* ---- Schimmer folgt dem Zeiger ------------------------------------------ */ .e-schimmer{ position: relative; overflow: hidden } .e-schimmer::after{ content:''; position:absolute; inset:0; pointer-events:none; opacity:0; background: radial-gradient(380px circle at var(--zx,50%) var(--zy,50%), rgba(214,0,0,.07), transparent 62%); transition: opacity var(--dauer); } .e-schimmer:hover::after{ opacity:1 } /* auf dunklem Grund ein warmer statt roter Schein */ .sv-dark .e-schimmer::after, .e-schimmer--hell::after{ background: radial-gradient(380px circle at var(--zx,50%) var(--zy,50%), rgba(255,255,255,.08), transparent 62%); } /* ---- Feiner Hub beim Ueberfahren ---------------------------------------- */ .e-hebt{ transition: transform var(--dauer) var(--takt), box-shadow var(--dauer), border-color var(--dauer) } .e-hebt:hover{ transform: translateY(-6px); box-shadow: var(--schatten-l) } /* ---- Zahlen, die hochzaehlen -------------------------------------------- */ .e-zahl{ font-variant-numeric: tabular-nums } /* ---- Trennlinie mit Verlauf --------------------------------------------- */ .e-linie{ position: relative } .e-linie::before{ content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width: min(560px, 70%); height:1px; background: linear-gradient(90deg, transparent, var(--rot), transparent); opacity:.5; } /* ---- Wer Bewegung abbestellt hat, bekommt keine -------------------------- */ @media (prefers-reduced-motion: reduce){ .e-auf{ opacity:1 !important; transform:none !important; animation:none !important } .e-hebt:hover, .k-karte:hover{ transform:none } .k-karte:hover .atav-symbol, .sv-type-card:hover .atav-symbol{ transform:none } .e-schimmer::after{ display:none } }