/* ════════════════════════════════════════════════════════════
   GL-App — Bewerbungsseite Girot Lohroff
   Design: Operation-BlueTooth-Theme + GL-Logo (Grün→Blau)
   1. Design-Tokens (Light = Standard, Dark via [data-theme])
   2. Basis & Typografie
   3. Komponenten (Buttons, Toggle, Nav, Cards, Forms, Badges)
   4. Login
   5. CV (Hero, Sidebar, Timeline)
   6. Admin
   7. Animationen & Responsive
   ════════════════════════════════════════════════════════════ */

/* ── 1. Design-Tokens ─────────────────────────────────────── */
:root {
  --bg:            #F6FAFF;
  --bg-alt:        #EDF4FD;
  --surface:       #FFFFFF;
  --ink:           #0B1B33;
  --ink-soft:      #44567A;
  --line:          #D7E4F6;

  --blue:          #1E6FE8;
  --blue-deep:     #0A2A5E;
  --blue-glow:     #6FB6FF;
  --blue-ice:      #DCEBFF;
  --green:         #56BE4B;          /* Logo-Grün */

  --grad-gl:       linear-gradient(120deg, #56BE4B 0%, #1E6FE8 100%);

  --shadow-card:   0 10px 32px rgba(10, 42, 94, .08);
  --shadow-node:   0 6px 24px rgba(30, 111, 232, .14);

  --font-display:  "Sora", system-ui, sans-serif;
  --font-body:     "Inter", system-ui, sans-serif;
  --font-mono:     "IBM Plex Mono", monospace;
  --font-brand:    "Exo 2", "Rajdhani", "Sora", system-ui, sans-serif; /* Visitenkarten-Font */
  /* Tagline-Verlauf wie auf der Visitenkarte: Grün → Petrol → Blau */
  --grad-tagline:  linear-gradient(90deg, #56BE4B 0%, #18A89E 38%, #1E88D8 68%, #1460C8 100%);

  --container:     1120px;
  --radius:        18px;
  --radius-sm:     12px;
  --nav-h:         72px;

  --ease-out:      cubic-bezier(.22, .9, .3, 1);
  --t-theme:       .45s;
}

[data-theme="dark"] {
  --bg:            #060D1A;
  --bg-alt:        #0A1426;
  --surface:       #0E1B30;
  --ink:           #EAF3FF;
  --ink-soft:      #9DB4D8;
  --line:          #1C2E4D;

  --blue:          #3D8BFF;
  --blue-deep:     #BBDCFF;
  --blue-glow:     #79C2FF;
  --blue-ice:      #12233F;
  --green:         #5ECC52;

  --grad-gl:       linear-gradient(120deg, #5ECC52 0%, #3D8BFF 100%);

  --shadow-card:   0 12px 36px rgba(0, 0, 0, .45);
  --shadow-node:   0 6px 28px rgba(61, 139, 255, .22);
}

/* Bloom — „Pink Flower"-Theme (drittes Theme) */
[data-theme="bloom"] {
  --bg:            #FFF4FA;
  --bg-alt:        #FCE6F2;
  --surface:       #FFFFFF;
  --ink:           #3D1230;
  --ink-soft:      #91577C;
  --line:          #F4D2E6;

  --blue:          #E14F9B;   /* Primär = Magenta-Pink */
  --blue-deep:     #A52C6E;
  --blue-glow:     #FFA6D6;
  --blue-ice:      #FCE1F0;
  --green:         #F4789F;   /* Sekundär = Rosé */

  --grad-gl:       linear-gradient(120deg, #FF8FC7 0%, #C13A8E 100%);
  --grad-tagline:  linear-gradient(90deg, #F4789F 0%, #E14F9B 50%, #B12F8C 100%);

  --shadow-card:   0 12px 34px rgba(177, 47, 115, .14);
  --shadow-node:   0 6px 24px rgba(225, 79, 155, .22);
}

/* ── 2. Basis & Typografie ────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  transition: background var(--t-theme) ease, color var(--t-theme) ease;
  -webkit-font-smoothing: antialiased;
}

.container {
  width: min(var(--container), 100% - 48px);
  margin-inline: auto;
}

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.15;
  margin: 0 0 .5em;
  letter-spacing: -.015em;
}
h1 em, h2 em, .brand__name em, .footer__brand em, .login-card__title em {
  font-style: normal;
  background: var(--grad-gl);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

p { margin: 0 0 1em; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: var(--font-mono); font-size: .85em; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

.mono {
  font-family: var(--font-mono);
  font-size: .82em;
  letter-spacing: .02em;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: .9rem;
}

/* Leiterbahn-Hintergrund (dezent, fix) */
.circuit-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(86, 190, 75, .07), transparent 32%),
    radial-gradient(circle at 88% 80%, rgba(30, 111, 232, .09), transparent 36%),
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 56px 56px, 56px 56px;
  opacity: .35;
  transition: opacity var(--t-theme) ease;
}
[data-theme="dark"] .circuit-bg { opacity: .22; }

/* ── 3. Komponenten ───────────────────────────────────────── */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  padding: .8rem 1.6rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out),
              background .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover { text-decoration: none; }
.btn--primary {
  background: var(--grad-gl);
  color: #fff;
  box-shadow: 0 6px 20px rgba(30, 111, 232, .3);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(30, 111, 232, .38);
}
.btn--ghost {
  border-color: var(--line);
  color: var(--ink);
  background: transparent;
}
.btn--ghost:hover {
  border-color: var(--blue);
  color: var(--blue);
  transform: translateY(-2px);
}
.btn--danger {
  border-color: transparent;
  background: rgba(220, 53, 69, .1);
  color: #D23B4E;
}
.btn--danger:hover { background: #D23B4E; color: #fff; transform: translateY(-2px); }
.btn--danger:disabled { opacity: .35; pointer-events: none; }
.btn--sm { padding: .5rem 1.05rem; font-size: .83rem; }
.btn--lg { padding: 1rem 2.1rem; font-size: 1.05rem; }
.btn--block { width: 100%; }

/* Theme-Toggle */
.theme-toggle {
  position: relative;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: border-color .18s ease, background var(--t-theme) ease, transform .18s var(--ease-out);
}
.theme-toggle:hover { border-color: var(--blue); transform: rotate(12deg); }
.theme-toggle__icon {
  position: absolute;
  width: 20px; height: 20px;
  stroke: var(--ink);
  stroke-width: 1.8;
  stroke-linecap: round;
  fill: none;
  transition: opacity .3s ease, transform .45s var(--ease-out);
}
/* Standard: alle Icons aus, dann das passende einblenden (3 Themes) */
.theme-toggle__icon { opacity: 0; transform: rotate(60deg) scale(.6); }
[data-theme="light"] .theme-toggle__icon--sun,
:root:not([data-theme]) .theme-toggle__icon--sun { opacity: 1; transform: none; }
[data-theme="dark"]  .theme-toggle__icon--moon   { opacity: 1; transform: none; }
[data-theme="bloom"] .theme-toggle__icon--flower { opacity: 1; transform: none; }

/* Navigation */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  transition: background var(--t-theme) ease, border-color var(--t-theme) ease;
}
.nav__inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 2rem;
  position: relative;
}
.brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--ink);
}
.brand:hover { text-decoration: none; }
.brand__name {
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: .01em;
  white-space: nowrap;
}
.gl-mark { display: block; }
.gl-mark__traces { stroke: var(--blue); }
.gl-mark__traces circle { fill: var(--blue); }

.nav__links {
  display: flex;
  gap: 1.6rem;
  margin-left: auto;
}
.nav__links a {
  color: var(--ink-soft);
  font-size: .92rem;
  font-weight: 500;
  position: relative;
  transition: color .15s ease;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -6px;
  height: 2px;
  background: var(--grad-gl);
  transition: right .25s var(--ease-out);
}
.nav__links a:hover { color: var(--blue); text-decoration: none; }
.nav__links a:hover::after, .nav__links a.is-active::after { right: 0; }
.nav__links a.is-active { color: var(--ink); }
.nav-menu-toggle {
  display: none;
  align-items: center;
  gap: .55rem;
  padding: .48rem .75rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  cursor: pointer;
}
.nav-menu-toggle > span {
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  box-shadow: 0 5px 0 currentColor, 0 -5px 0 currentColor;
}
.nav-menu-toggle span + span { display: none; }
.nav-menu-toggle em { font-style: normal; font-size: .84rem; }

.nav__actions {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-left: auto;
}
.nav__links + .nav__actions { margin-left: 0; }
.nav__user { color: var(--ink-soft); white-space: nowrap; }

/* Cards */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem;
  box-shadow: var(--shadow-card);
  transition: transform .22s var(--ease-out), border-color .22s ease,
              background var(--t-theme) ease, box-shadow .22s ease;
}
.card:hover { border-color: color-mix(in srgb, var(--blue) 45%, var(--line)); }
.card--accent { border-top: 3px solid transparent; border-image: linear-gradient(120deg, #56BE4B, #1E6FE8) 1; }
.card__title {
  font-size: .82rem;
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 1rem;
}

/* Flash-Messages */
.flash-stack { margin-top: 1.2rem; display: grid; gap: .6rem; }
.flash {
  padding: .8rem 1.1rem;
  border-radius: var(--radius-sm);
  font-size: .92rem;
  border: 1px solid;
  animation: flash-in .4s var(--ease-out);
}
.flash--success { background: rgba(86, 190, 75, .1); border-color: rgba(86, 190, 75, .4); color: #2E8B27; }
[data-theme="dark"] .flash--success { color: #7FDC74; }
.flash--error { background: rgba(210, 59, 78, .08); border-color: rgba(210, 59, 78, .35); color: #C42B3E; }
[data-theme="dark"] .flash--error { color: #FF8B9A; }
.flash--info { background: color-mix(in srgb, var(--blue) 8%, transparent); border-color: color-mix(in srgb, var(--blue) 28%, transparent); color: var(--ink-soft); }
.flash--info a { color: var(--blue); font-weight: 700; text-decoration: none; }
.flash--info a:hover { text-decoration: underline; }
@keyframes flash-in { from { opacity: 0; transform: translateY(-8px); } }

/* Formulare */
.form { display: grid; gap: 1.1rem; }
.form__field { display: grid; gap: .4rem; }
.form__field span {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.form__field input, .form__field select,
.inline-form input, .inline-form select {
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--ink);
  background: var(--bg-alt);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .7rem .9rem;
  width: 100%;
  transition: border-color .18s ease, background var(--t-theme) ease, box-shadow .18s ease;
}
.form__field input:focus, .form__field select:focus,
.inline-form input:focus, .inline-form select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent);
}

/* Badges */
.badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .18rem .6rem;
  border-radius: 999px;
  border: 1px solid;
  vertical-align: middle;
}
.badge--green { color: var(--green); border-color: color-mix(in srgb, var(--green) 55%, transparent); background: color-mix(in srgb, var(--green) 10%, transparent); }
.badge--blue  { color: var(--blue);  border-color: color-mix(in srgb, var(--blue) 45%, transparent);  background: color-mix(in srgb, var(--blue) 8%, transparent); }
.badge--warn  { color: #C77B00; border-color: rgba(199, 123, 0, .5); background: rgba(255, 170, 0, .1); }

/* Key-Value-Tabellen */
.kv-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.kv-table td { padding: .35rem 0; vertical-align: top; }
.kv-table td:first-child { color: var(--ink-soft); width: 90px; }

/* ── 4. Login ─────────────────────────────────────────────── */
.login-stage {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 3rem 24px;
  position: relative;
}
/* Rotierender Gradient-Rahmen um die Login-Karte */
@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.login-frame {
  width: min(424px, 100%);
  padding: 2px;
  border-radius: calc(var(--radius) * 1.3 + 2px);
  background: conic-gradient(from var(--angle),
    var(--green), var(--blue) 25%,
    transparent 50%, transparent 75%,
    var(--green));
  animation: spin-angle 5s linear infinite;
  box-shadow: var(--shadow-node);
}
@keyframes spin-angle { to { --angle: 360deg; } }
.login-card {
  width: 100%;
  background: var(--surface);
  border-radius: calc(var(--radius) * 1.3);
  box-shadow: var(--shadow-card);
  padding: 2.6rem 2.4rem 2.2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: background var(--t-theme) ease, border-color var(--t-theme) ease;
}
.login-card__mark { margin-bottom: 1.2rem; display: flex; justify-content: center; }
.login-card__title {
  font-family: var(--font-brand);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: .015em;
  margin-bottom: .25rem;
}
.login-card__sub { margin-bottom: 1.8rem; }
.login-card .form { text-align: left; margin-top: 1.2rem; }
.login-card__hint {
  margin: 1.4rem 0 0;
  font-size: .72rem;
  color: var(--ink-soft);
  border-top: 1px dashed var(--line);
  padding-top: 1rem;
}
.login-stage__theme { position: absolute; top: 1.4rem; right: 1.6rem; }

/* ── 5. CV ────────────────────────────────────────────────── */
.page { flex: 1; padding: clamp(2rem, 5vw, 3.5rem) 0 4rem; }
.page__head { margin-bottom: 2rem; }
.page__head h1 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 800; }
.page__sub { color: var(--ink-soft); }

/* Hero */
.cv-hero {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(1.6rem, 4vw, 2.8rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 1.3);
  box-shadow: var(--shadow-card);
  margin-bottom: 1.4rem;
  position: relative;
  overflow: hidden;
  transition: background var(--t-theme) ease, border-color var(--t-theme) ease;
  /* 3D-Tilt: JS setzt transform inline (würde sonst mit .reveal kollidieren) */
  will-change: transform;
}
.cv-hero::after {
  content: "";
  position: absolute;
  left: var(--mx, 82%); top: var(--my, 10%);
  width: 380px; height: 380px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--blue-glow) 28%, transparent), transparent 65%);
  pointer-events: none;
  transition: left .25s ease-out, top .25s ease-out;
}
.cv-hero__photo-wrap {
  flex-shrink: 0;
  padding: 4px;
  border-radius: 50%;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    conic-gradient(from var(--angle, 0deg),
      color-mix(in srgb, var(--green) 48%, var(--surface)),
      color-mix(in srgb, var(--blue) 52%, var(--surface)),
      color-mix(in srgb, var(--green) 48%, var(--surface))) border-box;
  border: 2px solid transparent;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--blue) 10%, transparent);
  animation: spin-angle 18s linear infinite;
  position: relative;
}
/* Orbit-Dots ums Foto (Netzwerk-Motiv) */
.cv-hero__orbit {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  pointer-events: none;
  opacity: .45;
  animation: orbit-rotate 16s linear infinite;
}
.cv-hero__orbit::before {
  content: "";
  position: absolute;
  top: 2px; left: 50%;
  width: 6px; height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--blue-glow) 72%, var(--surface));
  box-shadow: 0 0 6px color-mix(in srgb, var(--blue-glow) 38%, transparent);
}
.cv-hero__orbit--b {
  inset: -18px;
  border: 1px dashed color-mix(in srgb, var(--line) 58%, transparent);
  animation-duration: 24s;
  animation-direction: reverse;
}
.cv-hero__orbit--b::before {
  width: 5px; height: 5px;
  background: color-mix(in srgb, var(--green) 70%, var(--surface));
  box-shadow: 0 0 6px color-mix(in srgb, var(--green) 35%, transparent);
}
@keyframes orbit-rotate { to { transform: rotate(360deg); } }
.cv-hero__photo {
  display: block;
  width: clamp(110px, 16vw, 160px);
  height: clamp(110px, 16vw, 160px);
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 4px solid var(--surface);
  transition: border-color var(--t-theme) ease;
}
.cv-hero__name {
  font-family: var(--font-brand);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 600;
  letter-spacing: .015em;
  margin-bottom: .1em;
}
.cv-hero__tagline { margin-bottom: .55em; }
.cv-hero__role {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  font-weight: 600;
  color: var(--blue);
  margin-bottom: .3em;
}
.cv-hero__sub { color: var(--ink-soft); font-size: .95rem; }
.cv-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 1.3rem;
  list-style: none;
  padding: 0;
  margin: 1.1rem 0 0;
  font-size: .85rem;
  color: var(--ink-soft);
}
.cv-hero__trust li { display: flex; align-items: center; gap: .45rem; }
.cv-hero__trust li::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--grad-gl);
  box-shadow: 0 0 8px var(--blue-glow);
}

/* Zweispaltiges CV-Layout */
.cv-grid {
  display: grid;
  grid-template-columns: 330px 1fr;
  gap: 1.6rem;
  align-items: start;
}
.cv-side { display: grid; gap: 1.2rem; }

/* Kontaktliste */
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; font-size: .92rem; }
.contact-list li { display: flex; gap: .7rem; align-items: flex-start; }
.contact-list__ico { flex-shrink: 0; width: 22px; text-align: center; }

/* Sprachbalken */
.lang { margin-bottom: .9rem; }
.lang:last-child { margin-bottom: 0; }
.lang__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: .9rem;
  margin-bottom: .35rem;
}
.lang__row .mono { color: var(--ink-soft); font-size: .68rem; }
.lang__bar {
  height: 6px;
  background: var(--bg-alt);
  border-radius: 3px;
  overflow: hidden;
  transition: background var(--t-theme) ease;
}
.lang__fill {
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: var(--grad-gl);
  transition: width 1.1s var(--ease-out);
}
.lang__fill.animate { width: var(--target); }

/* Skill-Tags */
.tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.tag {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .03em;
  padding: .25rem .6rem;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--bg-alt);
  color: var(--ink-soft);
  transition: all .18s ease;
  cursor: default;
}
.tag:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-1px); }
/* Farbvarianten (im Backend pro Tag wählbar) */
.tag--hl, .tag--green { --tagc: var(--green); }
.tag--blue   { --tagc: var(--blue); }
.tag--cyan   { --tagc: #0FB5C9; }
.tag--orange { --tagc: #E8842B; }
.tag--purple { --tagc: #8B5CF6; }
.tag--red    { --tagc: #E0455A; }
.tag[class*="tag--"] {
  border-color: color-mix(in srgb, var(--tagc) 50%, transparent);
  background: color-mix(in srgb, var(--tagc) 9%, transparent);
  color: color-mix(in srgb, var(--tagc) 72%, var(--ink));
  font-weight: 500;
}
.tag[class*="tag--"]:hover {
  border-color: var(--tagc);
  color: var(--tagc);
  box-shadow: 0 0 10px color-mix(in srgb, var(--tagc) 25%, transparent);
}

/* Sektionstitel */
.section-title {
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  font-weight: 700;
  margin-bottom: 1.6rem;
}

/* Timeline */
.timeline {
  position: relative;
  padding-left: 2rem;
  display: grid;
  gap: 1.1rem;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 8px; top: 12px; bottom: 12px;
  width: 2px;
  background: linear-gradient(180deg, var(--green), var(--blue) 55%, transparent);
  opacity: .5;
}
.tl {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.3rem 1.5rem;
  transition: transform .22s var(--ease-out), border-color .22s ease,
              background var(--t-theme) ease;
}
.tl:hover { transform: translateX(4px); border-color: color-mix(in srgb, var(--blue) 50%, var(--line)); }
.tl__node {
  position: absolute;
  left: calc(-2rem + 2px);
  top: 1.55rem;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 15%, transparent);
  transition: all .22s ease;
}
.tl__node--active {
  border-color: var(--green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 20%, transparent), 0 0 12px color-mix(in srgb, var(--green) 45%, transparent);
}
.tl:hover .tl__node { transform: scale(1.25); }
.tl__head {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
  margin-bottom: .3rem;
}
.tl__years { color: var(--blue); font-size: .74rem; letter-spacing: .1em; }
.tl__title { font-size: 1.08rem; font-weight: 700; margin-bottom: .1em; }
.tl__sub { color: var(--ink-soft); font-size: .88rem; font-style: italic; margin-bottom: .4em; }
.tl__bullets {
  margin: .5rem 0 0;
  padding-left: 1.1rem;
  display: grid;
  gap: .3rem;
  font-size: .9rem;
  color: color-mix(in srgb, var(--ink) 85%, var(--ink-soft));
}
.tl__bullets li::marker { color: var(--green); }

/* ── 6. Admin & Profil ────────────────────────────────────── */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
  align-items: start;
}
.admin-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 1.6rem;
  align-items: start;
}
.admin-sidebar,
.admin-main {
  display: grid;
  gap: 1.6rem;
  align-items: start;
}
.user-list { display: grid; gap: .9rem; }
.user-row { display: grid; gap: .9rem; padding: 1.1rem 1.3rem; }
.user-row__id {
  display: flex;
  align-items: center;
  gap: .9rem;
}
.user-row__id > div { flex: 1; min-width: 0; }
.user-row__id strong { font-family: var(--font-display); margin-right: .4rem; }
.user-row__id small { display: block; color: var(--ink-soft); }
.token-copy {
  display: grid;
  gap: .25rem;
  margin: .45rem 0 .25rem;
  max-width: 100%;
}
.token-copy > span:first-child {
  color: var(--ink-soft);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.token-copy__row {
  display: flex;
  gap: .45rem;
  align-items: center;
  max-width: 100%;
}
.token-copy input {
  width: min(100%, 520px);
  padding: .45rem .6rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-size: .78rem;
}
.token-copy__btn { flex-shrink: 0; }
.user-row__avatar {
  flex-shrink: 0;
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--grad-gl);
  color: #fff;
  font-weight: 600;
}
.user-row__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  padding-top: .8rem;
  border-top: 1px dashed var(--line);
}
.audit-list { display: grid; gap: .55rem; }
.audit-row {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: .35rem .7rem;
  align-items: center;
  padding: .65rem 0;
  border-bottom: 1px dashed var(--line);
}
.audit-row:last-child { border-bottom: 0; }
.audit-row small {
  grid-column: 1 / -1;
  color: var(--ink-soft);
}
.user-meta {
  display: grid;
  grid-template-columns: minmax(150px, 210px) 1fr auto;
  gap: .7rem;
  align-items: end;
  padding-top: .8rem;
  border-top: 1px dashed var(--line);
}
.user-meta label { display: grid; gap: .3rem; }
.user-meta span {
  color: var(--ink-soft);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.user-meta textarea {
  min-height: 42px;
  resize: vertical;
  padding: .55rem .7rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
}
.inline-form { display: flex; gap: .45rem; align-items: center; }
.inline-form input, .inline-form select {
  width: auto;
  min-width: 0;
  padding: .42rem .7rem;
  font-size: .84rem;
}
.inline-form input[name="password"] { width: 150px; }

.health-table-wrap { overflow-x: auto; }
.health-table th:first-child,
.health-table td:first-child { min-width: 150px; }
.health-table td:last-child { color: var(--ink-soft); word-break: break-word; }
.health-code {
  margin: 1rem 0 0;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--blue) 6%, var(--panel));
  color: var(--ink);
  overflow-x: auto;
}
.btn--xs { padding: .3rem .6rem; font-size: .78rem; line-height: 1; }

/* CV-Inhalte-Editor (admin/skills.php) */
.skill-sec { display: grid; gap: 1rem; }
.skill-sec__head {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
  justify-content: space-between;
  padding-bottom: .8rem;
  border-bottom: 1px dashed var(--line);
}
.skill-sec__rename { flex: 1; min-width: 220px; }
.skill-sec__rename input[name="title"] {
  font-family: var(--font-display);
  font-weight: 600;
  flex: 1;
}
.skill-sec__tools { display: flex; gap: .6rem; }
.skill-sec__empty { color: var(--ink-soft); font-size: .78rem; margin: 0; }
.tagedit { display: flex; flex-direction: column; gap: .45rem; }
.tagedit__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding: .35rem .55rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-alt);
  transition: border-color .18s ease, background var(--t-theme) ease;
}
.tagedit__row:hover { border-color: color-mix(in srgb, var(--blue) 40%, var(--line)); }
.tagedit__row > .tag { margin-right: auto; }
.tagedit__row select { padding: .3rem .5rem; font-size: .78rem; }
.skill-sec__add { padding-top: .4rem; }
.skill-sec__add input[name="label"] { flex: 1; min-width: 140px; }

/* ── Footer ───────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--line);
  padding: 1.6rem 0;
  transition: border-color var(--t-theme) ease;
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
  justify-content: space-between;
  font-size: .82rem;
  color: var(--ink-soft);
}
.footer__brand { font-family: var(--font-brand); font-weight: 600; color: var(--ink); }

/* ── 7. Animationen & Responsive ─────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .65s var(--ease-out), transform .65s var(--ease-out);
}
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media (max-width: 960px) {
  .cv-grid, .admin-grid, .grid-2 { grid-template-columns: 1fr; }
  .user-meta { grid-template-columns: 1fr; }
  .cv-hero { flex-direction: column; text-align: center; }
  .cv-hero__trust { justify-content: center; }
  .nav__inner { gap: .9rem; }
  .nav-menu-toggle { display: inline-flex; margin-left: auto; }
  .nav__links {
    position: absolute;
    top: calc(100% + .7rem);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    gap: .15rem;
    margin-left: 0;
    padding: .55rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--surface) 96%, var(--bg));
    box-shadow: var(--shadow-card);
  }
  .nav__links.is-open { display: flex; }
  .nav__links a {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: .55rem .75rem;
    border-radius: 10px;
  }
  .nav__links a::after { display: none; }
  .nav__links a:hover,
  .nav__links a.is-active {
    background: color-mix(in srgb, var(--blue) 9%, transparent);
    color: var(--ink);
  }
  .nav__actions { margin-left: 0; gap: .55rem; }
  .nav__user { display: none; }
}

@media (max-width: 640px) {
  .container { width: calc(100% - 32px); }
  .nav__inner { gap: .8rem; }
  .brand__name { display: none; }
  .nav-menu-toggle em { display: none; }
  .nav__links { font-size: .9rem; }
  .timeline { padding-left: 1.5rem; }
  .tl__node { left: calc(-1.5rem + 2px); }
}

/* ════════════════════════════════════════════════════════════
   8. WOW-EFFEKTE
   ════════════════════════════════════════════════════════════ */

/* ── Logo-Mark (logo_klein.png, freigestellt) ────────────── */
.logo-mark { display: inline-flex; }
.logo-mark img {
  display: block;
  filter: drop-shadow(0 4px 14px rgba(30, 111, 232, .25));
}
[data-theme="dark"] .logo-mark img {
  filter: drop-shadow(0 0 14px rgba(111, 182, 255, .35));
}
.logo-mark--nav { cursor: pointer; }
.logo-mark--nav img { height: 42px; width: auto; }
.logo-mark--lg img { width: 110px; height: auto; animation: logo-float 5s ease-in-out infinite; }
@keyframes logo-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes sheen-once { to { left: 140%; } }

/* ── Tagline (Visitenkarten-Schriftzug) ──────────────────── */
.tagline {
  display: inline-block;
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  background: var(--grad-tagline);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}
.tagline--lg { font-size: .85rem; letter-spacing: .34em; }
@media (max-width: 640px) {
  .tagline { font-size: .6rem; letter-spacing: .2em; }
  .tagline--lg { font-size: .7rem; letter-spacing: .24em; }
}

/* ── Gradient-Text-Shimmer ───────────────────────────────── */
.cv-hero__name em, .login-card__title em, .page__head h1 em {
  background: linear-gradient(120deg, #56BE4B 0%, #1E6FE8 40%, #56BE4B 70%, #1E6FE8 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: text-shimmer 7s linear infinite;
}
@keyframes text-shimmer { to { background-position: -250% 0; } }

/* ── Typewriter-Cursor ───────────────────────────────────── */
.is-typing::after {
  content: "▍";
  color: var(--green);
  animation: caret-blink .8s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }

/* ── Scroll-Progressbar ──────────────────────────────────── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: var(--grad-gl);
  box-shadow: 0 0 10px color-mix(in srgb, var(--blue) 50%, transparent);
  z-index: 200;
  pointer-events: none;
}

/* ── Timeline: Füll-Linie + Datenpuls + Node-Pop ─────────── */
.timeline::after {
  content: "";
  position: absolute;
  left: 8px; top: 12px;
  width: 2px;
  height: calc((100% - 24px) * var(--tl-progress, 0));
  background: linear-gradient(180deg, var(--green), var(--blue));
  box-shadow: 0 0 8px color-mix(in srgb, var(--blue-glow) 70%, transparent);
  transition: height .25s linear;
}
.timeline__pulse {
  position: absolute;
  left: 9px;
  top: calc(12px + (100% - 24px) * var(--tl-progress, 0));
  width: 11px; height: 11px;
  margin-left: -4.5px;
  margin-top: -5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px var(--blue-glow), 0 0 5px var(--blue);
  transition: top .25s linear;
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  animation: pulse-breathe 1.6s ease-in-out infinite;
}
.timeline.is-tracking .timeline__pulse { opacity: 1; }
@keyframes pulse-breathe {
  0%, 100% { box-shadow: 0 0 12px var(--blue-glow), 0 0 5px var(--blue); }
  50%      { box-shadow: 0 0 22px var(--blue-glow), 0 0 8px var(--blue); }
}
.tl.is-visible .tl__node { animation: node-pop .7s var(--ease-out); }
@keyframes node-pop {
  0%   { transform: scale(.4); box-shadow: 0 0 0 0 color-mix(in srgb, var(--blue) 45%, transparent); }
  55%  { transform: scale(1.45); box-shadow: 0 0 0 9px transparent; }
  100% { transform: scale(1); }
}

/* ── Stats-Band (Count-up) ───────────────────────────────── */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-bottom: 2rem;
}
.stat {
  padding: 1.4rem 1rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  text-align: center;
  transition: transform .22s var(--ease-out), border-color .22s ease, background var(--t-theme) ease;
}
.stat:hover { transform: translateY(-4px); border-color: var(--blue); }
.stat__value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -.02em;
  background: var(--grad-gl);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat__label {
  display: block;
  margin-top: .25rem;
  font-size: .85rem;
  color: var(--ink-soft);
}
@media (max-width: 640px) { .stats { grid-template-columns: 1fr; } }

/* ── Sheen-Sweep auf Tags & Buttons ──────────────────────── */
.tag, .btn { position: relative; overflow: hidden; }
.tag::before, .btn::before {
  content: "";
  position: absolute;
  top: 0; left: -130%;
  width: 55%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
[data-theme="dark"] .tag::before,
[data-theme="dark"] .btn::before {
  background: linear-gradient(105deg, transparent, rgba(190, 224, 255, .25), transparent);
}
.tag:hover::before, .btn:hover::before { animation: sheen-once .55s ease forwards; }

/* ── Cursor-Glow (nur Desktop) ───────────────────────────── */
.cursor-glow {
  position: fixed;
  top: 0; left: 0;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--green) 5%, transparent),
    color-mix(in srgb, var(--blue) 4%, transparent) 45%,
    transparent 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity .6s ease;
}
.cursor-glow.is-on { opacity: .5; }
@media (pointer: coarse) { .cursor-glow { display: none; } }

/* ── Theme-Wechsel als Kreis-Enthüllung ──────────────────── */
::view-transition-old(root), ::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

/* ── Boot-Overlay ────────────────────────────────────────── */
.boot {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: var(--bg);
  transition: opacity .55s ease;
  /* Fallback: ohne JS blendet sich das Overlay von selbst aus */
  animation: boot-hide .5s ease 2.4s forwards;
}
@keyframes boot-hide { to { opacity: 0; visibility: hidden; } }
.boot--done { opacity: 0; pointer-events: none; }
.boot__inner { text-align: center; }
.boot__logo {
  width: min(190px, 46vw);
  animation: boot-pulse 1.5s var(--ease-out);
}
@keyframes boot-pulse {
  0%  { transform: scale(.82); opacity: 0; filter: drop-shadow(0 0 0 transparent); }
  45% { opacity: 1; }
  70% { filter: drop-shadow(0 0 26px rgba(111, 182, 255, .65)); }
  100%{ transform: scale(1); filter: drop-shadow(0 0 12px rgba(111, 182, 255, .3)); }
}
.boot__name {
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: clamp(1.6rem, 4.5vw, 2.3rem);
  letter-spacing: .02em;
  color: var(--ink);
  margin: .9rem 0 .35rem;
}
.boot__name em {
  font-style: normal;
  background: var(--grad-gl);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.boot__line {
  margin-top: 1.1rem;
  font-size: .78rem;
  letter-spacing: .22em;
  color: var(--blue);
  min-height: 1.2em;
}

/* ── Easter Egg: Circuit-Sparks + Toast ──────────────────── */
.spark-burst {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
}
.spark-burst span {
  position: absolute;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--spark-c, var(--blue));
  box-shadow: 0 0 8px var(--spark-c, var(--blue));
  animation: spark-fly .9s var(--ease-out) forwards;
}
@keyframes spark-fly {
  to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; }
}
.gl-toast {
  position: fixed;
  left: 50%; bottom: 2rem;
  transform: translateX(-50%) translateY(20px);
  z-index: 10000;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .12em;
  color: #fff;
  background: linear-gradient(120deg, #2E8B27, #1E6FE8);
  padding: .65rem 1.3rem;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(30, 111, 232, .4);
  opacity: 0;
  transition: opacity .35s ease, transform .35s var(--ease-out);
}
.gl-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ════════════════════════════════════════════════════════════
   9. SPRACHE, PDF-DIALOG & DRUCK
   ════════════════════════════════════════════════════════════ */

/* Nav-Pille (Sprach-Toggle, PDF) — wie theme-toggle, aber mit Text */
.nav-pill {
  height: 38px;
  min-width: 42px;
  padding: 0 .7rem;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .08em;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background var(--t-theme) ease, transform .18s var(--ease-out);
}
.nav-pill:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-1px); }

/* PDF-Dialog */
.pdf-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: none;
  place-items: center;
  background: color-mix(in srgb, var(--ink) 55%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.pdf-overlay.is-open { display: grid; }
.pdf-dialog {
  width: min(380px, 90vw);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 1.2);
  box-shadow: 0 24px 70px rgba(10, 42, 94, .35);
  padding: 2rem 1.8rem 1.6rem;
  text-align: center;
  animation: pdf-pop .35s var(--ease-out);
}
@keyframes pdf-pop { from { opacity: 0; transform: scale(.92) translateY(10px); } }
.pdf-dialog__title {
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: 1.35rem;
  margin-bottom: .25rem;
}
.pdf-dialog__sub {
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 1.4rem;
}
.pdf-dialog__btns { display: flex; gap: .7rem; justify-content: center; }
.pdf-dialog__btns .btn { flex: 1; }
.pdf-dialog__cancel {
  margin-top: 1rem;
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: .72rem;
  letter-spacing: .08em;
  cursor: pointer;
  transition: color .18s ease;
}
.pdf-dialog__cancel:hover { color: var(--blue); }

/* Print-only Kopf — am Bildschirm versteckt */
.print-head { display: none; }

/* ── DRUCK / PDF ────────────────────────────────────────── */
@media print {
  @page { size: A4 portrait; margin: 12mm 14mm; }

  :root { --bg: #fff; --surface: #fff; --ink: #14233d; --ink-soft: #5a6b86; --line: #c9d6ea; }

  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; box-shadow: none !important; }

  body { background: #fff !important; }

  /* UI & Effekte ausblenden */
  .nav, .footer, .scroll-progress, .cursor-glow, .boot,
  .pdf-overlay, .stats, .cv-hero__orbit, .flash-stack,
  .theme-toggle, .nav-pill { display: none !important; }

  .circuit-bg { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }

  /* Print-Kopf zeigen */
  .print-head { display: block !important; margin-bottom: 10pt; }
  .print-head__name {
    font-family: "Exo 2", sans-serif; font-weight: 600;
    font-size: 20pt; color: #0b1b33; letter-spacing: .01em;
  }
  .print-head__role {
    font-family: "IBM Plex Mono", monospace; font-size: 9pt;
    letter-spacing: .12em; text-transform: uppercase; color: #1e6fe8; margin: 2pt 0 4pt;
  }
  .print-head__contacts {
    font-size: 8pt; color: #44567a; display: flex; flex-wrap: wrap; gap: 2pt 12pt;
    border-top: 1.5pt solid #1e6fe8; padding-top: 5pt;
  }

  /* Bildschirm-Hero kompakter (Foto + Tagline behalten) */
  .cv-hero { display: none !important; }

  .page { padding: 0 !important; }
  .container { width: 100% !important; }

  /* Einspaltiger Fluss: Skills zuerst, dann Timeline */
  .cv-grid { display: block !important; }
  .cv-side { display: block !important; columns: 2; column-gap: 14pt; margin-bottom: 8pt; }
  .card {
    border: 1pt solid #c9d6ea !important; border-radius: 4pt;
    padding: 6pt 8pt !important; margin-bottom: 8pt;
    break-inside: avoid; -webkit-column-break-inside: avoid;
  }
  .card__title { color: #1e6fe8 !important; font-size: 8pt; margin-bottom: 4pt; }
  .tag { font-size: 7pt; padding: 1pt 4pt; border: .5pt solid #c9d6ea; }
  .lang__bar { background: #e6eefb !important; }
  .lang__fill { background: linear-gradient(90deg, #56be4b, #1e6fe8) !important; }

  .section-title { font-size: 11pt; color: #0b1b33 !important; margin: 6pt 0 6pt; }
  .timeline { padding-left: 12pt !important; }
  .timeline::after, .timeline__pulse { display: none !important; }
  .timeline::before { background: #1e6fe8 !important; opacity: .5 !important; }
  .tl {
    border: 1pt solid #c9d6ea !important; border-radius: 4pt;
    padding: 6pt 9pt !important; margin-bottom: 6pt;
    break-inside: avoid;
  }
  .tl__node { background: #1e6fe8 !important; border-color: #fff !important; box-shadow: none !important; }
  .tl__years { color: #1e6fe8 !important; font-size: 7.5pt; }
  .tl__title { color: #0b1b33 !important; font-size: 9.5pt; }
  .tl__sub { color: #2d4263 !important; font-size: 8pt; }
  .tl__bullets li { color: #333 !important; font-size: 8pt; }
  .badge { border-color: #1e6fe8 !important; color: #1e6fe8 !important; font-size: 6.5pt; }
}

/* ── CV-Texte-Editor (admin/content.php) ─────────────────── */
.cv-edit { display: block; margin-bottom: 1.4rem; }
.cv-edit__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.cv-edit__hint { color: var(--ink-soft); }
.cv-edit__num { max-width: 110px; flex: 0 0 auto; }

.bil { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; flex-wrap: wrap; }
.bil > input, .bil > select { flex: 1; min-width: 120px; }
.bil__lbl {
  flex: 0 0 116px;
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--ink-soft);
  letter-spacing: .04em;
}
.bil--bullet .bil__lbl, .bil--stat .bil__lbl { flex-basis: auto; }
.bil--bullet { padding-left: .3rem; }

.cv-tl { display: block; margin-bottom: 1.1rem; }
.cv-tl__pos { color: var(--blue); }

.hidden-form { display: none; }

/* Skills-Editor: schmale DE/EN-Felder in der Tag-Zeile */
.tagedit__in { width: 116px; }

@media (max-width: 640px) {
  .bil { gap: .4rem; }
  .bil__lbl { flex-basis: 100%; }
  .bil > input, .bil > select { min-width: 0; }
}

/* ── Reset-Gefahrenzone (admin) ──────────────────────────── */
.reset-box { border-radius: var(--radius-sm); }
.reset-box__summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .04em;
  color: #C42B3E;
  padding: .3rem 0;
  list-style: none;
  user-select: none;
}
.reset-box__summary::-webkit-details-marker { display: none; }
.reset-box__summary::before { content: "▸ "; }
.reset-box[open] .reset-box__summary::before { content: "▾ "; }
.reset-box__summary:hover { color: #D23B4E; }
[data-theme="dark"] .reset-box__summary { color: #FF8B9A; }
.reset-box__warn {
  margin: .7rem 0;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--ink-soft);
  border-left: 3px solid #D23B4E;
  padding-left: .8rem;
}
.reset-box__warn code {
  background: rgba(210, 59, 78, .12);
  color: #C42B3E;
  padding: .05rem .35rem;
  border-radius: 4px;
}
[data-theme="dark"] .reset-box__warn code { color: #FF8B9A; }
.reset-box__form { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.reset-box__form input {
  width: 150px;
  padding: .5rem .8rem;
  font-family: var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
  color: var(--ink);
}
.reset-box__form input:focus { outline: none; border-color: #D23B4E; box-shadow: 0 0 0 3px rgba(210, 59, 78, .15); }

/* ── Admin: Drag & Drop + Autosave-Feedback ──────────────── */
/* Fallback-Steuerung: mit JS Buttons aus, Griffe an; ohne JS umgekehrt */
html.js .js-hide { display: none !important; }
html:not(.js) .drag-handle { display: none; }

.drag-handle {
  cursor: grab;
  user-select: none;
  color: var(--ink-soft);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 .35rem;
  flex: 0 0 auto;
  border-radius: 6px;
  transition: color .15s ease, background .15s ease;
}
.drag-handle:hover { color: var(--blue); background: var(--bg-alt); }
.drag-handle:active { cursor: grabbing; }
.drag-handle--sec { align-self: center; }

.bil--drag { align-items: center; }

/* angehobenes / Platzhalter-Element */
.sortable-ghost { opacity: .4; }
.sortable-ghost > * { visibility: hidden; }
.sortable-drag {
  box-shadow: 0 12px 32px rgba(10, 42, 94, .22);
  border-radius: var(--radius-sm);
}
.skill-sec.sortable-ghost, .cv-tl.sortable-ghost {
  outline: 2px dashed var(--blue);
  outline-offset: -2px;
  background: var(--bg-alt);
}

/* Feedback-Pille */
.save-pill {
  position: fixed;
  right: 1.4rem;
  bottom: 1.4rem;
  z-index: 9600;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .04em;
  color: #fff;
  background: linear-gradient(120deg, #2E8B27, #1E6FE8);
  padding: .6rem 1.1rem;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(30, 111, 232, .35);
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s var(--ease-out);
}
.save-pill.is-on { opacity: 1; transform: translateY(0); }
.save-pill--err { background: linear-gradient(120deg, #C42B3E, #E0455A); box-shadow: 0 10px 30px rgba(210, 59, 78, .4); }

/* ── Login-Startseite: Links / Projekte ──────────────────── */
.link-list {
  width: min(424px, 100%);
  margin-top: 1.4rem;
}
.link-list__title {
  font-size: .68rem;
  letter-spacing: .16em;
  color: var(--ink-soft);
  text-align: center;
  margin-bottom: .8rem;
}
.link-grid { display: grid; gap: .6rem; }

.link-card {
  --accent: var(--blue);
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  padding: .8rem 1rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: transform .18s var(--ease-out), border-color .18s ease, box-shadow .22s ease, background var(--t-theme) ease;
}
.link-card:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 12px 30px color-mix(in srgb, var(--accent) 22%, transparent); }
.link-card--blue   { --accent: var(--blue); }
.link-card--green  { --accent: var(--green); }
.link-card--cyan   { --accent: #0FB5C9; }
.link-card--orange { --accent: #E8842B; }
.link-card--purple { --accent: #8B5CF6; }
.link-card--red    { --accent: #E0455A; }

.link-card__icon {
  font-size: 1.35rem;
  line-height: 1.4;
  flex: 0 0 auto;
}
.link-card__body { display: flex; flex-direction: column; min-width: 0; }
.link-card__title {
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: .4rem;
}
.link-card__ext { color: var(--accent); font-size: .8rem; opacity: .7; }
.link-card__desc {
  font-size: .82rem;
  color: var(--ink-soft);
  line-height: 1.45;
  /* Standard: per Hover einblenden (Desktop) */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .3s var(--ease-out), opacity .3s ease, margin-top .3s ease;
}
@media (hover: hover) {
  .link-card:hover .link-card__desc, .link-card:focus-visible .link-card__desc {
    max-height: 8rem; opacity: 1; margin-top: .35rem;
  }
}
/* Touch-Geräte (kein Hover): Beschreibung dauerhaft zeigen */
@media (hover: none) {
  .link-card__desc { max-height: 8rem; opacity: 1; margin-top: .35rem; }
}

/* Admin-Vorschau-Chip (kompakt, nicht klickbar) */
.link-card--preview {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .25rem .6rem; border-left-width: 3px;
  box-shadow: none; transform: none !important; cursor: default;
}
.link-card--preview .link-card__icon { font-size: 1rem; }
.link-card--preview .link-card__title { font-size: .9rem; }
.link-edit { display: block; margin-bottom: 1rem; }
.link-edit textarea { width: 100%; resize: vertical; font-family: var(--font-body); }

/* ── "Über mich"-Seite ───────────────────────────────────── */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1.8rem;
  align-items: start;
}
.about-intro {
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--ink-soft);
  margin-bottom: 2rem;
  max-width: 60ch;
}
.about-side { display: grid; gap: 1.2rem; }

.quote-feed { display: grid; gap: 1.1rem; }
.quote {
  position: relative;
  margin: 0;
  padding: 1.4rem 1.5rem 1.4rem 2.6rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: transform .22s var(--ease-out), border-color .22s ease, box-shadow .22s ease, background var(--t-theme) ease;
}
.quote:hover { transform: translateX(3px); border-left-color: var(--blue); box-shadow: 0 12px 30px rgba(10, 42, 94, .1); }
.quote::before {
  content: "“";
  position: absolute;
  left: .55rem; top: .25rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.6rem;
  line-height: 1;
  color: color-mix(in srgb, var(--green) 55%, transparent);
}
.quote__text {
  margin: 0;
  font-family: var(--font-brand);
  font-size: 1.18rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
}
.quote__meta {
  margin-top: .7rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .6rem;
  font-size: .85rem;
}
.quote__source { color: var(--blue); font-style: italic; }
.quote__source::before { content: "— "; }
.quote__date { color: var(--ink-soft); }

@media (max-width: 880px) {
  .about-grid { grid-template-columns: 1fr; }
}

/* Editor: Textzeilen (Textarea volle Breite) */
.bil--text { align-items: flex-start; }
.bil--text textarea { flex: 1; min-width: 160px; width: 100%; resize: vertical; font-family: var(--font-body); }
.quote-edit { display: block; margin-bottom: 1rem; }

/* ── Zugriffs-Log / Dashboard ────────────────────────────── */
.log-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.log-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: .4rem .5rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.log-table td {
  padding: .55rem .5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  vertical-align: middle;
}
.log-table tr:last-child td { border-bottom: none; }
.log-table tbody tr { transition: background .15s ease; }
.log-table tbody tr:hover { background: var(--bg-alt); }

.log-feed { display: flex; flex-direction: column; gap: .1rem; max-height: 560px; overflow-y: auto; }
.log-row {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .5rem .2rem;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
}
.log-row:last-child { border-bottom: none; }
.log-row__user { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-row__time { color: var(--ink-soft); white-space: nowrap; }

/* Ereignis-Badges */
.ev {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .04em;
  padding: .2rem .55rem;
  border-radius: 999px;
  border: 1px solid;
  white-space: nowrap;
}
.ev--login      { color: var(--green); border-color: color-mix(in srgb, var(--green) 55%, transparent); background: color-mix(in srgb, var(--green) 10%, transparent); }
.ev--nfc_login  { color: #8B5CF6; border-color: rgba(139,92,246,.5); background: rgba(139,92,246,.1); }
.ev--login_fail { color: #C42B3E; border-color: rgba(210,59,78,.5); background: rgba(210,59,78,.08); }
.ev--cv_view    { color: var(--blue); border-color: color-mix(in srgb, var(--blue) 45%, transparent); background: color-mix(in srgb, var(--blue) 8%, transparent); }
.ev--about_view { color: #0FB5C9; border-color: rgba(15,181,201,.5); background: rgba(15,181,201,.1); }
.ev--pdf_export { color: #E8842B; border-color: rgba(232,132,43,.5); background: rgba(232,132,43,.1); }

/* ── Benachrichtigungs-Einstellungen ─────────────────────── */
.checkbox-row { display: flex; align-items: center; gap: .55rem; cursor: pointer; font-size: .92rem; }
.checkbox-row input { width: 17px; height: 17px; accent-color: var(--blue); cursor: pointer; }
.notify-events { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-top: .4rem; }
.notify-actions { display: flex; gap: .7rem; flex-wrap: wrap; }

/* ── Bloom-Theme: floraler Hintergrund ───────────────────── */
[data-theme="bloom"] .circuit-bg {
  opacity: .85;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255,138,199,.22), transparent 32%),
    radial-gradient(circle at 88% 80%, rgba(193,58,142,.15), transparent 36%),
    radial-gradient(circle at 65% 35%, rgba(255,201,77,.10), transparent 24%),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='52'%20height='52'%20viewBox='0%200%2052%2052'%3E%3Cg%20fill='%23E14F9B'%20opacity='0.09'%3E%3Ccircle%20cx='26'%20cy='15'%20r='6.5'/%3E%3Ccircle%20cx='37'%20cy='22'%20r='6.5'/%3E%3Ccircle%20cx='33'%20cy='35'%20r='6.5'/%3E%3Ccircle%20cx='19'%20cy='35'%20r='6.5'/%3E%3Ccircle%20cx='15'%20cy='22'%20r='6.5'/%3E%3C/g%3E%3Ccircle%20cx='26'%20cy='26'%20r='5'%20fill='%23FFC94D'%20opacity='0.16'/%3E%3C/svg%3E");
  background-size: 100% 100%, 100% 100%, 100% 100%, 132px 132px;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
}

/* ════════════════════════════════════════════════════════════
   WEITERE THEMES: Cyberpunk · Entenhausen · DDR/Ost-Berlin
   ════════════════════════════════════════════════════════════ */

/* ── Cyberpunk (extreme) ─────────────────────────────────── */
[data-theme="cyber"] {
  --bg: #030109; --bg-alt: #0B0620; --surface: #0C0822;
  --ink: #EAFBFF; --ink-soft: #8E7CCB; --line: #2A1E5C;
  --blue: #00E5FF; --blue-deep: #FF2D9B; --blue-glow: #36F9FF; --blue-ice: #160C36;
  --green: #FF2D9B;
  --grad-gl: linear-gradient(120deg, #00E5FF 0%, #FF2D9B 100%);
  --grad-tagline: linear-gradient(90deg, #00E5FF 0%, #B14DFF 50%, #FF2D9B 100%);
  --shadow-card: 0 0 30px rgba(255,45,155,.18);
  --shadow-node: 0 0 26px rgba(0,229,255,.5);
}
[data-theme="cyber"] .btn--primary { color: #030109; box-shadow: 0 0 18px rgba(0,229,255,.5), 0 0 30px rgba(255,45,155,.35); }
[data-theme="cyber"] .cv-hero__name,
[data-theme="cyber"] .brand__name,
[data-theme="cyber"] .login-card__title { text-shadow: 0 0 16px rgba(0,229,255,.7), 0 0 30px rgba(255,45,155,.4); }
[data-theme="cyber"] .section-title,
[data-theme="cyber"] .page__head h1 { text-shadow: 0 0 12px rgba(0,229,255,.45); }
/* Neon-Umrandung für Karten/Nav (klarer Kontrast zum schlichten Dark-Theme) */
[data-theme="cyber"] .card,
[data-theme="cyber"] .cv-hero,
[data-theme="cyber"] .tl,
[data-theme="cyber"] .stat,
[data-theme="cyber"] .login-card {
  border-color: rgba(0,229,255,.30);
  box-shadow: 0 0 0 1px rgba(255,45,155,.10), 0 0 22px rgba(0,229,255,.10);
}
[data-theme="cyber"] .nav { border-bottom-color: rgba(0,229,255,.28); }
[data-theme="cyber"] .tag { border-color: rgba(0,229,255,.30); }
[data-theme="cyber"] .circuit-bg {
  opacity: 1;
  background-color: #030109;
  background-image:
    radial-gradient(ellipse 80% 55% at 50% 118%, rgba(255,45,155,.40), transparent 60%),
    radial-gradient(circle at 12% 8%, rgba(0,229,255,.22), transparent 42%),
    linear-gradient(rgba(0,229,255,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,45,155,.13) 1px, transparent 1px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.36) 0 2px, transparent 2px 4px);
  background-size: 100% 100%, 100% 100%, 38px 38px, 38px 38px, 100% 3px;
}

/* ── Entenhausen / Walt Disney (fröhlich, Comic) ─────────── */
[data-theme="duck"] {
  --bg: #FFF8E6; --bg-alt: #FFF0C6; --surface: #FFFFFF;
  --ink: #16357A; --ink-soft: #5E6FA0; --line: #FBE08C;
  --blue: #1C8FE0; --blue-deep: #0E5BA6; --blue-glow: #7FC4FF; --blue-ice: #DFF1FF;
  --green: #F4B400;
  --grad-gl: linear-gradient(120deg, #E63946 0%, #1C8FE0 100%);
  --grad-tagline: linear-gradient(90deg, #E63946 0%, #FFC72C 50%, #1C8FE0 100%);
  --shadow-card: 0 12px 30px rgba(28,143,224,.16);
  --shadow-node: 0 6px 22px rgba(255,199,44,.4);
}
[data-theme="duck"] .circuit-bg {
  opacity: .7;
  background-image:
    radial-gradient(circle at 50% -12%, rgba(255,199,44,.38), transparent 46%),
    radial-gradient(rgba(28,143,224,.11) 2.5px, transparent 2.6px),
    radial-gradient(rgba(230,57,70,.09) 2.5px, transparent 2.6px);
  background-size: 100% 100%, 38px 38px, 38px 38px;
  background-position: 0 0, 0 0, 19px 19px;
}

/* ── DDR / Ost-Berlin (Ostalgie) ─────────────────────────── */
[data-theme="ddr"] {
  --bg: #ECE4D1; --bg-alt: #E0D6BC; --surface: #F7F1E2;
  --ink: #322516; --ink-soft: #6E6048; --line: #CFC09C;
  --blue: #C0392B; --blue-deep: #8C2A20; --blue-glow: #E0A526; --blue-ice: #E8DCC0;
  --green: #2E8B3D;
  --grad-gl: linear-gradient(120deg, #C0392B 0%, #8C2A20 100%);
  --grad-tagline: linear-gradient(90deg, #2E8B3D 0%, #E0A526 50%, #C0392B 100%);
  --shadow-card: 0 10px 28px rgba(80,60,30,.16);
  --shadow-node: 0 6px 20px rgba(192,57,43,.25);
}
[data-theme="ddr"] .circuit-bg {
  opacity: .6;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='60'%20height='80'%20viewBox='0%200%2060%2080'%3E%3Cg%20fill='%232E8B3D'%20opacity='0.08'%3E%3Cellipse%20cx='30'%20cy='17'%20rx='17'%20ry='3.6'/%3E%3Crect%20x='22'%20y='6'%20width='16'%20height='12'%20rx='6'/%3E%3Ccircle%20cx='30'%20cy='24'%20r='7'/%3E%3Crect%20x='23'%20y='30'%20width='14'%20height='21'%20rx='7'/%3E%3Crect%20x='33'%20y='30'%20width='15'%20height='6'%20rx='3'%20transform='rotate(20%2035%2033)'/%3E%3Crect%20x='12'%20y='33'%20width='15'%20height='6'%20rx='3'%20transform='rotate(20%2025%2036)'/%3E%3Crect%20x='22'%20y='48'%20width='6.5'%20height='20'%20rx='3.2'%20transform='rotate(20%2025%2056)'/%3E%3Crect%20x='31'%20y='48'%20width='6.5'%20height='20'%20rx='3.2'%20transform='rotate(-16%2034%2056)'/%3E%3Crect%20x='10'%20y='64'%20width='13'%20height='5.5'%20rx='2.7'/%3E%3Crect%20x='34'%20y='66'%20width='13'%20height='5.5'%20rx='2.7'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(rgba(80,60,30,.10) 2px, transparent 2px),
    linear-gradient(90deg, rgba(80,60,30,.10) 2px, transparent 2px);
  background-size: 116px 150px, 64px 40px, 64px 40px;
  background-repeat: repeat, repeat, repeat;
}

/* ── Toggle-Icons der neuen Themes einblenden ────────────── */
[data-theme="cyber"] .theme-toggle__icon--bolt  { opacity: 1; transform: none; }
[data-theme="duck"]  .theme-toggle__icon--duck  { opacity: 1; transform: none; }
[data-theme="ddr"]   .theme-toggle__icon--star  { opacity: 1; transform: none; }

/* ── Portfolio / Projekte (Frontend) ─────────────────────── */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.4rem;
}
.project-card {
  --accent: var(--blue);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform .22s var(--ease-out), border-color .22s ease, box-shadow .22s ease, background var(--t-theme) ease;
}
.project-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px color-mix(in srgb, var(--accent) 22%, transparent); }
.project-card--blue   { --accent: var(--blue); }
.project-card--green  { --accent: var(--green); }
.project-card--cyan   { --accent: #0FB5C9; }
.project-card--orange { --accent: #E8842B; }
.project-card--purple { --accent: #8B5CF6; }
.project-card--red    { --accent: #E0455A; }
.project-card__media { aspect-ratio: 16 / 9; background: var(--bg-alt); overflow: hidden; }
.project-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.project-card__media--empty { display: grid; place-items: center; opacity: .5; }
.project-card__body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.project-card__title { font-family: var(--font-brand); font-weight: 600; font-size: 1.15rem; margin: 0; }
.project-card__desc { font-size: .9rem; color: var(--ink-soft); margin: 0; line-height: 1.5; }
.project-card__stack { margin-top: auto; }
.project-card__link { align-self: flex-start; margin-top: .3rem; }

/* ── Projekte-Editor ─────────────────────────────────────── */
.project-edit { display: block; margin-bottom: 1.1rem; }
.project-edit__row { display: grid; grid-template-columns: 200px 1fr; gap: 1.2rem; align-items: start; }
.project-edit__media { display: flex; flex-direction: column; gap: .5rem; }
.project-edit__media > img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.project-edit__noimg { display: grid; place-items: center; aspect-ratio: 16/9; border: 1px dashed var(--line); border-radius: var(--radius-sm); color: var(--ink-soft); background: var(--bg-alt); }
.project-edit__upload { display: flex; flex-direction: column; gap: .4rem; }
.project-edit__upload input[type=file] { font-size: .78rem; width: 100%; }
.project-edit__fields { flex: 1; }
@media (max-width: 640px) { .project-edit__row { grid-template-columns: 1fr; } }