/* ================================================================
   VARIANTE C — „EXPEDITION NORD / NACHTPLAKAT"
   ----------------------------------------------------------------
   Gegenstück zur Angelkarte (Tag/Papier): ein Siebdruck-Poster
   bei Nacht. Dunkles Schwarzgrün als Grundton, Nordlicht als
   einziges Leuchten, Passermarken (⌖) wie im Plakatdruck,
   Sektionen als nummerierte Druckplatten.
   Nur Systemschriften:
   Display = fette System-Sans / Daten = Monospace / Lesetext = Serif
   ================================================================ */

:root{
  --nacht:       #0F1D17;   /* tiefes Schwarzgrün, Nachthimmel */
  --nacht-2:     #16281F;
  --papier:      #E4D9BD;   /* Druckpapier für helle Platten */
  --papier-alt:  #D5C69E;
  --tinte:       #182620;
  --moos:        #55693F;
  --rost:        #B4491F;   /* Druckfarbe 2 */
  --ocker:       #C8952F;   /* Druckfarbe 3 */
  --eis:         #6FA3B0;   /* kaltes Eisblau */
  --aurora:      #79C99A;   /* Nordlicht-Grün (aus Moos + Eis gemischt) */
  --grau-warm:   #C9C4AE;

  --f-display: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --f-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Courier New", monospace;
  --f-serif: Georgia, "Times New Roman", serif;

  --rand: clamp(1rem, 4vw, 3rem);
  --linie: 2px solid var(--papier);
  --linie-dunkel: 2px solid var(--tinte);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; animation:none !important; }
}

body{
  font-family: var(--f-serif);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--papier);
  background-color: var(--nacht);
  overflow-x:hidden;
  /* Druckkorn */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.85 0 0 0 0 0.82 0 0 0 0 0.7 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{ display:block; max-width:100%; height:auto; }
a{ color: var(--aurora); }
:focus-visible{ outline: 3px solid var(--ocker); outline-offset: 3px; }

/* ---------- Typo ---------- */
.display{
  font-family: var(--f-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: .9;
}
.outline{ color: transparent; }
@supports ((-webkit-text-stroke: 2px black) or (text-stroke: 2px black)){
  .outline{ -webkit-text-stroke: 2.5px var(--papier); }
  .hell .outline{ -webkit-text-stroke-color: var(--tinte); }
}
@supports not ((-webkit-text-stroke: 2px black)){
  .outline{ color: var(--eis); }
}
.mono{
  font-family: var(--f-mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .78rem;
}
.eyebrow{
  font-family: var(--f-mono);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .72rem;
  display:flex; align-items:center; gap:.75rem;
  margin-bottom: 1.4rem;
  color: var(--grau-warm);
}
.eyebrow b{ color: var(--ocker); font-weight:700; }
.hell .eyebrow{ color: var(--tinte); }
.hell .eyebrow b{ color: var(--rost); }
/* Passermarke ⌖ vor jedem Eyebrow — wie im Plakatdruck */
.eyebrow::before{
  content:"";
  width: 1.1rem; height: 1.1rem; flex:none;
  background:
    radial-gradient(circle, transparent 0 4px, currentColor 4px 5.5px, transparent 5.5px) center/100% 100% no-repeat,
    linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat;
}

/* ---------- Sektionen = Druckplatten ---------- */
section{ position:relative; border-bottom: 1px solid rgba(228,217,189,.25); }
.inner{
  max-width: 76rem;
  margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 6.5rem) var(--rand);
}
/* Plattennummer riesig am Sektionsrand */
.platte-nr{
  position:absolute;
  top: clamp(1rem, 3vw, 2rem);
  right: var(--rand);
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(3rem, 9vw, 7rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px rgba(228,217,189,.22);
  pointer-events:none;
  user-select:none;
}
.hell .platte-nr{ -webkit-text-stroke-color: rgba(24,38,32,.18); }

/* helle Druckplatten (Papier) */
.hell{
  background-color: var(--papier);
  color: var(--tinte);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.09 0 0 0 0 0.15 0 0 0 0 0.12 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hell a{ color: var(--rost); }

/* ---------- Buttons ---------- */
.btn{
  font-family: var(--f-mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .85rem;
  display:inline-block;
  padding: 1rem 1.7rem;
  border: var(--linie);
  text-decoration:none;
  color: var(--papier);
  background: transparent;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover{ transform: translate(-3px,-3px); box-shadow: 5px 5px 0 var(--aurora); }
.btn-voll{ background: var(--rost); border-color: var(--rost); }
.btn-voll:hover{ box-shadow: 5px 5px 0 var(--papier); }
.hell .btn{ color: var(--tinte); border-color: var(--tinte); }
.hell .btn:hover{ box-shadow: 5px 5px 0 var(--rost); }
.hell .btn-voll{ color: var(--papier); border-color: var(--rost); }

/* ---------- Stempel / Marke ---------- */
.marke{
  font-family: var(--f-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .68rem;
  line-height: 1.4;
  border: 3px double var(--aurora);
  color: var(--aurora);
  padding: .55rem .95rem;
  display:inline-block;
  text-align:center;
  transform: rotate(-4deg);
}
.hell .marke{ border-color: var(--rost); color: var(--rost); mix-blend-mode: multiply; }

/* ================================================================
   HEADER
   ================================================================ */
header.kopf{
  position: sticky; top:0; z-index:50;
  background: rgba(15,29,23,.96);
  border-bottom: 3px solid var(--rost);
}
.kopf-zeile{
  max-width:76rem; margin:0 auto;
  padding:.7rem var(--rand);
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
}
.logo{
  display:flex;
  align-items:center;
  gap:0;
  font-family: var(--f-mono);
  text-transform: uppercase;
  letter-spacing:.16em;
  font-size:.78rem;
  color: var(--papier);
  text-decoration:none;
  transition:opacity .2s ease;
}
.kopf--im-hero .logo img{
  width:0;
  margin-right:0;
  opacity:0;
  pointer-events:none;
}
.kopf:not(.kopf--im-hero) .logo img{
  width:clamp(4rem, 8vw, 5.8rem);
  margin-right:.85rem;
  opacity:1;
}
.logo img{
  width:clamp(4rem, 8vw, 5.8rem);
  height:auto;
  margin-right:.85rem;
  transition:width .24s ease, margin-right .24s ease, opacity .18s ease;
}
.logo .zusatz{ opacity:.72; }
nav.haupt{ display:flex; gap:1.2rem; flex-wrap:wrap; }
nav.haupt a{
  font-family: var(--f-mono);
  font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color: var(--papier); text-decoration:none;
  border-bottom:2px solid transparent; padding-bottom:2px;
}
nav.haupt a:hover{ border-color: var(--aurora); }
.menu-knopf{
  display:none;
  font-family: var(--f-mono);
  font-size:.74rem; letter-spacing:.12em; text-transform:uppercase;
  background:transparent; color: var(--papier);
  border: 2px solid var(--papier);
  padding:.45rem .8rem;
  cursor:pointer;
}
.menu-knopf:hover{ border-color: var(--aurora); color: var(--aurora); }
@media (max-width: 52rem){
  .menu-knopf{ display:inline-block; }
  nav.haupt{
    display:none; width:100%;
    flex-direction:column; gap:0;
    border-top:1px dashed rgba(228,217,189,.4);
    padding-top:.5rem;
  }
  nav.haupt.offen{ display:flex; }
  nav.haupt a{
    padding:.7rem 0;
    border-bottom:1px dashed rgba(228,217,189,.25);
    font-size:.78rem;
  }
}

/* ================================================================
   1 · HERO — Nachthimmel mit Nordlicht
   ================================================================ */
.hero{
  overflow:hidden;
  isolation:isolate;
  min-height: 88vh;
  display:flex; flex-direction:column; justify-content:flex-start;
}
.hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:clamp(7rem, 16vw, 14rem);
  background:url("shared/images/hero-divider.svg") center bottom / auto 100% repeat-x;
  opacity:.76;
  pointer-events:none;
  z-index:5;
}
.hero .aurora{
  position:absolute; inset:0; z-index:-1;
  width:100%; height:100%;
}
.hero-berg{
  position:absolute;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  bottom:0;
  pointer-events:none;
  background-repeat:no-repeat;
  background-position:center bottom;
}
.hero-berg--hinten{
  bottom:clamp(.7rem, 1.6vw, 1.6rem);
  height:clamp(6.4rem, 13.8vw, 11.5rem);
  background-image:url("shared/images/mountain-layer-back.svg");
  background-size:100% 100%;
  filter:invert(76%) sepia(18%) saturate(576%) hue-rotate(145deg) brightness(86%);
  opacity:.16;
  z-index:1;
}
.hero-berg--vorn{
  bottom:clamp(.4rem, 1.2vw, 1.2rem);
  height:clamp(10rem, 20vw, 17rem);
  background-image:url("shared/images/mountain-layer-front.svg");
  background-size:100% 100%;
  filter:invert(74%) sepia(42%) saturate(428%) hue-rotate(92deg) brightness(91%);
  opacity:.1;
  z-index:3;
}
.hero-elch{
  position:absolute;
  right:clamp(10rem, 34vw, 35rem);
  bottom:0;
  z-index:6;
  width:clamp(5.4rem, 13vw, 11rem);
  max-width:27vw;
  height:auto;
  opacity:.52;
  filter:brightness(0) saturate(100%) invert(80%) sepia(20%) saturate(420%) hue-rotate(92deg) brightness(94%);
  pointer-events:none;
  user-select:none;
}
.hero .inner{
  width:100%;
  padding-top:clamp(.75rem, 1.6vw, 1.35rem);
  position:relative;
  z-index:4;
}
.hero-kopfzeile{
  font-family:var(--f-mono);
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  color: var(--grau-warm);
  border-bottom:1px dashed rgba(228,217,189,.35);
  padding-bottom:1rem;
  margin-bottom: clamp(1.5rem, 4vw, 3rem);
}
.hero-kopfzeile b{ color: var(--aurora); }
.hero-logo{
  width: clamp(3.2rem, 6vw, 5rem);
  aspect-ratio:1;
  background:var(--grau-warm);
  -webkit-mask:url("shared/images/logo-neu-weiss.png") center / contain no-repeat;
  mask:url("shared/images/logo-neu-weiss.png") center / contain no-repeat;
  flex:0 0 auto;
}
.hero h1{
  font-size: clamp(2.8rem, 10vw, 7.5rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.hero h1 span{ display:block; }
.hero h1 .rost{ color: var(--rost); }
.hero h1 .aurora-txt{ color: var(--aurora); }

/* Catchphrase: zeilenweise gestaffelt einblenden */
.hero h1 span{
  opacity:0;
  transform: translateY(.6em);
  animation: hero-zeile-einblenden .8s cubic-bezier(.16,.8,.3,1) forwards;
}
.hero h1 span:nth-child(1){ animation-delay:.15s; }
.hero h1 span:nth-child(2){ animation-delay:.4s; }
.hero h1 span:nth-child(3){ animation-delay:.65s; }
@keyframes hero-zeile-einblenden{
  to{ opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .hero h1 span{ animation:none; opacity:1; transform:none; }
}
.hero .sub{
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  max-width: 38rem;
  margin-bottom: 1.75rem;
  color: var(--grau-warm);
}
.cta-reihe{ display:flex; gap:1rem; flex-wrap:wrap; }
.chips{
  list-style:none;
  display:flex; flex-wrap:wrap; gap:.5rem;
  margin-top:1.6rem;
}
.chips li{
  font-family:var(--f-mono);
  font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  border:1.5px solid rgba(228,217,189,.55);
  padding:.4rem .75rem;
  color: var(--papier);
  background: rgba(15,29,23,.5);
}
.chips li b{ color: var(--aurora); font-weight:700; }

/* ================================================================
   2 · FAKTEN — Druckleiste
   ================================================================ */
.fakten{
  background: var(--papier);
  color: var(--tinte);
  border-bottom: 3px solid var(--rost);
}
.fakten ul{
  list-style:none;
  max-width:76rem; margin:0 auto;
  display:grid;
  grid-template-columns: repeat(5,1fr);
}
.fakten li{
  padding:1.1rem var(--rand);
  border-right: var(--linie-dunkel);
  font-family:var(--f-mono);
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
}
.fakten li:last-child{ border-right:none; }
.fakten li b{
  display:block;
  font-family:var(--f-display);
  font-weight:900;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  letter-spacing:-.01em;
}
.fakten li b .ein{ color: var(--rost); }

/* ================================================================
   3 · MANIFEST
   ================================================================ */
.manifest h2{
  font-size: clamp(2.4rem, 7vw, 5.5rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.manifest h2 span{ display:block; }
.manifest-spalten{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  border: 1px solid rgba(228,217,189,.35);
}
.manifest-spalten > div{
  padding:1.6rem 1.4rem;
  border-right:1px solid rgba(228,217,189,.35);
}
.manifest-spalten > div:last-child{ border-right:none; }
.manifest-spalten h3{
  font-family:var(--f-mono);
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--ocker);
  margin-bottom:.7rem;
}
.manifest-spalten p{ font-size:.97rem; color: var(--grau-warm); }

/* ================================================================
   4 · FANGKARTE — Datenblatt auf Papierplatte
   ================================================================ */
.fangkarte h2{ font-size: clamp(2rem, 5vw, 3.6rem); margin-bottom:.75rem; }
.fangkarte h2 span{ display:block; }
.fang-tabelle{
  width:100%;
  border-collapse:collapse;
  margin-top:2rem;
  border: 3px solid var(--tinte);
  background: rgba(255,255,255,.25);
}
.fang-tabelle caption{
  caption-side:top; text-align:left;
  font-family:var(--f-mono);
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  padding-bottom:.5rem;
  color: var(--tinte);
  opacity:.75;
}
.fang-tabelle th, .fang-tabelle td{
  font-family:var(--f-mono);
  font-size:.78rem;
  letter-spacing:.05em;
  text-align:left;
  padding:.8rem .9rem;
  border-bottom:1px dashed var(--tinte);
  vertical-align:top;
}
.fang-tabelle thead th{
  text-transform:uppercase; letter-spacing:.12em; font-size:.68rem;
  background: var(--tinte); color: var(--papier);
  border-bottom:3px solid var(--tinte);
}
.fang-tabelle tbody tr.fang-zeile:last-of-type td{ border-bottom:none; }
.fang-tabelle tbody tr.fang-detail:last-of-type td{ border-bottom:none; }
.fang-tabelle tbody tr.fang-zeile{ cursor:pointer; }
.fang-tabelle tbody tr.fang-zeile:hover{ background: rgba(200,149,47,.1); }
.fang-tabelle .art{
  font-family:var(--f-display);
  font-weight:900; text-transform:uppercase;
  font-size:1.05rem; letter-spacing:0;
  padding:0;
}
.fang-tabelle .punkt{ color: var(--rost); }

/* Ausklappbare Fanganleitung je Fischart */
.fang-toggle{
  all: unset;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  cursor:pointer;
  font-family:var(--f-display);
  font-weight:900; text-transform:uppercase;
  font-size:1.05rem; letter-spacing:0;
  color: inherit;
  padding:.8rem .9rem;
}
.fang-toggle-icon{
  position:relative;
  width:.85em; height:.85em;
  flex:none;
}
.fang-toggle-icon::before,
.fang-toggle-icon::after{
  content:"";
  position:absolute;
  background: var(--rost);
  transition: transform .2s ease;
}
.fang-toggle-icon::before{
  left:0; top:50%; width:100%; height:2px;
  transform: translateY(-50%);
}
.fang-toggle-icon::after{
  top:0; left:50%; width:2px; height:100%;
  transform: translateX(-50%);
}
.fang-toggle[aria-expanded="true"] .fang-toggle-icon::after{
  transform: translateX(-50%) scaleY(0);
}

.fang-detail td{ padding:0; border-bottom:none; }
.fang-detail-collapse{
  max-height:0;
  overflow:hidden;
  transition: max-height .32s ease;
}
.fang-detail-inhalt{
  font-family: var(--f-serif);
  font-size:.92rem;
  max-width:52rem;
  padding: 0 1.1rem 1.1rem;
  border-bottom:1px dashed var(--tinte);
}
.fang-detail-inhalt:has(.fang-illustration){
  max-width:none;
  display:grid;
  grid-template-columns:minmax(12rem, 18rem) minmax(0, 1fr);
  gap:1.2rem 1.5rem;
  align-items:center;
}
.fang-detail-inhalt:has(.fang-illustration) .fang-illustration{
  grid-column:1;
  grid-row:1 / span 2;
}
.fang-detail-inhalt:has(.fang-illustration) .fang-steckbrief,
.fang-detail-inhalt:has(.fang-illustration) .fang-anleitung{
  grid-column:2;
}
.fang-detail-inhalt:has(.fang-illustration) .fang-steckbrief{
  margin-top:.45rem;
  white-space:nowrap;
}
.fang-steckbrief{
  margin-bottom:.8rem;
  opacity:.9;
  font-size:1rem;
  line-height:1.55;
}
.fang-anleitung{
  list-style:none;
  display:grid;
  gap:.5rem;
}
.fang-anleitung li{
  font-size:.86rem;
  line-height:1.45;
  padding:.35rem 0;
  border-bottom:1px dashed rgba(24,38,32,.18);
}
.fang-anleitung li:last-child{ border-bottom:none; }
.fang-anleitung b{
  font-family:var(--f-mono);
  text-transform:uppercase; letter-spacing:.08em; font-size:.68rem;
  color: var(--rost);
  margin-right:.5rem;
}
.fang-illustration{
  position:relative;
  margin-top:.35rem;
  border:2px solid rgba(24,38,32,.25);
  background:#efe2bf;
  box-shadow:4px 4px 0 rgba(24,38,32,.14);
  display:inline-block;
  justify-self:start;
  padding:.45rem;
}
/* Klebestreifen, wie bei eingeklebten Fotos */
.fang-illustration::before,
.fang-illustration::after{
  content:"";
  position:absolute;
  width:4.2rem; height:1.25rem;
  background: rgba(214,200,160,.85);
  border:1px solid rgba(24,38,32,.25);
  box-shadow:0 1px 2px rgba(24,38,32,.2);
  z-index:2;
}
.fang-illustration::before{ top:-.6rem; left:-1rem; transform:rotate(-38deg); }
.fang-illustration::after{ bottom:-.6rem; right:-1rem; transform:rotate(-38deg); }
.fang-illustration img{
  display:block;
  width:auto;
  max-width:100%;
  height:auto;
  object-fit:contain;
  mix-blend-mode:multiply;
}
.fang-illustration figcaption{
  display:none;
}

@media (max-width:52rem){
  .fang-tabelle thead{ display:none; }
  .fang-tabelle, .fang-tabelle tbody, .fang-tabelle tr, .fang-tabelle td{ display:block; width:100%; }
  .fang-tabelle tr.fang-zeile{ border-bottom: var(--linie-dunkel); padding:.4rem 0; }
  .fang-tabelle td{ border-bottom:none; padding:.35rem .9rem; }
  .fang-tabelle .art{ padding:0; }
  .fang-toggle{ width:100%; padding:.35rem .9rem; }
  .fang-detail td{ padding:0; }
  .fang-detail-inhalt{ padding:0 .9rem 1rem; }
  .fang-detail-inhalt:has(.fang-illustration){
    grid-template-columns:1fr;
  }
  .fang-detail-inhalt:has(.fang-illustration) .fang-illustration,
  .fang-detail-inhalt:has(.fang-illustration) .fang-steckbrief,
  .fang-detail-inhalt:has(.fang-illustration) .fang-anleitung{
    grid-column:1;
    grid-row:auto;
  }
  .fang-detail-inhalt:has(.fang-illustration) .fang-steckbrief{
    white-space:normal;
  }
  .fang-tabelle td[data-l]::before{
    content: attr(data-l) " · ";
    text-transform:uppercase; letter-spacing:.12em; font-size:.62rem;
    color: var(--rost);
  }
}

/* ================================================================
   5 · FERIENHAUS — warme Papierplatte
   ================================================================ */
.haus .inner{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(2rem,5vw,4.5rem);
  align-items:start;
}
.haus h2{ font-size: clamp(2rem, 4.8vw, 3.4rem); margin-bottom:1.25rem; }
.haus figure img{
  border:3px solid var(--tinte);
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  filter:saturate(.92) contrast(1.04);
}
.haus figcaption{
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; padding-top:.55rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.haus-bild{ display:flex; flex-direction:column; gap:1rem; }
.haus-galerie{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:.75rem;
}
.haus-galerie img{
  border:3px solid var(--tinte);
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  filter:saturate(.92) contrast(1.04);
}
@media (max-width:30rem){
  .haus-galerie{ grid-template-columns:repeat(3,1fr); gap:.5rem; }
}
.inventar{
  list-style:none;
  margin:1.75rem 0;
  border:3px solid var(--tinte);
  background: rgba(255,255,255,.3);
}
.inventar li{
  font-family:var(--f-mono);
  font-size:.8rem; letter-spacing:.05em; text-transform:uppercase;
  padding:.7rem .9rem;
  border-bottom:1px dashed var(--tinte);
  display:flex; gap:.8rem;
}
.inventar li:last-child{ border-bottom:none; }
.inventar li::before{ content:"[✓]"; color: var(--moos); font-weight:700; flex:none; }

/* ================================================================
   6 · ABENTEUER — drei Plakate nebeneinander
   ================================================================ */
/* ================================================================
   5B · HAUS-RUNDGANG — scroll-gesteuerte POV-Sequenz
   ================================================================ */
.haus-rundgang-teaser{
  background:#EFE7D1;
  color:var(--tinte);
  border-top:0;
  border-bottom:3px solid var(--tinte);
}
.haus-rundgang-teaser .inner{
  padding-top:clamp(1.1rem, 2vw, 1.6rem);
  padding-bottom:clamp(1.1rem, 2vw, 1.6rem);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.haus-rundgang-teaser .mono{
  display:block;
  color:var(--rost);
  font-size:.66rem;
  margin-bottom:.12rem;
}
.haus-rundgang-teaser strong{
  display:block;
  font-family:var(--f-display);
  font-size:clamp(1.15rem, 2vw, 1.65rem);
  line-height:1.05;
  text-transform:uppercase;
}
.haus-rundgang-teaser__knopf{
  flex:none;
  white-space:nowrap;
  position:relative;
  min-height:3.25rem;
  padding-inline:1.35rem;
  background:var(--rost);
  color:var(--papier);
  box-shadow:6px 6px 0 var(--tinte);
  transform:translate(-2px,-2px);
  isolation:isolate;
  overflow:hidden;
}
.haus-rundgang-teaser__knopf::after{
  content:"";
  position:absolute;
  inset:-40%;
  z-index:-1;
  background:linear-gradient(110deg, transparent 36%, rgba(255,255,255,.28) 48%, transparent 60%);
  transform:translateX(-55%);
  transition:transform .45s ease;
}
.haus-rundgang-teaser__knopf:hover,
.haus-rundgang-teaser__knopf:focus-visible{
  transform:translate(-5px,-5px);
  box-shadow:9px 9px 0 var(--tinte);
}
.haus-rundgang-teaser__knopf:hover::after,
.haus-rundgang-teaser__knopf:focus-visible::after{
  transform:translateX(45%);
}
.haus-scroll{
  position:fixed;
  inset:0;
  z-index:400;
  height:auto;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  background:var(--nacht);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:scale(.965);
  clip-path:circle(0 at var(--tour-x, 50%) var(--tour-y, 50%));
  filter:blur(10px);
  transition:
    opacity .42s ease,
    transform .7s cubic-bezier(.16,1,.3,1),
    clip-path .76s cubic-bezier(.16,1,.3,1),
    filter .7s ease;
}
.haus-scroll[hidden]{
  display:none;
}
.haus-scroll.offen{
  opacity:1;
  pointer-events:auto;
  visibility:visible;
  transform:scale(1);
  clip-path:circle(150vmax at var(--tour-x, 50%) var(--tour-y, 50%));
  filter:blur(0);
}
.haus-scroll.schliesst{
  opacity:0;
  transform:scale(.985) translateY(.75rem);
  clip-path:circle(0 at var(--tour-x, 50%) var(--tour-y, 50%));
  filter:blur(8px);
  transition:
    opacity .34s ease,
    transform .48s cubic-bezier(.7,0,.84,0),
    clip-path .52s cubic-bezier(.7,0,.84,0),
    filter .34s ease;
}
.haus-scroll.schliesst-weiter{
  opacity:0;
  transform:scale(1.035) translateY(-2.5rem);
  clip-path:inset(0 0 100% 0);
  filter:blur(8px);
  transition:
    opacity .42s ease,
    transform .58s cubic-bezier(.32,0,.67,0),
    clip-path .62s cubic-bezier(.32,0,.67,0),
    filter .42s ease;
}
.haus-scroll__track{
  position:relative;
  height:var(--scroll-laenge, 560vh);
  min-height:420vh;
}
.haus-scroll__sticky{
  position:sticky;
  top:0;
  height:100vh;
  height:100dvh;
  overflow:hidden;
  isolation:isolate;
  background:var(--nacht);
}
.haus-scroll__schliessen{
  position:fixed;
  top:clamp(.9rem, 2vw, 1.35rem);
  right:clamp(.9rem, 2vw, 1.35rem);
  z-index:5;
  width:2.75rem;
  height:2.75rem;
  display:grid;
  place-items:center;
  border:2px solid rgba(228,217,189,.72);
  border-radius:50%;
  background:rgba(15,29,23,.72);
  color:var(--papier);
  font-family:var(--f-display);
  font-size:1.8rem;
  line-height:1;
  cursor:pointer;
}
.haus-scroll__schliessen:hover,
.haus-scroll__schliessen:focus-visible{
  color:var(--nacht);
  background:var(--aurora);
  border-color:var(--aurora);
}
.haus-scroll__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  background:var(--nacht) url("shared/images/bestand/haus-oben-02.jpg") center / cover no-repeat;
}
.haus-scroll__schleier{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(15,29,23,.68), rgba(15,29,23,.12) 42%, rgba(15,29,23,.42)),
    linear-gradient(180deg, rgba(15,29,23,.34), transparent 38%, rgba(15,29,23,.58));
}
.haus-scroll__rahmen{
  position:absolute;
  inset:clamp(.7rem, 1.8vw, 1.4rem);
  z-index:2;
  pointer-events:none;
  border:1px solid rgba(228,217,189,.34);
  box-shadow:inset 0 0 0 1px rgba(15,29,23,.28);
}
.haus-scroll__overlay{
  position:absolute;
  left:var(--rand);
  bottom:clamp(2rem, 7vw, 5rem);
  z-index:3;
  width:min(34rem, calc(100% - (var(--rand) * 2)));
  color:var(--papier);
}
.haus-scroll__overlay h2{
  font-size:clamp(2rem, 6.2vw, 5rem);
  margin-bottom:1rem;
}
.haus-scroll__overlay h2 span{ display:block; }
.haus-scroll__overlay p:not(.eyebrow){
  max-width:27rem;
  color:var(--grau-warm);
  font-size:clamp(1rem, 1.4vw, 1.18rem);
}
.haus-scroll__marken{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  margin-top:1.25rem;
}
.haus-scroll__marken span{
  font-family:var(--f-mono);
  font-size:.62rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--papier);
  border:1px solid rgba(228,217,189,.45);
  background:rgba(15,29,23,.54);
  padding:.36rem .58rem;
  opacity:.34;
  transition:opacity .18s ease, background .18s ease, color .18s ease;
}
.haus-scroll__marken span.aktiv{
  opacity:1;
  color:var(--nacht);
  background:var(--aurora);
  border-color:var(--aurora);
}
.haus-scroll__ausgang{
  position:fixed;
  left:50%;
  bottom:clamp(1.25rem, 4vw, 2.4rem);
  z-index:4;
  display:flex;
  align-items:center;
  gap:.9rem;
  padding:.7rem .75rem .7rem 1rem;
  border:1px solid rgba(228,217,189,.42);
  background:rgba(15,29,23,.78);
  color:var(--papier);
  box-shadow:0 1rem 2.5rem rgba(0,0,0,.22);
  opacity:0;
  transform:translate(-50%, .7rem);
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.haus-scroll.ende .haus-scroll__ausgang{
  opacity:1;
  transform:translate(-50%, 0);
  pointer-events:auto;
}
.haus-scroll__ausgang .mono{
  color:var(--grau-warm);
  font-size:.62rem;
  white-space:nowrap;
}
.haus-scroll__ausgang .btn{
  padding:.65rem .9rem;
  white-space:nowrap;
}
.haus-scroll__track::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:18vh;
  pointer-events:none;
  background:linear-gradient(180deg, transparent, var(--nacht));
}

@media (max-width:52rem){
  .haus-rundgang-teaser .inner{
    align-items:flex-start;
    flex-direction:column;
  }
  .haus-rundgang-teaser__knopf{
    width:100%;
    text-align:center;
  }
  .haus-scroll__track{ height:500vh; }
  .haus-scroll__schleier{
    background:
      linear-gradient(180deg, rgba(15,29,23,.22), transparent 34%, rgba(15,29,23,.72)),
      linear-gradient(90deg, rgba(15,29,23,.42), transparent 48%);
  }
  .haus-scroll__overlay{ bottom:clamp(1.4rem, 6vw, 2.4rem); }
  .haus-scroll__overlay h2{ font-size:clamp(2rem, 11vw, 4rem); }
  .haus-scroll__marken{ gap:.4rem; }
  .haus-scroll__marken span{ font-size:.56rem; padding:.3rem .45rem; }
  .haus-scroll__ausgang{
    left:var(--rand);
    right:var(--rand);
    bottom:clamp(1rem, 5vw, 1.5rem);
    transform:translateY(.7rem);
    justify-content:space-between;
  }
  .haus-scroll.ende .haus-scroll__ausgang{
    transform:translateY(0);
  }
  .haus-scroll__ausgang .btn{
    flex:1;
    text-align:center;
  }
  .haus-scroll__ausgang .mono{
    display:none;
  }
}

@media (prefers-reduced-motion: reduce){
  .haus-rundgang-teaser{ display:none; }
  .haus-scroll__sticky{
    position:relative;
    height:min(74vh, 42rem);
    background:var(--nacht) url("shared/images/bestand/haus-oben-02.jpg") center / cover no-repeat;
  }
  .haus-scroll__video{ display:none; }
}

.abenteuer .intro{ max-width:42rem; margin-bottom:3rem; }
.abenteuer h2{ font-size: clamp(2.2rem, 6vw, 4.5rem); margin-bottom:1rem; }
.abenteuer h2 span{ display:block; }
.plakat-reihe{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.plakat{
  border: var(--linie);
  background: var(--nacht-2);
  display:flex; flex-direction:column;
  isolation:isolate;
}
.plakat-bild{
  position:relative;
  aspect-ratio: 4/3;
  overflow:hidden;
  border-bottom: var(--linie);
}
.plakat-bild img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.85) contrast(1.08) brightness(.95);
  transition: transform .4s ease;
}
.plakat:nth-child(1) .plakat-bild img{ object-position:center 28%; }
.plakat:nth-child(2) .plakat-bild img{ object-position:center 34%; }
.plakat:nth-child(3) .plakat-bild img{ object-position:center 46%; }
.plakat:hover .plakat-bild img{ transform:scale(1.04); }
.plakat-bild .band{
  position:absolute; top:.9rem; left:-.5rem;
  font-family:var(--f-mono);
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  background: var(--rost); color: var(--papier);
  padding:.4rem .9rem .4rem 1.2rem;
  z-index:2;
}
.plakat-bild .band.sommer{ background: var(--ocker); color: var(--tinte); }
.plakat-bild .band.winter{ background: var(--eis); color: var(--tinte); }
.plakat-text{ padding:1.4rem 1.4rem 1.6rem; }
.plakat-text h3{
  font-family:var(--f-display);
  font-weight:900; text-transform:uppercase;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height:.92;
  margin-bottom:.6rem;
}
.plakat-text .kurz{
  font-size:.93rem; color: var(--grau-warm);
  margin-bottom:1rem;
}
.plakat-text ul{
  list-style:none;
  font-family:var(--f-mono);
  font-size:.76rem; letter-spacing:.07em; text-transform:uppercase;
  display:grid; gap:.5rem;
}
.plakat-text ul li{
  border-bottom:1px dashed rgba(228,217,189,.25);
  padding-bottom:.4rem;
}
.plakat-text ul li::before{ content:"+ "; color: var(--aurora); }

/* ================================================================
   7 · GALERIE — eingeklebte Abzüge (Polaroid-Optik)
   ================================================================ */
.galerie h2{ font-size: clamp(2.2rem, 6vw, 4.5rem); margin-bottom:.75rem; }
.galerie h2 span{ display:block; }
.galerie{
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 24%, rgba(24,38,32,.05) 0 1px, transparent 1.4px),
    radial-gradient(circle at 62% 58%, rgba(24,38,32,.045) 0 1px, transparent 1.4px),
    radial-gradient(circle at 84% 18%, rgba(24,38,32,.05) 0 1px, transparent 1.4px),
    radial-gradient(circle at 36% 82%, rgba(24,38,32,.04) 0 1px, transparent 1.4px),
    linear-gradient(115deg, rgba(180,73,31,.045) 0%, transparent 40%),
    linear-gradient(155deg, #EFE7D1 0%, #E9DFC1 55%, #E4D8B8 100%);
  background-size:4.6rem 4.6rem, 3.8rem 3.8rem, 5.4rem 5.4rem, 4.2rem 4.2rem, 100% 100%, 100% 100%;
}
.polaroid-raster{
  display:grid;
  grid-template-columns: repeat(6,1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-top:3rem;
  width:min(calc(100vw - (var(--rand) * 2)), 112rem);
  margin-left:50%;
  transform:translateX(-50%);
}
.polaroid-raster figure{
  position:relative;
  background: #F5EEDA;
  border:1px solid rgba(24,38,32,.4);
  padding:.55rem .55rem 0;
  box-shadow: 4px 5px 0 rgba(15,29,23,.55);
}
/* Klebestreifen, wie bei eingeklebten Fotos */
.polaroid-raster figure::before,
.polaroid-raster figure::after{
  content:"";
  position:absolute;
  width:3.6rem; height:1.15rem;
  background: rgba(214,200,160,.85);
  border:1px solid rgba(24,38,32,.25);
  box-shadow:0 1px 2px rgba(24,38,32,.2);
  z-index:2;
}
.polaroid-raster figure::before{ top:-.55rem; left:-.7rem; transform:rotate(-38deg); }
.polaroid-raster figure::after{ bottom:-.55rem; right:-.7rem; transform:rotate(-38deg); }

/* Unregelmäßige Varianten, damit nicht jedes Foto gleich beklebt aussieht */
.polaroid-raster figure:nth-child(5n+1)::before{ top:-.5rem; left:-.5rem; transform:rotate(-24deg); }
.polaroid-raster figure:nth-child(5n+1)::after{ bottom:-.6rem; right:-.9rem; width:3.1rem; transform:rotate(-52deg); }

.polaroid-raster figure:nth-child(5n+2)::before{ top:-.65rem; left:-1rem; width:3.9rem; transform:rotate(-48deg); }
.polaroid-raster figure:nth-child(5n+2)::after{ bottom:-.45rem; right:-.5rem; width:3.2rem; transform:rotate(-18deg); }

.polaroid-raster figure:nth-child(5n+3)::before{ top:-.7rem; left:.6rem; width:3.4rem; transform:rotate(8deg); }
.polaroid-raster figure:nth-child(5n+3)::after{ bottom:-.5rem; right:-.75rem; width:3.7rem; transform:rotate(-40deg); }

.polaroid-raster figure:nth-child(5n+4)::before{ top:-.5rem; left:-.85rem; width:3.3rem; transform:rotate(-33deg); }
.polaroid-raster figure:nth-child(5n+4)::after{ bottom:-.7rem; right:.4rem; width:3.8rem; transform:rotate(20deg); }

.polaroid-raster figure:nth-child(5n+5)::before{ top:-.6rem; left:-.4rem; width:3rem; transform:rotate(-12deg); }
.polaroid-raster figure:nth-child(5n+5)::after{ bottom:-.55rem; right:-1rem; width:3.9rem; transform:rotate(-46deg); }

/* Kleine Fotos: nur ein Streifen oben mittig statt zwei Ecken */
.polaroid-raster figure:not(.gross)::after{ content:none; }
.polaroid-raster figure:not(.gross)::before{
  top:-.6rem; left:50%; right:auto;
  width:3.4rem;
  transform: translateX(-50%) rotate(-3deg);
}
.polaroid-raster figure:nth-child(5n+2):not(.gross)::before{ transform: translateX(-50%) rotate(2deg); }
.polaroid-raster figure:nth-child(5n+4):not(.gross)::before{ transform: translateX(-50%) rotate(-5deg); }
.polaroid-raster img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  object-position:center;
  filter: saturate(.9) contrast(1.06) sepia(.08);
  border:1px solid rgba(24,38,32,.3);
}
.polaroid-raster figure:nth-child(1) img{ object-position:center 34%; }
.polaroid-raster figure:nth-child(2) img{ object-position:center 46%; }
.polaroid-raster figure:nth-child(3) img{ object-position:center 56%; }
.polaroid-raster figure:nth-child(4) img{ object-position:center 58%; }
.polaroid-raster figure:nth-child(7) img{ object-position:center 36%; }
.polaroid-raster figure:nth-child(8) img{ object-position:center 34%; }
.polaroid-raster figure:nth-child(9) img,
.polaroid-raster figure:nth-child(10) img{ object-position:center 38%; }
.polaroid-raster figure:nth-child(11) img{ object-position:center 26%; }
.polaroid-raster figure:nth-child(12) img{ object-position:center 54%; }
.polaroid-raster figure:nth-child(13) img{ object-position:center 36%; }
.polaroid-raster figure:nth-child(14) img{ object-position:center 30%; }
.polaroid-raster figure:nth-child(15) img{ object-position:center 40%; }
.polaroid-raster figure:nth-child(16) img{ object-position:center 46%; }
.polaroid-raster figure:nth-child(17) img{ object-position:center 48%; }
.polaroid-raster figcaption{
  font-family: var(--f-mono);
  font-size:.6rem; letter-spacing:.08em; text-transform:uppercase;
  color: var(--tinte);
  padding:.5rem .1rem;
  display:flex; justify-content:flex-start; gap:.4rem; flex-wrap:wrap;
  line-height:1.35;
}
.polaroid-raster figcaption span{ color: var(--rost); }
.polaroid-raster figure:nth-child(5n+1){ transform: rotate(-1.6deg); }
.polaroid-raster figure:nth-child(5n+2){ transform: rotate(1.1deg); }
.polaroid-raster figure:nth-child(5n+4){ transform: rotate(-.8deg); }
.polaroid-raster figure:nth-child(5n+5){ transform: rotate(1.4deg); }
.polaroid-raster .gross{ grid-column: span 3; grid-row: span 2; }
.polaroid-raster .breit{ grid-column: span 2; }
.polaroid-oeffnen{
  all:unset;
  display:block;
  width:100%;
  cursor:pointer;
}
.polaroid-oeffnen:focus-visible{ outline: 3px solid var(--rost); outline-offset: 2px; }

/* Ruhigere Galerie-Komposition: kuratierte Auswahl auf der Seite,
   alle Fotos bleiben per Klick im Album-Overlay erreichbar. */
.polaroid-raster{
  position:relative;
  grid-template-columns: repeat(12,1fr);
  grid-auto-flow:dense;
  align-items:center;
  gap: clamp(.6rem, 1.1vw, 1rem);
  margin-top:clamp(1.6rem, 3vw, 2.4rem);
  margin-left:auto;
  margin-right:auto;
  transform:none;
  width:min(calc(100vw - (var(--rand) * 2)), 84rem);
  padding:clamp(1rem, 1.8vw, 1.9rem);
  border: .55rem solid #7C5A3B;
  border-image: linear-gradient(115deg, #8B6743, #6B4C2E 30%, #7C5A3B 55%, #5E4126 100%) 1;
  background:
    radial-gradient(circle at 22% 35%, rgba(60,38,18,.4) 0 .045rem, transparent .06rem),
    radial-gradient(circle at 68% 60%, rgba(255,241,214,.28) 0 .04rem, transparent .055rem),
    radial-gradient(circle at 42% 80%, rgba(60,38,18,.32) 0 .05rem, transparent .065rem),
    radial-gradient(circle at 12% 68%, rgba(255,241,214,.22) 0 .045rem, transparent .06rem),
    radial-gradient(circle at 85% 18%, rgba(60,38,18,.36) 0 .04rem, transparent .055rem),
    radial-gradient(circle at 55% 12%, rgba(255,241,214,.24) 0 .05rem, transparent .065rem),
    radial-gradient(circle at 30% 55%, rgba(60,38,18,.28) 0 .06rem, transparent .08rem),
    radial-gradient(circle at 78% 82%, rgba(255,241,214,.2) 0 .045rem, transparent .06rem),
    radial-gradient(circle at 5% 12%,  rgba(60,38,18,.3) 0 .05rem, transparent .065rem),
    radial-gradient(circle at 95% 45%, rgba(255,241,214,.22) 0 .05rem, transparent .065rem),
    linear-gradient(160deg, #C7A06B 0%, #D9B87F 35%, #C0965E 70%, #A87F4E 100%);
  background-size:
    1rem 1rem, 1.3rem 1.3rem, 1.5rem 1.5rem, 1.15rem 1.15rem, 1.7rem 1.7rem,
    1.35rem 1.35rem, 1.9rem 1.9rem, 1.2rem 1.2rem, 1.6rem 1.6rem, 1.4rem 1.4rem,
    100% 100%;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.12),
    inset 0 3px 1.2rem rgba(24,38,32,.28),
    0 1.4rem 3.2rem rgba(15,29,23,.22),
    0 .3rem .6rem rgba(15,29,23,.14);
}
.polaroid-raster::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 3.5rem rgba(15,29,23,.28);
  z-index:1;
}
.galerie .inner{ max-width:none; }
.galerie .eyebrow,
.galerie h2{
  max-width:76rem;
  margin-left:auto;
  margin-right:auto;
}
.galerie .inner > p{
  width:min(38rem, 100%);
  margin-left:calc((100% - min(76rem, 100%)) / 2);
  margin-right:auto;
}
.galerie .eyebrow{ margin-bottom:1.4rem; }
.galerie h2{ margin-bottom:.75rem; }
.polaroid-raster figure{
  display:none;
  padding:.5rem .5rem 0;
  background: linear-gradient(155deg, #FBF6E6 0%, #F5EEDA 55%, #EFE6CC 100%);
  box-shadow:
    0 .2rem .3rem rgba(15,29,23,.22),
    0 .9rem 1.6rem rgba(15,29,23,.2),
    3px 4px 0 rgba(15,29,23,.28);
  transform:rotate(var(--foto-rot, 0deg)) translateY(var(--foto-y, 0)) !important;
  transition:transform .22s ease, box-shadow .22s ease;
  z-index:2;
}
.polaroid-raster figure:hover{
  transform:rotate(0deg) translateY(-.35rem) scale(1.015) !important;
  box-shadow:
    0 .3rem .4rem rgba(15,29,23,.24),
    0 1.3rem 2.2rem rgba(15,29,23,.26),
    5px 6px 0 rgba(15,29,23,.3);
  z-index:4;
}
.polaroid-raster figure::after{ content:none !important; }
.polaroid-raster figure::before{
  top:-.6rem !important;
  left:50% !important;
  right:auto !important;
  width:3.6rem !important;
  height:1.2rem !important;
  transform:translateX(-50%) rotate(-3deg) !important;
  background:
    repeating-linear-gradient(100deg, rgba(255,255,255,.35) 0 2px, transparent 2px 5px),
    linear-gradient(rgba(226,213,175,.68), rgba(226,213,175,.68));
  border:1px solid rgba(24,38,32,.2);
  box-shadow:0 2px 3px rgba(24,38,32,.22), inset 0 1px 0 rgba(255,255,255,.4);
  backdrop-filter: saturate(1.1);
}
.polaroid-raster figure:nth-of-type(3n+2)::before{ transform:translateX(-50%) rotate(2deg) !important; }
.polaroid-raster figure:nth-of-type(4n)::before{ transform:translateX(-50%) rotate(-5deg) !important; }
.polaroid-raster img{
  filter:saturate(.92) contrast(1.04) sepia(.06);
  box-shadow: inset 0 0 0 1px rgba(24,38,32,.15);
}
.polaroid-raster figcaption{ font-size:.58rem; padding:.5rem .05rem .55rem; }
.foto-notiz{
  position:relative;
  display:block;
  grid-column:span 3;
  align-self:center;
  padding:1.05rem 1rem 1.35rem;
  background:
    linear-gradient(135deg, transparent calc(100% - 1.35rem), rgba(255,255,255,.6) calc(100% - 1.3rem), rgba(255,255,255,.85) calc(100% - .6rem), transparent calc(100% - .55rem)),
    radial-gradient(circle at 85% 12%, rgba(255,255,255,.25) 0, transparent 55%),
    #E7D86E;
  color:var(--tinte);
  box-shadow:
    0 .3rem .35rem rgba(24,38,32,.14),
    0 .85rem 1.4rem rgba(24,38,32,.2),
    2px 3px 0 rgba(24,38,32,.24);
  transform:rotate(var(--notiz-rot, -2deg));
  min-height:6.5rem;
  transition:transform .2s ease, box-shadow .2s ease;
  z-index:2;
}
.foto-notiz:hover{
  transform:rotate(0deg) translateY(-.2rem);
  box-shadow:
    0 .35rem .4rem rgba(24,38,32,.16),
    0 1.1rem 1.8rem rgba(24,38,32,.24),
    3px 4px 0 rgba(24,38,32,.26);
  z-index:4;
}
.foto-notiz::before{
  content:"";
  position:absolute;
  top:-.55rem;
  left:50%;
  width:3.3rem;
  height:1.05rem;
  transform:translateX(-50%) rotate(3deg);
  background:
    repeating-linear-gradient(100deg, rgba(255,255,255,.35) 0 2px, transparent 2px 5px),
    linear-gradient(rgba(226,213,175,.86), rgba(226,213,175,.86));
  border:1px solid rgba(24,38,32,.18);
  box-shadow:0 2px 3px rgba(24,38,32,.2), inset 0 1px 0 rgba(255,255,255,.4);
}
.foto-notiz::after{
  content:"";
  position:absolute;
  right:0; bottom:0;
  width:0; height:0;
  border-style:solid;
  border-width:0 0 1.3rem 1.3rem;
  border-color:transparent transparent rgba(24,38,32,.14) transparent;
}
.foto-notiz span{
  display:block;
  font-family:var(--f-mono);
  font-size:.62rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--rost);
  margin-bottom:.55rem;
}
.foto-notiz p{
  font-family:"Permanent Marker", var(--f-serif);
  font-size:.92rem;
  line-height:1.5;
  letter-spacing:.01em;
}
/* Explizite Reihenfolge: 3 Reihen à 12 Spalten, Fotos und Notizen gemischt,
   damit keine Zeile mit einem einsamen Rest endet. */
.foto-notiz--eins{
  order:1;
  grid-column:span 3;
  --notiz-rot:-3deg;
}
.foto-notiz--zwei{
  order:4;
  grid-column:span 2;
  --notiz-rot:2.6deg;
  background:
    linear-gradient(135deg, transparent calc(100% - 1.35rem), rgba(255,255,255,.6) calc(100% - 1.3rem), rgba(255,255,255,.85) calc(100% - .6rem), transparent calc(100% - .55rem)),
    radial-gradient(circle at 85% 12%, rgba(255,255,255,.25) 0, transparent 55%),
    #C9DDA6;
}
.polaroid-raster .gross{
  display:block;
  order:3;
  grid-column:span 4;
  grid-row:span 1;
  --foto-rot:-2.4deg;
  --foto-y:.3rem;
}
.polaroid-raster .gross img{ aspect-ratio:1/1; }
.polaroid-raster .breit{
  display:block;
  order:6;
  grid-column:span 6;
  --foto-rot:1.4deg;
  --foto-y:-.15rem;
}
.polaroid-raster .breit img{ aspect-ratio:16/9; }
.polaroid-raster figure:nth-of-type(2),
.polaroid-raster figure:nth-of-type(5),
.polaroid-raster figure:nth-of-type(8),
.polaroid-raster figure:nth-of-type(10),
.polaroid-raster figure:nth-of-type(13),
.polaroid-raster figure:nth-of-type(16),
.polaroid-raster figure:nth-of-type(17){
  display:block;
  grid-column:span 3;
}
.polaroid-raster figure:nth-of-type(2){ --foto-rot:2.8deg; --foto-y:-.35rem; order:2; }
.polaroid-raster figure:nth-of-type(5){ --foto-rot:-2.6deg; --foto-y:.25rem; order:5; }
.polaroid-raster figure:nth-of-type(8){ --foto-rot:1.8deg; --foto-y:-.2rem; order:7; }
.polaroid-raster figure:nth-of-type(10){ --foto-rot:-3.2deg; --foto-y:.2rem; order:8; }
.polaroid-raster figure:nth-of-type(13){ --foto-rot:2.4deg; --foto-y:-.3rem; order:9; }
.polaroid-raster figure:nth-of-type(16){ --foto-rot:-1.6deg; --foto-y:.15rem; order:10; }
.polaroid-raster figure:nth-of-type(17){ --foto-rot:3deg; --foto-y:-.25rem; order:11; }

/* ---------- Filmarchiv: Aufzeichnungen aus Grannäs (YouTube-Facade) ---------- */
.filmarchiv{
  width:100%;
  background: #EFE7D1;
  border-top: 1px solid rgba(24,38,32,.25);
  padding-bottom: clamp(3.5rem, 8vw, 6.5rem);
}
.filmarchiv-inner{
  max-width: 76rem;
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 4.5rem) var(--rand) 0;
}
.filmarchiv__titel{ font-size: clamp(1.4rem, 3.2vw, 2.2rem); margin-bottom: .9rem; }
.filmarchiv__titel span{ display:block; }
.filmarchiv__intro{ max-width:44rem; margin-bottom:2rem; color: var(--tinte); opacity:.85; }

.filmrolle{
  display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.25rem, 2.5vw, 2rem);
}
.filmkarte{
  border: var(--linie-dunkel);
  background: #F5EEDA;
  display:flex; flex-direction:column;
}
.filmkarte__media{ position:relative; background:var(--nacht); }
.filmkarte__ausloeser{
  position:relative; display:block; width:100%;
  aspect-ratio:16/9; overflow:hidden;
  border:none; padding:0; margin:0; cursor:pointer;
  background: var(--nacht);
}
.filmkarte__ausloeser img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.85) contrast(1.08) brightness(.95);
  transition: transform .3s ease, filter .2s ease;
}
.filmkarte__ausloeser:hover img{ transform:scale(1.03); filter:saturate(.95) contrast(1.1) brightness(1); }

/* Sprossenlöcher wie am Filmstreifen-Rand */
.filmkarte__lochreihe{
  position:absolute; left:0; right:0; height:10px;
  background: repeating-linear-gradient(90deg, var(--nacht) 0 6px, transparent 6px 16px);
  z-index:3;
}
.filmkarte__lochreihe::before{
  content:""; position:absolute; inset:0;
  background: repeating-linear-gradient(90deg, transparent 0 3px, rgba(228,217,189,.75) 3px 11px, transparent 11px 16px);
}
.filmkarte__lochreihe--oben{ top:0; }
.filmkarte__lochreihe--unten{ bottom:0; }

.filmkarte__play{
  position:absolute; top:50%; left:50%; z-index:2;
  transform: translate(-50%,-50%);
  width:3.2rem; height:3.2rem;
  display:grid; place-items:center;
  font-size:1.1rem; color: var(--papier);
  background: var(--rost);
  border:2px solid var(--papier);
  border-radius:50%;
  box-shadow:0 0 0 4px rgba(228,217,189,.2);
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.filmkarte__ausloeser:hover .filmkarte__play,
.filmkarte__ausloeser:focus-visible .filmkarte__play{
  transform: translate(-50%,-50%) scale(1.08);
  background: var(--aurora);
  color: var(--nacht);
}
.filmkarte__label{
  position:absolute; left:.6rem; bottom:.6rem; z-index:2;
  font-family: var(--f-mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  background: rgba(15,29,23,.82); color: var(--papier);
  padding:.3em .55em;
}

.filmkarte__info{
  padding:1.1rem 1.1rem 1.3rem;
  display:flex; flex-direction:column; gap:.5rem;
  flex:1;
}
.filmkarte__stempel{ align-self:flex-start; color: var(--rost); }
.filmkarte__info h4{
  font-family: var(--f-display); font-weight:900; text-transform:uppercase;
  font-size:1.05rem; letter-spacing:0; color: var(--tinte);
}
.filmkarte__info p{ font-size:.86rem; color: var(--tinte); opacity:.8; flex:1; }
.filmkarte__extern{
  align-self:flex-start;
  font-family: var(--f-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; color: var(--moos); font-weight:700;
  border-bottom:1px dashed var(--moos);
}
.filmkarte__extern:hover{ color: var(--rost); border-color: var(--rost); }

/* Eingebettetes Video nach Klick: 16:9-Container ersetzt den Auslöser */
.filmkarte__embed{ position:relative; width:100%; aspect-ratio:16/9; background: var(--nacht); }
.filmkarte__embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

.filmarchiv__hinweis{
  margin-top:1.4rem;
  font-size:.68rem; letter-spacing:.03em;
  color: var(--tinte); opacity:.65; max-width:70ch;
}
.filmarchiv__aktion{
  margin-top:1.6rem;
  display:flex;
  justify-content:center;
}
.filmarchiv__kanal{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  min-height:2.9rem;
  padding:.85rem 1.15rem;
  border:2px solid var(--tinte);
  background:var(--tinte);
  color:var(--papier);
  font-family:var(--f-mono);
  font-size:.74rem;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  text-decoration:none;
  box-shadow:5px 5px 0 rgba(15,29,23,.22);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.filmarchiv__kanal:hover,
.filmarchiv__kanal:focus-visible{
  background:var(--rost);
  transform:translate(-2px,-2px);
  box-shadow:7px 7px 0 rgba(15,29,23,.22);
  outline:none;
}

@media (max-width:920px){ .filmrolle{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .filmrolle{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce){
  .filmkarte__ausloeser img{ transition:none; }
  .filmkarte__play{ transition:none; }
}

/* ================================================================
   8 · LAGE — Nachtkarte
   ================================================================ */
.lage .inner{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.05fr);
  gap: clamp(2rem,5vw,4rem);
}
.lage h2{ font-size: clamp(2rem,4.8vw,3.4rem); margin-bottom:1.25rem; }
.lage h2 span{ display:block; }
.karte-box{
  border: var(--linie);
  background: var(--nacht-2);
  position:relative;
  min-height:26rem;
  overflow:hidden;
}
.karte-leaflet{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  filter: saturate(1.15) hue-rotate(-6deg) brightness(.92);
}
.karte-label{
  font-family:var(--f-mono);
  font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  background: var(--papier); color: var(--tinte);
  padding:.28rem .6rem;
  white-space:nowrap;
  border:1px solid rgba(24,38,32,.3);
  box-shadow:2px 2px 0 rgba(15,29,23,.4);
}
.karte-label.ziel{ background: var(--rost); color: var(--papier); }
.karte-leaflet .leaflet-control-attribution{
  font-family:var(--f-mono);
  font-size:.55rem;
  background: rgba(15,29,23,.75);
  color: var(--grau-warm);
}
.karte-leaflet .leaflet-control-attribution a{ color: var(--aurora); }
.karte-leaflet .leaflet-control-zoom a{
  background: var(--nacht-2);
  color: var(--papier);
  border-color: rgba(228,217,189,.35);
}
.karte-leaflet .leaflet-control-zoom a:hover{ background: var(--rost); }
.karte-rand-unten{
  position:absolute; left:0; right:0; bottom:0;
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  border-top:1px dashed rgba(228,217,189,.4);
  padding:.4rem .7rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  color: var(--grau-warm);
  background: rgba(15,29,23,.85);
}
.anreise-liste{ list-style:none; margin-top:1.5rem; border-top: var(--linie); }
.anreise-liste li{
  display:grid; grid-template-columns:6.5rem 1fr; gap:1rem;
  padding:1rem 0;
  border-bottom:1px dashed rgba(228,217,189,.35);
}
.anreise-liste .label{
  font-family:var(--f-mono);
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--aurora);
  padding-top:.25rem;
}
.anreise-liste li > span:last-child{ color: var(--grau-warm); }

/* ================================================================
   9 · GÄSTEMAPPE
   ================================================================ */
.mappe{ background: var(--nacht-2); }
.mappe h2{ font-size: clamp(2rem,4.8vw,3.4rem); margin-bottom:1rem; }
.mappe .kopfblock{
  display:grid;
  grid-template-columns: minmax(0,1.3fr) minmax(0,.7fr);
  gap: clamp(2rem,5vw,4rem);
  align-items:center;
  margin-bottom:2.5rem;
}
.qr-platzhalter{
  justify-self:center;
  width:11rem; height:11rem;
  border:3px dashed var(--eis);
  display:grid; place-items:center;
  font-family:var(--f-mono);
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  text-align:center; color: var(--eis);
  padding:1rem;
  transform:rotate(2deg);
}
.mappe-raster{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap:.9rem;
}
.mappe-raster > div{
  border:1px solid rgba(228,217,189,.35);
  border-top:5px solid var(--eis);
  padding:1rem .9rem 1.2rem;
}
.mappe-raster .nr{
  font-family:var(--f-mono);
  font-size:.62rem; letter-spacing:.14em;
  color: var(--eis);
  display:block; margin-bottom:.4rem;
}
.mappe-raster h3{
  font-family:var(--f-mono);
  font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
  color: var(--papier);
}
.mappe-raster p{
  font-family:var(--f-mono);
  font-size:.66rem; letter-spacing:.06em;
  color:#8E967F;
  margin-top:.35rem;
}

/* ================================================================
   10 · KONTAKT — helle Schlussplatte
   ================================================================ */
.kontakt .inner{
  display:grid;
  grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
  gap: clamp(2rem,5vw,4.5rem);
}
.kontakt h2{ font-size: clamp(2rem,4.8vw,3.4rem); margin-bottom:1.25rem; }
.kontakt h2 span{ display:block; }
.kontakt-daten{
  list-style:none;
  margin-top:1.5rem;
  border:3px solid var(--tinte);
  background: rgba(255,255,255,.3);
}
.kontakt-daten li{
  display:grid; grid-template-columns:6rem 1fr; gap:.75rem;
  padding:.75rem .9rem;
  border-bottom:1px dashed var(--tinte);
  font-size:.95rem;
}
.kontakt-daten li:last-child{ border-bottom:none; }
.kontakt-daten .label{
  font-family:var(--f-mono);
  font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--rost);
  padding-top:.2rem;
}
.kontakt-daten a{ color: var(--tinte); }
form.anfrage{
  border:3px solid var(--tinte);
  background: var(--papier);
  padding:1.6rem;
  box-shadow: 8px 8px 0 var(--papier-alt), 8px 8px 0 2px var(--tinte);
}
form.anfrage .form-kopf{
  font-family:var(--f-mono);
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  border-bottom:3px solid var(--tinte);
  margin:-1.6rem -1.6rem 1.6rem;
  padding:.85rem 1.6rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  background: var(--tinte); color: var(--papier);
}
.feld-reihe{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.feld{ margin-bottom:1.1rem; }
.feld label{
  font-family:var(--f-mono);
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  display:block; margin-bottom:.35rem;
  color: var(--tinte);
}
.feld input, .feld select, .feld textarea{
  width:100%;
  font-family:var(--f-mono);
  font-size:.9rem;
  padding:.7rem .8rem;
  border:2px solid var(--tinte);
  background:transparent;
  color: var(--tinte);
  border-radius:0;
}
.feld textarea{ min-height:7.5rem; resize:vertical; }
.form-fuss{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; margin-top:.5rem;
}
.form-hinweis{
  font-family:var(--f-mono);
  font-size:.62rem; letter-spacing:.08em; text-transform:uppercase;
  color: var(--tinte); opacity:.7; max-width:22rem;
}

/* ================================================================
   FOOTER
   ================================================================ */
footer.fuss{
  border-top:3px solid var(--rost);
}
.fuss .inner{
  padding-top:2.5rem; padding-bottom:2.5rem;
  display:flex; justify-content:space-between; align-items:center;
  gap:1.5rem; flex-wrap:wrap;
}
.fuss .mono a{ color: var(--papier); text-decoration:none; }
.fuss .mono a:hover{ color: var(--aurora); }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width:64rem){
  .plakat-reihe{ grid-template-columns:1fr; }
  .plakat-bild{ aspect-ratio:16/8; }
  .polaroid-raster{ grid-template-columns:repeat(6,1fr); }
  .polaroid-raster .gross,
  .polaroid-raster .breit{ grid-column:span 6; }
  .foto-notiz{ grid-column:span 3; }
  .polaroid-raster figure:nth-of-type(2),
  .polaroid-raster figure:nth-of-type(5),
  .polaroid-raster figure:nth-of-type(8),
  .polaroid-raster figure:nth-of-type(10),
  .polaroid-raster figure:nth-of-type(13),
  .polaroid-raster figure:nth-of-type(16),
  .polaroid-raster figure:nth-of-type(17){ grid-column:span 3; }
}
@media (max-width:52rem){
  .haus .inner,
  .lage .inner,
  .kontakt .inner,
  .mappe .kopfblock{ grid-template-columns:1fr; }
  .hero-elch{
    right:clamp(4rem, 32vw, 8rem);
    bottom:0;
    width:clamp(4.2rem, 21vw, 6rem);
    opacity:.44;
  }
  .fakten ul{ grid-template-columns:1fr 1fr; }
  .fakten li{ border-bottom: var(--linie-dunkel); }
  .fakten li:nth-child(2n){ border-right:none; }
  .manifest-spalten{ grid-template-columns:1fr; }
  .manifest-spalten > div{ border-right:none; border-bottom:1px solid rgba(228,217,189,.35); }
  .manifest-spalten > div:last-child{ border-bottom:none; }
  .mappe-raster{ grid-template-columns:1fr 1fr; }
  .feld-reihe{ grid-template-columns:1fr; }
  .platte-nr{ font-size:clamp(2.4rem, 12vw, 4rem); opacity:.8; }
}
@media (max-width:36rem){
  .polaroid-raster{ grid-template-columns:repeat(2,1fr); }
  .polaroid-raster .gross,
  .polaroid-raster .breit{ grid-column:span 2; }
  .foto-notiz{ grid-column:span 2; min-height:auto; }
  .foto-notiz p{ font-size:.92rem; }
  .foto-notiz--zwei{ order:2; }
  .polaroid-raster figure:nth-of-type(2),
  .polaroid-raster figure:nth-of-type(5),
  .polaroid-raster figure:nth-of-type(8),
  .polaroid-raster figure:nth-of-type(10),
  .polaroid-raster figure:nth-of-type(13),
  .polaroid-raster figure:nth-of-type(16),
  .polaroid-raster figure:nth-of-type(17){ grid-column:span 1; }
  .mappe-raster{ grid-template-columns:1fr; }
  .fakten li:last-child{ grid-column:1 / -1; border-right:none; }
  .outline{ -webkit-text-stroke-width:1.5px; }
  .chips li{ font-size:.62rem; }
}
.hero-video{
  position:absolute;
  inset:0;
  z-index:-4;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.22;
  filter:saturate(.78) brightness(.62) contrast(1.08);
  pointer-events:none;
}

/* ================================================================
   ALBUM-OVERLAY — Fullscreen-Fotomosaik der Galerie
   ================================================================ */
.album-overlay{
  position:fixed;
  inset:0;
  z-index:400;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  background: rgba(15,29,23,.98);
  opacity:0;
  transition: opacity .35s ease;
}
.album-overlay[hidden]{ display:none; }
.album-overlay.offen{ opacity:1; }

.album-mosaik{
  width:100%;
  max-width:100rem;
  margin:0 auto;
  padding: clamp(4.5rem, 8vw, 6rem) clamp(1rem, 4vw, 3rem) clamp(3rem, 6vw, 4rem);
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(9rem, 1fr);
  gap: clamp(.6rem, 1.5vw, 1.1rem);
}
.album-kachel{
  position:relative;
  overflow:hidden;
  background: var(--nacht-2);
  border: 1px solid rgba(228,217,189,.25);
  opacity:0;
  transform: scale(.94);
  transition: opacity .4s ease, transform .4s ease;
}
.album-overlay.offen .album-kachel{ opacity:1; transform:scale(1); }
.album-kachel img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter:saturate(.92) contrast(1.05);
  transition: transform .4s ease, filter .3s ease;
}
.album-kachel:hover img{ transform:scale(1.05); filter:saturate(1) contrast(1.08); }
.album-kachel figcaption{
  position:absolute; left:0; right:0; bottom:0;
  z-index:2;
  padding:.6rem .7rem;
  font-family:var(--f-mono);
  font-size:.62rem; letter-spacing:.09em; text-transform:uppercase;
  color: var(--papier);
  background: linear-gradient(180deg, transparent, rgba(15,29,23,.88) 70%);
  display:flex; gap:.5rem; align-items:baseline;
}
.album-kachel figcaption span{ color: var(--aurora); flex:none; }
.album-kachel--gross{ grid-column: span 2; grid-row: span 2; }
.album-kachel--breit{ grid-column: span 2; }
.album-kachel--hoch{ grid-row: span 2; }

.album-schliessen{
  all:unset;
  position:fixed;
  top:1.1rem; right:1.1rem;
  z-index:410;
  width:2.6rem; height:2.6rem;
  display:grid; place-items:center;
  background: var(--tinte);
  color: var(--papier);
  border:1px solid rgba(228,217,189,.35);
  border-radius:50%;
  cursor:pointer;
  font-size:1rem;
}
.album-schliessen:hover{ background: var(--rost); }

@media (max-width:64rem){
  .album-mosaik{ grid-template-columns: repeat(3,1fr); }
}
@media (max-width:40rem){
  .album-mosaik{ grid-template-columns: repeat(2,1fr); grid-auto-rows: minmax(7rem, 1fr); }
  .album-kachel--gross{ grid-column: span 2; grid-row: span 2; }
  .album-kachel--breit{ grid-column: span 2; }
}

/* ================================================================
   RECHTSSEITEN — Impressum & Datenschutz
   ================================================================ */
.rechtsseite .inner{ max-width:52rem; }
.rechtsseite h1{ font-size: clamp(2.4rem, 6vw, 4rem); margin-bottom:2rem; }
.rechts-zurueck{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--tinte); text-decoration:none;
  border-bottom:1px dashed var(--tinte);
  margin-bottom:2.5rem;
}
.rechts-zurueck:hover{ color: var(--rost); border-color: var(--rost); }
.rechtstext h2{
  font-family:var(--f-display); font-weight:900; text-transform:uppercase;
  font-size:1.15rem; letter-spacing:0;
  margin-top:2.5rem; margin-bottom:.75rem;
  padding-bottom:.5rem;
  border-bottom: var(--linie-dunkel);
}
.rechtstext h2:first-child{ margin-top:0; }
.rechtstext h3{
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  color: var(--rost); margin-top:1.5rem; margin-bottom:.5rem;
}
.rechtstext p{ margin-bottom:1rem; max-width:44rem; }
.rechtstext a{ color: var(--rost); }
.rechtstext ul{ margin:0 0 1rem 1.2rem; }
.rechtstext li{ margin-bottom:.4rem; }
.rechts-hinweis{
  margin-top:3rem;
  padding:1rem 1.2rem;
  border:1px dashed var(--rost);
  background: rgba(180,73,31,.08);
  font-size:.68rem;
  color: var(--tinte);
  opacity:.85;
  max-width:44rem;
}