/*
Theme Name: Der Gartendoktor – Botanische Manufaktur
Description: Naturverbundenes, individuelles Theme für Der Gartendoktor.
Version: 3.0
Author: Der Gartendoktor
WPVibe: yes
*/

:root{
  --forest:#183b2a;
  --deep:#102a20;
  --moss:#58744b;
  --sage:#dce7d2;
  --leaf:#9caf83;
  --cream:#f5f1e7;
  --paper:#fffdf8;
  --ink:#24352b;
  --line:#d5dfce;
  --clay:#b8754d;
  --max:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background-color:var(--paper);background-image:linear-gradient(rgba(245,241,231,.18),rgba(245,241,231,.18)),url("https://dergartendoktor.de/wordpress/wp-content/uploads/2026/09/Botanischer-Hintergrund-%E2%80%93-Der-Gartendoktor.jpg");background-position:center top;background-size:cover;background-repeat:no-repeat;background-attachment:fixed;color:var(--ink);font-family:Georgia,"Times New Roman",serif;line-height:1.7}
a{color:inherit}
.site-header{background:rgba(255,253,248,.82);backdrop-filter:blur(5px)}
.logo-stage{min-height:250px;display:grid;place-items:center;padding:18px 24px 10px;background:var(--deep);box-shadow:inset 0 -1px 0 rgba(255,255,255,.08)}
.emblem-link{display:block;width:min(300px,58vw);aspect-ratio:1/1}
.site-emblem{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 18px 24px rgba(16,42,32,.12));transition:transform .3s ease}
.emblem-link:hover .site-emblem{transform:scale(1.025)}
.brand-fallback{display:grid;place-items:center;height:100%;font-size:clamp(2rem,5vw,4rem);font-weight:700;color:var(--forest)}
.nav{background:rgba(255,253,248,.86);backdrop-filter:blur(5px);display:flex;justify-content:center;align-items:center;gap:clamp(14px,2.8vw,34px);flex-wrap:wrap;padding:18px 24px 24px;border-bottom:1px solid var(--line);font-family:Arial,sans-serif;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.nav a{text-decoration:none;position:relative;padding:5px 0}
.nav a:not(.shop-link):after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--moss);transition:right .25s ease}
.nav a:not(.shop-link):hover:after{right:0}
.nav .shop-link{background:var(--forest);color:#fff;padding:10px 16px;border-radius:999px}
.hero{background:linear-gradient(90deg,rgba(16,42,32,.88),rgba(16,42,32,.58));color:#fff;min-height:620px;display:grid;align-items:center}
.hero-inner{width:min(var(--max),calc(100% - 48px));margin:auto;padding:90px 0}
.eyebrow{font-family:Arial,sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--moss);margin-bottom:18px}
.hero .eyebrow{color:var(--leaf)}
.hero h1{font-size:clamp(3.3rem,8vw,7.5rem);line-height:.94;letter-spacing:-.055em;margin:0 0 32px;max-width:900px}
.hero p{max-width:690px;font-size:clamp(1.1rem,2vw,1.35rem);color:#e7eee2;margin:0}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px}
.button{display:inline-block;background:var(--leaf);color:var(--deep);text-decoration:none;padding:13px 19px;border-radius:999px;font-family:Arial,sans-serif;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.button:hover{transform:translateY(-1px)}
.button.light{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35)}
.section{padding:110px 24px;background:rgba(255,253,248,.84);backdrop-filter:blur(2px)}
.section-head{max-width:850px;margin:0 auto 50px}
.section h2{font-size:clamp(2.3rem,5vw,4.8rem);line-height:1.02;letter-spacing:-.035em;margin:0 0 22px;color:var(--forest)}
.section-head p,.split p{font-size:1.1rem;color:#526158}
.grid{width:min(var(--max),100%);margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{border:1px solid var(--line);padding:34px;background:rgba(255,255,255,.9)}
.card:hover{border-color:var(--leaf);transform:translateY(-3px)}
.number{font-family:Arial,sans-serif;color:var(--clay);font-size:.72rem;font-weight:700;letter-spacing:.15em;margin-bottom:28px}
.card h3{font-size:2rem;color:var(--forest);margin:0 0 12px}
.card p{margin:0;color:#5b675f}
.band{background:rgba(245,241,231,.9)}
.split{width:min(var(--max),100%);margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.split h2{margin-bottom:10px}
.shop-panel{background:var(--forest);color:#fff;padding:46px}
.shop-panel h3{font-size:2.2rem;line-height:1.1;margin:0 0 14px}
.shop-panel p{color:#dfe8da;margin-bottom:28px}
.content{width:min(860px,calc(100% - 48px));margin:90px auto;padding:55px 90px 90px;background:rgba(24,59,42,.92);backdrop-filter:blur(3px);color:#fff;font-size:1.22rem;line-height:1.85}.content p{color:#fff}.content a{color:#fff;font-weight:700;text-decoration:underline}.content h1,.content h2,.content h3,.content strong{color:#fff!important}.content h1{font-size:2.4rem}.content h2{font-size:1.55rem}.content .prose{color:#fff;font-size:1.22rem;line-height:1.85}.content .prose p,.content .prose a,.content .prose h1,.content .prose h2,.content .prose h3{color:#fff}.content .card{background:rgba(255,255,255,.96);color:#26372d}.content .card h3{color:var(--forest)!important}.content .card p{color:#5b675f!important}.content .card .number{color:var(--clay)!important}
.content h1{font-size:clamp(3rem,6vw,5.5rem);line-height:1;margin:0 0 30px;color:var(--forest)}
.site-footer{background:linear-gradient(135deg,var(--deep),var(--forest));color:#dce7d2;padding:58px 24px 28px;border-top:1px solid rgba(220,231,210,.14)}
.footer-inner{width:min(var(--max),100%);margin:auto;font-family:Arial,sans-serif}
.footer-brand{padding-bottom:28px;border-bottom:1px solid rgba(220,231,210,.16)}
.footer-kicker{font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.7rem,3vw,2.35rem);font-weight:700;color:#fffdf8;letter-spacing:-.02em}
.footer-tagline{margin-top:5px;color:#aebfa3;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase}
.footer-nav{display:flex;gap:26px;padding:22px 0;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.footer-nav a{color:#f5f1e7;text-decoration:none;position:relative}
.footer-nav a:after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1px;background:var(--leaf);transition:right .25s ease}
.footer-nav a:hover:after{right:0}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:18px;border-top:1px solid rgba(220,231,210,.1);color:#93a78f;font-size:.7rem;letter-spacing:.07em}
@media (max-width:900px){.logo-stage{min-height:250px}.emblem-link{width:min(330px,68vw)}.hero{min-height:540px}.grid,.split{grid-template-columns:1fr}.split{gap:36px}.section{padding:80px 24px}}
@media (max-width:700px){.logo-stage{min-height:220px;padding-top:14px}.emblem-link{width:min(290px,72vw)}.nav{gap:10px 16px;font-size:.68rem}.hero-inner{padding:72px 0}.hero h1{font-size:clamp(3rem,16vw,5rem)}.hero p{font-size:1rem}.section{padding:65px 20px}.card{padding:28px}.shop-panel{padding:32px 26px}.footer-inner{font-size:.7rem}}

/* Zutaten-Seite: botanische Kartenansicht nach dem neuen Entwurf */
body.page-id-22 .content{
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
  background:transparent;
  color:var(--ink);
  font-size:1rem;
  line-height:1.7;
  backdrop-filter:none;
}
body.page-id-22 .content .prose{max-width:none;color:var(--ink);font-size:inherit;line-height:inherit}
body.page-id-22 .content .prose p,
body.page-id-22 .content .prose a,
body.page-id-22 .content .prose h1,
body.page-id-22 .content .prose h2,
body.page-id-22 .content .prose h3{color:inherit}
body.page-id-22 .content>header{display:none}

.ingredients-page{
  width:100%;
  padding:58px 24px 90px;
  background:linear-gradient(rgba(250,248,239,.76),rgba(250,248,239,.76));
}
.ingredients-intro{
  width:min(1180px,100%);
  margin:0 auto 44px;
  display:flex;
  align-items:center;
  gap:28px;
}
.ingredients-intro .eyebrow{margin:0 0 3px;color:var(--forest)}
.ingredients-intro h1{
  margin:0!important;
  color:var(--forest)!important;
  font-size:clamp(3.4rem,7vw,6.5rem)!important;
  line-height:.92!important;
  letter-spacing:-.055em;
}
.ingredients-intro p{
  margin:8px 0 0!important;
  color:#23634d!important;
  font-family:Arial,sans-serif;
  font-size:clamp(1.05rem,2vw,1.45rem);
  letter-spacing:.01em;
}
.ingredients-mark{
  width:88px;height:88px;position:relative;flex:0 0 88px;
}
.ingredients-mark:before{
  content:"";position:absolute;left:42px;top:18px;width:4px;height:58px;
  background:var(--forest);border-radius:999px;transform:rotate(25deg);
}
.ingredients-mark span{
  position:absolute;width:42px;height:25px;background:var(--forest);border-radius:100% 0 100% 0;
  transform:rotate(-30deg);
}
.ingredients-mark span:first-child{left:4px;top:20px}
.ingredients-mark span:last-child{left:42px;top:4px;transform:rotate(-55deg)}

.ingredient-list{width:min(1180px,100%);margin:0 auto;display:flex;flex-direction:column;gap:16px}
.ingredient-card{
  display:grid;
  grid-template-columns:minmax(300px,36%) 1fr;
  height:425px;
  min-height:425px;
  overflow:hidden;
  border:2px solid #3f8051;
  border-radius:24px;
  background:rgba(240,247,234,.9);
  box-shadow:0 8px 24px rgba(24,59,42,.05);
  transition:transform .22s ease,box-shadow .22s ease;
}
.ingredient-card:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(24,59,42,.09)}
.ingredient-media{position:relative;height:100%;min-height:205px;overflow:hidden;background:#dfe8d6}
.ingredient-media img{width:100%;height:100%;display:block;object-fit:cover}
.ingredient-card:not(.ingredient-card-featured) .ingredient-media:after{
  content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(220,235,211,0) 78%,rgba(240,247,234,.72) 100%);
}
.ingredient-copy{padding:34px 48px 32px;display:flex;flex-direction:column;justify-content:center}
.ingredient-copy .number{
  display:none;
  margin:0 0 8px;color:var(--clay);font-family:Arial,sans-serif;font-size:.72rem;
  font-weight:700;letter-spacing:.16em;
}
.ingredient-copy h2{
  margin:0 0 10px!important;color:#12624f!important;font-size:clamp(2rem,3vw,3rem)!important;
  line-height:1!important;letter-spacing:-.035em;
}
.ingredient-copy p{margin:0!important;color:#276c58!important;font-size:1.08rem;line-height:1.55}
.ingredient-card-featured{min-height:250px}
.ingredient-card-featured .ingredient-media{min-height:250px}
.sea90-badge{
  position:absolute;right:22px;top:50%;transform:translateY(-50%);
  width:118px;height:118px;border-radius:50%;background:#075a6c;border:6px solid rgba(255,255,255,.92);
  color:#fff;display:flex;align-items:center;justify-content:center;flex-direction:column;
  box-shadow:0 5px 18px rgba(16,42,32,.22);z-index:2;font-family:Arial,sans-serif;
}
.sea90-badge strong{font-size:1.9rem;line-height:1;font-weight:700;letter-spacing:-.06em}
.sea90-badge sup{font-size:.55rem;position:absolute;right:18px;top:29px}
.sea90-badge span{width:42px;height:8px;border-top:4px solid #fff;border-radius:50%;margin-top:8px;transform:rotate(-4deg)}
.ingredient-footer{
  width:min(920px,100%);margin:58px auto 0;text-align:center;padding:44px 30px;
  background:rgba(245,241,231,.88);border-radius:24px;
}
.ingredient-footer .eyebrow{margin-bottom:12px}
.ingredient-footer h2{margin:0 0 12px;color:var(--forest)!important;font-size:clamp(2rem,4vw,3.3rem)!important;line-height:1.05}
.ingredient-footer p{margin:0 auto 26px;max-width:720px;color:#526158!important;font-size:1.05rem}
.ingredient-footer small{display:block;margin-top:26px;color:#788278;font-family:Arial,sans-serif;font-size:.68rem;line-height:1.5}
.ingredient-footer .button{text-decoration:none;color:var(--deep)!important}

@media (max-width:900px){
  .ingredients-page{padding:46px 18px 70px}
  .ingredients-intro{gap:20px;margin-bottom:30px}
  .ingredients-mark{width:64px;height:64px;flex-basis:64px}
  .ingredient-card{grid-template-columns:1fr;height:auto;min-height:0}
  .ingredient-media,.ingredient-card-featured .ingredient-media{height:230px;min-height:230px}
  .ingredient-card:not(.ingredient-card-featured) .ingredient-media:after{background:linear-gradient(180deg,rgba(220,235,211,0) 70%,rgba(240,247,234,.45) 100%)}
  .ingredient-copy{padding:26px 30px 30px}
  .sea90-badge{width:94px;height:94px;right:18px}
  .sea90-badge strong{font-size:1.5rem}
}
@media (max-width:560px){
  .ingredients-intro{align-items:flex-start}
  .ingredients-mark{display:none}
  .ingredients-intro h1{font-size:clamp(3rem,15vw,4.5rem)!important}
  .ingredient-media,.ingredient-card-featured .ingredient-media{height:190px;min-height:190px}
  .ingredient-copy h2{font-size:2rem!important}
  .ingredient-copy p{font-size:1rem}
  .sea90-badge{width:78px;height:78px;border-width:4px}
  .sea90-badge strong{font-size:1.25rem}
  .sea90-badge sup{right:10px;top:20px}
  .sea90-badge span{width:30px}
}
