/* ============================================================
   Marktplatz — eigenes Stylesheet, Präfix mk-

   Das Merkbild ist eine Anzeigenwand: dunkle Fläche, darauf weiße
   Zettel in ungleichen Höhen, jeder mit einer Abrissfranse am Fuß.
   Am echten Brett steht auf der Franse die Telefonnummer — hier
   steht „Anschreiben". Die Geste bleibt, die Nummer bleibt privat;
   das ist der Signaturmoment der Seite.

   Die Zettel stehen in einem Raster, und zwar in gleich hohen: Ein
   echtes Brett hat ungleiche Zettel — auf dem Bildschirm liest sich
   das als Unordnung. Alle Zettel sind gleich hoch (grid-auto-rows:1fr),
   der Fuß mit Name, Alter und Franse sitzt überall auf derselben Linie
   (margin-top:auto). Ein sehr langer Text würde das ganze Brett in die
   Höhe ziehen, deshalb endet er nach zehn Zeilen — der Rest steht im
   Anschreiben. Geändert am 20.08.2026 (vorher CSS-`columns`).

   Grundstimmung: dunkel, mit genau einem hellen Kapitel — dort, wo
   aus dem Lesen ein Tun wird (Aufhängen auf Mint).
   ============================================================ */

.t-zahl{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.t-mikro{font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
[hidden]{display:none !important}

/* ================= 00 · HERO ================= */
.mk-hero .hero-buehne::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,26,17,.55) 0%,rgba(7,48,31,.32) 46%,rgba(6,26,17,.55) 100%)}
.sh-zahl{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:4px;
  padding-bottom:.3em}
.sh-zahl .t-zahl{font-size:clamp(52px,6.4vw,96px);line-height:.9;color:var(--lime)}
.sh-zahl em{font-style:normal;font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.66);max-width:18ch;
  line-height:1.4}

/* ================= Gemeinsames ================= */
.mk-marke{display:flex;align-items:baseline;gap:16px;padding-top:18px;
  border-top:1px solid var(--hairline-dunkel)}
.mk-marke-nr{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.2em;color:var(--lime)}
.mk-marke-was{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.mk-h2{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(32px,4.8vw,74px);letter-spacing:-.05em;line-height:1.06;color:#fff}
.mk-h2-hell{color:var(--tinte)}

/* ================= 01 · DAS BRETT ================= */
.mk-brett{background:var(--pine);color:#fff;
  padding:clamp(46px,6vw,84px) var(--inset) clamp(52px,7vw,96px)}
.mk-kopf-satz{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:14px 56px;align-items:end;padding-top:22px}
.mk-kopf-lead{font-size:17px;font-weight:300;line-height:1.6;color:rgba(255,255,255,.72);
  max-width:46ch;padding-bottom:.4em;text-wrap:pretty}

.mk-flash{margin-top:26px;padding:14px 18px;font-size:16px;font-weight:300;
  border-left:2px solid var(--lime);background:rgba(204,255,0,.1);max-width:64ch}
.mk-flash-err{border-color:var(--live);background:rgba(255,90,77,.12)}

/* --- Auswahl --- */
.mk-filter{margin-top:clamp(26px,3.4vw,46px);display:flex;flex-direction:column;gap:10px}
.mk-filter-zeile{display:flex;flex-wrap:wrap;gap:8px}
.mk-chip{display:inline-flex;align-items:center;padding:9px 17px;border-radius:999px;
  border:1px solid rgba(255,255,255,.28);color:rgba(255,255,255,.8);text-decoration:none;
  font-family:'Space Grotesk',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;
  transition:background var(--t-schnell) ease-out,border-color var(--t-schnell) ease-out,
             color var(--t-schnell) ease-out}
.mk-chip:hover{border-color:var(--lime);color:var(--lime)}
.mk-chip.ist-an{background:var(--lime);border-color:var(--lime);color:var(--pine)}
.mk-chip-leise{border-color:transparent;color:rgba(255,255,255,.55);padding:7px 13px;
  font-size:10.5px;letter-spacing:.14em}
.mk-chip-leise:hover{border-color:rgba(255,255,255,.28);color:#fff}
.mk-chip-leise.ist-an{background:transparent;border-color:var(--lime);color:var(--lime)}
.mk-chip:focus-visible{outline:2px solid var(--lime);outline-offset:3px}

/* --- Die Wand --- */
.mk-wand{margin-top:clamp(30px,4vw,54px);display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1fr;gap:22px}
.mk-zettel{display:flex;flex-direction:column;height:100%;
  margin:0;background:#fff;color:var(--tinte);
  /* Das Eselsohr: oben rechts fehlt eine Ecke. Kein Bild, kein Schatten —
     nur die Form macht aus dem Rechteck einen Zettel. */
  clip-path:polygon(0 0, calc(100% - 17px) 0, 100% 17px, 100% 100%, 0 100%);
  /* Vier Pixel Luft am Fuß: genau der Weg, den sich die Franse beim
     Anfassen löst. Ohne sie schneidet der clip-path sie ab. */
  padding-bottom:4px;
  scroll-margin-top:150px}
.mk-zettel.ist-neu{box-shadow:inset 0 3px 0 0 var(--live)}
.mk-zettel-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:16px 18px 0}
.mk-art{color:var(--gruen) !important}
.mk-art-suche{color:#a05a00 !important}
.mk-kat{color:var(--muted) !important}
.mk-neu{color:var(--live) !important}
.mk-bild{margin:14px 0 0;position:relative}
.mk-bild img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
/* Das große Bild ist ein Knopf — ein Klick legt es über die Seite.
   Ohne JavaScript bleibt es einfach ein Bild, das nichts tut. */
.mk-bild-knopf{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.mk-bild-knopf:focus-visible{outline:2px solid var(--gruen);outline-offset:-2px}
.mk-bild-knopf::after{content:"\002B";position:absolute;right:10px;top:10px;
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:rgba(6,26,17,.55);color:#fff;
  font-family:'Space Grotesk',sans-serif;font-size:17px;font-weight:700;line-height:1;
  opacity:0;transition:opacity var(--t-schnell) ease-out;pointer-events:none}
.mk-bild-knopf:hover::after,.mk-bild-knopf:focus-visible::after{opacity:1}
.mk-thumbs{display:flex;gap:2px;padding:2px 0 0}
.mk-thumb{flex:1 1 0;padding:0;border:0;background:none;cursor:pointer;opacity:.55;
  transition:opacity var(--t-schnell) ease-out}
.mk-thumb img{aspect-ratio:16/10;width:100%}
.mk-thumb:hover,.mk-thumb.ist-an{opacity:1}
.mk-thumb:focus-visible{outline:2px solid var(--gruen);outline-offset:-2px}
.mk-titel{font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:clamp(18px,1.5vw,22px);letter-spacing:-.02em;line-height:1.15;
  padding:16px 18px 0;text-wrap:balance}
.mk-preis{font-family:'Space Grotesk',sans-serif;font-weight:700;font-variant-numeric:tabular-nums;
  font-size:clamp(21px,1.9vw,28px);letter-spacing:-.03em;color:var(--gruen);padding:8px 18px 0}
.mk-text{font-size:15px;font-weight:300;line-height:1.55;color:var(--text);
  padding:10px 18px 0;text-wrap:pretty;
  /* Zehn Zeilen sind für eine Kleinanzeige reichlich — der Deckel ist
     nur dafür da, dass ein einzelner Roman nicht das ganze Brett streckt. */
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:10;overflow:hidden}
.mk-zettel-fuss{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 14px;
  padding:14px 18px 16px;font-size:13.5px;font-weight:300;color:var(--muted);margin-top:auto}

/* --- Die Abrissfranse: der Signaturmoment --- */
.mk-abriss{position:relative;display:block;text-decoration:none;color:var(--gruen);
  padding:0 0 12px;background:#fff;
  transition:transform var(--t-schnell) ease-out}
/* Die Perforation: eine gestrichelte Linie, darunter die Zähne als
   wiederholter Verlauf — kein Bild, nur zwei Verläufe. */
.mk-abriss-zaehne{display:block;height:9px;
  border-top:1px dashed rgba(20,35,27,.3);
  background:repeating-linear-gradient(90deg,
    transparent 0 15px, rgba(20,35,27,.16) 15px 16px)}
.mk-abriss-text{display:block;padding:11px 18px 0;
  font-family:'Space Grotesk',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase}
.mk-abriss::after{content:"→";position:absolute;right:18px;bottom:12px;
  font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:700;
  transition:transform var(--t-schnell) ease-out}
/* Anfassen heißt: der Streifen löst sich. 4 px, mehr nicht. */
.mk-zettel:hover .mk-abriss,.mk-abriss:focus-visible{transform:translateY(4px)}
.mk-abriss:hover .mk-abriss-text,.mk-abriss:focus-visible .mk-abriss-text{color:var(--tanne)}
.mk-zettel:hover .mk-abriss::after{transform:translateX(4px)}
.mk-abriss:focus-visible{outline:2px solid var(--gruen);outline-offset:2px}

/* --- Leeres Brett --- */
.mk-leer{margin-top:clamp(34px,4.6vw,64px);max-width:56ch;display:flex;flex-direction:column;gap:16px;
  align-items:flex-start}
.mk-leer-titel{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(24px,3vw,42px);letter-spacing:-.04em;line-height:1.08;color:#fff;
  text-wrap:balance}
.mk-leer-text{font-size:17px;font-weight:300;line-height:1.6;color:rgba(255,255,255,.66);
  text-wrap:pretty}

/* --- Anschreiben --- */
.mk-anschreiben{margin-top:clamp(26px,3.4vw,44px);padding:clamp(22px,2.6vw,34px);
  background:rgba(255,255,255,.05);border-left:2px solid var(--lime);max-width:760px;
  scroll-margin-top:150px}
.mk-anschreiben-marke{color:var(--lime) !important}
.mk-anschreiben-titel{font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:clamp(20px,2.2vw,30px);letter-spacing:-.03em;line-height:1.1;color:#fff;
  margin:8px 0 20px}
.mk-anschreiben .mk-feld > label{color:rgba(255,255,255,.66)}
.mk-anschreiben .mk-ds{color:rgba(255,255,255,.55)}
.mk-anschreiben .mk-abbrechen{color:rgba(255,255,255,.6)}

/* ================= Formulare (beide Flächen) ================= */
.mk-form{display:flex;flex-direction:column;gap:20px}
.mk-honig{position:absolute;left:-9999px;top:-9999px}
.mk-feld{display:flex;flex-direction:column;gap:7px}
.mk-feld > label{color:var(--nav)}
.mk-optional{font-weight:600;letter-spacing:.1em;color:var(--muted);text-transform:none}
.mk-form input[type=text],.mk-form input[type=email],.mk-form input[type=password],
.mk-form textarea,.mk-form select{width:100%;padding:13px 15px;font-size:16px;
  font-family:'Hanken Grotesk',sans-serif;font-weight:400;color:var(--tinte);
  background:#fff;border:1px solid #cbd6cd;border-radius:8px;
  transition:border-color var(--t-schnell) ease-out,box-shadow var(--t-schnell) ease-out}
.mk-form textarea{resize:vertical;min-height:96px;line-height:1.5}
.mk-form select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--gruen) 50%),
                   linear-gradient(135deg,var(--gruen) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.mk-form input:focus-visible,.mk-form textarea:focus-visible,.mk-form select:focus-visible{
  outline:none;border-color:var(--gruen);box-shadow:0 0 0 2px rgba(31,132,70,.28)}
.ist-fehler input,.ist-fehler textarea{border-color:#b5453a}
.mk-fehler{font-size:14px;color:#8c2f28}
.mk-anschreiben .mk-fehler{color:#ffb3ab}
.mk-zweispalt{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.mk-typwahl{border:0;display:flex;flex-wrap:wrap;gap:10px;padding:0}
.mk-typwahl legend{width:100%;margin-bottom:9px;color:var(--nav)}
.mk-schalter{position:relative;cursor:pointer}
.mk-schalter input{position:absolute;opacity:0;width:1px;height:1px}
.mk-schalter span{display:inline-flex;align-items:center;padding:12px 22px;background:#fff;
  border:1px solid #cbd6cd;border-radius:999px;
  font-family:'Space Grotesk',sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--nav);
  transition:background var(--t-schnell) ease-out,color var(--t-schnell) ease-out,
             border-color var(--t-schnell) ease-out}
.mk-schalter:hover span{border-color:var(--gruen);color:var(--gruen)}
.mk-schalter input:checked + span{background:var(--tanne);border-color:var(--tanne);color:#fff}
.mk-schalter input:focus-visible + span{outline:2px solid var(--gruen);outline-offset:2px}
.mk-form input[type=file]{font-size:14.5px;font-family:'Hanken Grotesk',sans-serif;
  color:var(--sekundaer);padding:0;border:0;background:none}
.mk-form input[type=file]::file-selector-button{margin-right:12px;padding:9px 18px;
  background:#fff;border:1px solid #cbd6cd;border-radius:999px;cursor:pointer;
  font-family:'Space Grotesk',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gruen)}
.mk-form input[type=file]::file-selector-button:hover{border-color:var(--gruen);background:var(--mint)}
/* Dateifeld und Foto-Brücke stehen untereinander in EINEM Feld: Es ist
   eine Frage („welche Bilder?"), nur mit zwei Antwortwegen. Die Optik der
   Brücke selbst steht in assets/fotobruecke.css. */
.mk-foto{display:flex;flex-direction:column;gap:14px}
.mk-ds{font-size:14px;font-weight:300;line-height:1.5;color:var(--muted);max-width:60ch}
.mk-absenden{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.mk-abbrechen{font-size:14px;color:var(--muted);text-decoration:none;
  border-bottom:1px solid transparent;transition:color var(--t-schnell) ease-out,
  border-color var(--t-schnell) ease-out}
.mk-abbrechen:hover{color:var(--gruen);border-color:var(--gruen)}
/* Der Satz unter der Tuer: was tun, wenn das Passwort weg ist. */
.mk-hilfe{margin-top:14px;color:var(--muted);line-height:1.5;max-width:52ch}

/* ================= 02 · AUFHÄNGEN ================= */
.mk-einstellen{background:var(--mint);
  padding:clamp(56px,7vw,104px) var(--inset)}
.mk-einstellen-kopf{max-width:62ch}
.mk-einstellen-lead{margin-top:14px;font-size:17px;font-weight:300;line-height:1.6;
  color:var(--sekundaer);max-width:56ch;text-wrap:pretty}
.mk-einstellen-raster{margin-top:clamp(28px,3.6vw,48px);display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,3fr);gap:clamp(30px,4vw,64px);align-items:start}
.mk-marginalie{padding-top:8px;border-top:1px solid rgba(20,35,27,.18);
  display:flex;flex-direction:column;gap:12px}
.mk-marginalie-titel{padding-top:10px}
.mk-marginalie p{font-size:15px;font-weight:300;line-height:1.6;color:var(--sekundaer)}

/* Die Tür für Nichtangemeldete — gleiche Fläche, andere Aufgabe */
.mk-tuer{margin-top:clamp(28px,3.6vw,48px);display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,60px);align-items:start}
.mk-tuer-titel{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(22px,2.6vw,36px);letter-spacing:-.04em;line-height:1.1;color:var(--tinte);
  text-wrap:balance}
.mk-tuer-text{margin-top:14px;font-size:16px;font-weight:300;line-height:1.6;
  color:var(--sekundaer);max-width:46ch;text-wrap:pretty}

/* Die eigenen Zettel */
.mk-meine{margin-top:clamp(26px,3.2vw,42px);padding-top:18px;
  border-top:1px solid rgba(20,35,27,.18)}
.mk-meine-liste{list-style:none;margin-top:12px}
.mk-meine-zeile{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px 20px;
  align-items:baseline;padding:12px 0;border-bottom:1px solid rgba(20,35,27,.12)}
.mk-meine-zeile.ist-aus{opacity:.55}
.mk-meine-titel a{color:var(--tinte);text-decoration:none;font-weight:600;
  border-bottom:1px solid transparent}
.mk-meine-titel a:hover{border-color:var(--gruen);color:var(--gruen)}
.mk-meine-stand{font-size:14px;font-weight:300;color:var(--sekundaer);white-space:nowrap}
.mk-meine-knoepfe{display:flex;flex-wrap:wrap;gap:8px}
.mk-mini{background:#fff;border:1px solid #cbd6cd;border-radius:999px;padding:6px 14px;
  font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gruen);cursor:pointer;
  transition:border-color var(--t-schnell) ease-out,background var(--t-schnell) ease-out}
.mk-mini:hover{border-color:var(--gruen);background:#fff;text-decoration:none}
/* „ändern" ist ein Link, kein Knopf — er führt woandershin, statt etwas zu
   tun. Aussehen soll er trotzdem wie seine Nachbarn. */
a.mk-mini{display:inline-flex;align-items:center;text-decoration:none}
.mk-mini-weg{color:#8c2f28}
.mk-mini-weg:hover{border-color:#8c2f28}
.mk-mini:focus-visible{outline:2px solid var(--gruen);outline-offset:2px}

/* ================= 03 · HAUSREGELN ================= */
.mk-regeln{background:var(--pine);color:#fff;padding:clamp(56px,7vw,110px) var(--inset)}
.mk-regeln-inhalt{display:flex;flex-direction:column;gap:22px}
.mk-regeln-titel{display:flex;flex-direction:column;font-family:'Space Grotesk',sans-serif;
  font-weight:700;text-transform:uppercase;font-size:clamp(32px,5vw,80px);
  letter-spacing:-.05em;line-height:1.06}
/* Das Echo: dieselbe Konturschrift wie in der Hero-Schlagzeile. */
.mk-regeln-outline{color:transparent;-webkit-text-stroke:2px var(--lime)}
.mk-regelliste{list-style:none;margin-top:10px;border-top:1px solid var(--hairline-dunkel);
  max-width:1000px}
.mk-regelliste li{display:grid;grid-template-columns:44px minmax(0,10fr) minmax(0,14fr);
  gap:8px 26px;padding:20px 0;border-bottom:1px solid var(--hairline-dunkel);align-items:baseline}
.mk-regel-nr{color:rgba(255,255,255,.4) !important}
.mk-regel-kurz{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(15px,1.4vw,20px);letter-spacing:-.02em;line-height:1.15;color:var(--lime)}
.mk-regel-text{font-size:16px;font-weight:300;line-height:1.6;color:rgba(255,255,255,.74);
  text-wrap:pretty}
.mk-regeln-hinweis{font-size:14px;font-weight:300;color:rgba(255,255,255,.5)}

/* ================= Schmale Fenster ================= */
@media (max-width:1300px){ .mk-wand{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:1000px){
  .mk-wand{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mk-kopf-satz{grid-template-columns:minmax(0,1fr)}
  .mk-einstellen-raster,.mk-tuer{grid-template-columns:minmax(0,1fr)}
  .mk-marginalie{order:-1}
  .mk-regelliste li{grid-template-columns:34px minmax(0,1fr)}
  .mk-regel-text{grid-column:2}
}
@media (max-width:640px){
  /* Eine Spalte: Untereinander sieht niemand zwei Höhen nebeneinander —
     gleich hohe Zettel wären hier nur Leerraum. */
  .mk-wand{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}
  .mk-zweispalt{grid-template-columns:1fr}
  .mk-meine-zeile{grid-template-columns:minmax(0,1fr)}
  .mk-meine-stand{white-space:normal}
}

/* ================= Die Lupe: Bild über der Seite =================
   Bewusst nicht die Lightbox aus seite.js: die hängt an den Kacheln der
   Startseite und blättert durch alles, was auf der Seite liegt. Hier
   blättert sie nur durch die Bilder EINER Anzeige. */
.mk-lupe{position:fixed;inset:0;z-index:150;background:rgba(6,26,17,.95);
  display:none;align-items:center;justify-content:center;padding:70px 40px}
.mk-lupe.ist-auf{display:flex}
.mk-lupe img{max-width:min(1280px,92vw);max-height:82svh;object-fit:contain}
.mk-lupe-knopf{position:absolute;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.35);color:#fff;padding:12px 18px;border-radius:999px;
  font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;cursor:pointer}
.mk-lupe-knopf:hover{background:rgba(255,255,255,.2)}
.mk-lupe-knopf:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.mk-lupe-zu{top:24px;right:26px}
.mk-lupe-vor{right:26px;top:50%;transform:translateY(-50%)}
.mk-lupe-zurueck{left:26px;top:50%;transform:translateY(-50%)}
.mk-lupe-bu{position:absolute;left:0;right:0;bottom:26px;text-align:center;
  color:rgba(255,255,255,.75);font-family:'Space Grotesk',sans-serif;font-size:11.5px;
  font-weight:700;letter-spacing:.18em;text-transform:uppercase}
@media (max-width:640px){
  .mk-lupe{padding:64px 14px}
  .mk-lupe-vor{right:12px}
  .mk-lupe-zurueck{left:12px}
  .mk-lupe-knopf{padding:10px 14px;font-size:11px}
}

/* ================= Bewegung aus ================= */
@media (prefers-reduced-motion:reduce){
  .mk-abriss,.mk-abriss::after,.mk-chip,.mk-thumb,.mk-bild-knopf::after{transition:none !important}
  .mk-zettel:hover .mk-abriss{transform:none}
}

/* ── Ändern statt Aufhängen ───────────────────────────────────────────────
   Dasselbe Formular, nur mit Vorgeschichte: eine Marke oben, die bisherigen
   Bilder mit einem Kästchen zum Abwählen. */
.mk-aendern-marke{font-family:var(--lauf);font-size:13px;color:var(--gruen);
  background:rgba(204,255,0,.16);border-radius:8px;padding:9px 12px;margin:0 0 6px}
.mk-aendern-marke a{color:var(--gruen)}
.mk-altbilder{list-style:none;margin:6px 0 0;padding:0;display:flex;gap:12px;flex-wrap:wrap}
.mk-altbilder li{display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.mk-altbilder img{width:96px;height:72px;object-fit:cover;border-radius:6px;
  border:1px solid var(--linie-karte);background:var(--mint)}
.mk-weg{font-family:var(--lauf);font-size:12px;color:var(--sekundaer);display:flex;
  align-items:center;gap:6px;cursor:pointer}