/* Stil-Atlas: "Im Einsatz" (stil-atlas-einsatz.js) */

/* ---------- Knopf auf der Buehne ---------- */
.ei-knopf { position: fixed; z-index: 35; bottom: 24px; left: calc(var(--leiste-b) + (100vw - var(--leiste-b)) / 2); transform: translate(-50%, 10px);
  display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px 0 22px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(13,13,15,.84); color: #F5F5F7; font: 500 15px/1 var(--body); cursor: pointer; box-shadow: 0 12px 30px rgba(0,0,0,.28);
  opacity: 0; visibility: hidden; transition: opacity .35s, transform .35s var(--ease), visibility 0s .35s, background .2s, color .2s; }
.ei-knopf.da { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .35s, transform .35s var(--ease), visibility 0s, background .2s, color .2s; }
.ei-knopf svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ei-knopf.da svg { animation: ei-wink 2.4s 1s var(--ease) infinite; }
@keyframes ei-wink { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(3px); } }
.ei-knopf:hover { background: #F5F5F7; color: #0D0D0F; }
.ei-knopf:focus-visible { outline: 2px solid #F5F5F7; outline-offset: 3px; }
html.einsatz-an .ei-knopf, html.vollbild .ei-knopf, html.bild .ei-knopf { opacity: 0; visibility: hidden; }

/* ---------- Tafel: legt sich beim Scrollen ueber die Buehne ---------- */
.ei { position: fixed; z-index: 36; top: 0; bottom: 0; right: 0; left: var(--leiste-b); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  visibility: hidden; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ei-fg, #888) 35%, transparent) transparent; }
html.einsatz-an .ei { visibility: visible; }
html.bild .ei { display: none; }
.ei__luft { height: 100vh; height: 100svh; }
.ei__blatt { --ei-tafel: #EAE6DD; --ei-fg: #141414; --ei-ak: #34A7B9; position: relative; min-height: 100vh; padding: clamp(28px, 4.2vw, 72px) clamp(20px, 4.2vw, 72px) clamp(56px, 6vw, 110px);
  background: var(--ei-tafel); color: var(--ei-fg); border-radius: 28px 28px 0 0; box-shadow: 0 -30px 80px rgba(0,0,0,.35); transition: background .5s, color .5s; }
.ei__blatt ::selection { background: var(--ei-fg); color: var(--ei-tafel); }
.ei__zurueck { position: sticky; z-index: 3; top: 18px; display: flex; align-items: center; gap: 8px; width: fit-content; margin: 0 0 -42px auto; height: 42px; padding: 0 16px 0 13px;
  border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ei-fg) 28%, transparent); background: color-mix(in srgb, var(--ei-tafel) 82%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--ei-fg); font: 500 14px/1 var(--body); cursor: pointer; transition: background .2s, color .2s; }
.ei__zurueck svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ei__zurueck:hover { background: var(--ei-fg); color: var(--ei-tafel); }
.ei__zurueck:focus-visible, .ei__varianten button:focus-visible { outline: 2px solid var(--ei-fg); outline-offset: 3px; }

/* Kopf: der Stilname in seiner Schrift, darunter ein Satz und die Varianten */
.ei__kopf { padding: 8px 140px 0 0; margin-bottom: clamp(30px, 4vw, 64px); }
.ei__titel { margin: 0; font-size: clamp(54px, 8.4vw, 132px); line-height: .98; white-space: nowrap; }
.ei__unter { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 40px; margin-top: clamp(16px, 2vw, 26px); }
.ei__satz { margin: 0; max-width: 54ch; font: 400 16px/1.55 var(--body); color: color-mix(in srgb, var(--ei-fg) 80%, transparent); }
.ei__satz b { font-weight: 600; color: var(--ei-fg); }
.ei__varianten { display: flex; flex-wrap: wrap; gap: 6px; }
.ei__varianten button { height: 36px; padding: 0 15px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ei-fg) 30%, transparent); background: none; color: var(--ei-fg);
  font: 500 13.5px/1 var(--body); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.ei__varianten button:hover { border-color: var(--ei-fg); }
.ei__varianten button[aria-pressed='true'] { background: var(--ei-fg); color: var(--ei-tafel); border-color: var(--ei-fg); }

/* ---------- Flaeche mit den Stuecken ---------- */
.ei__flaeche { position: relative; }
.ei-stueck { position: absolute; margin: 0; }
.ei-stueck__flaeche { position: relative; overflow: hidden; }
.ei-stueck__skala { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.ei-stueck__inhalt { position: absolute; overflow: hidden; background: color-mix(in srgb, var(--ei-fg) 8%, transparent); }
.ei-stueck__inhalt iframe { display: block; border: 0; pointer-events: none; background: transparent; }
.ei-stueck figcaption { margin-top: 12px; font: 500 13px/1.3 var(--body); color: color-mix(in srgb, var(--ei-fg) 68%, transparent); }
/* Tiefe: Papier liegt flach mit weichem Schatten, Geraete etwas hoeher */
.ei-stueck--plakat .ei-stueck__flaeche, .ei-stueck--flyer .ei-stueck__flaeche, .ei-stueck--vorn .ei-stueck__flaeche, .ei-stueck--hinten .ei-stueck__flaeche,
.ei-stueck--brief .ei-stueck__flaeche, .ei-stueck--farben .ei-stueck__flaeche {
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 14px 34px -8px rgba(0,0,0,.26); }
.ei__blatt--dunkel .ei-stueck__flaeche { box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 18px 40px -8px rgba(0,0,0,.6) !important; }
.ei-stueck--vorn .ei-stueck__flaeche, .ei-stueck--hinten .ei-stueck__flaeche { border-radius: 6px; }
.ei-stueck--farben .ei-stueck__flaeche { border-radius: 10px; }
/* Browserfenster */
.ei-stueck--browser .ei-stueck__flaeche { border-radius: 12px; box-shadow: 0 2px 4px rgba(0,0,0,.12), 0 30px 60px -12px rgba(0,0,0,.35); }
.ei-browser { position: absolute; left: 0; right: 0; top: 0; height: 46px; display: flex; align-items: center; gap: 9px; padding: 0 20px; background: #E8E6E1; }
.ei__blatt--dunkel .ei-browser { background: #26262A; }
.ei-browser i { width: 13px; height: 13px; border-radius: 50%; background: #FF5F57; } .ei-browser i + i { background: #FEBC2E; } .ei-browser i + i + i { background: #28C840; }
.ei-browser span { margin: 0 auto; transform: translateX(-30px); width: 420px; padding: 7px 0; border-radius: 8px; text-align: center; background: rgba(0,0,0,.07); font: 400 15px/1 var(--body); color: rgba(0,0,0,.6); }
.ei__blatt--dunkel .ei-browser span { background: rgba(255,255,255,.08); color: rgba(255,255,255,.6); }
/* Telefon */
.ei-stueck--telefon .ei-stueck__flaeche { overflow: visible; }
.ei-telefon { position: absolute; inset: 0; border-radius: 66px; background: #141416; box-shadow: inset 0 0 0 2px #34343A, 0 30px 60px -12px rgba(0,0,0,.45); }
.ei-stueck--telefon .ei-stueck__inhalt { border-radius: 52px; }

/* ---------- Gesetzte Drucksachen (Entwurfsgroesse, wird skaliert) ---------- */
.ei-druck { position: absolute; inset: 0; overflow: hidden; }
.ei-druck p { margin: 0; }
.ei-zeichen { position: relative !important; left: auto; top: auto; flex: none; will-change: auto; }
/* Visitenkarte */
.ei-karte { padding: 78px 86px; display: flex; flex-direction: column; justify-content: space-between; }
.ei-karte__text { width: 100%; }
/* Briefpapier */
.ei-brief { padding: 120px 130px; }
.ei-brief__band { position: absolute; left: 0; right: 0; top: 0; height: 30px; }
.ei-brief__kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 18px 40px; }
.ei-brief__marke { display: flex; align-items: center; gap: 30px; min-width: 0; flex: 1 1 520px; }
.ei-brief__marke p { min-width: 0; }
.ei-brief__absender { padding-top: 40px; white-space: nowrap; margin-left: auto; }
.ei-brief__rumpf { margin-top: 150px; font-size: 25px; line-height: 1.62; max-width: 900px; }
.ei-brief__rumpf p { margin: 0 0 24px; }
.ei-brief__an { margin-bottom: 90px !important; font-size: 23px; opacity: .85; }
.ei-brief__datum { text-align: right; max-width: none; opacity: .75; }
.ei-brief__betreff { margin: 50px 0 40px !important; line-height: 1.15; }
.ei-brief__gruss { margin-top: 18px !important; }
.ei-brief__fuss { position: absolute; left: 130px; right: 130px; bottom: 96px; display: flex; justify-content: space-between; align-items: center; }
.ei-brief__palette { display: flex; } .ei-brief__palette i { width: 64px; height: 14px; }
/* Farben und Schrift */
.ei-farben { display: flex; flex-direction: column; }
.ei-farben__streifen { display: flex; height: 44%; }
.ei-farbe { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 30px 28px; min-width: 0; }
.ei-farbe b { font: 600 25px/1.15 var(--display); overflow-wrap: anywhere; }
.ei-farbe span { font: 500 19px/1 ui-monospace, 'SFMono-Regular', Menlo, monospace; opacity: .8; }
.ei-farben__schrift { flex: 1; display: flex; align-items: center; gap: 64px; padding: 50px 64px; min-height: 0; }
.ei-farben__aa { font-size: 300px; line-height: .9; flex: none; }
.ei-farben__muster { flex: 1; min-width: 0; }
.ei-farben__liste { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 8px; font: 400 19px/1.3 var(--body); }
.ei-farben__liste b { font-weight: 600; margin-right: 10px; }
.ei-farben__liste span { opacity: .75; }

@media (max-width: 700px) {
  .ei-knopf { bottom: 16px; height: 42px; font-size: 14px; }
  .ei__blatt { border-radius: 22px 22px 0 0; }
  .ei__kopf { padding-right: 0; padding-top: 52px; }
  .ei__zurueck { height: 38px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .ei-knopf.da svg { animation: none; } }

/* =========================================================================
   Eigene Ausstattungen je Stil (stil-atlas-einsatz-stile.js)
   ========================================================================= */
/* ---------- Viktorianisch: Brandt & Soehne ---------- */
.vk { position: absolute; inset: 0; overflow: hidden; background: var(--vk-grund); color: var(--vk-tinte);
  font-family: 'Source Serif 4', Georgia, serif; text-rendering: optimizeLegibility; font-kerning: normal; }
.vk p, .vk h3 { margin: 0; }
.vk i { font-style: normal; }
.vk-rahmen { position: absolute; left: 0; top: 0; pointer-events: none; }
.vk-trenner, .vk-siegel, .vk-dose, .vk-zweig { display: block; flex: none; }
.vk-klein { font: 400 18px/1.3 'IM Fell English', Georgia, serif; letter-spacing: .22em; text-transform: uppercase; }
.vk-klein i { margin: 0 .5em; font-size: .6em; vertical-align: .2em; color: var(--vk-ak); }
.vk-knopf { display: inline-flex; align-items: center; justify-content: center; height: 64px; padding: 0 38px; background: var(--vk-ak); color: var(--vk-grund);
  font: 400 21px/1 'IM Fell English', Georgia, serif; letter-spacing: .2em; text-transform: uppercase; outline: 1.5px solid var(--vk-ak); outline-offset: 5px; }
.vk-link { font: italic 400 24px/1 'Playfair Display', Georgia, serif; border-bottom: 1.5px solid currentColor; padding-bottom: 4px; }
.vk-band { position: relative; display: inline-flex; align-items: center; height: 2.1em; padding: 0 1.6em; background: var(--b); color: var(--bt); margin: 0 1.4em;
  font-family: 'Playfair Display', Georgia, serif; font-style: italic; white-space: nowrap; box-shadow: 0 3px 0 rgba(0,0,0,.15); }
.vk-band::before, .vk-band::after { content: ''; position: absolute; top: .38em; width: 1.3em; height: 2.1em; background: var(--b); filter: brightness(.7);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, .5em 50%); }
.vk-band::before { left: -1.3em; } .vk-band::after { right: -1.3em; transform: scaleX(-1); }
.vk-band span { position: relative; }

/* Website */
.vk-web { display: flex; flex-direction: column; }
.vk-web__leiste { height: 40px; flex: none; display: flex; align-items: center; justify-content: center; gap: 0; background: var(--vk-gegen); color: var(--vk-gegenT);
  font: 400 14px/1 'IM Fell English', Georgia, serif; letter-spacing: .24em; text-transform: uppercase; }
.vk-web__leiste i { margin: 0 18px; font-size: 9px; color: var(--vk-gold); }
.vk-web__nav { height: 116px; flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; padding: 0 64px; }
.vk-web__nav ul { display: flex; gap: 26px; margin: 0; padding: 0; list-style: none; font: 400 15px/1 'IM Fell English', Georgia, serif; letter-spacing: .16em; text-transform: uppercase; }
.vk-web__nav ul:last-child { justify-content: flex-end; }
.vk-web__marke { text-align: center; }
.vk-web__marke b { display: block; font: 400 40px/1 'Rye', Georgia, serif; letter-spacing: .02em; }
.vk-web__marke span { display: block; margin-top: 8px; font: italic 400 18px/1 'Playfair Display', Georgia, serif; color: var(--vk-ak); }
.vk-web__linie { height: 7px; margin: 0 64px; flex: none; border-top: 3px solid var(--vk-tinte); border-bottom: 1px solid var(--vk-tinte); }
.vk-web__held { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 560px; gap: 70px; padding: 54px 64px 0 96px; }
.vk-web__text { padding-top: 46px; }
.vk-web__text .vk-klein { color: var(--vk-ak); font-size: 17px; }
.vk-web__text h3 { margin-top: 22px; font: 700 92px/.98 'Playfair Display', Georgia, serif; letter-spacing: -.01em; }
.vk-web__kursiv { margin-top: 22px !important; font: italic 400 30px/1.25 'Playfair Display', Georgia, serif; color: var(--vk-ak); }
.vk-web__lauf { margin-top: 26px !important; max-width: 520px; font-size: 21px; line-height: 1.6; opacity: .88; }
.vk-web__knoepfe { display: flex; align-items: center; gap: 40px; margin-top: 44px; }
.vk-web__bild { position: relative; height: 600px; }
.vk-web__dose { position: absolute; left: 155px; top: 120px; filter: drop-shadow(0 22px 26px rgba(0,0,0,.28)); }
.vk-web__zweig { position: absolute; } .vk-web__zweig--l { left: 26px; top: 210px; transform: rotate(-12deg); } .vk-web__zweig--r { right: 22px; top: 70px; transform: rotate(14deg); }
.vk-web__preis { position: absolute; right: 30px; bottom: 50px; width: 136px; height: 136px; border-radius: 50%; background: var(--vk-ak); color: var(--vk-grund);
  display: flex; flex-direction: column; align-items: center; justify-content: center; outline: 1.5px solid var(--vk-ak); outline-offset: 5px; transform: rotate(-8deg); }
.vk-web__preis b { font: 400 30px/1 'Rye', Georgia, serif; } .vk-web__preis span { margin-top: 6px; font: italic 400 17px/1 'Playfair Display', Georgia, serif; }

/* Smartphone */
.vk-tel { padding: 0 24px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.vk-tel__status { align-self: stretch; height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; font: 600 16px/1 -apple-system, 'Inter', sans-serif; }
.vk-tel__status span { width: 26px; height: 12px; border: 1.5px solid currentColor; border-radius: 4px; opacity: .8; }
.vk-tel__kopf { align-self: stretch; display: flex; align-items: center; justify-content: space-between; height: 56px; border-bottom: 3px double var(--vk-tinte); }
.vk-tel__kopf b { font: 400 25px/1 'Rye', Georgia, serif; }
.vk-tel__menue { width: 22px; height: 12px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.vk-tel__korb { width: 26px; height: 26px; border-radius: 50%; background: var(--vk-ak); color: var(--vk-grund); font: 400 14px/26px 'IM Fell English', serif; }
.vk-tel__bild { position: relative; width: 342px; height: 330px; margin-top: 20px; flex: none; }
.vk-tel__dose { position: absolute; left: 96px; top: 50px; filter: drop-shadow(0 14px 16px rgba(0,0,0,.25)); }
.vk-tel__zweig { position: absolute; left: 236px; top: 110px; transform: rotate(16deg); }
.vk-tel .vk-klein { margin-top: 26px; font-size: 13px; color: var(--vk-ak); }
.vk-tel h3 { margin-top: 10px; font: 700 34px/1.05 'Playfair Display', Georgia, serif; }
.vk-tel__kursiv { margin-top: 8px !important; font: italic 400 19px/1.3 'Playfair Display', Georgia, serif; opacity: .85; }
.vk-tel__zeile { display: flex; align-items: baseline; gap: 14px; margin-top: 18px; }
.vk-tel__zeile b { font: 400 34px/1 'Rye', Georgia, serif; color: var(--vk-ak); } .vk-tel__zeile span { font: 400 16px/1 'IM Fell English', serif; }
.vk-knopf--breit { align-self: stretch; margin-top: 22px; height: 60px; font-size: 18px; }
.vk-tel__fuss { margin-top: 18px !important; font: italic 400 15px/1 'Playfair Display', Georgia, serif; opacity: .7; }

/* Plakat */
.vk-plakat__satz { position: absolute; inset: 70px 80px 70px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.vk-plakat__oben { font-size: 21px; }
.vk-plakat__marke { margin-top: 18px !important; font: 400 104px/1 'Rye', Georgia, serif; letter-spacing: .01em; white-space: nowrap; }
.vk-plakat .vk-trenner { margin-top: 20px; }
.vk-plakat__zusatz { margin-top: 14px !important; font: italic 400 58px/1.05 'Playfair Display', Georgia, serif; color: var(--vk-ak); }
.vk-plakat__zusatz + .vk-klein { margin-top: 14px; font-size: 20px; }
.vk-plakat__bild { display: flex; align-items: flex-end; justify-content: center; margin-top: 26px; height: 360px; }
.vk-plakat__bild > div:first-child { transform: rotate(-14deg) translate(30px, -10px); } .vk-plakat__bild > div:last-child { transform: rotate(14deg) translate(-30px, -10px); }
.vk-plakat__dose { position: relative; z-index: 1; filter: drop-shadow(0 18px 20px rgba(0,0,0,.25)); }
.vk-plakat .vk-band { margin-top: 26px; }
.vk-plakat__sorte { margin-top: 18px !important; font: 700 132px/1 'Playfair Display', Georgia, serif; letter-spacing: .04em; text-transform: uppercase; color: var(--vk-ak); }
.vk-plakat__liste { margin-top: 10px !important; font: 400 27px/1.2 'IM Fell English', Georgia, serif; letter-spacing: .14em; text-transform: uppercase; }
.vk-plakat__liste i { margin: 0 .3em; color: var(--vk-ak); }
.vk-plakat__liste + .vk-trenner { margin-top: 26px; }
.vk-plakat__fuss { display: flex; align-items: center; justify-content: space-between; align-self: stretch; margin-top: auto; padding: 0 30px; }
.vk-plakat__fuss p { width: 260px; font: 400 22px/1.4 'IM Fell English', Georgia, serif; }
.vk-plakat__fuss b { display: block; margin-bottom: 4px; font: 700 28px/1.15 'Playfair Display', Georgia, serif; color: var(--vk-ak); }

/* Flyer */
.vk-flyer { display: flex; }
.vk-flyer__links { position: relative; width: 560px; flex: none; background: var(--vk-gegen); color: var(--vk-gegenT); display: flex; flex-direction: column; align-items: center; }
.vk-flyer__siegel { margin-top: 90px; }
.vk-flyer__bild { display: flex; align-items: flex-end; margin-top: 40px; }
.vk-flyer__bild .vk-zweig { margin-right: -46px; transform: rotate(-14deg); }
.vk-flyer__bild .vk-dose { filter: drop-shadow(0 18px 20px rgba(0,0,0,.35)); }
.vk-flyer__unter { margin-top: 26px !important; font: italic 400 25px/1.2 'Playfair Display', Georgia, serif; }
.vk-flyer__rechts { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 70px 96px; }
.vk-flyer__rechts .vk-klein { font-size: 18px; }
.vk-flyer__titel { margin-top: 26px !important; font: 400 112px/1 'UnifrakturMaguntia', serif; color: var(--vk-ak); }
.vk-flyer__unterzeile { margin: 10px 0 22px !important; font: italic 400 38px/1.15 'Playfair Display', Georgia, serif; }
.vk-flyer__wann { margin-top: 26px !important; font: 700 30px/1.35 'Playfair Display', Georgia, serif; }
.vk-flyer__lauf { margin-top: 22px !important; max-width: 560px; font-size: 22px; line-height: 1.6; opacity: .88; }
.vk-flyer__adresse { margin-top: 26px !important; font: 400 22px/1 'IM Fell English', Georgia, serif; letter-spacing: .14em; text-transform: uppercase; }
.vk-flyer__adresse i { margin: 0 .5em; font-size: .6em; color: var(--vk-ak); vertical-align: .2em; }
.vk-flyer__uawg { margin-top: 18px !important; font-size: 15px; opacity: .7; }

/* Visitenkarte */
.vk-karte__satz { position: absolute; inset: 64px 70px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.vk-karte .vk-klein { font-size: 19px; }
.vk-karte__marke { margin: 16px 0 10px !important; font: 400 84px/1 'Rye', Georgia, serif; white-space: nowrap; }
.vk-karte__name { margin-top: 14px !important; font: italic 400 46px/1.1 'Playfair Display', Georgia, serif; color: var(--vk-ak); }
.vk-karte__rolle { margin-top: 8px !important; font-size: 15px !important; }
.vk-karte__adresse { margin-top: 26px !important; font: 400 21px/1.5 'IM Fell English', Georgia, serif; }
.vk-rueck { background: var(--vk-gegen); color: var(--vk-gegenT); }
.vk-rueck__satz { position: absolute; inset: 0; display: grid; place-items: center; }

/* Briefpapier */
.vk-brief { padding: 110px 140px 0; }
.vk-brief__kopf { display: flex; flex-direction: column; align-items: center; text-align: center; }
.vk-brief__marke { margin-top: 18px !important; font: 400 76px/1 'Rye', Georgia, serif; }
.vk-brief__kopf .vk-klein { margin: 14px 0 18px; font-size: 19px; }
.vk-brief__an { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 96px; font-size: 26px; line-height: 1.5; }
.vk-brief__datum { font-style: italic; }
.vk-brief__betreff { margin-top: 96px !important; font: italic 400 46px/1.2 'Playfair Display', Georgia, serif; color: var(--vk-ak); }
.vk-brief__lauf { margin-top: 44px; font-size: 28px; line-height: 1.62; }
.vk-brief__lauf p { margin-bottom: 30px; }
.vk-brief__unterschrift { margin-top: 16px; font: italic 400 58px/1 'Playfair Display', Georgia, serif; color: var(--vk-ak); }
.vk-brief__fuss { position: absolute; left: 130px; right: 130px; bottom: 74px; }
.vk-brief__fuss div { display: flex; justify-content: space-between; margin-top: 18px; font: 400 18px/1.45 'IM Fell English', Georgia, serif; letter-spacing: .05em; }
.vk-brief__fuss p:nth-child(2) { text-align: center; } .vk-brief__fuss p:last-child { text-align: right; }

/* Musterbuch */
.vk-muster__satz { position: absolute; inset: 72px 90px; display: flex; flex-direction: column; align-items: center; }
.vk-muster__satz > .vk-klein { margin-bottom: 14px; font-size: 20px; }
.vk-muster__zeilen { align-self: stretch; margin: 20px 0; }
.vk-muster__zeilen p { display: grid; grid-template-columns: 210px 1fr; align-items: baseline; gap: 24px; padding: 14px 0; border-bottom: 1px solid color-mix(in srgb, var(--vk-tinte) 25%, transparent); }
.vk-muster__zeilen p:last-child { border-bottom: 0; }
.vk-muster__zeilen span { font: italic 400 19px/1.2 'Playfair Display', Georgia, serif; color: var(--vk-ak); }
.vk-muster__zeilen b { font-weight: 400; line-height: 1.1; white-space: nowrap; }
.vk-muster__tinten { display: flex; justify-content: space-between; align-self: stretch; margin-top: 26px; }
.vk-tinte { width: 190px; text-align: center; }
.vk-tinte i { display: grid; place-items: center; width: 110px; height: 110px; margin: 0 auto 14px; border-radius: 50%; font: 400 30px/1 'Rye', Georgia, serif;
  box-shadow: 0 0 0 2px var(--vk-grund), 0 0 0 3.5px var(--vk-tinte), 0 8px 16px rgba(0,0,0,.18); }
.vk-tinte b { display: block; font: 700 21px/1.2 'Playfair Display', Georgia, serif; }
.vk-tinte span { display: block; margin-top: 4px; font: 400 16px/1 ui-monospace, Menlo, monospace; opacity: .75; }
.ei-eigen { position: absolute; inset: 0; }

/* =========================================================================
   Baukasten-Ausstattungen (stil-atlas-einsatz-marken.js)
   Schriften kommen als .mkM/.mkT/.mkX/.mkK aus dem Modul; hier nur Groesse,
   Raster und Farbe. Nie die font-Kurzform verwenden, sie wuerde die Familie
   ueberschreiben.
   ========================================================================= */
.mk { position: absolute; inset: 0; overflow: hidden; background: var(--g); color: var(--t); text-rendering: optimizeLegibility; font-kerning: normal; }
:where(.mk) :is(p, h3, ul) { margin: 0; padding: 0; }
.mk ul { list-style: none; }
.mk b { font-weight: inherit; }
.mk-motiv { flex: none; position: relative; }
.mk-motiv svg { display: block; width: 100%; height: 100%; }
.mk-knopf { display: inline-flex; align-items: center; justify-content: center; height: 58px; padding: 0 30px; background: var(--a); color: var(--at); font-size: 15px; white-space: nowrap; }
.mk-knopf--klein { height: 44px; padding: 0 20px; font-size: 13px; }
.mk-link { font-size: 18px; border-bottom: 1.5px solid currentColor; padding-bottom: 3px; }
.mk-klein { font-size: 14px; color: var(--a); }

/* ---------- Website ---------- */
.mk-web { display: flex; flex-direction: column; }
.mk-leiste { flex: none; height: 38px; display: flex; align-items: center; justify-content: center; background: var(--gg); color: var(--gt); font-size: 12px; }
.mk-nav { flex: none; height: 104px; display: flex; align-items: center; gap: 48px; padding: 0 72px; }
.mk-nav .mk-marke { font-size: 34px; line-height: 1; margin-right: auto; white-space: nowrap; }
.mk-nav ul { display: flex; gap: 38px; font-size: 14px; }
.mk-held { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 56px; padding: 0 72px; }
.mk-held__text { min-width: 0; }
.mk-web .mk-titel { margin-top: 22px; font-size: 86px; line-height: 1; }
.mk-web .mk-lauf { margin-top: 30px; max-width: 30em; font-size: 20px; line-height: 1.55; opacity: .86; }
.mk-knoepfe { display: flex; align-items: center; gap: 34px; margin-top: 42px; }
.mk-web .mk-motiv { align-self: end; }
.mk-fakten { flex: none; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-top: 1.5px solid color-mix(in srgb, var(--t) 22%, transparent); }
.mk-fakten div { display: flex; align-items: baseline; gap: 18px; padding: 26px 72px 30px; }
.mk-fakten div + div { border-left: 1.5px solid color-mix(in srgb, var(--t) 22%, transparent); padding-left: 40px; }
.mk-fakten b { font-size: 32px; line-height: 1; color: var(--a); white-space: nowrap; }
.mk-fakten span { font-size: 15px; line-height: 1.35; opacity: .8; }

/* ---------- Smartphone ---------- */
.mk-tel { display: flex; flex-direction: column; padding: 0 24px 96px; }
.mk-status { flex: none; height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 6px 12px 0; font: 600 15px/1 -apple-system, 'Inter', sans-serif; }
.mk-status span { width: 64px; height: 12px; background: linear-gradient(90deg, currentColor 0 18px, transparent 18px 24px, currentColor 24px 40px, transparent 40px 46px, currentColor 46px); -webkit-mask: linear-gradient(currentColor, currentColor); border-radius: 3px; opacity: .9; }
.mk-tkopf { flex: none; height: 54px; display: flex; align-items: center; justify-content: space-between; }
.mk-tkopf b { font-size: 21px; line-height: 1; }
.mk-menue { width: 22px; height: 12px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.mk-punkt { width: 22px; height: 22px; border-radius: 50%; border: 2px solid currentColor; }
.mk-tel--standard .mk-motiv { margin: 8px -24px 22px; width: 390px !important; height: 300px !important; background: var(--gg); overflow: hidden; }
.mk-tel .mk-klein { font-size: 12px; }
.mk-tel .mk-titel { margin-top: 10px; font-size: 38px; line-height: 1.04; }
.mk-tel .mk-lauf { margin-top: 12px; font-size: 15px; line-height: 1.5; opacity: .85; }
.mk-tzeile { margin-top: 14px; font-size: 26px; line-height: 1; color: var(--a); }
.mk-knopf--breit { margin-top: auto; width: 100%; height: 54px; font-size: 14px; }
.mk-tabs { position: absolute; left: 0; right: 0; bottom: 0; height: 80px; display: flex; justify-content: space-around; padding: 14px 18px 0; font-size: 11px;
  border-top: 1px solid color-mix(in srgb, var(--t) 16%, transparent); background: var(--g); }
.mk-tabs span { display: flex; flex-direction: column; align-items: center; gap: 7px; opacity: .55; }
.mk-tabs span::before { content: ''; width: 22px; height: 22px; border-radius: 6px; border: 2px solid currentColor; }
.mk-tabs span.an { opacity: 1; color: var(--a); }

/* ---------- Plakat ---------- */
.mk-plakat { display: flex; flex-direction: column; }
.mk-plakat .mk-motiv { background: var(--gg); overflow: hidden; }
.mk-plakat__satz { flex: 1; display: flex; flex-direction: column; padding: 52px 72px 60px; }
.mk-plakat .mk-klein { font-size: 20px; }
.mk-plakat .mk-titel { margin-top: 18px; font-size: 96px; line-height: .98; }
.mk-plakat .mk-unter { margin-top: 18px; font-size: 26px; line-height: 1.35; opacity: .85; }
.mk-info { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: auto; padding-top: 26px; border-top: 2px solid currentColor; }
.mk-info p { display: flex; flex-direction: column; gap: 6px; }
.mk-info b { font-size: 30px; line-height: 1.1; }
.mk-info span { font-size: 20px; line-height: 1.3; opacity: .8; }

/* ---------- Flyer ---------- */
.mk-flyer { display: flex; }
.mk-flyer__bild { flex: none; width: 600px; height: 1000px; background: var(--gg); overflow: hidden; }
.mk-flyer__satz { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 84px 90px 70px; }
.mk-flyer .mk-klein { font-size: 18px; }
.mk-flyer .mk-titel { margin-top: 20px; font-size: 92px; line-height: 1; }
.mk-flyer .mk-unter { margin-top: 18px; font-size: 27px; line-height: 1.35; color: var(--a); }
.mk-flyer .mk-lauf { margin-top: 34px; font-size: 22px; line-height: 1.6; opacity: .86; max-width: 30em; }
.mk-flyer .mk-info { margin-top: auto; }
.mk-fuss { margin-top: 28px; font-size: 15px; opacity: .7; }

/* ---------- Visitenkarten ---------- */
.mk-vorn { display: flex; flex-direction: column; justify-content: space-between; padding: 72px 84px; }
.mk-vorn__marke b { display: block; font-size: 62px; line-height: 1; }
.mk-vorn__marke span { display: block; margin-top: 14px; font-size: 18px; color: var(--a); }
.mk-vorn__rest { display: flex; flex-direction: column; gap: 44px; }
.mk-vorn__person { display: flex; flex-direction: column; gap: 8px; }
.mk-vorn__person b { font-size: 36px; line-height: 1.1; }
.mk-vorn__person span { font-size: 21px; opacity: .8; }
.mk-vorn__kontakt { display: flex; flex-direction: column; gap: 6px; font-size: 19px; opacity: .8; }
.mk-hinten { background: var(--gg); }
.mk-hinten .mk-motiv { position: absolute; inset: 0; }

/* ---------- Briefpapier ---------- */
.mk-brief { padding: 120px 130px; }
.mk-brief__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 40px; padding-bottom: 34px; border-bottom: 2px solid var(--a); }
.mk-brief__kopf b { font-size: 66px; line-height: 1; }
.mk-brief__kopf span { font-size: 19px; color: var(--a); }
.mk-brief__an { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 120px; font-size: 23px; line-height: 1.5; }
.mk-datum { opacity: .75; }
.mk-betreff { margin-top: 110px; font-size: 36px; line-height: 1.2; }
.mk-brief__lauf { margin-top: 46px; max-width: 900px; font-size: 25px; line-height: 1.62; }
.mk-brief__lauf p + p { margin-top: 24px; }
.mk-unterschrift { margin-top: 26px !important; font-size: 40px; color: var(--a); }
.mk-brief__fuss { position: absolute; left: 130px; right: 130px; bottom: 96px; display: flex; justify-content: space-between; padding-top: 26px; font-size: 15px;
  border-top: 1px solid color-mix(in srgb, var(--t) 30%, transparent); opacity: .85; }

/* ---------- Farben und Schrift ---------- */
.mk-farben { display: flex; flex-direction: column; }
.mk-pal { flex: none; height: 44%; display: flex; }
.mk-pal div { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 28px; }
.mk-pal b { font: 600 22px/1.15 'Inter', sans-serif; overflow-wrap: anywhere; }
.mk-pal span { font: 500 17px/1 ui-monospace, Menlo, monospace; opacity: .8; }
.mk-spec { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 34px; padding: 40px 70px; }
.mk-spec p { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: baseline; gap: 30px; }
.mk-spec span { font-size: 14px; opacity: .6; }
.mk-spec p b { font-size: 34px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-spec p:first-child { display: block; }
.mk-spec p:first-child span { display: block; margin-bottom: 14px; }
.mk-spec p:first-child b { display: block; font-size: 96px; line-height: 1.05; overflow: visible; }

/* ---------- Feinheiten je Stil ---------- */
/* Art deco: Symmetrie, Goldlinien, gerahmte Karten */
.mk--artdeco .mk-plakat__satz, .mk--artdeco .mk-vorn { text-align: center; align-items: center; }
.mk--artdeco .mk-plakat__satz .mk-info, .mk--artdeco .mk-flyer .mk-info { width: 100%; border-top: 0; padding-top: 30px; background: linear-gradient(var(--a), var(--a)) 0 0/100% 2px no-repeat, linear-gradient(var(--a), var(--a)) 0 8px/100% 1px no-repeat; }
.mk--artdeco .mk-vorn { box-shadow: inset 0 0 0 26px var(--g), inset 0 0 0 28px var(--a), inset 0 0 0 34px var(--g), inset 0 0 0 35px var(--a); padding: 84px 100px; }
.mk--artdeco .mk-vorn__person { align-items: center; }
.mk--artdeco .mk-vorn__kontakt { align-items: center; }
.mk--artdeco .mk-knopf { background: none; color: var(--a); box-shadow: inset 0 0 0 1.5px var(--a), inset 0 0 0 5px var(--g), inset 0 0 0 6px var(--a); }
.mk--artdeco .mk-knopf--breit, .mk--artdeco .mk-nav .mk-knopf { background: var(--a); color: var(--at); }
.mk--artdeco .mk-brief__kopf { flex-direction: column; align-items: center; gap: 14px; border-bottom: 0; background: linear-gradient(var(--a), var(--a)) 0 100%/100% 1px no-repeat, linear-gradient(var(--a), var(--a)) 0 calc(100% - 7px)/100% 2px no-repeat; padding-bottom: 40px; }
/* Swiss: grosser, enger Satz, alles linksbuendig am Raster */
.mk--swiss .mk-web .mk-titel { font-size: 74px; line-height: .98; }
.mk--swiss .mk-plakat .mk-titel { font-size: 132px; line-height: .9; }
.mk--swiss .mk-info { border-top-width: 4px; }
/* Pop Art: schwarze Kontur, harter Versatz */
.mk--popart .mk-knopf { box-shadow: 0 0 0 3px #111, 6px 6px 0 3px #111; }
.mk--popart .mk-tel .mk-motiv, .mk--popart .mk-plakat .mk-motiv { border-bottom: 6px solid #111; }
.mk--popart .mk-flyer__bild { border-right: 6px solid #111; }
.mk--popart .mk-titel { text-shadow: 4px 4px 0 var(--a); }
.mk--popart .mk-tel .mk-titel, .mk--popart .mk-flyer .mk-titel { text-shadow: 3px 3px 0 var(--a); }
.mk--popart.mk-plakat .mk-titel { color: #FFF; -webkit-text-stroke: 3px #111; paint-order: stroke fill; text-shadow: 7px 7px 0 #111; }
/* Memphis: Kontur, Versatz in Zweitfarbe, Zickzack */
.mk--memphis .mk-knopf { box-shadow: 0 0 0 3px #111, 7px 7px 0 3px var(--z); }
.mk--memphis .mk-info { border-top: 0; padding-top: 34px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Cpath d='M0 10 L6 2 L12 10 L18 2 L24 10' fill='none' stroke='%23111' stroke-width='3'/%3E%3C/svg%3E") 0 0/24px 12px repeat-x; }
.mk--memphis .mk-brief__kopf { border-bottom: 0; padding-bottom: 46px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Cpath d='M0 10 L6 2 L12 10 L18 2 L24 10' fill='none' stroke='%23111' stroke-width='3'/%3E%3C/svg%3E") 0 100%/24px 12px repeat-x; }
/* Vaporwave: Neonleuchten und Fensterknopf */
.mk--vaporwave .mk-titel { text-shadow: 3px 3px 0 var(--z); }
.mk--vaporwave .mk-knopf { border-radius: 0; box-shadow: inset -3px -3px 0 rgba(0,0,0,.35), inset 3px 3px 0 rgba(255,255,255,.55); }
.mk--vaporwave .mk-unterschrift { text-shadow: 2px 2px 0 var(--z); }
/* Neubrutalismus: dicke Raender, harte Schatten, runde Ecken */
.mk--neubrutalismus .mk-knopf { border: 3px solid #111; border-radius: 12px; box-shadow: 5px 5px 0 #111; }
.mk--neubrutalismus .mk-knopf--breit { box-shadow: 4px 4px 0 #111; }
.mk--neubrutalismus.mk-web--split .mk-motiv { border: 4px solid #111; border-radius: 22px; box-shadow: 10px 10px 0 #111; background: var(--gg); overflow: hidden; align-self: center; height: 560px !important; width: 600px !important; }
.mk--neubrutalismus .mk-fakten { border-top: 4px solid #111; }
.mk--neubrutalismus .mk-fakten div + div { border-left: 4px solid #111; }
.mk--neubrutalismus.mk-tel--standard .mk-motiv { margin: 8px 0 22px; width: 342px !important; height: 280px !important; border: 3px solid #111; border-radius: 18px; box-shadow: 6px 6px 0 #111; }
.mk--neubrutalismus.mk-plakat .mk-motiv { border-bottom: 6px solid #111; }
.mk--neubrutalismus .mk-flyer__bild { border-right: 6px solid #111; }
.mk--neubrutalismus .mk-info { border-top-width: 4px; }
.mk--neubrutalismus.mk-vorn, .mk--neubrutalismus.mk-hinten, .mk--neubrutalismus.mk-brief { box-shadow: inset 0 0 0 10px #111; }
.mk--neubrutalismus .mk-unterschrift { display: inline-block; padding: 4px 16px; border: 3px solid #111; border-radius: 10px; background: var(--a); color: #111; box-shadow: 4px 4px 0 #111; }
/* De Stijl: schwarze Balken statt feiner Linien */
.mk--destijl .mk-fakten { border-top: 10px solid #111; }
.mk--destijl .mk-fakten div + div { border-left: 10px solid #111; }
.mk--destijl.mk-plakat .mk-motiv { border-bottom: 14px solid #111; }
.mk--destijl .mk-flyer__bild { border-right: 14px solid #111; }
.mk--destijl .mk-info { border-top-width: 8px; }
.mk--destijl .mk-brief__kopf { border-bottom: 8px solid #111; }
.mk--destijl.mk-vorn { box-shadow: inset 22px 0 0 var(--a), inset 34px 0 0 #111; padding-left: 110px; }
/* Frutiger Aero: Glanz, Verlauf, Rundungen */
.mk--frutigeraero { background: linear-gradient(180deg, color-mix(in srgb, var(--g) 82%, #fff) 0%, var(--g) 70%); }
.mk--frutigeraero .mk-knopf { border-radius: 999px; background: linear-gradient(180deg, color-mix(in srgb, var(--a) 45%, #fff) 0%, var(--a) 50%, color-mix(in srgb, var(--a) 80%, #000) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -2px 6px rgba(0,0,0,.15), 0 6px 16px color-mix(in srgb, var(--a) 40%, transparent); text-shadow: 0 1px 1px rgba(0,0,0,.25); }
.mk--frutigeraero.mk-web--split .mk-motiv { border-radius: 28px; overflow: hidden; align-self: center; height: 560px !important; box-shadow: 0 20px 50px -12px color-mix(in srgb, var(--a) 50%, transparent), inset 0 0 0 1px rgba(255,255,255,.6); }
.mk--frutigeraero.mk-tel--standard .mk-motiv { margin: 8px 0 22px; width: 342px !important; height: 280px !important; border-radius: 22px; }
.mk--frutigeraero .mk-tabs { background: linear-gradient(180deg, color-mix(in srgb, var(--g) 80%, #fff), var(--g)); }
.mk--frutigeraero .mk-info { border-top: 0; padding-top: 26px; background: linear-gradient(90deg, transparent, var(--a), transparent) 0 0/100% 2px no-repeat; }
.mk--frutigeraero .mk-brief__kopf { border-bottom: 0; background: linear-gradient(90deg, var(--a), transparent) 0 100%/100% 3px no-repeat; }
/* Jugendstil: Bogenknopf und Ornamentlinie */
.mk--jugendstil .mk-knopf { border-radius: 30px 30px 4px 4px; }
.mk--jugendstil .mk-info { border-top: 0; padding-top: 30px; background: linear-gradient(var(--a), var(--a)) 0 0/100% 1px no-repeat, linear-gradient(var(--a), var(--a)) 0 5px/100% 1px no-repeat; }
.mk--jugendstil .mk-brief__kopf { border-bottom: 0; padding-bottom: 40px; background: linear-gradient(var(--a), var(--a)) 0 100%/100% 1px no-repeat, linear-gradient(var(--a), var(--a)) 0 calc(100% - 6px)/100% 1px no-repeat; }
.mk--jugendstil .mk-unterschrift { font-style: italic; }
/* Bauhaus: Balken statt Haarlinie */
.mk--bauhaus .mk-info { border-top-width: 6px; }
.mk--bauhaus .mk-brief__kopf { border-bottom: 10px solid var(--a); }
.mk--bauhaus.mk-vorn { box-shadow: inset 0 -26px 0 var(--a); }
.mk--neubrutalismus .mk-klein, .mk--neubrutalismus .mk-flyer .mk-unter { color: var(--t); }
.mk--neubrutalismus .mk-tzeile { color: var(--t); background: var(--a); width: fit-content; padding: 4px 10px; border: 2px solid #111; border-radius: 8px; }
/* Space Age: breite Schrift braucht kleinere Grade */
.mk--spaceage .mk-web .mk-titel { font-size: 62px; line-height: 1.08; }
.mk--spaceage .mk-tel .mk-titel { font-size: 30px; }
.mk--spaceage .mk-plakat .mk-titel, .mk--spaceage .mk-flyer .mk-titel { font-size: 72px; line-height: 1.05; }
.mk--spaceage .mk-knopf { border-radius: 999px; }
.mk--spaceage .mk-fakten b, .mk--spaceage .mk-info b, .mk--spaceage .mk-vorn__person b { font-size: 24px; }
/* Mid-Century: runde Knoepfe, Bumerang-Linie */
.mk--midcentury .mk-knopf { border-radius: 999px; }
/* Gotik: Initiale und doppelte Linie */
.mk--gotik .mk-info { border-top: 0; padding-top: 30px; background: linear-gradient(currentColor, currentColor) 0 0/100% 3px no-repeat, linear-gradient(currentColor, currentColor) 0 7px/100% 1px no-repeat; }
.mk--gotik .mk-brief__kopf { border-bottom: 0; padding-bottom: 40px; background: linear-gradient(var(--a), var(--a)) 0 100%/100% 3px no-repeat, linear-gradient(var(--a), var(--a)) 0 calc(100% - 7px)/100% 1px no-repeat; }
.mk--gotik .mk-brief__lauf > p:first-child::first-letter { float: left; font-family: 'UnifrakturMaguntia', serif; font-size: 96px; line-height: .8; margin: 6px 12px 0 0; color: var(--a); }
.mk--gotik .mk-plakat .mk-titel { font-size: 110px; }
/* Ukiyo-e: Siegelrot, ruhige Linien */
.mk--ukiyoe .mk-knopf { letter-spacing: .24em; }
.mk--ukiyoe .mk-info { border-top-width: 1px; }
/* Psychedelic: alles schwingt */
.mk--psychedelic .mk-titel { line-height: .95; }
.mk--psychedelic.mk-plakat .mk-titel { font-size: 112px; color: var(--a); -webkit-text-stroke: 3px var(--t); paint-order: stroke fill; }
.mk--psychedelic .mk-knopf { border-radius: 999px; box-shadow: 0 0 0 3px var(--t); }
.mk--psychedelic.mk-plakat .mk-plakat__satz, .mk--psychedelic.mk-plakat { text-align: center; }
.mk--psychedelic.mk-plakat .mk-info { text-align: left; }
/* Minimalismus: keine Linien, kein Laerm */
.mk--minimalismus .mk-knopf { background: none; color: var(--t); height: auto; padding: 0 0 4px; border-bottom: 1.5px solid var(--t); }
.mk--minimalismus .mk-nav .mk-knopf { border-bottom-color: var(--a); color: var(--a); }
.mk--minimalismus .mk-knopf--breit { background: var(--t); color: var(--g); height: 54px; border: 0; }
.mk--minimalismus .mk-fakten, .mk--minimalismus .mk-fakten div + div { border: 0; }
.mk--minimalismus .mk-fakten b { color: var(--t); font-weight: 300; }
.mk--minimalismus .mk-info { border-top-width: 1px; }
.mk--minimalismus .mk-brief__kopf { border-bottom: 0; }
.mk--minimalismus .mk-plakat .mk-titel { font-size: 150px; letter-spacing: -.05em; }
.mk--minimalismus .mk-flyer .mk-titel { font-size: 130px; letter-spacing: -.05em; }
.mk--minimalismus .mk-unterschrift { color: var(--t); }
/* Retro: runde Ecken, Streifen */
.mk--retro .mk-knopf { border-radius: 999px; }
.mk--retro .mk-info { border-top: 0; padding-top: 34px; background: linear-gradient(var(--k, var(--a)) 0 6px, var(--a) 6px 12px, var(--z) 12px 18px, transparent 18px) 0 0/100% 18px no-repeat; }
.mk--retro .mk-brief__kopf { border-bottom: 0; padding-bottom: 44px; background: linear-gradient(var(--a) 0 6px, var(--z) 6px 12px, transparent 12px) 0 100%/100% 12px no-repeat; }
/* Cyberpunk: Neon, Schnittkanten */
.mk--cyberpunk .mk-knopf { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }
.mk--cyberpunk .mk-titel { text-shadow: 3px 0 0 var(--z), -3px 0 0 color-mix(in srgb, var(--a) 80%, transparent); }
.mk--cyberpunk .mk-fakten b, .mk--cyberpunk .mk-tzeile { color: var(--z); }
.mk--cyberpunk .mk-fakten, .mk--cyberpunk .mk-fakten div + div { border-color: color-mix(in srgb, var(--z) 40%, transparent); }
.mk--cyberpunk .mk-info { border-top: 2px dashed var(--z); }
.mk--cyberpunk .mk-brief__kopf { border-bottom: 2px solid var(--z); }
/* Y2K: Pillen, Glanz */
.mk--y2k .mk-knopf { border-radius: 999px; background: linear-gradient(180deg, color-mix(in srgb, var(--a) 40%, #fff), var(--a) 55%, color-mix(in srgb, var(--a) 80%, #000)); box-shadow: inset 0 2px 0 rgba(255,255,255,.7), 0 6px 18px color-mix(in srgb, var(--a) 45%, transparent); }
.mk--y2k .mk-titel { background: linear-gradient(180deg, var(--t) 0 45%, color-mix(in srgb, var(--t) 55%, #fff) 50%, var(--t) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mk--y2k .mk-fakten b { color: var(--a); }
/* Kawaii: alles rund und weich */
.mk--kawaii .mk-knopf { border-radius: 999px; box-shadow: 0 4px 0 color-mix(in srgb, var(--a) 70%, #000); }
.mk--kawaii.mk-web--split .mk-motiv { align-self: center; }
.mk--kawaii.mk-tel--standard .mk-motiv { margin: 8px 0 22px; width: 342px !important; border-radius: 28px; }
.mk--kawaii .mk-info { border-top: 3px dotted var(--a); }
.mk--kawaii .mk-brief__kopf { border-bottom: 3px dotted var(--a); }
.mk--kawaii.mk-vorn, .mk--kawaii.mk-brief { box-shadow: inset 0 0 0 18px var(--g), inset 0 0 0 21px var(--a); }
/* Japandi: Luft, feine Linien */
.mk--japandi .mk-knopf { background: none; color: var(--t); box-shadow: inset 0 0 0 1px var(--t); }
.mk--japandi .mk-knopf--breit { background: var(--t); color: var(--g); }
.mk--japandi .mk-info, .mk--japandi .mk-brief__kopf { border-width: 1px; border-color: color-mix(in srgb, var(--t) 40%, transparent); }
.mk--japandi .mk-fakten b { color: var(--t); }
/* Sachplakat: ein Wort, ganz gross */
.mk--sachplakat.mk-plakat .mk-titel { font-size: 260px; line-height: .8; letter-spacing: -.03em; color: var(--a); }
.mk--sachplakat .mk-info { border-top-width: 6px; }
.mk--sachplakat .mk-brief__kopf { border-bottom: 8px solid var(--a); }
.mk--sachplakat.mk-vorn .mk-vorn__marke b { font-size: 96px; color: var(--a); }
/* Pixel Art: Pixelschrift braucht kleine Grade und Luft, VT323 grosse */
.mk--pixelart .mk-nav .mk-marke { font-size: 22px; }
.mk--pixelart .mk-nav ul, .mk--pixelart .mk-klein, .mk--pixelart .mk-knopf { font-size: 11px; line-height: 1.6; }
.mk--pixelart .mk-web .mk-titel { font-size: 58px; line-height: 1.25; }
.mk--pixelart .mk-tel .mk-titel { font-size: 22px; line-height: 1.4; }
.mk--pixelart .mk-tzeile { font-size: 13px; line-height: 1.6; }
.mk--pixelart .mk-tkopf b { font-size: 13px; }
.mk--pixelart .mk-plakat .mk-titel { font-size: 64px; line-height: 1.2; }
.mk--pixelart .mk-flyer .mk-titel { font-size: 54px; line-height: 1.25; }
.mk--pixelart .mk-info b, .mk--pixelart .mk-fakten b { font-size: 18px; line-height: 1.5; }
.mk--pixelart .mk-lauf, .mk--pixelart .mk-unter { font-size: 28px; line-height: 1.25; }
.mk--pixelart .mk-tel .mk-lauf { font-size: 21px; }
.mk--pixelart .mk-info span, .mk--pixelart .mk-fakten span { font-size: 22px; }
.mk--pixelart .mk-brief__lauf { font-size: 31px; line-height: 1.35; }
.mk--pixelart .mk-brief__an, .mk--pixelart .mk-vorn__kontakt { font-size: 26px; }
.mk--pixelart .mk-betreff { font-size: 24px; line-height: 1.5; }
.mk--pixelart .mk-brief__kopf b, .mk--pixelart .mk-vorn__marke b { font-size: 36px; }
.mk--pixelart .mk-vorn__person b { font-size: 22px; line-height: 1.5; }
.mk--pixelart .mk-unterschrift { font-size: 22px; }
.mk--pixelart .mk-knopf { box-shadow: inset -5px -5px 0 rgba(0,0,0,.35), inset 5px 5px 0 rgba(255,255,255,.3); }
.mk--pixelart .mk-tabs { font-size: 8px; }
/* Glassmorphismus: Licht im Hintergrund, Glas im Vordergrund */
.mk--glassmorphismus { background: radial-gradient(circle at 82% 22%, color-mix(in srgb, var(--a) 38%, transparent), transparent 46%), radial-gradient(circle at 8% 92%, color-mix(in srgb, var(--z) 30%, transparent), transparent 42%), var(--g); }
.mk--glassmorphismus .mk-knopf { border-radius: 14px; }
.mk--glassmorphismus .mk-link { border-bottom-color: color-mix(in srgb, currentColor 40%, transparent); }
.mk--glassmorphismus.mk-web--split .mk-motiv, .mk--glassmorphismus.mk-tel--standard .mk-motiv { border-radius: 26px; overflow: hidden; }
.mk--glassmorphismus.mk-tel--standard .mk-motiv { margin: 8px 0 22px; width: 342px !important; height: 280px !important; }
.mk--glassmorphismus .mk-fakten, .mk--glassmorphismus .mk-fakten div + div, .mk--glassmorphismus .mk-info { border-color: color-mix(in srgb, var(--t) 18%, transparent); border-top-width: 1px; }
.mk--glassmorphismus .mk-brief__kopf { border-bottom: 1px solid color-mix(in srgb, var(--t) 20%, transparent); }
.mk--glassmorphismus .mk-tabs { background: color-mix(in srgb, var(--g) 80%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
/* Risografie: Versatz im Titel */
.mk--risografie .mk-titel { text-shadow: 4px -3px 0 color-mix(in srgb, var(--a) 75%, transparent); }
.mk--risografie .mk-knopf { border-radius: 0; }
/* Bohemian: Bogenknopf, weiche Linien */
.mk--bohemian .mk-knopf { border-radius: 30px 30px 6px 6px; }
.mk--bohemian .mk-info { border-top: 1px solid color-mix(in srgb, var(--t) 40%, transparent); }
.mk--bohemian .mk-nav .mk-marke, .mk--bohemian .mk-vorn__marke b, .mk--bohemian .mk-brief__kopf b { font-size: 46px; }
.mk--bohemian .mk-vorn__marke b { font-size: 72px; }
/* Editorial: Linien wie im Heft */
.mk--editorial .mk-knopf { background: none; color: var(--t); height: auto; padding: 0 0 4px; border-bottom: 2px solid var(--a); }
.mk--editorial .mk-knopf--breit { background: var(--t); color: var(--g); height: 54px; border: 0; }
.mk--editorial .mk-nav .mk-marke { font-size: 40px; }
.mk--editorial .mk-brief__kopf { border-bottom: 0; padding-bottom: 36px; background: linear-gradient(var(--t), var(--t)) 0 100%/100% 3px no-repeat, linear-gradient(var(--t), var(--t)) 0 calc(100% - 7px)/100% 1px no-repeat; }
.mk--editorial .mk-info { border-top-width: 1px; }
/* Konstruktivismus, Futurismus: harte Balken */
.mk--konstruktivismus .mk-info, .mk--futurismus .mk-info { border-top-width: 8px; }
.mk--konstruktivismus .mk-brief__kopf, .mk--futurismus .mk-brief__kopf { border-bottom: 10px solid var(--a); }
.mk--konstruktivismus.mk-vorn { box-shadow: inset 0 -40px 0 var(--a); }
/* Wiener Werkstaette: Quadrate statt Linien */
.mk--wienerwerkstaette .mk-info { border-top: 0; padding-top: 30px; background: repeating-linear-gradient(90deg, currentColor 0 12px, transparent 12px 24px) 0 0/100% 12px no-repeat; }
.mk--wienerwerkstaette .mk-brief__kopf { border-bottom: 0; padding-bottom: 40px; background: repeating-linear-gradient(90deg, var(--t) 0 14px, transparent 14px 28px) 0 100%/100% 14px no-repeat; }
.mk--wienerwerkstaette.mk-vorn { box-shadow: inset 0 0 0 22px var(--g), inset 0 0 0 26px var(--t); }
/* Steampunk und Neoklassizismus: doppelte Rahmen */
.mk--steampunk .mk-knopf, .mk--neoklassizismus .mk-knopf { box-shadow: inset 0 0 0 3px var(--a), inset 0 0 0 5px var(--at); }
.mk--steampunk.mk-vorn, .mk--neoklassizismus.mk-vorn { box-shadow: inset 0 0 0 24px var(--g), inset 0 0 0 26px var(--a), inset 0 0 0 31px var(--g), inset 0 0 0 32px var(--a); padding: 84px 100px; }
.mk--neoklassizismus .mk-vorn, .mk--neoklassizismus.mk-vorn { text-align: center; align-items: center; }
.mk--neoklassizismus.mk-vorn .mk-vorn__person, .mk--neoklassizismus.mk-vorn .mk-vorn__kontakt { align-items: center; }
/* Grunge: schief geklebt */
.mk--grunge .mk-knopf { transform: rotate(-1.5deg); }
.mk--grunge .mk-info { border-top: 3px dashed currentColor; }
.mk--grunge .mk-unterschrift { font-family: 'Permanent Marker', cursive; transform: rotate(-3deg); display: inline-block; }
/* Collage */
.mk--collage .mk-web .mk-titel { font-size: 64px; line-height: 1.12; }
.mk--collage .mk-tel .mk-titel { font-size: 30px; }
.mk--collage .mk-plakat .mk-titel { font-size: 92px; }
.mk--collage .mk-flyer .mk-titel { font-size: 84px; }
.mk--collage .mk-knopf { transform: rotate(-2deg); box-shadow: 4px 4px 0 #151515; }
.mk--collage .mk-info { border-top: 3px dashed currentColor; }
/* Rubberhose: runde Knoepfe mit Tuschekontur */
.mk--rubberhose .mk-knopf { border-radius: 999px; box-shadow: 0 0 0 3px #1A1410, 0 5px 0 3px #1A1410; }
.mk--rubberhose .mk-brief__kopf { border-bottom: 3px solid #1A1410; }
/* Isotype und Leitsystem */
.mk--isotype .mk-knopf { border-radius: 0; }
.mk--isotype .mk-info { border-top-width: 4px; }
/* Surreal */
.mk--surreal .mk-knopf { background: none; color: var(--t); box-shadow: inset 0 0 0 1.5px var(--t); }
.mk--surreal .mk-knopf--breit { background: var(--t); color: var(--g); }
/* New Wave: gesperrt und versetzt */
.mk--newwave .mk-web .mk-titel { margin-left: 40px; }
.mk--newwave .mk-knopf { border-radius: 0; }
.mk--newwave .mk-info { border-top: 0; padding-top: 30px; background: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 10px) 0 0/100% 10px no-repeat; }
/* Graffiti */
.mk--graffiti .mk-knopf { border-radius: 4px; transform: rotate(-2deg); box-shadow: 4px 4px 0 #141414; }
.mk--graffiti .mk-nav .mk-marke { font-size: 40px; }
/* Dithering: Fensterknopf */
.mk--dithering .mk-knopf { border-radius: 8px; box-shadow: 0 0 0 2px var(--t), 3px 3px 0 2px var(--t); background: var(--g); color: var(--t); }
.mk--dithering .mk-knopf--breit, .mk--dithering .mk-nav .mk-knopf { background: var(--t); color: var(--g); }
.mk--dithering .mk-web .mk-titel, .mk--dithering .mk-plakat .mk-titel { font-size: 104px; line-height: .9; }
.mk--dithering .mk-lauf { font-size: 18px; }
/* Web 1.0: graue Knoepfe, blaue Links */
.mk--web1 .mk-knopf { border-radius: 0; height: 40px; padding: 0 18px; font-size: 14px; box-shadow: inset -2px -2px 0 #404040, inset 2px 2px 0 #FFFFFF; }
.mk--web1 .mk-knopf--breit { height: 48px; }
.mk--web1 .mk-link, .mk--web1 .mk-nav ul li { color: #6E9BFF; text-decoration: underline; border: 0; }
.mk--web1[data-v="1"] .mk-link, .mk--web1[data-v="1"] .mk-nav ul li, .mk--web1[data-v="2"] .mk-link, .mk--web1[data-v="2"] .mk-nav ul li { color: #0000EE; }
.mk--web1 .mk-klein { color: var(--z); }
.mk--web1 .mk-fakten b { color: var(--z); font-family: 'VT323', monospace; }
/* Skeuomorphismus: Glanz und Praegung */
.mk--skeuomorphismus .mk-knopf { border-radius: 10px; background: linear-gradient(180deg, color-mix(in srgb, var(--a) 55%, #fff), var(--a) 52%, color-mix(in srgb, var(--a) 80%, #000)); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 0 rgba(255,255,255,.6), 0 3px 6px rgba(0,0,0,.3); text-shadow: 0 -1px 0 rgba(0,0,0,.35); }
.mk--skeuomorphismus .mk-titel { text-shadow: 0 1px 0 rgba(255,255,255,.65); }
.mk--skeuomorphismus .mk-tabs { background: linear-gradient(180deg, #F4F4F4, #C9CDD2); }
/* Flat: keine Rundung, kein Schatten */
.mk--flat .mk-knopf { border-radius: 4px; }
.mk--flat .mk-fakten, .mk--flat .mk-fakten div + div { border-color: transparent; }
.mk--flat .mk-fakten { background: color-mix(in srgb, var(--t) 6%, transparent); }
/* Corporate Memphis: Pillen */
.mk--corporatememphis .mk-knopf { border-radius: 999px; }
.mk--corporatememphis.mk-web--split .mk-motiv, .mk--corporatememphis.mk-tel--standard .mk-motiv { border-radius: 28px; overflow: hidden; }
.mk--corporatememphis.mk-tel--standard .mk-motiv { margin: 8px 0 22px; width: 342px !important; height: 280px !important; }
/* Neumorphismus: weiche Erhebungen */
.mk--neumorphismus .mk-knopf { border-radius: 16px; background: var(--g); color: var(--a); box-shadow: -6px -6px 14px color-mix(in srgb, var(--g) 40%, #fff), 6px 6px 14px color-mix(in srgb, var(--g) 70%, #000); }
.mk--neumorphismus .mk-fakten, .mk--neumorphismus .mk-fakten div + div, .mk--neumorphismus .mk-info, .mk--neumorphismus .mk-brief__kopf { border-color: transparent; }
.mk--neumorphismus .mk-fakten div { margin: 0 16px 20px; border-radius: 18px; box-shadow: inset -4px -4px 10px color-mix(in srgb, var(--g) 40%, #fff), inset 4px 4px 10px color-mix(in srgb, var(--g) 75%, #000); padding: 20px 28px; }
.mk--neumorphismus .mk-fakten div + div { padding-left: 28px; }
.mk--neumorphismus .mk-tabs { border-top: 0; box-shadow: 0 -6px 14px color-mix(in srgb, var(--g) 80%, #000); }
/* Clay: weiche Kissen */
.mk--clay .mk-knopf { border-radius: 999px; box-shadow: inset 0 -6px 10px rgba(0,0,0,.12), inset 0 6px 10px rgba(255,255,255,.7), 0 10px 20px color-mix(in srgb, var(--a) 45%, transparent); }
.mk--clay.mk-web--split .mk-motiv { align-self: center; }
.mk--clay.mk-tel--standard .mk-motiv { margin: 8px 0 22px; width: 342px !important; height: 280px !important; border-radius: 32px; overflow: hidden; }
.mk--clay .mk-fakten, .mk--clay .mk-fakten div + div, .mk--clay .mk-info { border-color: transparent; }
/* Aurora */
.mk--aurora .mk-knopf { border-radius: 999px; }
.mk--aurora.mk-web--split .mk-motiv, .mk--aurora.mk-tel--standard .mk-motiv { border-radius: 26px; overflow: hidden; }
.mk--aurora.mk-tel--standard .mk-motiv { margin: 8px 0 22px; width: 342px !important; height: 280px !important; }
.mk--aurora .mk-fakten, .mk--aurora .mk-fakten div + div, .mk--aurora .mk-info { border-color: color-mix(in srgb, var(--t) 16%, transparent); }
/* Brutalismus: Standard, Unterstreichung, harte Kanten */
.mk--brutalismus .mk-knopf { border-radius: 0; border: 2px solid var(--t); }
.mk--brutalismus .mk-link, .mk--brutalismus .mk-nav ul li { text-decoration: underline; color: var(--a); border: 0; }
.mk--brutalismus .mk-fakten, .mk--brutalismus .mk-fakten div + div, .mk--brutalismus .mk-info, .mk--brutalismus .mk-brief__kopf { border-color: var(--t); border-width: 2px; }
.mk--brutalismus .mk-web .mk-titel { font-size: 104px; line-height: .9; }
.mk--brutalismus.mk-plakat .mk-titel { font-size: 200px; line-height: .85; }
/* Bento */
.mk--bento .mk-knopf { border-radius: 999px; }
.mk--bento.mk-web--split .mk-motiv { align-self: center; }
.mk--bento .mk-fakten, .mk--bento .mk-fakten div + div { border-color: transparent; }
.mk--bento .mk-fakten { gap: 14px; padding: 0 56px 22px; }
.mk--bento .mk-fakten div, .mk--bento .mk-fakten div + div { padding: 18px 22px; border-radius: 22px; background: color-mix(in srgb, var(--t) 6%, transparent); }
/* 3D und Morph */
.mk--morph3d .mk-knopf { border-radius: 999px; background: linear-gradient(135deg, var(--a), var(--z)); color: #141414; }
.mk--morph3d .mk-titel { text-shadow: 0 2px 0 color-mix(in srgb, var(--a) 60%, transparent), 0 4px 0 color-mix(in srgb, var(--a) 40%, transparent), 0 6px 0 color-mix(in srgb, var(--a) 20%, transparent); }
/* Handgeschrieben */
.mk--handgeschrieben .mk-knopf { border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; background: none; color: var(--a); box-shadow: inset 0 0 0 2.5px var(--a); font-family: 'Caveat', cursive; font-size: 22px; text-transform: none; letter-spacing: 0; }
.mk--handgeschrieben .mk-knopf--breit { background: var(--a); color: var(--at); }
.mk--handgeschrieben .mk-klein { font-size: 22px; }
.mk--handgeschrieben .mk-plakat .mk-klein, .mk--handgeschrieben .mk-flyer .mk-klein { font-size: 30px; }
.mk--handgeschrieben .mk-web .mk-titel { font-size: 104px; line-height: .95; }
.mk--handgeschrieben .mk-plakat .mk-titel { font-size: 130px; line-height: .95; }
.mk--handgeschrieben .mk-info b, .mk--handgeschrieben .mk-fakten b { font-size: 36px; }
.mk--handgeschrieben .mk-unterschrift { font-family: 'Caveat', cursive; font-size: 56px; }
.mk--handgeschrieben .mk-info { border-top: 2px dashed currentColor; }
/* Kinetisch */
.mk--kinetisch .mk-knopf { border-radius: 0; }
.mk--kinetisch .mk-web .mk-titel { font-size: 104px; line-height: .9; }
.mk--kinetisch.mk-plakat .mk-titel { font-size: 200px; line-height: .85; letter-spacing: -.06em; }
.mk--kinetisch .mk-info { border-top-width: 6px; border-color: var(--a); }
/* Vektor */
.mk--vektor .mk-knopf { border-radius: 6px; }
.mk--vektor .mk-fakten b { font-family: 'Share Tech Mono', monospace; }
/* Maximalismus: Goldrahmen */
.mk--maximalismus .mk-knopf { box-shadow: inset 0 0 0 3px var(--a), inset 0 0 0 6px var(--at), inset 0 0 0 8px var(--a); }
.mk--maximalismus.mk-vorn, .mk--maximalismus.mk-brief { box-shadow: inset 0 0 0 20px var(--g), inset 0 0 0 24px var(--a), inset 0 0 0 30px var(--g), inset 0 0 0 32px var(--a); padding: 90px 110px; }
.mk--maximalismus .mk-brief__fuss { left: 150px; right: 150px; }
.mk--maximalismus .mk-info { border-top: 0; padding-top: 30px; background: linear-gradient(var(--a), var(--a)) 0 0/100% 3px no-repeat, linear-gradient(var(--a), var(--a)) 0 8px/100% 1px no-repeat; }
/* Futuristisch: Ecken und Linien */
.mk--futuristisch .mk-knopf { border-radius: 0; background: none; color: var(--a); box-shadow: inset 0 0 0 1.5px var(--a); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.mk--futuristisch .mk-knopf--breit, .mk--futuristisch .mk-nav .mk-knopf { background: var(--a); color: var(--at); }
.mk--futuristisch .mk-fakten, .mk--futuristisch .mk-fakten div + div, .mk--futuristisch .mk-info { border-color: color-mix(in srgb, var(--a) 40%, transparent); border-top-width: 1px; }
.mk--futuristisch .mk-fakten b { color: var(--a); font-family: 'Share Tech Mono', monospace; font-size: 26px; }
/* Partikel */
.mk--partikel .mk-knopf { border-radius: 999px; background: none; color: var(--t); box-shadow: inset 0 0 0 1px var(--t); }
.mk--partikel .mk-knopf--breit { background: var(--a); color: var(--at); box-shadow: none; }
.mk--partikel .mk-info, .mk--partikel .mk-fakten, .mk--partikel .mk-fakten div + div { border-width: 1px; border-color: color-mix(in srgb, var(--t) 22%, transparent); }

/* =========================================================================
   Anordnungen (LAGE in stil-atlas-einsatz-marken.js)
   ========================================================================= */
/* Website: Motiv randlos rechts */
.mk-web--buehne .mk-held { grid-template-columns: minmax(0, 1fr) 820px; padding: 0 0 0 72px; gap: 56px; align-items: stretch; }
.mk-web--buehne .mk-held__text { align-self: center; }
.mk-web--buehne .mk-motiv { align-self: stretch; background: var(--gg); overflow: hidden; }
/* Website: alles auf der Mittelachse */
.mk-web--mitte .mk-held { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; text-align: center; padding: 0 160px; }
.mk-web--mitte .mk-held__text { display: flex; flex-direction: column; align-items: center; }
.mk-web--mitte .mk-titel { font-size: 80px; }
.mk-web--mitte .mk-lauf { margin-left: auto; margin-right: auto; }
.mk-web--mitte .mk-knoepfe { justify-content: center; }
.mk-web--mitte .mk-motiv { align-self: center; }
/* Website: ein grosser Titel ueber die ganze Breite */
.mk-web--gross .mk-held { display: flex; flex-direction: column; padding: 8px 72px 0; gap: 22px; }
.mk-web--gross .mk-held > .mk-titel { margin: 0; font-size: 150px; line-height: .95; white-space: nowrap; }
.mk-held__unten { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 64px; align-items: end; }
.mk-web--gross .mk-held__text { padding-bottom: 40px; }
.mk-web--gross .mk-motiv { background: var(--gg); overflow: hidden; }
/* Website: Kacheln */
.mk-web--raster .mk-held { grid-template-columns: minmax(0, 1fr) 760px; padding: 0 64px 40px 72px; }
.mk-kacheln { display: grid; grid-template-columns: 360px 1fr; grid-template-rows: repeat(3, 1fr); gap: 16px; height: 100%; max-height: 700px; }
.mk-kacheln .mk-motiv { grid-row: 1 / 4; width: 360px !important; height: 100% !important; border-radius: 28px; overflow: hidden; background: var(--gg); }
.mk-kachel:not(.mk-motiv) { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 22px 26px; border-radius: 24px; background: color-mix(in srgb, var(--t) 7%, var(--g)); }
.mk-kachel b { font-size: 44px; line-height: 1; color: var(--a); }
.mk-kachel span { font-size: 16px; line-height: 1.35; opacity: .8; }
.mk-kachel--0 { background: var(--a) !important; color: var(--at); }
.mk-kachel--0 b { color: var(--at); }

/* Smartphone: Bild oben randlos, Karte darueber */
.mk-tel--voll { padding: 0; }
.mk-tbild { position: absolute !important; left: 0; top: 0; width: 390px !important; height: 470px !important; background: var(--gg); overflow: hidden; }
.mk-tel--voll .mk-status, .mk-tel--voll .mk-tkopf { position: relative; z-index: 1; margin: 0 24px; color: var(--gt); }
.mk-tel--voll .mk-tkopf b { padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--g) 80%, transparent); color: var(--t); }
.mk-tkarte { position: absolute; left: 0; right: 0; top: 410px; bottom: 80px; display: flex; flex-direction: column; padding: 26px 24px 18px; background: var(--g); border-radius: 28px 28px 0 0; }
/* Smartphone: Liste */
.mk-tel--liste .mk-motiv { margin: 4px 0 18px; width: 342px !important; height: 170px !important; border-radius: 18px; overflow: hidden; background: var(--gg); }
.mk-tliste { list-style: none; margin: 16px 0 18px !important; border-top: 1px solid color-mix(in srgb, var(--t) 18%, transparent); }
.mk-tliste li { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid color-mix(in srgb, var(--t) 18%, transparent); }
.mk-tliste b { font-size: 17px; color: var(--a); white-space: nowrap; }
.mk-tliste span { font-size: 13px; text-align: right; opacity: .8; }

/* Plakat: Motiv vollflaechig, Text auf einer Tafel */
.mk-pbild { position: absolute !important; inset: 0; }
.mk-plakat--voll .mk-plakat__satz { position: absolute; left: 56px; right: 56px; bottom: 56px; flex: none; padding: 48px 56px 52px; background: var(--g); }
.mk-plakat--voll .mk-titel { font-size: 84px; }
.mk-plakat--voll .mk-info { margin-top: 36px; }
/* Plakat: Schrift zuerst */
.mk-plakat--typo .mk-plakat__satz { flex: none; padding: 72px 72px 44px; }
.mk-plakat--typo .mk-titel { font-size: 128px; line-height: .94; }
.mk-plakat__fuss { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 30px 72px 60px; }
.mk-plakat__fuss .mk-info { margin-top: 0; }
/* Plakat: gerahmte Mitte */
.mk-plakat--rahmen .mk-plakat__satz { flex: none; align-items: center; text-align: center; padding: 76px 80px 40px; }
.mk-plakat--rahmen .mk-titel { font-size: 96px; }
.mk-prahmen { align-self: center; flex: none; width: 700px; height: 700px; border-radius: 350px 350px 0 0; overflow: hidden; background: var(--gg); box-shadow: 0 0 0 10px var(--g), 0 0 0 13px var(--a); }
.mk-plakat--rahmen .mk-plakat__fuss { text-align: center; align-items: center; justify-content: space-between; padding: 40px 110px 64px; }
.mk-plakat--rahmen .mk-info { width: 100%; text-align: center; }
.mk-plakat--rahmen .mk-info p { align-items: center; }

/* Flyer: Bild rechts */
.mk-flyer--rechts { flex-direction: row-reverse; }
/* Flyer: Bild vollflaechig, Text auf einer Tafel */
.mk-flyer--voll .mk-flyer__bild { position: absolute; inset: 0; width: 1414px; }
.mk-flyer--voll .mk-flyer__satz { position: absolute; top: 50px; right: 50px; bottom: 50px; width: 640px; padding: 60px 60px 48px; background: var(--g); }
.mk-flyer--voll .mk-titel { font-size: 76px; }
/* Flyer: Band oben, Text zweispaltig */
.mk-flyer--oben { flex-direction: column; }
.mk-flyer--oben .mk-flyer__bild { width: 1414px; height: 430px; flex: none; }
.mk-flyer--oben .mk-flyer__satz { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; padding: 56px 80px 52px; }
.mk-flyer--oben .mk-flyer__satz > div { display: flex; flex-direction: column; min-height: 0; }
.mk-flyer--oben .mk-titel { font-size: 82px; }
.mk-flyer--oben .mk-lauf { margin-top: 0; }

/* Visitenkarte: Mittelachse */
.mk-vorn--mitte { align-items: center; text-align: center; }
.mk-vorn--mitte .mk-vorn__rest, .mk-vorn--mitte .mk-vorn__person, .mk-vorn--mitte .mk-vorn__kontakt { align-items: center; }
/* Visitenkarte: geteilt */
.mk-vorn--geteilt { display: grid; grid-template-columns: 410px 1fr; padding: 0; }
.mk-vorn--geteilt .mk-vorn__marke { display: flex; flex-direction: column; justify-content: center; padding: 60px 50px; background: var(--gg); color: var(--gt); }
.mk-vorn--geteilt .mk-vorn__marke b { font-size: 50px; overflow-wrap: anywhere; }
.mk-vorn--geteilt .mk-vorn__marke span { color: var(--gt); opacity: .8; }
.mk-vorn--geteilt .mk-vorn__rest { justify-content: space-between; padding: 72px 70px; }

/* Briefpapier: Mittelachse */
.mk-brief--mitte .mk-brief__kopf { flex-direction: column; align-items: center; gap: 14px; text-align: center; }
/* Briefpapier: Farbband oben */
.mk-brief--band .mk-brief__kopf { margin: -120px -130px 0; padding: 86px 130px 60px; background: var(--gg); color: var(--gt); border-bottom: 0 !important; }
.mk-brief--band .mk-brief__kopf span { color: var(--gt); opacity: .85; }
.mk-web--buehne .mk-titel, .mk-web--raster .mk-titel { font-size: 66px; }
.mk-web--buehne .mk-lauf, .mk-web--raster .mk-lauf { font-size: 18px; }
.mk-flyer--voll .mk-titel { font-size: 66px; }
.mk--collage.mk-web--split .mk-titel { font-size: 54px; }
.mk--pixelart .mk-plakat .mk-titel { font-size: 54px; }
/* Stempel */
.mk-stempel { position: absolute; z-index: 3; display: flex; align-items: center; justify-content: center; width: 150px; height: 150px; border-radius: 50%; font-style: normal; font-size: 30px; line-height: 1; text-align: center;
  background: var(--z); color: var(--t); transform: rotate(-12deg); box-shadow: 0 0 0 4px var(--g), 0 0 0 7px var(--t); }
.mk-web .mk-stempel { right: 640px; top: 150px; width: 110px; height: 110px; font-size: 22px; }
.mk-web--raster .mk-stempel { right: 760px; }
.mk-web--buehne .mk-stempel { right: 770px; }
.mk-plakat .mk-stempel { right: 60px; top: 60px; }
.mk--popart .mk-stempel, .mk--y2k .mk-stempel, .mk--web1 .mk-stempel { clip-path: polygon(50% 0, 61% 18%, 82% 10%, 80% 32%, 100% 40%, 84% 55%, 96% 75%, 74% 76%, 70% 98%, 52% 85%, 32% 100%, 28% 78%, 6% 78%, 16% 58%, 0 42%, 20% 32%, 16% 10%, 38% 18%); box-shadow: none; background: var(--a); color: var(--at); border-radius: 0; }
.mk--web1 .mk-stempel { background: #FFFF00; color: #FF0000; font-family: 'Comic Neue', cursive; }
.mk--cyberpunk .mk-stempel, .mk--pixelart .mk-stempel, .mk--neubrutalismus .mk-stempel, .mk--flat .mk-stempel { border-radius: 0; transform: rotate(-6deg); height: 70px; width: 170px; }
.mk--neubrutalismus .mk-stempel { border-radius: 14px; box-shadow: 5px 5px 0 #111; border: 3px solid #111; background: var(--z); }
.mk--handgeschrieben .mk-stempel, .mk--kawaii .mk-stempel, .mk--clay .mk-stempel { background: none; color: var(--a); box-shadow: inset 0 0 0 3px var(--a); }
.mk--grunge .mk-stempel, .mk--collage .mk-stempel { border-radius: 0; background: var(--a); color: #fff; width: 170px; height: 64px; transform: rotate(-8deg); box-shadow: none; }
.mk--graffiti .mk-stempel { background: var(--a); color: #fff; font-family: 'Sedgwick Ave Display', cursive; }
.mk--corporatememphis .mk-stempel { width: 90px; height: 44px; border-radius: 999px; transform: none; background: var(--z); color: #fff; box-shadow: none; font-size: 18px; }
.mk--rubberhose .mk-stempel { background: var(--z); box-shadow: 0 0 0 4px #1A1410; }
/* Ruhige Stile: weniger Text */
.mk--minimalismus.mk-plakat .mk-unter, .mk--japandi.mk-plakat .mk-unter, .mk--minimalismus.mk-web .mk-link, .mk--partikel.mk-web .mk-link { display: none; }
.mk--minimalismus .mk-tel .mk-lauf, .mk--minimalismus.mk-tel .mk-lauf { display: none; }
.mk--pixelart.mk-plakat .mk-titel { font-size: 46px !important; }
.mk--collage.mk-web--split .mk-lauf { font-size: 17px; }

/* =========================================================================
   Eigene Stuecke (EIGEN) und Feinschliff je Stil, Runde 3
   ========================================================================= */
/* Isotype: das Plakat ist die Bildstatistik */
.mk-iso { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 72px 72px 60px; }
.mk-iso .mk-titel { margin-top: 14px; font-size: 108px; line-height: .95; }
.mk-iso__reihen { margin-top: 56px; flex: none; }
.mk-iso__fuss { margin-top: auto; }
.mk-iso__fuss > p { display: flex; align-items: center; gap: 14px; font-size: 22px; margin-bottom: 26px; }
.mk-iso .mk-info { border-top-width: 4px; }
/* Sachplakat: Gegenstand und Name */
.mk-sach { position: absolute; left: 72px; right: 72px; bottom: 64px; }
.mk-sach .mk-titel { font-size: 330px; line-height: .78; color: var(--a); letter-spacing: -.04em; }
.mk-sach p { margin-top: 26px !important; font-size: 26px; color: var(--gt); }
.mk-plakat.mk-eigen.mk--sachplakat { background: var(--gg); }
.mk--sachplakat.mk-plakat.mk-eigen .mk-motiv { background: var(--gg); }
/* De Stijl: Mondrian-Raster mit Text in den Feldern */
.mk-mondrian { position: absolute; inset: 0; display: grid; grid-template-columns: 560px 1fr 170px; grid-template-rows: 470px 1fr 230px 200px; gap: 22px; background: #111; }
.mk-mfeld { display: flex; flex-direction: column; justify-content: flex-end; padding: 40px 44px; color: #111; }
.mk-mfeld--titel .mk-titel { font-size: 104px; line-height: .95; color: #111; }
.mk-mondrian .mk-klein { color: #111; font-size: 22px; }
.mk-mondrian .mk-unter { font-size: 24px; color: #111; }
.mk-mondrian .mk-info { margin-top: 0; border-top: 0; color: #111; }
/* Kinetische Typografie */
.mk-kin { position: absolute; left: 60px; right: 0; top: 50px; overflow: hidden; }
.mk-kin p { font-family: 'Inter', sans-serif; font-size: 172px; line-height: .82; letter-spacing: -.05em; white-space: nowrap; color: var(--t); }
.mk-kin__fuss { position: absolute; left: 72px; right: 72px; bottom: 60px; }
.mk-kin__fuss .mk-info { border-top-color: var(--a); }
/* Editorial: Titelblatt */
.mk-cover { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 56px 72px 60px; }
.mk-cover__kopf { display: flex; justify-content: space-between; font-size: 18px; padding-bottom: 14px; border-bottom: 1.5px solid var(--t); }
.mk-cover__marke { margin: 14px 0 0; font-size: 190px; line-height: .95; letter-spacing: -.03em; white-space: nowrap; color: var(--t); }
.mk-cover__bild { margin-top: 26px; flex: none; height: 760px; overflow: hidden; }
.mk-cover__zeilen { display: grid; grid-template-columns: 1.1fr 1fr; gap: 50px; margin-top: 34px; align-items: start; }
.mk-cover__zeilen .mk-titel { font-size: 72px; line-height: 1; color: var(--a); }
.mk-cover__zeilen ul { list-style: none; display: grid; gap: 16px; font-size: 24px; line-height: 1.3; padding-top: 10px; border-top: 1.5px solid var(--t); }
.mk-cover__zeilen b { display: block; font-family: 'Jost', sans-serif; font-weight: 500; font-size: 15px; letter-spacing: .2em; text-transform: uppercase; color: var(--a); }
.mk-cover__code { position: absolute; right: 72px; bottom: 56px; background: #fff; padding: 10px; box-sizing: content-box; }
/* Bauhaus */
.mk-bh__bild { position: absolute !important; left: 120px; top: 60px; width: 880px !important; height: 880px !important; }
.mk-bh__senk { position: absolute; left: 34px; top: 70px; height: 880px; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 44px; line-height: 1.35; white-space: nowrap; overflow: hidden; }
.mk-bh__fuss { position: absolute; left: 140px; right: 72px; bottom: 60px; padding-top: 30px; border-top: 16px solid var(--t); }
.mk-bh__fuss .mk-unter { font-size: 28px; margin: 8px 0 30px !important; }
.mk-bh__fuss .mk-info { border-top: 0; padding-top: 0; }
/* Konstruktivismus */
.mk-kon__band { position: absolute; left: -120px; right: -120px; top: 880px; padding: 22px 160px; background: var(--a); color: var(--at); transform: rotate(-12deg); }
.mk-kon__band .mk-titel { font-size: 82px; line-height: 1; color: var(--at); white-space: nowrap; }
.mk-kon__fuss { position: absolute; left: 72px; right: 72px; bottom: 56px; padding: 30px 36px; background: var(--g); }
.mk-kon__fuss .mk-unter { font-size: 24px; margin: 6px 0 24px !important; }
/* Psychedelic */
.mk-psy__schrift { position: absolute; inset: 0; }
.mk-psy__fuss { position: absolute; left: 160px; right: 160px; bottom: 60px; padding: 30px 40px 34px; background: var(--g); border-radius: 60px; text-align: center; box-shadow: 0 0 0 6px var(--t); }
.mk-psy__fuss .mk-unter { font-size: 22px; margin: 6px 0 20px !important; }
.mk-psy__fuss .mk-info { text-align: left; }
/* Ukiyo-e: Kartusche und Siegel */
.mk-uk__kart { position: absolute; right: 80px; top: 80px; width: 110px; padding: 26px 0 22px; display: flex; flex-direction: column; align-items: center; gap: 18px; background: #F3E9D2; color: #1D1D1D; box-shadow: inset 0 0 0 3px #1D1D1D, inset 0 0 0 9px #F3E9D2, inset 0 0 0 10px #1D1D1D; }
.mk-uk__kart b { writing-mode: vertical-rl; font: 600 62px/1 'Yu Mincho', 'Hiragino Mincho ProN', 'Noto Serif JP', serif; letter-spacing: .12em; }
.mk-uk__kart span { writing-mode: vertical-rl; font-size: 15px; }
.mk-uk__siegel { position: absolute; right: 214px; top: 84px; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; background: #B7282E; color: #F7EEDB; font: 600 26px/1 'Yu Mincho', 'Hiragino Mincho ProN', serif; font-style: normal; writing-mode: vertical-rl; border-radius: 4px; }
.mk-uk__fuss { position: absolute; left: 0; right: 0; bottom: 0; padding: 44px 72px 56px; background: var(--g); }
.mk-uk__fuss .mk-titel { font-size: 76px; margin-top: 10px; }
.mk-uk__fuss .mk-info { margin-top: 30px; }

/* Flat: Preisschild flach, ohne Rahmen und Drehung */
.mk--flat .mk-stempel { transform: none; border-radius: 6px; box-shadow: none; background: #E74C3C; color: #FFF; width: 150px; height: 64px; }
/* Neumorphismus: alles aus einem Material, auch Rahmen und Tafeln */
.mk--neumorphismus .mk-prahmen { box-shadow: -22px -22px 44px color-mix(in srgb, var(--g) 30%, #fff), 22px 22px 44px color-mix(in srgb, var(--g) 70%, #000); background: var(--g); }
.mk--neumorphismus .mk-motiv, .mk--neumorphismus .mk-flyer__bild { background: var(--g) !important; }
.mk--neumorphismus .mk-tliste { border: 0; }
.mk--neumorphismus .mk-tliste li { border: 0; margin-bottom: 10px; padding: 12px 16px; border-radius: 14px; box-shadow: inset 3px 3px 8px color-mix(in srgb, var(--g) 75%, #000), inset -3px -3px 8px color-mix(in srgb, var(--g) 40%, #fff); }
.mk--neumorphismus.mk-vorn, .mk--neumorphismus.mk-brief { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g) 85%, #000); }
/* Glassmorphismus: Texte auf mattem Glas */
.mk--glassmorphismus .mk-plakat__satz, .mk--glassmorphismus .mk-flyer__satz, .mk--glassmorphismus .mk-tkarte { background: color-mix(in srgb, var(--g) 35%, transparent) !important; -webkit-backdrop-filter: blur(28px) saturate(1.4); backdrop-filter: blur(28px) saturate(1.4); border: 1.5px solid rgba(255,255,255,.35); border-radius: 32px; }
.mk--glassmorphismus .mk-tkarte { border-radius: 28px 28px 0 0; border-bottom: 0; }
/* Pop Art: Texttafeln wie Sprechblasen-Kaesten im Comic */
.mk--popart .mk-plakat__satz, .mk--popart .mk-flyer--voll .mk-flyer__satz, .mk--popart.mk-flyer--voll .mk-flyer__satz { border: 6px solid #111; box-shadow: 14px 14px 0 #111; background: #FFF6B0; }
/* Risografie und Grunge: Papierkorn ueber allem Gedruckten */
.mk--risografie::after, .mk--grunge::after { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: multiply; opacity: .22; }
.mk--grunge::after { opacity: .38; }
.mk--risografie.mk-web::after, .mk--risografie.mk-tel::after, .mk--grunge.mk-tel::after { opacity: .1; }
/* Pixel Art: Treppenecken */
.mk--pixelart .mk-knopf, .mk--pixelart .mk-stempel { clip-path: polygon(0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 0 calc(100% - 8px)); border-radius: 0; }
.mk--pixelart .mk-info { border-top: 6px dashed currentColor; }
/* Gotik: rote Initiale */
.mk--gotik .mk-flyer .mk-lauf::first-letter { float: left; font-family: 'UnifrakturMaguntia', serif; font-size: 78px; line-height: .8; margin: 6px 10px 0 0; color: var(--a); }
/* Swiss: Raster-Plakat */
.mk-sw { position: absolute; inset: 0; padding: 64px 64px 56px; background: var(--g); overflow: hidden; }
.mk-sw__kreis { position: absolute; right: -170px; top: -150px; width: 760px; height: 760px; border-radius: 50%; background: var(--a); }
.mk-sw__zahl { position: relative; font-size: 520px; line-height: .78; letter-spacing: -.07em; margin-left: -18px !important; color: var(--t); }
.mk-sw .mk-titel { position: relative; margin-top: 60px; font-size: 104px; line-height: .94; letter-spacing: -.04em; }
.mk-sw__unter { margin-top: 26px !important; font-size: 26px; line-height: 1.3; }
.mk-sw__liste { position: absolute; left: 64px; right: 64px; bottom: 120px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 24px; padding-top: 22px; border-top: 4px solid var(--t); font-size: 21px; line-height: 1.3; }
.mk-sw__liste b { display: block; font-size: 30px; font-weight: 700; color: var(--a); }
.mk-sw__fuss { position: absolute; left: 64px; bottom: 56px; font-size: 16px; }
/* Brutalismus: rohes HTML */
.mk-roh { position: absolute; inset: 0; padding: 26px 34px; background: #FFF; color: #000; font: 400 25px/1.4 'Times New Roman', Times, serif; }
.mk-roh h1 { margin: 6px 0 14px; font: 700 110px/1 'Times New Roman', Times, serif; }
.mk-roh h2 { margin: 24px 0 12px; font: 700 46px/1.1 'Times New Roman', Times, serif; }
.mk-roh p { margin: 0 0 14px; }
.mk-roh u { color: #0000EE; }
.mk-roh hr { border: 0; border-top: 2px inset #999; margin: 12px 0; }
.mk-roh table { border: 2px outset #999; border-spacing: 2px; margin: 14px 0 22px; font-size: 24px; }
.mk-roh th, .mk-roh td { border: 1px inset #999; padding: 4px 14px; text-align: left; }
.mk-roh button { font: 400 22px Arial, sans-serif; padding: 3px 12px; background: #E9E9E9; border: 2px outset #CCC; }
.mk-roh__fuss { font-size: 20px; font-style: italic; }
.mk--brutalismus.mk-web[data-v="1"] .mk-roh { background: #A9A9A9; }
.mk--brutalismus.mk-web[data-v="2"] .mk-roh { background: #FF0000; }
/* Vaporwave-Plakat */
.mk-vw__kana { position: absolute; right: 54px; top: 60px; writing-mode: vertical-rl; font: 700 110px/1 'Yu Gothic', 'Hiragino Sans', 'Noto Sans JP', sans-serif; color: #FFFFFF; letter-spacing: .06em; text-shadow: 6px 6px 0 var(--a); }
.mk-vw__titel { position: absolute; left: 60px; top: 70px; width: 640px; font-size: 104px; line-height: .95; color: #FFFFFF; text-shadow: 5px 5px 0 var(--a), 10px 10px 0 #01CDFE; }
.mk-vw__fenster { position: absolute; left: 60px; right: 60px; bottom: 60px; background: #C0C0C0; color: #000; box-shadow: inset -3px -3px 0 #404040, inset 3px 3px 0 #FFF; padding: 4px; font-family: Tahoma, Verdana, sans-serif; }
.mk-vw__leiste { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; background: linear-gradient(90deg, #000080, #1084D0); color: #FFF; font: 700 22px Tahoma, sans-serif; }
.mk-vw__leiste i { font-style: normal; width: 30px; height: 26px; display: flex; align-items: center; justify-content: center; background: #C0C0C0; color: #000; box-shadow: inset -2px -2px 0 #404040, inset 2px 2px 0 #FFF; }
.mk-vw__fenster > div { padding: 22px 26px 26px; }
.mk-vw__fenster .mk-unter { font-size: 24px; color: #000; opacity: 1; font-family: Tahoma, sans-serif; }
.mk-vw__fenster .mk-info { border-top: 2px solid #808080; color: #000; }
.mk-vw__fenster .mk-info b { font-family: Tahoma, sans-serif; font-weight: 700; font-style: normal; font-size: 26px; }
/* Jugendstil und Art deco: Zierrahmen um Plakat und Karte */
.mk--jugendstil.mk-plakat, .mk--jugendstil.mk-vorn { box-shadow: inset 0 0 0 22px var(--g), inset 0 0 0 25px var(--a), inset 0 0 0 31px var(--g), inset 0 0 0 32px var(--a); }
.mk--jugendstil.mk-plakat .mk-plakat__satz { padding-left: 90px; padding-right: 90px; }
/* Neue Stile */
.mk--streamline .mk-knopf { border-radius: 999px; }
.mk--streamline .mk-info { border-top: 0; padding-top: 30px; background: linear-gradient(var(--a), var(--a)) 0 0/100% 5px no-repeat, linear-gradient(var(--a), var(--a)) 0 10px/100% 5px no-repeat; }
.mk--streamline .mk-prahmen { border-radius: 350px; box-shadow: 0 0 0 14px #D9D6CF, 0 0 0 18px #9A9A9A; }
.mk--nationalpark .mk-titel { letter-spacing: .01em; }
.mk--nationalpark .mk-knopf { border-radius: 0; }
.mk--nationalpark.mk-plakat--voll .mk-plakat__satz { left: 0; right: 0; bottom: 0; text-align: center; padding: 50px 60px 56px; background: var(--gg); color: var(--gt); }
.mk--nationalpark.mk-plakat--voll .mk-titel { font-size: 150px; line-height: .9; color: var(--gt); }
.mk--nationalpark.mk-plakat--voll .mk-klein { color: var(--z); font-size: 24px; }
.mk--nationalpark.mk-plakat--voll .mk-info { text-align: left; border-top-color: color-mix(in srgb, var(--gt) 40%, transparent); }
.mk--dekonstruktion .mk-titel { text-shadow: .05em .03em 0 color-mix(in srgb, var(--a) 85%, transparent); line-height: .82; }
.mk--dekonstruktion .mk-knopf { border-radius: 0; transform: rotate(-3deg); }
.mk--dekonstruktion .mk-lauf { text-align: justify; }
.mk--dekonstruktion .mk-info { border-top: 1px solid currentColor; }
.mk--dekonstruktion .mk-plakat__satz { transform: rotate(-2deg); }
.mk--dekonstruktion.mk-web--gross .mk-held > .mk-titel { letter-spacing: -.07em; }
.mk--acid .mk-knopf { border-radius: 0; }
.mk--acid .mk-info { border-top: 0; padding-top: 34px; background: repeating-conic-gradient(currentColor 0 25%, transparent 0 50%) 0 0/20px 20px; background-size: 20px 20px; background-repeat: repeat-x; }
.mk--acid .mk-stempel { background: #F4E21B; color: #0B0B0B; box-shadow: 0 0 0 4px #0B0B0B; }
.mk--outrun .mk-titel { text-shadow: 0 0 .08em var(--a), 0 0 .35em color-mix(in srgb, var(--a) 60%, transparent); color: var(--a); }
.mk--outrun .mk-knopf { border-radius: 0; background: none; color: var(--z); box-shadow: inset 0 0 0 2px var(--z), 0 0 18px color-mix(in srgb, var(--z) 50%, transparent); }
.mk--outrun .mk-knopf--breit, .mk--outrun .mk-nav .mk-knopf { background: var(--a); color: #fff; box-shadow: 0 0 18px color-mix(in srgb, var(--a) 60%, transparent); }
.mk--outrun .mk-info, .mk--outrun .mk-fakten, .mk--outrun .mk-fakten div + div { border-color: color-mix(in srgb, var(--z) 50%, transparent); }
.mk--liquidglass { background: radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--z) 35%, transparent), transparent 50%), radial-gradient(circle at 10% 90%, color-mix(in srgb, var(--a) 25%, transparent), transparent 45%), var(--g); }
.mk--liquidglass .mk-knopf { border-radius: 999px; background: color-mix(in srgb, var(--a) 70%, rgba(255,255,255,.2)); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.8), inset 0 -1px 0 rgba(255,255,255,.3), 0 8px 24px color-mix(in srgb, var(--a) 35%, transparent); }
.mk--liquidglass .mk-plakat__satz, .mk--liquidglass .mk-flyer__satz, .mk--liquidglass .mk-tkarte { background: linear-gradient(160deg, rgba(255,255,255,.4), rgba(255,255,255,.08) 45%, rgba(255,255,255,.2)) !important; -webkit-backdrop-filter: blur(6px) saturate(180%); backdrop-filter: blur(6px) saturate(180%); border-radius: 40px; box-shadow: inset 0 2px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.4), inset 2px 0 0 rgba(255,255,255,.5), 0 20px 50px rgba(0,0,0,.2); }
.mk--liquidglass .mk-tkarte { border-radius: 32px 32px 0 0; }
.mk--liquidglass .mk-tabs { margin: 0 14px 12px; left: 0; right: 0; height: 64px; border: 0; border-radius: 999px; background: rgba(255,255,255,.25); -webkit-backdrop-filter: blur(8px) saturate(180%); backdrop-filter: blur(8px) saturate(180%); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.9); padding-top: 10px; }
.mk--liquidglass .mk-info, .mk--liquidglass .mk-fakten, .mk--liquidglass .mk-fakten div + div { border-color: color-mix(in srgb, var(--t) 18%, transparent); border-top-width: 1px; }
/* Runde 2: Barock, Manga, Dopamine, Dark Academia, Y3K, Tech-Dark */
.mk--barock .mk-knopf { border-radius: 0; background: none; color: var(--a); box-shadow: inset 0 0 0 1.5px var(--a), inset 0 0 0 4px transparent, inset 0 0 0 5px var(--a); }
.mk--barock .mk-info { border-top: 0; padding-top: 26px; background: linear-gradient(90deg, transparent, var(--a) 20%, var(--a) 80%, transparent) 50% 0/80% 1.5px no-repeat, radial-gradient(circle, var(--a) 3px, transparent 3.5px) 50% -6px/14px 14px no-repeat; }
.mk--barock .mk-prahmen { box-shadow: inset 0 0 0 3px var(--a), inset 0 0 0 9px transparent, inset 0 0 0 10px var(--a); }
.mk--manga .mk-knopf { border-radius: 0; box-shadow: 4px 4px 0 #111; border: 2px solid #111; }
.mk--manga .mk-titel { -webkit-text-stroke: 0; }
.mk--manga .mk-info { border-top: 3px solid #111; }
.mk--manga .mk-stempel { background: #fff; color: #111; border-radius: 50% 46% 52% 44%; box-shadow: 0 0 0 3px #111; }
.mk--dopamine .mk-knopf { border-radius: 999px; box-shadow: 0 6px 0 color-mix(in srgb, var(--a) 60%, #000); }
.mk--dopamine .mk-info { border-top: 0; padding-top: 28px; background: linear-gradient(90deg, #FF8A1F 0 20%, #2EC4FF 0 40%, #B6F23A 0 60%, #FFE14D 0 80%, #FF5FA2 0) 0 0/100% 8px no-repeat; }
.mk--dopamine .mk-stempel { background: #FFE14D; color: #1A1A1A; }
.mk--darkacademia .mk-knopf { border-radius: 0; background: none; color: var(--a); border-bottom: 1.5px solid var(--a); padding-left: 0; padding-right: 0; }
.mk--darkacademia .mk-info { border-top: 0; padding-top: 24px; background: linear-gradient(var(--a), var(--a)) 0 0/100% 1px no-repeat, linear-gradient(var(--a), var(--a)) 0 4px/100% 1px no-repeat; }
.mk--y3k .mk-titel { background: linear-gradient(180deg, #FFFFFF 0%, #9AA3B2 48%, #F4F7FB 52%, #7C8594 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mk--y3k .mk-knopf { border-radius: 999px; background: linear-gradient(180deg, #F4F7FB, #A9B2C1); color: #10131A; box-shadow: inset 0 1px 0 #fff, 0 4px 14px rgba(0,0,0,.25); }
.mk--techdark .mk-knopf { border-radius: 8px; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 1px rgba(255,255,255,.08); }
.mk--techdark .mk-info, .mk--techdark .mk-fakten, .mk--techdark .mk-fakten div + div { border-color: rgba(255,255,255,.1); }
/* Runde 3: Anti-Design */
.mk--antidesign .mk-titel { transform: rotate(-4deg); transform-origin: 0 50%; }
.mk--antidesign .mk-knopf { border-radius: 0; background: #D4D4D4; color: #111; box-shadow: inset -3px -3px 0 #7A7A7A, inset 3px 3px 0 #FFFFFF, 4px 4px 0 var(--a); font-family: Arial, sans-serif; text-transform: none; letter-spacing: 0; }
.mk--antidesign .mk-info { border-top: 0; padding-top: 30px; background: repeating-linear-gradient(-45deg, var(--t) 0 10px, var(--k, #FFF200) 10px 20px) 0 0/100% 12px no-repeat; }
.mk--antidesign .mk-marke { text-decoration: underline wavy var(--a); text-underline-offset: .15em; }
.mk--antidesign .mk-stempel { background: var(--a); color: #FFF; border-radius: 0; transform: rotate(14deg) scaleX(1.4); font-family: 'Comic Neue', 'Comic Sans MS', sans-serif; }
/* Runde 4 */
.mk--artscrafts .mk-knopf { border-radius: 0; box-shadow: inset 0 0 0 2px var(--g, #EFE6CF), inset 0 0 0 3px var(--a); }
.mk--artscrafts .mk-info { border-top: 0; padding-top: 26px; background: linear-gradient(var(--t), var(--t)) 0 0/100% 2px no-repeat, linear-gradient(var(--a), var(--a)) 0 6px/100% 1px no-repeat; }
.mk--polnisch .mk-titel { transform: rotate(-2deg); transform-origin: 0 50%; }
.mk--polnisch .mk-knopf { border-radius: 44% 56% 48% 52% / 60% 50% 50% 40%; }
.mk--tattoo .mk-knopf { border-radius: 4px; border: 3px solid #1A1A1A; box-shadow: 3px 3px 0 #1A1A1A; }
.mk--tattoo .mk-titel { text-shadow: .05em .05em 0 var(--a); }
.mk--tattoo .mk-stempel { background: var(--k, #E8B830); color: #1A1A1A; box-shadow: 0 0 0 3px #1A1A1A; font-family: 'Rye', Georgia, serif; }
.mk--blaupause .mk-knopf { border-radius: 0; background: none; color: var(--t); box-shadow: inset 0 0 0 1.5px currentColor; font-family: 'Share Tech Mono', monospace; }
.mk--blaupause .mk-info, .mk--blaupause .mk-fakten, .mk--blaupause .mk-fakten div + div { border-style: dashed; }
.mk--glitch .mk-titel { text-shadow: .04em 0 0 rgba(255,0,64,.9), -.04em 0 0 rgba(0,240,255,.9); }
.mk--glitch .mk-knopf { border-radius: 0; box-shadow: 3px 0 0 #FF0040, -3px 0 0 #00F0FF; }
.mk--glitch .mk-stempel { background: #FF0040; color: #FFF; border-radius: 0; font-family: 'VT323', monospace; box-shadow: 4px 0 0 #00F0FF; }
.mk--solarpunk .mk-knopf { border-radius: 999px 999px 999px 4px; }
.mk--solarpunk .mk-info { border-top: 0; padding-top: 26px; background: radial-gradient(circle at 12px 6px, var(--a) 5px, transparent 5.5px) 0 0/100% 12px no-repeat, linear-gradient(var(--z), var(--z)) 26px 5px/calc(100% - 26px) 2px no-repeat; }
/* Runde 5 */
.mk--rokoko .mk-knopf { border-radius: 999px; box-shadow: inset 0 0 0 1.5px #C79A4A; }
.mk--rokoko .mk-info { border-top: 0; padding-top: 26px; background: radial-gradient(circle, var(--a) 4px, transparent 4.5px) 0 0/22px 10px repeat-x; }
.mk--kubismus .mk-knopf { border-radius: 0; clip-path: polygon(0 10%, 96% 0, 100% 90%, 4% 100%); }
.mk--kubismus .mk-titel { transform: skewX(-4deg); transform-origin: 0 100%; }
.mk--citypop .mk-knopf { border-radius: 999px; background: linear-gradient(90deg, var(--a), #FFD08A); color: #1C3A5E; }
.mk--citypop .mk-info { border-top: 0; padding-top: 26px; background: linear-gradient(90deg, #7FD0E8 0 33%, #FF6F91 33% 66%, #FFD08A 66%) 0 0/100% 6px no-repeat; }
.mk--lowpoly .mk-knopf { border-radius: 0; clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); }
.mk--cottagecore .mk-knopf { border-radius: 999px; box-shadow: inset 0 0 0 2px var(--t); background: none; color: var(--t); }
.mk--cottagecore .mk-info { border-top: 1.5px dashed var(--a); }
.mk--papierschnitt .mk-knopf { border-radius: 14px; box-shadow: 0 4px 8px rgba(0,0,0,.25); }
.mk--papierschnitt .mk-kachel, .mk--papierschnitt .mk-tkarte { box-shadow: 0 6px 14px rgba(0,0,0,.18) !important; }

/* Runde 6 (A): Chinoiserie, Buchmalerei, Volkskunst, Linolschnitt */
.mk--chinoiserie .mk-knopf { border-radius: 0; box-shadow: inset 0 0 0 3px var(--g), inset 0 0 0 4px var(--at); }
.mk--chinoiserie .mk-info { border-top: 0; padding-top: 26px; background: repeating-linear-gradient(90deg, var(--a) 0 10px, transparent 10px 14px, var(--a) 14px 16px, transparent 16px 20px) 0 0/100% 4px no-repeat; }
.mk--buchmalerei .mk-titel::first-letter { color: var(--a); }
.mk--buchmalerei .mk-knopf { border-radius: 0; background: linear-gradient(135deg, #F6E3A0, #C9A23A 48%, #FFF0BC 60%, #B8892C); color: #2A1A10; box-shadow: inset 0 0 0 1.5px #2A1A10; }
.mk--buchmalerei .mk-info { border-top: 3px double var(--a); }
.mk--volkskunst .mk-knopf { border-radius: 999px; box-shadow: inset 0 0 0 3px var(--a), inset 0 0 0 5px rgba(255,255,255,.55); }
.mk--volkskunst .mk-info { border-top: 0; padding-top: 24px; background: radial-gradient(circle, var(--a) 4px, transparent 4.5px) 0 0/20px 10px repeat-x; }
.mk--linolschnitt .mk-knopf { border-radius: 0; clip-path: polygon(1% 6%, 99% 0, 100% 90%, 3% 100%); }
.mk--linolschnitt .mk-info { border-top: 5px solid currentColor; border-image: none; }
.mk--linolschnitt .mk-titel { text-shadow: .03em .02em 0 rgba(0,0,0,.08); }

/* Runde 6 (B) */
.mk--lignclaire .mk-knopf { border-radius: 0; box-shadow: inset 0 0 0 3px #1A1A1A; }
.mk--lignclaire .mk-motiv { box-shadow: 0 0 0 4px #1A1A1A; }
.mk--lignclaire .mk-info { border-top: 0; padding-top: 22px; background: linear-gradient(#1A1A1A, #1A1A1A) 0 0/100% 3px no-repeat; }
.mk--pulp .mk-titel { transform: rotate(-3deg) skewX(-6deg); transform-origin: 0 50%; text-shadow: .05em .05em 0 var(--z), .09em .09em 0 #1A1A1A; }
.mk--pulp .mk-knopf { border-radius: 0; box-shadow: 4px 4px 0 #1A1A1A; }
.mk--pulp .mk-stempel { background: #F2D04A; color: #C8261E; border-radius: 0; box-shadow: 0 0 0 3px #1A1A1A; clip-path: polygon(50% 0, 61% 18%, 82% 8%, 80% 30%, 100% 36%, 86% 52%, 100% 68%, 79% 72%, 82% 94%, 61% 84%, 50% 100%, 39% 84%, 18% 94%, 21% 72%, 0 68%, 14% 52%, 0 36%, 20% 30%, 18% 8%, 39% 18%); padding: 1.4em 1.2em; font-family: Bangers, Impact, sans-serif; }
.mk--infografik .mk-knopf { border-radius: 6px; }
.mk--infografik .mk-info { border-top: 0; padding-top: 24px; background: linear-gradient(90deg, #2F6FED 0 42%, #F2994A 42% 70%, #27AE60 70% 88%, #9B51E0 88%) 0 0/100% 6px no-repeat; }
.mk--infografik .mk-fakten b { font-variant-numeric: tabular-nums; }
.mk--isometrie .mk-knopf { border-radius: 12px; box-shadow: 0 5px 0 rgba(0,0,0,.22); }
.mk--isometrie .mk-kachel, .mk--isometrie .mk-tkarte { border-radius: 18px !important; }

/* Runde 6 (C) */
.mk--bollywood .mk-titel { text-shadow: .04em .05em 0 color-mix(in srgb, var(--t) 35%, transparent); }
.mk--bollywood .mk-knopf { border-radius: 999px; background: linear-gradient(180deg, #FFE066, #FF8C1A); color: #3A0418; box-shadow: inset 0 0 0 2px #FFF3C0, 0 3px 0 #8A1040; }
.mk--bollywood .mk-info { border-top: 0; padding-top: 26px; background: radial-gradient(circle, #FF8C1A 5px, transparent 5.5px) 0 0/18px 12px repeat-x; }
.mk--bollywood .mk-stempel { background: #E0115F; color: #FFE066; font-family: 'Shrikhand', Georgia, serif; }
.mk--papelpicado .mk-knopf { border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% 78%, 92% 100%, 84% 78%, 76% 100%, 68% 78%, 60% 100%, 52% 78%, 44% 100%, 36% 78%, 28% 100%, 20% 78%, 12% 100%, 4% 78%, 0 100%); padding-bottom: 1.1em; }
.mk--papelpicado .mk-info { border-top: 0; padding-top: 28px; background: linear-gradient(90deg, #E8337A 0 25%, #F28C1E 25% 50%, #19B5B0 50% 75%, #F7C51E 75%) 0 0/100% 8px no-repeat; }
.mk--luchalibre .mk-titel { text-shadow: .05em .05em 0 var(--a); }
.mk--luchalibre .mk-knopf { border-radius: 0; border: 3px solid #141414; box-shadow: 4px 4px 0 #141414; }
.mk--luchalibre .mk-info { border-top: 6px solid #141414; }
.mk--luchalibre .mk-stempel { background: #FFEF3A; color: #141414; border-radius: 0; box-shadow: 0 0 0 3px #141414, 5px 5px 0 #141414; font-family: 'Bungee', 'Arial Black', sans-serif; }
.mk--mysticwestern .mk-knopf { border-radius: 0; background: none; color: var(--t); box-shadow: inset 0 0 0 1px var(--a), inset 0 0 0 4px var(--g), inset 0 0 0 5px var(--a); }
.mk--mysticwestern .mk-info { border-top: 0; padding-top: 26px; background: linear-gradient(var(--a), var(--a)) 0 4px/calc(50% - 14px) 1px no-repeat, linear-gradient(var(--a), var(--a)) 100% 4px/calc(50% - 14px) 1px no-repeat, radial-gradient(circle, var(--a) 3.5px, transparent 4px) 50% 0/12px 9px no-repeat; }

/* Runde 6 (D) */
.mk--web20 .mk-knopf { border-radius: 999px; background: linear-gradient(180deg, color-mix(in srgb, var(--a) 72%, #FFFFFF) 0 50%, color-mix(in srgb, var(--a) 88%, #000) 50% 100%); color: #FFFFFF; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a) 60%, #000), 0 3px 8px rgba(0,0,0,.15); text-shadow: 0 1px 1px rgba(0,0,0,.35); font-weight: 600; }
.mk--web20 .mk-marke { -webkit-box-reflect: below -.12em linear-gradient(transparent 55%, rgba(255,255,255,.35)); }
.mk--web20 .mk-info, .mk--web20 .mk-fakten { border-top: 0; padding-top: 22px; background: repeating-linear-gradient(-45deg, var(--z) 0 6px, transparent 6px 12px) 0 0/100% 8px no-repeat; }
.mk--web20 .mk-stempel { clip-path: polygon(50% 0, 61% 18%, 82% 10%, 80% 32%, 100% 40%, 84% 55%, 96% 75%, 74% 76%, 70% 98%, 52% 85%, 32% 100%, 28% 78%, 6% 78%, 16% 58%, 0 42%, 20% 32%, 16% 10%, 38% 18%); box-shadow: none; background: var(--k, #FF7A00); color: #FFFFFF; border-radius: 0; }
.mk--metro .mk-knopf { border-radius: 0; background: none; color: var(--t); box-shadow: inset 0 0 0 2px currentColor; }
.mk--metro .mk-kachel, .mk--metro .mk-tkarte, .mk--metro .mk-motiv { border-radius: 0 !important; }
.mk--metro .mk-titel { margin-left: -.04em; }
.mk--metro .mk-info, .mk--metro .mk-fakten { border-top: 0; padding-top: 22px; background: linear-gradient(var(--a), var(--a)) 0 0/48px 8px no-repeat; }
.mk--kidcore .mk-knopf { border-radius: 999px; box-shadow: 0 5px 0 color-mix(in srgb, var(--a) 55%, #000); }
.mk--kidcore .mk-titel { text-shadow: .05em .05em 0 var(--z); }
.mk--kidcore .mk-info, .mk--kidcore .mk-fakten { border-top: 0; padding-top: 24px; background: linear-gradient(90deg, #E8202A 0 20%, #FF8A00 20% 40%, #FFD400 40% 60%, #1FA84F 60% 80%, #1E5BD8 80%) 0 0/100% 8px no-repeat; }
.mk--kidcore .mk-stempel { background: #FFD400; color: #E8202A; box-shadow: 0 0 0 4px #FFFFFF, 3px 5px 0 4px rgba(0,0,0,.15); font-family: 'Permanent Marker', cursive; }
.mk--lofi .mk-knopf { border-radius: 999px; background: none; color: var(--a); box-shadow: inset 0 0 0 1.5px var(--a); }
.mk--lofi .mk-titel { text-shadow: 0 0 .4em color-mix(in srgb, var(--a) 35%, transparent); }
.mk--lofi .mk-info, .mk--lofi .mk-fakten { border-top: 1px dashed var(--z); }

/* Runde 6 (E) */
.mk--coquette .mk-knopf { border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--a); }
.mk--coquette .mk-info { border-top: 0; padding-top: 24px; background: radial-gradient(circle at 50% 50%, #FFFFFF 3px, #E8DCCF 4.5px, transparent 5px) 0 0/14px 10px repeat-x; }
.mk--coquette .mk-stempel { background: var(--a); color: #FFF; font-family: 'Caveat', cursive; text-transform: none; }
.mk--romantasy .mk-knopf { border-radius: 2px; background: linear-gradient(180deg, #F7E2A6, #C9A13B 55%, #9E7429); color: #22123A; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.mk--romantasy .mk-titel { background: linear-gradient(180deg, #FFF0C2 0%, #E3BE68 46%, #A97C2E 56%, #F3D98E 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mk--romantasy .mk-info { border-top: 0; padding-top: 24px; background: linear-gradient(90deg, transparent, #D4AF5A 20%, #D4AF5A 80%, transparent) 0 0/100% 1px no-repeat, linear-gradient(90deg, transparent, #D4AF5A 30%, #D4AF5A 70%, transparent) 0 5px/100% 1px no-repeat; }
.mk--neogeo .mk-knopf { border-radius: 0; box-shadow: 5px 5px 0 #1A1A1A; }
.mk--neogeo .mk-kachel, .mk--neogeo .mk-tkarte { border-radius: 0 !important; box-shadow: 8px 8px 0 rgba(26,26,26,.55) !important; }
.mk--neogeo .mk-info { border-top: 0; padding-top: 26px; background: linear-gradient(90deg, #FF3EA5 0 33%, #F2FF2E 33% 66%, #3DFF8A 66%) 0 0/100% 8px no-repeat; }
.mk--quietluxury .mk-knopf { border-radius: 0; background: none; color: var(--t); box-shadow: inset 0 0 0 1px currentColor; }
.mk--quietluxury .mk-info, .mk--quietluxury .mk-fakten, .mk--quietluxury .mk-fakten div + div { border-width: 1px; border-color: rgba(128,112,90,.35); }
.mk--neogeo .mk-klein, .mk--neogeo .mk-unter, .mk--neogeo .mk-unterschrift, .mk--neogeo .mk-tzeile, .mk--neogeo .mk-fakten b, .mk--neogeo .mk-kachel b { color: var(--t); text-shadow: .05em .05em 0 var(--a); }

/* Runde 6 (F) */
.mk--organisch .mk-knopf { border-radius: 46% 54% 40% 60% / 60% 44% 56% 40%; }
.mk--organisch .mk-info { border-top: 0; padding-top: 24px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C 30 2, 50 9, 80 5 S 140 2, 198 6' fill='none' stroke='%233B2F26' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/100% 10px no-repeat; }
.mk--organisch .mk-titel { transform: rotate(-1.2deg); transform-origin: 0 50%; }
.mk--weicheschrift .mk-titel { -webkit-text-stroke: .06em currentColor; paint-order: stroke fill; text-shadow: .04em .07em 0 color-mix(in srgb, var(--a) 45%, transparent); }
.mk--weicheschrift .mk-knopf { border-radius: 999px; box-shadow: inset 0 -4px 0 rgba(0,0,0,.14), inset 0 3px 0 rgba(255,255,255,.45); }
.mk--pointillismus .mk-knopf { border-radius: 0; background: none; color: var(--t); box-shadow: inset 0 0 0 1.5px var(--t); }
.mk--pointillismus .mk-info { border-top: 0; padding-top: 24px; background: radial-gradient(circle, var(--a) 3px, transparent 3.5px) 0 0/12px 8px repeat-x, radial-gradient(circle, var(--z) 3px, transparent 3.5px) 6px 0/12px 8px repeat-x; }
.mk--pointillismus .mk-prahmen { box-shadow: inset 0 0 0 10px transparent; background: radial-gradient(circle, var(--a) 3px, transparent 3.5px) 0 0/12px 12px, radial-gradient(circle, var(--z) 3px, transparent 3.5px) 6px 6px/12px 12px; padding: 12px; }
.mk--cyanotypie .mk-knopf { border-radius: 2px; }
.mk--cyanotypie .mk-info, .mk--cyanotypie .mk-fakten, .mk--cyanotypie .mk-fakten div + div { border-color: color-mix(in srgb, var(--t) 35%, transparent); }