/* ═══════════════════════════════════════════════════════════════════════════
   Inseratsseite — neuer Entwurf (14.10.2026), Namensraum .kdt-

   Farben, Radien und Schriftgroessen sind AM ARTBOARD AUSGEMESSEN, nicht
   geschaetzt — und es sind dieselben wie in ksa-category.css: #18181B als
   Schrift, #006C35 als Marke, #E4E7E5 als Linie, 14/18/24 px Radien. Ein
   Designsystem fuer Katalog und Inserat.

   Kein `npm run build`: das Bundle ist seit 23.08. eingefroren. Deshalb reines
   CSS hier und keine Tailwind-Klassen im neuen Markup.
   ═══════════════════════════════════════════════════════════════════════════ */

.kdt{--ink:#18181B;--ink2:#3F444B;--mut:#6B7077;--mut2:#8A8F96;--line:#E4E7E5;--line2:#D9DDDA;
     --gr:#006C35;--gr2:#00552A;--bg:#F6F7F6;--bg2:#F1F3F2;--warn:#C2410C;
     color:var(--ink);font-feature-settings:"tnum" 1}
.kdt .wrap{max-width:1280px;margin:0 auto;padding:0 16px}

/* ── Pfad ─────────────────────────────────────────────────────────────── */
.kdt-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:14px;color:var(--mut);padding:32px 0}
.kdt-crumbs a{color:var(--mut);text-decoration:none}
.kdt-crumbs a:hover{color:var(--gr)}
.kdt-crumbs b{color:var(--ink);font-weight:700}

/* ── Zwei Spalten: Inhalt + feststehende Seitenspalte (Artboard: 1fr / 400) ── */
/* EINE Spalte (Inhaber, 14.10.2026). Die Seitenspalte ist weg: alles Wichtige
   steht jetzt direkt unter dem Schild, und die Seite liest sich von oben nach
   unten -- auf jedem Geraet gleich. */
.kdt-main{display:flex;flex-direction:column;gap:32px;padding-bottom:40px}
.kdt-left{display:contents}

/* ── Kopf ─────────────────────────────────────────────────────────────── */
/* KEIN Kasten um den Kopf (Inhaber, 14.10.2026): Schild, Titelzeile und
   Verkaeuferzeile sind EIN Bereich, keine Schachtel in einer Schachtel. */
.kdt-head{background:none;border:0;border-radius:0;padding:0}

/* ── Titelzeile: links Name/Preis/Ort, rechts vier Kacheln ──────────────── */
.kdt-title{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:0 0 32px}
.kdt-title-l{flex:1 1 auto;min-width:0}
.kdt-h1{margin:0 0 12px;font-size:36px;line-height:40px;font-weight:700;letter-spacing:-.02em;text-wrap:balance}
.kdt-pl{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin:0;font-size:18px}
/* "Price:" traegt dieselbe Groesse und dasselbe Gewicht wie die Zahl
   (Inhaber, 14.10.2026) -- nur die Farbe trennt beide, damit die Zahl weiter
   fuehrt. Im Vorbild steht das Wort in 18 px mager. */
.kdt-pl-k{font-size:44px;line-height:1;font-weight:800;letter-spacing:-.025em;color:#52525B}
/* ABWEICHUNG VOM VORBILD (Inhaber, 14.10.2026): dort steht der Preis in
   text-2xl = 24 px, also kleiner als die Ueberschrift. Hier ist er mit 44 px
   das Groesste auf der Seite -- auf einer Verkaufsseite ist die Zahl die
   Nachricht, nicht der Name des Kennzeichens. Die Grundlinie der Zeile bleibt
   unveraendert, der Preis waechst nur nach oben. */
.kdt-pl-v{font-size:44px;line-height:1;font-weight:800;color:var(--gr);letter-spacing:-.025em}
.kdt-pl-v .rs{width:.60em;height:.68em;margin-inline-start:.11em;vertical-align:-.02em}
.kdt-pl-v.kdt-por{font-size:26px}
.kdt-pl-sep{color:#A1A1AA}
.kdt-pl-c{display:inline-flex;align-items:center;color:#71717A}
.kdt-pl-c svg{width:20px;height:20px;margin-inline-end:4px;color:var(--gr)}

/* ── Verkaeuferzeile ────────────────────────────────────────────────────── */
/* Sehr hell abgesetzt (Inhaber): sie soll als Zusammenhang lesbar sein, ohne
   dass daraus wieder eine Karte wird. */
/* bg-zinc-50 rounded-xl p-6 mb-8 · innen gap-6 · links gap-4
 *
 * ABWEICHUNG VOM VORBILD, und zwar mit Absicht (Inhaber, 14.10.2026):
 * dort endet der Call-Knopf 24 px vor den Kacheln darueber -- am Bild
 * nachgemessen, 35 Bildpunkte bei Massstab 1,466. Die Kante laeuft also nicht
 * durch. Hier soll sie das.
 *
 * Deshalb traegt die Box ihr seitliches Polster NICHT selbst, sondern gibt es
 * an die linke Haelfte weiter. Die Knopfgruppe rechts sitzt damit buendig an
 * der Kante der Box -- und die Kante der Box ist die Kante der Spalte, also
 * dieselbe Linie wie die vier Kacheln. Oben und unten bleiben die 24 px.
 */
.kdt-sb{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin:0 0 16px;padding:24px 0;background:#FAFAFA;border:0;border-radius:12px}
.kdt-sb-who{display:flex;align-items:center;gap:16px;min-width:0;flex:1 1 320px;padding-inline-start:24px}
.kdt-sb-txt{min-width:0}
.kdt-sb-txt b{display:block;margin-bottom:4px;font-size:20px;font-weight:700;line-height:1.3}
.kdt-sb-txt small{display:block;margin-bottom:4px;font-size:14px;color:#71717A}
.kdt-sb-all{display:inline-block;font-size:14px;font-weight:500;color:var(--gr);text-decoration:none}
.kdt-sb-all:hover{text-decoration:underline}
/* Dieselbe Breite UND derselbe Innenabstand wie der Kachelblock darueber
   (368 = 2 x 178 + 12). Das Vorbild nimmt hier gap-2 statt gap-3 -- damit lag
   die Fuge zwischen den beiden Knoepfen 2 px neben der Fuge zwischen den
   Kacheln. Mit 12 liegen alle vier Spalten auf einer Linie. */
.kdt-sb-act{display:flex;gap:12px;flex:0 0 auto;width:368px}
/* 42 statt der 40 des Vorbilds: dieselbe Hoehe wie die Kacheln darueber, sonst
   sind es zwei fast gleiche Knopfgroessen auf einer Flaeche. */
.kdt-sb-act .kdt-btn{flex:1 1 0;min-width:0;height:42px;padding:8px 16px;font-size:14px;
  line-height:24px;font-weight:600;border-radius:8px;gap:8px}
.kdt-sb-act .kdt-btn svg{width:16px;height:16px}

/*
 * Der Kasten um das Schild ist wieder da (Inhaber, 14.10.2026: "Baue diese
 * Hero Section pixelgenau nach"). Jede Zahl hier ist aus dem Vorbild
 * ausgelesen, nicht geschaetzt -- dessen Hero ist Tailwind, die Klassen stehen
 * im Quelltext:
 *
 *   bg-zinc-50 rounded-xl p-8 lg:p-12 mb-8 text-center
 *   -> #FAFAFA, Radius 12, Polster 48 (am Telefon 32), Abstand unten 32
 *
 *   mx-auto w-full lg:w-2/3 xl:w-1/2 h-48 object-contain
 *   -> das Schild nimmt die HALBE Innenbreite des Kastens und ist nie hoeher
 *      als 192 px. Bei 1.248 px Spalte sind das 576 px -- deutlich weniger als
 *      die 780, die vorher dastanden. Genau das war gemeint mit "Groesse von
 *      Kennzeichen".
 */
.kdt-stage{background:#FAFAFA;border-radius:12px;padding:48px;margin:0 0 32px;
  display:flex;justify-content:center;align-items:center}
/* h-48 object-contain: der Platz ist IMMER 192 px hoch, auch wenn das Schild
   flacher ist -- deshalb ist der Kasten des Vorbilds hoeher als die blosse
   Schildhoehe. Ohne das waere unser Kasten 229 statt 288 px hoch. */
.kdt-plate{width:50%;max-width:50%;height:192px;display:flex;align-items:center;justify-content:center}
/* Das Bauteil deckelt sich je Groesse selbst (600 px bei "lg"). Hier bestimmt
   der Kasten die Breite, deshalb wird der Deckel aufgehoben -- mit !important,
   weil das Bauteil ihn als style-Attribut setzt. Das Bauteil selbst bleibt
   unberuehrt, andere Seiten behalten ihren Deckel. */
.kdt-plate .ksp{max-width:100%!important}
/* Das quadratische Format ist 2:1 statt 4,52:1 und waere bei gleicher Breite
   mehr als doppelt so hoch -- es bekommt denselben Hoehendeckel ueber die Breite. */
.kdt-plate:has(.ksp-sq){width:384px;max-width:100%}

/* ── Werkzeugzeile ────────────────────────────────────────────────────── */
.kdt-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:18px}
.kdt-tool{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 15px;border:1px solid var(--line2);
  border-radius:12px;background:#fff;color:var(--ink);font-size:14px;font-weight:600;cursor:pointer;text-decoration:none}
.kdt-tool:hover{border-color:var(--gr);color:var(--gr)}
.kdt-sharewrap{position:relative;display:block}
/* Im Kaufkasten liegt das Menue ueber den Nachbarknoepfen. */
.kdt-mini-acts .kdt-sharemenu{top:46px;inset-inline-start:50%;transform:translateX(-50%);min-width:170px}
.kdt-sharemenu{position:absolute;z-index:20;top:48px;inset-inline-start:0;min-width:180px;background:#fff;
  border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 34px rgba(0,0,0,.14);padding:6px;display:flex;flex-direction:column}
.kdt-sharemenu a,.kdt-sharemenu button{display:block;width:100%;text-align:start;padding:10px 12px;border:0;background:none;
  border-radius:9px;font-size:14px;color:var(--ink);text-decoration:none;cursor:pointer}
.kdt-sharemenu a:hover,.kdt-sharemenu button:hover{background:var(--bg2)}

.kdt-seller-chip{display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 14px 0 6px;
  border:1px solid var(--line2);border-radius:21px;background:#fff;text-decoration:none;color:var(--ink)}
.kdt-seller-chip:hover{border-color:var(--gr)}
.kdt-seller-chip b{display:block;font-size:13px;font-weight:700;line-height:1.2}
.kdt-seller-chip small{display:block;font-size:11px;color:var(--mut)}
.kdt-ava{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;
  background:var(--gr);color:#fff;font-size:13px;font-weight:700}
.kdt-ava-lg{width:64px;height:64px;font-size:24px;flex:0 0 auto}

/* ── Die vier Kacheln ─────────────────────────────────────────────────── */
/* Der graue Block mit Preis, Verkaeufer und Kacheln ist am 14.10.2026 ersatzlos
   entfallen (Inhaber: "diese Box geht weg, ist alles eins"). Der Preis steht
   jetzt in der Titelzeile, die Kontaktknoepfe in der Verkaeuferzeile. */
/* grid grid-cols-2 gap-3 · je Knopf px-4 py-2 border rounded-lg -> 178 x 42 */
.kdt-quad{display:grid;grid-template-columns:repeat(2,178px);gap:12px;flex:0 0 auto}
.kdt-quad .kdt-ma{display:inline-flex;align-items:center;justify-content:center;width:100%;min-width:0;
  padding:8px 16px;border:1px solid #D4D4D8;border-radius:8px;background:#fff;font-size:16px;line-height:24px;
  font-weight:500;color:#3F3F46;text-decoration:none;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.kdt-quad .kdt-ma svg{width:16px;height:16px;margin-inline-end:8px}
.kdt-quad .kdt-ma:hover{border-color:var(--gr);color:var(--gr);background:#F7FBF8}
.kdt-quad .kdt-ma:focus-visible{outline:2px solid var(--gr);outline-offset:2px}
.kdt-quad .kdt-ma svg{flex:0 0 auto}
.kdt-quad .kdt-ma>svg{margin-inline-end:8px}
.kdt-quad .kdt-ma span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kdt-quad .kdt-sharewrap{position:relative;display:block;height:100%}
.kdt-quad .kdt-sharemenu{top:46px;inset-inline-end:0;inset-inline-start:auto;min-width:180px}

/* ── Eckdaten (nicht mehr benutzt, Regel bleibt fuer die Live-Seite) ─────── */
.kdt-specs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:18px}
.kdt-specs>div{background:var(--bg);border-radius:14px;padding:12px 14px}
.kdt-specs span{display:block;font-size:11px;color:var(--mut);margin-bottom:3px}
.kdt-specs b{font-size:16px;font-weight:700}

/* ── Karten ───────────────────────────────────────────────────────────── */
.kdt-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:24px}
.kdt-h2{margin:0 0 4px;font-size:20px;font-weight:800;letter-spacing:-.01em}
.kdt-h3{margin:0 0 12px;font-size:16px;font-weight:800}
.kdt-note{margin:4px 0 0;font-size:12px;color:var(--mut)}
.kdt-link{display:inline-block;margin-top:12px;font-size:14px;font-weight:700;color:var(--gr);text-decoration:none}
.kdt-link:hover{text-decoration:underline}

/* ── Preisband ────────────────────────────────────────────────────────── */
.kdt-fair-txt{margin:10px 0 22px;font-size:15px;line-height:1.6;color:var(--ink2)}
/* Das Zeichen haengt im Fliesstext direkt an der Zahl -- im Preisblock traegt
   es seinen Abstand selbst, hier nicht. Ein Leerzeichen im Markup kaeme nicht
   in Frage: es duerfte zwischen Zahl und Waehrung umbrechen. */
.kdt-fair-txt .rs,.kdt-h2 .rs{margin-inline-start:.12em}
.kdt-band{position:relative;height:8px;border-radius:4px;margin:34px 0 10px;
  background:linear-gradient(90deg,#E8EFE9 0%,#CFE6D6 50%,#E8EFE9 100%)}
.kdt-band-med,.kdt-band-this{position:absolute;transform:translateX(-50%);white-space:nowrap;font-size:12px;font-weight:700}
.kdt-band-med{top:-26px;color:var(--mut)}
.kdt-band-med i{position:absolute;inset-inline-start:50%;top:20px;width:2px;height:14px;background:var(--mut2)}
.kdt-band-this{top:16px;background:var(--gr);color:#fff;padding:4px 9px;border-radius:9px}
.kdt-band-ends{display:flex;justify-content:space-between;font-size:12px;color:var(--mut);margin-top:34px}

/* ── Schienen mit kleinen Schildern ───────────────────────────────────── */
.kdt-rail{display:flex;gap:12px;overflow-x:auto;padding:14px 2px 6px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.kdt-mini{flex:0 0 auto;width:340px;scroll-snap-align:start;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:12px;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s}
.kdt-mini:hover{border-color:var(--gr);box-shadow:0 6px 18px rgba(0,0,0,.07)}
/* Das Schild fuellt die Karte jetzt aus (Inhaber, 14.10.2026): vorher war es
   auf 160 px gedeckelt und damit 35 px hoch -- zu klein, um die Zeichen zu
   lesen. Bei 340 px Karte sind es 316 px Schild und damit die doppelte Groesse. */
.kdt-mini-plate{display:flex;justify-content:center;background:var(--bg);border-radius:12px;padding:14px;align-items:center}
.kdt-mini-plate .ksp{max-width:100%}
.kdt-mini-price{display:block;margin-top:12px;font-size:18px;font-weight:800;color:var(--gr)}

/* ── Text des Verkaeufers ─────────────────────────────────────────────── */
/* Bild, Name und die beiden Knoepfe sind am 14.10.2026 aus diesem Abschnitt
   geflogen -- sie stehen oben in der Verkaeuferzeile. Uebrig ist der Text,
   also auch nur noch dessen Regel. */
.kdt-desc{margin:14px 0 0;padding:14px 16px;background:var(--bg);border-radius:14px;font-size:15px;
  line-height:1.6;color:var(--ink2);border:0}

/* ── Knoepfe ──────────────────────────────────────────────────────────── */
.kdt-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:46px;border-radius:13px;
  font-size:15px;font-weight:700;text-decoration:none;cursor:pointer;border:1px solid transparent}
.kdt-btn-dark{background:var(--ink);color:#fff}
.kdt-btn-dark:hover{background:#000}
.kdt-btn-green{background:var(--gr);color:#fff}
.kdt-btn-green:hover{background:var(--gr2)}
.kdt-btn-xl{width:100%;height:54px;font-size:16px;margin-top:10px}

/* ── Kaufkasten ───────────────────────────────────────────────────────── */
.kdt-buy{padding:22px}
.kdt-price-l{margin:0 0 4px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.kdt-price{font-size:38px;line-height:1.05;font-weight:800;color:var(--gr);letter-spacing:-.025em}
.kdt-price .rs{width:.66em;height:.74em;margin-inline-start:.15em;vertical-align:-.035em}
.kdt-por{font-size:22px}
.kdt-mini-acts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
/* Jeder der drei traegt dieselbe Form -- auch der, der im Anker fuer das
   Teilen-Menue steckt. Das Huellelement selbst bekommt KEINE Kastenform,
   sonst sitzt sein Knopf als zweiter Kasten darin und das Symbol rutscht
   ueber das Wort (genau so sah es aus). */
.kdt-mini-acts .kdt-ma{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  width:100%;height:42px;padding:0 6px;border:1px solid var(--line2);border-radius:12px;background:#fff;
  font-size:13px;font-weight:600;color:var(--ink);text-decoration:none;cursor:pointer;
  transition:border-color .15s,color .15s,background .15s}
.kdt-mini-acts .kdt-ma:hover{border-color:var(--gr);color:var(--gr);background:#F7FBF8}
.kdt-mini-acts .kdt-ma:focus-visible{outline:2px solid var(--gr);outline-offset:2px}
.kdt-mini-acts .kdt-ma svg{flex:0 0 auto}
.kdt-mini-acts .kdt-ma span{white-space:nowrap}
.kdt-mini-acts .kdt-sharewrap{display:block;position:relative}

.kdt-meta{margin:14px 0 0;font-size:12px;color:var(--mut)}
.kdt-report{margin-top:6px;border:0;background:none;padding:0;font-size:12px;color:var(--mut2);cursor:pointer;text-decoration:underline}

/* ── Sicherheitshinweise ──────────────────────────────────────────────── */
/* Ganz leicht grau abgesetzt, damit der Kasten nicht mit dem Kaufkasten
   darueber verschwimmt -- aber so leicht, dass er nicht wie eine Warnung wirkt. */
.kdt-safe{background:#F7F8F7;border-color:#EBEEEC}
/* #3DDC84 ist der Ton der Stadtnamen im Kopfbild (Inhaber). */
.kdt-safe-h{display:flex;align-items:center;gap:9px;color:#3DDC84;margin-bottom:14px}
.kdt-safe-h svg{flex:0 0 auto}
.kdt-safe ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.kdt-safe li{position:relative;padding-inline-start:26px;font-size:14px;line-height:1.45;color:var(--ink2)}
.kdt-safe li::before{position:absolute;inset-inline-start:0;top:1px;font-weight:800}
.kdt-safe li.ok::before{content:"✓";color:var(--gr)}
.kdt-safe li.no::before{content:"✕";color:var(--warn)}

/* ── Fragen ───────────────────────────────────────────────────────────── */
.kdt-faq{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.kdt-q{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.kdt-q>button{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;padding:15px 17px;
  border:0;background:#fff;text-align:start;font-size:15px;font-weight:600;color:var(--ink);cursor:pointer}
.kdt-q>button:hover{background:var(--bg2)}
.kdt-pm{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:50%;background:var(--bg);color:var(--mut);transition:transform .18s}
.kdt-q.open .kdt-pm{transform:rotate(45deg);background:var(--gr);color:#fff}
.kdt-a{padding:0 17px 16px;font-size:14px;line-height:1.65;color:var(--ink2)}

/* Hinweis unter dem WhatsApp-Knopf, Wischhinweis an den Baendern. */
.kdt-hint{margin:8px 0 0;font-size:12px;color:var(--mut);text-align:center}
.kdt-act .kdt-hint{margin-bottom:-18px}
.kdt-swipe{margin-inline-start:10px;font-size:12px;font-weight:600;color:var(--mut2)}
@media (min-width:768px){ .kdt-swipe{display:none} }

/* ── Feststehende Leiste am Telefon ───────────────────────────────────── */
.kdt-bar{display:none}
@media (max-width:1023px){
  .kdt-bar{position:fixed;z-index:40;inset-inline:0;bottom:0;display:grid;
    grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:center;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:#fff;
    border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(0,0,0,.08)}
  .kdt-bar-p{line-height:1.1;padding-inline-end:4px}
  .kdt-bar-p small{display:block;font-size:11px;color:var(--mut)}
  .kdt-bar-p b{font-size:17px;font-weight:800;color:var(--gr)}
  .kdt-bar-p .rs{width:.52em;height:.63em;margin-inline-start:.14em}
  .kdt-bar .kdt-btn{height:44px;font-size:14px}
  /* Platz schaffen, damit die Leiste nichts verdeckt. */
  .kdt{padding-bottom:84px}

  /*
   * Und dasselbe fuer das Gespraechssymbol unten rechts. Es klebt mit
   * `bottom:1rem` am Rand und lag damit AUF der Leiste -- auf dem Telefon
   * verdeckte der Hinweis "Need help?" den WhatsApp-Knopf.
   *
   * Die Variable wird am body gesetzt, nicht am Element: das Symbol liegt im
   * Layout hinter dem Inhalt, ist also kein Nachfahre von .kdt. Ueber den
   * body erbt es den Wert trotzdem. `:has()` haelt die Regel an die Leiste
   * gebunden -- auf Seiten ohne sie bleibt es bei 1rem.
   */
  body:has(.kdt-bar){--ksa-chat-lift:76px}
}

/* Der bestehende Fliesstext behaelt sein eigenes Aussehen (Tailwind aus dem
   eingefrorenen Bundle). Nur der Rahmen kommt von hier. */
.kdt-legacy{background:#fff;border:1px solid var(--line);border-radius:24px;padding:8px 20px 20px}

.kdt-sell-wrap{padding:8px 0 56px}

/* ── Telefon ──────────────────────────────────────────────────────────── */
/* ═══════════════════════ Endlos-Band ═══════════════════════
   Aussehen und Antrieb kommen aus ksa-rail.css / partials/rail-loop. Hier nur,
   was dieses Band von den Baendern der Startseite unterscheidet. */
.kdt-loop{position:relative}
.kdt-loop .kcr-rail{gap:16px;padding:14px 2px 6px}
.kdt-loop .kdt-mini{width:340px}
/* Der Inhaber will die Pfeile AUCH am Telefon -- ksa-rail.css blendet sie dort
   aus, weil die Startseitenbaender dort nur gewischt werden. */
@media (max-width:767px){
  .kdt-loop .kcr-nav{display:flex}
  .kdt-loop .kdt-mini{width:250px}
}

@media (max-width:1023px){
  /*
   * EINE Spalte, und die Reihenfolge bestimmt der Inhaber (14.10.2026):
   *   Schild · Preis+Kontakt · Preis fair? · Sicher kaufen · Verkaeufer ·
   *   Fliesstext mit FAQ · vier Wegweiser · Vergleichbare · Aehnliche
   *
   * Dafuer loesen sich die beiden Spaltenbehaelter mit display:contents auf --
   * ihre Kinder werden direkte Kinder von .kdt-main und lassen sich einzeln
   * sortieren. Ohne das koennte man nur die beiden Spalten als Bloecke
   * tauschen, und der Kaufkasten stuende zwangslaeufig VOR dem Schild.
   */
  /* Derselbe Takt wie im Kopf (Schild 32 unten, Titelzeile 32 unten) und wie
     das `mb-8` des Vorbilds. Mit 18 standen die Abschnitte enger zueinander
     als die Teile INNERHALB eines Abschnitts -- das las sich gedraengt. */
  .kdt-main{gap:32px}
  /* min-width:0 ist Pflicht, nicht Kosmetik: ein Flex-Kind hat von Haus aus
     min-width:auto und waechst mit seinem Inhalt ueber den Behaelter hinaus.
     Gemessen: das Endlos-Band wurde 3.268 px breit statt 390 und scrollte
     deshalb ueberhaupt nicht -- scrollWidth war gleich clientWidth. */
  /*
   * Breite ausdruecklich setzen, nicht nur min-width:0.
   * In einer Flex-Spalte bekommt ein Kind seine Breite ueber align-items;
   * ein Inhalt, der breiter ist als der Behaelter, zieht die Karte trotzdem
   * auf. Gemessen: die Karte mit dem Band wurde 3.318 px breit statt 390, das
   * Band war damit so breit wie sein Inhalt und scrollte ueberhaupt nicht
   * (scrollWidth == clientWidth). Mit width/max-width/box-sizing sind es 358
   * bzw. 308 px sichtbar bei 3.268 px Inhalt -- also scrollbar.
   */
  .kdt-main>*,.kdt-card,.kdt-head,.kdt-legacy{min-width:0;width:100%;max-width:100%;box-sizing:border-box}
  .kcr.kdt-loop{width:100%;max-width:100%;overflow:hidden}

  /* Die Sortierung von gestern hing an der Seitenspalte. Die gibt es nicht
     mehr -- die Reihenfolge steht jetzt im Markup und gilt ueberall gleich. */
}
@media (max-width:767px){
  /* Nur was UNS gehoert -- die Hero hat weiter unten ihre eigenen Haltepunkte
     nach dem Raster des Vorbilds (640 / 1024 / 1280). */
  .kdt-card{padding:18px;border-radius:20px}
  .kdt-specs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kdt-mini{width:250px}
}


/* ═══════════════════════════════════════════════════════════════════════════
   HERO — die Haltepunkte des Vorbilds, nicht unsere

   licenseplate.ae ist Tailwind; die Hero traegt genau fuenf Klassen mit
   Haltepunkt-Praefix, und die bestimmen alles. Uebersetzt:

     container mx-auto px-4 py-6 lg:py-8         -> <1024: 24 oben/unten
     mb-6 lg:mb-8                                -> <1024: 24 unter dem Pfad
     bg-zinc-50 rounded-xl p-8 lg:p-12 mb-8      -> <1024: Polster 32
     w-full lg:w-2/3 xl:w-1/2  h-48              -> 100 % / 66,67 % / 50 %,
                                                    Platz IMMER 192 hoch
     flex flex-col lg:flex-row … gap-4 mb-6      -> <1024: untereinander
     text-3xl lg:text-4xl                        -> <1024: 30/36
     flex flex-col lg:flex-row … gap-6 (Box)     -> <1024: untereinander
     w-3 h-3 lg:w-4 lg:h-4 me-1 lg:me-2          -> <1024: Symbol 12, Abstand 4
     truncate sm:hidden / hidden sm:inline       -> <640: kurze Beschriftung

   ALLES andere bleibt ueber alle Breiten gleich: die vier Kacheln (gap-3,
   px-4 py-2, text-base), die Preiszeile (gap-4, text-lg, text-2xl), das
   Polster der Verkaeuferbox (24), der Avatar (64) und der Name (20). Genau
   deshalb stehen dafuer hier KEINE Regeln -- jede waere eine Abweichung.
   ═══════════════════════════════════════════════════════════════════════════ */

/* xl: das Schild nimmt die halbe Innenbreite (Grundwert weiter oben).
   Darunter zwei Drittel. */
@media (max-width:1279px){
  .kdt-plate{width:66.6667%;max-width:66.6667%}
}

/* lg: ab hier steht alles untereinander. */
@media (max-width:1023px){
  .kdt-crumbs{padding:24px 0}
  .kdt-stage{padding:32px;margin-bottom:32px}
  .kdt-plate{width:100%;max-width:100%}
  .kdt-title{flex-direction:column;align-items:stretch;gap:16px;margin-bottom:32px}
  .kdt-h1{font-size:30px;line-height:36px}
  .kdt-quad{grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  /* Am Telefon steht alles untereinander und in voller Breite -- eine
     durchlaufende Kante gaebe es nur, wenn der Avatar die Tinte beruehrte.
     Also hier das Polster wieder an beide Seiten. */
  .kdt-sb{flex-direction:column;align-items:stretch;gap:24px;padding:24px}
  .kdt-sb-who{padding-inline-start:0}
  /* Sobald die Box eine SPALTE ist, wirkt die Grundgroesse von flex auf die
     HOEHE: aus `flex:1 1 320px` wurden 320 px Hoehe fuer einen Block mit
     100 px Inhalt, und die Box war 432 statt 212 px hoch. */
  .kdt-sb-who{flex:0 0 auto}
  /* Die Knopfgruppe zieht ueber das Polster der Box hinaus, damit ihre beiden
     Aussenkanten auf denselben Linien liegen wie die Kacheln darueber. Der
     Avatar behaelt sein Polster -- er wuerde die Tinte sonst beruehren. */
  .kdt-sb-act{width:auto;margin-inline:-24px}
  .kdt-sb-act .kdt-btn svg{width:12px;height:12px}
  .kdt-sb-act .kdt-btn{gap:4px}
}

/* sm: unter 640 px passt "Save to Wishlist" nicht mehr in den halben
   Kasten -- gemessen bei 390 px Geraetebreite: 176 px Inhalt in 170 px
   Kasten. Das Vorbild tauscht dort auf das kurze Wort, wir auch. */
.kdt-lbl-s{display:none}
@media (max-width:639px){
  .kdt-lbl-s{display:inline}
  .kdt-lbl-l{display:none}
}

/* ═══════════════════ Der zweispaltige Abschnitt unten ═══════════════════
   Aussehen und Mechanik kommen aus ksa-category.css, also steckt der Block in
   einem .kcp-Behaelter. Hier nur, was ihn von einer Katalogseite unterscheidet.
   ═══════════════════════════════════════════════════════════════════════ */

/* .kcp .wrap ist 1360/32, .kdt .wrap 1280/16 -- gleiche Spezifitaet, und
   ksa-category.css laedt spaeter, also gewann bisher 1360. Der Verkaufsblock
   unten stand dadurch 32 px schmaler als der Rest der Seite. Eine Klasse mehr
   zieht beide auf die Spalte der Seite. */
.kdt .kcp .wrap{max-width:1280px;padding:0 16px}
/* Dieser Abschnitt steckt bereits IN der Spalte der Seite (.kdt-main ist ein
   .wrap). Ein zweites Polster haette seine beiden Spalten 16 px nach innen
   geschoben -- gemessen 32…1242 statt 16…1258, also neben den Kacheln oben. */
.kdt .kdt-about .wrap{max-width:none;padding:0}

/* Die Seite ist weiss, nicht #F6F7F6 -- sonst stuende hier ein grauer Streifen
   mitten in einer weissen Seite. Der Verlauf ueber dem geklappten Text muss
   dann ebenfalls nach Weiss laufen, sonst endet er in einer grauen Kante. */
.kdt .kdt-about{background:none}
.kdt .kdt-about .blk{padding:8px 0 0;border-top:0}
.kdt .kdt-about .prose .more:not(.open):after{background:linear-gradient(rgba(255,255,255,0),#fff)}
.kdt .kdt-about .prose{margin-top:20px}
.kdt .kdt-about .prose .btn{margin-top:4px}
/* Die Merkmalsliste kommt woertlich aus dem alten Kasten und traegt dessen
   Tailwind-Klassen. Im Flusstext braucht sie nur etwas Luft. */
.kdt .kdt-about .prose ul{margin:0}

/* Eine Katalogseite hat 22 Fragen, ein Inserat acht. 640 px waeren hier ein
   halb leerer Kasten -- 460 reichen, und es bleibt scrollbar, damit die
   Reiter etwas zu tun haben. */
.kdt .kcp .faqp{height:460px}
@media (max-width:1023px){
  .kdt .kdt-about .blk{padding:0}
}
/* Unter 768 macht ksa-category.css den Kasten hoch (`height:auto`) und deckelt
   stattdessen die Fragenliste (`.faqs{max-height:440px}`). Der Deckel gehoert
   an die Liste, nicht an den Kasten: sonst klemmt der Kasten und die Liste
   darin wird gar nicht erst zum Rollbereich. Mein 460er Deckel ist
   spezifischer und haette das ausgehebelt -- hier gebe ich ihn zurueck. */
@media (max-width:767px){
  .kdt .kcp .faqp{height:auto}
}

/* Das Band der Vergleichsinserate steht seit 14.10.2026 ohne Kasten auf der
   Seite (Inhaber). Die Ueberschriften brauchen dann kein Innenpolster mehr,
   aber die Karten etwas Luft nach oben, damit ihr Schatten nicht an der
   Unterzeile klebt. */
.kdt-sec-comp .kdt-h2{margin-bottom:2px}
.kdt-sec-comp .kdt-note:last-child{margin-top:10px}

/* ═══════════════════════ Verkaufte Inserate ═══════════════════════
   345 der 12.710 Inserate sind verkauft. Sie bleiben erreichbar -- ein
   erzielter Preis ist Marktinformation -- aber sie sind kein Angebot mehr.
   Deshalb: Hinweis statt Kontaktknoepfen, kein Preisband, keine feste Leiste,
   und Teilen/Herunterladen fallen weg.
   ═══════════════════════════════════════════════════════════════════ */

/* Das Wort steht IN der Ueberschrift, nicht als Pille daneben -- es ist Teil
   der Aussage, nicht ein Etikett dazu. */
.kdt-sold-tag{display:inline-block;margin-inline-start:12px;padding:4px 10px;border-radius:8px;
  background:#FDECEC;color:#B42318;font-size:14px;font-weight:800;letter-spacing:.04em;
  vertical-align:middle;line-height:1.2}

.kdt-sb-sold{flex-direction:column;align-items:flex-start;gap:10px;width:auto}
.kdt-sold-note{font-size:15px;font-weight:600;color:#B42318}
.kdt-sb-sold .kdt-btn{width:100%;min-width:220px}

/* Zwei Kacheln statt vier: sie teilen sich dieselbe Spaltenbreite wie vorher,
   damit die Kante zur Verkaeuferzeile darunter stehen bleibt. */
.kdt-quad-2{grid-template-rows:auto}

/* Der vorlesbare Satz. Schlicht gehalten -- er ist eine Antwort, kein Kasten,
   der um Aufmerksamkeit wirbt. */
.kdt-tldr{padding:20px 24px}
.kdt-tldr p{margin:0}

@media (max-width:1023px){
  .kdt-sb-sold{width:100%}
  .kdt-sb-sold .kdt-btn{min-width:0}
}