/* ─── CSS CUSTOM PROPERTIES ─────────────────────────────────── */
:root {
  --color-bg:            #0D1B3E;
  --color-bg-deep:       #08112A;
  --color-bg-raised:     #122045;
  --color-bg-card:       rgba(255,255,255,0.04);
  --color-border:        rgba(255,255,255,0.10);
  --color-border-accent: rgba(192,200,216,0.3);
  --color-text:          #E8ECF4;
  --color-text-muted:    #8A96A8;
  --color-silver-1:      #C0C8D8;
  --color-silver-2:      #E8ECF4;
  --color-silver-3:      #A8B4C8;
  --color-cta-bg:        #FFFFFF;
  --color-cta-text:      #0D1B3E;
  --gradient-silver:     linear-gradient(135deg, #A8B4C8, #E8ECF4, #C0C8D8);
  --gradient-hero:       linear-gradient(135deg, #08112A 0%, #0D1B3E 50%, #0F2152 100%);
  --shadow-card:         0 4px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.06);
  --shadow-glow:         0 0 30px rgba(192,200,216,0.15);
  --radius-card:         12px;
  --radius-btn:          6px;
  --radius-pill:         999px;
  --transition:          0.3s ease;
  --font-sans:           'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --color-logo-bg:       #001D44;   /* exakter Hintergrund von MohxKai_logo.png */

  /* Light-section palette (used for the social-proof & about sections) */
  --color-bg-light:        #F7F8FA;
  --color-bg-light-card:   #FFFFFF;
  --color-border-on-light: rgba(13,27,62,0.10);
  --color-border-accent-on-light: rgba(13,27,62,0.22);
  --color-text-on-light:       #0D1B3E;
  --color-text-muted-on-light: #5C6679;
  --shadow-card-light:     0 4px 24px rgba(13,27,62,0.06), 0 0 0 1px rgba(13,27,62,0.04);
}

/* ─── RESET & BASE ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
ul { list-style: none; }

/* ─── UTILITIES ──────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.section-padding { padding: 96px 0; }

.gradient-text {
  background: var(--gradient-silver);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--color-silver-3);
  margin-bottom: 16px;
  display: block;
}

.section-heading {
  font-family: var(--font-sans);
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.1;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

.section-sub {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 300;
  color: var(--color-text-muted);
  max-width: 520px;
  /* ohne diese Mittelung klebt der Kasten links, waehrend Label und
     Ueberschrift ueber die volle Breite zentriert sind - der Text wirkt versetzt */
  margin: 0 auto;
  line-height: 1.7;
}

/* ─── REVEAL ANIMATIONS ──────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ─── NAVIGATION ─────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 64px;
  display: flex;
  align-items: center;
  /* Exakt die Hintergrundfarbe des Logos, damit dessen Kanten unsichtbar bleiben.
     Deckend und ohne Blur - jede Transparenz wuerde das Hero-Video durchscheinen
     lassen und das Logo-Rechteck wieder sichtbar machen. */
  background: var(--color-logo-bg);
  transition: box-shadow var(--transition);
}

.nav.scrolled {
  box-shadow: 0 1px 0 var(--color-border);
}

.nav__inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.nav__logo img {
  height: 40px;
  width: auto;
  display: block;
}

.nav__links {
  display: none;
  gap: 32px;
}

.nav__links a {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--color-silver-1);
  transition: color var(--transition);
}

.nav__links a:hover { color: var(--color-text); }

.nav__right { display: flex; align-items: center; gap: 12px; }

.btn-primary {
  background: var(--color-cta-bg);
  color: var(--color-cta-text);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 10px 22px;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
  white-space: nowrap;
}

.btn-primary:hover {
  background: transparent;
  color: var(--color-silver-2);
  border-color: var(--color-border-accent);
  box-shadow: var(--shadow-glow);
}

.btn-secondary {
  background: transparent;
  color: var(--color-silver-1);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 10px 22px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--color-border-accent);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.btn-secondary:hover {
  background: rgba(192,200,216,0.08);
  color: var(--color-text);
  border-color: var(--color-silver-1);
}

/* Hamburger */
.nav__hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  padding: 4px;
}

.nav__hamburger span {
  display: block;
  height: 1.5px;
  background: var(--color-silver-1);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
  transform-origin: center;
}

.nav__hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav__hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile overlay */
.nav__overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--color-bg-deep);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.nav__overlay.open {
  opacity: 1;
  pointer-events: all;
}

.nav__overlay a {
  font-family: var(--font-sans);
  font-size: clamp(1.6rem, 5vw, 2.3rem);
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: -0.015em;
  transition: color var(--transition);
}

.nav__overlay a:hover { color: var(--color-silver-1); }

@media (min-width: 768px) {
  .nav { height: 72px; }
  .nav__logo img { height: 44px; }
  .nav__hamburger { display: none; }
  .nav__links { display: flex; }
}

/* ─── HERO ───────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-hero);
  overflow: hidden;
  padding-top: 64px;
}

/* Hintergrund-Video */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  /* Die Datei ist 2,18:1 in einem 16:9-Rahmen, hat also oben und unten je 9,2 %
     schwarzen Balken. Die Vergroesserung schneidet sie weg. */
  transform: scale(1.23);
}

/* Abdunklung fuer Lesbarkeit von Headline, Nav und CTAs */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(8, 17, 42, 0.88) 0%,
      rgba(8, 17, 42, 0.55) 38%,
      rgba(8, 17, 42, 0.72) 100%),
    radial-gradient(ellipse at 50% 50%,
      rgba(8, 17, 42, 0.20) 0%,
      rgba(8, 17, 42, 0.75) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
}

/* Animated blobs */
.hero__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.07;
  pointer-events: none;
}

.hero__blob--1 {
  width: 600px; height: 600px;
  background: #1E3A8A;
  top: -10%; left: -10%;
  animation: blobFloat1 18s ease-in-out infinite;
}

.hero__blob--2 {
  width: 500px; height: 500px;
  background: #162D5E;
  bottom: -5%; right: -5%;
  animation: blobFloat2 22s ease-in-out infinite;
}

.hero__blob--3 {
  width: 350px; height: 350px;
  background: #0F2152;
  top: 40%; left: 55%;
  animation: blobFloat3 15s ease-in-out infinite;
}

@keyframes blobFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(60px, 40px) scale(1.05); }
  66% { transform: translate(-30px, 60px) scale(0.97); }
}

@keyframes blobFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40% { transform: translate(-50px, -40px) scale(1.08); }
  70% { transform: translate(30px, 30px) scale(0.95); }
}

@keyframes blobFloat3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-40px, 50px) scale(1.06); }
}

.hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 24px;
  max-width: 900px;
  width: 100%;
}

.hero__pre {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--color-silver-3);
  margin-bottom: 24px;
  opacity: 0;
  animation: fadeInUp 0.8s ease forwards 0.3s;
}

.hero__headline {
  margin-bottom: 24px;
}

.hero__headline .line1 {
  display: block;
  font-family: var(--font-sans);
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--color-text);
  line-height: 1.15;
  opacity: 0;
  animation: fadeInUp 0.8s ease forwards 0.5s;
}

.hero__headline .line2 {
  display: block;
  font-family: var(--font-sans);
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-top: 4px;
  background: var(--gradient-silver);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0;
  animation: fadeInUp 0.8s ease forwards 0.65s;
}

.hero__body {
  font-family: var(--font-sans);
  font-size: clamp(15px, 2vw, 18px);
  font-weight: 300;
  color: var(--color-text-muted);
  max-width: 560px;
  line-height: 1.75;
  margin-bottom: 40px;
  opacity: 0;
  animation: fadeInUp 0.8s ease forwards 0.85s;
}

.hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  opacity: 0;
  animation: fadeInUp 0.8s ease forwards 1.05s;
}

.hero__cta-row .btn-primary {
  font-size: 14px;
  padding: 14px 32px;
  border-radius: var(--radius-btn);
}

.hero__cta-row .btn-secondary {
  font-size: 14px;
  padding: 14px 32px;
}

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

/* ─── STATS BAR ──────────────────────────────────────────────── */
.stats-bar {
  background: var(--color-bg-deep);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 32px 0;
}

.stats-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 40px;
  flex: 1;
  min-width: 140px;
}

.stat-item + .stat-item {
  border-left: 1px solid var(--color-border);
}

.stat-item__number {
  font-family: var(--font-sans);
  font-size: 1.9rem;
  font-weight: 700;
  background: var(--gradient-silver);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* Kennzahlen ohne Zahl (Ort, Leistungsversprechen) */
.stat-item__number--text {
  font-size: 1.05rem;
  line-height: 1.35;
  text-align: center;
}

.stat-item__label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: center;
}

/* ─── SERVICES ───────────────────────────────────────────────── */
.services { background: var(--color-bg); }

.services__header {
  text-align: center;
  margin-bottom: 64px;
}

.services__header .section-sub {
  margin: 0 auto;
  text-align: center;
}

.services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.service-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 32px;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.service-card:hover {
  border-color: var(--color-border-accent);
  box-shadow: var(--shadow-glow);
  transform: translateY(-4px);
}

.service-card__icon {
  width: 40px;
  height: 40px;
  margin-bottom: 20px;
  color: var(--color-silver-1);
}

.service-card__icon svg {
  width: 40px;
  height: 40px;
}

.service-card__title {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 10px;
  letter-spacing: -0.015em;
}

.service-card__desc {
  font-size: 14px;
  font-weight: 300;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: 18px;
}

.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--color-silver-1);
  border-bottom: 1px solid var(--color-border-accent);
  padding-bottom: 2px;
  transition: color var(--transition), border-color var(--transition), gap var(--transition);
}

.service-card__link:hover {
  color: var(--color-text);
  border-color: var(--color-silver-1);
  gap: 10px;
}

@media (min-width: 768px) {
  .services__grid { grid-template-columns: 1fr 1fr; gap: 20px; }
}

@media (min-width: 1024px) {
  .services__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ─── PORTFOLIO ──────────────────────────────────────────────── */
.portfolio { background: var(--color-bg-deep); }

.portfolio__header {
  text-align: center;
  margin-bottom: 48px;
}

.portfolio__header .section-sub {
  margin: 0 auto;
  text-align: center;
}

/* Tabs */
.tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 48px;
}

.tab-btn {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 9px 20px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-accent);
  color: var(--color-silver-1);
  background: transparent;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  cursor: pointer;
  white-space: nowrap;
}

.tab-btn:hover {
  background: rgba(192,200,216,0.08);
  color: var(--color-text);
}

.tab-btn.active {
  background: var(--color-cta-bg);
  color: var(--color-cta-text);
  border-color: var(--color-cta-bg);
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Phone mockups */
.phones-scroll {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 16px 4px 24px;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
  -webkit-overflow-scrolling: touch;
}

.phones-scroll::-webkit-scrollbar { height: 4px; }
.phones-scroll::-webkit-scrollbar-track { background: transparent; }
.phones-scroll::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 2px; }

.phone-mockup {
  flex-shrink: 0;
  width: 180px;
  aspect-ratio: 9/16;
  border-radius: 24px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.18);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
  position: relative;
  background: #000;
}

.phone-mockup video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Phone notch */
.phone-mockup::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 6px;
  background: rgba(0,0,0,0.7);
  border-radius: 3px;
  z-index: 10;
}

.phone-mockup__label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 12px;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  font-size: 10px;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
  font-family: var(--font-sans);
  letter-spacing: 0.05em;
}

/* Imagefilme / Websites / Eventfilme — MacBook mockup grid */
.imagefilme-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

/* Querformate paarweise nebeneinander statt einzeln in voller Breite */
@media (min-width: 760px) {
  .imagefilme-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}

.macbook-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.macbook {
  width: 100%;
  background: #1e1e20;
  border-radius: 10px 10px 4px 4px;
  overflow: hidden;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.08), 0 24px 64px rgba(0,0,0,0.55);
}

.macbook__topbar {
  height: 24px;
  background: #2c2c2e;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(0,0,0,0.4);
}

.macbook__camera {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #46484c;
}

.macbook__display {
  background: #000;
  aspect-ratio: 16/10;
  overflow: hidden;
}

.macbook__display video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.macbook__display img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.macbook__chin {
  height: 12px;
  background: #2c2c2e;
  border-top: 1px solid rgba(255,255,255,0.04);
}

.macbook-card__label {
  margin-top: 18px;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text);
  text-align: center;
  letter-spacing: -0.01em;
}

/* Photo grid — gallery print frames */
.photo-grid {
  columns: 1;
  gap: 16px;
}

/* Fruehere Polaroid-Optik (weisser Rahmen mit dickerem Fuss) ersetzt durch
   eine ruhige Galerie-Darstellung: randlos, gleiche Rundung, dezenter Hover. */
.photo-print,
.galerie__bild {
  display: block;
  margin: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: rgba(255,255,255,0.03);
  transition: transform var(--transition), box-shadow var(--transition);
}

/* Die Beispiele neben dem Text behalten ihr natuerliches Format,
   nur die Galeriekacheln werden auf ein einheitliches Hochformat beschnitten. */
.photo-print img {
  width: 100%;
  height: auto;
  display: block;
}

.galerie__bild img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.galerie__bild:hover,

@media (min-width: 768px) {
  .imagefilme-grid { grid-template-columns: 1fr 1fr; gap: 56px; }
  .photo-grid { columns: 2; }
}

@media (min-width: 1024px) {
  .photo-grid { columns: 3; }
}

/* Einzelstueck bleibt einspaltig, wird aber nicht ueber die halbe
   Rasterbreite hinaus aufgeblasen */
.imagefilme-grid--single {
  grid-template-columns: 1fr;
  max-width: 560px;
  margin: 0 auto;
}

/* ─── MARQUEE / CLIENT LOGOS ─────────────────────────────────── */
.marquee-section {
  /* etwas dunkler als die uebrigen hellen Sektionen, damit sich die Logos absetzen */
  background: #ECEEF3;
  padding: 48px 0;
  border-top: 1px solid var(--color-border-on-light);
  border-bottom: 1px solid var(--color-border-on-light);
  overflow: hidden;
}

.marquee-section__label {
  text-align: center;
  margin-bottom: 32px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--color-text-muted-on-light);
}

.marquee-wrapper {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
  mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
}

.marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 64px;
  animation: marqueeScroll 32s linear infinite;
}

.marquee-track:hover { animation-play-state: paused; }

@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Einheitliche Box mit einem Seitenverhaeltnis nahe dem Median der Logos:
   breite Wortmarken werden breitenbegrenzt, hohe/quadratische hoehenbegrenzt.
   Voraussetzung sind die *_trim.png ohne eingebackenen Rand. */
.marquee-track img {
  height: 56px;
  width: 140px;
  object-fit: contain;
  flex-shrink: 0;
  opacity: 0.85;
  transition: opacity var(--transition), transform var(--transition);
}

.marquee-track img:hover {
  opacity: 1;
  transform: scale(1.04);
}

/* ─── ABOUT ──────────────────────────────────────────────────── */
.about { background: var(--color-bg-light); }

.about--light .section-label { color: var(--color-text-muted-on-light); }
.about--light .section-heading { color: var(--color-text-on-light); }

.about__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 64px;
  align-items: center;
}

.about__text .section-heading {
  margin-bottom: 8px;
}

.about__subheading {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 400;
  color: #2A4A8A;
  margin-bottom: 24px;
  letter-spacing: -0.01em;
}

.about__body {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--color-text-muted-on-light);
  margin-bottom: 32px;
}

.about__checklist {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 32px;
}

.about__check {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-on-light);
}

.about__check svg {
  flex-shrink: 0;
  color: #2A4A8A;
}


.about__photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.about__photos img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  box-shadow: var(--shadow-card-light);
}

@media (min-width: 1024px) {
  .about__inner {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
  }
}

/* ─── CTA SECTION ────────────────────────────────────────────── */
.cta-section {
  background: linear-gradient(to bottom, var(--color-bg-deep), #060e20);
  padding: 120px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-section::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 300px;
  background: radial-gradient(ellipse, rgba(30,58,138,0.12) 0%, transparent 70%);
  pointer-events: none;
}

.cta-section__content { position: relative; z-index: 1; }

.cta-section__heading {
  font-family: var(--font-sans);
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 16px;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.cta-section__body {
  font-size: 17px;
  font-weight: 300;
  color: var(--color-text-muted);
  max-width: 480px;
  margin: 0 auto 40px;
  line-height: 1.7;
}

.cta-section__btn {
  display: inline-block;
  background: var(--color-cta-bg);
  color: var(--color-cta-text);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 16px 40px;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
  margin-bottom: 24px;
}

.cta-section__btn:hover {
  background: transparent;
  color: var(--color-silver-2);
  border-color: var(--color-border-accent);
  box-shadow: var(--shadow-glow);
}

.cta-section__insta {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--color-silver-3);
  letter-spacing: 0.03em;
  transition: color var(--transition);
}

.cta-section__insta:hover { color: var(--color-silver-1); }

/* ─── FOOTER ─────────────────────────────────────────────────── */
.footer {
  background: var(--color-bg-deep);
  border-top: 1px solid var(--color-border);
  padding: 64px 0 0;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  padding-bottom: 48px;
}

.footer__brand img {
  width: 72px;
  height: auto;
  margin-bottom: 16px;
}

.footer__brand p {
  font-size: 13px;
  font-weight: 300;
  color: var(--color-text-muted);
  line-height: 1.6;
  max-width: 220px;
}

.footer__col-title {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-silver-3);
  margin-bottom: 20px;
}

.footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__col ul a {
  font-size: 14px;
  font-weight: 300;
  color: var(--color-text-muted);
  transition: color var(--transition);
}

.footer__col ul a:hover { color: var(--color-text); }

.footer__bottom {
  border-top: 1px solid var(--color-border);
  padding: 20px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.footer__bottom p {
  font-size: 12px;
  font-weight: 300;
  color: var(--color-text-muted);
  letter-spacing: 0.03em;
}

@media (min-width: 768px) {
  .footer__grid { grid-template-columns: 1.5fr 1fr 1fr; }
  .footer__bottom { justify-content: space-between; text-align: left; }
}

/* ─── COMING SOON PANEL ─────────────────────────────────────── */
.coming-soon-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 80px 24px;
  border: 1px dashed var(--color-border-accent);
  border-radius: var(--radius-card);
  background: var(--color-bg-card);
}

.coming-soon-icon {
  color: var(--color-silver-3);
  margin-bottom: 24px;
  opacity: 0.6;
}

.coming-soon-title {
  font-family: var(--font-sans);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}

.coming-soon-body {
  font-size: 15px;
  font-weight: 300;
  color: var(--color-text-muted);
  max-width: 420px;
  line-height: 1.7;
}

/* ─── SECTION DIVIDER ────────────────────────────────────────── */
.section-divider {
  height: 1px;
  background: var(--color-border);
  margin: 0;
}

/* ─── MOBILE NAV ADJUSTMENTS ─────────────────────────────────── */
@media (min-width: 768px) {
  .services__grid { gap: 20px; }
  .phones-scroll { gap: 24px; }
  .phone-mockup { width: 200px; }
}

@media (min-width: 1024px) {
  .phone-mockup { width: 220px; }
}

/* ─── PAGE HERO (Unterseiten) ────────────────────────────────── */
.page-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-hero);
  overflow: hidden;
  padding: 140px 24px 88px;
  text-align: center;
}

.page-hero__content {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

/* Sitzt oben links statt mittig - zentriert lief er sonst optisch mit der
   Zeile "Leistung · MOHXKAI" zusammen, beide sind kleine gesperrte Versalien. */
.page-hero__back {
  position: absolute;
  top: 92px;
  left: 24px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-silver-3);
  transition: color var(--transition);
}

@media (min-width: 768px) {
  .page-hero__back { top: 104px; left: 40px; }
}

.page-hero__back:hover { color: var(--color-text); }

.page-hero__title {
  font-family: var(--font-sans);
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.1;
  margin-bottom: 20px;
  letter-spacing: -0.025em;
}

.page-hero__body {
  font-family: var(--font-sans);
  font-size: clamp(15px, 2vw, 18px);
  font-weight: 300;
  color: var(--color-text-muted);
  line-height: 1.75;
  margin-bottom: 32px;
}

/* ─── FEATURES / "Was wir bieten" ─────────────────────────────── */
.features-section { background: var(--color-bg-light); }

.features-section .section-label { color: var(--color-text-muted-on-light); }
.features-section .section-heading { color: var(--color-text-on-light); }
.features-section .section-sub { color: var(--color-text-muted-on-light); }

.features-section__header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 64px;
}

.features-section__header .section-sub { margin: 0 auto; }

.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

.feature-item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.feature-item__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: var(--shadow-card-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2A4A8A;
}

.feature-item__title {
  font-family: var(--font-sans);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text-on-light);
  margin-bottom: 6px;
  letter-spacing: -0.015em;
}

.feature-item__desc {
  font-size: 14px;
  font-weight: 300;
  color: var(--color-text-muted-on-light);
  line-height: 1.7;
}

@media (min-width: 768px) {
  .features-grid { grid-template-columns: 1fr 1fr; gap: 40px 48px; }
}

/* ─── PORTFOLIO PREVIEW (Unterseiten) ─────────────────────────── */
.portfolio-preview { background: var(--color-bg-deep); }

/* ─── GRAIN OVERLAY ──────────────────────────────────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  opacity: 0.025;
}

/* ─── SCROLL ANCHOR OFFSET ───────────────────────────────────── */
[id] { scroll-margin-top: 80px; }

/* ─── KONFIGURATOR ───────────────────────────────────────────── */
.config {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto;
  text-align: left;
}

.config__step {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-bg-card);
  padding: 28px 24px 24px;
  margin-bottom: 20px;
}

.config__legend {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--color-text);
  padding: 0;
  margin-bottom: 20px;
}

.config__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-accent);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-silver-1);
}

/* Schritt 1 — zwei grosse Auswahlkarten */
.config__audience {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 600px) {
  .config__audience { grid-template-columns: 1fr 1fr; }
}

.config-card {
  display: flex;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}

.config-card:hover { border-color: var(--color-border-accent); }

.config-card input { margin-top: 3px; accent-color: var(--color-silver-1); flex-shrink: 0; }

.config-card:has(input:checked) {
  border-color: var(--color-border-accent);
  background: rgba(255,255,255,0.05);
}

.config-card__body { display: flex; flex-direction: column; gap: 4px; }

.config-card__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
}

.config-card__desc {
  font-size: 13px;
  font-weight: 300;
  color: var(--color-text-muted);
  line-height: 1.55;
}

/* Schritt 2 — Leistungsgruppen */
.config__group + .config__group {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--color-border);
}

.config__group-title {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-silver-3);
  margin-bottom: 12px;
}

.config-opt {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.config-opt:last-child { border-bottom: 0; }

.config-opt.is-disabled { opacity: 0.4; }

.config-opt__main {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  cursor: pointer;
  flex: 1;
  min-width: 0;
}

.config-opt.is-disabled .config-opt__main { cursor: not-allowed; }

.config-opt__main input {
  margin-top: 3px;
  accent-color: var(--color-silver-1);
  flex-shrink: 0;
}

.config-opt__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 14.5px;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.4;
}

.config-opt__text em {
  font-style: normal;
  font-size: 12.5px;
  font-weight: 300;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.config-opt__side {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.config-opt__price {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-silver-1);
  white-space: nowrap;
}

.config-opt__qty {
  background: var(--color-bg-deep);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 13px;
  padding: 3px 6px;
  cursor: pointer;
}

/* Schritt 3 — Ergebnis */
.config__result { background: rgba(255,255,255,0.055); }

.config__list { list-style: none; margin: 0 0 18px; padding: 0; }

.config__list li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 14px;
  font-weight: 300;
  color: var(--color-text);
}

.config__list-empty {
  justify-content: flex-start !important;
  color: var(--color-text-muted) !important;
  border-bottom: 0 !important;
}

.config__note-label {
  display: block;
  font-size: 13px;
  font-weight: 300;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

.config__note {
  width: 100%;
  background: var(--color-bg-deep);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  padding: 12px 14px;
  resize: vertical;
  transition: border-color var(--transition);
}

.config__note:focus {
  outline: none;
  border-color: var(--color-border-accent);
}

.config__disclaimer {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--color-text-muted);
  margin: 14px 0 22px;
}

.config__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.config__actions .cta-section__btn { margin-bottom: 0; }

.cta-section__insta-wrap { margin-top: 32px; position: relative; z-index: 1; }

/* Ankersprung nicht unter den fixierten Balken laufen lassen */
section[id] { scroll-margin-top: 80px; }

/* ─── LEISTUNGSUMFANG & PREISE (Unterseiten) ─────────────────── */
.scope-section { background: var(--color-bg); }

.scope-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  max-width: 960px;
  margin: 0 auto;
  align-items: start;
}

@media (min-width: 860px) {
  .scope-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

.scope-col__title {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-silver-3);
  margin-bottom: 16px;
}

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

.scope-list li {
  position: relative;
  padding: 0 0 0 26px;
  margin-bottom: 12px;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--color-text-muted);
}

.scope-list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 8px;
  width: 9px;
  height: 5px;
  border-left: 1.5px solid var(--color-silver-1);
  border-bottom: 1.5px solid var(--color-silver-1);
  transform: rotate(-45deg);
}

.scope-list li strong {
  font-weight: 500;
  color: var(--color-text);
}

.price-box {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-bg-card);
  padding: 26px 24px;
}

.price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.price-row:last-of-type { border-bottom: 0; }

.price-row__name {
  font-size: 14.5px;
  font-weight: 300;
  color: var(--color-text);
  line-height: 1.45;
}

.price-row__name em {
  display: block;
  font-style: normal;
  font-size: 12.5px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.price-row__value {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-silver-1);
  white-space: nowrap;
}

.price-note {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--color-text-muted);
  margin: 18px 0 20px;
}

.price-box .btn-primary {
  display: inline-block;
  font-size: 14px;
  padding: 13px 26px;
}

/* ─── TEAMFOTO MIT BESCHRIFTUNG ──────────────────────────────── */
.team-photo { margin: 0; }

.team-photo__frame { position: relative; }

.team-photo__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;          /* entspricht dem Foto, schneidet also nichts ab */
  object-fit: cover;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card-light);
}

/* --x/--y ist der Punkt, auf den die Pfeilspitze zeigt.
   Das Schild wird vom Anker weg nach oben-aussen geschoben. */
.team-tag {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #FFFFFF;
  pointer-events: none;
  text-shadow: 0 1px 12px rgba(0,0,0,0.65), 0 1px 3px rgba(0,0,0,0.5);
}

.team-tag--moh {
  transform: translate(-100%, -100%);
  align-items: flex-end;
}

.team-tag--kai {
  transform: translate(0, -100%);
  align-items: flex-start;
}

.team-tag__name {
  font-family: var(--font-sans);
  font-size: clamp(1.25rem, 3.4vw, 1.9rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
}

.team-tag__arrow {
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.55));
}

/* Der KAI-Pfeil zeigt spiegelverkehrt nach links unten */
.team-tag--kai .team-tag__arrow { transform: scaleX(-1); }

/* Der KAI-Pfeil laeuft von rechts oben zur Spitze links unten. Der Name wird
   deshalb um die halbe Pfeilbreite nach rechts geschoben, damit er ueber dem
   oberen Ende des Pfeils steht und nicht ueber dessen Spitze. */
.team-tag--kai .team-tag__name { margin-left: 31px; }

@media (max-width: 520px) {
  .team-tag__arrow { width: 44px; height: 34px; }
  .team-tag--kai .team-tag__name { margin-left: 22px; }
}

/* ─── UNTERSEITEN: TEXT UND ARBEITSPROBEN NEBENEINANDER ──────── */
.features-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
}

@media (min-width: 1024px) {
  .features-split { grid-template-columns: 1.05fr 0.95fr; gap: 64px; }
  /* im schmalen Textbereich bleiben die Punkte einspaltig */
  .features-split .features-grid { grid-template-columns: 1fr; }
}

/* Textspalte durchgehend linksbuendig, nicht erst ab der Breakpoint-Grenze */
.features-split .features-section__header {
  text-align: left;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 40px;
}

.features-split .section-sub { margin-left: 0; }

.features-split__media {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr;
}

/* Einzelbeispiel nimmt die volle Breite */
.features-split__media--single { grid-template-columns: 1fr; }

/* Querformate (MacBook) laufen immer untereinander, sonst werden sie winzig */
.features-split__media--stacked { grid-template-columns: 1fr; }

.features-split__media .phone-mockup {
  width: 100%;
  /* heller Hintergrund: der weisse Rand aus dem dunklen Kontext traegt hier nicht */
  border-color: rgba(13,27,62,0.15);
  box-shadow: 0 12px 32px rgba(13,27,62,0.18);
}

/* Auf hellem Grund braucht der Hover einen helleren Schatten als in den dunklen Sektionen */
.features-split__media .photo-print,
.features-split__media .galerie__bild {
  box-shadow: 0 12px 32px rgba(13,27,62,0.14), 0 0 0 1px rgba(13,27,62,0.06);
}

.features-split__media .galerie__bild:hover {
  box-shadow: 0 18px 40px rgba(13,27,62,0.20), 0 0 0 1px rgba(13,27,62,0.08);
}

.features-split__media .macbook-card__label,
.features-split__media .example-label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--color-text-muted-on-light);
  text-align: center;
  margin-top: 10px;
}


/* ─── TEAMSEITE ──────────────────────────────────────────────── */
.team-photo--wide {
  max-width: 560px;
  margin: 0 auto 56px;
}

.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 860px;
  margin: 0 auto;
}

@media (min-width: 720px) {
  .team-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

.team-grid--wide { max-width: 960px; }

/* Drei Porträtkarten nebeneinander, sobald genug Breite da ist */
@media (min-width: 900px) {
  .team-grid--wide { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

.team-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border-on-light);
  border-radius: var(--radius-card);
  background: var(--color-bg-light-card);
  padding: 26px 24px;
}

.team-card__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-btn);
  margin-bottom: 20px;
  display: block;
}

.team-card--photo { padding-top: 24px; }

.team-card__name {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-text-on-light);
}

.team-card__role {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-text-muted-on-light);
  margin: 6px 0 14px;
}

.team-card__text {
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--color-text-muted-on-light);
}

/* Variante fuer die dunkle Sektion */
.team-card--dark {
  border-color: var(--color-border);
  background: var(--color-bg-card);
}

.team-card--dark .team-card__name { color: var(--color-text); }
.team-card--dark .team-card__role,
.team-card--dark .team-card__text { color: var(--color-text-muted); }

.scope-section .features-section__header { margin-bottom: 48px; }

/* ─── KONFIGURATOR: KONTAKTFELDER UND VERSAND ────────────────── */
.config__fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 20px 0 18px;
}

@media (min-width: 620px) {
  .config__fields { grid-template-columns: 1fr 1fr; }
  /* Telefon steht allein in der zweiten Zeile */
  .config__field:last-child { grid-column: 1 / -1; }
}

.config__field { display: flex; flex-direction: column; gap: 6px; }

.config__field-label {
  font-size: 13px;
  font-weight: 300;
  color: var(--color-text-muted);
}

.config__field-label abbr {
  text-decoration: none;
  color: var(--color-silver-3);
}

.config__input {
  background: var(--color-bg-deep);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 300;
  padding: 11px 14px;
  transition: border-color var(--transition);
}

.config__input:focus {
  outline: none;
  border-color: var(--color-border-accent);
}

.config__actions button.cta-section__btn {
  font-family: var(--font-sans);
  cursor: pointer;
}

.config__actions button:disabled {
  opacity: 0.55;
  cursor: default;
}

.config__status {
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.6;
  min-height: 1.2em;
}

.config__status--pending { color: var(--color-text-muted); }
.config__status--ok      { color: #8FD3A8; }
.config__status--error   { color: #E8A0A0; }

.config__maillink {
  color: var(--color-silver-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Honigtopf: fuer Besucher unsichtbar, aber nicht display:none,
   damit ihn ausfuellende Bots nicht merken */
.config__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ─── ÜBER UNS: STANDORT UND TEAM-BUTTON ─────────────────────── */
/* Bewusst unterschiedlich gebaut: die Standortzeile ist reine Information
   ohne Rahmen, der Button eine gefuellte Flaeche. Vorher sahen beide wie
   dieselbe Outline-Pille aus. */
.about__location {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 400;
  color: var(--color-text-muted-on-light);
  margin-bottom: 30px;
}

.about__location svg {
  flex-shrink: 0;
  color: #2A4A8A;
}

.about__team-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--color-text-on-light);
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 14px 26px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--color-text-on-light);
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}

.about__team-btn svg { transition: transform var(--transition); }

.about__team-btn:hover {
  background: transparent;
  color: var(--color-text-on-light);
  box-shadow: 0 6px 20px rgba(13,27,62,0.14);
}

.about__team-btn:hover svg { transform: translateX(3px); }

/* ─── FOTOS NACH RUBRIKEN ────────────────────────────────────── */
.foto-section { background: var(--color-bg-deep); }

.foto-rubriken {
  display: flex;
  flex-direction: column;
  gap: 48px;
  max-width: 1000px;
  margin: 0 auto;
}

.foto-rubrik__kopf { margin-bottom: 18px; }

.foto-rubrik__titel {
  font-family: var(--font-sans);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--color-text);
  margin-bottom: 6px;
}

.foto-rubrik__text {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--color-text-muted);
  max-width: 560px;
}

.foto-rubrik__bilder {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 640px) {
  .foto-rubrik__bilder { grid-template-columns: repeat(2, 1fr); }
}

/* Rubriken mit mehr Aufnahmen laufen breiter, damit keine langen Kolonnen entstehen */
@media (min-width: 960px) {
  .foto-rubrik__bilder { grid-template-columns: repeat(4, 1fr); }
}

.foto-rubrik__bilder .photo-print { margin: 0; }

.foto-rubrik__bilder img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}

/* Rubrik ohne Aufnahmen bleibt sichtbar, damit das Angebot vollstaendig ist */
.photo-platzhalter {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-btn);
  background: rgba(255,255,255,0.02);
}

.photo-platzhalter span {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ─── GALERIE (Portfolio-Tab) ────────────────────────────────── */
.galerie {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  max-width: 1080px;
  margin: 0 auto;
}

@media (min-width: 760px) {
  .galerie { grid-template-columns: repeat(4, 1fr); gap: 18px; }
}

/* Einheitliches Hochformat, damit die Reihen trotz gemischter
   Originalformate sauber durchlaufen */
.galerie__bild {
  aspect-ratio: 4 / 5;
}

/* Rubriken auf der Fotoseite */
.foto-rubrik__bilder .galerie__bild { aspect-ratio: 4 / 5; }

.foto-rubrik__leer {
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--color-text-muted);
  padding: 18px 0 4px;
  border-top: 1px solid var(--color-border);
}

/* Pflichtlinks in der Fusszeile */
.footer__legal {
  display: flex;
  gap: 20px;
}

.footer__legal a {
  color: var(--color-text-muted);
  transition: color var(--transition);
}

.footer__legal a:hover { color: var(--color-text); }

/* ─── RECHTSSEITEN ───────────────────────────────────────────── */
.legal { background: var(--color-bg); }

.legal__inner {
  max-width: 760px;
  margin: 0 auto;
}

.legal h2 {
  font-family: var(--font-sans);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--color-text);
  margin: 40px 0 12px;
}

.legal h2:first-of-type { margin-top: 0; }

.legal h3 {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 24px 0 8px;
}

.legal p,
.legal li {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--color-text-muted);
}

.legal p { margin-bottom: 14px; }

.legal ul {
  margin: 0 0 16px 20px;
  padding: 0;
}

.legal li { margin-bottom: 6px; }

.legal a {
  color: var(--color-silver-1);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal address {
  font-style: normal;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--color-text-muted);
  margin-bottom: 14px;
}

/* Noch einzutragende Angaben deutlich sichtbar machen */
.legal .todo {
  background: rgba(232,160,160,0.14);
  border-bottom: 1px dashed #E8A0A0;
  color: #E8A0A0;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 400;
}

.legal__stand {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
  font-size: 13px;
  color: var(--color-text-muted);
}

/* Pflichthinweis nach Art. 13 DSGVO direkt an der Eingabe */
.config__privacy {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--color-text-muted);
  margin: -8px 0 20px;
}

.config__privacy a {
  color: var(--color-silver-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ─── EINWILLIGUNGS-BANNER ───────────────────────────────────── */
.consent {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 2000;
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-card);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
  padding: 22px 24px;
  /* startet unsichtbar und wird eingeblendet, sobald er im Dokument haengt */
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.consent.is-sichtbar {
  opacity: 1;
  transform: translateY(0);
}

.consent__inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

@media (min-width: 820px) {
  .consent { left: 24px; right: 24px; bottom: 24px; }
  .consent__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; }
}

.consent__title {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin-bottom: 6px;
}

.consent__text p {
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--color-text-muted);
  max-width: 620px;
}

.consent__text a {
  color: var(--color-silver-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex-shrink: 0;
}

.consent__btn {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 12px 24px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--color-cta-bg);
  background: var(--color-cta-bg);
  color: var(--color-cta-text);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.consent__btn:hover {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border-accent);
}

/* Ablehnen ist gleichwertig sichtbar, nur ohne Fuellung */
.consent__btn--ghost {
  background: transparent;
  color: var(--color-silver-1);
  border-color: var(--color-border-accent);
}

.consent__btn--ghost:hover {
  background: rgba(255,255,255,0.06);
  color: var(--color-text);
}

.footer__legal button {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: inherit;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--transition);
}

.footer__legal button:hover { color: var(--color-text); }