/* SmartRent-OS — Ausprägungen der Bausteine (Theme-Kit).
   catalog.css baut die Seite, diese Datei entscheidet, WIE die Bausteine
   aussehen. Gesteuert über data-Attribute am body, die das Theme setzt:
   data-thm-hero, data-thm-grid, data-thm-detail, data-thm, data-thm-mood.
   Es gibt bewusst keinen zweiten Satz Views — nur andere Regeln. */

/* Standardwerte aller Token — EIN Ort statt verstreuter Ersatzwerte.
   Der gewählte Auftritt überschreibt sie im Seitenkopf mit höherer
   Spezifität; ohne Theme bleibt die Seite trotzdem vollständig gestaltet.
   Erzeugt aus ThemeKit\Tokens::defaults(). */
:root {
  --t-paper: #ffffff;
  --t-surface: #ffffff;
  --t-veil: #f4f6f8;
  --t-ink: #14181f;
  --t-ink-soft: #56595e;
  --t-muted: #7e8084;
  --t-line: #d9dadb;
  --t-line-soft: #eceded;
  --t-accent: #0f6e8c;
  --t-accent-text: #0f6e8c;
  --t-accent-soft: #ddebef;
  --t-accent-soft-ink: #0f6e8c;
  --t-on-accent: #ffffff;
  --t-second: #0f6e8c;
  --t-head-bg: #ffffff;
  --t-head-ink: #14181f;
  --t-head-line: #d9dadb;
  --t-foot-bg: #272a31;
  --t-foot-ink: #f6f8fb;
  --t-radius: 6px;
  --t-radius-sm: 4px;
  --t-pill: 999px;
  --t-font-head: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --t-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --t-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --t-h1: clamp(34px, 5vw, 56px);
  --t-h2: clamp(25px, 2.8vw, 35px);
  --t-h3: 20px;
  --t-track: -.022em;
  --t-weight-head: 650;
  --t-lead: 1.5;
  --t-base: 16px;
  --t-gap: 22px;
  --t-section: 76px;
  --t-wrap: 1360px;
  --t-pad: 26px;
  --t-ratio: 16 / 9;
}

/* ------------------------------------------------------------------ Bühne */

/* Vollbild: Foto über die ganze Breite, Text darüber. */
[data-thm-hero="voll"] .sr-rental-hero { position: relative; display: block; min-height: 640px; border: 0; background: var(--t-ink); }
[data-thm-hero="voll"] .sr-rental-hero figure { position: absolute; inset: 0; min-height: 0; }
[data-thm-hero="voll"] .sr-rental-hero figure::after { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.62) 100%); content: ""; }
[data-thm-hero="voll"] .sr-rental-hero figcaption { display: none; }
[data-thm-hero="voll"] .sr-rental-intro { position: relative; z-index: 2; min-height: 640px; padding: 70px 60px; justify-content: flex-end; color: #fff; }
[data-thm-hero="voll"] .sr-rental-intro h1,
[data-thm-hero="voll"] .sr-rental-intro > p:not(.sros-eyebrow),
[data-thm-hero="voll"] .sr-rental-intro .sros-eyebrow,
[data-thm-hero="voll"] .sr-rental-facts dt,
[data-thm-hero="voll"] .sr-rental-facts dd,
[data-thm-hero="voll"] .sr-text-link { color: #fff; }
[data-thm-hero="voll"] .sr-rental-facts { border-top-color: rgba(255,255,255,.28); }
[data-thm-hero="voll"] .sr-rental-facts div + div { border-left-color: rgba(255,255,255,.28); }

/* Ruhig: keine Bühne aus Bild, nur Typografie. */
[data-thm-hero="ruhig"] .sr-rental-hero { display: block; min-height: 0; border: 0; border-bottom: 2px solid var(--t-ink); border-radius: 0; background: transparent; }
[data-thm-hero="ruhig"] .sr-rental-hero figure { display: none; }
[data-thm-hero="ruhig"] .sr-rental-intro { padding: 34px 0 44px; }
[data-thm-hero="ruhig"] .sr-rental-intro h1 { max-width: 20ch; margin-bottom: 26px; }
[data-thm-hero="ruhig"] .sr-rental-intro > p:not(.sros-eyebrow) { max-width: 58ch; font-size: 18px; }
[data-thm-hero="ruhig"] .sr-rental-facts { max-width: 700px; }

/* Schmales Band: kurze Kopfzeile, Angebote rücken nach oben. */
[data-thm-hero="band"] .sr-rental-hero { min-height: 0; grid-template-columns: minmax(0,1fr) minmax(0,.85fr); }
[data-thm-hero="band"] .sr-rental-intro { padding: 34px 32px; }
[data-thm-hero="band"] .sr-rental-intro h1 { margin: 10px 0 14px; font-size: calc(var(--t-h2, 32px)); }
[data-thm-hero="band"] .sr-rental-intro > p:not(.sros-eyebrow) { margin-bottom: 18px; font-size: 14px; }
[data-thm-hero="band"] .sr-rental-facts { margin-top: 24px; padding-top: 16px; }
[data-thm-hero="band"] .sr-rental-hero figure { min-height: 230px; }
[data-thm-hero="band"] .sr-trust-row { margin-bottom: 40px; }

/* Suche zuerst: kompakte Bühne mit Suchzeile, Bild als Streifen. */
[data-thm-hero="suche"] .sr-rental-hero { min-height: 0; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); }
[data-thm-hero="suche"] .sr-rental-intro { padding: 40px 38px; }
[data-thm-hero="suche"] .sr-rental-intro h1 { margin: 10px 0 12px; font-size: var(--t-h2, 34px); }
[data-thm-hero="suche"] .sr-rental-intro > p:not(.sros-eyebrow) { margin-bottom: 20px; font-size: 14px; }
[data-thm-hero="suche"] .sr-rental-hero figure { min-height: 300px; }
.sr-hero-search { display: flex; gap: 10px; width: 100%; max-width: 520px; margin: 0 0 18px; }
.sr-hero-search .sros-input { flex: 1; min-height: 50px; border-radius: var(--t-radius-sm, 6px); background: var(--t-surface, #fff); }
.sr-hero-search .sros-btn { flex: none; }
[data-thm-hero]:not([data-thm-hero="suche"]) .sr-hero-search { display: none; }
/* Die Suchzeile trägt bereits die Hauptaktion — kein zweiter gleicher Knopf. */
[data-thm-hero="suche"] .sr-hero-actions .sros-btn--primary { display: none; }

/* ------------------------------------------------ Angebotsübersicht */

/* Liste: breite Zeilen, Bild links. */
[data-thm-grid="liste"] .sros-resgrid { grid-template-columns: 1fr; gap: 14px; }
[data-thm-grid="liste"] .sros-rescard { display: grid; grid-template-columns: minmax(200px,.42fr) 1fr; }
[data-thm-grid="liste"] .sros-rescard .thumb { aspect-ratio: auto; height: 100%; min-height: 220px; }
[data-thm-grid="liste"] .sros-rescard .body { padding: 26px 30px; }
[data-thm-grid="liste"] .sros-rescard .sub { min-height: 0; max-width: 70ch; }

/* Magazin: das erste Angebot groß, die übrigen kleiner. */
[data-thm-grid="magazin"] .sros-resgrid { grid-template-columns: repeat(3,minmax(0,1fr)); }
[data-thm-grid="magazin"] .sros-rescard:first-child { grid-column: span 3; display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); }
[data-thm-grid="magazin"] .sros-rescard:first-child .thumb { aspect-ratio: auto; min-height: 380px; height: 100%; }
[data-thm-grid="magazin"] .sros-rescard:first-child .body { padding: 40px 42px; justify-content: center; }
[data-thm-grid="magazin"] .sros-rescard:first-child h3 { font-size: var(--t-h2, 34px); }
[data-thm-grid="magazin"] .sros-rescard:first-child .sub { font-size: 14px; }

/* Fliesen: randloses Bildraster, Text im Bild. */
[data-thm-grid="fliesen"] .sros-resgrid { gap: 10px; grid-template-columns: repeat(3,minmax(0,1fr)); }
[data-thm-grid="fliesen"] .sros-rescard { position: relative; border: 0; }
[data-thm-grid="fliesen"] .sros-rescard .thumb { aspect-ratio: var(--t-ratio, 4 / 3); }
[data-thm-grid="fliesen"] .sros-rescard .thumb::after { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 38%, rgba(0,0,0,.76) 100%); content: ""; }
[data-thm-grid="fliesen"] .sros-rescard .body { position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; padding: 18px 20px; color: #fff; }
[data-thm-grid="fliesen"] .sros-rescard .body h3,
[data-thm-grid="fliesen"] .sros-rescard .sub,
[data-thm-grid="fliesen"] .sr-card-category,
[data-thm-grid="fliesen"] .sr-offer-facts,
[data-thm-grid="fliesen"] .sros-card-price .price,
[data-thm-grid="fliesen"] .sros-card-price > div > small { color: #fff; }
[data-thm-grid="fliesen"] .sros-rescard .sub,
[data-thm-grid="fliesen"] .sr-offer-facts { display: none; }
[data-thm-grid="fliesen"] .sros-card-price { padding-top: 10px; border-top-color: rgba(255,255,255,.3); }
[data-thm-grid="fliesen"] .sros-card-price > span { border-color: rgba(255,255,255,.55); color: #fff; }
[data-thm-grid="fliesen"] .sros-rescard:hover { transform: none; }
[data-thm-grid="fliesen"] .sros-rescard:hover .thumb img { transform: scale(1.04); }

/* Tafel: kompakte Datenzeilen mit kleinem Bild. */
[data-thm-grid="tafel"] .sros-resgrid { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--t-line); }
[data-thm-grid="tafel"] .sros-rescard { display: grid; grid-template-columns: 132px 1fr; gap: 18px; border: 0; border-bottom: 1px solid var(--t-line); border-radius: 0; background: transparent; }
[data-thm-grid="tafel"] .sros-rescard:hover { transform: none; box-shadow: none; background: var(--t-veil); }
[data-thm-grid="tafel"] .sros-rescard .thumb { aspect-ratio: 4 / 3; border-radius: var(--t-radius-sm); margin: 14px 0 14px 14px; }
[data-thm-grid="tafel"] .sros-listing-tag { top: 6px; left: 6px; padding: 3px 6px; font-size: 8px; }
[data-thm-grid="tafel"] .sros-rescard .body { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr) auto; grid-template-rows: auto auto; gap: 2px 20px; align-items: center; padding: 14px 18px 14px 0; }
[data-thm-grid="tafel"] .sr-card-category { grid-column: 1; grid-row: 1; margin: 0; align-self: end; }
[data-thm-grid="tafel"] .sros-rescard .body h3 { grid-column: 1; grid-row: 2; margin: 0; align-self: start; font-size: 17px; }
[data-thm-grid="tafel"] .sr-offer-facts { grid-column: 2; grid-row: 1 / 3; }
[data-thm-grid="tafel"] .sros-card-price { grid-column: 3; grid-row: 1 / 3; justify-content: flex-end; }
[data-thm-grid="tafel"] .sros-rescard .sub { display: none; }
[data-thm-grid="tafel"] .sr-offer-facts { flex-direction: column; gap: 4px; padding: 0; font-family: var(--t-font-mono, inherit); }
[data-thm-grid="tafel"] .sr-offer-facts span + span { padding-left: 0; border-left: 0; }
[data-thm-grid="tafel"] .sros-card-price { margin: 0; padding: 0; border: 0; gap: 14px; }

/* -------------------------------------------------------- Detailseite */

/* Breit: Inhalt über die volle Breite, Buchung als Leiste am unteren Rand. */
[data-thm-detail="breit"] .sros-detail { grid-template-columns: 1fr; gap: 24px; }
[data-thm-detail="breit"] .sros-bookbox { position: sticky; bottom: 0; top: auto; display: grid; grid-template-columns: auto minmax(260px,1fr) auto; gap: 22px; align-items: end; padding: 18px 22px; border-radius: var(--t-radius) var(--t-radius) 0 0; box-shadow: 0 -12px 34px rgba(0,0,0,.12); }
[data-thm-detail="breit"] .sros-bookbox .sros-eyebrow,
[data-thm-detail="breit"] .sr-book-intro,
[data-thm-detail="breit"] .sr-book-assurance { display: none; }
[data-thm-detail="breit"] .sr-book-price { margin: 0; }
[data-thm-detail="breit"] .sros-bookbox .sros-btn { margin-top: 0; }
@media (max-width: 850px) {
  [data-thm-detail="breit"] .sros-bookbox { position: static; grid-template-columns: 1fr; border-radius: var(--t-radius); }
}

/* Galerie: Bilder ganz oben über die volle Breite (Reihenfolge macht die View). */
[data-thm-detail="galerie"] .sr-detail-gallery { margin-bottom: 34px; }
[data-thm-detail="galerie"] .sr-detail-gallery .gallery { aspect-ratio: var(--t-ratio, 21 / 9); max-height: 620px; }
[data-thm-detail="galerie"] .sros-public-gallery { grid-template-columns: repeat(6,1fr); }
[data-thm-detail="galerie"] .sros-public-gallery button { height: 96px; }
@media (max-width: 650px) {
  [data-thm-detail="galerie"] .sros-public-gallery { grid-template-columns: repeat(3,1fr); }
}

/* ------------------------------------------------- Feinheiten je Stil */

/* Magazin: redaktionelle Trennlinien statt Kacheloptik. */
[data-thm="magazin"] .sros-catalog-heading { border-bottom: 2px solid var(--t-ink); padding-bottom: 14px; }
[data-thm="magazin"] .sros-rescard { border-width: 0 0 1px; border-radius: 0; background: transparent; }
[data-thm="magazin"] .sros-rescard:hover { transform: none; box-shadow: none; }
[data-thm="magazin"] .sros-rescard .body { padding-inline: 0; }

/* Werkbank: technische Werte in der Monospace der Paarung. */
[data-thm="werkbank"] .sros-card-price .price,
[data-thm="werkbank"] .sr-book-price strong,
[data-thm="werkbank"] .sros-public-facts strong { font-family: var(--t-font-mono, inherit); letter-spacing: -.01em; }
[data-thm="werkbank"] .sros-eyebrow { font-family: var(--t-font-mono, inherit); letter-spacing: .12em; }

/* Bühne: Fotos dürfen leuchten, Flächen bleiben zurück. */
[data-thm="buehne"] .sros-rescard .thumb img { filter: saturate(1.08); }
[data-thm="buehne"] .sr-trust-row strong { color: var(--t-accent-text); }

/* Boutique: feine Linien, mehr Luft um die Titel. */
[data-thm="boutique"] .sros-rescard .body h3 { margin-bottom: 12px; }
[data-thm="boutique"] .sros-catalog-heading h2 { font-weight: 500; }

/* Nachbarschaft: freundliche, große Bedienflächen. */
[data-thm="nachbarschaft"] .sros-front .sros-btn { min-height: 54px; font-size: 14px; }
[data-thm="nachbarschaft"] .sros-filter-chip { min-height: 44px; font-size: 12px; }

/* Dunkle Grundstimmungen: Bilder brauchen weniger Rahmen, mehr Kontrast. */
[data-thm-mood="dunkel"] .sros-rescard,
[data-thm-mood="nacht"] .sros-rescard { border-color: var(--t-line); }
[data-thm-mood="dunkel"] .sros-front-head,
[data-thm-mood="nacht"] .sros-front-head { backdrop-filter: none; }
[data-thm-mood="nacht"] .sros-rescard:hover { box-shadow: 0 16px 38px rgba(0,0,0,.5); }

/* Kantiges Kantenbild: auch runde Elemente werden gerade. */
[data-thm-corner="kante"] .sros-card-price > span { border-radius: 0; }
[data-thm-corner="kante"] .sros-rescard .thumb { border-radius: 0; }

@media (max-width: 1120px) {
  [data-thm-grid="magazin"] .sros-resgrid,
  [data-thm-grid="fliesen"] .sros-resgrid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  [data-thm-grid="magazin"] .sros-rescard:first-child { grid-column: span 2; }
}
@media (max-width: 850px) {
  [data-thm-hero="voll"] .sr-rental-intro { min-height: 520px; padding: 48px 28px; }
  [data-thm-hero="voll"] .sr-rental-hero { min-height: 520px; }
  [data-thm-hero="band"] .sr-rental-hero,
  [data-thm-hero="suche"] .sr-rental-hero { grid-template-columns: 1fr; }
  [data-thm-grid="liste"] .sros-rescard,
  [data-thm-grid="tafel"] .sros-rescard { grid-template-columns: 1fr; }
  [data-thm-grid="tafel"] .sros-rescard .thumb { margin: 0; aspect-ratio: var(--t-ratio, 16 / 9); }
  [data-thm-grid="tafel"] .sros-rescard .body { grid-template-columns: 1fr; gap: 10px; padding: 16px 18px; }
  [data-thm-grid="liste"] .sros-rescard .thumb { min-height: 200px; aspect-ratio: var(--t-ratio, 16 / 9); }
}
@media (max-width: 650px) {
  [data-thm-grid="magazin"] .sros-resgrid,
  [data-thm-grid="fliesen"] .sros-resgrid { grid-template-columns: 1fr; }
  [data-thm-grid="magazin"] .sros-rescard:first-child { grid-column: auto; grid-template-columns: 1fr; }
  [data-thm-grid="magazin"] .sros-rescard:first-child .thumb { min-height: 0; aspect-ratio: var(--t-ratio, 16 / 9); }
  [data-thm-grid="magazin"] .sros-rescard:first-child .body { padding: 22px 20px; }
  .sr-hero-search { flex-direction: column; }
}