/*
 * The v2 front page (parts/front-v2.php). Layout rules measured on
 * artwalk.art (2026-10-27): scroll snap "y proximity" on the root with snap
 * points on the hero and the content, a 100svh hero, a sticky header, and a
 * footer at most 1200px wide with 5vw side padding. Colours and font stay
 * FlizzBee's (style.css).
 */

/* style.css hides overflow on both. Only the root may scroll here: an
   overflow other than visible on body would make body the scroll container,
   and the sticky header would never stick. */
html:has(body.fb-v2),
body.fb-v2 {
  height: auto;
  min-height: 100%;
}

html:has(body.fb-v2) {
  overflow: auto;
}

body.fb-v2 {
  overflow: visible;
}

/* Proximity leaves a scroll at rest halfway through the hero; v2.js finishes
   that scroll to the content start or the top. */
html:has(body.fb-v2) {
  scroll-snap-type: y proximity;
  scroll-behavior: smooth;
}

body.fb-v2 {
  color: #fff;
}

.fb-v2 a {
  color: inherit;
}

/* ---------- Hero ---------- */

.v2-hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  scroll-snap-align: start;
  background: var(--fb-bg);
  /* The hero's own size for cqw and cqh: the slogan is measured on it the way
     the net's background size is. */
  container-type: size;
}

.v2-hero-net {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  transition: opacity 0.4s ease;
}

/* In portrait, a size taken from the width leaves the image (800 x 850, its
   net drawn between 14% and 79% of its height) ending above the bottom of
   the screen. Portrait screens take the framing of a 1440 x 900 desktop
   instead, where the landscape rule below makes the image 1.87 hero heights
   tall: the net fills the hero and the logo sits at the same height, 44% from
   the top. */
@media (orientation: portrait) {
  .v2-hero-net {
    background-size: auto 187%;
    background-position: center 57%;
  }
}

@media (orientation: landscape) {
  .v2-hero-net {
    background-size: 110%;
    background-position: center 57%;
  }
}

.v2-hero-shots {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(16px, 3vw, 48px);
  padding: 4vh 5vw;
  /* --v2-go-room (v2.js) keeps the screenshots above "Leg los!". */
  padding-bottom: max(4vh, var(--v2-go-room, 4vh));
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.v2-hero.is-shots .v2-hero-net {
  opacity: 0.25;
}

.v2-hero.is-shots .v2-hero-shots {
  opacity: 1;
  pointer-events: auto;
}

.v2-hero-shots .v2-shot {
  flex: 0 1 auto;
  height: 100%;
  max-height: 78vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.v2-hero-shots .v2-shot img {
  height: calc(100% - 4.5em);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* The slogan under the logo, in the idle hero only. The width of the logo's
   hexagon is 13.48 % of the shipped image's width (measured in renders at
   eight screen sizes), so it follows the net's background size: 110 % of the
   hero width in landscape, 187 % of the hero height in portrait with the
   image's 800 x 850 shape. The logo's centre sits 43.9 % from the top and its
   lower tip 0.575 hexagon widths below that. It lies above the screenshots.
   Only its "Leg los!" button takes input, so a swipe on the text still
   reaches the screenshots underneath.

   FLIZZBEE® is as wide as the logo's hexagon, and the tagline and the
   closing line are centred under it. The other sizes and gaps are the app
   start banner's: the tagline in body size, the closing line bold at 88 % of
   --slogan-word. A phone uses the iPhone values in the iPhone's text width
   (the screen less 36 px a side), wider screens the iPad's in the iPad's
   560 px. A shorter screen scales those sizes and the gap alike, so the
   slogan stays inside the hero. */
.v2-slogan {
  --hex: 14.83cqw;
  --slogan-word: min(26px, 3.08cqh);
  --slogan-body: min(17px, 2.014cqh);
  --slogan-gap: min(6px, 0.711cqh);
  position: absolute;
  left: 50%;
  top: calc(43.9cqh + 0.575 * var(--hex) + clamp(14px, 3cqh, 32px));
  transform: translateX(-50%);
  width: min(100cqw - 72px, 560px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--slogan-gap);
  text-align: center;
  pointer-events: none;
  z-index: 1;
}

@media (min-width: 720px) {
  .v2-slogan {
    --slogan-word: min(30px, 3.333cqh);
    --slogan-body: min(22px, 2.444cqh);
    --slogan-gap: min(10px, 1.111cqh);
  }
}

@media (orientation: portrait) {
  .v2-slogan {
    --hex: 23.72cqh;
  }
}

.v2-slogan p {
  margin: 0;
  color: #fff;
  text-shadow: 0 0 6px #000, 0 0 2px #000;
  transition: opacity 0.4s ease;
}

/* The box is the hexagon's width. The ink of the word "FLIZZBEE®" in the
   bold system font is 5.07 times its font size wide (SF, measured at 26 and
   30 px), which sets the size here; v2.js corrects it for other fonts and
   moves the ink flush with the box. */
.v2-slogan .v2-slogan-word {
  width: var(--hex);
  font-size: calc(var(--hex) / 5.07);
  white-space: nowrap;
  font-weight: 700;
  line-height: 1.2;
  color: var(--accent);
}

.v2-slogan-text {
  font-size: var(--slogan-body);
  line-height: 1.3;
}

.v2-slogan-closing {
  margin-top: var(--slogan-gap) !important;
  font-size: calc(0.88 * var(--slogan-word));
  font-weight: 700;
  line-height: 1.2;
}

.v2-slogan-go {
  align-self: center;
  margin-top: clamp(14px, 3cqh, 28px);
  display: inline-block;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--fb-bg) !important;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  padding: 10px 28px;
  pointer-events: auto;
  transition: box-shadow 0.15s;
}

.v2-slogan-go:hover,
.v2-slogan-go:focus-visible {
  box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.6);
}

/* A phone held sideways leaves little room under the logo: two wide lines,
   a smaller button and tighter spacing around FLIZZBEE®, whose width follows
   the hexagon's, keep the slogan inside the hero. */
@media (orientation: landscape) and (max-height: 480px) {
  .v2-slogan {
    --slogan-word: 4.3cqh;
    --slogan-body: 2.812cqh;
    --slogan-gap: 0.992cqh;
    top: calc(43.9cqh + 0.575 * var(--hex) + clamp(12px, 3cqh, 32px));
    width: min(92cqw, 46rem);
  }

  .v2-slogan .v2-slogan-word {
    line-height: 1;
  }

  .v2-slogan-go {
    margin-top: 2px;
    padding: 6px 22px;
    font-size: 0.95rem;
  }
}

/* The screenshots take the hero's place, all but the "Leg los!" button: it
   stays visible and clickable above them. v2.js still shows the idle hero
   again when a mouse enters it. */
.v2-hero.is-shots .v2-slogan p {
  opacity: 0;
}

/* Phone: one screenshot at a time, a sideways swipe shows the next. */
@media (max-width: 719px) {
  .v2-hero-shots {
    justify-content: flex-start;
    gap: 0;
    padding: 0 0 var(--v2-go-room, 0px);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .v2-hero-shots::-webkit-scrollbar {
    display: none;
  }

  .v2-hero-shots .v2-shot {
    flex: 0 0 100%;
    max-height: none;
    padding: 5vh 8vw 3vh;
    box-sizing: border-box;
    scroll-snap-align: center;
  }
}

/* ---------- Screenshots ---------- */

.v2-shot {
  margin: 0;
}

.v2-shot img {
  display: block;
  border-radius: 28px;
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  box-shadow: 0 0 28px rgba(var(--accent-rgb), 0.18);
  background: #0b0b0b;
  -webkit-user-drag: none;
}

.v2-shot figcaption {
  max-width: 22em;
  margin-top: 0.8em;
  font-size: 0.9rem;
  line-height: 1.4;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
}

/* ---------- Pinned header ---------- */

.v2-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 5vw;
  background: rgba(var(--fb-bg-rgb), 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.2);
}

.v2-bar-logo {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.12em;
}

.v2-bar-logo img {
  width: 36px;
  height: 36px;
  display: block;
}

.v2-bar-apps {
  display: flex;
  gap: clamp(10px, 2.5vw, 32px);
}

.v2-bar-apps a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}

.v2-bar-apps a:hover,
.v2-bar-apps a:focus-visible {
  text-decoration: underline;
}

.v2-donate {
  display: inline-block;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--fb-bg) !important;
  font-weight: 700;
  text-decoration: none;
  padding: 7px 18px;
  white-space: nowrap;
  transition: box-shadow 0.15s;
}

.v2-donate:hover,
.v2-donate:focus-visible {
  box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.55);
}

.v2-bar-donate {
  justify-self: end;
}

@media (max-width: 719px) {
  .v2-bar {
    gap: 8px;
    padding: 8px 12px;
  }

  .v2-bar-name {
    display: none;
  }

  .v2-bar-logo img {
    width: 30px;
    height: 30px;
  }

  .v2-bar-apps {
    gap: 12px;
    font-size: 0.85rem;
  }

  .v2-bar .v2-donate {
    padding: 5px 12px;
    font-size: 0.85rem;
  }
}

/* ---------- Content ---------- */

/* Everything below the hero. Its top is the hero's bottom, where the pinned
   header's top edge sits, so snapping here leaves the header flush with the
   top of the screen. The snap point cannot sit on the header itself: the
   header is sticky, and Chromium would then snap to it at every position. */
.v2-page {
  scroll-snap-align: start;
}

.v2-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 5vw 5rem;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 38rem) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 6rem);
}

.v2-content-title {
  color: var(--accent);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  letter-spacing: 0.5px;
  margin: 0 0 1.5rem;
  text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.4);
}

.v2-part {
  font-size: 1.05rem;
  line-height: 1.65;
}

.v2-part > * {
  margin-top: 0;
  margin-bottom: 1.4em;
}

.v2-content-shots-stick {
  position: sticky;
  top: 90px;
  display: grid;
  justify-items: center;
}

/* The three side screenshots share one place; only the active one shows. */
.v2-shot-side {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 0.4s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.v2-shot-side.is-active {
  opacity: 1;
}

.v2-shot-side img {
  width: auto;
  max-width: min(100%, 300px);
  height: auto;
  max-height: calc(100vh - 220px);
}

.v2-shot-inline {
  display: none;
}

@media (max-width: 719px) {
  .v2-content {
    display: block;
    padding: 2.5rem 1.25rem 3.5rem;
  }

  .v2-content-shots {
    display: none;
  }

  .v2-shot-inline {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 2.4em;
  }

  .v2-shot-inline img {
    width: min(78vw, 300px);
    height: auto;
  }
}

/* ---------- Fields: apps under the hero, contact and donation above the footer ---------- */

/* Three full-width coloured columns side by side, stacked on a phone. The
   bright green is the theme's accent; the dark green and PayPal's blue have
   no theme token. */
.v2-fields {
  --field-dark: #063b23;
  --field-paypal: #0070ba;
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
}

.v2-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(2.2rem, 4.6vw, 4.4rem) clamp(1.5rem, 4vw, 4.2rem);
  color: var(--field-dark);
}

.v2-field-icon {
  display: block;
  width: 48px;
  height: 48px;
}

.v2-field-title {
  margin: 1rem 0 0.8rem;
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  line-height: 1.1;
  font-weight: 800;
  color: inherit;
}

.v2-field-text {
  margin: 0 0 1.6rem;
  max-width: 26rem;
  font-size: 1.05rem;
  line-height: 1.55;
}

.v2-field-button {
  margin-top: auto;
  display: inline-block;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  padding: 11px 30px;
  background: var(--field-dark);
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: box-shadow 0.15s;
}

.v2-field-button:hover,
.v2-field-button:focus-visible {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

/* Contact and donation: dark green for companies, bright green for private
   people, PayPal's blue for donations. */
.v2-field-people {
  background: var(--accent);
}

.v2-field-donate {
  background: var(--field-paypal);
  color: #fff;
}

.v2-field-donate .v2-field-button {
  background: #fff;
  color: var(--field-paypal) !important;
}

/* The apps: bright green web app, dark green iOS, black Android. */
.v2-field-web {
  background: var(--accent);
}

.v2-field-firm,
.v2-field-ios,
.v2-field-android {
  color: #fff;
}

.v2-field-firm,
.v2-field-ios {
  background: var(--field-dark);
}

.v2-field-android {
  background: #0b0b0b;
  border-left: 1px solid rgba(var(--accent-rgb), 0.2);
}

.v2-field-firm .v2-field-button,
.v2-field-ios .v2-field-button,
.v2-field-android .v2-field-button {
  background: var(--accent);
  color: var(--fb-bg) !important;
}

.v2-field-android .v2-field-icon,
.v2-field-android .v2-field-title {
  color: var(--accent);
}

@media (max-width: 719px) {
  .v2-fields {
    grid-auto-flow: row;
  }

  .v2-field-android {
    border-left: 0;
  }
}

/* ---------- Contact form ----------
   The form is the FlizzBee Signup plugin's, styled by style.css like the
   other forms. Both anchors, the section and the form a submit returns to,
   stop below the pinned header. */

.v2-contact {
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 5vw 4.5rem;
  box-sizing: border-box;
  text-align: center;
  scroll-margin-top: 4rem;
}

.v2-contact .v2-contact-title {
  margin: 0;
}

/* The "Du schreibst als" choices are long, fixed labels. The form is as wide
   as the longest one, so the closed field shows a chosen label whole and the
   other fields keep its width. The privacy line and the answer message wrap
   inside that width instead of widening the form. A screen narrower than the
   longest label keeps the form at the screen's width and cuts the label. */
.v2-contact .flizzbee-signup-form {
  width: max-content;
  min-width: min(24rem, 100%);
  max-width: 100%;
  margin-top: 1.5rem;
  scroll-margin-top: 9rem;
}

.v2-contact .flizzbee-signup-privacy,
.v2-contact .flizzbee-signup-message {
  contain: inline-size;
}

/* A compound such as "FLIZZBEE®-Karte" never splits after its hyphen. */
.v2-nowrap {
  white-space: nowrap;
}

/* ---------- Footer ---------- */

.v2-footer {
  border-top: 1px solid rgba(var(--accent-rgb), 0.2);
  font-size: 0.9rem;
}

.v2-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 5vw 2rem;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem 4rem;
}

.v2-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Under the logo and its name the slogan: the tagline, then the closing line
   a little larger. */
.v2-footer-id {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

/* Side by side (the columns wrap under the logo below 900 px), FLIZZBEE® and
   the column headings share one baseline, and the first slogan line starts
   level with the first links. With the 14 px gap below, the slogan's line
   starts 8.25 px lower than the links' (measured in renders on macOS). */
@media (min-width: 900px) {
  .v2-footer-id {
    gap: 5.75px;
  }
}

.v2-footer-slogan {
  max-width: 24rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.7);
}

.v2-footer-slogan p {
  margin: 0;
}

.v2-footer-slogan .v2-footer-closing {
  margin-top: 4px;
  font-size: 0.92rem;
}

/* FLIZZBEE's capitals are as tall as the vertical edge of the logo's
   hexagon: rows 52 to 139 of the 192 px image, 45.6 % of its height, so
   about 18.5 px at 40 px. Measured the same way in renders on macOS, edge
   and capitals both span 19 px at a font size of 26.5 px.
   The icon is placed out of the flow, so the name is the link's only flex
   item and its baseline is the link's, which the footer aligns the column
   headings on. ".fb-v2 a" would make the name white. */
.v2-footer .v2-footer-logo {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding-left: 50px;
  color: var(--accent);
  font-size: 26.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.12em;
  text-decoration: none;
}

.v2-footer-logo img {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.v2-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem clamp(2rem, 6vw, 5rem);
}

.v2-footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.v2-footer-head {
  margin: 0 0 4px;
  color: var(--accent);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.v2-footer-col > a:not(.v2-donate) {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}

.v2-footer-col > a:not(.v2-donate):hover,
.v2-footer-col > a:not(.v2-donate):focus-visible {
  color: var(--accent);
  text-decoration: underline;
}

/* The pill's text starts level with the other columns' first links. Its top
   padding and smaller type put the text 6 px lower than theirs (measured in
   renders on macOS at 390 and 1440 px); the margin lifts the pill by that,
   and the links under it follow with the column's usual gap. */
.v2-footer-donate {
  margin-top: -6px;
  padding: 5px 14px;
  font-size: 0.85rem;
}

.v2-footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.25rem 5vw 1.75rem;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.8rem;
}

.v2-totop {
  color: var(--accent) !important;
  text-decoration: none;
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  border-radius: 999px;
  padding: 5px 12px;
}

@media (prefers-reduced-motion: reduce) {
  html:has(body.fb-v2) {
    scroll-behavior: auto;
  }

  .v2-hero-net,
  .v2-hero-shots,
  .v2-slogan p,
  .v2-shot-side {
    transition: none;
  }
}