@font-face{
      font-family:"Museo300";
      font-style:normal;
      font-weight:300;
      font-display: swap;
      src: local("Museo 300"), local("Museo-300"), local("Museo Sans 300"), local("MuseoSans-300");
    }
    @font-face{
      font-family:"Museo700";
      font-style:normal;
      font-weight:700;
      font-display: swap;
      src: local("Museo 700"), local("Museo-700"), local("Museo Sans 700"), local("MuseoSans-700");
    }
    :root{
      --text:#1f1f1f;
      --muted:#5c5c5c;
      --line:#e8e7e2;
      --bg-soft:#fafaf7;
      --accent:#0a6649;
      --classic:#faf7f0;
      --thai:#f0f5f3;
      --elan:#f7f0f5;
      --natural:#f5f7f0;
      --footer:#171717;
      --focus:#0a6649;
    }
    *,*::before,*::after{box-sizing:border-box}
    html{font-family:"Museo300",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-weight:300;line-height:1.55;color:var(--text);background:#fff;scroll-behavior:smooth}
    h1,h2,h3,h4,h5,h6,.section-title,.proof-item strong,.tile-name,.footer-title{
      font-family:"Museo700","Museo300",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      font-weight:700;
    }
    body{margin:0;overflow-x:hidden}
    img{display:block;max-width:100%;height:auto}
    a{color:inherit}
    .container{width:min(1120px,100% - 2rem);margin-inline:auto}
    main[id],section[id],footer[id]{scroll-margin-top:5.6rem}
    .section{padding:3.25rem 0}
    .section--texture{
      position:relative;
      overflow:hidden;
      background:var(--bg-soft)
    }
    .section--texture::before{
      content:"";
      position:absolute;
      inset:0;
      background-image:url("assets/img/haarlocke-hintergrund.webp");
      background-size:cover;
      background-position:center;
      opacity:.2;
      pointer-events:none
    }
    .section--texture::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg,rgba(252,250,246,.9) 0%,rgba(252,250,246,.84) 100%);
      pointer-events:none
    }
    .section--texture > .container{position:relative;z-index:1}
    .sr-only{
      position:absolute;
      width:1px;
      height:1px;
      padding:0;
      margin:-1px;
      overflow:hidden;
      clip:rect(0,0,0,0);
      white-space:nowrap;
      border:0
    }
    .section-title{font-size:clamp(1.6rem,4vw,2.4rem);line-height:1.15;letter-spacing:-.01em;margin:.45rem 0 1rem}
    .overline{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:650}
    .lede{color:var(--muted);max-width:62ch}
    .skip-link{
      position:absolute;
      top:.5rem;
      left:.5rem;
      z-index:100;
      transform:translateY(-200%);
      padding:.7rem .9rem;
      border-radius:.5rem;
      background:#fff;
      color:var(--text);
      border:2px solid var(--focus);
      text-decoration:none;
      font-weight:600;
    }
    .skip-link:focus-visible{transform:translateY(0)}
    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible{
      outline:3px solid var(--focus);
      outline-offset:2px;
    }
    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
      min-height:44px;
      padding:.82rem 1.35rem;border:1px solid var(--text);border-radius:999px;
      font-size:.82rem;font-weight:650;text-transform:uppercase;letter-spacing:.08em;
      text-decoration:none;transition:all .2s ease;background:var(--text);color:#fff
    }
    .btn:hover,.btn:focus-visible{background:#fff;color:var(--text)}
    .btn--ghost{background:transparent;color:var(--text)}
    .btn--ghost:hover,.btn--ghost:focus-visible{background:var(--text);color:#fff}

    .site-header{
      position:sticky;top:0;z-index:30;background:rgba(255,255,255,.96);
      border-bottom:1px solid var(--line);backdrop-filter:blur(8px)
    }
    .header-inner{min-height:4.35rem;padding:.65rem 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem 1.4rem}
    .logo{
      display:inline-flex;
      align-items:center;
      min-height:44px;
      text-decoration:none
    }
    .logo img{
      display:block;
      height:clamp(2rem,4vw,2.75rem);
      width:auto;
      max-width:min(56vw,14rem);
      object-fit:contain
    }
    .nav-toggle{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:44px;
      padding:.6rem 1rem;
      border:1px solid var(--line);
      border-radius:999px;
      background:#fff;
      color:var(--text);
      font-size:.82rem;
      letter-spacing:.08em;
      text-transform:uppercase;
      cursor:pointer;
    }
    .main-nav{display:none;flex-wrap:wrap;align-items:center;gap:.8rem 1rem}
    .header-inner > .btn{display:none}
    .header-inner.is-nav-open .main-nav{display:flex;width:100%}
    .header-inner.is-nav-open > .btn{display:inline-flex;width:100%}
    .main-nav a{
      display:inline-flex;
      align-items:center;
      min-height:44px;
      padding:.45rem .75rem;
      border:1px solid transparent;
      border-radius:999px;
      font-size:.82rem;
      text-transform:uppercase;
      letter-spacing:.08em;
      text-decoration:none;
      color:#2f2f2f
    }
    .main-nav a:hover,.main-nav a:focus-visible{color:var(--accent)}

    .hero{background:var(--bg-soft)}
    .hero-inner{padding:1.15rem 0 1.45rem}
    .hero-media{
      background-color:#f7efe2;
      background-image:linear-gradient(170deg,rgba(255,255,255,.34) 0%,rgba(248,240,228,.56) 100%),url("assets/img/produkte-header-raw.webp");
      background-size:cover;
      background-position:center;
      border:1px solid var(--line);border-radius:1.1rem;padding:.55rem;
      overflow:hidden
    }
    .hero-media > img{
      width:100%;
      height:auto;
      display:block;
      object-fit:contain;
      border-radius:.75rem
    }
    .proof-bar{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
    .proof-grid{display:grid;gap:1px;background:var(--line)}
    .proof-item{padding:1.2rem .95rem;background:#fff;text-align:center}
    .proof-item strong{display:block;font-size:1.55rem;color:#2f5346}
    .proof-item span{display:block;font-size:.73rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:.22rem}

    .series{margin-top:2.1rem}
    .series h3{font-size:1.35rem;margin:0 0 .4rem}
    .series-intro{color:var(--muted);margin:0 0 1rem}
    .tiles{display:grid;gap:1rem}
    .tile{
      border:1px solid var(--line);border-radius:1rem;background:#fff;
      box-shadow:0 1px 0 rgba(20,20,20,.04);
      display:flex;flex-direction:column
    }
    .tile-media{
      margin:.75rem .75rem 0;
      padding:.6rem .6rem .8rem;
      border:1px solid var(--line);
      border-radius:1rem;
      background-color:#f7efe2;
      background-image:linear-gradient(170deg,rgba(255,255,255,.3) 0%,rgba(248,240,228,.58) 100%),url("assets/img/produkte-header-raw.webp");
      background-size:cover;
      background-position:center;
      aspect-ratio:4/5;
      min-height:17.75rem;
      display:flex;
      align-items:flex-end;
      justify-content:center;
      overflow:hidden
    }
    .tile-media img{
      width:100%;
      height:100%;
      max-width:100%;
      max-height:100%;
      object-fit:contain;
      object-position:center bottom;
      filter:drop-shadow(0 5px 14px rgba(0,0,0,.12))
    }
    .tile-copy{padding:1rem 1rem 1.2rem}
    .tile-name{margin:0;font-size:1rem}
    .tile-desc{margin:.5rem 0 0;color:var(--muted);font-size:.9rem}
    .tile-tag{display:inline-block;margin-top:.2rem;font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:#41594f}
    .private-label{background:#fff}
    .private-grid{display:grid;gap:1.2rem;align-items:center}
    .private-media{
      background:#ffffff;border:1px solid var(--line);border-radius:1rem;
      min-height:18rem;display:flex;align-items:center;justify-content:center;padding:1.1rem
    }
    .private-media img{max-height:24rem;width:100%;max-width:21rem;object-fit:contain;filter:drop-shadow(0 6px 18px rgba(0,0,0,.12))}
    .usp-list{margin:1rem 0 1.3rem;padding:0;list-style:none;display:grid;gap:.55rem}
    .usp-list li{display:flex;gap:.5rem;color:var(--muted)}
    .usp-list li::before{content:"•";color:var(--accent);font-weight:700}

    .philosophy{background:var(--bg-soft)}
    blockquote{margin:0;padding:1rem 0 1.2rem;font-size:clamp(1.2rem,3vw,1.7rem);line-height:1.35;color:#2e2e2e}
    .pillars{display:grid;gap:.9rem;margin-top:1.1rem}
    .pillar{
      background:#fff;border:1px solid var(--line);border-radius:999px;padding:.75rem .95rem;
      display:flex;align-items:center;gap:.65rem;font-size:.9rem
    }
    .pillar-icon{
      width:1.9rem;height:1.9rem;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
      background:#edf4f1;color:#2f5346;font-size:.95rem;flex:none
    }

    .site-footer{background:var(--footer);color:#d7d7d7}
    .footer-grid{display:grid;gap:1.2rem;padding:2.7rem 0 2rem}
    .footer-title{font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;color:#f2f2f2;margin:0 0 .55rem}
    .site-footer p,.site-footer a{margin:.2rem 0;color:#d0d0d0;text-decoration:none;font-size:.95rem}
    .site-footer a{display:inline-flex;align-items:center;min-height:44px}
    .site-footer a:hover,.site-footer a:focus-visible{color:#fff}
    .copyright{border-top:1px solid #333;padding:1rem 0 1.35rem;color:#919191;font-size:.8rem}
    input,select,textarea,button{font:inherit;font-size:1rem}

    @media (max-width:767px){
      .header-inner.is-nav-open > .btn{width:100%}
      .main-nav{width:100%;gap:.3rem .45rem}
      .hero-media{padding:.45rem}
      .tile-copy{overflow-wrap:anywhere}
    }

    @media (max-width:359px){
      .container{width:min(1120px,100% - 1rem)}
      .logo img{max-width:min(62vw,12rem)}
      .hero h1{font-size:1.85rem}
      .proof-item{padding:1rem .7rem}
    }

    @media (max-width:320px){
      .header-inner{gap:.55rem 1rem}
      .main-nav a{padding:.4rem .6rem;font-size:.78rem}
      .btn{padding:.75rem 1rem}
    }

    @media (min-width:768px){
      .section{padding:4.5rem 0}
      .nav-toggle{display:none}
      .main-nav{display:flex;width:auto}
      .header-inner > .btn{display:inline-flex}
      .hero-inner{padding:1.6rem 0 2rem}
      .proof-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
      .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
      .tile-media{min-height:20rem}
      .private-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.8rem}
      .pillars{grid-template-columns:repeat(2,minmax(0,1fr))}
      .footer-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
    }

    @media (min-width:1024px){
      .tiles--five{grid-template-columns:repeat(2,minmax(0,1fr))}
      .tile-media{min-height:22rem}
      .tile-copy{min-height:9.1rem}
    }
    @media (min-width:1280px){
      .tiles--five{grid-template-columns:repeat(3,minmax(0,1fr))}
    }