/* TVA shared base — see README.md ("What's actually shared") for the full rationale. */

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

.tva-block {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.tva-block a {
  text-decoration: none;
}


/*
 * Turn-Verein Altheim — shared structural "skeleton" for the three
 * patterns repeated on nearly every page: the content-width wrap, the
 * hero banner, and the final CTA card.
 *
 * Each page opts in by adding these class names ALONGSIDE its own
 * existing page-scoped class (e.g. <section class="tva-v-hero tva-hero">)
 * — the page-scoped class still carries page-specific bits (the gradient/
 * background, any unique decoration like a watermark ::after). This file
 * only owns the shared shape: full-width hero/final card sitting flush
 * against the block's edges (no wrap-induced padding), with an inner
 * wrap that centers the actual content to a readable column.
 *
 * Content width: the wrap AND the hero/final card share the exact same
 * width(min(N, calc(100% - 40px))) formula, so a hero is never wider than
 * the content column that follows it — only N (the reading-column
 * max-width) varies by page. Set that per page with a custom property on
 * the page's root wrapper, e.g. #tva-xxx { --tva-content-width: 1380px }.
 * Falls back to 1180px if a page doesn't set one. (Earlier the hero was
 * `width: 100%` of the page root with no cap, which matched the wrap on
 * narrow/medium viewports but silently grew past the content column on
 * wide ones — worst on the two widest pages, 1240px/1560px.)
 */

.tva-wrap,
.tva-container {
  width: min(var(--tva-content-width, 1180px), calc(100% - 40px));
  margin: 0 auto;
}

.tva-hero,
.tva-final {
  position: relative;
  overflow: hidden;
  width: min(var(--tva-content-width, 1180px), calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(42px, 6vw, 68px) clamp(28px, 5vw, 58px);
  border-radius: 30px;
  color: #fff;
}

.tva-hero-inner,
.tva-final-inner {
  position: relative;
  z-index: 2;
}

.tva-final {
  text-align: center;
}

/* Typography defaults: every page's hero h1/p already agree on font-size
   (via their own clamp() declarations, left page-local since a couple of
   pages intentionally use a different font-family), but font-weight and
   the h1's line max-width had drifted per page. These are low-specificity
   fallbacks — a page with its own more specific h1/p rule can still
   override them, but pages that never set these get a sane default
   instead of an unconstrained, inconsistently-bold heading. */
.tva-hero h1 {
  max-width: 900px;
  font-weight: 900;
}

.tva-hero p {
  max-width: 800px;
}

@media (max-width: 700px) {
  .tva-hero,
  .tva-final {
    width: calc(100% - 28px);
    padding: 54px 22px 50px;
    border-radius: 24px;
  }

  .tva-wrap,
  .tva-container {
    width: calc(100% - 28px);
  }
}

@media (max-width: 420px) {
  .tva-hero,
  .tva-final {
    width: calc(100% - 22px);
    padding: 46px 18px 42px;
  }

  .tva-wrap,
  .tva-container {
    width: calc(100% - 22px);
  }
}


/*
 * Turn-Verein Altheim — styling for Webnode's own chrome around each block
 * (e.g. the widget's parent container), not the block's own content.
 * Webnode has no site-wide custom-CSS field the block editor can reach, so
 * this is injected by the build into every out/.../page.html right after
 * base.css, same as any other shared rule — it works because a pasted
 * <style> tag applies to the whole page DOM, not just the block it sits in.
 */

/* Webnode parent containing this HTML widget */
.s-c.s-fs.sc-w.cf {
  border-radius: 15px !important;
  overflow: hidden !important;
  padding-top: 25px !important;
  background-color: #f5f8fb !important;
}