/* ============================================ verbaneum GmbH - Corporate Design System MIT DARK MODE / LIGHT MODE UNTERSTÜTZUNG ============================================ ANPASSUNGSHINWEISE / CUSTOMIZATION GUIDE ============================================ 🎨 FARBEN ANPASSEN: - Primärfarbe (Rot): --color-primary ändern - Sekundärfarbe (Grün): --color-secondary ändern - Für Dark Mode: Variablen in [data-theme="dark"] anpassen 📝 SCHRIFTEN ANPASSEN: - Font ändern bei --font-display und --font-body - Google Fonts Link im HTML hinzufügen 📐 ABSTÄNDE ANPASSEN: - Spacing-Variablen unter Spacing anpassen ============================================ */ @font-face { font-family: 'Hind'; src: url('../fonts/Hind-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Hind'; src: url('../fonts/Hind-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Hind'; src: url('../fonts/Hind-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Hind'; src: url('../fonts/Hind-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Hind'; src: url('../fonts/Hind-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } :root { --color-primary: #8d0808; --color-primary-light: #a52a2a; --color-primary-dark: #6b0606; --color-secondary: #8BC34A; --color-secondary-dark: #689F38; --color-white: #FFFFFF; --color-black: #1a1a1a; --color-bg-primary: #FFFFFF; --color-bg-secondary: #f8f9fa; --color-bg-tertiary: #f0f0f0; --color-bg-dark: #2d2d2d; --color-text-primary: #1a1a1a; --color-text-secondary: #4b4b4b; --color-text-muted: #6b6b6b; --color-border: #e0e0e0; --color-border-light: #f0f0f0; --section-alt-1: #FFFFFF; --section-alt-2: #f8f9fa; --font-display: 'Hind', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Hind', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --spacing-xs: 0.5rem; --spacing-sm: 1rem; --spacing-md: 1.5rem; --spacing-lg: 2rem; --spacing-xl: 3rem; --spacing-xxl: 5rem; --spacing-3xl: 7rem; --max-width: 1400px; --max-width-narrow: 900px; --header-height: 80px; --transition-fast: 0.2s ease; --transition-normal: 0.3s ease; --transition-slow: 0.5s ease; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16); --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; } /* DARK MODE */ [data-theme="dark"] { --color-bg-primary: #121212; --color-bg-secondary: #1e1e1e; --color-bg-tertiary: #2a2a2a; --color-bg-dark: #0a0a0a; --color-text-primary: #f5f5f5; --color-text-secondary: #c0c0c0; --color-text-muted: #888888; --color-border: #333333; --color-border-light: #2a2a2a; --color-white: #f5f5f5; --color-black: #121212; --section-alt-1: #121212; --section-alt-2: #1e1e1e; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5); } /* RESET */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; overflow-x: hidden; } body { font-family: var(--font-body); font-weight: var(--font-weight-regular); line-height: 1.7; color: var(--color-text-primary); background-color: var(--color-bg-primary); -webkit-font-smoothing: antialiased; transition: background-color var(--transition-normal), color var(--transition-normal); overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { text-decoration: none; color: inherit; transition: color var(--transition-fast); } ul, ol { list-style: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } :focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; } .skip-link { position: absolute; top: -100%; left: 0; background: var(--color-primary); color: var(--color-white); padding: var(--spacing-sm) var(--spacing-md); z-index: 10000; } .skip-link:focus { top: 0; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } /* TYPOGRAPHY */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: var(--font-weight-semibold); line-height: 1.2; color: var(--color-text-primary); } h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: var(--font-weight-bold); letter-spacing: -0.02em; } h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: var(--spacing-lg); } h3 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: var(--spacing-md); } h4 { font-size: 1.25rem; font-family: var(--font-body); margin-bottom: var(--spacing-sm); } p { margin-bottom: var(--spacing-md); color: var(--color-text-secondary); } .text-primary { color: var(--color-primary) !important; } .text-muted { color: var(--color-text-muted) !important; } /* LAYOUT */ .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--spacing-lg); } .container--narrow { max-width: var(--max-width-narrow); } /* SECTIONS */ .section { padding: var(--spacing-3xl) 0; transition: background-color var(--transition-normal); } .section--light { background-color: var(--section-alt-1); } .section--alt { background-color: var(--section-alt-2); } .section--primary { background-color: var(--color-primary); color: var(--color-white); } .section--primary h2, .section--primary h3, .section--primary p { color: var(--color-white); } .section--primary p { opacity: 0.9; } .section--dark { background-color: var(--color-bg-dark); color: var(--color-white); } .section--dark h2, .section--dark h3, .section--dark p { color: var(--color-white); } /* HEADER */ .header { position: fixed; top: 0; left: 0; right: 0; height: var(--header-height); background: var(--color-bg-primary); border-bottom: 1px solid var(--color-border); z-index: 1000; transition: all var(--transition-normal); } .header.scrolled { box-shadow: var(--shadow-md); } .header__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--spacing-lg); } .logo { display: flex; align-items: center; gap: var(--spacing-sm); font-size: 1.5rem; font-weight: var(--font-weight-bold); font-family: var(--font-body); } .logo__img { height: 60px; width: auto; display: block; /* SVG-Logo: Originalfarben im Light Mode */ } .footer .logo__img { height: 55px; width: auto; /* Footer hat dunklen Hintergrund → Logo weiß */ filter: brightness(0) invert(1); } [data-theme="dark"] .logo__img { /* Dark Mode → Logo weiß */ filter: brightness(0) invert(1); } /* Sicherstellen, dass der Filter beim SVG-Logo korrekt greift */ .logo__img[src$=".svg"] { image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; } .logo__icon { width: 40px; height: 40px; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--color-white); font-weight: var(--font-weight-bold); font-size: 1.25rem; } .logo__text span { color: var(--color-primary); } .nav { display: flex; align-items: center; gap: var(--spacing-md); } .nav__list { display: flex; align-items: center; gap: var(--spacing-xs); } .nav__item { position: relative; } /* ============================================================ NAVIGATION — HOVER & ACTIVE STYLES ============================================================ */ .nav__link { display: flex; align-items: center; gap: var(--spacing-xs); padding: var(--spacing-sm) var(--spacing-md); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); border-radius: var(--radius-sm); transition: background-color 0.2s ease, color 0.2s ease; font-size: 0.95rem; position: relative; letter-spacing: 0; } .nav__link:hover, .nav__link:focus, .nav__link.active { background-color: #CC0000; color: #FFFFFF; font-weight: var(--font-weight-semibold); } [data-theme="dark"] .nav__link:hover, [data-theme="dark"] .nav__link:focus, [data-theme="dark"] .nav__link.active { background-color: #CC0000; color: #FFFFFF; } /* CTA-Button Karriere */ .nav__link--cta { background: #CC0000 !important; color: #FFFFFF !important; } .nav__link--cta:hover, .nav__link--cta:focus { background: #A80000 !important; color: #FFFFFF !important; } [data-theme="dark"] .nav__link--cta { background: #CC0000 !important; color: #FFFFFF !important; } [data-theme="dark"] .nav__link--cta:hover, [data-theme="dark"] .nav__link--cta:focus { background: #A80000 !important; color: #FFFFFF !important; } /* ── DROPDOWN ── */ .nav__dropdown-link { display: block; padding: var(--spacing-sm) var(--spacing-md); color: var(--color-text-secondary); transition: background-color 0.2s ease, color 0.2s ease; } .nav__dropdown-link:hover, .nav__dropdown-link:focus { background-color: #CC0000; color: #FFFFFF; } [data-theme="dark"] .nav__dropdown-link:hover, [data-theme="dark"] .nav__dropdown-link:focus { background-color: #CC0000; color: #FFFFFF; } .nav__dropdown { position: absolute; top: 100%; left: 0; min-width: 220px; background: var(--color-bg-primary); box-shadow: var(--shadow-lg); border-radius: var(--radius-md); padding: var(--spacing-sm) 0; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all var(--transition-normal); z-index: 100; border: 1px solid var(--color-border); } .nav__item:hover .nav__dropdown, .nav__item:focus-within .nav__dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .nav__arrow { transition: transform var(--transition-fast); } .nav__item:hover .nav__arrow { transform: rotate(180deg); } /* THEME TOGGLE */ .theme-toggle { width: 44px; height: 44px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; color: var(--color-text-secondary); background: var(--color-bg-secondary); border: 1px solid var(--color-border); transition: all var(--transition-fast); cursor: pointer; margin-left: 0; } .theme-toggle:hover { color: var(--color-primary); border-color: var(--color-primary); transform: rotate(15deg); } .theme-toggle__icon--light, .theme-toggle__icon--dark { width: 20px; height: 20px; } .theme-toggle__icon--dark { display: block; } .theme-toggle__icon--light { display: none; } [data-theme="dark"] .theme-toggle__icon--dark { display: none; } [data-theme="dark"] .theme-toggle__icon--light { display: block; } /* MOBILE MENU */ .menu-toggle { display: none; flex-direction: column; gap: 5px; padding: var(--spacing-sm); z-index: 1001; } .menu-toggle__bar { width: 24px; height: 2px; background: var(--color-text-primary); transition: all var(--transition-fast); border-radius: 2px; } .menu-toggle.active .menu-toggle__bar:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .menu-toggle.active .menu-toggle__bar:nth-child(2) { opacity: 0; } .menu-toggle.active .menu-toggle__bar:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* ============================================ HERO SECTION 🖼️ HINTERGRUNDBILD HINZUFÜGEN: Aktivieren Sie das background-image und ersetzen Sie den Pfad ============================================ */ .hero { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: var(--header-height); position: relative; overflow: hidden; background-color: var(--color-bg-primary); /* 🖼️ HERO HINTERGRUNDBILD HIER EINFÜGEN: background-image: url('../images/startseite/hero-background.jpg'); background-size: cover; background-position: center; */ } .hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(141, 8, 8, 0.03) 0%, transparent 50%, rgba(141, 8, 8, 0.02) 100%); z-index: 1; } [data-theme="dark"] .hero::before { background: linear-gradient(135deg, rgba(141, 8, 8, 0.1) 0%, transparent 50%, rgba(141, 8, 8, 0.05) 100%); } .hero::after { content: ''; position: absolute; top: 20%; right: -10%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(141, 8, 8, 0.08) 0%, transparent 70%); border-radius: 50%; z-index: 1; } .hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-xxl); align-items: center; width: 100%; max-width: var(--max-width); margin: 0 auto; padding: var(--spacing-xxl) var(--spacing-lg); position: relative; z-index: 2; justify-items: center; } .hero__content { max-width: 600px; } .hero__badge { display: inline-flex; align-items: center; gap: var(--spacing-xs); background: rgba(141, 8, 8, 0.1); color: var(--color-primary); padding: var(--spacing-xs) var(--spacing-md); border-radius: var(--radius-full); font-size: 0.875rem; font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 1px; margin-bottom: var(--spacing-lg); border: 1px solid rgba(141, 8, 8, 0.2); } [data-theme="dark"] .hero__badge { background: rgba(141, 8, 8, 0.2); border-color: rgba(141, 8, 8, 0.3); } .hero__title { margin-bottom: var(--spacing-lg); animation: fadeInUp 1s ease-out; font-size: clamp(1.8rem, 3.5vw, 2.8rem); } .hero__title-highlight { color: var(--color-primary); font-style: italic; } .hero__subtitle { font-size: 1.25rem; line-height: 1.8; color: var(--color-text-secondary); margin-bottom: var(--spacing-xl); animation: fadeInUp 1s ease-out 0.2s both; } .hero__cta { display: flex; gap: var(--spacing-md); flex-wrap: wrap; animation: fadeInUp 1s ease-out 0.4s both; } .hero__stats { display: flex; gap: var(--spacing-xl); margin-top: var(--spacing-xxl); padding-top: var(--spacing-xl); border-top: 1px solid var(--color-border); animation: fadeInUp 1s ease-out 0.6s both; } .hero__stat { text-align: left; } .hero__stat-number { font-family: var(--font-display); font-size: 2.5rem; font-weight: var(--font-weight-bold); color: var(--color-text-primary); line-height: 1; margin-bottom: var(--spacing-xs); } .hero__stat-label { font-size: 0.875rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.5px; } .hero__visual { position: relative; display: flex; align-items: center; justify-content: center; animation: fadeInRight 1s ease-out 0.3s both; } .hero__image-wrapper { position: relative; width: 100%; aspect-ratio: 4/3; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-xl); background: var(--color-bg-secondary); display: flex; align-items: center; justify-content: center; } .hero__image-wrapper img, .hero__image { width: 100%; height: 100%; object-fit: cover; display: block; } .hero__image-placeholder { text-align: center; color: var(--color-text-muted); padding: var(--spacing-xl); } .hero__image-placeholder svg { width: 80px; height: 80px; margin-bottom: var(--spacing-md); opacity: 0.5; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } /* BUTTONS */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-sm); padding: var(--spacing-md) var(--spacing-xl); font-family: var(--font-body); font-size: 0.95rem; font-weight: var(--font-weight-semibold); border-radius: var(--radius-md); transition: all var(--transition-normal); cursor: pointer; text-decoration: none; border: 2px solid transparent; } .btn--primary { background: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); } .btn--primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn--secondary { background: transparent; color: var(--color-text-primary); border-color: var(--color-border); } .btn--secondary:hover { background: var(--color-bg-secondary); border-color: var(--color-text-secondary); transform: translateY(-2px); } .btn--white { background: var(--color-white); color: var(--color-primary); border-color: var(--color-white); } .btn--white:hover { background: transparent; color: var(--color-white); } .btn--outline-white { background: transparent; color: var(--color-white); border-color: rgba(255,255,255,0.4); } .btn--outline-white:hover { background: var(--color-white); color: var(--color-primary); } .btn--small { padding: var(--spacing-sm) var(--spacing-md); font-size: 0.875rem; } .btn--large { padding: var(--spacing-lg) var(--spacing-xxl); font-size: 1.125rem; } .btn__arrow { transition: transform var(--transition-fast); } .btn:hover .btn__arrow { transform: translateX(4px); } /* TILES / CARDS */ .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--spacing-lg); } .tile { background: var(--color-bg-primary); border-radius: var(--radius-lg); padding: var(--spacing-xl); box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); transition: all var(--transition-normal); position: relative; overflow: hidden; } .tile::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--color-primary); border-radius: var(--radius-lg) 0 0 var(--radius-lg); transform: scaleY(0); transition: transform var(--transition-normal); } .tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--color-primary); } .tile:hover::before { transform: scaleY(1); } .tile__icon { width: 56px; height: 56px; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light)); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--color-white); margin-bottom: var(--spacing-md); } .tile__icon--green { background: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-dark)); } .tile__title { font-size: 1.25rem; font-family: var(--font-body); font-weight: var(--font-weight-semibold); margin-bottom: var(--spacing-sm); color: var(--color-text-primary); } .tile__text { color: var(--color-text-secondary); margin-bottom: var(--spacing-md); line-height: 1.7; } .tile__link { display: inline-flex; align-items: center; gap: var(--spacing-xs); color: var(--color-primary); font-weight: var(--font-weight-semibold); font-size: 0.95rem; transition: gap var(--transition-fast); } .tile__link:hover { gap: var(--spacing-sm); } /* SERVICE CARDS */ .service-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-lg); } .service-card { position: relative; border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 16/10; display: flex; align-items: flex-end; padding: var(--spacing-xl); transition: transform var(--transition-normal); /* 🖼️ SERVICE CARD BILD: style="background-image: url('images/service/service-1.jpg')" */ background-size: cover; background-position: center; background-color: var(--color-bg-tertiary); } .service-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.1) 100%); transition: opacity var(--transition-normal); } .service-card:hover { transform: scale(1.02); } .service-card:hover::before { opacity: 0.9; } .service-card__content { position: relative; z-index: 1; color: var(--color-white); } .service-card__tag { display: inline-block; background: var(--color-primary); color: var(--color-white); padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 1px; margin-bottom: var(--spacing-sm); } .service-card__title { font-size: 1.5rem; color: var(--color-white); margin-bottom: var(--spacing-sm); } .service-card__text { color: rgba(255,255,255,0.8); font-size: 0.95rem; line-height: 1.6; } .service-card--has-bg::before { background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0.25) 100%); } .service-card--has-bg:hover::before { opacity: 0.85; } /* KARRIERE PAGE */ .karriere-badges { display: flex; justify-content: center; gap: var(--spacing-xl); flex-wrap: wrap; } .karriere-badge { width: 200px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); text-align: center; transition: transform var(--transition-normal); } .karriere-badge:hover { transform: translateY(-4px); } .karriere-badge__header { padding: var(--spacing-md) var(--spacing-sm); color: var(--color-bg-dark); font-size: 1.4rem; font-weight: var(--font-weight-bold); font-family: var(--font-display); line-height: 1.2; } .karriere-badge__logo { background: #1a2744; color: var(--color-white); padding: var(--spacing-sm); font-size: 1.2rem; font-weight: var(--font-weight-bold); letter-spacing: 2px; } .karriere-traits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } .karriere-trait { text-align: center; padding: 2.8rem 2rem; background: var(--color-bg-primary); border-radius: var(--radius-lg); border: 1px solid var(--color-border); transition: transform var(--transition-normal), box-shadow var(--transition-normal); } .karriere-trait:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-primary); } .karriere-trait__icon { margin-bottom: 1.4rem; } .karriere-trait__title { font-size: 1.15rem; font-weight: var(--font-weight-bold); color: var(--color-text-primary); margin-bottom: 0.9rem; font-family: var(--font-body); } .karriere-trait__text { font-size: 0.92rem; color: var(--color-text-secondary); line-height: 1.8; margin: 0; } @media (max-width: 768px) { .karriere-traits { grid-template-columns: repeat(2, 1fr); } .karriere-badges { gap: var(--spacing-md); } } @media (max-width: 480px) { .karriere-traits { grid-template-columns: 1fr; } } /* STATISTICS */ .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-lg); } .stat-tile { text-align: center; padding: var(--spacing-xl); background: var(--color-bg-primary); border-radius: var(--radius-lg); border: 1px solid var(--color-border); transition: all var(--transition-normal); overflow: hidden; position: relative; } .stat-tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--color-primary); } .stat-tile__number { font-family: var(--font-display); font-size: 3rem; font-weight: var(--font-weight-bold); color: var(--color-primary); line-height: 1; margin-bottom: var(--spacing-sm); } .stat-tile__label { color: var(--color-text-secondary); font-size: 0.95rem; } /* QUOTE SECTION */ .quote-section { text-align: center; padding: var(--spacing-3xl) 0; position: relative; } .quote-section__icon { width: 60px; height: 60px; margin: 0 auto var(--spacing-xl); color: var(--color-white); opacity: 0.8; } .quote-section__text { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.25rem); font-style: italic; line-height: 1.5; max-width: 900px; margin: 0 auto var(--spacing-lg); } .quote-section__author { font-size: 1rem; opacity: 0.8; } /* WHY SECTION */ .why-section { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-xxl); align-items: center; } .why-section__images { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-md); } .why-section__image { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 1; background: var(--color-bg-tertiary); position: relative; background-size: cover; background-position: center; } .why-section__image img { width: 100%; height: 100%; object-fit: cover; } .why-section__image--has-bg::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.15) 100%); z-index: 0; border-radius: var(--radius-lg); } .why-section__stat-overlay { position: absolute; bottom: var(--spacing-md); left: var(--spacing-md); background: rgba(255,255,255,0.92); padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-md); z-index: 1; backdrop-filter: blur(6px); } [data-theme="dark"] .why-section__stat-overlay { background: rgba(30,30,30,0.95); } .why-section__stat-number { font-family: var(--font-display); font-size: 1.5rem; font-weight: var(--font-weight-bold); color: var(--color-primary); } .why-section__stat-label { font-size: 0.8rem; color: var(--color-text-muted); text-transform: uppercase; } .why-section__content h2 { margin-bottom: var(--spacing-md); } .why-section__intro { font-size: 1.125rem; margin-bottom: var(--spacing-xl); } .why-section__features { display: flex; flex-direction: column; gap: var(--spacing-lg); } .why-feature { display: flex; align-items: flex-start; gap: var(--spacing-md); } .why-feature__icon { width: 24px; height: 24px; color: var(--color-primary); flex-shrink: 0; margin-top: 2px; } .why-feature__title { font-weight: var(--font-weight-semibold); margin-bottom: var(--spacing-xs); color: var(--color-text-primary); } .why-feature__text { color: var(--color-text-secondary); font-size: 0.95rem; margin: 0; } /* BENEFITS */ .benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--spacing-lg); } .benefit { display: flex; align-items: flex-start; gap: var(--spacing-md); padding: var(--spacing-lg); background: var(--color-bg-primary); border-radius: var(--radius-lg); border: 1px solid var(--color-border); transition: all var(--transition-normal); } .benefit:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); } .benefit__icon { width: 48px; height: 48px; background: var(--color-bg-secondary); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; } .benefit__content { flex: 1; } .benefit__title { font-weight: var(--font-weight-semibold); margin-bottom: var(--spacing-xs); color: var(--color-text-primary); } .benefit__text { color: var(--color-text-secondary); font-size: 0.95rem; margin: 0; } /* TEAM */ .team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--spacing-lg); } .team-member { text-align: center; transition: transform var(--transition-normal); } .team-member:hover { transform: translateY(-5px); } .team-member__image { width: 160px; height: 160px; border-radius: var(--radius-full); margin: 0 auto var(--spacing-md); background: var(--color-bg-tertiary); overflow: hidden; border: 4px solid var(--color-bg-secondary); transition: border-color var(--transition-fast); /* 🖼️ TEAM BILD: Name */ } .team-member:hover .team-member__image { border-color: var(--color-primary); } .team-member__image img { width: 100%; height: 100%; object-fit: cover; } .team-member__name { font-weight: var(--font-weight-semibold); margin-bottom: var(--spacing-xs); color: var(--color-text-primary); } .team-member__role { color: var(--color-text-muted); font-size: 0.9rem; } /* PAGE HEADER */ .page-header { background: linear-gradient(135deg, var(--color-bg-dark), var(--color-primary-dark)); color: var(--color-white); min-height: calc(var(--header-height) + 18rem); display: flex; align-items: center; justify-content: center; padding: calc(var(--header-height) + var(--spacing-3xl)) 0 var(--spacing-3xl); text-align: center; position: relative; overflow: hidden; background-size: cover; background-position: center; } .page-header .container { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 100%; } .page-header::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 0; } .page-header__title { position: relative; font-size: clamp(2.5rem, 5vw, 4rem); margin-bottom: var(--spacing-md); color: var(--color-white); text-shadow: 0 2px 8px rgba(0,0,0,0.4); } .page-header__subtitle { position: relative; font-size: 1.25rem; opacity: 0.9; max-width: 600px; margin: 0 auto; color: var(--color-white); text-shadow: 0 1px 4px rgba(0,0,0,0.3); } .breadcrumb { position: relative; display: flex; justify-content: center; gap: var(--spacing-sm); margin-top: var(--spacing-lg); font-size: 0.9rem; } .breadcrumb a { opacity: 0.7; transition: opacity var(--transition-fast); } .breadcrumb a:hover { opacity: 1; } .breadcrumb span { opacity: 0.5; } /* FOOTER */ .footer { background: var(--color-bg-dark); color: var(--color-white); padding: var(--spacing-3xl) 0 var(--spacing-xl); } [data-theme="dark"] .footer { background: #0a0a0a; } .footer__grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: var(--spacing-xxl); margin-bottom: var(--spacing-xxl); } .footer__brand p { color: rgba(255,255,255,0.6); font-size: 0.95rem; margin-top: var(--spacing-md); max-width: 300px; } .footer__social { display: flex; gap: var(--spacing-sm); margin-top: var(--spacing-lg); } .footer__social-link { width: 40px; height: 40px; border-radius: var(--radius-full); border: 1px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; color: var(--color-white); transition: all var(--transition-fast); } .footer__social-link:hover { background: var(--color-primary); border-color: var(--color-primary); } .footer__column h4 { color: var(--color-white); margin-bottom: var(--spacing-lg); font-size: 1rem; font-family: var(--font-body); font-weight: var(--font-weight-semibold); } .footer__links { display: flex; flex-direction: column; gap: var(--spacing-sm); } .footer__link { color: rgba(255, 255, 255, 0.6); transition: all var(--transition-fast); font-size: 0.95rem; } .footer__link:hover { color: var(--color-white); padding-left: 5px; } .footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: var(--spacing-lg); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--spacing-md); } .footer__social { display: flex; gap: 10px; } .footer__social-link { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.7); transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease; } .footer__social-link:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; transform: translateY(-2px); } .footer__copyright { color: rgba(255, 255, 255, 0.5); font-size: 0.875rem; margin: 0; } .footer__legal { display: flex; gap: var(--spacing-md); } .footer__legal a { color: rgba(255, 255, 255, 0.5); font-size: 0.875rem; transition: color var(--transition-fast); } .footer__legal a:hover { color: var(--color-white); } /* COOKIE BANNER */ /* LEGAL PAGES */ .legal-content { max-width: 800px; margin: 0 auto; } .legal-content h2 { font-size: 1.5rem; margin-top: var(--spacing-xl); margin-bottom: var(--spacing-md); color: var(--color-primary); font-family: var(--font-body); } .legal-content h3 { font-size: 1.25rem; margin-top: var(--spacing-lg); margin-bottom: var(--spacing-sm); font-family: var(--font-body); } .legal-content p, .legal-content ul, .legal-content ol { margin-bottom: var(--spacing-md); color: var(--color-text-secondary); } .legal-content ul, .legal-content ol { padding-left: var(--spacing-lg); } .legal-content li { margin-bottom: var(--spacing-xs); list-style: disc; } /* TIMELINE */ .timeline { position: relative; padding-left: var(--spacing-xxl); } .timeline::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--color-border); } .timeline__item { position: relative; padding-bottom: var(--spacing-xl); } .timeline__item:last-child { padding-bottom: 0; } .timeline__dot { position: absolute; left: calc(-1 * var(--spacing-xxl) - 6px); width: 14px; height: 14px; background: var(--color-primary); border-radius: var(--radius-full); border: 3px solid var(--color-bg-primary); } .timeline__year { font-family: var(--font-display); font-size: 1.5rem; font-weight: var(--font-weight-bold); color: var(--color-primary); margin-bottom: var(--spacing-xs); } .timeline__title { font-weight: var(--font-weight-semibold); margin-bottom: var(--spacing-xs); } .timeline__text { color: var(--color-text-secondary); margin: 0; } /* JOBS */ .jobs-list { display: flex; flex-direction: column; gap: var(--spacing-md); } .job { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-lg); background: var(--color-bg-primary); border: 1px solid var(--color-border); border-radius: var(--radius-lg); transition: all var(--transition-normal); gap: var(--spacing-lg); } .job:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); } .job__content { flex: 1; } .job__title { font-weight: var(--font-weight-semibold); margin-bottom: var(--spacing-xs); color: var(--color-text-primary); } .job__meta { display: flex; gap: var(--spacing-md); color: var(--color-text-muted); font-size: 0.9rem; } .job__tag { display: inline-flex; align-items: center; gap: var(--spacing-xs); } /* GALLERY – Bento-Mosaik mit Hochkantbildern */ .gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense; gap: var(--spacing-md); } .gallery__item { aspect-ratio: 3/4; /* Hochkant-Format */ border-radius: var(--radius-lg); overflow: hidden; background: var(--color-bg-tertiary); transition: transform var(--transition-normal); /* 🖼️ GALERIE BILD: Beschreibung */ } .gallery__item:hover { transform: scale(1.02); } .gallery__item img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } /* Breit: 2 Spalten, Querformat */ .gallery__item--wide { grid-column: span 2; aspect-ratio: 3/2; } /* Groß: 2×2 – füllt Grid-Fläche (kein aspect-ratio override nötig) */ .gallery__item--large { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; } /* VALUES */ .values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--spacing-lg); } .value-card { padding: var(--spacing-xl); background: var(--color-bg-primary); border-radius: var(--radius-lg); border: 1px solid var(--color-border); text-align: center; transition: all var(--transition-normal); } .value-card:hover { border-color: var(--color-primary); transform: translateY(-5px); box-shadow: var(--shadow-md); } .value-card__icon { width: 64px; height: 64px; background: var(--color-bg-secondary); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--spacing-md); font-size: 1.75rem; } .value-card__title { font-weight: var(--font-weight-semibold); margin-bottom: var(--spacing-sm); color: var(--color-text-primary); } .value-card__text { color: var(--color-text-secondary); font-size: 0.95rem; margin: 0; } /* SEARCH OVERLAY */ .nav__item--search { display: flex; align-items: center; } .nav__item--theme { display: flex; align-items: center; } .nav__search-toggle { width: 40px; height: 40px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; color: var(--color-text-secondary); background: var(--color-bg-secondary); border: 1px solid var(--color-border); transition: all var(--transition-fast); cursor: pointer; } .nav__search-toggle:hover { color: var(--color-primary); border-color: var(--color-primary); } .search-overlay { position: absolute; top: 100%; left: 0; right: 0; background: var(--color-bg-primary); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-lg); padding: var(--spacing-md) var(--spacing-lg); transform: translateY(-10px); opacity: 0; visibility: hidden; transition: all var(--transition-normal); z-index: 1001; } .search-overlay.active { transform: translateY(0); opacity: 1; visibility: visible; } .search-overlay__inner { display: flex; align-items: center; gap: var(--spacing-sm); max-width: var(--max-width); margin: 0 auto; } .search-overlay__input { flex: 1; padding: var(--spacing-sm) var(--spacing-md); border: 2px solid var(--color-border); border-radius: var(--radius-md); font-size: 1rem; font-family: var(--font-body); background: var(--color-bg-secondary); color: var(--color-text-primary); transition: border-color var(--transition-fast); outline: none; } .search-overlay__input:focus { border-color: var(--color-primary); } .search-overlay__input::placeholder { color: var(--color-text-muted); } .search-overlay__close { width: 40px; height: 40px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); cursor: pointer; transition: all var(--transition-fast); background: none; border: none; } .search-overlay__close:hover { color: var(--color-primary); } .search-overlay__results { max-width: var(--max-width); margin: 0 auto; padding-top: var(--spacing-sm); max-height: 360px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--color-primary) transparent; } .search-overlay__results::-webkit-scrollbar { width: 5px; } .search-overlay__results::-webkit-scrollbar-track { background: transparent; } .search-overlay__results::-webkit-scrollbar-thumb { background-color: var(--color-primary); border-radius: 10px; } .search-overlay__results:empty { display: none; } .search-overlay__result { display: block; padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-sm); color: var(--color-text-secondary); transition: all var(--transition-fast); cursor: pointer; text-decoration: none; border-bottom: 1px solid var(--color-border-light); } .search-overlay__result:last-child { border-bottom: none; } .search-overlay__result:hover, .search-overlay__result:focus { background: var(--color-bg-secondary); color: var(--color-primary); padding-left: calc(var(--spacing-md) + 5px); } .search-overlay__result-page { font-size: 0.75rem; font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-primary); display: block; margin-bottom: 2px; } .search-overlay__result-title { font-weight: var(--font-weight-medium); color: var(--color-text-primary); } .search-overlay__result-desc { font-size: 0.85rem; color: var(--color-text-muted); margin-top: 2px; } .search-overlay__no-results { padding: var(--spacing-md); color: var(--color-text-muted); text-align: center; font-size: 0.95rem; } /* Search highlight mark */ .search-overlay__result mark { background: rgba(204,0,0,0.18); color: inherit; border-radius: 2px; padding: 0 2px; font-style: normal; } [data-theme="dark"] .search-overlay__result mark { background: rgba(255,80,80,0.28); color: inherit; } /* TYPEWRITER CURSOR */ .hero__typewriter { color: var(--color-primary); font-style: italic; display: inline; position: relative; } .hero__typewriter::after { content: '|'; display: inline-block; color: var(--color-primary); font-weight: var(--font-weight-light); font-style: normal; animation: cursorBlink 0.8s infinite; margin-left: 1px; } @keyframes cursorBlink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } /* HERO INTRO TEXT */ .hero__intro-text { margin-bottom: var(--spacing-xl); animation: fadeInUp 1s ease-out 0.2s both; } .hero__lead { font-size: 1.2rem; line-height: 1.6; color: var(--color-text-primary); margin-bottom: var(--spacing-md); } .hero__question { font-size: 1.15rem; color: var(--color-text-primary); margin-bottom: var(--spacing-sm); font-weight: var(--font-weight-medium); } .hero__answer { font-size: 1.5rem; font-weight: var(--font-weight-bold); color: var(--color-primary); } .hero__body { font-size: 1.05rem; line-height: 1.8; color: var(--color-text-secondary); margin-bottom: var(--spacing-md); } .hero__tagline { font-size: 1.1rem; font-weight: var(--font-weight-semibold); color: var(--color-text-primary); font-style: italic; margin-bottom: 0; } /* ANFAHRT GRID */ .anfahrt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-lg); margin-bottom: var(--spacing-xl); } .anfahrt-card { background: var(--color-bg-primary); border-radius: var(--radius-lg); border: 1px solid var(--color-border); padding: var(--spacing-lg); text-align: center; transition: all var(--transition-normal); } .anfahrt-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--color-primary); } .anfahrt-card__icon { margin-bottom: var(--spacing-sm); } .anfahrt-card__title { font-size: 1.05rem; font-weight: var(--font-weight-bold); color: var(--color-text-primary); margin-bottom: var(--spacing-sm); font-family: var(--font-body); } .anfahrt-card__text { font-size: 0.9rem; color: var(--color-text-secondary); line-height: 1.7; margin: 0; } .anfahrt-card__text a { color: var(--color-primary); font-weight: var(--font-weight-semibold); } .anfahrt-card__text a:hover { text-decoration: underline; } /* ÖPNV */ .anfahrt-oepnv { background: var(--color-bg-primary); border-radius: var(--radius-lg); border: 1px solid var(--color-border); padding: var(--spacing-xl); } .anfahrt-oepnv__header { display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-md); } .anfahrt-oepnv__header h3 { font-size: 1.1rem; font-weight: var(--font-weight-bold); color: var(--color-text-primary); margin: 0; font-family: var(--font-body); } .anfahrt-oepnv__link-text { font-size: 0.9rem; color: var(--color-text-secondary); margin-bottom: var(--spacing-lg); } .anfahrt-oepnv__link-text a { color: var(--color-primary); font-weight: var(--font-weight-semibold); } .anfahrt-oepnv__link-text a:hover { text-decoration: underline; } .anfahrt-oepnv__stops { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md); } .anfahrt-stop { background: var(--color-bg-secondary); border-radius: var(--radius-md); padding: var(--spacing-md); } .anfahrt-stop__name { font-size: 0.9rem; font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin-bottom: var(--spacing-sm); font-family: var(--font-body); line-height: 1.4; } .anfahrt-stop__distance { font-weight: var(--font-weight-normal); color: var(--color-text-muted); font-size: 0.85rem; } .anfahrt-stop__lines { display: flex; flex-wrap: wrap; gap: 6px; } .anfahrt-line { display: inline-block; padding: 3px 10px; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: var(--font-weight-bold); color: white; } .anfahrt-line--bus { background: #5c8a3c; } .anfahrt-line--tram { background: #8d0808; } .anfahrt-line--ubahn { background: #2d6ca2; } @media (max-width: 768px) { .anfahrt-grid { grid-template-columns: 1fr; } .anfahrt-oepnv__stops { grid-template-columns: 1fr; } } /* HIGHLIGHT CARD (yellow) */ .highlight-card { background: #fef9e7; border: 2px solid #f0e6b8; border-radius: var(--radius-lg); padding: var(--spacing-xl) var(--spacing-xxl); text-align: center; } [data-theme="dark"] .highlight-card { background: rgba(254, 249, 231, 0.08); border-color: rgba(240, 230, 184, 0.25); } .highlight-card p { font-size: 1rem; line-height: 1.8; color: var(--color-text-secondary); margin-bottom: var(--spacing-md); } .highlight-card__sub { font-weight: var(--font-weight-semibold); font-style: italic; color: var(--color-text-primary) !important; } .highlight-card__hint { font-size: 0.9rem !important; color: var(--color-text-muted) !important; margin-bottom: 0 !important; } /* CAROUSEL */ .carousel { position: relative; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: var(--color-bg-primary); } .carousel__track { display: flex; transition: transform 0.4s ease; } .carousel__slide { min-width: 100%; min-height: 350px; display: flex; align-items: center; justify-content: center; } .carousel__placeholder { color: var(--color-text-muted); font-size: 1rem; } .carousel__btn { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--color-bg-primary); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); cursor: pointer; z-index: 2; display: flex; align-items: center; justify-content: center; color: var(--color-text-primary); transition: all var(--transition-fast); } .carousel__btn:hover { background: var(--color-primary); color: white; border-color: var(--color-primary); } .carousel__btn--prev { left: var(--spacing-md); } .carousel__btn--next { right: var(--spacing-md); } .carousel__dots { display: flex; justify-content: center; gap: 8px; padding: var(--spacing-md) 0; } .carousel__dot { width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--color-border); border: none; cursor: pointer; transition: all var(--transition-fast); } .carousel__dot.is-active { background: var(--color-primary); transform: scale(1.3); } /* MAP CONSENT */ .map-consent { display: flex; align-items: center; justify-content: center; min-height: 450px; background: var(--color-bg-secondary); border-radius: var(--radius-lg); } .map-consent__inner { text-align: center; padding: var(--spacing-xl); max-width: 400px; } .map-consent__inner h3 { font-family: var(--font-body); margin: var(--spacing-md) 0 var(--spacing-sm); color: var(--color-text-primary); } .map-consent__inner p { font-size: 0.9rem; color: var(--color-text-muted); line-height: 1.6; margin-bottom: var(--spacing-md); } .map-consent__link { display: block; margin-top: var(--spacing-sm); font-size: 0.8rem; color: var(--color-primary); } .map-consent__link:hover { text-decoration: underline; } /* DISABLED SUBMIT */ .contact-form__submit--disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* MAP */ .map-wrapper { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--color-border); } .map-wrapper iframe { display: block; width: 100%; } /* CONTACT LAYOUT */ .contact-layout { display: grid; grid-template-columns: 1fr 1.6fr; gap: var(--spacing-xl); align-items: start; } .contact-info .definition-card { height: 100%; } .contact-info__item { display: flex; align-items: flex-start; gap: var(--spacing-md); margin-top: var(--spacing-md); text-align: left; font-size: 0.95rem; color: var(--color-text-secondary); line-height: 1.6; } .contact-info__item svg { flex-shrink: 0; margin-top: 2px; } .contact-info__item a { color: var(--color-primary); font-weight: var(--font-weight-semibold); } .contact-info__item a:hover { text-decoration: underline; } .contact-form-wrapper .definition-card { text-align: left; } .contact-form-wrapper .definition-card h2 { text-align: left; } /* CONTACT FORM */ .contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); } .contact-form__group { margin-bottom: var(--spacing-md); } .contact-form__label { display: block; font-size: 0.875rem; font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin-bottom: var(--spacing-xs); } .contact-form__required { color: var(--color-primary); } .contact-form__input, .contact-form__textarea { width: 100%; padding: 10px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-primary); color: var(--color-text-primary); font-family: var(--font-body); font-size: 0.95rem; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .contact-form__input:focus, .contact-form__textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(141, 8, 8, 0.12); } .contact-form__input::placeholder, .contact-form__textarea::placeholder { color: var(--color-text-muted); } .contact-form__textarea { resize: vertical; min-height: 120px; } .contact-form__checkbox-label { display: flex; align-items: flex-start; gap: var(--spacing-sm); cursor: pointer; position: relative; } .contact-form__checkbox { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; accent-color: var(--color-primary); cursor: pointer; } .contact-form__checkbox-text { font-size: 0.8rem; line-height: 1.6; color: var(--color-text-muted); } .contact-form__checkbox-text a { color: var(--color-primary); font-weight: var(--font-weight-semibold); } .contact-form__checkbox-text a:hover { text-decoration: underline; } .contact-form__submit { margin-top: var(--spacing-sm); width: 100%; padding: 12px 24px; font-size: 1rem; } .contact-form__success { display: none; text-align: center; padding: var(--spacing-xl); } .contact-form__success.is-visible { display: block; } .contact-form__success svg { color: var(--color-secondary); margin-bottom: var(--spacing-md); } @media (max-width: 768px) { .contact-layout { grid-template-columns: 1fr; } .contact-form__row { grid-template-columns: 1fr; } } /* KI MODAL */ .ki-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; } .ki-modal.is-open { opacity: 1; visibility: visible; } .ki-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(3px); } .ki-modal__window { position: relative; z-index: 1; background: var(--color-bg-primary); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: min(820px, 92vw); max-height: 88vh; display: flex; flex-direction: column; resize: both; overflow: auto; min-width: 300px; min-height: 300px; border: 1px solid var(--color-border); animation: kiModalIn 0.3s ease; } @keyframes kiModalIn { from { transform: scale(0.95) translateY(20px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } } .ki-modal__header { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-md) var(--spacing-lg); border-bottom: 1px solid var(--color-border); cursor: move; flex-shrink: 0; user-select: none; } .ki-modal__title { font-size: 1.1rem; font-weight: var(--font-weight-bold); color: var(--color-text-primary); margin: 0; font-family: var(--font-body); } .ki-modal__controls { display: flex; gap: var(--spacing-xs); } .ki-modal__close, .ki-modal__resize { width: 32px; height: 32px; border-radius: var(--radius-md); border: none; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); transition: all var(--transition-fast); } .ki-modal__close:hover { background: var(--color-primary); color: white; } .ki-modal__resize:hover { background: var(--color-bg-secondary); color: var(--color-text-primary); } .ki-modal__body { padding: var(--spacing-lg) var(--spacing-xl); overflow-y: auto; flex: 1; } .ki-modal__body p { font-size: 0.95rem; line-height: 1.8; color: var(--color-text-secondary); text-align: center; } .ki-modal__lead { font-size: 1.1rem !important; font-weight: var(--font-weight-semibold); color: var(--color-text-primary) !important; } .ki-modal__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-sm); margin-top: var(--spacing-lg); } .ki-modal__tile { background: var(--color-bg-secondary); border-radius: var(--radius-lg); border: 1px solid var(--color-border); padding: var(--spacing-md); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--spacing-sm); transition: all var(--transition-fast); } .ki-modal__tile:hover { border-color: var(--color-primary); transform: translateY(-2px); box-shadow: var(--shadow-sm); } .ki-modal__tile span { font-size: 0.85rem; font-weight: var(--font-weight-semibold); color: var(--color-text-primary); line-height: 1.4; } .ki-modal.is-maximized .ki-modal__window { width: 95vw !important; height: 90vh !important; max-width: 95vw; max-height: 90vh; resize: none; } /* ── merged into banken responsive section above ── /* SERVICE INTRO */ .service-intro__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-lg); margin-bottom: var(--spacing-xl); flex-wrap: wrap; } .service-intro__header h2 { margin-bottom: 0; flex: 1; } .service-intro__badge { display: inline-flex; align-items: center; gap: var(--spacing-xs); background: rgba(141, 8, 8, 0.08); color: var(--color-primary); padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-full); font-size: 0.875rem; font-weight: var(--font-weight-semibold); border: 1px solid rgba(141, 8, 8, 0.2); white-space: nowrap; transition: all var(--transition-fast); } .service-intro__badge:hover { background: var(--color-primary); color: var(--color-white); } [data-theme="dark"] .service-intro__badge { background: rgba(141, 8, 8, 0.2); border-color: rgba(141, 8, 8, 0.3); } .service-intro p { font-size: 1.05rem; line-height: 1.85; } /* CLICKABLE BRANCH TILES */ .branch-tile--clickable { cursor: pointer; } .branch-tile--clickable::after { content: ''; position: absolute; bottom: var(--spacing-sm); right: var(--spacing-md); color: var(--color-primary); font-size: 1.1rem; opacity: 0; transition: opacity var(--transition-fast); } .branch-tile--clickable:hover::after { opacity: 0; } .branch-tile--clickable { position: relative; } /* BANKEN MODAL LAYOUT — Text oben, Kacheln unten */ .banken-layout { display: flex; flex-direction: column; gap: var(--spacing-lg); margin-bottom: var(--spacing-lg); } .banken-intro__claim { font-size: 1.1rem; color: var(--color-text-primary); margin-bottom: var(--spacing-md); } .banken-intro p:not(.banken-intro__claim) { font-size: 0.9rem; text-align: left; line-height: 1.7; color: var(--color-text-secondary); } .banken-services__heading { font-size: 1rem; font-weight: var(--font-weight-bold); color: var(--color-text-primary); margin-bottom: var(--spacing-sm); font-family: var(--font-body); } /* Default 3-column grid */ .banken-services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-sm); } .banken-services__grid--2col { grid-template-columns: repeat(2, 1fr); } .banken-services__grid--3col { grid-template-columns: repeat(3, 1fr); } .banken-services__grid--single { grid-template-columns: 1fr; max-width: 220px; } /* CTA button inside modal */ .modal-cta-btn { width: 100%; text-align: center; margin-top: var(--spacing-md); display: flex; justify-content: center; } .banken-feedback { background: rgba(141, 198, 63, 0.1); border: 1px solid rgba(141, 198, 63, 0.3); border-radius: var(--radius-lg); padding: var(--spacing-md) var(--spacing-lg); text-align: center; } [data-theme="dark"] .banken-feedback { background: rgba(141, 198, 63, 0.05); border-color: rgba(141, 198, 63, 0.15); } .banken-feedback__title { font-size: 0.9rem; font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin-bottom: var(--spacing-xs); } .banken-feedback__rating { display: flex; align-items: center; justify-content: center; gap: var(--spacing-sm); flex-wrap: wrap; } .banken-feedback__label { font-size: 0.85rem; color: var(--color-text-secondary); } .banken-feedback__stars { font-size: 1.3rem; color: #f5a623; letter-spacing: 2px; } .banken-feedback__value { font-size: 0.9rem; color: var(--color-text-primary); } /* ── Modal responsive breakpoints ── */ @media (max-width: 860px) { .ki-modal__window { width: 95vw; max-height: 90vh; border-radius: var(--radius-md); } .banken-services__grid, .banken-services__grid--3col { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .ki-modal__window { width: 100vw; max-height: 92svh; border-radius: var(--radius-md) var(--radius-md) 0 0; align-self: flex-end; resize: none; } .ki-modal { align-items: flex-end; } @keyframes kiModalIn { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .ki-modal__tiles { grid-template-columns: repeat(2, 1fr); } .ki-modal__body { padding: var(--spacing-md); } .ki-modal__header { padding: var(--spacing-sm) var(--spacing-md); } .banken-services__grid, .banken-services__grid--2col, .banken-services__grid--3col { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 420px) { .banken-services__grid, .banken-services__grid--2col, .banken-services__grid--3col { grid-template-columns: 1fr; } .ki-modal__title { font-size: 0.95rem; } } /* BRANCH TILES */ .branch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-lg); } .branch-tile { background: var(--color-bg-primary); border-radius: var(--radius-lg); padding: var(--spacing-xl); text-align: center; box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); transition: all var(--transition-normal); position: relative; } .branch-tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--color-primary); } .branch-tile__icon { width: 72px; height: 72px; margin: 0 auto var(--spacing-md); display: flex; align-items: center; justify-content: center; } .branch-tile__icon svg { width: 48px; height: 48px; } .branch-tile__title { font-size: 1.1rem; font-family: var(--font-body); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin-bottom: 0; line-height: 1.4; } @media (max-width: 768px) { .branch-grid { grid-template-columns: repeat(2, 1fr); } .service-intro__header { flex-direction: column; } } @media (max-width: 480px) { .branch-grid { grid-template-columns: 1fr; } } /* ERFOLGE TIMELINE */ .erfolge-timeline { position: relative; padding-left: 0; } .erfolge-timeline::before { content: ''; position: absolute; left: 60px; top: 40px; bottom: 40px; width: 3px; background: var(--color-border); } .erfolge-timeline__year { position: relative; margin-bottom: var(--spacing-xl); } .erfolge-timeline__year:last-child { margin-bottom: 0; } .erfolge-timeline__marker { display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-md); } .erfolge-timeline__dot { width: 20px; height: 20px; flex-shrink: 0; background: var(--color-primary); border-radius: var(--radius-full); border: 4px solid var(--color-bg-secondary); position: relative; left: 51px; z-index: 2; box-shadow: 0 0 0 3px var(--color-primary); } .erfolge-timeline__label { font-family: var(--font-display); font-size: 1.5rem; font-weight: var(--font-weight-bold); color: var(--color-primary); margin-left: 50px; } .erfolge-timeline__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--spacing-md); margin-left: 100px; } .erfolge-card { background: var(--color-bg-primary); border-radius: var(--radius-lg); border: 1px solid var(--color-border); padding: var(--spacing-lg); text-align: center; transition: all var(--transition-normal); } .erfolge-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--color-primary); } .erfolge-card__badge { font-size: 2.5rem; margin-bottom: var(--spacing-sm); } .erfolge-card__title { font-size: 1.05rem; font-weight: var(--font-weight-bold); color: var(--color-text-primary); margin-bottom: var(--spacing-xs); font-family: var(--font-body); } .erfolge-card__desc { font-size: 0.9rem; color: var(--color-text-muted); margin: 0; line-height: 1.5; } .erfolge-card--survey { text-align: left; grid-column: span 1; } .erfolge-card--survey .erfolge-card__title { text-align: center; margin-bottom: var(--spacing-sm); } .erfolge-card--survey .erfolge-card__desc { text-align: center; margin-bottom: var(--spacing-lg); font-style: italic; } .erfolge-card__rating { padding: var(--spacing-sm) 0; border-top: 1px solid var(--color-border-light); } .erfolge-card__rating-label { font-size: 0.85rem; font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin-bottom: 2px; } .erfolge-card__stars { font-size: 1.3rem; color: #f5a623; letter-spacing: 2px; margin-bottom: 2px; } .erfolge-card__rating-value { font-size: 0.8rem; color: var(--color-text-muted); margin: 0; } @media (max-width: 768px) { .erfolge-timeline::before { left: 20px; } .erfolge-timeline__dot { left: 11px; } .erfolge-timeline__label { margin-left: 20px; font-size: 1.25rem; } .erfolge-timeline__cards { margin-left: 50px; grid-template-columns: 1fr; } } @media (max-width: 480px) { .erfolge-timeline__cards { margin-left: 0; margin-top: var(--spacing-sm); } .erfolge-timeline::before { display: none; } .erfolge-timeline__dot { display: none; } .erfolge-timeline__label { margin-left: 0; } } /* TEAM MOSAIC */ .team-mosaic { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--spacing-md); margin-bottom: var(--spacing-md); } .team-mosaic--three { grid-template-columns: repeat(3, 1fr); } .team-mosaic--four { grid-template-columns: repeat(4, 1fr); } .team-mosaic--mixed { grid-template-columns: 1fr 1fr; } .team-mosaic__item { background: var(--color-bg-primary); border-radius: var(--radius-lg); border: 1px solid var(--color-border); overflow: hidden; transition: all var(--transition-normal); min-height: 160px; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; padding: var(--spacing-md); } .team-mosaic__item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--color-primary); } .team-mosaic__placeholder { color: var(--color-text-muted); font-size: 0.9rem; margin: 0; } .team-mosaic__img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--radius-lg); } .team-mosaic__item--img { padding: 0; overflow: hidden; } .team-mosaic__item--info { padding: var(--spacing-lg); } .team-mosaic__label { font-size: 1rem; font-weight: var(--font-weight-bold); color: var(--color-text-primary); margin-bottom: var(--spacing-sm); font-family: var(--font-body); } .team-mosaic__charts { display: flex; gap: var(--spacing-md); justify-content: center; margin-bottom: var(--spacing-sm); } .team-mosaic__chart-label { font-size: 0.8rem; color: var(--color-text-muted); margin: 0; line-height: 1.5; } .team-mosaic__item--video { background: #fef9e7; border-color: #f0e6b8; } [data-theme="dark"] .team-mosaic__item--video { background: rgba(254, 249, 231, 0.1); border-color: rgba(240, 230, 184, 0.2); } .team-mosaic__video-text { font-size: 2rem; font-weight: var(--font-weight-bold); color: var(--color-text-primary); margin: 0; } .team-mosaic__item--map { padding: var(--spacing-xl); min-height: 280px; background: var(--color-bg-primary); } .team-mosaic__map-icon { font-size: 4rem; margin-bottom: var(--spacing-md); } .team-mosaic__map-label { font-size: 0.95rem; font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin: 0; } .team-mosaic__side { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); } .team-mosaic__item--age { padding: var(--spacing-md); } .team-mosaic__age-wave { font-size: 1.5rem; margin-bottom: var(--spacing-xs); } @media (max-width: 768px) { .team-mosaic { grid-template-columns: 1fr; } .team-mosaic--three { grid-template-columns: repeat(2, 1fr); } .team-mosaic--four { grid-template-columns: repeat(2, 1fr); } .team-mosaic--mixed { grid-template-columns: 1fr; } .team-mosaic__side { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .team-mosaic--three, .team-mosaic--four { grid-template-columns: 1fr; } .team-mosaic__side { grid-template-columns: 1fr; } } /* DEFINITION CARD */ .definition-card { background: var(--color-bg-primary); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-xl) var(--spacing-xxl); text-align: center; box-shadow: var(--shadow-sm); } .definition-card__phonetic { font-size: 1.1rem; color: var(--color-text-muted); margin-bottom: var(--spacing-sm); letter-spacing: 1px; } .definition-card__meta { font-size: 1rem; color: var(--color-text-secondary); margin-bottom: var(--spacing-xs); } .definition-card__origin { font-size: 1rem; color: var(--color-primary); margin-bottom: var(--spacing-lg); line-height: 1.7; } .definition-card__text { font-size: 1.05rem; line-height: 1.85; color: var(--color-text-secondary); margin-bottom: var(--spacing-md); } .definition-card__bold { font-size: 1.1rem; font-weight: var(--font-weight-bold); color: var(--color-text-primary); margin-bottom: 0; } /* CTA SECTION */ .cta-section { text-align: center; padding: var(--spacing-3xl) var(--spacing-lg); } .cta-section h2 { margin-bottom: var(--spacing-md); } .cta-section p { max-width: 600px; margin: 0 auto var(--spacing-xl); } .cta-section__buttons { display: flex; gap: var(--spacing-md); justify-content: center; flex-wrap: wrap; } /* RESPONSIVE */ @media (max-width: 1200px) { .hero__inner { grid-template-columns: 1fr; text-align: center; } .hero__content { max-width: 700px; margin: 0 auto; } .hero__cta { justify-content: center; } .hero__stats { justify-content: center; } .hero__visual { display: none; } .why-section { grid-template-columns: 1fr; } .why-section__images { order: -1; } .footer__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 1024px) { .header__inner { padding: 0 var(--spacing-md); flex-wrap: nowrap; gap: 0; } .nav { position: fixed; top: var(--header-height); left: 0; right: 0; bottom: 0; background: var(--color-bg-primary); flex-direction: column; padding: var(--spacing-lg); transform: translateX(100%); transition: transform var(--transition-normal); overflow-y: auto; border-top: 1px solid var(--color-border); } .nav.active { transform: translateX(0); } .nav__list { flex-direction: row; flex-wrap: wrap; width: 100%; align-items: center; } .nav__item { width: 100%; } .nav__item:not(.nav__item--search):not(.nav__item--theme) { width: 100%; } .nav__item--search, .nav__item--theme { width: auto; flex: 0 0 auto; } .nav__link { width: 100%; justify-content: space-between; padding: var(--spacing-md); font-size: 1.1rem; } .nav__dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; padding-left: var(--spacing-lg); display: none; background: transparent; } .nav__item.dropdown-open .nav__dropdown { display: block; } .menu-toggle { display: flex; order: 3; flex-shrink: 0; margin-left: auto; } .theme-toggle { margin-left: 0; margin-right: 0; } .logo { order: 1; } .nav { order: 4; } .nav__item--search { position: static; } .nav__item--search, .nav__item--theme { padding: var(--spacing-xs) 0; } .nav__search-toggle, .theme-toggle { width: 54px; height: 54px; } .nav__search-toggle svg { width: 24px; height: 24px; } .theme-toggle__icon--light, .theme-toggle__icon--dark { width: 24px; height: 24px; } .search-overlay { position: fixed; top: var(--header-height); left: 0; right: 0; } .service-grid { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { :root { --spacing-xxl: 3rem; --spacing-3xl: 4rem; } .hero__title { font-size: clamp(1.4rem, 5vw, 2rem); } .hero__headline { white-space: normal; font-size: clamp(1.6rem, 7vw, 3rem); } .hero__cta { flex-direction: column; align-items: center; } .hero__stats { flex-direction: column; gap: var(--spacing-lg); align-items: center; } .footer__grid { grid-template-columns: 1fr; gap: var(--spacing-xl); } .footer__bottom { flex-direction: column; text-align: center; } .gallery { grid-template-columns: repeat(2, 1fr); } .job { flex-direction: column; align-items: flex-start; } .job__meta { flex-wrap: wrap; } .section { padding: var(--spacing-3xl) 0; } .cta-section { padding: var(--spacing-3xl) var(--spacing-md); } } @media (max-width: 480px) { .btn { width: 100%; justify-content: center; } .cta-section__buttons { flex-direction: column; } .team-grid { grid-template-columns: repeat(2, 1fr); } .gallery { grid-template-columns: repeat(2, 1fr); } .stats-grid { grid-template-columns: 1fr; } .tiles { grid-template-columns: 1fr; } } /* PRINT */ @media print { .header, .footer, body { color: #000; background: #fff; } .section { padding: 1rem 0; } } /* ANIMATIONS */ .fade-in { animation: fadeIn 0.6s ease-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .slide-up { animation: slideUp 0.6s ease-out; } @keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .stagger > *:nth-child(1) { animation-delay: 0.1s; } .stagger > *:nth-child(2) { animation-delay: 0.2s; } .stagger > *:nth-child(3) { animation-delay: 0.3s; } .stagger > *:nth-child(4) { animation-delay: 0.4s; } .stagger > *:nth-child(5) { animation-delay: 0.5s; } .stagger > *:nth-child(6) { animation-delay: 0.6s; } .reveal { opacity: 0; transform: translateY(20px); transition: all 0.6s ease-out; } .reveal.active { opacity: 1; transform: translateY(0); } /* UTILITIES */ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .mb-0 { margin-bottom: 0 !important; } .mb-sm { margin-bottom: var(--spacing-sm) !important; } .mb-md { margin-bottom: var(--spacing-md) !important; } .mb-lg { margin-bottom: var(--spacing-lg) !important; } .mb-xl { margin-bottom: var(--spacing-xl) !important; } .mt-0 { margin-top: 0 !important; } .mt-sm { margin-top: var(--spacing-sm) !important; } .mt-md { margin-top: var(--spacing-md) !important; } .mt-lg { margin-top: var(--spacing-lg) !important; } .mt-xl { margin-top: var(--spacing-xl) !important; } .mx-auto { margin-left: auto; margin-right: auto; } .d-flex { display: flex; } .flex-wrap { flex-wrap: wrap; } .align-center { align-items: center; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .gap-sm { gap: var(--spacing-sm); } .gap-md { gap: var(--spacing-md); } .gap-lg { gap: var(--spacing-lg); } /* ============================================================ HERO VIDEO LAYOUT ============================================================ */ /* Video wrapper + overlay inside all hero sections */ .hero__video-wrapper { position: absolute; inset: 0; z-index: 0; } .hero__video { width: 100%; height: 100%; object-fit: cover; display: block; } .hero__video-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.55) 100%); } .hero__center-content { position: relative; z-index: 2; text-align: center; color: #fff; padding: var(--spacing-xl) var(--spacing-lg); max-width: 1050px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; } .hero__headline { font-size: clamp(1.8rem, 4.5vw, 4rem); font-weight: 900; line-height: 1.15; margin-bottom: 1.6rem; color: #fff; letter-spacing: -1px; text-shadow: 0 4px 24px rgba(0,0,0,0.4); white-space: nowrap; } .hero__headline-highlight { color: var(--color-primary); font-style: italic; } .hero__typewriter-video::after { content: '|'; color: var(--color-primary); animation: blink 0.75s step-end infinite; } .hero__eyebrow { font-size: clamp(1rem, 2vw, 1.4rem); font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: rgba(255,255,255,1); margin: 0 auto 2rem; text-shadow: 0 2px 16px rgba(0,0,0,0.6); line-height: 1.5; max-width: min(820px, calc(100% - 3rem)); padding: 1rem 1.5rem; border-left: 4px solid var(--color-primary); border-right: 4px solid var(--color-primary); background: rgba(141,8,8,0.12); backdrop-filter: blur(4px); border-radius: 4px; display: table; text-align: center; box-sizing: border-box; } /* ══ HERO BANNER ENTRANCE ANIMATIONS ══ */ @keyframes hero-slide-up { from { opacity: 0; transform: translateY(44px); } to { opacity: 1; transform: translateY(0); } } @keyframes hero-fade-in { from { opacity: 0; } to { opacity: 1; } } /* Headline: slides up first */ .hero__headline { animation: hero-slide-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both; } /* Eyebrow tagline: follows after 450 ms */ .hero__eyebrow { animation: hero-slide-up 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both; } /* Breadcrumb: fades in last */ .hero .breadcrumb, .hero--subpage .breadcrumb { animation: hero-fade-in 0.6s ease 0.8s both; } /* page-header variant (Datenschutz, Impressum, Das-sind-wir) */ .page-header__title { animation: hero-slide-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both; } .page-header__subtitle { animation: hero-slide-up 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both; } .page-header .breadcrumb { animation: hero-fade-in 0.6s ease 0.65s both; } /* Respect reduced-motion preference */ @media (prefers-reduced-motion: reduce) { .hero__headline, .hero__eyebrow, .hero .breadcrumb, .hero--subpage .breadcrumb, .page-header__title, .page-header__subtitle, .page-header .breadcrumb { animation: none; } } .hero__subline { font-size: clamp(1.05rem, 2vw, 1.35rem); color: rgba(255,255,255,0.88); margin-bottom: var(--spacing-xl); line-height: 1.7; letter-spacing: 0.2px; } .hero__center-content .hero__cta { display: flex; gap: var(--spacing-md); justify-content: center; flex-wrap: wrap; } .btn--outline-white { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.7); padding: var(--spacing-sm) var(--spacing-lg); border-radius: var(--radius-md); font-weight: var(--font-weight-semibold); font-size: 1rem; text-decoration: none; display: inline-flex; align-items: center; gap: var(--spacing-xs); transition: background 0.25s, border-color 0.25s; } .btn--outline-white:hover { background: rgba(255,255,255,0.15); border-color: #fff; } @keyframes heroFadeDown { from { opacity: 0; transform: translateY(-22px); } to { opacity: 1; transform: translateY(0); } } @keyframes blink { 50% { opacity: 0; } } /* ============================================================ FULLPAGE SCROLL — removed, was blocking scroll on so-arbeiten-wir ============================================================ */ /* Sections füllen exakt den Viewport */ .section--alt, .section--light { /* height and overflow removed to allow normal page scrolling */ } /* Container nimmt volle Höhe ein */ .section--alt > .container, .section--light > .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); box-sizing: border-box; } /* ============================================================ TEAM SECTION — 2-Spalten innerhalb 100vh ============================================================ */ .why-section--team { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: var(--spacing-lg) !important; align-items: center !important; flex: 1 !important; min-height: 0 !important; width: 100%; } /* Linke Textspalte */ .why-section__content--left { display: flex !important; flex-direction: column !important; justify-content: center !important; min-height: 0; overflow: hidden; } .why-section__label { font-size: 0.7rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--color-primary); margin-bottom: 0.3rem; display: block; } .why-section--team h2 { font-size: clamp(1.3rem, 2.2vw, 2rem) !important; line-height: 1.2 !important; margin-bottom: 0.45rem !important; } .why-section__intro { font-size: 0.86rem !important; line-height: 1.6 !important; margin-bottom: 0.4rem !important; } .why-section__body { font-size: 0.81rem; line-height: 1.55; color: var(--color-text-secondary); margin-bottom: 0.45rem; } .why-section__features { display: flex !important; flex-direction: column !important; gap: 0.3rem !important; margin-bottom: 0.45rem; } .why-feature { display: flex; align-items: flex-start; gap: 0.45rem; } .why-feature__icon { flex-shrink: 0; width: 15px; height: 15px; color: var(--color-primary); margin-top: 3px; } .why-feature__title { font-size: 0.83rem; font-weight: 600; margin-bottom: 1px; } .why-feature__text { font-size: 0.77rem; line-height: 1.4; color: var(--color-text-secondary); margin: 0; } .why-section--team .btn { align-self: flex-start !important; margin-top: 0.5rem !important; } /* Rechte Fotospalte */ .why-section__team-photo { display: flex !important; align-items: center !important; justify-content: center !important; min-height: 0; overflow: hidden; } .why-section__team-img { width: 100%; height: auto; max-height: calc(100vh - var(--header-height) - 3rem); object-fit: cover; object-position: top center; border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); display: block; } /* ── Leistungen-Section ── */ .section--light h2 { margin-bottom: var(--spacing-sm) !important; } /* ============================================================ SCROLL-ANIMATIONEN ============================================================ */ .snap-animate { opacity: 0; transform: translateY(28px); transition: opacity 0.65s cubic-bezier(0.22,1,0.36,1), transform 0.65s cubic-bezier(0.22,1,0.36,1); } .snap-animate.snap-animate--left { transform: translateX(-36px); } .snap-animate.snap-animate--right { transform: translateX(36px); } .snap-animate.is-visible { opacity: 1; transform: translate(0,0); } .snap-animate:nth-child(1) { transition-delay: 0.05s; } .snap-animate:nth-child(2) { transition-delay: 0.15s; } .snap-animate:nth-child(3) { transition-delay: 0.25s; } .snap-animate:nth-child(4) { transition-delay: 0.35s; } /* ============================================================ SCROLL-DOTS ============================================================ */ .scroll-dots { position: fixed; right: 1.5rem; top: 50%; transform: translateY(-50%); z-index: 1000; display: flex; flex-direction: column; gap: 0.6rem; transition: opacity 0.4s; } .scroll-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.35); border: 1.5px solid rgba(255,255,255,0.6); cursor: pointer; transition: background 0.3s, transform 0.3s; } .scroll-dot.is-active { background: var(--color-primary); border-color: var(--color-primary); transform: scale(1.4); } /* ============================================================ TEAM SECTION (index.html) – vollständig responsive ============================================================ */ /* Outer section */ .team-section { width: 100%; min-height: 100svh; background-color: var(--color-bg-secondary); display: flex; align-items: center; box-sizing: border-box; padding: 0; } /* Inner grid wrapper */ .team-section__inner { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: calc(var(--header-height) + 2rem) clamp(1.5rem, 4vw, 3rem) 2rem; box-sizing: border-box; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; min-height: 100svh; } /* Left: text column */ .team-section__text { display: flex; flex-direction: column; justify-content: center; gap: 0; } .team-section__label { font-size: clamp(0.7rem, 1.2vw, 1rem); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--color-primary); margin: 0 0 0.6rem; display: block; } .team-section__heading { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 3.8vw, 3.6rem); line-height: 1.1; color: var(--color-text-primary); margin: 0 0 1.2rem; } .team-section__intro { font-size: clamp(0.88rem, 1.2vw, 0.96rem); line-height: 1.7; color: var(--color-text-secondary); margin: 0 0 0.9rem; } .team-section__body { font-size: clamp(0.82rem, 1.1vw, 0.91rem); line-height: 1.65; color: var(--color-text-secondary); margin: 0 0 1.4rem; } /* Feature list */ .team-section__features { display: flex; flex-direction: column; gap: 0.9rem; margin-bottom: 1.6rem; list-style: none; padding: 0; } .team-feature { display: flex; align-items: flex-start; gap: 0.7rem; } .team-feature__icon { flex-shrink: 0; width: 14px; height: 14px; color: var(--color-primary); margin-top: 4px; } .team-feature__title { font-size: 0.95rem; font-weight: 700; color: var(--color-text-primary); margin: 0 0 4px; } .team-feature__text { font-size: 0.85rem; line-height: 1.5; color: var(--color-text-secondary); margin: 0; } .team-section__cta { display: inline-flex; align-items: center; gap: 0.4rem; align-self: flex-start; } /* Right: photo column */ .team-section__photo { display: flex; align-items: center; justify-content: center; height: 100%; overflow: hidden; } .team-section__img { width: 100%; height: calc(100svh - var(--header-height) - 4rem); max-height: 700px; object-fit: cover; object-position: top center; border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); display: block; } /* ============================================================ RESPONSIVE – alle Breakpoints ============================================================ */ /* Tablet landscape / small desktop */ @media (max-width: 1100px) { .team-section__inner { gap: 2.5rem; padding-left: clamp(1.2rem, 3vw, 2.5rem); padding-right: clamp(1.2rem, 3vw, 2.5rem); } } /* Tablet portrait */ @media (max-width: 900px) { .team-section { min-height: auto; padding: 0; } .team-section__inner { grid-template-columns: 1fr; min-height: auto; padding-top: calc(var(--header-height) + 2rem); padding-bottom: 3rem; gap: 2rem; } .team-section__photo { order: -1; height: auto; } .team-section__img { height: clamp(220px, 40vw, 380px); max-height: none; } /* legacy why-section */ .why-section--team { grid-template-columns: 1fr !important; } .why-section__team-photo { order: -1; height: 30vh; } .why-section__team-img { max-height: 30vh; } } /* Mobile */ @media (max-width: 768px) { .scroll-dots { display: none; } /* Sections reset (NOT hero – hero braucht eigene Behandlung unten) */ .section--alt, .section--light { height: auto !important; min-height: auto !important; max-height: none !important; overflow: visible !important; padding: var(--spacing-xl) 0 !important; } /* .hero Basis-Reset (Index-Seite) – Höhe freigeben, aber padding-top bleibt */ .hero { height: auto !important; max-height: none !important; overflow: visible !important; padding-bottom: var(--spacing-xl) !important; /* padding-top: var(--header-height) aus Basisregel bleibt erhalten */ } /* ── Banner-Fix: hero--subpage – padding-top muss die fixe Nav berücksichtigen ── */ .hero--subpage { min-height: 55vh !important; overflow: hidden !important; padding-top: calc(var(--header-height) + 2rem) !important; padding-bottom: 2.5rem !important; justify-content: flex-start !important; } .hero--subpage .hero__center-content { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; } .section--alt > .container, .section--light > .container { height: auto; padding: var(--spacing-xl) var(--spacing-md); } .why-section--team { height: auto !important; max-height: none !important; grid-template-columns: 1fr !important; } .team-section__inner { padding-left: var(--spacing-md); padding-right: var(--spacing-md); padding-top: calc(var(--header-height) + 1.5rem); padding-bottom: 2.5rem; } .team-section__img { height: clamp(180px, 50vw, 300px); border-radius: var(--radius-lg); } .team-section__heading { font-size: clamp(1.6rem, 7vw, 2.4rem); } } /* Small mobile */ @media (max-width: 480px) { .team-section__inner { padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); } .team-section__img { height: 220px; border-radius: var(--radius-md); } .team-section__label { font-size: 0.65rem; } .team-feature__title { font-size: 0.88rem; } .team-feature__text { font-size: 0.8rem; } } /* ============================================================ KARRIERE CTA DROPDOWN ============================================================ */ .nav__dropdown--cta { right: 0; left: auto; min-width: 210px; } /* "Jetzt bewerben" Sonderlink */ .nav__dropdown-link--cta { color: var(--color-primary) !important; font-weight: var(--font-weight-semibold); border-top: 1px solid var(--color-border); margin-top: var(--spacing-xs); padding-top: var(--spacing-sm); } .nav__dropdown-link--cta:hover, .nav__dropdown-link--cta:focus { color: #FFFFFF !important; } /* ============================================================ SERVICE GROUPS (umrahmte Abschnitte im Industrie-Modal) ============================================================ */ .service-group { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-md) var(--spacing-md) var(--spacing-md); margin-bottom: var(--spacing-md); position: relative; } .service-group__label { display: inline-block; position: absolute; top: -0.65rem; left: var(--spacing-md); background: var(--color-bg-primary); padding: 0 0.5rem; font-size: 0.78rem; font-weight: var(--font-weight-semibold); color: var(--color-text-muted); letter-spacing: 0.5px; text-transform: uppercase; } /* Grid innerhalb der Gruppe */ .service-group__grid { display: grid; gap: var(--spacing-sm); margin-top: var(--spacing-xs); } .service-group__grid--4col { grid-template-columns: repeat(4, 1fr); } .service-group__grid--3col { grid-template-columns: repeat(3, 1fr); } .service-group__grid--2col { grid-template-columns: repeat(2, 1fr); } /* Vertrieb + Feedback nebeneinander */ .service-group--row { display: flex; gap: var(--spacing-md); align-items: flex-start; padding-top: var(--spacing-lg); } .service-group__left { flex: 1; min-width: 0; } .service-group__feedback { flex: 0 0 auto; width: clamp(180px, 35%, 240px); margin: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; } /* Responsive */ @media (max-width: 860px) { .service-group__grid--4col { grid-template-columns: repeat(2, 1fr); } .service-group__grid--3col { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { .service-group--row { flex-direction: column; } .service-group__feedback { width: 100%; } .service-group__grid--4col, .service-group__grid--3col, .service-group__grid--2col { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 420px) { .service-group__grid--4col, .service-group__grid--3col, .service-group__grid--2col { grid-template-columns: 1fr; } } /* ============================================================ WARUM WIR – Text + Social Links (karriere.html) ============================================================ */ .warum-wir__footer { margin-top: var(--spacing-xl); display: flex; flex-direction: column; align-items: center; gap: 1.75rem; text-align: left; } .warum-wir__text { font-size: 1.1rem !important; line-height: 1.85 !important; color: var(--color-text-primary) !important; max-width: 680px !important; width: 100% !important; margin: 0 !important; text-align: justify !important; hyphens: auto !important; -webkit-hyphens: auto !important; } .warum-wir__text strong { color: var(--color-text-primary); } [data-theme="dark"] .warum-wir__text, [data-theme="dark"] .warum-wir__text strong { color: #ffffff !important; } .warum-wir__socials { display: flex; align-items: center; gap: var(--spacing-lg); flex-wrap: wrap; justify-content: center; } .warum-wir__social-link { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; color: var(--color-text-muted); font-size: 0.8rem; font-weight: var(--font-weight-semibold); letter-spacing: 0.5px; text-transform: uppercase; transition: color var(--transition-fast), transform var(--transition-fast); text-decoration: none; } .warum-wir__social-link:hover { color: var(--color-primary); transform: translateY(-4px); } .warum-wir__social-link svg { display: block; } /* ============================================ COOKIE CONSENT MODAL ============================================ */ .cc-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(3px); z-index: 99999; display: flex; align-items: flex-end; justify-content: center; padding: var(--spacing-lg); opacity: 0; pointer-events: none; transition: opacity var(--transition-normal); } @media (min-width: 640px) { .cc-overlay { align-items: center; } } .cc-overlay--visible { opacity: 1; pointer-events: auto; } .cc-modal { background: var(--color-bg-primary); border-radius: 20px; box-shadow: var(--shadow-xl); width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; transform: translateY(40px) scale(0.97); transition: transform var(--transition-normal); border: 1px solid var(--color-border); } .cc-overlay--visible .cc-modal { transform: translateY(0) scale(1); } .cc-modal__header { padding: 1.8rem 1.8rem 1rem; border-bottom: 1px solid var(--color-border-light); } .cc-modal__logo { display: flex; align-items: center; gap: 0.5rem; font-size: 1.05rem; font-weight: var(--font-weight-semibold); color: var(--color-primary); margin-bottom: 0.8rem; } .cc-modal__intro { font-size: 0.875rem; color: var(--color-text-secondary); line-height: 1.6; margin: 0; } .cc-modal__intro a { color: var(--color-primary); text-decoration: underline; } .cc-modal__body { padding: 0.5rem 1.8rem 0.5rem; } .cc-category { padding: 1.1rem 0; border-bottom: 1px solid var(--color-border-light); } .cc-category:last-child { border-bottom: none; } .cc-category__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .cc-category__info { flex: 1; } .cc-category__name { display: block; font-size: 0.93rem; font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin-bottom: 0.3rem; } .cc-category__desc { display: block; font-size: 0.8rem; color: var(--color-text-muted); line-height: 1.5; } /* Toggle Switch */ .cc-toggle { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; flex-shrink: 0; cursor: pointer; } .cc-toggle--disabled { cursor: default; } .cc-toggle__input { position: absolute; opacity: 0; width: 0; height: 0; } .cc-toggle__slider { position: relative; width: 44px; height: 24px; background: var(--color-border); border-radius: 99px; transition: background var(--transition-fast); flex-shrink: 0; } .cc-toggle__slider::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--color-white); box-shadow: var(--shadow-xs); transition: transform var(--transition-fast); } .cc-toggle__input:checked + .cc-toggle__slider { background: var(--color-primary); } .cc-toggle__input:checked + .cc-toggle__slider::after { transform: translateX(20px); } .cc-toggle--disabled .cc-toggle__slider { background: var(--color-primary); opacity: 0.6; } .cc-toggle__label { font-size: 0.7rem; color: var(--color-text-muted); white-space: nowrap; } /* Footer Buttons */ .cc-modal__footer { display: flex; gap: 0.6rem; flex-wrap: wrap; padding: 1.2rem 1.8rem; border-top: 1px solid var(--color-border-light); background: var(--color-bg-secondary); border-radius: 0 0 20px 20px; } .cc-btn { flex: 1; min-width: 130px; padding: 0.65rem 1rem; border-radius: 8px; font-size: 0.85rem; font-weight: var(--font-weight-semibold); font-family: var(--font-body); cursor: pointer; transition: all var(--transition-fast); border: 2px solid transparent; text-align: center; white-space: nowrap; } .cc-btn--primary { background: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); } .cc-btn--primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); transform: translateY(-1px); } .cc-btn--outline { background: transparent; color: var(--color-text-secondary); border-color: var(--color-border); } .cc-btn--outline:hover { border-color: var(--color-text-secondary); color: var(--color-text-primary); transform: translateY(-1px); } .cc-modal__legal { text-align: center; font-size: 0.75rem; color: var(--color-text-muted); padding: 0.7rem 1.8rem 1.2rem; margin: 0; } .cc-modal__legal a { color: var(--color-text-muted); text-decoration: underline; } /* Revoke Button (floating, bottom-left) */ .cc-revoke { position: fixed; bottom: 1.5rem; left: 1.5rem; display: flex; align-items: center; gap: 0.4rem; background: var(--color-bg-primary); border: 1px solid var(--color-border); color: var(--color-text-secondary); border-radius: 99px; padding: 0.5rem 0.9rem 0.5rem 0.7rem; font-size: 0.8rem; font-family: var(--font-body); font-weight: var(--font-weight-medium); cursor: pointer; box-shadow: var(--shadow-md); z-index: 9990; opacity: 0; transform: translateY(10px); pointer-events: none; transition: all var(--transition-fast); } .cc-revoke--visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .cc-revoke:hover { background: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); box-shadow: var(--shadow-lg); } @media (max-width: 480px) { .cc-overlay { padding: 0.5rem; } .cc-modal { border-radius: 16px 16px 0 0; max-height: 95vh; } .cc-modal__footer { flex-direction: column; } .cc-btn { flex: none; width: 100%; } .cc-revoke span { display: none; } .cc-revoke { padding: 0.6rem; } } /* ============================================ PAGE HEADER – VIDEO BANNER ============================================ */ .page-header--video { background: #0a0a0a; background-image: none !important; min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: var(--header-height) 0 0; } .page-header--video .container { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: calc(70vh - var(--header-height)); padding: var(--spacing-xl) var(--spacing-lg); width: 100%; } .page-header__video-wrapper { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .page-header__video { width: 100%; height: 100%; object-fit: cover; display: block; } .page-header__video-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.55) 100%); } /* ============================================ HERO – SUBPAGE VARIANT (video banner, kürzere Höhe) ============================================ */ .hero--subpage { min-height: 65vh; height: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: var(--header-height); } .hero--subpage .hero__center-content { max-width: 900px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .hero--subpage .hero__headline { font-size: clamp(2.2rem, 5vw, 4rem); white-space: normal; } .hero--subpage .breadcrumb { margin-top: var(--spacing-lg); justify-content: center; } .hero--subpage .breadcrumb a, .hero--subpage .breadcrumb span { color: rgba(255,255,255,0.75); opacity: 1; } .hero--subpage .breadcrumb a:hover { color: #fff; } /* ============================================ FOOTER – CLEAN LOGO BAR ============================================ */ /* Reset old footer grid columns */ .footer__grid, .footer__column, .footer__brand p, .footer__logos { display: none !important; } /* Social icons in footer__bottom must remain visible */ .footer__social { display: none !important; } .footer__bottom .footer__social { display: flex !important; gap: 10px; } .footer { background: var(--color-bg-secondary); border-top: 1px solid var(--color-border); padding: var(--spacing-xl) 0 var(--spacing-lg); } .footer__main { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: var(--spacing-lg); border-bottom: 1px solid var(--color-border); } /* ── verbaneum logo ── */ .footer__logo { flex-shrink: 0; } .footer__logo .logo__img { height: 55px; width: auto; display: block; /* Dark mode: existing .footer .logo__img rule (brightness(0) invert = pure white) applies */ transition: filter 0.2s; } /* Light mode: show original logo colors (dark grey + red) — no filter */ [data-theme="light"] .footer__logo .logo__img { filter: none !important; } /* vertical divider after logo */ .footer__logo::after { content: ''; display: block; width: 1px; height: 44px; background: var(--color-border); margin-left: 24px; } /* ── badge strip ── */ .footer__badges { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; flex: 1; } .footer__badge-item { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 0 12px; opacity: 0.82; transition: opacity 0.2s ease, transform 0.2s ease; } .footer__badge-item:hover { opacity: 1; transform: translateY(-2px); } /* All logos same height — width scales automatically */ .footer__badge-img { height: 54px; width: auto; max-width: 140px; object-fit: contain; display: block; } /* Slightly shorter for very wide logos to avoid overflow */ .footer__badge-img--wide { height: 44px; max-width: 180px; } /* Light-mode adjustments: CCV logo is dark on white — fine. Others have coloured backgrounds — fine. No inversion needed. */ [data-theme="dark"] .footer__badge-img { filter: brightness(0.88); } [data-theme="dark"] .footer__badge-item:hover .footer__badge-img { filter: brightness(1); } /* ── PINA EARTH: Logo-Variante je nach Modus ── */ /* Lightmode (default + explizit): dunkle Version sichtbar */ .footer__badge-pina-light { display: block; } .footer__badge-pina-dark { display: none; } /* Darkmode via data-theme */ [data-theme="dark"] .footer__badge-pina-light { display: none !important; filter: none; } [data-theme="dark"] .footer__badge-pina-dark { display: block !important; filter: none; } /* Darkmode via OS-Präferenz (kein data-theme gesetzt) */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) .footer__badge-pina-light { display: none !important; filter: none; } :root:not([data-theme]) .footer__badge-pina-dark { display: block !important; filter: none; } } /* Lightmode explizit gesetzt */ [data-theme="light"] .footer__badge-pina-light { display: block !important; } [data-theme="light"] .footer__badge-pina-dark { display: none !important; } /* ── bottom bar ── */ .footer__bottom { display: flex; align-items: center; justify-content: space-between; padding-top: var(--spacing-md); gap: var(--spacing-md); } /* Social icons – left side of bottom bar */ .footer__bottom .footer__social { display: flex !important; gap: 8px; align-items: center; } .footer__bottom .footer__social-link { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; color: var(--color-text-secondary); background: var(--color-bg-secondary); transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease; } .footer__bottom .footer__social-link:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; transform: translateY(-2px); } [data-theme="dark"] .footer__bottom .footer__social-link { border-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.6); background: transparent; } .footer__legal { display: flex; gap: var(--spacing-lg); align-items: center; } .footer__legal a { font-size: 0.8rem; color: var(--color-text-muted, var(--color-text-secondary)); text-decoration: none; transition: color 0.2s; } .footer__legal a:hover { color: var(--color-primary); } /* ── Responsive ── */ @media (max-width: 1024px) { .footer__badge-img { height: 46px; max-width: 120px; } .footer__badge-img--wide { height: 38px; max-width: 155px; } } @media (max-width: 768px) { .footer__main { flex-wrap: wrap; gap: 16px; justify-content: flex-start; } .footer__logo::after { display: none; } .footer__badges { flex-wrap: wrap; justify-content: flex-start; gap: 16px; } .footer__badge-item { flex: 0 0 auto; padding: 0; } .footer__badge-img { height: 38px; max-width: 100px; } .footer__badge-img--wide { height: 30px; max-width: 130px; } .footer__bottom { justify-content: center; flex-wrap: wrap; } } /* ============================================================ RESPONSIVE OVERHAUL – Konsolidierte Mobile Fixes Fixes: Banner-Abstände, Section-Padding, Overflow, Grids ============================================================ */ /* --- 1024px: Tablet Landscape --- */ @media (max-width: 1024px) { .hero--subpage { min-height: 60vh; height: auto; justify-content: flex-start; padding-top: calc(var(--header-height) + 2.5rem); padding-bottom: 2.5rem; } .hero--subpage .hero__center-content { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; } .page-header { padding: calc(var(--header-height) + 3.5rem) 0 3.5rem; } } /* --- 768px: Tablet Portrait / Mobile Landscape --- */ @media (max-width: 768px) { /* Banner / Page-Header */ .page-header { padding: calc(var(--header-height) + 2.5rem) 0 2.5rem; align-items: center; justify-content: center; } .page-header__title { font-size: clamp(1.6rem, 5vw, 2.8rem); text-align: center; width: 100%; } .page-header__subtitle { font-size: 1rem; padding: 0 var(--spacing-md); text-align: center; margin-left: auto; margin-right: auto; } .page-header--video { min-height: 55vh; align-items: center; justify-content: center; } .page-header--video .container { padding: 2.5rem var(--spacing-md); min-height: calc(55vh - var(--header-height)); align-items: center; text-align: center; } /* Hero Subpage */ .hero--subpage { min-height: 55vh; height: auto; align-items: center; justify-content: flex-start; padding-top: calc(var(--header-height) + 2rem); padding-bottom: 2.5rem; } .hero--subpage .hero__center-content { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; } .hero--subpage .hero__headline { font-size: clamp(1.8rem, 5.5vw, 3rem); text-align: center; } /* Hero Inner – weniger vertikales Padding */ .hero__inner { padding: var(--spacing-xl) var(--spacing-md); } /* Sections */ .section { padding: var(--spacing-xxl) 0; } .cta-section { padding: var(--spacing-xxl) var(--spacing-md); } /* Grids */ .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-md); } .tiles { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } /* Zitat-Karten Breite */ .zitat-card { width: 260px; } /* Timeline */ .ct-year--l .ct-slot-left, .ct-year--r .ct-slot-right { padding: 0 var(--spacing-sm); } } /* --- 480px: Mobile Portrait --- */ @media (max-width: 480px) { /* Spacing-Variablen weiter reduzieren */ :root { --spacing-xl: 2rem; --spacing-xxl: 2.5rem; --spacing-3xl: 3rem; } /* Container – schmälere Geräte */ .container { padding: 0 1.25rem; } /* Banner / Page-Header */ .page-header { padding: calc(var(--header-height) + 2rem) 0 2rem; align-items: center; justify-content: center; } .page-header__title { font-size: clamp(1.4rem, 6vw, 2rem); padding: 0 1.25rem; text-align: center; width: 100%; } .page-header__subtitle { font-size: 0.95rem; padding: 0 1.25rem; text-align: center; margin-left: auto; margin-right: auto; } .page-header--video { min-height: 50vh; align-items: center; justify-content: center; } .page-header--video .container { padding: 2rem 1.25rem; min-height: calc(50vh - var(--header-height)); align-items: center; text-align: center; } /* Hero Inner */ .hero__inner { padding: var(--spacing-xl) 1.25rem; } .hero--subpage { min-height: 50vh; padding-top: calc(var(--header-height) + 1.5rem); padding-bottom: 2rem; justify-content: flex-start; } /* Sections */ .section { padding: var(--spacing-xl) 0; } .cta-section { padding: var(--spacing-xl) 1.25rem; } /* Grids → single column */ .stats-grid { grid-template-columns: 1fr; } .tiles { grid-template-columns: 1fr; } .flip-grid, .stakeholder__grid { grid-template-columns: 1fr; } /* Zitat-Karten Breite an Screen anpassen */ .zitat-card { width: min(260px, calc(100vw - 2.5rem)); } /* Buttons immer volle Breite */ .btn { width: 100%; justify-content: center; } /* Hero CTA-Buttons stapeln */ .hero__cta { flex-direction: column; align-items: stretch; } /* Bilder */ .hero__image-wrapper { height: 240px; } } /* --- 375px: Kleine Smartphones (iPhone SE etc.) --- */ @media (max-width: 375px) { .container { padding: 0 1rem; } .hero__inner { padding: var(--spacing-xl) 1rem; } .page-header__title { font-size: clamp(1.2rem, 7vw, 1.8rem); padding: 0 1rem; } .page-header--video .container { padding: 1.5rem 1rem; } .nav__link { font-size: 1rem; } .hero__title { font-size: clamp(1.2rem, 6vw, 1.8rem); } .hero__headline { font-size: clamp(1.4rem, 7vw, 2rem); } .zitat-card { width: calc(100vw - 2rem); } .stat-tile { padding: var(--spacing-md); } .section { padding: 2rem 0; } .cta-section { padding: 2rem 1rem; } } /* --- Universell: Bilder nie breiter als Viewport --- */ img, video, iframe, embed, object { max-width: 100%; } /* --- Touch: Hover-Effekte auf Touch-only deaktivieren --- */ @media (hover: none) and (pointer: coarse) { .tile:hover, .stat-tile:hover, .zitat-card:hover, .ct-card:hover, .value-card:hover { transform: none; } .tile:hover::before { transform: scaleY(0); } } /* ── Hero Center Content Mobile ── */ @media (max-width: 768px) { .hero__center-content { padding: var(--spacing-xl) var(--spacing-md); align-items: center; text-align: center; } .hero__headline { white-space: normal; font-size: clamp(1.6rem, 6vw, 3rem); letter-spacing: -0.5px; } .hero__eyebrow { font-size: clamp(0.85rem, 3vw, 1rem); letter-spacing: 2px; padding: 0.75rem 1rem; max-width: min(820px, calc(100% - 3rem)); display: table; } .page-header .container, .page-header--video .container { align-items: center; text-align: center; } .page-header__title, .page-header__subtitle { text-align: cente