/* Moonleaf design system, extrahiert aus index.html 2026-07-20.
   Eine Quelle fuer alle Seiten: Startseite + Ratgeber-Seiten. */
:root{
    --bg:#f6f4ef; --paper:#fffdf9; --ink:#3b3a36; --soft:#8a887f;
    --line:#e5e1d8; --sage:#a9b5a0; --sage-deep:#5c6b52; --terra:#c9a894;
    --serif:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,"Times New Roman",serif;
    --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
    --maxw:1120px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;font-family:var(--sans);background:var(--bg);color:var(--ink);
       line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;margin:0}

  /* ---- top bar (over hero) ---- */
  .topbar{position:absolute;top:0;left:0;right:0;z-index:10}
  .topbar .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:22px;padding-bottom:22px}
  .brand{font-family:var(--serif);font-size:21px;color:#f4f2ec;display:flex;align-items:center;gap:9px}
  .brand svg{width:20px;height:20px;opacity:.92}
  .nav{display:flex;gap:26px;font-size:14.5px;color:#e7eadf}
  .nav a{opacity:.85;transition:opacity .15s}
  .nav a:hover{opacity:1}
  @media(max-width:640px){.nav{display:none}}

  /* ---- hero (deep sage band + warm glow) ---- */
  .hero{position:relative;overflow:hidden;text-align:center;color:#f4f2ec;
        background:linear-gradient(178deg,#5c6b52 0%,#556249 55%,#4f5c49 100%);
        padding:150px 22px 116px}
  .hero::after{content:"";position:absolute;left:0;right:0;bottom:-30%;height:70%;pointer-events:none;
        background:radial-gradient(58% 100% at 50% 100%,rgba(201,168,148,.55),rgba(233,224,214,.16) 45%,rgba(246,244,239,0) 72%)}
  .hero .inner{position:relative;z-index:2;max-width:760px;margin:0 auto}
  .pill{display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border:1px solid rgba(244,242,236,.32);
        border-radius:999px;font-size:13px;letter-spacing:.04em;color:#eef0e7;background:rgba(255,255,255,.06)}
  .pill .dot{width:6px;height:6px;border-radius:50%;background:var(--terra);box-shadow:0 0 0 3px rgba(201,168,148,.28)}
  .hero h1{font-size:clamp(34px,5.4vw,58px);line-height:1.06;margin:26px 0 0}
  .hero p{max-width:540px;margin:20px auto 0;font-size:clamp(17px,2vw,19px);color:#dfe3d8}
  .cta-row{margin-top:34px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
  .btn{display:inline-flex;align-items:center;gap:9px;border-radius:999px;padding:13px 24px;
       font-size:15px;cursor:pointer;border:1px solid transparent;transition:transform .15s ease,box-shadow .2s ease,background .2s}
  .btn-primary{background:#f4f2ec;color:#3f4a38;box-shadow:0 8px 24px rgba(40,50,35,.22)}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(40,50,35,.28)}
  .btn-ghost{background:transparent;color:#eef0e7;border-color:rgba(244,242,236,.4)}
  .btn-ghost:hover{background:rgba(255,255,255,.08)}

  /* ---- intro ---- */
  .intro{text-align:center;padding:84px 0 26px}
  .intro h2{font-size:clamp(27px,3.6vw,38px)}
  .intro>.wrap>p{max-width:600px;margin:18px auto 0;color:var(--soft);font-size:17.5px}
  .features{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:56px 0 8px;
            border-top:1px solid var(--line)}
  .feat{padding:30px 26px 6px;border-left:1px solid var(--line)}
  .feat:first-child{border-left:none}
  .feat .ico{width:30px;height:30px;color:var(--sage-deep);margin-bottom:14px}
  .feat h3{font-size:18px}
  .feat p{margin:9px 0 0;color:var(--soft);font-size:15px;line-height:1.6}
  @media(max-width:720px){
    .features{grid-template-columns:1fr;border-top:none}
    .feat{border-left:none;border-top:1px solid var(--line);padding:26px 4px}
    .feat:first-child{border-top:none}
  }

  /* ---- niche sections ---- */
  section{padding:58px 0}
  .niche-head{max-width:640px;margin:0 0 30px}
  .niche-head h2{font-size:clamp(24px,3vw,32px)}
  .niche-head p{margin:12px 0 0;color:var(--soft);font-size:16.5px}
  .rule{height:1px;background:var(--line);border:0;margin:0 0 30px}

  .grid{display:grid;gap:26px}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-2{grid-template-columns:repeat(2,1fr)}
  @media(max-width:860px){.grid-3{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:560px){.grid-3,.grid-2{grid-template-columns:1fr}}

  /* matted print card */
  .card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px;
        display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .25s ease}
  .card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(60,58,52,.10)}
  .frame{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#efece5}
  .card img{width:100%;display:block;object-fit:cover}
  .ratio-port img{aspect-ratio:832/1216}
  .ratio-sq img{aspect-ratio:1/1}
  .foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 4px 4px}
  .name{font-family:var(--serif);font-size:17px;color:var(--ink)}
  .want{border:1px solid var(--sage);background:transparent;color:var(--sage-deep);border-radius:999px;
        padding:8px 16px;font-size:13.5px;cursor:pointer;white-space:nowrap;
        transition:background .18s,color .18s,border-color .18s}
  .want:hover{background:var(--sage);color:#fff}
  .want.on{background:var(--sage-deep);color:#fff;border-color:var(--sage-deep)}

  /* ---- CTA band (deep sage + glow) ---- */
  .band{position:relative;overflow:hidden;text-align:center;color:#f4f2ec;margin-top:40px;
        background:linear-gradient(178deg,#5c6b52,#4f5c49);padding:88px 22px 96px}
  .band::after{content:"";position:absolute;left:0;right:0;bottom:-30%;height:70%;pointer-events:none;
        background:radial-gradient(58% 100% at 50% 100%,rgba(201,168,148,.5),rgba(246,244,239,0) 72%)}
  .band .inner{position:relative;z-index:2;max-width:640px;margin:0 auto}
  .band h2{font-size:clamp(27px,3.6vw,40px)}
  .band p{margin:18px auto 0;max-width:520px;color:#dfe3d8;font-size:17px}
  .sample-form{margin:26px auto 0;max-width:440px}
  .sample-lead{margin:0 0 12px;color:#f4f2ec;font-size:16px}
  .sample-row{display:flex;gap:8px;flex-wrap:wrap}
  .sample-row input[type=email]{flex:1;min-width:200px;padding:11px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.3);
        background:rgba(255,255,255,.08);color:#f4f2ec;font-size:15px}
  .sample-row input[type=email]::placeholder{color:#c7ccc0}
  .sample-row button{padding:11px 18px;border-radius:10px;border:none;background:#f4f2ec;color:#3f4a3a;font-size:14.5px;
        font-weight:600;cursor:pointer;white-space:nowrap}
  .sample-consent{display:block;margin-top:12px;font-size:13px;color:#cdd2c4;text-align:left}
  .sample-note{margin-top:10px;font-size:14px;color:#f4f2ec}

  /* ---- footer ---- */
  footer{background:var(--bg);border-top:1px solid var(--line);padding:56px 0 40px}
  .fcols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
  .fbrand{font-family:var(--serif);font-size:20px;display:flex;align-items:center;gap:9px}
  .fbrand svg{width:19px;height:19px;color:var(--sage-deep)}
  .fcols p{color:var(--soft);font-size:14.5px;margin:12px 0 0;max-width:280px}
  .fcol h4{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);font-weight:600;margin:2px 0 14px}
  .fcol a{display:block;color:var(--ink);font-size:14.5px;padding:5px 0;opacity:.85;transition:opacity .15s}
  .fcol a:hover{opacity:1}
  .fbot{border-top:1px solid var(--line);margin-top:40px;padding-top:22px;color:var(--soft);font-size:13px;
        display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
  @media(max-width:640px){.fcols{grid-template-columns:1fr;gap:26px}}

  /* ---- reveal on scroll (transform/opacity only) ---- */
  .js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease-out,transform .6s ease-out}
  .js .reveal.in{opacity:1;transform:none}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
    .js .reveal{opacity:1;transform:none}
  }

.brand .mark,.fbrand .mark{border-radius:50%;object-fit:cover;background:#f0ede6;
    box-shadow:0 1px 3px rgba(0,0,0,.14)}
  .brand .mark{width:30px;height:30px}
  .fbrand .mark{width:28px;height:28px}

/* ---------- Ratgeber-/Langtext-Seiten (Seitentyp ab 2026-07-20) ---------- */
/* Element-Sprache der Startseite, erweitert um Lesespalte, Brotkrume, FAQ.
   Gleiche Token, gleiche Rhythmen, kein zweites Design. */

.page-hero{position:relative;overflow:hidden;color:#f4f2ec;
  background:linear-gradient(178deg,#5c6b52 0%,#556249 60%,#4f5c49 100%);
  padding:132px 22px 74px}
.page-hero::after{content:"";position:absolute;left:0;right:0;bottom:-34%;height:74%;pointer-events:none;
  background:radial-gradient(58% 100% at 50% 100%,rgba(201,168,148,.5),rgba(246,244,239,0) 72%)}
.page-hero .inner{position:relative;z-index:2;max-width:720px}
.page-hero h1{font-size:clamp(30px,4.4vw,46px);line-height:1.1;margin:14px 0 0}
.page-hero .lead{margin:18px 0 0;font-size:clamp(16.5px,1.9vw,18.5px);color:#dfe3d8;max-width:56ch}

.crumb{font-size:13.5px;color:#cdd2c4;display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.crumb a{opacity:.9;border-bottom:1px solid rgba(244,242,236,.28);padding-bottom:1px}
.crumb a:hover{opacity:1}
.crumb span[aria-hidden]{opacity:.5}

.prose{max-width:68ch;padding:64px 0 8px}
.prose h2{font-size:clamp(23px,2.9vw,30px);margin:46px 0 0}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:19px;margin:30px 0 0}
.prose p{margin:14px 0 0;font-size:17px;color:#4a4844}
.prose ul{margin:16px 0 0;padding-left:20px;color:#4a4844;font-size:17px}
.prose li{margin:8px 0}
.prose li strong{color:var(--ink);font-weight:600}
.prose a{border-bottom:1px solid var(--sage);padding-bottom:1px;color:var(--sage-deep)}
.prose a:hover{background:rgba(169,181,160,.16)}

/* ruhige Kennzahl-Reihe, gleiche Kartensprache wie die Startseite */
.specs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:34px 0 4px;border-top:1px solid var(--line)}
.spec{padding:22px 22px 4px;border-left:1px solid var(--line)}
.spec:first-child{border-left:none}
.spec dt{font-size:14px;color:var(--soft)}
.spec dd{margin:6px 0 0;font-family:var(--serif);font-size:19px;color:var(--ink)}
@media(max-width:720px){
  .specs{grid-template-columns:1fr;border-top:none}
  .spec{border-left:none;border-top:1px solid var(--line);padding:18px 2px}
  .spec:first-child{border-top:none}
}

.faq{border-top:1px solid var(--line);margin-top:16px}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{list-style:none;cursor:pointer;padding:18px 34px 18px 2px;position:relative;
  font-family:var(--serif);font-size:18px;color:var(--ink);min-height:44px;display:flex;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;
  border-right:1.5px solid var(--sage-deep);border-bottom:1.5px solid var(--sage-deep);
  transform:translateY(-70%) rotate(45deg);transition:transform .22s ease}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{margin:0 0 20px;padding-right:34px;color:#4a4844;font-size:16.5px;max-width:64ch}

.more{padding:12px 0 64px}
.more h2{font-size:clamp(22px,2.6vw,27px);margin:0 0 22px}
.more-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:640px){.more-grid{grid-template-columns:1fr}}
.more-card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:24px 24px 22px;
  transition:transform .2s ease,box-shadow .25s ease;display:block}
.more-card:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(60,58,52,.09)}
.more-card h3{font-size:19px}
.more-card p{margin:9px 0 0;color:var(--soft);font-size:15.5px}

/* sichtbarer Fokus auf allem Bedienbaren (Tastatur-Navigation) */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{
  outline:2px solid var(--sage-deep);outline-offset:3px;border-radius:4px}
.page-hero a:focus-visible,.topbar a:focus-visible,.band a:focus-visible,.band button:focus-visible,
.band input:focus-visible{outline-color:#f4f2ec}

/* dunkle Kopfleiste auf hellen Ratgeber-Seiten bleibt lesbar */
.topbar--light .brand{color:var(--ink)}
.topbar--light .nav{color:var(--sage-deep)}

/* ---------- Kopfleiste mit Burger-Menue (ab 2026-07-20, weil es mehr Seiten gibt) ---------- */
.topbar{position:absolute;top:0;left:0;right:0;z-index:30}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:22px;padding-bottom:22px}
.nav{display:flex;gap:26px;font-size:14.5px;color:#e7eadf;align-items:center}
.nav a{opacity:.85;transition:opacity .15s;padding:6px 0}
.nav a:hover{opacity:1}
.nav a[aria-current=page]{opacity:1;border-bottom:1px solid currentColor}

.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;
  background:transparent;border:1px solid rgba(244,242,236,.34);border-radius:999px;cursor:pointer;padding:0}
.burger span{display:block;width:17px;height:1.5px;background:#f4f2ec;position:relative;transition:background .18s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:17px;height:1.5px;
  background:#f4f2ec;transition:transform .24s ease,top .18s ease}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded=true] span{background:transparent}
.burger[aria-expanded=true] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded=true] span::after{top:0;transform:rotate(-45deg)}

/* Panel: von oben herein, nur transform und opacity */
.mobile-nav{position:fixed;inset:0 0 auto 0;z-index:25;background:var(--paper);
  border-bottom:1px solid var(--line);box-shadow:0 18px 40px rgba(60,58,52,.14);
  padding:88px 24px 26px;transform:translateY(-101%);transition:transform .34s cubic-bezier(.22,.61,.36,1);
  visibility:hidden}
.mobile-nav.open{transform:none;visibility:visible}
.mobile-nav a{display:block;font-family:var(--serif);font-size:22px;color:var(--ink);
  padding:14px 0;border-bottom:1px solid var(--line);min-height:44px}
.mobile-nav a:last-of-type{border-bottom:none}
.mobile-nav .mn-foot{margin-top:18px;font-size:14px;color:var(--soft)}
.mobile-nav .mn-foot a{display:inline;font-family:var(--sans);font-size:14px;border:none;padding:0}
body.nav-open{overflow:hidden}

@media(max-width:760px){
  .nav{display:none}
  .burger{display:flex}
}
@media (prefers-reduced-motion: reduce){
  .mobile-nav{transition:none}
  .burger span,.burger span::before,.burger span::after{transition:none}
}

/* dunkle Schrift, wenn die Leiste ueber hellem Grund sitzt */
.topbar--light .brand{color:var(--ink)}
.topbar--light .nav{color:var(--sage-deep)}
.topbar--light .burger{border-color:var(--line)}
.topbar--light .burger span,.topbar--light .burger span::before,.topbar--light .burger span::after{background:var(--ink)}
.topbar--light .burger[aria-expanded=true] span{background:transparent}

/* Bei offenem Panel sitzt die Leiste ueber hellem Grund, also dunkle Schrift. */
body.nav-open .brand{color:var(--ink)}
body.nav-open .burger{border-color:var(--line)}
body.nav-open .burger span::before,body.nav-open .burger span::after{background:var(--ink)}

/* ================= App-Gefuehl, Kopfleiste, Ueberlauf-Sperre (2026-07-20) ================= */

/* 1. Seitwaerts-Scrollen hart ausschliessen. overflow-x:hidden allein reicht auf iOS
      nicht, clip verhindert auch das Mitziehen durch fixierte Kinder. */
html{overflow-x:clip;max-width:100%}
body{overflow-x:clip;max-width:100%;width:100%;
     overscroll-behavior:none;                   /* kein Gummiband, weder x noch y */
     -webkit-tap-highlight-color:transparent}    /* kein blauer Kasten beim Tippen */

/* 2. Kopfleiste: klebt, verdichtet sich beim Scrollen, laeuft NIE ueber.
      Die Navigation darf nicht seitlich scrollen, sie weicht in den Burger aus. */
.topbar{position:fixed;top:0;left:0;right:0;z-index:30;
  transition:background .28s ease,box-shadow .28s ease,backdrop-filter .28s ease}
.topbar .wrap{transition:padding .28s ease}
.topbar.stuck{background:rgba(255,253,249,.97);backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--line);box-shadow:0 8px 24px rgba(60,58,52,.09)}
.topbar.stuck .wrap{padding-top:12px;padding-bottom:12px}
.topbar.stuck .brand{color:var(--ink)}
.topbar.stuck .nav{color:var(--sage-deep)}
.topbar.stuck .burger{border-color:var(--line)}
.topbar.stuck .burger span,.topbar.stuck .burger span::before,.topbar.stuck .burger span::after{background:var(--ink)}
.topbar.stuck .burger[aria-expanded=true] span{background:transparent}
.nav{flex-wrap:nowrap;overflow:visible;min-width:0}
.topbar .wrap{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}

/* 3. Tipp-Rueckmeldung: jedes Bedienelement reagiert sofort, wie in einer App. */
.btn:active,.want:active,.burger:active,.more-card:active{transform:scale(.97)}
.btn,.want,.burger,.more-card{-webkit-user-select:none;user-select:none}
.want{transition:background .18s,color .18s,border-color .18s,transform .09s ease}

/* 4. Bogen (sheet): die Antwort auf einen Tipp kommt dort, wo der Daumen ist,
      nicht am Seitenende. Ersetzt das weit entfernte Formular im Band. */
.sheet-backdrop{position:fixed;inset:0;z-index:40;background:rgba(43,47,39,.42);
  opacity:0;visibility:hidden;transition:opacity .26s ease,visibility .26s}
.sheet-backdrop.open{opacity:1;visibility:visible}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:41;background:var(--paper);
  border-radius:22px 22px 0 0;box-shadow:0 -14px 44px rgba(43,47,39,.22);
  padding:10px 24px calc(26px + env(safe-area-inset-bottom));
  transform:translateY(102%);transition:transform .34s cubic-bezier(.22,.61,.36,1);
  max-width:520px;margin:0 auto}
.sheet.open{transform:none}
.sheet .grip{width:38px;height:4px;border-radius:99px;background:var(--line);margin:0 auto 16px}
.sheet h3{font-size:21px;margin:0}
.sheet p{margin:8px 0 0;color:var(--soft);font-size:15.5px}
.sheet .row{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.sheet input[type=email]{flex:1;min-width:180px;padding:13px 14px;border-radius:12px;
  border:1px solid var(--line);background:#fff;color:var(--ink);font-size:16px}
.sheet input[type=email]:focus{border-color:var(--sage)}
.sheet button[type=submit]{padding:13px 20px;border-radius:12px;border:none;background:var(--sage-deep);
  color:#f4f2ec;font-size:15px;cursor:pointer;transition:transform .09s ease,opacity .2s}
.sheet button[type=submit]:active{transform:scale(.97)}
.sheet .consent{display:flex;gap:9px;align-items:flex-start;margin-top:14px;font-size:13.5px;color:var(--soft)}
.sheet .consent input{margin-top:3px;width:18px;height:18px;accent-color:var(--sage-deep)}
.sheet .note{margin-top:10px;font-size:14px;color:var(--sage-deep);min-height:1em}
.sheet .close{position:absolute;top:14px;right:16px;width:44px;height:44px;border:none;background:none;
  color:var(--soft);font-size:22px;cursor:pointer;line-height:1}
@media (prefers-reduced-motion: reduce){
  .sheet,.sheet-backdrop,.topbar,.topbar .wrap{transition:none}
  .btn:active,.want:active,.burger:active,.more-card:active{transform:none}
}

/* 5. Hero mit echten Motiven: die Arbeit zeigen, nicht nur beschreiben. */
.hero-art{position:relative;z-index:2;margin:44px auto 0;max-width:720px;
  display:flex;justify-content:center;align-items:flex-end;gap:18px;perspective:1200px}
.hero-art figure{margin:0;width:150px;border-radius:10px;overflow:hidden;background:var(--paper);
  padding:8px;box-shadow:0 20px 44px rgba(24,30,20,.34);transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.hero-art img{display:block;width:100%;border-radius:5px;aspect-ratio:832/1216;object-fit:cover}
.hero-art figure:nth-child(1){transform:rotate(-5deg) translateY(14px)}
.hero-art figure:nth-child(2){transform:translateY(-10px) scale(1.06);z-index:2}
.hero-art figure:nth-child(3){transform:rotate(5deg) translateY(14px)}
.hero-art figure:nth-child(1):hover{transform:rotate(-3deg) translateY(4px)}
.hero-art figure:nth-child(2):hover{transform:translateY(-18px) scale(1.08)}
.hero-art figure:nth-child(3):hover{transform:rotate(3deg) translateY(4px)}
@media(max-width:560px){
  .hero-art{gap:10px;margin-top:34px}
  .hero-art figure{width:104px;padding:6px}
}

/* ---------- Hero mit grossflaechigem Marken-Bild im Hintergrund (2026-07-20) ----------
   Jede Seite bekommt ihr eigenes Motiv. Das Bild liegt UNTER einem Marken-Verlauf,
   damit die Schrift auf jedem Motiv sicher lesbar bleibt (Kontrast vor Deko). */
.hero,.page-hero{background-size:cover;background-position:center;background-repeat:no-repeat}
.hero{background-image:
  linear-gradient(178deg,rgba(92,107,82,.90) 0%,rgba(85,98,73,.92) 55%,rgba(79,92,73,.94) 100%),
  var(--hero-img,none)}
.page-hero{background-image:
  linear-gradient(178deg,rgba(92,107,82,.91) 0%,rgba(79,92,73,.94) 100%),
  var(--hero-img,none)}

/* Kontrast-Schleier unter der Kopfleiste. Das Hero-Bild ist an der Oberkante hell,
   ohne diesen Verlauf steht die helle Schrift auf hellem Grund (Fehler vom 2026-07-20).
   Verschwindet, sobald die Leiste ihren eigenen hellen Grund bekommt. */
.topbar::before{content:"";position:absolute;left:0;right:0;top:0;height:150px;pointer-events:none;
  background:linear-gradient(180deg,rgba(34,41,29,.62) 0%,rgba(34,41,29,.34) 45%,rgba(34,41,29,0) 100%);
  transition:opacity .28s ease}
.topbar.stuck::before{opacity:0}
.topbar .wrap{position:relative;z-index:1}

/* Hero-Verlauf etwas kraeftiger, damit Pille, Ueberschrift und Fliesstext auf
   jedem Motiv sicher tragen. Das Bild bleibt sichtbar, nur nicht mehr dominant. */
.hero{background-image:
  linear-gradient(178deg,rgba(88,103,78,.93) 0%,rgba(81,94,70,.95) 55%,rgba(75,88,69,.96) 100%),
  var(--hero-img,none)}
.page-hero{background-image:
  linear-gradient(178deg,rgba(88,103,78,.94) 0%,rgba(75,88,69,.96) 100%),
  var(--hero-img,none)}

/* ================= Kopfleiste endgueltig: IMMER hell, auch ganz oben =================
   Marcellus 2026-07-20: die Leiste soll immer fuer sich stehen, nicht erst nach dem
   Scrollen. Damit entfaellt der transparente Zustand ueber dem Hero und der
   Kontrast-Schleier darunter, den es nur wegen der Transparenz gab. */
.topbar{background:rgba(255,253,249,.97);backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--line)}
.topbar::before{content:none}
.topbar .brand{color:var(--ink)}
.topbar .nav{color:var(--sage-deep)}
.topbar .nav a[aria-current=page]{border-bottom-color:var(--sage-deep)}
.topbar .burger{border-color:var(--line)}
.topbar .burger span,.topbar .burger span::before,.topbar .burger span::after{background:var(--ink)}
.topbar .burger[aria-expanded=true] span{background:transparent}
/* beim Scrollen nur noch eine Spur mehr Abhebung, kein Farbwechsel mehr */
.topbar.stuck{box-shadow:0 8px 24px rgba(60,58,52,.10)}

/* der Hero beginnt jetzt unter einer undurchsichtigen Leiste, also mehr Luft oben */
.hero{padding-top:132px}
.page-hero{padding-top:118px}
@media(max-width:640px){
  .hero{padding-top:118px}
  .page-hero{padding-top:104px}
}

/* ================= Motiv-Seiten (/prints/<slug>) =================
   Erben Farben, Schrift und Abstaende von oben. Neu ist nur die Aufteilung
   Bild neben Eckdaten und die Groessen-Liste. Keine neuen Farben, kein Dark Mode. */
.piece{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;
  align-items:start;padding:62px 0 10px}
.piece-img{margin:0}
.piece-img .frame{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#efece5}
.piece-img img{width:100%;height:auto;display:block}
.piece-side h2{font-size:clamp(22px,2.6vw,27px);margin:0}
.piece-side p{margin:14px 0 0;font-size:16.5px;color:#4a4844}
.piece-note{color:var(--soft);font-size:15px}
.piece-side .want{margin-top:22px;padding:12px 22px;font-size:15px}
.sizes{list-style:none;padding:0;margin:20px 0 0;border-top:1px solid var(--line)}
.sizes li{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:13px 2px;border-bottom:1px solid var(--line)}
.sizes b{font-family:var(--serif);font-weight:400;font-size:18px;color:var(--ink);white-space:nowrap}
.sizes span{color:var(--soft);font-size:14.5px;text-align:right}
@media(max-width:820px){
  .piece{grid-template-columns:1fr;gap:26px;padding-top:44px}
}

/* Kachel und Name verweisen auf die Motiv-Seite */
.card-link{display:block}
a.name{border-bottom:1px solid transparent;transition:border-color .15s}
a.name:hover{border-bottom-color:var(--sage)}
.more-grid.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.more-grid.three{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.more-grid.three{grid-template-columns:1fr}}
.more-back{margin:22px 0 0;font-size:15.5px}
.more-back a{color:var(--sage-deep);border-bottom:1px solid var(--sage);padding-bottom:1px}

/* ================= Preis, Kaufknopf, Warenkorb (2026-07-20) =================
   Gleiche Token wie der Rest der Seite, keine neuen Farben, kein Dark Mode.
   Der Korb benutzt die vorhandene Bogen-Sprache (.sheet), damit er wie ein Teil
   der Seite aussieht und nicht wie ein eingekauftes Fremdteil. */

/* hidden muss staerker sein als display:inline-flex, sonst zeigt sich der
   Kaufknopf trotz fehlender Kassen-Konfiguration. */
[hidden]{display:none!important}

.price{display:flex;align-items:baseline;gap:12px;margin:0 0 4px;flex-wrap:wrap}
.price .amount{font-family:var(--serif);font-size:34px;color:var(--ink);line-height:1.1}
.price .price-note{color:var(--soft);font-size:14.5px}

.buy{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  margin-top:16px;padding:14px 26px;border:none;border-radius:999px;
  background:var(--sage-deep);color:#f4f2ec;font-size:15.5px;cursor:pointer;
  min-height:48px;box-shadow:0 8px 22px rgba(60,72,50,.20);
  transition:transform .09s ease,box-shadow .22s ease,background .2s ease}
.buy:hover{background:#4f5c49;box-shadow:0 12px 28px rgba(60,72,50,.26)}
.buy:active{transform:scale(.97)}

/* Solange keine Kasse konfiguriert ist: Preis ja, Kaufknopf nein, ein ruhiger
   Satz statt einer Entschuldigung. Verschwindet, sobald der Shop bereit ist. */
.shop-closed{margin:16px 0 0;color:var(--soft);font-size:15px}
.shop-ready .shop-closed{display:none}

.included{list-style:none;padding:0;margin:16px 0 0;border-top:1px solid var(--line)}
.included li{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:13px 2px;border-bottom:1px solid var(--line)}
.included b{font-family:var(--serif);font-weight:400;font-size:17px;color:var(--ink)}
.included span{color:var(--soft);font-size:14.5px;text-align:right;max-width:58%}
.bundle-hint{margin:14px 0 0;color:var(--soft);font-size:15px}
.bundle-hint a{color:var(--sage-deep);border-bottom:1px solid var(--sage);padding-bottom:1px}

/* ---- Buendel-Angebot auf der Sammlungsseite ---- */
.bundle-sec{padding:10px 0 58px}
.bundle{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:36px;align-items:center;
  background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:30px}
.bundle-imgs{display:flex;gap:12px;align-items:flex-end}
.bundle-imgs img{width:33%;border-radius:8px;border:1px solid var(--line);display:block;
  aspect-ratio:832/1216;object-fit:cover;background:#efece5}
.bundle-side h2{font-size:clamp(22px,2.6vw,28px)}
.bundle-side>p{margin:12px 0 0;color:#4a4844;font-size:16.5px}
.bundle-side .price{margin-top:20px}
@media(max-width:820px){
  .bundle{grid-template-columns:1fr;gap:24px;padding:24px}
}

/* ---- Korb-Knopf in der Kopfleiste ---- */
/* Die Kopfleiste bekommt ein viertes Element. Damit die Marke links bleibt und
   Navigation, Korb und Burger als Gruppe rechts sitzen (auch wenn die Navigation
   auf dem Handy verschwindet), schiebt das erste auto-Aussenmass die Gruppe nach
   rechts. Mit space-between waere der Korb sonst in der Mitte gelandet. */
.topbar .wrap{justify-content:flex-start;gap:16px}
.topbar .nav{margin-left:auto}
.cart-btn{display:inline-flex;align-items:center;gap:7px;margin-left:auto;
  min-width:44px;height:40px;padding:0 14px;border:1px solid var(--line);border-radius:999px;
  background:transparent;color:var(--ink);cursor:pointer;
  transition:transform .09s ease,background .2s ease,border-color .2s ease}
.cart-btn svg{width:18px;height:18px}
.cart-btn:hover{background:rgba(169,181,160,.16)}
.cart-btn:active{transform:scale(.97)}
.cart-btn .cart-count{font-size:13.5px;color:var(--soft);min-width:9px;text-align:center}
.cart-btn.voll{border-color:var(--sage)}
.cart-btn.voll .cart-count{color:var(--sage-deep)}

/* ---- Korb-Bogen ---- */
.cart-sheet{max-width:560px;padding-bottom:calc(20px + env(safe-area-inset-bottom))}
.cart-sheet h3{margin-bottom:4px}
.cart-lines{max-height:46vh;overflow-y:auto;margin-top:14px;
  border-top:1px solid var(--line);overscroll-behavior:contain}
.cart-empty{margin:22px 0 6px;color:var(--soft);font-size:15.5px}
.cart-line{display:grid;grid-template-columns:54px 1fr auto;gap:14px;align-items:center;
  padding:14px 2px;border-bottom:1px solid var(--line)}
.cart-line img{width:54px;height:70px;object-fit:cover;border-radius:6px;
  border:1px solid var(--line);background:#efece5;display:block}
.cart-line-name{font-family:var(--serif);font-size:17px;color:var(--ink);display:block}
.cart-line-name:hover{border-bottom:1px solid var(--sage)}
.cart-line-price{font-family:var(--serif);font-size:17px;color:var(--ink);white-space:nowrap}
.qty{display:flex;align-items:center;gap:8px;margin-top:8px}
.qty-btn{width:32px;height:32px;border:1px solid var(--line);border-radius:999px;background:transparent;
  color:var(--ink);font-size:16px;line-height:1;cursor:pointer;transition:transform .09s ease,background .18s}
.qty-btn:hover{background:rgba(169,181,160,.16)}
.qty-btn:active{transform:scale(.94)}
.qty-n{min-width:16px;text-align:center;font-size:15px;color:var(--ink)}
.qty-remove{margin-left:6px;border:none;background:none;color:var(--soft);font-size:13.5px;
  cursor:pointer;padding:6px 2px}
.qty-remove:hover{color:var(--ink)}
.cart-foot{border-top:1px solid var(--line);margin-top:4px;padding-top:16px}
.cart-total{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.cart-total span{color:var(--soft);font-size:15px}
.cart-total b{font-family:var(--serif);font-weight:400;font-size:24px;color:var(--ink)}
.cart-checkout{width:100%;margin-top:14px;padding:15px 22px;border:none;border-radius:12px;
  background:var(--sage-deep);color:#f4f2ec;font-size:16px;cursor:pointer;min-height:50px;
  transition:transform .09s ease,opacity .2s}
.cart-checkout:active{transform:scale(.98)}
.cart-checkout:disabled{opacity:.6;cursor:default}
.cart-note{margin:12px 0 0;color:var(--soft);font-size:13.5px;text-align:center}
@media(max-width:560px){
  .cart-btn{margin-left:10px;padding:0 11px}
  .cart-line{grid-template-columns:46px 1fr auto;gap:11px}
  .cart-line img{width:46px;height:60px}
}

/* Auf der Motiv-Seite folgen jetzt mehrere Abschnitte untereinander
   (Preis, was im Paket ist, Groessen). Ohne Luft davor kleben sie aneinander. */
.piece-side h2{margin-top:36px}
.piece-side h2:first-child{margin-top:0}
.piece-side .buy+.shop-closed{margin-top:14px}