/* teilefund.at – Bootstrap im Design-System + Basisklassen (03.10.2026)
   Lädt nach /assets/vendor/bootstrap/bootstrap.min.css und /css/tokens.css.
   Vorbilder: design/components/core/*.jsx (nur Maße/Farben übernommen, kein React). */

/* --- Bootstrap über seine CSS-Variablen einfärben --------------------------------- */
:root {
  --bs-primary: #1F7A6F;
  --bs-primary-rgb: 31, 122, 111;
  --bs-secondary: #E9B44C;
  --bs-secondary-rgb: 233, 180, 76;
  --bs-success: #1F7A6F;
  --bs-success-rgb: 31, 122, 111;
  --bs-warning: #B9861E;
  --bs-warning-rgb: 185, 134, 30;
  --bs-danger: #C4553B;
  --bs-danger-rgb: 196, 85, 59;
  --bs-dark: #2E3A3F;
  --bs-dark-rgb: 46, 58, 63;
  --bs-light: #F2F3EE;
  --bs-light-rgb: 242, 243, 238;

  --bs-body-bg: var(--bg-page);
  --bs-body-bg-rgb: 242, 243, 238;
  --bs-body-color: var(--text-primary);
  --bs-body-color-rgb: 46, 58, 63;
  --bs-body-font-family: var(--font-body);
  --bs-font-sans-serif: var(--font-body);
  --bs-font-monospace: var(--font-mono);
  --bs-body-font-size: var(--text-base);
  --bs-secondary-color: var(--text-secondary);
  --bs-tertiary-bg: var(--bg-sunken);
  --bs-border-color: var(--border-default);
  --bs-link-color: var(--text-link);
  --bs-link-color-rgb: 31, 122, 111;
  --bs-link-hover-color: var(--text-link-hover);
  --bs-link-hover-color-rgb: 46, 58, 63;
  --bs-focus-ring-color: rgba(42, 157, 143, .35);

  --bs-border-radius-sm: var(--radius-md);   /* 10 */
  --bs-border-radius: var(--radius-md);      /* 10 */
  --bs-border-radius-lg: var(--radius-lg);   /* 14 */
  --bs-border-radius-xl: var(--radius-xl);   /* 18 */
  --bs-border-radius-xxl: var(--radius-2xl); /* 24 */
}

body {
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}

.btn-primary {
  --bs-btn-bg: var(--action-primary);
  --bs-btn-border-color: var(--action-primary);
  --bs-btn-hover-bg: var(--action-primary-hover);
  --bs-btn-hover-border-color: var(--action-primary-hover);
  --bs-btn-active-bg: var(--action-primary-active);
  --bs-btn-active-border-color: var(--action-primary-active);
  --bs-btn-disabled-bg: var(--action-primary);
  --bs-btn-disabled-border-color: var(--action-primary);
}
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus);
}
.form-check-input:checked { background-color: var(--action-primary); border-color: var(--action-primary); }

/* --- Icons: Lucide-SVG als CSS-Maske, Farbe = currentColor --------------------------- */
.tf-icon {
  display: inline-block;
  flex: none;
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.25em;
  background-color: currentColor;
  -webkit-mask: var(--tf-icon) center / contain no-repeat;
  mask: var(--tf-icon) center / contain no-repeat;
}
.tf-icon-sm { width: 16px; height: 16px; }
.tf-icon-lg { width: 24px; height: 24px; }
.tf-icon-search { --tf-icon: url('/assets/icons/search.svg'); }
.tf-icon-heart { --tf-icon: url('/assets/icons/heart.svg'); }
.tf-icon-star { --tf-icon: url('/assets/icons/star.svg'); }
.tf-icon-tag { --tf-icon: url('/assets/icons/tag.svg'); }
.tf-icon-user { --tf-icon: url('/assets/icons/user.svg'); }
.tf-icon-plus { --tf-icon: url('/assets/icons/plus.svg'); }
.tf-icon-map-pin { --tf-icon: url('/assets/icons/map-pin.svg'); }
.tf-icon-x { --tf-icon: url('/assets/icons/x.svg'); }
.tf-icon-chevron-right { --tf-icon: url('/assets/icons/chevron-right.svg'); }
.tf-icon-arrow-right { --tf-icon: url('/assets/icons/arrow-right.svg'); }
.tf-icon-arrow-left { --tf-icon: url('/assets/icons/arrow-left.svg'); }
.tf-icon-camera { --tf-icon: url('/assets/icons/camera.svg'); }
.tf-icon-message-square { --tf-icon: url('/assets/icons/message-square.svg'); }
.tf-icon-handshake { --tf-icon: url('/assets/icons/handshake.svg'); }
.tf-icon-bell { --tf-icon: url('/assets/icons/bell.svg'); }
.tf-icon-share-2 { --tf-icon: url('/assets/icons/share-2.svg'); }
.tf-icon-badge-check { --tf-icon: url('/assets/icons/badge-check.svg'); }
.tf-icon-menu { --tf-icon: url('/assets/icons/menu.svg'); }
.tf-icon-sliders-horizontal { --tf-icon: url('/assets/icons/sliders-horizontal.svg'); }
.tf-icon-list { --tf-icon: url('/assets/icons/list.svg'); }
.tf-icon-layout-grid { --tf-icon: url('/assets/icons/layout-grid.svg'); }
.tf-icon-check-circle-2 { --tf-icon: url('/assets/icons/check-circle-2.svg'); }
.tf-icon-alert-triangle { --tf-icon: url('/assets/icons/alert-triangle.svg'); }
.tf-icon-info { --tf-icon: url('/assets/icons/info.svg'); }
.tf-icon-mail { --tf-icon: url('/assets/icons/mail.svg'); }
.tf-icon-phone { --tf-icon: url('/assets/icons/phone.svg'); }
.tf-icon-log-out { --tf-icon: url('/assets/icons/log-out.svg'); }
.tf-icon-pencil { --tf-icon: url('/assets/icons/pencil.svg'); }
.tf-icon-trash-2 { --tf-icon: url('/assets/icons/trash-2.svg'); }
.tf-icon-download { --tf-icon: url('/assets/icons/download.svg'); }
.tf-icon-eye { --tf-icon: url('/assets/icons/eye.svg'); }
.tf-icon-eye-off { --tf-icon: url('/assets/icons/eye-off.svg'); }
.tf-icon-image { --tf-icon: url('/assets/icons/image.svg'); }

/* --- Button (Button.jsx) ------------------------------------------------------------- */
.tf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--control-h-md);
  padding: 0 18px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: var(--action-primary);
  color: var(--text-on-brand);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.tf-btn:hover { background: var(--action-primary-hover); color: var(--text-on-brand); }
.tf-btn:active { background: var(--action-primary-active); }
.tf-btn:focus-visible { outline: 0; box-shadow: var(--shadow-focus); }
.tf-btn:disabled, .tf-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.tf-btn .tf-icon { width: 20px; height: 20px; }
.tf-btn-sm { height: var(--control-h-sm); padding: 0 12px; font-size: var(--text-sm); }
.tf-btn-sm .tf-icon { width: 16px; height: 16px; }
.tf-btn-lg { height: var(--control-h-lg); padding: 0 24px; font-size: var(--text-md); }
.tf-btn-secondary { background: var(--action-secondary); color: var(--text-on-accent); }
.tf-btn-secondary:hover { background: var(--action-secondary-hover); color: var(--text-on-accent); }
.tf-btn-outline { background: transparent; color: var(--text-primary); border-color: var(--border-strong); }
.tf-btn-outline:hover { background: var(--bg-sunken); color: var(--text-primary); }
.tf-btn-ghost { background: transparent; color: var(--text-link); }
.tf-btn-ghost:hover { background: var(--surface-brand-soft); color: var(--text-link); }
.tf-btn-danger { background: var(--status-danger); color: #fff; }
.tf-btn-danger:hover { background: #A84630; color: #fff; }
.tf-btn-block { width: 100%; }

/* --- Karte (ListingCard.jsx) ----------------------------------------------------------- */
.tf-karte {
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base);
}
a.tf-karte, .tf-karte-link { color: inherit; text-decoration: none; }
.tf-karte:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }

/* --- Tag / Chip (Tag.jsx) -------------------------------------------------------------- */
.tf-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-default);
  background: var(--surface-card);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  text-decoration: none;
}
.tf-tag.is-selected, .tf-tag[aria-pressed="true"] {
  border-color: var(--action-primary);
  background: var(--surface-brand-soft);
  color: var(--text-link);
}
.tf-tag .tf-icon { width: 14px; height: 14px; }

/* --- Badge (Badge.jsx) ----------------------------------------------------------------- */
.tf-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  background: var(--bg-sunken);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}
.tf-badge-brand { background: var(--surface-brand-soft); color: var(--text-link); }
.tf-badge-accent { background: var(--surface-accent); color: var(--text-on-accent); }
.tf-badge-success { background: var(--status-success-soft); color: var(--status-success); }
.tf-badge-warning { background: var(--status-warning-soft); color: var(--status-warning); }
.tf-badge-danger { background: var(--status-danger-soft); color: var(--status-danger); }
.tf-badge-inverse { background: var(--surface-inverse); color: var(--text-on-inverse); }
.tf-badge-mono { font-family: var(--font-mono); letter-spacing: .04em; }

/* --- Eingabe (Input.jsx) --------------------------------------------------------------- */
.tf-input {
  display: block;
  width: 100%;
  height: var(--control-h-md);
  padding: 0 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  background: var(--surface-card);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  transition: box-shadow var(--dur-fast);
}
textarea.tf-input { height: auto; min-height: 120px; padding: 10px 14px; }
.tf-input:focus { outline: 0; border-color: var(--border-focus); box-shadow: var(--shadow-focus); }
.tf-input.is-invalid, .tf-input[aria-invalid="true"] { border-color: var(--status-danger); }
.tf-label { display: block; margin-bottom: 6px; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-primary); }
.tf-feldfehler { margin-top: 6px; font-size: var(--text-xs); color: var(--status-danger); }
.tf-hinweis { margin-top: 6px; font-size: var(--text-xs); color: var(--text-muted); }

.tf-mono { font-family: var(--font-mono); }

/* --- Rahmen: Kopf (partials/kopf.php, Shell.jsx) ---------------------------------------- */
.tf-kopf {
  position: sticky;
  top: 0;
  z-index: 1020;
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-default);
}
.tf-kopf-innen {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: var(--container-max);
  height: 63px; /* + 1 px Linie = 64 px */
  margin: 0 auto;
  padding: 0 24px;
}
.tf-kopf-logo { display: flex; flex: none; order: 1; }
.tf-kopf-logo img { height: 30px; width: auto; }
.tf-kopf-suche { position: relative; flex: 1 1 0; min-width: 0; max-width: 480px; order: 2; }
.tf-kopf-suche .tf-icon { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: var(--text-muted); }
.tf-kopf-suche .tf-input { height: var(--control-h-sm); padding-left: 36px; font-size: var(--text-sm); }
.tf-kopf-nav { display: flex; align-items: center; gap: 6px; }
.tf-kopf-anbieten { margin-left: 6px; }
.tf-kopf-herz { position: relative; }
.tf-kopf-zaehler {
  position: absolute; top: 2px; right: 2px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--status-danger); color: #fff;
  font-size: 10px; line-height: 16px; text-align: center;
}
.tf-kopf-menueknopf { display: none; }
.tf-kopf .tf-btn-ghost { color: var(--text-primary); }
.tf-kopf .tf-btn-ghost:hover { color: var(--text-link); }

@media (min-width: 768px) {
  /* Reihenfolge wie im Mockup: Funde, So funktioniert’s, Merkliste, Mein Konto, Teil anbieten */
  .tf-kopf-menue, .tf-kopf-nav { display: contents; }
  .tf-kopf-menue:not(:has(.tf-kopf-suche))::before { content: ""; flex: 1; order: 2; }
  .tf-kopf-funde { order: 3; }
  .tf-kopf-so { order: 4; }
  .tf-kopf-herz { order: 5; }
  .tf-kopf-konto { order: 6; }
  .tf-kopf-anbieten { order: 7; }
  .tf-kopf-nur-menue { display: none; }
}

@media (max-width: 767.98px) {
  .tf-kopf-innen { gap: 4px; padding: 0 16px; }
  .tf-kopf-logo { margin-right: auto; }
  .tf-kopf-logo img { height: 26px; }
  .tf-kopf-herz { order: 2; }
  .tf-kopf-menueknopf { display: inline-flex; order: 3; }
  .tf-kopf-menue {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 16px;
    background: var(--surface-card);
    border-bottom: 1px solid var(--border-default);
    box-shadow: var(--shadow-md);
  }
  .tf-kopf-menue.is-offen { display: block; }
  .tf-kopf-suche { max-width: none; margin-bottom: 12px; }
  .tf-kopf-suche .tf-input { height: var(--control-h-md); font-size: var(--text-base); }
  .tf-kopf-nav { flex-direction: column; align-items: stretch; gap: 4px; }
  .tf-kopf-nav .tf-btn { justify-content: flex-start; height: var(--control-h-md); font-size: var(--text-base); }
  .tf-kopf-anbieten { margin: 8px 0 0; justify-content: center !important; }
}

/* --- Rahmen: Fuß (partials/fuss.php) ----------------------------------------------------- */
.tf-fuss {
  margin-top: var(--space-24);
  border-top: 1px solid var(--border-default);
  background: var(--surface-card);
  font-size: var(--text-sm);
}
.tf-fuss-innen {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 40px 24px;
}
.tf-fuss-marke img { height: 26px; width: auto; margin-bottom: 12px; }
.tf-fuss-marke p { margin: 0; max-width: 300px; color: var(--text-muted); line-height: 1.5; }
.tf-fuss-titel { margin: 0 0 10px; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.tf-fuss ul { margin: 0; padding: 0; list-style: none; }
.tf-fuss li { margin-bottom: 6px; }
.tf-fuss a { color: var(--text-muted); text-decoration: none; }
.tf-fuss a:hover { color: var(--text-link); text-decoration: underline; }

@media (max-width: 767.98px) {
  .tf-fuss-innen { grid-template-columns: 1fr; gap: 24px; padding: 32px 16px; }
}

/* --- Seitenkopf in den Seiten (Titel + Aktionen, ersetzt tf_header.php) ------------------ */
.tf-seitenkopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.tf-seitenkopf h1 { margin: 0; font-size: var(--text-xl); font-weight: var(--weight-bold); }
.tf-seitenkopf-aktionen { display: flex; flex-wrap: wrap; gap: 8px; }
.tf-seitenkopf > p { order: 3; }

/* --- Label in Mono-Großbuchstaben (Startseite, Abschnitte) ------------------------------ */
.tf-label-mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-link);
}
.tf-label-senf { color: var(--tf-senf); }

/* --- Karte eines Teils (partials/teil-karte.php, ListingCard.jsx) ----------------------- */
.tf-teil-karte { position: relative; min-width: 0; }
.tf-teil-karte-bild {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--bg-sunken);
}
.tf-teil-karte-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tf-teil-karte-bild.is-leer { background: repeating-linear-gradient(135deg, var(--bg-sunken) 0 8px, var(--bg-page) 8px 16px); }
.tf-teil-karte-platzhalter { position: absolute; left: 10px; bottom: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.tf-teil-karte-zustand { position: absolute; left: 10px; top: 10px; }
/* Herz der Merkliste (T12): über dem Kartenlink, Rost wenn gemerkt */
.tf-merken {
  position: absolute; right: 10px; top: 10px; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--surface-card); box-shadow: var(--shadow-sm);
  color: var(--text-primary); cursor: pointer;
}
.tf-merken .tf-icon { width: 16px; height: 16px; }
.tf-merken:focus-visible { outline: 0; box-shadow: var(--shadow-focus); }
.tf-merken[aria-pressed="true"] { color: var(--tf-rost); }
.tf-teil-karte-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 16px 16px; }
.tf-teil-karte-titel {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
/* Ganze Karte klickbar: der Titel-Link spannt sich über die Karte */
.tf-teil-karte .tf-karte-link::after { content: ""; position: absolute; inset: 0; }
.tf-teil-karte .tf-karte-link:focus-visible { outline: 0; }
.tf-teil-karte:has(.tf-karte-link:focus-visible) { box-shadow: var(--shadow-focus); }
.tf-teil-karte-preis { font-size: var(--text-lg); font-weight: var(--weight-bold); }
.tf-teil-karte-ort { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--text-sm); color: var(--text-muted); }
.tf-teil-karte-ort .tf-icon { width: 14px; height: 14px; }
.tf-teil-karte-ort span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Startseite (index.php, Startseite.jsx) -------------------------------------------- */
.tf-start-abschnitt { max-width: var(--container-max); margin: 0 auto; padding: 80px 24px 0; }
.tf-start-abschnitt h2 { margin: 0 0 24px; font-size: var(--text-2xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display); }
.tf-start-hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 32px;
  padding-top: 48px;
}
.tf-start-hero-text { display: flex; flex-direction: column; justify-content: center; gap: 24px; min-width: 0; padding: 24px 0; }
.tf-start-hero h1 {
  margin: 0;
  font-size: var(--text-4xl);
  font-weight: var(--weight-semibold);
  line-height: 1.05;
  letter-spacing: var(--tracking-display);
  text-wrap: pretty;
}
.tf-start-lead { margin: 0; max-width: 460px; font-size: var(--text-md); line-height: var(--leading-normal); color: var(--text-secondary); }
.tf-start-suche { display: flex; gap: 10px; max-width: 560px; }
.tf-start-suchfeld { position: relative; flex: 1; min-width: 0; }
.tf-start-suchfeld .tf-icon { position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: var(--text-muted); }
.tf-start-suchfeld .tf-input { height: var(--control-h-lg); padding-left: 46px; font-size: var(--text-md); }
.tf-start-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tf-start-chips .tf-tag:hover { border-color: var(--action-primary); color: var(--text-link); }
/* Bildfläche: Papier-2 mit Kistenraster (bis ein Foto aus design/assets/mood/ vorliegt) */
.tf-start-bild {
  position: relative;
  min-height: 420px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background-color: var(--tf-papier-2);
  background-image:
    repeating-linear-gradient(0deg, transparent 0 70px, var(--tf-linie) 70px 72px),
    repeating-linear-gradient(90deg, transparent 0 70px, var(--tf-linie) 70px 72px);
}
/* Vorarlberg-Karte (partials/karte-vorarlberg.php) statt Kistenraster; ein Stimmungsfoto hätte keinen Vorrang */
.tf-start-karte {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 8px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  overflow: visible;
}
.tf-karte-svg { display: block; width: 100%; max-width: 420px; height: auto; overflow: visible; }
.tf-karte-bezirk { fill: var(--bg-sunken); stroke: var(--border-strong); stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.tf-karte-namen text {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-anchor: middle;
  fill: var(--text-muted);
  pointer-events: none;
}
.tf-karte-ort { cursor: pointer; outline: none; }
.tf-karte-ort, .tf-karte-ort text { text-decoration: none; }
.tf-karte-marker { fill: var(--tf-tuerkis); stroke: var(--surface-card); stroke-width: 2px; }
.tf-karte-ort:hover .tf-karte-marker, .tf-karte-ort:focus-visible .tf-karte-marker { stroke: var(--text-primary); }
.tf-karte-info { visibility: hidden; pointer-events: none; }
.tf-karte-ort:hover .tf-karte-info, .tf-karte-ort:focus .tf-karte-info { visibility: visible; }
.tf-karte-info rect { fill: var(--surface-card); stroke: var(--border-strong); stroke-width: 1px; }
.tf-karte-info-ort { font-family: var(--font-display); font-size: 15px; font-weight: 600; fill: var(--text-primary); }
.tf-karte-info-anzahl { font-family: var(--font-mono); font-size: 13px; fill: var(--text-secondary); }
.tf-start-plakette {
  position: absolute;
  left: 20px;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--surface-card);
  box-shadow: var(--shadow-md);
  font-size: var(--text-sm);
}
.tf-start-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--tf-tuerkis); }
.tf-start-neu { padding-top: 72px; }
.tf-start-kopfzeile { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.tf-start-kopfzeile h2 { margin: 0; }
.tf-start-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tf-start-leer { color: var(--text-muted); }
.tf-start-schritte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.tf-start-schritt {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
}
.tf-start-schritt-kopf { display: flex; align-items: center; justify-content: space-between; }
.tf-start-schritt-icon {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: var(--surface-brand-soft);
  color: var(--text-link);
}
.tf-start-schritt-icon .tf-icon { width: 22px; height: 22px; }
.tf-start-schritt-nr { font-size: var(--text-sm); color: var(--text-muted); }
.tf-start-schritt h3 { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.tf-start-schritt p { margin: 0; font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text-secondary); }
.tf-start-betriebe {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
  align-items: center;
  padding: 56px;
  border-radius: var(--radius-2xl);
  background: var(--surface-inverse);
  color: var(--text-on-inverse);
  overflow: hidden;
}
.tf-start-betriebe-text { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.tf-start-betriebe h2 { margin: 0; font-size: var(--text-3xl); line-height: var(--leading-tight); }
.tf-start-betriebe p { margin: 0; max-width: 480px; font-size: var(--text-md); line-height: var(--leading-normal); opacity: .85; }
.tf-start-betriebe-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.tf-btn-auf-dunkel { color: var(--text-on-inverse); border-color: rgba(242, 243, 238, .4); }
.tf-btn-auf-dunkel:hover { background: rgba(242, 243, 238, .1); color: var(--text-on-inverse); }
.tf-start-betriebe-zeichen { justify-self: end; width: 220px; height: auto; opacity: .9; }

@media (max-width: 991.98px) {
  .tf-start-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tf-start-hero h1 { font-size: var(--text-3xl); }
}
@media (max-width: 767.98px) {
  .tf-start-abschnitt { padding: 56px 16px 0; }
  .tf-start-hero { grid-template-columns: minmax(0, 1fr); padding-top: 24px; gap: 16px; }
  .tf-start-hero-text { padding: 0; }
  .tf-start-bild { min-height: 220px; }
  .tf-start-karte { min-height: 0; }
  .tf-karte-svg { max-width: none; }
  .tf-start-raster, .tf-start-schritte { grid-template-columns: minmax(0, 1fr); }
  .tf-start-betriebe { grid-template-columns: minmax(0, 1fr); padding: 32px 24px; }
  .tf-start-betriebe h2 { font-size: var(--text-2xl); }
  .tf-start-betriebe-zeichen { display: none; }
}
@media (max-width: 479.98px) {
  .tf-start-suche { flex-direction: column; }
}

/* --- Suche (suche.php, Suche.jsx) ------------------------------------------------------- */
.tf-suche {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 32px 24px 64px;
}
.tf-suche-filter { position: sticky; top: 88px; }
.tf-suche-filter-form { display: flex; flex-direction: column; gap: 24px; }
.tf-suche-filter-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tf-suche-filter-kopf h2 { margin: 0; font-size: var(--text-base); font-weight: var(--weight-semibold); }
.tf-suche-gruppe { min-width: 0; margin: 0; padding: 0; border: 0; }
.tf-suche-gruppe-titel {
  display: block;
  float: none;
  width: auto;
  margin: 0 0 10px;
  padding: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.tf-suche-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tf-suche-chips .tf-tag { cursor: pointer; }
.tf-suche-chips-hinweis { margin: -4px 0 10px; }
.tf-suche-chip { display: inline-flex; align-items: center; gap: 4px; }
.tf-suche-nur-diese {
  padding: 2px 6px;
  border: 0;
  background: none;
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-decoration: underline;
  cursor: pointer;
}
.tf-suche-nur-diese:hover, .tf-suche-nur-diese:focus-visible { color: var(--text-primary); }
.tf-suche-kategorien-anzahl { font-size: var(--text-sm); color: var(--text-muted); }
.tf-suche-preis { display: flex; gap: 8px; }
.tf-suche-preis .tf-input { min-width: 0; }
.tf-suche-umkreis { display: flex; gap: 8px; }
.tf-suche-umkreis .tf-input { min-width: 0; flex: 1 1 0; }
.tf-suche-umkreis select.tf-input { flex: 0 0 104px; }
.tf-suche-plz-fehler { color: var(--status-danger); }
.tf-suche-plz-fehler:empty { display: none; }
.tf-suche-standort { margin-top: 8px; padding-left: 0; padding-right: 0; }
.tf-suche-sheet-zu, .tf-suche-sheet-fuss, .tf-suche-filterknopf { display: none; }
.tf-suche-hintergrund { position: fixed; inset: 0; z-index: 1040; background: rgba(46, 58, 63, .4); }

.tf-suche-ergebnis { min-width: 0; }
.tf-suche-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 6px; }
.tf-suche-kopf h1 { margin: 0; font-size: var(--text-2xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display); }
.tf-suche-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.tf-suche-aktiv { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.tf-suche-aktiv .tf-tag { cursor: pointer; }
.tf-suche-leiste-rechts { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.tf-suche-sortierung { width: 200px; height: var(--control-h-sm); font-size: var(--text-sm); }
.tf-suche-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tf-suche-leer {
  padding: 48px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  text-align: center;
  color: var(--text-secondary);
}
.tf-suche-leer p { margin: 0 0 16px; }
.tf-suche-fehler { grid-column: 1 / -1; color: var(--status-danger); }
.tf-suche-mehr { display: flex; justify-content: center; margin-top: 32px; }
/* Suchauftrag (T18): Hinweis unter den Ergebnissen – nicht doppelt neben dem Leerzustand */
.tf-suche-auftrag { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 32px; color: var(--text-secondary); text-align: center; }
.tf-suche-auftrag p { margin: 0; }
.tf-suche-leer:not([hidden]) ~ .tf-suche-auftrag { display: none; }
.tf-suchauftrag-eingabe { display: flex; flex-direction: column; gap: 14px; }
.tf-suchauftrag-eingabe[hidden] { display: none; }
.tf-suchauftrag-eingabe p { margin: 0; }
.tf-suchauftrag-filter { padding: 10px 12px; border-radius: var(--radius-md); background: var(--bg-page); color: var(--text-primary); font-weight: var(--weight-medium); }

/* Umschalter Karten | Liste und Listenansicht (T9) */
.tf-suche-ansicht { display: inline-flex; border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; }
.tf-suche-ansicht-knopf {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--control-h-sm); height: calc(var(--control-h-sm) - 2px);
  border: 0; background: var(--surface-card); color: var(--text-secondary); cursor: pointer;
}
.tf-suche-ansicht-knopf + .tf-suche-ansicht-knopf { border-left: 1px solid var(--border-default); }
.tf-suche-ansicht-knopf[aria-pressed="true"] { background: var(--surface-brand-soft); color: var(--text-link); }
.tf-liste {
  overflow-x: auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
}
.tf-liste-tabelle { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); }
.tf-liste-tabelle th, .tf-liste-tabelle td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-default);
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
  background: var(--surface-card);
}
.tf-liste-tabelle tbody tr:last-child td { border-bottom: 0; }
.tf-liste-tabelle td:nth-child(2) { white-space: normal; min-width: 220px; }
.tf-liste-tabelle th {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.tf-liste-tabelle .tf-liste-zahl { text-align: right; }
.tf-liste-sortieren { padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.tf-liste-sortieren::after { content: ""; display: inline-block; width: 1em; }
th[aria-sort="ascending"] .tf-liste-sortieren::after { content: " ↑"; }
th[aria-sort="descending"] .tf-liste-sortieren::after { content: " ↓"; }
th[aria-sort="ascending"], th[aria-sort="descending"] { color: var(--text-link); }
/* Erste Spalte bleibt beim waagrechten Scrollen stehen */
.tf-liste-tabelle th:first-child, .tf-liste-tabelle td:first-child {
  position: sticky; left: 0; z-index: 1;
  border-right: 1px solid var(--border-default);
}

/* Unter 992 px: Filter als Sheet von unten */
@media (max-width: 991.98px) {
  .tf-suche { grid-template-columns: minmax(0, 1fr); padding: 24px 16px 48px; }
  .tf-suche-filter {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 1045;
    max-height: 85vh;
    overflow-y: auto;
    padding: 20px 16px 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    background: var(--surface-card);
    box-shadow: var(--shadow-lg);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
  }
  .tf-suche-filter.is-offen { transform: none; visibility: visible; transition: transform var(--dur-base) var(--ease-out); }
  .tf-suche-sheet-zu, .tf-suche-filterknopf { display: inline-flex; }
  .tf-suche-sheet-fuss { display: block; position: sticky; bottom: 0; padding: 12px 0 16px; background: var(--surface-card); }
  .tf-suche-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .tf-suche-raster { grid-template-columns: minmax(0, 1fr); }
  .tf-suche-sortierung { width: 170px; }
  .tf-suche-leiste-rechts { flex-wrap: wrap; justify-content: flex-end; }
  .tf-suche-leer { padding: 32px 16px; }
}

/* --- Kategorie-Seite (kategorie.php unter /kategorie/…, T47) --------------------------- */
.tf-kategorie { max-width: var(--container-max); margin: 0 auto; padding: 24px 24px 64px; }
.tf-kategorie-kopf { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-width: 760px; margin-bottom: 28px; }
.tf-kategorie-ober { font-size: var(--text-sm); color: var(--text-muted); }
.tf-kategorie-ober:hover { color: var(--text-link); }
.tf-kategorie-kopf h1 { margin: 0; font-size: var(--text-2xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display); overflow-wrap: anywhere; }
.tf-kategorie-text { margin: 0; color: var(--text-secondary); }
.tf-kategorie-zeile { margin: 0; font-weight: var(--weight-medium); color: var(--text-primary); }
.tf-kategorie-unter { display: flex; flex-wrap: wrap; gap: 8px; }
.tf-kategorie-unter-zahl { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-xs); }
.tf-seiten { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-top: 32px; }
.tf-seiten-nr {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--control-h-sm); height: var(--control-h-sm); padding: 0 8px;
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--surface-card); color: var(--text-primary); text-decoration: none; font-size: var(--text-sm);
}
.tf-seiten-nr:hover { border-color: var(--border-strong); }
.tf-seiten-nr.is-aktiv { border-color: var(--action-primary); background: var(--surface-brand-soft); color: var(--text-link); font-weight: var(--weight-semibold); }
.tf-seiten-luecke { color: var(--text-muted); padding: 0 4px; }
@media (max-width: 575.98px) {
  .tf-kategorie { padding: 20px 16px 48px; }
}

/* --- Teil-Seite (artikel.php unter /teil/…, Inserat.jsx) ------------------------------- */
.tf-teil { max-width: var(--container-max); margin: 0 auto; padding: 24px 24px 72px; }
.tf-brotkrumen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 20px; font-size: var(--text-sm); color: var(--text-muted); min-width: 0; }
.tf-brotkrumen .tf-icon { width: 14px; height: 14px; }
.tf-brotkrumen a { color: var(--text-muted); }
.tf-brotkrumen a:hover { color: var(--text-link); }
.tf-brotkrumen [aria-current] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
/* Desktop: Galerie und Details links, rechte Spalte sticky; mobil: Galerie, rechte Spalte, Details */
.tf-teil-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  grid-template-areas: "galerie seite" "details seite";
  grid-template-rows: auto 1fr;
  gap: 0 32px;
  align-items: start;
}
.tf-teil-galerie { grid-area: galerie; min-width: 0; }
.tf-teil-seite { grid-area: seite; position: sticky; top: 88px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tf-teil-details { grid-area: details; min-width: 0; }
.tf-teil-bild { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-xl); background: var(--bg-sunken); }
.tf-teil-bild img { display: block; width: 100%; height: 100%; object-fit: contain; }
.tf-teil-bild.is-leer { background: repeating-linear-gradient(135deg, var(--bg-sunken) 0 10px, var(--bg-page) 10px 20px); }
.tf-teil-bild-platzhalter { position: absolute; left: 16px; bottom: 12px; right: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.tf-teil-bild-badge { position: absolute; left: 16px; top: 16px; }
.tf-teil-bild-zaehler { position: absolute; right: 12px; bottom: 12px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--surface-inverse); color: var(--text-on-inverse); font-size: var(--text-xs); }
.tf-teil-vorschau { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.tf-teil-vorschau-knopf { aspect-ratio: 4 / 3; padding: 0; overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-sunken); opacity: .7; cursor: pointer; }
.tf-teil-vorschau-knopf img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tf-teil-vorschau-knopf[aria-current="true"] { border: 2px solid var(--action-primary); opacity: 1; }
.tf-teil-vorschau-knopf:focus-visible { outline: 0; box-shadow: var(--shadow-focus); }
.tf-teil-details h2 { margin: 32px 0 12px; font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.tf-teil-liste { display: grid; grid-template-columns: 180px minmax(0, 1fr); row-gap: 10px; margin: 0; padding-top: 14px; border-top: 1px solid var(--border-default); }
.tf-teil-liste dt { font-weight: var(--weight-regular); color: var(--text-muted); }
.tf-teil-liste dd { margin: 0; font-weight: var(--weight-medium); overflow-wrap: anywhere; }
.tf-teil-beschreibung { max-width: 640px; margin: 0; line-height: 1.6; color: var(--text-secondary); overflow-wrap: anywhere; }
.tf-teil-box { display: flex; flex-direction: column; gap: 16px; padding: 24px; border: 1px solid var(--border-default); border-radius: var(--radius-xl); background: var(--surface-card); }
.tf-teil-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.tf-teil-titel { margin: 0; font-size: var(--text-xl); font-weight: var(--weight-semibold); line-height: 1.25; letter-spacing: -.01em; overflow-wrap: anywhere; }
.tf-teil-preis { display: flex; align-items: baseline; gap: 8px; }
.tf-teil-preis > span:first-child { font-size: var(--text-2xl); font-weight: var(--weight-bold); }
.tf-teil-preis-zusatz { font-size: var(--text-sm); color: var(--text-muted); }
.tf-teil-ort { display: flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--text-secondary); }
.tf-teil-ort .tf-icon { width: 16px; height: 16px; }
.tf-teil-aktionen { display: flex; flex-wrap: wrap; gap: 8px; }
.tf-teil-aktionen .tf-btn-block { flex: 1; min-width: 0; }
/* Preis vorschlagen (T41): eigene Zeile unter Anfrage/Merken/Teilen */
.tf-teil-aktionen .tf-teil-vorschlag { order: 1; flex: 1 0 100%; }
.tf-teil-iconknopf { flex: none; width: var(--control-h-lg); padding: 0; }
.tf-teil-iconknopf[aria-pressed="true"] { color: var(--tf-rost); border-color: var(--tf-rost); }
.tf-teil-hinweis { margin: 0; font-size: var(--text-xs); line-height: 1.5; color: var(--text-muted); }
.tf-teil-betrieb { flex-direction: row; align-items: center; gap: 14px; padding: 20px; }
.tf-teil-betrieb-kuerzel { display: flex; flex: none; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--surface-brand-soft); color: var(--text-link); font-weight: var(--weight-bold); }
.tf-teil-betrieb-text { flex: 1; min-width: 0; }
.tf-teil-betrieb-name { font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.tf-teil-betrieb-info { font-size: var(--text-sm); color: var(--text-muted); }
.tf-teil-betrieb > .tf-icon { width: 20px; height: 20px; color: var(--text-link); }
.tf-teil-abholung { gap: 12px; padding: 20px; }
.tf-teil-abholung-titel { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-secondary); }
.tf-teil-abholung-adresse { margin: 0; font-style: normal; line-height: 1.5; }
.tf-teil-passt { margin-top: 72px; }
.tf-teil-passt-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 20px; }
.tf-teil-passt-kopf h2 { margin: 0; font-size: var(--text-xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display); }
.tf-teil-passt-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tf-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 1080;
  max-width: calc(100vw - 32px); padding: 12px 18px; transform: translateX(-50%);
  border-radius: var(--radius-lg); background: var(--surface-inverse); color: var(--text-on-inverse);
  box-shadow: var(--shadow-lg); font-size: var(--text-sm);
}
.tf-toast[hidden] { display: none; }
@media (max-width: 991.98px) {
  .tf-teil-raster { grid-template-columns: minmax(0, 1fr); grid-template-areas: "galerie" "seite" "details"; grid-template-rows: none; }
  .tf-teil-seite { position: static; margin-top: 24px; }
  .tf-teil-passt-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .tf-teil { padding: 16px 16px 48px; }
  .tf-teil-liste { grid-template-columns: 130px minmax(0, 1fr); }
  .tf-teil-passt-raster { grid-template-columns: minmax(0, 1fr); }
  .tf-teil-box { padding: 20px; }
}

/* Dialog (Dialog.jsx) und Anfrage-Dialog der Teil-Seite (T13) */
.tf-dialog-hintergrund {
  position: fixed; inset: 0; z-index: 1060;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(46, 58, 63, .6);
}
.tf-dialog-hintergrund[hidden] { display: none; }
.tf-dialog {
  display: flex; flex-direction: column;
  width: 100%; max-width: 560px; max-height: calc(100vh - 48px); overflow: hidden;
  border-radius: var(--radius-2xl); background: var(--surface-card); box-shadow: var(--shadow-lg);
}
.tf-dialog > form { display: flex; flex-direction: column; min-height: 0; }
.tf-dialog-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px 0; }
.tf-dialog-kopf h2 { margin: 0; font-size: var(--text-xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display); }
.tf-dialog-inhalt { display: flex; flex-direction: column; gap: 14px; padding: 16px 24px 24px; overflow-y: auto; color: var(--text-secondary); }
.tf-dialog-fuss { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--border-default); background: var(--bg-page); }
.tf-anfrage-teil { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--radius-md); background: var(--bg-page); font-size: var(--text-sm); }
.tf-anfrage-teil-bild { flex: none; width: 56px; height: 42px; border-radius: 6px; object-fit: cover; }
.tf-anfrage-teil-bild.is-leer { background: repeating-linear-gradient(135deg, var(--bg-sunken) 0 6px, var(--surface-card) 6px 12px); }
.tf-anfrage-teil-titel { font-weight: var(--weight-semibold); color: var(--text-primary); overflow-wrap: anywhere; }
.tf-anfrage-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tf-anfrage-felder .tf-feld-breit { grid-column: 1 / -1; }
.tf-anfrage-falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.tf-anfrage-hinweis { margin: 0; font-size: var(--text-xs); line-height: 1.5; color: var(--text-muted); }
@media (max-width: 575.98px) {
  .tf-dialog-hintergrund { align-items: flex-end; padding: 0; }
  .tf-dialog { max-height: 92vh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  .tf-anfrage-felder { grid-template-columns: minmax(0, 1fr); }
}
body.tf-dialog-offen { overflow: hidden; }

/* Merkliste (T12) */
.tf-merkliste { max-width: var(--container-max); margin: 0 auto; padding: 32px 24px 64px; }
.tf-merkliste-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 20px; }
.tf-merkliste-kopf h1 { margin: 0; font-size: var(--text-2xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display); }
.tf-merkliste-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tf-teil-karte.is-weg .tf-teil-karte-bild, .tf-teil-karte.is-weg .tf-teil-karte-titel { opacity: .5; }
.tf-teil-karte-weg { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-muted); }
.tf-teil-karte.is-weg .tf-btn { align-self: flex-start; }
@media (max-width: 991.98px) { .tf-merkliste-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) {
  .tf-merkliste { padding: 24px 16px 48px; }
  .tf-merkliste-raster { grid-template-columns: minmax(0, 1fr); }
}

/* Firmenbereich: Tabs, Anfragen, Verkauft (T14) */
.tf-tabs { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--border-default); overflow-x: auto; }
.tf-tab {
  flex: none; padding: 10px 14px; margin-bottom: -1px; border-bottom: 2px solid transparent;
  color: var(--text-secondary); font-weight: var(--weight-medium); text-decoration: none; white-space: nowrap;
}
.tf-tab:hover { color: var(--text-primary); }
.tf-tab[aria-current="page"] { border-bottom-color: var(--text-link); color: var(--text-link); font-weight: var(--weight-semibold); }
.tf-firma-leer { color: var(--text-muted); }
.tf-anfrage {
  display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; padding: 20px;
  border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-card);
}
.tf-anfrage.is-offen { border-left: 4px solid var(--status-warning); }
/* Preisvorschlag (T41): Betrag hervorgehoben */
.tf-anfrage-vorschlag { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 10px 12px;
  border-radius: var(--radius-md); background: var(--surface-brand-soft); color: var(--text-primary); }
.tf-anfrage-vorschlag strong { font-size: var(--text-lg); }
.tf-anfrage-vorschlag-preis { font-size: var(--text-xs); color: var(--text-muted); }
.tf-anfrage-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tf-anfrage-teil-link { font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.tf-anfrage-datum { margin-left: auto; font-size: var(--text-xs); color: var(--text-muted); }
.tf-anfrage-daten { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: var(--text-sm); }
.tf-anfrage-daten dt { font-weight: var(--weight-medium); color: var(--text-muted); }
.tf-anfrage-daten dd { margin: 0; overflow-wrap: anywhere; }
.tf-anfrage-nachricht { margin: 0; white-space: normal; overflow-wrap: anywhere; }
.tf-anfrage-aktionen { display: flex; flex-wrap: wrap; gap: 8px; }
.tf-verkauft-tabelle tfoot th, .tf-verkauft-tabelle tfoot td { font-weight: var(--weight-semibold); }

/* --- Konto: Anmelden, Registrieren, Passwort (T15) --------------------------------------- */
.tf-konto { max-width: 560px; margin: 0 auto; padding: var(--space-8) 16px; }
.tf-konto-karte {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--space-8);
}
.tf-konto-karte h1 { margin: 0 0 8px; font-size: var(--text-xl); font-weight: var(--weight-bold); }
.tf-konto-text { margin: 0 0 var(--space-6); color: var(--text-secondary); }
.tf-konto-form { display: flex; flex-direction: column; gap: 16px; }
.tf-konto-form .tf-btn-block { margin-top: 8px; }
.tf-konto-reihe { display: grid; grid-template-columns: 120px 1fr; gap: 12px; }
.tf-konto-meldung { margin: 0 0 var(--space-6); padding: 12px 14px; border-radius: var(--radius-md); font-size: var(--text-sm); }
.tf-konto-meldung p { margin: 0 0 10px; }
.tf-konto-meldung-ok { background: var(--status-success-soft); color: var(--status-success); }
.tf-konto-meldung-fehler { background: var(--status-danger-soft); color: var(--status-danger); }
.tf-konto-meldung a { color: inherit; text-decoration: underline; }
.tf-konto-unten { margin: 16px 0 0; text-align: center; font-size: var(--text-sm); }
.tf-konto-hinweis { background: var(--status-warning-soft); color: var(--text-primary); }
.tf-konto-abschnitt { margin: var(--space-6) 0 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.tf-konto-abschnitt + .tf-konto-text { margin: -8px 0 0; font-size: var(--text-sm); }
.tf-passwort { position: relative; }
.tf-passwort .tf-input { padding-right: 48px; }
.tf-passwort-zeigen {
  position: absolute; top: 0; right: 0; bottom: 0; width: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--text-muted); border-radius: var(--radius-md);
}
.tf-passwort-zeigen:focus-visible { outline: 0; box-shadow: var(--shadow-focus); }
.tf-passwort-zeigen .tf-icon { width: 20px; height: 20px; }

@media (max-width: 575.98px) {
  .tf-konto { padding: var(--space-6) 12px; }
  .tf-konto-karte { padding: var(--space-6) 16px; }
}

/* --- Teil anbieten / bearbeiten (T16) ---------------------------------------------------- */
.tf-teilform-seite { max-width: 760px; margin: 0 auto; padding: var(--space-8) 16px 64px; }
.tf-teilform { display: flex; flex-direction: column; gap: 20px; }
.tf-teilform-abschnitt {
  display: flex; flex-direction: column; gap: 16px; padding: var(--space-6);
  border: 1px solid var(--border-default); border-radius: var(--radius-xl);
  background: var(--surface-card); box-shadow: var(--shadow-sm);
}
.tf-teilform-abschnitt h2 { margin: 0; font-size: var(--text-md); font-weight: var(--weight-semibold); }
.tf-teilform-abschnitt > .tf-hinweis { margin: 0; }
.tf-teilform-reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tf-teilform-reihe-3 { grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr); }
.tf-teilform-preis { display: grid; grid-template-columns: minmax(0, 240px) auto; align-items: start; gap: 16px; }
.tf-teilform-preis .tf-schalter { margin-top: 32px; }
.tf-teilform select.tf-input { appearance: auto; }
.tf-input:disabled { background: var(--bg-sunken); color: var(--text-muted); cursor: not-allowed; }
.tf-schalter { display: inline-flex; align-items: center; gap: 10px; font-weight: var(--weight-medium); cursor: pointer; }
.tf-schalter input { width: 20px; height: 20px; accent-color: var(--action-primary); }
.tf-schalter input:focus-visible { outline: 0; box-shadow: var(--shadow-focus); }
.tf-fotos-zone {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 140px; padding: 24px; border: 2px dashed var(--border-strong); border-radius: var(--radius-lg);
  background: var(--bg-page); color: var(--text-secondary); text-align: center; cursor: pointer;
}
.tf-fotos-zone .tf-icon { width: 28px; height: 28px; color: var(--text-link); }
.tf-fotos-zone.is-ziehen, .tf-fotos-zone:focus-within { border-color: var(--border-focus); background: var(--surface-brand-soft); }
.tf-fotos-zone input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.tf-fotos-vorschau { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.tf-fotos-vorschau:empty { display: none; }
.tf-foto { position: relative; width: 120px; aspect-ratio: 4 / 3; }
.tf-foto img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--border-default); }
.tf-foto-entfernen {
  position: absolute; top: 6px; right: 6px; width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: var(--surface-inverse); color: var(--text-on-inverse);
}
.tf-foto-entfernen:focus-visible { outline: 0; box-shadow: var(--shadow-focus); }
.tf-foto-entfernen .tf-icon { width: 16px; height: 16px; }
.tf-fotos-leer { color: var(--text-muted); font-size: var(--text-sm); }
.tf-fotos-leer.is-fehler { color: var(--status-danger); }
.tf-fotos-hochladen { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.tf-fotos-hochladen .tf-label { width: 100%; margin: 0; }
.tf-fotos-hochladen .tf-input { flex: 1 1 240px; padding-top: 8px; }
.tf-teilform-fuss { display: flex; justify-content: flex-end; gap: 10px; }
.tf-firma-leer-teile { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px 0; }
@media (max-width: 575.98px) {
  .tf-teilform-seite { padding: var(--space-6) 12px 48px; }
  .tf-teilform-abschnitt { padding: 16px; }
  .tf-teilform-reihe, .tf-teilform-reihe-3, .tf-teilform-preis { grid-template-columns: minmax(0, 1fr); }
  .tf-teilform-preis .tf-schalter { margin-top: 0; }
  .tf-teilform-fuss .tf-btn { flex: 1; }
}

/* --- Admin-Bereich (T31) ------------------------------------------------------------------ */
.tf-admin { max-width: 1200px; margin: 0 auto; padding: var(--space-6) 16px var(--space-8); }
.tf-admin > .tf-konto { padding-top: var(--space-2); }
.tf-admin-wer { width: 100%; margin: 0; color: var(--text-muted); font-size: var(--text-sm); }
.tf-admin-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 28px; }
.tf-admin-zahl {
  display: flex; flex-direction: column; gap: 4px; padding: 16px 18px;
  border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-card);
}
.tf-admin-zahl-wert { font-size: var(--text-2xl); font-weight: var(--weight-bold); line-height: 1.1; }
.tf-admin-zahl-text { color: var(--text-muted); font-size: var(--text-sm); }
.tf-admin-titel { font-size: var(--text-lg); font-weight: var(--weight-semibold); margin: 0 0 12px; }
.tf-liste-tabelle td.tf-admin-aktion, .tf-liste-tabelle td.tf-admin-grund { white-space: normal; min-width: 200px; }
.tf-admin-aktion summary { list-style: none; }
.tf-admin-aktion summary::-webkit-details-marker { display: none; }
.tf-admin-sperren { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.tf-admin-hinweis { color: var(--text-muted); font-size: var(--text-sm); margin: 0 0 12px; }
.tf-admin-umschalter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.tf-admin-umschalter .tf-tag { text-decoration: none; }
/* Admin: Kategorien (T37) */
.tf-admin-einstellung { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 20px; }
.tf-admin-einstellung .tf-admin-hinweis { width: 100%; margin: 0; }
.tf-admin-kategorien, .tf-admin-unter { list-style: none; margin: 0; padding: 0; }
.tf-admin-kat { border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-card); padding: 12px 16px; margin-bottom: 12px; }
.tf-admin-unter { margin-top: 8px; padding-left: 16px; border-left: 2px solid var(--border-default); }
.tf-admin-kat-zeile { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 4px 0; }
.tf-admin-kat-name { min-width: 0; overflow-wrap: anywhere; }
.tf-admin-kat-zahl { color: var(--text-muted); font-size: var(--text-sm); }
.tf-admin-kat-aktionen { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px; }
.tf-admin-kat-aktionen summary { list-style: none; }
.tf-admin-kat-aktionen summary::-webkit-details-marker { display: none; }
.tf-admin-kat-aktionen details[open] { width: 100%; max-width: 320px; }
.tf-admin-pfeil { margin: 0; }
/* Teil-Formular: neue Kategorie, Ähnlichkeitsvorschlag (T37) */
.tf-teilform-neu { margin-top: 12px; }
.tf-teilform-vorschlag { border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-brand-soft); padding: 12px 16px; }
.tf-teilform-vorschlag[hidden] { display: none; }
.tf-teilform-vorschlag p { margin: 0 0 10px; font-weight: var(--weight-semibold); }
.tf-teilform-vorschlag-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
/* Firmenbereich: „Das wird gerade gesucht“ (T32) */
.tf-gesucht { border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 14px 16px; margin: 0 0 16px; background: var(--surface-card); }
.tf-gesucht h2 { font-size: var(--text-base); font-weight: var(--weight-semibold); margin: 0 0 10px; }
.tf-gesucht-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 10px; padding: 0; }
.tf-gesucht-chips .tf-tag { text-decoration: none; }
.tf-gesucht p { margin: 0; color: var(--text-muted); font-size: var(--text-sm); }

/* --- Teile importieren (T30) --------------------------------------------------------------- */
.tf-import .tf-teilform-abschnitt { margin-bottom: 20px; }
.tf-import h2 { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.tf-import-schritte { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 var(--space-6); padding-left: 1.2em; font-size: var(--text-sm); color: var(--text-muted); }
.tf-import-schritte [aria-current="step"] { color: var(--text-primary); font-weight: var(--weight-semibold); }
.tf-import-zaehler { margin: 0 0 var(--space-6); font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.tf-import-tabelle { margin: 0; font-size: var(--text-sm); }
.tf-import-tabelle td:first-child { white-space: nowrap; }
.tf-import-liste { margin: 0; padding-left: 1.2em; font-size: var(--text-sm); overflow-wrap: anywhere; }
.tf-import-liste ul { padding-left: 1.2em; color: var(--text-secondary); }
.tf-import-nr { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-xs); }
.tf-import-neu { margin: 0 0 20px; }
.tf-import-neu summary { cursor: pointer; font-weight: var(--weight-semibold); }
.tf-import-haken { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; }
.tf-import-haken input { margin-top: 4px; }
.tf-import-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- Firmenbereich im Design-System (T39): Kopf, Filterleiste, Liste wie in der Suche ------- */
.tf-firma { max-width: var(--container-max); margin: 0 auto; padding: 32px 24px 64px; }
.tf-firma-filter {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px;
  margin: 0 0 16px; padding: 16px; border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); background: var(--surface-card);
}
.tf-firma-filter-feld { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.tf-firma-filter-feld .tf-suche-gruppe-titel { margin: 0; float: none; width: auto; padding: 0; }
.tf-firma-filter-suche { flex: 1 1 260px; }
.tf-firma-filter .tf-filter-col { flex: 0 1 200px; }
.tf-firma-filter select.tf-input { appearance: auto; }
.tf-firma-filter .tf-suche-preis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tf-firma-filter-umschalter, .tf-firma-sortierung { display: none; }
.tf-firma-tabelle .sort-btn[data-sort="asc"]::after { content: " ↑"; }
.tf-firma-tabelle .sort-btn[data-sort="desc"]::after { content: " ↓"; }
.tf-firma-tabelle .sort-btn[data-sort] { color: var(--text-link); }
.tf-firma-tabelle tbody tr { cursor: pointer; }
.tf-firma-tabelle tbody tr:hover td { background: var(--bg-sunken); }
.tf-firma-tabelle td { vertical-align: middle; }
.tf-firma-tabelle td.artikelnummer { font-family: var(--font-mono); }
.tf-firma-tabelle td[colspan] { text-align: center; }
.tf-firma-tabelle .thumb-img {
  width: 48px; height: 48px; object-fit: cover;
  border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--surface-card);
}
.tf-firma-aktionen { display: flex; gap: 6px; white-space: nowrap; }
.tf-firma-aktionen .tf-btn-sm { padding: 0 10px; }
.tf-firma-anzahl { margin: 12px 0 0; font-size: var(--text-sm); color: var(--text-muted); }
@media (max-width: 767.98px) {
  .tf-firma { padding: 24px 16px 48px; }
  .tf-firma-filter { padding: 12px; }
  .tf-firma-filter-suche { flex-basis: 100%; }
  .tf-firma-filter-umschalter { display: inline-flex; width: 100%; }
  .tf-firma-filter .tf-filter-col { display: none; flex: 1 1 100%; }
  .tf-firma-filter.filters-open .tf-filter-col { display: flex; }
}

/* --- Textseiten: Kontakt/Impressum/Datenschutz, 404 (T39) --------------------------------- */
.tf-textseite { max-width: 880px; margin: 0 auto; padding: 32px 24px 64px; }
.tf-textseite-schmal { max-width: 720px; }
.tf-textseite-karte {
  padding: 32px; border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); background: var(--surface-card);
}
.tf-textseite-karte h1 { margin: 0 0 16px; font-size: var(--text-xl); font-weight: var(--weight-bold); }
.tf-textseite-karte .tf-label-mono { margin-bottom: 8px; }
.tf-textseite-lead { font-size: var(--text-md); color: var(--text-secondary); }
.tf-textseite-trenner { margin: 32px 0; border: 0; border-top: 1px solid var(--border-default); opacity: 1; }
.tf-textseite-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
@media (max-width: 575.98px) {
  .tf-textseite { padding: 24px 16px 48px; }
  .tf-textseite-karte { padding: 20px; }
}