/* Formsprache der Personenseite — eine Datei für alle 16 Boxen von /mjk_web.
   Jede Box (`panels/mjk_*.html`) verlinkt sie; der Browser holt sie einmal.
   Die Box füllt `.panel-body` randlos (board.css:251 setzt dort keine Polsterung).

   Nichts wird von aussen geladen: kein Webfont, kein CDN, kein Rahmenwerk. Die
   Seite ist ein Brett (`agent.json: board.layout "spalte"`), aber sie soll wie EINE
   durchlaufende Seite lesen — der Abschnitt §2 räumt dafür die Brett-Hülle weg. */

/* ——— §1 · Die Werte —————————————————————————————————————————————————— */
:root{
  --nacht:#070b18;                    /* Seitengrund */
  --tief:#0b1226;                     /* abgesetzter Abschnitt */
  --karte:rgba(255,255,255,.045);
  --linie:rgba(255,255,255,.10);
  --weiss:#f2f6ff;
  --leise:#93a2c4;
  --signal:#4da3ff;                   /* die EINE Signalfarbe — sonst trägt Weiss */
  --signal-hell:#8fd0ff;

  /* Der Satzspiegel steckt in der POLSTERUNG des Abschnitts, nicht in den Kindern:
     so beginnt jedes Element auf derselben Linie, egal welches Panel es liefert.
     Dieselbe Technik wie `.wb` in `spaces/intecio_web/assets/web.css`. */
  --mk-rand:max(20px, calc((100% - 1180px) / 2));
  --mk-hoch:clamp(64px, 9vw, 140px);
  /* Vorgabe, bis `MK.init()` die Leiste gemessen hat. Sie steht FEST am Fenster,
     also braucht der Abschnitt darunter ihre Höhe als Vorlauf (§6). */
  --mk-nav-h:58px;
  --mk-fluss:16.5px;
}

/* ——— §2 · Die Brett-Hülle verschwindet ———————————————————————————————
   Diese Regeln stehen HIER und nicht in `board.css`: die Datei lädt nur diese
   Seite, jedes andere Brett der Plattform sieht sie nie. `!important` steht nur
   dort, wo `board.js` INLINE-Stile schreibt (Pixel-Lage aus dem Modus `spalte`,
   Grund am `#board`) oder `board.css` selbst mit `!important` arbeitet — dagegen
   kommt eine gewöhnliche Regel nicht an. */
body, body.bg-white{ background:var(--nacht); color:var(--weiss); }
#board{ background-color:var(--nacht) !important; background-image:none; }
.board-wm{ display:none; }          /* Wasserzeichen gehört zur leeren Fläche, hier gibt es keine */

/* EINE Spur über die volle Breite, ohne Fuge: die 16 Boxen sollen aneinander
   stossen, nicht nebeneinander liegen. `fitTiles` (board.js) schreibt feste
   112px-Spuren als Inline-Stil, `board.js` zusätzlich eine Mindesthöhe ans Raster —
   beides muss weg, sonst bleibt unter der letzten Box ein leerer Streifen stehen
   und `align-content:stretch` verteilt den Rest auf alle Zeilen. */
#panel-grid{
  padding:0; gap:0;
  grid-template-columns:minmax(0,1fr) !important; grid-auto-rows:auto !important;
  width:100% !important; min-width:0 !important;
  min-height:0 !important; align-content:start !important;
}
/* Zurück in den Fluss: `placeAt`/`setCustomSize` legen die Panele in PIXELN und
   rechnen die Breite einmal beim Legen aus — ein grösseres Fenster erreicht sie
   danach nie. `position:static` gibt die Box dem Raster zurück, die Höhe kommt
   aus dem Inhalt, und der Rahmen fällt ganz weg. */
#board .panel, #board.noframe .panel{
  position:static !important;
  left:auto !important; top:auto !important; right:auto !important; bottom:auto !important;
  grid-column:1 !important; grid-row:auto !important;
  width:auto !important; height:auto !important; max-height:none !important;
  min-height:0; padding-bottom:0;
  /* DIE Zeile, die die Seite mittig macht. Ohne sie ist die automatische
     Mindestbreite der Box `min-content` — und weil in ihr eine Reihe mit 8 Karten
     steht (`.mk-rail`), sind das 2538px statt 390px. Die Spur des Rasters bleibt
     dabei fensterbreit, die BOX quillt darueber hinaus, und `--mk-rand`
     (max(20px, (100% − 1180px)/2)) rechnet dann gegen 2538 statt gegen 390:
     die Spalte startet bei x≈680 und steht auf dem Handy neben dem Bild.
     `min-width:0` gibt der Box das Fenster als Breite zurueck; die Kartenreihe
     rollt seitwaerts in sich selbst (`.mk-rail{overflow-x:auto}`), wie gedacht. */
  min-width:0 !important; max-width:100% !important;
  border:0; border-radius:0; box-shadow:none; background:transparent;
  /* `overflow:hidden` (board.css:121) würde die Seite in jeder Box abschneiden —
     hier rollt das Brett als Ganzes, nicht die einzelne Box. */
  overflow:visible;
}
#board .panel > .panel-body{ overflow:visible; }
/* Kopfzeile, Fusszeile, Kreuz und die drei Ziehgriffe des Bretts: eine Webseite
   hat keine Boxen, die der Besucher wegräumt oder verschiebt. */
#board .panel > .panel-body > .panel-title,
#board .panel > .p-x, #board .panel .panel-move, #board .panel .panel-resize, #board .panel .ph-x,
#board .panel-foot, #board .pfoot, #board .touch-foot, #board .cmd-foot{ display:none !important; }
/* Chat- und Antwort-Panele: `board.input:false` schliesst die Quelle, hier steht
   nur der Riegel für die Wege, die `board.js` sonst offen lässt. */
#board .panel.home:not(.pinned), #board .panel.home-chat:not(.pinned),
#board .panel.cmd, #board .panel.touch{ display:none !important; }
/* Am Handy macht `board.js` jede Panele zur Vollbildfläche und sperrt dafür das
   Rollen (`.board-maxed`). Hier ist nichts Vollbild — der Strom muss rollen. */
body.board-maxed #board-scroll{ overflow-y:auto !important; }

/* ——— §3 · Der Abschnitt ————————————————————————————————————————————— */
.mk{
  --mk-grund:var(--nacht);
  position:relative; box-sizing:border-box; width:100%;
  padding:var(--mk-hoch) var(--mk-rand);
  background-color:var(--mk-grund);
  /* Feines Raster als Textur: zwei Haarlinien im 72er-Takt, dazu ein Punkt im
     18er-Takt. Als BACKGROUND und nicht als `::before` — ein positioniertes
     Pseudoelement bräuchte einen Stapelkontext, und der würde die feste
     Kopfleiste (§6) unter die späteren Abschnitte legen. */
  background-image:
    linear-gradient(to right,  rgba(255,255,255,.026) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.026) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,.030) 1px, transparent 1px);
  background-size:72px 72px, 72px 72px, 18px 18px;
  color:var(--weiss);
  font:var(--mk-fluss)/1.65 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Der Sprung aus der Kopfleiste landet sonst UNTER ihr (§6, `MK` misst sie). */
  scroll-margin-top:calc(var(--mk-nav-h) + 10px);
}
.mk *{ box-sizing:border-box; }
.mk-dunkel{ --mk-grund:var(--tief); border-block:1px solid var(--linie); }
/* Randlos: der Abschnitt selbst hat keine seitliche Polsterung mehr, seine
   direkten Kinder holen sich den Satzspiegel — so kann ein Hintergrundbild oder
   eine Riesenzeile bis an die Fensterkante laufen, der Text aber nicht. */
.mk-voll{ padding-inline:0; }
.mk-voll > *:not(.mk-nav){ padding-inline:var(--mk-rand); }

/* Sichtbarer Fokus, überall und ohne Ausnahme (Tastaturbedienung). */
.mk :focus-visible, .mk-nav :focus-visible{
  outline:2px solid var(--signal-hell); outline-offset:3px; border-radius:6px;
}

/* ——— §4 · Zwei Sprachen im selben Markup ————————————————————————————
   Jeder Text steht doppelt (`<span class="t-de">…</span><span class="t-en">…</span>`).
   Englisch ist AUS VORGABE aus: so ist schon vor dem ersten JS-Lauf genau eine
   Sprache sichtbar, und nichts blitzt auf. `revert` statt `inline`, damit auch ein
   Block-Element im Sprachpaar seine eigene Darstellung zurückbekommt. */
.t-en{ display:none; }
html[lang="en"] .t-de{ display:none; }
html[lang="en"] .t-en{ display:revert; }

/* ——— §5 · Typografie ———————————————————————————————————————————————— */
.mk-marke{
  display:flex; align-items:center; gap:14px; margin:0 0 20px;
  font-size:12px; font-weight:650; letter-spacing:.2em; text-transform:uppercase;
  color:var(--signal);
}
.mk-marke::after{ content:""; flex:1 1 auto; max-width:120px; height:1px; background:var(--linie); }

.mk-titel{
  margin:0 0 20px; max-width:22ch;
  font-size:clamp(38px, 7vw, 92px); font-weight:700;
  letter-spacing:-.03em; line-height:1.02; color:var(--weiss);
  text-wrap:balance;
}
.mk-titel b, .mk-titel em{ color:var(--signal); font-style:normal; font-weight:inherit; }

.mk-tag{
  margin:0 0 26px; max-width:56ch;
  font-size:clamp(18px, 2.2vw, 23px); line-height:1.45; font-weight:400;
  color:var(--weiss); text-wrap:pretty;
}
.mk-text{ margin:0 0 16px; max-width:68ch; color:var(--leise); text-wrap:pretty; }
.mk-text:last-child{ margin-bottom:0; }
.mk-text b, .mk-text strong{ color:var(--weiss); font-weight:650; }
.mk-text a{ color:var(--signal-hell); text-underline-offset:3px; }
.mk-leise{ margin:0; max-width:68ch; font-size:13.5px; line-height:1.55; color:var(--leise); }

/* Eine einzige Aussage, so gross wie der Schirm es hergibt. `anywhere` bricht nur
   dort, wo es ohne Umbruch überliefe — bei 11vw und 360px Schirm ist das der Fall. */
/* Bilder ausserhalb von Hero und Wand — Cover, Logos. Die Panels geben die
   Wunschmasse als Attribut mit; hier steht nur die Schranke fuer schmale Fenster. */
.mk img{ max-width:100%; height:auto; }

/* Beitragsbild im Strom — feste Bildflaeche, damit die Wand beim Nachladen nicht springt. */
.mk-wand-stueck > img:first-child{
  width:100%; aspect-ratio:16/9; object-fit:cover;
  border-radius:8px; margin:0 0 16px; background:var(--tief);
}

.mk-gross + *{ margin-top:clamp(20px, 3vw, 34px); }
.mk-gross{
  margin:0; font-size:clamp(40px, 11vw, 150px); font-weight:700;
  letter-spacing:-.04em; line-height:.96; color:var(--weiss);
  overflow-wrap:anywhere; hyphens:none;
}
.mk-gross b, .mk-gross em{ color:var(--signal); font-style:normal; font-weight:inherit; }

/* ——— §6 · Kopfleiste ————————————————————————————————————————————————
   FEST am Fenster, nicht klebend: `.mk-nav` steckt in irgendeiner der 16 Boxen,
   und `position:sticky` würde nur innerhalb DIESER Box halten. Den Vorlauf, den
   sie dem Abschnitt darunter wegnimmt, gibt die `:has()`-Regel zurück. */
.mk-nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; gap:16px; height:var(--mk-nav-h);
  padding:0 max(14px, calc((100% - 1180px) / 2));
  background:rgba(7,11,24,.78);
  -webkit-backdrop-filter:blur(14px) saturate(150%); backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid var(--linie);
  font:14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color:var(--weiss);
}
.mk:has(> .mk-nav){ padding-top:calc(var(--mk-hoch) + var(--mk-nav-h)); }
.panel-body:has(> .mk-nav){ min-height:var(--mk-nav-h); }
.mk-nav-name{
  flex:0 0 auto; font-size:15px; font-weight:700; letter-spacing:-.01em;
  color:var(--weiss); text-decoration:none; white-space:nowrap;
}
.mk-nav-links{
  display:flex; align-items:center; gap:2px; margin:0 auto; min-width:0;
  overflow-x:auto; scrollbar-width:none;
}
.mk-nav-links::-webkit-scrollbar{ display:none; }
.mk-nav a[data-ziel]{
  padding:7px 11px; border-radius:8px; font-size:13px; white-space:nowrap;
  color:var(--leise); text-decoration:none; transition:color .18s ease, background-color .18s ease;
}
.mk-nav a[data-ziel]:hover{ color:var(--weiss); }
.mk-nav a[data-ziel].ist-an{ color:var(--signal-hell); background:rgba(77,163,255,.13); }
.mk-sprache{
  flex:0 0 auto; appearance:none; cursor:pointer; font:inherit; font-size:12px; font-weight:650;
  letter-spacing:.08em; padding:6px 10px; border-radius:8px;
  border:1px solid var(--linie); background:transparent; color:var(--leise);
}
.mk-sprache:hover{ color:var(--weiss); border-color:rgba(255,255,255,.26); }
.mk-cta{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:7px;
  padding:8px 16px; border-radius:999px; font-size:13px; font-weight:650;
  background:var(--signal); border:1px solid var(--signal); color:#04102a;
  text-decoration:none; white-space:nowrap; transition:background-color .18s ease;
}
.mk-cta:hover{ background:var(--signal-hell); border-color:var(--signal-hell); }

/* ——— §7 · Hero ——————————————————————————————————————————————————————
   Lage explizit, nicht aus der Markup-Reihenfolge: das Porträt steht rechts, auch
   wenn das Panel es zuerst schreibt. */
.mk-hero{
  position:relative; display:grid; align-items:center;
  grid-template-columns:minmax(0,1fr) auto; gap:clamp(28px, 4vw, 64px);
  min-height:min(86vh, 840px);
  padding-block:clamp(80px, 11vw, 150px);
}
.mk-hero-text{ grid-column:1; grid-row:1; min-width:0; }
.mk-hero-bild{
  grid-column:2; grid-row:1; justify-self:end;
  /* Die Quelle ist 500×500 — auf 320px verkleinert bleibt sie scharf. Grösser
     gezogen würde sie weich, darum die harte Obergrenze. */
  width:min(320px, 62vw); aspect-ratio:1; overflow:hidden; border-radius:50%;
  border:1px solid var(--linie);
  box-shadow:0 0 0 9px rgba(77,163,255,.06), 0 30px 80px rgba(0,0,0,.55);
}
.mk-hero-bild img{ display:block; width:100%; height:100%; object-fit:cover; }
/* Hintergrundfilm: stark abgedunkelt, er trägt Stimmung und keinen Inhalt. Liegt
   im Polsterkasten des Heros, läuft also bis an die Fensterkante. */
.mk-hero-video{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.mk-hero-video video, .mk-hero-video img{
  width:100%; height:100%; object-fit:cover; opacity:.22; filter:saturate(.5) contrast(1.05);
}
.mk-hero-video::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(7,11,24,.55) 0%, rgba(7,11,24,.84) 58%, var(--nacht) 100%);
}
.mk-hero > .mk-hero-text, .mk-hero > .mk-hero-bild{ position:relative; z-index:1; }

/* Wortwechsler: die Kinder liegen übereinander, damit nichts springt. Vor dem
   ersten JS-Lauf steht das erste Wort — `MK` setzt `data-mk-worte`, und ab dann
   entscheidet allein `.ist-da`. */
.mk-worte{ position:relative; display:block; height:1.12em; overflow:hidden; }
.mk-wort{
  position:absolute; left:0; top:0; white-space:nowrap; color:var(--signal);
  opacity:0; transform:translateY(.34em);
  transition:opacity .45s ease, transform .45s ease;
}
.mk-wort.ist-da{ opacity:1; transform:none; }
.mk-worte:not([data-mk-worte]) > :first-child{ opacity:1; transform:none; }

/* ——— §8 · Karten, Kacheln, Schiene ————————————————————————————————— */
.mk-karten{
  display:grid; gap:14px; margin:30px 0 0;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
}
.mk-karte, .mk-rail-karte, .mk-wand-stueck{
  display:flex; flex-direction:column; gap:10px; padding:24px;
  background:var(--karte); border:1px solid var(--linie); border-radius:14px;
  transition:border-color .2s ease, background-color .2s ease, transform .2s ease;
}
.mk-karte:hover, .mk-rail-karte:hover, .mk-wand-stueck:hover{
  border-color:rgba(77,163,255,.45); background:rgba(255,255,255,.065);
}
.mk-karte-kopf{
  margin:0; font-size:19px; font-weight:650; line-height:1.25;
  letter-spacing:-.01em; color:var(--weiss);
}
.mk-karte-text{ margin:0; flex:1 1 auto; font-size:15px; line-height:1.6; color:var(--leise); }
.mk-karte-fuss{
  margin:auto 0 0; padding-top:12px; border-top:1px solid var(--linie);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:12px; font-weight:650; letter-spacing:.1em; text-transform:uppercase;
  color:var(--signal);
}

/* Schiene: eine Reihe, die seitwärts rollt und einrastet. Der Verlauf an beiden
   Rändern ist eine Maske am Inhalt — ein Pseudoelement würde mitrollen. Die
   Breiten `--mk-fl`/`--mk-fr` schaltet `MK` über `.mk-links`/`.mk-rechts`: am
   Anfang der Reihe soll links NICHTS verblassen, sonst wirkt es abgeschnitten. */
.mk-rail{
  --mk-fl:0px; --mk-fr:0px;
  display:flex; gap:14px; margin:30px 0 0; padding:4px 0 16px;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 var(--mk-fl), #000 calc(100% - var(--mk-fr)), transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 var(--mk-fl), #000 calc(100% - var(--mk-fr)), transparent 100%);
}
.mk-rail::-webkit-scrollbar{ display:none; }
.mk-rail.mk-links{ --mk-fl:34px; }
.mk-rail.mk-rechts{ --mk-fr:34px; }
.mk-rail-karte{ flex:0 0 clamp(240px, 76vw, 340px); scroll-snap-align:start; }
/* Während der Ziehgeste darf das Einrasten nicht gegen die Maus arbeiten. */
.mk-rail.mk-zieht{ scroll-snap-type:none; cursor:grabbing; user-select:none; }
.mk-rail-links, .mk-rail-rechts{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%; cursor:pointer;
  border:1px solid var(--linie); background:transparent; color:var(--weiss);
  font:inherit; font-size:17px; line-height:1;
  transition:border-color .18s ease, color .18s ease, opacity .18s ease;
}
.mk-rail-links:hover, .mk-rail-rechts:hover{ border-color:var(--signal); color:var(--signal-hell); }
.mk-rail-links[disabled], .mk-rail-rechts[disabled]{ opacity:.28; cursor:default; }
.mk-rail-links[hidden], .mk-rail-rechts[hidden]{ display:none; }

/* Zahlenkacheln: der Trennstrich ist die Fuge selbst (1px Abstand auf einer
   Linienfläche) — feiner als ein Rahmen je Kachel. */
.mk-kacheln{
  display:grid; gap:1px; margin:30px 0 0;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  background:var(--linie); border:1px solid var(--linie); border-radius:14px; overflow:hidden;
}
.mk-kachel{
  display:flex; flex-direction:column; gap:7px; padding:26px 22px;
  background:var(--mk-grund);
}
.mk-wert{
  font-size:clamp(34px, 5vw, 58px); font-weight:700; line-height:1;
  letter-spacing:-.03em; color:var(--weiss); font-variant-numeric:tabular-nums;
}
.mk-label{ font-size:12.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--leise); }

/* Quellenchip — jede belegte Behauptung trägt ihn. Der Punkt IST das Symbol. */
.mk-quelle{
  display:inline-flex; align-items:center; gap:7px; max-width:100%;
  /* Der Text ist ein anonymes Flex-Kind — seine Mindestbreite ist `min-content`,
     und eine ISBN ohne Leerzeichen ist damit breiter als ein Handy. `anywhere`
     (nicht `break-word`) senkt die MINDESTBREITE selbst, nicht nur den Umbruch. */
  flex-wrap:wrap; overflow-wrap:anywhere;
  margin-top:auto; padding:3px 10px; border-radius:999px;
  border:1px solid var(--linie); background:transparent;
  font-size:11.5px; line-height:1.45; color:var(--leise); text-decoration:none;
  transition:color .18s ease, border-color .18s ease;
}
.mk-quelle::before{
  content:""; flex:0 0 auto; width:6px; height:6px; border-radius:50%; background:var(--signal);
}
a.mk-quelle:hover{ color:var(--weiss); border-color:var(--signal); }

/* ——— §9 · Zeitleiste ————————————————————————————————————————————————
   Die Linie liegt am Abschnitt, der Punkt am Eintrag; sein Ring in Grundfarbe
   deckt die Linie ab, damit sie nicht durch den Punkt läuft. */
.mk-zeit{ position:relative; margin:34px 0 0; padding:0 0 0 30px; list-style:none; }
.mk-zeit::before{
  content:""; position:absolute; left:5px; top:8px; bottom:8px; width:1px; background:var(--linie);
}
.mk-zeit-punkt{ position:relative; padding:0 0 30px; }
.mk-zeit-punkt:last-child{ padding-bottom:0; }
.mk-zeit-punkt::before{
  content:""; position:absolute; left:-30px; top:7px; width:11px; height:11px; border-radius:50%;
  background:var(--mk-grund); border:2px solid var(--signal);
  box-shadow:0 0 0 4px var(--mk-grund);
}
.mk-zeit-jahr{
  display:block; margin:0 0 4px;
  font-size:12px; font-weight:650; letter-spacing:.14em; text-transform:uppercase; color:var(--signal);
  font-variant-numeric:tabular-nums;
}
.mk-zeit-kopf{ margin:0 0 6px; font-size:18px; font-weight:650; letter-spacing:-.01em; color:var(--weiss); }
.mk-zeit-text{ margin:0; max-width:68ch; font-size:15px; line-height:1.6; color:var(--leise); }

/* ——— §10 · Filter und Wand ——————————————————————————————————————————— */
.mk-filter{ display:flex; flex-wrap:wrap; gap:8px; margin:26px 0 0; }
.mk-filter-knopf{
  appearance:none; cursor:pointer; font:inherit; font-size:13px;
  padding:8px 15px; border-radius:999px;
  border:1px solid var(--linie); background:transparent; color:var(--leise);
  transition:color .18s ease, background-color .18s ease, border-color .18s ease;
}
.mk-filter-knopf:hover{ color:var(--weiss); border-color:rgba(255,255,255,.26); }
.mk-filter-knopf.ist-an{
  background:var(--signal); border-color:var(--signal); color:#04102a; font-weight:650;
}
.mk-wand{
  display:grid; gap:14px; margin:22px 0 0;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
}
/* Schlägt die Anzeigeart der Karte (`display:flex`) — `hidden` allein täte es nicht. */
.mk-wand-stueck[hidden]{ display:none; }
.mk-wand-stueck img, .mk-wand-stueck iframe, .mk-wand-stueck video{
  display:block; width:100%; max-width:100%; height:auto; border:0; border-radius:8px;
  background:var(--tief);
}
.mk-wand-stueck iframe{ aspect-ratio:16/9; height:auto; }

/* Knopfreihe — Kanäle, Kontaktwege. Nicht .mk-filter: die fasst das JS an. */
.mk-reihe{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }

.mk-btn-geist[data-mehr], [data-mehr]{ margin:22px auto 0; display:flex; width:fit-content; }
[data-mehr][hidden]{ display:none; }

/* ——— §11 · Knöpfe ————————————————————————————————————————————————— */
.mk-btn, .mk-btn-geist{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 24px; border-radius:999px; cursor:pointer;
  font:inherit; font-size:15px; font-weight:650; text-decoration:none;
  transition:background-color .18s ease, border-color .18s ease, color .18s ease;
}
.mk-btn{ background:var(--signal); border:1px solid var(--signal); color:#04102a; }
.mk-btn:hover{ background:var(--signal-hell); border-color:var(--signal-hell); }
.mk-btn-geist{ background:transparent; border:1px solid var(--linie); color:var(--weiss); }
.mk-btn-geist:hover{ border-color:var(--signal); color:var(--signal-hell); background:rgba(77,163,255,.08); }

/* ——— §12 · Erscheinen beim Hereinscrollen —————————————————————————————
   Nur wenn das Skript wirklich läuft (`html.mk-js`, gesetzt beim Auswerten von
   `mjk.js`) wird überhaupt etwas versteckt — sonst bliebe die Seite bei kaputtem
   JS leer. Bewegt wird nur `transform`/`opacity`, das Layout springt nicht. */
.mk-auf{ transition:opacity .6s ease, transform .6s ease; }
html.mk-js .mk-auf{ opacity:0; transform:translateY(14px); }
html.mk-js .mk-auf.ist-da{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  html.mk-js .mk-auf{ opacity:1; transform:none; }
}

/* ——— §13 · Schmale Schirme ——————————————————————————————————————————— */
@media (max-width:900px){
  /* Porträt zuerst, Text darunter — die Lage steht explizit (§7). */
  .mk-hero{ grid-template-columns:minmax(0,1fr); min-height:0; }
  .mk-hero-bild{ grid-column:1; grid-row:1; justify-self:start; }
  .mk-hero-text{ grid-column:1; grid-row:2; }
}
@media (max-width:860px){
  /* Die Sprunglinks fallen weg: Name, Sprache und CTA müssen bleiben, die Liste
     nicht — die Seite rollt ohnehin durch. */
  .mk-nav-links{ display:none; }
}
@media (max-width:700px){
  /* Die Schiene ist hier eine Wischfläche; Knöpfe daneben wären Fingerfallen. */
  .mk-rail-links, .mk-rail-rechts{ display:none; }
  .mk-rail-karte{ flex-basis:min(300px, 82vw); }
}
@media (max-width:520px){
  :root{ --mk-hoch:clamp(48px, 13vw, 84px); --mk-fluss:16px; }
  .mk-karte, .mk-rail-karte, .mk-wand-stueck{ padding:20px; }
  .mk-kachel{ padding:22px 18px; }
  .mk-marke::after{ display:none; }
}