/* ================= Core Theme (Dark/Light via data-theme) ================= */
:root {
	/* Grundfarben */
	--bg: #0b0c12;
	--text: #f7f7fb;
	--muted: rgba(255, 255, 255, .7);
	--card: rgba(22, 22, 28, .72);
	--card-strong: rgba(22, 22, 28, .95);
	--border: rgba(255, 255, 255, .08);
	--nav-height: clamp(70px, 10vw, 120px);

	/* Akzentfarbe (Gold/Messing für Finance) */
	--accent: #B08F42;
	--accent-glow: rgba(176, 143, 66, 0.4);

	/* Fluid Spacing & Fonts */
	--space-1: clamp(6px, .6vw, 10px);
	--space-2: clamp(10px, 1vw, 16px);
	--space-3: clamp(16px, 1.6vw, 24px);
	--space-4: clamp(24px, 2.4vw, 32px);
	--space-5: clamp(48px, 5vw, 80px);
	/* Etwas luftiger */

	--fs-xs: clamp(12px, 1.4vw, 13px);
	--fs-sm: clamp(13px, 1.5vw, 14px);
	--fs-md: clamp(14px, 1.6vw, 16px);
	--fs-lg: clamp(18px, 2.2vw, 20px);
	--fs-xl: clamp(24px, 3.2vw, 32px);
	--fs-2xl: clamp(32px, 5vw, 56px);

	--radius: 16px;
	--shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.2);
}

:root[data-theme='light'] {
	--bg: #f6f8ff;
	--text: #0b0b0e;
	--muted: rgba(0, 0, 0, .65);
	--card: rgba(255, 255, 255, .75);
	--card-strong: #ffffff;
	--border: rgba(0, 0, 0, .08);
	--shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.05);
}

@media (prefers-color-scheme: light) {
	:root:not([data-theme]) {
		--bg: #f6f8ff;
		--text: #0b0b0e;
		--muted: rgba(0, 0, 0, .65);
		--card: rgba(255, 255, 255, .75);
		--card-strong: #fff;
		--border: rgba(0, 0, 0, .08);
	}
}

/* ================= Base / Global ================= */
* { box-sizing: border-box; }

html { height: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--text);
	background-color: var(--bg);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

/* Dezent tiefer Raum – Hintergrund-Effekt */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(1200px 60% at 50% 0%,
			color-mix(in oklab, var(--card) 4%, transparent) 0%,
			transparent 80%);
	z-index: -1;
}

img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { margin: 0 0 var(--space-2); line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }
p { margin: 0 0 var(--space-2); }
strong { font-weight: 600; color: var(--text); }
a { color: inherit; text-decoration: none; transition: opacity 0.2s; }
a:hover { opacity: 0.8; }

.container {
	width: 100%;
	max-width: 1320px;
	margin-inline: auto;
	padding-inline: var(--space-3);
}

section { 
    padding: var(--space-5) 0; 
    scroll-margin-top: calc(var(--nav-height) + 60px); 
}

/* Utilities */
.muted { color: var(--muted); }
.badge {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 99px;
	background: var(--border);
	font-size: var(--fs-xs);
	color: var(--muted);
	margin-bottom: var(--space-2);
}

/* ================= Navigation ================= */
.nav {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 999;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	background: color-mix(in oklab, var(--bg) 85%, transparent);
	border-bottom: 1px solid var(--border);
}

/* ================= Navigation (Zentriert) ================= */
.nav-inner {
  display: flex; 
  align-items: center;
  /* Logo links, (Burger rechts auf Mobile) */
  justify-content: space-between; 
  
  /* Wichtig für die Zentrierung der Links: */
  position: relative; 
  
  height: var(--nav-height);
  transition: height 0.3s ease;
}

/* Anpassung der Desktop-Links */
.nav-links.desktop-only {
  /* Absolute Zentrierung auf der Seite */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 40px); /* Etwas mehr Abstand zwischen den Links sieht im Center gut aus */
  font-size: var(--fs-sm);
  font-weight: 500;
}

/* Mobile Anpassung bleibt wie sie ist */
@media (max-width: 992px) {
  .nav-inner {
    justify-content: space-between; 
  }
  .nav-links.desktop-only { display: none; }
}
.nav-logo { height: clamp(40px, 6vw, 75px); width: auto; display: block; }

.brand { display: flex; align-items: center; gap: 8px; }
.brand span {
	color: var(--accent);
	font-weight: 800;
	font-size: 20px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.nav-links {
	display: flex;
	align-items: center;
	gap: clamp(16px, 2.5vw, 32px);
	font-size: var(--fs-sm);
	font-weight: 500;
}

.nav-links a:hover { color: var(--accent); opacity: 1; }

/* ================= Dropdown Menu ================= */
.dropdown { position: relative; height: 100%; display: flex; align-items: center; }
.dropdown-trigger {
	background: none; border: none; color: inherit; font-family: inherit;
	font-size: inherit; font-weight: inherit; cursor: pointer;
	display: flex; align-items: center; gap: 6px; padding: 0;
}
.dropdown-trigger:hover { color: var(--accent); }

.dropdown-menu {
	position: absolute; top: 100%; left: -12px;
	min-width: 220px; background: var(--card-strong);
	border: 1px solid var(--border); border-radius: 12px; padding: 8px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
	opacity: 0; visibility: hidden; transform: translateY(10px);
	transition: all 0.2s ease; pointer-events: none;
}
.dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.dropdown-menu a { display: block; padding: 10px 16px; border-radius: 8px; color: var(--muted); text-decoration: none; transition: all 0.2s; }
.dropdown-menu a:hover { background: var(--border); color: var(--accent); }

/* ================= Sticky Sub-Navigation (Light/Dark Ready) ================= */
.sticky-nav-wrapper {
  position: -webkit-sticky;
  position: sticky;
  
  top: calc(var(--nav-height) - 1px); 
  
  z-index: 90;
  background: color-mix(in srgb, var(--bg) 95%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
  height: 60px;
  display: flex;
  align-items: center;
  margin-bottom: -1px;
}
.subnav-inner { display: flex; justify-content: space-between; align-items: center; height: 100%; }
.subnav-links { display: flex; gap: 32px; height: 100%; align-items: center; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.subnav-links::-webkit-scrollbar { display: none; }
.subnav-link {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600;
  color: var(--muted); text-decoration: none; transition: all 0.3s;
  height: 100%; display: flex; align-items: center; border-bottom: 2px solid transparent;
}
.subnav-link:hover, .subnav-link.active { color: var(--text); border-bottom-color: var(--accent); }
.btn-subnav {
  display: inline-flex; align-items: center; padding: 8px 16px; background: var(--accent);
  color: #fff; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  border-radius: 2px; text-decoration: none; transition: background 0.3s; white-space: nowrap;
}
.btn-subnav:hover { background: #cfaa54; }
@media (max-width: 768px) {
  .btn-subnav { display: none; } 
  .subnav-inner { justify-content: flex-start; }
  .subnav-links { width: 100%; padding-right: 20px; }
}

/* ================= Hero ================= */
.hero {
	position: relative;
	padding-top: calc(var(--nav-height) + 80px);
	padding-bottom: 80px;
	overflow: hidden;
}
.hero-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero::after {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--bg) 60%, transparent) 50%, var(--bg) 100%);
}
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr minmax(0, 600px); gap: var(--space-5); align-items: center; }
@media (max-width: 768px) {
	.hero-grid { grid-template-columns: 1fr; }
	.hero-copy { order: -1; }
}

/* ================= Hero Typography & Animation ================= */
.hero-title { font-size: clamp(40px, 6vw, 72px); line-height: 1.1; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 24px; }
.hero-lead { font-size: clamp(18px, 2vw, 24px); color: var(--muted); max-width: 540px; line-height: 1.5; font-weight: 400; }
.rotating-text-wrapper { display: block; height: 1.2em; overflow: hidden; position: relative; color: var(--accent); }
.rotating-word { display: block; height: 100%; opacity: 0; transform: translateY(-50px); position: absolute; top: 0; left: 0; animation: rotateText 9s infinite; }
.rotating-word:nth-child(1) { animation-delay: 0s; }
.rotating-word:nth-child(2) { animation-delay: 3s; }
.rotating-word:nth-child(3) { animation-delay: 6s; }
@keyframes rotateText {
	0% { opacity: 0; transform: translateY(-30px); }
	5% { opacity: 1; transform: translateY(0); }
	28% { opacity: 1; transform: translateY(0); }
	33% { opacity: 0; transform: translateY(30px); }
	100% { opacity: 0; transform: translateY(30px); }
}

/* ================= Section Headers (Split & Eyebrow) ================= */
.section-intro { display: grid; grid-template-columns: 1fr; gap: 32px; margin-bottom: 80px; }
@media (min-width: 992px) {
	.section-intro { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
	.intro-inverted { direction: rtl; }
	.intro-inverted > * { direction: ltr; }
	.intro-inverted h2 { text-align: right; }
	.intro-inverted h2::before { margin-left: auto; margin-right: 0; }
	.intro-inverted p { text-align: right; align-self: start; }
}
.section-intro h2 { font-size: clamp(32px, 4vw, 48px); line-height: 1.1; font-weight: 700; color: var(--text); margin: 0; position: relative; }
.section-intro h2::before { content: ""; display: block; width: 48px; height: 3px; background: var(--accent); margin-bottom: 24px; }
.section-intro p { font-size: 18px; line-height: 1.6; color: var(--muted); margin: 0; }
.intro-eyebrow { display: block; font-size: 13px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: 16px; font-weight: 700; }

/* ================= Straight Grid System (Bento) ================= */
.bento-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 0; }
@media (min-width: 768px) { .bento-grid { grid-template-columns: repeat(3, 1fr); } }
.bento-card { position: relative; background: var(--card-strong); padding: 40px; display: flex; flex-direction: column; justify-content: space-between; min-height: 320px; border: none; border-radius: 0; transition: background 0.3s ease; }
.bento-card:hover { background: var(--card); }
.bento-content { height: 100%; display: flex; flex-direction: column; align-items: flex-start; }
.bento-card h3 { font-size: 28px; margin-bottom: 16px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }
.bento-card p { color: var(--muted); font-size: 15px; line-height: 1.6; flex-grow: 1; }
.action-link { margin-top: 24px; color: var(--accent); font-weight: 600; text-transform: uppercase; font-size: 12px; letter-spacing: 0.1em; display: flex; align-items: center; gap: 12px; text-decoration: none; }
.action-line { height: 1px; width: 24px; background: var(--accent); transition: width 0.3s; }
.bento-card:hover .action-line { width: 48px; }

.kpi-grid {
	display: grid;
	/* Mobile: Wir machen 1 Spalte, damit die 3 Elemente schön untereinander stehen und zentriert sind. 
       Bei 2 Spalten wäre das dritte Element sonst einsam links. */
	grid-template-columns: 1fr; 
	gap: 40px;
	text-align: center; /* Auch mobil zentriert für Symmetrie */
	padding-top: 60px;
	padding-bottom: 0;
	border-bottom: none;
}

@media (min-width: 768px) {
	.kpi-grid {
		/* HIER IST DER FIX: 3 statt 4 Spalten */
		grid-template-columns: repeat(3, 1fr);
		gap: 24px;
		text-align: center;
	}
}

.kpi-number {
	font-size: clamp(40px, 5vw, 64px);
	font-weight: 800;
	color: var(--accent);
	line-height: 1;
	margin-bottom: 8px;
	font-variant-numeric: tabular-nums;
}

.kpi-unit {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--muted);
	font-weight: 600;
}
/* ================= Team (Straight Look) ================= */
.team-grid {
  display: grid; 
  /* Mobil/Tablet: Automatisch füllen, aber Karten dürfen schmaler sein (ab 240px) */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px; /* Etwas kompakterer Abstand */
  margin-top: 64px;
}

/* Ab großem Desktop erzwingen wir 4 Spalten */
@media (min-width: 1200px) {
  .team-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.team-member { background: var(--card); border: 1px solid var(--border); border-radius: 0; overflow: hidden; transition: border-color 0.3s ease; }
.team-member:hover { border-color: var(--muted); }
.team-photo { width: 100%; aspect-ratio: 1 / 1.1; background: var(--bg); margin: 0; border: none; border-radius: 0; position: relative; overflow: hidden; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.team-member:hover .team-photo img { transform: scale(1.05); }
.team-info { padding: 24px; text-align: left; border-top: 1px solid var(--border); }
.team-name { font-size: 20px; font-weight: 700; margin-bottom: 4px; color: var(--text); }
.team-role { font-size: 14px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; margin: 0; }

/* ================= CTA Section (Dark Mode Lock) ================= */
#cta-section {
	padding: 50px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
	--text: #f7f7fb; --muted: rgba(255, 255, 255, 0.7); --bg: #0b0c12;
	background: linear-gradient(to bottom, rgba(11, 12, 18, 0.4), rgba(11, 12, 18, 0.8)), url("gfx/schloss.png") center center / cover no-repeat;
	background-attachment: fixed;
}
.cta-container { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 800px; margin: 0 auto; }
.cta-eyebrow { font-size: 14px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.2em; font-weight: 700; margin-bottom: 24px; display: block; }
.cta-title { font-size: clamp(40px, 6vw, 80px); line-height: 1; font-weight: 800; color: var(--text); margin-bottom: 32px; letter-spacing: -0.03em; }
.cta-text { font-size: clamp(18px, 2vw, 22px); color: var(--muted); line-height: 1.6; margin-bottom: 48px; max-width: 600px; }
.btn-massive { display: inline-flex; align-items: center; justify-content: center; padding: 24px 64px; background: var(--text); color: var(--bg); font-size: 20px; font-weight: 700; text-decoration: none; transition: all 0.3s ease; border: none; cursor: pointer; border-radius: 0; }
.btn-massive:hover { background: var(--accent); color: #fff; transform: translateY(-4px); }

/* ================= FAQ (Clean) ================= */
.faq-wrap { max-width: 800px; margin: 0 auto; }
.faq-list { display: flex; flex-direction: column; gap: 0; }
.faq-card { background: transparent; border: none; border-radius: 0; border-bottom: 1px solid var(--border); }
.faq-card summary { padding: 32px 0; cursor: pointer; font-weight: 700; font-size: 18px; list-style: none; display: flex; justify-content: space-between; align-items: center; color: var(--text); transition: color 0.3s; }
.faq-card summary:hover { color: var(--accent); }
.faq-card summary::-webkit-details-marker { display: none; }
.faq-card summary::after { content: "+"; font-size: 24px; font-weight: 300; color: var(--accent); margin-left: 16px; }
.faq-card details[open] summary::after { content: "−"; }
.faq-card .answer { padding: 0 0 32px 0; color: var(--muted); line-height: 1.6; font-size: 16px; border-top: none; max-width: 90%; }

/* ================= Footer ================= */
footer { border-top: 1px solid var(--border); background: var(--bg); padding: 80px 0 40px; font-size: 14px; }
.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 48px; }
.footer-head { color: var(--accent); font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; margin-bottom: 24px; }
.footer-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-list a { color: var(--muted); text-decoration: none; transition: color 0.2s; }
.footer-list a:hover { color: var(--text); }
.footer-theme-btn { background: none; border: 1px solid var(--border); border-radius: 4px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; padding: 6px 12px; cursor: pointer; transition: all 0.3s; font-family: inherit; }
.footer-theme-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(255,255,255,0.05); }

/* ================= Mobile Menu System (Fix: Outside & Solid) ================= */
.mobile-menu-btn { display: none; }
.mobile-menu-overlay { display: none; }
.nav-links.desktop-only { display: flex; }

@media (max-width: 992px) {
  .nav-links.desktop-only { display: none; }
  
  .mobile-menu-btn {
    display: flex; flex-direction: column; justify-content: space-between;
    width: 24px; height: 18px; background: none; border: none; cursor: pointer; z-index: 1001; padding: 0;
  }
  .bar { width: 100%; height: 2px; background-color: var(--text); transition: all 0.3s ease; border-radius: 2px; }
  .mobile-menu-btn.open .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .mobile-menu-btn.open .bar:nth-child(2) { transform: translateY(-8px) rotate(-45deg); }

  .mobile-menu-overlay {
    display: block; position: fixed; top: var(--nav-height); left: 0; right: 0; bottom: 0;
    background-color: var(--bg); z-index: 998; padding: 24px;
    opacity: 0; visibility: hidden; transform: translateX(100%);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    border-top: 1px solid var(--border);
  }
  .mobile-menu-overlay.open { opacity: 1; visibility: visible; transform: translateX(0); }

  .mobile-nav-links { display: flex; flex-direction: column; height: 100%; overflow-y: auto; padding-bottom: 40px; }
  .mobile-link { display: flex; align-items: center; justify-content: space-between; font-size: 18px; font-weight: 600; color: var(--text); text-decoration: none; padding: 20px 0; border-bottom: 1px solid var(--border); }
  .mobile-category-label { font-size: 13px; text-transform: uppercase; color: var(--muted); letter-spacing: 0.1em; margin-top: 32px; margin-bottom: 8px; font-weight: 700; }
  .mobile-sublink { display: flex; align-items: center; font-size: 16px; color: var(--muted); text-decoration: none; padding: 16px 0 16px 16px; border-bottom: 1px solid var(--border); transition: color 0.2s; }
  .mobile-sublink:hover, .mobile-sublink:active { color: var(--accent); background: rgba(255,255,255,0.02); }
  .theme-trigger-mobile { margin-top: 40px; font-size: 14px; color: var(--text); border: 1px solid var(--border); padding: 16px; text-align: center; border-radius: 4px; width: 100%; }
}
/* ================= Section Divider (Separatoren) ================= */
.section-divider {
  padding: 40px 0;
  position: relative;
  width: 100%;
}

.section-divider-line {
  width: 100%;
  height: 1px;
  /* Verlauf von Transparent -> Grau -> Transparent */
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}

.section-divider-chip {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  
  background: var(--bg); /* Deckt die Linie ab */
  padding: 0 24px; /* Mehr Abstand zum Text */
  
  color: var(--accent); /* Gold sieht hier oft besser aus als Grau, oder var(--muted) */
  /* Wir bleiben bei Muted für Dezenz, oder Accent für Highlight. 
     Ich nehme var(--muted) aber etwas heller */
  color: var(--muted); 
  
  font-size: 13px; /* NEU: Größer (vorher 11px) */
  font-weight: 600; /* Etwas fetter */
  text-transform: uppercase;
  letter-spacing: 0.15em;
  white-space: nowrap;
}

/* ================= Cookie Banner ================= */
.cookie-banner {
    position: fixed;
    bottom: 24px;
    left: 24px;
    width: calc(100% - 48px);
    max-width: 400px;
    background: var(--card-strong);
    border: 1px solid var(--border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 32px;
    z-index: 10000; /* Muss über allem liegen */
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    display: flex;
    flex-direction: column;
    gap: 24px;
    /* Kleine Animation beim Einblenden */
    animation: slideUp 0.5s ease-out forwards;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.cookie-title {
    font-size: 16px;
    color: var(--text);
    margin: 0 0 12px 0;
    font-weight: 700;
}

.cookie-text {
    font-size: 13px;
    line-height: 1.6;
    color: var(--muted);
    margin: 0;
}

.cookie-link {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 4px;
}
.cookie-link:hover {
    color: var(--text);
}

.cookie-actions {
    display: flex;
    gap: 12px;
}

.cookie-btn-fill, .cookie-btn-outline {
    flex: 1;
    padding: 12px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 0; /* Straight Look */
}

/* Akzeptieren Button (Gold) */
.cookie-btn-fill {
    background: var(--accent);
    color: #fff;
    border: 1px solid var(--accent);
}
.cookie-btn-fill:hover {
    background: #cfaa54;
    border-color: #cfaa54;
}

/* Ablehnen Button (Outline) */
.cookie-btn-outline {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--border);
}
.cookie-btn-outline:hover {
    border-color: var(--text);
    color: var(--text);
}

/* Mobile Anpassung */
@media (max-width: 480px) {
    .cookie-banner {
        left: 0; bottom: 0;
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        border-left: none; 
        border-right: none;
        border-bottom: none;
    }
}

/* ================= Prefix für KPI Zahlen ================= */
.prefix-gt::before {
    content: "> ";     /* Das Zeichen */
    margin-right: 4px; /* Kleiner Abstand zur Zahl */
}

/* ================= Fix für Unterseiten (Impressum/Datenschutz) ================= */
.legal-section {
    /* Nimmt die variable Header-Höhe + 40px extra Abstand */
    padding-top: calc(var(--nav-height) + 40px);
    
    /* Optional: Damit kurze Seiten (wie Impressum) nicht "zu kurz" wirken */
    min-height: 60vh; 
}

/* ================= B2B Page Extensions ================= */

/* Ghost Button für sekundäre Actions */
.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 24px 32px;
    background: transparent;
    color: var(--text);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--border);
    transition: all 0.3s ease;
}
.btn-ghost:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* B2B Hero Visuals */
.hero-visual {
    position: relative;
    height: 400px;
    background: radial-gradient(circle at center, rgba(176, 143, 66, 0.1) 0%, transparent 70%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.stat-card {
    background: var(--card-strong);
    border: 1px solid var(--border);
    padding: 24px;
    position: absolute;
    min-width: 180px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    backdrop-filter: blur(10px);
}
.stat-card.floating {
    top: 20%;
    right: 10%;
    animation: float 6s ease-in-out infinite;
}
.stat-card.floating.delay-1 {
    top: 60%;
    left: 10%;
    animation: float 6s ease-in-out infinite 2s;
}

.stat-label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
}
.stat-value {
    display: block;
    font-size: 32px;
    font-weight: 800;
    color: var(--accent);
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0px); }
}

/* Timeline Component */
.timeline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 32px;
    margin-top: 64px;
    counter-reset: step;
}

.timeline-step {
    background: var(--card);
    padding: 32px;
    border: 1px solid var(--border);
    position: relative;
    transition: transform 0.3s;
}
.timeline-step:hover {
    transform: translateY(-5px);
    border-color: var(--accent);
}

.step-number {
    font-size: 48px;
    font-weight: 800;
    color: rgba(255,255,255,0.05);
    line-height: 1;
    margin-bottom: 16px;
}

.timeline-step h3 {
    font-size: 20px;
    color: var(--text);
    margin-bottom: 12px;
}
.timeline-step p {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.6;
}

/* ================= B2B Comparison Section ================= */
.comparison-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 40px;
    position: relative;
    align-items: center;
}

@media (min-width: 992px) {
    .comparison-wrapper {
        grid-template-columns: 1fr 80px 1fr; /* Links - VS - Rechts */
        gap: 0;
    }
}

.comp-card {
    background: var(--card);
    padding: 40px;
    border: 1px solid var(--border);
    border-radius: 0;
}

/* Status Quo (Grau/Dezent) */
.status-quo {
    opacity: 0.7;
    border-right: 1px solid var(--border);
}

/* Straight Way (Hervorgehoben) */
.straight-way {
    background: linear-gradient(145deg, var(--card-strong), rgba(176, 143, 66, 0.08));
    border: 1px solid var(--accent);
    box-shadow: 0 0 30px rgba(176, 143, 66, 0.1);
    position: relative;
    z-index: 2;
    transform: scale(1.02); /* Leicht größer */
}

@media (max-width: 992px) {
    .straight-way { transform: none; margin-top: 20px; }
}

.comp-title {
    font-size: 24px;
    margin-bottom: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.comp-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.comp-list li {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    font-size: 16px;
}
.comp-list li:last-child { border-bottom: none; }

/* Icons */
.comp-list li span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-weight: bold;
    font-size: 14px;
}

.negative span {
    color: #ff4d4d;
    background: rgba(255, 77, 77, 0.1);
}

.positive span {
    color: var(--accent);
    background: rgba(176, 143, 66, 0.2);
}
.positive strong {
    color: var(--accent);
}

/* VS Circle in der Mitte */
.comp-vs {
    width: 60px;
    height: 60px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-style: italic;
    color: var(--muted);
    margin: 0 auto;
    z-index: 5;
}

/* ================= Mobile Optimierungen (Buttons & Rating) ================= */
@media (max-width: 768px) {
    
    /* 1. Buttons im Hero-Bereich kompakter machen */
    .btn-massive, 
    .btn-ghost {
        width: 100%;           /* Buttons nutzen volle Breite */
        padding: 14px 20px;    /* Innenabstand drastisch reduziert (war 24px) */
        font-size: 16px;       /* Schriftgröße handlicher (war 20px) */
        display: flex;
        justify-content: center; /* Text zentriert */
    }

    /* Damit die Buttons untereinander rutschen, falls sie nebeneinander stehen */
    .hero-copy > div {
        flex-direction: column;
        gap: 12px !important; /* Abstand zwischen den Buttons */
    }
}

/* ================= 404 Fehlerseite ================= */
.error-page {
    /* Mindestens Bildschirmhöhe abzüglich Header und Footer */
    min-height: 80vh; 
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: var(--nav-height); /* WICHTIG: Damit es nicht hinter dem Header klebt */
    background: var(--bg); /* Sicherstellen, dass kein Overlay stört */
    position: relative;
    z-index: 1;
}

/* Optional: Ein subtiler roter Schein im Hintergrund für "Fehler" Stimmung */
.error-page::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 60%; height: 60%;
    background: radial-gradient(circle, rgba(255, 77, 77, 0.05) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* ================= Expert Section Design ================= */

.expert-card {
    position: relative;
    width: 100%;
    max-width: 450px;
    margin: 0 auto; /* Zentriert auf Mobile */
}

.expert-image-wrapper {
    position: relative;
    border-radius: 4px; /* Straight Look */
    overflow: hidden;
    border: 1px solid var(--border);
    /* Ein leichter Gold-Schein hinter dem Bild */
    box-shadow: 20px 20px 0px rgba(176, 143, 66, 0.05);
}

.expert-img {
    width: 100%;
    height: auto;
    display: block;
    filter: grayscale(20%) contrast(110%); /* Edler Look */
    transition: filter 0.3s;
}
.expert-card:hover .expert-img {
    filter: grayscale(0%) contrast(100%);
}

/* Badge oben rechts auf dem Bild */
.trust-badge {
    position: absolute;
    top: 24px;
    right: 24px;
    background: rgba(11, 12, 18, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid var(--accent);
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 50px;
}
.badge-icon { color: var(--accent); font-size: 14px; }
.badge-text { color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }

/* Schwebende Zitat-Karte */
.expert-quote-card {
    position: absolute;
    bottom: -30px;
    left: -30px;
    width: 80%;
    background: var(--card-strong);
    padding: 24px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent); /* Akzentlinie */
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.expert-quote-card p {
    font-size: 14px;
    font-style: italic;
    color: var(--text);
    margin: 0;
    line-height: 1.6;
}

/* Unterschrift-Simulation */
.signature {
    font-family: cursive; /* Fallback */
    font-size: 24px;
    color: var(--muted);
    opacity: 0.6;
    transform: rotate(-5deg);
}

/* Mobile Anpassung */
@media (max-width: 992px) {
    .expert-quote-card {
        position: relative;
        bottom: auto;
        left: auto;
        width: 100%;
        margin-top: -20px;
        z-index: 2;
    }
    
    .rating-visual-integrated {
        justify-content: center !important;
        margin-bottom: 48px;
    }
}

/* ================= Objekt Rating / Integrated Grid ================= */
.rating-grid-integrated {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
}

@media (min-width: 992px) {
    .rating-grid-integrated {
        grid-template-columns: 1fr 1fr; /* Hier entsteht das Nebeneinander */
        gap: 80px;
    }
}

.rating-visual-integrated {
    display: flex;
    justify-content: center;
}

/* Falls du die SF-Cards im Hero nutzt, fehlen diese Styles vermutlich auch: */
.sf-data-card {
    background: var(--card-strong);
    border: 1px solid var(--border);
    width: 100%;
    max-width: 450px;
    padding: 40px;
    border-top: 2px solid var(--accent); 
}

.sf-card-header {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px;
}
.sf-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.sf-badge { background: rgba(176, 143, 66, 0.15); color: var(--accent); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 6px 12px; border: 1px solid rgba(176, 143, 66, 0.3); }

.sf-card-body { display: flex; flex-direction: column; gap: 20px; }
.sf-data-row { display: flex; justify-content: space-between; align-items: center; font-size: 15px; }
.sf-key { color: var(--muted); }
.sf-value { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.sf-divider { height: 1px; background: var(--border); margin: 32px 0; width: 100%; }
.sf-card-footer { display: flex; justify-content: space-between; align-items: center; }
.sf-big-stat { font-size: 40px; font-weight: 800; color: var(--accent); line-height: 1; display: flex; align-items: baseline; gap: 4px; }
.sf-big-stat .unit { font-size: 20px; font-weight: 600; color: var(--muted); }

/* Checkliste Styles (falls genutzt) */
.check-list { list-style: none; padding: 0; margin: 32px 0 0 0; display: flex; flex-direction: column; gap: 12px; }
.check-list li { position: relative; padding-left: 24px; color: var(--text); font-weight: 500; }
.check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: bold; }

/* ================= Expert Section Design (Zick-Zack Optimized) ================= */

.expert-card {
    position: relative;
    width: 100%;
    max-width: 450px;
    /* Auf Mobile zentrieren wir es, auf Desktop ist es im Grid links */
    margin: 0 auto; 
}

@media (min-width: 992px) {
    .expert-card { margin: 0; } /* Reset auf Desktop für Linksbündigkeit */
}

.expert-image-wrapper {
    position: relative;
    border-radius: 4px; 
    overflow: hidden;
    border: 1px solid var(--border);
    /* Schatten nach links unten, da Licht von oben rechts kommt */
    box-shadow: -20px 20px 0px rgba(176, 143, 66, 0.05);
}

.expert-img {
    width: 100%;
    height: auto;
    display: block;
    filter: grayscale(20%) contrast(110%);
    transition: filter 0.5s ease;
}
.expert-card:hover .expert-img {
    filter: grayscale(0%) contrast(100%);
}

/* Badge */
.trust-badge {
    position: absolute;
    top: 20px;
    /* Standard links, wird im HTML überschrieben falls nötig */
    background: rgba(11, 12, 18, 0.9);
    backdrop-filter: blur(8px);
    border: 1px solid var(--accent);
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 50px;
    z-index: 5;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.badge-icon { color: var(--accent); font-size: 14px; }
.badge-text { color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }

/* Zitat-Karte (Rechtsbündig ausgerichtet) */
.expert-quote-card {
    position: absolute;
    background: var(--card-strong);
    padding: 24px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    z-index: 6;
    max-width: 85%;
}

/* Spezielle Klasse für "Bild Links -> Zitat nach rechts überlappend" */
.expert-quote-card.right-aligned {
    bottom: -25px;
    right: -25px; /* Ragt nach rechts raus zum Text */
    border-left: none; 
    border-right: 3px solid var(--accent); /* Akzentlinie jetzt rechts zum Text */
}

/* Unterschrift */
.signature {
    font-family: cursive; /* Oder eine Google Font wie 'Dancing Script' laden */
    font-size: 22px;
    color: var(--muted);
    opacity: 0.7;
    transform: rotate(-4deg);
}

/* Mobile Anpassung */
@media (max-width: 992px) {
    .expert-quote-card.right-aligned {
        position: relative;
        bottom: auto;
        right: auto;
        width: 100%;
        max-width: 100%;
        margin-top: -20px;
        border-right: none;
        border-left: 3px solid var(--accent); /* Mobil wieder Standard links */
    }
    
    /* Auf Mobile drehen wir die Order oft um (Bild oben, Text unten) - das macht das Grid automatisch */
}

/* ================= Prefix "bis zu" für KPIs ================= */
.prefix-upto::before {
    content: "bis zu ";
    font-size: 0.4em; /* Deutlich kleiner als die Zahl */
    font-weight: 600;
    margin-right: 6px;
    vertical-align: middle; /* Mittig zur Zahl ausgerichtet */
    opacity: 0.8;
}

/* Mobile Anpassung: Falls es auf dem Handy zu breit wird, brechen wir um */
@media (max-width: 480px) {
    .prefix-upto::before {
        display: block; /* "bis zu" steht dann ÜBER der Zahl */
        font-size: 14px;
        line-height: 1;
        margin-bottom: 4px;
    }
}

/* ================= Über Uns / Zig-Zag Optimierungen ================= */

/* Zitat-Karte für "Bild Rechts"-Layout (ragt nach links zum Text) */
.expert-quote-card.left-aligned {
    bottom: -25px;
    left: -25px;
    border-left: 3px solid var(--accent);
    border-right: none;
}

/* Mobile Re-Ordering: Damit auf dem Handy immer das Bild OBEN ist */
@media (max-width: 992px) {
    .rating-grid-integrated.reverse-mobile {
        display: flex;
        flex-direction: column-reverse; /* Dreht die Reihenfolge um */
        gap: 48px;
    }
    
    /* Reset der Zitat-Karten auf Mobile */
    .expert-quote-card.left-aligned {
        position: relative;
        bottom: auto;
        left: auto;
        margin-top: -20px;
        width: 100%;
    }
}

/* ================= Social Media Icons (Natural Colors) ================= */
.social-links {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
}

.social-links a {
    display: block;
    line-height: 0;
    transition: transform 0.3s ease;
}

.social-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    
    /* KEIN FILTER MEHR: Icons zeigen ihre natürliche Farbe */
    /* Wir lassen sie voll deckend (opacity 1), damit sie maximal strahlen */
    
    transition: transform 0.3s ease;
}

/* Hover Effekt: Nur noch die leichte Bewegung nach oben */
.social-links a:hover {
    transform: translateY(-3px);
    /* Optional: Wenn du willst, dass sie beim Hover noch heller strahlen: */
    /* filter: brightness(1.2); */
}

/* ================= Gründer Duo Section ================= */

.duo-grid {
    display: grid;
    /* Mobile First: Alles untereinander */
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
}

/* Desktop: 3 Spalten (Bild | Text | Bild) */
@media (min-width: 992px) {
    .duo-grid {
        /* Die mittlere Spalte (Text) bekommt etwas mehr Platz (1.4fr) */
        grid-template-columns: 1fr 1.4fr 1fr;
        gap: 64px;
    }
}

/* Text-Spalte in der Mitte */
.duo-col-text {
    text-align: center;
    padding: 0 16px;
}

.duo-divider {
    height: 1px;
    width: 80px;
    background: var(--accent);
    margin: 32px auto; /* Zentriert */
    opacity: 0.5;
}

/* Bilder-Spalten */
.expert-card.compact {
    max-width: 380px;
    margin: 0 auto;
}

.duo-name {
    margin-top: 20px;
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    text-align: center;
}

.duo-role {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    text-align: center;
    margin-top: 4px;
}

/* Mobile Order: Wir wollen Text oben, dann die Bilder? 
   Oder Bild-Text-Bild? Standard ist OK (Simon, Text, Yannick).
   Falls du mobil erst den Text willst, nutze dies: */
@media (max-width: 992px) {
    .duo-col-text {
        order: -1; /* Text rutscht ganz nach oben */
        margin-bottom: 24px;
    }
    .duo-col-img {
        margin-bottom: 24px;
    }
}