/* The wordmark's typeface, near enough.
   The KAI Golf logo is a light geometric sans -- circular O, wide tracking --
   and Jost is the closest freely licensable relative. Served from our own
   domain, never from fonts.gstatic.com: hotlinking would send every visitor's
   IP to Google on every page load, which is the transfer LG München I found
   unlawful in 2022, and this site's privacy policy names its processors.
   See static/fonts/LICENSE.md. */
@font-face {
    font-family: "Jost";
    font-style: normal;
    font-weight: 400 700;          /* one variable file covers the range */
    font-display: swap;            /* text shows immediately in the fallback */
    src: url("/static/fonts/jost-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF;
}
@font-face {
    font-family: "Jost";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/static/fonts/jost-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+1E00-1E9F,
                   U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}

/* The public site.
 *
 * Standalone from the portal's stylesheets on purpose: these pages are read by
 * people who have never signed in, and a design system built for a logged-in
 * application is the wrong furniture for a shop window.
 */
*, *::before, *::after { box-sizing: border-box; }
:root {
    --ink: #ffffff;
    --muted: #a6a6a6;
    --bg: #0b0b0b;
    --panel: #141414;
    --line: #262626;
    --brand: #cb1533;
    /* The operator pages are a different building. Cooler, quieter, and never
     * the consumer red -- somebody comparing platforms is not being sold a
     * round of golf. */
    --b2b: #2f6fb5;
    --b2b-bg: #0e131a;
}
html, body { margin: 0; padding: 0; }
body {
    background: var(--bg); color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.55; -webkit-font-smoothing: antialiased;
    /* 100vw counts the scrollbar; never use it for width. */
    overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
.wrap { width: min(1080px, 92vw); margin: 0 auto; }

/* ---- head ---- */
.site-head { border-bottom: 1px solid var(--line); background: rgba(11,11,11,.92);
             position: sticky; top: 0; z-index: 20; backdrop-filter: blur(6px); }
.site-head .wrap { display: flex; align-items: center; gap: 18px; padding: 12px 0;
                   flex-wrap: wrap; }
.site-head .brand img { width: 118px; }
.site-head nav { display: flex; gap: 18px; margin-left: auto; flex-wrap: wrap; }
.site-head nav a { text-decoration: none; font-weight: 600; font-size: 15px;
                   color: #d8d8d8; padding: 4px 0; border-bottom: 2px solid transparent; }
.site-head nav a:hover { color: #fff; }
.site-head nav a.on { color: #fff; border-bottom-color: var(--brand); }
/* The fourth door is not one of the three. */
.site-head nav a.b2b { color: #9fc0e4; }
.site-head nav a.b2b:hover { color: #cfe2f7; }
.site-head nav a.b2b.on { color: #cfe2f7; border-bottom-color: var(--b2b); }
.ghost { border: 1px solid rgba(255,255,255,.42); padding: 8px 14px; border-radius: 4px;
         text-decoration: none; font-size: 14px; font-weight: 600; white-space: nowrap; }
.ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }

/* ---- type ---- */
h1 { font-size: clamp(28px, 5.4vw, 52px); line-height: 1.07; margin: 0 0 14px;
     font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: clamp(22px, 3.4vw, 31px); margin: 0 0 8px; letter-spacing: -.01em; }
h3 { font-size: 17px; margin: 0 0 6px; }
.lead { font-size: clamp(16px, 2.1vw, 19px); color: #e2e2e2; max-width: 46ch; }
.sub { color: var(--muted); margin: 0 0 24px; max-width: 62ch; }
section { padding: 52px 0; }
.muted { color: var(--muted); }

/* ---- pieces ---- */
.cta { display: inline-block; background: var(--brand); color: #fff; padding: 14px 24px;
       border-radius: 5px; text-decoration: none; font-weight: 700; font-size: 16px; }
.cta:hover { background: #a91029; }
.cta.b2b { background: var(--b2b); }
.cta.b2b:hover { background: #24598f; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
         padding: 22px; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
/* Exactly two, not "as many as fit". `.g2` is auto-fit and puts three across
   a 1080px wrap, which leaves a four-panel price list sitting 3 + 1. */
.g2x { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .g2x { grid-template-columns: 1fr; } }

/* The header on a phone.
   It used to stack into three rows -- logo, nav wrapping onto two lines, then
   Anmelden underneath -- and took 243px of a 844px screen before the page
   began. Two rows now: the mark and the way in on the first, the five doors
   on the second, side by side.

   `nowrap` and `space-between` rather than a wrap: five doors on one line is
   the point, so they are allowed to sit tight rather than to fall over. The
   type comes down to suit, which is what makes them fit. */
@media (max-width: 760px) {
    .site-head .wrap { gap: 8px 10px; padding: 10px 0; }
    .site-head .brand { order: 1; }
    .site-head .brand img { width: 92px; display: block; }
    .site-head .ghost { order: 2; margin-left: auto; padding: 6px 12px; font-size: 13px; }
    .site-head nav { order: 3; flex: 1 0 100%; margin-left: 0; min-width: 0;
                     flex-wrap: nowrap; justify-content: space-between; gap: 4px; }
    /* Fluid, because the five words are a fixed length and the screen is not.
       A nav that will not wrap pushes the whole page sideways rather than
       overflowing quietly, so the type is what gives.

       The tightened tracking is what pays for the larger size: at -0.04em the
       words measure about 4% less, which is the difference between 11.9px and
       12.9px on a 390px screen. `gap` sets a floor under the spacing so the
       words never touch when `space-between` has nothing left to distribute. */
    .site-head nav a { font-size: clamp(10px, 3.2vw, 13.5px);
                       letter-spacing: -0.04em;
                       padding: 2px 0; white-space: nowrap; }
}

.g4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* the four doors on the front page */
.door { display: block; text-decoration: none; background: var(--panel);
        border: 1px solid var(--line); border-radius: 8px; padding: 24px;
        transition: border-color .15s, transform .15s; }
.door:hover { border-color: #3a3a3a; transform: translateY(-2px); }
.door h3 { font-size: 19px; }
.door p { color: var(--muted); margin: 0 0 16px; font-size: 15px; min-height: 3em; }
.door .go { color: var(--brand); font-weight: 700; font-size: 15px; }
.door.b2b { background: var(--b2b-bg); border-color: #1d2836; }
.door.b2b .go { color: #7fb0e4; }

/* price rows */
.rate { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0;
        border-bottom: 1px solid var(--line); }
.rate:last-child { border-bottom: none; }
.rate .what strong { display: block; }
.rate .what span { color: var(--muted); font-size: 14px; }
.rate .amount { font-weight: 700; white-space: nowrap; font-size: 17px; }
.vat-note { color: var(--muted); font-size: 13px; margin-top: 10px; }
.tier-price { font-weight: 700; font-size: 26px; letter-spacing: -.02em; }

/* seasons -- the one running now is the one being quoted */
.season-now { border-color: var(--brand); }
.season-tag { font-family: "Jost", "Futura", "Century Gothic", sans-serif;
              font-size: 11px; font-weight: 600; text-transform: uppercase;
              vertical-align: middle; }
.promo-head { margin: 16px 0 0; font-size: 13px; font-weight: 600;
              text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
/* who a run of prices is for -- a person or people, then the words. It sits
   over its rows like a heading and the rule under it does the separating,
   so the second party's block does not read as more rows of the first. */
.party-head { display: flex; align-items: center; gap: 8px; margin: 14px 0 2px;
              padding-bottom: 6px; border-bottom: 2px solid var(--brand);
              font-size: 13px; font-weight: 600; text-transform: uppercase;
              letter-spacing: .06em; color: var(--brand); }
.party-head:first-of-type { margin-top: 0; }
.party-head svg { width: 20px; height: 20px; flex-shrink: 0; }

/* coach card -- a link that looks like a panel */
.coach-card { display: flex; gap: 16px; align-items: center; text-decoration: none;
              color: inherit; transition: border-color .15s, transform .15s; }
.coach-card:hover { border-color: var(--brand); transform: translateY(-1px); }
.coach-face { width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
              flex: 0 0 72px; }
.coach-face-initials { display: grid; place-items: center; background: #1d2836;
                       font-weight: 700; font-size: 22px; }
.coach-who { display: flex; flex-direction: column; gap: 2px; }
.coach-who strong { font-size: 17px; }
.coach-more { color: var(--brand); font-size: 14px; margin-top: 4px; }

/* steps */
.steps { counter-reset: step; display: grid; gap: 14px; }
.step { display: flex; gap: 14px; align-items: flex-start; }
.step::before { counter-increment: step; content: counter(step);
    background: var(--brand); color: #fff; font-weight: 800; border-radius: 50%;
    width: 28px; height: 28px; display: grid; place-items: center; flex: none;
    font-size: 14px; }
.step div strong { display: block; }
.step div span { color: var(--muted); }

/* gallery */
.gallery img { border-radius: 8px; aspect-ratio: 1/1; object-fit: cover; width: 100%; }

/* forms */
label { display: block; font-weight: 600; margin-bottom: 5px; font-size: 15px; }
input[type=text], input[type=email], input[type=tel], textarea, select {
    width: 100%; padding: 11px 12px; border-radius: 5px; border: 1px solid var(--line);
    background: #0f0f0f; color: var(--ink); font: inherit; }
textarea { min-height: 130px; resize: vertical; }
.field { margin-bottom: 16px; }
.help { color: var(--muted); font-size: 13px; margin-top: 5px; }
.alert { border-radius: 6px; padding: 12px 14px; margin-bottom: 18px; }
.alert.ok { background: #10331e; border: 1px solid #1e5c34; }
.alert.bad { background: #341216; border: 1px solid #6b1f28; }
.review { background: #33280f; border: 1px solid #6b551f; border-radius: 6px;
          padding: 14px 16px; margin-bottom: 22px; font-size: 15px; }

/* legal pages read as documents, not as posters */
.doc { max-width: 70ch; }
.doc h2 { font-size: 20px; margin-top: 30px; }
.doc p, .doc li { color: #d5d5d5; font-size: 15px; }
.doc ol { padding-left: 20px; }
.doc li { margin-bottom: 8px; }

/* ---- foot ---- */
.site-foot { border-top: 1px solid var(--line); padding: 32px 0 48px; margin-top: 20px;
             color: var(--muted); font-size: 14px; }
.site-foot .wrap { display: grid; gap: 12px; }
.site-foot a { text-decoration: none; }
.site-foot a:hover { color: #fff; }

/* --- the booking grid on a venue's own page --- */
.book-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
             margin-bottom: 18px; }
.book-head label { font-weight: 600; }
.book-head input[type=date] { padding: 8px 10px; border-radius: 6px;
    border: 1px solid var(--line); background: var(--panel); color: var(--ink);
    font: inherit; }
.book-note { color: var(--muted); font-size: 13px; }

.boxes { display: grid; gap: 18px; }
.box-row { border-top: 1px solid var(--line); padding-top: 14px; }
.box-name { font-weight: 600; margin-bottom: 10px; }
.box-hand { margin-left: 10px; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .05em; opacity: .6; }

.slot-strip { display: flex; flex-wrap: wrap; gap: 6px; }
.slot { font: inherit; font-size: 14px; padding: 7px 11px; border-radius: 6px;
    border: 1px solid var(--line); background: var(--panel); color: var(--ink);
    cursor: pointer; transition: border-color .12s, background .12s; }
.slot:hover { border-color: var(--brand); }
.slot.on { background: var(--brand); border-color: var(--brand); color: #fff; }

.length-chooser { margin-top: 14px; padding: 14px; border-radius: 8px;
    background: var(--panel); border: 1px solid var(--line); }
.duration-head { display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.duration-title { font-weight: 600; }
.duration-party { display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600; color: var(--brand); }
.duration-party svg { width: 18px; height: 18px; flex-shrink: 0; }
.duration-options { display: flex; flex-wrap: wrap; gap: 10px; }
.book-head select { font: inherit; width: auto; padding: 8px 10px; border-radius: 6px;
    border: 1px solid var(--line); background: var(--panel); color: var(--ink); }
.duration-option { display: flex; flex-direction: column; gap: 2px;
    align-items: flex-start; font: inherit; text-align: left; cursor: pointer;
    padding: 10px 14px; border-radius: 8px; border: 1px solid var(--line);
    background: var(--bg); color: var(--ink); transition: border-color .12s; }
.duration-option:hover { border-color: var(--brand); }
.duration-length { font-weight: 700; font-size: 1.05em; }
.duration-holes { font-size: .8em; opacity: .6; }
.duration-time { font-size: .85em; opacity: .75; }
.duration-cost { font-weight: 700; margin-top: 2px; }

.basket { margin-top: 20px; }
.basket-total { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 10px; }
.basket .cta { margin-top: 14px; display: inline-block; }
/* the cross that takes a line out; the amount keeps its place beside it */
.basket .rate { align-items: center; }
.basket-remove { font: inherit; font-size: 20px; line-height: 1; width: 30px; height: 30px;
    border-radius: 6px; border: 1px solid var(--line); background: var(--panel);
    color: var(--muted); cursor: pointer; flex-shrink: 0; }
.basket-remove:hover { border-color: var(--brand); color: var(--brand); }
.hint { color: var(--muted); font-size: 14px; margin: 12px 0 0; }
.hint.is-error { color: var(--brand); }

/* What a panel is called, everywhere on the public site.
   `h3` was 17px bold and `.rate .what strong` is 16.5px bold, so a container's
   name and the lines inside it were the same thing to look at -- the title read
   as one more item in the list. The title is a label instead: red, heavy,
   spaced, with the rule doing the containing. Smaller than the items on
   purpose; making it larger would only start a fight with the prices opposite.

   The four tiles on the front page keep their own look: they are navigation,
   and `.door` is not a `.panel`, so this never reaches them. */
.panel h3 {
    /* The fallbacks are geometric too, in descending order of how likely a
       machine is to have one: a page that never loads the file should still
       look like the logo rather than like the body text. */
    font-family: "Jost", "Futura", "Century Gothic", "Avenir Next", "Trebuchet MS", sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--brand);
    margin: 0 0 4px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}
/* A tier price sits right under its name, so the rule between them is noise. */
.panel h3 + .tier-price { margin-top: 12px; }

/* The operator pages carry their own colour, and a red title on a blue page is
   two accents arguing. The rule about panel titles is the shape, not the hue. */
body.b2b-page .panel h3 { color: var(--b2b); }

/* The season tag stopped standing out the moment its heading turned red too.
   A filled pill separates it from the title without adding a third colour. */
.season-tag { background: var(--brand); color: #fff; padding: 2px 7px;
              border-radius: 3px; margin-left: 8px; letter-spacing: .06em; }