/* ------------------------------------------------------------------
   planer.alpasana.ch
   Ruhige, grosse Oberflaeche. Ein Gedanke pro Abschnitt.
   ------------------------------------------------------------------ */

/* Warme, ruhige Farbwelt. Wer den ganzen Tag Mails abarbeitet, soll hier
   ankommen und nicht angeschrien werden: gebrochenes Weiss statt Grau,
   Moosgrün fürs Erledigte, Bernstein fürs Offene, Terrakotta fürs Wichtige. */

/* Immer hell - kein Dunkelmodus. Leinen, Salbei, warmes Holz. Der Grundton ist hell wie Papier,
   der Akzent ist das Grün einer Zimmerpflanze - nichts Grelles,
   nichts Bürohaftes. */

:root {
  --bg:        #fdfaf5;
  --card:      #ffffff;
  --ink:       #3c352d;
  --ink-soft:  #7d7064;
  --line:      #efe8dd;

  --brand:     #527c67;
  --brand-ink: #ffffff;

  /* Kopfzeile in hellem Leinen statt dunkel - das ändert am meisten */
  --bar-bg:    #f4efe5;
  --bar-ink:   #4a4239;
  --bar-hover: #e9e1d3;

  --ok:        #4c7a42;
  --ok-bg:     #f0f7ec;
  --ok-line:   #cbe3bd;

  --todo:      #96601a;
  --todo-bg:   #fdf5e8;
  --todo-line: #f0dcb6;

  --stop:      #a9483a;
  --stop-bg:   #fdefeb;
  --stop-line: #f2cabf;

  --fix:       #4e7291;
  --fix-bg:    #eff4f9;
  --fix-line:  #d0dfec;

  --radius:    16px;
  --shadow:    0 1px 2px rgba(110, 95, 75, .05), 0 8px 26px rgba(110, 95, 75, .07);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "tnum" 1;
}

.wrap { width: min(1120px, 100% - 2rem); margin-inline: auto; }

/* ---------------------------------------------------------- Kopfzeile */

.topbar {
  background: var(--bar-bg);
  color: var(--bar-ink);
  padding: .7rem 0;
  position: sticky; top: 0; z-index: 20;
  border-bottom: 1px solid var(--line);
}
.topbar .wrap { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.brand { font-weight: 700; letter-spacing: -.01em; font-size: 1.05rem; margin-right: auto; display: flex; align-items: center; gap: .55rem; }
.brand span { opacity: .75; font-weight: 400; }

.nav { display: flex; gap: .25rem; flex-wrap: wrap; }
.nav a {
  color: inherit; text-decoration: none; padding: .45rem .8rem;
  border-radius: 999px; font-size: .95rem;
}
.nav a:hover { background: var(--bar-hover); }
.nav a[aria-current] { background: var(--brand); color: var(--brand-ink); font-weight: 600; }
.nav a.quiet { color: var(--ink-soft); font-size: .88rem; }
.nav a.quiet[aria-current] { color: var(--brand-ink); }

/* Alles Technische liegt hinter "Mehr" - Nataliya sieht es gar nicht */
.nav .more { position: relative; border: 0; background: none; padding: 0; margin: 0; box-shadow: none; }
.nav .more summary {
  list-style: none; cursor: pointer; padding: .45rem .8rem;
  border-radius: 999px; font-size: .95rem; font-weight: 400;
}
.nav .more summary::-webkit-details-marker { display: none; }
.nav .more summary::after { content: " ▾"; opacity: .55; }
.nav .more summary:hover { background: var(--bar-hover); }
.nav .more[open] summary { background: var(--bar-hover); }
.more-menu {
  position: absolute; right: 0; top: calc(100% + .35rem); z-index: 30;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); padding: .35rem; min-width: 13rem;
  display: flex; flex-direction: column; gap: .1rem;
}
.more-menu a { border-radius: 8px; padding: .5rem .7rem; font-size: .92rem; color: var(--ink); }
.more-menu a:hover { background: var(--bg); }

@media (max-width: 700px) {
  .nav .more { position: static; }
  .more-menu { position: static; box-shadow: none; margin-top: .3rem; width: 100%; }
}

/* ------------------------------------------------------ Rollenwechsel */

.switchbar {
  background: var(--todo-bg); border-bottom: 1px solid var(--todo-line);
  color: var(--todo); font-size: .9rem; padding: .5rem 0;
}
.switchbar .wrap { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.switchbar a { color: inherit; font-weight: 600; }
.switchbar.quiet {
  background: var(--card); border-bottom: 1px solid var(--line); color: var(--ink-soft);
}
.switchbar.quiet a {
  color: var(--ink); font-weight: 500; text-decoration: none;
  border: 1px solid var(--line); border-radius: 999px; padding: .15rem .65rem; font-size: .85rem;
}
.switchbar.quiet a:hover { border-color: var(--brand); color: var(--brand); }

/* ------------------------------------------------------------- Bloecke */

main { padding: 1.75rem 0 5rem; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.4rem 1.5rem;
  margin-bottom: 1.25rem;
}
.card.tight { padding: 1rem 1.15rem; }

h1 { font-size: 1.75rem; line-height: 1.25; margin: 0 0 .35rem; letter-spacing: -.02em; }
h2 { font-size: 1.2rem; margin: 0 0 .75rem; letter-spacing: -.01em; }
h3 { font-size: 1rem; margin: 0 0 .5rem; }
p  { margin: 0 0 .75rem; }
p:last-child, ul:last-child { margin-bottom: 0; }

.muted { color: var(--ink-soft); }
.small { font-size: .9rem; }
.center { text-align: center; }

/* ------------------------------------------------- Die grosse Ansage */

.headline {
  border-radius: var(--radius);
  padding: 1.6rem 1.6rem 1.4rem;
  margin-bottom: 1.25rem;
  border: 1px solid;
}
.headline .big {
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem);
  font-weight: 700; line-height: 1.25; letter-spacing: -.02em;
  margin: 0 0 .5rem;
}
.headline.todo { background: var(--todo-bg); border-color: var(--todo-line); color: var(--todo); }
.headline.done { background: var(--ok-bg);   border-color: var(--ok-line);   color: var(--ok); }
.headline.idle { background: var(--card);    border-color: var(--line);      color: var(--ink); }
.headline.fixedonly { background: var(--fix-bg); border-color: var(--fix-line); color: var(--fix); }
.headline .sub { color: inherit; opacity: .85; font-size: 1.02rem; }

.meter { height: 14px; border-radius: 999px; background: rgba(0,0,0,.09); overflow: hidden; margin: .9rem 0 .55rem; }
.meter i { display: block; height: 100%; background: currentColor; border-radius: 999px; transition: width .25s ease; }

/* --------------------------------------------------------- Wochenwahl */

.weekbar { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.weekbar .now { flex: 1 1 12rem; text-align: center; }
.weekbar .kw { font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; display: block; }
.weekbar .range { color: var(--ink-soft); font-size: .95rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  padding: .7rem 1.1rem; border-radius: 12px; font: inherit; font-size: .98rem;
  cursor: pointer; text-decoration: none; min-height: 48px;
}
.btn:hover { border-color: var(--brand); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); font-weight: 600; }
.btn.primary:hover { filter: brightness(1.1); }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--stop); border-color: var(--stop-line); }
.btn.wide { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ------------------------------------------------------ Drei Schritte */

.steps {
  list-style: none; margin: 0 0 1.25rem; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem;
}
.steps li {
  display: flex; align-items: center; gap: .7rem;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: .75rem .9rem; opacity: .55;
}
.steps li .n {
  flex: none; width: 2rem; height: 2rem; border-radius: 999px;
  display: grid; place-items: center; font-weight: 700;
  background: var(--line); color: var(--ink-soft);
}
.steps li.now { opacity: 1; border-color: var(--todo-line); background: var(--todo-bg); }
.steps li.now .n { background: var(--todo); color: var(--card); }
.steps li.ok  { opacity: 1; border-color: var(--ok-line); background: var(--ok-bg); }
.steps li.ok .n { background: var(--ok); color: var(--card); }
.steps li b { font-size: .95rem; }

@media (max-width: 700px) {
  .steps { grid-template-columns: 1fr; gap: .4rem; }
  .steps li { padding: .55rem .75rem; }
}

/* ------------------------------------------------------- Aufgabenliste */

.tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.tasks li {
  display: flex; align-items: center; gap: .9rem;
  padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card);
}
.tasks .count {
  flex: none; min-width: 3rem; height: 3rem; border-radius: 12px;
  display: grid; place-items: center; font-size: 1.35rem; font-weight: 700;
  background: var(--todo-bg); color: var(--todo);
}
.tasks li.is-fixed .count { background: var(--fix-bg); color: var(--fix); }
.tasks .what { font-weight: 600; }
.tasks .where { color: var(--ink-soft); font-size: .92rem; }

/* Phase der Einheit: Kennenlernen – Begleitung – Abschluss */
.phase {
  display: inline-block; font-size: .72rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  padding: .1rem .5rem; border-radius: 5px; margin-right: .45rem;
  vertical-align: .1em;
}
.phase-EE { background: var(--fix-bg);  color: var(--fix); }
.phase-EC { background: var(--todo-bg); color: var(--todo); }
.phase-SG { background: var(--ok-bg);   color: var(--ok); }

/* Sechs-Wochen-Bogen einer Durchführungseinheit */

.tag {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .8rem; padding: .12rem .55rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-soft); white-space: nowrap;
}
.tag.online { background: var(--fix-bg); border-color: var(--fix-line); color: var(--fix); }
.tag.onsite { background: var(--todo-bg); border-color: var(--todo-line); color: var(--todo); }

/* Sprache der Durchführungseinheit - muss auf einen Blick lesbar sein */
.lang {
  display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .02em;
  padding: .05rem .45rem; border-radius: 5px; vertical-align: .05em;
}
.lang-DE { background: #e6eefb; color: #1c4587; }
.lang-EN { background: #fdeadf; color: #96420d; }
/* --------------------------------------------------------------- Raster */

.grid { display: grid; grid-template-columns: 5.5rem repeat(5, 1fr); gap: .4rem; }
.grid .head { text-align: center; padding: .5rem .25rem .35rem; font-size: .9rem; }
.grid .head b { display: block; font-size: 1rem; }
.grid .head.off { opacity: .5; }
.grid .time { display: flex; align-items: center; justify-content: flex-end; padding-right: .5rem;
              font-size: .85rem; color: var(--ink-soft); white-space: nowrap; }

.slot {
  position: relative; display: block; min-height: 62px; border-radius: 12px;
  border: 1.5px dashed var(--line); background: var(--card);
  cursor: pointer; padding: .45rem .5rem; text-align: center;
  font-size: .85rem; line-height: 1.3; color: var(--ink-soft);
  display: grid; place-content: center; user-select: none;
  transition: background .12s, border-color .12s, color .12s;
}
.slot input { position: absolute; opacity: 0; pointer-events: none; }
.slot:hover { border-color: var(--ok); color: var(--ok); }
.slot.on {
  background: var(--ok-bg); border-style: solid; border-color: var(--ok-line);
  color: var(--ok); font-weight: 600;
}
.slot.locked {
  cursor: default; border-style: solid; border-color: var(--fix-line);
  background: var(--fix-bg); color: var(--fix); font-weight: 600;
}
.slot.locked:hover { border-color: var(--fix-line); color: var(--fix); }
.slot.atelier {
  cursor: default; border-style: solid;
  background: repeating-linear-gradient(45deg, var(--stop-bg), var(--stop-bg) 6px, transparent 6px, transparent 12px);
  border-color: var(--stop-line); color: var(--stop); font-weight: 600;
}
.slot.atelier:hover { border-color: var(--stop-line); color: var(--stop); }
.slot.dead {
  cursor: default; border-style: solid; background: transparent;
  border-color: transparent; color: var(--ink-soft); opacity: .45;
}
.slot.dead:hover { border-color: transparent; color: var(--ink-soft); }
.slot:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

button.slot { font: inherit; width: 100%; }
.slot.has-pop { cursor: help; }

/* --------------------------------------------------------- Terminkarte */

.pop {
  position: fixed; z-index: 60; display: block;
  width: 22rem; max-width: calc(100vw - 1.5rem);
  max-height: calc(100vh - 1.5rem); overflow-y: auto;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 4px 12px rgba(22,32,46,.12), 0 18px 48px rgba(22,32,46,.18);
  padding: .85rem 1rem; text-align: left; font-weight: 400;
  font-size: .88rem; line-height: 1.45;
}
.pop[hidden] { display: none; }
.pop-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .55rem; }
.pop-head b { font-size: 1rem; }
.pop-head .tag { font-style: normal; }
.pop-rows { display: block; }
.pop-row { display: flex; gap: .6rem; padding: .16rem 0; align-items: baseline; }
.pop-row .k { flex: 0 0 8.5rem; color: var(--ink-soft); font-size: .82rem; }
.pop-row .v { flex: 1 1 auto; }
.pop-follow {
  display: block; margin-top: .6rem; padding: .5rem .65rem;
  background: var(--todo-bg); border: 1px solid var(--todo-line);
  color: var(--todo); border-radius: 9px;
}
.pop-note {
  display: block; margin-top: .45rem; padding: .45rem .65rem;
  background: var(--fix-bg); border-left: 3px solid var(--fix-line);
  color: var(--fix); border-radius: 0 9px 9px 0; font-style: italic;
}
.pop-team {
  display: block; margin-top: .7rem; padding-top: .6rem;
  border-top: 1px solid var(--line);
}
.pop-team > b { display: block; font-size: .82rem; margin-bottom: .35rem; color: var(--ink-soft); }
.team-row { display: flex; gap: .6rem; align-items: baseline; padding: .12rem 0; }
.team-name { flex: 0 0 8.5rem; font-weight: 600; }
.team-roles { flex: 1 1 auto; color: var(--ink-soft); font-size: .85rem; }
.team-row.is-me { background: var(--ok-bg); border-radius: 6px; padding: .18rem .4rem; margin: .1rem -.4rem; }
.team-row.is-me .team-name { color: var(--ok); }

.pop-src { display: block; margin-top: .6rem; color: var(--ink-soft); font-size: .76rem; }

.legend { display: flex; gap: 1.1rem; flex-wrap: wrap; margin-top: 1rem; font-size: .88rem; color: var(--ink-soft); }
.legend i { width: 1rem; height: 1rem; border-radius: 5px; display: inline-block; vertical-align: -.18rem; margin-right: .35rem; border: 1.5px solid; }
.legend .l-free { background: var(--card); border-style: dashed; border-color: var(--line); }
.legend .l-on   { background: var(--ok-bg); border-color: var(--ok-line); }
.legend .l-fix  { background: var(--fix-bg); border-color: var(--fix-line); }
.legend .l-at   { background: repeating-linear-gradient(45deg, var(--stop-bg), var(--stop-bg) 3px, transparent 3px, transparent 6px); border-color: var(--stop-line); }

/* -------------------------------------------------------- Jahresstreifen */

.strip { display: flex; gap: .3rem; flex-wrap: wrap; }
.strip a {
  flex: 1 1 3.1rem; min-width: 3.1rem; text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: 10px; padding: .45rem .2rem .4rem;
  text-align: center; background: var(--card);
}
.strip a:hover { border-color: var(--brand); }
.strip a .k { font-size: .72rem; color: var(--ink-soft); display: block; }
.strip a .n { font-size: 1.05rem; font-weight: 700; display: block; line-height: 1.2; }
.strip a.s-todo { background: var(--todo-bg); border-color: var(--todo-line); color: var(--todo); }
.strip a.s-done { background: var(--ok-bg);   border-color: var(--ok-line);   color: var(--ok); }
.strip a.s-fixedonly { background: var(--fix-bg); border-color: var(--fix-line); color: var(--fix); }
.strip a.s-idle { opacity: .55; }
.strip a[aria-current] { outline: 3px solid var(--brand); outline-offset: 1px; }

/* ------------------------------------------------- Jahresplan in Worten */

.plan { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.plan a {
  display: grid; grid-template-columns: 7.5rem 1fr 5rem; gap: .9rem; align-items: center;
  text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: 12px; padding: .7rem .9rem; background: var(--card);
}
.plan a:hover { border-color: var(--brand); }
.plan .kw b { display: block; font-size: 1rem; }
.plan .kw span { color: var(--ink-soft); font-size: .82rem; }
.plan .satz { display: block; }
.plan .dfes { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .3rem; }
.plan .dfe-chip {
  font-size: .8rem; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 999px; padding: .1rem .55rem;
  display: inline-flex; align-items: center; gap: .35rem;
}
.plan .stand { text-align: center; }
.plan .stand b { display: block; font-size: 1.35rem; line-height: 1.1; }
.plan .stand span { font-size: .74rem; color: var(--ink-soft); }

.plan .s-todo a      { background: var(--todo-bg); border-color: var(--todo-line); }
.plan .s-todo .stand b { color: var(--todo); }
.plan .s-done a      { background: var(--ok-bg); border-color: var(--ok-line); }
.plan .s-done .stand b { color: var(--ok); }
.plan .s-fixedonly a { background: var(--fix-bg); border-color: var(--fix-line); }
.plan .s-idle a      { opacity: .6; }
.plan .is-now a      { outline: 3px solid var(--brand); outline-offset: 1px; }

@media (max-width: 700px) {
  .plan a { grid-template-columns: 5.5rem 1fr 3.4rem; gap: .5rem; padding: .6rem .7rem; }
  .plan .kw b { font-size: .92rem; }
  .plan .kw span { font-size: .74rem; }
  .plan .stand b { font-size: 1.15rem; }
}

/* ---------------------------------------------------------------- Notiz */

.notice { border-radius: 12px; padding: .85rem 1.1rem; margin-bottom: 1rem; border: 1px solid; font-size: .97rem; }
.notice.ok   { background: var(--ok-bg);   border-color: var(--ok-line);   color: var(--ok); }
.notice.warn { background: var(--todo-bg); border-color: var(--todo-line); color: var(--todo); }
.notice.stop { background: var(--stop-bg); border-color: var(--stop-line); color: var(--stop); }
.notice b { font-weight: 700; }
.notice ul { margin: .4rem 0 0; padding-left: 1.1rem; }

/* -------------------------------------------------------------- Formular */

.field { margin-bottom: 1rem; }
.field label { display: block; font-weight: 600; margin-bottom: .3rem; font-size: .95rem; }
.field .hint { color: var(--ink-soft); font-size: .87rem; margin-top: .25rem; }
input[type=text], input[type=password], input[type=number], input[type=file], select, textarea {
  width: 100%; padding: .7rem .85rem; font: inherit;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--ink); min-height: 48px;
}
input:focus, select:focus, textarea:focus { outline: 3px solid color-mix(in srgb, var(--brand) 35%, transparent); border-color: var(--brand); }
textarea { min-height: 5rem; resize: vertical; }
.row { display: flex; gap: .75rem; flex-wrap: wrap; }
.row > * { flex: 1 1 12rem; }
.actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }

/* --------------------------------------------------------------- Tabelle */

table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { text-align: left; padding: .65rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); font-weight: 600; }
.scroll { overflow-x: auto; }

details { border: 1px solid var(--line); border-radius: 12px; padding: .8rem 1rem; margin-bottom: .7rem; background: var(--card); }
details[open] { box-shadow: var(--shadow); }
summary { cursor: pointer; font-weight: 600; }

.quote { border-left: 3px solid var(--todo-line); background: var(--todo-bg); color: var(--todo);
         padding: .55rem .85rem; border-radius: 0 10px 10px 0; font-size: .93rem; margin: .5rem 0; }

/* --------------------------------------------------------------- Anmeldung */

.bare { min-height: 100dvh; display: grid; place-items: center; padding: 2rem 1rem; }
.bare .card { width: min(28rem, 100%); }
.bare h1 { font-size: 1.4rem; }

/* ----------------------------------------------------------------- Mobil */

@media (max-width: 780px) {
  body { font-size: 16px; }
  .grid { grid-template-columns: 4.2rem repeat(5, 1fr); gap: .3rem; }
  .grid .head b { font-size: .9rem; }
  .grid .head span { font-size: .72rem; }
  .slot { min-height: 56px; font-size: .74rem; padding: .3rem .15rem; }
  .grid .time { font-size: .74rem; padding-right: .35rem; }
  .card { padding: 1.1rem 1rem; }
}

/* Auf dem Telefon zaehlt jeder Pixel: schmale Zeitspalte, enge Abstaende,
   damit die Felder mindestens 48 px breit und gut treffbar bleiben. */
@media (max-width: 560px) {
  .wrap { width: calc(100% - 1rem); }
  .card { padding: 1rem .6rem; }
  .grid { grid-template-columns: 2.4rem repeat(5, 1fr); gap: .25rem; }
  .grid .time { font-size: .68rem; padding-right: .2rem; white-space: normal; text-align: right; line-height: 1.15; }
  .grid .head span { display: block; font-size: .68rem; }
  .slot { min-height: 58px; font-size: .68rem; padding: .25rem .1rem; }
  .slot .label { display: none; }
  .weekbar .btn { flex: 1 1 auto; padding: .7rem .5rem; font-size: .9rem; }
  .weekbar .now { order: -1; flex-basis: 100%; }
}

@media print {
  .topbar, .weekbar, .actions, .legend, .btn { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; border-color: #999; }
}

.hinweis { color: var(--stop); font-weight: 600; }

/* Atelier einer anderen Einheit: der Platz bleibt nutzbar, aber nicht für
   die Teilnehmenden, die gerade im Atelier sitzen. */
.slot.teil {
  border-style: solid; border-color: var(--todo-line);
  background: linear-gradient(var(--todo-bg), var(--todo-bg)) padding-box;
}
.slot.teil .teil-hinweis {
  display: block; font-size: .62rem; line-height: 1.15;
  color: var(--todo); margin-top: .15rem; font-weight: 600;
}
.slot.teil.on { background: var(--ok-bg); border-color: var(--ok-line); }

/* Offene Fragen - Widersprüche werden markiert, nicht weggerechnet */
.frage h2 { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.frage .nr {
  flex: none; width: 1.9rem; height: 1.9rem; border-radius: 999px;
  display: grid; place-items: center; font-size: .95rem;
  background: var(--todo-bg); color: var(--todo);
}
.frage.hoch { border-color: var(--stop-line); }
.frage.hoch .nr { background: var(--stop-bg); color: var(--stop); }
.frage th { width: 6rem; white-space: nowrap; }

/* Ansicht je Durchfuehrungseinheit */
.dfe-tabelle td { vertical-align: middle; }
.dfe-tabelle tr.is-now { background: var(--todo-bg); }
.dfe-tabelle tr.is-now td { border-bottom-color: var(--todo-line); }

/* Auswahl der Einheit oben auf der Planungsseite */
.einheit-wahl { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.einheit-wahl a {
  display: inline-flex; align-items: center; gap: .4rem;
  text-decoration: none; color: var(--ink);
  border: 1px solid var(--line); background: var(--card);
  border-radius: 999px; padding: .45rem .9rem; font-size: .95rem;
}
.einheit-wahl a:hover { border-color: var(--brand); }
.einheit-wahl a.is-now { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); font-weight: 600; }

/* Feste Termine je Woche: wer kommt wann und wohin */
.termine { list-style: none; margin: 0 0 .3rem; padding: 0; display: grid; gap: .35rem; }
.termine li {
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  background: var(--fix-bg); border: 1px solid var(--fix-line);
  border-radius: 10px; padding: .55rem .8rem;
}
.termine .wann { flex: 0 0 11rem; }
.termine .wann b { display: block; font-size: .95rem; }
.termine .wann span { color: var(--ink-soft); font-size: .85rem; }
.termine .wer { flex: 1 1 12rem; }
.termine .wer b { display: block; }
@media (max-width: 620px) {
  .termine .wann { flex: 1 1 100%; }
}

/* Auswahlfeld im Zeitfenster: Art des Termins bestimmen */
.slot.waehler { padding: .2rem; }
.slot.waehler select {
  width: 100%; min-height: 2.4rem; border: 0; background: transparent;
  font: inherit; font-size: .78rem; color: inherit; text-align: center;
  text-align-last: center; cursor: pointer; padding: 0;
}
.slot.waehler select:focus { outline: none; }
.slot.waehler:focus-within { outline: 3px solid var(--brand); outline-offset: 2px; }
.slot.t-EC { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); font-weight: 600; }
.slot.t-SG { background: var(--todo-bg); border-color: var(--todo-line); color: var(--todo); font-weight: 600; }

/* Abgeschlossene Einheiten treten zurueck */
.einheit-wahl a.vorbei { opacity: .45; }
.einheit-wahl a.vorbei.is-now { opacity: 1; }

/* Das Auswahlfeld soll auch im schmalen Feld lesbar bleiben */
.slot.waehler select { text-overflow: ellipsis; }
@media (max-width: 700px) { .slot.waehler select { font-size: .7rem; } }

/* Sprache muss auf einen Blick lesbar sein, nicht nur farblich */
.lang { font-size: .8rem; letter-spacing: .06em; padding: .1rem .5rem; }

/* Kontingent je Person: gefuellte Punkte zeigen den Stand */
.punkt {
  display: inline-block; width: .7rem; height: .7rem; border-radius: 999px;
  border: 1.5px solid var(--ok-line); margin-right: .15rem; vertical-align: -.05em;
}
.punkt.voll { background: var(--ok); border-color: var(--ok); }
.slot .wer-kurz {
  display: block; font-size: .62rem; line-height: 1.1; font-weight: 700;
  margin-top: .1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Termine anderer Einheiten: sichtbar, aber deutlich als fremd erkennbar */
.slot.fremd {
  border-style: dashed; border-color: var(--fix-line);
  background: var(--fix-bg); cursor: default;
}
.fremd-eintrag { display: block; line-height: 1.2; color: var(--fix); }
.fremd-eintrag b { display: block; font-size: .74rem; }
.fremd-eintrag > span { display: block; font-size: .62rem; }
.fremd-dfe {
  display: inline-block !important; margin-top: .12rem;
  background: var(--fix); color: var(--card);
  border-radius: 4px; padding: 0 .3rem; font-weight: 700;
}

/* Wessen Termine sieht man hier? Ein falsches Kürzel muss auffallen. */
.quellzeile {
  background: var(--card); border-bottom: 1px solid var(--line);
  font-size: .85rem; color: var(--ink-soft); padding: .4rem 0;
}
.quellzeile b { color: var(--ink); }
.quellzeile.geraten { background: var(--todo-bg); border-bottom-color: var(--todo-line); color: var(--todo); }
.quellzeile .warnung { font-weight: 600; }

/* Trennlinie im Mehr-Menü: erst die Planung, dann die Technik */
.more-trenner {
  display: block; margin: .35rem .7rem .15rem; padding-top: .35rem;
  border-top: 1px solid var(--line);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-soft);
}

/* Rueckmeldung des automatischen Speicherns */
.speicher-info{margin:.5rem 0 0;font-size:.85rem;font-weight:600}
.speicher-info.ok{color:var(--ok)}
.speicher-info.stop{color:var(--stop)}

/* Hauptcoach der Einheit */
.hauptcoach{margin:.7rem 0 0;padding-top:.6rem;border-top:1px solid var(--line);font-size:.95rem}
.hauptcoach .rolle{display:inline-block;margin-right:.45rem;padding:.1rem .45rem;border-radius:4px;
  background:var(--bar-bg);color:var(--bar-ink);font-size:.75rem;font-weight:700;
  letter-spacing:.03em;text-transform:uppercase}

/* Farbe je teilnehmender Person.
   Die Art des Termins bleibt an Hintergrund und Schrift erkennbar (gruen =
   Coaching, bernstein = Schlussgespraech). Wer gemeint ist, zeigt zusaetzlich
   ein farbiger Balken am linken Rand und der Namenszug darunter - so sieht
   man auf einen Blick, welche Termine zusammengehoeren. */
.slot.waehler.on { position: relative; padding-left: .45rem; }
.slot.waehler.on::before {
  content: ""; position: absolute; left: 0; top: .25rem; bottom: .25rem;
  width: .28rem; border-radius: 999px; background: var(--person, var(--ok));
}
.slot.waehler.on .wer-kurz { color: var(--person, inherit); }

.slot.p1 { --person: #2f6f8f; }   /* Blau      */
.slot.p2 { --person: #8a4f7d; }   /* Beere     */
.slot.p3 { --person: #4c7a42; }   /* Gruen     */
.slot.p4 { --person: #a9603a; }   /* Kupfer    */
.slot.p5 { --person: #3f6f6a; }   /* Petrol    */
.slot.p6 { --person: #7a5ea8; }   /* Violett   */
.slot.p7 { --person: #96601a; }   /* Ocker     */
.slot.p8 { --person: #9c4040; }   /* Ziegelrot */

/* Dieselbe Farbe in der Namensliste der Einheit */
.person-punkt {
  display: inline-block; width: .55rem; height: .55rem; border-radius: 999px;
  margin-right: .4rem; vertical-align: .02em; background: var(--person, var(--line));
}
.person-punkt.p1 { --person: #2f6f8f; } .person-punkt.p2 { --person: #8a4f7d; }
.person-punkt.p3 { --person: #4c7a42; } .person-punkt.p4 { --person: #a9603a; }
.person-punkt.p5 { --person: #3f6f6a; } .person-punkt.p6 { --person: #7a5ea8; }
.person-punkt.p7 { --person: #96601a; } .person-punkt.p8 { --person: #9c4040; }

/* Terminliste einer Einheit */
.terminliste td, .terminliste th { padding: .4rem .6rem; white-space: nowrap; }
.terminliste tr.ist-fix td { background: var(--fix-bg); }
.terminliste tr.ist-geplant td { background: var(--ok-bg); }

/* ---------------------------------------------------------------- Mein Monat */
.legend .l-sg { background: var(--todo-bg); border-color: var(--todo-line); }

.monat-kopf {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin-bottom: 1rem;
}
.monat-kopf h1 { margin: 0; flex: 1 1 auto; font-size: 1.5rem; }
.monat-kopf .heute-knopf { flex: 0 0 auto; }

/* Kalenderblatt: KW-Spalte plus sieben Tage */
.monatsblatt {
  display: grid; grid-template-columns: 2.2rem repeat(7, minmax(7.5rem, 1fr));
  gap: 4px; min-width: 58rem;
}
.mb-kopf {
  text-align: center; font-size: .75rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-soft); padding: .3rem 0;
}
.mb-kopf.we { color: var(--line); }
.mb-kw {
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; color: var(--ink-soft);
}
.mb-tag {
  display: block; min-height: 5.2rem; padding: .3rem; border-radius: 8px;
  border: 1px solid var(--line); background: var(--card);
  text-decoration: none; color: inherit;
}
.mb-tag:hover { border-color: var(--brand); }
.mb-tag.fremd-monat { background: var(--bg); opacity: .5; }
.mb-tag.we { background: var(--bar-bg); }
.mb-tag.heute { border-color: var(--brand); border-width: 2px; padding: calc(.3rem - 1px); }
.mb-zahl { display: block; font-size: .8rem; font-weight: 700; color: var(--ink-soft); margin-bottom: .2rem; }
.mb-tag.heute .mb-zahl { color: var(--brand); }

.mb-termin {
  display: block; margin-bottom: 2px; padding: .18rem .3rem .18rem .45rem;
  border-radius: 5px; border-left: 4px solid var(--person, var(--ok));
  font-size: .68rem; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mb-termin b { display: block; font-weight: 700; }
.mb-termin.t-EC      { background: var(--ok-bg);   color: var(--ok); }
.mb-termin.t-SG      { background: var(--todo-bg); color: var(--todo); }
.mb-termin.t-EE      { background: var(--fix-bg);  color: var(--fix); }
.mb-termin.t-FA      { background: var(--fix-bg);  color: var(--fix); }
.mb-termin.t-ATELIER { background: var(--stop-bg); color: var(--stop); }

.mb-termin.p1 { --person: #2f6f8f; } .mb-termin.p2 { --person: #8a4f7d; }
.mb-termin.p3 { --person: #4c7a42; } .mb-termin.p4 { --person: #a9603a; }
.mb-termin.p5 { --person: #3f6f6a; } .mb-termin.p6 { --person: #7a5ea8; }
.mb-termin.p7 { --person: #96601a; } .mb-termin.p8 { --person: #9c4040; }

/* Neuer Tag in der Liste bekommt eine Trennlinie */
.terminliste tr.tag-start td { border-top: 2px solid var(--line); }