/* =====================================================================
   WALDORF (data-design="waldorf") - Winki, 01.10.2026. Pergamentpapier, Aquarell
   (Toskana-Landschaft, Tomaten, Margeriten, Zitronen, Lavendel), Pinselstrich-Gruen,
   Handschrift (Kalam) fuer Menues/Knoepfe und Alegreya fuer Ueberschriften/Text.
   Nur Optik: Platzierung von Menues/Reitern/Elementen bleibt die der App. Rezeptbilder,
   Lilli und das Logo bleiben unveraendert.
   Aquarell-Bilder (/img/themes/waldorf/*.jpg) sind auf Weiss gemalt und liegen per
   mix-blend-mode / background-blend-mode: multiply auf dem Pergament - Weiss
   verschwindet, nur die Farbe bleibt (keine Transparenz-Dateien noetig).
   Schriften: Kalam + Alegreya (SIL OFL 1.1, lokal unter /fonts/, kommerziell nutzbar).
   Geladen nach style.css/pages.css/themes.css.
   ===================================================================== */

@font-face{font-family:'Alegreya'; font-style:normal; font-weight:500 800; font-display:swap;
  src:url('/fonts/alegreya-500-800-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Alegreya'; font-style:normal; font-weight:500 800; font-display:swap;
  src:url('/fonts/alegreya-500-800-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Kalam'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/fonts/kalam-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Kalam'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/fonts/kalam-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Kalam'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/fonts/kalam-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Kalam'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/fonts/kalam-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}

:root[data-design="waldorf"]{
  --bg:#f3e7c6; --surface:#fcf6e4; --surface-hover:#f6ecd0;
  --ink:#4a2f1d; --ink-muted:#7d6445; --border:#dac9a0;
  --accent:#3f6a46; --accent-tab:#3f6a46; --accent-ink:#fffaf0; --accent-soft:#dbe5bd;
  --accent-strong:#35603d; --accent-tab-strong:#35603d;
  --rail:#f1e3bf; --rail-ink:#5c3d28;
  --nav-bg:#e9dcb4; --nav-ink:#4a2f1d; --nav-active-bg:#3f6a46; --nav-active-ink:#fffaf0;
  --nav2-bg:#f1e6c6; --nav2-ink:#5c3d28;
  --line-art:#6b4a2f;
  --shadow:0 1px 2px rgba(90,60,30,.08), 0 8px 18px -12px rgba(90,60,30,.35);
  --moon-box-bg:#4a2f1d; --moon-box-ink:#fcf6e4;
  --wd-title:#7b3a22;       /* Ueberschriften: Rostbraun */
  --wd-green:#5f8a4a;       /* Gruppenueberschriften */
  --wd-line:#6b4a2f;
  --wd-soft:#d6c391;       /* weicher Aquarell-Rand (Chips, Leisten, Karten) */
  --wd-glow:0 0 0 1px rgba(214,195,145,.35), 0 2px 9px rgba(200,170,105,.38), inset 0 0 8px rgba(255,250,235,.8);        /* Strichfarbe handgezeichneter Rahmen */
  --wd-hand:'Kalam','Caveat',cursive;
  --wd-serif:'Alegreya',Georgia,serif;
  --wd-brush-green:url('/img/themes/waldorf/brush-green.png');
  --wd-brush-sage:url('/img/themes/waldorf/brush-sage.png');
  /* leicht unregelmaessige Rundung = "von Hand gezogen" */
  --wd-r-pill:22px 18px 24px 17px / 17px 24px 18px 22px;
  --wd-r-card:20px 24px 18px 22px / 22px 18px 24px 20px;
}

/* ---------- Grundflaeche: Pergament ---------- */
:root[data-design="waldorf"] body{
  background-color:var(--bg);
  background-image:linear-gradient(rgba(255,251,240,.72), rgba(255,251,240,.72)), url('/img/themes/waldorf/paper.jpg');
  background-size:auto, 700px auto; background-attachment:fixed;
  font-family:var(--wd-serif); font-weight:500; font-size:1.02rem;
}
:root[data-design="waldorf"] button,
:root[data-design="waldorf"] input,
:root[data-design="waldorf"] select,
:root[data-design="waldorf"] textarea{font-family:var(--wd-serif);}
:root[data-design="waldorf"] h1,
:root[data-design="waldorf"] h2,
:root[data-design="waldorf"] h3{font-family:var(--wd-serif); font-weight:800; color:var(--wd-title);}
:root[data-design="waldorf"] .tab-btn,
:root[data-design="waldorf"] .nav-group-label,
:root[data-design="waldorf"] .sidebar-quote,
:root[data-design="waldorf"] .btn,
:root[data-design="waldorf"] .chip,
:root[data-design="waldorf"] .chip-reset,
:root[data-design="waldorf"] .user-chip,
:root[data-design="waldorf"] .inbox-header-btn,
:root[data-design="waldorf"] #sectionSubnav .section-subtab-btn,
:root[data-design="waldorf"] .rb-toptab,
:root[data-design="waldorf"] .rb-sidetab,
:root[data-design="waldorf"] .rb-panel-count,
:root[data-design="waldorf"] .cookbook-tags-switch,
:root[data-design="waldorf"] .search-input,
:root[data-design="waldorf"] .search-input::placeholder{font-family:var(--wd-hand);}

/* ---------- Seitenleiste: Pergament, handgezogene Kante, Zitronen-Ecke ---------- */
:root[data-design="waldorf"] .sidebar{
  background-color:#efe0b8;
  background-image:
    url('/img/themes/waldorf/lemons.webp'),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='120' viewBox='0 0 14 120'><path d='M10 0 C7 14 12 22 9 38 C6 54 12 66 9 82 C7 98 12 108 10 120' fill='none' stroke='%23c9b17f' stroke-width='1.6' stroke-linecap='round'/></svg>"),
    linear-gradient(rgba(255,249,234,.55), rgba(255,249,234,.55)),
    url('/img/themes/waldorf/paper.jpg');
  background-repeat:no-repeat, repeat-y, no-repeat, repeat;
  background-position:-30px calc(100% + 40px), right top, 0 0, 0 0;
  background-size:300px auto, 14px 120px, auto, 700px auto;
  background-blend-mode:normal;
  padding-bottom:2rem;
}
:root[data-design="waldorf"] .sidebar-brand h1{color:var(--wd-title);}
:root[data-design="waldorf"] .nav-group-label{font-size:.95rem; font-weight:400; color:var(--wd-green); opacity:1;}
:root[data-design="waldorf"] .tab-btn{
  font-size:1.12rem; font-weight:400; color:var(--rail-ink); border-radius:0; border-color:transparent;
}
:root[data-design="waldorf"] .tab-btn:hover{background:rgba(95,138,74,.12); color:var(--ink);}
:root[data-design="waldorf"] .tab-btn .tab-icon{color:var(--wd-line); opacity:.85;}
/* aktiver Punkt: gruener Pinselstrich statt Karteireiter */
:root[data-design="waldorf"] .tab-btn.active,
:root[data-design="waldorf"] .tab-btn.active:hover{
  margin-right:.6rem; border:none; border-radius:0; color:#2e3f22; font-weight:700;
  background:var(--wd-brush-sage) center / 100% 100% no-repeat; background-color:transparent;
}
:root[data-design="waldorf"] .tab-btn.active .tab-icon{color:var(--accent-strong); opacity:1;}
:root[data-design="waldorf"] .nav-group-label.nav-group-toggle:hover{background:rgba(95,138,74,.12);}

:root[data-design="waldorf"] .sidebar-footer{border-top:none; margin-top:1rem; gap:.3rem;}
:root[data-design="waldorf"] .sidebar-quote{
  font-size:1.05rem; line-height:1.45; color:#6a4a32; font-style:italic; padding:0 .6rem; margin-bottom:5.5rem;
}
:root[data-design="waldorf"] .sidebar-quote:not(:empty)::after{
  content:"\2665"; display:block; margin-top:.5rem; font-size:.95rem; color:#a65b45; font-style:normal;
}
:root[data-design="waldorf"] .theme-flourish{display:none;}
.waldorf-wreath{display:block; width:100%; height:100%;
  background:url('/img/themes/waldorf/wreath.webp') center / contain no-repeat;}
@media (min-width: 861px){
  :root[data-design="waldorf"] .sidebar-corner-art{width:100%; max-width:130px; height:auto; aspect-ratio:1 / 1; margin-bottom:-1.2rem;}
}

/* ---------- Kopfbereich: Landschaft, Tomaten, Margeriten ---------- */
:root[data-design="waldorf"] .main-col{position:relative;}
/* Breites Landschaftsband, mittig, weich ausgeblendet (::before); Tomaten/Margeriten
   darueber in den Ecken (::after). Beides liegt unter dem Seiteninhalt. */
:root[data-design="waldorf"] .main-col::before{
  content:""; position:absolute; left:50%; top:-10px; width:min(100%, 1700px); height:235px; transform:translateX(-50%);
  z-index:0; pointer-events:none;
  background:url('/img/themes/waldorf/header-wide.webp') center / 100% 100% no-repeat;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(to bottom, #000 0, #000 46%, transparent 92%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(to bottom, #000 0, #000 46%, transparent 92%);
          mask-composite:intersect;
}
:root[data-design="waldorf"] .main-col::after{
  content:""; position:absolute; left:0; right:0; top:0; height:300px; z-index:0; pointer-events:none;
  background:
    url('/img/themes/waldorf/tomatoes.webp') left -10px top -20px / 250px auto no-repeat,
    url('/img/themes/waldorf/daisies.webp') right -20px top -20px / 300px auto no-repeat;
}
:root[data-design="waldorf"] .main-col > .wrap{position:relative; z-index:1;}
:root[data-design="waldorf"] .theme-header-banner{display:none;}
:root[data-design="waldorf"] .masthead{padding-top:.4rem;}
:root[data-design="waldorf"] .masthead h1{
  font-size:2.7rem; font-weight:800; letter-spacing:0; color:var(--wd-title); padding-left:1.4rem;
  text-shadow:0 1px 0 rgba(255,250,235,.7);
}

/* Lavendel unten rechts, fest am Fensterrand, unter allem Klickbaren */
:root[data-design="waldorf"] body::after{
  content:""; position:fixed; right:0; bottom:0; width:340px; height:340px; z-index:0; pointer-events:none;
  background:url('/img/themes/waldorf/lavender.webp') right bottom / contain no-repeat;
}

/* ---------- Knoepfe, Chips, Eingabe: handgezogene Konturen ---------- */
:root[data-design="waldorf"] .inbox-header-btn,
:root[data-design="waldorf"] .user-chip{
  background:#fdf8e8; border:1.5px solid var(--wd-soft); border-radius:var(--wd-r-pill); box-shadow:var(--wd-glow);
  font-size:1rem; font-weight:400; color:var(--ink);
}
:root[data-design="waldorf"] .inbox-header-btn:hover,
:root[data-design="waldorf"] .user-chip:hover,
:root[data-design="waldorf"] .user-chip[aria-expanded="true"]{background:#fff9e8; border-color:var(--accent-strong);}
:root[data-design="waldorf"] .user-chip.is-current,
:root[data-design="waldorf"] .inbox-header-btn.is-current{background:var(--accent-soft); border-color:var(--accent-strong);}

:root[data-design="waldorf"] .btn{font-size:1rem; font-weight:400; border-radius:var(--wd-r-pill);}
:root[data-design="waldorf"] .btn-primary{
  color:#fffaf0; border:none; padding:.65rem 1.3rem;
  background:var(--wd-brush-green) center / 100% 100% no-repeat; background-color:transparent;
  text-shadow:0 1px 1px rgba(20,40,20,.35); border-radius:0;
}
:root[data-design="waldorf"] .btn-primary:hover{filter:brightness(1.1);}
:root[data-design="waldorf"] .btn-ghost{
  background:#fdf8e8; color:var(--ink); border:1.5px solid var(--wd-soft); box-shadow:var(--wd-glow);
}
:root[data-design="waldorf"] .btn-ghost:hover{background:#fff9e8;}
:root[data-design="waldorf"] .ai-assistant-btn{
  border:none; background:var(--wd-brush-sage) center / 100% 100% no-repeat; background-color:transparent; border-radius:0;
  color:#2e3f22; box-shadow:none;
}
:root[data-design="waldorf"] .btn-danger{border-radius:var(--wd-r-pill);}

:root[data-design="waldorf"] .chip,
:root[data-design="waldorf"] .search-input{
  background:#fdf8e8; border:1.5px solid var(--wd-soft); box-shadow:var(--wd-glow); color:var(--ink); border-radius:var(--wd-r-pill);
  font-weight:400;
}
:root[data-design="waldorf"] .chip{font-size:1rem; padding:.4rem 1rem;}
:root[data-design="waldorf"] .chip:hover{background:#fff9e8;}
:root[data-design="waldorf"] .chip.active{background:var(--accent-soft); border-color:var(--accent-strong); color:#2e3f22;}
:root[data-design="waldorf"] .search-input{border-radius:30px 26px 30px 24px / 26px 30px 24px 30px; font-size:1.05rem;}
:root[data-design="waldorf"] .search-input::placeholder{color:#a08a63;}
:root[data-design="waldorf"] .search-input:focus{outline:none; border-color:var(--accent-strong); box-shadow:0 0 0 3px rgba(95,138,74,.2);}
:root[data-design="waldorf"] .filter-dropdown-panel,
:root[data-design="waldorf"] .rating-filter-popover,
:root[data-design="waldorf"] .user-menu-dropdown{
  background:var(--surface); border:1.5px solid #c8b180; border-radius:16px 20px 16px 20px;
  box-shadow:0 14px 30px -14px rgba(90,60,30,.45);
}

/* kompakte Unterseiten-Leiste, Aktionsknoepfe bleiben rechts */
:root[data-design="waldorf"] .section-subnav-row{justify-content:flex-start;}
:root[data-design="waldorf"] #sectionSubnav.section-subnav{flex:0 0 auto; margin-right:auto;}

/* ---------- Unterseiten-Leiste (Meine Rezepte / Boards / Bewerten) ---------- */
:root[data-design="waldorf"] #sectionSubnav.section-subnav{
  background:#fdf8e8; border:1.5px solid var(--wd-soft); box-shadow:var(--wd-glow); border-radius:var(--wd-r-pill); padding:3px;
}
:root[data-design="waldorf"] #sectionSubnav .section-subtab-btn{
  font-size:1.05rem; font-weight:400; border-radius:0; color:var(--ink); padding:.45rem 1.1rem;
}
:root[data-design="waldorf"] #sectionSubnav .section-subtab-btn:hover{background:rgba(95,138,74,.14);}
:root[data-design="waldorf"] #sectionSubnav .section-subtab-btn.active,
:root[data-design="waldorf"] #sectionSubnav .section-subtab-btn.active:hover{
  background:var(--wd-brush-green) center / 100% 100% no-repeat; color:#fffaf0; font-weight:700;
  text-shadow:0 1px 1px rgba(20,40,20,.35);
}

/* ---------- Kochbuch: Kategorie-Reiter (Blatt-Form) und Karte ---------- */
:root[data-design="waldorf"] .rb-toptab{
  background:linear-gradient(180deg, #dbe6bd, #c9d9a2); color:#3f4f2a; font-size:1.02rem; font-weight:400;
  border:1px solid #a9bd86; border-bottom:none; border-radius:16px 9px 0 0; padding:.5rem 1.05rem;
  box-shadow:0 -1px 5px rgba(120,150,80,.22), inset 0 1px 0 rgba(255,255,255,.55);
}
:root[data-design="waldorf"] .rb-toptab:hover{filter:brightness(1.04);}
:root[data-design="waldorf"] .rb-toptab.active{background:#fdf8e8; color:var(--ink); font-weight:700; border-color:var(--wd-soft); box-shadow:0 -1px 5px rgba(200,170,105,.3);}
:root[data-design="waldorf"] .rb-panel{
  background-color:var(--surface);
  background-image:url('/img/themes/waldorf/paper.jpg'); background-size:700px auto; background-blend-mode:soft-light;
  border:1.5px solid var(--wd-soft); border-radius:var(--wd-r-card);
  box-shadow:0 0 0 1px rgba(214,195,145,.3), 0 4px 16px rgba(200,170,105,.35), inset 0 0 30px rgba(240,225,180,.3);
}
:root[data-design="waldorf"] .rb-panel-head h2,
:root[data-design="waldorf"] .category-head h2{font-size:1.7rem; color:var(--wd-title);}
:root[data-design="waldorf"] .rb-panel-count{font-size:1rem; color:var(--ink-muted);}
:root[data-design="waldorf"] .rb-sidetab{
  background:#cddca9; color:#3d4f25; font-size:1.02rem; font-weight:400; border-radius:0 18px 18px 0;
  box-shadow:inset 1px 0 0 rgba(95,138,74,.25);
}
:root[data-design="waldorf"] .rb-sidetab:hover{color:var(--ink); filter:brightness(1.04);}
:root[data-design="waldorf"] .rb-sidetab.active{background:var(--surface); color:var(--ink); font-weight:700;}
:root[data-design="waldorf"] .rb-hidden-section{border-top-color:#d8c79a;}
:root[data-design="waldorf"] .cookbook-switch-track{background:#cdbd96;}
:root[data-design="waldorf"] .cookbook-tags-switch input:checked + .cookbook-switch-track{background:var(--accent-strong);}

/* Rezeptkacheln: Papierkarte mit kleinem Zweig am Fuss. Das Foto bleibt unveraendert. */
:root[data-design="waldorf"] .tile{
  background:#fdf8e8; border:1.5px solid #dccb9b; border-radius:var(--wd-r-card);
  box-shadow:0 0 0 1px rgba(214,195,145,.25), 0 3px 10px rgba(200,170,105,.3);
}
:root[data-design="waldorf"] .tile:hover,
:root[data-design="waldorf"] .tile:focus-visible{background:#fffaea; transform:translateY(-3px) rotate(-.4deg);}
:root[data-design="waldorf"] .tile-name{font-family:'Karla',sans-serif; font-size:.95rem; font-weight:700; color:var(--ink); line-height:1.25;}
:root[data-design="waldorf"] .tile .tile-meta{font-family:'Karla',sans-serif; font-weight:600; font-size:.75rem; color:var(--ink-muted);}
:root[data-design="waldorf"] .tile::after{
  content:""; display:block; flex:none; height:30px; margin:0 0 .5rem;
  background:url('/img/themes/waldorf/sprig.webp') center / auto 100% no-repeat;
}
:root[data-design="waldorf"] .tile-fav{background:rgba(252,246,228,.92); border:1px solid #cdb98c;}
:root[data-design="waldorf"] .badge{font-family:'Karla',sans-serif; font-weight:600;}

/* Tags/Badges: Salbei statt Blau */
:root[data-design="waldorf"] .tile .badge,
:root[data-design="waldorf"] .badge-diet,
:root[data-design="waldorf"] .badge-macro{
  font-family:'Karla',sans-serif; background:rgba(120,150,90,.16); color:#46592f; border:1px solid rgba(120,150,90,.38);
}
:root[data-design="waldorf"] .tile .badge-warn{background:var(--warn-soft); color:var(--warn); border-color:rgba(165,117,15,.35);}

/* ---------- Gemeinsame Flaechen: Modals, Karten ---------- */
:root[data-design="waldorf"] .modal{
  background-color:var(--surface); background-image:url('/img/themes/waldorf/paper.jpg'); background-size:700px auto;
  background-blend-mode:soft-light; border:1.6px solid #c8b180; border-radius:var(--wd-r-card);
}

/* ---------- Handy ---------- */
@media (max-width: 860px){
  :root[data-design="waldorf"] .sidebar{
    background-image:url('/img/themes/waldorf/paper.jpg'); background-repeat:repeat; background-position:0 0;
    background-size:700px auto; background-blend-mode:normal; padding-bottom:0;
  }
  :root[data-design="waldorf"] .sidebar-quote{margin-bottom:.4rem;}
  :root[data-design="waldorf"] .main-col::before{width:130%; top:-4px; height:150px;}
  :root[data-design="waldorf"] .main-col::after{height:200px;
    background:
      url('/img/themes/waldorf/tomatoes.webp') left -10px top -20px / 130px auto no-repeat,
      url('/img/themes/waldorf/daisies.webp') right -10px top -20px / 150px auto no-repeat;}
  :root[data-design="waldorf"] body::after{width:180px; height:180px;}
  :root[data-design="waldorf"] .masthead h1{font-size:2rem;}
  :root[data-design="waldorf"] .tab-btn.active,
  :root[data-design="waldorf"] .tab-btn.active:hover{margin-right:0;}
}

/* =====================================================================
   Papier-Rahmen als Bilder (01.10.2026, Winki: "hier müssten quasi Bilder hinter die
   Texte"). Handgerissene Aquarell-Papierstuecke (paper-pill, paper-pill-green,
   paper-card .webp, freigestellt) werden per border-image hinter Chips, Knoepfe,
   Unterseiten-Leiste, Kategorie-Reiter, Panel und Kacheln gelegt - als ::before hinter
   dem Inhalt (isolation:isolate), damit Groesse und Platzierung der Elemente gleich
   bleiben. Folgt nach allen Regeln oben und ueberschreibt deren Flaechen/Rahmen.
   ===================================================================== */
:root[data-design="waldorf"]{
  --wd-img-pill:url('/img/themes/waldorf/paper-pill.webp');
  --wd-img-pill-green:url('/img/themes/waldorf/paper-pill-green.webp');
  --wd-img-card:url('/img/themes/waldorf/paper-card.webp');
}
/* Pillen: Chips, Kuechenpost, Nutzer-Chip, Ghost-Knoepfe, Unterseiten-Leiste */
:root[data-design="waldorf"] .chip,
:root[data-design="waldorf"] .inbox-header-btn,
:root[data-design="waldorf"] .user-chip,
:root[data-design="waldorf"] .btn-ghost:not(.ai-assistant-btn),
:root[data-design="waldorf"] #sectionSubnav.section-subnav{
  position:relative; isolation:isolate; background:transparent; border-color:transparent; box-shadow:none;
}
:root[data-design="waldorf"] .chip::before,
:root[data-design="waldorf"] .inbox-header-btn::before,
:root[data-design="waldorf"] .user-chip::before,
:root[data-design="waldorf"] .btn-ghost:not(.ai-assistant-btn)::before,
:root[data-design="waldorf"] #sectionSubnav.section-subnav::before{
  content:""; position:absolute; inset:-5px -3px; z-index:-1; pointer-events:none;
  border:13px solid transparent; border-image:var(--wd-img-pill) 90 fill / 13px stretch;
}
:root[data-design="waldorf"] #sectionSubnav.section-subnav::before{inset:-3px -2px; border-width:15px; border-image-width:15px;}
:root[data-design="waldorf"] .chip:hover,
:root[data-design="waldorf"] .inbox-header-btn:hover,
:root[data-design="waldorf"] .user-chip:hover,
:root[data-design="waldorf"] .btn-ghost:not(.ai-assistant-btn):hover{background:transparent; filter:brightness(1.03);}
:root[data-design="waldorf"] .chip.active,
:root[data-design="waldorf"] .user-chip.is-current,
:root[data-design="waldorf"] .inbox-header-btn.is-current{background:transparent;}
:root[data-design="waldorf"] .chip.active::before,
:root[data-design="waldorf"] .user-chip.is-current::before,
:root[data-design="waldorf"] .inbox-header-btn.is-current::before{border-image-source:var(--wd-img-pill-green);}
:root[data-design="waldorf"] .ai-assistant-btn{box-shadow:none !important;}

/* Suchfeld: Papierstreifen direkt als Rahmen (Eingabefelder haben kein ::before) */
:root[data-design="waldorf"] .search-input{
  background:transparent; box-shadow:none; border:12px solid transparent;
  border-image:var(--wd-img-pill) 90 fill / 12px stretch; padding:0 .6rem;
}
:root[data-design="waldorf"] .search-input:focus{box-shadow:none; filter:brightness(1.03);}

/* Kategorie-Reiter: gruenes Papier, unten angeschnitten (geht in die Karte ueber) */
:root[data-design="waldorf"] .rb-toptab{
  position:relative; isolation:isolate; background:transparent; border:none; box-shadow:none; filter:none;
}
:root[data-design="waldorf"] .rb-toptab::before{
  content:""; position:absolute; inset:-2px -3px -12px; z-index:-1; pointer-events:none;
  border:15px solid transparent; border-image:var(--wd-img-pill-green) 90 fill / 15px stretch;
  clip-path:inset(0 0 12px 0);
}
:root[data-design="waldorf"] .rb-toptab:hover{filter:brightness(1.05);}
:root[data-design="waldorf"] .rb-toptab.active{background:transparent; box-shadow:none;}
:root[data-design="waldorf"] .rb-toptab.active::before{border-image-source:var(--wd-img-pill); inset:-2px -3px -14px; clip-path:inset(0 0 14px 0);}

/* Karte (Ansichtsbereich) und Rezeptkacheln: gerissenes Papier */
:root[data-design="waldorf"] .rb-panel{
  position:relative; isolation:isolate; background:transparent; border:none; box-shadow:none; padding:1.9rem;
}
:root[data-design="waldorf"] .rb-panel::before{
  content:""; position:absolute; inset:-6px; z-index:-1; pointer-events:none;
  border:32px solid transparent; border-image:var(--wd-img-card) 70 fill / 32px stretch;
}
:root[data-design="waldorf"] .tile{
  position:relative; isolation:isolate; background:transparent; border:none; box-shadow:none; padding:9px 9px 0;
}
:root[data-design="waldorf"] .tile:hover,
:root[data-design="waldorf"] .tile:focus-visible{background:transparent;}
:root[data-design="waldorf"] .tile::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  border:22px solid transparent; border-image:var(--wd-img-card) 70 fill / 22px stretch;
}
:root[data-design="waldorf"] .tile-photo{border-radius:10px;}

/* =====================================================================
   KOCHANSICHT (Vollbild #cookViewScrim) - Winki, 01.10.2026: Pergament mit Aquarell-Deko
   (Aepfel, Mehl-Loeffel, Kraeuter, Blumen), Schrittnummern und Mengen als rostrote Pillen.
   Der Hintergrund ist fest (background-attachment:fixed), nur der Text scrollt darueber.
   Die Menge steht weiter ueber der Anweisung. Aufbau/Inhalt der Ansicht bleibt unveraendert.
   ===================================================================== */
:root[data-design="waldorf"] .cookview-scrim{
  color:var(--ink);
  background-color:#f6ebcf;
  background-image:
    url('/img/themes/waldorf/cook-apples.webp'),
    url('/img/themes/waldorf/cook-flour.webp'),
    url('/img/themes/waldorf/cook-apple-left.webp'),
    url('/img/themes/waldorf/cook-herbs.webp'),
    url('/img/themes/waldorf/cook-flowers.webp'),
    linear-gradient(rgba(255,251,240,.62), rgba(255,251,240,.62)),
    url('/img/themes/waldorf/paper.jpg');
  background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  background-position:right -8px top -6px, right -4px top 50%, left -22px top 44%, left -6px bottom, right -6px bottom, 0 0, 0 0;
  background-size:min(46vw,420px) auto, auto 54vh, min(20vw,170px) auto, min(36vw,340px) auto, min(40vw,380px) auto, auto, 700px auto;
  background-attachment:fixed;
}
:root[data-design="waldorf"] .cookview-header{
  background:linear-gradient(rgba(248,238,212,.6) 60%, rgba(248,238,212,0)); border-bottom:none;
  padding-bottom:1.6rem;
}
:root[data-design="waldorf"] .cookview-header h2{font-family:var(--wd-serif); font-weight:800; font-size:1.5rem; color:var(--wd-title);}
:root[data-design="waldorf"] .cookview-close{
  position:relative; isolation:isolate; background:transparent; border-color:transparent; color:var(--ink);
  font-family:var(--wd-hand); font-weight:400;
}
:root[data-design="waldorf"] .cookview-close::before{
  content:""; position:absolute; inset:-5px -3px; z-index:-1; pointer-events:none;
  border:13px solid transparent; border-image:var(--wd-img-pill) 90 fill / 13px stretch;
}
:root[data-design="waldorf"] .cookview-body{max-width:680px; padding-top:.4rem;}
:root[data-design="waldorf"] .cookview-portions{
  font-family:var(--wd-serif); font-weight:800; font-size:2.1rem; color:var(--wd-title); margin-bottom:1.8rem;
}
:root[data-design="waldorf"] .cookview-section-heading{
  font-family:var(--wd-serif); font-weight:800; font-size:1.5rem; color:var(--wd-title); border-bottom:2px dashed #cfae82;
}
:root[data-design="waldorf"] .cookview-step{margin-bottom:1.7rem; gap:1.2rem; align-items:center;}
:root[data-design="waldorf"] .cookview-step-num{
  width:3.2rem; height:3.2rem; background:#b9695a; color:#fff6ea; font-family:var(--wd-serif); font-weight:500; font-size:1.7rem;
  box-shadow:0 2px 6px rgba(120,60,40,.3);
}
:root[data-design="waldorf"] .cookview-step-ingredients{
  background:#c0705c; color:#fff6ea; font-family:var(--wd-serif); font-weight:600; font-size:1.2rem;
  border-radius:999px; padding:.3rem 1.2rem; margin-bottom:.4rem; box-shadow:0 2px 5px rgba(120,60,40,.25);
}
:root[data-design="waldorf"] .cookview-step-text{font-family:var(--wd-serif); font-weight:500; font-size:1.55rem; line-height:1.35; color:#2f1d12;}
@media (max-width:480px){
  :root[data-design="waldorf"] .cookview-step-text{font-size:1.3rem;}
  :root[data-design="waldorf"] .cookview-step-num{width:2.7rem; height:2.7rem; font-size:1.4rem;}
  :root[data-design="waldorf"] .cookview-portions{font-size:1.8rem;}
  :root[data-design="waldorf"] .cookview-body{padding-right:1.6rem;}
}

/* Seitenleiste kompakter (01.10.2026, Winki: Bildbereich links unten zu gross, ausklappbare
   Kategorien wurden abgeschnitten): Kranz entfaellt, Spruch nur bei genug Fensterhoehe,
   Zitronen-Ecke kleiner und rein als Hintergrund. */
:root[data-design="waldorf"] .sidebar-corner-art{display:none;}
:root[data-design="waldorf"] .sidebar-footer{margin-top:.6rem;}
:root[data-design="waldorf"] .sidebar-quote{margin-bottom:3.2rem;}
@media (min-width: 861px){
  :root[data-design="waldorf"] .sidebar{background-size:210px auto, 14px 120px, auto, 700px auto; background-position:-26px calc(100% + 28px), right top, 0 0, 0 0;}
}
@media (max-height:860px){
  :root[data-design="waldorf"] .sidebar-quote{display:none;}
  :root[data-design="waldorf"] .sidebar-footer{margin:0; padding:0 0 4.5rem;}
}
@media (max-width: 860px){
  :root[data-design="waldorf"] .sidebar-footer{padding-bottom:0;}
}

/* =====================================================================
   Hover ohne Ecken (01.10.2026, Winki: Hover machte Knoepfe "weiss und eckig"): statt
   einer eckigen Flaeche liegt beim Hover ein weisser Pinselstrich (brush-white.png)
   hinter dem Text. Senkrechte Reiter rechts im Kochbuch bekommen dieselben Papier-
   Reiter wie die Kategorie-Reiter oben (um 90 Grad gedreht).
   ===================================================================== */
:root[data-design="waldorf"]{--wd-brush-white:url('/img/themes/waldorf/brush-white.png');}
:root[data-design="waldorf"] .ai-assistant-btn:hover,
:root[data-design="waldorf"] .ai-assistant-btn:focus-visible{
  background:var(--wd-brush-white) center / 100% 100% no-repeat; background-color:transparent; filter:none; box-shadow:none;
}
:root[data-design="waldorf"] .btn-ghost:hover{background-color:transparent;}
:root[data-design="waldorf"] .tab-btn:not(.active):hover,
:root[data-design="waldorf"] #sectionSubnav .section-subtab-btn:not(.active):hover,
:root[data-design="waldorf"] .nav-group-label.nav-group-toggle:hover{
  background:var(--wd-brush-white) center / 100% 100% no-repeat; background-color:transparent; border-radius:0; color:var(--ink);
}
:root[data-design="waldorf"] .tab-btn:not(.active):hover{margin-right:.6rem;}

:root[data-design="waldorf"] .rb-sidetab{
  position:relative; isolation:isolate; background:transparent; box-shadow:none; border-radius:0; filter:none;
}
:root[data-design="waldorf"] .rb-sidetab::before{
  content:""; position:absolute; inset:-3px -3px -3px -14px; z-index:-1; pointer-events:none;
  border:15px solid transparent; border-image:url('/img/themes/waldorf/paper-pill-green-v.webp') 90 fill / 15px stretch;
  clip-path:inset(0 0 0 14px);
}
:root[data-design="waldorf"] .rb-sidetab:hover{filter:brightness(1.05);}
:root[data-design="waldorf"] .rb-sidetab.active{background:transparent;}
:root[data-design="waldorf"] .rb-sidetab.active::before{border-image-source:url('/img/themes/waldorf/paper-pill-v.webp');}
@media (max-width:720px){
  :root[data-design="waldorf"] .rb-sidetab::before{
    inset:-12px -3px -3px -3px; clip-path:inset(12px 0 0 0);
    border-image-source:url('/img/themes/waldorf/paper-pill-green.webp');
  }
  :root[data-design="waldorf"] .rb-sidetab.active::before{border-image-source:url('/img/themes/waldorf/paper-pill.webp');}
}

/* "Rezepte importieren" im Pinselstil, Gruen genau zwischen Rezeptideen (hell) und
   + Neues Rezept (dunkel); Hover bei allen drei Knoepfen: weisser Pinselstrich. */
:root[data-design="waldorf"]{--wd-brush-mid:url('/img/themes/waldorf/brush-mid.png');}
:root[data-design="waldorf"] #importRecipesBtn{
  border:none; border-radius:0; box-shadow:none; padding:.65rem 1.3rem; color:#1f3523;
  background:var(--wd-brush-mid) center / 100% 100% no-repeat; background-color:transparent;
}
:root[data-design="waldorf"] #importRecipesBtn::before{display:none;}
:root[data-design="waldorf"] #importRecipesBtn:hover,
:root[data-design="waldorf"] #importRecipesBtn:focus-visible,
:root[data-design="waldorf"] .btn-primary:hover,
:root[data-design="waldorf"] .btn-primary:focus-visible{
  background:var(--wd-brush-white) center / 100% 100% no-repeat; background-color:transparent;
  color:#2e3f22; text-shadow:none; filter:none; box-shadow:none;
}

/* =====================================================================
   ICONS im Waldorf-Stil (01.10.2026): alle 79 Icons als farbige Aquarell-Zeichnungen
   (/img/themes/waldorf/icons/*.webp, OpenArt, freigestellt) statt der einfarbigen
   Masken. Zuordnung automatisch aus den .hicon-*-Klassen; Groesse und Platzierung
   bleiben die der App. ===================================================================== */
:root[data-design="waldorf"] .hicon-account{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/account.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-anpinnen{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/anpinnen.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-auge{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/auge.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-auge-durchgestrichen{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/auge-durchgestrichen.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-automatisch-befuellen{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/automatisch-befuellen.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-avocado{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/avocado.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-bearbeiten{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/bearbeiten.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-blitz{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/blitz.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-blutgruppe{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/blutgruppe.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-convenience-produkte{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/convenience-produkte.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-daumen-hoch{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/daumen-hoch.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-daumen-runter{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/daumen-runter.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-duplizieren{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/duplizieren.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-einkaufsliste{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/einkaufsliste.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-einstellungen{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/einstellungen.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-eiweiss{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/eiweiss.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-entfernen{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/entfernen.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-essensplanung{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/essensplanung.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-fett{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/fett.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-filter{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/filter.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-fisch{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/fisch.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-flamme{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/flamme.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-freunde{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/freunde.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-frowny{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/frowny-abneigung.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-gesicht-ja{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/gesicht-ja.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-gesicht-liebe{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/gesicht-liebe.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-gesicht-nein{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/gesicht-nein.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-getraenke{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/getraenke.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-glocke{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/glocke.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-glyx{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/glyx.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-herz{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/herz.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-hinweis{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/hinweis.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-kamera{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/kamera.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-karotte{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/karotte.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-kassenbon{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/kassenbon.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-knochen{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/knochen.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-kochansicht{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/kochansicht.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-kohlenhydrate{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/kohlenhydrate.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-kuren{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/kuren.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-loeschen{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/loeschen.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-low-carb{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/low-carb.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-melone{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/melone.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-mikrofon{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/mikrofon.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-milch{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/milch.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-mond{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/mond.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-nahrungsergaenzung{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/nahrungsergaenzung.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-notiz{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/notiz.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-olive{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/olive.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-ort{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/ort.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-palme{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/palme.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-reisschale{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/reisschale.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-restaurant{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/restaurant.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-rezeptbuch{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/rezeptbuch.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-saftglas{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/saftglas.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-saison{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/saison.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-salat{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/salat.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-schneeflocke{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/schneeflocke.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-shake{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/shake.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-sonnenblume{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/sonnenblume.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-speck{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/speck.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-speisekammer{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/speisekammer.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-startseite{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/startseite.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-steak{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/steak.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-tageszeit-abends{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/tageszeit-abends.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-tageszeit-mittags{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/tageszeit-mittags.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-tageszeit-morgens{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/tageszeit-morgens.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-tageszeit-schlafen{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/tageszeit-schlafen.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-telefon{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/telefon.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-teller{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/teller.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-teller-geteilt{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/teller-geteilt.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-tradition{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/tradition.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-vegetarisch{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/vegetarisch.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-waage{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/waage.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-warnhinweis{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/warnhinweis.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-website{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/website.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-wiki{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/wiki.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-yinyang{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/yinyang.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-zauberstab{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/zauberstab.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
:root[data-design="waldorf"] .hicon-zwei-daumen-hoch{-webkit-mask-image:none; mask-image:none; background-color:transparent; background-image:url('/img/themes/waldorf/icons/zwei-daumen-hoch.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}

/* =====================================================================
   WOCHENPLAN (01.10.2026, Winki-Vorlage): Wochenwahl, Blaetter-Knoepfe, Tageskoepfe,
   Zellen und Kacheln als Papier. Gilt sinngemaess auch fuer "Mein Tag". Platzierung bleibt.
   ===================================================================== */
:root[data-design="waldorf"]{
  --wd-img-disc:url('/img/themes/waldorf/paper-disc.webp');
  --wd-img-slot:url('/img/themes/waldorf/paper-slot.webp');
}
/* runde Papier-Knoepfe: Woche zurueck/vor, Drei-Punkte-Menue */
:root[data-design="waldorf"] .plan-week-nav-btn,
:root[data-design="waldorf"] .plan-topbar-menu-btn{
  position:relative; isolation:isolate; background:transparent; border:none; box-shadow:none; color:var(--ink);
}
:root[data-design="waldorf"] .plan-week-nav-btn::before,
:root[data-design="waldorf"] .plan-topbar-menu-btn::before{
  content:""; position:absolute; inset:-4px; z-index:-1; pointer-events:none;
  background:var(--wd-img-disc) center / 100% 100% no-repeat;
}
:root[data-design="waldorf"] .plan-week-nav-btn:hover:not(:disabled),
:root[data-design="waldorf"] .plan-topbar-menu-btn:hover,
:root[data-design="waldorf"] .plan-topbar-menu-btn[aria-expanded="true"]{background:transparent; filter:brightness(1.04);}
/* Wochen-Anzeige als (hellgruene) Papierpille */
:root[data-design="waldorf"] .plan-week-range{
  position:relative; isolation:isolate; background:transparent; border-color:transparent; font-family:var(--wd-hand);
  font-size:1rem; font-weight:400; color:var(--ink);
}
:root[data-design="waldorf"] .plan-week-range strong{font-weight:400; color:var(--ink);}
:root[data-design="waldorf"] .plan-week-range::before{
  content:""; position:absolute; inset:-3px -3px; z-index:-1; pointer-events:none;
  border:14px solid transparent; border-image:var(--wd-img-pill) 90 fill / 14px stretch;
}
:root[data-design="waldorf"] .plan-week-range-current::before{
  border-image-source:var(--wd-img-pill-green); filter:saturate(.55) brightness(1.18);
}
:root[data-design="waldorf"] .plan-week-range-current,
:root[data-design="waldorf"] .plan-week-range-current strong{color:#2e3f22;}

/* Tageskoepfe */
:root[data-design="waldorf"] .plan-day-head{font-family:var(--wd-serif); font-weight:800; font-size:1.05rem; color:var(--ink);}
:root[data-design="waldorf"] .plan-day-date{font-family:var(--wd-hand); font-weight:400; font-size:.8rem;}
:root[data-design="waldorf"] .plan-day-head.plan-day-past{opacity:.6;}
:root[data-design="waldorf"] .plan-day-head.plan-day-today{
  background:var(--wd-brush-green) center / 100% 100% no-repeat; background-color:transparent; border:none; border-radius:0; box-shadow:none;
  color:#fffaf0; text-shadow:0 1px 1px rgba(20,40,20,.35);
}
:root[data-design="waldorf"] .plan-day-head.plan-day-today .plan-day-date{color:#f1f5e4;}

/* Zeitslots links: Aquarell-Icon ohne Kreis */
:root[data-design="waldorf"] .plan-slot-label{color:var(--ink);}
:root[data-design="waldorf"] .plan-slot-text{font-family:var(--wd-serif); font-weight:800; color:var(--ink);}
:root[data-design="waldorf"] .plan-slot-time{font-family:var(--wd-hand); font-weight:400; opacity:.85;}
:root[data-design="waldorf"] .plan-slot-dot{background:transparent; border-color:transparent; box-shadow:none;}
:root[data-design="waldorf"] .plan-slot-dot .hicon{width:26px; height:26px;}

/* Zellen: leere = hellgruener Papier-Slot, belegte = nur die Kachel als Papierkarte */
:root[data-design="waldorf"] .plan-cell{
  position:relative; isolation:isolate; border:none; background:transparent; border-radius:0;
}
:root[data-design="waldorf"] .plan-cell::before{
  content:""; position:absolute; inset:-3px; z-index:-1; pointer-events:none;
  border:20px solid transparent; border-image:var(--wd-img-slot) 60 fill / 20px stretch; opacity:.6;
}
:root[data-design="waldorf"] .plan-cell:has(.plan-chip)::before{display:none;}
:root[data-design="waldorf"] .plan-cell.drag-over{outline:2px dashed var(--accent); outline-offset:2px; background:transparent;}
:root[data-design="waldorf"] .plan-cell.plan-day-past{opacity:.78;}
:root[data-design="waldorf"] .plan-cell-add-btn,
:root[data-design="waldorf"] .plan-cell-note-btn{
  border:none; background:transparent; color:var(--accent-strong); border-radius:0;
}
:root[data-design="waldorf"] .plan-cell-add-btn:hover,
:root[data-design="waldorf"] .plan-cell-note-btn:hover{
  border:none; color:var(--ink); background:var(--wd-brush-white) center / 100% 100% no-repeat; background-color:transparent;
}

/* Kacheln im Plan */
:root[data-design="waldorf"] .plan-chip{
  position:relative; isolation:isolate; background:transparent; border:none; box-shadow:none; border-radius:0;
  padding:8px 8px 2px; overflow:hidden;
}
:root[data-design="waldorf"] .plan-chip::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  border:20px solid transparent; border-image:var(--wd-img-card) 70 fill / 20px stretch;
}
:root[data-design="waldorf"] .plan-chip:hover{background:transparent; filter:brightness(1.03);}
:root[data-design="waldorf"] .plan-chip-photo{border-radius:9px; overflow:hidden;}
:root[data-design="waldorf"] .plan-chip-note{background:transparent;}
:root[data-design="waldorf"] .plan-chip-name{font-family:'Karla',sans-serif; font-weight:700; color:var(--ink);}
:root[data-design="waldorf"] .plan-chip-portions,
:root[data-design="waldorf"] .budget-chip-cost{font-family:'Karla',sans-serif;}
:root[data-design="waldorf"] .plan-chip-remove,
:root[data-design="waldorf"] .plan-chip-duplicate,
:root[data-design="waldorf"] .plan-chip-pin{background:rgba(252,246,228,.92); border:1px solid #cdb98c; box-shadow:none;}

/* Lange Namen duerfen umbrechen (nach "/" per js/long_names.js, sonst notfalls im Wort) */
:root[data-design="waldorf"] .tile-name,
:root[data-design="waldorf"] .plan-chip-name{overflow-wrap:anywhere; min-width:0; max-width:100%;}

/* =====================================================================
   Einheitliche Hoehen (01.10.2026, Winki: "wirkt sehr unruhig"): alle Pillen-Knoepfe,
   Chips, Wochenwahl, Suchfeld und Unterseiten-Leiste sind gleich hoch (2.5rem). Kalam hat
   eine grosse Zeilenhoehe, die die Knoepfe sonst unterschiedlich hoch machte.
   ===================================================================== */
:root[data-design="waldorf"]{--wd-h:2.5rem;}
:root[data-design="waldorf"] :is(.btn:not(.btn-sm), .chip, .inbox-header-btn, .user-chip, .plan-week-range, .lang-switch){
  box-sizing:border-box; min-height:var(--wd-h); line-height:1.2; padding-top:.3rem; padding-bottom:.3rem;
}
:root[data-design="waldorf"] :is(.chip, .inbox-header-btn, .user-chip, .plan-week-range, .btn:not(.btn-sm)){
  display:inline-flex; align-items:center;
}
:root[data-design="waldorf"] .user-chip{padding-top:0; padding-bottom:0; height:var(--wd-h);}
:root[data-design="waldorf"] .inbox-header-btn{height:var(--wd-h);}
:root[data-design="waldorf"] .lang-switch{display:inline-flex; align-items:center; height:var(--wd-h);}
:root[data-design="waldorf"] :is(.plan-week-nav-btn, .plan-topbar-menu-btn){width:var(--wd-h); height:var(--wd-h); min-height:0; padding:0; line-height:1;}
:root[data-design="waldorf"] .search-input{box-sizing:border-box; height:var(--wd-h); min-height:var(--wd-h); line-height:1.2;}
:root[data-design="waldorf"] .cookbook-search-row .search-input,
:root[data-design="waldorf"] .cookbook-search-row .btn{height:var(--wd-h); min-height:var(--wd-h);}
:root[data-design="waldorf"] #sectionSubnav.section-subnav{box-sizing:border-box; min-height:var(--wd-h); padding:2px 3px; align-items:stretch;}
:root[data-design="waldorf"] #sectionSubnav .section-subtab-btn{line-height:1.2; padding:.3rem 1.1rem; display:inline-flex; align-items:center;}
:root[data-design="waldorf"] .plan-topbar-actions .btn,
:root[data-design="waldorf"] .plan-week-nav .btn{min-height:var(--wd-h);}
:root[data-design="waldorf"] .plan-week-range{gap:.3em;}

/* Bugfix 01.10.2026: meine display-Regeln (Einheitliche Hoehen) haben das Attribut [hidden]
   uebersteuert - dadurch erschienen Kochbuch-Knoepfe (Rezepte importieren, Neues Rezept,
   Neues Produkt, Neues Restaurant) auch auf Mein Tag und Wochenplan. [hidden] gewinnt wieder. */
:root[data-design="waldorf"] :is(.btn, .chip, .chip-reset, .inbox-header-btn, .user-chip, .plan-week-range, .lang-switch, .rb-sidetab, .section-subtab-btn)[hidden]{display:none !important;}

/* Lesbarkeit "Rezepte importieren" auf dem mittleren Gruen */
:root[data-design="waldorf"] #importRecipesBtn{
  color:#0f1a0b; font-family:var(--wd-hand); font-weight:700;
  text-shadow:0 0 3px rgba(255,255,255,.55), 0 0 1px rgba(255,255,255,.7);
}
:root[data-design="waldorf"] #importRecipesBtn:hover,
:root[data-design="waldorf"] #importRecipesBtn:focus-visible{text-shadow:none;}

/* DE/EN-Schalter (js/i18n.js): Papierpille als Rahmen, aktive Sprache als gruener Pinselstrich.
   Gleiche Hoehe wie die Elemente in der Zeile (2.5rem). */
:root[data-design="waldorf"] .lang-switch{
  position:relative; isolation:isolate; overflow:visible; border:none; opacity:1; padding:0 .35rem; gap:.1rem;
  height:var(--wd-h); font-family:var(--wd-hand); color:var(--ink);
}
:root[data-design="waldorf"] .lang-switch::before{
  content:""; position:absolute; inset:-5px -3px; z-index:-1; pointer-events:none;
  border:13px solid transparent; border-image:var(--wd-img-pill) 90 fill / 13px stretch;
}
:root[data-design="waldorf"] .lang-switch .lang-switch-btn{
  font-family:var(--wd-hand); font-weight:400; font-size:.95rem; letter-spacing:.03em; line-height:1.2;
  min-height:0; height:2rem; min-width:2.3em; padding:0 .55rem; border-radius:0; color:var(--ink);
}
:root[data-design="waldorf"] .lang-switch .lang-switch-btn:hover:not([aria-pressed="true"]){
  background:var(--wd-brush-white) center / 100% 100% no-repeat;
}
:root[data-design="waldorf"] .lang-switch .lang-switch-btn[aria-pressed="true"]{
  background:var(--wd-brush-green) center / 100% 100% no-repeat; color:#fffaf0; font-weight:700; text-shadow:0 1px 1px rgba(20,40,20,.35);
}

/* Unterseiten-Leiste (Level 2) weich: brauner Aquarell-Pinselstrich (paper-wash.webp) statt
   Papierrahmen - keine eigene Umrandung (01.10.2026, Winki). */
:root[data-design="waldorf"] #sectionSubnav.section-subnav{background:transparent; border:none; box-shadow:none;}
:root[data-design="waldorf"] #sectionSubnav.section-subnav::before{
  inset:-9px -20px; border-width:16px 44px;
  border-image:url('/img/themes/waldorf/paper-wash.webp') 70 190 fill / 16px 44px stretch;
}

/* Schmale Plan-Kacheln: weniger Rand, Trennung nur wenn noetig (sauber mit Silbentrennung) */
:root[data-design="waldorf"] .plan-chip{padding:6px 6px 2px;}
:root[data-design="waldorf"] .plan-chip-body{padding:.35rem .3rem .4rem;}
:root[data-design="waldorf"] .plan-chip-name{overflow-wrap:break-word; hyphens:auto; -webkit-hyphens:auto; font-size:.76rem;}

/* Menue Level 3 (z. B. Backend: Mitgliederverwaltung / Registrierungsanfragen ...): gleiche
   Handschrift (Kalam) und weiche Pinsel-Optik wie Level 2, nur dezenter. */
:root[data-design="waldorf"] .kuren-group-subnav{
  position:relative; isolation:isolate; background:transparent; border:none; box-shadow:none; border-radius:0;
  gap:.15rem; padding:2px 4px; align-items:center; margin-bottom:1rem;
}
:root[data-design="waldorf"] .kuren-group-subnav::after{
  content:""; position:absolute; inset:-6px -16px; z-index:-1; pointer-events:none; opacity:.55;
  border:14px solid transparent; border-image:url('/img/themes/waldorf/paper-wash.webp') 70 190 fill / 14px 40px stretch;
}
:root[data-design="waldorf"] .kuren-group-subnav .section-subtab-btn{
  font-family:var(--wd-hand); font-weight:400; font-size:1rem; line-height:1.2; color:var(--ink);
  background:transparent; border:none; border-radius:0; box-shadow:none; padding:.35rem 1rem; margin:0;
}
:root[data-design="waldorf"] .kuren-group-subnav .section-subtab-btn:hover{
  background:var(--wd-brush-white) center / 100% 100% no-repeat; color:var(--ink);
}
:root[data-design="waldorf"] .kuren-group-subnav .section-subtab-btn.active,
:root[data-design="waldorf"] .kuren-group-subnav .section-subtab-btn.active:hover{
  background:var(--wd-brush-sage) center / 100% 100% no-repeat; color:#1f3523; font-weight:700; padding:.35rem 1rem;
}

/* Schriften vereinheitlichen (01.10.2026): Stellen, an denen Arvo/Karla fest verdrahtet ist,
   nutzen im Waldorf-Theme Alegreya (Ueberschriften/Zahlen) bzw. Kalam (Tagesueberschrift). */
:root[data-design="waldorf"] :is(.heute-date, #tab-heute .today-title, .api-access-name, .kp-empty-title, .kp-av-initial,
  .admin-household-head h3, .ernf-title, .ernf-h, .stat .num, .macro-tile .num, .recipe-start-title, .md-pane-title,
  .md-new-title, .bc-plan h4, .kr-name, .kr-done-title, #tab-household > #inviteCodeBox > .section-label, .pwl-card h1){
  font-family:var(--wd-serif);
}
:root[data-design="waldorf"] .kp-day{font-family:var(--wd-hand);}

/* =====================================================================
   HINWEIS-BANNER (01.10.2026, Winki): gruene Hinweise = sanfter gruener Aquarell-Pinselstrich
   (paper-wash-green.webp), Warn-Hinweise = brauner Pinselstrich (paper-wash.webp) - ohne Umrandung.
   ===================================================================== */
:root[data-design="waldorf"] :is(.pantry-confirm-banner, .today-inspire-teaser, .heute-confirm-banner, .plan-mhd-banner, #pantryExpiryOverview){
  position:relative; isolation:isolate; background:transparent; border:none; box-shadow:none; border-radius:0;
  padding:1rem 2.2rem;
}
:root[data-design="waldorf"] :is(.pantry-confirm-banner, .today-inspire-teaser, .heute-confirm-banner, .plan-mhd-banner, #pantryExpiryOverview)::before{
  content:""; position:absolute; inset:-4px -14px; z-index:-1; pointer-events:none;
  border:20px solid transparent; border-image:url('/img/themes/waldorf/paper-wash-green.webp') 70 190 fill / 20px 52px stretch;
}
:root[data-design="waldorf"] :is(.heute-confirm-banner, .plan-mhd-banner, #pantryExpiryOverview)::before{
  border-image-source:url('/img/themes/waldorf/paper-wash.webp');
}
:root[data-design="waldorf"] .pantry-confirm-banner{color:#2e3f22;}
:root[data-design="waldorf"] .today-inspire-teaser{border-style:none;}
:root[data-design="waldorf"] :is(.pantry-confirm-banner, .heute-confirm-banner, .plan-mhd-banner, #pantryExpiryOverview)[hidden]{display:none !important;}

/* Rote Hinweise/Fehler (z. B. Verwarnung bei "Lebensmittel retten", Fehlermeldungen):
   zarter rosé-roter Aquarell-Pinselstrich (paper-wash-red.webp), Schrift bleibt dunkel. */
:root[data-design="waldorf"] :is(.rsc-warning, .billing-error, .billing-alert, .pwl-error, .help-error, .onb-error){
  position:relative; isolation:isolate; background:transparent; border:none; box-shadow:none; border-radius:0;
  padding:1rem 2.2rem; color:var(--ink);
}
:root[data-design="waldorf"] :is(.rsc-warning, .billing-error, .billing-alert, .pwl-error, .help-error, .onb-error)::before{
  content:""; position:absolute; inset:-4px -14px; z-index:-1; pointer-events:none;
  border:20px solid transparent; border-image:url('/img/themes/waldorf/paper-wash-red.webp') 70 190 fill / 20px 52px stretch;
}
:root[data-design="waldorf"] :is(.rsc-warning, .billing-error, .billing-alert, .pwl-error, .help-error, .onb-error)[hidden]{display:none !important;}

/* =====================================================================
   VORRAETE (01.10.2026, Winki-Vorlage): keine harten Linien mehr - Papier-Karten, Papier-Felder,
   weiche Pinselflaechen. Eingabefelder allgemein (in allen Formularen) als Papierstreifen.
   ===================================================================== */
/* Eingabefelder: Papierstreifen statt Linie */
:root[data-design="waldorf"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not(.search-input),
:root[data-design="waldorf"] .pantry-field{
  background:transparent; box-shadow:none; border:12px solid transparent; border-radius:0;
  border-image:var(--wd-img-pill) 90 fill / 12px stretch; padding:0 .45rem; min-height:2.6rem; box-sizing:border-box;
  font-family:var(--wd-serif); color:var(--ink);
}
:root[data-design="waldorf"] input:focus-visible:not([type="checkbox"]):not([type="radio"]){outline:none; filter:brightness(1.04) saturate(1.1);}
:root[data-design="waldorf"] :is(select, textarea){
  background:#fdf8e8; border:1.5px solid var(--wd-soft); border-radius:14px; box-shadow:var(--wd-glow); color:var(--ink); font-family:var(--wd-serif);
}
:root[data-design="waldorf"] input.vr-date-expired{border-image-source:var(--wd-img-pill); box-shadow:0 0 0 2px rgba(190,70,60,.4) inset; border-radius:14px;}

/* Risiko-Box (bald ablaufend), Formular-Box, Sammel-Leiste: Pinselflaeche */
:root[data-design="waldorf"] :is(.vr-risk, .vr-add-hint, .pantry-bulk-bar){
  position:relative; isolation:isolate; background:transparent; border:none; box-shadow:none; border-radius:0; padding:1.1rem 2.2rem;
}
:root[data-design="waldorf"] :is(.vr-risk, .vr-add-hint, .pantry-bulk-bar)::before{
  content:""; position:absolute; inset:-4px -14px; z-index:-1; pointer-events:none;
  border:20px solid transparent; border-image:url('/img/themes/waldorf/paper-wash.webp') 70 190 fill / 20px 52px stretch;
}
:root[data-design="waldorf"] .vr-risk-row{background:rgba(255,251,238,.55); border:none; border-left:none; border-radius:14px; box-shadow:none;}
:root[data-design="waldorf"] .pantry-add-form{background:transparent; border:none; box-shadow:none;}

/* Filter-Chips (Alle Orte / Speisekammer / Kuehlschrank ...) */
:root[data-design="waldorf"] .vr-chip{
  position:relative; isolation:isolate; background:transparent; border-color:transparent; color:var(--ink);
  font-family:var(--wd-serif); line-height:1.2; box-shadow:none;
}
:root[data-design="waldorf"] .vr-chip::before{
  content:""; position:absolute; inset:-3px -2px; z-index:-1; pointer-events:none;
  border:10px solid transparent; border-image:var(--wd-img-pill) 90 fill / 10px stretch;
}
:root[data-design="waldorf"] .vr-chip[aria-pressed="true"]{background:transparent; color:#1f3523; border-color:transparent; font-weight:700; text-shadow:none;}
:root[data-design="waldorf"] .vr-chip[aria-pressed="true"]::before{border-image-source:var(--wd-img-pill-green);}

/* Vorrats-Karten: Papierkarte */
:root[data-design="waldorf"] .pantry-card{
  position:relative; isolation:isolate; background:transparent; border:none; box-shadow:none; border-radius:0; padding:1.3rem 1.4rem 1.3rem;
}
:root[data-design="waldorf"] .pantry-card::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  border:24px solid transparent; border-image:var(--wd-img-card) 70 fill / 24px stretch;
}
:root[data-design="waldorf"] .pantry-card-wrap{overflow:visible;}
:root[data-design="waldorf"] .pantry-card :is(.pantry-field, input:not([type="checkbox"])){min-height:2.4rem;}
:root[data-design="waldorf"] .vr-thumb{border:none; background:transparent; border-radius:12px; box-shadow:var(--wd-glow);}
:root[data-design="waldorf"] .vr-more{
  position:relative; isolation:isolate; background:transparent; border:none; box-shadow:none; color:var(--ink);
}
:root[data-design="waldorf"] .vr-more::before{
  content:""; position:absolute; inset:-3px; z-index:-1; pointer-events:none; background:var(--wd-img-disc) center / 100% 100% no-repeat;
}
/* Loeschen-Knoepfe: rosaroter Pinselstrich */
:root[data-design="waldorf"] .btn-danger{
  background:url('/img/themes/waldorf/paper-wash-red.webp') center / 100% 100% no-repeat; background-color:transparent; color:#7a2a20;
  border:none; border-radius:0; padding:.55rem 1.4rem;
}

/* Wisch-zum-Loeschen: die rote Flaeche hinter der Karte erscheint nur waehrend des Wischens */
:root[data-design="waldorf"] .pantry-swipe-delete{display:none; border-radius:18px;}
:root[data-design="waldorf"] .pantry-card-wrap:has(.pantry-card[style*="translateX(-"]) .pantry-swipe-delete{display:flex;}
:root[data-design="waldorf"] .pantry-card input[type="checkbox"]{min-height:0; width:1.1rem; height:1.1rem; border:none; border-image:none; padding:0; accent-color:var(--accent-strong); background:transparent;}

/* =====================================================================
   Pinsel-Knoepfe nicht mehr abgeschnitten (01.10.2026): der Pinselstrich liegt als ::before
   hinter dem Knopf und ragt an allen Seiten etwas darueber hinaus, die ausgefransten
   Borsten bleiben so komplett sichtbar. Hover = weisser Pinselstrich.
   ===================================================================== */
:root[data-design="waldorf"] :is(.btn-primary, #importRecipesBtn, .ai-assistant-btn),
:root[data-design="waldorf"] :is(.btn-primary, #importRecipesBtn, .ai-assistant-btn):is(:hover, :focus-visible){
  position:relative; isolation:isolate; background:none !important; background-color:transparent !important; box-shadow:none !important; border:none;
}
:root[data-design="waldorf"] :is(.btn-primary, #importRecipesBtn, .ai-assistant-btn)::before{
  content:""; display:block; position:absolute; inset:-7px -11px; z-index:-1; pointer-events:none;
  border:none; border-image:none; background:var(--wd-brush-green) center / 100% 100% no-repeat;
}
:root[data-design="waldorf"] #importRecipesBtn::before{background-image:var(--wd-brush-mid);}
:root[data-design="waldorf"] .ai-assistant-btn::before{background-image:var(--wd-brush-sage);}
:root[data-design="waldorf"] :is(.btn-primary, #importRecipesBtn, .ai-assistant-btn):is(:hover, :focus-visible)::before{background-image:var(--wd-brush-white);}

/* ---------- "Was koche ich heute?" (Inspiration auf Mein Tag) ---------- */
:root[data-design="waldorf"] .today-card{
  position:relative; isolation:isolate; background:transparent; border:none; box-shadow:none; border-radius:0; padding:1.8rem 2rem;
}
:root[data-design="waldorf"] .today-card::before{
  content:""; position:absolute; inset:-6px; z-index:-1; pointer-events:none;
  border:32px solid transparent; border-image:var(--wd-img-card) 70 fill / 32px stretch;
}
:root[data-design="waldorf"] .today-item{
  position:relative; isolation:isolate; background:transparent; border:none; border-radius:0; box-shadow:none; padding:9px 9px 6px;
}
:root[data-design="waldorf"] .today-item::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  border:22px solid transparent; border-image:var(--wd-img-card) 70 fill / 22px stretch;
}
:root[data-design="waldorf"] .today-item-img{border-radius:9px;}
:root[data-design="waldorf"] .today-title{font-family:var(--wd-serif); font-weight:800; color:var(--wd-title);}
:root[data-design="waldorf"] .today-ai{border-top:1.5px dashed rgba(180,150,100,.45);}
/* Mein Tag: Mahlzeiten-Icons ohne Rahmen, Kacheln als Papier */
:root[data-design="waldorf"] .heute-slot-dot,
:root[data-design="waldorf"] .heute-slot.is-next .heute-slot-dot{background:transparent; border:none; box-shadow:none;}
:root[data-design="waldorf"] .heute-slot-dot .hicon{width:30px; height:30px;}
:root[data-design="waldorf"] .heute-card{
  position:relative; isolation:isolate; background:transparent; border:none; box-shadow:none; border-radius:0; padding:9px;
}
:root[data-design="waldorf"] .heute-card::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  border:22px solid transparent; border-image:var(--wd-img-card) 70 fill / 22px stretch;
}
:root[data-design="waldorf"] .heute-card:hover{background:transparent; filter:brightness(1.03);}

/* Pinselstrich-Knoepfe: Enden bleiben in Form, nur die Mitte wird gestreckt (9-Teile statt
   gestauchtem Gesamtbild) - auch bei sehr breiten Knoepfen wie "Uebernehmen" ein Pinselstrich. */
:root[data-design="waldorf"] :is(.btn-primary, #importRecipesBtn, .ai-assistant-btn)::before{
  background:none; border-style:solid; border-color:transparent; border-width:0 44px;
  border-image:var(--wd-brush-green) 0 220 fill / 0 44px stretch;
  inset:-7px -12px;
}
:root[data-design="waldorf"] #importRecipesBtn::before{border-image-source:var(--wd-brush-mid);}
:root[data-design="waldorf"] .ai-assistant-btn::before{border-image-source:var(--wd-brush-sage);}
:root[data-design="waldorf"] :is(.btn-primary, #importRecipesBtn, .ai-assistant-btn):is(:hover, :focus-visible)::before{border-image-source:var(--wd-brush-white);}

/* Pinsel-Knoepfe: kleinerer Ueberstand, damit sie keine Nachbar-Elemente ueberdecken */
:root[data-design="waldorf"] :is(.btn-primary, #importRecipesBtn, .ai-assistant-btn)::before{
  inset:-3px -6px; border-width:0 34px; border-image-width:0 34px;
}
:root[data-design="waldorf"] .heute-cook-btn{margin-top:.4rem;}

/* Pinsel-Knoepfe: Knopf hat wieder die normale Groesse (Rahmen wie in den anderen Designs),
   das Pinselstrich-Bild liegt komplett INNERHALB und wird nicht mehr ueberstehen/abgeschnitten. */
:root[data-design="waldorf"] :is(.btn-primary, #importRecipesBtn, .ai-assistant-btn)::before{
  inset:0; border-width:0 26px; border-image-width:0 26px;
}
:root[data-design="waldorf"] .heute-cook-btn{margin-top:0;}

/* Neue Pinselstrich-Bilder (01.10.2026): transparent, Strich liegt komplett INNERHALB des Bildes
   (mit transparentem Rand) - Knopf-Rahmen = normale Groesse, nichts steht ueber. */
:root[data-design="waldorf"] :is(.btn-primary, #importRecipesBtn, .ai-assistant-btn)::before{
  inset:0; border-width:0 28px; border-image-width:0 28px;
}

/* =====================================================================
   Weitere kleine Pillen/Hinweise im Papier-Stil (01.10.2026): "N Gerichte ohne Naehrwerte",
   Kur-/MHD-Hinweise im Plan, Reset-Chips, Rezept-Pruef-Hinweis, Ansicht-Umschalter.
   ===================================================================== */
:root[data-design="waldorf"] :is(.plan-hint-flag, .plan-cure-banner-item, .plan-mhd-banner-item, .chip-reset, .recipe-review-hint > *, .plan-layout-toggle){
  position:relative; isolation:isolate; background:transparent; border-color:transparent; box-shadow:none;
  font-family:var(--wd-hand); color:var(--ink);
}
:root[data-design="waldorf"] :is(.plan-hint-flag, .plan-cure-banner-item, .plan-mhd-banner-item, .chip-reset, .recipe-review-hint > *, .plan-layout-toggle)::before{
  content:""; position:absolute; inset:-4px -3px; z-index:-1; pointer-events:none;
  border:12px solid transparent; border-image:var(--wd-img-pill) 90 fill / 12px stretch;
}
:root[data-design="waldorf"] :is(.plan-hint-flag, .plan-cure-banner-item, .plan-mhd-banner-item, .chip-reset, .recipe-review-hint > *):hover{background:transparent; filter:brightness(1.04);}
:root[data-design="waldorf"] .plan-hint-flag{padding:.3rem .9rem;}
:root[data-design="waldorf"] .layout-btn{border-radius:0; font-family:var(--wd-hand);}
:root[data-design="waldorf"] .layout-btn.active{background:var(--wd-brush-green) center / 100% 100% no-repeat; background-color:transparent; color:#fffaf0;}

/* =====================================================================
   KARTEN & ZEILEN ueberall (01.10.2026, Winki: "harte Rahmen bei vielen Elementen" auf Haushalt u. a.):
   alle Karten-/Boxen-Klassen der App liegen im Waldorf-Theme auf gerissenem Papier (paper-card),
   kompakte Zeilen auf einem schmaleren Papierstreifen - keine duennen harten Linien mehr.
   ===================================================================== */
:root[data-design="waldorf"] :is(.live-card, .trips-card, .invite-code-box, .member-card, .admin-household-card, .settings-card, .friends-panel,
  .help-panel, .help-topic, .help-answer-card, .dsc-card, .tp-card, .onb-card, .api-access-card, .recipecheck-card, .external-invite-card,
  .ai-suggestion-card, .ingredient-admin-card, .billing-plan, .billing-campaign-form, .aic-kpi, .aic-table-wrap, .metrics-tile, .md-setting,
  .plan-form, .modal-section, .live-group, .invite-household-block, .usp-block, .kt-window, .mg-calc, .season-group, .einnahmeplan-gruppe,
  .unmatched-box, .recipe-start, .board-guest-box, .member-tile, .tp-invite, .recipe-text, .recipecheck-empty, .ernf-box, .season-recipe){
  position:relative; isolation:isolate; background:transparent; border:none; box-shadow:none; border-radius:0;
}
:root[data-design="waldorf"] :is(.live-card, .trips-card, .invite-code-box, .member-card, .admin-household-card, .settings-card, .friends-panel,
  .help-panel, .help-topic, .help-answer-card, .dsc-card, .tp-card, .onb-card, .api-access-card, .recipecheck-card, .external-invite-card,
  .ai-suggestion-card, .ingredient-admin-card, .billing-plan, .billing-campaign-form, .aic-kpi, .aic-table-wrap, .metrics-tile, .md-setting,
  .plan-form, .modal-section, .live-group, .invite-household-block, .usp-block, .kt-window, .mg-calc, .season-group, .einnahmeplan-gruppe,
  .unmatched-box, .recipe-start, .board-guest-box, .member-tile, .tp-invite, .recipe-text, .recipecheck-empty, .ernf-box, .season-recipe)::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  border:24px solid transparent; border-image:var(--wd-img-card) 70 fill / 24px stretch;
}
:root[data-design="waldorf"] :is(.live-card, .trips-card, .invite-code-box, .member-card, .admin-household-card, .settings-card, .help-panel, .dsc-card,
  .tp-card, .onb-card, .api-access-card, .billing-plan, .md-setting, .live-group, .member-tile){padding-top:max(1rem, 1.1rem); padding-bottom:1.1rem;}
:root[data-design="waldorf"] .md-plus-tile::before{border-image-source:var(--wd-img-slot);}

/* Haushalt: linke Karte (Pseudo des Panels) */
:root[data-design="waldorf"] #tab-household.active::before{
  background:none; border:28px solid transparent; border-radius:0; border-image:var(--wd-img-card) 70 fill / 28px stretch;
}

/* kompakte Zeilen */
:root[data-design="waldorf"] :is(.friend-request-row, .friend-connection-row, .friend-share-row, .admin-member-row, .admin-member-mgmt-row,
  .shopping-item, .cook-confirm-row, .kp-open-item, .rsc-person-req, .live-responsible, .live-done-info, .heute-entry, .plan-missing-list li,
  .rating-member-row, .kt-hint, .friend-plan-slot){
  position:relative; isolation:isolate; background:transparent; border:none; box-shadow:none; border-radius:0;
}
:root[data-design="waldorf"] :is(.friend-request-row, .friend-connection-row, .friend-share-row, .admin-member-row, .admin-member-mgmt-row,
  .shopping-item, .cook-confirm-row, .kp-open-item, .rsc-person-req, .live-responsible, .live-done-info, .heute-entry, .plan-missing-list li,
  .rating-member-row, .kt-hint, .friend-plan-slot)::before{
  content:""; position:absolute; inset:-2px -3px; z-index:-1; pointer-events:none;
  border:14px solid transparent; border-image:var(--wd-img-card) 70 fill / 14px stretch; opacity:.9;
}

/* Wochentags-Knoepfe (Mo Di Mi ...): runde Papier-Scheiben, aktiver gruen */
:root[data-design="waldorf"] .live-day-chip{
  position:relative; isolation:isolate; background:transparent; border:none; box-shadow:none; color:var(--ink); font-family:var(--wd-hand);
}
:root[data-design="waldorf"] .live-day-chip::before{
  content:""; position:absolute; inset:-3px; z-index:-1; pointer-events:none; background:var(--wd-img-disc) center / 100% 100% no-repeat;
}
:root[data-design="waldorf"] .live-day-chip.active{background:transparent; color:#fffaf0; text-shadow:0 1px 1px rgba(20,40,20,.4);}
:root[data-design="waldorf"] .live-day-chip.active::before{
  border:12px solid transparent; border-image:var(--wd-img-pill-green) 90 fill / 12px stretch; background:none; inset:-3px;
}
/* Einladungscode */
:root[data-design="waldorf"] .invite-code-box code{
  background:transparent; border:12px solid transparent; border-image:var(--wd-img-pill) 90 fill / 12px stretch; border-radius:0; padding:0 .5rem;
}
:root[data-design="waldorf"] #tab-household > :is(.section-label:first-child, .household-name-row, #householdCoverField){padding-inline:1.6rem;}
:root[data-design="waldorf"] #tab-household > #inviteCodeBox{padding-inline:1.6rem;}
