/* Biggezeit · Baustellenseite (ergänzt site.css) */

.cs{
  position:relative; min-height:100svh; overflow:hidden; isolation:isolate;
  display:grid; grid-template-rows:auto 1fr auto;
  background:#26393c; color:var(--tiefe);
}
.cs-art{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; }
.cs::before{ /* heller Nebelschleier hinter dem Text */
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 62% 48% at 50% 30%, rgba(241,240,234,.62), rgba(241,240,234,0) 72%);
}

.cs-top{ padding:34px var(--gutter) 0; text-align:center; }
.cs-top .kicker{ color:var(--tiefe); }

.cs-main{
  display:grid; justify-items:center; align-content:start; gap:clamp(14px, 2.6vh, 24px); text-align:center;
  padding:clamp(16px, 5vh, 80px) var(--gutter) 0;
}
.cs h1{ font-weight:300; line-height:.86; margin-bottom:clamp(6px, 1.8vw, 30px); }
.cs h1 small{ display:block; font:italic 400 clamp(1.35rem, .9rem + 1.6vw, 2.4rem)/1 var(--serif); margin-bottom:.18em; letter-spacing:.01em; }
.cs h1 b{ display:block; font-weight:300; font-size:clamp(4.4rem, min(1.6rem + 11vw, 18vh), 11.5rem); line-height:1.02; letter-spacing:-.015em; }
.cs-lead{ font:400 clamp(1.3rem, 1rem + 1.1vw, 1.85rem)/1.25 var(--serif); max-width:34ch; text-wrap:balance; }
.cs-sub{ max-width:40ch; color:#3c4744; text-wrap:balance; }
.cs-contact{ margin-top:6px; color:var(--tiefe); }
.cs-contact a{ font-weight:500; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px; }
.cs-contact a:hover{ text-decoration-thickness:2px; }

.cs-foot{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px 24px;
  padding:48px var(--gutter) 26px; font-size:.84rem; color:rgba(241,240,234,.8);
  background:linear-gradient(rgba(18,33,36,0), rgba(18,33,36,.55));
}
.cs-foot nav{ display:flex; gap:24px; }
.cs-foot a{ color:rgba(241,240,234,.9); text-decoration:none; }
.cs-foot a:hover{ color:#fff; text-decoration:underline; text-underline-offset:4px; }

/* Der eine Moment: Die Landschaft baut sich Schicht für Schicht auf (passend zu „Hier entsteht“) */
@media (prefers-reduced-motion:no-preference){
  .cs-art .rise{ animation:layer-rise 2.4s var(--ease) both; }
  .cs-art .l0{ animation-delay:.05s; }
  .cs-art .l1{ animation-delay:.25s; }
  .cs-art .l2{ animation-delay:.45s; }
  .cs-art .l3{ animation-delay:.65s; }
  .cs-art .l4{ animation-delay:.85s; }
  .cs-art .trees{ animation-delay:1.05s; }
  .cs-art .front{ animation-delay:1.15s; }
  .cs-art .mist, .cs-art .streaks{ animation:fade 2.4s .9s ease both; }
  .cs-top, .cs-main > *{ animation:rise 1.3s var(--ease) both; }
  .cs-top{ animation-delay:.9s; }
  .cs-main > :nth-child(1){ animation-delay:1.1s; }
  .cs-main > :nth-child(2){ animation-delay:1.35s; }
  .cs-main > :nth-child(3){ animation-delay:1.5s; }
  .cs-main > :nth-child(4){ animation-delay:1.65s; }
}
@keyframes layer-rise{ from{ transform:translateY(160px); opacity:0; } }

@media (max-height:700px) and (min-width:641px){
  .cs-sub{ display:none; }
}
@media (max-width:640px){
  .cs::before{ background:radial-gradient(ellipse 95% 48% at 50% 30%, rgba(241,240,234,.66), rgba(241,240,234,0) 75%); }
  .cs-main{ gap:18px; }
  .cs-foot{ justify-content:center; text-align:center; }
}