:root{
      --black:#050403;
      --black-soft:#0b0705;
      --cream:#f3e7d3;
      --cream-soft:rgba(243,231,211,.72);
      --gold:#c69a58;
      --gold-light:#e3c487;
      --line:rgba(227,196,135,.20);
      --max:1180px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      min-height:100%;
      overflow-x:hidden;
      background:var(--black);
      color:var(--cream);
      font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    }

    a{color:inherit;text-decoration:none}

    .nav{
      position:fixed;
      inset:0 0 auto 0;
      z-index:30;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:26px clamp(18px,4vw,58px) 16px;
      min-height:72px;
      background:linear-gradient(to bottom,rgba(5,4,3,.78),rgba(5,4,3,.24),transparent);
      backdrop-filter:blur(5px);
    }

    .brand{
      font-family:Georgia,serif;
      font-size:20px;
      letter-spacing:.30em;
      color:var(--gold-light);
    }

    .navlinks{
      display:flex;
      align-items:center;
      gap:24px;
      color:rgba(243,231,211,.74);
      font-size:11px;
      letter-spacing:.14em;
      text-transform:uppercase;
    }

    .nav-cta{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:38px;
      padding:10px 16px;
      border:1px solid var(--line);
      border-radius:999px;
      color:var(--gold-light);
      background:rgba(255,255,255,.03);
    }

    .hero{
      position:relative;
      min-height:94svh;
      display:flex;
      align-items:flex-end;
      overflow:hidden;
      isolation:isolate;
      padding:140px 0 92px;
      background:
        radial-gradient(circle at 78% 35%,rgba(154,87,47,.22),transparent 34%),
        radial-gradient(circle at 20% 82%,rgba(102,54,30,.16),transparent 32%),
        linear-gradient(135deg,#050403 0%,#0b0705 54%,#100905 100%);
    }

    .hero:after{
      content:"";
      position:absolute;
      inset:0;
      z-index:-1;
      background:
        linear-gradient(to top,rgba(5,4,3,.78),transparent 42%),
        repeating-linear-gradient(
          90deg,
          transparent 0,
          transparent calc(25% - 1px),
          rgba(227,196,135,.035) calc(25% - 1px),
          rgba(227,196,135,.035) 25%
        );
      pointer-events:none;
    }

    .hero-inner,
    .section-inner{
      width:min(var(--max),calc(100% - 44px));
      margin:0 auto;
    }

    .hero-copy{max-width:950px}

    .kicker{
      margin:0 0 24px;
      color:var(--gold-light);
      font-size:12px;
      letter-spacing:.32em;
      text-transform:uppercase;
    }

    h1,h2,h3{
      margin:0;
      font-family:Georgia,serif;
      font-weight:400;
    }

    h1{
      max-width:1000px;
      font-size:clamp(62px,10vw,142px);
      line-height:.88;
      letter-spacing:-.06em;
    }

    .hero-lead{
      max-width:700px;
      margin:34px 0 0;
      color:rgba(243,231,211,.76);
      font-size:clamp(19px,2.2vw,27px);
      line-height:1.55;
    }

    .scroll-note{
      margin-top:54px;
      display:inline-flex;
      align-items:center;
      gap:14px;
      color:rgba(243,231,211,.46);
      font-size:10px;
      letter-spacing:.18em;
      text-transform:uppercase;
    }

    .scroll-note:before{
      content:"";
      width:48px;
      height:1px;
      background:var(--gold);
    }

    section{
      position:relative;
      padding:clamp(100px,12vw,170px) 0;
      border-top:1px solid rgba(227,196,135,.08);
    }

    .split{
      display:grid;
      grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
      gap:clamp(52px,8vw,120px);
      align-items:start;
    }

    .section-label{
      margin:0 0 22px;
      color:var(--gold);
      font-size:12px;
      letter-spacing:.30em;
      text-transform:uppercase;
    }

    h2{
      font-size:clamp(48px,7vw,92px);
      line-height:.95;
      letter-spacing:-.05em;
    }

    .copy p{
      margin:0 0 24px;
      color:var(--cream-soft);
      font-size:clamp(18px,1.8vw,22px);
      line-height:1.7;
    }

    .copy p:first-child{
      color:var(--cream);
      font-size:clamp(22px,2.4vw,31px);
      line-height:1.5;
    }

    .compare{
      background:
        radial-gradient(circle at 18% 24%,rgba(173,103,61,.11),transparent 34%),
        #080503;
    }

    .compare-grid{
      margin-top:72px;
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:1px;
      border:1px solid var(--line);
      background:var(--line);
    }

    .compare-card{
      min-height:310px;
      padding:44px;
      background:#080503;
    }

    .compare-card span{
      display:block;
      margin-bottom:62px;
      color:rgba(227,196,135,.54);
      font-size:11px;
      letter-spacing:.20em;
      text-transform:uppercase;
    }

    .compare-card h3{
      margin-bottom:18px;
      color:var(--gold-light);
      font-size:clamp(32px,4vw,52px);
      letter-spacing:-.03em;
    }

    .compare-card p{
      margin:0;
      max-width:460px;
      color:var(--cream-soft);
      font-size:18px;
      line-height:1.65;
    }

    .theobromin{
      background:
        linear-gradient(180deg,#0b0705 0%,#080503 100%);
    }

    .fact{
      margin-top:58px;
      padding:34px 36px;
      border-left:1px solid var(--gold);
      background:rgba(227,196,135,.045);
      color:rgba(243,231,211,.68);
      font-size:16px;
      line-height:1.65;
    }

    .preparation{
      text-align:center;
      background:
        radial-gradient(circle at 50% 50%,rgba(155,89,49,.15),transparent 36%),
        #050403;
    }

    .preparation .section-inner{
      max-width:900px;
    }

    .preparation h2{
      max-width:860px;
      margin:0 auto;
    }

    .preparation p{
      max-width:680px;
      margin:34px auto 0;
      color:var(--cream-soft);
      font-size:clamp(18px,2vw,23px);
      line-height:1.7;
    }

    .closing{
      padding:clamp(110px,14vw,190px) 0;
      text-align:center;
      background:#0b0705;
    }

    .closing h2{
      max-width:900px;
      margin:0 auto;
    }

    .closing p{
      max-width:650px;
      margin:30px auto 0;
      color:var(--cream-soft);
      font-size:20px;
      line-height:1.65;
    }

    .button{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:12px;
      min-height:52px;
      margin-top:38px;
      padding:0 26px;
      border:1px solid var(--gold);
      border-radius:999px;
      background:var(--gold);
      color:#130d07;
      font-size:11px;
      letter-spacing:.14em;
      text-transform:uppercase;
      transition:transform .25s ease,filter .25s ease;
    }

    .button:hover{
      transform:translateY(-2px);
      filter:brightness(1.06);
    }

    .button-outline{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:12px;
      min-height:52px;
      margin-top:38px;
      margin-left:16px;
      padding:0 26px;
      border:1px solid rgba(243,231,211,.4);
      border-radius:999px;
      background:transparent;
      color:var(--cream);
      font-size:11px;
      letter-spacing:.14em;
      text-transform:uppercase;
      transition:transform .25s ease,border-color .25s ease;
    }

    .button-outline:hover{
      transform:translateY(-2px);
      border-color:var(--gold-light);
    }

    .cta-row{
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap:0;
    }

    @media(max-width:640px){
      .cta-row{flex-direction:column;align-items:center;gap:14px}
      .button-outline{margin-left:0}
    }

    footer{
      padding:38px clamp(18px,4vw,58px);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:20px;
      border-top:1px solid rgba(227,196,135,.10);
      color:rgba(243,231,211,.40);
      font-size:10px;
      letter-spacing:.14em;
      text-transform:uppercase;
    }

    @media(max-width:800px){
      .navlinks a:not(.nav-cta){display:none}
      .hero{min-height:88svh;padding-bottom:72px}
      .hero-inner,.section-inner{width:calc(100% - 36px)}
      .split{grid-template-columns:1fr;gap:42px}
      .compare-grid{grid-template-columns:1fr}
      .compare-card{min-height:0;padding:34px 28px}
      .compare-card span{margin-bottom:38px}
      footer{align-items:flex-start;flex-direction:column}
    }
  
    .nutrient-intro{
      max-width:760px;
      margin:30px 0 0;
      color:rgba(243,231,211,.66);
      font-size:17px;
      line-height:1.7;
    }

    .nutrient-grid{
      margin-top:64px;
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:1px;
      border:1px solid var(--line);
      background:var(--line);
    }

    .nutrient-card{
      min-height:250px;
      padding:34px;
      background:#080503;
    }

    .nutrient-card h3{
      margin:0 0 18px;
      color:var(--cream);
      font-family:Inter,system-ui,sans-serif;
      font-size:20px;
      font-weight:500;
      letter-spacing:-.01em;
    }

    .nutrient-card p{
      margin:0;
      color:var(--cream-soft);
      font-size:15px;
      line-height:1.6;
    }

    .nutrient-note{
      margin-top:28px;
      padding:24px 26px;
      border-left:1px solid var(--gold);
      background:rgba(227,196,135,.045);
      color:rgba(243,231,211,.56);
      font-size:13px;
      line-height:1.65;
    }

    @media(max-width:900px){
      .nutrient-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    }

    @media(max-width:620px){
      .nutrient-grid{grid-template-columns:1fr}
      .nutrient-card{min-height:0}
    }


    /* Bildwelt und verständliche Kakao-Vergleiche */
    .origin-gallery{
      background:#070403;
    }

    .origin-gallery-grid{
      display:grid;
      grid-template-columns:1.2fr .8fr;
      grid-template-rows:repeat(2,minmax(260px,34vw));
      gap:14px;
      margin-top:54px;
    }

    .origin-image{
      position:relative;
      min-height:280px;
      overflow:hidden;
      border:1px solid rgba(227,196,135,.14);
      background:#120b07;
    }

    .origin-image:first-child{
      grid-row:1 / span 2;
    }

    .origin-image img{
      width:100%;
      height:100%;
      display:block;
      object-fit:cover;
      filter:saturate(.86) contrast(1.03) brightness(.78);
      transition:transform .8s ease,filter .8s ease;
    }

    .origin-image:hover img{
      transform:scale(1.025);
      filter:saturate(.95) contrast(1.04) brightness(.84);
    }

    .origin-image:after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(to top,rgba(5,4,3,.80),transparent 54%);
      pointer-events:none;
    }

    .origin-caption{
      position:absolute;
      left:24px;
      right:24px;
      bottom:22px;
      z-index:2;
    }

    .origin-caption span{
      display:block;
      margin-bottom:8px;
      color:#e3c487;
      font-size:10px;
      letter-spacing:.18em;
      text-transform:uppercase;
    }

    .origin-caption strong{
      color:#f3e7d3;
      font-family:Georgia,serif;
      font-size:clamp(23px,3vw,38px);
      font-weight:400;
      line-height:1.08;
    }

    @media(max-width:760px){
      .origin-gallery-grid{
        grid-template-columns:1fr;
        grid-template-rows:none;
      }

      .origin-image,
      .origin-image:first-child{
        grid-row:auto;
        min-height:56svh;
      }

    }


    .origin-gallery-grid-five{
      grid-template-columns:repeat(2,minmax(0,1fr));
      grid-template-rows:none;
    }

    .origin-gallery-grid-five .origin-image:first-child{
      grid-row:auto;
    }

    .origin-gallery-grid-five .origin-image-large{
      grid-column:1 / -1;
      min-height:clamp(360px,55vw,720px);
    }

    @media(max-width:760px){
      .origin-gallery-grid-five{
        grid-template-columns:1fr;
      }

      .origin-gallery-grid-five .origin-image-large{
        grid-column:auto;
        min-height:62svh;
      }
    }