/* ============================================
   4M-Modell — futuristic, bright, minimal
   ============================================ */

:root {
  --bg: #FAFBFD;
  --bg-2: #F2F5FA;
  --ink: #0B1220;
  --ink-2: #3B4760;
  --ink-3: #7B8699;
  --line: #E3E8F2;
  --line-strong: #C9D3E5;
  --surface: rgba(255, 255, 255, 0.72);
  --surface-solid: #FFFFFF;
  --shadow-sm: 0 1px 2px rgba(13, 22, 44, 0.04), 0 2px 8px rgba(13, 22, 44, 0.04);
  --shadow-md: 0 4px 16px rgba(13, 22, 44, 0.06), 0 12px 40px rgba(13, 22, 44, 0.08);
  --shadow-lg: 0 24px 64px rgba(13, 22, 44, 0.12), 0 2px 8px rgba(13, 22, 44, 0.04);
  --shadow-xl: 0 40px 120px rgba(13, 22, 44, 0.22), 0 6px 24px rgba(13, 22, 44, 0.08);

  --c-mund: #2D7DD2;
  --c-moti: #E8A317;
  --c-mogl: #1F8F86;
  --c-mite: #D94A4A;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;

  --font-sans: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-spring: cubic-bezier(.5,1.5,.3,1);
}

* { box-sizing: border-box; }
html, body, #root { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Ambient background ---------- */
.ambient {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1200px 800px at 50% 50%, #FFFFFF 0%, rgba(255,255,255,0) 60%),
    radial-gradient(900px 700px at 12% 6%, rgba(45,125,210,0.07), transparent 60%),
    radial-gradient(900px 700px at 88% 6%, rgba(232,163,23,0.06), transparent 60%),
    radial-gradient(900px 700px at 12% 96%, rgba(31,143,134,0.06), transparent 60%),
    radial-gradient(900px 700px at 88% 96%, rgba(217,74,74,0.06), transparent 60%),
    linear-gradient(180deg, #FAFBFD 0%, #F4F7FC 100%);
}

/* ---------- Cursor ambient canvas ---------- */
.cursor-ambient {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
}

/* ---------- Intro pulse ---------- */
.intro-overlay {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
}
.intro-pulse {
  position: absolute; left: 50%; top: 50%;
  width: 200px; height: 200px;
  margin: -100px 0 0 -100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(45,125,210,0.18) 0%, rgba(232,163,23,0.12) 35%, rgba(31,143,134,0.10) 60%, rgba(217,74,74,0) 75%);
  opacity: 0;
  transform: scale(0.3);
  animation: intro-pulse 1.8s 0.05s var(--ease-out) forwards;
}
@keyframes intro-pulse {
  0%   { opacity: 0; transform: scale(0.3); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: scale(7); }
}

/* ---------- App shell ---------- */
.app {
  position: relative; z-index: 1;
  height: 100vh;
  display: grid;
  /* header · (optionales Wettbewerbs-Banner) · Bühne · Statistikleiste */
  grid-template-rows: auto auto 1fr auto;
}
/* Zeilen explizit zuweisen, damit das optionale Banner die 1fr-Zeile
   der Mindmap nicht verschiebt, wenn es aus- oder eingeblendet wird. */
.topbar      { grid-row: 1; }
.comp-banner { grid-row: 2; }
.stage       { grid-row: 3; }
.stats-strip { grid-row: 4; }

/* ---------- Top bar ---------- */
.topbar {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  padding: 16px 28px 8px;
  gap: 18px;
}

.header-title {
  grid-column: 1 / -1;
  text-align: center;
  padding: 0 240px;
}
.title-main {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ink);
  cursor: default;
  user-select: none;
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.title-main .t-glyph-group,
.title-main .t-rest {
  color: var(--ink);
  display: inline;
  vertical-align: baseline;
}
.title-main .t-glyph-group {
  font-weight: 800;
  background-image: var(--title-grad, linear-gradient(95deg, var(--c-mund), var(--c-moti), var(--c-mogl), var(--c-mite)));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: var(--ink);
  transition: -webkit-text-fill-color .35s var(--ease-out);
}
.title-main:hover .t-glyph-group {
  -webkit-text-fill-color: transparent;
}
.title-main .t-rest {
  font-weight: 700;
}

/* Title + subtitle / breakdown swap area */
.title-sub-wrap {
  position: relative;
  margin: 8px auto 0;
  max-width: 760px;          /* schmaler, damit kein Textblock entsteht */
  min-height: 38px;
}
.title-sub {
  margin: 0;
  font-size: clamp(11.5px, 0.9vw, 12.5px);
  line-height: 1.7;          /* luftiger */
  color: var(--ink-3);       /* zurückhaltender als der Fließtext */
  font-weight: 400;
  letter-spacing: 0;
  text-wrap: balance;
  transition: opacity .3s var(--ease-out), transform .35s var(--ease-out);
}

/* Percentage breakdown — fades in *in place of* subtitle when 4M hovered */
.title-breakdown {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 18px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity .3s var(--ease-out), transform .35s var(--ease-out);
}
.title-main:hover ~ .title-sub-wrap .title-sub,
.header-title:has(.title-main:hover) .title-sub {
  opacity: 0;
  transform: translateY(-4px);
  transition-delay: 0.6s;
}
.title-main:hover ~ .title-sub-wrap .title-breakdown,
.header-title:has(.title-main:hover) .title-breakdown {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.75s;
}
.tb-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tb-dot {
  width: 6px; height: 6px; border-radius: 50%;
}
.tb-name { letter-spacing: 0.08em; }
.tb-pct {
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.topbar-actions {
  position: absolute;
  top: 16px;
  right: 28px;
  display: flex; gap: 10px;
  z-index: 5;
}
.btn {
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 500;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-solid);
  color: var(--ink);
  cursor: pointer;
  transition: all .18s var(--ease-out);
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
}
.btn:hover { border-color: var(--line-strong); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn.primary { background: var(--ink); color: white; border-color: var(--ink); }
.btn.primary:hover { background: #1a2238; }
.btn.ghost { border-color: transparent; background: rgba(255,255,255,0.6); backdrop-filter: blur(8px); }

/* ---------- Search ---------- */
.search {
  position: absolute;
  top: 16px;
  left: 28px;
  z-index: 6;
  display: flex;
  align-items: center;
}
.search-trigger {
  width: 36px; height: 36px;
  flex-shrink: 0;
  border-radius: 999px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  background: var(--surface-solid);
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color .18s var(--ease-out), box-shadow .18s var(--ease-out), color .18s, transform .18s;
}
.search-trigger:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  transform: translateY(-1px);
}
.search.open .search-trigger {
  border-color: var(--line-strong);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.search-panel {
  width: 0;
  margin-left: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  position: relative;
  transition: width .35s var(--ease-out), margin-left .35s var(--ease-out);
}
.search.open .search-panel {
  width: 280px;
  margin-left: 8px;
}
.search-input {
  flex: 1;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 32px 0 14px;
  font: inherit;
  font-size: 13px;
  background: var(--surface-solid);
  outline: none;
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.search-input:focus {
  border-color: var(--line-strong);
  box-shadow: 0 0 0 3px rgba(11,18,32,0.04);
}
.search-input::placeholder { color: var(--ink-3); }
.search-clear {
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  border-radius: 50%;
  border: none;
  background: var(--bg-2);
  color: var(--ink-3);
  cursor: pointer;
  display: grid; place-items: center;
  transition: background .12s, color .12s;
}
.search-clear:hover { background: var(--line); color: var(--ink); }

.search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 360px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  padding: 6px;
  animation: fadeUp .2s var(--ease-out) both;
}
.search-empty {
  padding: 16px 14px;
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-3);
}
.search-result {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  background: transparent;
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  transition: background .12s;
}
.search-result:hover { background: var(--bg-2); }
.search-result .sr-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}
.search-result .sr-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.search-result .sr-title {
  font-size: 13px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: -0.005em;
}
.search-result .sr-meta {
  font-size: 11px; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-result .sr-arrow {
  color: var(--ink-3); font-size: 14px;
  transition: color .12s, transform .12s;
}
.search-result:hover .sr-arrow { color: var(--accent); transform: translateX(2px); }

/* ---------- Stage / canvas ---------- */
.stage { position: relative; overflow: hidden; min-height: 0; }
.canvas-wrap {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 6px 28px 10px;
}
.canvas {
  position: relative;
  width: min(1320px, 100%);
  height: 100%;
  min-height: 460px;
}

/* SVG connections layer (now a canvas) */
.connections {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 1;
  z-index: 1;
}

/* Hub-click radial pulse */
@keyframes hub-ring {
  0%   { r: 78; opacity: 0; stroke-width: 2.2; }
  10%  { opacity: 0.8; }
  100% { r: 900; opacity: 0; stroke-width: 0.4; }
}

/* Pillar-title impact pulse when hub is clicked — one short, clean pulse */
.pillar-title {
  position: relative;
  display: inline-block;
  transform-origin: center;
  will-change: transform, text-shadow;
}
.pillar-title.is-impacted {
  animation: pillar-title-impact 0.55s cubic-bezier(.4,1.4,.4,1) both;
}
@keyframes pillar-title-impact {
  0%   { transform: scale(1);
         text-shadow: 0 0 0 transparent; }
  45%  { transform: scale(1.09);
         text-shadow:
            0 6px 18px color-mix(in oklab, currentColor 28%, transparent),
            0 0 12px   color-mix(in oklab, currentColor 26%, transparent); }
  100% { transform: scale(1);
         text-shadow: 0 0 0 transparent; }
}

/* ---------- Center hub ---------- */
.hub {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 200px; height: 200px;
  display: grid; place-items: center;
  z-index: 5;
  cursor: pointer;
  transition: transform .25s var(--ease-out);
}
.hub:hover { transform: translate(-50%, -50%) scale(1.04); }
.hub:active { transform: translate(-50%, -50%) scale(0.97); transition-duration: 80ms; }
.hub:focus-visible { outline: none; }
.hub:focus-visible .hub-core {
  box-shadow: 0 12px 36px rgba(13, 22, 44, 0.08), 0 0 0 3px color-mix(in oklab, var(--c-mund) 50%, transparent);
}

/* hub click animations */
.hub.pulsing .hub-compass-wrap { animation: compass-spin 1.4s cubic-bezier(.2,.7,.2,1) both; }
.hub.pulsing .hub-core         { animation: core-pop 0.7s var(--ease-spring) both; }
.hub.pulsing .hub-ring.outer   { animation: ring-burst-outer 1.2s var(--ease-out) both; }
.hub.pulsing .hub-ring.glow    { animation: ring-burst-glow 1.0s var(--ease-out) both; }
.hub.pulsing .hub-sweep        { animation: hub-sweep 1.4s cubic-bezier(.2,.7,.2,1) both; }

@keyframes compass-spin {
  0%   { transform: rotate(0deg) scale(1); }
  60%  { transform: rotate(540deg) scale(1.05); }
  100% { transform: rotate(720deg) scale(1); }
}
@keyframes core-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(11,18,32,0.06), 0 24px 60px rgba(13, 22, 44, 0.14); }
  100% { transform: scale(1); }
}
@keyframes ring-burst-outer {
  0%   { transform: scale(1); opacity: 1; }
  60%  { transform: scale(1.4); opacity: 0.4; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes ring-burst-glow {
  0%   { opacity: 0.6; transform: scale(1); }
  40%  { opacity: 1; transform: scale(1.5); }
  100% { opacity: 0.6; transform: scale(1); }
}

/* sweep beam — conic gradient that rotates once on click */
.hub-sweep {
  position: absolute;
  inset: -34px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 320deg,
    color-mix(in oklab, var(--c-mund) 60%, transparent) 350deg,
    color-mix(in oklab, var(--c-moti) 80%, transparent) 358deg,
    color-mix(in oklab, var(--c-mite) 60%, transparent) 363deg,
    transparent 380deg
  );
  -webkit-mask: radial-gradient(closest-side, transparent 64%, black 66%, black 80%, transparent 90%);
          mask: radial-gradient(closest-side, transparent 64%, black 66%, black 80%, transparent 90%);
  filter: blur(1px);
}
@keyframes hub-sweep {
  0%   { opacity: 0; transform: rotate(0deg); }
  10%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(720deg); }
}

.hub-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  pointer-events: none;
}
.hub-ring.outer {
  inset: -22px;
  border-style: dashed;
  border-color: rgba(15,30,70,0.10);
  /* static — only animates when .hub.pulsing */
}
.hub-ring.glow {
  inset: -14px;
  background: radial-gradient(closest-side, rgba(255,255,255,0.92), rgba(255,255,255,0));
  border: none;
  filter: blur(10px);
}
.hub-compass-wrap {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--ink);
  /* static — only animates when .hub.pulsing */
}
.hub-compass {
  width: 100%; height: 100%;
  opacity: 0.32;
}
.hub-core {
  position: relative; z-index: 2;
  width: 118px; height: 118px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  box-shadow: 0 12px 36px rgba(13, 22, 44, 0.08), 0 2px 6px rgba(13,22,44,0.04);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  text-align: center;
}
.hub-core .name {
  font-size: 21px; font-weight: 700; letter-spacing: 0.005em;
  background: linear-gradient(135deg, var(--c-mund) 0%, var(--c-moti) 35%, var(--c-mite) 65%, var(--c-mogl) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 200% 200%;
  animation: gradient-shift 12s ease-in-out infinite;
}
.hub-core .sub {
  font-size: 10px; color: var(--ink-2); max-width: 100px; line-height: 1.3;
  font-style: italic;
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin-slow { to { transform: rotate(360deg); } }

/* ---------- Pillar (quadrant) ---------- */
.pillar {
  position: absolute;
  display: flex; flex-direction: column;
  z-index: 3;
}
.pillar.in { opacity: 1; transform: translate(0, 0); }
.pillar.tl { left: 0; top: 0; }
.pillar.tr { right: 0; top: 0; align-items: flex-end; }
.pillar.bl { left: 0; bottom: 0; }
.pillar.br { right: 0; bottom: 0; align-items: flex-end; }
.pillar.tr .pillar-verb-line,
.pillar.br .pillar-verb-line { flex-direction: row-reverse; }
.pillar.tr .pillar-claim, .pillar.br .pillar-claim { text-align: right; }
.pillar.tr .pillar-head, .pillar.br .pillar-head { justify-content: flex-end; }

.pillar-frame {
  width: clamp(290px, 31vw, 380px);
}

.pillar-head {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 4px;
}
.pillar-title {
  font-size: 19px; font-weight: 700; letter-spacing: 0.015em;
  text-transform: uppercase;
}

/* Verb subtitle — under pillar title */
.pillar-verb-line {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.verb-bullet {
  width: 14px; height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.verb-text {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  font-weight: 500;
  font-style: italic;
  white-space: nowrap;
}

/* Claim — single line */
.pillar-claim {
  font-style: italic;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.4;
  margin-bottom: 12px;
  white-space: nowrap;
  opacity: 0.85;
}
.pillar.tl .pillar-claim, .pillar.tr .pillar-claim,
.pillar.bl .pillar-claim, .pillar.br .pillar-claim {
  position: relative;
  z-index: 4;
}
.pillar.tl .pillar-claim,
.pillar.bl .pillar-claim { padding-left: 2px; }
.pillar.tr .pillar-claim,
.pillar.br .pillar-claim { padding-right: 2px; }

/* competence nodes */
.nodes { display: flex; flex-direction: column; gap: 6px; }
.node {
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0;
  cursor: pointer;
  transition:
    transform .15s var(--ease-out),
    box-shadow .15s var(--ease-out),
    border-color .12s var(--ease-out);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  text-align: left;
  width: 100%;
  font-family: var(--font-sans);
  color: inherit;
}
.node.in { opacity: 1; translate: 0 0; }
.node:hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 28px rgba(13, 22, 44, 0.10),
    0 2px 6px rgba(13, 22, 44, 0.04),
    0 0 0 1px var(--node-color, var(--line-strong));
  border-color: var(--node-color, var(--line-strong));
}
.node:active { transform: translateY(0); transition-duration: 80ms; }
.node::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--node-color, var(--line));
  opacity: 0.9;
  z-index: 2;
}
/* soft color wash on hover */
.node::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(140% 100% at 0% 50%, var(--node-soft, transparent), transparent 60%),
    linear-gradient(180deg, var(--node-soft, transparent) 0%, transparent 100%);
  opacity: 0;
  transition: opacity .15s var(--ease-out);
  pointer-events: none;
}
.node:hover::after { opacity: 0.55; }

.node-main {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px 9px 18px;
  position: relative;
  z-index: 1;
}
.node-title {
  font-size: 13.5px; font-weight: 600; line-height: 1.2;
  letter-spacing: -0.005em;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}
.node-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--node-soft, var(--bg-2));
  color: var(--node-color, var(--ink-2));
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  transition: transform .22s var(--ease-spring);
}
.node:hover .node-count { transform: scale(1.1); }
.node-count.is-zero { color: var(--ink-3); background: var(--bg-2); }
.node-arrow {
  width: 14px; height: 14px;
  display: grid; place-items: center;
  color: var(--ink-3);
  flex-shrink: 0;
  transition: transform .22s var(--ease-out), color .22s;
}
.node:hover .node-arrow {
  transform: translateX(3px);
  color: var(--node-color, var(--ink));
}

/* expanding description on hover */
.node-desc {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .35s var(--ease-out), opacity .25s var(--ease-out), padding .35s var(--ease-out);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-2);
  padding: 0 14px 0 18px;
  position: relative;
  z-index: 1;
}
.node-desc span {
  display: block;
  padding-top: 4px;
  border-top: 1px dashed color-mix(in oklab, var(--node-color, #999) 25%, transparent);
  padding-bottom: 12px;
}
.node:hover .node-desc {
  max-height: 120px;
  opacity: 1;
}

/* ---------- Stats strip (bottom) ---------- */
.stats-strip {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  padding: 14px 28px 14px;
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  min-height: 68px;
  position: relative;
}
.stats-side {
  display: flex;
  align-items: center;
  min-width: 0;
}
.stats-side-left { justify-content: flex-end; }
.stats-side-right { justify-content: flex-start; }

.stat-side {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  line-height: 1;
  padding: 6px 14px;
  border-radius: 999px;
  background: transparent;
}

.stat-num {
  font-size: 15px; font-weight: 700;
  color: var(--ink);
  font-feature-settings: "tnum";
  letter-spacing: -0.01em;
}
.stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  font-weight: 500;
  text-transform: uppercase;
}
.stat-divider {
  width: 1px; height: 16px;
  background: var(--line);
  flex-shrink: 0;
}

/* Newest idea — compact pill, centered, with category tag on the frame */
.newest-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.newest-card {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 9px 20px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.94);
  border-radius: 999px;
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  color: inherit;
  max-width: min(440px, 56vw);
  box-shadow: 0 1px 2px rgba(13,22,44,0.04), 0 4px 14px rgba(13,22,44,0.05);
  transition: background .18s var(--ease-out), border-color .18s, transform .18s, box-shadow .18s;
}
.newest-card::before {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  border: 1.5px solid color-mix(in oklab, var(--accent) 55%, transparent);
  opacity: 0.7;
  pointer-events: none;
  transition: opacity .2s var(--ease-out), border-color .2s;
}
.newest-card:hover {
  background: white;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(13,22,44,0.05), 0 14px 30px rgba(13,22,44,0.10);
}
.newest-card:hover::before {
  opacity: 1;
  border-color: var(--accent);
}
.newest-label {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  white-space: nowrap;
}
.newest-label.muted { border: none; padding: 0; }
.newest-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent);
}
.newest-body {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  text-align: center;
}
.newest-title {
  font-size: 13px; font-weight: 600; color: var(--ink);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  max-width: 28ch;
}
.newest-cat-tag {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.05em;
  font-weight: 600;
  white-space: nowrap;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  box-shadow: 0 1px 4px rgba(13,22,44,0.04);
  pointer-events: none;
  line-height: 1.3;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.newest-cat-prefix {
  color: var(--ink-3);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.02em;
  opacity: 0.85;
}
.newest-cat-name {
  font-weight: 700;
  letter-spacing: 0.03em;
}
.newest-meta {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.newest-mid { opacity: 0.5; }
.newest-school { color: var(--ink-2); font-weight: 500; }

@media (max-width: 900px) {
  .stats-strip {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px 18px 16px;
  }
  .stats-side-left, .stats-side-right { justify-content: center; }
  .newest-card { width: auto; max-width: 92vw; }
}

/* ============================================
   Focus modal (replaces side panel)
   ============================================ */
.focus-root {
  position: fixed; inset: 0; z-index: 60;
  pointer-events: none;
}
.focus-root.open { pointer-events: auto; }

.focus-backdrop {
  position: absolute; inset: 0;
  background: rgba(11, 18, 32, 0.42);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  opacity: 0;
  transition: opacity .28s var(--ease-out);
}
.focus-root.open .focus-backdrop { opacity: 1; }

.focus-card {
  position: absolute;
  left: 50%; top: 50%;
  width: min(820px, 92vw);
  max-height: 86vh;
  background: var(--surface-solid);
  border-radius: 24px;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--line);
  display: flex; flex-direction: column;
  overflow: hidden;
  transform-origin: var(--ox, 50%) var(--oy, 50%);
  transform:
    translate(calc(-50% + (var(--ox, 50vw) - 50vw) * 0.35), calc(-50% + (var(--oy, 50vh) - 50vh) * 0.35))
    scale(0.4);
  opacity: 0;
  transition:
    transform .42s var(--ease-spring),
    opacity .28s var(--ease-out);
}
.focus-root.open .focus-card {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.focus-close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--line);
  display: grid; place-items: center; cursor: pointer;
  transition: all .15s ease;
  z-index: 10;
  color: var(--ink-2);
  backdrop-filter: blur(8px);
}
.focus-close:hover { background: white; border-color: var(--line-strong); color: var(--ink); transform: rotate(90deg); }

.focus-head {
  position: relative;
  padding: 32px 36px 0;
  flex-shrink: 0;
}
.focus-accent-bar {
  position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 18%, var(--accent) 82%, transparent 100%);
}
.focus-crumb {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
  color: var(--accent);
  font-weight: 600;
  text-transform: uppercase;
}
.focus-crumb .swatch { width: 9px; height: 9px; border-radius: 3px; background: var(--accent); }
.focus-crumb .crumb-sep { color: var(--ink-3); }
.focus-crumb .crumb-verb { color: var(--ink-3); font-style: italic; text-transform: lowercase; }
.focus-title {
  font-size: 28px; font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 56px 8px 0;
  line-height: 1.15;
}
.focus-desc {
  font-size: 14.5px; line-height: 1.55; color: var(--ink-2);
  margin: 0;
  max-width: 680px;
}

.focus-tabs {
  position: relative;
  margin-top: 22px;
  display: flex; gap: 6px;
  border-bottom: 1px solid var(--line);
}
.ftab {
  position: relative;
  padding: 12px 18px;
  font-size: 13.5px; font-weight: 500;
  font-family: var(--font-sans);
  background: transparent; border: none; cursor: pointer;
  color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 8px;
  transition: color .15s;
}
.ftab:hover { color: var(--ink-2); }
.ftab.active { color: var(--ink); }
.ftab::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px;
  height: 2px; background: var(--accent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease-out);
}
.ftab.active::after { transform: scaleX(1); }
.ftab-count {
  font-family: var(--font-mono); font-size: 10px;
  background: var(--accent-soft, var(--bg-2));
  color: var(--accent, var(--ink-2));
  padding: 2px 7px; border-radius: 999px;
  letter-spacing: 0.05em;
  font-weight: 700;
}

.focus-body {
  flex: 1;
  overflow-y: auto;
  padding: 22px 36px 36px;
}

/* idea card — collapsible */
.idea {
  border: 1px solid var(--line);
  background: var(--surface-solid);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
  transition:
    border-color .18s var(--ease-out),
    box-shadow .22s var(--ease-out),
    transform .18s var(--ease-out),
    background .18s var(--ease-out);
  position: relative;
  overflow: hidden;
}
.idea::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--accent, var(--line));
  opacity: 0.5;
  transition: opacity .2s var(--ease-out), width .25s var(--ease-out);
  z-index: 1;
}
.idea:hover {
  border-color: color-mix(in oklab, var(--accent, var(--line-strong)) 45%, var(--line));
  box-shadow: 0 2px 4px rgba(13,22,44,0.04), 0 10px 24px rgba(13,22,44,0.06);
}
.idea:hover::before { opacity: 0.85; width: 4px; }
.idea.is-expanded {
  border-color: color-mix(in oklab, var(--accent, var(--line-strong)) 55%, var(--line));
  box-shadow: 0 4px 8px rgba(13,22,44,0.05), 0 18px 42px rgba(13,22,44,0.10);
  background: white;
}
.idea.is-expanded::before { opacity: 1; width: 4px; }

.idea-toggle {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  padding: 11px 14px 11px 16px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  position: relative;
  z-index: 1;
}
.idea-toggle:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--accent) 30%, transparent);
  border-radius: var(--radius-md);
}

.idea-head { display: flex; gap: 12px; align-items: center; }
.idea-logo {
  width: 38px; height: 38px; border-radius: 9px;
  background: var(--bg-2);
  display: grid; place-items: center;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--line);
  padding: 3px;
  transition: width .28s var(--ease-out), height .28s var(--ease-out), border-radius .28s var(--ease-out);
}
.idea.is-expanded .idea-logo {
  width: 50px; height: 50px; border-radius: 11px;
}
.idea-logo img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
}
.idea-logo-cover { padding: 0; }
.idea-logo-cover img { object-fit: cover; }
.idea-logo-placeholder {
  background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 14%, var(--bg-2)), var(--bg-2));
  color: var(--accent);
}
.idea-logo-placeholder span {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em;
}
.idea-headtext { flex: 1; min-width: 0; }
.idea-title {
  font-size: 14.5px; font-weight: 600; letter-spacing: -0.005em;
  margin: 0 0 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: font-size .25s var(--ease-out), font-weight .25s var(--ease-out);
}
.idea.is-expanded .idea-title {
  font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
  white-space: normal;
}
.idea-school {
  font-size: 12px; color: var(--ink-2);
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.idea-school b { font-weight: 600; color: var(--ink); }
.idea-school span { color: var(--ink-3); }

.idea-summary-meta {
  display: inline-flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}
.idea-date {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-3); letter-spacing: 0.06em;
  white-space: nowrap;
}
.idea-meta-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}
.idea-meta-pill svg { flex-shrink: 0; }
.idea-chevron {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--ink-3);
  background: var(--bg-2);
  transition: transform .28s var(--ease-spring), background .15s, color .15s;
}
.idea.is-expanded .idea-chevron {
  transform: rotate(180deg);
  background: color-mix(in oklab, var(--accent) 14%, white);
  color: var(--accent);
}
.idea:hover .idea-chevron { background: white; color: var(--ink); }
.idea.is-expanded:hover .idea-chevron { background: color-mix(in oklab, var(--accent) 18%, white); color: var(--accent); }

.idea-expandable {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .42s var(--ease-out);
}
.idea.is-expanded .idea-expandable { grid-template-rows: 1fr; }
.idea-expandable-inner {
  overflow: hidden;
  min-height: 0;
  padding: 0 16px 0 16px;
}
.idea.is-expanded .idea-expandable-inner {
  padding-bottom: 16px;
}
.idea-desc { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); margin: 4px 0 0; }

/* Photos in idea card */
.idea-photos {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
}
.idea-photo-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 0;
  cursor: zoom-in;
  transition: transform .15s var(--ease-out), box-shadow .15s;
}
.idea-photo-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s var(--ease-out);
}
.idea-photo-thumb:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.idea-photo-thumb:hover img { transform: scale(1.05); }

/* External link chip on idea */
.idea-link {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  background: var(--bg-2);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.idea-link:hover {
  background: white;
  border-color: var(--accent, var(--line-strong));
  color: var(--accent, var(--ink));
  transform: translateY(-1px);
}
.idea-link-arrow {
  font-size: 12px;
  color: var(--ink-3);
  transition: transform .15s, color .15s;
}
.idea-link:hover .idea-link-arrow { transform: translate(2px, -2px); color: var(--accent); }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(11,18,32,0.86);
  backdrop-filter: blur(6px);
  z-index: 200;
  display: grid; place-items: center;
  padding: 40px;
  animation: fadeUp 0.2s var(--ease-out);
}
.lightbox img {
  max-width: 100%; max-height: 100%;
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  cursor: default;
}
.lightbox-close, .lightbox-nav {
  position: absolute;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  color: white;
  font-size: 22px;
  cursor: pointer;
  display: grid; place-items: center;
  transition: background .15s;
}
.lightbox-close { top: 24px; right: 24px; font-size: 20px; }
.lightbox-nav.prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-nav.next { right: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(255,255,255,0.18); }
.idea-contacts {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  display: flex; flex-wrap: wrap; gap: 8px;
}
.contact-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 10px 5px 5px;
  border-radius: 999px;
  background: var(--bg-2);
  font-size: 11.5px;
  color: var(--ink-2);
  text-decoration: none;
  transition: background .15s, color .15s;
  border: 1px solid transparent;
}
.contact-chip:hover { background: white; border-color: var(--line-strong); color: var(--ink); }
.contact-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 9px; font-weight: 600;
  background: white;
  color: var(--ink);
}
.idea-date {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-3); letter-spacing: 0.06em;
}

/* ---------- Idea actions (edit / delete) ---------- */
.idea-actions {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center;
  justify-content: flex-end;
}
.idea-action {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  font-weight: 600;
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: white;
  color: var(--ink-3);
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s, transform .15s;
}
.idea-action svg { opacity: 0.8; }
.idea-action:hover {
  color: var(--ink);
  border-color: var(--line-strong);
  transform: translateY(-1px);
}
.idea-action-delete:hover {
  color: #c83b3b;
  border-color: color-mix(in oklab, #c83b3b 50%, var(--line));
  background: color-mix(in oklab, #c83b3b 5%, white);
}
.idea-confirm {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 6px 4px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, #c83b3b 35%, var(--line));
  background: color-mix(in oklab, #c83b3b 6%, white);
  animation: idea-confirm-in .18s ease-out;
}
@keyframes idea-confirm-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
.idea-confirm-text {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #8a2a2a;
}
.idea-confirm-btn {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.idea-confirm-yes {
  background: #c83b3b; color: white; border-color: #c83b3b;
}
.idea-confirm-yes:hover { background: #b02f2f; border-color: #b02f2f; }
.idea-confirm-no {
  background: transparent; color: var(--ink-3); border-color: var(--line);
}
.idea-confirm-no:hover { color: var(--ink); border-color: var(--line-strong); background: white; }

/* button group inside form actions */
.form-actions-btns {
  display: flex; align-items: center; gap: 10px;
}

.empty {
  text-align: center;
  padding: 48px 20px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  color: var(--ink-3);
}
.empty h4 { color: var(--ink); margin: 10px 0 6px; font-size: 15px; font-weight: 600; }
.empty p { font-size: 13px; margin: 0; }
.empty.subtle { padding: 28px 20px; }

/* Search + filter toolbar inside competence modal — subtle, collapsible */
.idea-toolbar {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 -8px 12px;
  padding: 6px 8px;
  background: linear-gradient(180deg, white 0%, white 70%, rgba(255,255,255,0.85) 100%);
  backdrop-filter: blur(6px);
}
.idea-toolbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 32px;
}
.idea-toolbar-meta {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.idea-toolbar-count { color: var(--ink-2); }
.idea-toolbar-count span { color: var(--ink-3); margin-left: 2px; }
.idea-toolbar-reset {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: var(--ink-3);
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color .15s, background .15s;
}
.idea-toolbar-reset:hover { color: var(--ink); background: var(--bg-2); }
.idea-toolbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.it-icon-btn {
  width: 30px; height: 30px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: white;
  color: var(--ink-2);
  cursor: pointer;
  display: grid; place-items: center;
  position: relative;
  transition: color .15s, border-color .15s, box-shadow .15s, background .15s;
}
.it-icon-btn:hover { color: var(--ink); border-color: var(--line-strong); }
.it-icon-btn.open, .it-icon-btn[aria-expanded="true"] { color: var(--ink); }
.it-badge {
  position: absolute;
  top: -3px; right: -3px;
  min-width: 14px; height: 14px;
  border-radius: 999px;
  background: var(--ink);
  color: white;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  display: grid; place-items: center;
  padding: 0 4px;
  line-height: 1;
  border: 2px solid white;
  box-sizing: content-box;
}

.it-search {
  display: inline-flex;
  align-items: center;
}
.it-search-panel {
  width: 0;
  margin-right: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  position: relative;
  transition: width .32s var(--ease-out), margin-right .32s var(--ease-out);
}
.it-search.open .it-search-panel {
  width: 240px;
  margin-right: 6px;
}
.it-search.open { order: -1; }
.it-search-panel input {
  flex: 1; min-width: 0;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 30px 0 12px;
  font: inherit;
  font-size: 12.5px;
  background: white;
  color: var(--ink);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.it-search-panel input:focus {
  border-color: var(--accent, var(--line-strong));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent, #0B1220) 14%, transparent);
}
.it-search-clear {
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  border-radius: 50%;
  border: none;
  background: var(--bg-2);
  color: var(--ink-3);
  cursor: pointer;
  display: grid; place-items: center;
  transition: background .12s, color .12s;
}
.it-search-clear:hover { background: var(--line); color: var(--ink); }

.idea-filter-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s var(--ease-out), margin-top .35s var(--ease-out);
  margin-top: 0;
}
.idea-toolbar.filter-on .idea-filter-panel {
  grid-template-rows: 1fr;
  margin-top: 8px;
}
.idea-filter-panel-inner {
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
}
.idea-toolbar.filter-on .idea-filter-panel-inner {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-2);
}
.ifp-group { display: flex; flex-direction: column; gap: 5px; }
.ifp-grow { flex: 1; min-width: 0; }
.ifp-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.ifp-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ifp-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: white;
  color: var(--ink-2);
  font: inherit;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.ifp-chip:hover { border-color: var(--line-strong); color: var(--ink); }
.ifp-chip.is-on { font-weight: 600; background: white; }
.ifp-chip-count {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-3);
  background: var(--bg-2);
  padding: 1px 5px;
  border-radius: 999px;
  font-weight: 600;
}
.ifp-chip.is-on .ifp-chip-count {
  background: color-mix(in oklab, currentColor 12%, transparent);
  color: inherit;
}
.ifp-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ifp-select, .ifp-input {
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: white;
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
  outline: none;
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.ifp-select:focus, .ifp-input:focus {
  border-color: var(--accent, var(--line-strong));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent, #0B1220) 14%, transparent);
}
.ifp-input::placeholder { color: var(--ink-3); }
@media (max-width: 540px) {
  .ifp-row { grid-template-columns: 1fr; }
  .it-search.open .it-search-panel { width: 160px; }
}

/* form */
.form-grid { display: grid; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field > label:not(.logo-drop) {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink);
  font-weight: 700;
}
.field > label:not(.logo-drop) .req { color: var(--c-mite); }
.field > label:not(.logo-drop) .opt {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: var(--ink-3);
  font-weight: 500;
  margin-left: 4px;
}
.field input, .field textarea {
  font-family: var(--font-sans);
  font-size: 13.5px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-solid);
  color: var(--ink);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
}
.field input:focus, .field textarea:focus {
  border-color: var(--accent, var(--ink));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent, #0B1220) 18%, transparent);
}
.field textarea { min-height: 90px; resize: vertical; line-height: 1.5; }
.field .hint { font-size: 11px; color: var(--ink-3); }

.contacts-list { display: grid; gap: 10px; }
.contact-row { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 8px; align-items: center; }
.contact-row input { padding: 8px 10px; font-size: 12.5px; }
.contact-row .remove {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface-solid);
  display: grid; place-items: center; cursor: pointer;
  color: var(--ink-3);
  transition: all .15s ease;
}
.contact-row .remove:hover { color: var(--c-mite); border-color: var(--c-mite); }
.add-contact {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  background: transparent; border: 1px dashed var(--line);
  padding: 8px 12px; border-radius: 8px;
  cursor: pointer; color: var(--ink-2);
  width: max-content;
  transition: all .15s ease;
}
.add-contact:hover { color: var(--ink); border-color: var(--line-strong); background: var(--bg-2); }

.logo-drop {
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--bg-2);
  transition: all .15s;
}
.logo-drop.has-logo {
  border-style: solid;
  background: white;
}
.logo-drop-zone {
  display: flex; align-items: center; gap: 16px;
  cursor: pointer;
}
.logo-drop-zone:hover .logo-drop-preview { border-color: var(--line-strong); }
.logo-drop-preview {
  width: 88px; height: 88px; border-radius: 14px;
  background: white;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  overflow: hidden;
  flex-shrink: 0;
  padding: 8px;
  transition: background .15s, border-color .15s;
}
.logo-drop-preview.fit-cover { padding: 0; }
.logo-drop-preview.bg-dark { background: #0B1220; border-color: #1a2238; }
.logo-drop-preview img {
  width: 100%; height: 100%;
  object-position: center;
}
.logo-drop-empty { color: var(--ink-3); }
.logo-drop-text { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; flex: 1; min-width: 0; }
.logo-drop-text b { color: var(--ink); display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 2px; }
.logo-drop input[type="file"] { display: none; }

.logo-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.logo-control-group { display: inline-flex; align-items: center; gap: 8px; }
.logo-control-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.logo-seg {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-2);
}
.logo-seg button {
  border: none; background: transparent;
  padding: 5px 11px;
  border-radius: 999px;
  font: inherit;
  font-size: 11.5px; font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.logo-seg button.is-on {
  background: white;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(13,22,44,0.06);
}
.logo-remove {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  background: transparent;
  border: none;
  color: var(--ink-3);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color .15s, background .15s;
}
.logo-remove:hover { color: var(--c-mite); background: color-mix(in oklab, var(--c-mite) 8%, transparent); }

/* Extras: optional link + photos in submit form */
.extras {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--bg-2);
}
.extras-link {
  display: flex; align-items: center; gap: 0;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.extras-link:focus-within {
  border-color: var(--accent, var(--ink));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent, #0B1220) 14%, transparent);
}
.extras-link-icon {
  display: grid; place-items: center;
  width: 36px; height: 38px;
  color: var(--ink-3);
  flex-shrink: 0;
  border-right: 1px solid var(--line);
}
.extras-link input {
  flex: 1;
  border: none !important;
  outline: none;
  background: transparent;
  padding: 9px 12px 9px 10px;
  font: inherit;
  font-size: 13px;
  box-shadow: none !important;
  width: 100%;
}

.extras-photos-head {
  display: flex; flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}
.extras-photos-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.extras-photos-hint {
  font-size: 11px;
  color: var(--ink-3);
}
.photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}
.photo-thumb, .photo-add {
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  background: white;
  border: 1px solid var(--line);
}
.photo-thumb img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.photo-remove {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(11,18,32,0.78);
  color: white;
  border: none;
  cursor: pointer;
  display: grid; place-items: center;
  font-size: 16px; line-height: 1;
  transition: background .15s, transform .15s;
}
.photo-remove:hover { background: var(--c-mite); transform: scale(1.06); }
.photo-add {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  background: white;
  border-style: dashed;
  color: var(--ink-3);
  font-size: 11px;
  cursor: pointer;
  text-align: center;
  transition: color .15s, border-color .15s, background .15s;
}
.photo-add:hover { color: var(--ink); border-color: var(--line-strong); background: white; }
.photo-add input[type="file"] { display: none; }
.photo-add svg { color: inherit; }

.form-actions {
  margin-top: 8px;
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 16px; border-top: 1px solid var(--line);
  gap: 12px;
}
.form-actions-hint {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.form-actions-hint b { color: var(--ink); font-weight: 600; }
.form-actions .submit {
  background: var(--ink); color: white;
  border: 1px solid var(--ink);
  padding: 11px 22px;
  border-radius: 999px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  transition: all .18s;
  white-space: nowrap;
}
.form-actions .submit:not(:disabled):hover { transform: translateY(-1px); box-shadow: var(--shadow-md); filter: brightness(1.08); }
.form-actions .submit:disabled {
  background: var(--bg-2) !important;
  color: var(--ink-3) !important;
  border-color: var(--line) !important;
  cursor: not-allowed;
  opacity: 1;
  filter: none;
  transform: none;
}

.success-flash {
  background: #ECFDF5; color: #047857;
  border: 1px solid #A7F3D0;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 13px;
  margin-bottom: 16px;
  display: flex; align-items: center; gap: 10px;
  animation: flash-in .35s var(--ease-out);
}
@keyframes flash-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* scrollbar */
.focus-body::-webkit-scrollbar { width: 10px; }
.focus-body::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.focus-body::-webkit-scrollbar-thumb:hover { background: var(--line-strong); }

/* ============================================
   Chooser
   ============================================ */
.chooser { padding: 36px 36px 36px; }
.chooser-intro h3 {
  font-size: 22px; font-weight: 700; letter-spacing: -0.015em; margin: 0 56px 6px 0;
  line-height: 1.2;
}
.chooser-intro p {
  font-size: 13.5px; line-height: 1.55; color: var(--ink-2);
  margin: 0 0 22px;
  max-width: 640px;
}
.chooser-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.chooser-pillar {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 14px 10px;
  background: var(--surface-solid);
  position: relative;
  overflow: hidden;
}
.chooser-pillar::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--c);
}
.chooser-pillar-head {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 10px;
  padding-left: 6px;
}
.chooser-pillar-head .title {
  font-size: 13px; font-weight: 700; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--c);
}
.chooser-pillar-head .verb {
  font-family: var(--font-mono);
  font-size: 10px; font-style: italic;
  color: var(--ink-3);
  letter-spacing: 0.06em;
}
.chooser-comps { display: flex; flex-direction: column; gap: 4px; }
.chooser-comp {
  display: grid;
  grid-template-columns: 1fr 16px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  color: var(--ink);
  transition: all .15s var(--ease-out);
}
.chooser-comp:hover {
  background: var(--cs);
  border-color: color-mix(in oklab, var(--c) 22%, transparent);
}
.chooser-comp .ct {
  font-size: 12.5px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chooser-comp .arr {
  color: var(--c); opacity: 0;
  transform: translateX(-4px);
  transition: opacity .15s, transform .15s;
}
.chooser-comp:hover .arr { opacity: 1; transform: translateX(0); }

/* ============================================
   About modal
   ============================================ */
.about-backdrop {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(11,18,32,0.4);
  backdrop-filter: blur(10px);
  display: none;
  place-items: center;
  opacity: 0;
  transition: opacity .25s var(--ease-out);
}
.about-backdrop.open { display: grid; opacity: 1; }
.about-modal {
  position: relative;           /* Bezugsrahmen für das Schließkreuz */
  width: min(560px, 92vw);
  max-height: 88vh;
  display: flex; flex-direction: column;
  background: white;
  border-radius: var(--radius-lg);
  padding: 0;                   /* Abstand liegt innen, damit die Scrollleiste
                                   auf Höhe des Schließkreuzes beginnt */
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  animation: about-in .3s var(--ease-spring);
}
.about-modal > .about-scroll { padding: 26px 30px 10px; }
.about-modal > .about-foot { padding: 4px 30px 22px; margin-top: 0; }
/* Das Schließkreuz sitzt immer im Fenster, nicht am Bildschirmrand. */
.about-modal > .focus-close { position: absolute; top: 14px; right: 14px; }
@keyframes about-in {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.about-modal h3 { margin: 0 0 8px; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.about-modal p { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); margin: 0 0 12px; }
.about-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* responsive */
@media (max-width: 1240px) {
  .header-title { padding: 0 220px; }
  .pillar-frame { width: clamp(270px, 28vw, 340px); }
}
@media (max-width: 1100px) {
  .header-title { padding: 0 200px; }
}
@media (max-width: 900px) {
  .topbar { padding: 16px 18px 10px; }
  .header-title { padding: 0 0; }
  .topbar-actions { position: relative; top: auto; right: auto; justify-content: center; margin-top: 12px; grid-column: 1 / -1; }
  .stats-strip { grid-template-columns: 1fr; gap: 12px; }
  .newest { justify-self: start; flex-wrap: wrap; }
}
@media (max-width: 760px) {
  body { overflow-y: auto; overflow-x: hidden; }
  .app { height: auto; min-height: 100vh; }
  .stage { overflow: visible; }
  .canvas { height: auto; min-height: 0; padding: 0; max-height: none; }
  .canvas-wrap { position: relative; inset: auto; padding: 24px 16px; }
  .pillar { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: 100%; align-items: flex-start; margin-bottom: 28px; transform: none !important; }
  .pillar.tr, .pillar.br { align-items: flex-start; }
  .pillar.tr .pillar-head, .pillar.br .pillar-head { justify-content: flex-start; }
  .pillar.tr .pillar-verb-line, .pillar.br .pillar-verb-line { flex-direction: row; }
  .pillar.tr .pillar-claim, .pillar.br .pillar-claim { text-align: left; padding-right: 0; padding-left: 2px; }
  .pillar-claim { white-space: normal; }
  .pillar-frame { width: 100%; max-width: 100%; }
  .hub { position: relative; left: auto; top: auto; transform: scale(1); margin: 0 auto 24px; opacity: 1; }
  .hub.in { transform: scale(1); }
  .connections { display: none; }
  .chooser-grid { grid-template-columns: 1fr; }
  .focus-card { width: 96vw; max-height: 90vh; border-radius: 18px; }
  .focus-head { padding: 24px 22px 0; }
  .focus-body { padding: 18px 22px 24px; }
  .focus-title { font-size: 22px; margin-right: 44px; }
  .chooser { padding: 24px 22px; }
  .chooser-intro h3 { font-size: 18px; }
  .title-main { font-size: 32px; }
}

@keyframes fadeUp {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeUp 0.45s var(--ease-out) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }
  .cursor-ambient { display: none; }
}

/* ============================================================
   Backend-Erweiterungen: Wettbewerb, Kompetenz-Info, Zugangscode,
   Status, Mein Zugang, Admin-Panel, Bewertung, Team
   (im Designsystem der Seite: gleiche Tokens, Schatten, Kurven)
   ============================================================ */

.btn.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn.btn-admin-on { color: var(--c-mund); border-color: color-mix(in oklab, var(--c-mund) 38%, var(--line)); }

/* ---- Wettbewerbs-Button (oben links, neben der Suche) ----
   Der Rahmen bleibt ruhig stehen. Durch ihn wandert langsam ein Impuls in den
   vier Säulenfarben, sichtbar nur als leichter Farbwechsel der Kontur. */
/* Suche, Wettbewerb und Ansichtswechsel bilden oben links eine Reihe. */
.top-left-cluster {
  position: absolute; top: 16px; left: 74px; z-index: 5;
  display: flex; align-items: center; gap: 10px;
  transition: opacity .2s var(--ease-out), transform .2s var(--ease-out);
}
.search.open ~ .top-left-cluster { opacity: 0; transform: translateX(-8px); pointer-events: none; }
.comp-btn-wrap { position: relative; }
.comp-btn {
  position: relative; display: inline-flex; align-items: center; gap: 9px;
  height: 36px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface-solid);
  color: var(--ink-2); cursor: pointer;
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600;
  animation: comp-impulse 48s linear infinite;
  transition: color .18s, transform .18s var(--ease-out);
}
@keyframes comp-impulse {
  /* Durchgehender Verlauf durch die vier Farben, ohne neutrale Zwischenschritte.
     Ein voller Durchlauf dauert 48 Sekunden. */
   0%  { border-color: var(--c-mund); }
  25%  { border-color: var(--c-moti); }
  50%  { border-color: var(--c-mogl); }
  75%  { border-color: var(--c-mite); }
 100%  { border-color: var(--c-mund); }
}
.comp-btn:hover { color: var(--ink); transform: translateY(-1px); }
.comp-btn-text { position: relative; }
.comp-btn-date {
  position: relative;
  font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); letter-spacing: .03em;
}
.comp-btn:hover .comp-btn-date { color: var(--ink-2); }

/* ---- Impulsleiste am Kopf des Admin-Panels ----
   Ersetzt dort den einfarbigen Balken: ein feiner Farbverlauf, durch den ein
   heller Schimmer wandert. Sehr zurückhaltend, kein Blinken. */
.impulse-bar {
  position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
  /* Der Farbverlauf ist doppelt so breit wie die Leiste und wandert langsam.
     Dadurch ist immer Farbe zu sehen, nichts blendet aus. */
  background: linear-gradient(90deg,
    var(--c-mund), var(--c-moti), var(--c-mogl), var(--c-mite),
    var(--c-mogl), var(--c-moti), var(--c-mund));
  background-size: 300% 100%;
  opacity: .5;
  animation: impulse-colors 60s linear infinite;
}
/* Ein zusätzlicher heller Schimmer zieht in großem Abstand darüber hinweg. */
.impulse-bar::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.9) 50%, transparent 100%);
  width: 22%;
  animation: impulse-sheen 14s ease-in-out infinite;
}
@keyframes impulse-colors {
  0%   { background-position:   0% 0; }
  100% { background-position: 300% 0; }
}
@keyframes impulse-sheen {
  0%   { transform: translateX(-120%); }
  55%  { transform: translateX(560%); }
  100% { transform: translateX(560%); }
}

@media (prefers-reduced-motion: reduce) {
  .comp-btn { animation: none; }
  .impulse-bar { animation: none; }
  .impulse-bar::after { animation: none; opacity: 0; }
}
@media (max-width: 900px) { .comp-btn-date { display: none; } }

/* Ablauf im Wettbewerbs-Fenster */
.comp-steps { margin: 0; padding-left: 20px; }
.comp-steps li { font-size: 13.5px; line-height: 1.7; color: var(--ink-2); margin-bottom: 7px; }

/* ---- Agency-Fenster ---- */
.agency-modal { width: min(680px, 94vw); }
.agency-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.agency-word {
  font-size: 30px; font-weight: 700; letter-spacing: .04em;
  background: linear-gradient(95deg, var(--c-moti), var(--c-mite), var(--c-mund));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.agency-sub { font-size: 13px; font-style: italic; color: var(--ink-3); }
.agency-lead { font-size: 15.5px; line-height: 1.65; color: var(--ink); font-weight: 500; margin: 0 0 14px; }
.agency-para { font-size: 13.5px; line-height: 1.75; color: var(--ink-2); margin: 0 0 12px; }
.agency-pillars { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.agency-pillars-label {
  display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px;
}
.agency-pillar-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.agency-pillar {
  display: flex; flex-direction: column; gap: 1px;
  padding: 9px 12px; border-radius: var(--radius-sm);
  background: var(--cs); border-left: 3px solid var(--c);
}
.agency-pillar b { font-size: 12.5px; color: var(--ink); letter-spacing: .01em; }
.agency-pillar span { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

/* ---- Hervorgehobene Idee (aus Suche/Statistikleiste angesteuert) ---- */
.idea.is-highlighted {
  border-color: color-mix(in oklab, var(--accent) 55%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 14%, transparent), var(--shadow-md);
  animation: idea-flash 2.4s var(--ease-out) 1;
}
@keyframes idea-flash {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 40%, transparent), var(--shadow-md); }
  35%  { box-shadow: 0 0 0 7px color-mix(in oklab, var(--accent) 0%, transparent), var(--shadow-md); }
  100% { box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 14%, transparent), var(--shadow-md); }
}

/* ---- Werkzeugleiste im Admin-Panel ---- */
.admin-toolbar {
  display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; margin-bottom: 12px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-md);
}
.atb-group { display: flex; flex-direction: column; gap: 4px; }
.atb-grow { flex: 1; min-width: 180px; }
.atb-label {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
.admin-toolbar select, .admin-toolbar input {
  font: inherit; font-size: 12.5px; padding: 7px 10px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface-solid); color: var(--ink); outline: none;
}
.admin-toolbar select:focus, .admin-toolbar input:focus { border-color: var(--ink-3); }
.atb-reset {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  border: 1px solid var(--line-strong); background: var(--surface-solid);
  color: var(--ink-2); padding: 7px 12px; border-radius: 999px; cursor: pointer;
}
.atb-reset:hover { color: var(--ink); border-color: var(--ink-3); }
.admin-result-line { font-size: 12px; color: var(--ink-3); margin-bottom: 10px; }
.arl-hint { color: var(--ink-3); }
.rank-badge {
  display: grid; place-items: center; flex-shrink: 0;
  min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  background: var(--bg-2); color: var(--ink-2); border: 1px solid var(--line-strong);
}
.rank-badge.top { background: var(--ink); color: white; border-color: var(--ink); }

/* ---- Kompetenz-Info (erstes Fenster) ---- */
.comp-info { max-width: 660px; animation: fadeUp .35s var(--ease-out) both; }
.comp-claim {
  font-size: 17px; font-weight: 600; line-height: 1.5;
  color: var(--accent); margin: 0 0 16px; font-style: italic;
}
.comp-intro {
  font-size: 13.5px; line-height: 1.7; color: var(--ink-2);
  margin: 0 0 16px; padding: 14px 16px;
  background: var(--accent-soft, var(--bg-2)); border-radius: var(--radius-md);
}
.comp-para { font-size: 14px; line-height: 1.75; color: var(--ink-2); margin: 0 0 14px; }
.comp-info-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }

/* ---- Statusabzeichen ---- */
.status-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .03em; padding: 3px 9px; border-radius: 999px;
  border: 1px solid transparent; white-space: nowrap;
}
.status-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-pending  { color: #B7791F; background: #FEF6E7; border-color: #F6E0B5; }
.status-approved { color: #057857; background: #ECFDF5; border-color: #A7F3D0; }
.status-rejected { color: #C2410C; background: #FEF1EC; border-color: #FBD3C2; }

/* ---- Zugangscode-Abfrage im Formular ---- */
.code-required {
  border: 1px solid color-mix(in oklab, var(--accent) 35%, var(--line));
  background: color-mix(in oklab, var(--accent) 5%, white);
  border-radius: var(--radius-md); padding: 14px 16px;
  animation: fadeUp .3s var(--ease-out) both;
}
.code-required-head { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }
.code-required-head svg { color: var(--accent); }
.code-required p { margin: 0 0 10px; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.code-required-input {
  width: 100%; font: inherit; font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: .06em;
  padding: 10px 12px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); background: white; outline: none;
}
.code-required-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 16%, transparent); }
.code-error { display: block; color: #C2410C; font-size: 12px; margin-top: 6px; }
.form-error {
  background: #FEF1EC; color: #B3340C; border: 1px solid #FBD3C2;
  padding: 10px 14px; border-radius: var(--radius-md); font-size: 13px;
}

/* ---- Erfolgsansicht nach dem Einreichen ---- */
.submit-success {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 16px 8px 8px; animation: fadeUp .4s var(--ease-out) both;
}
.submit-success-icon {
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  color: white; background: var(--accent);
  box-shadow: 0 10px 28px color-mix(in oklab, var(--accent) 38%, transparent);
  margin-bottom: 16px; animation: popIn .45s var(--ease-spring) both;
}
@keyframes popIn { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
.submit-success h3 { margin: 0 0 6px; font-size: 21px; font-weight: 700; letter-spacing: -.015em; }
.submit-success-lead { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); max-width: 450px; }
.access-code-box {
  margin-top: 18px; width: 100%; max-width: 450px; text-align: left;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--bg-2); padding: 16px 18px;
}
.access-code-label {
  display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px;
}
.access-code-value { display: flex; align-items: center; gap: 10px; }
.access-code-value code {
  flex: 1; text-align: center; font-family: var(--font-mono);
  font-size: 21px; font-weight: 700; letter-spacing: .06em; color: var(--ink);
  background: white; border: 1px dashed var(--line-strong);
  padding: 9px 14px; border-radius: 10px;
}
.access-code-copy {
  border: 1px solid var(--line-strong); background: white; color: var(--ink-2);
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  padding: 9px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap;
  transition: all .16s var(--ease-out);
}
.access-code-copy:hover { color: var(--ink); border-color: var(--ink-3); }
.access-code-hint { font-size: 12px; line-height: 1.6; color: var(--ink-2); margin: 12px 0 0; }
.access-code-hint b { color: var(--ink); }

/* ---- Antwort des Teams in der Ideenkarte ---- */
.idea-response {
  margin-top: 10px; padding: 10px 14px; font-size: 12.5px; line-height: 1.6;
  color: var(--ink-2); background: var(--bg-2);
  border-left: 3px solid var(--accent, var(--c-mund)); border-radius: 0 8px 8px 0;
}
.idea-response-label {
  display: block; font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px;
}

/* ---- Sheet (Mein Zugang / Admin) ---- */
.about-modal.wide { max-width: 940px; width: min(940px, 94vw); }
.about-modal.sheet { padding: 0; }
/* Feste Höhen verhindern, dass das Fenster beim Wechsel der Reiter springt. */
.about-modal.sheet-md { min-height: min(62vh, 560px); }
.about-modal.sheet-xl {
  width: min(1180px, 95vw); max-width: none;
  height: 88vh;
}
.sheet-head { position: relative; padding: 30px 34px 0; flex-shrink: 0; }
.sheet-title { margin: 4px 48px 6px 0; font-size: 23px; font-weight: 700; letter-spacing: -.02em; }
.sheet-subtitle { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); max-width: 600px; }
.sheet-body { flex: 1; min-height: 0; padding: 22px 34px 30px; overflow-y: auto; }
.sheet-body::-webkit-scrollbar { width: 9px; }
.sheet-body::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }

/* ---- „Über das Modell“ erweitert ---- */
.about-scroll {
  flex: 1; min-height: 0; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: transparent transparent;
  scrollbar-gutter: stable;
  transition: scrollbar-color .5s ease .4s;
}
/* Nur während des Scrollens sichtbar, danach blendet sie sich wieder aus.
   Die Klasse setzt die App beim Scrollen kurzzeitig. */
.about-scroll.scrolling { scrollbar-color: var(--line-strong) transparent; transition-delay: 0s; }
.about-scroll::-webkit-scrollbar { width: 10px; }
.about-scroll::-webkit-scrollbar-track { background: transparent; margin: 14px 0; }
.about-scroll::-webkit-scrollbar-thumb {
  background-color: transparent; border-radius: 999px;
  border: 4px solid transparent; background-clip: content-box;
  transition: background-color .5s ease .4s;
}
.about-scroll.scrolling::-webkit-scrollbar-thumb {
  background-color: color-mix(in oklab, var(--ink-3) 55%, transparent);
  transition-delay: 0s;
}
.about-eyebrow {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
.about-lead { font-size: 16.5px; color: var(--ink-2); margin: 6px 0 24px; line-height: 1.65; }
.about-sec { margin-bottom: 24px; }
.about-sec h4 { margin: 0 0 10px; font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.about-sec p { margin: 0 0 13px; font-size: 15px; line-height: 1.75; color: var(--ink-2); }
.about-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 880px) { .about-pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .about-pillars { grid-template-columns: 1fr; } }
.about-pillar {
  border: 1px solid var(--line); border-left: 3px solid var(--c);
  border-radius: var(--radius-md); padding: 12px 14px; background: var(--cs);
  display: flex; flex-direction: column; gap: 2px;
}
.ap-num { font-family: var(--font-mono); font-size: 10px; color: var(--c); font-weight: 700; }
.ap-title { font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: .01em; line-height: 1.25; }
.ap-verb { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.ap-claim { font-size: 11.5px; line-height: 1.5; color: var(--ink-2); margin-top: 4px; font-style: italic; }
.about-license { font-size: 11.5px; color: var(--ink-3); margin-top: 8px; }

/* ---- Mein Zugang ---- */
.access-enter { display: flex; flex-direction: column; gap: 6px; max-width: 420px; }
.access-enter-label {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.access-enter-input {
  font: inherit; font-family: var(--font-mono); font-size: 16px;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 12px 14px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); background: var(--surface-solid); outline: none;
}
.access-enter-input.plain { font-family: var(--font-sans); text-transform: none; letter-spacing: 0; font-size: 14px; }
.access-enter-input:focus { border-color: var(--c-mund); box-shadow: 0 0 0 3px rgba(45,125,210,.14); }
.access-enter .btn.primary { width: max-content; }
.access-enter-hint { font-size: 12px; line-height: 1.6; color: var(--ink-3); margin: 10px 0 0; }
.access-list { display: flex; flex-direction: column; gap: 10px; }
.access-list-actions { display: flex; justify-content: flex-end; }
.access-row {
  display: flex; align-items: center; gap: 12px; position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px 14px;
  transition: all .18s var(--ease-out);
}
.access-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.access-row:hover { box-shadow: var(--shadow-sm); border-color: var(--line-strong); }
.access-row-main { flex: 1; min-width: 0; }
.access-row-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.access-row-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.access-row-meta { font-size: 12px; color: var(--ink-3); margin-top: 3px; }
.access-row-note { font-size: 12px; color: #C2410C; margin-top: 6px; line-height: 1.5; }
.access-row-note.info { color: var(--ink-2); }

/* ---- Admin-Panel ---- */
.admin-tabs { border-bottom: 1px solid var(--line); margin-bottom: 18px; padding: 0; }
.admin-tabs .admin-logout { margin-left: auto; align-self: center; margin-bottom: 6px; }
.admin-list { display: flex; flex-direction: column; gap: 12px; }
.admin-card {
  border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 15px 17px; position: relative; overflow: hidden;
  transition: box-shadow .18s var(--ease-out);
}
.admin-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.admin-card:hover { box-shadow: var(--shadow-sm); }
.admin-card-head { margin-bottom: 8px; }
.admin-card-titles { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.admin-card-title { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
.rating-pill {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; color: var(--ink-2);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px;
}
.admin-card-meta { font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.admin-card-meta b { color: var(--ink-2); }
.mini-code { font-family: var(--font-mono); font-size: 10.5px; background: var(--bg-2); padding: 1px 6px; border-radius: 5px; border: 1px dashed var(--line-strong); }
.admin-card-desc { font-size: 13px; line-height: 1.6; color: var(--ink-2); margin: 0 0 8px; }
.rating-summary {
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center;
  margin: 10px 0; padding: 9px 13px; background: var(--bg-2); border-radius: var(--radius-sm);
}
.rs-crit { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); }
.rating-comments { flex-basis: 100%; font-size: 12px; margin-top: 2px; }
.rating-comments summary { cursor: pointer; color: var(--ink-3); font-weight: 600; }
.rating-comment { margin-top: 6px; color: var(--ink-2); line-height: 1.5; }
.admin-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.admin-card-contact { font-size: 12px; }
.admin-card-contact a { color: var(--c-mund); text-decoration: none; }
.admin-card-contact a:hover { text-decoration: underline; }
.admin-card-contact .no-email { color: var(--ink-3); font-style: italic; }
.admin-card-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.admin-act {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  padding: 6px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-strong); background: white; color: var(--ink-2);
  transition: all .16s var(--ease-out);
}
.admin-act:hover { color: var(--ink); border-color: var(--ink-3); transform: translateY(-1px); }
.admin-act.approve { color: #057857; border-color: #A7F3D0; background: #ECFDF5; }
.admin-act.reject  { color: #C2410C; border-color: #FBD3C2; background: #FEF1EC; }
.admin-act.rate    { color: var(--c-mund); border-color: color-mix(in oklab, var(--c-mund) 30%, var(--line)); background: var(--c-mund-soft, #E8F1FB); }
.admin-act.del:hover { color: #C2410C; border-color: #C2410C; }

.admin-inline { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.admin-inline.wide { flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 8px; }
.admin-inline input, .admin-inline textarea, .rate-box textarea {
  font: inherit; font-size: 12.5px; width: 100%; min-width: 200px;
  padding: 9px 11px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); outline: none; resize: vertical;
}
.admin-inline input:focus, .admin-inline textarea:focus, .rate-box textarea:focus { border-color: var(--ink-3); }
.admin-inline-btns { display: flex; gap: 6px; }
.ib {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  padding: 7px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-strong); background: white; color: var(--ink-2);
}
.ib.yes { background: var(--ink); color: white; border-color: var(--ink); }
.ib.yes.danger { background: #C2410C; border-color: #C2410C; }
.ib.yes:disabled { opacity: .45; cursor: not-allowed; }
.ib-text { font-size: 12.5px; color: var(--ink-2); }

/* ---- Bewertung ---- */
.rate-box {
  flex-basis: 100%; display: flex; flex-direction: column; gap: 9px;
  background: var(--bg-2); padding: 14px; border-radius: var(--radius-md);
  animation: fadeUp .25s var(--ease-out) both;
}
.rate-crit { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 12.5px; color: var(--ink-2); }
.rate-scale { display: inline-flex; gap: 5px; }
.rate-dot {
  width: 21px; height: 21px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 1.5px solid var(--line-strong); background: white;
  transition: all .14s var(--ease-out);
}
.rate-dot:hover { border-color: var(--accent); transform: scale(1.12); }
.rate-dot.on { background: var(--accent); border-color: var(--accent); }

/* ---- Team ---- */
.team-tab { display: flex; flex-direction: column; gap: 14px; }
.created-box {
  background: #ECFDF5; border: 1px solid #A7F3D0; border-radius: var(--radius-md);
  padding: 12px 15px; font-size: 13px; line-height: 1.6;
}
.created-box code { font-family: var(--font-mono); font-weight: 700; background: white; padding: 2px 8px; border-radius: 6px; border: 1px dashed #A7F3D0; }
.created-hint { color: var(--ink-3); font-size: 12px; }
.team-actions { display: flex; }
.add-user {
  border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 16px; background: var(--bg-2);
  display: flex; flex-direction: column; gap: 12px;
  animation: fadeUp .3s var(--ease-out) both;
}
.add-user .btn.primary { width: max-content; }
.preset-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.preset-label { font-size: 12px; color: var(--ink-3); }
.preset-btn {
  border: 1px solid var(--line-strong); background: white; border-radius: 999px;
  padding: 5px 13px; font-size: 12px; cursor: pointer; transition: all .16s var(--ease-out);
}
.preset-btn:hover { border-color: var(--c-mund); color: var(--c-mund); }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 9px; }
.perm-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.user-list { display: flex; flex-direction: column; gap: 8px; }
.user-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px 15px;
}
.user-info { display: flex; flex-direction: column; }
.user-name { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.owner-tag { font-family: var(--font-mono); font-size: 9px; background: var(--ink); color: white; padding: 2px 7px; border-radius: 999px; letter-spacing: .04em; }
.user-email { font-size: 12px; color: var(--ink-3); }
.user-allperms { font-size: 12px; color: var(--ink-3); }
.user-perms { display: flex; gap: 5px; flex-wrap: wrap; }
.perm-pill {
  font-size: 10.5px; padding: 4px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-strong); background: white; color: var(--ink-3);
  transition: all .14s var(--ease-out);
}
.perm-pill.on { background: var(--c-mund); color: white; border-color: var(--c-mund); }
.perm-pill.remove { color: #C2410C; border-color: #FBD3C2; }

/* ---- Konto ---- */
.account-tab { display: flex; flex-direction: column; gap: 10px; max-width: 420px; }
.account-info { background: var(--bg-2); border-radius: var(--radius-md); padding: 13px 15px; font-size: 14px; }
.account-info .muted { color: var(--ink-3); font-size: 12.5px; }
.account-tab h4 { margin: 8px 0 0; font-size: 14.5px; }
.account-msg { font-size: 12.5px; color: var(--ink-2); }

@media (max-width: 640px) {
  .comp-banner { flex-direction: column; align-items: flex-start; gap: 8px; }
  .sheet-head { padding: 24px 20px 0; }
  .sheet-body { padding: 18px 20px 24px; }
  .admin-card-foot { flex-direction: column; align-items: stretch; }
}

/* ---- Scrollen bleibt im geöffneten Fenster ----
   Ohne overscroll-behavior springt das Scrollen am Ende eines Fensters auf
   den Hintergrund über („scroll chaining"), wodurch die Mindmap mitwandert. */
.focus-body,
.sheet-body,
.about-scroll,
.about-modal,
.idea-expandable {
  overscroll-behavior: contain;
}
.focus-backdrop,
.about-backdrop {
  overscroll-behavior: none;
  touch-action: none;
}
.focus-card,
.about-modal,
.sheet-card {
  touch-action: pan-y;
}

/* ---- Warum in der Schule fördern (Ende jeder Kompetenz) ---- */
.comp-why {
  margin-top: 20px; padding: 14px 16px;
  background: var(--accent-soft, var(--bg-2));
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.comp-why-label {
  display: block; font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px;
}
.comp-why p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }

/* ---- Preise im Wettbewerbs-Fenster ---- */
.prize-list { display: grid; gap: 8px; }
.prize {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px; text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface-solid); transition: all .16s var(--ease-out);
}
.prize:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.prize-name { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.prize-note { font-size: 12px; color: var(--ink-2); }
.prize-url { font-family: var(--font-mono); font-size: 10.5px; color: var(--c-mund); margin-top: 3px; }

/* ---- Hinweis auf offene eigene Bewertungen ---- */
.rate-todo {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px; padding: 11px 15px;
  background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  font-size: 13px; color: var(--ink-2);
}
.rate-todo-count {
  display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 8px;
  border-radius: 999px; background: var(--ink); color: white;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
}
.rate-todo-btn {
  margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  border: 1px solid var(--line-strong); background: var(--surface-solid); color: var(--ink-2);
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
}
.rate-todo-btn:hover { color: var(--ink); border-color: var(--ink-3); }
.rate-todo.done { background: #ECFDF5; border-color: #A7F3D0; color: #057857; }

/* ---- Jury-Übersicht ---- */
.jury-tab { display: flex; flex-direction: column; gap: 14px; }
.jury-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.jury-total { font-size: 13px; color: var(--ink-2); font-weight: 600; }
.jury-list { display: flex; flex-direction: column; gap: 8px; }
.jury-row {
  display: grid; grid-template-columns: auto 1fr minmax(200px, 260px);
  align-items: center; gap: 14px;
  border: 1px solid var(--line); border-radius: var(--radius-md); padding: 11px 14px;
}
.jury-row.complete { background: var(--bg-2); }
.jury-pick input { width: 16px; height: 16px; cursor: pointer; }
.jury-pick input:disabled { cursor: default; opacity: .4; }
.jury-info { display: flex; flex-direction: column; min-width: 0; }
.jury-name { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.jury-email { font-size: 12px; color: var(--ink-3); }
.jury-progress { display: flex; flex-direction: column; gap: 5px; }
.jury-bar { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.jury-bar span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--c-mund), var(--c-mogl));
  transition: width .4s var(--ease-out);
}
.jury-numbers { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); }
.jury-numbers b { color: #B7791F; }
.jury-done { color: #057857; }
.jury-remind {
  display: flex; flex-direction: column; gap: 7px;
  padding: 14px; background: var(--bg-2);
  border: 1px solid var(--line); border-radius: var(--radius-md);
}
.jury-remind textarea {
  font: inherit; font-size: 12.5px; padding: 9px 11px; resize: vertical;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface-solid); outline: none;
}
.jury-remind-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.jury-remind-foot .btn.primary { width: max-content; }
.jury-msg { font-size: 12.5px; color: var(--ink-2); }

@media (max-width: 760px) {
  .jury-row { grid-template-columns: auto 1fr; }
  .jury-progress { grid-column: 1 / -1; }
}

/* ---- Karten, die die Liste verlassen, blenden sich weich aus ---- */
.admin-card {
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out),
              max-height .3s var(--ease-out), margin-bottom .3s var(--ease-out),
              padding .3s var(--ease-out), border-color .3s var(--ease-out);
  max-height: 1400px;
}
.admin-card.leaving {
  opacity: 0;
  transform: translateX(14px) scale(.985);
  max-height: 0;
  margin-bottom: -12px;
  padding-top: 0; padding-bottom: 0;
  border-color: transparent;
  overflow: hidden;
  pointer-events: none;
}
/* Ein- und Ausklappen der Eingabefelder in der Karte ruhiger */
.admin-card-foot > .admin-inline,
.admin-card-foot > .rate-box { animation: soft-in .22s var(--ease-out) both; }
@keyframes soft-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

/* ---- Fenster der Kompetenz: feste Höhe ----
   Ohne feste Höhe wandern Kopfzeile und Reiter beim Wechsel zwischen
   „Die Kompetenz", den Ideen und dem Formular auf und ab. */
.focus-card { height: min(84vh, 780px); }
.focus-body {
  scrollbar-width: thin; scrollbar-color: transparent transparent;
  scrollbar-gutter: stable;
  transition: scrollbar-color .5s ease .4s;
}
.focus-body.scrolling { scrollbar-color: var(--line-strong) transparent; transition-delay: 0s; }
.focus-body::-webkit-scrollbar { width: 10px; }
.focus-body::-webkit-scrollbar-track { background: transparent; margin: 6px 0; }
.focus-body::-webkit-scrollbar-thumb {
  background-color: transparent; border-radius: 999px;
  border: 4px solid transparent; background-clip: content-box;
  transition: background-color .5s ease .4s;
}
.focus-body.scrolling::-webkit-scrollbar-thumb {
  background-color: color-mix(in oklab, var(--ink-3) 55%, transparent);
  transition-delay: 0s;
}

/* ---- Rechtslinks, unauffällig am rechten Rand der Statistikleiste ---- */
.legal-links {
  position: absolute; right: 16px; bottom: 7px;
  display: flex; align-items: center; gap: 5px;
  font-size: 10.5px; color: var(--ink-3);
  white-space: nowrap;
}
.legal-links button {
  border: none; background: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--ink-3);
  text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: var(--line-strong);
}
.legal-links button:hover { color: var(--ink-2); text-decoration-color: currentColor; }

/* ---- Datenschutzhinweis im Formular ---- */
.privacy-note {
  margin: 0; padding: 11px 14px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 11.5px; line-height: 1.6; color: var(--ink-3);
}

/* Honigtopf: für Menschen unsichtbar, für Bots vorhanden. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* ---- Platzhalter, solange Zahlen noch geladen werden ---- */
@keyframes skeleton-pulse { 0%,100% { opacity: .5; } 50% { opacity: .85; } }
.skeleton-text {
  display: inline-block; width: 220px; border-radius: 5px;
  background: var(--line); animation: skeleton-pulse 1.6s ease-in-out infinite;
}
.jury-row.skeleton {
  height: 62px; border-color: var(--line);
  background: linear-gradient(90deg, var(--bg-2), var(--surface-solid), var(--bg-2));
  background-size: 200% 100%;
  animation: skeleton-pulse 1.6s ease-in-out infinite;
}



/* ============================================================
   Mobil: gleiche Gestaltung, nur anders angeordnet.
   Am Schreibtisch ändert sich dadurch nichts.
   ============================================================ */
@media (max-width: 760px) {
  /* Der Wettbewerbsknopf sitzt am Schreibtisch neben der Suche. Auf schmalen
     Bildschirmen liefe er in die mittige Überschrift, deshalb wandert er in
     die Knopfreihe unter den Titel. */
  .top-left-cluster {
    position: static; grid-column: 1 / -1;
    display: flex; justify-content: center; flex-wrap: wrap; margin-top: 10px;
  }
  .search.open ~ .top-left-cluster { opacity: 1; transform: none; pointer-events: auto; }
  .search.open ~ .comp-btn-wrap { opacity: 1; transform: none; pointer-events: auto; }
  .comp-btn { height: 34px; }
  .comp-btn-date { display: inline; }

  /* Impressum und Datenschutz müssen auch am Telefon erreichbar sein. */
  .legal-links {
    position: static; justify-content: center;
    margin: 4px auto 0; grid-column: 1 / -1;
  }
  .stats-strip { padding-bottom: 14px; }

  /* Fenster: volle Breite nutzen, Schrift bleibt gut lesbar. */
  .about-modal { width: 94vw; max-height: 90vh; }
  .about-modal.wide, .about-modal.sheet-xl { width: 94vw; max-width: 94vw; }
  .about-modal.sheet-xl { height: 90vh; }
  .about-modal.sheet-md { min-height: 0; }
  .about-modal > .about-scroll { padding: 24px 20px 8px; }
  .about-modal > .about-foot { padding: 4px 20px 18px; }
  .sheet-head { padding: 24px 20px 0; }
  .sheet-body { padding: 18px 20px 24px; }
  .sheet-title { font-size: 21px; }
  .agency-modal { width: 94vw; }
  .agency-word { font-size: 26px; }

  /* Reiterleisten dürfen umbrechen statt zu überlaufen. */
  .focus-tabs, .admin-tabs { flex-wrap: wrap; row-gap: 2px; }
  .admin-tabs .admin-logout { margin-left: 0; }

  /* Werkzeugleiste im Panel untereinander. */
  .admin-toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
  .atb-grow { min-width: 0; }
  .admin-toolbar select, .admin-toolbar input { width: 100%; }

  /* Größere Flächen zum Antippen. */
  .rate-dot { width: 26px; height: 26px; }
  .admin-act, .ib, .perm-pill { padding: 8px 13px; }
  .focus-close { width: 40px; height: 40px; }

  /* Formularfelder: 16px verhindert das automatische Hineinzoomen in Safari. */
  .field input, .field textarea, .access-enter-input,
  .admin-toolbar input, .admin-toolbar select,
  .admin-inline input, .admin-inline textarea, .rate-box textarea,
  .code-required-input, .jury-remind textarea { font-size: 16px; }

  .comp-why { padding: 12px 14px; }
  .idea-card, .admin-card { padding: 13px 14px; }
}

@media (max-width: 480px) {
  .title-sub { font-size: 12px; line-height: 1.6; }
  .about-modal h3 { font-size: 22px; }
  .about-sec p { font-size: 14px; }
  .legal-links { font-size: 11px; }
  .form-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .form-actions-btns { justify-content: flex-end; }
  .access-code-value { flex-direction: column; align-items: stretch; }
  .access-code-value code { font-size: 18px; }
  .jury-remind-foot { flex-direction: column; align-items: stretch; }
  .jury-remind-foot .btn.primary { width: 100%; }
}

/* ============================================================
   Schulansicht: dieselbe Seite, nur für die eigene Schule.
   Die Farbgebung ist einen Hauch wärmer, damit sofort klar ist,
   in welcher Ansicht man sich befindet.
   ============================================================ */
/* Die Schulansicht bekommt einen eigenen, klar erkennbaren Farbraum:
   wärmerer Untergrund, gerahmte Bühne und ein Band am oberen Rand. */
/* Statt eines gelben Schleiers am oberen Rand steht in jeder Ecke ein sehr
   weiches Feld in der Farbe der Voraussetzung, die dort sitzt. Damit sind alle
   vier Farben da, ohne dass eine davon die Seite bestimmt. Keine Kästen. */
.app.school-mode::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40vw 36vh at 16% 32%, rgba(45,125,210,.11), transparent 68%),
    radial-gradient(40vw 36vh at 84% 32%, rgba(232,163,23,.075), transparent 68%),
    radial-gradient(40vw 36vh at 16% 80%, rgba(31,143,134,.11), transparent 68%),
    radial-gradient(40vw 36vh at 84% 80%, rgba(217,74,74,.10), transparent 68%),
    linear-gradient(180deg, rgba(255,253,249,.75), rgba(255,255,255,0) 52%);
}
.app.school-mode::after {
  content: ""; position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 40;
  background: linear-gradient(90deg, var(--c-mund), var(--c-moti) 34%, var(--c-mogl) 66%, var(--c-mite));
  opacity: .72; pointer-events: none;
}
.btn.btn-school-out { color: var(--ink-2); border-color: var(--line-strong); }
.btn.btn-school-out:hover { border-color: var(--ink-3); color: var(--ink); }

/* Schulname klein unter dem Titel */
.school-line {
  margin-top: 2px;
  font-size: 13px; font-weight: 500; letter-spacing: .01em;
  color: var(--school-ink, var(--ink-2));
}

.view-switch {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px;
}
.view-switch button {
  border: none; background: transparent; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--ink-3);
  padding: 6px 13px; border-radius: 999px;
  transition: all .18s var(--ease-out);
}
.view-switch button:hover { color: var(--ink-2); }
.view-switch button.on { background: var(--surface-solid); color: var(--ink); box-shadow: var(--shadow-sm); }
.app.school-mode .view-switch button.on { color: var(--ink); }

/* Zustand einer Idee in der Schulansicht */
.idea-school-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 0 16px 12px 16px; margin-top: -4px;
  position: relative; z-index: 2;
}
.scope-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px;
}
.scope-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.scope-badge.internal { color: #8A5D10; background: #FCF3DE; border: 1px solid #F0E2C6; }
.scope-action {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--ink); background: var(--ink); color: white;
  transition: all .16s var(--ease-out);
}
.scope-action:hover { background: #1b2740; }
.scope-action:disabled { opacity: .55; cursor: default; }
.scope-action.ghost { background: transparent; color: var(--ink-2); border-color: var(--line-strong); }
.scope-action.ghost:hover { color: var(--ink); border-color: var(--ink-3); }

/* Einladung in die Schulansicht */
.school-invite {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 16px; margin-bottom: 6px;
  background: linear-gradient(100deg, rgba(232,163,23,.08), rgba(232,163,23,.03));
  border: 1px solid #F0E2C6; border-radius: var(--radius-md);
}
.school-invite-text { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 3px; }
.school-invite-text b { font-size: 13.5px; color: var(--ink); }
.school-invite-text span { font-size: 12px; line-height: 1.55; color: var(--ink-2); }

/* Hinweis im Formular */
.school-hint {
  margin: 0; padding: 11px 14px;
  background: #FCF3DE; border: 1px solid #F0E2C6; border-radius: var(--radius-sm);
  font-size: 12px; line-height: 1.6; color: #6B4A0E;
}
.school-hint b { color: #5A3E0B; }

/* Zielwahl beim Einreichen aus der Schulansicht */
.target-choice { display: flex; flex-direction: column; gap: 8px; }
.target-choice-label {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
}
.target-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.target-options button {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 12px 14px; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  background: var(--surface-solid); transition: all .16s var(--ease-out);
}
.target-options button b { font-size: 13px; color: var(--ink); }
.target-options button span { font-size: 11.5px; line-height: 1.5; color: var(--ink-3); }
.target-options button:hover { border-color: var(--ink-3); }
.target-options button.on { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 6%, white); }
.target-options button.on b { color: var(--accent); }
@media (max-width: 600px) { .target-options { grid-template-columns: 1fr; } }

/* Zeichenzähler */
.char-count {
  float: right; font-family: var(--font-mono); font-size: 9.5px; font-weight: 500;
  color: var(--ink-3); letter-spacing: 0; text-transform: none;
}
.char-count.soft { color: var(--ink-2); }
.char-count.near { color: #B7791F; }
.char-count.over { color: #C2410C; font-weight: 700; }

/* Videolink in der Ideenkarte */
.idea-video { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; }

/* ============================================================
   Bewerten: lebendige, aber ruhige Rückmeldung
   ============================================================ */
.rate-grid { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; }
.rate-crits { display: flex; flex-direction: column; gap: 11px; }
.rate-crit { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 12.5px; color: var(--ink-2); }

.rate-scale { position: relative; display: inline-flex; align-items: center; gap: 6px; padding-right: 96px; }
.rate-dot {
  width: 24px; height: 24px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 1.5px solid var(--line-strong); background: var(--surface-solid);
  transition: transform .18s var(--ease-spring), background-color .18s var(--ease-out),
              border-color .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.rate-dot:hover { transform: translateY(-2px) scale(1.1); border-color: var(--c-mund); }
.rate-dot.on {
  background: var(--c-mund); border-color: var(--c-mund);
  box-shadow: 0 3px 10px rgba(45,125,210,.28);
}
/* Die gewählte Stufe bekommt einen kurzen Impuls. */
.rate-dot.picked { animation: dot-pop .42s var(--ease-spring); }
@keyframes dot-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.34); box-shadow: 0 0 0 8px rgba(45,125,210,.14); }
  100% { transform: scale(1); box-shadow: 0 3px 10px rgba(45,125,210,.28); }
}
.rate-word {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%) translateX(4px);
  font-family: var(--font-mono); font-size: 10.5px; color: var(--c-mund);
  opacity: 0; transition: opacity .2s var(--ease-out), transform .2s var(--ease-out);
  pointer-events: none; white-space: nowrap;
}
.rate-word.show { opacity: 1; transform: translateY(-50%) translateX(0); }

/* Ringanzeige mit dem laufenden Durchschnitt */
.rate-summary-side { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 82px; }
.score-ring { position: relative; width: 64px; height: 64px; display: grid; place-items: center; }
.score-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: var(--line); stroke-width: 5; }
.ring-value {
  fill: none; stroke: url(#none); stroke: var(--c-mund); stroke-width: 5; stroke-linecap: round;
  transition: stroke-dashoffset .55s var(--ease-spring), stroke .3s;
}
.score-ring.has .ring-value { stroke: var(--c-mogl); }
.score-ring-num {
  position: relative; font-family: var(--font-mono); font-size: 17px; font-weight: 700; color: var(--ink);
  transition: transform .3s var(--ease-spring);
}
.score-ring.has .score-ring-num { animation: num-tick .3s var(--ease-spring); }
@keyframes num-tick { 0% { transform: scale(.86); } 60% { transform: scale(1.1); } 100% { transform: scale(1); } }
.rate-summary-label { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-3); text-align: center; }

/* Bestätigung nach dem Speichern */
.ib.yes.saved { background: #057857; border-color: #057857; }
.rate-box { position: relative; overflow: hidden; }

/* Vorauswahl für die Jury */
.admin-act.jury { color: var(--ink-2); }
.admin-act.jury.on {
  color: #057857; border-color: #A7F3D0; background: #ECFDF5;
}
.jury-flag {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
  color: #057857; background: #ECFDF5; border: 1px solid #A7F3D0;
  padding: 2px 8px; border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
  .rate-dot, .rate-dot.picked, .score-ring-num, .rate-burst { animation: none !important; transition: none !important; }
}
@media (max-width: 640px) {
  .rate-grid { grid-template-columns: 1fr; }
  .rate-summary-side { flex-direction: row; justify-content: center; gap: 12px; }
  .rate-scale { padding-right: 0; }
  .rate-word { display: none; }
}

/* ---- Vollständige Ansicht einer Idee im Panel ---- */
.idea-detail {
  margin: 10px 0 12px; padding: 14px 16px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-md);
  display: flex; flex-direction: column; gap: 12px;
  animation: soft-in .25s var(--ease-out) both;
}
.detail-block { display: flex; flex-direction: column; gap: 4px; }
.detail-label {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3);
}
.detail-block p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-2); white-space: pre-line; }
.detail-facts { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); }
.detail-facts b { color: var(--ink); font-weight: 600; }
.detail-links { display: flex; gap: 10px; flex-wrap: wrap; }
.detail-links a {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  padding: 5px 11px; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--line-strong); color: var(--c-mund); background: var(--surface-solid);
}
.detail-links a:hover { border-color: var(--c-mund); }
.detail-photos { display: flex; gap: 8px; flex-wrap: wrap; }
.detail-photos img { width: 92px; height: 68px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.detail-logo { width: 64px; height: 64px; object-fit: contain; border-radius: 8px; border: 1px solid var(--line); background: white; padding: 4px; }
.admin-act.detail { color: var(--ink); border-color: var(--ink-3); }

/* ---- Säulen-Fenster ---- */
.pillar-modal { border-top: 4px solid var(--c); }
.pillar-modal-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pm-num { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--c); }
.pm-title { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: .01em; color: var(--ink); }
.pm-verb {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--c);
}
.pm-claim { margin: 10px 0 14px; font-size: 16px; font-style: italic; color: var(--c); line-height: 1.5; }
.pm-intro { margin: 0 0 20px; font-size: 15px; line-height: 1.75; color: var(--ink-2); }
.pm-comps { display: flex; flex-direction: column; gap: 8px; }
.pm-comps-label {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px;
}
.pm-comp {
  position: relative; display: flex; flex-direction: column; gap: 2px; text-align: left;
  padding: 12px 40px 12px 14px; cursor: pointer;
  border: 1px solid var(--line); border-left: 3px solid var(--c);
  border-radius: var(--radius-md); background: var(--cs);
  transition: all .16s var(--ease-out);
}
.pm-comp:hover { transform: translateX(3px); box-shadow: var(--shadow-sm); }
.pm-comp b { font-size: 14px; color: var(--ink); }
.pm-comp span { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.pm-comp-arrow {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-size: 15px; color: var(--c);
}

/* Säulentitel: Hinweis, dass sich etwas öffnet */
.pillar-title.is-clickable {
  border: none; background: none; padding: 0; cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; gap: 8px;
  transition: opacity .18s var(--ease-out);
}
.pillar-title-hint {
  opacity: 0; transform: translateX(-4px);
  transition: opacity .2s var(--ease-out), transform .2s var(--ease-out);
}
.pillar-title.is-clickable:hover .pillar-title-hint,
.pillar-title.is-clickable:focus-visible .pillar-title-hint { opacity: .75; transform: translateX(0); }
.pillar-title.is-clickable::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px;
  background: currentColor; opacity: 0; transform: scaleX(.4); transform-origin: left;
  transition: opacity .2s var(--ease-out), transform .25s var(--ease-out);
}
.pillar-title.is-clickable { position: relative; }
.pillar-title.is-clickable:hover::after { opacity: .35; transform: scaleX(1); }
.pillar.tr .pillar-title.is-clickable, .pillar.br .pillar-title.is-clickable { flex-direction: row-reverse; }
.pillar.tr .pillar-title-hint, .pillar.br .pillar-title-hint { transform: translateX(4px); }
.pillar.tr .pillar-title.is-clickable:hover .pillar-title-hint,
.pillar.br .pillar-title.is-clickable:hover .pillar-title-hint { transform: translateX(0); }

/* ---- Bestätigung nach dem Speichern einer Bewertung ---- */
.rate-done {
  position: absolute; inset: 0; z-index: 4;
  display: grid; place-items: center;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(3px);
  border-radius: var(--radius-md);
  animation: rd-fade .32s var(--ease-out) both;
}
@keyframes rd-fade { from { opacity: 0; } to { opacity: 1; } }
.rate-done-inner {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  animation: rd-rise .5s var(--ease-spring) both;
}
@keyframes rd-rise { from { opacity: 0; transform: translateY(10px) scale(.94); } to { opacity: 1; transform: none; } }
.rate-done-check { overflow: visible; }
.rd-circle {
  fill: none; stroke: #057857; stroke-width: 2.5; opacity: .25;
  stroke-dasharray: 95; stroke-dashoffset: 95;
  animation: rd-draw .55s var(--ease-out) .05s forwards;
}
.rd-check {
  fill: none; stroke: #057857; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 26; stroke-dashoffset: 26;
  animation: rd-draw .4s var(--ease-out) .3s forwards;
}
@keyframes rd-draw { to { stroke-dashoffset: 0; } }
.rate-done-score {
  font-family: var(--font-mono); font-size: 22px; font-weight: 700; color: #057857;
  animation: rd-pop .45s var(--ease-spring) .35s both;
}
@keyframes rd-pop { 0% { opacity: 0; transform: scale(.5); } 60% { transform: scale(1.15); } 100% { opacity: 1; transform: scale(1); } }
.rate-done-text {
  font-size: 12px; color: var(--ink-2);
  animation: rd-rise .4s var(--ease-out) .45s both;
}
/* Funken, die einmal nach außen laufen */
.rate-spark {
  position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; border-radius: 50%;
  background: #057857; opacity: 0;
  transform: rotate(var(--a)) translateY(0);
  animation: rd-spark 1.05s var(--ease-out) var(--d) both;
}
@keyframes rd-spark {
  0%   { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(.6); }
  18%  { opacity: .9; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(-88px) scale(.25); }
}
@media (prefers-reduced-motion: reduce) {
  .rate-done, .rate-done-inner, .rate-done-score, .rate-done-text,
  .rd-circle, .rd-check, .rate-spark { animation: none !important; }
  .rd-circle, .rd-check { stroke-dashoffset: 0; }
  .rate-spark { display: none; }
}

/* Untertitel innerhalb von „Mehr Informationen" */
.extras-sub-label {
  display: block; margin-bottom: 6px;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.extras-logo { margin-top: 4px; }

/* ============================================================
   Zweiter Teilbereich, Abgrenzung und Freigabe der E-Mail-Adresse
   ============================================================ */

/* Gewählter zweiter Teilbereich */
.second-pick {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 8px 7px 12px; border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--accent) 34%, var(--line));
  background: color-mix(in oklab, var(--accent) 7%, var(--surface-solid));
}
.second-pick-pillar {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
}
.second-pick-comp { font-size: 13px; font-weight: 500; color: var(--ink); }
.second-pick-clear {
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  border: none; background: var(--bg-2); color: var(--ink-3);
  font-size: 15px; line-height: 1; cursor: pointer;
  transition: all .14s var(--ease-out);
}
.second-pick-clear:hover { background: var(--line); color: var(--ink); }

/* Auswahl des zweiten Teilbereichs */
.second-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--bg-2);
}
.second-col { display: flex; flex-direction: column; gap: 4px; }
.second-col-head {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 2px;
}
.second-opt {
  text-align: left; cursor: pointer;
  padding: 7px 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface-solid);
  font: inherit; font-size: 12.5px; color: var(--ink-2);
  transition: all .14s var(--ease-out);
}
.second-opt:hover:not(:disabled) {
  border-color: color-mix(in oklab, var(--accent) 45%, var(--line));
  color: var(--ink);
}
.second-opt:disabled { opacity: .4; cursor: default; }

/* Abgrenzung auf der Ideenkarte */
.idea-distinction {
  margin: 8px 0 0; padding: 10px 12px;
  border-radius: var(--radius-sm); background: var(--bg-2);
  font-size: 12.5px; line-height: 1.55; color: var(--ink-2);
}
.idea-distinction-label {
  display: block; margin-bottom: 3px;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}

/* Kontakt ohne freigegebene Adresse: kein Link */
.contact-chip.is-plain { cursor: default; }

/* Zustimmung vor der Freigabe */
.consent-box {
  margin-top: 12px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-2);
}
.consent-line {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 12.5px; line-height: 1.55; color: var(--ink-2); cursor: pointer;
}
.consent-line + .consent-line { margin-top: 7px; }
/* .field input setzt width:100% — für das Kästchen zurücknehmen. */
.consent-line input[type="checkbox"] {
  width: 16px; min-width: 16px; height: 16px;
  flex: none; margin: 2px 0 0; padding: 0;
  border-radius: 4px; accent-color: var(--c-mund);
}
.consent-line > span { flex: 1; min-width: 0; }
.consent-pick {
  margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line);
}
.consent-pick-head {
  display: block; margin-bottom: 8px;
  font-size: 12px; font-weight: 600; color: var(--ink);
}
.consent-empty { font-size: 12px; color: var(--ink-3); }
.consent-warn {
  display: block; margin-top: 10px;
  font-size: 11.5px; line-height: 1.55; color: var(--ink-3);
}

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

/* ============================================================
   Workshop-Sitzungen im Admin-Panel
   Bewusst in denselben Blau- und Grautönen wie das übrige Panel.
   ============================================================ */

.ws-admin-leer {
  text-align: center;
  padding: 42px 22px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md, 12px);
  color: var(--ink-3);
}
.ws-admin-leer h4 { margin: 0 0 6px; color: var(--ink-2); font-size: 15px; }
.ws-admin-leer p { margin: 0 auto; max-width: 46ch; font-size: 13.5px; line-height: 1.55; }

.ws-admin-liste { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }

.ws-admin-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 12px);
  background: var(--surface-solid);
  box-shadow: var(--shadow-sm);
}
/* Geschlossene Sitzungen bleiben lesbar, treten aber zurück. */
.ws-admin-row.zu { background: var(--bg-2); border-style: dashed; }
.ws-admin-row.zu .ws-admin-titel { color: var(--ink-2); }

.ws-admin-haupt { min-width: 260px; flex: 1; }
.ws-admin-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ws-admin-titel { font-weight: 600; font-size: 14.5px; color: var(--ink); }
.ws-admin-status {
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
  background: var(--line); color: var(--ink-2);
}
.ws-admin-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  margin-top: 4px; font-size: 12.5px; color: var(--ink-3);
}
.ws-admin-code {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 600; letter-spacing: .06em; color: var(--ink-2);
}
.ws-admin-notiz {
  margin-top: 7px; padding-left: 10px;
  border-left: 2px solid var(--line-strong);
  font-size: 12.5px; color: var(--ink-3); line-height: 1.5;
}

.ws-admin-aktionen { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ws-admin-del { color: var(--c-mite); }
.ws-admin-del:hover { border-color: var(--c-mite); }

/* ---------- Die Ansicht zum Beamen ---------- */
.qr-beamer {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(11, 18, 32, .82);
  backdrop-filter: blur(3px);
}
.qr-beamer-inner {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: 10px;
  padding: 36px 44px 30px;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-xl);
  max-width: min(92vw, 680px);
  max-height: 92vh;
  overflow: auto;
  text-align: center;
}
.qr-beamer-close {
  position: absolute; top: 10px; right: 12px;
  border: 0; background: none; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--ink-3);
}
.qr-beamer-close:hover { color: var(--ink); }
.qr-beamer-titel {
  font-size: 15px; font-weight: 600; color: var(--ink-2);
  max-width: 40ch;
}
.qr-beamer-code { display: block; width: min(52vh, 420px); height: auto; image-rendering: pixelated; }
.qr-beamer-kennung {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: clamp(30px, 6vh, 52px); font-weight: 700;
  letter-spacing: .10em; color: var(--ink);
}
.qr-beamer-adresse {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: clamp(14px, 2.2vh, 19px); color: var(--ink-2); letter-spacing: .02em;
}
.qr-beamer-hinweis { font-size: 13px; color: var(--ink-3); }
.qr-beamer-save { margin-top: 6px; }

@media (max-width: 640px) {
  .qr-beamer-inner { padding: 28px 20px 22px; }
  .ws-admin-aktionen { width: 100%; }
}

/* Timer in der Sitzungsliste des Admin-Panels. */
.ws-timer-feld { align-items: flex-start; }
.ws-timer-check { margin-top: 2px; }
.ws-timer-hinweis {
  display: block; margin-top: 5px;
  font-size: 12px; line-height: 1.5; color: var(--ink-3);
}
.ws-admin-timer {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  margin-top: 6px; font-size: 12.5px; color: var(--ink-3);
}
.ws-admin-timer-zeit {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 600; color: var(--ink-2);
}
.ws-admin-timer .laeuft { color: var(--c-mogl); font-weight: 600; }

/* ============================================================
   Marktreife: Schulanmeldung, Entwurf, Kriterien, Preisseite,
   Auswertung. In denselben Tönen wie das übrige Panel, ohne Lila.
   ============================================================ */

/* --- Mein Zugang: Anmelden und Code vergessen --- */
.access-alt {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
}
.access-alt button {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--c-mund);
  text-decoration: underline; text-underline-offset: 2px;
}
.access-alt button:hover { color: var(--ink); }
.access-consent {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 12px;
  font-size: 12.5px; line-height: 1.5; color: var(--ink-2);
}
.access-consent input { margin-top: 2px; flex: none; }
.access-note {
  margin: 10px 0 0; padding: 10px 12px; border-radius: 10px;
  background: var(--bg-2); font-size: 12.5px; line-height: 1.55; color: var(--ink-2);
}
.access-back {
  border: 0; background: none; padding: 0; cursor: pointer; margin-bottom: 10px;
  font: inherit; font-size: 12.5px; color: var(--ink-3);
}
.access-back:hover { color: var(--ink); }

/* --- Entwurf der Einreichung --- */
.entwurf-hinweis {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px;
  margin: 0 0 14px; padding: 10px 13px; border-radius: 10px;
  border: 1px solid color-mix(in oklab, var(--c-mogl) 40%, transparent);
  background: color-mix(in oklab, var(--c-mogl) 8%, white);
  font-size: 13px; line-height: 1.5; color: var(--ink-2);
}
.entwurf-hinweis button {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--ink-3);
  text-decoration: underline; text-underline-offset: 2px;
}
.entwurf-hinweis button:hover { color: var(--c-mite); }
.entwurf-still { display: block; margin-top: 6px; font-size: 11.5px; color: var(--ink-3); }

/* --- Bewertungskriterien im Wettbewerbsfenster --- */
.crit-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.crit-item {
  padding: 10px 13px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface-solid);
}
.crit-name { display: block; font-weight: 600; font-size: 13.5px; color: var(--ink); }
.crit-text { display: block; margin-top: 2px; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.crit-scale { margin: 10px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-3); }

/* --- Preisseite --- */
.preis-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid color-mix(in oklab, var(--c-moti) 55%, transparent);
  background: color-mix(in oklab, var(--c-moti) 12%, white);
  font: inherit; font-size: 12.5px; font-weight: 600; color: #7A5400;
}
.preis-btn:hover { background: color-mix(in oklab, var(--c-moti) 20%, white); }
.preis-list { display: grid; gap: 10px; margin-top: 8px; }
.preis-item {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface-solid);
  border-left: 4px solid var(--accent, var(--c-moti));
}
.preis-logo { width: 46px; height: 46px; flex: none; border-radius: 8px; object-fit: contain; background: var(--bg-2); }
.preis-award {
  display: inline-block; margin-bottom: 3px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: #7A5400;
}
.preis-title { display: block; font-weight: 600; font-size: 14.5px; color: var(--ink); }
.preis-meta { display: block; font-size: 12.5px; color: var(--ink-3); }

/* --- Blinde Bewertung --- */
.rate-blind {
  margin: 8px 0 0; padding: 8px 11px; border-radius: 8px;
  background: var(--bg-2); font-size: 12.5px; line-height: 1.5; color: var(--ink-3);
}

/* --- Auswertung im Admin-Panel --- */
.auswertung { display: grid; gap: 18px; }
.aw-kopf { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px; }
.aw-zahlen { display: flex; flex-wrap: wrap; gap: 10px; }
.aw-zahl {
  min-width: 108px; padding: 10px 13px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface-solid);
}
.aw-zahl b { display: block; font-size: 22px; line-height: 1.1; color: var(--ink); }
.aw-zahl span { font-size: 11.5px; color: var(--ink-3); }
.aw-aktionen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.aw-schalter {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface-solid); font-size: 12.5px; color: var(--ink-2);
}
.aw-schalter.an { border-color: var(--c-mogl); color: var(--c-mogl); font-weight: 600; }
.aw-abschnitt h4 {
  margin: 0 0 8px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
.aw-rang { display: grid; gap: 8px; }
.aw-zeile {
  display: grid; grid-template-columns: 34px minmax(170px, 1.4fr) minmax(220px, 1.6fr) 74px 150px;
  gap: 12px; align-items: center;
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface-solid);
  border-left: 4px solid var(--accent, var(--line));
}
.aw-platz { font-family: var(--font-mono); font-weight: 700; font-size: 15px; color: var(--ink-2); text-align: center; }
.aw-idee b { display: block; font-size: 13.5px; color: var(--ink); line-height: 1.3; }
.aw-idee span { display: block; font-size: 12px; color: var(--ink-3); }
.aw-balken { display: grid; gap: 4px; }
.aw-balken-reihe { display: grid; grid-template-columns: 92px 1fr 30px; gap: 7px; align-items: center; font-size: 11.5px; }
.aw-balken-name { color: var(--ink-3); }
.aw-balken-spur { height: 7px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.aw-balken-fuellung { display: block; height: 100%; border-radius: 999px; background: var(--accent, var(--c-mund)); }
.aw-balken-wert { font-family: var(--font-mono); color: var(--ink-2); text-align: right; }
.aw-gesamt { text-align: center; }
.aw-gesamt b { display: block; font-size: 20px; color: var(--ink); line-height: 1.1; }
.aw-gesamt span { font-size: 11px; color: var(--ink-3); }
.aw-streuung { display: block; margin-top: 2px; font-size: 10.5px; color: var(--ink-3); }
.aw-streuung.weit { color: var(--c-mite); font-weight: 600; }
.aw-preis input {
  width: 100%; padding: 6px 9px; border-radius: 8px; border: 1px solid var(--line);
  font: inherit; font-size: 12.5px;
}
.aw-preis input:focus { outline: none; border-color: var(--c-moti); }
.aw-verteilung { display: grid; gap: 6px; }
.aw-verteilung .aw-balken-reihe { grid-template-columns: 150px 1fr 36px; font-size: 12.5px; }
.aw-leer {
  padding: 26px 18px; text-align: center; border-radius: 12px;
  border: 1px dashed var(--line-strong); color: var(--ink-3); font-size: 13px; line-height: 1.55;
}
@media (max-width: 860px) {
  .aw-zeile { grid-template-columns: 30px 1fr; }
  .aw-zeile > .aw-balken, .aw-zeile > .aw-gesamt, .aw-zeile > .aw-preis { grid-column: 2; }
}

/* Druckfassung der Auswertung. Sie hängt direkt am <body>, damit das Panel
   mit seinen Fenstern und Verschiebungen den Druck nicht zerschießt. Am
   Bildschirm unsichtbar, im Druck das Einzige, was bleibt. */
.auswertung-druck { display: none; }
@media print {
  body.drucke-auswertung > *:not(.auswertung-druck) { display: none !important; }
  body.drucke-auswertung .auswertung-druck { display: block; color: #0B1220; font-family: var(--font-sans); }
  body.drucke-auswertung { background: #fff; }
  .auswertung-druck h1 { margin: 0 0 2mm; font-size: 20pt; }
  .auswertung-druck .aw-druck-sub { margin: 0 0 6mm; font-size: 9.5pt; color: #3B4760; }
  .auswertung-druck table { width: 100%; border-collapse: collapse; font-size: 9pt; }
  .auswertung-druck th {
    text-align: left; padding: 2mm; border-bottom: 1pt solid #0B1220;
    font-size: 7.5pt; letter-spacing: .06em; text-transform: uppercase; color: #7B8699;
  }
  .auswertung-druck td { padding: 2mm; border-bottom: .5pt solid #E3E8F2; vertical-align: top; }
  .auswertung-druck tr { break-inside: avoid; page-break-inside: avoid; }
  .auswertung-druck .aw-druck-farbe { display: inline-block; width: 3mm; height: 3mm; border-radius: 50%; margin-right: 1.5mm; }
  .auswertung-druck .aw-druck-fuss { margin-top: 6mm; font-size: 8pt; color: #7B8699; }
}

/* ============================================================
   Schulansicht: Idee oder umgesetzt, Filter, Export
   ============================================================ */

/* Stand eines Eintrags. Dunkel ausgefüllt für umgesetzt, gestrichelt für
   Idee. Bewusst kein Grün: Das läge zu nah am Türkis von Möglichkeitssinn. */
.stage-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px; cursor: pointer;
  border: 1px dashed var(--line-strong); background: var(--surface-solid);
  font: inherit; font-size: 11.5px; font-weight: 600; color: var(--ink-2);
}
.stage-pill:hover { border-color: var(--ink-3); }
.stage-pill.done { border: 1px solid var(--ink); background: var(--ink); color: #fff; }
.stage-pill:disabled { opacity: .6; cursor: progress; }
.idea.stage-idea { border-style: dashed; }
.idea.stage-done { border-color: color-mix(in oklab, var(--ink) 35%, var(--line)); }

.stage-filter {
  display: inline-flex; padding: 3px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-solid);
}
.stage-filter button {
  border: 0; background: none; cursor: pointer; padding: 4px 11px; border-radius: 999px;
  font: inherit; font-size: 12px; color: var(--ink-3);
}
.stage-filter button.on { background: var(--ink); color: #fff; }

.stage-choice { margin: 0 0 14px; }

/* Export der Schulansicht. Die Seiten selbst nutzen die ex-Gestaltung aus
   workshop.css; hier steht nur, was die Schulansicht zusätzlich braucht. */
.schule-druck { display: none; }
@media print {
  body.drucke-schule > *:not(.schule-druck) { display: none !important; }
  body.drucke-schule .schule-druck { display: block; }
  body.drucke-schule { background: #fff; }
}
.se-stufe {
  display: inline-block; margin-right: 2mm; padding: .3mm 2mm; border-radius: 999px;
  font-family: var(--font-mono); font-size: 6.8pt; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; vertical-align: 1pt;
}
.se-stufe.done { background: #0B1220; color: #fff; border: .5pt solid #0B1220; }
.se-stufe.idea { background: #fff; color: #7B8699; border: .5pt dashed #C9D3E5; }
.se-auch { display: block; font-size: 7.5pt; color: #98A1B0; margin-top: .6mm; }
.se-intern { font-size: 7pt; color: #98A1B0; margin-left: 1.5mm; }

.schule-sichern-hinweis {
  margin: 10px 0 0; padding: 10px 12px; border-radius: 10px;
  background: var(--bg-2); font-size: 12.5px; line-height: 1.55; color: var(--ink-2);
}
/* Der Filter steht mittig unter dem Schulnamen. */
.header-title > .stage-filter { display: flex; width: max-content; margin: 8px auto 2px; }

/* Zeile unter dem Titel, sobald ein Schulzugang besteht: Umschalter,
   Filter nach Stand, Sammlung sichern. */
.schul-leiste {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 8px; margin: 8px auto 2px;
}
.schul-leiste .stage-filter { margin: 0; }
/* Mit Schulzugang ist der Knopf rechts länger („Schulzugang beenden"). Unter
   1140 px rutschen die Knöpfe deshalb in eine eigene Zeile, wie sonst erst
   unter 900 px. */
@media (max-width: 1140px) {
  .has-school .topbar-actions {
    position: relative; top: auto; right: auto;
    justify-content: center; margin-top: 10px; grid-column: 1 / -1;
  }
}
/* Mit freigeschalteter Preisseite wird es oben links eng; dann nur der Pokal. */
@media (max-width: 1240px) { .preis-btn-text { display: none; } }