/* ===========================================================================
   Gartentanja — Landingpage "Das 365-Tage-Beet"
   Stylesheet zum Seiten-Template "template-365-tage-beet.php".

   WICHTIG:
   - Alle Selektoren sind unter der Wrapper-Klasse ".gt-365" gescoped
     (Ausnahme: @font-face – registriert nur Schriften, stylt nichts).
   - Diese Datei NUR auf dieser Seite einbinden (siehe functions-snippet.php).
   - Bilder, Schriften und Video kommen aus assets/ im Child-Theme.
   =========================================================================== */
@font-face{font-family:'Caitlin';src:url(assets/fonts/gt-caitlin-regular.otf) format('opentype');font-display:swap}
@font-face{font-family:'Lora';src:url(assets/fonts/gt-lora-variable.woff2) format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:'Lora';font-style:italic;src:url(assets/fonts/gt-lora-italic-variable.woff2) format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:'Open Sans';src:url(assets/fonts/gt-opensans-variable.woff2) format('woff2');font-weight:300 700;font-display:swap}

/* ===== Seite, alles unter .gt-365 gescoped ===== */
body{margin:0;background:#fffdf8}
.gt-365{
  --g:#0b582a;--g900:#06371a;--g700:#11703a;--o:#ea5b0c;--o700:#c2470a;--o100:#fbe3d3;--lime:#b7d140;--lime300:#cfe07d;
  --brown:#5d483c;--paper:#fffdf8;--cream:#fbf7ee;--lime100:#eef5da;--white:#fff;--ink:#2c2620;--muted:#6b625a;--line:#e4ddcf;
  --sh-sm:0 1px 2px rgba(45,38,28,.06);--sh-md:0 6px 18px rgba(45,38,28,.10);--sh-lg:0 16px 40px rgba(45,38,28,.14);
  --ease:cubic-bezier(.22,.61,.36,1);--bounce:cubic-bezier(.34,1.56,.64,1);
  font-family:Lora,Georgia,serif;font-size:1.0625rem;line-height:1.65;color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;overflow-x:clip
}
.gt-365 *,.gt-365 *::before,.gt-365 *::after{box-sizing:border-box}
.gt-365 h1,.gt-365 h2,.gt-365 h3,.gt-365 p,.gt-365 ul,.gt-365 blockquote,.gt-365 figure{margin:0;padding:0}
/* Divi gibt blockquote einen eigenen Rahmen links, den setzen wir zurück */
.gt-365 blockquote{border:0;padding-left:0;quotes:none}
.gt-365 blockquote::before,.gt-365 blockquote::after{content:none}
/* Schriften ausdrücklich setzen: Divi stylt h1 bis h3 sonst mit der Theme-Schrift.
   Open Sans und Caitlin kommen weiter unten über die jeweiligen Regeln zurück. */
.gt-365 h1,.gt-365 h2,.gt-365 h3,.gt-365 p,.gt-365 li,.gt-365 blockquote,.gt-365 figcaption,.gt-365 summary,.gt-365 em,.gt-365 strong,.gt-365 b,.gt-365 a,.gt-365 span,.gt-365 button,.gt-365 input{font-family:Lora,Georgia,serif}
.gt-365 img{max-width:100%;height:auto;display:block}
.gt-365 a{color:var(--o)}
.gt-365 a:hover{color:var(--o700)}
.gt-365 .gt-wrap{max-width:1180px;margin:0 auto;padding:0 32px}
.gt-365 section{position:relative;scroll-margin-top:72px}
.gt-365 .gt-sec{padding:88px 0}
.gt-365 .gt-bg-paper{background:var(--paper)}
.gt-365 .gt-bg-lime{background:var(--lime100)}
.gt-365 h2{font-weight:700;color:var(--g);font-size:clamp(1.75rem,3.2vw,2.35rem);line-height:1.2}
.gt-365 h3{font-weight:700;color:var(--g);font-size:1.3rem;line-height:1.25}
.gt-365 .gt-center{text-align:center}
.gt-365 .gt-lead{font-size:1.2rem;line-height:1.55}
.gt-365 .gt-overline{font-family:'Open Sans',system-ui,sans-serif;font-weight:600;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brown)}

/* Gerade Sektionskanten wie im Kurs-Prototyp: feine Linie an den Softgrün-Flächen */
.gt-365 .gt-bg-lime{border-top:1px solid var(--lime300);border-bottom:1px solid var(--lime300)}

/* Buttons */
.gt-365 .gt-btn{display:inline-block;background:var(--o);color:#fff;border:0;border-radius:999px;padding:16px 30px;font:600 1.0625rem/1.2 'Open Sans',system-ui,sans-serif;text-decoration:none;box-shadow:var(--sh-sm);cursor:pointer;transition:transform 140ms var(--ease),background 140ms var(--ease),box-shadow 140ms var(--ease)}
.gt-365 .gt-btn:hover{background:var(--o700);color:#fff;transform:translateY(-1px);box-shadow:var(--sh-md)}
.gt-365 .gt-btn:active{transform:translateY(1px) scale(.99)}
.gt-365 .gt-btn-sub{display:block;margin-top:12px;font-style:italic;font-size:.95rem;color:var(--brown)}
.gt-365 .gt-cta{text-align:center;margin-top:44px}

/* Navigation */
.gt-365 .gt-header{position:sticky;top:0;z-index:50;background:rgba(255,253,248,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.gt-365 .gt-header .gt-wrap{display:flex;align-items:center;gap:24px;height:68px}
.gt-365 .gt-header img{height:34px;width:auto}
.gt-365 .gt-nav{margin-left:auto;display:flex;gap:28px}
.gt-365 .gt-nav a{font:500 .95rem 'Open Sans',system-ui,sans-serif;color:var(--g);text-decoration:none}
.gt-365 .gt-nav a:hover{color:var(--o)}
.gt-365 .gt-header .gt-btn{padding:10px 20px;font-size:.9rem}

/* 1 Hero */
.gt-365 .gt-hero{min-height:640px;display:flex;align-items:center;padding:64px 0;overflow:hidden;isolation:isolate;background:var(--paper)}
/* Bildebene vollflächig, Kasten liegt direkt auf dem Foto. Höher als der Hero, damit der Parallax keine Kante zeigt. */
.gt-365 .gt-hero-bg{position:absolute;left:0;right:0;top:-12%;height:124%;z-index:0;background:url(assets/images/hero-anbauplanung.webp) 50% 50%/cover no-repeat;will-change:transform}
.gt-365 .gt-hero .gt-wrap{position:relative;z-index:2;width:100%}
.gt-365 .gt-hero-box{position:relative;max-width:520px;background:rgba(255,253,248,.95);border-radius:30px;padding:38px 38px 34px;box-shadow:var(--sh-lg)}
.gt-365 .gt-hero-box::after{content:"";position:absolute;inset:12px;border:2px dotted var(--g);border-radius:24px;pointer-events:none}
.gt-365 .gt-badge{display:inline-block;background:var(--lime100);color:var(--g);border:1.5px solid var(--lime);border-radius:999px;padding:6px 14px;font:600 .72rem/1.3 'Open Sans',system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase}
.gt-365 .gt-hero h1{font-weight:700;color:var(--g);font-size:clamp(1.9rem,3.6vw,2.6rem);line-height:1.1;margin:18px 0 16px}
.gt-365 .gt-hero p{font-size:1.1rem;line-height:1.55;margin-bottom:24px}

/* 1b Dunkler Block */
.gt-365 .gt-dark{background:var(--g);color:var(--paper);padding:64px 0 80px}
.gt-365 .gt-dark-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;text-align:center}
.gt-365 .gt-dark-grid > div{max-width:330px;margin:0 auto}
.gt-365 .gt-dark h3{color:var(--paper);margin:18px 0 8px}
.gt-365 .gt-dark p{color:rgba(255,253,248,.88)}
.gt-365 .gt-check-round{width:52px;height:52px;margin:0 auto;border-radius:50%;background:var(--lime);display:grid;place-items:center}
.gt-365 .gt-check-round svg{width:24px;height:24px}

/* 2 Problem: Sprechblasen */
.gt-365 .gt-bubbles{display:grid;grid-template-columns:1fr 1fr;gap:40px 48px;margin-top:56px}
.gt-365 .gt-bubble{position:relative;display:flex;gap:18px;align-items:flex-start}
.gt-365 .gt-num{flex:0 0 44px;height:44px;border-radius:50%;background:var(--o);color:#fff;display:grid;place-items:center;font:700 1.2rem 'Open Sans',sans-serif;margin-top:6px}
.gt-365 .gt-bubble-body{position:relative;flex:1;background:var(--white);border:2px dotted var(--g);border-radius:22px;padding:22px 26px;font-style:italic;font-size:1.1rem;line-height:1.55;color:var(--g900)}
.gt-365 .gt-bubble-body::before{content:"";position:absolute;left:-11px;top:20px;width:18px;height:18px;background:var(--white);border-left:2px dotted var(--g);border-bottom:2px dotted var(--g);transform:rotate(45deg);border-bottom-left-radius:4px}
.gt-365 .gt-thought-hint{margin-top:10px;font:300 .85rem 'Open Sans',sans-serif;color:var(--muted);letter-spacing:.02em}

/* Bildstreifen: vier Hochformat-Fotos über die volle Breite */
.gt-365 .gt-streifen{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:12px;background:var(--paper)}
.gt-365 .gt-streifen figure{margin:0;overflow:hidden;border-radius:14px;aspect-ratio:3/4}
.gt-365 .gt-streifen img{width:100%;height:100%;object-fit:cover;transition:transform 600ms var(--ease)}
.gt-365 .gt-streifen figure:hover img{transform:scale(1.04)}

/* 3 Zukunftsbild */
.gt-365 .gt-future-sec{padding-bottom:132px}
.gt-365 .gt-future-sec > .gt-wrap{position:relative;z-index:1}
.gt-365 .gt-future-title{font-size:clamp(2rem,3.8vw,2.8rem)}
/* Sechs Kästen zweispaltig, die Zeilen gleichen die Kastenhöhen automatisch an */
.gt-365 .gt-checks.gt-future-grid{grid-template-columns:1fr 1fr;gap:20px 24px;margin-top:48px}
/* Keimling unten links in der Ecke des Abschnitts */
.gt-365 .gt-future-deko{position:absolute;left:20px;bottom:0;width:100px;z-index:0;pointer-events:none}
.gt-365 .gt-checks{list-style:none;display:grid;gap:16px}
.gt-365 .gt-checks li{position:relative;padding:18px 22px 18px 64px;background:var(--white);border-radius:22px;box-shadow:var(--sh-md);font-size:1.1rem;line-height:1.55}
.gt-365 .gt-checks li::before{content:"";position:absolute;left:20px;top:19px;width:28px;height:28px;border-radius:50%;background:var(--g) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b7d140' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/16px no-repeat}

/* 3b Planen nach Farben */
.gt-365 .gt-farben{min-height:560px;display:flex;align-items:center;overflow:hidden;background:var(--paper)}
.gt-365 .gt-farben video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;z-index:0}
.gt-365 .gt-farben .gt-farben-still{position:absolute;inset:0}
.gt-365 .gt-farben .gt-farben-still{background:url(assets/images/planen-nach-farben-standbild.webp) center top/cover}
/* Plan bleibt farbig, der Text sitzt auf einem hellen Schleier */
.gt-365 .gt-farben::after{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(ellipse at 50% 50%,rgba(255,253,248,.55) 0%,rgba(255,253,248,.4) 55%,rgba(255,253,248,.3) 100%)}
.gt-365 .gt-farben .gt-wrap{position:relative;z-index:2;width:100%;text-align:center;color:var(--ink)}
/* heller Kasten für den Text, damit die Farben ringsum kräftig bleiben */
.gt-365 .gt-farben-box{position:relative;max-width:640px;margin:0 auto;background:rgba(255,253,248,.94);border-radius:32px;padding:34px 40px 30px;box-shadow:var(--sh-lg)}
.gt-365 .gt-farben-box::after{content:"";position:absolute;inset:12px;border:2px dotted var(--g);border-radius:24px;pointer-events:none}
.gt-365 .gt-eyecatcher{font-family:Caitlin,Lobster,cursive;font-weight:400;font-size:clamp(2.6rem,5.5vw,4rem);line-height:1.05;letter-spacing:.005em;color:var(--o);margin-bottom:14px}
.gt-365 .gt-farben p{font-size:clamp(1.25rem,2.2vw,1.6rem);line-height:1.5;color:var(--g)}
.gt-365 .gt-farben p strong{color:var(--g);font-style:italic}

/* 3c Vom Plan ins Beet: Monatsfarben aus Tanjas Planungsmaterial.
   --pb = Monatsfarbe (Farbband), --pb-on = Schriftfarbe darauf. */
.gt-365 .gt-pb-sec{--pb:#b2c701;--pb-on:#0b582a;--pb-line:rgba(11,88,42,.75)}
.gt-365 .gt-pb-april{--pb:#b2c701;--pb-on:#0b582a;--pb-line:rgba(11,88,42,.75)}
.gt-365 .gt-pb-juni{--pb:#e5a2b4;--pb-on:#0b582a;--pb-line:rgba(11,88,42,.75)}
.gt-365 .gt-pb-juli{--pb:#d34275;--pb-on:#fffdf8;--pb-line:rgba(255,253,248,.85)}
.gt-365 .gt-pb-august{--pb:#9d669f;--pb-on:#fffdf8;--pb-line:rgba(255,253,248,.85)}
.gt-365 .gt-pb-oktober{--pb:#db702d;--pb-on:#fffdf8;--pb-line:rgba(255,253,248,.85)}
.gt-365 .gt-pb-hinweis{max-width:640px;margin:14px auto 0;text-align:center;color:var(--muted)}
.gt-365 .gt-monate{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:34px 0 0}
.gt-365 .gt-monate button{border:2px solid transparent;border-radius:999px;padding:10px 22px;font:600 .95rem 'Open Sans',system-ui,sans-serif;cursor:pointer;
  box-shadow:var(--sh-sm);transition:transform 140ms var(--ease),box-shadow 140ms var(--ease),border-color 140ms var(--ease)}
.gt-365 .gt-monate button:hover{transform:translateY(-1px);box-shadow:var(--sh-md)}
.gt-365 .gt-monate button[aria-selected="true"]{border-color:var(--g);box-shadow:var(--sh-md)}
.gt-365 .gt-m-april{background:#b2c701;color:#0b582a}
.gt-365 .gt-m-juni{background:#e5a2b4;color:#0b582a}
.gt-365 .gt-m-juli{background:#d34275;color:#fffdf8}
.gt-365 .gt-m-august{background:#9d669f;color:#fffdf8}
.gt-365 .gt-m-oktober{background:#db702d;color:#fffdf8}
/* Farbfläche hinter beiden Bildern, mit Rand zur Seite, runden Ecken und gepunkteter Linie */
.gt-365 .gt-pb-band{position:relative;max-width:1020px;margin:34px auto 0;background:var(--pb);border-radius:32px;padding:34px;
  transition:background 300ms var(--ease)}
.gt-365 .gt-pb-band::after{content:"";position:absolute;inset:12px;border:2px dotted var(--pb-line);border-radius:22px;pointer-events:none;transition:border-color 300ms var(--ease)}
.gt-365 .gt-pb-band > .gt-wrap{max-width:none;padding:0}
.gt-365 .gt-planbeet{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:0 auto}
.gt-365 .gt-planbeet figure{margin:0}
/* ohne Rahmen und Schatten, damit Bilder und Band eine Fläche bilden */
.gt-365 .gt-planbeet img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:14px}
.gt-365 .gt-planbeet figcaption{margin-top:14px;text-align:center;font:600 .78rem 'Open Sans',system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--pb-on)}
.gt-365 .gt-pb-text{max-width:720px;margin:0 auto;padding:9px 8px 4px;color:var(--pb-on)}
/* kleiner Trenner über dem Monatstext, je nach Monatsfarbe dunkel oder hell */
.gt-365 .gt-pb-trenner{width:285px;margin:12px auto 0}
.gt-365 .gt-pb-trenner .gt-hell{display:none}
.gt-365 .gt-pb-juli .gt-pb-trenner .gt-dunkel,
.gt-365 .gt-pb-august .gt-pb-trenner .gt-dunkel,
.gt-365 .gt-pb-oktober .gt-pb-trenner .gt-dunkel{display:none}
.gt-365 .gt-pb-juli .gt-pb-trenner .gt-hell,
.gt-365 .gt-pb-august .gt-pb-trenner .gt-hell,
.gt-365 .gt-pb-oktober .gt-pb-trenner .gt-hell{display:block}
.gt-365 .gt-pb-text p+p{margin-top:14px}

/* 4 Workshop-Abschnitt auf Dunkelgrün, damit er als Herzstück heraussticht */
.gt-365 .gt-sec-dunkel{background:var(--g)}
.gt-365 .gt-sec-dunkel h2,.gt-365 .gt-sec-dunkel .gt-intro{color:var(--paper)}
.gt-365 .gt-sec-dunkel .gt-note,.gt-365 .gt-sec-dunkel .gt-btn-sub{color:rgba(255,253,248,.88)}

/* 4 Workshop-Kacheln */
.gt-365 .gt-intro{max-width:720px;margin:18px auto 0}
.gt-365 .gt-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
.gt-365 .gt-tile{position:relative;background:var(--white);border:1.5px solid var(--line);border-radius:22px;padding:30px 28px;box-shadow:var(--sh-md);transition:transform 240ms var(--ease),box-shadow 240ms var(--ease)}
.gt-365 .gt-tile:hover{transform:translateY(-3px);box-shadow:var(--sh-lg)}
.gt-365 .gt-tile h3{margin:10px 0 10px}
.gt-365 .gt-tile-date{margin:-4px 0 12px;font:600 .85rem/1.4 'Open Sans',system-ui,sans-serif;color:var(--brown)}
.gt-365 .gt-tile-live{border:2px dotted var(--g);background:var(--paper)}
.gt-365 .gt-tile-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.gt-365 .gt-pill-o{background:var(--o);color:#fff;border-radius:999px;padding:5px 12px;font:600 .72rem 'Open Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase}
.gt-365 .gt-pill-soft{background:var(--o100);color:var(--o700);border-radius:999px;padding:5px 12px;font:600 .8rem 'Open Sans',sans-serif}
.gt-365 .gt-pill-g{background:var(--lime100);color:var(--g);border-radius:999px;padding:5px 12px;font:600 .72rem 'Open Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase}
.gt-365 .gt-tile-wide{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;background:var(--lime100);border-color:var(--lime)}
.gt-365 .gt-tile-wide:hover{transform:none}
.gt-365 .gt-quote-inline{position:relative;padding:8px 0 0 28px;border-left:3px solid var(--o)}
.gt-365 .gt-quote-inline blockquote{font-style:italic;font-size:1.05rem;line-height:1.6;color:var(--g900)}
.gt-365 .gt-quote-inline figcaption,.gt-365 .gt-voice figcaption{margin-top:12px;font:300 .85rem/1.5 'Open Sans',sans-serif;letter-spacing:.02em;color:var(--brown)}
.gt-365 figcaption b{font-weight:600;color:var(--g)}
.gt-365 .gt-note{max-width:760px;margin:40px auto 0;text-align:center;font-style:italic;color:var(--brown)}
.gt-365 .gt-note img{width:220px;margin:0 auto 12px}

/* 5 Für wen */
.gt-365 .gt-fit{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:52px}
.gt-365 .gt-fit-col{background:var(--white);border-radius:22px;padding:36px 36px 30px;box-shadow:var(--sh-md)}
.gt-365 .gt-fit-col.gt-yes{border:2px dotted var(--g)}
.gt-365 .gt-fit-col.gt-no{background:var(--paper);border:1.5px solid var(--line);box-shadow:none}
.gt-365 .gt-fit-col h3{font-size:1.15rem;margin-bottom:22px}
/* „Für wen": Spaltentitel als Pillen, Einladung orange, Ausschluss zurückgenommen */
.gt-365 .gt-fit-col h3{display:inline-block;border-radius:999px;padding:9px 20px;font:700 .82rem/1.4 'Open Sans',system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;margin-bottom:26px}
.gt-365 .gt-yes h3{background:var(--o);color:#fff}
.gt-365 .gt-no h3{background:transparent;color:var(--brown);border:1.5px solid var(--line)}
.gt-365 .gt-fit ul{list-style:none;display:grid;gap:14px}
.gt-365 .gt-fit li{position:relative;padding-left:36px}
.gt-365 .gt-yes li::before{content:"";position:absolute;left:0;top:3px;width:22px;height:22px;border-radius:50%;background:var(--g) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b7d140' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat}
.gt-365 .gt-no li::before{content:"";position:absolute;left:7px;top:10px;width:9px;height:9px;border-radius:50%;background:var(--brown);opacity:.55}
.gt-365 .gt-no li{color:var(--muted)}

/* 6 Kundenstimmen */
.gt-365 .gt-main-voice{position:relative;max-width:900px;margin:52px auto 0;background:var(--cream);border-radius:32px;padding:56px 64px 44px;box-shadow:var(--sh-md);text-align:center}
.gt-365 .gt-main-voice::before{content:"";position:absolute;inset:12px;border:2px dotted var(--o);border-radius:24px;opacity:.5;pointer-events:none}
.gt-365 .gt-main-voice blockquote{font-style:italic;font-size:clamp(1.2rem,2.1vw,1.45rem);line-height:1.55;color:var(--g900)}
.gt-365 .gt-main-voice .gt-main-deko{position:absolute;right:-30px;top:-48px;width:120px}
.gt-365 .gt-main-voice figcaption{margin-top:20px;font:300 .95rem 'Open Sans',sans-serif;color:var(--brown)}
.gt-365 .gt-voices{display:grid;grid-template-columns:repeat(6,1fr);gap:24px;margin-top:48px}
/* 2 + 3: oben zwei breite Karten, darunter drei */
.gt-365 .gt-voices > .gt-voice{grid-column:span 2}
.gt-365 .gt-voices > .gt-voice:nth-child(-n+2){grid-column:span 3}
/* Karte mit Teilnehmergarten-Foto: Foto links, Text rechts */
.gt-365 .gt-voice.gt-voice-foto{display:grid;grid-template-columns:42% 1fr;grid-template-rows:auto auto 1fr;column-gap:22px}
.gt-365 .gt-voice-foto .gt-voice-photo{grid-column:1;grid-row:1/4;height:100%;min-height:220px;aspect-ratio:auto;margin:0}
.gt-365 .gt-voice-foto > h3,.gt-365 .gt-voice-foto > blockquote,.gt-365 .gt-voice-foto > figcaption{grid-column:2}
.gt-365 .gt-voice-foto > figcaption{align-self:end}
.gt-365 .gt-voice{display:flex;flex-direction:column;background:var(--cream);border-radius:22px;padding:28px;box-shadow:var(--sh-md);border:1.5px solid var(--line)}
.gt-365 .gt-voice-media{display:flex;align-items:center;gap:14px;margin-bottom:16px;min-height:64px}
.gt-365 .gt-voice-media .gt-illu{width:64px;height:64px;object-fit:contain}
.gt-365 .gt-voice-photo{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;margin-bottom:16px}
.gt-365 .gt-voice h3{font-size:1.05rem}
.gt-365 .gt-voice blockquote{font-style:italic;line-height:1.6;color:var(--g900)}
.gt-365 .gt-voice figcaption{margin-top:auto!important;padding-top:14px}
.gt-365 .gt-voice blockquote{padding-left:16px;border-left:3px solid var(--o);margin-top:12px}


/* 7 Über mich */
.gt-365 .gt-about{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center}
.gt-365 .gt-about-photo{position:relative;max-width:440px;justify-self:center}
.gt-365 .gt-about-photo img{border-radius:32px;box-shadow:var(--sh-lg);width:100%;aspect-ratio:3/4;object-fit:cover}
.gt-365 .gt-about-photo::after{content:"";position:absolute;inset:-14px;border:2px dotted var(--g);border-radius:40px;pointer-events:none}
.gt-365 .gt-about h2{font-size:clamp(1.9rem,3.4vw,2.5rem);margin-bottom:22px}
.gt-365 .gt-about p+p{margin-top:16px}

/* 8 Leistungsübersicht + Formular */
.gt-365 .gt-offer{position:relative;background:var(--white);border-radius:32px;padding:56px;box-shadow:var(--sh-lg)}
.gt-365 .gt-offer::after{content:"";position:absolute;inset:14px;border:2.5px dotted var(--g);border-radius:24px;pointer-events:none}
.gt-365 .gt-offer-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:56px;position:relative;z-index:1}
.gt-365 .gt-offer-title{font-family:'Open Sans',sans-serif;font-weight:700;font-size:1rem;letter-spacing:.16em;text-transform:uppercase;color:var(--o)}
.gt-365 .gt-offer h2{font-size:clamp(1.6rem,2.8vw,2.1rem);margin:6px 0 26px}
.gt-365 .gt-offer .gt-checks li{padding:0 0 0 40px;background:none;box-shadow:none;border-radius:0;font-size:1.05rem}
.gt-365 .gt-offer .gt-checks li::before{left:0;top:2px;width:26px;height:26px;background-size:15px}
.gt-365 .gt-offer .gt-checks{gap:14px}
.gt-365 .gt-dates{list-style:none;margin-top:8px;display:grid;gap:4px}
.gt-365 .gt-dates li::before{display:none}
.gt-365 .gt-offer .gt-dates li{padding-left:18px;position:relative;font-size:1rem}
.gt-365 .gt-offer .gt-dates li::after{content:"";position:absolute;left:2px;top:11px;width:7px;height:7px;border-radius:50%;background:var(--o)}
.gt-365 .gt-form{scroll-margin-top:84px;background:var(--lime100);border-radius:22px;padding:34px 32px;align-self:start;position:relative}
.gt-365 .gt-form-intro{font-weight:700;color:var(--g);font-size:1.2rem;line-height:1.35;margin-bottom:20px}
.gt-365 .gt-field{display:block;margin-bottom:14px}
.gt-365 .gt-field span{display:block;font:600 .85rem 'Open Sans',sans-serif;color:var(--g);margin-bottom:6px}
.gt-365 .gt-field input{width:100%;padding:14px 18px;border:1.5px solid var(--lime);border-radius:14px;background:var(--white);font:400 1rem 'Open Sans',sans-serif;color:var(--ink)}
.gt-365 .gt-field input:focus{outline:none;border-color:var(--g);box-shadow:0 0 0 3px rgba(11,88,42,.15)}
.gt-365 .gt-form .gt-btn{width:100%;margin-top:8px}
.gt-365 .gt-form .gt-btn-sub{text-align:center}
.gt-365 .gt-form-legal{margin-top:16px;font:300 .8rem/1.5 'Open Sans',sans-serif;color:var(--muted)}

/* Pille mit Kästchen-Haken für die Zusatzoption */
.gt-365 .gt-pill-optional{display:inline-flex;align-items:center;gap:8px}
.gt-365 .gt-kaestchen{width:15px;height:15px;flex:0 0 15px;color:var(--g)}

/* Preise in der Leistungsbox */
.gt-365 .gt-preis{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.gt-365 .gt-preis b{font-size:1.9rem;color:var(--g)}
.gt-365 .gt-preis span{font-family:'Open Sans',system-ui,sans-serif;font-size:.95rem;color:var(--brown)}
.gt-365 .gt-rabatt{margin-top:8px;font-style:italic;color:var(--o700)}
.gt-365 .gt-mwst{margin-top:14px;font:300 .8rem 'Open Sans',system-ui,sans-serif;color:var(--muted)}
.gt-365 .gt-optional .gt-preis{margin-top:14px;padding-top:0;border:0}
.gt-365 .gt-optional .gt-preis b{font-size:1.4rem}

/* Zusatz-Option in der Leistungsbox */
.gt-365 .gt-optional{margin-top:24px;padding:20px 22px;border:2px dotted var(--g);border-radius:22px;background:var(--lime100)}
.gt-365 .gt-optional p{margin-top:10px}

/* 9 FAQ */
.gt-365 .gt-faq{max-width:860px;margin:48px auto 0;display:grid;gap:14px}
.gt-365 .gt-faq details{background:var(--white);border-radius:18px;box-shadow:var(--sh-sm);border:1.5px solid transparent;transition:border-color 240ms var(--ease)}
.gt-365 .gt-faq details[open]{border-color:var(--lime);box-shadow:var(--sh-md)}
.gt-365 .gt-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:20px 26px;font-weight:700;color:var(--g);font-size:1.08rem}
.gt-365 .gt-faq summary::-webkit-details-marker{display:none}
.gt-365 .gt-faq summary::after{content:"+";flex:0 0 32px;height:32px;border-radius:50%;background:var(--lime100);color:var(--g);display:grid;place-items:center;font:600 1.3rem/1 'Open Sans',sans-serif;transition:transform 240ms var(--ease)}
.gt-365 .gt-faq details[open] summary::after{transform:rotate(45deg);background:var(--o);color:#fff}
.gt-365 .gt-faq details p{padding:0 26px 22px}
.gt-365 .gt-faq details p:not(:last-child){padding-bottom:12px}
.gt-365 .gt-faq-more{max-width:860px;margin:36px auto 0;text-align:center}
.gt-365 .gt-faq-more h3{margin-bottom:6px}

/* 10 Abschluss */
.gt-365 .gt-final{text-align:center;padding:96px 0 104px}
.gt-365 .gt-final h2{font-size:clamp(2rem,4vw,2.9rem)}
.gt-365 .gt-final p{max-width:680px;margin:20px auto 0;font-size:1.15rem}
.gt-365 .gt-final .gt-deko{width:170px;margin:0 auto 26px}
.gt-365 .gt-final .gt-grow{margin-top:44px;font-style:italic;font-size:1.3rem;color:var(--g)}

/* Footer */
.gt-365 .gt-footer{background:var(--brown);color:var(--paper);padding:36px 0}
.gt-365 .gt-footer .gt-wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px}
.gt-365 .gt-footer nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.gt-365 .gt-footer a{color:var(--paper);text-decoration:none;font:400 .92rem 'Open Sans',sans-serif}
.gt-365 .gt-footer a:hover{color:var(--lime)}
.gt-365 .gt-footer small{font:300 .85rem 'Open Sans',sans-serif;opacity:.85}

/* ===== Bewegung wie im Kurs-Prototyp =====
   Das Skript setzt .gt-anim auf den Wrapper. Ohne JavaScript bleibt alles sichtbar. */
.gt-365 .gt-deko-in{display:block}
.gt-365.gt-anim .gt-reveal{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.gt-365.gt-anim .gt-reveal.is-visible{opacity:1;transform:none}
/* Karten, Listen und Spalten gestaffelt */
.gt-365.gt-anim .gt-stagger > .gt-reveal:nth-child(2){transition-delay:.06s}
.gt-365.gt-anim .gt-stagger > .gt-reveal:nth-child(3){transition-delay:.12s}
.gt-365.gt-anim .gt-stagger > .gt-reveal:nth-child(4){transition-delay:.18s}
.gt-365.gt-anim .gt-stagger > .gt-reveal:nth-child(5){transition-delay:.24s}
.gt-365.gt-anim .gt-stagger > .gt-reveal:nth-child(6){transition-delay:.30s}
.gt-365.gt-anim .gt-stagger > .gt-reveal:nth-child(7){transition-delay:.36s}
/* Hero-Kasten steigt beim Laden sanft auf */
.gt-365.gt-anim .gt-hero-box{animation:gt-rise .9s var(--ease) .1s both}
@keyframes gt-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
/* Häkchen und Nummern poppen beim Einblenden herein */
.gt-365.gt-anim .gt-dark-grid > .is-visible .gt-check-round{animation:gt-pop .55s var(--bounce) .12s both}
.gt-365.gt-anim .gt-bubble.is-visible .gt-num{animation:gt-pop .55s var(--bounce) .1s both}
@keyframes gt-pop{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
/* Aquarell-Illustrationen schweben herein und wippen danach sanft */
.gt-365.gt-anim .gt-deko-in{opacity:0;transform:translate(-44px,8px) rotate(-4deg);transition:opacity .8s ease .05s,transform 1s var(--ease) .05s}
.gt-365.gt-anim .gt-deko-in.gt-from-right{transform:translate(44px,8px) rotate(4deg)}
.gt-365.gt-anim .gt-deko-in.is-visible{opacity:1;transform:none}
.gt-365.gt-anim .gt-deko-in.is-visible > img{animation:gt-float 6.5s ease-in-out 1.1s infinite}
@keyframes gt-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-7px) rotate(1.2deg)}}
/* Seitliche Deko neben den Workshop-Kacheln (nur auf breiten Bildschirmen) */
.gt-365 .gt-side-deko{position:absolute;left:0;top:28px;width:210px;z-index:0;pointer-events:none}
.gt-365 .gt-side-deko img{filter:drop-shadow(0 6px 12px rgba(45,38,28,.12))}
.gt-365 #inhalte > .gt-wrap{position:relative;z-index:1}
@media (max-width:1180px){.gt-365 .gt-side-deko{display:none}}
/* Über mich: Foto gleitet von links herein, Absätze folgen nacheinander */
.gt-365.gt-anim .gt-about-photo.gt-reveal{transform:translateX(-46px);transition:opacity 1.1s ease .05s,transform 1.4s var(--ease) .05s}
.gt-365.gt-anim .gt-about-photo.gt-reveal.is-visible{transform:none}
.gt-365.gt-anim .gt-about-text > .gt-reveal{transition-duration:1s}
.gt-365.gt-anim .gt-about-text > .gt-reveal:nth-child(2){transition-delay:.18s}
.gt-365.gt-anim .gt-about-text > .gt-reveal:nth-child(3){transition-delay:.36s}
.gt-365.gt-anim .gt-about-text > .gt-reveal:nth-child(4){transition-delay:.54s}
.gt-365.gt-anim .gt-about-text > .gt-reveal:nth-child(5){transition-delay:.72s}
@media (prefers-reduced-motion:reduce){
  .gt-365.gt-anim .gt-reveal,.gt-365.gt-anim .gt-deko-in{opacity:1;transform:none;transition:none}
  .gt-365.gt-anim *{animation:none!important}
  .gt-365 [data-parallax]{transform:none!important}
}

/* ===== Responsive ===== */
@media (max-width:980px){
  .gt-365 .gt-nav{display:none}
  .gt-365 .gt-tiles,.gt-365 .gt-voices{grid-template-columns:1fr 1fr}
  .gt-365 .gt-voices > .gt-voice,.gt-365 .gt-voices > .gt-voice:nth-child(-n+2){grid-column:auto}
  .gt-365 .gt-voices > .gt-voice.gt-voice-foto:first-child{grid-column:1/-1}
  /* Dunkler Block bleibt dreispaltig, nur kleiner gesetzt, erst auf dem Handy einspaltig */
  .gt-365 .gt-dark-grid{gap:22px}
  .gt-365 .gt-dark h3{font-size:1.08rem}
  .gt-365 .gt-dark p{font-size:.95rem;line-height:1.55}
  .gt-365 .gt-check-round{width:44px;height:44px}
  .gt-365 .gt-voices .gt-voice:first-child{grid-row:auto}
  .gt-365 .gt-future,.gt-365 .gt-about,.gt-365 .gt-offer-grid{grid-template-columns:1fr;gap:40px}
  .gt-365 .gt-about-photo{max-width:420px;margin:0 auto}
}
@media (max-width:767px){
  .gt-365{font-size:1rem}
  .gt-365 .gt-wrap{padding:0 20px}
  .gt-365 .gt-sec{padding:64px 0}
  .gt-365 .gt-header .gt-wrap{height:60px}
  .gt-365 .gt-header img{height:28px}
  .gt-365 .gt-header .gt-btn{padding:9px 14px;font-size:.82rem}
  .gt-365 .gt-hero{min-height:0;padding:160px 0 36px}
  /* Handy: eigenes Hochformat-Bild (3:4), oberer Bildteil bleibt über dem Kasten sichtbar */
  .gt-365 .gt-hero-bg{top:0;height:100%;background-image:url(assets/images/hero-anbauplanung-mobil.webp);background-position:50% 0;transform:none!important}
  .gt-365 .gt-hero-box{padding:30px 22px 26px;border-radius:26px}
  .gt-365 .gt-badge{letter-spacing:.08em;font-size:.66rem}
  .gt-365 .gt-dark-grid{gap:36px}
  .gt-365 .gt-dark-grid,.gt-365 .gt-bubbles,.gt-365 .gt-tiles,.gt-365 .gt-fit,.gt-365 .gt-voices{grid-template-columns:1fr}
  .gt-365 .gt-tile-wide,.gt-365 .gt-planbeet{grid-template-columns:1fr}
  .gt-365 .gt-streifen{grid-template-columns:1fr 1fr;gap:8px;padding:8px}
  .gt-365 .gt-monate button{padding:9px 16px;font-size:.88rem}
  .gt-365 .gt-pb-band{margin-left:0;margin-right:0;padding:24px;border-radius:22px}
  .gt-365 .gt-pb-band::after{inset:9px;border-radius:15px}
  .gt-365 .gt-pb-text{padding-top:32px}
  .gt-365 .gt-checks.gt-future-grid{grid-template-columns:1fr;margin-top:36px}
  .gt-365 .gt-future-deko{display:none} /* einspaltig ohne Keimling */
  .gt-365 .gt-future-sec{padding-bottom:64px}
  .gt-365 .gt-voices > .gt-voice.gt-voice-foto:first-child{grid-column:auto}
  .gt-365 .gt-voice.gt-voice-foto{display:flex}
  .gt-365 .gt-voice-foto .gt-voice-photo{height:auto;min-height:0;aspect-ratio:4/3;margin-bottom:16px}
  .gt-365 .gt-farben{min-height:460px}
  .gt-365 .gt-farben-box{padding:26px 22px 22px;border-radius:26px}
  .gt-365 .gt-eyecatcher{font-size:3.4rem} /* 30 % größer als vorher */
  .gt-365 .gt-farben-box::after{inset:9px;border-radius:18px}
  .gt-365 .gt-farben video{display:none} /* Handy: nur Standbild, quadratischer Ausschnitt */
  .gt-365 .gt-farben .gt-farben-still{background-image:url(assets/images/planen-nach-farben-standbild-handy.webp)}
  .gt-365 .gt-main-voice{padding:48px 26px 40px}
  .gt-365 .gt-main-voice img{width:80px;right:14px;bottom:-20px}
  .gt-365 .gt-offer{padding:36px 22px}
  .gt-365 .gt-offer::after{inset:8px}
  .gt-365 .gt-form{padding:28px 20px}
  .gt-365 .gt-fit-col{padding:28px 22px}
  .gt-365 .gt-wave{height:32px}
}