/* ==========================================================================
   Moselhotel Anker, Buchungstool

   Diese Datei übernimmt Tokens und Komponenten 1:1 aus der Website
   (~/Claude code/moselhotel-anker/src/styles/global.css und Logo.astro),
   damit Website und Buchungstool wie dasselbe Haus wirken.

   Formsprache: editorial und ruhig. Getrennt wird über Haarlinien und
   Flächenkontrast, nicht über Rundungen und weiche Schatten.

   Aufbau
     1  Tokens
     2  Basis
     3  Layout-Helfer
     4  Sektions-Öffner und Typografie
     5  Buttons und Links
     6  Tabellen
     7  Listen
     8  Sonstiges (Notiz, Telefon, Hilfsklassen)
     9  Wortmarke
    10  Kopf und Fuß des Tools
    11  Formulare
    12  Tool-Bausteine (Panel, Kennzahlen, Marken, Sync-Log)
   ========================================================================== */

/* --- 0  Schrift --------------------------------------------------------- */

/*
 * Public Sans, selbst ausgeliefert. Kopie aus dem Website-Projekt
 * (node_modules/@fontsource-variable/public-sans), Lizenz SIL OFL 1.1 in
 * static/fonts/LICENSE-public-sans.txt. Kein Aufruf bei Google oder einem
 * anderen Dritten. Variable Datei, deckt alle Schnitte von 100 bis 900 ab.
 * Nur aufrecht: das Tool setzt nirgends kursiv.
 */
@font-face {
  font-family: 'Public Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('fonts/public-sans-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* --- 1  Tokens ---------------------------------------------------------- */

:root {
  /* Farben */
  --c-accent: #44b7c4;
  /* Mindestens 4.9:1 auch auf dem warmen Papierton, fuer kleine Labels noetig. */
  --c-accent-dark: #217078;
  --c-accent-darker: #1f6f79;
  --c-accent-soft: #e6f5f7;

  --c-ink: #1f2a2e;
  --c-ink-soft: #3d4d53;
  --c-ink-muted: #566669;

  --c-paper: #fdfbf7;
  --c-paper-warm: #f5efe5;
  --c-paper-deep: #ece3d5;
  --c-line: #e2d8c8;
  --c-line-strong: #cfc2ab;

  --c-night: #1c2b30;
  --c-night-soft: #24393f;

  /* Signalfarben, aus den Hinweisflächen der Website abgeleitet */
  --c-warn-bg: #fdf4e2;
  --c-warn-line: #d08b16;
  --c-warn-ink: #63450a;
  --c-stop-bg: #fdeaea;
  --c-stop-line: #c0392b;
  --c-stop-ink: #8a251a;

  /* Typografie */
  /*
   * Wie die Website: durchgehend Public Sans. --f-display benennt die Rolle
   * (Überschriften, Preise, Kennzahlen, Wortmarke), nicht eine Schriftart.
   * Derzeit zeigt es auf --f-sans; die Website nennt diesen Token noch
   * --f-serif, das Tool bewusst nicht mehr.
   */
  --f-display: var(--f-sans);
  --f-sans: 'Public Sans Variable', 'Public Sans', system-ui, sans-serif;

  /* Schriftskala der Website, acht Stufen, nichts unter 1rem. */
  --fs-100: 1rem;                                   /* smallest, labels, notes */
  --fs-200: 1.125rem;                               /* body copy, the default */
  --fs-300: 1.25rem;                                /* lead-in paragraphs */
  --fs-400: 1.5rem;                                 /* card titles, h4 */
  --fs-500: clamp(1.75rem, 2.2vw, 2rem);            /* h3 */
  --fs-600: clamp(2.125rem, 3.2vw, 2.75rem);        /* h2 */
  --fs-700: clamp(2.75rem, 5vw, 3.75rem);           /* h1, page titles */
  --fs-800: clamp(3.25rem, 7vw, 5rem);              /* hero, display */

  --lh-tight: 1.05;   /* --fs-700 and --fs-800 */
  --lh-snug: 1.15;    /* --fs-400 to --fs-600 */
  --lh-body: 1.6;     /* --fs-100 to --fs-300 */

  /* Vertikaler Rhythmus, bewusst drei Stufen statt einer */
  --sp-tight: clamp(2.5rem, 4.5vw, 4rem);
  --sp-section: clamp(3.5rem, 7vw, 6.5rem);
  --sp-wide: clamp(5rem, 10vw, 9rem);

  --w-page: 1180px;
  --w-text: 66ch;

  /* Kaum Rundung, nur dort wo eine Fläche angefasst wird */
  --radius: 0;
  --radius-control: 2px;
}

/* --- 2  Basis ----------------------------------------------------------- */

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

/* Das hidden-Attribut muss staerker sein als eigene display-Regeln, sonst
   bleiben ausgeblendete Formularfelder (display:flex) trotzdem sichtbar. */
[hidden] {
  display: none !important;
}

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--f-sans);
  font-size: var(--fs-200);
  line-height: var(--lh-body);
  font-feature-settings: 'kern', 'liga';
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--f-display);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: 0.005em;
  color: var(--c-ink);
  margin: 0 0 0.6em;
  text-wrap: balance;
  /* Deutsche Komposita sind lang, auf schmalen Schirmen muss getrennt werden. */
  overflow-wrap: break-word;
  hyphens: auto;
}

h1 {
  font-size: var(--fs-700);
  line-height: var(--lh-tight);
}
h2 {
  font-size: var(--fs-600);
  line-height: var(--lh-snug);
}
h3 {
  font-size: var(--fs-500);
  line-height: var(--lh-snug);
}

p {
  margin: 0 0 1.1em;
  text-wrap: pretty;
}

a {
  color: var(--c-accent-darker);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--c-accent-dark);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul,
ol {
  padding-left: 1.2em;
}

:focus-visible {
  outline: 3px solid var(--c-accent-dark);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- 3  Layout-Helfer --------------------------------------------------- */

.wrap {
  width: min(100% - 2.5rem, var(--w-page));
  margin-inline: auto;
}

.wrap-narrow {
  width: min(100% - 2.5rem, 800px);
  margin-inline: auto;
}

.section {
  padding-block: var(--sp-section);
}

.section--tight {
  padding-block: var(--sp-tight);
}

.section--warm {
  background: var(--c-paper-warm);
}

.section--tint {
  background: var(--c-accent-soft);
}

.section--night {
  background: var(--c-night);
  color: #eef3f4;
}

.section--night h2,
.section--night h3 {
  color: #ffffff;
}

.section--night a {
  color: #9fdfe7;
}

.grid {
  display: grid;
  gap: 1.75rem;
}

.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

/* Buchungsseite: Angebot links, Formular rechts.
   Die Spalten sind ausdruecklich minmax(0, …). Ohne die Null waere die
   Mindestbreite der Inhalt selbst (lange Auswahllisten, nicht umbrechende
   Preise), und die Spalte wuerde auf schmalen Schirmen breiter als die Seite. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

@media (min-width: 960px) {
  .split {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  }
}

/* --- 4  Sektions-Öffner und Typografie ---------------------------------- */

.eyebrow {
  font-family: var(--f-sans);
  font-size: var(--fs-100);
  line-height: var(--lh-body);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-accent-dark);
  margin: 0 0 1rem;
}

.rule-head {
  margin-bottom: 0.55em;
}

.rule-head::before {
  content: '';
  display: block;
  width: 2.75rem;
  height: 2px;
  background: var(--c-accent);
  margin-bottom: 1.4rem;
}

.section--night .rule-head::before {
  background: #7fd2dc;
}

.standfirst {
  font-family: var(--f-display);
  font-size: var(--fs-300);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--c-ink-soft);
  max-width: 34ch;
  margin: 0 0 1.5rem;
  text-wrap: pretty;
}

.signet {
  font-family: var(--f-sans);
  font-size: var(--fs-100);
  line-height: var(--lh-body);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-accent-dark);
  margin: 0;
}

.lead {
  font-size: var(--fs-300);
  line-height: var(--lh-body);
  color: var(--c-ink-soft);
  max-width: var(--w-text);
}

.prose {
  max-width: var(--w-text);
}

/* Typografischer Seitenkopf, wie die sachlichen Seiten der Website */
.head--type {
  border-bottom: 1px solid var(--c-line);
}

.head--type .head__inner {
  padding-block: clamp(2.25rem, 5vw, 4rem) clamp(1.75rem, 4vw, 3rem);
}

.head--type h1 {
  margin: 0.85rem 0 0;
  max-width: 20ch;
}

.head--type .standfirst {
  margin-top: 1.5rem;
  margin-bottom: 0;
  max-width: 42ch;
}

/* --- 5  Buttons und Links ----------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 1.85rem;
  font-family: var(--f-sans);
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: var(--lh-body);
  border-radius: var(--radius-control);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.btn--primary {
  background: var(--c-accent);
  color: #08282c;
  border-color: var(--c-accent);
}

.btn--primary:hover {
  background: var(--c-accent-dark);
  border-color: var(--c-accent-dark);
  color: #ffffff;
}

.btn--ghost {
  background: transparent;
  color: var(--c-ink);
  border-color: var(--c-line-strong);
}

.btn--ghost:hover {
  border-color: var(--c-accent-dark);
  color: var(--c-accent-darker);
}

.btn--light {
  background: rgba(255, 255, 255, 0.94);
  color: var(--c-ink);
  border-color: rgba(255, 255, 255, 0.94);
}

.btn--light:hover {
  background: #ffffff;
  color: var(--c-accent-darker);
}

/* Kleine Variante für Werkzeugleisten (Filter, Demo-Schalter).
   Trotz kleinerer Schrift mindestens 44px hoch, sonst ist sie am Telefon
   nicht sicher zu treffen. */
.btn--small {
  padding: 0.62rem 1.1rem;
  font-size: var(--fs-100);
  line-height: var(--lh-body);
  min-height: 44px;
}

.btn--block {
  width: 100%;
}

.btn[disabled],
.btn[aria-disabled='true'] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Textlink mit Linie, ersetzt viele kleine Buttons */
.link-more {
  display: inline-block;
  font-size: var(--fs-100);
  line-height: var(--lh-body);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--c-accent-darker);
  text-decoration: none;
  border-bottom: 1px solid var(--c-accent);
  padding-bottom: 2px;
  transition: color 0.16s ease, border-color 0.16s ease;
}

.link-more:hover {
  color: var(--c-ink);
  border-color: var(--c-ink);
}

/* --- 6  Tabellen -------------------------------------------------------- */

.table-scroll {
  overflow-x: auto;
  border-top: 1px solid var(--c-line-strong);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-200);
  line-height: var(--lh-body);
}

th,
td {
  text-align: left;
  padding: 0.9rem 1rem 0.9rem 0;
  border-bottom: 1px solid var(--c-line);
  vertical-align: baseline;
}

thead th {
  font-family: var(--f-sans);
  font-size: var(--fs-100);
  line-height: var(--lh-body);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

tbody tr:last-child td {
  border-bottom: none;
}

td.price {
  font-family: var(--f-display);
  font-size: var(--fs-500);
  line-height: var(--lh-snug);
  font-weight: 600;
  white-space: nowrap;
  text-align: right;
  padding-right: 0;
}

th.price-head {
  text-align: right;
  padding-right: 0;
}

td .price-was {
  display: block;
  font-family: var(--f-sans);
  font-size: var(--fs-100);
  line-height: var(--lh-body);
  font-weight: 400;
  color: var(--c-ink-muted);
  text-decoration: line-through;
}

/* Verwaltungstabellen sind spaltenreich, deshalb etwas kompakter */
.table--data {
  font-size: var(--fs-100);
  line-height: var(--lh-body);
}

.table--data th,
.table--data td {
  padding: 0.75rem 1rem 0.75rem 0;
}

.table--data tbody tr:hover {
  background: var(--c-paper-warm);
}

.table--data .num {
  text-align: right;
  padding-right: 1rem;
  font-variant-numeric: tabular-nums;
}

.table--data .id {
  font-size: var(--fs-100);
  line-height: var(--lh-body);
  letter-spacing: 0.04em;
  color: var(--c-ink-muted);
  white-space: nowrap;
}

.table--data .is-off td {
  color: var(--c-ink-muted);
}

.table__empty {
  padding-block: 2.5rem;
  text-align: center;
  color: var(--c-ink-muted);
}

/* --- 7  Listen ---------------------------------------------------------- */

.tick-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.7rem;
}

.tick-list li {
  position: relative;
  padding-left: 1.9rem;
  line-height: var(--lh-body);
}

.tick-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 0.78rem;
  height: 0.44rem;
  border-left: 2px solid var(--c-accent);
  border-bottom: 2px solid var(--c-accent);
  transform: rotate(-45deg);
}

/* Redaktionelle Liste, durch Haarlinien getrennt statt in Karten gefasst */
.rule-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--c-line);
}

.rule-list > li {
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--c-line);
}

.rule-list h3,
.rule-list h4 {
  margin-bottom: 0.3rem;
}

.rule-list p:last-child {
  margin-bottom: 0;
}

/* Angebotszeile: Bezeichnung links, Preis und Stand rechts */
.offer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
}

.offer__main {
  flex: 1 1 20rem;
  min-width: 0;
}

.offer__side {
  flex: none;
  text-align: right;
}

.offer h3 {
  margin: 0 0 0.15rem;
}

.offer__meta {
  margin: 0.35rem 0 0;
  font-size: var(--fs-100);
  line-height: var(--lh-body);
  color: var(--c-ink-muted);
}

.offer__desc {
  margin: 0.5rem 0 0;
  font-size: var(--fs-100);
  line-height: var(--lh-body);
  color: var(--c-ink-soft);
  max-width: 52ch;
}

.offer__price {
  display: block;
  font-family: var(--f-display);
  font-size: var(--fs-500);
  font-weight: 600;
  line-height: var(--lh-snug);
  white-space: nowrap;
}

.offer__price small {
  font-family: var(--f-sans);
  font-size: var(--fs-100);
  line-height: var(--lh-body);
  font-weight: 400;
  color: var(--c-ink-muted);
}

.rule-list > li.is-off .offer__main,
.rule-list > li.is-off .offer__side {
  opacity: 0.62;
}

/* --- 8  Sonstiges ------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--c-accent);
  color: #08282c;
  padding: 0.75rem 1.25rem;
  font-weight: 600;
}

.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.note {
  border-left: 2px solid var(--c-accent);
  padding: 0.35rem 0 0.35rem 1.35rem;
  font-size: var(--fs-200);
  line-height: var(--lh-body);
  color: var(--c-ink-soft);
}

.note > :last-child {
  margin-bottom: 0;
}

.placeholder-note {
  border-left: 2px solid var(--c-warn-line);
  background: var(--c-warn-bg);
  color: var(--c-warn-ink);
  padding: 1.1rem 1.35rem;
  font-size: var(--fs-100);
  line-height: var(--lh-body);
}

.placeholder-note > :last-child {
  margin-bottom: 0;
}

figcaption {
  font-size: var(--fs-100);
  line-height: var(--lh-body);
  color: var(--c-ink-soft);
}

/* Telefon, fuer die Zielgruppe bewusst gross und immer erreichbar */
.phone-big {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  font-family: var(--f-display);
  font-size: var(--fs-600);
  line-height: var(--lh-snug);
  font-weight: 600;
  color: var(--c-ink);
  text-decoration: none;
  border-bottom: 2px solid var(--c-accent);
  padding-bottom: 0.15rem;
  /* Mit der engen Zeilenhöhe der Skala sonst knapp unter 44 px. */
  min-height: 44px;
  transition: color 0.16s ease, border-color 0.16s ease;
}

.phone-big:hover {
  color: var(--c-accent-darker);
  border-color: var(--c-accent-darker);
}

.phone-big__label {
  font-family: var(--f-sans);
  font-size: var(--fs-100);
  line-height: var(--lh-body);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
}

.section--night .phone-big {
  color: #ffffff;
  border-color: #7fd2dc;
}

.section--night .phone-big__label {
  color: #9fbcc0;
}

/* Telefonblock im Kopf, kleiner gesetzt */
.phone-head {
  display: inline-flex;
  flex-direction: column;
  line-height: var(--lh-snug);
  text-decoration: none;
  text-align: right;
}

.phone-head__label {
  font-size: var(--fs-100);
  line-height: var(--lh-body);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
}

.phone-head__number {
  font-family: var(--f-display);
  font-size: var(--fs-400);
  line-height: var(--lh-snug);
  font-weight: 600;
  color: var(--c-ink);
  white-space: nowrap;
}

.phone-head:hover .phone-head__number {
  color: var(--c-accent-darker);
}

/* --- 9  Wortmarke (aus Logo.astro portiert) ----------------------------- */

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--c-accent-dark);
  text-decoration: none;
}

.logo__mark {
  width: 2.35rem;
  height: auto;
  flex: none;
  color: var(--c-accent);
}

.logo__type {
  display: flex;
  flex-direction: column;
  /* Wortmarke: beide Zeilen eng als eine Einheit, deshalb die engste Stufe. */
  line-height: var(--lh-tight);
}

.logo__name {
  font-family: var(--f-display);
  font-size: var(--fs-400);
  line-height: var(--lh-tight);
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--c-ink);
}

.logo__anker {
  font-family: var(--f-sans);
  font-size: var(--fs-100);
  line-height: var(--lh-tight);
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--c-accent-dark);
  margin-top: 0.28rem;
  /* Der Buchstabenabstand schiebt die Zeile optisch nach rechts. */
  margin-right: -0.42em;
}

.logo--light .logo__name {
  color: #ffffff;
}

.logo--light .logo__anker {
  color: #7fd2dc;
}

.logo--light .logo__mark {
  color: #7fd2dc;
}

@media (max-width: 480px) {
  .logo__name {
    font-size: var(--fs-300);
    line-height: var(--lh-tight);
  }

  .logo__mark {
    width: 2rem;
  }
}

/* --- 10  Kopf und Fuß --------------------------------------------------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(253, 251, 247, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-line);
}

.head-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  min-height: 78px;
  padding-block: 0.7rem;
}

.brand {
  display: flex;
  flex: none;
  text-decoration: none;
}

.head-tail {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-left: auto;
  flex-wrap: wrap;
}

.head-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.head-nav a {
  /* Tippfläche mindestens 44 px hoch, wie jedes Bedienelement. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-100);
  line-height: var(--lh-body);
  font-weight: 500;
  color: var(--c-ink);
  text-decoration: none;
  padding-block: 0.4rem;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.head-nav a:hover {
  color: var(--c-accent-darker);
}

.head-nav a[aria-current='page'] {
  color: var(--c-accent-darker);
  border-bottom-color: var(--c-accent);
}

.site-foot {
  background: var(--c-night);
  color: #c6d6d8;
  padding-block: var(--sp-tight);
  margin-top: var(--sp-tight);
  font-size: var(--fs-100);
  line-height: var(--lh-body);
}

.site-foot h2 {
  font-size: var(--fs-300);
  line-height: var(--lh-body);
  color: #ffffff;
  margin-bottom: 0.6rem;
}

.site-foot a {
  color: #9fe3ea;
}

.foot-grid {
  display: grid;
  gap: 2.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.foot-claim {
  font-family: var(--f-display);
  font-size: var(--fs-300);
  line-height: var(--lh-body);
  color: #dae7e9;
  margin: 1rem 0 0.6rem;
}

.site-foot address {
  font-style: normal;
  margin-bottom: 0.9rem;
}

.foot-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.foot-tags li {
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 0.25rem 0.7rem;
  font-size: var(--fs-100);
  line-height: var(--lh-body);
}

.foot-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  margin-top: 2rem;
  padding-top: 1.2rem;
  font-size: var(--fs-100);
  line-height: var(--lh-body);
  color: #9fbcc0;
}

/* --- 11  Formulare ------------------------------------------------------ */

.form-card {
  background: #ffffff;
  border-top: 2px solid var(--c-ink);
  padding: clamp(1.5rem, 3vw, 2.25rem) 0 0;
}

.form-card h2 {
  font-size: var(--fs-400);
  line-height: var(--lh-snug);
  margin-bottom: 0.4rem;
}

.form-intro {
  color: var(--c-ink-soft);
  font-size: var(--fs-100);
  line-height: var(--lh-body);
  max-width: 58ch;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 1.1rem;
  margin-top: 1.5rem;
}

.field {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.field--wide {
  grid-column: 1 / -1;
}

.field label,
.field-label {
  font-size: var(--fs-100);
  line-height: var(--lh-body);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--c-ink-soft);
}

.req {
  color: var(--c-accent-dark);
}

input,
select,
textarea {
  font: inherit;
  font-size: var(--fs-100);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background: var(--c-paper);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-control);
  /* Grosse Trefferflaeche: die Zielgruppe ist eher aelter. */
  padding: 0.78rem 0.85rem;
  width: 100%;
  min-height: 48px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

input:focus,
select:focus,
textarea:focus {
  background: #ffffff;
  border-color: var(--c-accent);
}

select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--c-ink-soft) 50%),
    linear-gradient(135deg, var(--c-ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - 0.8rem) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.4rem;
}

textarea {
  resize: vertical;
  min-height: 120px;
}

.form-hint {
  font-size: var(--fs-100);
  line-height: var(--lh-body);
  color: var(--c-ink-muted);
  margin: 1.1rem 0 1.4rem;
}

.form-status {
  margin: 1.1rem 0 0;
  font-size: var(--fs-100);
  line-height: var(--lh-body);
  padding: 0;
}

.form-status:empty,
.form-status[hidden] {
  display: none;
}

.form-status[data-state='ok'] {
  background: var(--c-accent-soft);
  border-left: 3px solid var(--c-accent);
  padding: 0.9rem 1.1rem;
  color: #10474e;
}

.form-status[data-state='error'] {
  background: var(--c-stop-bg);
  border-left: 3px solid var(--c-stop-line);
  padding: 0.9rem 1.1rem;
  color: var(--c-stop-ink);
}

.form-status[data-state='wait'] {
  background: var(--c-paper-warm);
  border-left: 3px solid var(--c-line-strong);
  padding: 0.9rem 1.1rem;
  color: var(--c-ink-soft);
}

/* --- 12  Tool-Bausteine ------------------------------------------------- */

/* Ruhige Fläche im Papierton, ersetzt die Karten-Optik */
.panel {
  background: var(--c-paper-warm);
  border: 1px solid var(--c-line);
  padding: clamp(1.15rem, 2.2vw, 1.6rem);
}

.panel--plain {
  background: #ffffff;
}

.panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.9rem;
}

.panel__title {
  font-family: var(--f-sans);
  font-size: var(--fs-100);
  line-height: var(--lh-body);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin: 0;
}

/* Umschalter Zimmer / Wochenend-Programm, als Registerzeile mit Haarlinie */
.switch {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  border-bottom: 1px solid var(--c-line-strong);
  margin-bottom: 1.75rem;
}

.switch__item {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  /* Mindestens 44px hoch, damit die Register auch am Telefon sicher zu
     treffen sind. Die Zielgruppe ist eher aelter. */
  padding: 0.75rem 0 0.9rem;
  min-height: 44px;
  font-family: var(--f-sans);
  font-size: var(--fs-100);
  line-height: var(--lh-body);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--c-ink-muted);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.switch__item:hover {
  color: var(--c-ink);
}

.switch__item[aria-selected='true'] {
  color: var(--c-ink);
  border-bottom-color: var(--c-accent);
}

/* Kennzahlen, Ziffern in der Anzeigeschrift (Public Sans 600, Tabellenziffern)
   wie die Preise der Website */
.figures {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  border-top: 1px solid var(--c-line-strong);
  border-bottom: 1px solid var(--c-line);
}

.figure {
  padding: 1.1rem 1.25rem 1.2rem 0;
  border-right: 1px solid var(--c-line);
}

.figure:last-child {
  border-right: none;
}

.figure__num {
  display: block;
  font-family: var(--f-display);
  font-size: var(--fs-600);
  font-weight: 600;
  line-height: var(--lh-snug);
  font-variant-numeric: tabular-nums;
}

.figure__num small {
  font-size: var(--fs-400);
  line-height: var(--lh-snug);
  color: var(--c-ink-muted);
}

.figure__label {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--fs-100);
  line-height: var(--lh-body);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
}

.figure__note {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--fs-100);
  line-height: var(--lh-body);
  color: var(--c-ink-muted);
}

.figure--out .figure__num {
  color: var(--c-stop-ink);
}

/* Marken, klein und gesperrt statt bunt und rund */
.tag {
  display: inline-block;
  font-family: var(--f-sans);
  font-size: var(--fs-100);
  line-height: var(--lh-body);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 0.24rem 0.6rem;
  border: 1px solid transparent;
  white-space: nowrap;
}

.tag--free {
  background: var(--c-accent-soft);
  color: var(--c-accent-dark);
  border-color: #c2e6ea;
}

.tag--out {
  background: var(--c-stop-bg);
  color: var(--c-stop-ink);
  border-color: #f0cdc9;
}

.tag--hold {
  background: var(--c-warn-bg);
  color: var(--c-warn-ink);
  border-color: #ecd8ac;
}

.tag--quiet {
  background: var(--c-paper-deep);
  color: var(--c-ink-soft);
  border-color: var(--c-line-strong);
}

/* Werkzeugleiste über den Tabellen */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}

.toolbar__label {
  font-size: var(--fs-100);
  line-height: var(--lh-body);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
  margin-right: 0.3rem;
}

.toolbar__spacer {
  margin-left: auto;
  font-size: var(--fs-100);
  line-height: var(--lh-body);
  color: var(--c-ink-muted);
}

.btn--ghost[aria-pressed='true'] {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: #ffffff;
}

/* Zeitraum-Wähler der Verwaltung */
.range {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
}

.range .field {
  width: 11rem;
}

/* Sync-Log, dezent im Papierton statt als schwarzer Kasten */
.log {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 22rem;
  overflow-y: auto;
  border-top: 1px solid var(--c-line-strong);
}

.log li {
  border-bottom: 1px solid var(--c-line);
  padding-block: 0.62rem;
  font-size: var(--fs-100);
  line-height: var(--lh-body);
}

.log li:last-child {
  border-bottom: none;
}

.log__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: baseline;
}

.log__time {
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-100);
  line-height: var(--lh-body);
  color: var(--c-ink-muted);
}

.log__dir {
  font-size: var(--fs-100);
  line-height: var(--lh-body);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
}

.log__dir[data-dir='web->excel'] {
  color: var(--c-accent-dark);
}

.log__dir[data-dir='excel->cache'] {
  color: var(--c-ink-soft);
}

.log__dir[data-dir='merge'] {
  color: #7a3d86;
}

.log__dir[data-dir='retry'] {
  color: var(--c-warn-ink);
}

.log__text {
  display: block;
  color: var(--c-ink-soft);
}

/* Statusanzeige der Synchronisation im Seitenkopf */
.sync {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-100);
  line-height: var(--lh-body);
  color: var(--c-ink-muted);
  white-space: nowrap;
}

.sync__dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--c-accent);
  flex: none;
}

.sync__dot[data-state='hold'] {
  background: var(--c-warn-line);
}

/* --- Eingebettete Fassung (/embed) -------------------------------------- */
/* Die umgebende Website liefert den Rahmen, deshalb hier kein zweiter: kein
   Seitenkopf, kein Fuß, keine Rahmenlinie, nur etwas Luft nach innen. Der
   Hintergrund bleibt der Papierton des Hauses. */
.embed-body {
  padding: clamp(1.25rem, 3vw, 2rem);
}

.embed-body .split {
  gap: clamp(1.75rem, 3.5vw, 3rem);
}

.embed-phone {
  margin-top: 2.5rem;
  border-top: 3px solid var(--c-accent);
  padding-top: 1.25rem;
}

.embed-phone p {
  margin: 0 0 0.5rem;
}

.embed-phone__note {
  font-size: var(--fs-100);
  line-height: var(--lh-body);
  color: var(--c-ink-soft);
  max-width: 34ch;
}

/* Anmeldeseite */
.login-page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--sp-tight);
}

.login-card {
  width: min(100% - 2.5rem, 27rem);
  margin-inline: auto;
}

.login-card h1 {
  font-size: var(--fs-600);
  line-height: var(--lh-snug);
  margin: 1.4rem 0 0.3rem;
}

/* Auf schmalen Schirmen alles etwas ruhiger */
@media (max-width: 600px) {
  /* Eine Kennzahl je Zeile, passend zur Trennlinie unten. Zweispaltig passen
     die Beschriftungen in 1rem nicht mehr nebeneinander. */
  .figures {
    grid-template-columns: 1fr;
  }

  .figure {
    border-right: none;
    border-bottom: 1px solid var(--c-line);
    padding-right: 0;
  }

  .figure:last-child {
    border-bottom: none;
  }

  .offer__side {
    text-align: left;
  }

  .head-inner {
    min-height: 0;
  }

  .switch {
    gap: 1.25rem;
  }
}