/* =========================================================================
   DB medien Verlag & Werbung GmbH
   ========================================================================= */

/* ---------------------------------------------------------------- Tokens */
:root{
  --ink:        #0B0B0C;
  --ink-2:      #131417;
  --ink-3:      #1A1B1F;
  --paper:      #F2F1ED;
  --paper-2:    #E4E2DB;
  --muted:      #9C9C9A;

  --blue:       #1A2C58;   /* Corporate-Blau aus dem DB-medien-Logo */
  --blue-500:   #2C4880;
  --blue-300:   #8FA5CE;

  --line:       rgba(242,241,237,.14);
  --line-soft:  rgba(242,241,237,.08);

  --ff-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ff-text:    "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --gut:        clamp(20px, 4.6vw, 72px);   /* Seitenrand */
  --sec-y:      clamp(88px, 13vw, 200px);   /* Sektionsabstand */

  --ease:       cubic-bezier(.22,.61,.36,1);
  --ease-out:   cubic-bezier(.16,1,.3,1);
}

/* ----------------------------------------------------------------- Reset */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--ff-text);
  font-size:clamp(15px,1.02vw,17px);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }
img,video{ display:block; max-width:100%; }
h1,h2,h3,p,figure,ul,ol{ margin:0; padding:0; }
ul,ol{ list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
address{ font-style:normal; }
::selection{ background:var(--blue-500); color:#fff; }

:focus-visible{ outline:2px solid var(--blue-300); outline-offset:4px; border-radius:2px; }

.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.skip-link{
  position:fixed; top:12px; left:12px; z-index:200;
  transform:translateY(-160%);
  background:var(--paper); color:var(--ink);
  padding:12px 18px; font-size:14px; letter-spacing:.04em;
  transition:transform .25s var(--ease);
}
.skip-link:focus{ transform:none; }

/* --------------------------------------------------------------- Layout */
.wrap{ width:100%; max-width:1520px; margin-inline:auto; padding-inline:var(--gut); }
.wrap-wide{ width:100%; max-width:1760px; margin-inline:auto; padding-inline:var(--gut); }

/* ------------------------------------------------------------ Typografie */
.display{
  font-family:var(--ff-display);
  font-weight:600;
  font-size:clamp(2.6rem, 7.2vw, 8.4rem);
  line-height:.93;
  letter-spacing:-.035em;
  text-transform:uppercase;
}
.display--tight{ font-size:clamp(2.3rem, 5.4vw, 6rem); }
.display em{ font-style:normal; color:var(--blue-300); }

/* Der Maskenrahmen für die Reveal-Animation bekommt oben etwas Luft,
   damit Umlautpunkte (Ö, Ä, Ü) nicht abgeschnitten werden. */
.line{ display:block; overflow:hidden; padding-top:.16em; margin-top:-.16em; }
.line > span{ display:block; }

.sec-label{
  font-family:var(--ff-display);
  font-size:clamp(11px,.78vw,13px);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
  display:flex; align-items:center; gap:.9em;
  margin-bottom:clamp(26px,3vw,48px);
}
.sec-label span{ color:var(--blue-300); }
.sec-label::after{
  content:""; flex:1 1 auto; height:1px; background:var(--line);
  max-width:min(320px,26vw);
}

/* ------------------------------------------------------------- Buttons */
.btn-line{
  display:inline-flex; align-items:stretch;
  border:1px solid var(--line);
  font-family:var(--ff-display);
  font-size:clamp(12px,.82vw,14px);
  letter-spacing:.16em; text-transform:uppercase;
  position:relative; overflow:hidden;
  transition:border-color .5s var(--ease), color .4s var(--ease);
}
.btn-line > span:first-child{ padding:1.15em 1.5em; position:relative; z-index:1; }
.btn-line__arrow{
  display:grid; place-items:center; width:3.4em;
  border-left:1px solid var(--line);
  position:relative; z-index:1;
  transition:border-color .5s var(--ease);
}
.btn-line__arrow svg{ transition:transform .45s var(--ease-out); }
.btn-line::before{
  content:""; position:absolute; inset:0; background:var(--paper);
  transform:translateY(101%); transition:transform .55s var(--ease-out);
}
.btn-line:hover{ color:var(--ink); border-color:var(--paper); }
.btn-line:hover .btn-line__arrow{ border-color:rgba(11,11,12,.18); }
.btn-line:hover::before{ transform:none; }
.btn-line:hover .btn-line__arrow svg{ transform:translateX(4px); }

.link-arrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--ff-display); font-weight:500;
  font-size:clamp(13px,.9vw,15px); letter-spacing:.02em;
  padding-bottom:.35em;
  border-bottom:1px solid currentColor;
  transition:gap .35s var(--ease), opacity .35s var(--ease);
}
.link-arrow:hover{ gap:1em; opacity:.65; }

/* ============================================================== KOPFZEILE */
.site-head{
  position:fixed; inset:0 0 auto 0; z-index:90;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:clamp(18px,2.1vw,30px) var(--gut);
  mix-blend-mode:normal;
  transition:background-color .5s var(--ease), backdrop-filter .5s var(--ease),
             padding .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.site-head.is-stuck{
  background:rgba(11,11,12,.72);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--line-soft);
  padding-block:clamp(12px,1.4vw,18px);
}
.site-head__logo img{
  height:clamp(34px,3.1vw,50px); width:auto;
  transition:opacity .4s var(--ease);
}
.site-head__logo:hover img{ opacity:.72; }

.menu-toggle{
  display:inline-flex; align-items:center; gap:.9em;
  font-family:var(--ff-display);
  font-size:clamp(11px,.78vw,13px);
  letter-spacing:.2em; text-transform:uppercase;
  padding:.5em 0;
}
.menu-toggle__bars{ display:block; width:30px; }
.menu-toggle__bars i{
  display:block; height:1px; background:var(--paper);
  transition:transform .45s var(--ease-out), opacity .3s var(--ease);
}
.menu-toggle__bars i:first-child{ margin-bottom:7px; }
.menu-toggle:hover .menu-toggle__bars i:first-child{ transform:translateX(-4px); }
.menu-toggle:hover .menu-toggle__bars i:last-child{ transform:translateX(4px); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars i:first-child{ transform:translateY(4px) rotate(9deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars i:last-child{ transform:translateY(-4px) rotate(-9deg); }

/* ========================================================= OVERLAY-MENÜ */
.nav-overlay{
  position:fixed; inset:0; z-index:80;
  background:var(--ink);
  display:flex; align-items:flex-end;
  padding:clamp(92px,11vh,140px) var(--gut) clamp(32px,5vh,64px);
  overflow-y:auto; overscroll-behavior:contain;
  opacity:0; visibility:hidden;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .75s var(--ease-out), opacity .4s var(--ease), visibility .75s;
}
.nav-overlay.is-open{ opacity:1; visibility:visible; clip-path:inset(0 0 0 0); }
.nav-overlay__inner{ width:100%; max-width:1520px; margin-inline:auto; }

.nav-list li{ border-top:1px solid var(--line-soft); }
.nav-list li:last-child{ border-bottom:1px solid var(--line-soft); }
.nav-list a{
  display:flex; align-items:baseline; gap:clamp(16px,2.4vw,44px);
  padding:clamp(8px,1.1vw,16px) 0;
  font-family:var(--ff-display); font-weight:600;
  font-size:clamp(1.55rem,4.2vw,3.6rem);
  line-height:1.05; letter-spacing:-.03em; text-transform:uppercase;
  color:var(--paper);
  opacity:0; transform:translateY(28px);
  transition:color .4s var(--ease), opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.nav-overlay.is-open .nav-list a{ opacity:1; transform:none; }
.nav-overlay.is-open .nav-list li:nth-child(1) a{ transition-delay:.10s; }
.nav-overlay.is-open .nav-list li:nth-child(2) a{ transition-delay:.16s; }
.nav-overlay.is-open .nav-list li:nth-child(3) a{ transition-delay:.22s; }
.nav-overlay.is-open .nav-list li:nth-child(4) a{ transition-delay:.28s; }
.nav-overlay.is-open .nav-list li:nth-child(5) a{ transition-delay:.34s; }
.nav-overlay.is-open .nav-list li:nth-child(6) a{ transition-delay:.40s; }
.nav-list a:hover{ color:var(--blue-300); }
.nav-list__idx{
  font-size:clamp(11px,.8vw,13px); letter-spacing:.2em;
  color:var(--muted); flex:0 0 auto;
}
.nav-list a:hover .nav-list__txt{ transform:translateX(12px); }
.nav-list__txt{ transition:transform .5s var(--ease-out); display:inline-block; }

.nav-meta{
  display:grid; gap:clamp(20px,3vw,48px);
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  margin-top:clamp(28px,4vw,56px);
  font-size:14px; color:var(--paper);
  opacity:0; transition:opacity .5s var(--ease) .45s;
}
.nav-overlay.is-open .nav-meta{ opacity:1; }
.nav-meta__k{
  font-family:var(--ff-display); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted); margin-bottom:.5em;
}
.nav-meta a:hover{ color:var(--blue-300); }

/* ================================================================== HERO */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(96px,12vh,150px) var(--gut) 0;
  overflow:hidden;
  isolation:isolate;
}
.hero__media{ position:absolute; inset:0; z-index:-2; background:var(--ink); }
.hero__slide{
  position:absolute; inset:0; opacity:0;
  transition:opacity 2.4s var(--ease);
}
.hero__slide.is-active{ opacity:1; }
.hero__slide img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.15) contrast(1.12) brightness(1);
  transform:scale(1.06);
  transition:transform 14s linear;
}
.hero__slide:nth-child(2) img{ object-position:50% 64%; filter:grayscale(.42) contrast(1.14) brightness(.42); }
.hero__slide:nth-child(3) img{ object-position:50% 58%; filter:grayscale(.42) contrast(1.14) brightness(.42); }
.hero__slide.is-active img{ transform:scale(1.13); }

.hero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(11,11,12,.72) 0%, rgba(11,11,12,.12) 28%, rgba(11,11,12,.10) 45%, rgba(11,11,12,.86) 92%),
    linear-gradient(96deg, rgba(11,11,12,.55) 0%, rgba(11,11,12,0) 55%),
    radial-gradient(120% 90% at 78% 18%, rgba(26,44,88,.34) 0%, rgba(26,44,88,0) 60%);
}

.hero__grid{
  flex:1 1 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,26rem);
  grid-template-rows:auto 1fr;
  align-items:start;
  gap:clamp(22px,3vw,48px);
  padding-bottom:clamp(12px,1.8vw,26px);
}
.hero__intro{
  grid-column:2; grid-row:1;
  text-align:right;
  display:flex; flex-direction:column; align-items:flex-end;
  gap:clamp(18px,1.8vw,26px);
}
.hero__text{
  font-size:clamp(14px,.98vw,16.5px);
  line-height:1.6;
  color:rgba(242,241,237,.9);
  max-width:34ch;
  text-wrap:pretty;
}
.hero__claim{
  font-family:var(--ff-display); font-weight:600;
  font-size:clamp(1.05rem,1.62vw,1.7rem);
  letter-spacing:-.015em; text-transform:uppercase;
  line-height:1.08;
  color:var(--paper);
}
.hero__claim::before{
  content:""; display:block; width:44px; height:1px;
  background:var(--blue-300); margin:0 0 .7em auto;
}

.hero__title{
  grid-column:1 / -1; grid-row:2;
  align-self:end;
  font-family:var(--ff-display);
  font-weight:600;
  font-size:max(2.4rem, min(11.5vw, 15.5rem, 27svh));
  line-height:.85;
  letter-spacing:-.045em;
  text-transform:uppercase;
  color:var(--paper);
  margin-left:-.045em;
  text-shadow:0 2px 60px rgba(0,0,0,.35);
}
.hero__title .line > span{ white-space:nowrap; }
.hero__title i{ font-style:normal; color:var(--blue-300); }
.hero__title .line > span{
  transform:translateY(105%);
  animation:heroIn 1.25s var(--ease-out) forwards;
}
.hero__title .line:nth-child(1) > span{ animation-delay:.25s; }
.hero__title .line:nth-child(2) > span{ animation-delay:.38s; }
@keyframes heroIn{ to{ transform:none; } }

.hero__bar{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  border-top:1px solid var(--line);
  padding:clamp(14px,1.5vw,20px) 0 clamp(16px,1.8vw,24px);
  font-family:var(--ff-display);
  font-size:clamp(10.5px,.76vw,12.5px);
  letter-spacing:.2em; text-transform:uppercase;
  color:rgba(242,241,237,.78);
}
.hero__bar a{ transition:color .35s var(--ease); }
.hero__bar a:hover{ color:var(--paper); }
.hero__scroll span{ display:inline-block; animation:nudge 2.6s var(--ease) infinite; }
@keyframes nudge{ 0%,72%,100%{ transform:none; } 84%{ transform:translateY(4px); } }

/* Flache Fenster (Notebooks): Hero-Inhalt kompakter, damit er ganz sichtbar bleibt */
@media (min-width:1024px) and (max-height:1040px){
  .hero{ padding-top:clamp(78px,9.5vh,104px); }
  .hero__intro{ gap:clamp(14px,1.4vw,20px); }
  .hero__text{ font-size:14px; line-height:1.5; max-width:32ch; }
  .hero__claim{ font-size:clamp(1rem,1.35vw,1.35rem); }
  .hero__claim::before{ width:34px; margin-bottom:.55em; }
  .btn-line > span:first-child{ padding:.95em 1.3em; }
  .btn-line__arrow{ width:3em; }
  .hero__bar{ padding-block:clamp(11px,1.2vw,15px) clamp(12px,1.4vw,18px); }
}

/* ============================================================== ÜBER UNS */
.about{ padding-block:var(--sec-y) 0; position:relative; }
.about__head{ margin-bottom:clamp(38px,5vw,80px); }

.about__collage{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(14px,1.6vw,26px);
  padding-inline:var(--gut);
  max-width:1760px; margin-inline:auto;
  padding-bottom:var(--sec-y);
}
.about__fig{ overflow:hidden; background:var(--ink-2); }
.about__fig img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.4s var(--ease-out);
}
.about__fig:hover img{ transform:scale(1.045); }
/* Obere Reihe: beide Bilder exakt gleich hoch, gleiche Ober- und Unterkante.
   Die Hoehe gibt das linke Bild ueber sein Seitenverhaeltnis vor. */
.about__fig--a{ grid-column:1 / span 7; grid-row:1; aspect-ratio:4/3; }
.about__fig--b{ grid-column:8 / span 5; grid-row:1; align-self:stretch; }
/* Untere Reihe: Textspalte und Bild sitzen exakt im Raster,
   dazwischen bleibt eine Spalte frei. */
.about__fig--c{ grid-column:6 / span 7; grid-row:2; aspect-ratio:16/9; margin-top:clamp(18px,3vw,54px); }

.about__text{
  grid-column:1 / span 4; grid-row:2;
  margin-top:clamp(18px,3vw,54px);
  align-self:start;
}
.about__text .lead{
  font-family:var(--ff-display); font-weight:500;
  font-size:clamp(1.2rem,1.8vw,1.9rem);
  line-height:1.16; letter-spacing:-.02em;
  margin-bottom:.8em;
}
.about__text p:not(.lead){ color:rgba(242,241,237,.72); max-width:42ch; }
.about__facts{
  margin-top:clamp(24px,3vw,44px);
  border-top:1px solid var(--line-soft);
}
.about__facts li{
  display:flex; justify-content:space-between; gap:16px;
  padding:.85em 0; border-bottom:1px solid var(--line-soft);
  font-size:14px;
}
.about__facts span{
  font-family:var(--ff-display); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); flex:0 0 auto; padding-top:.35em;
}

/* ============================================================ LEISTUNGEN */
.services{ padding-block:var(--sec-y); background:var(--ink); }
.svc-list{ border-top:1px solid var(--line); }

.svc{
  position:relative;
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:5rem minmax(0,1fr) minmax(0,25rem);
  align-items:center;
  gap:clamp(16px,3vw,56px);
  padding:clamp(26px,3.4vw,54px) var(--gut);
  max-width:1760px; margin-inline:auto;
  transition:background-color .6s var(--ease);
}
.svc::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(90deg, rgba(26,44,88,.42), rgba(26,44,88,0) 72%);
  opacity:0; transition:opacity .6s var(--ease);
}
.svc > *{ position:relative; z-index:1; }
.svc:hover::before{ opacity:1; }

/* Ziffer, Wort und Text starten in jeder Zeile auf derselben Höhe,
   unabhängig davon, wie viele Textzeilen daneben stehen. */
.svc__idx{
  font-family:var(--ff-display); font-size:11px; letter-spacing:.22em;
  color:var(--blue-300); align-self:start; padding-top:1.15em;
  transition:color .5s var(--ease);
}
.svc__title{
  font-family:var(--ff-display); font-weight:600;
  font-size:clamp(2.5rem,7.4vw,8rem);
  line-height:.92; letter-spacing:-.045em; text-transform:uppercase;
  transition:transform .7s var(--ease-out);
}
.svc:hover .svc__title{ transform:translateX(clamp(6px,.9vw,18px)); }
.svc__text{
  color:rgba(242,241,237,.62);
  font-size:clamp(14px,.95vw,15.5px); align-self:start; padding-top:.55em;
  text-wrap:pretty;
}
/* Zusatzzeile, wenn ein Leistungsbereich mehrere Felder umfasst */
.svc__plus{
  display:block;
  font-family:var(--ff-display); font-weight:600;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--blue-300);
  margin-bottom:.9em;
}

/* ===================================================== UNTERNEHMENSGRUPPE */
.brands{ padding-block:var(--sec-y); }
.brands__head{ margin-bottom:clamp(14px,1.4vw,22px); }
.brands__sub{
  color:var(--muted); max-width:52ch;
  margin-bottom:clamp(44px,6vw,90px);
  text-wrap:pretty;
}

/* Drei getrennte Gruppen: Unternehmensgruppe, Referenzen, eigene Titel */
.brands__group + .brands__group{ margin-top:clamp(48px,6vw,96px); }
.brands__gk{
  font-family:var(--ff-display);
  font-size:clamp(12px,.88vw,14.5px);
  letter-spacing:.2em; text-transform:uppercase;
  display:flex; align-items:center; gap:.9em;
  margin-bottom:.7em;
}
.brands__gk span{ color:var(--blue-300); }
.brands__gk::after{
  content:""; flex:1 1 auto; height:1px; background:var(--line);
  max-width:min(320px,26vw);
}
.brands__gs{
  color:var(--muted); font-size:14.5px;
  margin-bottom:clamp(20px,2.4vw,34px);
}
.logo-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:clamp(8px,.9vw,16px);
}
/* Die Referenzgruppe hat sechs Logos. Im Fünferraster bliebe eine einzelne
   Kachel in der zweiten Zeile stehen, was wie ein Fehler aussieht. Sechs
   Spalten halten die Gruppe in einer Zeile; schmaler wird auf Dreier- und
   Zweierreihen umgestellt, die ebenfalls aufgehen. */
.logo-grid--sechs{ grid-template-columns:repeat(6,1fr); }

.logo-grid li{
  background:var(--paper);
  aspect-ratio:16/9;
  display:block;
  padding:clamp(14px,1.7vw,30px);
  overflow:hidden;
  transition:transform .6s var(--ease-out), background-color .5s var(--ease);
}
.logo-grid picture{ display:block; width:100%; height:100%; }
.logo-grid img{
  width:100%; height:100%;
  object-fit:contain; object-position:center;
  filter:saturate(.2) contrast(1.02);
  opacity:.78;
  transition:filter .55s var(--ease), opacity .55s var(--ease), transform .6s var(--ease-out);
}
.logo-grid li:hover{ transform:translateY(-6px); }
.logo-grid li:hover img{ filter:none; opacity:1; transform:scale(1.045); }
@media (hover:none){
  .logo-grid img{ filter:none; opacity:.95; }
}

/* ================================================================ VERLAG */
.press{ padding-top:var(--sec-y); }
.press__intro{ margin-bottom:clamp(48px,6vw,110px); }

.pub{
  position:relative;
  min-height:min(100svh,900px);
  display:grid; align-items:center;
  padding:clamp(56px,7vw,120px) var(--gut);
  overflow:hidden;
  border-top:1px solid var(--line-soft);
}
.pub__media{
  position:absolute; inset:0;
  /* Blocklayout statt Raster: eine automatische Rasterzeile wächst mit dem
     Inhalt, dadurch löst height:100% nicht auf und hochformatige Vorlagen
     liefen unten aus der Fläche. Zentriert wird über object-fit. */
  display:block;
  padding:clamp(40px,6vw,110px) clamp(12px,3vw,64px);
  z-index:0;
}
.pub__media picture{ display:block; width:100%; height:100%; }
.pub__media img{
  width:100%; height:100%;
  object-fit:contain;              /* nichts wird angeschnitten */
  opacity:.5;
  filter:saturate(.62) contrast(1.02);
  transition:opacity .8s var(--ease), filter .8s var(--ease);
}
.pub:hover .pub__media img{ opacity:.72; filter:none; }

.pub__num{
  position:absolute; z-index:2;
  top:clamp(24px,4vw,64px);
  font-family:var(--ff-display); font-weight:700;
  font-size:clamp(3.4rem,8.5vw,8.5rem);
  line-height:.8; letter-spacing:-.05em;
  color:rgba(242,241,237,.10);
  -webkit-text-stroke:1.5px rgba(242,241,237,.4);
  pointer-events:none;
}
.pub--left  .pub__num{ left:var(--gut); }
.pub--right .pub__num{ right:var(--gut); }

.pub__card{
  position:relative; z-index:2;
  background:var(--paper);
  color:var(--ink);
  padding:clamp(28px,3.4vw,58px);
  max-width:min(560px,100%);
  box-shadow:0 40px 120px rgba(0,0,0,.55);
}
.pub--left  .pub__card{ justify-self:start; }
.pub--right .pub__card{ justify-self:end; }

.pub__kicker{
  font-family:var(--ff-display); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--blue); opacity:.85;
  margin-bottom:1.4em;
}
.pub__title{
  font-family:var(--ff-display); font-weight:600;
  font-size:clamp(1.9rem,3.1vw,3.3rem);
  line-height:.98; letter-spacing:-.03em;
  color:var(--blue);
  margin-bottom:.7em;
  overflow-wrap:break-word;
}
/* „Gesundheitskompass" ist das laengste Wort auf der Seite und muss in eine
   Zeile passen – sonst trennt der Browser mitten im Wort („Gesundheitskompa /
   ss"). Bei 2,5rem brauchte das Wort 383 px, die Textflaeche der Karte ist
   aber nur 404 px breit; mit 2,3rem sind es 351 px und damit genug Luft, auch
   wenn statt Archivo eine Ersatzschrift einspringt. */
.pub__title--long{ font-size:clamp(1.5rem,2.4vw,2.3rem); }
.pub__card p:not(.pub__kicker){
  color:rgba(11,11,12,.74); font-size:clamp(14px,.95vw,16px);
  margin-bottom:1em; text-wrap:pretty;
}
.pub__card .link-arrow{ color:var(--blue); margin-top:.6em; }

.pub__swipe{
  display:none;
  font-family:var(--ff-display); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted);
  margin:-.6em 0 clamp(20px,3.4vw,34px);
}

/* Heller Hintergrund der Gesundheitskompass-Grafik abfangen */
.pub--light .pub__media img{ opacity:.42; mix-blend-mode:luminosity; }
.pub--light:hover .pub__media img{ opacity:.62; mix-blend-mode:normal; }

/* Variante ohne Überlappung: die Grafik rückt nach rechts, der Textkasten
   steht links daneben auf dem dunklen Grund. */
@media (min-width:1024px){
  .pub--frei .pub__media{
    padding-left:44%;
    padding-block:clamp(28px,3.4vw,56px);
  }
  .pub--frei .pub__media img{ opacity:.9; mix-blend-mode:normal; }
  .pub--frei:hover .pub__media img{ opacity:1; }
  /* Diese Karte traegt als einzige zusaetzlich die Erscheinungsregionen und
     den laengsten Titel. 520 px statt 460 px geben beidem Platz und bleiben
     unter der Regelbreite der uebrigen Panels (560 px). Das Bild beginnt
     erst bei 44 % der Flaeche, eine Ueberdeckung entsteht dadurch nicht. */
  .pub--frei .pub__card{ max-width:min(520px,40%); }
  .pub--frei .pub__num{ left:var(--gut); }
}

/* Erscheinungsregionen */
.pub__regionen{
  margin-top:clamp(18px,2vw,26px);
  padding-top:clamp(14px,1.6vw,20px);
  border-top:1px solid rgba(11,11,12,.14);
}
.pub__regionen-k{
  font-family:var(--ff-display); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--blue); opacity:.75;
  margin-bottom:.9em !important;
}
.pub__regionen ul{
  display:flex; flex-wrap:wrap; gap:.4em 0;
  font-size:clamp(13px,.9vw,14.5px);
  color:rgba(11,11,12,.74);
}
.pub__regionen li{ display:inline-flex; align-items:center; }
.pub__regionen li:not(:last-child)::after{
  content:"·"; margin:0 .6em; color:var(--blue); opacity:.5;
}
.pub__regionen + .link-arrow{ margin-top:1.5em; }

/* ============================================================ WERBEARTIKEL */
/* Teaser auf der Startseite – führt auf werbeartikel.html */
.wa-teaser{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:min(80svh, 800px);
  display:flex; align-items:center;
  padding-block:clamp(80px,10vw,150px);
  border-top:1px solid var(--line-soft);
}
.wa-teaser__media{ position:absolute; inset:-7% 0; z-index:-2; }
.wa-teaser__media img{
  width:100%; height:100%; object-fit:cover; object-position:74% 62%;
}
.wa-teaser__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(11,11,12,.86) 0%, rgba(11,11,12,.26) 24%, rgba(11,11,12,.3) 56%, rgba(11,11,12,.92) 96%),
    linear-gradient(96deg, rgba(11,11,12,.93) 0%, rgba(11,11,12,.6) 38%, rgba(11,11,12,0) 70%);
}
.wa-teaser__inner{ width:100%; }
.wa-teaser__text{
  color:rgba(242,241,237,.8);
  max-width:44ch;
  margin:clamp(20px,2.4vw,34px) 0 clamp(26px,3vw,44px);
  text-wrap:pretty;
}

@media (max-width:760px){
  .wa-teaser{ min-height:0; }
  .wa-teaser__media img{ object-position:64% 62%; }
  .wa-teaser__scrim{
    background:
      linear-gradient(180deg, rgba(11,11,12,.9) 0%, rgba(11,11,12,.66) 40%, rgba(11,11,12,.94) 100%);
  }
}

/* ================================================== CORPORATE DESIGN & SM */
.corporate{
  padding-block:var(--sec-y);
  background:linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 40%, var(--ink) 100%);
}
.corporate__inner{
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(32px,5vw,96px);
  align-items:center;
}
.corporate__media{
  position:relative; overflow:hidden;
  aspect-ratio:9/14;
  background:#08080A;
}
.corporate__video{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.72) contrast(1.06) brightness(.94);
}
.corporate__videoscrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(11,11,12,.5) 0%, rgba(11,11,12,0) 26%, rgba(11,11,12,0) 68%, rgba(11,11,12,.72) 100%),
    linear-gradient(0deg, rgba(26,44,88,.26), rgba(26,44,88,.26));
  mix-blend-mode:multiply;
}
.corporate__text{ max-width:44rem; }
.corporate__copy{
  color:rgba(242,241,237,.72);
  max-width:46ch;
  margin:clamp(22px,2.6vw,40px) 0 clamp(28px,3.2vw,48px);
}

/* =============================================================== KONTAKT */
.contact{
  padding-block:var(--sec-y);
  border-top:1px solid var(--line-soft);
}
.contact__title{ margin-bottom:clamp(44px,6vw,96px); }
.contact__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;
  border-top:1px solid var(--line);
}
.contact__big,.contact__small{
  display:block;
  padding:clamp(24px,3vw,52px) 0;
  border-bottom:1px solid var(--line);
  position:relative;
}
/* nth-child, nicht nth-of-type: die Zellen sind a / a / div / address */
.contact__grid > :nth-child(odd){ padding-right:clamp(20px,3vw,60px); }
.contact__grid > :nth-child(even){ padding-left:clamp(20px,3vw,60px); border-left:1px solid var(--line); }
.contact__k{
  display:block;
  font-family:var(--ff-display); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted); margin-bottom:.9em;
}
.contact__v{
  display:block;
  font-family:var(--ff-display); font-weight:500;
  font-size:clamp(1.25rem,3vw,2.9rem);
  line-height:1.04; letter-spacing:-.03em;
  transition:color .4s var(--ease), transform .5s var(--ease-out);
}
.contact__v--sm{ font-size:clamp(1rem,1.35vw,1.32rem); line-height:1.45; letter-spacing:0; font-weight:400; }
a.contact__big:hover .contact__v{ color:var(--blue-300); transform:translateX(10px); }

/* ---------------------------------------------------- Ansprechpartner */
/* Eigener, randloser Bereich: das Bild läuft bis an die Seitenkante und
   hat dieselbe Präsenz wie die Medienflächen in den übrigen Abschnitten. */
.ansprech{
  display:grid;
  grid-template-columns:minmax(0,.47fr) minmax(0,.53fr);
  align-items:stretch;
  margin-top:clamp(56px,7vw,120px);
  border-top:1px solid var(--line-soft);
}
.ansprech__media{
  display:flex; flex-direction:column; justify-content:center;
}
.ansprech__bild{
  position:relative;
  aspect-ratio:4/5;
  max-height:78svh;
  overflow:hidden;
  background:var(--ink-2);
}
.ansprech__media img{
  width:100%; height:100%; object-fit:cover; object-position:50% 32%;
  transition:transform 1.6s var(--ease-out);
}
.ansprech:hover .ansprech__media img{ transform:scale(1.035); }
/* weicher Übergang zur dunklen Textfläche */
.ansprech__bild::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(11,11,12,.16) 0%, rgba(11,11,12,0) 14%,
                                    rgba(11,11,12,0) 82%, rgba(11,11,12,.34) 100%);
}

.ansprech__bu{
  /* Zwei Spalten, damit die Namen unter der jeweiligen Bildhälfte stehen */
  display:grid; grid-template-columns:1fr 1fr; gap:.45em clamp(12px,1.6vw,28px);
  padding:clamp(14px,1.4vw,20px) var(--gut) 0;
  font-size:clamp(12.5px,.86vw,14px);
  line-height:1.4;
  color:var(--muted);
}
.ansprech__bu b{
  display:block;
  font-family:var(--ff-display); font-weight:600;
  font-size:clamp(13.5px,.95vw,15.5px);
  letter-spacing:-.005em;
  color:var(--paper);
}

.ansprech__text{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(40px,6vw,96px) var(--gut) clamp(40px,6vw,96px) clamp(28px,4.5vw,84px);
}
.ansprech__head{ margin-bottom:clamp(18px,2vw,30px); }
.ansprech__lead{
  color:rgba(242,241,237,.72);
  font-size:clamp(15px,1.15vw,18px);
  max-width:40ch;
  margin-bottom:clamp(30px,3.6vw,56px);
  text-wrap:pretty;
}
.ansprech__links{
  display:grid; gap:0;
  border-top:1px solid var(--line);
  max-width:42rem;
}
.ansprech__links a{
  display:block;
  padding:clamp(18px,2vw,28px) 0;
  border-bottom:1px solid var(--line);
  transition:padding-left .5s var(--ease-out);
}
.ansprech__links a:hover{ padding-left:14px; }
.ansprech__k{
  display:block;
  font-family:var(--ff-display); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted); margin-bottom:.7em;
}
.ansprech__v{
  display:block;
  font-family:var(--ff-display); font-weight:500;
  font-size:clamp(1.2rem,2.1vw,1.95rem);
  line-height:1.05; letter-spacing:-.025em;
  transition:color .4s var(--ease);
}
.ansprech__links a:hover .ansprech__v{ color:var(--blue-300); }

@media (max-width:860px){
  .ansprech{ grid-template-columns:1fr; }
  /* Hochformat beibehalten – ein 4:3-Ausschnitt würde den Kopf anschneiden.
     Die Breite wird begrenzt, sonst füllt das Bild auf Tablets den Schirm. */
  .ansprech__bild{ aspect-ratio:4/5; max-height:none; width:min(100%,520px); }
  .ansprech__bu{ grid-template-columns:1fr; gap:.8em; padding-top:clamp(12px,3vw,18px); }
  .ansprech__bild::after{
    background:linear-gradient(180deg, rgba(11,11,12,0) 70%, rgba(11,11,12,.35) 100%);
  }
  .ansprech__text{ padding:clamp(28px,6vw,48px) var(--gut) clamp(32px,6vw,56px); }
  .ansprech__links{ max-width:none; }
}

/* ------------------------------------------------------- Social Media */
/* Der Bereich „Folgen Sie uns" ist derzeit nicht eingebunden. Das Markup
   liegt unter _tools/bausteine/social-media.html; diese Stile bleiben
   stehen, damit das Wiedereinsetzen ohne weitere Anpassung funktioniert. */
.social{
  margin-top:clamp(40px,4.6vw,72px);
  padding-top:clamp(28px,3.2vw,48px);
  border-top:1px solid var(--line-soft);
}
.social__list{ display:flex; flex-wrap:wrap; gap:12px; margin-top:.4em; }
.social__list a{
  display:grid; place-items:center;
  width:52px; height:52px;
  border:1px solid var(--line);
  color:rgba(242,241,237,.72);
  transition:color .4s var(--ease), border-color .4s var(--ease),
             background-color .4s var(--ease), transform .5s var(--ease-out);
}
.social__list a:hover{
  color:var(--paper); border-color:var(--paper);
  background:rgba(242,241,237,.07);
  transform:translateY(-3px);
}
/* Kanäle ohne hinterlegte Adresse bleiben sichtbar, sind aber nicht
   anklickbar – sobald die Adresse eingetragen ist, wird der Eintrag aktiv. */
.social__list a[href="#"]{
  opacity:.3; pointer-events:none; cursor:default;
}

@media (max-width:860px){
}

/* ================================================================ FOOTER */
.site-foot{ padding-block:clamp(40px,5vw,72px); border-top:1px solid var(--line-soft); }
.site-foot__inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:clamp(24px,3vw,48px);
}
.site-foot__logo{ height:clamp(30px,2.6vw,42px); width:auto; opacity:.8; }
.site-foot__nav{ display:flex; flex-wrap:wrap; gap:clamp(14px,1.8vw,32px); }
.site-foot__nav a,.site-foot__legal a{
  font-family:var(--ff-display); font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
  transition:color .35s var(--ease);
}
.site-foot__nav a:hover,.site-foot__legal a:hover{ color:var(--paper); }
.site-foot__legal{
  display:flex; flex-wrap:wrap; align-items:center; gap:clamp(14px,1.6vw,26px);
  font-size:11.5px; color:var(--muted);
}
.site-foot__legal p{ letter-spacing:.04em; }

/* ============================================================== Reveals */
[data-reveal]{
  opacity:0; transform:translateY(34px);
  transition:opacity .95s var(--ease-out), transform .95s var(--ease-out);
}
[data-reveal].is-in{ opacity:1; transform:none; }

[data-reveal] .line > span{
  transform:translateY(105%);
  transition:transform 1.05s var(--ease-out);
}
[data-reveal].is-in .line > span{ transform:none; }
[data-reveal].is-in .line:nth-child(2) > span{ transition-delay:.08s; }
[data-reveal].is-in .line:nth-child(3) > span{ transition-delay:.16s; }
[data-reveal].is-in .line:nth-child(4) > span{ transition-delay:.24s; }

.logo-grid li[data-reveal]{ transition-delay:calc(var(--i,0) * 45ms); }

/* ========================================================== Breakpoints */
@media (max-width:1180px){
  .logo-grid{ grid-template-columns:repeat(4,1fr); }
  .logo-grid--sechs{ grid-template-columns:repeat(3,1fr); }
  .hero__grid{ grid-template-columns:minmax(0,1fr) minmax(0,22rem); }
  .svc{ grid-template-columns:4rem minmax(0,1fr) minmax(0,19rem); gap:clamp(14px,2.2vw,34px); }
}

@media (max-width:1023px){
  /* Auf schmalen Geräten brechen die Überschriften mehrzeilig um –
     dafür brauchen sie mehr Durchschuss als auf dem Desktop. */
  .display{ line-height:.99; }
  .display--tight{ line-height:1.0; }
  .hero__title{ line-height:.9; }
  .svc__title{ line-height:.96; }
  .pub__title{ line-height:1.04; }

  .hero{ justify-content:flex-end; }
  .hero__grid{
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    gap:clamp(28px,5vw,48px);
  }
  .hero__intro{
    grid-column:1; grid-row:1;
    text-align:left; align-items:flex-start;
  }
  .hero__claim::before{ margin:0 auto .7em 0; }
  .hero__title{ grid-row:2; }
  .hero__bar p{ display:none; }
  .hero__bar{ justify-content:space-between; }

  .about__collage{ grid-template-columns:repeat(6,1fr); }
  .about__fig--a{ grid-column:1 / span 6; grid-row:1; aspect-ratio:16/11; }
  .about__fig--b{ grid-column:1 / span 3; grid-row:2; aspect-ratio:3/4; align-self:start; }
  .about__fig--c{ grid-column:4 / span 3; grid-row:2; aspect-ratio:3/4; margin-top:0; align-self:start; }
  .about__text{ grid-column:1 / span 6; grid-row:3; margin-top:clamp(24px,4vw,44px); padding-right:0; }
  .about__text p:not(.lead){ max-width:56ch; }

  .svc{
    grid-template-columns:3.4rem minmax(0,1fr);
    align-items:start;
    gap:clamp(10px,2vw,24px) clamp(14px,2.4vw,28px);
  }
  /* Untere Grenze mitskalieren, damit auch lange Begriffe wie „Webdesign“
     auf schmalen Geräten vollständig stehen. */
  .svc__title{ font-size:clamp(1.95rem,9vw,4.6rem); }
  .svc__idx{ padding-top:.55em; }
  .svc__text{ grid-column:2; align-self:start; padding-top:.9em; max-width:52ch; }

  .logo-grid{ grid-template-columns:repeat(3,1fr); }

  .pub{ min-height:0; display:block; padding-block:clamp(40px,7vw,72px); }
  .pub__media{
    position:relative; inset:auto; padding:0; display:block;
    margin-bottom:clamp(14px,2.4vw,22px);
    overflow-x:auto; overscroll-behavior-x:contain;
    scrollbar-width:thin; transform:none !important;
  }
  .pub__media picture{ display:block; width:max-content; }
  .pub__media img{
    height:clamp(230px,38vh,380px); width:auto; max-width:none;
    opacity:1; filter:none; mix-blend-mode:normal;
  }
  .pub__swipe{ display:block; }

  /* Der Gesundheitskompass ist hochformatig – hier gibt es nichts zu wischen.
     Das Bild steht in voller Breite statt in der schmalen Scrollspur. */
  .pub--frei .pub__media{ overflow-x:visible; }
  .pub--frei .pub__media picture{ width:auto; }
  .pub--frei .pub__media img{
    width:min(520px,100%); height:auto; max-width:100%;
  }
  .pub--frei .pub__swipe{ display:none; }
  .pub__num{ position:static; display:block; margin-bottom:.1em; font-size:clamp(4rem,17vw,9rem); }
  .pub__card{ max-width:none; }

  .corporate__inner{ grid-template-columns:1fr; }
  .corporate__media{ aspect-ratio:4/5; max-width:520px; }
}

@media (max-width:720px){
  .hero{ padding-top:clamp(96px,20vh,150px); }
  .hero__text{ font-size:14.5px; max-width:40ch; }
  .hero__title{ letter-spacing:-.04em; margin-left:-.03em; }
  .hero__bar{ font-size:10px; letter-spacing:.14em; gap:12px; }

  .display{ font-size:clamp(2.15rem,10.4vw,3.6rem); line-height:1.05; }
  .display--tight{ font-size:clamp(2rem,9.4vw,3.2rem); line-height:1.06; }
  .hero__title{ line-height:.93; }
  .svc__title{ line-height:1; }
  .pub__title{ line-height:1.1; }
  .contact__v{ line-height:1.14; }
  .nav-list a{ line-height:1.16; }

  .logo-grid,
  .logo-grid--sechs{ grid-template-columns:repeat(2,1fr); gap:8px; }

  .contact__grid{ grid-template-columns:1fr; }
  .contact__grid > :nth-child(even){ padding-left:0; border-left:0; }
  .contact__grid > :nth-child(odd){ padding-right:0; }

  .site-foot__inner{ flex-direction:column; align-items:flex-start; }
}

@media (max-width:420px){
  .logo-grid li{ aspect-ratio:3/2; }
}

/* ------------------------------------------------------- Reduced motion */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  [data-reveal] .line > span,.hero__title .line > span{ transform:none !important; }
  .hero__slide img{ transform:none; }
}