/* ============================================================
   erstgespraech-kacheln.css — zwei Kacheln für Wegweiser („/“) und /erstgespraech/
   Wird NACH style.css und anfrage.css eingebunden. Aufbau angelehnt an eine Preis-Gegenüberstellung
   (zwei große Kacheln nebeneinander, Kopf, große Kernzeile, kurze Liste, ein Knopf je Kachel, rechte Kachel
   hervorgehoben), in unserem Stil: Palette v5.0, Greycliff, 0 px Radius, 1-px-Kontur Blass, keine Schatten.
   Genau ein gefüllter Button auf der Seite: „Vertrag anfordern“ in der linken Kachel.
   ============================================================ */
.kacheln {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: stretch; width: 100%;
}
.kachel {
  position: relative; display: flex; flex-direction: column; gap: 24px; box-sizing: border-box;
  padding: 48px; border: 1px solid var(--blass); border-radius: 0; background: var(--weiss); color: var(--tinte);
}
/* Hervorhebung rechts: Sand-Fläche, Kontur in Blau dunkel (kein Schatten, kein Verlauf). */
.kachel--rechts { background: var(--sand); border-color: var(--tinte); }

/* Kopfzeile der Kachel: kleine Marke (Chip) mit 1-px-Kontur, flach. */
.kachel-chip {
  align-self: flex-start; font-size: 16px; font-weight: 300; line-height: 1.4; padding: 4px 14px;
  border: 1px solid var(--blass); color: var(--akzent);
}
.kachel--rechts .kachel-chip { border-color: var(--tinte); color: var(--tinte); }
.kachel-titel { margin: 0; }

/* Kernzeile: Preis brutto groß (Privatperson), darunter klein. Bei der rechten Kachel steht dort der Satz. */
.kachel-kern { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.kachel-kern-gross { font-size: 56px; font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; }
.kachel-kern-einheit { font-size: 20px; font-weight: 300; line-height: 1.4; }
.kachel-kern-satz { font-size: 28px; font-weight: 900; line-height: 1.2; }
.kachel-klein { margin: 0; font-size: 16px; line-height: 1.45; color: var(--akzent); }
.kachel--rechts .kachel-klein { color: var(--tinte); }

/* Liste mit Haken (Inline-SVG), Trennlinien in Blass. */
.kachel-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.kachel-liste li {
  display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 300; line-height: 1.4;
  padding: 14px 0; border-top: 1px solid var(--blass);
}
.kachel-liste li:first-child { border-top: 0; padding-top: 0; }
.kachel-haken { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--tinte); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Knopf unten, immer auf einer Linie. */
.kachel-knopf-zeile { margin-top: auto; padding-top: 8px; }
.kachel-knopf {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 48px; padding: 0 28px;
  border: 1px solid var(--tinte); border-radius: 0; font-size: 18px; font-weight: 300; line-height: 1.4; text-decoration: none;
  color: var(--tinte); background: transparent; transition: background-color 150ms ease, color 150ms ease;
}
.kachel-knopf:hover, .kachel-knopf:focus-visible { background: var(--tinte); color: var(--weiss); }
.kachel-knopf--gefuellt { background: var(--tinte); color: var(--weiss); }
.kachel-knopf--gefuellt:hover, .kachel-knopf--gefuellt:focus-visible { background: var(--akzent); border-color: var(--akzent); color: var(--weiss); }
.kachel--rechts .kachel-knopf:hover { background: var(--tinte); }

@media (max-width: 1024px) {
  .kachel { padding: 36px; }
  .kachel-kern-gross { font-size: 48px; }
}
/* Mobil untereinander */
@media (max-width: 767px) {
  .kacheln { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .kachel { padding: 28px 24px; gap: 20px; }
  .kachel-kern-gross { font-size: 44px; }
  .kachel-kern-satz { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { .kachel-knopf { transition: none; } }

/* Drei Kacheln: bis 767 px
   untereinander, ab 768 px „bis fünf“ und „ab sechs“ nebeneinander und der Immobilienplan darunter über die ganze
   Breite, seine Leistungsgruppen in zwei Spalten, ab 1100 px in vier. */
.kachel-unterzeile { margin: 0; font-size: 18px; font-weight: 300; line-height: 1.5; color: var(--tinte); }
.plan-gruppen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 40px; }
@media (min-width: 768px) { .plan-gruppen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .plan-gruppen { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.plan-gruppe-titel { margin: 0 0 6px; font-size: 14px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinte); }
.plan-liste { list-style: none; margin: 0; padding: 0; }
.plan-liste li { font-size: 16px; font-weight: 300; line-height: 1.4; padding: 7px 0; border-top: 1px solid var(--blass); overflow-wrap: anywhere; }
.plan-liste li:first-child { border-top: 0; }

/* „Alle Leistungen“ ohne Skript: details/summary. Schmal und zu: je Gruppe nur die Punkte ohne Klasse plan-mehr.
   Ab 768 px steht der Plan über die ganze Breite, alle Punkte sichtbar, kein Aufklapper. Kennt ein Browser
   :has nicht, bleiben alle Punkte sichtbar und der Aufklapper fällt weg. */
@media (max-width: 767px) { .kachel--plan:has(.plan-aufklapper:not([open])) .plan-mehr { display: none; } }
@media (min-width: 768px) { .kachel--plan { grid-column: 1 / -1; } .plan-aufklapper { display: none; } }
.plan-aufklapper[open] .plan-auf-zu, .plan-aufklapper:not([open]) .plan-auf-offen { display: none; }
@supports not selector(:has(a)) { .plan-aufklapper { display: none; } }
.plan-aufklapper { align-self: flex-start; }
.plan-aufklapper summary {
  display: inline-flex; align-items: flex-end; min-height: 44px; list-style: none; cursor: pointer; touch-action: manipulation;
  font-size: 16px; font-weight: 300; line-height: 1.4; color: var(--tinte); border-bottom: 1px solid var(--tinte);
}
.plan-aufklapper summary::-webkit-details-marker { display: none; }
.plan-aufklapper summary:focus-visible { outline: 2px solid var(--tinte); outline-offset: 2px; }
@media (max-width: 767px) {
  .kachel-unterzeile { font-size: 17px; }
  .kachel-knopf { padding: 0 16px; font-size: 17px; max-width: 100%; }
}
@media (min-width: 1100px) {
  .kachel { padding: 40px; }
  .plan-gruppen { gap: 20px 32px; }
}

/* Lebendige Knöpfe: Pill-Form, Pfeil dreht beim
   Überfahren in 350 ms, Druck 0,97. Den Pfeil selbst (Maske) zeichnet anfrage.css, diese Datei lädt selbst keine Bilder.
   Kein Licht, kein Magnet (kein eigenes Skript); bei „Bewegung reduzieren“ still. */
.kachel-knopf { gap: 12px; border-radius: 9999px; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background-color 150ms ease, color 150ms ease, scale 120ms ease; }
.kachel-knopf:hover::after, .kachel-knopf:focus-visible::after { transform: rotate(-45deg); }
.kachel-knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
.kachel-knopf:active { scale: 0.97; }
@media (prefers-reduced-motion: reduce) {
  .kachel-knopf::after { transition: none; }
  .kachel-knopf:active { scale: none; }
  .kachel-knopf:hover::after, .kachel-knopf:focus-visible::after { transform: none; }
}
/* Knopf der Plan-Kachel: ein Text, die beiden Zusätze entfallen unter 768 px (mobil-fixes.css).
   Bricht ein Knopftext um, steht er mittig. */
.kachel-knopf { text-align: center; }