/* Swiss Style Design System - SafeRoute */
/* 1. Variables & Design Tokens */
:root {
/* Colors - Minimalist & Strategic */
--color-bg: #FFFFFF;
--color-text-primary: #191615;
/* SafeRoute Darkest */
--color-text-secondary: #595959;
--color-accent: #e69d3d;
/* SafeRoute Orange - Use Sparingly */
--color-grid-line: #E5E5E5;
--color-white: #ffffff;
/* On-dark variants – used in dark-background sections & footer */
--color-on-dark: rgba(255, 255, 255, 0.75);
--color-on-dark-muted: rgba(255, 255, 255, 0.60);
--color-border-dark: rgba(255, 255, 255, 0.15);
--color-accent-dark: #d4882a; /* Btn hover – accent darkened ~15% */
--color-bg-subtle: #f5f5f5; /* Light grey for interactive hover states */
--color-bg-warm: #f7f2e9; /* Warmer Off-White (Accent-verwandt) fuer Testimonial-Baender, hebt sich von bg-subtle und weiss ab */
/* Typography - Inter (Modern, Neutral, Swiss) */
--font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
/* Scale (Major Third approx) */
--font-size-base: 1rem;
/* 16px */
--font-size-sm: 0.8rem;
/* 12.8px */
--font-size-md: 1.25rem;
/* 20px */
--font-size-lg: 1.563rem;
/* 25px */
--font-size-xl: 1.953rem;
/* 31px */
--font-size-2xl: 2.441rem;
/* 39px */
--font-size-3xl: 3.052rem;
/* 48px */
--font-size-4xl: 3.815rem;
/* 61px */
--font-size-5xl: 4.768rem;
/* 76px */
/* Spacing - Modular Scale */
--space-unit: 8px;
--space-xs: calc(1 * var(--space-unit));
/* 8px */
--space-sm: calc(2 * var(--space-unit));
/* 16px */
--space-md: calc(4 * var(--space-unit));
/* 32px */
--space-lg: calc(8 * var(--space-unit));
/* 64px */
--space-xl: calc(20 * var(--space-unit));
/* 160px - Increased for better separation */
--space-2xl: calc(30 * var(--space-unit));
/* 240px - Increased */
/* Grid */
--grid-columns: 12;
--grid-gap: var(--space-sm);
--max-width: 1440px;
/* Motion — exponential easing for natural deceleration */
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}
/* 2. Reset & Base Styles */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
scroll-behavior: smooth;
/* Sticky-Header (130px ab 1025px) darf Anker-Ziele nicht verdecken */
scroll-padding-top: 138px;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
@media (max-width: 1024px) {
/* Kompakter Header: 66px */
html {
scroll-padding-top: 74px;
}
}
/* Anker-Ziele: der Sprung muss zwei Dinge gleichzeitig absorbieren, das
grosszuegige Section-Padding und den sticky Header, der sonst genau den
Inhalt verdeckt, zu dem gesprungen wurde. Rechnung statt fester Werte:
Header + 40px Luft - Section-Padding. --header-height wird beim Laden und
bei jedem Resize aus dem echten Header gemessen, damit die Werte nicht
auseinanderlaufen, sobald sich am Header etwas aendert.
Section-Padding ist --space-xl, ab 768px --space-lg. */
.section[id] {
scroll-margin-top: calc(var(--header-height, 130px) + 40px - var(--section-padding));
}
/* Ankerziele ohne eigenes Section-Padding: hier gibt es nichts zu
absorbieren, es zaehlt nur der Header. Betrifft #prozess, das als Raster
innerhalb von #angebot sitzt und aus der Navigation angesprungen wird. */
#prozess {
scroll-margin-top: calc(var(--header-height, 130px) + 40px);
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
body {
background-color: var(--color-bg);
color: var(--color-text-primary);
font-family: var(--font-family-sans);
line-height: 1.4;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 3. Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Inter Tight', var(--font-family-sans);
font-weight: 500;
line-height: 1.1;
letter-spacing: -0.02em;
margin-bottom: var(--space-sm);
}
h1 {
font-size: clamp(2.5rem, 8vw, var(--font-size-5xl));
}
h2 {
font-size: clamp(2rem, 6vw, var(--font-size-3xl));
}
h3 {
font-size: clamp(1.5rem, 5vw, var(--font-size-xl));
}
h4 {
font-size: var(--font-size-lg);
}
p {
font-size: var(--font-size-base);
margin-bottom: var(--space-md);
max-width: 60ch;
/* Optimal line length */
}
a {
color: inherit;
text-decoration: none;
border-bottom: 1px solid var(--color-text-primary);
transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
/* Textlinks: Farbe und Unterstrich wechseln auf Akzent, kein Block-Hintergrund.
(Der fruehere schwarze Block auf Hover wurde von Blog-, Footer- und Team-Links
einzeln mit !important ueberschrieben und sah in Fliesstext falsch aus.) */
a:hover {
color: var(--color-accent);
border-bottom-color: var(--color-accent);
}
.brand {
text-transform: uppercase;
font-weight: 700;
}
.dot {
color: var(--color-accent);
}
/* 4. Layout Utility Classes */
.container {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 var(--space-md);
}
.grid {
display: grid;
grid-template-columns: repeat(var(--grid-columns), 1fr);
gap: var(--grid-gap);
}
@media (max-width: 768px) {
.grid {
grid-template-columns: 1fr;
gap: var(--space-lg);
}
}
/* Padding laeuft ueber eine Variable, weil der Ankersprung damit rechnen
muss. Wer hier einen Wert aendert, aendert das Scroll-Margin automatisch
mit. Siehe .section[id] weiter oben. */
.section {
--section-padding: var(--space-xl);
padding: var(--section-padding) 0;
border-top: 1px solid var(--color-grid-line);
}
@media (max-width: 768px) {
.section {
--section-padding: var(--space-lg);
}
}
.section:first-of-type {
border-top: none;
}
/* Background Utilities */
.bg-light {
background-color: var(--color-bg-subtle);
border-top: none;
/* Seamless flow */
border-bottom: 1px solid var(--color-grid-line);
}
.bg-dark {
background-color: var(--color-text-primary);
color: var(--color-bg);
border-top: none;
}
.bg-dark h2,
.bg-dark p,
.bg-dark li,
.bg-dark a {
color: var(--color-bg);
}
.bg-dark .hero-subtitle,
.economy-visual .hero-subtitle {
color: var(--color-accent);
}
/* Header Navigation Mobile */
@media (max-width: 768px) {
.header {
padding: var(--space-xs) 0;
}
.nav-grid {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo img {
height: 32px !important;
}
.logo-text {
font-size: 1.1rem;
}
.mobile-menu-toggle {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 20px;
background: none;
border: none;
cursor: pointer;
z-index: 1001;
padding: 0;
}
.mobile-menu-toggle span {
display: block;
width: 100%;
height: 2px;
background-color: var(--color-text-primary);
transition: transform 0.3s ease, background-color 0.3s ease;
}
.nav-links {
position: fixed;
top: 0;
right: -100%;
width: 80%;
height: 100vh;
background-color: var(--color-bg);
flex-direction: column;
padding: var(--space-xl) var(--space-md);
box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1000;
display: flex !important;
/* Force flex but move off-screen */
}
.nav-links.is-open {
right: 0;
}
.nav-links li {
margin-bottom: var(--space-md);
opacity: 0;
transform: translateX(20px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.nav-links.is-open li {
opacity: 1;
transform: translateX(0);
}
/* Menu Toggle States */
.mobile-menu-toggle.is-active span:nth-child(1) {
transform: translateY(9px) rotate(45deg);
}
.mobile-menu-toggle.is-active span:nth-child(2) {
opacity: 0;
}
.mobile-menu-toggle.is-active span:nth-child(3) {
transform: translateY(-9px) rotate(-45deg);
}
.nav-item:last-child {
margin-top: var(--space-lg);
}
}
/* 4.1 Grid Spans & Responsive Layout */
.hero-content {
grid-column: 1 / 8;
}
.hero-title {
font-size: clamp(2rem, 10vw, 3.5rem);
line-height: 1.1;
margin-bottom: var(--space-sm);
}
.header-text-content {
grid-column: 1 / 6;
}
.journey-header-content {
grid-column: 1 / 6;
}
.service-lead-content {
grid-column: 1 / 6;
}
@media (max-width: 992px) {
.hero-content,
.header-text-content,
.journey-header-content,
.service-lead-content {
grid-column: 1 / -1;
}
}
/* Sec 02: Data List (Interactive Accordion) */
.data-list {
list-style: none;
border-top: 2px solid var(--color-text-primary);
}
.data-list-item {
border-bottom: 2px solid var(--color-text-primary);
transition: background-color 0.3s ease;
width: 100%;
outline: none;
}
.data-list-item:hover {
background-color: var(--color-bg-subtle);
}
.data-list summary {
padding: var(--space-md) 0;
font-size: var(--font-size-md);
font-weight: 700;
display: flex;
align-items: center;
cursor: pointer;
list-style: none;
user-select: none;
transition: padding-left 0.3s ease;
}
.data-list summary::-webkit-details-marker {
display: none;
}
.data-list summary::before {
content: "→";
font-family: monospace;
font-size: 1.2rem;
color: var(--color-accent);
margin-right: var(--space-md);
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
display: inline-block;
}
.data-list-item:hover summary {
padding-left: var(--space-sm);
}
.data-list-item:hover summary::before {
transform: translateX(5px);
}
.data-list-item.is-open summary::before {
transform: rotate(90deg);
}
/* Sec 09: FAQ (Premium Animation) */
.faq-item {
margin-bottom: var(--space-sm);
border-bottom: 1px solid var(--color-grid-line);
padding-bottom: var(--space-sm);
overflow: hidden;
list-style: none;
outline: none;
}
.faq-item summary {
font-weight: 600;
cursor: pointer;
padding: var(--space-xs) 0;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
user-select: none;
}
.faq-item summary::-webkit-details-marker {
display: none;
}
.faq-item summary::after {
content: '+';
font-family: monospace;
color: var(--color-accent);
font-size: 1.3rem;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-item.is-open summary::after {
transform: rotate(45deg);
}
/* Shared FAQ-Style Animation */
.expand-wrapper {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-item.is-open .expand-wrapper,
.data-list-item.is-open .expand-wrapper {
grid-template-rows: 1fr;
}
.expand-content-inner {
overflow: hidden;
}
.expand-content-inner p {
padding-bottom: var(--space-sm);
color: var(--color-text-secondary);
opacity: 0;
transform: translateY(-8px);
transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.data-list-item .expand-content-inner p {
padding-left: calc(1.2rem + var(--space-md));
padding-bottom: var(--space-md);
font-size: 1rem;
font-weight: 400;
line-height: 1.6;
}
.faq-item.is-open .expand-content-inner p,
.data-list-item.is-open .expand-content-inner p {
opacity: 1;
transform: translateY(0);
}
/* Sec 03: Problem Compare */
.problem-compare {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-md);
}
.compare-card {
border: 1px solid var(--color-text-primary);
padding: var(--space-md) var(--space-lg);
background: var(--color-bg);
transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.compare-card-left {
background: var(--color-bg-subtle);
}
.compare-card-right {
background: linear-gradient(180deg, #ffffff 0%, #fcfaf7 100%);
border-left: 4px solid var(--color-accent);
box-shadow: 0 10px 26px rgba(25, 22, 21, 0.08);
}
.compare-card:hover {
transform: translateY(-4px);
border-color: var(--color-accent);
}
.compare-card-left:hover {
box-shadow: 0 8px 20px rgba(25, 22, 21, 0.08);
}
.compare-card-right:hover {
box-shadow: 0 14px 28px rgba(25, 22, 21, 0.12);
}
.compare-title {
margin-bottom: var(--space-sm);
letter-spacing: 0.04em;
font-size: 1.9rem;
}
.compare-card-left .compare-title {
color: var(--color-text-secondary);
}
.compare-card-right .compare-title {
color: var(--color-text-primary);
}
.compare-item {
border-top: 1px solid rgba(25, 22, 21, 0.25);
padding-top: var(--space-sm);
margin-top: var(--space-sm);
}
.compare-item h5 {
font-size: 1.65rem;
line-height: 1.2;
margin-bottom: var(--space-xs);
}
.compare-item p {
font-size: 1rem;
line-height: 1.55;
margin-bottom: 0;
max-width: 60ch;
}
@media (max-width: 768px) {
.problem-compare {
grid-template-columns: 1fr;
gap: var(--space-sm);
}
.compare-card {
padding: var(--space-sm) var(--space-md);
}
.compare-card-right {
border-left: 1px solid var(--color-text-primary);
border-top: 4px solid var(--color-accent);
box-shadow: none;
}
.compare-card:hover {
transform: none;
}
.compare-title {
font-size: 1.3rem;
}
.compare-item h5 {
font-size: 1.35rem;
}
#problem .btn {
width: 100%;
text-align: center;
}
}
/* 15. Kundenreise (Journey Chart) */
@media (max-width: 768px) {
.journey-line-svg text {
display: none;
}
.x-axis-content span {
font-size: 0.72rem;
letter-spacing: 0.04em;
}
.phase-label {
display: none;
}
}
/* Sec 04: Bento Grid (Why Us) */
.bento-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
gap: var(--space-md);
}
@media (max-width: 768px) {
.bento-grid {
grid-template-columns: 1fr;
}
}
.bento-item {
background-color: var(--color-text-primary);
color: white;
padding: var(--space-lg);
border-radius: 4px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 250px;
transition: transform 0.3s ease;
}
.bento-item:hover {
transform: scale(1.02);
}
.bento-icon {
font-size: 2rem;
color: var(--color-accent);
margin-bottom: var(--space-md);
}
.bento-title {
font-size: var(--font-size-lg);
font-weight: 700;
margin-bottom: var(--space-xs);
}
.bento-text {
font-size: 0.95rem;
opacity: 0.9;
line-height: 1.4;
}
/* Sec 05: Role Grid (Unsere Rolle) */
.role-enclosure {
grid-column: 1 / -1;
margin-top: var(--space-lg);
border: 1px solid var(--color-accent);
padding: var(--space-lg);
position: relative;
background: rgba(230, 157, 61, 0.02);
/* Very subtle accent tint */
}
.enclosure-label {
position: absolute;
top: -12px;
left: var(--space-lg);
background: white;
padding: 0 10px;
font-size: 0.7rem;
font-weight: 700;
color: var(--color-accent);
letter-spacing: 0.1em;
}
@media (max-width: 768px) {
.role-enclosure {
margin-top: 0;
padding: var(--space-md);
}
.enclosure-label {
left: var(--space-sm);
font-size: 0.65rem;
}
}
.role-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-md);
}
@media (max-width: 900px) {
.role-grid {
grid-template-columns: 1fr;
}
}
.role-card {
border: 1px solid var(--color-grid-line);
padding: var(--space-lg);
display: flex;
flex-direction: column;
transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
background: white;
}
.role-card:hover {
border-color: var(--color-accent);
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
.role-header {
margin-bottom: var(--space-md);
position: relative;
}
.role-num {
font-size: 3rem;
font-weight: 700;
color: var(--color-accent);
opacity: 0.2;
line-height: 1;
display: block;
}
.role-card h3 {
font-size: 0.8rem;
letter-spacing: 0.1em;
font-weight: 700;
color: var(--color-accent);
margin-top: -1.5rem;
/* Overlap with number */
position: relative;
z-index: 2;
}
.role-card h4 {
font-size: 1.5rem;
margin-bottom: var(--space-sm);
line-height: 1.2;
}
.role-card p {
font-size: 1rem;
color: var(--color-text-secondary);
margin-bottom: 0;
}
/* Sec 06: Vertical Timeline (Wie wir arbeiten) */
#prozess .services-list {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.process-step-premium {
padding-left: var(--space-lg);
border-left: 2px solid #eee;
transition: border-color 0.3s ease;
margin-bottom: var(--space-lg);
}
.process-step-premium:hover {
border-left-color: var(--color-accent);
}
.process-step-premium .mono {
font-size: 0.7rem;
font-weight: 700;
color: var(--color-accent);
display: block;
margin-bottom: var(--space-xs);
}
.process-step-premium h4 {
font-size: 1.25rem;
margin-bottom: var(--space-xs);
}
.process-step-premium p {
font-size: 0.95rem;
opacity: 0.8;
margin-bottom: 0;
}
/* Header and Component Responsiveness already handled in specific sections above */
/* 5. Components */
/* Video Wrapper */
.video-wrapper {
margin-top: var(--space-lg);
border: 1px solid var(--color-text-primary);
width: 100%;
max-width: 800px;
align-self: start;
}
.hero-video {
margin-top: var(--space-xl);
}
@media (max-width: 768px) {
.video-wrapper {
margin-top: var(--space-md);
}
.hero-video {
margin-top: var(--space-md);
}
}
/* Checklist */
.checklist li {
margin-bottom: var(--space-sm);
display: flex;
align-items: flex-start;
}
.checklist li span {
color: var(--color-accent);
margin-right: var(--space-sm);
font-weight: 700;
}
/* Sec 09: FAQ (Premium Animation) */
.faq-item {
margin-bottom: var(--space-sm);
border-bottom: 1px solid var(--color-grid-line);
padding-bottom: var(--space-sm);
overflow: hidden;
/* Added to contain animation */
}
.faq-item summary {
font-weight: 600;
cursor: pointer;
padding: var(--space-xs) 0;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
user-select: none;
}
.faq-item summary::-webkit-details-marker {
display: none;
}
.faq-item summary::after {
content: '+';
font-family: monospace;
color: var(--color-accent);
font-size: 1.3rem;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-item[open] summary::after {
transform: rotate(45deg);
}
.faq-content {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-item.is-open .faq-content {
grid-template-rows: 1fr;
}
.faq-content-inner {
overflow: hidden;
}
.faq-content p {
margin-top: var(--space-sm);
padding-bottom: var(--space-sm);
color: var(--color-text-secondary);
opacity: 0;
transform: translateY(-8px);
transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (max-width: 768px) {
.faq-item summary {
font-size: 1rem;
}
}
.faq-item.is-open .faq-content p {
opacity: 1;
transform: translateY(0);
}
/* Header */
.header {
padding: var(--space-md) 0;
border-bottom: 2px solid var(--color-text-primary);
position: sticky;
top: 0;
background-color: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(5px);
z-index: 100;
}
.nav-grid {
align-items: center;
}
/* Mobile toggle is hidden by default and only shown on small screens */
.mobile-menu-toggle {
display: none;
}
/* 4. Buttons & Interactions */
.btn {
display: inline-block;
padding: var(--space-sm) var(--space-lg);
background-color: var(--color-accent);
color: var(--color-bg);
text-decoration: none;
font-weight: 600;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
border: none;
cursor: pointer;
}
.btn:hover {
background-color: var(--color-accent-dark);
/* Darker shade of accent */
transform: translateY(-2px);
}
.btn-secondary {
background-color: transparent;
border: 2px solid var(--color-text-primary);
color: var(--color-text-primary);
}
.btn-secondary:hover {
background-color: var(--color-text-primary);
color: var(--color-bg);
}
.btn-group {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
}
/* Service & Benefit Cards Hover */
.service-item {
border-top: 2px solid var(--color-text-primary);
padding-top: var(--space-sm);
transition: transform 0.2s ease, border-color 0.2s ease;
}
.service-item:hover {
border-color: var(--color-accent);
transform: translateY(-4px);
}
/* Specific Footer Link Hover for better contrast */
.footer a:hover {
color: var(--color-accent);
background-color: transparent;
/* Remove background on hover for text links */
border-bottom-color: var(--color-accent);
}
/* Scroll Reveal */
.reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
}
.reveal.active {
opacity: 1;
transform: translateY(0);
}
/* Immediately show all content for users who prefer reduced motion or have JS disabled */
@media (prefers-reduced-motion: reduce) {
.reveal {
opacity: 1;
transform: none;
transition: none;
}
}
/* Logo */
.logo {
display: inline-flex;
/* Better formatting */
align-items: center;
border-bottom: none;
padding: 8px;
/* Add padding for the hover box */
border-radius: 4px;
transition: background-color 0.3s ease;
text-decoration: none;
/* Ensure no underline */
background: transparent;
border: none;
box-shadow: none;
gap: 10px;
}
.logo img,
.logo-img {
height: 32px;
width: auto;
display: block;
transition: filter 0.3s ease;
}
/* Header nav uses slightly larger logo */
.header .logo-img {
height: 48px;
}
.logo-text {
font-weight: 700;
font-size: 1.25rem;
margin-left: 10px;
letter-spacing: -0.03em;
color: var(--color-text-primary);
transition: color 0.3s ease;
border: none;
text-decoration: none;
}
.logo-divider {
display: none;
width: 92px;
height: 4px;
background: #d8d8d8;
border-radius: 2px;
opacity: 0.6;
margin-left: 10px;
}
/* Logo Hover Effect: Black Background, White Logo & Text */
.logo:hover {
background-color: var(--color-text-primary);
transform: translateY(-1px);
}
.logo:hover img {
filter: brightness(0) invert(1);
}
.logo:hover .logo-text {
color: var(--color-white);
}
.logo:hover .dot {
color: var(--color-accent);
}
.logo::before,
.logo::after,
.logo-text::before,
.logo-text::after {
content: none !important;
display: none !important;
}
.logo,
.logo * {
border: none !important;
box-shadow: none !important;
text-decoration: none !important;
background-image: none !important;
}
@media (max-width: 768px) {
.logo-divider {
display: none;
}
}
/* Nav Links */
.nav-links {
grid-column: 5 / -1;
display: flex;
justify-content: flex-end;
align-items: center;
/* Vertically align items */
gap: var(--space-md);
list-style: none;
}
/* Footer Link Hover - Simple & Clean */
.footer a {
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
padding-bottom: 2px;
transition: color 0.2s ease, border-bottom-color 0.2s ease;
color: rgba(255, 255, 255, 0.8);
/* Highly visible light grey default */
}
.footer a:hover {
color: var(--color-white) !important;
/* Force White */
border-bottom-color: var(--color-accent) !important;
/* Accent Underline */
opacity: 1;
}
.nav-item a {
font-size: var(--font-size-sm);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 500;
border-bottom: none;
padding: 8px 12px;
border-radius: 4px;
white-space: nowrap;
}
.nav-item a:hover {
background-color: var(--color-bg-subtle);
/* Light grey background for nav items */
color: var(--color-text-primary);
}
/* Exception for Button in Nav */
.nav-item .btn {
color: white !important;
background-color: var(--color-accent) !important;
}
.nav-item .btn:hover {
background-color: var(--color-accent-dark) !important;
color: white !important;
transform: translateY(-2px);
}
/* Hero Section */
.hero {
padding: var(--space-2xl) 0;
}
.hero-content {
grid-column: 1 / 8;
}
.hero-subtitle {
font-family: 'Inter Tight', var(--font-family-sans);
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
margin-bottom: var(--space-sm);
display: block;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* Services Section */
.services-title {
grid-column: 1 / 4;
}
#loesung .services-title {
grid-column: 1 / 6;
max-width: 760px;
}
.services-list {
grid-column: 5 / -1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-lg);
}
.service-item {
border-top: 1px solid var(--color-text-primary);
padding-top: var(--space-sm);
}
.service-number {
font-family: monospace;
color: var(--color-accent);
margin-bottom: var(--space-xs);
display: block;
}
/* Decision-Trigger: dunkles Band als Zaesur vor dem Angebot.
Die Flaeche selbst grenzt ab, deshalb braucht der Abschnitt keine
Trennlinie (bg-dark setzt border-top: none) und der Weissraum darin
liest sich als Absicht statt als Loch. Kompakter als eine normale
Sektion, weil nur zwei Elemente drinstehen. */
#entscheidung {
/* Kompakter als eine volle Sektion, weil nur zwei Elemente drinstehen.
Der Ankersprung zieht --section-padding automatisch nach. */
--section-padding: clamp(var(--space-lg), 8vw, var(--space-xl));
}
.decision-content {
grid-column: 1 / 10;
}
/* Eine Stufe ueber der normalen H2: das ist der Kipppunkt der Seite,
nicht die naechste Kapitelueberschrift. Der Farbwechsel traegt die
Abgrenzung, die Groesse die Betonung. */
#entscheidung h2 {
font-size: clamp(2.1rem, 5vw, var(--font-size-4xl));
line-height: 1.15;
margin-bottom: 0;
text-wrap: balance;
}
/* Akzent auf dem Produktnamen, nicht als Dekoration. Gleichzeitig der
Sprung ins Angebot: der Satz nennt den naechsten Schritt, das Wort
fuehrt hin. ID noetig, weil .bg-dark a sonst auf Weiss zwingt.
Unterstreichung erst gedeckt, beim Hover voll: Linkangebot ohne die
Headline zu zerschneiden. */
#entscheidung .decision-accent {
color: var(--color-accent);
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 0.12em;
text-decoration-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
transition: text-decoration-color 0.2s ease;
}
#entscheidung .decision-accent:hover,
#entscheidung .decision-accent:focus-visible {
text-decoration-color: var(--color-accent);
}
@media (max-width: 1180px) {
.decision-content {
grid-column: 1 / -1;
}
}
/* Selbstcheck-Teaser: der einzige Weg auf der Seite, der ohne Kontakt und
ohne Geld einen Wert liefert. Steht deshalb direkt nach der Ausgangslage,
wo die Frage "wo stehe ich?" zum ersten Mal brennt. Die fuenf
Themenbloecke rechts zeigen den Umfang, ohne dass man klicken muss. */
.teaser-text {
grid-column: 1 / 7;
}
/* Etwas kleiner als eine normale H2, damit die laengere Frage in der
6-Spalten-Breite auf eine Zeile passt: Zitat oben, Frage darunter,
beide je eine Zeile. text-wrap:balance faengt Zwischenbreiten ab. */
.teaser-text h2 {
font-size: clamp(1.6rem, 2.4vw, 2.1rem);
text-wrap: balance;
}
/* Der Irrtum in Orange, die Richtigstellung in Schwarz. Der Farbwechsel
ist der Blickfang, nicht die Schriftgroesse. */
.teaser-quote {
color: var(--color-accent);
}
.teaser-visual {
grid-column: 8 / -1;
align-self: center;
justify-self: center;
margin: 0;
width: 100%;
max-width: 340px;
}
.teaser-visual svg {
display: block;
width: 100%;
height: auto;
}
.teaser-visual figcaption {
margin-top: var(--space-md);
padding-top: var(--space-xs);
border-top: 1px solid var(--color-text-primary);
font-size: var(--font-size-sm);
letter-spacing: 0.06em;
text-transform: uppercase;
}
@media (max-width: 1180px) {
.teaser-text,
.teaser-visual {
grid-column: 1 / -1;
}
.teaser-visual {
justify-self: start;
max-width: 200px;
margin-top: var(--space-lg);
}
}
/* Zweiter, leiserer Weg im dunklen Band: fuer alle, die noch nicht kaufen
wollen. Bewusst klein, damit er die Aussage darueber nicht schwaecht. */
.decision-alt {
margin-top: var(--space-md);
font-size: var(--font-size-base);
}
#entscheidung .decision-alt a {
color: var(--color-accent);
text-decoration: underline;
text-underline-offset: 0.18em;
text-decoration-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
transition: text-decoration-color 0.2s ease;
}
#entscheidung .decision-alt a:hover,
#entscheidung .decision-alt a:focus-visible {
text-decoration-color: var(--color-accent);
}
/* Klare Lage, klare Prioritaeten, klare Berichte: die drei stehen immer
nebeneinander auf einer Linie, in derselben Reihenfolge wie in der H2.
Volle Containerbreite statt Raster-Spalte 5, damit die Karten Platz
haben und nicht umbrechen. */
.mehrwert-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-lg);
margin-top: var(--space-lg);
align-items: start;
}
/* Die drei Aussagen stehen je auf einer eigenen Zeile (harte Umbrueche im
Markup). Der Titel braucht dafuer mehr Breite als die Standard-3-Spalten,
sonst bricht "Klare Prioritaeten." selbst noch um. */
.mehrwert-title {
grid-column: 1 / 8;
}
/* Einstieg Deliverables aligned with "Fuer Wen" style */
.deliverables-list {
margin-top: 2px;
}
#angebot .deliverables-list .data-list-item {
border-bottom-width: 1px;
}
#angebot .deliverables-list summary {
font-size: 1.2rem;
font-weight: 600;
padding: var(--space-xs) 0;
line-height: 1.32;
}
#angebot .deliverables-list .expand-content-inner p {
padding-left: calc(1.2rem + var(--space-sm));
padding-bottom: var(--space-xs);
font-size: 0.95rem;
line-height: 1.5;
}
/* Musterbericht – Beispiel-Download im Angebot */
/* Ganzer Textblock oeffnet das PDF (Click-Handler in index.html) */
.musterbericht-content { cursor: pointer; }
.musterbericht {
margin-top: var(--space-xl);
padding-top: var(--space-lg);
border-top: 1px solid var(--color-grid-line);
display: grid;
grid-template-columns: 5fr 7fr;
gap: var(--space-lg);
align-items: center;
}
.musterbericht-cover {
display: block;
line-height: 0;
background-color: var(--color-bg);
border: 1px solid var(--color-grid-line);
transition: transform 0.3s ease, box-shadow 0.3s ease;
will-change: transform;
}
.musterbericht-cover img {
width: 100%;
height: auto;
display: block;
}
.musterbericht-cover:hover,
.musterbericht-cover:focus-visible {
transform: translateY(-4px);
box-shadow: 0 16px 40px rgba(25, 22, 21, 0.12);
outline: none;
}
.musterbericht-content h3 {
font-size: var(--font-size-2xl);
letter-spacing: -0.02em;
line-height: 1.15;
}
@media (max-width: 768px) {
.musterbericht {
grid-template-columns: 1fr;
gap: var(--space-md);
margin-top: var(--space-lg);
padding-top: var(--space-md);
}
.musterbericht-cover {
max-width: 320px;
}
.musterbericht-content h3 {
font-size: var(--font-size-xl);
}
}
/* Nach dem Einstieg: static list */
.post-entry-list {
list-style: none;
border-top: 1px solid var(--color-text-primary);
}
.post-entry-list li {
border-bottom: 1px solid rgba(25, 22, 21, 0.22);
padding: var(--space-sm) 0;
}
.post-entry-list li strong {
display: block;
font-size: 1.18rem;
line-height: 1.3;
margin-bottom: var(--space-xs);
font-weight: 600;
}
.post-entry-list li p {
margin-bottom: 0;
font-size: 0.98rem;
line-height: 1.55;
color: var(--color-text-secondary);
max-width: 66ch;
}
/* Contact Section Visual */
#kontakt .contact-visual {
border-radius: 4px;
overflow: hidden;
min-height: 460px;
max-height: 560px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
#kontakt .contact-image {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center top;
}
/* Team Section */
#ansprechpartner .team-header {
margin-bottom: var(--space-lg);
align-items: end;
}
#ansprechpartner .team-intro {
max-width: 56ch;
margin-bottom: 0;
}
#ansprechpartner .team-grid {
list-style: none;
margin: 0 0 var(--space-lg);
padding: 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-sm);
}
#ansprechpartner .team-grid > li {
margin: 0;
padding: 0;
list-style: none;
}
#ansprechpartner .team-grid > li::before {
content: none;
}
.team-card {
display: flex;
flex-direction: column;
height: 100%;
transition: transform 0.3s var(--ease-out-expo);
}
.team-card:hover {
transform: translateY(-4px);
}
.team-portrait {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
background: #efefef;
}
.team-image {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center 20%;
}
.team-portrait--initials {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #ececec, #f8f8f8);
}
.team-initials {
font-family: 'Inter', sans-serif;
font-size: clamp(2.8rem, 5vw, 4rem);
font-weight: 300;
letter-spacing: -0.02em;
color: var(--color-text-secondary);
line-height: 1;
}
.team-info {
display: flex;
flex-direction: column;
flex-grow: 1;
padding: var(--space-sm) 0 0;
gap: var(--space-xs);
border-top: 2px solid var(--color-text-primary);
transition: border-color 0.2s ease;
}
.team-card:hover .team-info {
border-top-color: var(--color-accent);
}
.team-name {
font-size: var(--font-size-md);
font-weight: 600;
letter-spacing: -0.01em;
margin: 0;
line-height: 1.2;
}
.team-role {
font-size: 0.8rem;
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 0.04em;
margin: 0;
}
.team-bio {
font-size: 0.95rem;
line-height: 1.5;
color: var(--color-text-primary);
margin: var(--space-xs) 0 0;
}
.team-linkedin {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: auto;
padding-top: var(--space-sm);
font-size: 0.85rem;
color: var(--color-text-secondary);
text-decoration: none;
border: none;
background: none;
transition: color 0.2s var(--ease-out-expo);
align-self: flex-start;
}
.team-linkedin svg {
transition: transform 0.3s var(--ease-out-expo);
}
.team-linkedin:hover,
.team-linkedin:focus-visible {
color: var(--color-accent);
background: none;
}
.team-card:hover .team-linkedin svg,
.team-linkedin:hover svg {
transform: translateX(2px);
}
/* Stagger reveal — uses parent .reveal.active toggle */
#ansprechpartner.reveal .team-grid > li {
opacity: 0;
transform: translateY(20px);
}
#ansprechpartner.reveal.active .team-grid > li {
animation: team-card-reveal 0.7s var(--ease-out-expo) forwards;
}
#ansprechpartner.reveal.active .team-grid > li:nth-child(1) { animation-delay: 0ms; }
#ansprechpartner.reveal.active .team-grid > li:nth-child(2) { animation-delay: 100ms; }
#ansprechpartner.reveal.active .team-grid > li:nth-child(3) { animation-delay: 200ms; }
#ansprechpartner.reveal.active .team-grid > li:nth-child(4) { animation-delay: 300ms; }
@keyframes team-card-reveal {
to {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
#ansprechpartner.reveal .team-grid > li,
#ansprechpartner.reveal.active .team-grid > li {
opacity: 1;
transform: none;
animation: none;
}
.team-card,
.team-info,
.team-linkedin svg {
transition: none;
}
.team-card:hover {
transform: none;
}
}
/* Team CTA below grid */
.team-cta {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--space-md);
align-items: center;
padding: var(--space-md);
background: var(--color-bg);
border: 1px solid var(--color-grid-line);
border-radius: 4px;
}
.team-cta h3 {
font-size: clamp(1.2rem, 2vw, 1.5rem);
margin: 0 0 var(--space-xs);
}
.team-cta p {
margin: 0;
max-width: 60ch;
color: var(--color-text-secondary);
}
.team-cta .btn {
white-space: nowrap;
}
/* CMS Blog Section */
.blog-cms-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-sm);
}
#insights .blog-cms-grid {
grid-template-columns: 1fr;
gap: var(--space-md);
}
.blog-cms-card {
background: #ffffff;
border: 1px solid rgba(25, 22, 21, 0.18);
border-top: 2px solid var(--color-text-primary);
padding: var(--space-md);
transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.blog-cms-card:hover {
transform: translateY(-3px);
border-top-color: var(--color-accent);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
}
.blog-cms-meta {
display: block;
font-size: 0.75rem;
color: var(--color-accent);
letter-spacing: 0.04em;
margin-bottom: var(--space-xs);
}
.blog-cms-card h3 {
font-size: 1.45rem;
line-height: 1.25;
margin-bottom: var(--space-xs);
}
.blog-cms-card p {
margin-bottom: var(--space-sm);
max-width: 100%;
color: var(--color-text-secondary);
font-size: 0.95rem;
}
.blog-cms-link {
border-bottom: 1px solid var(--color-text-primary);
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
padding-bottom: 2px;
background: transparent;
color: var(--color-text-primary);
display: inline-block;
}
.blog-cms-link:hover {
border-bottom-color: var(--color-accent);
background: transparent !important;
color: var(--color-accent) !important;
transform: none;
}
/* Blog Detail Page */
.blog-page-shell {
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--space-md);
align-items: start;
margin-top: var(--space-md);
}
.blog-detail-card {
background: #ffffff;
border: 1px solid rgba(25, 22, 21, 0.15);
border-top: 3px solid var(--color-accent);
padding: var(--space-lg);
transition: opacity 0.16s ease, transform 0.16s ease;
}
.blog-detail-card.is-switching {
will-change: opacity, transform; /* applied only while animating */
opacity: 0.45;
transform: translateY(4px);
}
.blog-detail-title {
font-size: clamp(1.8rem, 3.6vw, 2.8rem);
line-height: 1.12;
margin-bottom: var(--space-sm);
}
.blog-detail-excerpt {
font-size: 1.16rem;
color: var(--color-text-secondary);
margin-bottom: var(--space-md);
max-width: 100%;
}
.blog-markdown h2,
.blog-markdown h3,
.blog-markdown h4 {
margin-top: var(--space-md);
margin-bottom: var(--space-xs);
}
.blog-markdown p {
max-width: 72ch;
margin-bottom: var(--space-sm);
line-height: 1.7;
}
.blog-markdown a {
color: var(--color-text-primary);
text-decoration: underline;
text-underline-offset: 2px;
border-bottom: none;
background: transparent;
}
.blog-markdown a:hover {
color: var(--color-accent) !important;
background: transparent !important;
}
.blog-markdown ul {
margin: 0 0 var(--space-sm) 1.2rem;
}
.blog-markdown li {
margin-bottom: 6px;
line-height: 1.6;
}
.blog-sidebar-card {
background: #ffffff;
border: 1px solid rgba(25, 22, 21, 0.15);
padding: var(--space-md);
position: sticky;
top: 120px;
}
.blog-sidebar-card h3 {
font-size: 1.2rem;
margin-bottom: var(--space-sm);
}
.blog-mini-list {
list-style: none;
padding: 0;
}
.blog-mini-list li {
border-top: 1px solid rgba(25, 22, 21, 0.2);
padding: 0;
}
.blog-mini-list a {
border-bottom: none;
display: block;
padding: 10px 12px;
transition: background-color 0.2s ease, color 0.2s ease;
}
.blog-mini-list a:hover {
background: rgba(230, 157, 61, 0.1);
color: var(--color-text-primary);
}
.blog-mini-list li.is-active a {
background: rgba(230, 157, 61, 0.12);
border-left: 3px solid var(--color-accent);
padding-left: 9px;
}
.blog-mini-list li.is-active strong {
color: var(--color-accent);
}
.blog-mini-list strong {
display: block;
font-size: 1rem;
line-height: 1.3;
}
.blog-mini-list span {
display: block;
margin-top: 4px;
color: var(--color-text-secondary);
font-size: 0.85rem;
}
/* Values Section */
.values-grid {
align-items: start;
}
.value-card {
grid-column: span 4;
background-color: var(--color-bg);
padding: var(--space-md);
border: 1px solid var(--color-grid-line);
}
.value-card h3 {
margin-top: var(--space-sm);
}
/* Footer */
.footer {
background-color: var(--color-text-primary);
color: var(--color-bg);
padding: var(--space-xl) 0;
border-top: 1px solid var(--color-border-dark);
}
/* Footer Link Conflict Removed: Using styles from lines 354+ */
/* Utilities */
.text-right {
text-align: right;
}
.uppercase {
text-transform: uppercase;
}
.mono {
font-family: monospace;
}
.d-block {
display: block;
}
/* 6. Responsive Design */
@media (max-width: 1024px) {
:root {
--font-size-5xl: 3.5rem;
--font-size-3xl: 2.5rem;
}
}
@media (max-width: 1180px) {
.section {
--section-padding: var(--space-lg);
}
.grid {
gap: var(--space-md);
}
h1,
h2,
h3,
h4 {
/* break-word statt anywhere/hyphens:auto – bricht nur im Notfall,
verhindert haessliche Trennungen wie "SAFEROU-TE" oder "Governan-ce" */
overflow-wrap: break-word;
hyphens: manual;
}
.nav-links {
gap: var(--space-sm);
}
.nav-item a {
font-size: 0.78rem;
padding: 6px 8px;
}
.nav-item .btn {
padding: 7px 12px !important;
font-size: 0.82rem !important;
}
.hero-content,
.header-text-content,
.journey-header-content,
.service-lead-content,
.services-title,
.services-list {
grid-column: 1 / -1 !important;
}
.hero-video {
grid-column: 1 / -1 !important;
margin-top: var(--space-sm);
max-width: 100%;
}
.role-grid {
grid-template-columns: 1fr;
}
#zielgruppe > div,
#zielgruppe .grid>div,
#angebot .grid>div,
#mehrwert-final .grid>div,
#faq .grid>div,
#weltweit .grid>div,
#impact .grid>div,
#ansprechpartner .team-header>div,
#insights .grid>div {
grid-column: 1 / -1 !important;
}
/* Team header collapses to single column at this breakpoint,
but team-grid stays 4-up until ~900px to keep portraits sensibly sized */
.problem-compare {
grid-template-columns: 1fr;
gap: var(--space-sm);
}
.pareto-container {
grid-template-columns: 1fr;
gap: var(--space-md);
padding: var(--space-md);
}
#zusammenarbeit .service-lead-content h2 {
font-size: clamp(1.9rem, 4.4vw, 2.7rem);
line-height: 1.12;
max-width: 100%;
}
.blog-page-shell {
grid-template-columns: 1fr;
gap: var(--space-sm);
}
.blog-sidebar-card {
position: static;
top: auto;
}
#zusammenarbeit .service-lead-content,
#zusammenarbeit .grid>div:last-child {
grid-column: 1 / -1 !important;
}
#zusammenarbeit .service-lead-content h2 {
font-size: clamp(2rem, 4.6vw, 2.8rem);
line-height: 1.12;
}
#zusammenarbeit .service-lead-content {
margin-bottom: var(--space-sm);
}
#ansprechpartner .team-header {
margin-bottom: var(--space-md);
}
}
@media (max-width: 900px) {
/* Team grid: 4 → 2 columns when cards would otherwise grow oversized */
#ansprechpartner .team-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: 640px;
margin-left: auto;
margin-right: auto;
}
}
@media (max-width: 1024px) {
/* Prevent fixed off-screen nav panel from creating horizontal scroll.
body braucht die Regel zusaetzlich, weil iOS Safari sie auf html
allein nicht zuverlaessig anwendet.
WICHTIG: 'clip' statt 'hidden' - 'hidden' wuerde overflow-y zu 'auto'
zwingen, html/body zum Scroll-Container machen und den sticky Header
auf Mobile brechen. 'clip' verhindert H-Scroll ohne Scroll-Container.
'hidden' bleibt als Fallback fuer Browser ohne clip-Support (iOS <16). */
html,
body {
overflow-x: hidden;
overflow-x: clip;
}
.header {
padding: var(--space-xs) 0;
}
.nav-grid {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo img {
height: 32px !important;
}
.logo-text {
font-size: 1.1rem;
}
.mobile-menu-toggle {
display: flex;
flex-direction: column;
justify-content: space-between;
/* 44x44 Touch-Target; padding haelt die sichtbaren Balken bei 30x20 */
width: 44px;
height: 44px;
background: none;
border: none;
cursor: pointer;
z-index: 1001;
padding: 12px 7px;
}
.mobile-menu-toggle span {
display: block;
width: 100%;
height: 2px;
background-color: var(--color-text-primary);
transition: transform 0.3s ease, background-color 0.3s ease;
}
.nav-links {
position: fixed;
top: 0;
right: -100%;
width: 80%;
height: 100vh;
height: 100dvh; /* iOS: dynamische Browserleiste beruecksichtigen */
background-color: var(--color-bg);
flex-direction: column;
padding: var(--space-xl) var(--space-md);
box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1),
visibility 0s linear 0.4s;
z-index: 1000;
display: flex !important;
justify-content: flex-start;
align-items: flex-start;
/* Geschlossen: unsichtbar und nicht fokussierbar (Tab-Reihenfolge) */
visibility: hidden;
overflow-y: auto;
}
.nav-links.is-open {
right: 0;
visibility: visible;
transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
/* Abdunkelnder Backdrop ohne Extra-Element */
box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1),
0 0 0 100vmax rgba(25, 22, 21, 0.4);
}
/* Drawer-Links: lesbare Groesse + volle Touch-Flaeche */
.nav-links .nav-item a {
font-size: 1.05rem;
display: block;
padding: 12px 16px;
margin-left: -16px; /* Textkante buendig mit Drawer-Padding */
}
.nav-links .nav-item .btn {
font-size: 1rem;
padding: 14px 24px;
margin: 0;
}
.nav-links li {
margin-bottom: var(--space-md);
opacity: 0;
transform: translateX(20px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.nav-links.is-open li {
opacity: 1;
transform: translateX(0);
}
.mobile-menu-toggle.is-active span:nth-child(1) {
transform: translateY(9px) rotate(45deg);
}
.mobile-menu-toggle.is-active span:nth-child(2) {
opacity: 0;
}
.mobile-menu-toggle.is-active span:nth-child(3) {
transform: translateY(-9px) rotate(-45deg);
}
}
@media (max-width: 768px) {
:root {
--grid-columns: 4;
--space-lg: calc(5 * var(--space-unit));
--space-xl: calc(8 * var(--space-unit));
--space-2xl: calc(10 * var(--space-unit));
--font-size-5xl: 2.5rem;
}
.grid {
grid-template-columns: repeat(var(--grid-columns), 1fr);
gap: var(--space-md);
}
.section {
--section-padding: var(--space-md);
}
/* Sections Mobile */
.hero-content {
grid-column: 1 / -1;
}
.services-title {
grid-column: 1 / -1;
margin-bottom: var(--space-md);
}
.services-list {
grid-column: 1 / -1;
grid-template-columns: 1fr;
}
.values-grid {
grid-template-columns: 1fr;
}
.value-card {
grid-column: span 4;
margin-bottom: var(--space-sm);
}
/* Footer Mobile */
.footer .grid>div {
grid-column: 1 / -1 !important;
margin-bottom: var(--space-md);
}
/* Comparison Section Mobile */
#mehrwert .grid>div {
grid-column: 1 / -1 !important;
padding-left: 0 !important;
border-left: none !important;
margin-bottom: var(--space-md);
}
/* Pricing Section Mobile */
#angebot .grid>div {
grid-column: 1 / -1 !important;
margin-bottom: var(--space-md);
}
#angebot .deliverables-list summary {
font-size: 1rem;
}
#angebot .deliverables-list .expand-content-inner p {
padding-left: calc(1rem + var(--space-sm));
font-size: 0.95rem;
}
.post-entry-list li strong {
font-size: 1.05rem;
}
.post-entry-list li p {
font-size: 0.95rem;
}
/* Fuer Wen Mobile */
#zielgruppe > div,
#zielgruppe .grid>div {
grid-column: 1 / -1 !important;
}
#zielgruppe .header-text-content h2 {
font-size: clamp(2rem, 10vw, 2.8rem);
line-height: 1.12;
max-width: 100%;
}
#zielgruppe .header-text-content p {
max-width: 100%;
}
#zielgruppe .data-list summary {
font-size: 1.1rem;
line-height: 1.35;
}
/* Hide journey only on mobile (keep desktop) */
#kundenreise {
display: none !important;
}
/* Prozess (Ihr Weg) Mobile */
#prozess .services-title {
margin-bottom: var(--space-sm);
}
#prozess .services-list {
grid-column: 1 / -1 !important;
gap: var(--space-sm);
}
#prozess .services-title .btn {
width: 100%;
text-align: center;
}
.process-step-premium {
padding-left: var(--space-md);
margin-bottom: var(--space-md);
border-left-width: 3px;
}
.process-step-premium h4 {
font-size: 1.125rem;
line-height: 1.3;
}
.process-step-premium p {
font-size: 0.95rem;
line-height: 1.55;
}
/* Nach dem Einstieg Mobile */
#zusammenarbeit .grid>div {
grid-column: 1 / -1 !important;
}
#zusammenarbeit .service-lead-content {
margin-bottom: var(--space-sm);
}
#zusammenarbeit .service-lead-content div[style*="font-size: var(--font-size-2xl)"] {
font-size: 2rem !important;
}
#zusammenarbeit ul li {
margin-bottom: var(--space-sm) !important;
padding-bottom: var(--space-sm) !important;
line-height: 1.5;
}
/* Ihr Mehrwert Mobile */
#mehrwert-final .services-title {
margin-bottom: 0;
/* Grid-Row-Gap (32px) trennt bereits zur Karten-Liste */
}
#mehrwert-final .services-title .btn {
width: 100%;
text-align: center;
}
/* Erst hier stapeln: drei Spalten sind unter 768px nicht mehr lesbar. */
.mehrwert-cards {
grid-template-columns: 1fr;
gap: var(--space-sm);
}
#mehrwert-final .service-item {
padding-top: var(--space-xs);
}
#mehrwert-final .service-item h3 {
font-size: 1.4rem;
line-height: 1.2;
}
/* Globale Dimension Mobile */
#weltweit .grid>div {
grid-column: 1 / -1 !important;
}
#weltweit h2 {
font-size: clamp(1.8rem, 9vw, 2.5rem) !important;
line-height: 1.15;
}
#weltweit p {
max-width: 100%;
}
/* Kontext Schweiz Mobile */
#impact .grid>div {
grid-column: 1 / -1 !important;
}
#impact div[style*="background: rgba(255,255,255,0.05)"] {
padding: var(--space-md) !important;
margin-bottom: var(--space-sm);
}
#impact strong {
font-size: clamp(2rem, 12vw, 2.8rem) !important;
line-height: 1.05 !important;
}
#impact .grid[style*="opacity: 0.6"] .mono {
font-size: 0.72rem !important;
line-height: 1.6;
word-break: break-word;
}
#impact .btn {
width: 100%;
text-align: center;
}
/* Contact Section Mobile */
#kontakt .grid>div {
grid-column: 1 / -1 !important;
margin-bottom: var(--space-md);
}
#kontakt .contact-visual {
min-height: 0;
max-height: none;
}
#kontakt .contact-image {
height: auto;
object-fit: contain;
}
/* Team Section Mobile — keep 2 columns, tighter gap & info padding */
#ansprechpartner .team-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-xs);
}
.team-portrait {
aspect-ratio: 1 / 1;
}
.team-image {
object-position: center 15%;
}
.team-info {
padding-top: var(--space-xs);
gap: 4px;
}
.team-name {
font-size: 1rem;
}
.team-role {
font-size: 0.7rem;
}
.team-linkedin {
padding-top: var(--space-xs);
font-size: 0.78rem;
}
.team-cta {
grid-template-columns: 1fr;
gap: var(--space-sm);
padding: var(--space-sm);
}
.team-cta .btn {
width: 100%;
text-align: center;
}
#insights .grid>div {
grid-column: 1 / -1 !important;
}
.blog-cms-grid {
grid-template-columns: 1fr;
}
.blog-cms-card h3 {
font-size: 1.1rem;
}
.blog-page-shell {
grid-template-columns: 1fr;
gap: var(--space-sm);
}
.blog-detail-card {
padding: var(--space-md);
}
.blog-sidebar-card {
position: static;
top: auto;
}
.video-wrapper {
grid-column: 1 / -1 !important;
margin-top: var(--space-md);
}
}
/* Sec 04: Pareto Diagram (Strategic Leverage Schematic) */
.pareto-container {
grid-column: 1 / -1;
margin-top: var(--space-lg);
background: #ffffff;
border: 1px solid var(--color-grid-line);
padding: var(--space-xl);
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: var(--space-xl);
align-items: center;
}
.leverage-visual {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-lg) 0;
gap: var(--space-md);
}
.leverage-column {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 140px;
}
.leverage-box-input {
width: 40px;
height: 40px;
background: var(--color-accent);
border: 2px solid var(--color-text-primary);
box-shadow: 4px 4px 0 rgba(230, 157, 61, 0.2);
margin-bottom: var(--space-sm);
}
.leverage-box-output {
width: 100px;
height: 100px;
background: #f8f8f8;
border: 2px solid var(--color-text-primary);
box-shadow: 8px 8px 0 var(--color-accent);
margin-bottom: var(--space-sm);
display: flex;
align-items: center;
justify-content: center;
}
.leverage-box-output strong {
font-size: 2.2rem;
color: var(--color-text-primary);
}
.leverage-arrow {
flex: 1;
height: 2px;
background: var(--color-grid-line);
position: relative;
}
.leverage-arrow::after {
content: '';
position: absolute;
right: -2px;
top: 50%;
transform: translateY(-50%);
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 8px solid var(--color-grid-line);
}
.leverage-label-main {
font-size: 0.8rem;
font-weight: 700;
color: var(--color-text-primary);
}
.leverage-label-sub {
font-size: 0.65rem;
opacity: 0.6;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-top: 4px;
}
.pareto-text-content p {
font-size: 1.15rem;
line-height: 1.6;
}
@media (max-width: 900px) {
.pareto-container {
grid-template-columns: 1fr;
}
.leverage-visual {
flex-direction: column;
gap: var(--space-xl);
}
.leverage-arrow {
width: 2px;
height: 40px;
background: #ddd;
}
.leverage-arrow::after {
right: 50%;
bottom: -2px;
top: auto;
transform: translateX(50%);
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 8px solid #ddd;
}
}
/* --- BRAND TYPOGRAPHY --- */
.brand {
font-weight: 700;
letter-spacing: -0.02em;
text-transform: uppercase;
}
.dot {
color: var(--color-accent);
}
/* --- Sec 2b: Fischer-Metapher (Harpune vs. Netz) --- */
.metapher-grid {
margin-top: var(--space-lg);
align-items: center;
}
.metapher-visual {
grid-column: 1 / 7;
margin: 0;
}
.metapher-visual img {
display: block;
width: 100%;
height: auto;
}
.metapher-text {
grid-column: 8 / -1;
}
.metapher-text p+p {
margin-top: var(--space-sm);
}
@media (max-width: 900px) {
.metapher-visual,
.metapher-text {
grid-column: 1 / -1;
}
.metapher-text {
margin-top: var(--space-md);
}
}
/* --- PHASE 33: ECONOMY VISUAL --- */
/* --- PHASE 33: ECONOMY VISUAL (REFINED FLAG STYLE) --- */
.economy-visual {
background-color: var(--color-text-primary);
color: var(--color-bg);
overflow: hidden;
padding-bottom: var(--space-3xl);
}
.economy-chart {
position: relative;
padding: var(--space-3xl) 0 60px;
/* Space for the bottom border and some breathing room */
min-height: 600px;
margin-top: var(--space-xl);
}
/* Y-Axis Markers (Coordinate System) */
.economy-y-axis {
position: absolute;
left: 0;
right: 0;
top: var(--space-3xl);
/* Match chart padding */
height: 500px;
/* Fixed height for the coordinate system */
display: flex;
flex-direction: column-reverse;
justify-content: space-between;
pointer-events: none;
z-index: 1;
}
.economy-chart-area {
position: absolute;
left: 0;
right: 0;
top: var(--space-3xl);
/* Match chart top padding */
height: 500px;
/* Increased height for better vertical resolution */
display: flex;
align-items: flex-end;
justify-content: space-around;
padding: 0 40px;
border-bottom: 2px solid rgba(255, 255, 255, 0.3);
z-index: 2;
}
.y-marker {
width: 100%;
border-top: 1px dashed rgba(255, 255, 255, 0.1);
position: relative;
}
.y-marker::after {
content: attr(data-value);
position: absolute;
right: 0;
top: -10px;
font-size: 0.7rem;
font-family: var(--font-mono);
color: rgba(255, 255, 255, 0.4);
}
.economy-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
height: 100%;
/* Fill the 400px chart area */
justify-content: flex-end;
}
.flagpole {
width: 8px;
background: linear-gradient(90deg, #666, #333, #666);
position: relative;
border-radius: 4px 4px 0 0;
/* Ensure it starts exactly at the baseline */
margin: 0;
transform-origin: bottom;
}
/* MATHEMATICAL PRECISION BASED ON SCALE */
.flagpole.usa {
height: 100%;
}
/* ~28T */
.flagpole.china {
height: 63.2%;
}
/* ~17.7T */
.flagpole.cyber {
height: 38%;
}
/* ~10.6T (Adjusted to clear 8T line visually) */
.flagpole::after {
content: '';
position: absolute;
top: -6px;
left: 50%;
transform: translateX(-50%);
width: 12px;
height: 12px;
background: #888;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.flag-container {
position: absolute;
top: 20px;
left: 6px;
width: 120px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
background: white;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
}
.flag-container.usa {
background: #fff url('data:image/svg+xml;utf8,') no-repeat center/cover;
}
.flag-container.china {
background: #ee1c25 url('data:image/svg+xml;utf8,') no-repeat center/cover;
}
.flag-container.cyber {
background: #000 url('data:image/svg+xml;utf8,') no-repeat center/60%;
border: 1px solid var(--color-accent);
}
.economy-callout {
position: absolute;
bottom: calc(100% + 5px);
/* Tighter proximity to the tip */
left: 50%;
transform: translateX(-50%);
background: white;
color: black;
padding: 10px 15px;
min-width: 150px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
z-index: 25;
border-radius: 2px;
white-space: nowrap;
}
.economy-callout::before {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid white;
}
.economy-callout b {
display: block;
text-transform: uppercase;
font-size: 0.65rem;
letter-spacing: 0.12em;
font-weight: 800;
}
.economy-callout span {
display: block;
font-size: 1.1rem;
font-weight: 500;
margin-top: 2px;
color: #000;
}
@media (max-width: 768px) {
.economy-chart {
padding-top: var(--space-lg);
min-height: auto;
margin-top: var(--space-md);
}
.economy-y-axis {
display: none;
}
.economy-chart-area {
position: relative;
top: 0;
height: auto;
min-height: 0;
flex-direction: column;
align-items: flex-start;
padding: var(--space-sm) var(--space-sm) var(--space-lg);
border-bottom: none;
border-left: 2px solid rgba(255, 255, 255, 0.2);
gap: var(--space-lg);
}
.economy-item {
width: 100%;
height: auto;
align-items: flex-start;
padding-bottom: var(--space-xs);
}
.economy-item:last-child {
padding-bottom: var(--space-md);
}
.flagpole {
width: 100%;
/* Responsive horizontal poles */
height: 8px !important;
border-radius: 0 3px 3px 0;
transform-origin: left;
}
.flagpole.usa {
width: 99%;
}
.flagpole.china {
width: 63%;
}
.flagpole.cyber {
width: 34%;
}
.flag-container {
display: none;
}
.economy-callout {
position: static;
transform: none;
bottom: auto;
left: auto;
margin-bottom: var(--space-xs);
min-width: 0;
width: auto;
white-space: normal;
background: transparent;
color: var(--color-bg);
box-shadow: none;
border: none;
padding: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.economy-callout::before {
display: none;
}
.economy-callout b {
font-size: 0.78rem;
letter-spacing: 0.05em;
color: var(--color-accent);
white-space: nowrap;
}
.economy-callout span {
display: block;
font-size: 1rem;
font-weight: 700;
color: var(--color-bg);
line-height: 1.25;
min-height: 1.25em;
}
}
/* 15. Kundenreise (Journey Chart) */
.journey-section {
background-color: var(--color-bg);
border-top: 1px solid var(--color-grid-line);
padding: var(--space-xl) 0;
}
.journey-chart-container {
margin-top: var(--space-lg);
grid-column: 7 / -1;
/* Align to the right half on desktop */
width: 100%;
}
.chart-frame-wrapper {
position: relative;
width: 100%;
}
.chart-frame {
display: grid;
grid-template-columns: 80px 1fr;
/* Space for Y-axis labels */
gap: var(--space-sm);
position: relative;
width: 100%;
}
.y-axis-title {
position: absolute;
left: -70px;
top: 50%;
transform: translateY(-50%) rotate(-90deg);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-text-secondary);
white-space: nowrap;
}
.y-axis {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 0;
height: 100%;
position: relative;
}
.y-axis-labels {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
text-align: right;
padding-right: 15px;
border-right: 1px solid var(--color-text-primary);
}
.y-axis-labels span {
font-size: 0.75rem;
font-weight: 700;
color: var(--color-text-secondary);
}
.chart-main {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
/* Fixed aspect ratio for the chart area itself */
background: #fafafa;
border-bottom: 2px solid var(--color-text-primary);
overflow: hidden;
}
.phase-divider {
position: absolute;
left: 40%;
top: 0;
bottom: 0;
border-left: 1px dashed #ccc;
z-index: 2;
}
.phase-label {
position: absolute;
top: 15px;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text-secondary);
z-index: 5;
}
.phase-aufbau-label {
left: 15px;
}
.phase-kontinuitaet-label {
left: calc(40% + 15px);
}
.journey-line-svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
}
.x-axis-footer {
display: grid;
grid-template-columns: 80px 1fr;
gap: var(--space-sm);
margin-top: var(--space-sm);
position: relative;
}
.x-axis-title {
position: absolute;
bottom: -35px;
left: 50%;
transform: translateX(-50%);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-text-secondary);
}
.x-axis-content {
display: flex;
justify-content: space-between;
position: relative;
padding-top: 5px;
}
.x-axis-content span {
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}
@media (max-width: 992px) {
.journey-chart-container {
grid-column: 1 / -1;
margin-top: var(--space-xl);
}
}
@media (max-width: 768px) {
.chart-frame {
grid-template-columns: 1fr;
height: 300px;
}
.y-axis-labels,
.y-axis-title {
display: none;
}
.x-axis-footer {
grid-template-columns: 1fr;
margin-top: var(--space-md);
}
.x-axis-title {
position: static;
transform: none;
margin-top: var(--space-xs);
text-align: center;
font-size: 0.72rem;
}
.x-axis-content {
padding-top: 0;
gap: var(--space-xs);
}
.x-axis-content span {
font-size: 0.72rem;
}
.phase-divider {
display: block;
left: 40%;
border-left: 1px dashed #bdbdbd;
z-index: 3;
}
.phase-divider::after {
content: "80% SCHUTZ";
position: absolute;
top: 8px;
left: 6px;
font-family: monospace;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--color-text-primary);
background: rgba(255, 255, 255, 0.9);
padding: 2px 4px;
border-radius: 2px;
}
.chart-main {
aspect-ratio: 4 / 3;
}
.chart-main::before {
content: "PHASE 1: AUFBAU";
position: absolute;
top: 8px;
left: 8px;
font-family: monospace;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--color-text-secondary);
z-index: 6;
}
.chart-main::after {
content: "PHASE 2: BEGLEITUNG";
position: absolute;
top: 8px;
right: 8px;
font-family: monospace;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--color-text-secondary);
z-index: 6;
}
}
/* ─── Accessibility ─────────────────────────────────────────────────────── */
/* Global keyboard focus indicator – visible only for keyboard navigation */
:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 3px;
border-radius: 2px;
}
/* Remove default focus ring for mouse users (handled by :focus-visible above) */
:focus:not(:focus-visible) {
outline: none;
}
/* Skip navigation link – visually hidden until focused */
.skip-nav {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
background: var(--color-accent);
color: #fff;
padding: 0.75rem 1.5rem;
font-family: var(--font-family-sans);
font-weight: 600;
font-size: 0.9rem;
text-decoration: none;
border-radius: 0 0 4px 4px;
z-index: 9999;
white-space: nowrap;
}
.skip-nav:focus {
position: fixed;
left: 50%;
transform: translateX(-50%);
top: 0;
width: auto;
height: auto;
overflow: visible;
}
/* Noscript fallback: make all reveal sections visible without JS */
.no-js .reveal {
opacity: 1;
transform: none;
}
/* ─── Typography Utilities ──────────────────────────────────────────────── */
.lead {
font-size: var(--font-size-md);
line-height: 1.5;
margin-bottom: var(--space-md);
}
/* Opacity-based text softening — preferred over grey color tokens */
.text-muted {
opacity: 0.8;
}
.text-muted-2 {
opacity: 0.6;
}
/* ─── Hero Layout Helpers ────────────────────────────────────────────────── */
/* Desktop: video occupies right 5 columns; mobile falls through to full-width */
.hero-video {
grid-column: 8 / -1;
box-shadow: none;
}
.hero .grid {
align-items: start;
}
.hero .btn-group {
margin-bottom: var(--space-lg);
}
/* ─── Button Variants ────────────────────────────────────────────────────── */
.btn--sm {
padding: 8px 16px;
font-size: 0.9rem;
}
.btn--full {
width: 100%;
text-align: center;
display: block;
}
/* ─── Price Display ──────────────────────────────────────────────────────── */
.price-display {
font-size: var(--font-size-3xl);
font-weight: 700;
color: var(--color-accent);
}
.price-display--light {
font-size: var(--font-size-2xl);
font-weight: 700;
color: var(--color-text-primary);
}
.price-unit {
font-size: var(--font-size-lg);
font-weight: 400;
opacity: 0.8;
}
.price-note {
display: block;
opacity: 0.6;
font-size: var(--font-size-sm);
margin-top: var(--space-xs);
}
/* ─── Bento Grid Variants ────────────────────────────────────────────────── */
.bento-item--inverted {
background: var(--color-bg) !important;
border: 2px solid var(--color-text-primary) !important;
color: var(--color-text-primary) !important;
}
/* ─── Dark Section Stat Cards ────────────────────────────────────────────── */
.stat-card {
background: rgba(255, 255, 255, 0.05);
padding: var(--space-lg);
border-left: 4px solid var(--color-accent);
}
.stat-label {
font-size: var(--font-size-md);
display: block;
margin-bottom: var(--space-sm);
color: var(--color-on-dark);
}
.stat-value {
font-size: var(--font-size-4xl);
color: var(--color-white);
display: block;
line-height: 1.1;
font-weight: 700;
}
.stat-description {
margin-top: var(--space-md);
font-size: 0.9rem;
color: var(--color-on-dark-muted);
}
/* ─── Footer Component Helpers ───────────────────────────────────────────── */
.footer-logo {
height: 40px;
width: auto;
margin-bottom: var(--space-md);
opacity: 0.9;
}
.footer-brand-text {
font-size: var(--font-size-sm);
opacity: 0.7;
line-height: 1.6;
}
.footer-nav-label {
font-family: 'Inter Tight', var(--font-family-sans);
font-size: var(--font-size-sm);
font-weight: 600;
letter-spacing: 0.08em;
color: var(--color-on-dark-muted);
margin-bottom: var(--space-sm);
}
.footer-nav-list {
list-style: none;
padding: 0;
}
.footer-nav-list li {
margin-bottom: var(--space-xs);
}
.footer-bottom {
grid-column: 1 / -1;
margin-top: var(--space-xl);
padding-top: var(--space-md);
border-top: 1px solid var(--color-border-dark);
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.footer-copyright {
font-size: 0.8rem;
opacity: 0.5;
}
.footer-social-link {
text-decoration: none;
border-bottom: none !important;
}
.footer-social-icon {
height: 24px;
width: 24px;
filter: brightness(0) invert(1);
}
/* Footer grid column layout */
.footer-col-brand { grid-column: 1 / 4; }
.footer-col-links { grid-column: 5 / 7; }
.footer-col-legal { grid-column: 8 / 10; }
.footer-col-contact { grid-column: 11 / -1; }
/* ─── Economy Chart Accent ───────────────────────────────────────────────── */
/* Highlight the cyber-crime column callout in accent orange */
.economy-callout.cyber {
border-top: 3px solid var(--color-accent);
}
.economy-callout.cyber b {
color: var(--color-accent);
}
/* Angebot section: accent label to draw eye to the offer */
#angebot .hero-subtitle {
color: var(--color-accent);
}
/* ─── Entrance Animations ─────────────────────────────────────────────────── */
@keyframes sr-enter {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes sr-settle {
from { transform: translateY(16px); }
to { transform: translateY(0); }
}
@keyframes sr-side-left {
from { transform: translateX(-24px); }
to { transform: translateX(0); }
}
@keyframes sr-side-right {
from { transform: translateX(24px); }
to { transform: translateX(0); }
}
/* ─── Hero — staggered entrance (section is pre-active on load) ───────────── */
.hero-content .hero-subtitle {
animation: sr-enter 0.75s var(--ease-out-expo) 80ms backwards;
}
.hero-content h1 {
animation: sr-enter 0.75s var(--ease-out-expo) 180ms backwards;
}
.hero-content .lead {
animation: sr-enter 0.75s var(--ease-out-expo) 320ms backwards;
}
.hero-content .btn-group {
animation: sr-enter 0.75s var(--ease-out-expo) 480ms backwards;
}
/* ─── Economy Chart — bars grow from baseline ─────────────────────────────── */
/* Override base flagpole: start collapsed, grow on section activation */
.flagpole {
transform: scaleY(0);
transition: transform 1.1s var(--ease-out-quart);
/* transform-origin: bottom already set */
}
/* Callout labels hidden until bars finish growing */
.economy-callout {
opacity: 0;
transition: opacity 0.4s var(--ease-out-expo);
}
/* Staggered bar growth when #weltweit enters viewport */
#weltweit.active .flagpole.usa { transform: scaleY(1); transition-delay: 0ms; }
#weltweit.active .flagpole.china { transform: scaleY(1); transition-delay: 220ms; }
#weltweit.active .flagpole.cyber { transform: scaleY(1); transition-delay: 440ms; }
/* Callouts fade in after their bar has grown (~85% of 1.1s) */
#weltweit.active .flagpole.usa .economy-callout { opacity: 1; transition-delay: 860ms; }
#weltweit.active .flagpole.china .economy-callout { opacity: 1; transition-delay: 1080ms; }
#weltweit.active .flagpole.cyber .economy-callout { opacity: 1; transition-delay: 1300ms; }
/* ─── JS-driven child stagger (class added by IntersectionObserver) ────────── */
/* Stat cards — punch in after dark section background reveals */
.stat-card.is-entering {
animation: sr-enter 0.65s var(--ease-out-expo);
}
/* Compare cards — directional entry from opposite sides */
.compare-card-left.is-entering {
animation: sr-side-left 0.7s var(--ease-out-expo);
}
.compare-card-right.is-entering {
animation: sr-side-right 0.7s var(--ease-out-expo);
}
/* Role cards — sequential vertical settle */
.role-card.is-entering {
animation: sr-settle 0.65s var(--ease-out-expo);
}
/* Process steps — cascading vertical settle */
.process-step-premium.is-entering {
animation: sr-settle 0.6s var(--ease-out-expo);
}
/* ─── Reduced motion — disable all entrance animations ───────────────────── */
@media (prefers-reduced-motion: reduce) {
.hero-content .hero-subtitle,
.hero-content h1,
.hero-content .lead,
.hero-content .btn-group {
animation: none;
}
.flagpole {
transform: scaleY(1) !important;
transition: none !important;
}
.economy-callout {
opacity: 1 !important;
transition: none !important;
}
.stat-card.is-entering,
.compare-card-left.is-entering,
.compare-card-right.is-entering,
.role-card.is-entering,
.process-step-premium.is-entering {
animation: none !important;
}
}
/* =============================================== */
/* Standortbestimmung – animiertes Erklärvideo */
/* =============================================== */
.standort-video-block {
margin-top: var(--space-lg);
}
.standort-video {
position: relative;
aspect-ratio: 16 / 9;
background: #F4F4F2;
border: 1px solid var(--color-grid-line);
overflow: hidden;
cursor: pointer;
}
.standort-video:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 4px;
}
.sv-progress {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 4px;
background: rgba(10, 10, 10, 0.08);
z-index: 5;
cursor: pointer;
}
.sv-progress-fill {
height: 100%;
width: 0;
background: #F39200;
}
.sv-tick {
position: absolute;
top: 0;
bottom: 0;
width: 2px;
background: rgba(244, 244, 242, 0.9);
}
.sv-play {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 4;
pointer-events: none;
opacity: 1;
transition: opacity 0.25s ease;
}
.standort-video.is-playing .sv-play,
.standort-video.is-ended .sv-play {
opacity: 0;
}
.sv-badge {
position: absolute;
left: 16px;
bottom: 16px;
z-index: 5;
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(10, 10, 10, 0.88);
color: #ffffff;
font-family: var(--font-family-sans);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 8px 14px;
pointer-events: none;
transition: opacity 0.25s ease;
}
.sv-badge::before {
content: '';
display: block;
border-style: solid;
border-width: 5px 0 5px 8px;
border-color: transparent transparent transparent #F39200;
}
.standort-video.is-playing .sv-badge,
.standort-video.is-ended .sv-badge {
opacity: 0;
}
.sv-replay {
position: absolute;
right: 16px;
bottom: 20px;
z-index: 6;
display: none;
align-items: center;
gap: 8px;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.35);
color: rgba(255, 255, 255, 0.85);
font-family: var(--font-family-sans);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 8px 14px;
cursor: pointer;
transition: border-color 0.2s ease, color 0.2s ease;
}
.sv-replay:hover {
border-color: #F39200;
color: #ffffff;
}
.standort-video.is-ended .sv-replay {
display: inline-flex;
}
.sv-play-btn {
width: 72px;
height: 72px;
border-radius: 50%;
background: rgba(10, 10, 10, 0.88);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.sv-play-btn::after {
content: '';
display: block;
margin-left: 5px;
border-style: solid;
border-width: 12px 0 12px 20px;
border-color: transparent transparent transparent #ffffff;
}
@media (max-width: 767px) {
.sv-play-btn {
width: 52px;
height: 52px;
}
.sv-play-btn::after {
border-width: 9px 0 9px 15px;
margin-left: 4px;
}
}
/* ─── Mobile-Optimierung (Touch-Targets, Typografie, Header) ─────────────── */
/* Kein doppelter Abstand am Kartenende (Padding + p-Margin) */
.stat-card .stat-description {
margin-bottom: 0;
}
/* Hero-Video-Placeholder (Zwei-Klick-Loesung): verhindert die leere weisse
Box, solange das Vimeo-Embed mangels Consent nicht geladen ist */
.video-placeholder {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: var(--space-sm);
background-color: var(--color-text-primary);
color: var(--color-white);
border: none;
cursor: pointer;
font-family: inherit;
text-align: center;
transition: background-color 0.2s ease;
}
.video-placeholder:hover,
.video-placeholder:focus-visible {
background-color: #2a2523;
}
.video-placeholder.is-hidden {
display: none;
}
.video-placeholder-play {
width: 56px;
height: 56px;
border: 2px solid var(--color-accent);
border-radius: 50%;
position: relative;
flex-shrink: 0;
}
.video-placeholder-play::after {
content: '';
position: absolute;
top: 50%;
left: 54%;
transform: translate(-50%, -50%);
border-style: solid;
border-width: 10px 0 10px 16px;
border-color: transparent transparent transparent var(--color-accent);
}
.video-placeholder-title {
font-size: 1.05rem;
font-weight: 600;
}
.video-placeholder-note {
font-size: 0.75rem;
color: var(--color-on-dark-muted);
max-width: 32ch;
}
/* Touch-Targets: mind. ~44px Trefferflaeche ohne sichtbare Layoutaenderung */
.team-linkedin {
padding-top: var(--space-sm);
padding-bottom: 10px;
margin-bottom: -10px;
}
.blog-cms-link {
display: inline-block;
padding: 10px 12px;
margin: -10px -12px;
}
.footer-social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin: -10px;
}
@media (max-width: 768px) {
/* Header deckend: verhindert durchscheinenden Content hinter Logo/Toggle */
.header {
background-color: var(--color-bg);
backdrop-filter: none;
}
/* Stat-Zahlen kleiner: verhindert Umbrueche wie "CHF 6 / Mio." und
reduziert Kartenhoehe auf schmalen Screens */
:root {
--font-size-4xl: 2.8rem;
}
.stat-card {
padding: var(--space-md);
}
/* Footer-Links: groessere Tap-Flaeche, Abstaende bleiben optisch gleich */
.footer-nav-list a {
display: inline-block;
padding: 8px 0;
margin: -8px 0;
}
/* Hero-CTAs: gestapelt und gleich breit statt zwei ungleiche Boxen */
.hero .btn-group {
flex-direction: column;
width: 100%;
gap: 12px;
margin-bottom: var(--space-sm);
}
.hero .btn-group .btn {
width: 100%;
text-align: center;
padding: 14px var(--space-sm);
}
/* 2px Rahmen der Secondary-Variante ausgleichen: beide exakt gleich hoch */
.hero .btn-group .btn-secondary {
padding: 12px var(--space-sm);
}
/* Video rueckt naeher an die CTAs (Grid-Gap liefert bereits 32px) */
.hero .hero-video {
margin-top: 0;
}
}
/* ─── Hero-Play-Button — erscheint bei Hover auf Titel ───────────────────── */
/* Loest Dead-Click-Problem: User die instinktiv die Headline klicken, kriegen
beim Hover einen klaren Affordance-Knopf. Der Knopf liegt innerhalb des
, damit Hover-Transfer vom Titel auf den Knopf nahtlos klappt. */
.hero-play-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
margin-left: 16px;
padding: 0;
border: none;
border-radius: 50%;
background: var(--color-text-primary);
color: var(--color-bg);
cursor: pointer;
vertical-align: middle;
opacity: 0;
transform: scale(0.6);
transition: opacity 240ms ease, transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1), background-color 200ms ease;
}
.hero-play-btn svg {
width: 24px;
height: 24px;
margin-left: 3px; /* Play-Dreieck optisch zentrieren */
}
.hero-play-btn:hover,
.hero-play-btn:focus-visible {
background: var(--color-accent);
outline: none;
}
/* Desktop / Pointer-Geraete: erscheint nur bei Hover auf Titel oder Button */
@media (hover: hover) {
.hero-title:hover .hero-play-btn,
.hero-play-btn:focus-visible {
opacity: 1;
transform: scale(1);
}
}
/* Touch-Geraete (kein Hover): Button immer sichtbar */
@media (hover: none) {
.hero-play-btn {
opacity: 1;
transform: scale(1);
}
}
@media (prefers-reduced-motion: reduce) {
.hero-play-btn {
transition: opacity 120ms linear, background-color 120ms linear;
transform: scale(1);
}
@media (hover: hover) {
.hero-title:hover .hero-play-btn,
.hero-play-btn:focus-visible {
transform: scale(1);
}
}
}
/* ─── Cookiebot Dialog: CLS-Fix ──────────────────────────────────────────── */
/* Erzwingt fixed-Positionierung am Viewport-Bottom, damit das Dialog Inhalte
nicht verschiebt (CLS 0.32 in W21-Session beobachtet beim Show/Hide-Details). */
#CybotCookiebotDialog {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 2147483646 !important;
}
#CybotCookiebotDialogBodyUnderlay {
position: fixed !important;
inset: 0 !important;
z-index: 2147483645 !important;
}
/* ═════════════════════════════════════════════════════════════════
17. SafeRoute Loading-Utilities (portiert vom Prüfstand)
- .sr-load-mark: 3 pulsierende Quadrate (ink, ink, orange)
- .sr-load-rule: gleitende Linie (orange auf grid-line)
Verwendung:
═════════════════════════════════════════════════════════════════ */
.sr-load-mark {
display: inline-flex;
align-items: center;
gap: 6px;
height: 12px;
}
.sr-load-mark span {
width: 6px;
height: 6px;
background: var(--color-text-primary);
transform-origin: center;
animation: sr-load-step 900ms cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.sr-load-mark span:nth-child(2) {
animation-delay: 120ms;
}
.sr-load-mark span:nth-child(3) {
background: var(--color-accent);
animation-delay: 240ms;
}
.sr-load-mark--lg span {
width: 8px;
height: 8px;
}
.sr-load-mark--error span {
animation: none;
background: #b23a2a;
}
.sr-load-rule {
position: relative;
height: 1px;
background: var(--color-grid-line);
overflow: hidden;
}
.sr-load-rule::after {
content: '';
position: absolute;
inset: 0 auto 0 0;
width: 34%;
background: var(--color-accent);
transform: translateX(-100%);
animation: sr-load-rule 1400ms cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
@keyframes sr-load-step {
0%, 100% { transform: scaleY(1); opacity: 0.45; }
45% { transform: scaleY(1.75); opacity: 1; }
}
@keyframes sr-load-rule {
0% { transform: translateX(-100%); }
55%, 100% { transform: translateX(320%); }
}
@media (prefers-reduced-motion: reduce) {
.sr-load-mark span,
.sr-load-rule::after,
.chat-bubble[data-streaming="true"]::after {
animation: none;
}
.sr-load-rule::after {
transform: translateX(0);
}
}
/* Vorschlag-Chips */
.chat-chips {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
padding: var(--space-xs) 0;
}
.chat-chip {
font-family: var(--font-family-sans);
font-size: var(--font-size-sm);
padding: 6px 12px;
background: var(--color-bg);
border: 1px solid var(--color-text-primary);
color: var(--color-text-primary);
cursor: pointer;
text-align: left;
line-height: 1.3;
transition: background-color 0.15s ease, color 0.15s ease;
min-height: 32px;
}
.chat-chip:hover,
.chat-chip:focus-visible {
background: var(--color-text-primary);
color: var(--color-bg);
outline: none;
}
.chat-chip:disabled,
.chat-chip--used {
opacity: 0.45;
cursor: default;
background: var(--color-bg-subtle);
color: var(--color-text-secondary);
}
.chat-chip--used:hover {
background: var(--color-bg-subtle);
color: var(--color-text-secondary);
}
/* Action-Chip — direkter CTA (z.B. Termin buchen), visuell stärker */
.chat-chip.chat-chip--action {
background: var(--color-text-primary);
color: var(--color-bg);
border-color: var(--color-text-primary);
font-weight: 600;
text-decoration: none;
}
.chat-chip.chat-chip--action:hover,
.chat-chip.chat-chip--action:focus-visible {
background: var(--color-accent);
border-color: var(--color-accent);
color: var(--color-bg);
}
.chat-chip.chat-chip--action::before {
content: '→';
display: inline-block;
margin-right: 6px;
transition: transform 0.15s ease;
}
.chat-chip.chat-chip--action:hover::before {
transform: translateX(2px);
}
/* Eingabe-Zeile */
.chat-form {
display: flex;
gap: 0;
border: 1px solid var(--color-text-primary);
background: var(--color-bg);
}
.chat-form:focus-within {
outline: 2px solid var(--color-accent);
outline-offset: -2px;
}
.chat-input {
flex: 1;
border: none;
padding: var(--space-sm);
font-family: var(--font-family-sans);
font-size: var(--font-size-base);
background: transparent;
color: var(--color-text-primary);
resize: none;
line-height: 1.4;
min-height: 44px;
max-height: 120px;
outline: none;
}
.chat-input::placeholder {
color: var(--color-text-secondary);
}
.chat-send {
flex-shrink: 0;
border: none;
border-left: 1px solid var(--color-text-primary);
background: var(--color-text-primary);
color: var(--color-bg);
padding: 0 var(--space-md);
font-family: var(--font-family-sans);
font-weight: 600;
font-size: var(--font-size-base);
cursor: pointer;
transition: background-color 0.15s ease;
min-height: 44px;
}
.chat-send:hover:not(:disabled),
.chat-send:focus-visible:not(:disabled) {
background: var(--color-accent);
color: var(--color-bg);
outline: none;
}
.chat-send:disabled {
background: var(--color-text-secondary);
cursor: not-allowed;
}
.chat-input-meta {
display: flex;
justify-content: space-between;
align-items: center;
font-family: monospace;
font-size: 11px;
color: var(--color-text-secondary);
padding-top: var(--space-xs);
}
.chat-input-meta[data-warn="true"] {
color: var(--color-accent-dark);
}
/* Lead-Form (eingebettet) */
.chat-leadform {
display: flex;
flex-direction: column;
gap: var(--space-sm);
padding: var(--space-md);
border: 1px solid var(--color-text-primary);
background: var(--color-bg);
margin-top: var(--space-xs);
}
.chat-leadform-title {
font-family: 'Inter Tight', var(--font-family-sans);
font-weight: 600;
font-size: var(--font-size-md);
margin-bottom: 0;
}
.chat-leadform-hint {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
margin: 0;
}
.chat-leadform-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-sm);
}
@media (max-width: 640px) {
.chat-leadform-row {
grid-template-columns: 1fr;
}
}
.chat-leadform-field {
display: flex;
flex-direction: column;
gap: 4px;
}
.chat-leadform-field label {
font-family: monospace;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text-secondary);
}
.chat-leadform-field input,
.chat-leadform-field select {
border: 1px solid var(--color-grid-line);
background: var(--color-bg);
padding: 10px 12px;
font-family: var(--font-family-sans);
font-size: var(--font-size-base);
color: var(--color-text-primary);
min-height: 44px;
outline: none;
}
.chat-leadform-field input:focus,
.chat-leadform-field select:focus {
border-color: var(--color-text-primary);
outline: 2px solid var(--color-accent);
outline-offset: -2px;
}
/* Honeypot — sichtbar nur für Bots, nicht für User-Agents */
.chat-honeypot {
position: absolute !important;
left: -9999px !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
pointer-events: none !important;
opacity: 0 !important;
}
.chat-leadform-submit {
align-self: flex-start;
background: var(--color-accent);
color: var(--color-bg);
border: none;
padding: var(--space-sm) var(--space-lg);
font-family: var(--font-family-sans);
font-weight: 600;
font-size: var(--font-size-base);
cursor: pointer;
transition: background-color 0.15s ease;
min-height: 44px;
}
.chat-leadform-submit:hover:not(:disabled),
.chat-leadform-submit:focus-visible:not(:disabled) {
background: var(--color-accent-dark);
outline: none;
}
.chat-leadform-submit:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* Status-Banner (Erfolg / Fehler / Rate-Limit) */
.chat-status {
padding: var(--space-sm) var(--space-md);
border-left: 3px solid var(--color-accent);
background: var(--color-bg-subtle);
font-size: var(--font-size-sm);
color: var(--color-text-primary);
}
.chat-status[data-tone="success"] {
border-left-color: #2e6a4d;
}
.chat-status[data-tone="error"],
.chat-status[data-tone="warn"] {
border-left-color: #b23a2a;
}
/* Trust-Zeile unten */
.chat-trust {
font-family: monospace;
font-size: 11px;
color: var(--color-text-secondary);
line-height: 1.5;
padding-top: var(--space-sm);
border-top: 1px solid var(--color-grid-line);
}
.chat-trust strong {
color: var(--color-text-primary);
font-weight: 600;
}
/* Anchor-Soft-CTA im Hero (sekundär) */
.chat-anchor-link {
display: inline-block;
margin-top: var(--space-sm);
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
border-bottom: 1px solid var(--color-grid-line);
padding-bottom: 2px;
}
.chat-anchor-link:hover {
color: var(--color-text-primary);
border-bottom-color: var(--color-text-primary);
background: transparent;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.chat-bubble[data-streaming="true"]::after {
animation: none;
}
}
/* ── Utility: nur für Screenreader sichtbar ────────────────────────── */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* ==== Swiss-Labels (portiert aus codex/trust-labels-prod-base) ==== */
/* Contextual Swiss-origin labels in the offer */
.swiss-labels {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--grid-gap);
align-items: center;
margin-top: var(--space-lg);
padding: var(--space-md) 0;
border-top: 1px solid var(--color-text-primary);
border-bottom: 1px solid var(--color-grid-line);
}
.swiss-labels-heading {
grid-column: 1 / 5;
}
.swiss-labels-heading .mono {
display: block;
color: var(--color-text-secondary);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.1em;
margin-bottom: var(--space-xs);
}
.swiss-labels-heading h3 {
font-size: clamp(1.2rem, 2vw, 1.55rem);
max-width: 24ch;
margin-bottom: 0;
}
.swiss-labels-grid {
grid-column: 6 / -1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-md);
}
.swiss-label-item {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--space-sm);
min-width: 0;
padding: var(--space-sm) 0;
border: 0;
border-top: 1px solid var(--color-grid-line);
}
.swiss-label-item:hover,
.swiss-label-item:focus-visible {
background: transparent;
color: var(--color-text-primary);
border-top-color: var(--color-accent);
}
.swiss-label-item img {
display: block;
width: 100%;
max-width: 230px;
height: 52px;
object-fit: contain;
object-position: left center;
}
.swiss-label-item span {
color: var(--color-text-secondary);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
@media (max-width: 768px) {
.swiss-labels {
grid-template-columns: 1fr;
gap: var(--space-md);
margin-top: var(--space-lg);
}
.swiss-labels-heading,
.swiss-labels-grid {
grid-column: 1;
}
}
@media (max-width: 520px) {
.swiss-labels-grid {
grid-template-columns: 1fr;
gap: 0;
}
.swiss-label-item img {
height: 44px;
}
}
/* Footer-Labels */
.footer-labels {
margin-top: var(--space-md);
}
.footer-labels-kicker {
display: block;
color: var(--color-accent);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.1em;
margin-bottom: var(--space-sm);
}
.footer-labels-list {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.footer .footer-label-item {
display: flex;
align-items: center;
min-width: 0;
padding: 0;
background: transparent;
border: 0;
opacity: 0.9;
transition: opacity 0.2s var(--ease-out-quart), transform 0.2s var(--ease-out-quart);
}
.footer .footer-label-item:hover,
.footer .footer-label-item:focus-visible {
opacity: 1;
transform: translateY(-1px);
}
.footer .footer-label-item img {
display: block;
width: 100%;
max-width: 210px;
height: auto;
object-fit: contain;
object-position: left center;
}
/* ==== Mobile-Feinschliff (Audit 16.08.2026) ==============================
Ziele: sauberer Umbruch der Headline, ruhigere Typo-Groessen auf
schmalen Screens, kompaktere Hero-Elemente, kein ueberdimensionierter
Teaser-Visual. Desktop bleibt unveraendert. */
.nowrap { white-space: nowrap; }
@media (max-width: 768px) {
.hero-title {
font-size: clamp(1.9rem, 9vw, 2.6rem);
line-height: 1.08;
letter-spacing: -0.015em;
}
/* Der Inline-Play-Button in der Headline ist auf Mobile
redundant (das Video mit eigenem Play liegt direkt darunter)
und wuerde allein auf eine Zeile rutschen. */
.hero-play-btn {
display: none;
}
.hero-content .lead {
font-size: 1.125rem;
line-height: 1.55;
}
.teaser-visual {
max-width: 150px;
}
/* Kleinste Labels auf Touch-Screens lesbar halten (min ~12px). */
.leverage-label-sub,
.phase-label,
.video-placeholder-note {
font-size: 0.75rem;
}
}
@media (max-width: 420px) {
.hero-content .lead {
font-size: 1.0625rem;
}
h2 {
letter-spacing: -0.01em;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
MOBILE-OPTIMIERUNG (<=768px) · Stand: 2026-07-24
Ziel: Startseite auf Mobile besser fuehren, OHNE Inhalt/Visualisierungen zu
entfernen. Desktop bleibt vollstaendig unveraendert.
D · Vertikaler Rhythmus enger (Tokens leicht reduziert)
A · Karten kompakter gestapelt (kein Swipe)
+ Video "Standortbestimmung" staerker hervorgehoben (Rahmen/Schatten/Puls)
+ Intro->Visual-Abstaende vereinheitlicht (~32px)
Zum Zuruecksetzen: diesen Block loeschen.
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
/* ── D · Rhythmus: Zwischenabstaende ~20% straffen (nur Mobile) ────────── */
:root {
--space-xl: calc(6 * var(--space-unit)); /* 64px -> 48px */
--space-2xl: calc(7 * var(--space-unit)); /* 80px -> 56px */
}
/* ── A · Karten kompakt gestapelt (kein Swipe) ────────────────────────────
Karten voll sichtbar, nur kompakter -> kuerzere Seite. flex-start statt
space-between: Titel und Text bleiben oben zusammen. */
.bento-item {
min-height: 0;
padding: var(--space-md);
justify-content: flex-start;
gap: var(--space-sm);
}
#mehrwert-final .services-list {
gap: var(--space-sm) !important;
}
/* ── Video "Standortbestimmung" staerker hervorheben ──────────────────────
Feedback: wird schnell uebersehen. Kraeftiger Rahmen + Schatten und ein
groesserer, pulsierender Play-Button ziehen den Blick. */
.standort-video {
border: 2px solid var(--color-accent);
border-radius: 4px;
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14);
}
.sv-play-btn {
width: 66px;
height: 66px;
}
.sv-play-btn::after {
border-width: 11px 0 11px 18px;
margin-left: 4px;
}
.standort-video:not(.is-playing):not(.is-ended) .sv-play-btn {
animation: sv-pulse 2.4s ease-in-out infinite;
}
/* ── Zu grosse Abstaende zwischen Intro-Text und folgendem Visual ─────────
Grid-Items kollabieren ihre Margins nicht, daher stapeln sich Absatz-,
Intro-Div- und Grid-Gap/Visual-Margin zu 64-104px. Hier auf ~32px. */
.section .grid > div > p:last-child,
.section .grid > div > .lead:last-child {
margin-bottom: 0;
}
.standort-video-block,
.economy-chart {
margin-top: var(--space-sm);
}
#weltweit .grid > div,
#impact .grid > div,
#angebot .grid > div {
margin-bottom: var(--space-sm);
}
#problem .grid > div {
margin-bottom: var(--space-md) !important;
}
.services-title,
.header-text-content {
margin-bottom: 0;
}
.pareto-container {
margin-top: 0;
}
}
/* Pulsierender Ring am Video-Play-Button (Aufmerksamkeit). */
@keyframes sv-pulse {
0%, 100% { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(243, 146, 0, 0.5); }
50% { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), 0 0 0 14px rgba(243, 146, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
.standort-video .sv-play-btn { animation: none !important; }
}
/* ── Testimonials: verteilte Kundenstimmen (index) ─────────────────
Als abgesetzte Card (bg-subtle + Accent-Linie), damit sie sich vom
Section-Hintergrund abhebt, egal ob darueber ein bg-light-Block liegt. */
/* Vollbreites Band (wie .bc-ref auf den Landingpages): grauer Grund ueber
die ganze Breite, oben/unten mit Trennlinie an die Nachbarsektionen
angrenzend. Der Inhalt sitzt fokussiert im Grid, schwebt nicht. */
.testimonial-band {
padding: var(--space-lg) 0;
border-top: 1px solid var(--color-grid-line);
border-bottom: 1px solid var(--color-grid-line);
background-color: var(--color-bg-warm);
}
.testimonial-inner {
display: grid;
grid-template-columns: 170px 1fr;
gap: var(--space-lg);
align-items: center;
margin: 0;
}
/* Eyebrow "Referenz · ..." im SafeRoute-Orange (nur im Testimonial,
nicht die grauen Section-Eyebrows der uebrigen Seite). */
.testimonial-body .hero-subtitle {
color: var(--color-accent);
}
.testimonial-portrait img {
display: block;
width: 100%;
max-width: 170px;
height: auto;
}
.testimonial-body blockquote {
margin: 0;
font-size: clamp(1.05rem, 0.5vw + 0.95rem, 1.3rem);
line-height: 1.55;
font-weight: 500;
color: var(--color-text-primary);
max-width: 66ch;
}
.testimonial-body figcaption {
margin-top: var(--space-md);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px var(--space-md);
}
.testimonial-name {
font-weight: 600;
color: var(--color-text-primary);
}
.testimonial-role {
font-size: 0.9rem;
color: var(--color-text-secondary);
}
.testimonial-logo {
height: 36px;
width: auto;
}
/* Logo-Backlink: globalen a-Hover (Invert/Underline) neutralisieren */
a.testimonial-logo-link,
a.testimonial-logo-link:hover,
a.testimonial-logo-link:focus,
a.testimonial-logo-link:focus-visible {
display: inline-flex;
line-height: 0;
background: transparent;
border-bottom: none;
text-decoration: none;
transition: opacity 0.2s ease;
}
a.testimonial-logo-link:hover {
opacity: 0.7;
}
@media (max-width: 768px) {
.testimonial-inner {
grid-template-columns: 1fr;
gap: var(--space-md);
}
.testimonial-portrait img {
max-width: 120px;
}
}
/* ─── Leistungen-Dropdown in der Nav (09.2026) ───────────────────────────── */
.nav-item.has-submenu { position: relative; }
.nav-submenu { list-style: none; margin: 0; padding: 0; }
.nav-submenu a { border-bottom: none; }
@media (min-width: 901px) {
.nav-submenu {
position: absolute; top: 100%; left: 0; min-width: 290px;
display: flex; flex-direction: column;
background: var(--color-bg);
border: 1px solid var(--color-grid-line);
box-shadow: 0 12px 32px rgba(25, 22, 21, 0.12);
padding: var(--space-xs) 0;
opacity: 0; visibility: hidden; transform: translateY(6px);
transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
z-index: 200;
}
.nav-item.has-submenu:hover > .nav-submenu,
.nav-item.has-submenu:focus-within > .nav-submenu {
opacity: 1; visibility: visible; transform: translateY(0);
transition: opacity .18s ease, transform .18s ease;
}
.nav-submenu a {
display: block; padding: 10px 20px;
text-transform: none; letter-spacing: 0; font-weight: 500;
white-space: nowrap;
}
.nav-submenu a:hover { background: var(--color-bg-subtle); color: var(--color-text-primary); }
.nav-item.has-submenu > a::after {
content: "\203A"; display: inline-block; margin-left: 6px;
transform: rotate(90deg); font-size: 0.9em; opacity: .55;
}
}
@media (max-width: 900px) {
/* Im Drawer: Services als eingerueckte Unterliste, immer sichtbar */
.nav-submenu { padding-left: var(--space-sm); border-left: 1px solid var(--color-grid-line); margin-top: var(--space-xs); }
.nav-links .nav-submenu a { font-size: 0.95rem; padding: 8px 16px; }
.nav-item.has-submenu > a::after { content: ""; }
}
/* ─── Service-Detailseiten: st-card & svc-close (portiert 11.09.2026) ───── */
/* ── Abschluss-Band der Dienstleistungs-Seiten ─────────────────── */
.svc-close .grid { align-items: start; }
.svc-close-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, 0.25); }
.svc-close-list li { display: grid; grid-template-columns: 2rem 1fr; gap: 0.8em; padding: 0.9em 0; border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
.svc-close-list .n { font-family: var(--font-mono, monospace); font-size: 0.8rem; color: var(--color-accent); padding-top: 0.15em; }
.svc-close-list strong { display: block; color: var(--color-white); }
.svc-close-list span.d { display: block; margin-top: 0.15em; color: rgba(255, 255, 255, 0.75); font-size: 0.92rem; }
.svc-close-kicker { font-family: var(--font-mono, monospace); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); display: block; margin-bottom: var(--space-xs); }
@media (max-width: 900px) {
.svc-close .grid > div { grid-column: 1 / -1 !important; }
}
/* ── Service-Karte (Hero-Zusammenfassung auf den Dienstleistungs-Seiten) ── */
.st-card { grid-column: 8 / -1; background: var(--color-white); border: 1px solid var(--color-border-ink, rgba(25, 22, 21, 0.18)); border-top: 4px solid var(--color-accent); padding: var(--space-md); box-shadow: 0 16px 40px rgba(25, 22, 21, 0.08); align-self: start; }
.st-card .mono { font-family: var(--font-mono, monospace); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-secondary); }
.st-card .price-display { display: block; margin-top: 0.1em; }
.st-card .price-sub { display: block; margin-top: 0.2em; color: var(--color-text-secondary); font-size: 0.9rem; }
.st-card ul { list-style: none; margin: var(--space-sm) 0 0; padding: var(--space-sm) 0 0; border-top: 1px solid var(--color-border-ink, rgba(25, 22, 21, 0.18)); }
.st-card li { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.6em; padding: 0.35em 0; font-size: 0.92rem; }
.st-card li .mono { padding-top: 0.15em; }
.st-card .btn { width: 100%; text-align: center; margin-top: var(--space-sm); }
@media (max-width: 900px) {
.st-card { grid-column: 1 / -1; margin-top: var(--space-sm); }
}