/*
 * @file style.css
 * @project StoffwechselFit
 * @component WordPress-Theme / CSS
 * @purpose Theme-Grundlayout und Kategorie-Kacheln
 * @requirements PRJ-INS-20260727-001
 * @findings PRJ-QM-P0-003
 * @decisions PRJ-ADR-20260727-001, PRJ-ADR-20260727-002
 * @tests SWF-V602-CARD-01 bis -03
 * @security Auf Theme-/Artikelklassen begrenzte Kaskade.
 * @privacy Keine personenbezogenen Daten.
 * @offline Lokale CSS-Datei.
 * @generated false
 * @source_of_truth htdocs/wp-content/themes/stoffwechselfit/style.css
 * @last_reviewed 2026-07-27
 */
/*
Theme Name: StoffwechselFit
Theme URI: https://stoffwechselfit.com
Author: StoffwechselFit
Description: Custom Theme für stoffwechselfit.com – Wissens- und Erfahrungsplattform rund um Stoffwechsel- und Blutzuckergesundheit. Ehrlich und transparent, mit fachlichem Review-Gate.
Version: 60.7.25
Requires PHP: 8.2
Text Domain: stoffwechselfit
*/
:root{
  /* Wärmere, einladendere Palette: cremiger Grund, freundliches Grün, warmes Apricot/Koralle als Menschlichkeits-Akzent */
  --paper:#FCFBF7;          /* warmes Creme statt kühlem Weiß */
  --sand:#F5F1E8;           /* sandiger Sektionshintergrund */
  --mint:#EAF6ED;
  --mint-2:#D8EEDF;
  --green:#2AA860;
  --green-deep:#178049;

  /* Verlaufsfarben fuer Werkzeug-Kacheln. Sie wurden fuenfmal verwendet,
     ohne je definiert zu sein — die Kacheln blieben dadurch farblos, weil
     color-mix() mit einer unbekannten Variablen nichts liefert. */
  --tg1:#2AA860;
  --tg2:#137E48;
  /* Akzentfarbe, ebenfalls nur verwendet und nie gesetzt */
  --orange:#E9673A;
  --green-warm:#3DB56F;
  --leaf:#173F2B;           /* tiefes Blattgrün für Footer */
  --green-band:rgba(42,168,96,.13);
  --apricot:#FF8A5B;        /* warmer Menschlichkeits-Akzent */
  --apricot-deep:#E9673A;
  --apricot-soft:#FFEADF;
  --honey:#F6B44C;          /* Honig-Gelb für Community/Wärme */
  --honey-soft:#FFF1D6;
  --berry:#D96A8E;          /* sanfte Beere für Community-Layer */
  --berry-soft:#FBE4EC;
  --ink:#20362A;            /* warmes Dunkelgrün-Braun */
  --ink-soft:#53685C;
  --slate:#647268;
  --hair:#E6E0D3;           /* warme Trennlinien */
  --hair-strong:#D5CDBB;
  --white:#FFFFFF;
  --shadow-sm:0 2px 10px rgba(40,60,40,.05);
  --shadow:0 8px 28px -10px rgba(40,60,40,.14);
  --shadow-lg:0 22px 55px -20px rgba(40,60,40,.24);
  --radius:22px;
  --radius-lg:30px;
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:"Figtree",system-ui,sans-serif;font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:"Fraunces","Plus Jakarta Sans",serif;line-height:1.12;letter-spacing:-.015em;font-weight:600}
.sans{font-family:"Plus Jakarta Sans",sans-serif!important}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
img{max-width:100%;display:block}

.eyebrow{font-family:"Plus Jakarta Sans",sans-serif;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--green-deep);font-weight:700;display:inline-flex;align-items:center;gap:9px}
.eyebrow::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--green);display:inline-block;box-shadow:0 0 0 4px var(--green-band)}
.eyebrow.apricot{color:var(--apricot-deep)}
.eyebrow.apricot::before{background:var(--apricot);box-shadow:0 0 0 4px var(--apricot-soft)}
.eyebrow.berry{color:#C14B73}
.eyebrow.berry::before{background:var(--berry);box-shadow:0 0 0 4px var(--berry-soft)}
.eyebrow.honey{color:#C08829}
.eyebrow.honey::before{background:var(--honey);box-shadow:0 0 0 4px var(--honey-soft)}

/* Topbar */
.topbar{background:var(--leaf);color:#CDE6D5;font-size:13px}
.topbar .wrap{display:flex;align-items:center;justify-content:center;gap:26px;height:40px;flex-wrap:wrap}
.topbar span{display:inline-flex;align-items:center;gap:7px}
.topbar svg{width:14px;height:14px;color:#83D3A2}

/* Nav */
header.nav{position:sticky;top:0;z-index:100;background:rgba(252,251,247,.92);backdrop-filter:saturate(1.6) blur(16px);border-bottom:1px solid var(--hair)}
.nav-inner{display:flex;align-items:center;gap:20px;height:76px}
.brand{display:flex;align-items:center;gap:11px;font-family:"Fraunces",serif;font-weight:600;font-size:22px;letter-spacing:-.02em;flex-shrink:0}
.brand svg{width:38px;height:38px;display:block}
.brand .fit{color:var(--green-deep)}
nav.links{display:flex;gap:1px;margin-left:auto}
nav.links a{padding:9px 12px;border-radius:999px;font-size:14.5px;font-weight:600;color:var(--ink-soft);transition:background .18s,color .18s;white-space:nowrap;font-family:"Plus Jakarta Sans"}
nav.links a:hover{background:var(--mint);color:var(--green-deep)}
nav.links a.active{background:var(--mint);color:var(--green-deep)}
.nav-cta{background:#BC4E28;color:#fff;padding:11px 18px;border-radius:999px;font-weight:700;font-size:14.5px;transition:background .18s,transform .18s,box-shadow .18s;flex-shrink:0;box-shadow:var(--shadow-sm);white-space:nowrap;font-family:"Plus Jakarta Sans"}
.nav-cta:hover{background:var(--apricot-deep);transform:translateY(-1px);box-shadow:var(--shadow)}
.burger{display:none;margin-left:auto;background:var(--white);border:1px solid var(--hair-strong);border-radius:12px;width:46px;height:42px;cursor:pointer;flex-direction:column;gap:4px;align-items:center;justify-content:center}
.burger span{width:18px;height:2px;background:var(--ink);display:block;border-radius:2px}
.mobile-menu{display:none;flex-direction:column;padding:8px 24px 20px;border-bottom:1px solid var(--hair);background:var(--paper)}
.mobile-menu.open{display:flex}
.mobile-menu a{padding:12px 8px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--hair);font-family:"Plus Jakarta Sans"}
.mobile-menu a:last-child{border-bottom:none}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:15px 26px;border-radius:999px;font-weight:700;font-size:16px;transition:transform .18s,background .18s,box-shadow .18s;cursor:pointer;border:none;font-family:"Plus Jakarta Sans"}
.btn svg{width:17px;height:17px}
.btn-primary{background:var(--green-deep);color:#fff;box-shadow:var(--shadow)}
.btn-primary:hover{background:var(--green-deep);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.btn-apricot{background:var(--apricot);color:#fff;box-shadow:var(--shadow)}
.btn-apricot:hover{background:var(--apricot-deep);transform:translateY(-2px)}
.btn-ghost{background:var(--white);color:var(--ink);border:1px solid var(--hair-strong)}
.btn-ghost:hover{border-color:var(--green-deep);color:var(--green-deep)}

/* Section base */
section.block{padding:76px 0}
.sec-head{max-width:680px;margin-bottom:42px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2{font-size:clamp(2rem,3.8vw,2.8rem);margin-top:14px;font-weight:600}
.sec-head p{color:var(--ink-soft);margin-top:14px;font-size:1.12rem}
.sec-foot{margin-top:36px;text-align:center}

/* Page header */
.page-head{background:linear-gradient(160deg,var(--mint),var(--sand));border-bottom:1px solid var(--hair);padding:52px 0;position:relative;overflow:hidden}
.page-head::after{content:"";position:absolute;top:-80px;right:-60px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(255,138,91,.1),transparent 70%)}
.page-head .wrap{position:relative;z-index:1}
.breadcrumb{font-size:13.5px;color:var(--slate);margin-bottom:14px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-family:"Plus Jakarta Sans"}
.breadcrumb a{color:var(--green-deep);font-weight:600}
.breadcrumb .sep{color:var(--hair-strong)}
.page-head h1{font-size:clamp(2.2rem,4.6vw,3.3rem);font-weight:600;letter-spacing:-.02em}
.page-head p.intro{font-size:1.2rem;color:var(--ink-soft);margin-top:16px;max-width:60ch}

/* Evidence tags */
.tag{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;font-family:"Plus Jakarta Sans";font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:6px 12px;border-radius:999px}
.tag .m{width:8px;height:8px;border-radius:50%}
.tag-proven{background:var(--mint-2);color:var(--green-deep)}
.tag-proven .m{background:var(--green)}
.tag-plaus{background:var(--apricot-soft);color:var(--apricot-deep)}
.tag-plaus .m{background:var(--apricot)}
.tag-unclear{background:#EFEADF;color:var(--slate)}
.tag-unclear .m{border:1.5px solid var(--slate);background:transparent}

/* Card grids */
/* Kachelraster: automatisch umbrechend statt fest dreispaltig.
   Zuvor stand hier repeat(3,1fr) ohne jede Media Query — auf schmalen
   Bildschirmen wurden die Kacheln gequetscht statt umzubrechen (sichtbar
   auf der Blog-Übersicht). auto-fit + minmax bricht sauber um und funktioniert
   auch bei zwei oder vier Kacheln. */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:22px;align-items:stretch}
.card-grid > *{height:100%}
.card-grid.two{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.kcard{background:var(--white);border:1px solid var(--hair);border-radius:var(--radius);padding:26px;display:flex;flex-direction:column;gap:13px;transition:transform .2s,box-shadow .2s,border-color .2s}
.kcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--hair-strong)}
.kcard h3{font-size:1.28rem;letter-spacing:-.01em;font-weight:600}
.kcard p{font-size:.97rem;color:var(--ink-soft);line-height:1.55}
.kcard .more{font-family:"Plus Jakarta Sans";font-size:14px;font-weight:700;color:var(--green-deep);margin-top:auto;display:inline-flex;align-items:center;gap:6px}
.kcard .more svg{width:15px;height:15px;transition:transform .18s}
.kcard:hover .more svg{transform:translateX(3px)}

/* Community layer (durchgängiges Element) */
.community-band{background:linear-gradient(150deg,#FFF6EF,#FDECE3);border-top:1px solid var(--apricot-soft);border-bottom:1px solid var(--apricot-soft)}
.cb-inner{display:grid;grid-template-columns:1.2fr 1fr;gap:44px;align-items:center;padding:56px 0}
.cb-inner h2{font-size:clamp(1.7rem,3vw,2.3rem);font-weight:600}
.cb-inner p{color:var(--ink-soft);margin-top:14px;font-size:1.08rem}
.avatars{display:flex;align-items:center;margin-top:22px}
.avatars .av{width:44px;height:44px;border-radius:50%;border:3px solid var(--paper);margin-left:-12px;display:flex;align-items:center;justify-content:center;font-family:"Plus Jakarta Sans";font-weight:700;font-size:15px;color:#fff}
.avatars .av:first-child{margin-left:0}
.avatars .more-c{margin-left:14px;font-size:14px;color:var(--ink-soft)}
.avatars .more-c b{color:var(--ink);font-family:"Plus Jakarta Sans"}
.cb-card{background:var(--white);border:1px solid var(--hair);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}
.cb-card .q{font-family:"Fraunces",serif;font-size:1.2rem;line-height:1.4;color:var(--ink)}
.cb-card .qby{display:flex;align-items:center;gap:11px;margin-top:18px}
.cb-card .qav{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-family:"Plus Jakarta Sans";font-weight:700;font-size:14px;flex-shrink:0}
.cb-card .qn{font-family:"Plus Jakarta Sans";font-weight:700;font-size:14px}
.cb-card .qr{font-size:12.5px;color:var(--slate)}

/* Value cards (Mitmachen-Prinzipien) */
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.vcard{background:var(--white);border:1px solid var(--hair);border-radius:var(--radius);padding:28px;text-align:left;transition:transform .2s,box-shadow .2s}
.vcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.vcard .ic{width:54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.vcard .ic svg{width:26px;height:26px;color:#fff}
.vcard h3{font-size:1.25rem;font-weight:600}
.vcard p{font-size:.97rem;color:var(--ink-soft);margin-top:8px;line-height:1.55}

/* Article layout */
.article-wrap{display:grid;grid-template-columns:1fr 300px;gap:48px;padding:56px 0}
.article-body{max-width:72ch}
.article-body h2{font-size:1.75rem;margin:36px 0 14px;font-weight:600}
.article-body h3{font-size:1.32rem;margin:28px 0 10px;font-weight:600}
.article-body p{margin:14px 0;color:#31463A}
.article-body ul,.article-body ol{margin:14px 0 14px 22px;color:#31463A}
.article-body li{margin:7px 0}
.article-body strong{color:var(--ink)}
.callout{border-radius:18px;padding:20px 22px;margin:24px 0;display:flex;gap:14px;align-items:flex-start}
.callout svg{width:22px;height:22px;flex-shrink:0;margin-top:2px}
.callout .ct{font-family:"Plus Jakarta Sans";font-weight:800;font-size:15px;margin-bottom:4px;display:block}
.callout p{margin:0;font-size:.95rem}
.callout-doc{background:var(--apricot-soft)}
.callout-doc svg{color:var(--apricot-deep)}
.callout-doc .ct{color:var(--apricot-deep)}
.callout-info{background:var(--mint)}
.callout-info svg{color:var(--green-deep)}
.callout-info .ct{color:var(--green-deep)}
.callout-data{background:#EAF3FB}
.callout-data svg{color:#1E6FA8}
.callout-data .ct{color:#1E6FA8}
.callout-community{background:var(--berry-soft)}
.callout-community svg{color:#C14B73}
.callout-community .ct{color:#C14B73}

/* Article sidebar */
.aside-box{background:var(--white);border:1px solid var(--hair);border-radius:var(--radius);padding:22px;position:sticky;top:98px;margin-bottom:20px}
.aside-box h4{font-family:"Plus Jakarta Sans";font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate);margin-bottom:14px;font-weight:700}
.aside-box .meta-row{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;padding:8px 0;border-bottom:1px solid var(--hair)}
.aside-box .meta-row:last-child{border-bottom:none}
.aside-box .meta-row .k{color:var(--slate)}
.aside-box .meta-row .v{font-weight:600;text-align:right;font-family:"Plus Jakarta Sans"}
.toc a{display:block;font-size:14px;color:var(--ink-soft);padding:6px 0;border-left:2px solid var(--hair);padding-left:12px;transition:color .15s,border-color .15s}
.toc a:hover{color:var(--green-deep);border-color:var(--green-deep)}
.aside-cta{background:linear-gradient(150deg,var(--berry),#B84D71);color:#fff;border-radius:var(--radius);padding:24px;text-align:center}
.aside-cta h4{color:#fff;font-family:"Fraunces",serif;font-size:1.15rem;text-transform:none;letter-spacing:0;margin-bottom:8px;font-weight:600}
.aside-cta p{font-size:13.5px;color:#FCE4EC;margin-bottom:16px}
.aside-cta .btn{background:#fff;color:#B84D71;padding:11px 20px;font-size:14px;width:100%;justify-content:center}

/* Sources */
.sources{background:var(--sand);border-radius:var(--radius);padding:26px 28px;margin-top:24px}
.sources h3{font-size:1.2rem;margin-bottom:14px}
.sources ol{margin-left:20px;font-size:14px;color:var(--ink-soft)}
.sources li{margin:9px 0;line-height:1.45}
.sources .chk{color:var(--green-deep);font-weight:700;font-family:"Plus Jakarta Sans"}

/* Trust metadata */
.trust{display:flex;gap:16px;flex-wrap:wrap;align-items:center;background:var(--sand);border:1px solid var(--hair);border-radius:16px;padding:16px 20px;margin:20px 0}
.trust .ta{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink-soft)}
.trust .ta svg{width:17px;height:17px;color:var(--green-deep)}
.trust .ta b{color:var(--ink);font-family:"Plus Jakarta Sans"}

/* Glucose trace card */
.trace-card{background:var(--white);border:1px solid var(--hair);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:22px 22px 16px;position:relative}
.trace-card::before{content:attr(data-badge);position:absolute;top:-13px;right:22px;background:var(--green);color:#fff;font-family:"Plus Jakarta Sans";font-size:12px;font-weight:700;padding:5px 13px;border-radius:999px;box-shadow:var(--shadow)}
.trace-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.trace-head .t{font-family:"Plus Jakarta Sans";font-size:13px;font-weight:700;color:var(--ink)}
.trace-head .live{display:inline-flex;align-items:center;gap:7px;font-family:"JetBrains Mono";font-size:12px;color:var(--green-deep);font-weight:600}
.trace-head .dot{width:8px;height:8px;border-radius:50%;background:var(--green);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(42,168,96,.45)}70%{box-shadow:0 0 0 9px rgba(42,168,96,0)}100%{box-shadow:0 0 0 0 rgba(42,168,96,0)}}
.trace-svg{width:100%;height:auto;display:block}
.trace-line{fill:none;stroke:var(--green);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:2400;stroke-dashoffset:2400;animation:draw 3s cubic-bezier(.5,0,.2,1) .3s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.trace-foot{display:flex;justify-content:space-between;font-family:"JetBrains Mono";font-size:11px;color:var(--slate);margin-top:8px}
.band-label{font-family:"JetBrains Mono";font-size:10.5px;fill:var(--green-deep);opacity:.85}
.trace-note{margin-top:10px;font-size:12px;color:var(--slate);display:flex;align-items:center;gap:7px}
.trace-note .fw{display:inline-flex;align-items:center;gap:5px;background:var(--honey-soft);color:#C08829;font-weight:700;font-family:"Plus Jakarta Sans";font-size:11px;padding:3px 9px;border-radius:999px}

/* Newsletter / connect */
.connect-wrap{max-width:var(--maxw);margin:0 auto;padding:44px 0 0}
.connect{background:linear-gradient(145deg,#2FB56C,#137E48);color:#fff;border-radius:var(--radius-lg);padding:56px 48px;display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center;margin:0 24px;position:relative;overflow:hidden;box-shadow:var(--shadow-lg)}
.connect::before{content:"";position:absolute;top:-90px;left:-60px;width:280px;height:280px;border-radius:50%;background:rgba(255,255,255,.08)}
.connect > *{position:relative;z-index:1}
.connect .eyebrow{color:#EAFBEF}
.connect .eyebrow::before{background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.2)}
.connect h2{color:#fff;font-size:clamp(1.8rem,3vw,2.4rem)}
.connect p{color:#E4F7EA;margin-top:12px}
.nl-form{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.nl-form input{flex:1;min-width:200px;padding:15px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.15);color:#fff;font-family:inherit;font-size:15px}
.nl-form input::placeholder{color:#DCF3E4}
.nl-form input:focus{outline:2px solid #fff;outline-offset:1px}
.nl-form .btn-white{background:#fff;color:var(--green-deep)}
.nl-form .btn-white:hover{background:#EAFBEF;transform:translateY(-2px)}
.nl-note{font-size:12.5px;color:#CFEFDA;margin-top:14px}
.socials{display:flex;flex-direction:column;gap:11px}
.soc{display:flex;align-items:center;gap:13px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:14px 16px;transition:background .18s,transform .18s}
.soc:hover{background:rgba(255,255,255,.22);transform:translateX(3px)}
.soc .ic{width:38px;height:38px;border-radius:11px;background:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.soc .ic svg{width:20px;height:20px}
.soc .h{font-weight:700;font-size:14.5px;color:#fff;font-family:"Plus Jakarta Sans"}
.soc .s{font-size:12.5px;color:#D8F1E0}

/* Footer */
footer{background:var(--leaf);color:#C4E1CD;padding:60px 0 30px;margin-top:50px;}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px}
.foot-brand .brand{color:#fff}
.foot-brand p{font-size:14px;margin-top:14px;max-width:32ch;color:#9EC9AD}
.foot-col h5{font-family:"Plus Jakarta Sans";font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#84B497;margin-bottom:14px;font-weight:700}
.foot-col a{display:block;font-size:14.5px;color:#C4E1CD;padding:5px 0;transition:color .15s}
.foot-col a:hover{color:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:44px;padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:#84B497}
.foot-legal{display:flex;gap:20px;flex-wrap:wrap}
.foot-legal a{color:#9EC9AD}
.foot-legal a:hover{color:#fff}

/* Prototype note */
.proto-note{position:fixed;bottom:16px;right:16px;z-index:200;background:var(--ink);color:#fff;font-size:12.5px;padding:10px 16px;border-radius:999px;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:8px;font-family:"Plus Jakarta Sans";font-weight:600}
.proto-note svg{width:15px;height:15px;color:var(--honey)}
.proto-note button{background:none;border:none;color:#84B497;cursor:pointer;font-size:16px;line-height:1;padding:0 0 0 4px}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

@media(max-width:1000px){
  nav.links,.nav-cta{display:none}
  .burger{display:flex}
  .card-grid,.card-grid.two,.value-grid{grid-template-columns:1fr 1fr}
  .article-wrap{grid-template-columns:1fr}
  .aside-box{position:static}
}
@media(max-width:820px){
  .connect,.cb-inner{grid-template-columns:1fr}
  .connect{padding:40px 28px}
}
@media(max-width:560px){
  body{font-size:16px}
  section.block{padding:52px 0}
  .card-grid,.card-grid.two,.value-grid{grid-template-columns:1fr}
  .connect{margin:0 16px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .topbar .wrap{gap:14px;font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition:none!important}
  .trace-line{stroke-dashoffset:0}
  .reveal{opacity:1;transform:none}
}

/* ============================================================
   BILDER & VERSPIELTE ELEMENTE (v2 – nahbar & lebendig)
   ============================================================ */

/* Bild mit Fallback-Verlauf darunter */
.img{display:block;width:100%;height:100%;object-fit:cover;background:linear-gradient(150deg,var(--mint-2),var(--mint))}
.imgbox{position:relative;overflow:hidden;border-radius:var(--radius);background:linear-gradient(150deg,var(--mint-2),var(--mint))}
.imgbox img{width:100%;height:100%;object-fit:cover;display:block}

/* Hero-Foto rund/organisch */
.hero-photo{position:relative}
.hero-photo .blob{position:absolute;inset:-6% -6% -6% -6%;background:linear-gradient(150deg,var(--honey),var(--apricot));border-radius:42% 58% 55% 45%/48% 44% 56% 52%;z-index:0;opacity:.9;animation:blobf 14s ease-in-out infinite}
@keyframes blobf{0%,100%{border-radius:42% 58% 55% 45%/48% 44% 56% 52%}50%{border-radius:56% 44% 43% 57%/52% 58% 42% 48%}}
.hero-photo .ph-inner{position:relative;z-index:1;border-radius:40% 55% 52% 48%/46% 42% 58% 54%;overflow:hidden;aspect-ratio:1/1;box-shadow:var(--shadow-lg);border:6px solid var(--paper)}
.hero-photo .ph-inner img{width:100%;height:100%;object-fit:cover}

/* Verspielte Sticker/Badges auf Bildern */
.sticker{position:absolute;z-index:3;background:var(--white);border-radius:16px;box-shadow:var(--shadow);padding:10px 14px;display:flex;align-items:center;gap:9px;font-family:"Plus Jakarta Sans";font-weight:700;font-size:13px}
.sticker svg{width:18px;height:18px}
.sticker .em{font-size:20px;line-height:1}
.sticker.s-tl{top:14px;left:-10px}
.sticker.s-br{bottom:18px;right:-10px}
.sticker.s-tr{top:20px;right:-8px}

/* Deko-Kringel & Punkte (SVG inline sowieso, hier Positionen) */
.deco{position:absolute;z-index:0;pointer-events:none;opacity:.9}
.deco-dots{background-image:radial-gradient(var(--hair-strong) 2px,transparent 2px);background-size:16px 16px}

/* Card mit Foto oben */
.pcard{background:var(--white);border:1px solid var(--hair);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s,border-color .2s}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--hair-strong)}
.pcard .pcard-img{aspect-ratio:16/11;overflow:hidden;position:relative;background:linear-gradient(150deg,var(--mint-2),var(--mint))}
.pcard .pcard-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.pcard:hover .pcard-img img{transform:scale(1.05)}
.pcard .pcard-tag{position:absolute;top:12px;left:12px;z-index:2}
.pcard .pcard-body{padding:22px;display:flex;flex-direction:column;gap:11px;flex:1}
.pcard h3{font-size:1.24rem;font-weight:600}
.pcard p{font-size:.96rem;color:var(--ink-soft);line-height:1.52}
.pcard .more{font-family:"Plus Jakarta Sans";font-size:14px;font-weight:700;color:var(--green-deep);margin-top:auto;display:inline-flex;align-items:center;gap:6px}
.pcard .more svg{width:15px;height:15px;transition:transform .18s}
.pcard:hover .more svg{transform:translateX(3px)}

/* Rundes Community-Avatar mit Foto */
.av-photo{overflow:hidden;background-size:cover;background-position:center}

/* Sanfte Wellen-Trenner */
.wave{display:block;width:100%;height:auto;margin-bottom:-6px}

/* Article Hero-Bild */
.article-hero{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:var(--radius-lg);margin-bottom:8px;box-shadow:var(--shadow)}

/* Kleine Foto-Kachel im Text */
.inline-photo{border-radius:var(--radius);overflow:hidden;margin:24px 0;box-shadow:var(--shadow-sm)}
.inline-photo img{width:100%;display:block}
.inline-photo figcaption{font-size:12.5px;color:var(--slate);padding:10px 14px;background:var(--sand);font-family:"Plus Jakarta Sans"}

/* Foto-Streifen (mehrere kleine Bilder) */
.photo-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.photo-strip .imgbox{aspect-ratio:1/1}
@media(max-width:700px){.photo-strip{grid-template-columns:1fr 1fr}}

@media(max-width:820px){
  .sticker.s-tl,.sticker.s-br,.sticker.s-tr{position:static;display:inline-flex;margin:6px 6px 0 0}
}

/* Fortschrittskurven-Legende */
.trace-legend{display:flex;gap:20px;margin-top:12px;padding-top:10px;border-top:1px solid var(--hair)}
.lg-item{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-soft);font-family:"Plus Jakarta Sans";font-weight:600}
.lg-line{width:26px;height:0;display:inline-block;border-top-width:3px;border-top-style:solid;border-radius:2px}
.lg-line.dashed{border-color:var(--hair-strong);border-top-style:dashed}
.lg-line.solid{border-color:var(--green-deep)}

/* Social-Verbindungsband */
.social-row{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
.social-chip{display:inline-flex;align-items:center;gap:9px;background:var(--white);border:1px solid var(--hair-strong);border-radius:999px;padding:11px 18px;font-family:"Plus Jakarta Sans";font-weight:700;font-size:14px;color:var(--ink);transition:transform .18s,box-shadow .18s,border-color .18s;box-shadow:var(--shadow-sm)}
.social-chip svg{width:18px;height:18px;color:var(--green-deep)}
.social-chip:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--green-deep)}

/* ============================================================
   TOOLS v2 – voll funktionsfähige Rechner
   ============================================================ */
.chipnav{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0 6px}
.chipnav a{background:var(--white);border:1px solid var(--hair-strong);border-radius:999px;padding:9px 16px;font-family:"Plus Jakarta Sans";font-weight:700;font-size:13.5px;color:var(--ink-soft);transition:all .15s}
.chipnav a:hover{border-color:var(--green-deep);color:var(--green-deep);transform:translateY(-1px)}
.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:26px}
.tool-card{background:var(--white);border:1px solid var(--hair);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-sm);scroll-margin-top:100px}
.tool-card.wide{grid-column:1/-1}
.tool-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px}
.tool-head .ic{width:46px;height:46px;border-radius:13px;background:var(--mint);display:flex;align-items:center;justify-content:center;color:var(--green-deep);flex-shrink:0}
.tool-head .ic svg{width:23px;height:23px}
.tool-head h3{font-size:1.25rem;font-weight:600}
.tool-head p{font-size:.9rem;color:var(--ink-soft);margin-top:3px}
.ti{margin-bottom:13px}
.ti label{font-family:"Plus Jakarta Sans";font-weight:700;font-size:13px;display:block;margin-bottom:6px;color:var(--ink)}
.ti input[type=number],.ti input[type=text],.ti select{width:100%;padding:11px 14px;border-radius:12px;border:1px solid var(--hair-strong);font-family:inherit;font-size:15px;background:var(--paper)}
.ti input:focus,.ti select:focus{outline:2px solid var(--green);outline-offset:1px;border-color:var(--green-deep)}
.ti-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ti-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.seg{display:flex;border:1px solid var(--hair-strong);border-radius:999px;overflow:hidden}
.seg button{flex:1;padding:10px 8px;border:none;background:var(--paper);font-family:"Plus Jakarta Sans";font-weight:700;font-size:13px;color:var(--ink-soft);cursor:pointer}
.seg button.on{background:var(--green);color:#fff}
.tool-result{background:linear-gradient(150deg,var(--mint),#F2FAF4);border:1px solid var(--mint-2);border-radius:14px;padding:16px 18px;margin-top:14px}
.tool-result .rv{font-family:"Plus Jakarta Sans";font-size:1.7rem;font-weight:800;color:var(--green-deep);line-height:1.15}
.tool-result .rl{font-size:12.5px;color:var(--slate);margin-top:3px}
.tool-result .rc{font-size:13px;color:var(--ink-soft);margin-top:8px;padding-top:8px;border-top:1px dashed var(--hair-strong)}
.tool-result.warn{background:linear-gradient(150deg,var(--apricot-soft),#FFF4EE);border-color:#F8D8C8}
.tool-result.warn .rv{color:var(--apricot-deep)}
.range-wrap{display:flex;gap:12px;align-items:center}
.range-wrap input[type=range]{flex:1;accent-color:var(--green-deep)}
.range-wrap .rval{font-family:"JetBrains Mono";font-weight:600;color:var(--green-deep);min-width:74px;text-align:right;font-size:14px}
.nx-list{margin:12px 0;display:flex;flex-direction:column;gap:8px;max-height:190px;overflow-y:auto}
.nx-item{display:flex;justify-content:space-between;align-items:center;background:var(--paper);border:1px solid var(--hair);border-radius:10px;padding:8px 12px;font-size:13.5px}
.nx-item b{font-family:"Plus Jakarta Sans"}
.nx-item button{background:none;border:none;color:var(--apricot-deep);cursor:pointer;font-size:16px;padding:0 4px}
.nx-sum{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:10px}
.nx-sum div{background:var(--white);border:1px solid var(--hair);border-radius:10px;padding:9px 6px;text-align:center}
.nx-sum .v{font-family:"Plus Jakarta Sans";font-weight:800;font-size:1.02rem;color:var(--green-deep)}
.nx-sum .l{font-size:10.5px;color:var(--slate)}
.tir-bar{height:26px;border-radius:999px;background:#EFEADF;overflow:hidden;display:flex;margin-top:10px}
.tir-bar .in{background:var(--green);height:100%;transition:width .3s}
.tool-note{font-size:12px;color:var(--slate);margin-top:12px;display:flex;gap:7px;align-items:flex-start}
.tool-note svg{width:14px;height:14px;flex-shrink:0;margin-top:1.5px;color:var(--green-deep)}
@media(max-width:820px){.tool-grid{grid-template-columns:1fr}.nx-sum{grid-template-columns:repeat(3,1fr)}}

/* ============ Tool-Karten (Rechner & Tools) ============ */
.tool-card{background:var(--white);border:1px solid var(--hair);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);margin-bottom:30px}
.tool-head{padding:26px 32px;color:#fff}
.tool-eyebrow{font-family:"Plus Jakarta Sans";font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.tool-head h2{color:#fff;font-size:1.55rem;margin-top:6px}
.tool-head p{color:rgba(255,255,255,.92);margin-top:8px;font-size:.98rem;max-width:60ch}
.tool-body{padding:28px 32px}
.tool-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:start}
.tl{font-family:"Plus Jakarta Sans";font-weight:700;font-size:13.5px;display:block;margin-bottom:7px;color:var(--ink)}
.tv{color:var(--green-deep);font-family:"JetBrains Mono"}
.ti{width:100%;padding:12px 15px;border-radius:12px;border:1px solid var(--hair-strong);font-family:inherit;font-size:15px;background:var(--paper);color:var(--ink)}
.ti:focus{outline:2px solid var(--green);outline-offset:1px}
.tslider{width:100%;accent-color:var(--green-deep);margin-top:4px}
.thint{font-size:12.5px;color:var(--slate);margin-top:12px}
.tool-result{background:linear-gradient(160deg,var(--mint),var(--sand));border:1px solid var(--hair);border-radius:18px;padding:24px;min-height:150px}
.tr-label{font-family:"Plus Jakarta Sans";font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--slate)}
.tr-big{font-family:"Plus Jakarta Sans";font-size:2.3rem;font-weight:800;color:var(--green-deep);line-height:1.15;margin:8px 0 4px}
.tr-sub{font-size:14px;color:var(--ink-soft);font-weight:600;font-family:"Plus Jakarta Sans"}
.tr-note{font-size:13px;color:var(--ink-soft);margin-top:12px;line-height:1.5}

/* Nährwert-Liste */
.nw-list{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.nw-row{display:flex;justify-content:space-between;align-items:center;background:var(--sand);border:1px solid var(--hair);border-radius:10px;padding:9px 13px;font-size:13.5px}
.nw-row button{background:none;border:none;color:var(--apricot-deep);font-size:18px;cursor:pointer;line-height:1;padding:0 2px}
.nw-totals{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.nw-t{background:var(--white);border:1px solid var(--hair);border-radius:12px;padding:11px 13px}
.nw-t b{display:block;font-family:"Plus Jakarta Sans";font-size:1.05rem;color:var(--green-deep)}
.nw-t span{font-size:11.5px;color:var(--slate)}

/* Makro-Balken */
.mk-bars{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.mk-row{display:grid;grid-template-columns:96px 1fr auto;gap:10px;align-items:center}
.mk-name{font-family:"Plus Jakarta Sans";font-weight:700;font-size:13px}
.mk-track{height:12px;background:var(--white);border:1px solid var(--hair);border-radius:999px;overflow:hidden}
.mk-fill{height:100%;border-radius:999px;transition:width .4s}
.mk-val{font-size:12.5px;color:var(--ink-soft);font-family:"JetBrains Mono";white-space:nowrap}

/* Ballaststoff-Fortschritt */
.bs-bar{height:16px;background:var(--white);border:1px solid var(--hair);border-radius:999px;overflow:hidden;margin-top:14px}
.bs-fill{height:100%;background:linear-gradient(90deg,var(--green),#3DB56F);border-radius:999px;width:0;transition:width .4s}

@media(max-width:820px){.tool-grid{grid-template-columns:1fr!important}}

/* Artikel-Bibliothek (Wissen-Übersicht) */
.art-list{display:flex;flex-direction:column;gap:10px}
.art-row{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;background:var(--white);border:1px solid var(--hair);border-radius:16px;padding:14px 18px;transition:transform .15s,box-shadow .15s,border-color .15s}
.art-row:hover{transform:translateX(4px);box-shadow:var(--shadow);border-color:var(--green-deep)}
.art-row .tag{flex-shrink:0}
.art-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.art-t b{font-family:"Plus Jakarta Sans";font-size:15.5px;font-weight:700;color:var(--ink)}
.art-t small{font-size:13px;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.art-go{color:var(--green-deep);flex-shrink:0}
.art-go svg{width:18px;height:18px}
@media(max-width:700px){.art-row{grid-template-columns:1fr auto}.art-row .tag{grid-row:1}.art-t{grid-column:1/-1}}


/* Einnahmeplaner Nahrungsergänzung */
.nem-tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:2px solid var(--hair);margin-bottom:22px}
.nem-tab{background:none;border:none;padding:11px 16px;font-family:"Plus Jakarta Sans";font-weight:700;font-size:14px;color:var(--slate);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;border-radius:8px 8px 0 0}
.nem-tab:hover{color:var(--ink);background:var(--sand)}
.nem-tab.is-active{color:var(--green-deep);border-bottom-color:var(--green-deep)}
.nem-panel{display:none}
.nem-panel.is-active{display:block}
.nem-picker{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 20px}
.nem-chip{display:inline-flex;align-items:center;gap:7px;background:var(--white);border:1px solid var(--hair-strong);border-radius:999px;padding:8px 14px;font-size:13.5px;cursor:pointer;transition:border-color .15s,background .15s}
.nem-chip:hover{border-color:var(--green-deep)}
.nem-chip:has(input:checked){background:var(--mint);border-color:var(--green-deep);color:var(--green-deep);font-weight:600}
.nem-leer{background:var(--sand);border-radius:14px;padding:20px;color:var(--ink-soft);font-size:14px;text-align:center}
.nem-plan{display:flex;flex-direction:column;gap:14px}
.nem-slot{background:var(--white);border:1px solid var(--hair);border-radius:16px;overflow:hidden}
.nem-slot-h{background:linear-gradient(90deg,var(--mint),var(--sand));padding:11px 16px;display:flex;justify-content:space-between;align-items:baseline;font-family:"Plus Jakarta Sans"}
.nem-slot-h b{font-size:14.5px;color:var(--green-deep)}
.nem-slot-h span{font-size:12px;color:var(--slate)}
.nem-item{padding:13px 16px;border-top:1px solid var(--hair)}
.nem-item:first-of-type{border-top:none}
.nem-item-n{font-family:"Plus Jakarta Sans";font-weight:700;font-size:14.5px}
.nem-item-w{font-size:13.5px;color:var(--ink-soft);margin-top:3px}
.nem-max{font-size:12.5px;color:var(--green-deep);background:var(--mint);border-radius:8px;padding:5px 9px;margin-top:7px;display:inline-block}
.nem-warn{font-size:12.5px;color:var(--apricot-deep);background:var(--apricot-soft);border-radius:8px;padding:7px 10px;margin-top:7px;line-height:1.45}
.nem-konf,.nem-syn,.nem-med{border-radius:14px;padding:14px 16px;margin-bottom:10px}
.nem-konf{background:var(--apricot-soft);border-left:4px solid var(--apricot)}
.nem-syn{background:var(--mint);border-left:4px solid var(--green)}
.nem-konf b,.nem-syn b,.nem-med b{font-family:"Plus Jakarta Sans";font-size:14px;display:block;margin-bottom:3px}
.nem-konf p,.nem-syn p,.nem-med p{font-size:13.5px;color:var(--ink-soft);margin:0}
.nem-ok{background:var(--mint);border-radius:14px;padding:16px;font-size:13.5px;color:var(--ink-soft);line-height:1.55}
.nem-med--hoch{background:#FDE7E7;border-left:4px solid #C0392B}
.nem-med--mittel{background:var(--apricot-soft);border-left:4px solid var(--apricot)}
.nem-med--niedrig{background:var(--honey-soft);border-left:4px solid var(--honey)}
.nem-med--info{background:#EAF3FB;border-left:4px solid #1E6FA8}
.nem-lvl{font-family:"Plus Jakarta Sans";font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;display:block;margin-bottom:4px}
.nem-med--hoch .nem-lvl{color:#C0392B}
.nem-med--mittel .nem-lvl{color:var(--apricot-deep)}
.nem-med--niedrig .nem-lvl{color:#C08829}
.nem-med--info .nem-lvl{color:#1E6FA8}
.nem-final{background:var(--sand);border-radius:14px;padding:14px 16px;font-size:13px;color:var(--ink-soft);line-height:1.55;margin-top:12px}
.nem-stw-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.nem-stw-card{background:var(--white);border:1px solid var(--hair);border-radius:16px;padding:16px}
.nem-stw-h{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:9px}
.nem-stw-h b{font-family:"Plus Jakarta Sans";font-size:14.5px;margin-right:auto}
.nem-stw-card p{font-size:13px;color:var(--ink-soft);margin:6px 0;line-height:1.5}
.nem-bz,.nem-ev{font-family:"Plus Jakarta Sans";font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
.nem-bz--senkend{background:#D8EEDF;color:#137E48}
.nem-bz--leicht_senkend{background:var(--mint);color:var(--green-deep)}
.nem-bz--neutral{background:#EFEADF;color:var(--slate)}
.nem-bz--offen{background:var(--honey-soft);color:#C08829}
.nem-ev--gut{background:#E3F0FB;color:#1E6FA8}
.nem-ev--gemischt{background:var(--apricot-soft);color:var(--apricot-deep)}
.nem-ev--duenn{background:#EFEADF;color:var(--slate)}
@media(max-width:820px){.nem-stw-grid{grid-template-columns:1fr}}

/* Sprachumschalter */
.lang-switch{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:999px;border:1px solid var(--hair-strong);background:var(--white);font-family:"Plus Jakarta Sans";font-size:13.5px;font-weight:700;color:var(--ink-soft);transition:border-color .18s,color .18s;flex-shrink:0;white-space:nowrap}
.lang-switch svg{width:15px;height:15px}
.lang-switch:hover{border-color:var(--green-deep);color:var(--green-deep)}
@media(max-width:1000px){.lang-switch{display:none}}

/* ============ Tools-Kachelübersicht (v6) ============ */
.tool-picker{margin:0 0 8px}
.tool-picker-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:18px;
}
.tool-tile{
  position:relative;
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  text-align:left;
  padding:22px 22px 24px;
  border-radius:var(--radius);
  border:1px solid var(--hair);
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--tg1) 8%, #fff), color-mix(in srgb, var(--tg2) 6%, #fff));
  box-shadow:var(--shadow-sm);
  cursor:pointer;
  overflow:hidden;
  transition:transform .18s ease, box-shadow .22s ease, border-color .18s ease;
  font-family:"Plus Jakarta Sans";
}
.tool-tile::before{
  content:"";position:absolute;inset:0 auto 0 0;width:5px;
  background:linear-gradient(180deg,var(--tg1),var(--tg2));
}
.tool-tile:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
  border-color:color-mix(in srgb, var(--tg1) 40%, var(--hair));
}
.tool-tile:focus-visible{
  outline:3px solid color-mix(in srgb, var(--tg1) 55%, #fff);
  outline-offset:2px;
}
.tool-tile .tt-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:11px;
  background:linear-gradient(150deg,var(--tg1),var(--tg2));
  color:#fff;font-weight:800;font-size:15px;margin-bottom:4px;
  box-shadow:0 4px 12px -4px color-mix(in srgb, var(--tg2) 60%, transparent);
}
.tool-tile .tt-cat{
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:color-mix(in srgb, var(--tg2) 78%, var(--ink-soft));
}
.tool-tile .tt-title{font-size:1.12rem;font-weight:700;color:var(--ink);line-height:1.25}
.tool-tile .tt-desc{font-size:.86rem;color:var(--ink-soft);line-height:1.45;margin-top:2px}

/* Fallback: hat der Browser kein color-mix, bleiben Kacheln hell & lesbar */
@supports not (background:color-mix(in srgb,#000,#fff)){
  .tool-tile{background:var(--white)}
  .tool-tile .tt-num{background:var(--green)}
  .tool-tile .tt-cat{color:var(--green-deep)}
}

.tool-back{margin:0 0 22px}
.tool-back .btn-ghost{padding:11px 20px;font-size:15px}

@media (max-width:560px){
  .tool-picker-grid{grid-template-columns:1fr;gap:14px}
  .tool-tile{padding:18px 18px 20px}
}

/* ============ Verlaufs-Anzeige Tools 11–13 (v7) ============ */
.swf-history{margin-top:22px;border-top:1px solid var(--hair);padding-top:16px}
.swf-hist-head{margin-bottom:10px;font-size:.95rem}
.swf-hist-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.swf-hist-list li{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--paper);border:1px solid var(--hair);border-radius:12px;
  padding:9px 14px;font-size:.88rem;color:var(--ink)
}
.swf-hist-del{
  border:none;background:transparent;color:var(--slate);font-size:1.25rem;line-height:1;
  cursor:pointer;padding:0 4px;border-radius:8px;transition:color .15s,background .15s;flex-shrink:0
}
.swf-hist-del:hover{color:#B84D71;background:var(--berry-soft)}

/* ============ Verschlüsselungs-Gate Tools 11–13 (v8) ============ */
.swf-lock{margin-top:22px;border-top:1px solid var(--hair);padding-top:18px}
.swf-lock-row{display:flex;gap:10px;align-items:flex-start;color:var(--ink-soft);font-size:.92rem;margin-bottom:12px}
.swf-lock-row svg{color:var(--green-deep);flex-shrink:0;margin-top:1px}
.swf-lock-form{display:flex;gap:10px;flex-wrap:wrap}
.swf-lock-form .swf-pass{flex:1;min-width:180px}
.swf-lock-form .btn{white-space:nowrap}
.swf-warn{color:#B34A22;margin-top:10px;font-size:.84rem}
.swf-lock-msg{margin-top:8px;font-size:.86rem;min-height:1em}
.swf-lock-msg.err{color:#B84D71}
.swf-lock-msg.ok{color:var(--green-deep)}
.swf-lockbtn{border:1px solid var(--hair-strong);background:var(--white);color:var(--ink-soft);border-radius:999px;padding:3px 12px;font-size:12.5px;cursor:pointer;margin-left:6px;transition:border-color .15s,color .15s}
.swf-lockbtn:hover{border-color:var(--green-deep);color:var(--green-deep)}

/* ============ Nährwert-Suche / Autocomplete (v11) ============ */
.nw-search{position:relative}
.nw-suggest{
  position:absolute;z-index:20;left:0;right:0;top:100%;margin-top:4px;
  background:var(--white);border:1px solid var(--hair-strong);border-radius:14px;
  box-shadow:var(--shadow-lg);max-height:320px;overflow-y:auto;padding:6px
}
.nw-sug-item{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;
  text-align:left;padding:9px 12px;border:none;background:transparent;border-radius:9px;cursor:pointer
}
.nw-sug-item:hover{background:var(--paper)}
.nw-sug-item>span:first-child{font-weight:600;color:var(--ink);font-size:.95rem}
.nw-sug-meta{font-size:.8rem;color:var(--ink-soft);display:flex;align-items:center;gap:8px}
.nw-badge{font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:999px;letter-spacing:.03em}
.nw-badge.nw-ok{background:var(--mint);color:var(--green-deep)}
.nw-badge.nw-src{background:#EDEFF3;color:#5A6B85}
.nw-picked{margin-top:8px;font-size:.9rem;color:var(--ink-soft);background:var(--mint);
  border-radius:10px;padding:8px 12px}

/* hidden-Attribut muss display:grid der .tool-grid überstimmen (HbA1c-Umschalter v11) */
.tool-grid[hidden]{display:none!important}

/* ============ News-Bereich (v20) ============ */
.news-chip{display:inline-block;padding:8px 16px;border-radius:999px;background:var(--white,#fff);
  border:1px solid var(--hair,#E6E0D3);color:var(--ink-soft,#53685C);text-decoration:none;
  font-weight:600;font-size:.9rem;transition:all .15s}
.news-chip:hover{border-color:var(--green-deep,#178049);color:var(--green-deep,#178049)}
.news-chip.active{background:var(--green-deep,#178049);color:#fff;border-color:var(--green-deep,#178049)}
.news-list{display:grid;gap:18px}
.news-card{background:var(--white,#fff);border:1px solid var(--hair,#E6E0D3);border-radius:16px;
  padding:22px 24px;transition:box-shadow .15s,transform .15s}
.news-card:hover{box-shadow:var(--shadow-lg,0 8px 30px rgba(0,0,0,.08));transform:translateY(-1px)}
.news-meta{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.news-rubrik{font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--green-deep,#178049);background:var(--mint,#EAF6ED);padding:3px 10px;border-radius:999px}
.news-date{font-size:.82rem;color:var(--slate,#8A9A8E)}
.news-title{font-family:'Fraunces',serif;font-size:1.25rem;margin:0 0 8px;color:var(--ink,#20362A);line-height:1.3}
.news-excerpt{color:var(--ink-soft,#53685C);font-size:.96rem;line-height:1.6;margin:0 0 16px}
.news-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  border-top:1px solid var(--hair,#E6E0D3);padding-top:14px}
.news-source{font-size:.85rem;color:var(--slate,#8A9A8E);font-weight:600}
.news-link{font-weight:700;color:var(--green-deep,#178049);text-decoration:none;font-size:.9rem}
.news-link:hover{text-decoration:underline}
.news-empty{text-align:center;color:var(--ink-soft,#53685C);padding:40px;background:var(--paper,#FCFBF7);border-radius:16px}

/* Suche & 404 */
.swf-search{display:flex;gap:10px;max-width:560px;margin:0 auto}
.swf-search input[type=search]{flex:1;padding:12px 16px;border:1px solid #D9D2C4;border-radius:12px;font-size:1rem;font-family:inherit}
.swf-sres a{text-decoration:none;color:var(--ink,#20362A)}
.swf-sres a:hover{color:#137E48}

/* ===== Wissen: Kachel-Optik ===== */
.wissen-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;margin-top:8px}
.wissen-card{display:flex;flex-direction:column;gap:12px;background:var(--white);border:1px solid var(--hair);border-radius:20px;padding:24px 22px 20px;text-decoration:none;color:var(--ink);position:relative;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.wissen-card::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:linear-gradient(180deg,var(--green),var(--mint-2));opacity:0;transition:opacity .2s ease}
.wissen-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(20,60,40,.12);border-color:var(--mint-2)}
.wissen-card:hover::before{opacity:1}
.wissen-card:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.wissen-card .tag{align-self:flex-start}
.wissen-card-t{font-family:"Fraunces",Georgia,serif;font-size:1.28rem;line-height:1.28;margin:2px 0 0;font-weight:600;color:var(--ink)}
.wissen-card-x{color:var(--ink-soft);font-size:.97rem;line-height:1.55;margin:0;flex:1}
.wissen-card-go{font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;font-size:.92rem;color:var(--green-deep);display:inline-flex;align-items:center;gap:6px;margin-top:4px}
.wissen-card-go span{transition:transform .2s ease}
.wissen-card:hover .wissen-card-go span{transform:translateX(4px)}
.wissen-ad{grid-column:1/-1}
@media(max-width:640px){.wissen-grid{grid-template-columns:1fr;gap:16px}.wissen-card{border-radius:16px;padding:20px 18px}}

/* Wissen-Kacheln: Feinschliff */
.block .wissen-grid{margin-top:6px}
.wissen-card{min-height:200px}
.wissen-card .tag{margin-bottom:2px}
/* dezenter Fallback-Akzent, falls kein Typ-Badge gesetzt ist */
.wissen-card:not(:has(.tag))::after{content:"Wissen";position:absolute;top:20px;left:22px;font-family:"Plus Jakarta Sans",sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--green-deep);background:var(--mint);padding:5px 11px;border-radius:999px}
.wissen-card:not(:has(.tag)) .wissen-card-t{margin-top:34px}

/* ============ Kachel-Übersichten: Toolbar, Chips, Suche ============ */
.swf-toolbar{display:flex;flex-direction:column;gap:14px;margin:0 0 26px}
.swf-search-in{width:100%;padding:14px 18px;border:1.5px solid #E0DACB;border-radius:16px;
  font-size:1rem;font-family:inherit;background:#fff;transition:border-color .15s,box-shadow .15s}
/* Sichtbarer Fokus statt nur Schatten — WCAG 2.4.7 verlangt eine
   erkennbare Markierung, der Browser-Standard darf ersetzt, aber nicht
   entfernt werden. */
.swf-search-in:focus-visible{outline:3px solid var(--green-deep);outline-offset:2px;border-color:var(--green-deep)}
.swf-search-in:focus{border-color:var(--green-deep);box-shadow:0 0 0 4px var(--green-band)}
.swf-chips{display:flex;flex-wrap:wrap;gap:8px}
.swf-chip{padding:8px 16px;border-radius:999px;border:1.5px solid #E0DACB;background:#fff;
  color:var(--ink-soft);font-weight:600;font-size:.9rem;cursor:pointer;font-family:inherit;
  transition:all .15s}
.swf-chip:hover{border-color:var(--green-warm);color:var(--green-deep)}
.swf-chip.is-on{background:var(--green-deep);border-color:var(--green-deep);color:#fff}
.swf-noresult{text-align:center;color:var(--ink-soft);padding:36px 0;font-size:1.05rem}

/* ============ Rezept-Kacheln ============ */
.rez-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.rez-card{background:#fff;border:1px solid #EDE7DA;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s;display:flex;flex-direction:column}
.rez-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.rez-bild{aspect-ratio:16/10;background:linear-gradient(135deg,#5BAE7A,#137E48);
  background-size:cover;background-position:center;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
/* Dezentes Muster für mehr Tiefe im Platzhalter */
.rez-bild::after{content:"";position:absolute;inset:0;opacity:.13;
  background-image:radial-gradient(circle at 20% 30%, #fff 1.5px, transparent 1.6px),radial-gradient(circle at 70% 65%, #fff 1.5px, transparent 1.6px);
  background-size:26px 26px}
/* Kategorie-spezifische Farbverläufe (appetitlicher als einheitliches Grün) */
.rez-card[data-k="frhstck"] .rez-bild,.rez-card[data-k="fruehstueck"] .rez-bild{background:linear-gradient(135deg,#F6C761,#E89B3B)}
.rez-card[data-k="suppen"] .rez-bild{background:linear-gradient(135deg,#F0A868,#D9762F)}
.rez-card[data-k="fleisch"] .rez-bild{background:linear-gradient(135deg,#D08663,#A6482F)}
.rez-card[data-k="fisch"] .rez-bild{background:linear-gradient(135deg,#5FB4C9,#2E7A98)}
.rez-card[data-k="salate"] .rez-bild{background:linear-gradient(135deg,#8FC46B,#4F9A3E)}
.rez-card[data-k="vegetarisch"] .rez-bild{background:linear-gradient(135deg,#7BC08A,#3E8C57)}
.rez-card[data-k="beilagen"] .rez-bild{background:linear-gradient(135deg,#D9C173,#B39442)}
.rez-card[data-k="backen"] .rez-bild{background:linear-gradient(135deg,#D3A77B,#9E6B3F)}
.rez-card[data-k="dessert"] .rez-bild{background:linear-gradient(135deg,#E39FB6,#BD5F82)}
.rez-bild-ph{font-size:3.1rem;opacity:.95;position:relative;z-index:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.18))}
.rez-kat{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.94);color:var(--green-deep);z-index:2;
  font-size:.72rem;font-weight:700;padding:4px 11px;border-radius:999px;text-transform:uppercase;letter-spacing:.03em}
.rez-body{padding:15px 17px 17px;display:flex;flex-direction:column;gap:7px;flex:1}
.rez-titel{font-family:'Fraunces',serif;font-size:1.12rem;font-weight:600;margin:0;line-height:1.25;color:var(--ink)}
.rez-sub{color:var(--ink-soft);font-size:.88rem;margin:0;line-height:1.4}
.rez-werte{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:10px}
.rez-werte span{background:var(--mint);color:var(--green-deep);border-radius:9px;padding:5px 9px;
  font-size:.74rem;display:flex;gap:4px;align-items:baseline}
.rez-werte b{font-size:.86rem;font-weight:700}

/* (Wissen-Karten nutzen das bestehende Theme-Design — hier NICHT überschreiben) */
@media(max-width:640px){
  .rez-grid{grid-template-columns:1fr 1fr;gap:12px}
  .rez-titel{font-size:1rem}.rez-werte span{font-size:.68rem}
}
@media(max-width:380px){.rez-grid{grid-template-columns:1fr}}

/* Rezept-Ernährungs-Tags (Low Carb, High Protein etc.) */
.rez-etags { display:flex; flex-wrap:wrap; gap:5px; margin:6px 0 8px; }
.rez-etag { font-size:.72rem; font-weight:600; color:#137E48; background:#E4F3EA; padding:2px 9px; border-radius:11px; }
.swf-chips-ernaehrung { display:flex; flex-wrap:wrap; gap:8px; }
.swf-chip-e { font-size:.82rem; border:1px solid #CDE6D6; background:#F4FAF6; color:#137E48; }
.swf-chip-e.is-on { background:#137E48; color:#fff; border-color:#137E48; }

/* ============================================================
   BARRIEREFREIHEIT (BFSG / WCAG 2.1 AA)
   ============================================================ */

/* Skip-Link: sichtbar nur bei Tastaturfokus (WCAG 2.4.1) */
.swf-skiplink{position:absolute;left:-9999px;top:0;z-index:100000;
  background:var(--green-deep,#137E48);color:#fff;padding:12px 20px;
  border-radius:0 0 8px 0;font-weight:700;font-family:"Plus Jakarta Sans",sans-serif;
  text-decoration:none;font-size:1rem}
.swf-skiplink:focus{left:0;outline:3px solid #fff;outline-offset:-3px}

/* Globaler, durchgängiger Fokus-Indikator für Tastaturnutzer (WCAG 2.4.7) */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,
[tabindex]:focus-visible,summary:focus-visible{
  outline:3px solid var(--green-deep,#137E48);
  outline-offset:2px;
  border-radius:3px}
/* main als Sprungziel soll keinen sichtbaren Rahmen zeigen */
main:focus,main:focus-visible{outline:none}

/* Sichtbarer Fokus auch auf dunklen/grünen Flächen */
.connect a:focus-visible,.connect button:focus-visible,
.nl-form input:focus-visible,.nl-form button:focus-visible,
.topbar a:focus-visible{outline-color:#fff}

/* Touch-/Klick-Ziele mind. 44x44px (WCAG 2.5.5) */
.burger{min-width:46px;min-height:46px}
.lang-switch,.nav-cta{min-height:44px;display:inline-flex;align-items:center}

/* Nur für Screenreader (visuell versteckt, aber vorlesbar) */
.swf-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Reduzierte Bewegung respektieren (WCAG 2.3.3) — Animationen abschalten */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
}

/* Reveal-Animationen dürfen Inhalt NICHT dauerhaft verstecken (Fallback ohne JS) */
.no-js .reveal{opacity:1!important;transform:none!important}

/* Ausreichender Zeilenabstand für Lesbarkeit (WCAG 1.4.12) */
body{line-height:1.6}

/* Fokus-Sichtbarkeit bei Karten-Links verstärken */
.rez-card:focus-within,.pcard:focus-within,.kcard:focus-within,
.wissen-card:focus-within{outline:3px solid var(--green-deep,#137E48);outline-offset:2px}

/* Kachelraster — ausdrückliche Stufen (Absicherung für ältere Browser) */
@media (max-width:980px){
  .card-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .card-grid,.card-grid.two{grid-template-columns:1fr;gap:16px}
  .kcard{padding:20px}
  .kcard h3{font-size:1.15rem}
}
/* Bildkacheln (Blog, Produkte): einheitliches Seitenverhältnis, damit die
   Reihen gleich hoch bleiben. */
.card-grid .kcard img{display:block;width:100%;height:100%;object-fit:cover}

/* ---------- Bildkacheln (Blog, Produkte) ----------
   Ersetzt die zuvor je Kachel wiederholten Inline-Styles durch eine
   einheitliche Klasse. Damit sind alle Kartenkörper gleich hoch und
   gleich aufgebaut (Befund: uneinheitliche Kartenkörper, 21 Inline-Styles). */
/* Kacheln mit Bild: Das Bild begleitet den Text, es dominiert ihn nicht.
   Zuvor stand es im Format 16:10 über die volle Kachelbreite und nahm mehr
   Raum ein als die Überschrift. Jetzt sitzt es links neben dem Text — kompakt,
   quadratisch, mit ruhigem Hintergrund. */
.kcard-media{padding:0;overflow:hidden;display:flex;flex-direction:row;align-items:stretch}
.kcard-bild{
  flex:0 0 108px;
  width:108px;
  align-self:stretch;
  overflow:hidden;
  background:#F7F5F0;
  border-right:1px solid var(--hair);
  display:flex;align-items:center;justify-content:center
}
/* contain statt cover: Produktbilder sollen vollständig sichtbar bleiben,
   nicht angeschnitten werden. Bei Verpackungen ist der Rand oft Teil der
   Erkennbarkeit. */
.kcard-bild img{
  width:100%;height:100%;
  object-fit:contain;
  padding:10px;
  display:block
}
.kcard-initialen{
  font-family:"Plus Jakarta Sans",sans-serif;
  font-size:1.5rem;font-weight:800;
  color:var(--green-deep);letter-spacing:.03em
}
.kcard-media .kcard-body{padding:18px 20px}

/* Auf schmalen Bildschirmen untereinander, Bild flach halten */
@media (max-width:520px){
  .kcard-media{flex-direction:column}
  .kcard-bild{flex:0 0 auto;width:100%;height:120px;border-right:0;border-bottom:1px solid var(--hair)}
  .kcard-media .kcard-body{padding:16px 18px}
}
.kcard-body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.kcard-kicker{font-family:"Plus Jakarta Sans",sans-serif;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--green-deep)}
.kcard-body h3{font-size:1.15rem}
.kcard-body p{font-size:.94rem;color:var(--ink-soft);flex:1}

/* ---------- Einkaufsplaner ---------- */
.swf-einkauf-intro{margin-bottom:18px;color:var(--ink-soft)}
.swf-einkauf-layout{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.swf-einkauf-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.swf-einkauf-kopf h3{font-size:1.1rem;margin:0}
.swf-einkauf-liste{max-height:520px;overflow-y:auto;border:1px solid var(--hair);border-radius:14px;padding:6px}
.ek-zeile{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;border-radius:10px}
.ek-zeile:hover{background:#F7F5F0}
.ek-zeile.is-on{background:#EFF7F2}
.ek-wahl{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:.95rem;flex:1}
.ek-portionen{display:inline-flex;align-items:center;gap:7px;flex-shrink:0}
.ek-pm{width:26px;height:26px;border:1px solid var(--hair-strong);background:#fff;border-radius:7px;cursor:pointer;font-size:15px;line-height:1;color:var(--green-deep)}
.ek-pm:hover{background:var(--green-deep);color:#fff;border-color:var(--green-deep)}
.ek-portionen b{min-width:18px;text-align:center;font-size:.95rem}
.swf-einkauf-ausgabe{border:1px solid var(--hair);border-radius:14px;padding:16px 18px;min-height:200px}
.ek-gruppe{margin-bottom:18px}
.ek-gruppe:last-child{margin-bottom:0}
.ek-gruppe h4{font-family:"Plus Jakarta Sans",sans-serif;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--green-deep);margin:0 0 8px;padding-bottom:5px;border-bottom:1px solid var(--hair)}
.ek-gruppe ul{list-style:none;margin:0;padding:0}
.ek-gruppe li{padding:5px 0}
.ek-gruppe label{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:.95rem}
.ek-gruppe input:checked + .ek-name{text-decoration:line-through;color:var(--muted)}
.ek-menge{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--ink-soft);font-size:.9rem}
.ek-leer{color:var(--muted);font-size:.95rem;text-align:center;padding:26px 0;margin:0}
.swf-einkauf-zaehler{font-size:.86rem;color:var(--green-deep);font-weight:600}
.swf-einkauf-aktionen{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.swf-einkauf-hinweis{font-size:.84rem;color:var(--muted);margin-top:12px}
@media (max-width:860px){.swf-einkauf-layout{grid-template-columns:1fr}.swf-einkauf-liste{max-height:340px}}
@media print{
  .swf-einkauf-auswahl,.swf-einkauf-aktionen,header,footer,.swf-einkauf-intro{display:none!important}
  .swf-einkauf-layout{grid-template-columns:1fr}
  .swf-einkauf-ausgabe{border:none;padding:0}
}

/* ---------- Proteinbedarfsrechner ---------- */
.swf-protein{border:1px solid var(--hair);border-radius:16px;padding:22px;background:#FDFCFA}
.pr-modus{display:inline-flex;gap:4px;background:#F2EFE9;padding:4px;border-radius:11px;margin-bottom:18px}
.pr-tab{border:0;background:transparent;padding:8px 16px;border-radius:8px;cursor:pointer;font-family:"Plus Jakarta Sans",sans-serif;font-size:.9rem;font-weight:600;color:var(--ink-soft)}
.pr-tab.is-on{background:#fff;color:var(--green-deep);box-shadow:0 1px 3px rgba(0,0,0,.07)}
.pr-felder{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:20px}
.pr-feld{display:flex;flex-direction:column;gap:6px}
.pr-feld > span{font-size:.86rem;font-weight:600;color:var(--ink-soft)}
.pr-feld input,.pr-feld select{padding:10px 12px;border:1px solid var(--hair-strong);border-radius:10px;font-size:1rem;font-family:inherit;background:#fff}
.pr-feld input:focus,.pr-feld select:focus{outline:2px solid var(--green-deep);outline-offset:1px}
.pr-ergebnis{min-height:70px}
.pr-zahl{display:flex;flex-direction:column;gap:3px;padding:18px 20px;background:#EFF7F2;border-radius:13px;border-left:4px solid var(--green-deep)}
.pr-label{font-size:.8rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--green-deep);font-family:"Plus Jakarta Sans",sans-serif}
.pr-zahl strong{font-size:2rem;line-height:1.1;font-variant-numeric:tabular-nums}
.pr-sub{font-size:.92rem;color:var(--ink-soft)}
.pr-detailzeile{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:11px;font-size:.86rem;color:var(--ink-soft)}
.pr-grund{color:var(--muted);font-style:italic}
.pr-verteilung{margin-top:11px;font-size:.94rem;color:var(--ink-soft)}
.pr-hinweis{margin-top:20px;padding-top:16px;border-top:1px solid var(--hair);font-size:.87rem;color:var(--ink-soft)}
.pr-hinweis p{margin:0 0 9px}
.pr-warnung{padding:11px 13px;background:#FDF6EE;border-left:3px solid #B5651D;border-radius:8px;color:#7A4A15}
@media (max-width:620px){.pr-felder{grid-template-columns:1fr}.pr-zahl strong{font-size:1.7rem}}

/* ---------- Mahlzeiten-Baukasten ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.swf-mahlzeit{display:flex;flex-direction:column;gap:22px}
.mz-block{border:1px solid var(--hair);border-radius:16px;padding:22px;background:#FDFCFA}
.mz-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.mz-kopf h3{display:flex;align-items:center;gap:10px;font-size:1.08rem;margin:0}
.mz-nr{display:inline-flex;align-items:center;justify-content:center;width:25px;height:25px;border-radius:50%;background:var(--green-deep);color:#fff;font-family:"Plus Jakarta Sans",sans-serif;font-size:13px;font-weight:700;flex-shrink:0}
.mz-anzahl{font-size:.85rem;color:var(--green-deep);font-weight:600}

.mz-suchzeile{display:grid;grid-template-columns:1fr 130px auto;gap:11px;align-items:end;margin-bottom:16px}
.mz-suchfeld{position:relative}
.mz-treffer{position:absolute;top:100%;left:0;right:0;z-index:30;background:#fff;border:1px solid var(--hair-strong);border-radius:11px;box-shadow:var(--shadow-lg);margin-top:4px;max-height:290px;overflow-y:auto}
.mz-treffer button{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;padding:10px 13px;border:0;background:transparent;cursor:pointer;border-bottom:1px solid var(--hair)}
.mz-treffer button:last-child{border-bottom:0}
.mz-treffer button:hover{background:#EFF7F2}
/* Fokus NICHT entfernen — sonst ist die Liste per Tastatur unbedienbar.
   outline:none war hier ein echter Fehler (WCAG 2.4.7 Fokus sichtbar). */
.mz-treffer button:focus-visible{background:#EFF7F2;outline:3px solid var(--green-deep);outline-offset:-3px}
.mz-tn{font-size:.95rem;font-weight:600}
.mz-tw{font-size:.8rem;color:var(--muted)}
.mz-gramm{display:flex;flex-direction:column;gap:6px}
.mz-gramm span{font-size:.82rem;font-weight:600;color:var(--ink-soft)}
.mz-gramm input{padding:10px 12px;border:1px solid var(--hair-strong);border-radius:10px;font-size:1rem;font-family:inherit;width:100%}

.mz-tabelle-wrap{overflow-x:auto}
.mz-tabelle{width:100%;border-collapse:collapse;font-size:.92rem}
.mz-tabelle th{text-align:left;font-family:"Plus Jakarta Sans",sans-serif;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:0 9px 8px;border-bottom:1px solid var(--hair)}
.mz-tabelle th.num,.mz-tabelle td.num{text-align:right;font-variant-numeric:tabular-nums}
.mz-tabelle td{padding:9px;border-bottom:1px solid var(--hair)}
.mz-tabelle tr:last-child td{border-bottom:0}
.mz-g{width:66px;padding:5px 7px;border:1px solid var(--hair);border-radius:7px;text-align:right;font-size:.9rem;font-family:inherit}
.mz-del{width:25px;height:25px;border:0;background:transparent;color:var(--muted);font-size:19px;line-height:1;cursor:pointer;border-radius:6px}
.mz-del:hover{background:#FDF0EC;color:var(--orange)}
.mz-leer{color:var(--muted);font-size:.93rem;text-align:center;padding:22px 0;margin:0}

.mz-portionen{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;color:var(--ink-soft)}
.mz-pm{width:27px;height:27px;border:1px solid var(--hair-strong);background:#fff;border-radius:7px;cursor:pointer;font-size:15px;line-height:1;color:var(--green-deep)}
.mz-pm:hover{background:var(--green-deep);color:#fff;border-color:var(--green-deep)}
.mz-portionen b{min-width:17px;text-align:center}

.mz-werte{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:11px}
.mz-kachel{display:flex;flex-direction:column;gap:2px;padding:14px 16px;background:#fff;border:1px solid var(--hair);border-radius:12px}
.mz-kachel.mz-haupt{background:#EFF7F2;border-color:#CFE6DA}
.mz-kl{font-size:.76rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-family:"Plus Jakarta Sans",sans-serif}
.mz-kachel strong{font-size:1.32rem;font-variant-numeric:tabular-nums;line-height:1.2}
.mz-kachel.mz-haupt strong{font-size:1.75rem;color:var(--green-deep)}
.mz-ke{font-size:.79rem;color:var(--muted)}
.mz-gesamt{grid-column:1/-1;font-size:.85rem;color:var(--muted);padding-top:9px;border-top:1px solid var(--hair);margin-top:4px}

.mz-einordnung{margin-top:20px;padding-top:17px;border-top:1px solid var(--hair)}
.mz-einordnung h4{font-family:"Plus Jakarta Sans",sans-serif;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--green-deep);margin:0 0 11px}
.mz-einordnung ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.mz-einordnung li{padding:10px 13px;border-radius:9px;font-size:.92rem;line-height:1.5;border-left:3px solid}
.mz-p-gut{background:#EFF7F2;border-color:var(--green-deep);color:#14503A}
.mz-p-info{background:#F5F3EE;border-color:#B9B2A4;color:#4A463E}
.mz-p-warn{background:#FDF6EE;border-color:#B5651D;color:#7A4A15}
.mz-e-hinweis{font-size:.83rem;color:var(--muted);margin:12px 0 0;font-style:italic}

.mz-speicherzeile{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.mz-namefeld{flex:1;min-width:190px}
.mz-namefeld input{width:100%;padding:10px 13px;border:1px solid var(--hair-strong);border-radius:10px;font-size:1rem;font-family:inherit}
.mz-datenschutz{font-size:.82rem;color:var(--muted);margin:11px 0 0}

.mz-eigene-liste{display:flex;flex-direction:column;gap:9px}
.mz-eigen{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 15px;background:#fff;border:1px solid var(--hair);border-radius:11px;flex-wrap:wrap}
.mz-eigen-info{display:flex;flex-direction:column;gap:2px}
.mz-eigen-info span{font-size:.83rem;color:var(--muted)}
.mz-eigen-akt{display:flex;gap:7px}
.mz-eigen-akt .btn{padding:6px 13px;font-size:.85rem}

@media (max-width:720px){
  .mz-suchzeile{grid-template-columns:1fr;gap:10px}
  .mz-block{padding:17px}
  .mz-tabelle{font-size:.86rem}
}
@media print{
  .mz-suchzeile,.mz-del,.mz-pm,.mz-speicherzeile,.mz-eigene,.mz-datenschutz,header,footer{display:none!important}
  .mz-block{border:none;padding:0;background:none}
}

/* Werkzeug-Kacheln: gesperrte Werkzeuge sichtbar, aber nicht anklickbar */
.swf-werkzeuge .kcard.is-gesperrt{opacity:.62;cursor:default}
.mz-gesperrt-hinweis{font-family:"Plus Jakarta Sans",sans-serif;font-size:13px;font-weight:600;color:#B5651D;margin-top:auto}

/* ---------- Nährstoffplaner ---------- */
.swf-np{display:flex;flex-direction:column;gap:22px}
.np-block{border:1px solid var(--hair);border-radius:16px;padding:22px;background:#FDFCFA}
.np-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.np-kopf h3{display:flex;align-items:center;gap:10px;font-size:1.08rem;margin:0}
.np-nr{display:inline-flex;align-items:center;justify-content:center;width:25px;height:25px;border-radius:50%;background:var(--green-deep);color:#fff;font-family:"Plus Jakarta Sans",sans-serif;font-size:13px;font-weight:700;flex-shrink:0}
.np-anzahl{font-size:.85rem;color:var(--green-deep);font-weight:600}
.np-intro{font-size:.94rem;color:var(--ink-soft);margin:0 0 15px}
.np-auswahl{display:flex;flex-wrap:wrap;gap:9px}
.np-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border:1px solid var(--hair-strong);border-radius:999px;cursor:pointer;font-size:.92rem;background:#fff;transition:all .15s}
.np-chip:hover{border-color:var(--green-deep)}
.np-chip.is-on{background:#EFF7F2;border-color:var(--green-deep);color:var(--green-deep);font-weight:600}
.np-chip input{margin:0}

.np-plan{display:flex;flex-direction:column;gap:16px}
.np-slot{border:1px solid var(--hair);border-radius:13px;padding:16px 18px;background:#fff}
.np-slot-kopf{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.np-slot-kopf h4{font-family:"Plus Jakarta Sans",sans-serif;font-size:1rem;font-weight:700;color:var(--green-deep);margin:0}
.np-slot-zeit{font-size:.85rem;color:var(--muted)}
.np-slot-hinweis{font-size:.87rem;color:var(--ink-soft);margin:5px 0 12px;padding-bottom:10px;border-bottom:1px solid var(--hair)}
.np-slot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.np-item{display:flex;flex-direction:column;gap:3px}
.np-item b{font-size:1rem}
.np-zusatz{font-size:.85rem;color:var(--orange);font-weight:600}
.np-warum{margin-top:3px}
.np-warum summary{font-size:.84rem;color:var(--green-deep);cursor:pointer;font-weight:600}
.np-warum p{font-size:.89rem;color:var(--ink-soft);margin:7px 0 0;line-height:1.55;padding-left:13px;border-left:2px solid var(--hair)}

.np-konflikte{display:flex;flex-direction:column;gap:13px}
.np-gruppe{padding:13px 16px;border-radius:11px;border-left:3px solid}
.np-gruppe h4{font-family:"Plus Jakarta Sans",sans-serif;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin:0 0 8px}
.np-gruppe ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;font-size:.93rem}
.np-gut{background:#EFF7F2;border-color:var(--green-deep)}
.np-gut h4{color:#14503A}
.np-warn{background:#FDF6EE;border-color:#B5651D}
.np-warn h4{color:#7A4A15}
.np-ok{color:var(--green-deep);font-size:.94rem;margin:0}

.np-sicherheit{background:#FDF6EE;border-color:#EBD9C4}
.np-sicherheit h3{font-size:1rem;color:#7A4A15;margin:0 0 11px}
.np-sicherheit ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:.91rem;line-height:1.55;color:#5A4630}
.np-sicherheit li{padding-left:15px;position:relative}
.np-sicherheit li::before{content:"•";position:absolute;left:0;color:#B5651D;font-weight:700}
.np-grenze{font-size:.86rem;color:#6B5A44;margin:14px 0 0;padding-top:12px;border-top:1px solid #EBD9C4;font-style:italic}

@media (max-width:620px){.np-block{padding:17px}.np-auswahl{gap:7px}.np-chip{font-size:.87rem;padding:7px 12px}}
@media print{
  .np-auswahl,.np-intro,#npDruck,.np-nr,header,footer{display:none!important}
  .np-block{border:1px solid #ddd;padding:14px;background:none;break-inside:avoid}
  .np-warum{display:block}
  .np-warum summary{display:none}
  .np-warum p{border-left:2px solid #ccc;margin-top:4px}
  .np-slot{break-inside:avoid}
}

/* ---------- Artikel-Kennung ---------- */
.artikel-id{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:26px 0 0;padding:11px 14px;background:#F7F5F0;border-radius:9px;font-size:.84rem;color:var(--muted)}
.aid-label{font-weight:600;color:var(--ink-soft)}
.artikel-id code{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.86rem;background:#fff;padding:2px 8px;border-radius:5px;border:1px solid var(--hair);color:var(--green-deep);font-weight:600;letter-spacing:.02em}
.aid-hinweis{font-size:.8rem;flex-basis:100%}
@media print{.artikel-id{background:none;border:1px solid #ddd;padding:8px 10px}.aid-hinweis{display:none}}

/* ============================================================
   Barrierefreiheit — WCAG 2.1 Level AA
   ============================================================
   Der Prüfmaßstab des BFSG ist EN 301 549, die auf WCAG 2.1 AA verweist.
   Die folgenden Regeln setzen die technischen Mindestanforderungen um.
   ------------------------------------------------------------ */

/* 2.4.7 Fokus sichtbar — gilt für ALLE bedienbaren Elemente.
   focus-visible zeigt die Markierung nur bei Tastaturbedienung, nicht
   bei Mausklick. Das ist der Kompromiss zwischen Optik und Bedienbarkeit. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--green-deep);
  outline-offset: 2px;
  border-radius: 2px;
}
/* Auf dunklem Grund heller Rahmen, sonst wäre er unsichtbar */
.topbar a:focus-visible,
footer a:focus-visible {
  outline-color: #fff;
}

/* 2.5.5 Zielgröße — Klickflächen mindestens 44×44 Pixel.
   Betrifft vor allem kleine Schaltflächen wie Plus/Minus-Regler. */
button, .btn, .ek-pm, .mz-pm, .pr-tab {
  min-height: 44px;
  min-width: 44px;
}
/* Ausnahme: Elemente in Textfluss oder Tabellen, wo 44px stören würden */
.mz-del, .swf-share-btn {
  min-height: 32px;
  min-width: 32px;
}

/* 1.4.4 Textgröße — relative Einheiten, damit Zoom auf 200 % funktioniert.
   Feste Pixelwerte für Schrift würden das Vergrößern verhindern. */
html { font-size: 100%; }

/* 1.4.12 Textabstand — Nutzer müssen Abstände überschreiben können,
   ohne dass Inhalt verlorengeht. Deshalb keine festen Höhen bei Textblöcken. */
p, li, td, th, dd { overflow-wrap: break-word; }

/* 2.3.3 Bewegung reduzieren — respektiert die Systemeinstellung.
   Für Menschen mit vestibulären Störungen können Animationen Übelkeit auslösen. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* 1.4.3 Kontrast — hoher Kontrastmodus des Systems berücksichtigen */
@media (prefers-contrast: more) {
  :root {
    --ink-soft: #2c2c2c;
    --muted: #3a3a3a;
    --hair: #767676;
  }
}

/* Skiplink — sichtbar, sobald er den Fokus erhält */
.skiplink {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 12px 20px;
  background: var(--green-deep);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.skiplink:focus {
  left: 8px;
  top: 8px;
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* Nur für Screenreader — visuell versteckt, aber vorgelesen */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.sr-only:focus {
  position: static !important;
  width: auto; height: auto;
  clip: auto; margin: 0;
}

/* Tabellen: Kopfzeilen deutlich abheben (1.3.1 Info und Beziehungen) */
table th { text-align: left; font-weight: 700; }

/* Pflichtfelder nicht nur farblich kennzeichnen (1.4.1 Ohne Farbe nutzbar) */
.pflicht::after { content: " *"; color: var(--orange); font-weight: 700; }

/* ============================================================
   Kachelbilder in den Übersichten
   ============================================================
   Übersichten mit fünfzig Texteinträgen sind anstrengend zu lesen — das Auge
   findet keinen Halt. Ein Bildstreifen je Kachel gliedert die Liste, ohne den
   Text zu verdrängen.

   Wo kein Foto vorliegt, tritt ein abstrahierter Kurvenverlauf an seine
   Stelle. Das ist bewusst kein Stockfoto: Ein Bild von Obst sagt nichts über
   einen Artikel zur Insulinresistenz. Die Kurve passt zum Charakter der
   Seite — sie ist Datenvisualisierung, keine Dekoration.
   ------------------------------------------------------------ */

.kbild{
  display:block;
  width:100%;
  height:74px;
  overflow:hidden;
  border-radius:10px 10px 0 0;
  background:#FAF9F6;
  position:relative;
  flex-shrink:0
}
.kbild img{
  width:100%;height:100%;
  object-fit:contain;
  padding:8px;
  display:block
}
.kbild svg{width:100%;height:100%;display:block}

/* Fotos vertragen etwas mehr Höhe — dort ist tatsächlich etwas zu sehen */
.kbild-foto{height:96px;background:#F7F5F0}

/* Motive dezent halten: Sie gliedern, sie stehen nicht im Vordergrund */
.kbild-motiv{height:64px;opacity:.92}

.kbild-initialen{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-family:"Plus Jakarta Sans",sans-serif;
  font-size:1.4rem;font-weight:800;
  color:var(--green-deep);letter-spacing:.03em
}

/* Textkacheln in Wissen und Praxislabor: Bild sitzt oben, Text darunter */
.wissen-card{display:flex;flex-direction:column;overflow:hidden;padding:0}
.wissen-card .kbild{border-radius:0}
.wissen-card > *:not(.kbild){margin-left:20px;margin-right:20px}
.wissen-card > *:not(.kbild):first-of-type{margin-top:16px}
.wissen-card-go{margin-bottom:18px}

/* Beim Überfahren hebt sich das Motiv leicht — dezent, kein Effekt um seiner selbst willen */
.wissen-card:hover .kbild-motiv,
.kcard:hover .kbild-motiv{opacity:1}

@media (prefers-reduced-motion:reduce){
  .kbild,.kbild-motiv{transition:none}
}

@media (max-width:520px){
  .kbild-foto{height:78px}
  .kbild-motiv{height:52px}
}


/* ============================================================
   v60.2 — verbindliche Bilddarstellung in Kategorie-Kacheln
   ============================================================
   Bilder werden vollständig gezeigt. Produktverpackungen und komplette
   Artikelillustrationen dürfen nicht mit object-fit:cover abgeschnitten
   werden. Alle Kacheln erhalten dasselbe 16:9-Bildfenster.
   ------------------------------------------------------------ */
.wissen-card .kbild,
.kcard .kbild,
.kcard-media .kbild{
  display:block;
  width:100%;
  height:auto !important;
  aspect-ratio:16 / 9;
  overflow:hidden;
  border-radius:0;
  background:#F7F8F4;
}
.wissen-card .kbild img,
.kcard .kbild img,
.kcard-media .kbild img{
  display:block;
  width:100%;
  height:100%;
  padding:12px;
  object-fit:contain !important;
  object-position:center;
  transform:none !important;
}
.wissen-card .kbild svg,
.kcard .kbild svg,
.kcard-media .kbild svg{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.kbild-artikelbild{background:#FAFAF7}
.kbild-motiv{opacity:1}
.wissen-card:hover .kbild img,
.kcard:hover .kbild img{transform:none !important}
@media (max-width:520px){
  .wissen-card .kbild,
  .kcard .kbild,
  .kcard-media .kbild{aspect-ratio:16 / 9;height:auto !important}
}


/* ============================================================
   v60.3 — konsistente Übersichts-Kacheln und kompaktere Startseite
   Findings: PRJ-QM-P0-006 bis PRJ-QM-P2-011
   ============================================================
   Diese abschließende Kaskade vereinheitlicht Blog, Wissen, Praxislabor,
   Produkte, Rezepte und Tools. Bilder stehen immer oben und werden vollständig
   gezeigt; kein `cover` darf Verpackungen, Etiketten oder Motive abschneiden.
   ------------------------------------------------------------ */
.card-grid,
.wissen-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  align-items:stretch;
}
.kcard-media,
.swf-content-card{
  display:flex;
  flex-direction:column !important;
  min-width:0;
  height:100%;
  padding:0 !important;
  overflow:hidden;
  background:var(--white);
  border:1px solid var(--hair);
  border-radius:var(--radius);
}
.kcard-media .kcard-body,
.swf-content-card .kcard-body{
  display:flex;
  flex:1;
  min-width:0;
  flex-direction:column;
  padding:20px 22px 22px !important;
}
.kcard-media .kbild,
.kcard-media .kcard-bild,
.swf-content-card .kbild{
  width:100% !important;
  flex:0 0 auto !important;
  height:auto !important;
  aspect-ratio:16 / 9;
  overflow:hidden;
  border:0 !important;
  border-bottom:1px solid var(--hair) !important;
  border-radius:0 !important;
  background:linear-gradient(145deg,#f7f8f4,#fff);
}
.kcard-media .kbild img,
.kcard-media .kcard-bild img,
.swf-content-card .kbild img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
  padding:14px !important;
  transform:none !important;
}
.kcard-media .kbild svg,
.kcard-media .kcard-bild svg,
.swf-content-card .kbild svg{
  width:100%;height:100%;display:block;object-fit:contain;
}
.kcard-media h3,
.swf-content-card h2,
.swf-content-card h3{overflow-wrap:anywhere}
.wissen-card > *:not(.kbild){margin-left:22px;margin-right:22px}
.wissen-card > *:not(.kbild):first-of-type{margin-top:18px}
.wissen-card-go{margin-top:auto;margin-bottom:20px}
.kcard .more{margin-top:auto}

/* Produktverpackungen bewusst kleiner: ausreichend Weißraum, kein Crop. */
.post-type-archive-produkt .kbild img,
.product-grid .kbild img{padding:20px !important}

/* Tool-Schnellauswahl als vollwertige Kachelübersicht. */
.tool-picker{margin:0 0 42px}
.tool-picker-head{max-width:720px;margin-bottom:22px}
.tool-picker-head h2{font-size:clamp(1.7rem,3vw,2.35rem);margin:10px 0 8px}
.tool-picker-head p{color:var(--ink-soft)}
.tool-picker-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.tool-tile{position:relative;display:grid;grid-template-columns:44px 1fr;grid-template-areas:"visual visual" "num cat" "title title" "desc desc";gap:7px 10px;padding:0 18px 20px;overflow:hidden;background:var(--white);border:1px solid var(--hair);border-radius:18px;box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s,border-color .18s}
.tool-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--mint-2)}
.tool-tile-visual{grid-area:visual;display:flex;align-items:center;justify-content:center;height:108px;margin:0 -18px 8px;background:linear-gradient(145deg,var(--mint),#fff);border-bottom:1px solid var(--hair)}
.tool-tile-visual svg{width:58px;height:58px;color:var(--green-deep)}
.tool-tile .tt-num{grid-area:num;align-self:center;width:34px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:999px;background:var(--green-deep);color:#fff;font:700 12px/1 "Plus Jakarta Sans",sans-serif}
.tool-tile .tt-cat{grid-area:cat;align-self:center;color:var(--green-deep);font:700 12px/1.2 "Plus Jakarta Sans",sans-serif;text-transform:uppercase;letter-spacing:.04em}
.tool-tile .tt-title{grid-area:title;font-family:"Fraunces",serif;font-size:1.2rem;line-height:1.25;color:var(--ink)}
.tool-tile .tt-desc{grid-area:desc;color:var(--ink-soft);font-size:.9rem;line-height:1.45}

/* Rezepte: sichtbare Kacheloptik auch ohne redaktionelles Foto. */
.rez-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.rez-card{overflow:hidden;border-radius:20px;background:var(--white);border:1px solid var(--hair);box-shadow:var(--shadow-sm)}
.rez-bild{height:auto;aspect-ratio:16/9;background-size:contain;background-repeat:no-repeat;background-position:center;background-color:#F7F8F4;border-bottom:1px solid var(--hair)}
.rez-bild-ph{font-size:3.3rem}

/* Die Startseite bleibt markant, aber nicht randfüllend oder übergroß. */
body.home #hauptinhalt > section:first-child{padding:42px 0 46px !important}
body.home #hauptinhalt > section:first-child > .wrap{max-width:1060px !important;gap:34px !important;grid-template-columns:minmax(0,1.12fr) minmax(260px,.72fr) !important}
body.home #hauptinhalt > section:first-child h1{font-size:clamp(2.45rem,5vw,3.45rem) !important;max-width:13ch}
body.home #hauptinhalt > section:first-child p{max-width:56ch}
body.home #hauptinhalt > section:first-child img{max-height:420px;object-fit:cover}
body.home #hauptinhalt section.block > .wrap,
body.home #hauptinhalt section:not(:first-child) > .wrap{max-width:1080px}
body.home section.block{padding:62px 0}

@media(max-width:1020px){
  .card-grid,.wissen-grid,.tool-picker-grid,.rez-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.home #hauptinhalt > section:first-child > .wrap{grid-template-columns:1fr 320px !important}
}
@media(max-width:760px){
  .card-grid,.wissen-grid,.tool-picker-grid,.rez-grid{grid-template-columns:1fr}
  body.home #hauptinhalt > section:first-child > .wrap{grid-template-columns:1fr !important;max-width:650px !important}
  body.home #hauptinhalt > section:first-child h1{font-size:clamp(2.2rem,10vw,3rem) !important}
  body.home #hauptinhalt > section:first-child img{max-height:360px;width:100%}
}

/* v60.3 mobile navigation: desktop actions must not push the burger out of the viewport. */
@media(max-width:900px){
  .nav-inner{height:68px;gap:10px}
  .brand{font-size:19px;min-width:0}
  .brand svg{width:34px;height:34px}
  header.nav nav.links,
  header.nav .nav-cta,
  header.nav .lang-switch{display:none !important}
  header.nav .burger{display:flex !important;margin-left:auto;flex:0 0 46px}
}

/* v60.3 small-screen containment for footer and inline homepage illustrations. */
@media(max-width:600px){
  footer .foot-grid{grid-template-columns:1fr !important;gap:28px !important}
  footer .foot-col,footer .foot-brand{min-width:0;width:100%}
  body.home #hauptinhalt [style*="grid-template-columns"]{grid-template-columns:1fr !important}
  body.home #hauptinhalt svg{max-width:100% !important;height:auto !important}
  body.home #hauptinhalt .wrap,body.home #hauptinhalt .reveal{min-width:0;max-width:100%}
}



/* ============================================================
   v60.4 — zentrierte Navigation, ruhigere Archivbreite, freundliche Artwork-Karten
   Requirements: PRJ-INS-20260727-UI-ARTWORK
   Findings: PRJ-QM-P1-012 bis PRJ-QM-P2-018
   ============================================================ */
@media(min-width:901px){
  .nav-inner{display:grid!important;grid-template-columns:minmax(190px,1fr) auto minmax(190px,1fr);align-items:center;column-gap:18px}
  .nav-inner>.brand{grid-column:1;justify-self:start}
  .nav-inner>nav.links{grid-column:2;justify-self:center;margin-left:0!important}
  .nav-actions{grid-column:3;justify-self:end;display:flex;align-items:center;gap:10px}
}
:is(body.post-type-archive-wissen,body.post-type-archive-praxistest,body.post-type-archive-produkt,body.post-type-archive-rezept,body.blog) .page-head>.wrap,
:is(body.post-type-archive-wissen,body.post-type-archive-praxistest,body.post-type-archive-produkt,body.post-type-archive-rezept,body.blog) section.block>.wrap{max-width:1040px!important}
:is(body.post-type-archive-wissen,body.post-type-archive-praxistest,body.post-type-archive-produkt,body.post-type-archive-rezept,body.blog) :is(.card-grid,.wissen-grid,.tool-picker-grid,.rez-grid){max-width:1040px;margin-left:auto;margin-right:auto;gap:18px!important}
:is(body.post-type-archive-wissen,body.post-type-archive-praxistest,body.post-type-archive-produkt,body.post-type-archive-rezept,body.blog) :is(.kcard,.wissen-card,.rez-card,.tool-tile){border-radius:18px;box-shadow:0 7px 22px rgba(20,60,40,.07)}
:is(body.post-type-archive-wissen,body.post-type-archive-praxistest,body.post-type-archive-produkt,body.post-type-archive-rezept,body.blog) :is(.kbild,.kcard-bild,.rez-bild,.tool-tile-visual){aspect-ratio:16/9!important;height:auto!important;background:#F8FAF7!important}
:is(body.post-type-archive-wissen,body.post-type-archive-praxistest,body.post-type-archive-produkt,body.post-type-archive-rezept,body.blog) :is(.kbild,.kcard-bild,.rez-bild,.tool-tile-visual) img{display:block;width:100%!important;height:100%!important;object-fit:contain!important;padding:0!important}
@media(max-width:1020px){:is(body.post-type-archive-wissen,body.post-type-archive-praxistest,body.post-type-archive-produkt,body.post-type-archive-rezept,body.blog) :is(.card-grid,.wissen-grid,.tool-picker-grid,.rez-grid){grid-template-columns:repeat(2,minmax(0,1fr))!important;max-width:760px}}
@media(max-width:640px){:is(body.post-type-archive-wissen,body.post-type-archive-praxistest,body.post-type-archive-produkt,body.post-type-archive-rezept,body.blog) :is(.card-grid,.wissen-grid,.tool-picker-grid,.rez-grid){grid-template-columns:1fr!important;max-width:440px}}


/* ============================================================
   v60.5 FINAL — centered navigation, compact content width,
   rights-safe category artwork, smaller editorial cards.
   ============================================================ */
:root{--swf-content-final:980px;--swf-card-gap-final:18px}
@media(min-width:901px){
  .nav-inner{grid-template-columns:minmax(170px,1fr) minmax(0,auto) minmax(170px,1fr)!important;max-width:1240px!important}
  .nav-inner>nav.links{justify-content:center;gap:0!important}
  .nav-inner>nav.links a{padding:9px 10px;font-size:13.5px}
}
.swf-page-head-grid,.swf-tools-intro,.swf-blog-intro{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:34px;align-items:center;max-width:var(--swf-content-final)!important}
.swf-category-art{margin:0;background:#fff;border:1px solid var(--hair);border-radius:22px;overflow:hidden;box-shadow:0 12px 30px rgba(20,60,40,.08);aspect-ratio:4/3}
.swf-category-art img{display:block;width:100%;height:100%;object-fit:contain;padding:10px;background:linear-gradient(145deg,#fbfcf9,#fff)}
.tools-compact-wrap,.swf-blog-block>.wrap{max-width:var(--swf-content-final)!important}
.swf-tools-intro,.swf-blog-intro{margin:0 auto 34px}.swf-tools-intro h1,.swf-blog-intro h2{margin:8px 0 10px}.swf-tools-intro p,.swf-blog-intro p{color:var(--ink-soft);max-width:58ch}
:is(body.post-type-archive-wissen,body.post-type-archive-praxistest,body.post-type-archive-produkt,body.post-type-archive-rezept,body.blog) .page-head>.wrap,
:is(body.post-type-archive-wissen,body.post-type-archive-praxistest,body.post-type-archive-produkt,body.post-type-archive-rezept,body.blog) section.block>.wrap{max-width:var(--swf-content-final)!important}
:is(.wissen-grid,.card-grid,.rez-grid,.tool-picker-grid){grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--swf-card-gap-final)!important;max-width:var(--swf-content-final);margin-left:auto;margin-right:auto}
:is(.wissen-card,.kcard,.rez-card,.tool-tile){border-radius:17px!important;min-width:0;overflow:hidden}
:is(.wissen-card,.kcard,.rez-card) .kbild,:is(.wissen-card,.kcard,.rez-card) .kcard-bild,.rez-bild,.tool-tile-visual{aspect-ratio:4/3!important;height:auto!important;background:#f8faf7!important;overflow:hidden}
:is(.wissen-card,.kcard,.rez-card) :is(.kbild,.kcard-bild,.rez-bild) img,
:is(.wissen-card,.kcard,.rez-card) :is(.kbild,.kcard-bild,.rez-bild) svg,.tool-tile-visual img,.tool-tile-visual svg{width:100%!important;height:100%!important;display:block;object-fit:contain!important;object-position:center;padding:8px!important}
.wissen-card{padding:0!important}.wissen-card :is(.inhaltstyp-badge,.wissen-card-t,.wissen-card-x,.wissen-card-go){margin-left:17px;margin-right:17px}.wissen-card .inhaltstyp-badge{margin-top:15px}.wissen-card-t{font-size:1.08rem!important}.wissen-card-x{font-size:.91rem!important;line-height:1.48}.wissen-card-go{margin-bottom:17px}
.kcard-body{padding:16px 17px 18px!important}.kcard-body h3{font-size:1.08rem!important;line-height:1.3}.kcard-body p{font-size:.91rem;line-height:1.48}
.tool-picker{max-width:var(--swf-content-final);margin-left:auto;margin-right:auto}.tool-tile{padding:0 16px 17px!important}.tool-tile-visual{margin:0 -16px 13px!important;border-bottom:1px solid var(--hair)}
body.home #hauptinhalt>section:first-child>.wrap{max-width:var(--swf-content-final)!important;grid-template-columns:minmax(0,1.08fr) minmax(290px,.78fr)!important;gap:38px!important}
body.home #hauptinhalt>section:first-child h1{font-size:clamp(2.35rem,4.6vw,3.55rem)!important}
body.home #hauptinhalt section.block>.wrap,body.home #hauptinhalt section:not(:first-child)>.wrap{max-width:var(--swf-content-final)!important}
@media(max-width:1020px){:is(.wissen-grid,.card-grid,.rez-grid,.tool-picker-grid){grid-template-columns:repeat(2,minmax(0,1fr))}.swf-page-head-grid,.swf-tools-intro,.swf-blog-intro{grid-template-columns:minmax(0,1fr) 250px}}
@media(max-width:720px){.swf-page-head-grid,.swf-tools-intro,.swf-blog-intro{grid-template-columns:1fr}.swf-category-art{max-width:420px;margin-inline:auto}:is(.wissen-grid,.card-grid,.rez-grid,.tool-picker-grid){grid-template-columns:1fr;max-width:440px}}


/* ============================================================
   v60.6 FINAL — persönliche Karten, ruhige Breite, größere Navigation
   @requirements PRJ-INS-20260727-606-001..009
   @findings PRJ-QM-P1-606-001..008
   @tests SWF-V606-UI-01..12
   ============================================================ */
:root{--swf-content-v606:900px;--swf-card-gap-v606:16px}
@media(min-width:901px){
  .nav-inner{max-width:1280px!important;grid-template-columns:minmax(210px,1fr) auto minmax(210px,1fr)!important}
  .nav-inner>nav.links a{font-size:15.5px!important;font-weight:650!important;padding:10px 11px!important}
}
.cb-inner-solo{display:block!important;max-width:860px!important;padding:58px 24px!important;text-align:center}
.cb-inner-solo .cb-copy{max-width:760px;margin-inline:auto}.cb-inner-solo .social-row{justify-content:center}
:is(body.post-type-archive-wissen,body.post-type-archive-praxistest,body.post-type-archive-produkt,body.post-type-archive-rezept,body.blog) .page-head>.wrap,
:is(body.post-type-archive-wissen,body.post-type-archive-praxistest,body.post-type-archive-produkt,body.post-type-archive-rezept,body.blog) section.block>.wrap,
.tools-compact-wrap,.swf-blog-block>.wrap{max-width:var(--swf-content-v606)!important}
:is(.wissen-grid,.card-grid,.rez-grid,.tool-picker-grid){max-width:var(--swf-content-v606)!important;gap:var(--swf-card-gap-v606)!important}
:is(.wissen-card,.kcard,.rez-card,.tool-tile){box-shadow:0 6px 18px rgba(20,60,40,.065)!important}
:is(.wissen-card,.kcard,.rez-card) :is(.kbild,.kcard-bild,.rez-bild),.tool-tile-visual{aspect-ratio:4/3!important}
.rez-card{appearance:none;text-align:left;width:100%;font:inherit;color:inherit;cursor:pointer}
.rez-card .rez-open{margin-top:auto;color:var(--green-deep);font-weight:750;font-family:"Plus Jakarta Sans",sans-serif;font-size:.9rem}
.swf-rezept-dialog{border:0;border-radius:24px;padding:0;max-width:min(820px,calc(100% - 28px));width:100%;box-shadow:0 28px 90px rgba(16,50,33,.28);background:#fff; margin:auto;}
.swf-rezept-dialog::backdrop{background:rgba(14,35,25,.58);backdrop-filter:blur(4px)}
.swf-rezept-detail{padding:28px}.swf-rezept-detail-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.swf-rezept-close{border:1px solid var(--hair);background:#fff;border-radius:999px;width:42px;height:42px;font-size:1.35rem;cursor:pointer}
.swf-rezept-detail-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:28px;margin-top:22px}.swf-rezept-detail h3{margin:18px 0 8px}.swf-rezept-zutaten,.swf-rezept-schritte{line-height:1.65}.swf-rezept-werte{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.swf-rezept-werte span{background:var(--mint);padding:10px;border-radius:12px;text-align:center;font-size:.82rem}.swf-rezept-werte b{display:block;font-size:1.05rem;color:var(--green-deep)}
.swf-rezept-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.swf-rezept-actions .btn{border:0;cursor:pointer}
@media(max-width:720px){.swf-rezept-detail-grid{grid-template-columns:1fr}.swf-rezept-werte{grid-template-columns:repeat(2,1fr)}.swf-rezept-detail{padding:20px}}
/* Blogbilder bleiben Originale, werden aber vollständig und ruhig dargestellt. */
body.blog .kbild img,body.blog .preview-card-media img,.swf-blog-block img{object-fit:contain!important;background:#f8faf7!important;padding:6px!important}


/* ========================================================================
   v60.7 · Smarter Einkaufsplaner
   PRJ-INS-20260728-607-001..003 · PRJ-QM-P1-607-001
   ======================================================================== */
.swf-einkauf{max-width:1120px;margin:0 auto;padding:6px 0 32px}
.swf-einkauf-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,.46fr);gap:24px;align-items:end;margin:0 0 24px;padding:24px;border:1px solid var(--hair);border-radius:22px;background:linear-gradient(135deg,#fbfaf7 0%,#eef8f1 100%)}
.swf-einkauf-intro h2{margin:5px 0 8px;font-size:clamp(1.65rem,3vw,2.35rem)}
.swf-einkauf-intro p{margin:0;max-width:680px;color:var(--ink-soft)}
.swf-local-note{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:15px;background:#fff;border:1px solid rgba(21,96,55,.14);font-size:.84rem;color:var(--ink-soft)}
.swf-local-note strong{color:var(--green-deep)}
.swf-einkauf-layout{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(360px,.86fr);gap:24px;align-items:start}
.swf-einkauf-auswahl,.swf-einkauf-ergebnis{min-width:0}
.swf-einkauf-ergebnis{position:sticky;top:92px;padding:20px;border:1px solid var(--hair);border-radius:20px;background:#fff;box-shadow:0 14px 42px rgba(19,60,39,.07)}
.swf-einkauf-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.swf-einkauf-kopf h3{font-size:1.16rem;margin:0}.swf-einkauf-kopf span{font-size:.8rem;color:var(--muted)}
.ek-filterbar{display:grid;grid-template-columns:minmax(180px,1fr) minmax(150px,.55fr) auto;gap:9px;align-items:center;margin-bottom:12px}
.ek-filterbar select{height:44px;border:1px solid var(--hair-strong);border-radius:11px;background:#fff;padding:0 34px 0 12px;color:var(--ink)}
.ek-switch{display:inline-flex;align-items:center;gap:8px;font-size:.84rem;white-space:nowrap;cursor:pointer;color:var(--ink-soft)}
.ek-switch input{width:18px;height:18px;accent-color:var(--green)}
.swf-einkauf-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-height:780px;overflow:auto;padding:3px 6px 8px 2px;scrollbar-gutter:stable}
.ek-rezept-card{display:grid;grid-template-columns:86px minmax(0,1fr);gap:12px;min-height:152px;padding:10px;border:1px solid var(--hair);border-radius:16px;background:#fff;transition:border-color .18s,box-shadow .18s,transform .18s}
.ek-rezept-card:hover{transform:translateY(-1px);border-color:#b9d9c5;box-shadow:0 8px 24px rgba(19,60,39,.08)}
.ek-rezept-card.is-on{border-color:#69bb88;background:#f5fbf7;box-shadow:0 0 0 2px rgba(42,168,96,.10)}
.ek-rezept-bild{border-radius:12px;background:#f2f7f3;overflow:hidden;align-self:stretch;min-height:122px}
.ek-rezept-bild img{width:100%;height:100%;object-fit:cover;display:block}
.ek-rezept-inhalt{min-width:0;display:flex;flex-direction:column;gap:8px}
.ek-rezept-wahl{display:flex;align-items:flex-start;gap:8px;cursor:pointer}.ek-rezept-wahl input{margin-top:4px;accent-color:var(--green)}
.ek-rezept-wahl span{min-width:0}.ek-rezept-wahl small{display:block;color:var(--green-deep);text-transform:uppercase;letter-spacing:.045em;font-size:.62rem;font-weight:700}.ek-rezept-wahl strong{display:block;font-size:.91rem;line-height:1.25;color:var(--ink)}
.ek-rezept-naehrwerte{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}.ek-rezept-naehrwerte span{padding:4px 6px;border-radius:7px;background:#f5f3ed;font-size:.61rem;color:var(--muted);line-height:1.15}.ek-rezept-naehrwerte b{color:var(--green-deep);font-size:.69rem}
.ek-rezept-fuss{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;font-size:.72rem;color:var(--muted)}
.ek-portionen{display:inline-flex;align-items:center;gap:6px}.ek-pm{width:27px;height:27px;border:1px solid var(--hair-strong);background:#fff;border-radius:8px;cursor:pointer;font-size:16px;line-height:1;color:var(--green-deep)}.ek-pm:hover{background:var(--green-deep);color:#fff}.ek-portionen b{min-width:19px;text-align:center;color:var(--ink)}
.ek-plan-naehrwerte{padding:14px;border-radius:15px;background:linear-gradient(135deg,#eef8f1,#f9f7f1);margin-bottom:12px}.ek-summary-head{display:flex;justify-content:space-between;gap:10px;font-size:.78rem;color:var(--green-deep);font-weight:700;margin-bottom:9px}.ek-nutri-total{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.ek-nutri-total span{background:#fff;border:1px solid rgba(28,91,52,.10);padding:7px 5px;border-radius:9px;text-align:center;font-size:.63rem;color:var(--muted)}.ek-nutri-total b{display:block;font-size:.87rem;color:var(--green-deep)}.ek-plan-naehrwerte p{font-size:.72rem;color:var(--muted);margin:8px 0 0}
.ek-result-toolbar{display:flex;justify-content:flex-end;margin:0 0 8px}.ek-fortschritt{margin:0 0 12px}.ek-progress-text{display:flex;justify-content:space-between;font-size:.76rem;color:var(--ink-soft);margin-bottom:5px}.ek-progress-bar{height:7px;border-radius:99px;background:#e9eee9;overflow:hidden}.ek-progress-bar span{display:block;height:100%;background:linear-gradient(90deg,#2aa860,#72ca91);border-radius:inherit;transition:width .2s}
.swf-einkauf-ausgabe{border:1px solid var(--hair);border-radius:15px;padding:14px 16px;max-height:530px;overflow:auto;min-height:180px;background:#fff}
.ek-selected-recipes{padding-bottom:12px;margin-bottom:13px;border-bottom:1px solid var(--hair)}.ek-selected-recipes>h4,.ek-gruppe h4{font-family:"Plus Jakarta Sans",sans-serif;font-size:11px;font-weight:800;letter-spacing:.055em;text-transform:uppercase;color:var(--green-deep);margin:0 0 8px}
.ek-selected-row{display:flex;align-items:flex-start;justify-content:space-between;gap:9px;padding:7px 0}.ek-selected-row strong{display:block;font-size:.82rem;line-height:1.25}.ek-selected-row small{display:block;color:var(--muted);font-size:.68rem;margin-top:2px}.ek-remove{border:0;background:#f5eee9;color:#934b36;border-radius:99px;width:25px;height:25px;cursor:pointer;flex:0 0 auto}
.ek-gruppe{margin-bottom:16px}.ek-gruppe:last-child{margin-bottom:0}.ek-gruppe h4{padding-bottom:5px;border-bottom:1px solid var(--hair)}.ek-gruppe ul{list-style:none;margin:0;padding:0}.ek-gruppe li{padding:5px 0}.ek-gruppe label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:.86rem}.ek-gruppe input{accent-color:var(--green)}.ek-gruppe li.is-done .ek-name{text-decoration:line-through;color:var(--muted)}.ek-menge{margin-left:auto;color:var(--ink-soft);font-variant-numeric:tabular-nums;font-size:.78rem;white-space:nowrap}
.swf-einkauf-aktionen{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:12px}.swf-einkauf-aktionen .btn{padding:9px 8px;font-size:.75rem}.swf-einkauf-hinweis{font-size:.72rem;color:var(--muted);margin:10px 0 0}.ek-leer{color:var(--muted);font-size:.9rem;text-align:center;padding:24px 8px;margin:0}.swf-einkauf-zaehler{font-size:.78rem;color:var(--green-deep);font-weight:700}
@media(max-width:1020px){.swf-einkauf-layout{grid-template-columns:1fr}.swf-einkauf-ergebnis{position:static}.swf-einkauf-liste{max-height:none}}
@media(max-width:720px){.swf-einkauf-intro{grid-template-columns:1fr;padding:18px}.ek-filterbar{grid-template-columns:1fr 1fr}.ek-filterbar .ek-switch{grid-column:1/-1}.swf-einkauf-liste{grid-template-columns:1fr}.ek-nutri-total{grid-template-columns:repeat(2,1fr)}.swf-einkauf-aktionen{grid-template-columns:1fr}.swf-einkauf-ergebnis{padding:15px}}
@media(max-width:420px){.ek-rezept-card{grid-template-columns:74px minmax(0,1fr)}.ek-rezept-naehrwerte{grid-template-columns:1fr 1fr}.ek-filterbar{grid-template-columns:1fr}.ek-filterbar .ek-switch{grid-column:auto}}
@media print{.swf-einkauf-auswahl,.swf-einkauf-aktionen,.swf-einkauf-intro,.ek-result-toolbar,header,footer,.topbar{display:none!important}.swf-einkauf-layout{display:block}.swf-einkauf-ergebnis{position:static;border:0;box-shadow:none;padding:0}.swf-einkauf-ausgabe{max-height:none;overflow:visible;border:0;padding:0}.ek-remove{display:none}}

/* --------------------------------------------------------------------------
 * v60.7.1 – wiederhergestelltes Startseitenmotiv
 * Die freigegebene Gesamtkomposition enthält Bildrahmen und Hinweise bereits.
 * Deshalb werden keine zusätzlichen Blob-/Sticker-Ebenen darübergelegt.
 * -------------------------------------------------------------------------- */
.hero-photo.hero-photo-restored {
  position: relative;
  width: 100%;
  max-width: 618px;
  margin-inline: auto;
  overflow: visible;
}
.hero-photo-restored .hero-photo-composed {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
@media (max-width: 720px) {
  .hero-photo.hero-photo-restored {
    max-width: 540px;
  }
}


/* ========================================================================
   v60.7.2 · Einkaufsplaner als vollwertiger Hauptbereich
   Requirements: PRJ-INS-20260728-6072-001..003
   Findings: PRJ-QM-P1-6072-001 (zu schmale Karten), -002 (fehlender Hauptmenülink),
             -003 (fehlender direkter Einstieg aus der Rezeptübersicht)
   ======================================================================== */
@media (min-width:1261px){
  header.nav>.wrap{max-width:1380px}
  .nav-inner{grid-template-columns:minmax(185px,1fr) auto minmax(170px,1fr)!important;column-gap:12px!important}
  .nav-inner>nav.links{gap:0!important}
  .nav-inner>nav.links a{font-size:15px!important;padding:9px 9px!important}
}
@media (min-width:901px) and (max-width:1260px){
  .nav-inner{display:flex!important}
  header.nav nav.links,header.nav .nav-cta,header.nav .lang-switch{display:none!important}
  header.nav .burger{display:flex!important;margin-left:auto}
}

/* Direkter Einstieg oberhalb der Rezeptsuche. */
.swf-shopping-cta{
  display:grid;grid-template-columns:62px minmax(0,1fr) auto;gap:18px;align-items:center;
  margin:0 auto 24px;padding:20px 22px;border:1px solid #cfe6d8;border-radius:20px;
  background:linear-gradient(135deg,#edf8f1 0%,#fffaf2 100%);box-shadow:0 10px 28px rgba(23,63,43,.07)
}
.swf-shopping-cta-icon{display:grid;place-items:center;width:62px;height:62px;border-radius:17px;background:#fff;color:var(--green-deep);box-shadow:0 6px 18px rgba(23,63,43,.08)}
.swf-shopping-cta-icon svg{width:38px;height:38px}
.swf-shopping-cta-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.swf-shopping-cta-copy small{font:800 11px/1.2 "Plus Jakarta Sans",sans-serif;letter-spacing:.055em;text-transform:uppercase;color:var(--green-deep)}
.swf-shopping-cta-copy strong{font:600 clamp(1.05rem,2vw,1.28rem)/1.3 "Fraunces",serif;color:var(--ink)}
.swf-shopping-cta-copy span{font-size:.9rem;color:var(--ink-soft)}
.swf-shopping-cta-button{white-space:nowrap;padding:12px 18px;font-size:.9rem}
@media(max-width:760px){.swf-shopping-cta{grid-template-columns:52px 1fr}.swf-shopping-cta-button{grid-column:1/-1;justify-content:center}.swf-shopping-cta-icon{width:52px;height:52px}}

/* Der Shortcode darf aus einer schmalen Standard-Lesespalte ausbrechen. */
.swf-einkauf-v6072{
  width:min(1180px,calc(100vw - 40px));max-width:none!important;
  margin:0 0 40px 50%!important;transform:translateX(-50%);
}
.swf-einkauf-v6072 .swf-einkauf-intro{
  grid-template-columns:minmax(0,1fr) minmax(260px,.38fr);align-items:center;
  padding:26px 28px;margin-bottom:28px;background:linear-gradient(130deg,#eef8f1 0%,#fffaf2 100%);
}
.swf-einkauf-v6072 .swf-einkauf-layout{grid-template-columns:minmax(0,1.55fr) minmax(350px,.75fr);gap:28px}
.swf-einkauf-v6072 .swf-einkauf-auswahl{padding:22px;border:1px solid var(--hair);border-radius:22px;background:#fff;box-shadow:0 12px 36px rgba(23,63,43,.055)}
.swf-einkauf-v6072 .ek-filterbar{grid-template-columns:minmax(210px,1fr) minmax(155px,.42fr) auto;margin-bottom:16px}
.swf-einkauf-v6072 .swf-einkauf-liste{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-height:780px;padding:2px 8px 8px 2px;border:0;border-radius:0}
.swf-einkauf-v6072 .ek-rezept-card{grid-template-columns:112px minmax(0,1fr);gap:14px;min-height:172px;padding:12px;border-radius:18px}
.swf-einkauf-v6072 .ek-rezept-bild{min-height:146px;border:1px solid #e6eee8;background:linear-gradient(145deg,#f4faf6,#fffaf2)}
.swf-einkauf-v6072 .ek-rezept-bild img{object-fit:contain!important;padding:8px}
.swf-einkauf-v6072 .ek-rezept-wahl strong{font-size:.98rem;line-height:1.28}
.swf-einkauf-v6072 .ek-rezept-wahl small{font-size:.67rem;margin-bottom:2px}
.swf-einkauf-v6072 .ek-rezept-naehrwerte{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.swf-einkauf-v6072 .ek-rezept-naehrwerte span{display:flex;flex-direction:column;justify-content:center;min-height:41px;padding:5px 4px;text-align:center;font-size:.59rem;background:#f6f4ee}
.swf-einkauf-v6072 .ek-rezept-naehrwerte b{font-size:.72rem}
.swf-einkauf-v6072 .ek-rezept-fuss{padding-top:2px;border-top:1px solid #f0ede5}
.swf-einkauf-v6072 .swf-einkauf-ergebnis{top:96px;border-radius:22px;padding:22px}
.swf-einkauf-v6072 .ek-plan-naehrwerte{padding:16px}
.swf-einkauf-v6072 .swf-einkauf-ausgabe{max-height:575px;padding:16px 18px}
.swf-einkauf-v6072 .swf-einkauf-aktionen .btn{border-radius:12px;font-weight:700}
@media(max-width:1080px){
  .swf-einkauf-v6072 .swf-einkauf-layout{grid-template-columns:1fr}
  .swf-einkauf-v6072 .swf-einkauf-ergebnis{position:static}
  .swf-einkauf-v6072 .swf-einkauf-liste{max-height:none}
}
@media(max-width:780px){
  .swf-einkauf-v6072{width:calc(100vw - 24px)}
  .swf-einkauf-v6072 .swf-einkauf-intro{grid-template-columns:1fr;padding:20px}
  .swf-einkauf-v6072 .swf-einkauf-auswahl{padding:16px}
  .swf-einkauf-v6072 .swf-einkauf-liste{grid-template-columns:1fr}
  .swf-einkauf-v6072 .ek-filterbar{grid-template-columns:1fr 1fr}
  .swf-einkauf-v6072 .ek-filterbar .ek-switch{grid-column:1/-1}
}
@media(max-width:500px){
  .swf-einkauf-v6072 .ek-filterbar{grid-template-columns:1fr}
  .swf-einkauf-v6072 .ek-filterbar .ek-switch{grid-column:auto}
  .swf-einkauf-v6072 .ek-rezept-card{grid-template-columns:88px minmax(0,1fr);min-height:154px}
  .swf-einkauf-v6072 .ek-rezept-bild{min-height:128px}
  .swf-einkauf-v6072 .ek-rezept-naehrwerte{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ========================================================================
   v60.7.3 · Originalbilder in Blog/Produkten, ruhiger CTA
   Requirements: PRJ-INS-20260728-6073-001/002
   ======================================================================== */
.swf-blog-block .more svg,
body.preview-blog .preview-card-go svg {display:none !important}
.swf-blog-block .more {display:inline-flex;align-items:center;min-height:28px}
.post-type-archive-produkt .kbild img,
.preview-products .preview-card-media img {
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
  padding:10px !important;
  background:#fff !important;
}

/* ==========================================================================
   v60.7.4 – zentrierter Einstieg auf der Startseite
   Requirements: PRJ-INS-20260728-6074-002
   Finding: PRJ-QM-P2-6074-002
   ========================================================================== */
.swf-start-cta{
  background:var(--sand);
  padding:34px 20px;
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
}
.swf-start-cta .wrap{
  display:flex;
  justify-content:center;
}
.swf-start-cta-card{
  width:min(100%,760px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:30px 36px;
  text-align:center;
  background:var(--white);
  border:1px solid var(--hair);
  border-radius:22px;
  box-shadow:var(--shadow-sm);
}
.swf-start-cta-icon{
  width:50px;
  height:50px;
  border-radius:15px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--green-deep);
  background:var(--mint);
  flex:0 0 auto;
}
.swf-start-cta-icon svg{width:25px;height:25px}
.swf-start-cta-copy h3{
  margin:0 0 5px;
  font-size:1.24rem;
  font-weight:700;
}
.swf-start-cta-copy p{
  margin:0;
  font-size:.96rem;
  color:var(--ink-soft);
}
.swf-start-cta .btn{margin-top:4px}
@media(max-width:640px){
  .swf-start-cta{padding:26px 14px}
  .swf-start-cta-card{padding:26px 20px}
}


/* ============================================================
   v60.7.5 — größere Startseitenkarten und vollständig gruppierte News
   Requirements: PRJ-INS-20260728-NEWS-001
   Findings: PRJ-QM-P1-6075-001, PRJ-QM-P2-6075-002
   ============================================================ */
.swf-home-progress-card{
  padding:30px 30px 24px!important;
  border-radius:30px!important;
  min-height:430px;
}
.swf-home-progress-card .trace-head .t{font-size:1.08rem!important}
.swf-home-progress-card .trace-svg{min-height:210px}
.swf-home-progress-card .trace-legend{font-size:1rem;gap:24px}
.swf-home-progress-card .trace-note{font-size:1rem;line-height:1.55;padding-top:18px}
.swf-home-content-types{
  padding:34px 34px!important;
  gap:24px!important;
  border-radius:28px!important;
  min-height:390px;
  justify-content:center;
}
.swf-home-content-types>span{font-size:.82rem!important}
.swf-home-content-types>div{gap:18px!important}
.swf-home-content-types>div>span{width:48px!important;height:48px!important;border-radius:15px!important}
.swf-home-content-types>div>span svg{width:25px!important;height:25px!important}
.swf-home-content-types>div>div>div:first-child{font-size:1.13rem!important;margin-bottom:5px}
.swf-home-content-types>div>div>div:last-child{font-size:1rem!important;line-height:1.6}

.swf-news-head .wrap{max-width:980px}
.swf-news-head .intro{max-width:760px}
.swf-news-stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.swf-news-stats span{display:inline-flex;gap:5px;align-items:center;background:#fff;border:1px solid var(--hair);border-radius:999px;padding:8px 13px;color:var(--ink-soft);font-size:.88rem}
.swf-news-stats b{color:var(--green-deep)}
.swf-news-page>.wrap{max-width:980px}
.news-filter{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:28px}
.news-chip{display:inline-flex;align-items:center;gap:7px}
.news-chip span{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:99px;background:rgba(23,128,73,.09);font-size:.72rem}
.news-chip.active span{background:rgba(255,255,255,.18)}
.swf-news-category-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin:0 0 30px}
.swf-news-category{display:flex;align-items:center;gap:12px;padding:15px;background:#fff;border:1px solid var(--hair);border-radius:16px;color:inherit;text-decoration:none;box-shadow:var(--shadow-sm);transition:.2s}
.swf-news-category:hover{transform:translateY(-2px);border-color:rgba(23,128,73,.28);box-shadow:var(--shadow)}
.swf-news-category-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex:0 0 40px;border-radius:12px;background:var(--mint);color:var(--green-deep);font-family:'Plus Jakarta Sans',sans-serif;font-weight:800}
.swf-news-category b,.swf-news-category small{display:block}.swf-news-category b{font-family:'Plus Jakarta Sans',sans-serif;font-size:.91rem}.swf-news-category small{margin-top:3px;color:var(--slate);font-size:.75rem}
.swf-news-search-label{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;color:var(--ink);margin-bottom:8px}
.swf-news-search{margin-bottom:34px!important}
.swf-news-groups{display:grid;gap:42px}
.swf-news-group-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:15px;border-bottom:1px solid var(--hair);padding-bottom:12px}
.swf-news-group-head h2{margin:5px 0 0;font-size:1.65rem}.swf-news-group-head>span{font-size:.8rem;color:var(--slate)}
.swf-news-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.swf-news-grid .news-card{display:flex;flex-direction:column;min-height:270px;padding:22px}
.swf-news-grid .news-title{font-size:1.22rem}
.swf-news-grid .news-foot{margin-top:auto}
.swf-news-grid .news-rubrik{max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:900px){.swf-home-progress-card{min-height:0}.swf-home-content-types{min-height:0}.swf-news-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.swf-home-progress-card{padding:23px 18px 18px!important}.swf-home-progress-card .trace-svg{min-height:170px}.swf-home-content-types{padding:26px 22px!important}.swf-news-category-grid,.swf-news-grid{grid-template-columns:1fr}.swf-news-group-head{align-items:flex-start}.swf-news-group-head>span{white-space:nowrap}}


/* ==========================================================================
   v60.7.7 – optische Bündigkeit, lesbare Praxis-Illustration und News-Inhalte
   Requirements: PRJ-INS-20260728-6077-001..005
   Findings: PRJ-QM-P1-6077-001..004
   ========================================================================== */
:root{
  --swf-align-width:980px;
  --swf-card-inset:18px;
}

/* Startseiten-Verlauf: kein doppeltes Label und keine leere SVG-Unterseite. */
.swf-home-progress-card{
  min-height:0!important;
  padding:28px!important;
}
.swf-home-progress-card .trace-head{
  margin-bottom:10px;
  align-items:center;
}
.swf-home-progress-card .trace-head .t{
  max-width:none;
  font-size:1.08rem!important;
  line-height:1.3;
}
.swf-home-progress-card .trace-head .live{display:none!important}
.swf-home-progress-card .trace-svg{
  display:block;
  width:100%;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:800 / 230;
  margin:0;
}
.swf-home-progress-card .trace-legend{
  margin-top:12px;
  padding-top:12px;
  gap:22px;
}
.swf-home-progress-card .trace-note{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:14px;
  margin-top:14px;
  padding-top:14px;
  font-size:.96rem!important;
  line-height:1.48!important;
}
.swf-home-progress-card .trace-note .fw{
  white-space:nowrap;
  margin:0;
}

/* Alle Archivköpfe und Kachelraster folgen derselben linken/rechten Achse. */
.swf-page-head-grid,
.swf-tools-intro,
.swf-blog-intro,
:is(body.post-type-archive-wissen,body.post-type-archive-praxistest,body.post-type-archive-produkt,body.post-type-archive-rezept,body.blog) .page-head>.wrap,
:is(body.post-type-archive-wissen,body.post-type-archive-praxistest,body.post-type-archive-produkt,body.post-type-archive-rezept,body.blog) section.block>.wrap,
.tools-compact-wrap,
.swf-blog-block>.wrap{
  width:100%;
  max-width:var(--swf-align-width)!important;
  margin-inline:auto!important;
}
:is(.wissen-grid,.card-grid,.rez-grid,.tool-picker-grid){
  width:100%!important;
  max-width:var(--swf-align-width)!important;
  margin-inline:auto!important;
  gap:20px!important;
}

/* Bild und Text einer Kachel beginnen und enden auf derselben Innenachse. */
:is(.wissen-card,.kcard,.rez-card,.tool-tile) :is(.kbild,.kcard-bild,.rez-bild,.tool-tile-visual){
  width:calc(100% - (2 * var(--swf-card-inset)))!important;
  margin:var(--swf-card-inset) var(--swf-card-inset) 0!important;
  border:1px solid var(--hair)!important;
  border-radius:14px!important;
  overflow:hidden!important;
  background:#f8faf7!important;
}
:is(.wissen-card,.kcard,.rez-card,.tool-tile) :is(.kbild,.kcard-bild,.rez-bild,.tool-tile-visual) img,
:is(.wissen-card,.kcard,.rez-card,.tool-tile) :is(.kbild,.kcard-bild,.rez-bild,.tool-tile-visual) svg{
  width:100%!important;
  height:100%!important;
  padding:0!important;
  object-fit:contain!important;
}
.wissen-card :is(.inhaltstyp-badge,.wissen-card-t,.wissen-card-x,.wissen-card-go){
  margin-left:var(--swf-card-inset)!important;
  margin-right:var(--swf-card-inset)!important;
}
.kcard-body,.rez-card-body{
  padding-left:var(--swf-card-inset)!important;
  padding-right:var(--swf-card-inset)!important;
}

/* Praxislabor-Kategorie: keine eingebettete Überschrift, kein Doppelrahmen,
   kein großer weißer Freiraum. */
.swf-category-art--praxislabor{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:hidden!important;
}
.swf-category-art--praxislabor img{
  width:100%!important;
  height:100%!important;
  padding:0!important;
  object-fit:cover!important;
  border-radius:22px;
}

/* News öffnet echte Meldungen; die zweite Kategorien-Kachelwand entfällt. */
.swf-news-category-grid{display:none!important}
.news-filter{
  margin-bottom:18px!important;
}
.news-filter .news-chip{
  border:1px solid var(--hair-strong);
  background:#fff;
  color:var(--ink-soft);
  border-radius:999px;
  padding:10px 14px;
  cursor:pointer;
  font-family:"Plus Jakarta Sans",sans-serif;
  font-size:.9rem;
}
.news-filter .news-chip:hover,
.news-filter .news-chip.active{
  background:var(--green-deep);
  color:#fff;
  border-color:var(--green-deep);
}
.swf-news-search{margin-bottom:28px!important}
.swf-news-group-head{
  align-items:center!important;
  margin-bottom:16px!important;
}
.swf-news-group-head h2{
  margin:0!important;
  font-size:1.55rem!important;
}
.swf-news-groups{gap:34px!important}

@media(max-width:720px){
  .swf-home-progress-card .trace-note{
    grid-template-columns:1fr;
    text-align:left;
  }
  .swf-home-progress-card .trace-note .fw{
    width:max-content;
    max-width:100%;
    white-space:normal;
  }
  :is(.wissen-card,.kcard,.rez-card,.tool-tile) :is(.kbild,.kcard-bild,.rez-bild,.tool-tile-visual){
    --swf-card-inset:14px;
  }
}

/* ========================================================================
   v60.7.8 – bereinigte Hauptnavigation und ruhige Startseiten-Auswertung
   Requirements: PRJ-INS-20260729-6078-002/003
   Findings: PRJ-QM-P2-6078-002/003
   ======================================================================== */
.swf-home-progress-card{
  padding:28px 28px 24px!important;
  min-height:0!important;
}
.swf-home-progress-card .trace-svg{
  display:block;
  width:100%;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:800/230;
  margin:0;
}
.swf-home-progress-card .trace-legend{
  margin-top:12px!important;
  padding-top:14px!important;
}
.swf-home-progress-card .swf-trace-summary{
  display:grid!important;
  grid-template-columns:minmax(170px,.72fr) minmax(0,1.28fr)!important;
  align-items:center!important;
  gap:20px!important;
  margin-top:16px!important;
  padding-top:18px!important;
  border-top:1px solid var(--hair)!important;
  color:var(--ink-soft)!important;
  font-size:.96rem!important;
  line-height:1.5!important;
}
.swf-trace-summary-label{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
  color:var(--green-deep);
}
.swf-trace-summary-label>svg{
  width:38px;
  height:38px;
  flex:0 0 38px;
  padding:8px;
  border-radius:12px;
  background:var(--mint);
}
.swf-trace-summary-label span{display:grid;gap:2px;min-width:0}
.swf-trace-summary-label b{
  font-family:"Plus Jakarta Sans",sans-serif;
  font-size:.94rem;
  line-height:1.25;
}
.swf-trace-summary-label small{
  color:var(--slate);
  font-size:.73rem;
  line-height:1.3;
  white-space:normal;
}
.swf-trace-summary-copy{
  display:block;
  color:var(--ink-soft);
  font-size:.96rem;
  line-height:1.55;
}
@media(max-width:700px){
  .swf-home-progress-card .swf-trace-summary{
    grid-template-columns:1fr!important;
    gap:12px!important;
  }
}


/* ========================================================================
   v60.7.9 – responsive Gesamtbreite, stabile Artikel und grafische Verlaufskarte
   Requirements: PRJ-INS-20260729-6079-001..003
   Findings: PRJ-QM-P1-6079-001/002, PRJ-QM-P2-6079-003
   Purpose:
   - Die Website nutzt große Desktopflächen sichtbar besser, ohne Lesbarkeit
     und optische Ruhe aufzugeben.
   - Einzelartikel erhalten eine zentrierte, responsive Lesespalte; Text,
     Tabellen, Abbildungen und Bildunterschriften folgen derselben Achse.
   - Die Auswertung rechts auf der Startseite wird als kompakte grafische
     Information statt als schmale Textspalte ausgegeben.
   ======================================================================== */
:root{
  --swf-shell-fluid:clamp(1180px,84vw,1640px);
  --swf-content-fluid:clamp(1080px,76vw,1400px);
  --swf-article-fluid:clamp(840px,64vw,1000px);
  --swf-page-gutter:clamp(18px,3.2vw,56px);
}

/* Der allgemeine Seitenrahmen wächst bis 1.640 px. Auf normalen Notebooks
   bleibt die bisherige Größe erhalten, auf großen Monitoren entsteht kein
   verloren wirkender Mini-Auftritt mehr. */
.wrap,
header.nav>.wrap,
.topbar>.wrap{
  box-sizing:border-box;
  width:min(calc(100% - (2 * var(--swf-page-gutter))),var(--swf-shell-fluid));
  max-width:none!important;
  margin-inline:auto!important;
  padding-inline:0!important;
}

/* Archive, News, Blog und Werkzeugseiten nutzen eine etwas ruhigere, aber
   ebenfalls mitwachsende Inhaltsbreite. */
.swf-page-head-grid,
.swf-tools-intro,
.swf-blog-intro,
.swf-news-head>.wrap,
.swf-news-page>.wrap,
.tools-compact-wrap,
.swf-blog-block>.wrap,
:is(body.post-type-archive-wissen,body.post-type-archive-praxistest,body.post-type-archive-produkt,body.post-type-archive-rezept,body.blog) .page-head>.wrap,
:is(body.post-type-archive-wissen,body.post-type-archive-praxistest,body.post-type-archive-produkt,body.post-type-archive-rezept,body.blog) section.block>.wrap{
  width:min(calc(100% - (2 * var(--swf-page-gutter))),var(--swf-content-fluid))!important;
  max-width:none!important;
  margin-inline:auto!important;
}
:is(.wissen-grid,.card-grid,.rez-grid,.tool-picker-grid,.swf-news-grid){
  width:100%!important;
  max-width:none!important;
}

/* Startseite: breiterer, ausgewogener Hero mit echter Nutzfläche auf großen
   Monitoren. Die rechte Spalte bleibt breit genug für Bild und Auswertung. */
body.home #hauptinhalt>section:first-child>.wrap{
  width:min(calc(100% - (2 * var(--swf-page-gutter))),var(--swf-shell-fluid))!important;
  max-width:none!important;
  grid-template-columns:minmax(0,1.08fr) minmax(430px,.92fr)!important;
  gap:clamp(38px,4.5vw,84px)!important;
  align-items:center!important;
}
body.home #hauptinhalt section:not(:first-child)>.wrap,
body.home #hauptinhalt section.block>.wrap{
  width:min(calc(100% - (2 * var(--swf-page-gutter))),var(--swf-content-fluid))!important;
  max-width:none!important;
}
body.home #hauptinhalt>section:first-child h1{
  font-size:clamp(2.75rem,4.1vw,4.75rem)!important;
  max-width:14ch!important;
}
body.home #hauptinhalt>section:first-child p{
  font-size:clamp(1.08rem,1.05vw,1.32rem)!important;
}
.hero-photo.hero-photo-restored{max-width:680px!important}

/* Grafisch strukturierte Auswertung: klare Kopfzeile und drei kompakte
   Erkenntniskarten. Dadurch bleibt die Aussage auch in einer schmaleren
   rechten Spalte verständlich und wirkt nicht wie ein zufälliger Textblock. */
.swf-home-progress-card{
  width:100%;
  padding:clamp(22px,2.1vw,34px)!important;
  border-radius:28px!important;
}
.swf-home-progress-card .trace-head{margin-bottom:12px!important}
.swf-home-progress-card .trace-head .t{
  font-size:clamp(1.08rem,1.15vw,1.32rem)!important;
  line-height:1.25!important;
}
.swf-home-progress-card .trace-svg{
  width:100%!important;
  aspect-ratio:800/230!important;
  min-height:0!important;
}
.swf-home-progress-card .trace-legend{
  display:flex!important;
  flex-wrap:wrap;
  gap:14px 24px!important;
  margin-top:12px!important;
  padding-top:13px!important;
}
.swf-home-progress-card .swf-trace-summary{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:14px!important;
  margin-top:15px!important;
  padding-top:16px!important;
  border-top:1px solid var(--hair)!important;
}
.swf-trace-story-head{
  display:flex;
  align-items:center;
  gap:12px;
}
.swf-trace-story-icon{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  flex:0 0 46px;
  border-radius:14px;
  color:var(--green-deep);
  background:var(--mint);
}
.swf-trace-story-icon svg{width:23px;height:23px}
.swf-trace-story-copy{display:grid;gap:2px;min-width:0}
.swf-trace-story-copy b{
  font:700 clamp(.92rem,1vw,1.05rem)/1.25 "Plus Jakarta Sans",sans-serif;
  color:var(--green-deep);
}
.swf-trace-story-copy small{
  color:var(--slate);
  font-size:.78rem;
  line-height:1.3;
}
.swf-trace-metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.swf-trace-metric{
  display:grid;
  gap:3px;
  min-width:0;
  padding:12px 13px;
  border:1px solid var(--hair);
  border-radius:14px;
  background:linear-gradient(145deg,#fff,#f4faf6);
}
.swf-trace-metric b{
  font:700 .82rem/1.25 "Plus Jakarta Sans",sans-serif;
  color:var(--ink);
}
.swf-trace-metric small{
  color:var(--ink-soft);
  font-size:.72rem;
  line-height:1.35;
}

@media(min-width:1800px){
  body{font-size:18px}
  nav.links a{font-size:15.5px}
  .brand{font-size:24px}
}
@media(max-width:1120px){
  body.home #hauptinhalt>section:first-child>.wrap{
    grid-template-columns:minmax(0,1fr) minmax(360px,.78fr)!important;
    gap:36px!important;
  }
}
@media(max-width:900px){
  body.home #hauptinhalt>section:first-child>.wrap{
    grid-template-columns:1fr!important;
    width:min(calc(100% - 32px),760px)!important;
  }
  .hero-photo.hero-photo-restored{max-width:620px!important}
}
@media(max-width:620px){
  :root{--swf-page-gutter:14px}
  .swf-trace-metrics{grid-template-columns:1fr}
  .swf-home-progress-card{padding:20px 17px!important}
}


/* ========================================================================
   v60.7.10 – kollisionsfreie Listenakzente und konsistenter Tools-Header
   Requirements: PRJ-INS-20260729-60710-001/002
   Findings: PRJ-QM-P1-60710-001, PRJ-QM-P2-60710-002
   Purpose:
   - Aufzählungspunkte bleiben in sämtlichen redaktionellen Hinweisboxen
     sicher rechts von Akzentlinien und werden nicht mehr überdeckt.
   - Rechner-&-Tools-Header, Hinweisbox, Kachelraster und Rechnerkarten folgen
     derselben responsiven Außenkante.
   ======================================================================== */
:root{
  --swf-tools-page-width:clamp(1040px,76vw,1280px);
}

/* Der Tools-Bereich bekommt einen eigenen, durchgehenden Layoutvertrag.
   Der Header ist kein losgelöster schmaler Block mehr, sondern verwendet
   dieselbe Achse wie Kacheln, Hinweise und eigentliche Rechner. */
.swf-tools-page .tools-compact-wrap{
  box-sizing:border-box;
  width:min(calc(100% - (2 * var(--swf-page-gutter,32px))),var(--swf-tools-page-width))!important;
  max-width:none!important;
  margin-inline:auto!important;
  padding-inline:0!important;
}
.swf-tools-page .swf-tools-intro{
  box-sizing:border-box;
  display:grid!important;
  grid-template-columns:minmax(0,1.35fr) minmax(280px,380px)!important;
  gap:clamp(32px,5vw,72px)!important;
  align-items:center!important;
  width:100%!important;
  max-width:none!important;
  margin:0 0 clamp(28px,3vw,42px)!important;
  padding:clamp(30px,3.2vw,52px)!important;
  border:1px solid var(--hair)!important;
  border-radius:26px!important;
  background:linear-gradient(135deg,#f2faf5 0%,#fbfaf6 100%)!important;
}
.swf-tools-page .swf-tools-intro>div:first-child{
  min-width:0;
  max-width:760px;
}
.swf-tools-page .swf-tools-intro h1{
  margin:8px 0 12px!important;
  font-size:clamp(2.45rem,4vw,4.2rem)!important;
  line-height:1.06!important;
}
.swf-tools-page .swf-tools-intro p{
  max-width:58ch!important;
  margin:0!important;
  font-size:clamp(1rem,.45vw + .94rem,1.18rem)!important;
  line-height:1.6!important;
}
.swf-tools-page .swf-tools-intro .swf-category-art{
  justify-self:end!important;
  width:100%!important;
  max-width:360px!important;
  aspect-ratio:4/3!important;
  margin:0!important;
}
.swf-tools-page :is(.callout-doc,.tool-picker,.tool-picker-grid,.tool-card){
  box-sizing:border-box;
  width:100%!important;
  max-width:none!important;
}
.swf-tools-page .tool-picker-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
@media(max-width:980px){
  .swf-tools-page .swf-tools-intro{
    grid-template-columns:minmax(0,1fr) minmax(240px,320px)!important;
    gap:30px!important;
    padding:32px!important;
  }
  .swf-tools-page .tool-picker-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:720px){
  .swf-tools-page .tools-compact-wrap{width:calc(100% - 28px)!important}
  .swf-tools-page .swf-tools-intro{
    grid-template-columns:1fr!important;
    padding:26px 22px!important;
  }
  .swf-tools-page .swf-tools-intro .swf-category-art{
    justify-self:center!important;
    max-width:360px!important;
  }
  .swf-tools-page .tool-picker-grid{grid-template-columns:1fr!important}
}


/* ========================================================================
   v60.7.11 – complete English parity and long-label navigation contract
   Requirements: PRJ-INS-20260729-60711-001
   Purpose: English labels use the same visual system without collisions.
   ======================================================================== */
.swf-lang-en header.nav .nav-inner{gap:clamp(8px,1vw,16px)!important}
.swf-lang-en header.nav nav.links{gap:clamp(1px,.35vw,6px)!important}
.swf-lang-en header.nav nav.links a{
  font-size:clamp(.78rem,.62vw + .2rem,.96rem)!important;
  padding-inline:clamp(5px,.45vw,9px)!important;
  white-space:nowrap!important;
}
.swf-lang-en header.nav .brand{font-size:clamp(1.25rem,1.35vw,1.65rem)!important}
.swf-lang-en header.nav .nav-actions{gap:8px!important}
@media(max-width:1180px){
  .swf-lang-en header.nav nav.links,.swf-lang-en header.nav .nav-actions{display:none!important}
  .swf-lang-en header.nav .burger{display:flex!important}
}
@media(min-width:1181px){
  .swf-lang-en header.nav .burger{display:none!important}
}
.swf-lang-en .mobile-menu a{font-size:1rem!important}

/* ========================================================================
   v60.7.13 – bündiger Blog und englische Medienparität
   Requirements: PRJ-INS-20260729-60712-001/002
   Findings: PRJ-QM-P1-60712-001/002
   ======================================================================== */
:root{--swf-blog-fluid:clamp(1080px,76vw,1400px)}
.swf-blog-intro,
.swf-blog-block>.wrap{
  box-sizing:border-box!important;
  width:min(calc(100% - (2 * var(--swf-page-gutter,32px))),var(--swf-blog-fluid))!important;
  max-width:none!important;
  margin-inline:auto!important;
}
.swf-blog-intro{
  grid-template-columns:minmax(0,1fr) minmax(260px,340px)!important;
  gap:clamp(30px,4vw,64px)!important;
}
.swf-blog-block .card-grid{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  margin-inline:0!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:clamp(18px,2vw,26px)!important;
}
.swf-blog-block .kcard{
  width:100%!important;
  min-width:0!important;
}
.swf-blog-block .kcard .kbild{
  width:calc(100% - 36px)!important;
  margin:18px 18px 0!important;
}
.swf-blog-block .kcard .kcard-body{
  padding-inline:18px!important;
}
.swf-original-language-figure{position:relative}
.swf-original-language-note{
  display:inline;
  margin-left:.35em;
  color:var(--slate);
  font-size:.85em;
  font-style:italic;
}
@media(max-width:980px){
  .swf-blog-block .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:680px){
  .swf-blog-intro{grid-template-columns:1fr!important}
  .swf-blog-block .card-grid{grid-template-columns:1fr!important}
}

/* v60.7.13: filtered recipe cards must leave the grid. */
.rez-card[hidden]{display:none!important}


/* v60.7.15 – Originalartikel und unveränderte Originalbilder im Blog */
.swf-originalartikel .swf-original-kopfbild img{width:100%;height:auto;display:block;object-fit:contain;background:#fff}
.swf-originalartikel article{max-width:780px;margin-inline:auto}
.swf-originalartikel .sources{max-width:780px;margin-inline:auto}
.swf-blog-block .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-width:960px!important;margin-inline:auto!important}
.swf-blog-block .kbild[data-swf-image-source="blog-original-upload"]{background:#fff}
.swf-blog-block .kbild[data-swf-image-source="blog-original-upload"] img{object-fit:contain;object-position:center;background:#fff}
@media(max-width:680px){.swf-blog-block .card-grid{grid-template-columns:1fr!important;max-width:560px!important}}


/* ========================================================================
   v60.7.15 – Startseiten-Parität, stabile Formatierung und dritter Blogartikel
   ======================================================================== */
.swf-home-site-note{
  display:flex;align-items:center;gap:14px;margin-top:34px;padding:16px 18px;
  background:#fff;border:1px solid var(--hair);border-radius:18px;
  box-shadow:var(--shadow-sm);max-width:560px;color:var(--ink-soft);
  font-size:13.5px;line-height:1.48
}
.swf-home-site-note b{display:block;color:var(--ink);font-family:'Plus Jakarta Sans';font-size:14px;margin-bottom:2px}
.swf-home-site-note-icon{width:52px;height:52px;border-radius:50%;flex:0 0 52px;background:linear-gradient(140deg,#3DB56F,#137E48);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:var(--shadow-sm)}
body.home #hauptinhalt>section:first-child>.wrap,
body.home main>section:first-child>.wrap{
  grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr)!important;
  align-items:start!important;gap:clamp(32px,4vw,54px)!important
}
body.home #hauptinhalt>section:first-child>.wrap>*,body.home main>section:first-child>.wrap>*{min-width:0}
.swf-blog-block .card-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;max-width:1200px!important;margin-inline:auto!important}
@media(max-width:980px){
  body.home #hauptinhalt>section:first-child>.wrap,body.home main>section:first-child>.wrap{grid-template-columns:1fr!important}
  .swf-blog-block .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:680px){
  .swf-home-site-note{align-items:flex-start;max-width:none}
  .swf-blog-block .card-grid{grid-template-columns:1fr!important;max-width:560px!important}
}


/* v60.7.20: Startseiten-Wissenskarten in DE und EN identisch zentrieren. */
.swf-home-knowledge-head{max-width:1120px;margin-left:auto;margin-right:auto}
.swf-home-knowledge-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  width:min(100%,1120px)!important;
  max-width:1120px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.swf-home-knowledge-grid .pcard-img{display:flex;align-items:center;justify-content:center}
.swf-home-knowledge-grid .pcard-img>svg,
.swf-home-knowledge-grid .pcard-img>img{display:block;width:100%;height:100%;object-position:center center}
@media(max-width:900px){.swf-home-knowledge-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-width:760px!important}}
@media(max-width:640px){.swf-home-knowledge-grid{grid-template-columns:1fr!important;max-width:440px!important}}


/* ========================================================================
   v60.7.21 – ruhige Einordnung und gemeinsame Archivachse
   ======================================================================== */
/* Öffentliche Statusplaketten werden nicht mehr gezeigt. Die Quellenlisten,
   n=1-Hinweise und der eigentliche Artikeltext bleiben unverändert sichtbar. */
.evi,
.evilabel,
span.tier{
  display:none!important;
}
.metabar>span:empty{display:none!important}
.swf-einordnung{
  margin:22px 0;
  padding:18px 20px;
  border:1px solid var(--hair);
  border-radius:16px;
  background:var(--sand);
}
.swf-einordnung>:first-child{margin-top:0}
.swf-einordnung>:last-child{margin-bottom:0}
.swf-einordnung-quelle{margin-top:10px;color:var(--slate)}

/* Header, Headerbild, Werkzeugleiste und Kartenraster verwenden exakt dieselbe
   Außenachse. Das gilt für DE und EN, unabhängig von der Anzahl der Karten. */
.swf-archive-axis{
  box-sizing:border-box;
  width:min(calc(100% - (2 * var(--swf-page-gutter))),var(--swf-content-fluid))!important;
  max-width:none!important;
  margin-inline:auto!important;
  padding-inline:0!important;
}
.swf-archive-axis.swf-page-head-grid{
  grid-template-columns:minmax(0,1fr) minmax(250px,320px)!important;
  gap:clamp(28px,3vw,46px)!important;
}
.swf-archive-axis :is(.wissen-grid,.card-grid,.rez-grid){
  width:100%!important;
  max-width:none!important;
  margin-inline:0!important;
}
@media(max-width:720px){
  .swf-archive-axis.swf-page-head-grid{grid-template-columns:1fr!important}
}


/* ========================================================================
   v60.7.24 – gemeinsames Blog-Kategoriemotiv in Deutsch und Englisch
   ======================================================================== */
.swf-blog-head>.wrap,
.swf-blog-block>.wrap{
  box-sizing:border-box!important;
  width:min(calc(100% - (2 * var(--swf-page-gutter,32px))),var(--swf-content-fluid,1400px))!important;
  max-width:none!important;
  margin-inline:auto!important;
}
.swf-blog-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,340px);
  gap:clamp(30px,4vw,64px);
  align-items:center;
  width:100%;
}
.swf-blog-hero h1{margin-top:10px}
.swf-blog-hero .intro{max-width:58ch}
.swf-category-art--blog img{
  padding:0!important;
  object-fit:cover!important;
  object-position:center!important;
  background:#fbfcf9!important;
}
@media(max-width:720px){
  .swf-blog-hero{grid-template-columns:1fr}
  .swf-blog-hero .swf-category-art{max-width:420px;margin-inline:auto}
}

/* ========================================================================
   v60.7.24 – finaler Blog- und Medienvertrag
   ======================================================================== */
/* Deutsch und Englisch verwenden dieselbe Achse, dasselbe Kategoriemotiv und
   dieselben Kartenmaße. Diese abschließende Regel überschreibt ältere
   experimentelle 2-/3-Spaltenvarianten. */
.swf-blog-head>.wrap,
.swf-blog-block>.wrap{
  box-sizing:border-box!important;
  width:min(calc(100% - (2 * var(--swf-page-gutter,32px))),var(--swf-content-fluid,1400px))!important;
  max-width:none!important;
  margin-inline:auto!important;
  padding-inline:0!important;
}
.swf-blog-hero{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(260px,340px)!important;
  align-items:center!important;
  gap:clamp(30px,4vw,64px)!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
}
.swf-category-art--blog{
  aspect-ratio:4/3!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  background:#fbfcf9!important;
}
.swf-category-art--blog img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  padding:0!important;
  object-fit:contain!important;
  object-position:center!important;
  background:#fbfcf9!important;
}
.swf-blog-block .card-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-auto-rows:1fr!important;
  align-items:stretch!important;
  gap:clamp(20px,2.2vw,30px)!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
}
.swf-blog-block .kcard{
  display:flex!important;
  flex-direction:column!important;
  width:100%!important;
  min-width:0!important;
  height:100%!important;
  overflow:hidden!important;
}
.swf-blog-block .kcard .kbild{
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:calc(100% - 36px)!important;
  aspect-ratio:16/9!important;
  margin:18px 18px 0!important;
  overflow:hidden!important;
  border:1px solid var(--hair)!important;
  border-radius:16px!important;
  background:#fff!important;
}
.swf-blog-block .kcard .kbild img,
.swf-blog-block .kcard .kbild svg{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  padding:0!important;
  object-fit:contain!important;
  object-position:center!important;
  background:#fff!important;
}
.swf-blog-block .kcard .kcard-body{
  box-sizing:border-box!important;
  display:flex!important;
  flex:1 1 auto!important;
  flex-direction:column!important;
  width:100%!important;
  padding:20px 22px 24px!important;
}
.swf-blog-block .kcard .kcard-body .more{margin-top:auto!important;padding-top:18px!important}
@media(max-width:980px){
  .swf-blog-block .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:680px){
  .swf-blog-hero{grid-template-columns:1fr!important}
  .swf-blog-hero .swf-category-art{width:min(100%,420px)!important;margin-inline:auto!important}
  .swf-blog-block .card-grid{grid-template-columns:1fr!important;max-width:560px!important;margin-inline:auto!important}
}

/* v60.7.24 – Newsletter, Blog und Formulare */
.nl-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:start}
.nl-form .nl-consent{grid-column:1/-1}
.nl-form .nl-consent input[type="checkbox"]{width:auto!important;height:auto!important;min-width:16px;min-height:16px;padding:0!important;border-radius:3px!important;flex:0 0 auto}
.nl-form .nl-note{grid-column:1/-1}
.swf-blog-page .preview-category-art img,.page-blog .preview-category-art img{object-fit:contain;object-position:center;padding:18px}
.swf-blog-grid,.swf-blog-page .card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
.swf-blog-grid .preview-card,.swf-blog-page .preview-card{height:100%}
.swf-blog-grid .preview-card-media,.swf-blog-page .preview-card-media{aspect-ratio:16/9;padding:0;background:#fff}
.swf-blog-grid .preview-card-media img,.swf-blog-page .preview-card-media img{width:100%;height:100%;object-fit:contain;object-position:center;padding:0}
@media(max-width:720px){.nl-form,.swf-blog-grid,.swf-blog-page .card-grid{grid-template-columns:1fr}.nl-form button{width:100%}}