/* Anmeldeseite im Studio-Look (24.10.2026, Wunsch Johannes): Wer über kundenportal…/studio, einen Studio-Link oder nach dem
   Abmelden im Studio zur Anmeldung kommt, sieht Gestalten und Videoschnitt statt Verwaltung – dieselbe Anmeldung, anderes Gewand.
   app.js setzt dafür die Klasse .auth-studio auf <main> und zeichnet die Kacheln aus studioBento(). Plätze der Kacheln
   (bt-brand, bt-file, …) und Handy-Aufbau kommen aus style.css; hier stehen nur Farben, Inhalte der Kacheln und Bewegung. */
.auth.auth-bento.auth-studio{
  background:radial-gradient(60% 50% at 12% 8%,#e9e3fb 0%,#e9e3fb00 70%),radial-gradient(50% 45% at 90% 88%,#ffe4d6 0%,#ffe4d600 70%),
    radial-gradient(45% 40% at 88% 8%,#d9f2ea 0%,#d9f2ea00 70%),radial-gradient(40% 40% at 30% 95%,#fdf0d2 0%,#fdf0d200 70%),#f3f1fa}
.auth-studio .bento-tile{color:#231f3d;border-color:#ffffffee;box-shadow:0 18px 40px #2a1f5a12}
.auth-studio .bento-tile span,.auth-studio .bento-tile small{color:#5f5a7a}
.auth-studio .bt-label{color:#7a6fa6!important}
/* Karte */
.auth.auth-bento.auth-studio .formwrap.auth-glass{border-color:#ffffffee;box-shadow:0 30px 80px #3a2b7a2e}
.auth-studio .eyebrow-studio{display:inline-flex;align-items:center;gap:8px;color:#5b4bd6}
.auth-studio .eyebrow-studio i{width:9px;height:9px;border-radius:50%;background:conic-gradient(#5b4bd6,#ff7a59,#2bb39a,#f2b84b,#5b4bd6);animation:bts-spin 6s linear infinite}
.auth.auth-bento.auth-studio .formwrap .primary{background:linear-gradient(100deg,#4c3fc4,#6a5ae0 55%,#8a6cf0)!important}
.auth-studio .formwrap .link{color:#5b4bd6}
.auth-studio .auth-card-name{color:#7a6fa6}
.auth-studio .auth-linkhint{border-color:#d9d2f5;background:#f1edfd;color:#3f348f}
/* Kachel „JP Studio“ (links hoch) */
.bts-brand p em{color:#5b4bd6;font-style:italic}
.bts-brand .bt-chips em{background:#efeafc;color:#4a3fb0;border-color:#e0d9fa}
/* Kachel „Design-Editor“: kleine Seite mit Auswahlrahmen */
.bts-canvas{background:linear-gradient(150deg,#ece7fb,#f7f5fe)}
.bts-page{position:relative;width:62%;max-width:120px;aspect-ratio:1/1.3;margin:6px 0 4px;padding:9px;border-radius:6px;background:#fff;box-shadow:0 8px 20px #2a1f5a1a;display:grid;gap:6px;align-content:start}
.bts-page i{display:block;border-radius:3px;background:#e4e0f2}
.bts-page .bts-head{height:9px;width:70%;background:#5b4bd6}
.bts-page .bts-img{height:34%;background:linear-gradient(135deg,#ffb79f,#ff7a59 55%,#f2b84b)}
.bts-page .bts-line{height:5px}.bts-page .bts-line.short{width:55%}
.bts-sel{position:absolute;inset:auto 7px 30% 7px;height:36%;border:1.5px solid #5b4bd6;border-radius:3px;animation:bts-select 5s ease-in-out infinite}
.bts-sel b{position:absolute;width:7px;height:7px;border:1.5px solid #5b4bd6;background:#fff;border-radius:2px}
.bts-sel b:nth-child(1){top:-4px;left:-4px}.bts-sel b:nth-child(2){top:-4px;right:-4px}.bts-sel b:nth-child(3){bottom:-4px;left:-4px}.bts-sel b:nth-child(4){bottom:-4px;right:-4px}
.bts-saved{background:#e3f6ef!important;color:#1f6f52!important}
/* Kachel „Videoschnitt“: Zeitleiste mit wanderndem Abspielkopf */
.bts-video{background:linear-gradient(140deg,#1f1b3a,#2c2557 60%,#3b2f6e);color:#fff!important}
.bts-video strong,.bts-video .bt-progress-text span{color:#fff}
.bts-video .bt-label{color:#b7acf0!important}.bts-video .bt-progress-text>span:last-child{color:#c8c1ea}
.bts-timeline{display:flex;align-items:center;gap:14px;margin-top:auto;flex:1 1 auto;min-width:0;align-self:center;width:100%}
.bts-play{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;color:#2c2557;box-shadow:0 8px 20px #0000003a;flex:none;animation:bts-pulse 2.8s ease-out infinite}
.bts-tracks{position:relative;flex:1;display:grid;gap:7px;padding:4px 0}
.bts-track{display:flex;gap:4px;height:22px}
.bts-track i{flex:1;border-radius:6px;background:linear-gradient(180deg,#8a6cf0,#5b4bd6)}
.bts-track .c1{flex:1.4;background:linear-gradient(180deg,#ffb79f,#ff7a59)}.bts-track .c2{flex:.8;background:linear-gradient(180deg,#7fe0c8,#2bb39a)}.bts-track .c3{flex:1.1}.bts-track .c4{flex:.6;background:linear-gradient(180deg,#ffd98a,#f2b84b)}
.bts-track.bts-audio{height:12px}.bts-track.bts-audio i{background:repeating-linear-gradient(90deg,#b7acf0 0 2px,#b7acf000 2px 5px);opacity:.8;border-radius:3px}
.bts-playhead{position:absolute;top:0;bottom:0;left:0;width:2px;background:#fff;box-shadow:0 0 0 1px #2c2557,0 0 12px #fff;animation:bts-move 7s linear infinite}
.bts-playhead::before{content:"";position:absolute;top:-6px;left:-5px;border:6px solid transparent;border-top:8px solid #fff;border-bottom:0}
/* Kachel Motto (dunkel) */
.bts-motto{background:linear-gradient(130deg,#2c2557,#5b4bd6,#4c3fc4,#2c2557)!important}
.bts-motto .bt-mark{color:#ffb79f!important}.bts-motto span{color:#d6cff6}
/* Kachel „Ihre Marke“: Farbfelder und Schriftprobe */
.bts-marke{background:linear-gradient(150deg,#fff,#f7f5fe)}
.bts-swatches{display:flex;gap:8px;margin:6px 0}
.bts-swatches i{width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 2px #fff,0 6px 14px #2a1f5a1f;animation:bts-pop 4.8s ease-in-out infinite}
.bts-swatches .s1{background:#5b4bd6}.bts-swatches .s2{background:#ff7a59;animation-delay:.4s}.bts-swatches .s3{background:#2bb39a;animation-delay:.8s}.bts-swatches .s4{background:#f2b84b;animation-delay:1.2s}
.bts-fonts{display:flex;align-items:baseline;gap:14px;margin:2px 0 6px}
.bts-fonts b{font:700 30px/1 'Schibsted Grotesk','Instrument Sans',sans-serif;color:#231f3d}
.bts-fonts em{font:italic 28px/1 Georgia,'Times New Roman',serif;color:#5b4bd6}
/* Kachel „Vorlagen“: Stapel aus drei Karten */
.bts-vorlagen{background:linear-gradient(160deg,#fff4ec,#ffe4d6)}
.bts-stack{position:relative;height:74px;margin:4px 0 6px}
.bts-stack i{position:absolute;left:0;width:58px;height:70px;border-radius:7px;background:#fff;box-shadow:0 8px 18px #7a3a1a1f;border:1px solid #ffd9c7}
.bts-stack i::before{content:"";position:absolute;left:8px;right:8px;top:9px;height:7px;border-radius:2px;background:#ff7a59}
.bts-stack i::after{content:"";position:absolute;left:8px;right:14px;top:22px;height:30px;border-radius:3px;background:linear-gradient(135deg,#ffe4d6,#ffd1bd)}
.bts-stack i:nth-child(1){transform:rotate(-7deg) translateX(0)}.bts-stack i:nth-child(2){transform:rotate(1deg) translateX(26px);animation:bts-float 5s ease-in-out infinite}.bts-stack i:nth-child(3){transform:rotate(8deg) translateX(52px)}
.bts-stack i:nth-child(3)::before{background:#5b4bd6}.bts-stack i:nth-child(3)::after{background:linear-gradient(135deg,#e9e3fb,#d6cff6)}
.bts-stack i:nth-child(1)::before{background:#2bb39a}.bts-stack i:nth-child(1)::after{background:linear-gradient(135deg,#d9f2ea,#bde8da)}
/* Kachel „Formate“ (breit, unten links) */
.bts-formate{background:linear-gradient(140deg,#e6f6f1,#f5fbf9);align-items:center;justify-content:center}
.bts-formate .bts-formats{display:flex!important;flex-wrap:wrap;gap:18px 26px;align-items:flex-end;justify-content:center;width:100%}
.bts-formate .bts-fmt-label{flex:0 0 100%;text-align:center;margin-bottom:4px}
.bts-fmt{display:grid;justify-items:center;gap:9px;font-size:12.5px;color:#3f6f60;font-weight:600}
.bts-fmt i{display:block;border-radius:6px;background:#fff;border:1.5px solid #2bb39a;box-shadow:0 8px 18px #1f6f521f}
.bts-fmt.sq i{width:52px;height:52px}.bts-fmt.story i{width:36px;height:64px}.bts-fmt.a3 i{width:46px;height:64px}.bts-fmt.wide i{width:80px;height:46px}.bts-fmt.a5 i{width:40px;height:56px}
.bts-fmt:nth-child(odd) i{animation:bts-bob 5s ease-in-out infinite}.bts-fmt:nth-child(even) i{animation:bts-bob 5s ease-in-out 1.2s infinite}
/* Kachel „Herunterladen“ */
.bts-export{background:linear-gradient(150deg,#fdf4df,#fffaf0)}
.bts-exports{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 auto}
.bts-exports em{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.06em;padding:4px 9px;border-radius:7px;background:#fff;color:#8a6410;border:1px solid #f1dfae}
/* Kachel „Alles im Studio“ (unten rechts, farbig) */
.bts-areas{background:linear-gradient(130deg,#ff7a59,#8a6cf0,#5b4bd6,#ff7a59)!important}
.bts-areas .bt-areas li{color:#fff}
/* Bewegung */
@keyframes bts-move{from{left:0}to{left:100%}}
@keyframes bts-select{0%,100%{transform:translateY(0)}50%{transform:translateY(-8%)}}
@keyframes bts-pop{0%,80%,100%{transform:scale(1)}88%{transform:scale(1.22)}}
@keyframes bts-float{0%,100%{transform:rotate(1deg) translate(26px,0)}50%{transform:rotate(1deg) translate(26px,-6px)}}
@keyframes bts-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes bts-pulse{0%,100%{box-shadow:0 8px 20px #0000003a,0 0 0 0 #ffffff66}60%{box-shadow:0 8px 20px #0000003a,0 0 0 12px #ffffff00}}
@keyframes bts-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.bts-playhead,.bts-sel,.bts-swatches i,.bts-stack i,.bts-fmt i,.bts-play,.eyebrow-studio i{animation:none!important}}
/* Handy: dieselben Kacheln wie im Portal-Look (style.css blendet bt-brand, bt-motto, bt-progress, bt-glow aus) */
@media(max-width:900px){.bts-page{max-width:96px}.bts-formate .bts-formats{gap:12px 16px}.bts-fmt{font-size:11px}.bts-fmt i{transform:scale(.8);transform-origin:bottom}}