/*
 * Landing page of germanbeachtour.de until the domain redirects to gbt.world (01.12.2026). The look of the designer's boards
 * (p2 desktop, p3 phone) with the pink accent. Text on pink is white, as the boards draw it and as Felix asked on 27.10.2026
 * (3.86:1, AA for large text only; packages/tokens sets black there); pink type only from 24 px.
 * Everything is served from /gbt-teaser/ (fonts, photos, texture); the page makes no outside requests and sets no cookies.
 * Be Vietnam Pro (SIL OFL) stands in for At Hauss Aero until GBT's licence, as on the website (fontSets.fallback).
 */
@font-face { font-family: "GBT Sans"; font-weight: 300; font-display: swap; src: url("/gbt-teaser/fonts/gbt-sans-300.woff2") format("woff2"); }
@font-face { font-family: "GBT Sans"; font-weight: 400; font-display: swap; src: url("/gbt-teaser/fonts/gbt-sans-400.woff2") format("woff2"); }
@font-face { font-family: "GBT Sans"; font-weight: 500; font-display: swap; src: url("/gbt-teaser/fonts/gbt-sans-500.woff2") format("woff2"); }
@font-face { font-family: "GBT Sans"; font-weight: 600; font-display: swap; src: url("/gbt-teaser/fonts/gbt-sans-600.woff2") format("woff2"); }
@font-face { font-family: "GBT Sans"; font-weight: 700; font-display: swap; src: url("/gbt-teaser/fonts/gbt-sans-700.woff2") format("woff2"); }

:root {
  --ground: #000000;
  --paper: #ffffff;
  --pink: #ff0065;
  --muted: rgba(255, 255, 255, 0.72);
  --line: rgba(255, 255, 255, 0.3);
  --scrim: rgba(0, 0, 0, 0.56);
  /* The board's frame at 1440 px: hairlines at 30 % and 88.3 %, content from 3.6 % to 96.5 %. */
  --pad-l: 3.6%;
  --pad-r: 3.5%;
  --col: 30%;
  --line-1: 30%;
  --line-2: 88.3%;
  --gap: clamp(16px, 1.9vw, 28px);
  --family: "GBT Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--paper);
  font-family: var(--family);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.5;
  font-synthesis: none;
}

/* Our own contour texture (apps/web/src/assets/texture-contours.svg), laid as on the website. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("/gbt-teaser/texture-contours.svg");
  background-size: clamp(1126px, 100%, 1440px) auto;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }

:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The white hairline grid of the boards. */
.page {
  min-height: 100vh;
  background-image:
    linear-gradient(90deg, transparent calc(var(--line-1) - 0.5px), var(--line) calc(var(--line-1) - 0.5px), var(--line) calc(var(--line-1) + 0.5px), transparent calc(var(--line-1) + 0.5px)),
    linear-gradient(90deg, transparent calc(var(--line-2) - 0.5px), var(--line) calc(var(--line-2) - 0.5px), var(--line) calc(var(--line-2) + 0.5px), transparent calc(var(--line-2) + 0.5px));
}

.rule { border-top: 1px solid var(--line); }

.caps {
  font-weight: 700;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Header */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(18px, 2.4vw, 34px) var(--pad-r) clamp(18px, 2.4vw, 34px) var(--pad-l);
  border-bottom: 1px solid var(--line);
}
/* The Allianz × GBT lockup (6 : 1): wide enough that "Allianz" reads on a phone. */
.top__logo { width: clamp(200px, 24vw, 340px); height: auto; }
.top__note { color: var(--paper); }

/* Hero: the photo from 21.4 %, the pink card over its left edge (p2). */
.hero {
  display: grid;
  grid-template-columns: var(--pad-l) 17.8% 17.9% 1fr var(--pad-r);
  grid-template-rows: clamp(24px, 3vw, 44px) auto 1fr;
  margin-top: clamp(24px, 3.4vw, 48px);
  padding-bottom: clamp(32px, 3.4vw, 48px);
}
.hero__photo {
  position: relative;
  grid-column: 3 / 5;
  grid-row: 1 / -1;
  aspect-ratio: 1.63;
  overflow: hidden;
  background: #1a1a1a;
}
.hero__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}
.hero__card {
  position: relative;
  grid-column: 2 / 4;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(20px, 1.9vw, 28px);
  background: var(--pink);
  color: var(--paper);
}
.hero__title {
  font-size: clamp(34px, 1.2rem + 2.6vw, 56px);
  line-height: 1.04;
  font-weight: 300;
  letter-spacing: -0.01em;
}
.hero__title strong { display: block; font-weight: 700; }
.hero__text { font-size: 16px; font-weight: 400; max-width: 34em; }
.hero__date { font-size: 18px; font-weight: 700; line-height: 1.3; }
.hero__actions { margin-top: 8px; }

/*
 * Buttons: the website's chamfered octagon (apps/web/src/styles/site/controls.css) at its sizes: a 45° chamfer of 0.3 em, at
 * most 10 px, a Semibold label of 17 px on a phone to 22.8 px at 1440, 2.18 em high and at least 44 px. The shape lives on
 * the pseudo-elements, so the focus ring is never clipped: `::before` is the fill with the line along the four sides (the
 * polygon's sides lie 4 px outside the box, so only its chamfers cut), `::after` the line along the chamfers, the band between
 * the octagon and a second one 1 px further in. Under the pointer and while pressed, fill and label swap and the line takes
 * the fill's colour.
 */
.btn {
  --chamfer: min(0.3em, 10px);
  --octagon: calc(var(--chamfer) + 4px) -4px, calc(100% - var(--chamfer) - 4px) -4px,
    calc(100% + 4px) calc(var(--chamfer) + 4px), calc(100% + 4px) calc(100% - var(--chamfer) - 4px),
    calc(100% - var(--chamfer) - 4px) calc(100% + 4px), calc(var(--chamfer) + 4px) calc(100% + 4px),
    -4px calc(100% - var(--chamfer) - 4px), -4px calc(var(--chamfer) + 4px), calc(var(--chamfer) + 4px) -4px;
  --chamfer-in: calc(var(--chamfer) + 1.4142px);
  --octagon-in: calc(var(--chamfer-in) + 2px) -2px, calc(100% - var(--chamfer-in) - 2px) -2px,
    calc(100% + 2px) calc(var(--chamfer-in) + 2px), calc(100% + 2px) calc(100% - var(--chamfer-in) - 2px),
    calc(100% - var(--chamfer-in) - 2px) calc(100% + 2px), calc(var(--chamfer-in) + 2px) calc(100% + 2px),
    -2px calc(100% - var(--chamfer-in) - 2px), -2px calc(var(--chamfer-in) + 2px), calc(var(--chamfer-in) + 2px) -2px;
  --shown-fill: var(--btn-fill);
  --shown-label: var(--btn-label);
  --shown-line: var(--btn-line);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: min(max(2.18em, 44px), max(1.2em + 24px, 44px));
  padding: min(0.4em, 12px) min(1.8em, 41px);
  color: var(--shown-label);
  font: 600 clamp(17px, 14.85px + 0.552vw, 22.8px)/1.2 var(--family);
  text-align: center;
  text-decoration: none;
  text-wrap: balance;
  -webkit-tap-highlight-color: transparent;
}
.btn::before,
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; }
.btn::before { border: 1px solid var(--shown-line); background: var(--shown-fill); clip-path: polygon(var(--octagon)); }
.btn::after { background: var(--shown-line); clip-path: polygon(evenodd, var(--octagon), var(--octagon-in)); }
/* The website's small size (15 to 17.8 px), which it gives a card's CTA: the hero card's label stays on one line. */
.btn--small { font-size: clamp(15px, 13.96px + 0.267vw, 17.8px); }
.btn--white { --btn-fill: var(--paper); --btn-label: var(--ground); --btn-line: transparent; }
.btn--pink { --btn-fill: var(--pink); --btn-label: var(--paper); --btn-line: transparent; }
@media (hover: hover) {
  .btn:hover { --shown-fill: var(--btn-label); --shown-label: var(--btn-fill); --shown-line: var(--btn-fill); }
}
.btn:active { --shown-fill: var(--btn-label); --shown-label: var(--btn-fill); --shown-line: var(--btn-fill); }

/* Sections with the title column (p2's "Tour Termine 2027"). */
.split {
  display: grid;
  grid-template-columns: var(--col) 1fr;
  padding: clamp(32px, 3.4vw, 48px) var(--pad-r) clamp(40px, 4.4vw, 64px) var(--pad-l);
}
.split__title {
  padding-right: 24px;
  font-size: clamp(32px, 1rem + 2.3vw, 52px);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.01em;
}
.split__title .accent { display: block; color: var(--pink); }
.split__title strong { display: block; font-weight: 700; }
.split__content { padding-left: clamp(0px, 1.9vw, 27px); }

/*
 * Countdown: figures, not boxes, as the website's sale countdown draws them (apps/web/src/styles/site/home.css): the number
 * in the Medium of a date, its unit in caps. Here they are the section's centrepiece, a square strip framed like the stop
 * cards below it (1.5 px white) with the board's hairlines between the units. The strip is filled with the ground, so the
 * grid's line at 88.3 % never runs behind a figure.
 */
.countdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1.5px solid var(--paper);
  background: var(--ground);
}
.countdown li {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.8vw, 12px);
  padding: clamp(16px, 1.9vw, 28px) clamp(14px, 1.4vw, 20px) clamp(14px, 1.4vw, 20px);
}
.countdown li + li { border-left: 1px solid var(--line); }
.countdown b {
  font-size: clamp(40px, 0.5rem + 4.4vw, 88px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.countdown .caps { color: var(--muted); }
.sale__lead { margin-top: 20px; max-width: 40em; font-size: 18px; }
.sale__lead strong { font-weight: 700; }
.sale__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.when-live { display: none; }
.is-live .when-live { display: block; }
.is-live .before-live { display: none; }
.is-live .btn.when-live { display: inline-flex; }

/* Feature rows (p2's stop cards): a photo under a scrim, white type, the number at the right. */
.features { display: grid; gap: clamp(12px, 1.4vw, 20px); margin: 0; padding: 0; list-style: none; }
.feature {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr auto;
  min-height: clamp(168px, 13.6vw, 196px);
  padding: clamp(12px, 1.1vw, 16px) clamp(14px, 1.2vw, 18px);
  border: 1.5px solid var(--paper);
  background-color: #1a1a1a;
  background-size: cover;
  background-position: center;
  isolation: isolate;
}
.feature::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--scrim); }
.feature--tickets { background-image: url("/gbt-teaser/feature-tickets.jpg"); background-position: 50% 62%; }
.feature--live { background-image: url("/gbt-teaser/feature-live.jpg"); background-position: 50% 30%; }
.feature--app { background-image: url("/gbt-teaser/feature-app.jpg"); background-position: 50% 70%; }
.feature h3 { font-size: clamp(32px, 1rem + 2.4vw, 52px); font-weight: 300; line-height: 1.04; }
.feature__sub { grid-column: 1; margin-top: 4px; }
.feature__line { grid-column: 1 / -1; align-self: end; margin-top: 16px; font-size: clamp(20px, 0.9rem + 1vw, 32px); font-weight: 500; line-height: 1.15; }
.feature__no { grid-column: 2; grid-row: 1; font-size: clamp(32px, 1rem + 2.3vw, 52px); font-weight: 500; line-height: 1; }

/* Footer */
.foot { padding-top: 0; }
.foot .split__title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; padding-top: 6px; }
.hosts { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 0; padding: 0; list-style: none; font-size: 22px; font-weight: 500; }
.legal { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 28px 0 0; padding: 0; list-style: none; font-size: 15px; font-weight: 400; color: var(--muted); }
.legal a { color: var(--paper); text-underline-offset: 3px; }

/* Impressum and Datenschutz: running text in the content column. */
.prose { max-width: 46em; font-size: 16px; font-weight: 300; }
.prose h2 { margin: 40px 0 10px; font-size: 22px; font-weight: 700; line-height: 1.25; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose ul { margin: 0 0 14px; }
.prose ul { padding-left: 1.2em; }
.prose strong { font-weight: 700; }
.prose a { text-underline-offset: 3px; }
.prose .stand { color: var(--muted); }
.top__home { display: block; }

/* Phones: the frame of p3 (hairlines at 4.85 % and 78.9 %, content from 9.3 %). */
@media (max-width: 760px) {
  :root { --pad-l: 9.3%; --pad-r: 5%; --line-1: 4.85%; --line-2: 78.9%; }
  body { font-size: 16px; }
  .top__note { display: none; }
  .hero { display: block; margin-top: 24px; padding: 0 var(--pad-r) 32px var(--pad-l); }
  .hero__photo { aspect-ratio: 1.25; }
  .hero__card { margin: -40px 6% 0 0; }
  .split { display: block; }
  .split__title { padding: 0 0 20px; }
  .split__content { padding-left: 0; }
  .countdown li { padding: 14px 8px 12px; }
  .countdown b { font-size: clamp(32px, 10vw, 44px); }
  /* "Sekunden" has to fit a quarter of a 320 px phone. */
  .countdown .caps { font-size: clamp(9px, 2.6vw, 11px); letter-spacing: 0; }
  .sale__lead { font-size: 17px; }
  .foot .split__title { padding: 0 0 12px; }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .hero { grid-template-columns: var(--pad-l) 12% 28% 1fr var(--pad-r); }
}

/* Below the desktop the hero card is narrow: its button takes the card's width. */
@media (max-width: 1100px) {
  .hero__actions .btn { width: 100%; padding-inline: 12px; }
}

@media (forced-colors: active), (prefers-contrast: more) {
  body::before { display: none; }
  .feature::before { background: rgba(0, 0, 0, 0.8); }
}

/* Forced colours drop the fills of the pseudo-elements: the button is drawn as its plain box. */
@media (forced-colors: active) {
  .btn { border: 1px solid; }
  .btn::before, .btn::after { display: none; }
}