/* HAIR and STYLE Mannheim – „Womit ich arbeite“ (CHI-Marken): Story-Leiste, Karten, Vollbild-Ansicht.
   Eigenständig; nutzt die Farben der Seite, falls vorhanden. Lädt nichts von außen. */
[data-marken],.mk-viewer{--mk-gruen:var(--green,#62e31d);--mk-bg:var(--bg,#090a0a);--mk-flaeche:var(--surface,#15181a);--mk-text:var(--text,#f3eee5);--mk-muted:var(--muted,#bbb1a5);--mk-radius:var(--radius,22px);--mk-ease:cubic-bezier(.2,.8,.2,1)}
.mk-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Story-Leiste ---------- */
[data-marken=leiste]{position:relative;min-height:122px}
.mk-leiste{list-style:none;margin:0;padding:4px 2px 6px;display:flex;gap:4px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain}
.mk-leiste::-webkit-scrollbar{display:none}
.mk-leiste li{flex:none;scroll-snap-align:start}
.mk-kreis{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;width:80px;min-height:44px;margin:0;padding:4px 2px 2px;border:0;border-radius:16px;background:none;color:var(--mk-text);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mk-kreis:focus-visible{outline:2px solid var(--mk-gruen);outline-offset:0}
.mk-ring{position:relative;display:block;width:68px;height:68px;padding:3px;border-radius:50%}
.mk-ring::before{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(255,255,255,.22)}
.mk-neu .mk-ring::before{background:conic-gradient(from 200deg,#62e31d,#b8ff7a,#62e31d,#d71918,#62e31d);box-shadow:0 0 18px -4px rgba(98,227,29,.6)}
.mk-gesehen .mk-ring{padding:2px}
.mk-ring img{position:relative;display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid var(--mk-bg);background:var(--mk-flaeche)}
.mk-start .mk-neu .mk-ring::before{animation:mkDreh 1.2s var(--mk-ease) 1}
@keyframes mkDreh{from{transform:rotate(-200deg)}to{transform:none}}
.mk-kreis:hover .mk-ring img{border-color:rgba(9,10,10,.6)}
/* Unterkante der Plakette bleibt in jeder Schriftstufe bei 78px – der Name darunter beginnt bei 79px */
.mk-heute{position:absolute;top:calc(72px - .81rem);left:50%;transform:translateX(-50%);padding:1px 7px;border-radius:999px;background:var(--mk-gruen);color:#071005;border:2px solid var(--mk-bg);font-size:.6rem;font-weight:800;letter-spacing:.05em;line-height:1.35;text-transform:uppercase;white-space:nowrap}
.mk-quelle{margin:4px 0 0;font-size:.74rem;line-height:1.4;color:var(--muted,#bbb1a5)}
.mk-name{display:block;width:76px;font-size:.72rem;font-weight:600;line-height:1.25;text-align:center;overflow-wrap:anywhere}
[data-marken=leiste].mk-mehr::after{content:"";position:absolute;top:0;right:0;bottom:0;width:34px;background:linear-gradient(90deg,rgba(9,10,10,0),var(--mk-bg));pointer-events:none}

/* ---------- Marken-Karten ---------- */
.mk-regal{list-style:none;margin:0 calc(-1 * var(--mk-rand,22px));padding:4px var(--mk-rand,22px) 10px;display:flex;align-items:stretch;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--mk-rand,22px);scrollbar-width:none;overscroll-behavior-x:contain}
.mk-regal::-webkit-scrollbar{display:none}
/* Bild oben, Text darunter: das Produkt bleibt vollständig sichtbar */
.mk-karte{position:relative;flex:none;width:min(78%,300px);display:flex;flex-direction:column;justify-content:flex-start;scroll-snap-align:start;border-radius:var(--mk-radius);border:1px solid transparent;background:linear-gradient(var(--mk-flaeche),var(--mk-flaeche)) padding-box,var(--edge,linear-gradient(140deg,rgba(98,227,29,.55),rgba(255,255,255,.1) 32%,rgba(255,255,255,.04) 68%,rgba(215,25,24,.32))) border-box;box-shadow:0 24px 48px -28px rgba(0,0,0,.9)}
.mk-karte-bild{position:relative;flex:none;aspect-ratio:1/1;border-radius:calc(var(--mk-radius) - 1px) calc(var(--mk-radius) - 1px) 0 0;overflow:hidden;background:#0e1010}
.mk-karte-bild img[data-src]{visibility:hidden}
.mk-karte-bild img{color:transparent;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.mk-karte-text{position:relative;display:flex;flex-direction:column;flex:1;padding:14px 18px 18px;border-radius:0 0 calc(var(--mk-radius) - 1px) calc(var(--mk-radius) - 1px);background:none}
.mk-karte-titel{margin:0 0 9px;font-family:'Poppins',Arial,sans-serif;font-weight:800;font-size:1.12rem;line-height:1.2;letter-spacing:-.02em;color:var(--mk-text);overflow-wrap:break-word}
.mk-chips{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.mk-chips li{padding:3px 9px;border-radius:999px;font-size:.7rem;font-weight:600;line-height:1.35;color:var(--mk-text);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2)}
.mk-karte-text p{margin:0 0 6px;color:var(--mk-muted);font-size:.84rem;line-height:1.5}
.mk-karte-text p:last-of-type{margin-bottom:12px}
.mk-karte-knopf{display:inline-flex;align-items:center;align-self:flex-start;gap:8px;min-height:44px;margin:auto 0 0;padding:10px 16px;border-radius:999px;border:1px solid rgba(98,227,29,.5);background:rgba(98,227,29,.12);color:var(--mk-gruen);font:700 .86rem/1.2 'Inter',Arial,sans-serif;cursor:pointer;transition:background .2s ease,transform .15s ease}
.mk-karte-knopf svg{width:16px;height:16px;flex:none}
.mk-karte-knopf:hover{background:rgba(98,227,29,.2)}
.mk-karte-knopf:active{transform:scale(.97)}
.mk-karte-knopf:focus-visible,.mk-pfeilknopf:focus-visible{outline:2px solid var(--mk-gruen);outline-offset:3px}
.mk-regal-nav{display:flex;justify-content:flex-end;gap:10px;margin:8px 0 0}
.mk-pfeilknopf{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:var(--mk-text);cursor:pointer}
.mk-pfeilknopf svg{width:20px;height:20px}
.mk-pfeilknopf:disabled{opacity:.35;cursor:default}

/* ---------- Vollbild-Ansicht ---------- */
.mk-viewer{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;background:rgba(5,6,6,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;font-family:'Inter',Arial,sans-serif;line-height:1.5;text-align:left}
.mk-viewer[hidden]{display:none!important}
.mk-viewer *{box-sizing:border-box}
.mk-buehne{position:relative;width:100%;height:100%;overflow:hidden;background:#000;touch-action:none;-webkit-user-select:none;user-select:none}
/* In der Großansicht darf mit zwei Fingern gezoomt werden; beim Verschieben des Ausschnitts nicht blättern */
.mk-galerie .mk-buehne{touch-action:pinch-zoom}
.mk-gezoomt .mk-buehne{touch-action:manipulation}
/* Hochformat-Bühne nur, wenn das Fenster auch hoch genug ist – sonst (Handy quer) Vollbild */
@media(min-width:600px) and (min-height:600px){
  .mk-buehne{width:auto;height:92vh;aspect-ratio:9/16;max-width:94vw;border-radius:18px;box-shadow:0 40px 90px -30px rgba(0,0,0,.9)}
  .mk-galerie .mk-buehne{aspect-ratio:auto;width:min(94vw,1200px)}
}
/* quer liegendes Handy: Hochformat-Videos nicht auf einen schmalen Streifen beschneiden */
@media(orientation:landscape) and (max-height:599px){.mk-video{object-fit:contain}}
.mk-medien,.mk-folie{position:absolute;inset:0;overflow:hidden}
.mk-hg,.mk-hg img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.mk-hg{filter:blur(28px) brightness(.45);transform:scale(1.15)}
.mk-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.mk-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.mk-blende{animation:mkBlende .22s ease both}
.mk-von-rechts{animation:mkRechts .32s var(--mk-ease) both}
.mk-von-links{animation:mkLinks .32s var(--mk-ease) both}
@keyframes mkBlende{from{opacity:0}}
@keyframes mkRechts{from{transform:translateX(100%)}}
@keyframes mkLinks{from{transform:translateX(-100%)}}
.mk-tipp{position:absolute;top:0;bottom:0;z-index:2;margin:0;padding:0;border:0;border-radius:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mk-zur{left:0;width:30%}
.mk-wei{right:0;width:70%}
.mk-oben{position:absolute;left:0;right:0;top:0;z-index:3;padding:calc(10px + env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 30px max(12px,env(safe-area-inset-left));background:linear-gradient(180deg,rgba(0,0,0,.74),rgba(0,0,0,.6) 62%,rgba(0,0,0,0))}
.mk-balken{display:flex;gap:4px;margin:0 0 10px}
.mk-seg{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.28);overflow:hidden}
.mk-seg i{display:block;height:100%;background:var(--mk-gruen);transform:scaleX(0);transform-origin:left center}
.mk-kopf{display:flex;align-items:center;gap:10px}
.mk-kopf-bild{flex:none;width:32px;height:32px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.35)}
.mk-titel{flex:1;min-width:0;line-height:1.25}
.mk-titel b{display:block;font-size:.9rem;overflow-wrap:anywhere}
.mk-titel small{display:block;font-size:.74rem;color:#fff;opacity:.92}
.mk-rund{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.35);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;cursor:pointer}
.mk-rund svg{width:22px;height:22px}
.mk-rund[hidden]{display:none}
.mk-pfeil{position:absolute;top:50%;z-index:3;margin-top:-22px}
.mk-l{left:max(10px,env(safe-area-inset-left))}
.mk-r{right:max(10px,env(safe-area-inset-right))}
.mk-pfeil:disabled{opacity:.35;cursor:default}
.mk-play{position:absolute;left:50%;top:50%;z-index:3;display:flex;align-items:center;justify-content:center;width:64px;height:64px;margin:-32px 0 0 -32px;padding:0;border:2px solid rgba(255,255,255,.7);border-radius:50%;background:rgba(0,0,0,.55);color:#fff;cursor:pointer}
.mk-play svg{width:28px;height:28px;margin-left:3px}
.mk-play[hidden]{display:none}
.mk-unten{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:44px max(16px,env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));text-align:center;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.76) 40px)}
.mk-cap{margin:0 0 2px;font-weight:700;font-size:.95rem;overflow-wrap:anywhere}
.mk-cap:empty{display:none}
.mk-v-quelle{margin:0;font-size:.74rem;color:#fff;opacity:.88}
.mk-v-quelle[hidden],.mk-buchen[hidden]{display:none}
.mk-buchen{display:flex;align-items:center;justify-content:center;max-width:320px;min-height:48px;margin:12px auto 0;padding:12px 22px;border-radius:999px;background:var(--mk-gruen);color:#071005;font-weight:700;font-size:.92rem;line-height:1.3;text-decoration:none}
.mk-viewer button:focus-visible,.mk-viewer a:focus-visible{outline:3px solid var(--mk-gruen);outline-offset:2px}
.mk-viewer .mk-tipp:focus-visible{outline-offset:-8px}
.mk-zaehler{display:none}
.mk-galerie .mk-balken,.mk-galerie .mk-tipp,.mk-galerie .mk-kopf-bild,.mk-galerie .mk-titel b:first-child,.mk-galerie .mk-titel small{display:none}
.mk-galerie .mk-zaehler{display:block;font-size:.95rem}
.mk-viewer:not(.mk-galerie) .mk-pfeil{display:none}
/* am Desktop auch in der Story sichtbare Weiter-/Zurück-Pfeile */
@media(hover:hover) and (min-width:600px) and (min-height:600px){.mk-viewer:not(.mk-galerie) .mk-pfeil{display:inline-flex}}

@media(prefers-reduced-motion:reduce){
  [data-marken] *,[data-marken] *::before,.mk-viewer,.mk-viewer *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media(forced-colors:active){
  .mk-karte,.mk-rund,.mk-pfeilknopf,.mk-karte-knopf{border:1px solid CanvasText}
}