@font-face {
  font-family: "Marker";
  src: url("fonts/permanent-marker.woff2") format("woff2");
  font-display: swap;
}

:root {
  --door: #39433f;
  --door-ink: #e7ebe7;
  --sheet: #ecebe6;
  --sheet-hi: #f7f6f2;
  --ink: #1b1c1c;
  --muted: #555b60;
  --rule: #c3ccd0;
  --rule-strong: #8a979e;
  --red: #c8301f;
  --field: #f7f6f2;
  --shadow: 0 1px 2px rgb(0 0 0 / .18), 0 10px 30px -12px rgb(0 0 0 / .45);
  --tape-shadow: 0 1px 1.5px rgb(0 0 0 / .28);
  --hr: 2.75rem;
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --marker: "Marker", "Comic Sans MS", cursive;
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --door: #121413;
    --door-ink: #d9ddd9;
    --sheet: #242725;
    --sheet-hi: #2c2f2d;
    --ink: #ebe9e2;
    --muted: #b6bab4;
    --rule: #383c3a;
    --rule-strong: #5b615d;
    --red: #ff7462;
    --field: #1c1e1d;
    --shadow: 0 1px 2px rgb(0 0 0 / .5), 0 12px 34px -12px rgb(0 0 0 / .8);
    --tape-shadow: 0 1px 2px rgb(0 0 0 / .55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --door: #121413;
  --door-ink: #d9ddd9;
  --sheet: #242725;
  --sheet-hi: #2c2f2d;
  --ink: #ebe9e2;
  --muted: #b6bab4;
  --rule: #383c3a;
  --rule-strong: #5b615d;
  --red: #ff7462;
  --field: #1c1e1d;
  --shadow: 0 1px 2px rgb(0 0 0 / .5), 0 12px 34px -12px rgb(0 0 0 / .8);
  --tape-shadow: 0 1px 2px rgb(0 0 0 / .55);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--door);
  color: var(--ink);
  font: 400 1rem/1.45 var(--ui);
  font-variant-numeric: tabular-nums;
  accent-color: var(--red);
}
::selection { background: var(--red); color: #fff; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 2px; }
svg { width: 1.25rem; height: 1.25rem; flex: none; }

.marker { font-family: var(--marker); font-weight: 400; letter-spacing: .01em; }

/* Die Tür, auf der das laminierte Blatt klebt */
.door {
  min-height: 100dvh;
  padding: max(.75rem, env(safe-area-inset-top)) max(.75rem, env(safe-area-inset-right)) 2rem max(.75rem, env(safe-area-inset-left));
}

.sheet {
  background:
    linear-gradient(118deg, rgb(255 255 255 / .22), transparent 38%, transparent 70%, rgb(255 255 255 / .08)),
    var(--sheet);
  border-radius: 6px;
  box-shadow: var(--shadow), inset 0 0 0 1px rgb(255 255 255 / .06);
  color: var(--ink);
}

/* ---------- Login ---------- */
#login { display: grid; place-items: center; }
.login {
  width: min(24rem, 100%);
  padding: 2rem 1.5rem 1.75rem;
  display: grid;
  gap: 1rem;
}
.login__title { margin: 0; font-size: 2.5rem; line-height: 1; }
.login__lead { margin: 0 0 .5rem; color: var(--muted); max-width: 32ch; }

/* ---------- Kopfzeile ---------- */
.bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .5rem 1rem;
  color: var(--door-ink);
  max-width: 88rem;
  margin: 0 auto;
}
.bar__title { margin: 0; font-size: 1.75rem; line-height: 1; }
.week-nav { display: flex; align-items: center; gap: .25rem; justify-self: center; }
.week-nav__label { margin: 0 .5rem; text-align: center; line-height: 1.15; min-width: 9.5rem; }
.week-nav__label strong { display: block; font-size: 1.125rem; }
.week-nav__label span { font-size: .8125rem; opacity: .8; }
.bar__end { display: flex; align-items: center; gap: 1rem; justify-self: end; }
.whoami { margin: 0; font-size: .875rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  border: 0; border-radius: 50%;
  background: transparent; color: inherit;
  transition: background-color .15s;
}
.icon-btn:hover { background: rgb(255 255 255 / .1); }

.text-btn {
  border: 0; background: none; padding: .5rem .25rem;
  text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px;
  color: inherit;
}
.text-btn:hover { text-decoration-thickness: 2px; }
.text-btn--danger { color: var(--red); }

/* Knopf als Streifen Gaffa */
.tape-btn {
  border: 0; padding: 0; background: none;
  transform: rotate(-.6deg);
  transition: transform .15s var(--ease);
}
.tape-btn__body {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 2.75rem;
  padding: .5rem 1.4rem;
  background: var(--tape-texture), #161616;
  color: #f4f4f0;
  font-weight: 650;
  -webkit-mask: var(--tear-x);
  mask: var(--tear-x);
  filter: drop-shadow(var(--tape-shadow));
}
.tape-btn:hover { transform: rotate(-.6deg) translateY(-1px); }
.tape-btn:active { transform: rotate(-.6deg) translateY(1px); }
.tape-btn[disabled] { opacity: .55; cursor: progress; }
.tape-btn--small .tape-btn__body { padding: .4rem 1.1rem; }
.tape-btn--danger .tape-btn__body { background: var(--tape-texture), #b3261a; }
:root[data-theme="dark"] .tape-btn__body { background: var(--tape-texture), #e8e6df; color: #151515; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tape-btn__body { background: var(--tape-texture), #e8e6df; color: #151515; }
}
.tape-btn--danger .tape-btn__body { background: var(--tape-texture), #b3261a !important; color: #fff !important; }

/* ---------- Legende ---------- */
.legend {
  list-style: none; margin: .75rem auto; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem .75rem;
  max-width: 88rem;
}
.legend li { display: flex; }
.legend .tape__body { padding: .15rem .8rem; font-size: 1rem; }
.legend .you { font-family: var(--ui); font-size: .75rem; margin-left: .35rem; opacity: .85; }

.notice {
  max-width: 88rem; margin: 0 auto .75rem;
  color: var(--door-ink); font-size: .9375rem;
}
.notice button { color: inherit; }

/* ---------- Gaffa-Streifen ---------- */
:root {
  --tear-x:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 24' preserveAspectRatio='none'%3E%3Cpath d='M6 0H2.2L4 2.5 1.2 5.6 3.4 8.2 0 11.4l2.6 3L.8 17.3l3 2.5L1.6 24H6z'/%3E%3C/svg%3E") left / 6px 24px repeat-y,
    linear-gradient(#000 0 0) center / calc(100% - 11px) 100% no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 24' preserveAspectRatio='none'%3E%3Cpath d='M0 0h3.8L2 2.8l2.9 2.9-2.3 3L6 11.7l-2.7 2.8 2 3.1-3.1 2.4L4.3 24H0z'/%3E%3C/svg%3E") right / 6px 24px repeat-y;
  --tear-y:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 6' preserveAspectRatio='none'%3E%3Cpath d='M0 6V2.2L2.5 4 5.6 1.2 8.2 3.4 11.4 0l3 2.6L17.3.8l2.5 3L24 1.6V6z'/%3E%3C/svg%3E") top / 24px 6px repeat-x,
    linear-gradient(#000 0 0) center / 100% calc(100% - 11px) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 6' preserveAspectRatio='none'%3E%3Cpath d='M0 0v3.8L2.8 2l2.9 2.9 3-2.3L11.7 6l2.8-2.7 3.1 2 2.4-3.1L24 4.3V0z'/%3E%3C/svg%3E") bottom / 24px 6px repeat-x;
  --tape-texture:
    repeating-linear-gradient(90deg, rgb(255 255 255 / .05) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgb(0 0 0 / .05) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, rgb(255 255 255 / .16), transparent 45%, rgb(0 0 0 / .08));
}

.tape {
  --c: #777;
  border: 0; padding: 0; margin: 0;
  background: none; text-align: left;
  transform: rotate(var(--tilt, 0deg));
  transition: transform .18s var(--ease);
}
.tape__body {
  display: flex; flex-direction: column; justify-content: center;
  width: 100%; height: 100%;
  padding: .45rem .8rem;
  background: var(--tape-texture), var(--c);
  color: var(--tape-ink, #121212);
  -webkit-mask: var(--tear-x);
  mask: var(--tear-x);
  filter: drop-shadow(var(--tape-shadow));
  overflow: hidden;
}
.tape--dark { --tape-ink: #f6f5f0; }
/* Schwarzes Gaffa auf dunklem Blatt: etwas Glanz, damit der Streifen sichtbar bleibt. */
:root[data-theme="dark"] .tape--dark .tape__body { background: var(--tape-texture), color-mix(in srgb, var(--c) 78%, #9aa09c); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tape--dark .tape__body { background: var(--tape-texture), color-mix(in srgb, var(--c) 78%, #9aa09c); }
}
.tape__time { font: 600 .8125rem/1.2 var(--ui); opacity: .88; }
.tape__name { font-family: var(--marker); font-size: 1.125rem; line-height: 1.1; overflow-wrap: anywhere; }
.tape__note { font-size: .8125rem; line-height: 1.25; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tape__mine { font: 700 .6875rem/1 var(--ui); text-transform: uppercase; letter-spacing: .06em; }
button.tape:hover { transform: rotate(var(--tilt, 0deg)) translateY(-1px); }
button.tape:hover .tape__body { filter: drop-shadow(0 3px 4px rgb(0 0 0 / .3)); }

.tape.is-stuck { animation: stick .34s var(--ease); }
@keyframes stick {
  0% { transform: rotate(calc(var(--tilt, 0deg) - 2deg)) scale(1.06); opacity: .4; }
  60% { transform: rotate(var(--tilt, 0deg)) scale(.99); opacity: 1; }
  100% { transform: rotate(var(--tilt, 0deg)) scale(1); }
}
.tape.is-peeling { animation: peel .26s ease-in forwards; pointer-events: none; }
@keyframes peel {
  to { transform: rotate(calc(var(--tilt, 0deg) - 7deg)) translate(-6px, -10px) scale(.96); opacity: 0; }
}

/* ---------- Plan ---------- */
.plan { max-width: 88rem; margin: 0 auto; padding: .5rem .75rem 1rem; position: relative; }
.plan[aria-busy="true"] > * { opacity: .5; transition: opacity .2s; }

.day-head { margin: 0; line-height: 1.1; position: relative; display: inline-block; padding: .35rem .6rem; }
.day-head__dow { font-family: var(--marker); font-size: 1.375rem; }
.day-head__date { font-size: .8125rem; color: var(--muted); margin-left: .35rem; }
.day-head .ring { position: absolute; inset: -.1rem -.35rem; width: auto; height: auto; color: var(--red); pointer-events: none; }
.day-head.is-past, .list .is-past .hint { opacity: .6; }
.is-past .tape__body { filter: saturate(.35) brightness(.96) drop-shadow(var(--tape-shadow)); }

.gap {
  border: 1.5px dashed transparent; border-radius: 4px;
  background: none; color: var(--muted);
  text-align: left; font-size: .875rem;
  transition: border-color .15s, background-color .15s, color .15s;
}
.gap:hover, .gap:focus-visible { border-color: var(--rule-strong); color: var(--ink); background: rgb(255 255 255 / .18); }

.empty-state { text-align: center; padding: 3rem 1rem; max-width: 34rem; margin: 0 auto; }
.empty-state p { margin: 0 0 1rem; }

/* Handy: ein Tagesblatt unter dem anderen */
.list { display: grid; }
.list .day { padding: .75rem 0 .9rem; border-top: 1px solid var(--rule); }
.list .day:first-child { border-top: 0; }
.list ol { list-style: none; margin: .35rem 0 0; padding: 0; display: grid; gap: .45rem; }
.list .tape { display: block; width: 100%; min-height: 3.25rem; }
.list .tape__body { flex-direction: row; align-items: center; gap: .75rem; padding: .55rem 1rem; }
.list .tape__time { min-width: 5.9rem; }
.list .tape__text { display: grid; min-width: 0; }
.list .gap { width: 100%; min-height: 2.75rem; padding: .5rem 1rem; border-color: var(--rule); display: flex; align-items: center; gap: .5rem; }
.list .gap svg { width: 1rem; height: 1rem; }
.grid { display: none; }

/* Desktop: Wochenraster wie an der Tür */
@media (min-width: 760px) {
  .door { padding: 1.25rem 1.5rem 3rem; }
  .plan { padding: .75rem 1rem 1.25rem .5rem; }
  .list { display: none; }
  .grid {
    display: grid;
    grid-template-columns: 3.5rem repeat(7, minmax(0, 1fr));
  }
  .grid__head { text-align: center; padding-bottom: .5rem; border-bottom: 2px solid var(--rule-strong); }
  .grid__corner { border-bottom: 2px solid var(--rule-strong); }
  .grid__axis { position: relative; height: calc(var(--hours) * var(--hr)); }
  .grid__axis span {
    position: absolute; right: .5rem; transform: translateY(-50%);
    font-size: .75rem; color: var(--muted);
  }
  .grid__col {
    position: relative;
    height: calc(var(--hours) * var(--hr));
    border-left: 1px solid var(--rule);
    background-image:
      linear-gradient(var(--rule) 1px, transparent 1px),
      linear-gradient(transparent calc(50% - .5px), color-mix(in srgb, var(--rule) 55%, transparent) 0 calc(50% + .5px), transparent 0);
    background-size: 100% var(--hr);
  }
  .grid__col.is-past { opacity: 1; background-color: color-mix(in srgb, var(--ink) 4%, transparent); }
  .grid .tape, .grid .gap {
    position: absolute; left: .3rem; right: .3rem;
    top: calc(var(--from) * var(--hr) / 60);
    height: calc(var(--len) * var(--hr) / 60);
  }
  .grid .tape { z-index: 2; }
  .grid .tape__body { -webkit-mask: var(--tear-y); mask: var(--tear-y); padding: .5rem .55rem; justify-content: flex-start; }
  .grid .tape__note { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .grid .tape--short .tape__body { flex-direction: row; align-items: center; gap: .4rem; padding-block: .2rem; }
  .grid .tape--short .tape__note, .grid .tape--short .tape__mine { display: none; }
  .grid .gap { z-index: 1; padding: .35rem .5rem; display: flex; align-items: flex-start; gap: .3rem; font-size: .8125rem;
    left: .45rem; right: .45rem; border-color: color-mix(in srgb, var(--rule-strong) 45%, transparent); }
  .grid .gap > * { opacity: .7; transition: opacity .15s; }
  .grid .gap:hover > *, .grid .gap:focus-visible > * { opacity: 1; }
  .grid .gap svg { width: .9rem; height: .9rem; margin-top: .1rem; }
  .close-line {
    position: absolute; left: 0; right: 0; z-index: 1; height: 0;
    top: calc(var(--from) * var(--hr) / 60);
    border-top: 2px dashed color-mix(in srgb, var(--red) 70%, transparent); pointer-events: none;
  }
  .grid__axis .close-label { transform: translateY(-155%) rotate(-3deg); font: 400 .9375rem/1 var(--marker); color: var(--red); right: .3rem; }
  .now-line {
    position: absolute; left: 0; right: 0; z-index: 3; height: 0;
    top: calc(var(--from) * var(--hr) / 60);
    border-top: 2px solid var(--red); pointer-events: none;
  }
  .now-line::before {
    content: ""; position: absolute; left: -5px; top: -6px;
    width: 10px; height: 10px; border-radius: 50%; background: var(--red);
  }
}

@media (max-width: 759px) {
  .bar { grid-template-columns: 1fr auto; }
  .week-nav { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; justify-content: space-between; }
  .bar__end { gap: .5rem; }
  .whoami { display: none; }
  .bar__title { font-size: 1.5rem; }
}

@media (min-width: 760px) { .account { display: none !important; } }
.account {
  display: flex; max-width: 88rem; margin: 1rem auto 0;
  color: var(--door-ink); font-size: .875rem; gap: .75rem; align-items: center; justify-content: center;
}

/* ---------- Dialoge ---------- */
.panel {
  border: 0; padding: 0;
  width: min(30rem, calc(100% - 1.5rem));
  max-height: calc(100dvh - 2rem);
  background: var(--sheet); color: var(--ink);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.panel--wide { width: min(46rem, calc(100% - 1.5rem)); }
.panel::backdrop { background: rgb(10 12 11 / .55); }
.panel[open] { animation: panel-in .22s var(--ease); }
@keyframes panel-in { from { transform: translateY(12px); opacity: 0; } }
.panel > form, .panel > div { padding: 1.5rem 1.25rem 1.25rem; display: grid; gap: .9rem; }
.panel__title { margin: 0; font-size: 1.75rem; line-height: 1.1; }
.panel__actions { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .5rem; }
.panel__aside { margin-right: auto; }
@media (max-width: 759px) {
  .panel { width: 100%; max-width: none; margin: auto 0 0; border-radius: 12px 12px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .panel[open] { animation-name: sheet-in; }
  @keyframes sheet-in { from { transform: translateY(40%); opacity: .3; } }
}

.field { display: grid; gap: .3rem; min-width: 0; }
.field__label { font-size: .8125rem; font-weight: 600; color: var(--muted); }
.optional { font-weight: 400; }
.field input, .field select {
  width: 100%; min-height: 2.75rem;
  padding: .5rem .65rem;
  border: 0; border-bottom: 2px solid var(--rule-strong);
  border-radius: 3px 3px 0 0;
  background: var(--field);
}
.field input:focus, .field select:focus { outline: none; border-bottom-color: var(--red); box-shadow: 0 2px 0 var(--red); }
.field input[aria-invalid="true"] { border-bottom-color: var(--red); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.check { display: flex; align-items: center; gap: .6rem; min-height: 2.75rem; }
.check input { width: 1.25rem; height: 1.25rem; }
.hint { margin: 0; font-size: .875rem; color: var(--muted); }
.hint--warn { color: var(--red); }
.form-error { color: var(--red); font-size: .9375rem; font-weight: 550; }
.form-error:empty { display: none; }
.form-error ul { margin: .35rem 0 0; padding-left: 1.1rem; font-weight: 400; color: var(--ink); }
p.form-error { margin: 0; }

.detail__tape { margin: 0; display: flex; }
.detail__tape .tape__body { width: auto; padding: .5rem 1.4rem; font-size: 1.75rem; }
.detail__when { margin: 0; font-size: 1.125rem; font-weight: 600; }
.detail__note { margin: 0; overflow-wrap: anywhere; }
.detail__note:empty { display: none; }
.detail__series { margin: 0; display: flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .9375rem; }

.band-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.band-row {
  display: grid; grid-template-columns: 2.75rem minmax(0, 1.2fr) minmax(0, 1fr) auto auto;
  gap: .5rem; align-items: end; padding: .6rem 0; border-top: 1px solid var(--rule);
}
.band-row .field__label { font-size: .75rem; }
.band-row input[type="color"] { padding: .2rem; min-height: 2.75rem; width: 2.75rem; border-radius: 3px; border: 0; background: var(--field); }
.band-row .form-error { grid-column: 1 / -1; }
.band-row--new { border-top: 2px solid var(--rule-strong); }
@media (max-width: 640px) {
  .band-row { grid-template-columns: 2.75rem minmax(0, 1fr); }
  .band-row > :nth-child(3) { grid-column: 1 / -1; }
  .band-row > .row-actions { grid-column: 1 / -1; }
}
.row-actions { display: flex; gap: .75rem; align-items: center; justify-content: flex-end; }

.noscript { color: var(--door-ink); text-align: center; padding: 3rem 1rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}