/*
Theme Name: Grünes Life GeneratePress Child
Theme URI: https://grueneslife.de/
Description: Child Theme für Grünes Life auf Basis von GeneratePress.
Author: Grünes Life
Template: generatepress
Version: 1.0.0
Text Domain: gruenes-life
*/

:root{
    --paper:#F7F4EE;
    --stone:#E8E1D4;
    --moss:#6B7A5E;
    --olive:#6F6A4C;
    --ink:#2B2A26;
    --clay:#B8875E;
    --line: rgba(43,42,38,0.14);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:auto;}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:'Zen Kaku Gothic New', sans-serif;
    font-weight:300;
    overflow-x:hidden;
  }
  h1,h2,h3, .serif{
    font-family:'Shippori Mincho', serif;
    font-weight:500;
    letter-spacing:0.01em;
  }
  a{color:inherit; text-decoration:none;}
  img,svg{display:block;}

  .nav{
    position:fixed; top:0; left:0; right:0; z-index:50;
    display:flex; justify-content:space-between; align-items:center;
    padding:1.6rem clamp(1.5rem, 5vw, 4rem);
    mix-blend-mode:difference;
    color:#fff;
  }
  .nav-mark{
    display:flex; align-items:center; gap:0.6rem;
    font-family:'Shippori Mincho', serif; font-size:1.2rem; letter-spacing:0.05em;
  }
  .nav-mark img{
    height:38px; width:auto;
    filter: brightness(0) invert(1); /* macht das farbige Logo zur weißen Silhouette, passend zum difference-Trick */
  }
  .nav-links{display:flex; gap:2.2rem; font-size:0.82rem; letter-spacing:0.04em;}
  @media (max-width:640px){ .nav-links{display:none;} }

  .hero-wrap{ position:relative; height:220vh; }
  .hero-pin{ position:relative; height:100vh; width:100%; overflow:hidden; }
  .hero-bg{
    position:absolute; inset:0;
    background:#3F4A38; /* Fallback-Farbe, während das Video lädt */
  }
  .hero-bg video{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
  }
  .hero-bg::after{
    content:'';
    position:absolute; inset:0;
    background: repeating-linear-gradient(100deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 140px);
    opacity:0.35;
    pointer-events:none;
  }
  .hero-scrub-track{
    position:absolute; left:0; right:0; bottom:2.4rem;
    display:flex; align-items:center; gap:1rem;
    padding:0 clamp(1.5rem, 5vw, 4rem);
    color:rgba(255,255,255,0.75);
    font-size:0.75rem; letter-spacing:0.04em;
  }
  .hero-scrub-bar{ flex:1; height:1px; background:rgba(255,255,255,0.3); position:relative; }
  .hero-scrub-fill{ position:absolute; top:0; left:0; height:100%; width:0%; background:#fff; }

  .hero-content{
    position:absolute; inset:0;
    display:flex; flex-direction:column; justify-content:center;
    padding: 0 clamp(1.5rem, 5vw, 4rem);
    max-width:640px; z-index:5;
  }
  .hero-content h1{ color:#fff; font-size:clamp(2.6rem, 6vw, 4.4rem); line-height:1.12; margin-bottom:1.6rem; }
  .hero-content p{ color:rgba(255,255,255,0.82); font-size:1.05rem; line-height:1.75; max-width:34ch; margin-bottom:2.4rem; }
  .btn{
    display:inline-flex; align-items:center; gap:0.6rem;
    padding:0.95rem 2rem; border:1px solid currentColor;
    font-size:0.85rem; letter-spacing:0.03em; width:fit-content;
    transition: background 0.35s ease, color 0.35s ease;
  }
  .btn-light{ color:#fff; }
  .btn-light:hover{ background:#fff; color:var(--ink); }
  .btn-dark{ color:var(--ink); }
  .btn-dark:hover{ background:var(--ink); color:var(--paper); }

  .trailer-card{
    position:absolute; right:clamp(1.5rem, 5vw, 4rem); bottom:2.4rem;
    width:260px; background:rgba(255,255,255,0.1); backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,0.25); padding:1.1rem 1.2rem; color:#fff; z-index:5;
  }
  .trailer-card .label{font-size:0.72rem; opacity:0.7; margin-bottom:0.3rem;}
  .trailer-card .title{font-family:'Shippori Mincho', serif; font-size:1rem;}

  .specs{ position:relative; display:flex; background:var(--paper); }
  .specs-left{ width:50%; padding: 8rem clamp(2rem, 6vw, 5rem); display:flex; flex-direction:column; }
  .specs-eyebrow{ font-size:0.85rem; color:var(--olive); margin-bottom:1rem; }
  .specs-heading{ font-size:clamp(1.8rem, 3vw, 2.4rem); margin-bottom:4.5rem; max-width:18ch; }
  .feature-stack{ position:relative; flex:1; }
  .feature-item{ position:absolute; top:0; left:0; right:0; opacity:0.22; padding-right:1rem; }
  .feature-item .num{ font-size:0.8rem; color:var(--olive); margin-bottom:0.8rem; display:block; }
  .feature-item h3{ font-size:clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom:1rem; max-width:16ch; }
  .feature-item p{ font-size:1rem; line-height:1.75; max-width:38ch; color:rgba(43,42,38,0.75); }

  .specs-sticky-cta{
    margin-top:auto; padding-top:2.5rem; border-top:1px solid var(--line);
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
  }
  .latest-article{ display:flex; flex-direction:column; }
  .latest-article .label{ font-size:0.75rem; color:rgba(43,42,38,0.55); margin-bottom:0.3rem; }
  .latest-article .title{ font-family:'Shippori Mincho', serif; font-size:1.15rem; }

  .specs-right{ width:50%; position:relative; }
  .specs-media-sticky{ position:sticky; top:0; height:100vh; width:100%; overflow:hidden; }
  .color-layer{ position:absolute; inset:0; opacity:0; }
  .color-layer.state-a{ background:var(--stone); }
  .color-layer.state-b{ background:var(--moss); }
  .color-layer.state-c{ background:var(--olive); }
  .media-object{
    position:absolute; left:50%; top:50%; width:44%; aspect-ratio: 3/4;
    transform:translate(-50%,-50%); background:rgba(247,244,238,0.9);
    box-shadow: 0 40px 80px rgba(0,0,0,0.18);
  }
  .media-caption{
    position:absolute; left:clamp(1.5rem,4vw,3rem); bottom:clamp(1.5rem,4vw,3rem);
    color:rgba(255,255,255,0.9); font-size:0.8rem; letter-spacing:0.03em; mix-blend-mode:difference;
  }

  .entertainment{
    height:100vh; width:100%; position:relative;
    background: linear-gradient(160deg, #2B2A26 0%, #46442F 100%);
    display:flex; align-items:flex-end;
  }
  .entertainment-caption{ padding: 0 clamp(1.5rem,5vw,4rem) clamp(3rem,6vw,5rem); color:var(--paper); max-width:640px; }
  .entertainment-caption .serif{ font-size:clamp(1.8rem,3.4vw,2.8rem); margin-bottom:1rem;}
  .entertainment-caption p{ color:rgba(247,244,238,0.7); line-height:1.75; max-width:44ch;}

  .closing{ padding: clamp(5rem,10vw,8rem) clamp(1.5rem,5vw,4rem); display:flex; justify-content:center; }
  .newsletter-card{ width:100%; max-width:460px; text-align:center; }
  .newsletter-card .swatch{
    width:100%; aspect-ratio:16/10; background: linear-gradient(150deg, var(--stone), var(--moss)); margin-bottom:2rem;
  }
  .newsletter-card h2{ font-size:1.8rem; margin-bottom:0.8rem; }
  .newsletter-card p{
    color:rgba(43,42,38,0.7); line-height:1.7; margin-bottom:2rem; max-width:38ch; margin-left:auto; margin-right:auto;
  }
  .newsletter-form{ display:flex; gap:0.6rem; flex-wrap:wrap; justify-content:center; }
  .newsletter-form input{
    flex:1; min-width:220px; padding:0.9rem 1.1rem; border:1px solid var(--line);
    background:transparent; font-family:'Zen Kaku Gothic New', sans-serif; font-size:0.9rem;
    color:var(--ink); outline:none;
  }
  .newsletter-form input:focus{ border-color:var(--olive); }
  .newsletter-form input::placeholder{ color:rgba(43,42,38,0.4); }

  footer{
    border-top:1px solid var(--line); padding: 3rem clamp(1.5rem,5vw,4rem) 4rem;
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:2rem; font-size:0.85rem;
  }
  footer .col h4{ font-family:'Shippori Mincho', serif; font-weight:500; margin-bottom:1rem; font-size:0.95rem; }
  .footer-logo-col img{ height:64px; width:auto; margin-bottom:1rem; }
  footer .col a{ display:block; color:rgba(43,42,38,0.65); margin-bottom:0.6rem; }
  footer .col a:hover{ color:var(--ink); }
  footer .copy{
    width:100%; padding-top:2rem; margin-top:1rem; border-top:1px solid var(--line);
    color:rgba(43,42,38,0.5); font-size:0.78rem;
  }

  @media (max-width: 860px){
    .specs{ flex-direction:column; }
    .specs-left, .specs-right{ width:100%; }
    .specs-right{ height:60vh; }
    .specs-media-sticky{ height:60vh; }
    .feature-stack{ position:static; min-height:300px; }
    .trailer-card{ display:none; }
  }
  @media (prefers-reduced-motion: reduce){
    * { animation:none !important; transition:none !important; }
  }

  /* ===== FALLENDE BLÄTTER ===== */
  .leaf-layer{
    position:fixed; inset:0;
    pointer-events:none;
    z-index:40;
    overflow:hidden;
  }
  .leaf{
    position:absolute;
    top:-8vh;
    will-change:transform;
    opacity:0.85;
  }
  .leaf svg{ width:100%; height:100%; display:block; }

  /* ===== ARTIKEL-GRID ===== */
  .articles{
    background:var(--paper);
    padding: clamp(5rem,9vw,7rem) clamp(1.5rem,5vw,4rem);
    border-top:1px solid var(--line);
  }
  .articles-head{
    max-width:640px; margin-bottom:3.5rem;
  }
  .articles-eyebrow{ font-size:0.85rem; color:var(--olive); margin-bottom:1rem; }
  .articles-title{ font-size:clamp(1.8rem,3vw,2.4rem); }
  .articles-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  .article-card{
    background:var(--paper);
    padding:2.2rem 2rem;
    display:flex; flex-direction:column;
    transition:background 0.3s ease;
  }
  .article-card:hover{ background:var(--stone); }
  .article-card .swatch{
    width:100%; aspect-ratio:4/3; margin-bottom:1.4rem;
  }
  .article-card:nth-child(1) .swatch{ background:var(--stone); }
  .article-card:nth-child(2) .swatch{ background:var(--moss); }
  .article-card:nth-child(3) .swatch{ background:var(--olive); }
  .article-card:nth-child(4) .swatch{ background:#9A8A63; }
  .article-card .cat{ font-size:0.75rem; color:var(--olive); margin-bottom:0.6rem; }
  .article-card h3{ font-size:1.15rem; margin-bottom:0.7rem; line-height:1.35; }
  .article-card p{ font-size:0.9rem; color:rgba(43,42,38,0.68); line-height:1.65; }