@import url('fonts/fonts.css');

/* ═══════════════════════════════════════════════════
   ONLYONEWAY – Stylesheet v5
   Primärfarbe: #1a8fb8 (freundlicheres Blau)
   Ink aufgehellt, wärmere Töne, mehr Luft
   ═══════════════════════════════════════════════════ */
:root {
  /* Primärblau – klarer, freundlicher, etwas wärmer */
  --blue:#2196c4; --blue-dark:#1779a0; --blue-xd:#135e7e;
  --blue-pale:#e3f3fb; --blue-light:rgba(33,150,196,.09);
  --blue-mid:rgba(33,150,196,.20); --blue-bdr:rgba(33,150,196,.28);

  /* Ink – aufgehellt, warm-grau statt fast-schwarz */
  --ink:#1e2d3a; --ink-80:#31424f; --ink-60:#526070; --ink-40:#8597a5;
  --ink-20:#bdc8d1; --ink-10:#e5eaee; --ink-05:#f1f4f7;
  --white:#fff; --border:#dce3ea;

  --display:'Plus Jakarta Sans',sans-serif;
  --serif:'Lora',Georgia,serif;
  --r:6px; --r2:12px; --r3:20px;
  --sh-xs:0 1px 4px rgba(20,30,42,.05);
  --sh-sm:0 2px 12px rgba(20,30,42,.07);
  --sh-md:0 8px 30px rgba(20,30,42,.10);
  --sh-lg:0 20px 60px rgba(20,30,42,.13);
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ══════════════════════════════════════════════
   BODY & TYPOGRAFIE – Kernfix "nicht gequetscht"
   Problem war:
   1. Source Serif 4 ohne font-optical-sizing
   2. Zu enges letter-spacing auf Fließtext
   3. Zu geringe line-height (1.7)
   4. font-weight:300 zu zart auf Bildschirm
   ══════════════════════════════════════════════ */
body {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 400;              /* 300 wirkt auf Screens zu dünn */
  line-height: 1.78;             /* mehr Zeilendurchschuss */
  letter-spacing: 0.012em;       /* minimales positives Tracking */
  word-spacing: 0.01em;
  color: var(--ink);
  background: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;     /* Source Serif 4 optische Größen aktivieren */
}

/* ── ÜBERSCHRIFTEN (Syne Display) ── */
/* Syne braucht kein negatives Tracking – wirkt sonst gequetscht */
h1, h2, h3, h4, h5 {
  font-family: var(--display);
  font-optical-sizing: auto;
  line-height: 1.15;
  letter-spacing: -0.01em;       /* dezent, nicht zu eng */
}

/* Große Display-Headings dürfen etwas negativer sein */
.sec-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.85rem, 3.5vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin-top: .65rem;
}
.sec-sub {
  color: var(--ink-60);
  max-width: 580px;
  margin-top: .85rem;
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.78;
  letter-spacing: 0.01em;
}

/* ── PROSE (Fließtext) ── */
.prose p {
  color: var(--ink-60);
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: 1.1rem;
  line-height: 1.82;
  letter-spacing: 0.012em;
}
.prose p:last-child { margin-bottom: 0 }
.prose strong { color: var(--ink); font-weight: 600 }
.prose a { color: var(--blue) }
.prose a:hover { text-decoration: underline }

/* ── ARTIKEL-BODY ── */
.article-body p {
  color: var(--ink-60);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.82;
  letter-spacing: 0.012em;
  margin-bottom: 1.1rem;
}
.article-body strong { color: var(--ink); font-weight: 600 }

/* ── KLEINTEXT / INTERFACE ── */
/* Syne in kleinen Größen: positives Tracking, nicht eng */
.chip, .btn, .tag, .topbar, .footer-nav a,
.nav-links > li > a, .breadcrumb, .certs-label,
.vortrag-year, .vortrag-event, .event-date,
.kpi-l, .stat-l, .brand-text span,
.pp-feat, .sidebar-box ul li a,
.prov-table th, .prov-table td,
small { font-optical-sizing: auto }

/* ── LAYOUT ── */
.wrap { width:100%; max-width:1200px; margin:0 auto; padding:0 clamp(1.5rem,4vw,3rem) }
.section { padding: clamp(5rem,9vw,8.5rem) 0 }
.section-sm { padding: clamp(3rem,5vw,5rem) 0 }
.divider { height: 1px; background: var(--border) }

/* ── CHIP ── */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--display); font-size: .65rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--blue);
}
.chip::before { content:''; width:20px; height:2px; background:var(--blue); flex-shrink:0 }

/* ── TAG ── */
.tag {
  display: inline-flex; padding: 4px 12px; border-radius: 100px;
  font-family: var(--display); font-size: .62rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  border: 1px solid var(--blue-bdr); color: var(--blue); background: var(--blue-light);
}
.tag-row { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.5rem }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--display); font-weight: 700; font-size: .75rem;
  letter-spacing: .05em; text-transform: uppercase;
  padding: 11px 24px; border-radius: var(--r);
  text-decoration: none; transition: all .2s; border: none;
  cursor: pointer; white-space: nowrap; line-height: 1;
}
.btn-blue  { background: var(--blue); color: #fff }
.btn-blue:hover  { background: var(--blue-dark); transform: translateY(-2px); box-shadow: 0 6px 22px rgba(33,150,196,.40) }
.btn-ghost { border: 2px solid var(--blue); color: var(--blue); background: transparent }
.btn-ghost:hover { background: var(--blue); color: #fff; transform: translateY(-2px) }
.btn-dark  { background:linear-gradient(135deg,#1a2d3e 0%,#1e3547 100%); color: #fff }
.btn-dark:hover  { background: var(--ink-80); transform: translateY(-2px) }
.btn-white { background: #fff; color: var(--blue) }
.btn-white:hover { background: var(--blue-pale); transform: translateY(-2px) }
.btn-white-ghost { border: 2px solid rgba(255,255,255,.4); color: #fff; background: transparent }
.btn-white-ghost:hover { background: rgba(255,255,255,.1) }
.btn-sm { padding: 8px 18px; font-size: .68rem }
.btn-lg { padding: 14px 32px; font-size: .82rem }

/* ── TOPBAR ── */
.topbar {
  background: var(--blue-xd); color: rgba(255,255,255,.75);
  font-family: var(--display); font-size: .68rem; font-weight: 600;
  letter-spacing: .05em; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.06);
}
.topbar .wrap { display: flex; justify-content: flex-end; align-items: center; gap: 2rem; flex-wrap: wrap }
.topbar a { color: rgba(255,255,255,.6); text-decoration: none; transition: color .15s }
.topbar a:hover { color: #fff }
.tb-markets { color: rgba(255,255,255,.35); margin-right: auto; font-weight: 600 }

/* ── SITE NAV ── */
.site-nav {
  position: sticky; top: 0; z-index: 200;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(18px) saturate(200%);
  -webkit-backdrop-filter: blur(18px) saturate(200%);
  border-bottom: 3px solid var(--blue); box-shadow: var(--sh-sm);
}
.nav-wrap { display: flex; align-items: stretch; height: 58px }
.nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; padding-right: 1.25rem; border-right: 1px solid var(--border); flex-shrink: 0 }
.nav-brand img { height: 26px; width: auto }
.brand-text strong { display: block; font-family: var(--display); font-weight: 800; font-size: .92rem; letter-spacing: .03em; color: var(--ink); line-height: 1.1 }
.brand-text span   { display: block; font-family: var(--display); font-size: .58rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-40); margin-top: 1px }
.nav-links { display: flex; list-style: none; align-items: stretch; margin-left: .25rem; flex: 1 }
.nav-links > li { display: flex; align-items: stretch }
.nav-links > li > a {
  display: flex; align-items: center; padding: 0 .55rem;
  font-family: var(--display); font-size: .63rem; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase;
  color: var(--ink-60); text-decoration: none;
  border-bottom: 3px solid transparent; margin-bottom: -3px;
  transition: color .15s, border-color .15s; white-space: nowrap;
}
.nav-links > li > a:hover,
.nav-links > li > a.active { color: var(--blue); border-bottom-color: var(--blue) }
.nav-end { margin-left: auto; display: flex; align-items: center; gap: .5rem; padding-left: .75rem; border-left: 1px solid var(--border); flex-shrink: 0 }
.nav-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; margin-left: auto; background: none; border: none }
.nav-toggle span { display: block; width: 22px; height: 2px; background:linear-gradient(135deg,#1a2d3e 0%,#1e3547 100%); border-radius: 2px; transition: all .3s }
.nav-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px) }
.nav-toggle.open span:nth-child(2) { opacity: 0 }
.nav-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px) }

/* ── SUB-HERO ── */
.sub-hero { background: linear-gradient(135deg,#1a2d3e 0%,#1e3547 100%); color: #fff; padding: clamp(3rem,6vw,5rem) 0; position: relative; overflow: hidden }
.sub-hero::before { content:''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg,rgba(24,144,191,.05) 0,rgba(24,144,191,.05) 1px,transparent 1px,transparent 80px),repeating-linear-gradient(0deg,rgba(24,144,191,.04) 0,rgba(24,144,191,.04) 1px,transparent 1px,transparent 80px); pointer-events: none }
.sub-hero-accent { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(to bottom,var(--blue),var(--blue-dark)) }
.sub-hero-inner { position: relative }
.sub-hero h1 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2rem,4vw,3.4rem);
  line-height: 1.1; letter-spacing: -0.015em;
  margin: .75rem 0 1rem; color: #fff;
}
.sub-hero h1 em { color: var(--blue); font-style: normal }
.sub-hero .lead {
  color: rgba(255,255,255,.65); font-size: clamp(.95rem,1.4vw,1.08rem);
  font-weight: 400; line-height: 1.78; letter-spacing: 0.01em; max-width: 640px;
}
.breadcrumb {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--display); font-size: .65rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.3); margin-bottom: 1.5rem;
}
.breadcrumb a { color: rgba(255,255,255,.3); text-decoration: none; transition: color .15s }
.breadcrumb a:hover { color: rgba(255,255,255,.7) }
.breadcrumb span { opacity: .4 }

/* ── ARTICLE LAYOUT ── */
.article-layout { display: grid; grid-template-columns: 1fr 320px; gap: 4rem; align-items: start }
.article-sidebar { position: sticky; top: 80px }
.sidebar-box { background: var(--ink-05); border: 1px solid var(--border); border-radius: var(--r2); padding: 1.75rem; margin-bottom: 1.25rem }
.sidebar-box h4 { font-family: var(--display); font-weight: 800; font-size: .88rem; margin-bottom: 1rem; color: var(--ink); letter-spacing: -.005em }
.sidebar-box ul { list-style: none }
.sidebar-box ul li { border-bottom: 1px solid var(--border); padding: .55rem 0 }
.sidebar-box ul li:last-child { border-bottom: none }
.sidebar-box ul li a { font-family: var(--display); font-size: .75rem; font-weight: 600; color: var(--ink-60); text-decoration: none; transition: color .15s; display: flex; align-items: center; gap: 6px; letter-spacing: .03em }
.sidebar-box ul li a::before { content: '›'; color: var(--blue); font-size: .8rem }
.sidebar-box ul li a:hover { color: var(--blue) }
.sidebar-cta { background: var(--blue); border-radius: var(--r2); padding: 1.75rem; text-align: center; color: #fff }
.sidebar-cta h4 { font-family: var(--display); font-weight: 800; font-size: .9rem; margin-bottom: .6rem; letter-spacing: -.005em }
.sidebar-cta p { font-size: .85rem; color: rgba(255,255,255,.75); margin-bottom: 1.25rem; font-weight: 400; line-height: 1.65 }
.article-body h2 { font-family: var(--display); font-weight: 800; font-size: 1.4rem; margin: 2.5rem 0 .85rem; color: var(--ink); letter-spacing: -.01em }
.article-body h3 { font-family: var(--display); font-weight: 700; font-size: 1.05rem; margin: 2rem 0 .6rem; color: var(--blue); letter-spacing: -.005em }
.article-body ul, .article-body ol { margin: 1rem 0 1.5rem 1.5rem; color: var(--ink-60); font-size: .97rem; font-weight: 400 }
.article-body li { margin-bottom: .5rem; line-height: 1.72 }
.article-body img { width: 100%; border-radius: var(--r2); margin: 1.5rem 0; box-shadow: var(--sh-sm) }
.article-body table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .88rem }
.article-body th { background: var(--blue); color: #fff; font-family: var(--display); font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; padding: .75rem 1rem; text-align: left }
.article-body td { padding: .6rem 1rem; border-bottom: 1px solid var(--border); color: var(--ink-60) }
.article-body tr:hover td { background: var(--blue-light) }
.info-box { background: var(--blue-light); border: 1px solid var(--blue-bdr); border-radius: var(--r2); padding: 1.5rem 2rem; margin: 1.75rem 0 }
.info-box h4 { font-family: var(--display); font-weight: 800; font-size: .88rem; color: var(--blue); margin-bottom: .6rem; letter-spacing: -.005em }
.info-box ul { list-style: none; margin: 0 }
.info-box li { font-size: .88rem; color: var(--ink-60); padding: .35rem 0; padding-left: 1.1rem; position: relative; border-bottom: 1px solid rgba(24,144,191,.1) }
.info-box li::before { content:'›'; position: absolute; left: 0; color: var(--blue); font-weight: 700 }
.info-box li:last-child { border-bottom: none }

/* ── CTA STRIP ── */
.cta-strip {
  background: linear-gradient(135deg,var(--blue-xd) 0%,var(--blue) 100%);
  color: #fff; padding: clamp(4rem,7vw,6rem) 0; text-align: center; position: relative; overflow: hidden;
}
.cta-strip::before { content:''; position: absolute; right: -100px; top: -100px; width: 500px; height: 500px; border-radius: 50%; background: rgba(255,255,255,.04); pointer-events: none }
.cta-strip h2 { font-family: var(--display); font-weight: 800; font-size: clamp(1.85rem,3.5vw,2.9rem); letter-spacing: -.015em; margin-bottom: 1rem; position: relative }
.cta-strip p { font-size: 1.05rem; color: rgba(255,255,255,.7); max-width: 540px; margin: 0 auto 2.5rem; font-weight: 400; line-height: 1.78; letter-spacing: .01em; position: relative }
.cta-contacts { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; margin-top: 1.5rem; font-family: var(--display); font-size: .75rem; font-weight: 600; letter-spacing: .05em; position: relative }
.cta-contacts a { color: rgba(255,255,255,.55); text-decoration: none; transition: color .15s }
.cta-contacts a:hover { color: #fff }

/* ── FOOTER ── */
footer { background:linear-gradient(135deg,#1a2d3e 0%,#1e3547 100%); padding: 2.5rem 0; border-top: 1px solid rgba(255,255,255,.06) }
.footer-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.25rem }
.foot-brand { display: flex; align-items: center; gap: 10px; text-decoration: none }
.foot-brand img { height: 24px; width: auto; filter: brightness(.45) }
.foot-brand span { font-family: var(--display); font-size: .85rem; color: rgba(255,255,255,.3); font-weight: 700; letter-spacing: .04em }
footer p { font-family: var(--display); font-size: .7rem; color: rgba(255,255,255,.25) }
.footer-nav { display: flex; gap: 1.5rem; flex-wrap: wrap }
.footer-nav a { font-family: var(--display); font-size: .7rem; color: rgba(255,255,255,.28); text-decoration: none; transition: color .15s; font-weight: 600; letter-spacing: .05em }
.footer-nav a:hover { color: rgba(255,255,255,.7) }

/* ── REVEAL ── */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1) }
.reveal.in { opacity: 1; transform: translateY(0) }

/* ── NETWORK BADGES ── */
.net-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 100px; font-family: var(--display); font-size: .63rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase }
.net-awin    { background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd }
.net-webgains{ background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa }
.net-adcell  { background: #faf5ff; color: #7e22ce; border: 1px solid #e9d5ff }
.net-belboon { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0 }
.net-impact  { background: #fff1f2; color: #be123c; border: 1px solid #fecdd3 }

/* ── CERT BADGES ── */
.certs-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--border) }
.certs-label { font-family: var(--display); font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-40); white-space: nowrap; margin-right: .5rem }
.cert-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: var(--r);
  font-family: var(--display); font-size: .68rem; font-weight: 700; letter-spacing: .05em;
  border: 1.5px solid var(--border); color: var(--ink-60); background: var(--white);
  transition: all .2s; white-space: nowrap;
}
.cert-badge:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-pale) }
.cert-badge .cb-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0 }

/* ── PROJEKTE LINKS ── */
.projekte-links { display: flex; gap: 1rem; flex-wrap: wrap; flex: 1 }
.plink-box {
  display: flex; align-items: center; gap: 1rem;
  background: var(--white); border: 1.5px solid var(--border); border-radius: var(--r2);
  padding: 1.1rem 1.5rem; text-decoration: none; color: inherit;
  transition: all .2s; flex: 1; min-width: 260px; box-shadow: var(--sh-xs);
}
.plink-box:hover { border-color: var(--blue); box-shadow: 0 4px 16px rgba(24,144,191,.15); transform: translateY(-2px) }
.plink-icon { font-size: 1.5rem; flex-shrink: 0 }
.plink-box div { flex: 1; line-height: 1.4 }
.plink-box strong { display: block; font-family: var(--display); font-weight: 800; font-size: .88rem; color: var(--ink); margin-bottom: .2rem; letter-spacing: -.005em }
.plink-box span { font-size: .8rem; color: var(--ink-40); font-family: var(--display); font-weight: 500; letter-spacing: .02em }
.plink-arrow { font-size: 1.1rem; color: var(--blue); flex-shrink: 0; transition: transform .2s; font-family: var(--display); font-weight: 700 }
.plink-box:hover .plink-arrow { transform: translate(2px,-2px) }

/* ── SPEAKER ── */
.speaker-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start }
.speaker-img img { width: 100%; border-radius: var(--r2); border: 1px solid var(--border) }
.speaker-col h4 { font-family: var(--display); font-weight: 800; font-size: .88rem; color: var(--ink); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 1.25rem; padding-bottom: .75rem; border-bottom: 2px solid var(--blue); display: inline-block }
.vortrag-list { display: flex; flex-direction: column }
.vortrag-item { display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; align-items: flex-start }
.vortrag-item:last-child { border-bottom: none }
.vortrag-item:hover .vortrag-title { color: var(--blue) }
.vortrag-year { font-family: var(--display); font-size: .7rem; font-weight: 700; color: var(--blue); min-width: 38px; padding-top: 2px; letter-spacing: .05em }
.vortrag-title { font-family: var(--display); font-size: .88rem; font-weight: 700; color: var(--ink); margin-bottom: .2rem; transition: color .2s; letter-spacing: -.005em }
.vortrag-event { font-size: .8rem; color: var(--ink-40); letter-spacing: .01em }
.events-list { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.5rem }
.event-item { display: flex; align-items: center; gap: 1rem; padding: .85rem 1rem; background: var(--ink-05); border: 1px solid var(--border); border-radius: var(--r); border-left: 3px solid var(--blue) }
.event-date { font-family: var(--display); font-size: .72rem; font-weight: 800; color: var(--blue); white-space: nowrap; min-width: 90px; letter-spacing: .02em }
.event-name { font-family: var(--display); font-size: .85rem; font-weight: 700; color: var(--ink); letter-spacing: -.005em }
.event-loc { font-size: .78rem; color: var(--ink-40); letter-spacing: .01em }

/* ── RESPONSIVE ── */
@media(max-width:1100px) {
  .article-layout { grid-template-columns: 1fr }
  .article-sidebar { position: static }
}
@media(max-width:900px) {
  .speaker-layout { grid-template-columns: 1fr }
}
@media(max-width:1060px) {
  .nav-links, .nav-end { display: none }
  .nav-toggle { display: flex }
  .site-nav.open .nav-links {
    display: flex; flex-direction: column; position: absolute;
    top: 58px; left: 0; right: 0; background: #fff;
    border-bottom: 3px solid var(--blue); padding: .75rem 1rem;
    z-index: 199; box-shadow: var(--sh-md);
  }
  .site-nav.open .nav-links > li > a {
    padding: .7rem .5rem; border-bottom: 1px solid var(--border); margin-bottom: 0;
  }
  .plink-box { min-width: 0 }
  .projekte-links { flex-direction: column }
}

/* ══════════════════════════════════════════════
   MOBILE-FIRST RESPONSIVE – vollständige Abdeckung
   ══════════════════════════════════════════════ */

/* ── Nav collapse at 1060px if needed ── */
@media(max-width:1060px){
  .nav-links > li > a { padding: 0 .55rem; font-size: .64rem; letter-spacing:.03em }
  .brand-text span { display: none }
}
/* ── Tablet 900px ── */
@media(max-width:900px){
  /* Ref Grid: 3 Spalten */
  .ref-grid{grid-template-columns:repeat(3,1fr) !important}
  /* PP Grid: 2 Spalten */
  .pp-grid{grid-template-columns:1fr 1fr !important}
  /* Article layout */
  .article-layout{grid-template-columns:1fr}
  .article-sidebar{position:static}
  /* Speaker */
  .speaker-layout{grid-template-columns:1fr}
  /* How-bar */
  .how-bar{grid-template-columns:1fr 1fr}
  /* KPI bar */
  .kpi-bar{flex-wrap:wrap}
  .kpi-cell{flex:1 1 50%}
  /* Slides grid */
  .slides-grid{grid-template-columns:1fr !important}
  .lm-cards{grid-template-columns:1fr !important}
}

/* ── Mobile 640px ── */
@media(max-width:640px){
  /* ── Ref logos ── */
  .ref-grid{grid-template-columns:repeat(2,1fr) !important}
  .ref-logo{min-height:88px;padding:1rem}
  .ref-logo img{max-width:100px;max-height:48px}

  /* ── PP Grid ── */
  .pp-grid{grid-template-columns:1fr !important}
  .pp-logo-wrap img{max-height:52px;max-width:130px}
  .pp-card{padding:1.5rem 1.25rem}
  .pftab{font-size:.65rem;padding:7px 12px}

  /* ── Stats ── */
  .hero-stats{grid-template-columns:1fr 1fr}
  .kpi-n{font-size:1.9rem}

  /* ── Service / Layout grids ── */
  .service-tiles{grid-template-columns:1fr !important}
  .agentur-cols{grid-template-columns:1fr !important}
  .svc-layout,.svc-layout.reverse{grid-template-columns:1fr !important;direction:ltr !important}
  .consulting-hero{grid-template-columns:1fr !important}
  .schulung-modules{grid-template-columns:1fr !important}

  /* ── Verlage / CC ── */
  .verlage-hero-inner{grid-template-columns:1fr !important}
  .adv-split{grid-template-columns:1fr !important}
  .adv-formats{grid-template-columns:1fr !important}
  .how-steps-row{grid-template-columns:1fr !important}
  .pub-types{grid-template-columns:1fr 1fr !important}
  .format-band{grid-template-columns:1fr !important}
  .split-2,.split-r,.split-3{grid-template-columns:1fr !important}

  /* ── Article cards ── */
  .articles-grid{grid-template-columns:1fr !important}
  .ac.featured{grid-column:span 1 !important}
  .ac-img{height:140px}

  /* ── Art page ── */
  .art-layout{grid-template-columns:1fr !important}
  .art-toc{position:static !important}
  .art-content table{font-size:.78rem;display:block;overflow-x:auto}
  .actors-grid,.goal-grid,.model-grid{grid-template-columns:1fr !important}
  .seg-grid{grid-template-columns:1fr 1fr}

  /* ── Danke pages ── */
  .danke-grid{grid-template-columns:1fr !important}

  /* ── Buttons + CTAs ── */
  .hero-btns{flex-direction:column;align-items:stretch}
  .hero-btns .btn{justify-content:center;text-align:center}
  .btn-lg{padding:13px 24px;font-size:.78rem}
  .cta-box,.art-cta{flex-direction:column;gap:1.25rem;padding:1.75rem 1.5rem}
  .cta-box-btns,.art-cta a{width:100%;justify-content:center;text-align:center}

  /* ── Typography scaling ── */
  .sec-title{font-size:clamp(1.5rem,5.5vw,2rem)}
  h1{font-size:clamp(1.6rem,6vw,2.2rem)}
  .lead{font-size:.95rem}

  /* ── Nav ── */
  .topbar .wrap{justify-content:center;gap:1rem}
  .tb-markets{display:none}

  /* ── Footer ── */
  .footer-row{flex-direction:column;gap:.75rem;text-align:center}
  .footer-nav{justify-content:center;flex-wrap:wrap;gap:.35rem .75rem}

  /* ── CTA strip ── */
  .cta-contacts{gap:1rem;font-size:.68rem}
  .cta-strip .calendly-inline-widget{height:360px !important}

  /* ── Section padding ── */
  .section{padding:4rem 0}
  .cc-sec{padding:2.75rem 0}
  .chapter{padding:2rem 0}

  /* ── Network badges ── */
  .net-legend{gap:.4rem;flex-wrap:wrap}
  .net-badge{font-size:.58rem;padding:4px 10px}

  /* ── Forms ── */
  .form-row{grid-template-columns:1fr !important}
  .certs-row{gap:.5rem}
  .projekte-links{flex-direction:column}
  .plink-box{min-width:0}

  /* ── Misc inline grids ── */
  .media-grid{grid-template-columns:1fr 1fr !important}
  .metrics-grid{grid-template-columns:1fr !important}
  .steps-band{grid-template-columns:1fr !important}
  .models-grid{grid-template-columns:1fr !important}
  .fmt-grid{grid-template-columns:1fr !important}

  /* ── Sub-hero h1 ── */
  .sub-hero h1{font-size:clamp(1.4rem,7.5vw,2rem) !important}
  .sub-hero .lead{font-size:.9rem}
  .sub-hero-inner{overflow:hidden}

  /* ── Hero (index.html) already fixed inline, belt+suspenders ── */
  .hero-inner{grid-template-columns:1fr !important}
  .hero-visual{display:none !important}
}

/* ── Very small mobile 360px ── */
@media(max-width:360px){
  .sub-hero h1{font-size:clamp(1.25rem,8vw,1.6rem) !important}
  .hero-stats{grid-template-columns:1fr}
  .pub-types{grid-template-columns:1fr !important}
  .seg-grid{grid-template-columns:1fr}
  .media-grid{grid-template-columns:1fr !important}
  .panel-tabs{flex-direction:column}
  .panel-tab{text-align:center}
  .wrap{padding:0 1rem}
}

@media(max-width:400px){
  .ref-grid{grid-template-columns:1fr 1fr !important}
  .hero-stats{grid-template-columns:1fr 1fr}
  .stat-n{font-size:1.6rem}
  .sec-title{font-size:1.6rem}
  .sub-hero h1{font-size:1.75rem}
  .nav-brand img{height:24px}
  .brand-text strong{font-size:.88rem}
}

/* ── Tap target minimum (accessibility) ── */
@media(max-width:1060px){
  .btn{min-height:44px}
  .ref-logo{min-height:76px}
  .pftab,.ftab{min-height:40px}
}

/* ══════════════════════════════════════════════
   EMBED WRAPPER (SlideShare, YouTube)
   DSGVO-konform: erst nach Klick laden
   ══════════════════════════════════════════════ */
.embed-wrapper{margin:2rem 0;width:100%}
.embed-consent-block{
  background:var(--ink-05);border:1.5px solid var(--border);
  border-radius:var(--r2);padding:2.5rem 2rem;
  text-align:center;min-height:200px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;
  background-size:cover;background-position:center;
  position:relative;overflow:hidden;
}
.youtube-embed .embed-consent-block::before{
  content:'';position:absolute;inset:0;
  background:rgba(15,25,35,.72);
}
.embed-consent-overlay{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:.75rem}
.embed-consent-icon{font-size:2.5rem;line-height:1}
.embed-consent-block p{font-size:.88rem;color:var(--ink-60);max-width:420px;line-height:1.6;margin:0}
.youtube-embed .embed-consent-block p{color:rgba(255,255,255,.8)}
.embed-consent-note{font-size:.75rem !important;color:var(--ink-40) !important}
.youtube-embed .embed-consent-note{color:rgba(255,255,255,.55) !important}
.embed-load-btn{
  background:var(--blue);color:#fff;border:none;cursor:pointer;
  font-family:var(--display);font-weight:700;font-size:.78rem;
  letter-spacing:.05em;text-transform:uppercase;
  padding:10px 22px;border-radius:var(--r);
  transition:all .2s;margin-top:.25rem;
}
.embed-load-btn:hover{background:var(--blue-dark);transform:translateY(-1px)}
.embed-direct-link{
  font-family:var(--display);font-size:.7rem;color:var(--blue);
  text-decoration:underline;display:block;
}
/* Loaded iframe */
.embed-wrapper iframe{
  width:100%;aspect-ratio:16/9;height:auto;
  border:1px solid var(--border);border-radius:var(--r);
  display:block;
}
.embed-wrapper.slideshare-embed iframe{aspect-ratio:595/485}

/* ── CALENDLY INLINE WIDGET ── */
.calendly-inline-widget{min-width:280px;overflow:hidden}
.cta-strip .calendly-inline-widget{border-radius:12px;background:#fff}
/* On small screens: reduce height */
@media(max-width:640px){
  .cta-strip .calendly-inline-widget{height:360px !important}
  .cta-strip [style*="height:450px"]{height:360px !important}
}

/* ── Spacing utilities (added 2026-04) ───────────────────────────────────── */
.section-banner { padding: 2rem 0 0 }
.section-head { margin-bottom: 3rem }
.section-head-lg { margin-bottom: 3.5rem }
.section-head-sm { margin-bottom: 2rem }
.mb-0 { margin-bottom: 0 }
.mb-sm { margin-bottom: 1.25rem }
.mb-md { margin-bottom: 2rem }
.mb-lg { margin-bottom: 3rem }
.pb-0 { padding-bottom: 0 }
.art-section { padding: 3rem 0; border-bottom: 1px solid var(--border) }
.art-section:last-of-type { border-bottom: none }
/* Consistent section dividers */
.section + .divider + .section { padding-top: clamp(4rem,7vw,6rem) }
/* DE Banner (INT pages) */
.de-banner {
  background: var(--blue-light);
  border: 1px solid var(--blue-bdr);
  border-radius: var(--r2);
  padding: 1.25rem 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}
.de-banner p { font-size: .88rem; color: var(--ink-60); font-weight: 300; margin: 0 }
.de-banner a { color: var(--blue) }

/* ── Service tile label ── */
.stile-label {
  font-family: var(--display);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: .5rem;
  display: block;
}
.stile {
  background: var(--ink-05);
  padding: 1.75rem;
  position: relative;
  overflow: hidden;
  transition: background .2s;
  display: block;
  text-decoration: none;
  color: inherit;
}
.stile::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--blue);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .3s;
}
.stile:hover { background: var(--white) }
.stile:hover::before { transform: scaleY(1) }
.stile h4 { font-family: var(--display); font-size: .88rem; font-weight: 700; margin-bottom: .4rem; color: var(--ink) }
.stile p { font-size: .82rem; color: var(--ink-60); line-height: 1.6 }

/* ── Calendly Consent-Layer ─────────────────────────────────────────────── */
.cta-strip #cal-container,
.cta-strip #cal-container-int {
  max-width: 720px;
  margin: 2rem auto 0;
}
#cal-consent, #cal-consent-int {
  border-radius: 12px;
  background: rgba(255,255,255,.07);
  border: 2px dashed rgba(255,255,255,.2);
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  transition: background .2s;
}
#cal-consent:hover, #cal-consent-int:hover {
  background: rgba(255,255,255,.11);
}
#cal-widget, #cal-widget-int {
  display: none;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
  background: #fff;
}
.calendly-inline-widget {
  width: 100% !important;
  min-width: 280px;
  height: 700px;
}
@media(max-width:600px){
  .calendly-inline-widget { height: 580px; }
  #cal-consent, #cal-consent-int { padding: 2rem 1.25rem; }
}