/* Automatisch aus style.css herausgeloest (CSS-Diaet, 02.09.2026).
   REGEL: Stile, die nur EINE Seite braucht, wohnen in css/seiten/<seite>.css.
   Gemeinsames wohnt in style.css. Wer hier etwas aendert, prueft mit
   werkzeuge/vor-upload-pruefen.sh und zieht die Cache-Stempel hoch. */


/* ---- Ueber Michael Hetzel: Illustrationen ---- */

/* Modul 1 - dieselbe Person geht durch alle vier Phasen.
   Die Karten selbst bewegen sich bewusst nicht: ihre Symbole liegen im SVG
   als Geschwister daneben, nicht darin. Sie wechseln nur den Zustand.
   Die Verzoegerungen sind so gesetzt, dass eine Phase genau dann aktiv wird,
   wenn die Figur sie erreicht. */
/* Die Figur wandert von Phase 1 (x 54) zu Phase 4 (x 246), also 192 Einheiten.
   Dieselbe Kurve wie beim Abspielkopf, weil beides eine Reise ist. */

/* Modul 2 - ein Drehtag, viele Veroeffentlichungstage: der Pfirsich-Tag tritt
   hervor, danach fuellen sich die Wochen spaltenweise nach rechts auf. */

/* Modul 3 - die Frage kommt an, der direkte Weg zeichnet sich, die Antwort
   folgt unmittelbar. Zwischen beiden liegt keine Station. */

/* ---- Social-Media-Betreuung: Illustrationen ---- */

/* Modul 1 - aus dem einen markierten Drehtag entsteht der Veroeffentlichungsplan */
.bt1-day {
  transform-box: fill-box; transform-origin: center;
  transition: transform 0.45s var(--ease-marke);
}

.bt1-flow { opacity: 0.45; transition: opacity 0.4s ease 0.05s; }

/* Aus einem Tag werden mehrere Termine: gestaffelt statt gleichzeitig */
.bt1-bar {
  opacity: 0.35;
  transform: translateX(-14px);
  transition: transform 0.5s var(--ease-marke), opacity 0.5s ease;
}
.bt1-bar-a { transition-delay: 0.05s; }
.bt1-bar-b { transition-delay: 0.10s; }
.bt1-bar-c { transition-delay: 0.15s; }

/* Modul 2 - geschnitten, vertont, untertitelt: das Rohmaterial wird fertig */
/* Schnittmarken werden gezogen (Linien-Zeichnen ueber stroke-dashoffset) */
.bt2-cut {
  stroke-dasharray: 76;
  stroke-dashoffset: 76;
  transition: stroke-dashoffset 0.5s var(--ease-marke);
}
.bt2-cut-a { transition-delay: 0.05s; }
.bt2-cut-b { transition-delay: 0.15s; }

.bt2-flow { opacity: 0.45; transition: opacity 0.4s ease 0.2s; }

.bt2-wave {
  opacity: 0.7;
  transform-box: fill-box; transform-origin: center;
  transition: transform 0.45s var(--ease-marke) 0.2s, opacity 0.45s ease 0.2s;
}

/* Untertitel entstehen Zeile fuer Zeile, die Pfirsich-Zeile zuletzt */
.bt2-cap {
  opacity: 0.35;
  transform-box: fill-box; transform-origin: left center;
  transform: scaleX(0.14);
  transition: transform 0.45s var(--ease-marke), opacity 0.45s ease;
}
.bt2-cap-a { transition-delay: 0.25s; }
.bt2-cap-b { transition-delay: 0.32s; }
.bt2-cap-c { transition-delay: 0.39s; }

/* Modul 3 - die Auswertung waechst Monat fuer Monat von der Grundlinie hoch */
.bt3-bar {
  opacity: 0.7;
  transform-box: fill-box; transform-origin: bottom center;
  transform: scaleY(0.68);
  transition: transform 0.55s var(--ease-marke), opacity 0.55s ease;
}
.bt3-bar-a { transition-delay: 0.05s; }
.bt3-bar-b { transition-delay: 0.10s; }
.bt3-bar-c { transition-delay: 0.15s; }
.bt3-bar-d { transition-delay: 0.20s; }
.bt3-bar-e { transition-delay: 0.25s; }

/* ---- Bewegung reduzieren ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bt1-day, .bt1-flow, .bt1-bar,
  .bt2-cut, .bt2-flow, .bt2-wave, .bt2-cap,
  .bt3-bar { transition: none; }
  /* Zustaende bleiben erhalten, nur ohne Bewegung */
  .bt1-flow, .bt2-flow { opacity: 0.6; }
  .bt1-bar { opacity: 1; transform: none; }
  .bt2-cut { stroke-dashoffset: 0; }
  .bt2-wave { opacity: 1; }
  .bt2-cap { opacity: 1; transform: none; }
  .bt3-bar { opacity: 1; transform: none; }}

.smb-step {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}
.smb-step-label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--teal);
  hyphens: manual;           /* bricht nur am &shy; in "Veroeffentlichung" */
}
.smb-slate {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-self: start;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(16,100,102,0.22);
  background: var(--teal-tint);
  font-size: 13px;
  font-weight: 700;
  color: var(--teal-dark);
}
.smb-slate svg { width: 22px; height: 19px; flex: none; }

.smb-timeline, .smb-cal { display: block; width: 100%; height: auto; }

/* Abspielkopf pendelt einmal ueber die Timeline und bleibt dann in
   Bewegung: ruhig, linear, ohne Sprungschnitt */
.smb-playhead {
  animation: smb-scrub 7s linear infinite alternate;
  transform: translateX(14px);
}

.smb-reels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

/* Verbindungslinien zwischen den Stationen, mittig unter der
   Inhaltsspalte (92px Label + 16px Gap + halbe Restbreite) */
.smb-link {
  display: block;
  width: 2px; height: 26px;
  margin: 6px 0 6px calc(108px + (100% - 108px) / 2);
  background: repeating-linear-gradient(180deg,
    rgba(16,100,102,0.4) 0 4px,
    transparent 4px 9px);
}
@media (max-width: 560px) {
  .smb-step { grid-template-columns: 1fr; gap: 8px; }
  .smb-step-label { order: -1; }
  /* Linien folgen der einspaltigen Mitte */
  .smb-link { margin-left: 50%; height: 20px; }}


@media (prefers-reduced-motion: reduce) {
  .smb-playhead { animation: none; }}


/* ============================================================
   CONTENT-KREISLAUF (Leistungsumfang)
   nur /leistungen/social-media-betreuung/, Praefix smb2-.
   Hintergrund und Padding entsprechen der abgeloesten
   .sub-audience-Sektion, damit der Rhythmus weiss → tint → weiss
   und die Abstaende zu Hero und Ablauf-Bento unveraendert bleiben.
   ============================================================ */
.smb2 { padding: var(--space-md) 0; background: var(--teal-tint); }
.smb2-head { max-width: 62ch; }
.smb2-head h2 { margin: 8px 0 16px; }

.smb2-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  margin-top: 40px;
}

/* ---- Der Ring --------------------------------------------- */
.smb2-orbit { min-width: 0; width: 100%; max-width: 460px; justify-self: center; }
.smb2-ring { display: block; width: 100%; height: auto; }

/* ---- Die Schrittliste -------------------------------------- */
.smb2-steps { min-width: 0; }
.smb2-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
}
.smb2-list li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid rgba(16,100,102,0.14);
}
.smb2-list li:first-child { border-top: 0; padding-top: 0; }
.smb2-num {
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--teal);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}
.smb2-list h3 {
  margin: 0 0 4px;
  font-size: 16px; line-height: 1.3;
  color: var(--ink);
}
.smb2-list p {
  margin: 0;
  font-size: 14.5px; line-height: 1.58;
  color: var(--ink-soft);
}

/* Der Rueckschluss steht nur im vertikalen Layout: auf dem Desktop
   sagt der Peach-Bogen im Ring dasselbe. */
.smb2-back { display: none; }
.smb2-back svg { width: 18px; height: 18px; flex: none; }

/* ---- Responsive -------------------------------------------- */
@media (max-width: 1040px) {
  .smb2-grid { grid-template-columns: 1fr; gap: 40px; }
  .smb2-orbit { max-width: 560px; margin: 0 auto; }}

@media (max-width: 720px) {
  /* Kein gequetschter Mini-Kreis: der Ring entfaellt, die Liste wird
     zum verbundenen vertikalen Prozess mit durchlaufender Linie. */
  .smb2-orbit { display: none; }
  .smb2-grid { margin-top: 34px; }

  .smb2-list li {
    position: relative;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 18px;
    padding: 0 0 26px;
    border-top: 0;
  }
  .smb2-list li:first-child { padding-top: 0; }
  .smb2-list li:last-child { padding-bottom: 14px; }
  /* Prozesslinie zwischen den Nummern */
  .smb2-list li::before {
    content: '';
    position: absolute;
    left: 16px; top: 26px; bottom: -2px;
    width: 2px;
    background: rgba(16,100,102,0.22);
  }
  .smb2-list li:last-child::before { display: none; }
  .smb2-num {
    position: relative; z-index: 1;
    display: grid; place-items: center;
    width: 34px; height: 26px;
    padding-top: 0;
    background: var(--teal-tint);
  }
  .smb2-back {
    display: flex; align-items: center; gap: 10px;
    margin: 2px 0 0 4px;
    font-size: 13.5px; font-weight: 700;
    color: var(--peach-text);
  }}

.za-head { max-width: 62ch; }

.za-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 36px;
  align-items: stretch;
  max-width: 1020px;
}
.za-panel {
  display: flex; flex-direction: column;
  padding: 24px 22px 22px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--white);
}
.za-panel-self { background: var(--panel); }
.za-panel-sl { border-color: rgba(16,100,102,0.32); box-shadow: var(--shadow-lg); }

.za-eyebrow {
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.13em;
  text-transform: uppercase; margin: 0 0 4px;
}
.za-panel-self .za-eyebrow { color: var(--peach-text); }
.za-panel-sl   .za-eyebrow { color: var(--teal); }
.za-panel h3 { margin: 0 0 5px; font-size: 19px; line-height: 1.25; color: var(--ink); }
.za-stats {
  margin: 0 0 15px;
  font-size: 13.5px; font-weight: 600;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* ---- Kalender ---------------------------------------------- */
.za-cal { margin-bottom: 18px; }
.za-cal-wd {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
  margin-bottom: 7px;
}
.za-cal-wd span {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--ink-soft); opacity: 0.55; text-align: center;
}
.za-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.za-day {
  aspect-ratio: 1;
  border-radius: 7px;
  background: rgba(16,100,102,0.05);
  display: flex; align-items: center; justify-content: center;
}
.za-ic { width: 15px; height: 15px; display: block; }

/* verteilte Aufgabe (peach) */
.za-chip { background: var(--peach-tint); border: 1.5px solid var(--peach); }

/* der EINE Drehtag (bewusst ein einzelner Kalendertag) */
.za-shoot { background: var(--teal); }
.za-shoot svg { width: 18px; height: 15px; }

/* fertiger Beitrag geht online */
.za-post::after {
  content: '';
  width: 9px; height: 13px; border-radius: 2.5px;
  background: var(--teal); opacity: 0.55;
}
/* kurze Abstimmung: absichtlich sichtbar, die Zeit ist nicht null */
.za-fb { background: transparent; border: 1.5px dashed rgba(16,100,102,0.4); }
.za-fb::after {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal); opacity: 0.6;
}

/* ---- Legende: identische Symbole wie im Kalender ------------ */
.za-legend {
  list-style: none; margin: 0 0 20px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 16px;
}
.za-legend li {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--ink-soft);
}
.za-key {
  width: 20px; height: 20px; border-radius: 6px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.za-key .za-ic { width: 13px; height: 13px; }
.za-key-task { background: var(--peach-tint); border: 1.5px solid var(--peach); }
.za-key-shoot { background: var(--teal); }
.za-key-post { background: rgba(16,100,102,0.05); }
.za-key-post::after {
  content: '';
  width: 7px; height: 10px; border-radius: 2px;
  background: var(--teal); opacity: 0.55;
}
.za-key-fb { border: 1.5px dashed rgba(16,100,102,0.4); }
.za-key-fb::after {
  content: '';
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--teal); opacity: 0.6;
}

/* ---- grosse Zahl ------------------------------------------- */
.za-result { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); }
.za-big {
  display: block; line-height: 1;
  font-size: clamp(36px, 4.4vw, 52px);
  font-weight: 800; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.za-panel-self .za-big { color: var(--peach-deko); }
.za-panel-sl   .za-big { color: var(--teal-dark); }
.za-unit { display: block; margin-top: 8px; font-size: 15px; font-weight: 700; color: var(--ink); }
.za-sub { margin: 6px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }

/* ---- Kernaussage ------------------------------------------- */
.za-claim {
  margin: 22px 0 0;
  padding: 22px 26px;
  border-radius: var(--radius);
  background: var(--teal-tint);
  border-left: 3px solid var(--peach);
  font-size: 16px; line-height: 1.62;
  color: var(--ink-soft);
  max-width: 80ch;
}
.za-claim strong { color: var(--ink); }

/* ---- Responsive -------------------------------------------- */
@media (max-width: 900px) {
  .za-grid { grid-template-columns: 1fr; }}

@media (max-width: 560px) {
  .za-panel { padding: 24px 18px 22px; }
  .za-days, .za-cal-wd { gap: 4px; }}

.dec-head { max-width: 64ch; }
.dec-head h2 { margin: 8px 0 16px; }

.dec-sheet {
  margin-top: 40px;
  padding: 34px 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.dec-ways {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.dec-way {
  padding: 0 24px;
  border-left: 1px solid transparent;
}
.dec-way + .dec-way { border-left-color: var(--border); }

.dec-visual {
  position: relative;
  aspect-ratio: 3 / 2;
  margin-bottom: 18px;
  border-radius: 12px;
  border: 1px solid rgba(16,100,102,0.12);
  background: var(--teal-tint);
  overflow: hidden;
}
.dec-visual svg { display: block; width: 100%; height: auto; }
.dec-num {
  position: absolute; top: 9px; left: 12px; z-index: 2;
  font-size: 12px; font-weight: 800; letter-spacing: 0.08em;
  color: var(--teal-dark); opacity: 0.45;
  font-variant-numeric: tabular-nums;
}
.dec-way h3 { margin: 0 0 10px; font-size: 18.5px; line-height: 1.3; color: var(--ink); }
.dec-way--sl h3 { color: var(--teal-dark); }
.dec-label {
  display: block; margin: 0 0 4px;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--teal);
}
.dec-way p {
  margin: 0 0 14px;
  font-size: 14px; line-height: 1.58;
  color: var(--ink-soft);
}
.dec-way p:last-child { margin-bottom: 0; }

/* ---- 01 Intern nebenbei: die Liste arbeitet, das Video wartet */
.dec1-row { opacity: 0.7; transition: opacity 0.45s ease; }
.dec1-r1 { transition-delay: 0.04s; }
.dec1-r2 { transition-delay: 0.12s; }
.dec1-r3 { transition-delay: 0.20s; }
.dec-way:hover .dec1-row { opacity: 1; }
.dec1-video { transition: transform 0.55s ease, opacity 0.55s ease; }
.dec-way:hover .dec1-video { transform: translateY(3px); opacity: 0.75; }
.dec1-min {
  transform-box: fill-box; transform-origin: 50% 100%;
  transition: transform 0.8s cubic-bezier(.3,.7,.2,1);
}
.dec-way:hover .dec1-min { transform: rotate(120deg); }

/* ---- 02 Vollzeitkraft: der offene Rest der Stelle ----------- */
.dec2-sm { transition: transform 0.5s cubic-bezier(.2,.7,.2,1); }
.dec-way:hover .dec2-sm { transform: translateY(-2px); }
.dec2-rest { transition: stroke-opacity 0.5s ease 0.1s; }
.dec-way:hover .dec2-rest { stroke-opacity: 0.6; }
.dec2-q { transition: fill-opacity 0.5s ease 0.1s; }
.dec-way:hover .dec2-q { fill-opacity: 0.85; }

/* ---- 03 Social Lift: der Kreislauf laeuft ------------------- */
.dec3-c { transition: transform 0.55s cubic-bezier(.2,.7,.2,1); }
.dec3-c1 { transition-delay: 0.04s; }
.dec3-c2 { transition-delay: 0.10s; }
.dec3-c3 { transition-delay: 0.16s; }
.dec-way:hover .dec3-c { transform: translate(9px, -2px); }
.dec3-reel { transition: transform 0.6s cubic-bezier(.2,.7,.2,1) 0.12s; }
.dec-way:hover .dec3-reel { transform: translateX(-9px); }

/* ---- Abschluss: dunkles Panel ------------------------------- */
.dec-out {
  margin-top: 26px;
  padding: 28px 32px;
  border-radius: var(--radius);
  background: var(--ink);
  color: rgba(255,255,255,0.82);
}
.dec-out p { margin: 0 0 14px; font-size: 15px; line-height: 1.62; max-width: 78ch; }
.dec-out strong { color: #fff; }

/* ---- Responsive --------------------------------------------- */
@media (max-width: 900px) {
  .dec-ways { grid-template-columns: 1fr; }
  .dec-way { border-left: 0; }
  .dec-way + .dec-way {
    border-top: 1px solid var(--border);
    margin-top: 24px; padding-top: 24px;
  }
  .dec-visual { max-width: 380px; }}

@media (max-width: 560px) {
  .dec-sheet { padding: 26px 0; }
  .dec-way { padding-left: 18px; padding-right: 18px; }
  .dec-out { padding: 24px 20px; }}


/* ---- Reduced Motion ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .dec1-row, .dec1-video, .dec1-min,
  .dec2-sm, .dec2-rest, .dec2-q,
  .dec3-c, .dec3-reel,
  .dec-out-cta, .dec-out-cta span { transition: none; }
  .dec1-row { opacity: 1; }
  .dec-way:hover .dec1-video, .dec-way:hover .dec1-min,
  .dec-way:hover .dec2-sm, .dec-way:hover .dec3-c,
  .dec-way:hover .dec3-reel, .dec-out-cta:hover span { transform: none; }
  .dec-way:hover .dec1-video { opacity: 1; }}

.zr-head { max-width: 64ch; }

.zr-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 56px;
  margin-top: 44px;
  /* stretch statt start: die Rail verteilt ihre Stationen ueber die
     volle Hoehe der rechten Spalte, unten schliesst die Hinweis-Box
     buendig ab - sonst stand links ein grosses Loch (User, 30.07.). */
  align-items: stretch;
}

/* ---- die Schiene ------------------------------------------- */
.zr-rail { display: flex; flex-direction: column; }
/* Live-Fuellung wie die Ablauf-Timeline der Startseite: die Teal-Linie
   waechst mit der Scrollposition, JS setzt die Hoehe (#zrRailFill). */
.zr-fill {
  position: absolute; top: 8px; left: 17px;
  width: 2px; height: 0;
  background: var(--teal);
  border-radius: 2px;
  z-index: 0;
}

.zr-stop-label {
  margin: 0 0 3px;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--teal);
}

.zr-note {
  margin: 30px 0 0;
  padding: 16px 20px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13.5px; line-height: 1.6;
  color: var(--ink-soft);
}

/* ---- Kundenbeispiel ---------------------------------------- */
.zr-side { min-width: 0; }
.zr-kpi { min-width: 0; }
.zr-case {
  padding: 24px 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
}
.zr-case-who {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 18px;
  font-size: 13px; line-height: 1.5;
  color: var(--ink-soft);
}
.zr-case-who img {
  width: 34px; height: 40px;
  object-fit: contain;
  flex: none;
}
.zr-case-who strong { display: block; font-size: 14.5px; color: var(--ink); }
.zr-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.zr-kpi-num {
  display: block; line-height: 1;
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 800; letter-spacing: -0.01em;
  color: var(--teal-dark);
  font-variant-numeric: tabular-nums;
}
.zr-kpi-label { display: block; margin-top: 6px; font-size: 13px; color: var(--ink-soft); }
.zr-case-note {
  margin: 16px 0 0;
  font-size: 13px; line-height: 1.6;
  color: var(--ink-soft);
}

/* ---- Was wir dir ehrlich sagen ----------------------------- */
.zr-honest { margin-top: 30px; }
.zr-honest h3 { margin: 0 0 6px; font-size: 17.5px; color: var(--ink); }
.zr-honest ul { list-style: none; margin: 0; padding: 0; }
.zr-honest li {
  padding: 14px 0;
  border-top: 1px solid rgba(16,100,102,0.14);
  font-size: 14.5px; line-height: 1.6;
  color: var(--ink-soft);
}
.zr-honest li:first-child { border-top: 0; }
.zr-honest strong { display: block; margin-bottom: 3px; color: var(--ink); font-weight: 700; }

/* ---- Responsive -------------------------------------------- */
@media (max-width: 980px) {
  .zr-grid { grid-template-columns: 1fr; gap: 40px; margin-top: 36px; }}


.hbn-grid {
  display: grid;
  grid-template-columns: minmax(0, 92fr) minmax(0, 108fr);
  gap: 56px;
  align-items: center;
}

/* ---- linke Spalte ---- */
.hbn-head { max-width: 46ch; }
.hbn-head h2 { margin: 22px 0 18px; text-wrap: balance; }
.hbn-intro { margin: 0 0 22px; font-size: 16.5px; line-height: 1.66; color: var(--ink-soft); text-wrap: pretty; }
.hbn-claim { margin: 0; font-size: 15px; line-height: 1.62; color: var(--ink-soft); text-wrap: pretty; }
.hbn-claim strong { display: block; margin-bottom: 7px; font-size: 16.5px; line-height: 1.4; font-weight: 700; color: var(--ink); }

/* ---- rechte Spalte: die Zeichnung ----
   font-family gehoert hier in eine Klasse. Als Praesentationsattribut
   im SVG loest var(--font) nicht auf, die Schrift faellt dann stumm
   auf Times zurueck. */
.hbn-bild { margin: 0; }
.hbn-bild svg { width: 100%; height: auto; overflow: visible; }
.hbn-breit { display: block; }
.hbn-schmal { display: none; }
.hbn-tx { font-family: var(--font); }

/* Voraussetzung: klein und freundlich am unteren Rand */
.hb-req {
  margin: 30px 0 0;
  font-size: 13.5px; line-height: 1.6;
  color: var(--ink-soft);
  opacity: 0.85;
  max-width: 84ch;
}

@media (max-width: 960px) {
  .hbn-grid { grid-template-columns: 1fr; gap: 34px; }
  .hbn-head { max-width: none; }
  .hbn-intro, .hbn-claim { max-width: 62ch; }
  /* margin-inline: auto allein wuerde das Grid-Item auf start ziehen, dann
     faellt das SVG auf seine 300px Standardbreite zurueck. Deshalb width. */
  .hbn-bild { width: 100%; max-width: 470px; margin-inline: auto; }}

/* Unter 560px wird die breite Zeichnung zu klein: gemessen 9,8px Fliesztext
   und 7,9px Label bei 390px Viewport. Darunter greift die gestapelte
   Fassung, die mit 320 statt 452 Einheiten Breite rechnet und dadurch
   rund 14px Fliesztext ergibt. Die kleinere max-width verhindert, dass
   sie bei 560px umgekehrt zu gross wird. */
@media (max-width: 560px) {
  .hbn-breit { display: none; }
  .hbn-schmal { display: block; }
  .hbn-bild { max-width: 360px; }}



/* ==========================================================================
   MOBILE-FEINSCHLIFF (Mobile-Audit 31.07.2026)
   Gilt ausschliesslich bis 640px. Desktop und Tablet bleiben unberuehrt.
   ========================================================================== */
@media (max-width: 640px) {

  /* ---------- Gruppe b ---------- */
  /* Kundenbeispiel Pro Heraldica (/leistungen/social-media-betreuung/):
     "15.000+" ist 104px breit, die Spalte nur 83px (bei 320px sogar 59px).
     Die Zahlen liefen aus ihren Spalten und schoben Karte und .zr-grid
     ueber den Rand (bei 320px: 290px Inhalt in 272px Platz). Engerer
     Spaltenabstand plus mitwachsende Zahlengroesse. */
  .zr-kpis { gap: 8px; }
  .zr-kpi-num { font-size: clamp(15px, 4.95vw, 24px); }
  .zr-kpi-label { font-size: 12px; }}


/* --- /leistungen/social-media-betreuung/, Zeitaufwand-Kalender --------- */
/* Ab 900px stapeln die beiden Panels, der Kalender lief damit auf 720px
   Breite. Da .za-day aspect-ratio:1 traegt, wuchsen die Tageskacheln auf 92px,
   mit einem 15px-Icon in der Mitte. Der Deckel haelt die Kachelgroesse auf dem
   Desktop-Mass von rund 60px. Auf dem Desktop (455px Innenraum) und auf dem
   Handy (maximal 306px) greift er nicht. */
.za-cal { max-width: 460px; }

/* --- /leistungen/social-media-betreuung/, Content-Kreislauf ------------ */
/* Der Ring war auf 460px gedeckelt, seine Rasterspalte ist bei 1280px aber
   542px breit. Bei 626 Nutzereinheiten Breite landeten die Stationsnamen
   dadurch bei 9.6px und die Nabenzeile bei 7px. Unter 1041px steht der Ring
   bereits mit 560px im einspaltigen Layout. */
@media (min-width: 1041px) {
  .smb2-orbit { max-width: 540px; }}


/* --- /leistungen/social-media-betreuung/, Zeitaufwand-Kalender --------- */
/* Zwischen 641 und 979px greift der 460px-Deckel und der Kalender stand
   linksbuendig in einem bis zu 852px breiten Panel - rechts blieben bis zu
   369px leer, waehrend die Trennlinie darueber ueber die volle Breite lief.
   Bewusst nur in diesem Band: ab 980px fuellt der Kalender das Panel ohnehin
   (gemessen 23px Rand auf beiden Seiten). Unbegrenzt gesetzt wuerde die Regel
   ihn dort aus der Streckung nehmen und schmaler machen - eine Verschlechterung
   auf dem Desktop. */
@media (min-width: 641px) and (max-width: 979px) {
  /* .za-panel ist eine Spalten-Flexbox. Ohne width:100% zieht margin:auto die
     Breite auf den Inhalt zusammen (gemessen 162 statt 460px) - das waere
     keine Zentrierung, sondern eine Schrumpfung. */
  .za-cal { width: 100%; margin-left: auto; margin-right: auto; }}


@media (max-width: 640px) {

  /* Das Bild unter dem Fliesstext war auf 320px gedeckelt, waehrend der Text
     die volle Spaltenbreite nutzte - die rechte Kante der Sektion franste
     aus. */

  /* --- /leistungen/social-media-betreuung/ ----------------------------- */
  /* Die Kennzahlzeile riss die Spanne "2-3 Monate" am Gedankenstrich
     auseinander: Zeile 1 endete auf "2-", Zeile 2 begann mit "3 Monate". */
  .za-stats { text-wrap: balance; }}


/* --- Kopf: links Frage und Kurzantwort, rechts die Zahl --- */
.pb-top {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 48px;
  align-items: start;
  margin-bottom: 46px;
}
.pb-antwort {
  font-size: 16px;
  line-height: 1.66;
  margin: 18px 0 0;
  max-width: 62ch;
}
.pb-zahl {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  padding: 28px 28px 26px;
}
.pb-zahl-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--peach);
  margin: 0 0 12px;
}
.pb-preis {
  font-family: var(--font-serif);
  font-size: clamp(30px, 3.6vw, 40px);
  line-height: 1.05;
  color: var(--white);
  margin: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 6px;
  font-variant-numeric: tabular-nums;
}
.pb-bis { color: var(--peach); font-style: normal; }
.pb-einheit {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.62);
  margin: 10px 0 0;
}
.pb-zahl-fuss {
  font-size: 14px;
  line-height: 1.55;
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* --- Die drei Stufen --- */
.pb-stufen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}
.pb-stufe {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  padding: 26px 24px 22px;
}
/* Die mittlere Stufe ist der uebliche naechste Schritt und darf das zeigen. */
.pb-stufe--hervor {
  background: rgba(237, 191, 139, 0.08);
  border-color: rgba(237, 191, 139, 0.34);
}
.pb-stufe-nr {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--peach);
  margin: 0 0 6px;
}
.pb-stufe-marke {
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: none;
  font-weight: 600;
  color: var(--ink);
  background: var(--peach);
  border-radius: 999px;
  padding: 3px 9px;
}
.pb-stufe h3 {
  font-family: var(--font-serif);
  font-size: 25px;
  line-height: 1.15;
  font-weight: 500;
  color: var(--white);
  margin: 0 0 10px;
}
.pb-stufe-wer {
  font-size: 14.5px;
  line-height: 1.58;
  margin: 0 0 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
  color: rgba(255, 255, 255, 0.72);
}
.pb-stufe-liste {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 11px;
  flex: 1;
}
.pb-stufe-liste li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px;
  line-height: 1.55;
}
.pb-stufe-liste li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--peach-dark);
}
/* Lage in der Spanne statt eines erfundenen Einzelpreises. */
.pb-stufe-lage {
  margin: 0;
  font-size: 11.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.pb-lage-bar {
  display: block;
  height: 4px;
  border-radius: 2px;
  margin-bottom: 9px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(255, 255, 255, 0.14) calc(var(--pos) * 1% - 9%),
    var(--peach) calc(var(--pos) * 1% - 9%),
    var(--peach) calc(var(--pos) * 1% + 9%),
    rgba(255, 255, 255, 0.14) calc(var(--pos) * 1% + 9%)
  );
}

/* --- Hinweis unter den Stufen --- */
.pb-note {
  margin-top: 26px;
  padding: 26px 30px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
}
.pb-note-body h3 {
  font-size: 17px;
  color: var(--white);
  margin: 0 0 8px;
  font-weight: 700;
}
.pb-note-body p {
  font-size: 15px;
  line-height: 1.62;
  margin: 0;
  max-width: 74ch;
}
.pb-note-cta { white-space: nowrap; }

@media (max-width: 1060px) {
  .pb-stufen { grid-template-columns: 1fr; gap: 16px; }
  .pb-stufe-liste { flex: none; }}

@media (max-width: 980px) {
  .pb-top { grid-template-columns: 1fr; gap: 30px; margin-bottom: 34px; }
  .pb-note { grid-template-columns: 1fr; gap: 20px; }
  .pb-note-cta { justify-self: start; }}

@media (max-width: 640px) {
  .pb-antwort { text-align: center; }
  .pb-zahl { padding: 24px 22px; }
  .pb-preis { justify-content: center; }
  .pb-zahl-label, .pb-einheit, .pb-zahl-fuss { text-align: center; }
  .pb-stufe { padding: 24px 20px 20px; }
  .pb-stufe-nr { justify-content: center; }
  .pb-stufe h3, .pb-stufe-wer { text-align: center; }
  .pb-stufe-lage { text-align: center; }
  .pb-note { padding: 22px 20px; }
  .pb-note-cta { justify-self: stretch; text-align: center; }}


/* Sprunglink im Hero zur Kosten-Sektion */
.sub-hero-jump { margin: 16px 0 0; font-size: 14.5px; }
.sub-hero-jump a {
  color: var(--teal); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid rgba(16, 100, 102, 0.28); padding-bottom: 2px;
  transition: border-color .2s ease, color .2s ease;
}
.sub-hero-jump a:hover { color: var(--teal-dark); border-bottom-color: var(--teal-dark); }
@media (max-width: 640px) { .sub-hero-jump { text-align: center; }}