/* The start screen (site/templates/home.php): three colour variants (Figma: Start1 gelb, Start2 lila,
   Start2 braun), one per visit. The floor plan lies over the frame colour with an Exclusion blend,
   as in the Figma layer, which turns the beige drawing blue (on yellow) or green (on purple / brown).
   The plan is a little larger than the screen and turned, as in Figma; but where the Figma frame
   crops it, the screen here does not: the sheet runs past the screen's edges (into the side bands of
   a wide window) and only the window itself cuts it off. The frame colour shows in the slivers at the
   corners the turned sheet does not reach; the window around the page (`--side`) takes the same colour. */

.start { background: var(--yellow); color: #fff; --side: #f2e857; }
.start-purple  { background: var(--purple);  color: var(--dark); --side: #8130f2; }
.start-brown { background: var(--brown); color: var(--dark); --side: #730e6c; }
/* a column: title at the top, intro and buttons at the bottom, the space between them stretches.
   In windows lower than Figma's 832 the space above the title gives way first (137 at 832, at least 30);
   when even that is not enough, the page grows and scrolls.
   In a narrow window (--ws below 1, .narrow on #stage) the type shrinks with the width: the title
   from 52 down to 28 px, the subtitle from 32 to 18, the intro from 20 to 16; the text blocks
   take the whole width, and the footer and the legal notice stack in one column at the bottom */
.start.screen {
  display: flex; flex-direction: column; height: auto; min-height: var(--h);
  padding: clamp(30px, calc(137px + var(--h) - 832px), calc(137px * var(--vs))) 20px 30px var(--gut);
}
.narrow .start.screen { padding-top: clamp(30px, calc(137px * var(--ws)), 137px); padding-right: var(--gut); }
.start-title, .start-intro, .start-actions, .start-foot { position: relative; }   /* painted above the plan (positioned, in page order) */

/* the plan, centred and a little larger than the screen (Figma: 1280 × 877 at 1280 × 832), turned slightly;
   the screen does not clip it (overflow, clip-path), the window does (#viewport) */
.start.screen { overflow: visible; clip-path: none; }
.start-img { position: absolute; inset: 0; mix-blend-mode: exclusion; }
.start-img img {
  position: absolute; left: 50%; top: 50%; width: auto; height: max(calc(100% * 877 / 832), calc(var(--w) * 877 / 1280)); aspect-ratio: 1280 / 877;
  object-fit: cover; transform: translate(-50%, -50%) rotate(-3.39deg);
}

.start-title { max-width: 925px; margin-bottom: clamp(24px, calc(40px * var(--ws)), 40px); color: inherit; }
.start-title .h1 { font-size: clamp(28px, calc(52px * var(--ws)), 52px); }
.start-title .sub { font-style: italic; font-weight: 400; font-size: clamp(18px, calc(32px * var(--ws)), 32px); line-height: 1.37; margin: 0; }
.start-intro { margin-top: auto; max-width: 820px; color: inherit; font-size: clamp(16px, calc(20px * var(--ws)), 20px); line-height: normal; }
.start-intro p { margin: 0; }
.start-intro p + p { margin-top: clamp(16px, calc(26px * var(--ws)), 26px); }

/* ZUM ARCHIV, then "Login" with the user icon, or once logged in the name and "Abmelden" */
.start-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: calc(30px * var(--vs)); }
.start-actions .btn { max-width: 100%; }
.start-user { height: 59px; display: flex; align-items: center; gap: 20px; }   /* as tall as the button, also when it wraps under it */
.start-login { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: clamp(16px, calc(20px * var(--ws)), 20px); color: inherit; transition: opacity .2s ease; }
.start-login img { width: 26px; height: 24px; display: block; }
.start-login:hover { opacity: .7; }
.start-login .bell-count { margin-left: -2px; align-self: flex-start; }
.start-logout { font-size: 12px; color: inherit; text-decoration: underline; transition: opacity .2s ease; }
.start-logout:hover { opacity: .65; }

/* below the buttons: the footer sits at the bottom edge (Figma: button bottom 162 above the page bottom) */
.start-foot { display: flex; align-items: flex-end; min-height: calc(162px * var(--vs) - 30px); padding-top: 32px; }
.start-footer { max-width: min(820px, var(--main)); color: var(--yellow); font-size: 10px; line-height: normal; }
.start-footer p { margin: 0; }
.start-footer p + p { margin-top: 13px; }
.start-footer a, .start-footer u { text-decoration: underline; }
.start-footer a { transition: opacity .2s ease; }
.start-footer a:hover { opacity: .65; }
.start-legal { position: absolute; right: 20px; bottom: 30px; width: 295px; color: var(--yellow); }

/* narrow window: the footer takes the whole width, the legal notice sits below it on the left */
.narrow .start-foot { min-height: 0; }
.narrow .start-footer { max-width: none; font-size: 11px; }
.narrow .start-legal { position: relative; right: auto; bottom: auto; display: block; width: auto; margin-top: 16px; text-align: left; }