/* SunnyKonto – Vorschau-Animation auf den Anmelde-Seiten (SVG-Szenen aus js/intro.js). Nur Formen und Platzhalter, keine echten Inhalte. */
.intro { --k1: #4C8DF6; --k2: #F2994A; --k3: #9B6BE8; --k4: #2FBF9B; display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 560px; }
.intro-alt { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.intro-stage { border-radius: 16px; border: 1px solid var(--line); background: var(--stage); padding: 10px; display: flex; justify-content: center; }
.intro-art { display: block; width: 100%; height: auto; max-height: min(26vh, 340px); }
.intro-info { display: flex; align-items: center; gap: 12px; min-height: 52px; }
.intro-icon { width: 40px; height: 40px; flex: none; border-radius: 10px; }
.intro-copy { display: flex; flex-direction: column; min-width: 0; }
.intro-app { font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent-text); }
.intro-title { font-size: 16px; font-weight: 800; }
.intro-text { font-size: 14px; color: var(--muted); }
.intro-ctl { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.intro-dots { display: flex; gap: 4px; }
.intro-dot { width: 44px; height: 24px; padding: 9px 0; border: 0; background: transparent; cursor: pointer; border-radius: 6px; }
.intro-dot-fill { display: block; height: 6px; border-radius: 3px; background: var(--line-strong); position: relative; overflow: hidden; }
.intro-dot-fill::after { content: ""; position: absolute; inset: 0; border-radius: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.intro-dot.on .intro-dot-fill::after { transform: scaleX(1); }
.intro-dot:focus-visible, .intro-pause:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.intro-pause { width: 32px; height: 32px; flex: none; border: 1px solid var(--line-strong); border-radius: 50%; background: transparent; cursor: pointer; position: relative; }
.intro-pause::before, .intro-pause::after { content: ""; position: absolute; top: 9px; width: 3px; height: 12px; border-radius: 1px; background: var(--text); left: 11px; }
.intro-pause::after { left: 17px; }
.intro-pause[aria-pressed="true"]::before { left: 12px; top: 8px; width: 0; height: 0; border-radius: 0; background: transparent; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent var(--text); }
.intro-pause[aria-pressed="true"]::after { display: none; }

/* Szenen */
.sc { display: none; }
.sc.on { display: inline; }
.panel { fill: var(--panel); stroke: var(--line); }
.bar { fill: var(--line-strong); }
.av { stroke: var(--panel); stroke-width: 2; }
.av1, .v1 { fill: var(--k1); } .av2, .v2 { fill: var(--k2); } .av3, .v3 { fill: var(--k3); } .v4 { fill: var(--k4); }
.bub { fill: var(--bubble); stroke: var(--bubble-line); }
.bub.me { fill: var(--me-bg); stroke: none; }
.me-bar { fill: var(--me-text); opacity: 0.6; }
.dot { fill: var(--muted); }
.tile { opacity: 0.9; }
.ink { fill: #fff; opacity: 0.55; }
.screen { fill: var(--stage); stroke: var(--line-strong); }
.screen-top { fill: var(--line-strong); }
.share-arrow { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cal-dot { fill: var(--line-strong); }
.meet { fill: var(--accent); }
.meet-dot { fill: var(--accent-ink); }
.meet-bar { fill: var(--accent-ink); opacity: 0.5; }
.cam { fill: var(--k1); }
.grid-dot { fill: var(--line-strong); }
.stroke { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.stroke.draw { stroke: var(--k1); }
.stroke.arrow { stroke: var(--text); stroke-width: 2.4; opacity: 0.8; }
.arrow-head { fill: none; stroke: var(--text); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0.8; }
.draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
.note.n1 { fill: #F6D860; } .note.n2 { fill: #F59AB2; } .note.n3 { fill: #7FD6A4; }
.note-bar { fill: #13213B; opacity: 0.35; }
.cursor { transform: translate(170px, 100px); }
.cur-a { fill: var(--k1); } .cur-b { fill: var(--k2); }
.cursor.cur2 { transform: translate(100px, 140px); }
.cur-tag { opacity: 0.9; }
.day { fill: var(--muted); font: 700 10px Manrope, "Segoe UI", system-ui, sans-serif; }
.slot { fill: var(--panel-2); stroke: var(--line); stroke-dasharray: 3 3; }
.post { stroke: none; }
.post.k1, .chan.k1 .chan-bg { fill: var(--k1); } .post.k2, .chan.k2 .chan-bg { fill: var(--k2); } .post.k3, .chan.k3 .chan-bg { fill: var(--k3); } .post.k4, .chan.k4 .chan-bg { fill: var(--k4); }
.post-bar { fill: #fff; opacity: 0.7; }
.chan-ink { fill: #fff; }
.pub-bg { fill: var(--accent); }
.pub-check { fill: none; stroke: var(--accent-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.a-pop, .a-drop { transform-box: fill-box; transform-origin: center; }

@media (prefers-reduced-motion: no-preference) {
  .a-pop { animation: i-pop 0.5s cubic-bezier(0.2, 1.2, 0.4, 1) both; }
  .a-slide { animation: i-slide 0.45s ease-out both; }
  .a-fade { animation: i-fade 0.5s ease-out both; }
  .a-drop { animation: i-drop 0.55s cubic-bezier(0.3, 1.3, 0.5, 1) both; }
  .draw { animation: i-draw 1.1s ease-in-out both; }
  .dot { animation: i-bounce 1s ease-in-out infinite; }
  .dot2 { animation-delay: 0.15s; } .dot3 { animation-delay: 0.3s; }
  .cursor.cur1 { animation: i-cur1 4.8s ease-in-out infinite; }
  .cursor.cur2 { animation: i-cur2 4.8s ease-in-out infinite; }
  .intro-dot.on .intro-dot-fill::after { animation: i-fill 4.8s linear both; }
  /* je Szene versetzt starten */
  .d1 { animation-delay: 0.2s; } .d2 { animation-delay: 0.5s; } .d3 { animation-delay: 0.8s; } .d4 { animation-delay: 1.1s; } .d5 { animation-delay: 1.4s; }
  .d6 { animation-delay: 1.7s; } .d7 { animation-delay: 2s; } .d8 { animation-delay: 2.3s; } .d9 { animation-delay: 2.8s; }
  .pub-check.draw { animation-delay: 3.3s; animation-duration: 0.5s; }
  .intro.is-still .intro-dot-fill::after { animation: none; }
  .intro.is-still .dot, .intro.is-still .cursor { animation-play-state: paused; }
}
@keyframes i-pop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes i-slide { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes i-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes i-drop { from { opacity: 0; transform: translateY(-16px) scale(0.85); } to { opacity: 1; transform: none; } }
@keyframes i-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes i-bounce { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(-4px); opacity: 1; } }
@keyframes i-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes i-cur1 { 0%, 100% { transform: translate(60px, 60px); } 30% { transform: translate(150px, 96px); } 60% { transform: translate(215px, 40px); } 80% { transform: translate(250px, 120px); } }
@keyframes i-cur2 { 0%, 100% { transform: translate(250px, 150px); } 35% { transform: translate(180px, 110px); } 65% { transform: translate(110px, 70px); } 85% { transform: translate(70px, 140px); } }

/* Seitenleiste auf Anmelde-Seiten */
.auth-brand .intro { margin-top: 6px; }
@media (min-width: 2200px) { .intro { max-width: 680px; } .intro-art { max-height: min(30vh, 460px); } }
@media (max-width: 820px) {
  .auth-brand .intro { display: grid; grid-template-columns: 136px minmax(0, 1fr); grid-template-areas: "stage info" "ctl ctl"; align-items: center; gap: 4px 12px; margin-top: 0; max-width: none; }
  .intro-stage { grid-area: stage; padding: 4px; border-radius: 10px; }
  .intro-art { max-height: none; }
  .intro-info { grid-area: info; align-items: flex-start; gap: 8px; min-height: 0; }
  .intro-icon { width: 28px; height: 28px; border-radius: 8px; }
  .intro-title { font-size: 14px; line-height: 1.2; }
  .intro-text { font-size: 12px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .intro-ctl { grid-area: ctl; }
  .intro-dot { height: 20px; padding: 7px 0; }
  .intro-pause { width: 28px; height: 28px; }
  .intro-pause::before, .intro-pause::after { top: 8px; left: 9px; }
  .intro-pause::after { left: 15px; }
}