/* ===================== THEME VARS ===================== */
:root{
  --bg:#0b0f12;             /* page background */
  --panel:#343528;          /* panels */
  --panel-2:#343528;        /* darker panels */
  --line:#93946C;           /* thin lines */
  --accent4:#38ff33;         /* neon cyan */
  --accent4-soft: rgba(51,209,255,.22);
  --accent4-strong: rgba(51,209,255,.35);
  --text:#A4998A;
  --muted:#93946C;
  --radius:14px;
  --gap:14px;
}
*{box-sizing:border-box}
html,body{background-color:var(--bg);color:var(--text);font:15px/1.55 Rajdhani,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}

/* ===================== FRAME / HEADER ===================== */
.profile-wrap{
width: 100%;
  margin: 26px auto;
  padding: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 30px 70px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.03);
  position: relative;
}
.profile-wrap:before,
.profile-wrap:after{content:"";position:absolute;border:2px solid var(--accent4);filter:drop-shadow(0 0 8px var(--accent4-strong));}
.profile-wrap:before{inset:10px auto auto 10px;width:110px;height:38px;border-right:none;border-bottom:none;border-radius:12px 0 0 0;}
.profile-wrap:after{inset:auto 10px 10px auto;width:160px;height:46px;border-left:none;border-top:none;border-radius:0 0 12px 0;}

.topbar{
  display:flex;align-items:center;gap:12px;justify-content:space-between;
  padding: 10px 12px 14px; border-bottom:1px solid var(--line);
}
.brand{
  display:flex;align-items:center;gap:10px;color:var(--accent4);text-transform:uppercase;letter-spacing:3px;font:700 18px/1 Orbitron,sans-serif
}
.brand .pill{display:inline-block;padding:4px 10px;border:1px solid var(--accent4);border-radius:999px;background:linear-gradient(180deg, rgba(51,209,255,.12), rgba(51,209,255,.04));}
.id-chip{font:600 12px/1 Orbitron,sans-serif;color:var(--muted);letter-spacing:2px}

/* ===================== GRID ===================== */
.grid{display:grid;gap:var(--gap);grid-template-columns: 280px 1fr 320px; margin-top:14px;}
@media (max-width: 1100px){ .grid{ grid-template-columns: 280px 1fr; } .col-right{ grid-column: 1 / -1; } }
@media (max-width: 760px){ .grid{ grid-template-columns: 1fr; } }

.panel{
  background: var(--panel);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 10px 30px rgba(0,0,0,.25);
max-height:380px;
overflow:auto;
}

.panel::-webkit-scrollbar{ height:6px; width:6px; }
.panel::-webkit-scrollbar-thumb{ background: var(--bg-color2); }
.panel::-webkit-scrollbar-track{ background: var(--akzent-color2); }

.panel .head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font:700 12px/1 Orbitron,sans-serif;letter-spacing:2px;text-transform:uppercase;
  color:var(--accent4);margin-bottom:10px
}
.decor{position:absolute;inset:auto 10px 10px auto;width:42px;height:14px;border:2px solid var(--accent4);opacity:.6;border-left:none;border-top:none;border-radius:0 0 6px 0}

/* ===================== IMAGES ===================== */
/* 1) Avatar: 250×210 exakt */
.avatar-box img{width:250px;height:210px;display:block;object-fit:cover;border-radius:10px;border:1px solid var(--line);box-shadow:0 6px 18px rgba(0,0,0,.4)}


.profile-wrap .avatar-box .scan{
  position:absolute; inset:10px 10px auto 10px;
  border:2px solid var(--accent4); /* ) ergänzt */
  border-bottom:none; border-right:none;
  width:70px; height:24px; box-shadow:0 0 8px var(--accent4-strong);
}

/* 2) Icon: max Breite 250 */
.icon-box img{max-width:250px;height:auto;display:block;object-fit:contain;border-radius:10px;border:1px solid var(--line);box-shadow:0 6px 18px rgba(0,0,0,.4)}

/* 3) Signatur: max 450×200 */
.signature-box img{max-width:250px;width:auto;height:auto;display:block;object-fit:contain;border-radius:10px;border:1px solid var(--line);box-shadow:0 6px 18px rgba(0,0,0,.4)}

.center-lead{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:12px}
.center-lead .name{font:700 32px/1.1 Orbitron,sans-serif;letter-spacing:2px;margin:0;color:#e2f6ff}
.center-lead .alias{font:600 14px/1 Orbitron,sans-serif;color:var(--muted);letter-spacing:2px;margin-top:6px}

.bio{margin-top:12px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;position:relative}
.bio:before{content:"";position:absolute;inset:auto auto 12px 12px;width:120px;height:6px;background:linear-gradient(90deg, var(--accent4), transparent);filter:drop-shadow(0 0 6px var(--accent4-strong))}
.bio p{margin:0;color:#93946C; font-size:20px; font-family: typewr;}

/* ===================== CATEGORIES ===================== */
.small-cats{display:grid;gap:var(--gap);grid-template-columns: 1fr 1fr}
@media (max-width:760px){ .small-cats{grid-template-columns:1fr} }
.cat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px; width: 120px; height:100px; overflow:auto;  text-align: justify;}
.cat::-webkit-scrollbar{ height:6px; width:6px; }
.cat::-webkit-scrollbar-thumb{ background: var(--bg-color2); }
.cat::-webkit-scrollbar-track{ background: var(--akzent-color2); }
.cat .title{font:700 11px/1 Orbitron,sans-serif;letter-spacing:2px;color:var(--accent4);text-transform:uppercase;margin-bottom:6px}
.cat p{margin:0;color:#A4998A}

/* big categories */
.big-cat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px; }
.big-cat p::-webkit-scrollbar{ height:6px; width:6px; }
.big-cat p::-webkit-scrollbar-thumb{ background: var(--bg-color2); }
.big-cat p::-webkit-scrollbar-track{ background: var(--akzent-color2); }
.big-cat .title{font:700 12px/1 Orbitron,sans-serif;letter-spacing:2px;color:var(--accent4);text-transform:uppercase;margin-bottom:8px}
.big-cat p{margin:0; max-height:300px; overflow:auto; text-align: justify;}

/* ===================== SHORTFACTS (˜20) ===================== */
.facts{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px}
.facts .title{font:700 12px/1 Orbitron,sans-serif;letter-spacing:2px;color:var(--accent4);text-transform:uppercase;margin-bottom:8px}
.fact-grid{display:grid;gap:8px;grid-template-columns: repeat(2, minmax(0,1fr))}
@media (max-width:760px){ .fact-grid{grid-template-columns:1fr} }
.fact{display:grid;grid-template-columns: 80px 1fr;gap:6px 10px;align-items:center;background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:8px;padding:6px 8px}
.fact .k{font:600 12px/1 Rajdhani;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
.fact .v{font:600 14px/1 Rajdhani;color:#A4998A}

/* tiny HUD buttons (dekorativ) */
.hud-btns{display:flex;gap:8px}
.btn{font:600 11px/1 Orbitron;border:1px solid var(--accent4);color:var(--accent4);padding:4px 8px;border-radius:999px;text-transform:uppercase;letter-spacing:2px;background:linear-gradient(180deg,


/* =========================================
   RESPONSIVE OVERRIDES – einfach ans Ende!
   ========================================= */

/* 0) Container darf die Viewport-Breite nutzen */
.profile-wrap{
  max-width: min(1200px, 96vw);
  margin: clamp(10px, 4vw, 26px) auto;
  padding: clamp(10px, 2.5vw, 18px);
}

/* 1) Grid-Spalten werden flüssig (L / Mitte / R) */
.grid{
  grid-template-columns:
    clamp(220px, 24vw, 280px)     /* linke Spalte schrumpft bis 220px */
    1fr
    clamp(240px, 28vw, 320px);    /* rechte Spalte schrumpft bis 240px */
}

/* 2) Polster & Typo „atmen“ mit */
.panel{ padding: clamp(8px, 1.8vw, 12px); }
.panel .head{ font-size: clamp(10px, 1.4vw, 12px); }
.center-lead .name{ font-size: clamp(22px, 4.2vw, 32px); }
.center-lead .alias{ font-size: clamp(12px, 1.6vw, 14px); }
.fact{ grid-template-columns: clamp(90px, 24vw, 140px) 1fr; }
.fact .k{ font-size: clamp(11px, 1.6vw, 12px); }
.fact .v{ font-size: clamp(12px, 1.8vw, 14px); }

/* 3) Bilder skalieren „downscale only“ */
.avatar-box img{
  /* maximal 250×210, darunter skaliert es mit */
  width: min(250px, 100%);
  aspect-ratio: 250 / 210;
  height: auto;               /* zusammen mit aspect-ratio = responsiv */
  object-fit: cover;
}

.icon-box img{
  max-width: 250px;
  width: 100%;                /* füllt die Box, schrumpft auf kleinen Screens */
  height: auto;
}

.signature-box img{
  max-width: 450px;
  width: 100%;                /* füllt die Box bis 450px */
  max-height: 200px;
  height: auto;
}

/* 4) Breakpoints: bereits vorhanden? – ergänzend feinjustieren */
@media (max-width: 1100px){
  .grid{ grid-template-columns: clamp(220px, 34vw, 280px) 1fr; }
}
@media (max-width: 760px){
  .grid{ grid-template-columns: 1fr; }
  .col-right{ grid-column: 1 / -1; }
}

/* 5) Optional: Deko an ultra-kleinen Screens ausblenden */
@media (max-width: 380px){
  .profile-wrap:before,
  .profile-wrap:after{ display:none; }
}


.title{
  font:700 12px/1 Orbitron,sans-serif;
  letter-spacing:2px;
  color:var(--accent4);
  text-transform:uppercase;
  margin-bottom:8px;
}


/* ===== Shield Profile – Isolation Patch ===== */
.profile-wrap{
  /* Variablen LOKAL, nicht in :root */
  --bg:#0b0f12;
  --panel:#343528;
  --panel-2:#343528;
  --line:#93946C;
  --accent4:#38ff33;
  --accent4-soft: rgba(51,209,255,.22);
  --accent4-strong: rgba(51,209,255,.35);
  --text:#A4998A;
  --muted:#93946C;
  --radius:14px;
  --gap:14px;
}

/* Alle Basis-Selektoren einschränken */
.profile-wrap .topbar,
.profile-wrap .brand,
.profile-wrap .id-chip,
.profile-wrap .grid,
.profile-wrap .panel,
.profile-wrap .panel .head,
.profile-wrap .decor,
.profile-wrap .avatar-box img,
.profile-wrap .icon-box img,
.profile-wrap .signature-box img,
.profile-wrap .center-lead,
.profile-wrap .center-lead .name,
.profile-wrap .center-lead .alias,
.profile-wrap .bio,
.profile-wrap .bio p,
.profile-wrap .small-cats,
.profile-wrap .cat,
.profile-wrap .cat .title,
.profile-wrap .big-cat,
.profile-wrap .big-cat .title,
.profile-wrap .facts,
.profile-wrap .facts .title,
.profile-wrap .fact-grid,
.profile-wrap .fact,
.profile-wrap .fact .k,
.profile-wrap .fact .v { all: revert; } /* Reset auf Browser-Default */

 /* Danach deine echten Regeln – alle mit .profile-wrap Prefix */
.profile-wrap{ 
  width:100%; margin:26px auto; padding:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid var(--line); border-radius:18px;
  box-shadow:0 30px 70px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.03);
  position:relative;
}
.profile-wrap .grid{ display:grid; gap:var(--gap); grid-template-columns:280px 1fr 320px; margin-top:14px; }
@media (max-width:1100px){ .profile-wrap .grid{ grid-template-columns:280px 1fr; } .profile-wrap .col-right{ grid-column:1 / -1; } }
@media (max-width:760px){ .profile-wrap .grid{ grid-template-columns:1fr; } }

.profile-wrap .panel{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:12px; position:relative;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 10px 30px rgba(0,0,0,.25);
  overflow:visible;  /* Fix gegen abgeschnittene Inhalte */
}

.profile-wrap .panel .head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font:700 12px/1 Orbitron,sans-serif; letter-spacing:2px; text-transform:uppercase;
  color:var(--accent4); margin-bottom:10px;
}

/* Bilder – erzwinge gewünschte Breiten lokal */
.profile-wrap .avatar-box img{ width:250px; height:210px; object-fit:cover; border-radius:10px; border:1px solid var(--line); box-shadow:0 6px 18px rgba(0,0,0,.4) }
.profile-wrap .signature-box img{ max-width:450px !important; width:100%; max-height:200px; height:auto; display:block; object-fit:contain; border-radius:10px; border:1px solid var(--line); box-shadow:0 6px 18px rgba(0,0,0,.4) }
.profile-wrap .icon-box img{ max-width:250px; width:100%; height:auto; display:block; object-fit:contain; border-radius:10px; border:1px solid var(--line); box-shadow:0 6px 18px rgba(0,0,0,.4) }

/* Typo */
.profile-wrap .title{ font:700 12px/1 Orbitron,sans-serif; letter-spacing:2px; color:var(--accent4); text-transform:uppercase; margin-bottom:8px; }
.profile-wrap .bio p{ margin:0; color:#93946C; font-size:20px; font-family:"Special Elite",monospace; }

/* Responsive Overrides – ebenfalls gescoped */
.profile-wrap{ max-width:min(1200px,96vw); margin:clamp(10px,4vw,26px) auto; padding:clamp(10px,2.5vw,18px); }
.profile-wrap .grid{
  grid-template-columns: clamp(220px,24vw,280px) 1fr clamp(240px,28vw,320px);
}

/* ---- Kleine Kategorien: 2 Spalten erzwingen ---- */
.profile-wrap .small-cats{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--gap);
}

/* Boxen dürfen die Spalte füllen */
.profile-wrap .small-cats > .cat{
  width: auto !important;   /* falls irgendwo noch width:120px greift */
  min-width: 0;
}

.profile-wrap .small-cats{ 
  display: flex !important;
  flex-wrap: wrap;
  gap: var(--gap);
}
.profile-wrap .small-cats > .cat{
  flex: 1 1 calc(50% - var(--gap)) !important;
}