/* 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; }

: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; border: 0; background: transparent; font: inherit; min-width: 0; outline: none; }
.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 (A5 Steckbrief, F-HST-10) ------------------------------------------ */
@media print {
  @page { size: A5; margin: 12mm; }
  body { background: #fff; padding: 0; font-size: 10.5pt; }
  .top, .bottom, .foot, .no-print, .msgs { display: none !important; }
}
.druck { font-size: 10.5pt; line-height: 1.4; }
.druck h1 { font-size: 20pt; margin-bottom: 2mm; }
.druck .traits { grid-template-columns: 1fr 1fr; gap: 2mm; }
.druck .trait { padding: 2mm 3mm; border-radius: 3mm; box-shadow: none; }
.druck .photo { border-radius: 4mm; }
.druck .sb-photos { gap: 2mm; margin-bottom: 4mm; }

/* --- 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; }
}
.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; }
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; }
.druck .photo::before { display: none; }

/* 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); }

/* 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-status { grid-column: 1 / 3; grid-row: 3; 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, 2fr) minmax(200px, auto) 40px; align-items: center; padding: 8px 0; }
  .b-row .b-name { grid-column: auto; }
  .b-row .b-status { 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 „Gespeicherte Steckbriefe (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). */
.top-nav a { white-space: nowrap; }
@media (min-width: 1900px) and (max-width: 1999px) { .top-nav a { padding-left: 8px; padding-right: 8px; } }
@media (min-width: 900px) and (max-width: 1899px) {
  /* 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 */
.sb-galerie .thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; max-width: 620px; margin-top: 8px; }
.sb-galerie .thumbs .photo { aspect-ratio: 1; border-radius: 10px; cursor: pointer; border: 2px solid transparent; padding: 0; background: linear-gradient(160deg, var(--lav-soft), var(--teal-soft)); }
.sb-galerie .thumbs .photo.on { border-color: var(--lav-deep); }
@media (min-width: 900px) { .sb-galerie .thumbs { max-width: 520px; } }

/* 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 „Gespeicherte Steckbriefe" und darf zweizeilig sein */
.bottom a { font-size: .74rem; line-height: 1.1; text-align: center; padding: 0 2px; }
.bottom a.zweizeilig span:not(.badge) { display: block; max-width: 92px; }
.bottom a .ic { flex: none; }

/* Steckbrief: Fotos quadratisch (Sandra: 1:1, außer bei den Angeboten) */
.tab-panel .photo { aspect-ratio: 1; }
.sb-galerie .thumbs { max-width: 620px; }

/* 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; }

/* 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-kern { display: grid; grid-template-columns: max-content max-content minmax(0, 1fr); margin: 14px 0 16px; border-top: 1px solid var(--line); }
.sb-kern > div { display: contents; }
.sb-kern dt, .sb-kern dd { margin: 0; padding: 6px 0; border-bottom: 1px solid var(--line); display: flex; align-items: center; min-height: 40px; }
.sb-kern dt { padding-right: 14px; color: var(--muted); font-size: .95rem; }
.sb-kern dd .symbole { margin-right: 12px; }
.sb-kern dd:last-child { font-weight: 700; font-size: .98rem; line-height: 1.25; }

.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, .sb-mehr { flex: 1 1 auto; }
.sb-neben > button, .sb-mehr > 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, .sb-neben > button + .sb-mehr { border-left: 1px solid var(--line-strong); }
.sb-neben > button:first-child { border-radius: 999px 0 0 999px; padding-left: 12px; }
.sb-mehr > button { border-radius: 0 999px 999px 0; padding-right: 12px; }
.sb-neben > button:hover, .sb-mehr > button:hover, .sb-mehr > button[aria-expanded="true"] { background: var(--lav-soft); color: var(--lav-ink); }
.sb-neben .ic { flex: none; }
.sb-neben .btn-merk.on { background: var(--lav-soft); color: var(--lav-ink); }
.sb-neben .btn-merk.on svg { fill: currentColor; }
.sb-mehr { position: relative; }
.sb-menue { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 230px; padding: 6px; background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow); }
.sb-menue a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 8px; color: var(--ink); font-weight: 700; text-decoration: none; }
.sb-menue a:hover { background: var(--lav-soft); color: var(--lav-ink); }
.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); }
.photo::before { display: none; }
/* Ü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; } }

/* 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; }
.sheet label.chip:has(input:checked) .symbole i.on .wz { stroke: var(--pink-lila); }

/* Steckbrief-Kopf: keine Linien zwischen Pflege, Bewurzelung und Licht; die drei Knöpfe einzeln umrandet im Grün der Seite */
.sb-kern { border-top: 0; margin: 12px 0 14px; row-gap: 2px; }
.sb-kern dt, .sb-kern dd { border-bottom: 0; min-height: 34px; padding-top: 3px; padding-bottom: 3px; }
.sb-kern dt { padding-right: 16px; }
.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, .sb-mehr > 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 + .sb-mehr { border-left: 0; }
.sb-neben > button:first-child, .sb-mehr > button { border-radius: 999px; padding-left: 10px; padding-right: 10px; }
.sb-neben > button:first-child { flex: 1.7 1 auto; }
.sb-neben > button:hover, .sb-mehr > button:hover, .sb-mehr > button[aria-expanded="true"] { background: var(--ral-6027); color: var(--ral-6027-ink); }
.sb-neben .btn-merk.on { background: var(--ral-6027); color: var(--ral-6027-ink); }
.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-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; }
@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: 1899px) { #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; }

/* Gespeicherte Steckbriefe: 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: 1899px) { .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; }
.story-bild { display: block; aspect-ratio: 4 / 5; 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: cover; 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-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; }
.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); }