@import url("tokens.css");

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;
  overflow-x:hidden; scrollbar-gutter:stable}
body{
  margin:0; color:var(--text); font-family:var(--font-ui);
  font-size:var(--t-body); line-height:1.7;
  background:
    radial-gradient(900px 500px at 88% -8%, #FDE8DC 0%, transparent 60%),
    radial-gradient(700px 500px at 4% 16%, #F2F7F1 0%, transparent 55%),
    var(--bg);
  min-height:100dvh;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--brand-ink); text-underline-offset:3px}
a:hover{color:var(--brand)}
:focus-visible{outline:2.5px solid var(--brand); outline-offset:3px; border-radius:var(--r-sm)}

.wrap{width:100%; max-width:var(--w-page); margin-inline:auto; padding-inline:clamp(18px,5vw,40px)}
.skip{position:absolute; left:-9999px}
.skip:focus{left:var(--sp-4); top:var(--sp-4); z-index:30; background:var(--surface);
  padding:var(--sp-3) var(--sp-4); border-radius:var(--r-sm); box-shadow:var(--shadow-2)}

/* fallende Blumen.
   Der Fallweg hängt an lvh statt vh: lvh ändert sich nicht, wenn auf dem Handy
   die Adressleiste ein- und ausfährt — sonst versetzen sich die Blumen ruckartig. */
:root{--fallweg-start:-14vh; --fallweg-mitte:54vh; --fallweg-ende:122vh}
@supports (height:100lvh){
  :root{--fallweg-start:-14lvh; --fallweg-mitte:54lvh; --fallweg-ende:122lvh}
}
.blumenregen{position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0}
.blumenregen span{position:absolute; top:0; display:block; will-change:transform;
  animation:blume-sinken linear infinite}
.blumenregen svg{width:100%; height:100%; display:block}
@keyframes blume-sinken{
  0%  {transform:translate3d(0,var(--fallweg-start),0) rotate(-8deg); opacity:0}
  9%  {opacity:1}
  50% {transform:translate3d(34px,var(--fallweg-mitte),0) rotate(160deg)}
  92% {opacity:1}
  100%{transform:translate3d(-18px,var(--fallweg-ende),0) rotate(340deg); opacity:0}
}
.blumenregen span:nth-child(1) {left:4%;  width:44px;height:44px; animation-duration:24s}
.blumenregen span:nth-child(2) {left:14%; width:28px;height:28px; animation-duration:31s; animation-delay:5s}
.blumenregen span:nth-child(3) {left:24%; width:50px;height:50px; animation-duration:26s; animation-delay:11s}
.blumenregen span:nth-child(4) {left:33%; width:24px;height:24px; animation-duration:35s; animation-delay:2s}
.blumenregen span:nth-child(5) {left:44%; width:42px;height:42px; animation-duration:22s; animation-delay:15s}
.blumenregen span:nth-child(6) {left:54%; width:32px;height:32px; animation-duration:29s; animation-delay:7s}
.blumenregen span:nth-child(7) {left:63%; width:48px;height:48px; animation-duration:25s; animation-delay:18s}
.blumenregen span:nth-child(8) {left:72%; width:26px;height:26px; animation-duration:33s; animation-delay:9s}
.blumenregen span:nth-child(9) {left:81%; width:38px;height:38px; animation-duration:27s; animation-delay:21s}
.blumenregen span:nth-child(10){left:89%; width:30px;height:30px; animation-duration:30s; animation-delay:13s}
.blumenregen span:nth-child(11){left:95%; width:46px;height:46px; animation-duration:23s; animation-delay:4s}
.blumenregen span:nth-child(12){left:68%; width:22px;height:22px; animation-duration:37s; animation-delay:26s}
.site-head,main,.site-foot{position:relative; z-index:1}

/* Kopf */
.site-head{padding:var(--sp-5) 0 var(--sp-3)}
.site-head .wrap{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5)}
.brand{display:flex; align-items:baseline; gap:var(--sp-2); text-decoration:none; color:var(--text)}
.brand .mark{font-family:var(--font-hand); font-size:2rem; line-height:1; color:var(--text)}
.brand .mark::after{content:"."; color:var(--brand)}
.brand b{display:none}
.site-nav{display:flex; gap:var(--sp-5); flex-wrap:wrap}
.site-nav a{font-size:var(--t-small); color:var(--text-muted); text-decoration:none;
  padding-bottom:3px; border-bottom:2px solid transparent}
.site-nav a:hover{color:var(--text)}
.site-nav a[aria-current]{color:var(--brand); border-bottom-color:var(--brand)}
@media (max-width:700px){ .site-nav{gap:var(--sp-4)} .site-nav a{font-size:var(--t-micro)} }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  min-height:48px; padding:0 var(--sp-6); border-radius:var(--r-pill); border:1.5px solid transparent;
  font:inherit; font-weight:600; text-decoration:none; cursor:pointer;
  background:var(--brand); color:#fff; box-shadow:var(--schatten-rot);
  transition:transform .2s var(--ease), background .2s ease, border-color .2s ease;
}
.btn:hover{transform:translateY(-2px); background:var(--brand-hover); color:#fff}
.btn-secondary{background:transparent; color:var(--text); border-color:var(--sage-hell); box-shadow:none}
.btn-secondary:hover{background:var(--surface); border-color:var(--brand-soft); color:var(--text)}
.btn-row{display:flex; flex-wrap:wrap; gap:var(--sp-4); margin-top:var(--sp-6)}

/* kleiner Zettel-Hinweis */
.pill{display:inline-block; font-family:var(--font-hand); font-size:1.3rem;
  color:var(--brand); margin-bottom:var(--sp-2)}
.pill-ok{color:var(--sage-ink)}
.pill-nein{color:var(--danger)}

/* Blütentrenner */
.blumenstrich{display:flex; align-items:center; gap:var(--sp-3); margin:var(--sp-5) 0; max-width:320px}
.blumenstrich i{flex:1; height:1.5px; background:var(--line)}
.blumenstrich svg{width:20px; height:20px; flex:none}

/* Hero */
.hero{padding:var(--sp-7) 0 var(--sp-8)}
.hero-grid{display:grid; gap:var(--sp-7); align-items:center}
@media (min-width:900px){ .hero-grid{grid-template-columns:1.05fr .95fr; gap:var(--sp-8)} }
.hero h1{font-size:var(--t-hero); font-weight:700; line-height:1.08;
  letter-spacing:-.01em; margin:0 0 var(--sp-3); max-width:13ch}
.hero h1 em{font-family:var(--font-hand); font-style:normal; font-weight:400; color:var(--brand)}
.lead{font-size:1.1rem; color:var(--text-muted); max-width:42ch; margin:0}
.strauss{width:100%; max-width:420px; margin-inline:auto;
  filter:drop-shadow(0 22px 26px rgba(74,48,39,.14))}

.steckbrief{background:var(--papier); border:var(--kontur); border-radius:var(--r-lg);
  padding:var(--sp-6); box-shadow:var(--schatten)}
.steckbrief h2{font-family:var(--font-hand); font-size:1.7rem; font-weight:400; color:var(--brand);
  margin:0 0 var(--sp-4); padding-bottom:var(--sp-3); border-bottom:1.5px solid var(--line)}
.steckbrief dl{display:grid; grid-template-columns:auto 1fr; gap:var(--sp-3) var(--sp-5); margin:0}
.steckbrief dt{color:var(--text-muted); font-size:var(--t-small)}
.steckbrief dd{margin:0; font-weight:600}

/* Abschnitte */
section{padding:var(--sp-8) 0}
section h2{font-size:var(--t-h2); font-weight:700; line-height:1.15; margin:0 0 var(--sp-5)}
section h2 em{font-family:var(--font-hand); font-style:normal; font-weight:400; color:var(--brand)}
section p{max-width:var(--w-text)}
.band{background:linear-gradient(180deg,rgba(207,224,211,.32),rgba(253,244,236,0))}

/* Karten */
.grid-3{display:grid; gap:var(--sp-6); grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  margin-top:var(--sp-6)}
.grid-3 > div{background:var(--papier); border:var(--kontur); border-radius:var(--r-lg);
  padding:var(--sp-6) var(--sp-5); box-shadow:var(--schatten)}
.grid-3 > div:nth-child(2n){background:var(--brand-wash)}
.grid-3 h3{font-size:var(--t-h3); font-weight:700; margin:0 0 var(--sp-2)}
.grid-3 p{color:var(--text-muted); margin:0}
.grid-3 > div::before{content:""; display:block; width:36px; height:36px; margin-bottom:var(--sp-3);
  background:center/contain no-repeat}

/* Tabellen */
table{width:100%; border-collapse:separate; border-spacing:0; margin-top:var(--sp-5);
  font-variant-numeric:tabular-nums; background:var(--papier); border:var(--kontur);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--schatten)}
caption{text-align:left; color:var(--text-muted); font-size:var(--t-small); padding-bottom:var(--sp-3)}
th,td{text-align:left; padding:var(--sp-4); border-bottom:1.5px solid var(--line); vertical-align:top}
thead th{font-size:var(--t-small); font-weight:600; color:var(--text-muted); background:var(--sage-soft)}
tbody tr:last-child td{border-bottom:0}
.phasen td strong,.buchungen td strong{display:block; font-weight:700}
.zeitraum{display:block; font-size:var(--t-small); color:var(--text-muted)}
@media (max-width:768px){
  table{border:0; background:transparent; box-shadow:none}
  table,thead,tbody,tr,th,td{display:block}
  thead{position:absolute; left:-9999px}
  tr{background:var(--papier); border:var(--kontur); border-radius:var(--r-lg);
     box-shadow:var(--schatten); padding:var(--sp-5); margin-bottom:var(--sp-5)}
  td{border:0; padding:var(--sp-2) 0}
  td::before{content:attr(data-label); display:block; font-size:var(--t-micro); color:var(--text-muted)}
}
.fussnote{font-size:var(--t-small); color:var(--text-muted); margin-top:var(--sp-4)}

/* Preis */
.preis{font-size:clamp(2.6rem,7vw,3.8rem); color:var(--brand); line-height:1; font-weight:700}
.preis-einheit{font-size:1rem; font-weight:600; color:var(--text-muted)}
.preis-hinweis{font-size:var(--t-small); color:var(--text-muted); margin-top:var(--sp-3)}

/* Formulare */
.rechner{display:grid; gap:var(--sp-5); max-width:var(--w-text); margin-top:var(--sp-6)}
.feld label,.feld .feld-titel{display:block; font-weight:600; margin-bottom:var(--sp-2)}
.feld input[type="date"],.feld input[type="text"],.feld input[type="email"],
.feld input[type="tel"],.feld input[type="password"],.feld select,.feld input[type="file"]{
  width:100%; min-height:48px; padding:0 var(--sp-4); font:inherit;
  background:var(--surface); color:var(--text); border:var(--kontur); border-radius:var(--r-sm)}
.feld input[type="file"]{padding:var(--sp-3)}
.feld textarea{width:100%; padding:var(--sp-4); font:inherit; line-height:1.7;
  background:var(--surface); color:var(--text); border:var(--kontur); border-radius:var(--r-sm)}
.feld .hilfe{font-size:var(--t-small); color:var(--text-muted); margin:var(--sp-2) 0 0}
.check{display:flex; align-items:flex-start; gap:var(--sp-3)}
.check input{width:22px; height:22px; margin-top:4px; accent-color:var(--brand); flex:none}
.check label{font-weight:400}
.falle{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
fieldset{border:0; padding:0; margin:0; display:grid; gap:var(--sp-5)}
legend{font-family:var(--font-hand); font-size:1.6rem; color:var(--brand); padding:0; margin-bottom:var(--sp-2)}

.status-text{font-size:var(--t-small); color:var(--text-muted); margin:var(--sp-2) 0 0; max-width:var(--w-text)}
.hinweis-fehler,.hinweis-ok{max-width:var(--w-text); padding:var(--sp-4) var(--sp-5);
  border-radius:var(--r-md); background:var(--brand-wash); border:1.5px solid var(--brand-soft)}
.hinweis-ok{background:var(--sage-soft); border-color:var(--sage-hell)}

.slots{display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-3)}
.slot{min-height:46px; min-width:78px; padding:0 var(--sp-4); font:inherit; font-weight:600;
  font-variant-numeric:tabular-nums; cursor:pointer; background:var(--surface); color:var(--text);
  border:var(--kontur); border-radius:var(--r-pill); box-shadow:var(--shadow-1);
  transition:transform .18s var(--ease), background .2s ease, border-color .2s ease}
.slot:hover{transform:translateY(-2px); border-color:var(--brand-soft)}
.slot-aktiv{background:var(--brand); border-color:var(--brand); color:#fff}

.ergebnis{background:var(--papier); border:1.5px solid var(--brand-soft); border-radius:var(--r-lg);
  padding:var(--sp-6); box-shadow:var(--schatten-rot)}
.ergebnis p{margin:0; line-height:1.8}
.noscript{background:var(--sage-soft); border:var(--kontur); border-radius:var(--r-md);
  padding:var(--sp-4); font-size:var(--t-small)}

/* Kontakt */
.kontakt-box{background:var(--papier); border:var(--kontur); border-radius:var(--r-lg);
  padding:var(--sp-6); max-width:var(--w-text); box-shadow:var(--schatten)}
.kontakt-box p{margin:0 0 var(--sp-4)}
.kontakt-liste{list-style:none; padding:0; margin:0; display:grid; gap:var(--sp-3)}
.kontakt-liste a{font-weight:600}

/* Galerie */
.galerie{display:grid; gap:var(--sp-6); grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin-top:var(--sp-6)}
.medium{margin:0; background:var(--papier); border:var(--kontur); border-radius:var(--r-lg);
  box-shadow:var(--schatten); overflow:hidden}
.medium img,.medium video{width:100%; display:block; aspect-ratio:4/3; object-fit:cover;
  background:var(--erde-soft)}
.medium figcaption{padding:var(--sp-4) var(--sp-5); font-size:var(--t-small); color:var(--text-muted)}
.medium-leer{aspect-ratio:4/3; display:grid; place-items:center; padding:var(--sp-4);
  background:var(--erde-soft); text-align:center}

/* Blog */
.notizen{display:grid; gap:var(--sp-6); max-width:var(--w-text); margin-top:var(--sp-5)}
.notiz{background:var(--papier); border:var(--kontur); border-radius:var(--r-lg);
  padding:var(--sp-6); box-shadow:var(--schatten)}
.notiz:nth-child(2n){background:var(--brand-wash)}
.notiz h2,.notiz h3{font-size:1.35rem; font-weight:700; margin:0 0 var(--sp-2)}
.notiz p{margin:0 0 var(--sp-3)}
.notiz p:last-child{margin-bottom:0}
.notiz-datum{font-family:var(--font-hand); font-size:1.15rem; color:var(--brand);
  margin:0 0 var(--sp-2) !important}
.platzhalter{background:var(--brand-wash); border-bottom:1.5px dashed var(--brand-soft);
  color:var(--brand-ink); padding:0 3px}

/* Empfehlungstexte */
.kopierbox{background:var(--papier); border:var(--kontur); border-radius:var(--r-lg);
  padding:var(--sp-6); max-width:var(--w-text); margin-bottom:var(--sp-6); box-shadow:var(--schatten)}
.kopierbox p{margin:0 0 var(--sp-4); line-height:1.7}

/* Verwaltung */
.login{max-width:440px}
.filter{display:flex; flex-wrap:wrap; gap:var(--sp-3); font-size:var(--t-small); margin:var(--sp-4) 0}
.filter a{text-decoration:none; font-weight:600; padding:var(--sp-2) var(--sp-4);
  border:var(--kontur); border-radius:var(--r-pill); background:var(--surface); color:var(--text)}
.filter a:hover{border-color:var(--brand-soft)}
.filter a[aria-current]{background:var(--brand); border-color:var(--brand); color:#fff}
.status-form{display:flex; gap:var(--sp-3); margin-top:var(--sp-4); flex-wrap:wrap}
.status-form .btn{min-height:40px; padding:0 var(--sp-4); font-size:var(--t-small)}
.abmelden{margin-top:var(--sp-7)}
details summary{cursor:pointer; font-size:var(--t-small); color:var(--text-muted)}

/* Fuß */
.site-foot{padding:var(--sp-7) 0 var(--sp-8); color:var(--text-muted); font-size:var(--t-small);
  text-align:center; border-top:1.5px solid var(--line); margin-top:var(--sp-7)}
.site-foot .wrap{display:grid; gap:var(--sp-3); justify-items:center}
.site-foot nav{display:flex; gap:var(--sp-5); flex-wrap:wrap; justify-content:center}
.site-foot a{color:var(--text-muted); font-weight:600}

/* Rechtsseiten — gleiche Außenbreite wie alle anderen Seiten,
   die Textbreite wird innen begrenzt, damit der linke Rand überall gleich sitzt. */
.legal{padding:var(--sp-6) 0 var(--sp-8)}
.wrap.legal{max-width:var(--w-page)}
.wrap.legal > *{max-width:var(--w-text)}
.legal h1{font-size:var(--t-h2); font-weight:700; margin:0 0 var(--sp-5)}
.legal h2{font-size:var(--t-h3); font-weight:700; margin:var(--sp-7) 0 var(--sp-3); scroll-margin-top:24px}
.legal h3{font-size:1rem; font-weight:700; margin:var(--sp-5) 0 var(--sp-2)}
.legal p,.legal li{line-height:1.8}
.legal address{font-style:normal}
.toc{background:var(--sage-soft); border:var(--kontur); border-radius:var(--r-lg); padding:var(--sp-5)}
.toc h2{margin:0 0 var(--sp-3); font-size:var(--t-small); color:var(--text-muted); font-weight:600}
.toc ol{margin:0; padding-left:1.4em; display:grid; gap:var(--sp-2)}
.stand{font-size:var(--t-small); color:var(--text-muted); margin-top:var(--sp-7)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .blumenregen{display:none}
  *{animation:none !important; transition:none !important}
}