/*
 * sandraum-leipzig.de - eigenes Stylesheet (kein Tailwind-Build noetig).
 * Ruhig, warm, erwachsen: Papier- und Sandtoene, dunkles Erdbraun, Bronze-Akzent.
 * Schrift: Ubuntu wie auf hummelbienchen.de, selbst gehostet aus /fonts.
 */

@font-face { font-family: 'Ubuntu'; src: url('/fonts/Ubuntu-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Ubuntu'; src: url('/fonts/Ubuntu-LightItalic.woff2') format('woff2'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Ubuntu'; src: url('/fonts/Ubuntu-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Ubuntu'; src: url('/fonts/Ubuntu-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Ubuntu'; src: url('/fonts/Ubuntu-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Ubuntu'; src: url('/fonts/Ubuntu-MediumItalic.woff2') format('woff2'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Ubuntu'; src: url('/fonts/Ubuntu-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Ubuntu'; src: url('/fonts/Ubuntu-BoldItalic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }

:root {
    --sr-papier: #faf7f2;
    --sr-papier-2: #f3ece1;
    --sr-sand: #d9b98a;
    --sr-sand-dunkel: #b8925c;
    --sr-akzent: #9a6a34;
    --sr-akzent-hover: #7f5627;
    --sr-ink: #2b2622;
    --sr-ink-2: #5c544c;
    --sr-muted: #8a8178;
    --sr-linie: #e6ddcf;
    --sr-weiss: #ffffff;
    --sr-gut: #3f7d4e;
    --sr-warn: #a8452f;
    --sr-radius: 14px;
    --sr-sans: "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    /* Ueberschriften: ebenfalls Ubuntu, leichter Schnitt */
    --sr-serif: var(--sr-sans);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.sr {
    margin: 0; background: var(--sr-papier); color: var(--sr-ink);
    font-family: var(--sr-sans); font-size: 17px; line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}
.sr img { max-width: 100%; height: auto; display: block; }
.sr a { color: var(--sr-akzent); }
.sr a:hover { color: var(--sr-akzent-hover); }
.sr h1, .sr h2, .sr h3 { font-family: var(--sr-serif); font-weight: 300; line-height: 1.15; letter-spacing: -.015em; margin: 0; color: var(--sr-ink); }
.sr p { margin: 0 0 1rem; }
[x-cloak] { display: none !important; }

.sr-wrap { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }
.sr-wrap--schmal { max-width: 46rem; }
.sr-skip { position: absolute; left: -9999px; top: 0; background: var(--sr-ink); color: #fff; padding: .5rem 1rem; z-index: 100; }
.sr-skip:focus { left: 1rem; top: 1rem; color: #fff; }

/* ---------------- Kopf ---------------- */
.sr-kopf { position: sticky; top: 0; z-index: 40; background: rgba(250, 247, 242, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--sr-linie); }
.sr-kopf__innen { display: flex; align-items: center; justify-content: space-between; min-height: 4rem; gap: 1rem; }
.sr-marke { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--sr-ink) !important; font-family: var(--sr-serif); font-size: 1.25rem; font-weight: 500; margin: 0; }
.sr-marke svg { width: 2.5rem; height: 2.5rem; color: var(--sr-akzent); flex: none; }
.sr-marke--hell svg { color: var(--sr-sand); }
.sr-marke img { border-radius: 8px; }
.sr-marke em { font-style: italic; font-weight: 300; color: var(--sr-akzent); }
.sr-marke--hell { color: var(--sr-papier) !important; }
.sr-marke--hell em { color: var(--sr-sand); }
.sr-navi { display: flex; align-items: center; gap: 1.75rem; }
.sr-navi a { color: var(--sr-ink-2); text-decoration: none; font-size: .9375rem; font-weight: 500; }
.sr-navi a:hover, .sr-navi a[aria-current="page"] { color: var(--sr-ink); }
.sr-navi a.sr-knopf { color: #fff; }
.sr-menueknopf { display: none; border: 1px solid var(--sr-linie); background: var(--sr-weiss); border-radius: 999px; padding: .375rem .875rem; font: inherit; font-size: .875rem; color: var(--sr-ink); cursor: pointer; }
@media (max-width: 820px) {
    .sr-menueknopf { display: inline-block; }
    .sr-navi { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--sr-papier); border-bottom: 1px solid var(--sr-linie); padding: .5rem 1.25rem 1rem; }
    .sr-navi.is-offen { display: flex; }
    .sr-navi a { padding: .75rem 0; border-bottom: 1px solid var(--sr-linie); }
    .sr-navi a.sr-knopf { margin-top: .75rem; border: 0; text-align: center; }
}

/* ---------------- Knoepfe ---------------- */
.sr-knopf {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .875rem 1.625rem; border-radius: 999px; border: 1px solid transparent;
    background: var(--sr-akzent); color: #fff !important; text-decoration: none;
    font: inherit; font-size: .9375rem; font-weight: 600; letter-spacing: .01em; cursor: pointer;
    transition: background .15s, transform .15s;
}
.sr-knopf:hover { background: var(--sr-akzent-hover); }
.sr-knopf:disabled { opacity: .5; cursor: not-allowed; }
.sr-knopf--hell { background: transparent; border-color: rgba(255, 255, 255, .55); color: #fff !important; }
.sr-knopf--hell:hover { background: rgba(255, 255, 255, .12); }
.sr-knopf--rand { background: transparent; border-color: var(--sr-linie); color: var(--sr-ink) !important; }
.sr-knopf--rand:hover { border-color: var(--sr-sand-dunkel); background: var(--sr-weiss); }
.sr-knopf--klein { padding: .5rem 1.125rem; font-size: .875rem; }
.sr-knopf--voll { width: 100%; }
.sr-knopf--gelb { background: #f2c94c; color: var(--sr-ink) !important; }

/* ---------------- Hero mit Sand-Animation ---------------- */
.sr-hero { position: relative; overflow: hidden; min-height: 86vh; display: flex; align-items: center; color: #fff; background: #3a322b center / cover no-repeat; }
.sr-hero--klein { min-height: 58vh; }
.sr-hero__schleier { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31, 26, 22, .55) 0%, rgba(31, 26, 22, .62) 55%, rgba(31, 26, 22, .78) 100%); }
.sr-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; image-rendering: pixelated; }
.sr-hero__inhalt { position: relative; z-index: 2; padding: 6rem 0 5rem; max-width: 46rem; }
/* weicher Schatten hinter dem Text: liegt ueber dem Sand, damit die Schrift ruhig lesbar bleibt */
.sr-hero__inhalt::before { content: ""; position: absolute; inset: 1rem -5rem 0 -6rem; z-index: -1; pointer-events: none;
    background: radial-gradient(ellipse 60% 55% at 40% 52%, rgba(24, 19, 16, .72) 0%, rgba(24, 19, 16, .45) 55%, transparent 100%); }
.sr-hero__inhalt, .sr-hero__hinweis { text-shadow: 0 1px 14px rgba(0, 0, 0, .45); }
.sr-hero__ort { font-size: .8125rem; letter-spacing: .22em; text-transform: uppercase; color: var(--sr-sand); margin-bottom: 1.25rem; font-weight: 600; }
.sr-hero h1 { color: #fff; font-size: clamp(2.75rem, 7vw, 5.25rem); font-weight: 300; }
.sr-hero h1 em { font-style: italic; font-weight: 300; color: var(--sr-sand); }
.sr-hero__text { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); color: rgba(255, 255, 255, .88); margin: 1.5rem 0 2.25rem; max-width: 36rem; }
.sr-hero__knoepfe { display: flex; flex-wrap: wrap; gap: .75rem; }
.sr-hero__hinweis { position: absolute; z-index: 2; bottom: 1.25rem; left: 0; right: 0; text-align: center; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
@media (hover: none) { .sr-hero__hinweis { display: none; } }

/* ---------------- Sektionen ---------------- */
.sr-sektion { padding: 5.5rem 0; }
.sr-sektion--papier2 { background: var(--sr-papier-2); }
.sr-sektion--dunkel { background: var(--sr-ink); color: var(--sr-papier); }
.sr-sektion--dunkel h2, .sr-sektion--dunkel h3 { color: var(--sr-papier); }
.sr-augenbraue { font-size: .75rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--sr-akzent); margin-bottom: .875rem; }
.sr-sektion--dunkel .sr-augenbraue { color: var(--sr-sand); }
.sr-h2 { font-size: clamp(2rem, 4vw, 2.875rem); margin-bottom: 1.25rem !important; }
.sr-einleitung { font-size: 1.1875rem; color: var(--sr-ink-2); max-width: 40rem; }
.sr-mitte { text-align: center; }
.sr-mitte .sr-einleitung { margin-left: auto; margin-right: auto; }

.sr-zweispaltig { display: grid; gap: 3rem; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 900px) { .sr-zweispaltig { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4.5rem; } }
.sr-bild { border-radius: var(--sr-radius); overflow: hidden; aspect-ratio: 4 / 5; background: var(--sr-papier-2); }
.sr-bild img { width: 100%; height: 100%; object-fit: cover; }

.sr-liste { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .875rem; }
.sr-liste li { display: grid; grid-template-columns: 1.5rem 1fr; gap: .5rem; color: var(--sr-ink-2); }
.sr-liste li::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--sr-sand-dunkel); margin-top: .6rem; }
.sr-liste strong { color: var(--sr-ink); }

/* Angebote */
.sr-angebote { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); margin-top: 3rem; }
@media (min-width: 820px) { .sr-angebote { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.sr-angebot { background: var(--sr-weiss); border: 1px solid var(--sr-linie); border-radius: var(--sr-radius); padding: 2.25rem; display: flex; flex-direction: column; }
.sr-angebot h3 { font-size: 1.75rem; font-weight: 400; margin-bottom: .75rem; }
.sr-angebot p { color: var(--sr-ink-2); }
.sr-angebot .sr-liste { margin: .25rem 0 1.75rem; }
.sr-angebot__preis { margin-top: auto; padding-top: 1.25rem; border-top: 1px solid var(--sr-linie); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.sr-preis { font-family: var(--sr-serif); font-size: 1.75rem; font-weight: 500; color: var(--sr-ink); }
.sr-preis small { font-family: var(--sr-sans); font-size: .875rem; font-weight: 400; color: var(--sr-muted); }

/* Galerie */
.sr-galerie { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 820px) { .sr-galerie { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sr-galerie img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }

/* Fuer wen */
.sr-kacheln { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); margin-top: 2.5rem; }
@media (min-width: 700px) { .sr-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .sr-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sr-kachel { border: 1px solid rgba(250, 247, 242, .14); border-radius: var(--sr-radius); padding: 1.5rem; }
.sr-kachel h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.sr-kachel p { color: rgba(250, 247, 242, .72); margin: 0; font-size: .9375rem; }

/* ---------------- Buchung ---------------- */
.sr-buchung { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); margin-top: 2.5rem; align-items: start; }
@media (min-width: 960px) { .sr-buchung { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.sr-karte { background: var(--sr-weiss); border: 1px solid var(--sr-linie); border-radius: var(--sr-radius); padding: 1.75rem; }
.sr-karte h3 { font-size: 1.375rem; margin-bottom: 1rem; }
.sr-schritt { font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--sr-muted); margin-bottom: .5rem; }

.sr-tag { margin-top: 1.25rem; }
.sr-tag:first-child { margin-top: 0; }
.sr-tag__datum { font-size: .8125rem; font-weight: 700; color: var(--sr-ink-2); margin-bottom: .5rem; text-transform: uppercase; letter-spacing: .06em; }
.sr-termin {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%;
    padding: .875rem 1.125rem; margin-bottom: .5rem; border-radius: 10px; border: 1px solid var(--sr-linie);
    background: var(--sr-papier); font: inherit; color: var(--sr-ink); text-align: left; cursor: pointer;
    transition: border-color .15s, background .15s;
}
.sr-termin:hover { border-color: var(--sr-sand-dunkel); background: var(--sr-weiss); }
.sr-termin.is-gewaehlt { border-color: var(--sr-akzent); background: var(--sr-weiss); box-shadow: 0 0 0 2px rgba(154, 106, 52, .18); }
.sr-termin:disabled { cursor: not-allowed; opacity: .55; }
.sr-termin__zeit { font-weight: 600; font-variant-numeric: tabular-nums; }
.sr-termin__frei { font-size: .8125rem; color: var(--sr-gut); font-weight: 600; white-space: nowrap; }
.sr-termin__frei.is-knapp { color: var(--sr-akzent); }
.sr-termin__frei.is-voll { color: var(--sr-muted); }
.sr-leer { padding: 1.5rem; border: 1px dashed var(--sr-linie); border-radius: 10px; color: var(--sr-ink-2); text-align: center; }

.sr-feld { margin-bottom: 1rem; }
.sr-feld label, .sr-label { display: block; font-size: .8125rem; font-weight: 600; color: var(--sr-ink-2); margin-bottom: .375rem; }
.sr-eingabe {
    display: block; width: 100%; padding: .75rem .875rem; border-radius: 10px; border: 1px solid var(--sr-linie);
    background: var(--sr-weiss); font: inherit; font-size: 1rem; color: var(--sr-ink);
}
.sr-eingabe:focus { outline: none; border-color: var(--sr-akzent); box-shadow: 0 0 0 3px rgba(154, 106, 52, .15); }
textarea.sr-eingabe { min-height: 7rem; resize: vertical; }
select.sr-eingabe { appearance: none; padding-right: 2.25rem; background: var(--sr-weiss) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%238a8178'%3E%3Cpath d='M5.5 7.5 10 12l4.5-4.5'/%3E%3C/svg%3E") no-repeat right .75rem center / 1.25rem; }
.sr-felder-2 { display: grid; gap: 0 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .sr-felder-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.sr-fehler { font-size: .8125rem; color: var(--sr-warn); margin: .375rem 0 0; }
.sr-hinweis { font-size: .8125rem; color: var(--sr-muted); }

.sr-zaehler { display: inline-flex; align-items: center; border: 1px solid var(--sr-linie); border-radius: 999px; overflow: hidden; }
.sr-zaehler button { width: 2.75rem; height: 2.75rem; border: 0; background: var(--sr-weiss); font-size: 1.25rem; color: var(--sr-ink); cursor: pointer; }
.sr-zaehler button:hover { background: var(--sr-papier-2); }
.sr-zaehler span { min-width: 3rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

.sr-auswahl { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.125rem; border-radius: 10px; background: var(--sr-papier-2); margin-bottom: 1.25rem; }
.sr-auswahl strong { font-family: var(--sr-serif); font-size: 1.25rem; }
.sr-summe { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1rem 0; margin: .5rem 0 1rem; border-top: 1px solid var(--sr-linie); }
.sr-summe strong { font-family: var(--sr-serif); font-size: 1.75rem; }
.sr-meldung { padding: 1rem 1.125rem; border-radius: 10px; background: #edf5ee; color: #2d5e39; margin-bottom: 1rem; font-weight: 500; }
.sr-meldung--fehler { background: #fbeeea; color: #8a3523; }
.sr-knoepfe { display: grid; gap: .625rem; }

.sr-dialog-hintergrund { position: fixed; inset: 0; z-index: 60; background: rgba(31, 26, 22, .55); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.sr-dialog { background: var(--sr-weiss); border-radius: var(--sr-radius); padding: 2rem; max-width: 30rem; width: 100%; box-shadow: 0 20px 60px rgba(0, 0, 0, .25); }
.sr-dialog h3 { font-size: 1.5rem; margin-bottom: .75rem; }

/* ---------------- FAQ ---------------- */
.sr-faq { margin-top: 2.5rem; border-top: 1px solid var(--sr-linie); }
.sr-faq details { border-bottom: 1px solid var(--sr-linie); }
.sr-faq summary { cursor: pointer; list-style: none; padding: 1.25rem 2.5rem 1.25rem 0; position: relative; font-family: var(--sr-serif); font-size: 1.125rem; font-weight: 500; color: var(--sr-ink); }
.sr-faq summary::-webkit-details-marker { display: none; }
.sr-faq summary::after { content: "+"; position: absolute; right: .25rem; top: 1.05rem; font-family: var(--sr-sans); font-size: 1.5rem; font-weight: 300; color: var(--sr-akzent); }
.sr-faq details[open] summary::after { content: "–"; }
.sr-faq details p { color: var(--sr-ink-2); padding-right: 2rem; }

/* ---------------- Fuss ---------------- */
.sr-fuss { background: #221d1a; color: rgba(250, 247, 242, .72); padding: 4rem 0 2rem; font-size: .9375rem; }
.sr-fuss a { color: var(--sr-sand); text-decoration: none; }
.sr-fuss a:hover { color: #fff; }
.sr-fuss__raster { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) { .sr-fuss__raster { grid-template-columns: 1.3fr 1fr 1fr 1.3fr; } }
.sr-fuss__titel { font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(250, 247, 242, .5); margin-bottom: .75rem !important; }
.sr-fuss__unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(250, 247, 242, .12); font-size: .8125rem; color: rgba(250, 247, 242, .5); }

/* Impressum / Datenschutz (alte Inhalte, Tailwind-Klassen ohne Build) */
.sr-rechtliches { max-width: 52rem; margin: 0 auto; padding: 3rem 1.25rem 4rem; }
.sr-rechtliches h1 { font-size: 2.5rem; margin-bottom: 1rem; color: var(--sr-ink) !important; background: none !important; -webkit-text-fill-color: var(--sr-ink); }
.sr-rechtliches h2, .sr-rechtliches h3 { margin: 1.5rem 0 .5rem; font-size: 1.25rem; }
.sr-rechtliches div, .sr-rechtliches p { max-width: 100%; }
.sr-rechtliches .flex { display: flex; gap: 1rem; flex-wrap: wrap; }