/* bestehen-mpu.de: Thema „Helden“. Wird nach stil.css geladen und überschreibt nur, was anders ist.
   Leitidee: das Gespräch mit dem Gutachter. Gesprächsblasen im Hero, Fragen-Trainer, helle Flächen,
   Bricolage Grotesque für Überschriften, Figtree für Text, IBM Plex Mono für kleine Beschriftungen. */

@font-face { font-family: "Bricolage"; src: url("fonts/bricolage-var-latin.woff2") format("woff2"); font-weight: 200 800; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bricolage"; src: url("fonts/bricolage-var-latinext.woff2") format("woff2"); font-weight: 200 800; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; src: url("fonts/figtree-var-latin.woff2") format("woff2"); font-weight: 300 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; src: url("fonts/figtree-var-latinext.woff2") format("woff2"); font-weight: 300 900; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plex Mono"; src: url("fonts/plex-mono-500-latin.woff2") format("woff2"); font-weight: 500; font-display: swap; }

.thema-helden {
  --tinte: #101830;
  --asphalt: #101830;
  --text: #2a3350;
  --text-leise: #5b6482;
  --blau: #2e4f9c;
  --blau-tief: #1d3570;
  --blau-hell: #ecf1fb;
  --orange: #ee7a44;
  --orange-tief: #c4521c;
  --haken: #ee7a44;
  --tafel: #ee7a44;
  --papier: #f4f6fb;
  --linie: #dfe4f0;
  --schild: "Bricolage", "Segoe UI", system-ui, sans-serif;
  --din: "Figtree", "Segoe UI", system-ui, sans-serif;
  --lauf: "Figtree", "Segoe UI", system-ui, sans-serif;
  --mono: "Plex Mono", ui-monospace, "Cascadia Mono", monospace;
  --radius: 22px;
  --schatten: 0 1px 2px rgba(16, 24, 48, .06), 0 22px 44px -26px rgba(16, 24, 48, .38);
}
body.thema-helden { font-size: 1.06rem; line-height: 1.7; }
.thema-helden h1, .thema-helden h2, .thema-helden h3 { font-weight: 750; letter-spacing: -.025em; line-height: 1.04; }
.thema-helden h1 { font-size: clamp(2.5rem, 5.6vw, 4.5rem); font-weight: 800; letter-spacing: -.035em; }
.thema-helden h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
.thema-helden h3 { font-weight: 700; font-size: clamp(1.18rem, 1.7vw, 1.4rem); letter-spacing: -.012em; line-height: 1.2; }
.thema-helden .dachzeile { font: 500 .76rem/1.2 var(--mono); letter-spacing: .1em; color: var(--blau); }
.thema-helden .dachzeile::before { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(238, 122, 68, .18); }
.thema-helden strong { color: var(--tinte); }

/* Knöpfe */
.thema-helden .knopf { font-weight: 700; letter-spacing: 0; border-radius: 14px; }
.thema-helden .knopf--voll { background: var(--blau); color: #fff; box-shadow: 0 10px 22px -12px rgba(46, 79, 156, .8); }
.thema-helden .knopf--voll:hover { background: var(--blau-tief); color: #fff; }
.thema-helden .knopf--linie { border-color: var(--linie); color: var(--tinte); background: #fff; }
.thema-helden .knopf--linie:hover { border-color: var(--tinte); background: #fff; color: var(--tinte); }
.thema-helden .knopf--tafel { background: var(--orange); color: var(--tinte); }
.thema-helden .knopf--tafel:hover { background: #ff9566; color: var(--tinte); }

/* Kopf */
.thema-helden .kopf { background: rgba(255, 255, 255, .92); }
.thema-helden .marke__mpu { font-family: var(--schild); font-weight: 800; letter-spacing: -.03em; font-size: 1.9rem; color: var(--tinte); }
.thema-helden .marke__zusatz { font: 500 .7rem/1.25 var(--mono); letter-spacing: .08em; color: var(--text-leise); }
.thema-helden .marke__zusatz span:last-child { color: var(--orange-tief); }
.thema-helden .marke svg { color: var(--blau); }
.thema-helden .nav a { font-weight: 600; border-radius: 10px; }
.thema-helden .nav a:hover, .thema-helden .nav a[aria-current="page"] { background: var(--blau-hell); color: var(--blau-tief); }
.thema-helden .kopf__tel { font-weight: 800; }
.thema-helden .kopf__tel small { font: 500 .66rem/1.2 var(--mono); letter-spacing: .08em; }
.thema-helden .menue { border-radius: 12px; border-color: var(--linie); }
@media (max-width: 440px) {
  .thema-helden .marke svg { width: 34px; height: 34px; }
  .thema-helden .marke__mpu { font-size: 1.5rem; }
  .thema-helden .marke__zusatz { font-size: .6rem; padding-left: .45rem; }
  .thema-helden .kopf__in { gap: .7rem; }
}

/* Hero: hell, Text links, Gesprächsverlauf rechts */
.thema-helden .held { padding: clamp(40px, 6vw, 92px) 0 clamp(56px, 7vw, 104px);
  background:
    radial-gradient(640px 420px at 82% 28%, rgba(46, 79, 156, .16), transparent 70%),
    radial-gradient(420px 320px at 96% 92%, rgba(238, 122, 68, .14), transparent 70%),
    linear-gradient(180deg, #fff 0%, #f6f8fd 100%); }
.thema-helden .held::before { display: none; }
.thema-helden .held__raster { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
.thema-helden .held h1 em { color: var(--blau); font-weight: 650; font-size: .5em; letter-spacing: -.02em; margin-top: .5em; }
.thema-helden .held__ort { border-color: var(--linie); background: #fff; color: var(--tinte); font: 500 .76rem/1 var(--mono); letter-spacing: .06em; box-shadow: var(--schatten); }
.thema-helden .held__ort svg { color: var(--orange); }
.thema-helden .held__vorteile { font-weight: 700; }

.gespraech { position: relative; background: #fff; border-radius: 28px; box-shadow: 0 40px 80px -46px rgba(16, 24, 48, .55), 0 0 0 1px var(--linie); padding: 0 clamp(16px, 2.4vw, 26px) clamp(18px, 2.4vw, 26px); display: flex; flex-direction: column; gap: .8rem; }
.gespraech__kopf { display: flex; align-items: center; gap: .6rem; margin: 0 calc(-1 * clamp(16px, 2.4vw, 26px)) .4rem; padding: .95rem clamp(16px, 2.4vw, 26px); border-bottom: 1px solid var(--linie); font: 500 .74rem/1.2 var(--mono); letter-spacing: .06em; color: var(--text-leise); }
.gespraech__punkt { width: 9px; height: 9px; border-radius: 50%; background: #d92d20; box-shadow: 0 0 0 4px rgba(217, 45, 32, .14); animation: aufnahme 1.6s ease-in-out infinite; }
@keyframes aufnahme { 50% { opacity: .3; } }
.gespraech__zeit { margin-left: auto; color: var(--tinte); }
.blase { margin: 0; max-width: 86%; padding: .8rem 1rem .85rem; border-radius: 20px; font-size: 1rem; line-height: 1.45; opacity: 0; transform: translateY(8px); animation: blase .5s ease forwards; }
.blase small { display: block; margin-bottom: .2rem; font: 500 .66rem/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.blase--gutachter { align-self: flex-start; background: var(--papier); color: var(--tinte); border-bottom-left-radius: 6px; }
.blase--du { align-self: flex-end; background: var(--blau); color: #fff; border-bottom-right-radius: 6px; }
.blase:nth-of-type(1) { animation-delay: .2s; }
.blase:nth-of-type(2) { animation-delay: 1.1s; }
.blase:nth-of-type(3) { animation-delay: 2s; }
.blase:nth-of-type(4) { animation-delay: 2.8s; }
@keyframes blase { to { opacity: 1; transform: none; } }
.blase--tippt { display: inline-flex; gap: 5px; padding: .9rem 1rem; }
.blase--tippt i { width: 7px; height: 7px; border-radius: 50%; background: #fff; opacity: .5; animation: tippen 1.2s ease-in-out infinite; }
.blase--tippt i:nth-child(2) { animation-delay: .15s; } .blase--tippt i:nth-child(3) { animation-delay: .3s; }
@keyframes tippen { 30% { opacity: 1; transform: translateY(-3px); } 60% { opacity: .5; transform: none; } }
.gespraech__tipp { display: flex; gap: .8rem; align-items: center; margin-top: .4rem; padding: .85rem .95rem; border-radius: 18px; background: #fff4ee; border: 1px solid #fbd9c7; opacity: 0; animation: blase .5s ease 3.6s forwards; }
.gespraech__tipp img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: top; background: var(--blau); flex: none; }
.gespraech__tipp p { margin: 0; font-size: .94rem; line-height: 1.45; color: var(--text); }
.gespraech__tipp b { display: block; font: 500 .68rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--orange-tief); }
@media (max-width: 880px) { .gespraech { order: 2; } .blase { max-width: 92%; } }

/* Kurzfakten als Pillen */
.thema-helden .fakten { border: 0; background: #f6f8fd; }
.thema-helden .fakten ul { padding: 6px 0 22px; gap: 12px; }
.thema-helden .fakten li { background: #fff; border-radius: 18px; padding: .95rem 1rem; box-shadow: 0 0 0 1px var(--linie); font-weight: 750; }

/* Schulung */
.thema-helden .schulung { background: #f6f8fd; }
.thema-helden .schulung__karte { background: linear-gradient(140deg, var(--tinte) 0%, var(--blau-tief) 100%); border-radius: 28px; }
.thema-helden .schulung__zahl { font-weight: 800; letter-spacing: -.04em; color: var(--orange); }
.thema-helden .schulung__symbol { border-radius: 14px; background: var(--orange); }
.thema-helden .schulung .dachzeile { color: #ffc7ab; }

/* Fragen-Trainer */
.trainer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.trainer__karte { background: #fff; border-radius: 22px; box-shadow: 0 0 0 1px var(--linie); transition: box-shadow .2s; }
.trainer__karte[open] { box-shadow: 0 0 0 2px var(--blau), var(--schatten); }
.trainer__karte summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .9rem; align-items: center; padding: 1.1rem 1.2rem; }
.trainer__karte summary::-webkit-details-marker { display: none; }
.trainer__nr { font: 500 .78rem/1 var(--mono); color: var(--orange-tief); background: #fff1ea; border-radius: 10px; padding: .45rem .5rem; }
.trainer__frage { font: 650 1.08rem/1.35 var(--schild); color: var(--tinte); letter-spacing: -.01em; }
.trainer__auf { font: 500 .68rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--blau); border: 1px solid var(--linie); border-radius: 999px; padding: .45rem .7rem; white-space: nowrap; }
.trainer__karte[open] .trainer__auf { background: var(--blau); color: #fff; border-color: var(--blau); }
.trainer__antwort { padding: 0 1.2rem 1.2rem; display: grid; gap: .7rem; }
.trainer__antwort p { margin: 0; padding: .8rem .95rem; border-radius: 14px; background: var(--papier); font-size: .98rem; line-height: 1.55; }
.trainer__antwort p:last-child { background: #fff4ee; }
.trainer__antwort b { display: block; font: 500 .68rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--blau); margin-bottom: .25rem; }
.trainer__antwort p:last-child b { color: var(--orange-tief); }
.trainer__hinweis { margin: 1.8rem 0 0; display: inline-flex; gap: .6rem; align-items: center; font-weight: 700; color: var(--tinte); }
@media (max-width: 880px) { .trainer { grid-template-columns: 1fr; } .trainer__auf { display: none; } .trainer__karte summary { grid-template-columns: auto minmax(0, 1fr); } }

/* MPU-Gründe und Ratgeber als helle Karten */
.thema-helden .grund { border-radius: 24px; box-shadow: 0 0 0 1px var(--linie); }
.thema-helden .grund:hover { box-shadow: 0 0 0 1px var(--linie), var(--schatten); }
.thema-helden .grund__mehr { color: var(--blau); }

/* Wege, Vergleich */
.thema-helden .weg { border: 0; border-radius: 24px; box-shadow: 0 0 0 1px var(--linie); }
.thema-helden .weg__symbol { border-radius: 16px; background: var(--blau); color: #fff; }
.thema-helden .weg__name { font: 500 .72rem/1 var(--mono); letter-spacing: .1em; color: var(--orange-tief); }
.thema-helden .vergleich { border-radius: 22px; }
.thema-helden .vergleich thead th { font: 500 .72rem/1.2 var(--mono); letter-spacing: .1em; background: var(--tinte); color: #fff; }
.thema-helden .vergleich td { color: var(--blau); }

/* Ablauf als nummerierte Kärtchen */
.thema-helden .route::before, .thema-helden .route::after { display: none; }
.thema-helden .etappe { padding: 1.4rem 1.3rem 1.5rem; background: #fff; border-radius: 22px; box-shadow: 0 0 0 1px var(--linie); min-height: 0; }
.thema-helden .etappe::before { position: static; display: grid; width: 44px; height: 44px; border: 0; border-radius: 14px; background: var(--orange); color: var(--tinte); margin-bottom: .9rem; font: 800 1.2rem/1 var(--schild); }
.thema-helden .route__hinweis { border: 0; background: var(--tinte); color: #fff; border-radius: 14px; font-weight: 600; }
.thema-helden .route__hinweis .haken { color: var(--orange); }
@media (max-width: 880px) { .thema-helden .route { gap: 12px; } .thema-helden .etappe { padding: 1.2rem 1.2rem 1.3rem; } }

/* Kennzahl */
.thema-helden .kennzahl { background: var(--blau); }
.thema-helden .kennzahl__zahl { color: #fff; font-weight: 800; letter-spacing: -.05em; }
.thema-helden .kennzahl__zahl span { color: var(--orange); }

/* Standorte */
.thema-helden .ortkarte { border: 0; border-radius: 22px; box-shadow: 0 0 0 1px var(--linie); }
.thema-helden .ortkarte__pille { font: 500 .78rem/1 var(--mono); letter-spacing: .04em; }
.thema-helden .ortkarte__pille svg { color: var(--orange); }

/* Coach */
.thema-helden .coach__bild { background: radial-gradient(circle at 50% 60%, var(--blau) 0 57%, transparent 58%); }
.coach__pille { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); margin: 0; display: inline-flex; align-items: center; gap: .55rem; padding: .6rem 1.1rem .6rem .8rem;
  background: #fff; border-radius: 999px; box-shadow: var(--schatten); white-space: nowrap; font: 700 .98rem/1.15 var(--din); color: var(--tinte); }
.coach__pille small { display: block; font-weight: 500; font-size: .78rem; color: var(--text-leise); }
.thema-helden .zitat { border-left-color: var(--orange); font-style: normal; font-family: var(--schild); font-weight: 500; letter-spacing: -.01em; }

/* Medien, FAQ */
.thema-helden .medium { border-radius: 24px; }
.thema-helden .podcast { background: var(--tinte); }
.thema-helden .podcast .dachzeile { color: #ffc7ab; }
.thema-helden .podcast__welle i { background: var(--orange); }
.thema-helden .frage summary { font-family: var(--schild); font-weight: 650; letter-spacing: -.01em; }
.thema-helden .frage summary::after { border-radius: 12px; }
.thema-helden .frage[open] summary::after { background: var(--orange); color: var(--tinte); }

/* Unterseiten */
.thema-helden .seitenkopf { background:
    radial-gradient(560px 360px at 92% 10%, rgba(46, 79, 156, .14), transparent 70%),
    linear-gradient(180deg, #fff, #f4f6fb); }
.thema-helden .krumen { font: 500 .78rem/1.4 var(--mono); }
.thema-helden .seitenkopf__bild { border-radius: 26px; }
.thema-helden .artikel__text h2 { font-size: clamp(1.45rem, 2.4vw, 1.95rem); }
.thema-helden .artikel__text h2::before { border: 0; border-radius: 50%; background: var(--orange); width: 12px; height: 12px; }
.thema-helden .kasten { border-radius: 18px; }
.thema-helden .kasten--tafel { background: #fff4ee; border-color: var(--orange); }
.thema-helden .seitenleiste__karte { border-radius: 22px; }
.thema-helden .seitenleiste__karte--betont { border-top-color: var(--orange); }
.thema-helden .seitenleiste__liste a { font-weight: 650; }
.thema-helden .kontaktdaten__gross { font-weight: 800; letter-spacing: -.02em; }
.thema-helden .kontaktdaten__karte { border-radius: 18px; }
.thema-helden .formular { border-radius: 24px; border-top-color: var(--orange); }
.thema-helden .feld input, .thema-helden .feld select, .thema-helden .feld textarea { border-radius: 12px; }
.thema-helden .wahl span { border-radius: 12px; }

/* Abschluss: Gespräch beendet, Stempel */
.thema-helden .ziel { background:
    radial-gradient(640px 420px at 85% 30%, rgba(77, 125, 222, .4), transparent 65%),
    linear-gradient(160deg, var(--tinte) 0%, var(--blau-tief) 100%); }
.thema-helden .ziel::before { display: none; }
.thema-helden .ziel__raster { padding-bottom: 0; }
.thema-helden .ziel .dachzeile { color: #ffc7ab; }
.thema-helden .ziel__tel { color: #fff; font-family: var(--schild); font-weight: 800; letter-spacing: -.03em; }
.thema-helden .ziel .knopf--linie { background: transparent; border-color: rgba(255, 255, 255, .6); color: #fff; }
.thema-helden .ziel .knopf--linie:hover { background: #fff; color: var(--tinte); }
.gespraech--ziel { width: min(380px, 100%); padding-top: clamp(18px, 2.4vw, 26px); transform: rotate(2deg); }
.gespraech--ziel .blase { animation: none; opacity: 1; transform: none; }
.gespraech__stempel { align-self: center; margin: .6rem 0 0; padding: .6rem 1.2rem; border: 3px solid var(--orange); border-radius: 14px; color: var(--orange-tief); font: 800 1.2rem/1 var(--schild); letter-spacing: -.01em; text-transform: uppercase; transform: rotate(-5deg); }

/* Fuß */
.thema-helden .fuss { background: #0b1124; }
.thema-helden .fuss h2 { font: 500 .72rem/1.2 var(--mono); letter-spacing: .12em; }
.thema-helden .fuss .marke__mpu { color: #fff; }
.thema-helden .fuss .marke__zusatz { color: #c9d1e6; }
.thema-helden .fuss a:hover { color: var(--orange); }
.thema-helden .anrufleiste a:first-child { background: var(--orange); color: var(--tinte); }

@media (prefers-reduced-motion: reduce) {
  .blase, .gespraech__tipp { opacity: 1; transform: none; }
}
.thema-helden .schulung__liste strong { color: #fff; }
.thema-helden .ziel strong, .thema-helden .kennzahl strong { color: #fff; }
@media (max-width: 880px) {
  .thema-helden .held__raster { grid-template-columns: 1fr; }
  .thema-helden .held h1 { font-size: clamp(2.2rem, 9vw, 3rem); }
}
.thema-helden .gruende .grund h2 { font-size: 1.3rem; }
.thema-helden .orte .ortkarte h2, .thema-helden .orte .ortkarte h3 { font-size: 1.2rem; letter-spacing: -.015em; }
.thema-helden .ortleiste a { border-radius: 12px; font-weight: 650; }

/* Schwerpunkte im Helden-Thema */
.thema-helden .schwerpunkt { border: 0; border-radius: 24px; box-shadow: 0 0 0 1px var(--linie); }
.thema-helden .schwerpunkt__nr { font: 500 .9rem/1 var(--mono); letter-spacing: .1em; color: var(--orange-tief); background: var(--blau-hell); align-self: flex-start; padding: .45rem .6rem; border-radius: 8px; }
.thema-helden .schwerpunkt::before { background: var(--blau); }
.thema-helden .schwerpunkt--extra { background: var(--tinte); box-shadow: none; }