/* ============================================================
   Fassung B – "Tradition x Gegenwart" (Hauptfassung seit 07.11.2026)
   Fuer alle Seiten, body class="v2". Serifenschrift fuer Ueberschriften
   (Institution), Grotesk fuer Text und Labels (Gegenwart),
   helle Papierflaeche als Standard, keine Kugel.
   ============================================================ */

/* Newsreader verworfen (07.11.2026, zu altbacken) */

.v2 {
  --serif: "Newsreader", "Iowan Old Style", "Times New Roman", Georgia, serif;
}

/* Hell: etwas waermerer Papierton */
:root[data-theme="light"] .v2,
.v2 { }
:root[data-theme="light"] {
  --parchment: #ecebe6;
  --paper: #f6f5f1;
  --stone: #e1dfd8;
}

/* Hero */
.vb-hero { padding-top: clamp(8rem, 15vw, 11rem); padding-bottom: clamp(3rem, 6vw, 5rem); position: relative; z-index: 1; }
.vb-hero__label { margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.vb-hero__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.75rem, 7.4vw, 7.25rem);
  line-height: 0.98;
  letter-spacing: -0.022em;
  max-width: 15ch;
  text-wrap: balance;
}
.vb-hero__title em { font-style: italic; display: block; color: color-mix(in srgb, var(--ink) 62%, transparent); }
.vb-hero__photo { margin: clamp(2.5rem, 5vw, 4.5rem) 0 0; }
.vb-hero__shot { aspect-ratio: 21 / 9; width: 100%; }
.vb-hero__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--ash); margin: 0; }
.vb-hero__facts > div { padding: 1rem 1.5rem 1rem 0; }
.vb-hero__facts dt { font-size: var(--t-caption); text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.6; margin-bottom: 0.35rem; }
.vb-hero__facts dd { margin: 0; font-size: 1rem; }

/* Intro: weniger Leerraum, da kein Buehnen-Hero mehr davor */
.v2 .intro { padding-top: clamp(3rem, 6vw, 5rem); }

/* Ueberschriften in Serif, gemischte Schreibung */
.v2 .h2,
.v2 .h3,
.v2 .field__title,
.v2 .audience__title,
.v2 .mandate__name,
.v2 .chain__item,
.v2 .work__more-title,
.v2 .lede {
  font-family: var(--serif);
  text-transform: none;
  font-weight: 400;
  letter-spacing: -0.012em;
}
.v2 .h2 { font-size: clamp(2.25rem, 5vw, 4.75rem); line-height: 1; }
.v2 .h3 { line-height: 1.05; }
.v2 .field__title { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.v2 .lede { font-size: clamp(1.6rem, 3.2vw, 2.75rem); line-height: 1.12; }
.v2 .chain__item { font-style: italic; }

@media (max-width: 700px) {
  .vb-hero__facts { grid-template-columns: 1fr; }
  .vb-hero__facts > div { border-top: 1px solid var(--ash); }
  .vb-hero__shot { aspect-ratio: 4 / 3; }
}

/* Ohne Kugel braucht es die bildschirmhohen Buehnen nicht mehr */
.v2 .intro,
.v2 .clients { min-height: 0; }
.v2 .intro { padding-block: clamp(3.5rem, 7vw, 6rem) clamp(2rem, 4vw, 3rem); }
.v2 .clients { padding-block: clamp(2.5rem, 5vw, 4rem); }
.v2 .intro__label { display: none; }

/* ============================================================
   Schriftentscheidung 07.11.2026: Option 5 – Satoshi ohne Serifen,
   normale Schreibung. Ueberschreibt die Serif-Regeln oben.
   ============================================================ */
.v2 { --serif: var(--font); }
.vb-hero__title { font-weight: 700; letter-spacing: -0.035em; line-height: 0.98; max-width: 18ch; }
.vb-hero__title em { font-style: normal; font-weight: 400; letter-spacing: -0.03em; }
.v2 .h2,
.v2 .h3,
.v2 .field__title,
.v2 .audience__title,
.v2 .mandate__name,
.v2 .work__more-title { font-weight: 700; letter-spacing: -0.03em; }
.v2 .lede { font-weight: 400; letter-spacing: -0.02em; }
.v2 .chain__item { font-style: normal; font-weight: 400; letter-spacing: -0.025em; }

/* Buero-Foto im Hero: 16:9-Ausschnitt, Stuckdecke und Parkett bleiben sichtbar */
.vb-hero__img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 42%; border: 0; }
@media (max-width: 700px) { .vb-hero__img { aspect-ratio: 4 / 3; object-position: 55% 45%; } }

/* ============================================================
   Hero v2 (07.11.2026): Claim + Positionierung + drei Belege.
   Buerofoto steht im Agenturprofil.
   ============================================================ */
.vb-hero { padding-bottom: clamp(3rem, 6vw, 5rem); }
.vb-hero__grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(2rem, 5vw, 5rem); margin-top: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
.vb-hero__lede { font-size: clamp(1.2rem, 1.8vw, 1.5rem); line-height: 1.35; letter-spacing: -0.01em; max-width: 34ch; margin-bottom: 1.75rem; }
.vb-proof { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ash); }
.vb-proof li { border-bottom: 1px solid var(--ash); }
.vb-proof a { display: grid; grid-template-columns: minmax(7.5rem, 11rem) 1fr; gap: 1.5rem; align-items: baseline; padding: 1.1rem 0; color: inherit; text-decoration: none; }
.vb-proof__num { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1; }
.vb-proof__text { font-size: var(--t-small); line-height: 1.45; opacity: 0.8; }
.vb-proof a:hover .vb-proof__num, .vb-proof a:focus-visible .vb-proof__num { color: var(--brand); }
.vb-office { margin: clamp(2rem, 4vw, 3.5rem) 0 clamp(2.5rem, 5vw, 4rem); }
.vb-office img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 42%; }
.vb-office figcaption { font-size: var(--t-caption); text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.6; margin-top: 0.75rem; }
@media (max-width: 900px) {
  .vb-hero__grid { grid-template-columns: 1fr; }
  .vb-office img { aspect-ratio: 4 / 3; }
}
@media (max-width: 520px) {
  .vb-proof a { grid-template-columns: 1fr; gap: 0.4rem; }
}

/* ============================================================
   Vier Bereiche, uebersichtlich (07.11.2026): vier gleiche Spalten,
   Nummer, deutsche Unterzeile, Leistungen als Liste.
   ============================================================ */
.vb-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(2rem, 4vw, 3rem); }
.vb-fields .field,
.vb-fields .field:nth-child(1),
.vb-fields .field:nth-child(4) { grid-column: auto; background: var(--paper); background-image: none; min-height: 0; gap: 0.75rem; padding: clamp(1.5rem, 2.4vw, 2.25rem); }
.field__num { font-size: var(--t-caption); letter-spacing: 0.08em; opacity: 0.55; }
.vb-fields .field__title { font-size: clamp(1.6rem, 2.2vw, 2.125rem); margin-top: 0.25rem; }
.field__sub { font-size: var(--t-small); font-weight: 700; line-height: 1.35; min-height: 2.7em; }
.vb-fields .body { font-size: 0.975rem; line-height: 1.55; }
.field__list { list-style: none; margin: auto 0 0; padding: 1rem 0 0; border-top: 1px solid var(--ash); display: grid; gap: 0.45rem; font-size: var(--t-small); color: color-mix(in srgb, var(--ink) 75%, transparent); }
.field__list li::before { content: "– "; opacity: 0.5; }
.vb-office img { aspect-ratio: 21 / 9; }
@media (max-width: 1100px) { .vb-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .vb-fields { grid-template-columns: 1fr; } .field__sub { min-height: 0; } }

/* Kennzahlen im Hero ohne Link, "In Stunden"/"Seit 2022" passen in die Spalte */
.vb-proof li > div { display: grid; grid-template-columns: minmax(9rem, 13rem) 1fr; gap: 1.5rem; align-items: baseline; padding: 1.1rem 0; }
@media (max-width: 520px) { .vb-proof li > div { grid-template-columns: 1fr; gap: 0.4rem; } }

/* Vier Bereiche: Layout wie im Original, nur Titel, Unterzeile, Leistungen */
.fields .field { min-height: 12rem; gap: 0.6rem; }
.fields .field__sub { min-height: 0; font-weight: 400; font-size: clamp(1.05rem, 1.5vw, 1.25rem); opacity: 0.8; }
.vb-proof__note { font-size: var(--t-caption); opacity: 0.55; margin-top: 0.75rem; line-height: 1.5; }
.vb-proof sup, .vb-proof__note sup { font-size: 0.7em; vertical-align: super; line-height: 0; }
@media (max-width: 900px) { .vb-proof__note { grid-column: 1; } }
.vb-proof__num { white-space: nowrap; }
.vb-proof li > div { grid-template-columns: 15.5rem 1fr; }
@media (max-width: 1100px) { .vb-proof__num { font-size: clamp(1.6rem, 2.6vw, 2.25rem); } .vb-proof li > div { grid-template-columns: 12.5rem 1fr; } }
@media (max-width: 520px) { .vb-proof li > div { grid-template-columns: 1fr; } }

/* ============================================================
   Hero passt beim Laden komplett auf den Bildschirm (07.11.2026).
   Hoehe an der Viewport-Hoehe ausrichten, Abstaende ueber vh.
   ============================================================ */
.vb-hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: calc(4.5rem + clamp(1rem, 3vh, 2.5rem));
  padding-bottom: clamp(1.25rem, 3.5vh, 3rem);
}
.vb-hero__label { margin-bottom: clamp(0.75rem, 2vh, 1.5rem); }
.vb-hero__title { font-size: clamp(2.4rem, min(6.2vw, 9.6vh), 6.75rem); max-width: 19ch; }
.vb-hero__grid { margin-top: clamp(1.5rem, 4.5vh, 3.5rem); }
.vb-hero__lede { font-size: clamp(1.05rem, min(1.6vw, 2.6vh), 1.4rem); margin-bottom: clamp(1rem, 2.5vh, 1.75rem); }
.vb-proof li > div { padding: clamp(0.6rem, 1.6vh, 1.1rem) 0; }
.vb-proof__num { font-size: clamp(1.5rem, min(2.8vw, 4.4vh), 2.5rem); }
.vb-proof__note { margin-top: 0.5rem; }
/* Navigation liegt im Fluss (73px), daher nicht zusaetzlich einrechnen */
.vb-hero { min-height: calc(100svh - 73px); padding-top: clamp(1rem, 3.5vh, 2.75rem); padding-bottom: clamp(1rem, 3.5vh, 2.75rem); }

/* ============================================================
   Kopfleiste ruhig (07.11.2026): Wortmarke, Textlinks, keine Linie
   ============================================================ */
.vb-nav,
.vb-nav[data-scrolled="true"] { border-bottom-color: transparent; background: color-mix(in srgb, var(--parchment) 92%, transparent); color: var(--ink); }
.vb-nav.is-scrolled-shadow { border-bottom-color: var(--ash); }
.vb-nav__brand { font-weight: 700; font-size: 1.1875rem; letter-spacing: -0.03em; color: inherit; text-decoration: none; white-space: nowrap; }
.vb-nav__links { display: flex; align-items: center; gap: clamp(1.25rem, 2.6vw, 2.5rem); font-size: var(--t-small); }
.vb-nav__links a { color: inherit; text-decoration: none; opacity: 0.72; transition: opacity 0.2s ease; }
.vb-nav__links a:hover, .vb-nav__links a:focus-visible { opacity: 1; }
.vb-nav__links .vb-nav__cta { opacity: 1; font-weight: 700; padding-left: clamp(0.5rem, 1.5vw, 1.25rem); }
.vb-nav__cta .link__arrow { display: inline-block; transition: transform 0.2s ease; }
.vb-nav__cta:hover .link__arrow { transform: translateX(3px); }
.vb-nav__cta:hover { color: var(--brand); }
@media (max-width: 960px) {
  .vb-nav__links a:not(.vb-nav__cta) { display: none; }
}
@media (max-width: 420px) {
  .vb-nav__brand { font-size: 1.0625rem; }
  .vb-nav__links .vb-nav__cta { font-size: 0.875rem; padding-left: 0; }
}
/* Menueknopf unten rechts nur noch auf kleinen Bildschirmen, am Desktop stehen die Links oben */
@media (min-width: 961px) { .v2 .kebab { display: none; } }

/* ============================================================
   Sprungziele (07.11.2026): Beim Springen ueber das Menue darf nichts
   unter der feststehenden Kopfleiste (73px) verschwinden.
   ============================================================ */
html { scroll-behavior: smooth; scroll-padding-top: calc(73px - var(--section) + 3rem); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ============================================================
   Unterseiten (Case Studies, Rechtliches) in Fassung B:
   normale Schreibung, Satoshi fett, wie die Startseite
   ============================================================ */
.v2 .case__title,
.v2 .legal__title { text-transform: none; font-weight: 700; letter-spacing: -0.035em; line-height: 0.98; }
.v2 .case__title { font-size: clamp(2.5rem, 6.4vw, 5.5rem); }
.v2 .legal__title { font-size: clamp(2.25rem, 5.5vw, 4.25rem); }
.v2 .case__h2,
.v2 .legal h2,
.v2 .case__next-title { text-transform: none; font-weight: 700; letter-spacing: -0.03em; }
.v2 .case__kpi-num { font-weight: 700; letter-spacing: -0.035em; }
.v2 .case, .v2 .legal { padding-top: clamp(3rem, 7vw, 5.5rem); }

/* Kundenraster mobil: Spalten duerfen schmaler werden als ihr Inhalt, sonst steht das Raster unter 420px seitlich ueber (09.11.2026) */
@media (max-width: 900px) {
  .v2 .clients__inner { grid-template-columns: minmax(0, 1fr); }
  .v2 .clients__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Case-Study-Kennzahlen mobil: Spalten duerfen schrumpfen, Zahl etwas kleiner, sonst steht „2.400+“ bei 360px ueber (09.11.2026) */
@media (max-width: 900px) { .v2 .case__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .v2 .case__kpi { padding: 1rem; } .v2 .case__kpi-num { font-size: 1.75rem; } }

/* Bildplaetze mit echtem Visual (09.11.2026): Bild fuellt die Flaeche, kein Gitterpapier/Innenabstand */
.shot--img { padding: 0; overflow: hidden; background-image: none; }
.shot--img .shot__pic, .shot--img img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Bildnachweis unter Fotos fremder Urheber (seit 11.11.2026) */
.v2 .shot-fig { margin: 0; display: grid; gap: 0.5rem; min-width: 0; }
.v2 .shot-credit { font-size: 0.75rem; letter-spacing: 0.02em; color: color-mix(in srgb, var(--ink) 60%, transparent); }