/* HERZ Consulting — Website-Entwurf
   Farben und Typografie nach HERZ Brand Guide v2.0 */

:root {
  --anthrazit: #2B2B2B;
  --onyx: #151515;
  --stone: #8A8580;
  --ivory: #F4F1EC;
  --papier: #FBFAF8;
  --linie: rgba(138, 133, 128, 0.28);

  --akzent: #2B2B2B;
  --akzent-hell: #6E6A66;
  --akzent-flaeche: rgba(43, 43, 43, 0.05);

  --breite: 1120px;
  --rand: clamp(20px, 5vw, 64px);
}

body.resilienz {
  --akzent: #9B2C20;
  --akzent-hell: #C4553F;
  --akzent-flaeche: rgba(155, 44, 32, 0.06);
}

body.automation {
  --akzent: #1B4B8A;
  --akzent-hell: #6FA6D6;
  --akzent-flaeche: rgba(27, 75, 138, 0.06);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--anthrazit);
  overflow-wrap: break-word;
  font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 0.6em;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.1rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.1rem; }

p { margin: 0 0 1.1em; }

a { color: var(--akzent); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 var(--rand);
}

/* Kopfzeile */
header.top {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(251, 250, 248, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linie);
}

/* Die Kopfzeile nutzt die volle Breite, nicht die Textspalte.
   Das Logo sitzt dadurch nahe am Rand, mit ruhigem Abstand. */
.top .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 78px;
  max-width: none;
  padding-left: clamp(20px, 3.5vw, 52px);
  padding-right: clamp(20px, 3.5vw, 52px);
}

.marke img { height: 34px; width: auto; display: block; }
.marke.klein img { height: 30px; }

nav.haupt {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 0.9rem;
}

nav.haupt a {
  color: var(--stone);
  letter-spacing: 0.01em;
}

nav.haupt a:hover { color: var(--anthrazit); text-decoration: none; }

nav.haupt a.zurueck {
  color: var(--stone);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

nav.haupt a.zurueck::before { content: "←"; }

@media (max-width: 780px) {
  nav.haupt a.versteckbar { display: none; }
}

/* Schmale Schirme: Wortmarken wie "HERZ Resilienz" oder "HERZ Automation" sind im
   Seitenverhältnis sehr breit (schmale, lange PNGs). Bei fester Höhe sprengen sie dort
   die Kopfzeile und verursachen horizontales Scrollen. Deshalb hier zusätzlich über die
   Breite begrenzen, die Höhe ergibt sich dann proportional von selbst. */
@media (max-width: 600px) {
  .marke.klein img { height: auto; width: auto; max-height: 30px; max-width: 132px; }
  .top .wrap { gap: 14px; padding-left: 16px; padding-right: 16px; }
  nav.haupt { gap: 14px; font-size: 0.82rem; }
}

/* Unter rund 420px bleibt neben Logo und "Kontakt" kein Platz mehr für den Markennamen
   im Zurück-Link. Der Pfeil bleibt stehen und bleibt klickbar, der Name steht weiterhin
   als aria-label für Screenreader zur Verfügung. */
@media (max-width: 420px) {
  nav.haupt a.zurueck .zurueck-text { display: none; }
  nav.haupt a.zurueck { gap: 0; }
}

/* Hero */
.hero {
  padding: clamp(70px, 12vw, 140px) 0 clamp(50px, 8vw, 96px);
  border-bottom: 1px solid var(--linie);
  background:
    radial-gradient(900px 420px at 12% -10%, var(--akzent-flaeche), transparent 70%),
    linear-gradient(180deg, var(--ivory) 0%, var(--papier) 100%);
}

.hero .kicker {
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--akzent);
  margin-bottom: 22px;
}

.hero h1 { max-width: 16ch; }
.hero h1 em, .hero-schlank h1 em { font-style: normal; color: var(--akzent); }

.hero .lead {
  max-width: 60ch;
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  color: #4A4744;
}

.hero-signet {
  position: absolute;
  right: var(--rand);
  bottom: -20px;
  width: 190px;
  opacity: 0.07;
  pointer-events: none;
}

.hero-innen { position: relative; }

/* Knöpfe */
.knopf {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  border-radius: 2px;
  font-size: 0.94rem;
  border: 1px solid var(--akzent);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.knopf.voll { background: var(--akzent); color: var(--ivory); }
.knopf.voll:hover { background: var(--onyx); border-color: var(--onyx); text-decoration: none; }
.knopf.leer { color: var(--akzent); }
.knopf.leer:hover { background: var(--akzent); color: var(--ivory); text-decoration: none; }

/* Knöpfe im dunklen Kopfbereich der Automation-Seite. Standen früher als
   Inline-Styles im HTML, dadurch griff kein Hover, weil Inline jede Regel schlägt. */
.a-hero .knopf.voll {
  background: #6FA6D6;
  border-color: #6FA6D6;
  color: #14181D;
}
.a-hero .knopf.voll:hover {
  background: var(--ivory);
  border-color: var(--ivory);
  color: #14181D;
}
.a-hero .knopf.leer {
  border-color: rgba(244, 241, 236, 0.45);
  color: var(--ivory);
}
.a-hero .knopf.leer:hover {
  background: var(--ivory);
  border-color: var(--ivory);
  color: #14181D;
}

.knopfreihe { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* Abschnitte */
section { padding: clamp(56px, 9vw, 104px) 0; }
section + section { border-top: 1px solid var(--linie); }
section.dunkel {
  background: var(--anthrazit);
  color: var(--ivory);
  border-top: none;
}
section.dunkel h2 { color: var(--ivory); }
section.dunkel p { color: rgba(244, 241, 236, 0.78); }

.label {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 18px;
}

.zwei-spalten {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(28px, 6vw, 80px);
  align-items: start;
}

@media (max-width: 860px) {
  .zwei-spalten { grid-template-columns: 1fr; }
}

/* Karten */
.karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}

.karte {
  background: #fff;
  border: 1px solid var(--linie);
  padding: 30px 28px;
  border-radius: 3px;
}

.karte .nr {
  font-size: 0.8rem;
  color: var(--akzent);
  letter-spacing: 0.12em;
  margin-bottom: 14px;
}

.karte p { color: #56524E; font-size: 0.95rem; margin-bottom: 0; }

/* Feldkarten auf der Startseite */
.feld {
  display: block;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: 3px;
  padding: 38px 34px 34px;
  color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.feld:hover { text-decoration: none; transform: translateY(-3px); }
.feld.rot:hover { border-color: #9B2C20; }
.feld.blau:hover { border-color: #1B4B8A; }

.feld img.wortmarke {
  width: auto;
  height: auto;
  max-height: 30px;
  max-width: 100%;
  margin-bottom: 26px;
  display: block;
}
.feld .rolle { font-size: 0.85rem; color: var(--stone); margin-bottom: 16px; }
.feld p { color: #56524E; font-size: 0.97rem; }

.feld .mehr { font-size: 0.9rem; display: inline-flex; align-items: center; gap: 8px; }
.feld.rot .mehr { color: #9B2C20; }
.feld.blau .mehr { color: #1B4B8A; }
.feld .mehr::after { content: "→"; }

/* Personen */
.person {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
  padding: 30px 0;
  border-top: 1px solid var(--linie);
}

.person:last-child { border-bottom: 1px solid var(--linie); }

.person .kreis {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  border: 1px solid var(--linie);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--stone);
  background: var(--ivory);
}

.person h3 { margin-bottom: 4px; }
.person .rolle { font-size: 0.88rem; color: var(--stone); margin-bottom: 14px; }
.person p { font-size: 0.97rem; color: #56524E; }

@media (max-width: 600px) {
  .person { grid-template-columns: 1fr; }
}

/* Leistungsliste */
.liste { list-style: none; margin: 0; padding: 0; }
.liste li {
  padding: 20px 0;
  border-bottom: 1px solid var(--linie);
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 26px;
}
.liste li strong { font-weight: 500; }
.liste li span.kopf { color: var(--akzent); font-size: 0.95rem; }
@media (max-width: 640px) {
  .liste li { grid-template-columns: 1fr; gap: 6px; }
}

/* Stufen */
/* Vier Stufen: eine Reihe auf breiten Schirmen, sonst zwei mal zwei.
   Fest gesetzt, damit nie eine einzelne Karte allein in der zweiten Reihe steht. */
.stufen {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

@media (max-width: 1200px) {
  .stufen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 580px) {
  .stufen { grid-template-columns: 1fr; }
}
.stufe {
  border: 1px solid var(--linie);
  background: #fff;
  padding: 32px 28px;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
}
.stufe .preis { color: var(--akzent); font-size: 1.05rem; margin: 6px 0 18px; }
.stufe ul { margin: 0; padding-left: 18px; font-size: 0.93rem; color: #56524E; }
.stufe ul li { margin-bottom: 7px; }

/* Zitat */
.zitat {
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  line-height: 1.4;
  max-width: 24ch;
  font-weight: 300;
}

/* Kontakt */
.kontakt-zeile { font-size: 1.05rem; }

/* Die Markenzeile im Kontaktbereich soll am Desktop in einer Zeile stehen.
   Unterhalb von 861px darf sie umbrechen, sonst läuft sie aus dem Bild. */
@media (min-width: 861px) {
  .eine-zeile { white-space: nowrap; }
}

/* Standorte als Adressblöcke nebeneinander, auf schmalen Schirmen untereinander */
.standorte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 18px 36px;
  margin-top: 6px;
}
/* In schmalen Spalten, etwa der Seitenspalte im Kontaktformular, bewusst untereinander */
.standorte.untereinander { grid-template-columns: 1fr; gap: 16px; }

/* Fußzeile */
footer.fuss {
  border-top: 1px solid var(--linie);
  padding: 44px 0;
  font-size: 0.87rem;
  color: var(--stone);
}

footer.fuss .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: space-between;
  align-items: center;
}

footer.fuss a { color: var(--stone); }
footer.fuss a:hover { color: var(--anthrazit); }

/* Startseite, schlanke Fassung */

.hero-schlank {
  position: relative;
  overflow: hidden;
  padding: clamp(80px, 13vw, 150px) 0 clamp(64px, 10vw, 110px);
  border-bottom: 1px solid var(--linie);
  background: linear-gradient(180deg, var(--ivory) 0%, var(--papier) 100%);
  text-align: center;
}

/* Signet: rechts angeschnitten, mit Parallax beim Scrollen */

.signet-huelle {
  position: absolute;
  top: 46%;
  right: -6%;
  width: clamp(460px, 64vw, 880px);
  transform:
    translateX(var(--parallax-x, 0px))
    translateY(calc(-50% + var(--parallax-y, 0px)));
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

.signet-hintergrund {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  animation: signet-auftritt 1.7s cubic-bezier(0.16, 0.7, 0.3, 1) 0.1s forwards;
}

@keyframes signet-auftritt {
  from { opacity: 0; transform: translateX(70px) scale(1.08); }
  to   { opacity: 0.07; transform: translateX(0) scale(1); }
}

.hero-schlank .wrap { position: relative; z-index: 1; }

/* Auftritt beim Laden */

.auftritt {
  opacity: 0;
  animation: auftritt-hoch 0.95s cubic-bezier(0.16, 0.7, 0.3, 1) forwards;
}
.auftritt-1 { animation-delay: 0.15s; }
.auftritt-2 { animation-delay: 0.32s; }
.auftritt-3 { animation-delay: 0.46s; }

@keyframes auftritt-hoch {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* Auftritt beim Scrollen */

.zeigen {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.3s ease, transform 1.3s cubic-bezier(0.16, 0.7, 0.3, 1);
}
.zeigen.sichtbar { opacity: 1; transform: none; }
.zeigen.verzug-1 { transition-delay: 0.22s; }
.zeigen.verzug-2 { transition-delay: 0.44s; }
.zeigen.verzug-3 { transition-delay: 0.66s; }

@media (prefers-reduced-motion: reduce) {
  .signet-hintergrund { animation: none; opacity: 0.07; }
  .signet-huelle { transform: translateY(-50%) !important; }
  .auftritt { animation: none; opacity: 1; }
  .zeigen { opacity: 1; transform: none; transition: none; }
}

.hero-schlank .marke-gross {
  height: clamp(64px, 9vw, 104px);
  width: auto;
  margin: 0 auto clamp(34px, 5vw, 52px);
  display: block;
}

.hero-schlank h1 { max-width: 20ch; margin: 0 auto 20px; }
.hero-schlank p.lead {
  max-width: 52ch;
  margin: 0 auto;
  font-size: clamp(1.02rem, 1.7vw, 1.2rem);
  color: #4A4744;
}

/* Werte */

.werte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(28px, 4vw, 48px);
}

.wert h3 {
  font-size: 1.05rem;
  margin-bottom: 10px;
  padding-top: 18px;
  border-top: 2px solid var(--anthrazit);
}

.wert p { font-size: 0.95rem; color: #56524E; margin-bottom: 0; }

.felder-zwei {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}

.leute {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 40px;
}

.person-karte { text-align: left; }

.person-karte .foto {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 20px;
  background: var(--ivory);
}

.person-karte .foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  filter: grayscale(0.15);
}

.person-karte h3 { margin-bottom: 4px; }
.person-karte .rolle {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 14px;
}
.person-karte p { font-size: 0.95rem; color: #56524E; margin-bottom: 0; }

.person-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 0.9rem;
}
.person-link::after {
  content: "→";
  transition: transform 0.2s ease;
}
.person-link:hover { text-decoration: none; }
.person-link:hover::after { transform: translateX(4px); }

.person-karte.rot .person-link { color: #9B2C20; }
.person-karte.blau .person-link { color: #1B4B8A; }

/* Rechtliches: Footer-Links und Textseiten */



.textseite { padding: clamp(48px, 8vw, 90px) 0 clamp(56px, 9vw, 100px); }
.textseite .wrap { max-width: 760px; }
.textseite h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 34px; }
.textseite h2 {
  font-size: 1.15rem;
  margin: 40px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--linie);
}
.textseite h3 { font-size: 1rem; margin: 24px 0 8px; }
.textseite p, .textseite li { font-size: 0.97rem; color: #4A4744; }
.textseite ul { padding-left: 20px; }
.textseite li { margin-bottom: 7px; }
.textseite .stand { font-size: 0.87rem; color: var(--stone); margin-bottom: 34px; }
.textseite dl { margin: 0; }
.textseite dt { font-weight: 500; margin-top: 14px; }
.textseite dd { margin: 2px 0 0; color: #4A4744; }

.entwurf-hinweis {
  background: #FDF6E9;
  border: 1px solid rgba(184, 134, 47, 0.35);
  border-radius: 3px;
  padding: 18px 22px;
  font-size: 0.9rem;
  color: #5A4A2E;
  margin-bottom: 34px;
}


/* ============================================================
   HERZ RESILIENZ — warm, ruhig, viel Luft
   ============================================================ */

body.resilienz {
  --papier: #FCFAF7;
  --ivory: #F6F0E8;
}

.r-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(76px, 12vw, 140px) 0 clamp(64px, 10vw, 110px);
  background:
    radial-gradient(760px 420px at 78% 22%, rgba(155, 44, 32, 0.07), transparent 68%),
    linear-gradient(180deg, #F6F0E8 0%, #FCFAF7 100%);
  border-bottom: 1px solid var(--linie);
}

.r-hero .wrap { position: relative; z-index: 1; }
.r-hero .kicker { color: var(--akzent); }
.r-hero h1 { max-width: 15ch; }
.r-hero .lead { max-width: 52ch; }


/* Ablauf in Schritten */

.schritte { counter-reset: schritt; }

.schritt {
  counter-increment: schritt;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 26px;
  padding: 28px 0;
  border-top: 1px solid var(--linie);
  align-items: start;
}
.schritt:last-child { border-bottom: 1px solid var(--linie); }

.schritt::before {
  content: counter(schritt, decimal-leading-zero);
  font-size: 0.95rem;
  color: var(--akzent);
  padding-top: 3px;
  letter-spacing: 0.06em;
}

.schritt h3 { margin-bottom: 6px; }
.schritt p { font-size: 0.95rem; color: #56524E; margin-bottom: 0; }

@media (max-width: 620px) {
  .schritt { grid-template-columns: 1fr; gap: 8px; }
}

/* Themenwolke */

.themen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.themen span {
  border: 1px solid var(--linie);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 0.9rem;
  color: #56524E;
  background: #fff;
}

/* Großes Zitat */

.gross-zitat {
  text-align: center;
  padding: clamp(56px, 9vw, 100px) 0;
  background: var(--ivory);
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}
.gross-zitat blockquote {
  margin: 0 auto;
  max-width: 22ch;
  font-size: clamp(1.4rem, 3.2vw, 2.1rem);
  font-weight: 300;
  line-height: 1.35;
  color: var(--anthrazit);
}
.gross-zitat .quelle {
  margin-top: 20px;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
}

/* ============================================================
   HERZ AUTOMATION — technisch, dunkel, präzise
   ============================================================ */

body.automation { --papier: #FAFBFC; }

.mono {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Der Schimmer sitzt dort, wo der Kern der Spiralgalaxie im Signet liegt.
   Die Lichtquelle kommt also aus der eigenen Marke, nicht aus einem Effekt. */
.a-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(620px 480px at 82% 50%, rgba(111, 166, 214, 0.16), transparent 70%),
    #14181D;
  color: var(--ivory);
  padding: clamp(84px, 13vw, 156px) 0 clamp(72px, 11vw, 120px);
}

.a-hero .wrap { position: relative; z-index: 2; }
/* Breit genug, dass die beiden Sätze je auf einer Zeile stehen bleiben */
.a-hero h1 { color: var(--ivory); max-width: 22ch; }
.a-hero h1 em { font-style: normal; color: #6FA6D6; }
.a-hero .kicker { color: #6FA6D6; }
.a-hero .lead { color: rgba(244, 241, 236, 0.72); max-width: 54ch; }


/* Kennzahlenleiste */

.kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}

.kennzahl {
  padding: 30px 24px;
  border-right: 1px solid var(--linie);
  text-align: center;
}
.kennzahl:last-child { border-right: none; }

.kennzahl .zahl {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  font-weight: 600;
  color: var(--akzent);
  line-height: 1;
  margin-bottom: 10px;
}
.kennzahl .was { font-size: 0.9rem; color: #56524E; }

@media (max-width: 640px) {
  .kennzahl { border-right: none; border-bottom: 1px solid var(--linie); }
  .kennzahl:last-child { border-bottom: none; }
}

/* Technisches Raster */

.raster {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--linie);
  border-left: 1px solid var(--linie);
}

@media (max-width: 1200px) {
  .raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 580px) {
  .raster { grid-template-columns: 1fr; }
}

.raster-feld {
  padding: 32px 28px 36px;
  border-right: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  background: #fff;
  transition: background 0.2s ease;
}
.raster-feld:hover { background: #F7FAFD; }

.raster-feld .mono {
  color: var(--akzent-hell);
  display: block;
  margin-bottom: 16px;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
}
.raster-feld h3 { margin-bottom: 10px; }
.raster-feld p { font-size: 0.94rem; color: #56524E; margin-bottom: 0; }


/* Leitsatz: klar größer als Fließtext, damit die Stufen auseinanderliegen */
.leitsatz {
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -0.01em;
  max-width: 26ch;
  margin: 0 0 32px;
}
section.dunkel .leitsatz { color: var(--ivory); }

/* Porträt neben Text */

.portraet-block {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
  gap: clamp(30px, 5vw, 64px);
  align-items: start;
}

.portraet {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 3px;
  overflow: hidden;
  background: var(--ivory);
  position: sticky;
  top: 110px;
}

.portraet img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
  filter: grayscale(0.15);
}

@media (max-width: 820px) {
  .portraet-block { grid-template-columns: 1fr; }
  .portraet { position: static; max-width: 320px; }
}

/* Kurzprofil in Zeilen */

.profil { list-style: none; margin: 26px 0 0; padding: 0; }
.profil li {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 22px;
  padding: 14px 0;
  border-top: 1px solid var(--linie);
  font-size: 0.94rem;
}
.profil li:last-child { border-bottom: 1px solid var(--linie); }
.profil li span:first-child { color: var(--akzent); }
.profil li span:last-child { color: #56524E; }
@media (max-width: 620px) {
  .profil li { grid-template-columns: 1fr; gap: 4px; }
}

/* Zitat-Slideshow */

.zitat-buehne {
  position: relative;
  min-height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.zitat-folie {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 0.7, 0.3, 1);
  pointer-events: none;
}
.zitat-folie.aktiv { opacity: 1; transform: none; }

.zitat-punkte {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 34px;
}

.zitat-punkte button {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--akzent);
  background: transparent;
  cursor: pointer;
  transition: background 0.25s ease;
}
.zitat-punkte button[aria-current="true"] { background: var(--akzent); }

@media (prefers-reduced-motion: reduce) {
  .zitat-folie { transition: none; }
}

/* ============================================================
   Leistungs-Detailseiten
   ============================================================ */

.l-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 10vw, 120px) 0 clamp(52px, 8vw, 88px);
  background: linear-gradient(180deg, var(--ivory) 0%, var(--papier) 100%);
  border-bottom: 1px solid var(--linie);
}

.l-nummer {
  font-size: clamp(3.4rem, 9vw, 6.5rem);
  font-weight: 600;
  line-height: 0.9;
  color: var(--akzent);
  opacity: 0.16;
  margin-bottom: -0.22em;
}

.l-hero h1 { max-width: 17ch; margin-bottom: 14px; }
.l-hero .claim {
  font-size: clamp(1.1rem, 2.1vw, 1.45rem);
  font-weight: 300;
  color: var(--akzent);
  max-width: 32ch;
}

/* Text mit Randnotiz */

.text-block {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(32px, 5vw, 52px) 0;
  border-top: 1px solid var(--linie);
  align-items: start;
}

.text-block:first-of-type { border-top: none; padding-top: 0; }

.text-block .seiten-titel {
  font-size: 0.86rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--akzent);
  position: sticky;
  top: 110px;
}

.text-block .inhalt p:last-child { margin-bottom: 0; }
.text-block .inhalt p.gross {
  font-size: clamp(1.08rem, 1.9vw, 1.25rem);
  font-weight: 300;
  line-height: 1.5;
  color: #3E3B38;
}

@media (max-width: 780px) {
  .text-block { grid-template-columns: 1fr; gap: 12px; }
  .text-block .seiten-titel { position: static; }
}

/* Merkmalsliste mit Haken */

.merkmale { list-style: none; margin: 22px 0 0; padding: 0; }
.merkmale li {
  position: relative;
  padding: 0 0 0 30px;
  margin-bottom: 14px;
  font-size: 0.96rem;
  color: #4A4744;
}
.merkmale li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--akzent);
}
.merkmale li strong { font-weight: 500; color: var(--anthrazit); }

/* Abschluss-Aufruf */

.aufruf {
  background: var(--ivory);
  border-top: 1px solid var(--linie);
  padding: clamp(48px, 8vw, 88px) 0;
  text-align: center;
}
.aufruf h2 { max-width: 24ch; margin: 0 auto 14px; }
.aufruf p { max-width: 46ch; margin: 0 auto 8px; color: #56524E; }
.aufruf .knopfreihe { justify-content: center; }

/* ============================================================
   Terminbuchung (Entwurf, ohne Funktion)
   ============================================================ */

.buchung {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
  gap: clamp(28px, 4vw, 52px);
  align-items: start;
}

@media (max-width: 900px) { .buchung { grid-template-columns: 1fr; } }

.schrittleiste {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin-bottom: 40px;
  font-size: 0.88rem;
}
.schrittleiste span {
  color: var(--stone);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.schrittleiste span::before {
  content: attr(data-nr);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--linie);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
}
.schrittleiste span.aktiv { color: var(--anthrazit); }
.schrittleiste span.aktiv::before {
  background: var(--akzent);
  border-color: var(--akzent);
  color: #fff;
}

/* Buchung deckt Schritt für Schritt auf, versteckte Blöcke bleiben zuverlässig aus */
[hidden] { display: none !important; }

.wahl-reihe { display: grid; gap: 12px; margin-bottom: 40px; }

.wahl {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  border: 1px solid var(--linie);
  border-radius: 3px;
  background: #fff;
  padding: 18px 22px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.wahl:hover { border-color: var(--akzent-hell); }
.wahl[aria-pressed="true"] { border-color: var(--akzent); background: var(--akzent-flaeche); }

.wahl .punkt {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--linie);
}
.wahl[aria-pressed="true"] .punkt {
  border-color: var(--akzent);
  box-shadow: inset 0 0 0 3px var(--akzent);
}
/* Mehrfachauswahl: eckiger statt runder Punkt, damit erkennbar ist, dass mehreres geht */
.wahl.mehrfach .punkt { border-radius: 3px; }

.wahl .titel { font-weight: 500; }
.wahl .dauer { font-size: 0.86rem; color: var(--stone); }

/* Kalender */

.kalender-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.kalender-kopf .monat { font-weight: 500; }
.kalender-kopf button {
  border: 1px solid var(--linie);
  background: #fff;
  width: 32px; height: 32px;
  border-radius: 3px;
  cursor: pointer;
  color: var(--anthrazit);
}

.kalender {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.kalender .tagkopf {
  text-align: center;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
  padding-bottom: 6px;
}
.kalender button {
  aspect-ratio: 1;
  border: 1px solid var(--linie);
  background: #fff;
  border-radius: 3px;
  cursor: pointer;
  font: inherit;
  font-size: 0.92rem;
  color: var(--anthrazit);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.kalender button:hover:not(:disabled) { border-color: var(--akzent); }
.kalender button:disabled {
  color: #C8C4BF;
  background: transparent;
  border-color: transparent;
  cursor: default;
}
.kalender button[aria-pressed="true"] {
  background: var(--akzent);
  border-color: var(--akzent);
  color: #fff;
}
.kalender .leer { visibility: hidden; }

/* Uhrzeiten */

.zeiten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
  margin-top: 26px;
}
.zeiten button {
  border: 1px solid var(--linie);
  background: #fff;
  border-radius: 3px;
  padding: 11px 6px;
  cursor: pointer;
  font: inherit;
  font-size: 0.92rem;
  color: var(--anthrazit);
  transition: border-color 0.15s ease;
}
.zeiten button:hover { border-color: var(--akzent); }
.zeiten button[aria-pressed="true"] {
  background: var(--akzent);
  border-color: var(--akzent);
  color: #fff;
}

/* Zusammenfassung */

.zusammenfassung {
  border: 1px solid var(--linie);
  border-radius: 3px;
  background: #fff;
  padding: 28px 26px;
  position: sticky;
  top: 110px;
}
.zusammenfassung h3 { margin-bottom: 18px; }
.zusammenfassung dl { margin: 0 0 22px; }
.zusammenfassung dt {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
  margin-top: 14px;
}
.zusammenfassung dd { margin: 3px 0 0; font-size: 0.97rem; }
.zusammenfassung .offen { color: #B0ABA5; }

.feld-reihe { display: grid; gap: 12px; margin-bottom: 20px; }
.feld-reihe input, .feld-reihe textarea {
  width: 100%;
  border: 1px solid var(--linie);
  border-radius: 3px;
  padding: 12px 14px;
  font: inherit;
  font-size: 0.94rem;
  background: var(--papier);
  color: var(--anthrazit);
}
.feld-reihe input:focus, .feld-reihe textarea:focus {
  outline: 2px solid var(--akzent);
  outline-offset: -2px;
  background: #fff;
}

.knopf-voll-breit {
  width: 100%;
  justify-content: center;
  border: 1px solid var(--akzent);
  background: var(--akzent);
  color: #fff;
  padding: 14px;
  border-radius: 2px;
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}
.knopf-voll-breit:disabled {
  background: #D6D2CD;
  border-color: #D6D2CD;
  color: #fff;
  cursor: not-allowed;
}

/* ============================================================
   Bewegte Signets in den Kopfbereichen
   ============================================================ */

/* Gemeinsame Hülle: Position und Parallax beim Scrollen */
.signet-feld {
  position: absolute;
  top: 50%;
  pointer-events: none;
  user-select: none;
  transform: translateY(calc(-50% + var(--parallax-y, 0px)));
  will-change: transform;
}

/* Resilienz: Herz steht ruhig im Hintergrund, bewusst ohne Puls-Animation (Andreas' Wunsch, 10.09.2026) */
.r-hero .signet-feld {
  right: 4%;
  width: clamp(300px, 42vw, 540px);
  opacity: 0.07;
}

.puls {
  display: block;
  width: 100%;
  height: auto;
}

/* Automation: Galaxie dreht langsam, beim Scrollen etwas schneller */
.a-hero .signet-feld {
  right: 2%;
  width: clamp(360px, 50vw, 700px);
  opacity: 0.3;
  z-index: 1;
  transform: translateY(calc(-50% + var(--parallax-y, 0px))) rotate(var(--scroll-dreh, 0deg));
}

.dreht {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 50% 50%;
  animation: galaxie 150s linear infinite;
}

@keyframes galaxie {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .dreht { animation: none; }
  .signet-feld { transform: translateY(-50%) !important; }
}

/* ============================================================
   Volle Breite für Elemente, die kein Lesetext sind
   ============================================================ */

/* Gitter, Rahmen und Bühnen dürfen die ganze Seite nutzen.
   Fließtext bleibt in der schmalen Spalte, sonst leidet die Lesbarkeit. */
.breit {
  max-width: none;
  padding-left: clamp(20px, 3.5vw, 52px);
  padding-right: clamp(20px, 3.5vw, 52px);
}

/* Fußzeilen: Rahmen der Seite, kein Lesetext */
footer.fuss .wrap {
  max-width: none;
  padding-left: clamp(20px, 3.5vw, 52px);
  padding-right: clamp(20px, 3.5vw, 52px);
}

/* Das große Zitat bekommt Luft, bleibt aber in der Zeilenlänge begrenzt */
.gross-zitat blockquote { max-width: 26ch; }



/* ============================================================
   Ablauf als Meilensteine, ansteigend
   ============================================================ */

.meilensteine {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

.stein {
  padding-right: 26px;
  /* Jeder Meilenstein sitzt etwas höher als der vorige */
  padding-top: calc((3 - var(--rise, 0)) * 26px);
}
.stein:last-child { padding-right: 0; }

.stein-marke {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

.stein-kreis {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1.5px solid var(--akzent);
  background: var(--papier);
  color: var(--akzent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  position: relative;
  z-index: 1;
}

.stein-kreis::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px solid var(--akzent);
  opacity: 0.22;
}

/* Weg zum nächsten Meilenstein: waagrecht, dann der Anstieg */
.stein-weg {
  flex: 1;
  height: 1px;
  background: var(--linie);
  margin: 0 -26px 0 14px;
  position: relative;
}

.stein-weg::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1px;
  height: 26px;
  background: var(--linie);
}

.stein:last-child .stein-weg { display: none; }

.stein h3 { font-size: 1.05rem; margin-bottom: 8px; }
.stein p { font-size: 0.93rem; color: #56524E; margin-bottom: 0; }

@media (max-width: 940px) {
  .meilensteine { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .stein { padding-top: 0; }
  .stein:nth-child(2) .stein-weg { display: none; }
  .stein-weg::after { display: none; }
}

@media (max-width: 560px) {
  .meilensteine { grid-template-columns: 1fr; row-gap: 34px; }
  .stein { padding-right: 0; }
  .stein-weg { display: none; }
}


/* Zitatband auf der Automation-Seite kühl statt warm, passend zum Blau */
body.automation .gross-zitat { background: #F1F4F7; }

/* ============================================================
   Fallbeispiel
   ============================================================ */

.fall {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.85fr);
  gap: clamp(30px, 5vw, 68px);
  align-items: start;
}

@media (max-width: 900px) { .fall { grid-template-columns: 1fr; } }

.fall-abschnitt { margin-bottom: 30px; }
.fall-abschnitt:last-child { margin-bottom: 0; }

.fall-abschnitt .titel {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--akzent);
  margin-bottom: 10px;
}

.fall-abschnitt p { margin-bottom: 0; color: #4A4744; }

/* Ergebnisleiste rechts */
.fall-ergebnis {
  border: 1px solid var(--linie);
  border-radius: 3px;
  background: #fff;
  padding: 30px 28px;
  position: sticky;
  top: 110px;
}

.fall-ergebnis h3 {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 22px;
}

.fall-ergebnis dl { margin: 0; }

.fall-ergebnis dt {
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  font-weight: 600;
  color: var(--akzent);
  line-height: 1.1;
}

.fall-ergebnis dd {
  margin: 6px 0 0;
  font-size: 0.9rem;
  color: #56524E;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--linie);
}

.fall-ergebnis dd:last-of-type { border-bottom: none; padding-bottom: 0; }
.fall-ergebnis dt + dd { margin-bottom: 20px; }
.fall-ergebnis dd:last-of-type { margin-bottom: 0; }

/* ============================================================
   Produktband: das AI-OS auf der Automation-Seite
   ============================================================ */

.produkt-band {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #EDF2F8 0%, #F5F8FB 100%);
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  padding: clamp(64px, 10vw, 116px) 0;
}

/* Vernetztes System als Hintergrund */
.netz {
  position: absolute;
  top: 50%;
  left: -7%;
  width: clamp(460px, 58vw, 820px);
  transform: translateY(-50%);
  pointer-events: none;
  user-select: none;
}

.netz-linien line {
  stroke: var(--akzent);
  stroke-width: 1;
  opacity: 0.16;
}

.netz-knoten circle {
  fill: var(--akzent);
  opacity: 0.22;
}

.netz-knoten .puls-knoten {
  animation: knoten-puls 5.4s ease-in-out infinite;
}

@keyframes knoten-puls {
  0%, 100% { opacity: 0.18; }
  50%      { opacity: 0.62; }
}

.produkt-innen {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(30px, 5vw, 72px);
  align-items: center;
}

@media (max-width: 900px) { .produkt-innen { grid-template-columns: 1fr; } }

/* Der Produktname trägt den Block, der Satz darunter erklärt ihn */
.produkt-name {
  font-size: clamp(3.2rem, 8.5vw, 6rem);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--akzent);
  margin-bottom: 18px;
}

.produkt-innen h2 {
  font-size: clamp(1.45rem, 2.9vw, 2.15rem);
  max-width: 20ch;
  margin-bottom: 18px;
}

.produkt-innen h2 em { font-style: normal; color: var(--akzent); }

/* Haelt Wortmarken wie AI-OS am Zeilenende zusammen */
.nbr { white-space: nowrap; }

.produkt-innen p {
  color: #3E3B38;
  font-size: clamp(1.02rem, 1.7vw, 1.18rem);
  max-width: 48ch;
  margin-bottom: 0;
}

.produkt-karte {
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: 3px;
  padding: 32px 30px;
}

.produkt-karte ul {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  font-size: 0.97rem;
  color: #4A4744;
}

.produkt-karte li {
  padding: 14px 0 14px 28px;
  border-top: 1px solid var(--linie);
  position: relative;
}
.produkt-karte li:first-child { border-top: none; padding-top: 0; }

.produkt-karte li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 1.32em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--akzent);
  opacity: 0.5;
}
.produkt-karte li:first-child::before { top: 0.42em; }

@media (prefers-reduced-motion: reduce) {
  .netz-knoten .puls-knoten { animation: none; }
}

/* ============================================================
   Produktseite AI-OS: eigener Kopfbereich
   Dunkel wie der Automation-Hero, mit dem Knotennetz als Träger.
   ============================================================ */

.p-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(720px 540px at 74% 48%, rgba(111, 166, 214, 0.22), transparent 70%),
    #14181D;
  color: var(--ivory);
  padding: clamp(88px, 14vw, 168px) 0 clamp(76px, 12vw, 128px);
}

/* Dichtes Netz als eigene Grafik. Liegt ausgelagert in assets/netz-neuronal.svg,
   weil es bei 340 Knoten und 615 Verbindungen die Seite sonst unlesbar machen wuerde.
   Die Animation steckt in der SVG-Datei selbst und laeuft auch bei Einbindung als Bild. */
.netz-hero {
  position: absolute;
  top: 50%;
  right: -14%;
  width: clamp(600px, 82vw, 1180px);
  transform: translateY(-50%);
  opacity: 0.85;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 900px) {
  .netz-hero { right: -30%; opacity: 0.55; }
}

.p-hero .wrap { position: relative; z-index: 1; }

/* Der Produktname trägt den Kopfbereich, darunter viel Luft */
.p-marke {
  font-size: clamp(4rem, 13vw, 9rem);
  font-weight: 600;
  line-height: 0.86;
  letter-spacing: -0.035em;
  color: var(--ivory);
  margin-bottom: clamp(40px, 6.5vw, 84px);
}

.p-hero h1 {
  color: var(--ivory);
  max-width: 20ch;
  margin-bottom: 16px;
}
.p-hero h1 em { font-style: normal; color: #6FA6D6; }

.p-hero .claim {
  font-size: clamp(1.1rem, 2.1vw, 1.45rem);
  font-weight: 300;
  color: rgba(244, 241, 236, 0.72);
  max-width: 38ch;
}

@media (prefers-reduced-motion: reduce) {
  .p-hero .netz-knoten .puls-knoten { animation: none; }
}

/* Zwei mal zwei statt vier nebeneinander. Bei drei Sätzen pro Karte ist die
   Zeilenlänge sonst zu kurz, der Text bricht dann alle paar Wörter um.
   Nur für die Produktseite, .karten bleibt auf der Resilienz-Seite unverändert. */
.karten.paare {
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(22px, 2.6vw, 34px);
}
.karten.paare .karte { padding: clamp(28px, 3vw, 42px); }
.karten.paare .karte h3 { font-size: clamp(1.15rem, 1.9vw, 1.4rem); }
.karten.paare .karte p { font-size: clamp(0.95rem, 1.35vw, 1.05rem); }

@media (max-width: 760px) {
  .karten.paare { grid-template-columns: 1fr; }
}

/* ============================================================
   HRV-Band auf der Resilienz-Seite: volle Breite, eigener Grund,
   schematische Kurve als Beweisbild. Gegenstück zum Produktband
   auf der Automation-Seite.
   ============================================================ */

.hrv-band {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #FBF5EF 0%, #FCFAF7 100%);
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  padding: clamp(60px, 9vw, 104px) 0;
}
.hrv-kopf { max-width: 54ch; margin-bottom: clamp(28px, 4vw, 44px); }
.hrv-kopf h2 { max-width: 20ch; margin-bottom: 14px; }
.hrv-kopf p { color: #56524E; margin: 0; }

.hrv-kurve {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 18px;
}

/* Beschriftung in der HRV-Grafik. Das SVG liegt inline im HTML, damit es die
   Seitenschrift und den Seitenhintergrund erbt statt einen eigenen mitzubringen. */
.hrv-figur { margin: 0; }
.hrv-bildtitel { text-align: center; margin-bottom: 2px; }
.hrv-bildtitel strong {
  display: block;
  font-size: clamp(1.05rem, 1.9vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--anthrazit);
}
.hrv-bildtitel span {
  display: block;
  margin-top: 4px;
  font-size: 0.95rem;
  color: #7A7671;
}

.hrv-kurve text { font-family: inherit; }
.hrv-tick { font-size: 13px; fill: #8A8580; }
.hrv-achse { font-size: 14px; fill: #7A7671; }
.hrv-zone { font-size: 16px; font-weight: 600; letter-spacing: 0.06em; }
.hrv-zone-ungesund { fill: #8A8580; }
.hrv-zone-gesund { fill: #9B2C20; }
.hrv-zonentext { font-size: 13px; fill: #8A8580; }
.hrv-zonentext-rot { fill: #B4604F; }
.hrv-entwicklung { font-size: 13px; font-style: italic; fill: #9B2C20; }
.hrv-quelle { font-size: 11px; fill: #A9A49E; }

/* Auf schmalen Schirmen skaliert das SVG stark herunter, die Beschriftung würde
   sonst unleserlich. Weil es echter Text und kein Bild ist, lässt sie sich einfach
   größer setzen, sie wächst dann mit der Verkleinerung mit. */
@media (max-width: 760px) {
  .hrv-tick { font-size: 22px; }
  .hrv-achse { font-size: 24px; }
  .hrv-zone { font-size: 26px; }
  .hrv-zonentext { font-size: 21px; }
  .hrv-entwicklung { font-size: 21px; }
  .hrv-quelle { font-size: 17px; }
}

.hrv-marken {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px 40px;
}
.hrv-marken span { font-size: 0.93rem; color: #56524E; }
.hrv-marken strong { display: block; color: var(--anthrazit); font-weight: 500; }

.hrv-hinweis { font-size: 0.82rem; color: #7A7671; margin: 18px 0 0; }

/* Angebotsstufen in drei Spalten, etwa auf der Resilienz-Seite */
.stufen.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .stufen.drei { grid-template-columns: 1fr; }
}

/* Platzhalter, die vor dem Livegang gefüllt werden müssen */
.platzhalter {
  color: var(--stone);
  font-style: italic;
  font-weight: 400;
}

/* Kicker und Fußnoten in den Angebotsstufen der Resilienz-Seite */
.stufen-kicker {
  display: block;
  margin-bottom: 12px;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--akzent-hell);
}
.stufen-fuss { margin: 18px 0 0; font-size: 0.88rem; color: #7A7671; }
.stufen-hinweis { margin: 24px 0 0; font-size: 0.9rem; color: #7A7671; }


/* Honigtopf gegen Formular-Bots. Bewusst nicht display:none, das erkennen viele
   Bots und lassen das Feld dann aus. Stattdessen aus dem Sichtfeld geschoben. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Zustimmung zur Datenverarbeitung im Kontaktformular */
.zustimmung {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.86rem;
  color: #5A5652;
  line-height: 1.5;
  margin: 0 0 22px;
  cursor: pointer;
}
.zustimmung input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--akzent);
}