/* Gestaltung nach der früheren one.com-Seite, Werte dort gemessen (bei 1400 Punkt
   Fensterbreite): Schrift Outfit, Inhalt 1200 Punkt breit, Text #3c3c3c,
   H1 64 px, H2 42 px, H3 32 px, Fließtext 18 px mit Zeilenhöhe 1,8, Menü 18 px.
   Abweichende Größen einzelner Überschriften stehen direkt an der Stelle
   (style="font-size:…"), so wie im Original.
   Die Schrift liegt im Repo, damit keine Anfrage an Google geht. */
@font-face {
  font-family: "Outfit";
  src: url("/schrift/outfit.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
:root {
  --text: #3c3c3c;
  --text-leise: #45515b;
  --grund: #ffffff;
  --band: #3c3c3c;
  --linie: #e6e6e6;
  --akzent: #991b1b;
  --breite: 1200px;
  --kopfhoehe: 67px;
}
* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--kopfhoehe) + 12px); }
body {
  margin: 0;
  font-family: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 1.8;
  color: var(--text);
  background: var(--grund);
  overflow-x: hidden;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-weight: 400; margin: 1.2em 0 .4em; }
h1 { font-size: 64px; line-height: 1.2; }
h2 { font-size: 42px; line-height: 1.2; }
h3 { font-size: 32px; line-height: 1.4; }
h4 { font-size: 18px; line-height: 1.3; font-weight: 700; }
p { margin: 0 0 1em; }

/* ---------- Kopf ---------- */
.kopf {
  position: sticky; top: 0; z-index: 20;
  height: var(--kopfhoehe);
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid var(--linie);
}
.kopf-innen { max-width: var(--breite); height: 100%; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 24px; }
.marke img { height: 47px; width: auto; }
.nav { margin-left: 24px; }
.nav > ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav li { position: relative; }
.nav a, .nav .klapp {
  display: block; padding: 8px 14px;
  font: inherit; font-size: 18px; line-height: 22px; text-transform: uppercase;
  text-decoration: none; color: var(--text); background: none; border: 0; cursor: pointer;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--akzent); }
.nav .eintrag { display: flex; align-items: center; }
.nav .klapp { padding: 8px 10px 8px 0; }
.nav .klapp::after { content: ""; display: inline-block; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-4px) rotate(45deg); }
.nav ul ul {
  display: none; position: absolute; left: 0; top: 100%;
  min-width: 260px; list-style: none; margin: 0; padding: 6px 0;
  background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.14);
}
.nav ul ul a { text-transform: none; padding: 10px 18px; }
.nav li:hover > ul, .nav li:focus-within > ul, .nav li.offen > ul { display: block; }
.menuknopf { display: none; margin-left: auto; background: none; border: 0; padding: 10px; cursor: pointer; }
.menuknopf span { display: block; width: 24px; height: 2px; background: var(--text); margin: 5px 0; }

/* ---------- Bänder ---------- */
/* Dunkelgrauer Grund, darauf das Bild mit der Deckkraft aus dem Original
   (steht am Element .band-bild). Die Höhe steht als --h am Band. */
.band {
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  min-height: var(--h, 260px);
  background-color: var(--band);
  color: #fff; padding: 32px 0;
}
.band-bild {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: 50% 50%; background-repeat: no-repeat;
}
.bandvideo { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; z-index: 0; }
.band-innen { position: relative; z-index: 2; width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 24px; }
.band h1, .band h2, .band h3 { margin: .1em 0; }
.band p { margin: .6em 0 0; }

/* ---------- Fließtext ---------- */
.fliess { max-width: var(--breite); margin: 0 auto; padding: 40px 24px 48px; }
.fliess > :first-child { margin-top: 0; }
.fliess ul, .fliess ol { padding-left: 1.3em; margin: 0 0 1em; }
.fliess figure { margin: 28px 0; }
.fliess figure img { margin: 0 auto; }
.fliess figure video { max-width: 432px; width: 100%; margin: 0 auto; }
.fliess a { color: var(--akzent); }

/* Dunkler Balken mit Überschrift, z. B. „FÜR HR STRATEGEN“ */
.balken { max-width: var(--breite); margin: 0 auto; padding: 0 24px; }
.balken h3 { margin: 0; padding: 6px 16px; background: var(--band); color: #fff; text-align: center; }

/* ---------- Knöpfe ---------- */
/* Im Original: weiße Fläche, dunkle fette Schrift 18 px, ca. 313 × 50 Punkt */
.knopfzeile { margin: 24px 0 0; text-align: center; }
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 313px; min-height: 50px; padding: 0 24px;
  background: #fff; color: var(--text) !important; text-decoration: none;
  font-size: 18px; font-weight: 700; line-height: 1.2;
  transition: background .15s, color .15s;
}
.knopf:hover { background: #e9e9e9; }
.fliess .knopf { background: var(--band); color: #fff !important; }

/* ---------- Karten ---------- */
.karten {
  max-width: var(--breite); margin: 0 auto; padding: 36px 24px 64px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 48px;
}
.karte { text-align: center; min-width: 0; }
.karte img { width: 100%; max-width: 390px; margin: 0 auto; aspect-ratio: 390 / 304; object-fit: cover; }
.karte h4 { margin: 16px auto 8px; max-width: 274px; }
.karte p { margin: 0 auto; font-size: 15px; line-height: 1.2; max-width: 274px; }
.karte a { text-decoration: none; }

/* ---------- Eingebettete Bausteine (interaktive Seiten) ---------- */
.baustein { width: 100%; }

/* ---------- Blog ---------- */
.blogliste { max-width: var(--breite); margin: 0 auto; padding: 48px 24px 64px; display: grid; gap: 40px; }
.blogeintrag { display: grid; grid-template-columns: 380px 1fr; gap: 32px; text-decoration: none; color: inherit; align-items: start; }
.blogeintrag img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.blogeintrag h2 { font-size: 32px; line-height: 1.3; margin: 0 0 10px; }
.blogeintrag p { margin: 0; }
.blogeintrag:hover h2 { color: var(--akzent); }
.blogkopf { max-width: var(--breite); margin: 0 auto; padding: 40px 24px 0; }
.blogkopf a { font-size: 16px; text-transform: uppercase; color: var(--text-leise); text-decoration: none; }
.blogkopf h1 { font-size: 42px; margin: .4em 0 0; }

/* ---------- Fuß ---------- */
.fuss { max-width: var(--breite); margin: 0 auto; padding: 32px 24px 44px; text-align: right; color: var(--text-leise); }
.fuss p { margin: 0; }

/* ---------- Effekte wie im Original ----------
   Nur am Rechner (Maus, breites Fenster): Das Original schaltet sie auf
   Telefon und Tablet ab, dort scrollen die Bilder normal mit.
   aufdecken = das Bild steht still, der Inhalt gleitet darüber.
   parallax  = das Bild ist 1,6-mal so hoch wie das Band und wird beim
               Durchscrollen gleichmäßig verschoben (Skript in seite.html). */
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .band[data-effekt="aufdecken"] .band-bild { background-attachment: fixed; }
  .band[data-effekt="parallax"] .band-bild { top: -30%; bottom: auto; height: 160%; will-change: transform; }
}

/* ---------- Telefon und Tablet ---------- */
@media (max-width: 1100px) {
  .menuknopf { display: block; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: var(--kopfhoehe);
    max-height: calc(100vh - var(--kopfhoehe)); overflow-y: auto;
    background: var(--band); padding: 8px 0 16px;
  }
  .nav.offen { display: block; }
  .nav > ul { flex-direction: column; gap: 0; }
  .nav a, .nav .klapp { color: #fff; padding: 12px 24px; }
  .nav .klapp { padding: 12px 24px 12px 8px; }
  .nav a:hover, .nav a[aria-current="page"] { color: #ff9b8f; }
  .nav ul ul { position: static; display: none; box-shadow: none; background: rgba(255,255,255,.06); padding: 0; }
  .nav ul ul a { color: #fff; padding-left: 40px; }
  .nav li:hover > ul, .nav li:focus-within > ul { display: none; }
  .nav li.offen > ul { display: block; }
}
@media (max-width: 760px) {
  body { font-size: 17px; }
  h1, .band h1 { font-size: 40px !important; }
  h2, .band h2 { font-size: 30px !important; }
  h3 { font-size: 24px !important; }
  .band h2[style*="24px"], .band h1[style*="28px"] { font-size: 20px !important; }
  .band p[style*="26px"] { font-size: 20px !important; }
  .band { min-height: calc(var(--h, 260px) * .75); }
  .knopf { min-width: 0; width: 100%; max-width: 313px; }
  .blogeintrag { grid-template-columns: 1fr; gap: 14px; }
  .fuss { text-align: center; }
}

/* Zwei Spalten nebeneinander (z. B. Potenzial | Voraussetzungen auf der ANI-Seite) */
.spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 0 150px; margin: 0 0 1em; }
.spalten > div { min-width: 0; }
@media (max-width: 760px) { .spalten { grid-template-columns: 1fr; } }
.fliess li > p { margin: 0; }

/* ---------- Abschnitte aus dem WebSpace-Editor (19.10.2026) ----------
   Zitat, Bild mit Unterschrift, Video, Trennlinie, Abstand, Bildgrößen.
   Jeder Typ ist im Editor unter "Abschnitt einfügen" zu finden. */
.fliess blockquote, blockquote.zitat {
  margin: 28px 0; padding: 8px 0 8px 28px;
  border-left: 4px solid var(--akzent);
  font-size: 24px; line-height: 1.5; font-style: italic;
}
blockquote cite, blockquote footer { display: block; margin-top: 10px; font-size: 16px; font-style: normal; color: var(--text-leise); }
figure figcaption { margin-top: 10px; font-size: 15px; color: var(--text-leise); text-align: center; }
figure.klein img { max-width: 380px; }
figure.mittel img { max-width: 720px; }
figure.voll img { width: 100%; }
.video { position: relative; aspect-ratio: 16 / 9; margin: 28px 0; background: #000; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
hr.trenner { border: 0; border-top: 1px solid var(--linie); max-width: var(--breite); margin: 32px auto; }
.abstand { height: var(--abstand, 48px); }
.mitte { text-align: center; }