/* =========================================================================
   Droemhus – Veredelung
   Ruhige Bewegung, Tiefe und Materialität. Alles rein additiv: ohne diese
   Datei bleibt die Seite vollständig funktionsfähig, ohne JavaScript bleibt
   jeder Inhalt sichtbar.
   ========================================================================= */

/* ── Scroll-Reveal ───────────────────────────────────────────────────────
   Nur wenn JavaScript läuft (html.js) wird überhaupt etwas versteckt.
   Ohne JS, für Crawler und bei reduzierter Bewegung: sofort sichtbar.     */
.js .reveal{
  opacity:0;
  transform:translateY(18px);
  will-change:opacity,transform;
  transition:opacity .8s cubic-bezier(.22,.61,.36,1),
             transform .8s cubic-bezier(.22,.61,.36,1);
}
.js .reveal.is-in{opacity:1;transform:none}
.js .reveal[data-delay="1"]{transition-delay:.08s}
.js .reveal[data-delay="2"]{transition-delay:.16s}
.js .reveal[data-delay="3"]{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
}

/* ── Titelbild: Tiefe statt Effekt ──────────────────────────────────────
   Ein feiner Innenschatten legt sich über die Kante, damit das Bild nicht
   wie aufgeklebt wirkt. Beim Laden fährt es einmal ruhig auf.            */
.hero figure{position:relative;isolation:isolate}
.hero figure::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(14,60,76,.07),
             inset 0 -60px 80px -70px rgba(14,60,76,.55);
  border-radius:inherit;
}
.hero img{
  transform:scale(1.015);
  transition:transform 1.4s cubic-bezier(.22,.61,.36,1);
}
.js .hero img{transform:scale(1.045)}
.js .hero.is-in img{transform:scale(1)}
@media (prefers-reduced-motion:reduce){.hero img,.js .hero img{transform:none;transition:none}}

/* ── Galerie: das Bild kommt einem entgegen ─────────────────────────── */
.gallery figure{
  position:relative;
  transition:transform .55s cubic-bezier(.22,.61,.36,1),
             box-shadow .55s cubic-bezier(.22,.61,.36,1);
}
.gallery figure img{
  transition:transform .8s cubic-bezier(.22,.61,.36,1),
             filter .8s ease;
  filter:saturate(.96);
}
@media (hover:hover){
  .gallery figure:hover{
    transform:translateY(-4px);
    box-shadow:0 2px 4px rgba(14,60,76,.06),0 26px 50px -28px rgba(14,60,76,.55);
  }
  .gallery figure:hover img{transform:scale(1.045);filter:saturate(1.04)}
}
.gallery figcaption{
  border-top:1px solid var(--line-soft);
  letter-spacing:.005em;
}

/* ── Schaltflächen: minimale Anhebung, kein Gehüpfe ─────────────────── */
.btn{
  transition:transform .3s cubic-bezier(.22,.61,.36,1),
             background-color .3s ease, box-shadow .3s ease, color .3s ease;
  box-shadow:0 1px 2px rgba(14,60,76,.10);
}
@media (hover:hover){
  .btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px -12px rgba(14,60,76,.6)}
}
.btn:active{transform:translateY(0);transition-duration:.08s}

/* ── Karten: Papier, nicht Kachel ───────────────────────────────────── */
.card{
  transition:transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s ease, border-color .5s ease;
}
@media (hover:hover){
  .card:hover{
    transform:translateY(-3px);
    border-color:rgba(201,160,106,.5);
    box-shadow:0 2px 4px rgba(14,60,76,.05),0 24px 46px -30px rgba(14,60,76,.55);
  }
}
.card .num{
  font-variant-numeric:lining-nums tabular-nums;
  letter-spacing:.02em;
}

/* ── Eckdaten: die Werte bekommen Gewicht ───────────────────────────── */
.facts dd{
  font-family:'Instrument Serif',Georgia,serif;
  font-size:17.5px;line-height:1.25;color:var(--deep);
  letter-spacing:-.005em;
}
@media (min-width:700px){.facts dd{font-size:19px}}
.facts div{transition:background-color .4s ease}
@media (hover:hover){.facts div:hover{background:var(--paper)}}

/* ── Abschnittskanten: Haarlinie, die zu den Rändern ausläuft ───────── */
section+section{border-top:0;position:relative}
section+section::before{
  content:"";position:absolute;left:var(--pad);right:var(--pad);top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line) 12%,var(--line) 88%,transparent);
}

/* ── Fließtext: Links, die sich beim Überfahren unterstreichen ──────── */
.prose a,.card a,.faq a{
  text-decoration:underline;
  text-decoration-color:rgba(201,160,106,.55);
  text-decoration-thickness:1px;
  transition:text-decoration-color .3s ease,color .3s ease;
}
@media (hover:hover){
  .prose a:hover,.card a:hover,.faq a:hover{text-decoration-color:var(--gold-dark)}
}

/* ── FAQ: das Öffnen wird zur Bewegung, nicht zum Sprung ───────────── */
.faq summary{transition:color .3s ease}
.faq summary::after{transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.faq details[open] summary{color:var(--deep)}
@media (hover:hover){.faq summary:hover{color:var(--deep)}}
.faq details[open] > *:not(summary){
  animation:faqIn .45s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.faq details[open] > *:not(summary){animation:none}}

/* ── Kopfbereich: verdichtet sich beim Scrollen ────────────────────── */
.site-head{transition:box-shadow .4s ease,background-color .4s ease}
.site-head.is-scrolled{
  background:rgba(250,249,245,.86);
  box-shadow:0 1px 0 rgba(14,60,76,.06),0 10px 30px -22px rgba(14,60,76,.5);
}

/* ── Sprachumschalter: Flagge hebt sich leicht ─────────────────────── */
.lang a{transition:background-color .3s ease,color .3s ease}
.lang a svg{transition:opacity .3s ease,transform .3s cubic-bezier(.22,.61,.36,1)}
@media (hover:hover){.lang a:hover svg{transform:translateY(-1px)}}

/* ── Navigation: die Linie wächst aus der Mitte ────────────────────── */
@media (min-width:860px){
  .site-nav a{position:relative;border-bottom-color:transparent}
  .site-nav a::after{
    content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
    background:var(--deep);transform:scaleX(0);transform-origin:center;
    transition:transform .38s cubic-bezier(.22,.61,.36,1);
  }
  .site-nav a:hover::after{transform:scaleX(1)}
  .site-nav a[aria-current="page"]::after{transform:scaleX(1)}
  .site-nav a[aria-current="page"]{border-bottom-color:transparent}
}

/* ── Fußbereich: weicher Übergang statt harter Kante ───────────────── */
.site-foot{position:relative}
.site-foot::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,160,106,.55),transparent);
}

/* ── Auswahlfarbe passend zum Haus ─────────────────────────────────── */
::selection{background:rgba(201,160,106,.28);color:var(--ink)}