/* Studio-Zugangsseiten. Alle Regeln bleiben im Auth-Bereich; die App-Inhalte erben diese Gestaltung nicht. */
html:has(body.authPage) { scrollbar-gutter: stable; }
body.authPage { background: #e9eef2; }
body.authPage main { padding: 32px; min-height: 100vh; min-height: 100dvh; }
body.authPage main div.mainContent { max-width: none; padding: 0; }
.authShell, .authShell * { box-sizing: border-box; font-family: "Segoe UI", Arial, sans-serif; }
.authShell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: 1600px; margin: 0 auto; min-height: calc(100dvh - 64px); border-radius: 14px; overflow: hidden; background: #ffffff; color: #1e353d; box-shadow: 0 14px 40px #28313a0d; }
.authBrand { display: flex; flex-direction: column; min-width: 0; padding: 38px clamp(32px, 4vw, 70px); background: #eaf1f3; }
.authBrandName { display: flex; align-items: center; gap: 11px; color: #1e353d; font-size: 21px; font-weight: 500; letter-spacing: -.65px; text-transform: lowercase; line-height: 32px; }
.authBrandName::before { content: ""; flex: none; width: 32px; height: 32px; background-color: currentColor; mask: url("../../img/studio-mark.e64d03b75eb0.svg") center / contain no-repeat; }
.authBrandContent { margin: auto 0; padding: 35px 0 12px; }
.authEyebrow { font-size: 9px; font-weight: 600; letter-spacing: 2px; }
.authClaim { font-size: clamp(34px, 3.6vw, 58px); line-height: 1.08; letter-spacing: -2px; font-weight: 500; margin: 20px 0; }
.authClaim em { font-style: normal; font-weight: 500; color: #678990; }
.authBrandDescription { color: #62777e; font-size: 13px; line-height: 1.7; max-width: 350px; }
.authComposition { position: relative; isolation: isolate; height: 240px; margin: 35px -5px 0; }
.authCompositionLine { position: absolute; width: 270px; height: 190px; top: 16px; left: 45px; border: 1px solid #c4d6db; border-radius: 14px; transform: rotate(-8deg); z-index: -1; }
.authFlyer { position: absolute; width: 200px; height: 235px; overflow: hidden; background: #ffffff; border-radius: 4px; box-shadow: 0 12px 30px #2447541c; }
.authFlyerFront { left: 48px; top: 0; transform: rotate(-7deg); z-index: 2; }
.authFlyerBack { left: 198px; top: 8px; transform: rotate(7deg); z-index: 1; }
.authFlyer img { display: block; width: 100%; height: 112px; object-fit: cover; }
.authFlyerText { padding: 13px 15px 7px; }
.authFlyerText small { display: block; font-size: 5px; letter-spacing: .8px; color: #839196; }
.authFlyerText strong { display: block; font-family: Georgia, serif; font-size: 25px; line-height: .95; font-weight: 400; margin: 8px 0; }
.authFlyerText p { font-size: 7px; color: #7e8e92; }
.authFlyerFooter { display: flex; align-items: center; justify-content: space-between; padding: 7px 15px; border-top: 1px solid #edf1f2; color: #839196; }
.authFlyerFooter span { font-size: 5px; letter-spacing: .5px; }
.authFlyerFooter b { font-size: 12px; }
.authTemplateHint { position: absolute; left: 240px; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 9px; padding: 11px 13px; border: 1px solid #e5eeee; border-radius: 6px; background: #ffffff; box-shadow: 0 8px 20px #29464f10; white-space: nowrap; }
.authTemplateHint > span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #e9f3ee; color: #648f80; font-size: 12px; }
.authTemplateHint p { font-size: 9px; color: #48646b; }
.authTemplateHint small { display: block; font-size: 8px; color: #82969c; margin-top: 4px; }
.authBrandBottom { display: flex; align-items: center; gap: 13px; padding-top: 26px; margin-top: 25px; border-top: 1px solid #d3e0e4; color: #526e77; font-size: 10px; }
.authMain { display: flex; flex-direction: column; min-width: 0; padding: 32px clamp(24px, 4vw, 64px) 24px; }
.authTopline { color: #75868b; font-size: 8px; font-weight: 600; letter-spacing: 1.5px; }
.authCard { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 416px; margin: auto; padding: 34px 0; }
.authSurface, .authSizer { grid-area: 1 / 1; align-self: start; min-width: 0; }
.authSizer { visibility: hidden; pointer-events: none; }
.authKicker { color: #295e68; font-size: 9px; font-weight: 600; letter-spacing: 1.8px; margin-bottom: 10px; line-height: 1.4; }
.authTitle { color: #1e353d; font-size: 30px; font-weight: 550; letter-spacing: -1.2px; line-height: 1.2; margin: 0 0 8px; }
.authIntro { color: #62777e; font-size: 12px; line-height: 1.7; margin-bottom: 26px; max-width: 355px; }
.authForm { display: flex; flex-direction: column; gap: 15px; }
.authRow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.authField { min-width: 0; margin-bottom: 15px; }
.authForm .authField { margin-bottom: 0; }
.authLabelRow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.authLabel { display: block; color: #344d56; font-size: 12px; font-weight: 600; line-height: 1.4; margin-bottom: 7px; }
.authLabelRow .authLabel { margin-bottom: 0; }
.authInputWrap { position: relative; }
.authInput { display: block; width: 100%; height: 46px; padding: 0 12px; border: 1px solid #7d8a97; border-radius: 7px; color: #1e353d; background: #ffffff; font-size: 1rem; outline: none; transition: border-color .15s, box-shadow .15s; }
.authInput::placeholder { color: #7d8a97; font-size: 12px; }
.authInput:focus { border-color: #2c6878; box-shadow: 0 0 0 3px rgba(44, 104, 120, 0.25); }
.authInputSizer { height: 46px; }
.authPasswordToggle { position: absolute; right: 5px; top: 6px; display: grid; place-items: center; width: 31px; height: 34px; padding: 0; border: 0; border-radius: 4px; background: none; color: #647d85; cursor: pointer; }
.authPasswordToggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.authInputWrap:has(.authPasswordToggle:not([hidden])) .authInput { padding-right: 40px; }
.authPasswordToggle[hidden], .authFieldFeedback[hidden] { display: none; }
.authField.hasError .authInput { border-color: #b33b36; background: #fffafa; }
.authError { color: #b33b36; font-size: 12px; line-height: 1.45; margin-top: 6px; }
.authHelp { color: #62777e; font-size: 12px; line-height: 1.6; margin-top: 6px; }
.authHelp ul { padding-left: 18px; }
.authHelp li { margin-top: 4px; }
.authSubmit { display: flex; align-items: center; justify-content: center; gap: 16px; width: 100%; min-height: 46px; padding: 12px 20px; border: 0; border-radius: 7px; background: #295e68; color: #ffffff; font-size: 14px; font-weight: 600; line-height: 20px; cursor: pointer; text-decoration: none; }
.authForm .authSubmit { margin-top: 6px; }
.authSubmit span { font-size: 17px; }
.authSubmit:hover { background: #234f58; color: #ffffff; text-decoration: none; }
.authSubmit:focus-visible { outline: 2px solid #295e68; outline-offset: 3px; }
.authNextNote { color: #62777e; font-size: 11px; line-height: 1.6; text-align: center; margin-top: 14px; }
.authSwitch { color: #62777e; font-size: 12px; line-height: 1.6; text-align: center; margin-top: 21px; }
.authSwitch a { color: #295e68; font-weight: 600; text-decoration: none; }
.authSwitch a:hover { color: #234f58; text-decoration: underline; }
.authSizer .authSwitch span { font-weight: 600; }
.authForgot { color: #295e68; font-size: 11px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.authForgot:hover { color: #234f58; text-decoration: underline; }
.authPasswordToggle:focus-visible, .authSwitch a:focus-visible, .authForgot:focus-visible, .authFooter a:focus-visible { outline: 2px solid #295e68; outline-offset: 3px; }
.authFooter { display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 10px; line-height: 20px; color: #62777e; }
.authFooter div { display: flex; gap: 19px; }
.authFooter a { color: #62777e; text-decoration: none; }
.authFooter a:hover { text-decoration: underline; }
.authMessages { display: grid; gap: 8px; margin-bottom: 20px; }
.authMessage { padding: 10px 12px; border-left: 3px solid #295e68; border-radius: 6px; background: #eff5f6; color: #295e68; font-size: 13px; line-height: 1.5; }
.authMessage.error { background: #fff1f0; border-color: #b33b36; color: #9b332e; }
.authMessage.success { background: #f0f7f3; border-color: #54826e; color: #33614f; }
.authMessage.info { background: #eff5f6; border-color: #295e68; color: #295e68; }
@media (max-width: 1100px) {
  .authBrand { padding: 32px; }
  .authMain { padding: 32px; }
  .authClaim { font-size: 40px; }
  .authComposition { margin-left: -25px; transform: scale(.85); transform-origin: left center; }
  .authBrandBottom { gap: 9px; font-size: 9px; }
}
@media (max-width: 760px) {
  body.authPage main { padding: 0; }
  .authShell { display: flex; flex-direction: column; border-radius: 0; min-height: 100dvh; }
  .authBrand { padding: 25px; }
  .authBrandName { font-size: 19px; }
  .authBrandContent { margin: 0; padding: 25px 0 0; }
  .authClaim { font-size: 30px; letter-spacing: -1px; margin: 12px 0 10px; }
  .authBrandDescription { font-size: 12px; line-height: 1.6; }
  .authEyebrow, .authComposition, .authBrandBottom, .authTopline { display: none; }
  .authMain { flex: 1; padding: 26px 25px 22px; }
  .authCard { margin: 0 auto; padding: 3px 0 28px; }
  .authTitle { font-size: 27px; }
  .authIntro { margin-bottom: 25px; }
  .authRow { gap: 10px; }
  .authFooter { margin-top: auto; }
}
@media (prefers-reduced-motion: reduce) { .authInput { transition: none; } }
@media (forced-colors: active) {
  .authInput, .authSubmit, .authMessage { border: 1px solid CanvasText; }
  .authBrandName::before { background-color: CanvasText; forced-color-adjust: none; }
}