@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&family=Inter:wght@400;700;900&display=swap');

/* ====== TOKENS ====== */
:root{
  --text:#0c3d3a;                /* dunkles Petrol für helle Flächen */
  --text-invert:#ecf2f1;         /* für dunkle Flächen */
  --muted:#eaf6f3;

  /* Petrol-Skala */
  --petrol-950:#066169;
  --petrol-900:#4aa1a3;
  --petrol-800:#08393b;
  --petrol-700:#0b5456;
  --petrol-300:#bfe0dc;          /* helles Petrol */
  --petrol-200:#d7ebe8;
  --petrol-100:#eaf6f3;

  /* Akzent */
  --softgold:#FACA30;
  --softgold-200:#f3d16e;

  --maxw:1180px; --gutter:clamp(16px,4vw,36px); --lh:1.52;
  --edge: clamp(16px, 6vw, 100px);
  --radius: 8px;
  --header-h: 0px;
}

/* ====== GLOBAL ====== */
html{ scroll-snap-type:y mandatory }
@media (prefers-reduced-motion: reduce){ *{animation:none!important;transition:none!important} }
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  -webkit-font-smoothing:antialiased;
  background:var(--petrol-900);
}
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.wrap{ width:min(var(--maxw),100%); margin:0 auto; padding:0 var(--gutter) }

/* Skip */
.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{left:var(--gutter);top:64px;width:auto;height:auto;background:#fff;color:#000;padding:8px;border-radius:8px;z-index:999}

/* ====== HEADER / NAV ====== */
.rail{
  position:fixed;top:0;left:0;right:0;z-index:60;
  height:60px;display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--gutter);
  background:#066169;box-shadow:0 1px 0 rgba(0,0,0,.25);
}
.brand{display:flex;align-items:center;gap:100px}
.logo-text{font-family:"Roboto Condensed",sans-serif;font-weight:700;letter-spacing:.5px;color:var(--muted)}
.nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.nav a{font-family:"Roboto Condensed",sans-serif;color:var(--muted);text-decoration:none;font-weight:700;letter-spacing:.5px;opacity:.95}
.nav a:hover{opacity:.85}
.assist{background:rgba(255,255,255,.06);padding:8px 12px;border-radius:24px}
.nav-group{position:relative}
.nav-root{background:none;border:0;font-family:"Roboto Condensed",sans-serif;font-weight:700;letter-spacing:.5px;color:var(--muted);cursor:pointer;padding:0px}
.nav-drop{
  position:absolute;top:100%;left:0;min-width:220px;padding:8px;
  background:#07383a;border:1px solid rgba(255,255,255,.1);
  border-radius:8px;display:none;z-index:100;
}
.nav-drop a{display:block;color:#eaf4f3;text-decoration:none;padding:6px 8px;border-radius:6px}
.nav-drop a:hover{background:rgba(255,255,255,.06)}
.nav-group:hover .nav-drop,.nav-group:focus-within .nav-drop{display:block}
.profile-btn{
  margin-left:auto;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);
  color:#eaf4f3;cursor:pointer
}
@media (max-width:980px){
  .nav{display:grid;grid-auto-flow:row;gap:10px;justify-items:start}
  .profile-btn{margin-left:0}
}

/* ====== SLIDES ====== */
/* NEU – an Headerhöhe gekoppelt */
.slide{
  position:relative;
  height: calc(100vh - var(--header-h));
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  padding-top: var(--header-h);
  scroll-snap-align:start;
}
/* Intro füllt Full-Viewport (ohne Abzug) */
#intro.slide{ height:100vh !important; padding-top:0 !important; }

.slide--hero{background:#0b5456;}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0}
/* Start-Slide soll Full-Viewport sein */
#intro.slide{height:100vh !important;padding-top:0 !important}

/* dunkle: nur dort, wo gewünscht */
.panel--petrol{ background: var(--petrol-800); color: var(--text-invert); }

/* standard „freundliche“ Slides: hell-petrol → weißlich */
.panel--soft{
  background: linear-gradient(180deg, var(--petrol-950) 00%, var(--petrol-900) 80%, #fff 100%);
  color: var(--text);
}
.panel--ink{
  background: linear-gradient(180deg, var(--petrol-950) 0%, var(--petrol-200) 100%, #fff 100%);
  color: var(--text);
}
.panel--teal{
  background: linear-gradient(180deg, var(--petrol-100) 0%, var(--petrol-200) 100%);
  color: var(--text);
}
.panel--deep{
  background: linear-gradient(180deg, var(--petrol-900) 0%, var(--petrol-400) 90%);
  color: var(--text);
}
.panel--assist{
  background: linear-gradient(180deg, var(--petrol-100) 0%, var(--petrol-200) 80%, #fff 100%);
  color: var(--text);
}
.panel--softgold{
  background: linear-gradient(180deg, #fff 0%, var(--petrol-100) 100%);
  color: var(--text);
}

/* Zwei-Spalten-Grid (About-Sektionen) */
.about-grid{
  display:grid; gap:32px;
  align-items:stretch; width:100%; padding:0;
}
/* exakte Innenhöhe für diese Slides */
#about-start .about-grid,
#ursprung-start .about-grid{
  min-height: calc(100vh - var(--header-h));
}

.grid-50-50{grid-template-columns:1fr 1fr}
.grid-66-33{grid-template-columns:2fr 1fr}
.grid-33-66{grid-template-columns:1fr 2fr}
.about-media{margin:0;border-radius:0;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.25);height:100%}
.about-media img{display:block;width:100%;height:100%;object-fit:cover}
/* Farben waren zuvor sehr hell – wir nehmen die Token */
.about-copy{display:flex;flex-direction:column;justify-content:center;}
.about-copy h2{font-family:"Roboto Condensed",system-ui,sans-serif;font-weight:800;font-size:clamp(26px,5vw,40px);margin:0 0 10px}
.about-copy p{margin:0 0 12px;line-height:1.6;color:var(--muted)}   /* NEU */
.about-copy .note{color:var(--muted);margin-top:10px}               /* NEU */


/* Text/Chips/Buttons */
.chips{list-style:none;padding:0;margin:12px 0 8px;display:flex;flex-wrap:wrap;gap:10px}
.chip{background:rgba(250,202,48,.56);border:1px solid rgba(250,202,48,.28);color:#fff;padding:8px 12px;border-radius:999px;font-weight:800;font-size:14px}
.btn{display:inline-block;padding:10px 16px;border-radius:10px;text-decoration:none}
.btn.primary{
  background-color: var(--softgold) !important;
  border: none !important;
  color: #022f35 !important;
  font-weight:700;
  padding:12px 18px;
  border-radius: var(--radius,8px);
}
.btn.primary:hover{ background-color: var(--softgold-200) !important; }

.center{text-align:center;padding:0 var(--gutter)}
.title{margin:0 0 10px;font-size:clamp(26px,5vw,52px);line-height:1.05;font-weight:900;letter-spacing:.3px}
.lead{margin:8px auto 0;max-width:900px;font-size:clamp(16px,2.2vw,20px);line-height:var(--lh);color:var(--muted)}
@media (max-width:900px){ .about-grid{grid-template-columns:1fr} .about-media{order:-1} }

/* ====== Unterseiten (Slides optional) ====== */
.submain{scroll-snap-type:y mandatory}
.subslide{height:100vh;scroll-snap-align:start;display:flex;align-items:center}
.subslide--auto{height:auto;scroll-snap-align:none;padding:60px 0}

/* ====== Footer ====== */
.footer{background:#0a3a37;color:rgba(255,255,255,.85)}
.footer__in{min-height:100px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.footer a{color:#cfe5e3;text-decoration:none;font-weight:700}
.note{opacity:.9}







.fact{ color:var(--text); text-decoration:none; padding:22px clamp(12px,2.4vw,28px); position:relative; }
.fact:not(:last-child)::after{
  content:""; position:absolute; top:18%; bottom:18%; right:0; width:1px; background:rgba(255,255,255,.12);
}
.fact-icon{
  width:60px; height:60px; margin:0 auto 14px; display:grid; place-items:center;
  border-radius:50%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
}
.fact-icon img{ width:30px; height:30px; display:block; }
.fact-term{ margin:0 0 6px; font-family:"Roboto Condensed",system-ui,sans-serif; font-weight:900; font-size:clamp(18px,2.6vw,24px); letter-spacing:.3px; text-align:center; }
.fact-punch{ margin:0 0 8px; text-align:center; font-weight:800; color:#ffdf85; }
.fact-desc{ margin:0; text-align:center; color:var(--muted); line-height:1.55; }
/*@media (max-width:1100px){ .c4-row-middle{ grid-template-columns: repeat(2, minmax(220px,1fr)); } }
@media (max-width:640px){  .c4-row-middle{ grid-template-columns: 1fr; } .fact:not(:last-child)::after{ display:none } }*/




/* ====== Schnellhilfe (Core4-Stil) ====== */
.assist-wide { background: linear-gradient(180deg, var(--petrol-950) 00%, var(--petrol-900) 080%, #fff 100%);}
.assist-wrap{ width:100%; max-width:none; padding-left:var(--edge); padding-right:var(--edge); }
.top-tight{ padding-top: clamp(12px, 2vh, 40px); }
.assist-head{ text-align:center; }
.assist-intro{ margin:10px auto 0; max-width: 1100px; color:var(--muted); line-height: var(--lh); }
.assist-section{ margin: 18px auto 0; max-width: 1400px; text-align:center; }
.assist-sub{ margin:0 0 4px; font-size: clamp(18px,2.6vw,22px); }
.assist-punch{ margin:0 0 16px; color:#ffdf85; font-weight:800; }

.assist-form{ width:100%; }
.form-grid.stealth{ display:grid; grid-template-columns: repeat(4, minmax(240px,1fr)); gap:14px; margin-bottom:12px; }
.form-grid.stealth label{ display:flex; flex-direction:column; gap:6px; text-align:left; background:transparent; border:0; padding:0; }
.form-grid.stealth label span{ font-weight:700; font-size:14px; opacity:.92 }
.form-grid.stealth select,.form-grid.stealth input{
  width:100%; padding:10px 12px; border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:var(--text);
}
.form-grid .ghost{ display:none; }
@media (max-width:1100px){ .form-grid.stealth{ grid-template-columns: repeat(2, minmax(220px,1fr)) } }
@media (max-width:640px){  .form-grid.stealth{ grid-template-columns: 1fr } }

.goals{ margin-top: 10px; margin-bottom: 10px;}
.goals-title{ margin:0 0 8px; font-weight:900; font-size:18px; }
.goals-grid{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.goal-chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:var(--radius); cursor:pointer;
  background: rgba(250,202,48,.12); border: 1px solid rgba(250,202,48,.26); color:#fff; }
.goal-chip input{ display:none; }
.goal-chip input:checked + span{ font-weight:800 }

/* ====== Rezepte – Startseite ====== */
.recipes-wrap{ width:100%; max-width:none; padding-left:var(--edge); padding-right:var(--edge); }
.recipes-head{ text-align:center; margin-bottom:10px; }
.recipes-intro{ margin:10px auto 0; max-width:1400px; color: var(--muted); line-height: var(--lh); }
.recipes-form{ margin:16px auto 0; max-width:1400px }
.r-line{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:12px }
.r-line input[type="search"]{
  width:min(800px,100%); padding:12px 14px; border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:var(--text);
}
.r-grid{ margin-bottom:12px; display:grid; gap:12px; grid-template-columns: repeat(6, minmax(160px,1fr)) }
.r-grid label{ display:flex; flex-direction:column; gap:6px }
.r-grid label span{ font-weight:700; font-size:14px; opacity:.92 }
.r-grid select{ width:100%; padding:12px 14px; border-radius:var(--radius); border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:var(--text) }

/* Rail – Startseite */
.r-rail{
  display:flex;
  gap:16px;
  overflow-x:auto;
  padding:10px 0 14px;
  scroll-snap-type:x mandatory;
}
.r-rail .r-card{
  flex:0 0 auto;
  min-width: 86vw;              /* auf Mobile fast ganze Breite */
  scroll-snap-align:center;
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  text-decoration:none;
  color:inherit;
}
.r-rail::before,
.r-rail::after{
  content:"";
  flex:0 0 16px; /* Gutter links/rechts */
}
@media (min-width:901px){
  .r-rail .r-card{ min-width: clamp(280px, 28vw, 360px); }
}
@media (min-width:1200px){
  .r-rail .r-card{ min-width: clamp(320px, 30vw, 420px); }
}


/* Suchseite – Katalog */
.r-catalog{
  display:grid;
  gap:16px;
  grid-template-columns: repeat(3, minmax(280px,1fr));
  margin-top:16px;
}
@media (max-width:1100px){
  .r-catalog{ grid-template-columns: repeat(2,minmax(260px,1fr)); }
}
@media (max-width:640px){
  .r-catalog{ grid-template-columns: 1fr; }
}
.r-catalog .r-card{
  display:block;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  color:var(--text);
  text-decoration:none;
}
.r-catalog .r-card figure{ height:220px; margin:0; overflow:hidden; }
.r-catalog .r-card img{ width:100%; height:100%; object-fit:cover; display:block; }
.r-catalog .r-meta{ padding:10px 12px; }
.r-catalog .r-meta h3{ margin:0 0 4px; font-size:18px; font-weight:900; }
.r-catalog .r-meta p{ margin:0; color:#4c6a65; }

/* ====== Rezepte – Suchseite ====== */
.r-grid-advanced{ grid-template-columns: repeat(4, minmax(220px,1fr)) }
@media (max-width:1100px){ .r-grid-advanced{ grid-template-columns:repeat(2,minmax(220px,1fr)) } }
@media (max-width:640px){  .r-grid-advanced{ grid-template-columns:1fr } }

/* Katalog auf Suchseite zentriert (auch 1 Karte) */
.subpage .recipes-wrap{ padding-left:var(--edge); padding-right:var(--edge) }
.subpage .r-catalog{ margin-top:16px; display:flex; flex-wrap:wrap; gap:16px; justify-content:center; align-items:stretch }
.subpage .r-card{ width:clamp(280px,29vw,360px); border-radius:16px }
.subpage .r-card figure{ height:clamp(180px,20vw,220px) }
.subpage .recipes-form{ margin-bottom:8px }

/* ====== Rezeptseite ====== */
.recipe .recipe-wrap{ width:100%; padding-left:var(--edge); padding-right:var(--edge); max-width:none }
.recipe-hero{ display:grid; grid-template-columns:minmax(280px,520px) 1fr; gap:clamp(16px,3vw,28px); align-items:center; margin-top:clamp(8px,2vh,24px) }
.recipe-media{ margin:0; border-radius:10px; overflow:hidden; position:relative }
.recipe-media img{ display:block; width:100%; height:100%; object-fit:cover }
.recipe-head .recipe-title{ margin:0 0 6px; font-size:clamp(28px,6vw,46px) }
.recipe-sub{ margin:4px 0 8px; color:var(--muted) }
.recipe-meta{ list-style:none; padding:0; margin:8px 0 0; display:flex; gap:10px; flex-wrap:wrap }
.pill{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); border-radius:999px; padding:6px 10px }
.pill-gold{ background:rgba(250,202,48,.16); border-color:rgba(250,202,48,.28) }
.personalize{ margin-top:14px }
.h-sm{ margin:0 0 6px; font-size:18px }
.p-grid{ display:grid; gap:12px; grid-template-columns:repeat(2,minmax(220px,1fr)) }
.p-grid label{ display:flex; flex-direction:column; gap:6px }
.p-grid select,.p-grid input{ padding:10px 12px; border-radius:var(--radius); border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:var(--text) }

.recipe-body{ display:grid; gap:clamp(16px,3vw,28px); grid-template-columns:minmax(280px,420px) 1fr }
.ingredients .servings{ display:flex; gap:10px; align-items:center; margin-bottom:8px }
.ingredients .servings input{ width:88px; text-align:center; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:var(--text) }
.ing-list{ margin:8px 0 12px; padding-left:18px }
.ing-list li{ margin:4px 0; line-height:1.6 }

.steps .h{ margin:0 0 8px }
.step-card{ display:grid; grid-template-columns:56px 1fr; gap:14px; padding:14px; border-radius:10px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); margin-bottom:10px }
.step-num{ width:56px; height:56px; border-radius:50%; display:grid; place-items:center; font-weight:900; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18) }
.step-text p{ margin:0 0 8px; line-height:1.65; font-size:clamp(16px,2.2vw,18px) }

.notebox{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:12px }
.h{ font-size:clamp(20px,3vw,28px); margin:0 0 4px }
.sm{ font-size:13.5px }

/* Druck: nur Content */
@media print{
  .rail,.nav,.btn,.assist-disclaimer{ display:none !important }
  body{ background:#fff; color:#000 }
  .panel{ background:#fff !important }
  .recipe .recipe-wrap{ padding:0 }
  .step-card{ border:1px solid #999; background:#fff }
}

/* ====== Lightbox (Rezept-Galerie) ====== */
.media-zoom{
  position:absolute; right:10px; bottom:10px;
  width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.35); color:#fff;
  display:grid; place-items:center; cursor:pointer; font-weight:900; z-index:2;
}
.media-zoom:focus-visible{ outline:2px solid #FACA30; outline-offset:2px }

.r-lb{
  position:fixed; inset:6% 6%; z-index:1000;
  background:rgba(5,43,45,.96);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  display:grid; grid-template-columns:48px 1fr 48px; grid-template-rows:48px 1fr;
  gap:8px; padding:8px;
  opacity:0; pointer-events:none; transform:translateY(6px);
  transition:.2s ease;
}
.r-lb[aria-hidden="false"]{ opacity:1; pointer-events:auto; transform:none }

.r-lb__stage{ grid-column:1 / -1; grid-row:2; display:grid; place-items:center; overflow:hidden; border-radius:8px; background:#071a1b }
.r-lb__stage img{ max-width:100%; max-height:100%; object-fit:contain; cursor:zoom-out }
.r-lb__stage.is-zoom{ overflow:auto }
.r-lb__stage.is-zoom img{ max-width:none; max-height:none; width:auto; height:auto; cursor:zoom-out }

.r-lb__close,.r-lb__prev,.r-lb__next{
  background:#0b5456; color:#eaf4f3; border:0; border-radius:8px;
  cursor:pointer; font-weight:900; font-size:0;   /* Text ausblenden, Icon per ::before */
  width:48px; height:48px; display:grid; place-items:center;
}
.r-lb__close{ grid-column:1; grid-row:1 }
.r-lb__prev{  grid-column:1; grid-row:2; align-self:center }
.r-lb__next{  grid-column:3; grid-row:2; align-self:center }

.r-lb__backdrop{ position:fixed; inset:0; z-index:999; background:rgba(0,0,0,.45) }

/* Pfeil-Icons */
.r-lb__prev::before,.r-lb__next::before{
  content:""; width:18px; height:18px; display:block; background:#eaf4f3;
  mask-size:contain; mask-repeat:no-repeat; mask-position:center;
}
.r-lb__prev::before{
  mask-image:url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M15 18l-6-6 6-6"/></svg>');
}
.r-lb__next::before{
  mask-image:url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M9 6l6 6-6 6"/></svg>');
}

/* Community (Start) im Blog-Look – hell, bilderstark */
#community{
  --blog-bg:#eaf6f3; --blog-ink:#0c3d3a; --blog-card:#eaf6f3;
  --blog-muted:#456b67; --blog-accent:#f3d16e;
}
#community.panel{ background: var(--blog-bg) !important; color: var(--blog-ink); }
#community .title, #community h3{ color: var(--blog-ink); }
#community .community-wrap{ width:100%; max-width:none; padding-left:var(--edge); padding-right:var(--edge); text-align:center; }
#community .comm-intro{ margin:0px auto 0; max-width:1200px; color: var(--blog-muted); line-height: var(--lh); }
#community .comm-cta{ margin-top:12px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* Karten (wie Blog) – nur falls post-card noch nicht global existiert */
.post-card{
  display:block; text-decoration:none; color: var(--blog-ink);
  background: var(--blog-card); border:1px solid rgba(0,0,0,.06);
  border-radius: 10px; overflow:hidden; box-shadow: 0 8px 22px rgba(0,0,0,.08);
}
.post-card figure{ margin:0; height: clamp(160px, 24vw, 220px); }
.post-card img{ width:100%; height:100%; object-fit:cover; display:block }
.post-card .pc-body{ padding:12px 14px }
.post-card h3{ margin:0 0 6px; font-size:20px; font-weight:900 }
.post-card p{ margin:0; color:#4c6a65; line-height:1.55 }
.post-card .pc-meta{ margin-top:6px; font-size:13px; color:#6d908b }

/* Grid der Karten */
#community .post-grid{
  margin-top: 12px;
  display:grid; gap:14px;
  grid-template-columns: repeat(3, minmax(400px,1fr));
}
@media (max-width:1100px){ #community .post-grid{ grid-template-columns: repeat(2, minmax(260px,1fr)); } }
@media (max-width:640px){  #community .post-grid{ grid-template-columns: 1fr; } }



/* ===== Blog/Community – helles Theme ===================================== */
/* Seite aktivieren: <body class="subpage theme-blog"> */

.theme-blog{
  --blog-bg: linear-gradient(180deg, var(--petrol-300) 00%, var(--petrol-100) 20%, #fff 100%);           /* Farbverlauf */
  --blog-ink:#0c3d3a;           /* dunkles Petrol für Text */
  --blog-card:#eaf6f3;
  --blog-muted:#456b67;
  --blog-accent:#f3d16e;        /* warmes Gelb */
}
.theme-blog .panel{ background: var(--blog-bg) !important; color: var(--blog-ink); }
.theme-blog .title, 
.theme-blog h1, 
.theme-blog h2, 
.theme-blog h3 { color: var(--blog-ink); }
.theme-blog .muted{ color: var(--blog-muted); }

/* Header bleibt dunkel – Inhalt wird breit */
.theme-blog .wrap{ max-width: 1100px; }

/* Hero mit Bild */
.blog-hero{
  position: relative; border-radius: 12px; overflow: hidden;
  margin: 10px 0 16px;
  height: clamp(220px, 34vw, 360px);
}
.blog-hero img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter: saturate(1.05);
}
.blog-hero .hero-caption{
  position:absolute; left:0; right:0; bottom:0;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.45));
  color:#fff; padding: 14px 16px;
}
.blog-hero .hero-caption .title{ color:#fff; margin:0 0 4px; }
.blog-hero .hero-caption p{ margin:0; opacity:.92 }

/* Featured + Grid */
.blog-feature{
  display:grid; grid-template-columns: 1.2fr 1fr; gap:16px; margin: 12px 0 6px;
}
@media (max-width: 900px){ .blog-feature{ grid-template-columns: 1fr; } }

.post-card{
  display:block; text-decoration:none; color: var(--blog-ink);
  background: var(--blog-card); border:1px solid rgba(0,0,0,.06);
  border-radius: 10px; overflow:hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
}
.post-card figure{ margin:0; height: clamp(160px, 24vw, 220px); }
.post-card img{ width:100%; height:100%; object-fit:cover; display:block }
.post-card .pc-body{ padding:12px 14px }
.post-card h3{ margin:0 0 6px; font-size:20px; font-weight:900 }
.post-card p{ margin:0; color:#4c6a65; line-height:1.55 }
.post-card .pc-meta{ margin-top:6px; font-size:13px; color:#6d908b }

/* Grid */
.post-grid{
  margin-top: 12px;
  display:grid; gap:14px;
  grid-template-columns: repeat(3, minmax(260px,1fr));
}
@media (max-width: 1100px){ .post-grid{ grid-template-columns: repeat(2, minmax(260px,1fr)); } }
@media (max-width: 640px){  .post-grid{ grid-template-columns: 1fr; } }

/* Community Lite, gleiche Kartenoptik */
.theme-blog .comm-grid{
  margin-top:16px;
  display:grid; gap:14px;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
}
@media (max-width: 1100px){ .theme-blog .comm-grid{ grid-template-columns: repeat(2, minmax(260px,1fr)); } }
@media (max-width: 640px){  .theme-blog .comm-grid{ grid-template-columns: 1fr; } }

.theme-blog .comm-card{
  background: var(--blog-card); border:1px solid rgba(0,0,0,.06);
  border-radius:10px; padding:14px; color: var(--blog-ink);
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
}
.theme-blog .comm-more{ color:#0c3d3a; font-weight:800 }


/* Footer vereinheitlichen + Social Icons */
.site-footer{ background:#0a3a37; color:rgba(255,255,255,.9); }
.site-footer .footer__in{
  min-height:80px; display:grid; grid-template-columns: 1fr auto auto;
  align-items:center; gap:16px;
}
.site-footer a{ color:#cfe5e3; text-decoration:none; font-weight:700 }
.foot-social{ display:flex; gap:10px }
.soc{
  width:34px; height:34px; border-radius:50%; display:inline-block;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  mask-size:18px 18px; mask-repeat:no-repeat; mask-position:center; -webkit-mask-size:18px 18px;
}
.soc.yt  { background:#ff0000; } /* roter Kreis */
.soc.ig  { background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.soc.mail{ background:#0b5456; }

.soc.yt::after, .soc.ig::after, .soc.mail::after{ content:""; display:block; width:100%; height:100%;
  background:#fff; border-radius:50%; opacity:.0; } /* nur klickfläche */

@media (max-width:900px){
  .site-footer .footer__in{ grid-template-columns: 1fr; justify-items:center; text-align:center; gap:8px }
}

/* Letzter Slide: Inhalt oben, Footer unten */
#closing{
  display:flex; flex-direction:column; justify-content:space-between;
}
#closing .center{ flex:1; display:grid; place-items:center; }


/* Blog/Community-Karten hell */
.post-card{
  background: var(--petrol-100); border:1px solid rgba(0,0,0,.06);
  color: #0c3d3a;
}
.post-card p{ color:#4c6a65 }



/* Inputs/Selects: hell-petrol, nicht white */
.r-line input[type="search"],
.r-grid select,
.form-grid.stealth select,
.form-grid.stealth input,
.p-grid select, .p-grid input{
  background: var(--petrol-100);
  color: #08393b;
  border: 1px solid rgba(0,0,0,.1);
}

/* Schritt-Karten (Rezept) – hell, klare Abtrennung */
.step-card{
  background: var(--petrol-100);
  border: 1px solid rgba(0,0,0,.08);
  color: #0c3d3a;
}
/* Schnellhilfe – Ergebnisdarstellung (hell-petrol) */
.assist-out{ margin-top:14px; max-width:1400px; background:var(--petrol-100); border:1px solid rgba(0,0,0,.08); border-radius:10px; padding:14px }
.assist-out h3{ margin:0 0 6px; }
.assist-cols{ display:grid; gap:12px; grid-template-columns: repeat(2, minmax(260px,1fr)); }
.assist-col .bullet{ margin:6px 0 0; padding-left:18px }
.assist-col .bullet li{ margin:4px 0; line-height:1.55 }
@media (max-width:900px){ .assist-cols{ grid-template-columns:1fr } }



/* Letzter Slide: Inhalt oben, Footer unten und volle Breite */
#community{
  min-height: calc(100vh - var(--header-h));
  display: flex;
  flex-direction: column;
}
#community .community-wrap{
  flex: 1 1 auto;             /* füllt den Platz über dem Footer */
  width: 100%;
}
#community .site-footer{
  flex: 0 0 auto;
  width: 100%;
}
#community .center{ flex:1; display:grid; place-items:center; }

/* === Ergebnis-Slide (Schnellhilfe) ====================================== */
/* Die Slide selbst zentriert den Inhalt (und darf bei viel Inhalt scrollen) */
#schnellhilfe-result{
  min-height: calc(100vh - var(--header-h));
  display: grid;
  place-items: center;           /* zentriert Horizontal + Vertikal */
  overflow-y: auto;              /* falls Ergebnis länger ist, eigene Scrollbar */
  padding: 0 var(--edge);
}

#schnellhilfe-result[hidden]{ display: none !important; }

/* Breite des Inhalts im Ergebnis-Slide */
#schnellhilfe-result .result-wrap{
  width: min(1100px, 100%);
}

/* Mount-Container – kein zusätzlicher Rahmen hier */
#schnellhilfe-result .result-mount{
  width: 100%;
}

/* Bereits existierende .assist-out nutzen wir weiter (Rahmen/Box) –
   ggf. etwas größer aufziehen für mobile Lesbarkeit */
#schnellhilfe-result .assist-out{
  background: var(--petrol-100);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  padding: 16px;
}

/* Zwei Spalten innerhalb der Auswertung (bricht auf mobil auf 1 Spalte) */
#schnellhilfe-result .assist-cols{
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
}
@media (max-width: 900px){
  #schnellhilfe-result .assist-cols{ grid-template-columns: 1fr; }
}


/* ===== Mobile Overrides (<= 900px) ====================================== */
@media (max-width: 900px){

  /* 1) Snap deaktivieren */
  html{ scroll-snap-type: none !important; }

  /* 2) Slides nicht mehr 100vh hoch, sondern normaler Dokumentfluss */
  .slide{
    height: auto !important;
    min-height: auto !important;
    display: block !important;
    padding-top: var(--header-h) !important;
    overflow: visible !important;
  }

  /* Intro: statt Vollbild, nur 40vh – wirkt leichter am Handy
     (wenn du full willst: entferne die nächste Regel) */
  #intro.slide{
    height: calc(100vh - var(--header-h)) !important;
    padding-top: var(--header-h) !important;   /* Bild beginnt unter der fixen Toolbar */
  }

  #intro .hero-img{ object-position: center; }

  /* 3) About-Slides (Für was steht / Ursprung) – feste min-height raus */
  #about-start .about-grid,
  #ursprung-start .about-grid{
    min-height: auto !important;
  }

  /* 4) Grids 1-spaltig */
  .about-grid{ grid-template-columns: 1fr !important; gap: 18px; }
  
  .form-grid.stealth{ grid-template-columns: 1fr !important; }
  .r-grid{ grid-template-columns: 1fr !important; }

  
  /* 6) Footer im letzten Slide: Platz davor, damit nichts anstößt */
  #community .community-wrap{ padding-bottom: 14px; }
}

/* Moderne Viewport-Units für Mobile-Browser (Adressenleiste/Notch) */
@media (max-width: 900px) and (hover:none){
  @supports (height: 100svh){
    #intro.slide{
      height: calc(100svh - var(--header-h)) !important;
      padding-top: var(--header-h) !important;
    }
  }
  @supports (height: 100dvh){
    /* Android / Chrome Variationen */
    #intro.slide{
      height: calc(100dvh - var(--header-h)) !important;
      padding-top: var(--header-h) !important;
    }
  }
}

/* ===== Burger Menu (mobil) ============================================== */
.nav-burger{
  display:none;
  background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.2);
  width:40px; height:40px; border-radius:8px; font-size:20px; cursor:pointer;
}
@media (max-width: 900px){
  .nav-burger{ display:block; }
  /* Offcanvas: Nav als Seitenpanel */
  .nav{
    position: fixed; top: var(--header-h); right: 0; bottom: 0;
    width: min(78vw, 360px); background:#07383a; padding:16px; gap:14px;
    transform: translateX(100%); transition: transform .2s ease;
    display:flex; flex-direction:column; align-items:flex-start; z-index:95;
  }
  .nav a, .nav-root{ color:#eaf4f3; }
  body.nav-open .nav{ transform: translateX(0); }
  /* Maske hinter dem Panel */
  .nav-mask{
    position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:90;
  }
  body.nav-open .nav-mask{ display:block; }
  body:not(.nav-open) .nav-mask{ display:none; }
  /* Dropdown "Über SC" mobil: auf Tap öffnen */
  .nav-drop{ position:static; display:none; padding:6px 0; border:0; background:none; }
  .nav-group:focus-within .nav-drop,
  .nav-group:hover .nav-drop{ display:block; }
}

/* ==== Mobile Spacing & Borders ========================================= */

/* 1) Skala (zentrales Abstands-Set) */
:root{
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
}

/* 2) Stacks: vertikale Abstände zwischen Kindern (kein margin-collapsing) */
.stack { display:flex; flex-direction:column; gap: var(--s-3); }
.stack-lg { gap: var(--s-6); }
.stack-sm { gap: var(--s-2); }

/* 3) Section-Padding (horizontal an Kanten, vertikal je Kontext) */
.section-pad { padding-left: var(--edge); padding-right: var(--edge); }
.section-pad-y { padding-top: var(--s-6); padding-bottom: var(--s-6); }

/* 4) Dezente Divider/Linien */
.hr-soft { height:1px; background:rgba(0,0,0,.08); border:0; }

/* 5) Karten/Boxen in hell-petrol, ohne „Comic-Optik“ */
.card-soft{
  background: var(--petrol-100);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  padding: var(--s-4);
}

/* 6) Basis-Typo-Margins für mobile Lesbarkeit */
@media (max-width: 900px){
  h1,h2,h3{ line-height:1.2; margin: var(--s-3) 0 var(--s-2); }
  p{ margin:0; } /* Abstände steuern wir über .stack */
  .btn, .btn.primary, .btn-primary{ margin-top: var(--s-3); }
  /* große Bilder strecken, aber begrenzen */
  .about-media img, .recipe-media img{ width:100%; height:auto; max-height: 52vh; object-fit: cover; }
}

/* 7) Form-Felder (Schnellhilfe) luftiger */
.form-grid.stealth label span{ margin-bottom: var(--s-1); }
.form-grid.stealth select, .form-grid.stealth input{ padding: 12px 14px; }


/* 9) Ergebnis-Slide (Schnellhilfe) mittig, mit Karte & Trennern */
#schnellhilfe-result .result-wrap{ width:min(1100px,100%); }
#schnellhilfe-result .assist-out{ background: var(--petrol-100); border:1px solid rgba(0,0,0,.08); border-radius:10px; padding: var(--s-5); }
#schnellhilfe-result .assist-cols{ display:grid; gap: var(--s-4); grid-template-columns: repeat(2, minmax(260px,1fr)); }
@media (max-width:900px){ #schnellhilfe-result .assist-cols{ grid-template-columns:1fr; } }

/* 10) Globale Mobile-Overrides (Slides scroll statt snap – hast du schon;
   hier nur einheitlich ergänzen, falls noch nicht vorhanden) */
@media (max-width: 900px){
  html{ scroll-snap-type: none !important; }
  .slide{
    height: auto !important;
    min-height: auto !important;
    display: block !important;
    padding-top: var(--header-h) !important;
    overflow: visible !important;
  }
  .about-grid{ grid-template-columns:1fr !important; gap: var(--s-4); }
  .form-grid.stealth, .r-grid{ grid-template-columns: 1fr !important; }
  /* Etwas Luft über jedem großen Abschnitt */
  .section-pad-y{ padding-top: var(--s-8); padding-bottom: var(--s-8); }
}

/*  Abstände  Dann kannst du z. B. einem Button class="btn primary mt-3" geben.*/
.mt-2{ margin-top: var(--s-2) !important; }
.mt-3{ margin-top: var(--s-3) !important; }
.mt-4{ margin-top: var(--s-4) !important; }
.mb-2{ margin-bottom: var(--s-2) !important; }
.mb-3{ margin-bottom: var(--s-3) !important; }
.mb-4{ margin-bottom: var(--s-4) !important; }

/*Frage */
.about-media img{ max-height: 100vh; }






:root{ --comm-top-gap: 130px; }  /* Desktop-Abstand zum Header */
@media (min-width: 901px){
  #community .community-wrap{ margin-top: var(--comm-top-gap); }
}


/* Hero: Bildcontainer füllt den Slide, egal ob img oder picture */
.slide--hero{ position: relative; }
.slide--hero picture,
.slide--hero .hero-img{
  position: absolute;
  inset: 0;                /* top:0; right:0; bottom:0; left:0; */
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 900px){
  .slide--hero picture,
  .slide--hero .hero-img{
    object-position: center center;  /* z. B. 'center 30%' oder '50% 70%' */
  }
}



/* Schnellhilfe – Ergebnis-Container unter dem Formular */
.assist-result{ margin-top: 14px; }
.assist-result .assist-out{
  max-width: 1200px;     /* auf Desktop schön breit */
  margin: 0 auto;        /* zentriert */
}

@media (max-width: 900px){
  .assist-result{ margin-bottom: 24px; }
}


/* Desktop: Ergebnisbox fixe Höhe + eigener Scroll-Inhalt */
:root{ --assist-out-h: 1000px; }   /* hier kannst du die Höhe jederzeit anpassen */

@media (min-width: 901px){
  .assist-result .assist-out{
    height: var(--assist-out-h);
    overflow: auto;                         /* Inhalt scrollt innerhalb der Box */
    padding: 18px 20px;
    border-radius: 12px;
    background: var(--petrol-100);
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 8px 22px rgba(0,0,0,.08);
  }
  .assist-result .assist-cols{
    grid-template-columns: 1fr 1fr;         /* bleibt übersichtlich */
    gap: 16px;
  }
}

/* Mobile bleibt flexibel (keine fixe Höhe) */
@media (max-width: 900px){
  .assist-result .assist-out{
    height: auto; max-height: none; overflow: visible;
    padding: 14px; border-radius: 10px;
  }
  .assist-result .assist-cols{ grid-template-columns: 1fr; gap: 12px; }
}


/* =========================
   CORE 4 – GRID LAYOUT v2
   ========================= */

/* Section allgemein */
#core4.core4 {
  /* Slide soll wieder gefangen werden */
  scroll-snap-align: start;
  /* gleichmäßige Luft */
  padding: 72px 20px;
}

.core4__wrap{
  width: min(1400px, 100%);
  margin: 0 auto;
  text-align: center;
}

/* Headline & Intro */
.core4__title{ margin:0 0 10px; font-size: clamp(28px, 4vw, 44px); }
.core4__intro{ 
  margin: 6px auto 28px; 
  max-width: 900px; 
  color: ; 
  line-height: 1.55; 
}

/* GRID – 12er Desktop, 6er Tablet, 1er Mobile */
.core4__grid{
  display:grid;
  gap: 18px;
  grid-template-columns: repeat(12, minmax(0,1fr));    /* Desktop */
}

/* Karten – Grundstil */
.core4__card{
  display:block; text-decoration:none; color:var(--text);
  background:#ffffff; border:1px solid rgba(0,0,0,.06);
  border-radius:12px; padding:20px;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  text-align:center; 
}

/* Icon oben nur bei den Top-4 */
.core4__icon{ width:56px; height:56px; border-radius:50%;
  background:rgba(0,0,0,.05); border:1px solid rgba(0,0,0,.08);
  display:grid; place-items:center; margin:0 auto 12px;
}
.core4__icon img{ width:56px; height:56px; object-fit:contain; }

/* Typo in den Karten */
.core4__card h3{ margin:0 0 15px; font-size:20px; font-weight:900; }
.core4__card h4{ margin:0 0 15px; font-size:20px; font-weight:800; }

.core4__punch{ margin:0 0 6px; font-weight:800; color:#0b3f3d; }
.core4__desc{ margin:0;  color:#4c6a65; line-height:1.55; }

/* Pastell-Varianten (nur Top-4; +2 bleiben weiß) */
.core4__card--kauen{       background:#fff6e5; }
.core4__card--ernaehrung{  background:#eaf6ff; }
.core4__card--mikrobiom{   background:#fceeff; }
.core4__card--bewegung{    background:#e6f7f1; }

/* Desktop-Positionierung
   - Top-4: je 3 Spalten = 4 nebeneinander (12 Spalten)
   - +2: je 6 Spalten = 2 nebeneinander über gesamte Breite */
@media (min-width: 1200px){
  .core4__grid > .core4__card--kauen       { grid-column: span 3; }
  .core4__grid > .core4__card--ernaehrung  { grid-column: span 3; }
  .core4__grid > .core4__card--mikrobiom   { grid-column: span 3; }
  .core4__grid > .core4__card--bewegung    { grid-column: span 3; }

  .core4__grid > .core4__card--stress      { grid-column: span 6; }
  .core4__grid > .core4__card--regen       { grid-column: span 6; }
}

/* Tablet: 6 Spalten
   - Top-4: je 3 Spalten → 2/Zeile
   - +2: je 6 Spalten → volle Breite je Zeile */
@media (min-width: 901px) and (max-width: 1199px){
  .core4__grid{
    grid-template-columns: repeat(6, minmax(0,1fr));
  }
  .core4__grid > .core4__card--kauen,
  .core4__grid > .core4__card--ernaehrung,
  .core4__grid > .core4__card--mikrobiom,
  .core4__grid > .core4__card--bewegung    { grid-column: span 3; }

  .core4__grid > .core4__card--stress,
  .core4__grid > .core4__card--regen       { grid-column: span 6; }
}

/* Mobile: 1 Spalte; Abstand oben/unten */
@media (max-width: 900px){
  #core4.core4{ padding-top: 48px; padding-bottom: 32px; }
  .core4__grid{
    grid-template-columns: 1fr;
  }
  .core4__card{ margin-bottom: 4px; }
}

@media (max-width: 900px){
  #core4.core4 .core4__wrap::before{
    content:"";
    display:block;
    height:40px;           /* Abstand oben */
    background:var(--petrol-950);  /* gleiche Hintergrundfarbe wie Section */
  }
}


/* Kauen Unterseite */
.core-subsection {
  background-color: #fff6e5; /* Pastell Kauen */
  padding: 80px 20px;
  text-align: center;
}

.kauen-wrap {
  max-width: 1200px;
  margin: 0 auto;
}

.kauen-intro {
  max-width: 700px;
  margin: 0 auto 40px;
  font-size: 1.1rem;
  line-height: 1.5;
}

.kauen-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.kauen-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  text-align: center;
}

.kauen-card h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.kauen-card .punch {
  font-weight: 600;
  margin-bottom: 6px;
  color: #000;
}

.kauen-card .desc {
  font-size: 0.95rem;
  color: #4c6a65;
  line-height: 1.55;
}

.kauen-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}

.btn-primary {
  background: #faca30;
  color: #000;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
}

.btn secondary {
  background: #e0e0e0;
  color: #000;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
}

@media (max-width: 768px) {
  .kauen-grid {
    grid-template-columns: 1fr;
  }
}



/*---------------------------------Frame*/

/* Desktop: zentraler Frame, max 1600px breit */
.app-frame{
  width: min(1600px, 100%);
  margin: 0 auto;
  padding: clamp(16px, 3vw, 28px);
}

/* Optional „Canvas“-Look (leichter Hintergrund hinter dem Content) */
@media (min-width: 1200px){
  .app-frame{
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(2px);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
  }
}

/* Mobile: full width, klare Ränder durch padding */
@media (max-width:900px){
  .app-frame{ padding: 16px; box-shadow:none; border-radius:0; background:transparent; }
}
.assist-out .nutri-cards{ display:grid; gap:10px; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); }
.assist-out .nutri-card{ background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:10px; padding:10px 12px; }
.assist-out .nutri-card h5{ margin:0 0 4px; font-size:14px; }
.assist-out .nutri-card p{ margin:0; color:#4c6a65; line-height:1.5; font-size:13.5px; }

.assist-out .focus-cards{ display:grid; gap:10px; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); }
.assist-out .focus-card{ background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:10px; padding:10px 12px; }
.assist-out .focus-card h5{ margin:0 0 4px; font-size:14px; }
.assist-out .Focus-card p{ margin:0; color:#4c6a65; line-height:1.5; font-size:13.5px; }


/* Karten-Bild sauber gerundet */
.r-card figure{
  height:220px; margin:0;
  border-bottom:1px solid rgba(0,0,0,.06);
  overflow:hidden;                 /* verhindert „Kanten“ */
}
.r-card img{
  width:100%; height:100%; object-fit:cover; display:block;
  border-radius:0;                 /* Bild folgt figure-Rundung */
}

/* Suchseite – Katalog */
.r-catalog{
  display:grid;
  gap:16px;
  grid-template-columns: repeat(3, minmax(260px,1fr));  /* 3 Spalten Desktop */
  margin-top:16px;
}
@media (max-width:1100px){
  .r-catalog{ grid-template-columns: repeat(2,minmax(260px,1fr)); }
}
@media (max-width:640px){
  .r-catalog{ grid-template-columns: 1fr; }
}

/* Luft oben, damit nichts am Header klebt */
.subpage .wrap{
  padding-top: clamp(120px, 8vh, 22px);
}

/* Filterblock optisch „Karte“ */
.recipes-form{
  background: rgba(255,255,255,.26);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  padding: 12px;
  backdrop-filter: blur(2px);
}
.recipes-head{ text-align:center; margin: 12px 0; }
/* Breitere Karten in der Rail (Desktop) */
@media (min-width: 1100px){
  .r-rail .r-card{ min-width: clamp(320px, 30vw, 420px); }
}

/* Rahmen der Seite mit Luft */
.subpage .wrap{
  width: min(1280px, 100%);
  margin: 0 auto;
  padding: clamp(14px, 2vh, 24px) var(--edge,24px) 24px;
  box-sizing: border-box;
}

/* Filter-Karte */
.recipes-form{
  margin: 10px auto 14px;
  background: rgba(255,255,255,.26);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  padding: 12px;
  backdrop-filter: blur(2px);
}

/* Katalog-Grid – DESKTOP 3, TABLET 2, MOBILE 1 (erzwingen) */
.subpage .wrap #rCatalog.r-catalog{
  display: grid !important;
  gap: 16px !important;
  grid-template-columns: repeat(3, minmax(280px,1fr)) !important; /* 3 Spalten Desktop */
  margin-top: 16px !important;
}
@media (max-width: 1023px){
  .subpage .wrap #rCatalog.r-catalog{
    grid-template-columns: repeat(2, minmax(260px,1fr)) !important; /* 2 Spalten Tablet */
  }
}
@media (max-width: 640px){
  .subpage .wrap #rCatalog.r-catalog{
    grid-template-columns: 1fr !important;                           /* 1 Spalte Mobile */
  }
}

/* Mobile: Katalog unter Suchblock sauber zentriert */
@media (max-width: 640px){
  .r-catalog{
    grid-template-columns: minmax(280px, 1fr);  /* mindestens 280px, sonst 1fr */
    justify-content: center;                    /* grid-Container mittig */
  }
  .r-catalog .r-card{
    max-width: 520px;                           /* optische Grenze */
    margin-inline: auto;                        /* Card selbst mittig */
  }
}


/* ===== STAY CHEWY – REZEPT-DETAIL (NEU) ===== */

.rc-wrap{
  width:min(1320px,100%);
  margin:0 auto;
  padding: clamp(16px,2vh,26px) var(--edge,24px) 18px;
  box-sizing:border-box;
}

/* Kopf: Titel, Meta und EIN Bild darunter */
.rc-head{
  max-width: 980px;
  margin: 0 auto 14px;
  text-align:left;
}
.rc-title{ margin:0 0 8px; font-size:clamp(28px,5vw,46px); }
.rc-sub{ margin:2px 0 10px; color:#cfe9e6; }
.rc-meta{
  list-style:none; padding:0; margin:6px 0 12px;
  display:flex; gap:8px; flex-wrap:wrap;
}
.rc-meta .pill{
  background:rgba(255,255,255,.9);
  border:1px solid rgba(0,0,0,.1);
  color:#07383a; border-radius:999px; padding:6px 10px;
}

/* Bild (ein Bild, klickbar) */
.rc-image{
  max-width: 980px; margin: 0 auto 12px;
  border:1px solid rgba(0,0,0,.08); border-radius:12px; overflow:hidden; background:#fff;
}
.rc-image img{ width:100%; height:auto; display:block; cursor:pointer; }

/* Personalisierung – volle Breite darunter */
.rc-personalize{
  max-width:980px; margin: 0 auto 18px;
  background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:12px; padding:12px;
  color:#07383a;
}
.rc-personalize .grid{
  display:grid; gap:10px; grid-template-columns: repeat(2, minmax(200px,1fr));
}
@media (max-width:900px){ .rc-personalize .grid{ grid-template-columns:1fr; } }
.rc-personalize label{ display:flex; flex-direction:column; gap:6px; }
.rc-personalize select, .rc-personalize input[type="text"]{
  padding:10px 12px; border:1px solid rgba(0,0,0,.18); border-radius:10px; background:#fff;
}
.rc-personalize .btn-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
.rc-personalize .btn{ padding:8px 12px; border-radius:10px; border:1px solid rgba(0,0,0,.15); background:#fff; cursor:pointer }
.rc-personalize .btn.primary{ background:#FACA30; border-color:#e1b72a; font-weight:800 }
.rc-note{ background:#f5f7f6; border:1px solid rgba(0,0,0,.08); border-radius:10px; padding:10px; margin-top:10px; display:none; }

/* Body: Zutaten / Schritte – mittig */
.rc-body{
  display:grid; gap: clamp(18px,3vw,30px);
  grid-template-columns: minmax(300px,440px) 1fr;
  justify-content:center;
}
@media (max-width:900px){
  .rc-body{ grid-template-columns: 1fr; justify-items:center; }
  .rc-body .rc-box{ width:min(620px,100%); }
}
.rc-box{
  background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:12px; padding:14px;
}
.rc-h{ margin:0 0 8px; font-size:clamp(20px,3vw,26px) }

.rc-serv{ display:flex; gap:10px; align-items:center; margin-bottom:8px }
.rc-serv input{ width:88px; text-align:center; padding:10px 12px; border-radius:10px; border:1px solid rgba(0,0,0,.18); background:rgba(255,255,255,.06) }
.rc-ing{ margin:8px 0 12px; padding-left:18px; }
.rc-ing li{ margin:4px 0; line-height:1.6 }

.rc-step{ display:grid; grid-template-columns:56px 1fr; gap:12px; padding:12px; border-radius:12px; background:#fff; border:1px solid rgba(0,0,0,.08); margin-bottom:10px }
.rc-num{ width:56px; height:56px; border-radius:50%; display:grid; place-items:center; font-weight:900; background:rgba(0,0,0,.08) }

.rc-toggle{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:8px }
.rc-toggle .btn{ padding:8px 12px; border-radius:10px; border:1px solid rgba(0,0,0,.15); background:#fff; cursor:pointer }
.rc-toggle .btn.active{ background:#f3f4f6; font-weight:800 }

/* Modal-Galerie */
.rc-modal { position:fixed; inset:0; background:rgba(5,43,45,.92); display:none; align-items:center; justify-content:center; z-index:10000; }
.rc-modal.open { display:flex; }
.rc-stage { max-width:92vw; max-height:92vh; display:grid; place-items:center; }
.rc-stage img { max-width:92vw; max-height:92vh; object-fit:contain; display:block; border-radius:8px; box-shadow:0 20px 50px rgba(0,0,0,.4) }
.rc-close, .rc-prev, .rc-next{
  position:fixed; width:44px; height:44px; border:0; border-radius:8px; cursor:pointer;
  background:#0b5456; color:#eaf4f3; display:grid; place-items:center; font-size:24px;
}
.rc-close { top:12px; right:12px; }
.rc-prev  { left:12px;  top:50%; transform:translateY(-50%); }
.rc-next  { right:12px; top:50%; transform:translateY(-50%); }
.rc-prev::before  { content:"‹"; font-size:32px; line-height:1; }
.rc-next::before  { content:"›"; font-size:32px; line-height:1; }
.rc-close::before { content:"×"; font-size:28px; line-height:1; }

/* Disclaimer klein */
.rc-disclaimer{ text-align:center; opacity:.7; font-size:12.5px; max-width:680px; margin:6px auto 0; }


/* Hauptbild begrenzen */
.rc-image img {
  width: 100%;
  height: auto;
  max-height: 420px;   /* << Höhe begrenzen */
  object-fit: cover;   /* füllt den Bereich sauber */
  border-radius: 12px;
}

/* Disclaimer schlanker */
.rc-disclaimer {
  text-align: center;
  opacity: .7;
  font-size: 12px;
  line-height: 1.4;
  max-width: 560px;
  margin: 8px auto 0;
  padding: 4px 8px;   /* weniger "Blockfläche" */
}

/* Mobile – seitliche Abstände für Boxen */
@media (max-width: 900px) {
  .rc-box {
    margin: 0 12px 16px;   /* Abstand links/rechts und unten */
    width: auto;
  }
}

/* Desktop – Body-Boxen mit Rand */
@media (min-width: 901px) {
  .rc-body {
    padding: 0 20px;       /* Innenrand rechts/links */
  }
  .rc-box {
    border: 1px solid rgba(0,0,0,.12); /* sichtbarer Rahmen */
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
  }
}
/* ===== Fix: Mobile-Boxen wirklich mittig ===== */
@media (max-width: 900px){
  .rc-body{
    grid-template-columns: 1fr !important;
    justify-items: center !important;
  }
  .rc-body > .rc-box{
    width: min(620px, 100%) !important;
    margin-inline: 12px !important;   /* Seitenabstand sichtbar */
  }
}

/* ===== Fix: Disclaimer-Panel klein & ohne „große Fläche“ ===== */
.subpage .panel.panel--ink:last-of-type{
  padding: 8px 0 10px !important;
  background: transparent !important;
}
.subpage .panel.panel--ink:last-of-type .rc-wrap{
  width: min(760px, 100%) !important;
  padding: 0 !important;
}
.rc-disclaimer{
  margin: 6px auto 0 !important;
  max-width: 560px !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  opacity: .7 !important;
  text-align: center !important;
}

/* ===== Modal-Galerie (keine Zoom-Geste, nur Galerie) ===== */
.rc-modal { position: fixed; inset: 0; background: rgba(5,43,45,.92); 
            display: none; align-items: center; justify-content: center; z-index: 10000; }
.rc-modal.open { display: flex; }
.rc-stage { max-width: 92vw; max-height: 92vh; display: grid; place-items:center; }
.rc-stage img { max-width:92vw; max-height:92vh; object-fit:contain; display:block; border-radius:8px; box-shadow:0 20px 50px rgba(0,0,0,.4) }
.rc-close, .rc-prev, .rc-next{
  position: fixed; width: 44px; height: 44px; border: 0; border-radius: 8px; cursor: pointer;
  background:#0b5456; color:#eaf4f3; display:grid; place-items:center; font-size:24px;
}
.rc-close { top:12px; right:12px; }
.rc-prev  { left:12px; top:50%; transform: translateY(-50%); }
.rc-next  { right:12px; top:50%; transform: translateY(-50%); }
.rc-prev::before  { content:"‹"; font-size:32px; line-height:1; }
.rc-next::before  { content:"›"; font-size:32px; line-height:1; }
.rc-close::before { content:"×"; font-size:28px; line-height:1; }

/* Thumbs – falls du sie nochmal brauchst (gelber Rahmen aktiv) */
.thumbs{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 6px; }
.thumb{ width:72px; height:72px; border-radius:8px; overflow:hidden; border:1px solid rgba(0,0,0,.12); padding:0; cursor:pointer; background:#fff; display:block; }
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.thumb.active{ outline:2px solid #FACA30; outline-offset:2px; }

.gallery-main {
  text-align: center;
  margin-bottom: 1rem;
}
.gallery-main img {
  max-width: 100%;
  border-radius: 8px;
  cursor: pointer;
}

.gallery-thumbs {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}
.gallery-thumbs img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.8;
  transition: 0.3s;
}
.gallery-thumbs img:hover {
  opacity: 1;
}

/* Lightbox */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.lightbox img {
  max-width: 80%;
  max-height: 80%;
  border-radius: 8px;
}
.lightbox .close,
.lightbox .prev,
.lightbox .next {
  position: absolute;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  user-select: none;
}
.lightbox .close { top: 20px; right: 30px; }
.lightbox .prev { left: 20px; }
.lightbox .next { right: 20px; }


/* ===== Stay Chewy – Mobile spacing fix (final) ===== */
/* Ziel: auf Mobile links/rechts Luft an Bild, Personalisierung, Zutaten- & Schritte-Boxen */

@media (max-width: 900px){

  /* 1) Außenrand für den ganzen Detailbereich erhöhen */
  .rc-wrap{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* 2) Alle „großen“ Elemente kriegen Seitabstand + passen in den Viewport */
  .rc-image,
  .rc-personalize,
  .rc-body .rc-box{
    margin-left: 12px !important;
    margin-right: 12px !important;
    width: calc(100% - 24px) !important;  /* kein Überlauf, kein Randkleben */
  }

  /* 3) Abstand zwischen den Boxen etwas kompakter */
  .rc-body{
    gap: 14px !important;
    justify-items: center !important;      /* mittig halten */
  }

  /* 4) Bild bleibt sauber im Rahmen */
  .rc-image img{
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
}

/* Extra-schmal (kleine Phones): minimal noch kompakter */
@media (max-width: 360px){
  .rc-wrap{ padding-left: 10px !important; padding-right: 10px !important; }
  .rc-image,
  .rc-personalize,
  .rc-body .rc-box{
    margin-left: 10px !important;
    margin-right: 10px !important;
    width: calc(100% - 20px) !important;
  }
}
/* ===== Mobile: Head-Text zentriert ===== */
@media (max-width: 900px){
  .rc-head{
    max-width: 980px;         /* bleibt sauber begrenzt */
    margin: 0 auto 14px;      /* mittig */
    text-align: center !important;
  }
  .rc-meta{
    justify-content: center !important;   /* Pills mittig */
  }
}

@media (max-width: 900px){
  .rc-image{ margin-bottom: 10px !important; }
}

/* Language switch */
.lang-switch { display:flex; gap:8px; align-items:center; margin-left: 8px; }
.lang-btn {
  padding:6px 10px; border:1px solid rgba(0,0,0,.15); border-radius:8px;
  background:#fff; cursor:pointer; font-weight:700;
}
.lang-btn.active { background:#FACA30; border-color:#e1b72a; }




/* Blog Übersicht */
.blog-header {
  position: relative;
  text-align: center;
  background: var(--light-petrol);
  color: #fff;
}
.blog-header img {
  width: 100%;
  max-height: 350px;
  object-fit: cover;
}
.blog-header-text {
  padding: 2rem;
}

.blog-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
}
.blog-card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
}
.blog-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.blog-card-content {
  padding: 1rem;
}

/* Einzelner Blog-Post */
.blog-post {
  background: var(--light-petrol);
  padding: 2rem 0;
}
.blog-post-header {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.blog-post-header img {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: 8px;
}
.blog-meta {
  margin: 0.5rem 0;
  color: #666;
}
.blog-content {
  max-width: 900px;
  margin: 2rem auto;
  background: #fff;
  padding: 2rem;
  border-radius: 10px;
  line-height: 1.6;
}
.blog-content img {
  width: 100%;
  border-radius: 8px;
  margin: 1rem 0;
}

/* ===== Blog – altes Layout in neuem System ===== */

/* Seitenhintergrund hellpetrol */
.blog-page{
  background: linear-gradient(180deg, #e9f5f3 0%, #d9efeb 100%);
  color:#07383a;
}

/* max Breite für Inhalte */
.wrap{ width:min(1200px,100%); margin:0 auto; }

/* HERO wie früher: großes Bild, Text links-unten, Overlay */
.blog-hero-legacy{ position:relative; }
.blog-hero-legacy .hero-img{ margin:0; position:relative; overflow:hidden; }
.blog-hero-legacy .hero-img img{
  width:100%; max-height:420px; object-fit:cover; display:block;
}
.blog-hero-legacy .hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg,rgba(0,0,0,0.0) 40%, rgba(0,0,0,0.45) 100%);
}
.blog-hero-legacy .hero-text{
  position:absolute; left:0; right:0; bottom:16px; color:#fff;
}
.blog-hero-legacy .hero-text h1{
  margin:0 0 6px; font-size: clamp(28px,4.6vw,40px); font-weight:900;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.blog-hero-legacy .hero-text p{
  margin:0; opacity:.95; font-size: clamp(16px,2.4vw,18px);
}

/* GRID – 2 Spalten wie vorher, mit „luftigen“ Karten */
.blog-container{ padding: 26px 14px 34px; }
.legacy-grid{
  display:grid; gap: 18px;
  grid-template-columns: repeat(2, minmax(300px,1fr));
}
@media(max-width: 900px){
  .legacy-grid{ grid-template-columns: 1fr; }
}

.blog-card{
  background:#fff; border-radius:12px; overflow:hidden;
  border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  display:block; color:inherit; text-decoration:none;
  transition: transform .2s ease;
}
.blog-card:hover{ transform: translateY(-2px); }

.blog-card figure{ height:220px; margin:0; overflow:hidden; }
.blog-card img{ width:100%; height:100%; object-fit:cover; display:block; }
.blog-card .card-body{ padding: 10px 12px; }
.blog-card .card-body h3{ margin: 6px 0 4px; font-weight:900; }
.blog-card .card-body p{ margin:0; opacity:.85; }

.meta-bar{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  font-size:13px; opacity:.78; margin-bottom:6px;
}
.meta-bar > span{ background:#f2f6f5; border:1px solid rgba(0,0,0,.06);
  border-radius:999px; padding:3px 8px; }


/* ===== Blog – alter Look (hellpetrol, Hero, Grid) ===== */

/* Seitenhintergrund hellpetrol */
.blog-page{
  background: linear-gradient(180deg, #e9f5f3 0%, #d9efeb 100%);
  color:#07383a;
}

/* max. Breite für Inhalte */
.wrap{ width:min(1200px,100%); margin:0 auto; }

/* HERO: Bild mit Overlay + Text links unten */
.blog-hero-legacy{ position:relative; }
.blog-hero-legacy .hero-img{ margin:0; position:relative; overflow:hidden; }
.blog-hero-legacy .hero-img img{
  width:100%; max-height:420px; object-fit:cover; display:block;
}
.blog-hero-legacy .hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg,rgba(0,0,0,0.05) 35%, rgba(0,0,0,0.55) 100%);
}
.blog-hero-legacy .hero-text{
  position:absolute; left:0; right:0; bottom:18px; color:#fff;
}
.blog-hero-legacy .hero-text h1{
  margin:0 0 6px; font-size: clamp(28px,4.8vw,40px); font-weight:900;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.blog-hero-legacy .hero-text p{ margin:0; opacity:.95; font-size: clamp(16px,2.4vw,18px); }

/* container */
.blog-container{ padding: 26px 14px 40px; }

/* zweispaltiges Grid wie vorher */
.legacy-grid{
  display:grid; gap: 18px;
  grid-template-columns: repeat(2, minmax(300px,1fr));
}
@media(max-width: 900px){
  .legacy-grid{ grid-template-columns: 1fr; }
}

/* Karten */
.blog-card{
  background:#fff; border-radius:12px; overflow:hidden;
  border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  display:block; color:inherit; text-decoration:none;
  transition: transform .2s ease;
}
.blog-card:hover{ transform: translateY(-2px); }

.blog-card figure{ height:220px; margin:0; overflow:hidden; }
.blog-card img{ width:100%; height:100%; object-fit:cover; display:block; }
.blog-card .card-body{ padding: 10px 12px; }
.blog-card .card-body h3{ margin: 6px 0 4px; font-weight:900; }
.blog-card .card-body p{ margin:0; opacity:.85; }

/* Meta-Zeile */
.meta-bar{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  font-size:13px; opacity:.78; margin-bottom:6px;
}
.meta-bar > span{
  background:#f2f6f5; border:1px solid rgba(0,0,0,.06);
  border-radius:999px; padding:3px 8px;
}
/* Einheitlicher Verlauf nur auf Body, Abschnitte transparent */
.blog-page{
  /* weicher Verlauf ohne sichtbare Kante */
  background: linear-gradient(180deg, #e9f5f3 0%, #dbeeea 100%) fixed;
}

.blog-page section,
.blog-page main,
.blog-page .panel,
.blog-page .blog-container,
.blog-page .blog-hero-legacy {
  background: transparent !important;
}

/* falls irgendwo alte Hintergründe gesetzt waren */
.blog-page .panel.subslide--auto { background: transparent !important; }
/* ===== Blog Post Template ===== */
.bp-hero { position:relative; color:#fff; }
.bp-hero-img-wrap { position:relative; overflow:hidden; }
.bp-hero-img-wrap img{ width:100%; max-height:420px; object-fit:cover; display:block; }
.bp-overlay{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.05) 35%, rgba(0,0,0,.55) 100%); }
.bp-hero-text{ position:absolute; left:0; right:0; bottom:18px; }
.bp-hero-text h1{ margin:6px 0 4px; font-size: clamp(28px,4.8vw,40px); font-weight:900; text-shadow:0 2px 8px rgba(0,0,0,.35); }
.bp-sub{ margin:0; opacity:.95; font-size: clamp(16px,2.4vw,18px); }

.bp-meta{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.bp-meta span{ background:rgba(255,255,255,.92); color:#07383a; border-radius:999px; padding:3px 8px; font-size:13px; }

.bp-container{ display:grid; gap:20px; grid-template-columns: minmax(0,1fr) 340px; padding: 20px 14px 40px; }
@media(max-width: 960px){ .bp-container{ grid-template-columns: 1fr; } }

.bp-content{
  background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:12px; padding:22px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  line-height:1.65; font-size:17px;
}

.bp-content h2{ margin: 22px 0 8px; }
.bp-content p{ margin: 10px 0; }
.bp-content ul{ padding-left: 18px; margin: 10px 0; }
.bp-content ol{ padding-left: 20px; margin: 10px 0; }
.bp-content img{ width:100%; border-radius:10px; margin:12px 0; display:block; }

/* Sidebar */
.bp-sidebar{ display:flex; flex-direction:column; gap:14px; }
.sb-card{ background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:12px; padding:14px;
          box-shadow:0 6px 18px rgba(0,0,0,.06); }
.sb-card h3{ margin:0 0 8px; }
.sb-avatar{ width:84px; height:84px; object-fit:cover; border-radius:50%; display:block; margin-bottom:8px; }
.sb-list{ margin:0; padding-left:16px; }
.sb-list li{ margin:6px 0; }
.sb-cta .btn{ display:inline-block; margin-top:8px; }

/* Blog Grid Cards */
#blogGrid .blog-card{
  display:block; background:#fff; border-radius:12px;
  overflow:hidden; box-shadow:0 4px 12px rgba(0,0,0,.08);
  margin-bottom:20px; transition: transform .2s;
}
#blogGrid .blog-card:hover{ transform: translateY(-3px); }
#blogGrid figure{ margin:0; }
#blogGrid img{ width:100%; display:block; object-fit:cover; max-height:220px; }
#blogGrid .card-body{ padding:14px; }
#blogGrid .card-body h3{ margin:0 0 6px; font-size:20px; }
#blogGrid .card-body p{ margin:0; font-size:15px; }

/* Rezept-Cards im Blogpost */
.related-block{ margin-top:30px; }
.related-block h2{ margin-bottom:14px; }
.recipe-cards{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.recipe-cards .card{ background:#fff; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,.08); overflow:hidden; }
.recipe-cards img{ width:100%; height:160px; object-fit:cover; }
.recipe-cards .card-body{ padding:12px; }

/* Buttons unterhalb */
.blog-nav-btns{ margin-top:20px; display:flex; gap:12px; flex-wrap:wrap; }
.blog-nav-btns .btn{ padding:8px 16px; border-radius:8px; background:#faca30; color:#07383a; text-decoration:none; font-weight:600; }
.sidebar .recipe-card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.sidebar .recipe-card img {
  width: 100%;
  display: block;
}

.sidebar .recipe-card-body {
  padding: 0.5rem 0.75rem;
}

.sidebar .recipe-card-body h4 {
  margin: 0;
  font-size: 0.9rem;
}

.sidebar .recipe-card-body p {
  margin: 0.25rem 0 0;
  font-size: 0.8rem;
  color: #666;
}
.sidebar-card {
  display: block;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  margin-bottom: 1rem;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

.sidebar-card figure {
  margin: 0;
}

.sidebar-card img {
  width: 100%;
  display: block;
  object-fit: cover;
}

.sidebar-card .card-body {
  padding: 0.5rem 0.75rem;
}

.sidebar-card h4 {
  font-size: 1rem;
  margin: 0 0 0.25rem;
}




/* Einheitliche Faktencards */
.fact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.fact-card {
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.2s ease;
}
.fact-card:hover {
  transform: translateY(-3px);
}

.fact-card h4 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: var(--petrol-900);
}

.fact-card p {
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--text);
}

/* Buttons nebeneinander */
.btn row {
  display: flex;
  justify-content: center;
  gap: 1rem;          /* Abstand zwischen den Buttons */
      /* falls wenig Platz: Umbruch */
  margin: 1.5rem 0;   /* Abstand nach oben/unten */
}

.btn {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease;
  width: auto;        /* wichtig: NICHT volle Breite */
}
.rail .brand { display:flex; align-items:center; }
.brand-link { display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; }
.brand-link .logo { height:32px; width:auto; display:block; }
.brand-link .logo-text { font-weight:900; letter-spacing:.02em; }

/* Brand mit Logo + Text */
.brand-link{ display:inline-flex; align-items:center; gap:.6rem; text-decoration:none }
.brand-link .logo{ height:30px; width:auto; display:block }
.brand-link .logo-text{ font-family:"Roboto Condensed",sans-serif; font-weight:700; letter-spacing:.5px; color:var(--muted) }

/* Nav-Schrift auf Hellpetrol & gleiche Größe in Drop */
.nav a, .nav-root { font-size:16px; font-family:"Roboto Condensed",sans-serif; color:var(--muted); font-weight:700; letter-spacing:.5px; }

/* (Optional) leichte Hover-Fläche Desktop */
@media (hover:hover){
  .nav-root:hover{ background:rgba(255,255,255,.06); border-radius:8px; }
}




/* Toolbar: Brand links, Nav rechts */
header.rail {
  display:flex;
  align-items:center;
  justify-content:space-between; /* Brand links, Rest rechts */
  padding:8px 16px;
}

header.rail .brand-link .logo { height:32px; width:auto; display:block; }
header.rail .brand-link .logo-text { font-weight:900; font-size:20px; letter-spacing:.4px; color:var(--muted); }

@media (max-width:900px){
  header.rail .brand-link .logo { height:60px; }
  header.rail .brand-link .logo-text { font-size:16px; }
  .nav-burger{
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; border:0; background:transparent; font-size:22px; border-radius:8px;
  }
}

/* === Header-Fix: Nav rechts ausrichten, ohne HTML-Änderungen === */

/* 1) .brand darf die volle Breite einnehmen, damit die Nav nach rechts kann */
header.rail .brand{ width:100%; }

/* 2) Schiebt die Nav innerhalb von .brand ganz nach rechts */
header.rail .nav{ margin-left:auto; }

/* 3) Verhindert, dass die Profil-Schaltfläche die Links wieder wegdrückt */
header.rail .profile-btn{ margin-left:0; }

/* 4) (Optional, aber hübsch) Abstand zwischen Brand und Nav etwas kleiner */
header.rail .brand{ gap:16px; }

/* Mobile bleibt Offcanvas – hier nichts ändern */

/* === Burger-Menü rechtsbündig auf Mobile === */
/* === Burger rechtsbündig auf Mobile === */
@media (max-width: 900px){
  header.rail .brand{
    width: 100%;        /* erlaubt rechtes Ausrichten innerhalb des Headers */
    gap: 12px;          /* optional: kleinere Lücke neben dem Logo */
  }
  header.rail .nav-burger{
    margin-left: auto;  /* schiebt den Burger ganz nach rechts */
    margin-right: 12px; /* kleiner Randabstand */
  }
}

/* ================================
   QUICK HELP (Schnellhilfe)
   Struktur: assist-wrap > assist-grid > assist-card
   ================================ */

/* Container mittig und nicht zu breit */
.assist-wrap{
  max-width: 1024px;
  margin-inline: auto;
}

/* Grid: mobil 1-spaltig, ab 900px 2-spaltig */
.assist-grid{
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 900px){
  .assist-grid{ grid-template-columns: 1fr 1fr; }
}

/* Cards: dezente Oberfläche, runde Ecken, Schatten */
.assist-card{
  background: rgba(255,255,255,.15);         /* wirkt auf dunklem Verlauf */
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  padding: 1.25rem 1.35rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  backdrop-filter: saturate(120%) blur(1px);
}

/* Headings in Cards */
.assist-card h3{
  margin: 0 0 .75rem 0;
  font-size: clamp(1.1rem, 1.9vw, 1.25rem);
}

/* Dropdown */
.assist-select{
  width: 100%;
  margin-top: .35rem;
  padding: .65rem .75rem;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.15);
  background: rgba(255,255,255,.9);
  color: #1a2b2b;          /* gut lesbar auf hellem Dropdown */
}

.assist-label{
  display:block;
  font-weight:600;
  margin-top: .25rem;
}

/* kleine Notiz unter dem Dropdown */
.assist-note{
  margin-top: .6rem;
  opacity: .8;
}

/* Ergebnisbereich: etwas Luft und Listen sauber einrücken */
.assist-result{
  margin-top: .5rem;
  line-height: 1.45;
}

.assist-res-title{
  margin: .15rem 0 .45rem;
  font-weight: 700;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
}

.assist-result .bullet{
  margin: .35rem 0 0 1.1rem;
  padding: 0;
}

/* Disclaimer kleiner und zurückhaltend */
.assist-disclaimer{
  font-size: .88rem;
  opacity: .75;
  margin-top: .75rem;
}
.assist-disclaimer.sm{
  font-size: .8rem;
}

/* Panel unten etwas Luft geben, damit der Abschluss nicht „klebt“ */
.panel--assist{ padding-bottom: 2.5rem; }

/* Überschrift/Intro mittig */
.assist-head .title{
  text-align: center;
  margin-bottom: .35rem;
}
.assist-intro{
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  opacity: .9;
}

/* Buttons (falls vorhanden) mittig) */
.assist-actions{
  display: flex;
  gap: .6rem;
  justify-content: center;
  margin-top: 1rem;
}

/* ============================================
   SCHNELLHILFE – Breitenoptimierung + Mobile fix
   ============================================ */

/* Mehr Platz auf Desktop */
.assist-wrap {
  max-width: 1200px; /* statt 1024px */
  margin-inline: auto;
  padding: 0 2rem; /* bisschen Rand, damit’s nicht klebt */
}

/* Grid-Layout: größerer Abstand, angenehm für Augen */
.assist-grid {
  display: grid;
  gap: 2rem;
  align-items: start;
}

/* Auf großen Screens: gleichmäßige Spalten */
@media (min-width: 900px) {
  .assist-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Karten optisch noch weicher und besser lesbar */
.assist-card {
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 1.75rem 2rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.assist-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.15);
}

/* Titel zentrieren, aber nicht zu eng */
.assist-head .title {
  text-align: center;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin-bottom: 0.5rem;
}

.assist-intro {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 2rem;
  font-size: 1.05rem;
  opacity: 0.9;
}

/* Ergebnisfeld – mehr Platz für Text */
.assist-result {
  font-size: 1rem;
  line-height: 1.55;
  padding-top: 0.5rem;
}

/* Überschrift in Ergebnis-Card */
.assist-res-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  text-align: left;
}

/* Mobile Ansicht optimieren */
@media (max-width: 900px) {
  .assist-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .assist-card {
    padding: 1.25rem 1.5rem;
    border-radius: 16px;
  }

  .assist-wrap {
    padding: 0 1rem;
  }

  .assist-head .title {
    font-size: 1.6rem;
  }

  .assist-intro {
    font-size: 1rem;
    margin-bottom: 1.5rem;
  }

  .assist-result {
    font-size: 0.98rem;
  }
}
.foot-social img {
  width: 28px;
  height: 28px;
  margin: 0 6px;
  opacity: 0.9;
  transition: opacity .2s;
}
.foot-social img:hover { opacity: 1; }

.subpage .card,
.subpage .muted,
.subpage p,
.subpage li,
.subpage h1, .subpage h2, .subpage h3 {
  color: #000; /* helles Petrolgrün */
}
#support .card { backdrop-filter: saturate(180%) blur(1px); }
#support .title { font-size: clamp(1.6rem, 3vw, 2.2rem); }

.cols{display:grid;gap:1.25rem}
    @media(min-width:900px){.cols{grid-template-columns:1.2fr .8fr}}
    .card{background:rgba(255,255,255,.12);border:1px solid rgba(0,0,0,.1);border-radius:18px;padding:1.25rem 1.5rem;box-shadow:0 8px 24px rgba(0,0,0,.08)}
    .list{margin:.25rem 0 0 1.1rem}
    .muted{opacity:.85}
    .plan{display:grid;gap:.6rem}
    .plan .line{display:flex;align-items:center;gap:.5rem}

.img-grid{
  display:grid; gap:1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 900px){
  .img-grid{ grid-template-columns: repeat(3, 1fr); }
}
.img-card{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.img-card img{ display:block; width:100%; height:auto; }
.img-card figcaption{ padding:.5rem .75rem; font-size:.95rem; opacity:.9; }


/* Engere Abstände für Fließtext auf der Ursprung-Seite */
body[data-page="ursprung"] .stack p {
  margin-block-start: 0.1rem;
  margin-block-end: 0.75rem;
}

body[data-page="ursprung"] .stack h2,
body[data-page="ursprung"] .stack h3 {
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.img-inline{
  max-width: 1000px;
  margin: 1rem auto;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.img-inline img{ display:block; width:100%; height:auto; }
.img-inline figcaption{
  padding:.5rem .75rem; 
  font-size:.95rem; 
  opacity:.9; 
  text-align:center;
}

/* Zwei Bilder nebeneinander (Vorher/Nachher) */
.img-inline.two{
  display:grid; 
  grid-template-columns:1fr; 
  gap: 0;
}
.img-inline.two figure{ margin:0 }
@media (min-width: 720px){
  .img-inline.two{ grid-template-columns:1fr 1fr; gap: 1rem; padding: 1rem; background: transparent; border:0; box-shadow:none; }
  .img-inline.two figure{
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
  }
}