/* Tech.Kompass Creator Operations · gemeinsame Designschicht */
:root {
  color-scheme: dark;
  --bg: #080a0d;
  --panel: #11151a;
  --panel2: #171c22;
  --line: #303740;
  --line-strong: #46505b;
  --text: #f5f6f7;
  --muted: #98a1aa;
  --orange: #ff5a1f;
  --orange2: #ff875f;
  --tk-orange: #ff5a1f;
  --tk-graphite: #11151a;
  --tk-graphite-2: #1a2027;
  --tk-grid: rgba(255, 255, 255, .035);
}

html { background: var(--bg); }
body {
  font-family: "Bahnschrift", "DIN Alternate", "Arial Narrow", "Segoe UI", sans-serif;
  background:
    linear-gradient(90deg, transparent 0 49.92%, rgba(255,90,31,.045) 50%, transparent 50.08%),
    radial-gradient(circle at 86% -8%, rgba(255,90,31,.13), transparent 31%),
    linear-gradient(var(--tk-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tk-grid) 1px, transparent 1px),
    var(--bg);
  background-size: 100% 100%, 100% 100%, 52px 52px, 52px 52px, auto;
  background-attachment: fixed;
  letter-spacing: .005em;
}
body::before {
  content: "";
  position: fixed;
  inset: 0 auto 0 0;
  width: 3px;
  z-index: 100;
  pointer-events: none;
  background: linear-gradient(180deg, var(--orange) 0 18%, transparent 18% 82%, var(--orange) 82%);
}

.topbar {
  height: 78px;
  padding: 0 max(24px, 4vw);
  border-top: 3px solid var(--orange);
  border-bottom-color: #303740;
  background: rgba(8,10,13,.92);
  box-shadow: 0 18px 60px rgba(0,0,0,.28);
}
.brand { gap: 14px; }
.brand-mark,
.mark {
  position: relative;
  width: 42px;
  height: 42px;
  border: 1px solid var(--orange);
  background: linear-gradient(145deg, rgba(255,90,31,.14), rgba(255,90,31,.025));
  color: var(--orange);
  font-weight: 900;
  letter-spacing: .08em;
  clip-path: polygon(0 0,100% 0,100% 72%,72% 100%,0 100%);
}
.brand-mark::after,
.mark::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 2px;
  right: 3px;
  top: 7px;
  background: var(--orange);
  transform: rotate(-45deg);
  transform-origin: right center;
}
.brand-copy { display: grid; gap: 2px; line-height: 1.05; }
.brand-copy > span { font-size: 15px; font-weight: 650; }
.brand-copy strong { color: var(--orange); font-weight: 900; }
.brand-copy small {
  color: #77818b;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .24em;
}
.top-nav > a {
  position: relative;
  min-height: 40px;
  display: grid;
  place-items: center;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.top-nav > a.active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 2px;
  background: var(--orange);
}
.top-status {
  padding: 9px 11px;
  border: 1px solid var(--line);
  background: rgba(17,21,26,.8);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 9px;
}
.shell { width: min(1380px, 92vw); padding-top: 56px; }

.eyebrow,
.orders-kicker,
.step,
.box-label,
.analysis-grid h3,
.metric > span,
.summary-card span {
  font-family: "Bahnschrift", "Arial Narrow", sans-serif;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.eyebrow::before,
.orders-kicker::before {
  content: "▲";
  display: inline-block;
  margin-right: 8px;
  color: var(--orange);
  font-size: .72em;
}
.hero h1,
.project-hero h1,
.broll-hero h1,
.orders-hero h1 {
  font-family: "Bahnschrift", "Arial Narrow", sans-serif;
  font-stretch: condensed;
  font-weight: 850;
  letter-spacing: -.045em;
}
.hero h1::after,
.broll-hero h1::after,
.orders-hero h1::after {
  content: "";
  display: block;
  width: 92px;
  height: 5px;
  margin-top: 20px;
  background: linear-gradient(90deg, var(--orange) 0 62%, transparent 62% 72%, var(--orange) 72% 82%, transparent 82%);
}

.panel,
.storage-card,
.project-card,
.metric,
.summary-card,
.order-card,
.analysis-grid article,
.job,
.card-dialog {
  position: relative;
  border-color: var(--line);
  background: linear-gradient(145deg, rgba(25,31,38,.96), rgba(13,17,22,.98));
  box-shadow: 0 22px 54px rgba(0,0,0,.18);
}
.panel::before,
.storage-card::before,
.project-card::before,
.order-card::before,
.job::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 18px;
  width: 3px;
  height: 44px;
  background: var(--orange);
}
.project-card { min-height: 190px; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.project-card:hover { transform: translateY(-4px); border-color: rgba(255,90,31,.7); background: linear-gradient(145deg,#20262d,#11161b); }
.project-card h3 { font-size: 23px; line-height: 1.08; }
.folder-icon,
.arrow { color: var(--orange); }

.primary,
.new-order,
.dialog-submit,
.portal-login-form button,
.project-order-open {
  position: relative;
  border-radius: 0;
  background: var(--orange);
  color: #0a0b0d;
  font-family: "Bahnschrift", sans-serif;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.22);
  clip-path: polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);
}
.primary:hover,
.new-order:hover,
.dialog-submit:hover { background: #ff7647; transform: translateY(-1px); }
.secondary,
.order-action,
.filter-button,
.role-button,
.action-link { border-radius: 0; }
input, select, textarea {
  border-radius: 0 !important;
  font-family: "Bahnschrift", "Segoe UI", sans-serif !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--orange) !important;
  box-shadow: 0 0 0 3px rgba(255,90,31,.08);
}

.section-head { border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.section-head .count {
  min-width: 44px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,90,31,.6);
  color: var(--orange);
}
.metric strong,
.summary-card strong { font-variant-numeric: tabular-nums; }
.storage-bar,
.broll-progress-track,
.track { height: 6px; border-radius: 0; }

/* WhatsApp-Brücke: bewusst nutzergesteuert, ohne automatischen Versand. */
.whatsapp-action {
  border-color: rgba(37,211,102,.38) !important;
  color: #74e99f !important;
  background: rgba(19,83,44,.16) !important;
}
.whatsapp-action:hover { border-color: #25d366 !important; background: rgba(24,104,54,.27) !important; }
.whatsapp-dialog { width: min(760px, calc(100vw - 28px)); }
.whatsapp-dialog .dialog-body { border-top: 3px solid #25d366; }
.whatsapp-message-label { display: grid; gap: 9px; margin-top: 20px; }
.whatsapp-message-label > span,
.whatsapp-link-info > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.whatsapp-message-label textarea {
  min-height: 250px;
  resize: vertical;
  width: 100%;
  padding: 16px;
  border: 1px solid var(--line);
  background: #0a0e12;
  color: var(--text);
  line-height: 1.55;
}
.whatsapp-link-info {
  display: grid;
  gap: 7px;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.018);
}
.whatsapp-link-info code { color: #75e9a1; font: 700 12px "Bahnschrift",monospace; overflow-wrap: anywhere; }
.whatsapp-link-info small { color: var(--muted); line-height: 1.45; }
.whatsapp-submit {
  min-height: 46px;
  padding: 0 19px;
  border: 1px solid #25d366;
  background: #1fb457;
  color: #07140c;
  font: 900 12px "Bahnschrift",sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
}
.whatsapp-submit:hover { background: #35dc72; }
.order-card.whatsapp-target {
  border-color: #25d366;
  box-shadow: 0 0 0 2px rgba(37,211,102,.15), 0 24px 70px rgba(0,0,0,.35);
  animation: whatsappTarget 1.6s ease 2;
}
.order-card.whatsapp-target::before { background: #25d366; }
@keyframes whatsappTarget { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }

/* Auftragslöschung bleibt bewusst eine interne Chris-Funktion. */
.delete-action {
  margin-left: auto;
  border-color: rgba(255,100,112,.36) !important;
  color: #ff9aa3 !important;
  background: rgba(88,25,33,.18) !important;
}
.delete-action:hover { border-color: var(--red) !important; background: rgba(110,31,40,.3) !important; }
.delete-dialog .dialog-body { border-top: 3px solid var(--red); }
.delete-warning {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 22px 0 6px;
  padding: 18px;
  border: 1px solid rgba(255,100,112,.4);
  background: rgba(95,27,35,.18);
}
.delete-marker {
  flex: 0 0 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--red);
  color: var(--red);
  font-size: 22px;
  font-weight: 900;
}
.delete-warning strong { display: block; font-size: 17px; margin-bottom: 7px; }
.delete-warning p { color: var(--muted); margin: 0; line-height: 1.55; font-size: 13px; }
.dialog-delete {
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid #a8434f;
  background: #7f2631;
  color: white;
  font: 850 12px "Bahnschrift",sans-serif;
  text-transform: uppercase;
  letter-spacing: .05em;
  cursor: pointer;
}
.dialog-delete:hover { background: #a3313f; }

/* Mobile Produktionsstatus */
.app .hero h1 { font-family: "Bahnschrift", "Arial Narrow", sans-serif; font-weight: 850; }
.app > header { padding-top: 3px; border-top: 2px solid var(--orange); }
.app .hero-summary,
.app .job,
.app .empty { border-radius: 0; }
.app .job::before { top: 16px; }
.app .track i { border-radius: 0; background: linear-gradient(90deg,#d94412,var(--orange)); }

@media (max-width: 900px) {
  .topbar { height: auto; min-height: 72px; align-items: flex-start; gap: 12px; padding-top: 13px; padding-bottom: 12px; }
  .brand-copy small { display: none; }
  .top-nav { justify-content: flex-end; flex-wrap: wrap; gap: 4px; }
  .top-status { width: auto; }
  .shell { padding-top: 34px; }
}
@media (max-width: 620px) {
  body { background-size: 100% 100%, 100% 100%, 34px 34px, 34px 34px, auto; }
  body::before { width: 2px; }
  .topbar { position: relative; padding-left: 16px; padding-right: 16px; }
  .brand-mark { width: 38px; height: 38px; }
  .brand-copy > span { font-size: 13px; }
  .shell { width: min(100% - 28px, 1380px); }
  .hero h1::after,.broll-hero h1::after,.orders-hero h1::after { margin-top: 15px; }
  .delete-action { margin-left: 0; }
  .delete-warning { padding: 15px; }
  .whatsapp-actions { align-items: stretch; flex-direction: column; }
  .whatsapp-actions button { width: 100%; }
  .whatsapp-message-label textarea { min-height: 230px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
.youtube-subscriber-widget{display:grid;grid-template-columns:auto auto;align-items:baseline;column-gap:7px;min-width:112px;padding:6px 10px;border-left:2px solid #ff5a1f;background:rgba(255,90,31,.07)}.youtube-subscriber-widget>span{color:#ff7d4d;font-size:9px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.youtube-subscriber-widget strong{color:#fff;font-size:15px}.youtube-subscriber-widget small{grid-column:1/-1;color:#8995a0;font-size:9px;white-space:nowrap}.youtube-subscriber-widget small.positive{color:#67dbaa}.youtube-subscriber-widget small.negative{color:#ff7b84}@media(max-width:760px){.youtube-subscriber-widget{order:-1;min-width:100%;grid-template-columns:auto auto 1fr}.youtube-subscriber-widget small{grid-column:auto;text-align:right}}
.brand-logo{width:52px;height:52px;object-fit:contain;border-radius:0;background:transparent;filter:drop-shadow(0 8px 16px rgba(0,0,0,.3))}.portal-login-logo{width:92px;height:92px;object-fit:contain;border-radius:0;background:transparent;filter:drop-shadow(0 12px 22px rgba(0,0,0,.34))}

/* Projekttypen: Produktion oder private Mediensammlung */
.project-builder{display:grid;grid-template-columns:minmax(240px,.72fr) minmax(420px,1.4fr);gap:38px;align-items:start}.project-builder-copy h2{margin:10px 0 8px}.project-create-form{display:grid!important;grid-template-columns:1fr!important;gap:18px!important}.project-create-form fieldset{border:0;padding:0;margin:0}.project-kind-fieldset legend,.project-create-form label>span{display:block;margin-bottom:8px;color:#aeb7c0;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.project-kind-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.project-kind-option{position:relative;cursor:pointer}.project-kind-option input{position:absolute;opacity:0}.project-kind-option>span{display:grid;gap:7px;min-height:92px;padding:16px;border:1px solid var(--line);background:#10151a;transition:.18s ease}.project-kind-option small{color:var(--muted);line-height:1.45}.project-kind-option input:checked+span{border-color:var(--orange);background:linear-gradient(145deg,rgba(255,90,31,.15),rgba(17,21,26,.98));box-shadow:inset 3px 0 var(--orange)}.project-create-form input,.project-create-form select,.project-create-form textarea{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:0;background:#0c1116;color:var(--text);font:inherit}.project-create-form input:focus,.project-create-form select:focus,.project-create-form textarea:focus{outline:1px solid var(--orange);border-color:var(--orange)}.private-project-options{padding:20px;border:1px solid #3b4650;background:rgba(10,14,18,.66)}.private-project-options[hidden]{display:none}.project-options-head{display:flex;justify-content:space-between;gap:20px;margin-bottom:18px}.project-options-head small,.field-help{color:var(--muted)}.project-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.project-form-grid .wide{grid-column:1/-1}.field-help{display:block;margin-top:7px;font-size:11px;line-height:1.4}.bundle-preview{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:16px;padding-top:15px;border-top:1px solid var(--line)}.bundle-preview>span{color:var(--orange);font-size:9px;font-weight:900;letter-spacing:.12em}.bundle-preview code{padding:6px 9px;background:#080b0e;color:#cbd3da;font-size:11px}.project-create-button{justify-self:start}.project-type-badge{margin-left:auto;margin-right:8px;padding:5px 7px;border:1px solid var(--line);color:#aab4bd;font-size:8px;font-weight:900;letter-spacing:.1em}.private-card{border-color:#384653}.private-card::before{background:#6ca9c8}.private-card .folder-icon{color:#79b9d9}.private-project-summary{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.private-project-summary span{padding:6px 9px;border:1px solid #40515e;background:#111a20;color:#c5dbe7;font-size:11px}.private-project-notes{max-width:760px!important;margin-top:12px!important;color:#aeb9c2!important}
@media(max-width:900px){.project-builder{grid-template-columns:1fr}.project-kind-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.project-kind-grid,.project-form-grid{grid-template-columns:1fr}.project-form-grid .wide{grid-column:auto}.project-options-head{display:grid}.project-create-button{width:100%;justify-content:center}}