@font-face{
  font-family:"Ropa Sans";
  src:url("../fonts/RopaSans-Regular.ttf") format("truetype");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:"Ropa Sans";
  src:url("../fonts/RopaSans-Italic.ttf") format("truetype");
  font-style:italic;
  font-weight:400;
  font-display:swap;
}

:root{
  --orange:#ea5a0b;
  --peach:#facdae;
  --peach-light:#fce1ce;
  --warm:#efedea;
  --ink:#111;
  --max:900px;
  --rule:3pt solid var(--orange);
  --rule-gap:20px;
  --fs-h1:41px;
  --fs-h2:28px;
  --fs-h3:28px;
  --fs-intro:24px;
  --fs-body:21px;
  --fs-button:24px;
  --fs-ui:18px;
  --lh-heading:1.12;
  --lh-intro:1.20;
  --lh-body:1.16;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* Sprungmarken: Zielansicht bewusst ca. 50 px höher als zuvor */
#blick-ins-buch,#parkplan,#autorin,#datenschutz{scroll-margin-top:100px}
body{
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:"Ropa Sans","Arial Narrow",Arial,sans-serif;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-synthesis:weight style;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
.content-width{width:min(var(--max),calc(100% - 30px));margin-inline:auto}
.site{overflow:hidden}

h1,h2,h3,.brand,.bookshop,.price{
  font-family:"Marker Felt Wide","Marker Felt",Chalkboard,"Comic Sans MS",cursive;
  margin:0;
  font-weight:700;
}
h1{font-size:var(--fs-h1);line-height:var(--lh-heading)}
h2{font-size:var(--fs-h2);line-height:var(--lh-heading);color:var(--orange)}
h3{font-size:var(--fs-h3);line-height:var(--lh-heading);color:#000}
p{margin:.45em 0}
.intro{font-size:var(--fs-intro);line-height:var(--lh-intro)}
.intro-bold,.body-bold{font-weight:700}
.form-text{font-size:var(--fs-body);line-height:var(--lh-body)}
.muted{font-weight:400;color:#555}
.button{display:inline-block;border:0;border-radius:4px;background:var(--orange);color:#fff!important;font-weight:700;font-size:var(--fs-button);line-height:1;padding:.38em .8em;cursor:pointer;text-decoration:none!important}.button:hover{filter:brightness(.96)}

/* Orange Trennlinien: stets 20 px Abstand davor und danach */
.topbar{background:#fff;position:sticky;top:0;z-index:20;margin-bottom:var(--rule-gap)}
.nav{min-height:48px;display:flex;align-items:center;justify-content:space-between;border-bottom:var(--rule);font-size:var(--fs-ui);padding:8px 0 var(--rule-gap)}
.brand{font-size:var(--fs-ui);white-space:nowrap}.nav-links{display:flex;gap:12px;align-items:center}.nav-order{color:var(--orange)}.menu-toggle{display:none;border:0;background:none;font-size:26px}

.hero{height:602px;position:relative}.hero>img{width:100%;height:100%;object-fit:cover}.hero-copy{position:absolute;top:83px;left:340px}.hero .intro{margin-top:62px}.hero .intro-bold{margin-top:24px}.hero-button{position:absolute;right:31px;bottom:45px}

/* LG02 enthält den Fond bereits vollständig; Darstellung exakt 900 px breit */
.lead-band{
  height:224px; /* 200 px LG02 + 20 px Abstand + 3 pt Linie */
  position:relative;
  display:flex;
  align-items:center;
  padding:20px 315px 44px 20px;
  background:#fff;
  border-bottom:var(--rule);
  margin-top:20px; /* 20 px zwischen LG01 und LG02 */
  margin-bottom:var(--rule-gap);
}
.lead-band::before{
  content:"";
  position:absolute;
  inset:0 auto auto 0;
  width:900px;
  height:200px;
  background:url("../images/LG02_Fond_Laub.webp") center top / 900px 200px no-repeat;
  z-index:0;
}
.lead-band>div{position:relative;z-index:1}.lead-band p{max-width:580px}.lead-band h3{margin-bottom:20px}

.story-grid{padding-top:0}.story{position:relative;display:grid;align-items:start;column-gap:20px;margin-bottom:20px}.story p{margin-top:20px}.story>div{position:relative;z-index:2}.story-image-left{grid-template-columns:438px 1fr}.story-image-right{grid-template-columns:1fr 438px}.story>img:not(.decor){width:438px}.decor{position:absolute;z-index:0;pointer-events:none}
.carrot{width:150px!important;left:0;bottom:0;z-index:0}.winter-story{align-items:stretch;padding-bottom:0}.winter-story>div{min-height:100%}
.cherry-story{grid-template-columns:592px 1fr;min-height:296px;column-gap:20px;align-items:stretch}.cherry-story .wide-image{width:592px!important}.cherry-copy{position:relative;padding-top:8px;z-index:2;min-height:100%}.cherry-copy h2,.cherry-copy p{position:relative;z-index:2}.blossoms{width:308px!important;right:-10px;bottom:0;z-index:0}
.mammoth-story{padding-top:2px;position:relative;align-items:start}.mammoth-story>div{position:static;z-index:2}.mammoth-story>img:not(.decor){position:relative;z-index:1}.cone{width:120px!important;left:calc(100% - 528px);bottom:0;transform:none;z-index:2}

/* 80%-Fond (425 px) mittig hinter dem 532-px-Parkplan */
.parkplan{margin-top:20px;display:grid;grid-template-columns:532px 1fr;min-height:532px;align-items:center;position:relative;background:transparent}
.parkplan::before{content:"";position:absolute;left:0;right:0;height:395px;top:50%;transform:translateY(-50%);background:var(--peach);z-index:0}
.parkplan>img{width:532px;position:relative;z-index:1}.parkplan>div{padding:14px 22px 10px 20px;position:relative;z-index:2}.parkplan h3{margin-bottom:20px}.parkplan p{line-height:var(--lh-body)}

.features{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:20px 0 var(--rule-gap);border-bottom:var(--rule);margin-bottom:var(--rule-gap)}.features article{text-align:center}.features img{width:285px;height:285px;object-fit:contain;margin:0 auto 20px}.features h3{margin-bottom:20px}.features p{line-height:var(--lh-body);margin:0 auto;max-width:285px}

.audience{display:grid;grid-template-columns:592px 1fr;column-gap:20px;align-items:stretch;margin-top:0}.audience>img{width:592px;height:444px;object-fit:cover}.audience>div{padding:13px 18px 8px 0}.audience h2{margin-bottom:20px}.audience p{line-height:var(--lh-body)}.audience p:nth-of-type(2){margin-bottom:20px}

.author{background:var(--warm);display:grid;grid-template-columns:180px 1fr 180px;align-items:center;gap:20px;padding:14px 15px;margin-top:20px}.author>img{width:180px;height:252px;object-fit:cover}.author h3{margin-bottom:20px}.author p{line-height:var(--lh-body)}

/* Fond beginnt 50 px oberhalb der Buchabbildung */
.order{margin-top:20px;background:var(--peach);padding:50px 20px var(--rule-gap);border-bottom:var(--rule);margin-bottom:var(--rule-gap)}
.product-row{display:grid;grid-template-columns:315px 1fr 128px;column-gap:20px;align-items:center;position:relative}.book{width:315px}.product-copy{padding:8px 4px 4px 0}.product-copy h3{margin-bottom:20px}.product-copy p{margin:.18em 0}.price{font-size:39px;color:var(--orange)}.product-facts{font-size:var(--fs-body);line-height:var(--lh-body)}.thumb{width:128px;align-self:end}
.order-box{border:2px solid var(--orange);padding:18px 27px 20px;margin-top:20px;background:var(--peach-light)}.order-box h2{margin-bottom:36px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 40px}.form-grid label{display:grid;grid-template-columns:150px 1fr;gap:10px;align-items:start;font-size:var(--fs-body);line-height:var(--lh-body)}.form-grid label>span.field-label{font-size:var(--fs-body)}.form-grid label>span.field-label span{font-size:var(--fs-body)}.form-grid input,.form-grid textarea,.simple-form input,.simple-form textarea{width:100%;border:0;background:#fff;font:inherit;padding:6px 8px;resize:vertical}.order-options{display:flex;align-items:center;gap:15px;margin:16px 0 8px;font-size:var(--fs-body)}.quantity{font-weight:700;display:flex;align-items:center;gap:20px}.quantity select{font:inherit}.price-payment-row{display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:var(--fs-body)}.price-payment-row fieldset{display:flex;align-items:center;gap:12px;border:0;padding:0;margin:0}.price-payment-row legend{float:left;font-weight:700;margin-right:10px}.order-box>form>p{font-size:var(--fs-body)}.consent{display:block;font-size:var(--fs-body);margin:20px 0}.consent input{width:18px;height:18px;vertical-align:-3px}.consent a{text-decoration:underline}.submit-button{display:block;margin:20px auto 0}.form-note{text-align:center;color:#8b2b00;min-height:1.1em}

.bookshop{display:grid;grid-template-columns:96px 1fr 60px;align-items:center;gap:20px;padding:var(--rule-gap) 0;border-bottom:var(--rule);margin-bottom:var(--rule-gap);font-size:29px;text-align:center}.bookshop>img:first-child{width:96px}.bookshop>img:last-child{width:60px}.bookshop span{color:var(--orange)}
.footer{font-size:var(--fs-body);text-align:right;padding:0 0 28px}.footer nav{display:flex;justify-content:flex-end;gap:12px}

/* Rechtliches */
.legal-wrap,.form-page-wrap{padding:30px 0 20px;border-bottom:var(--rule);margin-bottom:20px}.legal-logo{text-align:center}.legal-logo img{width:240px;margin:0 auto 50px}.legal-top{display:grid;grid-template-columns:1fr 1fr;gap:80px}.legal-wrap h3,.simple-form h3{margin-bottom:20px}.legal-wrap h4{font-size:var(--fs-body);font-weight:700;margin:20px 0}.legal-wrap p{font-size:var(--fs-body);line-height:var(--lh-body)}.legal-wrap hr{border:0;border-top:var(--rule);margin:20px 0}.small-button{font-size:var(--fs-button)}.legal-text{max-width:900px}

/* Formulare */
.form-page-wrap{display:grid;gap:45px}.simple-form{border-top:0;padding-top:0;margin-top:0}.simple-form p{font-size:var(--fs-body);line-height:var(--lh-body)}.simple-form form{max-width:760px}.simple-form label{display:block;font-size:var(--fs-body);margin:20px 0}.simple-form input,.simple-form textarea{border:1px solid #bbb;margin-top:4px}.form-grid-3{grid-template-columns:repeat(3,1fr)}.form-grid-3 label{display:block}.form-help{font-size:15px!important}

@media(max-width:760px){
  :root{
    --fs-h1:31px;
    --fs-h2:25px;
    --fs-h3:25px;
    --fs-intro:21px;
    --fs-body:18px;
    --fs-button:20px;
    --fs-ui:17px;
  }

  /* Mobile: Desktop-Regeln oberhalb dieses Blocks bleiben unverändert. */
  #blick-ins-buch,#parkplan,#autorin,#datenschutz{scroll-margin-top:20px}
  body{font-size:var(--fs-body)}
  .content-width{width:min(100% - 24px,var(--max))}

  /* Kopf / Navigation */
  .topbar{position:relative;margin-bottom:20px}
  .nav{min-height:56px;padding:8px 0 20px;align-items:center}
  .brand{max-width:78%;white-space:normal;line-height:1.05}
  .menu-toggle{display:block;font-family:inherit;font-size:28px;line-height:1;padding:4px 0}
  .nav-links{display:none;position:absolute;z-index:30;top:100%;left:0;right:0;background:#fff;border-bottom:var(--rule);padding:16px 12px 20px;flex-direction:column;align-items:flex-start;gap:12px}
  .nav-links.open{display:flex}
  .nav-links span{display:none}

  /* Hero: Bild zuerst, Text als eigenständige mobile Komposition darunter */
  .hero{height:auto;display:flex;flex-direction:column;background:#fce1ce}
  .hero picture,.hero>picture{display:block;width:100%}
  .hero picture img,.hero>picture img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain;display:block}
  .hero-copy{position:static;padding:20px 20px 0;background:#fce1ce}
  .hero h1{margin:0}
  .hero .intro{margin-top:32px}
  .hero .intro-bold{margin-top:20px}
  .hero-button{position:static;align-self:flex-start;margin:20px 20px 24px}

  /* Laub-Fond: volle Breite, Text lesbar links */
  .lead-band{height:auto;min-height:200px;margin-top:20px;margin-bottom:20px;padding:20px 31% 40px 20px;align-items:flex-start}
  .lead-band::before{width:100%;height:100%;background-size:auto 100%;background-position:center top}
  .lead-band h3{margin-bottom:20px}
  .lead-band p{max-width:none;margin-bottom:0}

  /* Geschichten: konsequent einspaltig, 20-px-Rhythmus */
  .story,.story-image-left,.story-image-right,.cherry-story{display:flex;flex-direction:column;gap:20px;margin-bottom:20px;min-height:0}
  .story>img:not(.decor),.cherry-story .wide-image{width:100%!important;height:auto}
  .story>div,.cherry-copy{padding:0;min-height:0}
  .story h2{margin:0}
  .story p{margin:20px 0 0}
  .story-image-right>img:not(.decor){order:1}
  .story-image-right>div{order:2}

  /* Schmuck bleibt auch mobil erhalten, aber zurückhaltender. */
  .winter-story>div{padding-bottom:82px}
  .carrot{display:block;width:105px!important;left:4px;bottom:0;opacity:.98}
  .cherry-copy{padding-bottom:112px}
  .blossoms{display:block;width:185px!important;right:-4px;bottom:0}
  .mammoth-story>div{position:relative;padding-bottom:72px}
  .cone{display:block;width:82px!important;left:auto;right:20px;bottom:0}

  /* Parkplan */
  .parkplan{display:flex;flex-direction:column;min-height:0;margin-top:20px;padding:0 0 20px;gap:20px;background:var(--peach)}
  .parkplan::before{display:none}
  .parkplan>img{width:100%;margin:0}
  .parkplan>div{padding:0 20px 4px}
  .parkplan h3{margin-bottom:20px}

  /* Drei Leistungen: mobil bewusst untereinander und zentriert. */
  .features{grid-template-columns:1fr;gap:32px;padding:20px 0 20px}
  .features article{display:block;text-align:center}
  .features img{width:min(285px,78vw);height:auto;aspect-ratio:1/1;object-fit:contain;margin:0 auto 20px}
  .features h3{margin-bottom:20px}
  .features p{margin:0 auto;max-width:310px}

  /* Zielgruppe */
  .audience{display:flex;flex-direction:column;gap:20px;margin-top:0}
  .audience>img{width:100%;height:auto}
  .audience>div{padding:0 4px 0}
  .audience h2{margin-bottom:20px}
  .audience p{margin:.45em 0}
  .audience p:nth-of-type(2){margin-bottom:20px}

  /* Autorin: beide Porträts bleiben sichtbar. */
  .author{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:20px;margin-top:20px;align-items:start}
  .author>img{width:100%;height:auto;aspect-ratio:180/252;object-fit:cover}
  .author>img:first-child{grid-column:1;grid-row:1}
  .author>img:last-child{display:block;grid-column:2;grid-row:1}
  .author>div{grid-column:1 / -1;grid-row:2;padding:0}
  .author h3{margin-bottom:20px}

  /* Produkt und Bestellung */
  .order{padding:50px 12px 20px;margin-top:20px}
  .product-row{display:grid;grid-template-columns:1fr;gap:20px;text-align:center}
  .book{width:min(280px,78vw);margin:0 auto}
  .product-copy{padding:0}
  .product-copy h3{margin-bottom:20px}
  .product-copy p{margin:.3em 0}
  .price{font-size:36px}
  .thumb{display:block;width:86px;margin:-8px 12px 0 auto}
  .order-box{padding:18px 14px 20px;margin-top:20px}
  .order-box h2{margin-bottom:36px}
  .form-grid{grid-template-columns:1fr;gap:20px}
  .form-grid label{grid-template-columns:1fr;gap:7px}
  .order-options,.price-payment-row{align-items:flex-start;flex-direction:column;gap:12px}
  .price-payment-row fieldset{display:grid;grid-template-columns:auto auto;gap:10px 16px}
  .price-payment-row legend{grid-column:1 / -1;float:none;margin:0 0 4px}
  .consent{line-height:1.2}
  .submit-button{width:100%;padding:.55em .7em}

  /* Buchhandel / Footer */
  .bookshop{grid-template-columns:64px 1fr 36px;gap:12px;padding:20px 0;font-size:24px;line-height:1.08}
  .bookshop>img:first-child{width:64px}
  .bookshop>img:last-child{width:36px}
  .footer{text-align:center;padding-bottom:24px}
  .footer nav{justify-content:center;flex-wrap:wrap;gap:8px 10px}

  /* Rechtliches und Formulare */
  .legal-wrap,.form-page-wrap{padding:20px 0 20px}
  .legal-logo img{width:min(240px,70vw);margin-bottom:40px}
  .legal-top{grid-template-columns:1fr;gap:28px}
  .legal-wrap h4{margin:20px 0 10px}
  .simple-form form{max-width:none}
  .simple-form label{margin:20px 0}
  .form-grid-3{grid-template-columns:1fr}
}

.single-form-page{display:block}.single-form-page .simple-form{margin-top:0;padding-top:0;border-top:0}