/* ============================================================
   /uebermich/ (Über Mike). Lädt nur auf dieser Seite, nach site.css, leben.css und politur.css.
   Alles hier ist mit "ue-" benannt, nichts greift auf andere Seiten über.
   Werte nur aus DESIGN.md: Schrift 48/32/22/16/14, Manrope 400 und 600, Playfair nur im Akzent.
   ============================================================ */

/* Akzent bleibt hier in der Zeile ("Iron Mike", "Bildungsauftrag"), die Seite setzt ihn sonst darunter */
.held.ue-held h1 .akzent,.ue-titel .akzent{display:inline;margin:0}
.ue-untertitel .akzent{display:block}
.ue-titel{font-size:var(--g2);max-width:820px;margin-bottom:28px}
.ue-kopfzeile .ue-titel{margin-bottom:0}
.ue-untertitel{font-size:22px;line-height:1.25;letter-spacing:-.01em}
@media(min-width:960px){.ue-titel{margin-bottom:48px}}

/* ---------- Kopf: Foto oben, am Rechner rechts. Es läuft in den dunklen Grund aus ---------- */
.ue-held{--ue-bild-h:min(118vw,580px);display:flex;flex-direction:column;justify-content:flex-end}
main>section.held.ue-held{padding-block:0}
.ue-held-bild{position:absolute;inset:0 0 auto;z-index:-1;height:var(--ue-bild-h);pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 230px),transparent 100%);
          mask-image:linear-gradient(180deg,#000 calc(100% - 230px),transparent 100%)}
.ue-held-bild img{width:100%;height:100%;object-fit:cover;object-position:64% 28%}
.ue-held-bild::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgb(3 11 43 / .42) 0%,rgb(3 11 43 / .2) 34%,rgb(3 11 43 / .62) 66%,rgb(3 11 43 / .92) 100%)}
.ue-held-innen{position:relative;padding-block:calc(var(--ue-bild-h) - 140px) 40px}
/* site.css schiebt die Dachzeile im dunklen Kopf am Handy neben ein rundes Porträt. Hier gibt es keins */
.held.ue-held .ue-held-text .ja-frage{display:block;min-height:0;max-width:none}
.ue-tagline{font-size:22px;line-height:1.35;letter-spacing:-.01em;color:var(--grund)}
.ue-held-zahlen{max-width:520px;margin-top:32px}
.ue-knopf-licht{background:transparent;color:var(--grund);box-shadow:inset 0 0 0 1.5px rgb(255 255 255 / .72)}
@media(hover:hover){.ue-knopf-licht:hover{background:rgb(255 255 255 / .1)}}
.ue-held :focus-visible{outline-color:var(--akzent)}

@media(min-width:600px) and (max-width:1023px){
  .ue-held{--ue-bild-h:min(80vw,620px)}
  .ue-held-bild img{object-position:62% 30%}
}
@media(min-width:1024px){
  .ue-held{display:grid;align-content:center}
  main>section.held.ue-held{padding-block:64px 88px}
  .ue-held-bild{inset:0 0 0 auto;width:min(60%,920px);height:auto;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 44%),linear-gradient(180deg,#000 78%,transparent 100%);
    -webkit-mask-composite:source-in;
            mask-image:linear-gradient(90deg,transparent 0%,#000 44%),linear-gradient(180deg,#000 78%,transparent 100%);
            mask-composite:intersect}
  .ue-held-bild img{object-position:58% 32%}
  .ue-held-bild::after{background:linear-gradient(90deg,rgb(3 11 43 / .55) 0%,rgb(3 11 43 / .14) 58%,rgb(3 11 43 / .22) 100%)}
  .ue-held-innen{padding-block:0}
  .ue-held-text{max-width:540px}
}

/* ---------- Werdegang: Bild und Aussage ---------- */
.ue-werdegang-raster{display:grid;gap:44px}
.ue-werdegang-bild img{width:100%;border-radius:var(--r-karte);box-shadow:0 0 0 1px rgb(6 22 77 / .06),var(--p-schatten-2)}
.ue-zitat{position:relative;display:grid;gap:12px;padding:40px 24px 28px;border-radius:var(--r-karte);background:var(--hell)}
.ue-zitat-zeichen{position:absolute;top:-22px;left:24px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--primaer)}
.ue-zitat-zeichen svg{width:20px;height:20px;fill:var(--akzent)}
.ue-zitat-lead{font-size:22px;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--primaer)}
.ue-zitat p+p{color:var(--gedaempft-tief)}
@media(min-width:960px){
  .ue-werdegang-raster{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-areas:"zitat bild";gap:56px;align-items:center}
  .ue-werdegang-bild{grid-area:bild}
  .ue-zitat{grid-area:zitat;padding:52px 36px 36px}
  .ue-zitat-zeichen{left:36px}
}

/* ---------- Bildungsauftrag: Kanäle und Podcasts (dunkel) ---------- */
.ue-bildung-wand{position:absolute;top:0;right:0;z-index:-1;width:min(66%,540px);height:auto;max-width:none;opacity:.4;pointer-events:none;
  -webkit-mask-image:linear-gradient(270deg,#000 25%,transparent 100%),linear-gradient(180deg,#000 35%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(270deg,#000 25%,transparent 100%),linear-gradient(180deg,#000 35%,transparent 100%);
          mask-composite:intersect}
.ue-kanaele-raster{display:grid;gap:32px}
.ue-interview img{width:100%;border-radius:var(--r-karte)}
.ue-kanal-liste{display:grid;gap:10px;margin-top:20px}
.ue-kanal{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:14px;min-height:68px;padding:10px 16px 10px 12px;
  border-radius:var(--r-karte);background:rgb(255 255 255 / .06);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .16);color:var(--grund);text-decoration:none;
  transition:background .3s var(--leben-ease),box-shadow .3s var(--leben-ease)}
.ue-kanal img{width:44px;height:44px}
.ue-kanal-name{display:grid;gap:2px;min-width:0}
.ue-kanal-name b{font-size:16px;line-height:1.3}
.ue-kanal-name span{font-size:14px;line-height:1.35;color:var(--auf-dunkel-leise);overflow-wrap:anywhere}
.ue-kanal-weg{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--akzent)}
.ue-kanal-weg .i{width:18px;height:18px;transition:transform .3s var(--leben-ease)}
.ue-kanal:focus-visible{outline:3px solid var(--akzent);outline-offset:2px}
@media(hover:hover){
  .ue-kanal:hover{background:rgb(255 255 255 / .1);box-shadow:inset 0 0 0 1px rgb(121 197 218 / .7)}
  .ue-kanal:hover .ue-kanal-weg .i{transform:translate(2px,-2px)}
}
@media(max-width:379px){.ue-kanal-weg-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
@media(min-width:960px){
  .ue-kanaele-raster{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
}

/* Videos: Vorschaubild mit Abspielknopf. YouTube lädt erst nach dem Klick (uebermich.js) */
.ue-videos-titel{margin-top:64px}
.ue-videos{display:grid;gap:32px 24px;margin-top:24px}
.ue-video{display:flex;flex-direction:column}
.ue-video-text{display:grid;gap:2px;margin-top:14px}
.ue-video-text b{font-size:16px;line-height:1.35;color:var(--grund)}
.ue-video-text span{line-height:1.45;color:var(--auf-dunkel-leise)}
@media(min-width:640px){.ue-videos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:960px){.ue-videos-titel{margin-top:96px}.ue-videos{gap:40px 28px;margin-top:32px}}

.ue-video-rahmen{position:relative;aspect-ratio:16 / 9;overflow:hidden;border-radius:var(--r-karte);background:var(--p-nacht)}
.ue-video-knopf{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:inherit;background:none;color:inherit;font:inherit;cursor:pointer}
.ue-video-knopf img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--leben-ease)}
.ue-video-knopf::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgb(3 11 43 / 0) 45%,rgb(3 11 43 / .38) 100%)}
.ue-video-knopf:focus-visible{outline:3px solid var(--akzent);outline-offset:-3px;border-radius:inherit}
.ue-play{position:absolute;left:50%;top:50%;z-index:1;display:grid;place-items:center;width:68px;height:68px;border-radius:50%;
  background:var(--grund);color:var(--primaer);transform:translate(-50%,-50%);box-shadow:0 12px 28px -10px rgb(1 4 22 / .7);
  transition:transform .4s var(--leben-ease)}
.ue-play svg{width:26px;height:26px;margin-left:3px;fill:currentColor}
.ue-play--text{left:16px;top:auto;bottom:16px;display:inline-flex;align-items:center;gap:12px;width:auto;height:auto;min-height:52px;
  padding:6px 20px 6px 6px;border-radius:var(--r-pille);font-size:16px;font-weight:600;line-height:1.2;transform:none}
.ue-play-kreis{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border-radius:50%;background:var(--primaer);color:var(--grund)}
.ue-play-kreis svg{width:18px;height:18px;margin-left:2px;fill:currentColor}
@media(hover:hover){
  .ue-video-knopf:hover img{transform:scale(1.03)}
  .ue-video-knopf:hover .ue-play{transform:translate(-50%,-50%) scale(1.08)}
  .ue-video-knopf:hover .ue-play--text{transform:translateY(-2px)}
}
.ue-video-iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- Projekte: drei Karten im Wechsel ---------- */
.ue-projekt-liste{display:grid;gap:24px}
.ue-projekt{display:grid;padding:8px;border-radius:var(--r-karte);background:var(--grund);box-shadow:0 0 0 1px rgb(6 22 77 / .08),var(--p-schatten-1)}
.ue-projekt .ue-video-rahmen{border-radius:10px}
.ue-projekt-text{display:grid;gap:12px;justify-items:start;align-content:center;padding:20px 14px 18px}
.ue-projekt-text h3{font-size:22px;line-height:1.25;color:var(--text)}
.ue-projekt-text p{color:var(--gedaempft-tief)}
.ue-projekt-text .knopf{margin-top:4px}
.ue-extern .i{width:18px;height:18px}

.ue-cage-mosaik{display:grid;gap:8px;grid-template-columns:repeat(6,minmax(0,1fr));
  grid-template-areas:"plakat plakat plakat bild bild bild" "sieger sieger sieger sieger sieger sieger" "station station finale finale boden boden"}
.ue-cage-mosaik img{width:100%;height:100%;min-height:0;object-fit:cover;border-radius:10px;background:var(--oberflaeche)}
.ue-cage-plakat{grid-area:plakat;aspect-ratio:4 / 5;object-position:50% 20%}
.ue-cage-bild{grid-area:bild;aspect-ratio:4 / 5;object-position:50% 0;box-shadow:0 0 0 1px var(--linie)}
.ue-cage-sieger{grid-area:sieger;aspect-ratio:3 / 2;object-position:50% 40%}
.ue-cage-station{grid-area:station;aspect-ratio:1;object-position:55% 40%}
.ue-cage-finale{grid-area:finale;aspect-ratio:1;object-position:50% 22%}
.ue-cage-boden{grid-area:boden;aspect-ratio:1;object-position:42% 50%}

@media(min-width:960px){
  .ue-projekt-liste{gap:32px}
  .ue-projekt--fibo,.ue-projekt--dinner{grid-template-columns:minmax(0,1.22fr) minmax(0,1fr);align-items:center}
  .ue-projekt--dinner{grid-template-areas:"text medium"}
  .ue-projekt--dinner .ue-projekt-medium{grid-area:medium}
  .ue-projekt--dinner .ue-projekt-text{grid-area:text}
  .ue-projekt-text{gap:14px;padding:32px 40px}
  .ue-projekt--cage .ue-projekt-text{padding:28px 32px 30px}
  .ue-projekt--cage .ue-projekt-text p{max-width:820px}
  /* Mosaik wie auf der alten Seite: Plakat links, Artikel rechts, Mitte drei Bilder über dem Siegerfoto.
     Das Seitenverhältnis gibt dem Raster eine feste Höhe, die Bilder füllen ihre Felder */
  .ue-cage-mosaik{aspect-ratio:1184 / 412;overflow:hidden;grid-template-columns:minmax(0,1.88fr) repeat(3,minmax(0,1fr)) minmax(0,1.88fr);
    grid-template-rows:minmax(0,1fr) minmax(0,2.06fr);
    grid-template-areas:"plakat station finale boden bild" "plakat sieger sieger sieger bild"}
  .ue-cage-mosaik img{aspect-ratio:auto}
}

/* ---------- Sponsoren: gleiche Karten, Logos einfarbig in gleichem optischem Gewicht, Code IRON zum Kopieren.
   Jeder Weg zum Partner kopiert den Code mit (wie die Brückenseite go.iron-labs.de/partner, Arta 06.11.2026). ---------- */
.ue-partner-raster{display:grid;gap:16px}
.ue-partner-karte{display:flex;flex-direction:column;gap:10px;padding:10px 10px 18px;background:var(--grund)}
.ue-partner-karte.leben-karte{outline:0;box-shadow:0 0 0 1px rgb(6 22 77 / .08),var(--p-schatten-1)}
@media(hover:hover){.ue-partner-karte.leben-karte:hover{outline:0;box-shadow:0 0 0 1px rgb(6 22 77 / .14),var(--p-schatten-2)}}
.ue-partner-karte.leben-karte.leben-fokus{outline:0;box-shadow:0 0 0 1px rgb(6 22 77 / .14),var(--p-schatten-2)}
.ue-logo-feld{position:relative;display:flex;align-items:center;justify-content:center;gap:28px;height:116px;margin-bottom:8px;border-radius:10px;
  background:radial-gradient(120% 90% at 50% 0%,var(--grund) 0%,var(--oberflaeche) 70%);box-shadow:inset 0 0 0 1px rgb(6 22 77 / .05)}
.ue-logo-feld img{flex:0 0 auto;max-width:none}
.ue-logo-fuge{width:1px;height:40px;background:var(--linie)}
.ue-partner-karte h3{padding-inline:10px;font-size:22px;line-height:1.25;color:var(--text)}
.ue-partner-karte p{padding-inline:10px;color:var(--gedaempft-tief);text-wrap:pretty}
.ue-partner-fuss{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:auto 10px 0;padding-top:18px;border-top:1px solid var(--linie)}
.ue-partner-fuss .knopf{width:100%}
.ue-code-knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:8px 16px;
  border:1.5px dashed color-mix(in srgb,var(--mitte) 55%,transparent);border-radius:var(--r-pille);background:var(--hell);color:var(--primaer);
  font:600 14px/1.2 "Manrope",Georgia,serif;cursor:copy;transition:background .25s var(--leben-ease),border-color .25s var(--leben-ease)}
.ue-code-wort{font-weight:400;color:var(--gedaempft-tief)}
.ue-code-knopf b{font-size:18px;line-height:1;letter-spacing:.14em}
.ue-code-zeichen{display:grid;width:18px;height:18px;color:var(--mitte)}
.ue-code-zeichen .i{grid-area:1 / 1;width:18px;height:18px;transition:opacity .2s var(--leben-ease),transform .2s var(--leben-ease)}
.ue-code-zeichen .i:last-child{opacity:0;transform:scale(.6);color:var(--signal)}
.ue-code-knopf.ist-kopiert{border-style:solid;border-color:var(--signal);background:color-mix(in srgb,var(--signal) 9%,var(--grund))}
.ue-code-knopf.ist-kopiert .ue-code-zeichen .i:first-child{opacity:0;transform:scale(.6)}
.ue-code-knopf.ist-kopiert .ue-code-zeichen .i:last-child{opacity:1;transform:none}
.ue-code-knopf:focus-visible{outline:3px solid var(--akzent);outline-offset:2px}
@media(hover:hover){.ue-code-knopf:not(.ist-kopiert):hover{background:color-mix(in srgb,var(--akzent) 24%,var(--hell));border-color:var(--mitte)}}
.ue-code-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:639px){.ue-partner-karte--doppel .ue-code-knopf{grid-column:1 / -1}}
@media(min-width:640px){
  .ue-partner-raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .ue-partner-karte--doppel{grid-column:1 / -1}
}
@media(min-width:1100px){
  .ue-partner-raster{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
  .ue-partner-karte--doppel{grid-column:span 2}
  .ue-partner-karte:not(.ue-partner-karte--doppel) .ue-partner-fuss{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Schluss: die drei Wege, die Auswertung, PR ---------- */
.ue-schluss .schluss-innen{gap:28px}
.ue-wege{display:grid;gap:12px;width:100%;max-width:1040px}
.ue-wege>li{display:grid}
.ue-weg{display:grid;grid-template-columns:96px minmax(0,1fr) 24px;align-items:start;gap:16px;min-height:76px;padding:8px 18px 14px 8px;
  border-radius:var(--r-karte);background:rgb(255 255 255 / .06);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .16);
  color:var(--grund);text-align:left;text-decoration:none;transition:background .3s var(--leben-ease),box-shadow .3s var(--leben-ease)}
.ue-weg img{width:96px;height:60px;object-fit:cover;border-radius:10px}
.ue-weg-name{font-size:16px;font-weight:600;line-height:1.3}
.ue-weg-name small{display:block;margin-top:4px;font-size:14px;font-weight:500;line-height:1.4;letter-spacing:0;color:var(--akzent)}
.ue-weg-satz{display:block;margin-top:6px;font-size:14px;font-weight:400;line-height:1.45;letter-spacing:0;color:var(--auf-dunkel-leise)}
.ue-weg .i{width:22px;height:22px;margin-top:10px;color:var(--akzent);transition:transform .3s var(--leben-ease)}
.ue-weg-name{padding-top:8px}
.ue-weg:focus-visible{outline:3px solid var(--akzent);outline-offset:3px}
@media(hover:hover){
  .ue-weg:hover{background:rgb(255 255 255 / .1);box-shadow:inset 0 0 0 1px rgb(121 197 218 / .7)}
  .ue-weg:hover .i{transform:translateX(3px)}
}
@media(min-width:760px){
  .ue-wege{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .ue-weg{grid-template-columns:minmax(0,1fr) 24px;align-items:start;align-content:start;row-gap:18px;padding:8px 18px 20px 8px}
  .ue-weg .i{margin-top:4px}
  .ue-weg img{grid-column:1 / -1;width:100%;height:auto;aspect-ratio:16 / 10}
  .ue-weg-name{padding-top:0;padding-left:12px;font-size:22px;letter-spacing:-.01em}
  .ue-weg-name small{margin-top:6px;font-size:15px}
  .ue-weg-satz{margin-top:8px;font-size:15px}
}
.ue-schluss-satz{max-width:520px;margin-top:12px;color:var(--auf-dunkel-leise)}
.ue-schluss-satz b{display:block;margin-bottom:4px;color:var(--grund);font-weight:600}
.ue-pr{max-width:640px;margin:32px auto 0;padding-top:24px;border-top:1px solid var(--linie);font-size:15px;line-height:1.55;text-align:center;color:var(--gedaempft-tief)}
.ue-pr a{display:inline-block;margin-block:-12px;padding-block:12px;color:var(--primaer);font-weight:600;text-decoration:underline;text-underline-offset:4px;white-space:nowrap}

@media(prefers-reduced-motion:reduce){
  .ue-video-knopf img,.ue-play,.ue-kanal,.ue-kanal-weg .i,.ue-weg,.ue-weg .i,.ue-code-knopf,.ue-code-zeichen .i{transition:none}
  .ue-video-knopf:hover img,.ue-video-knopf:hover .ue-play--text,.ue-kanal:hover .ue-kanal-weg .i,.ue-weg:hover .i{transform:none}
  .ue-video-knopf:hover .ue-play:not(.ue-play--text){transform:translate(-50%,-50%)}
}