/* css/components.css Component styles for steffenoehme.de Loads after base.css in cascade (order mandatory in ) All variable references use production token names from tokens.css (--color-* prefix). Short preview names (--accent, --bg-dark, etc.) are NOT used here. Phase 2: navbar, buttons, cards, labels, hero, sections, testimonials, statement */ /* ============================================================================= NAVBAR HEIGHT CUSTOM PROPERTY ============================================================================= */ :root { --navbar-height: 80px; } /* ============================================================================= CONTAINER ============================================================================= */ .container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--padding-desktop); } @media (max-width: 1024px) { .container { padding: 0 var(--padding-tablet); } } @media (max-width: 768px) { .container { padding: 0 var(--padding-mobile); } } /* ============================================================================= SECTION DEFAULTS ============================================================================= */ section { padding: var(--space-12) 0; } section[id] { scroll-margin-top: var(--navbar-height); } /* ============================================================================= LABELS — Tint style ============================================================================= */ .label { font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-text-dark); background: var(--color-accent-tint); display: inline-block; padding: 3px 10px; border-radius: var(--radius-sm); margin-bottom: var(--space-3); } /* ============================================================================= DARK SECTIONS ============================================================================= */ .dark-section { background: var(--color-bg-dark); color: var(--color-text-primary); } .dark-section .label { background: transparent; color: var(--color-accent); padding: 0; } /* ============================================================================= NAVBAR — Sticky, dark ============================================================================= */ header { position: sticky; top: 0; z-index: var(--z-navbar); /* iPhone notch: extend background into safe area on scroll-up */ background-color: var(--color-bg-dark); padding-top: env(safe-area-inset-top); } .navbar { background: var(--color-bg-dark); padding: var(--space-2) 0; } .navbar .container { display: flex; justify-content: space-between; align-items: center; } .nav-brand-wrap { display: flex; align-items: center; gap: 12px; } .nav-brand { display: flex; align-items: center; gap: 10px; color: var(--color-text-primary); text-decoration: none; } /* nav-avatar: 45px Kreis, immer sichtbar */ .nav-avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; object-position: center top; flex-shrink: 0; border: 2px solid rgba(255, 255, 255, 0.3); } /* nav-avatar--visible: Klasse bleibt aus Kompatibilität, hat keinen Effekt */ .nav-avatar--visible {} .nav-links { display: flex; align-items: center; gap: var(--space-4); list-style: none; } .nav-links li { display: flex; align-items: center; } .nav-links a { font-family: var(--font-ui); font-size: 15px; font-weight: 600; color: var(--color-text-primary); text-decoration: none; transition: color 0.2s; letter-spacing: 0.02em; line-height: 1; } .nav-links a:hover { color: var(--color-accent); } .nav-links a.active { color: var(--color-accent); } .nav-links .btn-primary { color: var(--color-text-dark); } .nav-links .btn-primary:hover { color: var(--color-text-dark); background: var(--color-accent-hover); } /* ============================================================================= HERO — Gradient background ============================================================================= */ .hero-wrapper { position: relative; background-color: var(--color-bg-dark); overflow: hidden; } .hero-wrapper::before { content: ''; position: absolute; inset: 0; background: linear-gradient( 135deg, #0A1A3A 0%, #112244 30%, #0E1F45 60%, #0A1A3A 100% ); pointer-events: none; z-index: 0; } .hero { min-height: 340px; display: flex; align-items: center; position: relative; z-index: var(--z-base); } .hero-inner { display: flex; align-items: center; gap: var(--space-8); width: 100%; } .hero-text { text-align: left; } .hero-sub { font-family: var(--font-body); font-size: 22px; font-weight: 700; color: var(--color-text-primary); line-height: 1.4; margin-bottom: var(--space-1); } .hero-headline { font-family: var(--font-headline); font-weight: 700; text-transform: uppercase; font-size: clamp(72px, 10vw, 110px); line-height: 0.83; letter-spacing: -0.038em; color: var(--color-text-primary); margin-left: -0.075em; } .hero-headline .accent { color: var(--color-accent); display: block; } .hero-subline { color: var(--color-text-secondary); font-size: 17px; max-width: 600px; margin-top: var(--space-3); } .hero-photo { max-width: 400px; border-radius: var(--radius-lg); } /* ============================================================================= SECTION HEADLINES — Light context ============================================================================= */ .section-headline { margin-bottom: var(--space-6); } .section-headline .sub { font-family: var(--font-body); font-size: 17px; font-weight: 400; color: var(--color-text-muted); margin-bottom: 4px; } .section-headline h2 { font-family: var(--font-headline); font-size: clamp(36px, 5vw, 64px); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; color: var(--color-text-dark); overflow-wrap: break-word; } .section-headline h2 span { color: var(--color-text-dark); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 6px; text-underline-offset: 4px; } /* Dark section overrides for headlines */ .dark-section .section-headline .sub { color: var(--color-text-secondary); } .dark-section .section-headline h2 { color: var(--color-text-primary); } .dark-section .section-headline h2 span { color: var(--color-accent); text-decoration: none; } /* ============================================================================= BUTTONS ============================================================================= */ .btn { display: inline-block; padding: 12px 24px; font-family: var(--font-ui); font-size: 15px; font-weight: 600; border-radius: var(--radius-sm); cursor: pointer; border: none; transition: all 0.2s; text-decoration: none; line-height: 1; } .btn:active { transform: scale(0.97); } .btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; box-shadow: 0 0 0 1px var(--color-text-dark), 0 0 0 4px var(--color-accent); } .btn-primary { background: var(--color-accent); color: var(--color-text-dark); } .btn-primary:hover { background: var(--color-accent-hover); } .btn-outline { background: var(--color-accent-tint); color: var(--color-text-dark); border: 2px solid var(--color-accent); } .btn-outline:hover { background: rgba(14, 232, 213, 0.22); } .btn-ghost { background: transparent; color: var(--color-text-dark); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 3px; text-underline-offset: 4px; } .btn-ghost:hover { background: rgba(14, 232, 213, 0.08); } .btn-sm { padding: 8px 16px; font-size: 13px; } .btn-lg { padding: 16px 32px; font-size: 17px; } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; pointer-events: none; } /* Dark section button overrides */ .dark-section .btn-outline { background: transparent; color: var(--color-accent); border-color: var(--color-accent); } .dark-section .btn-outline:hover { background: rgba(14, 232, 213, 0.08); } .dark-section .btn-ghost { color: var(--color-accent); text-decoration-color: var(--color-accent); } /* ============================================================================= CARDS ============================================================================= */ .card { background: var(--color-surface-card); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); padding: var(--space-3); box-shadow: var(--shadow-sm); overflow: hidden; min-width: 0; } .card-label { font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-dark); border-left: 3px solid var(--color-accent); padding-left: 8px; margin-bottom: var(--space-2); } .card h3 { font-family: var(--font-headline); font-size: 28px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--color-text-dark); margin-bottom: var(--space-2); } .card p { font-family: var(--font-body); font-size: 15px; font-weight: 400; color: var(--color-text-body); } .card .btn-ghost { margin-top: var(--space-3); display: inline-block; } /* Dark card overrides */ .dark-section .card { background: var(--color-bg-mid); border-color: var(--color-bg-light-hover); box-shadow: none; } .dark-section .card-label { color: var(--color-text-secondary); border-left-color: var(--color-accent); } .dark-section .card h3 { color: var(--color-text-primary); } .dark-section .card p { color: var(--color-text-secondary); } /* ============================================================================= TESTIMONIAL CARDS ============================================================================= */ .testimonial-card { background: var(--color-surface-card); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); padding: var(--space-4); } .testimonial-card blockquote p, .testimonial-card p { font-family: var(--font-body); font-size: 17px; font-weight: 400; color: var(--color-text-body); font-style: italic; } .testimonial-card cite { font-family: var(--font-ui); font-size: 15px; font-weight: 400; color: var(--color-text-muted); display: block; margin-top: var(--space-2); } /* ============================================================================= STATEMENT ============================================================================= */ .statement { background: var(--color-bg-dark); border-left: 4px solid var(--color-accent); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: var(--space-4) var(--space-6); overflow: hidden; min-width: 0; } .statement p { font-family: var(--font-headline); font-size: clamp(28px, 3.5vw, 42px); line-height: 1.1; color: var(--color-text-primary); word-break: break-word; overflow-wrap: break-word; } .statement p span { color: var(--color-accent); } /* ============================================================================= FOCUS STYLES — Global (per NAV-05) ============================================================================= */ a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* A11Y: focus rings for interactive button elements not styled as .btn (A11Y-01) */ .accordion-header:focus-visible, .testimonial-arrow:focus-visible, .nav-hamburger:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* ============================================================================= RESPONSIVE BREAKPOINTS ============================================================================= */ @media (max-width: 1024px) { section { padding: var(--space-8) 0; } .hero-headline { font-size: 56px; } .hero-sub { font-size: 20px; } .section-headline h2 { font-size: 40px; } .card h3 { font-size: 24px; } .statement p { font-size: 28px; } } @media (max-width: 768px) { section { padding: var(--space-6) 0; } .hero { min-height: 260px; } .hero-headline { font-size: 68px; } .hero-sub { font-size: 24px; } .section-headline h2 { font-size: 36px; } .section-headline .sub { font-size: 15px; } .card h3 { font-size: 22px; } .statement p { font-size: 24px; } } /* Utility: Zeilenumbruch nur auf Mobile */ .br-mobile { display: none; } @media (max-width: 768px) { .br-mobile { display: block; } } /* Hamburger-Button: nur auf Mobile sichtbar */ .nav-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: transparent; border: none; padding: 8px; border-radius: var(--radius-sm); } .nav-hamburger span { display: block; width: 24px; height: 2px; background: var(--color-text-primary); border-radius: 2px; transition: transform 0.25s ease, opacity 0.25s ease; } @media (max-width: 768px) { .navbar .container { flex-direction: row; /* Brand links, Hamburger rechts */ align-items: center; } .nav-hamburger { display: flex; } /* X-Animation wenn Menü offen */ .nav-open .nav-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-open .nav-hamburger span:nth-child(2) { opacity: 0; transform: scaleX(0); } .nav-open .nav-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Nav-Links: versteckt bis .nav-open */ .nav-links { display: none; position: absolute; top: 100%; /* unterhalb der Navbar */ left: 0; right: 0; background: var(--color-bg-dark); border-top: 1px solid var(--color-accent); flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-2) 0; z-index: var(--z-navbar); } .nav-open .nav-links { display: flex; } .nav-links li { width: 100%; } .nav-links a { font-size: 15px; display: block; padding: var(--space-2) var(--padding-mobile); width: 100%; box-sizing: border-box; } /* Let's talk! Button bleibt Pill-Stil, aber volle Breite im Drawer */ .nav-links .btn-primary { margin: var(--space-2) var(--padding-mobile); width: calc(100% - 2 * var(--padding-mobile)); text-align: center; box-sizing: border-box; } } /* ============================================================================= NAV-AVATAR CC-LOGO OVERLAY Requires :has() — Chrome 105+, Safari 15.4+, Firefox 121+. In older browsers the badge stays hidden (opacity:0). Acceptable for a decorative overlay. ============================================================================= */ .nav-avatar-wrap { position: relative; display: inline-flex; } /* About text — paragraph spacing */ .about-text p + p { margin-top: calc(var(--space-3) / 2); } /* About section — codecentric wordmark inline (Option C) */ .about-cc-wordmark-link { display: inline-block; height: 1em; overflow: visible; vertical-align: -0.3em; margin-left: 0.15em; margin-right: 0.15em; opacity: 0.8; transition: opacity 0.2s; } .about-cc-wordmark-link:hover { opacity: 1; } .about-cc-wordmark { display: block; height: 1em; width: auto; }