/* ══════════════════════════════════════════════════════════════════════════
   MKURTI-UMSETZUNGSSEITE  ·  /mkurti  auf jeder Kundenwebsite
   ──────────────────────────────────────────────────────────────────────────
   Verbindlicher Standard. Das Design ist auf allen Kundenwebsites gleich —
   nur der Abschnitt «Aufgebaut bei …» wechselt, weil dort steht, was bei
   diesem Kunden wirklich läuft.

   Alles ist unter .mkp gescoped und kollidiert mit keinem Kunden-Stylesheet.
   Die Schriften werden vom Kundenprojekt übernommen (--font-head /
   --font-body), sonst greifen Montserrat und Inter als Rückfall.

   Aufbau der Seite:
     .mkp-kasten     Kopf — Leiste, Titel, Porträt (weisses Element)
     .mkp-felder     Kunde · Umfang · Region · Stand (weisses Element)
     .mkp-raster--zwei   «Aufgebaut bei …» — Karten, zweispaltig
     .mkp-raster--breit  «Was wir anbieten» — Karten, vollbreit
     .mkp-kasten--fuss   Unterschrift, Stempel, Knöpfe (weisses Element)

   Eine Fläche, darauf weisse Elemente — keine Box in einer Box.
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── Grundlage ────────────────────────────────────────────────────────── */
.mkp{
  --mkp-mono:"JetBrains Mono","SF Mono",ui-monospace,Menlo,Consolas,monospace;
  --mkp-head:var(--font-head,"Montserrat",system-ui,-apple-system,sans-serif);
  --mkp-body:var(--font-body,"Inter",system-ui,-apple-system,sans-serif);
  --mkp-spring:cubic-bezier(.16,1,.3,1);
  position:relative;
  font-family:var(--mkp-body);
  -webkit-font-smoothing:antialiased;
}
.mkp *,.mkp *::before,.mkp *::after{box-sizing:border-box}
.mkp img{display:block;max-width:100%}
/* Die Grundregeln müssen zwei Dinge gleichzeitig können: schwerer wiegen als
   die Element-Regeln des Kundenprojekts und leichter als jede .mkp-Klasse.

   `:where(.mkp a)` wog null — und verlor damit gegen jedes `a{…}` und
   `h1{…}` im Kunden-Stylesheet. Bei NiroGraphy setzt `h1,h2,h3{color:
   var(--text-main)}` cremeweiss: der Titel stand unsichtbar auf dem hellen
   Papier, und `p{margin:0 0 1rem}` riss überall Lücken in die Felder.

   `.mkp :where(…)` wiegt (0,1,0) — schwerer als jede Element-Regel (0,0,1),
   gleich schwer wie die .mkp-Klassen. Die stehen weiter unten in dieser
   Datei und gewinnen deshalb den Gleichstand. So bleibt der Vollton-Knopf
   farbig (das war die ursprüngliche Falle) und der Block sieht in jedem
   Kundenprojekt gleich aus, egal was dessen Stylesheet global setzt. */
.mkp :where(a){text-decoration:none;color:inherit}
.mkp :where(h1,h2,h3,h4,p,figure,figcaption){
  margin:0;padding:0;color:inherit;
  font-family:inherit;font-size:inherit;font-weight:inherit;
  line-height:inherit;letter-spacing:normal;text-transform:none;
}

/* Einblenden beim Scrollen */
.mkp-auf{opacity:0;transform:translateY(18px)}
.mkp-auf.mkp-da{opacity:1;transform:none;transition:opacity .65s ease,transform .8s var(--mkp-spring)}

/* ══════════════════════════════════════════════════════════════════════════
   UMSETZUNGSSEITE /mkurti — MKurti.ch GmbH
   ──────────────────────────────────────────────────────────────────────────
   Kein Werbelayout: ein Dokument. Kopffelder, Positionen, Unterschrift,
   Stempel. Die Positionen stehen als Karten statt in einer Tabelle —
   zweispaltig beim Kunden, vollbreit im Katalog, überall 20px Abstand.
   Jede Karte trägt links ein Icon, das sich beim Auftauchen zeichnet.
   ══════════════════════════════════════════════════════════════════════════ */
.mkp{
  --pap:#f0eee9;          /* die eine Flaeche — kein Kasten darauf          */
  --feld:#ffffff;         /* nur die Elemente selbst sind weiss             */
  --s:#161614; --lin:#c9c8c3; --lin2:#dedcd7;
  --grau:#6b6a64; --luft:20px;
  background:var(--pap);color:var(--s);
  padding:clamp(28px,4vw,56px) clamp(16px,3.5vw,48px) clamp(40px,5vw,72px);
}
/* Kein Kasten um die Karten: der Inhalt steht direkt auf der Flaeche, hier
   wird nur die Breite gefasst. Ein umschliessendes Blatt haette eine zweite
   Ebene erzeugt — Karten in einer Box in einer Box. */
.mkp-blatt{
  max-width:1040px;margin:0 auto;
  background:none;border:0;box-shadow:none;padding:0;
}

/* ─── Kopfkasten: Leiste und Titelbereich als ein weisses Element ─────── */
.mkp-kasten{
  background:var(--feld);
  border:1px solid var(--lin2);
  box-shadow:0 1px 2px rgba(0,0,0,.045), 0 10px 22px -16px rgba(0,0,0,.22);
  margin-bottom:var(--luft);
}
.mkp-leiste{
  display:flex;align-items:center;gap:11px;
  padding:14px clamp(16px,2.2vw,26px);
  border-bottom:1px solid var(--lin2);
  font-family:var(--mkp-mono);font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--grau);
}
.mkp-mark{width:20px;flex:none;color:var(--s)}
.mkp-leiste .re{margin-left:auto}

/* ─── Kopf mit Porträt ─────────────────────────────────────────────────── */
.mkp-kopf{
  display:grid;grid-template-columns:minmax(0,1fr) clamp(150px,20vw,240px);
  gap:clamp(18px,3vw,34px);align-items:start;
  padding:clamp(20px,3vw,30px) clamp(16px,2.2vw,26px) clamp(20px,3vw,30px);
}
.mkp h1{
  font-family:var(--mkp-head);font-weight:900;text-transform:uppercase;
  font-size:clamp(24px,3.4vw,42px);line-height:1;letter-spacing:-.025em;
}
.mkp h1 span{color:var(--grau)}
.mkp-untertitel{
  font-family:var(--mkp-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--grau);margin-top:10px;
}
.mkp-pass{
  display:flex;flex-direction:column;gap:9px;
  border-left:1px solid var(--lin);   /* der kraeftigere Ton wie urspruenglich */
  padding-left:clamp(16px,2.4vw,28px);
}
/* flex:none ist Pflicht — sonst zieht sich das Bild als Flex-Element auf
   seine natürliche Höhe, während width:100% es schmal staucht. Ergebnis war
   eine 87x360-Box, aus der cover einen senkrechten Streifen schnitt. */
.mkp-pass img{
  flex:none;width:100%;height:auto;aspect-ratio:4/5;
  object-fit:cover;object-position:50% 18%;
  border:1px solid var(--lin2);filter:grayscale(1) contrast(1.04);
}
.mkp-pass-bu{
  font-family:var(--mkp-mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--grau);line-height:1.6;
}

/* ─── Kopffelder ───────────────────────────────────────────────────────── */
.mkp-felder{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--lin2);margin-bottom:var(--luft);
  background:var(--feld);
}
.mkp-feld{padding:13px 16px;border-right:1px solid var(--lin2)}
.mkp-feld:last-child{border-right:0}
.mkp-fk{font-family:var(--mkp-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--grau);margin-bottom:5px}
.mkp-fv{font-family:var(--mkp-head);font-weight:700;font-size:13px;line-height:1.35}

.mkp-text{
  font-size:14.5px;line-height:1.7;max-width:76ch;color:#333330;
  margin-bottom:calc(var(--luft) * 1.6);
}
.mkp-text b{font-weight:600;color:var(--s)}

/* ─── Rubrik — kein Balken, keine Polsterung, schwarz und fett ─────────── */
.mkp-rubrik{
  display:flex;align-items:baseline;gap:12px;
  margin:0 0 var(--luft);padding:0;background:none;border:0;
  font-family:var(--mkp-head);font-weight:800;font-size:13px;
  letter-spacing:.06em;text-transform:uppercase;color:#000;
}
.mkp-rubrik b{font-weight:800;color:#000}
.mkp-rubrik .zahl{
  margin-left:auto;font-family:var(--mkp-mono);font-weight:400;
  font-size:10px;letter-spacing:.12em;color:var(--grau);
}

/* ─── Kartenraster ─────────────────────────────────────────────────────── */
.mkp-raster{display:grid;gap:var(--luft);margin-bottom:calc(var(--luft) * 1.6)}
.mkp-raster--zwei{grid-template-columns:repeat(2,minmax(0,1fr))}
/* Ungerade Anzahl: die letzte Karte nimmt beide Spalten, sonst bliebe
   rechts eine Luecke stehen. Betrifft jeden Kunden mit 3, 5, 7 … Positionen. */
.mkp-raster--zwei > .mkp-karte:last-child:nth-child(odd){grid-column:span 2}
.mkp-raster--breit{grid-template-columns:minmax(0,1fr)}

.mkp-karte{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:16px;align-items:start;
  padding:18px 20px 20px;
  background:var(--feld);
  border:1px solid var(--lin2);
  box-shadow:0 1px 2px rgba(0,0,0,.045), 0 10px 22px -16px rgba(0,0,0,.22);
  transition:box-shadow .28s ease,border-color .28s ease,transform .28s var(--mkp-spring);
}
.mkp-karte:hover{
  border-color:#bdbbb5;
  box-shadow:0 1px 2px rgba(0,0,0,.05), 0 16px 30px -18px rgba(0,0,0,.3);
  transform:translateY(-2px);
}
.mkp-karte:active{transform:translateY(0)}
.mkp-karte:focus-visible{outline:2px solid var(--s);outline-offset:3px}

/* Icon links — Strich, kein Flächen-Icon, passend zum Dokumentcharakter */
.mkp-ic{
  width:42px;height:42px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--lin2);background:var(--pap);
  color:var(--s);
  transition:background .28s ease,border-color .28s ease;
}
.mkp-karte:hover .mkp-ic{background:#eceae4;border-color:#bdbbb5}
.mkp-ic svg{width:22px;height:22px;display:block;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* Zeichnende Icons — als Transition, nicht als CSS-Animation.
   Der Ruhezustand ist das FERTIGE Icon. Erst das Skript setzt die Startklasse
   und nimmt sie im nächsten Bild wieder weg; die Transition zeichnet den
   Strich dann nach. Warum nicht @keyframes: eine pausierte Animation hält
   ihren Startwert fest — im Hintergrundtab oder wenn die Seite gerade nicht
   dargestellt wird, stünde currentTime auf 0 und die Icons blieben
   unsichtbar (nachgemessen). So kann nichts ausfallen, was man sehen müsste.
   --len ist die echte Pfadlänge, vom Skript gesetzt; 90 ist nur der Rückfall. */
.mkp-ic svg > *{
  stroke-dasharray:var(--len,90);
  stroke-dashoffset:0;
  transition:stroke-dashoffset .75s cubic-bezier(.65,0,.35,1);
}
.mkp-ic--start svg > *{stroke-dashoffset:var(--len,90);transition:none}
/* Leichte Staffelung über die Karten, damit es als Bewegung liest
   statt als gleichzeitiges Aufblitzen. */
.mkp-karte:nth-child(2) .mkp-ic svg > *{transition-delay:.06s}
.mkp-karte:nth-child(3) .mkp-ic svg > *{transition-delay:.12s}
.mkp-karte:nth-child(4) .mkp-ic svg > *{transition-delay:.18s}
.mkp-karte:nth-child(5) .mkp-ic svg > *{transition-delay:.24s}
.mkp-karte:nth-child(6) .mkp-ic svg > *{transition-delay:.3s}

.mkp-kkopf{display:flex;align-items:baseline;gap:10px;margin-bottom:7px}
.mkp-pos{font-family:var(--mkp-mono);font-size:10.5px;letter-spacing:.1em;color:var(--grau)}
.mkp-zust{
  margin-left:auto;font-family:var(--mkp-mono);font-size:9.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--grau);
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
}
.mkp-zust i{width:5px;height:5px;background:var(--s);display:inline-block;flex:none}
.mkp-ktitel{
  display:block;font-family:var(--mkp-head);font-weight:800;font-size:15px;
  line-height:1.3;margin-bottom:6px;color:#000;
}
.mkp-ktext{display:block;font-size:13px;line-height:1.6;color:#4f4e49;max-width:64ch}

/* ─── Abschluss ────────────────────────────────────────────────────────── */
/* Im Kasten braucht der Fuss keine eigene Trennlinie mehr — der Rahmen
   des Kastens fasst ihn bereits. */
.mkp-kasten--fuss{margin-bottom:0}
.mkp-fuss{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(20px,3vw,40px);
  padding:clamp(20px,3vw,30px) clamp(16px,2.2vw,26px) 0;
}
.mkp-unterschrift{
  border-top:1px solid var(--s);padding-top:9px;
  font-family:var(--mkp-mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--grau);
}
.mkp-stempel{
  display:inline-block;margin-top:14px;padding:7px 13px;
  border:2px solid var(--s);transform:rotate(-3.5deg);
  font-family:var(--mkp-mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:500;
}
.mkp-cta{display:flex;flex-wrap:wrap;gap:10px;align-content:start}
.mkp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--mkp-head);font-weight:800;font-size:12px;
  letter-spacing:.04em;text-transform:uppercase;
  padding:14px 20px;border:1px solid var(--s);
  transition:background .22s,color .22s,transform .18s var(--mkp-spring),box-shadow .22s ease;
}
.mkp-btn svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;flex:none}
.mkp-btn--voll{background:var(--s);color:var(--feld)}
.mkp-btn--voll:hover{box-shadow:0 10px 22px -14px rgba(0,0,0,.7);transform:translateY(-1px)}
.mkp-btn--leer:hover{background:var(--s);color:var(--feld)}
.mkp-btn:active{transform:scale(.985)}
.mkp-btn:focus-visible{outline:2px solid var(--s);outline-offset:3px}
.mkp-note{
  margin-top:var(--luft);
  padding:0 clamp(16px,2.2vw,26px) clamp(18px,2.4vw,24px);
  font-family:var(--mkp-mono);font-size:10px;color:var(--grau);
}



/* ─── Telefon ──────────────────────────────────────────────────────────── */
@media (max-width:620px){
  /* Telefon: Porträt bleibt neben dem Titel, Karten zweispaltig */
  .mkp{padding:18px 14px 30px;--luft:14px}
  .mkp-leiste{font-size:9.5px;gap:8px;padding:11px 13px}
  .mkp-kopf{grid-template-columns:minmax(0,1fr) 146px;gap:13px;padding:16px 13px}
  .mkp-pass{padding-left:12px}
  .mkp-untertitel{font-size:9.5px}
  .mkp-felder{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mkp-feld{padding:10px 12px}
  .mkp-feld:nth-child(2){border-right:0}
  .mkp-feld:nth-child(1),.mkp-feld:nth-child(2){border-bottom:1px solid var(--lin2)}
  .mkp-text{font-size:13.5px}
  .mkp-rubrik{font-size:11.5px;letter-spacing:.05em}
  /* Positionen bleiben zweispaltig — einspaltig wuchs die Seite auf 3,5
     Bildschirme. Damit der Text in der halben Breite noch atmet, rückt das
     Icon dort über den Text statt daneben. Der Katalog bleibt vollbreit,
     dort steht das Icon weiterhin links. */
  .mkp-raster--zwei{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .mkp-raster--zwei .mkp-karte{grid-template-columns:minmax(0,1fr);gap:10px;padding:13px 12px 15px}
  .mkp-raster--breit .mkp-karte{padding:14px 14px 16px;gap:12px}
  .mkp-ic{width:32px;height:32px}
  .mkp-ic svg{width:17px;height:17px}
  .mkp-raster--zwei .mkp-kkopf{margin-bottom:5px}
  .mkp-raster--zwei .mkp-pos{font-size:9.5px}
  .mkp-ktitel{font-size:13.5px;overflow-wrap:break-word;hyphens:auto}
  .mkp-ktext{font-size:12.5px}
  .mkp-raster--zwei .mkp-ktitel{font-size:12.5px}
  .mkp-raster--zwei .mkp-ktext{font-size:11.5px;line-height:1.5}
  .mkp-fuss{grid-template-columns:1fr;gap:18px;padding:16px 13px 0}
  /* Knöpfe paarweise nebeneinander, der ungerade letzte über die Breite. */
  .mkp-cta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .mkp-btn{min-width:0;width:auto;flex:none;min-height:48px;padding:12px 10px;
           font-size:11.5px;letter-spacing:.03em;gap:6px;text-align:center}
  .mkp-cta > .mkp-btn:last-child:nth-child(odd){grid-column:span 2}

}

/* ══════════════════════════════════════════════════════════════════════════
   BEWEGUNG ZURÜCKNEHMEN
   ══════════════════════════════════════════════════════════════════════════ */
/* Ohne JavaScript wird nie eingeblendet — dann steht alles einfach da. */
@media (scripting:none){
  .mkp-auf{opacity:1;transform:none}
}

@media (prefers-reduced-motion:reduce){
  .mkp-auf{opacity:1;transform:none}
  .mkp-auf.mkp-da{transition:opacity .2s ease}
  /* Icons stehen fertig gezeichnet da, statt sich aufzubauen. */
  .mkp-ic svg > *,.mkp-ic--start svg > *{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
  .mkp-karte,.mkp-ic,.mkp-btn,.mkp-leist a{transition:none}
  .mkp-karte:hover{transform:none}
  .mkp-btn:active{transform:none}
}