/* Profile: Profilbild im MK-Visual-Rahmen (wie das Artikel-Cover), Steckbrief, Top 9.
   Rahmen und Betonszene sind Kopien der Artikel-Stile, hier auf .mk-profile-* beschränkt. */

.mk-profile-sr { position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- Betonszene hinter dem Rahmen ---------- */
.mk-profile-scene {
  box-sizing:border-box; position:relative; isolation:isolate; display:block;
  float:left; width:240px; max-width:46%;
  margin:30px 40px 44px 26px; padding:0; overflow:visible;
}
.mk-profile-scene::before {
  content:''; position:absolute; inset:-32px -9px -27px -30px; z-index:-3; pointer-events:none;
  background:radial-gradient(ellipse at 36% 70%,#8c8b871a,transparent 66%),radial-gradient(ellipse at 58% 30%,#b1b0ac1f,transparent 72%);
  filter:blur(12px);
}
.mk-profile-scene__background {
  position:absolute; inset:-48px -10px -27px -36px; overflow:visible; z-index:-2; pointer-events:none; filter:grayscale(1);
  -webkit-mask-image:linear-gradient(transparent,#000 7%,#000 92%,transparent),linear-gradient(90deg,transparent,#000 5%,#000 94%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(transparent,#000 7%,#000 92%,transparent),linear-gradient(90deg,transparent,#000 5%,#000 94%,transparent);
  mask-composite:intersect;
}
.mk-profile-decor { position:absolute; display:block; pointer-events:none; user-select:none; background-repeat:no-repeat; background-position:center; background-size:100% 100%; }
.mk-profile-structure { width:100%; height:112%; left:0; top:-2%; opacity:.72; transform-origin:center; }
.mk-profile-echo { width:87%; height:93%; right:-12%; bottom:-8%; opacity:.24; transform:rotate(180deg); }
.mk-profile-scene[data-structure-position="1"] .mk-profile-structure { transform:scaleX(-1); }
.mk-profile-scene[data-structure-position="2"] .mk-profile-structure { transform:rotate(-9deg); top:-16%; }
.mk-profile-scene[data-structure-position="3"] .mk-profile-structure { transform:scaleX(-1) rotate(-9deg); top:-16%; }
.mk-profile-scene[data-structure-position="4"] .mk-profile-structure { transform:rotate(180deg); top:4%; }
.mk-profile-scene[data-structure-position="5"] .mk-profile-structure { transform:scaleY(-1); top:4%; }
.mk-profile-scene[data-scene-mirror="1"] .mk-profile-echo { transform:rotate(173deg) scaleX(-1); }
.mk-profile-scene[data-scene-wash="1"] .mk-profile-scene__background { opacity:.86; }
.mk-profile-scene[data-scene-wash="2"] .mk-profile-scene__background { filter:grayscale(1) contrast(.95); }
.mk-profile-scene__accents { position:absolute; inset:-24px -10px -22px -29px; z-index:-1; opacity:.5; filter:grayscale(1); overflow:visible; pointer-events:none; user-select:none; }
.mk-profile-detail { width:42%; height:65.5%; left:-3%; bottom:-1%; opacity:.78; }
.mk-profile-detail-echo { width:24%; height:40%; right:-3%; top:-1%; opacity:.38; transform:rotate(180deg); }
.mk-profile-scene[data-detail-position="0"] .mk-profile-detail { top:0; bottom:auto; transform:scaleY(-1); }
.mk-profile-scene[data-detail-position="1"] .mk-profile-detail { left:auto; right:-2%; top:0; bottom:auto; transform:rotate(180deg); }
.mk-profile-scene[data-detail-position="3"] .mk-profile-detail { left:auto; right:-2%; transform:scaleX(-1); }
.mk-profile-scene[data-detail-position="4"] .mk-profile-detail { width:56.5%; height:auto; aspect-ratio:1; left:7%; bottom:5%; transform:rotate(-62deg); }
.mk-profile-scene[data-detail-position="5"] .mk-profile-detail { width:56.5%; height:auto; aspect-ratio:1; left:13%; top:7%; bottom:auto; transform:rotate(113deg); }
.mk-profile-scene[data-detail-position="1"] .mk-profile-detail-echo,
.mk-profile-scene[data-detail-position="3"] .mk-profile-detail-echo { left:0; right:auto; top:auto; bottom:0; transform:none; }

/* ---------- Grünes Gehäuse ---------- */
.mk-profile-monitor {
  box-sizing:border-box; position:relative; z-index:1; display:block; width:100%; margin:0;
  padding:13px 11px 11px; border:1px solid #898c72; border-radius:8px;
  background:linear-gradient(135deg,#484b3a,#34382c 55%,#444735);
  box-shadow:inset 0 0 0 1px #24291d,inset 0 0 0 2px #71765b,inset 0 3px 5px #b0b09633,inset 0 -3px 5px #11170e99,0 3px 5px #0004;
  color:#ced3ad; line-height:1;
  transform:rotate(var(--mk-profile-angle,-1.5deg)); transform-origin:50% 50%;
}
.mk-profile-monitor *, .mk-profile-monitor *::before, .mk-profile-monitor *::after { box-sizing:border-box; }
.mk-profile-monitor__chrome { display:flex; align-items:center; justify-content:space-between; gap:8px; height:13px; margin:0 14px 9px; }
.mk-profile-monitor__name { font:600 8px/1 Arial,Helvetica,sans-serif; letter-spacing:.1em; color:#c3c9a1; text-transform:uppercase; text-shadow:0 1px 1px #0008; }
.mk-profile-monitor__led { display:block; width:8px; height:8px; flex:0 0 8px; border:1px solid #6b4a19; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff2b4,#e8b44e 50%,#9c7026); box-shadow:0 0 0 2px #171e12,0 0 4px #d6b05355; }
.mk-profile-monitor__screen { position:relative; display:block; width:100%; aspect-ratio:1 / 1; padding:5px; border:1px solid #899075; border-radius:4px; background:linear-gradient(130deg,#070e08,#242d1c 60%,#0b130b); box-shadow:0 0 0 1px #171e11,inset 1px 2px 4px #000b,inset -1px -1px 1px #c2c6aa66,0 1px 0 #a0a58b55; line-height:0; }
.mk-profile-monitor__image { display:block; width:100%; height:100%; margin:0; padding:0; border:0; object-fit:cover; background:#fff; }
.mk-profile-monitor__empty { display:flex; width:100%; height:100%; align-items:center; justify-content:center; color:#9aa47f; background:#1b2316; }
.mk-profile-monitor__bottom { display:flex; align-items:center; justify-content:space-between; gap:8px; height:12px; margin:8px 14px 0; }
.mk-profile-monitor__vents { display:block; width:59px; height:4px; border-bottom:1px solid #a0a68333; background:repeating-linear-gradient(90deg,#10170d 0,#10170d 2px,transparent 2px,transparent 5px); }
.mk-profile-monitor__bottom .mk-profile-monitor__name { color:#a2ab87; font-size:7px; letter-spacing:.16em; }
.mk-profile-screw { position:absolute; display:block; width:10px; height:10px; border:1px solid #12190d; border-radius:50%; background:radial-gradient(circle at 33% 25%,#969d7e,#4b5539 42%,#202b17 78%); box-shadow:0 1px 0 #a9b48555,inset 0 0 0 1px #7c876088; pointer-events:none; }
.mk-profile-screw::before, .mk-profile-screw::after { content:''; position:absolute; left:1px; top:3px; width:6px; height:1px; background:#11190b; transform:rotate(45deg); box-shadow:0 1px 0 #b6c09a44; }
.mk-profile-screw::after { transform:rotate(-45deg); }
.mk-profile-screw--tl { top:5px; left:5px; } .mk-profile-screw--tr { top:5px; right:5px; }
.mk-profile-screw--bl { bottom:5px; left:5px; } .mk-profile-screw--br { bottom:5px; right:5px; }

/* ---------- Steckbrief ---------- */
.mk-profile-about { margin:0 0 22px; color:#555; font-size:16px; line-height:1.65; }
.mk-profile-about__intro { margin:0 0 12px; font-size:17px; color:#3f3f3a; }
.mk-profile-about__facts { display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.mk-profile-about__facts li { display:inline-flex; align-items:center; gap:6px; margin:0; padding:5px 12px; border:1px solid #cfcfc4; border-radius:16px; color:#4a4a42; font-size:13px; line-height:1.3; }
.mk-profile-about__place { background:#f3f3ee; }
.mk-profile-hint { margin:0; padding:12px 16px; border:1px dashed #c9c9be; border-radius:7px; color:#666; font-size:14px; line-height:1.5; }

/* ---------- Top 9 ---------- */
.mk-profile-top9 { clear:both; margin:8px 0 30px; padding:22px 20px 24px; background:#f6f6f5; border:1px solid #e2e2df; border-radius:7px; }
.mk-profile-top9__header { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px 20px; margin:0 0 18px; }
.mk-profile-top9__kicker { margin:0; color:#6f6f66; font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.mk-profile-top9__title { margin:2px 0 0; color:#4a4a44; font-size:24px; font-weight:400; line-height:1.2; }
.mk-profile-top9__meta { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; color:#6f6f66; font-size:13px; }
.mk-profile-button { display:inline-flex; align-items:center; min-height:40px; padding:0 16px; border:1px solid #6b6b5f; border-radius:20px; color:#3d3d36; background:#fff; font-size:14px; font-weight:600; text-decoration:none; }
.mk-profile-button:hover, .mk-profile-button:focus-visible { border-color:#3d3d36; color:#1f1f1b; text-decoration:none; }
.mk-profile-top9__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px 14px; margin:0; padding:0; list-style:none; }
.mk-profile-album { display:flex; flex-direction:column; gap:2px; min-width:0; margin:0; }
.mk-profile-album__cover { position:relative; display:block; aspect-ratio:1 / 1; margin:0 0 6px; overflow:hidden; border-radius:5px; background:#ddd; box-shadow:0 2px 6px #0002; text-decoration:none; }
.mk-profile-album__cover img { display:block; width:100%; height:100%; margin:0; object-fit:cover; }
a.mk-profile-album__cover:focus-visible { outline:3px solid #2a6f9b; outline-offset:2px; }
a.mk-profile-album__cover:hover img { opacity:.92; }
.mk-profile-album__placeholder { display:flex; width:100%; height:100%; align-items:center; justify-content:center; color:#ffffffd9; font:900 34px/1 Lato,Arial,sans-serif; letter-spacing:.04em; }
/* Freie Plätze: graue Fläche, Nummer bleibt sichtbar. */
.mk-profile-album--empty .mk-profile-album__cover { background:#e3e3dd; box-shadow:inset 0 0 0 1px #d2d2ca; }
.mk-profile-album__placeholder--empty { background:repeating-linear-gradient(135deg,#e3e3dd 0,#e3e3dd 9px,#dcdcd5 9px,#dcdcd5 18px); }
.mk-profile-album--empty .mk-profile-album__nr { background:#bdbdb4; color:#3d3d36; box-shadow:none; }
.mk-profile-top9__empty { margin:14px 0 0; color:#66665e; font-size:13px; line-height:1.5; }
.mk-profile-tone-0 { background:#3b3647; } .mk-profile-tone-1 { background:#6a2f2f; }
.mk-profile-tone-2 { background:#2e4a3b; } .mk-profile-tone-3 { background:#6e6034; }
.mk-profile-tone-4 { background:#203650; } .mk-profile-tone-5 { background:#56466a; }
.mk-profile-tone-6 { background:#74401f; } .mk-profile-tone-7 { background:#30505b; }
.mk-profile-album__nr { position:absolute; left:8px; top:8px; display:flex; align-items:center; justify-content:center; min-width:34px; height:34px; padding:0 6px; border-radius:17px; background:#141412c7; color:#fff; font:900 16px/1 Lato,Arial,sans-serif; box-shadow:0 1px 4px #0006; }
.mk-profile-album--top .mk-profile-album__nr { background:#fff; color:#1e1e1a; }
.mk-profile-album--gold .mk-profile-album__nr { background:#f2c94c; color:#1e1e1a; }
.mk-profile-album__title { color:#3a3a35; font-size:15px; font-weight:600; line-height:1.3; overflow-wrap:anywhere; }
.mk-profile-album__artist { color:#66665e; font-size:14px; line-height:1.35; overflow-wrap:anywhere; }
.mk-profile-album__review { margin-top:2px; font-size:13px; font-weight:600; }

/* ---------- Kopfzeile: Bild links, Top 9 rechts daneben ---------- */
.mk-profile-hero { clear:both; display:flex; flex-wrap:wrap; align-items:flex-start; gap:24px 34px; margin:0 0 30px; }
.mk-profile-hero__side { flex:0 0 250px; width:250px; min-width:0; }
.mk-profile-hero__side > .mk-profile-scene { float:none; width:220px; max-width:none; margin:34px 0 40px 26px; }
.mk-profile-hero__side > .mk-profile-about { margin:0 0 0 4px; font-size:15px; line-height:1.55; }
.mk-profile-hero__side .mk-profile-about__intro { font-size:15px; margin-bottom:10px; }
.mk-profile-hero__side .mk-profile-about__facts { gap:6px; }
.mk-profile-hero__side .mk-profile-about__facts li { padding:4px 10px; font-size:12px; }
.mk-profile-hero > .mk-profile-top9 { flex:1 1 360px; min-width:0; clear:none; margin:0; padding:18px 18px 20px; }
.mk-profile-hero .mk-profile-top9__header { margin-bottom:14px; }
.mk-profile-hero .mk-profile-top9__title { font-size:21px; }
.mk-profile-hero .mk-profile-top9__grid { gap:14px 14px; max-width:410px; }
.mk-profile-hero .mk-profile-album__nr { left:6px; top:6px; min-width:28px; height:28px; font-size:14px; }
.mk-profile-hero .mk-profile-album__placeholder { font-size:26px; }
.mk-profile-hero .mk-profile-album__title { font-size:14px; }
.mk-profile-hero .mk-profile-album__artist { font-size:13px; }
.mk-profile-hero .mk-profile-album__review { font-size:12px; }

@media (max-width:640px) {
  .mk-profile-hero__side { flex:1 1 100%; width:auto; }
  .mk-profile-hero__side > .mk-profile-about { margin:0 0 4px; }
  .mk-profile-scene,
  .mk-profile-hero__side > .mk-profile-scene { float:none; width:220px; max-width:calc(100% - 60px); margin:40px auto 46px; }
  .mk-profile-top9 { padding:18px 14px 20px; }
  .mk-profile-top9__grid { gap:14px 10px; }
  .mk-profile-album__nr, .mk-profile-hero .mk-profile-album__nr { left:4px; top:4px; min-width:22px; height:22px; padding:0 4px; font-size:12px; }
  .mk-profile-album__placeholder, .mk-profile-hero .mk-profile-album__placeholder { font-size:20px; }
  .mk-profile-album__title, .mk-profile-hero .mk-profile-album__title { font-size:13px; }
  .mk-profile-album__artist, .mk-profile-album__review,
  .mk-profile-hero .mk-profile-album__artist, .mk-profile-hero .mk-profile-album__review { font-size:12px; }
}