/* Mountain Life · Brötchenservice — guest page and Christian's overview.
 * Palette, fonts and roles as in the bus app (06_Busapp/busapp/app.css) and the website tokens,
 * so the guest services read as one. "Drücken = rund · Lesen = eckig". Kupfer is never text on a light surface.
 * Fonts: Literata and Instrument Sans, SIL Open Font License 1.1 (Fontsource subsets of the website).
 */

@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/fonts/literata-core.woff2') format('woff2');
  unicode-range: U+20-7E, U+A0-BF, U+C4, U+D6-D7, U+DC, U+DF-E0, U+E4, U+E7-E9, U+EB, U+EF, U+F6, U+FC, U+2009, U+2011, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+202F, U+2039-203A, U+20AC, U+2190, U+2192, U+2212;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/fonts/literata-latin.woff2') format('woff2');
  unicode-range: U+7F-9F, U+C0-C3, U+C5-D5, U+D8-DB, U+DD-DE, U+E1-E3, U+E5-E6, U+EA, U+EC-EE, U+F0-F5, U+F7-FB, U+FD-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-2008, U+200A-2010, U+2012, U+2015-2017, U+201B, U+201F-2021, U+2023-2025, U+2027-202E, U+2030-2038, U+203B-206F, U+2122, U+2191, U+2193, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/instrument-sans-core.woff2') format('woff2');
  unicode-range: U+20-7E, U+A0-BF, U+C4, U+D6-D7, U+DC, U+DF-E0, U+E4, U+E7-E9, U+EB, U+EF, U+F6, U+FC, U+2009, U+2011, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+202F, U+2039-203A, U+20AC, U+2190, U+2192, U+2212;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/instrument-sans-latin.woff2') format('woff2');
  unicode-range: U+7F-9F, U+C0-C3, U+C5-D5, U+D8-DB, U+DD-DE, U+E1-E3, U+E5-E6, U+EA, U+EC-EE, U+F0-F5, U+F7-FB, U+FD-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-2008, U+200A-2010, U+2012, U+2015-2017, U+201B, U+201F-2021, U+2023-2025, U+2027-202E, U+2030-2038, U+203B-206F, U+2122, U+2191, U+2193, U+2215, U+FEFF, U+FFFD;
}
/* Metric-matched fallbacks (values from the website's fonts.css): no jump when the fonts arrive. */
@font-face {
  font-family: 'Literata Fallback';
  src: local('Georgia');
  size-adjust: 109.3%;
  ascent-override: 107.68%;
  descent-override: 28.18%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Instrument Sans Fallback';
  src: local('Arial'), local('ArialMT');
  size-adjust: 102.74%;
  ascent-override: 94.42%;
  descent-override: 24.33%;
  line-gap-override: 0%;
}

:root {
  color-scheme: light;
  /* Palette (Styleguide v1.2) */
  --c-nacht: #22242a;
  --c-nacht-hover: #2e3138;
  --c-nacht-tiefst: #16181c;
  --c-kupfer: #ceaa8a;
  --c-kupfer-dunkel: #7e5f3c;
  --c-kupfer-wash: #f3ebe3;
  --c-nebel: #ebeff1;
  --c-weiss: #ffffff;
  --c-text: #3a3d44;
  --c-text-neben: #60646d;
  --c-linie: #d7dde1;
  --c-n-text: #d5dae0;
  --c-n-neben: #c9cfd6;

  --font-sans: 'Instrument Sans', 'Instrument Sans Fallback', Arial, sans-serif;
  --font-serif: 'Literata', 'Literata Fallback', Georgia, serif;

  /* Light tone: Nebel page, white cards, Nacht head */
  --surface: var(--c-nebel);
  --card: var(--c-weiss);
  --fg: var(--c-text);
  --fg-strong: var(--c-nacht);
  --fg-muted: var(--c-text-neben);
  --accent: var(--c-kupfer-dunkel);
  --divider: var(--c-linie);
  --focus: var(--c-kupfer-dunkel);
  --marked-bg: var(--c-kupfer-wash);
  --marked-fg: var(--c-kupfer-dunkel);
  --btn-bg: var(--c-nacht);
  --btn-fg: var(--c-weiss);
  --btn2-fg: var(--c-nacht);
  --head-bg: var(--c-nacht);
  --ok: #3d6b52; /* Tanne (5.2 : 1 on Nebel) */
  --error: #a4412e; /* Ziegel (5.4 : 1 on Nebel) */

  --r-pill: 9999px;
  --gutter: 1.25rem;
  --wrap: 34rem;
  --wrap-breit: 64rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --surface: var(--c-nacht);
    --card: var(--c-nacht-hover);
    --fg: var(--c-n-text);
    --fg-strong: var(--c-weiss);
    --fg-muted: var(--c-n-neben);
    --accent: var(--c-kupfer);
    --divider: rgb(255 255 255 / 0.14);
    --focus: var(--c-kupfer);
    --marked-bg: rgb(206 170 138 / 0.14);
    --marked-fg: var(--c-kupfer);
    --btn-bg: var(--c-kupfer);
    --btn-fg: var(--c-nacht);
    --btn2-fg: var(--c-kupfer);
    --head-bg: var(--c-nacht-tiefst);
    --ok: #8fc0a4;
    --error: #e3907c;
  }
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --surface: var(--c-nacht);
  --card: var(--c-nacht-hover);
  --fg: var(--c-n-text);
  --fg-strong: var(--c-weiss);
  --fg-muted: var(--c-n-neben);
  --accent: var(--c-kupfer);
  --divider: rgb(255 255 255 / 0.14);
  --focus: var(--c-kupfer);
  --marked-bg: rgb(206 170 138 / 0.14);
  --marked-fg: var(--c-kupfer);
  --btn-bg: var(--c-kupfer);
  --btn-fg: var(--c-nacht);
  --btn2-fg: var(--c-kupfer);
  --head-bg: var(--c-nacht-tiefst);
  --ok: #8fc0a4;
  --error: #e3907c;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--head-bg);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--surface);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
p,
ul,
ol {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* Head */

.kopf {
  background: var(--head-bg);
  color: var(--c-weiss);
  padding-top: env(safe-area-inset-top);
}

.kopf-innen {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0.95rem var(--gutter);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.verwaltung .kopf-innen {
  max-width: var(--wrap-breit);
}

.marke img {
  display: block;
  height: 0.9rem;
  width: auto;
}

.kopf-titel {
  font-family: var(--font-serif);
  color: var(--c-n-text);
}

/* Narrow phones: logo and badge only, the page title says the rest. */
@media (max-width: 30rem) {
  .verwaltung .kopf-titel {
    display: none;
  }
}

.test-marke {
  margin-left: auto;
  white-space: nowrap;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-nacht);
  background: var(--c-kupfer);
  padding: 0.15rem 0.65rem;
  border-radius: var(--r-pill);
}

.sprache {
  margin-left: auto;
  background: none;
  border: 1px solid rgb(255 255 255 / 0.35);
  color: var(--c-weiss);
  border-radius: var(--r-pill);
  padding: 0.3rem 0.9rem;
  font-size: 0.875rem;
  cursor: pointer;
}

/* Layout */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 1.75rem var(--gutter) 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.wrap.breit {
  max-width: var(--wrap-breit);
}

.leise {
  color: var(--fg-muted);
}

.klein {
  font-size: 0.875rem;
}

.ueber {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Guest: stay */

.wohnung {
  margin-top: 0.4rem;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 2.25rem;
  line-height: 1.15;
  color: var(--fg-strong);
}

.wohnung span {
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--fg-muted);
}

.zeitraum {
  margin-top: 0.3rem;
  color: var(--fg-muted);
}

.regel {
  margin-top: 1rem;
}

.wechsel {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
}

/* Guest: mornings */

.morgen-leiste {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter);
  margin: 0 calc(var(--gutter) * -1);
  padding: 0.25rem var(--gutter) 0.5rem;
  scrollbar-width: none;
}

.morgen-leiste::-webkit-scrollbar {
  display: none;
}

.morgen {
  position: relative;
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-width: 4.5rem;
  padding: 0.55rem 0.85rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid var(--divider);
  border-radius: 1.5rem;
  background: var(--card);
  color: var(--fg-strong);
  cursor: pointer;
}

.morgen .wt {
  font-size: 0.8125rem;
  color: var(--fg-muted);
}

.morgen .dt {
  font-weight: 600;
}

.morgen.aktiv {
  background: var(--btn-bg);
  border-color: var(--btn-bg);
  color: var(--btn-fg);
}

.morgen.aktiv .wt {
  color: inherit;
  opacity: 0.8;
}

.morgen.zu:not(.aktiv) {
  opacity: 0.55;
}

.morgen .punkt {
  position: absolute;
  top: 0.45rem;
  right: 0.6rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--accent);
}

.morgen.aktiv .punkt {
  background: var(--c-kupfer);
}

/* Guest: one morning */

.tag {
  margin: 0 calc(var(--gutter) * -1);
  padding: 1.35rem var(--gutter) 1.5rem;
  background: var(--card);
}

@media (min-width: 36rem) {
  .tag {
    margin: 0;
    padding: 1.5rem;
    border: 1px solid var(--divider);
  }
}

.tag-titel {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--fg-strong);
}

.tag-status {
  margin-top: 0.25rem;
  font-size: 0.9375rem;
  color: var(--fg-muted);
}

.bestand {
  margin-top: 0.75rem;
}

.produkte {
  margin-top: 1rem;
}

/* Name next to the counter; description and allergens below it, across the full width. */
.produkt {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) auto;
  grid-template-areas:
    'bild name zaehler'
    'bild was was'
    'bild info info';
  align-items: center;
  column-gap: 0.85rem;
  padding: 0.8rem 0;
  border-top: 1px solid var(--divider);
}

.p-text {
  display: contents;
}

.p-name {
  grid-area: name;
}

.p-was {
  grid-area: was;
}

.p-info {
  grid-area: info;
}

.zaehler {
  grid-area: zaehler;
}

/* Photos sit on white, also in the dark tone: like a product shot on a plate. */
.p-bild {
  grid-area: bild;
  width: 4rem;
  aspect-ratio: 8 / 5;
  background: var(--c-weiss);
  overflow: hidden;
}

.p-bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-was {
  display: block;
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--fg);
}

@media (min-width: 36rem) {
  .produkt {
    grid-template-columns: 6rem minmax(0, 1fr) auto;
  }

  .p-bild {
    width: 6rem;
  }
}

.produkt:last-child {
  border-bottom: 1px solid var(--divider);
}

.p-name {
  display: block;
  font-weight: 600;
  color: var(--fg-strong);
}

.p-marke {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0.05rem 0.55rem;
  border-radius: var(--r-pill);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--marked-fg);
  background: var(--marked-bg);
  vertical-align: 0.1em;
}

.p-info {
  display: block;
  font-size: 0.875rem;
  color: var(--fg-muted);
}

.zaehler {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.rund {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--divider);
  border-radius: 50%;
  background: transparent;
  color: var(--fg-strong);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.rund:disabled {
  opacity: 0.35;
  cursor: default;
}

.menge {
  min-width: 1.75rem;
  text-align: center;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--fg-strong);
}

.wiederholen {
  margin-top: 1.1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  cursor: pointer;
}

.wiederholen input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.15rem 0 0;
  accent-color: var(--btn-bg);
}

.abschluss {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

.summe b {
  font-size: 1.125rem;
  color: var(--fg-strong);
}

.summe span {
  font-size: 0.875rem;
  color: var(--fg-muted);
}

.meldung {
  font-size: 0.9375rem;
}

.meldung.ok {
  color: var(--ok);
}

.meldung.error {
  color: var(--error);
}

.meldung.offen {
  color: var(--fg-muted);
}

/* Guest: all mornings */

.uebersicht h2 {
  margin-bottom: 0.5rem;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--fg-strong);
}

.zeile {
  width: 100%;
  display: flex;
  gap: 1rem;
  padding: 0.7rem 0;
  border: 0;
  border-top: 1px solid var(--divider);
  background: none;
  text-align: left;
  cursor: pointer;
}

.z-tag {
  flex: 0 0 6rem;
  font-weight: 600;
  color: var(--fg-strong);
}

.zeile.aktiv .z-tag {
  color: var(--accent);
}

/* Guest: booking number and choice of apartment */

.eingabe {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}

.eingabe input {
  width: 100%;
  max-width: 14rem;
  min-height: 3rem;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--divider);
  border-radius: 0;
  background: var(--surface);
  color: var(--fg-strong);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.auswahl {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.wahl {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--divider);
  background: var(--card);
  color: var(--fg);
  text-align: left;
  cursor: pointer;
}

.wahl-tuer {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--fg-strong);
}

.wahl-tuer span {
  font-size: 1rem;
  color: var(--fg-muted);
}

.wahl-zeit {
  color: var(--fg-muted);
}

.hinweis-karte {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.5rem;
  border: 1px solid var(--divider);
  background: var(--card);
}

.rechtliches {
  display: grid;
  gap: 0.5rem;
  margin-top: 2.5rem;
  font-size: 0.8125rem;
  color: var(--fg-muted);
}

.test-hinweis {
  padding: 0.6rem 0.9rem;
  font-size: 0.875rem;
  color: var(--marked-fg);
  background: var(--marked-bg);
}

/* Buttons */

.knopf,
.knopf2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.65rem 1.4rem;
  border-radius: var(--r-pill);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.knopf {
  border: 0;
  background: var(--btn-bg);
  color: var(--btn-fg);
}

.knopf2 {
  border: 1px solid currentColor;
  background: transparent;
  color: var(--btn2-fg);
}

.knopf:disabled {
  opacity: 0.4;
  cursor: default;
}

.text-knopf {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font-size: 0.9375rem;
  text-decoration: underline;
  cursor: pointer;
}

.knoepfe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

/* Overview (Christian) */

.verwaltung h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.75rem;
  line-height: 1.25;
  color: var(--fg-strong);
}

.tag-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.tag-nav a,
.zurueck a,
.weiteres a,
.aktionen a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.stand {
  margin-top: -1rem;
  color: var(--fg-muted);
}

.bestelltage {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.bestelltage ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.bestelltage a {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--divider);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--fg);
  font-size: 0.9375rem;
  text-decoration: none;
}

.bestelltage a b {
  color: var(--fg-strong);
}

.bestelltage a[aria-current='page'] {
  border-color: var(--btn-bg);
  background: var(--btn-bg);
  color: var(--btn-fg);
}

.bestelltage a[aria-current='page'] b {
  color: inherit;
}

.tag-wahl {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
}

.block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.25rem 1.5rem 1.5rem;
  border: 1px solid var(--divider);
  background: var(--card);
}

.block h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.3rem;
  color: var(--fg-strong);
}

.block h2 .leise {
  margin-left: 0.4rem;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
}

.summen {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.35rem 1.5rem;
}

.summen b {
  display: inline-block;
  min-width: 2ch;
  text-align: right;
  font-size: 1.125rem;
  color: var(--fg-strong);
}

.tabelle-rahmen {
  width: 100%;
  overflow-x: auto;
}

.tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.tabelle th,
.tabelle td {
  padding: 0.6rem 0.75rem 0.6rem 0;
  border-top: 1px solid var(--divider);
  text-align: left;
  vertical-align: top;
}

.tabelle thead th {
  border-top: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--fg-muted);
}

.tabelle th[scope='row'] {
  font-weight: 400;
  white-space: nowrap;
}

.tabelle .zahl {
  text-align: right;
  white-space: nowrap;
}

.tabelle .gesamt th,
.tabelle .gesamt td {
  font-weight: 600;
  color: var(--fg-strong);
}

.tuer {
  font-weight: 600;
  color: var(--fg-strong);
}

.flagge {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.55rem;
  border-radius: var(--r-pill);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--marked-fg);
  background: var(--marked-bg);
}

.aktionen {
  white-space: nowrap;
}

.aktionen form,
.aktionen a {
  display: inline;
  margin-right: 0.9rem;
}

.feld {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.875rem;
  color: var(--fg-muted);
}

.feld input,
.feld select {
  min-height: 2.75rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--divider);
  border-radius: 0;
  background: var(--surface);
  color: var(--fg-strong);
  font-size: 1rem;
}

.karte-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.mengen {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 0.75rem;
}

.zeilen-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
}

.weiteres li {
  padding: 0.2rem 0;
}

.qr {
  width: 15rem;
  max-width: 100%;
  background: var(--c-weiss);
}

.qr svg {
  display: block;
  width: 100%;
  height: auto;
}

.ergebnis .feld,
.ergebnis input {
  width: 100%;
}

.ergebnis input {
  font-size: 0.875rem;
}

.fehler {
  color: var(--error);
}

.mail {
  max-width: 40rem;
  border: 1px solid var(--divider);
  background: var(--card);
}

.mail-kopf {
  padding: 0.8rem 1.25rem;
  border-bottom: 1px solid var(--divider);
  font-weight: 600;
  color: var(--fg-strong);
}

.mail-kopf span {
  margin-right: 0.6rem;
  font-weight: 400;
  color: var(--fg-muted);
}

.mail-text {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.mail-text h3 {
  margin-top: 0.4rem;
  font-size: 1rem;
  color: var(--fg-strong);
}

.packliste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
}

.sackerl {
  padding: 1rem 1.25rem;
  border: 1px solid var(--divider);
  background: var(--card);
  break-inside: avoid;
}

.sackerl-kopf {
  margin-bottom: 0.4rem;
}

.tuer.gross {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.75rem;
}

.sackerl li {
  padding: 0.2rem 0;
}

.sackerl input {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0 0.35rem 0 0;
  vertical-align: -0.15em;
}

.hinweis-gruppe,
.hinweis {
  padding: 0.6rem 0.9rem;
  font-size: 0.9375rem;
  color: var(--marked-fg);
  background: var(--marked-bg);
}

.hinweis-gruppe a {
  color: inherit;
  font-weight: 600;
}

/* Final bills: one card per stay, lines as they go into easybooking. */
.rechnungen {
  width: 100%;
  display: grid;
  gap: 1rem;
}

.rechnung {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 1rem 1.25rem 1.25rem;
  border: 1px solid var(--divider);
  background: var(--surface);
}

.rechnung-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.9rem;
}

.rechnung h3 {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 500;
}

.status {
  display: inline-block;
  padding: 0.05rem 0.6rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: 0.8125rem;
  font-weight: 600;
}

.status.offen {
  color: var(--marked-fg);
  background: var(--marked-bg);
}

.status.ok {
  color: var(--ok);
  border-color: currentColor;
}

.status.alarm {
  color: var(--error);
  border-color: currentColor;
}

.je-morgen summary {
  cursor: pointer;
  font-size: 0.9375rem;
  color: var(--fg-muted);
}

.je-morgen ul {
  margin-top: 0.4rem;
  display: grid;
  gap: 0.2rem;
  font-size: 0.9375rem;
}

.rechnungen-kurz {
  display: grid;
  gap: 0.45rem;
}

.rechnungen-kurz a {
  text-decoration: none;
}

.zahlweg {
  margin-top: -0.5rem;
  font-size: 0.875rem;
  color: var(--fg-muted);
}

/* Welcome cards: A7 (105 × 74 mm), eight per A4 sheet, dashed lines to cut along. Printed always light. */
.kartenbogen {
  display: grid;
  grid-template-columns: repeat(2, 105mm);
  grid-auto-rows: 74.25mm;
  justify-content: start;
  overflow-x: auto;
}

.willkommen {
  width: 105mm;
  height: 74.25mm;
  padding: 7mm 6mm 6mm 7mm;
  display: flex;
  align-items: center;
  gap: 5mm;
  border: 0.2mm dashed #c9cfd6;
  background: #fff;
  color: #22242a;
  break-inside: avoid;
}

.w-text {
  flex: 1 1 auto;
  min-width: 0;
}

.w-logo {
  display: block;
  height: 3mm;
  width: auto;
}

.w-titel {
  margin-top: 3.5mm;
  padding-top: 2.5mm;
  border-top: 0.5mm solid #ceaa8a;
  font-family: var(--font-serif);
  font-size: 12.5pt;
  font-weight: 500;
  line-height: 1.15;
}

.w-en {
  margin-top: 0.8mm;
  font-size: 7pt;
  color: #60646d;
}

.w-tuer {
  margin-top: 3mm;
  font-family: var(--font-serif);
  font-size: 15pt;
  font-weight: 500;
}

.w-zeit {
  font-size: 8pt;
  color: #3a3d44;
}

.w-regel {
  margin-top: 2.5mm;
  font-size: 6.5pt;
  line-height: 1.35;
  color: #3a3d44;
}

.w-regel span {
  color: #60646d;
}

.w-qr {
  flex: 0 0 33mm;
}

.w-qr svg {
  display: block;
  width: 33mm;
  height: 33mm;
}

@media print {
  @page {
    size: A4;
    margin: 0;
  }

  .verwaltung .wrap {
    gap: 0;
  }

  .kartenbogen {
    justify-content: center;
    overflow: visible;
  }

  .kopf,
  .nicht-drucken {
    display: none !important;
  }

  html,
  body {
    background: #fff;
    color: #000;
  }

  .wrap {
    max-width: none;
    padding: 0;
  }

  .sackerl {
    border-color: #999;
  }
}