/*
 * Editor components (plan 016).
 *
 * Every editor page is built from these since 2026-09-24 (plan 016, Phase 7
 * retired style_001.css and jQuery), so nothing here fights legacy
 * specificity. Base rules sit in :where() (zero specificity), so any
 * component class overrides them without !important.
 */
html {
  font-family: var(--ti-font-sans);
}

/* ---------- Base (redesigned pages only: body.ti-body) ---------- */

body.ti-body {
  margin: 0;
  background: var(--ti-paper);
  color: var(--ti-ink);
  font-size: var(--ti-text-m);
  line-height: var(--ti-leading);
  -webkit-font-smoothing: antialiased;
}
:where(.ti-body) *, :where(.ti-body) *::before, :where(.ti-body) *::after { box-sizing: border-box; }
:where(.ti-body) a { color: var(--ti-primary); }
:where(.ti-body) a:hover { color: var(--ti-primary-hover); }
:where(.ti-body) :focus-visible { outline: 2px solid var(--ti-primary); outline-offset: 2px; }

/* A component's own display (grid, flex) must not override the hidden attribute. */
.ti-body [hidden] { display: none !important; }

.ti-icon { flex-shrink: 0; }

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

.ti-skip {
  position: absolute; left: var(--ti-space-4); top: -48px; z-index: 100;
  padding: var(--ti-space-2) var(--ti-space-3);
  border-radius: var(--ti-radius-m);
  background: var(--ti-dark); color: #FFFFFF;
  font-weight: 600; text-decoration: none;
}
.ti-skip:focus { top: var(--ti-space-2); }

.ti-main {
  display: block;
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--ti-space-6) var(--ti-space-8) var(--ti-space-8);
}
.ti-main:focus { outline: none; }

.ti-page-title {
  margin: 0;
  font-family: var(--ti-font-display);
  font-weight: 400;
  font-size: var(--ti-text-3xl);
  line-height: 1.05;
}

/* ---------- Sidebar (plan 035, PR E) ---------- */

/* The canvas board "Navigation als Seitenleiste": 260 px, 68 px when folded
   with "[" or its button (kept in the ti_side cookie, which start.php reads,
   so a folded page is drawn folded). Phones keep a top bar whose button
   slides the same sidebar in. --ti-header-h is that bar's height, 0 where
   it is hidden (ti-nav.js), so everything sticky sits at the top. */
body.ti-body--side { padding-left: var(--ti-side-w); }
.ti-side {
  position: fixed; inset: 0 auto 0 0; z-index: 50;
  display: flex; flex-direction: column; gap: var(--ti-space-3);
  width: var(--ti-side-w); padding: 14px 12px;
  background: var(--ti-side); border-right: 1px solid var(--ti-hairline);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
.ti-side__top { display: flex; align-items: center; gap: var(--ti-space-2); padding: 2px 4px; }
.ti-brand {
  display: flex; align-items: center; gap: 10px; flex-grow: 1; min-width: 0;
  color: var(--ti-ink); text-decoration: none; font-size: var(--ti-text-m); font-weight: 600; white-space: nowrap;
}
.ti-brand:hover { color: var(--ti-ink); }
.ti-brand__mark {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--ti-radius-m);
  background: var(--ti-brand); color: #FFFFFF; font-family: var(--ti-font-display); font-size: var(--ti-text-l);
}
.ti-brand__name { overflow: hidden; text-overflow: ellipsis; }
.ti-side__fold { flex: none; }
.ti-side__tools { display: flex; align-items: center; gap: var(--ti-space-2); }
.ti-side__new { position: relative; flex: none; }
.ti-side__newbtn {
  display: flex; align-items: center; gap: 4px; height: 36px; padding: 0 10px;
  border: 1px solid var(--ti-hairline); border-radius: var(--ti-radius-m); background: var(--ti-card);
  color: var(--ti-ink); font-size: var(--ti-text-s); font-weight: 600; cursor: pointer; list-style: none; user-select: none;
}
.ti-side__newbtn::-webkit-details-marker { display: none; }
.ti-side__newbtn:hover { border-color: var(--ti-field-border); }
.ti-side__nav { display: flex; flex-direction: column; gap: var(--ti-space-3); flex-grow: 1; }
.ti-side__heading {
  margin: 0; padding: 0 10px 4px;
  font-size: var(--ti-text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ti-muted);
}
.ti-side__list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ti-side__list--foot { margin-top: auto; padding-top: var(--ti-space-3); border-top: 1px solid var(--ti-hairline); }
.ti-side__link {
  position: relative; display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px;
  border-radius: var(--ti-radius-m); color: var(--ti-ink-2); font-size: var(--ti-text-m); text-decoration: none; white-space: nowrap;
}
.ti-side__link:hover { background: var(--ti-hairline-soft); color: var(--ti-ink); }
.ti-side__link .ti-icon { flex: none; color: var(--ti-muted); }
.ti-side__link[aria-current] { background: var(--ti-primary-soft); color: var(--ti-on-primary-tint); font-weight: 600; }
.ti-side__link[aria-current] .ti-icon { color: var(--ti-primary); }
.ti-side__label { flex-grow: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* What waits for us, filled; nothing is shown for stock (canvas board). */
.ti-side__count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px; background: var(--ti-primary); color: #FFFFFF;
  font-family: var(--ti-font-mono); font-size: var(--ti-text-xs); font-weight: 500;
}
/* The hover label of the folded sidebar (ti-nav.js), beside the symbol. */
.ti-side__tip {
  position: fixed; z-index: 9999; padding: 5px 9px; border-radius: var(--ti-radius-s);
  background: var(--ti-dark); color: #FFFFFF; font-size: var(--ti-text-s); font-weight: 500; white-space: nowrap;
  pointer-events: none;
}
.ti-side .ti-user { padding: var(--ti-space-3) 4px 0; border-top: 1px solid var(--ti-hairline); }
.ti-header { display: none; }

/* The "Neu" list, under its button. */
.ti-nav__menu {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 60;
  min-width: 220px; max-height: 70vh; overflow-y: auto;
  margin: 0; padding: 6px; list-style: none;
  background: var(--ti-card);
  border: 1px solid var(--ti-hairline);
  border-radius: var(--ti-radius-l);
  box-shadow: var(--ti-shadow-m);
}
/* Closed <details> content can still count for scroll width in Chrome. */
.ti-nav__group:not([open]) > .ti-nav__menu { display: none; }
.ti-nav__link {
  display: block; padding: 7px 10px; border-radius: var(--ti-radius-s);
  color: var(--ti-ink); font-size: var(--ti-text-m); text-decoration: none; white-space: nowrap;
}
.ti-nav__link:hover { background: var(--ti-paper); color: var(--ti-ink); }
.ti-nav__link[aria-current="page"], .ti-nav__link[aria-current="true"] { background: var(--ti-primary-soft); color: var(--ti-on-primary-tint); font-weight: 600; }
.ti-nav__link--action { color: var(--ti-primary); font-weight: 600; }

/* Folded: symbols only, the names in the tooltips, a dot for what waits. */
@media (min-width: 761px) {
  body.ti-body--narrow { --ti-side-w: var(--ti-side-w-narrow); }
  .ti-body--narrow .ti-side { padding: 14px 10px; }
  .ti-body--narrow .ti-side__top, .ti-body--narrow .ti-side__tools { flex-direction: column; padding: 0; }
  .ti-body--narrow .ti-brand { flex-grow: 0; }
  .ti-body--narrow .ti-side__heading, .ti-body--narrow .ti-user__who, .ti-body--narrow .ti-user__logout,
  .ti-body--narrow .ti-side .ti-search { display: none; }
  /* Names stay for screen readers; the eye gets them from the hover label. */
  .ti-body--narrow .ti-brand__name, .ti-body--narrow .ti-side__label, .ti-body--narrow .ti-side__newbtn span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .ti-body--narrow .ti-side .ti-search-open:not([hidden]) { display: inline-flex; }
  .ti-body--narrow .ti-side__link { justify-content: center; padding: 0; }
  .ti-body--narrow .ti-side__count { position: absolute; top: 5px; right: 9px; min-width: 0; width: 8px; height: 8px; padding: 0; overflow: hidden; color: transparent; }
  .ti-body--narrow .ti-nav__menu { left: 0; right: auto; }
  .ti-body--narrow .ti-side .ti-user { justify-content: center; padding-left: 0; padding-right: 0; }
}

/* Phones: a top bar, and the sidebar slides in over the page. */
@media (max-width: 760px) {
  body.ti-body--side { padding-left: 0; }
  .ti-header {
    display: block; position: sticky; top: 0; z-index: 45;
    background: var(--ti-card); border-bottom: 1px solid var(--ti-hairline);
  }
  .ti-header__bar { display: flex; align-items: center; gap: var(--ti-space-3); height: 52px; padding: 0 var(--ti-space-3); }
  .ti-header__brand { flex-grow: 1; color: var(--ti-ink); text-decoration: none; font-family: var(--ti-font-display); font-size: var(--ti-text-l); white-space: nowrap; }
  .ti-header .ti-search-open:not([hidden]) { display: inline-flex; }
  .ti-side { width: 280px; transform: translateX(-100%); transition: transform 0.2s; box-shadow: var(--ti-shadow-m); }
  .ti-body--side-open .ti-side { transform: none; }
  .ti-side__fold { display: none; }
  .ti-body--side-open::after { content: ""; position: fixed; inset: 0; z-index: 49; background: rgba(23, 22, 26, 0.3); }
  .ti-main { padding: var(--ti-space-4); }
  .ti-savebar { flex-wrap: wrap; }
  .ti-savebar__changes { order: 3; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ti-side { transition: none; }
}

/* Einstellungen (plan 035, PR F): one card per group, a link and one line on
   what the page changes. */
.ti-settings { display: grid; gap: var(--ti-space-5); max-width: 880px; }
.ti-settings__list { margin: 0; padding: 0; list-style: none; }
.ti-settings__list li { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--ti-space-4); padding: var(--ti-space-3) 0; border-top: 1px solid var(--ti-hairline-soft); }
.ti-settings__list li:first-child { border-top: 0; }
.ti-settings__link { font-weight: 600; }
.ti-settings__what { color: var(--ti-ink-2); font-size: var(--ti-text-m); }
@media (max-width: 760px) {
  .ti-settings__list li { grid-template-columns: minmax(0, 1fr); gap: var(--ti-space-1); }
}

/* Views of one entry (plan 035, D5): a row of links above the page head,
   the current one underlined in ink. On a phone the row scrolls sideways. */
.ti-views { margin: 0 0 var(--ti-space-5); border-bottom: 1px solid var(--ti-hairline); overflow-x: auto; overflow-y: hidden; }
.ti-views__list { display: flex; gap: var(--ti-space-5); margin: 0; padding: 0; list-style: none; }
.ti-views__link {
  display: block; padding: var(--ti-space-2) 0; border-bottom: 2px solid transparent;
  font-size: var(--ti-text-m); color: var(--ti-ink-2); text-decoration: none; white-space: nowrap;
}
.ti-views__link:hover { color: var(--ti-ink); }
.ti-views__link[aria-current="page"] { color: var(--ti-ink); font-weight: 600; border-bottom-color: var(--ti-ink); }
.ti-views__link:focus-visible { outline: none; box-shadow: var(--ti-focus-ring); border-radius: var(--ti-radius-s); }
/* A tab's own line and buttons, under the tabs (plan 035): the head above
   stays the same on every tab. */
.ti-partbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--ti-space-3); margin: 0 0 var(--ti-space-5); }
.ti-pp__unitname { margin: 2px 0 0; font-size: var(--ti-text-l); font-weight: 600; color: var(--ti-ink); }
.ti-partbar__meta { margin: 0; color: var(--ti-ink-2); font-size: var(--ti-text-m); }
.ti-partbar__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ti-space-2); }

/* Typing reveals clear and submit inside the box instead of growing it. */
.ti-search {
  display: flex; align-items: center; gap: var(--ti-space-2); flex: 1 1 auto; min-width: 0;
  height: 36px; padding: 0 4px 0 var(--ti-space-3);
  border: 1px solid var(--ti-hairline); border-radius: var(--ti-radius-m);
  background: var(--ti-paper); color: var(--ti-muted);
}
.ti-search:hover { border-color: var(--ti-field-border); }
.ti-search:focus-within { border-color: var(--ti-primary); background: var(--ti-card); box-shadow: var(--ti-focus-ring); }
.ti-search__input {
  flex: 1 1 auto; width: auto; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; outline: none;
  font: inherit; font-size: var(--ti-text-s); color: var(--ti-ink);
}
.ti-search__input::placeholder { color: #767169; }
/* Browser history fill would paint the field blue; keep our own colours. */
.ti-search__input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px var(--ti-card) inset; -webkit-text-fill-color: var(--ti-ink); }
.ti-search__key {
  display: flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; margin-right: 4px; padding: 0 5px;
  border: 1px solid var(--ti-hairline); border-radius: 5px; background: var(--ti-card);
  font-family: var(--ti-font-mono); font-size: var(--ti-text-xs); color: var(--ti-muted);
}
.ti-search__clear, .ti-search__submit {
  display: none; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: var(--ti-muted); cursor: pointer;
}
.ti-search__clear:hover { background: var(--ti-hairline-soft); color: var(--ti-ink); }
.ti-search__submit { background: var(--ti-primary); color: #FFFFFF; }
.ti-search__submit:hover { background: var(--ti-primary-hover); }
.ti-search--filled .ti-search__clear, .ti-search--filled .ti-search__submit { display: flex; }
.ti-search--filled .ti-search__key, .ti-search:focus-within .ti-search__key { display: none; }
/* No JavaScript: nothing toggles the filled state, so show submit while typing. */
.ti-search:focus-within .ti-search__submit { display: flex; }
/* The button for the search dialog: on the phone bar, and in the folded
   sidebar, which has no room for the field. */
.ti-search-open, .ti-side .ti-search-open { display: none; }

.ti-user { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.ti-user__avatar {
  width: 30px; height: 30px; border-radius: var(--ti-radius-m);
  display: flex; align-items: center; justify-content: center;
  background: var(--ti-primary-tint); color: var(--ti-on-primary-tint);
  font-size: var(--ti-text-s); font-weight: 600;
}
.ti-user__who { display: flex; flex-direction: column; line-height: 1.2; }
.ti-user__name { font-size: var(--ti-text-s); font-weight: 600; }
.ti-user__role { font-size: var(--ti-text-xs); color: var(--ti-muted); }
.ti-user__logout { font-size: var(--ti-text-s); }


/* ---------- Field ---------- */

.ti-field { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0 0 var(--ti-space-4); }
.ti-field__label { font-size: var(--ti-text-s); font-weight: 600; color: var(--ti-ink-2); }
.ti-field__req {
  margin-left: 4px; padding: 1px 6px; border-radius: 5px;
  background: var(--ti-hairline-soft); color: var(--ti-ink-2);
  font-size: var(--ti-text-xs); font-weight: 600;
}
.ti-input {
  display: block;
  height: 40px; padding: 0 11px;
  border: 1px solid var(--ti-field-border); border-radius: var(--ti-radius-m);
  background: var(--ti-card); color: var(--ti-ink);
  font: inherit; font-size: var(--ti-text-m);
}
textarea.ti-input { height: auto; min-height: 96px; padding: 9px 11px; line-height: 1.5; resize: vertical; }
.ti-input--mono { font-family: var(--ti-font-mono); font-size: var(--ti-text-m); }
.ti-input--s { width: 120px; }
.ti-input--m { width: 100%; max-width: 360px; }
.ti-input--l { width: 100%; max-width: 640px; }
.ti-input--full { width: 100%; }
/* Placeholders in colour (data-ti-ph, ti-ui.js): a layer behind the field
   draws the text, sized and set like the field by the script; the field's
   own text is transparent. The wrapper stretches, so a width in percent
   resolves as it did without it. */
.ti-ph { position: relative; align-self: stretch; }
.ti-ph > .ti-input { position: relative; background: transparent; color: transparent; caret-color: var(--ti-ink); }
.ti-ph__layer { position: absolute; top: 0; left: 0; overflow: hidden; pointer-events: none; border: 0 solid transparent; background: var(--ti-card); color: var(--ti-ink); }
.ti-ph__mark { color: var(--ti-primary); }
.ti-ph__mark--left { color: var(--ti-error); }
.ti-field:has(.ti-input--m, .ti-input--l, .ti-input--full) { align-items: stretch; }
.ti-input::placeholder { color: #767169; }
.ti-input:hover { border-color: var(--ti-ink-2); }
.ti-input:focus { outline: none; border-color: var(--ti-primary); box-shadow: var(--ti-focus-ring); }
.ti-input[readonly] { background: var(--ti-paper); border-color: var(--ti-hairline); color: var(--ti-ink-2); cursor: text; }
.ti-input[readonly]:hover { border-color: var(--ti-hairline); }
.ti-affix--locked .ti-affix__suffix { display: flex; color: var(--ti-muted); }
.ti-input:disabled { background: var(--ti-hairline-soft); color: var(--ti-muted); cursor: not-allowed; }
.ti-field--error .ti-input, .ti-field.is-range-clash .ti-input { border-color: var(--ti-error); box-shadow: 0 0 0 3px rgba(180, 35, 53, 0.1); }
.ti-field__help { margin: 0; font-size: var(--ti-text-s); color: var(--ti-muted); }
.ti-field__error { margin: 0; font-size: var(--ti-text-s); font-weight: 500; color: var(--ti-error-text); }
.ti-field__error::before { content: '! '; font-weight: 700; }

.ti-affix { position: relative; display: inline-flex; align-items: center; }
.ti-affix .ti-input { padding-right: 36px; }
.ti-affix__suffix { position: absolute; right: 11px; color: var(--ti-muted); font-size: var(--ti-text-s); pointer-events: none; }

/* Native select with our own chevron. */
.ti-select {
  appearance: none; -webkit-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23514E49' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  cursor: pointer;
}

/* A select to type into (ti-combobox.js): the field keeps the select's
   classes and chevron, the list hangs below it like the date calendar. */
.ti-combo { position: relative; }
.ti-combo__input { cursor: text; }
.ti-combo__list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 45;
  max-height: 320px; margin: 0; padding: 6px; overflow-y: auto; list-style: none;
  border: 1px solid var(--ti-hairline); border-radius: var(--ti-radius-l); background: var(--ti-card); box-shadow: var(--ti-shadow-m);
}
.ti-combo__option { padding: 7px 10px; border-radius: var(--ti-radius-s); color: var(--ti-ink); font-size: var(--ti-text-m); cursor: pointer; }
.ti-combo__option[aria-selected="true"] { background: var(--ti-hairline-soft); }
.ti-combo__option--current { font-weight: 600; }
.ti-combo__none { padding: 13px 16px; color: var(--ti-muted); font-size: var(--ti-text-m); }

/* ---------- Button ---------- */

.ti-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid transparent; border-radius: var(--ti-radius-m);
  font: inherit; font-weight: 600; text-decoration: none; white-space: nowrap;
  cursor: pointer;
}
.ti-btn--s { height: 32px; padding: 0 12px; font-size: var(--ti-text-s); }
.ti-btn--m { height: 40px; padding: 0 16px; font-size: var(--ti-text-m); }
.ti-btn--l { height: 48px; padding: 0 20px; font-size: var(--ti-text-l); border-radius: 10px; }
.ti-btn--primary, .ti-btn--primary:hover { color: #FFFFFF; }
.ti-btn--primary { background: var(--ti-primary); }
.ti-btn--primary:hover { background: var(--ti-primary-hover); }
.ti-btn--primary:active { background: var(--ti-primary-pressed); }
.ti-btn--secondary, .ti-btn--secondary:hover { color: var(--ti-ink); }
.ti-btn--secondary { background: var(--ti-card); border-color: var(--ti-field-border); }
.ti-btn--secondary:hover { background: var(--ti-paper); }
.ti-btn--ghost, .ti-btn--ghost:hover { color: var(--ti-ink-2); }
.ti-btn--ghost { background: transparent; }
.ti-btn--ghost:hover { background: var(--ti-hairline-soft); }
.ti-btn--danger, .ti-btn--danger:hover { color: var(--ti-error-text); }
.ti-btn--danger { background: var(--ti-card); border-color: var(--ti-error); }
.ti-btn--danger:hover { background: var(--ti-error-bg); }
.ti-btn--link { height: auto; padding: 0; border: 0; background: none; color: var(--ti-primary); text-decoration: underline; }
.ti-btn--on-dark, .ti-btn--on-dark:hover { color: var(--ti-on-primary-tint); }
.ti-btn--on-dark { background: var(--ti-primary-tint); }
.ti-btn--on-dark:hover { background: #F3E9F4; }
.ti-btn:disabled, .ti-btn[aria-disabled="true"] { background: var(--ti-hairline); border-color: var(--ti-hairline); color: var(--ti-muted); cursor: not-allowed; }
.ti-btn:focus-visible { outline: none; box-shadow: var(--ti-focus-ring); }

/* ---------- Save bar ---------- */

.ti-savebar {
  position: sticky; bottom: var(--ti-space-4); z-index: 40;
  display: flex; align-items: center; gap: var(--ti-space-3);
  margin-top: var(--ti-space-6);
  padding: 8px 8px 8px 16px;
  border-radius: var(--ti-radius-l);
  background: var(--ti-dark); color: #FFFFFF;
  box-shadow: 0 14px 34px rgba(23, 22, 26, 0.3);
}
.ti-savebar__count { font-size: var(--ti-text-s); font-weight: 600; white-space: nowrap; }
.ti-savebar__changes { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ti-savebar__chip {
  padding: 3px 9px; border-radius: var(--ti-radius-s);
  border: 1px solid var(--ti-dark-chip-border); background: var(--ti-dark-chip);
  color: var(--ti-hairline); font-size: var(--ti-text-xs);
}
.ti-savebar__spacer { flex-grow: 1; }
.ti-savebar__discard { padding: 0 10px; color: var(--ti-on-dark-muted); font-size: var(--ti-text-s); font-weight: 600; text-decoration: none; }
.ti-savebar__discard:hover { color: #FFFFFF; }

/* ---------- Knowledge tooltip (ui/js/ti-tooltip.js) ---------- */

:where(.ti-body) .k-info { display: inline-block; vertical-align: middle; margin-left: 6px; line-height: 0; }
:where(.ti-body) .k-info img { width: 16px; height: 16px; display: block; }
.ti-tip {
  position: fixed; z-index: 9999; display: none;
  max-width: 340px; padding: 10px 12px;
  border-radius: var(--ti-radius-m);
  background: var(--ti-dark); color: #FFFFFF;
  font-size: var(--ti-text-s); line-height: 1.45;
  box-shadow: var(--ti-shadow-m); pointer-events: none;
}
.ti-tip .k-tip__row { display: flex; gap: 10px; }
.ti-tip .k-tip__l { flex: 0 0 92px; color: var(--ti-on-dark-muted); }
.ti-tip .k-tip__v { flex: 1 1 auto; min-width: 0; }
.ti-tip .k-tip__notes {
  display: block; margin-top: 7px; padding-top: 7px;
  border-top: 1px solid var(--ti-dark-chip-border); color: var(--ti-hairline); white-space: pre-wrap;
}

/* ---------- Page layout ---------- */

.ti-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ti-space-6); margin: 0 0 var(--ti-space-5); }
.ti-page-head__text { display: flex; flex-direction: column; gap: 6px; }
.ti-page-head__meta { margin: 0; font-size: var(--ti-text-m); color: var(--ti-muted); }
.ti-page-head__title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px var(--ti-space-3); }
.ti-page-head__tags { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0; }

.ti-card {
  background: var(--ti-card);
  border: 1px solid var(--ti-hairline);
  border-radius: var(--ti-radius-xl);
}

/* A row of fields that submit together (filters). */
.ti-filterbar {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ti-space-3) var(--ti-space-4);
  padding: var(--ti-space-4) var(--ti-space-5);
  margin: 0 0 var(--ti-space-5);
}
.ti-filterbar .ti-field { margin: 0; }
.ti-filterbar .ti-input--m { width: 200px; }
.ti-filterbar input[type="date"] { width: 160px; }
.ti-who { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.ti-filterbar__actions { display: flex; align-items: center; gap: var(--ti-space-2); padding-bottom: 1px; }

/* ---------- Forms ---------- */

.ti-backlink { font-size: var(--ti-text-s); font-weight: 500; text-decoration: none; }
.ti-form { display: flex; flex-direction: column; gap: var(--ti-space-5); max-width: 880px; }
.ti-fieldset { margin: 0; padding: var(--ti-space-5) var(--ti-space-6); min-width: 0; }
/* The bottom of a card matches its top. Fields and radio groups carry a
   margin below them, so whatever is last in the card - the last one not
   hidden - gives it up; in a grid, its last row. Until 2026-09-25 the card's
   small bottom padding relied on a field being last, and a card ending in
   anything else (the calendar legend, the customer card) sat 8px from its
   edge. */
.ti-fieldset > :not([hidden], input[type="hidden"], script, template):not(:has(~ :not([hidden], input[type="hidden"], script, template))) { margin-bottom: 0; }
.ti-fieldset > :not([hidden], input[type="hidden"], script, template, .ti-form-grid):not(:has(~ :not([hidden], input[type="hidden"], script, template))) > :last-child { margin-bottom: 0; }
.ti-fieldset > .ti-form-grid:not([hidden]):not(:has(~ :not([hidden], input[type="hidden"], script, template))) > :last-child { margin-bottom: 0; }
/* Its last row: two items, three in a three-column grid - only while the
   grid has its columns; below 761px it is one column (see below). */
@media (min-width: 761px) {
  .ti-fieldset > .ti-form-grid:not([hidden]):not(:has(~ :not([hidden], input[type="hidden"], script, template))) > :nth-last-child(-n + 2) { margin-bottom: 0; }
  .ti-fieldset > .ti-form-grid--3:not([hidden]):not(:has(~ :not([hidden], input[type="hidden"], script, template))) > :nth-last-child(-n + 3) { margin-bottom: 0; }
}
.ti-fieldset__legend {
  float: left; width: 100%; margin: 0 0 var(--ti-space-4); padding: 0;
  font-size: var(--ti-text-l); font-weight: 600; color: var(--ti-ink);
}
.ti-fieldset__legend + * { clear: both; }
.ti-fieldset__note { margin: -8px 0 var(--ti-space-4); font-size: var(--ti-text-s); color: var(--ti-muted); }
.ti-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--ti-space-5); }
.ti-form-grid--phone { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.ti-form-grid .ti-input--full, .ti-fieldset > .ti-field .ti-input--full { max-width: none; }

/* Sticky row with the form's buttons, primary on the right. */
.ti-actionbar {
  position: sticky; bottom: 0; z-index: 30;
  display: flex; justify-content: flex-end; gap: var(--ti-space-2);
  margin: 0 calc(-1 * var(--ti-space-2)); padding: var(--ti-space-3) var(--ti-space-2);
  background: linear-gradient(to bottom, rgba(247, 245, 241, 0), var(--ti-paper) 30%);
}

@media (max-width: 760px) {
  .ti-form-grid, .ti-form-grid--phone { grid-template-columns: minmax(0, 1fr); }
  .ti-fieldset { padding: var(--ti-space-4); }
}

/* ---------- Checkbox, radio, chip ---------- */

.ti-check { display: grid; grid-template-columns: auto 1fr; align-items: start; column-gap: 10px; margin: 0 0 var(--ti-space-4); }
.ti-check__input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--ti-primary); cursor: pointer; }
.ti-check__label { font-size: var(--ti-text-m); color: var(--ti-ink); cursor: pointer; }
.ti-check__help { grid-column: 2; margin-top: 2px; }

.ti-radios { margin: 0 0 var(--ti-space-4); padding: 0; border: 0; min-width: 0; }
.ti-radios > .ti-field__label { display: block; margin: 0 0 8px; padding: 0; }
.ti-radios__options { display: flex; flex-direction: column; gap: 6px; }
.ti-radios--inline .ti-radios__options { flex-direction: row; flex-wrap: wrap; gap: 6px 18px; }
.ti-radio { position: relative; display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.ti-radio__input { position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; cursor: pointer; }
.ti-radio__dot {
  width: 20px; height: 20px; flex-shrink: 0; box-sizing: border-box; border-radius: 50%;
  border: 1.5px solid var(--ti-field-border); background: var(--ti-card);
  display: flex; align-items: center; justify-content: center;
}
.ti-radio__dot::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: transparent; }
.ti-radio:hover .ti-radio__dot { border-color: var(--ti-ink); }
.ti-radio__input:checked + .ti-radio__dot { border: 0; background: var(--ti-primary); }
.ti-radio__input:checked + .ti-radio__dot::after { background: #FFFFFF; }
.ti-radio__input:focus-visible + .ti-radio__dot { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--ti-primary); }
.ti-radio__text { display: flex; flex-direction: column; gap: 1px; padding-top: 1px; }
.ti-radio__label { font-size: var(--ti-text-m); }
.ti-radio__hint { font-size: var(--ti-text-s); color: var(--ti-muted); }
.ti-radios--cards .ti-radios__options { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--ti-space-3); }
.ti-radios--cards .ti-radio { padding: 12px 14px; border: 1px solid var(--ti-hairline); border-radius: var(--ti-radius-l); background: var(--ti-card); }
.ti-radios--cards .ti-radio:has(.ti-radio__input:checked) { border: 2px solid var(--ti-primary); padding: 11px 13px; background: #FCFAFC; box-shadow: 0 6px 18px rgba(90, 55, 96, 0.12); }
.ti-radios--cards .ti-radio__label { font-weight: 600; }

.ti-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--ti-space-4); }
.ti-chip {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 12px 0 10px; border-radius: 17px;
  border: 1px solid var(--ti-field-border); background: var(--ti-card);
  font-size: var(--ti-text-s); color: var(--ti-ink-2); cursor: pointer; user-select: none;
}
.ti-chip:hover { border-color: var(--ti-ink); }
.ti-chip__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ti-chip__icon { width: 18px; height: 18px; object-fit: contain; opacity: 0.75; }
.ti-chip:has(.ti-chip__input:checked) { border-color: var(--ti-primary); background: var(--ti-primary-soft); color: var(--ti-on-primary-tint); font-weight: 600; }
.ti-chip:has(.ti-chip__input:checked) .ti-chip__icon { opacity: 1; }
.ti-chip:has(.ti-chip__input:focus-visible) { box-shadow: var(--ti-focus-ring); }
.ti-chip--s { height: 28px; padding: 0 10px; border-radius: 14px; font-size: var(--ti-text-s); font-family: var(--ti-font-mono); }

/* ---------- Scale 1-5 (Bausteine 4) ----------
   One value or none. None is its own state and is drawn in the warning
   colours, because on these sheets an empty scale is work still to do. */
.ti-scale { display: inline-flex; flex-direction: column; gap: 5px; }
.ti-scale__steps { display: inline-flex; align-items: center; gap: 4px; }
.ti-scale__step {
  width: 30px; height: 30px; padding: 0;
  border: 1px solid var(--ti-field-border); border-radius: var(--ti-radius-s);
  background: var(--ti-card); color: var(--ti-ink-2);
  font-family: var(--ti-font-mono); font-size: var(--ti-text-s); font-weight: 500; cursor: pointer;
}
.ti-scale__step:hover { border-color: var(--ti-ink); color: var(--ti-ink); }
.ti-scale__step[aria-checked="true"] { border-color: var(--ti-primary); background: var(--ti-primary); color: #FFFFFF; font-weight: 500; }
.ti-scale--empty .ti-scale__step { border-color: var(--ti-warning-border); background: #FFFDF8; }
.ti-scale--empty .ti-scale__step:hover { border-color: var(--ti-warning-text); }
.ti-scale__clear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 30px; padding: 0; border: 0; background: transparent;
  color: var(--ti-muted); cursor: pointer; border-radius: var(--ti-radius-s);
}
.ti-scale__clear:hover { color: var(--ti-error); background: var(--ti-error-bg); }
.ti-scale__poles { display: flex; justify-content: space-between; gap: var(--ti-space-3); font-size: var(--ti-text-xs); color: var(--ti-muted); }
.ti-scale--compact .ti-scale__step { width: 26px; height: 28px; }
.ti-scale--compact .ti-scale__steps { gap: 3px; }
.ti-scale--compact .ti-scale__clear { height: 28px; }

.ti-count { margin-top: -2px; }
.ti-count--over { color: var(--ti-warning-text); font-weight: 600; }

/* ---------- Long forms: section index + sections ---------- */

.ti-longform { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--ti-space-8); align-items: start; }
.ti-longform .ti-form { max-width: 920px; }
.ti-toc { position: sticky; top: calc(var(--ti-header-h, 61px) + var(--ti-space-6)); display: flex; flex-direction: column; gap: 2px; }
.ti-toc__link { padding: 6px 10px; border-radius: var(--ti-radius-s); color: var(--ti-muted); font-size: var(--ti-text-s); text-decoration: none; }
.ti-toc__link:hover { background: var(--ti-hairline-soft); color: var(--ti-ink); }
.ti-fieldset { scroll-margin-top: calc(var(--ti-header-h, 61px) + var(--ti-space-6)); }
.ti-form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ti-subhead { margin: var(--ti-space-2) 0 var(--ti-space-3); font-size: var(--ti-text-s); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ti-muted); }
.ti-note { margin: 0 0 var(--ti-space-4); padding: 10px 12px; border-radius: var(--ti-radius-m); background: var(--ti-info-bg); color: var(--ti-info-text); font-size: var(--ti-text-s); }
.ti-note--warning { background: var(--ti-warning-bg); color: var(--ti-warning-text); }

/* A cost line: label, amount with unit, how it is charged. */
.ti-costs { display: flex; flex-direction: column; margin: 0 0 var(--ti-space-4); }
.ti-cost { display: grid; grid-template-columns: minmax(0, 1.3fr) 150px minmax(0, 1fr); gap: var(--ti-space-3); align-items: center; padding: 8px 0; border-top: 1px solid var(--ti-hairline-soft); }
.ti-cost:first-child { border-top: 0; }
.ti-cost__label { font-size: var(--ti-text-m); font-weight: 500; }
.ti-cost__label small { display: block; font-weight: 400; font-size: var(--ti-text-s); color: var(--ti-muted); }
.ti-cost .ti-field { margin: 0; }
.ti-cost .ti-field__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ti-cost .ti-affix, .ti-cost .ti-input { width: 100%; max-width: none; }

/* A grid of free-form cells (season and price tables). */
.ti-gridtable { width: 100%; border-collapse: separate; border-spacing: 4px; margin: 0 -4px var(--ti-space-3); }
.ti-gridtable th { padding: 0 4px; font-size: var(--ti-text-xs); font-weight: 600; color: var(--ti-muted); text-align: left; white-space: nowrap; }
.ti-gridtable td { padding: 0; }
.ti-gridtable .ti-input { width: 100%; min-width: 64px; height: 34px; padding: 0 8px; font-size: var(--ti-text-s); }
.ti-gridtable textarea.ti-input { height: 64px; min-height: 0; padding: 6px 8px; }

.ti-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--ti-space-4); }
.ti-thumbs img { height: 88px; width: auto; border-radius: var(--ti-radius-m); background: var(--ti-hairline-soft); }

@media (max-width: 1100px) {
  .ti-longform { grid-template-columns: minmax(0, 1fr); }
  .ti-toc { display: none; }
}
@media (max-width: 760px) {
  .ti-form-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .ti-cost { grid-template-columns: minmax(0, 1fr) 120px; }
  .ti-cost > :last-child { grid-column: 1 / -1; }
}

/* ---------- Badge ---------- */

.ti-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--ti-radius-s);
  font-size: var(--ti-text-xs); font-weight: 600; line-height: 1.5; white-space: nowrap;
}
.ti-badge--l { padding: 5px 12px; border-radius: var(--ti-radius-m); font-size: var(--ti-text-m); }
.ti-badge--neutral { background: var(--ti-hairline-soft); color: var(--ti-ink-2); }
.ti-badge--success { background: var(--ti-success-bg); color: var(--ti-success-text); }
.ti-badge--warning { background: var(--ti-warning-bg); color: var(--ti-warning-text); }
.ti-badge--error { background: var(--ti-error-bg); color: var(--ti-error-text); }
.ti-badge--info { background: var(--ti-info-bg); color: var(--ti-info-text); }
/* A hold, not a booking: an outline with a dashed edge, so it reads apart
   from the green "Buchung" by shape as well as colour. */
.ti-badge--option { padding: 1px 7px; border: 1px dashed var(--ti-option); background: var(--ti-card); color: var(--ti-option); }
/* A running Sonderangebot: the same teal, filled, so it does not read as a hold. */
.ti-badge--promo { background: var(--ti-option-bg); color: var(--ti-option); }
/* Exklusiv: only bookable through us, so the house colour. */
.ti-badge--accent { background: var(--ti-primary-soft); color: var(--ti-primary); }
.ti-badge .ti-icon { flex: none; }

/* A neutral code chip: house numbers, object ids. */
.ti-code {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 6px; border-radius: 5px;
  background: var(--ti-card); box-shadow: inset 0 0 0 1px #DDD7CE; color: #3E3A36;
  font-family: var(--ti-font-mono); font-size: var(--ti-text-xs); white-space: nowrap; text-decoration: none;
}
a.ti-code:hover { box-shadow: inset 0 0 0 1px var(--ti-primary); color: var(--ti-primary); }

.ti-avatar {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: var(--ti-radius-m);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ti-hairline-soft); color: var(--ti-ink-2);
  font-size: var(--ti-text-xs); font-weight: 600;
}

/* ---------- Table ---------- */

.ti-table { width: 100%; border-collapse: collapse; font-size: var(--ti-text-m); }
.ti-table th {
  padding: 10px 14px; text-align: left;
  font-size: var(--ti-text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ti-muted);
  border-bottom: 1px solid var(--ti-hairline);
}
.ti-table td { padding: 11px 14px; vertical-align: top; border-bottom: 1px solid var(--ti-hairline-soft); }
.ti-table tbody tr:hover td { background: #FCFBF9; }
.ti-table tbody tr:last-child td { border-bottom: 0; }
.ti-table__group th {
  padding: 16px 14px 8px; background: var(--ti-paper);
  font-size: var(--ti-text-s); letter-spacing: 0; text-transform: none; color: var(--ti-ink); font-weight: 600;
}
.ti-table__num, .ti-table__time { font-family: var(--ti-font-mono); font-size: var(--ti-text-s); color: var(--ti-ink-2); white-space: nowrap; }
.ti-table__muted { color: var(--ti-muted); font-size: var(--ti-text-s); }
.ti-table__action { text-align: right; white-space: nowrap; }
.ti-table-wrap { position: relative; overflow-x: auto; } /* relative: keeps visually-hidden labels inside the scroll area */

/* ---------- Pagination ---------- */

.ti-pagination { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: var(--ti-space-5) 0 0; }
.ti-pagination__page, .ti-pagination__step {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 10px; border-radius: var(--ti-radius-m);
  color: var(--ti-ink-2); font-size: var(--ti-text-s); font-weight: 500; text-decoration: none;
}
a.ti-pagination__page:hover, a.ti-pagination__step:hover { background: var(--ti-hairline-soft); color: var(--ti-ink); }
.ti-pagination__page--current { background: var(--ti-ink); color: #FFFFFF; font-weight: 500; font-family: var(--ti-font-mono); }
.ti-pagination__page { font-family: var(--ti-font-mono); }
.ti-pagination__step--off { color: #B5AFA6; }
.ti-pagination__gap { padding: 0 4px; color: var(--ti-muted); }

/* ---------- Empty state ---------- */

.ti-empty { padding: var(--ti-space-8) var(--ti-space-6); text-align: center; color: var(--ti-muted); }
.ti-empty__title { margin: 0 0 4px; font-size: var(--ti-text-l); font-weight: 600; color: var(--ti-ink); }
.ti-empty__text { margin: 0 0 var(--ti-space-4); font-size: var(--ti-text-m); }

@media (max-width: 760px) {
  .ti-page-head { flex-direction: column; align-items: flex-start; }
  .ti-filterbar .ti-input--m { width: 100%; }
  .ti-filterbar .ti-field { flex: 1 1 100%; }
}

/* ---------- Sheet: a table you fill in, cell by cell (knowledge sheets) ----------
   Every cell saves on its own (ui/js/page-knowledge.js). No overflow on any
   ancestor, so the column headers stick below the site header; below 1300px
   each row turns into a card instead of scrolling sideways. */
.ti-sheet-bar { align-items: center; }
.ti-sheet-bar .ti-check { margin: 0; align-self: flex-end; padding-bottom: 10px; }
.ti-progress { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin-left: auto; font-size: var(--ti-text-s); color: var(--ti-muted); }
.ti-progress strong { font-size: var(--ti-text-xl); color: var(--ti-ink); font-weight: 600; }
.ti-progress__bar { display: block; width: 220px; height: 6px; border-radius: 3px; background: var(--ti-hairline-soft); overflow: hidden; }
.ti-progress__fill { display: block; width: 0; height: 100%; border-radius: 3px; background: var(--ti-primary); transition: width 300ms; }

.ti-sheet-keys { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ti-space-2) var(--ti-space-5); margin: 0 0 var(--ti-space-3); font-size: var(--ti-text-s); color: var(--ti-muted); }
.ti-body kbd {
  display: inline-block; min-width: 20px; padding: 1px 5px; border: 1px solid var(--ti-hairline); border-bottom-width: 2px;
  border-radius: 4px; background: var(--ti-card); font-family: var(--ti-font-mono); font-size: var(--ti-text-xs); color: var(--ti-ink-2); text-align: center;
}
.ti-savestate { font-weight: 600; color: var(--ti-success-text); }
.ti-savestate--error { color: var(--ti-error-text); }

.ti-sheet-wrap { padding: 0; }
.ti-sheet { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--ti-text-m); }
.ti-sheet thead th {
  position: sticky; top: var(--ti-header-h, 61px); z-index: 3;
  padding: 12px 10px 10px; background: var(--ti-card); border-bottom: 1px solid var(--ti-hairline);
  text-align: left; vertical-align: bottom; font-size: var(--ti-text-s); font-weight: 600; color: var(--ti-ink);
}
.ti-sheet thead th:first-child { border-top-left-radius: var(--ti-radius-xl); padding-left: var(--ti-space-5); }
.ti-sheet thead th:last-child { border-top-right-radius: var(--ti-radius-xl); padding-right: var(--ti-space-5); }
.ti-sheet__legend { display: block; max-width: 140px; margin-top: 3px; font-size: var(--ti-text-xs); font-weight: 400; line-height: 1.35; color: var(--ti-muted); }
.ti-sheet tbody th, .ti-sheet td { padding: 10px; border-bottom: 1px solid var(--ti-hairline-soft); vertical-align: top; transition: background 250ms; }
.ti-sheet tbody tr:last-child > * { border-bottom: 0; }
.ti-sheet tbody tr:hover > * { background: #FCFBF9; }
.ti-sheet tbody th { padding-left: var(--ti-space-5); text-align: left; font-weight: 400; }
.ti-sheet td:last-child { padding-right: var(--ti-space-5); }
.ti-sheet tbody tr { scroll-margin-top: calc(var(--ti-header-h, 61px) + 100px); }
.ti-sheet tbody tr:target > * { background: var(--ti-primary-soft); }
/* Every column as narrow as its controls; the notes take what is left. */
.ti-sheet thead th { width: 1%; }
.ti-sheet thead th.ti-sheet__notes { width: auto; min-width: 200px; }
.ti-sheet thead th.ti-sheet__text { width: auto; min-width: 160px; }
.ti-sheet__name { min-width: 180px; max-width: 230px; }
.ti-sheet__title { display: block; font-weight: 600; text-decoration: none; }
.ti-sheet__title:hover { text-decoration: underline; }
.ti-sheet__sub, .ti-sheet__stamp { display: block; margin-top: 3px; font-size: var(--ti-text-s); line-height: 1.35; color: var(--ti-muted); }
.ti-sheet__stamp { font-size: var(--ti-text-xs); }
.ti-sheet__langs { display: inline-flex; gap: 4px; }
.ti-sheet .ti-field { margin: 0; }
.ti-sheet .ti-input { height: 32px; font-size: var(--ti-text-s); }
.ti-sheet .ti-select { width: 140px; padding-left: 9px; }
.ti-sheet textarea.ti-input { width: 100%; max-width: none; height: 32px; min-height: 32px; max-height: 190px; padding: 6px 9px; resize: vertical; overflow: hidden auto; line-height: 1.45; }
/* max-height: owner notes run to ~2 500 characters; past that they scroll rather than stretch the row. */
.ti-sheet__more { margin-top: 6px; border-radius: var(--ti-radius-s); transition: background 250ms; }
.ti-sheet__minilabel { display: block; margin: 0 0 3px; font-size: var(--ti-text-xs); font-weight: 600; color: var(--ti-ink-2); }
/* The agreement's date on the owner sheet (plan 041): the weekday under the field, so the column keeps its width. */
.ti-sheet .ti-date__row { flex-wrap: wrap; row-gap: 4px; }
.ti-sheet .ti-date__weekday { flex-basis: 100%; min-width: 0; }
.ti-sheet td.is-saving, .ti-sheet__more.is-saving { background: var(--ti-warning-bg); }
.ti-sheet td.is-saved, .ti-sheet__more.is-saved { background: var(--ti-success-bg); }
.ti-sheet td.is-error, .ti-sheet__more.is-error { background: var(--ti-error-bg); }
.ti-sheet__err { margin: 6px 0 0; font-size: var(--ti-text-s); font-weight: 500; color: var(--ti-error-text); }
.ti-sheet__retry { padding: 0; border: 0; background: none; font: inherit; color: var(--ti-primary); text-decoration: underline; cursor: pointer; }
.ti-sheet-foot { margin: var(--ti-space-4) 0 0; font-size: var(--ti-text-s); color: var(--ti-muted); }
.ti-sheet-bar__checks { display: flex; flex-direction: column; gap: 6px; align-self: flex-end; padding-bottom: 2px; }
.ti-sheet-bar__checks .ti-check { margin: 0; }
.ti-sheet-bar .ti-select { width: 190px; }

/* Units sheet: the name cell carries a cover thumbnail and the facts. */
.ti-sheet--units .ti-sheet__name { min-width: 380px; max-width: 460px; }
/* Owner sheet: 1 355px with both scales set, against the 1 374px .ti-main leaves at its 1440px cap. */
.ti-sheet--owners thead th.ti-sheet__notes { min-width: 180px; }
.ti-sheet--units .ti-sheet__demand, .ti-sheet--units thead th:nth-child(2) { min-width: 120px; }
.ti-sheet__unit { display: flex; gap: 12px; align-items: flex-start; }
.ti-sheet__unit > div { min-width: 0; }
.ti-sheet__thumb {
  flex: 0 0 auto; width: 72px; height: 54px; border-radius: var(--ti-radius-s);
  object-fit: cover; background: var(--ti-hairline-soft); display: block;
}
.ti-sheet__thumb--empty { display: flex; align-items: center; justify-content: center; color: var(--ti-muted); }
.ti-sheet__title + .ti-badge { margin-top: 4px; }
.ti-sheet__facts { display: block; margin-top: 3px; font-size: var(--ti-text-s); color: var(--ti-ink-2); }
.ti-sheet__facts > span { white-space: nowrap; }
.ti-sheet__sub a { color: inherit; text-decoration: underline; text-decoration-color: var(--ti-hairline); text-underline-offset: 2px; }
.ti-sheet__sub a:hover { color: var(--ti-primary); text-decoration-color: currentColor; }
.ti-sheet__demand { white-space: nowrap; font-size: var(--ti-text-s); }
.ti-sheet__demand-n { font-family: var(--ti-font-mono); font-size: var(--ti-text-l); font-weight: 500; color: var(--ti-ink); }
.ti-sheet__row--off .ti-sheet__thumb { opacity: 0.55; }
.ti-sheet__row--off .ti-sheet__title { color: var(--ti-ink-2); }

@media (max-width: 1300px) {
  .ti-sheet, .ti-sheet tbody { display: block; }
  .ti-sheet thead { display: none; }
  .ti-sheet tbody tr {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--ti-space-3) var(--ti-space-4);
    padding: var(--ti-space-4) var(--ti-space-5); border-bottom: 1px solid var(--ti-hairline);
  }
  .ti-sheet tbody tr:last-child { border-bottom: 0; }
  .ti-sheet tbody th, .ti-sheet td { display: block; padding: 0; border: 0; }
  .ti-sheet td:last-child, .ti-sheet tbody th { padding: 0; }
  .ti-sheet tbody tr:hover > * { background: none; }
  .ti-sheet tbody th { grid-column: 1 / -1; }
  .ti-sheet td[data-field="notes"] { grid-column: 1 / -1; }
  .ti-sheet--units .ti-sheet__name { min-width: 0; max-width: none; }
  .ti-sheet td::before { content: attr(data-label); display: block; margin: 0 0 5px; font-size: var(--ti-text-s); font-weight: 600; color: var(--ti-ink-2); }
  .ti-sheet td[data-hint]::after { content: attr(data-hint); display: block; max-width: 210px; margin-top: 4px; font-size: var(--ti-text-xs); line-height: 1.35; color: var(--ti-muted); }
  .ti-sheet td.is-saving, .ti-sheet td.is-saved, .ti-sheet td.is-error { border-radius: var(--ti-radius-s); box-shadow: 0 0 0 6px var(--ti-card); }
  .ti-sheet .ti-select { width: 100%; }
  .ti-progress { align-items: flex-start; margin-left: 0; }
}
/*
 * The owner sheet does not fit as a table below 1440px, so it turns into
 * cards from there rather than at 1300px. It cannot scroll sideways instead:
 * its header is sticky to the page. The same rules as the block above.
 */
@media (min-width: 1301px) and (max-width: 1440px) {
  .ti-sheet--owners, .ti-sheet--owners tbody { display: block; }
  .ti-sheet--owners thead { display: none; }
  .ti-sheet--owners tbody tr {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--ti-space-3) var(--ti-space-4);
    padding: var(--ti-space-4) var(--ti-space-5); border-bottom: 1px solid var(--ti-hairline);
  }
  .ti-sheet--owners tbody tr:last-child { border-bottom: 0; }
  .ti-sheet--owners tbody th, .ti-sheet--owners td, .ti-sheet--owners td:last-child { display: block; padding: 0; border: 0; }
  .ti-sheet--owners tbody tr:hover > * { background: none; }
  .ti-sheet--owners tbody th, .ti-sheet--owners td[data-field="notes"] { grid-column: 1 / -1; }
  .ti-sheet--owners td::before { content: attr(data-label); display: block; margin: 0 0 5px; font-size: var(--ti-text-s); font-weight: 600; color: var(--ti-ink-2); }
  .ti-sheet--owners td[data-hint]::after { content: attr(data-hint); display: block; max-width: 210px; margin-top: 4px; font-size: var(--ti-text-xs); line-height: 1.35; color: var(--ti-muted); }
  .ti-sheet--owners td.is-saving, .ti-sheet--owners td.is-saved, .ti-sheet--owners td.is-error { border-radius: var(--ti-radius-s); box-shadow: 0 0 0 6px var(--ti-card); }
  .ti-sheet--owners .ti-select { width: 100%; }
}
@media (max-width: 760px) {
  .ti-sheet-keys > span:first-child { display: none; } /* keyboard hints, on a phone */
  .ti-sheet-bar .ti-select { width: 100%; }
  .ti-progress__bar { width: 100%; }
  .ti-progress { width: 100%; }
}

/* ---------- Icon button (row actions) ---------- */
.ti-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; flex-shrink: 0;
  border: 1px solid transparent; border-radius: var(--ti-radius-m);
  background: transparent; color: var(--ti-ink-2); cursor: pointer; text-decoration: none;
}
.ti-iconbtn:hover { background: var(--ti-hairline-soft); border-color: var(--ti-hairline); color: var(--ti-ink); }

/* ---------- Segmented filter (radios) ---------- */
.ti-segments { margin: 0; padding: 0; border: 0; min-width: 0; }
.ti-segments > .ti-field__label { display: block; margin: 0 0 6px; padding: 0; }
.ti-segments__options { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: var(--ti-radius-m); background: var(--ti-hairline-soft); }
.ti-segment { position: relative; display: inline-flex; }
.ti-segment__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ti-segment > span { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 6px; font-size: var(--ti-text-s); font-weight: 500; color: var(--ti-ink-2); cursor: pointer; white-space: nowrap; }
.ti-segment:hover > span { color: var(--ti-ink); }
.ti-segment__input:checked + span { background: var(--ti-card); color: var(--ti-ink); font-weight: 600; box-shadow: var(--ti-shadow-s); }
.ti-segment__input:focus-visible + span { box-shadow: var(--ti-focus-ring); }
.ti-segment__count { font-family: var(--ti-font-mono); font-size: var(--ti-text-xs); color: var(--ti-muted); }
.ti-segment--warning .ti-segment__count { color: var(--ti-warning-text); font-weight: 500; }
/* The same look as links, for filters that load a page (Strand-Bilder). */
a.ti-segment { text-decoration: none; }
a.ti-segment.is-current > span { background: var(--ti-card); color: var(--ti-ink); font-weight: 600; box-shadow: var(--ti-shadow-s); }
a.ti-segment:focus-visible { outline: none; }
a.ti-segment:focus-visible > span { box-shadow: var(--ti-focus-ring); }

/* ---------- Jump bar: links to the sections of a long page ---------- */
.ti-jumpbar {
  position: sticky; top: var(--ti-header-h, 61px); z-index: 20;
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  margin: 0 calc(-1 * var(--ti-space-8)) var(--ti-space-4); padding: 10px var(--ti-space-8);
  background: var(--ti-paper); border-bottom: 1px solid var(--ti-hairline-soft);
}
.ti-jumpbar::-webkit-scrollbar { display: none; }
.ti-jumpbar__link {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  height: 30px; padding: 0 12px; border-radius: 15px; border: 1px solid var(--ti-hairline);
  background: var(--ti-card); color: var(--ti-ink-2); font-size: var(--ti-text-s); font-weight: 500; text-decoration: none; white-space: nowrap;
}
.ti-jumpbar__link:hover { border-color: var(--ti-ink); color: var(--ti-ink); }
.ti-jumpbar__count { font-family: var(--ti-font-mono); font-size: var(--ti-text-xs); color: var(--ti-muted); }

/* ---------- Häuser → Übersicht ---------- */
.ti-houses-bar { align-items: flex-end; }
.ti-houses-bar .ti-input--m { width: 280px; }
/* One table per region: fixed column widths, so the columns line up down
   the whole page instead of each table sizing itself. */
.ti-houses__table { table-layout: fixed; }
.ti-houses__c-id { width: 64px; }
.ti-houses__c-photo { width: 100px; }
.ti-houses__c-status { width: 170px; }
.ti-houses__c-season { width: 130px; }
.ti-houses__c-visit { width: 140px; }
.ti-houses__c-actions { width: 240px; }
.ti-houses { margin: 0 0 var(--ti-space-5); padding: var(--ti-space-2) 0 0; scroll-margin-top: calc(var(--ti-header-h, 61px) + 64px); }
.ti-houses__title { display: flex; align-items: baseline; gap: 10px; margin: 0; padding: var(--ti-space-4) var(--ti-space-5) var(--ti-space-2); font-family: var(--ti-font-display); font-weight: 400; font-size: var(--ti-text-xl); }
.ti-houses__count { font-family: var(--ti-font-mono); font-size: var(--ti-text-s); color: var(--ti-muted); }
.ti-houses__table td { vertical-align: middle; padding-top: 10px; padding-bottom: 10px; }
.ti-houses__table td:first-child { padding-left: var(--ti-space-5); }
.ti-houses__table td:last-child { padding-right: var(--ti-space-4); }
.ti-houses__id { width: 64px; color: var(--ti-muted); }
.ti-houses__photo { width: 96px; }
.ti-houses__thumb { display: block; width: 76px; height: 56px; border-radius: var(--ti-radius-s); object-fit: cover; background: var(--ti-hairline-soft); }
.ti-houses__thumb--empty { display: flex; align-items: center; justify-content: center; color: var(--ti-muted); border: 1px dashed var(--ti-hairline); }
.ti-houses__name { font-weight: 600; font-size: var(--ti-text-m); text-decoration: none; color: var(--ti-ink); }
.ti-houses__name:hover { color: var(--ti-primary); text-decoration: underline; }
.ti-houses__sub { display: block; margin-top: 2px; font-size: var(--ti-text-s); color: var(--ti-muted); }
.ti-houses__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 6px; }
.ti-houses__einheit { font-size: var(--ti-text-s); color: var(--ti-ink-2); padding: 2px 8px; border: 1px solid var(--ti-hairline); border-radius: 10px; }
.ti-houses__status { width: 170px; }
.ti-houses__season { width: 130px; white-space: nowrap; }
.ti-houses__visit { width: 140px; white-space: nowrap; font-family: var(--ti-font-mono); font-size: var(--ti-text-s); color: var(--ti-ink-2); }
.ti-houses__visit--none { font-family: var(--ti-font-sans); color: var(--ti-muted); }
.ti-houses__table .ti-table__action { width: 240px; text-align: left; } /* the pencil at the same place in every row */
.ti-houses__actions { display: inline-flex; align-items: center; gap: 2px; }
.ti-houses__actions .k-info { margin: 0 4px 0 0; }
.ti-houses__row--off .ti-houses__thumb { opacity: 0.5; }
.ti-houses__row--off .ti-houses__name { color: var(--ti-ink-2); }

.ti-season { display: inline-flex; align-items: center; gap: 7px; font-family: var(--ti-font-mono); font-size: var(--ti-text-s); color: var(--ti-ink-2); }
.ti-season__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ti-success-border); }
.ti-season--stale { color: var(--ti-warning-text); font-weight: 600; }
.ti-season--stale .ti-season__dot { background: var(--ti-warning-border); box-shadow: 0 0 0 3px var(--ti-warning-bg); }
.ti-season--missing { color: var(--ti-muted); font-family: var(--ti-font-sans); }
.ti-season--missing .ti-season__dot { background: transparent; border: 1.5px dashed var(--ti-warning-border); }

@media (max-width: 900px) {
  .ti-houses__table, .ti-houses__table tbody { display: block; }
  .ti-houses__table tr { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 4px 12px; padding: 12px var(--ti-space-4); border-bottom: 1px solid var(--ti-hairline-soft); }
  .ti-houses__table tr[hidden] { display: none; }
  .ti-houses__table td, .ti-houses__table td:first-child, .ti-houses__table td:last-child, .ti-houses__table .ti-table__action { display: block; width: auto; padding: 0; border: 0; }
  .ti-houses__id { display: none !important; }
  .ti-houses__photo { grid-row: 1 / span 3; }
  .ti-houses__status, .ti-houses__season, .ti-houses__visit, .ti-table__action { grid-column: 2; }
  .ti-houses__status { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px; }
  .ti-houses__status .ti-houses__sub { margin: 0; }
  .ti-table__action { text-align: left; margin-left: -8px; }
}
@media (max-width: 760px) {
  /* .ti-main's side padding is 16px here, not 32px. */
  .ti-jumpbar { margin-left: calc(-1 * var(--ti-space-4)); margin-right: calc(-1 * var(--ti-space-4)); padding-left: var(--ti-space-4); padding-right: var(--ti-space-4); }
}

/* ---------- Alerts: four, never a fifth (Bausteine 7) ---------- */
.ti-alert {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 0 0 var(--ti-space-4); padding: 12px 16px;
  border: 1px solid; border-radius: var(--ti-radius-l);
  font-size: var(--ti-text-m); line-height: 1.5;
}
.ti-alert:focus { outline: none; box-shadow: var(--ti-focus-ring); }
.ti-alert__mark {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 20px; height: 20px; margin-top: 1px; border-radius: 50%;
  color: #FFFFFF; font-size: var(--ti-text-s); font-weight: 700; font-family: var(--ti-font-sans);
}
.ti-alert__body { min-width: 0; }
.ti-alert__title { margin: 0; font-weight: 600; }
.ti-alert__text { margin: 2px 0 0; }
.ti-alert__title + .ti-alert__text { color: var(--ti-ink-2); }
.ti-alert__list { margin: 6px 0 0; padding-left: 18px; }
.ti-alert__list a { color: inherit; font-weight: 500; }
.ti-alert__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ti-alert--info    { background: var(--ti-info-soft); border-color: var(--ti-info-border); color: var(--ti-info-text); }
.ti-alert--info    .ti-alert__mark { background: var(--ti-info-text); font-family: var(--ti-font-display); }
.ti-alert--warning { background: var(--ti-warning-soft); border-color: var(--ti-warning-border); color: var(--ti-warning-text); }
.ti-alert--warning .ti-alert__mark { background: var(--ti-warning-mark); }
.ti-alert--error   { background: var(--ti-error-bg); border-color: var(--ti-error-border); color: var(--ti-error-text); }
.ti-alert--error   .ti-alert__mark { background: var(--ti-error); }
.ti-alert--success { background: var(--ti-success-soft); border-color: var(--ti-success-border); color: var(--ti-success-text); }
.ti-alert--success .ti-alert__mark { background: var(--ti-success-mark); }

/* ---------- Confirm inside the button (Bausteine 5) ---------- */
.ti-confirm { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.ti-confirm__note { font-size: var(--ti-text-s); color: var(--ti-ink-2); }
.ti-confirm .ti-btn--danger { background: var(--ti-error); border-color: var(--ti-error); color: #FFFFFF; }
.ti-confirm .ti-btn--danger:hover { background: var(--ti-error-text); }
.ti-confirm--pop {
  position: fixed; z-index: 60;
  width: max-content; max-width: 280px; padding: 10px 12px;
  border: 1px solid var(--ti-hairline); border-radius: var(--ti-radius-l);
  background: var(--ti-card); box-shadow: var(--ti-shadow-m); text-align: left;
  white-space: normal; /* row-action cells are nowrap */
}
.ti-confirm--pop .ti-confirm__note { flex-basis: 100%; }

/* ---------- Toasts ---------- */
.ti-toasts { position: fixed; left: 50%; bottom: var(--ti-space-6); z-index: 90; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; width: max-content; max-width: calc(100vw - 32px); }
.ti-toast {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 10px 10px 16px; border-radius: var(--ti-radius-l);
  background: var(--ti-dark); color: #FFFFFF; box-shadow: var(--ti-shadow-m);
  font-size: var(--ti-text-m);
}
/* Before the script moves it into .ti-toasts, a toast stands where it was
   echoed - fixed at the bottom all the same. */
body > .ti-toast, .ti-main > .ti-toast { position: fixed; left: 50%; bottom: var(--ti-space-6); z-index: 90; transform: translateX(-50%); }
.ti-toast--error { background: var(--ti-error-text); }
.ti-toast__action { color: var(--ti-primary-tint); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.ti-toast__action:hover { color: #FFFFFF; }
.ti-toast__close { width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--ti-radius-s); background: transparent; color: var(--ti-on-dark-muted); font-size: var(--ti-text-l); line-height: 1; cursor: pointer; }
.ti-toast__close:hover { background: rgba(255, 255, 255, 0.12); color: #FFFFFF; }

/* ---------- Dialog ---------- */
.ti-dialog {
  width: min(460px, calc(100vw - 32px)); padding: 0;
  border: 1px solid var(--ti-hairline); border-radius: var(--ti-radius-xl);
  background: var(--ti-card); color: var(--ti-ink); box-shadow: 0 24px 60px rgba(23, 22, 26, 0.24);
}
.ti-dialog::backdrop { background: rgba(23, 22, 26, 0.36); }
.ti-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 4px 22px; }
.ti-dialog__title { margin: 0; font-size: var(--ti-text-l); font-weight: 600; }
.ti-dialog__body { padding: 12px 22px 4px; }
.ti-dialog__body .ti-input--m { max-width: none; }
.ti-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 12px 22px 20px; }

/* ---------- Search dialog (canvas "Überall-Suche") ---------- */
/* Hangs from the top rather than the middle, so the field stays put while
   results come and go below it. */
.ti-qs {
  width: min(880px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 128px);
  margin: 64px auto auto; padding: 0; flex-direction: column; overflow: hidden;
  border: 1px solid var(--ti-hairline); border-radius: var(--ti-radius-xl);
  background: var(--ti-card); color: var(--ti-ink); box-shadow: 0 24px 60px rgba(23, 22, 26, 0.32);
}
.ti-qs[open] { display: flex; }
.ti-qs::backdrop { background: rgba(23, 22, 26, 0.42); }
.ti-qs__bar { display: flex; align-items: center; gap: var(--ti-space-3); flex-shrink: 0; height: 62px; padding: 0 var(--ti-space-3) 0 var(--ti-space-5); border-bottom: 1px solid var(--ti-hairline); color: var(--ti-muted); }
.ti-qs__input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; outline: none; font: inherit; font-size: var(--ti-text-l); color: var(--ti-ink); }
.ti-qs__input::placeholder { color: #767169; }
.ti-qs__spinner { width: 16px; height: 16px; flex-shrink: 0; border: 2px solid var(--ti-hairline); border-top-color: var(--ti-primary); border-radius: 50%; visibility: hidden; animation: ti-bp-spin 700ms linear infinite; }
.ti-qs--busy .ti-qs__spinner { visibility: visible; }
.ti-qs__close { display: flex; align-items: center; height: 32px; padding: 0 6px; border: 0; border-radius: var(--ti-radius-s); background: transparent; cursor: pointer; }
.ti-qs__close:hover { background: var(--ti-hairline-soft); }

.ti-qs__chips { display: flex; flex-wrap: wrap; gap: 6px; flex-shrink: 0; padding: 10px var(--ti-space-5); border-bottom: 1px solid var(--ti-hairline-soft); }
.ti-qs__chip {
  height: 28px; padding: 0 11px; border: 1px solid var(--ti-hairline); border-radius: 14px;
  background: var(--ti-card); color: var(--ti-ink-2); font: inherit; font-size: var(--ti-text-s); font-weight: 600; cursor: pointer;
}
.ti-qs__chip:hover { border-color: var(--ti-field-border); color: var(--ti-ink); }
.ti-qs__chip[aria-pressed="true"] { border-color: var(--ti-ink); background: var(--ti-ink); color: var(--ti-card); }

.ti-qs__results { flex: 1 1 auto; min-height: 120px; overflow-y: auto; padding: 4px 8px 8px; overscroll-behavior: contain; }
.ti-qs__group + .ti-qs__group { margin-top: 4px; }
.ti-qs__heading { margin: 0; padding: 12px 10px 6px; font-size: var(--ti-text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ti-muted); }
.ti-qs__list { margin: 0; padding: 0; list-style: none; }
.ti-qs__row { display: flex; align-items: center; gap: 4px var(--ti-space-3); padding: 0 8px 0 0; border-radius: var(--ti-radius-m); }
.ti-qs__row:hover, .ti-qs__row:focus-within, .ti-qs--field .ti-qs__row--first { background: var(--ti-primary-soft); }
.ti-qs__main {
  display: flex; align-items: center; gap: var(--ti-space-3); flex: 1 1 auto; min-width: 0;
  padding: 8px 10px; border-radius: var(--ti-radius-m); color: var(--ti-ink); text-decoration: none; outline: none;
}
.ti-qs__main:hover { color: var(--ti-ink); }
.ti-qs__main:focus-visible { box-shadow: inset 0 0 0 2px var(--ti-primary); }
.ti-qs__photo { display: block; width: 72px; height: 54px; flex-shrink: 0; border-radius: var(--ti-radius-s); object-fit: cover; background: var(--ti-hairline-soft); }
.ti-qs__photo--empty { display: flex; align-items: center; justify-content: center; color: var(--ti-muted); border: 1px dashed var(--ti-hairline); }
.ti-qs__tile { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--ti-radius-m); background: var(--ti-hairline-soft); color: var(--ti-ink-2); }
.ti-qs__row--booking .ti-qs__tile { background: var(--ti-success-bg); color: var(--ti-success-text); }
.ti-qs__row--request .ti-qs__tile { background: var(--ti-info-bg); color: var(--ti-info-text); }
.ti-qs__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ti-qs__title { font-size: var(--ti-text-m); font-weight: 600; line-height: 1.45; }
.ti-qs__title .ti-badge { margin-left: 2px; vertical-align: 1px; }
.ti-qs__id, .ti-qs__mono { font-family: var(--ti-font-mono); font-size: var(--ti-text-s); font-weight: 400; color: var(--ti-muted); }
.ti-qs__id { margin-left: 2px; }
.ti-qs__sub { overflow: hidden; font-size: var(--ti-text-s); color: var(--ti-muted); white-space: nowrap; text-overflow: ellipsis; }
.ti-qs__enter { visibility: hidden; margin-left: auto; flex-shrink: 0; }
.ti-qs__main:focus .ti-qs__enter, .ti-qs--field .ti-qs__row--first .ti-qs__enter { visibility: visible; }
.ti-qs__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; flex-shrink: 0; }
.ti-qs__actions .ti-btn--s { height: 30px; padding: 0 10px; font-size: var(--ti-text-s); }
.ti-qs__more {
  display: inline-block; margin: 2px 0 0 10px; padding: 4px 0; border: 0; background: transparent;
  color: var(--ti-primary); font: inherit; font-size: var(--ti-text-s); font-weight: 600; cursor: pointer; text-decoration: none;
}
.ti-qs__more:hover { text-decoration: underline; }
.ti-qs__empty { padding: 28px 12px; text-align: center; }
.ti-qs__empty-title { margin: 0 0 4px; font-size: var(--ti-text-m); font-weight: 600; }
.ti-qs__empty-text { max-width: 480px; margin: 0 auto; font-size: var(--ti-text-s); color: var(--ti-muted); }

.ti-qs__foot { display: flex; align-items: center; gap: var(--ti-space-4); flex-shrink: 0; min-height: 42px; padding: 0 var(--ti-space-5); border-top: 1px solid var(--ti-hairline); background: var(--ti-paper); font-size: var(--ti-text-s); color: var(--ti-muted); }
.ti-qs__hint { display: inline-flex; align-items: center; gap: 6px; }
.ti-qs__count { margin-left: auto; }
.ti-qs__all { font-weight: 600; }

/* Narrow: the actions go under the row, the key hints go. */
@media (max-width: 1000px) {
  .ti-qs__row { flex-wrap: wrap; padding: 0 0 8px; }
  .ti-qs__actions { flex: 1 1 100%; box-sizing: border-box; justify-content: flex-start; padding-left: 58px; }
  .ti-qs__row--house .ti-qs__actions { padding-left: 94px; }
}
@media (max-width: 760px) {
  .ti-qs { width: calc(100vw - 16px); max-height: calc(100vh - 16px); margin-top: 8px; }
  .ti-qs__bar { padding-left: var(--ti-space-4); }
  .ti-qs__input { font-size: var(--ti-text-l); }
  .ti-qs__hint, .ti-qs .ti-qs__enter { display: none; }
  .ti-qs__row--house .ti-qs__actions, .ti-qs__actions { padding-left: 10px; }
}

/* ---------- Row menu ---------- */
.ti-menu { position: relative; display: inline-block; }
.ti-menu > summary { list-style: none; }
.ti-menu > summary::-webkit-details-marker { display: none; }
.ti-menu[open] > summary { background: var(--ti-hairline-soft); border-color: var(--ti-hairline); color: var(--ti-ink); }
.ti-menu__list {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 40;
  min-width: 220px; margin: 0; padding: 6px; list-style: none;
  border: 1px solid var(--ti-hairline); border-radius: var(--ti-radius-l);
  background: var(--ti-card); box-shadow: var(--ti-shadow-m); text-align: left;
}
.ti-menu--up .ti-menu__list { top: auto; bottom: calc(100% + 4px); }
.ti-menu--start .ti-menu__list { right: auto; left: 0; }
.ti-menu:not([open]) > .ti-menu__list { display: none; }
.ti-menu__item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 0 10px;
  border: 0; border-radius: var(--ti-radius-s); background: transparent;
  color: var(--ti-ink); font: inherit; font-size: var(--ti-text-m); text-decoration: none; white-space: nowrap; cursor: pointer;
}
.ti-menu__item:hover, .ti-menu__item:focus { background: var(--ti-hairline-soft); color: var(--ti-ink); outline: none; }
.ti-menu__item:focus-visible { box-shadow: inset 0 0 0 2px var(--ti-primary); }
.ti-menu__item .ti-icon { color: var(--ti-muted); }
.ti-menu__item--danger, .ti-menu__item--danger .ti-icon { color: var(--ti-error-text); }
.ti-menu__item--danger:hover, .ti-menu__item--danger:focus { background: var(--ti-error-bg); color: var(--ti-error-text); }
.ti-menu__spacer { width: 15px; flex-shrink: 0; }
.ti-menu__label { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }
.ti-menu__sub { font-size: var(--ti-text-s); font-weight: 400; line-height: 1.3; color: var(--ti-muted); }
.ti-menu__item--suggested { background: var(--ti-primary-soft); font-weight: 600; }
.ti-menu__item--suggested .ti-menu__sub { color: var(--ti-primary); }
.ti-menu__heading { padding: 6px 10px 6px; font-size: var(--ti-text-xs); font-weight: 600; color: var(--ti-muted); }
/* A menu with no icon at all keeps no room for one, so the items line up
   with the heading. */
.ti-menu__list:not(:has(.ti-icon)) .ti-menu__spacer { display: none; }
/* Where items explain themselves (a second line), every item gets the same
   padding - with or without that line - so the rhythm does not jump. */
.ti-menu__list:has(.ti-menu__sub) { min-width: 280px; }
.ti-menu__list:has(.ti-menu__sub) .ti-menu__item { min-height: 0; padding-block: 8px; line-height: 1.3; white-space: normal; }
.ti-menu__trigger { gap: 6px; }
.ti-menu[open] > .ti-menu__trigger { background: var(--ti-hairline-soft); }
.ti-menu__key { font-family: var(--ti-font-mono); font-size: var(--ti-text-xs); color: var(--ti-muted); }
.ti-menu__divider { height: 1px; margin: 5px 4px; background: var(--ti-hairline-soft); }
.ti-menu .ti-confirm { display: flex; padding: 6px 8px; }

/* ---------- Date field (Bausteine 3) ---------- */
.ti-date { position: relative; }
.ti-date__row { position: relative; display: flex; align-items: center; gap: 12px; }
.ti-input--date { width: 150px; padding-right: 38px; font-family: var(--ti-font-mono); font-size: var(--ti-text-m); }
.ti-date__open {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: var(--ti-radius-s); background: transparent; color: var(--ti-muted); cursor: pointer;
}
.ti-date__open:hover, .ti-date__open[aria-expanded="true"] { background: var(--ti-hairline-soft); color: var(--ti-ink); }
.ti-date__weekday { font-size: var(--ti-text-s); color: var(--ti-ink-2); min-width: 80px; }
.ti-date__status--error { color: var(--ti-error-text); font-weight: 500; }
.ti-date__status--error::before { content: '! '; font-weight: 700; }
.ti-date__cal {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 45; width: 288px; padding: 10px;
  border: 1px solid var(--ti-hairline); border-radius: var(--ti-radius-l); background: var(--ti-card); box-shadow: var(--ti-shadow-m);
}
.ti-cal__head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 6px; }
.ti-cal__head .ti-iconbtn { font-size: var(--ti-text-l); }
.ti-cal__month { font-size: var(--ti-text-m); font-weight: 600; }
.ti-cal__grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ti-cal__grid th { padding: 4px 0; font-size: var(--ti-text-xs); font-weight: 600; color: var(--ti-muted); text-align: center; }
.ti-cal__grid td { padding: 1px; text-align: center; }
.ti-cal__day {
  width: 100%; height: 34px; padding: 0; border: 1px solid transparent; border-radius: var(--ti-radius-s);
  background: transparent; color: var(--ti-ink); font-family: var(--ti-font-mono); font-size: var(--ti-text-s); cursor: pointer;
}
.ti-cal__day:hover { background: var(--ti-hairline-soft); }
.ti-cal__day--today { border-color: var(--ti-hairline); font-weight: 600; }
.ti-cal__day--on, .ti-cal__day--on:hover { background: var(--ti-primary); border-color: var(--ti-primary); color: #FFFFFF; font-weight: 600; }
.ti-cal__day:focus-visible { outline: 2px solid var(--ti-primary); outline-offset: 1px; }

/* ---------- Eigentümer (eigentuemer-liste.php) ---------- */
.ti-linkbtn { padding: 0; border: 0; background: none; font: inherit; color: var(--ti-primary); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.ti-owners__count { margin: 0 0 0 auto; align-self: center; font-size: var(--ti-text-s); color: var(--ti-muted); }
.ti-owners { display: flex; flex-direction: column; gap: var(--ti-space-3); }
.ti-owner { scroll-margin-top: calc(var(--ti-header-h, 61px) + 16px); }
.ti-owner:target { box-shadow: 0 0 0 3px var(--ti-primary-tint); border-color: var(--ti-primary-tint-border); }
.ti-owner__head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px var(--ti-space-5); list-style: none; cursor: pointer; border-radius: var(--ti-radius-xl);
}
.ti-owner__head::-webkit-details-marker { display: none; }
.ti-owner__head:hover { background: #FCFBF9; }
.ti-owner__head:focus-visible { outline: 2px solid var(--ti-primary); outline-offset: -2px; }
.ti-owner__chevron { display: inline-flex; color: var(--ti-muted); transition: transform 150ms; }
.ti-owner[open] > .ti-owner__head .ti-owner__chevron { transform: rotate(90deg); }
.ti-owner__name { font-size: var(--ti-text-m); font-weight: 600; color: var(--ti-ink); text-decoration: none; }
.ti-owner__name:hover { color: var(--ti-primary); text-decoration: underline; }
.ti-owner__waiting { text-decoration: none; }
.ti-owner__chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.ti-owner__actions { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.ti-owner__actions .k-info { margin: 0 4px 0 0; }
.ti-owner__body { padding: 4px var(--ti-space-5) var(--ti-space-5) 50px; border-top: 1px solid var(--ti-hairline-soft); }
.ti-owner__body .ti-subhead { margin-top: var(--ti-space-5); }
.ti-owner__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--ti-space-8); }
.ti-owner__muted { margin: 0; font-size: var(--ti-text-s); color: var(--ti-muted); }
.ti-owner__notes { margin: 0; padding: 12px 16px; background: var(--ti-paper); border-radius: var(--ti-radius-m); font-size: var(--ti-text-m); white-space: pre-wrap; }
.ti-dl { display: grid; grid-template-columns: 130px minmax(0, 1fr); margin: 0; font-size: var(--ti-text-m); }
.ti-dl dt, .ti-dl dd { margin: 0; padding: 5px 0; border-bottom: 1px solid var(--ti-hairline-soft); }
/* No line under the last row: the card's edge or the next block already ends it. */
.ti-dl > :nth-last-child(-n + 2) { border-bottom: 0; }
.ti-dl dt { color: var(--ti-muted); overflow-wrap: anywhere; hyphens: auto; padding-right: 8px; }
.ti-dl dd { min-width: 0; overflow-wrap: anywhere; }
.ti-dl__mono { font-family: var(--ti-font-mono); font-size: var(--ti-text-s); }
.ti-owner__users { display: flex; flex-direction: column; gap: 12px; }
.ti-owner__user { padding: 12px 16px; border: 1px solid var(--ti-hairline); border-radius: var(--ti-radius-l); }
.ti-owner__username { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: var(--ti-text-m); }
.ti-owner__pw { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 12px; }
.ti-owner__pw .ti-field { margin: 0; flex: 0 1 360px; min-width: 220px; }
.ti-owner__pw > .ti-btn, .ti-owner__pw > .ti-confirm { margin-top: 25px; }
.ti-secret { margin: 8px 0; padding: 10px 14px; border: 1px solid var(--ti-success-border); border-radius: var(--ti-radius-m); background: var(--ti-card); color: var(--ti-ink); font-family: var(--ti-font-mono); font-size: var(--ti-text-l); letter-spacing: 0.04em; user-select: all; }

/* A linked house, as a card (owner list and the houses without an owner). */
.ti-ounits { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; }
.ti-ounit { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 10px; border: 1px solid var(--ti-hairline); border-radius: var(--ti-radius-l); background: var(--ti-card); }
.ti-ounit:hover { border-color: var(--ti-field-border); }
.ti-ounit--off { background: var(--ti-paper); }
.ti-ounit--off .ti-ounit__thumb { opacity: 0.55; }
.ti-ounit__thumb { flex-shrink: 0; width: 88px; height: 66px; border-radius: var(--ti-radius-s); object-fit: cover; background: var(--ti-hairline-soft); display: block; }
.ti-ounit__thumb--empty { display: flex; align-items: center; justify-content: center; color: var(--ti-muted); border: 1px dashed var(--ti-hairline); }
.ti-ounit__body { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.ti-ounit__title { display: flex; align-items: center; }
.ti-ounit__name { font-weight: 600; font-size: var(--ti-text-m); color: var(--ti-ink); text-decoration: none; }
.ti-ounit__name:hover { color: var(--ti-primary); text-decoration: underline; }
.ti-ounit__meta { font-size: var(--ti-text-s); color: var(--ti-muted); }
.ti-ounit__stats { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: var(--ti-text-s); color: var(--ti-ink-2); }
.ti-ounit__stats a { color: inherit; }
.ti-ounit__stats strong { color: var(--ti-ink); }
.ti-ounit .ti-menu { flex-shrink: 0; margin: -4px -4px 0 0; }
.ti-orphans { margin-top: var(--ti-space-8); scroll-margin-top: calc(var(--ti-header-h, 61px) + 16px); }
.ti-orphans .ti-houses__title { padding-left: 0; }

@media (max-width: 760px) {
  .ti-owner__cols { grid-template-columns: minmax(0, 1fr); }
  .ti-owner__body { padding-left: var(--ti-space-4); padding-right: var(--ti-space-4); }
  .ti-owner__head { padding: 12px var(--ti-space-4); }
  .ti-ounits { grid-template-columns: minmax(0, 1fr); }
  .ti-dl { grid-template-columns: 110px minmax(0, 1fr); }
  .ti-owners__count { margin-left: 0; }
}

/* ---------- Buchungen (calendar_booking_overview.php) ---------- */
.ti-bookings__new { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ti-bookings__hint { font-size: var(--ti-text-s); color: var(--ti-muted); }
.ti-bunit { margin: 0 0 var(--ti-space-4); scroll-margin-top: calc(var(--ti-header-h, 61px) + 16px); }
.ti-bunit__head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding: var(--ti-space-4) var(--ti-space-5) var(--ti-space-2); }
.ti-bunit__title { margin: 0; font-family: var(--ti-font-display); font-weight: 400; font-size: var(--ti-text-xl); }
.ti-bunit__id { font-family: var(--ti-font-mono); font-size: var(--ti-text-s); color: var(--ti-muted); }
.ti-bunit__cal { display: inline-flex; align-items: center; gap: 5px; font-size: var(--ti-text-s); font-weight: 500; text-decoration: none; }
.ti-bunit__past { margin: 0; padding: 10px var(--ti-space-5); border-top: 1px solid var(--ti-hairline-soft); font-size: var(--ti-text-s); color: var(--ti-muted); }
.ti-btable td { vertical-align: middle; }
/* One table per house: fixed columns, so they line up down the page. */
.ti-btable { table-layout: fixed; }
.ti-btable__c-status { width: 130px; } .ti-btable__c-dates { width: 200px; } .ti-btable__c-num { width: 150px; }
.ti-btable__c-guests { width: 190px; } .ti-btable__c-dog { width: 70px; } .ti-btable__c-info { width: 22%; } .ti-btable__c-actions { width: 120px; }
.ti-btable .ti-table__action { text-align: left; } /* details first, in the same place on every row */
.ti-btable th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ti-btable td { overflow-wrap: anywhere; }
.ti-btable td:first-child, .ti-btable th:first-child { padding-left: var(--ti-space-5); }
.ti-stay { display: inline-block; }
.ti-stay__dates { font-family: var(--ti-font-mono); font-size: var(--ti-text-s); color: var(--ti-ink); white-space: nowrap; }
.ti-stay__nights { display: block; font-size: var(--ti-text-s); color: var(--ti-muted); }
.ti-btable__nights { display: block; font-family: var(--ti-font-sans); font-size: var(--ti-text-s); color: var(--ti-muted); }
.ti-btable__zero { color: var(--ti-hairline); }
.ti-btable__info { max-width: 320px; font-size: var(--ti-text-s); color: var(--ti-ink-2); }
.ti-btable__actions { display: inline-flex; gap: 2px; align-items: center; }
.ti-btable__storno td:not(:first-child):not(:last-child) { color: var(--ti-muted); text-decoration: line-through; text-decoration-color: var(--ti-hairline); }

@media (max-width: 900px) {
  .ti-btable, .ti-btable tbody { display: block; }
  .ti-btable thead { display: none; }
  .ti-btable tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; padding: 12px var(--ti-space-4); border-bottom: 1px solid var(--ti-hairline-soft); }
  .ti-btable tr[hidden] { display: none; }
  .ti-btable td, .ti-btable td:first-child { display: block; padding: 0; border: 0; }
  .ti-btable td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-family: var(--ti-font-sans); font-size: var(--ti-text-xs); font-weight: 600; color: var(--ti-muted); }
  .ti-btable .ti-stay__dates { white-space: normal; }
  .ti-btable__storno td:not(:first-child):not(:last-child) { text-decoration: none; } /* the label would be struck through too; the badge says it */
  .ti-btable__info, .ti-btable .ti-table__action { grid-column: 1 / -1; max-width: none; }
  .ti-btable .ti-table__action { text-align: left; margin-left: -8px; }
}

/* ---------- Hint on hover and focus: data-ti-tip ----------
   For a short explanation of something small (a status dot, a badge). Shown
   at once, not after the native title's delay; keyboard focus shows it too.
   The hint exists only while shown: hidden but present, it still widened the
   page on a phone wherever its badge sat outside a scrolling table. */
[data-ti-tip] { position: relative; }
[data-ti-tip]::after {
  content: none;
  position: absolute; left: calc(100% + 10px); top: 50%; z-index: 30;
  transform: translate(-4px, -50%);
  width: max-content; max-width: min(320px, calc(100vw - 32px)); padding: 6px 10px; border-radius: var(--ti-radius-s);
  background: var(--ti-dark); color: #FFFFFF; box-shadow: var(--ti-shadow-m);
  font-family: var(--ti-font-sans); font-size: var(--ti-text-s); font-weight: 500; line-height: 1.35; letter-spacing: 0; text-transform: none; text-shadow: none; white-space: normal; text-align: left;
  pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 120ms, transform 120ms, visibility 120ms;
}
[data-ti-tip]:hover::after, [data-ti-tip]:focus-visible::after { content: attr(data-ti-tip); opacity: 1; visibility: visible; transform: translate(0, -50%); }
[data-ti-tip-pos="above"]::after { left: 0; top: auto; bottom: calc(100% + 6px); transform: translateY(4px); }
[data-ti-tip-pos="above"]:hover::after, [data-ti-tip-pos="above"]:focus-visible::after { transform: translateY(0); }

/* ---------- Status dot (Anfragen) ----------
   A ring is still open (new, in progress, option), a filled dot is decided;
   booked carries a check. Every state has the same 3px border, filled ones
   in their own colour, because the initials on the lower right are placed
   from inside the border: a state without one put them 3px further out.
   In the Anfragen table the dot is 26px so the check still has room beside
   the initials, and moves 1px up-left, out from under them. */
.ti-sdot { display: inline-block; position: relative; flex-shrink: 0; width: 22px; height: 22px; border: 3px solid transparent; border-radius: 50%; box-sizing: border-box; vertical-align: middle; }
.ti-sdot--new { border-color: var(--ti-hairline); }
.ti-sdot--pending { border-style: dotted; border-color: var(--ti-warning-mark); }
.ti-sdot--option { border-color: var(--ti-success-mark); }
.ti-sdot--booked { border-color: var(--ti-success-mark); background: var(--ti-success-mark); }
.ti-sdot--booked::before {
  content: ""; position: absolute; inset: 0; background: var(--ti-card);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.ti-sdot--booked:has(.ti-sdot__by)::before { transform: translate(-1px, -1px); }
.ti-sdot--closed { border-color: var(--ti-error); background: var(--ti-error); }
.ti-sdot__by {
  position: absolute; right: -12px; bottom: -8px;
  display: flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 3px; box-sizing: border-box; border-radius: 9px;
  box-shadow: 0 0 0 2px var(--ti-card); background: var(--ti-primary-tint); color: var(--ti-on-primary-tint);
  font-size: var(--ti-text-2xs); font-weight: 700; letter-spacing: 0.02em; line-height: 1;
}
.ti-sdot__by--auto { background: var(--ti-hairline-soft); color: var(--ti-muted); }
.ti-sdot:has(.ti-sdot__by)::after { left: calc(100% + 19px); }

/* ---------- Anfragen (show-messages-table.php) ---------- */
.ti-chipbar { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.ti-enq-chips { margin: 0 0 var(--ti-space-4); }
.ti-filterchip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px 0 12px; border-radius: 14px;
  background: var(--ti-primary-soft); color: var(--ti-on-primary-tint); font-size: var(--ti-text-s); font-weight: 600; text-decoration: none;
}
.ti-filterchip:hover { background: var(--ti-primary-tint); color: var(--ti-on-primary-tint); }
.ti-enq tbody tr { cursor: pointer; }
.ti-enq td { vertical-align: top; }
.ti-enq__status { width: 48px; padding-top: 12px; }
.ti-enq__status .ti-sdot { width: 26px; height: 26px; }
.ti-enq__status .ti-sdot--booked::before { -webkit-mask-size: 13px; mask-size: 13px; }
.ti-enq th:first-child, .ti-enq td:first-child { padding-left: var(--ti-space-5); }
.ti-enq__meta { display: block; margin-top: 2px; font-family: var(--ti-font-sans); font-size: var(--ti-text-s); color: var(--ti-muted); }
.ti-enq__name { font-weight: 600; color: var(--ti-ink); text-decoration: none; }
.ti-enq__name:hover { color: var(--ti-primary); text-decoration: underline; }
.ti-enq__guest { max-width: 280px; overflow-wrap: anywhere; }
.ti-enq__dates { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ti-enq__flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
a.ti-enq__flag { text-decoration: none; }
a.ti-enq__flag:hover, a.ti-enq__flag:focus-visible { text-decoration: underline; }
.ti-enq__actions { display: inline-flex; gap: 2px; }

@media (max-width: 900px) {
  .ti-enq, .ti-enq tbody { display: block; }
  .ti-enq thead { display: none; }
  .ti-enq tr { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px var(--ti-space-4); border-bottom: 1px solid var(--ti-hairline-soft); }
  .ti-enq td, .ti-enq td:first-child { display: block; padding: 0; border: 0; }
  .ti-enq__status { grid-row: 1 / span 4; padding-top: 2px; }
  .ti-enq td:not(.ti-enq__status):not(.ti-table__action) { grid-column: 2; }
  .ti-enq .ti-table__action { grid-column: 3; grid-row: 1; }
  /* The icons only share the first line; below it the dates can use their width. */
  .ti-enq td.ti-enq__when:not(.ti-table__action) { grid-column: 2 / -1; }
  .ti-enq__guest { order: -1; }
  .ti-enq td[data-label]::before { content: attr(data-label); display: block; font-family: var(--ti-font-sans); font-size: var(--ti-text-xs); font-weight: 600; color: var(--ti-muted); }
  .ti-enq .ti-table__time .ti-enq__meta { display: inline; margin-left: 6px; }
}

/* ---------- Detail pages: one request (show-messages.php), one customer (customers_detail.php) ---------- */
.ti-detail__buttons { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ti-space-2); margin: 0; }
.ti-empty .ti-detail__buttons { justify-content: center; margin-top: var(--ti-space-3); }
.ti-detail__flash { margin: 0 0 var(--ti-space-4); }
.ti-detail__status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ti-space-3); padding: 12px var(--ti-space-5); margin: 0 0 var(--ti-space-5); }
.ti-detail__statustext { flex: 1 1 200px; margin: 0; }
.ti-detail__statustext .ti-enq__meta { display: inline; margin-left: 8px; }
.ti-detail { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: var(--ti-space-5); align-items: start; }
.ti-detail__main, .ti-detail__aside { display: flex; flex-direction: column; gap: var(--ti-space-5); min-width: 0; }
.ti-detail__card { padding: var(--ti-space-5) var(--ti-space-6); }
.ti-detail__card--table { padding-bottom: 0; }
.ti-detail__card--table .ti-table-wrap { margin: 0 calc(-1 * var(--ti-space-6)); border-top: 1px solid var(--ti-hairline-soft); }
.ti-detail__h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--ti-space-3); font-size: var(--ti-text-l); font-weight: 600; color: var(--ti-ink); scroll-margin-top: calc(var(--ti-header-h, 61px) + 16px); }
.ti-detail__h2--small { margin: 0; font-size: var(--ti-text-s); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ti-muted); }
.ti-detail__msg { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }

/* The mailbox sync line on the inquiry list (plan 017c). */
.ti-mail-sync { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ti-space-2); margin: 0 0 var(--ti-space-3); font-size: var(--ti-text-s); color: var(--ti-muted); }
.ti-mail-sync__form { display: inline; margin: 0; }
/* The Verlauf of an inquiry (plan 017d): one feed. The guest's messages on
   the left, ours on the right like a chat, events as pills in the middle.
   Colour only on the option, booking and waiting pills, never on a row. */
.ti-feed__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--ti-space-2); }
.ti-feed__head .ti-detail__h2 { margin: 0; }
.ti-feed__sync { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ti-space-1); margin: 0; font-size: var(--ti-text-s); color: var(--ti-muted); }
.ti-feed { list-style: none; margin: var(--ti-space-5) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--ti-space-4); }
.ti-feed__day { display: flex; align-items: center; gap: var(--ti-space-3); font-size: var(--ti-text-s); font-weight: 500; color: var(--ti-muted); }
.ti-feed__day::before, .ti-feed__day::after { content: ''; flex-grow: 1; height: 1px; background: var(--ti-hairline-soft); }
.ti-feed__msg { display: flex; gap: var(--ti-space-3); max-width: 620px; }
.ti-feed__msg--out { flex-direction: row-reverse; align-self: flex-end; }
.ti-feed__avatar { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; background: var(--ti-info-bg); color: var(--ti-info-text); display: flex; align-items: center; justify-content: center; font-size: var(--ti-text-s); font-weight: 600; }
.ti-feed__msg--out .ti-feed__avatar { background: var(--ti-primary-tint); color: var(--ti-on-primary-tint); }
/* Sent from someone else's mailbox: the sender's initials on the mailbox's avatar. */
.ti-feed__avatar { position: relative; }
.ti-feed__avatar-by { position: absolute; right: -5px; bottom: -5px; min-width: 19px; height: 19px; padding: 0 3px; box-sizing: border-box; border: 2px solid var(--ti-card); border-radius: 999px; background: var(--ti-primary); color: var(--ti-card); display: flex; align-items: center; justify-content: center; font-size: var(--ti-text-xs); font-weight: 600; line-height: 1; }
.ti-feed__body { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--ti-space-2); }
.ti-feed__msg--out .ti-feed__body { align-items: flex-end; }
.ti-feed__meta { margin: 0; font-size: var(--ti-text-s); color: var(--ti-muted); }
.ti-feed__meta strong { color: var(--ti-ink); font-weight: 600; }
.ti-feed__bubble { margin: 0; padding: 13px 15px; border-radius: 4px 14px 14px 14px; background: var(--ti-paper); line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.ti-feed__msg--out .ti-feed__bubble { border-radius: 14px 4px 14px 14px; background: var(--ti-primary-soft); }
/* The quote that came along, behind "•••" at the end of the bubble. */
.ti-feed__tools { display: flex; flex-wrap: wrap; gap: 6px; }
.ti-feed__tools > * { margin-top: var(--ti-space-2); }
.ti-feed__more { display: inline-block; height: 18px; padding: 0 8px; border: 0; border-radius: 999px; background: var(--ti-card); color: var(--ti-muted); font: inherit; font-size: var(--ti-text-xs); line-height: 18px; letter-spacing: 1px; cursor: pointer; }
.ti-feed__more:hover { background: var(--ti-hairline); color: var(--ti-ink); }
.ti-feed__more:focus-visible { outline: none; box-shadow: var(--ti-focus-ring); }
.ti-feed__more[hidden] { display: none; }
.ti-feed__more--text { padding: 0 10px; font-weight: 500; letter-spacing: 0; }
/* "Übersetzen" under a message (translate.php): the German in a box under it. */
.ti-feed__translation { box-sizing: border-box; width: 100%; padding: var(--ti-space-3) var(--ti-space-4); border: 1px solid var(--ti-hairline); border-radius: var(--ti-radius-m); font-size: var(--ti-text-m); line-height: 1.55; color: var(--ti-ink-2); }
.ti-feed__translation-head { margin: 0 0 var(--ti-space-1); font-size: var(--ti-text-s); color: var(--ti-muted); }
.ti-feed__translation-text { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
/* Attachments under a mail (plan 017d, D8): downloads, never shown inline. */
.ti-feed__files { display: flex; flex-direction: column; gap: var(--ti-space-1); margin: 0; padding: 0; list-style: none; font-size: var(--ti-text-s); color: var(--ti-muted); }
.ti-feed__msg--out .ti-feed__files { align-items: flex-end; }
.ti-feed__file { font-weight: 500; overflow-wrap: anywhere; }
.ti-feed__none { color: var(--ti-muted); }
.ti-feed__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ti-feed__chip { display: inline-block; padding: 3px 9px; border-radius: var(--ti-radius-s); border: 1px solid var(--ti-hairline); font-size: var(--ti-text-s); text-decoration: none; }
.ti-feed__chip--success { border-color: var(--ti-success-border); background: var(--ti-success-bg); color: var(--ti-success-text); }
.ti-feed__chip--warning { border-color: var(--ti-warning-border); background: var(--ti-warning-bg); color: var(--ti-warning-text); }
.ti-feed__chip--error { border-color: var(--ti-error-border); background: var(--ti-error-bg); color: var(--ti-error-text); }
.ti-feed__note { margin: 0; font-size: var(--ti-text-s); color: var(--ti-muted); }
.ti-feed__event { display: flex; flex-direction: column; align-items: center; gap: var(--ti-space-2); }
.ti-feed__pill { display: inline-flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: var(--ti-space-2); max-width: 100%; box-sizing: border-box; margin: 0; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--ti-hairline); background: var(--ti-paper); font-size: var(--ti-text-s); color: var(--ti-ink-2); text-align: center; }
.ti-feed__pill strong { font-weight: 600; }
.ti-feed__pill--status { flex-wrap: wrap; }
.ti-feed__pill > svg { flex-shrink: 0; }
.ti-feed__pill a, .ti-feed__pill .ti-btn--link { color: inherit; font-size: inherit; }
.ti-feed__pill--auto { border-style: dashed; background: var(--ti-card); color: var(--ti-muted); }
.ti-feed__pill--option { border-color: var(--ti-option-border); background: var(--ti-option-bg); color: var(--ti-option); }
.ti-feed__pill--booking { border-color: var(--ti-success-border); background: var(--ti-success-bg); color: var(--ti-success-text); }
.ti-feed__pill--warning { border-color: var(--ti-warning-border); background: var(--ti-warning-bg); color: var(--ti-warning-text); }
.ti-feed__pill--error { border-color: var(--ti-error-border); background: var(--ti-error-bg); color: var(--ti-error-text); }
.ti-feed__pill--end { padding: 7px 15px; font-size: var(--ti-text-m); }
.ti-feed__pill--neutral.ti-feed__pill--end { font-size: var(--ti-text-s); }
.ti-feed__peekbody { width: 100%; max-width: 620px; box-sizing: border-box; margin: 0; padding: var(--ti-space-3) var(--ti-space-4); border: 1px solid var(--ti-hairline); border-radius: var(--ti-radius-m); font-size: var(--ti-text-s); color: var(--ti-ink-2); white-space: pre-line; overflow-wrap: anywhere; }
.ti-feed__reply { margin-top: var(--ti-space-5); padding-top: var(--ti-space-4); border-top: 1px solid var(--ti-hairline); }
.ti-feed__subject { margin: 0; font-size: var(--ti-text-m); font-weight: 600; color: var(--ti-ink); overflow-wrap: anywhere; }
.ti-feed__msg--out .ti-feed__subject { text-align: right; }
.ti-feed__template { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ti-space-2); font-size: var(--ti-text-s); color: var(--ti-ink-2); }
.ti-feed__reply-subject { align-self: stretch; }
.ti-feed__reply-subject[hidden] { display: none; }
.ti-feed__reply-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ti-space-2); }
@media (max-width: 600px) {
	.ti-feed__msg { max-width: 100%; }
	.ti-feed__msg--out { padding-left: var(--ti-space-6); }
	.ti-feed__msg:not(.ti-feed__msg--out) { padding-right: var(--ti-space-6); }
	.ti-feed__avatar { display: none; }
	.ti-feed__pill { border-radius: var(--ti-radius-l); }
}
.ti-detail__none { margin: 0; color: var(--ti-muted); }
.ti-detail__unit { overflow: hidden; }
.ti-detail__unit .ti-preview__title a { color: var(--ti-ink); text-decoration: none; }
.ti-detail__unit .ti-preview__title a:hover { color: var(--ti-primary); text-decoration: underline; }
.ti-detail__note { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ti-space-3); }
.ti-detail__note .ti-field { align-self: stretch; margin: 0; }
.ti-detail__note textarea.ti-input { width: 100%; max-width: none; }
.ti-detail__label { display: flex; align-items: center; gap: 6px; margin: var(--ti-space-3) 0 0; font-size: var(--ti-text-s); font-weight: 600; color: var(--ti-ink-2); }
.ti-detail__label:first-of-type { margin-top: 0; }
.ti-detail__others td { vertical-align: top; }
.ti-detail__customers { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 var(--ti-space-3); }
.ti-detail__customers a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.ti-detail__customers .ti-enq__meta { display: inline; margin: 0; }
.ti-detail__others td.ti-enq__meta { display: table-cell; }
.ti-detail__others td:first-child, .ti-detail__others th:first-child { width: 44px; padding-left: var(--ti-space-6); }
.ti-detail__lead { margin: 0 0 var(--ti-space-3); font-size: var(--ti-text-s); color: var(--ti-muted); }
.ti-detail__thumb { display: block; width: 44px; height: 33px; object-fit: cover; border-radius: var(--ti-radius-s); background: var(--ti-hairline-soft); }
.ti-detail__links, .ti-detail__nowrap { white-space: nowrap; }
.ti-detail__links a + a { margin-left: var(--ti-space-3); }
@media (max-width: 600px) { .ti-detail__others .ti-detail__thumbcell { display: none; } }
.ti-detail__specs { display: block; margin-top: 4px; font-size: var(--ti-text-s); line-height: 1.5; color: var(--ti-muted); }
.ti-detail__spec--match { color: var(--ti-success-text); font-weight: 600; }
.ti-detail__spec--miss { color: var(--ti-warning-text); font-weight: 600; }
/* Similar houses grouped by Einheit: one <tbody> each, a header row, then its units with their photos, no rules between them. */
.ti-detail__others .ti-detail__group td { width: auto; border-bottom: 0; padding-top: 14px; padding-bottom: 2px; }
.ti-detail__groupname { font-size: var(--ti-text-m); font-weight: 600; }
.ti-detail__member td { border-bottom: 0; padding-top: 6px; padding-bottom: 6px; }
.ti-detail__member:last-child td { padding-bottom: 11px; }
.ti-detail__others tbody + tbody { border-top: 1px solid var(--ti-hairline-soft); }
.ti-detail__more { margin: 0; padding: var(--ti-space-2) var(--ti-space-6); border-top: 1px solid var(--ti-hairline-soft); }
@media (max-width: 900px) { .ti-detail__more { padding: var(--ti-space-2) var(--ti-space-4); } }
@media (max-width: 900px) {
  .ti-detail { grid-template-columns: minmax(0, 1fr); }
  .ti-page-head:has(.ti-detail__buttons) { flex-direction: column; align-items: flex-start; }
  .ti-detail__card { padding: var(--ti-space-4); }
  .ti-detail__card--table .ti-table-wrap { margin: 0 calc(-1 * var(--ti-space-4)); }
}

/* ---------- One customer (customers_detail.php) ---------- */
.ti-cust__table td { vertical-align: top; }
.ti-cust__table td:first-child, .ti-cust__table th:first-child { padding-left: var(--ti-space-6); }
.ti-cust__info { max-width: 260px; font-size: var(--ti-text-s); overflow-wrap: anywhere; }
.ti-cust__rating { margin: 0; padding: var(--ti-space-3) 0; border-top: 1px solid var(--ti-hairline-soft); }
.ti-cust__rating:first-of-type { border-top: 0; padding-top: 0; }
.ti-cust__rating-head { margin: 0; }
.ti-cust__quote { margin: 6px 0 0; padding-left: 12px; border-left: 3px solid var(--ti-hairline); color: var(--ti-ink-2); font-style: italic; }
/* Another customer with the same email, and the merge (plan 043, D25) */
.ti-cust__merge { display: flex; flex-direction: column; gap: var(--ti-space-3); }
.ti-cust__merge + .ti-cust__merge { margin-top: var(--ti-space-4); padding-top: var(--ti-space-4); border-top: 1px solid var(--ti-hairline-soft); }

/* ---------- Kunden (customers_overview.php) ---------- */
.ti-clist tbody tr { cursor: pointer; }
.ti-clist td { vertical-align: top; }
.ti-clist th:first-child, .ti-clist td:first-child { padding-left: var(--ti-space-5); }
.ti-clist__name { min-width: 200px; }
.ti-clist__contact { max-width: 260px; overflow-wrap: anywhere; }
.ti-clist__inline-contact { display: none; }
.ti-clist__next { display: block; font-weight: 600; color: var(--ti-ink); }
@media (max-width: 760px) {
  .ti-clist__contact, .ti-clist__req { display: none; }
  .ti-clist__inline-contact { display: inline; }
}

/* ---------- One customer, edited (form-customer.php) ---------- */
@media (min-width: 761px) { .ti-form-grid.ti-cform__city { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }

/* ---------- One booking (calendar_booking_detail.php) ---------- */
.ti-bdetail__from { display: inline; margin: 0; font-weight: 400; }
.ti-bdetail__costs { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }

/* ---------- The booking forms (form-add- / form-edit-calendar_booking.php) ---------- */
.ti-bform__link { margin: calc(-1 * var(--ti-space-2)) 0 var(--ti-space-4); font-size: var(--ti-text-s); }

/* ---------- Kalender (calendar_overview.php) ---------- */
/* Admin user 1 sees own calendars above all calendars: keep the two apart. */
.ti-cal__own + .ti-page-head { margin-top: calc(2 * var(--ti-space-8)); padding-top: var(--ti-space-8); border-top: 1px solid var(--ti-hairline); }
.ti-cal__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--ti-space-5); }
.ti-cal__card { display: flex; flex-direction: column; overflow: hidden; }
.ti-cal__cover { display: block; height: 170px; background: var(--ti-hairline-soft); }
.ti-cal__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ti-cal__cover-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--ti-muted); }
.ti-cal__body { display: flex; flex-direction: column; gap: var(--ti-space-3); padding: var(--ti-space-4) var(--ti-space-5) var(--ti-space-5); }
.ti-cal__title { margin: 0; font-family: var(--ti-font-display); font-size: var(--ti-text-xl); font-weight: 400; }
.ti-cal__title a { color: var(--ti-ink); text-decoration: none; }
.ti-cal__title a:hover { color: var(--ti-primary); text-decoration: underline; }
.ti-cal__sub { margin: -8px 0 0; color: var(--ti-ink-2); }
.ti-cal__facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.ti-cal__years { display: flex; flex-wrap: wrap; gap: var(--ti-space-2); margin: 0; }
.ti-cal__occ { display: flex; flex-direction: column; gap: 4px; min-width: 110px; }
.ti-cal__occ-num { font-family: var(--ti-font-mono); font-size: var(--ti-text-s); white-space: nowrap; }
.ti-cal__meter { -webkit-appearance: none; appearance: none; width: 100%; max-width: 140px; height: 6px; border: 0; border-radius: 3px; background: var(--ti-hairline-soft); }
.ti-cal__meter::-webkit-meter-bar { border: 0; border-radius: 3px; background: var(--ti-hairline-soft); }
.ti-cal__meter::-webkit-meter-optimum-value { border-radius: 3px; background: var(--ti-primary); }
.ti-cal__meter::-moz-meter-bar { border-radius: 3px; background: var(--ti-primary); }
.ti-cal__recent { margin-bottom: var(--ti-space-5); }
.ti-cal__owner { margin-bottom: var(--ti-space-4); overflow: hidden; }
.ti-cal__owner-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: var(--ti-space-4) var(--ti-space-5) var(--ti-space-3); border-bottom: 1px solid var(--ti-hairline-soft); }
.ti-cal__owner-head .ti-detail__h2 { margin: 0; }
.ti-cal__owner-none { padding: var(--ti-space-4) var(--ti-space-5); }
.ti-cal__table td { vertical-align: top; }
.ti-cal__table th:first-child, .ti-cal__table td:first-child { padding-left: var(--ti-space-5); }
.ti-cal__unit { min-width: 260px; }

/* ---------- One house's calendar (calendar_detail.php) ---------- */
.ti-kal__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ti-space-3) var(--ti-space-6); padding: var(--ti-space-3) var(--ti-space-5); margin: 0 0 var(--ti-space-4); }
.ti-kal__years { display: flex; align-items: center; gap: var(--ti-space-2); }
.ti-kal__year { margin: 0; min-width: 64px; text-align: center; font-family: var(--ti-font-display); font-size: var(--ti-text-2xl); font-weight: 400; }
.ti-kal__count { margin: 0; font-weight: 600; }
.ti-kal__legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; font-size: var(--ti-text-s); color: var(--ti-ink-2); }
.ti-kal__legend li { display: inline-flex; align-items: center; gap: 6px; }
.ti-kal__key { width: 14px; height: 14px; border-radius: 4px; border: 1px solid color-mix(in srgb, var(--ti-success-border) 45%, var(--ti-card)); background: var(--ti-cal-free); }
.ti-kal__key--taken { border-color: var(--ti-error); background: var(--ti-error); }
.ti-kal__key--booking { border-color: var(--ti-primary); background: var(--ti-primary); }
.ti-kal__key--agency { border-color: var(--ti-error); background: var(--ti-error); }
.ti-kal__key--half { border-color: transparent; background: linear-gradient(to right, var(--ti-cal-free) calc(50% - 1px), var(--ti-card) calc(50% - 1px) calc(50% + 1px), var(--ti-primary) calc(50% + 1px)) border-box; }
.ti-kal__key--option { border: 1px dashed color-mix(in srgb, var(--ti-option) 60%, var(--ti-card)); background: color-mix(in srgb, var(--ti-option) 22%, var(--ti-card)); }
.ti-kal__key--closed { background: repeating-linear-gradient(135deg, var(--ti-hairline-soft) 0 3px, var(--ti-card) 3px 6px); }
.ti-kal__how { flex-basis: 100%; margin: 0; font-size: var(--ti-text-s); color: var(--ti-muted); }
.ti-kal { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--ti-space-4); }
.ti-kal__month { padding: var(--ti-space-3) var(--ti-space-4) var(--ti-space-4); }
.ti-kal__mname { margin: 0 0 var(--ti-space-2); font-size: var(--ti-text-m); font-weight: 600; }
.ti-kal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.ti-kal__dow { padding: 2px 0 4px; text-align: center; font-size: var(--ti-text-xs); font-weight: 600; color: var(--ti-muted); }
.ti-kal__day {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 1; min-height: 30px; margin: 0; padding: 0;
  border: 1px solid var(--ti-hairline-soft); border-radius: 6px; background: var(--ti-card);
  font: inherit; font-size: var(--ti-text-s); font-variant-numeric: tabular-nums; color: var(--ti-ink); text-decoration: none;
}
.ti-kal__day--weekend { font-weight: 600; }
button.ti-kal__day { cursor: pointer; }
button.ti-kal__day:hover { border-color: var(--ti-ink-2); }
button.ti-kal__day:focus-visible { outline: none; box-shadow: var(--ti-focus-ring); }
.ti-kal__day.is-taken { border-color: var(--ti-error); background: var(--ti-error); color: #FFFFFF; font-weight: 600; }
.ti-kal__day.is-saving { opacity: 0.5; cursor: progress; }
.ti-kal__day--closed { color: var(--ti-muted); background: repeating-linear-gradient(135deg, var(--ti-hairline-soft) 0 3px, var(--ti-card) 3px 6px); }
.ti-kal__month--closed .ti-kal__mname { color: var(--ti-muted); }
.ti-kal__below { margin-top: var(--ti-space-6); }
.ti-kal__notes-edit { margin: var(--ti-space-3) 0 0; }
.ti-kal__messages, .ti-kal__log { display: flex; flex-direction: column; gap: var(--ti-space-3); margin: var(--ti-space-4) 0 0; padding: 0; list-style: none; }
.ti-kal__messages li { padding-top: var(--ti-space-3); border-top: 1px solid var(--ti-hairline-soft); }
.ti-kal__messages .ti-detail__msg { margin-top: 4px; }
.ti-kal__log { gap: 6px; margin: 0; }
.ti-kal__log li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; font-size: var(--ti-text-s); }
.ti-kal__log-day::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--ti-error); vertical-align: 1px; }
.ti-kal__log-day--remove::before { background: var(--ti-hairline); }

/* ---------- Calendar settings and note search (form-edit-calendar-info.php, calendar_search.php) ---------- */
.ti-calinfo__months { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--ti-space-2); margin: 0 0 var(--ti-space-3); }
.ti-calinfo__months .ti-chip { width: 100%; }
.ti-calinfo__all { display: flex; gap: var(--ti-space-3); margin: 0 0 var(--ti-space-3); }
.ti-calsearch { display: flex; flex-direction: column; gap: var(--ti-space-3); }
.ti-calsearch__hit { display: flex; flex-direction: column; gap: 6px; padding: var(--ti-space-4) var(--ti-space-5); color: var(--ti-ink); text-decoration: none; }
.ti-calsearch__hit:hover { border-color: var(--ti-ink-2); }
.ti-calsearch__hit mark { padding: 0 2px; border-radius: 3px; background: var(--ti-warning-bg); color: var(--ti-ink); }

/* ---------- New editor login (form-create-user.php) ---------- */
.ti-cuser__gen { margin: calc(-1 * var(--ti-space-2)) 0 var(--ti-space-4); }

/* ---------- Anfragen Besitzer (show-messages-besitzer.php) ---------- */
.ti-owners-msgs { display: flex; flex-direction: column; gap: var(--ti-space-4); max-width: 900px; }
.ti-owners-msg__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: var(--ti-space-2); }
.ti-owners-msg__head .ti-detail__h2 { margin: 0; }
.ti-owners-msg__contact { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 var(--ti-space-3); font-size: var(--ti-text-m); }
.ti-owners-msg__contact a { display: inline-flex; align-items: center; gap: 6px; }
.ti-owners-msg--spam { opacity: 0.6; }

/* ---------- Bewertungen (feedback-list.php, feedback-edit.php) ---------- */
.ti-fb__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); gap: var(--ti-space-4); align-items: stretch; }
/* Two reviews side by side on a wide screen: the space fills with reviews
   instead of a gap between the text and a column of facts. The facts are
   the card's footer, pinned to its bottom so a row lines up. */
.ti-fb { display: flex; flex-direction: column; padding: var(--ti-space-5) var(--ti-space-6); scroll-margin-top: calc(var(--ti-header-h, 61px) + 16px); }
.ti-fb--hidden { background: var(--ti-paper); }
.ti-fb__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ti-space-3); margin-top: auto; }
.ti-fb__foot::before { content: ""; flex-basis: 100%; height: 1px; margin: var(--ti-space-4) 0 0; background: var(--ti-hairline-soft); order: -1; }
.ti-fb__foot form { margin: 0; }
.ti-fb__facts { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 0; font-size: var(--ti-text-s); color: var(--ti-ink-2); }
.ti-fb__sep { color: var(--ti-hairline); }
/* What a review is assigned to: a booking (green) or only a customer (blue). */
.ti-linked { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 6px; border-radius: 999px; background: var(--ti-success-bg); color: var(--ti-success-text); font-size: var(--ti-text-s); font-weight: 600; text-decoration: none; }
.ti-linked:hover { background: var(--ti-success-border); color: var(--ti-success-text); }
.ti-linked svg { flex: none; }
.ti-linked--customer { background: var(--ti-info-bg); color: var(--ti-info-text); }
.ti-linked--customer:hover { background: var(--ti-info-border); color: var(--ti-info-text); }
.ti-fb__who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 var(--ti-space-2); }
.ti-fb__who .ti-detail__h2 { margin: 0; }
.ti-fb__title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.ti-fb__stars { font-size: var(--ti-text-m); letter-spacing: 1px; color: var(--ti-warning-mark); white-space: nowrap; }
.ti-fb__stars-off { color: var(--ti-hairline); }
.ti-fb__quote { margin: 0 0 var(--ti-space-2); font-family: var(--ti-font-display); font-size: var(--ti-text-xl); line-height: 1.3; color: var(--ti-ink); }
.ti-fb .ti-detail__none { margin: 0 0 var(--ti-space-2); font-size: var(--ti-text-s); }
.ti-fb__reply { margin-top: var(--ti-space-4); padding: 12px 16px; border-radius: var(--ti-radius-m); background: var(--ti-paper); }
.ti-fb--hidden .ti-fb__reply { background: var(--ti-card); }
.ti-fb__reply .ti-detail__label { margin-top: 0; }
.ti-fb__hint { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
@media (max-width: 900px) {
  .ti-fb { padding: var(--ti-space-4); }
}
.ti-fb__form { display: flex; flex-direction: column; gap: var(--ti-space-5); }
.ti-fb__assigned { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 var(--ti-space-3); font-size: var(--ti-text-m); }
.ti-fb__assigned a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.ti-suggest { margin: 0 0 var(--ti-space-4); padding: 14px 16px; border-radius: var(--ti-radius-l); background: var(--ti-info-soft); border: 1px solid var(--ti-info-border); }
.ti-suggest--sure { background: var(--ti-primary-soft); border-color: var(--ti-primary-tint-border); }
.ti-suggest__label { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-size: var(--ti-text-s); font-weight: 600; letter-spacing: 0.02em; color: var(--ti-ink-2); }
.ti-suggest__what { margin: 0 0 8px; font-size: var(--ti-text-m); }
.ti-suggest__why { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.ti-suggest__why li { padding: 2px 8px; border-radius: 999px; background: var(--ti-card); font-size: var(--ti-text-s); color: var(--ti-ink-2); }
.ti-suggest__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; font-size: var(--ti-text-s); }
.ti-suggest + .ti-suggest { margin-top: calc(-1 * var(--ti-space-2)); }
.ti-fb__wishes { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--ti-space-2); }

/* ---------- Einstellungen, Einheiten, Artikel (form-preferences.php, form-create-einheit.php, article_overview.php) ---------- */
.ti-prefs { display: flex; flex-direction: column; gap: var(--ti-space-5); max-width: 900px; }
.ti-einheit__form { margin-top: var(--ti-space-6); max-width: 900px; scroll-margin-top: calc(var(--ti-header-h, 61px) + 16px); }
.ti-table__nowrap { white-space: nowrap; }
.ti-articles__title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ti-articles__title a { color: var(--ti-ink); text-decoration: none; }
.ti-articles__title a:hover { color: var(--ti-primary); text-decoration: underline; }
.ti-articles__cover { flex: none; width: 64px; height: 36px; border-radius: var(--ti-radius-s); object-fit: cover; }
.ti-articles__cover--none { display: inline-flex; align-items: center; justify-content: center; background: var(--ti-paper); color: var(--ti-muted); }

/* ---------- Todo-Liste (todo-list.php) ---------- */
.ti-todos { display: flex; flex-direction: column; gap: var(--ti-space-3); margin: 0; padding: 0; list-style: none; }
.ti-todo { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ti-space-4); padding: var(--ti-space-4) var(--ti-space-5); }
.ti-todo form { margin: 0; flex: none; }
.ti-todo__main { min-width: 0; }
.ti-todo__subject { margin: 0 0 4px; }
.ti-todo__desc { margin: 0 0 4px; font-size: var(--ti-text-m); color: var(--ti-ink-2); }
.ti-todo .ti-enq__meta { margin: 0; }
.ti-todo--done { background: var(--ti-paper); }
.ti-todo--done .ti-todo__subject strong { font-weight: 500; color: var(--ti-muted); text-decoration: line-through; }
.ti-todos__done { margin-top: var(--ti-space-6); }
.ti-todos__done summary { cursor: pointer; margin-bottom: var(--ti-space-3); }

/* ---------- Ankünfte (index2.php) ---------- */
.ti-arrivals { margin-bottom: var(--ti-space-5); }
.ti-arrivals__none { padding: 0 var(--ti-space-5) var(--ti-space-4); }
.ti-arrivals__c-guests { width: 130px; } .ti-arrivals__c-review { width: 110px; }
.ti-arrivals .ti-btable__c-status { width: 104px; } .ti-arrivals__info { white-space: pre-line; } .ti-arrivals .ti-btable__c-dates { width: 190px; } .ti-arrivals .ti-btable__c-actions { width: 112px; }

/* ---------- Statistiken (show-messages-charts.php) ---------- */
.ti-stats__kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--ti-space-4); margin: 0 0 var(--ti-space-5); }
.ti-stats__kpi { padding: var(--ti-space-4) var(--ti-space-5); }
.ti-stats__value { margin: 0; font-family: var(--ti-font-display); font-size: var(--ti-text-2xl); line-height: 1.2; color: var(--ti-ink); }
.ti-stats__value--text { font-family: var(--ti-font-sans); font-size: var(--ti-text-l); font-weight: 600; }
.ti-stats__change { font-family: var(--ti-font-sans); font-size: var(--ti-text-s); font-weight: 600; color: var(--ti-muted); }
.ti-stats__label { margin: 4px 0 0; font-size: var(--ti-text-s); color: var(--ti-muted); }
.ti-stats__tables { display: flex; flex-direction: column; gap: var(--ti-space-5); }
.ti-stats { font-variant-numeric: tabular-nums; }
.ti-stats th[scope="row"] { font-size: var(--ti-text-m); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ti-ink); white-space: nowrap; }
.ti-stats th[scope="row"] a { color: inherit; text-decoration: none; }
.ti-stats th[scope="row"] a:hover { text-decoration: underline; }
.ti-stats td, .ti-stats th { padding-left: 8px; padding-right: 8px; }
.ti-heat--1 { background: var(--ti-primary-soft); }
.ti-heat--2 { background: var(--ti-primary-tint); }
.ti-heat--3 { background: var(--ti-primary-tint-border); }
.ti-heat--4 { background: var(--ti-primary); color: var(--ti-card); font-weight: 600; }
.ti-stats__now { box-shadow: inset 0 0 0 2px var(--ti-ink-2); }
.ti-stats__future { background: var(--ti-paper); }

/* ---------- Terminübersicht (calendar_checker.php) ---------- */
.ti-checker__filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ti-space-3) var(--ti-space-4); }
.ti-checker__filter .ti-field { margin: 0; }
.ti-checker__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 var(--ti-space-5); padding: 0; list-style: none; font-size: var(--ti-text-s); color: var(--ti-ink-2); }
.ti-checker__legend li { display: inline-flex; align-items: center; gap: 6px; }
.ti-checker__legend .ti-strip__day { width: 14px; min-width: 14px; height: 14px; padding: 0; }
.ti-checker__region { margin: 0 0 var(--ti-space-6); }
.ti-checker__regiontitle { margin: 0 0 var(--ti-space-3); font-size: var(--ti-text-xl); font-weight: 600; }
.ti-checker__house { margin: 0 0 var(--ti-space-3); padding: 0; }
.ti-checker__summary { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; padding: 12px var(--ti-space-5); cursor: pointer; list-style: none; }
.ti-checker__summary::-webkit-details-marker { display: none; }
.ti-checker__summary:hover .ti-checker__name { color: var(--ti-primary); }
.ti-checker__summary:hover svg { color: var(--ti-ink); }
.ti-checker__summary:focus-visible { outline: none; box-shadow: var(--ti-focus-ring); border-radius: var(--ti-radius-xl); }
.ti-checker__summary svg { flex: none; color: var(--ti-muted); transition: transform 150ms; }
.ti-checker__house:not([open]) .ti-checker__summary svg { transform: rotate(-90deg); }
.ti-checker__name { font-weight: 600; }
.ti-checker__body { padding: 0 var(--ti-space-5) var(--ti-space-4); }
.ti-checker__links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 var(--ti-space-3); font-size: var(--ti-text-s); }
.ti-checker__links a { display: inline-flex; align-items: center; gap: 6px; }
.ti-strip { margin: 0 0 var(--ti-space-3); }
.ti-strip__month { margin: 0 0 4px; font-size: var(--ti-text-s); font-weight: 600; color: var(--ti-ink-2); }
.ti-strip__days { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ti-strip__day {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; flex: 1 1 0; min-width: 0; padding: 2px 0;
  border: 1px solid var(--ti-hairline-soft); border-radius: 4px; background: var(--ti-card);
  font-size: var(--ti-text-s); font-variant-numeric: tabular-nums; line-height: 1.25; color: var(--ti-ink);
}
.ti-strip__wd { font-size: var(--ti-text-2xs); font-weight: 600; color: var(--ti-muted); }
.ti-strip__day.is-weekend .ti-strip__wd { color: var(--ti-ink-2); }
.ti-strip__day.is-taken { border-color: var(--ti-error); background: var(--ti-error); color: var(--ti-card); font-weight: 600; }
.ti-strip__day.is-taken .ti-strip__wd { color: inherit; opacity: 0.8; }
.ti-strip__day.is-closed { color: var(--ti-muted); background: repeating-linear-gradient(135deg, var(--ti-hairline-soft) 0 3px, var(--ti-card) 3px 6px); }

/* ---------- Days in the calendars (calendar_detail.php, calendar_checker.php) ----------
   Free days are a light green, so gaps are what the eye finds. Bookings are
   aubergine, options teal, the owner's own "belegt" red, closed months
   hatched grey. A booking without a customer ("andere Agentur /
   Eigenbuchung", am-/pm-agency beside am-/pm-booking) is a booking in every
   rule below and only takes another colour: ours aubergine, theirs the red
   of "belegt" - both say the house is taken, and not through us.

   calendar-days.php gives each day the booking that leaves in the morning
   (am-) and the one that arrives in the afternoon (pm-). Time runs left to
   right: the morning is the left half of the tile, the afternoon the right,
   with a small gap. A booking's halves are its full colour, so arrival and
   departure read as part of the stay, and a changeover as two stays
   meeting. The day's text changes colour at the same line (background-clip:
   text), dark over a free or light half, white over a booked one. The
   gradients are laid out from the border edge (border-box): the border is
   transparent on these days, and from the padding edge the gradient
   repeated under it, a sliver of the other half's colour on each side.

   Hovering a booking deepens its days rather than outlining or fading
   them: fading also faded the hint drawn over the day. */
.ti-kal__day, .ti-strip__day {
  --day-bg: var(--ti-cal-free);
  --booking: var(--ti-primary);
  --agency: var(--ti-error);
  --option: color-mix(in srgb, var(--ti-option) 22%, var(--ti-card));
  background: var(--day-bg); border-color: color-mix(in srgb, var(--ti-success-border) 45%, var(--ti-card));
}
.ti-kal__day.is-lit, .ti-strip__day.is-lit {
  --booking: var(--ti-primary-pressed);
  --agency: var(--ti-error-text);
  --option: color-mix(in srgb, var(--ti-option) 38%, var(--ti-card));
}
.am-booking { --am: var(--booking); --am-ink: var(--ti-card); }
.pm-booking { --pm: var(--booking); --pm-ink: var(--ti-card); }
.am-option { --am: var(--option); }
.pm-option { --pm: var(--option); }
.am-agency { --am: var(--agency); }
.pm-agency { --pm: var(--agency); }
:is(.ti-kal__day, .ti-strip__day):is(.am-booking, .am-option, .pm-booking, .pm-option) {
  border-color: transparent; font-weight: 600;
  background: linear-gradient(to right, var(--am, var(--day-bg)) calc(50% - 1.5px), var(--ti-card) calc(50% - 1.5px) calc(50% + 1.5px), var(--pm, var(--day-bg)) calc(50% + 1.5px)) border-box;
  transition: background-color 120ms;
}
:is(.ti-kal__day, .ti-strip__day):is(.am-booking, .am-option, .pm-booking, .pm-option) :is(.ti-day__n, .ti-strip__wd) {
  display: block; width: 100%; text-align: center; color: transparent;
  background: linear-gradient(to right, var(--am-ink, var(--ti-ink)) 50%, var(--pm-ink, var(--ti-ink)) 50%);
  -webkit-background-clip: text; background-clip: text;
}
:is(.ti-kal__day, .ti-strip__day):is(.am-booking, .am-option, .pm-booking, .pm-option) .ti-strip__wd { opacity: 0.75; }
:is(.ti-kal__day, .ti-strip__day).am-booking.pm-booking:not(.is-changeover) { background: var(--booking); }
:is(.ti-kal__day, .ti-strip__day).am-agency.pm-agency:not(.is-changeover) { background: var(--agency); }
/* A plain arrival or departure: the stay's part of the tile (--split wide,
   narrower on the Terminübersicht's small tiles), and the number in the
   free part, where it reads at any size - a digit split across two
   colours did not. Only a changeover keeps the number in the middle. */
.ti-kal__day, .ti-strip__day { --split: 50%; }
.ti-strip__day { --split: 40%; }
:is(.ti-kal__day, .ti-strip__day):is(.am-booking, .am-option):not(.pm-booking, .pm-option) {
  background: linear-gradient(to right, var(--am) calc(var(--split) - 1.5px), var(--ti-card) calc(var(--split) - 1.5px) calc(var(--split) + 1.5px), var(--day-bg) calc(var(--split) + 1.5px)) border-box;
}
:is(.ti-kal__day, .ti-strip__day):is(.pm-booking, .pm-option):not(.am-booking, .am-option) {
  background: linear-gradient(to right, var(--day-bg) calc(100% - var(--split) - 1.5px), var(--ti-card) calc(100% - var(--split) - 1.5px) calc(100% - var(--split) + 1.5px), var(--pm) calc(100% - var(--split) + 1.5px)) border-box;
}
:is(.ti-kal__day, .ti-strip__day):is(.am-booking, .am-option, .pm-booking, .pm-option):not(.is-changeover):not(.am-booking.pm-booking, .am-option.pm-option) :is(.ti-day__n, .ti-strip__wd) {
  width: calc(100% - var(--split)); color: var(--ti-ink); background: none;
}
:is(.ti-kal__day, .ti-strip__day):is(.am-booking, .am-option):not(.pm-booking, .pm-option) :is(.ti-day__n, .ti-strip__wd) { margin-left: auto; }
.ti-strip__day:is(.am-booking, .am-option):not(.pm-booking, .pm-option) :is(.ti-day__n, .ti-strip__wd) { align-self: flex-end; }
:is(.ti-kal__day, .ti-strip__day):is(.pm-booking, .pm-option):not(.am-booking, .am-option) :is(.ti-day__n, .ti-strip__wd) { margin-right: auto; }
.ti-strip__day:is(.pm-booking, .pm-option):not(.am-booking, .am-option) :is(.ti-day__n, .ti-strip__wd) { align-self: flex-start; }
/* A changeover between a booking and an option: the number in the
   option's light half. Two bookings keep it white in the middle. */
:is(.ti-kal__day, .ti-strip__day):is(.am-booking.pm-option, .am-option.pm-booking) :is(.ti-day__n, .ti-strip__wd) { width: 50%; color: var(--ti-ink); background: none; }
:is(.ti-kal__day, .ti-strip__day).am-booking.pm-option :is(.ti-day__n, .ti-strip__wd) { margin-left: auto; }
:is(.ti-kal__day, .ti-strip__day).am-option.pm-booking :is(.ti-day__n, .ti-strip__wd) { margin-right: auto; }
.ti-strip__day.am-booking.pm-option :is(.ti-day__n, .ti-strip__wd) { align-self: flex-end; }
.ti-strip__day.am-option.pm-booking :is(.ti-day__n, .ti-strip__wd) { align-self: flex-start; }
:is(.ti-kal__day, .ti-strip__day).am-option.pm-option:not(.is-changeover) { background: var(--option); border: 1px dashed color-mix(in srgb, var(--ti-option) 60%, var(--ti-card)); }
:is(.ti-kal__day, .ti-strip__day).is-conflict { border-color: var(--ti-error); box-shadow: inset 0 0 0 1px var(--ti-error); }
.ti-kal__day.ti-kal__day--closed, .ti-strip__day.is-closed { border-color: var(--ti-hairline-soft); background: repeating-linear-gradient(135deg, var(--ti-hairline-soft) 0 3px, var(--ti-card) 3px 6px); }
@media (max-width: 700px) {
  .ti-strip { overflow-x: auto; } /* no hover on a phone, so the hint may be clipped here */
  .ti-strip__day { flex: 1 0 26px; min-width: 26px; }
}

/* ---------- Bilder hochladen, Strände, Strand-Bilder, Einheit, Locations ---------- */
.ti-upload__thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--ti-space-3); }
.ti-upload__thumb { width: 120px; height: 80px; object-fit: cover; border-radius: var(--ti-radius-s); }
/* ui_upload(): the input lies invisible over the zone; ti-ui.js sets --over and --chosen. */
.ti-drop { position: relative; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ti-space-2); min-height: 170px; padding: var(--ti-space-4); border: 1.5px dashed var(--ti-field-border); border-radius: var(--ti-radius-l); background: var(--ti-card); text-align: center; }
.ti-drop:hover { border-color: var(--ti-primary); }
.ti-drop:focus-within { border-color: var(--ti-primary); box-shadow: var(--ti-focus-ring); }
.ti-drop__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ti-drop__empty, .ti-drop__chosen { display: flex; flex-direction: column; align-items: center; gap: var(--ti-space-2); color: var(--ti-muted); }
.ti-drop__title { font-size: var(--ti-text-m); font-weight: 600; color: var(--ti-ink); }
.ti-drop__name { font-family: var(--ti-font-mono); font-size: var(--ti-text-m); color: var(--ti-ink); overflow-wrap: anywhere; }
.ti-drop__size, .ti-drop__hint { margin: 0; font-size: var(--ti-text-xs); color: var(--ti-muted); }
.ti-drop__over, .ti-drop__chosen { display: none; }
.ti-drop--chosen { border-style: solid; }
.ti-drop--chosen .ti-drop__empty { display: none; }
.ti-drop--chosen .ti-drop__chosen { display: flex; }
.ti-drop--over { border: 2px dashed var(--ti-primary); background: var(--ti-primary-soft); }
.ti-drop--over :is(.ti-drop__empty, .ti-drop__chosen, .ti-drop__hint) { display: none; }
.ti-drop--over .ti-drop__over { display: block; font-size: var(--ti-text-m); font-weight: 600; color: var(--ti-primary); }
.ti-beaches__none { color: var(--ti-warning-text); font-weight: 600; }
.ti-beaches form { margin: 0; }
.ti-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--ti-space-4); margin: 0; padding: 0; list-style: none; }
.ti-photo { display: flex; flex-direction: column; overflow: hidden; }
.ti-photo--waiting { border-color: var(--ti-warning-border); }
.ti-photo__img { display: block; aspect-ratio: 3 / 2; background: var(--ti-paper); }
.ti-photo__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ti-photo__body { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 12px; flex: 1; }
.ti-photo__body form { margin: auto 0 0; padding-top: 6px; }
.ti-photo__beach { margin: 0; font-weight: 600; font-size: var(--ti-text-m); }
.ti-photo .ti-enq__meta { margin: 0; }
.ti-einheit__houses { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: var(--ti-text-m); }
.ti-locations__map { overflow: hidden; margin: 0 0 var(--ti-space-5); }
.ti-locations__canvas { height: min(70vh, 640px); }
.ti-locations__info { display: flex; flex-direction: column; gap: 10px; font-family: var(--ti-font-sans); font-size: var(--ti-text-s); color: var(--ti-ink); }
.ti-locations__note { color: var(--ti-muted); font-size: var(--ti-text-s); }
.ti-locations__links { display: flex; gap: 10px; margin-top: 2px; }
.ti-locations__missing ul { margin: 0; padding-left: 18px; }

/* ---------- Suche, Protokoll-Eintrag, Strand löschen ---------- */
.ti-search__jump a { font-weight: 600; }
.ti-search__group { margin: 0 0 var(--ti-space-4); scroll-margin-top: calc(var(--ti-header-h, 61px) + 16px); }
.ti-search__list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ti-search__item { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 4px 16px; padding: 10px 0; border-top: 1px solid var(--ti-hairline-soft); }
.ti-search__item:first-child { border-top: 0; padding-top: 0; }
.ti-search__item--block { flex-direction: column; }
.ti-search__title { font-weight: 600; }
.ti-search__item .ti-enq__meta { margin-top: 2px; }
.ti-search__links { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; font-size: var(--ti-text-s); }
.ti-search__text { margin: 4px 0 0; font-size: var(--ti-text-m); color: var(--ti-ink-2); }
.ti-search__mark { background: var(--ti-warning-bg); color: inherit; border-radius: 2px; padding: 0 1px; }
.ti-audit__diff th[scope="row"] { font-size: var(--ti-text-s); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ti-ink-2); white-space: nowrap; }
.ti-audit__diff td { overflow-wrap: anywhere; font-size: var(--ti-text-s); }
.ti-audit__old { background: var(--ti-error-bg); }
.ti-audit__new { background: var(--ti-success-bg); }
.ti-audit__more summary { cursor: pointer; margin: 0; }
.ti-audit__more[open] summary { margin-bottom: var(--ti-space-3); }
.ti-audit__revert { margin: var(--ti-space-3) 0; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); column-gap: var(--ti-space-3); }
.ti-audit__revert dt { hyphens: manual; }
.ti-audit__revert + .ti-alert { margin-bottom: var(--ti-space-3); }
.ti-delete__list { margin: 0 0 var(--ti-space-4); padding-left: 18px; line-height: 1.6; }

/* ---------- House preview card (Anfragen: hover or focus on a house name) ---------- */
.ti-enq__unitbox { display: flex; gap: 10px; align-items: flex-start; }
.ti-enq__thumb { flex-shrink: 0; width: 48px; height: 36px; border-radius: var(--ti-radius-s); object-fit: cover; background: var(--ti-hairline-soft); display: block; margin-top: 2px; }
.ti-enq__thumb--empty { display: flex; align-items: center; justify-content: center; color: var(--ti-muted); }
.ti-enq__uname { font-weight: 600; color: var(--ti-ink); text-decoration: underline dotted var(--ti-field-border); text-underline-offset: 3px; }
.ti-enq__uname:hover, .ti-enq__uname:focus-visible { color: var(--ti-primary); text-decoration-style: solid; }
.ti-enq__unit .ti-badge { margin-top: 5px; }

.ti-preview {
  position: fixed; z-index: 70; width: 340px; overflow: hidden;
  border: 1px solid var(--ti-hairline); border-radius: var(--ti-radius-xl);
  background: var(--ti-card); box-shadow: 0 16px 40px rgba(23, 22, 26, 0.18);
  font-size: var(--ti-text-s); line-height: 1.45; color: var(--ti-ink);
}
.ti-preview__cover { display: block; width: 100%; height: 150px; object-fit: cover; background: var(--ti-hairline-soft); }
.ti-preview__body { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 14px; }
.ti-preview__title { margin: 0; font-family: var(--ti-font-display); font-size: var(--ti-text-l); font-weight: 400; }
/* A house's id and Originalname after its name (ui_house_ref()). Body type
   even inside a display-face title: it is a reference, not part of the name. */
.ti-house-ref { font-family: var(--ti-font-sans); font-size: var(--ti-text-s); font-weight: 400; color: var(--ti-muted); }
.ti-preview__facts { margin: -6px 0 0; color: var(--ti-ink-2); }
.ti-preview__tags { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0; }
/* One line of text: the verdict, then the dates and the reason after a dot.
   It wraps as text when the reason is long; the verdict never stands alone. */
.ti-preview__avail { padding: 8px 10px; border-radius: var(--ti-radius-m); background: var(--ti-hairline-soft); color: var(--ti-ink-2); }
.ti-preview__avail strong { text-transform: capitalize; }
.ti-preview__avail strong + span:not(:empty)::before { content: ' · '; }
.ti-preview__avail--free { background: var(--ti-success-bg); color: var(--ti-success-text); }
.ti-preview__avail--busy { background: var(--ti-error-bg); color: var(--ti-error-text); }
.ti-preview__avail--partial { background: var(--ti-warning-bg); color: var(--ti-warning-text); }
.ti-preview__lines { display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 0; list-style: none; color: var(--ti-ink-2); }
.ti-preview__lines li { display: flex; gap: 8px; align-items: flex-start; }
.ti-preview__lines .ti-icon { margin-top: 2px; color: var(--ti-muted); }
/* An action at the end of a line (mail to the owner): smaller than a row
   action and pulled into the 21px line, so its glyph sits level with the
   line's own icon instead of 7px below it. */
.ti-preview__lines .ti-iconbtn { width: 28px; height: 28px; margin: -5px 0 -5px -2px; }
.ti-preview__lines .ti-iconbtn .ti-icon { margin-top: 0; color: inherit; }
.ti-preview__actions { display: flex; gap: 14px; margin: 2px 0 0; padding-top: 10px; border-top: 1px solid var(--ti-hairline-soft); font-weight: 600; }
.ti-preview__actions a { text-decoration: none; }
.ti-preview__actions a:hover { text-decoration: underline; }
@media (hover: none) { .ti-preview { display: none; } } /* touch: the name just opens the Hausblatt */

/* An owner's terms (plan 041): one payment or tier per line; a gap with its badge in front. */
.ti-terms__lines { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ti-terms__gaps { margin: var(--ti-space-3) 0; }
.ti-terms__gaps li { display: flex; gap: 8px; align-items: baseline; }
/* The terms page: one payment or tier per table row, wider than a form, so the choices keep their words. */
.ti-terms .ti-form { max-width: none; }
/* The example card sits outside the form, so the form's gap does not reach it: the same space below it. */
.ti-terms > .ti-detail__card { margin-bottom: var(--ti-space-5); }
.ti-terms__table td { vertical-align: top; }
.ti-terms__table .ti-field, .ti-terms__table .ti-check { margin: 0; }
.ti-terms__table th, .ti-terms__table td { padding-left: 6px; padding-right: 6px; }
.ti-terms__table .ti-input--s { width: 64px; }
.ti-terms__table .ti-input--m { width: 124px; }
.ti-terms__table .ti-select { width: auto; max-width: none; }
/* An owner's contacts (plan 041, PR A2) in the same table, with room for a name and an address. */
.ti-contacts__table .ti-input--l { min-width: 110px; }
.ti-contacts__table .ti-input[type="email"] { min-width: 180px; }
/* An arrival guide and a shared route (plan 028, PR C) in the same table: a step's text has room, a photo is a thumbnail. */
.ti-arrival__steps td:nth-child(3) { min-width: 320px; }
.ti-arrival__steps .ti-field + .ti-field { margin-top: var(--ti-space-2); }
.ti-terms__table.ti-arrival__steps .ti-input--mono { width: 170px; }
.ti-arrival__photo { display: block; width: 96px; height: 64px; object-fit: cover; border-radius: var(--ti-radius-s); }
.ti-arrival__routes { margin-top: var(--ti-space-5); }

/* ---------- Anmeldung (login.php) ---------- */

.ti-login {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100vh; padding: var(--ti-space-8) var(--ti-space-4);
}
.ti-login__card {
  width: 100%; max-width: 400px;
  padding: var(--ti-space-8) var(--ti-space-8) var(--ti-space-6);
  box-shadow: var(--ti-shadow-s);
}
.ti-login__brand {
  margin: 0 0 var(--ti-space-6);
  font-family: var(--ti-font-display); font-size: var(--ti-text-xl); line-height: 1.2; color: var(--ti-ink);
}
.ti-login__app {
  display: block; margin-top: var(--ti-space-1);
  font-family: var(--ti-font-sans); font-size: var(--ti-text-s); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ti-muted);
}
.ti-login__title { margin: 0 0 var(--ti-space-5); font-size: var(--ti-text-xl); font-weight: 600; }
.ti-login__card .ti-alert { margin-bottom: var(--ti-space-5); }
.ti-login__form { display: flex; flex-direction: column; gap: var(--ti-space-1); }
.ti-login__submit { width: 100%; justify-content: center; margin-top: var(--ti-space-3); }
.ti-login__lang { margin: var(--ti-space-5) 0 0; font-size: var(--ti-text-s); }
.ti-login__lang a { color: var(--ti-muted); }

@media (max-width: 480px) {
  .ti-login { justify-content: flex-start; padding-top: var(--ti-space-6); }
  .ti-login__card { padding: var(--ti-space-6) var(--ti-space-5) var(--ti-space-5); }
}

/* ---------- Bilder eines Hauses (form-images.php, form-change-image.php, do-delete-pic.php) ---------- */

.ti-photo__file {
  margin: 0; font-family: var(--ti-font-mono); font-size: var(--ti-text-s); color: var(--ti-muted);
  overflow-wrap: anywhere;
}
.ti-photo__alt { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ti-space-2); margin: 4px 0 0; }
.ti-photo__alt .ti-field { width: 100%; margin: 0; }
.ti-photo__actions { display: flex; flex-wrap: wrap; gap: var(--ti-space-1); margin-top: auto; padding-top: var(--ti-space-2); border-top: 1px solid var(--ti-hairline-soft); }
.ti-photo__delete { color: var(--ti-error-text); }
.ti-photos + .ti-detail__h2 { margin-top: var(--ti-space-8); }
.ti-photos__orphans { margin: var(--ti-space-2) 0 0; padding-left: 18px; font-size: var(--ti-text-s); }

/* Videos (plan 024): our own poster with a play mark; the add form below the list. */
.ti-video__poster { position: relative; display: flex; align-items: center; justify-content: center; background: var(--ti-dark); }
.ti-video__noposter { color: var(--ti-on-dark-muted); font-size: var(--ti-text-s); }
.ti-video__play {
  position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--ti-card); color: var(--ti-ink); box-shadow: var(--ti-shadow-s);
}
.ti-photos + .ti-video-add { margin-top: var(--ti-space-4); }
.ti-video-add { display: flex; flex-direction: column; gap: var(--ti-space-3); max-width: 640px; padding: var(--ti-space-4) var(--ti-space-5); }
.ti-video-add .ti-field { margin: 0; }
.ti-video-add__title { margin: 0; font-size: var(--ti-text-m); font-weight: 600; }
.ti-video-add__check { display: flex; flex-direction: column; gap: 4px; padding: var(--ti-space-3); border: 1px solid var(--ti-hairline); border-radius: var(--ti-radius-m); background: var(--ti-paper); }
.ti-video-add__found { margin: 0; font-weight: 600; }
.ti-video-add__note { margin: 0; font-size: var(--ti-text-s); color: var(--ti-muted); }

.ti-swap { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--ti-space-5); }
.ti-swap__now { margin: 0; flex: 0 0 auto; }
.ti-swap__now img { display: block; width: 220px; max-width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--ti-radius-m); background: var(--ti-paper); }
.ti-swap__now figcaption { margin-top: 4px; font-size: var(--ti-text-s); color: var(--ti-muted); }
.ti-swap .ti-field { flex: 1 1 260px; }

.ti-delete { display: flex; flex-wrap: wrap; gap: var(--ti-space-5); padding: var(--ti-space-5); max-width: 760px; }
.ti-delete__img { width: 220px; max-width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--ti-radius-m); background: var(--ti-paper); }
.ti-delete__body { flex: 1 1 280px; display: flex; flex-direction: column; gap: 6px; }
.ti-delete__name { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.ti-delete__text { margin: var(--ti-space-2) 0 0; }
.ti-delete__files { margin: 0 0 var(--ti-space-3); padding-left: 18px; font-size: var(--ti-text-s); color: var(--ti-muted); }
.ti-delete__files code { overflow-wrap: anywhere; }

/* ---------- Artikel bearbeiten (article_edit.php) ---------- */
.ti-article { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--ti-space-5); align-items: start; }
.ti-article__main { display: flex; flex-direction: column; gap: var(--ti-space-5); min-width: 0; margin: 0; }
.ti-article__main .ti-fieldset { padding-bottom: var(--ti-space-1); }
.ti-article__body { padding: var(--ti-space-5) var(--ti-space-6); }
.ti-article__editor { min-height: 320px; font-size: var(--ti-text-l); line-height: 1.6; color: var(--ti-ink); }
.ti-article__aside {
  position: sticky; top: calc(var(--ti-header-h, 61px) + var(--ti-space-5));
  display: flex; flex-direction: column; gap: var(--ti-space-4); min-width: 0;
}
.ti-article__box { display: flex; flex-direction: column; gap: var(--ti-space-3); }
.ti-article__box .ti-detail__h2, .ti-article__box .ti-alert { margin: 0; }
.ti-article__cover { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--ti-radius-m); object-fit: cover; }
.ti-article__cover--none {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: var(--ti-paper); color: var(--ti-muted); font-size: var(--ti-text-s);
}
.ti-article__facts { grid-template-columns: 120px minmax(0, 1fr); }
.ti-article__facts dd .ti-badge { vertical-align: middle; }
.ti-article__buttons { display: flex; flex-wrap: wrap; gap: var(--ti-space-2); }
.ti-article__buttons--stack { flex-direction: column; }
.ti-article__buttons--stack .ti-btn { justify-content: center; }
/* Editor.js blocks of this page: houses and beaches as tags, an image's link. */
.ti-idcard { display: flex; flex-direction: column; gap: 6px; padding: var(--ti-space-2) 0; }
.ti-idcard__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ti-space-2); }
.ti-idcard__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ti-idcard__tag {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px;
  border-radius: 999px; background: var(--ti-primary-soft); color: var(--ti-on-primary-tint); font-size: var(--ti-text-s);
}
.ti-idcard__remove {
  display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: var(--ti-text-m); line-height: 1; cursor: pointer;
}
.ti-idcard__remove:hover { background: var(--ti-primary-tint); }
.ti-idcard__remove:focus-visible { outline: none; box-shadow: var(--ti-focus-ring); }
.ti-idcard__search { position: relative; flex: 1 1 180px; min-width: 180px; }
.ti-idcard__input { width: 100%; }
.ti-idcard__row > .ti-idcard__input { flex: 1 1 180px; }
.ti-idcard__dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60;
  max-height: 220px; overflow-y: auto;
  border: 1px solid var(--ti-hairline); border-radius: var(--ti-radius-m);
  background: var(--ti-card); box-shadow: var(--ti-shadow-m);
}
.ti-idcard__option { padding: 8px 12px; border-bottom: 1px solid var(--ti-hairline-soft); font-size: var(--ti-text-s); cursor: pointer; }
.ti-idcard__option:last-child { border-bottom: 0; }
.ti-idcard__option:hover { background: var(--ti-primary-soft); }
.ti-imglink { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.ti-imglink__label { font-size: var(--ti-text-s); font-weight: 600; color: var(--ti-ink-2); }
.ti-imglink__value { font-size: var(--ti-text-s); overflow-wrap: anywhere; }
@media (max-width: 1000px) {
  .ti-article { grid-template-columns: minmax(0, 1fr); }
  .ti-article__aside { position: static; order: -1; }
}
@media (max-width: 760px) {
  .ti-article__body { padding: var(--ti-space-4); }
}

/* ---------- Beach Pipeline (beach-pipeline.php, beach-pipeline-detail.php) ---------- */
/* The list: counts, collecting, progress, the table and the map. Map pins and
   legend dots share one colour per status; Leaflet draws the pins as
   divIcons with these classes (ui/js/page-beach-pipeline*.js). */
.ti-bp__stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: var(--ti-space-3); margin: 0 0 var(--ti-space-5); padding: 0; list-style: none; }
.ti-bp__stat { padding: var(--ti-space-3) var(--ti-space-4); }
.ti-bp__stat .ti-stats__value { font-size: var(--ti-text-xl); font-variant-numeric: tabular-nums; }
.ti-bp__stat .ti-stats__label { margin-top: 2px; font-size: var(--ti-text-s); }
.ti-bp__stat--warning .ti-stats__value { color: var(--ti-warning-text); }
.ti-bp__collect { margin: 0 0 var(--ti-space-5); padding: var(--ti-space-4) var(--ti-space-5); }
.ti-bp__collect-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ti-space-3); }
.ti-bp__collect-row .ti-field { margin: 0; }
.ti-bp__progress { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--ti-space-4); padding: 12px 16px; border: 1px solid var(--ti-warning-border); border-radius: var(--ti-radius-l); background: var(--ti-warning-soft); color: var(--ti-warning-text); font-size: var(--ti-text-m); }
.ti-bp__spinner { width: 18px; height: 18px; flex-shrink: 0; border: 2px solid var(--ti-warning-mark); border-top-color: transparent; border-radius: 50%; animation: ti-bp-spin 0.8s linear infinite; }
@keyframes ti-bp-spin { to { transform: rotate(360deg); } }
.ti-bp__result .ti-alert__body { flex: 1 1 auto; }
.ti-bp__result-close { margin: -6px -8px -6px 0; color: inherit; font-size: var(--ti-text-l); line-height: 1; }
.ti-bp__lines { white-space: pre-line; }
.ti-bp__table td { vertical-align: middle; }
.ti-bp__c-check { width: 40px; }
.ti-bp__c-check .ti-check__input { margin: 0; }
.ti-bp__name { min-width: 160px; max-width: 260px; overflow-wrap: anywhere; }
.ti-bp__none { padding: var(--ti-space-8) var(--ti-space-4); text-align: center; color: var(--ti-muted); }
.ti-bp__sort { display: inline-flex; align-items: center; gap: 2px; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; }
.ti-bp__sort:hover { color: var(--ti-ink); }
.ti-bp__sort-ind { font-family: var(--ti-font-mono); }
.ti-bp__pages { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ti-space-3); }
.ti-bp__jump { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--ti-space-5); font-size: var(--ti-text-s); color: var(--ti-ink-2); }
.ti-bp__jump-input { width: 72px; height: 34px; text-align: center; }
.ti-bp__maptools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ti-space-2) var(--ti-space-3); margin: 0 0 var(--ti-space-3); }
.ti-bp__maptools [aria-pressed="true"] { border-color: var(--ti-primary); background: var(--ti-primary-soft); color: var(--ti-on-primary-tint); }
.ti-bp__hint { font-size: var(--ti-text-s); color: var(--ti-warning-text); }
.ti-bp__mapinfo { margin-left: auto; font-size: var(--ti-text-s); color: var(--ti-muted); }
.ti-bp__mapwrap { position: relative; overflow: hidden; height: calc(100vh - 300px); min-height: 480px; }
.ti-bp__map { width: 100%; height: 100%; }
.ti-bp__mapwrap.is-adding, .ti-bp__mapwrap.is-adding .leaflet-container, .ti-bp__mapwrap.is-adding .leaflet-interactive { cursor: crosshair; }
.ti-bp__legend { position: absolute; left: 14px; bottom: 14px; z-index: 1000; display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 10px 14px; border-radius: var(--ti-radius-m); background: var(--ti-card); box-shadow: var(--ti-shadow-m); list-style: none; font-size: var(--ti-text-s); pointer-events: none; }
.ti-bp__legend li { display: flex; align-items: center; gap: 6px; }
.ti-bp__legend--inline { position: static; flex-direction: row; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 var(--ti-space-3); padding: 0; background: none; box-shadow: none; }
.ti-bp__dot { display: inline-block; width: 10px; height: 10px; margin-right: 4px; flex-shrink: 0; border-radius: 50%; vertical-align: baseline; }
.ti-bp__pin { border: 2px solid var(--ti-card); border-radius: 50%; box-shadow: var(--ti-shadow-m); }
.ti-bp__dot--new, .ti-bp__pin--new { background: var(--ti-info-text); }
.ti-bp__dot--near_existing, .ti-bp__pin--near_existing { background: var(--ti-warning-mark); }
.ti-bp__dot--enriched, .ti-bp__pin--enriched { background: var(--ti-option); }
.ti-bp__dot--curated, .ti-bp__pin--curated { background: var(--ti-primary); }
.ti-bp__dot--imported, .ti-bp__pin--imported { background: var(--ti-success-mark); }
.ti-bp__dot--rejected, .ti-bp__pin--rejected { background: var(--ti-error); }
.ti-bp__dot--skipped, .ti-bp__pin--skipped { background: var(--ti-muted); }
.ti-bp__dot--self, .ti-bp__pin--self { background: var(--ti-info-text); }
.ti-bp__dot--live, .ti-bp__pin--live { background: var(--ti-success-text); }
.ti-bp__dot--other, .ti-bp__pin--other { background: var(--ti-warning-mark); }
.ti-bp__pin--self { border-width: 3px; }
.ti-bp__popup, .ti-bp__place { display: flex; flex-direction: column; gap: 2px; font-family: var(--ti-font-sans); font-size: var(--ti-text-s); color: var(--ti-ink); }
.ti-bp__popup-status { font-size: var(--ti-text-s); font-weight: 600; color: var(--ti-muted); }
.ti-bp__popup-status--near_existing, .ti-bp__popup-status--other { color: var(--ti-warning-text); }
.ti-bp__popup-status--new { color: var(--ti-info-text); }
.ti-bp__popup-status--enriched { color: var(--ti-option); }
.ti-bp__popup-status--curated { color: var(--ti-primary); }
.ti-bp__popup-status--imported, .ti-bp__popup-status--live { color: var(--ti-success-text); }
.ti-bp__popup-status--rejected { color: var(--ti-error-text); }
.ti-bp__place { min-width: 190px; }
.ti-bp__place-coords { font-family: var(--ti-font-mono); font-size: var(--ti-text-xs); color: var(--ti-muted); }
.ti-bp__place-buttons { display: flex; gap: 6px; margin-top: 8px; }

/* One candidate: the form in the main column, AI, map and photos beside it. */
.ti-bp-detail .ti-form { max-width: none; }
.ti-bp-detail__suggest { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.ti-bp-detail__award { margin: 0 0 var(--ti-space-4); }
.ti-bp-detail__years { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; padding: 0; list-style: none; }
.ti-bp-detail__years:empty { display: none; }
.ti-bp-detail__year { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px 2px 10px; border-radius: var(--ti-radius-s); font-family: var(--ti-font-mono); font-size: var(--ti-text-s); font-weight: 500; }
.ti-bp-detail__year--blu { background: var(--ti-info-bg); color: var(--ti-info-text); }
.ti-bp-detail__year--verde { background: var(--ti-success-bg); color: var(--ti-success-text); }
.ti-bp-detail__year-x { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: inherit; font-size: var(--ti-text-l); line-height: 1; cursor: pointer; opacity: 0.7; }
.ti-bp-detail__year-x:hover { opacity: 1; background: var(--ti-card); }
.ti-bp-detail__year-add { display: flex; align-items: center; gap: var(--ti-space-2); }
.ti-bp-detail__year-add .ti-field { margin: 0; }
.ti-bp-detail__ai { margin: 0 0 var(--ti-space-4); padding: var(--ti-space-3) var(--ti-space-4) var(--ti-space-1); border-radius: var(--ti-radius-m); background: var(--ti-info-soft); }
.ti-bp-detail__ai .ti-field { margin-bottom: var(--ti-space-2); }
.ti-bp-detail__ai-buttons { display: flex; flex-wrap: wrap; gap: var(--ti-space-2); margin: 0 0 var(--ti-space-3); }
.ti-bp-detail__bar { flex-wrap: wrap; align-items: center; }
.ti-bp-detail__spacer { flex-grow: 1; }
.ti-bp-detail__aitext { max-height: 320px; overflow-y: auto; font-size: var(--ti-text-m); }
.ti-bp-detail__meta { margin: var(--ti-space-2) 0 0; font-size: var(--ti-text-s); color: var(--ti-muted); }
.ti-bp-detail__usp { margin: 0; font-size: var(--ti-text-l); font-weight: 600; }
.ti-bp-detail__line { margin: 6px 0 0; font-size: var(--ti-text-s); }
.ti-bp-detail__features { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ti-bp-detail__off { color: var(--ti-muted); font-weight: 500; text-decoration: line-through; }
.ti-bp-detail__count { margin-left: auto; font-size: var(--ti-text-s); font-weight: 500; color: var(--ti-muted); }
.ti-bp-detail__map { height: 320px; overflow: hidden; border-radius: var(--ti-radius-m); background: var(--ti-paper); }
.ti-bp-detail__meta + .ti-bp__legend--inline { margin-top: var(--ti-space-3); }
.ti-bp-detail__near { margin: 0 calc(-1 * var(--ti-space-6)); border-top: 1px solid var(--ti-hairline-soft); }
.ti-bp-detail__near td { padding-top: 7px; padding-bottom: 7px; vertical-align: middle; font-size: var(--ti-text-s); }
.ti-bp-detail__near td:first-child { padding-left: var(--ti-space-6); }
.ti-bp-detail__images { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.ti-bp-detail__image { display: flex; flex-direction: column; overflow: hidden; border: 2px solid var(--ti-hairline); border-radius: var(--ti-radius-m); background: var(--ti-card); }
.ti-bp-detail__image.is-selected { border-color: var(--ti-success-mark); }
.ti-bp-detail__image.is-cover { border-color: var(--ti-primary); box-shadow: 0 0 0 2px var(--ti-primary); }
.ti-bp-detail__thumb { display: block; aspect-ratio: 5 / 4; background: var(--ti-paper); }
.ti-bp-detail__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ti-bp-detail__credit { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; padding: 6px 8px 0; font-size: var(--ti-text-xs); line-height: 1.35; }
.ti-bp-detail__author { flex-basis: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ti-muted); }
.ti-bp-detail__image-buttons { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; padding: 6px 8px 8px; }
.ti-bp-detail__image-buttons .ti-btn { height: 28px; padding: 0 8px; font-size: var(--ti-text-s); }
.ti-bp-detail__image-buttons [aria-pressed="true"] { border-color: var(--ti-primary); background: var(--ti-primary-soft); color: var(--ti-on-primary-tint); }
.ti-bp-detail__image.is-selected [data-bp-toggle-image][aria-pressed="true"] { border-color: var(--ti-success-mark); background: var(--ti-success-bg); color: var(--ti-success-text); }
.ti-bp-detail__addimg { display: flex; align-items: flex-end; gap: var(--ti-space-2); margin-top: var(--ti-space-4); padding-top: var(--ti-space-3); border-top: 1px solid var(--ti-hairline-soft); }
.ti-bp-detail__addimg .ti-field { flex: 1 1 auto; margin: 0; }
.ti-bp-detail__raw { margin: 0; max-height: 220px; overflow: auto; padding: 10px 12px; border-radius: var(--ti-radius-m); background: var(--ti-paper); font-family: var(--ti-font-mono); font-size: var(--ti-text-s); white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .ti-bp-detail__near { margin: 0 calc(-1 * var(--ti-space-4)); }
  .ti-bp-detail__near td:first-child { padding-left: var(--ti-space-4); }
  .ti-bp__mapwrap { height: 70vh; min-height: 360px; }
}

/* ---------- Date range with occupancy (ui_date_range(), ui/js/ti-date-range.js; the booking forms) ----------
   Two date fields and the nights, then two months. The calendar colours are
   the "Klassisch" tokens (Decisions: free green, booked red struck through,
   closed grey) and the chosen stay is aubergine: circles on arrival and
   departure, the nights between in --ti-cal-range. Options keep their teal.
   A day is split left and right into morning (the night before) and
   afternoon (the coming night), with the white joint of the calendars. */
ti-date-range { display: block; }
.ti-range__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; gap: var(--ti-space-4); align-items: start; }
.ti-range__fields .ti-field { margin: 0; }
.ti-input--date.ti-input--date-bare { padding-right: 10px; }
.ti-range__nights { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 96px; min-height: 64px; margin: 0; padding: 6px 12px; border-radius: var(--ti-radius-m); background: var(--ti-paper); }
.ti-range__count { font-family: var(--ti-font-display); font-size: var(--ti-text-2xl); line-height: 1; font-variant-numeric: tabular-nums; }
.ti-range__word { font-size: var(--ti-text-s); color: var(--ti-muted); }
.ti-range__panel { margin-top: var(--ti-space-4); padding-top: var(--ti-space-4); border-top: 1px solid var(--ti-hairline-soft); }
.ti-range__months { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--ti-space-4) var(--ti-space-6); }
.ti-range__nav { position: absolute; top: -4px; left: 0; right: 0; display: flex; justify-content: space-between; pointer-events: none; }
.ti-range__step { pointer-events: auto; font-size: var(--ti-text-l); }
.ti-range__mname { margin: 0 0 var(--ti-space-2); text-align: center; font-size: var(--ti-text-m); font-weight: 600; line-height: 28px; }
.ti-range__grid { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; }
.ti-range__grid th { padding: 0 0 2px; font-size: var(--ti-text-xs); font-weight: 600; color: var(--ti-muted); text-align: center; }
.ti-range__grid td { padding: 0; }
.ti-range__day {
  --am: var(--ti-cal-free); --pm: var(--ti-cal-free); --joint: 0px;
  display: flex; align-items: center; justify-content: center; width: 100%; height: 40px; padding: 0;
  border: 1px solid transparent; border-radius: var(--ti-radius-s);
  background: linear-gradient(to right, var(--am) calc(50% - var(--joint)), var(--ti-card) calc(50% - var(--joint)) calc(50% + var(--joint)), var(--pm) calc(50% + var(--joint)));
  /* Under the border too: laid out in the padding box, the gradient repeats
     into the 1px transparent border and shows a sliver of the other half at
     each edge. */
  background-origin: border-box;
  font-family: var(--ti-font-mono); font-size: var(--ti-text-s); color: var(--ti-ink); cursor: pointer;
}
.ti-range__day.is-split { --joint: 1.5px; }
.ti-range__day[data-am="booking"], .ti-range__day[data-am="blocked"] { --am: var(--ti-cal-booked); }
.ti-range__day[data-pm="booking"], .ti-range__day[data-pm="blocked"] { --pm: var(--ti-cal-booked); }
.ti-range__day[data-am="option"] { --am: var(--ti-option-bg); }
.ti-range__day[data-pm="option"] { --pm: var(--ti-option-bg); }
.ti-range__day[data-am="closed"] { --am: var(--ti-cal-closed); }
.ti-range__day[data-pm="closed"] { --pm: var(--ti-cal-closed); }
.ti-range__day[data-am="unknown"] { --am: var(--ti-paper); }
.ti-range__day[data-pm="unknown"] { --pm: var(--ti-paper); }
.ti-range__day[data-am="range"] { --am: var(--ti-cal-range); }
.ti-range__day[data-pm="range"] { --pm: var(--ti-cal-range); }
.ti-range__day[data-am="clash"] { --am: var(--ti-error-bg); }
.ti-range__day[data-pm="clash"] { --pm: var(--ti-error-bg); }
.ti-range__day.is-full { color: var(--ti-cal-booked-text); text-decoration: line-through; }
.ti-range__day.is-full[data-pm="option"] { color: var(--ti-option); }
.ti-range__day.is-closed { color: var(--ti-cal-closed-text); }
.ti-range__day.is-weekend { font-weight: 500; }
.ti-range__day.is-today .ti-range__n { text-decoration: underline; text-underline-offset: 3px; }
.ti-range__day.is-short { border: 1px dashed var(--ti-field-border); color: var(--ti-muted); }
.ti-range__day.is-clash { border-color: var(--ti-error); }
.ti-range__day.is-off { cursor: not-allowed; }
.ti-range__day:not(.is-off):hover { border-color: var(--ti-ink-2); }
.ti-range__day:focus-visible { outline: none; box-shadow: var(--ti-focus-ring); border-color: var(--ti-primary); }
.ti-range__n { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; }
.ti-range__day:is(.is-start, .is-end) .ti-range__n { background: var(--ti-primary); color: var(--ti-card); font-weight: 500; text-decoration: none; }
.ti-range__hint { min-height: 1.5em; margin: var(--ti-space-3) 0 0; font-size: var(--ti-text-s); color: var(--ti-ink-2); }
.ti-range__status { margin: var(--ti-space-2) 0 0; padding: 10px 12px; border-radius: var(--ti-radius-m); background: var(--ti-paper); color: var(--ti-ink-2); font-size: var(--ti-text-s); font-weight: 500; line-height: 1.45; }
.ti-range__status--ok { background: var(--ti-success-bg); color: var(--ti-success-text); }
.ti-range__status--warning { background: var(--ti-warning-bg); color: var(--ti-warning-text); }
.ti-range__status--error { background: var(--ti-error-bg); color: var(--ti-error-text); }
.ti-range__legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 16px; margin: var(--ti-space-4) 0 0; padding: var(--ti-space-3) 0 0; border-top: 1px solid var(--ti-hairline-soft); list-style: none; }
.ti-range__key { display: flex; align-items: center; gap: 9px; font-size: var(--ti-text-s); line-height: 1.3; }
.ti-range__key-label { font-weight: 600; }
.ti-range__key-sub { color: var(--ti-muted); }
.ti-range__swatch { flex-shrink: 0; width: 24px; height: 24px; border: 1px solid transparent; border-radius: var(--ti-radius-s); background: var(--ti-cal-free); }
.ti-range__swatch--free { border-color: var(--ti-hairline); }
.ti-range__swatch--departure { background: linear-gradient(to right, var(--ti-cal-booked) calc(50% - 1.5px), var(--ti-card) calc(50% - 1.5px) calc(50% + 1.5px), var(--ti-cal-free) calc(50% + 1.5px));  background-origin: border-box; }
.ti-range__swatch--arrival { background: linear-gradient(to right, var(--ti-cal-free) calc(50% - 1.5px), var(--ti-card) calc(50% - 1.5px) calc(50% + 1.5px), var(--ti-cal-booked) calc(50% + 1.5px));  background-origin: border-box; }
.ti-range__swatch--changeover { background: linear-gradient(to right, var(--ti-cal-booked) calc(50% - 1.5px), var(--ti-card) calc(50% - 1.5px) calc(50% + 1.5px), var(--ti-cal-booked) calc(50% + 1.5px));  background-origin: border-box; }
.ti-range__swatch--booked { background: var(--ti-cal-booked); }
.ti-range__swatch--option { background: var(--ti-option-bg); }
.ti-range__swatch--closed { background: var(--ti-cal-closed); }
.ti-range__swatch--short { border: 1px dashed var(--ti-field-border); background: var(--ti-card); }
.ti-range__swatch--selected { border-radius: 50%; background: var(--ti-primary); }
@media (max-width: 640px) {
  .ti-range__fields { grid-template-columns: minmax(0, 1fr); }
  .ti-range__nights { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 6px; min-height: 0; }
  .ti-range__day { height: 38px; }
  .ti-range__n { width: 28px; height: 28px; }
}

/* ---------- Kunde auf dem Buchungsformular (customer-summary.php) ---------- */

.ti-custsum-slot { margin: var(--ti-space-3) 0 var(--ti-space-2); }
.ti-custsum { display: flex; flex-direction: column; gap: 4px; padding: var(--ti-space-3) var(--ti-space-4); border: 1px solid var(--ti-hairline); border-radius: var(--ti-radius-m); background: var(--ti-paper); font-size: var(--ti-text-s); }
.ti-custsum__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--ti-space-2); }
.ti-custsum__name { margin: 0; font-size: var(--ti-text-m); font-weight: 600; }
.ti-custsum__link { margin-left: auto; font-size: var(--ti-text-s); }
.ti-custsum__line { margin: 0; overflow-wrap: anywhere; }
.ti-custsum__muted { color: var(--ti-muted); }
.ti-custsum__mono { font-family: var(--ti-font-mono); font-size: var(--ti-text-s); }
.ti-custsum__bookings { display: flex; flex-direction: column; gap: 3px; margin: 2px 0 0; padding: 0; list-style: none; }
.ti-custsum__note { margin: var(--ti-space-2) 0 0; padding-top: var(--ti-space-2); border-top: 1px solid var(--ti-hairline-soft); white-space: normal; }
.ti-custsum__label { font-size: var(--ti-text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ti-muted); }

/* ---------- Grund beim Schließen (show-messages.php) ---------- */

.ti-detail__closenote { display: flex; align-items: flex-start; gap: var(--ti-space-3); padding: var(--ti-space-3) var(--ti-space-5); margin: calc(-1 * var(--ti-space-2)) 0 var(--ti-space-4); }
.ti-detail__closenote .ti-field { flex: 1; margin: 0; }
/* Level with the input, not with the help line under it. */
.ti-detail__closenote > .ti-btn { margin-top: 26px; }


/* ---------- Start (index.php) ---------- */

.ti-start__head { align-items: flex-end; }
.ti-start__date { margin: 0; font-size: var(--ti-text-s); font-weight: 500; color: var(--ti-muted); }
.ti-start__summary { max-width: 68ch; margin: 4px 0 0; font-size: var(--ti-text-l); line-height: var(--ti-leading); color: var(--ti-ink-2); }

.ti-start__kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--ti-space-4); margin: 0 0 var(--ti-space-5); padding: 0; list-style: none; }
.ti-start__kpi { display: flex; flex-direction: column; gap: 4px; height: 100%; box-sizing: border-box; padding: var(--ti-space-4) var(--ti-space-5); color: var(--ti-ink); text-decoration: none; }
.ti-start__kpi:hover { border-color: var(--ti-primary-tint-border); color: var(--ti-ink); }
.ti-start__kpi:focus-visible { outline: none; box-shadow: var(--ti-focus-ring); }
.ti-start__kpi-label { font-size: var(--ti-text-s); font-weight: 600; color: var(--ti-ink-2); }
.ti-start__kpi-value { font-family: var(--ti-font-display); font-size: var(--ti-text-2xl); line-height: 1.15; font-variant-numeric: tabular-nums; }
.ti-start__kpi-hint { font-size: var(--ti-text-s); color: var(--ti-muted); }
.ti-start__delta { font-family: var(--ti-font-sans); font-size: var(--ti-text-s); font-weight: 600; white-space: nowrap; }
.ti-start__delta--up { color: var(--ti-success-text); }
.ti-start__delta--down { color: var(--ti-error-text); }
.ti-start__delta--flat { color: var(--ti-muted); }

.ti-start { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: var(--ti-space-5); align-items: start; }
.ti-start__col { display: flex; flex-direction: column; gap: var(--ti-space-5); min-width: 0; }
.ti-start__card { padding: var(--ti-space-5) var(--ti-space-6); }
.ti-start__card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ti-space-4); margin: 0 0 var(--ti-space-4); }
.ti-start__h2 { margin: 0; font-family: var(--ti-font-display); font-weight: 400; font-size: var(--ti-text-xl); color: var(--ti-ink); }
.ti-start__card-note { font-size: var(--ti-text-s); color: var(--ti-muted); }
.ti-start__more { font-size: var(--ti-text-s); font-weight: 500; white-space: nowrap; }

/* Attention: one list divided by hairlines, the whole row a link. Severity
   sits on the number tile only - no stripe, no tinted row (see CLAUDE.md). */
.ti-start__card--list { padding-bottom: var(--ti-space-2); }
.ti-start__h2-count { font-family: var(--ti-font-sans); font-size: var(--ti-text-m); font-weight: 600; color: var(--ti-muted); }
.ti-start__todo { margin: 0 calc(-1 * var(--ti-space-6)); padding: 0; list-style: none; border-top: 1px solid var(--ti-hairline-soft); }
.ti-start__todo li + li { border-top: 1px solid var(--ti-hairline-soft); }
.ti-start__item { display: flex; align-items: center; gap: 14px; padding: 12px var(--ti-space-6); color: var(--ti-ink); text-decoration: none; }
.ti-start__item:hover { background: var(--ti-paper); color: var(--ti-ink); }
.ti-start__item:focus-visible { outline: none; box-shadow: inset var(--ti-focus-ring); }
.ti-start__item-n {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 6px; box-sizing: border-box; border-radius: var(--ti-radius-m);
  background: var(--ti-hairline-soft); color: var(--ti-ink-2);
  font-family: var(--ti-font-display); font-size: var(--ti-text-xl); line-height: 1; font-variant-numeric: tabular-nums;
}
.ti-start__item-n--error { background: var(--ti-error-bg); color: var(--ti-error-text); }
.ti-start__item-n--warning { background: var(--ti-warning-bg); color: var(--ti-warning-text); }
.ti-start__item-n--option { background: var(--ti-option-bg); color: var(--ti-option); }
.ti-start__item-n--info { background: var(--ti-info-bg); color: var(--ti-info-text); }
.ti-start__item-text { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; min-width: 0; }
.ti-start__item-title { font-size: var(--ti-text-m); font-weight: 600; }
.ti-start__item-detail { font-size: var(--ti-text-s); line-height: 1.45; color: var(--ti-ink-2); }
.ti-start__item-go { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; font-size: var(--ti-text-s); font-weight: 500; color: var(--ti-muted); white-space: nowrap; }
.ti-start__item:hover .ti-start__item-go { color: var(--ti-primary); }

/* This week: a date block per day (after Fresha on Mobbin), its arrivals
   and departures beside it. */
.ti-start__days { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ti-start__day { display: flex; align-items: flex-start; gap: var(--ti-space-4); padding: var(--ti-space-3) 0; border-top: 1px solid var(--ti-hairline-soft); }
.ti-start__day:first-child { padding-top: 0; border-top: 0; }
.ti-start__day:last-child { padding-bottom: 0; }
.ti-start__dateblock {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: center;
  width: 52px; padding: 6px 0 7px; border-radius: var(--ti-radius-m);
  background: var(--ti-paper); color: var(--ti-ink); line-height: 1;
}
.ti-start__dateblock-wd, .ti-start__dateblock-m { font-size: var(--ti-text-xs); font-weight: 600; color: var(--ti-muted); }
.ti-start__dateblock-d { margin: 3px 0 2px; font-family: var(--ti-font-display); font-size: var(--ti-text-xl); font-variant-numeric: tabular-nums; }
.ti-start__dateblock--today { background: var(--ti-primary-soft); }
.ti-start__dateblock--today .ti-start__dateblock-wd { color: var(--ti-primary); }
.ti-start__day-events { flex-grow: 1; min-width: 0; }
.ti-start__day-events .ti-start__row { padding: 8px 0; }
.ti-start__day-events .ti-start__row:first-child { padding-top: 4px; }
.ti-start__day-events .ti-start__row:last-child { padding-bottom: 4px; }
.ti-start__row-tags { flex-shrink: 0; display: flex; gap: 4px; }

/* The day's work as chips under the greeting (after Shopify on Mobbin). */
.ti-start__chips { display: flex; flex-wrap: wrap; gap: var(--ti-space-2); margin: var(--ti-space-2) 0 0; padding: 0; list-style: none; }
.ti-start__chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 5px 0 12px; box-sizing: border-box;
  border: 1px solid var(--ti-hairline); border-radius: 999px; background: var(--ti-card);
  color: var(--ti-ink); font-size: var(--ti-text-s); font-weight: 500; text-decoration: none; white-space: nowrap;
}
.ti-start__chip:hover { border-color: var(--ti-primary-tint-border); color: var(--ti-ink); }
.ti-start__chip:focus-visible { outline: none; box-shadow: var(--ti-focus-ring); }
.ti-start__chip-n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: 999px;
  background: var(--ti-hairline-soft); color: var(--ti-ink-2);
  font-size: var(--ti-text-s); font-weight: 600; font-variant-numeric: tabular-nums;
}

.ti-start__list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ti-start__more-group { display: flex; gap: var(--ti-space-3); }
.ti-start__daysep { margin: var(--ti-space-4) 0 var(--ti-space-2); font-size: var(--ti-text-s); font-weight: 600; letter-spacing: .02em; color: var(--ti-muted); }
.ti-start__daysep:first-of-type { margin-top: 0; }
.ti-start__row-kind { flex: 0 0 86px; display: flex; }
.ti-start__row { display: flex; align-items: center; gap: var(--ti-space-3); padding: 10px 0; border-top: 1px solid var(--ti-hairline-soft); }
.ti-start__row:first-child { padding-top: 0; border-top: 0; }
.ti-start__row:last-child { padding-bottom: 0; }
.ti-start__row-main { display: flex; flex-direction: column; gap: 1px; flex-grow: 1; min-width: 0; }
.ti-start__row-title { overflow: hidden; font-size: var(--ti-text-m); font-weight: 600; color: var(--ti-ink); text-overflow: ellipsis; white-space: nowrap; }
a.ti-start__row-title { text-decoration: none; }
a.ti-start__row-title:hover { color: var(--ti-primary); text-decoration: underline; }
.ti-start__row-sub { overflow: hidden; font-size: var(--ti-text-s); color: var(--ti-muted); text-overflow: ellipsis; white-space: nowrap; }
.ti-start__row-when { flex-shrink: 0; font-size: var(--ti-text-s); color: var(--ti-muted); white-space: nowrap; }

@media (max-width: 1300px) {
  .ti-start__kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .ti-start { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .ti-start__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ti-space-3); }
  .ti-start__kpi { padding: var(--ti-space-3) var(--ti-space-4); }
  .ti-start__card { padding: var(--ti-space-4); }
  .ti-start__card-note { display: none; }
  .ti-start__todo { margin: 0 calc(-1 * var(--ti-space-4)); }
  .ti-start__item { align-items: flex-start; padding: 12px var(--ti-space-4); }
  .ti-start__item-go { display: none; }
}

/* ---------- Unterkunft auf einen Blick (house.php) ----------
   The numbers row mirrors the start page's; the cards are the ti-detail ones. */
.ti-hub__subtitle { margin: 0 0 4px; font-size: var(--ti-text-m); color: var(--ti-ink-2); }
.ti-hub__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ti-space-4); margin: 0 0 var(--ti-space-5); padding: 0; list-style: none; }
.ti-hub__kpi { display: flex; flex-direction: column; gap: 4px; height: 100%; box-sizing: border-box; padding: var(--ti-space-4) var(--ti-space-5); color: var(--ti-ink); text-decoration: none; }
a.ti-hub__kpi:hover { border-color: var(--ti-primary-tint-border); color: var(--ti-ink); }
a.ti-hub__kpi:focus-visible { outline: none; box-shadow: var(--ti-focus-ring); }
.ti-hub__kpi-label { font-size: var(--ti-text-s); font-weight: 600; color: var(--ti-ink-2); }
.ti-hub__kpi-value { font-family: var(--ti-font-display); font-size: var(--ti-text-2xl); line-height: 1.15; font-variant-numeric: tabular-nums; }
.ti-hub__kpi-hint { font-size: var(--ti-text-s); color: var(--ti-muted); overflow-wrap: anywhere; }
.ti-hub__card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ti-space-3); }
.ti-hub__more, .ti-hub__note { font-size: var(--ti-text-s); white-space: nowrap; }
.ti-hub__note { color: var(--ti-muted); }
.ti-hub__table td { vertical-align: top; }
.ti-hub__table td:first-child, .ti-hub__table th:first-child { padding-left: var(--ti-space-6); }
.ti-hub__group th { padding-top: var(--ti-space-4); font-size: var(--ti-text-s); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ti-muted); text-align: left; }
.ti-hub__list { margin: 0; padding: 0; list-style: none; }
.ti-hub__list li { padding: 6px 0; border-top: 1px solid var(--ti-hairline-soft); }
.ti-hub__list li:first-child { border-top: 0; padding-top: 0; }
.ti-hub__name { margin: 0 0 var(--ti-space-2); font-weight: 600; }
.ti-hub__hint { margin: var(--ti-space-3) 0 0; font-size: var(--ti-text-s); color: var(--ti-muted); }
.ti-hub__photo { padding: 0; overflow: hidden; }
.ti-hub__cover { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--ti-hairline-soft); }
.ti-hub__cover--empty { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--ti-muted); font-size: var(--ti-text-s); }
.ti-hub__photo-line { margin: 0; padding: var(--ti-space-3) var(--ti-space-5); font-size: var(--ti-text-s); color: var(--ti-muted); }
@media (max-width: 1100px) {
  .ti-hub__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .ti-hub__table td:first-child, .ti-hub__table th:first-child { padding-left: var(--ti-space-4); }
}
@media (max-width: 760px) {
  .ti-hub__kpis { gap: var(--ti-space-3); }
  .ti-hub__kpi { padding: var(--ti-space-3) var(--ti-space-4); }
}

/* ---- Questions from the old tables (plan 026) ----------------------------- */
/* One square per live house on Häuser › Preise, coloured by what is left to
   clarify, and the question card of a plan's step Klären. The colour is the
   state of the house, never the person who answered: nobody is assigned. */
.ti-switch__squares { display: flex; flex-wrap: wrap; gap: 4px; margin: var(--ti-space-3) 0 0; padding: 0; list-style: none; }
.ti-switch__squares li { display: block; }
.ti-switch__sq { display: inline-block; width: 14px; height: 14px; border-radius: 3px; background: var(--ti-hairline); vertical-align: middle; }
a.ti-switch__sq:hover, a.ti-switch__sq:focus-visible { outline: 2px solid var(--ti-focus-ring); outline-offset: 1px; }
.ti-switch__sq--fertig { background: var(--ti-success-mark); }
.ti-switch__sq--klar { background: var(--ti-success-bg); box-shadow: inset 0 0 0 1px var(--ti-success-mark); }
.ti-switch__sq--offen { background: var(--ti-info-border); }
.ti-switch__sq--spaeter { background: var(--ti-warning-mark); }
.ti-switch__sq--alt { background: var(--ti-hairline-soft); border: 1px solid var(--ti-hairline); box-sizing: border-box; }
.ti-switch__legend { display: flex; flex-wrap: wrap; gap: var(--ti-space-2) var(--ti-space-5); margin: var(--ti-space-4) 0 0; padding: 0; list-style: none; font-size: var(--ti-text-s); color: var(--ti-ink-2); }
.ti-switch__legend li { display: flex; align-items: center; gap: var(--ti-space-2); }
.ti-start__item-n--success { background: var(--ti-success-bg); color: var(--ti-success-text); }

.ti-switch__card { max-width: 760px; }
.ti-switch__where { margin: 0 0 var(--ti-space-2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--ti-space-2); font-weight: 600; }
.ti-switch__question { margin-bottom: var(--ti-space-3); }
.ti-switch__evidence { margin: 0 0 var(--ti-space-5); font-style: normal; font-size: var(--ti-text-s); white-space: normal; overflow-wrap: anywhere; }
.ti-switch__options { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--ti-space-3); }
.ti-switch__option { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); align-items: center; gap: var(--ti-space-2) var(--ti-space-3); }
.ti-switch__option .ti-field { grid-column: 1 / -1; margin: 0; }
.ti-switch__effect { font-size: var(--ti-text-s); color: var(--ti-ink-2); }
.ti-switch__checklist { border: 0; margin: 0 0 var(--ti-space-5); padding: 0; display: grid; gap: var(--ti-space-2); }
.ti-switch__form .ti-switch__checklist .ti-check { margin: 0; }
.ti-switch__more summary { cursor: pointer; color: var(--ti-ink-2); }
.ti-switch__more .ti-cust__quote { margin-top: var(--ti-space-2); }
/* A question a step fixes: the way there first, "Später klären" below (2026-10-07). */
.ti-switch__fix { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); align-items: center; gap: var(--ti-space-2) var(--ti-space-3); margin-bottom: var(--ti-space-3); }
.ti-switch__form .ti-check { margin-top: var(--ti-space-4); }
.ti-switch__skip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ti-space-3); margin-top: var(--ti-space-5); padding-top: var(--ti-space-4); border-top: 1px solid var(--ti-hairline-soft); font-size: var(--ti-text-s); }
.ti-switch__asklist { margin: 0; padding-left: var(--ti-space-5); display: grid; gap: var(--ti-space-4); }
@media (max-width: 760px) {
  .ti-switch__option { grid-template-columns: minmax(0, 1fr); }
  .ti-switch__fix { grid-template-columns: minmax(0, 1fr); }
  .ti-switch__effect { grid-column: 1; }
}
.ti-switch__compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ti-space-5); align-items: start; margin-bottom: var(--ti-space-5); }
.ti-switch__h3 { margin: var(--ti-space-4) 0 var(--ti-space-2); font-size: var(--ti-text-m); }
.ti-switch__grid { font-size: var(--ti-text-s); margin-bottom: var(--ti-space-3); }
.ti-switch__flag { display: grid; gap: var(--ti-space-3); justify-items: start; margin-top: var(--ti-space-5); padding-top: var(--ti-space-4); border-top: 1px solid var(--ti-hairline-soft); }
.ti-switch__flag .ti-field { width: 100%; }
@media (max-width: 1100px) {
  .ti-switch__compare { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Preise: a plan (price-plan.php, plan 026 PR C) ----------------------- */
/* After the boards Preise-Zeitraeume, Preise-Matrix and Preise-Pruefen. */
.ti-pp { display: grid; gap: var(--ti-space-5); }
.ti-pp__crumbs { margin: 0 0 var(--ti-space-2); font-size: var(--ti-text-s); color: var(--ti-muted); }
.ti-pp__crumbs a { color: var(--ti-muted); }
.ti-pp__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--ti-space-4) var(--ti-space-6); margin-bottom: var(--ti-space-4); }
.ti-pp__title .ti-page-title { margin: 0; }
/* Einheit or single house: said first, above the name, so it is never missed. */
.ti-pp__kind { display: inline-flex; margin: 0 0 var(--ti-space-2); padding: 3px 10px; border-radius: 999px; font-size: var(--ti-text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.ti-pp__kind--unit { background: var(--ti-primary); color: var(--ti-card); }
.ti-pp__kind--house { background: var(--ti-hairline-soft); color: var(--ti-ink-2); box-shadow: inset 0 0 0 1px var(--ti-hairline); }
.ti-pp__title .ti-house-ref { font-size: var(--ti-text-m); margin-left: var(--ti-space-2); }
.ti-pp__sub { margin: var(--ti-space-1) 0 0; font-size: var(--ti-text-s); color: var(--ti-ink-2); }
/* The season being edited: top right, in the primary colour, so it is never in doubt (2026-10-07). */
.ti-pp__yearbar { display: grid; justify-items: end; gap: var(--ti-space-2); }
.ti-pp__yearrow { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--ti-space-2); }
.ti-pp__years { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 3px; border-radius: var(--ti-radius-m); background: var(--ti-hairline-soft); }
.ti-pp__year { display: inline-flex; align-items: baseline; gap: 8px; min-height: 44px; box-sizing: border-box; padding: 11px 16px; border-radius: var(--ti-radius-s); font-size: var(--ti-text-m); font-weight: 700; color: var(--ti-ink-2); text-decoration: none; }
.ti-pp__yearstate { font-size: var(--ti-text-s); font-weight: 400; }
.ti-pp__year:hover { color: var(--ti-ink); background: var(--ti-card); }
.ti-pp__year--on, .ti-pp__year--on:hover { background: var(--ti-primary); color: var(--ti-card); box-shadow: var(--ti-shadow-s); }
.ti-pp__year--on .ti-pp__yearstate { color: var(--ti-on-dark-muted); }
/* A draft still in a year that is over (price_plan_stale()): amber, never the primary colour. */
.ti-pp__year--stale { color: var(--ti-warning-text); }
.ti-pp__year--stale.ti-pp__year--on, .ti-pp__year--stale.ti-pp__year--on:hover { background: var(--ti-warning-bg); color: var(--ti-warning-text); box-shadow: inset 0 0 0 1px var(--ti-warning-border); }
.ti-pp__year--stale.ti-pp__year--on .ti-pp__yearstate { color: var(--ti-warning-text); }
.ti-pp__yearhint { margin: 0; max-width: 340px; font-size: var(--ti-text-s); color: var(--ti-warning-text); text-align: right; }
.ti-pp__tabs { display: flex; flex-wrap: wrap; gap: var(--ti-space-2) var(--ti-space-6); margin: 0 0 var(--ti-space-5); border-bottom: 1px solid var(--ti-hairline); }
.ti-pp__tab { display: inline-flex; align-items: center; gap: var(--ti-space-2); height: 44px; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--ti-muted); text-decoration: none; font-size: var(--ti-text-m); }
.ti-pp__tab:hover { color: var(--ti-ink); }
.ti-pp__tab--on { color: var(--ti-ink); font-weight: 600; border-bottom-color: var(--ti-primary); }
.ti-pp__tabn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ti-hairline-soft); color: var(--ti-ink-2); font-size: var(--ti-text-xs); font-weight: 700; }
.ti-pp__tab--on .ti-pp__tabn { background: var(--ti-primary); color: var(--ti-card); }

.ti-pp__card { display: grid; gap: var(--ti-space-4); align-content: start; padding: 18px 22px; border: 1px solid var(--ti-hairline); border-radius: var(--ti-radius-xl); background: var(--ti-card); }
.ti-pp__card--tight { gap: var(--ti-space-2); padding: 18px 20px; }
.ti-pp__card .ti-radios, .ti-pp__card .ti-field, .ti-pp__card .ti-check { margin: 0; }
/* "Gilt auch für …" under the answers needs its room back (the line above sets 0). */
.ti-pp__card .ti-switch__form .ti-check { margin-top: var(--ti-space-4); }
.ti-pp__cardhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--ti-space-2) var(--ti-space-4); }
.ti-pp__h2 { margin: 0; font-size: var(--ti-text-m); font-weight: 600; }
.ti-pp__h3 { margin: var(--ti-space-2) 0 0; font-size: var(--ti-text-s); font-weight: 600; }
.ti-pp__note { font-size: var(--ti-text-s); line-height: 1.5; color: var(--ti-muted); }
.ti-pp__text { font-size: var(--ti-text-s); line-height: 1.5; color: var(--ti-ink-2); }
.ti-pp__empty { margin: 0; font-size: var(--ti-text-s); color: var(--ti-muted); }
.ti-pp__fields { display: flex; flex-wrap: wrap; gap: var(--ti-space-4); align-items: flex-start; }
.ti-pp__banner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--ti-space-3); padding: 10px 12px 10px 14px; border-radius: var(--ti-radius-m); background: var(--ti-info-bg); color: var(--ti-info-text); font-size: var(--ti-text-s); margin-bottom: var(--ti-space-4); }
.ti-pp__banner--soft { background: var(--ti-primary-soft); color: var(--ti-on-season-light); margin-bottom: 0; }
.ti-pp__inline { display: inline; margin: 0; }
.ti-pp__mono { font-family: var(--ti-font-mono); }
.ti-pp__num { text-align: right; }

/* Season swatches: 1 = most expensive. */
.ti-pp__sw { display: inline-block; flex-shrink: 0; width: 12px; height: 12px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); vertical-align: -1px; }
.ti-pp__sw--1 { background: var(--ti-season-1); }
.ti-pp__sw--2 { background: var(--ti-season-2); }
.ti-pp__sw--3 { background: var(--ti-season-3); }
.ti-pp__sw--4 { background: var(--ti-season-4); }
.ti-pp__sw--5 { background: var(--ti-season-5); }
.ti-pp__sw--x { background: repeating-linear-gradient(135deg, var(--ti-season-closed-stripe) 0 4px, var(--ti-season-closed) 4px 8px); }

/* Seasons as chips. */
.ti-pp__chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ti-space-2); }
.ti-pp__chip { display: inline-flex; align-items: center; gap: var(--ti-space-2); height: 38px; padding: 0 4px 0 12px; border: 1px solid var(--ti-hairline); border-radius: 999px; background: var(--ti-card); font-size: var(--ti-text-s); }
.ti-pp__chipname { font-weight: 600; }
.ti-pp__count { color: var(--ti-muted); font-size: var(--ti-text-xs); }
.ti-pp__chip .ti-iconbtn { width: 28px; height: 28px; }

/* The month painter. */
.ti-pp__tile:focus-within { box-shadow: var(--ti-focus-ring); }
/* The month's season, chosen on the card itself: the select takes the card's
   colours and shows its own chevron in them. */
.ti-pp__tilepick { position: relative; display: block; width: 100%; }
.ti-pp__tileselect { width: 100%; padding: 2px 18px 2px 0; border: 0; background: transparent; color: inherit; font: inherit; font-size: var(--ti-text-xs); -webkit-appearance: none; appearance: none; cursor: pointer; }
.ti-pp__tileselect:focus { outline: none; }
.ti-pp__tileselect option { color: var(--ti-ink); background: var(--ti-card); }
.ti-pp__tilepick svg { position: absolute; right: 0; top: 50%; transform: translateY(-50%); pointer-events: none; }
.ti-pp__tile { cursor: pointer; }
.ti-pp__monthgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--ti-space-2); }
.ti-pp__tile { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; height: 72px; padding: 10px 12px; border: 1px solid rgba(0, 0, 0, 0.06); border-radius: var(--ti-radius-m); font: inherit; text-align: left; cursor: pointer; }
.ti-pp__tilename { font-size: var(--ti-text-m); font-weight: 600; }
.ti-pp__tile--1 { background: var(--ti-season-1); color: var(--ti-on-season-dark); }
.ti-pp__tile--2 { background: var(--ti-season-2); color: var(--ti-on-season-dark); }
.ti-pp__tile--3 { background: var(--ti-season-3); color: var(--ti-on-season-light); }
.ti-pp__tile--4 { background: var(--ti-season-4); color: var(--ti-on-season-light); }
.ti-pp__tile--5 { background: var(--ti-season-5); color: var(--ti-on-season-light); }
.ti-pp__tile--x { background: repeating-linear-gradient(135deg, var(--ti-season-closed-stripe) 0 6px, var(--ti-season-closed) 6px 12px); border: 1.5px dashed var(--ti-field-border); color: var(--ti-muted); }
.ti-pp__summary { display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--ti-radius-m); background: var(--ti-paper); font-size: var(--ti-text-s); }
.ti-pp__summary p { margin: 0; }
.ti-pp__summaryhead { font-size: var(--ti-text-xs); font-weight: 600; color: var(--ti-ink-2); }

/* Exact periods and holidays. */
.ti-pp__strip { position: relative; height: 34px; overflow: hidden; border-radius: var(--ti-radius-s); background: repeating-linear-gradient(135deg, var(--ti-season-closed-stripe) 0 6px, var(--ti-season-closed) 6px 12px); box-shadow: inset 0 0 0 1px var(--ti-hairline); }
.ti-pp__seg { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding: 0 6px; overflow: hidden; white-space: nowrap; box-sizing: border-box; box-shadow: inset -1px 0 0 var(--ti-card); font-size: var(--ti-text-xs); font-weight: 600; }
.ti-pp__seg--1 { background: var(--ti-season-1); color: var(--ti-on-season-dark); }
.ti-pp__seg--2 { background: var(--ti-season-2); color: var(--ti-on-season-dark); }
.ti-pp__seg--3 { background: var(--ti-season-3); color: var(--ti-on-season-light); }
.ti-pp__seg--4 { background: var(--ti-season-4); color: var(--ti-on-season-light); }
.ti-pp__seg--5, .ti-pp__seg--x { background: var(--ti-season-5); color: var(--ti-on-season-light); }
.ti-pp__seg { cursor: pointer; }
/* A holiday: a band at the foot of the strip, over the period below it. */
.ti-pp__seg--holiday { top: auto; height: 9px; box-shadow: inset 0 1px 0 var(--ti-card), inset -1px 0 0 var(--ti-card); }
.ti-pp__stripbox { position: relative; }
.ti-pp__tip { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 30; transform: translateX(-50%); padding: 5px 9px; border-radius: var(--ti-radius-s); background: var(--ti-ink); color: var(--ti-card); font-size: var(--ti-text-xs); white-space: nowrap; pointer-events: none; }
.ti-pp__tip[hidden] { display: none; }
.ti-pp__stripmonths { display: grid; grid-template-columns: 31fr 28fr 31fr 30fr 31fr 30fr 31fr 31fr 30fr 31fr 30fr 31fr; margin-top: 6px; font-size: var(--ti-text-xs); color: var(--ti-muted); }
.ti-pp__rows { display: grid; gap: 6px; }
.ti-pp__rows > div[data-pp-list] { display: grid; gap: 6px; }
.ti-pp__row, .ti-pp__rowhead { display: grid; gap: 10px; align-items: center; }
.ti-pp__rows--periods .ti-pp__row, .ti-pp__rows--periods .ti-pp__rowhead { grid-template-columns: minmax(150px, 1.1fr) minmax(170px, 1fr) minmax(170px, 1fr) 64px minmax(110px, 1fr) 36px; }
.ti-pp__rows--holidays .ti-pp__row, .ti-pp__rows--holidays .ti-pp__rowhead { grid-template-columns: minmax(150px, 1.2fr) minmax(150px, 1fr) minmax(170px, 1fr) minmax(170px, 1fr) 64px 36px; }
.ti-pp__rowhead { padding: 0 0 6px; border-bottom: 1px solid var(--ti-hairline); font-size: var(--ti-text-xs); font-weight: 600; color: var(--ti-ink-2); }
.ti-pp__row .ti-input { width: 100%; min-width: 0; }
.ti-pp__date { display: flex; align-items: center; gap: 6px; min-width: 0; }
/* The date and its calendar button; the calendar opens under the field. */
.ti-pp__datebox { position: relative; flex: 1; min-width: 0; }
.ti-pp__datebox .ti-input { padding-right: 38px; }
.ti-pp__cal { width: 272px; }
.ti-pp__calsat { font-weight: 600; }
/* What switching to months would lose (the dialog). */
.ti-pp__lost { margin: 0; padding-left: var(--ti-space-5); display: grid; gap: 2px; font-family: var(--ti-font-mono); font-size: var(--ti-text-s); }
.ti-pp__wd { width: 22px; flex-shrink: 0; font-family: var(--ti-font-mono); font-size: var(--ti-text-xs); color: var(--ti-muted); }
.ti-pp__rownote { font-size: var(--ti-text-xs); color: var(--ti-muted); }
.ti-pp__rownote--error { color: var(--ti-error-text); }
.ti-pp__rownote--warn { color: var(--ti-warning-text); }
.ti-pp__rowfix { margin-left: 4px; padding: 2px 8px; border: 1px solid currentColor; border-radius: var(--ti-radius-s); background: none; color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
.ti-pp__rowfix:hover { background: var(--ti-hairline-soft); }

/* Prices: the matrix and the aside. */
.ti-pp__matrixwrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--ti-space-5); align-items: start; }
/* The price grid and, right under it, the Dauer-Nachlass (2026-10-07). */
.ti-pp__maincol { display: grid; gap: var(--ti-space-5); min-width: 0; }
.ti-pp__ab { display: grid; grid-template-columns: auto auto; justify-content: space-between; gap: var(--ti-space-1) var(--ti-space-4); margin: 0; font-size: var(--ti-text-m); }
.ti-pp__ab dt { color: var(--ti-ink-2); }
.ti-pp__ab dd { margin: 0; text-align: right; }
.ti-pp__abdiff { font-size: var(--ti-text-xs); color: var(--ti-muted); }
.ti-pp__aside { display: grid; gap: var(--ti-space-4); }
.ti-pp__big { font-family: var(--ti-font-mono); font-size: var(--ti-text-2xl); }
/* A figure to read, not to type: the display face, like the page titles. */
.ti-pp__abtable { font-size: var(--ti-text-s); }
.ti-pp__abtable td, .ti-pp__abtable th { padding: 6px 4px; }
.ti-pp__big--display { font-family: var(--ti-font-display); font-size: var(--ti-text-2xl); font-weight: 400; line-height: 1.1; font-variant-numeric: lining-nums; }
.ti-pp__matrix { display: grid; gap: 4px; min-width: 560px; }
.ti-pp__mhead, .ti-pp__mrow { display: grid; gap: 12px; align-items: center; grid-template-columns: minmax(170px, 1fr) repeat(var(--pp-cols, 3), minmax(104px, 132px)) 76px; }
.ti-pp__matrix--c1 { --pp-cols: 1; } .ti-pp__matrix--c2 { --pp-cols: 2; } .ti-pp__matrix--c3 { --pp-cols: 3; } .ti-pp__matrix--c4 { --pp-cols: 4; }
.ti-pp__matrix--c5 { --pp-cols: 5; } .ti-pp__matrix--c6 { --pp-cols: 6; } .ti-pp__matrix--c7 { --pp-cols: 7; } .ti-pp__matrix--c8 { --pp-cols: 8; }
.ti-pp__mhead { align-items: end; padding: 0 2px 8px; border-bottom: 1px solid var(--ti-hairline); font-size: var(--ti-text-xs); font-weight: 600; color: var(--ti-ink-2); }
.ti-pp__mcol { display: grid; justify-items: end; gap: 3px; text-align: right; }
.ti-pp__mname { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ti-ink); }
.ti-pp__when { font-weight: 400; font-size: var(--ti-text-xs); color: var(--ti-muted); }
.ti-pp__mrow { padding: 4px 2px; }
.ti-pp__mrow--option { padding-left: 18px; }
/* An Einheit's flat priced only by its own prices: its name as a heading, no
   empty Miete fields. A single house like that has no Miete row at all. */
.ti-pp__mrow--head { padding-top: 6px; }
.ti-pp__mrow--anchor { display: none; }
.ti-pp__mrow--calc { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--ti-hairline); }
.ti-pp__mlabel { display: grid; gap: 1px; min-width: 0; }
.ti-pp__mlabel strong { font-size: var(--ti-text-s); }
.ti-pp__mlabel span { font-size: var(--ti-text-xs); color: var(--ti-muted); }
.ti-pp__cell { display: grid; gap: 2px; }
.ti-pp__cell .ti-input { width: 100%; height: 36px; text-align: right; }
.ti-pp__cell .ti-pp__changed { border-color: var(--ti-primary); box-shadow: inset 0 0 0 1px var(--ti-primary); }
.ti-pp__old { font-family: var(--ti-font-mono); font-size: var(--ti-text-xs); text-align: right; color: var(--ti-muted); }
.ti-pp__rowtools { display: inline-flex; justify-content: flex-end; gap: 2px; }
.ti-pp__adjust { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ti-space-2); padding: 10px 12px 10px 14px; border: 1px solid var(--ti-hairline); border-radius: var(--ti-radius-l); background: var(--ti-card); font-size: var(--ti-text-s); }
.ti-pp__adjust[hidden] { display: none; }
.ti-pp__adjust .ti-input { width: 72px; text-align: right; }
.ti-pp__discount { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ti-space-2); padding: 4px 0; font-size: var(--ti-text-s); }
.ti-pp__short { width: 80px; text-align: right; }
.ti-pp__unit { width: 72px; }
.ti-pp__flatsel { max-width: 280px; }

/* Checks, as on the boards: a small tile with the sign, then the sentence. */
.ti-pp__checklist { display: grid; gap: var(--ti-space-2); margin: 0; padding: 0; list-style: none; }
.ti-pp__checklist li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.ti-pp__icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; font-size: var(--ti-text-xs); font-weight: 700; }
.ti-pp__icon--ok { background: var(--ti-success-bg); color: var(--ti-success-text); }
.ti-pp__icon--error { background: var(--ti-error-bg); color: var(--ti-error-text); }
.ti-pp__icon--warn { background: var(--ti-warning-bg); color: var(--ti-warning-text); }
.ti-pp__icon--info { background: var(--ti-hairline-soft); color: var(--ti-ink-2); }
.ti-pp__checktext { font-size: var(--ti-text-s); line-height: 1.5; color: var(--ti-ink-2); }

/* Prüfen. */
.ti-pp__check { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: var(--ti-space-5); align-items: start; margin-bottom: var(--ti-space-5); }
.ti-pp__col { display: grid; gap: var(--ti-space-5); }
.ti-pp__changes td, .ti-pp__changes th { font-size: var(--ti-text-s); }
.ti-pp__flatpick { display: flex; align-items: flex-end; gap: var(--ti-space-2); }
.ti-pp__flatpick .ti-field { flex: 1; margin: 0; }
.ti-pp__monthlist { margin: 0; padding: 4px 12px; list-style: none; border: 1px solid var(--ti-hairline-soft); border-radius: var(--ti-radius-l); background: var(--ti-paper); }
.ti-pp__monthlist li { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 7px 2px; border-bottom: 1px solid var(--ti-hairline-soft); font-size: var(--ti-text-s); }
.ti-pp__monthlist li:last-child { border-bottom: 0; }
.ti-pp__mmonth { font-family: var(--ti-font-display); font-size: var(--ti-text-m); }
.ti-pp__mtext { display: grid; gap: 2px; }
.ti-pp__mtext > span { display: inline-flex; align-items: center; gap: 7px; }

/* The save bar at the end of every step, dark as on the boards. */
.ti-pp__savebar { position: sticky; bottom: var(--ti-space-3); z-index: 5; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--ti-space-4); padding: 14px 18px 14px 22px; border-radius: var(--ti-radius-l); background: var(--ti-dark); color: var(--ti-card); }
.ti-pp__savebar > div:first-child { display: grid; gap: 2px; }
.ti-pp__savebar strong { font-size: var(--ti-text-m); }
.ti-pp__savebar span { font-size: var(--ti-text-s); color: var(--ti-on-dark-muted); }
.ti-pp__savebtns { display: flex; flex-wrap: wrap; gap: 10px; }
.ti-pp__savebar .ti-btn--ghost { border: 1px solid var(--ti-on-dark-muted); color: var(--ti-card); background: transparent; }
.ti-pp__savebar .ti-btn--ghost:hover { background: rgba(255, 255, 255, 0.08); color: var(--ti-card); }
.ti-pp__savebar .ti-btn:disabled { opacity: 0.45; cursor: not-allowed; }
/* "Saison löschen" asks in the bar (2026-10-08): the question alone, its buttons the bar's size, not squeezed between "Zurück" and "Als fertig markieren". */
.ti-pp__savebtns:has(.ti-confirm) > :not(:has(.ti-confirm)) { display: none; }
.ti-pp__savebar .ti-confirm { gap: 8px 10px; }
.ti-pp__savebar .ti-confirm__note { color: var(--ti-card); font-size: var(--ti-text-s); }
.ti-pp__savebar .ti-confirm .ti-btn--s { height: 40px; padding: 0 16px; font-size: var(--ti-text-m); }

@media (max-width: 1100px) {
  .ti-pp__check, .ti-pp__matrixwrap { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .ti-pp__top { grid-template-columns: minmax(0, 1fr); }
  .ti-pp__yearbar { justify-items: start; }
  .ti-pp__yearrow { justify-content: flex-start; }
  .ti-pp__yearhint { text-align: left; }
}
@media (max-width: 760px) {
  .ti-pp__monthgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ti-pp__rowhead { display: none; }
  .ti-pp__rows--periods .ti-pp__row, .ti-pp__rows--holidays .ti-pp__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 10px 0; border-bottom: 1px solid var(--ti-hairline-soft); }
  .ti-pp__card { padding: 16px; }
  .ti-pp__savebar { padding: 10px 12px; gap: var(--ti-space-2); }
  .ti-pp__savebar > div:first-child span { display: none; }
}

/* ---- Preisliste hochladen: while Claude reads (price-list.php) ----------- */
.ti-pl-reading { display: flex; flex-direction: column; align-items: center; gap: var(--ti-space-2); padding: var(--ti-space-6) var(--ti-space-5); text-align: center; }
.ti-pl-reading__spinner { width: 32px; height: 32px; margin-bottom: var(--ti-space-2); border: 3px solid var(--ti-hairline); border-top-color: var(--ti-primary); border-radius: 50%; animation: ti-bp-spin 900ms linear infinite; }
.ti-pl-reading__title { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.ti-pl-reading__line { margin: 0; min-height: 3em; color: var(--ti-ink-2); transition: opacity 250ms; }
.ti-pl-reading__line--out { opacity: 0; }
.ti-pl-reading__time { margin: 0; color: var(--ti-muted); font-variant-numeric: tabular-nums; }
.ti-pl-prices { margin: 0; padding: 0; list-style: none; }
/* The review page (2026-10-08): air between text and table, and under a card's last line. */
.ti-pl-review .ti-detail__msg + .ti-table-wrap { margin-top: var(--ti-space-4); }
.ti-pl-review .ti-detail__card--table > .ti-pp__flats { margin: var(--ti-space-4) 0 0; padding-bottom: var(--ti-space-5); }
.ti-pl-review .ti-detail__card--table > .ti-table-wrap:last-child { margin-bottom: 0; }
.ti-pl-review .ti-detail__card--table > .ti-btn:last-child { margin: var(--ti-space-4) 0 var(--ti-space-5); }
/* The review is tables: the whole content width, not a form's 880px (2026-10-09). */
.ti-form.ti-pl-review { max-width: none; }
/* The questions: one table, one tbody per question; a hairline between questions, none inside one. */
.ti-pl-qtable tbody + tbody { border-top: 1px solid var(--ti-hairline); }
/* The column names stay in view on a long list (2026-10-09). A wrap that scrolls sideways would
   hold them, so on a wide screen it does not; a narrow one scrolls as before. */
@media (min-width: 900px) {
  .ti-pl-qwrap { overflow: visible; }
  .ti-pl-qtable thead th { position: sticky; top: var(--ti-header-h, 61px); z-index: 3; background: var(--ti-card); }
}
.ti-actionbar__note { margin-left: auto; align-self: center; font-size: var(--ti-text-s); color: var(--ti-ink-2); }
.ti-pl-qtable thead th:nth-child(1) { width: 26%; }
.ti-pl-qtable thead th:nth-child(2), .ti-pl-qtable thead th:nth-child(3) { width: 27%; }
.ti-pl-qtable tbody th, .ti-pl-qtable tbody td { border-bottom: 0; padding-top: 3px; padding-bottom: 3px; }
.ti-pl-qtable tbody tr:hover td { background: none; }
.ti-pl-qtable tbody th[scope="row"] { text-transform: none; letter-spacing: 0; font-size: inherit; font-weight: 400; color: var(--ti-ink-2); white-space: nowrap; vertical-align: top; }
.ti-pl-qtable tbody tr:not(.ti-pl-qhead) td { color: var(--ti-ink-2); }
.ti-pl-qtable .ti-pl-qhead th, .ti-pl-qtable .ti-pl-qhead td { padding-top: var(--ti-space-4); }
.ti-pl-qtable .ti-pl-qhead th { text-transform: none; letter-spacing: 0; font-size: inherit; font-weight: 600; color: var(--ti-ink); }
.ti-pl-qtable tbody tr:last-child th, .ti-pl-qtable tbody tr:last-child td { padding-bottom: var(--ti-space-4); }
.ti-pl-reading__note { margin: var(--ti-space-2) 0 0; color: var(--ti-muted); font-size: var(--ti-text-s); }
@media (prefers-reduced-motion: reduce) {
  .ti-pl-reading__spinner { animation: none; border-top-color: var(--ti-hairline); }
  .ti-pl-reading__line { transition: none; }
}

/* ---- Preise: the list (prices.php, plan 026 PR C) ------------------------- */
.ti-pp-list { display: grid; gap: var(--ti-space-4); }
.ti-pp-list__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--ti-space-3); }
.ti-pp-list__bar .ti-field { margin: 0; }
.ti-pp-list__chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--ti-hairline); border-radius: 999px; background: var(--ti-card); color: var(--ti-ink-2); font: inherit; font-size: var(--ti-text-s); cursor: pointer; }
.ti-pp-list__chip[aria-pressed="true"] { background: var(--ti-dark); border-color: var(--ti-dark); color: var(--ti-paper); }
.ti-pp-list__selbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--ti-space-3); padding: var(--ti-space-2) var(--ti-space-3) var(--ti-space-2) var(--ti-space-4); border-radius: var(--ti-radius-l); background: var(--ti-dark); color: var(--ti-paper); font-weight: 600; font-size: var(--ti-text-s); }
.ti-pp-list__selbar[hidden] { display: none; }
.ti-pp-list__sub { display: block; font-size: var(--ti-text-xs); color: var(--ti-muted); }

/* ---- Hausblatt form: the season plan of the house (plan 026, D18) -------- */
.ti-hb-suggest { margin: 0 0 12px; padding: 0; list-style: none; border-radius: var(--ti-radius-m); background: var(--ti-card); }
.ti-hb-suggest__row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--ti-space-2) var(--ti-space-5); padding: 12px 14px; }
.ti-hb-suggest__row + .ti-hb-suggest__row { border-top: 1px solid var(--ti-hairline); }
.ti-hb-suggest__main { flex: 1 1 320px; min-width: 0; }
.ti-hb-suggest__title { margin: 0; font-size: var(--ti-text-m); }
.ti-hb-suggest__from { font-style: normal; font-size: var(--ti-text-s); color: var(--ti-muted); white-space: nowrap; }
.ti-hb-suggest__reason { margin: 6px 0 0; font-size: var(--ti-text-s); color: var(--ti-ink-2); }
/* Häuser → Vorschläge (suggestions.php): the same rows, with the decision and the editor's remark beside them. */
.ti-sg__list { border: 1px solid var(--ti-hairline); }
.ti-sg__list .ti-field { margin-top: var(--ti-space-2); }
.ti-sg__decide { flex: 0 1 300px; min-width: 0; }
.ti-sg__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: var(--ti-space-4) 0 0; }
.ti-hb-plans { display: flex; flex-wrap: wrap; gap: var(--ti-space-2) var(--ti-space-5); margin: 0 0 var(--ti-space-3); padding: 0; list-style: none; font-size: var(--ti-text-s); }
.ti-hb-plans li { display: inline-flex; align-items: center; gap: var(--ti-space-2); }
.ti-hb-plans a:first-child, .ti-hb-plans span:first-child { font-weight: 600; }
/* Grid items do not shrink below their content by default: let the wide
   price tables scroll inside their wrapper instead of widening the page. */
.ti-pp > *, .ti-pp__col > *, .ti-pp__check > *, .ti-pp-list > *, .ti-pp__clarify > * { min-width: 0; }

/* Klären: the question and the old table, the house beside them. */
/* Fields that are each their own thing, one under the other. */
.ti-pp__stack { display: grid; gap: var(--ti-space-5); }
.ti-pp__stack > .ti-field { margin: 0; }
/* Klären: the suggestions taken in one go. */
.ti-pp__suggestlist { display: grid; gap: var(--ti-space-3); margin: 0; padding: 0; list-style: none; }
.ti-pp__suggestlist li { display: grid; gap: 2px; padding-bottom: var(--ti-space-3); border-bottom: 1px solid var(--ti-hairline-soft); }
.ti-pp__suggestlist .ti-check { margin: 0; }
.ti-pp__suggestresult { padding-left: 28px; font-size: var(--ti-text-s); color: var(--ti-ink-2); }
.ti-pp__clarify { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--ti-space-5); align-items: start; margin-bottom: var(--ti-space-5); }
.ti-pp__clarify .ti-switch__card { max-width: none; }
.ti-pp__clarify .ti-switch__where { margin: 0; }
.ti-pp__clarify .ti-switch__skip { margin-top: 0; }
.ti-pp__clarify .ti-switch__flag { margin-top: 0; padding-top: 18px; border-top: 1px solid var(--ti-hairline); }
.ti-pp__clarify > .ti-pp__aside { position: sticky; top: var(--ti-space-5); }
.ti-pp__house { gap: 0; padding: 0; overflow: hidden; }
.ti-pp__housepic { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--ti-hairline-soft); }
.ti-pp__housepic--none { display: flex; align-items: center; justify-content: center; color: var(--ti-muted); }
.ti-pp__housebody { display: grid; gap: var(--ti-space-3); padding: 16px 20px 20px; }
.ti-pp__housename { margin: 0; font-family: var(--ti-font-display); font-size: var(--ti-text-xl); font-weight: 400; line-height: 1.2; }
.ti-pp__housebody .ti-pp__note { margin: -6px 0 0; }
.ti-pp__facts { margin: 0; grid-template-columns: max-content minmax(0, 1fr); font-size: var(--ti-text-s); }
.ti-pp__houselinks { display: flex; flex-wrap: wrap; gap: var(--ti-space-2); }
.ti-pp__flats ul, ul.ti-pp__flats { display: grid; gap: var(--ti-space-2); margin: var(--ti-space-2) 0 0; padding: 0; list-style: none; font-size: var(--ti-text-s); }
.ti-pp__flats li { display: grid; gap: 1px; }
.ti-pp__flats summary { cursor: pointer; font-size: var(--ti-text-s); font-weight: 600; }
.ti-pp-list__progress { position: relative; margin-bottom: var(--ti-space-5); }
.ti-pp-list__progress .ti-pp__tip { bottom: auto; transform: translate(-50%, -100%); }
@media (max-width: 1100px) {
  .ti-pp__clarify { grid-template-columns: minmax(0, 1fr); }
  .ti-pp__clarify .ti-pp__aside { order: -1; }
  .ti-pp__clarify > .ti-pp__aside { position: static; }
  .ti-pp__house { display: grid; grid-template-columns: 160px minmax(0, 1fr); }
  .ti-pp__housepic { height: 100%; aspect-ratio: auto; }
}
@media (max-width: 560px) {
  /* On a phone the question comes first, the house after it. */
  .ti-pp__clarify .ti-pp__aside { order: 0; }
  .ti-pp__house { grid-template-columns: minmax(0, 1fr); }
  .ti-pp__housepic { aspect-ratio: 16 / 9; }
}
.ti-pp-list__new { margin-left: var(--ti-space-2); font-size: var(--ti-text-s); }
.ti-pp__matrixwrap > * { min-width: 0; }

/* ---- Extras of a house (form-edit-hausblatt.php, plan 026 D2) ------------- */
.ti-hx { display: grid; gap: 6px; margin-bottom: var(--ti-space-3); }
.ti-hx > div[data-hx-list] { display: grid; gap: 6px; }
.ti-hx__row, .ti-hx__head { display: grid; grid-template-columns: minmax(150px, 1.4fr) 120px minmax(150px, 1fr) minmax(120px, 1fr) 36px; gap: 10px; align-items: center; }
.ti-hx__head { padding-bottom: 6px; border-bottom: 1px solid var(--ti-hairline); font-size: var(--ti-text-xs); font-weight: 600; color: var(--ti-ink-2); }
.ti-hx__row .ti-input, .ti-hx__row .ti-affix { width: 100%; min-width: 0; }
@media (max-width: 760px) {
  .ti-hx__head { display: none; }
  .ti-hx__row { grid-template-columns: minmax(0, 1fr) 110px 36px; padding-bottom: 8px; border-bottom: 1px solid var(--ti-hairline-soft); }
  .ti-hx__row select, .ti-hx__row input[name$="[note]"] { grid-column: 1 / 3; }
}

/* Besuche vor Ort in the Hausblatt form (plan 033): the days as rows divided by hairlines. */
.ti-hv__list { list-style: none; margin: 0; padding: 0; }
.ti-hv__day { display: inline-flex; align-items: center; gap: 8px; }
.ti-hv__add { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: 4px 10px; margin: 0 0 var(--ti-space-4); } /* align-content: the cell is as tall as the list beside it, and the lines must not spread over it */
.ti-hv__add > .ti-field { width: 150px; margin-bottom: 2px; } /* as wide as the date input, so the button stands right beside it */
.ti-hv__add .ti-date__row { flex-wrap: wrap; row-gap: 4px; }
.ti-hv__add .ti-date__weekday { flex-basis: 100%; min-width: 0; } /* the weekday under the input, not between it and the button */
.ti-hv__add .ti-date__status, .ti-hv__add > .ti-field > .ti-field__error { width: max-content; max-width: 26em; }
.ti-hv__add > .ti-btn { margin-top: 24px; } /* beside the input: below the label's line and the field's gap */
.ti-hv__add > p { flex-basis: 100%; }
.ti-hv__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; border-bottom: 1px solid var(--ti-hairline-soft); font-variant-numeric: tabular-nums; }

/* ui_upload() with several files: the count, the total and small previews. */
.ti-drop__previews { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: var(--ti-space-2); }
.ti-drop__previews:empty { display: none; }
.ti-drop__previews img { width: 64px; height: 44px; object-fit: cover; border-radius: var(--ti-radius-s); }

/* ---------- Bilder nach Bereich (form-images.php, plan 025) ---------- */

.ti-media { display: flex; flex-direction: column; gap: var(--ti-space-4); }
.ti-media__top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ti-space-4); align-items: start; }
.ti-media__body { display: flex; flex-wrap: wrap; gap: var(--ti-space-5); align-items: flex-start; }
.ti-media__main { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; gap: var(--ti-space-4); }
.ti-media__detail { flex: 1 1 340px; max-width: 400px; position: sticky; top: var(--ti-space-4); overflow: hidden; padding: 0; }
.ti-media__nothing { margin: 0; padding: var(--ti-space-5); color: var(--ti-muted); }

.ti-mfilter {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px;
  border: 1px solid var(--ti-field-border); border-radius: 16px; background: var(--ti-card); color: var(--ti-ink-2);
  font: inherit; font-size: var(--ti-text-s); font-weight: 600; cursor: pointer;
}
.ti-mfilter[aria-pressed="true"] { background: var(--ti-dark); border-color: var(--ti-dark); color: var(--ti-card); }
.ti-mfilter:disabled { opacity: 0.45; cursor: default; }
.ti-mfilter:focus-visible, .ti-mtile__link:focus-visible, .ti-mhaupt__tile:focus-visible,
.ti-mzg__add:focus-visible, .ti-zg__card:focus-visible, .ti-zg__frame:focus-visible, .ti-zg__tile:focus-visible,
.ti-zg__segbtn:focus-visible, .ti-zg__quote:focus-visible { outline: none; box-shadow: var(--ti-focus-ring); }

.ti-mdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ti-mdot--warning { background: var(--ti-warning-mark); }
.ti-mdot--error { background: var(--ti-error); }

.ti-mhb__title { margin: 0; font-size: var(--ti-text-s); font-weight: 600; }
.ti-mhb__sub { margin: 2px 0 var(--ti-space-3); font-size: var(--ti-text-s); line-height: 1.4; color: var(--ti-muted); }
.ti-mhb__note { margin: var(--ti-space-2) 0 0; font-size: var(--ti-text-s); color: var(--ti-muted); }

/* Hauptgalerie: the cover large, Vorschau 1-4 beside it. */
.ti-mhaupt { padding: var(--ti-space-3) var(--ti-space-4) var(--ti-space-4); }
.ti-mhaupt__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 122px 122px; gap: 6px; }
.ti-mhaupt__tile { position: relative; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; font: inherit; text-align: left; display: block; overflow: hidden; border-radius: var(--ti-radius-m); background: var(--ti-paper); }
.ti-mhaupt__tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ti-mhaupt__tile--cover { grid-row: span 2; }
.ti-mhaupt__tile:disabled { cursor: default; }
.ti-mhaupt__tile:not(:disabled):hover img { opacity: 0.88; }
.ti-mhaupt__tile--empty { display: flex; align-items: center; justify-content: center; border: 1.5px dashed var(--ti-hairline); background: transparent; color: var(--ti-muted); font-size: var(--ti-text-s); }
.ti-mhaupt__label { position: absolute; left: 6px; bottom: 6px; max-width: calc(100% - 12px); box-sizing: border-box; padding: 1px 6px; border-radius: 4px; background: var(--ti-card); color: var(--ti-primary); font-family: var(--ti-font-mono); font-size: var(--ti-text-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ti-mhaupt__label--dark { left: 8px; bottom: 8px; padding: 2px 8px; background: var(--ti-dark); color: var(--ti-card); font-family: var(--ti-font-sans); font-weight: 600; }

/* Zwischengalerien: the Hausblatt in miniature, one row per place. */
.ti-mzg { padding: var(--ti-space-3) var(--ti-space-4) var(--ti-space-4); }
.ti-mzg__count { font-weight: 400; color: var(--ti-muted); }
.ti-mzg__body { display: flex; gap: var(--ti-space-3); align-items: flex-start; }
.ti-mzg__mini { width: 92px; flex-shrink: 0; padding: 8px 34px 8px 8px; display: flex; flex-direction: column; gap: 5px; border: 1px solid var(--ti-hairline); border-radius: var(--ti-radius-m); background: var(--ti-card); }
.ti-mzg__haupt { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 16px 16px; gap: 2px; margin-bottom: 2px; }
.ti-mzg__hauptimg { display: block; border-radius: 2px; background: var(--ti-hairline-soft); }
.ti-mzg__hauptimg--cover { grid-row: span 2; background: var(--ti-hairline); }
.ti-mzg__line { display: block; height: 3px; border-radius: 2px; background: var(--ti-hairline-soft); }
.ti-mzg__line:nth-child(3n) { width: 86%; }
.ti-mzg__mark { position: relative; display: flex; gap: 2px; height: 18px; padding: 2px; box-sizing: border-box; border: 1.5px dashed var(--ti-primary); border-radius: 3px; }
.ti-mzg__mark.is-filled { border-style: solid; }
.ti-mzg__mark--column { width: 28%; height: auto; flex-direction: column; }
.ti-mzg__markimg { flex: 1; overflow: hidden; border-radius: 2px; background: var(--ti-paper); }
.ti-mzg__markimg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ti-mzg__mark > .ti-mzg__num { position: absolute; right: -29px; top: -3px; }
.ti-mzg__mark--column > .ti-mzg__num { top: 4px; }
.ti-mzg__mark.is-blocked { border-color: var(--ti-hairline); }
.ti-mzg__house { display: flex; gap: 4px; }
.ti-mzg__housetext { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.ti-mzg__num { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; background: var(--ti-paper); color: var(--ti-ink-2); font-family: var(--ti-font-mono); font-size: var(--ti-text-xs); }
.ti-mzg__num--1 { background: var(--ti-place-1-bg); color: var(--ti-place-1); }
.ti-mzg__num--2 { background: var(--ti-place-2-bg); color: var(--ti-place-2); }
.ti-mzg__num--3 { background: var(--ti-place-3-bg); color: var(--ti-place-3); }
.ti-mzg__num--4 { background: var(--ti-place-4-bg); color: var(--ti-place-4); }
.ti-mzg__num--1.is-filled, .ti-mzg__mark--1.is-filled > .ti-mzg__num { background: var(--ti-place-1); color: var(--ti-card); }
.ti-mzg__num--2.is-filled, .ti-mzg__mark--2.is-filled > .ti-mzg__num { background: var(--ti-place-2); color: var(--ti-card); }
.ti-mzg__num--3.is-filled, .ti-mzg__mark--3.is-filled > .ti-mzg__num { background: var(--ti-place-3); color: var(--ti-card); }
.ti-mzg__num--4.is-filled, .ti-mzg__mark--4.is-filled > .ti-mzg__num { background: var(--ti-place-4); color: var(--ti-card); }
.ti-mzg__mark--1 { border-color: var(--ti-place-1); }
.ti-mzg__mark--2 { border-color: var(--ti-place-2); }
.ti-mzg__mark--3 { border-color: var(--ti-place-3); }
.ti-mzg__mark--4 { border-color: var(--ti-place-4); }
.ti-mzg__rows { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ti-mzg__row { display: flex; align-items: center; gap: var(--ti-space-2); min-height: 48px; padding: 0 8px 0 10px; box-sizing: border-box; border: 1.5px dashed var(--ti-primary); border-radius: var(--ti-radius-m); }
.ti-mzg__row.is-filled { border: 1px solid var(--ti-primary); }
.ti-mzg__row.is-off { border-color: var(--ti-hairline); }
.ti-mzg__row form { margin: 0; }
.ti-mzg__thumbs { display: flex; gap: 3px; flex-shrink: 0; }
.ti-mzg__thumb { display: block; width: 34px; height: 24px; overflow: hidden; border-radius: 3px; background: var(--ti-paper); }
.ti-mzg__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ti-mzg__what { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 6px 0; }
.ti-mzg__between { font-size: var(--ti-text-xs); font-weight: 400; color: var(--ti-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ti-mzg__form { font-size: var(--ti-text-s); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ti-mzg__text { margin-left: 4px; font-weight: 400; font-style: italic; color: var(--ti-ink-2); }
.ti-mzg__broken { font-size: var(--ti-text-xs); color: var(--ti-error-text); }
.ti-mzg__add { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 6px 0; border: 0; background: transparent; color: var(--ti-primary); font: inherit; text-align: left; cursor: pointer; }
.ti-mzg__add:disabled { color: var(--ti-muted); cursor: default; }
.ti-mzg__addlabel { font-size: var(--ti-text-s); font-weight: 600; }

/* Alle Fotos, nach Bereich. */
.ti-mgallery { padding: 0; }
.ti-mgallery__head { padding: var(--ti-space-3) var(--ti-space-4) 0; }
.ti-mgroup { display: flex; flex-wrap: wrap; gap: var(--ti-space-2) var(--ti-space-4); padding: var(--ti-space-2) var(--ti-space-4); border-top: 1px solid var(--ti-hairline-soft); }
.ti-mgroup__head { width: 140px; flex-shrink: 0; padding-top: 4px; }
.ti-mgroup__title { margin: 0; font-size: var(--ti-text-s); font-weight: 600; }
.ti-mgroup__title--none { color: var(--ti-warning-text); }
.ti-mgroup__count { font-size: var(--ti-text-xs); color: var(--ti-muted); }
.ti-mgroup__tiles { flex: 1 1 320px; display: flex; flex-wrap: wrap; gap: var(--ti-space-2); min-width: 0; min-height: 60px; }
.ti-mgroup__empty { display: flex; align-items: center; justify-content: center; width: 180px; min-height: 60px; padding: 0 10px; box-sizing: border-box; border: 1.5px dashed var(--ti-hairline); border-radius: var(--ti-radius-s); color: var(--ti-muted); font-size: var(--ti-text-xs); line-height: 1.3; text-align: center; }

.ti-mtile { position: relative; width: 88px; height: 60px; flex-shrink: 0; border-radius: var(--ti-radius-s); overflow: hidden; background: var(--ti-paper); }
.ti-mtile.is-selected { box-shadow: 0 0 0 3px var(--ti-primary); }
.ti-mtile.is-dimmed { opacity: 0.28; }
.ti-mtile.is-dragging { opacity: 0.35; outline: 2px dashed var(--ti-primary); outline-offset: -2px; }
.ti-mtile.is-moved { animation: ti-mtile-moved 0.9s ease-out; }
@keyframes ti-mtile-moved { from { box-shadow: 0 0 0 3px var(--ti-primary); } to { box-shadow: 0 0 0 3px transparent; } }
@media (prefers-reduced-motion: reduce) { .ti-mtile.is-moved { animation: none; } }
.ti-mtile[hidden], .ti-mgroup[hidden], .ti-mgroup__empty[hidden] { display: none; }
.ti-mtile__link { display: block; width: 100%; height: 100%; }
.ti-mtile__link img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ti-mtile__pos { position: absolute; left: 5px; top: 4px; padding: 0 4px; border-radius: 3px; background: var(--ti-card); color: var(--ti-ink-2); font-family: var(--ti-font-mono); font-size: var(--ti-text-2xs); pointer-events: none; }
.ti-mtile__play { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--ti-card); color: var(--ti-ink); pointer-events: none; }
.ti-mtile__mark { position: absolute; left: 5px; bottom: 4px; padding: 0 5px; border-radius: 3px; background: var(--ti-card); color: var(--ti-primary); font-family: var(--ti-font-mono); font-size: var(--ti-text-2xs); pointer-events: none; }
.ti-mtile__suggest { position: absolute; left: 4px; right: 4px; bottom: 4px; padding: 0 4px; border: 1px dashed var(--ti-field-border); border-radius: 3px; background: var(--ti-card); color: var(--ti-ink-2); font-size: var(--ti-text-2xs); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.ti-mtile__dot { position: absolute; right: 5px; top: 5px; box-shadow: 0 0 0 2px var(--ti-card); pointer-events: none; }
.ti-mtile__check { display: none; position: absolute; right: 4px; top: 4px; width: 18px; height: 18px; margin: 0; accent-color: var(--ti-primary); }
.ti-media.is-bulk .ti-mtile__check { display: block; }
.ti-media.is-bulk .ti-mtile__dot { display: none; }
.ti-media.is-bulk .ti-mtile:has(.ti-mtile__check:checked) { box-shadow: 0 0 0 3px var(--ti-primary); }

/* Papierkorb. */
.ti-mtrash { padding: 0; }
.ti-mtrash__summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ti-space-2); padding: var(--ti-space-3) var(--ti-space-4); cursor: pointer; color: var(--ti-ink-2); }
.ti-mtrash__title { font-size: var(--ti-text-s); font-weight: 600; }
.ti-mtrash__count { font-family: var(--ti-font-mono); font-size: var(--ti-text-s); color: var(--ti-muted); }
.ti-mtrash__note { flex: 1 1 260px; font-size: var(--ti-text-s); color: var(--ti-muted); }
.ti-mtrash__empty { margin: 0; padding: 0 var(--ti-space-4) var(--ti-space-3); font-size: var(--ti-text-s); color: var(--ti-muted); }
.ti-mtrash__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ti-hairline-soft); }
.ti-mtrash__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ti-space-3); padding: var(--ti-space-2) var(--ti-space-4); border-bottom: 1px solid var(--ti-hairline-soft); }
.ti-mtrash__name { flex: 1 1 220px; font-family: var(--ti-font-mono); font-size: var(--ti-text-s); overflow-wrap: anywhere; }
.ti-mtrash__when { font-size: var(--ti-text-s); color: var(--ti-muted); }
.ti-mtrash__row form { margin: 0; }

/* The selected item. */
.ti-mdetail__preview { position: relative; aspect-ratio: 3 / 2; background: var(--ti-paper); display: flex; align-items: center; justify-content: center; }
.ti-mdetail__preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ti-mdetail__preview--video { background: var(--ti-dark); }
.ti-mdetail__badges { position: absolute; left: var(--ti-space-3); top: var(--ti-space-3); display: flex; flex-wrap: wrap; gap: 6px; }
.ti-mdetail__pos { position: absolute; right: var(--ti-space-3); top: var(--ti-space-3); padding: 2px 7px; border-radius: var(--ti-radius-s); background: var(--ti-card); font-family: var(--ti-font-mono); font-size: var(--ti-text-xs); color: var(--ti-ink-2); }
.ti-mdetail__body { display: flex; flex-direction: column; gap: var(--ti-space-3); padding: var(--ti-space-4); }
.ti-mdetail__body p { margin: 0; }
.ti-mdetail__suggestform { display: flex; align-items: center; gap: var(--ti-space-2); margin: 0; padding: 6px 8px 6px 10px; border: 1px dashed var(--ti-field-border); border-radius: var(--ti-radius-m); }
.ti-mdetail__suggest { flex: 1; font-size: var(--ti-text-s); color: var(--ti-ink-2); }
.ti-mdetail__set { display: flex; flex-direction: column; gap: var(--ti-space-2); margin: 0; padding: var(--ti-space-3) 0 0; border: 0; border-top: 1px solid var(--ti-hairline-soft); }
.ti-mdetail__legend { float: left; width: 100%; padding: 0; margin-bottom: 4px; font-size: var(--ti-text-s); font-weight: 600; }
.ti-mdetail__label { font-size: var(--ti-text-xs); color: var(--ti-muted); }
.ti-mdetail__hint { font-size: var(--ti-text-s); line-height: 1.4; color: var(--ti-ink-2); }
.ti-mdetail__set > form, .ti-mdetail__buttons form { margin: 0; }
.ti-mdetail__form { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ti-space-2); margin: 0; }
.ti-mdetail__form .ti-field { width: 100%; margin: 0; }
.ti-mdetail__buttons { display: flex; flex-wrap: wrap; gap: var(--ti-space-2); }


.ti-mgallery__titlebar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ti-space-2); }
.ti-mgallery__titlebar .ti-mhb__title { flex: 1; }
.ti-mgroup__suggestform { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 0; }
.ti-mgroup__suggest { font-size: var(--ti-text-xs); color: var(--ti-ink-2); }

/* Bereiche bearbeiten. */
#areas-dialog { width: min(680px, calc(100vw - 32px)); }
.ti-mareas__intro { margin: 0 0 var(--ti-space-3); font-size: var(--ti-text-s); line-height: 1.4; color: var(--ti-muted); }
.ti-mareas { margin: 0; padding: 0; list-style: none; }
.ti-mareas__row { display: flex; align-items: center; gap: var(--ti-space-2); padding: 6px 0; border-top: 1px solid var(--ti-hairline-soft); }
.ti-mareas__row.is-dragging { opacity: 0.4; }
.ti-mareas__grip { display: flex; align-items: center; justify-content: center; width: 28px; height: 36px; flex-shrink: 0; padding: 0; border: 0; border-radius: var(--ti-radius-s); background: transparent; color: var(--ti-muted); font: inherit; font-size: var(--ti-text-l); cursor: grab; }
.ti-mareas__grip:hover { background: var(--ti-paper); color: var(--ti-ink); }
.ti-mareas__grip:focus-visible { outline: none; box-shadow: var(--ti-focus-ring); }
.ti-mareas__fields { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--ti-space-2); }
.ti-mareas__fields .ti-field, .ti-mareas__new .ti-field { margin: 0; min-width: 0; }
.ti-mareas__fields .ti-field:first-of-type, .ti-mareas__new .ti-field:first-of-type { flex: 1; }
.ti-mareas__fields .ti-field + .ti-field, .ti-mareas__new .ti-field + .ti-field { flex: 0 0 150px; }
.ti-mareas__fields .ti-input, .ti-mareas__new .ti-input, .ti-mareas__fields .ti-select, .ti-mareas__new .ti-select { width: 100%; max-width: none; }
.ti-mareas__count { width: 76px; flex-shrink: 0; font-family: var(--ti-font-mono); font-size: var(--ti-text-xs); color: var(--ti-muted); text-align: right; }
.ti-mareas__nodelete { display: flex; align-items: center; justify-content: center; width: 32px; color: var(--ti-muted); }
.ti-mareas__new { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ti-space-2); margin: var(--ti-space-3) 0 0; padding: var(--ti-space-3) 0 0 36px; border-top: 1px solid var(--ti-hairline-soft); }

/* The Hauptgalerie chooser: Titelbild or one Vorschau. */
#pick-dialog { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); }
.ti-mpick__text { margin: 0 0 var(--ti-space-2); font-size: var(--ti-text-s); line-height: 1.4; color: var(--ti-ink-2); }
.ti-mpick__groups { display: flex; flex-wrap: wrap; gap: var(--ti-space-3) var(--ti-space-4); }
.ti-mpick__group { margin: 0 0 4px; font-size: var(--ti-text-xs); font-weight: 600; color: var(--ti-muted); }
.ti-mpick__grid { display: flex; flex-wrap: wrap; gap: 6px; }
.ti-mpick__tile { position: relative; width: 84px; height: 58px; padding: 0; overflow: hidden; border: 0; border-radius: var(--ti-radius-s); background: var(--ti-paper); cursor: pointer; }
.ti-mpick__tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ti-mpick__tile:hover img { opacity: 0.85; }
.ti-mpick__tile:disabled { opacity: 0.4; cursor: default; }
.ti-mpick__tile.is-current { opacity: 1; box-shadow: 0 0 0 3px var(--ti-primary); }
.ti-mpick__tile:focus-visible { outline: none; box-shadow: var(--ti-focus-ring); }
.ti-mpick__tag { position: absolute; left: 3px; bottom: 3px; padding: 0 4px; border-radius: 3px; background: var(--ti-card); color: var(--ti-ink-2); font-size: var(--ti-text-2xs); font-weight: 600; }

/* Video hinzufügen, as a dialog. */
#video-dialog { width: min(560px, calc(100vw - 32px)); }
#video-dialog .ti-field { margin: 0 0 var(--ti-space-3); }

/* The Zwischengalerie at one place. */
#zg-dialog { width: min(820px, calc(100vw - 32px)); max-height: calc(100vh - 48px); }
.ti-zg { display: flex; flex-direction: column; gap: var(--ti-space-3); }
.ti-zg__intro { margin: 0; font-size: var(--ti-text-s); color: var(--ti-muted); }
.ti-zg__forms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ti-zg__card { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1.5px solid var(--ti-hairline); border-radius: var(--ti-radius-l); background: var(--ti-card); color: var(--ti-ink); font: inherit; text-align: left; cursor: pointer; }
.ti-zg__card[aria-pressed="true"] { border-color: var(--ti-primary); background: var(--ti-primary-soft); }
.ti-zg__card:disabled { opacity: 0.55; cursor: default; }
.ti-zg__mock { display: flex; gap: 5px; height: 64px; padding: 7px; box-sizing: border-box; border-radius: var(--ti-radius-m); background: var(--ti-paper); }
.ti-zg__mock--pair, .ti-zg__mock--row, .ti-zg__mock--video { flex-direction: column; }
.ti-zg__mockpics { flex: 1; display: flex; gap: 3px; }
.ti-zg__mock--column .ti-zg__mockpics { flex: 0 0 34%; flex-direction: column; }
.ti-zg__mockpic { flex: 1; border-radius: 3px; background: var(--ti-hairline); }
.ti-zg__mock--video .ti-zg__mockpic { background: var(--ti-ink-2); }
.ti-zg__mocktext { flex: 1; border-radius: 3px; background: repeating-linear-gradient(to bottom, var(--ti-hairline) 0 4px, transparent 4px 9px); }
.ti-zg__mockline { display: block; width: 70%; height: 4px; border-radius: 2px; background: var(--ti-hairline); }
.ti-zg__cardname { font-size: var(--ti-text-s); font-weight: 600; }
.ti-zg__cardneeds { font-size: var(--ti-text-xs); line-height: 1.35; color: var(--ti-muted); }
.ti-zg__status { display: flex; align-items: flex-start; gap: 6px; font-size: var(--ti-text-xs); font-weight: 600; line-height: 1.35; }
.ti-zg__statusdot { width: 7px; height: 7px; flex-shrink: 0; margin-top: 4px; border-radius: 50%; background: currentColor; }
.ti-zg__status.is-ok { color: var(--ti-success-text); }
.ti-zg__status.is-blocked { color: var(--ti-warning-text); }
.ti-zg__status.is-other { color: var(--ti-muted); }
.ti-zg__content { display: flex; flex-direction: column; gap: var(--ti-space-3); padding: var(--ti-space-3); border: 1px solid var(--ti-hairline); border-radius: var(--ti-radius-l); }
.ti-zg__content[hidden] { display: none; }
.ti-zg__head { display: flex; align-items: flex-start; gap: var(--ti-space-3); }
.ti-zg__help { flex: 1; }
.ti-zg__title { margin: 0; font-size: var(--ti-text-s); font-weight: 600; color: var(--ti-ink-2); }
.ti-zg__hint { margin: 2px 0 0; font-size: var(--ti-text-xs); line-height: 1.4; color: var(--ti-muted); }
.ti-zg__seg { display: flex; flex-shrink: 0; overflow: hidden; border: 1px solid var(--ti-field-border); border-radius: var(--ti-radius-m); }
.ti-zg__segbtn { height: 30px; padding: 0 12px; border: 0; background: var(--ti-card); color: var(--ti-ink); font: inherit; font-size: var(--ti-text-s); font-weight: 600; cursor: pointer; }
.ti-zg__segbtn[aria-pressed="true"] { background: var(--ti-dark); color: var(--ti-card); }
.ti-zg__frames { display: flex; align-items: flex-end; gap: 10px; }
.ti-zg__frame { position: relative; flex-shrink: 0; width: 210px; height: 136px; padding: 0; overflow: hidden; border: 0; border-radius: var(--ti-radius-m); background: var(--ti-paper); cursor: grab; }
.ti-zg__frames--row3 .ti-zg__frame { width: 170px; height: 112px; }
.ti-zg__frames--row4 .ti-zg__frame { width: 128px; height: 90px; }
.ti-zg__frames--column .ti-zg__frame { width: 150px; height: 104px; }
.ti-zg__frames--video .ti-zg__frame { width: 320px; height: 170px; cursor: default; }
.ti-zg__frame img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ti-zg__frame.is-active { box-shadow: 0 0 0 3px var(--ti-primary); }
.ti-zg__frame.is-target { box-shadow: 0 0 0 3px var(--ti-dark); }
.ti-zg__frame.is-dragging { opacity: 0.4; }
.ti-zg__framelabel { position: absolute; left: 6px; top: 6px; padding: 1px 6px; border-radius: 4px; background: var(--ti-card); color: var(--ti-ink-2); font-size: var(--ti-text-xs); font-weight: 600; }
.ti-zg__grip { position: absolute; right: 6px; top: 6px; width: 20px; height: 18px; border-radius: 4px; background: var(--ti-card); color: var(--ti-muted); font-size: var(--ti-text-xs); line-height: 18px; text-align: center; }
.ti-zg__frameplay { position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; background: var(--ti-card); }
.ti-zg__frameplay::after { content: ""; position: absolute; left: 14px; top: 11px; border-left: 11px solid var(--ti-ink); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.ti-zg__picker { display: flex; flex-direction: column; gap: var(--ti-space-2); padding-top: var(--ti-space-3); border-top: 1px solid var(--ti-hairline-soft); }
.ti-zg__pickerhead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ti-zg__pickerhead .ti-zg__title { flex: 1; }
.ti-zg__pickerhead .ti-mfilter { height: 26px; padding: 0 10px; }
.ti-zg__grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.ti-zg__tile { position: relative; height: 54px; padding: 0; overflow: hidden; border: 0; border-radius: var(--ti-radius-s); background: var(--ti-paper); cursor: pointer; }
.ti-zg__tile img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ti-zg__tile:disabled { opacity: 0.4; cursor: default; }
.ti-zg__tile.is-active { box-shadow: 0 0 0 3px var(--ti-primary); }
.ti-zg__tile.is-placed { box-shadow: 0 0 0 2px var(--ti-field-border); }
.ti-zg__tag { position: absolute; left: 3px; bottom: 3px; padding: 0 4px; border-radius: 3px; background: var(--ti-card); color: var(--ti-ink-2); font-size: var(--ti-text-2xs); font-weight: 600; }
.ti-zg__text { display: flex; flex-direction: column; gap: var(--ti-space-2); padding-top: var(--ti-space-3); border-top: 1px solid var(--ti-hairline-soft); }
.ti-zg__pills { display: flex; flex-wrap: wrap; gap: 6px; }
.ti-zg__input { width: 100%; max-width: none; }
.ti-zg__quotes { display: flex; flex-direction: column; gap: 4px; }
.ti-zg__quote { display: flex; flex-direction: column; gap: 2px; padding: 7px 10px; border: 1px solid var(--ti-hairline); border-radius: var(--ti-radius-s); background: var(--ti-card); color: var(--ti-ink); font: inherit; text-align: left; cursor: pointer; }
.ti-zg__quote[aria-pressed="true"] { border-color: var(--ti-primary); background: var(--ti-primary-soft); }
.ti-zg__quotetext { font-size: var(--ti-text-s); line-height: 1.4; }
.ti-zg__quotewho { font-size: var(--ti-text-xs); color: var(--ti-muted); }

/* The selection bar, at the bottom while several are being picked. */
.ti-mbulk { position: sticky; bottom: var(--ti-space-4); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ti-space-2); width: fit-content; max-width: 100%; margin: var(--ti-space-4) auto 0; padding: 8px 10px 8px 16px; border-radius: var(--ti-radius-l); background: var(--ti-dark); color: var(--ti-card); box-shadow: var(--ti-shadow-m); }
.ti-mbulk[hidden] { display: none; }
.ti-mbulk .ti-field { margin: 0; }
.ti-mbulk__count { font-size: var(--ti-text-s); font-weight: 600; }
.ti-mbulk .ti-btn--ghost { color: var(--ti-card); }
.ti-mbulk .ti-btn--ghost:hover { background: var(--ti-dark-chip); }

@media (max-width: 1180px) {
  .ti-media__top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .ti-media__detail { position: static; max-width: none; }
  .ti-mgroup__head { width: 100%; }
  .ti-mzg__mini { display: none; }
  .ti-mhaupt__grid { grid-template-rows: 90px 90px; }
  .ti-mzg__thumb:nth-child(n+3) { display: none; }
  .ti-zg__forms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ti-zg__frames { flex-wrap: wrap; }
  .ti-zg__frame, .ti-zg__frames--row3 .ti-zg__frame, .ti-zg__frames--row4 .ti-zg__frame, .ti-zg__frames--column .ti-zg__frame, .ti-zg__frames--video .ti-zg__frame { width: calc(50% - 5px); height: 90px; }
  .ti-zg__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* One owner's page (eigentuemer-detail.php, plan 017d). */
.ti-owner-detail__none { margin-top: var(--ti-space-4); }
.ti-owner-detail__houses { display: flex; flex-direction: column; gap: var(--ti-space-2); margin: 0; padding: 0; list-style: none; }

/* The mail about a booking (plan 017d, PR C). */
.ti-bdetail__request-mail { margin: var(--ti-space-3) 0 0; }
.ti-bdetail__none { margin-top: var(--ti-space-4); }

/* E-Mail-Vorlagen (mail-templates.php, plan 017e): the list, the text, the
   preview. The current template is marked by its background and weight,
   never by a coloured edge (CLAUDE.md, "no decorative accents"). */
.ti-mtpl { display: grid; grid-template-columns: 250px minmax(0, 1fr) minmax(300px, 0.85fr); gap: var(--ti-space-5); align-items: start; }
.ti-mtpl__list { padding: var(--ti-space-2) 0; }
/* The two audiences: a hairline and space between them, and the heading in
   small spaced capitals, so it reads as a label and not as one more entry. */
.ti-mtpl__section { padding: var(--ti-space-3) 0 var(--ti-space-2); }
.ti-mtpl__section + .ti-mtpl__section { margin-top: var(--ti-space-2); border-top: 1px solid var(--ti-hairline); padding-top: var(--ti-space-4); }
.ti-mtpl__group { margin: 0 0 var(--ti-space-2); padding: 0 var(--ti-space-4); font-size: var(--ti-text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ti-muted); }
.ti-mtpl__items { margin: 0; padding: 0; list-style: none; }
.ti-mtpl__item { display: flex; align-items: center; gap: var(--ti-space-2); padding: 0 var(--ti-space-4) 0 0; }
.ti-mtpl__link { flex-grow: 1; min-width: 0; padding: 7px var(--ti-space-2) 7px var(--ti-space-4); color: var(--ti-ink); font-size: var(--ti-text-m); text-decoration: none; }
.ti-mtpl__link:hover { color: var(--ti-primary); text-decoration: underline; }
.ti-mtpl__link[aria-current="page"] { font-weight: 600; }
.ti-mtpl__item:has(.ti-mtpl__link[aria-current="page"]) { background: var(--ti-primary-soft); }
.ti-mtpl__link:focus-visible { outline: none; box-shadow: var(--ti-focus-ring); }
.ti-mtpl__none { padding: 7px var(--ti-space-4); color: var(--ti-muted); font-size: var(--ti-text-s); }
.ti-mtpl__langs { display: flex; gap: 4px; flex-shrink: 0; }
.ti-mtpl__lang { padding: 1px 5px; border: 1px solid var(--ti-hairline); border-radius: 4px; color: var(--ti-ink-2); font-family: var(--ti-font-mono); font-size: var(--ti-text-2xs); font-weight: 500; }
.ti-mtpl__main { min-width: 0; }
.ti-mtpl__head { display: flex; flex-direction: column; gap: 4px; margin: 0 0 var(--ti-space-3); }
.ti-mtpl__title { margin: 0; font-family: var(--ti-font-display); font-size: var(--ti-text-2xl); font-weight: 400; line-height: 1.15; color: var(--ti-ink); }
.ti-mtpl__meta { margin: 0; font-size: var(--ti-text-s); color: var(--ti-muted); }
.ti-mtpl__main .ti-views { margin-bottom: var(--ti-space-4); }
.ti-mtpl__missing-lang { margin: 0 0 var(--ti-space-4); color: var(--ti-ink-2); }
.ti-mtpl__insert { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: var(--ti-space-2); }
.ti-mtpl__insert-label { margin-right: 4px; color: var(--ti-muted); font-size: var(--ti-text-s); font-weight: 600; }
.ti-mtpl__chip { height: 26px; padding: 0 8px; border: 1px solid var(--ti-primary-tint-border); border-radius: var(--ti-radius-s); background: var(--ti-card); color: var(--ti-primary); font-family: var(--ti-font-mono); font-size: var(--ti-text-xs); cursor: pointer; }
.ti-mtpl__chip:hover { background: var(--ti-primary-soft); }
.ti-mtpl__chip:focus-visible { outline: none; box-shadow: var(--ti-focus-ring); }
.ti-mtpl__pick { margin: 0 0 var(--ti-space-3); }
.ti-mtpl__mail { padding: var(--ti-space-4); border: 1px solid var(--ti-hairline-soft); border-radius: var(--ti-radius-m); background: var(--ti-paper); }
.ti-mtpl__subject { margin: 0 0 var(--ti-space-3); font-weight: 600; overflow-wrap: anywhere; }
.ti-mtpl__subject:empty { display: none; }
.ti-mtpl__body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--ti-text-m); line-height: 1.6; }
.ti-mtpl__hole { padding: 0 3px; border-radius: 4px; background: var(--ti-warning-bg); color: var(--ti-warning-text); font-family: var(--ti-font-mono); font-size: var(--ti-text-s); }
.ti-mtpl__note { margin-top: var(--ti-space-3); }

@media (max-width: 1300px) {
  .ti-mtpl { grid-template-columns: 220px minmax(0, 1fr); }
  .ti-mtpl__preview { grid-column: 2; }
}
@media (max-width: 900px) {
  .ti-mtpl { grid-template-columns: minmax(0, 1fr); }
  .ti-mtpl__preview { grid-column: auto; }
}