/* MFM Social Hub – öffentliche Seiten /einwilligung/ und /freigabe/ (Premium 2610).
   Eigenständiges Dokument ohne Theme: Tokens stehen hier mit denselben Werten wie assets/css/premium.css (--mx-*).
   Lädt NACH social-hub.css und gilt nur unter body.mfm-sh-public. Schrift: Inter lokal (assets/public/), kein Google/CDN.
   Aufbau: dunkle Bühne (Kopf + Titelband), heller Inhalt mit Haarlinien-Karten, dunkler Fuß – wie mfm-voice.com / mfm.energy.
   iOS-14-fest: Grid statt Flex-gap, top/right/bottom/left statt inset, [hidden] immer unsichtbar. Nichts ist fixed oder sticky. */
@font-face { font-family: 'Inter Variable'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('public/inter-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

body.mfm-sh-public {
  --mx-ink: #0f1b2d; --mx-stage: #0b1220; --mx-stage-2: #111c30; --mx-stage-3: #17243b; --mx-bg: #fff; --mx-bg-alt: #f4f4f1; --mx-bg-cool: #eef3fa;
  --mx-line: #dcdfe4; --mx-line-dark: rgba(255, 255, 255, .14); --mx-text-2: #55606f; --mx-on-stage-2: #c3cbd7;
  --mx-accent: #2a6fdb; --mx-accent-strong: #0a4a8f; --mx-warm: #f2b84b; --mx-ok: #1f7a4d; --mx-err: #a3261f; --mx-radius: 3px;
  --mx-font: 'Inter Variable', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  margin: 0; background: var(--mx-bg-alt); color: var(--mx-ink); font: 400 1.0625rem/1.65 var(--mx-font);
  -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
body.mfm-sh-public *, body.mfm-sh-public *::before, body.mfm-sh-public *::after { box-sizing: border-box; }
body.mfm-sh-public [hidden] { display: none !important; }
body.mfm-sh-public .mfm-sh {
  --sh-accent: var(--mx-accent-strong); --sh-accent-2: #25334a; --sh-text: var(--mx-ink); --sh-muted: var(--mx-text-2); --sh-border: var(--mx-line);
  --sh-bg: var(--mx-bg-alt); --sh-radius: 3px; color: var(--mx-ink); font-size: 1.0625rem; line-height: 1.65;
}
.mfm-sh-pg-wrap { max-width: 920px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px); }
.mfm-sh-pg-skip { position: absolute; left: -9999px; top: 8px; z-index: 2; padding: .6em 1em; border-radius: var(--mx-radius, 3px); background: #fff; color: #0f1b2d; font-weight: 600; }
.mfm-sh-pg-skip:focus { left: 16px; outline: 2px solid #2a6fdb; outline-offset: 2px; }

/* Kopf: dunkle Bühne, Logo links, Telefon rechts */
.mfm-sh-pg-head { background: var(--mx-stage); border-bottom: 1px solid var(--mx-line-dark); }
.mfm-sh-pg-head .mfm-sh-pg-wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; min-height: 72px; column-gap: 16px; }
.mfm-sh-pg-logo { display: inline-flex; align-items: center; min-height: 44px; }
.mfm-sh-pg-logo img { display: block; height: 30px; width: auto; }
.mfm-sh-pg-help { justify-self: end; display: block; min-height: 44px; padding: 4px 0; color: var(--mx-on-stage-2); font-size: .8125rem; line-height: 1.35; text-align: right; text-decoration: none; }
.mfm-sh-pg-help b { display: block; color: #fff; font-size: .9375rem; font-weight: 500; white-space: nowrap; letter-spacing: .005em; }
.mfm-sh-pg-help:hover b { text-decoration: underline; text-underline-offset: 3px; }

/* Titelband: Bühne mit Licht rechts oben (ohne Bild – die Seite ist ein Arbeitsformular, kein Bildhero) */
.mfm-sh-pg-hero { position: relative; background: var(--mx-stage); background: linear-gradient(135deg, var(--mx-stage) 0%, var(--mx-stage-3) 100%); color: #fff; padding: clamp(40px, 7vw, 76px) 0 clamp(44px, 7vw, 80px); isolation: isolate; overflow: hidden; }
.mfm-sh-pg-hero::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; opacity: .55; pointer-events: none;
  background: radial-gradient(60% 80% at 88% 8%, rgba(42, 111, 219, .38), transparent 70%), radial-gradient(40% 60% at 98% 100%, rgba(242, 184, 75, .18), transparent 70%); }
.mfm-sh-pg-eyebrow { margin: 0 0 1rem; font: 600 .75rem/1.4 var(--mx-font); letter-spacing: .16em; text-transform: uppercase; color: var(--mx-warm); overflow-wrap: anywhere; }
.mfm-sh-pg-hero h1 { margin: 0 0 1rem; font: 300 clamp(2.05rem, 5vw, 3.35rem)/1.1 var(--mx-font); letter-spacing: -.025em; color: #fff; max-width: 20ch; text-wrap: balance; overflow-wrap: anywhere; }
.mfm-sh-pg-sub { margin: 0; max-width: 54ch; font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); font-weight: 300; color: var(--mx-on-stage-2); }
.mfm-sh-pg-chips { display: flex; flex-wrap: wrap; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.mfm-sh-pg-chips li { margin: 0 8px 8px 0; padding: 5px 12px; border: 1px solid var(--mx-line-dark); border-radius: var(--mx-radius); font-size: .8125rem; line-height: 1.4; color: #fff; overflow-wrap: anywhere; }

/* Inhalt: heller Grund, Karten mit Haarlinie */
body.mfm-sh-public .mfm-sh-public__main { position: relative; max-width: 920px; margin: 0 auto; padding: clamp(28px, 5vw, 56px) clamp(20px, 5vw, 40px) clamp(40px, 6vw, 72px); }
body.mfm-sh-public .mfm-sh-card { background: #fff; border: 1px solid var(--mx-line); border-radius: var(--mx-radius); box-shadow: none; padding: clamp(20px, 3.4vw, 32px); margin: 0 0 16px; }
body.mfm-sh-public .mfm-sh h1, body.mfm-sh-public .mfm-sh h2, body.mfm-sh-public .mfm-sh h3 { font-family: var(--mx-font); color: var(--mx-ink); letter-spacing: -.015em; }
body.mfm-sh-public .mfm-sh h2 { font-size: 1.4rem; font-weight: 400; line-height: 1.25; margin: 0 0 .6rem; }
body.mfm-sh-public .mfm-sh h3 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.005em; }
body.mfm-sh-public .mfm-sh p { margin: .5em 0; }
body.mfm-sh-public .mfm-sh a { color: var(--mx-accent-strong); text-underline-offset: 3px; }
body.mfm-sh-public .mfm-sh-muted { color: var(--mx-text-2); font-size: .9375rem; }
body.mfm-sh-public .mfm-sh details.mfm-sh-card > summary { min-height: 44px; padding: 10px 0; color: var(--mx-ink); font-weight: 500; }

/* Hinweise */
body.mfm-sh-public .mfm-sh-notice { position: relative; border: 1px solid var(--mx-line); border-left: 3px solid var(--mx-ink); border-radius: var(--mx-radius); padding: 16px 20px; margin: 0 0 16px; font-size: 1rem; background: #fff; color: var(--mx-ink); }
body.mfm-sh-public .mfm-sh-notice--info { background: var(--mx-bg-cool); border-left-color: var(--mx-accent); color: var(--mx-ink); }
body.mfm-sh-public .mfm-sh-notice--success { background: #f0f7f3; border-left-color: var(--mx-ok); color: var(--mx-ink); }
body.mfm-sh-public .mfm-sh-notice--error { background: #fdf1f0; border-left-color: var(--mx-err); color: var(--mx-ink); }
body.mfm-sh-public .mfm-sh-notice strong { font-weight: 600; }
body.mfm-sh-public .mfm-sh-notice ol { margin: .6em 0 0; padding-left: 1.3em; }
body.mfm-sh-public .mfm-sh-notice li { margin: .35em 0; }
body.mfm-sh-public .mfm-sh-card .mfm-sh-notice { box-shadow: none; }

/* Felder */
body.mfm-sh-public .mfm-sh label { font-weight: 500; color: var(--mx-ink); font-size: .875rem; }
body.mfm-sh-public .mfm-sh input[type=text], body.mfm-sh-public .mfm-sh input[type=email], body.mfm-sh-public .mfm-sh select, body.mfm-sh-public .mfm-sh textarea {
  margin-top: 8px; min-height: 52px; padding: .75rem 1rem; border: 1px solid var(--mx-line); border-radius: var(--mx-radius); font: 400 1rem/1.4 var(--mx-font); color: var(--mx-ink); background: #fff;
  transition: border-color .3s, box-shadow .3s;
}
body.mfm-sh-public .mfm-sh textarea { min-height: 140px; }
body.mfm-sh-public .mfm-sh input::placeholder, body.mfm-sh-public .mfm-sh textarea::placeholder { color: #747d89; }
body.mfm-sh-public .mfm-sh input[type=text]:focus, body.mfm-sh-public .mfm-sh input[type=email]:focus, body.mfm-sh-public .mfm-sh select:focus, body.mfm-sh-public .mfm-sh textarea:focus {
  outline: 0; border-color: var(--mx-ink); box-shadow: 0 0 0 3px rgba(42, 111, 219, .25); }
body.mfm-sh-public .mfm-sh summary:focus-visible { outline: 2px solid var(--mx-accent); outline-offset: 2px; }
body.mfm-sh-public .mfm-sh-check input { accent-color: var(--mx-ink); }

/* Knöpfe: 48 px, 3 px Radius, kein Schatten; Hauptaktionen gleich groß wie die Alternative */
body.mfm-sh-public .mfm-sh-btn { border-radius: var(--mx-radius); border: 1px solid var(--mx-ink); background: var(--mx-ink); color: #fff !important; font: 500 .9375rem/1.2 var(--mx-font); letter-spacing: .005em; touch-action: manipulation; transition: background .3s, border-color .3s, color .3s; }
body.mfm-sh-public .mfm-sh-btn:hover { background: #25334a; border-color: #25334a; }
body.mfm-sh-public .mfm-sh-btn--ghost { background: transparent; color: var(--mx-ink) !important; border-color: rgba(15, 27, 45, .4); }
body.mfm-sh-public .mfm-sh-btn--ghost:hover { background: transparent; border-color: var(--mx-ink); }
body.mfm-sh-public .mfm-sh-btn--ok { background: var(--mx-ok); border-color: var(--mx-ok); }
body.mfm-sh-public .mfm-sh-btn--ok:hover { background: #17613c; border-color: #17613c; }
body.mfm-sh-public .mfm-sh-btn--danger { background: transparent; color: var(--mx-err) !important; border-color: var(--mx-err); }
body.mfm-sh-public .mfm-sh-btn--danger:hover { background: #fdf1f0; border-color: var(--mx-err); }
/* Kleine Knöpfe am Zeitstrahl und in der Stellenliste: kompakt, damit „Ansehen · Ändern · Entfernen“ auf 375 px passen */
body.mfm-sh-public .mfm-sh-mk__btns .mfm-sh-btn, body.mfm-sh-public .mfm-sh-tl-row .mfm-sh-btn, body.mfm-sh-public .mfm-sh-mk__step .mfm-sh-btn { font-weight: 500; font-size: .875rem; padding-left: .3em; padding-right: .3em; }
body.mfm-sh-public .mfm-sh-actions > .mfm-sh-btn, body.mfm-sh-public .mfm-sh-revoke > .mfm-sh-btn { min-height: 52px; padding: .65rem 1.75rem; font-size: 1rem; justify-content: center; text-align: center; }
body.mfm-sh-public .mfm-sh-actions { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 12px; margin-top: 20px; }
body.mfm-sh-public .mfm-sh-actions--stack > .mfm-sh-btn { width: 100%; }
/* „Ich willige nicht ein“: gleichwertiger Zweitknopf (Umriss), nicht versteckt oder kleiner */
body.mfm-sh-public .mfm-sh-btn[data-mfm-sh-decline] { background: transparent; border-color: rgba(15, 27, 45, .4); color: var(--mx-ink) !important; }
body.mfm-sh-public .mfm-sh-btn[data-mfm-sh-decline]:hover { background: transparent; border-color: var(--mx-ink); }
@media (min-width: 640px) {
  body.mfm-sh-public .mfm-sh-consent-form .mfm-sh-actions { grid-template-columns: auto auto; justify-content: start; column-gap: 12px; }
}

/* Unterschrift (Kern-Markup) */
body.mfm-sh-public .mfm-sh-sig canvas { height: 200px; border: 1px dashed #8a93a0; border-radius: var(--mx-radius); background: #fff; }
body.mfm-sh-public .mfm-sh-sig button { top: 8px; right: 8px; min-height: 44px; }
body.mfm-sh-public .mfm-sh-revoke .mfm-sh-check { min-height: 44px; align-items: center; }

/* Freigabe: nur Gestaltung – Markup, Tickets, Zeitstrahl-Logik und Eingabe ohne JS bleiben wie im Kern */
body.mfm-sh-public .mfm-sh-rv-list { gap: 32px; margin: 1.25rem 0; }
body.mfm-sh-public .mfm-sh-rv { padding: 0; border: 0; background: none; }
body.mfm-sh-public .mfm-sh-rv h3 { margin: 0 0 12px; font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--mx-text-2); }
body.mfm-sh-public .mfm-sh-rv h3 small { font-weight: 500; letter-spacing: .04em; text-transform: none; }
body.mfm-sh-public .mfm-sh-protect .mfm-sh-media { border-radius: var(--mx-radius); background: var(--mx-stage); }
/* Kennzeichen „Vorschau für …“ auch über hellen Bildstellen lesbar (≥ 4,5:1) */
body.mfm-sh-public .mfm-sh-wm { background: rgba(11, 18, 32, .78); border-radius: var(--mx-radius); font-size: 12px; }
body.mfm-sh-public .mfm-sh-caption { margin: 8px 0 12px; padding: 18px 20px; border: 1px solid var(--mx-line); border-left: 3px solid var(--mx-ink); border-radius: var(--mx-radius); background: var(--mx-bg-alt); font-size: 1rem; }
body.mfm-sh-public .mfm-sh-tl { border-radius: var(--mx-radius); }
body.mfm-sh-public .mfm-sh-mk { border-radius: var(--mx-radius); }
body.mfm-sh-public .mfm-sh-rv-summary { border-radius: var(--mx-radius); padding: 12px 16px; }
body.mfm-sh-public .mfm-sh-counter { font-variant-numeric: tabular-nums; }
/* Hinweis „… markiert – weiter zur Entscheidung ↓“: steht im Fluss nach den Medien (Kern-JS), schwebt nie */
body.mfm-sh-public .mfm-sh-bar { min-height: 52px; border-radius: var(--mx-radius); background: var(--mx-ink); font: 500 .9375rem/1.2 var(--mx-font); }
body.mfm-sh-public .mfm-sh-bar:hover { background: #25334a; }

/* Vertrauenszeile unter dem Inhalt */
.mfm-sh-pg-trust { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: start; margin: 24px 2px 0; color: var(--mx-text-2); font-size: .875rem; line-height: 1.6; }
.mfm-sh-pg-trust svg { margin-top: 4px; color: var(--mx-text-2); }
.mfm-sh-pg-trust strong { color: var(--mx-ink); font-weight: 600; }

/* Fuß: dunkle Bühne */
.mfm-sh-pg-foot { background: var(--mx-stage); color: var(--mx-on-stage-2); font-size: .875rem; line-height: 1.75; padding: clamp(32px, 5vw, 56px) 0 clamp(28px, 4vw, 44px); border-top: 1px solid var(--mx-line-dark); }
.mfm-sh-pg-foot img { display: block; height: 26px; width: auto; margin: 0 0 20px; }
.mfm-sh-pg-foot p { margin: 0 0 8px; max-width: 70ch; }
.mfm-sh-pg-foot a { color: #fff; text-decoration: none; }
.mfm-sh-pg-foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mfm-sh-pg-foot p a { display: inline-block; min-height: 44px; padding: 10px 0; line-height: 24px; }
.mfm-sh-pg-links { margin-top: 12px !important; padding-top: 12px; border-top: 1px solid var(--mx-line-dark); }
.mfm-sh-pg-links a { display: inline-block; min-height: 44px; padding: 10px 0; margin-right: 24px; font-weight: 500; }
.mfm-sh-pg-note { margin-top: 6px !important; color: #9aa4b2; font-size: .8125rem; }
.mfm-sh-pg-foot a:focus-visible, .mfm-sh-pg-head a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 640px) {
  .mfm-sh-pg-help span { display: none; }
  .mfm-sh-pg-head .mfm-sh-pg-wrap { min-height: 64px; }
  body.mfm-sh-public .mfm-sh-card { padding: 20px 16px; }
  body.mfm-sh-public .mfm-sh-public__main { padding-left: 16px; padding-right: 16px; }
  .mfm-sh-pg-wrap { padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) { body.mfm-sh-public * { transition: none !important; scroll-behavior: auto !important; } }
@media print {
  body.mfm-sh-public { background: #fff; color: #000; }
  .mfm-sh-pg-head, .mfm-sh-pg-skip, .mfm-sh-pg-foot img, .mfm-sh-pg-links, .mfm-sh-steps, .mfm-sh-allbar, .mfm-sh-sig, .mfm-sh-bar, .mfm-sh-actions { display: none !important; }
  .mfm-sh-pg-hero { background: none !important; color: #000; padding: 0 0 12px; }
  .mfm-sh-pg-hero::before { display: none; }
  .mfm-sh-pg-hero h1, .mfm-sh-pg-eyebrow, .mfm-sh-pg-sub, .mfm-sh-pg-chips li { color: #000 !important; background: none !important; border-color: #999 !important; }
  body.mfm-sh-public .mfm-sh-public__main { margin-top: 0; }
  body.mfm-sh-public .mfm-sh-card { box-shadow: none; break-inside: avoid; }
  .mfm-sh-pg-foot { background: none; color: #000; padding: 12px 0 0; border-top: 1px solid #999; }
  .mfm-sh-pg-foot a { color: #000; }
  body.mfm-sh-public details.mfm-sh-legaldoc > .mfm-sh-legal { display: block; max-height: none; }
}

/* Aufklappbare Karten (Volltext nach Erteilung): Plus/Minus wie beim Volltext im Formular */
body.mfm-sh-public .mfm-sh details.mfm-sh-card > summary { list-style: none; }
body.mfm-sh-public .mfm-sh details.mfm-sh-card > summary::-webkit-details-marker { display: none; }
body.mfm-sh-public .mfm-sh details.mfm-sh-card > summary::before { content: "+"; display: inline-block; width: 1.2em; font-weight: 300; font-size: 1.25em; line-height: 1; vertical-align: -.05em; }
body.mfm-sh-public .mfm-sh details.mfm-sh-card[open] > summary::before { content: "–"; }