Vorlage:Stylish-Box/Details

/* Grundkarte */ .sbox {

 --accent: #0b76da;
 --bg0: #ffffff;
 --bg1: #f7fbff;
 background: linear-gradient(180deg,var(--bg0),var(--bg1));
 border: 1px solid var(--accent);
 border-radius: 14px;
 padding: 1.1em 1.3em;
 margin: 1.2em 0;
 box-shadow: 0 8px 22px rgba(0,0,0,.10);
 font-family: Inter, Segoe UI, Arial, sans-serif;
 line-height: 1.55;
 color: #222;
 transition: transform .15s ease, box-shadow .15s ease;

} .sbox:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.12); }

/* Header-Zeile */ .sbox__head { display:flex; align-items:center; gap:.6rem; margin:-.2rem 0 .6rem; } .sbox__bar { width:.6rem; height:1.2rem; border-radius:.3rem;

 background: linear-gradient(180deg, var(--accent), #034a96); }

.sbox__title { font-weight:600; letter-spacing:.2px; }

/* Themes */ .sbox[data-theme="ocean"] { --accent:#0b76da; } .sbox[data-theme="lime"] { --accent:#22a745; } .sbox[data-theme="rose"] { --accent:#d60b6a; } .sbox[data-theme="amber"] { --accent:#d68c0b; }

/* Collapsible mit native <details> */ .sbox--details { padding:0; } .sbox--details > summary {

 list-style:none; cursor:pointer; user-select:none; 
 padding:1em 1.2em; border-radius:14px 14px 0 0; font-weight:600; color:var(--accent);
 border-bottom:1px solid color-mix(in srgb, var(--accent) 20%, transparent);

} .sbox--details > div { padding:1.1em 1.3em; }

/* Tooltip ("Overfly") */ .sbox .tip { position:relative; border-bottom:1px dashed currentColor; cursor:help; } .sbox .tip[data-tip]:hover::after {

 content: attr(data-tip);
 position:absolute; left:0; top:120%;
 background:#111; color:#fff; padding:.35em .55em; border-radius:.4em; white-space:nowrap;
 box-shadow:0 6px 18px rgba(0,0,0,.2); font-size:.92em; z-index:2;

}