/* ==============================================================
   kauf.css  ·  PC & Co. kaufen + „Der Unterschied zum Onlinekauf“
   (12.10.2026, Peters Mail „PC etc. Verkauf“). Markup: includes/kauf-vergleich.php.
   Nur Tokens. 12.10. abends („besser hervorheben“): Vergleich als Paare,
   die KNOW-HOW-Spalte ist EINE durchgehende Lichtkasten-Karte mit
   Passer-Schatten (wie die empfohlene Spalte einer Preistabelle), Haken
   auf Plaketten in Knopffarbe. Dazu der Hinweis im Kopf von /zuhause.php.
   ============================================================== */

/* ---- Hinweis im Hero (/zuhause.php, kh_kauf_hinweis) ------------- */
.kauf-hinweis{
  display:flex;align-items:center;gap:.9rem;max-width:30rem;
  margin-top:clamp(1.25rem, 1rem + 1vw, 1.75rem);padding:.75rem 1rem .75rem .75rem;
  background-color:var(--lichtkasten);border:1px solid var(--line);border-radius:var(--r-karte);
  box-shadow:4px 4px 0 var(--platte), var(--sh-1);color:var(--text);text-decoration:none;
}
.kauf-hinweis-symbol{
  display:inline-grid;place-items:center;flex:none;width:2.75rem;height:2.75rem;
  border-radius:var(--r-chip);background-color:var(--knopf-fill);color:var(--on-knopf);
}
.kauf-hinweis-ikon{width:1.75rem;height:1.75rem}
.kauf-hinweis-text{flex:1 1 auto;min-width:0;font-size:.9375rem;line-height:1.4;color:var(--muted)}
.kauf-hinweis-text b{display:block;font-family:var(--schrift-titel);font-weight:680;font-stretch:96%;font-size:1.0625rem;color:var(--text)}
.kauf-hinweis-pfeil{flex:none;font-size:1.3rem;line-height:1;color:var(--accent-text);transition:translate var(--t-kurz) var(--ease)}
@media (hover:hover) and (pointer:fine){
  .kauf-hinweis:hover .kauf-hinweis-pfeil{translate:0 3px}
  .kauf-hinweis:hover .kauf-hinweis-text b{text-decoration:underline;text-underline-offset:.18em}
}
@media (prefers-reduced-motion:reduce){ .kauf-hinweis-pfeil{transition:none} }

/* ---- Kopf: Text + Tableau --------------------------------------- */
.kauf-kopf{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem, 1.5rem + 2vw, 3.5rem);align-items:center}
.kauf-kopf > *{min-width:0}
@media (min-width:60rem){
  .kauf-kopf{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
}
.kauf-kopf h2{margin-bottom:1rem;text-wrap:balance}
.kauf-text .fliesstext{margin:0 0 1.6rem;text-wrap:pretty}

/* ---- Vergleich ---------------------------------------------------- */
.kauf-vergleich{margin-top:clamp(3rem, 2.2rem + 3vw, 5rem)}
.kauf-vergleich--allein{margin-top:0}
.kauf-vergleich-kopf{max-width:46rem;margin-bottom:clamp(1.5rem, 1.1rem + 1.5vw, 2.4rem)}
/* h3 (Zuhause) und h2 (PC-Technik) gleich gross: Rolle einer Abschnittsueberschrift */
.kauf-vergleich-h{
  font-family:var(--schrift-titel);font-weight:720;font-stretch:92%;
  font-size:clamp(1.6rem, 1.2rem + 1.3vw, 2.2rem);line-height:1.1;letter-spacing:-.008em;
  margin:0 0 .6rem;text-wrap:balance;
}
.kauf-vergleich-h b{font-weight:470;font-stretch:100%;letter-spacing:0;color:var(--accent-text)}

.kauf-symbol{width:1.25rem;height:1.25rem;flex:none}
.kauf-haken{
  display:inline-grid;place-items:center;flex:none;width:1.65rem;height:1.65rem;margin-top:-.1rem;
  border-radius:50%;background-color:var(--knopf-fill);color:var(--on-knopf);
}
.kauf-haken .kauf-symbol{width:1rem;height:1rem}
.kauf-haken .kauf-symbol g{stroke-width:5}
.kauf-zelle{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.75rem;align-items:start;min-width:0}
.kauf-zelle > span:last-child{min-width:0;hyphens:manual}
.kauf-zelle--online{color:var(--muted);font-size:.9375rem;line-height:1.45}
.kauf-zelle--online .kauf-symbol{margin-top:.12rem;color:var(--muted)}
.kauf-zelle--wir{color:var(--text);font-size:clamp(.9375rem, .9rem + .2vw, 1.0625rem);line-height:1.45;font-weight:560}
.kauf-zeile--kopf .kauf-zelle{
  display:block;font-family:var(--schrift-titel);font-weight:640;font-stretch:96%;
  font-size:.875rem;line-height:1.3;letter-spacing:.09em;text-transform:uppercase;
}
.kauf-zeile--kopf .kauf-zelle--wir{color:var(--accent-text);font-weight:720}

/* Handy: jedes Paar eine kleine Karte - oben Online (ruhig, getoent), darunter
   KNOW HOW (weiss, kraeftig). Spaltenkoepfe nur fuer Vorlesehilfen (die Rollen
   bleiben erhalten, weil sie ausdruecklich gesetzt sind). */
.kauf-tabelle{display:grid;grid-template-columns:minmax(0,1fr);gap:.85rem}
.kauf-zeile{
  display:grid;grid-template-columns:minmax(0,1fr);overflow:hidden;
  background-color:var(--lichtkasten);border:1px solid var(--line);border-radius:var(--r-karte);
  box-shadow:4px 4px 0 var(--platte);
}
.kauf-zeile--kopf{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.kauf-zeile .kauf-zelle--online{padding:.7rem 1rem;background-color:color-mix(in oklch, var(--muted) 7%, var(--lichtkasten))}
.kauf-zeile .kauf-zelle--wir{padding:.85rem 1rem .95rem}

/* Ab 48rem: echte Gegenueberstellung. Spalte 1 Online liegt ruhig auf der Flaeche,
   Spalte 2 ist eine durchgehende Karte hinter allen Zeilen (::before im Raster -
   darum feste Zeilenzahl: Kopf + 6 Paare aus kh_kauf_paare()). */
@media (min-width:48rem){
  .kauf-tabelle{
    position:relative;gap:0;
    grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    grid-template-rows:repeat(7, auto);
  }
  .kauf-tabelle::before{
    content:"";grid-column:2;grid-row:1 / -1;
    background-color:var(--lichtkasten);border:1px solid var(--line);border-radius:var(--r-karte);
    box-shadow:6px 6px 0 var(--platte), -3px -3px 0 -2px var(--haar), var(--sh-2);
  }
  .kauf-zeile,.kauf-zeile--kopf{
    display:contents;position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal;
    background:none;border:0;box-shadow:none;
  }
  /* Feste Lage je Zelle: Die Karte (::before) belegt Spalte 2 ausdruecklich - automatisch
     platzierte Zellen wuerden ihr ausweichen und alle in Spalte 1 rutschen. Nur ausdruecklich
     platzierte Elemente duerfen sich ueberlagern. */
  .kauf-zelle--online{grid-column:1}
  .kauf-zelle--wir{grid-column:2}
  .kauf-zeile:nth-child(1) > .kauf-zelle{grid-row:1}
  .kauf-zeile:nth-child(2) > .kauf-zelle{grid-row:2}
  .kauf-zeile:nth-child(3) > .kauf-zelle{grid-row:3}
  .kauf-zeile:nth-child(4) > .kauf-zelle{grid-row:4}
  .kauf-zeile:nth-child(5) > .kauf-zelle{grid-row:5}
  .kauf-zeile:nth-child(6) > .kauf-zelle{grid-row:6}
  .kauf-zeile:nth-child(7) > .kauf-zelle{grid-row:7}
  .kauf-zeile .kauf-zelle{position:relative;padding:1.05rem clamp(1rem, .5rem + 1.2vw, 1.75rem);border-top:1px solid var(--line)}
  .kauf-zeile .kauf-zelle--online{background:none;padding-left:0}
  .kauf-zeile .kauf-zelle--wir{border-top-color:color-mix(in oklch, var(--accent-text) 12%, var(--lichtkasten))}
  .kauf-zeile--kopf .kauf-zelle{border-top:0;padding-top:1.5rem;padding-bottom:1rem}
  .kauf-zeile:last-child .kauf-zelle{padding-bottom:1.5rem}
}