/* ============================================================ Zentrales Design der UDM-Webseite (alle Seiten). Wird am ENDE des eingebunden, damit es gleichrangige Regeln aus den Seiten-Styles ueberstimmt: Kopfleisten-MARKUP wird von build-site-header.ps1 gestempelt. ============================================================ */ /* ===== Kopfleiste ===== */ .version-bar.sh-bar { display: flex; justify-content: flex-start; align-items: center; gap: 0; padding: 0.55rem 2rem; min-height: 72px; background: #f0f4f8; border-bottom: 1px solid #d5dce6; box-shadow: 0 1px 4px rgba(0,0,0,0.08); position: relative; text-align: left; flex-wrap: nowrap; } .sh-bar .sh-logo { display: inline-flex; align-items: center; text-decoration: none; } .sh-bar .sh-logo img { height: 52px; margin: 0; display: block; } .sh-bar .head-nav { margin-left: auto; display: flex; gap: 1.6rem; align-items: center; margin-right: 1.75rem; } .sh-bar .head-nav a { color: #334155; text-decoration: none; font-size: 0.95rem; font-weight: 600; transition: color 0.15s ease; } .sh-bar .head-nav a:hover { color: #2b6cb0; } .sh-bar .head-nav a.on { color: #2b6cb0; border-bottom: 2px solid #2b6cb0; padding-bottom: 1px; } .sh-bar #demo-cta { margin-left: 0; background: linear-gradient(135deg, #2b6cb0 0%, #4299e1 100%); color: #fff; text-decoration: none; font-size: 0.9rem; font-weight: 600; padding: 0.55rem 1.4rem; border-radius: 8px; white-space: nowrap; box-shadow: 0 3px 10px rgba(43,108,176,0.35); transition: transform 0.2s ease, box-shadow 0.2s ease; } .sh-bar #demo-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(43,108,176,0.45); } .sh-bar #demo-cta .arr { display: inline-block; margin-left: 0.25rem; transition: transform 0.2s ease; } .sh-bar #demo-cta:hover .arr { transform: translateX(4px); } @media (max-width: 900px) { .sh-bar .head-nav { gap: 1rem; margin-right: 1rem; } .sh-bar .head-nav a { font-size: 0.85rem; } } @media (max-width: 700px) { .sh-bar .head-nav { display: none; } .sh-bar #demo-cta { margin-left: auto; } } @media (max-width: 640px) { .version-bar.sh-bar { padding: 0.5rem 1rem; min-height: 56px; } .sh-bar .sh-logo img { height: 40px; } .sh-bar #demo-cta { font-size: 0.78rem; padding: 0.4rem 0.9rem; } } @media print { .sh-bar .head-nav, .sh-bar #demo-cta { display: none; } } /* ===== Kapitel-Design: Abstaende, Hintergrund-Wechsel, Icon-Medaillons ===== */ section { padding: 8rem 0; background: #fff; position: relative; } section:nth-of-type(even):not(.cta-section):not(.hero) { background: #e9f0f8; } .sec-medallion { position: absolute; top: 0; left: 50%; transform: translate(-50%, -25%); width: 58px; height: 58px; border-radius: 50%; background: #fff; border: 1px solid #cfe0f5; box-shadow: 0 6px 18px rgba(43,108,176,0.18); display: flex; align-items: center; justify-content: center; z-index: 6; } .sec-medallion svg { width: 26px; height: 26px; stroke: #2b6cb0; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 640px) { section { padding: 4.5rem 0 4rem; } .sec-medallion { width: 48px; height: 48px; } .sec-medallion svg { width: 22px; height: 22px; } } @media print { section { padding: 2rem 0; } .sec-medallion { display: none; } } /* ===== Sanfter Seitenwechsel (View Transitions, progressiv) ===== Die Kopfleiste bekommt eine eigene, nicht animierte Transition-Gruppe: sie steht dadurch fest, waehrend der Inhalt ueberblendet. */ @view-transition { navigation: auto; } #page-head { view-transition-name: site-header; } ::view-transition-group(site-header), ::view-transition-image-pair(site-header), ::view-transition-old(site-header), ::view-transition-new(site-header) { animation: none; } /* Die Ueberblendung uebernimmt die Einschweb-Animation unten, nicht die Snapshots */ ::view-transition-old(root), ::view-transition-new(root) { animation: none; } @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } } /* Seiteninhalt schwebt beim Laden sanft ein (alle Browser, Kopfleiste bleibt fest). @starting-style startet die Bewegung beim ERSTEN Rendern des Elements und pinnt im Gegensatz zu einer Animation keine Werte fest (wichtig fuer die Galerie-Leiste, deren Zuklappen ueber transform laeuft, deshalb ist sie ausgenommen). */ #page-head ~ *:not(#gal-dock):not(script) { transition: opacity 1s ease-out, transform 1s cubic-bezier(0.16, 1, 0.3, 1); } @starting-style { #page-head ~ *:not(#gal-dock):not(script) { opacity: 0; transform: translateY(26px); } } /* Ausstieg: site-header.js setzt die Klasse beim Klick auf interne Links, der Inhalt verabschiedet sich kurz nach oben, bevor navigiert wird. */ html.page-leave #page-head ~ *:not(#gal-dock):not(script) { opacity: 0; transform: translateY(-16px); transition: opacity 0.24s ease-in, transform 0.24s ease-in; } @media (prefers-reduced-motion: reduce) { #page-head ~ *:not(#gal-dock):not(script) { transition: none; } } /* ===== Fakten-Zeile unter dem Hero ===== */ .fact-row { display: flex; justify-content: center; align-items: center; gap: 1.1rem; flex-wrap: wrap; max-width: 1000px; margin: 2.25rem auto 8rem; padding: 0 2rem; color: #64748b; font-size: 0.9rem; font-weight: 500; } .fact-row i { width: 4px; height: 4px; border-radius: 50%; background: #cbd5e1; } @media (max-width: 640px) { .fact-row { gap: 0.6rem; font-size: 0.8rem; margin-bottom: 4.5rem; } } /* ===== Hero-Rahmen: einheitliche Form und Hoehe ===== */ .hero { background: linear-gradient(135deg, #0a1628 0%, #1a365d 40%, #2b6cb0 100%); color: #fff; padding: 5rem 0 4.5rem; min-height: 540px; display: flex; align-items: center; position: relative; overflow: hidden; } .hero > .container { width: 100%; position: relative; z-index: 2; } .hero::after { content: ""; position: absolute; bottom: -2px; left: 0; right: 0; height: 60px; background: #f0f4f8; clip-path: ellipse(55% 100% at 50% 100%); border-radius: 0; z-index: 1; } .hero h1 { color: #fff; font-size: 2.8rem; line-height: 1.2; margin-bottom: 1rem; } .hero .tagline { font-size: 1.2rem; opacity: 0.9; line-height: 1.45; } .hero-kicker { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #9ac1e8; margin-bottom: 0.75rem; } .hero-split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3rem; align-items: center; text-align: left; } .hero-cta { display: inline-block; background: #fff; color: #1a365d; font-weight: 700; font-size: 1.05rem; padding: 0.7rem 1.8rem 0.8rem; border-radius: 10px; text-decoration: none; text-align: center; box-shadow: 0 6px 20px rgba(0,0,0,0.3); transition: transform 0.2s ease, box-shadow 0.2s ease; } .hero-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,0.35); } .hero-cta .sub { display: block; font-size: 0.76rem; font-weight: 600; color: #64748b; margin-top: 0.15rem; } @media (max-width: 900px) { .hero-split { grid-template-columns: 1fr; text-align: center; gap: 0; } } @media (max-width: 640px) { .hero { padding: 3rem 0; min-height: 0; } .hero h1 { font-size: 1.75rem; } .hero-kicker { font-size: 0.72rem; } .hero-cta { font-size: 0.95rem; padding: 0.7rem 1.4rem; } } @media print { .hero { min-height: 0; padding: 2rem 0; } .hero::after { display: none; } }