/*
 * static/waldruhe-lichtung.css – der eigene Look von Waldruhe: „Lichtung“.
 *
 * Michael, 20.10.2026 (Vorlage: Entwürfe einer Mental-Health-App): „Die Bereiche für seelisches Wohlbefinden und
 * auch allgemein das Waldruhe-Theme sollte an diese Art von Optik angelehnt sein.“ Also: warmes Papier statt
 * Weiß, Überschriften in einer Serifenschrift, Karten mit dünner gezeichneter Linie und leicht unregelmäßigen
 * Ecken, orange Pillen-Knöpfe mit Pfeil, Blätterzweige in den Ecken, gezeichnete Bilder (static/waldruhe-bilder.js).
 *
 * Mechanik wie eine Haut (docs/haut_kontext.md), aber nur auf dieser Seite: frontend/waldruhe.html setzt
 * data-haut="waldruhe", solange localStorage 'waldruhe-look' nicht 'hub' ist (Einstellungen → Aussehen).
 * Die Hub-Häute bleiben dann unberührt; wer „wie im Hub“ wählt, bekommt sie zurück.
 * Hell und dunkel: data-theme wie überall. Datenfarben (Gemüt, Tagesband, Muskeln) bleiben eigene Paletten.
 */
html[data-haut="waldruhe"]{
  --wr-papier:#f3ead9;--wr-karte:#fbf6eb;--wr-karte2:#f5ecdb;--wr-minze:#d4e6da;--wr-linie:#3b3631;--wr-stein:#b9b1a4;
  --wr-orange:#ef6b3b;--wr-orange-d:#d85a2c;--wr-rosa:#f2a7a1;--wr-rosa-d:#d97f79;--wr-sonne:#f6cf45;--wr-sonne-d:#e0a92a;
  --wr-blatt:#86ab73;--wr-blatt-d:#4d7a45;--wr-nacht:#1f2a4d;--wr-nacht-d:#2b3561;--wr-holz:#b07a4a;--wr-holz-d:#8a5a33;--wr-regen:#5b8fc9;
  --bg:var(--wr-papier);--bg2:#ebe0cb;--surface:var(--wr-karte);--surface2:var(--wr-karte2);--border:#d9cdb6;
  --text:#2f2a25;--text-dim:#7a7064;--primary:var(--wr-orange);--primary-h:var(--wr-orange-d);--secondary:#6f9a62;
  --success:#4f8a55;--warning:#c4862a;--danger:#c4473a;--shadow:rgba(59,54,49,.12);--leer:#e8dfcd;
  --haut-glas:var(--wr-karte);--haut-glas-d:var(--wr-karte);--haut-rand:color-mix(in srgb,var(--wr-linie) 70%,transparent);
  --haut-kante:0 0 0 0 transparent;--haut-schatten:2px 3px 0 rgba(59,54,49,.10);--haut-schatten-tief:3px 5px 0 rgba(59,54,49,.14),0 24px 60px rgba(59,54,49,.18);
  --haut-blur:none;--haut-knopf:var(--wr-karte);--haut-knopf-hover:#fff;--haut-haupt:var(--wr-orange);--haut-haupt-txt:#fff;--haut-flecken:none;
  --wr-serif:'Young Serif','Iowan Old Style','Georgia',serif;
  --wr-ecke:22px 17px 24px 15px / 16px 24px 15px 22px;   /* gezeichnet: keine Ecke gleich */
  color-scheme:light;
}
html[data-haut="waldruhe"][data-theme="dark"]{
  --wr-papier:#1b1d18;--wr-karte:#25291f;--wr-karte2:#2d3227;--wr-minze:#2c4234;--wr-linie:#e9e1d1;--wr-stein:#6e685d;
  --wr-orange:#f27d4f;--wr-orange-d:#f59167;--wr-rosa:#d98d88;--wr-rosa-d:#b66a65;--wr-sonne:#f0c847;--wr-sonne-d:#d9a32a;
  --wr-blatt:#6c935d;--wr-blatt-d:#86ab73;--wr-nacht:#11172e;--wr-nacht-d:#2b3561;--wr-holz:#9b6b40;--wr-holz-d:#7a522d;
  --bg:var(--wr-papier);--bg2:#22261e;--surface:var(--wr-karte);--surface2:var(--wr-karte2);--border:#3d4235;
  --text:#efe8da;--text-dim:#a79e8f;--success:#6fae74;--warning:#d9a04a;--danger:#e0675a;--shadow:rgba(0,0,0,.4);--leer:#363b30;
  --haut-rand:color-mix(in srgb,var(--wr-linie) 32%,transparent);--haut-schatten:2px 3px 0 rgba(0,0,0,.35);--haut-haupt-txt:#1b1d18;
  color-scheme:dark;
}

/* Papier mit Blätterzweigen in den oberen Ecken des Inhalts – sie schauen hinter den ersten Karten hervor */
html[data-haut="waldruhe"] body{background:var(--wr-papier);background-image:none}
html[data-haut="waldruhe"] main::before,html[data-haut="waldruhe"] main::after{content:'';position:absolute;top:-4px;width:150px;height:150px;pointer-events:none;z-index:-1;
  background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22%3E%3Cpath d=%22M0 8 C30 18 52 38 70 70%22 fill=%22none%22 stroke=%22%234d7a45%22 stroke-width=%221.8%22/%3E%3Cpath d=%22M0 0c6-10 18-12 26-8-4 10-16 14-26 8z%22 transform=%22translate(12 12) rotate(30) scale(1)%22 fill=%22%2386ab73%22/%3E%3Cpath d=%22M0 0c6-10 18-12 26-8-4 10-16 14-26 8z%22 transform=%22translate(22 15) rotate(-40) scale(1)%22 fill=%22%234d7a45%22/%3E%3Cpath d=%22M0 0c6-10 18-12 26-8-4 10-16 14-26 8z%22 transform=%22translate(34 24) rotate(50) scale(1.1)%22 fill=%22%234d7a45%22/%3E%3Cpath d=%22M0 0c6-10 18-12 26-8-4 10-16 14-26 8z%22 transform=%22translate(42 30) rotate(-20) scale(1)%22 fill=%22%2386ab73%22/%3E%3Cpath d=%22M0 0c6-10 18-12 26-8-4 10-16 14-26 8z%22 transform=%22translate(52 42) rotate(70) scale(1)%22 fill=%22%2386ab73%22/%3E%3Cpath d=%22M0 0c6-10 18-12 26-8-4 10-16 14-26 8z%22 transform=%22translate(58 50) rotate(0) scale(0.9)%22 fill=%22%234d7a45%22/%3E%3Cpath d=%22M0 0c6-10 18-12 26-8-4 10-16 14-26 8z%22 transform=%22translate(66 62) rotate(80) scale(0.8)%22 fill=%22%234d7a45%22/%3E%3Cpath d=%22M8 0 C14 20 14 34 10 52%22 fill=%22none%22 stroke=%22%234d7a45%22 stroke-width=%221.4%22/%3E%3Cpath d=%22M0 0c6-10 18-12 26-8-4 10-16 14-26 8z%22 transform=%22translate(10 16) rotate(110) scale(0.8)%22 fill=%22%234d7a45%22/%3E%3Cpath d=%22M0 0c6-10 18-12 26-8-4 10-16 14-26 8z%22 transform=%22translate(12 28) rotate(60) scale(0.8)%22 fill=%22%2386ab73%22/%3E%3Cpath d=%22M0 0c6-10 18-12 26-8-4 10-16 14-26 8z%22 transform=%22translate(11 40) rotate(120) scale(0.7)%22 fill=%22%2386ab73%22/%3E%3C/svg%3E") no-repeat 0 0/100% 100%;opacity:.9}
html[data-haut="waldruhe"] main::before{left:-14px}
html[data-haut="waldruhe"] main::after{right:-14px;transform:scaleX(-1)}
html[data-haut="waldruhe"][data-theme="dark"] main::before,html[data-haut="waldruhe"][data-theme="dark"] main::after{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 120%22%3E%3Cpath d=%22M0 8 C30 18 52 38 70 70%22 fill=%22none%22 stroke=%22%233f6439%22 stroke-width=%221.8%22/%3E%3Cpath d=%22M0 0c6-10 18-12 26-8-4 10-16 14-26 8z%22 transform=%22translate(12 12) rotate(30) scale(1)%22 fill=%22%235f8752%22/%3E%3Cpath d=%22M0 0c6-10 18-12 26-8-4 10-16 14-26 8z%22 transform=%22translate(22 15) rotate(-40) scale(1)%22 fill=%22%233f6439%22/%3E%3Cpath d=%22M0 0c6-10 18-12 26-8-4 10-16 14-26 8z%22 transform=%22translate(34 24) rotate(50) scale(1.1)%22 fill=%22%233f6439%22/%3E%3Cpath d=%22M0 0c6-10 18-12 26-8-4 10-16 14-26 8z%22 transform=%22translate(42 30) rotate(-20) scale(1)%22 fill=%22%235f8752%22/%3E%3Cpath d=%22M0 0c6-10 18-12 26-8-4 10-16 14-26 8z%22 transform=%22translate(52 42) rotate(70) scale(1)%22 fill=%22%235f8752%22/%3E%3Cpath d=%22M0 0c6-10 18-12 26-8-4 10-16 14-26 8z%22 transform=%22translate(58 50) rotate(0) scale(0.9)%22 fill=%22%233f6439%22/%3E%3Cpath d=%22M0 0c6-10 18-12 26-8-4 10-16 14-26 8z%22 transform=%22translate(66 62) rotate(80) scale(0.8)%22 fill=%22%233f6439%22/%3E%3Cpath d=%22M8 0 C14 20 14 34 10 52%22 fill=%22none%22 stroke=%22%233f6439%22 stroke-width=%221.4%22/%3E%3Cpath d=%22M0 0c6-10 18-12 26-8-4 10-16 14-26 8z%22 transform=%22translate(10 16) rotate(110) scale(0.8)%22 fill=%22%233f6439%22/%3E%3Cpath d=%22M0 0c6-10 18-12 26-8-4 10-16 14-26 8z%22 transform=%22translate(12 28) rotate(60) scale(0.8)%22 fill=%22%235f8752%22/%3E%3Cpath d=%22M0 0c6-10 18-12 26-8-4 10-16 14-26 8z%22 transform=%22translate(11 40) rotate(120) scale(0.7)%22 fill=%22%235f8752%22/%3E%3C/svg%3E");opacity:.75}
html[data-haut="waldruhe"] main{position:relative;z-index:1;overflow-x:clip}
@media (max-width:600px){html[data-haut="waldruhe"] main::before,html[data-haut="waldruhe"] main::after{width:92px;height:92px;top:-18px;opacity:.75}
  html[data-haut="waldruhe"] main::before{left:-40px}html[data-haut="waldruhe"] main::after{right:-40px}}

/* Schrift: Überschriften mit Serifen, wie aus dem Notizbuch */
html[data-haut="waldruhe"] .marke h1{font-family:var(--wr-serif);font-size:24px;letter-spacing:0}
html[data-haut="waldruhe"] .karte h2{font-family:var(--wr-serif);font-weight:400;font-size:18px;text-transform:none;letter-spacing:0;color:var(--text)}
html[data-haut="waldruhe"] .karte h3,html[data-haut="waldruhe"] .blatt h3,html[data-haut="waldruhe"] .yz-titel,html[data-haut="waldruhe"] .hv-oben h3,
html[data-haut="waldruhe"] .tagwahl h3,html[data-haut="waldruhe"] .ueb h3,html[data-haut="waldruhe"] .hv-name,html[data-haut="waldruhe"] .hv-w-titel{font-family:var(--wr-serif);font-weight:400;letter-spacing:0}
html[data-haut="waldruhe"] .unter{font-family:var(--wr-serif);text-transform:none;letter-spacing:0;font-size:15px;font-weight:400;color:var(--text)}
html[data-haut="waldruhe"] .gruss{font-family:var(--wr-serif);font-size:28px;color:var(--text);line-height:1.15}
html[data-haut="waldruhe"] .yz-h h2{font-size:19px}

/* Karten: gezeichnete Linie, unregelmäßige Ecken, harter kleiner Schatten statt Glas */
html[data-haut="waldruhe"] .glas{background:var(--wr-karte);border:1.5px solid var(--haut-rand);border-radius:var(--wr-ecke);box-shadow:var(--haut-schatten)}
html[data-haut="waldruhe"] .zahl,html[data-haut="waldruhe"] .hinweis,html[data-haut="waldruhe"] .jetzt-punkt,html[data-haut="waldruhe"] .hv-kachel,
html[data-haut="waldruhe"] .deutung li,html[data-haut="waldruhe"] .gz-eintrag,html[data-haut="waldruhe"] .tg-kachel,html[data-haut="waldruhe"] .tg-detail,
html[data-haut="waldruhe"] .ss-thema{border:1.2px solid color-mix(in srgb,var(--wr-linie) 45%,transparent);border-radius:16px 12px 17px 11px / 12px 17px 11px 16px;background:var(--wr-karte2)}
html[data-haut="waldruhe"] .blatt{background:var(--wr-karte);border:1.5px solid var(--haut-rand);border-radius:26px 20px 28px 18px / 20px 28px 18px 26px;box-shadow:var(--haut-schatten-tief)}
html[data-haut="waldruhe"] .schicht{background:color-mix(in srgb,var(--wr-papier) 78%,transparent)}
html[data-haut="waldruhe"] .yz-kacheln{border:1.5px solid var(--haut-rand);background:var(--haut-rand);border-radius:var(--wr-ecke)}
html[data-haut="waldruhe"] .yz-kacheln div{background:var(--wr-karte)}
html[data-haut="waldruhe"] .yz-bild{border:1.5px solid var(--haut-rand);border-radius:var(--wr-ecke);background:var(--wr-minze)}
html[data-haut="waldruhe"] .uebung-buehne{background:var(--wr-karte2);border:1.2px solid color-mix(in srgb,var(--wr-linie) 35%,transparent)}

/* Knöpfe: Pillen; der Hauptknopf orange mit Pfeil */
html[data-haut="waldruhe"] .btn{border-radius:999px;border:1.3px solid color-mix(in srgb,var(--wr-linie) 55%,transparent);background:var(--wr-karte)}
html[data-haut="waldruhe"] .btn:hover{border-color:var(--wr-orange);background:#fff}
html[data-haut="waldruhe"][data-theme="dark"] .btn:hover{background:var(--wr-karte2)}
html[data-haut="waldruhe"] .btn.haupt{background:var(--wr-orange);color:var(--haut-haupt-txt);border-color:transparent;box-shadow:0 2px 0 var(--wr-orange-d);padding-left:18px;padding-right:18px}
html[data-haut="waldruhe"] .btn.haupt:hover{background:var(--wr-orange-d)}
html[data-haut="waldruhe"] .btn.pfeil::after,html[data-haut="waldruhe"] .wr-pille::after{content:' →'}
html[data-haut="waldruhe"] .btn.rund{border-radius:50%}
html[data-haut="waldruhe"] .chip{border-color:color-mix(in srgb,var(--wr-linie) 40%,transparent)}
html[data-haut="waldruhe"] button.chip.an{background:var(--wr-orange);color:var(--haut-haupt-txt)}
html[data-haut="waldruhe"] .feld input,html[data-haut="waldruhe"] .feld select,html[data-haut="waldruhe"] .feld textarea{border:1.3px solid color-mix(in srgb,var(--wr-linie) 45%,transparent);background:var(--wr-karte);border-radius:14px}
/* Essen prüfen (kompakt): Zeilen als kleine Notizzettel, Felder mit gezeichneter Linie */
html[data-haut="waldruhe"] .blatt.vs .vs-f:not(.vs-name),html[data-haut="waldruhe"] .vs-wert{border:1.2px solid color-mix(in srgb,var(--wr-linie) 40%,transparent);background:var(--wr-karte);border-radius:11px 9px 12px 8px / 9px 12px 8px 11px}
html[data-haut="waldruhe"] .blatt.vs .vs-wert .vs-f:not(.vs-name){border:none;background:transparent}
html[data-haut="waldruhe"] .vs-pos{background:var(--wr-karte2);border:1.2px solid color-mix(in srgb,var(--wr-linie) 30%,transparent);border-radius:14px 10px 15px 9px / 10px 15px 9px 14px}
html[data-haut="waldruhe"] .vs-pos.unsicher{background:color-mix(in srgb,var(--wr-sonne) 18%,var(--wr-karte2));border-color:color-mix(in srgb,var(--wr-sonne-d) 55%,transparent)}
html[data-haut="waldruhe"] .blatt.vs .vs-f:focus,html[data-haut="waldruhe"] .vs-wert:focus-within{border-color:var(--wr-orange)}
html[data-haut="waldruhe"] .blatt.vs h3{font-size:19px}
html[data-haut="waldruhe"] .yz-plus{background:var(--wr-orange);border:none;box-shadow:0 2px 0 var(--wr-orange-d)}
html[data-haut="waldruhe"] .yz-mehr{background:var(--wr-karte);border:1.5px solid var(--haut-rand);border-radius:999px;box-shadow:2px 3px 0 color-mix(in srgb,var(--wr-linie) 22%,transparent);font-family:var(--wr-serif);font-weight:400}
html[data-haut="waldruhe"] .yz-banner{background:var(--wr-minze);border:1.5px solid var(--haut-rand);border-radius:var(--wr-ecke);font-family:var(--wr-serif);font-weight:400}
html[data-haut="waldruhe"] .plus{background:var(--wr-orange);box-shadow:0 3px 0 var(--wr-orange-d),0 8px 24px var(--shadow)}

/* Kopf und Reiter oben: Papier, Reiter als Pillen */
html[data-haut="waldruhe"] .kopf{background:color-mix(in srgb,var(--wr-papier) 92%,transparent);border-bottom:1.2px dashed color-mix(in srgb,var(--wr-linie) 30%,transparent)}
html[data-haut="waldruhe"] .marke svg{color:var(--wr-blatt-d)}
html[data-haut="waldruhe"] .beta{background:var(--wr-minze);color:var(--text)}
html[data-haut="waldruhe"] .reiter{gap:6px;padding-bottom:10px}
html[data-haut="waldruhe"] .reiter button{border:1.2px solid transparent;border-radius:999px;padding:7px 14px;min-height:38px;border-bottom-width:1.2px}
html[data-haut="waldruhe"] .reiter button.an{border-color:color-mix(in srgb,var(--wr-linie) 60%,transparent);background:var(--wr-karte);color:var(--text)}

/* Leiste unten (Handy): schwebende Karte, der aktive Ort als umrandete Pille mit Wort daneben */
@media (max-width:900px){
  html[data-haut="waldruhe"] body.leiste-an .leiste{left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));padding-bottom:0;border:1.5px solid var(--haut-rand);
    border-radius:24px 20px 26px 18px / 20px 26px 18px 24px;background:var(--wr-karte);box-shadow:var(--haut-schatten)}
  html[data-haut="waldruhe"] body.leiste-an main{padding-bottom:calc(112px + env(safe-area-inset-bottom,0px))}
  html[data-haut="waldruhe"] body.leiste-an .plus{bottom:calc(86px + env(safe-area-inset-bottom,0px))}
}
html[data-haut="waldruhe"] .leiste button{min-height:54px;color:var(--text-dim)}
html[data-haut="waldruhe"] .leiste button.an{color:var(--text)}
html[data-haut="waldruhe"] .leiste button.an svg{background:var(--wr-minze);border-radius:12px;padding:4px;width:30px;height:30px;box-sizing:border-box;border:1.2px solid color-mix(in srgb,var(--wr-linie) 55%,transparent)}

/* Ringe, Balken, Kalender in den Farben des Looks */
html[data-haut="waldruhe"] .yz-ring-wert{stroke:var(--wr-blatt-d)}
html[data-haut="waldruhe"] .yz-ring-wert.ueber{stroke:var(--wr-orange)}
html[data-haut="waldruhe"] .hv-saeule b{background:var(--wr-blatt-d)}
html[data-haut="waldruhe"] .hv-kal span.kraft{background:var(--wr-orange)}
html[data-haut="waldruhe"] .balken-fort i,html[data-haut="waldruhe"] .vgl i{background:var(--wr-blatt-d)}

/* ── Bausteine der Seelen-Bereiche (Kopf, Durchschnaufen, Gemüt) ──────────────────────────────── */
.wr-bild{display:block;width:100%;height:auto}
.wr-gruss{display:flex;align-items:flex-start;gap:10px;margin:2px 4px 0}
.wr-gruss h2{font-family:var(--wr-serif,Georgia,serif);font-weight:400;font-size:30px;line-height:1.1;margin:0;color:var(--text);text-transform:none;letter-spacing:0}
.wr-gruss p{margin:4px 0 0;color:var(--text-dim);font-size:13.5px}
.wr-gruss .yz-nav{margin-left:auto}
.wr-held{display:grid;grid-template-columns:1fr 1.1fr;gap:12px;align-items:center}
.wr-held .wr-gehirn{max-width:280px;margin:0 auto}
.wr-held h3{font-size:22px;margin:0 0 6px}
@media (max-width:600px){.wr-held{grid-template-columns:1fr}.wr-held .wr-gehirn{max-width:220px}}
.wr-kal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.wr-kal div{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0 4px;border-radius:14px 11px 15px 10px / 11px 15px 10px 14px;border:1.3px solid transparent;cursor:default}
.wr-kal div.heute{border-color:color-mix(in srgb,var(--wr-linie,#3b3631) 60%,transparent);background:var(--wr-karte2,var(--surface2))}
.wr-kal small{font-size:11px;color:var(--text-dim);text-transform:uppercase}
.wr-kal b{font-weight:500;font-size:13.5px;font-variant-numeric:tabular-nums}
.wr-kal .wr-wetter{width:36px;height:36px}
.wr-schlaf{display:grid;grid-template-columns:1fr 1.2fr;gap:12px;align-items:center}
.wr-schlaf h3{font-size:21px;margin:0 0 6px}
@media (max-width:420px){.wr-schlaf{grid-template-columns:1fr 1fr}}
.wr-notizen{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.wr-notiz{min-height:116px;padding:12px;background:var(--wr-minze,var(--surface2));border:1.3px solid color-mix(in srgb,var(--wr-linie,#3b3631) 55%,transparent);
  border-radius:4px 16px 5px 14px / 14px 5px 16px 4px;font-size:12.5px;line-height:1.4;position:relative}
.wr-notiz b{display:block;font-family:var(--wr-serif,Georgia,serif);font-weight:400;font-size:14px;margin-bottom:4px}
.wr-notiz::after{content:'';position:absolute;right:-1px;bottom:-1px;width:18px;height:18px;background:linear-gradient(135deg,transparent 50%,color-mix(in srgb,var(--wr-linie,#3b3631) 18%,var(--surface)) 50%);border-radius:0 0 10px 0}
.wr-notiz.neu{display:flex;align-items:center;justify-content:center;background:transparent;cursor:pointer;font-size:30px;color:var(--text-dim)}
.wr-notiz.neu:hover{border-color:var(--primary);color:var(--primary)}
.wr-aufgaben{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.wr-aufgabe{position:relative;min-height:84px;padding:12px 14px;text-align:left;cursor:pointer;font:inherit;color:var(--text);background:var(--wr-karte,var(--surface));
  border:1.3px solid color-mix(in srgb,var(--wr-linie,#3b3631) 55%,transparent);border-radius:16px 22px 14px 24px / 22px 14px 24px 16px;overflow:hidden}
.wr-aufgabe:hover{border-color:var(--primary)}
.wr-aufgabe b{font-family:var(--wr-serif,Georgia,serif);font-weight:400;font-size:15.5px;display:block;hyphens:auto;overflow-wrap:anywhere}
@media (max-width:420px){.wr-aufgabe b{font-size:14px}.wr-aufgabe{padding:11px 11px}}
.wr-aufgabe small{color:var(--text-dim);display:block;margin-top:2px;max-width:70%}
.wr-aufgabe .wr-ecke-sym{position:absolute;right:10px;bottom:8px;color:var(--wr-blatt-d,var(--primary));opacity:.85}
.wr-zweig{width:64px;height:64px}
/* Durchschnaufen wie „Your Tasks“: Kärtchen nebeneinander, auch am Handy zwei */
html[data-haut="waldruhe"] .uebungen{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
html[data-haut="waldruhe"] .ueb{padding:14px}
html[data-haut="waldruhe"] .ueb .sym{background:var(--wr-minze);color:var(--wr-blatt-d);border:1.2px solid color-mix(in srgb,var(--wr-linie) 40%,transparent);border-radius:14px 10px 15px 9px / 10px 15px 9px 14px}
html[data-haut="waldruhe"] .ueb p{font-size:12.5px}
html[data-haut="waldruhe"] .ueb .fuss{flex-wrap:wrap;gap:4px}