/* Tilda Moss — Zubehoerseite (Affiliate-Schaufenster).
   Baut auf style.css auf und erbt dessen Tokens (--creme, --salbei, --tinte …).
   Hier stehen NUR die Ergaenzungen fuer das Produktraster.

   Haltung: Das soll wie ein ruhiger kleiner Laden wirken, nicht wie eine
   Affiliate-Seite. Der Unterschied liegt in Weissraum und Zurueckhaltung —
   keine Rabatt-Stoerer, keine Sterne, keine Dringlichkeit. Genau die Elemente,
   die andere Affiliate-Seiten benutzen, sind hier bewusst weggelassen: sie
   waeren rechtlich heikel (D6) und wuerden der Marke widersprechen. */

/* ---------- Kopf mit Navigation ---------- */
.kopf{position:relative}
.zurueck{display:block;line-height:0}
.navi{margin-left:auto;font-size:.92rem}
.navi a{color:var(--gedaempft);text-decoration:none;border-bottom:1px solid var(--linie);padding-bottom:2px}
.navi a:hover{color:var(--salbei-dunkel);border-color:var(--salbei)}

/* ---------- Held ---------- */
.laden-held{max-width:58ch;margin-bottom:40px}
.laden-held h1{
  margin:0 0 14px;
  font-size:clamp(1.9rem,6.5vw,2.8rem);
  line-height:1.14;letter-spacing:-.02em;font-weight:650;
}
.laden-held .unter{margin:0 0 22px;font-size:1.06rem;color:var(--gedaempft);max-width:46ch}

/* Die Klarstellung ist Pflichttext (A2) — sie soll gelesen aussehen, nicht
   wie ein weggeschobener Rechtshinweis. Deshalb Papierfarbe statt grauer Kasten. */
.klarstellung{
  margin:0;padding:16px 18px;
  background:var(--papier);
  border:1px solid var(--linie);
  border-left:3px solid var(--salbei);
  border-radius:var(--radius);
  font-size:.94rem;color:var(--gedaempft);
  max-width:52ch;
}
.klarstellung strong{color:var(--tinte);font-weight:600}

/* ---------- Kategorie-Gruppen ---------- */
.gruppe{margin:0 0 52px}
.gruppen-kopf{max-width:54ch;margin-bottom:22px}
.gruppen-kopf h2{
  margin:0 0 8px;font-size:1.5rem;font-weight:640;letter-spacing:-.01em;
  display:flex;align-items:center;gap:12px;
}
/* feine Linie hinter der Ueberschrift — gibt Struktur ohne Trennbalken */
.gruppen-kopf h2::after{content:"";flex:1;height:1px;background:var(--linie)}
.gruppen-kopf p{margin:0;color:var(--gedaempft);font-size:.98rem}

/* ---------- Raster ---------- */
.raster{display:grid;gap:16px;grid-template-columns:1fr}

/* ---------- Kachel ---------- */
.kachel{
  position:relative;
  display:grid;
  grid-template-columns:76px 1fr;
  gap:16px;
  padding:18px;
  background:var(--papier);
  border:1px solid var(--linie);
  border-radius:var(--radius);
  box-shadow:var(--schatten);
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
@media (hover:hover){
  .kachel:hover{
    border-color:var(--salbei);
    transform:translateY(-2px);
    box-shadow:0 2px 4px rgba(51,48,43,.05), 0 14px 32px rgba(51,48,43,.09);
  }
}

/* Pflichtkennzeichnung (D1). Sichtbar ohne Hover, aber nicht schreiend —
   der Nutzer soll es lesen koennen, ohne dass es die Kachel dominiert. */
.anzeige{
  position:absolute;top:12px;right:14px;
  font-size:.66rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gedaempft);
  background:var(--creme);
  border:1px solid var(--linie);
  border-radius:999px;
  padding:2px 8px;
}

/* Eigene Strichzeichnung statt Amazon-Foto (A5). Der Malbuch-Look ist hier
   kein Kompromiss, sondern der Grund, warum die Seite nach uns aussieht. */
.bild{
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:1;
  color:var(--salbei-dunkel);
  background:var(--creme);
  border-radius:14px;
  /* min-width:0 ist Pflicht: Grid-Items haben min-width:auto, dadurch hat das
     SVG seine intrinsische Breite durchgedrueckt und die Bildflaeche lief aus
     der Kachel heraus (gemessen: 367 px Bild in 331 px Kachel). */
  min-width:0;
  overflow:hidden;
}
.bild svg{width:auto;height:58%;max-width:72%}

.inhalt{min-width:0;padding-right:34px}
.hersteller{
  margin:0 0 3px;font-size:.78rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--gedaempft);
  display:flex;align-items:baseline;gap:9px;
}
.stufe{
  font-size:.74rem;letter-spacing:.06em;color:var(--salbei-dunkel);
  font-weight:600;text-transform:none;
}
.kachel h3{margin:0 0 8px;font-size:1.05rem;line-height:1.3;font-weight:620;letter-spacing:-.005em}
.beschreibung{margin:0;font-size:.93rem;line-height:1.6;color:var(--gedaempft)}

/* Ehrliche Einschraenkung (z. B. "bleeds through thin paper").
   Das ist Vertrauens-Bauteil, nicht Kleingedrucktes — deshalb farbig markiert. */
.warnung{
  margin:10px 0 0;padding:9px 12px;
  background:#fdf5f3;
  border-left:2px solid var(--rose);
  border-radius:0 10px 10px 0;
  font-size:.86rem;line-height:1.5;color:#8a6b64;
}

/* Der Button nennt IMMER das Ziel (A2) und sieht bewusst NICHT wie ein
   Kaufen-Knopf aus — kein Warenkorb, keine Signalfarbe, kein "Jetzt". */
.ziel{
  display:inline-flex;align-items:center;gap:5px;
  margin-top:14px;
  font-size:.92rem;font-weight:600;
  color:var(--salbei-dunkel);text-decoration:none;
  border:1px solid var(--linie);border-radius:11px;
  padding:9px 15px;
  background:var(--creme);
  transition:background .16s ease, border-color .16s ease;
}
.ziel:hover{background:#eef2ec;border-color:var(--salbei)}
.ziel:focus-visible{outline:2px solid var(--salbei);outline-offset:2px}

/* ---------- Abschluss ---------- */
.schluss{
  margin:12px 0 44px;padding:32px 26px;
  background:var(--papier);
  border:1px solid var(--linie);
  border-radius:var(--radius);
  text-align:center;
}
.schluss h2{margin:0 0 10px;font-size:1.4rem;font-weight:640}
.schluss p{margin:0 auto 20px;color:var(--gedaempft);max-width:46ch;font-size:.98rem}
.knopf-gross{
  display:inline-block;
  background:var(--salbei-dunkel);color:#fff;
  text-decoration:none;font-weight:600;
  padding:13px 26px;border-radius:12px;
  transition:background .16s ease;
}
.knopf-gross:hover{background:#5c7259}
.knopf-gross:focus-visible{outline:2px solid var(--salbei);outline-offset:3px}

/* ---------- Fuss ---------- */
.offenlegung{
  margin:0 0 10px;
  font-size:.86rem;color:var(--gedaempft);
}

/* ---------- Breitere Schirme ----------
   Mobil zuerst, wie die Landeseite: der Verkehr kommt aus dem Instagram-Profil. */
@media (min-width:620px){
  .raster{grid-template-columns:repeat(2,1fr)}
  .kachel{grid-template-columns:84px 1fr}
}
@media (min-width:1000px){
  .raster{grid-template-columns:repeat(3,1fr)}
  .kachel{grid-template-columns:1fr;gap:14px}
  .bild{aspect-ratio:16/10}
  .bild svg{height:62%;max-width:46%}
  .inhalt{padding-right:0}
  .anzeige{top:14px;right:14px}
}

/* ---------- Bewegung nur, wenn erwuenscht ---------- */
@media (prefers-reduced-motion:reduce){
  .kachel,.ziel,.knopf-gross{transition:none}
  .kachel:hover{transform:none}
}