/* Schnittstellen: Ports an den Reitern, Modul-Ecke, Profil-Effekte, Hellmodus */

/* ---------- Port neben jedem Reiter ---------- */
.tab-wrap { display: inline-flex; align-items: center; position: relative; flex-shrink: 0; }
.tab-port {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-left: -4px; margin-right: 2px; padding: 0;
  background: none; border: 0; border-radius: 4px; cursor: pointer;
  color: var(--muted, #8e95a3); opacity: 0.45; transition: opacity .15s, color .15s, transform .15s;
}
.tab-port svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.tab-port svg circle { fill: currentColor; stroke: none; }
.tab-port:hover, .tab-port:focus-visible { opacity: 1; transform: translateY(-1px); outline: none; }
.tab-port.frei { color: var(--accent, #4d9fff); opacity: 0.7; }
.tab-port.aktiv { color: #3ddc84; opacity: 1; }
.tab-port.aktiv svg circle:nth-of-type(2) { animation: pin-blink 1.6s infinite; }
@keyframes pin-blink { 50% { opacity: .2; } }
@media (max-width: 768px) {
  .tab-nav .tab-wrap { display: flex; width: 100%; }
  .tab-nav .tab-wrap .tab-link { flex: 1; }
  .tab-port { width: 34px; height: 34px; margin: 0; }
  .tab-port svg { width: 18px; height: 18px; }
}

/* ---------- Port-Fenster ---------- */
.pin-modal { position: fixed; inset: 0; z-index: 9000; background: rgba(5, 7, 10, 0.72); display: flex; align-items: flex-start; justify-content: center; padding: 5vh 12px; overflow-y: auto; }
.pin-box { width: 100%; max-width: 1000px; background: var(--card, #181c25); border: 1px solid var(--border, #262b36); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.5); overflow: hidden; }
.pin-box.zu { max-width: 440px; }
.pin-kopf { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border, #262b36); background: linear-gradient(90deg, rgba(15,60,40,.35), transparent); }
.pin-kopf strong { flex: 1; }
.pin-modul { font-size: .82rem; color: #3ddc84; }
.pin-x { background: none; border: 0; color: var(--muted, #8e95a3); font-size: 1.1rem; cursor: pointer; padding: 2px 6px; }
.pin-stecker { width: 22px; height: 12px; border: 1.5px solid var(--muted, #8e95a3); border-radius: 3px; position: relative; flex-shrink: 0; }
.pin-stecker::after { content: ''; position: absolute; left: 3px; right: 3px; top: 3.5px; height: 2px; background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 5px); color: var(--muted, #8e95a3); }
.pin-stecker.an { border-color: #3ddc84; box-shadow: 0 0 8px rgba(61,220,132,.5); }
.pin-stecker.an::after { color: #3ddc84; }
.pin-gesperrt { padding: 22px; text-align: center; }
.pin-gross { font-size: 2.6rem; }
.pin-klein { font-size: .82rem; color: var(--muted, #8e95a3); }
.pin-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 0; }
.pin-links { padding: 14px 16px; min-width: 0; }
.pin-doku { padding: 14px 16px; border-left: 1px solid var(--border, #262b36); background: rgba(255,255,255,.02); font-size: .85rem; }
.pin-doku h3 { font-size: .9rem; margin: 0 0 8px; }
.pin-doku dl { margin: 0 0 14px; }
.pin-doku dt { font-family: ui-monospace, Consolas, monospace; font-size: .8rem; color: var(--accent, #4d9fff); margin-top: 6px; word-break: break-word; }
.pin-doku dd { margin: 2px 0 0; color: var(--muted, #8e95a3); }
.pin-editor-kopf { display: flex; justify-content: space-between; font-size: .82rem; color: var(--muted, #8e95a3); margin-bottom: 6px; }
.pin-zeilen.voll { color: #ff6b6b; font-weight: 600; }
.pin-editor { display: flex; border: 1px solid var(--border, #262b36); border-radius: 8px; background: #0d1016; height: 300px; overflow: hidden; }
.pin-gutter { margin: 0; padding: 10px 8px; text-align: right; color: #4a5263; background: #0a0c11; font: 13px/19px ui-monospace, Consolas, monospace; overflow: hidden; user-select: none; min-width: 34px; }
.pin-editor textarea { flex: 1; resize: none; border: 0; outline: none; background: transparent; color: #d7e2f0; padding: 10px; font: 13px/19px ui-monospace, Consolas, monospace; tab-size: 2; white-space: pre; }
.pin-aktionen { display: flex; gap: 8px; margin: 10px 0; flex-wrap: wrap; }
.pin-konsole { margin: 0; min-height: 44px; max-height: 160px; overflow: auto; padding: 8px 10px; background: #07090d; border-radius: 8px; font: 12.5px/1.5 ui-monospace, Consolas, monospace; color: #9fb0c4; white-space: pre-wrap; }
.pin-konsole.ok { color: #3ddc84; }
.pin-konsole.fehler { color: #ff7b7b; }
.pin-konsole.warn { color: #f2c94c; }
@media (max-width: 760px) {
  .pin-body { grid-template-columns: 1fr; }
  .pin-doku { border-left: 0; border-top: 1px solid var(--border, #262b36); }
  .pin-editor { height: 240px; }
}

/* Tresor */
.pin-tresor { padding: 12px 16px; border-bottom: 1px solid var(--border, #262b36); background: rgba(242, 201, 76, .05); }
.tresor-kopf { display: flex; justify-content: space-between; align-items: center; font-weight: 600; margin-bottom: 6px; }
.schloesser { display: flex; gap: 6px; }
.schloss { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--border, #262b36); background: #0d1016; opacity: .5; }
.schloss.offen { opacity: 1; border-color: #3ddc84; }
.schloss.jetzt { opacity: 1; border-color: #f2c94c; box-shadow: 0 0 10px rgba(242,201,76,.35); }
.tresor-aufgabe p { margin: 4px 0 6px; font-size: .9rem; }
.tresor-aufgabe details pre { max-height: 140px; overflow: auto; background: #07090d; padding: 8px; border-radius: 6px; font-size: .75rem; white-space: pre-wrap; word-break: break-all; }
.tresor-buch { padding: 6px 8px; border-radius: 6px; background: #0d1016; color: inherit; border: 1px solid var(--border, #262b36); max-width: 100%; }
.tresor-code { text-align: center; padding: 8px; display: grid; gap: 8px; justify-items: center; }
.tresor-code code { font-size: 1.4rem; letter-spacing: .08em; padding: 8px 14px; border: 1px dashed #f2c94c; border-radius: 8px; color: #f2c94c; }

/* ---------- Modul-Ecke ---------- */
.port-mini { display: inline-block; width: 16px; height: 9px; border: 1.5px solid var(--accent, #4d9fff); border-radius: 2px; vertical-align: middle; }
.modul-regal { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 14px; }
.modul-karte { background: var(--card, #181c25); border: 1px solid var(--border, #262b36); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.modul-karte.hat { border-color: rgba(61,220,132,.5); }
.modul-karte.zu { opacity: .6; }
.modul-pcb { height: 74px; border-radius: 8px; background: #0f3d2a; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 8px 8px; position: relative; display: flex; align-items: center; justify-content: center; border: 1px solid #1d6b48; }
.modul-icon { font-size: 2rem; }
.modul-pins { position: absolute; bottom: 5px; left: 10px; right: 10px; display: flex; justify-content: space-between; }
.modul-pins i { width: 6px; height: 6px; border-radius: 50%; background: #d8b45a; box-shadow: 0 0 0 1.5px #8a6d22; }
.modul-name { font-weight: 600; }
.modul-blurb { font-size: .85rem; color: var(--muted, #8e95a3); }
.modul-ports { list-style: none; padding: 0; margin: 4px 0; font-size: .8rem; display: grid; gap: 6px; }
.modul-ports code { font-size: .74rem; }
.modul-meta { font-size: .78rem; color: var(--muted, #8e95a3); margin-top: auto; }
.modul-ok { color: #3ddc84; font-size: .85rem; font-weight: 600; }
.port-tabelle { display: grid; grid-template-columns: auto auto auto 1fr; gap: 8px 16px; font-size: .88rem; align-items: center; }
.pt-was { color: var(--muted, #8e95a3); }
@media (max-width: 700px) { .port-tabelle { grid-template-columns: 1fr 1fr; } .pt-was { grid-column: 1 / -1; margin-bottom: 6px; } }

/* ---------- Profil-Effekte ---------- */
.profile-banner.pin-banner { position: relative; background-image: none; }
.pin-banner-text { position: absolute; right: 18px; bottom: 14px; font: 600 1.05rem ui-monospace, Consolas, monospace; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6); max-width: calc(100% - 140px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pin-status { display: inline-flex; align-items: center; gap: 7px; font-size: .88rem; color: var(--muted, #8e95a3); margin-bottom: 6px; }
.pin-led { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 6px #3ddc84; animation: pin-blink 2s infinite; }

.name-glow { text-shadow: 0 0 10px var(--namefarbe, var(--accent, #4d9fff)), 0 0 22px var(--namefarbe, var(--accent, #4d9fff)); }
.name-neon { color: #fff !important; text-shadow: 0 0 4px #fff, 0 0 10px var(--namefarbe, #ff3df2), 0 0 20px var(--namefarbe, #ff3df2), 0 0 34px var(--namefarbe, #ff3df2); }
.name-glitch { position: relative; animation: name-glitch 2.4s infinite steps(1); }
@keyframes name-glitch { 0%, 88%, 100% { text-shadow: none; transform: none; } 90% { text-shadow: -2px 0 #ff2e63, 2px 0 #08d9d6; transform: translateX(1px); } 94% { text-shadow: 2px 0 #ff2e63, -2px 0 #08d9d6; transform: translateX(-1px); } }
.name-regenbogen { background: linear-gradient(90deg, #ff5e5e, #ffb85e, #f2f25e, #5eff8f, #5ec8ff, #b35eff, #ff5e5e); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: name-rb 6s linear infinite; }
@keyframes name-rb { to { background-position: 200% 0; } }

.profile-card.muster-platine { background-image: linear-gradient(rgba(61,220,132,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(61,220,132,.06) 1px, transparent 1px), radial-gradient(rgba(216,180,90,.18) 2px, transparent 2.5px); background-size: 28px 28px, 28px 28px, 56px 56px; }
.profile-card.muster-matrix { background-image: repeating-linear-gradient(90deg, rgba(61,220,132,.07) 0 1px, transparent 1px 14px), linear-gradient(180deg, rgba(61,220,132,.06), transparent 60%); }
.profile-card.muster-scanlines { background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 4px); }
.profile-card.muster-raster { background-image: radial-gradient(rgba(77,159,255,.16) 1px, transparent 1.5px); background-size: 14px 14px; }
.profile-card.pin-glanz { border-color: rgba(242,201,76,.6); box-shadow: 0 0 0 1px rgba(242,201,76,.25), 0 0 30px rgba(242,201,76,.12); position: relative; overflow: hidden; }
.profile-card.pin-glanz::before { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255,230,150,.10) 50%, transparent 60%); background-size: 250% 100%; animation: glanz 5s linear infinite; pointer-events: none; }
@keyframes glanz { from { background-position: 150% 0; } to { background-position: -100% 0; } }

.profile-avatar.rahmen-puls { box-shadow: 0 0 0 3px var(--accent, #4d9fff); animation: rahmen-puls 2s infinite; }
@keyframes rahmen-puls { 50% { box-shadow: 0 0 0 3px var(--accent, #4d9fff), 0 0 0 9px rgba(77,159,255,.15); } }
.profile-avatar.rahmen-platine { border-color: #1d6b48; box-shadow: 0 0 0 3px #0f3d2a, 0 0 0 5px #d8b45a; }
.profile-avatar.rahmen-gold { border-color: #f2c94c; box-shadow: 0 0 14px rgba(242,201,76,.55); }
.profile-avatar.rahmen-neon { border-color: #ff3df2; box-shadow: 0 0 8px #ff3df2, 0 0 18px rgba(255,61,242,.6); }

/* ---------- Hell/Dunkel ---------- */
.theme-schalter { background: none; border: 0; cursor: pointer; color: inherit; }
.theme-schalter .th-dunkel { display: none; }
html[data-theme="hell"] .theme-schalter .th-hell { display: none; }
html[data-theme="hell"] .theme-schalter .th-dunkel { display: inline-flex; }
/* Hellmodus: Farben umdrehen, Bilder/Videos/Canvas wieder zurückdrehen */
html[data-theme="hell"] { filter: invert(0.92) hue-rotate(180deg); background: #0b0d12; }
html[data-theme="hell"] img,
html[data-theme="hell"] video,
html[data-theme="hell"] canvas,
html[data-theme="hell"] iframe,
html[data-theme="hell"] .profile-banner.pin-banner,
html[data-theme="hell"] .modul-pcb { filter: invert(1) hue-rotate(180deg); }

/* Desktop: Port sitzt klein oben rechts am Reiter und braucht keinen eigenen Platz */
@media (min-width: 769px) {
  .tab-nav .tab-wrap .tab-link { padding-left: 10px; padding-right: 9px; }
  .tab-nav .tab-wrap .tab-port { position: absolute; top: 3px; right: 1px; width: 14px; height: 12px; margin: 0; z-index: 2; }
  .tab-nav .tab-wrap .tab-port svg { width: 12px; height: 12px; }
}