/* Hoyshoyahouse — design system
   Light, plant-led, a little playful (G-04/G-05). One signature: the "leaf corner"
   radius on photos and cards. Body text 17.5px (NF-03), strong contrasts (NF-04). */

@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces.89d06ba6eee3.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-italic.072a3d16a166.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }
/* "Hoya Sans" = Atkinson Hyperlegible with a plain zero (Sandra: keine durchgestrichene 0) — built by tools/zero_ohne_strich.py */
@font-face { font-family: "Hoya Sans"; src: url("../fonts/hoya-sans-400.53f08d001c2f.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Hoya Sans"; src: url("../fonts/hoya-sans-700.6b69ff789584.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Hoya Sans"; src: url("../fonts/hoya-sans-400i.a7d375cf16c5.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

/* Light or dark, as the phone is set (Sandra, 22.10.2026; dark colours at the end of this file). Until then „only light":
   phone browsers darkened the whole page, photos included, by themselves (12.10.2026) – a page with a dark design of
   its own is left alone, and our dark design never touches the photos. */
:root { color-scheme: light dark; }
:root {
  --bg: #FBF8FD;
  --surface: #FFFFFF;
  --ink: #2A2333;
  --muted: #6B6376;
  --line: #E9E2F1;
  --line-strong: #D6CCE3;

  --rose: #F6CBDB;
  --rose-soft: #FBE7EE;
  --rose-deep: #A83B63;
  --lav: #DDD2F4;
  --lav-soft: #F0EAFA;
  --lav-deep: #6347AD;
  --lav-ink: #4E3790;
  --pink-lila: #A63A93;      /* Sandra (18.09.2026): Buttons pink-lila statt blau-lila */
  --pink-lila-ink: #86287A;
  --teal: #C3ECE5;
  --teal-soft: #E4F6F3;
  --teal-deep: #146F68;

  --leaf: 22px 22px 22px 6px;
  --leaf-sm: 14px 14px 14px 4px;
  --r: 14px;
  --shadow: 0 1px 2px rgba(42,35,51,.05), 0 8px 24px -12px rgba(99,71,173,.18);

  --display: "Fraunces", Georgia, serif;
  --body: "Hoya Sans", "Helvetica Neue", Arial, sans-serif;

  --nav-h: 64px;
  --pad: 20px;
}
@media (min-width: 720px) { :root { --pad: 32px; } }
@media (min-width: 1100px) { :root { --pad: 40px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17.5px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
}
@media (min-width: 900px) { body { padding-bottom: 0; } }

img { max-width: 100%; display: block; }
a { color: var(--lav-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--lav-ink); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--lav-deep); outline-offset: 2px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.15; font-weight: 700; letter-spacing: -.01em; }
h1 { font-family: var(--display); font-weight: 600; font-size: clamp(2rem, 5.5vw, 3.2rem); font-variation-settings: "SOFT" 50, "opsz" 72; letter-spacing: -.02em; line-height: 1.08; }
h2 { font-size: clamp(1.35rem, 3vw, 1.75rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
.lead { font-size: 1.15rem; color: var(--muted); max-width: 60ch; }
.muted { color: var(--muted); }
.small { font-size: .92rem; }
.num { font-variant-numeric: tabular-nums; }
.ic { flex: none; vertical-align: -4px; }

/* layout ------------------------------------------------------------------ */
.wrap { padding-left: var(--pad); padding-right: var(--pad); }
.section { padding-top: 36px; padding-bottom: 36px; }
.section + .section { padding-top: 8px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.section-head h2 { margin: 0; }
.section-head a { font-weight: 700; text-decoration: none; }

/* header / nav ------------------------------------------------------------ */
.top {
  position: sticky; top: 0; z-index: 40;
  background: rgba(251,248,253,.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.top-in { display: flex; align-items: center; gap: 18px; min-height: 62px; }
.brand { font-family: var(--display); font-weight: 600; font-size: 1.45rem; letter-spacing: -.02em; text-decoration: none; color: var(--ink); display: flex; align-items: baseline; gap: 10px; font-variation-settings: "SOFT" 50, "opsz" 24; }
/* Fabian (03.10.2026): „Sandra Hoy(a)" stands on the baseline of the wordmark (centred it looked like floating); the mark stays centred */
.brand small { font-family: var(--body); font-size: .8rem; color: var(--muted); font-weight: 400; letter-spacing: 0; display: none; }
@media (min-width: 500px) { .brand small { display: inline; } }
.brand-mark { width: 30px; height: 30px; align-self: center; border-radius: 50% 50% 50% 4px; background: linear-gradient(135deg, var(--rose) 0%, var(--lav) 55%, var(--teal) 100%); flex: none; }
.top-nav { display: none; margin-left: auto; gap: 4px; }
.top-nav a { padding: 8px 12px; border-radius: 999px; text-decoration: none; color: var(--ink); font-weight: 700; font-size: .98rem; }
.top-nav a:hover, .top-nav a[aria-current] { background: var(--lav-soft); color: var(--lav-ink); }
.top-cta { margin-left: auto; }
@media (min-width: 900px) { .top-nav { display: flex; } .top-cta { margin-left: 0; } }

.bottom {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--surface); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  height: calc(var(--nav-h) + env(safe-area-inset-bottom));
}
.bottom a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none; color: var(--muted); font-size: .76rem; font-weight: 700; position: relative; }
.bottom a[aria-current] { color: var(--lav-deep); }
.bottom a[aria-current]::before { content: ""; position: absolute; top: 0; width: 36px; height: 3px; border-radius: 0 0 4px 4px; background: var(--lav-deep); }
.badge { position: absolute; top: 7px; left: calc(50% + 6px); min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--rose-deep); color: #fff; font-size: .74rem; line-height: 20px; text-align: center; }
@media (min-width: 900px) { .bottom { display: none; } }

/* buttons ----------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px; border-radius: 999px; border: 2px solid transparent;
  font-weight: 700; font-size: 1.02rem; text-decoration: none; cursor: pointer; line-height: 1.2;
  background: var(--pink-lila); color: #fff; transition: transform .08s ease, background .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: var(--pink-lila-ink); color: #fff; }
.btn:active { transform: scale(.985); }
.btn-wa { background: #1E8A5A; }
.btn-wa:hover { background: #16704A; }
.btn-teal { background: var(--teal-deep); }
.btn-teal:hover { background: #0F5A54; }
.btn-ghost { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.btn-ghost:hover { background: var(--lav-soft); border-color: var(--lav); color: var(--lav-ink); }
.btn-soft { background: var(--lav-soft); color: var(--lav-ink); }
.btn-soft:hover { background: var(--lav); color: var(--lav-ink); }
.btn-rose { background: var(--rose-soft); color: var(--rose-deep); }
.btn-rose:hover { background: var(--rose); color: var(--rose-deep); }
.btn-sm { min-height: 42px; padding: 0 16px; font-size: .95rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* chips (filters, traits) ------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px;
  background: var(--surface); border: 1.5px solid var(--line-strong); color: var(--ink); font-weight: 700; font-size: .95rem;
  text-decoration: none; cursor: pointer;
}
.chip:hover { border-color: var(--lav-deep); color: var(--lav-ink); }
.chip.on { background: var(--pink-lila); border-color: var(--pink-lila); color: #fff; }
.chip.on:hover { background: var(--pink-lila-ink); color: #fff; }
.chip-teal.on { background: var(--teal-deep); border-color: var(--teal-deep); }
.chip .ic { opacity: .8; }
.chip-x { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.25); display: inline-flex; align-items: center; justify-content: center; margin-right: -6px; }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px; font-size: .86rem; font-weight: 700; line-height: 1.4; white-space: nowrap; }
.pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .9; }
.pill-teal { background: var(--teal-soft); color: var(--teal-deep); }
.pill-lav { background: var(--lav-soft); color: var(--lav-ink); }
.pill-rose { background: var(--rose-soft); color: var(--rose-deep); }
.pill-grey { background: #F0EDF3; color: var(--muted); }
.pill-plain::before { display: none; }

/* cards & photos ---------------------------------------------------------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--leaf); box-shadow: var(--shadow); overflow: hidden; }
.photo { position: relative; background: linear-gradient(160deg, var(--lav-soft), var(--teal-soft)); border-radius: var(--leaf); overflow: hidden; aspect-ratio: 4 / 5; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo.sq { aspect-ratio: 1; }
.photo.wide { aspect-ratio: 16 / 10; }
.photo-wait { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: .9rem; text-align: center; padding: 12px; }
.photo-wait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%); animation: shimmer 1.8s infinite; }
@keyframes shimmer { from { transform: translateX(-100%);} to { transform: translateX(100%);} }
.photo-tag { position: absolute; left: 10px; top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.photo .pill { backdrop-filter: blur(6px); background: rgba(255,255,255,.88); }

.grid { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
@media (min-width: 1000px) { .grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1400px) { .grid { grid-template-columns: repeat(5, 1fr); } }
/* long lists: where the next part of the cards appears (katalog/_karten.html). The invisible strip reaches
   1200 px up into the list, so loading starts before the visitor gets to the end. */
.mehr { grid-column: 1 / -1; position: relative; display: flex; justify-content: center; padding: 8px 0 4px; }
.mehr-vorlauf { position: absolute; left: 0; bottom: 0; width: 1px; height: 1200px; pointer-events: none; }
.mehr.htmx-request .btn { opacity: .6; }
.grid-3 { grid-template-columns: 1fr; }
@media (min-width: 720px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.a-card { text-decoration: none; color: inherit; display: block; }
.a-card .photo { margin-bottom: 10px; }
.a-card h3 { font-size: 1.02rem; margin: 0 0 2px; line-height: 1.25; }
.a-card .meta { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.a-card .preis { font-weight: 700; font-size: 1.1rem; }
.a-card .typ { font-size: .88rem; color: var(--muted); }
.a-card:hover h3 { color: var(--lav-deep); }

/* tiles on the start page (F-NAV-05) --------------------------------------- */
.tiles { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .tiles { grid-template-columns: repeat(5, 1fr); } }
.tile {
  display: flex; flex-direction: column; justify-content: space-between; gap: 14px; min-height: 118px; padding: 16px;
  border-radius: var(--leaf); text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line);
  transition: transform .12s ease, box-shadow .12s ease;
}
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: var(--ink); }
.tile .ic { color: var(--lav-deep); }
.tile strong { font-size: 1.05rem; line-height: 1.2; }
.tile span { font-size: .9rem; color: var(--muted); }
.tile-rose { background: var(--rose-soft); border-color: transparent; } .tile-rose .ic { color: var(--rose-deep); }
.tile-lav { background: var(--lav-soft); border-color: transparent; }
.tile-teal { background: var(--teal-soft); border-color: transparent; } .tile-teal .ic { color: var(--teal-deep); }

/* hero -------------------------------------------------------------------- */
.hero { padding-top: 28px; padding-bottom: 28px; display: grid; gap: 24px; align-items: center; }
@media (min-width: 900px) { .hero { grid-template-columns: 1.1fr .9fr; gap: 48px; padding-top: 48px; padding-bottom: 40px; } }
.hero h1 { margin-bottom: 14px; }
.hero h1 em { font-style: italic; font-weight: 500; color: var(--lav-deep); }
.hero .lead { margin-bottom: 22px; }
.hero-photo { border-radius: 48% 52% 46% 54% / 52% 44% 56% 48%; overflow: hidden; aspect-ratio: 1; max-width: 440px; margin: 0 auto; background: linear-gradient(160deg, var(--rose-soft), var(--lav-soft) 60%, var(--teal-soft)); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-photo.empty { display: flex; align-items: center; justify-content: center; color: var(--lav-deep); }

.notice { display: flex; gap: 12px; align-items: center; padding: 14px 18px; border-radius: var(--leaf-sm); background: var(--rose-soft); color: var(--rose-deep); font-weight: 700; }
.notice .ic { color: var(--rose-deep); }
.notice a { color: inherit; }

/* steckbrief ----------------------------------------------------------------- */
.sb-head { display: grid; gap: 20px; padding-top: 20px; }
@media (min-width: 900px) { .sb-head { grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; } }
.sb-photos { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }
.sb-photos .photo:first-child { grid-row: span 2; aspect-ratio: 4/5; }
.sb-photos .photo:not(:first-child) { aspect-ratio: 1; }
.sb-status { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 16px; }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; font-weight: 700; color: var(--muted); }

.traits { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .traits { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .traits { grid-template-columns: repeat(3, 1fr); } }
.trait { display: flex; gap: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--leaf-sm); }
.trait > .ic { color: var(--lav-deep); margin-top: 2px; }
.trait b { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 2px; }
.trait span { display: block; }
.trait small { display: block; color: var(--muted); font-size: .9rem; }
.scale { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
.scale i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.scale i.on { background: var(--teal-deep); }

details.info { display: inline; }
.info summary { list-style: none; cursor: help; display: inline-flex; align-items: center; color: var(--lav-deep); }
.info summary::-webkit-details-marker { display: none; }
.info[open] summary { color: var(--lav-ink); }
.info .tip { display: block; margin-top: 6px; padding: 10px 12px; background: var(--lav-soft); border-radius: 10px; font-size: .95rem; color: var(--ink); }

.offer-list { display: grid; gap: 14px; }
@media (min-width: 720px) { .offer-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .offer-list { grid-template-columns: repeat(3, 1fr); } }
.offer { display: grid; grid-template-columns: 120px 1fr; gap: 14px; padding: 12px; }
.offer .photo { aspect-ratio: 1; border-radius: var(--leaf-sm); }
.offer h3 { font-size: 1.02rem; margin: 0 0 4px; }
.offer .preis { font-size: 1.25rem; font-weight: 700; }
.offer .facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.offer .btn-row { gap: 8px; }
.offer .offer-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px; margin: 0 0 10px; }
.offer .offer-thumbs .photo { aspect-ratio: 1; border-radius: 8px; overflow: hidden; }

/* angebot detail ------------------------------------------------------------- */
.ad { display: grid; gap: 22px; padding-top: 16px; }
@media (min-width: 900px) { .ad { grid-template-columns: 1.1fr .9fr; gap: 40px; } }
.gallery { display: grid; gap: 10px; }
.gallery .photo { aspect-ratio: 4/5; }
.gallery .thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.gallery .thumbs .photo { aspect-ratio: 1; border-radius: 10px; cursor: pointer; border: 2px solid transparent; }
.gallery .thumbs .photo.on { border-color: var(--lav-deep); }
.price-big { font-size: 2rem; font-weight: 700; line-height: 1; margin: 6px 0 4px; }
.facts-table { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 14px 0; }
.facts-table dt { color: var(--muted); }
.facts-table dd { margin: 0; font-weight: 700; }
.hint { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--leaf-sm); background: var(--lav-soft); color: var(--lav-ink); font-size: .97rem; }
.hint.teal { background: var(--teal-soft); color: var(--teal-deep); }
.hint.rose { background: var(--rose-soft); color: var(--rose-deep); }
.hint .ic { flex: none; margin-top: 2px; }
.sticky-cta { position: sticky; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); z-index: 30; padding: 10px 0; margin: 6px calc(-1 * var(--pad)) 0; padding-left: var(--pad); padding-right: var(--pad); background: linear-gradient(to top, var(--bg) 75%, transparent); }
@media (min-width: 900px) { .sticky-cta { position: static; margin: 12px 0 0; padding: 0; background: none; } }

/* filter sheet ------------------------------------------------------------- */
.searchbar { display: flex; gap: 10px; align-items: center; }
.searchbar .field { flex: 1; display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: 999px; padding: 0 16px; min-height: 52px; }
.searchbar input { flex: 1; width: 0; border: 0; background: transparent; font: inherit; min-width: 0; outline: none; } /* width 0: the input's default width pushed the Pflege lists past 360 px */
.searchbar .ic { color: var(--muted); }
/* the grey is for the magnifier in the field – on the filled „Suchen" button and the open filter chip it was grey on pink-lila */
.searchbar .btn .ic, .searchbar .chip.on .ic { color: inherit; }
.filter-summary { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.sheet { background: var(--surface); border: 1px solid var(--line); border-radius: var(--leaf); padding: 18px; margin-top: 14px; }
.sheet h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 18px 0 8px; }
.sheet h3:first-child { margin-top: 0; }
.sheet label.chip { user-select: none; }
.sheet label.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.sheet label.chip:has(input:checked) { background: var(--pink-lila); border-color: var(--pink-lila); color: #fff; }
.price-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.price-row input { width: 96px; min-height: 44px; padding: 0 12px; border: 1.5px solid var(--line-strong); border-radius: 10px; font: inherit; }
.sheet-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.count { color: var(--muted); font-weight: 700; }

/* forms -------------------------------------------------------------------- */
.form { display: grid; gap: 16px; }
.field-g label, .field-g .lbl { display: block; font-weight: 700; margin-bottom: 6px; }
.field-g input[type=text], .field-g input[type=email], .field-g input[type=number], .field-g input[type=password], .field-g input[type=url], .field-g textarea, .field-g select {
  width: 100%; min-height: 52px; padding: 12px 14px; border: 1.5px solid var(--line-strong); border-radius: 12px; font: inherit; background: var(--surface); color: var(--ink);
}
.field-g textarea { min-height: 80px; resize: vertical; }
.field-g input:focus, .field-g textarea:focus { border-color: var(--lav-deep); outline: none; box-shadow: 0 0 0 3px var(--lav-soft); }
.field-g .help { font-size: .9rem; color: var(--muted); margin-top: 4px; }
.field-g .err { color: var(--rose-deep); font-weight: 700; margin-top: 4px; }
.check { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1.5px solid var(--line-strong); border-radius: 12px; background: var(--surface); cursor: pointer; }
.check input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--lav-deep); flex: none; }
.check:has(input:checked) { border-color: var(--lav-deep); background: var(--lav-soft); }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seg label { display: flex; align-items: center; justify-content: center; min-height: 56px; border: 2px solid var(--line-strong); border-radius: 14px; font-weight: 700; cursor: pointer; background: var(--surface); }
.seg input { position: absolute; opacity: 0; }
.seg label:has(input:checked) { border-color: var(--lav-deep); background: var(--lav-soft); color: var(--lav-ink); }
.errorlist { margin: 0 0 8px; padding: 12px 14px; list-style: none; background: var(--rose-soft); color: var(--rose-deep); border-radius: 12px; font-weight: 700; }
.hp { position: absolute; left: -9999px; }

/* messages ------------------------------------------------------------------ */
.msgs { position: fixed; top: 72px; left: var(--pad); right: var(--pad); z-index: 60; display: grid; gap: 8px; pointer-events: none; }
.msg { pointer-events: auto; padding: 12px 16px; border-radius: 12px; background: var(--ink); color: #fff; font-weight: 700; box-shadow: var(--shadow); display: flex; gap: 10px; align-items: center; }
.msg.success { background: var(--teal-deep); }
.msg.info { background: var(--pink-lila); }
.msg.error { background: var(--rose-deep); }

/* footer ------------------------------------------------------------------- */
.foot { margin-top: 48px; padding: 32px var(--pad) 32px; border-top: 1px solid var(--line); background: var(--surface); }
.foot-in { display: grid; gap: 20px; }
@media (min-width: 720px) { .foot-in { grid-template-columns: 1.2fr 1fr 1fr; } }
.foot h4 { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 8px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.foot a { text-decoration: none; color: var(--ink); }
.foot a:hover { color: var(--lav-deep); }

/* anfrageliste ------------------------------------------------------------- */
.list-row { display: grid; grid-template-columns: 72px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.list-row .photo { aspect-ratio: 1; border-radius: 10px; }
.list-row b { display: block; }
.list-row .x { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.list-row .x:hover { border-color: var(--rose-deep); color: var(--rose-deep); }
.sum { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; font-weight: 700; font-size: 1.1rem; }
.empty { padding: 36px 20px; text-align: center; border: 2px dashed var(--line-strong); border-radius: var(--leaf); color: var(--muted); }
.empty .ic { color: var(--lav); margin-bottom: 8px; }

/* prose pages ---------------------------------------------------------------- */
.prose { max-width: 72ch; }
.prose h3 { margin-top: 1.6em; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .3em; }

/* youtube / testimonials ----------------------------------------------------- */
.video { display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: center; text-decoration: none; color: inherit; padding: 12px; }
.video .photo { aspect-ratio: 16/10; border-radius: var(--leaf-sm); }
.video .play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(42,35,51,.25); }
.video b { display: block; margin-bottom: 2px; }
.video small { color: var(--muted); display: block; }
.quote { padding: 18px; }
.quote p { font-size: 1.05rem; margin-bottom: 10px; }
.quote footer { color: var(--muted); font-weight: 700; }

/* pflege (mobile back office) -------------------------------------------- */
.pf-top { display: flex; align-items: center; gap: 12px; min-height: 58px; }
.pf-top h1 { font-family: var(--body); font-size: 1.25rem; margin: 0; font-variation-settings: normal; letter-spacing: 0; font-weight: 700; }
.pf-top .spacer { flex: 1; }
.pf-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; }
.row { display: grid; grid-template-columns: 72px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: start; }
.row .photo { aspect-ratio: 1; border-radius: 10px; }
.row h3 { margin: 0; font-size: 1.02rem; }
.row .sub { color: var(--muted); font-size: .92rem; display: flex; gap: 8px; flex-wrap: wrap; }
.row .acts { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.row.done { opacity: .55; }
.row .undo { background: var(--teal-soft); color: var(--teal-deep); padding: 10px 14px; border-radius: 10px; display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; font-weight: 700; }
.fab { position: fixed; right: 16px; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 16px); z-index: 35; box-shadow: 0 10px 30px -8px rgba(99,71,173,.5); }
@media (min-width: 900px) { .fab { bottom: 24px; } }
.thumbs-edit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.thumbs-edit .photo { aspect-ratio: 1; border-radius: 10px; }
.thumbs-edit .t-acts { display: flex; justify-content: space-between; margin-top: 6px; }
.thumbs-edit button { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.thumbs-edit button.on { background: var(--pink-lila); border-color: var(--pink-lila); color: #fff; }
.upload { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 120px; border: 2px dashed var(--lav); border-radius: var(--leaf); background: var(--lav-soft); color: var(--lav-ink); font-weight: 700; cursor: pointer; text-align: center; padding: 16px; }
.upload input { position: absolute; opacity: 0; width: 0; height: 0; }
.upload .ic { color: var(--lav-deep); }
.login { max-width: 420px; margin: 40px auto; }
.banner { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: var(--leaf-sm); background: var(--teal-soft); color: var(--teal-deep); font-weight: 700; margin-bottom: 14px; }
.banner .btn { margin-left: auto; }

/* print: the page chrome stays off paper (the profile sheet itself is A4 landscape, see druck.css) --------- */
@media print {
  body { background: #fff; padding: 0; }
  .top, .bottom, .foot, .no-print, .msgs { display: none !important; }
}

/* --- mobile refinements after first review ------------------------------- */
.btn { white-space: nowrap; }
@media (max-width: 520px) {
  .top-cta span { display: none; }
  .top-cta { padding: 0 14px; }
  .hero-photo.empty { display: none; }
  .pf-top h1 { font-size: 1.1rem; }
  .pf-top .btn-sm span { display: none; }
}
/* 20.10.2026: „Meine Angebote" carries four symbols top right (Statistik, Verwaltung, Abmelden, Webseite) – at 360 px
   they only fit a little closer together */
@media (max-width: 400px) {
  .pf-top { gap: 6px; }
  .pf-top .btn-sm { padding: 0 9px; }
}
.a-card .pill { white-space: normal; font-size: .8rem; line-height: 1.3; padding: 3px 9px; }
.sb-photos:has(> :nth-child(2):last-child) { grid-template-columns: 1fr 1fr; }
.sb-photos:has(> :nth-child(2):last-child) .photo:first-child { grid-row: auto; }
.sb-photos:has(> :nth-child(2):last-child) .photo { aspect-ratio: 1; }
.row .acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.row .acts .btn { width: 100%; padding: 0 10px; }
.row .acts .btn-breit { grid-column: 1 / -1; }
main.wrap { padding-bottom: 96px; }
.searchbar input::placeholder { color: var(--muted); }
.sb-photos:has(> :only-child) { grid-template-columns: 1fr; max-width: 520px; }
.sb-photos:has(> :only-child) .photo { grid-row: auto; aspect-ratio: 4 / 5; }

/* --- Sandras Wunschliste (07.09.2026) ------------------------------------- */
/* Mauszeiger: Blatt als Standard, Hoyablüte über Klickbarem — nur mit echter Maus */
@media (pointer: fine) {
  /* Blatt ebenfalls als PNG – SVG-Cursor werden in manchen Browsern gar nicht gezeichnet */
  body { cursor: url("../img/cursor-leaf.d80deead162c.png") 4 28, auto; }
  body { cursor: -webkit-image-set(url("../img/cursor-leaf.d80deead162c.png") 1x, url("../img/cursor-leaf@2x.c8588133f6e4.png") 2x) 4 28, auto; }
  body { cursor: image-set(url("../img/cursor-leaf.d80deead162c.png") 1x, url("../img/cursor-leaf@2x.c8588133f6e4.png") 2x) 4 28, auto; }
  /* PNG statt SVG: SVG-Cursor werden nicht in jedem Browser gezeichnet (Sandra sah kein Blütensymbol) */
  a, button, label.chip, label.check, .tile, .tab, summary, input[type=radio], input[type=checkbox], select, .a-card .act, .photo > a, .thumbs .photo {
    cursor: url("../img/cursor-bluete.e5d6f4a333dd.png") 16 16, pointer;
    cursor: -webkit-image-set(url("../img/cursor-bluete.e5d6f4a333dd.png") 1x, url("../img/cursor-bluete@2x.a815fc65c680.png") 2x) 16 16, pointer;
    cursor: image-set(url("../img/cursor-bluete.e5d6f4a333dd.png") 1x, url("../img/cursor-bluete@2x.a815fc65c680.png") 2x) 16 16, pointer;
  }
}

/* Karten: Blatt (merken) + Teilen unten rechts am Bild, wie bei Amazon */
.a-card { position: relative; }
.a-card .photo > a { display: block; height: 100%; }
.a-card h3 a { text-decoration: none; color: inherit; }
.a-acts { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 6px; }
.act {
  width: 40px; height: 40px; border-radius: 50%; border: 0; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.92); color: var(--ink); backdrop-filter: blur(6px); box-shadow: 0 2px 8px rgba(42,35,51,.18); cursor: pointer;
}
.act:hover { color: var(--lav-deep); }
.act.on { background: var(--teal-deep); color: #fff; }
.act.on svg { fill: currentColor; fill-opacity: .35; }
.photo .a-acts { z-index: 2; }

/* Bildunterschriften: gut lesbar, nicht klein */
.figcap { font-size: 1rem; color: var(--ink); margin: 8px 0 4px; line-height: 1.4; }
.a-card .figcap { margin: 0 0 4px; font-size: .95rem; color: var(--muted); }

/* Symbolskalen 1–3 (Tropfen, Sonnen, …) */
.symbole { display: inline-flex; gap: 1px; margin-right: 8px; vertical-align: middle; }
.symbole i { display: inline-flex; color: var(--line-strong); }
.symbole i.on { color: var(--teal-deep); }
.symbole i.on svg { fill: currentColor; fill-opacity: .18; }
.trait span { display: flex; align-items: center; flex-wrap: wrap; }
.trait b { display: flex; align-items: center; gap: 4px; }
.kurzmerkmale { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 4px 0 14px; }
.km { display: inline-flex; align-items: center; font-weight: 700; font-size: .95rem; }

/* Steckbrief: Reiter Mutterpflanze · Nahaufnahme · Blüte · Verfügbar */
.sb-head { grid-template-columns: 1fr; }
@media (min-width: 900px) { .sb-head { grid-template-columns: .9fr 1.1fr; } .sb-head > div:first-child { order: 0; } .sb-tabs { order: 1; } }
.sb-status .pill { border: 0; font: inherit; font-size: .86rem; font-weight: 700; cursor: pointer; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.tab {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px;
  background: var(--surface); border: 1.5px solid var(--line-strong); color: var(--ink); font-weight: 700; text-decoration: none; font-size: .98rem;
}
.tab:hover { border-color: var(--lav-deep); color: var(--lav-ink); }
.tab.on { background: var(--pink-lila); border-color: var(--pink-lila); color: #fff; }
.tab-teal.on { background: var(--teal-deep); border-color: var(--teal-deep); }
.tab-panel { margin: 0; }
.tab-panel .photo { aspect-ratio: 4 / 5; max-width: 620px; }
.tab-panel .offer-list { grid-template-columns: 1fr; }
@media (min-width: 1200px) { .tab-panel .offer-list { grid-template-columns: repeat(2, 1fr); } }
.tab-panel .section-head { margin-bottom: 12px; }
.tab-panel h2 { font-size: 1.2rem; display: flex; align-items: center; gap: 6px; }

/* „i“ hinter Fachbegriffen */
.info.block { display: block; width: 100%; margin-top: 4px; }
.info.block summary { gap: 6px; font-weight: 700; font-size: .92rem; }
.info .tip > div { margin-bottom: 6px; }
.chip details.info { margin-left: 2px; }
.chip details.info summary { color: inherit; opacity: .85; }
.sheet h3 { display: flex; align-items: center; gap: 6px; }
.facts-table dt { display: flex; align-items: center; gap: 4px; }
.info .tip b { color: var(--lav-ink); }

/* WhatsApp-Knopf unten rechts (Startseite) */
.wa-fab {
  position: fixed; right: 16px; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 16px); z-index: 35;
  width: 60px; height: 60px; border-radius: 50%; background: #1E8A5A; color: #fff; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px -8px rgba(30,138,90,.6);
}
.wa-fab:hover { background: #16704A; color: #fff; }
@media (min-width: 900px) { .wa-fab { bottom: 24px; right: 24px; } }

/* Aktionen */
.aktionen { display: grid; gap: 16px; }
@media (min-width: 720px) { .aktionen { grid-template-columns: repeat(2, 1fr); } }
.aktion { display: block; }
.aktion-body { padding: 22px; }
.aktion-body h2 { margin-bottom: 4px; }
.aktion-kurz { display: flex; gap: 14px; align-items: flex-start; padding: 18px; text-decoration: none; color: inherit; background: var(--rose-soft); border-color: transparent; }
.aktion-kurz .ic { color: var(--rose-deep); margin-top: 2px; }
.aktion-kurz h3 { margin: 0 0 4px; }
.aktion-kurz:hover h3 { color: var(--rose-deep); }

/* Versand: Hinweise gestapelt, Kontaktwege */
.hint-stack { display: grid; gap: 10px; }
@media (min-width: 900px) { .hint-stack { grid-template-columns: repeat(2, 1fr); } }
.kontakt-wege { display: grid; gap: 10px; margin-top: 22px; }
@media (min-width: 720px) { .kontakt-wege { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .kontakt-wege { grid-template-columns: repeat(3, 1fr); } }
.weg { display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: var(--leaf-sm); background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.weg .ic { color: var(--lav-deep); }
.weg b { display: block; }
.weg small { color: var(--muted); display: block; font-size: .92rem; }
.weg:hover { border-color: var(--lav); box-shadow: var(--shadow); color: var(--ink); }
.weg-wa { background: #E6F5EC; border-color: transparent; } .weg-wa .ic { color: #1E8A5A; }

/* Pflege: Steckbrief-Editor */
.foto-slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 720px) { .foto-slots { grid-template-columns: repeat(4, 1fr); } }
.upload-photo { display: block; cursor: pointer; border: 2px dashed var(--lav); background: var(--lav-soft); }
.upload-photo input { position: absolute; opacity: 0; width: 0; height: 0; }
.upload-over { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--lav-ink); font-weight: 700; font-size: .85rem; }
.upload-over.neu { background: var(--teal-deep); color: #fff; }
.foto-slot .field-g { margin-top: 6px; }
.foto-slot .field-g input { min-height: 44px; font-size: .95rem; }
.sheet label.chip, .form label.chip { position: relative; }
.form label.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.form label.chip:has(input:checked) { background: var(--pink-lila); border-color: var(--pink-lila); color: #fff; }
.t-cap { width: 100%; margin-top: 6px; min-height: 40px; padding: 0 10px; border: 1.5px solid var(--line-strong); border-radius: 10px; font: inherit; font-size: .92rem; }
.pf-tabs { row-gap: 8px; }
/* review pass 1 (390 px): nothing gets cut, prices never wrap */
.a-card .meta { flex-wrap: wrap; row-gap: 2px; }
.a-card .preis { white-space: nowrap; }
.a-card .typ { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.offer .facts .pill { white-space: normal; text-align: left; line-height: 1.3; }
@media (max-width: 560px) {
  .offer { grid-template-columns: 96px 1fr; }
  .offer .btn-row { display: grid; grid-template-columns: 1fr; }
  .offer .btn-row .btn { width: 100%; }
}
.info { white-space: normal; }
.info summary { vertical-align: -3px; }
.hint .info summary, .facts-table .info summary, .sheet .info summary { margin-left: 2px; }
.hint > div { min-width: 0; }
.symbole i { color: var(--line-strong); opacity: .75; }
.symbole i.on { color: var(--teal-deep); opacity: 1; }
.symbole i.on svg { fill: currentColor; fill-opacity: .4; }
@media (min-width: 900px) { .tab-panel .photo { max-width: 520px; } }

/* --- Sandras 3. Runde (08.09.2026) ---------------------------------------- */
/* Fotos immer ganz zeigen; der Rand wird mit dem weichgezeichneten Bild selbst
   aufgefüllt (--fill wird in app.js bzw. per Alpine :style gesetzt). */
.photo, .hero-photo { position: relative; }
.photo img, .hero-photo img { object-fit: contain; position: relative; z-index: 1; }
.photo::before, .hero-photo::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--fill); background-size: cover; background-position: center;
  filter: blur(var(--fill-blur, 18px)) saturate(1.06);
  transform: scale(1.35);
}
.hero-photo::before { --fill-blur: 26px; }
/* alles, was auf dem Foto liegt, bleibt über dem Bild (das img hat jetzt z-index 1) */
.photo-tag, .photo-wait, .photo .a-acts, .photo .play, .video .play, .upload-over { z-index: 2; }
/* kleine Flächen brauchen weniger Weichzeichnung, sonst wird es nur Farbe */
.thumbs .photo, .offer-thumbs .photo, .list-row .photo { --fill-blur: 7px; }

/* Suche auf der Startseite (F-SUC-01 auch von hier aus) */
.start-suche { margin-top: 22px; max-width: 560px; }
.start-suche .searchbar .field { background: var(--surface); }
.start-suche .btn { min-height: 52px; }
.start-suche .hinweis { margin: 8px 0 0; font-size: .92rem; color: var(--muted); }
@media (max-width: 520px) { .start-suche .btn span { display: none; } .start-suche .btn { padding: 0 16px; } }
.linkbtn { border: 0; background: none; padding: 0; font: inherit; color: var(--lav-deep); text-decoration: underline; text-underline-offset: 2px; }
.linkbtn:hover { color: var(--lav-ink); }

/* --- Sandras 4. Runde (15.09.2026) ---------------------------------------- */
/* Symbolskalen je Eigenschaft in eigener Farbe: gefüllt = kräftige Fläche mit dunkler
   Kontur, leer = nur graue Kontur — auf einen Blick unterscheidbar. */
.sym-wasser { --sym: #7CC8F5; --sym-ink: #135F9C; }
.sym-licht  { --sym: #FFD23F; --sym-ink: #9A5B00; }
.sym-blatt  { --sym: #8ED48A; --sym-ink: #2A7A2E; }
.sym-bluete { --sym: #F7A8C6; --sym-ink: #A83B63; }
.sym-stern  { --sym: #C9B6F2; --sym-ink: #5A3FA0; }
.sym-wurzel { --sym: #DDB78E; --sym-ink: #7A4A1E; }
.symbole { gap: 2px; }
.symbole i, .symbole i.on { opacity: 1; }
.symbole i { color: #B5ACC2; }
.symbole i svg { stroke-width: 1.6; }
.symbole i.on { color: var(--sym-ink, var(--teal-deep)); }
.symbole i.on svg { fill: var(--sym, var(--teal)); fill-opacity: 1; stroke-width: 2; }
.trait > .ic { color: var(--sym-ink, var(--lav-deep)); fill: var(--sym, transparent); fill-opacity: .55; }
.trait small { margin-top: 2px; }

/* Meine Angebote: Suche über den Reitern, Papierkorb rechts an jeder Zeile */
.pf-suche { margin: 4px 0 0; }
.row { position: relative; }
.row h3, .row .sub { padding-right: 48px; }
.row .del { position: absolute; right: 0; top: 12px; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.row .del:hover { color: var(--rose-deep); border-color: var(--rose-deep); background: var(--rose-soft); }
.row-gone { padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--muted); display: flex; align-items: center; gap: 8px; }

/* Steckbrief-Editor: Angebote zur Sorte oben, mit Knopf zum Anlegen */
.angebote-box { border: 1px solid var(--line); border-radius: var(--leaf-sm); background: var(--surface); padding: 12px 14px; }
.angebote-box .section-head { margin-bottom: 6px; }
.angebote-box h2 { font-size: 1.05rem; }
.mini-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); text-decoration: none; color: inherit; }
.mini-row .photo { aspect-ratio: 1; border-radius: 8px; }
.mini-row .preis { font-weight: 700; white-space: nowrap; }
.mini-row .sub { display: block; color: var(--muted); font-size: .9rem; }

/* --- Sandras 5. Runde (16.09.2026) ---------------------------------------- */
/* Startseite: Pflanzen-Kacheln 4 je Reihe; „Gut zu wissen" (Aktionen, Pflege, Versand)
   als eigene rosé Gruppe mit Überschrift, Symbol links statt oben. */
@media (min-width: 1000px) { .tiles { grid-template-columns: repeat(4, 1fr); } }
.tiles-info { padding-top: 4px; }
.tiles-info .section-head { margin-bottom: 10px; }
.tiles-info .section-head h2 { font-size: 1.15rem; }
.tiles-info .tiles-3 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .tiles-info .tiles-3 { grid-template-columns: repeat(3, 1fr); } }
.tiles-info .tile { min-height: 0; flex-direction: row; align-items: center; gap: 14px; padding: 14px 16px; }

/* Filter: Sterne in den Eignung-Chips (weiß, sobald der Chip gewählt ist) */
.chip-sym .symbole { margin-right: 6px; }
.chip-sym .symbole svg { width: 16px; height: 16px; }
.sheet label.chip:has(input:checked) .symbole i { color: rgba(255,255,255,.6); }
.sheet label.chip:has(input:checked) .symbole i.on { color: #fff; }
.sheet label.chip:has(input:checked) .symbole i.on svg { fill: #fff; }

/* Blütezeit: 12 Monatsfelder in der Blühdauer-Karte */
.monate { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; margin: 6px 0 2px; width: 100%; }
.monate i { font-style: normal; font-size: .64rem; line-height: 1; text-align: center; padding: 6px 0; border-radius: 6px; border: 1px solid #B5ACC2; color: var(--muted); letter-spacing: -.02em; }
.monate i.on { background: var(--sym); border-color: var(--sym-ink); color: var(--sym-ink); font-weight: 700; }
.monate-chips .chip { min-width: 60px; justify-content: center; }

/* Steckbrief-Editor: Slot-Kopf mit Position und Pfeilen, Papierkorb auf dem Foto */
.slot-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.slot-head .pos { width: 24px; height: 24px; border-radius: 50%; background: var(--pink-lila); color: #fff; font-weight: 700; font-size: .85rem; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.slot-head b { flex: 1; font-size: .95rem; min-width: 0; }
.slot-move { display: inline-flex; gap: 4px; }
.slot-move button { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; color: var(--ink); }
.slot-move button:disabled { opacity: .3; cursor: default; }
.slot-bild { position: relative; }
.slot-bild .slot-del { position: absolute; top: 8px; right: 8px; z-index: 3; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: rgba(255,255,255,.95); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.slot-bild .slot-del:hover { color: var(--rose-deep); border-color: var(--rose-deep); }

/* Angebote im Steckbrief-Editor: Papierkorb neben dem Preis */
.mini-row { grid-template-columns: 44px minmax(0, 1fr) auto 36px; }
.mini-row .mini-text { display: block; text-decoration: none; color: inherit; min-width: 0; }
.mini-row .del { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.mini-row .del:hover { color: var(--rose-deep); border-color: var(--rose-deep); background: var(--rose-soft); }
/* Sandra (27.10.2026): bigger photos and the offer's properties, to compare prices */
.angebote-box .mini-row { grid-template-columns: 84px minmax(0, 1fr) auto 36px; align-items: start; }
.angebote-box .mini-row .photo { display: block; overflow: hidden; }
.angebote-box .mini-row .preis { padding-top: 2px; }
.angebote-box .mini-row .del { margin-top: -4px; }
.angebote-box .mini-row-alt { grid-template-columns: 84px minmax(0, 1fr) auto; }
.mini-schilder { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.mini-schilder:empty { display: none; }
.mini-schilder .pill { font-size: .78rem; }
.mini-verkauft { margin-top: 10px; border-top: 1px solid var(--line); }
.mini-verkauft summary { cursor: pointer; padding: 10px 0 4px; font-weight: 700; color: var(--lav-ink); min-height: 32px; }
.mini-verkauft .mini-row-alt .photo img { opacity: .85; }

/* Steckbrief-Liste: Foto und Text einzeln verlinkt, Papierkorb rechts wie bei den Angeboten */
.row .row-text { text-decoration: none; color: inherit; min-width: 0; display: block; }
.foto-slot { min-width: 0; }
.foto-slot .field-g input { width: 100%; min-width: 0; }
.slot-head b { font-size: .88rem; line-height: 1.1; white-space: normal; }
.trait .monate { display: grid; }
.tiles-info .tile { justify-content: flex-start; }
/* Herkunft & Züchtung: lange Feldnamen – auf dem Handy Name über Wert, ab 560 px zwei Spalten */
@media (max-width: 559px) {
  .facts-table { grid-template-columns: 1fr; gap: 2px; }
  .facts-table dt { font-size: .85rem; margin-top: 8px; }
  .facts-table dt:first-child { margin-top: 0; }
}
/* ungerade Kachelzahl: die letzte Kachel füllt die Reihe, statt allein zu stehen */
@media (max-width: 639px) { .tiles > .tile:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 640px) and (max-width: 999px) { .tiles > .tile:last-child:nth-child(3n+1) { grid-column: 1 / -1; } }

/* --- Sandras 6. Runde (17.09.2026) ---------------------------------------- */
[x-cloak] { display: none !important; }
/* Textfelder, die mit dem Inhalt wachsen (Herkunft & Züchtung, Anmerkungen) */
.field-g textarea.auto, textarea.auto { min-height: 52px; field-sizing: content; resize: vertical; }
/* zwei Felder nebeneinander – NICHT .seg, das blendet Inputs für die Radio-Paare aus */
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.zwei > * { min-width: 0; }

/* Leiste, die am unteren Rand stehen bleibt (Speichern im Steckbrief, Anfrage in der Bestandsliste) */
.stick-bar {
  position: sticky; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 8px); z-index: 30;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px;
  background: rgba(255,255,255,.94); backdrop-filter: blur(8px); border: 1px solid var(--line-strong); border-radius: 28px;
  box-shadow: 0 8px 28px -8px rgba(42,35,51,.35);
}
.save-bar .btn { flex: 1; }
.b-anfrage { position: fixed; left: var(--pad); right: var(--pad); justify-content: center; }
.b-anfrage .b-anzahl { padding: 0 8px; font-weight: 700; }
@media (min-width: 900px) { .b-anfrage { bottom: 16px; left: 50%; right: auto; transform: translateX(-50%); width: max-content; max-width: calc(100% - 2 * var(--pad)); flex-wrap: nowrap; padding-left: 16px; } }

/* Steckbrief-Editor: Abschnitte als Karten, Positionen durch Linien getrennt */
.ed-card { background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--leaf-sm); padding: 0 14px; box-shadow: var(--shadow); min-width: 0; }
.ed-card > h2 { margin: 0 -14px; padding: 11px 14px; font-size: 1.08rem; background: var(--lav-soft); color: var(--lav-ink); border-bottom: 1.5px solid var(--line-strong); border-radius: calc(14px - 1.5px) calc(14px - 1.5px) 0 0; }
.ed-card > .ed-hinweis { margin: 10px 0 0; }
.ed-card > .field-g, .ed-card > .foto-slots, .ed-card > .ed-checks { padding: 14px 0; border-top: 1.5px solid var(--line); }
.ed-card > h2 + .field-g, .ed-card > h2 + .ed-checks { border-top: 0; }
.ed-card > .ed-hinweis + * { border-top: 0; padding-top: 10px; }
.ed-card > .field-g > label, .ed-card > .field-g > .lbl { color: var(--lav-ink); }
.ed-card .foto-slot .field-g { padding: 0; border: 0; }
.ed-checks { display: grid; gap: 10px; }
@media (min-width: 720px) { .ed-checks { grid-template-columns: repeat(3, 1fr); } .ed-card { padding: 0 20px; } .ed-card > h2 { margin: 0 -20px; padding: 12px 20px; } }

/* Hoya-Lexikon: Aufruf zum Mitmachen – Anfang sichtbar, Rest klappt auf */
.aufruf { margin: 18px 0 22px; padding: 18px 20px; border-radius: var(--leaf); background: var(--teal-soft); border: 1px solid var(--teal); }
.aufruf h2 { font-size: clamp(1.15rem, 2.4vw, 1.45rem); margin: 0 0 8px; }
.aufruf .prose { max-width: none; }
.aufruf .prose > p:first-child { margin-top: 0; }
.aufruf .prose.zu > p:first-child { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; margin-bottom: 6px; }
.aufruf .prose ul { list-style: none; padding-left: 0; }
.aufruf .btn-row { margin: 14px 0 10px; }
.aufruf .linkbtn { font-weight: 700; cursor: pointer; }

/* Bestandsliste öffentlich: nur Namen, mehrspaltig ab Tablet */
.b-liste { list-style: none; margin: 0; padding: 0; columns: 340px; column-gap: 28px; }
.b-liste li { break-inside: avoid; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.b-liste .b-name { flex: 1; min-width: 0; font-weight: 700; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.b-liste a.b-name { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.b-liste a.b-name:hover { color: var(--lav-deep); }
.b-liste .pill { text-decoration: none; }
.b-frag { flex: none; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--lav-deep); background: var(--surface); color: var(--lav-ink); font: inherit; font-weight: 700; font-size: .92rem; cursor: pointer; }
.b-frag:hover { background: var(--lav-soft); }
.b-frag.on { background: var(--pink-lila); color: #fff; }

/* Bestandsliste im Pflegebereich: Zeilen speichern sich selbst */
.b-neu h2 { font-size: 1.05rem; margin: 0 0 8px; }
.b-neu-felder { display: grid; gap: 12px; align-items: end; }
.b-neu-felder > * { min-width: 0; }
@media (min-width: 900px) { .b-neu-felder { grid-template-columns: 2fr 240px 2fr auto; } }
.b-row.b-spalten { display: none; }
@media (min-width: 900px) { .b-row.b-spalten { display: grid; padding: 4px 0; font-size: .85rem; font-weight: 700; color: var(--muted); } .b-spalten span { padding-left: 12px; } }
.b-viele { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--leaf-sm); background: var(--surface); padding: 10px 14px; }
.b-viele summary { display: flex; align-items: center; gap: 8px; font-weight: 700; cursor: pointer; color: var(--lav-ink); min-height: 32px; }
.b-kopf { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 6px; }
.b-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 40px; gap: 8px; align-items: start; padding: 12px 0; border-bottom: 1.5px solid var(--line); }
.b-row input, .b-row textarea { width: 100%; min-width: 0; min-height: 44px; padding: 9px 12px; border: 1.5px solid var(--line-strong); border-radius: 10px; font: inherit; background: var(--surface); color: var(--ink); }
.b-row textarea { min-height: 44px; resize: vertical; }
.b-row input:focus, .b-row textarea:focus { border-color: var(--lav-deep); outline: none; box-shadow: 0 0 0 3px var(--lav-soft); }
.b-row .b-name { grid-column: 1 / -1; font-weight: 700; }
.b-row .b-quelle { grid-column: 1 / 3; grid-row: 3; }
.b-row .b-status { grid-column: 1 / 3; grid-row: 4; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .9rem; min-height: 24px; }
.b-row .b-status .pill { text-decoration: none; }
.b-row .b-ok { display: inline-flex; align-items: center; gap: 3px; color: var(--teal-deep); font-weight: 700; }
.b-row .b-err { color: var(--rose-deep); font-weight: 700; }
.b-row .del { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.b-row .del:hover { color: var(--rose-deep); border-color: var(--rose-deep); background: var(--rose-soft); }
@media (min-width: 900px) {
  .b-row { grid-template-columns: minmax(0, 1.5fr) 110px minmax(0, 1fr) minmax(0, 1.6fr) minmax(200px, auto) 40px; align-items: center; padding: 8px 0; }
  .b-row .b-name { grid-column: auto; }
  .b-row .b-status, .b-row .b-quelle { grid-column: auto; grid-row: auto; }
}

/* Kopfzeile: mit „Hoya-Lexikon / Steckbriefe" und „Bestandsliste" passt die Navigation erst ab sehr breiten
   Fenstern neben das Logo – darunter bekommt sie eine eigene Zeile (vorher lief die Seite ab 900 px seitlich über).
   03.10.2026: Grenze 1899 statt 1699 px – zwischen 1700 und 1760 px ragte der „Schreib mir"-Knopf über den Rand und die
   Seite ließ sich seitlich schieben. Gemessen braucht die einzeilige Kopfzeile mit „Meine Steckbriefsammlung (12)" und
   „Anfrageliste (12)" 1939 px; von 1900 bis 1999 px stehen die Menüpunkte deshalb enger (dann reichen 1867 px, auch
   mit Bildlaufleiste auf einem 1920er Bildschirm).
   10.10.2026: „Hoya-Pflege" statt „Pflege" macht die Zeile etwa 45 px länger – Grenzen deshalb 100 px höher
   (zweizeilig bis 1999 px, enger von 2000 bis 2099 px). */
.top-nav a { white-space: nowrap; }
@media (min-width: 2000px) and (max-width: 2099px) { .top-nav a { padding-left: 8px; padding-right: 8px; } }
@media (min-width: 900px) and (max-width: 1999px) {
  /* Fabian (03.10.2026): logo above, menu below, and the „Schreib mir" button to the right of both,
     vertically centred in the header (before it sat next to the logo, glued to the top edge) */
  .top-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; padding-top: 10px; padding-bottom: 8px; }
  .top .brand { grid-column: 1; justify-self: start; }
  .top-nav { grid-column: 1; min-width: 0; flex-wrap: wrap; margin: 0 0 0 -8px; gap: 2px; }
  .top-cta { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin-left: 0; }
  /* 8 px instead of 10: next to the button the menu still fits on one line at 1440 px */
  .top-nav a { padding: 6px 8px; font-size: .94rem; }
}
/* lange Wörter in Bildunterschriften und Herkunftsfeldern dürfen die Seite nicht aufschieben */
.figcap, .facts-table dd, .facts-table dt { overflow-wrap: anywhere; min-width: 0; }
.b-neu-felder textarea, .b-row textarea { display: block; }

/* Telegram next to WhatsApp in the Anfrageliste (Sandra, 18.09.2026) */
.btn-tg { background: #1A75AA; }
.btn-tg:hover { background: #135E8A; }

/* Hoya-Lexikon auf der Startseite deutlich vom Verkauf abgesetzt (Sandra, 18.09.2026) */
.lexikon-band {
  display: grid; grid-template-columns: auto 1fr; gap: 14px 18px; align-items: center;
  padding: 22px 20px; border-radius: var(--leaf); text-decoration: none; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, #2E8C7F 0%, transparent 55%), linear-gradient(135deg, #0F5C56 0%, #173F3B 100%);
  box-shadow: 0 14px 34px -18px rgba(15,92,86,.7);
}
.lexikon-band:hover { color: #fff; }
.lexikon-band > .ic { width: 56px; height: 56px; padding: 13px; border-radius: 50%; background: rgba(255,255,255,.14); color: #CFF3EC; }
.lexikon-band .kicker { display: block; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #9EE0D5; }
.lexikon-band strong { display: block; font-family: var(--display); font-weight: 600; font-size: clamp(1.5rem, 3.4vw, 2rem); line-height: 1.1; margin: 2px 0 4px; }
.lexikon-band .txt { display: block; color: #DDF1ED; }
.lexikon-band .los { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 999px; background: #fff; color: #0F5C56; font-weight: 700; }
.lexikon-band:hover .los { background: #E4F6F3; }
@media (min-width: 720px) {
  .lexikon-band { grid-template-columns: auto 1fr auto; padding: 26px 30px; }
  .lexikon-band .los { grid-column: auto; }
}

/* Ablauf von der Auswahl bis zum Auspacken: 5 Schritte nebeneinander, Pfeile dazwischen,
   Erklärung jeweils darunter (Sandra, 18.09.2026). Schmal: untereinander, Pfeil nach unten. */
.ablauf { list-style: none; margin: 0; padding: 0; display: grid; gap: 34px; }
.schritt { position: relative; display: grid; grid-template-rows: auto 1fr; min-width: 0; }
.schritt-kopf { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px 14px 0 0; background: var(--k); color: var(--k-ink); font-weight: 700; font-size: 1.08rem; line-height: 1.2; }
.schritt-kopf .emoji { font-size: 1.5rem; line-height: 1; flex: none; }
/* emoji drawn as a picture (katalog_tags.symbolbild): sits in the text like the character it replaces */
.symbolbild { width: 1.15em; height: 1.15em; vertical-align: -.2em; display: inline-block; }
.schritt-text { padding: 12px 14px 14px; background: var(--k-soft); border-radius: 0 0 14px 4px; font-size: .97rem; line-height: 1.5; }
.schritt-text p { margin: 0 0 .6em; }
.schritt-text p:last-child { margin: 0; }
.schritt:not(:last-child)::after {
  content: ""; position: absolute; left: 50%; bottom: -30px; width: 26px; height: 26px; transform: translateX(-50%);
  background: var(--pink-lila);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v15M5 12l7 8 7-8' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v15M5 12l7 8 7-8' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.s1 { --k: var(--teal); --k-ink: #0E5550; --k-soft: var(--teal-soft); }
.s2 { --k: var(--lav); --k-ink: var(--lav-ink); --k-soft: var(--lav-soft); }
.s3 { --k: var(--rose); --k-ink: #8A2C50; --k-soft: var(--rose-soft); }
.s4 { --k: #F8D6B3; --k-ink: #86410F; --k-soft: #FDEEDF; }
.s5 { --k: #CFE8BF; --k-ink: #365F1B; --k-soft: #EBF5E3; }
@media (min-width: 1000px) {
  /* subgrid: all headings share one row height, so the arrows sit on one line */
  .ablauf { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: 32px; row-gap: 0; }
  .schritt { grid-row: span 2; grid-template-rows: subgrid; }
  .schritt:not(:last-child)::after { display: none; }
  .schritt-kopf { flex-direction: column; align-items: flex-start; gap: 6px; }
  .schritt:not(:last-child) .schritt-kopf::after {
    content: ""; position: absolute; top: 50%; right: -30px; width: 28px; height: 28px; transform: translateY(-50%);
    background: var(--pink-lila);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12h15M12 5l8 7-8 7' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12h15M12 5l8 7-8 7' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }
}

/* --- Sandras 8. Runde (21.09.2026) ---------------------------------------- */
/* Grün hinterlegte Schaltflächen in RAL 6027 Lichtgrün; weiße Schrift wäre darauf unlesbar,
   deshalb dunkle Schrift (Kontrast > 7:1). */
:root { --ral-6027: #84C3BE; --ral-6027-hover: #6DB3AD; --ral-6027-ink: #0E3F3B; }
.btn-wa, .btn-teal { background: var(--ral-6027); color: var(--ral-6027-ink); }
.btn-wa:hover, .btn-teal:hover { background: var(--ral-6027-hover); color: var(--ral-6027-ink); }
.wa-fab { background: var(--ral-6027); color: var(--ral-6027-ink); box-shadow: 0 10px 30px -8px rgba(132,195,190,.9); }
.wa-fab:hover { background: var(--ral-6027-hover); color: var(--ral-6027-ink); }
.weg-wa { background: #E3F3F1; } .weg-wa .ic { color: var(--ral-6027-ink); }
.chip-teal.on, .tab-teal.on { background: var(--ral-6027); border-color: var(--ral-6027); color: var(--ral-6027-ink); }
.chip-teal.on:hover { background: var(--ral-6027-hover); color: var(--ral-6027-ink); }
.act.on { background: var(--ral-6027); color: var(--ral-6027-ink); }
.msg.success { background: var(--ral-6027); color: var(--ral-6027-ink); }

/* Steckbrief: jeder Abschnitt eine gerahmte Karte, dezent vom Seitenhintergrund abgehoben */
.sb-karten { display: grid; gap: 16px; padding-top: 28px; padding-bottom: 36px; }
.sb-card { background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--leaf); padding: 18px 18px 20px; box-shadow: var(--shadow); min-width: 0; }
.sb-card > h2 { display: flex; align-items: center; gap: 8px; margin: -18px -18px 16px; padding: 12px 18px; font-size: 1.15rem; background: var(--lav-soft); color: var(--lav-ink); border-bottom: 1.5px solid var(--line-strong); border-radius: calc(22px - 1.5px) calc(22px - 1.5px) 0 0; }
.sb-card.prose { max-width: none; }
.sb-card.prose > p:last-child, .sb-card .prose > p:last-child { margin-bottom: 0; }
.sb-card .chips { margin-top: 4px; }
.sb-card-rose { border-color: var(--rose); }
.sb-card-rose > h2 { background: var(--rose-soft); color: var(--rose-deep); border-bottom-color: var(--rose); }
.sb-card-rose > h2 .ic { color: var(--rose-deep); }
@media (min-width: 720px) { .sb-card { padding: 22px 24px 24px; } .sb-card > h2 { margin: -22px -24px 18px; padding: 14px 24px; } }

/* Steckbrief-Reiter mit mehreren Fotos: Hauptfoto, dahinter die weiteren, Vorschaubilder darunter */

/* Filter: Hinweis unter „Duftnote", solange keine Duftrichtung gewählt ist */
.sheet-hinweis { margin: -2px 0 8px; font-size: .92rem; color: var(--muted); }

/* Neues Angebot: Sortenfeld bricht um, eigene Vorschlagsliste darunter */
.sorte-wahl { position: relative; }
.field-g textarea.sorte-name { min-height: 52px; overflow: hidden; resize: none; line-height: 1.35; }
.vorschlaege { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; margin: 4px 0 0; padding: 6px; list-style: none; background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow); max-height: 320px; overflow: auto; }
.vorschlaege button { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; background: none; border-radius: 8px; font: inherit; cursor: pointer; overflow-wrap: anywhere; }
.vorschlaege button:hover, .vorschlaege button:focus { background: var(--lav-soft); color: var(--lav-ink); }
.autosave { display: flex; gap: 6px; align-items: center; margin: -6px 0 0; }
.thumbs-edit.vorschau .photo img { object-fit: cover; }

/* Steckbrief-Editor: weitere Fotos je Slot (Blüte, Mutterpflanze) */
.mehr-fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.mehr-foto { min-width: 0; }
.mehr-foto .photo { border-radius: 10px; }
.mehr-foto .slot-del { width: 30px; height: 30px; top: 6px; right: 6px; }
.mehr-foto .t-cap { font-size: .85rem; min-height: 36px; margin-top: 4px; }
.upload-mehr { min-height: 0; aspect-ratio: 1; padding: 8px; gap: 4px; font-size: .85rem; border-radius: 10px; }
.upload-mehr .ic { width: 20px; height: 20px; }

/* --- Sandras 9. Runde (22.09.2026) ---------------------------------------- */
/* Schaltflächen laufen nie mehr aus ihrem Kasten heraus: lange Beschriftungen brechen um
   (vorher ragte „Bilder & Infos per WhatsApp schicken" 43 px über den Lexikon-Aufruf hinaus). */
.btn { white-space: normal; max-width: 100%; text-align: center; }
.btn-row .btn { min-height: 52px; padding-top: 10px; padding-bottom: 10px; }
.btn-row .btn-sm { min-height: 42px; padding-top: 6px; padding-bottom: 6px; }
.searchbar .btn, .top-cta, .pf-top .btn, .banner .btn, .section-head .btn, .stick-bar .btn-sm { flex: none; }
.ic-brand { flex: none; }

/* Kopfzeile: WhatsApp-Zeichen bleibt auch allein (ohne Text) gut sichtbar */
.top-cta { gap: 8px; }
@media (max-width: 520px) { .top-cta { width: 44px; height: 44px; min-height: 44px; padding: 0; } }
.foot .weg-zeile { display: inline-flex; align-items: center; gap: 8px; }
.foot .weg-zeile .ic { color: var(--muted); }

/* Untere Leiste: vier Reiter, der letzte heißt „Meine Steckbriefsammlung" (bis 07.10.2026 „Gespeicherte Steckbriefe") und darf mehrzeilig sein */
.bottom a { font-size: .74rem; line-height: 1.1; text-align: center; padding: 0 2px; }
/* „Steckbriefsammlung" is one long word: the last tab gets more of the width and the word a soft hyphen, so that
   the name stands on two lines down to 320 px („Meine Steckbrief-" / „sammlung") */
.bottom { grid-template-columns: 1fr 1fr 1.1fr 1.55fr; }
.bottom a.zweizeilig { font-size: .72rem; }
.bottom a.zweizeilig span:not(.badge) { display: block; hyphens: manual; }
.bottom a .ic { flex: none; }

/* Steckbrief: Fotos quadratisch (Sandra: 1:1, außer bei den Angeboten) */
.tab-panel .photo { aspect-ratio: 1; }

/* Eigenschaftskarten: Kategorie-Symbol nur als Kontur – die halb gefüllte Fläche daneben las
   sich wie ein „halbes Symbol" neben der Skala. Gespeichert-Zeichen dagegen satt gefüllt. */
.trait > .ic { fill: none; fill-opacity: 1; }
.act.on svg { fill: currentColor; fill-opacity: 1; }
.btn-merk.on { background: var(--lav-soft); border-color: var(--lav); color: var(--lav-ink); }
.btn-merk.on svg { fill: currentColor; }
.trait b .info .tip > div { margin-bottom: 6px; }
.trait b .info .tip > div:last-child { margin-bottom: 0; }

/* Live-Suche: Vorschläge direkt unter dem Suchfeld, große Zeilen fürs Antippen */
.searchbar .suche { flex: 1; min-width: 0; }
.suche { position: relative; }
.suche .field { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: 999px; padding: 0 16px; min-height: 52px; }
.suche input { flex: 1; border: 0; background: transparent; font: inherit; min-width: 0; outline: none; }
.suche input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.suche .ic { color: var(--muted); }
.suche:focus-within .field { border-color: var(--lav-deep); box-shadow: 0 0 0 3px var(--lav-soft); }
.suche-liste { padding: 6px; border-radius: 18px; max-height: min(60vh, 420px); z-index: 45; }
.suche-liste li { list-style: none; }
.suche-liste a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 10px 14px; border-radius: 12px; text-decoration: none; color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }
.suche-liste a:hover, .suche-liste a.akt { background: var(--lav-soft); color: var(--lav-ink); }
.suche-liste mark { background: none; color: var(--pink-lila); }
.suche-liste a.akt mark, .suche-liste a:hover mark { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.suche-liste .s-meta { flex: none; }
.suche-liste .s-leer { padding: 14px; color: var(--muted); font-weight: 700; text-align: center; }
/* „i" bleibt neben dem Kategorienamen, nur der Erklärungskasten rückt darunter: das details-Element
   selbst nimmt keinen Platz ein (display: contents), Zusammenfassung und Kasten sind eigene Flex-Kinder. */
.trait b { flex-wrap: wrap; }
.trait b details.info { display: contents; }
.trait b details.info summary { display: inline-flex; }
.trait b details.info .tip { flex: 0 0 100%; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink); font-size: .95rem; margin-top: 6px; }
.trait b .tip b { display: inline; text-transform: none; letter-spacing: 0; font-size: inherit; color: var(--lav-ink); margin: 0; }

/* --- Sandras 10. Runde (23.09.2026) --------------------------------------- */
/* Untere Kante, über der schwebende Leisten stehen: auf dem Handy die Reiterleiste, am Desktop nichts */
:root { --unten: calc(var(--nav-h) + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { :root { --unten: 0px; } }

/* Filter: das Blatt passt in den Bildschirm, nur sein Inhalt scrollt; „Filter anwenden" bleibt immer sichtbar
   (Sandra: oben „anfängergeeignet" antippen und sofort anwenden, ohne bis unten zu scrollen). */
.sheet { display: flex; flex-direction: column; padding: 0; max-height: calc(100dvh - 96px - var(--unten)); scroll-margin-top: 78px; scroll-margin-bottom: calc(var(--unten) + 12px); }
.sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 18px 32px; }
.sheet-body > h3:first-child { margin-top: 0; }
.sheet-actions { flex: none; position: sticky; bottom: var(--unten); margin: 0; padding: 12px 18px; border-top: 1px solid var(--line); background: rgba(255,255,255,.96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 0 0 22px 6px; }
.sheet-actions .btn { flex: 1 1 auto; }
.sort-chips { margin-top: 10px; }
.sort-chips .chip .ic { opacity: 1; }
/* Meine Steckbriefsammlung (Sandra 29.10.2026): search and sorting above the list */
.merk-werkzeug { margin: 18px 0 14px; }
.merk-werkzeug .merk-sort-titel { margin: 14px 0 0; font-weight: 700; }
.merk-werkzeug .sort-chips { margin-top: 6px; }
.merk-werkzeug .count { margin: 10px 0 0; }

/* Startseite: Suche, Filter-Knopf und „Suchen" in einer Zeile unter dem Hero, das Filterblatt darunter in voller Breite */
/* min-width: 0 – sonst zwingt die Suchzeile (Feld + Filter + Suchen) die Grid-Spalte auf ihre Min-Content-Breite und die Seite scrollt seitwärts */
.hero .start-suche { grid-column: 1 / -1; max-width: none; margin-top: 4px; min-width: 0; }
.hero .start-suche .searchbar, .hero .start-suche .hinweis { max-width: 640px; }
@media (min-width: 900px) { .hero { grid-template-rows: auto auto; } .hero > div:first-child { grid-column: 1; grid-row: 1; } .hero-photo { grid-column: 2; grid-row: 1; } .hero .start-suche { grid-row: 2; } }
.start-suche .chip { flex: none; }

/* Symbolskalen: zwei benachbarte Stufen = Zwischenwert, das letzte Symbol ist genau zur Hälfte gefüllt –
   dasselbe Zeichen zweimal übereinander, das gefüllte auf die linke Hälfte beschnitten (wie ein halber Stern). */
.symbole i.half { position: relative; }
.symbole i.half svg + svg { position: absolute; left: 0; top: 0; clip-path: inset(0 50% 0 0); color: var(--sym-ink, var(--teal-deep)); fill: var(--sym, var(--teal)); fill-opacity: 1; stroke-width: 2; }

/* Fotos zum Antippen: der Knopf füllt den Bildkasten, das Bild bleibt wie gehabt */
.photo .zoom { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; position: relative; z-index: 1; cursor: zoom-in; border-radius: 0; }
.photo .zoom img { width: 100%; height: 100%; }
@media (pointer: fine) { .photo .zoom { cursor: zoom-in; } }

/* Foto in groß: von Rand zu Rand, dunkler Grund, X links oben, Bildtext und Zähler unten */
html.lb-offen { overflow: hidden; }
.lb { position: fixed; inset: 0; z-index: 120; background: #1C1624; display: flex; align-items: center; justify-content: center; touch-action: pan-y pinch-zoom; }
.lb-img { display: block; width: 100vw; max-width: 100vw; max-height: 100dvh; object-fit: contain; cursor: zoom-out; }
.lb-x, .lb-pfeil { position: absolute; z-index: 2; width: 46px; height: 46px; border-radius: 50%; border: 0; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.14); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); cursor: pointer; padding: 0; }
.lb-x { top: calc(12px + env(safe-area-inset-top)); left: 12px; }
.lb-x:hover, .lb-pfeil:hover { background: rgba(255,255,255,.28); color: #fff; }
.lb-pfeil { top: 50%; transform: translateY(-50%); display: none; }
.lb-links { left: 12px; } .lb-rechts { right: 12px; }
@media (pointer: fine) { .lb-pfeil { display: inline-flex; } }
.lb-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; justify-content: space-between; gap: 12px; padding: 28px 16px calc(12px + env(safe-area-inset-bottom)); color: #fff; font-weight: 700; background: linear-gradient(to top, rgba(28,22,36,.85), transparent); pointer-events: none; }
.lb-foot .num { flex: none; opacity: .8; }
.lb :focus-visible { outline-color: #fff; }

/* Steckbrief-Editor: Kamera-Abzeichen wählt die Datei, das Foto selbst öffnet sich groß; ohne Foto bleibt die ganze Kachel Wähler */
.upload-photo { border: 0; background: linear-gradient(160deg, var(--lav-soft), var(--teal-soft)); }
.upload-photo.leer { border: 2px dashed var(--lav); background: var(--lav-soft); }
.upload-photo .upload-over { cursor: pointer; }
.upload-photo.leer .upload-over { inset: 0; border-radius: 0; justify-content: center; background: transparent; }
.upload-over input { position: absolute; opacity: 0; width: 0; height: 0; }

/* Steckbrief-Kopf (Sandra, 24.09.2026): Name → Verfügbarkeit → drei Kerneigenschaften → ein Hauptknopf →
   kleine Nebenreihe → Fotoreiter. Weniger Höhe, nur ein Knopf in Farbe. */
.sb-head { gap: 14px; padding-top: 16px; }
.sb-kopf h1 { margin: 0; }
.sb-zusatz { margin: 4px 0 0; color: var(--muted); font-size: 1.05rem; line-height: 1.35; }
.sb-alias { font-size: .92rem; }
.sb-verfuegbar { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 0; border: 0; background: none; font: inherit; font-weight: 700; font-size: 1rem; color: var(--teal-deep); cursor: pointer; text-align: left; }
.sb-verfuegbar::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.sb-verfuegbar:hover { text-decoration: underline; text-underline-offset: 3px; }
.sb-verfuegbar.aus { color: var(--muted); cursor: default; }
.sb-verfuegbar.aus:hover { text-decoration: none; }
.sb-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sb-badges .pill { font-size: .78rem; padding: 1px 9px; }


.sb-haupt { min-height: 50px; }
/* one outlined bar „Steckbrief speichern | Teilen | Mehr" – segments share the width, hairlines between */
.sb-neben { display: flex; margin-top: 10px; border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--surface); }
.sb-neben > button { flex: 1 1 auto; }
.sb-neben > button {
  display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; min-height: 44px; padding: 4px 8px;
  border: 0; background: none; color: var(--ink); font: inherit; font-weight: 700; font-size: .88rem; line-height: 1.2; cursor: pointer; text-align: center;
}
.sb-neben > button { width: auto; }
.sb-neben > button + button { border-left: 1px solid var(--line-strong); }
.sb-neben > button:first-child { border-radius: 999px 0 0 999px; padding-left: 12px; }
.sb-neben .ic { flex: none; }
.sb-intern { margin-top: 10px; }

/* Herkunft & Züchtung: zugeklappt auf ein paar Zeilen, weich ausgeblendet, „Mehr anzeigen" öffnet alles */
.sb-klapp-inhalt { max-height: 9.5em; overflow: hidden; position: relative; }
.sb-klapp.lang:not(.auf) .sb-klapp-inhalt::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3em; background: linear-gradient(to bottom, transparent, var(--surface)); pointer-events: none; }
.sb-klapp.auf .sb-klapp-inhalt { max-height: none; }
.sb-klapp .facts-table { margin-bottom: 0; }
.sb-klapp-knopf { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit; font-weight: 700; font-size: .92rem; cursor: pointer; }
.sb-klapp-knopf:hover { background: var(--lav-soft); border-color: var(--lav); color: var(--lav-ink); }
.sb-klapp.auf .sb-klapp-knopf .ic { transform: rotate(180deg); }

/* Fotos sofort zeigen (Sandra, 24.09.2026): lokale Vorschau im Editor-Slot, Original solange die kleine Fassung fehlt */
.photo-wait[hidden] { display: none; }
.photo img.roh, .photo img.neu-vorschau { object-fit: cover; }
.upload-photo.mit-neu { border: 0; }
.upload-photo.leer.mit-neu .upload-over { inset: auto 8px 8px 8px; border-radius: 999px; justify-content: flex-start; }
.upload-photo .upload-over.neu { background: var(--teal-deep); color: #fff; }
.mehr-foto .photo-tag .pill { font-size: .72rem; }

/* Bestandsliste: eigene Vorschlagsliste unter dem Namensfeld, „steht schon drin" rechts */
.b-neu .vorschlaege button { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.b-neu .vorschlaege .pill { flex: none; font-size: .76rem; }

/* Fotoreiter: kompakte Leiste direkt über dem Foto */
.sb-tabs .tabs { gap: 6px; margin-bottom: 10px; }
.sb-tabs .tab { min-height: 38px; padding: 0 13px; font-size: .92rem; }

/* --- Sandras 12. Runde (28.09.2026) --------------------------------------- */
/* Fotos ohne „Nebel": Bilder, die nicht quadratisch sind, hatten ringsum ihr eigenes weichgezeichnetes
   Bild als Randfüllung – das las sich wie ein vernebeltes Foto. Jetzt steht das ganze Foto auf einem
   ruhigen, einfarbigen Grund. Das runde Porträt auf der Startseite behält seine Füllung. */
:root { --foto-grund: #F3EFF7; }
.photo { background: var(--foto-grund); }
/* Sandra (19.10.2026): the fill is back – „Blurred Background Fill" for every photo that needs an edge to reach its
   frame. The photo stays whole and unchanged on top; the edge is the same photo, enlarged to cover the frame and
   blurred. The September fill read like fog (zoomed 1.35× and blurred 18px): now it is only as large as the frame
   plus the blur margin and blurred less, so it reads as the photo carrying on. app.js (bildfuellung) sets --fill. */
.story-bild { position: relative; }
.story-bild img { position: relative; z-index: 1; }
.photo::before, .story-bild::before {
  content: ""; position: absolute; inset: calc(-2 * var(--fill-blur, 12px)); z-index: 0; pointer-events: none;
  background-image: var(--fill); background-size: cover; background-position: center;
  filter: blur(var(--fill-blur, 12px)); transform: none;
}
.thumbs .photo, .offer-thumbs .photo, .list-row .photo, .row .photo, .thumbs-edit .photo, .story-fotos .photo { --fill-blur: 6px; }
/* Übersichten (Lexikon, verfügbare Hoyas, Startseite): quadratische Kacheln – Sandras Blütenfotos sind
   quadratisch und füllen die Kachel damit ganz aus */
.a-card .photo { aspect-ratio: 1; }
/* Steckbrief-Übersicht im Pflegebereich: größere Fotos */
.row.row-gross { grid-template-columns: 112px 1fr; gap: 14px; }
.row.row-gross .photo { border-radius: 12px; }
@media (min-width: 720px) { .row.row-gross { grid-template-columns: 132px 1fr; } }
/* Sandra (11.10.2026): two groups under „Sorte suchen" */
.sorten-teile { display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 12px; }
.sorten-teile .chip { justify-content: center; text-align: center; min-height: 48px; padding: 6px 10px; line-height: 1.2; font-size: .9rem; }
/* 22.10.2026: third group „Mutterpflanzenfoto fehlt" gets the whole second line */
.sorten-teile .chip:nth-child(3) { grid-column: 1 / -1; }

/* Meldungen („Steckbrief gespeichert") immer am oberen Bildschirmrand, über der Kopfzeile */
.msgs { top: calc(10px + env(safe-area-inset-top)); z-index: 130; }
.msg { box-shadow: 0 10px 30px -10px rgba(42,35,51,.45); }

/* Das kleine „i" hinter Fachbegriffen: überall derselbe Knopf, überall dasselbe Infofenster */
.bi { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: -6px -5px -6px -3px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--lav-deep); cursor: pointer; vertical-align: middle; text-decoration: none; flex: none; -webkit-tap-highlight-color: transparent; }
.bi:hover, .bi[aria-expanded="true"] { color: var(--pink-lila); background: var(--lav-soft); }
.bi .ic { vertical-align: 0; }
.bi-wort { white-space: nowrap; }
h1 .bi, h2 .bi, h3 .bi, dt .bi, b .bi { font-weight: 400; }
.chip-mit-bi { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; }
.chip-mit-bi .bi { margin: 0; }
/* Chips mit langem Text brechen um, statt über den Rand des Filters hinauszulaufen */
.sheet label.chip, .form label.chip { max-width: 100%; min-width: 0; white-space: normal; text-align: left; line-height: 1.25; padding-top: 7px; padding-bottom: 7px; }

.bi-box { position: absolute; z-index: 110; width: min(340px, calc(100vw - 24px)); padding: 14px 44px 14px 16px; background: var(--surface); color: var(--ink); border: 1.5px solid var(--line-strong); border-radius: var(--leaf-sm); box-shadow: 0 18px 44px -16px rgba(42,35,51,.5); font-family: var(--body); font-size: .97rem; font-weight: 400; line-height: 1.5; text-transform: none; letter-spacing: 0; text-align: left; white-space: normal; }
.bi-box:focus { outline: none; }
.bi-box:focus-visible { outline: 3px solid var(--lav-deep); outline-offset: 2px; }
.bi-box .bi-titel { display: block; margin: 0 0 4px; font-weight: 700; font-size: 1rem; color: var(--lav-ink); }
.bi-box p { margin: 0 0 8px; }
.bi-box p:last-of-type { margin-bottom: 0; }
.bi-box p b { color: var(--lav-ink); }
.bi-box .bi-mehr { display: inline-block; margin-top: 10px; font-weight: 700; font-size: .92rem; }
.bi-box .bi-zu { position: absolute; top: 6px; right: 6px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.bi-box .bi-zu:hover { background: var(--lav-soft); color: var(--lav-ink); }
.bi-box .bi-text { max-height: min(46vh, 320px); overflow-y: auto; overscroll-behavior: contain; }
/* in Formularen und im Filter klappt die Erklärung in der Seite auf – sie verdeckt dort kein Feld und keinen Chip */
.bi-box.inline { position: static; width: auto; max-width: 640px; margin: 8px 0 10px; box-shadow: none; background: var(--lav-soft); border-color: var(--lav); }
.chips > .bi-box.inline { flex: 0 0 100%; margin: 2px 0 4px; }
.bi-box.inline .bi-text { max-height: none; }

/* Wurzel-Zeichen: feine weiße Wurzeln im gefüllten Erdballen; ohne Füllung in der Linienfarbe */
.ic .wz { stroke-width: 1.2; }
.symbole i.on .wz, .symbole i.half svg + svg .wz { stroke: #fff; stroke-width: 1.3; }
/* Sandra (30.10.2026): the root sign in colour wherever it is filled – brown soil, white roots, a green plant; the
   flower with a yellow centre. „ic-bunt" gives a single sign the same colours (e.g. „Bewurzelte Pflanze" when saving). */
:is(.symbole i.on, .symbole i.half svg + svg, .ic-bunt) .erde { fill: #9A6236; stroke: #5C3A1E; }
:is(.symbole i.on, .symbole i.half svg + svg, .ic-bunt) .wz { stroke: #fff; stroke-width: 1.4; }
:is(.symbole i.on, .symbole i.half svg + svg, .ic-bunt) .tr { stroke: #2A7A2E; }
:is(.symbole i.on, .symbole i.half svg + svg, .ic-bunt) .tr.blatt { fill: #7CCB72; }
:is(.symbole i.on, .symbole i.half svg + svg) .mitte, .ic-bunt .mitte { fill: #FFD23F; stroke: #C98A00; }
.ic-bunt.ic-bluete { fill: #F7A8C6; color: #A83B63; }

/* Steckbrief-Kopf: keine Linien zwischen Pflege, Bewurzelung und Licht; die drei Knöpfe einzeln umrandet im Grün der Seite */
.sb-kopf h1 { font-size: clamp(1.8rem, 7.4vw, 3.2rem); text-wrap: balance; overflow-wrap: break-word; }
.sb-neben { border: 0; border-radius: 0; background: none; gap: 8px; }
.sb-neben > button { border: 1.5px solid var(--ral-6027); border-radius: 999px; background: #F1FAF9; color: var(--ral-6027-ink); padding: 4px 10px; }
.sb-neben > button + button { border-left: 1.5px solid var(--ral-6027); }
.sb-neben > button:first-child { border-radius: 999px; padding-left: 10px; padding-right: 10px; }
.sb-kopf h1 .bi { margin-left: 0; }

/* Eigenschaften: mehrere Werte einer Kategorie stehen nebeneinander */
.trait span { column-gap: 4px; }

/* Startseite: Fachbegriffe A–Z neben dem Lexikon, ruhiger als das Band darüber */
.glossar-kachel { display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; align-items: center; margin-top: 12px; padding: 16px 20px; border-radius: var(--leaf-sm); border: 1.5px solid var(--teal); background: var(--teal-soft); color: var(--ink); text-decoration: none; }
.glossar-kachel > .ic { color: var(--teal-deep); }
.glossar-kachel strong { display: block; font-size: 1.08rem; }
.glossar-kachel .gk-text span { display: block; color: var(--muted); font-size: .95rem; max-width: 72ch; }
.glossar-kachel .gk-los { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--teal-deep); color: var(--teal-deep); font-weight: 700; font-size: .95rem; background: var(--surface); }
.glossar-kachel:hover { color: var(--ink); border-color: var(--teal-deep); }
.glossar-kachel:hover .gk-los { background: var(--teal-deep); color: #fff; }
@media (min-width: 720px) { .glossar-kachel { grid-template-columns: auto 1fr auto; padding: 18px 30px; } .glossar-kachel .gk-los { grid-column: auto; } }

/* Fachbegriffe A–Z */
.glossar .gl-unter { margin: -10px 0 10px; color: var(--muted); font-weight: 700; }
.glossar .gl-einleitung { max-width: 72ch; }
.glossar .gl-einleitung p { margin-bottom: .6em; }
.gl-suche { margin: 16px 0 12px; max-width: 640px; }
.gl-abc { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.gl-abc a, .gl-abc span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 6px; border-radius: 10px; border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink); font-weight: 700; text-decoration: none; }
.gl-abc a:hover { border-color: var(--lav-deep); color: var(--lav-ink); background: var(--lav-soft); }
.gl-abc .leer { border-color: var(--line); background: transparent; color: #B5ACC2; }
.gl-abc a.leer { pointer-events: none; }
.gl-zahl { margin: 0 0 6px; }
.gl-gruppe { scroll-margin-top: 84px; padding-top: 18px; }
.gl-buchstabe { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 46px; padding: 0 10px; margin: 0 0 12px; border-radius: var(--leaf-sm); background: var(--lav-soft); color: var(--lav-ink); font-size: 1.35rem; }
.gl-liste { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .gl-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1300px) { .gl-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gl-eintrag { scroll-margin-top: 84px; padding: 16px 18px 18px; background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--leaf-sm); min-width: 0; overflow-wrap: anywhere; }
.gl-eintrag:target { border-color: var(--pink-lila); box-shadow: 0 0 0 3px var(--rose-soft); }
.gl-eintrag h3 { margin: 0 0 2px; font-size: 1.2rem; color: var(--lav-ink); }
.gl-eintrag p { margin: 0 0 8px; }
.gl-eintrag .gl-auch { color: var(--muted); font-size: .92rem; }
.gl-eintrag .gl-lang p:last-child { margin-bottom: 8px; }
.gl-eintrag .gl-hoya { margin: 4px 0 8px; padding: 10px 12px; border-radius: 10px; background: var(--teal-soft); color: #0E3F3B; }
.gl-eintrag .gl-verwandt { margin: 10px 0 0; font-size: .95rem; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.gl-eintrag .gl-verwandt a { font-weight: 700; }

/* Pflegebereich: Abfrage (Bestandsliste ↔ Steckbrief) als Karte oben auf der Seite, Antwort direkt am Knopf */
.frage { display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: center; margin: 0 0 14px; padding: 14px 16px; border-radius: var(--leaf-sm); border: 1.5px solid var(--ral-6027); background: #F1FAF9; color: var(--ral-6027-ink); }
.frage > .ic { color: var(--teal-deep); }
.frage .frage-text { min-width: 0; overflow-wrap: anywhere; }
.frage .frage-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.frage .frage-knoepfe { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.frage .frage-knoepfe .btn { flex: 1 1 140px; }
@media (min-width: 720px) { .frage { grid-template-columns: auto 1fr auto; } .frage .frage-knoepfe { grid-column: auto; } .frage .frage-knoepfe .btn { flex: none; } }

/* Steckbrief-Editor am Handy: ein Foto-Platz je Zeile. Mit mehreren Fotos je Platz waren zwei Plätze
   nebeneinander zu eng – „Mutterpflanze" lief unter die Pfeile, „Bildunterschrift" war abgeschnitten. */
@media (max-width: 599px) {
  .foto-slots { grid-template-columns: 1fr; gap: 0; }
  .foto-slot { padding: 14px 0; border-top: 1.5px solid var(--line); }
  .foto-slot:first-of-type { border-top: 0; padding-top: 0; }
  .foto-slot .slot-bild { max-width: 232px; }
  .slot-head b { font-size: 1rem; }
  .mehr-fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .upload-mehr { aspect-ratio: auto; min-height: 96px; }
}

/* Papierkorb auf jedem weiteren Foto, rechts oben wie beim Hauptfoto */
.mehr-foto .photo .slot-del { position: absolute; top: 6px; right: 6px; z-index: 3; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: rgba(255,255,255,.95); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.mehr-foto .photo .slot-del:hover { color: var(--rose-deep); border-color: var(--rose-deep); }

/* Steckbrief-Editor: Name, Fotos, Blütendauer */
.msgs.msgs-seite { position: static; padding-top: 12px; pointer-events: auto; }
.msgs.msgs-seite .msg { box-shadow: none; }
.field-g > label.check-klein, .ed-card > .field-g > label.check-klein { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; padding: 8px 12px; font-size: .95rem; font-weight: 400; color: var(--ink); }
.check-klein input { width: 20px; height: 20px; margin: 0; }
.slot-stand { margin: 6px 0 0; font-weight: 700; color: var(--teal-deep); }
.slot-anzahl { margin: 6px 0 0; }
.slot-vorschau { margin-top: 8px; }
.foto-slot .err { margin: 6px 0 0; }
.upload-photo .upload-over input, .upload-mehr input { position: absolute; opacity: 0; width: 0; height: 0; }
.neu-foto { max-width: 220px; margin-bottom: 10px; }
.neu-foto .photo { border-radius: 12px; }
.tage-felder { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tage-felder label { margin: 0; font-weight: 400; }
.field-g .tage-felder input[type=number] { width: 96px; min-height: 48px; }
.bz { display: grid; gap: 8px; }
.bz-zeile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: end; padding: 10px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--bg); }
.field-g .bz-zeile label { display: block; margin: 0; font-weight: 400; font-size: .88rem; color: var(--muted); min-width: 0; }
.bz-zeile input[type=date] { display: block; width: 100%; min-width: 0; min-height: 46px; margin-top: 2px; padding: 8px 10px; border: 1.5px solid var(--line-strong); border-radius: 10px; font: inherit; font-size: .98rem; background: var(--surface); color: var(--ink); }
.bz-zeile input[type=date]:focus { border-color: var(--lav-deep); outline: none; box-shadow: 0 0 0 3px var(--lav-soft); }
.bz-zeile .bz-tage { grid-column: 1 / 3; grid-row: 2; font-weight: 700; color: var(--teal-deep); }
.bz-zeile .del { grid-row: 1; grid-column: 3; width: 40px; height: 40px; margin-bottom: 3px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.bz-zeile .del:hover { color: var(--rose-deep); border-color: var(--rose-deep); background: var(--rose-soft); }
.bz-zeile .bz-ok { grid-column: 1 / -1; }
.bz-zeile .bz-fehler { grid-column: 1 / -1; margin: 0; }
.bz-mehr { justify-self: start; }
.bz-ergebnis { margin: 2px 0 0; }
/* Sandra (27.10.2026): her note to each flower, across the whole line */
.bz-zeile .bz-notiz { grid-column: 1 / -1; }
.bz-notiz textarea { display: block; margin-top: 2px; }
@media (min-width: 720px) {
  .bz-zeile { grid-template-columns: 200px 200px auto auto 1fr; align-items: end; }
  .bz-zeile .bz-tage { grid-column: auto; grid-row: auto; align-self: center; padding-top: 18px; }
  .bz-zeile .del { grid-column: auto; }
  .bz-zeile .bz-ok { grid-column: auto; }
}

/* Angebot anlegen: „Veröffentlichen" bleibt in der Leiste am unteren Rand stehen; das Feld, in dem
   gerade getippt wird, rückt beim Hineinspringen über die Leiste */
html:has(.stick-bar) { scroll-padding-bottom: calc(var(--unten) + 96px); scroll-padding-top: 76px; }
.save-bar .btn-entwurf { flex: 0 1 auto; min-height: 52px; padding: 0 16px; }


/* „Bald geht's los" until the launch (katalog/bald.py) ---------------------------------------- */
.bald-hinweis { margin: 0; padding: 10px var(--pad); background: var(--rose-soft); color: var(--rose-deep); font-size: .92rem; font-weight: 700; }
body.bald { padding-bottom: 0; }
.bald-seite { display: grid; gap: 32px; min-height: 100dvh; padding: calc(28px + env(safe-area-inset-top)) var(--pad) calc(28px + env(safe-area-inset-bottom)); align-items: center; }
.bald-text { min-width: 0; }
.bald-text .brand { display: flex; align-items: center; gap: 10px; margin: 0 0 40px; font-weight: 700; }
.bald-text .brand small { color: var(--muted); font-weight: 400; }
.bald-text h1 { font-size: clamp(2.4rem, 7vw, 4.6rem); max-width: 12ch; margin-bottom: 18px; }
.bald-datum { display: inline-block; margin: 0 0 22px; padding: 8px 18px; border-radius: var(--leaf-sm); background: var(--lav-soft); color: var(--lav-ink); font-size: 1.3rem; font-weight: 700; }
.bald-lead { max-width: 46ch; font-size: 1.12rem; }
.bald-wege { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 36px; }
.bald-fuss { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; }
.bald-fuss a { color: var(--muted); }
.bald-bilder { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.bald-bilder li { min-width: 0; }
.bald-bilder li:nth-child(n+5) { display: none; }
.bald-bilder img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--leaf); background: var(--lav-soft); }
.bald-bilder span { display: block; margin-top: 6px; font-size: .86rem; color: var(--muted); overflow-wrap: anywhere; }
@media (min-width: 900px) {
  .bald-seite { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; }
  .bald-bilder { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .bald-bilder li:nth-child(n+5) { display: block; }
}

/* ---- Sandra (29.09.2026): Blütezeit – estimated months light, documented flowerings strong ---- */
.trait-breit { grid-column: 1 / -1; }
.trait-breit > div { flex: 1; min-width: 0; }
.monate { gap: 3px; }
.monate i, .monate button { font: inherit; font-style: normal; font-size: .68rem; line-height: 1; text-align: center; padding: 8px 0; border-radius: 7px; border: 1px solid #B5ACC2; background: none; color: var(--muted); letter-spacing: -.02em; font-variant-numeric: tabular-nums; min-width: 0; }
.monate i.on { background: #FBDCE7; border-color: #F090B5; color: #8A2C50; font-weight: 400; }
.monate button.dok, .monate i.dok { background: var(--sym-ink); border-color: var(--sym-ink); color: #fff; font-weight: 700; }
.monate button.dok { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.monate button.dok:hover, .monate button.dok[aria-expanded="true"] { background: #7E2547; border-color: #7E2547; }
.monate button.dok:focus-visible { outline: 3px solid var(--lav-deep); outline-offset: 2px; }
.trait .monate-legende, .monate-legende { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; font-size: .8rem; color: var(--muted); }
.trait .monate-legende span, .monate-legende span { display: inline-flex; align-items: center; gap: 6px; }
.monate-legende i { width: 12px; height: 12px; border-radius: 4px; flex: none; border: 1px solid #B5ACC2; }
.monate-legende i.on, .bz-farbe.on { background: #FBDCE7; border-color: #F090B5; }
.monate-legende i.dok, .bz-farbe.dok { background: #A83B63; border-color: #A83B63; }
/* phone: two rows of six, so every month is readable and easy to hit */
@media (max-width: 559px) { .monate, .trait .monate { grid-template-columns: repeat(6, 1fr); gap: 4px; } .monate i, .monate button { font-size: .82rem; padding: 11px 0; } }
@media (min-width: 560px) { .monate i, .monate button { font-size: .8rem; padding: 9px 0; } }
.bi-box .bi-text.liste p { margin: 0 0 3px; font-variant-numeric: tabular-nums; }
.bi-box .bi-text.liste p::before { content: "•"; margin-right: 8px; color: var(--sym-ink, #A83B63); }
/* editor: the two kinds carry their colour in the heading */
.bz-farbe { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1px solid; margin-right: 8px; vertical-align: -2px; }
.bz-art .monate-chips label.chip:has(input:checked) { background: #FBDCE7; border-color: #F090B5; color: #8A2C50; }
.bz-vorschau { display: grid; gap: 2px; margin-top: 6px; padding: 12px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); }

/* ---- Sandra (29.09.2026, 14th round) ---- */
/* Start page: her welcome as a folded introduction in the hero. The first line stands, the text below
   fades out softly; „Mehr anzeigen" opens it with a short movement. No box – it belongs to the hero text. */
@property --willkommen-klar { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.willkommen { max-width: 60ch; margin: 0 0 22px; scroll-margin-top: 96px; }
.willkommen h2 { font-family: var(--display); font-weight: 600; font-size: clamp(1.3rem, 2.6vw, 1.55rem); font-variation-settings: "SOFT" 50, "opsz" 36; letter-spacing: -.01em; color: var(--pink-lila-ink); margin: 0 0 6px; }
.willkommen-text { --willkommen-klar: 0%; max-height: 4.9em; overflow: hidden; color: var(--ink); line-height: 1.6;
  -webkit-mask-image: linear-gradient(to bottom, #000 var(--willkommen-klar), transparent 100%); mask-image: linear-gradient(to bottom, #000 var(--willkommen-klar), transparent 100%);
  transition: max-height .4s cubic-bezier(.3, .1, .2, 1), --willkommen-klar .4s ease; }
.willkommen-text > p { margin: 0 0 .9em; }
.willkommen-text > p:last-child { margin-bottom: 0; }
.willkommen.auf .willkommen-text { --willkommen-klar: 100%; }
.willkommen .sb-klapp-knopf { margin-top: 8px; }
.willkommen .sb-klapp-knopf .ic { transition: transform .3s ease; }
.willkommen.auf .sb-klapp-knopf .ic { transform: rotate(180deg); }
.hero .lead:has(+ .willkommen) { margin-bottom: 16px; }

/* Steckbrief-Editor: photos smaller, so the way down to the text fields is short.
   The main photo of a slot is as small as the further ones; they stand in one row and wrap. */
.foto-slot .slot-bild { max-width: 132px; }
.foto-slot .slot-bild .upload-over { left: 5px; right: 5px; bottom: 5px; padding: 4px 8px; font-size: .78rem; gap: 4px; justify-content: center; }
.foto-slot .slot-bild .upload-over .ic { width: 16px; height: 16px; flex: none; }
.foto-slot .slot-bild .slot-del { width: 30px; height: 30px; top: 5px; right: 5px; }
.foto-slot .mehr-fotos { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.foto-slot .mehr-foto { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 8px; align-items: center; }
.foto-slot .mehr-foto .t-cap { margin-top: 0; width: 100%; min-width: 0; }
.foto-slot .mehr-foto .slot-del { width: 28px; height: 28px; top: 4px; right: 4px; }
.foto-slot .upload-mehr { aspect-ratio: auto; min-height: 52px; flex-direction: row; gap: 8px; padding: 6px 12px; }
@media (max-width: 599px) {
  .foto-slot .slot-bild { max-width: 120px; }
  .foto-slot .mehr-fotos { grid-template-columns: minmax(0, 1fr); }
  .foto-slot .upload-mehr { aspect-ratio: auto; min-height: 52px; }
}

/* ---- Sandra (01.10.2026, 15th round) ---- */
/* Start page: the welcome text sits in its own soft field, set apart from the headline and lead above it */
.willkommen { padding: 18px 20px 16px; border-radius: var(--leaf); background: var(--lav-soft); border: 1px solid var(--lav); max-width: none; }
.willkommen-text { --fade: var(--lav-soft); }
.willkommen .sb-klapp-knopf { background: var(--surface); }
.hero .lead:has(+ .willkommen) { margin-bottom: 20px; }
@media (min-width: 900px) { .willkommen { max-width: 62ch; } }

/* Start page: the Bestandsliste below the glossary – quieter and in its own colour */
.bestand-kachel { border-color: var(--rose); background: var(--rose-soft); }
.bestand-kachel .gk-text span span { display: inline; font-weight: 700; color: var(--ink); }
.bestand-kachel > .ic { color: var(--rose-deep); }
.bestand-kachel .gk-los { border-color: var(--rose-deep); color: var(--rose-deep); }
.bestand-kachel:hover { border-color: var(--rose-deep); }
.bestand-kachel:hover .gk-los { background: var(--rose-deep); color: #fff; }

/* Filter + editor: everything about the scent folds into one block */
.duft-klapp { margin: 18px 0 0; border: 1.5px solid var(--line-strong); border-radius: var(--leaf-sm); background: var(--surface); }
.duft-klapp > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 6px 12px 6px 14px; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.duft-klapp > summary::-webkit-details-marker { display: none; }
.duft-klapp > summary h3, .duft-klapp > summary .lbl { margin: 0; display: flex; align-items: center; gap: 8px; }
.duft-klapp > summary h3 .muted { text-transform: none; letter-spacing: 0; font-weight: 400; }
.duft-klapp > summary .ic:first-child { color: var(--rose-deep); }
.duft-pfeil { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 50%; border: 1.5px solid var(--line-strong); color: var(--muted); flex: none; transition: transform .25s ease; }
.duft-klapp[open] > .duft-pfeil, .duft-klapp[open] > summary .duft-pfeil { transform: rotate(180deg); }
.duft-klapp > summary:hover .duft-pfeil { background: var(--lav-soft); color: var(--lav-ink); }
.duft-inhalt { padding: 0 14px 14px; border-top: 1px solid var(--line); }
.duft-inhalt > h3:first-child { margin-top: 14px; }
.ed-card > .duft-klapp { margin: 14px 0; padding: 0; border-top: 1.5px solid var(--line-strong); }
.ed-card > .duft-klapp > summary .lbl { margin: 0; color: var(--lav-ink); }
.ed-card .duft-inhalt > .field-g { padding: 14px 0 0; }
.ed-card .duft-inhalt > .field-g + .field-g { padding-top: 14px; }

/* Lists: after „Filter anwenden" the page stands here – below the sticky header, never behind it */
#ergebnisse { scroll-margin-top: 78px; }
@media (min-width: 900px) and (max-width: 1999px) { #ergebnisse { scroll-margin-top: 118px; } }

/* Steckbrief: Herkunft & Züchtung – every item in its own soft, rounded frame */
.herkunft { display: grid; gap: 10px; margin: 0; grid-template-columns: 1fr; }
@media (min-width: 720px) { .herkunft { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.herkunft .hk { min-width: 0; padding: 12px 14px; border-radius: var(--leaf-sm); background: var(--lav-soft); border: 1px solid var(--lav); }
.herkunft .hk-fundort, .herkunft .hk-gefunden_von { background: var(--teal-soft); border-color: var(--teal); }
.herkunft .hk-zuechter, .herkunft .hk-zuechterkennung, .herkunft .hk-kreuzung { background: var(--rose-soft); border-color: var(--rose); }
.herkunft dt { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin: 0 0 4px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.herkunft dd { margin: 0; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.sb-klapp-inhalt { max-height: 15em; }

/* „Was möchtest du speichern?" – one small window over the dimmed page */
.wahl { position: fixed; inset: 0; z-index: 115; display: flex; align-items: flex-end; justify-content: center; padding: 12px; background: rgba(42,35,51,.45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
@media (min-width: 640px) { .wahl { align-items: center; } }
.wahl-box { position: relative; width: min(440px, 100%); padding: 18px 18px 16px; background: var(--surface); border-radius: var(--leaf); box-shadow: 0 24px 60px -20px rgba(42,35,51,.6); }
.wahl-box h2 { font-size: 1.15rem; margin: 0 0 12px; padding-right: 40px; }
.wahl-name { margin: 0 0 4px; padding-right: 40px; font-size: .9rem; font-weight: 700; color: var(--muted); overflow-wrap: anywhere; }
.wahl-x { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.wahl-x:hover { background: var(--lav-soft); color: var(--lav-ink); }
.wahl-opt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; margin: 0 0 8px; padding: 10px 14px; border: 1.5px solid var(--line-strong); border-radius: 14px; background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.wahl-opt:hover { border-color: var(--lav-deep); background: var(--lav-soft); }
/* a variant that is not on offer: shown, but not to choose */
.wahl-opt:disabled, .wahl-opt:disabled:hover { opacity: .5; cursor: default; border-color: var(--line-strong); background: var(--surface); }
.wahl-opt.on { border-color: var(--ral-6027); background: #F1FAF9; }
.wahl-opt > .ic { color: var(--lav-deep); }
.wahl-opt.on > .ic { color: var(--ral-6027-ink); }
.wahl-opt b { display: block; font-size: 1rem; line-height: 1.25; }
.wahl-opt small { display: block; color: var(--muted); font-size: .88rem; line-height: 1.3; margin-top: 2px; }
.wahl-zurueck { display: inline-block; margin-top: 4px; font-weight: 700; cursor: pointer; }

/* Meine Steckbriefsammlung: long names wrap inside their row */
.merk-liste .list-row > a:nth-child(2) { min-width: 0; }

/* Fachbegriffe A–Z: category chips, the kind of a term, other names */
.gl-kat { margin: 0 0 12px; }
.gl-kat .chip { min-height: 36px; padding: 0 12px; font-size: .9rem; }
.gl-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; }
.gl-tags .pill { font-size: .76rem; padding: 1px 9px; }
.bi-art { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--rose-soft); color: var(--rose-deep); font-size: .74rem; font-weight: 700; vertical-align: 2px; }

/* Allgemeine Pflegehinweise: one calm page – introduction, contents, chapters */
.pflege-seite h1 { font-size: clamp(1.9rem, 4.6vw, 2.8rem); margin-bottom: 6px; }
.pflege-unter { margin: 0 0 18px; font-size: 1.15rem; font-weight: 700; color: var(--pink-lila-ink); }
.pflege-kopf { max-width: 72ch; }
.pflege-einleitung { background: var(--teal-soft); border-color: var(--teal); }
.pflege-einleitung .willkommen-text { --fade: var(--teal-soft); }
.pflege-inhalt { max-width: 72ch; margin: 26px 0 8px; padding: 16px 18px 12px; border-radius: var(--leaf); background: var(--surface); border: 1.5px solid var(--line-strong); box-shadow: var(--shadow); scroll-margin-top: 78px; }
.pflege-inhalt h2 { font-size: 1.15rem; margin: 0 0 8px; }
.pflege-inhalt ol { list-style: none; margin: 0; padding: 0; }
.pflege-inhalt li + li { border-top: 1px solid var(--line); }
.pflege-inhalt a { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 4px; color: var(--ink); text-decoration: none; font-weight: 700; border-radius: 8px; }
.pflege-inhalt a .num { flex: none; width: 1.6em; color: var(--muted); }
.pflege-inhalt a span:not(.num) { flex: 1; min-width: 0; }
.pflege-inhalt a .ic { color: var(--lav-deep); opacity: 0; transition: opacity .15s ease, transform .15s ease; }
.pflege-inhalt a:hover { background: var(--lav-soft); color: var(--lav-ink); }
.pflege-inhalt a:hover .ic { opacity: 1; transform: translateX(2px); }
.pflege-kapitel { max-width: 72ch; }
.kapitel { padding: 34px 0 6px; scroll-margin-top: 78px; }
.kapitel + .kapitel { border-top: 1px solid var(--line); }
.kapitel h2 { font-family: var(--display); font-weight: 600; font-size: clamp(1.4rem, 3vw, 1.8rem); font-variation-settings: "SOFT" 50, "opsz" 36; letter-spacing: -.01em; line-height: 1.2; margin: 0 0 14px; }
.kapitel h2 .num { color: var(--muted); font-weight: 500; }
.kapitel .prose { max-width: none; }
.kapitel .prose p { margin-bottom: .9em; }
.kapitel .prose ul { margin: 0 0 1em; padding-left: 1.3em; }
.kapitel .prose strong { color: var(--pink-lila-ink); }
.kapitel-bild { max-width: 560px; margin: 0 0 16px; }
.kapitel-hoch { display: inline-block; margin: 4px 0 8px; font-size: .88rem; color: var(--muted); text-decoration: none; }
.kapitel-hoch:hover { color: var(--lav-deep); text-decoration: underline; }
.pflege-weiter { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); }
@media (min-width: 900px) and (max-width: 1999px) { .kapitel, .pflege-inhalt { scroll-margin-top: 118px; } }

/* Editor: a flowering whose end is still open */
.bz-offen { color: var(--muted); font-weight: 400; font-size: .9rem; }

/* ---- Sandra (02.10.2026, 16th round) ---- */
/* Start page: the introduction alone at the top (no portrait any more), full width, text kept readable */
.hero.hero-neu { grid-template-columns: 1fr; padding-bottom: 6px; }
.hero-neu .hero-text { min-width: 0; }
.hero-neu .lead, .hero-neu .willkommen { max-width: 62ch; }
@media (min-width: 900px) { .hero.hero-neu { grid-template-rows: auto; } .hero-neu .hero-text { grid-column: 1; grid-row: 1; } }

/* „Neue Hoyas entdecken": one row of tall photos, swiped natively, snapping to each photo; the row bleeds to the
   screen edges and keeps the page padding as its own inner padding, so the first photo lines up with the text */
.entdecken { padding-top: 14px; padding-bottom: 6px; }
.entdecken .section-head { margin-bottom: 12px; }
.story-wrap { position: relative; margin: 0 calc(-1 * var(--pad)); }
.story {
  list-style: none; margin: 0; padding: 4px var(--pad) 10px; position: relative;
  display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); -webkit-overflow-scrolling: touch;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.story::-webkit-scrollbar { display: none; }
.story.gleitet, .story.greift { scroll-snap-type: none; }
.story.greift, .story.greift a { cursor: grabbing; user-select: none; }
.story-item { flex: 0 0 auto; width: min(66vw, 300px); scroll-snap-align: start; min-width: 0; }
@media (min-width: 640px) { .story-item { width: 236px; } .story { gap: 16px; } }
@media (min-width: 1100px) { .story-item { width: 256px; } .story { gap: 18px; } }
.story-item a { display: block; text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent; }
.story-item a:focus-visible { outline: none; }
.story-item a:focus-visible .story-bild { outline: 3px solid var(--lav-deep); outline-offset: 3px; }
/* Sandra (19.10.2026): square like the other cards; the photo stays whole on the plain photo ground */
.story-bild { display: block; aspect-ratio: 1; border-radius: var(--leaf); overflow: hidden; background: var(--foto-grund); box-shadow: 0 10px 28px -16px rgba(42,35,51,.45); }
.story-bild img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .6s ease; }
@media (hover: hover) { .story-item a:hover .story-bild img { transform: scale(1.03); } }
.story-name { display: block; margin: 9px 2px 0; font-weight: 700; font-size: .95rem; line-height: 1.25; overflow-wrap: anywhere; }
.story-preis { display: block; margin: 1px 2px 0; font-size: .86rem; color: var(--muted); }
.story-reserviert { margin: 6px 2px 0; } /* Fabian 21.10.2026: the hint belongs here too */
.story-item a:hover .story-name { color: var(--lav-deep); }
/* arrows for the mouse only – on the phone the row is swiped */
.story-pfeil {
  position: absolute; top: 40%; z-index: 3; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line);
  display: none; align-items: center; justify-content: center; padding: 0; background: rgba(255,255,255,.94); color: var(--ink);
  box-shadow: 0 6px 20px -8px rgba(42,35,51,.5); cursor: pointer; transform: translateY(-50%); transition: opacity .2s ease, background .15s ease;
}
.story-links { left: calc(var(--pad) - 12px); } .story-rechts { right: calc(var(--pad) - 12px); }
.story-pfeil:hover { background: var(--lav-soft); color: var(--lav-ink); }
.story-pfeil[disabled] { opacity: 0; pointer-events: none; }
@media (pointer: fine) { .story-pfeil { display: inline-flex; } }

/* „Oder suchst du etwas Bestimmtes?" – search and filter right below the row */
.suche-start { padding-top: 22px; padding-bottom: 10px; }
.suche-start .section-head { margin-bottom: 12px; }
.suche-start .start-suche { margin-top: 0; max-width: none; min-width: 0; }
/* Sandra (31.10.2026): the start page filter as a wide, coloured button under the search field */
.start-filter { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; margin-top: 10px; padding: 8px 18px; border: 2px solid var(--pink-lila); border-radius: 16px; background: var(--lav-soft); color: var(--lav-ink); font: inherit; text-align: left; cursor: pointer; }
.start-filter > span { flex: 1; display: grid; gap: 1px; min-width: 0; }
.start-filter b { font-size: 1.08rem; }
.start-filter small { color: var(--muted); font-size: .9rem; }
.start-filter .ic { flex: none; color: var(--pink-lila); }
.start-filter .start-filter-pfeil { transition: transform .2s; }
.start-filter.on { background: var(--pink-lila); color: #fff; }
.start-filter.on small, .start-filter.on .ic { color: #fff; }
.start-filter.on .start-filter-pfeil { transform: rotate(180deg); }
/* Sandra (31.10.2026): the page for an address that does not exist – search and the ways to the Hoyas */
.fehlerseite { max-width: 640px; }
.fehlerseite .empty h1 { font-size: clamp(1.5rem, 4vw, 2rem); margin: 10px 0 6px; }
.fehler-suche { margin: 6px 0 14px; }
.fehler-wege { justify-content: center; gap: 10px; }
.suche-start .start-suche .searchbar, .suche-start .start-suche .hinweis { max-width: 640px; }

/* Tiles: „Aktuell verfügbar" two tiles wide and in the colour of the buttons; the „Neu" tile is gone */
.tiles-start .tile-verfuegbar {
  grid-column: span 2; border-color: transparent; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, rgba(255,255,255,.22) 0%, transparent 55%), linear-gradient(135deg, var(--pink-lila) 0%, var(--lav-deep) 100%);
  box-shadow: 0 14px 34px -18px rgba(134,40,122,.75);
}
.tiles-start .tile-verfuegbar:hover { color: #fff; box-shadow: 0 18px 38px -18px rgba(134,40,122,.9); }
.tiles-start .tile-verfuegbar .ic { color: #fff; }
.tiles-start .tile-verfuegbar strong { font-family: var(--display); font-weight: 600; font-size: clamp(1.35rem, 3vw, 1.7rem); letter-spacing: -.01em; }
.tiles-start .tile-verfuegbar span { color: rgba(255,255,255,.88); font-size: .98rem; }
.tiles-start .tile-verfuegbar .num { font-weight: 700; color: #fff; }
/* five tiles: 2+1 / 3 on the tablet, one row of six columns on the desktop; the „odd last tile" rule does not apply here */
@media (min-width: 1000px) { .tiles-start { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 639px) { .tiles-start > .tile:last-child:nth-child(odd) { grid-column: auto; } }
@media (min-width: 640px) and (max-width: 999px) { .tiles-start > .tile:last-child:nth-child(3n+1) { grid-column: auto; } }

/* Steckbrief: the care section folds – heading bar as before, a tap opens text and chapters */
.sb-details { padding: 0; }
.sb-details > summary { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 14px 12px 18px; list-style: none; cursor: pointer; background: var(--lav-soft); color: var(--lav-ink); border-radius: calc(22px - 1.5px); -webkit-tap-highlight-color: transparent; }
.sb-details > summary::-webkit-details-marker { display: none; }
.sb-details > summary h2 { margin: 0; font-size: 1.15rem; color: var(--lav-ink); }
.sb-details > summary .sb-details-hint { flex: 1; min-width: 0; text-align: right; }
.sb-details > summary .duft-pfeil { background: var(--surface); }
.sb-details[open] > summary { border-bottom: 1.5px solid var(--line-strong); border-radius: calc(22px - 1.5px) calc(22px - 1.5px) 0 0; }
.sb-details[open] > summary .duft-pfeil { transform: rotate(180deg); }
.sb-details[open] > summary .sb-details-hint { display: none; }
.sb-details-body { padding: 16px 18px 20px; }
.sb-details-body > p:first-child { margin-top: 0; }
@media (min-width: 720px) { .sb-details > summary { padding: 14px 18px 14px 24px; } .sb-details-body { padding: 18px 24px 24px; } }
@media (max-width: 420px) { .sb-details > summary .sb-details-hint { display: none; } }

/* Full-screen gallery: our own gestures (pinch, pan, double tap, swipe down) – the browser keeps its hands off */
.lb { touch-action: none; background: rgba(28,22,36, var(--lb-dunkel, 1)); }
.lb-img { transform-origin: center center; will-change: transform; cursor: zoom-in; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.lb.gezoomt .lb-img { cursor: grab; }
.lb.gezoomt:active .lb-img { cursor: grabbing; }
.lb.gezoomt .lb-pfeil, .lb.gezoomt .lb-foot { opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.lb-pfeil, .lb-foot { transition: opacity .2s ease; }
.lb-x { width: 50px; height: 50px; background: rgba(255,255,255,.22); }

/* ---- Sandra (04.10.2026, 18th round) ---- */
/* Header: „Hoyshoyahouse" alone is the wordmark, in Great Vibes (OFL, served from our own server – no Google).
   Light: the light page colour with a dark plum script; dark (system setting): the dark aubergine of the full-screen
   view with a light rose-lavender script. The site itself has no dark mode – only the header follows the system. */
@font-face { font-family: "Great Vibes"; src: url("../fonts/great-vibes.f1679db5a031.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
.top-seite { --kopf-grund: rgba(251,248,253,.92); --kopf-schrift: #5A2F59; --kopf-nav: var(--ink); --kopf-linie: var(--line); }
@media (prefers-color-scheme: dark) {
  .top-seite { --kopf-grund: rgba(28,22,36,.97); --kopf-schrift: #EAB8E2; --kopf-nav: #EDE6F3; --kopf-linie: #3A2F45; }
  .top-seite .top-nav a:hover, .top-seite .top-nav a[aria-current] { background: rgba(234,184,226,.14); color: #F6DDF1; }
}
.top-seite { background: var(--kopf-grund); border-bottom-color: var(--kopf-linie); }
.top-seite .top-nav a { color: var(--kopf-nav); }
/* Sandra (09.10.2026): the wordmark is now her design as an image (static/img/wortmarke-verlauf.png, cut out of
   her template, 840 px wide for sharp phones). Only the height is set; the width follows the image (ratio about 3.6 : 1). */
.wortmarke { display: block; flex: none; padding: 4px 4px 2px 0; line-height: 0; }
.wortmarke picture, .wortmarke img { display: block; }
.wortmarke img { height: clamp(46px, 13vw, 56px); width: auto; max-width: 100%; }
.wortmarke:hover { opacity: .85; }
@media (min-width: 900px) { .wortmarke img { height: 62px; } }
/* small phones: the full name stays readable next to the round WhatsApp button */
@media (max-width: 359px) { .wortmarke img { height: 42px; } }
.wortmarke-fuss { display: inline-block; padding: 0; }
.wortmarke-fuss img { height: 58px; }

/* Footer: „Vertrag widerrufen" clearly visible under Rechtliches (§ 356a BGB) */
.foot-widerruf { margin-top: 12px; border-color: var(--pink-lila); color: var(--pink-lila-ink); }
.foot-widerruf:hover { background: var(--pink-lila); border-color: var(--pink-lila); color: #fff; }
.rechtstext .foot-widerruf { margin-top: 0; }
.rechtstext .prose h3 { font-size: 1.12rem; }

/* Vertrag widerrufen: two steps, the check as a quiet list, the confirm button unmistakable */
.widerruf h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); }
.widerruf .lead { max-width: 62ch; }
.widerruf-form { max-width: 620px; margin-top: 8px; }
.widerruf-schritte { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.widerruf-schritte span { padding: 6px 14px; border-radius: 999px; background: var(--lav-soft); color: var(--muted); font-weight: 700; font-size: .92rem; }
.widerruf-schritte span.on { background: var(--pink-lila); color: #fff; }
.widerruf-form input[type=date] { width: 100%; min-height: 52px; padding: 10px 14px; border: 1.5px solid var(--line-strong); border-radius: 12px; font: inherit; background: var(--surface); color: var(--ink); }
.widerruf-daten { display: grid; gap: 10px; max-width: 620px; margin: 0 0 16px; }
.widerruf-daten > div { padding: 12px 14px; border-radius: var(--leaf-sm); background: var(--surface); border: 1.5px solid var(--line-strong); min-width: 0; }
.widerruf-daten dt { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 2px; }
.widerruf-daten dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.widerruf-text { max-width: 620px; padding: 14px 16px; border-radius: var(--leaf-sm); background: var(--rose-soft); color: var(--ink); }
.widerruf-bestaetigen { min-width: 240px; }
.widerruf-fuss { max-width: 62ch; margin-top: 24px; }
.widerruf-ok { display: flex; gap: 14px; align-items: flex-start; max-width: 620px; margin-bottom: 14px; padding: 18px; border-radius: var(--leaf); background: #E3F3F1; color: var(--ral-6027-ink); }
.widerruf-ok > .ic { flex: none; margin-top: 4px; }
.widerruf-ok h1 { font-size: clamp(1.4rem, 3.4vw, 1.9rem); margin: 0 0 6px; color: var(--ral-6027-ink); }
.widerruf-ok p { margin: 0; }

/* Versand: the photos right under „Versand", whole and in their own proportions */
.versand-fotos { display: grid; gap: 16px; max-width: 72ch; margin: 4px 0 8px; }
.versand-fotos figure { margin: 0; }
.versand-foto { display: block; width: 100%; padding: 0; border: 0; background: var(--foto-grund); border-radius: var(--leaf); overflow: hidden; cursor: zoom-in; }
.versand-foto img { width: 100%; height: auto; }

/* Steckbrief: „Allgemeine Pflegehinweise" – the first three chapters always in view, the rest folds */
.sb-pflege > h2 .ic { color: var(--lav-deep); }
.sb-pflege-liste { list-style: none; margin: 0; padding: 0; }
.sb-pflege-liste li + li { border-top: 1px solid var(--line); }
.sb-pflege-liste a { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 6px 4px; color: var(--ink); text-decoration: none; font-weight: 700; border-radius: 8px; }
.sb-pflege-liste a .num { flex: none; width: 1.6em; color: var(--muted); }
.sb-pflege-liste a span:not(.num) { flex: 1; min-width: 0; }
.sb-pflege-liste a .ic { color: var(--lav-deep); }
.sb-pflege-liste a:hover { background: var(--lav-soft); color: var(--lav-ink); }
.sb-pflege > p.sb-pflege-mehr { margin: 12px 0 0; }
.sb-pflege.js:not(.auf) .sb-pflege-mehr { display: none; }
.sb-pflege.auf .sb-klapp-knopf .ic { transform: rotate(180deg); }

/* Steckbrief on the phone: the video of the mother plant takes the place of „Angebot hinzufügen" */
.sb-video { display: none; }
@media (max-width: 899px) {
  .sb-intern { display: none; }
  .sb-video { display: flex; align-items: center; gap: 12px; margin-top: 12px; min-height: 58px; padding: 8px 16px 8px 8px; border-radius: 999px;
    background: linear-gradient(135deg, var(--rose-soft) 0%, var(--lav-soft) 100%); border: 1.5px solid var(--rose); color: var(--pink-lila-ink); text-decoration: none; box-shadow: 0 8px 20px -14px rgba(134,40,122,.6); }
  .sb-video:hover, .sb-video:active { color: var(--pink-lila-ink); border-color: var(--pink-lila); }
  .sb-video-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--pink-lila); color: #fff; }
  .sb-video-ic .ic { fill: currentColor; margin-left: 2px; }
  .sb-video-text { flex: 1; min-width: 0; font-size: 1.02rem; }
  .sb-video > .ic { flex: none; opacity: .8; }
}

/* Steckbrief-Editor: a category with a choice turns green – orientation only (the scent block stays as it is) */
.mk-feld { transition: background .15s ease, border-color .15s ease; border-radius: 12px; }
.mk-feld:has(input:checked) { background: #EAF6F4; box-shadow: inset 4px 0 0 var(--ral-6027); margin-left: -10px; margin-right: -10px; padding: 12px 10px; }
.mk-feld:has(input:checked) > .lbl { color: var(--ral-6027-ink); }
.mk-feld:has(input:checked) > .lbl::after { content: "✓"; margin-left: 8px; color: var(--teal-deep); font-weight: 700; }

/* Back office: the status / story picture of an offer */
.story-dlg { position: fixed; inset: 0; z-index: 115; display: flex; align-items: flex-end; justify-content: center; padding: 12px; background: rgba(42,35,51,.5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
@media (min-width: 640px) { .story-dlg { align-items: center; } }
.story-box { position: relative; width: min(460px, 100%); max-height: calc(100dvh - 24px); overflow-y: auto; padding: 16px 16px 14px; background: var(--surface); border-radius: var(--leaf); box-shadow: 0 24px 60px -20px rgba(42,35,51,.6); }
.story-box h2 { font-size: 1.15rem; margin: 0 0 12px; padding-right: 44px; }
.story-vorschau { display: flex; align-items: center; justify-content: center; aspect-ratio: 9 / 16; max-height: 56dvh; margin: 0 auto 10px; border-radius: 14px; overflow: hidden; background: var(--foto-grund); }
.story-vorschau img { width: 100%; height: 100%; object-fit: contain; }
.story-fotos { display: flex; gap: 6px; overflow-x: auto; margin: 0 0 12px; padding-bottom: 2px; }
.story-fotos .photo { flex: 0 0 56px; height: 56px; aspect-ratio: 1; padding: 0; border: 2px solid transparent; border-radius: 10px; cursor: pointer; }
.story-fotos .photo.on { border-color: var(--pink-lila); }
.story-fotos .photo img { object-fit: cover; }
.story-box .btn-row .btn { flex: 1 1 160px; }
.story-box .btn.is-aus { opacity: .5; pointer-events: none; }

/* Pflegebereich „E-Mails" (05.10.2026): each mail as it arrives, full width, with when and to whom */
.mail-vorlage { padding: 20px 0 24px; border-bottom: 1px solid var(--line); }
.mail-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.mail-kopf h2 { margin: 0; font-size: 1.15rem; }
.mail-wann { margin: 8px 0 0; }
.mail-rahmen { display: block; width: 100%; height: 640px; margin: 14px 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r); background: #fff; }

/* Filter as a window over the page (Fabian, 05.10.2026): before, the sheet opened inside the page with a scroll
   area of its own – page and sheet scrolled at once. Now the page stands still behind a dimmed backdrop, only
   the filters scroll, head (X) and buttons stay. Phone: from the bottom with a strip of the page visible above. */
html.filter-offen { overflow: hidden; }
.sheet-dlg { position: fixed; inset: 0; z-index: 110; display: flex; align-items: flex-end; justify-content: center; padding: 56px 0 0; background: rgba(42,35,51,.5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.sheet-dlg .sheet { width: 100%; max-height: 100%; margin: 0; border: 0; border-radius: 22px 22px 0 0; box-shadow: 0 -12px 40px -16px rgba(42,35,51,.5); overflow: hidden; scroll-margin: 0; }
.sheet-kopf { flex: none; display: flex; align-items: center; gap: 6px; padding: 8px 16px 8px 8px; border-bottom: 1px solid var(--line); }
.sheet-kopf h2 { margin: 0; font-size: 1.15rem; }
.sheet-zu { width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.sheet-zu:hover { background: var(--lav-soft); }
.sheet-dlg .sheet-body { overscroll-behavior: contain; }
.sheet-dlg .sheet-actions { position: static; border-radius: 0; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
@media (min-width: 700px) {
  .sheet-dlg { align-items: center; padding: clamp(1.5rem, 5vw, 4rem); }
  .sheet-dlg .sheet { border-radius: var(--leaf); box-shadow: 0 24px 60px -20px rgba(42,35,51,.6); }
  .sheet-dlg .sheet-actions { padding-bottom: 12px; }
}

/* ---- Sandra (07.10.2026): „Dein Steckbrief" – three functions, each with its own button ---- */
/* „Zur Steckbriefsammlung" (inside the website) · „Auf Handy speichern" (picture) · „A4-Steckbrief drucken" (print sheet):
   one below the other under the small heading; „Teilen" keeps its own row below */
.sb-eigen { display: grid; gap: 8px; margin-top: 16px; }
.sb-eigen-titel { margin: 0 0 0 4px; font: inherit; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sb-eigen > button, .sb-eigen > a, .sb-neben > a {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 6px 14px;
  border: 1.5px solid var(--ral-6027); border-radius: 999px; background: #F1FAF9; color: var(--ral-6027-ink);
  font: inherit; font-weight: 700; font-size: .95rem; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer;
}
/* filled means „is in the collection" – a tap must not leave another button looking filled, so hover only with a mouse */
.sb-eigen .btn-merk.on { background: var(--ral-6027); color: var(--ral-6027-ink); border-color: var(--ral-6027); }
@media (hover: hover) { .sb-eigen > button:hover, .sb-eigen > a:hover, .sb-neben > button:hover, .sb-neben > a:hover { background: var(--ral-6027); color: var(--ral-6027-ink); } }
.sb-eigen .ic, .sb-neben > a .ic { flex: none; }
.sb-neben { flex-wrap: wrap; }
.sb-neben > a { flex: 1 1 auto; min-height: 44px; font-size: .88rem; padding: 4px 10px; }
/* on the phone the video of the mother plant has its own large button (.sb-video) */
@media (max-width: 899px) { .sb-neben > a.sb-video-breit { display: none; } }
@media print { .sb-eigen { display: none; } }
/* the window: first the choice „Hell | Dunkel", then the picture */
.steckbild-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 12px; }
.steckbild-wahl button { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 6px 12px; border: 1.5px solid var(--line-strong); border-radius: 14px; background: var(--surface); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.steckbild-wahl button:hover { border-color: var(--lav-deep); }
.steckbild-wahl button.on { border-color: var(--ral-6027); background: #F1FAF9; color: var(--ral-6027-ink); box-shadow: inset 0 0 0 1px var(--ral-6027); }
.steckbild-wahl i { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-strong); }
.steckbild-wahl .hell i { background: #FFFDFC; }
.steckbild-wahl .dunkel i { background: #1C1624; border-color: #1C1624; }
/* the window (frame: .story-dlg / .story-box): the long picture scrolls inside its preview */
.steckbild-vorschau { max-height: 56dvh; overflow-y: auto; overscroll-behavior: contain; margin: 0 0 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--foto-grund); -webkit-overflow-scrolling: touch; }
.steckbild-vorschau.leer { display: flex; align-items: center; justify-content: center; min-height: 180px; padding: 16px; text-align: center; }
.steckbild-vorschau img { display: block; width: 100%; height: auto; }
.steckbild-vorschau p { margin: 0; }
.steckbild-fehler { color: var(--rose-deep); font-weight: 700; }
.steckbild-hinweis { margin: 0 0 10px; font-size: .9rem; color: var(--muted); }
.steckbild-box .btn-row + .steckbild-hinweis { margin: 10px 0 0; }

/* Steckbrief-Kopf luftiger (Sandra, 10.10.2026): the name in a soft botanical italic (Fraunces italic, light weight,
   „SOFT" 100) and about 11 % smaller; more room under the wordmark, under the name and above the main button
   (logo → name 30 px > name → availability 20 px > availability → button 18 px) */
.sb-kopf { padding-top: 14px; }  /* + 16 px of .sb-head = 30 px under the header; only the profile, not „Über mich" */
.sb-kopf h1 { font-style: italic; font-weight: 400; font-size: clamp(1.6rem, 6.5vw, 2.8rem); line-height: 1.16;
  letter-spacing: -.005em; font-variation-settings: "SOFT" 100, "opsz" 144; }
.sb-verfuegbar { margin-top: 20px; }
.sb-haupt { margin-top: 18px; }

/* „Schreib mir" top right (Sandra, 10.10.2026): the colours of the WhatsApp app (green, white sign and text), with its
   text also on the phone, and always lower than the wordmark next to it (the start page has no WhatsApp button any more) */
.top-cta.btn-wa { background: #25D366; color: #fff; min-height: 40px; height: 40px; padding: 0 14px; font-size: .92rem; }
.top-cta.btn-wa:hover { background: #1EBE5A; color: #fff; }
@media (max-width: 520px) {
  .top-cta.btn-wa { width: auto; height: 38px; min-height: 38px; padding: 0 12px; gap: 6px; }
  .top-cta.btn-wa span { display: inline; }
}

/* „Mehr anzeigen" in the welcome on the start page (Sandra, 10.10.2026): the button in the rose of its heading
   „Schön, dass du da bist!", white text for contrast – text, arrow, shape and place stay */
.hero .willkommen:not(.pflege-einleitung) .sb-klapp-knopf { background: var(--pink-lila-ink); border-color: var(--pink-lila-ink); color: #fff; }
.hero .willkommen:not(.pflege-einleitung) .sb-klapp-knopf:hover { background: var(--pink-lila); border-color: var(--pink-lila); color: #fff; }

/* Untere Leiste (Sandra, 10.10.2026): „Meine" / „Steckbriefsammlung" on two lines, both words the same size, no hyphen.
   The columns follow the length of their words (measured in Hoya Sans bold: „Steckbriefsammlung" ≈ 9.8 em,
   „Anfrageliste" ≈ 5.8 em), so all four tabs keep .74rem down to about 300 px; on even narrower screens every
   tab gets smaller together. */
.bottom { grid-template-columns: 1fr 1fr 1.35fr 2.2fr; }
.bottom a, .bottom a.zweizeilig { font-size: min(.74rem, calc((39.6vw - 4px) / 10)); }
.bottom a.zweizeilig span:not(.badge) { hyphens: none; white-space: nowrap; }

/* „Dein Steckbrief" (Sandra, 10.10.2026): two rows of two – „Zur Steckbriefsammlung" | „Auf Handy speichern",
   „A4-Steckbrief drucken" | „Teilen" – and lower buttons, so the photo starts higher; a long label may wrap */
.sb-eigen { grid-template-columns: 1fr 1fr; gap: 8px; }
.sb-eigen-titel { grid-column: 1 / -1; }
.sb-eigen > button, .sb-eigen > a { min-height: 42px; padding: 4px 10px; gap: 6px; font-size: .88rem; line-height: 1.15; border-radius: 22px; }

/* Eigenschaften on the phone (Sandra, 10.10.2026): the name above the value, a little smaller and a little apart,
   the value about 16 px with more line height; nothing below 13 px – the month names of the flowering time and its
   legend („geschätzt") included, so on narrow screens the months stand in two rows of six */
.trait b { font-size: .8125rem; margin-bottom: 5px; }
.trait > div > span { font-size: 1rem; line-height: 1.5; }
.trait .monate-legende, .monate-legende { font-size: .8125rem; }
.monate i, .monate button { font-size: .8125rem; }
@media (max-width: 699px) { .trait .monate { grid-template-columns: repeat(6, 1fr); gap: 4px; } }

/* Suchvorschläge auf der Startseite (Sandra, 10.10.2026): the list spans the whole search row – from the left edge of
   the field to the right edge of the filter button, the same edges as the heading above – instead of only the field.
   Name left, price right in one line; words never break in the middle (only a single word longer than the line would). */
.suche-start .searchbar { position: relative; }
.suche-start .searchbar .suche { position: static; }
.suche-liste a { overflow-wrap: break-word; word-break: normal; hyphens: none; }
.suche-liste .s-name { flex: 1 1 auto; min-width: 0; }

/* Suchzeile auf der Startseite (Sandra, 10.10.2026): field, round search button and „Filter" the same height – the
   filter chip grows to the 52 px of the field, the field stays; gaps, colours, order and the single row stay */
.start-suche .searchbar .chip { min-height: 52px; height: 52px; padding-left: 16px; padding-right: 16px; }

/* very narrow phones (below 360 px): „Schreib mir" with its text and the wordmark did not fit side by side and the
   page could be pushed sideways – both a little smaller there, the text stays */
@media (max-width: 359px) {
  .top-in { gap: 10px; }
  .wortmarke img { height: 38px; }
  .top-cta.btn-wa { padding: 0 10px; gap: 5px; font-size: .84rem; }
}
/* the start tiles pushed the page sideways below about 342 px: a column could not get narrower than its longest
   word („Einzelstücke"). Columns may shrink now; a word that is still too long breaks with a hyphen. */
@media (max-width: 639px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tile { min-width: 0; }
.tile strong { overflow-wrap: break-word; hyphens: auto; }

/* Fußbereich (Sandra, 10.10.2026): shorter on the phone and all of a piece */
.foot-claim { margin-top: 10px; }
/* the postcode in the figures of the running text (the page uses fixed-width figures for prices); „so geht's" a clear link */
.foot-rabatt { font-variant-numeric: normal; }
.foot .foot-rabatt a { color: var(--pink-lila-ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; font-weight: 700; }
/* every footer link the same colour, visited or not (on Sandra's phone visited links looked greyer) */
.foot a, .foot a:visited { color: var(--ink); }
.foot .foot-rabatt a:visited { color: var(--pink-lila-ink); }
/* Kontakt: round signs in one row, the name underneath; big enough to tap */
.foot .foot-wege { display: grid; grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); gap: 12px 2px; max-width: 420px; }
.foot-in > div { min-width: 0; }
.foot-wege a { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: .8125rem; line-height: 1.2; text-align: center; }
.foot-weg-ic { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; background: var(--lav-soft); color: var(--lav-ink); border: 1px solid var(--lav); }
.foot-wege a:hover .foot-weg-ic { background: var(--lav); color: #fff; }
/* Sandra (11.10.2026): Kontakt on a calm, rounded area in the gradient of the wordmark (pink-lila → violet, the
   „Aktuell verfügbar" tile) – white signs and names, the heading leads to the contact page. No ornaments, no glow. */
.foot-kontakt {
  padding: 16px 8px 18px; border-radius: 18px; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, rgba(255,255,255,.14) 0%, transparent 55%), linear-gradient(135deg, var(--pink-lila) 0%, var(--lav-deep) 100%);
}
.foot .foot-kontakt h4 { margin: 0 6px 14px; }
/* five signs in one row down to 360 px: narrower cells, slightly smaller names */
.foot .foot-kontakt .foot-wege { grid-template-columns: repeat(auto-fit, minmax(54px, 1fr)); }
.foot-kontakt .foot-wege a { font-size: .75rem; }
.foot .foot-kontakt a, .foot .foot-kontakt a:visited { color: #fff; text-decoration: none; }
.foot .foot-kontakt h4 a { color: rgba(255,255,255,.88); }
.foot .foot-kontakt h4 a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.foot-kontakt .foot-weg-ic { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.45); }
.foot-kontakt .foot-wege a:hover .foot-weg-ic { background: rgba(255,255,255,.26); color: #fff; }
/* Rechtliches: a little smaller than the Hoya links, never below 14 px */
.foot .foot-recht a { font-size: .9375rem; }

/* Pflegebereich: a kind word for Sandra at the top of „Meine Angebote" (Thomas, 10.10.2026) */
.pf-gruss { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; padding: 12px 16px; border-radius: var(--leaf-sm);
  background: #FBEAF1; border: 1px solid #F1C6D8; color: var(--pink-lila-ink); font-family: var(--display); font-style: italic;
  font-weight: 500; font-size: 1.05rem; line-height: 1.4; font-variation-settings: "SOFT" 100, "opsz" 36; }
.pf-gruss .ic { flex: none; margin-top: 2px; color: var(--pink-lila); fill: currentColor; fill-opacity: .25; }

/* Sandra (11.10.2026): editor traits side by side where they fit – smaller chips, tighter blocks, less scrolling */
.ed-card .chips { gap: 6px 5px; }
.ed-card .field-g label.chip { display: inline-flex; align-items: center; margin: 0; min-height: 34px; padding: 4px 9px; font-size: .84rem; }
@media (max-width: 480px) { .ed-card { padding: 0 10px; } .ed-card > h2 { margin: 0 -10px; padding: 11px 10px; } }
.ed-card .mk-feld { margin-bottom: 12px; }
.ed-card .mk-feld:has(input:checked) { padding-top: 8px; padding-bottom: 8px; }

/* Sandra (11.10.2026): „Verfügbare Pflanzen ansehen" scrolls to the first heading of the available plants, below the sticky head */
.sb-angebote-bereich .section-head { scroll-margin-top: 84px; }

/* Sandra (11.10.2026): Anfrageliste – „Bewurzelt" and „Einzelstück" side by side under the name */
.list-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.list-row > .list-pills { grid-column: 2 / -1; margin-top: -8px; }
.list-row:has(> .list-pills) > .photo { grid-row: span 2; }
.list-pills .pill { padding: 2px 8px; font-size: .8rem; gap: 0; }
.list-pills .pill::before { display: none; }

/* Steckbrief head (Sandra, 12.10.2026): calmer and around the picture – the name in the middle above the square photo
   (the photo whole, never cropped: object-fit contain on its plain ground), Rarität, the main button with the numbers
   of the plants on offer as a second line, „Diesen Steckbrief", the photo tabs (only existing photos, they wrap), then
   the plants on offer. On the desktop: name and photo left, the rest right, the offers across below. */
.sb-kopf { text-align: center; }
.sb-kopf h1 { text-wrap: balance; }
.sb-bild { min-width: 0; scroll-margin-top: 76px; overflow-x: clip; }
.sb-bild .tab-panel .photo, .sb-bild .thumbs { margin-left: auto; margin-right: auto; }
/* Sandra (14.10.2026): sideways the finger moves the photo (app.js, steckbriefTabs), up and down scrolls the page */
.sb-bild .tab-panel .photo { touch-action: pan-y pinch-zoom; }
/* Sandra (16.10.2026): the photo tabs right under the photo, in one row – never wrapping, never on the photo; the row
   shrinks as a whole (app.js reiterEinpassen sets its font size, everything inside is in em). The tab on show in
   pink-lila (.tab.on), the others light with a fine border. Replaces arrows and dots (14.10.2026). */
.sb-reiter { flex-wrap: nowrap; justify-content: center; gap: .3em; max-width: 620px; margin: 10px auto 0; font-size: 15px; overflow: hidden; }
.sb-reiter .tab { flex: none; min-height: 42px; padding: 0 .6em; border-width: 1px; font-size: 1em; white-space: nowrap; }
@media (min-width: 900px) { .sb-reiter { max-width: 520px; } }
.sb-aktionen { display: grid; gap: 14px; min-width: 0; align-content: start; }
.sb-aktionen > * { margin: 0; }
.sb-aktionen .sb-badges { justify-content: center; }
.sb-aktionen .sb-verfuegbar.aus { display: block; text-align: center; }
.sb-haupt { min-height: 58px; padding-top: 6px; padding-bottom: 6px; }
.sb-haupt-text { display: flex; flex-direction: column; align-items: center; line-height: 1.2; min-width: 0; }
.sb-haupt-text small { font-size: .84rem; font-weight: 400; opacity: .92; margin-top: 2px; }
.sb-aktionen .sb-tabs .tabs { margin-bottom: 0; }
.sb-angebote-bereich { min-width: 0; scroll-margin-top: 76px; margin-top: 6px; }
@media (min-width: 900px) {
  .sb-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "kopf aktionen" "bild aktionen" "angebote angebote"; column-gap: 40px; }
  .sb-kopf { grid-area: kopf; }
  .sb-bild { grid-area: bild; }
  .sb-aktionen { grid-area: aktionen; padding-top: 14px; }
  .sb-angebote-bereich { grid-area: angebote; }
}

/* Hoya name on the profile page (Sandra, 16.10.2026): the same script as the A4 sheet and the phone picture – Allura
   (OFL, our own server): gently curved like the wordmark, but capitals anyone can read (Great Vibes, the first try that
   morning, drew the capital „A" like an „a"/„u" – Sandra: not readable). Larger than a plain font (small lowercase
   letters), a fine outline for a stronger stroke, in the pink-lila of the buttons and the active tab (Sandra: a colour
   the website already has). Before: Fraunces italic (10.10.2026). Only the head of the profile – names on cards stay plain. */
@font-face { font-family: "Allura"; src: url("../fonts/allura.9ff52664b6eb.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
.sb-kopf h1 { font-family: "Allura", "Fraunces", cursive; font-style: normal; font-weight: 400; font-variation-settings: normal;
  font-size: clamp(1.9rem, 8.4vw, 2.9rem); line-height: 1.12;  /* Sandra (17.10.2026): smaller overall */ letter-spacing: .01em; word-spacing: .1em; color: var(--pink-lila);
  -webkit-text-stroke: .03em currentColor;
  padding-inline: .25em; }  /* the script swings past its letters – keep the ink off the screen edge (17.10.2026) */

/* Herbstlaub (Sandra, 18.10.2026, redone the same day after her pictures): drawn leaves (tools/herbstlaub_bauen.py)
   fall slowly over the whole start page while they tumble and sway. Far leaves are blurred and dimmer, a few sharp
   ones pass in front of the content (still below header and bottom bar, never catching a tap).
   Only transform moves, so phones keep it smooth. Each leaf starts its loop already at its place (--y).
   Leaves and their values come from katalog/saison.py; the layer only exists while it is autumn there. */
.herbstlaub { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.herbstlaub.vorn { z-index: 1; }
.herbstlaub > span { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--s) * 1px); height: calc(var(--s) * 1px);
  margin-left: calc(var(--s) * -.5px); opacity: var(--o); will-change: transform;
  animation: laub-fallen calc(var(--f) * 1s) linear infinite; animation-delay: calc(var(--f) * var(--y) * -.01s); }
.herbstlaub i { display: block; width: 100%; height: 100%; will-change: transform;
  background: url("../img/herbst/laub-scharf.5782c7f6f9aa.webp") no-repeat; background-size: 800% 100%; background-position: calc(var(--i) * 100% / 7) 0;
  transform: rotate(calc(var(--r) * 1deg)) scaleX(var(--sx));
  animation: laub-taumeln calc(var(--w) * 1s) ease-in-out infinite; animation-delay: calc(var(--w) * var(--x) * -.01s); }
.herbstlaub .weich i { background-image: url("../img/herbst/laub-unscharf.9455fa6efd7d.webp"); background-size: 600% 100%; background-position: calc(var(--i) * 100% / 5) 0; }
@keyframes laub-fallen {
  from { transform: translateY(calc(var(--y) * -1vh - 80px)); }
  to { transform: translateY(calc((100 - var(--y)) * 1vh + 80px)); }
}
@keyframes laub-taumeln {
  0%, 100% { transform: perspective(300px) translateX(-22px) rotate(calc(var(--r) * 1deg - 28deg)) rotateX(0deg) rotateY(0deg) scaleX(var(--sx)); }
  30% { transform: perspective(300px) translateX(4px) rotate(calc(var(--r) * 1deg)) rotateX(55deg) rotateY(12deg) scaleX(var(--sx)); }
  60% { transform: perspective(300px) translateX(22px) rotate(calc(var(--r) * 1deg + 26deg)) rotateX(12deg) rotateY(55deg) scaleX(var(--sx)); }
}
/* the welcome heading in the warm red-orange of the leaves (Sandra, 18.10.2026); the box lets the leaves shine through a little */
.hero-herbst .willkommen h2 { color: #B8441A; }
.hero-herbst .willkommen { background: rgba(240,234,250,.8); }

/* Pflegebereich: Statistik (Fabian, 20.10.2026) – Kacheln, Säulen, Balkenlisten; nur HTML/CSS, kein Diagramm-Skript */
.st-zeit { margin: 4px 0 16px; }
.st-kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 720px) { .st-kacheln { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.st-kachel { display: flex; flex-direction: column; gap: 2px; padding: 14px 14px 12px; background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--leaf-sm); box-shadow: var(--shadow); min-width: 0; }
.st-wert { font-size: 1.7rem; font-weight: 700; line-height: 1.1; color: var(--ink); }
.st-was { color: var(--muted); font-size: .92rem; }
.st-vgl { font-size: .84rem; font-weight: 700; color: var(--muted); }
.st-vgl.st-hoch { color: var(--teal-deep); }
.st-vgl.st-runter { color: var(--rose-deep); }
.st-gerade { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; }
.st-punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--teal-deep); box-shadow: 0 0 0 4px var(--teal-soft); flex: none; }
.st-block { margin-top: 16px; }
.st-zwei { display: grid; gap: 0 16px; }
@media (min-width: 720px) { .st-zwei { grid-template-columns: 1fr 1fr; } }
.st-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto 3.4em; gap: 4px 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--line); }
.st-zeile:last-child { border-bottom: 0; }
.st-name { overflow-wrap: anywhere; }
.st-zahl { font-weight: 700; text-align: right; }
.st-anteil { color: var(--muted); font-size: .86rem; text-align: right; }
.st-balken { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: var(--lav-soft); overflow: hidden; }
.st-balken > span { display: block; height: 100%; border-radius: 999px; background: var(--lav-deep); }
.st-verlauf { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 3px; }
.st-saeule { min-width: 0; text-align: center; }
.st-saeule-zahl { display: block; font-size: .7rem; color: var(--muted); line-height: 1.2; min-height: 1.2em; overflow: hidden; }
.st-saeule-feld { position: relative; display: block; height: 140px; border-bottom: 1px solid var(--line-strong); }
.st-saeule-balken { position: absolute; left: 0; right: 0; bottom: 0; min-height: 2px; border-radius: 4px 4px 0 0; background: var(--pink-lila); }
.st-saeule-label { display: block; font-size: .7rem; color: var(--muted); line-height: 1.6; white-space: nowrap; overflow: visible; }
.st-dicht .st-saeule-zahl { display: none; }
.st-hinweis { display: flex; gap: 6px; align-items: flex-start; margin-top: 20px; }
.st-hinweis .ic { flex: none; margin-top: 2px; }

/* ---------------------------------------------------------------------------------------------------------
   Lady Hand – Nachrichten-Eingang im Pflegebereich (20.10.2026, nachrichten/). Phone first: list → conversation;
   from 900 px list left, conversation right. Nothing here may scroll sideways at 360 px.
   --------------------------------------------------------------------------------------------------------- */
.nx-seite { display: grid; gap: 14px; }
.nx-filter { display: grid; gap: 10px; }
.nx-chips { gap: 6px; }
.nx-chips .chip { min-height: 38px; padding: 0 12px; font-size: .92rem; }
.nx-mehr summary { cursor: pointer; color: var(--lav-ink); font-weight: 700; font-size: .95rem; }
.nx-mehr-felder { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-top: 10px; }
.nx-mehr-felder .field-g { min-width: 0; flex: 1 1 140px; }
.nx-test { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }

.nx-liste { display: grid; gap: 2px; }
.nx-stoerung { margin-bottom: 8px; }
.nx-zeile { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 10px;
  border-radius: var(--leaf-sm); color: var(--ink); text-decoration: none; min-width: 0; }
.nx-zeile:hover, .nx-zeile:focus-visible { background: var(--lav-soft); }
.nx-zeile.on { background: var(--lav-soft); box-shadow: inset 3px 0 0 var(--pink-lila); }
.nx-zeile-rahmen { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px; }
.nx-zeile-rahmen .del { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--surface);
  color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.nx-zeile-rahmen .del:hover { color: var(--rose-deep); border-color: var(--rose-deep); background: var(--rose-soft); }
.nx-geloescht { padding: 12px 10px; }
.nx-bild { position: relative; width: 48px; height: 48px; border-radius: 50%; background: var(--lav); color: var(--lav-ink);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.2rem; }
.nx-bild img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.nx-kanal { position: absolute; right: -3px; bottom: -3px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface);
  border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--lav-ink); }
.nx-mitte { display: grid; min-width: 0; }
.nx-name, .nx-vorschau { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-vorschau { color: var(--muted); font-size: .94rem; }
.nx-zeile.neu .nx-name, .nx-zeile.neu .nx-vorschau { font-weight: 700; color: var(--ink); }
.nx-marken { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.nx-rechts { display: grid; justify-items: end; gap: 4px; align-self: start; padding-top: 2px; }
.nx-zeit { font-size: .82rem; color: var(--muted); white-space: nowrap; }
.nx-zeile.neu .nx-zeit { color: var(--rose-deep); font-weight: 700; }
.nx-ungelesen { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--rose-deep); color: #fff;
  font-size: .78rem; font-weight: 700; line-height: 22px; text-align: center; }

/* Sandra's labels */
.nx-marke { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: .8rem; font-weight: 700;
  border: 1.5px solid currentColor; background: transparent; font-family: inherit; line-height: 1.5; }
button.nx-marke { cursor: pointer; min-height: 34px; padding: 0 12px; font-size: .88rem; opacity: .7; }
button.nx-marke.an, .nx-marke.an { opacity: 1; color: #fff !important; }
.nx-f-lila { color: var(--lav-ink); } .nx-marke.an.nx-f-lila { background: var(--lav-ink); border-color: var(--lav-ink); }
.nx-f-pink { color: var(--pink-lila); } .nx-marke.an.nx-f-pink { background: var(--pink-lila); border-color: var(--pink-lila); }
.nx-f-teal { color: var(--teal-deep); } .nx-marke.an.nx-f-teal { background: var(--teal-deep); border-color: var(--teal-deep); }
.nx-f-gelb { color: #8A6100; } .nx-marke.an.nx-f-gelb { background: #8A6100; border-color: #8A6100; }
.nx-f-grau { color: var(--muted); } .nx-marke.an.nx-f-grau { background: var(--muted); border-color: var(--muted); }

/* conversation */
.nx-split-liste { display: none; }
.nx-gespraech { display: grid; gap: 12px; min-width: 0; }
.nx-kopfname { color: inherit; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.nx-kopf { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; min-width: 0; }
.nx-adresse, .nx-betreff { overflow-wrap: anywhere; min-width: 0; }
.nx-leiste { display: grid; gap: 8px; }
.nx-leiste .chip { min-height: 38px; padding: 0 12px; font-size: .92rem; }
.nx-details { border: 1px solid var(--line); border-radius: var(--leaf-sm); background: var(--surface); padding: 10px 14px; }
.nx-details summary { cursor: pointer; font-weight: 700; color: var(--lav-ink); display: flex; gap: 8px; align-items: center; }
.nx-kasten h3 { font-size: 1rem; margin: 12px 0 6px; }
.nx-angebot { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.nx-angebot.vorschlag { background: var(--lav-soft); border-radius: 10px; padding: 8px 10px; border-top: 0; margin: 4px 0; }
.nx-angebot .btn-row { gap: 6px; align-items: center; }
.nx-angebot-suche { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-top: 10px; }
.nx-angebot-suche .field-g { flex: 1 1 180px; min-width: 0; }
/* Sandra (30.10.2026): every search suggestion in the sale is its own framed card, easy to tell apart */
.vk-treffer { display: grid; gap: 8px; margin: 10px 0 14px; }
.vk-treffer-karte { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 10px 12px; border: 1.5px solid var(--line-strong); border-left: 5px solid var(--lav-deep); border-radius: 12px; background: var(--surface); }
.vk-treffer-karte:nth-child(even) { background: var(--lav-soft); }
.vk-treffer-text { flex: 1 1 180px; min-width: 0; display: grid; gap: 2px; overflow-wrap: anywhere; }
.vk-treffer-karte .btn { margin-left: auto; }
/* the kind of a plant in the sale, changeable like the price */
.vk-art-knopf { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 2px; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline dotted; cursor: pointer; }
.vk-art-knopf .ic { color: var(--lav-deep); }
.vk-art-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 0 0 10px; }
#pflanzen { scroll-margin-top: 70px; }

.nx-verlauf { display: grid; gap: 8px; padding: 4px 0; min-width: 0; }
.nx-datum { text-align: center; margin: 8px 0 2px; }
.nx-datum span { display: inline-block; padding: 2px 12px; border-radius: 999px; background: var(--lav-soft); color: var(--lav-ink); font-size: .82rem; font-weight: 700; }
.nx-blase { max-width: min(82%, 560px); padding: 9px 13px 6px; border-radius: 18px; overflow-wrap: anywhere; min-width: 0; }
.nx-rein { justify-self: start; background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.nx-raus { justify-self: end; background: var(--lav-soft); color: var(--ink); border-bottom-right-radius: 6px; }
.nx-blase.nx-rot { background: var(--rose-soft); }
.nx-text a { color: var(--lav-ink); }
.nx-meta { font-size: .76rem; color: var(--muted); text-align: right; margin-top: 2px; display: flex; gap: 4px; justify-content: flex-end; align-items: center; }
.nx-fehler { margin-top: 6px; color: var(--rose-deep); font-weight: 700; font-size: .9rem; display: grid; gap: 6px; }
.nx-foto img { display: block; max-width: 100%; max-height: 320px; border-radius: 12px; margin: 4px 0; object-fit: contain; }
.nx-audio, .nx-video { max-width: 100%; margin: 4px 0; }
.nx-datei { display: inline-flex; gap: 6px; align-items: center; margin: 4px 0; overflow-wrap: anywhere; }

.nx-antwort { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; position: sticky;
  bottom: calc(var(--nav-h) + 8px); background: var(--bg); padding: 8px 0; z-index: 5; }
.nx-antwort textarea { width: 100%; min-height: 52px; max-height: 40vh; resize: vertical; font: inherit; padding: 12px 14px;
  border: 1.5px solid var(--line-strong); border-radius: 16px; background: var(--surface); }
.nx-antwort textarea:focus { border-color: var(--lav-deep); outline: none; box-shadow: 0 0 0 3px var(--lav-soft); }
.nx-weg { margin: -6px 0 0; }

/* contact page, labels page */
.nx-karte { padding: 16px; display: grid; gap: 10px; }
.nx-karte h2 { font-size: 1.1rem; margin: 0; }
.nx-kennung { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; padding: 6px 0;
  color: inherit; text-decoration: none; min-width: 0; overflow-wrap: anywhere; }
.nx-kennung > span { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.nx-eingabe { flex: 1 1 140px; min-width: 0; font: inherit; padding: 8px 12px; border: 1.5px solid var(--line-strong); border-radius: 12px; }
.nx-loeschen { display: grid; gap: 10px; }

@media (min-width: 900px) {
  .nx-split { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 24px; align-items: start; }
  .nx-split-liste { display: grid; gap: 12px; position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; padding-right: 4px; }
  .nx-zurueck { visibility: hidden; }
  .nx-antwort { bottom: 8px; }
}

/* Lady Hand – Verkäufe (20.10.2026, verkauf/). Sandra's five steps as big buttons one below the other. */
.vk-gruppe { display: grid; gap: 2px; }
.vk-gruppe h2 { font-size: 1.05rem; margin: 6px 0 4px; display: inline-flex; gap: 8px; }
details.vk-gruppe summary { cursor: pointer; list-style: revert; }
.vk-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px;
  border-radius: var(--leaf-sm); background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; margin-bottom: 6px; }
.vk-zeile:hover { background: var(--lav-soft); }
/* Sandra (31.10.2026): „Bestellungen" – four tiles, two side by side, rainbow colours; the same colours mark the three ways
   on „Bestellung hinzufügen" */
.bs-kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 4px 0 18px; }
.bs-kachel { display: grid; align-content: start; gap: 4px; min-height: 112px; padding: 12px; border-radius: 16px; border: 2px solid var(--k); background: var(--k-soft); color: var(--k-ink); text-decoration: none; overflow-wrap: anywhere; }
.bs-kachel b { font-size: 1.05rem; line-height: 1.2; hyphens: manual; }
.bs-kachel small { color: var(--k-ink); opacity: .85; font-size: .85rem; line-height: 1.3; }
.bs-kachel:hover, .bs-kachel:focus-visible { background: var(--k); color: #fff; }
.bs-kachel:hover small, .bs-kachel:focus-visible small { color: #fff; }
.bs-emoji { font-size: 1.6rem; line-height: 1; }
.bs-k1 { --k: #E25757; --k-soft: #FDE8E8; --k-ink: #9B2626; }
.bs-k2 { --k: #EE9A2B; --k-soft: #FFF1DC; --k-ink: #8A5000; }
.bs-k3 { --k: #2EA36B; --k-soft: #E2F5EB; --k-ink: #1A6A44; }
.bs-k4 { --k: #3E7FD6; --k-soft: #E4EEFB; --k-ink: #1E4F93; }
.bs-titel { margin: 0 0 4px; font-size: 1.2rem; scroll-margin-top: 70px; }
.sorten-bestand { display: flex; align-items: center; gap: 12px; min-height: 0; margin: 0 0 12px; }
.sorten-bestand > span:not(.bs-emoji) { flex: 1; display: grid; gap: 2px; min-width: 0; }
.sorten-bestand .ic { flex: none; }
.bs-weg { border: 2px solid var(--k); border-left-width: 6px; background: var(--k-soft); }
.bs-weg h2 { color: var(--k-ink); }
.bs-weg-link { display: block; color: var(--k-ink); text-decoration: none; }
.bs-weg-link p { margin: 4px 0 0; }
/* Sandra (30.10.2026): each step of the sales list in its own colour – heading with emoji, cards with a coloured edge,
   the customer's name larger and in the step's deep tone */
.vk-kat { --kat: var(--lav-deep); --kat-soft: var(--lav-soft); --kat-ink: var(--lav-ink); margin-top: 10px; padding: 10px; border-radius: var(--leaf-sm); background: var(--kat-soft); }
.vk-kat-anfrage { --kat: #8A6AD1; --kat-soft: #F1ECFB; --kat-ink: #4E3596; }
.vk-kat-zurueckgelegt { --kat: #E39A1E; --kat-soft: #FFF3DC; --kat-ink: #8A5600; }
.vk-kat-zurueckgelegt_bezahlt { --kat: #2E9E6E; --kat-soft: #E3F5EC; --kat-ink: #1B6646; }
.vk-kat-versenden { --kat: #3A86D4; --kat-soft: #E4F0FB; --kat-ink: #1F5A99; }
.vk-kat-versendet { --kat: #8C8496; --kat-soft: #F2F0F5; --kat-ink: #4F4858; }
.vk-kat h2 { color: var(--kat-ink); align-items: center; margin: 0 0 8px; }
.vk-kat-emoji { font-size: 1.3rem; line-height: 1; }
.vk-kat-zahl { min-width: 26px; padding: 1px 8px; border-radius: 999px; background: var(--kat); color: #fff; font-size: .85rem; text-align: center; }
.vk-kat .vk-zeile { border-left: 5px solid var(--kat); }
.vk-kat .vk-zeile:hover { background: var(--surface); border-color: var(--kat); }
.vk-kat .nx-name strong { color: var(--kat-ink); font-size: 1.08rem; }
.vk-kat > .muted { margin: 0 0 4px; }
.vk-schritte { display: grid; gap: 8px; }
.vk-schritt { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; min-height: 52px; padding: 8px 14px;
  border: 2px solid var(--line-strong); border-radius: 14px; background: var(--surface); font: inherit; font-weight: 700; color: var(--ink); cursor: pointer; }
.vk-schritt:hover { border-color: var(--lav-deep); }
.vk-schritt.an { border-color: var(--pink-lila); background: var(--lav-soft); color: var(--lav-ink); }
.vk-punkt { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-strong); display: inline-flex;
  align-items: center; justify-content: center; }
.vk-schritt.an .vk-punkt { background: var(--pink-lila); border-color: var(--pink-lila); color: #fff; }
.vk-preis { margin-left: auto; font-weight: 700; }
/* Sandra (27.10.2026): tap the price to change it for this sale; the free plant is a fixed line below */
.vk-preis-knopf { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 4px; border: 0; background: none; font: inherit; font-weight: 700; color: var(--ink); cursor: pointer; }
.vk-preis-knopf .ic { color: var(--lav-deep); }
.vk-preis-form { padding: 0 0 10px; }
.vk-gratis { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.vk-gratis label { flex: 1 1 100%; }
.vk-gratis input { flex: 1 1 140px; min-width: 0; }
.vk-versand { display: grid; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.vk-versand-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; } /* 5 · 7 · 8, then the EU amounts 16 · 18 below */
.vk-wahl { flex: 1 1 calc(33% - 8px); min-height: 48px; border: 2px solid var(--line-strong); border-radius: 14px; background: var(--surface);
  font: inherit; font-weight: 700; font-size: 1.05rem; color: var(--ink); cursor: pointer; }
.vk-wahl:hover { border-color: var(--lav-deep); }
.vk-wahl.an { border-color: var(--pink-lila); background: var(--lav-soft); color: var(--lav-ink); }
.vk-versand-eigen { display: flex; gap: 8px; align-items: center; }
.vk-versand-eigen label { margin-right: auto; font-size: .95rem; color: var(--muted); }
.vk-rabatt { padding: 10px 0; border-top: 1px solid var(--line); }
.vk-rabatt label { color: inherit; }
.vk-betrag { flex: 0 0 96px; min-width: 0; text-align: right; }  /* room for „123,50" at 360 px */
.vk-gesamt { display: flex; justify-content: space-between; font-weight: 700; font-size: 1.15rem; padding-top: 8px; border-top: 2px solid var(--line-strong); }
.vk-kommt-an { display: flex; justify-content: space-between; gap: 8px; padding-top: 4px; color: var(--muted); }
.vk-kontakt { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; overflow-wrap: anywhere; }
.vk-text { width: 100%; resize: vertical; line-height: 1.45; }
/* shipping address for DHL: one big button per field, a tap copies it (Sandra, 23.10.2026) */
.vk-adresse-hinweis { margin: 0 0 8px; }
.vk-adresse { display: grid; gap: 8px; margin-bottom: 10px; }
.vk-feld { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 10px; width: 100%; min-height: 56px;
  padding: 6px 14px; text-align: left; border: 2px solid var(--line-strong); border-radius: 14px; background: var(--surface);
  font: inherit; color: var(--ink); cursor: pointer; }
.vk-feld:hover { border-color: var(--lav-deep); }
.vk-feld-lbl { grid-column: 1; font-size: .85rem; color: var(--muted); }
.vk-feld-wert { grid-column: 1; font-weight: 700; font-size: 1.1rem; overflow-wrap: anywhere; }
.vk-feld-ic, .vk-feld-ok { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.vk-feld-ok { display: none; font-weight: 700; font-size: .9rem; color: var(--lav-ink); }
.vk-feld.erledigt .vk-feld-ic { color: var(--pink-lila); }
.vk-feld.kopiert { border-color: var(--pink-lila); background: var(--lav-soft); }
.vk-feld.kopiert .vk-feld-ic { display: none; }
.vk-feld.kopiert .vk-feld-ok { display: inline-flex; }
.vk-adresse-aendern, .vk-adresse-selbst { margin-bottom: 10px; }
.vk-adresse-aendern > summary, .vk-adresse-selbst > summary { cursor: pointer; padding: 6px 0; color: var(--lav-ink); font-weight: 700; }
.vk-adresse-einfuegen, .vk-adresse-felder { display: grid; gap: 8px; margin-bottom: 10px; }
.vk-adresse-einfuegen textarea { width: 100%; resize: vertical; }
.vk-sendung { padding-top: 10px; border-top: 1px solid var(--line); }
/* invoice (Thomas 24.10.2026): number and sum on top, the big print button below */
.vk-rechnung-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 10px; }
.vk-rechnung-kopf strong { font-size: 1.3rem; }
.vk-rechnung-weg { margin-top: 8px; }
.vk-rechnung-weg > summary { cursor: pointer; padding: 6px 0; color: var(--muted); font-size: .9rem; }
.vk-rechnung-weg form { display: grid; gap: 8px; }
.vk-rechnung-zeile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 4px;
  border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.vk-rechnung-zeile:hover { background: var(--lav-soft); }
.vk-rechnung-name { display: grid; overflow-wrap: anywhere; }
.vk-frueher-titel { margin: 16px 0 2px; font-size: 1rem; }
/* recognised payments (Lady Hand 25.10.2026): stand out above the sales, one block per payment */
.zl-karte { border: 2px solid var(--pink-lila); }
.zl-karte h2 { display: flex; align-items: center; gap: 8px; }
.zl-eingang { display: grid; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); }
.zl-eingang:first-of-type { border-top: 0; padding-top: 0; }
.zl-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; overflow-wrap: anywhere; }
.zl-kopf strong { font-size: 1.3rem; }
.zl-verkauf { display: grid; gap: 6px; padding: 8px 10px; border-radius: 12px; background: var(--lav-soft); }
/* Kundenkartei (25.10.2026): address, earlier purchases, „Ist das …?" */
.ku-karte { border: 2px solid var(--pink-lila); }
.ku-karte h2 { display: flex; align-items: center; gap: 8px; }
.ku-anschrift { font-style: normal; line-height: 1.5; overflow-wrap: anywhere; margin: 0 0 4px; }
.ku-vorschlag { display: grid; gap: 6px; padding: 8px 10px; border-radius: 12px; background: var(--lav-soft); margin-bottom: 8px; }
.ku-vorschlag p { margin: 0; overflow-wrap: anywhere; }
.ku-h3 { font-size: 1rem; margin: 12px 0 6px; }
.ku-kaeufe { list-style: none; margin: 0; padding: 0; }
.ku-kaeufe li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); }
.ku-bearbeiten { margin-top: 10px; }
.ku-bearbeiten summary { cursor: pointer; display: flex; align-items: center; gap: 6px; font-weight: 600; min-height: 44px; }
.ku-form { display: grid; gap: 10px; margin-top: 8px; }
/* draft (Thomas 24.10.2026, like Lord): look, edit, then „Rechnung stellen“ */
.vk-stellen { display: grid; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.vk-hinweis-form { align-items: flex-start; }
.linkknopf { display: inline; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.rb-zeile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 7.5em); gap: 6px 8px; padding: 10px 0; border-top: 1px solid var(--line); }
.rb-zeile .rb-sorte { grid-column: 1 / -1; }
.rb-zeile input { width: 100%; min-width: 0; }
.rb-preis input { text-align: right; }
.rb-form textarea { width: 100%; resize: vertical; }
.vk-jahre { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.vk-jahre .vk-wahl { display: inline-flex; align-items: center; justify-content: center; flex: 0 1 90px; color: inherit; text-decoration: none; }

/* Pflegebereich: „Ist die Blüte noch geöffnet?" – asked every day while a flowering has no end date (Sandra, 22.10.2026) */
.bluehfrage { margin: 0 0 14px; padding: 12px 16px; border-radius: var(--leaf-sm); background: var(--lav-soft); color: var(--ink); }
.bluehfrage h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 1.05rem; color: var(--lav-ink); }
.bluehfrage h2 .ic { flex: none; color: var(--pink-lila); }
.bf-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 0; border-top: 1px solid rgba(0,0,0,.08); }
.bluehfrage h2 + .bf-zeile { border-top: 0; }
.bf-name { display: flex; flex-direction: column; flex: 1 1 160px; min-width: 0; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.bf-knoepfe { display: flex; gap: 8px; margin-left: auto; }
.bf-knoepfe .btn { min-width: 72px; min-height: 44px; justify-content: center; }
.bf-ok { display: flex; align-items: flex-start; gap: 8px; margin: 0; }
.bf-ok .ic { flex: none; margin-top: 3px; color: var(--teal-deep); }
/* Sandra (27.10.2026): buds about to open – second question, ✕ takes one out, „+" adds one */
.bluehfrage h2.bf-zweite { margin-top: 12px; }
.bluehfrage.bf-leer { padding: 0; background: none; }
.bf-weg { width: 36px; height: 44px; border: 0; background: none; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.bf-weg:hover { color: var(--rose-deep); }
/* Sandra (27.10.2026): a note to each flower – under the name, across the whole row */
.bf-notiz { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: -4px; }
.bf-notiz-text { flex: 1 1 100%; margin: 0; font-size: .95rem; overflow-wrap: anywhere; }
.bf-notiz-knopf { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0; border: 0; background: none; color: var(--lav-ink); font: inherit; font-size: .92rem; font-weight: 700; cursor: pointer; }
.bf-notiz-ok { display: inline-flex; align-items: center; gap: 4px; font-size: .92rem; color: var(--teal-deep); }
.bf-notiz-form { flex: 1 1 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
/* flex: none – .nx-eingabe's flex-basis of 140px would otherwise become the height in this column */
.bf-notiz-form textarea, .bz-notiz textarea { flex: none; width: 100%; min-height: 0; height: 84px; }
.bf-neu { border-top: 1px solid rgba(0,0,0,.08); padding-top: 6px; margin-top: 4px; }
.bluehfrage.bf-leer .bf-neu { border-top: 0; padding-top: 0; margin-top: 0; }
/* Sandra (30.10.2026): two boxes in their own colour, a gap between them – where one ends and the other begins */
.bluehfrage:not(.bf-leer) { padding: 0; background: none; }
.bf-gruppe { padding: 12px 16px; border-radius: var(--leaf-sm); border-left: 6px solid; }
.bf-gruppe + .bf-gruppe { margin-top: 12px; }
.bf-offen { background: #FDE7F0; border-color: #E06A9A; }
.bf-offen h2 { color: #A83B63; }
.bf-knospen { background: #FFF5D6; border-color: #E8B020; }
.bf-knospen h2 { color: #8A5A00; }
.bf-knospen .bf-neu summary { color: #8A5A00; }
.bf-gruppe.bf-nur-neu { padding: 0; background: none; border-left: 0; }
.bf-gruppe.bf-nur-neu .bf-neu summary { color: var(--lav-ink); }
.bf-gruppe h2 + .bf-zeile { border-top: 0; }
.bf-gruppe .bf-neu:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.bf-emoji { font-size: 1.35rem; line-height: 1; }
.bf-neu summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; cursor: pointer; font-weight: 700; color: var(--lav-ink); }
.bf-neu summary::-webkit-details-marker { display: none; }
.bf-neu input { width: 100%; margin-top: 4px; }
.bf-treffer-liste { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bf-treffer { min-height: 40px; padding: 6px 12px; border: 1.5px solid var(--line-strong); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; text-align: left; overflow-wrap: anywhere; max-width: 100%; }
.bf-treffer:hover { border-color: var(--lav-deep); }

/* „Derzeit nur Abholung möglich!" – rooted plants Sandra cannot ship right now; red and clearly visible (Sandra, 22.10.2026).
   Never on the photo (photos are not covered) – always as a line of its own below. */
.nur-abholung { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0; padding: 4px 10px; border-radius: 8px;
  background: #C62828; color: #fff; font-weight: 800; font-size: .9rem; line-height: 1.3; }
.nur-abholung-gross { display: flex; margin: 10px 0 12px; padding: 12px 14px; font-size: 1.1rem; }
.nur-abholung-gross .ic { flex: none; }
.story-abholung { margin: 6px 2px 0; }

/* „Privat – nicht im Pflegebereich" (Sandra, 22.10.2026): quiet, below the conversation, never in the way of replying */
.nx-privat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.nx-privat-name { display: flex; flex-direction: column; min-width: 0; flex: 1 1 180px; overflow-wrap: anywhere; }
.nx-privat-link { margin: 14px 0 0; }
.nx-privat-link a { display: inline-flex; align-items: center; gap: 6px; }

/* „Teilen" from WhatsApp into a sale (22.10.2026): the customer's message, then the plants found in it */
.vk-geteilt { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--lav-soft); overflow-wrap: anywhere; }
/* Sandra (30.10.2026): attach screenshots – a big tap area, the chosen count shown under it */
.vk-bild-wahl { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; border: 2px dashed var(--lav-deep); border-radius: 14px; background: var(--lav-soft); color: var(--lav-ink); cursor: pointer; }
.vk-bild-wahl .ic { flex: none; }
.vk-bild-wahl span { display: grid; gap: 2px; min-width: 0; }
.vk-bild-wahl small { color: var(--muted); font-size: .88rem; }
#vk-bilder:focus-visible + *, .vk-bild-wahl:focus-within { outline: 2px solid var(--pink-lila); }
.vk-gelesen { margin: 8px 0; }
.vk-gelesen summary { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; cursor: pointer; font-weight: 700; color: var(--lav-ink); }
.vk-bild-dazu { margin: 8px 0 4px; }
.vk-gruppe { display: grid; gap: 6px; padding: 8px 0; border-top: 1px solid var(--line); }
.vk-gruppe:first-of-type { border-top: 0; }
.vk-gruppe h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; font-size: 1rem; overflow-wrap: anywhere; }

/* Pflegebereich on narrow phones (Sandra, 22.10.2026, Chrome): at 360 px the header of „Meine Angebote" and the five tabs
   below were wider than the screen – Chrome then lays the whole page out wider and she had to pinch it small.
   Bottom bar: every tab as wide as its word (Hoya Sans bold: Angebote 4.54 em, Nachrichten 5.66, Neu 1.84, Steckbriefe 5.43,
   Bestand 3.83, Vormerkungen 6.81), the text size follows the screen width (≈ 12.5 px at 360 px, never above .74rem).
   Should a phone enlarge all text, a word ends in „…" – nothing can stick out any more. */
/* Sandra (31.10.2026): Bestellungen · Nachrichten (or Neu) · Steckbriefe · Blütendokumentation (two lines) · Angebote –
   each column as wide as its word (measured in Hoya Sans bold, Steckbriefe = 5.43), the font shrinks with the screen
   so that all five fit at 360 px. 01.11.2026: „Blütendokumentation" → „Daily" (2.39 em, one line), sum 24.21 (font formula below) */
/* Sandra (01.11.2026): the tabs evenly spread – every tab is as wide as its word plus the same share of the free space,
   so the gaps between the words are equal and each tab keeps its whole tapping area (auto tracks stretch equally). */
.bottom.bottom-pflege { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: auto; }
.bottom.bottom-pflege a { font-size: min(.74rem, calc((100vw - 30px) / 24.21)); padding: 0 1px; min-width: 0; }
.bottom.bottom-pflege a .ic { flex: none; }
.bottom.bottom-pflege .bt { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bottom.bottom-pflege .bt-zwei { white-space: normal; line-height: 1.1; text-align: center; overflow-wrap: normal; hyphens: manual; }

/* Header: compact round buttons, the heading may take two lines, and with four buttons or more the small logo on the
   left steps aside (it only leads to „Meine Angebote", where Sandra already is) */
@media (max-width: 420px) {
  .pf-top { gap: 4px; }
  .pf-top h1 { min-width: 0; font-size: 1.05rem; line-height: 1.2; }
  .pf-top > .btn-sm { flex: none; min-width: 36px; height: 36px; padding: 0 7px; justify-content: center; }
  .pf-top:has(> .btn-sm:nth-of-type(4)) > .brand { display: none; }
}
/* the (usually empty) unread counter must not push „Nachrichten" up – its badge floats on the symbol anyway */
.bottom.bottom-pflege .nx-zahl { display: contents; }

/* =====================================================================================================================
   Dark mode (Sandra, 22.10.2026): the site follows the phone's light/dark setting by itself.
   Until now the site was light only, because phone browsers darkened page AND photos by themselves (12.10.2026). With a
   dark design of our own they no longer do that – and photos are never filtered here: they stay exactly as Sandra took
   them. Screen only: printing stays light. Text colours get light, areas dark; buttons and badges with white writing
   keep their strong brand colours (set locally where a text colour doubles as a background).
   ===================================================================================================================== */
@media screen and (prefers-color-scheme: dark) {
  :root {
    --bg: #16111C;
    --surface: #211A29;
    --ink: #EEE8F4;
    --muted: #B4AABF;
    --line: #352C40;
    --line-strong: #4A3F57;

    --rose: #6B3050;
    --rose-soft: #3A2131;
    --rose-deep: #F4A9C6;
    --lav: #4B3D6E;
    --lav-soft: #2A2238;
    --lav-deep: #B9A5F0;
    --lav-ink: #D3C5F7;
    --pink-lila-ink: #EAA8DD;
    --teal: #1E4E49;
    --teal-soft: #15302D;
    --teal-deep: #7DD8CC;

    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.65);
    --foto-grund: #2A2233;
  }

  /* text colours that are also backgrounds behind white writing: their strong light-mode colour, locally */
  .badge, .nx-ungelesen, .msg.error, .bestand-kachel:hover .gk-los { --rose-deep: #A83B63; }
  .btn, .chip, .hero .willkommen:not(.pflege-einleitung) .sb-klapp-knopf { --pink-lila-ink: #86287A; }
  .btn-teal, .chip-teal.on, .tab-teal.on, .msg.success, .act.on, .upload-over.neu, .glossar-kachel:hover .gk-los,
  .nx-marke.an.nx-f-teal { --teal-deep: #146F68; }
  .tiles-start .tile-verfuegbar, .foot-kontakt { --lav-deep: #6347AD; }
  .nx-marke.an.nx-f-lila { --lav-ink: #4E3790; }
  .nx-marke.an.nx-f-grau { --muted: #6B6376; }
  .msg { background: #3A3046; }
  /* RAL 6027 buttons keep their dark green writing on light green; on the dark green areas the writing turns light */
  .frage, .sb-neben > button, .sb-neben > a, .sb-eigen > button, .sb-eigen > a, .steckbild-wahl button.on,
  .wahl-opt.on > .ic, .widerruf-ok h1, .mk-feld:has(input:checked) > .lbl, .weg-wa .ic { --ral-6027-ink: #A8E0DA; }
  .sb-eigen .btn-merk.on { --ral-6027-ink: #0E3F3B; }
  @media (hover: hover) {
    .sb-eigen > button:hover, .sb-eigen > a:hover, .sb-neben > button:hover, .sb-neben > a:hover { --ral-6027-ink: #0E3F3B; }
  }
  .btn-soft:hover { color: var(--ink); }

  /* areas that were written as light colours */
  .top { background: rgba(22,17,28,.9); }
  .pill-grey { background: #2E2737; }
  .photo-wait::after { background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.08) 50%, transparent 70%); }
  .photo .pill { background: rgba(33,26,41,.88); }
  .act, .story-pfeil { background: rgba(33,26,41,.92); color: var(--ink); }
  .stick-bar, .sheet-actions { background: rgba(33,26,41,.94); }
  .weg-wa, .widerruf-ok, .mk-feld:has(input:checked) { background: #15302D; }
  .sb-neben > button, .wahl-opt.on, .steckbild-wahl button.on, .frage,
  .sb-eigen > button, .sb-eigen > a, .sb-neben > a { background: #15302D; }
  .gl-eintrag .gl-hoya { color: #BFEDE7; }
  .symbole i, .gl-abc .leer { color: #5E536B; }
  .monate i, .monate-legende i { border-color: #5E536B; }
  .monate i.on, .monate-legende i.on, .bz-farbe.on, .bz-art .monate-chips label.chip:has(input:checked) {
    background: #5A2A42; border-color: #A85A80; color: #FBDCE7; }
  .pf-gruss { background: #3A2131; border-color: #5A2A42; }
  .hero-herbst .willkommen { background: rgba(42,34,56,.8); }
  .hero-herbst .willkommen h2 { color: #F08A5D; }
  .nx-f-gelb { color: #E8C15A; }
  .bf-zeile { border-top-color: rgba(255,255,255,.1); }
  .bf-offen { background: #3A2131; border-color: #C25A86; }
  .bf-offen h2 { color: #FBC6DC; }
  .bf-knospen { background: #33290F; border-color: #C9971C; }
  .bf-knospen h2, .bf-knospen .bf-neu summary { color: #F3D27A; }
  .bf-gruppe.bf-nur-neu { background: none; }
  .bf-gruppe.bf-nur-neu .bf-neu summary { color: inherit; }
  .vk-kat { --kat-soft: #241E2C; }
  .bs-k1 { --k-soft: #3A1D1D; --k-ink: #F7B5B5; }
  .bs-k2 { --k-soft: #3A2A12; --k-ink: #F6CF8F; }
  .bs-k3 { --k-soft: #15302A; --k-ink: #9FE0BE; }
  .bs-k4 { --k-soft: #1A2A40; --k-ink: #A9C8F2; }
  .vk-kat-anfrage { --kat-ink: #CDBBF5; }
  .vk-kat-zurueckgelegt { --kat-ink: #F3C77A; }
  .vk-kat-zurueckgelegt_bezahlt { --kat-ink: #8FDDB8; }
  .vk-kat-versenden { --kat-ink: #9CC8F2; }
  .vk-kat-versendet { --kat-ink: #C9C2D2; }

  /* the coloured steps on the care page: the light pastel heads become deep tones, the writing light */
  .s1 { --k-ink: #BFEDE7; }
  .s3 { --k-ink: #FBDCE7; }
  .s4 { --k: #5C3A1E; --k-ink: #F8D6B3; --k-soft: #2E2116; }
  .s5 { --k: #2F4A22; --k-ink: #CFE8BF; --k-soft: #1C2A16; }
}

/* „Meine Angebote" (Sandra, 22.10.2026): heading on two lines, the symbols beside it larger on the phone (48 px, was 36).
   „Abmelden" is gone, so four symbols fit at 360 px: 4 × 48 + gaps + „Angebote" + margins ≈ 350 px. */
@media (max-width: 520px) {
  .pf-top > .btn-sm.pf-symbol, .pf-top:has(> .pf-symbol) > .pf-web {
    flex: none; width: 48px; min-width: 48px; height: 48px; padding: 0; justify-content: center; }
  .pf-top:has(> .pf-symbol) { gap: 8px; }
  .pf-top:has(> .pf-symbol) h1 { font-size: 1.15rem; line-height: 1.15; }
  .pf-top:has(> .pf-symbol) .ic { width: 24px; height: 24px; }
}

/* „Daily" (Sandra, 01.11.2026): six tiles from „Bestellungen" (bs-kachel) plus two colours, then the areas.
   In Daily a tile keeps its light colour on hover and focus (white on the orange would be too weak), a frame shows it. */
.bs-k5 { --k: #D6457F; --k-soft: #FCE4EE; --k-ink: #9A1F52; }
.bs-k6 { --k: #7E57C2; --k-soft: #EEE7FA; --k-ink: #4E3790; }
.dl-kacheln .bs-kachel:hover, .dl-kacheln .bs-kachel:focus-visible { background: var(--k-soft); color: var(--k-ink); box-shadow: inset 0 0 0 2px var(--k); }
.dl-kacheln .bs-kachel:hover small, .dl-kacheln .bs-kachel:focus-visible small { color: var(--k-ink); }
.dl-kacheln .bs-kachel:focus-visible { outline: 3px solid var(--k-ink); outline-offset: 3px; }
.dl-kopf { display: flex; align-items: center; gap: 12px; margin: 4px 0 16px; }
.dl-kopf h2 { margin: 0; font-size: 1.3rem; line-height: 1.2; min-width: 0; hyphens: manual; overflow-wrap: break-word; }
.dl-zurueck { flex: none; }
.dl-form { display: grid; gap: 12px; margin-bottom: 22px; }
.dl-form > p { margin: 0; }
.dl-form .field-g input[type=date] { width: 100%; min-height: 52px; padding: 10px 14px; border: 1.5px solid var(--line-strong); border-radius: 12px; font: inherit; background: var(--surface); color: var(--ink); }
.dl-form .field-g input[type=file] { width: 100%; max-width: 100%; font-size: .95rem; }
.dl-form .btn { justify-self: start; }
/* Sandra (01.11.2026): the „Sparen" password is a plain text field for the browser (never saved or filled in), shown as dots */
.sp-geheim { -webkit-text-security: disc; text-security: disc; letter-spacing: .12em; }
.dl-reihe { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .dl-reihe { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.dl-schalter { display: flex; justify-content: flex-end; margin: 0 0 16px; }
/* the timeline: a line on the left, a dot per entry, „Heute" as a ring with a label */
.dl-tl { position: relative; list-style: none; margin: 0; padding: 0 0 0 30px; }
.dl-tl::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--line-strong); }
.dl-punkt { position: relative; margin: 0 0 18px; }
.dl-punkt::before { content: ""; position: absolute; left: -30px; top: 12px; width: 19px; height: 19px; border-radius: 50%; background: var(--pink-lila); border: 3px solid var(--bg); }
.dl-tl-dank .dl-punkt::before { background: #EE9A2B; }
.dl-geschafft::before { background: var(--muted); }
.dl-geschafft .dl-box { opacity: .75; }
.dl-heute::before { left: -32px; top: 3px; width: 23px; height: 23px; border: 0; background: var(--bg); box-shadow: inset 0 0 0 4px var(--pink-lila); }
.dl-heute b { display: inline-block; padding: 4px 14px; border-radius: 999px; background: var(--pink-lila); color: #fff; font-size: .95rem; }
.dl-box { min-width: 0; padding: 14px 16px; background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--leaf-sm); }
.dl-box h3 { margin: 2px 0 8px; font-size: 1.2rem; line-height: 1.25; overflow-wrap: anywhere; }
.dl-datum { margin: 0; color: var(--muted); font-size: .9rem; }
/* her photos whole, never cut (product rule) */
.dl-box img { width: auto; max-width: 100%; height: auto; max-height: 320px; margin: 6px 0 10px; border-radius: 10px; }
.zt-uhr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 4px 0 0; }
.zt-zahl { font-family: var(--body); font-variant-numeric: lining-nums tabular-nums; font-size: 3rem; font-weight: 800; line-height: 1; color: var(--pink-lila-ink); }
.zt-was { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.zt-rest { flex-basis: 100%; color: var(--muted); font-size: .9rem; }
.zt-rest:empty { display: none; }
.dl-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dl-knoepfe form { margin: 0; }
.dk-text { margin: 4px 0 8px; font-family: var(--display); font-style: italic; font-size: 1.25rem; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
/* To-Dos */
.td-personen { margin: 0 0 18px; }
.td-personen .chip { min-height: 46px; padding: 0 16px; font-size: 1rem; }
.td-zahl { display: inline-block; min-width: 22px; padding: 0 6px; border-radius: 999px; background: var(--lav-soft); color: var(--lav-ink); font-size: .85rem; line-height: 22px; text-align: center; }
.chip.on .td-zahl { background: rgba(255,255,255,.25); color: #fff; }
.td-liste { margin: 0 0 28px; }
.td-liste h3 { margin: 0 0 2px; font-size: 1.2rem; }
.td-liste > p { margin: 0 0 10px; }
.td-neu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; }
.td-neu .nx-eingabe { min-height: 46px; background: var(--surface); color: var(--ink); }
.td-wdh { display: flex; flex-basis: 100%; align-items: center; gap: 8px; font-size: .95rem; cursor: pointer; }
.td-wdh input, .td-haken input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--pink-lila); }
.td-zeilen { list-style: none; margin: 0; padding: 0; }
.td-zeile { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--line); }
.td-zeile > form:first-child { flex: 1; min-width: 0; margin: 0; }
.td-haken { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 0; cursor: pointer; }
.td-haken span { min-width: 0; overflow-wrap: anywhere; }
.td-zeile.on .td-haken span { color: var(--muted); text-decoration: line-through; }
.td-hinweis { color: var(--muted); font-size: .82rem; font-weight: 700; }
.td-weg { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 10px; background: none; color: var(--muted); cursor: pointer; }
.td-weg:hover { background: var(--rose-soft); color: var(--rose-deep); }
.td-leer { padding: 10px 0; }
.td-aufraeumen { margin-top: 12px; }
/* Sandra (01.11.2026): every person in her colour – Madre pink-lila, Rübenratte yellow, Ange lila – on the chip, the
   counters, the ticks and the boxes; the lists stand in a box, „… hinzufügen“ below it, set apart */
.td-p-madre { --pc: var(--pink-lila); --pc-soft: #FBE7F5; --pc-ink: #7A2468; --pc-text: #fff; }
.td-p-ruebenratte { --pc: #E8B520; --pc-soft: #FFF6CC; --pc-ink: #6E5100; --pc-text: #3A2A00; }
.td-p-ange { --pc: #8A6AD1; --pc-soft: #F1ECFB; --pc-ink: #4E3596; --pc-text: #fff; }
.td-chip { border-color: var(--pc); }
.td-chip .td-zahl { background: var(--pc-soft); color: var(--pc-ink); }
.td-chip.on, .td-chip.on:hover { background: var(--pc); border-color: var(--pc); color: var(--pc-text); }
.td-chip.on .td-zahl { background: rgba(255,255,255,.35); color: var(--pc-text); }
.td-box { margin: 0 0 12px; padding: 12px 14px; border-radius: var(--leaf-sm); border: 2px solid var(--pc, var(--line-strong)); background: var(--surface); }
.td-box-heute { background: var(--pc-soft, var(--lav-soft)); }
.td-box h3 { color: var(--pc-ink, var(--ink)); }
.td-stand { margin: 0 0 6px; color: var(--pc-ink, var(--muted)); }
.td-box .td-zeile { border-bottom-color: rgba(0,0,0,.08); }
.td-box .td-zeile:last-child { border-bottom: 0; }
.td-p-madre input[type=checkbox], .td-p-ruebenratte input[type=checkbox], .td-p-ange input[type=checkbox] { accent-color: var(--pc); }
.td-neu { padding: 12px 14px; border: 1.5px dashed var(--line-strong); border-radius: 14px; background: none; }
.td-neu-titel { display: inline-flex; flex-basis: 100%; align-items: center; gap: 6px; font-weight: 700; color: var(--muted); }
.td-neu .nx-eingabe { flex: 1 1 180px; min-width: 0; }
.td-zeile { flex-wrap: wrap; }
.td-aendern { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex-basis: 100%; padding: 0 0 10px; }
.td-aendern .nx-eingabe { flex: 1 1 180px; min-width: 0; min-height: 44px; }
.zt-aendern { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
/* Sparen (Sandra, 01.11.2026): starting amount, then a table date · amount · where · total – fits 360 px, „where" wraps */
.sp-gesamt { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 16px; padding: 14px 18px;
  border: 2px solid #2EA36B; border-radius: var(--leaf-sm); background: #E2F5EB; color: #1A6A44; font-weight: 700; }
.sp-gesamt b { font-family: var(--body); font-variant-numeric: lining-nums tabular-nums; font-size: 2rem; font-weight: 800; line-height: 1.1; }
.sp-anfang h3, .dl-form > h3 { margin: 0; font-size: 1.1rem; }
.sp-anfang p { margin: 0; }
.sp-aendern summary { color: var(--lav-deep); cursor: pointer; font-weight: 700; }
.sp-aendern[open] summary { margin-bottom: 10px; }
.sp-tabelle { width: 100%; margin: 0 0 22px; border-collapse: collapse; table-layout: fixed; font-size: .85rem; }
.sp-tabelle th { padding: 6px 3px; border-bottom: 2px solid var(--line-strong); color: var(--muted); font-size: .78rem; text-align: left; }
.sp-tabelle td { padding: 6px 3px; border-bottom: 1px solid var(--line); vertical-align: middle; overflow-wrap: break-word; hyphens: auto; }
.sp-tabelle th:nth-child(1) { width: 4.2rem; }
.sp-tabelle td:first-child { white-space: nowrap; }
/* 01.11.2026: Datum · Summe · Gesamt · löschen („Wo gespart" is gone) */
.sp-tabelle th:nth-child(4) { width: 36px; padding: 0; }
.sp-tabelle td.num, .sp-tabelle th:nth-child(2), .sp-tabelle th:nth-child(3) { text-align: right; }
.sp-tabelle td.num { white-space: nowrap; }
.sp-tabelle td:last-child { padding: 0; }
.sp-tabelle .td-weg { width: 36px; height: 40px; }
.sp-tabelle form { margin: 0; }
.sp-start td { color: var(--muted); }
.sp-sperren { display: grid; justify-items: start; gap: 6px; margin-top: 16px; }
.sp-sperren p { margin: 0; }
@media screen and (prefers-color-scheme: dark) {
  .bs-k5 { --k-soft: #3A1D2B; --k-ink: #F7B5CF; }
  .bs-k6 { --k-soft: #2A2140; --k-ink: #CDBBF5; }
  .zt-zahl { color: #F0A8DD; }
  .td-p-madre { --pc-soft: #3A2131; --pc-ink: #F6C3E6; }
  .td-p-ruebenratte { --pc-soft: #3A3010; --pc-ink: #F6DC85; }
  .td-p-ange { --pc-soft: #2A2240; --pc-ink: #CDBBF5; }
  .td-weg:hover { background: #3A2131; color: #FBC6DC; }
  .sp-gesamt { background: #15302A; color: #9FE0BE; }
}