/* ============================================================ KOPFBEREICH DER UNTERSEITEN ------------------------------------------------------------ Leistungsseiten, Blog, Impressum, Datenschutz und die 404-Seite hatten einen eigenen, anders aussehenden Kopfbereich. Diese Datei gleicht ihn optisch exakt an den der Startseite an: - beim Seitenanfang transparent mit leichtem Weichzeichner, beim Scrollen dunkler, kompakter und mit feiner Trennlinie - rundes Logo, Name in der Anzeigeschrift, Untertitel in Gold - schlichte Textlinks, rechts die goldene Schaltflaeche - auf dem Handy ein Menuesymbol mit aufklappender Liste Die Datei wird in den Unterseiten ganz am Ende des eingebunden, damit sie die dort fest eingebauten Regeln ueberschreibt. Das Verhalten steuert rm-subpage-header.js. ============================================================ */ :root { --rm-h-bg: 220 25% 7%; --rm-h-fg: 210 20% 96%; --rm-h-gold: 42 65% 58%; --rm-h-line: 220 15% 18%; } /* ---------- Leiste ---------- */ header.site { position: fixed; inset: 0 0 auto 0; z-index: 50; padding: 20px 0; background: hsl(var(--rm-h-bg) / .5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-bottom: 1px solid transparent; box-shadow: none; transition: padding .3s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease; } /* Sobald die Seite gescrollt ist (Klasse setzt das Skript). */ header.site.is-scrolled { padding: 12px 0; background: hsl(var(--rm-h-bg) / .9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: hsl(var(--rm-h-line)); box-shadow: 0 1px 2px rgba(0, 0, 0, .35); } header.site .wrap.nav { /* Gleiche Breite wie der uebrige Seiteninhalt (.wrap), damit Logo und Text buendig untereinander stehen. */ max-width: 1080px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: nowrap; } /* ---------- Logo und Name ---------- */ header.site .brand { display: flex; align-items: center; gap: 12px; color: hsl(var(--rm-h-fg)); } header.site .brand img { height: 48px; width: 48px; object-fit: contain; } header.site .brand b { display: block; font-family: 'Outfit', system-ui, sans-serif; font-weight: 700; font-size: 1.25rem; line-height: 1; letter-spacing: -.01em; color: hsl(var(--rm-h-fg)); } header.site .brand small { display: block; margin-top: .125rem; font-size: .75rem; font-weight: 500; letter-spacing: .025em; text-transform: uppercase; color: hsl(var(--rm-h-gold)); } /* ---------- Navigation ---------- */ header.site nav { display: flex; align-items: center; gap: 2rem; } header.site nav a { padding: 0; border-radius: 0; font-size: .875rem; font-weight: 500; color: hsl(var(--rm-h-fg) / .8); transition: color .2s; } header.site nav a:hover { color: hsl(var(--rm-h-gold)); background: none; } /* ---------- Schaltflaeche rechts ---------- */ header.site .rm-h-cta { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 1rem; border-radius: 2px; background: hsl(var(--rm-h-gold)); color: hsl(var(--rm-h-bg)); font-size: .875rem; font-weight: 500; white-space: nowrap; transition: opacity .2s; } header.site .rm-h-cta:hover { opacity: .9; } /* ---------- Menuesymbol (nur Handy) ---------- */ header.site .rm-h-burger { display: none; padding: .5rem; border: none; background: none; color: hsl(var(--rm-h-fg)); cursor: pointer; line-height: 0; } /* ---------- Aufklappendes Menue ---------- */ header.site .rm-h-mobile { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 1rem; padding: 1rem; background: hsl(var(--rm-h-bg)); border-bottom: 1px solid hsl(var(--rm-h-line)); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .45); } header.site .rm-h-mobile.is-open { display: flex; } header.site .rm-h-mobile a { padding: .5rem; border-radius: 6px; font-size: 1.125rem; font-weight: 500; color: hsl(var(--rm-h-fg) / .8); } header.site .rm-h-mobile a:hover { color: hsl(var(--rm-h-gold)); background: hsl(var(--rm-h-line) / .5); } header.site .rm-h-mobile .rm-h-cta { width: 100%; margin-top: .5rem; } /* Abstand unter der Leiste, damit nichts verdeckt wird. */ main { padding-top: 108px; } @media (max-width: 767px) { header.site nav { display: none; } header.site > .wrap.nav > .rm-h-cta { display: none; } header.site .rm-h-burger { display: block; } header.site .brand img { height: 40px; width: 40px; } header.site .brand b { font-size: 1.125rem; } header.site .brand small { font-size: .65rem; } main { padding-top: 92px; } } @media (prefers-reduced-motion: reduce) { header.site { transition: none; } }