/* styles.css – Basisthema */ :root{ --bg:#f7f7fb; --card:#ffffff; --text:#222; --muted:#666; --brand:#0a66ff; --border:#e8e8ef; } * { box-sizing: border-box; } html, body { margin:0; padding:0; } body { font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; color: var(--text); background: var(--bg); } /* Navigation */ .nav { position: sticky; top: 0; z-index: 10; background: var(--card); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; } .brand { font-weight: 700; text-decoration: none; color: var(--text); } .links a { text-decoration: none; color: var(--text); margin-left: 14px; padding: 6px 10px; border-radius: 8px; } .links a:hover { background: var(--bg); } .links a.active { color: var(--brand); } /* Layout */ .container { max-width: 960px; margin: 0 auto; padding: 0 20px; } main { max-width: 800px; margin: 40px auto; padding: 0 20px; } .card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 22px; box-shadow: 0 4px 16px rgba(0,0,0,.04); } /* Typografie */ h1, h2, h3 { line-height: 1.2; margin: 0 0 12px; } p { margin: 0 0 12px; color: var(--text); } .muted { color: var(--muted); } /* Footer */ footer { margin: 50px 0 30px; text-align: center; color: var(--muted); font-size: 14px; } /* Responsiv */ @media (max-width: 640px){ .links a { margin-left: 8px; } } /* Farbalternativen – einfach die Werte oben im :root tauschen */ .theme-sky { --brand:#0a66ff; } .theme-emerald { --brand:#10b981; } .theme-violet { --brand:#7c3aed; } /* Auto-Dark-Mode */ @media (prefers-color-scheme: dark){ :root{ --bg:#0b0c10; --card:#111318; --text:#e8eaf0; --muted:#a1a6b3; --brand:#4f8cff; --border:#1f2330; } .links a:hover { background: #161922; } .card { box-shadow: 0 8px 24px rgba(0,0,0,.25); } } /* ===== Farb-Themes (hell + Dark-Mode) =============================== */ /* Anwendung: (oder theme-emerald / -violet / -amber) */ /* --- SKY: klassisch & klar (Blau) --- */ body.theme-sky{ --bg:#f7faff; --card:#ffffff; --text:#0a0a0a; --muted:#5d6b79; --brand:#0a66ff; --border:#e7ecf5; } /* --- EMERALD: frisch & ruhig (Grün) --- */ body.theme-emerald{ --bg:#f0fff8; --card:#ffffff; --text:#1b2b25; --muted:#567066; --brand:#10b981; --border:#e2f3ec; } /* --- VIOLET: kreativ & elegant (Lila) --- */ body.theme-violet{ --bg:#faf7ff; --card:#ffffff; --text:#1c1127; --muted:#6a5a7a; --brand:#7c3aed; --border:#eee7fb; } /* --- AMBER: freundlich & lebendig (Gelb/Orange) --- */ body.theme-amber{ --bg:#fffaf2; --card:#ffffff; --text:#2e2000; --muted:#7a663f; --brand:#f59e0b; --border:#f1e7d4; } /* Dark-Mode – passt Grundfarben automatisch an; Brand bleibt themenspezifisch */ @media (prefers-color-scheme: dark){ :root{ --bg:#0b0c10; --card:#111318; --text:#e8eaf0; --muted:#a1a6b3; --border:#1f2330; } /* Optional: leicht hellere Brand-Töne im Dark-Mode je Theme */ body.theme-sky { --brand:#4f8cff; } body.theme-emerald{ --brand:#34d399; } body.theme-violet{ --brand:#9a63ff; } body.theme-amber { --brand:#fbbf24; } .links a:hover { background:#161922; } .card { box-shadow:0 8px 24px rgba(0,0,0,.25); } } /* Grid für Kacheln auf der Startseite */ .tiles{ display:grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap:16px; } .tile img{ width:100%; height:140px; object-fit:cover; border-radius:12px; border:1px solid var(--border); } .tile .t-title{ font-weight:700; margin-top:10px; } .tile .t-desc{ color:var(--muted); font-size:14px; } .tile.card{ padding:14px; } /* ===== Tiles – Feintuning ========================================= */ .tiles{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:20px; align-items: stretch; } a.tile.card{ display:flex; flex-direction:column; min-height:100%; padding:16px; text-decoration:none; color:var(--text); transition: transform .12s ease, box-shadow .2s ease, background .2s ease; } a.tile.card:hover{ transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.08); } a.tile.card:focus-visible{ outline: 2px solid var(--brand); outline-offset: 4px; } .tile img{ width:100%; aspect-ratio: 16/9; /* gleichmäßige Höhe, weniger Layout-Shift */ object-fit: cover; border-radius:12px; border:1px solid var(--border); display:block; } .tile .t-title{ font-weight:700; font-size:18px; margin-top:12px; } .tile .t-desc{ color:var(--muted); font-size:14px; margin-top:4px; /* füllt den Rest, damit Footer/CTA unten klebt */ flex:1 1 auto; } /* Optional: dezenter Hover-Hintergrund */ a.tile.card:hover{ background: color-mix(in srgb, var(--bg) 70%, var(--card) 30%); } /* Reduced motion: Hover-Animationen abschwächen */ @media (prefers-reduced-motion: reduce){ a.tile.card{ transition: none; } a.tile.card:hover{ transform:none; } } /* Dark-Mode: etwas kräftigere Schatten */ @media (prefers-color-scheme: dark){ a.tile.card:hover{ box-shadow: 0 12px 30px rgba(0,0,0,.35); } } /* ===== Typo & Links ================================================== */ html { scroll-behavior: smooth; } body { line-height: 1.7; font-size: 16px; } main .card p { margin: 0 0 14px; } h1 { font-size: clamp(26px, 2.2rem, 36px); margin: 0 0 12px; line-height: 1.2; } h2 { font-size: clamp(22px, 1.8rem, 28px); margin: 18px 0 10px; line-height: 1.25; } h3 { font-size: clamp(18px, 1.3rem, 22px); margin: 16px 0 8px; line-height: 1.25; } a { color: var(--brand); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; text-decoration-color: color-mix(in srgb, var(--brand) 30%, transparent); } a:hover { text-decoration-color: var(--brand); } /* ===== Navigation: aktiver Link & Hover ============================== */ .nav .links a { padding: 6px 10px; border-radius: 10px; text-decoration: none; color: var(--text); } .nav .links a:hover { background: var(--bg); } .nav .links a.active { color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, var(--bg) 90%); border: 1px solid color-mix(in srgb, var(--brand) 25%, var(--border) 75%); } /* Tastatur-Fokus sichtbar machen */ a:focus-visible, button:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 10px; } /* ===== Code & Pre ===================================================== */ code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: 0.95em; background: color-mix(in srgb, var(--bg) 60%, var(--card) 40%); padding: 0.1em 0.35em; border-radius: 6px; border: 1px solid var(--border); } pre code { background: transparent; border: 0; padding: 0; } pre { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px; overflow: auto; box-shadow: 0 4px 16px rgba(0,0,0,.04); } /* ===== Tabellen (für Skriptum) ======================================= */ table { width: 100%; border-collapse: collapse; margin: 12px 0; } th, td { padding: 10px 12px; border: 1px solid var(--border); } th { text-align: left; background: color-mix(in srgb, var(--bg) 60%, var(--card) 40%); } tr:nth-child(even) td { background: color-mix(in srgb, var(--bg) 80%, var(--card) 20%); } /* Dark-Mode leichte Anpassungen */ @media (prefers-color-scheme: dark){ a { text-decoration-color: color-mix(in srgb, var(--brand) 40%, transparent); } .nav .links a:hover { background: #161922; } } /* ===== Print (Skriptum/Handouts) ===================================== */ @page { size: A4; margin: 15mm; } @media print { :root{ --bg:#ffffff; --card:#ffffff; --text:#000000; --muted:#333; --border:#000; } /* Grundlegendes */ html, body { background:#fff !important; } body { font-size: 12pt; line-height: 1.4; color:#000; } h1, h2, h3 { page-break-after: avoid; } /* Layout vereinfachen */ .nav, footer, .links, .btn, .tiles, .noprint { display: none !important; } main { max-width: none; margin: 0; padding: 0; } .card { border: 0; box-shadow: none; padding: 0; } /* Tabellen & Code */ table { width:100%; border-collapse: collapse; } th, td { border: 1px solid #000; padding: 6pt 8pt; } pre { white-space: pre-wrap; word-wrap: break-word; border: 1px solid #000; } code { background: transparent; border: 0; } /* Bilder nicht umbrechen */ img { max-width:100%; page-break-inside: avoid; } /* Links als Klartext-URL ausgeben */ a[href^="http"]:after { content:" (" attr(href) ")"; font-size: 9pt; color:#555; } /* Hilfsklassen */ .pagebreak { break-after: page; } /*

*/ .print-only { display: block !important; } /* Elemente nur im Druck zeigen */ } /* Im Screen verstecken wir .print-only standardmäßig */ .print-only { display:none; } /* ===== Hero-Kontrast & Button-Hover ================================== */ .page__hero--overlay .page__title, .page__hero--overlay .page__lead{ text-shadow: 0 2px 12px rgba(0,0,0,.45); } /* Primärbuttons etwas „snappier“ */ .btn--primary:hover, .btn--primary:focus{ transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0,0,0,.18); } /* Feature-Row: Button-Hover + kleine Distanz zur Excerpt-Zeile */ .feature__item .btn{ margin-top: .35rem; } .feature__item .btn:hover{ filter: brightness(1.06); transform: translateY(-1px); } /* Reduced motion: Animationen abschwächen */ @media (prefers-reduced-motion: reduce){ .btn--primary:hover, .feature__item .btn:hover{ transform:none; box-shadow:none; filter:none; } } /* ===== Pastell-Hero-Varianten ====================================== */ /* Gemeinsame Lesbarkeit (alle Varianten) */ .layout--splash.hero-blue .page__hero--overlay, .layout--splash.hero-sunset .page__hero--overlay, .layout--splash.hero-citrus .page__hero--overlay { color:#0b1220; } .layout--splash.hero-blue .page__title, .layout--splash.hero-blue .page__lead, .layout--splash.hero-sunset .page__title, .layout--splash.hero-sunset .page__lead, .layout--splash.hero-citrus .page__title, .layout--splash.hero-citrus .page__lead { text-shadow:none; } /* 1) Pastell-Blau */ .layout--splash.hero-blue .page__hero--overlay{ background-image: linear-gradient(135deg, #eaf3ff 0%, #f2f8ff 50%, #f9fcff 100%) !important; } /* 2) Sunset (soft orange → rosé → sehr hell) */ .layout--splash.hero-sunset .page__hero--overlay{ background-image: linear-gradient(135deg, #ffe8cc 0%, #ffeef0 55%, #fff9f0 100%) !important; } /* 3) Citrus (apricot → gelblich) */ .layout--splash.hero-citrus .page__hero--overlay{ background-image: linear-gradient(135deg, #ffe7d1 0%, #fff0c9 60%, #fff9e6 100%) !important; } /* Buttons auf hellem Grund: leichte Outline für Sekundärbuttons */ .layout--splash.hero-blue .btn, .layout--splash.hero-sunset .btn, .layout--splash.hero-citrus .btn{ border-color: rgba(0,0,0,.08); } /* Primärbutton bleibt deine Brand-Farbe (kommt aus head/custom oder mm-tuning) */ /* ===== Hero-Farben (Pastell) + Brand-Farbe für Buttons/Links ================= */ /* Gemeinsame Lesbarkeit */ .layout--splash.hero-blue .page__title, .layout--splash.hero-blue .page__lead, .layout--splash.hero-sunset .page__title, .layout--splash.hero-sunset .page__lead, .layout--splash.hero-citrus .page__title, .layout--splash.hero-citrus .page__lead, .layout--splash.hero-pink .page__title, .layout--splash.hero-pink .page__lead, .layout--splash.hero-green .page__title, .layout--splash.hero-green .page__lead, .layout--splash.hero-htlblue .page__title, .layout--splash.hero-htlblue .page__lead, .layout--splash.hero-tgmblue .page__title, .layout--splash.hero-tgmblue .page__lead { color:#0b1220; text-shadow:none; } /* Brand auf Variante mappen (für .btn--primary & Links) */ .layout--splash.hero-blue { --mm-brand:#0a66ff; } .layout--splash.hero-sunset { --mm-brand:#ff7a59; } /* warmes Orange */ .layout--splash.hero-citrus { --mm-brand:#f59e0b; } /* Amber */ .layout--splash.hero-pink { --mm-brand:#ec4899; } /* Pink */ .layout--splash.hero-green { --mm-brand:#10b981; } /* Grün/Emerald */ .layout--splash.hero-htlblue { --mm-brand:#1e66f5; } /* deine HTL-Blau-Variante */ .layout--splash.hero-tgmblue { --mm-brand:#00b5f0; } /* TGM/Cyan-Variante */ /* 1) Blue (bestehend) */ .layout--splash.hero-blue .page__hero--overlay{ background-image: linear-gradient(rgba(10,102,255,.26), rgba(10,102,255,.26)), /* <— hier Alpha höher = dunkler */ linear-gradient(135deg, #eaf3ff 0%, #f2f8ff 55%, #f9fcff 100%) !important; } .layout--splash.hero-blue.hero-strong .page__hero--overlay{ background-image: linear-gradient(rgba(10,102,255,.42), rgba(10,102,255,.42)), linear-gradient(135deg, #eaf3ff 0%, #f2f8ff 55%, #f9fcff 100%) !important; } /* 2) Sunset (bestehend) */ .layout--splash.hero-sunset .page__hero--overlay{ background-image: linear-gradient(rgba(255,122,89,.22), rgba(255,122,89,.22)), linear-gradient(135deg, #ffe8cc 0%, #ffeef0 55%, #fff9f0 100%) !important; } .layout--splash.hero-sunset.hero-strong .page__hero--overlay{ background-image: linear-gradient(rgba(255,122,89,.38), rgba(255,122,89,.38)), linear-gradient(135deg, #ffe8cc 0%, #ffeef0 55%, #fff9f0 100%) !important; } /* 3) Citrus (bestehend) */ .layout--splash.hero-citrus .page__hero--overlay{ background-image: linear-gradient(rgba(245,158,11,.22), rgba(245,158,11,.22)), linear-gradient(135deg, #ffe7d1 0%, #fff0c9 60%, #fff9e6 100%) !important; } .layout--splash.hero-citrus.hero-strong .page__hero--overlay{ background-image: linear-gradient(rgba(245,158,11,.38), rgba(245,158,11,.38)), linear-gradient(135deg, #ffe7d1 0%, #fff0c9 60%, #fff9e6 100%) !important; } /* 4) Pink (neu) */ .layout--splash.hero-pink .page__hero--overlay{ background-image: linear-gradient(rgba(236,72,153,.22), rgba(236,72,153,.22)), linear-gradient(135deg, #ffe3f2 0%, #fff0f7 55%, #fff8fb 100%) !important; } .layout--splash.hero-pink.hero-strong .page__hero--overlay{ background-image: linear-gradient(rgba(236,72,153,.40), rgba(236,72,153,.40)), linear-gradient(135deg, #ffe3f2 0%, #fff0f7 55%, #fff8fb 100%) !important; } /* 5) Grün (neu) */ .layout--splash.hero-green .page__hero--overlay{ background-image: linear-gradient(rgba(16,185,129,.22), rgba(16,185,129,.22)), linear-gradient(135deg, #e7f8ef 0%, #eefbf5 55%, #f7fdf9 100%) !important; } .layout--splash.hero-green.hero-strong .page__hero--overlay{ background-image: linear-gradient(rgba(16,185,129,.40), rgba(16,185,129,.40)), linear-gradient(135deg, #e7f8ef 0%, #eefbf5 55%, #f7fdf9 100%) !important; } /* HTL/TGM (wie zuvor, jetzt konsistent mit hero-strong) */ .layout--splash.hero-htlblue .page__hero--overlay{ background-image: linear-gradient(rgba(30,102,245,.26), rgba(30,102,245,.26)), linear-gradient(135deg, #dbe7ff 0%, #e7efff 55%, #f3f8ff 100%) !important; } .layout--splash.hero-htlblue.hero-strong .page__hero--overlay{ background-image: linear-gradient(rgba(30,102,245,.42), rgba(30,102,245,.42)), linear-gradient(135deg, #dbe7ff 0%, #e7efff 55%, #f3f8ff 100%) !important; } .layout--splash.hero-tgmblue .page__hero--overlay{ background-image: linear-gradient(rgba(0,181,240,.24), rgba(0,181,240,.24)), linear-gradient(135deg, #d9f3ff 0%, #e8faff 55%, #f5fdff 100%) !important; } .layout--splash.hero-tgmblue.hero-strong .page__hero--overlay{ background-image: linear-gradient(rgba(0,181,240,.40), rgba(0,181,240,.40)), linear-gradient(135deg, #d9f3ff 0%, #e8faff 55%, #f5fdff 100%) !important; } /* ===== Neue Pastell-Varianten (+ Brand-Farbe) ======================= */ .layout--splash.hero-lilac { --mm-brand:#8b5cf6; } /* Violett */ .layout--splash.hero-ocean { --mm-brand:#06b6d4; } /* Cyan/Teal */ .layout--splash.hero-mint { --mm-brand:#14b8a6; } /* Mint/Türkis */ .layout--splash.hero-amber { --mm-brand:#f59e0b; } /* Amber/Gold */ .layout--splash.hero-slate { --mm-brand:#64748b; } /* Slate/Blaugrau */ /* Lesbarkeit: dunkler Text auf Pastell */ .layout--splash.hero-lilac .page__title, .layout--splash.hero-lilac .page__lead, .layout--splash.hero-ocean .page__title, .layout--splash.hero-ocean .page__lead, .layout--splash.hero-mint .page__title, .layout--splash.hero-mint .page__lead, .layout--splash.hero-amber .page__title, .layout--splash.hero-amber .page__lead, .layout--splash.hero-slate .page__title, .layout--splash.hero-slate .page__lead { color:#0b1220; text-shadow:none; } /* --- LILAC ---------------------------------------------------------- */ .layout--splash.hero-lilac .page__hero--overlay{ background-image: linear-gradient(rgba(139,92,246,.22), rgba(139,92,246,.22)), linear-gradient(135deg, #f3ecff 0%, #f7f1ff 55%, #fcfbff 100%) !important; } .layout--splash.hero-lilac.hero-strong .page__hero--overlay{ background-image: linear-gradient(rgba(139,92,246,.40), rgba(139,92,246,.40)), linear-gradient(135deg, #f3ecff 0%, #f7f1ff 55%, #fcfbff 100%) !important; } /* --- OCEAN ---------------------------------------------------------- */ .layout--splash.hero-ocean .page__hero--overlay{ background-image: linear-gradient(rgba(6,182,212,.22), rgba(6,182,212,.22)), linear-gradient(135deg, #e6fbff 0%, #eefcff 55%, #f8feff 100%) !important; } .layout--splash.hero-ocean.hero-strong .page__hero--overlay{ background-image: linear-gradient(rgba(6,182,212,.40), rgba(6,182,212,.40)), linear-gradient(135deg, #e6fbff 0%, #eefcff 55%, #f8feff 100%) !important; } /* --- MINT ----------------------------------------------------------- */ .layout--splash.hero-mint .page__hero--overlay{ background-image: linear-gradient(rgba(20,184,166,.22), rgba(20,184,166,.22)), linear-gradient(135deg, #e7fcf6 0%, #effdf9 55%, #f8fffd 100%) !important; } .layout--splash.hero-mint.hero-strong .page__hero--overlay{ background-image: linear-gradient(rgba(20,184,166,.40), rgba(20,184,166,.40)), linear-gradient(135deg, #e7fcf6 0%, #effdf9 55%, #f8fffd 100%) !important; } /* --- AMBER ---------------------------------------------------------- */ .layout--splash.hero-amber .page__hero--overlay{ background-image: linear-gradient(rgba(245,158,11,.22), rgba(245,158,11,.22)), linear-gradient(135deg, #fff2df 0%, #fff6e9 55%, #fffaf2 100%) !important; } .layout--splash.hero-amber.hero-strong .page__hero--overlay{ background-image: linear-gradient(rgba(245,158,11,.40), rgba(245,158,11,.40)), linear-gradient(135deg, #fff2df 0%, #fff6e9 55%, #fffaf2 100%) !important; } /* --- SLATE ---------------------------------------------------------- */ .layout--splash.hero-slate .page__hero--overlay{ background-image: linear-gradient(rgba(100,116,139,.22), rgba(100,116,139,.22)), linear-gradient(135deg, #eef2f6 0%, #f3f6f9 55%, #fafbfd 100%) !important; } .layout--splash.hero-slate.hero-strong .page__hero--overlay{ background-image: linear-gradient(rgba(100,116,139,.38), rgba(100,116,139,.38)), linear-gradient(135deg, #eef2f6 0%, #f3f6f9 55%, #fafbfd 100%) !important; } :root{ /* Basis-Palette – passe sie hier zentral an */ --tgm-blue: #005aa9; /* TGM Blau */ --htl-blue: #0077c8; /* HTL Blau */ --accent-pink: #ff3ea5; /* Pink */ --accent-green: #21c36f; /* Grün */ --accent-orange: #ff7a18; /* Orange */ --accent-yellow: #ffd166; /* Gelb */ --text-hero: #0b1020; /* dunkler Text für guten Kontrast */ --text-hero-weak: rgba(11,16,32,.75); /* Gradient-Stopps (kreativ, aber dezent) */ --g1: color-mix(in oklab, var(--tgm-blue) 85%, white 15%); --g2: color-mix(in oklab, var(--htl-blue) 70%, var(--accent-orange) 30%); --g3: color-mix(in oklab, var(--accent-pink) 40%, var(--accent-yellow) 60%); --g4: color-mix(in oklab, var(--accent-green) 40%, white 60%); /* Größen/Spacing */ --radius-2xl: 1.25rem; --shadow-soft: 0 10px 30px rgba(0,0,0,.08); } /* Utility: zentrierter Inhalt */ .container{ width:min(1100px, 92%); margin-inline:auto; } .hero{ position: relative; overflow: clip; padding: clamp(4rem, 6vw, 7rem) 0; border-radius: 0 0 var(--radius-2xl) var(--radius-2xl); background: radial-gradient(1200px 800px at 10% 20%, var(--g1), transparent 60%), radial-gradient(900px 700px at 90% 10%, var(--g3), transparent 55%), linear-gradient(135deg, var(--g2), var(--g4)); color: var(--text-hero); box-shadow: var(--shadow-soft); isolation: isolate; } /* Stärkerer, kontrastreicherer Modus (du wolltest “hero-strong”) */ .hero--strong{ background: radial-gradient(1200px 800px at 15% 15%, var(--g1), transparent 60%), radial-gradient(900px 700px at 85% 20%, var(--g3), transparent 55%), linear-gradient(135deg, color-mix(in oklab, var(--htl-blue) 80%, #0e1a2b 20%), var(--g4)); } /* Deko-Layer */ .hero__bg{ position:absolute; inset:0; pointer-events:none; z-index:0; } /* sanft animierte Blobs */ .hero__blob{ position:absolute; width:46vmax; height:46vmax; border-radius:50%; filter: blur(60px); opacity:.25; mix-blend-mode:soft-light; animation: float 24s ease-in-out infinite; } .hero__blob--a{ background: radial-gradient(circle at 30% 30%, var(--accent-pink), transparent 60%); top:-20vmax; left:-10vmax; animation-delay:-6s; } .hero__blob--b{ background: radial-gradient(circle at 70% 70%, var(--accent-green), transparent 60%); bottom:-22vmax; right:-8vmax; } /* geometrisches Liniennetz */ .hero__grid{ position:absolute; inset:-10%; background-image: linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(0deg, rgba(255,255,255,.12) 1px, transparent 1px); background-size: 40px 40px; mask: radial-gradient(80% 60% at 50% 40%, #000 60%, transparent 100%); opacity:.25; transform: perspective(800px) rotateX(35deg) translateY(12%); animation: slow-pan 40s linear infinite; } /* Inhalt */ .hero__inner{ position:relative; z-index:1; text-align:center; } .hero__title{ font-size: clamp(2.2rem, 4.5vw, 4rem); line-height: 1.05; letter-spacing: -0.01em; margin: 0 0 .75rem; font-weight: 800; } .hero__subtitle{ font-size: clamp(1.05rem, 1.6vw, 1.25rem); max-width: 65ch; margin: 0 auto 1.75rem; color: var(--text-hero-weak); } /* Buttons */ .btn{ display:inline-flex; gap:.6rem; align-items:center; justify-content:center; padding:.9rem 1.1rem; border-radius: .85rem; font-weight: 600; text-decoration:none; border:1px solid transparent; transition: transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease; box-shadow: 0 6px 16px rgba(0,0,0,.06); } .btn--primary{ background: linear-gradient(135deg, var(--tgm-blue), var(--htl-blue)); color: #fff; } .btn--primary:hover{ transform: translateY(-2px); } .btn--ghost{ background: rgba(255,255,255,.65); border-color: rgba(0,0,0,.06); color: var(--text-hero); } .btn--ghost:hover{ background: rgba(255,255,255,.85); transform: translateY(-2px); } /* Bewegungen */ @keyframes float{ 0%,100%{ transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(2vmax,-2vmax,0) scale(1.05); } } @keyframes slow-pan{ 0% { background-position: 0 0, 0 0; } 100% { background-position: 200px 200px, 200px 200px; } } /* Respektiere reduzierte Bewegung */ @media (prefers-reduced-motion: reduce){ .hero__blob, .hero__grid { animation: none; } } /* Optional: Dark Mode (wenn du body[data-theme="dark"] nutzt) */ @media (prefers-color-scheme: dark){ .hero{ color: #f4f6fb; --text-hero: #f4f6fb; --text-hero-weak: rgba(244,246,251,.8); box-shadow: none; } .btn--ghost{ background: rgba(0,0,0,.25); color:#fff; border-color: rgba(255,255,255,.12);} .btn--ghost:hover{ background: rgba(0,0,0,.35); } }