/*
Theme Name: Mike Metelko
Theme URI: https://metelko.org/
Description: Projekt-Theme für metelko.org. Block-Theme, gebaut aus der am 07.09.2026
             freigegebenen Startseiten-Vorschau. Design-Tokens liegen in theme.json,
             die Sektionen als Patterns, Bilder kommen aus media/manifest.yml.
Author: Homepage-Maker
Version: 0.1.11
Requires at least: 6.9
Tested up to: 7.1
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mike-metelko
*/

/* ===================================================================
   Tokens
   Quelle ist theme.json. Die Kurznamen hier sind nur Aliase, damit das
   Stylesheet lesbar bleibt; die Fallbacks halten es auch dann lauffähig,
   wenn es einmal ausserhalb von WordPress geprüft wird.
   =================================================================== */
:root{
  --ink:   var(--wp--preset--color--ink,   #0B0A0A);
  --ink-2: var(--wp--preset--color--ink-2, #151312);
  --ink-3: var(--wp--preset--color--ink-3, #1F1B1A);
  --paper: var(--wp--preset--color--paper, #FAF8F6);
  --muted: var(--wp--preset--color--muted, #A29C99);
  --muted-ink: var(--wp--preset--color--muted-ink, #5C5654);
  --signal: var(--wp--preset--color--signal, #FF4D2E);
  --signal-ink: var(--wp--preset--color--signal-ink, #B32409);

  --display: var(--wp--preset--font-family--display, "Archivo Display", "Helvetica Neue", Arial, sans-serif);
  --text:    var(--wp--preset--font-family--text,    "Archivo Text", "Helvetica Neue", Arial, sans-serif);

  --pad:  var(--wp--custom--pad,  clamp(1.25rem, 5vw, 5.5rem));
  --gap:  var(--wp--custom--gap,  clamp(6rem, 14vh, 12rem));
  --ease: var(--wp--custom--ease, cubic-bezier(.16, 1, .3, 1));
  --ease-micro: var(--wp--custom--ease-micro, cubic-bezier(.4, 0, .2, 1));
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--text);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit}

.display{font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:.92;
  text-wrap:balance;margin:0}
.label{font-family:var(--display);font-weight:700;font-size:.6875rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin:0}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--pad)}
.narrow{max-width:62ch}
/* Ueberschrift nur fuer Suchmaschinen, KI und Screenreader - Gliederung ohne Optik. */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--signal);
  color:var(--ink);font-family:var(--display);font-weight:700;font-size:.75rem;
  letter-spacing:.16em;text-transform:uppercase;padding:1rem 1.5rem;text-decoration:none}
.skip-link:focus{left:0}

/* Scroll-Fortschritt */
#progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--signal);z-index:60}

/* Menue (D-05, 2026-10-07). Seit 0.1.11 auf allen Breiten ein Hamburger-Menue, immer
   oben (Mikes Wunsch). Ueber dem Hero der Startseite durchsichtig und ohne Namen - der
   steht dort gross im Bild. Desktop: Social-Icons und Anfragen-Knopf zusaetzlich direkt
   in der Leiste. Das Vollbild-Menue liegt unter der Leiste. */
.site-nav{position:fixed;top:0;left:0;right:0;z-index:59;background:rgba(11,10,10,.94);
  border-bottom:1px solid var(--ink-3);transition:background .3s var(--ease-micro),border-color .3s var(--ease-micro)}
@supports (backdrop-filter:blur(8px)){.site-nav{background:rgba(11,10,10,.82);backdrop-filter:blur(10px)}}
.site-nav.im-hero{background:transparent;border-bottom-color:transparent;backdrop-filter:none}
/* backdrop-filter macht den Kopf zum Bezugsrahmen fuer position:fixed - offen deshalb ohne. */
.site-nav.open{backdrop-filter:none;background:var(--ink);border-bottom-color:var(--ink-3)}
.nav-row{max-width:1240px;margin:0 auto;padding:0 var(--pad);height:64px;display:flex;
  align-items:center;justify-content:space-between;gap:1.5rem}
.nav-brand{font-family:var(--display);font-weight:700;font-size:.875rem;letter-spacing:.2em;
  text-decoration:none;white-space:nowrap;transition:opacity .3s var(--ease-micro)}
.site-nav.im-hero .nav-brand{opacity:0;pointer-events:none}
.site-nav.open .nav-brand{opacity:1;pointer-events:auto}
.nav-end{display:flex;align-items:center;gap:1.25rem;margin-left:auto}
.nav-quick{display:flex;align-items:center;gap:1.25rem}
.nav-cta{padding:.75rem 1.25rem;font-size:.6875rem}
.wp-block-social-links.mm-social-nav{font-size:22px;margin:0;padding:0;gap:.6rem}
.mm-social-nav .wp-block-social-link{margin:0;opacity:.72;transition:opacity .2s var(--ease-micro),color .2s var(--ease-micro)}
.mm-social-nav .wp-block-social-link:hover{opacity:1;color:var(--signal)}
.nav-links a:focus-visible,.nav-quick a:focus-visible,.nav-brand:focus-visible,.nav-toggle:focus-visible{outline:2px solid var(--signal);outline-offset:4px}
/* Die freistehende Leiste gibt es nicht mehr - die Icons stehen im Menue. Spezifisch,
   weil .wp-block-social-links / .is-layout-flex sonst gewinnen. */
.wp-block-social-links.mm-social-bar{display:none}

.nav-toggle{display:block;width:44px;height:44px;margin-right:-10px;padding:0;border:0;
  background:none;cursor:pointer;color:var(--paper);position:relative;flex:none}
.nav-burger,.nav-burger::before,.nav-burger::after{position:absolute;left:11px;width:22px;height:2px;
  background:currentColor;transition:transform .3s var(--ease),opacity .2s}
.nav-burger{top:21px}
.nav-burger::before,.nav-burger::after{content:"";left:0}
.nav-burger::before{top:-7px}.nav-burger::after{top:7px}
.site-nav.open .nav-burger{background:transparent}
.site-nav.open .nav-burger::before{transform:translateY(7px) rotate(45deg)}
.site-nav.open .nav-burger::after{transform:translateY(-7px) rotate(-45deg)}

.nav-links{position:fixed;inset:64px 0 0 0;height:calc(100vh - 64px);height:calc(100dvh - 64px);
  background:var(--ink);overflow-y:auto;visibility:hidden;opacity:0;
  transition:opacity .3s var(--ease),visibility 0s linear .3s}
.site-nav.open .nav-links{visibility:visible;opacity:1;transition:opacity .3s var(--ease),visibility 0s}
.nav-inner{max-width:1240px;margin:0 auto;padding:clamp(2.5rem,8vh,5rem) var(--pad);
  display:flex;flex-direction:column;align-items:flex-start;gap:2.5rem}
.nav-links > .nav-inner > ul{display:flex;flex-direction:column;gap:clamp(1.25rem,3vh,2rem);list-style:none;margin:0;padding:0}
.nav-links > .nav-inner > ul a{font-family:var(--display);font-weight:700;letter-spacing:-.025em;
  font-size:clamp(1.75rem,5vw,4rem);line-height:1;text-decoration:none;color:var(--paper);
  transition:color .2s var(--ease-micro)}
.nav-links > .nav-inner > ul a:hover,.nav-links > .nav-inner > ul a[aria-current]{color:var(--signal)}
.nav-side{display:flex;flex-direction:column;align-items:flex-start;gap:1.5rem}
.nav-side .nav-cta{padding:1.05rem 1.9rem;font-size:.75rem}
.nav-side .wp-block-social-links.mm-social-nav{font-size:32px;gap:1rem}
/* Desktop: Knopf und Icons stehen schon in der Leiste, im Vollbild-Menue nicht doppelt. */
@media(min-width:900px){.nav-side{display:none}}
@media(max-width:899px){.nav-quick{display:none}}
body.nav-offen{overflow:hidden}

/* Booking-Anker, ab Sektion 2 (content/sitemap.md, D-03) */
#anchor{position:fixed;right:0;top:50%;transform:translate(100%,-50%);z-index:55;
  background:var(--signal);color:var(--ink);font-family:var(--display);font-weight:700;
  font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  padding:1.1rem .85rem;writing-mode:vertical-rl;transition:transform .5s var(--ease)}
#anchor.on{transform:translate(0,-50%)}
#anchor:focus-visible{outline:2px solid var(--paper);outline-offset:-6px}

/* Profile. Die Icons kommen aus dem Core-Block social-links (is-style-logos-only,
   has-small-icon-size) — keine nachgezeichneten Logos, keine fremde Anfrage.
   Hier nur Position und Verhalten.
   Die Leiste bleibt auch auf dem Handy oben rechts stehen: drei Icons in kleiner
   Groesse sind rund 60px breit, das passt neben den Hero-Text. Mit Wortmarken war
   das noch anders — die mussten auf schmalen Schirmen weichen. */
.mm-social-bar{position:fixed;top:1rem;right:var(--pad);left:auto;z-index:58;
  margin:0;padding:0;width:max-content;max-width:none;justify-content:flex-end;
  gap:.55rem;list-style:none}
.mm-social-bar .wp-block-social-link{margin:0;opacity:.72;
  transition:opacity .2s var(--ease-micro),color .2s var(--ease-micro)}
.mm-social-bar .wp-block-social-link:hover{opacity:1;color:var(--signal)}
.mm-social-bar .wp-block-social-link a:focus-visible{outline:2px solid var(--signal);
  outline-offset:3px;opacity:1}
@media (max-width:767px){.mm-social-bar{right:1rem;top:.8rem;gap:.45rem}}
/* Icons doppelt so gross wie die Core-Groesse "small" (16px), Mikes Wunsch 2026-10-07. */
.wp-block-social-links.mm-social-bar,.wp-block-social-links.mm-social-footer{font-size:32px}

/* Im Fussbereich laufen die Icons in der Zeile mit. */
.site-footer .mm-social-footer{margin:0;gap:.55rem}
.site-footer .mm-social-footer .wp-block-social-link{margin:0}
.site-footer .mm-social-footer .wp-block-social-link:hover{color:var(--signal)}

/* Reveal */
.rv{opacity:0;transform:translateY(22px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.09s}.rv.d2{transition-delay:.18s}.rv.d3{transition-delay:.27s}

/* ---------- 1 Hero ---------- */
.hero{position:relative;min-height:88vh;display:flex;align-items:flex-end;overflow:hidden}
.hero video,.hero .fallback{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 62%}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,10,10,.72) 0%,rgba(11,10,10,.30) 42%,rgba(11,10,10,.92) 100%)}
.hero .inner{position:relative;z-index:2;width:100%;
  padding:var(--pad) var(--pad) clamp(2.5rem,7vh,5rem)}
.hero h1{font-size:clamp(3rem,10vw,9rem)}
/* Dreiteilige Rollenzeile: Schriftgroesse und Laufweite gehen auf schmalen Screens
   mit zurueck, damit die Zeile nicht umbricht. Am Desktop bleibt der Satz unveraendert. */
.hero .rolle{margin:.9rem 0 0;font-family:var(--display);font-weight:700;
  font-size:clamp(.5rem,2.6vw,.8125rem);letter-spacing:clamp(.12em,.9vw,.34em);
  color:var(--muted)}
.hero .claim{margin:clamp(1.5rem,4vh,2.75rem) 0 0;font-size:clamp(1.125rem,2.4vw,1.75rem);
  font-family:var(--display);font-weight:700;letter-spacing:-.01em;line-height:1.15;max-width:22ch}
.hero .claim em{font-style:normal;color:var(--signal)}

.ctas{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:clamp(1.5rem,4vh,2.5rem)}
.btn{font-family:var(--display);font-weight:700;font-size:.75rem;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;padding:1.05rem 1.9rem;
  border:1px solid var(--signal);background:var(--signal);color:var(--ink);
  transition:background .2s var(--ease-micro),color .2s var(--ease-micro)}
.btn.ghost{background:transparent;color:var(--paper);border-color:rgba(250,248,246,.42)}
.btn:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn:focus-visible{outline:2px solid var(--paper);outline-offset:3px}

/* ---------- 2 Impact ---------- */
.impact{padding:var(--gap) 0}
.impact p,.impact h2{font-family:var(--display);font-weight:700;font-size:clamp(1.75rem,4.6vw,3.6rem);
  line-height:1.06;letter-spacing:-.025em;margin:0;max-width:19ch}
.impact .lead{font-family:var(--display);font-weight:700;font-size:clamp(1.125rem,1.9vw,1.6rem);
  line-height:1.2;letter-spacing:-.015em;color:var(--paper);max-width:30ch;
  margin:clamp(1.75rem,4vh,2.75rem) 0 0}
.impact .sub{font-family:var(--text);font-weight:400;font-size:1.0625rem;line-height:1.65;
  letter-spacing:0;color:var(--muted);max-width:58ch;margin:1rem 0 0}

/* ---------- 3 Showreel ---------- */
.reel{padding:0 0 var(--gap)}
.reel figure{margin:0;position:relative;background:var(--ink-2)}
.reel video{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.reel figcaption{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;
  padding:1rem var(--pad) 0;font-size:.8125rem;color:var(--muted)}

/* ---------- 4 Formate ---------- */
/* Das Bild füllt den Hintergrund, die Höhe bestimmt der Text. Sonst läuft ein langer
   Absatz unten aus dem Bild heraus. */
.formats{border-top:1px solid var(--ink-3)}
.fmt{position:relative;display:block;border-bottom:1px solid var(--ink-3);overflow:hidden}
.fmt-img{position:absolute;inset:0}
.fmt-img img{width:100%;height:100%;object-fit:cover}
.fmt-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(11,10,10,.9) 0%,rgba(11,10,10,.55) 52%,rgba(11,10,10,.15) 100%)}
.fmt-txt{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;
  min-height:clamp(340px,58vh,620px);padding:clamp(3rem,7vh,5.5rem) var(--pad);
  max-width:min(50ch,72%)}
.fmt.portrait .fmt-txt{min-height:clamp(440px,78vh,820px)}
.fmt-txt h3{font-family:var(--display);font-weight:700;font-size:clamp(2rem,6vw,5rem);
  line-height:.94;letter-spacing:-.03em;margin:0}
.fmt-txt .fmt-lead{margin:1.2rem 0 0;color:var(--paper);font-family:var(--display);
  font-weight:700;font-size:clamp(1.0625rem,1.6vw,1.375rem);line-height:1.2;
  letter-spacing:-.01em;max-width:28ch}
.fmt-txt p{margin:.9rem 0 0;color:var(--muted);font-size:.9688rem;line-height:1.62;max-width:46ch}
.fmt-no{font-family:var(--display);font-weight:700;font-size:.75rem;letter-spacing:.2em;
  color:var(--signal);margin:0 0 1rem}

/* ---------- 5 Zahlen ---------- */
.numbers{position:relative;padding:var(--gap) 0;overflow:hidden}
.numbers .bg{position:absolute;inset:0}
.numbers .bg img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.numbers::after{content:"";position:absolute;inset:0;background:rgba(11,10,10,.74)}
.numbers .inner{position:relative;z-index:2}
.nums{display:grid;gap:clamp(2.5rem,6vh,4.5rem);margin-top:clamp(2rem,5vh,3.5rem)}
@media(min-width:760px){.nums{grid-template-columns:repeat(3,1fr);gap:2rem}}
.num b{display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(3.25rem,8.5vw,7rem);line-height:.88;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums}
.num span{display:block;font-family:var(--display);font-weight:700;font-size:.6875rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:1rem}

/* ---------- 6 Real Mike (heller Bruch) ---------- */
.real{background:var(--paper);color:var(--ink);padding:var(--gap) 0}
.real .label{color:var(--muted-ink)}
.real-grid{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center}
@media(min-width:820px){.real-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1fr)}}
.real img{width:100%;height:auto;object-fit:cover;object-position:62% 25%;aspect-ratio:4/3}
.real h2{font-family:var(--display);font-weight:700;font-size:clamp(1.75rem,4vw,3rem);
  line-height:1.02;letter-spacing:-.03em;margin:1.25rem 0 0}
.real p{color:var(--muted-ink);max-width:52ch}
.real p strong{color:var(--ink);font-weight:500}
.real a{color:var(--signal-ink)}
.real .more{font-family:var(--display);font-weight:700;font-size:.8125rem;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none}
.real .more:hover{text-decoration:underline}

/* ---------- 7 Referenzen ---------- */
.refs{padding:var(--gap) 0}
.ref-group{border-top:1px solid var(--ink-3);padding:1.75rem 0;display:grid;gap:.75rem 2.5rem}
@media(min-width:820px){.ref-group{grid-template-columns:14rem minmax(0,1fr)}}
.ref-group h3{font-family:var(--display);font-weight:700;font-size:.75rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--signal);margin:.35rem 0 0}
.ref-group p{margin:0;font-size:1.0625rem;line-height:1.75}
.ref-group .dim{color:var(--muted)}

/* ---------- 8 Testimonials ---------- */
/* Karussell: alle Zitate in einer Rasterzelle, sichtbar ist nur .on. Die Zelle ist so
   hoch wie das laengste Zitat, deshalb springt beim Wechsel nichts. */
.quotes{padding:0 0 var(--gap)}
.quote-stage{display:grid;border-top:1px solid var(--ink-3);margin-top:clamp(1.25rem,3vh,2rem);
  padding-top:clamp(1.5rem,4vh,2.5rem)}
.quote{grid-area:1/1;margin:0;opacity:0;visibility:hidden;
  transition:opacity .7s var(--ease),visibility 0s linear .7s}
.quote.on{opacity:1;visibility:visible;transition:opacity .7s var(--ease),visibility 0s}
.quote blockquote p{margin:0}
.quote blockquote{margin:0;font-family:var(--display);font-weight:700;
  font-size:clamp(1.35rem,3vw,2.25rem);line-height:1.14;letter-spacing:-.02em}
.quote cite{display:block;font-style:normal;font-size:.875rem;color:var(--muted);margin-top:1rem}
.quote-nav{display:flex;align-items:center;gap:.5rem;margin-top:1.5rem}
.quote-nav[hidden]{display:none}
.quote-dot{width:28px;height:28px;padding:0;border:0;background:none;cursor:pointer;position:relative}
.quote-dot::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;
  margin:-4px 0 0 -4px;border-radius:50%;background:var(--ink-3);transition:background .2s var(--ease-micro)}
.quote-dot.on::before{background:var(--signal)}
.quote-dot:hover::before{background:var(--muted)}
.quote-pause{width:28px;height:28px;padding:0;margin-left:.5rem;border:0;background:none;
  cursor:pointer;color:var(--muted);font-size:.75rem;line-height:28px}
.quote-pause::before{content:"\275A\275A"}
.quote-pause.paused::before{content:"\25B6"}
.quote-dot:focus-visible,.quote-pause:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.pending{border:1px dashed var(--signal);padding:1.25rem 1.5rem;color:var(--muted);font-size:.9375rem}
.pending b{color:var(--signal);font-weight:500;display:block;font-family:var(--display);
  font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:.5rem}

/* ---------- 9 Final ---------- */
.final{position:relative;padding:clamp(6rem,18vh,14rem) 0;overflow:hidden;text-align:left}
.final .bg{position:absolute;inset:0}
.final .bg img{width:100%;height:100%;object-fit:cover}
.final::after{content:"";position:absolute;inset:0;background:rgba(11,10,10,.86)}
.final .inner{position:relative;z-index:2}
.final h2{font-size:clamp(2.5rem,9vw,7.5rem)}
.final h2 em{font-style:normal;color:var(--signal)}
.final .name{font-family:var(--display);font-weight:700;font-size:.8125rem;letter-spacing:.34em;
  color:var(--muted);margin:clamp(2rem,5vh,3rem) 0 0}

/* ---------- Fuß ---------- */
.site-footer{border-top:1px solid var(--ink-3);padding:2.5rem 0 4rem;font-size:.8125rem;
  color:var(--muted)}
.site-footer .row{display:flex;flex-wrap:wrap;gap:.75rem 2rem;justify-content:space-between;align-items:baseline}
.site-footer a{text-decoration:none}
.site-footer a:hover{text-decoration:underline}

/* Nur ausserhalb der Produktivumgebung sichtbar (wp_get_environment_type). */
.notice{background:var(--signal);color:var(--ink);font-family:var(--display);font-weight:700;
  font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;padding:.7rem var(--pad)}

/* ---------- Unterseiten Über Mike und Booking (2026-10-07) ---------- */
.sub-hero{padding:clamp(8rem,18vh,11rem) 0 clamp(2.5rem,6vh,4rem)}
.sub-hero h1{font-size:clamp(2.75rem,8vw,7rem);margin-top:1.25rem}
.sub-hero h1 em{font-style:normal;color:var(--signal)}
.sub-lead{font-family:var(--display);font-weight:700;font-size:clamp(1.125rem,1.9vw,1.6rem);
  line-height:1.2;letter-spacing:-.015em;max-width:34ch;margin:clamp(1.5rem,4vh,2.5rem) 0 0}

.about{padding:0 0 var(--gap)}
.about-grid{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media(min-width:820px){.about-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1fr)}
  .about-img{position:sticky;top:2rem}}
.about-img img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:45% 35%}
.about-txt p{color:var(--muted);max-width:60ch;margin:0 0 1.25rem}
.about-txt .lead{font-family:var(--display);font-weight:700;color:var(--paper);
  font-size:clamp(1.25rem,2vw,1.75rem);line-height:1.2;letter-spacing:-.015em;margin-bottom:2rem}

.facts{background:var(--paper);color:var(--ink);padding:var(--gap) 0}
.facts .label{color:var(--muted-ink)}
.facts-list{display:grid;gap:0;margin:clamp(1.5rem,4vh,2.5rem) 0 0}
@media(min-width:760px){.facts-list{grid-template-columns:repeat(3,1fr);column-gap:2.5rem}}
.facts-list div{border-top:1px solid #DDD7D3;padding:1.25rem 0}
.facts-list dt{font-family:var(--display);font-weight:700;font-size:.6875rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted-ink)}
.facts-list dd{margin:.4rem 0 0;font-family:var(--display);font-weight:700;
  font-size:clamp(1.125rem,1.6vw,1.375rem);line-height:1.2}

.press{padding:var(--gap) 0}
.press-txt{font-family:var(--display);font-weight:700;font-size:clamp(1.25rem,2.4vw,2rem);
  line-height:1.2;letter-spacing:-.015em;max-width:40ch;margin:clamp(1.25rem,3vh,2rem) 0 0}

.faq{padding:0 0 var(--gap)}
.faq-list{margin-top:clamp(1.25rem,3vh,2rem);border-bottom:1px solid var(--ink-3)}
.faq details{border-top:1px solid var(--ink-3)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;
  align-items:center;gap:1.5rem;padding:1.35rem 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{margin:0;font-family:var(--display);font-weight:700;
  font-size:clamp(1.125rem,1.8vw,1.5rem);line-height:1.2;letter-spacing:-.01em}
.faq summary::after{content:"+";flex:none;font-family:var(--display);font-weight:700;
  font-size:1.5rem;line-height:1;color:var(--signal);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover h3{color:var(--signal)}
.faq summary:focus-visible{outline:2px solid var(--signal);outline-offset:4px}
.faq details p{margin:0;padding:0 0 1.5rem;color:var(--muted);max-width:68ch}
.faq details a,.about-txt a{color:var(--signal)}

/* ---------- Inhaltsseiten (Impressum, Datenschutz, Unterseiten) ---------- */
.page-body{padding:clamp(4rem,10vh,7rem) 0 var(--gap)}
.page-body h1{font-family:var(--display);font-weight:700;
  font-size:clamp(2.25rem,6vw,4.5rem);line-height:.98;letter-spacing:-.03em;margin:0 0 2rem}
.page-body h2{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,3vw,2.25rem);
  line-height:1.05;letter-spacing:-.02em;margin:3rem 0 1rem}
.page-body p,.page-body li{max-width:62ch}
.page-body a{color:var(--signal)}

/* Mobile ist eigene Dramaturgie, keine Stauchung: der Text ruht unten auf dem Bild,
   der Verlauf kommt von unten statt von der Seite. */
@media(max-width:759px){
  .fmt-txt{min-height:clamp(460px,76vh,660px);justify-content:flex-end;max-width:100%;
    padding-bottom:clamp(2.25rem,6vh,3.5rem)}
  .fmt.portrait .fmt-txt{min-height:clamp(520px,84vh,760px)}
  .fmt-img::after{background:linear-gradient(180deg,rgba(11,10,10,.15) 0%,rgba(11,10,10,.28) 30%,rgba(11,10,10,.95) 76%)}
  .fmt-txt p{max-width:38ch}
  .ctas .btn{flex:1 1 auto;text-align:center;padding-left:1rem;padding-right:1rem}

  /* Hero, 2026-10-07. Das Video ist quer aufgenommen, die obere Haelfte ist dunkle
     Hallendecke. Im Hochformat zeigt cover die volle Bildhoehe - also vor allem Decke.
     Deshalb wird das Video vergroessert und nach oben geschoben: die Buehne steht im
     oberen Drittel, das Publikum laeuft hinter dem Text aus. */
  .hero{min-height:100vh;min-height:100svh}
  .hero video,.hero .fallback{top:-72%;height:165%;bottom:auto;object-position:50% 50%}
  .hero::after{background:linear-gradient(180deg,rgba(11,10,10,.35) 0%,rgba(11,10,10,.05) 22%,rgba(11,10,10,.2) 40%,rgba(11,10,10,.88) 62%,rgba(11,10,10,.96) 100%)}
  /* Name und Rolle fuellen die Breite. 5.5 ist die Breite von "METELKO" in em
     (gemessen 5.39, plus Reserve); 28 dasselbe fuer die Rollenzeile. */
  .hero h1{font-size:calc((100vw - 2 * var(--pad)) / 5.5);line-height:.9}
  .hero .rolle{font-size:min(calc((100vw - 2 * var(--pad)) / 28),1rem);letter-spacing:.18em;margin-top:1.1rem}
  .hero .claim{font-size:1.5rem}

  /* Fliesstext 2px groesser als am Desktop. */
  body{font-size:19px}
  .impact .sub,.ref-group p{font-size:19px}
  .fmt-txt p{font-size:17.5px}

  /* Profil-Icons scrollen mit dem Hero weg, statt ueber dem Text zu liegen. */
  .mm-social-bar{position:absolute}

  /* Anfrage-Knopf: am Handy eine Leiste am unteren Rand statt des senkrechten
     Reiters - der verdeckte rechts den Text. */
  #anchor{top:auto;bottom:0;left:0;right:0;transform:translateY(100%);writing-mode:horizontal-tb;
    text-align:center;padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom))}
  #anchor.on{transform:none}
  .site-footer{padding-bottom:6rem}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:opacity .2s linear}
  #anchor{transition:none}
}

/* ===================================================================
   Blockgerüst
   Die Sektionen bringen ihre Abstände selbst mit. Der Flow-Abstand der
   Blockgruppen würde die Dramaturgie verschieben, deshalb ist er auf der
   Startseite abgeschaltet — auf Inhaltsseiten bleibt er aktiv.
   =================================================================== */
.mm-page .wp-block-group > *{margin-block-start:0}
.mm-page .wp-block-group{margin-block:0}
/* Unterseiten: die Sektionen liegen direkt in <main> und bringen ihre Abstaende selbst mit. */
.mm-sub,.mm-sub > *{margin-block:0}
.hero .wrap{padding:0}
.wp-block-html{margin:0}