/* LUTERBÄCHLIHOF – V2.0
   Neuaufbau von Grund auf.
   Kein Text/Logo ist in das Hero-Foto eingebrannt.
*/

:root{
  --ink:#263229;
  --ink-soft:#4b554d;
  --gold:#ad7c3e;
  --mist:#e9ece3;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%}

body{
  background:#1f281f;
  color:var(--ink);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
}

.hero{
  position:relative;
  min-height:100svh;
  overflow:hidden;
  isolation:isolate;
}

/* Originalfoto des Marchsteins. Keine eingebrannte Typografie. */
.hero-photo{
  position:absolute;
  inset:0;
  z-index:-10;
  background-image:url("assets/hero-epic-morning.png");
  background-size:cover;
  background-position:center 47%;
  background-repeat:no-repeat;
  filter:saturate(1.01) contrast(1.01) brightness(1.00);
  transform:scale(1.002);
}

/* Wärmere Morgenstimmung nur über CSS-Farbgrading. */
.warmth{
  position:absolute;
  inset:0;
  z-index:-8;
  pointer-events:none;
  background:
    radial-gradient(circle at 88% 16%,
      rgba(255,224,166,.12) 0%,
      rgba(255,190,104,.05) 18%,
      transparent 42%);
  mix-blend-mode:soft-light;
}

/* Nur ein sehr leichter Lesbarkeitsverlauf – keine deckende Fläche. */
.readability{
  position:absolute;
  inset:0;
  z-index:-6;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(235,238,229,.78) 0%,
      rgba(235,238,229,.62) 18%,
      rgba(235,238,229,.38) 29%,
      rgba(235,238,229,.16) 39%,
      rgba(235,238,229,.04) 47%,
      transparent 55%);
}

/* Animierter Morgennebel */
.fog{
  position:absolute;
  z-index:-4;
  left:-16%;
  width:138%;
  pointer-events:none;
  filter:blur(30px);
  mix-blend-mode:screen;
  background:
    radial-gradient(ellipse at 14% 52%,rgba(255,255,255,.42) 0 8%,transparent 29%),
    radial-gradient(ellipse at 42% 48%,rgba(255,249,235,.34) 0 9%,transparent 30%),
    radial-gradient(ellipse at 70% 58%,rgba(255,255,255,.29) 0 8%,transparent 28%),
    radial-gradient(ellipse at 94% 50%,rgba(255,248,229,.26) 0 7%,transparent 26%);
  will-change:transform,opacity;
}
.fog-a{
  top:21%;
  height:34%;
  opacity:.18;
  animation:fogA 58s ease-in-out infinite alternate;
}
.fog-b{
  top:48%;
  height:34%;
  opacity:.13;
  filter:blur(38px);
  animation:fogB 72s ease-in-out infinite alternate;
}
@keyframes fogA{
  from{transform:translate3d(-3%,0,0) scale(1.02);opacity:.09}
  50%{opacity:.16}
  to{transform:translate3d(5%,1%,0) scale(1.06);opacity:.11}
}
@keyframes fogB{
  from{transform:translate3d(4%,0,0) scale(1.05);opacity:.07}
  50%{opacity:.11}
  to{transform:translate3d(-5%,1%,0) scale(1.08);opacity:.08}
}

.hero-copy{
  width:min(590px,44vw);
  min-height:100svh;
  padding:45px 32px 32px 42px;
}

.brand{
  display:block;
  width:250px;
  max-width:78%;
  height:auto;
  margin:0 0 38px;
}

h1{
  margin:0;
  color:var(--ink);
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  font-size:clamp(3.55rem,4.8vw,5.7rem);
  line-height:.93;
  letter-spacing:-.043em;
}

.kicker{
  margin:15px 0 0;
  color:var(--gold);
  font-family:Georgia,"Times New Roman",serif;
  font-style:italic;
  font-size:clamp(1.08rem,1.18vw,1.36rem);
}

.rule{
  display:block;
  width:46px;
  height:1px;
  margin:25px 0 21px;
  background:var(--gold);
  opacity:.82;
}

.story{
  margin:0;
  color:var(--ink-soft);
  font-size:clamp(.95rem,1vw,1.08rem);
  line-height:1.48;
}
.story strong{
  color:var(--ink);
  font-weight:650;
}
.story-second{margin-top:15px}

.watcher{
  margin:19px 0 0;
  color:var(--gold);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.08rem,1.17vw,1.3rem);
  font-weight:600;
}

.readmore{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-top:13px;
  color:var(--ink);
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:.70rem;
  font-weight:700;
  transition:gap .2s ease,color .2s ease;
}
.readmore:hover,.readmore:focus-visible{
  gap:13px;
  color:var(--gold);
}

.rule-small{margin-top:22px}

.coming-soon p{
  margin:0;
  color:var(--ink-soft);
  font-size:.91rem;
  line-height:1.42;
}
.coming-soon .opening{
  margin-top:2px;
  color:var(--gold);
  font-family:Georgia,"Times New Roman",serif;
  font-style:italic;
}

.meta{
  display:flex;
  align-items:center;
  gap:13px;
  margin-top:23px;
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.meta a{
  color:var(--ink);
  text-decoration:none;
}
.meta span{color:var(--gold)}

@media(max-width:1100px){
  .hero-photo{background-position:54% 47%}
  .hero-copy{width:min(560px,53vw);padding-left:34px}
  .brand{width:225px}
}

@media(max-width:760px){
  .hero-photo{
    background-position:58% 47%;
  }

  .readability{
    background:
      linear-gradient(180deg,
        rgba(235,238,229,.91) 0%,
        rgba(235,238,229,.82) 47%,
        rgba(235,238,229,.66) 73%,
        rgba(235,238,229,.42) 100%);
  }

  .hero-copy{
    width:100%;
    padding:27px 22px 30px;
  }

  .brand{
    width:205px;
    margin-bottom:28px;
  }

  h1{
    font-size:clamp(3rem,13.5vw,4.2rem);
  }

  .story br{display:none}
  .fog-b{display:none}
}

@media(max-height:820px) and (min-width:761px){
  .hero-copy{padding-top:28px;padding-bottom:24px}
  .brand{width:205px;margin-bottom:23px}
  h1{font-size:4rem}
  .kicker{margin-top:10px}
  .rule{margin:17px 0 14px}
  .story{font-size:.91rem;line-height:1.4}
  .story-second{margin-top:10px}
  .watcher{margin-top:12px}
  .readmore{margin-top:9px}
  .rule-small{margin-top:14px}
  .meta{margin-top:15px}
}

@media(prefers-reduced-motion:reduce){
  .fog{animation:none}
  .readmore{transition:none}
}


/* V2.4: zusätzliche, langsam wallende Nebelbänder über dem epischen Hero */
.hero::after{
  content:"";
  position:absolute;
  z-index:-3;
  left:-10%;
  right:-10%;
  bottom:10%;
  height:25%;
  pointer-events:none;
  opacity:.12;
  filter:blur(28px);
  mix-blend-mode:screen;
  background:
    radial-gradient(ellipse at 15% 62%,rgba(255,255,255,.38) 0 7%,transparent 27%),
    radial-gradient(ellipse at 43% 55%,rgba(255,246,226,.32) 0 8%,transparent 29%),
    radial-gradient(ellipse at 72% 64%,rgba(255,255,255,.29) 0 7%,transparent 27%),
    radial-gradient(ellipse at 94% 56%,rgba(255,240,214,.25) 0 7%,transparent 26%);
  animation:fogGroundV24 66s ease-in-out infinite alternate;
}

@keyframes fogGroundV24{
  from{transform:translate3d(-4%,0,0) scale(1.02);opacity:.08}
  48%{opacity:.16}
  to{transform:translate3d(5%,-1%,0) scale(1.07);opacity:.11}
}

@media(prefers-reduced-motion:reduce){
  .hero::after{animation:none}
}


/* =========================================================
   LUTERBÄCHLIHOF – GOLIVE V1.0
   Bereinigte statische Produktionsfassung
   ========================================================= */

.fog,
.mist,
.fog-svg,
.procedural-fog,
.fog-canvas,
.living-fog,
.mist-field,
.fog-video-wrap,
.stone-foreground,
.hero::after,
.hero-copy::after{
  display:none !important;
}

.hero-photo{
  position:absolute;
  inset:0;
  z-index:-10;
  background-image:url("assets/hero-epic-morning.png") !important;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  filter:none !important;
  transform:none !important;
}

.readability{
  position:absolute;
  inset:0;
  z-index:-6;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(235,238,229,.78) 0%,
      rgba(235,238,229,.62) 18%,
      rgba(235,238,229,.38) 29%,
      rgba(235,238,229,.16) 39%,
      rgba(235,238,229,.04) 47%,
      transparent 55%);
}

.hero-copy{
  position:relative;
  z-index:5;
}


/* =========================================================
   GOLIVE V1.0.2 – MOBILE: HERO SICHTBAR + LOKALE TEXTFLÄCHE
   Desktop bleibt unverändert.
   ========================================================= */

.story-panel{
  position:relative;
}

@media(max-width:760px){

  /* Das Hero soll auf Mobile klar als Bild erkennbar bleiben. */
  .hero-photo{
    background-position:60% center !important;
  }

  /* Nur ein sehr leichter Gesamtschleier – keine beige Vollfläche mehr. */
  .readability{
    display:block !important;
    z-index:-6 !important;
    background:
      linear-gradient(90deg,
        rgba(235,238,229,.30) 0%,
        rgba(235,238,229,.20) 32%,
        rgba(235,238,229,.10) 55%,
        rgba(235,238,229,.03) 75%,
        transparent 100%) !important;
  }

  .hero-copy{
    width:100%;
    padding:26px 20px 34px;
  }

  .brand{
    width:195px;
    margin-bottom:28px;
  }

  h1{
    max-width:94%;
    font-size:clamp(2.9rem,12.9vw,4.05rem);
    line-height:.94;
    color:#243128;
    text-shadow:0 1px 14px rgba(239,241,234,.26);
  }

  .kicker{
    color:#9a6a31;
    text-shadow:0 1px 10px rgba(239,241,234,.22);
  }

  /*
    Die Lesbarkeit wird lokal gelöst:
    Nur der eigentliche Fliesstext erhält eine halbtransparente,
    weich verlaufende Fläche. Das Hero bleibt oben und rechts sichtbar.
  */
  .story-panel{
    margin-top:18px;
    margin-left:-8px;
    margin-right:-8px;
    padding:16px 12px 20px;
    border-radius:14px;
    background:
      linear-gradient(90deg,
        rgba(239,241,234,.84) 0%,
        rgba(239,241,234,.76) 56%,
        rgba(239,241,234,.62) 82%,
        rgba(239,241,234,.48) 100%);
    -webkit-backdrop-filter:blur(3px);
    backdrop-filter:blur(3px);
    box-shadow:
      0 10px 30px rgba(30,40,31,.05),
      inset 0 1px 0 rgba(255,255,255,.24);
  }

  .story-panel .rule:first-child{
    margin-top:0;
  }

  .story,
  .story strong,
  .readmore,
  .meta a{
    color:#243128;
  }

  .story{
    font-size:1rem;
    line-height:1.52;
  }

  .story br{
    display:none;
  }

  .watcher,
  .coming-soon .opening{
    color:#9a6a31;
  }

  .readmore{
    font-size:.69rem;
    line-height:1.35;
  }
}

@media(max-width:390px){
  .hero-copy{
    padding-left:18px;
    padding-right:18px;
  }

  h1{
    max-width:100%;
    font-size:clamp(2.7rem,12.2vw,3.72rem);
  }

  .story-panel{
    margin-left:-6px;
    margin-right:-6px;
    padding-left:10px;
    padding-right:10px;
    background:
      linear-gradient(90deg,
        rgba(239,241,234,.87) 0%,
        rgba(239,241,234,.79) 62%,
        rgba(239,241,234,.60) 100%);
  }
}


/* =========================================================
   GOLIVE V1.0.3 – MOBILE FEINSCHLIFF
   Marchstein wieder sichtbar + Kicker lesbarer.
   Desktop bleibt unverändert.
   ========================================================= */

@media(max-width:760px){

  .hero-photo{
    background-position:72% center !important;
  }

  h1{
    max-width:88%;
  }

  .kicker{
    display:inline-block;
    max-width:90%;
    margin-top:14px;
    margin-left:-6px;
    padding:5px 9px 6px;
    border-radius:10px;
    color:#8f632f !important;
    background:rgba(239,241,234,.58);
    -webkit-backdrop-filter:blur(2px);
    backdrop-filter:blur(2px);
    text-shadow:none !important;
    box-shadow:0 2px 12px rgba(36,49,40,.04);
  }

  .story-panel{
    margin-right:6px;
    background:
      linear-gradient(90deg,
        rgba(239,241,234,.84) 0%,
        rgba(239,241,234,.74) 52%,
        rgba(239,241,234,.56) 78%,
        rgba(239,241,234,.34) 100%);
  }
}

@media(max-width:390px){
  .hero-photo{
    background-position:75% center !important;
  }

  .kicker{
    max-width:94%;
    font-size:1.04rem;
  }

  .story-panel{
    margin-right:8px;
  }
}


/* =========================================================
   GOLIVE V1.0.4 – MOBILE NEU KOMPOSIERT
   Desktop bleibt unverändert.
   Auf Mobile: Bildbereich oben, Inhalt darunter.
   ========================================================= */

@media(max-width:760px){

  body{
    background:#eef1e8;
  }

  .hero{
    min-height:100svh;
    overflow:visible;
    background:#eef1e8;
    padding-top:42vh;
  }

  /*
    Das Hero-Bild wird auf Mobile zu einem eigenen oberen Bildfenster.
    Dadurch kann der Marchstein sichtbar bleiben, ohne dass Text über
    die detailreiche Landschaft gelegt werden muss.
  */
  .hero-photo{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:auto;
    height:42vh;
    min-height:300px;
    max-height:430px;
    z-index:0 !important;
    background-image:url("assets/hero-epic-morning.png") !important;
    background-size:cover !important;
    background-position:69% 58% !important;
    background-repeat:no-repeat !important;
  }

  /* keine grossflächige Überblendung über dem Bild */
  .readability{
    display:none !important;
  }

  .warmth{
    display:none !important;
  }

  .hero-copy{
    position:relative;
    z-index:5;
    width:100%;
    min-height:0;
    margin:0;
    padding:30px 22px 42px;
    background:
      linear-gradient(180deg,
        rgba(238,241,232,1) 0%,
        rgba(238,241,232,.98) 70%,
        rgba(238,241,232,.96) 100%);
  }

  .brand{
    width:190px;
    max-width:72%;
    margin:0 0 28px;
  }

  h1{
    max-width:100% !important;
    margin:0;
    color:#243128;
    font-size:clamp(3rem,13.2vw,4.25rem);
    line-height:.93;
    text-shadow:none;
  }

  .kicker{
    display:block;
    max-width:100%;
    margin:16px 0 0;
    padding:0;
    border-radius:0;
    color:#9a6a31 !important;
    background:none !important;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    box-shadow:none;
    text-shadow:none !important;
    font-size:1.08rem;
  }

  /* lokale Textbox aus V1.0.2/1.0.3 wird auf Mobile wieder aufgehoben */
  .story-panel{
    margin:0;
    padding:0;
    border-radius:0;
    background:none !important;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    box-shadow:none;
  }

  .story-panel .rule:first-child{
    margin-top:25px;
  }

  .story,
  .story strong,
  .readmore,
  .meta a{
    color:#243128;
  }

  .story{
    font-size:1rem;
    line-height:1.55;
  }

  .story br{
    display:none;
  }

  .watcher,
  .coming-soon .opening{
    color:#9a6a31;
  }

  .readmore{
    font-size:.70rem;
    line-height:1.35;
  }

  .meta{
    padding-bottom:max(8px,env(safe-area-inset-bottom));
  }
}

@media(max-width:390px){
  .hero{
    padding-top:39vh;
  }

  .hero-photo{
    height:39vh;
    min-height:270px;
    background-position:70% 58% !important;
  }

  .hero-copy{
    padding-left:18px;
    padding-right:18px;
  }

  .brand{
    width:178px;
  }

  h1{
    font-size:clamp(2.8rem,12.7vw,3.85rem);
  }
}


/* =========================================================
   GOLIVE V1.0.7 – MOBILE LOGO ZENTRIERT
   Einzige Änderung gegenüber V1.0.6.
   ========================================================= */

@media(max-width:760px){
  .brand{
    display:block;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}