:root[data-vorlage]:has(.auth-frame) {
  zoom: 1;
  height: 100%;
  font-size: 100%;
  background: var(--av-seite);
  --av-seite: #ffffff;
  --av-karte: #ffffff;
  --av-text: #111827;
  --av-titel: var(--av-text);
  --av-gedaempft: #5b616b;
  --av-label: var(--av-text);
  --av-feld-bg: #ffffff;
  --av-feld-rand: #c9ccd2;
  --av-linie: #dcdfe4;
  --av-hilfe-bg: #f3f4f6;
  --av-link: var(--av-akzent);
  --av-sek-bg: transparent;
  --av-sek-rand: #c6c9d0;
  --av-sek-text: var(--av-text);
  --av-h1: 2.5rem;
  --av-h1-gewicht: 700;
  --av-unter: 1.125rem;
  --av-unter-abstand: 6px;
  --av-form-abstand: 32px;
  --av-label-groesse: 1rem;
  --av-label-gewicht: 500;
  --av-label-abstand: 8px;
  --av-feld-hoehe: 48px;
  --av-radius: 4px;
  --av-feld-schrift: 1rem;
  --av-feld-innen: 16px;
  --av-feld-luecke: 24px;
  --av-forgot-oben: 20px;
  --av-knopf-oben: 24px;
  --av-knopf-hoehe: 50px;
  --av-knopf-schrift: 1.125rem;
  --av-knopf-gewicht: 700;
  --av-sek-schrift: 1.0625rem;
  --av-sek-gewicht: 500;
  --av-sek-randbreite: 1px;
  --av-link-groesse: 1rem;
  --av-link-gewicht: 400;
  --av-link-deko: underline;
  --av-oder-schrift: 1rem;
  --av-oder-oben: 24px;
  --av-oder-unten: 20px;
  --av-text-groesse: .9375rem;
  --av-hilfe-oben: 24px;
  --av-zeichen: 44px;
  --av-marke-groesse: 1.25rem;
  --av-marke-gewicht: 700;
  --av-marke-farbe: var(--av-text);
  --av-firma-farbe: var(--av-gedaempft);
  --av-firma-groesse: .875rem;
  --av-marke-luecke: 12px;
  --av-zeichen-hinten: var(--av-akzent);
  --av-zeichen-blatt: #ffffff;
  --av-zeichen-vorne: #ffffff;
  --av-zeichen-strich: var(--av-akzent);
  --color-auth-bg: var(--av-seite);
  --color-auth-card: var(--av-karte);
  --color-auth-text: var(--av-text);
  --color-auth-muted: var(--av-gedaempft);
  --color-auth-edge: var(--av-linie);
  --color-auth-line: var(--av-sek-rand);
  --color-auth-input: var(--av-feld-rand);
  --color-auth-accent: var(--av-link);
  --color-auth-deep: color-mix(in srgb, var(--av-link) 75%, #000);
  --color-auth-focus: var(--av-akzent);
  --color-auth-help: var(--av-hilfe-bg);
  --color-auth-pale: color-mix(in srgb, var(--av-akzent) 8%, var(--av-karte));
  --color-auth-soft: color-mix(in srgb, var(--av-akzent) 16%, var(--av-karte));
  --color-auth-accent-edge: color-mix(in srgb, var(--av-akzent) 40%, var(--av-karte));
  --color-auth-fill: color-mix(in srgb, var(--av-akzent) 86%, #000);
  --color-auth-fill-deep: color-mix(in srgb, var(--av-akzent) 74%, #000);
  --color-auth-mark: var(--av-zeichen-strich);
  --auth-gradient: linear-gradient(var(--av-akzent), var(--av-akzent));
  --auth-shadow-color: transparent;
  --auth-font: var(--av-schrift);
  --auth-button-font: var(--av-schrift);
  --av-faktor: .8;
  --av-dicht: 1;
}

:root[data-vorlage] body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

:root[data-vorlage] .auth-frame {
  flex: 1 0 auto;
  background: var(--av-seite);
  color: var(--av-text);
  font-family: var(--av-schrift);
}

:root[data-vorlage] .auth-panel {
  background: none;
  color: inherit;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: visible;
  min-height: 0;
}

:root[data-vorlage] .auth-panel::before,
:root[data-vorlage] .auth-panel::after {
  display: none;
}

:root[data-vorlage] .auth-footer,
:root[data-vorlage] .auth-message {
  display: none;
}

:root[data-vorlage] .auth-brand {
  gap: var(--av-marke-luecke);
  color: var(--av-firma-farbe);
  font-size: var(--av-firma-groesse);
  line-height: 1.25;
}

:root[data-vorlage] .auth-brand strong {
  color: var(--av-marke-farbe);
  font-size: var(--av-marke-groesse);
  font-weight: var(--av-marke-gewicht);
  line-height: 1.15;
}

:root[data-vorlage] .auth-brand svg {
  width: var(--av-zeichen);
  height: var(--av-zeichen);
}

:root[data-vorlage] .auth-brand svg path:nth-of-type(1) {
  fill: var(--av-zeichen-hinten);
}

:root[data-vorlage] .auth-brand svg path:nth-of-type(2) {
  fill: var(--av-zeichen-blatt);
}

:root[data-vorlage] .auth-brand svg path:nth-of-type(4) {
  fill: var(--av-zeichen-vorne);
}

:root[data-vorlage] .auth-main {
  display: block;
  padding: 0;
  min-width: 0;
}

:root[data-vorlage] .auth-content {
  max-width: none;
  width: auto;
}

:root[data-vorlage] .auth-content h1 {
  font-size: var(--av-h1);
  font-weight: var(--av-h1-gewicht);
  color: var(--av-titel);
  letter-spacing: 0;
  line-height: 1.15;
  margin: 0;
}

:root[data-vorlage] .auth-subtitle {
  font-size: var(--av-unter);
  color: var(--av-gedaempft);
  line-height: 1.35;
  margin: calc(var(--av-unter-abstand) * var(--av-dicht)) 0 0;
}

:root[data-vorlage] .auth-content [data-ui=text-field] label {
  font-size: var(--av-label-groesse);
  font-weight: var(--av-label-gewicht);
  color: var(--av-label);
  line-height: 1.25;
  margin: 0 0 calc(var(--av-label-abstand) * var(--av-dicht));
}

:root[data-vorlage] .auth-content input:where(:not([type=hidden]):not([hidden])) {
  height: var(--av-feld-hoehe);
  border: 1px solid var(--av-feld-rand);
  border-radius: var(--av-radius);
  background: var(--av-feld-bg);
  color: var(--av-text);
  padding: 0 var(--av-feld-innen);
  font-size: var(--av-feld-schrift);
}

:root[data-vorlage] .auth-content input[aria-invalid=true] {
  border-color: var(--color-auth-danger);
}

:root[data-vorlage] .auth-content input:focus {
  border-color: var(--av-akzent);
}

:root[data-vorlage] .auth-content [data-ui=button] {
  min-height: var(--av-knopf-hoehe);
  border-radius: var(--av-radius);
  font-family: var(--av-schrift);
  line-height: 1.2;
}

:root[data-vorlage] .auth-content [data-ui=button][data-variant=primary] {
  background: var(--av-akzent);
  color: var(--av-auf-akzent);
  border: 0;
  box-shadow: none;
  font-size: var(--av-knopf-schrift);
  font-weight: var(--av-knopf-gewicht);
}

:root[data-vorlage] .auth-content [data-ui=button][data-variant=primary]:is([data-hovered], :hover) {
  background: var(--color-auth-fill);
}

:root[data-vorlage] .auth-content [data-ui=button][data-variant=primary]:is([data-pressed], :active) {
  background: var(--color-auth-fill-deep);
}

:root[data-vorlage] .auth-content [data-ui=button][data-variant=secondary] {
  background: var(--av-sek-bg);
  border: var(--av-sek-randbreite) solid var(--av-sek-rand);
  color: var(--av-sek-text);
  font-size: var(--av-sek-schrift);
  font-weight: var(--av-sek-gewicht);
}

:root[data-vorlage] .auth-content a:not([data-ui=button]) {
  color: var(--av-link);
  font-weight: var(--av-link-gewicht);
  text-decoration: var(--av-link-deko);
  text-underline-offset: 3px;
}

:root[data-vorlage] .auth-login-form {
  margin-top: calc(var(--av-form-abstand) * var(--av-dicht));
  gap: 0;
}

:root[data-vorlage] .auth-login-form > [data-ui=notice] {
  margin-bottom: 16px;
}

:root[data-vorlage] .auth-login-form > [data-ui=text-field] + [data-ui=text-field] {
  margin-top: calc(var(--av-feld-luecke) * var(--av-dicht));
}

:root[data-vorlage] .auth-login-form > .auth-forgot {
  margin: calc(var(--av-forgot-oben) * var(--av-dicht)) 0 0;
  text-align: right;
}

:root[data-vorlage] .auth-login-form > .auth-forgot a {
  display: inline;
  min-height: 0;
  font-size: var(--av-link-groesse);
  line-height: 1.3;
}

:root[data-vorlage] .auth-login-form > button {
  margin-top: calc(var(--av-knopf-oben) * var(--av-dicht));
}

:root[data-vorlage] .auth-content form:not(.auth-login-form) {
  gap: 18px;
}

:root[data-vorlage] .auth-divider {
  color: var(--av-gedaempft);
  font-size: var(--av-oder-schrift);
  line-height: 1.3;
  margin: calc(var(--av-oder-oben) * var(--av-dicht)) 0 calc(var(--av-oder-unten) * var(--av-dicht));
}

:root[data-vorlage] .auth-divider::before,
:root[data-vorlage] .auth-divider::after {
  border-top-color: var(--av-linie);
}

:root[data-vorlage] .auth-letter p {
  color: var(--av-gedaempft);
  font-size: var(--av-text-groesse);
  margin: 0 0 calc(10px * var(--av-dicht));
}

:root[data-vorlage] .auth-help {
  background: var(--av-hilfe-bg);
  color: var(--av-gedaempft);
  border-radius: var(--av-radius);
  font-size: var(--av-text-groesse);
  margin-top: calc(var(--av-hilfe-oben) * var(--av-dicht));
  padding: calc(14px * var(--av-dicht)) 16px;
}

:root[data-vorlage] .auth-help :is(strong, h2) {
  color: var(--av-text);
}

:root[data-vorlage] .auth-content [data-ui=notice] {
  border-radius: var(--av-radius);
}

@media (max-width: 700px) {
  :root[data-vorlage] .auth-panel {
    border-radius: 0;
  }
  :root[data-vorlage] .auth-login-form > .auth-forgot a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

@media (min-width: 1000px) and (pointer: fine) {
  :root[data-vorlage]:has(.auth-frame) {
    zoom: var(--av-faktor);
  }
}

@media (min-width: 1000px) and (max-height: 840px) {
  :root[data-vorlage]:has(.auth-frame) {
    --av-dicht: .75;
  }
}

@media (min-width: 1000px) and (max-height: 760px) {
  :root[data-vorlage]:has(.auth-frame) {
    --av-dicht: .55;
  }
}