, kein , kein Skript.
Grundzustand ohne funktionierenden Schalter: BEIDE Fassungen sichtbar,
jede mit Bezeichnung. Erst wenn ein
tatsächlich existiert und
der Browser :has() kann, wird gefiltert. Wird
beim Speichern
entfernt, steht die Seite automatisch auf der Doppelfassung — es geht
kein Text verloren. */
.msp-switch{margin:0 0 18px;}
.msp-switch details{margin:0;}
.msp-switch summary{
display:flex;flex-wrap:wrap;gap:10px;cursor:pointer;user-select:none;list-style:none;
}
.msp-switch summary::-webkit-details-marker{display:none;}
.msp-switch summary::marker{content:““;}
.msp-switch summary:focus-visible{outline:3px solid var(–msp-grad-b);outline-offset:4px;border-radius:999px;}
.msp-pille{
display:inline-block;background:var(–msp-weiss);border:1px solid var(–msp-blau-li);
border-radius:999px;padding:10px 22px;font-size:15.5px;color:var(–msp-blau-sub);
transition:background-color .15s,color .15s;
}
.msp-switch:not(:has(details[open])) .msp-pille-m,
.msp-switch:has(details[open]) .msp-pille-s{
background:var(–msp-blau-tx);border-color:var(–msp-blau-tx);color:#fff;font-weight:600;
}
.msp-switch:has(details) ~ .msp-kacheln .msp-wer,
.msp-switch:has(details) ~ .msp-herkunft .msp-wer{display:none;}
.msp-switch:has(details) ~ .msp-kacheln .msp-s,
.msp-switch:has(details) ~ .msp-herkunft .msp-s{display:none;}
.msp-switch:has(details[open]) ~ .msp-kacheln .msp-m,
.msp-switch:has(details[open]) ~ .msp-herkunft .msp-m{display:none;}
.msp-switch:has(details[open]) ~ .msp-kacheln .msp-s,
.msp-switch:has(details[open]) ~ .msp-herkunft .msp-s{display:block;}
/* Fünf Kacheln */
.msp-kacheln{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-bottom:28px;}
.msp-kachel{
flex:1 1 300px;max-width:352px;
background:var(–msp-pink-bg);border:1px solid var(–msp-pink-li);border-radius:20px;
padding:26px 24px;display:flex;flex-direction:column;
box-shadow:0 14px 30px -22px rgba(168,32,96,.5);
}
.msp-kachel h3{font-size:13.5px;color:var(–msp-pink-sub);font-weight:600;letter-spacing:.02em;margin:0 0 6px;}
.msp-was{font-size:19.5px;color:var(–msp-pink-tx);font-weight:700;letter-spacing:-0.015em;margin:0 0 14px;}
.msp-teaser{font-size:15.5px;color:#5A2340;margin:0 0 14px;}
.msp-wer{display:block;font-size:12.5px;font-weight:700;color:var(–msp-pink-sub);letter-spacing:.03em;}
.msp-link{
margin-top:auto;align-self:flex-start;display:inline-block;
font-size:14.5px;font-weight:600;color:#fff;
background:var(–msp-pink-tx);text-decoration:none;
padding:10px 20px;border-radius:999px;transition:background-color .15s;
}
.msp-link:hover{background-color:#7A1748;}
/* Woher das kommt */
.msp-herkunft{
background:var(–msp-blau-bg);border:1px solid var(–msp-blau-li);border-radius:var(–msp-r);
padding:38px 32px;text-align:center;
}
.msp-herkunft h2{font-size:clamp(20px,2.6vw,26px);color:var(–msp-blau-tx);}
.msp-herkunft .msp-teaser{color:var(–msp-blau-sub);font-size:17px;max-width:66ch;margin:0 auto 12px;}
.msp-herkunft .msp-wer{color:var(–msp-blau-tx);}
/* Fußzeile */
.msp-fuss{
background:var(–msp-blau-bg);border:1px solid var(–msp-blau-li);border-radius:var(–msp-r);
padding:24px;text-align:center;font-size:15px;color:var(–msp-blau-sub);
}
.msp-fuss a{text-decoration:none;}
.msp-fuss a:hover{text-decoration:underline;}
.msp-traeger{font-size:13.5px;line-height:1.6;margin:14px 0 0;color:#5C7B8F;}
/* Schmale Bildschirme */
@media (max-width:640px){
.msp-head{position:static;}
.msp-saeulen{grid-template-columns:1fr;}
.msp-kachel{max-width:none;}
.msp-hero{padding:36px 22px;}
.msp-saeule,.msp-studie,.msp-herkunft{padding:30px 20px;}
.msp-switch summary{flex-direction:column;}
.msp-pille{text-align:center;}
}