/* MEYNEXA — gemeinsames Stylesheet für alle Seiten
   Farb- und Schriftwerte bewusst an dog-emporio.de angelehnt (echte Marke
   unter dem Dach von MEYNEXA), siehe sessions/pdp-referenz-diamondcube.html
   und sessions/button-system-aktuell.php im Projekt dog-emporio: Blau
   #0071BC, Dunkelblau #0d2d44, Schrift Mulish. */

/* Mulish lokal, seit 08.10.2026. Vorher per @import von Google geladen, das
   uebertraegt bei jedem Besuch die IP an Google und ist in Deutschland seit
   dem Muenchner Urteil 2022 abmahnfaehig. Google liefert Mulish als variable
   Schrift, eine Datei deckt 400 bis 900 ab (30 KB, Latin-Zeichensatz, reicht
   fuer Deutsch mit Umlauten und Eurozeichen). Lizenz: SIL Open Font License. */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('fonts/mulish-latin.woff2') format('woff2');
}

:root {
  --bg: #ffffff;
  --bg-2: #f7f8f9;
  --bg-3: #ffffff;
  --blue: #0071bc;
  --blue-light: #2f93d6;
  --blue-tint: #eaf4fb;
  --blue-tint-border: #d4e9f4;
  --blue-dim: rgba(0, 113, 188, 0.18);
  --ink: #1f1f1f;
  --text: #25282b;
  --text-muted: #6b7280;
  --text-faint: #9aa0a8;
  --border: #e4e7eb;
  --border-soft: #f0f2f5;
  --navy: #0d2d44;
  --paper: #f5f1e8;
  --radius: 16px;
  --shadow: 0 20px 50px rgba(13, 45, 68, 0.10);
  --maxw: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 110px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Mulish', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, .grotesk {
  font-family: 'Mulish', system-ui, sans-serif;
  font-weight: 900;
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}

p { margin: 0 0 1em; color: var(--text-muted); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 800;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--blue);
}

.accent { color: var(--blue); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(120deg, var(--blue-light), var(--blue));
  color: #ffffff;
  box-shadow: 0 10px 26px rgba(0, 113, 188, 0.28);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(0, 113, 188, 0.36); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: rgba(31, 31, 31, 0.18);
}
.btn-ghost:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-2px); }
.btn-sm { padding: 10px 20px; font-size: 0.85rem; border-radius: 8px; }

.cta-banner .btn-ghost { color: var(--paper); border-color: rgba(245, 241, 232, 0.3); }
.cta-banner .btn-ghost:hover { border-color: var(--blue-light); color: var(--blue-light); }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 16px 0;
  transition: background 0.35s ease, padding 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(245, 246, 248, 0.88);
  backdrop-filter: blur(14px);
  padding: 10px 0;
  border-bottom-color: var(--border);
  box-shadow: 0 8px 30px rgba(13, 45, 68, 0.06);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; }

.logo { display: flex; align-items: center; gap: 10px; line-height: 1; }
/* Echtes Logo seit 19.09.2026, loest das gezeichnete Haus-Symbol samt
   Schriftzug ab. Die Datei ist die komplette Wort-Bild-Marke inklusive
   Claim, deshalb steht daneben kein Text mehr, der sich sonst doppeln
   wuerde. Quelle: Projekte\meynexa\LOGO\logo-web-transparent.PNG, 233x225px. */
/* Groesse am 19.09.2026 von 52 auf 68 px erhoeht, weil Wortmarke und Claim
   INNERHALB des Kreises sitzen: bei 52 px war der Name nur noch rund 30 px
   breit und damit unlesbar. Damit der Kopf dadurch nicht wuchtig wird, ist
   im Gegenzug die Polsterung von 22 auf 16 px gekuerzt, unterm Strich waechst
   er nur um wenige Pixel. Beim Scrollen und auf dem Telefon kleiner.
   Saubere Loesung waere ein Querformat (Kreis links, Schriftzug rechts),
   das braucht aber die Vektordatei, siehe Brand Kit Abschnitt 3. */
.logo-bild { height: 68px; width: auto; display: block; transition: height 0.35s ease; }
.site-header.is-scrolled .logo-bild { height: 52px; }
.logo-text { display: flex; flex-direction: column; gap: 3px; }
.logo-word {
  font-family: 'Mulish', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.logo-sub {
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.nav { display: flex; align-items: center; gap: 40px; }
.nav-links { display: flex; gap: 34px; font-size: 0.92rem; font-weight: 500; }
.nav-links a { position: relative; color: var(--ink); opacity: 0.78; transition: opacity 0.2s ease, color 0.2s ease; }
.nav-links a::after {
  content: "";
  position: absolute; left: 0; bottom: -6px;
  width: 0; height: 2px;
  background: var(--blue);
  transition: width 0.25s ease;
}
.nav-links a:hover, .nav-links a.active { opacity: 1; color: var(--blue); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }

.nav-cta { display: flex; align-items: center; gap: 22px; }

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.menu-toggle span { width: 24px; height: 2px; background: var(--ink); transition: transform 0.25s ease, opacity 0.25s ease; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding: 140px 0 100px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 50% at 85% 0%, rgba(0, 113, 188, 0.10), transparent 60%),
    linear-gradient(160deg, #ffffff 0%, #eef1f6 55%, #f5f6f8 100%);
}
/* width/height 100% sind hier Pflicht, nicht Kosmetik: ein Canvas ist ein
   ersetztes Element und zieht seine Layoutgroesse sonst aus den Attributen
   width/height, die das Skript setzt. Ohne diese Zeile fuettert sich die
   Groesse selbst (Skript setzt Attribut -> Element waechst -> Skript misst
   groesser -> ...) und der Canvas laeuft in wenigen Schritten ins Absurde. */
.hero-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1; opacity: 0.75; pointer-events: none;
}
.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 70% 60% at 50% 38%, transparent 35%, #f5f6f8 100%),
    linear-gradient(180deg, transparent 55%, #f5f6f8 100%);
  pointer-events: none;
}
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(rgba(0,113,188,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,113,188,0.06) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 65% 60% at 70% 20%, black 0%, transparent 70%);
  pointer-events: none;
}

.hero-inner { position: relative; z-index: 2; max-width: 780px; }
.hero-inner[data-parallax] { will-change: transform; }

.hero h1 { font-size: clamp(2.3rem, 4.8vw, 3.9rem); margin: 22px 0 24px; }
.hero h1 .accent-word { color: var(--blue); position: relative; }
.hero p.lead { font-size: 1.14rem; max-width: 580px; margin-bottom: 34px; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 60px; }

.hero-stats {
  display: flex;
  gap: 44px;
  flex-wrap: wrap;
  padding-top: 30px;
  border-top: 1px solid var(--border);
}
.hero-stat { display: flex; flex-direction: column; gap: 4px; }
.hero-stat .num { font-family: 'Mulish', sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--ink); }
.hero-stat .label { font-size: 0.82rem; color: var(--text-muted); }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1.is-visible { transition-delay: 0.1s; }
.reveal-delay-2.is-visible { transition-delay: 0.22s; }
.reveal-delay-3.is-visible { transition-delay: 0.34s; }

/* ---------- Sections ---------- */
section { position: relative; padding: 110px 0; }
.section-head { max-width: 640px; margin-bottom: 60px; }
.section-head h2 { font-size: clamp(1.85rem, 3.2vw, 2.6rem); margin: 16px 0 18px; }
.section-alt { background: var(--bg-2); }

/* Marken-Hub: große, klickbare Kacheln statt kleiner Karten,
   angelehnt an die Aufteilung von jp-performance.de (Tile-Hub für mehrere
   Marken unter einem Dach). */
.brand-hub {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}
.brand-hub-tile {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  padding: 30px 34px 34px;
  color: #fff;
  isolation: isolate;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.brand-hub-tile:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(13, 45, 68, 0.22); }
.brand-hub-tile.tile-dogemporio { background: radial-gradient(circle at 85% 0%, rgba(255,255,255,0.16), transparent 55%), linear-gradient(150deg, var(--blue) 0%, var(--navy) 100%); }
.brand-hub-tile.tile-marktus { background: radial-gradient(circle at 85% 0%, rgba(255,255,255,0.12), transparent 55%), linear-gradient(150deg, var(--navy) 0%, #1c1f26 100%); }
/* KidToys ist nur geplant: helle, gedaempfte Kachel in derselben Reihe, damit
   das Raster voll ist, aber der Unterschied zu den laufenden Bereichen auf den
   ersten Blick sichtbar bleibt. */
.brand-hub-tile.tile-kidtoys-geplant {
  background: linear-gradient(150deg, #f3f6f9 0%, #e6ecf2 100%);
  border: 1px dashed var(--border);
  color: var(--text);
}
.brand-hub-tile::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(ellipse 80% 70% at 100% 0%, black 0%, transparent 65%);
}
.brand-hub-tile.tile-kidtoys-geplant::before { background-image: linear-gradient(rgba(13,45,68,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(13,45,68,0.06) 1px, transparent 1px); }
/* Stempel oben im Fluss, Inhalt unten: margin-bottom:auto schiebt alles
   Weitere nach unten, egal wie lang der Titel wird. */
.brand-hub-tile .status {
  align-self: flex-start; margin-bottom: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 800; padding: 5px 13px; border-radius: 999px;
  background: rgba(255,255,255,0.16); backdrop-filter: blur(6px);
  color: #fff;
}
.brand-hub-tile.tile-kidtoys-geplant .status { background: rgba(13,45,68,0.08); color: #565d6b; }
.brand-hub-tile .tile-inhalt { margin-top: 28px; }
.brand-hub-tile .icon-big { width: 46px; height: 46px; margin-bottom: 16px; opacity: 0.9; }
.brand-hub-tile .icon-big svg { width: 100%; height: 100%; stroke: #fff; }
.brand-hub-tile.tile-kidtoys-geplant .icon-big svg { stroke: var(--navy); opacity: 0.6; }
.brand-hub-tile h3 { color: #fff; font-size: 1.9rem; line-height: 1.12; margin-bottom: 10px; }
.brand-hub-tile h3.titel-lang { font-size: 1.5rem; }
.brand-hub-tile.tile-kidtoys-geplant h3 { color: var(--ink); }
.brand-hub-tile p { color: rgba(255,255,255,0.82); font-size: 0.98rem; max-width: 420px; margin-bottom: 22px; }
.brand-hub-tile.tile-kidtoys-geplant p { color: var(--text-muted); }
.brand-hub-tile .btn-primary { background: #fff; color: var(--ink); box-shadow: none; }
.brand-hub-tile .btn-primary:hover { background: #fff; opacity: 0.9; }
.brand-hub-tile .tile-note { color: rgba(255,255,255,0.7); font-size: 0.85rem; font-weight: 600; }

@media (max-width: 1100px) {
  .brand-hub { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .brand-hub { grid-template-columns: 1fr; }
}

/* Struktur-Diagramm (Holding -> Marken) */
.structure-diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.structure-root {
  background: var(--navy);
  color: var(--paper);
  border-radius: var(--radius);
  padding: 22px 40px;
  font-family: 'Mulish', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  box-shadow: var(--shadow);
  position: relative;
  z-index: 2;
}
.structure-connector { width: 1px; height: 42px; background: var(--border); }
.structure-branches {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
  width: 100%;
  position: relative;
}
.structure-branches::before {
  content: "";
  position: absolute;
  top: -22px; left: 8.3%; right: 8.3%;
  height: 1px;
  background: var(--border);
}
.brand-card {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 20px;
  text-align: center;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.brand-card::before {
  content: "";
  position: absolute;
  top: -22px; left: 50%;
  width: 1px; height: 22px;
  background: var(--border);
}
.brand-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--blue-dim); }
.brand-card .status {
  display: inline-block;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.brand-card .status.active { background: rgba(58, 140, 74, 0.14); color: #276b34; }
.brand-card .status.founded { background: rgba(0, 113, 188, 0.14); color: var(--blue); }
.brand-card .status.planned { background: rgba(107, 114, 128, 0.14); color: #565d6b; }
.brand-card h3 { font-size: 0.98rem; margin-bottom: 6px; }
.brand-card p { font-size: 0.78rem; margin-bottom: 0; }

/* Brand overview cards (Marken-Seite) */
.brand-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.brand-tile {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px;
  box-shadow: 0 2px 16px rgba(13, 45, 68, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.brand-tile:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--blue-dim); }
.brand-tile .status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.brand-tile .status.active { background: rgba(58, 140, 74, 0.14); color: #276b34; }
.brand-tile .status.founded { background: rgba(0, 113, 188, 0.14); color: var(--blue); }
.brand-tile .status.building { background: rgba(198, 137, 30, 0.14); color: #8a5e12; }
.brand-tile h3 { font-size: 1.5rem; margin-bottom: 12px; }
.brand-tile p { font-size: 0.96rem; }
.brand-tile .brand-meta {
  display: flex; gap: 20px; flex-wrap: wrap;
  margin: 20px 0; padding: 16px 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.brand-tile .brand-meta div { font-size: 0.82rem; color: var(--text-muted); }
.brand-tile .brand-meta strong { display: block; color: var(--ink); font-size: 0.94rem; }
.brand-story {
  background: var(--blue-tint);
  border-left: 3px solid var(--blue);
  border-radius: 0 10px 10px 0;
  padding: 14px 18px;
  margin: 18px 0;
  font-style: italic;
  font-weight: 600;
  color: var(--navy);
  font-size: 0.92rem;
}

/* Marken-Detailseiten: "Was ist die Marke / Zielgruppe & Ziele / Angebot" */
.brand-detail-hero-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 800; padding: 5px 14px; border-radius: 999px;
  margin-bottom: 18px;
}
.brand-detail-hero-status.active { background: rgba(58, 140, 74, 0.14); color: #276b34; }
.brand-detail-hero-status.founded { background: rgba(0, 113, 188, 0.14); color: var(--blue); }
.brand-detail-hero-status.building { background: rgba(198, 137, 30, 0.14); color: #8a5e12; }

.offer-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.offer-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.95rem; color: var(--text); }
.offer-list .mark { color: var(--blue); flex-shrink: 0; margin-top: 2px; }

.goal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.goal-card {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: 0 2px 16px rgba(13, 45, 68, 0.05);
}
.goal-card h3 { font-size: 1.1rem; margin-bottom: 10px; }
.goal-card p { font-size: 0.95rem; margin-bottom: 0; }

@media (max-width: 700px) {
  .offer-list, .goal-grid { grid-template-columns: 1fr; }
}

.planned-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 560px; }
.planned-tile {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 26px 22px;
  background: rgba(0, 113, 188, 0.02);
}
.planned-tile h3 { font-size: 1.02rem; margin-bottom: 8px; }
.planned-tile p { font-size: 0.85rem; margin-bottom: 0; }
.planned-tile .status.planned {
  display: inline-block;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
  background: rgba(107, 114, 128, 0.14); color: #565d6b;
}

/* Werte / Prinzipien */
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.value-card {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 34px 28px;
  box-shadow: 0 2px 16px rgba(13, 45, 68, 0.05);
}
.value-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, rgba(0,113,188,0.16), rgba(0,113,188,0.04));
  margin-bottom: 20px;
}
.value-icon svg { width: 22px; height: 22px; stroke: var(--blue); }
.value-card h3 { font-size: 1.08rem; margin-bottom: 10px; }
.value-card p { font-size: 0.92rem; margin-bottom: 0; }
.value-grid.four { grid-template-columns: repeat(4, 1fr); }
.value-card .proof {
  display: inline-block;
  margin-top: 14px;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--blue);
  background: var(--blue-tint);
  border: 1px solid var(--blue-tint-border);
  padding: 3px 10px;
  border-radius: 999px;
}
@media (max-width: 1080px) {
  .value-grid.four { grid-template-columns: repeat(2, 1fr); }
}

/* Timeline (Über uns) */
.timeline { display: flex; flex-direction: column; gap: 0; }
.timeline-item {
  display: grid;
  grid-template-columns: 120px 1px 1fr;
  gap: 0;
  padding-bottom: 40px;
  position: relative;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item .t-date { font-family: 'Mulish', sans-serif; font-weight: 700; color: var(--blue); font-size: 0.95rem; padding-top: 2px; }
.timeline-item .t-line { display: flex; justify-content: center; }
.timeline-item .t-line::before {
  content: "";
  width: 1px;
  background: var(--border);
}
.timeline-item:not(:last-child) .t-line::before { height: 100%; }
.timeline-item .t-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--blue);
  margin-top: 4px;
  position: relative; z-index: 2;
}
.timeline-item .t-content { padding-left: 26px; padding-top: 0; }
.timeline-item .t-content h3 { font-size: 1.05rem; margin-bottom: 8px; }
.timeline-item .t-content p { font-size: 0.94rem; margin-bottom: 0; }

/* CTA banner — dunkel als Kontrastfläche */
.cta-banner {
  border-radius: 20px;
  padding: 64px 56px;
  background: linear-gradient(135deg, #1f2733, var(--navy) 60%);
  border: 1px solid var(--blue-dim);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.cta-banner::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 85% 20%, rgba(0,113,188,0.28), transparent 55%);
}
.cta-banner h2 { color: var(--paper); font-size: clamp(1.55rem, 3vw, 2.15rem); max-width: 480px; position: relative; }
.cta-banner .cta-actions { position: relative; display: flex; gap: 14px; flex-wrap: wrap; }

/* Footer */
footer { padding: 70px 0 34px; background: var(--navy); color: var(--paper); }
footer p { color: rgba(245, 241, 232, 0.6); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 0.8fr 0.8fr 1fr; gap: 40px; margin-bottom: 50px; }
.footer-links { display: flex; flex-direction: column; gap: 12px; font-size: 0.92rem; }
.footer-links a:hover { color: var(--blue-light); }
.footer-title { font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue-light); margin-bottom: 18px; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.8rem; color: rgba(245, 241, 232, 0.5);
  padding-top: 26px; border-top: 1px solid rgba(245, 241, 232, 0.12);
  flex-wrap: wrap; gap: 10px;
}
.footer-bottom a:hover { color: var(--blue-light); }
.contact-inline { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; margin-bottom: 12px; }
.contact-inline svg { width: 17px; height: 17px; stroke: var(--blue-light); flex-shrink: 0; }

/* Page hero (Marken / Über uns / Kontakt / Rechtstexte) */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: 170px 0 80px;
  background: linear-gradient(160deg, #ffffff 0%, #edf0f5 100%);
  border-bottom: 1px solid var(--border);
}
.page-hero .container { position: relative; z-index: 2; }
/* Je Unterseite ein eigenes Motiv im Kopfbereich, gesteuert ueber das Attribut
   data-motiv und gezeichnet von seitenHeroGrafik() in script.js. width/height
   gehoeren zwingend hierher, siehe wissen\canvas-groesse-und-layout.md. */
.page-hero-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1; opacity: 0.72; pointer-events: none;
}
.page-hero-schleier {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.62) 42%, rgba(255,255,255,0.10) 72%, transparent 100%);
}
.page-hero h1 { font-size: clamp(2rem, 3.8vw, 2.9rem); margin: 16px 0 18px; }
.page-hero p { max-width: 580px; font-size: 1.03rem; }
/* Handy: der Desktop-Abstand von 170 px oben machte den Kopf 507 px hoch fuer
   vier Zeilen Text (gemessen 08.10.2026 auf /kontakt/ bei 375 px). Der feste
   Kopf ist 82 px hoch, mehr als 110 px Abstand braucht es nicht. */
@media (max-width: 640px) {
  .page-hero { padding: 112px 0 48px; }
  .page-hero h1 { font-size: 1.9rem; }
}

/* Kontakt page */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; }
.contact-card {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 34px;
  box-shadow: 0 2px 16px rgba(13, 45, 68, 0.05);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.contact-method {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid var(--border);
  transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
}
.contact-method:hover { border-color: var(--blue-dim); transform: translateX(4px); background: rgba(0,113,188,0.06); }
.contact-method .icon-wrap {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(0,113,188,0.1);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.contact-method .icon-wrap svg { width: 20px; height: 20px; stroke: var(--blue); }
.contact-method .label { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.contact-method .value { font-size: 1.02rem; font-weight: 600; color: var(--ink); }

/* ---------- Rechtstexte ---------- */
.legal-content { max-width: 760px; }
.legal-content h2 { font-size: 1.35rem; margin: 46px 0 14px; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 { font-size: 1.02rem; margin: 26px 0 10px; }
.legal-content p, .legal-content li { color: var(--text-muted); font-size: 0.96rem; }
.legal-content ul { padding-left: 20px; margin: 0 0 1em; }
.legal-content li { margin-bottom: 6px; }
.legal-content a.inline-link { color: var(--blue); text-decoration: underline; }
.legal-content strong { color: var(--text); }
.placeholder-field {
  display: inline-block;
  background: rgba(217, 112, 79, 0.14);
  border: 1px dashed rgba(217, 112, 79, 0.5);
  color: #a13a2a;
  padding: 1px 8px;
  border-radius: 6px;
  font-style: normal;
  font-weight: 600;
  font-size: 0.9em;
}
.legal-callout {
  border: 1px solid rgba(0, 113, 188, 0.35);
  background: rgba(0, 113, 188, 0.06);
  border-radius: var(--radius);
  padding: 22px 26px;
  margin-bottom: 50px;
}
.legal-callout p { color: var(--blue); margin-bottom: 0; font-size: 0.92rem; }
.legal-callout strong { color: var(--blue); }

/* Responsive */
@media (max-width: 980px) {
  .nav-links, .nav-cta .btn-ghost { display: none; }
  .menu-toggle { display: flex; }
  /* .value-grid.four ausdruecklich mitnehmen: die Zweispalten-Regel bei 1080 px
     hat zwei Klassen und schlug diese Einspalten-Regel sonst auch auf dem Handy.
     Ergebnis war ein Raster 228 + 171 px, die Karten liefen aus dem Rahmen
     (gemessen 08.10.2026 bei 375 px, Abschnitt "Was MEYNEXA leistet"). */
  .brand-grid, .value-grid, .value-grid.four { grid-template-columns: 1fr; }
  .structure-branches, .planned-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .contact-grid { grid-template-columns: 1fr; }
  .timeline-item { grid-template-columns: 90px 1px 1fr; }
}
@media (max-width: 620px) {
  /* Auf dem Telefon kleiner, sonst frisst der Kopf zu viel vom Bildschirm. */
  .logo-bild, .site-header.is-scrolled .logo-bild { height: 50px; }
  .structure-branches, .planned-grid { grid-template-columns: repeat(2, 1fr); }
  .structure-branches::before { display: none; }
  .brand-card::before { display: none; }
  .cta-banner { padding: 44px 28px; }
  .hero { padding-top: 120px; }
  .timeline-item { grid-template-columns: 1fr; gap: 6px; }
  .timeline-item .t-line { display: none; }
  .timeline-item .t-content { padding-left: 0; }
}

/* ---------- Form ---------- */
.form-card {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 38px;
  box-shadow: 0 2px 16px rgba(13, 45, 68, 0.05);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { margin-bottom: 20px; display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 0.82rem; color: var(--text-muted); letter-spacing: 0.02em; }
.field label .req { color: var(--blue); }
.field input, .field select, .field textarea {
  background: rgba(13, 45, 68, 0.035);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 13px 15px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color 0.25s ease, background 0.25s ease;
  width: 100%;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue); background: rgba(0, 113, 188, 0.05);
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230071bc' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 40px;
}
.honeypot-field { position: absolute; left: -9999px; opacity: 0; height: 0; }

.form-submit { width: 100%; justify-content: center; margin-top: 4px; position: relative; }
.form-submit .spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.4); border-top-color: #ffffff;
  display: none; animation: spin 0.7s linear infinite;
}
.form-submit.is-loading .spinner { display: inline-block; }
.form-submit.is-loading .btn-label { opacity: 0.75; }
@keyframes spin { to { transform: rotate(360deg); } }

.form-message {
  margin-top: 18px; padding: 14px 18px; border-radius: 10px; font-size: 0.9rem;
  display: none; align-items: flex-start; gap: 10px;
}
.form-message.is-visible { display: flex; }
.form-message.success { background: rgba(58, 140, 74, 0.1); border: 1px solid rgba(58, 140, 74, 0.35); color: #276b34; }
.form-message.error { background: rgba(217, 112, 79, 0.1); border: 1px solid rgba(217, 112, 79, 0.4); color: #a13a2a; }
.form-message a { text-decoration: underline; }

.privacy-note { font-size: 0.78rem; color: var(--text-muted); margin-top: 14px; }

@media (max-width: 620px) {
  .form-row { grid-template-columns: 1fr; }
  .form-card { padding: 26px; }
}

/* Mobile nav panel */
.mobile-nav {
  position: fixed; inset: 0;
  background: var(--navy);
  z-index: 99;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 30px;
  transform: translateY(-100%);
  transition: transform 0.4s ease;
}
.mobile-nav.is-open { transform: translateY(0); }
.mobile-nav a { font-family: 'Mulish', sans-serif; font-size: 1.5rem; color: var(--paper); }
.mobile-nav a:hover { color: var(--blue-light); }

/* ---------- Visualisierungen auf marke-marktus.html ---------- */
/* Zwei handgebaute Canvas-Grafiken statt Deko-Bildern: ein laufender Funnel
   und ein Analyse-Netz. Beide erklaeren einen Punkt aus dem Leistungsumfang,
   statt ihn nur zu behaupten. Gezeichnet von marktusFunnel() und
   marktusRadar() in script.js.
   WICHTIG bei beiden Canvas: width/height gehoeren ins CSS, sonst zieht das
   Element seine Layoutgroesse aus den Attributen, die das Skript setzt, und
   schaukelt sich auf. Siehe wissen\canvas-groesse-und-layout.md. */

.analyse-karte,
.funnel-block {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 44px;
  align-items: center;
  margin-top: 40px;
  padding: 36px 38px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 2px 18px rgba(13, 45, 68, 0.05);
}
.analyse-karte h3,
.funnel-kopf h3 { font-size: 1.35rem; margin: 12px 0 14px; }
.analyse-karte p,
.funnel-kopf p { margin-bottom: 0; }

.analyse-liste {
  list-style: none; margin: 20px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px; font-size: 0.93rem;
}
.analyse-liste li { display: flex; align-items: flex-start; gap: 9px; }
.analyse-liste .mark { color: var(--blue); flex-shrink: 0; }

.analyse-figur,
.funnel-figur { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.analyse-figur figcaption,
.funnel-figur figcaption {
  font-size: 0.76rem; color: var(--text-muted); text-align: center;
}
.analyse-netz { width: 100%; height: 330px; display: block; }
.funnel-netz { width: 100%; height: 340px; display: block; }

@media (max-width: 860px) {
  .analyse-karte,
  .funnel-block { grid-template-columns: 1fr; gap: 28px; padding: 28px 24px; }
  .analyse-netz, .funnel-netz { height: 300px; }
}

/* ---------- Buendel auf marke-marktus.html ---------- */
/* Vier Karten, die das lange Leistungsspektrum buendeln. Vorher stand das
   Angebot nur als Liste da und als Zusatzpaket auf der Kundenseite von
   MK Consulting, aber nirgends gebuendelt auf der eigenen Seite. */
.buendel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.buendel-karte {
  position: relative;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 26px 28px;
  box-shadow: 0 2px 16px rgba(13, 45, 68, 0.05);
}
.buendel-nr {
  font-size: 0.78rem; font-weight: 900; letter-spacing: 0.14em;
  color: var(--blue); opacity: 0.55;
}
.buendel-karte h3 { font-size: 1.18rem; margin: 10px 0 8px; }
.buendel-kurz { font-size: 0.92rem; margin-bottom: 16px; }
.buendel-karte .service-list {
  /* list-style und padding muessen hier ausdruecklich weg: sonst zeichnet der
     Browser seinen eigenen Aufzaehlungspunkt UND den Haken aus dem Markup. */
  list-style: none; padding: 0;
  grid-template-columns: 1fr; gap: 9px; margin: 0; font-size: 0.89rem;
}
.buendel-karte .service-list li { display: flex; align-items: flex-start; gap: 8px; }
.buendel-karte .service-list .mark { color: var(--blue); flex-shrink: 0; }
.buendel-fuss {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
  margin-top: 26px; padding: 28px 32px;
  background: linear-gradient(140deg, rgba(0,113,188,0.08), rgba(0,113,188,0.02)), var(--bg-3);
  border: 1px solid var(--blue-dim); border-radius: var(--radius);
}
.buendel-fuss h3 { font-size: 1.15rem; margin-bottom: 8px; }
.buendel-fuss p { margin-bottom: 0; max-width: 620px; }
@media (max-width: 1000px) { .buendel-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .buendel-grid { grid-template-columns: 1fr; } }

/* ---------- Bildmarke als 3D-Koerper (index.html) ---------- */
/* Die Buehne hat eine feste Hoehe im CSS, three.js richtet sich danach. Nie
   umgekehrt, siehe wissen\canvas-groesse-und-layout.md. Das flache Logo liegt
   darunter als Ersatz, falls WebGL ausfaellt: dann bleibt es stehen, sobald
   die Szene laeuft, wird es ausgeblendet. */
/* Helle Buehne, Vorgabe Tim 03.10.2026 ("es wirkt sehr dunkel"). Die erste
   Fassung stand in einem dunklen Raum, weil poliertes Metall seine Umgebung
   spiegelt. Das geht auch hell: die Spiegelumgebung in logo3d.js ist jetzt ein
   helles Studio, und Welle und Schriftzug sind dunkler eingestellt, damit sie
   auf dieser Flaeche nicht verschwinden. */
.logo3d-abschnitt {
  background:
    radial-gradient(880px 520px at 72% 46%, rgba(47, 147, 214, 0.13) 0%, rgba(47, 147, 214, 0) 70%),
    linear-gradient(170deg, #f7fafc 0%, #eef3f8 60%, #e7eef5 100%);
}
.logo3d-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.logo3d-text h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin: 16px 0 18px; }
.logo3d-buehne {
  position: relative;
  height: 420px;
  display: flex; align-items: center; justify-content: center;
}
.logo3d-buehne canvas { display: block; width: 100%; height: 100%; }
.logo3d-ersatz {
  position: absolute;
  width: 190px; height: auto;
  transition: opacity 0.6s ease;
}
.logo3d-buehne.laeuft .logo3d-ersatz { opacity: 0; }
.logo3d-buehne.ist-standbild .logo3d-ersatz { opacity: 1; }
@media (max-width: 900px) {
  .logo3d-block { grid-template-columns: 1fr; gap: 28px; }
  .logo3d-buehne { height: 320px; }
}

/* ------------------------------------------------------------------
   Contact Form 7 im WordPress-Theme, seit 08.10.2026. Das Plugin wickelt
   jedes Feld in ein span und haengt eigene Meldungen an. Die Regeln hier
   lassen das Formular aussehen wie das fruehere statische. Auf der
   statischen Seite greifen sie nicht, dort gibt es diese Klassen nicht.
   ------------------------------------------------------------------ */
.wpcf7-form-control-wrap { display: block; }
.wpcf7-form .field + .field, .wpcf7-form .form-row + .field { margin-top: 18px; }
.wpcf7-form .form-submit { margin-top: 22px; }
.wpcf7-not-valid-tip {
  display: block; margin-top: 6px;
  font-size: 0.85rem; color: #b42318;
}
.wpcf7-form .wpcf7-not-valid { border-color: #b42318; }
.wpcf7-response-output {
  margin: 18px 0 0 !important; padding: 12px 16px !important;
  border-radius: 10px; border: 1px solid var(--border) !important;
  font-size: 0.95rem;
}
.wpcf7-form.sent .wpcf7-response-output { background: #eef8f1; border-color: #b7e0c4 !important; color: #1d6b3a; }
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output { background: #fdf0ee; border-color: #f1b7b0 !important; color: #8f2318; }
.wpcf7-spinner { margin-left: 10px; }
/* Die Rechenaufgabe ist eine Spamsperre, bewusst klein gehalten */
.feld-pruefung label { font-size: 0.9rem; color: var(--text-muted); }
.feld-pruefung input { max-width: 140px; }


/* ------------------------------------------------------------------
   Cookie-Hinweis, seit 08.10.2026. Gleiches Muster wie bei MK Consulting:
   wird per Skript eingehaengt, Auswahl liegt 30 Tage im localStorage.
   ------------------------------------------------------------------ */
.cookie-banner {
  position: fixed; left: 24px; right: auto; bottom: 24px; z-index: 60;
  max-width: 440px;
  background: #fff; color: var(--text);
  border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 20px 50px rgba(13, 45, 68, 0.18);
  padding: 22px 24px;
  display: flex; flex-direction: column; gap: 14px;
  transform: translateY(24px); opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.cookie-banner.is-visible { transform: translateY(0); opacity: 1; }
.cookie-banner p { font-size: 0.86rem; line-height: 1.5; margin: 0; }
.cookie-banner .cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 620px) { .cookie-banner { left: 12px; right: 12px; bottom: 12px; max-width: none; padding: 18px; } }


/* ------------------------------------------------------------------
   Referenzen auf der Consulting-Seite, seit 08.10.2026. Hochkantbilder
   (Speisekarte) und Querbilder (Websites, Werkzeuge) im selben Raster: das
   Bildfeld hat eine feste Hoehe, hochkante Bilder stehen auf einer ruhigen
   Flaeche, Querbilder fuellen das Feld und werden oben angeschnitten.
   ------------------------------------------------------------------ */
.referenz-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.referenz-karte {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.referenz-karte:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.referenz-bild {
  height: 240px;
  background: #0e1a26;
  overflow: hidden;
  display: flex; align-items: flex-start; justify-content: center;
}
.referenz-bild img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
/* Hochkante Seiten stehen auf heller Flaeche, Tim 08.10.2026: "der schwarze
   Hintergrund ist nicht cool". Die Karte selbst ist dunkel, der helle Grund
   laesst sie wie ein aufgelegtes Buch wirken. */
.referenz-bild.hochkant { background: linear-gradient(160deg, #f3f6f9, #e3e9f0); padding: 18px 0 0; }
.referenz-bild.hochkant img {
  width: auto; height: 100%; object-fit: contain; object-position: top;
  box-shadow: 0 14px 30px rgba(13, 45, 68, 0.28);
}
/* Vorher-Nachher: zwei Bilder nebeneinander mit Stempel oben links */
.referenz-bild.vergleich { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--border); }
/* height 100 Prozent, sonst bleibt die figure so hoch wie ihr Bild und das
   Feld darunter leer (so gesehen beim ersten Einbau) */
.referenz-bild.vergleich figure { position: relative; margin: 0; height: 100%; min-height: 0; overflow: hidden; background: #0e1a26; }
.referenz-bild.vergleich img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.referenz-bild.vergleich figcaption {
  position: absolute; top: 10px; left: 10px;
  font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 800;
  padding: 4px 9px; border-radius: 999px; color: #fff;
  background: rgba(13, 45, 68, 0.78);
}
.referenz-bild.vergleich figure:last-child figcaption { background: var(--blue); }
.referenz-text { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; }
.referenz-art {
  font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 800;
  color: var(--blue);
}
.referenz-text h3 { font-size: 1.1rem; margin: 0; }
.referenz-text p { font-size: 0.92rem; color: var(--text-muted); margin: 0; }
.referenz-fuss { margin-top: auto; padding-top: 8px; font-size: 0.78rem; color: var(--text-faint); }
@media (max-width: 1000px) { .referenz-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .referenz-grid { grid-template-columns: 1fr; } .referenz-bild { height: 210px; } }