@font-face{font-family:Grandstander;src:url(fonts/grandstander.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:Nunito;src:url(fonts/nunito.woff2) format("woff2");font-weight:200 1000;font-display:swap}
@font-face{font-family:Caveat;src:url(fonts/caveat.woff2) format("woff2");font-weight:400 700;font-display:swap}

/* Layout: one friendly column (max 1080px), sunny hero with the book-meadow mark, hills band, offer cards, booking block with open dates + request form */
:root{
  --grund:#F6F8EC; --flaeche:#FFFFFF; --tau:#E8EFD3; --erde:#3B2E25; --erde-leise:#6B5B4E;
  --wiese:#507A27; --wiese-hell:#7FA845; --bach:#2F7A9A; --loewenzahn:#F2B630; --hagebutte:#C0402B; --linie:#D3DAC0; --auf-akzent:#FFFFFF;
  --f-display:Grandstander,"Trebuchet MS",system-ui,sans-serif;
  --f-text:Nunito,"Segoe UI",system-ui,sans-serif;
  --f-hand:Caveat,"Segoe Print",cursive;
  --r-klein:10px; --r-blatt:28px; --r-rund:999px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --grund:#1E1C16; --flaeche:#29261E; --tau:#333024; --erde:#F4EFE2; --erde-leise:#BDB3A2;
  --wiese:#9CC66B; --wiese-hell:#B5D98A; --bach:#7DBBD6; --loewenzahn:#F5C653; --hagebutte:#EE7A62; --linie:#433F33; --auf-akzent:#1E1C16; color-scheme:dark}}
:root[data-theme="dark"]{
  --grund:#1E1C16; --flaeche:#29261E; --tau:#333024; --erde:#F4EFE2; --erde-leise:#BDB3A2;
  --wiese:#9CC66B; --wiese-hell:#B5D98A; --bach:#7DBBD6; --loewenzahn:#F5C653; --hagebutte:#EE7A62; --linie:#433F33; --auf-akzent:#1E1C16; color-scheme:dark}
.hand{font-family:var(--f-hand);font-weight:600;font-size:28px;line-height:1;color:var(--hagebutte);display:inline-block;transform:rotate(-3deg)}

*{box-sizing:border-box}
body{background:var(--grund);color:var(--erde);font-family:var(--f-text);font-size:17px;line-height:1.6}
.wrap{max-width:1080px;margin:0 auto;padding-inline:20px}
h1,h2,h3{font-family:var(--f-display);font-weight:700;line-height:1.05;text-wrap:balance;margin:0}
p{margin:0}
a{color:var(--wiese)}
.etikett{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--wiese)}
.leise{color:var(--erde-leise)}
:focus-visible{outline:3px solid var(--bach);outline-offset:2px}

/* Logo */
.m-sonne{fill:var(--loewenzahn)} .m-krone{fill:var(--wiese)} .m-krone2{fill:var(--wiese-hell)}
.m-stamm{stroke:var(--erde);fill:none;stroke-linecap:round} .m-beere{fill:var(--hagebutte)}
.m-seite{fill:var(--wiese)} .m-seite2{fill:var(--wiese-hell)}
.m-zeile{stroke:var(--grund);fill:none;stroke-width:2.5;stroke-linecap:round;opacity:.85}
.m-huegel{fill:var(--wiese)} .m-huegel2{fill:var(--wiese-hell)}

header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--grund);border-bottom:1px solid var(--linie)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--erde)}
.brand svg{width:38px;height:38px}
.brand span{font-family:var(--f-display);font-weight:700;font-size:22px}
nav ul{list-style:none;margin:0;padding:0;display:flex;gap:20px;flex-wrap:wrap}
nav a{color:var(--erde);text-decoration:none;font-weight:600;font-size:15px}
nav a:hover{color:var(--wiese)}

.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;border-radius:var(--r-rund);background:var(--wiese);color:var(--auf-akzent);font-weight:700;font-size:16px;text-decoration:none;border:0;cursor:pointer;font-family:var(--f-text)}
.knopf:hover{filter:brightness(1.08)}
.knopf.zart{background:transparent;color:var(--erde);border:1.5px solid var(--linie)}
.knopf[disabled]{opacity:.5;cursor:not-allowed}

/* Hero */
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:32px;align-items:center;padding-block:56px 40px}
.hero h1{font-size:clamp(42px,6.6vw,78px);line-height:1}
.hero .lead{font-size:20px;margin-top:20px;max-width:34ch}
.hero .aktion{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.hero .zeichen{width:100%;max-width:340px;justify-self:end;background:var(--tau);border-radius:var(--r-rund);padding:28px}
.zert{display:flex;align-items:center;gap:10px;margin-top:28px;font-size:14px;color:var(--erde-leise)}
.punkt{width:12px;height:12px;border-radius:var(--r-rund);background:var(--loewenzahn);flex:0 0 auto}

.wellen{display:block;width:100%;height:70px}

section{padding-block:56px}
.kopf{display:flex;flex-direction:column;gap:10px;margin-bottom:28px;max-width:60ch}
.kopf h2{font-size:clamp(30px,4.5vw,44px)}

/* Angebote */
.angebote{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.angebot{background:var(--flaeche);border-radius:var(--r-blatt);padding:26px;display:flex;flex-direction:column;gap:10px;min-width:0}
.angebot .scheibe{width:28px;height:28px;border-radius:var(--r-rund)}
.angebot h3{font-size:24px}
.meta{font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--erde-leise)}
.angebot .mehr{margin-top:auto;padding-top:8px}
.angebot .mehr button{background:none;border:0;padding:0;color:var(--wiese);font:inherit;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* Über mich */
.ueber{background:var(--tau)}
.ueber .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px;align-items:start}
.foto{aspect-ratio:4/5;max-width:100%;border-radius:var(--r-blatt);background:var(--flaeche);display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;color:var(--erde-leise);font-size:14px;border:1.5px dashed var(--linie)}
.ueber .text{display:flex;flex-direction:column;gap:16px;max-width:62ch}

/* Ablauf */
.ablauf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;list-style:none;margin:0;padding:0;counter-reset:s}
.ablauf li{counter-increment:s;display:flex;flex-direction:column;gap:8px;padding-top:16px;border-top:2px solid var(--linie)}
.ablauf li::before{content:counter(s);font-family:var(--f-display);font-weight:700;font-size:32px;color:var(--bach);line-height:1}
.ablauf h3{font-size:20px}

/* Termine + Anfrage */
.buchen{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:28px;align-items:start}
.termine{display:flex;flex-direction:column;gap:10px}
.termin{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--flaeche);border-radius:var(--r-klein);padding:14px 16px;border:1px solid var(--linie);flex-wrap:wrap}
.termin .wann{font-weight:700;font-variant-numeric:tabular-nums}
.termin .was{font-size:14px;color:var(--erde-leise)}
.termin button{min-height:40px;padding:0 16px;font-size:14px}
.chip{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:var(--r-rund);background:var(--tau);color:var(--erde-leise);margin-left:6px;vertical-align:middle}
.leer{padding:18px;border-radius:var(--r-klein);background:var(--tau);color:var(--erde-leise);font-size:15px}

form.anfrage{background:var(--flaeche);border-radius:var(--r-blatt);padding:26px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.feld{display:flex;flex-direction:column;gap:6px;min-width:0}
.feld.ganz{grid-column:1/-1}
label{font-size:14px;font-weight:600}
input,select,textarea{font:inherit;font-size:16px;color:var(--erde);background:var(--grund);border:1.5px solid var(--linie);border-radius:var(--r-klein);padding:10px 12px;width:100%;min-height:44px}
textarea{min-height:96px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--bach);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--bach) 25%,transparent)}
.fuss{grid-column:1/-1;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hinweis{font-size:14px}
.ok{background:var(--tau);border-radius:var(--r-klein);padding:14px 16px;font-size:15px;grid-column:1/-1}

/* Verwaltung (nur Dortje) */
.verwaltung{background:var(--flaeche);border:1.5px solid var(--loewenzahn);border-radius:var(--r-blatt);padding:24px;margin-top:40px;display:flex;flex-direction:column;gap:18px}
.verwaltung h3{font-size:22px}
.tabelle{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14px;min-width:640px}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--linie);vertical-align:top}
th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--erde-leise)}
.neu{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:10px;align-items:end}
.klein-knopf{background:none;border:1px solid var(--linie);border-radius:var(--r-klein);padding:4px 10px;font:inherit;font-size:13px;color:var(--erde);cursor:pointer}

footer{border-top:1px solid var(--linie);padding-block:36px}
footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:15px}
footer .kontakt{display:flex;flex-direction:column;gap:4px}

@media (max-width:820px){
  .hero .wrap,.ueber .wrap,.buchen{grid-template-columns:minmax(0,1fr)}
  .hero .zeichen{justify-self:start;max-width:220px;order:-1}
  .angebote,.ablauf{grid-template-columns:minmax(0,1fr)}
  .neu{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:520px){
  form.anfrage{grid-template-columns:minmax(0,1fr)}
  nav ul{gap:14px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
html{scroll-behavior:smooth}

body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;font-weight:400}
.check input{width:20px;min-height:20px;height:20px;margin-top:2px;flex:0 0 auto}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.recht{padding-block:48px}
.recht .wrap{max-width:760px}
.recht h1{font-size:clamp(34px,5vw,48px);margin-bottom:24px}
.recht h2{font-size:22px;margin:28px 0 8px}
.recht p,.recht li{margin:0 0 10px}
.platzhalter{background:var(--tau);padding:2px 6px;border-radius:6px}