:root{
  color-scheme:dark;
  --bg:#15171c;
  --fg:#e6e8eb;
  --fg-dim:#a0a6b0;
  --line:#2b2f36;
  --surface:#1d2027;
  --surface-hi:#262a33;
  --accent:#6fb7ff;
  --top3-num:#5fd98a;
}

body{
  font-family:Arial,sans-serif;max-width:900px;margin:20px auto;padding:0 15px;
  background:var(--bg);color:var(--fg)
}
.top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}
.left-buttons button{display:block;margin-bottom:8px}
.rank{padding:8px;border-bottom:1px solid var(--line);display:block}
a,button{cursor:pointer}
a{color:var(--accent)}

input{
  padding:6px;font-size:14px;
  background:var(--surface);color:var(--fg);
  border:1px solid var(--line);border-radius:4px
}
input:focus{outline:none;border-color:var(--accent)}

button{
  padding:6px 12px;
  background:var(--surface-hi);color:var(--fg);
  border:1px solid var(--line);border-radius:4px
}
button:hover{background:var(--line)}

/* Headings and nav are left-aligned; only the DE/EN/Admin controls stay right. */
.site-title{font-size:2.4em;margin:10px 0 4px;text-align:left}
.next-show{font-size:1.1em;margin:0 0 20px;color:var(--fg-dim)}
.top-right-only{justify-content:flex-end}
.main-nav{display:flex;justify-content:flex-start;flex-wrap:wrap;gap:10px;margin:12px 0}

/* Page title and the DE/EN/Admin controls in one row. */
.pagehead{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px}
.pagehead .site-title{margin:6px 0 4px}
#lang{display:flex;gap:6px;flex-wrap:wrap}
/* The DE/EN/Admin and the page-specific action buttons are compact (desktop and
   mobile alike). */
#lang button{padding:6px 9px;font-size:13px}
.nav-right button{font-size:13px;padding:8px 10px}

/* ☰ page menu: a dropdown of the pages, so the nav row stays short. */
.menu-wrap{position:relative}
.menu-btn{font-size:1.3em;line-height:1;padding:5px 12px}
.menu-panel{position:absolute;top:100%;left:0;margin-top:5px;min-width:170px;z-index:15;
  display:none;flex-direction:column;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.menu-panel.open{display:flex}
.menu-item{padding:11px 14px;color:var(--fg);text-decoration:none;border-bottom:1px solid var(--line)}
.menu-item:last-child{border-bottom:none}
.menu-item:hover{background:var(--surface-hi)}
.menu-on{color:var(--accent);font-weight:bold}

/* Small "report bug" button, out of the way in the corner. */
.bug-btn{position:fixed;right:12px;bottom:12px;z-index:20;font-size:.8em;padding:6px 11px;
  border-radius:20px;background:var(--surface-hi);border:1px solid var(--line);opacity:.8}
.bug-btn:hover{opacity:1;border-color:var(--accent)}

/* Text button linking to the YouTube trailer search. Darker than the movie box
   it sits in, so it stays readable as a button. */
.trailer-btn{
  display:inline-block;margin-left:10px;
  padding:2px 10px;border-radius:6px;
  border:1px solid var(--line);background:var(--bg);
  color:var(--accent);text-decoration:none;
  font-size:.8em;line-height:1.6;vertical-align:middle;white-space:nowrap
}
.trailer-btn:hover{background:var(--surface)}

.ranking-row{display:flex;justify-content:space-between;align-items:center}
.votes-count{font-weight:bold;margin-left:12px}

/* --- movie rows with cover ------------------------------------------------ */
/* Same surface, border and rounding as a button. */
.movie-row{
  display:flex;align-items:flex-start;gap:12px;padding:10px 12px;margin-bottom:8px;
  background:var(--surface-hi);border:1px solid var(--line);border-radius:6px
}
.movie-row input[type=checkbox]{margin-top:22px;flex:none;width:16px;height:16px}

.poster{width:46px;height:69px;flex:none;border-radius:4px;object-fit:cover;background:var(--surface)}
.poster-empty{display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--fg-dim)}
.poster-lg{width:92px;height:138px}

/* --- ranking rows (start page) ---------------------------------------------
   No place number on the left: the list is sorted, so the place can be read off
   the vote count on the right, and the top three carry that count in green.
   The freed space goes to the cover, which spans the full height of the box. */
.rank-row .poster{
  align-self:stretch;   /* top padding edge to bottom padding edge, whatever the row's height */
  width:80px;height:auto;
  min-height:120px;     /* 2:3 of the width -- at rest the cover is not cropped */
  max-height:210px;     /* an opened description must not stretch it into a strip */
}
.rank-row .votes-count{align-self:center;font-size:1.4em}
.movie-row.top3 .votes-count{color:var(--top3-num)}

.movie-info{flex:1;min-width:0}
.movie-head{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.movie-title{font-weight:bold}
.movie-year{font-weight:normal;color:var(--fg-dim)}

/* Fills the space next to the cover: three lines, a click opens the full text. */
.overview{
  margin-top:3px;color:var(--fg-dim);font-size:.85em;line-height:1.45;cursor:pointer;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden
}
.overview.open{-webkit-line-clamp:unset;overflow:visible}

/* Movies that cannot be watched right now: listed below the ballot, not votable. */
.pending-head{display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin:26px 0 10px;color:var(--fg-dim);border-top:1px solid var(--line);padding-top:16px}
.movie-row.pending{opacity:.6}
.movie-row.pending:hover{opacity:1}
.rent-btn{flex:none;margin-top:8px}
/* Which service carries an unavailable film -- the one actionable fact about it. */
.runs-on{margin-top:5px;font-size:.85em;color:var(--fg-dim)}
.runs-on b{color:var(--accent);font-weight:600}

.badge{font-size:.72em;padding:2px 7px;border-radius:10px;background:var(--bg);color:var(--fg-dim);white-space:nowrap}
.badge-streaming{background:#1c3a26;color:#8fe0a8}
.badge-free{background:#1c3a3a;color:#8fdede}
.badge-rent{background:#3a3320;color:#e8c887}
.badge-buy{background:#3a2a20;color:#e8b087}
.badge-dvd{background:#25304a;color:#9dbcf0}
.badge-lang{background:#2c2440;color:#c3b0f0;cursor:help}
.badge-sub{background:#22262e;color:#9aa3b2;cursor:help}

/* --- rental options, one row per provider --------------------------------- */
.rent-list{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.rent-option{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:8px 10px}
.rent-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.rent-tag{flex:none;font-weight:bold;color:#e8c887}
.rent-langs{flex:none;display:flex;gap:4px}

/* --- modal: rent confirmation and subscription offer ---------------------- */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;
  justify-content:center;padding:16px;z-index:10}
.modal-box{background:var(--surface);border:1px solid var(--line);border-radius:8px;
  padding:18px;max-width:520px;width:100%;max-height:85vh;overflow-y:auto}
.modal-box h3{margin:0 0 10px}
.modal-box input{width:100%;box-sizing:border-box;margin-top:6px}
.rent-price{font-size:1.2em;font-weight:bold;color:#e8c887;margin:6px 0}
.offered-by{color:var(--top3-num);font-size:.85em;margin-left:4px}

/* --- add movie ------------------------------------------------------------ */
.result{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;margin-bottom:8px;cursor:pointer;
  background:var(--surface-hi);border:1px solid var(--line);border-radius:6px}
.result:hover{border-color:var(--accent)}
.chosen{display:flex;gap:14px;align-items:flex-start;padding:12px;margin-bottom:14px;
  background:var(--surface-hi);border:1px solid var(--line);border-radius:6px}

.msg-ok{color:#8fe0a8}
.msg-warn{color:#e8c887}
.msg-err{color:#f09b9b}
.options{display:flex;flex-direction:column;gap:8px;align-items:flex-start;margin-top:12px}
.hint{color:var(--fg-dim);font-size:.9em}

/* --- admin provider picker ------------------------------------------------ */
.provider-grid{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0;max-height:260px;overflow-y:auto;
  padding:10px;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.provider{display:flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid var(--line);
  border-radius:6px;cursor:pointer;font-size:.85em;background:var(--bg)}
.provider img{width:22px;height:22px;border-radius:4px}
.provider.on{border-color:var(--top3-num);background:#1c3a26}

/* Enabled services, each removable on its own. */
.active-services{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.active-services .provider{cursor:default}
.provider .x{padding:0 5px;margin-left:4px;line-height:1.4;font-size:.9em;
  background:transparent;border:none;color:var(--fg-dim)}
.provider .x:hover{color:#f09b9b;background:transparent}

/* --- admin health panel --------------------------------------------------- */
.health-row{display:flex;align-items:center;gap:8px;padding:5px 0;flex-wrap:wrap}
.health-name{font-weight:bold;min-width:9em}
.health-detail{color:var(--fg-dim);font-size:.9em}
.health-when{margin-top:6px;color:var(--fg-dim);font-size:.85em}
.health-stats{margin-top:8px;padding-top:8px;border-top:1px solid var(--line);
  color:var(--fg-dim);font-size:.85em}
.dot{width:9px;height:9px;border-radius:50%;flex:none}
.dot-ok{background:var(--top3-num)}
.dot-bad{background:#f09b9b}
button.mini{padding:1px 7px;font-size:.75em;margin-left:6px}

/* --- admin: who committed money to which film ----------------------------- */
.commit-list{display:flex;flex-direction:column;gap:4px;margin:8px 0}
.commit-row{display:flex;align-items:center;gap:10px;padding:6px 10px;
  background:var(--surface);border:1px solid var(--line);border-radius:6px}
.commit-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.commit-provider{flex:none;color:var(--fg-dim);font-size:.85em}
.commit-payer{flex:none;font-weight:bold;min-width:6em;text-align:right}
.commit-price{flex:none;font-weight:bold;color:#e8c887;min-width:5.5em;text-align:right}
.commit-total{background:transparent;border:none;border-top:1px solid var(--line);
  border-radius:0;padding-top:8px}

/* --- calendar tiles (start page) -------------------------------------------
   A ranking row cut into thirds: three tiles next to each other on a desktop,
   one per row on a phone. A tile only exists for a day somebody entered. */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin-bottom:20px}
.tile{display:flex;flex-direction:column;gap:8px;padding:12px;color:var(--fg);text-decoration:none;
  background:var(--surface-hi);border:1px solid var(--line);border-left-width:4px;border-radius:6px}
.tile:hover{border-color:var(--accent)}
/* Highlighted when the calendar overview jumps here. */
.tile-focus{box-shadow:0 0 0 2px var(--accent)}

/* Overview legend: a coloured dot per format. */
.cal-legend{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 14px}
.legend-item{display:flex;align-items:center;gap:6px;font-size:.9em;color:var(--fg-dim)}
.legend-dot{width:12px;height:12px;border-radius:3px;display:inline-block}
.tile-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.tile-kind{font-size:.72em;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-dim)}
.tile-date{font-weight:bold}
.tile-body{display:flex;gap:10px;align-items:flex-start;min-height:96px}
.tile-poster{width:64px;height:96px;flex:none}
/* As many ranking rows as fit beside the poster; the rest is clipped so every
   tile keeps the same height. */
.tile-top3{list-style:none;margin:0;padding:0;flex:1;min-width:0;display:flex;flex-direction:column;
  gap:4px;max-height:96px;overflow:hidden}
.tile-top3 li{display:flex;gap:8px;align-items:baseline;font-size:.85em}
.t3-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t3-votes{flex:none;font-weight:bold;color:var(--fg-dim)}
.tile-lines{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;font-size:.85em}
.tile-series{font-weight:bold}
.tile-line{color:var(--fg-dim)}
.tile-foot{display:flex;align-items:baseline;gap:6px;border-top:1px solid var(--line);padding-top:8px}

/* The attendance number: grey while the evening is short of people, green once
   it will happen. Same green as the top-3 vote counts -- it means the same. */
.going{font-size:1.5em;font-weight:bold;color:var(--fg-dim)}
.going-ok{color:var(--top3-num)}
.going-label{font-size:.8em;color:var(--fg-dim)}

/* --- one day with its own ranking (HasselKino page) ------------------------ */
.day{margin:0 0 26px}
.day-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);margin-bottom:10px}
.day-head h2{margin:0 0 6px}
.day-going{display:flex;align-items:baseline;gap:6px}
/* Who voted for what -- a signed vote is more binding than an anonymous one. */
.voters{margin-top:4px;font-size:.85em;color:var(--fg-dim)}
.guests-tag{color:var(--accent);font-weight:600}

/* --- nav: the active format is highlighted -------------------------------- */
.nav-on{border-color:var(--accent);color:var(--accent)}
/* Page buttons left, an action button (Film hinzufügen / New date) pushed right. */
.nav-row{align-items:center}
.nav-right{margin-left:auto}

/* --- real month calendar (date picker, admin) ----------------------------- */
.cal-months{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.cal-month{min-width:0}
.cal-title{font-weight:bold;margin:0 0 6px;text-transform:capitalize}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-wd{text-align:center;font-size:.7em;color:var(--fg-dim);padding-bottom:2px}
.cal-empty{aspect-ratio:1}
.cal-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  border-radius:5px;font-size:.9em;padding:0}
/* Days you can pick: buttons. Everything else is dim and inert. */
.cal-day.dim{color:var(--line);background:transparent;border:1px solid transparent}
.cal-day.pick{background:var(--surface-hi);color:var(--fg);border:1px solid var(--line);cursor:pointer}
.cal-day.pick:hover{border-color:var(--accent)}
.cal-day.has-event{border-color:var(--top3-num);color:var(--top3-num)}
.cal-day.blocked{background:#3a2020;color:#f09b9b;border-color:#5a2a2a}
.cal-day.chosen{background:#1c3a26;border-color:var(--top3-num);color:#8fe0a8}

/* --- single event page ----------------------------------------------------- */
.event-head{margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--line)}
/* The format name is the big heading; the date sits one size smaller under it. */
.event-format{margin:0;font-size:1.7em}
.event-date{font-size:1.3em;font-weight:bold;color:var(--fg-dim);margin:2px 0 10px}
.event-going{display:flex;align-items:baseline;gap:8px}
.event-actions{justify-content:flex-start;margin:0 0 16px}

/* The vote / sign-up panel at the bottom of an event. */
.vote-panel{margin-top:20px;padding:14px;background:var(--surface);
  border:1px solid var(--line);border-radius:8px}
.vote-panel h3{margin:0 0 10px}
.vote-panel input:not(.guests-num){width:100%;box-sizing:border-box}
.mode-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0}
#mode{flex:1;min-width:12em;padding:8px;border-radius:4px;
  background:var(--surface-hi);color:var(--fg);border:1px solid var(--line)}
.film-pick{margin-top:22px;flex:none;width:18px;height:18px}

/* Guest count with its label, so "+2" is never a bare number. */
.guests-field{display:inline-flex;align-items:center;gap:6px;color:var(--fg-dim);
  font-size:.9em;white-space:nowrap;cursor:help}
.guests-input{display:inline-flex;align-items:center;gap:1px}
.guests-num{width:3.4em;padding:4px;text-align:center}

/* --- date picker (voting and proposing) ------------------------------------ */
.date-list{display:flex;flex-direction:column;gap:6px;margin:8px 0 16px}
.date-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 10px;
  background:var(--surface);border:1px solid var(--line);border-radius:6px}
.date-row.on{border-color:var(--top3-num);background:#1b2620}
.date-row input[type=checkbox]{width:18px;height:18px;flex:none}
.date-when{flex:0 0 auto;min-width:7.5em;font-weight:600}
.date-going{flex:none;font-size:.8em;color:var(--fg-dim)}
.date-mode{flex:1;min-width:12em;padding:6px;border-radius:4px;font-size:.85em;
  background:var(--surface-hi);color:var(--fg);border:1px solid var(--line)}
.date-guests{flex:none;display:flex;align-items:center;gap:2px;font-size:.9em;color:var(--fg-dim)}
.date-guests input{width:3.4em;padding:4px;text-align:center}

/* --- a name that is already taken ------------------------------------------
   Nobody's answer gets overwritten: the taken name stays fixed and only an
   addition is typed next to it. */
.name-taken{margin:10px 0;padding:10px 12px;background:var(--surface);
  border:1px solid var(--line);border-radius:6px}
.name-fix{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.name-fixed{padding:6px 10px;font-weight:bold;background:var(--bg);
  border:1px solid var(--line);border-radius:4px}
.name-fix input{flex:1;min-width:8em}

/* ==========================================================================
   Phone layout. Most people open this on a phone, so the multi-column rows
   (rent options, commitments, admin movie rows) have to reflow instead of
   being squeezed into unreadable slivers.
   ========================================================================== */
@media (max-width: 640px){
  body{margin:12px auto;padding:0 12px}
  .site-title{font-size:1.9em}
  .next-show{font-size:1em}
  h2{font-size:1.35em}
  h3{font-size:1.1em}

  /* Fingers are not mouse pointers: bigger targets, and 16px input text so
     iOS does not zoom the page on focus. */
  button{padding:10px 14px;font-size:15px}
  button.mini{padding:5px 10px;font-size:.8em;margin-left:0}
  input:not([type=checkbox]):not([type=radio]){
    padding:10px;font-size:16px;width:100%;box-sizing:border-box;margin-bottom:8px
  }
  .main-nav{gap:8px}

  /* Title smaller so it fits the row with DE/EN/Admin (their size is set in the
     base rules and already compact). */
  .pagehead .site-title{font-size:1.5em}

  /* The ☰ menu stays left; the page-specific action buttons drop to their own
     row, left-aligned. */
  .nav-row{flex-wrap:wrap}
  .nav-right{margin-left:0;flex-basis:100%;display:flex;justify-content:flex-start;
    gap:8px;flex-wrap:wrap;margin-top:6px}
  .bug-btn{font-size:.75em;padding:5px 9px}

  /* --- movie rows ---
     On a phone the head gets its own line per purpose: title, then trailer and
     languages, then the description. Cramming them into one wrapping line left
     the second line indented, because the trailer button's left margin turns
     into an indent the moment it starts a line. */
  .movie-row{gap:10px;padding:10px;flex-wrap:wrap}
  .movie-row input[type=checkbox]{width:22px;height:22px;margin-top:20px}
  .poster{width:54px;height:81px}
  .movie-info{flex:1 1 55%}

  /* The cover still spans the row, just narrower -- on a phone the title needs
     the width more than the poster does. */
  .rank-row .poster{width:68px;min-height:102px;max-height:180px}
  .rank-row .votes-count{font-size:1.25em}

  .movie-head{gap:6px 8px}
  .movie-title{flex:1 1 100%;line-height:1.3}   /* title alone on the first line */
  .trailer-btn{margin-left:0}                   /* no indent when it starts a line */
  .votes-count{margin-left:auto}
  /* Action buttons (Leihen/Kaufen, Löschen) go full width below the film
     instead of being wedged beside it and squeezing the title to nothing. */
  .movie-row > button{flex:1 1 100%;margin-top:10px}

  /* --- rent / buy options: name on its own line, price and languages below --- */
  .rent-option{flex-wrap:wrap;gap:6px;padding:10px}
  .rent-name{flex:1 1 100%;white-space:normal;overflow:visible;font-weight:bold}
  .rent-tag{flex:0 0 auto}
  .rent-langs{margin-left:auto;flex-wrap:wrap;justify-content:flex-end}

  /* --- admin: commitments --- */
  .commit-row{flex-wrap:wrap;gap:4px 8px;padding:8px 10px}
  .commit-title{flex:1 1 100%;white-space:normal}
  .commit-provider{flex:1 1 auto}
  .commit-payer{min-width:0;text-align:left}
  .commit-price{min-width:0;margin-left:auto}
  .commit-total .commit-title{flex:1 1 auto}

  /* --- admin: health --- */
  .health-row{gap:6px}
  .health-name{min-width:0;flex:0 0 auto}
  .health-detail{flex:1 1 100%;margin-left:17px}
  .health-when{margin-left:0}

  /* --- admin: provider picker --- */
  .provider-grid{max-height:220px;padding:8px;gap:6px}
  .provider{font-size:.8em;padding:6px 8px}
  .active-services{gap:6px}

  /* --- add movie --- */
  .result{padding:10px}
  .chosen{padding:10px;gap:10px}
  .poster-lg{width:72px;height:108px}
  .options{gap:10px}
  .options button{width:100%}

  /* --- modal --- */
  .modal{padding:10px;align-items:flex-start}
  .modal-box{padding:14px;max-height:92vh;margin-top:10px}
  .modal-box h3{font-size:1.1em}

  .pending-head{flex-wrap:wrap;gap:8px}
  .pending-head button{flex:1 1 100%}

  /* --- calendar: one tile per row --- */
  .tiles{grid-template-columns:1fr;gap:10px}
  .tile-poster{width:58px;height:87px}
  .tile-body{min-height:0}

  /* --- date picker ---
     The mode select gets its own line and 16px type, otherwise iOS zooms into
     the page on focus. The guest field must keep its narrow width: the global
     rule above stretches every input to 100%. */
  .date-row{padding:10px;gap:8px}
  .date-row input[type=checkbox]{width:22px;height:22px}
  .date-when{flex:1 1 auto}
  .date-mode{flex:1 1 100%;font-size:16px;padding:10px;margin-bottom:0}
  .date-guests input{width:3.8em;font-size:16px;margin-bottom:0}
  .name-fix input{width:auto;margin-bottom:0}

  .day-head{gap:6px}
  .day-head h2{font-size:1.2em}

  /* --- single event: film checkbox and vote panel --- */
  .film-pick{width:22px;height:22px;margin-top:20px}
  .event-head h1{font-size:1.3em}
  #mode{flex:1 1 100%;font-size:16px;padding:10px}
  .guests-num{font-size:16px;margin-bottom:0;width:3.8em}
  .vote-panel .options button{width:100%}
}

/* Very narrow phones (iPhone SE and friends). */
@media (max-width: 380px){
  .poster{width:46px;height:69px}
  .movie-head{gap:5px 6px}
  .badge{font-size:.68em;padding:2px 5px}
}