Quelltext der Seite 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;
}