/* ══════════════════════════════════════════════════════════════════════════
   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.

   Neugestaltung 23.10.2026 im Look von mkurti.ch 4.0 (Farben aus
   MKurti.ch 4.0/Website/src/assets/css/system.css): Papier, Tinte, Orange als
   Handlung, Tanne als Fläche, Bereichsfarben als Punkte. Vorherige Fassung in
   standard/archiv/2026-10-23-vor-neugestaltung/.

   Alles ist unter .mkp gescoped und kollidiert mit keinem Kunden-Stylesheet.
   Schriften kommen vom Kundenprojekt (--font-head, --font-body, dazu seit
   23.10.2026 --font-head-weight), sonst greifen Montserrat und Inter.

   Aufbau:
     .mkp-buehne     grünes Feld (Titel, Lead, Unterschrift) neben dem Porträt
     .mkp-daten      Kunde · Umfang · Region · Stand · Seit
     .mkp-liste      «Aufgebaut bei …», Zeilen, zweispaltig ab 960 px
     .mkp-katalog    «Was ich sonst anbiete», Kacheln
     .mkp-schluss    Slogan, Knöpfe, Vermerk
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── Grundlage ────────────────────────────────────────────────────────── */
.mkp{
  --mkp-papier:#fbfaf6;
  --mkp-papier-2:#f2eee6;
  --mkp-karte:#fffefb;
  --mkp-linie:#ddd5c8;
  --mkp-linie-2:#ebe5da;
  --mkp-tinte:#171615;
  --mkp-grau:#635c53;
  --mkp-orange:#d97a33;
  --mkp-orange-hover:#e3873f;
  --mkp-orange-tief:#9e551a;
  --mkp-ocker:#e3a92f;
  --mkp-tanne:#2f5a46;
  --mkp-tanne-tief:#264a3a;
  --mkp-bordeaux:#6e1f1a;
  --mkp-creme:#f3e9dc;
  --mkp-gold:#ecbd66;
  --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-hg:var(--font-head-weight,800);
  --mkp-r:22px;
  --mkp-r-k:14px;
  --mkp-spring:cubic-bezier(.16,1,.3,1);
  --mkp-ease:cubic-bezier(.23,1,.32,1);
  position:relative;
  background:var(--mkp-papier);
  color:var(--mkp-tinte);
  font-family:var(--mkp-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding-block:clamp(20px,4vw,56px) clamp(40px,7vw,96px);
}
.mkp *,.mkp *::before,.mkp *::after{box-sizing:border-box}
.mkp img{display:block;max-width:100%}
/* Die Grundregeln müssen schwerer wiegen als die Element-Regeln des
   Kundenprojekts und leichter als jede .mkp-Klasse. `.mkp :where(…)` wiegt
   (0,1,0): schwerer als `h1{…}` oder `p{…}` (0,0,1), gleich schwer wie die
   .mkp-Klassen, die weiter unten stehen und den Gleichstand gewinnen.
   `:where(.mkp a)` wog null und verlor bei NiroGraphy gegen jedes `h1{…}`. */
.mkp :where(a){text-decoration:none;color:inherit}
.mkp :where(h1,h2,h3,h4,p,figure,figcaption,dl,dt,dd,ol,ul,li){
  margin:0;padding:0;font:inherit;color:inherit;letter-spacing:normal;text-transform:none;
}
.mkp :where(ol,ul){list-style:none}
.mkp :where(b,strong){font-weight:inherit}

.mkp-innen{max-width:1240px;margin:0 auto;padding-inline:clamp(16px,4vw,40px);display:grid;gap:clamp(40px,6vw,80px)}

/* Einblenden: Startzustand nur, solange das Skript wartet (.mkp-wartet).
   Ohne Skript und bis es läuft, ist alles sichtbar. */
.mkp-wartet .mkp-auf:not(.mkp-da){opacity:0;transform:translateY(18px)}
.mkp-auf.mkp-da{opacity:1;transform:none;transition:opacity .65s ease,transform .8s var(--mkp-spring)}

/* ─── Bühne: grünes Feld und Porträt ───────────────────────────────────── */
.mkp-buehne{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);gap:12px;align-items:stretch}
.mkp-tafel{
  position:relative;overflow:hidden;
  background:var(--mkp-tanne);color:var(--mkp-creme);
  border-radius:var(--mkp-r);
  padding:clamp(24px,4vw,56px);
  display:flex;flex-direction:column;gap:clamp(18px,2.4vw,28px);
}
/* Ein grosses, leises M im Feld: die Marke als Fläche. Als Element im Markup,
   nicht als Maske mit data:-Adresse, die eine strenge CSP (img-src 'self') sperrt. */
.mkp-wasserzeichen{position:absolute;right:-5%;bottom:-16%;width:50%;color:var(--mkp-creme);opacity:.06;pointer-events:none}
.mkp-wasserzeichen svg{width:100%;height:auto;display:block}
.mkp-tafel > :not(.mkp-wasserzeichen){position:relative}
.mkp-kicker{display:flex;align-items:center;gap:10px;font:500 .78rem/1.3 var(--mkp-mono);letter-spacing:.06em;text-transform:uppercase;color:rgba(243,233,220,.86)}
.mkp-mark{display:inline-flex;width:22px;color:var(--mkp-creme)}
.mkp-mark svg{width:100%;height:auto;display:block}
.mkp-tafel h1{
  font-family:var(--mkp-head);font-weight:var(--mkp-hg);
  font-size:clamp(2.3rem,1.2rem + 4.2vw,4.6rem);line-height:1.02;letter-spacing:-.02em;
  color:var(--mkp-creme);text-wrap:balance;margin-top:auto;
}
.mkp-tafel h1 span{color:var(--mkp-gold)}
.mkp-lead{font-size:clamp(1.02rem,.96rem + .3vw,1.18rem);line-height:1.6;color:rgba(243,233,220,.92);max-width:34em}
.mkp-sig{display:flex;flex-direction:column;gap:2px;padding-top:clamp(14px,2vw,22px);border-top:1px solid rgba(243,233,220,.22);font-size:.95rem;line-height:1.35}
.mkp-sig b{font-family:var(--mkp-head);font-weight:var(--mkp-hg);font-size:1.08rem;color:var(--mkp-creme)}
.mkp-sig span{color:rgba(243,233,220,.78)}
.mkp-sig br{display:none}

.mkp-bild{position:relative;border-radius:var(--mkp-r);overflow:hidden;background:var(--mkp-papier-2);min-height:100%}
.mkp-bild img{width:100%;height:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 18%}
.mkp-marke{
  position:absolute;left:14px;bottom:14px;
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 14px 9px 12px;border-radius:999px;
  background:rgba(255,254,251,.94);color:var(--mkp-tinte);
  font:600 .82rem/1 var(--mkp-body);
  box-shadow:0 8px 24px rgba(23,22,21,.12);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.mkp-marke i,.mkp-status i{position:relative;display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--mkp-tanne);flex:none}
.mkp-marke i::after,.mkp-status[data-zustand="live"] i::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1.5px solid var(--mkp-tanne);opacity:0;
  animation:mkp-puls 2.4s var(--mkp-ease) infinite;
}
@keyframes mkp-puls{0%{transform:scale(.6);opacity:.7}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}

/* ─── Eckdaten ─────────────────────────────────────────────────────────── */
.mkp-daten{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border-top:1.5px solid var(--mkp-tinte)}
.mkp-daten div{padding:14px 18px 0 0}
.mkp-daten dt{font:500 .72rem/1.3 var(--mkp-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mkp-grau)}
.mkp-daten dd{margin-top:6px;font-weight:600;font-size:1rem;line-height:1.35;color:var(--mkp-tinte)}

/* ─── Abschnitte ───────────────────────────────────────────────────────── */
.mkp-abschnitt{display:grid;gap:clamp(18px,2.4vw,28px)}
.mkp-titelzeile{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.mkp-titelzeile h2{
  font-family:var(--mkp-head);font-weight:var(--mkp-hg);
  font-size:clamp(1.7rem,1.1rem + 2.2vw,2.8rem);line-height:1.05;letter-spacing:-.02em;text-wrap:balance;
}
.mkp-titelzeile h2 b{color:var(--mkp-orange-tief)}
.mkp-zahl{font:500 .78rem/1.3 var(--mkp-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mkp-grau)}
.mkp-zahl b{font-family:var(--mkp-head);font-weight:var(--mkp-hg);font-size:1.5rem;letter-spacing:-.01em;color:var(--mkp-tinte);margin-right:4px}

/* Bereichsfarbe je Zeile und Kachel */
[data-bereich="web"]{--mkp-b:var(--mkp-orange)}
[data-bereich="marke"]{--mkp-b:var(--mkp-bordeaux)}
[data-bereich="ai"]{--mkp-b:var(--mkp-tanne)}

/* «Aufgebaut bei …»: Zeilen wie die Leistungsliste auf mkurti.ch 4.0 */
.mkp-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,56px);border-top:1px solid var(--mkp-tinte)}
.mkp-liste li{border-bottom:1px solid var(--mkp-linie)}
.mkp-zeile{
  position:relative;display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;
  grid-template-areas:"nr ic inhalt pfeil" "nr ic status pfeil";
  column-gap:16px;row-gap:10px;align-items:start;
  padding:22px 6px 22px 0;
  transition:background-color .2s ease;
}
.mkp-nr{grid-area:nr;font:500 .8rem/1 var(--mkp-mono);color:var(--mkp-grau);padding-top:12px;min-width:2ch}
.mkp-zeile .mkp-ic{grid-area:ic}
.mkp-zinhalt{grid-area:inhalt;display:grid;gap:5px;min-width:0}
.mkp-ztitel{font-family:var(--mkp-head);font-weight:var(--mkp-hg);font-size:1.18rem;line-height:1.2;letter-spacing:-.01em;color:var(--mkp-tinte)}
.mkp-ztext{font-size:.95rem;line-height:1.55;color:var(--mkp-grau)}
.mkp-status{grid-area:status;display:inline-flex;align-items:center;gap:8px;font:500 .74rem/1 var(--mkp-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mkp-grau)}
.mkp-status[data-zustand="bereit"] i{background:var(--mkp-orange)}
.mkp-status[data-zustand="arbeit"] i{background:transparent;border:1.5px solid var(--mkp-ocker)}
.mkp-pfeil{grid-area:pfeil;width:22px;height:22px;margin-top:10px;color:var(--mkp-tinte);transition:transform .25s var(--mkp-ease),color .2s ease}
.mkp-pfeil svg,.mkp-btn svg,.mkp-anfrage svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){
  .mkp-zeile:hover .mkp-pfeil{transform:translate(3px,-3px);color:var(--mkp-orange-tief)}
  .mkp-zeile:hover .mkp-ztitel{text-decoration:underline;text-decoration-color:var(--mkp-b);text-decoration-thickness:2px;text-underline-offset:4px}
}

/* Strich-Icons in einem Kreis in der Bereichsfarbe */
.mkp-ic{
  display:grid;place-items:center;flex:none;
  width:44px;height:44px;border-radius:50%;
  background:color-mix(in srgb,var(--mkp-b,var(--mkp-orange)) 12%,transparent);
  color:var(--mkp-b,var(--mkp-orange));
}
.mkp-ic svg{width:21px;height:21px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* Zeichnende Icons: Ruhezustand ist fertig gezeichnet. Nur .mkp-ic--start
   (setzt das Skript, ausser was schon im Bild steht) versteckt den Strich. */
.mkp-ic svg > *{stroke-dasharray:var(--len,90);stroke-dashoffset:0;transition:stroke-dashoffset 1.1s var(--mkp-ease)}
.mkp-ic--start svg > *{stroke-dashoffset:var(--len,90);transition:none}
.mkp-liste li:nth-child(2) .mkp-ic svg > *,.mkp-katalog li:nth-child(2) .mkp-ic svg > *{transition-delay:.06s}
.mkp-liste li:nth-child(3) .mkp-ic svg > *,.mkp-katalog li:nth-child(3) .mkp-ic svg > *{transition-delay:.12s}
.mkp-liste li:nth-child(4) .mkp-ic svg > *,.mkp-katalog li:nth-child(4) .mkp-ic svg > *{transition-delay:.18s}
.mkp-liste li:nth-child(5) .mkp-ic svg > *,.mkp-katalog li:nth-child(5) .mkp-ic svg > *{transition-delay:.24s}
.mkp-liste li:nth-child(6) .mkp-ic svg > *{transition-delay:.3s}

/* ─── Katalog ──────────────────────────────────────────────────────────── */
.mkp-abschnitt--katalog{background:var(--mkp-papier-2);border-radius:var(--mkp-r);padding:clamp(22px,4vw,48px)}
.mkp-katalog{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.mkp-leistung{
  height:100%;display:flex;flex-direction:column;gap:10px;
  background:var(--mkp-karte);border:1px solid var(--mkp-linie-2);border-radius:var(--mkp-r-k);
  padding:20px 18px 18px;
  transition:border-color .2s ease,transform .3s var(--mkp-ease),box-shadow .3s var(--mkp-ease);
}
.mkp-leistung .mkp-ic{margin-bottom:6px}
/* Der Katalog ist Wort für Wort fest («Geschäftsausstattung»): in schmalen Kacheln trennt
   der Browser nach der Sprache der Seite, statt dass ein langes Wort über den Rand läuft. */
.mkp-ltitel,.mkp-ltext,.mkp-ztitel,.mkp-ztext{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
.mkp-ltitel{font-family:var(--mkp-head);font-weight:var(--mkp-hg);font-size:1.05rem;line-height:1.2;letter-spacing:-.01em}
.mkp-ltext{font-size:.9rem;line-height:1.5;color:var(--mkp-grau);flex:1}
.mkp-anfrage{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font:600 .82rem/1 var(--mkp-body);color:var(--mkp-orange-tief)}
.mkp-anfrage svg{width:15px;height:15px}
@media (hover:hover){
  .mkp-leistung:hover{border-color:var(--mkp-b);transform:translateY(-3px);box-shadow:0 14px 30px rgba(23,22,21,.08)}
}

/* ─── Schluss ──────────────────────────────────────────────────────────── */
.mkp-schluss{display:grid;gap:clamp(20px,3vw,32px);justify-items:start;padding-top:clamp(8px,2vw,16px);border-top:1px solid var(--mkp-tinte)}
.mkp-slogan{
  font-family:var(--mkp-head);font-weight:var(--mkp-hg);
  font-size:clamp(2.2rem,1.1rem + 4.6vw,5rem);line-height:1;letter-spacing:-.025em;text-wrap:balance;
  padding-top:clamp(20px,3vw,36px);
}
.mkp-slogan span{color:var(--mkp-orange-tief)}
.mkp-knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.mkp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;
  padding:0 24px;border-radius:999px;font:600 .98rem/1 var(--mkp-body);
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .2s var(--mkp-ease);
}
.mkp-btn svg{width:16px;height:16px}
.mkp-btn--voll{background:var(--mkp-orange);color:var(--mkp-tinte)}
.mkp-btn--rahmen{border:1.5px solid var(--mkp-tinte);color:var(--mkp-tinte)}
.mkp-btn--text{padding-inline:10px;color:var(--mkp-grau);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--mkp-linie)}
@media (hover:hover){
  .mkp-btn--voll:hover{background:var(--mkp-orange-hover)}
  .mkp-btn--rahmen:hover{background:var(--mkp-tinte);color:var(--mkp-papier)}
  .mkp-btn--text:hover{color:var(--mkp-tinte)}
}
.mkp-btn:active{transform:scale(.98)}
.mkp a:focus-visible{outline:2px solid var(--mkp-orange-tief);outline-offset:3px;border-radius:6px}
.mkp-note{font:400 .74rem/1.4 var(--mkp-mono);color:var(--mkp-grau)}

/* ─── Breiten ──────────────────────────────────────────────────────────── */
@media (max-width:1100px){
  .mkp-katalog{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:960px){
  .mkp-liste{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:820px){
  .mkp-buehne{grid-template-columns:minmax(0,1fr)}
  .mkp-bild{order:-1;min-height:0}
  .mkp-bild img{aspect-ratio:5/4;max-height:420px;object-position:50% 22%}
  .mkp-tafel h1{margin-top:0}
  .mkp-wasserzeichen{width:62%;bottom:-22%}
}
/* Telefon: Kacheln zweispaltig, Knopfpaar nebeneinander (mobile-kompakt.md) */
@media (max-width:620px){
  .mkp{font-size:15px}
  .mkp-katalog{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .mkp-katalog li:last-child:nth-child(odd){grid-column:span 2}
  .mkp-leistung{padding:16px 14px 14px;gap:8px}
  .mkp-ic{width:38px;height:38px}
  .mkp-ic svg{width:18px;height:18px}
  .mkp-zeile{column-gap:12px;padding:18px 2px 18px 0;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"ic inhalt pfeil" "ic status pfeil"}
  .mkp-nr{display:none}
  .mkp-ztitel{font-size:1.06rem}
  .mkp-daten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mkp-knoepfe{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .mkp-btn{padding-inline:14px;min-height:48px}
  .mkp-btn--text{grid-column:span 2;justify-self:center}
}
@media (max-width:359px){
  .mkp-katalog{grid-template-columns:minmax(0,1fr)}
  .mkp-katalog li:last-child:nth-child(odd){grid-column:auto}
}

/* ─── Druck und weniger Bewegung ───────────────────────────────────────── */
@media print{
  .mkp-auf{opacity:1;transform:none}
  .mkp-marke i::after,.mkp-status i::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .mkp-auf{opacity:1;transform:none}
  .mkp-auf.mkp-da{transition:opacity .2s ease}
  .mkp-wartet .mkp-auf:not(.mkp-da){transform:none}
  .mkp-ic svg > *,.mkp-ic--start svg > *{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
  .mkp-marke i::after,.mkp-status i::after{animation:none}
  .mkp-zeile,.mkp-leistung,.mkp-btn,.mkp-pfeil{transition:none}
}