/* Originalfoto unverändert. Der eigene Fotoabschnitt lässt unten Platz für den
   späteren Montags-Kompass, ohne das Bild in diesen Bereich fortzusetzen. */
html { margin:0; padding:0; min-height:100%; }
.ml-homepage { margin:0; background:#fff; }
.ml-home-photo {
 position:relative; display:flex; flex-direction:column; box-sizing:border-box;
 min-height:100vh; min-height:100svh;
 background: url('../img/baum.2025.jpg') center center / cover no-repeat;
}
.ml-home-photo > .ml-header { flex-shrink:0; width:100%; box-sizing:border-box; background:transparent; }
.ml-home-photo > .ml-header #headerleft { background:transparent; }
.ml-home-photo .Aligner {
 display:flex; flex:1 0 auto; justify-content:center; align-items:center;
 min-height:440px; margin:0!important; padding:10px 20px 28px; box-sizing:border-box;
 text-align:center; font-style:italic; font-size:26px; line-height:1.4;
}
.ml-home-photo #quotestart {
 width:560px; max-width:50%; color:#fff; padding:0;
 text-shadow:0 1px 3px rgba(40,40,40,.55);
}
.ml-home-photo #quotestart p { margin:0 0 24px; }
.ml-home-photo #quotestart .quotename { font-size:14px; font-style:normal; margin:0; }
.ml-homepage #footerindex {
 position:relative; flex:0 0 auto; padding:12px 20px 18px;
 color:#fff; background:transparent; text-align:center; box-sizing:border-box;
}
.ml-homepage #footerindex a { color:#fff; font-size:13px; text-decoration:none; text-shadow:0 1px 3px rgba(40,40,40,.6); }
.ml-homepage #footerindex a:hover { text-decoration:underline; }
/* Eine einzige gemeinsame Einblendung; keine Filter auf dem Baumfoto. */
.ml-homepage::after {
 content:""; position:fixed; inset:0; z-index:2147483647;
 background:#fff; pointer-events:none; animation:ml-home-reveal 3s ease-out both;
}
@keyframes ml-home-reveal { from { opacity:1; } to { opacity:0; visibility:hidden; } }
@media (prefers-reduced-motion:reduce) { .ml-homepage::after { display:none; animation:none; } }
@media (max-width:960px) {
 .ml-home-photo { min-height:calc(100svh - 56px); }
 /* Logo, Name und Beruf sitzen tiefer in der grünen Krone. */
 .ml-homepage .ml-home-photo > .ml-header {
  margin:0 auto 8px; padding:clamp(64px,10svh,104px) 20px 0;
 }
 .ml-homepage .ml-home-photo > .ml-header::before { content:none; }
 .ml-homepage .ml-header #name a,
 .ml-homepage .ml-header #name .header1,
 .ml-homepage .ml-header #name .header2 {
  color:#fff; text-shadow:0 1px 3px rgba(40,40,40,.55);
 }
 .ml-homepage .ml-header .header2 { font-weight:bold; }
 .ml-homepage .ml-header #name { margin-bottom:0; }
 .ml-homepage .ml-header .ml-nav-row { padding-top:20px; }
 .ml-homepage .ml-header .ml-booking { margin-top:0; }
 .ml-home-photo .Aligner { min-height:0; font-size:24px; line-height:1.25; padding:8px 20px 24px; }
 .ml-home-photo #quotestart { width:340px; max-width:78%; }
 .ml-home-photo #quotestart p { margin-bottom:20px; }
 /* 56 Pixel für den Beginn des folgenden Kastens reservieren.
    Bei wenig Platz darf der Fotoabschnitt mit seinem Inhalt wachsen. */
 .ml-home-photo:has(+ .ml-montags-teaser) { min-height:calc(100svh - 56px); }
 .ml-montags-teaser { background:#faf7ee; padding:28px 20px; color:#474747; }
}

/* Montags-Kompass: Desktop im Foto, mobil als eigener Abschnitt darunter. */
.ml-home-stage { position:relative; }
.ml-homepage .ml-montags-teaser {
 box-sizing:border-box; background:rgba(250,248,242,.95); color:#383838;
 text-align:center; padding:20px 24px; border:1px solid #dedbd3;
 border-radius:12px; font-family:Arial, Helvetica, sans-serif;
}
.ml-homepage .ml-montags-teaser h2 { margin:0 0 12px; font-size:24px; line-height:1.25; font-weight:600; color:#383838; text-align:center; padding:0; background:none; }
.ml-montags-heart { color:#ffc61a; }
.ml-homepage .ml-montags-teaser p { margin:0 0 16px; font-size:18px; line-height:1.5; color:#383838; text-align:center; padding:0; }
.ml-homepage .ml-montags-button {
 display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box;
 max-width:100%; min-height:44px; padding:10px 24px; border-radius:6px;
 background:#ffc61a; color:#292929; font-size:18px; line-height:1.35;
 font-weight:500; text-decoration:none; text-shadow:none;
 transition:background-color .18s ease;
}
.ml-homepage .ml-montags-button:hover { background:#ffdf70; }
.ml-homepage .ml-montags-button:focus-visible { outline:3px solid #474747; outline-offset:4px; }
@media (min-width:961px) {
 .ml-homepage .ml-montags-teaser {
  position:absolute; bottom:70px; left:50%; transform:translateX(-50%);
  width:calc(100% - 64px); max-width:720px;
  background:rgba(250,248,242,.72);
 }
 /* Zitat dezent höher, ohne den Fotoausschnitt zu verändern. */
 .ml-home-photo .Aligner { padding-bottom:28px; }
 .ml-home-photo #quotestart { transform:translateY(-30px); }
 .ml-homepage .ml-home-photo .ml-header .ml-nav-row { background:rgba(253,253,253,.76); }
}
@media (max-width:960px) {
 .ml-homepage .ml-montags-teaser {
  position:relative; margin:-36px 14px 20px; width:calc(100% - 28px); padding:24px 18px 26px;
  background:#faf7ee; border:1px solid #dedbd3; border-radius:14px;
 }
 /* Freier Wiesenbereich für die Überlappung, unterhalb der Footerlinks. */
 .ml-homepage #footerindex { padding-bottom:58px; }
 .ml-homepage .ml-montags-teaser h2 { font-size:23px; }
 .ml-homepage .ml-montags-teaser p { max-width:34em; margin:0 auto 18px; font-size:17px; }
 .ml-homepage .ml-montags-button { padding:12px 20px; font-size:17px; }
}
