/* Schulheft-Look der Website auf der Übersicht (Alex, 30.09.2026: „ein bisschen von der Website übernehmen … diesen
   rosa Klebestreifen überall ranmachen, dezent … damit das Design ähnlich aussieht“; gebaut von Claude).
   Werte aus phpWebsite/DESIGN.md („Schulheft + Marktplatz“): Heftgrund mit Karo, Tinte statt Schwarz, Rosé-Familie,
   Young Serif für Überschriften, Inter für Text, Grundschrift nur für die Randnotiz, 1,5 px Tintenkontur und harter
   Versatz statt weicher Schatten. Die Szenen (SVG) bleiben unverändert, sie zeigen die Tafeln selbst.
   Eigene Datei nach styles.css und suche.css, liegt in assets/, weil die .htaccess von /interaktiv/ im Hauptordner nur
   styles.css, suche.css, app.js und suche.js direkt ausliefert. Rückweg: den Link in index.html entfernen. */

@font-face {
  font-family: "GSR Young Serif";
  src: url("fonts/young-serif-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GSR Grundschrift";
  src: url("fonts/grundschrift-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GSR Inter";
  src: url("fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------- Tokens (wie body.gsr-schulheft der Website) */
:root {
  --sh-ground: #f8f7f5;
  --sh-paper: #fffdfb;
  --sh-rose: #f8e8ed;
  --sh-rose-mid: #c77f97;
  --sh-action: #984c67;
  --sh-action-deep: #7f3e56;
  --sh-ink: #3f3436;
  --sh-ink-soft: #65575a;
  --sh-hair: rgba(63, 52, 54, .17);
  --sh-grid: rgba(152, 76, 103, .075);
  --sh-rule: rgba(152, 76, 103, .2);
  --sh-margin-line: rgba(199, 127, 151, .6);
  --sh-display: "GSR Young Serif", Georgia, "Times New Roman", serif;
  --sh-text: "GSR Inter", Inter, Arial, sans-serif;
  --sh-hand: "GSR Grundschrift", "GSR Inter", Arial, sans-serif;
  --sh-stroke: 1.5px;
  --sh-ease: cubic-bezier(.16, 1, .3, 1);
  /* Gemaltes Washi-Tape (motive/washi-uni.webp der Website, 1,4 KB) und Markerstrich (verkleinert auf 520 px) */
  --sh-tape: url("data:image/webp;base64,UklGRqAFAABXRUJQVlA4WAoAAAAQAAAAjwAALwAAQUxQSGsBAAARZ6AgbQMWTsNfRAS4Tm/NBXK1bVuk5sWh+2dafIYTWKlwWDkB3N2StO6e4FTulXs3UsWT/zur1V+iVUT/JwD/2BnAgnedIsUCkbcnmxsuJypWptqyIuOHnFLnqlEdWeWUqWTMAAuG2t9xyvwOZGbjjnfiUpbr5akO3nVI5IIczIocchJdJCgQHj/a3HBJxrLsserx+2uc5H2Sk4Wqu8cnmxsuJ8lrM2Ft73+SmttpMMNqf+eSsqUJgYmOe+9dj5QuAarecdJgPvCFdHgG4IcWtgF81sICgGst+LnAJy1QHTDCtdAP4IsWngA4UO90Np4LYEWt09m4nYOkH1U5nZ3qjNo5SLP5p3T+5mxn2MpB5isynW7OPoibyPa+HL53sjFVkwOh18K804edYTMH4j8L8E82HsZtIwdysp9Z8janwyakfkEZ+95cZ8gyIP11Wv5cV9g2Dai5ksTfetAZtk2ofONtPpiM2Tn4TxMAVlA4IA4EAAAQFQCdASqQADAAPpU8mUgloyKhMvENELASiWIAyuhBymnG7bHnzPQj/t98A3jryYMxN6z8jMdNEkjkimmeOX6y9gLdOf2kXWkzDmjyO9ybgGbLLlsZem/xyvQbcwp9XxFg8b5fwjXYUxJvHUpMiBd8GkVMkpTg261Nf5Z3kfgF0T/g1m1owAkfvNidfIlM7R2oM8j/P9O7sH4ClZN/8jqv96+LTAP+B4m97+1U9ffZ1oAA/vxc1Cfzg+zLc9xv8ER9sOtRsirCUg8KAY65sMPoR6dOklbDG5fj1h5irIYRL0Rk8gO9/rmvzy/W5/SA4sqknP9249eoY79P6Q2LWWpLhIkvXFAkyzOO/jg4deCCeCsanPEiOCz+UNVX8y16UQDLifWT+C6jK4IZWq3AKvKNSHqycs3iCADb7d5YscCawMOvbhmDD42Rs2ABJGNmcvVuDGLwaG4+5O/aJ8bb4P2osUVguygVFQZs//ne88UXq2jnJceWwIt4qK/epU9iwHjdgdqg9qjB/8BKgUAYeQPvdZcYJ620yrgu4JW92XBYjHcI53rjELcrWYIx1UWawKDBsURmBCmfs/YLTo2D0icgQDrR04+AgtEKCN1pTTFmYFF8EUKABlV6U9Q7IQFqqeVtmceF4eYpOMR0XuOtaboiCZei1xVWN7uchholAGSdaJCZw36w5eGe9e0ypX51BiDk1H8NNhoOOOosOOUZ/Xk+zhtUuqRZOe+R4KPjgXu+8pgwcsEBOzKjVjdmv9ldS1s/FsnLOdwHDygYFYF6bCNHx73OnYDtH6rTrtqHri+vtkmlOJ5fZUdB7Et1rJCG6uRRspl5ZrXCkcB8VPC7GraYkVeTTdQp+O4ESdmYbwyRbVy9FCrB0jPbIIicm7QHLoEmNmsSEQk20vThEY3FuxN4AAwIhl6igQOMSlleN42InxyTAaI068Q5lBiYVJO0qxNWITyArVMgRfKutebmVCDTigxaW6ddlizWd9UZwTAfJFKYm7k9Mb8n91nWpFByZRhBYEuU5/MEZZZXF63hpdNDgDFPL4bJgVzNQoKDWE6WU9Hu8X7hpI+4TwixU3dHhey3JCYx3372tdEVKZq4WH+5Kjc5eQIXygUDC/2ewh/eN5UJF+QVYhtcvmVuui/J1dwWW55IsEiPv1Y1MyfzFyxAk5XR3uXOFgWfI7H0EQtwsKt5sa9dRhV0ajn4tMJ20VyWKlUMCQWwalL7OFgDLXqzLCcyK1c/4jTP71NY7I96SFz45yEwY8/5Yf2gs2u6CGXohn2wkdKpVvG7Y1LzjI+bknXV/4XnCsk2XQ7SRlWDFUQdmvTyABOfeKgrTFlfmmsRVG3+QyHrs33riRLplpA2YP8sR7Cf+ktiFBgAAAA=");
  --sh-marker: url("data:image/webp;base64,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");
}

body {
  color: var(--sh-ink);
  /* Karopapier 24 px auf warmem Heftgrund statt der bunten Lichtflecken */
  background:
    linear-gradient(var(--sh-grid) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--sh-grid) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--sh-ground);
  background-attachment: fixed;
  font-family: var(--sh-text);
}

::selection { background: #f1cfdb; color: var(--sh-ink); }
:focus-visible { outline: 3px solid var(--sh-action); outline-offset: 3px; }
input, textarea { caret-color: var(--sh-action); }

/* ---------------------------------------------------------------- Kopf als Heftblatt */
.topbar {
  border: var(--sh-stroke) solid var(--sh-ink);
  border-radius: 18px;
  background: var(--sh-paper);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* Rosa Heftrandlinie hinter dem Logo; nur, wo links genug Platz bis zur Suche bleibt.
   Logo größer und senkrecht mittig im Kopf (Alex, 30.09.2026: „das Logo gerne etwas breiter … in dem Kasten mittig“):
   Es steht außerhalb des Rasters über beide Zeilen, die Randlinie rückt mit. Titel und Knöpfe behalten ihre Spalten,
   die Suchzeile hält links und rechts gleich viel Abstand und bleibt so unter dem Titel mittig. Bei schmalen Fenstern
   wird das Logo kleiner, damit das Suchfeld seinen Hinweistext ganz zeigt. */
@media (min-width: 1100px) {
  .topbar { --logo: clamp(72px, min(11vh, 12vw - 60px), 104px); }
  .topbar::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(28px + var(--logo));
    width: 2px;
    background: var(--sh-margin-line);
    pointer-events: none;
  }
  .brand { position: absolute; top: 0; bottom: 0; left: 14px; height: var(--logo); margin-block: auto; }
  .brand-logo { width: var(--logo); }
  .title { grid-column: 2; }
  .topbar-actions { grid-column: 3; }
  .finder { padding-inline: calc(var(--logo) + 28px); }
}
.brand-logo { box-shadow: none; }

.title {
  color: var(--sh-ink);
  font-family: var(--sh-display);
  font-size: calc(.9 * clamp(1.6rem, min(5.2vh, 4.4vw), 2.9rem));
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.005em;
  padding-top: 0;
}
@media (max-width: 640px) { .title { font-size: calc(.9 * clamp(1.15rem, 5.2vw, 1.5rem)); } }
/* Markerstrich unter dem Schlüsselwort, zieht sich einmal von links ein (der eine Moment der Seite) */
.title-mark { position: relative; z-index: 0; white-space: nowrap; }
.title-mark::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -.08em;
  right: -.1em;
  bottom: .02em;
  height: .5em;
  background: var(--sh-marker) no-repeat 0 50% / 100% 100%;
  opacity: .5;
  clip-path: inset(0 100% 0 0);
  animation: sh-marker .95s .35s var(--sh-ease) forwards;
}
@keyframes sh-marker { to { clip-path: inset(0 0 0 0); } }

/* Pille „Zur Website“: Chip der Website, Hover dunkles Heftrosé mit hartem Versatz */
.chip-btn {
  border: var(--sh-stroke) solid var(--sh-ink);
  background: #fff;
  color: var(--sh-ink);
  font-weight: 620;
  transition: background-color .16s var(--sh-ease), color .16s var(--sh-ease), box-shadow .16s var(--sh-ease), transform .16s var(--sh-ease);
}
.chip-btn svg { --art-color: var(--sh-rose-mid); }
.chip-btn:hover,
.chip-btn:focus-visible { border-color: var(--sh-ink); background: var(--sh-action); color: #fff; box-shadow: 3px 3px 0 var(--sh-ink); transform: translate(-2px, -2px); }
.chip-btn:hover svg,
.chip-btn:focus-visible svg { --art-color: #fff; }
.chip-btn:active { box-shadow: 1px 1px 0 var(--sh-ink); transform: none; }

/* Kontoknopf: runder Symbolknopf; das Kontofenster ist das eine schwebende Blatt (harter Versatz) */
.konto-icon { border: var(--sh-stroke) solid var(--sh-ink); background: var(--sh-paper); color: var(--sh-ink); }
/* Ungelesene Kontonachrichten: derselbe Punkt wie am Konto-Symbol der Website; sitzt wie der grüne Statuspunkt am Rahmen von .konto-menu. */
.konto-punkt { position: absolute; top: -1px; right: -1px; width: 12px; height: 12px; border: 2px solid #fff; border-radius: 50%; background: var(--sh-action); }
.konto-nachrichten-link { font-weight: 600; }
.konto-icon:hover,
.konto-menu[open] .konto-icon { border-color: var(--sh-ink); background: var(--sh-rose); }
.konto-panel { border: var(--sh-stroke) solid var(--sh-ink); border-radius: 18px; background: var(--sh-paper); box-shadow: 6px 6px 0 var(--sh-ink); }
.konto-panel .konto-ansicht { border-top: 1px dashed var(--sh-rule); }
.konto-ansicht select { border: var(--sh-stroke) solid var(--sh-ink); }
.konto-status-link, .konto-status-retry { color: var(--sh-action); text-decoration-color: var(--sh-rose-mid); }

/* ---------------------------------------------------------------- Suche und Filter */
.finder-q { border: var(--sh-stroke) solid var(--sh-ink); color: var(--sh-ink); transition: box-shadow .16s var(--sh-ease); }
.finder-q:hover { border-color: var(--sh-ink); }
.finder-q::placeholder { color: var(--sh-ink-soft); }
.finder-q:focus-visible { outline: none; }
/* Wie das Suchfeld der Website: das ganze Feld bekommt beim Fokus den harten Tintenversatz */
.finder-search:focus-within .finder-q { box-shadow: 3px 3px 0 var(--sh-ink); }
.finder-search > svg { color: var(--sh-ink-soft); }
.finder-clear { background: var(--sh-rose); color: var(--sh-ink); }
.finder-clear:hover { background: #f1d7e0; }

.seg { border: var(--sh-stroke) solid var(--sh-ink); }
.seg-label { color: var(--sh-ink-soft); font-weight: 500; }
.seg-btn { color: var(--sh-ink); font-weight: 620; }
.seg-btn.is-num { padding: 0; font-family: var(--sh-display); font-size: 1.12em; font-weight: 400; }
.seg-btn:hover { background: var(--sh-rose); }
.seg-btn[aria-pressed="true"] { background: var(--sh-action); color: #fff; }
.seg-dot { border-width: var(--sh-stroke); border-color: var(--sh-ink); }

.finder-empty p { color: var(--sh-ink); }
.finder-reset { border: var(--sh-stroke) solid var(--sh-ink); background: var(--sh-action); box-shadow: 3px 3px 0 var(--sh-ink); font-weight: 650; transition: background-color .16s var(--sh-ease), box-shadow .16s var(--sh-ease), transform .16s var(--sh-ease); }
.finder-reset:hover { background: var(--sh-action-deep); box-shadow: 5px 5px 0 var(--sh-ink); transform: translate(-2px, -2px); }
.finder-reset.is-soft { background: #fff; color: var(--sh-ink); box-shadow: none; }
.finder-reset.is-soft:hover { background: var(--sh-rose); box-shadow: 3px 3px 0 var(--sh-ink); }
.finder-reset:active { box-shadow: 1px 1px 0 var(--sh-ink); transform: translate(2px, 2px); }

/* ---------------------------------------------------------------- Abschnitte */
.group-title {
  color: var(--sh-ink);
  font-family: var(--sh-display);
  font-size: clamp(1.05rem, 2.4vh, 1.5rem);
  font-weight: 400;
  line-height: 1.12;
  padding: 0 4px;
}
.group-title::before { width: .5em; height: .5em; margin-top: 0; border-width: var(--sh-stroke); border-color: var(--sh-ink); }
/* Gestrichelte Heftlinie statt grauem Balken */
.group-title::after { height: 0; margin-top: 0; border-top: var(--sh-stroke) dashed var(--sh-rule); border-radius: 0; background: none; }

/* ---------------------------------------------------------------- Kacheln als eingeklebte Blätter */
.tile {
  border: var(--sh-stroke) solid var(--sh-ink);
  border-image: none;
  border-radius: 8px;
  background: #fff;
  color: var(--sh-ink);
  box-shadow: none;
  transition: transform .16s var(--sh-ease), box-shadow .16s var(--sh-ease), opacity .25s ease, filter .25s ease;
}
.tile:hover,
.tile:focus-visible { box-shadow: 4px 4px 0 var(--sh-ink); transform: translate(-2px, -3px); }
.tile:active { box-shadow: 1px 1px 0 var(--sh-ink); transform: translate(1px, 1px); transition-duration: .08s; }
.tile:focus-visible { border-radius: 8px; outline-offset: 5px; }

/* Rosa Klebestreifen oben auf jeder Kachel, leicht schräg und nicht überall an derselben Stelle */
.tile::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: -10px;
  left: var(--tape-x, 50%);
  width: clamp(54px, 34%, 88px);
  aspect-ratio: 104 / 30;
  background: var(--sh-tape) no-repeat 50% 50% / 100% 100%;
  opacity: .9;
  transform: translateX(-50%) rotate(var(--tape-r, -4deg));
  pointer-events: none;
}
.tile:nth-of-type(3n + 2) { --tape-x: 44%; --tape-r: 3deg; }
.tile:nth-of-type(3n) { --tape-x: 57%; --tape-r: -1.5deg; }
.tile:nth-of-type(4n) { --tape-x: 47%; --tape-r: 4.5deg; }

.stage { border-radius: 5px; }

.tile-title { color: var(--sh-ink); font-family: var(--sh-display); font-weight: 400; line-height: 1.1; letter-spacing: -.01em; padding-top: 0; }
/* Young Serif läuft rund 10 % breiter als Baloo 800: dieselben Titelgrößen wie in styles.css und suche.css, mal 0,88,
   damit die Titel weiter ganz in die Kachel passen. „Bald neu“ übernimmt die Größe über --kachel-schrift (app.js). */
.tile-title { font-size: calc(.88 * clamp(1.45rem, 3.9vh, 2.3rem)); }
.soon-group .tile-title { font-size: calc(.88 * clamp(1.2rem, 1.45vw, 1.6rem)); }
.kacheln-gleich .soon-group .tile-title { font-size: var(--kachel-schrift); }
@media (min-width: 641px) {
  .shelf.is-filtered .tile-title { font-size: calc(.88 * clamp(1.25rem, calc(var(--tw) / 9), 1.9rem)); }
}
@media (min-width: 641px) and (min-aspect-ratio: 11/10) {
  .tile-title { font-size: calc(.88 * min(clamp(1.3rem, 3.8vh, 2.3rem), calc(1.97vw - 8px))); }
}
@media (min-width: 641px) and (min-aspect-ratio: 11/10) and (max-aspect-ratio: 29/20) and (max-width: 1100px) {
  .tile-title { font-size: calc(.88 * min(clamp(1.3rem, 3.8vh, 2.3rem), calc(2.65vw - 7px))); }
}
@media (min-width: 2400px) and (min-aspect-ratio: 11/10) {
  .tile-title { font-size: calc(.88 * min(clamp(1.3rem, 3.8vh, 2.3rem), 1.28vw)); }
}
@media (min-width: 641px) and (max-aspect-ratio: 11/10) {
  .tile-title { font-size: calc(.88 * min(clamp(1.3rem, 2.8vh, 2.1rem), 2.6vw)); }
}
@media (max-width: 640px) {
  .tile-title { font-size: calc(.88 * 1.75rem); }
  .soon-group .tile-title { font-size: calc(.88 * 1.2rem); }
}
.tile-text { color: var(--sh-ink-soft); }
.tile-lock { background: var(--sh-ink); font-family: var(--sh-text); font-weight: 650; }
.tile-go { border-width: var(--sh-stroke); border-color: var(--sh-ink); box-shadow: none; }

/* Schlösser: Tintenkontur ohne weichen Schatten */
.tile.is-locked .stage::after,
.soon-lock { box-shadow: 0 0 0 var(--sh-stroke) var(--sh-ink); }

/* ---------------------------------------------------------------- Fuß: Notiz, Rechtliches und Schriftlizenz */
.foot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 170px 10px;
  min-height: 100px;
  color: var(--sh-ink-soft);
}
.foot-note {
  display: inline-block;
  color: var(--sh-action);
  font-family: var(--sh-hand);
  font-size: 1.2em;
  letter-spacing: 0;
  line-height: 1.2;
  transform: rotate(-1.5deg);
}
.foot-soon { color: var(--sh-ink); border-bottom-color: var(--sh-rose-mid); }
.foot-soon:hover { color: var(--sh-action); border-bottom-color: var(--sh-action); }
.foot-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0 18px;
  font: 500 14px/1.4 var(--sh-text);
}
.foot-legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 5px 0;
  color: var(--sh-ink);
  text-decoration: underline;
  text-decoration-color: var(--sh-rose-mid);
  text-underline-offset: 4px;
}
.foot-legal a:hover, .foot-credit a:hover { color: var(--sh-action); text-decoration-color: currentColor; }
.foot a:focus-visible { outline: 2px solid var(--sh-action); outline-offset: 4px; border-radius: 2px; }
.foot-credit {
  position: static;
  display: block;
  width: auto;
  margin: 0;
  color: var(--sh-ink-soft);
  font: 400 12px/1.5 var(--sh-text);
  text-align: center;
  transform: none;
}
.foot-credit a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1000px) {
  .foot { padding-inline: 12px; padding-bottom: 74px; }
}

/* ---------------------------------------------------------------- „Nur für dich“ und „Bald neu“ */
.soon-title { color: var(--sh-ink); font-family: var(--sh-display); font-weight: 400; line-height: 1.08; padding-top: 0; }
.soon-sub { color: var(--sh-ink-soft); }
.soon-mark { font-family: var(--sh-display); font-weight: 400; padding-top: 0; }

/* ---------------------------------------------------------------- Feedback */
.feedback {
  border: var(--sh-stroke) solid var(--sh-ink);
  border-image: none;
  border-radius: 18px;
  background: var(--sh-paper);
  color: var(--sh-ink);
  box-shadow: 6px 6px 0 var(--sh-ink);
  font-family: var(--sh-text);
}
.feedback::backdrop { background: rgba(63, 52, 54, .38); }
/* Ruhiger Einstieg im Kopf; das Formular erscheint ausschließlich nach einem Klick. */
.feedback-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 4px;
  border: 0;
  background: transparent;
  color: var(--sh-ink-soft);
  font: 500 14px/1.2 var(--sh-text);
  text-decoration: underline;
  text-decoration-color: var(--sh-hair);
  text-underline-offset: 4px;
  cursor: pointer;
}
.feedback-link svg { flex: none; width: 24px; height: 24px; --art-color: #fbbf24; }
.feedback-link[hidden] { display: none; }
@media (max-width: 360px) { .feedback-link span { display: none; } }
.feedback-link:hover { color: var(--sh-action); text-decoration-color: currentColor; }
.feedback-link:focus-visible, .feedback-schliessen:focus-visible { outline: 2px solid var(--sh-action); outline-offset: 3px; border-radius: 4px; }
.feedback-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.feedback-kopf .feedback-titel { margin: 0; }
.feedback-schliessen {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--sh-ink);
  cursor: pointer;
}
.feedback-schliessen:hover { background: var(--sh-rose); }
.feedback-schliessen svg { width: 24px; height: 24px; }
.feedback-melden { margin: 12px 0 0; color: var(--sh-ink-soft); font-size: 13px; line-height: 1.5; }
.feedback-text::placeholder { color: var(--sh-ink-soft); }
.feedback-titel { color: var(--sh-ink); font-family: var(--sh-display); font-weight: 400; padding-top: 0; }
.feedback-feld { border: var(--sh-stroke) solid var(--sh-ink); }
.feedback-feld:focus-visible { outline: none; box-shadow: 3px 3px 0 var(--sh-ink); }
.feedback-knoepfe { background: linear-gradient(rgba(255, 253, 251, 0), var(--sh-paper) 14px); }
.feedback-knopf,
.feedback-fab { border: var(--sh-stroke) solid var(--sh-ink); background: var(--sh-action); color: #fff; box-shadow: 3px 3px 0 var(--sh-ink); font-family: var(--sh-text); font-weight: 650; transition: background-color .16s var(--sh-ease), box-shadow .16s var(--sh-ease), transform .16s var(--sh-ease); }
.feedback-knopf:hover,
.feedback-fab:hover { background: var(--sh-action-deep); box-shadow: 5px 5px 0 var(--sh-ink); transform: translate(-2px, -2px); }
.feedback-knopf:active,
.feedback-fab:active { box-shadow: 1px 1px 0 var(--sh-ink); transform: translate(2px, 2px); }
.feedback-knopf.is-leise { background: #fff; color: var(--sh-ink); box-shadow: none; }
.feedback-knopf.is-leise:hover { background: var(--sh-rose); box-shadow: 3px 3px 0 var(--sh-ink); }

/* ---------------------------------------------------------------- Bewegung */
@media (prefers-reduced-motion: reduce) {
  .title-mark::before { animation: none; clip-path: none; }
  .tile:hover, .tile:focus-visible, .tile:active,
  .chip-btn:hover, .chip-btn:focus-visible,
  .finder-reset:hover, .feedback-knopf:hover, .feedback-fab:hover { transform: none; }
}