/* Filmfest Bern Workspace – ein einziges Stylesheet (Design «D · Eierschale»).
   Regeln: Eierschale + Weiss + Tinte, Akzente nur in erdigen Rottönen, NIE Orange.
   Hover = Ziegelrot · Knöpfe brechen nie um · Auswahl-Pfeile selbst gezeichnet.
   Icons: Phosphor auf runden «Plaketten» in der Farbe des Bereichs, aktiv = schwarz.
   Schriften: Anybody (Anmeldung, Claims) · Archivo (fette Stellen, Titel) · Inter (Text) · JetBrains Mono (Daten). */
:root {
  --bg: #F6F1E3; --panel: #FFFDF7; --ink: #141414; --muted: #6B6458; --line: #E3DAC4;
  --brick: #9B2C2C; --oxblood: #6E2222; --rosewood: #B9645C; --clay: #EFDDD7; --clay2: #E9D3CC;
  --live: #2E9E5B;
  --accent: var(--brick);
  --f-display: "Anybody", ui-sans-serif, system-ui, sans-serif;
  --f-head: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --f-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --radius: 16px; --bar: 72px;
  color-scheme: light;
  font-family: var(--f-body);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-size: 15px; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
a:hover { color: var(--accent); }
h1, h2, h3 { margin: 0 0 .5em; line-height: 1.1; font-family: var(--f-head); font-weight: 700; letter-spacing: -0.02em; }
h1 { font-size: 52px; letter-spacing: -0.03em; } h2 { font-size: 24px; } h3 { font-size: 17px; }
p { line-height: 1.55; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.mono { font-family: var(--f-mono); }
.eyebrow { font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* ---------- Plaketten (Icons) */
.plaque { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: var(--s, 30px); height: var(--s, 30px); border-radius: 50%; background: var(--c, var(--brick)); color: var(--panel); }
.plaque i { font-size: calc(var(--s, 30px) * .5); line-height: 1; }
.plaque.on { background: var(--ink); }

/* ---------- Knöpfe, Felder */
button, .btn {
  font: inherit; font-weight: 500; white-space: nowrap; cursor: pointer; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  padding: 9px 16px; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; line-height: 1.2;
}
button:hover, .btn:hover { border-color: var(--accent); color: var(--accent); }
button.primary, .btn.primary { background: var(--ink); border-color: var(--ink); color: var(--panel); font-weight: 600; }
button.primary:hover, .btn.primary:hover { background: var(--oxblood); border-color: var(--oxblood); color: var(--panel); }
button.accent, .btn.accent { background: var(--brick); border-color: var(--brick); color: var(--panel); font-weight: 600; }
button.accent:hover, .btn.accent:hover { background: var(--oxblood); border-color: var(--oxblood); color: var(--panel); }
button.ghost, .btn.ghost { border-color: transparent; background: transparent; }
button.ghost:hover, .btn.ghost:hover { border-color: transparent; color: var(--accent); }
button.danger:hover { border-color: var(--brick); color: var(--brick); }
button.big, .btn.big { padding: 15px 26px; font-size: 16px; }
button:disabled { opacity: .4; cursor: default; }
button i, .btn i { font-size: 16px; }
.iconbtn { width: 36px; height: 36px; padding: 0; justify-content: center; }
input, textarea, select {
  font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 11px 14px; width: 100%;
}
input:hover, textarea:hover, select:hover { border-color: var(--rosewood); }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--brick); outline-offset: -1px; border-color: var(--brick); }
select {
  appearance: none; -webkit-appearance: none; padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236B6458' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center;
}
select:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%239B2C2C' stroke-width='1.6'/%3E%3C/svg%3E");
}
input[type=search] { border-radius: 999px; padding-left: 40px;
  background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 256 256'%3E%3Cpath fill='%236B6458' d='M232.49 215.51 185 168a92.12 92.12 0 1 0-17 17l47.53 47.54a12 12 0 0 0 17-17ZM44 112a68 68 0 1 1 68 68 68.07 68.07 0 0 1-68-68Z'/%3E%3C/svg%3E") no-repeat 15px center; }
label { display: block; font-size: 13px; font-weight: 500; color: var(--muted); margin: 12px 0 6px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.stack > * + * { margin-top: 14px; }
.spread { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }

/* ---------- Gerüst */
.bar {
  position: sticky; top: 0; z-index: 5; height: var(--bar); display: flex; align-items: center; gap: 20px;
  padding: 0 40px; background: var(--bg); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; white-space: nowrap; }
.brand img { height: 38px; width: auto; display: block; }
.brand .word { font-family: var(--f-head); font-weight: 700; font-size: 19px; letter-spacing: -0.01em; }
.brand:hover { color: var(--ink); }
.menu { display: flex; gap: 4px; flex: 1 1 auto; justify-content: center; overflow-x: auto; scrollbar-width: none; }
.menu::-webkit-scrollbar { display: none; }
.menu a { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; text-decoration: none;
  padding: 6px 14px 6px 6px; border-radius: 999px; color: var(--muted); font-size: 14px; }
.menu a:hover { color: var(--brick); }
.menu a.on { background: var(--clay); color: var(--ink); font-weight: 600; }
.bar-right { display: flex; align-items: center; gap: 12px; }
.bar-right a { text-decoration: none; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--panel); display: inline-flex;
  align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex: 0 0 auto; border: 0; padding: 0; }
.avatar:hover { background: var(--oxblood); color: var(--panel); }
.avatar.sm { width: 26px; height: 26px; font-size: 10px; }
.avatar.clay { background: var(--clay); color: var(--oxblood); }
.main { min-height: calc(100dvh - var(--bar)); }
.page { max-width: 1360px; margin: 0 auto; padding: 48px 40px 80px; }
.page.narrow { max-width: 820px; }
.module-host { height: calc(100dvh - var(--bar) - 41px); padding: 16px 16px 0; }
.module-frame { width: 100%; height: 100%; border: 1px solid var(--line); border-bottom: 0; border-radius: 14px 14px 0 0; display: block; background: #fff; }
.modbar { display: flex; align-items: center; gap: 12px; padding: 9px 40px; border-bottom: 1px solid var(--line); font-family: var(--f-mono); font-size: 11px; }
.modbar .name { font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.modbar .live { background: var(--ink); color: var(--panel); border-radius: 999px; padding: 2px 8px; font-weight: 600; }
.modbar .btn { font-family: var(--f-body); font-size: 12px; padding: 5px 12px; }
.demo-band { background: var(--clay); color: var(--oxblood); font-size: 13px; padding: 7px 40px; border-bottom: 1px solid var(--line); }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.cards { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--panel); font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; color: var(--ink); }
.chip.withp { padding-left: 6px; }
.chip .n { font-family: var(--f-mono); font-size: 12px; color: var(--muted); }
.chip:hover { border-color: var(--brick); color: var(--brick); }
.chip.on { background: var(--ink); border-color: var(--ink); color: var(--panel); }
.chip.on .n { color: var(--clay); }
.tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  background: var(--clay); color: var(--oxblood); white-space: nowrap; }
.tag.mono { font-family: var(--f-mono); font-weight: 500; }
.tag.plain { background: var(--panel); color: var(--muted); border: 1px solid var(--line); }
.tag.dark { background: var(--ink); color: var(--panel); }
.tag.red { background: var(--brick); color: var(--panel); }
.tag.live { background: var(--ink); color: var(--panel); font-family: var(--f-mono); }

table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
th, td { text-align: left; padding: 13px 18px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
tr:last-child td { border-bottom: 0; }
tr.hl td { background: #F7ECE8; }
td.actions { white-space: nowrap; text-align: right; }
td.actions > * + * { margin-left: 6px; }
.filecell { display: flex; align-items: center; gap: 12px; }
.empty { padding: 48px 16px; text-align: center; color: var(--muted); }
.notice { border: 1px solid var(--clay2); background: var(--clay); color: var(--oxblood); padding: 12px 16px; border-radius: 12px; }
.notice.bad { border-color: var(--brick); }
.drop { display: flex; align-items: center; gap: 16px; border: 1.5px dashed var(--rosewood); background: var(--clay); border-radius: var(--radius); padding: 20px 22px; cursor: pointer; }
.drop.over { border-style: solid; border-color: var(--brick); background: var(--clay2); }
.drop strong { display: block; }
code, pre { font-family: var(--f-mono); font-size: 12px; }
pre { background: var(--bg); border: 1px solid var(--line); padding: 12px; border-radius: 10px; overflow: auto; white-space: pre-wrap; word-break: break-all; }
.list { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.list .li { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-bottom: 1px solid var(--line); text-decoration: none; }
.list .li:last-child { border-bottom: 0; }
.list a.li:hover { background: #FBF6EA; color: var(--ink); }
.livedot { width: 8px; height: 8px; border-radius: 50%; background: var(--live); display: inline-block; }

/* ---------- Meetings */
.meet { display: grid; grid-template-columns: 1fr 400px; gap: 56px; align-items: start; }
.meet .date { font-family: var(--f-head); font-weight: 700; font-size: clamp(44px, 6vw, 84px); line-height: 1; letter-spacing: -0.035em; margin: 20px 0 0; }
.meet .time { color: var(--oxblood); }
.meet .title { font-family: var(--f-head); font-weight: 500; font-size: 28px; margin: 28px 0 6px; letter-spacing: -0.01em; }
.meet .agenda { color: var(--muted); font-size: 16px; margin: 0 0 28px; }
.heads { display: inline-flex; gap: 4px; }
.upnext .li { padding: 16px 0; background: transparent; border-bottom: 1px solid var(--line); }
.feed { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 56px; }
.feed .card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }

/* ---------- Screening */
.film .still { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: var(--oxblood); color: var(--clay); }
.film .still.v1 { background: var(--ink); } .film .still.v2 { background: var(--rosewood); }
.film .still .initial { position: absolute; left: 16px; bottom: 6px; font-family: var(--f-head); font-weight: 700; font-size: 64px; opacity: .22; line-height: 1; }
.film .still .prov { position: absolute; left: 12px; top: 12px; background: rgba(255,253,247,.92); color: var(--ink); }
.film .still .play { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,253,247,.94); color: var(--ink); display: flex; align-items: center; justify-content: center; font-size: 22px; border: 0; padding: 0; }
.film .still .play:hover { background: var(--panel); color: var(--brick); }
.film h3 { font-size: 20px; margin: 14px 0 3px; }
.film .meta { font-family: var(--f-mono); font-size: 11px; color: var(--muted); }

/* ---------- Einstellungen */
.settings { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 48px; align-items: start; }
.settings > * { min-width: 0; }
.meet > * { min-width: 0; }
.subnav { display: flex; flex-direction: column; gap: 4px; position: sticky; top: calc(var(--bar) + 24px); }
.subnav a { display: flex; align-items: center; gap: 12px; padding: 7px 12px 7px 7px; border-radius: 999px; text-decoration: none; color: var(--muted); white-space: nowrap; }
.subnav a:hover { color: var(--brick); }
.subnav a.on { background: var(--clay); color: var(--ink); font-weight: 600; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.steps .card { padding: 18px 20px; }
.steps .n { font-family: var(--f-mono); color: var(--brick); font-weight: 600; font-size: 13px; }

/* ---------- Anmelden */
.login { display: grid; grid-template-columns: 1fr minmax(380px, 44%); min-height: 100dvh; }
.login .form-side { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 48px 96px; }
.login .form { max-width: 440px; width: 100%; }
.login h1 { font-family: var(--f-display); font-weight: 800; font-stretch: 112%; font-size: 64px; letter-spacing: -0.02em; margin: 0 0 18px; white-space: nowrap; }
.login .lead { font-size: 17px; color: var(--muted); margin: 0 0 28px; }
.login .brand .word { font-family: var(--f-display); font-weight: 800; font-stretch: 112%; }
.login .art { background: var(--oxblood); color: var(--panel); display: flex; flex-direction: column; justify-content: space-between; padding: 48px 56px; }
.login .art .big { font-family: var(--f-display); font-style: italic; text-transform: uppercase; font-weight: 900; font-stretch: 118%; font-size: clamp(34px, 4.1vw, 64px); line-height: 1; letter-spacing: -0.02em; white-space: nowrap; }
.login .art .claim { font-family: var(--f-display); font-weight: 600; font-stretch: 110%; font-size: 22px; color: var(--clay); }
.code-boxes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.code-boxes input { text-align: center; font-family: var(--f-mono); font-size: 24px; font-weight: 600; padding: 14px 0; }
.help-line { font-size: 13px; color: var(--muted); }
.help-line a { color: var(--brick); font-weight: 600; }

/* ---------- Dialog, Player, Toast */
dialog { border: 1px solid var(--line); border-radius: 20px; padding: 0; background: var(--panel); color: var(--ink); width: min(560px, calc(100vw - 32px)); }
dialog::backdrop { background: rgba(20,20,20,.45); }
dialog .d-body { padding: 24px; max-height: 75vh; overflow: auto; }
dialog .d-foot { padding: 14px 24px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.player { position: fixed; inset: 0; z-index: 20; background: #0D0D0D; display: flex; flex-direction: column; }
.player .p-bar { display: flex; align-items: center; gap: 10px; padding: 12px 18px; color: var(--panel); flex-wrap: wrap; }
.player .p-bar strong { font-family: var(--f-head); font-size: 18px; }
.player .p-bar button, .player .p-bar .btn { background: transparent; color: var(--panel); border-color: #3a3a3a; }
.player .p-bar button:hover, .player .p-bar .btn:hover { color: var(--clay); border-color: var(--rosewood); }
.player > iframe, .player > video { flex: 1 1 auto; width: 100%; border: 0; background: #000; }
.player.preview { background: var(--bg); }
.player.preview .p-bar { color: var(--ink); background: var(--panel); border-bottom: 1px solid var(--line); }
.player.preview .p-bar button { color: var(--ink); border-color: var(--line); background: var(--panel); }
.player.preview .p-bar button.accent { background: var(--brick); border-color: var(--brick); color: var(--panel); }
.player.preview .p-bar button:hover { color: var(--brick); border-color: var(--brick); }
.player.preview .p-bar button.accent:hover { background: var(--oxblood); color: var(--panel); }
.player.preview .p-host { flex: 1 1 auto; min-height: 0; padding: 16px 16px 0; }
.player.preview .p-host iframe { width: 100%; height: 100%; border: 1px solid var(--line); border-bottom: 0; border-radius: 14px 14px 0 0; background: #fff; }
#toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: var(--ink); color: var(--panel); padding: 10px 18px; border-radius: 999px; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 50; white-space: nowrap; }
#toast.show { opacity: 1; }

/* ---------- iPhone-Leiste unten (nur schmal) */
.tabbar { display: none; }
.sheet { position: fixed; inset: auto 12px 96px 12px; z-index: 30; background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 8px; box-shadow: 0 12px 40px rgba(20,20,20,.18); }
.sheet a, .sheet button { display: flex; width: 100%; align-items: center; gap: 12px; padding: 10px; border: 0; border-radius: 14px; background: transparent; text-decoration: none; font-size: 15px; }
.sheet a:hover, .sheet button:hover { background: var(--bg); color: var(--ink); }

@media (max-width: 980px) {
  .meet { grid-template-columns: 1fr; gap: 36px; }
  .feed, .steps { grid-template-columns: 1fr; }
  .settings { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .subnav { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .subnav h2 { display: none; }
  .login { grid-template-columns: 1fr; }
  .login .art { display: none; }
}
@media (max-width: 760px) {
  :root { --bar: 64px; }
  h1 { font-size: 34px; }
  .bar { padding: 0 20px; }
  .bar .menu, .bar .bar-right .set { display: none; }
  .brand .word { font-size: 17px; }
  .brand img { height: 32px; }
  .bar-right { margin-left: auto; }
  .page { padding: 20px 20px 120px; }
  .demo-band { padding: 7px 20px; }
  .modbar { padding: 8px 20px; }
  .modbar .btn { display: none; }
  .module-host { height: calc(100dvh - var(--bar) - 37px - 92px); padding: 0; }
  .module-frame { border-radius: 0; border-left: 0; border-right: 0; }
  .tabbar { display: flex; position: fixed; left: 16px; right: 16px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 25;
    height: 66px; padding: 6px; border-radius: 33px; background: rgba(255,253,247,.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(20,20,20,.12); justify-content: space-between; }
  .tabbar a, .tabbar button { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    border: 0; background: transparent; padding: 0; border-radius: 24px; font-size: 10px; font-weight: 500; color: var(--muted); text-decoration: none; }
  .tabbar > .on { color: var(--ink); font-weight: 700; }
  .tabbar span.l { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .login .form-side { padding: 24px; }
  .login h1 { font-size: 38px; }
  th.hide-sm, td.hide-sm { display: none; }
  table { display: block; overflow-x: auto; }
  .meet .title { font-size: 20px; margin-top: 16px; }
  td.actions button { padding: 7px 10px; }
  .spread > .row { width: 100%; }
  .spread input[type=search] { width: 100% !important; flex: 1 1 auto; }
  .feed { margin-top: 28px; }
}

/* Posteingang */
.mail-wrap { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 24px; align-items: start; }
.mail-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mail-list { max-height: calc(100vh - 260px); overflow: auto; }
.mail-li { display: flex; align-items: flex-start; }
.mail-li.on { background: var(--clay); }
.mail-from { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-subj { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.mail-li.unread .mail-from { font-weight: 700; }
.mail-li.unread .mail-subj { color: var(--ink); }
.mail-detail { min-width: 0; }
.mail-frame { width: 100%; min-height: 200px; border: 0; display: block; background: var(--panel); }
.mail-text { white-space: pre-wrap; line-height: 1.55; word-wrap: break-word; }
@media (max-width: 759px) {
  .mail-wrap { grid-template-columns: minmax(0, 1fr); }
  .mail-list { max-height: none; }
  .mail-wrap.reading .mail-col { display: none; }
}