:root {
  --navy: #0E2A47;
  --red: #db2229;
  --red-dark: #b91c22;
  --blue-frame: rgba(153,190,214,.9);
  --gray-bg: #f4f6f9;
  --gray-text: #555;
  --max-w: 1200px;
  --font-h: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --font-b: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', Consolas, monospace;
  --lean-deg: -2deg;

  /* Razmak slova za naslove. Big Shoulders Display je uzan rez, a verzal nema
     ni gornje ni donje produžetke slova — bez jasnog pozitivnog razmaka se slova
     sliju u jedan blok (D-60: nigde zbijena slova). Manji naslov traži veći
     razmak. Zato ovaj font ne ide iznad debljine 800, a mali naslovi stoje na
     700: teži rez zatvara prostor u samim slovima, pa razmak ne pomaže. Male
     oznake verzalom (traka poverenja, natpisi u obrascima) nose svoj, još veći
     razmak uz sebe. Negativan razmak se ne koristi nigde, ni na brojevima. */
  --track-xl: .045em;  /* hero naslovi, od 2rem naviše */
  --track-l: .05em;    /* naslovi sekcija i tamnih blokova, 1.4–2.6rem */
  --track-m: .06em;    /* podnaslovi, 1.1–1.4rem */
  --track-s: .07em;    /* mali naslovi ispod 1.1rem */
}

@media (prefers-reduced-motion: no-preference) {
  .tilt-hover { transition: transform .3s ease, box-shadow .3s ease; position: relative; }
  .tilt-hover:hover { transform: rotate(var(--lean-deg)) translateY(-3px); z-index: 2; }

  .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
  .reveal.is-visible { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* Podnožje ostaje na dnu i na kratkim stranicama (404, potvrde, Kontakt). Bez
   ovoga se na visokom ekranu ispod podnožja vidi beo pojas, jer stranica ne
   ispuni prozor. `svh` (najmanji vidljivi prozor) umesto `vh` — `vh` na
   telefonu računa i traku pregledača, pa bi kratka stranica dobila suvišan
   skrol. Dugačke stranice se ne menjaju: `min-height` ih ne dodiruje. */
body {
  font-family: var(--font-b); color: var(--navy); overflow-x: hidden;
  min-height: 100svh; display: flex; flex-direction: column;
}
main { flex: 1 0 auto; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
/* `hidden` mora da nadjača `display` iz klase (dugmad su .btn-* sa
   `display:inline-block`), inače atribut ništa ne radi. */
[hidden] { display: none !important; }

/* Preskočna veza: prvi element koji tastatura dohvati. Bez nje korisnik bez miša
   mora kroz ceo meni na svakoj stranici pre nego što stigne do sadržaja.
   Vidljiva je tek kad dobije fokus. */
.preskoci {
  position: absolute; left: .5rem; top: -100px; z-index: 200;
  padding: .75rem 1.1rem; border-radius: .3rem;
  background: var(--navy); color: #fff;
  font-weight: 700; font-size: .9rem;
  transition: top .15s ease;
}
.preskoci:focus { top: .5rem; }
main:focus { outline: none; }

/* Tekst samo za čitače ekrana — nosi ga labela polja koje vizuelno ima samo
   placeholder. Placeholder nije labela: nestaje čim se počne kucati. */
.samo-za-citace {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Mamac za botove u svakoj formi: polje koje čovek ne vidi i ne dohvata
   tastaturom, a bot ga popuni. Skripta za slanje takvu poruku tiho odbaci. */
.mamac {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Vidljiv fokus na svemu što tastatura može da dohvati. Podrazumevani prsten
   pregledača se na crvenoj i tamnoplavoj podlozi jedva vidi. Nulta specifičnost
   (`:where`), pa pravila koja već nose svoj fokus ostaju netaknuta. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
}
.site-footer :where(a, button, input):focus-visible,
.closing-cta :where(a, button):focus-visible,
.buchung :where(a, button):focus-visible,
.seiten-kopf :where(a, button):focus-visible,
.hero-page :where(a, button):focus-visible,
.hero :where(a, button):focus-visible {
  outline-color: #fff;
}

/* ===================== HEADER ===================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.07);
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.header-inner {
  max-width: var(--max-w); margin: 0 auto;
  padding: 0 1.25rem; height: 64px;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.logo img { height: 38px; width: auto; }

.main-nav {
  display: none; position: fixed; inset: 64px 0 0 0;
  background: #fff; flex-direction: column;
  padding: 1.5rem 1.5rem 2rem; gap: 0;
  overflow-y: auto; z-index: 99;
}
.main-nav.is-open { display: flex; }
.main-nav > ul { flex-direction: column; }
/* Meni na telefonu zauzima ceo ekran, pa stavke smeju da budu krupne (20 px):
   sa 16 px je meni pokrivao samo gornju polovinu ekrana i delovao sitno. */
.main-nav > ul > li > a {
  display: block; padding: .95rem 0;
  font-weight: 600; font-size: 1.25rem;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.main-nav > ul > li > a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

.dropdown { padding-left: 1rem; }
.dropdown a {
  display: block; padding: .8rem 0; font-size: 1.05rem;
  font-weight: 600; letter-spacing: .01em;
  border-bottom: 1px solid rgba(0,0,0,.04);
  text-transform: none;
}
.has-dropdown.is-open .dropdown { display: flex; flex-direction: column; }
.has-dropdown .dropdown { display: none; }
/* Strelica je nacrtana ivicama, ne znakom ▾: znak u sitnom fontu se jedva
   video, a ovako prati veličinu slova i okreće se kad je podmeni otvoren. */
.main-nav > ul > .has-dropdown > a {
  display: flex; align-items: center; justify-content: space-between;
}
.has-dropdown > a::after {
  content: ''; flex: none;
  width: .5em; height: .5em; margin: 0 .3em -.1em .6em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-.2em) rotate(45deg);
}
.has-dropdown.is-open > a::after { transform: translateY(.1em) rotate(-135deg); }

.lang-switch { display: flex; gap: .5rem; margin-top: 1.25rem; font-size: .85rem; font-weight: 700; }
.lang-switch a { padding: .3rem .5rem; color: rgba(14,42,71,.7); }
.lang-switch a.is-active { color: var(--navy); text-decoration: underline; }

.nav-toggle {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; width: 44px; height: 44px;
  background: none; border: none; cursor: pointer; padding: 0;
}
.nav-toggle span {
  display: block; width: 24px; height: 2px;
  background: var(--navy); transition: all .3s ease; transform-origin: center;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===================== SECTION UTIL (koriste svi kasniji task-ovi) ===================== */
.section-inner { max-width: var(--max-w); margin: 0 auto; padding: 3.5rem 1.25rem; }
.section-title {
  font-family: var(--font-h); font-weight: 800;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  text-transform: uppercase; letter-spacing: var(--track-l);
  color: var(--navy); text-align: center; margin-bottom: 2.5rem;
}
/* Naslov ili dugme koje se prelomi raspoređuje reči ravnomerno po redovima, pa
   ne ostaje jedna reč sama u poslednjem redu („… Level" / „2?"). Razmak slova
   (D-60) na telefonu nekim naslovima dodaje red; ovo ga čini urednim, bez
   smanjivanja slova. Pregledač koji pravilo ne zna prelama kao i pre. */
h1, h2, h3,
.btn-primary, .btn-outline, .btn-navy, .btn-secondary-dark { text-wrap: balance; }

/* ===================== FOOTER ===================== */
.site-footer { background: var(--navy); padding: 2.5rem 1.25rem; }
.footer-inner { max-width: var(--max-w); margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; }
.footer-blurb { color: rgba(255,255,255,.7); font-size: .95rem; line-height: 1.6; max-width: 360px; }
.footer-logo img { height: 30px; width: auto; filter: brightness(0) invert(1); opacity: .75; margin-bottom: .75rem; }
/* Podnožje je iste veličine slova kao ostatak sajta (veze 16 px), ne sitnije.
   Na telefonu i tabletu „Trainings" ide preko cele širine, a „Academy" i
   „Rechtliches" stoje jedna pored druge — tako krupnija slova ne produžuju
   podnožje. Kolone su široke koliko im treba tekst (`auto`), jer bi polovina
   ekrana na 390 px prelomila „Instruktor-Ausbildung". */
.footer-cols {
  display: grid; grid-template-columns: auto auto; justify-content: start;
  gap: 2rem 3rem; flex: 1;
}
.footer-cols > :first-child { grid-column: 1 / -1; }
.footer-col h3 { font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.7); margin-bottom: .85rem; }
.footer-col ul { display: flex; flex-direction: column; gap: .6rem; }
.footer-col a { font-size: 1rem; line-height: 1.5; color: rgba(255,255,255,.8); transition: color .2s; }
.footer-col a:hover { color: #fff; }
/* Newsletter je sopstvena traka na vrhu podnožja, ne četvrta kolona veza:
   traka mora da se vidi prva i da kaže šta posetilac dobija. Dugme je crveno
   kao glavno dugme sajta. */
.footer-newsletter {
  max-width: var(--max-w); margin: 0 auto 2.5rem; padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
  display: flex; flex-direction: column; gap: 1.5rem;
  scroll-margin-top: 4.5rem;
}
.footer-newsletter h2 {
  font-family: var(--font-h); font-weight: 800;
  font-size: clamp(1.8rem, 4vw, 2.4rem); line-height: 1.05;
  text-transform: uppercase; letter-spacing: var(--track-l);
  color: #fff; margin-bottom: .6rem;
}
.footer-newsletter-text p { color: rgba(255,255,255,.8); font-size: 1rem; line-height: 1.55; }
.footer-newsletter form { display: flex; gap: .6rem; flex-wrap: wrap; }
.footer-newsletter input[type="email"] {
  flex: 1 1 14rem; min-width: 0; padding: .95rem 1rem;
  border-radius: .3rem; border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.08); color: #fff; font-size: 1rem;
}
.footer-newsletter input[type="email"]::placeholder { color: rgba(255,255,255,.55); }
.footer-newsletter button {
  flex: 0 0 auto; padding: .95rem 1.6rem;
  background: var(--red); color: #fff;
  font-family: var(--font-h); font-weight: 800; font-size: 1.05rem;
  text-transform: uppercase; letter-spacing: .08em;
  border: none; border-radius: .3rem; cursor: pointer; transition: background .2s;
}
.footer-newsletter button:hover { background: var(--red-dark); }
.footer-newsletter button:disabled { opacity: .6; cursor: default; }
.newsletter-napomena { margin-top: .7rem; font-size: .85rem; line-height: 1.5; color: rgba(255,255,255,.6); }
.newsletter-napomena a { color: rgba(255,255,255,.8); text-decoration: underline; text-underline-offset: 2px; }
.newsletter-napomena a:hover { color: #fff; }
.newsletter-status { margin-top: .7rem; font-size: .9rem; line-height: 1.55; color: rgba(255,255,255,.9); }
/* Instagram je drugi, manji put — ispod forme, da na telefonu ne stane između
   poziva i polja. */
.newsletter-instagram {
  display: inline-block; margin-top: 1.1rem; font-size: 1rem; font-weight: 600;
  color: #fff; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(255,255,255,.4);
}
.newsletter-instagram:hover { text-decoration-color: #fff; }
@media (max-width: 479px) {
  .footer-newsletter button { flex-basis: 100%; }
}
@media (min-width: 960px) {
  .footer-newsletter { flex-direction: row; align-items: center; gap: 4rem; }
  .footer-newsletter-text { flex: 1 1 0; }
  .footer-newsletter-forma { flex: 0 1 30rem; }
}
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center;
  margin-top: 1rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.1);
}
.footer-bottom a { font-size: .85rem; color: rgba(255,255,255,.7); }
.footer-bottom a:hover { color: #fff; }
.footer-social { display: flex; gap: .75rem; }
.footer-copy { font-size: .85rem; color: rgba(255,255,255,.7); margin-left: auto; }
@media (max-width: 959px) {
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; }
  .footer-copy { margin-left: 0; }
}

/* ===================== HERO PAGE (wiederverwendbar für 13 Unterseiten) ===================== */
.hero-page {
  position: relative; min-height: 64svh;
  display: flex; align-items: center;
  background: var(--navy);
  overflow: hidden;
}
/* Hero je <img> u <picture>, ne CSS pozadina: pregledač ga vidi odmah pri
   raščitavanju HTML-a (ne tek posle CSS-a) i sam bira veličinu iz `srcset`.
   Kadriranje preuzima object-fit, koje radi isto što je radio background-size. */
.hero-page-bild {
  position: absolute; inset: 0;
}
.hero-page-bild img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
}
@media (min-width: 769px) {
  .hero-page-bild img { object-position: center; }
}
/* Mobilni izvor u odnosu 9:16 (AI ilustracija na stranicama bez sopstvene
   fotografije): motiv je u donjoj polovini, pa ga `center top` gura iza teksta, a
   gornja polovina ostaje prazna. Kadar naniže vraća motiv u vidno polje. */
@media (max-width: 768px) {
  .hero-page-bild img.hero-bild-9-16 { object-position: center bottom; }
}
/* Kadar sa ljudima pri dnu i nebom za tekst (Instruktor-Ausbildung): sečenje po
   visini ide odozgo, na svakoj širini, da grupa ostane cela. */
.hero-page-bild img.hero-bild-dole { object-position: center bottom; }
/* Preliv je crn, ne navy: plava boja preliva hladi celu fotografiju (D-4).
   Jačina je svesno dva puta po 15 % slabija od ranijeg navy preliva — vlasnik
   daje prednost fotografiji nad delom kontrasta teksta (D-57).
   Isti preliv kao .hero::after. */
.hero-page::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,.49) 0%, rgba(0,0,0,.23) 55%, rgba(0,0,0,.06) 100%);
  z-index: 1;
}
@media (max-width: 768px) {
  .hero-page::after { background: linear-gradient(to bottom, rgba(0,0,0,.26) 0%, rgba(0,0,0,.40) 100%); }
}
.hero-page-content {
  position: relative; z-index: 2;
  padding: 3.5rem 1.5rem; width: 100%;
  max-width: var(--max-w); margin: 0 auto;
}
.hero-page-title {
  font-family: var(--font-h); font-weight: 800;
  font-size: clamp(1.9rem, 5.5vw, 3.4rem);
  text-transform: uppercase; letter-spacing: var(--track-xl);
  line-height: 1.1; color: #fff;
  text-shadow: 0 2px 20px rgba(0,0,0,.4);
}
.hero-page-subtitle {
  margin-top: 1.1rem;
  font-family: var(--font-b); font-weight: 400;
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 8px rgba(0,0,0,.4);
  max-width: 640px; line-height: 1.65;
}
.hero-page-intro {
  margin-top: 1.25rem;
  font-family: var(--font-b); font-size: .95rem;
  color: rgba(255,255,255,.8);
  text-shadow: 0 1px 8px rgba(0,0,0,.4);
  max-width: 640px; line-height: 1.7;
}
.hero-page-ctas { margin-top: 2rem; }

/* Putanja iznad naslova: ko sa oglasa ili iz pretrage padne pravo na trening,
   vidi gde je i jednim klikom se vraća na pregled. Staje pre tekuće stranice —
   njeno ime je naslov odmah ispod. Tiha, sitna slova: orijentacija, ne poziv. */
.putanja { margin-bottom: .9rem; }
.putanja ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; }
.putanja li {
  font-family: var(--font-b); font-weight: 600; font-size: .85rem;
  color: rgba(255,255,255,.85); text-shadow: 0 1px 8px rgba(0,0,0,.4);
}
.putanja li + li::before { content: '/'; margin: 0 .55rem; opacity: .6; }
/* Visina reda drži metu od najmanje 24 px, kao ostale sitne veze na sajtu. */
.putanja a { display: inline-block; padding: .2rem 0; line-height: 1.4; }
.putanja a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.putanja a:focus-visible { outline-color: #fff; }
.hero-page-subtitle a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

/* ===================== DESKTOP ===================== */
/* Traka sa menijem tek od 1100 px: nemački nazivi stavki ispod te širine ne
   staju u jedan red, pa je pri 960 px logo bio sabijen na pola. Ispod 1100 px
   (i tablet položen vodoravno) ostaje meni-dugme. */
@media (min-width: 1100px) {
  .header-inner { height: 72px; }
  .logo img { height: 44px; }
  .nav-toggle { display: none; }
  .main-nav {
    display: flex !important; position: static;
    flex-direction: row; align-items: center;
    padding: 0; gap: 0; background: none; overflow: visible;
  }
  .main-nav > ul { display: flex; flex-direction: row; }
  /* Na desktopu put do naslovne je logo; traka nema mesta za još jednu stavku.
     Crveno dugme „Termine" je iz trake izbačeno kad je ušao „Wissen" (vlasnik
     21.09.2026): sa njim je na 1100 px između logoa i menija ostajalo 16 px. */
  .nav-startseite { display: none; }
  .main-nav > ul > li > a {
    padding: .4rem .75rem; border-bottom: none;
    font-size: 1rem; white-space: nowrap;
  }
  .main-nav > ul > .has-dropdown > a { display: inline-flex; }
  .has-dropdown > a::after { width: .38em; height: .38em; margin: 0 0 -.1em .45em; }
  .has-dropdown { position: relative; }
  .has-dropdown .dropdown {
    display: none !important; position: absolute;
    top: 100%; left: 0;
    background: #fff; min-width: 240px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    border-radius: .4rem; padding: .5rem 0; z-index: 50;
    margin-top: .5rem;
  }
  .has-dropdown .dropdown::before {
    content: ''; position: absolute; left: 0; right: 0;
    top: -.5rem; height: .5rem;
  }
  .has-dropdown:hover .dropdown,
  .has-dropdown:focus-within .dropdown { display: flex !important; flex-direction: column; }
  .has-dropdown .dropdown a { padding: .7rem 1.1rem; border-bottom: none; white-space: nowrap; }
  .lang-switch { margin-top: 0; margin-left: .75rem; }
}
@media (min-width: 960px) {
  .footer-inner { flex-direction: row; align-items: flex-start; flex-wrap: wrap; }
  .footer-cols { display: flex; flex-direction: row; justify-content: flex-end; gap: 3rem; }
  .footer-bottom { width: 100%; }
}

/* ===================== HERO ===================== */
.hero {
  position: relative; min-height: 92svh;
  display: flex; align-items: center;
  background: var(--navy);
  overflow: hidden;
}
.hero-bild {
  position: absolute; inset: 0;
}
.hero-bild img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
}
@media (min-width: 769px) {
  .hero-bild img { object-position: center; }
}
.hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,.49) 0%, rgba(0,0,0,.23) 55%, rgba(0,0,0,.06) 100%);
  z-index: 1;
}
@media (max-width: 768px) {
  .hero::after { background: linear-gradient(to bottom, rgba(0,0,0,.26) 0%, rgba(0,0,0,.40) 100%); }
}
.hero-content {
  position: relative; z-index: 2;
  padding: 3rem 1.5rem; width: 100%;
  max-width: var(--max-w); margin: 0 auto;
}
.hero-title { display: block; }
.hero-title-main {
  display: block;
  font-family: var(--font-h); font-weight: 800;
  font-size: clamp(2rem, 7vw, 4.8rem);
  text-transform: uppercase; letter-spacing: var(--track-xl);
  line-height: 1.02; color: #fff;
  text-shadow: 0 2px 20px rgba(0,0,0,.4);
  position: relative;
  padding-left: clamp(14px, 2.5vw, 30px);
  padding-bottom: clamp(10px, 1.5vw, 18px);
  transform-origin: left bottom;
}
/* Signature: naslov se "ispravlja" iz nagiba u nivo pri učitavanju —
   doslovna referenca na Schräglage/kontrolu nagiba. Jednom, ne u petlji. */
@media (prefers-reduced-motion: no-preference) {
  .hero-title-main {
    animation: hero-right-up .9s cubic-bezier(.2,.7,.3,1) both;
    animation-delay: .1s;
  }
  .hero-title-sub, .hero-claim, .hero-ctas {
    animation: hero-fade-up .7s ease both;
    animation-delay: .5s;
  }
}
@keyframes hero-right-up {
  from { transform: rotate(var(--lean-deg)) translateY(14px); opacity: 0; }
  to { transform: rotate(0deg) translateY(0); opacity: 1; }
}
@keyframes hero-fade-up {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.hero-title-main::before {
  content: ''; position: absolute; z-index: -1;
  left: clamp(-8px, -1.2vw, -15px);
  bottom: clamp(-6px, -1vw, -12px);
  top: clamp(6px, 1vw, 14px);
  width: 62%;
  border-left: clamp(24px, 3.5vw, 40px) solid var(--blue-frame);
  border-bottom: clamp(24px, 3.5vw, 40px) solid var(--blue-frame);
}
.hero-title-sub {
  display: block; margin-top: .75rem;
  font-family: var(--font-b); font-weight: 400;
  font-size: clamp(1rem, 2.2vw, 1.3rem);
  color: rgba(255,255,255,.88);
  text-shadow: 0 1px 8px rgba(0,0,0,.4);
}
.hero-claim {
  margin-top: 1.5rem;
  font-family: var(--font-h); font-weight: 800;
  font-size: clamp(1.1rem, 2.6vw, 1.5rem);
  text-transform: uppercase; letter-spacing: .1em;
  color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.45);
}
.hero-ctas { margin-top: 2.25rem; }
.btn-primary {
  display: inline-block;
  padding: 1.15rem 2.4rem;
  background: var(--red); color: #fff;
  font-family: var(--font-h);
  font-weight: 800; font-size: 1.05rem;
  text-transform: uppercase; letter-spacing: .08em;
  border-radius: .3rem;
  /* Senka je neutralna (tamnoplava), ne crvena: senka u boji dugmeta se ne
     čita kao senka nego kao oreol koji curi na podlogu. Uska je i slaba —
     zadatak joj je da odvoji dugme od pozadine, ne da svetli. */
  box-shadow: 0 2px 8px rgba(14,42,71,.18);
  transition: all .25s;
}
.btn-primary:hover {
  background: var(--red-dark); transform: translateY(-2px);
  box-shadow: 0 5px 14px rgba(14,42,71,.22);
}

@media (min-width: 769px) {
  /* Hero-foto je banner-format (2560x1080) — visina prati taj omer umesto
     fiksne 92svh, da se slika uvek prikaže cela bez sečenja i bez praznog
     prostora. */
  .hero { min-height: 0; aspect-ratio: 2560 / 1080; }
}

/* ===================== TRUST BAR ===================== */
.trust-bar { background: #fff; border-bottom: 1px solid rgba(14,42,71,.08); }
.trust-inner {
  max-width: var(--max-w); margin: 0 auto;
  padding: 2.75rem 1.25rem;
  display: flex; flex-direction: column; align-items: center; gap: 1.75rem;
}
.trust-item {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  text-align: center;
}
.trust-num {
  font-family: var(--font-h); font-weight: 800;
  font-size: clamp(2rem, 4vw, 2.6rem); line-height: 1;
  letter-spacing: .03em; color: var(--navy);
}
.trust-label {
  font-family: var(--font-b); font-weight: 600; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--gray-text); white-space: nowrap;
}
.trust-sep { display: none; }

/* Hub-varijanta: iste tri stavke po spec-u, ali podaci za ODLUKU (veličina grupe,
   struktura nivoa, domet), ne brend-dokaz kao na Home — da traka ne ponovi Home.
   Duži labeli smeju da se prelome. */
.trust-bar--facts .trust-num { font-size: clamp(1.7rem, 3.2vw, 2.1rem); }
.trust-bar--facts .trust-label { white-space: normal; max-width: 15rem; }

@media (min-width: 640px) {
  .trust-inner { flex-direction: row; justify-content: center; align-items: center; flex-wrap: wrap; gap: 3rem; }
  .trust-sep { display: block; width: 1px; height: 2.75rem; background: rgba(14,42,71,.12); }
}

/* ===================== WARUM ===================== */
.warum { background: #fff; }
.warum-lead {
  text-align: center; color: var(--gray-text);
  max-width: 680px; margin: -1.5rem auto 3rem;
  font-size: 1.02rem; line-height: 1.75;
}
.warum-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
.warum-item { padding-left: 1.25rem; border-left: 3px solid var(--blue-frame); }
.warum-item h3 {
  font-family: var(--font-h); font-weight: 700;
  font-size: 1.1rem; text-transform: uppercase; letter-spacing: var(--track-m);
  color: var(--navy); margin-bottom: .5rem;
}
.warum-item p { font-size: .94rem; color: var(--gray-text); line-height: 1.7; }

@media (min-width: 768px) {
  .warum-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ===================== BRAND CTA ===================== */
/* Bela, jer je iznad nje siva sekcija o timu (.team-teaser) — podloge na
   naslovnoj se smenjuju, pa se dve sekcije iste boje ne slivaju u jednu. */
.brand-cta { background: #fff; }
.brand-cta-inner { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; padding-top: 3.5rem; padding-bottom: 3.5rem; }
.brand-cta-img { border-radius: .6rem; width: 100%; max-width: 420px; aspect-ratio: 1/1; object-fit: cover; margin: 0 auto; }
.brand-cta-text h2 {
  font-family: var(--font-h); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.5rem, 3.5vw, 2rem); letter-spacing: var(--track-l);
  color: var(--navy); margin-bottom: 1rem; line-height: 1.15;
}
.brand-cta-text p { color: var(--gray-text); font-size: .96rem; line-height: 1.7; margin-bottom: 1.5rem; }
.btn-outline {
  display: inline-block; padding: .85rem 1.6rem;
  border: 2px solid var(--navy); color: var(--navy);
  font-family: var(--font-h); font-weight: 700; font-size: .88rem;
  text-transform: uppercase; letter-spacing: .08em; border-radius: .3rem;
  transition: all .2s;
}
.btn-outline:hover { background: var(--navy); color: #fff; }

@media (min-width: 768px) {
  .brand-cta-inner { grid-template-columns: 1fr 1fr; }
}

/* ===================== TIM NA NASLOVNOJ ===================== */
/* Isti raspored kao brand-CTA ispod nje, ali u ogledalu: na računaru tekst levo,
   fotografija desno, pa se dve susedne sekcije čitaju kao cik-cak, ne kao ponavljanje.
   Na telefonu fotografija ostaje prva, kao u svakoj sekciji sa slikom. */
.team-teaser { background: var(--gray-bg); }
@media (min-width: 768px) {
  .team-teaser .brand-cta-img { order: 2; }
}
/* Veza „Das Team kennenlernen" vodi na #team na „Über uns"; zaglavlje je lepljivo. */
#team { scroll-margin-top: 4.5rem; }

/* ===================== TESTIMONIALS ===================== */
.testimonials { background: var(--gray-bg); }
/* Naslov i ocena idu zajedno kao jedan blok, pa naslov ovde nosi manji razmak
   nego inace — ocena je ono sto citat cini proverljivim, ne ukras. */
.testimonials .section-title { margin-bottom: .6rem; }
.testimonials-bewertung {
  text-align: center; margin-bottom: 2.5rem;
  color: var(--gray-text); font-size: .95rem;
}
.testimonials-bewertung a { color: var(--navy); text-decoration: underline; }
/* Unutrašnji razmak drži senku kartica unutar okvira koji seče ono što je van
   vidika; negativna margina vraća vrteški punu širinu sekcije. */
.carousel { position: relative; overflow: hidden; padding: .25rem .75rem 1.25rem; margin: 0 -.75rem; }
.carousel-track { display: flex; gap: 1.5rem; transition: transform .4s ease; }
/* Na računaru tri kartice odjednom: jedna u širokom redu ostavlja pola sekcije
   praznim, a četiri od pet citata niko ne vidi jer se strelice retko klikću.
   Na telefonu i tabletu jedna. Broj kartica u redu čita skripta odavde. */
.carousel-track .testimonial-card { flex: 0 0 100%; }
@media (min-width: 960px) {
  .carousel-track .testimonial-card { flex-basis: calc((100% - 3rem) / 3); }
}
.testimonial-card {
  background: #fff; border-radius: .75rem;
  padding: 2.25rem 1.5rem;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
}
.testimonial-quote {
  font-size: clamp(.95rem, 2vw, 1.05rem);
  color: var(--gray-text); line-height: 1.75;
  position: relative; padding-left: 1.5rem;
}
.testimonial-quote::before {
  content: '"'; position: absolute; left: 0; top: -.5rem;
  font-size: 2.8rem; color: var(--navy);
  font-family: Georgia, serif; line-height: 1;
}
.testimonial-author { margin-top: 1.25rem; }
.testimonial-name { display: block; font-weight: 700; font-size: .92rem; color: var(--navy); text-transform: uppercase; letter-spacing: var(--track-s); }
.testimonial-meta { display: block; font-size: .8rem; color: var(--gray-text); margin-top: .15rem; }
.carousel-controls { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.carousel-btn {
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 2px solid var(--navy); background: none;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: var(--navy); transition: all .2s;
}
.carousel-btn:hover { background: var(--navy); color: #fff; }
.carousel-dots { display: flex; gap: 0; }
/* Tačkica ostaje sitna kao znak, ali dugme oko nje je 24x24 — meta manja od
   toga se prstom ne pogađa. Sam krug crta `::before`, pa se veličina mete i
   veličina znaka razdvajaju. */
.carousel-dot {
  width: 24px; height: 24px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
}
.carousel-dot::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: rgba(14,42,71,.35); transition: background .2s;
}
.carousel-dot.active::before { background: var(--navy); }
.testimonials-cta { text-align: center; margin-top: 2.5rem; }

/* ===================== INSTAGRAM ===================== */
.instagram { background: #fff; }
.instagram-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.instagram-grid img { aspect-ratio: 1/1; object-fit: cover; border-radius: .4rem; }
.instagram-cta { text-align: center; margin-top: 2rem; }

/* ===================== STANDORT TEASER ===================== */
.standort-teaser { background: var(--gray-bg); }
.standort-teaser-inner { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; }
/* Lage-Karte: nije fotografija nego tabla — put A7 i A96 se ukrštaju tačno tamo
   gde je teren. Crtež je SVG u samoj stranici, ne slika iz `_slike/`: natpisi su
   sitni (na 380 px „Trainingsgelände" ima 13 px), pa bi ih rasterska kopija na
   400 px razmazala. Tekst je pravi tekst, čita ga i čitač ekrana, i prevodi se.
   Izgled je svetla kartica po vlasnikovom uzorku. Položaji u stranici su
   izračunati iz izmerene širine natpisa u ovim fontovima i ovim veličinama:
   ivica sadržaja 72 od ruba, vrhovi strelica poravnati sa njom, gornji i donji
   blok centrirani na putu, Memmingerberg završava na istoj liniji kao München.
   Promena veličine ili fonta ovde traži ponovno računanje položaja. */
.lage-karte {
  display: block; width: 100%; max-width: 380px; aspect-ratio: 1/1;
  border-radius: .9rem; margin: 0 auto;
  box-shadow: 0 0 0 1px rgba(14,42,71,.06), 0 18px 40px -18px rgba(14,42,71,.28);
}
.lage-karte .lk-put line { stroke: #b8c6d8; }
.lage-karte .lk-put path { fill: #b8c6d8; }
.lage-karte .lk-stadt {
  font-family: var(--font-h); font-weight: 800; font-size: 68px;
  letter-spacing: .05em; fill: var(--navy);
}
.lage-karte .lk-zeit {
  font-family: var(--font-b); font-weight: 500; font-size: 44px;
  fill: #5b6d85;
}
/* Tabla autoputa: Yamaha plava, bela ivica kao na pravoj tabli. */
.lage-karte .lk-tabla rect { fill: #1a56b4; stroke: #fff; stroke-width: 5; }
.lage-karte .lk-schild {
  font-family: var(--font-h); font-weight: 800; font-size: 52px;
  letter-spacing: .06em; fill: #fff;
}
.lage-karte .lk-veza { stroke: var(--red); stroke-width: 5; stroke-linecap: round; }
.lage-karte .lk-tacka { fill: var(--red); stroke: #fff; stroke-width: 8; }
.lage-karte .lk-ort {
  font-family: var(--font-h); font-weight: 800; font-size: 60px;
  letter-spacing: .05em; fill: var(--navy);
}
.lage-karte .lk-ort-sub {
  font-family: var(--font-b); font-weight: 500; font-size: 40px;
  fill: #5b6d85;
}
.standort-teaser-text h2 {
  font-family: var(--font-h); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.5rem, 3.5vw, 2rem); letter-spacing: var(--track-l);
  color: var(--navy); margin-bottom: 1rem;
}
.standort-teaser-text p { color: var(--gray-text); font-size: .96rem; line-height: 1.7; margin-bottom: 1.5rem; }

@media (min-width: 768px) {
  .standort-teaser-inner { grid-template-columns: 1fr 1fr; }
}

/* ===================== CLOSING CTA ===================== */
.closing-cta { background: linear-gradient(135deg, #0a1628 0%, #1e3a5f 100%); text-align: center; }
.closing-cta .section-inner { padding: 4rem 1.5rem; }
.closing-cta h2 { font-family: var(--font-h); font-weight: 800; text-transform: uppercase; font-size: clamp(1.6rem, 4vw, 2.4rem); letter-spacing: var(--track-l); color: #fff; margin-bottom: .75rem; }
.closing-cta p { color: rgba(255,255,255,.7); font-size: clamp(.95rem, 2vw, 1.05rem); line-height: 1.75; max-width: 600px; margin: 0 auto 2rem; }
/* Veza u tekstu (npr. ka Wissen-tekstu) mora se videti kao veza — globalno `a`
   nema podvlačenje. */
.closing-cta p a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.btn-secondary-dark {
  display: inline-block; padding: .95rem 2rem;
  background: rgba(255,255,255,.1); border: 2px solid rgba(255,255,255,.7);
  color: #fff; font-family: var(--font-h); font-weight: 700; font-size: .92rem;
  text-transform: uppercase; letter-spacing: .08em; border-radius: .3rem;
  transition: all .25s;
}
.btn-secondary-dark:hover { background: #fff; color: var(--navy); border-color: #fff; }

/* Tiha veza na tamnoj podlozi. Koristi je „Alle Termine & Standorte“ ispod
   spiska termina: to je izlaz sa stranice, ne radnja — kao dugme bi se takmičio
   sa „Buchen“ i odvodio posetioca sa mesta na kom je već odlučio. */
.link-dalje-dark {
  display: inline-block; margin-top: .35rem;
  color: rgba(255,255,255,.75); font-size: .9rem;
  text-decoration: underline; text-underline-offset: .28em;
  text-decoration-color: rgba(255,255,255,.3); transition: color .25s;
}
.link-dalje-dark:hover { color: #fff; text-decoration-color: rgba(255,255,255,.8); }

/* ===================== PORTFOLIO (Sloj 1) ===================== */
.portfolio { background: #fff; }
.portfolio-grid { display: grid; grid-template-columns: 1fr; gap: 1.75rem; }
.portfolio-card {
  background: var(--gray-bg); border-radius: .75rem; overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
}
.portfolio-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.portfolio-card-body { padding: 1.75rem; }
.portfolio-card h3 {
  font-family: var(--font-h); font-weight: 700; text-transform: uppercase;
  font-size: 1.25rem; letter-spacing: var(--track-m); color: var(--navy); margin-bottom: .6rem;
}
.portfolio-lead { color: var(--gray-text); font-size: .94rem; line-height: 1.7; margin-bottom: 1.25rem; }

/* Dve kartice sa nejednako dugim tekstom: dugmad bi inače stajala na različitim
   visinama, jer se kartice razvlače na istu visinu a sadržaj ne. */
/* `.selbstcheck-liste` je pisana kao poslednji element u svojoj kartici, pa nema
   razmak ispod. U kartici puta iza nje ide još teksta. */
.portfolio-card .selbstcheck-liste { margin-bottom: 1.25rem; }
/* Kartice sa portretom umesto akcione fotografije (Über uns — tim). Portreti su
   kvadratni; u 16:9 okviru bi se odsekle glave. */
.portfolio-grid--portraet .portfolio-card img { aspect-ratio: 1/1; }
/* Uloga ispod imena — tiša od naslova kartice, ista tipografska porodica kao
   natpisi trake poverenja (.trust-label). */
.portfolio-rolle {
  font-family: var(--font-b); font-weight: 700; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--gray-text); margin-bottom: .9rem;
}

.portfolio-grid--zwei .portfolio-card { display: flex; flex-direction: column; }
.portfolio-grid--zwei .portfolio-card-body { display: flex; flex-direction: column; flex: 1; }
.portfolio-grid--zwei .portfolio-card-body .btn-outline { margin-top: auto; align-self: flex-start; }

@media (min-width: 768px) {
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .portfolio-grid { grid-template-columns: repeat(3, 1fr); }
  /* Stranica koja nudi dva ravnopravna puta (Rennstrecke: Cremona/Modena,
     Alpentour: Penser Joch/Slowenien) drži kartice pola-pola. Bez ovoga bi dve
     kartice zauzele dve trećine i ostavile praznu trećinu — deluje kao da
     nedostaje treća. */
  .portfolio-grid--zwei { grid-template-columns: repeat(2, 1fr); }
}

/* ===================== LEVEL IM VERGLEICH (hub) =====================
   Tri nivoa po istim pitanjima, da se razlika vidi bez sklapanja iz tri kartice.
   Siva sekcija se nastavlja u „Nächste Termine" ispod: poređenje pa termini su
   jedan korak, pa među njima nema novog zaglavlja podloge.
   Na telefonu četiri kolone ne staju: svaki red postaje blok, a ime nivoa
   stoji ispred ćelije (iz `data-level`). */
.level-vergleich { background: var(--gray-bg); }
.level-vergleich + .naechste-termine .section-inner { padding-top: 0; }
.vergleich {
  max-width: 1000px; margin: 0 auto;
  background: #fff; border: 1px solid rgba(14,42,71,.1); border-radius: .75rem;
  overflow: hidden;
}
.vergleich-tabelle { width: 100%; border-collapse: collapse; table-layout: fixed; }
.vergleich-tabelle thead th, .vergleich-tabelle thead td { padding: 1.15rem 1.25rem; border-bottom: 2px solid var(--navy); }
.vergleich-tabelle thead td { width: 10.5rem; }
.vergleich-tabelle thead th {
  text-align: left; font-family: var(--font-h); font-weight: 700; font-size: 1.25rem;
  text-transform: uppercase; letter-spacing: var(--track-m); color: var(--navy);
}
.vergleich-tabelle thead a { text-decoration: underline; text-underline-offset: .2em; text-decoration-color: rgba(14,42,71,.3); }
.vergleich-tabelle thead a:hover { text-decoration-color: var(--navy); }
.vergleich-tabelle tbody th {
  text-align: left; vertical-align: top;
  font-family: var(--font-b); font-weight: 700; font-size: .76rem;
  text-transform: uppercase; letter-spacing: .09em; color: var(--gray-text);
}
.vergleich-tabelle tbody th, .vergleich-tabelle td {
  padding: 1.05rem 1.25rem; border-top: 1px solid rgba(14,42,71,.1);
}
.vergleich-tabelle tbody tr:first-child th, .vergleich-tabelle tbody tr:first-child td { border-top: none; }
.vergleich-tabelle td { vertical-align: top; font-size: .95rem; line-height: 1.6; color: var(--navy); }
.vergleich-fuss {
  padding: 1rem 1.25rem; border-top: 1px solid rgba(14,42,71,.1);
  font-size: .9rem; line-height: 1.6; color: var(--gray-text);
}
@media (max-width: 767px) {
  .vergleich-tabelle, .vergleich-tabelle tbody, .vergleich-tabelle tr,
  .vergleich-tabelle th, .vergleich-tabelle td { display: block; }
  .vergleich-tabelle thead { display: none; }
  .vergleich-tabelle tbody tr { padding: 1.1rem 1.25rem; border-top: 1px solid rgba(14,42,71,.1); }
  .vergleich-tabelle tbody tr:first-child { border-top: none; }
  .vergleich-tabelle tbody th, .vergleich-tabelle td { padding: 0; border-top: none; }
  .vergleich-tabelle tbody th { margin-bottom: .55rem; }
  .vergleich-tabelle td {
    display: grid; grid-template-columns: 4.25rem 1fr; gap: .75rem; padding: .3rem 0;
  }
  .vergleich-tabelle td::before { content: attr(data-level); font-weight: 700; font-size: .88rem; }
}

/* ===================== NÄCHSTE TERMINE (Sloj 2 — Platzhalter) ===================== */
.naechste-termine { background: var(--gray-bg); }
.termine-placeholder { text-align: center; }
.termine-placeholder p {
  color: var(--gray-text); font-size: .96rem; line-height: 1.7;
  max-width: 560px; margin: 0 auto 1.5rem;
}

/* ===================== METHODE ===================== */
.methode { background: #fff; text-align: center; }
.methode .section-inner { max-width: 720px; }
.methode p { color: var(--gray-text); font-size: 1rem; line-height: 1.75; margin-bottom: 1.5rem; }
.methode-link {
  display: inline-block; font-family: var(--font-b); font-weight: 700;
  color: var(--navy); text-decoration: underline; text-underline-offset: 3px;
  transition: text-decoration-thickness .15s;
}
.methode-link:hover { text-decoration-thickness: 2px; }

/* ===================== GRUPPEN (Fahrschulen, Gruppen, Unternehmen — hub) ===================== */
/* Ponuda koja nema svoju stranicu ni stavku u meniju mora se videti oblikom:
   fotografija pored teksta je jedina takva sekcija na hub-u, pa se ne čita kao još
   jedan pasus. Stavke nose isti plavi rub kao „Warum Fit2Ride?" (.warum-item).
   Dugme je tamnoplavo, ne crveno — crvena ostaje samo za rezervaciju (D-19). */
.gruppen { background: #fff; scroll-margin-top: 4.5rem; }
.gruppen-inner { display: grid; grid-template-columns: 1fr; gap: 2.25rem; }
.gruppen-bild img {
  display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover;
  object-position: center 40%; border-radius: .75rem;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
}
.gruppen .section-title { text-align: left; margin-bottom: 1rem; }
.gruppen-lead { color: var(--gray-text); font-size: 1.02rem; line-height: 1.75; margin-bottom: 2rem; }
.gruppen-liste { display: grid; gap: 1.5rem; margin-bottom: 2.25rem; }

/* Putokaz ispod kartica treninga — vodi do sekcije, jer do nje posetilac retko
   skroluje sam. */
.portfolio-hinweis {
  text-align: center; margin-top: 2.5rem;
  color: var(--gray-text); font-size: 1rem; line-height: 1.6;
}

/* Dve kolone tek od 960 px: na tabletu bi fotografija u užoj koloni ispala sitna i
   okružena praznim prostorom, pa se do tada sekcija slaže u jednu kolonu, sa širim
   isečkom da fotografija ne pojede ekran. */
@media (min-width: 600px) and (max-width: 959px) {
  .gruppen-bild img { aspect-ratio: 16/9; }
}
@media (min-width: 960px) {
  .gruppen-inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3.5rem; align-items: center; }
  .gruppen-bild img { aspect-ratio: 4/5; object-position: center; }
}

/* ===================== SOCIAL PROOF (Einzel, keine Karussell) ===================== */
.social-proof-single { background: var(--gray-bg); }
.social-proof-card { max-width: 640px; margin: 0 auto; }

/* ===================== TRAINING-UNTERSEITE (šablon za L1/L2/L3/Rennstrecke/
   Fahrsicherheit/Alpentour — sve klase ispod su namerno generičke, ne L1-specifične)
   ===================== */

/* Činjenice o treningu: mesto · vreme · veličina grupe (ponegde i uslov). Traka
   stoji ODMAH ISPOD hero-a, ne na fotografiji — polaznici su ih u hero-u
   previđali, a na telefonu hero već nosi naslov, podnaslov i dugme, pa bi svaki
   dodatni red prekrio fotografiju. Na svetloj podlozi kontrast ne zavisi od
   kadra, a svetla traka ispod fotografije daje predah oku (dizajn-spec §5).
   Obična slova, ne verzal — sitan verzal se čita kao natpis, a ovo je podatak.
   Plavi gornji rub je potpis sajta (kao .pull-quote); bez ikonica.
   Telefon i tablet: prvi podatak (mesto, najduži) ide preko cele širine — u pola
   širine se „87766 Memmingerberg (Allgäu)" lomi u tri reda; ostali po dva u redu,
   a ako poslednji ostane sam, i on ide preko cele širine. Od 1200 px: jedan red
   sa uspravnim linijama — ranije bi se četiri duža podatka (L2) prelomila. */
.fakten-leiste {
  background: var(--gray-bg);
  border-top: 3px solid var(--blue-frame);
}
.fakten-leiste ul {
  max-width: var(--max-w); margin: 0 auto;
  font-family: var(--font-b); font-weight: 600; font-size: 1rem;
  line-height: 1.35; color: var(--navy);
}
@media (max-width: 1199px) {
  .fakten-leiste ul { display: grid; grid-template-columns: 1fr 1fr; }
  .fakten-leiste li { padding: .95rem 1rem .95rem 1.5rem; }
  .fakten-leiste li + li { border-top: 1px solid rgba(14,42,71,.1); }
  .fakten-leiste li:first-child,
  .fakten-leiste li:last-child:nth-child(even) { grid-column: 1 / -1; }
  /* desna kolona: 3., 5. … podatak */
  .fakten-leiste li:nth-child(odd):not(:first-child) {
    padding: .95rem 1.5rem .95rem 1rem;
    border-left: 1px solid rgba(14,42,71,.1);
  }
}
@media (min-width: 1200px) {
  .fakten-leiste ul { display: flex; padding: 1.15rem 1.5rem; font-size: 1.05rem; }
  .fakten-leiste li { padding: 0 1.75rem; }
  .fakten-leiste li:first-child { padding-left: 0; }
  .fakten-leiste li + li { border-left: 1px solid rgba(14,42,71,.14); }
}

/* Was ist das? — mirna tekstualna sekcija, uža mera za čitanje */
.training-intro { background: #fff; }
.training-intro .section-inner { max-width: 760px; }
.training-intro p { color: var(--gray-text); font-size: 1rem; line-height: 1.8; }
.training-intro p + p { margin-top: 1.25rem; }

/* Istaknuti citat — plavi okvir kao potpis sajta (isti jezik kao hero-bracket),
   bez dekorativnog navodnika (taj pripada testimonijalima). */
.pull-quote {
  margin-top: 2.25rem; padding: .35rem 0 .35rem 1.5rem;
  border-left: 4px solid var(--blue-frame);
  font-family: var(--font-b); font-weight: 400; font-style: italic;
  font-size: clamp(1.02rem, 2.2vw, 1.18rem);
  line-height: 1.65; color: var(--navy);
}

/* Für wen? — koristi .warum-grid/.warum-item sa Home-a */
.zielgruppe { background: var(--gray-bg); }
.zielgruppe-lead { max-width: 760px; margin: -1.5rem auto 3rem; }
.zielgruppe-lead p { color: var(--gray-text); font-size: 1rem; line-height: 1.8; }
.zielgruppe-lead p + p { margin-top: 1.25rem; }
.zielgruppe-schluss {
  max-width: 760px; margin: 3rem auto 0;
  font-size: .98rem; line-height: 1.8; color: var(--navy); font-weight: 600;
}

/* Samoprovera pre nivoa (L2/L3): bela kartica na sivoj sekciji. Isti tanki
   navy marker kao .ergebnis-liste — bez znaka za potvrdu i bez ikonica. */
.selbstcheck {
  max-width: 760px; margin: 0 auto 3rem;
  padding: 1.75rem 1.75rem 1.5rem; background: #fff;
  border-radius: .75rem; border: 1px solid rgba(14,42,71,.1);
}
.selbstcheck h3 {
  font-family: var(--font-h); font-weight: 700;
  font-size: 1.15rem; text-transform: uppercase; letter-spacing: var(--track-m);
  color: var(--navy); margin-bottom: .5rem;
}
.selbstcheck > p { color: var(--gray-text); font-size: .96rem; line-height: 1.75; }
.selbstcheck-liste { margin-top: 1.1rem; display: flex; flex-direction: column; gap: .8rem; }
.selbstcheck-liste li {
  position: relative; padding-left: 1.6rem;
  color: var(--navy); font-size: .96rem; line-height: 1.6;
}
.selbstcheck-liste li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: .9rem; height: 2px; background: var(--navy); opacity: .55;
}
.selbstcheck-schluss { margin-top: 1.25rem; }

/* Rennstrecke „Die Bedingungen": kartica i fotografija boksa jedna pored druge.
   Na telefonu fotografija ide ispod kartice, u širem isečku; od 960 px prati
   visinu kartice, pa obe kolone završavaju u istoj liniji. */
.bedingungen-box { display: grid; gap: 1.5rem; max-width: 760px; margin: 0 auto 3rem; }
.bedingungen-box .selbstcheck { margin: 0; }
.bedingungen-bild img {
  display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover;
  object-position: center 65%; border-radius: .75rem;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
}
@media (min-width: 960px) {
  .bedingungen-box { max-width: 1040px; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 2rem; }
  .bedingungen-bild { position: relative; }
  .bedingungen-bild img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; object-position: center 60%; }
}

/* Težišta — numerisani stubovi. Broj je tipografski nosilac (Big Shoulders,
   plavi okvir-ton), ne ikonica. */
.schwerpunkte { background: #fff; }
.saeule-text p a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.schwerpunkte-lead {
  max-width: 760px; margin: -1.5rem auto 3rem;
  color: var(--gray-text); font-size: 1rem; line-height: 1.8;
}
.saeulen { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 2.75rem; }
.saeule { display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.25rem; align-items: start; }
.saeule-num {
  font-family: var(--font-h); font-weight: 800;
  font-size: clamp(2.2rem, 6vw, 3.2rem); line-height: .85;
  /* Tamnija plava od okvirne: `--blue-frame` je namenjena linijama, a kao tekst
     daje 1,96:1 na belom — broj se gubi. Ova nijansa drži isti svetao utisak
     uz čitljiv kontrast. */
  color: #4a90b8; letter-spacing: .03em;
}
.saeule-text h3 {
  font-family: var(--font-h); font-weight: 700;
  font-size: clamp(1.15rem, 2.6vw, 1.35rem);
  text-transform: uppercase; letter-spacing: var(--track-m);
  color: var(--navy); margin-bottom: .6rem; line-height: 1.15;
}
.saeule-text p { color: var(--gray-text); font-size: .96rem; line-height: 1.75; }

.ergebnis {
  max-width: 860px; margin: 3.5rem auto 0;
  padding: 2rem 1.75rem; background: var(--gray-bg); border-radius: .75rem;
}
.ergebnis h3 {
  font-family: var(--font-h); font-weight: 700;
  font-size: 1.2rem; text-transform: uppercase; letter-spacing: var(--track-m);
  color: var(--navy); margin-bottom: .6rem;
}
.ergebnis > p { color: var(--gray-text); font-size: .96rem; line-height: 1.75; }
.ergebnis-liste { margin-top: 1.25rem; display: flex; flex-direction: column; gap: .85rem; }
.ergebnis-liste li {
  position: relative; padding-left: 1.6rem;
  color: var(--navy); font-size: .96rem; line-height: 1.6;
}
/* Marker je tanka navy crtica — bez znaka za potvrdu i bez ikonica */
.ergebnis-liste li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: .9rem; height: 2px; background: var(--navy); opacity: .55;
}
/* Bez ovoga se link u kartici ne razlikuje od teksta (`a` nasleđuje boju). */
.ergebnis a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }

/* Mini-galerija treninga (fotografije uživo iz CMS-a, portretni format).
   Na mobilnom traka koja se prevlači — tri kolone na 390 px daju sličice
   premale da se išta vidi; treća fotografija namerno viri da se prevlačenje
   nasluti. Od 768 px normalna mreža 3×1. */
/* Video sa trening-dana. Uspravan je jer je i snimljen uspravno (telefon) — u
   odnosu 9:16, pa mu se širina drži na 20rem: preko toga bi na desktopu narastao
   u stub od preko 700 px. Umesto crnih traka sa strane, kadar dobija svoju
   širinu. Poster nosi prvi utisak dok se ništa ne skida. */
.training-video { background: #fff; }
.video-figur { margin: 0 auto; max-width: 20rem; }
.video-figur video {
  display: block; width: 100%; height: auto;
  border-radius: .6rem; background: var(--navy);
}
.video-figur figcaption {
  margin-top: .9rem; color: var(--gray-text);
  font-size: .92rem; line-height: 1.7; text-align: center;
}

.training-galerie { background: var(--gray-bg); }
.training-galerie .section-inner { padding-top: 0; }
.galerie-grid {
  display: grid; grid-auto-flow: column; grid-auto-columns: 72%;
  gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: .5rem; scrollbar-width: none;
}
.galerie-grid::-webkit-scrollbar { display: none; }
.galerie-grid img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: .5rem; scroll-snap-align: start; }
/* Stranice čiji je materijal sa staze položen (Rennstrecke, Fahrsicherheit,
   Alpentour). U uspravnom 4:5 okviru odseklo bi se oko 40 % širine i motocikl bi
   izašao iz kadra. */
.galerie-grid--quer img { aspect-ratio: 3/2; }

/* Program obuke (Instruktor-Ausbildung): siva sekcija koja nosi bele kartice
   `.selbstcheck` — po delovima obuke i završno po sertifikatu. Jedina razlika u
   odnosu na ostale sive sekcije je podloga, pa klasa nosi samo nju. */
.programm { background: var(--gray-bg); }

/* Danach weiter? — pokazivač na sledeći nivo */
.naechster-schritt { background: #fff; text-align: center; }
.naechster-schritt .section-inner { max-width: 720px; }
.naechster-schritt p { color: var(--gray-text); font-size: 1rem; line-height: 1.8; margin-bottom: 1.75rem; }
/* Dva ravnopravna puta dalje (L2 → L3 ili Rennstrecke) — oba sekundarna,
   crveno je rezervisano za rezervaciju (D-19). */
.schritt-ctas { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; }
/* Kartica nema donju marginu, pa bi dugme naleglo na njenu ivicu. */
.ergebnis + .schritt-ctas { margin-top: 2.5rem; }
.naechster-schritt strong { color: var(--navy); }
/* Zahvalnica posle prijave na stazu: fotografija uz tekst. Na telefonu stoji
   iznad, isečena na 4:3 da tekst ostane blizu; na računaru uspravno, pored. */
.danke, .danke .section-title { text-align: left; }
.danke .section-inner { max-width: 820px; }
.danke .schritt-ctas { justify-content: flex-start; }

/* FAQ — akordeon na native <details>, bez JS-a */
.faq { background: var(--gray-bg); }
.faq-liste { max-width: 820px; margin: 0 auto; border-top: 1px solid rgba(14,42,71,.12); }
.faq-item { border-bottom: 1px solid rgba(14,42,71,.12); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  padding: 1.15rem .25rem; cursor: pointer; list-style: none;
  font-family: var(--font-b); font-weight: 700;
  font-size: clamp(.98rem, 2vw, 1.05rem); line-height: 1.45; color: var(--navy);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--red); }
.faq-item summary:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
/* Strelica crtana CSS-om (bez ikonica/emotikona) */
.faq-item summary::after {
  content: ''; flex: none; width: .55rem; height: .55rem;
  margin-right: .35rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-.15rem, -.15rem);
  transition: transform .25s ease;
}
.faq-item[open] summary::after { transform: rotate(-135deg); }
.faq-item > p {
  padding: 0 2.5rem 1.4rem .25rem;
  color: var(--gray-text); font-size: .96rem; line-height: 1.8;
}

/* Termine + Buchung — završni blok stranice; jedini konverzioni cilj na dnu.
   Tamna gradijent-podloga kao .closing-cta (isti završetak kao Home/hub). */
/* Jedna osa: sve stoji na istoj sredini. Pasusi i spisak termina drže čitljivu
   širinu (--buchung-w); red sa podacima i linija ispod njega su širi
   (--buchung-w-siroko), da tekst u kolonama ne lomi u kratke redove. */
.buchung {
  --buchung-w: 760px; --buchung-w-siroko: 1040px;
  background: linear-gradient(135deg, #0a1628 0%, #1e3a5f 100%); text-align: center;
}
.buchung .section-inner { padding: 5rem 1.5rem 4.5rem; }
.buchung h2 {
  font-family: var(--font-h); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.9rem, 5vw, 2.9rem); letter-spacing: var(--track-l);
  color: #fff; margin-bottom: 1rem;
}
/* `balance` deli pasus na redove približne dužine — bez usamljene reči u
   poslednjem redu, koja u centriranom tekstu najviše bode oči. */
.buchung > .section-inner > p {
  color: rgba(255,255,255,.78); font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.65; max-width: var(--buchung-w); margin: 0 auto; text-wrap: balance;
}
/* Umetnut link u uvodnom pasusu tamne sekcije. Bez ovoga nasleđuje prigušenu
   boju teksta i globalni reset `a { text-decoration: none }`, pa se ničim ne
   razlikuje od običnog teksta — link koji se ne vidi ne postoji. */
.buchung > .section-inner > p a {
  color: #fff; text-decoration: underline; text-underline-offset: 3px;
}
/* Ocena sa Google-a ispod uvoda, na mestu gde se odlučuje o rezervaciji. */
.buchung > .section-inner > p.buchung-bewertung { margin-top: 1rem; font-size: .95rem; }
/* Tri ravnopravna podatka u tri jednake kolone, centrirana na osi sekcije.
   Na telefonu jedan ispod drugog. */
.buchung-fakten {
  display: grid; grid-template-columns: 1fr; gap: 2rem;
  max-width: var(--buchung-w-siroko); margin: 3.25rem auto 0;
  padding-bottom: 3.25rem; border-bottom: 1px solid rgba(255,255,255,.18);
}
.buchung-fakt dt {
  font-family: var(--font-b); font-weight: 700; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .09em;
  color: rgba(255,255,255,.5); margin-bottom: .6rem;
}
.buchung-fakt dd { color: #fff; font-size: clamp(1.1rem, 1.6vw, 1.28rem); line-height: 1.55; }
/* Cena je nosilac stavke, opis ide ispod nje — koristi je samo cenovni blok
   Instruktor-Ausbildung, gde cene stoje na stranici umesto da dolaze iz API-ja. */
.buchung-fakt dd strong {
  display: block; margin-bottom: .4rem;
  font-family: var(--font-h); font-weight: 700;
  font-size: clamp(1.6rem, 3.4vw, 2rem); line-height: 1; color: #fff;
  letter-spacing: .03em;
}
.termine-liste { max-width: var(--buchung-w, 600px); margin: 2.75rem auto 2.25rem; }
.termine-liste p {
  color: rgba(255,255,255,.78); font-size: clamp(1rem, 1.8vw, 1.1rem); line-height: 1.65;
  text-wrap: balance;
}
.termine-liste p a, .termine-leer p a {
  text-decoration: underline; text-underline-offset: .22em; transition: color .25s, text-decoration-color .25s;
}
.termine-liste p a { color: #fff; text-decoration-color: rgba(255,255,255,.45); }
.termine-liste p a:hover { text-decoration-color: #fff; }

/* Živi termini na trening-stranici — kratak spisak, samo za taj format. Svaki
   slobodan termin nosi svoje dugme „Buchen“: red bez dugmeta se čita kao
   obaveštenje, pa posetilac koji je već odlučio nema šta da klikne. Boje statusa
   iz `.termin-status--*` su odabrane za belu podlogu i na tamnoj se gube, pa
   ovaj spisak nosi svoje. */
.termine-kurz { list-style: none; margin: 0; padding: 0; }
.termine-kurz-stavka {
  display: flex; flex-direction: column; gap: .85rem;
  padding: 1.1rem 0; border-bottom: 1px solid rgba(255,255,255,.12);
}
/* Datum i status jedan ispod drugog, na svakoj širini. Kad su bili jedan pored
   drugog, duži datum je gurao status u drugi red i on je bežao ulevo — spisak
   termina se onda ne čita kao spisak nego kao niz različito složenih redova. */
/* `text-align` se nasleđuje: sekcija „Buchung" je centrirana, pa bi i ovaj
   spisak bio — a blok LOKATION/DAUER iznad njega je levo poravnat. */
.termine-kurz-podaci {
  display: flex; flex-direction: column; align-items: flex-start; gap: .2rem;
  font-size: .96rem; color: #fff; text-align: left;
}
.termine-kurz-datum { font-weight: 600; }
.termine-kurz-ort, .termine-kurz-preis { color: rgba(255,255,255,.75); font-size: .9rem; }
/* Dugme u redu je manje od glavnog na stranici — nosi jedan termin, ne celu
   sekciju — ali ostaje crveno i puno, jer je to radnja zbog koje stranica
   postoji. Na uskom ekranu ide preko cele širine: veća meta za prst. */
.termine-kurz-dugme {
  padding: .8rem 1.6rem; font-size: .92rem;
  text-align: center;
  /* Bez senke: ovaj spisak stoji na tamnoj podlozi, gde se neutralna senka ne
     vidi, a senka u boji dugmeta bi opet bila crveni oreol. */
  box-shadow: none;
}
.termine-kurz .termin-status--frei { color: #6fd39b; }
.termine-kurz .termin-status--wenige { color: #e8c56b; }
.termine-kurz .termin-status--voll { color: rgba(255,255,255,.55); }

@media (min-width: 560px) {
  /* Od ove širine datum i dugme staju jedno pored drugog bez lomljenja. */
  .termine-kurz-stavka {
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: 1.5rem;
  }
  .termine-kurz-podaci { flex: 1; }
  .termine-kurz-dugme { flex: none; }
}

@media (min-width: 768px) {
  /* auto-fit: mreža prati broj fotografija popunjenih u CMS-u. Donja mera 200px
     drži do pet slika u jednom redu (L2 ih ima pet) — sa 240px peta bi ostala
     sama u drugom redu i delovala kao greška. Šesta bi opet ostala sama:
     preporučen broj po stranici je 4, 5 ili 8. */
  .galerie-grid {
    grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-auto-columns: auto; gap: 1rem; overflow-x: visible; padding-bottom: 0;
  }
  /* Tanka uspravna linija između kolona drži ih kao tri odvojena podatka,
     i kad je tekst u njima različite dužine. */
  .buchung-fakten { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .buchung-fakt { padding: 0 1.75rem; }
  .buchung-fakt + .buchung-fakt { border-left: 1px solid rgba(255,255,255,.18); }
}
@media (max-width: 600px) {
  /* Broj stuba iznad naslova umesto pored — na uskom ekranu ostaje mesta za tekst */
  .saeule { grid-template-columns: 1fr; gap: .35rem; }
  .saeule-num { font-size: 2rem; }
}

/* ===================== ZAGLAVLJE STRANICE BEZ FOTOGRAFIJE =====================
   Prva stranica bez foto-hero-a je Kontakt: njen posao je da poruka ode, ne da
   ostavi utisak, a fotografija za nju nije ni isporučena. Isti navy prelaz kao
   `.closing-cta`, samo kompaktno i na vrhu. Iskoristivo i za pravne stranice
   (Impressum/Datenschutz/AGB) i 404, koje takođe nemaju svoju fotografiju. */
.seiten-kopf { background: linear-gradient(135deg, #0a1628 0%, #1e3a5f 100%); }
.seiten-kopf .section-inner { max-width: 820px; padding-top: 4rem; padding-bottom: 3rem; }
.seiten-kopf h1 {
  font-family: var(--font-h); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.9rem, 5vw, 3rem); letter-spacing: var(--track-xl); line-height: 1.1;
  color: #fff; margin-bottom: 1rem;
}
.seiten-kopf p { color: rgba(255,255,255,.75); font-size: 1rem; line-height: 1.75; }
.seiten-kopf p + p { margin-top: .9rem; }

/* ===================== KONTAKT ===================== */
.kontakt { background: #fff; }
.kontakt-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; }
.kontakt-grid h2 {
  font-family: var(--font-h); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.4rem, 3vw, 1.8rem); letter-spacing: var(--track-l);
  color: var(--navy); margin-bottom: .75rem;
}
.kontakt-lead { color: var(--gray-text); font-size: 1rem; line-height: 1.75; margin-bottom: 1.75rem; }

.formular { display: grid; gap: 1.15rem; }
.formular label {
  display: block; margin-bottom: .4rem;
  font-family: var(--font-b); font-weight: 700; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .07em; color: var(--navy);
}
.formular input, .formular textarea, .formular select,
.bewerbung-form input:not([type="radio"]):not([type="checkbox"]),
.bewerbung-form textarea, .bewerbung-form select {
  width: 100%; padding: .8rem .9rem;
  font-family: var(--font-b); font-size: .95rem; color: var(--navy);
  background: #fff; border: 1px solid rgba(14,42,71,.25); border-radius: .3rem;
}
.formular input:focus, .formular textarea:focus, .formular select:focus,
.bewerbung-form input:focus, .bewerbung-form textarea:focus, .bewerbung-form select:focus {
  outline: 2px solid var(--navy); outline-offset: 1px; border-color: var(--navy);
}
.formular textarea { min-height: 10rem; resize: vertical; }
.formular-hinweis { font-size: .84rem; color: var(--gray-text); line-height: 1.65; }
.formular-hinweis a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }

/* Slanje poruke je akcija ove stranice, ali crveno je rezervisano za rezervaciju
   (D-19, dizajn-spec §7) — puno navy dugme je druga jačina brenda. */
.btn-navy {
  display: inline-block; justify-self: start; padding: .95rem 2rem;
  background: var(--navy); color: #fff; border: 2px solid var(--navy);
  font-family: var(--font-h); font-weight: 700; font-size: .92rem;
  text-transform: uppercase; letter-spacing: .08em; border-radius: .3rem;
  cursor: pointer; transition: all .2s;
}
.btn-navy:hover { background: #071c31; border-color: #071c31; }

.kontakt-direkt { background: var(--gray-bg); border-radius: .75rem; padding: 2rem; align-self: start; }
.kontakt-block + .kontakt-block {
  margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(14,42,71,.1);
}
.kontakt-block dt {
  font-family: var(--font-b); font-weight: 700; font-size: .76rem;
  text-transform: uppercase; letter-spacing: .09em; color: var(--gray-text);
  margin-bottom: .45rem;
}
.kontakt-block dd { color: var(--navy); font-size: .96rem; line-height: 1.7; }
.kontakt-block dd a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.kontakt-block dd a:hover { text-decoration-thickness: 2px; }
.kontakt-block dd span { display: block; color: var(--gray-text); font-size: .88rem; }

@media (min-width: 900px) {
  /* Forma nosi više težine od spiska brojeva, pa dobija širu kolonu. */
  .kontakt-grid { grid-template-columns: 3fr 2fr; gap: 4rem; align-items: start; }
}

/* ===================== STANDORT (Memmingen) ===================== */
.standort { background: #fff; }
.standort-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; }
.standort-adresse .standort-ort {
  font-family: var(--font-h); font-weight: 700; font-size: 1.15rem;
  text-transform: uppercase; letter-spacing: var(--track-m);
  color: var(--navy); margin-bottom: .35rem;
}
.standort-adresse .standort-lage { color: var(--gray-text); font-size: .96rem; margin-bottom: 1.5rem; }
/* Razdaljine — isti tanki plavi rub kao `.selbstcheck-liste`, ali kao dl (mesto → vreme). */
.standort-wege { display: grid; gap: .55rem; }
.standort-wege div {
  display: flex; justify-content: space-between; gap: 1.5rem;
  padding: .55rem 0; border-bottom: 1px solid rgba(14,42,71,.1);
  font-size: .95rem; color: var(--navy);
}
.standort-wege dt { font-weight: 600; }
.standort-wege dd { color: var(--gray-text); white-space: nowrap; }
.standort-einzug { margin-top: 1.5rem; color: var(--gray-text); font-size: .95rem; line-height: 1.7; }
/* Pogled na teren umesto skice prilaza. Prava karta se ne ugrađuje (spoljašnji
   servis, kolačići, GDPR), a tačno mesto sastanka ionako stiže tek posle
   rezervacije — pa ovde stoji ono što posetioca stvarno zanima: kako teren izgleda. */
.standort-karte { margin: 0; }
.standort-karte img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4/3; object-fit: cover; border-radius: .6rem;
}
.standort-karte figcaption {
  margin-top: .9rem; color: var(--gray-text);
  font-size: .92rem; line-height: 1.7;
}

@media (min-width: 860px) {
  .standort-grid { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
}

/* ===================== TERMINE (Liste + Filter) ===================== */
.termine { background: var(--gray-bg); }
/* Standorte & Termine: redosled je siva lista termina → beli teren → poziv za
   nove terene, pa poziv dobija sivu podlogu da se dve bele sekcije ne spoje.
   Stoji posle `.naechster-schritt`, pa ga nadjačava. */
.wachstum { background: var(--gray-bg); }
.termine-lead { color: var(--gray-text); font-size: 1rem; line-height: 1.75; max-width: 46rem; margin: -1rem 0 2rem; }
/* Filter po formatu — pilule. Aktivna je navy puna; crveno se ne koristi
   (D-19: crveno samo za rezervaciju, ne za alat filtriranja). */
.termine-filter { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2.25rem; }
.termine-filter button {
  padding: .55rem 1.05rem; border-radius: 2rem; cursor: pointer;
  font-family: var(--font-b); font-weight: 700; font-size: .82rem;
  letter-spacing: .02em; color: var(--navy);
  background: #fff; border: 1px solid rgba(14,42,71,.25);
  transition: all .18s;
}
.termine-filter button:hover { border-color: var(--navy); }
.termine-filter button.is-active { background: var(--navy); color: #fff; border-color: var(--navy); }

/* Jedan termin. Nosi naziv + jednu rečenicu razlike + preduslov (smernica C2),
   ne samo datum/cenu — jer neki posetioci dolaze date-first (Google). Skriva se
   kad ne odgovara aktivnom filteru (JS prebacuje `hidden`). */
.termin {
  display: grid; grid-template-columns: 1fr; gap: .75rem 1.5rem;
  background: #fff; border: 1px solid rgba(14,42,71,.1); border-radius: .6rem;
  padding: 1.4rem 1.6rem; margin-bottom: 1rem;
}
/* Isti mali naslov kao `.portfolio-card h3` (D-60): uzan naslovni font radi samo
   velikim slovima i sa jasnim razmakom — malim slovima se slova slivaju. */
.termin-kopf h3 {
  font-family: var(--font-h); font-weight: 700; font-size: 1.2rem;
  text-transform: uppercase; letter-spacing: var(--track-m);
  color: var(--navy); margin-bottom: .3rem;
}
.termin-kopf h3 a {
  color: inherit; text-decoration: underline; text-underline-offset: .2em;
  text-decoration-color: transparent; transition: text-decoration-color .25s;
}
.termin-kopf h3 a:hover { text-decoration-color: currentColor; }
.termin-diff { color: var(--gray-text); font-size: .9rem; line-height: 1.6; }
.termin-voraussetzung {
  margin-top: .35rem; font-size: .8rem; color: var(--gray-text);
  text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
}
.termin-fakten { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1.25rem; font-size: .92rem; color: var(--navy); }
.termin-datum { font-size: 1.05rem; font-weight: 700; }
.termin-status { font-weight: 700; }
.termin-status--frei { color: #1a7f4b; }
.termin-status--wenige { color: #b8860b; }
.termin-status--voll { color: var(--gray-text); }
/* Dugme nosi jedan termin, ne celu stranicu — ista mera kao `.termine-kurz-dugme`,
   inače je veće od naslova treninga iznad njega. */
.termin-cta .btn-primary { padding: .8rem 1.6rem; font-size: .92rem; }
/* Cena stoji uz dugme: to je poslednje što posetilac proverava pre klika. */
/* Na uskom ekranu dugme ide preko cele širine kartice, kao u kratkoj listi na
   trening-stranici; cena ostaje iznad njega. Od 720 px stoje u redu (v. niže). */
.termin-cta { display: flex; flex-direction: column; align-items: stretch; gap: .75rem; max-width: 24rem; }
.termin-cta .btn-primary { text-align: center; }
.termin-preis { display: flex; flex-direction: column; line-height: 1.25; color: var(--navy); }
.termin-preis strong { font-size: 1.15rem; font-weight: 700; }
.termin-preis span { font-size: .78rem; color: var(--gray-text); }

/* Termin sa prijavom (D-82): rok ispod statusa, napomena o toku ispod dugmeta. */
.termin-schluss { font-size: .88rem; color: var(--gray-text); }
.termin-anmeldung { display: flex; flex-direction: column; gap: .5rem; }
.termin-anmeldung .btn-primary { text-align: center; }
.termin-hinweis { font-size: .8rem; line-height: 1.5; color: var(--gray-text); margin: 0; }

/* Od 900 px (ne ranije): u tri kolone uže od toga naziv i preduslov se lome
   u po dva reda i kartica deluje zbijeno — ispod toga ostaje raspored sa telefona. */
@media (min-width: 900px) {
  /* Svaka kartica je svoja mreža, pa kolona `auto` menja širinu sa sadržajem —
     rasprodat termin (bez dugmeta) bi pomerio datum i status udesno. Zato je
     poslednja kolona stalne širine, a dugme ima svoje mesto i kad ga nema:
     cena rasprodatog termina stoji tačno ispod cena ostalih. */
  .termin { grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) 20rem; align-items: center; }
  .termin-cta { display: grid; grid-template-columns: 1fr 12rem; align-items: center; gap: 1.5rem; }
  .termin-preis { grid-column: 1; align-items: flex-end; }
  .termin-cta .btn-primary { grid-column: 2; }
}

/* Lista čekanja na rasprodatom terminu — na kartici i u kratkom spisku na
   trening-stranici. Dugme je obrisno, ne crveno: crveno je rezervacija, a ovo
   nije. Forma se otvara tek na klik. Isti izgled nosi i dugme za Nachrückliste
   na popunjenom terminu sa prijavom (D-82). */
.warteliste { display: flex; flex-direction: column; align-items: stretch; gap: .6rem; }
.warteliste-otvori, .termin-nachrueck {
  background: none; cursor: pointer; text-align: center;
  padding: calc(.8rem - 2px) 1.6rem; font-size: .92rem;
}
.warteliste-forma { display: flex; flex-direction: column; gap: .5rem; }
.warteliste-forma input[type="email"] {
  min-width: 0; padding: .8rem 1rem; font-size: 1rem;
  border: 1px solid rgba(14,42,71,.3); border-radius: .3rem;
  background: #fff; color: var(--navy);
}
.warteliste-forma .btn-primary {
  border: none; cursor: pointer; text-align: center;
  padding: .8rem 1.6rem; font-size: .92rem;
}
.warteliste-forma .btn-primary:disabled { opacity: .6; cursor: default; transform: none; }
.warteliste-napomena { font-size: .8rem; line-height: 1.5; color: var(--gray-text); }
.warteliste-napomena a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.warteliste-status { font-size: .9rem; line-height: 1.55; font-weight: 600; color: var(--navy); }
@media (min-width: 900px) {
  /* Dugme stoji na mestu dugmeta „Buchen", a otvorena forma zauzima celu
     kolonu — 12rem je premalo za adresu. Cena ostaje u svojoj koloni. */
  .termin-cta .warteliste { grid-column: 2; }
  .termin-cta .warteliste.is-open { grid-column: 1 / -1; }
  .termin-cta .termin-anmeldung { grid-column: 2; }
}
/* Kratak spisak stoji na tamnoj podlozi. */
.termine-kurz .warteliste-otvori, .termine-kurz .termin-nachrueck {
  border-color: rgba(255,255,255,.7); color: #fff;
}
.termine-kurz .warteliste-otvori:hover, .termine-kurz .termin-nachrueck:hover {
  background: #fff; color: var(--navy);
}
.termine-kurz .warteliste-forma input[type="email"] {
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.35); color: #fff;
}
.termine-kurz .warteliste-forma input[type="email"]::placeholder { color: rgba(255,255,255,.55); }
.termine-kurz .warteliste-forma .btn-primary { box-shadow: none; }
.termine-kurz .warteliste-napomena { color: rgba(255,255,255,.7); text-align: left; }
.termine-kurz .warteliste-status { color: #fff; text-align: left; }
@media (min-width: 560px) {
  .termine-kurz .warteliste { flex: 0 1 20rem; }
}

/* Prazno stanje / lista se tek priprema (Woo Store API + CORS, v. TODO u izvoru).
   Tekst prati aktivan filter, pa se vidi da filter radi i pre nego što stignu podaci. */
.termine-leer {
  background: #fff; border: 1px dashed rgba(14,42,71,.2); border-radius: .6rem;
  padding: 2.5rem 1.6rem; text-align: center;
}
.termine-leer p { color: var(--gray-text); font-size: .96rem; line-height: 1.7; max-width: 34rem; margin: 0 auto; }
.termine-leer p a { color: var(--navy); font-weight: 600; text-decoration-color: rgba(14,42,71,.35); }
.termine-leer p a:hover { text-decoration-color: var(--navy); }

/* Prijava na newsletter u praznoj listi termina (`{{newsletter_termine:…}}`,
   `_build/build.py`): na trening-stranici u tamnom bloku za rezervaciju, na
   „Standorte & Termine" u svetloj kutiji praznog stanja. Polje i dugme u jednom
   redu dok ima mesta, kao u podnožju; na telefonu dugme ide ispod. */
.termine-newsletter {
  display: flex; flex-wrap: wrap; gap: .6rem;
  max-width: 30rem; margin: 1.5rem auto 0;
}
.termine-newsletter input[type="email"] {
  flex: 1 1 14rem; min-width: 0; padding: .8rem 1rem; font-size: 1rem;
  border: 1px solid rgba(14,42,71,.3); border-radius: .3rem;
  background: #fff; color: var(--navy);
}
.termine-newsletter .btn-primary {
  flex: 0 0 auto; border: none; cursor: pointer; text-align: center;
  padding: .8rem 1.6rem; font-size: .92rem;
}
.termine-newsletter .btn-primary:disabled { opacity: .6; cursor: default; transform: none; }
.termine-liste .termine-newsletter-napomena, .termine-leer .termine-newsletter-napomena {
  max-width: 30rem; margin: .7rem auto 0; font-size: .8rem; line-height: 1.5;
}
.termine-newsletter-napomena a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.termine-liste .termine-newsletter-status, .termine-leer .termine-newsletter-status {
  max-width: 30rem; margin: .7rem auto 0; font-size: .9rem; line-height: 1.55; font-weight: 600;
}
.termine-leer .termine-newsletter-status { color: var(--navy); }
/* Tamna podloga bloka za rezervaciju. */
.termine-liste .termine-newsletter input[type="email"] {
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.35); color: #fff;
}
.termine-liste .termine-newsletter input[type="email"]::placeholder { color: rgba(255,255,255,.55); }
.termine-liste .termine-newsletter .btn-primary { box-shadow: none; }
.termine-liste .termine-newsletter { max-width: 34rem; margin-top: 2rem; }
.termine-liste .termine-newsletter input[type="email"] { padding: 1rem 1.1rem; font-size: 1.05rem; }
.termine-liste .termine-newsletter .btn-primary { padding: 1rem 1.9rem; font-size: 1rem; }
.termine-liste .termine-newsletter-napomena { max-width: 34rem; margin-top: .85rem; font-size: .85rem; }
.termine-liste .termine-newsletter-napomena { color: rgba(255,255,255,.6); }
.termine-liste .termine-newsletter-status { color: #fff; }
@media (max-width: 479px) {
  .termine-newsletter .btn-primary { flex-basis: 100%; }
}

/* ===================== AKTIVNA NAV SEKCIJA ===================== */
/* Trajna „ovde si" oznaka na aktivnoj nav-stavci — navy podvlaka, usklađeno sa
   .lang-switch a.is-active. Bez crvene: header već nosi crveni „Termine" (i na
   Home crveni hero-CTA), pa se poštuje red-budget iz dizajn-speca. Radi na
   mobilnom i desktopu (isti selektor kao hover). */
.main-nav > ul > li > a.is-active {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* ===================== BEWERBUNG (Instruktor-Ausbildung) =====================
   Prijava od 30 pitanja u sedam koraka. Razlog za korake, a ne jednu dugu
   stranicu: kandidat vidi koliko je ostalo i ne odustaje na sredini. Bez koraka
   forma je i dalje upotrebljiva — svi koraci su u HTML-u, JavaScript samo
   sakriva one koji nisu na redu. Polja nasleđuju izgled od `.formular`
   (Kontakt), sve ostalo je ovde. */
.bewerbung-seite { background: #fff; }
.bewerbung-seite .section-inner { max-width: 820px; }

.schritt-leiste { margin-bottom: 2.75rem; }

.schritt-leiste-kopf {
  display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .7rem;
  font-family: var(--font-b); font-weight: 700; font-size: .76rem;
  text-transform: uppercase; letter-spacing: .09em; color: var(--gray-text);
}
.schritt-traka { height: 4px; background: rgba(14,42,71,.12); border-radius: 2px; }
.schritt-traka span {
  display: block; height: 100%; width: 14.3%;
  background: var(--navy); border-radius: 2px; transition: width .3s ease;
}

/* Bez JavaScript-a svi koraci ostaju vidljivi — forma se i dalje popunjava i
   šalje, samo bez podele na korake. */
.bewerbung-form.js-koraci .form-schritt { display: none; }
.bewerbung-form.js-koraci .form-schritt.is-active { display: block; }
.form-schritt + .form-schritt { margin-top: 3rem; }
.form-schritt-kopf { margin-bottom: 2rem; }
.form-schritt-kopf h2 {
  font-family: var(--font-h); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.4rem, 3.2vw, 1.9rem); letter-spacing: var(--track-l);
  color: var(--navy); margin-bottom: .4rem;
}
.form-schritt-kopf p { color: var(--gray-text); font-size: .96rem; line-height: 1.7; }

.frage + .frage { margin-top: 1.75rem; }
.frage-label {
  display: block; margin-bottom: .55rem;
  font-family: var(--font-b); font-weight: 600; font-size: 1rem;
  line-height: 1.55; color: var(--navy);
}
.frage-hinweis { display: block; margin-top: .25rem; font-weight: 400; font-size: .88rem; color: var(--gray-text); }
.pflicht { color: var(--red); margin-left: .15rem; }

/* Dva polja jedno pored drugog kad su kratka (ime/prezime, PLZ/mesto). */
.paar { display: grid; gap: 1.15rem; }
@media (min-width: 640px) { .paar { grid-template-columns: 1fr 1fr; } }

/* Ponuđeni odgovori kao dugmad-kartice: prst na telefonu pogađa celo polje,
   ne tačkicu od 12 px. */
.wahl { display: flex; flex-wrap: wrap; gap: .6rem; }
.wahl label {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .7rem 1rem; margin: 0;
  border: 1px solid rgba(14,42,71,.25); border-radius: .3rem;
  font-family: var(--font-b); font-weight: 500; font-size: .94rem;
  color: var(--navy); cursor: pointer; transition: border-color .15s, background .15s;
}
.wahl label:hover { border-color: var(--navy); }
.wahl label:has(input:checked) { border-color: var(--navy); background: var(--gray-bg); }
.wahl input { accent-color: var(--navy); width: 1rem; height: 1rem; margin: 0; }

/* Dodatno pitanje koje se otvara tek posle „Ja" — zatvoreno ne zauzima mesto. */
.folge-frage { margin-top: 1rem; padding-left: 1rem; border-left: 3px solid var(--blue-frame); }

.bestaetigung { display: grid; gap: .9rem; margin-top: 1.5rem; }
.bestaetigung label {
  display: flex; align-items: flex-start; gap: .7rem;
  font-size: .94rem; line-height: 1.6; color: var(--navy); cursor: pointer;
}
.bestaetigung input { accent-color: var(--navy); width: 1.05rem; height: 1.05rem; margin-top: .18rem; flex: none; }
.bestaetigung a { text-decoration: underline; text-underline-offset: 2px; }

.form-nav {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  margin-top: 2.75rem; padding-top: 1.75rem; border-top: 1px solid rgba(14,42,71,.1);
}
.form-nav .btn-outline { background: none; cursor: pointer; }
.form-fehler { color: var(--red-dark); font-weight: 600; font-size: .9rem; margin-top: 1rem; }
/* Poruka posle slanja forme. Uspeh je navy, ne zeleno — sajt nema treću boju. */
.formular-ok { color: var(--navy); font-weight: 600; font-size: .95rem; line-height: 1.65; }
.formular-status.form-fehler { margin-top: 0; }

/* ===================== PRAVNI TEKST =====================
   Duga ugovorna/pravna stranica: Teilnahmevereinbarung, a kasnije i Impressum,
   Datenschutz i AGB. Uža mera i veći prored, jer se ovo čita, ne prelistava. */
.rechtstext { background: #fff; }
.rechtstext .section-inner { max-width: 760px; }
/* Veza sa sajta vodi na pasus (npr. `#warteliste`); zaglavlje je lepljivo. */
.rechtstext [id] { scroll-margin-top: 5rem; }
.rechtstext-kopf {
  padding-bottom: 1.75rem; margin-bottom: 2.5rem;
  border-bottom: 1px solid rgba(14,42,71,.12);
  font-size: .92rem; line-height: 1.75; color: var(--gray-text);
}
.rechtstext h2 {
  font-family: var(--font-h); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.15rem, 2.6vw, 1.35rem); letter-spacing: var(--track-m);
  color: var(--navy); margin: 3rem 0 .9rem;
}
.rechtstext h2:first-of-type { margin-top: 0; }
.rechtstext h3 {
  font-family: var(--font-b); font-weight: 700; font-size: 1rem;
  color: var(--navy); margin: 1.75rem 0 .6rem;
}
.rechtstext p { color: var(--gray-text); font-size: .97rem; line-height: 1.85; }
.rechtstext p + p, .rechtstext ul + p, .rechtstext .rechtstext-tabelle + p { margin-top: 1.1rem; }
.rechtstext strong { color: var(--navy); }
.rechtstext a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.rechtstext ul { margin: 1.1rem 0 0; display: flex; flex-direction: column; gap: .7rem; }
.rechtstext li {
  position: relative; padding-left: 1.6rem;
  color: var(--gray-text); font-size: .97rem; line-height: 1.7;
}
.rechtstext li::before {
  content: ''; position: absolute; left: 0; top: .72em;
  width: .9rem; height: 2px; background: var(--navy); opacity: .55;
}

/* Tabela na 390 px ne staje ni u jednoj razumnoj meri — zato se prevlači u
   sopstvenom okviru umesto da razvuče celu stranicu. */
.rechtstext-tabelle { margin-top: 1.4rem; overflow-x: auto; }
.rechtstext-tabelle table { width: 100%; min-width: 480px; border-collapse: collapse; }
.rechtstext-tabelle th, .rechtstext-tabelle td {
  padding: .7rem .8rem; text-align: left; font-size: .92rem; line-height: 1.5;
  border-bottom: 1px solid rgba(14,42,71,.1);
}
.rechtstext-tabelle th {
  font-family: var(--font-b); font-weight: 700; font-size: .76rem;
  text-transform: uppercase; letter-spacing: .07em; color: var(--gray-text);
  border-bottom-width: 2px;
}
.rechtstext-tabelle td { color: var(--gray-text); }
.rechtstext-tabelle td:first-child { color: var(--navy); }

.rechtstext-fuss {
  margin-top: 3rem; padding-top: 1.75rem;
  border-top: 1px solid rgba(14,42,71,.12);
  font-size: .88rem; line-height: 1.75; color: var(--gray-text);
}

/* ===================== WISSEN (STRUČNI TEKSTOVI) =====================
   Dugi tekstovi koji se čitaju od početka do kraja (D-72): mera reda oko 70
   znakova i veći prored nego na prodajnim stranicama. Zaglavlje je
   `.seiten-kopf`, ali naslovi tekstova imaju i do 66 znakova, pa je slog manji
   nego na Kontaktu — inače naslov na telefonu zauzme ceo prvi ekran. */
article > .seiten-kopf h1 { font-size: clamp(1.7rem, 4.4vw, 2.5rem); line-height: 1.15; margin-bottom: 0; }

.wissen-text { background: #fff; }
.wissen-text .section-inner { max-width: 44rem; padding-top: 3rem; padding-bottom: 4rem; }
.wissen-text p, .wissen-text li { color: #333; font-size: 1.06rem; line-height: 1.8; }
.wissen-text p + p, .wissen-text ul + p, .wissen-text p + ul { margin-top: 1.2rem; }
.wissen-text h2 {
  font-family: var(--font-h); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.3rem, 3vw, 1.6rem); letter-spacing: var(--track-m); line-height: 1.2;
  color: var(--navy); margin: 3rem 0 1rem;
}
.wissen-text strong { color: var(--navy); }
.wissen-text a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.wissen-text ul { display: flex; flex-direction: column; gap: .8rem; }
.wissen-text li { position: relative; padding-left: 1.6rem; }
.wissen-text li::before {
  content: ''; position: absolute; left: 0; top: .85em;
  width: .9rem; height: 2px; background: var(--navy); opacity: .55;
}
/* Poslednji pasus (veza ka treningu) je u izvoru odvojen crtom — i ovde. */
.wissen-schluss {
  margin-top: 3rem; padding-top: 1.75rem;
  border-top: 1px solid rgba(14,42,71,.15);
}
.wissen-schluss p { color: var(--navy); }
.wissen-zurueck { margin-top: 2rem; }
.wissen-text .wissen-zurueck a { font-size: .95rem; font-weight: 600; }

/* Pregled: tematska polja, u svakom spisak tekstova. */
.wissen-uebersicht { background: var(--gray-bg); }
.wissen-uebersicht .section-inner { max-width: 820px; padding-top: 3.5rem; padding-bottom: 4.5rem; }
.wissen-feld + .wissen-feld { margin-top: 3rem; }
.wissen-feld h2 {
  font-family: var(--font-h); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.15rem, 2.6vw, 1.35rem); letter-spacing: var(--track-m);
  color: var(--navy); margin-bottom: 1rem;
}
.wissen-liste { display: flex; flex-direction: column; gap: .9rem; }
.wissen-liste a {
  display: block; padding: 1.3rem 1.4rem; background: #fff;
  border: 1px solid rgba(14,42,71,.1); border-left: 3px solid var(--navy);
  text-decoration: none;
}
.wissen-liste a:hover .wissen-titel { text-decoration: underline; text-underline-offset: 3px; }
.wissen-titel {
  display: block; font-family: var(--font-b); font-weight: 700;
  font-size: 1.08rem; line-height: 1.4; color: var(--navy);
}
.wissen-anriss { display: block; margin-top: .45rem; font-size: .95rem; line-height: 1.65; color: var(--gray-text); }

/* ===================== WHATSAPP-KNOPF =====================
   Plutajuće dugme na svakoj stranici, kao na dosadašnjem sajtu. Običan link na
   wa.me — nijedan skript, nijedan posrednik, ništa se ne šalje dok posetilac ne
   klikne. Zelena je boja servisa, ne brend-akcenat: crveno ostaje rezervisano za
   rezervaciju, navy za drugu jačinu brenda.
   z-index je ispod otvorene mobilne navigacije (99) i zaglavlja (100), pa ga
   otvoren meni pokriva umesto da dugme pluta preko njega. */
.wa-knopf {
  position: fixed; z-index: 90;
  /* `--consent-visina` postavlja skripta dok traka za pristanak stoji na dnu,
     da dugme ne završi ispod nje. Bez trake je 0px i ništa se ne menja. */
  right: 1.5rem;
  bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px) + var(--consent-visina, 0px));
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #25d366;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.wa-knopf svg { width: 30px; height: 30px; fill: #fff; }
.wa-knopf:hover { box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.wa-knopf:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
  .wa-knopf { transition: transform .2s ease, box-shadow .2s ease; }
  .wa-knopf:hover { transform: scale(1.08); }
}

/* ===================== TRAKA ZA TERMINE (TRENING-STRANICE) =====================
   Pravi je skripta (v. `js/main.js`), samo na stranici sa `#termine`. Na
   telefonu i tabletu stoji na dnu, gde je palac; na računaru ispod zaglavlja,
   gde oko traži meni. Dok je skrivena, `visibility` je vadi i iz tastature i iz
   čitača ekrana, ne samo iz pogleda. Crveno dugme je dozvoljeno: ovo je
   trening-stranica, izbor je informisan (D-19).
   z-index je ispod zaglavlja (100): na računaru izlazi ispod njega, a otvoren
   meni na telefonu je pokriva. */
.buchungsleiste {
  position: fixed; left: 0; right: 0; z-index: 95;
  bottom: var(--consent-visina, 0px);
  background: #fff;
  border-top: 1px solid rgba(14,42,71,.1);
  box-shadow: 0 -4px 18px rgba(0,0,0,.08);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateY(100%); visibility: hidden;
}
.buchungsleiste.is-sichtbar { transform: none; visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
  .buchungsleiste { transition: transform .3s ease, visibility .3s; }
}
.buchungsleiste-inner {
  max-width: var(--max-w); margin: 0 auto;
  padding: .65rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
/* Ime se na uskom ekranu lomi u dva reda umesto da se odseče — odsečen bi
   bio baš broj nivoa, jedino po čemu se stranice razlikuju. */
.buchungsleiste-name {
  min-width: 0; line-height: 1.15; text-wrap: balance;
  font-family: var(--font-h); font-weight: 700; font-size: 1.05rem;
  text-transform: uppercase; letter-spacing: var(--track-m); color: var(--navy);
}
.buchungsleiste .buchungsleiste-dugme {
  flex: none; padding: .7rem 1.3rem; font-size: .9rem; box-shadow: none;
}
@media (max-width: 1099px) {
  .mit-buchungsleiste .wa-knopf {
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px) + var(--consent-visina, 0px) + var(--leiste-visina, 0px));
  }
}
@media (min-width: 1100px) {
  .buchungsleiste {
    top: 72px; bottom: auto; padding-bottom: 0;
    border-top: none; border-bottom: 1px solid rgba(14,42,71,.1);
    box-shadow: 0 6px 16px rgba(0,0,0,.06);
    transform: translateY(-100%);
  }
  .buchungsleiste-inner { padding: .55rem 1.25rem; }
}

/* ===================== TRAKA ZA PRISTANAK (STATISTIKA) =====================
   Uslovi iz D-40: merenje radi za sve i bez kolačića, pristanak dodaje samo
   prepoznavanje kroz više poseta. Zato traka ne blokira stranicu prekrivačem —
   posetilac sme da čita i da je ignoriše, jer se brojanje ionako dešava
   anonimno. Traka stoji na dnu i ne pomera sadržaj (`fixed`).

   Oba dugmeta su ista klasa, ista veličina i isti položaj: odbijanje ne sme
   izgledati slabije od prihvatanja. Zato ovde nema „primarnog" i „sporednog"
   dugmeta, iako sajt tu razliku inače koristi.

   Boja: navy, ne crvena. Crvena je po dizajn-specifikaciji rezervisana
   isključivo za rezervaciju i ne širi se na drugu dugmad.

   z-index 200 je iznad zaglavlja (100) i otvorene mobilne navigacije (99) —
   traka traži odluku, pa je jedini element koji sme da stoji preko njih. */
.consent {
  position: fixed; z-index: 200;
  left: 0; right: 0; bottom: 0;
  background: #fff;
  border-top: 3px solid var(--navy);
  box-shadow: 0 -4px 24px rgba(0,0,0,.14);
  padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
}
.consent-inner {
  max-width: var(--max-w); margin: 0 auto;
  display: flex; align-items: center; gap: 2rem;
}
.consent-text h2 {
  font-family: var(--font-h); font-weight: 700;
  font-size: 1.3rem; letter-spacing: .05em;
  color: var(--navy); margin-bottom: .35rem;
}
.consent-text p {
  font-size: .88rem; line-height: 1.55; color: var(--gray-text);
}
.consent-text a {
  color: var(--navy); font-weight: 600; text-decoration: underline;
  text-underline-offset: 2px;
}
.consent-knopfe { display: flex; gap: .75rem; flex-shrink: 0; }
.consent-knopfe .btn-navy { min-width: 160px; text-align: center; }
.consent-knopfe .btn-navy:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

/* Na telefonu tekst i dugmad idu jedno ispod drugog, a dugmad dele širinu na
   pola — i dalje jednaka, samo uža. */
@media (max-width: 767px) {
  .consent { padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px)); }
  .consent-inner { flex-direction: column; align-items: stretch; gap: .9rem; }
  .consent-text h2 { font-size: 1.15rem; }
  .consent-text p { font-size: .84rem; }
  .consent-knopfe .btn-navy { flex: 1; min-width: 0; padding: .9rem 1rem; font-size: .85rem; }
}

/* ===================== DUGMAD NA TELEFONU ===================== */
/* Na telefonu je svako dugme za radnju iste mere kao dugme newslettera: preko
   cele širine, iste visine i veličine slova. Tako ne stoje neravno jedno ispod
   drugog, a svako se lako pogađa palcem. Redosled važnosti nosi boja
   (crveno = rezervacija), ne veličina. Filteri termina, vrteška recenzija,
   „Buchen" u zaglavlju, traka za pristanak i traka za termine namerno ostaju
   svoje mere.
   Pravilo stoji na kraju fajla da bi pobedilo manja dugmad u kartici termina. */
@media (max-width: 479px) {
  .btn-primary, .btn-outline, .btn-secondary-dark, .btn-navy,
  .termin-cta .btn-primary, .termine-kurz-dugme {
    display: block; width: 100%;
    padding: .95rem 1.25rem; font-size: 1.05rem; text-align: center;
  }
  /* Obrisna dugmad nose okvir od 2 px, pa im je unutrašnji razmak toliko manji —
     inače bi bila 4 px viša od crvenog. */
  .btn-outline, .btn-secondary-dark, .btn-navy {
    padding-top: calc(.95rem - 2px); padding-bottom: calc(.95rem - 2px);
  }
  .consent-knopfe .btn-navy { width: auto; padding: .9rem 1rem; font-size: .85rem; }
  /* Traka za termine je jedan red: ime treninga pored dugmeta. */
  .buchungsleiste .buchungsleiste-dugme { display: inline-block; width: auto; padding: .7rem 1.1rem; font-size: .9rem; }
}