/* ================================================================
   FORUS — Magazin-Beitrag (Titel + Text)
   Dunkler Kopf mit Beitragsbild, darunter eine ruhige Lesespalte.
   Farb-Tokens vom Theme, Fallbacks = Brand Guide.
   Keine font-family (erbt vom Theme).
   ================================================================ */

.forus-post, .forus-post *, .forus-post *::before, .forus-post *::after{ box-sizing: border-box; }

.forus-post{
  --fu-grad: var(--gradient, linear-gradient(120deg,#9e2585 0%,#c81d84 25%,#e21961 50%,#e84c05 75%,#ec6a02 100%));
  --fu-papier: var(--papier,#f1eeed);
  --fu-surface: var(--surface,#e6e0da);
  --fu-pflaume: var(--pflaume,#330f2d);
  --fu-ink: var(--ink,#1a1e20);
  --fu-ease: cubic-bezier(.19,1,.22,1);
  --fu-hair: rgba(26,30,32,.16);
  --fu-r-eff: min(var(--fu-r,96px), 11vw);

  position: relative;
  display: block;
}
.forus-post.kopf-pflaume{ --fu-kopf: var(--fu-pflaume); }
.forus-post.kopf-ink    { --fu-kopf: var(--fu-ink); }
.forus-post.text-papier { --fu-text-bg: var(--fu-papier); }
.forus-post.text-surface{ --fu-text-bg: var(--fu-surface); }
.forus-post.text-weiss  { --fu-text-bg: #ffffff; }

/* ---------- Lesefortschritt ----------
   Laeuft ueber eine Scroll-Zeitleiste, also ohne JavaScript pro Bild.
   Kennt der Browser das nicht, bleibt der Balken einfach leer. */
.forus-post__fortschritt{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 60;
  pointer-events: none;
  background: color-mix(in srgb, var(--fu-pflaume) 12%, transparent);
}
.forus-post__fortschritt b{
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--fu-grad);
}
@supports (animation-timeline: scroll()){
  .forus-post__fortschritt b{
    animation: fu-post-lesen linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes fu-post-lesen{
    from{ transform: scaleX(0); }
    to{ transform: scaleX(1); }
  }
}

/* ---------- Kopf ---------- */
.forus-post__kopf{
  position: relative;
  isolation: isolate;
  background: var(--fu-kopf);
  color: var(--fu-papier);
  /* Platz fuer die feste Navigation (76px) plus Luft */
  padding-top: calc(76px + clamp(3rem, 9vh, 7rem));
  padding-bottom: clamp(3.5rem, 9vh, 7rem);
}
.forus-post__bild{
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.forus-post__bild img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
}
/* Verlauf ueber dem Bild: die Schrift muss immer lesbar bleiben */
.forus-post__bild::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--fu-kopf) 55%, transparent) 0%,
    color-mix(in srgb, var(--fu-kopf) 78%, transparent) 55%,
    var(--fu-kopf) 100%);
}
.forus-post__kopf-inner{
  position: relative;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding-inline: clamp(1.25rem, 5vw, 3.5rem);
}

.forus-post__eyebrow{
  margin: 0 0 1rem;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .24em;
  text-transform: uppercase;
  opacity: .8;
}
.forus-post__titel{
  margin: 0;
  max-width: 22ch;
  font-size: clamp(2.2rem, 6vw, 4.2rem);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.03em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--fu-papier);
}
.forus-post__meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.4rem;
  margin-top: clamp(1.4rem, 3vw, 2rem);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .8;
}
.forus-post__avatar{
  width: 34px; height: 34px;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  background: color-mix(in srgb, currentColor 18%, transparent);
  box-shadow: 0 0 0 1.5px rgba(226,25,97,.55);
}
.forus-post__avatar img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.forus-post__autor{ letter-spacing: .1em; }

/* Welle: die DUNKLE Flaeche bildet den Bogen (runde Unterkante) */
.forus-post__sweep{
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  margin-top: -1px;
  height: var(--fu-r-eff);
  width: 100%;
  display: block;
  pointer-events: none;
}
.forus-post__sweep-path{ fill: var(--fu-kopf); }

/* ---------- Lesespalte ---------- */
.forus-post__body{
  background: var(--fu-text-bg);
  color: var(--fu-ink);
  /* Die Welle des Kopfes ragt in diesen Bereich hinein — ihre Hoehe
     gehoert deshalb zum Abstand dazu, sonst startet der Text direkt
     unter dem Bogen und wirkt gedraengt. */
  padding-top: calc(var(--fu-r-eff) + min(var(--fu-pad-top,96px), 18vw));
  padding-bottom: min(var(--fu-pad-bottom,144px), 24vw);
}
.forus-post__inner{
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  padding-inline: clamp(1.25rem, 5vw, 3.5rem);
}
/* Mit Seitenspalte wird der Rahmen breiter, die Lesespalte selbst
   bleibt aber schmal — Lesbarkeit geht vor Ausnutzung der Flaeche. */
.forus-post__inner.hat-spalte{
  max-width: 1220px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
.forus-post__haupt{ min-width: 0; max-width: 720px; }

/* ---------- Seitenspalte: Anmeldung ---------- */
.forus-post__spalte{ min-width: 0; }
.forus-post__spalte.ist-haftend{
  position: sticky;
  /* unter der festen Navigation stehenbleiben */
  top: calc(76px + clamp(1rem, 3vh, 2rem));
}
.forus-post__box{
  background: var(--fu-pflaume);
  color: var(--fu-papier);
  border-radius: 24px;
  padding: clamp(1.5rem, 2.5vw, 2.1rem);
}
/* Violett hebt die Box vom ruhigen Papier ab — sie soll auffallen,
   ohne mit dem Beitragsbild oben zu konkurrieren. */
.forus-post__box.ist-violett{ background: #9e2585; }
.forus-post__box.ist-verlauf{ background: linear-gradient(150deg,#9e2585 0%,#c81d84 55%,#e21961 100%); }
.forus-post__box.ist-pflaume{ background: var(--fu-pflaume); }
/* Eingabefelder auf der helleren Flaeche etwas kraeftiger absetzen */
.forus-post__box.ist-violett .hs-input,
.forus-post__box.ist-verlauf .hs-input{
  background: rgba(20,6,18,.28);
  border-color: rgba(241,238,237,.42);
}
.forus-post__box-titel{
  margin: 0 0 .8rem;
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--fu-papier);
}
.forus-post__box-text{
  font-size: .92rem;
  line-height: 1.55;
  opacity: .82;
}
.forus-post__box-text p{ margin: 0 0 .8em; }
.forus-post__box-text p:last-child{ margin-bottom: 0; }
.forus-post__box-hinweis{
  margin: .9rem 0 0;
  font-size: .74rem;
  line-height: 1.5;
  opacity: .6;
}
.forus-post__box-form{ margin-top: 1.1rem; }

/* HubSpot-Formular an die Marke heranfuehren. Hohe Spezifitaet +
   !important, weil das Formular-Stylesheet je nach Verbindung vor
   oder nach diesem hier ankommt. */
.forus-post .forus-post__box-form form label,
.forus-post .forus-post__box-form form label span,
.forus-post .forus-post__box-form .hs-field-desc,
.forus-post .forus-post__box-form .legal-consent-container,
.forus-post .forus-post__box-form .legal-consent-container *{
  color: var(--fu-papier) !important;
}
.forus-post__box-form .hs-form-field label{
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .85;
}
/* Der Datenschutz-Hinweis ist Fliesstext, kein Feldname. */
.forus-post__box-form .legal-consent-container label,
.forus-post__box-form .legal-consent-container label span,
.forus-post__box-form .legal-consent-container p,
.forus-post__box-form .hs-form-booleancheckbox label,
.forus-post__box-form .hs-form-booleancheckbox label span{
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.5;
  opacity: .8;
}
.forus-post__box-form .hs-form-field{ margin-bottom: .8rem; }
.forus-post__box-form .hs-input{
  /* HubSpot gibt einspaltigen Zeilen 95% Breite, mehrspaltigen 100% —
     dadurch waere das E-Mail-Feld schmaler als Vor- und Nachname.
     Hier zaehlt eine Breite fuer alle. */
  width: 100% !important;
  max-width: 100% !important;
  font: inherit;
  font-size: .95rem;
  color: inherit;
  background: color-mix(in srgb, currentColor 10%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 26%, transparent);
  border-radius: 10px;
  padding: .68em .9em;
}
.forus-post__box-form select.hs-input,
.forus-post__box-form textarea.hs-input{ width: 100% !important; max-width: 100% !important; }
.forus-post__box-form .hs-input[type="checkbox"],
.forus-post__box-form .hs-input[type="radio"]{ width: 16px !important; }
.forus-post__box-form .hs-input:focus{ outline: 2px solid currentColor; outline-offset: 2px; }
/* In der schmalen Spalte steht jedes Feld auf einer eigenen Zeile.
   HubSpot setzt Breite und float als Inline-Stil — deshalb !important. */
.forus-post__box-form fieldset{ border: 0; margin: 0; padding: 0; max-width: none !important; }
.forus-post__box-form fieldset.form-columns-2,
.forus-post__box-form fieldset.form-columns-3{ display: block; }
.forus-post__box-form fieldset .hs-form-field,
.forus-post__box-form fieldset .input{
  width: 100% !important;
  float: none !important;
  margin-right: 0 !important;
}

/* Einwilligungen: HubSpot rendert eine Liste mit Punkten und Einzug —
   in der schmalen Box kostet das Platz und sieht aus wie Aufzaehlung.
   Kaestchen und Text stehen deshalb buendig am linken Rand. */
.forus-post__box-form .legal-consent-container ul,
.forus-post__box-form .inputs-list{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.forus-post__box-form .legal-consent-container li,
.forus-post__box-form .inputs-list li{ margin: 0 0 .5rem !important; padding: 0 !important; }
.forus-post__box-form .legal-consent-container li::marker{ content: none; }
/* Kaestchen und Text als Zeile: Kaestchen oben buendig, Text daneben */
.forus-post__box-form .hs-form-booleancheckbox-display{
  display: flex;
  align-items: flex-start;
  gap: .55rem;
}
.forus-post__box-form .hs-form-booleancheckbox-display > input[type="checkbox"]{
  flex: none;
  margin: .25em 0 0;
  width: 16px; height: 16px;
}
.forus-post__box-form .hs-form-booleancheckbox-display > span{ margin: 0 !important; }

/* Luft zwischen Einwilligungstext und Knopf */
.forus-post__box-form .legal-consent-container{ margin-bottom: .4rem; }
.forus-post__box-form .hs-submit,
.forus-post__box-form .actions{ margin-top: 1.4rem; }

/* ---------- Datenschutz-Tor ----------
   Die Hinweise klappen erst auf, wenn wirklich etwas eingetragen wurde.
   Sie werden nur SPAETER eingeblendet, nie versteckt: vor dem Absenden
   stehen sie vollstaendig da. Die Klasse setzt erst das Skript — ohne
   JavaScript ist alles von Anfang an sichtbar. */
.forus-post__box-form.hat-tor .legal-consent-container{
  height: 0;
  overflow: hidden;
  opacity: 0;
  margin-bottom: 0;
  transition: height .5s var(--fu-ease), opacity .35s var(--fu-ease);
}
.forus-post__box-form.hat-tor.ist-offen .legal-consent-container{ opacity: 1; margin-bottom: .4rem; }
.forus-post .forus-post__box-form .hs-button,
.forus-post .forus-post__box-form input[type="submit"]{
  -webkit-appearance: none; appearance: none;
  border: 0 !important;
  cursor: pointer;
  width: 100% !important;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  font-family: inherit !important;
  font-size: clamp(.95rem, 1.05vw, 1.05rem) !important;
  padding: .8em 1.7em !important;
  line-height: 1.5 !important;
  border-radius: 999px !important;
  background: var(--fu-papier) !important;
  color: var(--fu-ink) !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  transition: transform .3s var(--fu-ease);
}
.forus-post__box-form .hs-button:hover{ transform: translateY(-3px); }
.forus-post__box-form .hs-error-msgs{ list-style: none; margin: .4em 0 0; padding: 0; font-size: .8rem; opacity: .85; }

/* Unter 1000px steht die Box unter dem Text statt daneben. */
@media (max-width: 1000px){
  .forus-post__inner.hat-spalte{
    grid-template-columns: minmax(0, 1fr);
    max-width: 780px;
  }
  .forus-post__haupt{ max-width: none; }
  .forus-post__spalte.ist-haftend{ position: static; }
  .forus-post__spalte{ margin-top: clamp(2.5rem, 6vw, 4rem); }
}

.forus-post__text{
  font-size: clamp(1.02rem, 1.35vw, 1.15rem);
  line-height: 1.7;
}
.forus-post__text > *:first-child{ margin-top: 0; }
/* Der erste Absatz fuehrt in den Text ein und darf groesser stehen */
.forus-post__text > p:first-child{
  font-size: 1.15em;
  line-height: 1.6;
  opacity: .92;
}
.forus-post__text p{ margin: 0 0 1.15em; }
.forus-post__text h2{
  margin: clamp(2.6rem, 6vw, 3.8rem) 0 .9rem;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.forus-post__text h3{
  margin: clamp(1.8rem, 4vw, 2.4rem) 0 .6rem;
  font-size: clamp(1.12rem, 1.9vw, 1.35rem);
  font-weight: 800;
  line-height: 1.2;
}
.forus-post__text ul, .forus-post__text ol{ margin: 0 0 1.3em; padding-left: 1.3em; }
.forus-post__text li{ margin-bottom: .5em; }
.forus-post__text strong{ font-weight: 800; }
.forus-post__text a{
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(226,25,97,.55);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: text-decoration-color .25s var(--fu-ease);
  overflow-wrap: anywhere;
}
.forus-post__text a:hover{ text-decoration-color: #e21961; }

/* Bilder duerfen etwas breiter stehen als der Text */
.forus-post__text img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  margin: clamp(1.8rem, 4vw, 2.6rem) 0;
}
.forus-post__text figure{ margin: clamp(1.8rem, 4vw, 2.6rem) 0; }
.forus-post__text figure img{ margin: 0; }
.forus-post__text figcaption{
  margin-top: .7rem;
  font-size: .8rem;
  letter-spacing: .04em;
  opacity: .6;
}

/* Zitat: der Verlauf als schmale Kante, sonst nur Schrift */
.forus-post__text blockquote{
  margin: clamp(2rem, 5vw, 3rem) 0;
  padding: .2em 0 .2em 1.4rem;
  border-left: 3px solid transparent;
  border-image: var(--fu-grad) 1;
  font-size: 1.18em;
  line-height: 1.45;
  font-weight: 700;
  letter-spacing: -.01em;
}
.forus-post__text blockquote p:last-child{ margin-bottom: 0; }

.forus-post__text hr{
  margin: clamp(2.4rem, 5vw, 3.4rem) 0;
  border: 0;
  border-top: 1px solid var(--fu-hair);
}
.forus-post__text table{
  width: 100%;
  margin: 0 0 1.5em;
  border-collapse: collapse;
  font-size: .94em;
}
.forus-post__text th, .forus-post__text td{
  padding: .65em .8em;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--fu-hair);
}
.forus-post__text th{
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .65;
}
@media (max-width: 640px){
  .forus-post__text table{ display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---------- Themen + Zurueck ---------- */
.forus-post__tags{
  display: flex; flex-wrap: wrap; gap: .6rem;
  list-style: none; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; padding: 0;
}
.forus-post__tags a{
  display: inline-flex; align-items: center;
  padding: .6em 1.2em;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, currentColor 26%, transparent);
  color: inherit;
  text-decoration: none;
  font-size: clamp(.82rem, .95vw, .92rem);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: background .3s var(--fu-ease), border-color .3s var(--fu-ease);
}
.forus-post__tags a:hover{ border-color: transparent; background: color-mix(in srgb, currentColor 12%, transparent); }

.forus-post__zurueck{ margin-top: clamp(2rem, 4vw, 3rem); }
.forus-post__cta{
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .8em 1.7em;
  border-radius: 999px;
  background: var(--fu-pflaume);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: clamp(.95rem, 1.05vw, 1.05rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: transform .3s var(--fu-ease);
}
.forus-post__cta svg{ width: 16px; height: 16px; flex: none; transition: transform .35s var(--fu-ease); }
.forus-post__cta:hover{ transform: translateY(-3px); }
.forus-post__cta:hover svg{ transform: translateX(-4px); }
.forus-post__cta:focus-visible{ outline: 3px solid currentColor; outline-offset: 4px; }

/* ---------- Einlauf (per .is-anim gesichert) ---------- */
.forus-post.is-anim [data-post-in]{
  opacity: 0;
  transform: translateY(24px) scale(.96);
  transition: opacity .8s var(--fu-ease), transform .8s var(--fu-ease);
}
.forus-post.is-anim [data-post-in].is-in{ opacity: 1; transform: none; }
.forus-post.is-anim .forus-post__eyebrow.is-in{ opacity: .8; }
.forus-post.is-anim .forus-post__meta.is-in{ opacity: .8; }

@media (prefers-reduced-motion: reduce){
  [data-post-in]{ opacity: 1 !important; transform: none !important; transition: none !important; }
  .forus-post__fortschritt{ display: none; }
}