/* ============================================================
   christinaleicht.de — statische Fassung
   Original-Design (OnePress-Look), verfeinert. August 2026
   ============================================================ */

@font-face{
  font-family:"Raleway";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("schrift/raleway.woff2") format("woff2");
}

:root{
  --text:#26221E;
  --text-strong:#14110D;
  --text-soft:#6B6259;
  --dark:#221D18;
  --gold:#B98A2E;
  --rule:rgba(38,34,30,.14);
  --font:"Raleway",-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --gutter:clamp(1.4rem,5vw,4rem);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font);
  font-size:17px;font-weight:400;line-height:1.65;
  color:var(--text);background:#fff;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
::selection{background:rgba(185,138,46,.22)}
:focus-visible{outline:1.5px solid var(--gold);outline-offset:3px}

/* ---------- Hero --------------------------------------------- */
.hero{position:relative;height:100svh;min-height:32rem;overflow:hidden;background:var(--dark)}
.hero img.bild{
  position:absolute;inset:-10% 0;
  width:100%;height:120%;object-fit:cover;object-position:60% 36%;
  will-change:transform;
}
.hero .schleier{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,8,6,.10) 0%,rgba(10,8,6,0) 40%,rgba(10,8,6,.34) 100%);
}
.hero .text{
  position:absolute;left:var(--gutter);right:var(--gutter);
  bottom:clamp(4.5rem,13vh,8rem);
  color:#fff;will-change:transform,opacity;
}
.hero h1{
  font-size:clamp(2.1rem,6.4vw,4.6rem);
  font-weight:250;line-height:1.12;
  letter-spacing:2.5px;
  text-shadow:0 2px 24px rgba(0,0,0,.28);
}
.hero .mail{
  display:inline-block;margin-top:14px;
  font-size:clamp(1rem,1.6vw,1.15rem);font-weight:300;
  letter-spacing:1.6px;
  color:rgba(255,255,255,.85);text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.30);padding-bottom:2px;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.hero .mail:hover{color:#fff;border-bottom-color:rgba(255,255,255,.75)}

/* Scroll-Hinweis: feiner Strich, atmet langsam */
.wink{
  position:absolute;left:50%;bottom:clamp(1.2rem,3.5vh,2.2rem);
  width:1px;height:44px;margin-left:-.5px;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.75));
  animation:atmen 2.6s var(--ease) infinite;
  transform-origin:50% 0;
}
@keyframes atmen{
  0%,100%{transform:scaleY(.45);opacity:.4}
  50%{transform:scaleY(1);opacity:.9}
}

/* ---------- Inhalt ------------------------------------------- */
main{max-width:73rem;margin:0 auto;padding:clamp(4rem,10vh,7rem) var(--gutter)}
.spalten{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,4vw,3.5rem)}
@media (max-width:900px){.spalten{grid-template-columns:1fr;gap:3rem;max-width:34rem;margin-inline:auto}}

h2{
  font-size:1.35rem;font-weight:600;letter-spacing:.02em;
  color:var(--text-strong);margin-bottom:14px;
}
p{margin-bottom:1rem}
p:last-child{margin-bottom:0}
p strong{font-weight:630;color:var(--text-strong)}

/* ---------- Fuss --------------------------------------------- */
footer{
  background:var(--dark);color:rgba(247,243,236,.65);
  padding:34px var(--gutter);
  font-size:.85rem;letter-spacing:.02em;text-align:center;line-height:2;
}
footer a{
  color:rgba(247,243,236,.8);text-decoration:none;
  transition:color .3s var(--ease);
}
footer a:hover{color:#fff}
footer .punkt{opacity:.45;margin:0 .55em}

/* ---------- Unterseiten (Impressum/Datenschutz) -------------- */
.seite{max-width:42rem;margin:0 auto;padding:clamp(4rem,12vh,7rem) var(--gutter) clamp(3rem,8vh,5rem)}
.seite .zurueck{
  display:inline-block;margin-bottom:2.6rem;
  font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-soft);text-decoration:none;
  transition:color .3s var(--ease);
}
.seite .zurueck:hover{color:var(--text-strong)}
.seite h1{font-size:1.9rem;font-weight:300;letter-spacing:.5px;margin-bottom:2rem}
.seite h2{font-size:.85rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-soft);margin:2.2rem 0 .7rem}
.seite p{color:var(--text)}
.seite a{color:var(--text-strong);text-decoration:none;border-bottom:1px solid var(--rule)}
.seite a:hover{border-bottom-color:var(--gold)}

/* ---------- Eintritt und Bewegung ---------------------------- */
.js .auf{opacity:0;transform:translate3d(0,18px,0);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .auf.da{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .wink{animation:none;opacity:.5}
  .js .auf{opacity:1;transform:none;transition:none}
  .hero img.bild{transform:none !important}
}