/* ==========================================================================
   Schweden Domizil — Stylesheet
   Neubau 2026 (medienloge), ersetzt Joomla/YOOtheme „Pinewood Lake“.

   Übernommen von der alten Seite: Logo, Falunrot-Orange, Skizzenschrift
   (Cabin Sketch) für große Titel, Amatic SC für Dachzeilen, Papiergrund,
   gerissene Papierkante.
   Neu: lesbare Grundschrift (Figtree statt Schreibmaschine), Kontraste nach
   WCAG AA, klare Buchungswege, Galerie mit Großansicht, kein Fremdinhalt
   ohne Klick (darum auch kein Cookie-Banner).
   ========================================================================== */

/* ---------- Schriften (lokal, SIL Open Font License) ---------- */
@font-face { font-family: "Cabin Sketch"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../fonts/cabin-sketch-700.woff2") format("woff2"); }
@font-face { font-family: "Amatic SC"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../fonts/amatic-sc-700.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 400 700; font-style: normal; font-display: swap;
  src: url("../fonts/figtree-400-700.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 400; font-style: italic; font-display: swap;
  src: url("../fonts/figtree-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Roboto Mono"; font-weight: 400 500; font-style: normal; font-display: swap;
  src: url("../fonts/roboto-mono-400-500.woff2") format("woff2"); }

/* ---------- Gestaltungswerte ---------- */
:root {
  --papier: #F6F2EB;
  --papier-tief: #EDE5D8;
  --karte: #FFFCF7;
  --tinte: #322A22;          /* 12,6 : 1 auf Papier */
  --tinte-weich: #6B6058;    /*  5,5 : 1 auf Papier */
  --linie: #DDD2C2;
  --falun: #D8522C;          /* Markenfarbe — Flächen, Zierrat, große Schrift */
  --falun-tief: #BF4420;     /* Knöpfe, Links, Kopfleiste — 5,2 : 1 mit Weiß */
  --falun-dunkel: #9C3518;   /* gedrückt / Hover */
  --nacht: #231E19;

  --skizze: "Cabin Sketch", "Figtree", system-ui, sans-serif;
  --dach: "Amatic SC", "Figtree", cursive;
  --text: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Roboto Mono", ui-monospace, "Consolas", monospace;

  --breite: 1240px;
  --schmal: 760px;
  --rand: clamp(16px, 4.5vw, 44px);
  --luft: clamp(72px, 10vw, 136px);
  --radius: 6px;
  --schatten: 0 1px 2px rgba(50, 42, 34, .06), 0 14px 32px -14px rgba(50, 42, 34, .28);
  --kopf-hoehe: 76px;
  --weich: cubic-bezier(.2, .7, .2, 1);

  /* Papierkorn: feines Rauschen statt Bilddatei */
  --korn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .16 0 0 0 0 .12 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-hoehe) + 16px); }
body {
  margin: 0;
  background: var(--papier) var(--korn);
  color: var(--tinte);
  font: 400 1.0625rem/1.7 var(--text);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--falun-tief); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--falun-dunkel); }
:focus-visible { outline: 3px solid var(--falun); outline-offset: 3px; border-radius: 2px; }
p { margin: 0 0 1.1em; text-wrap: pretty; }
strong { font-weight: 650; }
ul, ol { padding-left: 1.2em; }
hr { border: 0; height: 1px; background: var(--linie); margin: 2.5em 0; }

.sprung { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--karte); color: var(--tinte); padding: 10px 16px; border-radius: var(--radius); }
.sprung:focus { left: 8px; }
.nur-vorleser { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Typografie ---------- */
h1, h2, .titel {
  font-family: var(--skizze);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.04;
  letter-spacing: .01em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 7vw, 5.4rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
h3 { font: 650 1.3rem/1.3 var(--text); margin: 0 0 .5em; letter-spacing: -.005em; }
h4 { font: 650 1.05rem/1.35 var(--text); margin: 1.6em 0 .4em; }

.dach {
  display: block;
  font: 700 clamp(1.55rem, 2.6vw, 2.1rem)/1.05 var(--dach);
  color: var(--falun);
  letter-spacing: .03em;
  margin: 0 0 .25em;
}
.etikett {
  font: 500 .75rem/1.3 var(--mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--tinte-weich);
}
.vorspann { font-size: 1.2rem; line-height: 1.6; color: var(--tinte); max-width: 60ch; }
.leise { color: var(--tinte-weich); }
.klein { font-size: .9375rem; }

/* ---------- Raster ---------- */
.rahmen { width: 100%; max-width: calc(var(--breite) + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); }
.rahmen--schmal { max-width: calc(var(--schmal) + 2 * var(--rand)); }
.abschnitt { padding-block: var(--luft) calc(var(--luft) * 1.08); position: relative; }
.abschnitt--eng { padding-block: calc(var(--luft) * .55) calc(var(--luft) * .6); }
.abschnitt--tief { background: var(--papier-tief) var(--korn); }
.zwei { display: grid; gap: clamp(32px, 6vw, 88px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) {
  .zwei { grid-template-columns: 1fr 1fr; }
  .zwei--breit-schmal { grid-template-columns: 1.35fr 1fr; }
  .zwei--schmal-breit { grid-template-columns: 1fr 1.35fr; }
  .zwei--mitte { align-items: center; }
}
.kopfzeile { max-width: 46rem; margin-bottom: clamp(32px, 5vw, 56px); }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 48px; padding: 12px 22px;
  font: 600 .95rem/1.2 var(--text); letter-spacing: .02em;
  color: #fff; background: var(--falun-tief);
  border: 2px solid var(--falun-tief); border-radius: 4px;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s var(--weich), border-color .2s var(--weich), color .2s var(--weich), transform .15s var(--weich);
}
.knopf:hover { background: var(--falun-dunkel); border-color: var(--falun-dunkel); color: #fff; }
.knopf:active { transform: scale(.98); }
.knopf svg { width: 1.15em; height: 1.15em; flex: none; }
.knopf--rand { background: transparent; color: var(--falun-tief); }
.knopf--rand:hover { background: var(--falun-tief); color: #fff; border-color: var(--falun-tief); }
.knopf--hell { background: #fff; color: var(--falun-tief); border-color: #fff; }
.knopf--hell:hover { background: var(--papier); border-color: var(--papier); color: var(--falun-dunkel); }
.knopf--glas { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.75); backdrop-filter: blur(4px); }
.knopf--glas:hover { background: #fff; color: var(--falun-tief); border-color: #fff; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.pfeil-link { display: inline-flex; align-items: center; gap: .4em; font-weight: 600; text-decoration: none; }
.pfeil-link::after { content: "→"; transition: transform .2s var(--weich); }
.pfeil-link:hover::after { transform: translateX(3px); }

/* ---------- Kopfleiste ---------- */
.kopf {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: var(--kopf-hoehe);
  color: #fff;
  background: var(--falun-tief);
  box-shadow: 0 2px 14px rgba(35, 20, 10, .18);
  transition: background-color .3s var(--weich), box-shadow .3s var(--weich), height .3s var(--weich);
}
.mit-bild .kopf:not(.kopf--fest) { background: transparent; box-shadow: none; }
.mit-bild .kopf:not(.kopf--fest)::before {
  content: ""; position: absolute; inset: 0 0 -40px; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(20, 14, 8, .55), rgba(20, 14, 8, 0));
}
.kopf__innen { height: 100%; display: flex; align-items: center; gap: 24px; }
.kopf__logo { display: block; color: #fff; flex: none; line-height: 0; }
.kopf__logo svg, .kopf__logo img { height: 50px; width: auto; }
.kopf__nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.kopf__nav > ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
.kopf__nav li { position: relative; }
.kopf__nav a.nav-link {
  display: block; padding: 10px 12px;
  color: #fff; text-decoration: none;
  font: 500 .95rem/1 var(--text); letter-spacing: .015em;
  border-radius: 4px; position: relative;
}
.kopf__nav a.nav-link::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s var(--weich);
}
.kopf__nav a.nav-link:hover::after, .kopf__nav a.nav-link.aktiv::after { transform: scaleX(1); }
.kopf__nav a.nav-link.aktiv { font-weight: 650; }
.unter {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 220px;
  list-style: none; margin: 0; padding: 8px;
  background: var(--karte); border-radius: var(--radius); box-shadow: var(--schatten);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .2s var(--weich), transform .2s var(--weich), visibility .2s;
}
.unter::before { content: ""; position: absolute; inset: -10px 0 auto; height: 10px; }
.hat-unter:hover .unter, .hat-unter:focus-within .unter { opacity: 1; visibility: visible; transform: none; }
.unter a { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 4px; color: var(--tinte); text-decoration: none; font-weight: 600; }
.unter a span { font: 400 .8rem/1.4 var(--text); color: var(--tinte-weich); }
.unter a:hover, .unter a.aktiv { background: var(--papier); color: var(--falun-tief); }
.kopf__cta { margin-left: 10px; min-height: 42px; padding: 9px 16px; font-size: .9rem; }
.kopf__fb { display: grid; place-items: center; width: 40px; height: 40px; color: #fff; border-radius: 50%; }
.kopf__fb:hover { background: rgba(255,255,255,.14); color: #fff; }
.kopf__fb svg { width: 18px; height: 18px; }
.kopf__menue { display: none; }

/* Sprachumschalter DE SV EN — klein, ganz rechts; am Telefon vor „Menü“ */
.sprachen { display: flex; align-items: center; gap: 2px; margin-left: -8px; font: 500 .74rem/1 var(--mono); letter-spacing: .08em; }
.sprachen a {
  display: grid; place-items: center; min-width: 34px; min-height: 34px; padding: 0 4px;
  color: #fff; text-decoration: none; border-radius: 4px; opacity: .78;
  transition: opacity .2s var(--weich), background-color .2s var(--weich);
}
.sprachen a:hover { opacity: 1; background: rgba(255,255,255,.14); }
.sprachen a[aria-current] { opacity: 1; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }

@media (max-width: 1023px) {
  :root { --kopf-hoehe: 64px; }
  .kopf__logo svg, .kopf__logo img { height: 42px; }
  .kopf__nav, .kopf__fb { display: none; }
  .sprachen { margin-left: auto; }
  .kopf__menue {
    display: inline-flex; align-items: center; gap: 8px; margin-left: 0;
    min-height: 44px; padding: 8px 12px; border: 0; border-radius: 4px;
    background: transparent; color: #fff; font: 600 .95rem/1 var(--text); cursor: pointer;
  }
  .kopf__menue:hover { background: rgba(255,255,255,.12); }
  .kopf__menue svg { width: 24px; height: 24px; }
}

/* Schmale Telefone: Logo, Umschalter und Menü müssen in eine Zeile passen */
@media (max-width: 480px) {
  .kopf__innen { gap: 8px; }
  .kopf__logo svg, .kopf__logo img { height: 38px; }
  .sprachen a { min-width: 30px; }
  .kopf__menue { padding-inline: 8px; gap: 6px; }
}
@media (max-width: 379px) {
  /* „Menü“ nur noch für Vorleseprogramme, sichtbar bleibt das Symbol */
  .kopf__menue-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Menü auf dem Telefon */
.schublade {
  position: fixed; inset: 0; z-index: 60;
  background: var(--papier) var(--korn);
  display: flex; flex-direction: column;
  padding: 0 var(--rand) calc(24px + env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: opacity .25s var(--weich), transform .25s var(--weich), visibility .25s;
}
.schublade.offen { opacity: 1; transform: none; visibility: visible; }
.schublade__kopf { height: var(--kopf-hoehe); display: flex; align-items: center; justify-content: space-between; color: var(--falun-tief); flex: none; }
.schublade__kopf img { height: 42px; width: auto; }
.schublade__zu { min-width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--tinte); cursor: pointer; display: grid; place-items: center; border-radius: 4px; }
.schublade__zu svg { width: 26px; height: 26px; }
.schublade nav { margin-top: 12px; }
.schublade ul { list-style: none; margin: 0; padding: 0; }
.schublade li { border-bottom: 1px solid var(--linie); }
.schublade nav a { display: block; padding: 16px 4px; color: var(--tinte); text-decoration: none; font: 600 1.3rem/1.2 var(--text); }
.schublade nav a.aktiv { color: var(--falun-tief); }
.schublade .einger a { padding: 12px 4px 12px 20px; font-size: 1.08rem; font-weight: 500; }
.schublade__fuss { margin-top: auto; padding-top: 28px; display: grid; gap: 12px; }
.schublade__fuss .knopf { width: 100%; }
.schublade__fuss p { margin: 8px 0 0; font-size: .95rem; color: var(--tinte-weich); }
body.menue-offen { overflow: hidden; }

/* ---------- Titelbild ---------- */
.held {
  position: relative; isolation: isolate;
  min-height: 72svh; display: flex; align-items: flex-end;
  color: #fff; background: var(--nacht);
  padding: calc(var(--kopf-hoehe) + 48px) 0 clamp(72px, 9vw, 120px);
}
.held--start { min-height: 100svh; align-items: center; text-align: center; }
.held--start .held__inhalt { margin-inline: auto; }
.held__bild { position: absolute; inset: 0; z-index: -2; }
.held__bild img { width: 100%; height: 100%; object-fit: cover; }
.held::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(20, 14, 8, .62) 0%, rgba(20, 14, 8, .18) 45%, rgba(20, 14, 8, .05) 70%),
    linear-gradient(to right, rgba(20, 14, 8, .28), rgba(20, 14, 8, 0) 60%);
}
.held--start::before { background: radial-gradient(ellipse at center, rgba(20, 14, 8, .42) 0%, rgba(20, 14, 8, .18) 60%, rgba(20, 14, 8, .3) 100%); }
.held__inhalt { position: relative; }
.held__inhalt > * { max-width: 54rem; }
.held--start .held__inhalt > * { margin-inline: auto; }
.held .dach { color: #fff; font-size: clamp(1.7rem, 3vw, 2.4rem); text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.held h1 { color: #fff; margin: 0; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.held--start h1 { font-size: clamp(3.1rem, 11vw, 9rem); line-height: .95; }
.held__unter { margin: 18px auto 0; font-size: clamp(1.05rem, 1.6vw, 1.25rem); max-width: 36rem; text-shadow: 0 1px 10px rgba(0,0,0,.4); }
.held--start .knoepfe { justify-content: center; }
.strich {
  display: block; width: 220px; height: 4px; margin: 22px auto; color: #fff;
  background: currentColor;
  -webkit-mask: url("../img/divider.svg") center / contain no-repeat; mask: url("../img/divider.svg") center / contain no-repeat;
}
.held__ort {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 28px;
  font: 500 .78rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.9);
}
.held__ort svg { width: 14px; height: 14px; }

/* Gerissene Papierkante — unten am Titelbild, oben am Fuß */
.riss {
  position: absolute; left: 0; right: 0; height: clamp(22px, 3vw, 44px); pointer-events: none;
  background: var(--papier) var(--korn);
  -webkit-mask: url("../img/kante.svg") center / 100% 100% no-repeat; mask: url("../img/kante.svg") center / 100% 100% no-repeat;
}
.riss--unten { bottom: -1px; }
.riss--oben { top: -1px; transform: scaleY(-1); }   /* Farbe = Abschnitt darüber */
.riss--davor { bottom: calc(100% - 1px); }           /* Farbe = eigener Abschnitt */
.riss--tief { background-color: var(--papier-tief); }

/* ---------- Einleitung Startseite ---------- */
.einstieg__bilder { position: relative; padding: 0 0 18% 0; }
@media (min-width: 900px) {
  .einstieg { align-items: start; }
  .einstieg .einstieg__bilder { position: sticky; top: calc(var(--kopf-hoehe) + 40px); margin-top: 24px; }
}
.einstieg__bilder img { border-radius: var(--radius); box-shadow: var(--schatten); }
.einstieg__bilder .b1 { width: 84%; aspect-ratio: 4 / 3; object-fit: cover; }
.einstieg__bilder .b2 { position: absolute; right: 0; bottom: 0; width: 52%; aspect-ratio: 4 / 3; object-fit: cover; border: 6px solid var(--karte); }
/* Der Stempel der alten Seite, als Maske eingefärbt */
.stempel {
  position: absolute; width: clamp(104px, 13vw, 150px); aspect-ratio: 1; left: -10px; bottom: 2%;
  transform: rotate(-12deg); opacity: .85; background: var(--falun);
  -webkit-mask: url("../img/logo-badge-small.svg") center / contain no-repeat; mask: url("../img/logo-badge-small.svg") center / contain no-repeat;
}

.eckdaten { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0 0 28px; padding: 0; list-style: none; }
.eckdaten li {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 99px; background: var(--karte); border: 1px solid var(--linie);
  font: 500 .8rem/1.2 var(--mono); letter-spacing: .02em; color: var(--tinte);
}
.eckdaten svg { width: 15px; height: 15px; color: var(--falun-tief); flex: none; }

/* ---------- Hauskarten ---------- */
.haeuser { display: grid; gap: clamp(28px, 4vw, 48px); grid-template-columns: 1fr; }
@media (min-width: 820px) { .haeuser { grid-template-columns: 1fr 1fr; } }
.haus {
  display: flex; flex-direction: column;
  background: var(--karte); border-radius: calc(var(--radius) + 2px); overflow: hidden;
  box-shadow: var(--schatten);
}
.haus__bild { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--papier-tief); }
.haus__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--weich); }
.haus:hover .haus__bild img { transform: scale(1.03); }
.haus__marke {
  position: absolute; left: 16px; top: 16px; padding: 6px 10px; border-radius: 3px;
  background: rgba(255,252,247,.94); color: var(--tinte);
  font: 500 .74rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
}
.haus__text { padding: clamp(22px, 3vw, 34px); display: flex; flex-direction: column; flex: 1; }
.haus__text h3 { font: 700 clamp(2rem, 3.4vw, 2.6rem)/1 var(--skizze); text-transform: uppercase; margin: 0 0 .1em; }
.haus__text .dach { font-size: 1.7rem; margin-bottom: .55em; }
.haus__text p { color: var(--tinte); }
.haus__text .knoepfe { margin-top: auto; padding-top: 12px; }

.fakten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 4px 0 22px; background: var(--linie); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 520px) { .fakten { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fakten div { background: var(--karte); padding: 12px 14px; }
.fakten dt { font: 500 .68rem/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-weich); margin-bottom: 5px; }
.fakten dd { margin: 0; font-weight: 650; font-size: 1.02rem; line-height: 1.25; font-variant-numeric: tabular-nums; }

.hinweis {
  display: flex; gap: 14px; align-items: flex-start;
  margin-top: clamp(28px, 4vw, 44px); padding: 18px 22px;
  background: var(--karte); border-left: 4px solid var(--falun); border-radius: 0 var(--radius) var(--radius) 0;
}
.hinweis svg { width: 22px; height: 22px; color: var(--falun-tief); flex: none; margin-top: 3px; }
.hinweis p { margin: 0; }

/* ---------- Vergleich ---------- */
.vergleich-huelle { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--schatten); background: var(--karte); }
.vergleich { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 1rem; }
.vergleich th, .vergleich td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--linie); vertical-align: top; }
.vergleich thead th { font: 700 1.6rem/1 var(--skizze); text-transform: uppercase; color: var(--tinte); padding-top: 22px; background: var(--karte); }
.vergleich tbody th { font: 500 .74rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-weich); width: 30%; }
.vergleich tbody tr:last-child > * { border-bottom: 0; }
.vergleich td { font-variant-numeric: tabular-nums; }

/* ---------- Umgebung: drei Kacheln ---------- */
.kacheln { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .kacheln { grid-template-columns: repeat(3, 1fr); } }
.kachel { position: relative; display: block; border-radius: var(--radius); overflow: hidden; color: #fff; text-decoration: none; aspect-ratio: 4 / 5; background: var(--nacht); isolation: isolate; }
.kachel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s var(--weich); }
.kachel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(20,14,8,.78), rgba(20,14,8,0) 58%); }
.kachel:hover img { transform: scale(1.04); }
.kachel__text { position: absolute; left: 20px; right: 20px; bottom: 18px; }
.kachel__text strong { display: block; font: 700 2.1rem/1 var(--dach); letter-spacing: .02em; }
.kachel__text span { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: .92rem; opacity: .92; }
.kachel:hover, .kachel:focus-visible { color: #fff; }
@media (min-width: 640px) { .kachel:nth-child(2) { margin-top: 40px; margin-bottom: -40px; } }
.kacheln + .knoepfe { margin-top: 80px; }

/* ---------- Aktivitäten ---------- */
.aktiv-abschnitt { position: relative; isolation: isolate; }
.aktiv-abschnitt::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .22;
  background: url("../img/allgemein/winterwald.jpg") right bottom / cover no-repeat;
  -webkit-mask: linear-gradient(to left, #000 10%, transparent 75%); mask: linear-gradient(to left, #000 10%, transparent 75%);
}
.taetigkeiten { list-style: none; padding: 0; margin: 0; display: grid; gap: 26px; }
.taetigkeit { display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: start; }
.taetigkeit img { width: 56px; height: 56px; }
.taetigkeit h3 { margin: 4px 0 4px; }
.taetigkeit p { margin: 0; color: var(--tinte); }
.mosaik { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mosaik img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); box-shadow: var(--schatten); }
.mosaik img:nth-child(2) { margin-top: 32px; }
.mosaik img:nth-child(3) { margin-top: -32px; }

/* ---------- Bildband mit Aufruf ---------- */
.band { position: relative; isolation: isolate; color: #fff; text-align: center; padding: clamp(110px, 16vw, 200px) 0; background: var(--nacht); overflow: hidden; }
.band__bild { position: absolute; inset: 0; z-index: -2; }
.band__bild img { width: 100%; height: 100%; object-fit: cover; }
.band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(20, 14, 8, .42); }
.band h2 { color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,.3); }
.band p { max-width: 36rem; margin-inline: auto; }
.band .knoepfe { justify-content: center; }

/* ---------- Hausseite ---------- */
.krume { font: 500 .76rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-weich); margin: 0 0 22px; }
.krume a { color: var(--tinte-weich); }
.krume a:hover { color: var(--falun-tief); }

/* Querverweis auf das andere Haus */
.quer {
  display: grid; grid-template-columns: 1fr; overflow: hidden;
  background: var(--karte); border-radius: calc(var(--radius) + 2px); box-shadow: var(--schatten);
  color: var(--tinte); text-decoration: none;
}
@media (min-width: 720px) { .quer { grid-template-columns: 2fr 3fr; } }
.quer img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; transition: transform .8s var(--weich); }
.quer:hover img { transform: scale(1.03); }
.quer:hover { color: var(--tinte); }
.quer__text { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: clamp(24px, 4vw, 48px); }
.quer__text .titel { font-size: clamp(2rem, 4vw, 3rem); margin: 0; }
.quer__text .pfeil-link { color: var(--falun-tief); margin-top: 10px; }
.steckbrief {
  background: var(--karte); border-radius: calc(var(--radius) + 2px); box-shadow: var(--schatten);
  padding: clamp(22px, 3vw, 32px); position: relative;
}
@media (min-width: 900px) { .steckbrief { position: sticky; top: calc(var(--kopf-hoehe) + 24px); } }
.steckbrief .preis { font: 700 clamp(2.4rem, 4vw, 3rem)/1 var(--skizze); color: var(--falun); margin: 2px 0 2px; }
.steckbrief .preis small { font: 500 .95rem var(--text); color: var(--tinte-weich); }
.steckbrief .fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 18px; }
.steckbrief .knoepfe { flex-direction: column; margin-top: 18px; }
.steckbrief .knoepfe .knopf { width: 100%; }

.diashow { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten); }
.einzelbilder { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.einzelbilder a { display: block; border-radius: var(--radius); overflow: hidden; }
.einzelbilder img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .6s var(--weich); }
.einzelbilder a:hover img { transform: scale(1.04); }

.galerie { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .galerie { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .galerie { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.galerie a {
  position: relative; display: block; overflow: hidden; border-radius: 4px; background: var(--papier-tief);
  aspect-ratio: 1; color: #fff; text-decoration: none;
}
.galerie a:first-child { grid-column: span 2; grid-row: span 2; }
/* breite Kacheln füllen das Raster am Ende auf (4 Spalten) */
@media (min-width: 1000px) { .galerie { grid-auto-flow: dense; } .galerie a.breit { grid-column: span 2; aspect-ratio: auto; } }
.galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--weich); }
.galerie a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,14,8,.6), transparent 45%); opacity: .85; transition: opacity .3s; }
.galerie span { position: absolute; left: 12px; right: 12px; bottom: 9px; z-index: 1; font-size: .88rem; font-weight: 600; line-height: 1.3; }
.galerie a:hover img { transform: scale(1.05); }
.galerie__zahl { margin-left: .5em; font: 500 .8rem var(--mono); color: var(--tinte-weich); letter-spacing: .06em; }

.ausstattung { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 28px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ausstattung li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px dashed var(--linie); }
.ausstattung li::before {
  content: ""; flex: none; width: 20px; height: 20px; margin-top: 3px; border-radius: 50%;
  background: var(--falun-tief) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

.preisliste { list-style: none; margin: 0; padding: 0; }
.preisliste li { display: flex; align-items: baseline; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--linie); }
.preisliste li:last-child { border-bottom: 0; }
.preisliste .punkte { flex: 1; border-bottom: 2px dotted var(--linie); transform: translateY(-4px); min-width: 20px; }
.preisliste .betrag { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.preisliste small { display: block; color: var(--tinte-weich); font-size: .88rem; }

.kasten { background: var(--karte); border-radius: calc(var(--radius) + 2px); padding: clamp(22px, 3vw, 34px); box-shadow: var(--schatten); }
.kasten > :last-child { margin-bottom: 0; }

/* Platzhalter, bis der eigene Kalender fertig ist */
.kalender-platz {
  display: grid; place-items: center; text-align: center; gap: 6px;
  min-height: 220px; padding: 32px 24px; margin: 8px 0 0;
  border: 2px dashed var(--linie); border-radius: calc(var(--radius) + 2px);
  background: repeating-linear-gradient(-45deg, transparent 0 14px, rgba(221,210,194,.25) 14px 15px);
}
.kalender-platz svg { width: 40px; height: 40px; color: var(--falun); }
.kalender-platz strong { font: 700 1.9rem/1 var(--dach); color: var(--tinte); letter-spacing: .02em; }
.kalender-platz p { margin: 0; max-width: 34rem; color: var(--tinte-weich); }

/* ---------- Buchung: Ablauf ---------- */
.schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: schritt; grid-template-columns: 1fr; }
@media (min-width: 820px) { .schritte { grid-template-columns: repeat(3, 1fr); } }
.schritte li { counter-increment: schritt; position: relative; background: var(--karte); border-radius: calc(var(--radius) + 2px); padding: 26px 24px 22px; box-shadow: var(--schatten); }
.schritte li::before {
  content: counter(schritt); display: grid; place-items: center;
  width: 46px; height: 46px; margin-bottom: 12px; border-radius: 50%;
  border: 2px solid var(--falun); color: var(--falun);
  font: 700 1.6rem/1 var(--skizze);
}
.schritte h3 { margin-bottom: .3em; }
.schritte p { margin: 0; color: var(--tinte); font-size: 1rem; }

.preiskarte { display: flex; flex-direction: column; }
.preiskarte__kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--linie); padding-bottom: 18px; margin-bottom: 18px; }
.preiskarte__kopf h2 { margin: 0; font-size: clamp(2rem, 3.6vw, 2.8rem); }
.preiskarte .preis { font: 700 clamp(2.4rem, 4.2vw, 3.2rem)/1 var(--skizze); color: var(--falun); text-align: right; }
.preiskarte .preis small { display: block; font: 500 .8rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-weich); }

/* ---------- Ausflugsziele ---------- */
.sprungmarken { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sprungmarken a {
  display: inline-block; padding: 8px 14px; border-radius: 99px;
  background: var(--karte); border: 1px solid var(--linie); color: var(--tinte);
  text-decoration: none; font-size: .92rem; font-weight: 550;
  transition: background-color .2s, color .2s, border-color .2s;
}
.sprungmarken a:hover { background: var(--falun-tief); border-color: var(--falun-tief); color: #fff; }
.ziel { display: grid; gap: clamp(24px, 5vw, 72px); grid-template-columns: 1fr; align-items: center; padding-block: clamp(44px, 6vw, 72px); border-top: 1px solid var(--linie); }
.ziel:first-of-type { border-top: 0; }
@media (min-width: 900px) {
  .ziel { grid-template-columns: 1.1fr 1fr; }
  .ziel:nth-of-type(even) .ziel__bilder { order: 2; }
}
.ziel__bilder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ziel__bilder a { display: block; overflow: hidden; border-radius: 4px; position: relative; }
.ziel__bilder a:first-child { grid-column: 1 / -1; }
.ziel__bilder a[hidden] { display: none; }
.ziel__bilder a:first-child img { aspect-ratio: 4 / 3; }
.ziel__bilder img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .6s var(--weich); }
.ziel__bilder a:hover img { transform: scale(1.04); }
.ziel__bilder .mehr::after {
  content: attr(data-mehr); position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(20,14,8,.55); color: #fff; font: 600 1rem var(--text);
}
.ziel h2 { font-size: clamp(2rem, 4vw, 3rem); }
.ziel__links { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.ziel__links a { font-weight: 600; }
.ziel__links a::after { content: " ↗"; font-weight: 400; }

/* ---------- News ---------- */
.meldung { display: grid; gap: clamp(20px, 4vw, 48px); grid-template-columns: 1fr; align-items: start; background: var(--karte); border-radius: calc(var(--radius) + 2px); box-shadow: var(--schatten); overflow: hidden; }
@media (min-width: 760px) { .meldung { grid-template-columns: 300px 1fr; } }
.meldung img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; }
.meldung__text { padding: clamp(22px, 3vw, 34px); padding-left: 0; }
@media (max-width: 759px) { .meldung__text { padding: 0 22px 26px; } }
.meldung time { display: block; margin-bottom: 10px; }

/* ---------- Kontakt ---------- */
.anreise { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .anreise { grid-template-columns: repeat(3, 1fr); } }
.anreise article { background: var(--karte); border-radius: calc(var(--radius) + 2px); padding: 26px 24px; box-shadow: var(--schatten); }
.anreise svg { width: 40px; height: 40px; color: var(--falun); margin-bottom: 12px; }
.anreise p { margin: 0; font-size: 1rem; }
.adresse { font-style: normal; font-size: 1.15rem; line-height: 1.6; }
.kontaktliste { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.kontaktliste a, .kontaktliste span { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.kontaktliste svg { width: 20px; height: 20px; color: var(--falun-tief); flex: none; }

.karte {
  position: relative; aspect-ratio: 4 / 3; border-radius: calc(var(--radius) + 2px); overflow: hidden;
  background: var(--papier-tief) url("../img/allgemein/steg-nebel-klein.jpg") center / cover; box-shadow: var(--schatten);
  display: grid; place-items: center; text-align: center; isolation: isolate;
}
.karte::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(246,242,235,.82); backdrop-filter: blur(2px); }
.karte__hinweis { max-width: 26rem; padding: 24px; }
.karte__hinweis p { font-size: .95rem; color: var(--tinte-weich); }
.karte iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Rechtstexte ---------- */
.rechtstext { font-size: 1rem; }
.rechtstext h2 { font: 650 1.5rem/1.3 var(--text); text-transform: none; margin: 2em 0 .5em; letter-spacing: -.005em; }
.rechtstext h3 { font-size: 1.15rem; margin-top: 1.8em; }
.rechtstext h4 { font-size: 1.02rem; }
.rechtstext p, .rechtstext li { overflow-wrap: anywhere; }

/* ---------- Fuß ---------- */
.fuss { position: relative; color: #EDE5D8; background: var(--nacht); isolation: isolate; padding: clamp(96px, 12vw, 150px) 0 28px; margin-top: 0; }
.fuss__bild { position: absolute; inset: 0; z-index: -2; }
.fuss__bild img { width: 100%; height: 100%; object-fit: cover; object-position: center 70%; }
.fuss::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(24,20,16,.62) 0%, rgba(24,20,16,.86) 45%, rgba(24,20,16,.94)); }
.fuss a:not(.knopf) { color: #fff; text-decoration: none; }
.fuss a:not(.knopf):hover { color: #fff; text-decoration: underline; }
.fuss__raster { display: grid; gap: 40px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .fuss__raster { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1040px) { .fuss__raster { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.fuss .etikett { color: rgba(237,229,216,.72); display: block; margin-bottom: 14px; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fuss__logo { color: #fff; display: inline-block; margin-bottom: 18px; }
.fuss__logo img { height: 60px; width: auto; }
.fuss address { font-style: normal; line-height: 1.75; }
.fuss__unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 56px; padding-top: 22px; border-top: 1px solid rgba(237,229,216,.18); font-size: .85rem; color: rgba(237,229,216,.72); }
.fuss__unten a { color: rgba(237,229,216,.88); }
.riss--fuss { top: -1px; transform: scaleY(-1); z-index: 1; }

/* ---------- Schnellwahl unten (nur Telefon) ---------- */
.schnellwahl { display: none; }
@media (max-width: 759px) {
  .schnellwahl {
    position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40;
    display: flex; gap: 8px; padding: 8px; border-radius: 10px;
    background: rgba(255,252,247,.96); box-shadow: 0 10px 30px -8px rgba(35,20,10,.45);
    backdrop-filter: blur(8px);
    transform: translateY(140%); transition: transform .35s var(--weich);
  }
  .schnellwahl.sichtbar { transform: none; }
  .schnellwahl .knopf { flex: 1; min-height: 46px; padding: 10px 12px; font-size: .92rem; }
  .schnellwahl .knopf--rand { flex: 0 0 auto; }
  body.mit-schnellwahl .fuss { padding-bottom: 96px; }
}

/* ---------- Großansicht (Galerie) ---------- */
.leuchtkasten { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(18,14,10,.94); color: #fff; }
.leuchtkasten::backdrop { background: rgba(18,14,10,.94); }
.leuchtkasten[open] { display: grid; grid-template-rows: auto 1fr auto; }
.leuchtkasten__kopf { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px 10px 20px; font: 500 .85rem var(--mono); letter-spacing: .06em; }
.leuchtkasten__buehne { position: relative; display: grid; place-items: center; min-height: 0; padding: 0 clamp(8px, 7vw, 88px); touch-action: pan-y; }
.leuchtkasten__buehne img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 3px; box-shadow: 0 20px 60px rgba(0,0,0,.5); user-select: none; }
.leuchtkasten__titel { text-align: center; padding: 14px 20px calc(18px + env(safe-area-inset-bottom)); font-size: 1rem; min-height: 1.6em; }
.leuchtkasten button { border: 0; background: rgba(255,255,255,.08); color: #fff; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; transition: background-color .2s; }
.leuchtkasten button:hover { background: rgba(255,255,255,.2); }
.leuchtkasten button svg { width: 24px; height: 24px; }
.leuchtkasten .zurueck, .leuchtkasten .weiter { position: absolute; top: 50%; transform: translateY(-50%); }
.leuchtkasten .zurueck { left: 12px; }
.leuchtkasten .weiter { right: 12px; }
@media (max-width: 640px) { .leuchtkasten .zurueck, .leuchtkasten .weiter { top: auto; bottom: -58px; transform: none; } .leuchtkasten .zurueck { left: 16px; } .leuchtkasten .weiter { right: 16px; } }

/* ---------- Einblenden beim Scrollen ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .zeigen { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--weich), transform .7s var(--weich); }
  .js .zeigen.da { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- 404 ---------- */
.verirrt { min-height: 70svh; display: grid; place-items: center; text-align: center; padding-top: calc(var(--kopf-hoehe) + 40px); }

/* ---------- Seiten ohne Titelbild ---------- */
.ohne-bild main { padding-top: var(--kopf-hoehe); }
.seitenkopf { padding-block: clamp(56px, 8vw, 96px) clamp(16px, 3vw, 32px); }

@media print {
  .kopf, .schublade, .schnellwahl, .fuss__bild, .riss, .leuchtkasten { display: none !important; }
  body { background: #fff; }
  .fuss { color: #000; background: none; }
}