/* TU-122: what the app needs on top of Oliver's styles.css, horizont.css and rechtliches.css (616e370), which stay
   unchanged so a comparison with his repository is a plain diff. Loaded after them on every sign-in and legal page. */

/* Provider links are <a> here (his are <button>), the primary action takes the accent colour */
a.sso { text-decoration: none; }
.sso.primary { background: rgba(124, 223, 191, 0.16); border-color: rgba(124, 223, 191, 0.55); }
.sso.primary:hover { background: rgba(124, 223, 191, 0.26); }
h1 + .stack { margin-top: 34px; }
.note { max-width: 380px; line-height: 1.5; }
.note + .note { margin-top: 8px; }

/* The message label of the former message box is the eyebrow line, with a status dot */
.eyebrow.ok::before, .eyebrow.warn::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; vertical-align: 1px; border-radius: 50%;
}
.eyebrow.ok::before { background: var(--mint); box-shadow: 0 0 10px var(--glow); }
.eyebrow.warn::before { background: #f0c27a; box-shadow: 0 0 10px rgba(240, 194, 122, 0.5); }
.eyebrow.identity { text-transform: none; letter-spacing: 0.04em; font-size: 13px; overflow-wrap: anywhere; }

.support-code {
  font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: 0.04em; color: var(--text);
  border: 1px dashed var(--line); border-radius: 6px; padding: 1px 6px;
}

/* Tenant picker: buttons like .sso with name, small id and arrow */
.stack form { margin: 0; }
.sso.tenant {
  display: grid; grid-template-columns: 1fr auto; justify-content: stretch; align-items: center; gap: 2px 12px;
  height: auto; padding: 12px 18px; text-align: left;
}
.sso.tenant b { font-weight: 600; }
.sso.tenant small { grid-column: 1; color: var(--muted); font-size: 12px; }
.sso.tenant .arrow { grid-row: 1 / span 2; grid-column: 2; color: var(--mint); font-weight: 600; }
.link-button {
  margin-top: 18px; background: none; border: 0; padding: 0; font: inherit; font-size: 13px; color: var(--muted);
  text-decoration: underline; cursor: pointer;
}
.link-button:hover { color: var(--text); }
.link-button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Maintenance page: status line with a pulsing dot */
.wartung-status { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); margin: 0 0 18px; }
.wartung-status i { width: 10px; height: 10px; border-radius: 50%; background: var(--mint); animation: wartung-puls 1.6s ease-in-out infinite; flex: none; }
@keyframes wartung-puls { 0%, 100% { opacity: 0.25; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .wartung-status i { animation: none; opacity: 1; } }

/* Reduced motion: no intro, so the page is visible at once instead of fading in from the intro-pending state */
@media (prefers-reduced-motion: reduce) { .page { transition: none; } }

/* Failsafe for the intro: only intro-foto.js clears intro-pending. If it never runs, the page shows itself after 8 s
   (longer than the intro takes to hand over); under reduced motion it is never hidden, not even for the first frame.
   Same specificity as the rule in styles.css and loaded after it; an animation outranks the plain declaration. */
.intro-pending .page { animation: intro-failsafe 0s linear 8s forwards; }
@keyframes intro-failsafe { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .intro-pending .page { opacity: 1; animation: none; } }

/* Paused page: the whole page is the resume control; the footer links stay clickable above it */
/* backdrop-filter and the hover transform of .sso make the link the containing block of position: fixed, which would shrink
   the ::after to the button; both are switched off here so it covers the viewport. */
.sso.resume, .sso.resume:hover { -webkit-backdrop-filter: none; backdrop-filter: none; transform: none; }
.resume::after { content: ""; position: fixed; inset: 0; }
.page > footer, .page > .wordmark { position: relative; z-index: 1; }

/* The intro hint says "click to skip": the pointer stays visible over it although the lens cursor hides it elsewhere */
.lens-cursor #intro, .lens-cursor #intro * { cursor: pointer; }

/* styles.css restores the pointer on the control itself, but `.lens-cursor *` hides it again over the content inside (b, small, svg);
   the second rule keeps the pointer there inside the help dialog, whose `.hilfe *` rule is more specific than the first */
.lens-cursor button *, .lens-cursor a * { cursor: pointer; }
.lens-cursor .hilfe button *, .lens-cursor .hilfe a * { cursor: pointer; }

/* Keyboard focus on the footer and help links */
.hilfe-liste a:focus-visible, .legal a:focus-visible, .link-btn:focus-visible { outline: 2px solid #7cdfbf; outline-offset: 2px; }

/* Legal pages: elements of the privacy notice his stylesheet has no rule for */
.rechtstext code { font-size: 0.88em; background: rgba(255, 255, 255, 0.07); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; overflow-wrap: anywhere; }
.rechtstext dl.cookies { grid-template-columns: 1fr; gap: 0; }
.rechtstext dl.cookies dt { margin-top: 18px; }
.rechtstext dl.cookies dt:first-child { margin-top: 0; }
.rechtstext dl.cookies dd { margin: 6px 0 0; }