/*
 * Smahoma Stays — dieselbe Handschrift wie die uebrigen Smahoma-Produkte:
 * dunkel als Grundhaltung, ruhige Flaechen, ein einziger Akzent. Der Akzent
 * ist die Produktfarbe der Marke, aber NICHT der Ton aus dem Zeichen.
 *
 * Gemessen am 05.09.2026 (WCAG-Kontrast, 4.5:1 fuer Fliesstext):
 *   dunkel  #e879f9 auf #10151c = 7.4:1,  auf #161e28 = 6.8:1
 *   hell    #a21caf auf #f4f8fa = 5.9:1,  Weiss darauf = 6.3:1
 * Das Marken-Fuchsia #d946ef liegt dunkel bei 5.3:1 und traegt gerade so,
 * hell bei 3.0:1 und faellt durch. Markenfarbe und UI-Akzent sind zwei Dinge —
 * dieselbe Trennung wie bei Accounting (#8b5cf6 im Zeichen, #7c3aed im Text).
 */

:root {
  --bg: #10151c;
  --panel: #161e28;
  --ink: #e8ecf1;
  --soft: #96a2af;
  --line: #26303c;
  --accent: #e879f9;
  --accent-ink: #10151c;
  --ok: #4ade80;
  --radius: 14px;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f4f8fa; --panel: #ffffff; --ink: #10151c; --soft: #4a5866;
  --line: #d8e1e8; --accent: #a21caf; --accent-ink: #ffffff; --ok: #166534;
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f4f8fa; --panel: #ffffff; --ink: #10151c; --soft: #4a5866;
    --line: #d8e1e8; --accent: #a21caf; --accent-ink: #ffffff; --ok: #166534;
    color-scheme: light;
  }
}

* { margin: 0; box-sizing: border-box; }
body {
  background: var(--bg); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.65; min-height: 100svh;
}
a { color: var(--accent); }
img { max-width: 100%; }

/* ------------------------------------------------------------- Kopfleiste */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; gap: 1.5rem; max-width: 72rem;
  margin: 0 auto; padding: .7rem 1.25rem; }
.brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--ink); }
.brand-word { font-weight: 700; letter-spacing: .09em; font-size: .78rem; white-space: nowrap; }
.header-nav { display: flex; gap: 1.1rem; margin-left: auto; font-size: .9rem; }
.header-nav a { color: var(--soft); text-decoration: none; }
.header-nav a:hover, .header-nav a[aria-current] { color: var(--ink); }
.header-actions { display: flex; align-items: center; gap: .6rem; }
.mode { background: none; border: 1px solid var(--line); color: var(--soft);
  border-radius: 999px; width: 2rem; height: 2rem; cursor: pointer; font-size: .9rem;
  flex: 0 0 auto; }

/*
 * Am Telefon zweizeilig: Marke und Umschalter oben, die Navigation darunter
 * ueber die ganze Breite. Einzeilig brach am 05.09.2026 auf 375 px sowohl der
 * Markenname als auch "Find a stay" in je drei Zeilen um — der Kopf war dann
 * hoeher als der erste Absatz des Textes darunter.
 */
@media (max-width: 34rem) {
  .header-inner { flex-wrap: wrap; gap: .5rem 1rem; padding: .6rem 1rem; }
  .brand { order: 1; }
  .header-actions { order: 2; margin-left: auto; }
  .header-nav { order: 3; width: 100%; margin-left: 0; gap: 1.1rem;
    font-size: .85rem; justify-content: space-between; }
  .header-nav a { white-space: nowrap; }
}

/* ------------------------------------------------------------------ Basis */
.eyebrow { color: var(--accent); font-size: .8rem; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 700; }
h1 { font-size: clamp(1.7rem, 4vw, 2.6rem); line-height: 1.15; letter-spacing: -.02em; margin: .3rem 0 .6rem; }
h2 { font-size: 1.15rem; margin-bottom: .5rem; letter-spacing: -.01em; }
.lede { color: var(--soft); font-size: 1.05rem; max-width: 46rem; }
.muted { color: var(--soft); font-weight: 400; }
.panel { background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.25rem; margin-top: 1.25rem; }
/* Der globale Reset nimmt jedem p seinen Abstand. Ohne das hier klebt der
   zweite Absatz einer Beschreibung am ersten und die beiden lesen sich als
   einer — aufgefallen am fertigen Text im Browser, nicht im Quelltext. */
.panel p + p, main.narrow p + p { margin-top: .8rem; }
main.narrow { max-width: 40rem; margin: 0 auto; padding: 3rem 1.5rem 5rem; }

.btn { display: inline-block; padding: .7rem 1.15rem; border-radius: 10px; font-weight: 600;
  text-decoration: none; border: 1px solid transparent; cursor: pointer; font-size: .95rem; }
.btn-primary { background: var(--accent); color: var(--accent-ink); width: 100%; }
.btn-primary:disabled { opacity: .45; cursor: not-allowed; }
.btn-ghost { border-color: var(--line); color: var(--ink); background: none; }

/* ------------------------------------------------------- Unterkunftsseite */
main.stay { max-width: 72rem; margin: 0 auto; padding: 2rem 1.25rem 4rem;
  display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; }
@media (max-width: 62rem) { main.stay { grid-template-columns: minmax(0, 1fr); } }

.gallery { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  margin: 1.25rem 0; }
.gallery img { border-radius: 10px; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.facts { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  color: var(--soft); font-size: .92rem; border-block: 1px solid var(--line); padding-block: .8rem; }
.amenities { list-style: none; padding: 0; display: grid; gap: .35rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); color: var(--soft); font-size: .93rem; }
.amenities li::before { content: "· "; color: var(--accent); }

/* Bewertungen: Kategorien und die eine Frage, die zaehlt. */
.would-return { font-size: 1.05rem; margin-bottom: .8rem; }
.would-return strong { color: var(--accent); font-size: 1.3rem; }
.ratings { width: 100%; border-collapse: collapse; font-size: .93rem; }
.ratings th { text-align: left; font-weight: 400; color: var(--soft); padding: .3rem 0; width: 11rem; }
.ratings td { padding: .3rem 0; }
.ratings .num { text-align: right; width: 3rem; font-variant-numeric: tabular-nums; }
.bar { display: block; height: .4rem; border-radius: 999px; background: var(--line); position: relative; }
.bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 0;
  border-radius: 999px; background: var(--accent); }
/*
 * Die Balkenlaenge steht als data-Attribut im Markup und wird HIER aufgeloest,
 * nicht als style="--v:0.94" am Element. Grund ist die Sicherheitsrichtlinie
 * dieser Seite: `style-src 'self'` verbietet Inline-Styles, und der Browser
 * hatte die Attribute stillschweigend verworfen — die Bewertungen standen als
 * leere graue Striche da, und in der Konsole lag der Grund. Entweder man
 * lockert die Richtlinie fuer alle Seiten oder man kommt ohne Inline-Styles
 * aus; das Zweite ist billiger. Note 4.7 heisst data-v="47" heisst 94 %.
 */
.bar[data-v="0"]::after { width: 0%; }
.bar[data-v="1"]::after { width: 2%; }
.bar[data-v="2"]::after { width: 4%; }
.bar[data-v="3"]::after { width: 6%; }
.bar[data-v="4"]::after { width: 8%; }
.bar[data-v="5"]::after { width: 10%; }
.bar[data-v="6"]::after { width: 12%; }
.bar[data-v="7"]::after { width: 14%; }
.bar[data-v="8"]::after { width: 16%; }
.bar[data-v="9"]::after { width: 18%; }
.bar[data-v="10"]::after { width: 20%; }
.bar[data-v="11"]::after { width: 22%; }
.bar[data-v="12"]::after { width: 24%; }
.bar[data-v="13"]::after { width: 26%; }
.bar[data-v="14"]::after { width: 28%; }
.bar[data-v="15"]::after { width: 30%; }
.bar[data-v="16"]::after { width: 32%; }
.bar[data-v="17"]::after { width: 34%; }
.bar[data-v="18"]::after { width: 36%; }
.bar[data-v="19"]::after { width: 38%; }
.bar[data-v="20"]::after { width: 40%; }
.bar[data-v="21"]::after { width: 42%; }
.bar[data-v="22"]::after { width: 44%; }
.bar[data-v="23"]::after { width: 46%; }
.bar[data-v="24"]::after { width: 48%; }
.bar[data-v="25"]::after { width: 50%; }
.bar[data-v="26"]::after { width: 52%; }
.bar[data-v="27"]::after { width: 54%; }
.bar[data-v="28"]::after { width: 56%; }
.bar[data-v="29"]::after { width: 58%; }
.bar[data-v="30"]::after { width: 60%; }
.bar[data-v="31"]::after { width: 62%; }
.bar[data-v="32"]::after { width: 64%; }
.bar[data-v="33"]::after { width: 66%; }
.bar[data-v="34"]::after { width: 68%; }
.bar[data-v="35"]::after { width: 70%; }
.bar[data-v="36"]::after { width: 72%; }
.bar[data-v="37"]::after { width: 74%; }
.bar[data-v="38"]::after { width: 76%; }
.bar[data-v="39"]::after { width: 78%; }
.bar[data-v="40"]::after { width: 80%; }
.bar[data-v="41"]::after { width: 82%; }
.bar[data-v="42"]::after { width: 84%; }
.bar[data-v="43"]::after { width: 86%; }
.bar[data-v="44"]::after { width: 88%; }
.bar[data-v="45"]::after { width: 90%; }
.bar[data-v="46"]::after { width: 92%; }
.bar[data-v="47"]::after { width: 94%; }
.bar[data-v="48"]::after { width: 96%; }
.bar[data-v="49"]::after { width: 98%; }
.bar[data-v="50"]::after { width: 100%; }

/* ---------------------------------------------------------- Buchungsblock */
.booking { position: sticky; top: 4.5rem; }
.book-form { background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.25rem; display: grid; gap: .8rem; }
.from-price { font-size: 1.05rem; }
.from-price strong { font-size: 1.45rem; }
.book-form label { display: grid; gap: .25rem; font-size: .85rem; color: var(--soft); }
.book-form input, .book-form textarea { font: inherit; font-size: .95rem; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: .55rem .65rem; width: 100%; }
.book-form input:focus-visible, .book-form textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; }
.dates { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.guest-fields { border: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.guest-fields legend { font-size: .85rem; color: var(--soft); padding: 0; margin-bottom: .3rem; }
.fineprint { font-size: .8rem; color: var(--soft); }

/*
 * Die Aufstellung. Sie steht bewusst als Tabelle da und nicht als eine Zeile
 * "Total": jede Nacht, jede Position, und die Summe darunter. Das ist das
 * Produktversprechen, und es soll auch dann sichtbar sein, wenn niemand
 * scrollt.
 */
.quote { display: grid; gap: .3rem; font-size: .9rem; }
.quote:empty { display: none; }
.quote-table { width: 100%; border-collapse: collapse; font-size: .93rem; margin: 1rem 0; }
.quote-table th { text-align: left; font-weight: 400; color: var(--soft); padding: .35rem 0; }
.quote-table td { text-align: right; padding: .35rem 0; font-variant-numeric: tabular-nums; }
.quote-table .total th, .quote-table .total td { border-top: 1px solid var(--line);
  padding-top: .6rem; font-weight: 700; color: var(--ink); font-size: 1.05rem; }
.quote-line { display: flex; justify-content: space-between; gap: 1rem; }
.quote-line.total { border-top: 1px solid var(--line); margin-top: .4rem; padding-top: .5rem;
  font-weight: 700; font-size: 1.05rem; }
.quote-line.free { color: var(--ok); }
.quote-nights { color: var(--soft); font-size: .82rem; display: grid; gap: .15rem;
  max-height: 12rem; overflow-y: auto; }
.quote-nights .n { display: flex; justify-content: space-between; }
.quote-error { color: #fca5a5; font-size: .88rem; }
:root[data-theme="light"] .quote-error { color: #b91c1c; }
.reference { font-size: 1.1rem; }
.reference strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .06em; color: var(--accent); }

/* --------------------------------------------------------------- Fusszeile */
.site-footer { border-top: 1px solid var(--line); margin-top: 3rem; padding: 2rem 1.25rem 3rem;
  color: var(--soft); font-size: .87rem; text-align: center; display: grid; gap: .4rem; }
.site-footer .promise { color: var(--ink); }

/* ------------------------------------------------------------ Startseite */
.home { max-width: 72rem; margin: 0 auto; padding: 3rem 1.25rem 4rem; }
.hero { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center; }
@media (max-width: 56rem) { .hero { grid-template-columns: minmax(0, 1fr); } }
.hero-cta { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.25rem; }
.hero-cta .btn-primary { width: auto; }
.compare { width: 100%; border-collapse: collapse; font-size: .93rem; }
.compare th, .compare td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--line);
  vertical-align: top; }
.compare thead th { color: var(--soft); font-weight: 600; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .06em; }
.compare .us { color: var(--ink); font-weight: 600; }
.compare .us::before { content: "✓ "; color: var(--accent); }
.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin-top: 1.25rem; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.15rem; }
.card h3 { font-size: 1rem; margin-bottom: .35rem; }
.card p { color: var(--soft); font-size: .92rem; }
.price-demo { font-variant-numeric: tabular-nums; font-size: .95rem; display: grid; gap: .25rem; }
.stage { margin-top: 3rem; }
.stage ol { margin: 1rem 0 0 1.1rem; display: grid; gap: .55rem; color: var(--soft); }
.stage ol strong { color: var(--ink); }


/* ------------------------------------------------ Bausteine statt Inline */
/* Entstanden beim Entfernen der style-Attribute (siehe oben). Bewusst ein
   kleiner, benannter Satz statt Utility-Klassen im Markup — dieselbe Regel
   wie in der Smahoma-Verwaltung. */
.spaced { margin-top: 2.5rem; }
.note { margin-top: .8rem; }
.small { font-size: .85rem; }
.btn-auto { width: auto; }
.card-link { text-decoration: none; color: inherit; display: block; }
.card-link:hover { border-color: var(--accent); }
.search-form { display: grid; gap: .7rem; align-items: end;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.search-form label { display: grid; gap: .25rem; font-size: .85rem; color: var(--soft); }
.search-form input { font: inherit; padding: .55rem; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink); width: 100%; }
.search-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }


/* ------------------------------------------------- Gastseiten (Suche, Ort) */
/* Die Startseite gehoert dem Gast: das Suchfeld steht ganz oben und ueber die
   volle Breite, nicht als Beiwerk neben einer Werbebotschaft. */
.hero-search { margin-bottom: 3rem; }
.hero-search .lede { margin-bottom: 1.5rem; }
.hero-search .search-form { margin-top: 1.25rem; }

.breadcrumb { font-size: .85rem; color: var(--soft); margin-bottom: 1rem;
  display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.breadcrumb a { color: var(--soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; }
.breadcrumb [aria-current] { color: var(--ink); }

/* Die Ortsverweise sind der Weg, auf dem sowohl Gaeste als auch Suchmaschinen
   von einer Seite zur naechsten kommen — darum sichtbar und nicht im Fuss
   versteckt. */
.place-links { list-style: none; padding: 0; margin-top: 1rem; display: flex;
  flex-wrap: wrap; gap: .5rem .75rem; }
.place-links li { border: 1px solid var(--line); border-radius: 999px;
  padding: .3rem .8rem; font-size: .9rem; background: var(--panel); }
.place-links a { text-decoration: none; }
.place-links .muted { font-size: .8rem; margin-left: .3rem; }

/* Der Hinweis fuer Gastgeber steht auf der Gastseite am Ende, ruhig und
   klar — nicht als zweite Startseite in der Mitte. */
.host-strip { border-top: 1px solid var(--line); padding-top: 2rem; }