/* Herder Media: Ergänzungen zu den UNVERÄNDERTEN Gestaltungsdateien styles-CtGTKlpc.css und routes-BBcKDarL.css.
   Unternehmen, FAQ, Rechtsseiten, 404: keine neuen Farben, nur die Tokens der bisherigen Seite.
   Herder Talents: eigene Farbwelt über html[data-world="talents"]. */

[hidden] { display: none !important; }

/* ---------- Farbwelt Talents ---------- */
html[data-world="talents"] {
  --hm-accent: #D61F69;
  --tl-accent-hover: #BE185D;
  --tl-pink-bg: #FCE7F3;   --tl-pink-fg: #9D174D;
  --tl-orange-bg: #FFEDD5; --tl-orange-fg: #9A3412;
  --tl-violet-bg: #EDE9FE; --tl-violet-fg: #5B21B6;
  --tl-mint-bg: #D1FAE5;   --tl-mint-fg: #065F46;
  --tl-sky-bg: #E0F2FE;    --tl-sky-fg: #075985;
  --tl-yellow-bg: #FEF9C3; --tl-yellow-fg: #854D0E;
}
.tl-accent { color: var(--hm-accent); }
html[data-world="talents"] .hm-stamp:hover { background: var(--tl-accent-hover); }
/* Überschrift auf dem Talents-Film ist länger: breiter laufen lassen (Desktop höchstens 3 Zeilen) */
html[data-world="talents"] .hm-journey .scroll-scrub__title { max-width: 17ch; }
/* … dafür braucht sie auch eine breitere Textspalte: das Original deckelt sie bei min(38rem, 44vw), das ergab ab 1440 px
   vier Zeilen. Nur Querformat über 860 px; Handy und Hochformat behalten die Regeln der Originaldatei. */
@media (width > 860px) and (orientation: landscape) {
  html[data-world="talents"] .hm-journey .scroll-scrub__copy { width: min(56rem, 46vw); }
}
/* Talents-Film: die Schrift bleibt beim Scrollen schwarz (anthrazit), die Kapitelleiste unten in der Mitte ist rosa,
   Beschriftung und Linien (Wünsche 2026-10-02) */
html[data-world="talents"] .hm-journey .scroll-scrub__route { --hm-ink: var(--ss-accent); --hm-muted: var(--ss-accent); }
/* Dachzeile schwarz, nur „Talents“ rosa wie im Logo; die Schlagworte der Kapitel rosa (Auswahl 2026-10-02) */
html[data-world="talents"] .hm-journey .scroll-scrub__kicker { color: var(--ss-ink); }
html[data-world="talents"] .hm-journey .scroll-scrub__tags li { color: var(--ss-accent); }
/* „Als Marke anfragen“ sieht aus wie „Als Creator Kontakt aufnehmen“ und steht darunter (Wunsch 2026-10-02) */
html[data-world="talents"] .hm-journey .scroll-scrub__actions { display: inline-flex; flex-direction: column; align-items: stretch; gap: 1.6rem; }   /* beide so breit wie der breitere */
/* Dachzeile auf beiden Seiten gleich: oben die Marke, darunter der Zusatz (Wunsch 2026-10-02) */
.hm-journey .scroll-scrub__kicker { max-width: none; }   /* Original: 30ch, „Creator & Talent Management“ brach dann um */
.hm-journey .scroll-scrub__kicker > span { display: block; }
/* Die Dachzeile gehört zur Hauptüberschrift (h1), damit die Marke „Herder Media“ / „Herder Talents“ sichtbar im h1
   steht (Markensuche „herder media“, 2026-10-02). Aussehen wie vorher: zwei Blöcke untereinander. */
.hm-journey .scroll-scrub__heading { margin: 0; }
.hm-journey .scroll-scrub__heading > .scroll-scrub__kicker, .hm-journey .scroll-scrub__heading > .scroll-scrub__title { display: block; }
/* Farbbänder (film.js, Schrift passt sich dem Film an) malen nur in der Box der Schrift (background-clip: text). Die
   große Überschrift hat eine Zeilenhöhe unter 1: Unterlängen und Umlaut-Punkte ragen aus der Box und wurden
   abgeschnitten (2026-10-01 auf dem Handy, das g in „gestellt“). Darum ist die Box oben und unten größer, ohne dass
   sich etwas verschiebt. Die Dachzeile bleibt in der Akzentfarbe, bis ihre Bänder gemalt sind. */
.scroll-scrub[data-ink=bands] .scroll-scrub__title { padding-block: .12em .26em; margin-block: -.12em -.26em; }
.scroll-scrub[data-ink=bands] .scroll-scrub__kicker { background-image: var(--ss-paint, linear-gradient(var(--ss-accent), var(--ss-accent))); }
/* Filmtitel mindestens so breit wie ihr längstes Wort: Im Hochformat ist der Text auf 52vw begrenzt, und die
   Streifen-Einfärbung (background-clip: text) malt nur die Box. „Aufmerksamkeit“ verlor sonst sein Ende. */
.hm-journey .scroll-scrub__title { min-width: min-content; }
/* Handy und Tablet hochkant (Wunsch 2026-10-03): Die Schrift über dem Film war kaum lesbar. Der Film steht oben und
   läuft unten weich in den Hintergrund aus, die Schrift steht darunter auf ruhigem Grund und nutzt die ganze Breite.
   Die Filmhöhe setzt film.js je Kapitel (--ss-film-h), so dass der Text ganz darunter passt. Der Text eines Kapitels
   bleibt unten stehen, solange das Kapitel läuft; nur beim Wechsel zieht er kurz über den Film. Desktop unverändert. */
@media (orientation: portrait) {
  /* unter der festen Kopfzeile beginnen, sonst verdeckt sie den oberen Filmrand */
  .hm-journey .scroll-scrub__media { top: var(--hm-header-h); height: var(--ss-film-h, 45%); transition: height .6s var(--hm-ease); }
  .hm-journey .scroll-scrub__media::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; z-index: 3; height: 22%; pointer-events: none;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--ss-bg) 0%, transparent), var(--ss-bg));
  }
  /* die Originaldatei schaltet „sticky“ mit !important ab (Desktop: Text zieht über den Film); hochkant muss er stehen */
  .hm-journey .scroll-scrub__chapter-pin { position: sticky !important; top: 0 !important; height: 100svh; min-height: 100svh; }
  .hm-journey .scroll-scrub__copy { width: 100%; max-width: 36rem; }
}
@media (orientation: portrait) and (prefers-reduced-motion: reduce) {
  .hm-journey .scroll-scrub__media { transition: none; }
}
/* Unternehmen, Desktop und Querformat (Wunsch 2026-10-04, Variante A „Text nie auf der Linse“): Linsenrand und
   Öffnung laufen durch jede Textspalte, die Buchstaben zerfielen dort in hell und dunkel. Der zweite Text kommt erst
   nach dem Durchtauchen (die linke Spalte ist ab Film-Anteil 0,357 hell); Linse, Öffnung und Durchtauchen laufen ohne
   Text. Die Seite bleibt gleich lang (11,04 Höhen), die folgenden Texte kommen dichter. Die Linse steht mittig (ein
   Schwenk nach rechts wurde auf Wunsch wieder entfernt). Hochkant (Handy) gelten die Längen im HTML. */
@media (orientation: landscape) {
  .hm-journey #fokus { --ss-w: 4.73 !important; }
  .hm-journey #strategie, .hm-journey #content, .hm-journey #wachstum { --ss-w: 1.5 !important; }
  .hm-journey #auftritt { --ss-w: 1.81 !important; }
}
/* Startbild bleibt als Unterlage unter dem Video sichtbar: zeigt das Video (iPhone) einen Moment nichts, sieht man
   das Startbild statt einer leeren Fläche. Die bisherige Seite versteckte es nach dem ersten Sprung. */
.scroll-scrub__layer[data-video-painted=true] .scroll-scrub__poster { visibility: visible; }

/* ---------- Startseite: Auswahl Unternehmen / Talents ----------
   Neu gestaltet 2026-10-05 (Wunsch: „weniger Text und intuitiver, auf Desktop und Handy achten“; gewählt wurde
   Entwurf 1 „Zwei Hälften“): zwei randlose Bildhälften mit den Wörtern des Umschalters („Unternehmen“ / „Talents“),
   je einer Zeile für wen und einem Pfeil. Am Desktop wird die Hälfte unter der Maus breiter, am Handy liegen beide
   untereinander und passen auf einen Bildschirm. Das h1 ist die Marke oben links. */
.hm-start { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; background: var(--hm-ground); }
.hm-start__kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem var(--hm-gutter); }
.hm-start__titel { display: inline-flex; align-items: center; gap: .55rem; margin: 0; font-size: 1.05rem; font-weight: 600; letter-spacing: -.02em; }
.hm-start__titel .hm-logo__mark { width: 1.9em; height: auto; color: var(--hm-ink); }
.hm-start__frage { margin: 0; color: var(--hm-muted); font-size: .95rem; }
.hm-start__wahl { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; padding: 0 .6rem; transition: grid-template-columns .7s var(--hm-ease); }
.hm-start__seite {
  position: relative; isolation: isolate; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
  min-height: 0; overflow: hidden; padding: clamp(1.25rem, 3vw, 2.5rem); border-radius: var(--hm-radius-lg);
  color: var(--hm-ink); text-decoration: none; transition: transform .45s var(--hm-ease);
}
.hm-start__seite img {
  position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%;
  transition: transform 1.2s var(--hm-ease);
}
.hm-start__seite--talents { --hm-accent: #D61F69; }   /* „Talents“ (tl-accent) und Pfeil in Rosa wie im Logo */
.hm-start__seite--talents img { object-position: 28% 50%; }   /* Ständer des Ringlichts rechts neben der Schrift */
.hm-start__seite:focus-visible { outline: 2px solid var(--hm-ink); outline-offset: 3px; }
.hm-start__text { display: flex; flex-direction: column; gap: .55rem; }
.hm-start__fuer { font-family: var(--hm-mono); font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.hm-start__name { font-size: clamp(2.6rem, 6vw, 5.6rem); font-weight: 600; line-height: .92; letter-spacing: -.05em; }
.hm-start__pfeil {
  display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: 999px;
  background: var(--hm-ground); color: var(--hm-ink); box-shadow: 0 1px 2px rgba(28,30,33,.08), 0 6px 18px rgba(28,30,33,.10);
  transition: background-color .35s var(--hm-ease), color .35s var(--hm-ease), transform .45s var(--hm-ease);
}
.hm-start__pfeil svg { width: 1.15rem; height: 1.15rem; }
.hm-start__seite:focus-visible .hm-start__pfeil { background: var(--hm-ink); color: var(--hm-ground); }
.hm-start__seite--talents:focus-visible .hm-start__pfeil { background: var(--hm-accent); }
/* Maus-Effekte nur auf Geräten mit Maus (Wunsch 2026-10-05: „auf der mobilen Seite verspringt der Bildschirm komplett,
   wenn man auf einen der zwei Links klickt“): beim Antippen galt die Hälfte als „unter der Maus“, das Raster sprang auf
   zwei Spalten. */
@media (hover: hover) and (width > 760px) {
  .hm-start__wahl:has(.hm-start__seite:first-child:hover) { grid-template-columns: 1.18fr .82fr; }
  .hm-start__wahl:has(.hm-start__seite--talents:hover) { grid-template-columns: .82fr 1.18fr; }
  .hm-start__seite:hover img { transform: scale(1.035); }
  .hm-start__seite:hover .hm-start__pfeil { background: var(--hm-ink); color: var(--hm-ground); transform: translateX(.25rem); }
  .hm-start__seite--talents:hover .hm-start__pfeil { background: var(--hm-accent); }
  .hm-start__seite:active { transform: scale(.99); }
}
.hm-start__fuss {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.25rem;
  padding: .9rem var(--hm-gutter) 1.1rem; color: var(--hm-muted); font-size: .82rem;
}
.hm-start__fuss a { color: inherit; }
.hm-start__fuss nav { display: flex; gap: 1.25rem; }
.hm-start__fuss nav a { display: inline-block; padding: .45rem 0; }   /* Trefferfläche ≥ 24 px */
@media (width <= 760px) {
  .hm-start__kopf { padding: .9rem 1rem; }
  .hm-start__frage { display: none; }
  .hm-start__wahl { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; gap: .5rem; padding: 0 .5rem; }
  .hm-start__seite { padding: 1.1rem 1.15rem; border-radius: var(--hm-radius-md); }
  .hm-start__name { font-size: clamp(2.3rem, 11vw, 3.2rem); }
  .hm-start__seite img { object-position: 50% 30%; }
  .hm-start__seite--talents img { object-position: 18% 50%; }
  .hm-start__fuss { padding: .7rem 1rem .9rem; font-size: .78rem; }
}
@media (width <= 760px) and (height <= 700px) {
  .hm-start__fuer { display: none; }   /* sehr kleine Handys: die Zeile läge auf der Linse */
}
@media (prefers-reduced-motion: reduce) {
  .hm-start__wahl, .hm-start__seite, .hm-start__seite img, .hm-start__pfeil { transition: none; }
  .hm-start__seite, .hm-start__seite img { transform: none !important; }
}

/* ---------- Weicher Seitenwechsel (Umschalter) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: .4s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
}

/* ---------- Umschalter „Unternehmen | Talents“ ---------- */
.hm-switch {
  flex: none; display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  border: 1px solid var(--hm-line); border-radius: 999px; background: var(--hm-ground);
}
.hm-switch a {
  position: relative; display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 .95rem;
  border-radius: 999px; color: var(--hm-muted); font-size: .82rem; font-weight: 500; line-height: 1;
  text-decoration: none; white-space: nowrap;
  transition: background-color .35s var(--hm-ease), color .35s var(--hm-ease);
}
.hm-switch a::after { content: ""; position: absolute; inset: -4px 0; }  /* Trefferfläche 44 px */
.hm-switch a:hover { color: var(--hm-ink); }
.hm-switch a[aria-current] { background: var(--hm-accent); color: var(--hm-ground); }
.hm-switch a:focus-visible { outline: 2px solid var(--hm-accent); outline-offset: 2px; }
.hm-switch__short { display: none; }
.hm-footer .hm-switch { margin-top: 1.4rem; }
.hm-footer .hm-switch a { font-size: .82rem; text-decoration: none; }
@media (width <= 560px) {
  .hm-header { gap: .75rem; }
  .hm-header .hm-logo__word { display: none; }
  .hm-switch a { padding: 0 .7rem; font-size: .76rem; }
}
@media (width <= 349px) {
  .hm-switch__long { display: none; }
  .hm-switch__short { display: inline; }
}
/* Der Umschalter steht auf Talents an derselben Stelle wie auf der Unternehmen-Seite (Wunsch 2026-10-02). Die Kopfzeile
   verteilt Logo, Umschalter und rechte Gruppe mit gleichen Abständen (space-between); auf Talents sind das Logo
   („Herder Talents“) und die rechte Gruppe (kürzere Menüpunkte) anders breit, der Umschalter stand am Desktop bis zu
   49 px weiter rechts. Darum zählt das Talents-Logo so breit wie das der Unternehmen-Seite (149,5 statt 158,1 px), und
   die rechte Gruppe ist mindestens so breit wie dort (je Bereich gemessen, Inhalt rechts bündig). Bis 560 px sind
   beide Kopfzeilen ohnehin gleich (nur Bildmarke und Menü-Knopf). */
@media (width > 560px) {
  html[data-world="talents"] .hm-header .hm-logo { margin-right: -.538rem; }
}
@media (861px <= width <= 1100px) {
  html[data-world="talents"] .hm-header__right { min-width: 13.144rem; justify-content: flex-end; }
}
@media (1101px <= width < 1200px) {
  html[data-world="talents"] .hm-header__right { min-width: 36.29rem; justify-content: flex-end; }
}
@media (width >= 1200px) {
  html[data-world="talents"] .hm-header__right { min-width: 39.771rem; justify-content: flex-end; }
}
/* 1101–1199 px: Das Original zeigt hier 4 Menüpunkte ohne Umschalter. Mit Umschalter und „FAQ“ brach „Für wen“
   zweizeilig um. Wie im Plan vorgesehen fällt „FAQ“ hier aus der Kopfzeile (bleibt in der Fußzeile und im Abschnitt). */
@media (1101px <= width < 1200px) {
  html:not([data-world="talents"]) .hm-nav a[href$="#faq"],
  html:not([data-world="talents"]) .hm-nav a[href="/faq/"] { display: none; }
  html:not([data-world="talents"]) .hm-nav a { white-space: nowrap; }
}

/* ---------- Brotkrumen (FAQ-Seiten), im Stil der Dachzeile ---------- */
.hm-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .6em; margin: 0; padding: 0; list-style: none; }
.hm-crumbs li { display: inline-flex; align-items: center; gap: .6em; }
.hm-crumbs li + li::before { content: "/"; content: "/" / ""; color: var(--hm-muted); }
.hm-crumbs a { display: inline-block; padding: .45em 0; color: inherit; text-decoration: none; }  /* Trefferfläche ≥ 24 px */
.hm-crumbs a:hover { text-decoration: underline; text-underline-offset: .3em; }
.hm-crumbs a[aria-current="page"] { color: var(--hm-ink); }  /* aktuelle Seite dunkel, Links grau wie die Dachzeile */

/* ---------- Icons als Masken (Pfade relativ zu dieser Datei) ---------- */
.hm-service__icon[class*="i-"], .tl-tile__icon {
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.i-browser   { -webkit-mask-image: url(../icons/browser.png);   mask-image: url(../icons/browser.png); }
.i-camera    { -webkit-mask-image: url(../icons/camera.png);    mask-image: url(../icons/camera.png); }
.i-chairs    { -webkit-mask-image: url(../icons/chairs.png);    mask-image: url(../icons/chairs.png); }
.i-compass   { -webkit-mask-image: url(../icons/compass.png);   mask-image: url(../icons/compass.png); }
.i-contract  { -webkit-mask-image: url(../icons/contract.png);  mask-image: url(../icons/contract.png); }
.i-creator   { -webkit-mask-image: url(../icons/creator.png);   mask-image: url(../icons/creator.png); }
.i-growth    { -webkit-mask-image: url(../icons/growth.png);    mask-image: url(../icons/growth.png); }
.i-ki        { -webkit-mask-image: url(../icons/ki.png);        mask-image: url(../icons/ki.png); }
.i-pen       { -webkit-mask-image: url(../icons/pen.png);       mask-image: url(../icons/pen.png); }
.i-spotlight { -webkit-mask-image: url(../icons/spotlight.png); mask-image: url(../icons/spotlight.png); }
.i-van       { -webkit-mask-image: url(../icons/van.png);       mask-image: url(../icons/van.png); }

/* ---------- Karte zur jeweils anderen Welt (heutiger Grau-Stil) ---------- */
/* Der Abschnitt „Für wen“ / „Für dich“ ist grau: dort sind die Felder über den Überschriften weiß, sonst sieht man
   sie nicht (Wunsch 2026-10-02). Gilt auch für das Feld auf der grauen Karte zur anderen Welt. */
.hm-audience .hm-eyebrow { background: var(--hm-ground); }
.hm-teaser__card { padding: clamp(2rem, 4vw, 3.25rem); border-radius: var(--hm-radius-lg); background: var(--hm-field); }
.hm-teaser__card .hm-lead { max-width: 36ch; }
.hm-teaser__link { display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.75rem; font-weight: 500; }
.hm-teaser__link svg { width: 1.05rem; height: 1.05rem; transition: transform .45s var(--hm-ease); }
.hm-teaser__link:hover svg, .hm-teaser__link:focus-visible svg { transform: translateX(.3rem); }

/* ---------- Fußzeile: Sitz und E-Mail ---------- */
.hm-footer__contact { margin: .9rem 0 0; color: var(--hm-muted); font-size: .92rem; line-height: 1.5; }
.hm-footer__contact a { color: inherit; }

/* ---------- Über Herder Media ---------- */
.hm-about { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; gap: clamp(2rem, 5vw, 5rem); }
.hm-about__media { margin: 0; overflow: hidden; border-radius: var(--hm-radius-lg); box-shadow: var(--hm-shadow-soft); }
.hm-about__media img { display: block; width: 100%; height: auto; }
/* Über uns mit Bild (Talents, Wunsch 2026-10-02): Überschrift oben, darunter Bild und Text nebeneinander, der Text
   mittig zum Bild */
.hm-about--bild { align-items: center; row-gap: clamp(1.5rem, 3vw, 2.5rem); }
.hm-about--bild .hm-about__head { grid-column: 1 / -1; }
.hm-about--bild .hm-about__head .hm-h2 { margin-bottom: 0; }
.hm-about__text > .hm-lead { margin-top: 0; }
.hm-about__text > .hm-lead + .hm-lead { margin-top: 1.1em; }
@media (width <= 860px) { .hm-about { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Häufige Fragen (Auszug auf den Welten und eigene FAQ-Seiten) ---------- */
.hm-faq__head { max-width: 42rem; }
.hm-faq__list { margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--hm-line); }
.hm-faq__item { border-bottom: 1px solid var(--hm-line); }
.hm-faq__item > summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: 1.35rem 0; cursor: pointer; list-style: none;
}
.hm-faq__item > summary::-webkit-details-marker { display: none; }
.hm-faq__item > summary::after {
  content: ""; flex: none; width: .7rem; height: .7rem; margin: .45rem .3rem 0 0;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .35s var(--hm-ease);
}
.hm-faq__item[open] > summary::after { transform: rotate(-135deg); }
.hm-faq__item > summary:focus-visible { outline: 2px solid var(--hm-accent); outline-offset: 4px; border-radius: .25rem; }
.hm-faq .hm-faq__q { margin: 0; font-size: clamp(1.1rem, 1.6vw, 1.35rem); font-weight: 600; line-height: 1.3; letter-spacing: -.015em; }
.hm-faq .hm-faq__a { margin: 0 0 1.5rem; max-width: 62ch; color: var(--hm-muted); line-height: 1.65; }
/* Antwort aus mehreren Absätzen (Talents-FAQ: persönliche Assistenz) */
.hm-faq .hm-faq__a > p { margin: 0 0 .9em; }
.hm-faq .hm-faq__a > p:last-child { margin-bottom: 0; }
.hm-faq__all { display: inline-flex; align-items: center; gap: .6rem; margin-top: 2rem; font-weight: 500; }
.hm-faq__all svg { width: 1.05rem; height: 1.05rem; transition: transform .45s var(--hm-ease); }
.hm-faq__all:hover svg, .hm-faq__all:focus-visible svg { transform: translateX(.3rem); }
.hm-faqpage {
  max-width: 60rem; margin: 0 auto;
  padding: calc(var(--hm-header-h) + clamp(3rem, 6vw, 5rem)) var(--hm-gutter) clamp(4rem, 8vw, 7rem);
}
.hm-faqpage .hm-lead { max-width: 46ch; }
@media (prefers-reduced-motion: reduce) { .hm-faq__item > summary::after { transition: none; } }

/* ---------- Formular ohne (funktionierendes) JavaScript ----------
   .js setzt erst site.js. Ohne JS würde kontakt.php die Nachricht wegen der Spam-Sperre still
   verwerfen, deshalb gibt es dann keinen Senden-Knopf, sondern die E-Mail-Adresse. */
.hm-form__nojs { display: none; margin: 0; color: var(--hm-muted); font-size: .95rem; line-height: 1.5; }
html:not(.js) .hm-form .hm-stamp { display: none; }
html:not(.js) .hm-form__nojs { display: block; }

/* ---------- Formular: Hinweis im Testmodus ---------- */
.hm-sent__test {
  margin: 1.25rem 0 0; color: var(--hm-muted); font-family: var(--hm-mono); font-size: .74rem;
  letter-spacing: .1em; text-transform: uppercase;
}

/* ========== Talents-Bausteine ========== */

/* Farbflächen für Kacheln (Standard Pink) */
.tl-tile { --bg: var(--tl-pink-bg); --fg: var(--tl-pink-fg); }
.tl--orange { --bg: var(--tl-orange-bg); --fg: var(--tl-orange-fg); }
.tl--violet { --bg: var(--tl-violet-bg); --fg: var(--tl-violet-fg); }
.tl--mint   { --bg: var(--tl-mint-bg);   --fg: var(--tl-mint-fg); }
.tl--sky    { --bg: var(--tl-sky-bg);    --fg: var(--tl-sky-fg); }
.tl--yellow { --bg: var(--tl-yellow-bg); --fg: var(--tl-yellow-fg); }

/* Leistungs-Kacheln (in der rechten Spalte von .hm-services) */
.tl-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.85rem, 1.6vw, 1.25rem); margin: 0; padding: 0; list-style: none; }
.tl-tile {
  display: flex; flex-direction: column; gap: .55rem; height: 100%; padding: clamp(1.5rem, 2.6vw, 2.1rem);
  border-radius: var(--hm-radius-lg); background: var(--bg); color: var(--fg); text-decoration: none;
  transition: transform .45s var(--hm-ease), box-shadow .45s var(--hm-ease);
}
.tl-tile:hover { transform: translateY(-3px); box-shadow: var(--hm-shadow-soft); }
.tl-tile:focus-visible { outline: 2px solid var(--hm-accent); outline-offset: 3px; }
.tl-tile__icon { display: block; flex: none; width: 2.75rem; height: 2.75rem; background-color: var(--fg); }
.tl-tile__title { margin: 1.5rem 0 0; color: var(--fg); font-size: clamp(1.2rem, 1.7vw, 1.45rem); font-weight: 600; line-height: 1.15; letter-spacing: -.025em; }
.tl-tile__text { margin: 0; color: var(--fg); font-size: .98rem; line-height: 1.5; }
/* Alles oben bündig, und in einer Reihe stehen Überschriften und Texte auf einer Höhe, auch wenn eine Überschrift
   zweizeilig ist (Wunsch 2026-10-02; vorher stand alles unten bündig). Jede Kachel teilt sich die drei Zeilen Icon,
   Überschrift, Text mit ihrer Nachbarin (Subgrid). Ohne Subgrid bleibt es oben bündig. */
@supports (grid-template-rows: subgrid) {
  .tl-tiles > li { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
  .tl-tile { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-items: start; }
  .tl-tile__text { margin-top: .55rem; }
}
@media (width <= 560px) {
  /* einspaltig: keine Mindesthöhe, sonst klafft eine Lücke zwischen Icon und Titel */
  .tl-tiles { grid-template-columns: minmax(0, 1fr); }
  .tl-tile { min-height: 0; }
  .tl-tile__title { margin-top: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tl-tile { transition: none; }
  .tl-tile:hover { transform: none; }
}

/* Bild bei „So läuft's“ */
.tl-figure { margin: clamp(2rem, 4vw, 3rem) 0 0; overflow: hidden; aspect-ratio: 3 / 2; border-radius: var(--hm-radius-lg); box-shadow: var(--hm-shadow-soft); }
.tl-figure img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Wahl im Talents-Formular: Creator/Talent oder Marke */
.tl-mode { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; padding: 0; border: 0; grid-column: 1 / -1; }
.tl-mode legend { width: 100%; margin: 0 0 .75rem; padding: 0; font-weight: 500; }
.tl-mode input { position: absolute; opacity: 0; pointer-events: none; }
.tl-mode label {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.2rem; border: 1px solid var(--hm-line);
  border-radius: 999px; background: var(--hm-ground); color: var(--hm-muted); font-weight: 500; cursor: pointer;
  transition: background-color .35s var(--hm-ease), color .35s var(--hm-ease), border-color .35s var(--hm-ease);
}
.tl-mode input:checked + label { border-color: var(--hm-accent); background: var(--hm-accent); color: #fff; }
.tl-mode input:focus-visible + label { outline: 2px solid var(--hm-accent); outline-offset: 2px; }
.tl-group { display: contents; }

/* Keine Durchnummerierung (Wunsch 2026-10-13): Coaching-Punkte ohne Nummernspalte */
.hm-coaching__points li { display: block; }

/* Ablauf als Unterhaltung statt vier Standard-Schritten (Wunsch 2026-10-13): Besucher fragt, wir antworten.
   Ohne JS und bei reduzierter Bewegung stehen alle Nachrichten sofort da; nur mit .hm-chat-js (setzt site.js)
   blenden sie beim Scrollen nacheinander ein. */
.hm-ablauf { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.hm-ablauf__hinweis { margin: 1.5rem 0 0; max-width: 34ch; color: var(--hm-muted); line-height: 1.55; }
.hm-ablauf .tl-figure { margin-top: 2rem; aspect-ratio: 4 / 3; }
.hm-ablauf__chat { display: flex; flex-direction: column; }
.hm-chat { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.hm-chat__msg { max-width: min(30rem, 88%); padding: .8rem 1.1rem .85rem; border-radius: 1.35rem; font-size: clamp(1rem, .25vw + .95rem, 1.1rem); line-height: 1.45; hyphens: manual; text-wrap: pretty; }
.hm-chat__msg--sie { align-self: flex-start; background: var(--hm-surface); color: var(--hm-ink); border-bottom-left-radius: .4rem; }
.hm-chat__msg--wir { align-self: flex-end; background: var(--hm-ink); color: #fff; border-bottom-right-radius: .4rem; }
html[data-world="talents"] .hm-chat__msg--wir { background: #D61F69; }
.hm-chat__msg--sie + .hm-chat__msg--wir, .hm-chat__msg--wir + .hm-chat__msg--sie { margin-top: .9rem; }
.hm-chat__wer { display: block; margin-bottom: .2rem; font-family: var(--hm-mono); font-size: .66rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.hm-chat__antwort { align-self: flex-end; display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.75rem; padding: .85rem 1.35rem; border: 1px solid var(--hm-ink); border-radius: 999px; color: var(--hm-ink); font-weight: 600; text-decoration: none; transition: background-color .3s var(--hm-ease), color .3s var(--hm-ease); }
.hm-chat__antwort:focus-visible { outline: 2px solid var(--hm-ink); outline-offset: 3px; }
@media (hover: hover) { .hm-chat__antwort:hover { background: var(--hm-ink); color: #fff; } }
.hm-chat-js .hm-chat__msg, .hm-chat-js .hm-chat__antwort { opacity: 0; transform: translateY(14px) scale(.97); transition: opacity .5s var(--hm-ease), transform .6s var(--hm-ease), background-color .3s var(--hm-ease), color .3s var(--hm-ease); }
.hm-chat-js .hm-chat__msg--sie { transform-origin: bottom left; }
.hm-chat-js .hm-chat__msg--wir, .hm-chat-js .hm-chat__antwort { transform-origin: bottom right; }
.hm-chat-js .hm-chat__da { opacity: 1; transform: none; }
@media (width > 900px) and (height >= 820px) { .hm-ablauf__kopf { position: sticky; top: calc(var(--hm-header-h) + 2.5rem); } }
@media (width <= 900px) { .hm-ablauf { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .hm-chat__antwort { transition: none; } }