/* ========================================================================== 00 – GRUNDLAGEN: Reset, Schriftdateien, Farben, globale Einblend-Animationen ========================================================================== Diese Datei wird auf JEDER Seite geladen. Hier NUR Dinge eintragen, die wirklich überall gelten – seitenspezifisches Aussehen gehört in die jeweilige Datei (z. B. 07-kompetenzen.css). ========================================================================== */ /* -------------------------------------------------------------------- SCHRIFT: PT Sans – lokal im Theme, NICHT von Google geladen -------------------------------------------------------------------- Aus Datenschutzgründen (DSGVO) läuft beim Seitenaufruf keine Verbindung mehr zu fonts.googleapis.com/fonts.gstatic.com auf. Die Schriftdateien liegen unter assets/fonts/ und werden hier direkt eingebunden. Je Schriftschnitt zwei Dateien (zwei "unicode-range"): "latin" deckt die Grundzeichen inkl. deutscher Umlaute/ß ab, "latin-ext" ergänzt weitere mitteleuropäische Sonderzeichen. Der Browser lädt von beiden automatisch nur die tatsächlich gebrauchte Datei. -------------------------------------------------------------------- */ @font-face { font-family: 'PT Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/pt-sans-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'PT Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/pt-sans-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'PT Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/pt-sans-400italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'PT Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/pt-sans-400italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'PT Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/pt-sans-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'PT Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/pt-sans-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Basis-Reset: keine Standard-Innen-/Außenabstände, einheitliches Box-Modell */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ------------------------------------------------------------------------ FARBPALETTE & SCHRIFT Zentrale Design-Werte als CSS-Variablen. Farbe ändern = hier EINMAL ändern, wirkt automatisch auf der ganzen Website. ------------------------------------------------------------------------ */ :root { --blue: #0096FF; /* Markenfarbe Blau (Buttons, Akzente, Links) */ --blue-dk: #0078CC; /* Dunkleres Blau (Hover-Zustand von Buttons/Links) */ --blue-lt: #EBF5FF; /* Helles Blau (Hintergrund von Badges, Hover-Flächen) */ --black: #1C1C1B; /* Haupttextfarbe (Überschriften) */ --gray: #464E54; /* Fließtextfarbe */ --gray-lt: #F4F4F4; /* Helle Grau-Fläche (abwechselnde Sektions-Hintergründe) */ --line: #E0E0DC; /* Trennlinien, Rahmen */ --white: #FFFFFF; } html { font-family: 'PT Sans', Arial, sans-serif; color: var(--black); background: var(--white); } /* ------------------------------------------------------------------------ GLOBALE EINBLEND-ANIMATIONEN ------------------------------------------------------------------------ fadeUp: Inhalt blendet sanft von unten ein (Hero-Texte, Karten-Inhalte) blink: langsames Pulsieren (der kleine Punkt vor Eyebrow-Texten) lineGrow: eine Linie "wächst" von 0 auf volle Breite Die Klassen .a1–.a4 lösen dieselbe Animation zeitversetzt aus (12/22/32 Hundertstelsekunden Verzögerung) – damit blenden z. B. Eyebrow, Überschrift, Text und Buttons im Hero nacheinander statt gleichzeitig ein. ------------------------------------------------------------------------ */ @keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } } @keyframes lineGrow { from { width: 0; } to { width: 48px; } } .a1 { animation: fadeUp .75s cubic-bezier(.22,1,.36,1) both; } .a2 { animation: fadeUp .75s .12s cubic-bezier(.22,1,.36,1) both; } .a3 { animation: fadeUp .75s .22s cubic-bezier(.22,1,.36,1) both; } .a4 { animation: fadeUp .75s .32s cubic-bezier(.22,1,.36,1) both; } /* Nutzer mit "Bewegung reduzieren" (Betriebssystem-Einstellung) bekommen den Inhalt sofort sichtbar statt animiert – Barrierefreiheit. */ @media (prefers-reduced-motion: reduce) { .a1, .a2, .a3, .a4 { animation: none; opacity: 1; transform: none; } } /* Etwas engerer Zeilenabstand für große Überschriften auf kleinen Bildschirmen (gilt seitenübergreifend). */ @media (max-width: 600px) { h1 { line-height: 1.1; } h2 { line-height: 1.15; } }