/*
 * StoffwechselFit 61.1.0 R33
 * Complete portable CSS cascade.
 * Source order: style.css, artikel.css, v61-clean.css, category-standard-r32.css, r32-live.css, r32-articles.css
 */
:root{--swf-css-ready-r33:1;}

/* ===== BEGIN style.css ===== */
/*
 * @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: 61.1.0
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:0}
.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}
.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%}}
/* v60.7.26 exact DE/EN navigation parity */
@media(min-width:1101px){header.nav .nav-inner{display:grid!important;grid-template-columns:minmax(240px,1fr) auto minmax(240px,1fr)!important;max-width:1480px!important;height:76px!important;column-gap:14px!important}header.nav .nav-inner>.brand{grid-column:1!important;justify-self:start!important}header.nav .nav-inner>nav.links{grid-column:2!important;justify-self:center!important;margin:0!important;display:flex!important;gap:0!important}header.nav .nav-inner>nav.links a{font-size:14px!important;line-height:1.2!important;padding:10px 9px!important;font-weight:650!important;white-space:nowrap!important}header.nav .nav-actions{grid-column:3!important;justify-self:end!important;display:flex!important;gap:10px!important}.swf-lang-en header.nav .nav-inner,.swf-lang-de header.nav .nav-inner{grid-template-columns:minmax(240px,1fr) auto minmax(240px,1fr)!important}.swf-lang-en header.nav nav.links{gap:0!important}.swf-lang-en header.nav nav.links a{font-size:14px!important;padding:10px 9px!important;letter-spacing:0!important}}
@media(min-width:1101px) and (max-width:1320px){header.nav .nav-inner>nav.links a{font-size:12.8px!important;padding:9px 6px!important}header.nav .nav-inner{grid-template-columns:minmax(205px,1fr) auto minmax(205px,1fr)!important}}

/* ========================================================================
   v60.7.26 – definitive DE/EN navigation parity at every breakpoint
   Same structure, typography, spacing and visibility rules in both languages.
   ======================================================================== */
header.nav .nav-inner{gap:20px!important}
header.nav .brand{font-size:22px!important;line-height:1.6!important}
header.nav nav.links{gap:1px!important}
header.nav nav.links a{font-size:14.5px!important;line-height:1.6!important;padding:9px 12px!important}
header.nav .nav-actions{gap:10px!important}
@media(min-width:1101px){
  header.nav .nav-inner{gap:20px 14px!important}
  header.nav nav.links{gap:0!important}
  header.nav nav.links a{font-size:14px!important;line-height:1.2!important;padding:10px 9px!important}
  header.nav .nav-actions{display:flex!important;gap:10px!important}
  header.nav .burger{display:none!important}
}
@media(min-width:901px) and (max-width:1100px){
  header.nav .nav-inner{gap:20px 18px!important}
  header.nav nav.links{display:flex!important;gap:1px!important}
  header.nav nav.links a{font-size:14.5px!important;line-height:1.6!important;padding:9px 12px!important}
  header.nav .nav-actions{display:flex!important;gap:10px!important}
  header.nav .burger{display:none!important}
}
@media(max-width:900px){
  header.nav .nav-inner{gap:10px!important}
  header.nav .brand{font-size:19px!important;line-height:1.6!important}
  header.nav nav.links,header.nav .nav-actions{display:none!important}
  header.nav .burger{display:flex!important;margin-left:auto!important}
}

/* v60.7.26 language-specific specificity guard: old EN compact rules cannot win. */
.swf-lang-en header.nav .nav-inner,.swf-lang-de header.nav .nav-inner{gap:20px!important}
.swf-lang-en header.nav .brand,.swf-lang-de header.nav .brand{font-size:22px!important;line-height:1.6!important}
.swf-lang-en header.nav nav.links,.swf-lang-de header.nav nav.links{gap:1px!important}
.swf-lang-en header.nav nav.links a,.swf-lang-de header.nav nav.links a{font-size:14.5px!important;line-height:1.6!important;padding:9px 12px!important;letter-spacing:normal!important}
.swf-lang-en header.nav .nav-actions,.swf-lang-de header.nav .nav-actions{gap:10px!important}
@media(min-width:1101px){
  .swf-lang-en header.nav .nav-inner,.swf-lang-de header.nav .nav-inner{gap:20px 14px!important}
  .swf-lang-en header.nav nav.links,.swf-lang-de header.nav nav.links{display:flex!important;gap:0!important}
  .swf-lang-en header.nav nav.links a,.swf-lang-de header.nav nav.links a{font-size:14px!important;line-height:1.2!important;padding:10px 9px!important;letter-spacing:0!important}
  .swf-lang-en header.nav .nav-actions,.swf-lang-de header.nav .nav-actions{display:flex!important;gap:10px!important}
  .swf-lang-en header.nav .burger,.swf-lang-de header.nav .burger{display:none!important}
}
@media(min-width:901px) and (max-width:1100px){
  .swf-lang-en header.nav .nav-inner,.swf-lang-de header.nav .nav-inner{gap:20px 18px!important}
  .swf-lang-en header.nav nav.links,.swf-lang-de header.nav nav.links{display:flex!important;gap:1px!important}
  .swf-lang-en header.nav nav.links a,.swf-lang-de header.nav nav.links a{font-size:14.5px!important;line-height:1.6!important;padding:9px 12px!important}
  .swf-lang-en header.nav .nav-actions,.swf-lang-de header.nav .nav-actions{display:flex!important;gap:10px!important}
  .swf-lang-en header.nav .burger,.swf-lang-de header.nav .burger{display:none!important}
}
@media(max-width:900px){
  .swf-lang-en header.nav .nav-inner,.swf-lang-de header.nav .nav-inner{gap:10px!important}
  .swf-lang-en header.nav .brand,.swf-lang-de header.nav .brand{font-size:19px!important;line-height:1.6!important}
  .swf-lang-en header.nav nav.links,.swf-lang-de header.nav nav.links,
  .swf-lang-en header.nav .nav-actions,.swf-lang-de header.nav .nav-actions{display:none!important}
  .swf-lang-en header.nav .burger,.swf-lang-de header.nav .burger{display:flex!important;margin-left:auto!important}
}


/* ========================================================================
   v60.7.27 – slightly larger, identical DE/EN top navigation
   Final override after all historic navigation rules.
   ======================================================================== */
@media (min-width:1331px){
  .swf-lang-de header.nav .nav-inner,.swf-lang-en header.nav .nav-inner{max-width:1580px!important;grid-template-columns:minmax(220px,1fr) auto minmax(220px,1fr)!important;column-gap:12px!important}
  .swf-lang-de header.nav nav.links a,.swf-lang-en header.nav nav.links a{font-size:16px!important;line-height:1.3!important;padding:11px 12px!important;font-weight:680!important}
}
@media (min-width:1101px) and (max-width:1330px){
  .swf-lang-de header.nav .nav-inner,.swf-lang-en header.nav .nav-inner{grid-template-columns:minmax(190px,1fr) auto minmax(190px,1fr)!important;column-gap:8px!important}
  .swf-lang-de header.nav nav.links a,.swf-lang-en header.nav nav.links a{font-size:14.5px!important;line-height:1.25!important;padding:10px 7px!important;font-weight:670!important}
}
@media (min-width:901px) and (max-width:1100px){
  .swf-lang-de header.nav nav.links a,.swf-lang-en header.nav nav.links a{font-size:15px!important;line-height:1.35!important;padding:9px 10px!important;font-weight:670!important}
}


/* v60.7.27 final navigation size and bilingual card geometry */
@media (min-width:1331px){
  header.nav .nav-inner{max-width:1580px!important;grid-template-columns:minmax(220px,1fr) auto minmax(220px,1fr)!important;column-gap:12px!important}
  header.nav nav.links a{font-size:16px!important;line-height:1.3!important;padding:11px 12px!important;font-weight:680!important}
}
@media (min-width:1101px) and (max-width:1330px){
  header.nav .nav-inner{grid-template-columns:minmax(190px,1fr) auto minmax(190px,1fr)!important;column-gap:8px!important}
  header.nav nav.links a{font-size:14.5px!important;line-height:1.25!important;padding:10px 7px!important;font-weight:670!important}
}
@media (min-width:901px) and (max-width:1100px){header.nav nav.links a{font-size:15px!important;line-height:1.35!important;padding:9px 10px!important;font-weight:670!important}}
.preview-debug{display:none!important}
.preview-listing .preview-card,.preview-blog .preview-card{height:510px!important;min-height:510px!important}
.preview-card h2,.preview-card h3{display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:3!important;overflow:hidden!important;min-height:3.75em!important}
.preview-card p{display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:4!important;overflow:hidden!important;min-height:6.2em!important}
@media(max-width:720px){.preview-listing .preview-card,.preview-blog .preview-card{height:510px!important;min-height:510px!important}}


/* v60.7.27 specificity lock: one top-menu size for all page body classes */
@media (min-width:1331px){
  html body header.nav .nav-inner>nav.links a{font-size:16px!important;line-height:1.3!important;padding:11px 12px!important;font-weight:680!important}
}
@media (min-width:1101px) and (max-width:1330px){
  html body header.nav .nav-inner>nav.links a{font-size:14.5px!important;line-height:1.25!important;padding:10px 7px!important;font-weight:670!important}
}
@media (min-width:901px) and (max-width:1100px){html body header.nav .nav-inner>nav.links a{font-size:15px!important;line-height:1.35!important;padding:9px 10px!important;font-weight:670!important}}
@media(max-width:720px){.rez-grid .rez-card{height:464px!important;min-height:464px!important}}

/* v60.7.28 showcase article media */
.swf-showcase-hero img,.swf-showcase-figure img{display:block;width:100%;height:auto;object-fit:contain;background:#fff}
.swf-showcase-figure{margin:34px 0;border:1px solid var(--hair);border-radius:22px;overflow:hidden;background:#fff;box-shadow:var(--shadow-sm)}
.swf-showcase-figure figcaption{padding:14px 18px;color:var(--muted);font-size:.92rem;border-top:1px solid var(--hair)}
.swf-formula{margin:24px 0;padding:18px 22px;border-radius:16px;background:var(--mint);border-left:5px solid var(--green);font-family:"Plus Jakarta Sans",sans-serif}
@media(max-width:720px){.swf-showcase-figure{margin:24px 0}.swf-showcase-figure figcaption{font-size:.84rem}}
/* v60.7.28 — four-entry blog uses a balanced 2x2 editorial grid */
.swf-blog-block .card-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1040px;margin-inline:auto}
@media(max-width:760px){.swf-blog-block .card-grid{grid-template-columns:1fr;max-width:520px}}

/* v60.7.30 content depth and visual documentation */
.swf-depth-v60729{margin-top:3rem}.swf-depth-v60729>h2{margin-top:2.3rem}.swf-depth-figure{margin:2rem 0;border:1px solid var(--hair,#ded8cb);border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 10px 28px rgba(20,60,40,.08)}.swf-depth-figure img{display:block;width:100%;height:auto}.swf-depth-figure figcaption{padding:13px 18px;color:var(--ink-soft,#5b6d63);font-size:.94rem;border-top:1px solid var(--hair,#ded8cb)}

/* v60.7.30 — identical balanced four-card blog grid in DE and EN */
.swf-blog-block .card-grid,.preview-blog .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-width:1040px!important;margin-inline:auto!important}
@media(max-width:760px){.swf-blog-block .card-grid,.preview-blog .card-grid{grid-template-columns:1fr!important;max-width:520px!important}}

/* v60.7.30 — article-specific depth and editorial Blog graphics */
.swf-depth-v60730{margin-top:3rem}
.swf-depth-v60730>h2{margin-top:2.3rem}
.swf-depth-v60730 .swf-depth-figure{aspect-ratio:auto}
.swf-depth-v60730 .swf-depth-figure img{display:block;width:100%;height:auto;object-fit:contain;background:#fff}
.swf-blog-block .kbild[data-swf-image-source="v60730-editorial-blog-graphic"]{aspect-ratio:3/2!important;background:#eaf5fb!important}
.swf-blog-block .kbild[data-swf-image-source="v60730-editorial-blog-graphic"] img{object-fit:cover!important;object-position:center!important;background:#eaf5fb!important;padding:0!important}
figure.swf-blog-hero-v60730{max-width:980px;margin:24px auto 34px;border:1px solid var(--hair);border-radius:22px;overflow:hidden;background:#fff;box-shadow:var(--shadow-sm)}
figure.swf-blog-hero-v60730 img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;background:#fff}
figure.swf-blog-hero-v60730 figcaption{padding:12px 18px;color:var(--muted);font-size:.9rem;border-top:1px solid var(--hair)}
@media(max-width:760px){figure.swf-blog-hero-v60730{border-radius:16px}.swf-depth-v60730{margin-top:2rem}}


/* ========================================================================
   v60.7.36 – News-Header mit eigenem lokalem Kategoriemotiv
   ======================================================================== */
.swf-news-head>.swf-news-hero-grid,
.swf-news-head>.wrap.swf-news-hero-grid{
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(300px,460px)!important;
  align-items:center!important;
  gap:clamp(32px,4.5vw,76px)!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-news-hero-copy{min-width:0}
.swf-news-head .intro{max-width:760px!important}
.swf-category-art--news{
  width:min(100%,460px)!important;
  justify-self:end!important;
  aspect-ratio:4/3!important;
  background:#fbfaf5!important;
}
.swf-category-art--news img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  padding:0!important;
  background:#fbfaf5!important;
}
@media(max-width:820px){
  .swf-news-head>.swf-news-hero-grid,
  .swf-news-head>.wrap.swf-news-hero-grid{grid-template-columns:1fr!important}
  .swf-category-art--news{justify-self:center!important;width:min(100%,520px)!important}
}
/* ========================================================================
   v60.7.39 – Einheitliche Kachel- und Artikelbildsprache
   ======================================================================== */
:root{
  --swf-visual-paper:#FCFBF7;
  --swf-visual-sand:#F5F1E8;
  --swf-visual-green:#2AA860;
  --swf-visual-leaf:#173F2B;
  --swf-visual-ink:#20362A;
  --swf-visual-muted:#53685C;
  --swf-visual-hair:#E6E0D3;
  --swf-visual-radius:18px;
}

/* Same geometry for Knowledge, Field Lab, Product and Recipe archives. */
:is(body.post-type-archive-wissen,body.post-type-archive-praxistest,body.post-type-archive-produkt,body.post-type-archive-rezept)
:is(.kbild,.kcard-bild,.wissen-card .kbild,.rez-bild),
body.preview-listing:not(.preview-blog) .preview-card-media{
  box-sizing:border-box!important;
  width:100%!important;
  aspect-ratio:16/9!important;
  height:auto!important;
  min-height:0!important;
  overflow:hidden!important;
  border:0!important;
  border-bottom:1px solid var(--swf-visual-hair)!important;
  border-radius:0!important;
  background:var(--swf-visual-paper)!important;
}
:is(body.post-type-archive-wissen,body.post-type-archive-praxistest,body.post-type-archive-produkt,body.post-type-archive-rezept)
:is(.kbild,.kcard-bild,.wissen-card .kbild,.rez-bild) img,
body.preview-listing:not(.preview-blog) .preview-card-media img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  padding:0!important;
  background:var(--swf-visual-paper)!important;
  filter:saturate(.86) contrast(.97)!important;
}
:is(body.post-type-archive-wissen,body.post-type-archive-praxistest,body.post-type-archive-produkt,body.post-type-archive-rezept)
:is(.kcard,.wissen-card,.rez-card),
body.preview-listing:not(.preview-blog) .preview-card{
  overflow:hidden!important;
  border:1px solid var(--swf-visual-hair)!important;
  border-radius:20px!important;
  background:#fff!important;
  box-shadow:0 8px 25px rgba(32,54,42,.07)!important;
}
body.preview-listing:not(.preview-blog) .preview-grid{
  align-items:stretch!important;
  grid-auto-rows:1fr!important;
}
body.preview-listing:not(.preview-blog) .preview-card-body{
  display:flex!important;
  flex:1 1 auto!important;
  flex-direction:column!important;
}
body.preview-listing:not(.preview-blog) .preview-card-go{margin-top:auto!important}

/* The approved Blog series remains intentionally more colourful. */
body.preview-blog .preview-card-media img,
.swf-blog-block .kbild img{
  filter:none!important;
}

/* Card and article detail use the same visual source and geometry. */
figure.kopfbild.swf-individual-hero-art,
.preview-article-shell figure.kopfbild.swf-individual-hero-art{
  max-width:980px!important;
  margin:24px auto 34px!important;
  overflow:hidden!important;
  border:1px solid var(--swf-visual-hair)!important;
  border-radius:22px!important;
  background:var(--swf-visual-paper)!important;
  box-shadow:0 10px 28px rgba(32,54,42,.08)!important;
}
figure.kopfbild.swf-individual-hero-art img,
.preview-article-shell figure.kopfbild.swf-individual-hero-art img{
  display:block!important;
  width:100%!important;
  aspect-ratio:16/9!important;
  height:auto!important;
  object-fit:cover!important;
  object-position:center!important;
  background:var(--swf-visual-paper)!important;
  filter:saturate(.86) contrast(.97)!important;
}
figure.kopfbild.swf-individual-hero-art figcaption,
.preview-article-shell figure.kopfbild.swf-individual-hero-art figcaption{
  padding:12px 18px!important;
  border-top:1px solid var(--swf-visual-hair)!important;
  color:var(--swf-visual-muted)!important;
  font-size:.9rem!important;
}

/* Site-wide AI transparency notice – factual, not a conformity claim. */
.swf-ai-transparency-bar{
  box-sizing:border-box;
  margin:0;
  padding:13px var(--swf-page-gutter,24px);
  border-top:1px solid var(--swf-visual-hair);
  background:#F7F4EC;
  color:var(--swf-visual-muted);
  font-size:.88rem;
  line-height:1.55;
}
.swf-ai-transparency-bar .swf-ai-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  max-width:1180px;
  margin-inline:auto;
  text-align:center;
}
.swf-ai-transparency-bar a{color:var(--green-deep,#178049);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.swf-ai-badge{
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  min-width:30px;
  height:30px;
  border:1px solid #CCDCCF;
  border-radius:999px;
  background:#EAF6ED;
  color:#178049;
  font-weight:800;
}
@media(max-width:640px){
  .swf-ai-transparency-bar{padding-block:12px;font-size:.8rem}
  .swf-ai-transparency-bar .swf-ai-inner{align-items:flex-start;text-align:left}
  figure.kopfbild.swf-individual-hero-art{border-radius:16px!important}
}

/* ========================================================================
   v60.7.44 – Einheitlicher Kategorie- und Suchfilter in allen Übersichten
   ======================================================================== */
.swf-filter-shell{display:grid;gap:14px;margin:0 0 28px;padding:18px;border:1px solid var(--hair);border-radius:22px;background:rgba(255,255,255,.86);box-shadow:0 10px 30px rgba(23,52,4,.055);backdrop-filter:blur(8px)}
.swf-filter-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.swf-filter-search-wrap{position:relative;flex:1 1 300px;min-width:min(100%,250px)}
.swf-filter-search-wrap::before{content:"";position:absolute;left:16px;top:50%;width:17px;height:17px;border:2px solid var(--green-deep);border-radius:50%;transform:translateY(-58%);opacity:.8;pointer-events:none}
.swf-filter-search-wrap::after{content:"";position:absolute;left:30px;top:55%;width:8px;height:2px;background:var(--green-deep);transform:rotate(45deg);transform-origin:left center;opacity:.8;pointer-events:none}
.swf-filter-search{width:100%;min-height:48px;padding:12px 16px 12px 48px;border:1px solid var(--hair-strong);border-radius:15px;background:var(--white);color:var(--ink);font:600 15px/1.35 "Plus Jakarta Sans",system-ui,sans-serif;outline:none;transition:border-color .18s,box-shadow .18s,background .18s}
.swf-filter-search::placeholder{color:var(--slate);font-weight:500}
.swf-filter-search:focus{border-color:var(--green);box-shadow:0 0 0 4px rgba(42,168,96,.13);background:#fff}
.swf-filter-count{margin-left:auto;color:var(--slate);font:700 13px/1.2 "Plus Jakarta Sans",system-ui,sans-serif;white-space:nowrap}
.swf-filter-chips{display:flex;gap:9px;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin;padding:2px 1px 5px;-webkit-overflow-scrolling:touch}
.swf-filter-chip,.swf-chip{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:9px 15px;border:1px solid var(--hair-strong);border-radius:999px;background:var(--white);color:var(--ink-soft);font:700 13.5px/1.1 "Plus Jakarta Sans",system-ui,sans-serif;white-space:nowrap;cursor:pointer;transition:background .18s,border-color .18s,color .18s,transform .18s,box-shadow .18s}
.swf-filter-chip:hover,.swf-chip:hover{border-color:var(--green);color:var(--green-deep);transform:translateY(-1px)}
.swf-filter-chip.is-on,.swf-filter-chip.active,.swf-chip.is-on,.swf-chip.active{border-color:var(--green-deep);background:var(--green-deep);color:#fff;box-shadow:0 7px 18px rgba(19,126,72,.18)}
.swf-filter-chip:focus-visible,.swf-chip:focus-visible{outline:3px solid rgba(42,168,96,.28);outline-offset:2px}
.swf-filter-chip .swf-filter-chip-count,.swf-chip .swf-filter-chip-count{display:inline-flex;align-items:center;justify-content:center;min-width:23px;height:23px;padding:0 7px;border-radius:999px;background:rgba(19,126,72,.09);color:inherit;font-size:11.5px}
.swf-filter-chip.is-on .swf-filter-chip-count,.swf-filter-chip.active .swf-filter-chip-count,.swf-chip.is-on .swf-filter-chip-count,.swf-chip.active .swf-filter-chip-count{background:rgba(255,255,255,.18)}
[data-swf-filter-card][hidden]{display:none!important}
.swf-filter-empty{margin:28px 0;padding:22px;border:1px dashed var(--hair-strong);border-radius:18px;background:var(--sand);color:var(--ink-soft);text-align:center}
.swf-filter-empty[hidden]{display:none!important}
.swf-filter-shell + .card-grid,.swf-filter-shell + .wissen-grid,.swf-filter-shell + .rez-grid{scroll-margin-top:120px}

/* Bestehende Werkzeugleisten werden optisch an denselben Standard gekoppelt. */
.swf-toolbar{display:grid;gap:14px;margin-bottom:28px;padding:18px;border:1px solid var(--hair);border-radius:22px;background:rgba(255,255,255,.86);box-shadow:0 10px 30px rgba(23,52,4,.055)}
.swf-toolbar .swf-search-in{width:100%;min-height:48px;padding:12px 16px;border:1px solid var(--hair-strong);border-radius:15px;background:var(--white);color:var(--ink);font:600 15px/1.35 "Plus Jakarta Sans",system-ui,sans-serif;outline:none}
.swf-toolbar .swf-search-in:focus{border-color:var(--green);box-shadow:0 0 0 4px rgba(42,168,96,.13)}
.swf-toolbar .swf-chips{display:flex;gap:9px;overflow-x:auto;padding:2px 1px 5px}

@media (max-width:700px){
  .swf-filter-shell,.swf-toolbar{padding:14px;border-radius:18px;margin-bottom:22px}
  .swf-filter-row{align-items:stretch}
  .swf-filter-count{width:100%;margin-left:0}
  .swf-filter-chips,.swf-toolbar .swf-chips{margin-inline:-4px;padding-inline:4px}
  .swf-filter-chip,.swf-chip{min-height:42px;padding:10px 14px}
}


/* ========================================================================
   v60.7.47 – Rezeptbilder und DE/EN-Template-Parität
   ======================================================================== */
.rez-uebersicht .rez-grid,[data-swf-recipes] .rez-grid{align-items:stretch!important;grid-auto-rows:1fr}
.rez-uebersicht .rez-card,[data-swf-recipes] .rez-card{display:flex!important;flex-direction:column!important;height:100%!important;min-height:0!important}
.rez-uebersicht .rez-bild,[data-swf-recipes] .rez-bild{display:block!important;width:100%!important;margin:0!important;aspect-ratio:16/9!important;height:auto!important;border:0!important;border-bottom:1px solid var(--hair)!important;border-radius:0!important;background:var(--swf-visual-paper,#FCFBF7)!important;overflow:hidden!important}
.rez-uebersicht .rez-bild img,[data-swf-recipes] .rez-bild img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;padding:0!important;background:var(--swf-visual-paper,#FCFBF7)!important;filter:none!important}
.rez-uebersicht .rez-body,[data-swf-recipes] .rez-body{display:flex!important;flex:1 1 auto!important;flex-direction:column!important;padding:18px!important}
.rez-uebersicht .rez-open,[data-swf-recipes] .rez-open{margin-top:auto!important}
.swf-rezept-detail-media{width:100%;aspect-ratio:16/9;margin:20px 0 16px;border:1px solid var(--hair);border-radius:18px;overflow:hidden;background:var(--swf-visual-paper,#FCFBF7)}
.swf-rezept-detail-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
@media(max-width:720px){.rez-uebersicht .rez-body,[data-swf-recipes] .rez-body{padding:15px!important}.swf-rezept-detail-media{border-radius:14px;margin-top:14px}}
/* ===== END style.css ===== */

/* ===== BEGIN artikel.css ===== */
/*
 * @file artikel.css
 * @project StoffwechselFit
 * @component WordPress-Theme / CSS
 * @purpose Verbindliche Einzelartikeldarstellung
 * @requirements PRJ-INS-20260727-001
 * @findings PRJ-QM-P0-001, PRJ-QM-P0-002
 * @decisions PRJ-ADR-20260727-001, PRJ-ADR-20260727-002
 * @tests SWF-V602-ARTICLE-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/assets/css/artikel.css
 * @last_reviewed 2026-07-27
 */
/* ============================================================
   Artikeldarstellung — Ergänzung zum Haupt-Stylesheet
   ============================================================
   Diese Datei enthält NUR artikelspezifische Regeln. Farben, Schriften und
   Grundlayout kommen aus style.css.

   Zur Vorgeschichte: Hier standen früher eigene :root-Variablen und eine
   eigene body-Regel aus einem separaten Entwurf. Sie überschrieben die
   Markenfarben (--ink, --muted) und den Seitenhintergrund — auf jeder
   Artikelseite galt dadurch ein anderes Farbschema als im Rest der Seite.
   Zusätzlich wurde die Datei nur bei is_singular('wissen') geladen, sodass
   Praxistests, Produkte und Rezepte ganz ohne Artikelstile blieben.
   ------------------------------------------------------------ */

/* ---------- Kopfbereich ---------- */
header.art { padding: 40px 0 8px; }

.crumb {
  font-size: 13px;
  color: var(--slate);
  margin-bottom: 18px;
}
.crumb a { color: var(--slate); text-decoration: none; }
.crumb a:hover { color: var(--green-deep); text-decoration: underline; }

.lead {
  font-size: 1.12rem;
  color: var(--ink-soft);
  margin: 0 0 22px;
  line-height: 1.6;
}

/* Metabar: Autor, Stand, Lesezeit */
.metabar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  font-size: 12.5px;
  color: var(--slate);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  padding: 12px 0;
  margin-bottom: 6px;
}
.metabar b { color: var(--ink); font-weight: 600; }

/* ---------- Evidenzkennzeichnung ---------- */
/* Die drei Stufen sind das Kernversprechen der Seite — sie müssen auf
   einen Blick unterscheidbar sein, auch ohne Farbwahrnehmung. Deshalb
   zusätzlich unterschiedliche Randstärke. */
.evi {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.5;
}
.evi.g,
.evi.gesichert { background: #EAF3DE; color: #27500A; border: 1px solid #C0DD97; }
.evi.p,
.evi.plausibel { background: #E6F1FB; color: #0C447C; border: 1px dashed #9EC4E4; }
.evi.o,
.evi.offen     { background: #FAEEDA; color: #633806; border: 1px dotted #E0B878; }

/* Evidenzstufe als Block im Text */
.tier {
  display: block;
  margin: 22px 0;
  padding: 14px 18px;
  border-left: 4px solid var(--hair-strong);
  background: #FBFAF7;
  border-radius: 0 10px 10px 0;
  font-size: .96rem;
}
.tier .evi { margin-bottom: 8px; }
.tier.gesichert { border-left-color: #27500A; background: #F5FAF0; }
.tier.plausibel { border-left-color: #0C447C; background: #F2F8FD; }
.tier.offen     { border-left-color: #BA7517; background: #FDF8F0; }
.tier b, .tier strong { color: var(--ink); }

/* ---------- Artikeltext ---------- */
article { padding: 20px 0 10px; }
article h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.55rem;
  color: var(--green-deep);
  margin: 38px 0 10px;
  font-weight: 700;
  line-height: 1.25;
}
article h3 {
  font-size: 1.13rem;
  color: var(--ink);
  margin: 26px 0 6px;
  font-weight: 600;
}
article p { font-size: 1.02rem; margin: 0 0 16px; }
article ul, article ol { margin: 0 0 18px 22px; line-height: 1.75; }
article li { margin-bottom: 6px; }

/* ---------- Abbildungen ---------- */
/* Betrifft CGM-Kurven, Produktfotos und Diagramme gleichermaßen. */
figure {
  margin: 26px 0;
  background: var(--white, #fff);
  border: 1px solid var(--hair);
  border-radius: 12px;
  padding: 14px;
  overflow: hidden;
}
figure img,
figure svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}
figcaption {
  font-size: 13px;
  color: var(--slate);
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--hair);
  line-height: 1.6;
}

/* Bilder außerhalb von figure nicht überlaufen lassen */
article img { max-width: 100%; height: auto; }

/* ---------- Tabellen ---------- */
article table {
  width: 100%;
  border-collapse: collapse;
  margin: 22px 0;
  font-size: .95rem;
}
article th, article td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--hair);
  text-align: left;
}
article th { background: #FBFAF7; font-weight: 700; color: var(--ink); }

/* Auf schmalen Bildschirmen seitlich scrollbar statt gequetscht */
.tabelle-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Quellen ---------- */
.sources, section.sources {
  margin-top: 34px;
  padding-top: 18px;
  border-top: 2px solid var(--hair);
  font-size: .92rem;
}
.sources h2, .sources h3 { font-size: 1.05rem; margin-bottom: 10px; }
.sources ol, .sources ul { margin-left: 20px; line-height: 1.7; }
.sources a { word-break: break-word; }

/* ---------- Fußbereich des Artikels ---------- */
footer.art {
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid var(--hair);
  font-size: .9rem;
  color: var(--slate);
}

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 640px) {
  article h2 { font-size: 1.35rem; margin-top: 30px; }
  article p  { font-size: 1rem; }
  figure     { padding: 10px; margin: 20px 0; }
  .metabar   { gap: 8px 16px; font-size: 12px; }
}

/* ---------- Druck ---------- */
@media print {
  header.art, .metabar { border-color: #ccc; }
  figure { break-inside: avoid; border-color: #ddd; }
  .tier  { break-inside: avoid; }
  article h2, article h3 { break-after: avoid; }
}

/* ============================================================
   Redaktionsblöcke
   ============================================================
   Die Elemente, die im Editor eingesetzt werden können. Ihr Aussehen ist
   hier zentral festgelegt — ändert sich etwas, wirkt es sofort auf allen
   Beiträgen, ohne dass jeder einzeln überarbeitet werden muss.
   ------------------------------------------------------------ */

/* Quellenangabe innerhalb einer Evidenzstufe */
.tier-quelle{margin:10px 0 0;color:var(--slate)}
.tier-quelle small{font-size:.85rem}

/* ---------- Eigene Messung (n=1) ---------- */
/* Bewusst deutlich abgesetzt: Die Trennung zwischen belegtem Wissen und
   persönlicher Beobachtung ist das Kernversprechen der Seite. */
.swf-n1{
  margin:26px 0;
  padding:16px 20px;
  background:#FDF6EE;
  border:1px solid #EBD9C4;
  border-left:4px solid var(--orange);
  border-radius:0 10px 10px 0
}
.swf-n1-label{
  display:inline-block;
  font-family:"Plus Jakarta Sans",sans-serif;
  font-size:11px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
  color:#8A4A1E;
  margin-bottom:8px
}
.swf-n1-datum{
  display:inline-block;margin-left:10px;
  font-size:12px;color:var(--slate)
}
.swf-n1-text p:last-child{margin-bottom:0}
.swf-n1-hinweis{
  margin:12px 0 0;padding-top:10px;
  border-top:1px solid #EBD9C4;
  color:#6B5A44
}
.swf-n1-hinweis small{font-size:.86rem;font-style:italic}

/* ---------- Hinweiskästen ---------- */
.swf-hinweis{
  margin:22px 0;padding:14px 18px;
  border-radius:10px;
  border-left:4px solid;
  font-size:.97rem
}
.swf-hinweis p:last-child{margin-bottom:0}
.swf-hinweis-info{background:#F2F8FD;border-left-color:#0C447C;color:#123A5C}
.swf-hinweis-achtung{background:#FDF8F0;border-left-color:#BA7517;color:#6B4A15}
.swf-hinweis-wichtig{background:#FCF0F1;border-left-color:#B32D30;color:#7A2225}

/* ---------- Kennzahl ---------- */
.swf-kennzahl{
  display:inline-flex;flex-direction:column;
  gap:2px;margin:14px 14px 14px 0;
  padding:14px 20px;
  background:#FBFAF7;
  border:1px solid var(--hair);
  border-radius:12px;
  min-width:130px
}
.swf-kennzahl-wert{
  font-family:"Plus Jakarta Sans",sans-serif;
  font-size:1.7rem;font-weight:800;
  color:var(--green-deep);line-height:1.1;
  font-variant-numeric:tabular-nums
}
.swf-kennzahl-label{
  font-size:12px;font-weight:600;
  letter-spacing:.03em;text-transform:uppercase;
  color:var(--slate)
}
.swf-kennzahl-zusatz{font-size:12.5px;color:var(--slate)}

@media (max-width:640px){
  .swf-kennzahl{width:100%;margin-right:0}
  .swf-n1{padding:14px 16px}
}

/* ---------- Praxisexperimente ---------- */
/* Aus dem Klickdummy übernommen. Feste Farbwerte standen dort direkt im HTML
   und hätten das Theme überschrieben — deshalb hier als Klassen. */
.exp-karte{
  background:var(--white,#fff);
  border:1px solid var(--hair);
  border-radius:16px;
  overflow:hidden;
  margin-bottom:32px
}
.exp-kopf{
  background:linear-gradient(150deg,#2AA860,#137E48);
  padding:26px 32px;color:#fff
}
.exp-kopf h2{color:#fff;font-size:1.5rem;margin:8px 0 0;line-height:1.25}
.exp-kicker{
  font-family:"Plus Jakarta Sans",sans-serif;
  font-size:11px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
  color:#EAFBEF
}
.exp-body{padding:28px 32px}
.exp-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;margin-bottom:24px
}
.exp-stat{
  background:#EFF7F2;
  border-radius:12px;
  padding:14px 16px
}
@media (max-width:640px){
  .exp-stats{grid-template-columns:1fr;gap:10px}
  .exp-kopf{padding:20px 22px}
  .exp-kopf h2{font-size:1.3rem}
  .exp-body{padding:22px}
}

/* ---------- Kopfbild ---------- */
/* Das Kopfbild gehört zum Artikelkopf, nicht in den Textfluss. Deshalb ohne
   Rahmen und Hintergrund — anders als Abbildungen im Text, die als Beleg
   dienen und deshalb abgesetzt sind. */
figure.kopfbild{
  border:none;
  background:none;
  padding:0;
  margin:26px 0 8px;
  border-radius:16px;
  overflow:hidden
}
figure.kopfbild svg{
  width:100%;
  height:auto;
  display:block;
  border-radius:16px
}
@media (max-width:640px){
  figure.kopfbild{margin:18px 0 6px}
}

/* Erklärbild im Textverlauf — abgesetzt, weil es zu einer Aussage gehört */
figure.erklaerbild{
  margin:28px 0;
  padding:0;
  border:1px solid var(--hair);
  border-radius:14px;
  overflow:hidden;
  background:var(--white,#fff)
}
figure.erklaerbild svg{width:100%;height:auto;display:block}

/* ============================================================
   Redaktionsbausteine aus den Referenzartikeln
   ============================================================
   Diese Klassen kommen in den Artikeln hundertfach vor, hatten aber keine
   CSS-Regel. Sie wurden beim Aufbau der Artikel eingesetzt, ohne dass die
   Formatierung mitgezogen wurde — die Kästen erschienen dadurch als
   unformatierter Fließtext.

   Übernommen aus den vom Betreiber freigegebenen Referenzartikeln, mit den
   Markenfarben statt der dortigen Variablen.
   ------------------------------------------------------------ */

/* ---------- Das Wichtigste in Kürze ---------- */
.keytakeaway{
  background:var(--white,#fff);
  border-left:4px solid var(--green-deep);
  border-radius:0 10px 10px 0;
  padding:16px 22px;
  margin:26px 0;
}
.keytakeaway h3{
  font-size:1rem;
  margin:0 0 10px;
  color:var(--green-deep);
  font-weight:700;
}
.keytakeaway ul{margin:0 0 0 18px;line-height:1.7}
.keytakeaway li{margin-bottom:5px}
.kt-hinweis{
  margin:10px 0 0;
  padding-top:9px;
  border-top:1px solid var(--hair);
  color:var(--slate);
}
.kt-hinweis small{font-size:.85rem}

/* ---------- Weiterlesen ---------- */
.related{
  border:1px solid var(--hair);
  border-radius:12px;
  padding:16px 22px;
  margin:26px 0;
  background:var(--white,#fff);
}
.related h3,.related .h{
  font-size:.95rem;
  margin:0 0 10px;
  color:var(--green-deep);
  font-weight:700;
}
.related ul{margin:0 0 0 18px;line-height:1.8}
.related a{color:var(--green-deep)}

/* ---------- Hinweiskästen ---------- */
/* Drei Ausprägungen, unterscheidbar auch ohne Farbwahrnehmung: Der Rahmen
   ist unterschiedlich stark, und jeder trägt eine eigene Beschriftung. */
.callout{
  border-radius:12px;
  padding:16px 20px;
  margin:26px 0;
  font-size:.97rem;
  line-height:1.65;
}
.callout p:last-child{margin-bottom:0}
.callout .h{
  font-weight:700;
  font-size:.9rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:6px;
}
.callout.info{background:#EDF4FC;color:#123A5C;border:1px solid #CFE2F7}
.callout.info .h{color:#0C447C}
.callout.safety{background:#FDF6EA;color:#6B4A15;border:2px solid #F0D9A8}
.callout.safety .h{color:#8A5A0F}
.callout.evi-note{background:#F1F7EA;color:#2C4A12;border:1px dashed #C0DD97}
.callout.evi-note .h{color:#27500A}

/* ---------- Evidenz-Beschriftung im Fließtext ---------- */
.evilabel{
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--green-deep);
  margin:24px 0 2px;
  display:block;
}
.evibox{
  background:#FBFAF7;
  border:1px solid var(--hair);
  border-radius:10px;
  padding:14px 18px;
  margin:20px 0;
}

/* ---------- Eigene Messung (n=1) ---------- */
.n1{
  background:#FDF6EE;
  border-left:4px solid var(--orange);
  border-radius:0 10px 10px 0;
  padding:14px 20px;
  margin:24px 0;
}

/* ---------- Transparenzhinweis ---------- */
/* Kennzeichnung nach UWG — muss auffallen, ohne zu schreien. */
.transparenz{
  background:#F6F5F1;
  border:1px solid var(--hair);
  border-radius:10px;
  padding:12px 18px;
  margin:24px 0;
  font-size:.9rem;
  color:var(--slate);
}
.transparenz strong{color:var(--ink)}

/* ---------- Rezeptkarten ---------- */
.recipe{
  background:var(--white,#fff);
  border:1px solid var(--hair);
  border-radius:14px;
  padding:18px 22px;
  margin:20px 0;
}
.recipe h3{margin-top:0}
.recipe-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  font-size:13px;
  color:var(--slate);
  padding:10px 0;
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
  margin:12px 0;
}
.recipe-note{
  font-size:.9rem;
  color:var(--slate);
  font-style:italic;
  margin-top:10px;
}

/* ---------- Produktangaben ---------- */
.pgrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
  margin:22px 0;
}
.pinfo{
  background:#FBFAF7;
  border:1px solid var(--hair);
  border-radius:10px;
  padding:14px 18px;
}
.pbrand{
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--green-deep);
  margin-bottom:4px;
}

/* ---------- Tabellenzeilen ---------- */
tr.odd{background:var(--white,#fff)}
tr.even{background:#FBFAF7}

/* ---------- Querverweise und Sprachhinweis ---------- */
.crossrefs{
  margin:22px 0;
  padding:14px 18px;
  background:#FBFAF7;
  border-radius:10px;
  font-size:.94rem;
}
.swf-langref{
  font-size:.88rem;
  color:var(--slate);
  margin:14px 0;
}
.hcard{
  border:1px solid var(--hair);
  border-radius:10px;
  padding:14px 18px;
  margin:18px 0;
  background:var(--white,#fff);
}
.data{font-variant-numeric:tabular-nums}

@media (max-width:640px){
  .keytakeaway,.related,.callout{padding:14px 16px;margin:20px 0}
  .pgrid{grid-template-columns:1fr}
}

/* Tabellenkopf aus konvertierten Dokumenten — Pandoc setzt hier eine
   Klasse statt th-Elementen. Ohne Regel wäre die Kopfzeile nicht
   erkennbar, was die Tabelle für Screenreader wertlos macht. */
tr.header{background:#F5F3EE;font-weight:700}
tr.header td{color:var(--ink);border-bottom:2px solid var(--hair)}

/* WordPress-Blockklassen: Sie kommen aus dem Editor und brauchen hier
   keine eigene Gestaltung, das Grundlayout greift bereits. */

/* ---------- Eigene Messwerte ---------- */
/* Hebt CGM-Beobachtungen hervor, die sonst im Fließtext untergehen.
   Bewusst als Einzelwerte, nicht als Kurve: Eine Kurve behauptet
   Zwischenwerte, die niemand gemessen hat. */
.messwerte{
  margin:28px 0;
  padding:18px 22px;
  background:#FBFAF7;
  border:1px solid var(--hair);
  border-radius:14px;
}
.messwerte h3{
  font-size:.95rem;
  margin:0 0 14px;
  color:var(--green-deep);
  font-weight:700;
}
.mw-reihe{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px;
}
.mw-kachel{
  background:var(--white,#fff);
  border:1px solid var(--hair);
  border-radius:10px;
  padding:14px 16px;
}
.mw-zahl{
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;
  font-size:1.9rem;
  font-weight:800;
  line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.mw-einheit{
  font-size:11.5px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--slate);
  margin-top:2px;
}
.mw-label{
  font-size:13px;
  color:var(--ink-soft);
  margin-top:8px;
  line-height:1.5;
}
.mw-hinweis{
  margin:14px 0 0;
  padding-top:11px;
  border-top:1px solid var(--hair);
  color:var(--slate);
}
.mw-hinweis small{font-size:.85rem;font-style:italic}

@media (max-width:640px){
  .mw-reihe{grid-template-columns:1fr}
  .messwerte{padding:14px 16px}
}

/* ---------- CGM-Aufnahmen ---------- */
/* Screenshots aus der Sensor-App. Sie belegen, was im Text steht — deshalb
   mit Rahmen und Bildunterschrift, wie eine Abbildung in einem Fachtext. */
figure.cgm-bild{
  margin:28px 0;
  padding:12px;
  background:var(--white,#fff);
  border:1px solid var(--hair);
  border-radius:14px;
}
figure.cgm-bild img{
  width:100%;
  /* Die Aufnahmen sind Hochformat aus der App. Ohne Begrenzung würden sie
     die halbe Bildschirmhöhe einnehmen und den Lesefluss zerreißen. */
  max-width:380px;
  height:auto;
  display:block;
  margin:0 auto;
  border-radius:8px;
  border:1px solid var(--hair);
}
@media (min-width:900px){
  /* Auf breiten Bildschirmen Bild und Erklärung nebeneinander */
  figure.cgm-bild{
    display:grid;
    grid-template-columns:340px 1fr;
    gap:22px;
    align-items:start;
  }
  figure.cgm-bild figcaption{
    margin-top:0;
    padding-top:0;
    border-top:0;
    border-left:3px solid var(--hair);
    padding-left:18px;
  }
}
figure.cgm-bild figcaption{
  font-size:13px;
  color:var(--slate);
  margin-top:12px;
  padding-top:11px;
  border-top:1px solid var(--hair);
  line-height:1.6;
  text-align:left;
}

/* Rasterlayout für Kennzahlen im Artikelkopf.
   Die Klasse wurde im Inhalt verwendet, ohne dass eine Regel existierte —
   die Elemente stapelten sich dadurch untereinander statt nebeneinander. */
.hgrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:16px;
  margin:22px 0;
}
@media (max-width:640px){
  .hgrid{grid-template-columns:1fr;gap:12px}
}

/* ---------- Wiederkehrende Textauszeichnungen ---------- */
/* Diese Muster standen hundertfach als Inline-Style im Inhalt. Als Klasse
   sind sie zentral änderbar und folgen der Schriftskala des Themes. */
.bildhinweis{
  font-size:.85rem;
  color:var(--slate);
  margin-top:0;
}
.textnotiz{
  font-size:.8rem;
  color:var(--slate);
  margin:10px 0 0;
  font-style:italic;
}
/* Kennzahl in Auswertungskästen — die Farbe kam bisher als Inline-Wert mit */
.wert-gruen{color:var(--green-deep)}
.wert-orange{color:#BA7517}
.wert-rot{color:#B04A63}
.kennzahl-gross{
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;
  font-size:1.4rem;
  font-weight:800;
  line-height:1.2;
}
.kennzahl-klein{
  font-size:.8rem;
  color:var(--slate);
  margin-top:4px;
}

/* Letzte wiederkehrende Auszeichnungen aus dem Inhalt */
.liste-eng{margin:6px 0 0;padding-left:20px}
.kachel-schatten{box-shadow:var(--shadow-sm);margin-bottom:22px}
.leise{opacity:.7}

/* ============================================================
   Rezeptfinder
   ============================================================
   Das Werkzeug bringt eigene Klassen mit, für die es keine Regeln gab.
   Ohne sie erscheinen Filterleiste, Karten und Hinweise unformatiert.
   ------------------------------------------------------------ */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.chips button,.chips .chip{
  border:1px solid var(--hair);background:var(--white,#fff);
  border-radius:18px;padding:7px 14px;font-size:14px;
  font-family:inherit;cursor:pointer;color:var(--ink)
}
.chips .aktiv,.chips button.aktiv{
  background:var(--green-deep);color:#fff;border-color:var(--green-deep)
}
.badge{
  display:inline-block;font-size:11.5px;font-weight:700;
  padding:3px 9px;border-radius:12px;
  background:var(--gruen-zart,#EAF3DE);color:var(--green-deep);
  letter-spacing:.02em
}
.badge.blutzucker{background:#FDF1EA;color:#8A4A1E}
.badge.methodik{background:#E8F3F5;color:#1E5A66}
.hinweisbox{
  background:#FBFAF7;border:1px solid var(--hair);border-radius:10px;
  padding:14px 18px;margin:20px 0;font-size:.95rem
}
.inhalt{display:block}
.inner{max-width:100%}
.mark,mark{background:#FFF3C4;padding:0 3px;border-radius:3px}
.p100{width:100%}
.pk-txt{font-size:.9rem;color:var(--slate);line-height:1.6}
.port{max-width:100%;height:auto}
.toolbar{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  margin:18px 0;padding:12px 0;border-bottom:1px solid var(--hair)
}
.toolbar input[type=search],.toolbar select{
  padding:8px 12px;border:1px solid var(--hair);border-radius:8px;
  font-family:inherit;font-size:14px;min-width:0;flex:1 1 180px
}
.rz-kopf{margin-bottom:12px}
.rz-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.schritte{counter-reset:schritt;list-style:none;padding-left:0}
.schritte li{
  counter-increment:schritt;position:relative;
  padding-left:38px;margin-bottom:12px
}
.schritte li::before{
  content:counter(schritt);position:absolute;left:0;top:1px;
  width:26px;height:26px;border-radius:50%;
  background:var(--green-deep);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700
}
.stern{color:var(--orange)}
.suche{width:100%;max-width:100%}
.toc,.toc-wrap{
  background:#FBFAF7;border:1px solid var(--hair);border-radius:10px;
  padding:14px 18px;margin:20px 0
}
.toc ul{margin:8px 0 0 18px;line-height:1.8}
.card-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:16px;margin:20px 0
}
.reset{border:none;background:none;padding:0;font:inherit;cursor:pointer}
.serie-nav{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0}
.geplant{opacity:.6}
.meta{font-size:13px;color:var(--slate)}

/* Nur für den Druck */
.druck,.print-kopf,.print-fuss,.printall{display:none}
@media print{
  .druck,.print-kopf,.print-fuss{display:block}
  .chips,.toolbar,.rz-btns{display:none}
}

/* ============================================================
   Überlaufschutz auf schmalen Bildschirmen
   ============================================================
   Ein Browsertest bei 375 Pixel zeigte bei 51 von 176 Artikeln
   waagerechten Überlauf. Ursache sind meist Tabellen, lange Wörter
   ohne Trennmöglichkeit und Elemente mit fester Breite.
   ------------------------------------------------------------ */
.wrap,article,.inhalt{max-width:100%;overflow-wrap:break-word}
article table{
  display:block;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
article pre,article code{
  max-width:100%;
  overflow-x:auto;
  white-space:pre-wrap;
  word-break:break-word;
}
article img,article svg,figure img,figure svg{max-width:100%;height:auto}
article a{overflow-wrap:anywhere}

@media (max-width:640px){
  .wrap{padding-left:16px;padding-right:16px}
  .mw-reihe,.hgrid,.card-grid,.exp-stats{grid-template-columns:1fr}
  .toolbar{flex-direction:column;align-items:stretch}
  article table{font-size:13px}
  .kd-karten{grid-template-columns:1fr}
}

/* ============================================================
   Überlauf bei Hinweiskästen
   ============================================================
   style.css setzt .callout auf display:flex — gedacht für ein Symbol
   neben dem Text. In Artikeln stehen dort Überschrift und Absätze
   untereinander. Ein Flex-Container ohne Umbruch drückt sie nebeneinander
   und läuft auf schmalen Bildschirmen über.

   Ein Browsertest bei 375 Pixel zeigte das bei 47 von 176 Artikeln.
   ------------------------------------------------------------ */
article .callout,
.wrap .callout{
  display:block;
  max-width:100%;
  overflow-wrap:break-word;
}
article .callout > *,
.wrap .callout > *{
  max-width:100%;
  min-width:0;
}

/* Tabellen: der Rollbereich muss am unmittelbaren Elternelement hängen,
   sonst greift er nicht. Artikel 267 enthält 51 Nährwerttabellen. */
article table,
.wrap table,
figure table{
  display:block;
  width:100%;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-collapse:collapse;
}
article table thead,
article table tbody{min-width:100%}
article td,article th{white-space:normal;word-break:normal}

/* Alles, was breiter werden könnte, wird begrenzt */
article > *,
.wrap > *{max-width:100%}
article iframe,article video,article embed{max-width:100%;height:auto}

@media (max-width:480px){
  article .callout{padding:12px 14px}
  article table{font-size:12.5px}
  .mw-zahl{font-size:1.5rem}
}

/* ============================================================
   Tabellen mit fester Spaltenbreite
   ============================================================
   Der Browsertest zeigte Überlauf trotz overflow-x:auto. Ursache sind
   <colgroup>-Angaben mit Prozentbreiten: Sie zwingen die Tabelle auf eine
   Mindestbreite, die der Rollbereich nicht auffangen kann.

   Unter 700 Pixel werden die Spaltenvorgaben aufgehoben und die Tabelle
   bekommt eine eigene Rollfläche.
   ------------------------------------------------------------ */
@media (max-width:700px){
  article col,article colgroup{width:auto !important}
  article table{
    table-layout:auto;
    width:max-content;
    min-width:100%;
  }
  /* Rollfläche um die Tabelle statt an ihr */
  article .tabelle-rollbar{
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  article table{display:table}
}

/* Sicherheitsnetz: nichts darf breiter werden als der Rahmen */
@media (max-width:700px){
  article,article > *,.wrap,.wrap > *{
    max-width:100% !important;
    overflow-x:clip;
  }
  article table{overflow-x:auto;display:block}
}


/* Rollcontainer um Tabellen — er begrenzt die Breite, die Tabelle darf
   darin breiter sein und wird waagerecht rollbar. */
.tabelle-rollbar{
  display:block;
  width:100%;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:20px 0;
}
.tabelle-rollbar table{
  display:table;
  width:auto;
  min-width:100%;
  margin:0;
}
@media (max-width:700px){
  .tabelle-rollbar table{font-size:13px}
}

/* Kastenüberschrift — sieht aus wie eine Überschrift, ist aber keine.
   Als h3 vor dem ersten Abschnitt erzeugte sie einen Ebenensprung von h1
   auf h3 und störte die Gliederung für Screenreader. */
.kasten-titel{
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;
  font-size:1rem;
  font-weight:700;
  color:var(--green-deep);
  margin:0 0 10px;
  line-height:1.3;
}

/* Klassen aus mitgelieferten Werkzeugseiten (Rechner, Übersichten).
   Sie kamen mit den Inhalten herein und hatten keine Regel — die Elemente
   erschienen dadurch unformatiert. */
.ausgabe{
  background:#FBFAF7;
  border:1px solid var(--hair);
  border-radius:10px;
  padding:14px 18px;
  margin:16px 0;
  font-variant-numeric:tabular-nums;
}
.datum{font-size:.85rem;color:var(--slate)}
.note{font-size:.9rem;color:var(--slate);margin:10px 0 0}
.zt{font-variant-numeric:tabular-nums;white-space:nowrap}
.pp{margin:12px 0}
.site{max-width:100%}
.swf-logo{font-weight:700;letter-spacing:-.01em}
.swf-stand{font-size:.8rem;color:var(--slate)}


/* ============================================================
   v60.2 — verbindliche Artikeldarstellung (letzte Kaskadenebene)
   ============================================================
   @requirements PRJ-INS-20260727-001
   @findings PRJ-QM-P0-001, PRJ-QM-P0-002
   @tests SWF-V602-ARTICLE-01 bis -03

   Frühere Abschnitte dieser historisch gewachsenen Datei enthielten
   widersprüchliche display- und overflow-Regeln. Diese abschließende,
   strikt auf die Einzelartikel begrenzte Ebene definiert den Endzustand.
   Sie überschreibt keine gespeicherten Artikel und keine Archivseiten.
   ------------------------------------------------------------ */
.wissen-artikel-wrap{
  width:100%;
  min-width:0;
  overflow:visible;
}
.wissen-artikel-wrap > .wrap{
  width:min(calc(100% - 32px), 820px);
  max-width:820px !important;
  margin-inline:auto;
  padding-inline:0;
  overflow:visible !important;
}
.wissen-artikel-wrap header.art,
.wissen-artikel-wrap footer.art,
.wissen-artikel-wrap article{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow:visible !important;
}
.wissen-artikel-wrap article > *,
.wissen-artikel-wrap header.art > *,
.wissen-artikel-wrap footer.art > *{
  min-width:0;
  max-width:100%;
}
.wissen-artikel-wrap figure{
  display:block;
  width:100%;
  max-width:100%;
  margin:28px 0;
  overflow:hidden;
}
.wissen-artikel-wrap figure img,
.wissen-artikel-wrap figure svg,
.wissen-artikel-wrap article img,
.wissen-artikel-wrap article svg{
  display:block;
  width:auto;
  max-width:100% !important;
  height:auto !important;
  margin-inline:auto;
  object-fit:contain;
}
.wissen-artikel-wrap figure.kopfbild svg,
.wissen-artikel-wrap figure.erklaerbild svg{
  width:100%;
}
.wissen-artikel-wrap figcaption{
  max-width:100%;
  padding:9px 12px;
  overflow-wrap:anywhere;
}
.wissen-artikel-wrap .callout,
.wissen-artikel-wrap .tier,
.wissen-artikel-wrap .keytakeaway,
.wissen-artikel-wrap .messwerte,
.wissen-artikel-wrap .related,
.wissen-artikel-wrap .sources{
  display:block;
  width:100%;
  min-width:0;
  max-width:100%;
  overflow-wrap:break-word;
}
.wissen-artikel-wrap .tabelle-rollbar{
  display:block;
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  margin:18px 0;
  border-radius:10px;
}
.wissen-artikel-wrap .tabelle-rollbar table{
  display:table !important;
  width:100%;
  min-width:640px;
  max-width:none;
  margin:0;
  table-layout:auto;
}
/* Nicht umschlossene Tabellen bleiben nutzbar, statt am Rand abgeschnitten zu werden. */
.wissen-artikel-wrap article > table,
.wissen-artikel-wrap figure > table{
  display:block !important;
  width:100%;
  max-width:100%;
  overflow-x:auto !important;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
}
.wissen-artikel-wrap pre,
.wissen-artikel-wrap code{
  max-width:100%;
  overflow-x:auto;
}
.wissen-artikel-wrap iframe,
.wissen-artikel-wrap video,
.wissen-artikel-wrap embed{
  display:block;
  width:100%;
  max-width:100%;
}
@media (max-width:700px){
  .wissen-artikel-wrap > .wrap{
    width:min(calc(100% - 28px), 820px);
  }
  .wissen-artikel-wrap article,
  .wissen-artikel-wrap article > *,
  .wissen-artikel-wrap > .wrap,
  .wissen-artikel-wrap > .wrap > *{
    overflow-x:visible !important;
  }
  .wissen-artikel-wrap .tabelle-rollbar{
    overflow-x:auto !important;
  }
  .wissen-artikel-wrap .tabelle-rollbar table{
    min-width:680px;
  }
}


/* v60.6: lesefreundliche Artikelbreite und zurückhaltende Praxis-Screenshots. */
.wissen-artikel-wrap{padding-inline:0}
.wissen-artikel-wrap > .wrap{max-width:820px!important}
.wissen-artikel-wrap article img:not(.emoji),.wissen-artikel-wrap article figure img{max-width:min(100%,720px)!important;max-height:520px!important;object-fit:contain!important}
body.single-praxistest .wissen-artikel-wrap article img,body.single-praxistest .wissen-artikel-wrap figure img{max-width:min(100%,680px)!important;max-height:460px!important;background:#f8faf7;border-radius:16px;padding:6px}
.wissen-artikel-wrap figure.kopfbild,.wissen-artikel-wrap figure.erklaerbild{max-width:820px;margin-inline:auto}


/* ==========================================================================
   v60.6.1 – Einzelartikel kompakt und lesefreundlich
   Finding: PRJ-QM-P1-021
   Ursache:
   - Die Offline-Vorschau verwendete .preview-article-shell statt
     .wissen-artikel-wrap. Dadurch griffen die v60.6-Breitenregeln dort nicht.
   - Inline-Styles einzelner Produktbilder setzten width:100%; ohne den
     passenden Wrapper wirkten Fotos und Messbilder nahezu vollflächig.
   Ziel:
   - Einheitliche, zentrierte Lesespalte für Wissen, Praxislabor und Produkte.
   - Abbildungen bleiben vollständig sichtbar, aber dominieren den Text nicht.
   - Tabellen dürfen horizontal scrollen, ohne die Lesespalte zu verbreitern.
   ========================================================================== */

/* Äußerer Artikelrahmen: auf Desktop nie mehr randfüllend. */
.wissen-artikel-wrap,
.preview-article-shell > .wrap {
  width:min(calc(100% - 48px), 860px) !important;
  max-width:860px !important;
  margin-inline:auto !important;
  padding:48px 0 64px !important;
}

/* Vorformatierte Artikel enthalten teilweise selbst eine .wrap-Klasse.
   Diese innere Hülle darf die Breitenbegrenzung nicht wieder aufheben. */
.wissen-artikel-wrap > .wrap,
.preview-article-shell > .wrap > .wrap {
  width:100% !important;
  max-width:100% !important;
  margin-inline:auto !important;
  padding-inline:0 !important;
}

/* Lesespalte für Überschrift, Text und Fußbereich. */
.wissen-artikel-wrap header.art,
.wissen-artikel-wrap article,
.wissen-artikel-wrap footer.art,
.preview-article-shell header.art,
.preview-article-shell article,
.preview-article-shell footer.art {
  width:100% !important;
  max-width:760px !important;
  margin-inline:auto !important;
}

/* Große Erklärgrafiken bleiben breiter als der Fließtext möglich,
   Fotos und Screenshots werden aber deutlich zurückgenommen. */
.wissen-artikel-wrap figure,
.preview-article-shell figure {
  width:100% !important;
  max-width:640px !important;
  margin:28px auto !important;
}

.wissen-artikel-wrap figure.kopfbild,
.preview-article-shell figure.kopfbild {
  max-width:700px !important;
}

.wissen-artikel-wrap figure.erklaerbild,
.preview-article-shell figure.erklaerbild {
  max-width:600px !important;
}

.wissen-artikel-wrap article img:not(.emoji),
.wissen-artikel-wrap figure img,
.preview-article-shell article img:not(.emoji),
.preview-article-shell figure img {
  display:block !important;
  width:auto !important;
  max-width:100% !important;
  max-height:440px !important;
  height:auto !important;
  margin-inline:auto !important;
  object-fit:contain !important;
}

/* Produktfotos (Dose, Etikett, Pulver, fertiger Shake) sollen den Artikel
   unterstützen und nicht die gesamte Bildschirmhöhe belegen. */
body.single-produkt .wissen-artikel-wrap figure.erklaerbild,
body.preview-single-product .preview-article-shell figure.erklaerbild {
  max-width:520px !important;
}

body.single-produkt .wissen-artikel-wrap figure.erklaerbild img,
body.preview-single-product .preview-article-shell figure.erklaerbild img {
  max-width:500px !important;
  max-height:380px !important;
  border-radius:14px;
  background:#F8FAF7;
}

/* Praxis-Messwerte und Smartphone-Screenshots kleiner als Erklärgrafiken. */
body.single-praxistest .wissen-artikel-wrap figure,
body.preview-single-praxis .preview-article-shell figure {
  max-width:600px !important;
}

body.single-praxistest .wissen-artikel-wrap figure img,
body.preview-single-praxis .preview-article-shell figure img {
  max-width:580px !important;
  max-height:400px !important;
}

/* Breite Tabellen bleiben innerhalb der Lesespalte bedienbar. */
.wissen-artikel-wrap article > table,
.preview-article-shell article > table {
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch;
}

/* Mobil: nutzbarer Seitenrand, Bilder dürfen die verfügbare Breite ausnutzen. */
@media (max-width:700px) {
  .wissen-artikel-wrap,
  .preview-article-shell > .wrap {
    width:min(calc(100% - 28px), 860px) !important;
    padding:30px 0 46px !important;
  }

  .wissen-artikel-wrap header.art,
  .wissen-artikel-wrap article,
  .wissen-artikel-wrap footer.art,
  .preview-article-shell header.art,
  .preview-article-shell article,
  .preview-article-shell footer.art,
  .wissen-artikel-wrap figure,
  .preview-article-shell figure {
    max-width:100% !important;
  }

  body.single-produkt .wissen-artikel-wrap figure.erklaerbild img,
  body.preview-single-product .preview-article-shell figure.erklaerbild img,
  body.single-praxistest .wissen-artikel-wrap figure img,
  body.preview-single-praxis .preview-article-shell figure img {
    max-width:100% !important;
    max-height:420px !important;
  }
}

/* ========================================================================
   v60.7.3 · individuelle Artikelbilder und größere Infografiken
   Requirements: PRJ-INS-20260728-6073-003/004
   Findings: PRJ-QM-P1-6073-003/004
   ======================================================================== */
.wissen-artikel-wrap figure.swf-individual-hero,
.preview-article-shell figure.swf-individual-hero {
  width:100% !important;
  max-width:740px !important;
  margin:30px auto 34px !important;
  border-radius:22px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 12px 30px rgba(20,60,40,.08);
}
.wissen-artikel-wrap figure.swf-individual-hero img,
.preview-article-shell figure.swf-individual-hero img {
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  max-height:460px !important;
  object-fit:contain !important;
  margin:0 auto !important;
  background:#fbfcf9;
}
.wissen-artikel-wrap figure.swf-individual-hero figcaption,
.preview-article-shell figure.swf-individual-hero figcaption {
  padding:10px 14px 12px;
  margin:0;
  border-top:1px solid #e9e4db;
  color:#66746b;
  font-size:.86rem;
}

/* Erklärgrafiken dürfen breiter als der Fließtext sein. Reale Produkt- und
   Praxisfotos bleiben durch die nachfolgenden Typregeln bewusst kompakter. */
.wissen-artikel-wrap figure.erklaerbild,
.preview-article-shell figure.erklaerbild {
  width:100% !important;
  max-width:720px !important;
}
.wissen-artikel-wrap figure.erklaerbild > svg,
.preview-article-shell figure.erklaerbild > svg {
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-height:none !important;
}
.wissen-artikel-wrap figure.erklaerbild > img,
.preview-article-shell figure.erklaerbild > img {
  max-width:720px !important;
  max-height:520px !important;
}
body.single-produkt .wissen-artikel-wrap figure.erklaerbild,
body.preview-single-product .preview-article-shell figure.erklaerbild {
  max-width:540px !important;
}
body.single-produkt .wissen-artikel-wrap figure.erklaerbild > img,
body.preview-single-product .preview-article-shell figure.erklaerbild > img {
  max-width:520px !important;
  max-height:400px !important;
}
body.single-praxistest .wissen-artikel-wrap figure.erklaerbild,
body.preview-single-praxis .preview-article-shell figure.erklaerbild {
  max-width:620px !important;
}
body.single-praxistest .wissen-artikel-wrap figure.erklaerbild > img,
body.preview-single-praxis .preview-article-shell figure.erklaerbild > img {
  max-width:600px !important;
  max-height:420px !important;
}
@media(max-width:700px){
  .wissen-artikel-wrap figure.swf-individual-hero,
  .preview-article-shell figure.swf-individual-hero,
  .wissen-artikel-wrap figure.erklaerbild,
  .preview-article-shell figure.erklaerbild {
    max-width:100% !important;
  }
}

/* ==========================================================================
   v60.7.4 – Abbildungen bündig zur Lesespalte
   Requirements: PRJ-INS-20260728-6074-001
   Finding: PRJ-QM-P1-6074-001
   Purpose:
   - Der Rahmen jeder Artikelabbildung beginnt und endet bündig mit dem
     Fließtext.
   - Produktfotos und Praxis-Screenshots bleiben innerhalb dieses Rahmens
     bewusst kleiner und werden zentriert dargestellt.
   - Infografiken dürfen die volle Lesespaltenbreite nutzen.
   ========================================================================== */
.wissen-artikel-wrap figure,
.preview-article-shell figure,
.wissen-artikel-wrap figure.kopfbild,
.preview-article-shell figure.kopfbild,
.wissen-artikel-wrap figure.erklaerbild,
.preview-article-shell figure.erklaerbild,
.wissen-artikel-wrap figure.swf-individual-hero,
.preview-article-shell figure.swf-individual-hero {
  box-sizing:border-box;
  width:100% !important;
  max-width:760px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Infografiken nutzen die bündige Breite vollständig. */
.wissen-artikel-wrap figure.erklaerbild > svg,
.preview-article-shell figure.erklaerbild > svg {
  width:100% !important;
  max-width:100% !important;
}

/* Reale Bilder bleiben lesefreundlich, während Rahmen und Beschriftung
   weiterhin bündig zur Textspalte verlaufen. */
body.single-produkt .wissen-artikel-wrap figure.erklaerbild,
body.preview-single-product .preview-article-shell figure.erklaerbild,
body.single-praxistest .wissen-artikel-wrap figure.erklaerbild,
body.preview-single-praxis .preview-article-shell figure.erklaerbild {
  max-width:760px !important;
}

body.single-produkt .wissen-artikel-wrap figure.erklaerbild > img,
body.preview-single-product .preview-article-shell figure.erklaerbild > img {
  max-width:520px !important;
  max-height:400px !important;
}

body.single-praxistest .wissen-artikel-wrap figure.erklaerbild > img,
body.preview-single-praxis .preview-article-shell figure.erklaerbild > img {
  max-width:600px !important;
  max-height:420px !important;
}

.wissen-artikel-wrap figure figcaption,
.preview-article-shell figure figcaption {
  box-sizing:border-box;
  width:100%;
  text-align:left;
}

@media (max-width:700px){
  .wissen-artikel-wrap figure,
  .preview-article-shell figure,
  .wissen-artikel-wrap figure.kopfbild,
  .preview-article-shell figure.kopfbild,
  .wissen-artikel-wrap figure.erklaerbild,
  .preview-article-shell figure.erklaerbild,
  .wissen-artikel-wrap figure.swf-individual-hero,
  .preview-article-shell figure.swf-individual-hero {
    max-width:100% !important;
  }
}


/* ==========================================================================
   v60.7.7 – durchgehende Lesekante für Text, Bilder, Tabellen und Bildtitel
   Requirements: PRJ-INS-20260728-6077-003/004
   Findings: PRJ-QM-P1-6077-003
   ========================================================================== */
.wissen-artikel-wrap,
.preview-article-shell > .wrap{
  width:min(calc(100% - 48px),820px)!important;
  max-width:820px!important;
  margin-inline:auto!important;
  padding-inline:0!important;
}
.wissen-artikel-wrap header.art,
.wissen-artikel-wrap article,
.wissen-artikel-wrap footer.art,
.preview-article-shell header.art,
.preview-article-shell article,
.preview-article-shell footer.art,
.wissen-artikel-wrap > figure,
.preview-article-shell > .wrap > figure{
  width:100%!important;
  max-width:820px!important;
  margin-left:0!important;
  margin-right:0!important;
}

/* Jedes direkte Inhaltselement folgt derselben linken und rechten Kante. */
.wissen-artikel-wrap article > *,
.preview-article-shell article > *{
  box-sizing:border-box;
  width:100%;
  max-width:100%;
  margin-left:0;
  margin-right:0;
}
.wissen-artikel-wrap article figure,
.preview-article-shell article figure,
.wissen-artikel-wrap > figure,
.preview-article-shell > .wrap > figure{
  width:100%!important;
  max-width:100%!important;
  margin:30px 0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.wissen-artikel-wrap figure > img,
.wissen-artikel-wrap figure > svg,
.preview-article-shell figure > img,
.preview-article-shell figure > svg{
  box-sizing:border-box;
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  object-fit:contain!important;
  border:1px solid var(--hair)!important;
  border-radius:18px!important;
  background:#fff;
}
.wissen-artikel-wrap figure figcaption,
.preview-article-shell figure figcaption{
  width:100%!important;
  margin:0!important;
  padding:10px 0 0!important;
  border:0!important;
  text-align:left!important;
  line-height:1.55;
}

/* Reale Hochformatfotos/Screenshots nutzen eine bündige Leinwand.
   Das Motiv bleibt vollständig sichtbar, ohne die Textbreite zu verlassen. */
body.single-produkt .wissen-artikel-wrap figure > img,
body.preview-single-product .preview-article-shell figure > img,
body.single-praxistest .wissen-artikel-wrap figure > img,
body.preview-single-praxis .preview-article-shell figure > img{
  width:100%!important;
  height:min(520px,65vw)!important;
  max-height:520px!important;
  object-fit:contain!important;
  padding:18px!important;
  background:#f8faf7!important;
}

/* Infografiken/SVGs sind vollständig lesbar und exakt textbündig. */
.wissen-artikel-wrap figure.erklaerbild > svg,
.preview-article-shell figure.erklaerbild > svg{
  width:100%!important;
  height:auto!important;
  max-height:none!important;
  padding:0!important;
}

/* Tabellen und Callouts teilen dieselbe Inhaltskante. */
.wissen-artikel-wrap article table,
.preview-article-shell article table,
.wissen-artikel-wrap article .tabelle-scroll,
.preview-article-shell article .tabelle-scroll{
  width:100%!important;
  max-width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
}

@media(max-width:700px){
  .wissen-artikel-wrap,
  .preview-article-shell > .wrap{
    width:min(calc(100% - 28px),820px)!important;
  }
  body.single-produkt .wissen-artikel-wrap figure > img,
  body.preview-single-product .preview-article-shell figure > img,
  body.single-praxistest .wissen-artikel-wrap figure > img,
  body.preview-single-praxis .preview-article-shell figure > img{
    height:min(480px,100vw)!important;
    padding:10px!important;
  }
}

/* ========================================================================
   v60.7.8 – einheitliche Lesekante für Wissen, Praxislabor und Produkte
   Requirements: PRJ-INS-20260729-6078-001
   Finding: PRJ-QM-P1-6078-001
   Purpose:
   - Text, Überschriften, Tabellen, Abbildungsrahmen und Bildunterschriften
     beginnen und enden exakt auf derselben Lesekante.
   - Hochformatige Produkt- und Praxisbilder bleiben innerhalb einer
     textbündigen Leinwand vollständig sichtbar, ohne den Artikel zu sprengen.
   ======================================================================== */
:root{--swf-article-reading-width:820px}
.wissen-artikel-wrap,
.preview-article-shell > .wrap{
  width:min(calc(100% - 48px),var(--swf-article-reading-width))!important;
  max-width:var(--swf-article-reading-width)!important;
  margin-inline:auto!important;
  padding-inline:0!important;
}
.wissen-artikel-wrap > .wrap,
.preview-article-shell > .wrap > .wrap,
.wissen-artikel-wrap :is(header.art,article,footer.art),
.preview-article-shell :is(header.art,article,footer.art){
  box-sizing:border-box!important;
  width:100%!important;
  max-width:100%!important;
  margin-inline:0!important;
  padding-inline:0!important;
}
.wissen-artikel-wrap article > *,
.preview-article-shell article > *{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
}
.wissen-artikel-wrap :is(article figure,> figure),
.preview-article-shell :is(article figure,> .wrap > figure){
  box-sizing:border-box!important;
  display:block!important;
  inline-size:100%!important;
  max-inline-size:none!important;
  margin:30px 0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.wissen-artikel-wrap figure > :is(img,svg),
.preview-article-shell figure > :is(img,svg){
  box-sizing:border-box!important;
  display:block!important;
  inline-size:100%!important;
  max-inline-size:none!important;
  margin:0!important;
  padding:0!important;
  border:1px solid var(--hair)!important;
  border-radius:18px!important;
  background:#fff!important;
  object-fit:contain!important;
}
.wissen-artikel-wrap figure > svg,
.preview-article-shell figure > svg{
  block-size:auto!important;
  max-block-size:none!important;
}
/* Fotos und Screenshots erhalten eine volle, textbündige Leinwand. */
body.single-produkt .wissen-artikel-wrap figure > img,
body.preview-single-product .preview-article-shell figure > img,
body.single-praxistest .wissen-artikel-wrap figure > img,
body.preview-single-praxis .preview-article-shell figure > img{
  inline-size:100%!important;
  block-size:clamp(300px,46vw,520px)!important;
  max-block-size:520px!important;
  padding:18px!important;
  background:#f8faf7!important;
  object-fit:contain!important;
}
.wissen-artikel-wrap figure figcaption,
.preview-article-shell figure figcaption{
  box-sizing:border-box!important;
  inline-size:100%!important;
  max-inline-size:none!important;
  margin:0!important;
  padding:10px 0 0!important;
  border:0!important;
  text-align:left!important;
}
@media(max-width:700px){
  .wissen-artikel-wrap,
  .preview-article-shell > .wrap{
    width:min(calc(100% - 28px),var(--swf-article-reading-width))!important;
  }
  body.single-produkt .wissen-artikel-wrap figure > img,
  body.preview-single-product .preview-article-shell figure > img,
  body.single-praxistest .wissen-artikel-wrap figure > img,
  body.preview-single-praxis .preview-article-shell figure > img{
    block-size:clamp(260px,92vw,460px)!important;
    padding:10px!important;
  }
}


/* ========================================================================
   v60.7.9 – finaler responsiver Einzelartikelvertrag
   Requirements: PRJ-INS-20260729-6079-001/002
   Finding: PRJ-QM-P1-6079-001
   Source of truth:
   Diese letzte Kaskadenebene ersetzt widersprüchliche ältere Breitenregeln.
   Die äußere Komponente bleibt vollbreit; ausschließlich die innere .wrap
   bildet die zentrierte und mit dem Viewport wachsende Lesespalte.
   ======================================================================== */
:root{
  --swf-article-fluid:clamp(840px,64vw,1000px);
  --swf-article-gutter:clamp(16px,3.2vw,52px);
}
.wissen-artikel-wrap{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:clamp(34px,4vw,62px) 0 clamp(54px,6vw,88px)!important;
  overflow:visible!important;
}
.wissen-artikel-wrap>.wrap{
  box-sizing:border-box!important;
  width:min(calc(100% - (2 * var(--swf-article-gutter))),var(--swf-article-fluid))!important;
  max-width:none!important;
  margin-inline:auto!important;
  padding-inline:0!important;
}
.wissen-artikel-wrap>.wrap>.wrap,
.wissen-artikel-wrap :is(header.art,article,footer.art){
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  margin-inline:0!important;
  padding-inline:0!important;
}
.wissen-artikel-wrap header.art h1{
  font-size:clamp(2.1rem,3.2vw,3.45rem)!important;
  line-height:1.08!important;
}
.wissen-artikel-wrap header.art .lead,
.wissen-artikel-wrap article{
  font-size:clamp(1.04rem,.45vw + .93rem,1.22rem)!important;
  line-height:1.72!important;
}
.wissen-artikel-wrap article>*{
  box-sizing:border-box!important;
  max-width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
}
.wissen-artikel-wrap article :is(h2,h3,h4){width:100%!important}

/* Abbildung, Grafik und Bildunterschrift bilden eine einzige textbündige
   Komponente. Rahmen und Untertitel liegen auf exakt derselben Außenkante
   wie Überschrift und Fließtext. */
.wissen-artikel-wrap :is(article figure,>.wrap>figure){
  box-sizing:border-box!important;
  display:block!important;
  width:100%!important;
  max-width:none!important;
  margin:clamp(28px,3vw,44px) 0!important;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid var(--hair)!important;
  border-radius:20px!important;
  background:#fff!important;
  box-shadow:none!important;
}
.wissen-artikel-wrap figure>:is(img,svg){
  box-sizing:border-box!important;
  display:block!important;
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:#fff!important;
  object-fit:contain!important;
}
.wissen-artikel-wrap figure figcaption{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:11px 16px 13px!important;
  border-top:1px solid var(--hair)!important;
  color:var(--slate)!important;
  text-align:left!important;
  font-size:.9rem!important;
  line-height:1.45!important;
}

/* Originalfotos und Messwert-Screenshots bleiben vollständig sichtbar. Die
   Leinwand ist textbündig, das Motiv erhält innen einen ruhigen Rand. */
body.single-produkt .wissen-artikel-wrap figure>:is(img:not(.emoji)),
body.single-praxistest .wissen-artikel-wrap figure>:is(img:not(.emoji)){
  width:100%!important;
  height:clamp(380px,48vw,620px)!important;
  max-height:620px!important;
  padding:clamp(12px,2vw,26px)!important;
  background:#f8faf7!important;
  object-fit:contain!important;
}
/* SVG-Infografiken erhalten immer die volle verfügbare Breite. */
.wissen-artikel-wrap figure>:is(svg),
.wissen-artikel-wrap figure.erklaerbild>svg{
  width:100%!important;
  height:auto!important;
  max-height:none!important;
  padding:0!important;
}
.wissen-artikel-wrap :is(table,.tabelle-scroll,.tabelle-rollbar,pre,iframe,video){
  box-sizing:border-box!important;
  width:100%!important;
  max-width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
}
@media(max-width:700px){
  :root{--swf-article-gutter:14px}
  .wissen-artikel-wrap{padding-top:28px!important}
  .wissen-artikel-wrap header.art h1{font-size:clamp(1.85rem,9vw,2.55rem)!important}
  body.single-produkt .wissen-artikel-wrap figure>:is(img:not(.emoji)),
  body.single-praxistest .wissen-artikel-wrap figure>:is(img:not(.emoji)){
    height:clamp(280px,100vw,480px)!important;
    padding:10px!important;
  }
}

/* v60.7.9 – Spezifitätsabschluss für historisch klassifizierte Abbildungen. */
.wissen-artikel-wrap article figure,
.wissen-artikel-wrap article figure.kopfbild,
.wissen-artikel-wrap article figure.erklaerbild,
.wissen-artikel-wrap article figure.swf-individual-hero,
.wissen-artikel-wrap>.wrap>figure,
.wissen-artikel-wrap>.wrap>figure.kopfbild,
.wissen-artikel-wrap>.wrap>figure.erklaerbild,
.wissen-artikel-wrap>.wrap>figure.swf-individual-hero{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}
/* v60.7.9 – Kopfbilder außerhalb des article-Elements ebenfalls textbündig. */
.wissen-artikel-wrap figure,
.wissen-artikel-wrap figure.kopfbild,
.wissen-artikel-wrap figure.erklaerbild,
.wissen-artikel-wrap figure.swf-individual-hero{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}
/* v60.7.9 – Produkttest/Praxislabor: ältere 520/600-Pixel-Figurenbreiten aufheben. */
body.single-produkt .wissen-artikel-wrap figure,
body.single-produkt .wissen-artikel-wrap figure.kopfbild,
body.single-produkt .wissen-artikel-wrap figure.erklaerbild,
body.single-produkt .wissen-artikel-wrap figure.swf-individual-hero,
body.single-praxistest .wissen-artikel-wrap figure,
body.single-praxistest .wissen-artikel-wrap figure.kopfbild,
body.single-praxistest .wissen-artikel-wrap figure.erklaerbild,
body.single-praxistest .wissen-artikel-wrap figure.swf-individual-hero{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}


/* ========================================================================
   v60.7.10 – sichere Aufzählungen in Akzent- und Hinweisboxen
   Requirements: PRJ-INS-20260729-60710-001
   Finding: PRJ-QM-P1-60710-001
   Security/Accessibility:
   Die Akzentlinie ist dekorativ. Sie darf weder Listenmarker verdecken noch
   die Textlesbarkeit bei Zoom, schmalen Viewports oder großen Schriftgraden
   beeinträchtigen.
   ======================================================================== */
:is(.wissen-artikel-wrap,.preview-article-shell) .keytakeaway{
  position:relative!important;
  border-left:0!important;
  border-radius:12px!important;
  padding:18px 24px 18px 38px!important;
  overflow:visible!important;
}
:is(.wissen-artikel-wrap,.preview-article-shell) .keytakeaway::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  border-radius:12px 0 0 12px;
  background:var(--green-deep);
  pointer-events:none;
}
:is(.wissen-artikel-wrap,.preview-article-shell) :is(.keytakeaway,.tier,.swf-n1,.swf-hinweis,.n1,.callout) :is(ul,ol){
  box-sizing:border-box!important;
  margin:.45rem 0 0!important;
  padding-left:1.45rem!important;
  list-style-position:outside!important;
}
:is(.wissen-artikel-wrap,.preview-article-shell) :is(.keytakeaway,.tier,.swf-n1,.swf-hinweis,.n1,.callout) li{
  margin:.22rem 0!important;
  padding-left:.12rem!important;
}
/* Die statische Vorschau hatte durch einen historischen Reset den Innenraum
   direkter Artikelboxen entfernt. Diese Regeln stellen ihn wieder her. */
.preview-article-shell article > :is(.keytakeaway,.tier,.swf-n1,.swf-hinweis,.n1,.related){
  padding:18px 24px!important;
}
.preview-article-shell article > .keytakeaway{
  padding-left:38px!important;
}
@media(max-width:620px){
  :is(.wissen-artikel-wrap,.preview-article-shell) .keytakeaway{
    padding:16px 18px 16px 32px!important;
  }
  .preview-article-shell article > .keytakeaway{padding-left:32px!important}
}

/* v60.7.35 — Quellenlisten: Marker dauerhaft innerhalb der Quellenbox halten.
 * Gilt für <ul class="sources">/<ol class="sources"> sowie Listen in <section class="sources">.
 * Der zusätzliche Einzug ist absichtlich größer als die Markerbreite. */
ul.sources,
ol.sources {
  box-sizing: border-box;
  margin-inline: 0;
  padding-block: 24px !important;
  padding-inline-start: 58px !important;
  padding-inline-end: 28px !important;
  list-style-position: outside !important;
}
section.sources > ul,
section.sources > ol,
.sources > ul,
.sources > ol {
  box-sizing: border-box;
  margin-inline: 0;
  padding-inline-start: 34px !important;
  padding-inline-end: 0 !important;
  list-style-position: outside !important;
}
.sources li {
  padding-inline-start: 2px;
  overflow-wrap: anywhere;
}
@media (max-width: 600px) {
  ul.sources,
  ol.sources {
    padding-block: 20px !important;
    padding-inline-start: 48px !important;
    padding-inline-end: 18px !important;
  }
  section.sources > ul,
  section.sources > ol,
  .sources > ul,
  .sources > ol {
    padding-inline-start: 28px !important;
  }
}

/* ========================================================================
   v60.7.39 – Einheitliche Kachel- und Artikelbildsprache
   ======================================================================== */
:root{
  --swf-visual-paper:#FCFBF7;
  --swf-visual-sand:#F5F1E8;
  --swf-visual-green:#2AA860;
  --swf-visual-leaf:#173F2B;
  --swf-visual-ink:#20362A;
  --swf-visual-muted:#53685C;
  --swf-visual-hair:#E6E0D3;
  --swf-visual-radius:18px;
}

/* Same geometry for Knowledge, Field Lab, Product and Recipe archives. */
:is(body.post-type-archive-wissen,body.post-type-archive-praxistest,body.post-type-archive-produkt,body.post-type-archive-rezept)
:is(.kbild,.kcard-bild,.wissen-card .kbild,.rez-bild),
body.preview-listing:not(.preview-blog) .preview-card-media{
  box-sizing:border-box!important;
  width:100%!important;
  aspect-ratio:16/9!important;
  height:auto!important;
  min-height:0!important;
  overflow:hidden!important;
  border:0!important;
  border-bottom:1px solid var(--swf-visual-hair)!important;
  border-radius:0!important;
  background:var(--swf-visual-paper)!important;
}
:is(body.post-type-archive-wissen,body.post-type-archive-praxistest,body.post-type-archive-produkt,body.post-type-archive-rezept)
:is(.kbild,.kcard-bild,.wissen-card .kbild,.rez-bild) img,
body.preview-listing:not(.preview-blog) .preview-card-media img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  padding:0!important;
  background:var(--swf-visual-paper)!important;
  filter:saturate(.86) contrast(.97)!important;
}
:is(body.post-type-archive-wissen,body.post-type-archive-praxistest,body.post-type-archive-produkt,body.post-type-archive-rezept)
:is(.kcard,.wissen-card,.rez-card),
body.preview-listing:not(.preview-blog) .preview-card{
  overflow:hidden!important;
  border:1px solid var(--swf-visual-hair)!important;
  border-radius:20px!important;
  background:#fff!important;
  box-shadow:0 8px 25px rgba(32,54,42,.07)!important;
}
body.preview-listing:not(.preview-blog) .preview-grid{
  align-items:stretch!important;
  grid-auto-rows:1fr!important;
}
body.preview-listing:not(.preview-blog) .preview-card-body{
  display:flex!important;
  flex:1 1 auto!important;
  flex-direction:column!important;
}
body.preview-listing:not(.preview-blog) .preview-card-go{margin-top:auto!important}

/* The approved Blog series remains intentionally more colourful. */
body.preview-blog .preview-card-media img,
.swf-blog-block .kbild img{
  filter:none!important;
}

/* Card and article detail use the same visual source and geometry. */
figure.kopfbild.swf-individual-hero-art,
.preview-article-shell figure.kopfbild.swf-individual-hero-art{
  max-width:980px!important;
  margin:24px auto 34px!important;
  overflow:hidden!important;
  border:1px solid var(--swf-visual-hair)!important;
  border-radius:22px!important;
  background:var(--swf-visual-paper)!important;
  box-shadow:0 10px 28px rgba(32,54,42,.08)!important;
}
figure.kopfbild.swf-individual-hero-art img,
.preview-article-shell figure.kopfbild.swf-individual-hero-art img{
  display:block!important;
  width:100%!important;
  aspect-ratio:16/9!important;
  height:auto!important;
  object-fit:cover!important;
  object-position:center!important;
  background:var(--swf-visual-paper)!important;
  filter:saturate(.86) contrast(.97)!important;
}
figure.kopfbild.swf-individual-hero-art figcaption,
.preview-article-shell figure.kopfbild.swf-individual-hero-art figcaption{
  padding:12px 18px!important;
  border-top:1px solid var(--swf-visual-hair)!important;
  color:var(--swf-visual-muted)!important;
  font-size:.9rem!important;
}

/* Site-wide AI transparency notice – factual, not a conformity claim. */
.swf-ai-transparency-bar{
  box-sizing:border-box;
  margin:0;
  padding:13px var(--swf-page-gutter,24px);
  border-top:1px solid var(--swf-visual-hair);
  background:#F7F4EC;
  color:var(--swf-visual-muted);
  font-size:.88rem;
  line-height:1.55;
}
.swf-ai-transparency-bar .swf-ai-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  max-width:1180px;
  margin-inline:auto;
  text-align:center;
}
.swf-ai-transparency-bar a{color:var(--green-deep,#178049);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.swf-ai-badge{
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  min-width:30px;
  height:30px;
  border:1px solid #CCDCCF;
  border-radius:999px;
  background:#EAF6ED;
  color:#178049;
  font-weight:800;
}
@media(max-width:640px){
  .swf-ai-transparency-bar{padding-block:12px;font-size:.8rem}
  .swf-ai-transparency-bar .swf-ai-inner{align-items:flex-start;text-align:left}
  figure.kopfbild.swf-individual-hero-art{border-radius:16px!important}
}
/* ===== END artikel.css ===== */

/* ===== BEGIN v61-clean.css ===== */
/*
 * StoffwechselFit v61.0.3 CLEAN
 * Letzte, verbindliche Layoutschicht. Sie normalisiert die über Jahre
 * gewachsenen Legacy-Regeln, ohne Funktions-CSS der Tools zu entfernen.
 */
:root{
  --swf-bg:#fbfaf6;
  --swf-surface:#ffffff;
  --swf-surface-soft:#f4f7f1;
  --swf-cream:#f5f0e7;
  --swf-green:#287a47;
  --swf-green-strong:#185936;
  --swf-green-soft:#e6f2e8;
  --swf-ink:#1f3429;
  --swf-muted:#596a61;
  --swf-line:#dedfd8;
  --swf-accent:#c95c38;
  --swf-shadow:0 16px 44px rgba(25,65,43,.10);
  --swf-shadow-small:0 7px 22px rgba(25,65,43,.07);
  --swf-radius:20px;
  --swf-content:1180px;
  --swf-reading:860px;
}
html{scroll-padding-top:112px}
body{background:var(--swf-bg)!important;color:var(--swf-ink)!important;font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif!important;font-size:17px!important;line-height:1.65!important}
body,button,input,select,textarea{font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif!important}
h1,h2,h3,h4,.brand,.rez-titel{font-family:Georgia,"Times New Roman",serif!important;color:var(--swf-ink)}
a{text-underline-offset:.17em}
.wrap{width:min(100% - 36px,var(--swf-content))!important;max-width:none!important;margin-inline:auto!important;padding-inline:0!important}
#hauptinhalt{min-height:54vh}
.swf-skiplink{position:fixed!important;left:16px!important;top:-100px!important;z-index:99999!important;background:#fff!important;color:#102b1d!important;padding:12px 18px!important;border:2px solid var(--swf-green)!important;border-radius:10px!important;box-shadow:var(--swf-shadow)!important}
.swf-skiplink:focus{top:16px!important}

/* Kopfzeile */
.topbar{background:#173f2b!important;color:#e6f2e8!important}
.topbar .wrap{height:auto!important;min-height:36px!important;padding:7px 0!important;display:flex!important;justify-content:center!important;gap:24px!important;font-size:12.5px!important}
header.nav{position:sticky!important;top:0!important;z-index:1000!important;background:rgba(251,250,246,.97)!important;border-bottom:1px solid var(--swf-line)!important;backdrop-filter:blur(14px)!important}
.nav-inner{height:78px!important;display:grid!important;grid-template-columns:minmax(210px,1fr) auto minmax(180px,1fr)!important;align-items:center!important;gap:18px!important}
.brand{font-size:22px!important;font-weight:700!important;white-space:nowrap!important}
.brand svg{width:40px!important;height:40px!important}
nav.links{display:flex!important;align-items:center!important;justify-content:center!important;gap:2px!important;margin:0!important}
nav.links a{font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif!important;font-size:14px!important;font-weight:650!important;color:#344c3f!important;padding:10px 11px!important;border-radius:999px!important}
nav.links a:hover,nav.links a:focus-visible,nav.links a.active{background:var(--swf-green-soft)!important;color:var(--swf-green-strong)!important}
.nav-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important}
.lang-switch,.nav-cta{font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif!important;min-height:42px!important;border-radius:999px!important;padding:9px 14px!important;font-size:13.5px!important;font-weight:700!important}
.lang-switch{background:#fff!important;border:1px solid var(--swf-line)!important;color:var(--swf-ink)!important}
.nav-cta{background:var(--swf-accent)!important;color:#fff!important;border:0!important}
.burger{display:none!important}
.mobile-menu{background:#fff!important;border-bottom:1px solid var(--swf-line)!important}
.mobile-menu a{font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif!important}

/* Seitenköpfe */
.page-head{padding:58px 0!important;background:linear-gradient(135deg,#edf5eb 0%,#f8f1e6 100%)!important;border-bottom:1px solid var(--swf-line)!important}
.swf-page-head-grid,.swf-tools-intro,.swf-blog-intro{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(250px,330px)!important;gap:42px!important;align-items:center!important}
.page-head h1{font-size:clamp(2.35rem,5vw,4.2rem)!important;line-height:1.04!important;letter-spacing:-.035em!important;margin:0!important}
.page-head .intro{font-size:1.13rem!important;line-height:1.65!important;max-width:65ch!important;color:var(--swf-muted)!important;margin-top:18px!important}
.breadcrumb{font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif!important;color:var(--swf-muted)!important;font-size:13px!important;margin-bottom:16px!important}
.swf-category-art{width:100%!important;max-width:330px!important;justify-self:end!important}
.swf-category-art img,.swf-category-art svg{width:100%!important;height:auto!important;aspect-ratio:16/10!important;object-fit:contain!important}

/* Blöcke und Archive */
section.block{padding:64px 0!important}
section.block:nth-of-type(even){background:transparent}
.swf-archive-axis,.tools-compact-wrap,.swf-blog-block>.wrap{width:min(100% - 36px,var(--swf-content))!important;max-width:none!important;margin-inline:auto!important}
.card-grid,.wissen-grid,.rez-grid,.tool-picker-grid,.swf-news-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:24px!important;align-items:stretch!important;max-width:none!important}
.kcard,.wissen-card,.rez-card,.tool-tile,.news-card{background:var(--swf-surface)!important;border:1px solid var(--swf-line)!important;border-radius:var(--swf-radius)!important;box-shadow:var(--swf-shadow-small)!important;overflow:hidden!important;min-width:0!important;height:100%!important;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important}
.kcard:hover,.wissen-card:hover,.rez-card:hover,.tool-tile:hover,.news-card:hover{transform:translateY(-4px)!important;box-shadow:var(--swf-shadow)!important;border-color:#bdcfc0!important}
.kcard-media{display:flex!important;flex-direction:column!important;padding:0!important}
.kbild,.kcard-bild,.rez-bild,.tool-tile-visual,.preview-card-media{display:block!important;width:100%!important;height:auto!important;aspect-ratio:16/9!important;background:#eef3eb!important;overflow:hidden!important;position:relative!important;border:0!important}
.kbild img,.kcard-bild img,.rez-bild img,.tool-tile-visual img,.preview-card-media img,
.kbild svg,.kcard-bild svg,.rez-bild svg,.tool-tile-visual svg{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;padding:0!important;border-radius:0!important}
.kcard-body,.rez-body,.wissen-card .ktext,.tool-tile-copy{padding:20px 21px 22px!important;display:flex!important;flex-direction:column!important;gap:10px!important;flex:1!important}
.kcard-kicker,.rez-kat,.eyebrow{font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif!important;font-size:11px!important;text-transform:uppercase!important;letter-spacing:.055em!important;font-weight:800!important;color:var(--swf-green)!important}
.kcard-body h3,.wissen-card h3,.rez-titel,.tool-tile h3{font-size:1.2rem!important;line-height:1.3!important;margin:0!important}
.kcard-body p,.wissen-card p,.rez-sub,.tool-tile p{font-size:.94rem!important;line-height:1.55!important;color:var(--swf-muted)!important;margin:0!important}
.more,.rez-open{font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif!important;color:var(--swf-green-strong)!important;font-weight:750!important;margin-top:auto!important;font-size:.9rem!important}

/* Filter */
.swf-filter-shell,.swf-toolbar{background:#fff!important;border:1px solid var(--swf-line)!important;border-radius:18px!important;padding:18px!important;margin-bottom:28px!important;box-shadow:0 5px 16px rgba(25,65,43,.04)!important}
.swf-filter-row{display:flex!important;align-items:center!important;gap:12px!important;flex-wrap:wrap!important}
.swf-filter-search,.swf-search-in{flex:1 1 300px!important;min-height:46px!important;border:1px solid #cdd5cd!important;border-radius:12px!important;padding:10px 14px!important;background:#fff!important;color:var(--swf-ink)!important;font-size:16px!important}
.swf-filter-search:focus,.swf-search-in:focus{outline:3px solid rgba(40,122,71,.18)!important;border-color:var(--swf-green)!important}
.swf-filter-chips,.swf-chips{display:flex!important;flex-wrap:wrap!important;gap:8px!important;margin-top:14px!important}
.swf-filter-chip,.swf-chip{border:1px solid #cbd6cc!important;background:#fff!important;color:#3b5145!important;border-radius:999px!important;padding:8px 12px!important;min-height:38px!important;font-size:13px!important;font-weight:700!important;cursor:pointer!important}
.swf-filter-chip.is-on,.swf-chip.is-on{background:var(--swf-green-strong)!important;color:#fff!important;border-color:var(--swf-green-strong)!important}
.swf-filter-chip-count{opacity:.75;margin-left:5px}

/* Rezeptseite */
.rez-uebersicht{width:100%!important}
.swf-shopping-cta{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;gap:18px!important;align-items:center!important;background:linear-gradient(135deg,#eff7ef,#fbf4e8)!important;border:1px solid #cfdccd!important;border-radius:20px!important;padding:22px!important;margin-bottom:26px!important}
.swf-shopping-cta-icon{display:grid!important;place-items:center!important;width:58px!important;height:58px!important;border-radius:16px!important;background:#fff!important;color:var(--swf-green)!important;border:1px solid var(--swf-line)!important}
.swf-shopping-cta-icon svg{width:34px!important;height:34px!important}
.swf-shopping-cta-copy{display:flex!important;flex-direction:column!important;gap:4px!important}
.swf-shopping-cta-copy small{font-size:11px!important;text-transform:uppercase!important;letter-spacing:.05em!important;color:var(--swf-green)!important;font-weight:800!important}
.swf-shopping-cta-copy strong{font-family:Georgia,"Times New Roman",serif!important;font-size:1.18rem!important;line-height:1.3!important}
.swf-shopping-cta-copy span{color:var(--swf-muted)!important;font-size:.92rem!important}
.rez-card{appearance:none!important;width:100%!important;text-align:left!important;padding:0!important;color:inherit!important;cursor:pointer!important;display:flex!important;flex-direction:column!important}
.rez-bild{aspect-ratio:16/9!important}
.rez-body{min-height:230px!important}
.rez-werte{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important;margin-top:4px!important;padding-top:0!important}
.rez-werte span{background:var(--swf-green-soft)!important;color:var(--swf-green-strong)!important;border-radius:9px!important;padding:6px 8px!important;font-size:.75rem!important;text-align:center!important}
.rez-werte b{font-size:.86rem!important}
.swf-rezept-dialog{border:0!important;border-radius:24px!important;padding:0!important;width:min(920px,calc(100% - 24px))!important;max-width:none!important;max-height:calc(100vh - 32px)!important;overflow:auto!important;box-shadow:0 35px 100px rgba(10,40,25,.35)!important}
.swf-rezept-dialog::backdrop{background:rgba(16,37,26,.64)!important;backdrop-filter:blur(5px)!important}
.swf-rezept-detail{padding:28px!important}
.swf-rezept-detail-head{display:flex!important;justify-content:space-between!important;gap:20px!important;align-items:flex-start!important}
.swf-rezept-close{flex:0 0 44px!important;width:44px!important;height:44px!important;border-radius:50%!important;border:1px solid var(--swf-line)!important;background:#fff!important;font-size:1.35rem!important;cursor:pointer!important}
.swf-rezept-detail-media{padding:0!important;border:0!important;background:#eef3eb!important;border-radius:18px!important;overflow:hidden!important;margin:22px 0 16px!important}
.swf-rezept-detail-media img{width:100%!important;height:auto!important;aspect-ratio:16/9!important;object-fit:cover!important}
.swf-rezept-werte{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:9px!important;margin:16px 0!important}
.swf-rezept-werte span{background:var(--swf-green-soft)!important;border-radius:12px!important;padding:10px!important;text-align:center!important;font-size:.75rem!important}
.swf-rezept-werte b{display:block!important;font-size:1rem!important;color:var(--swf-green-strong)!important}
.swf-rezept-detail-grid{display:grid!important;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)!important;gap:28px!important}
.swf-rezept-zutaten,.swf-rezept-schritte{padding-left:22px!important;line-height:1.7!important}
.swf-rezept-actions{display:flex!important;gap:10px!important;flex-wrap:wrap!important;margin-top:22px!important}

/* Artikel */
body.single #hauptinhalt,body.page #hauptinhalt{background:var(--swf-bg)}
body.single #hauptinhalt>.wrap,body.page #hauptinhalt>.wrap{width:min(100% - 36px,var(--swf-reading))!important;max-width:none!important}
header.art{padding:48px 0 8px!important}
header.art h1{font-size:clamp(2.15rem,5vw,3.65rem)!important;line-height:1.08!important;margin-bottom:18px!important}
.lead{font-size:1.1rem!important;color:var(--swf-muted)!important}
.metabar{font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif!important;display:flex!important;flex-wrap:wrap!important;gap:9px 18px!important;border-block:1px solid var(--swf-line)!important;padding:12px 0!important;color:var(--swf-muted)!important}
figure.kopfbild,.swf-individual-hero{width:100%!important;margin:26px 0 34px!important;padding:0!important;background:#eef3eb!important;border:1px solid var(--swf-line)!important;border-radius:20px!important;overflow:hidden!important}
figure.kopfbild img,figure.kopfbild svg,.swf-individual-hero img{display:block!important;width:100%!important;height:auto!important;aspect-ratio:16/9!important;object-fit:cover!important;border-radius:0!important}
figure.kopfbild figcaption{padding:10px 16px!important;margin:0!important;border-top:1px solid var(--swf-line)!important;color:var(--swf-muted)!important;font-size:12.5px!important;background:#fff!important}
article{padding:0 0 24px!important;max-width:100%!important}
article h2{font-size:clamp(1.55rem,3.2vw,2.05rem)!important;margin:44px 0 14px!important;color:var(--swf-green-strong)!important}
article h3{font-size:1.25rem!important;margin:30px 0 10px!important}
article h4{font-size:1.05rem!important;margin:24px 0 8px!important}
article p{font-size:1.02rem!important;margin:0 0 17px!important;line-height:1.75!important}
article ul,article ol{margin:0 0 20px!important;padding-left:25px!important;line-height:1.72!important}
article li{margin-bottom:7px!important}
article a{text-decoration:underline!important;text-decoration-thickness:.08em!important;color:var(--swf-green-strong)!important}
article figure:not(.kopfbild){background:#fff!important;border:1px solid var(--swf-line)!important;border-radius:16px!important;padding:14px!important;margin:28px 0!important;overflow:hidden!important}
article figure img,article figure svg{width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important}
article figcaption{font-size:12.5px!important;color:var(--swf-muted)!important;padding-top:10px!important;margin-top:10px!important;border-top:1px solid var(--swf-line)!important}
article table{display:block!important;width:100%!important;overflow-x:auto!important;border-collapse:collapse!important;margin:24px 0!important;background:#fff!important;border:1px solid var(--swf-line)!important;border-radius:12px!important}
article th,article td{padding:10px 12px!important;border-bottom:1px solid var(--swf-line)!important;min-width:120px!important}
.callout,.swf-hinweis,.swf-n1,.keytakeaway{border-radius:15px!important;padding:18px 20px!important;margin:24px 0!important;background:#eef6ee!important;border:1px solid #cfddcf!important;border-left:5px solid var(--swf-green)!important}
.callout.safety,.swf-hinweis-achtung{background:#fff5e9!important;border-color:#ead6b8!important;border-left-color:#bd6b2f!important}
.sources{border-top:2px solid var(--swf-line)!important;margin-top:44px!important;padding-top:22px!important}
.related{background:#fff!important;border:1px solid var(--swf-line)!important;border-radius:16px!important;padding:20px!important;margin:30px 0!important}

/* Formulare, Schaltflächen, Pagination */
.btn,button.button,input[type=submit]{font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif!important;border-radius:999px!important;font-weight:750!important}
.btn-primary,.button-primary,input[type=submit]{background:var(--swf-green-strong)!important;color:#fff!important}
input:not([type=checkbox]):not([type=radio]),select,textarea{border:1px solid #cbd4cc!important;border-radius:10px!important;padding:10px 12px!important;background:#fff!important;color:var(--swf-ink)!important;max-width:100%!important}
.navigation.pagination{margin:38px 0!important}
.nav-links{display:flex!important;justify-content:center!important;gap:7px!important;flex-wrap:wrap!important}
.page-numbers{display:grid!important;place-items:center!important;min-width:42px!important;min-height:42px!important;padding:7px 11px!important;border-radius:10px!important;border:1px solid var(--swf-line)!important;background:#fff!important;font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif!important;font-weight:700!important}
.page-numbers.current{background:var(--swf-green-strong)!important;color:#fff!important;border-color:var(--swf-green-strong)!important}

/* Footer */
footer.site-footer,.footer{background:#173f2b!important;color:#e7f1e9!important}
.foot-grid{gap:38px!important}
.foot-grid h4{color:#fff!important}
.foot-grid a{color:#d7e8da!important}
.foot-bottom{color:#a9c5b0!important;border-color:rgba(255,255,255,.16)!important}

/* Anzeigenplätze: ruhig, eindeutig gekennzeichnet, offline ohne Netzwerk */
.swf-ad-slot{border:1px dashed #bdc7be!important;background:#f5f6f2!important;border-radius:14px!important;padding:14px!important;margin:26px 0!important;text-align:center!important;color:#657268!important;min-height:90px!important}
.swf-ad-label{font-size:10px!important;text-transform:uppercase!important;letter-spacing:.08em!important;font-weight:800!important}

/* Barrierefreiheit */
:focus-visible{outline:3px solid rgba(40,122,71,.35)!important;outline-offset:3px!important}
[hidden]{display:none!important}

@media(max-width:1100px){
  .nav-inner{display:flex!important}
  nav.links,.nav-actions .nav-cta,.nav-actions .lang-switch{display:none!important}
  .burger{display:flex!important;margin-left:auto!important}
  .card-grid,.wissen-grid,.rez-grid,.tool-picker-grid,.swf-news-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .swf-page-head-grid,.swf-tools-intro,.swf-blog-intro{grid-template-columns:minmax(0,1fr) 270px!important}
}
@media(max-width:760px){
  body{font-size:16px!important}
  .wrap,.swf-archive-axis,.tools-compact-wrap,.swf-blog-block>.wrap,body.single #hauptinhalt>.wrap,body.page #hauptinhalt>.wrap{width:min(100% - 28px,var(--swf-content))!important}
  .topbar .wrap{justify-content:flex-start!important;overflow-x:auto!important;flex-wrap:nowrap!important}
  .topbar span{white-space:nowrap!important}
  .nav-inner{height:68px!important}
  .brand{font-size:20px!important}
  .page-head{padding:42px 0!important}
  .swf-page-head-grid,.swf-tools-intro,.swf-blog-intro{grid-template-columns:1fr!important;gap:24px!important}
  .swf-category-art{justify-self:start!important;max-width:340px!important}
  section.block{padding:46px 0!important}
  .card-grid,.wissen-grid,.rez-grid,.tool-picker-grid,.swf-news-grid{grid-template-columns:1fr!important;gap:18px!important}
  .swf-shopping-cta{grid-template-columns:auto minmax(0,1fr)!important}
  .swf-shopping-cta-button{grid-column:1/-1!important;justify-content:center!important}
  .rez-body{min-height:0!important}
  .swf-rezept-detail{padding:18px!important}
  .swf-rezept-detail-grid{grid-template-columns:1fr!important}
  .swf-rezept-werte{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  header.art{padding-top:34px!important}
  article h2{margin-top:36px!important}
  .foot-grid{grid-template-columns:1fr!important}
}
@media(max-width:420px){
  .brand svg{width:35px!important;height:35px!important}
  .brand{font-size:18px!important}
  .rez-werte{grid-template-columns:1fr!important}
  .swf-filter-shell,.swf-toolbar{padding:14px!important}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media print{header.nav,.topbar,.mobile-menu,.swf-ad-slot,.connect-wrap,footer.site-footer{display:none!important}body{background:#fff!important}.wrap,body.single #hauptinhalt>.wrap,body.page #hauptinhalt>.wrap{width:100%!important}a{color:#000!important}}


/* v61.0.3 final live-parity layer — loaded after every earlier theme rule. */
.screen-reader-text{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
:where(input,select,textarea):not(.swf-filter-search){font:inherit}
html body .swf-filter-search-wrap > input.swf-filter-search{width:100%!important;min-height:48px!important;padding:10px 14px 10px 48px!important;border:1px solid #cdd5cd!important;border-radius:12px!important;background:#fff!important;color:var(--swf-ink)!important;font-size:16px!important}
.swf-filter-search-wrap{position:relative!important;display:block!important;flex:1 1 300px!important;min-width:min(100%,250px)!important}
.swf-filter-search-wrap::before{z-index:2!important}
.swf-filter-selects{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;margin-top:14px!important}
.swf-filter-select-label{display:grid!important;gap:6px!important;font-weight:700!important;color:var(--swf-ink)!important}
.swf-filter-select-label select{width:100%!important;min-height:48px!important;border:1px solid #cdd5cd!important;border-radius:12px!important;padding:10px 40px 10px 13px!important;background:#fff!important;color:var(--swf-ink)!important;font-size:16px!important}
.wissen-grid,.card-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;align-items:stretch!important;gap:24px!important}
.wissen-card,.kcard,.rez-card{height:100%!important;min-width:0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important}
.wissen-card-body,.kcard-body,.rez-body{display:flex!important;flex-direction:column!important;gap:10px!important;flex:1!important;padding:20px 21px 22px!important}
.wissen-card-go,.more,.rez-open{display:inline-flex!important;align-items:center!important;gap:7px!important;margin-top:auto!important}
.wissen-card-go svg,.more svg,.rez-open svg,.swf-shopping-cta-button svg{width:18px!important;height:18px!important;flex:0 0 18px!important}
.tool-picker-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:20px!important;align-items:stretch!important}
.tool-tile{display:flex!important;flex-direction:column!important;min-width:0!important;height:100%!important}
.tool-tile-visual{display:flex!important;align-items:center!important;justify-content:center!important;width:76px!important;height:76px!important;aspect-ratio:1!important;margin:20px auto 8px!important;padding:14px!important;border-radius:20px!important;background:linear-gradient(145deg,#eef8f1,#fff)!important;border:1px solid var(--swf-line)!important;overflow:hidden!important}
.tool-tile-visual svg{display:block!important;width:46px!important;height:46px!important;max-width:46px!important;max-height:46px!important;aspect-ratio:1!important;object-fit:contain!important;padding:0!important;color:var(--swf-green-strong)!important}
.swf-blog-block .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:24px!important}
.swf-blog-block .kcard-body>p{display:none!important}
.rez-open,.swf-shopping-cta-button,.swf-rezept-close{font-family:inherit!important}
.swf-rezept-close{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:44px!important;height:44px!important;padding:10px!important}
.swf-rezept-close svg{width:24px!important;height:24px!important}
@media(max-width:980px){.wissen-grid,.card-grid,.tool-picker-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:680px){.wissen-grid,.card-grid,.tool-picker-grid,.swf-blog-block .card-grid,.swf-filter-selects{grid-template-columns:1fr!important}.swf-filter-chip,.swf-chip{min-height:44px!important}.swf-filter-search,.swf-filter-select-label select{min-height:48px!important}}
@media(min-width:1600px){html{font-size:17px}.wrap{max-width:1320px!important}}
@media(min-width:2200px){html{font-size:18px}.wrap{max-width:1480px!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* v61.0.3 final regression: the loupe must remain visibly separated from text. */
html body .swf-filter-search-wrap::before{opacity:1!important}

@media(max-width:900px){.swf-blog-block .card-grid{grid-template-columns:1fr!important}}

/* v61.0.3 HOTFIX2: final card, icon and News contract. */
/* Card summaries belong to search metadata, not to the visible overview cards. */
.wissen-card-x,
.kcard-body > p,
.rez-card .rez-sub,
.tool-tile .tt-desc,
.news-card .news-excerpt{display:none!important}

/* Exactly one content body per card; no accumulated padding from nested rebuilds. */
.kcard > .kcard-body > .kcard-body,
.wissen-card > .wissen-card-body > .wissen-card-body{display:contents!important}
body.post-type-archive-produkt .kcard-body,
body.post-type-archive-rezept .kcard-body{min-height:0!important}
body.post-type-archive-produkt .kcard-body h2,
body.post-type-archive-produkt .kcard-body h3{font-size:clamp(1.18rem,1.45vw,1.42rem)!important;line-height:1.22!important;margin:0!important;overflow-wrap:anywhere!important}
body.post-type-archive-produkt .kcard-kicker{min-height:1.35em!important}
body.post-type-archive-produkt .kcard .more{margin-top:auto!important;padding-top:12px!important}

/* Tool cards use the full-width editorial illustration family, never legacy line glyphs. */
.swf-tools-page .tool-tile{display:grid!important;grid-template-columns:44px minmax(0,1fr)!important;grid-template-areas:"visual visual" "num cat" "title title"!important;gap:8px 10px!important;padding:0 20px 22px!important;min-height:0!important}
.swf-tools-page .tool-tile-visual{grid-area:visual!important;display:block!important;width:auto!important;height:auto!important;aspect-ratio:4/3!important;margin:0 -20px 10px!important;padding:0!important;border:0!important;border-radius:0!important;background:#f7f8f3!important;overflow:hidden!important}
.swf-tools-page .tool-tile-visual img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;padding:0!important;border-radius:0!important}
.swf-tools-page .tool-tile-visual svg{display:none!important}
.swf-tools-page .tool-tile .tt-num{grid-area:num!important}
.swf-tools-page .tool-tile .tt-cat{grid-area:cat!important}
.swf-tools-page .tool-tile .tt-title{grid-area:title!important;margin:0!important;font-size:1.2rem!important;line-height:1.25!important}

/* Recipe actions use one controlled local icon family. */
.swf-shopping-cta-icon img{display:block!important;width:58px!important;height:58px!important;object-fit:contain!important}
.rez-open .swf-ui-icon,.swf-shopping-cta-button .swf-ui-icon{display:block!important;width:22px!important;height:22px!important;flex:0 0 22px!important}
.swf-rezept-close img{display:block!important;width:28px!important;height:28px!important;object-fit:contain!important}
.rez-open > svg,.swf-shopping-cta-button > svg,.swf-rezept-close > svg{display:none!important}

/* News are a dedicated release/fachnews surface, never a Blog-card clone. */
.swf-news-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:22px!important;align-items:stretch!important}
.news-card{display:flex!important;flex-direction:column!important;padding:22px!important;min-height:220px!important}
.news-title{font-size:clamp(1.15rem,1.35vw,1.38rem)!important;line-height:1.25!important;margin:14px 0 18px!important;overflow-wrap:anywhere!important}
.news-foot{margin-top:auto!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;flex-wrap:wrap!important}
.news-link{font-weight:800!important;color:var(--swf-green-strong)!important}
@media(max-width:980px){.swf-news-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:680px){.swf-news-grid{grid-template-columns:1fr!important}.swf-tools-page .tool-tile-visual{aspect-ratio:16/9!important}}


/* ========================================================================== */
/* v61.0.3 HOTFIX5 — verified card contract and visual source of truth        */
/* ========================================================================== */
:root{--swf-hf5-card-gap:24px;--swf-hf5-card-radius:22px;--swf-hf5-card-border:#dce6dc;--swf-hf5-card-shadow:0 14px 34px rgba(24,72,49,.09)}
[data-swf-render-contract="swf-card-contract-v2"] :is(.wissen-grid,.card-grid),
.swf-blog-block [data-swf-filter-scope]>.card-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:var(--swf-hf5-card-gap)!important;align-items:stretch!important}
:is(.wissen-card,.kcard)[data-swf-render-contract="swf-card-contract-v2"]{display:flex!important;flex-direction:column!important;min-height:0!important;height:100%!important;border:1px solid var(--swf-hf5-card-border)!important;border-radius:var(--swf-hf5-card-radius)!important;box-shadow:var(--swf-hf5-card-shadow)!important;background:#fff!important;overflow:hidden!important;text-decoration:none!important}
:is(.wissen-card,.kcard)[data-swf-render-contract="swf-card-contract-v2"] :is(.kbild,.kcard-bild){aspect-ratio:16/9!important;width:100%!important;height:auto!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:#f6f7f1!important;overflow:hidden!important}
:is(.wissen-card,.kcard)[data-swf-render-contract="swf-card-contract-v2"] :is(.kbild,.kcard-bild) img{width:100%!important;height:100%!important;padding:0!important;object-fit:cover!important;object-position:center!important}
:is(.wissen-card,.kcard)[data-swf-render-contract="swf-card-contract-v2"] :is(.wissen-card-body,.kcard-body){display:flex!important;flex:1 1 auto!important;flex-direction:column!important;gap:14px!important;padding:24px 26px 25px!important;margin:0!important}
:is(.wissen-card,.kcard)[data-swf-render-contract="swf-card-contract-v2"] :is(h2,h3,.wissen-card-t){margin:0!important;font-size:clamp(1.22rem,1.55vw,1.55rem)!important;line-height:1.2!important;text-wrap:balance!important}
:is(.wissen-card,.kcard)[data-swf-render-contract="swf-card-contract-v2"] :is(.wissen-card-go,.more){margin-top:auto!important;padding-top:10px!important;color:#11663e!important;font-weight:750!important}
:is(.wissen-card,.kcard)[data-swf-render-contract="swf-card-contract-v2"] :is(.inhaltstyp-badge,.wissen-card-x,.kcard-excerpt,.excerpt,.summary,.description,p){display:none!important}
.swf-blog-block .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-width:1180px!important;margin-inline:auto!important;gap:28px!important}
.swf-tools-page .tool-picker-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:24px!important;align-items:stretch!important}
.swf-tools-page .tool-tile[data-swf-render-contract="swf-tools-art-v2"]{display:flex!important;flex-direction:column!important;height:100%!important;padding:0 22px 22px!important;border-radius:22px!important;border:1px solid var(--swf-hf5-card-border)!important;box-shadow:var(--swf-hf5-card-shadow)!important;background:#fff!important;overflow:hidden!important}
.swf-tools-page .tool-tile[data-swf-render-contract="swf-tools-art-v2"] .tool-tile-visual{display:block!important;aspect-ratio:4/3!important;margin:0 -22px 18px!important;padding:0!important;border:0!important;border-bottom:1px solid var(--swf-hf5-card-border)!important;background:#f4f6ef!important;overflow:hidden!important}
.swf-tools-page .tool-tile[data-swf-render-contract="swf-tools-art-v2"] .tool-tile-visual img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;padding:0!important;filter:none!important}
.swf-tools-page .tool-tile[data-swf-render-contract="swf-tools-art-v2"] .tt-desc{display:none!important}
.rez-uebersicht[data-swf-render-contract="swf-recipe-card-v2"] .rez-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:24px!important;align-items:stretch!important}
.rez-uebersicht[data-swf-render-contract="swf-recipe-card-v2"] .rez-card{display:flex!important;flex-direction:column!important;height:100%!important;min-height:0!important;border-radius:22px!important;border:1px solid var(--swf-hf5-card-border)!important;box-shadow:var(--swf-hf5-card-shadow)!important;overflow:hidden!important;background:#fff!important}
.rez-uebersicht[data-swf-render-contract="swf-recipe-card-v2"] .rez-bild{aspect-ratio:16/9!important;height:auto!important;margin:0!important;padding:0!important;background:#f3f5ed!important}
.rez-uebersicht[data-swf-render-contract="swf-recipe-card-v2"] .rez-bild img{width:100%!important;height:100%!important;object-fit:cover!important;padding:0!important}
.rez-uebersicht[data-swf-render-contract="swf-recipe-card-v2"] .rez-body{display:flex!important;flex:1!important;flex-direction:column!important;gap:18px!important;padding:22px 24px 24px!important}
.rez-uebersicht[data-swf-render-contract="swf-recipe-card-v2"] .rez-titel{font-size:1.32rem!important;line-height:1.25!important;text-wrap:balance!important}
.rez-uebersicht[data-swf-render-contract="swf-recipe-card-v2"] .rez-open{margin-top:auto!important}
.swf-news-page[data-swf-render-contract="swf-news-project-only-v2"] .swf-news-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:24px!important}
.swf-news-page[data-swf-render-contract="swf-news-project-only-v2"] .news-card{min-height:220px!important;border-radius:22px!important;border:1px solid var(--swf-hf5-card-border)!important;box-shadow:var(--swf-hf5-card-shadow)!important}
.swf-offline-release-badge{position:fixed;left:12px;bottom:12px;z-index:99999;padding:7px 11px;border-radius:999px;background:#133f2f;color:#fff;font:700 11px/1.2 system-ui,sans-serif;letter-spacing:.03em;box-shadow:0 5px 20px rgba(0,0,0,.22);pointer-events:none}
@media(max-width:1020px){[data-swf-render-contract="swf-card-contract-v2"] :is(.wissen-grid,.card-grid),.swf-tools-page .tool-picker-grid,.rez-uebersicht[data-swf-render-contract="swf-recipe-card-v2"] .rez-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:720px){[data-swf-render-contract="swf-card-contract-v2"] :is(.wissen-grid,.card-grid),.swf-blog-block .card-grid,.swf-tools-page .tool-picker-grid,.rez-uebersicht[data-swf-render-contract="swf-recipe-card-v2"] .rez-grid,.swf-news-page[data-swf-render-contract="swf-news-project-only-v2"] .swf-news-grid{grid-template-columns:1fr!important}.swf-offline-release-badge{font-size:10px;left:8px;bottom:8px}}

/* HOTFIX5 final visual hard gates: no stale reveal state, no mobile topbar overflow. */
.swf-blog-block .reveal,.swf-content-card.reveal{opacity:1!important;transform:none!important;visibility:visible!important}
.swf-news-page[data-swf-render-contract="swf-news-project-only-v2"] .swf-news-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
@media(max-width:620px){
  .topbar .wrap{justify-content:center!important;overflow:visible!important;flex-wrap:wrap!important;padding-inline:12px!important}
  .topbar span{white-space:normal!important;text-align:center!important}
  .topbar span:nth-child(n+2){display:none!important}
}

/* HOTFIX5 filter visibility hard gate: [hidden] must beat card display rules. */
[data-swf-filter-card][hidden],
[data-swf-filter-empty][hidden]{display:none!important}

/* HOTFIX5 browser-verified final overrides (higher specificity than legacy layers). */
.swf-blog-block [data-swf-filter-scope]>.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
main[data-swf-render-contract="swf-news-project-only-v2"] .swf-news-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.tool-card .tool-head{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;gap:10px!important;min-width:0!important;max-width:100%!important}
.tool-card .tool-head>*{min-width:0!important;max-width:100%!important;margin-inline:0!important;overflow-wrap:anywhere!important}
@media(max-width:720px){
  .swf-blog-block [data-swf-filter-scope]>.card-grid,
  main[data-swf-render-contract="swf-news-project-only-v2"] .swf-news-grid{grid-template-columns:1fr!important}
}

/* ==========================================================================
   v61.0.3 FINAL: Blog editorial v3 + recipe card v3
   Source of truth for the final go-live candidate.
   ========================================================================== */
.swf-blog-block[data-swf-render-contract="swf-blog-grid-v3"] .swf-blog-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:24px!important;
  align-items:stretch!important;
  width:min(100%,1280px)!important;
  margin-inline:auto!important;
}
.swf-blog-card[data-swf-card-variant="blog-editorial-v3"]{
  display:flex!important;
  flex-direction:column!important;
  min-width:0!important;
  height:100%!important;
  overflow:hidden!important;
  border:1px solid #dbe3dc!important;
  border-radius:22px!important;
  background:#fff!important;
  box-shadow:0 12px 34px rgba(19,54,39,.08)!important;
  color:var(--ink,#173526)!important;
  text-decoration:none!important;
}
.swf-blog-card .swf-blog-card-media{
  display:block!important;
  width:100%!important;
  aspect-ratio:16/9!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  overflow:hidden!important;
  background:#f7f5ee!important;
}
.swf-blog-card .swf-blog-card-media img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  object-fit:cover!important;
  object-position:center!important;
}
.swf-blog-card .swf-blog-card-body{
  display:flex!important;
  flex:1 1 auto!important;
  flex-direction:column!important;
  gap:14px!important;
  min-height:196px!important;
  padding:22px 26px 24px!important;
}
.swf-blog-card .swf-blog-card-kicker{
  display:inline-flex!important;
  align-self:flex-start!important;
  padding:6px 10px!important;
  border-radius:999px!important;
  background:#e8f5ed!important;
  color:#137044!important;
  font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif!important;
  font-size:.72rem!important;
  font-weight:800!important;
  line-height:1!important;
  letter-spacing:.055em!important;
  text-transform:uppercase!important;
}
.swf-blog-card h2{
  margin:0!important;
  color:var(--ink,#173526)!important;
  font-size:clamp(1.28rem,1.7vw,1.65rem)!important;
  line-height:1.17!important;
  text-wrap:balance!important;
}
.swf-blog-card .swf-blog-card-cta{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
  width:100%!important;
  margin-top:auto!important;
  padding-top:10px!important;
  color:#11663e!important;
  font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif!important;
  font-size:.93rem!important;
  font-weight:800!important;
}
.swf-blog-card-arrow,
.swf-recipe-card-arrow{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:32px!important;
  height:32px!important;
  flex:0 0 32px!important;
  color:#147447!important;
  opacity:1!important;
}
.swf-blog-card-arrow svg,
.swf-recipe-card-arrow svg{
  display:block!important;
  width:32px!important;
  height:32px!important;
  overflow:visible!important;
  fill:#edf8f1!important;
  stroke:#147447!important;
  stroke-width:1.8!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.swf-blog-card:hover,
.swf-blog-card:focus-visible{
  transform:translateY(-2px)!important;
  box-shadow:0 16px 42px rgba(19,54,39,.13)!important;
}
.swf-blog-card:focus-visible{
  outline:3px solid #2ba668!important;
  outline-offset:3px!important;
}

.rez-uebersicht[data-swf-render-contract="swf-recipe-card-v3"] .rez-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:24px!important;
  align-items:stretch!important;
}
.rez-uebersicht[data-swf-render-contract="swf-recipe-card-v3"] .rez-card{
  display:flex!important;
  flex-direction:column!important;
  height:100%!important;
  min-height:0!important;
  overflow:hidden!important;
  border:1px solid #dbe3dc!important;
  border-radius:22px!important;
  background:#fff!important;
  box-shadow:0 12px 34px rgba(19,54,39,.08)!important;
  text-align:left!important;
}
.rez-uebersicht[data-swf-render-contract="swf-recipe-card-v3"] .rez-bild{
  display:block!important;
  width:100%!important;
  aspect-ratio:16/9!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  background:#f3f5ed!important;
}
.rez-uebersicht[data-swf-render-contract="swf-recipe-card-v3"] .rez-bild img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  object-fit:cover!important;
  object-position:center!important;
}
.rez-uebersicht[data-swf-render-contract="swf-recipe-card-v3"] .rez-body{
  display:flex!important;
  flex:1 1 auto!important;
  flex-direction:column!important;
  gap:18px!important;
  padding:22px 24px 24px!important;
}
.rez-uebersicht[data-swf-render-contract="swf-recipe-card-v3"] .rez-titel{
  margin:0!important;
  font-size:1.32rem!important;
  line-height:1.25!important;
  text-wrap:balance!important;
}
.rez-uebersicht[data-swf-render-contract="swf-recipe-card-v3"] .rez-open{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  width:100%!important;
  margin-top:auto!important;
  padding-top:8px!important;
  color:#11663e!important;
  font-weight:800!important;
}
.rez-uebersicht[data-swf-render-contract="swf-recipe-card-v3"] .rez-open > img,
.rez-uebersicht[data-swf-render-contract="swf-recipe-card-v3"] .rez-open > .swf-ui-icon{
  display:none!important;
}
@media(max-width:1020px){
  .rez-uebersicht[data-swf-render-contract="swf-recipe-card-v3"] .rez-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:1180px){
  .swf-blog-block[data-swf-render-contract="swf-blog-grid-v3"] .swf-blog-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    width:min(100%,980px)!important;
  }
}
@media(max-width:760px){
  .swf-blog-block[data-swf-render-contract="swf-blog-grid-v3"] .swf-blog-grid,
  .rez-uebersicht[data-swf-render-contract="swf-recipe-card-v3"] .rez-grid{
    grid-template-columns:1fr!important;
  }
  .swf-blog-block[data-swf-render-contract="swf-blog-grid-v3"] .swf-blog-grid{
    max-width:560px!important;
  }
}


/* v61.0.3 FINAL: filtered editorial cards must remain truly hidden. */
.swf-blog-card[hidden],
.swf-blog-card[aria-hidden="true"]{
  display:none!important;
}


/* HF8 tool/news compact filter refinements */
.swf-tools-page .swf-filter-shell{margin:14px 0 22px!important;padding:14px 16px!important;border-radius:18px!important;background:#fbfcf9!important;border:1px solid #dbe6dc!important}
.swf-tools-page .swf-filter-row{display:flex!important;align-items:center!important;gap:12px!important;flex-wrap:wrap!important;margin-bottom:10px!important}
.swf-tools-page .swf-filter-count{margin-left:auto!important;color:#5b7265!important;font-size:.88rem!important;font-weight:700!important}
.swf-tools-page .swf-filter-chip{min-height:32px!important;padding:7px 11px!important;font-size:12px!important;font-weight:700!important}
.swf-tools-page .swf-filter-chip .swf-filter-chip-count{min-width:20px!important;height:20px!important;font-size:10.5px!important}
.swf-tools-page .tool-tile[hidden]{display:none!important}
.news-filter .swf-filter-chip,.news-chip.swf-filter-chip{min-height:34px!important;padding:8px 12px!important;font-size:12.5px!important}
.swf-news-page .swf-filter-shell{margin-bottom:20px!important}
.swf-news-page .swf-filter-row{margin-bottom:10px!important}

/* ========================================================================== 
   v61.0.3 FINAL – Recipe nutrition filters, account and AI image disclosure
   ========================================================================== */
.swf-recipes-v6103{display:grid;gap:24px}
.swf-recipe-filter{padding:18px;border:1px solid #dbe5dd;border-radius:20px;background:#fff;box-shadow:0 10px 30px rgba(19,54,39,.055)}
.swf-recipe-filter-top{display:grid;grid-template-columns:minmax(280px,1fr) minmax(180px,.35fr) auto auto;gap:12px;align-items:end}
.swf-recipe-filter label{display:grid;gap:6px;color:#3b5145;font-size:.76rem;font-weight:800;letter-spacing:.02em}
.swf-recipe-filter input,.swf-recipe-filter select{width:100%;min-height:44px;padding:9px 12px;border:1px solid #cad7ce;border-radius:12px;background:#fff;color:#173526;font:600 .91rem/1.2 system-ui,sans-serif}
.swf-recipe-filter-categories{display:grid;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid #edf1ee}
.swf-recipe-filter-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:14px}
.swf-recipes-v6103 .rez-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:24px!important;align-items:stretch!important}
.swf-recipes-v6103 .rez-card{position:relative;display:flex;flex-direction:column;overflow:hidden;border:1px solid #dbe3dc;border-radius:22px;background:#fff;box-shadow:0 12px 34px rgba(19,54,39,.08)}
.swf-recipes-v6103 .rez-card[hidden]{display:none!important}
.swf-recipes-v6103 .rez-card-open{display:flex;flex:1;flex-direction:column;width:100%;padding:0;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer}
.swf-recipes-v6103 .rez-bild{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#f4f5ef}
.swf-recipes-v6103 .rez-bild img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.swf-ai-image-badge{position:absolute;top:10px;right:10px;display:inline-flex;align-items:center;min-height:27px;padding:5px 9px;border-radius:999px;background:rgba(20,87,54,.9);color:#fff;font:800 10px/1 system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;backdrop-filter:blur(6px)}
.swf-recipes-v6103 .rez-body{display:flex;flex:1;flex-direction:column;gap:15px;padding:20px 20px 18px}
.swf-recipes-v6103 .rez-titel{font-family:"Fraunces",Georgia,serif;font-size:1.22rem;font-weight:700;line-height:1.24;color:#173526;text-wrap:balance}
.rez-nutrition-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.rez-nutrition-grid span{display:flex;min-width:0;min-height:54px;flex-direction:column;align-items:center;justify-content:center;padding:6px 3px;border-radius:10px;background:#eef7f1;text-align:center}
.rez-nutrition-grid b{font:800 .8rem/1.1 system-ui,sans-serif;color:#145d3b;white-space:nowrap}
.rez-nutrition-grid small{margin-top:3px;font:600 .58rem/1.05 system-ui,sans-serif;color:#5f7166;overflow-wrap:anywhere}
.rez-meta-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;color:#53675b;font:700 .82rem/1.2 system-ui,sans-serif}
.rez-open-label{color:#12663e}
.rez-favorite{position:absolute;left:12px;top:12px;z-index:2;display:grid;place-items:center;width:34px;height:34px;border:1px solid rgba(255,255,255,.8);border-radius:50%;background:rgba(255,255,255,.92);color:#b7405f;font-size:1.25rem;cursor:pointer;box-shadow:0 5px 14px rgba(19,54,39,.13)}
.rez-favorite[aria-pressed="true"]{background:#fff0f4;color:#a52149}
.swf-ai-recipe-note{margin:0;padding:14px 16px;border-left:4px solid #2aa860;border-radius:12px;background:#f1f8f3;color:#40564a;font-size:.86rem}
.swf-ai-recipe-note a{font-weight:800;color:#12663e}
.swf-rezept-detail-media figcaption{padding:7px 10px;color:#5c7064;font-size:.75rem;text-align:center}
.swf-rezept-werte{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:8px!important}
.swf-rezept-werte span{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:62px;padding:8px;border-radius:12px;background:#edf7f0}
.swf-rezept-werte small{margin-top:4px;color:#597063;font-size:.68rem}

.swf-account-page{padding:52px 0 70px}
.swf-account-head{max-width:850px;margin-bottom:22px}
.swf-account-sync{margin-bottom:18px;padding:12px 15px;border:1px solid #dbe6dd;border-radius:14px;background:#f8fbf8;color:#496052}
.swf-account-ok{color:#147447;font-weight:800}
.swf-account-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:20px}
.swf-account-stats article{display:flex;min-height:112px;flex-direction:column;justify-content:center;padding:18px;border:1px solid #dbe3dc;border-radius:18px;background:#fff;box-shadow:0 8px 25px rgba(19,54,39,.06)}
.swf-account-stats b{font-size:1.8rem;color:#137447}.swf-account-stats span{color:#53675b;font-weight:700}
.swf-account-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.swf-account-panel{padding:20px;border:1px solid #dbe3dc;border-radius:20px;background:#fff;box-shadow:0 10px 28px rgba(19,54,39,.06)}
.swf-account-panel h2{margin-top:0;font-size:1.35rem}
.swf-account-recipes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.swf-account-recipe{display:grid;grid-template-columns:86px 1fr;gap:11px;align-items:center;padding:8px;border-radius:14px;background:#f7faf7}
.swf-account-recipe img{width:86px;height:58px;object-fit:cover;border-radius:9px;background:#eef2ec}
.swf-account-recipe div{display:grid;gap:4px}.swf-account-recipe small{color:#64786c}
.swf-account-pref{display:inline-flex;gap:7px;margin:4px;padding:7px 10px;border-radius:999px;background:#edf7f0;font-size:.8rem}
@media(max-width:1050px){.swf-recipe-filter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.swf-recipe-filter-top{grid-template-columns:1fr 1fr}.swf-recipes-v6103 .rez-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.swf-account-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.swf-recipe-filter-top,.swf-recipe-filter-grid,.swf-account-grid,.swf-account-stats{grid-template-columns:1fr}.swf-recipes-v6103 .rez-grid{grid-template-columns:1fr!important}.rez-nutrition-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.swf-account-recipes{grid-template-columns:1fr}}

/* v61.0.3 CTA and recipe-card arrow refinement */
.swf-recipes-v6103 .swf-shopping-cta{grid-template-columns:minmax(0,1fr) auto auto!important}
.swf-recipes-v6103 .rez-open-label{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#12663e;font-weight:800}
.swf-recipes-v6103 .swf-recipe-card-arrow{width:30px!important;height:30px!important;flex:0 0 30px!important}
.swf-recipes-v6103 .swf-recipe-card-arrow svg{width:30px!important;height:30px!important}
@media(max-width:680px){.swf-recipes-v6103 .swf-shopping-cta{grid-template-columns:1fr!important}.swf-recipes-v6103 .swf-shopping-cta .btn{width:100%;justify-content:center}}


/* v61.0.5-restpunkte: EN main menu scaling + news chips */
@media (min-width:1101px){
  html[lang="en"] header.nav .nav-inner{grid-template-columns:minmax(185px,1fr) minmax(0,1.55fr) auto!important;column-gap:10px!important}
  html[lang="en"] header.nav nav.links{justify-content:center!important;gap:0!important;flex-wrap:nowrap!important}
  html[lang="en"] header.nav nav.links a{font-size:13.2px!important;line-height:1.22!important;padding:10px 7px!important;letter-spacing:0!important}
  html[lang="en"] header.nav .nav-actions{gap:6px!important}
  html[lang="en"] header.nav .lang-switch,
  html[lang="en"] header.nav .nav-cta{font-size:12.4px!important;padding:9px 11px!important;min-height:40px!important}
  html[lang="en"] header.nav .swf-account-link{padding-left:11px!important;padding-right:11px!important}
}
@media (min-width:1281px){
  html[lang="en"] header.nav .nav-inner{grid-template-columns:minmax(200px,1fr) minmax(0,1.5fr) auto!important;column-gap:12px!important}
  html[lang="en"] header.nav nav.links a{font-size:13.7px!important;padding:10px 8px!important}
  html[lang="en"] header.nav .lang-switch,
  html[lang="en"] header.nav .nav-cta{font-size:12.8px!important;padding:9px 12px!important}
}

/* v61.0.3 R6: final tools, reviewed-news and English navigation contract. */
.swf-tool-textarea{display:block;width:100%;min-height:112px;padding:12px 14px;border:1px solid var(--swf-line,#dbe3dc);border-radius:12px;background:#fff;color:var(--swf-ink,#173526);font:inherit;line-height:1.5;resize:vertical}
.swf-news-page[data-swf-render-contract="swf-news-reviewed-sources-v3"] .swf-news-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:22px!important;align-items:stretch!important}
.swf-news-page[data-swf-render-contract="swf-news-reviewed-sources-v3"] .news-card{display:flex!important;min-height:220px!important;flex-direction:column!important;padding:20px!important;border:1px solid #dbe3dc!important;border-radius:20px!important;background:#fff!important;box-shadow:0 9px 28px rgba(19,54,39,.06)!important}
.swf-news-page[data-swf-render-contract="swf-news-reviewed-sources-v3"] .news-title{margin:16px 0!important;font-size:1.2rem!important;line-height:1.3!important}
.swf-news-page[data-swf-render-contract="swf-news-reviewed-sources-v3"] .news-foot{margin-top:auto!important}
.swf-news-source-card{background:linear-gradient(145deg,#fbfdf9,#f1f7f1)!important}
.swf-source-badge{display:inline-flex;align-items:center;min-height:26px;padding:5px 9px;border-radius:999px;background:#e7f5ec;color:#136b42;font-size:.7rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.swf-news-filter-chips{max-height:144px;overflow:auto;padding-bottom:5px!important}
.swf-news-rights-note{margin-top:22px;padding:16px 18px;border:1px solid #dbe6dd;border-radius:16px;background:#f7faf7;color:#52675a;line-height:1.55}
@media(max-width:1050px){.swf-news-page[data-swf-render-contract="swf-news-reviewed-sources-v3"] .swf-news-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:680px){.swf-news-page[data-swf-render-contract="swf-news-reviewed-sources-v3"] .swf-news-grid{grid-template-columns:1fr!important}.swf-news-filter-chips{max-height:none}}

/* English labels require more room. Up to 1279px the tested mobile menu is used. */
@media(max-width:1279px){
  html[lang="en"] header.nav .nav-inner{display:flex!important;grid-template-columns:none!important;height:68px!important;gap:10px!important}
  html[lang="en"] header.nav nav.links,
  html[lang="en"] header.nav .nav-actions{display:none!important}
  html[lang="en"] header.nav .burger{display:flex!important;margin-left:auto!important;flex:0 0 46px!important}
}
@media(min-width:1280px){
  html[lang="en"] header.nav .nav-inner{display:grid!important;grid-template-columns:minmax(185px,1fr) minmax(0,1.55fr) auto!important;column-gap:9px!important;max-width:1580px!important}
  html[lang="en"] header.nav nav.links{display:flex!important;justify-content:center!important;gap:0!important;flex-wrap:nowrap!important;min-width:0!important}
  html[lang="en"] header.nav nav.links a{font-size:12.9px!important;line-height:1.2!important;padding:10px 6px!important;letter-spacing:0!important;white-space:nowrap!important}
  html[lang="en"] header.nav .nav-actions{display:flex!important;gap:5px!important;white-space:nowrap!important}
  html[lang="en"] header.nav .lang-switch,
  html[lang="en"] header.nav .nav-cta{min-height:40px!important;padding:9px 10px!important;font-size:12.2px!important}
  html[lang="en"] header.nav .burger{display:none!important}
}
@media(min-width:1440px){
  html[lang="en"] header.nav .nav-inner{grid-template-columns:minmax(205px,1fr) minmax(0,1.55fr) auto!important;column-gap:12px!important}
  html[lang="en"] header.nav nav.links a{font-size:13.7px!important;padding:10px 8px!important}
  html[lang="en"] header.nav .lang-switch,
  html[lang="en"] header.nav .nav-cta{font-size:12.8px!important;padding:9px 12px!important}
}

/* ========================================================================== 
   v61.0.3 R8 SECURITY FINAL — English navigation and Tool symbol contract
   ========================================================================== */
.swf-tools-page .swf-tools-intro h1{
  font-size:clamp(2.2rem,3vw,3.25rem)!important;
  line-height:1.06!important;
  letter-spacing:-.025em!important;
  max-width:760px!important;
}
.swf-tools-page .tool-picker-head h2{
  font-size:clamp(1.72rem,2.1vw,2.35rem)!important;
  line-height:1.12!important;
  letter-spacing:-.015em!important;
}
.swf-tools-page .tool-picker-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:22px!important;
  align-items:stretch!important;
}
.swf-tools-page .tool-tile[data-swf-render-contract="swf-tools-art-v4"]{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  min-height:250px!important;
  height:100%!important;
  padding:20px 18px 22px!important;
  gap:8px!important;
  border:1px solid #dbe6dd!important;
  border-radius:22px!important;
  background:#fff!important;
  box-shadow:0 10px 28px rgba(19,54,39,.07)!important;
  text-align:center!important;
  overflow:hidden!important;
}
.swf-tools-page .tool-tile[data-swf-render-contract="swf-tools-art-v4"]:hover,
.swf-tools-page .tool-tile[data-swf-render-contract="swf-tools-art-v4"]:focus-visible{
  transform:translateY(-2px)!important;
  border-color:#b9d9c4!important;
  box-shadow:0 16px 34px rgba(19,54,39,.12)!important;
}
.swf-tools-page .tool-tile[data-swf-render-contract="swf-tools-art-v4"] .tool-tile-visual[data-swf-art-style="tool-symbol-v6103-r8"]{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:108px!important;
  height:108px!important;
  min-width:108px!important;
  min-height:108px!important;
  aspect-ratio:1/1!important;
  margin:0 auto 4px!important;
  padding:0!important;
  border:0!important;
  border-radius:30px!important;
  background:transparent!important;
  overflow:visible!important;
}
.swf-tools-page .tool-tile[data-swf-render-contract="swf-tools-art-v4"] .tool-tile-visual[data-swf-art-style="tool-symbol-v6103-r8"] img{
  display:block!important;
  width:108px!important;
  height:108px!important;
  max-width:108px!important;
  max-height:108px!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:30px!important;
  filter:none!important;
}
.swf-tools-page .tool-tile[data-swf-render-contract="swf-tools-art-v4"] .tt-num{
  display:grid!important;
  place-items:center!important;
  width:28px!important;
  height:28px!important;
  min-height:28px!important;
  margin:2px auto 0!important;
  border-radius:999px!important;
  background:#198953!important;
  color:#fff!important;
  font:850 .72rem/1 system-ui,-apple-system,"Segoe UI",Arial,sans-serif!important;
}
.swf-tools-page .tool-tile[data-swf-render-contract="swf-tools-art-v4"] .tt-cat{
  margin:2px 0 0!important;
  color:#147447!important;
  font:800 .72rem/1.15 system-ui,-apple-system,"Segoe UI",Arial,sans-serif!important;
  letter-spacing:.055em!important;
  text-transform:uppercase!important;
}
.swf-tools-page .tool-tile[data-swf-render-contract="swf-tools-art-v4"] .tt-title{
  margin:3px 0 0!important;
  color:#173526!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:1.08rem!important;
  line-height:1.22!important;
  text-wrap:balance!important;
}
.swf-tools-page .tool-tile[hidden]{display:none!important}
@media(max-width:980px){
  .swf-tools-page .tool-picker-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:620px){
  .swf-tools-page .tool-picker-grid{grid-template-columns:1fr!important}
  .swf-tools-page .tool-tile[data-swf-render-contract="swf-tools-art-v4"]{min-height:225px!important}
}

/* The English labels are longer. Below 1280px use the tested mobile menu. */
@media(max-width:1279px){
  html[lang="en"] header.nav .nav-inner{
    display:flex!important;
    grid-template-columns:none!important;
    width:min(100% - 28px,1180px)!important;
    max-width:1180px!important;
    height:68px!important;
    gap:10px!important;
  }
  html[lang="en"] header.nav nav.links,
  html[lang="en"] header.nav .nav-actions{display:none!important}
  html[lang="en"] header.nav .burger{
    display:flex!important;
    margin-left:auto!important;
    flex:0 0 46px!important;
  }
}
@media(min-width:1280px){
  html[lang="en"] header.nav .nav-inner{
    display:grid!important;
    grid-template-columns:minmax(190px,220px) minmax(0,1fr) auto!important;
    width:calc(100% - 28px)!important;
    max-width:1510px!important;
    min-height:78px!important;
    margin-inline:auto!important;
    column-gap:10px!important;
    align-items:center!important;
  }
  html[lang="en"] header.nav .brand{
    font-size:20px!important;
    white-space:nowrap!important;
  }
  html[lang="en"] header.nav nav.links{
    display:flex!important;
    min-width:0!important;
    align-items:center!important;
    justify-content:center!important;
    gap:0!important;
    margin:0!important;
    flex-wrap:nowrap!important;
  }
  html[lang="en"] header.nav nav.links a{
    flex:0 0 auto!important;
    min-width:0!important;
    padding:9px 6px!important;
    font-size:12.5px!important;
    line-height:1.2!important;
    font-weight:670!important;
    letter-spacing:0!important;
    white-space:nowrap!important;
  }
  html[lang="en"] header.nav nav.links a[data-nav-key="tools"]{
    font-size:12.5px!important;
    font-weight:670!important;
  }
  html[lang="en"] header.nav .nav-actions{
    display:flex!important;
    flex:0 0 auto!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:5px!important;
    white-space:nowrap!important;
  }
  html[lang="en"] header.nav .lang-switch,
  html[lang="en"] header.nav .nav-cta{
    min-height:38px!important;
    padding:8px 10px!important;
    font-size:11.8px!important;
    line-height:1!important;
  }
  html[lang="en"] header.nav .burger{display:none!important}
}
@media(min-width:1440px){
  html[lang="en"] header.nav .nav-inner{
    grid-template-columns:minmax(205px,230px) minmax(0,1fr) auto!important;
    column-gap:12px!important;
  }
  html[lang="en"] header.nav nav.links a{
    font-size:13.1px!important;
    padding-inline:7px!important;
  }
  html[lang="en"] header.nav .lang-switch,
  html[lang="en"] header.nav .nav-cta{
    font-size:12.4px!important;
    padding-inline:11px!important;
  }
}
@media(min-width:1600px){
  html[lang="en"] header.nav nav.links a{
    font-size:13.6px!important;
    padding-inline:8px!important;
  }
  html[lang="en"] header.nav .lang-switch,
  html[lang="en"] header.nav .nav-cta{
    font-size:12.8px!important;
    padding-inline:12px!important;
  }
}


/* v61.0.3 R9 — Tools archive header parity */
.swf-tools-page-head .swf-page-head-copy h1{font-size:clamp(2.35rem,5vw,4.2rem)!important;line-height:1.04!important;letter-spacing:-.035em!important;margin:0!important}
.swf-tools-page-head .swf-page-head-copy .intro{font-size:1.13rem!important;line-height:1.65!important;max-width:65ch!important;color:var(--swf-muted)!important;margin-top:18px!important}
.swf-tools-page .tool-picker-head h2{font-size:clamp(1.55rem,1.8vw,2rem)!important;line-height:1.18!important;letter-spacing:-.012em!important}

/* v61.0.3 R10 – protected account layout */
.swf-account-page{padding:34px 0 72px!important;background:linear-gradient(180deg,#fbfcf9 0,#fff 38%,#fbfcf9 100%)!important}
.swf-account-wrap{max-width:1180px!important}
.swf-account-hero{display:grid!important;grid-template-columns:minmax(0,1.55fr) minmax(260px,.65fr)!important;gap:30px!important;align-items:center!important;padding:30px 32px!important;margin-bottom:22px!important;border:1px solid #dce7df!important;border-radius:26px!important;background:linear-gradient(135deg,#f5fbf6,#fffaf3)!important;box-shadow:0 14px 40px rgba(18,62,42,.07)!important}
.swf-account-hero-copy h1{margin:.2rem 0 .55rem!important;font-size:clamp(2.25rem,4vw,3.45rem)!important;line-height:1.02!important}
.swf-account-hero-copy p{max-width:760px!important;margin:0!important;color:#4f6659!important;font-size:1.06rem!important;line-height:1.7!important}
.swf-account-hero-security{display:grid!important;justify-items:center!important;gap:12px!important;padding:16px!important;border:1px solid #dbe7de!important;border-radius:22px!important;background:rgba(255,255,255,.78)!important}
.swf-account-lock-art{display:block!important;width:min(100%,250px)!important;height:auto!important}
.swf-account-security-badges{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;gap:7px!important}
.swf-account-security-badges span{padding:6px 10px!important;border:1px solid #e4d9d0!important;border-radius:999px!important;background:#fff7ef!important;color:#7b5f4e!important;font:750 12px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif!important}
.swf-account-security-badges span.is-ok{border-color:#c8e4d1!important;background:#edf8f0!important;color:#176b42!important}
.swf-account-gate{display:grid!important;grid-template-columns:76px minmax(0,1fr)!important;gap:20px!important;align-items:start!important;padding:26px 28px!important;border:1px solid #d9e5dc!important;border-left:5px solid #17824f!important;border-radius:22px!important;background:#fff!important;box-shadow:0 12px 32px rgba(18,62,42,.06)!important}
.swf-account-gate-icon{display:grid!important;place-items:center!important;width:64px!important;height:64px!important;border-radius:18px!important;background:#edf8f0!important;font-size:30px!important}
.swf-account-gate-copy h2{margin:0 0 8px!important;font-size:1.55rem!important}
.swf-account-gate-copy p{margin:0 0 16px!important;color:#53695d!important;line-height:1.65!important}
.swf-account-gate-facts{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:9px!important;margin-top:18px!important}
.swf-account-gate-facts span{padding:10px 12px!important;border-radius:12px!important;background:#f4f8f4!important;color:#385346!important;font-size:.83rem!important;font-weight:700!important}
.swf-account-sync{margin:0 0 12px!important;padding:12px 15px!important;border:1px solid #dbe6dd!important;border-radius:14px!important;background:#f8fbf8!important;color:#496052!important}
.swf-account-ok{color:#147447!important;font-weight:800!important}.swf-account-warn{color:#9a4f2c!important;font-weight:800!important}
.swf-account-toolbar{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;margin-bottom:18px!important;padding:10px 14px!important;border-radius:13px!important;background:#edf7f0!important}
.swf-account-secure-label{color:#176b42!important;font-size:.86rem!important;font-weight:800!important}.swf-account-logout{font-weight:800!important;color:#9a4f2c!important}
.swf-account-stats{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important;margin-bottom:20px!important}
.swf-account-stats article{display:flex!important;min-height:118px!important;flex-direction:column!important;justify-content:center!important;padding:20px!important;border:1px solid #dbe3dc!important;border-radius:19px!important;background:#fff!important;box-shadow:0 8px 25px rgba(19,54,39,.055)!important}
.swf-account-stats b{font-size:2rem!important;line-height:1!important;color:#137447!important}.swf-account-stats span{margin-top:10px!important;color:#53675b!important;font-weight:750!important;line-height:1.3!important}
.swf-account-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important;align-items:start!important}
.swf-account-panel{padding:24px!important;border:1px solid #dbe3dc!important;border-radius:22px!important;background:#fff!important;box-shadow:0 10px 28px rgba(19,54,39,.055)!important;min-width:0!important}
.swf-account-panel h2{margin:0 0 16px!important;font-size:1.55rem!important;line-height:1.15!important}
.swf-account-panel-head{display:flex!important;justify-content:space-between!important;align-items:center!important;gap:12px!important;margin-bottom:14px!important}.swf-account-panel-head h2{margin:0!important}.swf-account-panel-head a{font-size:.82rem!important;font-weight:800!important;color:#176b42!important;white-space:nowrap!important}
.swf-account-recipes{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
.swf-account-recipe{display:grid!important;grid-template-columns:112px minmax(0,1fr)!important;gap:12px!important;align-items:center!important;min-height:94px!important;padding:10px!important;border:1px solid #e2ebe4!important;border-radius:16px!important;background:#f8fbf8!important;overflow:hidden!important}
.swf-account-recipe-media{display:block!important;width:112px!important;height:74px!important;border-radius:12px!important;overflow:hidden!important;background:#eef4ef!important}
.swf-account-recipe-media img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important}
.swf-account-recipe strong{display:block!important;color:#173f2b!important;font-size:.96rem!important;line-height:1.25!important;overflow-wrap:anywhere!important}.swf-account-recipe small{display:block!important;margin-top:5px!important;color:#64786c!important;font-size:.78rem!important}
.swf-account-empty{margin:0!important;color:#66786e!important}
.swf-account-pref{display:inline-flex!important;gap:7px!important;margin:4px!important;padding:7px 10px!important;border-radius:999px!important;background:#edf7f0!important;font-size:.8rem!important}
@media(max-width:960px){.swf-account-hero{grid-template-columns:1fr!important}.swf-account-hero-security{grid-template-columns:auto 1fr!important;justify-items:start!important;align-items:center!important}.swf-account-lock-art{width:170px!important}.swf-account-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}.swf-account-gate-facts{grid-template-columns:1fr!important}}
@media(max-width:720px){.swf-account-page{padding-top:20px!important}.swf-account-hero{padding:22px!important;border-radius:20px!important}.swf-account-hero-security{grid-template-columns:1fr!important;justify-items:center!important}.swf-account-lock-art{width:150px!important}.swf-account-gate{grid-template-columns:1fr!important;padding:22px!important}.swf-account-grid,.swf-account-stats{grid-template-columns:1fr!important}.swf-account-recipes{grid-template-columns:1fr!important}.swf-account-panel{padding:18px!important}.swf-account-toolbar{align-items:flex-start!important;flex-direction:column!important}.swf-account-panel-head{align-items:flex-start!important;flex-direction:column!important}}
.swf-account-gate-icon svg{width:34px!important;height:34px!important;color:#176b42!important}
.swf-account-page .btn-disabled{display:inline-flex!important;align-items:center!important;min-height:42px!important;padding:9px 15px!important;border:1px solid #d8e1da!important;border-radius:999px!important;background:#f3f5f3!important;color:#6b776f!important;font-weight:750!important;cursor:not-allowed!important}

/* ========================================================================== 
   v61.0.3 R12 — final bilingual navigation + account layout parity
   ========================================================================== */
.swf-account-page{padding:0 0 72px!important;background:linear-gradient(180deg,#fbfcf9 0,#fff 55%,#fbfcf9 100%)!important}
.swf-account-page-head{margin:0!important}
.swf-account-page-head .swf-page-head-grid{grid-template-columns:minmax(0,1fr) minmax(250px,330px)!important}
.swf-account-page-head .swf-category-art--account{display:flex!important;align-items:center!important;justify-content:center!important;max-width:330px!important;aspect-ratio:16/10!important;padding:0!important;border:1px solid var(--swf-line)!important;border-radius:20px!important;background:#fff!important;box-shadow:var(--swf-shadow-small)!important;overflow:hidden!important}
.swf-account-page-head .swf-account-lock-art{display:block!important;width:100%!important;height:100%!important;max-height:none!important}
.swf-account-page-head .swf-account-security-badges{justify-content:flex-start!important;margin-top:18px!important}
.swf-account-content{padding-top:48px!important}
.swf-account-gate{margin:0!important}
.swf-account-page--offline-locked .swf-account-security-badges span{background:#fff!important;color:#53695d!important;border-color:#d9e5dc!important}
@media(max-width:720px){
  .swf-account-content{padding-top:28px!important}
  .swf-account-page-head .swf-account-security-badges{justify-content:flex-start!important}
}

/* The navigation uses a wider container than editorial content so every item,
   including Blog, remains visible when desktop navigation is active. */
@media(max-width:1399px){
  header.nav .nav-inner{display:flex!important;width:min(100% - 32px,1180px)!important;height:68px!important;gap:10px!important}
  header.nav nav.links,header.nav .nav-actions{display:none!important}
  header.nav .burger{display:flex!important;margin-left:auto!important;flex:0 0 46px!important}
}
@media(min-width:1400px){
  header.nav .nav-inner{display:grid!important;width:min(100% - 32px,1580px)!important;max-width:1580px!important;grid-template-columns:205px minmax(0,1fr) auto!important;column-gap:10px!important;height:78px!important}
  header.nav nav.links{display:flex!important;min-width:0!important;justify-content:center!important;gap:0!important;flex-wrap:nowrap!important;overflow:visible!important}
  header.nav nav.links a{display:inline-flex!important;align-items:center!important;justify-content:center!important;font-size:13.15px!important;line-height:1.2!important;padding:10px 7px!important;font-weight:670!important;white-space:nowrap!important;letter-spacing:0!important}
  header.nav .nav-actions{display:flex!important;gap:6px!important;white-space:nowrap!important}
  header.nav .lang-switch,header.nav .nav-cta{min-height:40px!important;padding:9px 11px!important;font-size:12.5px!important;white-space:nowrap!important}
  header.nav .burger{display:none!important}
}
@media(min-width:1600px){
  header.nav .nav-inner{grid-template-columns:220px minmax(0,1fr) auto!important;column-gap:14px!important}
  header.nav nav.links a{font-size:14px!important;padding:10px 9px!important}
  header.nav .lang-switch,header.nav .nav-cta{font-size:13px!important;padding:9px 13px!important}
}

/* R12 specificity lock: must override historic !important header rules. */
@media(max-width:1399px){
  html body header.nav .nav-inner>nav.links,
  html body header.nav .nav-inner>.nav-actions{display:none!important}
  html body header.nav .nav-inner>.burger{display:flex!important;margin-left:auto!important;flex:0 0 46px!important}
}
@media(min-width:1400px){
  html body header.nav .nav-inner>nav.links{display:flex!important}
  html body header.nav .nav-inner>.nav-actions{display:flex!important}
  html body header.nav .nav-inner>.burger{display:none!important}
}
@media(max-width:720px){
  .swf-account-page-head .swf-page-head-grid{grid-template-columns:1fr!important;gap:24px!important}
  .swf-account-page-head .swf-category-art--account{width:100%!important;max-width:330px!important;justify-self:start!important}
}


/* v61.0.3 R16 — approved StoffwechselFit tool image set */
.swf-tools-page .tool-picker-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:24px!important;
  align-items:stretch!important;
}
.swf-tools-page .tool-tile[data-swf-render-contract="swf-tools-art-v6"]{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  min-height:390px!important;
  height:100%!important;
  padding:14px 18px 24px!important;
  gap:8px!important;
  border:1px solid #e1ded3!important;
  border-radius:24px!important;
  background:#fff!important;
  box-shadow:0 12px 30px rgba(19,54,39,.075)!important;
  text-align:center!important;
  overflow:hidden!important;
}
.swf-tools-page .tool-tile[data-swf-render-contract="swf-tools-art-v6"]:hover,
.swf-tools-page .tool-tile[data-swf-render-contract="swf-tools-art-v6"]:focus-visible{
  transform:translateY(-3px)!important;
  border-color:#bdd2c2!important;
  box-shadow:0 18px 38px rgba(19,54,39,.13)!important;
}
.swf-tools-page .tool-tile[data-swf-render-contract="swf-tools-art-v6"] .tool-tile-visual[data-swf-art-style="tool-visual-v6103-r17"]{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:min(100%,292px)!important;
  height:auto!important;
  min-width:0!important;
  aspect-ratio:4/3!important;
  margin:0 auto 5px!important;
  padding:0!important;
  border:0!important;
  border-radius:20px!important;
  background:#fdfbf6!important;
  overflow:hidden!important;
}
.swf-tools-page .tool-tile[data-swf-render-contract="swf-tools-art-v6"] .tool-tile-visual[data-swf-art-style="tool-visual-v6103-r17"] img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:20px!important;
  filter:none!important;
}
.swf-tools-page .tool-tile[data-swf-render-contract="swf-tools-art-v6"] .tt-num{
  display:grid!important;
  place-items:center!important;
  width:30px!important;
  height:30px!important;
  min-height:30px!important;
  margin:0 auto!important;
  border-radius:999px!important;
  background:#198953!important;
  color:#fff!important;
  font:850 .74rem/1 system-ui,-apple-system,"Segoe UI",Arial,sans-serif!important;
}
.swf-tools-page .tool-tile[data-swf-render-contract="swf-tools-art-v6"] .tt-cat{
  margin:2px 0 0!important;
  color:#147447!important;
  font:800 .72rem/1.15 system-ui,-apple-system,"Segoe UI",Arial,sans-serif!important;
  letter-spacing:.055em!important;
  text-transform:uppercase!important;
}
.swf-tools-page .tool-tile[data-swf-render-contract="swf-tools-art-v6"] .tt-title{
  margin:4px 0 0!important;
  color:#173526!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:1.2rem!important;
  line-height:1.22!important;
  text-wrap:balance!important;
}
@media(max-width:980px){
  .swf-tools-page .tool-picker-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .swf-tools-page .tool-tile[data-swf-render-contract="swf-tools-art-v6"]{min-height:375px!important}
}
@media(max-width:620px){
  .swf-tools-page .tool-picker-grid{grid-template-columns:1fr!important}
  .swf-tools-page .tool-tile[data-swf-render-contract="swf-tools-art-v6"]{min-height:0!important}
  .swf-tools-page .tool-tile[data-swf-render-contract="swf-tools-art-v6"] .tool-tile-visual[data-swf-art-style="tool-visual-v6103-r17"]{width:min(100%,320px)!important}
}

/* R16 fail-closed filter visibility: hidden tool cards must leave the layout. */
.swf-tools-page .tool-picker[data-swf-render-contract="swf-tools-art-v6"] .tool-tile[hidden],
.swf-tools-page .tool-tile[data-swf-render-contract="swf-tools-art-v6"][hidden]{display:none!important}


/* v61.0.3 R17 — cache-safe approved tool visuals */
.swf-tools-page .tool-picker[data-swf-render-contract="swf-tools-art-v6"] .tool-picker-grid{
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:24px!important;align-items:stretch!important;
}
.swf-tools-page .tool-tile[data-swf-render-contract="swf-tools-art-v6"]{
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;
  min-height:410px!important;height:100%!important;padding:12px 14px 24px!important;gap:8px!important;
  border:1px solid #dfddd3!important;border-radius:26px!important;background:#fff!important;
  box-shadow:0 14px 34px rgba(19,54,39,.085)!important;text-align:center!important;overflow:hidden!important;
}
.swf-tools-page .tool-tile[data-swf-render-contract="swf-tools-art-v6"]:hover,
.swf-tools-page .tool-tile[data-swf-render-contract="swf-tools-art-v6"]:focus-visible{
  transform:translateY(-3px)!important;border-color:#b8cfbe!important;box-shadow:0 20px 42px rgba(19,54,39,.14)!important;
}
.swf-tools-page .tool-tile[data-swf-render-contract="swf-tools-art-v6"] .tool-tile-visual[data-swf-art-style="tool-visual-v6103-r17"]{
  display:flex!important;align-items:center!important;justify-content:center!important;
  width:min(100%,320px)!important;height:auto!important;aspect-ratio:4/3!important;margin:0 auto 6px!important;padding:0!important;
  border:0!important;border-radius:22px!important;background:#fdfbf6!important;overflow:hidden!important;
}
.swf-tools-page .tool-tile[data-swf-render-contract="swf-tools-art-v6"] .tool-tile-visual[data-swf-art-style="tool-visual-v6103-r17"] img{
  display:block!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;
  object-fit:cover!important;object-position:center!important;margin:0!important;padding:0!important;border:0!important;border-radius:22px!important;filter:none!important;
}
.swf-tools-page .tool-tile[data-swf-render-contract="swf-tools-art-v6"] .tt-num{
  display:grid!important;place-items:center!important;width:31px!important;height:31px!important;min-height:31px!important;margin:0 auto!important;
  border-radius:999px!important;background:#198953!important;color:#fff!important;font:850 .74rem/1 system-ui,-apple-system,"Segoe UI",Arial,sans-serif!important;
}
.swf-tools-page .tool-tile[data-swf-render-contract="swf-tools-art-v6"] .tt-cat{margin:2px 0 0!important;color:#147447!important;font:800 .72rem/1.15 system-ui,-apple-system,"Segoe UI",Arial,sans-serif!important;letter-spacing:.055em!important;text-transform:uppercase!important;}
.swf-tools-page .tool-tile[data-swf-render-contract="swf-tools-art-v6"] .tt-title{margin:4px 0 0!important;color:#173526!important;font-family:Georgia,"Times New Roman",serif!important;font-size:1.22rem!important;line-height:1.22!important;text-wrap:balance!important;}
.swf-tools-page .tool-picker[data-swf-render-contract="swf-tools-art-v6"] .tool-tile[hidden],.swf-tools-page .tool-tile[data-swf-render-contract="swf-tools-art-v6"][hidden]{display:none!important}
@media(max-width:980px){.swf-tools-page .tool-picker[data-swf-render-contract="swf-tools-art-v6"] .tool-picker-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.swf-tools-page .tool-tile[data-swf-render-contract="swf-tools-art-v6"]{min-height:400px!important}}
@media(max-width:620px){.swf-tools-page .tool-picker[data-swf-render-contract="swf-tools-art-v6"] .tool-picker-grid{grid-template-columns:1fr!important}.swf-tools-page .tool-tile[data-swf-render-contract="swf-tools-art-v6"]{min-height:0!important}.swf-tools-page .tool-tile[data-swf-render-contract="swf-tools-art-v6"] .tool-tile-visual[data-swf-art-style="tool-visual-v6103-r17"]{width:min(100%,340px)!important}}
/* ===== END v61-clean.css ===== */

/* ===== BEGIN category-standard-r32.css ===== */
/* StoffwechselFit R32: verbindlicher Kategorienstandard für DE und EN. */
body.swf-category-page-r32 .page-head{
  padding:58px 0!important;
  margin:0!important;
  background:linear-gradient(135deg,#edf5eb 0%,#f8f1e6 100%)!important;
  border-top:0!important;
  border-bottom:1px solid #dbe4da!important;
  overflow:hidden!important;
}
body.swf-category-page-r32 .swf-page-head-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(250px,330px)!important;
  gap:42px!important;
  align-items:center!important;
  width:min(1180px,calc(100% - 40px))!important;
  max-width:1180px!important;
  margin-inline:auto!important;
}
body.swf-category-page-r32 .swf-page-head-copy{min-width:0!important;align-self:center!important}
body.swf-category-page-r32 .breadcrumb{
  display:flex!important;align-items:center!important;gap:8px!important;
  margin:0 0 14px!important;font:650 .78rem/1.4 system-ui,-apple-system,"Segoe UI",sans-serif!important;
  letter-spacing:.04em!important;text-transform:uppercase!important;color:#547060!important;
}
body.swf-category-page-r32 .breadcrumb a{color:#276746!important;text-decoration:none!important}
body.swf-category-page-r32 .page-head h1{
  margin:0!important;font-size:clamp(2.35rem,5vw,4.2rem)!important;line-height:1.04!important;
  letter-spacing:-.035em!important;color:#17392b!important;font-weight:650!important;
}
body.swf-category-page-r32 .page-head .intro{
  margin:18px 0 0!important;max-width:65ch!important;font-size:1.13rem!important;
  line-height:1.65!important;color:#5c7166!important;
}
body.swf-category-page-r32 .swf-category-art{
  width:100%!important;max-width:330px!important;aspect-ratio:8/5!important;justify-self:end!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  margin:0!important;padding:14px!important;background:#fff!important;border:1px solid #dbe4da!important;
  border-radius:22px!important;box-shadow:0 18px 42px rgba(27,62,45,.10)!important;overflow:hidden!important;
}
body.swf-category-page-r32 .swf-category-art img{
  display:block!important;width:100%!important;height:100%!important;max-height:none!important;
  object-fit:contain!important;object-position:center!important;border:0!important;border-radius:14px!important;
}
body.swf-category-page-r32 .page-head + .block,
body.swf-category-page-r32 .page-head + section.block{padding-top:64px!important}
body.swf-category-page-r32 .swf-archive-axis{
  width:min(1180px,calc(100% - 40px))!important;max-width:1180px!important;margin-inline:auto!important;
}
body.swf-category-page-r32 .swf-filter-shell{margin:0 0 34px!important}
body.swf-category-page-r32 :is(.wissen-grid,.card-grid,.swf-blog-grid,.rez-grid,.tool-picker-grid){align-items:stretch!important}
body.swf-category-page-r32 :is(.wissen-card,.kcard,.swf-blog-card,.rez-card,.tool-tile){height:100%!important}
body.swf-category-page-r32 .swf-blog-grid{
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:24px!important;
}
body.swf-category-page-r32 .swf-blog-card-media{aspect-ratio:16/9!important;overflow:hidden!important}
body.swf-category-page-r32 .swf-blog-card-media img{width:100%!important;height:100%!important;object-fit:cover!important}
body.swf-category-page-r32 .swf-blog-card-body{display:flex!important;flex-direction:column!important;min-height:190px!important}
body.swf-category-page-r32 .swf-blog-card-cta{margin-top:auto!important}
body.swf-category-page-r32 .swf-recipes-v6103,
body.swf-category-page-r32 .rez-uebersicht{width:100%!important;max-width:none!important}
@media(max-width:1020px){
 body.swf-category-page-r32 .swf-page-head-grid{grid-template-columns:minmax(0,1fr) 270px!important;gap:30px!important}
 body.swf-category-page-r32 .swf-blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:720px){
 body.swf-category-page-r32 .page-head{padding:42px 0!important}
 body.swf-category-page-r32 .swf-page-head-grid{grid-template-columns:1fr!important;gap:24px!important;width:min(100% - 28px,1180px)!important}
 body.swf-category-page-r32 .swf-category-art{justify-self:start!important;width:min(100%,420px)!important;max-width:420px!important}
 body.swf-category-page-r32 .swf-archive-axis{width:min(100% - 28px,1180px)!important}
 body.swf-category-page-r32 .swf-blog-grid{grid-template-columns:1fr!important;max-width:440px!important}
}
@media(max-width:390px){
 body.swf-category-page-r32 .swf-page-head-grid,body.swf-category-page-r32 .swf-archive-axis{width:min(100% - 22px,1180px)!important}
 body.swf-category-page-r32 .page-head h1{font-size:clamp(2.25rem,14vw,3.25rem)!important}
}
/* ===== END category-standard-r32.css ===== */

/* ===== BEGIN r32-live.css ===== */
/* R29 */
.page-head>.wrap.swf-page-head-grid{max-width:1180px;margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px);gap:clamp(24px,5vw,72px);align-items:center}.swf-category-art{width:100%;aspect-ratio:8/5;margin:0;display:grid;place-items:center;overflow:hidden;border-radius:22px}.swf-category-art>img{display:block;width:100%;height:100%;object-fit:contain}[data-r32-recipe-card="1"]{visibility:visible!important;opacity:1!important;content-visibility:visible!important}@media(max-width:760px){.page-head>.wrap.swf-page-head-grid{grid-template-columns:1fr}}
/* ===== END r32-live.css ===== */

/* ===== BEGIN r32-articles.css ===== */
/* StoffwechselFit R32 – scoped article handoff rendering */
.swf-r32-article{--r32-green-900:#173404;--r32-green-800:#27500A;--r32-green-700:#3B6D11;--r32-green-100:#EAF3DE;--r32-green-200:#C0DD97;--r32-blue-900:#042C53;--r32-blue-800:#0C447C;--r32-blue-600:#185FA5;--r32-blue-100:#E6F1FB;--r32-amber-800:#633806;--r32-amber-100:#FAEEDA;--r32-ink:#2a3327;--r32-muted:#5c6b58;--r32-line:#e3e8dd;}
.swf-r32-article>.wrap{max-width:820px;padding-top:20px;padding-bottom:20px}.swf-r32-article header.art{padding:28px 0 8px}.swf-r32-article .crumb{font-size:13px;color:var(--r32-muted);margin-bottom:18px}.swf-r32-article .crumb a{color:var(--r32-muted);text-decoration:none}.swf-r32-article h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(32px,5vw,48px);line-height:1.12;color:var(--r32-green-900);margin:0 0 14px}.swf-r32-article .lead{font-size:19px;color:var(--r32-green-800);margin:0 0 22px}.swf-r32-article .metabar{display:flex;flex-wrap:wrap;gap:12px 20px;font-size:12.5px;color:var(--r32-muted);border-top:1px solid var(--r32-line);border-bottom:1px solid var(--r32-line);padding:12px 0;margin-bottom:6px}.swf-r32-article .evi{display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;font-weight:700;font-size:12px;background:var(--r32-green-100);color:var(--r32-green-800)}.swf-r32-article .swf-review-pending{background:var(--r32-amber-100);color:var(--r32-amber-800)}
.swf-r32-article .kopfbild{margin:24px 0 34px;padding:0;overflow:hidden;border-radius:18px;border:1px solid var(--r32-line);background:#fff}.swf-r32-article .kopfbild img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}.swf-r32-article .kopfbild figcaption{padding:10px 14px;margin:0;border:0;font-size:13px;color:var(--r32-muted)}
.swf-r32-article article{padding:0 0 10px}.swf-r32-article article h2{font-family:Georgia,"Times New Roman",serif;font-size:clamp(24px,3.2vw,30px);color:var(--r32-green-900);margin:40px 0 12px}.swf-r32-article article h3{font-size:19px;color:var(--r32-green-800);margin:28px 0 8px}.swf-r32-article article p,.swf-r32-article article li{font-size:17px;line-height:1.72}.swf-r32-article article p{margin:0 0 17px}.swf-r32-article article img{max-width:100%;height:auto}.swf-r32-article article figure{margin:28px 0;background:#fff;border:1px solid var(--r32-line);border-radius:14px;padding:14px;overflow:hidden}.swf-r32-article article figure svg{display:block;width:100%;height:auto}.swf-r32-article article figcaption{font-size:13px;color:var(--r32-muted);margin-top:10px;padding-top:10px;border-top:1px solid var(--r32-line)}
.swf-r32-article .callout{border-radius:12px;padding:16px 18px;margin:24px 0;font-size:15.5px;line-height:1.6}.swf-r32-article .callout .h{font-weight:700;margin-bottom:5px}.swf-r32-article .callout.safety{background:var(--r32-amber-100);color:var(--r32-amber-800);border:1px solid #f0d9a8}.swf-r32-article .callout.info{background:var(--r32-blue-100);color:var(--r32-blue-800);border:1px solid #cfe2f7}.swf-r32-article .callout.evi-note{background:var(--r32-green-100);color:var(--r32-green-800);border:1px solid var(--r32-green-200)}.swf-r32-article .swf-r32-review-note p{font-size:15px;margin:0}.swf-r32-article .evilabel{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--r32-green-700);margin:22px 0 2px}.swf-r32-article table.data{display:block;width:100%;overflow-x:auto;border-collapse:collapse;margin:20px 0;font-size:15px}.swf-r32-article table.data th{background:var(--r32-blue-900);color:#fff;text-align:left;padding:9px 12px}.swf-r32-article table.data td{padding:9px 12px;border-bottom:1px solid var(--r32-line)}.swf-r32-article .keytakeaway{background:#fff;border-left:4px solid #639922;border-radius:0 10px 10px 0;padding:16px 20px;margin:24px 0}.swf-r32-article .sources{background:#fff;border:1px solid var(--r32-line);border-radius:12px;padding:22px 24px;margin:34px 0}.swf-r32-article .sources h2{margin-top:0;font-size:22px}.swf-r32-article .sources li{font-size:14px;line-height:1.55;margin-bottom:12px}.swf-r32-article .related{border:1px solid var(--r32-line);border-radius:12px;padding:16px 20px;margin:24px 0;background:#fff}.swf-r32-article footer.art{border-top:1px solid var(--r32-line);margin-top:30px;padding:20px 0 50px;font-size:13px;color:var(--r32-muted)}
@media(max-width:600px){.swf-r32-article>.wrap{padding-left:18px;padding-right:18px}.swf-r32-article article p,.swf-r32-article article li{font-size:16px}.swf-r32-article .sources{padding:18px}.swf-r32-article .kopfbild{border-radius:14px}}
/* ===== END r32-articles.css ===== */