/* Tönjes Consulting — zentrales Stylesheet (rev 2) */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/inter-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/inter-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/inter-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #ffffff;
  --bg-soft: #f7f9fa;
  --bg-soft-2: #f0f2f4;
  --ink: #021e1e;
  --ink-soft: #1a4a4a;
  --ink-mid: #3a5050;
  --cyan: #76bdd3;
  --cyan-soft: #9dd1e2;
  --cyan-tint: rgba(118, 189, 211, 0.15);
  --cyan-text: #2f7d98; /* kontrastsicheres Cyan für Text auf hellem Grund (4,66:1) */
  --grey: #a0aab0;
  --line: #e5e9eb;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Inter", -apple-system, system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* Unterstrichene Buzzwords: gleiche Optik wie zuvor, beim Hereinscrollen
   von links nach rechts animiert (JS setzt .marked; ohne JS sofort sichtbar). */
mark {
  background-color: transparent;
  background-image: linear-gradient(transparent 60%, var(--cyan) 60%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0 3px;
  color: inherit;
}
html.js mark { background-size: 0% 100%; }
html.js mark.marked { background-size: 100% 100%; transition: background-size 0.3s linear; }
.hero h1 mark { padding: 0 4px; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 40px; }

/* ===== Header ===== */
.header { position: relative; }
.logo-anchor {
  position: absolute;
  left: 0;
  top: 0;
  width: 360px;
  height: 102px;
  background: var(--ink);
  clip-path: path("M 0 0 L 350 0 Q 360 0, 352 7 L 248 95 Q 240 102, 230 102 L 0 102 Z");
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 56px;
  z-index: 5;
}
.logo-anchor img { height: 56px; width: auto; }

.topbar { background: var(--ink); color: var(--cyan-soft); padding: 10px 0; }
.topbar .row { display: flex; justify-content: flex-end; align-items: center; padding-left: 360px; }
.topbar .meta { font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--cyan-soft); }

.navbar { padding: 18px 0; border-bottom: 1px solid var(--line); }
.navbar .row { display: flex; justify-content: space-between; align-items: center; padding-left: 260px; }
.navbar .menu { display: flex; gap: 28px; font-size: 14px; font-weight: 500; color: var(--ink); }
.navbar .menu a { padding: 4px 0; border-bottom: 2px solid transparent; transition: border-color 0.2s; cursor: pointer; }
.navbar .menu a:hover { border-bottom-color: var(--cyan); }

/* Dropdown-Menü (Desktop: Hover, Tastatur: focus-within) */
.header { z-index: 100; }
.menu-item { position: relative; }
.menu-item > a { display: inline-flex; align-items: center; gap: 6px; }
.menu-item .caret { transition: transform 0.2s; }
.menu-item:hover .caret, .menu-item:focus-within .caret { transform: rotate(180deg); }
.menu-item::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px; }
.menu-item .dropdown {
  position: absolute; top: calc(100% + 14px); left: -18px; min-width: 320px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px;
  box-shadow: 0 18px 44px rgba(2, 30, 30, 0.14);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 60;
}
.menu-item:hover .dropdown, .menu-item:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.menu-item .dropdown a { display: block; padding: 10px 14px; border-radius: 8px; border-bottom: none; }
.menu-item .dropdown a:hover { background: var(--bg-soft); border-bottom: none; }
.menu-item .dropdown .all { margin-top: 6px; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; padding-top: 12px; color: var(--ink-soft); font-size: 13px; }

.btn {
  display: inline-block;
  background: var(--ink);
  color: #fff;
  padding: 10px 18px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s;
  cursor: pointer;
}
.btn:hover { background: var(--ink-soft); }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); padding: 9px 16px; }
.btn-ghost:hover { background: var(--ink); color: #fff; }
.btn-cyan { background: var(--cyan); color: var(--ink); }
.btn-cyan:hover { background: var(--cyan-soft); }

/* ===== Hero ===== */
.hero { padding: 70px 0 80px; }
.hero .grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: center; }
.kicker { display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: var(--ink-soft); font-weight: 700; margin-bottom: 16px; }
.kicker::before { content: ""; display: inline-block; width: 32px; height: 2px; background: var(--cyan); vertical-align: middle; margin-right: 12px; }
.hero h1 { font-size: 50px; line-height: 1.05; margin: 0 0 22px; font-weight: 700; letter-spacing: -1.4px; }
.hero .lead { font-size: 17px; line-height: 1.6; color: var(--ink-mid); max-width: 560px; margin-bottom: 30px; }
.hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.feature-card { background: var(--ink); border-radius: 16px; padding: 32px 28px; color: var(--bg-soft-2); position: relative; overflow: hidden; }
.feature-card::after { content: ""; position: absolute; bottom: -60px; right: -60px; width: 200px; height: 200px; border-radius: 50%; background: rgba(118, 189, 211, 0.18); }
.feature-card .badge { display: inline-block; background: var(--cyan); color: var(--ink); padding: 4px 12px; border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; margin-bottom: 18px; }
.feature-card .card-glass { position: relative; z-index: 1; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; padding: 18px 20px; }
.feature-card h3 { font-size: 20px; line-height: 1.3; margin: 0 0 12px; font-weight: 600; position: relative; z-index: 1; }
.feature-card p { font-size: 13px; color: var(--cyan-soft); line-height: 1.55; margin: 0 0 18px; position: relative; z-index: 1; }
.feature-card .read-more { position: relative; z-index: 1; color: var(--cyan); font-size: 13px; font-weight: 600; }

/* ===== Sections ===== */
.section { padding: 80px 0; }
.section-soft { background: var(--bg-soft); }
.section-dark { background: var(--ink); color: var(--bg-soft-2); }
.section-head { margin-bottom: 48px; max-width: 720px; }
.section-head h2 { font-size: 36px; line-height: 1.15; margin: 0 0 12px; font-weight: 700; letter-spacing: -0.8px; }
.section-head h1 { font-size: 40px; line-height: 1.12; margin: 0 0 12px; font-weight: 700; letter-spacing: -1px; }
.section-head .sub { font-size: 16px; color: var(--ink-mid); margin: 0; }
.section-head-center { margin-left: auto; margin-right: auto; text-align: center; }

/* ===== Services ===== */
/* Karten-Grids: Spaltenzahl kommt als --grid-cols aus dem Template (grid_cols()
   in helpers.php), damit sich Reihen gleichmäßig füllen — 6 Karten = 3+3, nicht 4+2 */
.services { display: grid; grid-template-columns: repeat(var(--grid-cols, 4), 1fr); gap: 24px; }
.service { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 28px 24px; transition: all 0.2s; }
.service:hover { border-color: var(--cyan); transform: translateY(-3px); box-shadow: 0 14px 30px -16px rgba(2, 30, 30, 0.18); }
.service .ico { width: 44px; height: 44px; border-radius: 10px; background: var(--cyan-tint); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; color: var(--ink-soft); }
.service h3 { font-size: 17px; margin: 0 0 8px; font-weight: 600; }
.service p { font-size: 14px; color: var(--ink-mid); margin: 0 0 16px; line-height: 1.55; }
.service .more { color: var(--ink); font-size: 13px; font-weight: 600; border-bottom: 2px solid var(--cyan); padding-bottom: 1px; cursor: pointer; }

/* ===== Why ===== */
.why .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.why .visual { aspect-ratio: 4/3; border-radius: 16px; background: linear-gradient(135deg, var(--ink) 0%, var(--ink-soft) 100%); position: relative; overflow: hidden; display: flex; align-items: flex-end; padding: 32px; color: #fff; }
.why .visual::before { content: ""; position: absolute; top: -100px; right: -100px; width: 280px; height: 280px; border-radius: 50%; background: rgba(118, 189, 211, 0.2); }
.why .visual::after { content: ""; position: absolute; bottom: -80px; left: -80px; width: 220px; height: 220px; border-radius: 50%; background: rgba(118, 189, 211, 0.1); }
.why .visual-text { position: relative; z-index: 1; max-width: 320px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px; padding: 22px 26px; }
.why .visual-text .num { font-size: 64px; font-weight: 700; line-height: 1; color: var(--cyan); letter-spacing: -2px; }
.why .visual-text .txt { font-size: 15px; color: var(--cyan-soft); margin-top: 8px; }
.why h2 { font-size: 36px; line-height: 1.15; margin: 0 0 18px; font-weight: 700; letter-spacing: -0.8px; }
.why p { font-size: 16px; line-height: 1.65; color: var(--ink-mid); margin: 0 0 16px; }
.why .points { margin-top: 28px; padding: 0; list-style: none; }
.why .points li { display: flex; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; }
.why .points li:last-child { border-bottom: 1px solid var(--line); }
.why .points .check { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--cyan-tint); color: var(--ink-soft); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; }

/* ===== Cases ===== */
.cases { display: grid; grid-template-columns: repeat(var(--grid-cols, 3), 1fr); gap: 24px; }
.case { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 28px 24px; }
.case .industry { font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--ink-soft); font-weight: 700; margin-bottom: 12px; }
.case .industry::before { content: ""; display: inline-block; width: 18px; height: 2px; background: var(--cyan); vertical-align: middle; margin-right: 8px; }
.case h3 { font-size: 18px; margin: 0 0 14px; font-weight: 600; line-height: 1.35; }
.case .quote { font-size: 14px; color: var(--ink-mid); font-style: italic; margin: 0 0 16px; line-height: 1.6; padding-left: 14px; border-left: 2px solid var(--cyan); }
.case .who { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-soft); }
.case .who-logo { background: var(--bg-soft); border-radius: 4px; padding: 4px 10px; font-weight: 700; }
.case .metrics { display: flex; gap: 18px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.case .metrics div { font-size: 12px; color: var(--ink-mid); }
.case .metrics .num { display: block; font-size: 20px; font-weight: 700; color: var(--ink); }

/* ===== Team ===== */
.person .photo { aspect-ratio: 4/5; border-radius: 12px; overflow: hidden; background: var(--bg-soft); margin-bottom: 16px; }
.person .photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.person h4 { font-size: 17px; margin: 0 0 4px; font-weight: 600; }
.person .role { font-size: 13px; color: var(--cyan-text); font-weight: 600; margin: 0 0 8px; }
.person .bio { font-size: 13px; color: var(--ink-mid); margin: 0; line-height: 1.55; }

/* Team-Seite: Zick-Zack-Reihen — Foto abwechselnd links/rechts,
   bewusst schmaler als der .wrap für eine kompakte, ruhige Anmutung */
.team-rows { display: flex; flex-direction: column; gap: 48px; max-width: 820px; margin: 0 auto; }
.person-row { display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: center; }
.person-row-flip { grid-template-columns: 1fr 220px; }
.person-row-flip .person-row-photo { order: 2; }
.person-row-flip .person-row-body { order: 1; }
.person-row-photo { display: block; aspect-ratio: 4/5; border-radius: 12px; overflow: hidden; background: var(--bg-soft); }
.person-row-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.person-row-photo:hover img { transform: scale(1.05); }
.person-row-body h3 { font-size: 26px; margin: 0 0 6px; }
.person-row-body h3 a { color: inherit; text-decoration: none; }
.person-row-body h3 a:hover { color: var(--cyan); }
.person-row-body .role { font-size: 14px; color: var(--cyan-text); font-weight: 600; margin: 0 0 14px; }
.person-row-body .bio { font-size: 15px; color: var(--ink-mid); margin: 0 0 18px; line-height: 1.65; }
.person-row-body .links { margin: 0; font-size: 14px; display: flex; flex-wrap: wrap; gap: 16px; }

/* Team-Galerie (Startseite): gehoverter Streifen wächst auf, verlinkt auf /team/<slug> */
.team-gallery { display: flex; gap: 10px; height: 420px; }
.team-gallery-item { position: relative; flex: 1 1 0; min-width: 0; border-radius: 16px; overflow: hidden; background: var(--bg-soft); }
/* Bild fest 460px breit und zentriert: die Kachel ist nur ein Fenster, das beim
   Aufklappen mehr freigibt — das Bild selbst skaliert nicht (kein Zoom-Effekt). */
.team-gallery-item img { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 460px; max-width: none; height: 100%; object-fit: cover; object-position: top center; }
.team-gallery-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 39, 39, 0) 55%, rgba(6, 39, 39, 0.65)); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.team-gallery-name { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; color: #fff; font-size: 15px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; opacity: 0; transform: translateY(6px); transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s; pointer-events: none; }
.team-gallery-name em { display: block; font-style: normal; font-weight: 400; font-size: 13px; color: rgba(255, 255, 255, 0.85); }
.team-gallery-item:focus-visible { outline: 3px solid var(--cyan); outline-offset: -3px; }
.team-gallery-cta { text-align: center; margin-top: 28px; }
@media (hover: hover) {
  .team-gallery-item { transition: flex-grow 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .team-gallery-item:hover, .team-gallery-item:focus-visible { flex-grow: 2.6; }
  .team-gallery-item:hover::after, .team-gallery-item:focus-visible::after { opacity: 1; }
  .team-gallery-item:hover .team-gallery-name, .team-gallery-item:focus-visible .team-gallery-name { opacity: 1; transform: none; }
}
@media (hover: none) {
  /* Touch: kein Expand — Verlauf und Namen dauerhaft sichtbar */
  .team-gallery-item::after { opacity: 1; }
  .team-gallery-name { opacity: 1; transform: none; font-size: 13px; left: 12px; right: 12px; bottom: 10px; }
}

/* ===== Blog ===== */
.blog-grid { display: grid; grid-template-columns: repeat(var(--grid-cols, 3), 1fr); gap: 24px; }
.post { display: block; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; transition: all 0.2s; cursor: pointer; }
.post:hover { border-color: var(--cyan); transform: translateY(-3px); }
.post .img { aspect-ratio: 16/10; background: linear-gradient(135deg, var(--ink-soft), var(--ink)); position: relative; overflow: hidden; }
.post .img::after { content: ""; position: absolute; bottom: -50px; right: -50px; width: 160px; height: 160px; border-radius: 50%; background: rgba(118, 189, 211, 0.18); }
.post.var-2 .img { background: linear-gradient(135deg, #1a4a4a, #033333); }
.post.var-3 .img { background: linear-gradient(135deg, #76bdd3 0%, #1a4a4a 100%); }
.post .img .label { position: absolute; top: 16px; left: 16px; background: var(--cyan); color: var(--ink); padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.4px; }
.post .body { padding: 22px 22px 24px; }
.post .meta { font-size: 11px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; font-weight: 600; }
.post h3 { font-size: 17px; margin: 0 0 10px; font-weight: 600; line-height: 1.35; }
.post p { font-size: 13px; color: var(--ink-mid); margin: 0 0 14px; line-height: 1.55; }
.post .read { font-size: 12px; font-weight: 600; color: var(--ink); border-bottom: 2px solid var(--cyan); padding-bottom: 1px; cursor: pointer; }
.post .img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Generierte SVG-Header auf Artikel-/Leistungsseiten */
.page-header-img { display: block; width: 100%; border-radius: 12px; border: 1px solid var(--line); }

/* ===== Fließtext auf Artikel-/Leistungsseiten (TinyMCE-Inhalte) ===== */
.prose h2 { font-size: 24px; line-height: 1.25; margin: 40px 0 14px; color: var(--ink); letter-spacing: -0.4px; }
.prose h3 { font-size: 18px; line-height: 1.3; margin: 28px 0 10px; color: var(--ink); }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose table { width: 100%; border-collapse: collapse; margin: 20px 0 24px; font-size: 14px; }
.prose th, .prose td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.prose th { background: var(--bg-soft); color: var(--ink); font-weight: 600; }
.prose blockquote { border-left: 3px solid var(--cyan); margin: 20px 0; padding: 4px 0 4px 18px; color: var(--ink-soft); font-style: italic; }

/* ===== Career ===== */
.career-block { background: var(--ink); color: #fff; border-radius: 20px; padding: 56px 48px; position: relative; overflow: hidden; }
.career-block::after { content: ""; position: absolute; right: -100px; bottom: -100px; width: 320px; height: 320px; border-radius: 50%; background: rgba(118, 189, 211, 0.15); }
.career-block .row { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; position: relative; z-index: 1; }
.career-block h2 { font-size: 32px; line-height: 1.15; margin: 0 0 14px; font-weight: 700; letter-spacing: -0.6px; }
.career-block h1 { font-size: 32px; line-height: 1.15; margin: 0 0 14px; font-weight: 700; letter-spacing: -0.6px; }
.career-block p { font-size: 15px; color: var(--cyan-soft); margin: 0; line-height: 1.6; }
.jobs { display: grid; gap: 12px; }
.job { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(118, 189, 211, 0.2); border-radius: 8px; padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; transition: all 0.2s; cursor: pointer; }
.job:hover { border-color: var(--cyan); background: rgba(118, 189, 211, 0.08); }
.job .title { font-weight: 600; color: #fff; font-size: 15px; }
.job .meta-line { font-size: 12px; color: var(--cyan-soft); margin-top: 2px; }
.job .arrow { color: var(--cyan); font-size: 18px; }

/* ===== Seitenkopf der Unterseiten (page-hero) ===== */
.page-hero { background: var(--bg-soft-2); border-bottom: 1px solid var(--line); padding: 56px 0 44px; }
.page-hero .section-head { margin-bottom: 0; }
.page-hero + .section { padding-top: 56px; }
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: center; }
.hero-mini-collage { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hero-mini-collage img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top center; border-radius: 10px; }
.count-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 9px; border-radius: 15px; background: var(--cyan-tint); color: var(--ink-soft); font-size: 15px; font-weight: 700; vertical-align: middle; margin-left: 6px; }
.career-block .band-body p { margin: 0 0 12px; }
.career-block .band-body p:last-child { margin: 0; }
@media (max-width: 760px) {
  .page-hero-grid { grid-template-columns: 1fr; }
  .hero-mini-collage { max-width: 340px; }
}

/* ===== Leistungs-Detail: Sticky-Sidebar rechts =====
   align-items:start ist Voraussetzung fürs Sticky (gestretchte Grid-Items kleben
   nicht); top:120px lässt Platz für die mitscrollende Glas-Nav (vgl. scroll-margin). */
.service-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: start; }
.service-aside { position: sticky; top: 120px; display: grid; gap: 20px; }
.aside-card { border: 1px solid var(--line); border-radius: 12px; background: var(--bg-soft); padding: 20px 22px; }
.aside-title { font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--cyan-text); margin: 0 0 12px; font-weight: 700; }
/* Ansprechpartner: dunkle Karte als Conversion-Akzent (Rezept .contact-card) */
.aside-contact { background: var(--ink); border-color: var(--ink); color: #fff; border-radius: 16px; }
.aside-contact .aside-title { color: var(--cyan); }
.aside-contact-head { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.aside-contact-photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: top center; border: 2px solid var(--cyan); flex-shrink: 0; }
.aside-contact-name { font-weight: 600; font-size: 16px; }
.aside-contact-name a { color: #fff; }
.aside-contact-role { font-size: 13px; color: var(--cyan-soft); margin-top: 2px; }
.aside-contact-links { display: grid; gap: 6px; font-size: 14px; margin-bottom: 4px; overflow-wrap: anywhere; }
.aside-contact-links a { color: var(--cyan-soft); }
.aside-contact-links a:hover { color: #fff; }
.aside-contact-btn { margin-top: 10px; }
.aside-facts { margin: 0; padding: 0 0 0 18px; display: grid; gap: 8px; font-size: 14px; color: var(--ink-mid); }
.aside-facts li::marker { color: var(--cyan); }
.aside-quote { margin: 0 0 10px; font-size: 14px; line-height: 1.55; color: var(--ink-soft); font-style: italic; }
.aside-quote-who { font-size: 12.5px; color: var(--ink-mid); margin-bottom: 10px; }
.aside-more { font-size: 13px; font-weight: 600; color: var(--cyan-text); }
.aside-links { margin: 0; padding: 0; list-style: none; font-size: 14px; }
.aside-links li + li { border-top: 1px solid var(--line); }
.aside-links a { display: block; padding: 8px 0; color: var(--ink-mid); }
.aside-links a:hover { color: var(--ink); }
@media (max-width: 960px) {
  .service-layout { grid-template-columns: 1fr; gap: 36px; }
  .service-aside { position: static; }
}

/* ===== Lesetypografie (Artikel & Textseiten) ===== */
.prose { font-size: 17px; line-height: 1.75; color: var(--ink-mid); max-width: 68ch; }
.prose.lead-first > p:first-child { font-size: 19px; line-height: 1.65; color: var(--ink); }
.prose p { margin: 0 0 16px; }
.prose h2 { font-size: 26px; line-height: 1.25; color: var(--ink); margin: 44px 0 14px; letter-spacing: -0.4px; scroll-margin-top: 110px; }
.prose h2::before { content: ""; display: block; width: 32px; height: 3px; background: var(--cyan); margin-bottom: 10px; }
.prose h3 { font-size: 20px; color: var(--ink); margin: 30px 0 10px; scroll-margin-top: 110px; }
.prose ul { margin: 0 0 18px; padding-left: 22px; }
.prose ul li { margin-bottom: 6px; }
.prose ol { list-style: none; counter-reset: steps; margin: 0 0 20px; padding-left: 0; }
.prose ol > li { counter-increment: steps; position: relative; padding-left: 40px; margin-bottom: 12px; }
.prose ol > li::before { content: counter(steps); position: absolute; left: 0; top: 1px; width: 26px; height: 26px; border-radius: 50%; background: var(--cyan-tint); color: var(--ink-soft); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.prose blockquote { margin: 28px 0; padding: 18px 22px; background: var(--cyan-tint); border-left: 3px solid var(--cyan); border-radius: 0 8px 8px 0; color: var(--ink); }
.prose blockquote p { margin: 0 0 8px; }
.prose blockquote p:last-child { margin: 0; }
.prose img { border-radius: 8px; border: 1px solid var(--line); margin: 24px 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 15px; line-height: 1.5; }
.prose th { text-align: left; padding: 10px 12px; border-bottom: 2px solid var(--ink); color: var(--ink); font-weight: 600; }
.prose td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose pre { background: var(--ink); color: var(--bg-soft-2); padding: 18px 20px; border-radius: 8px; overflow-x: auto; font-size: 14px; line-height: 1.6; margin: 24px 0; }
.prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; }
.prose :not(pre) > code { background: var(--bg-soft-2); padding: 2px 6px; border-radius: 4px; }
.prose hr { border: none; border-top: 1px solid var(--line); margin: 36px 0; }
.prose a { border-bottom: 2px solid var(--cyan); padding-bottom: 1px; }

/* Inhaltsverzeichnis langer Artikel */
.toc { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px; padding: 20px 24px; margin: 0 0 36px; font-size: 14px; }
.toc-title { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--ink-soft); font-weight: 700; margin-bottom: 10px; }
.toc ol { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 32px; }
.toc li { margin-bottom: 6px; break-inside: avoid; }
.toc a { color: var(--ink-mid); }
.toc a:hover { color: var(--ink); border-bottom: 2px solid var(--cyan); }

/* ===== Karriere-Seite ===== */
.jobs-list { display: grid; gap: 16px; }
.job-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 28px 32px; display: flex; justify-content: space-between; align-items: center; gap: 20px; transition: all 0.2s; }
.job-card:hover { border-color: var(--cyan); transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgba(2, 30, 30, 0.18); }
.job-card .title { font-weight: 600; font-size: 19px; }
.job-card .meta-line { color: var(--ink-mid); font-size: 14px; margin-top: 4px; }
.job-card .arrow { width: 46px; height: 46px; border-radius: 10px; background: var(--cyan-tint); display: flex; align-items: center; justify-content: center; color: var(--ink-soft); font-size: 20px; flex-shrink: 0; transition: all 0.2s; }
.job-card:hover .arrow { background: var(--cyan); color: var(--ink); }
.benefits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.benefit { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px 22px; display: flex; gap: 14px; align-items: center; font-size: 15px; }
.benefit .check { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--cyan-tint); color: var(--ink-soft); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }

/* ===== Partners ===== */
.partners { display: grid; grid-template-columns: repeat(var(--grid-cols, 4), 1fr); gap: 24px; align-items: center; }
/* Partner-Karussell (Startseite): 4 sichtbar, JS schiebt alle 3s eine Position weiter */
/* horizontal wischt das Karussell, vertikal scrollt die Seite; das vertikale
   Padding (+ Gegen-Margin) gibt dem Hover-Lift der Kacheln Luft im overflow:hidden */
.partners-carousel { overflow: hidden; touch-action: pan-y; padding: 8px 0; margin: -8px 0; }
.partners.is-carousel { display: flex; gap: 24px; transition: transform 1.1s cubic-bezier(0.3, 0.6, 0.2, 1); }
/* Dezente Punkt-Navigation (wird per JS erzeugt — ohne JS rolliert auch nichts) */
.partners-dots { display: flex; justify-content: center; gap: 10px; margin-top: 26px; }
.partners-dots button { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: rgba(255, 255, 255, 0.25); cursor: pointer; transition: background 0.3s, transform 0.3s; }
.partners-dots button:hover { background: rgba(255, 255, 255, 0.5); }
.partners-dots button.active { background: var(--cyan); transform: scale(1.25); }
.partners.is-carousel .partner { flex: 0 0 calc((100% - 3 * 24px) / 4); }
@media (max-width: 960px) {
  .partners.is-carousel { gap: 16px; }
  .partners.is-carousel .partner { flex-basis: calc((100% - 2 * 16px) / 3); }
}
@media (max-width: 640px) {
  /* 1 Kachel mittig, links und rechts lugt je eine halbe herein (JS zentriert).
     Volle Bildschirmbreite: aus dem .wrap-Innenabstand (20px bei ≤640) ausbrechen,
     sonst sind die halben Nachbarn an den Rändern abgeschnitten. */
  .partners-carousel { margin: -8px -20px; }
  .partners.is-carousel .partner { flex-basis: 50%; }
}
.partner { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(118, 189, 211, 0.18); border-radius: 8px; padding: 32px 24px; height: 110px; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.partner:hover { border-color: var(--cyan); background: rgba(118, 189, 211, 0.08); }
.partner img { max-height: 50px; max-width: 100%; object-fit: contain; opacity: 0.95; transition: opacity 0.2s; }
.partner:hover img { opacity: 1; }
.section-partners { background: var(--ink); color: var(--bg-soft-2); position: relative; overflow: hidden; }
.section-partners::after { content: ""; position: absolute; left: -120px; bottom: -140px; width: 360px; height: 360px; border-radius: 50%; background: rgba(118, 189, 211, 0.14); }
.section-partners .wrap { position: relative; z-index: 1; }
.section-partners .section-head h2 { color: #fff; }
.section-partners .section-head .sub { color: var(--cyan-soft); }
.section-partners .section-head .kicker { color: var(--cyan-soft); }
.section-partners .section-head .kicker::before { background: var(--cyan); }
/* ===== Contact ===== */
.contact .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.contact-card { background: var(--ink); color: #fff; border-radius: 16px; padding: 40px; display: flex; gap: 24px; align-items: flex-start; }
.contact-card .photo { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 3px solid var(--cyan); }
.contact-card .photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.contact-card h4 { font-size: 18px; margin: 0 0 4px; font-weight: 600; }
.contact-card .role { font-size: 13px; color: var(--cyan); margin: 0 0 14px; font-weight: 600; }
.contact-card .links { display: grid; gap: 8px; font-size: 14px; color: var(--cyan-soft); }
.contact-card .links a { color: #fff; border-bottom: 1px solid var(--cyan); padding-bottom: 1px; cursor: pointer; }
.contact h2 { font-size: 36px; line-height: 1.15; margin: 0 0 16px; font-weight: 700; letter-spacing: -0.8px; }
.contact .lead { font-size: 16px; color: var(--ink-mid); margin: 0 0 24px; line-height: 1.6; }
.contact .addr { font-size: 14px; color: var(--ink-mid); padding-top: 20px; border-top: 1px solid var(--line); margin-top: 24px; }

/* ===== Footer ===== */
footer { background: var(--ink); color: var(--cyan-soft); padding: 56px 0 32px; }
footer .top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 32px; border-bottom: 1px solid rgba(118, 189, 211, 0.15); }
footer img.logo { height: 30px; margin-bottom: 18px; }
footer .tagline { font-size: 13px; color: var(--cyan-soft); max-width: 280px; line-height: 1.55; }
footer h5 { color: #fff; font-size: 13px; margin: 0 0 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; }
footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
footer ul a { font-size: 13px; color: var(--cyan-soft); cursor: pointer; }
footer ul a:hover { color: var(--cyan); }
footer .bottom { padding-top: 24px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--grey); }

/* ===== Moderne Effekte: Glas & Hover-Animationen ===== */
/* Glas: Dropdown-Panel. Vorbehalt: sitzt das Panel in einer Navbar mit eigenem
   backdrop-filter (mitscrollende/sticky Nav), greift der Blur des Kindes nicht
   zuverlässig — darum bleibt das Dropdown bewusst deutlich deckender als die
   Navbar selbst (84 % statt 60 %), damit die Menüpunkte immer lesbar bleiben. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .menu-item .dropdown {
    background: rgba(255, 255, 255, 0.84);
    -webkit-backdrop-filter: blur(22px) saturate(1.5);
    backdrop-filter: blur(22px) saturate(1.5);
  }
}

/* Buttons: sanfter Lift */
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(2, 30, 30, 0.45); }
.btn:active { transform: translateY(0); box-shadow: none; }

/* Service-Karten: Icon lebt beim Hover */
.service .ico { transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.3s, color 0.3s; }
.service:hover .ico { background: var(--cyan); color: var(--ink); transform: scale(1.08) rotate(-4deg); }
.service .more::after, .post .read::after { content: "→"; display: inline-block; opacity: 0; transform: translateX(-4px); margin-left: 4px; transition: opacity 0.25s, transform 0.25s; }
.service:hover .more::after, .post:hover .read::after { opacity: 1; transform: translateX(0); }

/* Blog-Karten: Bild-Zoom + Glas-Label */
.post .img > img { transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.post:hover .img > img { transform: scale(1.06); }
.post:hover { box-shadow: 0 18px 40px -18px rgba(2, 30, 30, 0.28); }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .post .img .label {
    /* nicht transparenter als 0.55 — dunkle Schrift braucht auf den dunklen
       Header-SVGs sonst keinen AA-Kontrast mehr (4.5:1) */
    background: rgba(157, 209, 226, 0.55);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter: blur(14px) saturate(1.3);
  }
}

/* Team-Karten: Foto-Zoom */
.person .photo img { transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.person:hover .photo img { transform: scale(1.05); }

/* Glas über Bildern & bewegten Bubbles: Hero-Badge, Why-Panel */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .feature-card .badge {
    background: rgba(157, 209, 226, 0.22);
    color: #fff;
    border: 1px solid rgba(157, 209, 226, 0.45);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  .why .visual-text,
  .feature-card .card-glass {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}

/* Hero-Feature-Karte: Glas-Schimmer + Lift */
.feature-card { border: 1px solid rgba(118, 189, 211, 0.25); transition: transform 0.3s, box-shadow 0.3s; }
.feature-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255, 255, 255, 0.09), transparent 45%); pointer-events: none; }
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -22px rgba(2, 30, 30, 0.55); }

/* Referenz-Karten */
.case { transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s; }
.case:hover { border-color: var(--cyan); transform: translateY(-3px); box-shadow: 0 14px 30px -16px rgba(2, 30, 30, 0.18); }

/* Dunkle Sektionen: Glas auf Jobs & Partner-Kacheln */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .job, .partner { -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.18); }
}
.job { transition: border-color 0.25s, background 0.25s, transform 0.25s; }
.job:hover { transform: translateX(5px); }
.job .arrow { transition: transform 0.25s; }
.job:hover .arrow { transform: translateX(4px); }
.partner { transition: border-color 0.25s, background 0.25s, transform 0.25s; }
.partner:hover { transform: translateY(-4px); }

/* ===== Deko-Bubbles: langsames Umherfliegen quer durch die Kachel + Hover-Glow =====
   Jeder Blob wandert auf einem eigenen, unregelmäßigen Pfad durch die ganze
   Kachel (kein Gleichlauf) und bewusst sehr langsam (40–58s). Negative Delays
   entkoppeln die Startpositionen zusätzlich. Die Eltern haben overflow:hidden,
   der Blob bleibt geclippt und darf über die Ränder hinausdriften.
   Bewusst NICHT auf den Blog-Kacheln (.post): im Grid wirkte der Gleichlauf
   unruhig – die bleiben statisch. prefers-reduced-motion (unten) stoppt alles. */
@keyframes bubble-roam-1 {
  0%, 100% { transform: translate(0, 0) scale(1);            border-radius: 50%; }
  25%      { transform: translate(-90px, -70px) scale(1.08); border-radius: 47% 53% 55% 45%; }
  50%      { transform: translate(-185px, -25px) scale(0.9); border-radius: 56% 44% 46% 54%; }
  75%      { transform: translate(-70px, -135px) scale(1.05); border-radius: 44% 56% 52% 48%; }
}
@keyframes bubble-roam-2 {
  0%, 100% { transform: translate(0, 0) scale(1);            border-radius: 50%; }
  25%      { transform: translate(-75px, 85px) scale(1.06);  border-radius: 45% 55% 48% 52%; }
  50%      { transform: translate(-195px, 40px) scale(0.9);  border-radius: 57% 43% 53% 47%; }
  75%      { transform: translate(-105px, 155px) scale(1.1);  border-radius: 48% 52% 44% 56%; }
}
@keyframes bubble-roam-3 {
  0%, 100% { transform: translate(0, 0) scale(1);            border-radius: 50%; }
  30%      { transform: translate(105px, -55px) scale(1.07); border-radius: 46% 54% 54% 46%; }
  55%      { transform: translate(205px, -15px) scale(0.92); border-radius: 55% 45% 47% 53%; }
  80%      { transform: translate(90px, -145px) scale(1.05); border-radius: 43% 57% 52% 48%; }
}
@keyframes bubble-roam-4 {
  0%, 100% { transform: translate(0, 0) scale(1);             border-radius: 50%; }
  20%      { transform: translate(-160px, -45px) scale(1.06); border-radius: 47% 53% 54% 46%; }
  45%      { transform: translate(-360px, -95px) scale(0.9);  border-radius: 56% 44% 46% 54%; }
  70%      { transform: translate(-520px, -30px) scale(1.08); border-radius: 44% 56% 53% 47%; }
  88%      { transform: translate(-230px, -120px) scale(0.96); border-radius: 52% 48% 45% 55%; }
}
@keyframes bubble-roam-5 {
  0%, 100% { transform: translate(0, 0) scale(1);             border-radius: 50%; }
  22%      { transform: translate(240px, -80px) scale(1.07);  border-radius: 46% 54% 53% 47%; }
  48%      { transform: translate(560px, -20px) scale(0.9);   border-radius: 55% 45% 47% 53%; }
  74%      { transform: translate(320px, -140px) scale(1.06); border-radius: 45% 55% 51% 49%; }
}
.feature-card::after,
.why .visual::before,
.why .visual::after,
.career-block::after,
.section-partners::after {
  will-change: transform, border-radius;
  transition: background-color 0.45s ease;
}
.feature-card::after { animation: bubble-roam-1 40s ease-in-out -8s infinite; }
.why .visual::before { animation: bubble-roam-2 52s ease-in-out -20s infinite; }
.why .visual::after  { animation: bubble-roam-3 46s ease-in-out -33s infinite; }
.career-block::after { animation: bubble-roam-4 58s ease-in-out -12s infinite; }
.section-partners::after { animation: bubble-roam-5 60s ease-in-out -26s infinite; }
/* Hover-Glow auf der klickbaren Hero-Kachel (nur Deckkraft, kein Transform-Konflikt) */
.feature-card:hover::after { background-color: rgba(118, 189, 211, 0.30); }

/* Karriere-Seite */
.benefit { transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; }
.benefit:hover { border-color: var(--cyan); transform: translateY(-2px); box-shadow: 0 10px 24px -16px rgba(2, 30, 30, 0.18); }
.job-card .arrow { transition: background 0.2s, color 0.2s, transform 0.25s; }
.job-card:hover .arrow { transform: translateX(4px); }

/* Footer-Links: gleitende Unterstreichung */
footer ul a { background-image: linear-gradient(var(--cyan), var(--cyan)); background-repeat: no-repeat; background-size: 0% 1px; background-position: 0 100%; transition: background-size 0.25s, color 0.2s; padding-bottom: 2px; }
footer ul a:hover { background-size: 100% 1px; }

/* Desktop: mitscrollende Glas-Navigation (JS setzt body.nav-floating ab 160px) */
.nav-mini-logo { display: none; }
@media (min-width: 961px) {
  body.nav-floating .navbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 120;
    background: rgba(255, 255, 255, 0.60);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    backdrop-filter: blur(24px) saturate(1.4);
    border-bottom: 1px solid rgba(229, 233, 235, 0.7);
    box-shadow: 0 10px 30px -18px rgba(2, 30, 30, 0.25);
    animation: nav-slide-in 0.28s ease;
  }
  /* Schmaler dunkler Balken oben — Anklang an die Topbar des Original-Headers */
  body.nav-floating .navbar::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px;
    background: var(--ink);
  }
  /* Menü hinter der Schräge freihalten (Blockbreite auf Leistenhöhe ~250px) */
  body.nav-floating .navbar .row { padding-left: 290px; }
  /* Logo-Block in Originalform, 20% verkleinert (ragt wie im Header unter die Leiste) */
  body.nav-floating .nav-mini-logo {
    display: flex; align-items: center; justify-content: flex-start;
    position: absolute; left: 0; top: 0;
    width: 288px; height: 82px; padding-left: 45px;
    background: var(--ink);
    clip-path: path("M 0 0 L 280 0 Q 288 0, 281.6 5.6 L 198.4 76 Q 192 81.6, 184 81.6 L 0 81.6 Z");
  }
  body.nav-floating .nav-mini-logo img { height: 45px; width: auto; }
}
@keyframes nav-slide-in {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

/* Barrierefreiheit: reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ===== Team-Profilseite ===== */
.profile-grid { display: grid; grid-template-columns: 280px 1fr; gap: 48px; align-items: start; }

/* ===== Responsive (additiv — Desktop-Layout bleibt unverändert) ===== */
.nav-toggle { display: none; background: none; border: 0; padding: 8px 4px; cursor: pointer; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px 0; transition: transform 0.2s, opacity 0.2s; }
.navbar.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.navbar.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 960px) {
  .wrap { padding: 0 28px; }
  .services, .partners, .blog-grid, .cases { grid-template-columns: repeat(2, 1fr); }
  .person-row { grid-template-columns: 200px 1fr; gap: 32px; }
  .person-row-flip { grid-template-columns: 1fr 200px; }
  .hero .grid, .why .grid, .contact .grid, .career-block .row { grid-template-columns: 1fr; }
  .hero h1 { font-size: 42px; }
  footer .top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 960px) {
  /* Header: eine einzige Glasleiste — Logo-Chip links (statt CTA-Button), Burger rechts
     (die Desktop-Navigation braucht mit dem 360px-Logo ~1000px Breite) */
  .logo-anchor { display: none; }
  .topbar { display: none; }
  .navbar .row > .btn { display: none; }
  .nav-mini-logo {
    display: flex; align-items: center;
    margin: -10px 0; padding: 10px 26px 10px 20px;
    background: var(--ink);
    clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
  }
  .nav-mini-logo img { height: 28px; width: auto; }
  /* Sticky-Glas-Navigation */
  .header { position: sticky; top: 0; }
  .navbar {
    position: relative; padding: 10px 0;
    background: rgba(255, 255, 255, 0.60);
    -webkit-backdrop-filter: blur(22px) saturate(1.4);
    backdrop-filter: blur(22px) saturate(1.4);
  }
  .navbar .row { padding-left: 0; }
  .nav-toggle { display: block; }
  .navbar .menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; border-bottom: 1px solid var(--line);
    padding: 8px 20px 16px; box-shadow: 0 18px 34px rgba(2, 30, 30, 0.10); z-index: 90;
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(40px) saturate(1.3);
    backdrop-filter: blur(40px) saturate(1.3);
  }
  /* Offenes Menü: der Navbar-Blur würde den Menü-Blur aushebeln (verschachtelte
     backdrop-filter wirken nicht) — Leiste wird deckend, das Menü übernimmt das Glas. */
  .navbar.nav-open { background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .navbar.nav-open .menu { display: flex; }
  .navbar .menu > a, .menu-item > a { display: block; padding: 12px 0; font-size: 15px; }
  .profile-grid { grid-template-columns: 1fr; gap: 28px; }
  .profile-grid .person .photo { max-width: 240px; }
  .menu-item .caret, .menu-item::after { display: none; }
  .menu-item .dropdown {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; border-left: 2px solid var(--line); border-radius: 0;
    min-width: 0; padding: 0 0 4px 14px; margin: 0 0 8px;
    /* im Menü integriert — kein eigener weißer Glas-Kasten */
    background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .menu-item .dropdown a { padding: 8px 0; font-size: 14px; color: var(--ink-mid); }
  .menu-item .dropdown a:hover { background: none; }
  .navbar .row > .btn { font-size: 12px; padding: 8px 12px; }
}

@media (max-width: 640px) {
  .wrap { padding: 0 20px; }
  .section { padding: 52px 0; }
  .hero { padding: 44px 0 56px; }
  .hero h1 { font-size: 33px; letter-spacing: -0.8px; }
  .section-head h2, .why h2, .contact h2 { font-size: 27px; }
  .section-head h1 { font-size: 30px; }
  article .wrap > h1 { font-size: 30px !important; } /* Detailseiten setzen die Größe inline */
  .services, .blog-grid, .cases, .benefits { grid-template-columns: 1fr; }
  .team-rows { gap: 40px; }
  .person-row, .person-row-flip { grid-template-columns: 1fr; gap: 18px; }
  .person-row-flip .person-row-photo { order: 0; }
  .person-row-flip .person-row-body { order: 0; }
  .person-row-photo { max-width: 220px; }
  .person-row-body h3 { font-size: 22px; }
  .partners { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  footer .top { grid-template-columns: 1fr; gap: 28px; }
  footer .bottom { flex-direction: column; gap: 8px; text-align: center; }
  .career-block { padding: 36px 24px; }
  .contact-card { flex-direction: column; padding: 28px; }
  .job-card { padding: 20px; }
  .prose table { display: block; overflow-x: auto; }
  .why .visual { padding: 24px; }
  .why .visual-text .num { font-size: 48px; }
  /* Expand-Streifen wären hier zu schmal → festes 2er-Raster, GF über volle Breite.
     Bild wieder an die Kachel gekoppelt (kein Expand ⇒ kein Fenster-Trick nötig). */
  .team-gallery { display: grid; grid-template-columns: repeat(2, 1fr); height: auto; gap: 10px; }
  .team-gallery-item { aspect-ratio: 4 / 5; }
  .team-gallery-item:first-child { grid-column: span 2; aspect-ratio: 16 / 10; }
  .team-gallery-item img { position: static; width: 100%; transform: none; }
  .team-gallery-cta { margin-top: 18px; }
}