/* ===== ÄNDERUNG 60.451 (22.09.2026): Verkaufen – die sieben Vorteils-Karten als Klappkarten =====
   Auftrag von Tobias: Alle sieben Vorteile sollen nach einmal Scrollen gemeinsam im Blick sein (Vorbild
   Boll Immobilien). Dafür zeigt jede Karte geschlossen nur noch Nummer, Icon, Titel und den Schalter
   „Mehr erfahren“; Beschreibungstext und Hakenliste klappen bei Bedarf darunter auf.
   Umsetzung mit dem HTML-Element <details>/<summary> wie bei den FAQ der Seite: kein zusätzliches Skript,
   Bedienung per Maus, Finger und Tastatur, und die Texte bleiben im Quelltext (für Suchmaschinen sichtbar).
   Das Subgrid der Ursprungsfassung (60.430) entfällt für diese Karten – die geschlossene Karte besteht nur
   noch aus Icon, Titel und Schalter, der Schalter sitzt per margin-top:auto immer auf gleicher Höhe.
   Nur #pg-verkaufen: Die Vermietungsseite behält die ausführlichen Karten unverändert.
   Aufgeklappte Karte: Rahmen in Blau, „+“ dreht sich zum „ד wie bei den FAQ. */

/* --- Raster etwas enger, damit die drei Reihen zusammen in einen Bildschirm passen --- */
#pg-verkaufen .vorteile{ gap: 18px; }

/* --- Karte: Flex-Spalte statt Subgrid --- */
#pg-verkaufen .vorteil--klapp{
  display: flex;
  flex-direction: column;
  grid-row: auto;                       /* hebt „grid-row: span 4“ aus 60.430 auf */
  grid-template-rows: none;
  min-width: 0;
  padding: 30px clamp(24px, 2.3vw, 36px) 26px;
  interpolate-size: allow-keywords;     /* erlaubt das weiche Aufklappen weiter unten */
}
#pg-verkaufen .vorteil--klapp[open]{ border-color: var(--color-blue); }

/* --- Kopf der Karte (anklickbar) --- */
#pg-verkaufen .vorteil__head{
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 auto;
  cursor: pointer;
  list-style: none;
  padding-top: 4px;
  -webkit-tap-highlight-color: transparent;
}
#pg-verkaufen .vorteil__head::-webkit-details-marker{ display: none; }
#pg-verkaufen .vorteil__head::marker{ content: ""; }
#pg-verkaufen .vorteil__head:focus-visible{
  outline: 2px solid var(--color-blue-bright);
  outline-offset: 6px;
  border-radius: 10px;
}

/* Icon-Kreis (84 px, SVG 40 px) und Titelgröße bleiben wie in 60.430 – also gleich wie die
   Karten der Sektion „Was TOJA auszeichnet.“ darunter. Nur der Titelabstand entfällt. */
#pg-verkaufen .vorteil--klapp .vorteil__title{
  margin: 0;
  min-height: 2.5em;            /* zwei Zeilen reserviert – so stehen die Schalter in einer Reihe gleich hoch */
  display: flex; flex-direction: column; justify-content: center;
}
#pg-verkaufen .vorteil--wide.vorteil--klapp .vorteil__title{ min-height: 0; display: block; }

/* --- Schalter „Mehr erfahren“ / „Weniger anzeigen“ --- */
#pg-verkaufen .vorteil__more{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-top: 18px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-blue-deep);
}
/* Unterlinie in der Akzentfarbe (als Rahmen, damit sie bei „Weniger anzeigen“ nicht an den Unterlängen reißt) */
#pg-verkaufen .vorteil__more-label{
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 3px;
}
#pg-verkaufen .vorteil--klapp:not([open]) .vorteil__more-label--auf{ display: none; }
#pg-verkaufen .vorteil--klapp[open] .vorteil__more-label--zu{ display: none; }
#pg-verkaufen .vorteil__more-icon{
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--color-blue-mist);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; line-height: 1;
  color: var(--color-blue-deep);
  transition: transform 300ms var(--ease), background 300ms var(--ease), color 300ms var(--ease);
}
#pg-verkaufen .vorteil--klapp[open] .vorteil__more-icon{
  transform: rotate(45deg);
  background: var(--color-blue-deep);
  color: #fff;
}
@media (hover: hover){
  #pg-verkaufen .vorteil__head:hover .vorteil__more{ color: var(--color-accent); }
  #pg-verkaufen .vorteil__head:hover .vorteil__more-icon{ background: var(--color-accent); color: #fff; }
}

/* --- Aufgeklappter Bereich --- */
#pg-verkaufen .vorteil__body{
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--color-line);
}
/* grid-area aus 60.430 zurücksetzen – im Klapp-Bereich gibt es die benannten Rasterfelder nicht mehr */
#pg-verkaufen .vorteil--klapp .vorteil__text,
#pg-verkaufen .vorteil--klapp .vorteil__list{ grid-area: auto; }
#pg-verkaufen .vorteil__body .vorteil__text{ margin: 0; }
#pg-verkaufen .vorteil__body .vorteil__list{ align-self: auto; }
@supports selector(details::details-content){
  #pg-verkaufen .vorteil--klapp::details-content{
    block-size: 0;
    overflow: hidden;
    transition: block-size 300ms var(--ease), content-visibility 300ms allow-discrete;
  }
  #pg-verkaufen .vorteil--klapp[open]::details-content{ block-size: auto; }
}

/* --- Karte 07 über die volle Breite: Nummer, Icon, Titel und Schalter in einer Zeile --- */
#pg-verkaufen .vorteil--wide.vorteil--klapp{
  grid-column: 1 / -1;
  align-items: stretch;                 /* hebt „align-items: start“ aus 60.430 auf – der Kopf geht über die volle Breite */
  padding: 22px clamp(26px, 2.8vw, 40px) 24px;
}
#pg-verkaufen .vorteil--wide .vorteil__head{
  flex-direction: row;
  align-items: center;
  gap: clamp(14px, 1.6vw, 24px);
}
#pg-verkaufen .vorteil--wide.vorteil--klapp .vorteil__num{
  position: static;
  top: auto; left: auto;
  flex-shrink: 0;
}
#pg-verkaufen .vorteil--wide.vorteil--klapp .vorteil__icon{ margin: 0; flex-shrink: 0; }
#pg-verkaufen .vorteil--wide.vorteil--klapp .vorteil__title{
  flex: 1 1 auto;
  text-align: left;
  margin: 0;
}
#pg-verkaufen .vorteil--wide .vorteil__more{ margin-top: 0; padding-top: 0; flex-shrink: 0; }
#pg-verkaufen .vorteil--wide .vorteil__body{
  display: flex;
  align-items: flex-start;
  gap: clamp(28px, 3vw, 48px);
}
#pg-verkaufen .vorteil--wide.vorteil--klapp .vorteil__text{ flex: 1 1 auto; min-width: 0; }
#pg-verkaufen .vorteil--wide.vorteil--klapp .vorteil__list{
  flex: 0 1 auto;
  margin: 0;
  padding: 0 0 0 clamp(28px, 3vw, 48px);
  border-top: 0;
  border-left: 1px solid var(--color-line);
  gap: 12px;
}

/* --- Bis 1200 px: zwei Spalten (aus 60.430); die breite Karte bleibt einzeilig --- */
@media (max-width: 1200px){
  #pg-verkaufen .vorteil--wide.vorteil--klapp{ grid-template-columns: none; grid-template-areas: none; }
}

/* --- Schmale Tablets: in Karte 07 stehen Text und Haken untereinander --- */
@media (max-width: 760px){
  #pg-verkaufen .vorteil--wide .vorteil__body{ flex-direction: column; gap: 0; }
  #pg-verkaufen .vorteil--wide.vorteil--klapp .vorteil__list{
    margin: 20px 0 0;
    padding: 18px 0 0;
    border-left: 0;
    border-top: 1px solid var(--color-line);
    gap: 10px;
  }
}

/* --- Handy: Icon links, Nummer und Titel daneben, rechts das „+“ (Beschriftung entfällt) --- */
@media (max-width: 640px){
  #pg-verkaufen .vorteile{ gap: 10px !important; }
  #pg-verkaufen .vorteil--klapp, #pg-verkaufen .vorteil--wide.vorteil--klapp{
    display: flex;
    grid-template-columns: none;
    grid-template-areas: none;
    padding: 14px 16px 15px;
  }
  #pg-verkaufen .vorteil__head{
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    grid-template-areas: "icon num more" "icon title more";
    column-gap: 13px;
    align-items: center;
    padding-top: 0;
  }
  #pg-verkaufen .vorteil--wide.vorteil--klapp .vorteil__num{
    position: static; grid-area: num; align-self: end;
    margin: 0 0 3px; font-size: 15px; font-weight: 500; letter-spacing: 0.06em;
  }
  #pg-verkaufen .vorteil--klapp .vorteil__title{ min-height: 0; display: block; }
  #pg-verkaufen .vorteil--wide.vorteil--klapp .vorteil__title{ grid-area: title; }
  #pg-verkaufen .vorteil__more{
    grid-area: more;
    margin: 0; padding: 0;
    align-self: center;
  }
  #pg-verkaufen .vorteil__more-label{ display: none !important; }
  #pg-verkaufen .vorteil__body{ margin-top: 14px; padding-top: 14px; }
}

/* ===== Ergänzung für die Live-Website (nicht Teil des Prototyp-Blocks) =====
   Die Handy-Überarbeitung klappt lange Kartenlisten ein und blendet alles
   ab der vierten Karte aus (Klasse m-collapsed am Raster, m-extra an den
   Karten, dazu der Schalter „Alle 9 Leistungen anzeigen“). Für die
   Klappkarten ist das doppelt gemoppelt und war genau der Zustand, den
   Tobias weghaben wollte: Alle sieben Vorteile sollen nach einmal
   Scrollen gemeinsam im Blick sein.

   Die Liste, aus der das Einklappen kommt, wird beim Ausliefern um diesen
   einen Eintrag gekürzt (siehe toja-korrekturen.php). Diese Regeln sind
   das Sicherheitsnetz, falls die Liste einmal anders geschrieben ist. */
#pg-verkaufen .seller-benefits__grid.m-collapsed > .vorteil.m-extra,
#pg-verkaufen .seller-benefits__grid > .vorteil.m-extra {
	display: block !important;
}

/* Nur der erzeugte Schalter - und zwar genau button.m-more.
   Achtung: Das Attribut data-m-more traegt das Raster selbst, nicht der
   Schalter. Ein Selektor [data-m-more] blendet deshalb den ganzen
   Kachelblock aus; beim Test war er dadurch spurlos verschwunden. */
#pg-verkaufen .seller-benefits button.m-more {
	display: none !important;
}

/* Zur Ausrichtung steht hier bewusst nichts: Die Klappkarte bringt ihre
   eigene mit (Kopfzeile mittig, breite Kachel 07 als Zeile). Die
   Zentrierungsregeln aus Punkt 18 und 24 in css/korrekturen.css sind
   auf .vorteil--kurz eingegrenzt und fassen diese Karten nicht an. */