/* Creative Hub – Marke M.For.Studios (Farben und Schrift wie mamontov-marketing.de) */
:root {
  --ink: #0e0c0b;          /* Dunkel wie der Hero der Website */
  --ink-soft: #1d1916;
  --ink-70: #4a423c;
  --grey: #7d746b;
  --grey-soft: #a89f95;
  --paper: #f3efe9;        /* Creme-Hintergrund der Website */
  --cream: #f7f4ef;
  --surface: #fbf9f6;
  --stone: #efe9e0;
  --line: #e4ddd2;
  --white: #fffdfa;
  --on-dark: #f3efe9;

  --orange: #c2531f;       /* Marken-Orange */
  --orange-deep: #a6461a;
  --orange-soft: #f4e4d9;
  --olive: #5f7a3a;
  --red: #c0392b;

  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono: 'Plus Jakarta Sans', system-ui, sans-serif;

  --r-btn: 999px;          /* Runde Knöpfe wie auf der Website */
  --r-chip: 999px;
  --r-card: 16px;
  --r-img: 20px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --t-fast: .18s;
  --gutter: 16px;
}

* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: hidden; }
body {
  background: var(--paper);
  color: var(--ink-soft);
  font: 400 16px/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
.muted { color: var(--grey); }
.mono, .eyebrow {
  font-family: var(--font-mono); font-size: .75rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--grey);
}
.eyebrow { color: var(--orange); font-weight: 700; }
.eyebrow { margin: 0 0 .6rem; }

/* Kopfzeile */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px var(--gutter);
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; text-decoration: none; color: var(--ink); letter-spacing: -.01em; }
.brand-logo { width: 30px; height: 30px; border-radius: 8px; display: block; }
.brand-tag { font-family: var(--font-mono); font-size: .6875rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); padding-left: 10px; border-left: 1px solid var(--line); }
.topbar nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.topbar nav a {
  padding: 6px 12px; border-radius: var(--r-btn); text-decoration: none;
  color: var(--grey); font-size: .875rem; white-space: nowrap;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.topbar nav a:hover { background: #1a171608; color: var(--ink); }
.topbar nav a.is-active { color: var(--orange); background: var(--orange-soft); font-weight: 600; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 24px var(--gutter) 80px; }
.wrap-wide { max-width: 1440px; padding-top: 16px; padding-bottom: 28px; }
section { margin-bottom: 56px; }

/* Hero: Ink-Fläche mit Relief-Textur, Zahlen im Display-Font */
.hero {
  position: relative; overflow: visible;   /* Kalender darf über die Karte hinausragen */
  background: var(--ink); color: var(--on-dark);
  border-radius: var(--r-img);
  padding: clamp(28px, 5vw, 56px);
  display: grid; gap: clamp(32px, 6vw, 64px);
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(60% 80% at 85% 0%, #c2531f33, transparent 70%);
}
.hero > * { position: relative; }
.hero .eyebrow { color: var(--orange); }
.hero h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.1rem, 5.5vw, 3.4rem); line-height: 1.05; letter-spacing: -.025em;
  max-width: 14ch;
}
.statband {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(120px, 40%), 1fr)); gap: 24px 20px;
  border-top: 1px solid #ffffff1f; padding-top: 24px;
}
.stat-num {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.625rem, 3.2vw, 2.5rem); line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; color: var(--cream); white-space: nowrap;
}
.stat-num .muted { color: var(--grey); }
.stat-label { font-size: .875rem; color: var(--grey-soft); margin-top: .4rem; }

/* Abschnittskopf */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.section-head h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.75rem; line-height: 1.1; letter-spacing: -.02em; color: var(--ink);
}
.section-head form { margin: 0; }

/* Buttons: 3px-Kante, kein Schatten, Orange nur für den einen Haupt-CTA */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font: 600 .9375rem var(--font-body); letter-spacing: -.006em;
  padding: .65rem 1.25rem; border: 0; border-radius: var(--r-btn); cursor: pointer;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), opacity var(--t-fast);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--orange); color: var(--on-dark); }
.btn-primary:hover { background: var(--orange-deep); }
.btn:disabled { opacity: .55; cursor: default; }

/* Karten */
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: 0 1px 3px #1a17160a; }
.studios { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap: 16px; }
.studio { padding: 24px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.studio-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.studio-head h3 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.studio-meta { margin: 0 0 14px; overflow-wrap: anywhere; }
.studio-meta .sep { color: var(--line); margin: 0 .35em; }

/* Kennzahlen: Hairline-Raster statt Kästchen */
.metrics {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  border-top: 1px solid var(--line);
}
.metric {
  padding: 16px 16px 16px 0; border-bottom: 1px dashed var(--line);
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
.metric-value {
  font-family: var(--font-display); font-weight: 700; white-space: nowrap;
  font-size: 2rem; line-height: 1; letter-spacing: -.03em;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.metric-value .muted { color: var(--grey-soft); }
.metric-label { display: inline-flex; align-items: center; gap: .45rem; font-size: .8125rem; color: var(--grey); }

/* Status nur über Punkte */
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; background: var(--grey-soft); }
.dot-ok, .run-ok .dot { background: var(--olive); }
.dot-bad, .run-bad .dot { background: var(--red); }
.run-idle .dot { background: var(--stone); box-shadow: inset 0 0 0 1px var(--grey-soft); }

.runs { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.run { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 10px; font-size: .875rem; color: var(--ink-70); }
.run-label { font-weight: 500; color: var(--ink); }
.run-when { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .04em; color: var(--grey); font-variant-numeric: tabular-nums; }
.run-msg { grid-column: 2 / -1; font-size: .8125rem; line-height: 1.45; color: var(--grey); overflow-wrap: anywhere; }
.run-bad .run-msg { color: var(--red); }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
  font-size: .8125rem; font-weight: 500; padding: .3rem .7rem; border-radius: var(--r-chip);
  background: var(--white); border: 1px solid var(--line); color: var(--ink); box-shadow: 0 1px 2px #1a171608;
}
.chip-muted { background: var(--stone); border-color: transparent; color: var(--ink-70); box-shadow: none; }

/* Fehlerseite */
.error { padding: 40px 0; }
.error h1 { font-family: var(--font-display); font-weight: 800; font-size: 2.875rem; letter-spacing: -.03em; line-height: 1.02; margin-bottom: 12px; color: var(--ink); }
.error .muted { overflow-wrap: anywhere; }

@media (max-width: 480px) {
  .studio { padding: 18px; }
  .metric-value { font-size: 1.625rem; }
  .brand-tag { display: none; }
  .brand { font-size: 0; gap: 0; }  /* nur das Logo, damit alle Menüpunkte passen */
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Zeitraum-Auswahl im Hero */
.range { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: 0; }
.range-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.range-presets a {
  font-size: .875rem; text-decoration: none; color: var(--grey-soft);
  padding: .4rem .8rem; border-radius: var(--r-chip); border: 1px solid #ffffff1f;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.range-presets a:hover { color: var(--cream); background: #ffffff0d; }
.range-presets a.is-active { background: var(--orange); color: var(--on-dark); border-color: var(--orange); font-weight: 600; }
.range-custom { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.range-custom label { display: flex; flex-direction: column; gap: 4px; }
.range-custom label span { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--grey-soft); }
.range-custom input {
  font: .875rem var(--font-body); color: var(--cream); color-scheme: dark;
  background: #1a1613; border: 1px solid #ffffff1f; border-radius: 10px; padding: .4rem .7rem;
}
.range-custom input:focus { outline: none; border-color: var(--orange); }
.btn-ghost-dark { background: transparent; color: var(--cream); border: 1px solid #ffffff33; font-size: .875rem; padding: .45rem .9rem; }
.btn-ghost-dark:hover { background: #ffffff0d; }
.hero-note { margin: -12px 0 0; font-size: .8125rem; color: var(--grey-soft); }

/* Tagesverlauf */
.days-card { overflow-x: auto; }
.days { width: 100%; border-collapse: collapse; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.days th {
  font-family: var(--font-mono); font-size: .6875rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase;
  color: var(--grey); text-align: right; padding: 14px 18px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.days td { text-align: right; padding: 11px 18px; border-bottom: 1px dashed var(--line); color: var(--ink); white-space: nowrap; }
.days th:first-child, .days td:first-child { text-align: left; color: var(--ink-70); }
.days tr:last-child td { border-bottom: 0; }
@media (max-width: 480px) {
  .days th, .days td { padding: 10px 12px; }
}

/* Seite Creatives */
/* Flacher Kopf: Titel links, Zahlen rechts, Zeitraum darunter */
.hero-compact h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); max-width: 18ch; }
@media (min-width: 900px) {
  .hero-compact {
    padding: 18px 26px; gap: 14px 40px;
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "text stats" "range range";
  }
  .hero-compact .hero-text { grid-area: text; display: grid; gap: 6px; align-content: end; }
  .hero-compact h1 { font-size: 2rem; max-width: none; }
  .hero-compact .range { grid-area: range; border-top: 1px solid #ffffff1f; padding-top: 14px; }
  .hero-compact .statband { grid-area: stats; grid-template-columns: none; grid-auto-flow: column; gap: 36px; border-top: 0; padding-top: 0; align-self: end; }
  .hero-compact .hero-note { grid-column: 1 / -1; margin: 0; }
  .hero-compact .stat-num { font-size: 1.875rem; }
  .hero-compact .stat-label { margin-top: .3rem; }
}
.wrap-wide section { margin-bottom: 32px; }
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 0 0 16px; }
.filters > label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.filters > label > span { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); }
.filters select {
  font: .9375rem var(--font-body); color: var(--ink); background: var(--white);
  border: 1px solid var(--line); border-radius: 10px; padding: .5rem .8rem; max-width: 100%;
}
.filters select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px #1a171614; }
.filters-reset { font-size: .875rem; color: var(--grey); padding-bottom: .55rem; }
.btn-white { background: var(--white); color: var(--ink); border: 1px solid var(--line); }

.creatives-card { overflow-x: auto; }
.creatives { width: 100%; border-collapse: collapse; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.creatives th {
  font-family: var(--font-mono); font-size: .6875rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase;
  color: var(--grey); text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.creatives th a { text-decoration: none; color: inherit; }
.creatives th a:hover { color: var(--ink); }
.creatives th a.is-sorted { color: var(--orange); }
.creatives td { padding: 12px 16px; border-bottom: 1px dashed var(--line); vertical-align: middle; color: var(--ink); }
.creatives tr:last-child td { border-bottom: 0; }
.creatives .c-num { text-align: right; white-space: nowrap; }
.creatives td.c-num .dot { margin-right: .45rem; vertical-align: middle; }
.c-creative-inner { display: flex; align-items: center; gap: 12px; min-width: 0; }
.thumb { flex: none; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: var(--stone); border: 1px solid var(--line); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-empty { display: block; width: 100%; height: 100%; }
.c-name { display: flex; flex-direction: column; min-width: 0; }
.c-name strong { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 30ch; }
.c-name .muted { font-size: .8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40ch; }
.c-status { white-space: nowrap; color: var(--ink-70); font-size: .875rem; }
.c-hint { display: block; font-size: .75rem; font-weight: 600; color: var(--orange); margin: 2px 0 0 calc(8px + .45rem); }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .45rem; background: var(--grey-soft); vertical-align: middle; }
.status-dot.on { background: var(--olive); }
.empty { padding: 28px 18px; margin: 0; }
.footnote { font-size: .8125rem; margin: 12px 0 0; max-width: 70ch; }

/* Schmal: jede Anzeige als Block statt Tabellenzeile */
@media (max-width: 900px) {
  .creatives thead { display: none; }
  .creatives, .creatives tbody, .creatives tr, .creatives td { display: block; }
  .creatives tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; padding: 14px 16px; border-bottom: 1px dashed var(--line); }
  .creatives tr:last-child { border-bottom: 0; }
  .creatives td { padding: 0; border: 0; }
  .creatives td.c-creative { grid-column: 1 / -1; }
  .creatives td.c-format, .creatives td.c-status { grid-column: span 1; }
  .creatives td.c-format { grid-column: 1 / 2; }
  .creatives td.c-status { grid-column: 2 / 4; align-self: center; }
  .creatives td.c-num { text-align: left; display: flex; flex-direction: column; gap: 2px; }
  .creatives td.c-num::before { content: attr(data-label); font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); }
  .c-name strong, .c-name .muted { max-width: none; white-space: normal; }
}

/* Mehrfachauswahl Kampagnen */
.multi { position: relative; }
.multi summary {
  list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 4px;
}
.multi summary::-webkit-details-marker { display: none; }
.multi-label { font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); }
.multi-value {
  font-size: .9375rem; color: var(--ink); background: var(--white); border: 1px solid var(--line);
  border-radius: 10px; padding: .5rem 2rem .5rem .8rem; min-width: 210px; position: relative;
}
.multi-value::after { content: "▾"; position: absolute; right: .8rem; color: var(--grey); }
.multi[open] .multi-value { border-color: var(--ink); }
.multi-panel {
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; width: min(420px, calc(100vw - 32px));
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: 0 16px 40px #0e0c0b26; padding: 8px; max-height: 60vh; overflow-y: auto;
}
.multi-option {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 10px; cursor: pointer; font-size: .9375rem;
}
.multi-option:hover { background: var(--surface); }
.multi-option input { accent-color: var(--orange); width: 16px; height: 16px; margin: 0; }
.multi-option .muted { font-size: .8125rem; font-variant-numeric: tabular-nums; }
.multi-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px 4px; border-top: 1px solid var(--line); margin-top: 6px; }
.multi-actions a { font-size: .875rem; color: var(--grey); }
.btn-sm { font-size: .875rem; padding: .45rem 1rem; }
.chips.selected { margin: -4px 0 14px; }
.chips.selected .chip { text-decoration: none; background: var(--orange-soft); border-color: transparent; color: var(--orange-deep); }
.chips.selected .chip span { margin-left: .3rem; }

/* Kalender-Knopf und Kalender (Stil angelehnt an coss ui) */
.range-custom { position: relative; }
.range-trigger {
  display: inline-flex; align-items: center; gap: .55rem; cursor: pointer;
  font: 500 .9375rem var(--font-body); color: var(--cream);
  background: #ffffff0d; border: 1px solid #ffffff26; border-radius: var(--r-btn);
  padding: .55rem 1rem; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.range-trigger:hover { background: #ffffff1a; border-color: #ffffff40; }
.range-trigger.is-active { background: var(--orange); border-color: var(--orange); }
.range-trigger svg { opacity: .8; }
.range-caret { font-size: .75rem; opacity: .6; }
.range-trigger[aria-expanded="true"] .range-caret { transform: rotate(180deg); }

.picker {
  position: absolute; z-index: 30; top: calc(100% + 10px); right: 0;
  background: var(--white); color: var(--ink); border: 1px solid var(--line);
  border-radius: 18px; box-shadow: 0 24px 60px #0e0c0b40, 0 2px 8px #0e0c0b14;
  padding: 16px; width: max-content; max-width: calc(100vw - 32px);
}
.picker[hidden] { display: none; }
.picker-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.picker-hint { font-size: .8125rem; color: var(--grey); }
.picker-nav {
  display: grid; place-items: center; width: 34px; height: 34px; cursor: pointer;
  border-radius: 10px; border: 0; background: transparent; color: var(--ink);
  transition: background var(--t-fast) var(--ease);
}
.picker-nav:hover { background: var(--stone); }
.picker-nav:disabled { opacity: .3; cursor: default; background: transparent; }
.picker-months { display: flex; gap: 28px; }
.month { width: 280px; }
.month-title { margin: 0 0 10px; text-align: center; font-weight: 700; font-size: .9375rem; }
.weekdays, .days-grid { display: grid; grid-template-columns: repeat(7, 40px); }
.weekdays span { text-align: center; font-size: .75rem; color: var(--grey-soft); padding-bottom: 6px; }
.days-grid { row-gap: 4px; }
.day {
  position: relative; height: 40px; padding: 0; border: 0; cursor: pointer;
  background: transparent; font: 500 .875rem var(--font-body); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.day span {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.day:hover:not(:disabled) span { background: var(--stone); }
.day.is-outside { color: var(--grey-soft); cursor: default; opacity: .6; }
.day.is-off:not(.is-outside) { color: var(--line); cursor: not-allowed; }
/* Zeitraum als durchgehendes Band, Start und Ende gefüllt */
.day.is-in { background: var(--orange-soft); }
.day.is-start { background: linear-gradient(90deg, transparent 50%, var(--orange-soft) 50%); }
.day.is-end { background: linear-gradient(90deg, var(--orange-soft) 50%, transparent 50%); }
.day.is-in:nth-child(7n+1) { border-radius: 10px 0 0 10px; }
.day.is-in:nth-child(7n) { border-radius: 0 10px 10px 0; }
.day.is-start span, .day.is-end span, .day.is-single span { background: var(--orange); color: var(--cream); font-weight: 700; }
.day.is-start:hover span, .day.is-end:hover span, .day.is-single:hover span { background: var(--orange-deep); }
.day.is-today::after {
  content: ""; position: absolute; left: 50%; bottom: 6px; width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%; background: currentColor;
}
.picker-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px;
}
.picker-sel { font-weight: 700; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.picker-actions { display: flex; gap: 8px; }
.btn-text { background: transparent; color: var(--grey); padding: .45rem .8rem; font-size: .875rem; }
.btn-text:hover { color: var(--ink); background: var(--stone); }

@media (max-width: 720px) {
  .picker { position: fixed; left: 16px; right: 16px; top: auto; bottom: 16px; width: auto; }
  .month { width: 100%; }
  .weekdays, .days-grid { grid-template-columns: repeat(7, 1fr); }
  .day span { width: 100%; }
}

/* Einstellungen */
.settings-intro { margin: -6px 0 20px; max-width: 60ch; }
.settings-list { display: grid; gap: 16px; }
.settings-card { padding: 24px; display: grid; gap: 22px; }
.settings-group .eyebrow { margin-bottom: 12px; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 18px 24px; }
.setting { display: grid; gap: 6px; align-content: start; }
.setting-label { font-weight: 700; font-size: .9375rem; }
.setting-input { display: flex; align-items: center; gap: 8px; }
.setting-input input, .setting-input select {
  font: 500 1rem var(--font-body); color: var(--ink); background: var(--white);
  border: 1px solid var(--line); border-radius: 10px; padding: .55rem .75rem; width: 100%; max-width: 160px;
}
.setting-input select { max-width: 220px; }
.setting-input input:focus, .setting-input select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px #0e0c0b14; }
.setting-unit { font-size: .875rem; color: var(--grey); white-space: nowrap; }
.setting-help { font-size: .8125rem; color: var(--grey); line-height: 1.45; }
.settings-actions { display: flex; justify-content: flex-end; border-top: 1px solid var(--line); padding-top: 18px; }
.chip-saved { background: #e6efdc; border-color: transparent; color: var(--olive); font-weight: 600; }

/* Klickbares Creative in der Tabelle */
button.c-creative-inner {
  font: inherit; color: inherit; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; width: 100%;
}
button.c-creative-inner .thumb { position: relative; }
button.c-creative-inner .thumb::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0;
  background: #0e0c0b8c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3efe9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center / 20px no-repeat;
  transition: opacity var(--t-fast) var(--ease);
}
button.c-creative-inner:hover .thumb::after, button.c-creative-inner:focus-visible .thumb::after { opacity: 1; }
button.c-creative-inner:hover strong { color: var(--orange); }
button.c-creative-inner:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; border-radius: 10px; }

/* Umschalter Tabelle / Galerie */
.segmented {
  margin-left: auto; display: inline-flex; gap: 2px; padding: 3px;
  background: var(--stone); border-radius: var(--r-btn);
}
.segmented a {
  display: inline-flex; align-items: center; gap: .4rem; padding: .42rem .9rem; border-radius: var(--r-btn);
  font-size: .875rem; font-weight: 600; color: var(--ink-70); text-decoration: none;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.segmented a:hover { color: var(--ink); }
.segmented a.is-active { background: var(--white); color: var(--ink); box-shadow: 0 1px 3px #1a171614, 0 0 0 1px var(--line); }
.segmented a:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
@media (max-width: 640px) { .segmented { margin-left: 0; } }

/* Galerie */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.g-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: 0 1px 3px #1a17160a;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.g-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px -14px #1a171640; }
.g-media {
  position: relative; display: block; aspect-ratio: 6 / 5; width: 100%; padding: 0; border: 0; cursor: pointer;
  background: var(--stone); overflow: hidden;
}
.g-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); }
.g-card:hover .g-media img { transform: scale(1.05); }
.g-media::after {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: #0e0c0b59 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3efe9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center / 28px no-repeat;
  transition: opacity var(--t-fast) var(--ease);
}
.g-media:hover::after, .g-media:focus-visible::after { opacity: 1; }
.g-media:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.g-badges { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; z-index: 1; }
.g-badges .rec { font-size: .75rem; padding: .22rem .6rem; box-shadow: 0 2px 8px #0e0c0b26; }
.g-badges .rec-none { background: var(--white); border-color: transparent; color: var(--ink-70); }
.g-format {
  position: absolute; bottom: 8px; left: 8px; z-index: 1; padding: .15rem .55rem; border-radius: var(--r-chip);
  background: #0e0c0bb3; color: var(--on-dark); font-size: .75rem; font-weight: 600; backdrop-filter: blur(6px);
}
.g-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.g-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.g-title strong { color: var(--ink); font-weight: 700; font-size: .9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-title .muted { font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; margin: 0; padding-top: 8px; border-top: 1px dashed var(--line); }
.g-stats div { min-width: 0; }
.g-stats .g-cpa { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-top: 6px; border-top: 1px dashed var(--line); }
.g-stats .g-cpa dd { margin: 0; }
.g-stats dt { font-size: .6875rem; color: var(--grey); white-space: nowrap; }
.g-stats dd { margin: 2px 0 0; display: flex; align-items: center; gap: .35rem; font-size: .9375rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 480px) { .gallery { grid-template-columns: 1fr 1fr; gap: 10px; } .g-body { padding: 10px 12px 12px; } .g-stats { grid-template-columns: 1fr; gap: 6px; } .g-stats div { display: flex; justify-content: space-between; } .g-stats dd { margin: 0; } }

/* Empfehlung */
.c-rec { white-space: nowrap; }
.rec {
  display: inline-flex; align-items: center; gap: .4rem; padding: .28rem .75rem; border-radius: 999px;
  font-size: .8125rem; font-weight: 700; cursor: help; white-space: nowrap;
}
.rec::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.rec-ok   { background: #e6efdc; color: #4b6a26; }
.rec-idle { background: var(--stone); color: var(--ink-70); }
.rec-warn { background: var(--orange-soft); color: var(--orange-deep); }
.rec-bad  { background: #f7dedb; color: #a8322a; }
.rec-none { background: transparent; color: var(--grey); border: 1px dashed var(--line); font-weight: 500; }

/* Großansicht: feste Größe, passt immer ins Fenster */
.viewer {
  position: fixed; inset: 0; margin: auto; border: 0; padding: 0;
  width: min(1120px, calc(100vw - 32px)); height: min(780px, calc(100vh - 32px));
  max-width: none; max-height: none; overflow: hidden;
  border-radius: 22px; background: var(--ink); color: var(--ink);   /* dunkel, sonst blitzt Weiß an den runden Ecken */
  box-shadow: 0 30px 80px #0e0c0b59;
}
.viewer::backdrop { background: #0e0c0bb3; backdrop-filter: blur(4px); }
.viewer[open] { animation: viewer-in .25s var(--ease); }
@keyframes viewer-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.viewer-inner { display: grid; grid-template-columns: minmax(0, 1fr) 340px; height: 100%; }

.viewer-media { position: relative; background: var(--ink); display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; }
.viewer-media:fullscreen { background: var(--ink); }
.viewer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; }
.viewer-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: #ffffff12; }
.viewer-tabs button {
  font: 600 .8125rem var(--font-body); color: #f3efe9b3; background: transparent; border: 0; cursor: pointer;
  padding: .4rem .9rem; border-radius: 999px; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.viewer-tabs button:hover { color: var(--cream); }
.viewer-tabs button[aria-selected="true"] { background: var(--cream); color: var(--ink); }
.viewer-icon {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  border: 0; background: #ffffff14; color: var(--cream); transition: background var(--t-fast) var(--ease);
}
.viewer-icon:hover { background: #ffffff26; }
.viewer-icon.light { background: var(--stone); color: var(--ink); }
.viewer-icon.light:hover { background: var(--line); }

.viewer-stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 0 64px 20px; overflow: hidden; }
.viewer-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; display: block; }
/* Meta zeichnet am Rand eine feine weiße Linie: 2 px rundum abschneiden, dafür ein oranger Rahmen */
.viewer-frame {
  --cut: 2px;
  position: relative; overflow: hidden; border-radius: 14px;
  width: calc((var(--w) - 2 * var(--cut)) * var(--s, 1)); height: calc((var(--h) - 2 * var(--cut)) * var(--s, 1));
  box-shadow: 0 0 0 1px #c2531f8c, 0 0 40px #c2531f33, 0 24px 60px #000a;
}
.viewer-frame iframe {
  position: absolute; left: calc(var(--cut) * var(--s, 1) * -1); top: calc(var(--cut) * var(--s, 1) * -1);
  width: var(--w); height: var(--h); border: 0; transform: scale(var(--s, 1)); transform-origin: 0 0; display: block;
}
.viewer-loading { color: var(--grey-soft); font-size: .9375rem; }
.viewer-loading::before {
  content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 10px; vertical-align: -2px;
  border: 2px solid #f3efe94d; border-top-color: var(--orange); border-radius: 50%; animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.viewer-error { text-align: center; color: var(--grey-soft); display: grid; gap: 12px; justify-items: center; max-width: 34ch; }
.viewer-error p { margin: 0; }

.viewer-nav {
  position: absolute; top: 55%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%;
  border: 0; cursor: pointer; background: #f3efe9e6; color: var(--ink);
  display: grid; place-items: center; transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.viewer-nav:hover { background: var(--white); }
.viewer-nav:active { transform: translateY(-50%) scale(.95); }
.viewer-nav.prev { left: 12px; }
.viewer-nav.next { right: 12px; }

.viewer-info { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; min-height: 0; border-left: 1px solid var(--line); background: var(--paper); }
.viewer-top { display: flex; justify-content: space-between; align-items: center; }
.viewer-count { font-size: .8125rem; font-weight: 600; color: var(--grey); font-variant-numeric: tabular-nums; }
.viewer-head { display: grid; gap: 10px; }
.viewer-head h3 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; overflow-wrap: anywhere; }
.viewer-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.vtag {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  font-size: .75rem; font-weight: 600; padding: .3rem .65rem; border-radius: 999px;
  background: var(--white); border: 1px solid var(--line); color: var(--ink-70);
}
.vtag-wide { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vdot { width: 7px; height: 7px; border-radius: 50%; background: var(--grey-soft); flex: none; }
.vdot.on { background: var(--olive); box-shadow: 0 0 0 3px #5f7a3a26; }

.viewer-verdict { border-radius: 16px; padding: 14px 16px; display: grid; gap: 6px; }
.verdict-label { font-size: 1.125rem; font-weight: 800; letter-spacing: -.01em; display: inline-flex; align-items: center; gap: 8px; }
.verdict-label::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.viewer-verdict p { margin: 0; font-size: .875rem; line-height: 1.45; opacity: .85; }
.tone-ok   { background: #e3edd6; color: #3f5d1f; }
.tone-idle { background: var(--stone); color: var(--ink-70); }
.tone-warn { background: var(--orange-soft); color: var(--orange-deep); }
.tone-bad  { background: #f6dcd8; color: #9c2f27; }
.tone-none { background: var(--white); color: var(--grey); border: 1px dashed var(--line); }

.viewer-main { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: grid; gap: 8px; }
.vlabel { font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); }
.vmain-num { font-size: 2.5rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.vmeter { position: relative; height: 8px; border-radius: 999px; background: var(--stone); margin-top: 6px; }
.vmeter-fill { position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: inherit; background: var(--olive); }
.vmeter-fill.over { background: var(--red); }
.vmeter-mark { position: absolute; left: 50%; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink); }
.vmeter-legend { display: flex; justify-content: space-between; gap: 8px; font-size: .75rem; color: var(--grey); }

.viewer-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.viewer-tiles div { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: grid; gap: 4px; }
.viewer-tiles strong { font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.viewer-cta { margin-top: auto; justify-content: center; text-decoration: none; }

@media (max-width: 860px) {
  .viewer { width: 100vw; height: 100dvh; border-radius: 0; }
  .viewer-inner { grid-template-columns: 1fr; grid-template-rows: minmax(0, 62%) minmax(0, 1fr); }
  .viewer-info { border-left: 0; border-top: 1px solid var(--line); padding: 16px 18px; }
  .vmain-num { font-size: 2rem; }
  .viewer-stage { padding: 0 52px 14px; }
  .viewer-nav { width: 36px; height: 36px; }
}
@media (max-width: 900px) {
  .creatives td.c-rec { grid-column: 1 / -1; }
  .creatives td.c-rec::before { content: none; }
}

/* Schalter in den Einstellungen */
.setting-switch { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); cursor: pointer; }
.setting-switch > span:last-child { display: grid; gap: 4px; }
.setting-switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch { position: relative; width: 42px; height: 24px; border-radius: 999px; background: var(--line); transition: background var(--t-fast) var(--ease); margin-top: 2px; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 3px #0003; transition: transform var(--t-fast) var(--ease); }
.setting-switch input:checked + .switch { background: var(--orange); }
.setting-switch input:checked + .switch::after { transform: translateX(18px); }
.setting-switch input:focus-visible + .switch { outline: 2px solid var(--orange); outline-offset: 2px; }

/* Handy: kompakter Kopf, Filter zweispaltig, damit die Creatives schnell sichtbar sind */
@media (max-width: 640px) {
  .topbar { padding: 10px 12px; gap: 8px; }
  .brand { white-space: nowrap; font-size: .9375rem; gap: 8px; }
  .brand-tag { display: none; }
  .brand { font-size: 0; gap: 0; }  /* nur das Logo, damit alle Menüpunkte passen */
  .topbar nav a { padding: 6px 8px; font-size: .75rem; }
  .wrap-wide { padding-top: 12px; }
  .hero-compact { padding: 18px; gap: 14px; border-radius: 16px; grid-template-columns: minmax(0, 1fr); }
  .hero-compact .range, .hero-compact .range > * { min-width: 0; max-width: 100%; }
  .hero-compact .eyebrow { font-size: .625rem; letter-spacing: .08em; }
  .hero-compact h1 { font-size: 1.5rem; }
  .hero-compact .range { gap: 10px; }
  .hero-compact .range-presets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; }
  .hero-compact .range-presets a { flex: none; }
  .hero-compact .statband { grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 12px; padding-top: 14px; }
  .hero-compact .stat-num { font-size: 1.3rem; }
  .hero-compact .stat-label { font-size: .75rem; }
  .wrap-wide .filters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .wrap-wide .filters > label, .wrap-wide .filters select, .wrap-wide .filters .multi { width: 100%; min-width: 0; }
  .wrap-wide .filters .multi, .wrap-wide .filters .segmented { grid-column: 1 / -1; }
  .wrap-wide .filters .segmented { justify-content: stretch; }
  .wrap-wide .filters .segmented a { flex: 1; justify-content: center; }
}

/* Aktion in der Großansicht */
.viewer-aktion label { display: grid; gap: 4px; }
.viewer-aktion select {
  font: .875rem var(--font-body); color: var(--ink); background: var(--white);
  border: 1px solid var(--line); border-radius: 10px; padding: .45rem .7rem; width: 100%;
}

/* Aktionen */
.chip-link { text-decoration: none; display: inline-flex; gap: .5rem; align-items: baseline; }
.chip-link:hover { border-color: var(--orange); color: var(--orange-deep); }
.chip-link .muted { font-size: .75rem; }
.aktionen-table .c-go { text-align: right; white-space: nowrap; }
.aktionen-table .c-go a { color: var(--orange-deep); font-weight: 600; text-decoration: none; font-size: .875rem; }
.row-muted td { color: var(--grey); }
.notice { background: var(--orange-soft); color: var(--orange-deep); border-radius: 12px; padding: .7rem 1rem; margin: 0 0 14px; font-weight: 600; }
.checks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.check { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .8rem; border: 1px solid var(--line); border-radius: var(--r-chip); background: var(--white); cursor: pointer; font-size: .875rem; }
.check:has(input:checked) { border-color: var(--orange); background: var(--orange-soft); color: var(--orange-deep); }
.check input { accent-color: var(--orange); margin: 0; }
.settings-card input[type="text"] {
  font: .9375rem var(--font-body); color: var(--ink); background: var(--white);
  border: 1px solid var(--line); border-radius: 10px; padding: .55rem .75rem; width: 100%;
}
.settings-card input[type="text"]:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px #1a171614; }
.settings-new { border-style: dashed; }
.danger { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.danger summary { cursor: pointer; font-size: .875rem; color: var(--grey); }
.danger summary:hover { color: var(--red); }
.danger form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 10px; }
.danger p { margin: 0; font-size: .875rem; }
.btn-danger { background: var(--red); color: var(--white); }
.setting-input input[type="text"] { max-width: none; }

/* Kompakte Seiten: kleinere Abschnittsköpfe, Übersicht zweispaltig, Einstellungen nebeneinander */
.wrap-wide .section-head { margin-bottom: 12px; }
.wrap-wide .section-head h2 { font-size: 1.25rem; }
.wrap-wide .section-head .eyebrow { margin: 0 0 2px; }
.overview-grid { display: grid; gap: 24px; }
.overview-grid > section, .overview-side > section { margin-bottom: 0; }
.overview-side { display: grid; gap: 24px; align-content: start; min-width: 0; }
@media (min-width: 1100px) {
  .overview-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
}
.wrap-wide .studio { padding: 18px 20px; }
.wrap-wide .studio-meta { margin-bottom: 8px; }
.wrap-wide .metrics { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.wrap-wide .metric { padding: 12px 12px 12px 0; gap: 4px; }
.wrap-wide .metric-value { font-size: 1.375rem; }
.wrap-wide .days th { padding: 10px 16px; }
.wrap-wide .days td { padding: 8px 16px; }
.wrap-wide .settings-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.aktionen-edit { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 560px), 1fr)); gap: 16px; align-items: start; }
.wrap-wide .settings-card { padding: 20px; gap: 16px; }
.wrap-wide .settings-grid { gap: 14px 20px; }
.wrap-wide .settings-intro { margin: -4px 0 14px; }
@media (max-width: 900px) {
  .aktionen-table td:first-child, .aktionen-table td.c-go { grid-column: 1 / -1; text-align: left; }
  .aktionen-table tr { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Dashboard (Übersicht) */
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-top: 1px solid #ffffff1f; }
.kpi { display: grid; gap: 4px; padding: 14px 16px 2px 0; min-width: 0; }
.kpi + .kpi { padding-left: 16px; border-left: 1px solid #ffffff14; }
.kpi-label { display: inline-flex; align-items: center; gap: .4rem; font-size: .75rem; color: var(--grey-soft); white-space: nowrap; }
.kpi-value { font-family: var(--font-display); font-weight: 700; font-size: 1.75rem; line-height: 1.05; letter-spacing: -.03em; color: var(--cream); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kpi-value .muted { color: var(--grey); }
.kpi-delta { font-size: .75rem; color: var(--grey-soft); white-space: nowrap; }
.kpi-delta.is-good { color: #a9c98a; }
.kpi-delta.is-bad { color: #f0a08f; }
@media (min-width: 900px) {
  .hero-dash { grid-template-areas: "text range" "kpis kpis"; grid-template-columns: minmax(0, 1fr) auto; }
  .hero-dash .range { grid-area: range; border-top: 0; padding-top: 0; align-self: end; }
  .hero-dash .kpis { grid-area: kpis; }
}

.dash { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dash > section, .t-side > section { margin: 0; }
.hero-dash { margin-bottom: 18px !important; }
.wrap-wide > section.hero-compact { margin-bottom: 18px; }
.dash-card { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dash-chart { grid-column: span 2; }
.dash-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dash-head h2 { font-family: var(--font-display); font-weight: 800; font-size: 1.0625rem; letter-spacing: -.01em; color: var(--ink); }
.dash-head a { font-size: .8125rem; font-weight: 600; color: var(--orange-deep); text-decoration: none; white-space: nowrap; }
.dash-head .muted { font-size: .8125rem; }
.dash-foot { font-size: .75rem; margin: auto 0 0; }
@media (max-width: 1100px) { .dash { grid-template-columns: 1fr 1fr; } .dash-chart { grid-column: 1 / -1; } }
@media (max-width: 680px) { .dash { grid-template-columns: 1fr; } .dash-chart { grid-column: auto; } }

/* Verlauf */
.chart { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 4px; height: 140px; align-items: stretch; }
.chart-col { display: grid; grid-template-rows: 1fr auto; gap: 6px; min-width: 0; cursor: default; }
.chart-plot { position: relative; border-bottom: 1px solid var(--line); }
.chart-bar { position: absolute; left: 12%; right: 12%; bottom: 0; height: var(--h); max-width: 34px; margin: 0 auto; border-radius: 6px 6px 2px 2px; background: var(--orange); opacity: .85; transition: opacity var(--t-fast); }
.chart-dot { position: absolute; left: 50%; bottom: var(--y); width: 8px; height: 8px; margin: 0 0 -4px -4px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px var(--white); }
.chart-col:hover .chart-bar { opacity: 1; background: var(--orange-deep); }
.chart-col:hover .chart-plot { background: #1a17160a; border-radius: 6px 6px 0 0; }
.chart-x { font-size: .6875rem; color: var(--grey); text-align: center; white-space: nowrap; height: 1em; }
.chart-legend { display: inline-flex; align-items: center; gap: .4rem; font-size: .75rem; color: var(--grey); }
.lg { display: inline-block; width: 10px; height: 10px; margin-left: .6rem; }
.lg-bar { background: var(--orange); border-radius: 3px; }
.lg-dot { background: var(--ink); border-radius: 50%; width: 8px; height: 8px; }
.chart-note { font-size: .75rem; margin: 0; }
.dash-more summary { cursor: pointer; font-size: .8125rem; font-weight: 600; color: var(--ink-70); list-style: none; display: inline-flex; align-items: center; gap: .35rem; }
.dash-more summary::-webkit-details-marker { display: none; }
.dash-more summary::before { content: "▸"; transition: transform var(--t-fast); }
.dash-more[open] summary::before { transform: rotate(90deg); }
.dash-more .days-card { margin-top: 10px; border: 1px solid var(--line); border-radius: 12px; max-height: 320px; overflow: auto; }

/* Zu tun */
.todo-row { display: grid; grid-template-columns: 140px 1fr auto; align-items: center; gap: 10px; padding: 6px 10px; margin: 0 -10px; border-radius: 12px; text-decoration: none; color: inherit; }
.todo-row:hover { background: var(--stone); }
.todo-row .rec { cursor: pointer; justify-self: start; }
.todo-thumbs { display: flex; min-width: 0; }
.mini-thumb { flex: none; width: 34px; height: 34px; border-radius: 9px; overflow: hidden; background: var(--stone); border: 2px solid var(--white); box-shadow: 0 1px 3px #1a171620; }
.todo-thumbs .mini-thumb + .mini-thumb { margin-left: -8px; }
.mini-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini-more { align-self: center; margin-left: 6px; font-size: .75rem; color: var(--grey); }
.todo-count { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: var(--ink); }

/* Beste Creatives */
.best { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 10px; text-decoration: none; color: inherit; padding: 4px 8px; margin: 0 -8px; border-radius: 12px; }
.best:hover { background: var(--stone); }
.best .mini-thumb { width: 38px; height: 38px; border: 0; }
.best-text .status-dot { width: 6px; height: 6px; margin-right: .3rem; }
.best-rank { font-family: var(--font-display); font-weight: 800; color: var(--orange); width: 1.1em; }
.best-text { display: grid; min-width: 0; }
.best-text strong { font-size: .875rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.best-text .muted { font-size: .75rem; }
.best-cpa { font-weight: 800; color: var(--olive); font-variant-numeric: tabular-nums; }

/* Aktionen im Dashboard */
.akt-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: center; gap: 12px; text-decoration: none; color: inherit; padding: 4px 0; }
.akt-name { display: grid; font-weight: 600; font-size: .875rem; color: var(--ink); }
.akt-name .muted { font-weight: 400; font-size: .75rem; }
.akt-bar { height: 8px; border-radius: 99px; background: var(--stone); overflow: hidden; }
.akt-bar span { display: block; height: 100%; width: var(--w); background: var(--orange); border-radius: inherit; }
.akt-num { font-weight: 700; font-size: .875rem; font-variant-numeric: tabular-nums; }
.akt-row:hover .akt-name { color: var(--orange-deep); }

.dash-sync form { margin: 0; }
.dash-sync .runs { margin: 0; }
.dash-sync .run { grid-template-columns: auto 1fr auto; }

@media (max-width: 640px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 4px; }
  .kpi { padding: 10px 8px 4px 0; }
  .kpi + .kpi { padding-left: 8px; }
  .kpi:nth-child(4) { border-left: 0; padding-left: 0; }
  .kpi-value { font-size: 1.2rem; }
  .kpi-label { font-size: .6875rem; white-space: normal; }
  .chart { height: 150px; gap: 2px; }
}
.verdict-action { display: inline-block; margin-top: 8px; font-weight: 700; font-size: .8125rem; color: inherit; }
.settings-card textarea, .t-edit textarea {
  font: .9375rem/1.45 var(--font-body); color: var(--ink); background: var(--white); resize: vertical;
  border: 1px solid var(--line); border-radius: 10px; padding: .55rem .75rem; width: 100%;
}

/* Bearbeiten-Klappe und Text-Knöpfe (Werkstatt) */
  font: .9375rem var(--font-body); color: var(--ink); background: var(--white);
  border: 1px solid var(--line); border-radius: 999px; padding: .6rem 1rem; width: 100%; min-width: 0;
}
.t-edit input[type="text"] { border-radius: 10px; padding: .5rem .7rem; }
.t-mini { margin: 0 0 0 auto; }
.t-link { background: none; border: 0; padding: 0; font: 600 .8125rem var(--font-body); color: var(--grey); cursor: pointer; text-decoration: none; }
.t-link:hover { color: var(--ink); }
.t-danger:hover { color: var(--red); }
.is-new { border-color: var(--orange) !important; box-shadow: 0 0 0 3px var(--orange-soft); }
.t-edit { flex: 1 1 100%; }
.t-edit summary { cursor: pointer; font-size: .8125rem; font-weight: 600; color: var(--grey); }
.t-edit form { display: grid; gap: 8px; margin-top: 8px; }
.t-edit label { display: grid; gap: 3px; font-size: .75rem; font-weight: 600; color: var(--ink-70); }
.t-edit-actions { display: flex; justify-content: flex-end; }
.notice code { background: #ffffff80; padding: 0 .3em; border-radius: 4px; }
.empty-state { padding: 28px; display: grid; gap: 8px; }
@media (max-width: 640px) {
  /* Das Logo führt zur Übersicht, darum fällt der Menüpunkt weg: mehr Platz für lesbare Tippflächen */
  .topbar nav { gap: 2px; }
  .topbar nav a { padding: 9px 8px; font-size: .8125rem; }
  .topbar nav a[href="/"] { display: none; }
}

/* Anmeldung */
.login { max-width: 380px; margin: 10vh auto 0; padding: 32px 28px; display: grid; gap: 10px; text-align: center; justify-items: center; }
.login h1 { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--ink); }
.login-logo { border-radius: 12px; }
.login-form { display: grid; gap: 10px; width: 100%; margin-top: 6px; }
.login-form input { font: 1rem var(--font-body); border: 1px solid var(--line); border-radius: 999px; padding: .7rem 1.1rem; background: var(--white); color: var(--ink); text-align: center; }
.login-form input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px #1a171614; }
.login-form .btn { justify-content: center; }
.settings-foot { margin-top: 14px; font-size: .875rem; }
.unsafe { margin: 0; padding: 8px var(--gutter); background: #f7dedb; color: #8f2a22; font-size: .8125rem; font-weight: 600; text-align: center; }
.unsafe code { background: #ffffff80; padding: 0 .3em; border-radius: 4px; }

/* Werkstatt: neue Creatives aus den Werken */
.setting-wide { grid-column: 1 / -1; }
.setting-wide .setting-input input, .setting-wide textarea { max-width: 720px; width: 100%; }
@media (min-width: 900px) { .w-hero .w-build { grid-area: range; border-top: 1px solid #ffffff1f; padding-top: 14px; } }
.w-build { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0; }
.w-build select {
  font: 600 .875rem var(--font-body); color: var(--on-dark); background: #ffffff12; border: 1px solid #ffffff2e;
  border-radius: 999px; padding: .55rem 1rem; max-width: 100%; min-width: 0;
}
.w-build select option { color: var(--ink); }
.w-build select:first-child { flex: 0 1 380px; }
.w-folder { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 16px; margin-bottom: 16px; }
.w-folder form { margin: 0; }
.w-folder-text { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-right: auto; }
.w-folder-text strong { color: var(--ink); font-size: .9375rem; }
.w-folder-text .muted { font-size: .875rem; }
.w-werke { flex: 1 1 100%; }
.w-werke summary { cursor: pointer; font-size: .8125rem; font-weight: 600; color: var(--grey); }
.w-werke-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin-top: 10px; }
.w-werk { position: relative; display: block; border-radius: 10px; overflow: hidden; cursor: pointer; aspect-ratio: 1; background: var(--stone); }
.w-werk img { width: 100%; height: 100%; object-fit: cover; display: block; }
.w-werk input { position: absolute; top: 6px; left: 6px; accent-color: var(--orange); }
.w-werk span { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 6px; font-size: .6875rem; font-weight: 600; color: var(--on-dark); background: #0e0c0b99; }
.w-werk.is-off img { opacity: .35; filter: grayscale(1); }
.w-werke-save { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.w-list { margin-bottom: 0 !important; }
.w-list-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.w-list-head form { margin: 0; }
.w-tabs { margin-left: 0; }
.w-count { margin-left: .4rem; font-size: .75rem; color: var(--grey); font-variant-numeric: tabular-nums; }
.w-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 14px; align-items: start; }
.w-card { display: flex; flex-direction: column; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: 0 1px 3px #1a17160a; }
.w-media { display: block; padding: 0; border: 0; cursor: zoom-in; aspect-ratio: 4 / 5; background: var(--stone); overflow: hidden; }
.w-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); }
.w-media:hover img { transform: scale(1.03); }
.w-media:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.w-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.w-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.w-tags .chip { font-size: .6875rem; padding: .15rem .55rem; }
.w-formats { margin-left: auto; display: flex; gap: 10px; font-size: .75rem; font-weight: 600; }
.w-formats a { color: var(--grey); text-decoration: none; }
.w-formats a:hover { color: var(--orange-deep); }
.w-replaces { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .75rem; color: var(--grey); min-width: 0; }
.w-replaces img { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; flex: none; }
.w-replaces span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-replaces strong { color: var(--ink-70); }
.w-idee { margin: 0; font-size: .8125rem; color: var(--ink-70); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.w-pruefung { margin: 0; font-size: .75rem; font-weight: 600; color: var(--orange-deep); }
.w-pruefung.is-ok { color: var(--olive); }
.w-pruefung.is-ok::before { content: "✓ "; }
.w-safe-toggle { margin-left: 8px; font: 600 .75rem var(--font-body); color: var(--on-dark); background: #ffffff1f; border: 0; border-radius: 999px; padding: .25rem .7rem; cursor: pointer; }
.w-safe-toggle[aria-pressed="true"] { background: var(--orange); }
.w-meldung { margin: 0; font-size: .75rem; font-weight: 600; padding: 6px 8px; border-radius: 8px; background: var(--stone); color: var(--ink-70); }
.w-meldung-fehler { background: #f7dedb; color: #8f2a22; }
.w-meldung-getauscht { background: #e6efdc; color: var(--olive); }
.w-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.w-actions form { margin: 0; }
.w-swap { display: grid; gap: 6px; width: 100%; }
.w-label { display: grid; gap: 3px; font-size: .6875rem; font-weight: 600; color: var(--grey); }
.w-label input, .w-edit-form input[type="text"], .w-edit-form select {
  font: .8125rem var(--font-body); color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: .45rem .6rem; width: 100%; min-width: 0;
}
.w-note { margin: 0; font-size: .75rem; }
.w-edit-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.w-colors { grid-template-columns: repeat(3, 1fr); }
.w-colors input { width: 100%; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: none; }
.w-edit-form .btn { justify-self: start; }
.w-zoom { border: 0; padding: 8px 0; background: transparent; max-width: 96vw; max-height: 96vh; overflow: visible; }
.w-zoom::backdrop { background: #0e0c0bd9; }
.w-zoom-inner { display: flex; gap: 16px; align-items: flex-start; justify-content: center; }
.w-zoom figure { margin: 0; display: grid; gap: 6px; justify-items: center; }
.w-zoom img { max-height: calc(96vh - 76px); max-width: 46vw; border-radius: 12px; display: block; background: var(--ink); }
.w-zoom figcaption { color: var(--on-dark); font-size: .8125rem; font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; min-height: 32px; }
.w-zoom figcaption .w-dl { margin-left: 0; padding: .35rem .8rem; }
.w-zoom-close { position: fixed; top: 14px; right: 18px; width: 40px; height: 40px; border-radius: 999px; border: 0; background: #ffffff1f; color: #fff; font-size: 1.5rem; cursor: pointer; }
@media (max-width: 640px) {
  .w-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .w-body { padding: 8px 10px 10px; }
  .w-formats { margin-left: 0; }
  .w-edit-row { grid-template-columns: 1fr; }
  .w-colors { grid-template-columns: repeat(3, 1fr); }
  .w-build select:first-child { flex: 1 1 100%; }
  .w-build select, .w-build .btn { flex: 1 1 40%; }
  .w-build .btn { white-space: nowrap; justify-content: center; padding-left: .8rem; padding-right: .8rem; }
  .w-build select { padding: .5rem .8rem; }
  .w-hero .statband { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding-top: 12px; }
  .w-hero .stat-num { font-size: 1.35rem; }
  .w-hero .stat-label { font-size: .6875rem; line-height: 1.25; }
  .w-tabs { overflow-x: auto; max-width: 100%; scrollbar-width: none; flex-wrap: nowrap; }
  .w-tabs a { white-space: nowrap; padding-left: .7rem; padding-right: .7rem; }
  .w-folder { padding: 10px 12px; }
  .w-zoom-inner { flex-direction: column; align-items: center; overflow-y: auto; max-height: 90vh; }
  .w-zoom img { max-width: 88vw; max-height: none; }
}

/* Seitenleiste mit Icons (statt Kopfzeile) */
body.has-side { display: grid; grid-template-columns: 228px minmax(0, 1fr); min-height: 100vh; }
.page { min-width: 0; }
.side {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 18px;
  padding: 18px 12px; background: var(--cream); border-right: 1px solid var(--line);
}
.side-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 10px; text-decoration: none; color: var(--ink); }
.side-brand img { border-radius: 9px; display: block; }
.side-brand span { display: grid; line-height: 1.15; }
.side-brand strong { font-weight: 800; font-size: .9375rem; letter-spacing: -.01em; }
.side-brand small { font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); }
.side-nav { display: grid; gap: 2px; }
.side-link {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 10px;
  color: var(--ink-70); text-decoration: none; font-size: .9rem; font-weight: 600;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.side-link .icon { flex: none; color: var(--grey); transition: color var(--t-fast) var(--ease); }
.side-link:hover { background: #1a17160a; color: var(--ink); }
.side-link:hover .icon { color: var(--ink); }
.side-link.is-active { background: var(--white); color: var(--ink); box-shadow: 0 1px 2px #1a171612, 0 0 0 1px var(--line); }
.side-link.is-active .icon { color: var(--orange); }
.side-link:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.side-foot { margin-top: auto; display: grid; gap: 2px; }
.side-logout { font-weight: 500; font-size: .8125rem; }
body.is-bare { display: block; }
.has-side .wrap-wide { max-width: 1480px; padding-left: 28px; padding-right: 28px; }

/* Schmalere Bildschirme: nur Icons */
@media (max-width: 1180px) and (min-width: 721px) {
  body.has-side { grid-template-columns: 68px minmax(0, 1fr); }
  .side { padding: 16px 10px; align-items: center; }
  .side-brand span, .side-link span { display: none; }
  .side-brand { padding: 4px 0 10px; }
  .side-link { justify-content: center; padding: 10px; }
  .has-side .wrap-wide { padding-left: 20px; padding-right: 20px; }
}

/* Handy: Leiste unten wie in einer App */
@media (max-width: 720px) {
  body.has-side { display: block; }
  .side {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0; height: auto; z-index: 20;
    flex-direction: row; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); gap: 0;
    border-right: 0; border-top: 1px solid var(--line); background: #f7f4efee; backdrop-filter: blur(12px);
  }
  .side-brand, .side-foot { display: none; }
  .side-nav { display: flex; width: 100%; justify-content: space-around; }
  .side-link { flex: 1; flex-direction: column; gap: 3px; padding: 7px 2px; font-size: .625rem; font-weight: 600; border-radius: 10px; }
  .side-link.is-active { box-shadow: none; background: transparent; color: var(--orange-deep); }
  .page { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .has-side .wrap-wide { padding-left: var(--gutter); padding-right: var(--gutter); }
}

/* Aktionen als Karten */
.ak-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 16px; align-items: start; margin-bottom: 14px !important; }
.ak-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; box-shadow: 0 1px 3px #1a17160a; display: flex; flex-direction: column; transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.ak-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -16px #1a171640; }
.ak-card.is-saved { border-color: var(--olive); }
.ak-media { display: grid; gap: 2px; aspect-ratio: 16 / 9; background: var(--stone); overflow: hidden; }
.ak-media img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 0; }
.ak-n2 { grid-template-columns: 1fr 1fr; }
.ak-n3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.ak-n3 img:first-child { grid-row: 1 / 3; }
.ak-n4 { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
.ak-n4 img:first-child { grid-row: 1 / 3; }
.ak-n4 img:last-child { grid-column: 2 / 4; }
.ak-media-empty { place-items: center; color: var(--grey); font-size: .8125rem; background: repeating-linear-gradient(135deg, var(--stone) 0 12px, var(--cream) 12px 24px); }
.ak-body { padding: 14px 16px 14px; display: grid; gap: 10px; }
.ak-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ak-head h3 { font-size: 1.125rem; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.ak-live { font-size: .75rem; font-weight: 600; color: var(--ink-70); white-space: nowrap; }
.ak-meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .75rem; }
.ak-meta code { font: 700 .6875rem var(--font-body); letter-spacing: .06em; background: var(--stone); color: var(--ink); padding: .15rem .45rem; border-radius: 6px; }
.ak-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding-top: 10px; border-top: 1px dashed var(--line); }
.ak-kpis dt { font-size: .6875rem; color: var(--grey); }
.ak-kpis dd { margin: 2px 0 0; display: flex; align-items: center; gap: .35rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ak-share { height: 6px; background: var(--stone); border-radius: 99px; overflow: hidden; }
.ak-share span { display: block; height: 100%; background: var(--orange); border-radius: 99px; }
.ak-share-label { margin: -4px 0 0; font-size: .6875rem; color: var(--grey); }
.ak-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ak-muted { background: var(--surface); }
.ak-new {
  display: grid; place-items: center; align-content: center; gap: 6px; min-height: 260px; padding: 24px; text-align: center;
  border: 1.5px dashed #cfc5b6; border-radius: var(--r-card); background: transparent; color: var(--ink); font: inherit; cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.ak-new:hover { border-color: var(--orange); background: var(--orange-soft); }
.ak-new .muted { font-size: .8125rem; max-width: 220px; }
.ak-plus { width: 40px; height: 40px; border-radius: 99px; display: grid; place-items: center; background: var(--ink); color: var(--on-dark); font-size: 1.4rem; line-height: 1; }
.ak-foot-note { font-size: .8125rem; margin: 0 0 8px; }
.notice-ok { background: #e6efdc; color: var(--olive); }

/* Dialog (coss-Stil) */
dialog.sheet { border: 0; padding: 0; border-radius: 18px; width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 40px); background: var(--white); color: var(--ink-soft); box-shadow: 0 30px 80px -20px #0e0c0b66, 0 0 0 1px var(--line); }
dialog.sheet::backdrop { background: #0e0c0b73; backdrop-filter: blur(3px); }
dialog.sheet[open] { animation: sheet-in .22s var(--ease); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.sheet-form { display: flex; flex-direction: column; max-height: calc(100vh - 40px); margin: 0; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.sheet-head h2 { font-size: 1.0625rem; font-weight: 800; color: var(--ink); }
.sheet-x { width: 32px; height: 32px; border-radius: 99px; border: 0; background: var(--stone); color: var(--ink); font-size: 1.2rem; cursor: pointer; }
.sheet-x:hover { background: var(--line); }
.sheet-body { padding: 18px 20px; display: grid; gap: 14px; overflow-y: auto; }
.sheet-foot { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--surface); }
.sheet-gap { flex: 1; }
.field { display: grid; gap: 5px; }
.field-label { font-size: .8125rem; font-weight: 700; color: var(--ink); }
.field-help { font-size: .75rem; color: var(--grey); line-height: 1.4; }
.field input[type="text"], .field input[type="number"], .field textarea, .field select, .input {
  font: .9375rem/1.4 var(--font-body); color: var(--ink); background: var(--white); width: 100%; min-width: 0;
  border: 1px solid var(--line); border-radius: 10px; padding: .55rem .75rem; box-shadow: 0 1px 2px #1a17160a;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field textarea { resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus, .input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px #1a171614; }
@media (max-width: 640px) {
  .ak-kpis dd { font-size: .875rem; }
  dialog.sheet { width: 100vw; max-width: 100vw; max-height: 92vh; margin: auto 0 0; border-radius: 18px 18px 0 0; }
}

/* Einstellungen: eine Karte mit Bereichen */
.set-page { max-width: 1100px; }
.set-card { padding: 0; overflow: hidden; margin-bottom: 16px; }
.set-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; padding: 18px 22px 14px; border-bottom: 1px solid var(--line); }
.set-head h2 { font-size: 1.375rem; font-weight: 800; color: var(--ink); }
.set-head .eyebrow { margin: 0 0 2px; }
.set-tabs { margin-left: 0; }
.set-panel { padding: 20px 22px 6px; }
.set-panel[hidden] { display: none; }
.set-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 26px; }
.set-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.set-wide { grid-column: 1 / -1; }
.set-wide input[type="text"], .set-wide textarea { max-width: 760px; }
.set-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px; margin-top: 18px; border-top: 1px solid var(--line); background: var(--surface); position: sticky; bottom: 0; }
.set-foot .muted { font-size: .8125rem; }
.input-group { display: flex; align-items: stretch; max-width: 220px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); box-shadow: 0 1px 2px #1a17160a; overflow: hidden; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.input-group:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px #1a171614; }
.input-group input { flex: 1; min-width: 0; border: 0; padding: .5rem .7rem; font: 700 .9375rem var(--font-body); color: var(--ink); background: transparent; font-variant-numeric: tabular-nums; }
.input-group input:focus { outline: none; }
.input-unit { display: flex; align-items: center; padding: 0 .7rem; font-size: .75rem; font-weight: 600; color: var(--grey); background: var(--surface); border-left: 1px solid var(--line); white-space: nowrap; }
.field select { max-width: 260px; }
.switch-row { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; margin: 18px 0 4px; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); cursor: pointer; position: relative; }
.switch-row > span:last-child { display: grid; gap: 3px; }
.switch-row input { position: absolute; opacity: 0; pointer-events: none; }
.switch-row input:checked + .switch { background: var(--orange); }
.switch-row input:checked + .switch::after { transform: translateX(18px); }
.switch-row input:focus-visible + .switch { outline: 2px solid var(--orange); outline-offset: 2px; }
.set-info { display: grid; gap: 12px; padding-bottom: 14px; }
.set-info > div { display: grid; grid-template-columns: 180px 1fr; gap: 12px; align-items: baseline; padding-bottom: 12px; border-bottom: 1px dashed var(--line); }
.set-info code { background: var(--stone); padding: 0 .3em; border-radius: 4px; }
@media (max-width: 760px) {
  .set-grid, .set-grid-3 { grid-template-columns: 1fr; }
  .set-head, .set-panel, .set-foot { padding-left: 16px; padding-right: 16px; }
  .set-tabs { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .set-tabs a { justify-content: center; white-space: nowrap; padding-left: 4px; padding-right: 4px; font-size: .75rem; }
  .set-info > div { grid-template-columns: 1fr; gap: 2px; }
  .set-foot { position: static; }
}
.field .input-group input { border: 0; box-shadow: none; border-radius: 0; padding: .5rem .7rem; width: auto; flex: 1; }
.field .input-group input:focus { box-shadow: none; }

/* Upload-Link (Seite für Studios) */
.up { max-width: 520px; margin: 6vh auto 40px; padding: 28px 24px; display: grid; gap: 12px; text-align: center; justify-items: center; }
.up h1 { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; color: var(--ink); line-height: 1.15; }
.up .eyebrow { margin: 4px 0 0; }
.up > .muted { margin: 0; font-size: .9375rem; }
.up-drop { width: 100%; display: grid; justify-items: center; gap: 6px; padding: 30px 16px; margin-top: 8px; border: 1.5px dashed #cfc5b6; border-radius: 16px; cursor: pointer; background: var(--surface); transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.up-drop:hover, .up-drop.is-over { border-color: var(--orange); background: var(--orange-soft); }
.up-drop input { position: absolute; opacity: 0; pointer-events: none; width: 1px; }
.up-plus { width: 48px; height: 48px; border-radius: 99px; display: grid; place-items: center; background: var(--orange); color: var(--on-dark); font-size: 1.6rem; }
.up-list { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 4px; text-align: left; font-size: .8125rem; max-height: 40vh; overflow-y: auto; }
.up-list li { padding: 6px 10px; border-radius: 8px; background: var(--stone); color: var(--ink-70); }
.up-list li.ok { background: #e6efdc; color: var(--olive); }
.up-list li.err { background: #f7dedb; color: #8f2a22; }
.up-count { font-size: .8125rem; margin: 0; }
.set-upload { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 0 0 16px; margin-bottom: 14px; border-bottom: 1px solid var(--line); justify-items: start; }
.set-upload > div:first-child { display: grid; gap: 3px; }
.set-link { display: flex; gap: 8px; width: 100%; max-width: 760px; }
.set-link .input { font-size: .8125rem; }

/* Layout-Auswahl mit Skizzen, Download in der Großansicht */
.w-layouts { grid-column: 1 / -1; border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; }
.w-layouts legend { font-size: .75rem; font-weight: 600; color: var(--ink-70); margin-bottom: 4px; padding: 0; }
.w-layout { position: relative; display: grid; justify-items: center; gap: 2px; padding: 5px 2px 4px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; background: var(--white); transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.w-layout input { position: absolute; opacity: 0; pointer-events: none; }
.w-layout svg { border-radius: 4px; display: block; }
.w-layout span { font-size: .625rem; font-weight: 600; color: var(--ink-70); }
.w-layout:hover { border-color: var(--grey-soft); }
.w-layout:has(input:checked) { border-color: var(--orange); box-shadow: 0 0 0 2px var(--orange-soft); }
.w-layout:has(input:checked) span { color: var(--orange-deep); }
.w-layout:has(input:focus-visible) { outline: 2px solid var(--orange); outline-offset: 2px; }
.w-edit-row:has(.w-layouts) { grid-template-columns: 1fr; }
.w-dl { margin-left: 8px; font: 600 .75rem var(--font-body); color: var(--on-dark); background: var(--orange); border-radius: 999px; padding: .25rem .7rem; text-decoration: none; }
.w-dl:hover { background: var(--orange-deep); }
.w-formats a { font-weight: 700; color: var(--ink-70); background: var(--stone); padding: .15rem .5rem; border-radius: 999px; }

/* Mehrfachauswahl */
.w-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 12px; padding: 10px 14px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; }
.w-bulk-all { display: flex; align-items: center; gap: 8px; font-size: .875rem; font-weight: 600; color: var(--ink); cursor: pointer; }
.w-bulk-all input, .w-pick input { accent-color: var(--orange); width: 18px; height: 18px; }
.w-bulk-count { font-size: .8125rem; }
.w-bulk-gap { flex: 1; }
.w-card { position: relative; }
.w-pick { position: absolute; top: 8px; left: 8px; z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #fffdfae6; box-shadow: 0 2px 8px #0e0c0b33; cursor: pointer; }
.w-card:has([data-pick]:checked) { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-soft); }
.w-grid[data-pick-area] { user-select: none; }
.w-lasso { position: fixed; z-index: 50; border: 1.5px solid var(--orange); background: #c2531f1f; border-radius: 6px; pointer-events: none; }
@media (max-width: 640px) { .w-bulk-gap { display: none; } .w-bulk .btn { flex: 1 1 40%; } }

/* Werke filtern */
.w-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 6px; }
.w-filter-sep { font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); margin: 0 2px 0 10px; }
.w-chip { display: inline-flex; align-items: center; gap: 6px; font: 600 .8125rem var(--font-body); color: var(--ink-70); background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: .3rem .75rem; cursor: pointer; transition: all var(--t-fast) var(--ease); }
.w-chip span { font-size: .6875rem; color: var(--grey); font-variant-numeric: tabular-nums; }
.w-chip:hover { border-color: var(--grey-soft); color: var(--ink); }
.w-chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.w-chip.is-on span { color: var(--grey-soft); }
.w-einordnen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0; padding: 8px 12px; border-radius: 10px; background: var(--orange-soft); }
.w-einordnen .muted { font-size: .8125rem; color: var(--orange-deep); }
.w-werk[hidden] { display: none; }
.w-video { position: absolute; top: 6px; left: 6px; font: 700 .625rem var(--font-body); font-style: normal; color: #fff; background: #0e0c0bb3; border-radius: 6px; padding: 2px 6px; }
.w-werke-save { align-items: center; gap: 12px; }
.w-werke-save .muted { font-size: .8125rem; margin-right: auto; }
.w-werk img:not([src]) { visibility: hidden; }

/* ---------- Studio-Portal: Einladungen in den Einstellungen ---------- */
.set-portal { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 0 0 16px; margin-bottom: 14px; border-bottom: 1px solid var(--line); justify-items: start; }
.set-portal > div:first-child { display: grid; gap: 3px; }
.set-zugaenge { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; width: 100%; max-width: 760px; }
.set-zugaenge li { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.set-z-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.set-z-head strong { color: var(--ink); font-size: .875rem; word-break: break-all; }
.set-z-head .muted { font-size: .8125rem; }
.set-z-actions { display: flex; gap: 6px; margin-left: auto; }
.set-link .btn { flex: none; }
.set-alt { width: 100%; max-width: 760px; margin: 0 0 14px; font-size: .8125rem; }
.set-alt summary { cursor: pointer; color: var(--ink-70); margin-bottom: 8px; }
@media (max-width: 640px) { .set-link { flex-wrap: wrap; } .set-link .input { flex: 1 1 100%; } .set-z-actions { margin-left: 0; } }

/* ---------- Werkstatt: Neues vom Studio ---------- */
.w-neu { display: grid; gap: 10px; padding: 12px 16px; margin-bottom: 16px; border-color: var(--orange); background: var(--orange-soft); }
.w-neu form { margin: 0; }
.w-neu-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.w-neu-head strong { color: var(--ink); font-size: .9375rem; }
.w-neu-head .muted { font-size: .875rem; margin-right: auto; }
.w-notizen { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.w-notizen li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 8px 12px; border-radius: 10px; background: var(--white); }
.w-notizen p { margin: 0; color: var(--ink); font-size: .875rem; white-space: pre-line; }
.w-notizen .muted { font-size: .75rem; grid-column: 1; }
.w-notizen form { grid-column: 2; grid-row: 1 / span 2; }

/* ---------- Studio-Portal (portal.mforstudios.de) ---------- */
.pt-login { max-width: 400px; }
.pt-small { font-size: .8125rem; margin: 4px 0 0; }
.pt-readonly { color: var(--ink-70) !important; background: var(--stone) !important; }
.pt { max-width: 1040px; margin: 0 auto; padding: 20px 16px 40px; display: grid; gap: 16px; }
.pt-head { display: flex; align-items: center; gap: 12px; }
.pt-head img { border-radius: 10px; }
.pt-head div { margin-right: auto; display: grid; }
.pt-head .eyebrow { margin: 0; }
.pt-head strong { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: var(--ink); line-height: 1.15; }
.pt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.pt-card { padding: 20px; display: grid; gap: 10px; }
.pt-card h2 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: var(--ink); }
.pt-card h2 .muted { font-weight: 600; font-size: .9rem; margin-left: 4px; }
.pt-card > .muted { margin: 0; font-size: .875rem; }
.pt-card .up-drop { margin-top: 2px; }
.pt-note { display: grid; gap: 8px; justify-items: end; }
.pt-note textarea { width: 100%; font: .9375rem/1.45 var(--font-body); border: 1px solid var(--line); border-radius: 14px; padding: .7rem .9rem; background: var(--white); color: var(--ink); resize: vertical; }
.pt-note textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px #1a171614; }
.pt-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 300px; overflow-y: auto; }
.pt-notes li { padding: 8px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.pt-notes p { margin: 0 0 2px; font-size: .875rem; color: var(--ink); white-space: pre-line; }
.pt-notes .muted { font-size: .75rem; }
.pt-done { color: var(--olive); font-weight: 600; }
.pt-werke { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.pt-werke img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: var(--stone); }
@media (max-width: 760px) { .pt-grid { grid-template-columns: 1fr; } .pt { padding: 14px 12px 32px; gap: 12px; } .pt-card { padding: 16px; } }

/* ---------- Anmeldung (Hub und Studio-Portal): Markenfläche links, Formular rechts ---------- */
.auth { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--cream); }
.auth-brand { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 40px; background: var(--ink); color: var(--on-dark); overflow: hidden; }
.auth-brand::after { content: ''; position: absolute; right: -18%; bottom: -22%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #c2531f55, transparent 68%); pointer-events: none; }
.auth-brand img { width: 64px; height: 64px; border-radius: 14px; }
.auth-claim { margin: 0; max-width: 12ch; font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 3.4vw, 3.25rem); line-height: 1.05; letter-spacing: -.02em; }
.auth-mark { font-size: .75rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #f3efe999; }
.auth-main { align-self: center; justify-self: center; width: 100%; max-width: 380px; padding: 40px 24px; display: grid; gap: 0; text-align: left; }
.auth-logo { display: none; width: 64px; height: 64px; border-radius: 14px; margin-bottom: 24px; }
.auth-main .eyebrow { margin: 0 0 6px; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; }
.auth-main h1 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 1.75rem; line-height: 1.15; letter-spacing: -.01em; color: var(--ink); }
.auth-text { margin: 12px 0 0; color: var(--ink-70); font-size: .9375rem; line-height: 1.5; }
.auth-error { margin: 16px 0 0; padding: 10px 12px; border-radius: 10px; background: #f7dedb; color: #8f2a22; font-size: .875rem; font-weight: 600; }
.auth-form { display: grid; gap: 14px; margin-top: 24px; }
.auth-field { display: grid; gap: 6px; }
.auth-field span { font-size: .8125rem; font-weight: 600; color: var(--ink); }
.auth-field input { width: 100%; height: 44px; padding: 0 14px; font: 1rem var(--font-body); text-align: left; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 1px 2px #0e0c0b0d; transition: border-color .15s, box-shadow .15s; }
.auth-field input::placeholder { color: #a39b92; }
.auth-field input:hover { border-color: #cfc5b6; }
.auth-field input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px #c2531f26; }
.auth-field input[readonly] { background: var(--stone); color: var(--ink-70); }
.auth-submit { height: 44px; justify-content: center; margin-top: 6px; font-size: .9375rem; }
.auth-foot { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: .8125rem; color: var(--ink-70); line-height: 1.5; }
.auth-foot a { color: var(--orange); font-weight: 600; text-decoration: none; }
.auth-foot strong { color: var(--ink); font-weight: 600; }
@media (max-width: 820px) {
  .auth { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
  .auth-logo { display: block; }
  .auth-main { align-self: start; padding: 12vh 20px 32px; }
}
.wrap:has(> .auth) { max-width: none; padding: 0; }
.wrap-wide .auth section { margin-bottom: 0; }

/* ---------- Entwurfskarte: ruhiger und gleichmäßiger ---------- */
.w-card { border-radius: 16px; }
.w-media { border-bottom: 1px solid var(--line); }
.w-body { padding: 12px; gap: 10px; }
.w-tags { flex-wrap: nowrap; min-width: 0; gap: 6px; }
.w-tags .chip { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .6875rem; font-weight: 600; padding: .2rem .6rem; }
.w-formats { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 0; height: 24px; padding: 0 2px 0 8px; border-radius: 999px; background: var(--stone); color: var(--ink-70); font-size: .6875rem; }
.w-formats svg { margin-right: 2px; }
.w-formats a { background: none !important; padding: 0 .45rem !important; font-weight: 700; color: var(--ink-70); text-decoration: none; line-height: 24px; }
.w-formats a + a::before { content: '·'; margin: 0 .35rem 0 -.1rem; color: #a39b92; }
.w-formats a + a { padding-left: 0 !important; }
.w-formats a:hover { color: var(--orange-deep); }
.w-replaces { font-size: .75rem; }
.w-idee { font-size: .8125rem; line-height: 1.45; -webkit-line-clamp: 2; }
.w-pruefung { align-self: flex-start; padding: .3rem .6rem; border-radius: 8px; background: #f4e4d9; font-size: .6875rem; line-height: 1.35; }
.w-pruefung.is-ok { background: #e6efdc; }
.w-actions { gap: 8px; }
.w-actions-2 { display: grid; grid-template-columns: 1fr 1fr; }
.w-actions-2 .btn { width: 100%; justify-content: center; height: 36px; padding: 0 .6rem; font-size: .8125rem; }
.w-edit { margin-top: -2px; padding-top: 10px; border-top: 1px solid var(--line); }
.w-edit summary { list-style: none; display: flex; align-items: center; gap: 6px; font-size: .75rem; color: var(--ink-70); }
.w-edit summary::-webkit-details-marker { display: none; }
.w-edit summary::before { content: ''; width: 6px; height: 6px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(-45deg); transition: transform .15s; margin-right: 2px; }
.w-edit[open] summary::before { transform: rotate(45deg); }
.w-edit summary:hover { color: var(--ink); }
/* Auswahl-Häkchen klein in der Ecke; mit Maus erst beim Drüberfahren */
.w-pick { top: 8px; left: 8px; width: 26px; height: 26px; border-radius: 8px; background: #fffdfacc; box-shadow: 0 1px 4px #0e0c0b33; backdrop-filter: blur(4px); }
.w-pick input { width: 15px !important; height: 15px !important; }
@media (hover: hover) {
  .w-pick { opacity: 0; transition: opacity .15s; }
  .w-card:hover .w-pick, .w-pick:has(:checked), .w-grid:has([data-pick]:checked) .w-pick, .w-pick:focus-within { opacity: 1; }
}
@media (max-width: 640px) {
  .w-body { padding: 10px; gap: 8px; }
  .w-tags .chip:nth-child(n+2) { display: none; }
  .w-actions-2 .btn { height: 34px; font-size: .75rem; }
}
.auth-pw { position: relative; display: block; }
.auth-pw input { padding-right: 46px; }
.auth-eye { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: #8a8178; cursor: pointer; }
.auth-eye:hover { color: var(--ink); background: var(--stone); }
.auth-eye:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }
.auth-eye .eye-shut { display: none; }
.auth-eye[aria-pressed="true"] .eye-open { display: none; }
.auth-eye[aria-pressed="true"] .eye-shut { display: inline; }
.auth-field input::-ms-reveal { display: none; }

/* ---------- Studio-Portal: Kopf, Hinweise, Vorlagen, Anzeigen ---------- */
.pt-hero { position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px 20px; flex-wrap: wrap; padding: 22px 24px; border-radius: 20px; background: var(--ink); color: var(--on-dark); }
.pt-hero::after { content: ''; position: absolute; right: -8%; top: -60%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #c2531f4d, transparent 68%); pointer-events: none; }
.pt-hero img { width: 52px; height: 52px; border-radius: 12px; flex: none; }
.pt-hero-text { display: grid; gap: 2px; margin-right: auto; }
.pt-hero .eyebrow { margin: 0; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; }
.pt-hero h1 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; line-height: 1.1; color: var(--on-dark); }
.pt-claim { margin: 2px 0 0; font-size: .875rem; color: #f3efe9b3; }
.pt-stats { position: relative; z-index: 1; display: flex; gap: 8px; }
.pt-stats span { padding: 6px 12px; border-radius: 999px; background: #ffffff12; font-size: .8125rem; color: #f3efe9cc; white-space: nowrap; }
.pt-stats strong { color: var(--on-dark); margin-right: 3px; }
.pt-logout { position: relative; z-index: 1; text-decoration: none; }
.pt-regeln { list-style: none; margin: 0; padding: 10px 12px; display: grid; gap: 4px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: .8125rem; color: var(--ink-70); }
.pt-regeln strong { color: var(--ink); font-weight: 600; }
.pt-vorlagen { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: -2px; }
.pt-vorlagen-label { font-size: .75rem; font-weight: 600; color: var(--grey); margin-right: 2px; }
.pt-vorlage { font: 600 .75rem var(--font-body); padding: .25rem .65rem; border-radius: 999px; border: 1px solid var(--line); background: var(--white); color: var(--ink-70); cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.pt-vorlage:hover { border-color: var(--orange); color: var(--orange-deep); background: var(--orange-soft); }
.pt-anzeigen { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pt-anzeigen img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; background: var(--stone); }
@media (max-width: 760px) {
  .pt-hero { padding: 18px; gap: 12px; }
  .pt-hero h1 { font-size: 1.35rem; }
  .pt-stats { order: 3; width: 100%; }
  .pt-logout { position: absolute; top: 16px; right: 16px; }
}
.wrap-wide .pt section { margin-bottom: 0; }

.pt-tipps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; font-size: .75rem; color: var(--ink-70); }
.pt-tipps li { display: flex; gap: 6px; align-items: baseline; line-height: 1.35; }
.pt-tipps li::before { content: ''; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--orange); transform: translateY(-2px); }
.pt-vorlage::before { content: '+ '; color: var(--orange); }
@media (max-width: 760px) { .pt-tipps { grid-template-columns: 1fr; } }
.set-erinnerung { display: grid; gap: 8px; justify-items: start; padding: 0 0 16px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }

/* Karte: Meta als Textzeile, Note kompakt, Fuß mit Bearbeiten und Download */
.w-meta { margin: 0; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-pruefung-box { font-size: .75rem; color: var(--ink-70); }
.w-pruefung-box summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--grey); font-weight: 600; }
.w-pruefung-box summary::-webkit-details-marker { display: none; }
.w-pruefung-box summary:hover { color: var(--ink); }
.w-pruefung-box p { margin: 6px 0 0; line-height: 1.45; }
.w-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.w-foot .w-edit { margin: 0; padding: 0; border: 0; flex: 1 1 auto; }
.w-foot .w-edit[open] { order: 2; flex-basis: 100%; }
.w-foot .w-formats { margin-left: auto; }
.w-foot:not(:has(.w-edit)) .w-formats { margin-left: 0; }

.w-chat { display: grid; gap: 6px; margin-top: 8px; }
.w-chat label { display: grid; gap: 4px; font-size: .75rem; font-weight: 600; color: var(--ink); }
.w-chat textarea { font: .8125rem/1.4 var(--font-body); border: 1px solid var(--line); border-radius: 10px; padding: .5rem .65rem; background: var(--white); color: var(--ink); resize: vertical; }
.w-chat textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px #c2531f1f; }
.w-chat .btn { justify-self: start; }
.w-chat-oder { margin: 10px 0 0; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); }
.pt-grid-1 { grid-template-columns: 1fr; }

/* ---------- Gestaltungsraum (Bearbeiten-Fenster) ---------- */
.w-edit-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: 600 .75rem var(--font-body); color: var(--ink-70); cursor: pointer; }
.w-edit-btn::before { content: ''; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.w-edit-btn:hover { color: var(--orange-deep); }

.gr { width: min(1180px, 96vw); height: min(820px, 94vh); max-width: none; max-height: none; padding: 0; border: 0; border-radius: 20px; background: var(--cream); color: var(--ink); box-shadow: 0 30px 80px #0e0c0b59; overflow: hidden; }
.gr::backdrop { background: #0e0c0bb3; backdrop-filter: blur(3px); }
.gr-shell { display: grid; grid-template-rows: auto 1fr; height: 100%; }
.gr-head { display: flex; align-items: center; gap: 16px; padding: 14px 18px; background: var(--ink); color: var(--on-dark); }
.gr-head .eyebrow { margin: 0; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; }
.gr-head h2 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: var(--on-dark); max-width: 36ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gr-head > div:first-child { margin-right: auto; min-width: 0; }
.gr-format { background: #ffffff14; border-radius: 999px; padding: 3px; display: flex; gap: 2px; }
.gr-format button { border: 0; background: none; color: #f3efe9b3; font: 600 .75rem var(--font-body); padding: .4rem .8rem; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.gr-format button.is-active { background: var(--on-dark); color: var(--ink); }
.gr-close { width: 36px; height: 36px; border-radius: 999px; border: 0; background: #ffffff1a; color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; flex: none; }
.gr-body { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr); min-height: 0; }
.gr-preview { display: grid; grid-template-rows: 1fr auto; gap: 8px; padding: 18px; min-height: 0; background: #e9e3da; }
.gr-stage { position: relative; display: grid; place-items: center; min-height: 0; }
.gr-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 24px #0e0c0b33); }
.gr-busy { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; background: #f3efe9c7; border-radius: 12px; font-weight: 700; font-size: .875rem; color: var(--ink); }
.gr-busy[hidden] { display: none; }
.gr-busy span { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--orange); animation: gr-spin .8s linear infinite; }
@keyframes gr-spin { to { transform: rotate(360deg); } }
.gr-dl { margin: 0; display: flex; justify-content: center; gap: 14px; font-size: .8125rem; font-weight: 700; }
.gr-dl a { color: var(--ink-70); text-decoration: none; }
.gr-dl a:hover { color: var(--orange-deep); }
.gr-panel { display: flex; flex-direction: column; min-height: 0; background: var(--white); border-left: 1px solid var(--line); }
.gr-tabs { display: flex; gap: 2px; padding: 10px 12px 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
.gr-tabs button { border: 0; background: none; padding: .6rem .75rem; font: 600 .8125rem var(--font-body); color: var(--grey); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap; }
.gr-tabs button.is-active { color: var(--ink); border-bottom-color: var(--orange); }
.gr-form { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.gr-chat:not([hidden]) { flex: 1; }
.gr-chat:not([hidden]) ~ .gr-form { flex: 0; }
.gr-form .gr-pane { flex: 1; }
.gr-pane { padding: 16px; overflow-y: auto; display: grid; gap: 12px; align-content: start; min-height: 0; }
.gr-pane[hidden] { display: none; }
.gr-pane label { display: grid; gap: 5px; font-size: .75rem; font-weight: 600; color: var(--ink); }
.gr-pane input[type=text], .gr-pane select, .gr-ask textarea { width: 100%; font: .875rem var(--font-body); border: 1px solid var(--line); border-radius: 10px; padding: .55rem .7rem; background: var(--white); color: var(--ink); }
.gr-pane input[type=text]:focus, .gr-pane select:focus, .gr-ask textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px #c2531f1f; }
.gr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gr-colors { grid-template-columns: repeat(3, 1fr); }
.gr-colors input[type=color] { width: 100%; height: 38px; border: 1px solid var(--line); border-radius: 10px; padding: 3px; background: var(--white); cursor: pointer; }
.gr-layouts { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 6px; border: 0; padding: 0; margin: 0; }
.gr-layouts legend { font-size: .75rem; font-weight: 600; margin-bottom: 6px; }
.gr-slider span { display: grid; grid-template-columns: 1fr 44px; align-items: center; gap: 10px; }
.gr-slider input[type=range] { accent-color: var(--orange); width: 100%; }
.gr-slider output { font: 700 .75rem var(--font-body); color: var(--ink-70); text-align: right; }
.gr-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--surface); }
.gr-foot .muted { font-size: .75rem; }
.gr-status { margin: 0; padding: 0 16px 10px; font-size: .75rem; font-weight: 600; color: var(--olive); min-height: 0; }
.gr-status:empty { display: none; }
.gr-chat { display: flex; flex-direction: column; gap: 10px; }
.gr-chat .gr-msgs { flex: 1; }
.gr-msgs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 120px; }
.gr-msg { max-width: 88%; padding: .6rem .8rem; border-radius: 14px; font-size: .8125rem; line-height: 1.45; white-space: pre-line; }
.gr-msg-ai { align-self: flex-start; background: var(--stone); color: var(--ink); border-bottom-left-radius: 4px; }
.gr-msg-du { align-self: flex-end; background: var(--orange); color: #fff; border-bottom-right-radius: 4px; }
.gr-msg.is-wait { color: var(--grey); font-style: italic; }
.gr-msg.is-err { background: #f7dedb; color: #8f2a22; }
.gr-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.gr-quick button { font: 600 .72rem var(--font-body); padding: .3rem .65rem; border-radius: 999px; border: 1px solid var(--line); background: var(--white); color: var(--ink-70); cursor: pointer; }
.gr-quick button:hover { border-color: var(--orange); color: var(--orange-deep); background: var(--orange-soft); }
.gr-ask { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.gr-ask textarea { resize: none; }
@media (max-width: 820px) {
  .gr { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .gr-head { flex-wrap: wrap; padding: 10px 12px; gap: 8px; }
  .gr-format { order: 3; width: 100%; justify-content: stretch; }
  .gr-format button { flex: 1; }
  .gr-body { grid-template-columns: 1fr; grid-template-rows: 42% 1fr; }
  .gr-preview { padding: 10px; }
  .gr-panel { border-left: 0; border-top: 1px solid var(--line); }
}
/* Portal: Plus-Zeichen genau mittig */
.up-plus { font-size: 0; }
.up-plus::before, .up-plus::after { content: ''; position: absolute; width: 18px; height: 2.5px; border-radius: 2px; background: currentColor; }
.up-plus::after { transform: rotate(90deg); }
.up-plus { position: relative; }
/* Portal auf dem Handy: mehr Fläche nutzen, größer und griffiger */
@media (max-width: 760px) {
  .pt { padding: 12px 12px 32px; gap: 12px; }
  .pt-hero { padding: 20px 18px; border-radius: 22px; }
  .pt-hero img { width: 56px; height: 56px; }
  .pt-hero h1 { font-size: 1.6rem; }
  .pt-claim { font-size: .9375rem; }
  .pt-logout { top: 18px; right: 18px; }
  .pt-card { padding: 20px 18px; gap: 14px; border-radius: 22px; }
  .pt-card h2 { font-size: 1.4rem; }
  .pt-card > .muted { font-size: 1rem; line-height: 1.5; }
  .pt-card .up-drop { padding: 44px 16px; border-radius: 20px; }
  .pt-card .up-drop strong { font-size: 1.15rem; }
  .pt-card .up-drop .muted { font-size: 1rem; }
  .up-plus { width: 64px; height: 64px; }
  .up-plus::before, .up-plus::after { width: 24px; height: 3px; }
  .pt-tipps { font-size: .9375rem; gap: 10px; }
  .up-list { font-size: .9375rem; }
  .up-list li { padding: 10px 12px; border-radius: 10px; }
  .pt-werke { grid-template-columns: repeat(3, 1fr); gap: 6px; }
}
.pt-werk { position: relative; display: block; }
.pt-werk.is-video::after { content: '▶'; position: absolute; right: 6px; bottom: 6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .6rem; color: #fff; background: #0e0c0bb3; }

/* Portal: Kopf auf dem Handy – Abmelden als kleines Symbol oben rechts */
.pt-logout { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: .5rem 1rem; border-radius: 999px; border: 1px solid #ffffff33; color: var(--on-dark); font: 600 .875rem var(--font-body); text-decoration: none; }
.pt-logout:hover { background: #ffffff12; }
@media (max-width: 760px) {
  .pt-hero { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 14px; padding: 18px; }
  .pt-hero img { width: 48px; height: 48px; }
  .pt-hero-text { grid-column: 1 / -1; grid-row: 2; }
  .pt-hero h1 { font-size: 1.5rem; }
  .pt-logout { position: static; grid-column: 3; grid-row: 1; width: 40px; height: 40px; padding: 0; justify-content: center; }
  .pt-logout span { display: none; }
}
/* Upload-Liste: Vorschau, Name, Status, Fortschritt */
.up-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.up-items:empty { display: none; }
.up-item { display: grid; grid-template-columns: 52px minmax(0, 1fr) 28px; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border-radius: 14px; border: 1px solid var(--line); background: var(--white); }
.up-thumb { width: 52px; height: 52px; border-radius: 10px; overflow: hidden; background: var(--stone); display: grid; place-items: center; }
.up-thumb img { width: 100%; height: 100%; object-fit: cover; }
.up-thumb.is-video:empty::before, .up-thumb.is-video:not(:has(img))::before { content: '▶'; font-size: .8rem; color: var(--ink-70); }
.up-info { display: grid; gap: 3px; min-width: 0; }
.up-name { font-size: .875rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-state { font-size: .75rem; color: var(--grey); }
.up-bar { height: 4px; border-radius: 4px; background: var(--stone); overflow: hidden; }
.up-bar i { display: block; height: 100%; width: 8%; background: var(--orange); border-radius: 4px; transition: width .3s; }
.up-item.is-busy .up-bar i { animation: up-puls 1.4s ease-in-out infinite alternate; }
@keyframes up-puls { from { opacity: .55; } to { opacity: 1; } }
.up-item:not(.is-busy) .up-bar { display: none; }
.up-icon { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 800; }
.up-item.is-ok { border-color: #cfe0bf; background: #f3f8ee; }
.up-item.is-ok .up-state { color: var(--olive); font-weight: 600; }
.up-item.is-ok .up-icon { background: var(--olive); color: #fff; }
.up-item.is-ok .up-icon::before { content: '✓'; }
.up-item.is-err { border-color: #efc4be; background: #fcf1ef; }
.up-item.is-err .up-state { color: #8f2a22; font-weight: 600; }
.up-item.is-err .up-icon { background: #c0392b; color: #fff; }
.up-item.is-err .up-icon::before { content: '!'; }
.pt-werk-leer { display: grid; place-items: center; aspect-ratio: 1; border-radius: 8px; background: linear-gradient(160deg, #2a2420, #0e0c0b); color: #f3efe9cc; padding: 8px; }
.pt-werk-leer span { font-size: .625rem; line-height: 1.3; text-align: center; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 18px; }
.pt-werk-leer::before { content: '▶'; position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #ffffff1f; font-size: .7rem; }
.pt-werk.is-video:has(.pt-werk-leer)::after { display: none; }
.pt-werk-leer { position: relative; }
/* Hub: Video ohne Vorschaubild als dunkle Kachel statt kaputtem Bild */
.w-werk-leer { position: absolute; inset: 0; display: grid; place-items: center; padding: 10px; background: linear-gradient(160deg, #2a2420, #0e0c0b); color: #f3efe9cc; }
.w-werk-leer::before { content: '▶'; position: absolute; top: 38%; left: 50%; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #ffffff1f; font-size: .75rem; }
.w-werk-leer span { margin-top: 44px; font-size: .625rem; line-height: 1.3; text-align: center; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Werke ansehen: Filter in Zeilen, Kacheln mit eigenem Haken */
.w-filter { display: grid; gap: 6px; margin: 12px 0 8px; padding: 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.w-filter-head { display: flex; align-items: center; gap: 10px; padding-bottom: 6px; border-bottom: 1px dashed var(--line); margin-bottom: 2px; }
.w-filter-head .muted { font-size: .75rem; }
.w-frow { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: start; gap: 10px; }
.w-flabel { padding-top: 7px; font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); }
.w-fchips { display: flex; flex-wrap: wrap; gap: 5px; }
.w-chip { padding: .25rem .65rem; font-size: .75rem; }
.w-werke-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.w-werk { cursor: default; border-radius: 12px; }
.w-werk-open { position: absolute; inset: 0; padding: 0; border: 0; background: none; cursor: zoom-in; display: block; }
.w-werk-open img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ease); }
.w-werk:hover .w-werk-open img { transform: scale(1.04); }
.w-werk-use { position: absolute; top: 6px; left: 6px; z-index: 2; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: #fffdfae6; box-shadow: 0 1px 4px #0e0c0b33; cursor: pointer; }
.w-werk-use input { position: static; margin: 0; width: 14px; height: 14px; accent-color: var(--orange); }
.w-werk > .w-werk-tag { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 14px 8px 5px; font-size: .625rem; font-weight: 700; letter-spacing: .02em; color: #fff; background: linear-gradient(transparent, #0e0c0bcc); pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-werk .w-werk-leer span, .w-werk .w-werk-open span { position: static; padding: 0; background: none; }
.w-werk .w-video { z-index: 2; }
.w-werke-save { align-items: center; justify-content: space-between; gap: 12px; padding-top: 6px; }
.w-werke-save .muted { font-size: .75rem; }
@media (max-width: 640px) { .w-frow { grid-template-columns: 1fr; gap: 4px; } .w-flabel { padding-top: 0; } .w-werke-grid { grid-template-columns: repeat(3, 1fr); } }

/* Werk-Ansicht (großes Fenster) */
.wd { width: min(1100px, 96vw); height: min(780px, 92vh); max-width: none; max-height: none; padding: 0; border: 0; border-radius: 20px; background: var(--white); box-shadow: 0 30px 80px #0e0c0b59; overflow: hidden; }
.wd::backdrop { background: #0e0c0bb3; backdrop-filter: blur(3px); }
.wd-shell { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); height: 100%; }
.wd-bild { position: relative; background: #141210; display: grid; place-items: center; min-height: 0; }
.wd-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.wd-leer { color: #f3efe9b3; font-weight: 700; }
.wd-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: #ffffff26; color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; backdrop-filter: blur(4px); }
.wd-nav:hover:not(:disabled) { background: #ffffff40; }
.wd-nav:disabled { opacity: .25; cursor: default; }
.wd-prev { left: 14px; } .wd-next { right: 14px; }
.wd-panel { display: flex; flex-direction: column; gap: 14px; padding: 20px; overflow-y: auto; min-height: 0; }
.wd-panel header { position: relative; padding-right: 44px; }
.wd-panel header .eyebrow { margin: 0 0 2px; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.wd-panel h2 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: var(--ink); word-break: break-all; }
.wd-close { position: absolute; top: -4px; right: 0; background: var(--stone); color: var(--ink); }
.wd-gruppe { border: 0; padding: 0; margin: 0; }
.wd-gruppe legend { font-size: .75rem; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.wd-gruppe legend small { font-weight: 500; color: var(--grey); margin-left: 4px; }
.wd-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.wd-chips label { cursor: pointer; }
.wd-chips input { position: absolute; opacity: 0; pointer-events: none; }
.wd-chips span { display: inline-block; padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--line); background: var(--white); font: 600 .75rem var(--font-body); color: var(--ink-70); transition: all .12s; }
.wd-chips label:hover span { border-color: var(--grey-soft, #cfc5b6); color: var(--ink); }
.wd-chips input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.wd-chips input[type=checkbox]:checked + span { background: var(--orange-soft); border-color: var(--orange); color: var(--orange-deep); }
.wd-chips input:disabled + span { opacity: .35; cursor: default; }
.wd-chips input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 1px; }
.wd-panel footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); position: sticky; bottom: -20px; background: var(--white); padding-bottom: 4px; }
.wd-panel footer .muted { font-size: .8125rem; font-weight: 600; color: var(--olive); }
@media (max-width: 820px) {
  .wd { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .wd-shell { grid-template-columns: 1fr; grid-template-rows: 44% 1fr; }
}

/* Video ohne Vorschaubild (Portal und Hub): Play mittig, Name unten in einer Zeile */
.pt-werk-leer, .w-werk-leer { position: relative; display: block; aspect-ratio: 1; padding: 0; border-radius: 10px; overflow: hidden;
  background: radial-gradient(120% 90% at 30% 20%, #3a2a22 0%, #1a1513 55%, #0e0c0b 100%); color: #f3efe9; }
.w-werk-leer { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.pt-werk-leer::before, .w-werk-leer::before { content: ''; position: absolute; top: 44%; left: 50%; transform: translate(-50%, -50%); width: 42px; height: 42px; border-radius: 50%;
  background: #ffffff1f; box-shadow: inset 0 0 0 1px #ffffff33; backdrop-filter: blur(2px); font-size: 0; }
.pt-werk-leer::after, .w-werk-leer::after { content: ''; position: absolute; top: 44%; left: 50%; transform: translate(-35%, -50%); width: 0; height: 0;
  border-left: 12px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.pt-werk-leer span, .w-werk .w-werk-leer span { position: absolute !important; left: 0; right: 0; bottom: 0; margin: 0; padding: 18px 9px 7px !important;
  display: block; font-size: .625rem; font-weight: 600; line-height: 1.2; text-align: left; color: #f3efe9d9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  word-break: normal; -webkit-line-clamp: unset; background: linear-gradient(transparent, #0e0c0bd9) !important; }
.pt-werk-leer span::before, .w-werk-leer span::before { content: 'VIDEO'; display: block; margin-bottom: 2px; font-size: .5625rem; font-weight: 800; letter-spacing: .14em; color: var(--orange); }
@media (max-width: 760px) { .pt-werk-leer::before { width: 46px; height: 46px; } .pt-werk-leer span { font-size: .6875rem; } }
.w-werk:has(.w-werk-leer) .w-werk-tag, .w-werk:has(.w-werk-leer) .w-video { display: none; }
.w-werk .w-werk-open .w-werk-leer { position: absolute; inset: 0; background: radial-gradient(120% 90% at 30% 20%, #3a2a22 0%, #1a1513 55%, #0e0c0b 100%); }
/* Video-Kachel: kleines Play-Dreieck oben links, ohne Kreis */
.pt-werk-leer::before, .w-werk-leer::before { display: none; }
.pt-werk-leer::after, .w-werk-leer::after { top: 12px; left: 12px; transform: none; border-left-width: 9px; border-top-width: 6px; border-bottom-width: 6px; opacity: .9; }
@media (max-width: 760px) { .pt-werk-leer::after { top: 12px; left: 12px; } }

/* Gestaltungsraum: Schriften und Knöpfe als Vorschau-Karten */
.gr-fonts, .gr-knoepfe { border: 0; padding: 0; margin: 0; }
.gr-fonts legend, .gr-knoepfe legend { font-size: .75rem; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.gr-fonts legend small { font-weight: 500; color: var(--grey); margin-left: 4px; }
.gr-fonts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.gr-fonts legend { grid-column: 1 / -1; }
.gr-font, .gr-knopf { position: relative; cursor: pointer; display: grid !important; gap: 6px !important; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--white); transition: border-color .15s, box-shadow .15s, transform .15s; }
.gr-font:hover, .gr-knopf:hover { border-color: #cfc5b6; transform: translateY(-1px); }
.gr-font input, .gr-knopf input { position: absolute; opacity: 0; pointer-events: none; }
.gr-font:has(input:checked), .gr-knopf:has(input:checked) { border-color: var(--orange); box-shadow: 0 0 0 3px #c2531f26; }
.gr-font-probe { display: block; min-height: 48px; font-size: 1.35rem; line-height: 1.05; color: var(--ink); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.gr-font small, .gr-knopf small { font-size: .6875rem; font-weight: 600; color: var(--grey); }
.gr-knoepfe { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.gr-knoepfe legend { grid-column: 1 / -1; }
.gr-knopf { justify-items: center; padding: 14px 8px 10px; background: var(--surface); }
.gr-kp { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; font: 800 .72rem var(--font-body); white-space: nowrap; }
.gr-kp-t { font-weight: 800; }
.gr-kp-pill { background: var(--orange); color: #fff; padding: .45rem .9rem; border-radius: 999px; }
.gr-kp-kontur { border: 2px solid var(--orange); color: var(--ink); padding: .38rem .85rem; border-radius: 999px; }
.gr-kp-linie .gr-kp-t { border-bottom: 2px solid var(--orange); padding-bottom: 2px; color: var(--ink); }
.gr-kp-pfeil { background: var(--orange); color: #fff; padding: .25rem .25rem .25rem .85rem; border-radius: 999px; }
.gr-kp-pfeil i { font-style: normal; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--orange); }
.gr-kp-stempel { border: 2px solid var(--orange); color: var(--orange); padding: .35rem .7rem; border-radius: 4px; transform: rotate(-3deg); letter-spacing: .12em; font-size: .62rem; }
.gr-kp-block { background: var(--orange); color: #fff; padding: .45rem .85rem; border-radius: 2px; box-shadow: 4px 4px 0 var(--ink); }
.gr-kp-marker .gr-kp-t { background: linear-gradient(176deg, transparent 34%, #e9b48f 34%, #e9b48f 94%, transparent 94%); padding: 0 4px; color: var(--ink); }
.gr-layouts { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }
/* Karte: drei Knöpfe nebeneinander, darunter Feed/Story */
.w-actions-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.w-actions-3 form { margin: 0; }
.w-actions-3 .btn, .w-actions-3 .w-edit-btn { width: 100%; height: 34px; padding: 0 .4rem; justify-content: center; font-size: .75rem; gap: 5px; }
.w-actions .w-edit-btn { display: inline-flex; align-items: center; color: var(--ink); border: 1px solid var(--line); background: var(--white); }
.w-actions .w-edit-btn::before { width: 12px; height: 12px; }
.w-actions .w-edit-btn:hover { border-color: var(--ink); color: var(--ink); }
.w-dls { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.w-dl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; border-radius: 999px; background: var(--stone); color: var(--ink); font: 700 .8125rem var(--font-body); text-decoration: none; transition: background .15s; }
.w-dl-btn:hover { background: #e4ddd2; }
/* Gestaltungsraum nur mit Chat: Verlauf füllt die rechte Seite */
.gr-panel .gr-chat { flex: 1; padding: 18px; }
.gr-msgs { padding-right: 4px; }
.gr-msg { font-size: .875rem; }
.gr-msg-ai:first-child { background: var(--surface); border: 1px solid var(--line); }
.gr-ask textarea { min-height: 52px; font-size: .9375rem; }
.gr-tabs, .gr-tabs button { border-bottom: 0 !important; }
.gr-tabs button.is-active { color: var(--orange); }