/* WHOLE STACK Lasche (Variante 06) — nur unter 1180 px (Tablet & Smartphone) */
.ws-tab{
  --ws-accent: var(--accent, #1f3a68);
  --ws-ink: var(--ink, #15161a);
  --ws-paper: #fffdf6;
  --ws-edge: #ece4d2;
  --ws-tab-w: 38px;
  position: fixed; right: 0; top: 52%; z-index: 45;
  display: flex; align-items: stretch;
  transform: translateY(-50%) translateX(calc(100% - var(--ws-tab-w)));
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
  filter: drop-shadow(-3px 3px 3px rgba(20,20,30,.12));
}
.ws-tab.open{ transform: translateY(-50%) translateX(0); }
.ws-tab-btn{
  position: relative;
  width: var(--ws-tab-w); min-height: 150px; padding: 0;
  background: var(--ws-paper); border: 1px solid var(--ws-edge); border-right: 0;
  border-radius: 8px 0 0 8px; cursor: pointer;
}
/* Waagerechter Text, als Ganzes gedreht: so dreht das ® mit und sitzt direkt am „k“.
   (writing-mode: vertical-rl stellt ® aufrecht und mit Abstand dar — nicht verwenden.)
   +2px schiebt den Text minimal nach unten für optisch gleiche Abstände. */
.ws-tab-btn span{
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, calc(-50% + 2px)) rotate(-90deg);
  font-family: "Caveat", cursive; font-weight: 700; font-size: 22px; line-height: 1;
  color: var(--ws-accent); white-space: nowrap;
}
.ws-tab-panel{
  width: min(240px, calc(100vw - 80px));
  background: var(--ws-paper); border: 1px solid var(--ws-edge); border-left: 0;
  padding: 18px;
}
/* Geschlossen: Panel nicht fokussierbar */
.ws-tab:not(.open) .ws-tab-panel{ visibility: hidden; transition: visibility 0s .45s; }
.ws-tab-link{ display: block; color: var(--ws-accent); text-decoration: none; }
.ws-tab-link .note{
  display: block; font-family: "Caveat", cursive; font-weight: 500;
  font-size: 21px; line-height: 1.05; text-wrap: balance;
}
/* Link mittig unter der Notiz */
.ws-tab-link .link{
  position: relative; display: table; margin: 10px auto 0;
  font-family: "Caveat", cursive; font-weight: 700; font-size: 25px; color: var(--ws-ink);
}
.ws-tab-link .link svg{
  position: absolute; left: -16px; top: -9px;
  width: calc(100% + 28px); height: calc(100% + 18px); overflow: visible;
}
.ws-tab-link .link ellipse{
  fill: none; stroke: var(--ws-accent); stroke-width: 2.2; stroke-linecap: round;
  stroke-dasharray: 420; stroke-dashoffset: 420;
  transition: stroke-dashoffset .9s cubic-bezier(.6,.1,.2,1) .2s;
}
.ws-tab.drawn .link ellipse{ stroke-dashoffset: 0; }

/* Ab 1180 px übernimmt die Randnotiz links (ws-note) */
@media (min-width: 1180px){ .ws-tab{ display: none; } }
@media print{ .ws-tab{ display: none !important; } }
@media (prefers-reduced-motion: reduce){ .ws-tab, .ws-tab-link .link ellipse{ transition: none; } }