/* Die 3 Säulen deiner Online-Dominanz: drei klickbare Karten, die sich aufklappen */
.interactive-pillars-container{min-width:0;max-width:100%}
.section-header{margin:0 0 18px}
.section-header h2{margin:0 0 6px}
.section-intro-text{margin:0;color:var(--gray);max-width:62ch}

/* Raster: drei Säulen nebeneinander, auf schmalen Breiten untereinander */
.pillars-interactive-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;counter-reset:pillar}

/* Karte */
.pillar-interactive-card{position:relative;min-width:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;cursor:pointer;counter-increment:pillar;transition:border-color .15s;-webkit-tap-highlight-color:transparent}
.pillar-interactive-card.active{border-color:var(--ink)}

/* Nummer statt Emoji; aufgeklappt in Tinte */
.pillar-icon{display:flex;font-size:0;line-height:0;margin:0 0 14px}
.pillar-icon::before{content:counter(pillar,decimal-leading-zero);font:500 12px/1 var(--mono);color:var(--gray);background:var(--muted);border-radius:5px;padding:4px 7px;transition:background .15s,color .15s}
.pillar-interactive-card.active .pillar-icon::before{background:var(--ink);color:#fff}

/* Plus oben rechts, aufgeklappt ein Minus */
.pillar-interactive-card::before,.pillar-interactive-card::after{content:"";position:absolute;top:29px;right:20px;width:12px;height:1.5px;background:var(--gray-soft);transition:transform .2s,background .15s}
.pillar-interactive-card::after{transform:rotate(90deg)}
.pillar-interactive-card.active::before,.pillar-interactive-card.active::after{background:var(--ink)}
.pillar-interactive-card.active::after{transform:rotate(0)}

@media (hover:hover){
  .pillar-interactive-card:hover{border-color:var(--ink)}
  .pillar-interactive-card:hover::before,.pillar-interactive-card:hover::after{background:var(--ink)}
}

.pillar-title{font-size:16.5px;margin:0 0 6px}
.pillar-summary{margin:0;font-size:14px;line-height:1.55;color:var(--gray)}

/* Aufgeklappt: Kurztext weg, Details sichtbar (wie im Original) */
.pillar-details{display:none}
.pillar-interactive-card.active .pillar-summary{display:none}
.pillar-interactive-card.active .pillar-details{display:block;animation:pillar-in .22s ease both}
@keyframes pillar-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.pillar-details p{margin:0 0 12px;font-size:14.5px}
.pillar-details p:first-child{color:var(--gray)}
.pillar-details ul{margin:0 0 14px;padding-left:18px;font-size:14px;line-height:1.55}
.pillar-details li{margin-bottom:7px}
.pillar-details li::marker{color:var(--gray-soft)}
.pillar-details p:last-child{margin:0;padding-top:12px;border-top:1px solid var(--line)}
.pillar-details code{white-space:nowrap}
.pillar-details a{text-decoration-color:var(--line-strong)}
.pillar-details a:hover{text-decoration-color:var(--ink)}

/* Breit: die offene Säule rückt über die volle Breite nach oben, die beiden anderen stehen darunter */
@media (min-width:600px){
  .pillars-interactive-grid.someone-active{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pillars-interactive-grid.someone-active .pillar-interactive-card.active{grid-column:1/-1;order:-1}
}
/* Schmal: untereinander, Karte klappt an Ort und Stelle auf */
@media (max-width:599px){
  .pillars-interactive-grid{grid-template-columns:minmax(0,1fr);gap:10px}
  .pillar-details ul{padding-left:16px}
}

/* Titel als Button für Tastatur und Screenreader */
.pillar-toggle{all:unset;cursor:pointer;display:inline}
.pillar-toggle:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}