/* ============================================================
   Club Ciclista El Torcal de Antequera — core stylesheet
   Brand: red #e1312d · blue #464e99 (sampled from logo)
   ============================================================ */

/* ---- Brand + system tokens ------------------------------- */
:root{
  --red:#e1312d;  --red-600:#c61f1b; --red-700:#a01210;
  /* Aufgehelltes Vereinsrot fuer dunklen Grund. Das normale Rot kommt auf
     --blue-900 nur auf 3,6:1 — zu wenig fuer kleine Grossbuchstaben mit
     weiter Laufweite, und genau als solche steht es dort (Monatskuerzel,
     Beitragsstufen). Auf hellem Grund bleibt --red unangetastet. */
  --red-300:#ef5a52;
  --blue:#464e99; --blue-600:#3a407f; --blue-700:#2b3061; --blue-900:#1a1d3f;

  --ink:#17171c;  --ink-2:#41414b;  --ink-3:#6c6c78;
  --paper:#ffffff; --cream:#f6f4ed; --cream-2:#efece1;
  --line:#e6e2d6;

  /* set by [data-accent] */
  --accent: var(--red);
  --accent-300: var(--red-300);
  --accent-600: var(--red-600);
  --accent-700: var(--red-700);
  --accent-2: var(--blue);
  --accent-2-700: var(--blue-700);

  /* set by [data-theme] */
  --head-font:"Saira Condensed", "Arial Narrow", sans-serif;
  --body-font:"Barlow", system-ui, sans-serif;
  --stencil:"Saira Stencil One", var(--head-font);
  --head-weight:800;
  --head-style:italic;
  --head-spacing:-0.01em;
  --head-transform:uppercase;
  --radius:6px;
  --radius-lg:10px;
  --btn-skew:-6deg;
  --section-pad:120px;

  --shadow-sm:0 1px 2px rgba(20,20,30,.06), 0 2px 8px rgba(20,20,30,.05);
  --shadow-md:0 6px 20px rgba(20,20,30,.10), 0 2px 6px rgba(20,20,30,.06);
  --shadow-lg:0 22px 60px rgba(20,20,30,.16), 0 6px 18px rgba(20,20,30,.08);
}

*{box-sizing:border-box;}
/* Das display:none, das der Browser [hidden] gibt, kommt aus dem
   Standard-Stylesheet und verliert gegen jede eigene Klasse mit display —
   ein Element wie .rutas__buscar{display:flex} bliebe trotz hidden sichtbar.
   Diese Zeile macht das Attribut verlaesslich, egal welche Klasse
   spaeter dazukommt. */
[hidden]{display:none !important;}
html{scroll-behavior:smooth;scroll-padding-top:84px;}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}}

body{
  margin:0;
  font-family:var(--body-font);
  color:var(--ink);
  background:var(--paper);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}

h1,h2,h3,h4{
  font-family:var(--head-font);
  font-weight:var(--head-weight);
  font-style:var(--head-style);
  text-transform:var(--head-transform);
  letter-spacing:var(--head-spacing);
  line-height:0.98;
  margin:0;
  text-wrap:balance;
}
p{margin:0 0 1em;text-wrap:pretty;}

/* ---- Layout helpers -------------------------------------- */
.wrap{max-width:1240px;margin:0 auto;padding:0 32px;}
.section{padding:var(--section-pad) 0;}
.section--cream{background:var(--cream);}
.section--ink{background:var(--blue-900);color:#fff;}

.eyebrow{
  font-family:var(--stencil);
  font-style:normal;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:14px;
  color:var(--accent);
  display:inline-flex;align-items:center;gap:10px;
  margin:0 0 18px;
}
.eyebrow::before{
  content:"";width:30px;height:3px;background:var(--accent);display:inline-block;
}
.section--ink .eyebrow{color:#fff;}
.section--ink .eyebrow::before{background:var(--accent);}
/* Auf Creme kommt das Vereinsrot nur auf 4,1:1. Bei 14px Grossbuchstaben
   mit weiter Laufweite ist das die unguenstigste Kombination, die es auf
   der Seite gibt. Das dunklere Rot der Palette bringt 5,3:1 und bleibt
   dieselbe Farbe — auf Weiss aendert sich nichts. */
.section--cream .eyebrow{color:var(--accent-600);}

.section-head{max-width:760px;margin-bottom:56px;}
.section-head h2{
  font-size:clamp(38px,5.2vw,72px);
  margin-bottom:18px;
}
.section-head .lead{font-size:20px;color:var(--ink-3);max-width:62ch;}
.section--ink .section-head .lead{color:rgba(255,255,255,.72);}

/* ---- Buttons --------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--head-font);
  font-style:normal;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:16px;
  padding:15px 26px;
  border:0;border-radius:var(--radius);
  cursor:pointer;
  transition:transform .14s ease, background .14s ease, box-shadow .14s ease, color .14s;
  transform:skewX(var(--btn-skew));
}
.btn > *{transform:skewX(calc(-1 * var(--btn-skew)));display:inline-flex;align-items:center;gap:10px;}
.btn--primary{background:var(--accent);color:#fff;box-shadow:var(--shadow-sm);}
.btn--primary:hover{background:var(--accent-700);transform:skewX(var(--btn-skew)) translateY(-2px);box-shadow:var(--shadow-md);}
.btn--ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor;}
.btn--ghost:hover{background:var(--ink);color:#fff;transform:skewX(var(--btn-skew)) translateY(-2px);}
.section--ink .btn--ghost:hover{background:#fff;color:var(--blue-900);}
.btn--block{width:100%;justify-content:center;}
.btn svg{width:18px;height:18px;}

/* ---- Navbar ---------------------------------------------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  display:flex;align-items:center;gap:24px;
  padding:14px 32px;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid transparent;
  transition:box-shadow .2s, border-color .2s, background .2s;
}
.nav.is-scrolled{box-shadow:var(--shadow-sm);border-color:var(--line);}
.nav__brand{display:flex;align-items:center;gap:13px;margin-right:auto;}
.nav__badge{
  width:48px;height:48px;border-radius:50%;
  background:#fff;border:2px solid var(--line);
  display:grid;place-items:center;flex-shrink:0;
  box-shadow:var(--shadow-sm);overflow:hidden;
}
.nav__badge img{width:40px;height:40px;object-fit:contain;}
.nav__name{display:flex;flex-direction:column;line-height:1.05;}
.nav__name b{
  font-family:var(--head-font);font-style:normal;font-weight:800;
  text-transform:uppercase;letter-spacing:.01em;font-size:18px;color:var(--ink);
}
.nav__name span{
  font-family:var(--stencil);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);
}
.nav__links{display:flex;align-items:center;gap:4px;}
.nav__links a{
  font-family:var(--head-font);font-style:normal;font-weight:600;
  text-transform:uppercase;letter-spacing:.03em;font-size:14.5px;
  padding:9px 12px;border-radius:var(--radius);color:var(--ink-2);
  white-space:nowrap;
  position:relative;transition:color .15s, background .15s;
}
.nav__links a:hover{color:var(--ink);background:rgba(0,0,0,.04);}
.nav__links a.is-active{color:var(--accent);}
.nav__tools{display:flex;align-items:center;gap:10px;}
.lang{
  display:inline-flex;border:1.5px solid var(--line);border-radius:999px;
  overflow:hidden;font-family:var(--head-font);font-style:normal;font-weight:700;
  font-size:13px;background:#fff;
}
.lang button{
  border:0;background:transparent;padding:7px 12px;cursor:pointer;
  color:var(--ink-3);letter-spacing:.04em;transition:.15s;
}
.lang button.is-active{background:var(--accent);color:#fff;}
.nav__cta{padding:11px 20px;font-size:14px;}
.nav__burger{display:none;border:0;background:transparent;cursor:pointer;padding:8px;}
.nav__burger span{display:block;width:24px;height:2.4px;background:var(--ink);margin:5px 0;transition:.2s;border-radius:2px;}

/* mobile drawer

   Die Schublade steht ausserhalb der Breitenabfrage, weil es zwei
   Umschaltpunkte gibt: die oeffentliche Leiste weicht bei 1024px ins
   Klappmenue, die des Mitgliederbereichs schon bei 1180px — sie traegt
   mehr Punkte. Lagen die Regeln in der 1024er-Abfrage, waere die
   Schublade dazwischen ein unformatierter Kasten am Seitenanfang. */
.nav__drawer{
  position:fixed;top:var(--nav-h,68px);left:0;right:0;z-index:999;
  max-height:calc(100dvh - var(--nav-h,68px));overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:#fff;border-bottom:1px solid var(--line);
  padding:18px 32px 28px;display:none;flex-direction:column;gap:6px;box-shadow:var(--shadow-lg);
}
.nav__drawer.is-open{display:flex;}
.nav__drawer a{
  font-family:var(--head-font);font-style:normal;font-weight:700;text-transform:uppercase;
  font-size:20px;padding:12px 4px;border-bottom:1px solid var(--line);
}
.nav__drawer .btn{margin-top:14px;}
@media (max-width:1024px){
  .nav__links, .nav__cta{display:none;}
  .nav__burger{display:block;}
}

/* ---- Hero ------------------------------------------------ */
.hero{position:relative;padding-top:128px;overflow:hidden;}
.hero__inner{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;
  padding-bottom:90px;}
.hero__overline{margin-bottom:22px;}
.hero h1{
  font-size:clamp(54px,8vw,116px);
  margin-bottom:24px;
}
.hero h1 .accent{color:var(--accent);}
.hero__sub{font-size:21px;color:var(--ink-2);max-width:52ch;margin-bottom:32px;}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:44px;}
.hero__stats{display:flex;gap:36px;flex-wrap:wrap;}
.hero__stat b{
  font-family:var(--head-font);font-style:italic;font-weight:800;
  font-size:42px;color:var(--accent-2);display:block;line-height:1;
}
.hero__stat span{font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);font-weight:600;}
.hero__media{position:relative;}
.hero__frame{
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);
  aspect-ratio:4/5;
  position:relative;
}
.hero__foto{width:100%;height:100%;object-fit:cover;}

/* Der Vereinsname legt sich nach ein paar Sekunden ueber das Bild.
   Darunter ein heller Schleier, und zwar aus einem bestimmten Grund: Das
   Zeichen besteht aus blauem und rotem Strich auf durchsichtigem Grund.
   Blau auf blauem Himmel — und die obere Bildhaelfte ist Himmel — waere
   nicht zu erkennen. Auf hellem Grund steht es so da, wie es entworfen
   wurde, und das Foto bleibt dahinter sichtbar. */
.hero__marca{
  position:absolute;inset:0;display:grid;place-items:center;
  /* Unten mehr Luft: Dort sitzt die rote Marke, und "DE ANTEQUERA" lief
     vorher hinein. Oben weniger, damit das Zeichen ueber dem Bogen steht
     und nicht davor. */
  padding:15% 22% 26%;
  /* Kein flaechiger Schleier, sondern einer, der zur Mitte hin dichter
     wird. So bleibt aussen vom Foto etwas uebrig — Himmel, Ziegel, die
     Hecke — und das Bild ist noch als Bild zu erkennen, nicht nur als
     Hintergrund. */
  background:radial-gradient(ellipse 76% 60% at 50% 42%,
    color-mix(in oklab, var(--cream) 90%, transparent) 0%,
    color-mix(in oklab, var(--cream) 76%, transparent) 58%,
    color-mix(in oklab, var(--cream) 24%, transparent) 100%);
  opacity:0;transition:opacity 1.6s ease;
  pointer-events:none;
}
.hero__marca.is-on{opacity:1;}
.hero__marca img{width:100%;height:100%;object-fit:contain;}
/* Wer Bewegung abbestellt hat, bekommt das Bild fertig statt ruckartig:
   Die Einblendung entfaellt, das Zeichen steht von Anfang an da. */
@media (prefers-reduced-motion:reduce){.hero__marca{transition:none;}}
.hero__tag{
  position:absolute;left:-18px;bottom:32px;background:var(--accent);color:#fff;
  font-family:var(--head-font);font-style:italic;font-weight:800;text-transform:uppercase;
  font-size:18px;padding:14px 22px;border-radius:var(--radius);box-shadow:var(--shadow-md);
  transform:skewX(var(--btn-skew));letter-spacing:.02em;
}
.hero__tag span{display:inline-block;transform:skewX(calc(-1 * var(--btn-skew)));}

/* decorative speed band behind hero (sport) */
.hero__band{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;}

/* ---- Placeholder media (striped) ------------------------- */
.ph{
  position:relative;width:100%;height:100%;
  background:
    repeating-linear-gradient(135deg,
      var(--ph-a,#e9e6dc) 0 14px,
      var(--ph-b,#e2ded2) 14px 28px);
  display:grid;place-items:center;color:var(--ink-3);
}
.ph::after{
  content:attr(data-label);
  font-family:ui-monospace,"SF Mono",Menlo,monospace;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(23,23,28,.42);
  background:rgba(255,255,255,.7);padding:7px 12px;border-radius:4px;
  backdrop-filter:blur(2px);
}
.ph--blue{--ph-a:#cfd2ea;--ph-b:#c2c6e3;}
.ph--red{--ph-a:#f0cfcd;--ph-b:#ecc4c1;}

/* ---- About ----------------------------------------------- */
.about__grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;}
/* 4:3 statt 1:1. Gruppenfotos sind quer — dreissig Leute stellen sich in
   die Breite, nicht in die Hoehe. Im quadratischen Rahmen haette der
   Beschnitt die aussen Stehenden gekostet, und das sind bei einem
   Vereinsfoto die Falschen zum Weglassen. */
.about__media{position:relative;border-radius:var(--radius-lg);overflow:hidden;
  aspect-ratio:4/3;box-shadow:var(--shadow-md);}

/* ---- Gruppenfotos nach Jahren ---------------------------- */
/* Uebereinandergelegt statt nebeneinandergeschoben: Zwischen 1994 und heute
   liegen dreissig Jahre, und ein Uebergang, bei dem ein Bild ins andere
   uebergeht, sagt das besser als eines, das das andere wegschiebt. */
.anos__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.1s ease;}
.anos__foto.is-on{opacity:1;}
/* Gruppenfotos sind mal hell, mal dunkel, mal Gegenlicht. Ohne einen
   eigenen Grund waere die Jahreszahl auf dem einen Bild lesbar und auf dem
   naechsten verschwunden. */
.anos__velo{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 58% 32% at 50% 17%,
    rgba(15,17,40,.55) 0%, rgba(15,17,40,.26) 58%, rgba(15,17,40,0) 100%);}
/* Waagerecht mittig, senkrecht ins obere Drittel. Auf einem Gruppenfoto
   steht oben fast immer Himmel oder Hauswand und unten Strasse — die
   Gesichter liegen im mittleren Band. Genau dort stand die Zahl vorher. */
.anos__anio{position:absolute;inset:0;display:grid;place-items:start center;
  padding-top:7%;
  font-family:var(--head-font);font-style:italic;font-weight:800;
  font-size:clamp(54px,10vw,116px);line-height:1;letter-spacing:.01em;
  color:#fff;text-shadow:0 2px 24px rgba(15,17,40,.45);
  pointer-events:none;
  opacity:0;transition:opacity .5s ease;}
.anos__anio.is-on{opacity:1;}
.anos__puntos{position:absolute;left:0;right:0;bottom:16px;z-index:2;
  display:flex;gap:8px;justify-content:center;}
.anos__puntos button{width:9px;height:9px;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.5);cursor:pointer;transition:.2s;}
.anos__puntos button.is-active{background:#fff;width:26px;border-radius:999px;}
@media (prefers-reduced-motion:reduce){
  .anos__foto,.anos__anio{transition:none;}}
.about__body p{font-size:18.5px;color:var(--ink-2);}
.about__values{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:34px;}
.value{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:22px;box-shadow:var(--shadow-sm);
}
.value__ic{width:42px;height:42px;border-radius:var(--radius);background:var(--accent);
  display:grid;place-items:center;margin-bottom:14px;color:#fff;}
.value__ic svg{width:22px;height:22px;}
.value:nth-child(even) .value__ic{background:var(--accent-2);}
.value h4{font-size:21px;font-style:normal;margin-bottom:6px;}
.value p{font-size:15px;color:var(--ink-3);margin:0;}

.statband{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:0;
  border-top:1px solid rgba(255,255,255,.16);}
.statband .stat{padding:40px 24px;text-align:center;border-right:1px solid rgba(255,255,255,.16);}
.statband .stat:last-child{border-right:0;}
.statband b{font-family:var(--head-font);font-style:italic;font-weight:800;font-size:58px;
  color:#fff;display:block;line-height:1;}
.statband .stat:nth-child(2) b{color:var(--accent);}
.statband .stat:nth-child(3) b{color:#fff;}
.statband span{font-size:13px;text-transform:uppercase;letter-spacing:.12em;
  color:rgba(255,255,255,.6);font-weight:600;}

/* ---- Routes ---------------------------------------------- */
.routes__bar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:40px;}
.chip{
  font-family:var(--head-font);font-style:normal;font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;font-size:14px;padding:9px 16px;border-radius:999px;
  border:1.5px solid var(--line);background:#fff;color:var(--ink-2);cursor:pointer;transition:.15s;
}
.chip:hover{border-color:var(--ink-3);}
.chip.is-active{background:var(--ink);color:#fff;border-color:var(--ink);}
.routes__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:24px;}
.rutas__buscar{display:flex;align-items:center;gap:14px;margin-bottom:24px;}
.rutas__buscar .panel__search{flex:1;max-width:420px;}
.rutas__buscar-n{font-size:14px;color:var(--ink-3);font-variant-numeric:tabular-nums;}
.rutas__vacio{margin-top:28px;font-size:15px;color:var(--ink-3);}
.route{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-sm);transition:transform .16s, box-shadow .16s;display:flex;flex-direction:column;
}
.route:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.route__map{position:relative;aspect-ratio:16/10;}
.route__type{
  position:absolute;top:12px;left:12px;font-family:var(--head-font);font-style:normal;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;font-size:12px;background:rgba(255,255,255,.92);
  color:var(--ink);padding:5px 11px;border-radius:999px;box-shadow:var(--shadow-sm);
}
.route__diff{
  position:absolute;top:12px;right:12px;font-family:var(--head-font);font-style:normal;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;font-size:12px;color:#fff;padding:5px 11px;border-radius:999px;
}
.diff-1{background:#2f9e6f;} .diff-2{background:#d99216;} .diff-3{background:#e1312d;} .diff-4{background:#7a1c8f;}
.route__body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1;}
.route__body h3{font-size:25px;font-style:normal;margin-bottom:14px;}
.route__meta{display:flex;gap:22px;margin-bottom:18px;}
.route__meta div{display:flex;flex-direction:column;}
.route__meta b{font-family:var(--head-font);font-style:italic;font-weight:800;font-size:24px;color:var(--accent-2);line-height:1;}
.route__meta span{font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);font-weight:600;margin-top:3px;}
.route__dl{margin-top:auto;}
.route__dl .btn{font-size:14px;padding:12px 18px;}

/* ---- Gallery / carousel ---------------------------------- */
.carousel{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);}
.carousel__track{display:flex;transition:transform .5s cubic-bezier(.4,.1,.2,1);}
.carousel__slide{min-width:100%;aspect-ratio:16/9;position:relative;}
.carousel__cap{position:absolute;left:0;right:0;bottom:0;padding:60px 32px 26px;
  background:linear-gradient(transparent, rgba(15,17,40,.78));color:#fff;
  font-family:var(--head-font);font-style:italic;font-weight:700;text-transform:uppercase;
  font-size:24px;letter-spacing:.02em;}
.carousel__btn{
  position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,.92);border:0;cursor:pointer;display:grid;place-items:center;
  box-shadow:var(--shadow-md);transition:.15s;z-index:2;
}
.carousel__btn:hover{background:#fff;transform:translateY(-50%) scale(1.06);}
.carousel__btn svg{width:22px;height:22px;color:var(--ink);}
.carousel__btn--prev{left:18px;} .carousel__btn--next{right:18px;}
.carousel__dots{display:flex;gap:9px;justify-content:center;margin-top:22px;}
.carousel__dots button{width:10px;height:10px;border-radius:50%;border:0;background:var(--line);cursor:pointer;transition:.2s;padding:0;}
.carousel__dots button.is-active{background:var(--accent);width:30px;border-radius:999px;}
.gallery__thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:14px;}
.gallery__thumbs .ph{aspect-ratio:4/3;border-radius:var(--radius);cursor:pointer;opacity:.62;transition:.18s;}
.gallery__thumbs .ph.is-active{opacity:1;outline:3px solid var(--accent);outline-offset:2px;}
.gallery__thumbs .ph:hover{opacity:1;}

/* ---- Events ---------------------------------------------- */
.events__list{display:grid;gap:14px;}
.event{
  display:grid;grid-template-columns:96px 1fr auto;gap:26px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:22px 26px;box-shadow:var(--shadow-sm);transition:.16s;
}
.event:hover{box-shadow:var(--shadow-md);transform:translateX(4px);}
.event__date{text-align:center;background:var(--blue-900);color:#fff;border-radius:var(--radius);padding:12px 6px;}
.event__date b{font-family:var(--head-font);font-style:italic;font-weight:800;font-size:34px;display:block;line-height:.95;}
/* Der Datumsblock traegt seinen eigenen dunklen Grund, unabhaengig vom
   Abschnitt — deshalb hier das aufgehellte Rot und nicht ueber
   .section--ink. */
.event__date span{font-family:var(--head-font);font-style:normal;font-weight:700;text-transform:uppercase;font-size:13px;letter-spacing:.1em;color:var(--accent-300);}
.event__info h4{font-size:24px;font-style:normal;margin-bottom:5px;}
.event__info p{margin:0;color:var(--ink-3);font-size:15px;display:flex;gap:16px;flex-wrap:wrap;}
.event__info p span{display:inline-flex;align-items:center;gap:6px;}
.event__tag{font-family:var(--head-font);font-style:normal;font-weight:700;text-transform:uppercase;font-size:12px;letter-spacing:.05em;
  padding:7px 14px;border-radius:999px;background:var(--cream-2);color:var(--ink-2);}

/* ---- Calendar download banner ---------------------------- */
.cal-cta{
  display:flex;align-items:center;gap:22px;
  background:var(--blue-900);color:#fff;
  border-radius:var(--radius-lg);padding:22px 26px;margin-bottom:26px;
  box-shadow:var(--shadow-md);transition:transform .16s, box-shadow .16s;
}
.cal-cta:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);}
.cal-cta__ic{width:52px;height:52px;border-radius:var(--radius);background:var(--accent);
  display:grid;place-items:center;flex-shrink:0;color:#fff;}
.cal-cta__ic svg{width:28px;height:28px;}
.cal-cta__txt{display:flex;flex-direction:column;gap:3px;margin-right:auto;}
.cal-cta__txt b{font-family:var(--head-font);font-style:italic;font-weight:800;text-transform:uppercase;
  font-size:24px;letter-spacing:.01em;line-height:1;}
.cal-cta__txt span{font-size:14.5px;color:rgba(255,255,255,.72);}
.cal-cta__btn{flex-shrink:0;}
.cal-cta--members{background:var(--cream);color:var(--ink);border:1.5px dashed var(--line);box-shadow:none;margin-top:36px;cursor:default;}
.cal-cta--members:hover{transform:none;box-shadow:none;border-color:var(--accent);}
.cal-cta--members .cal-cta__ic{background:var(--cream-2);color:var(--accent);}
.cal-cta--members .cal-cta__txt span{color:var(--ink-3);}
.cal-cta--members .cal-cta__btn{color:var(--ink-3);box-shadow:inset 0 0 0 2px var(--line);pointer-events:none;}
[data-theme="classic"] .cal-cta__txt b,[data-theme="modern"] .cal-cta__txt b{font-style:normal;}
@media (max-width:640px){
  .cal-cta{flex-wrap:wrap;gap:16px;}
  .cal-cta__txt{margin-right:0;flex-basis:60%;}
  .cal-cta__btn{width:100%;justify-content:center;}
}

/* ---- News ------------------------------------------------ */
.news__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.post{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-sm);transition:.16s;display:flex;flex-direction:column;}
.post:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.post__img{aspect-ratio:16/10;position:relative;}
.post__body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1;}
.post__date{font-family:var(--head-font);font-style:normal;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;font-size:12.5px;color:var(--accent);margin-bottom:10px;}
.post__body h3{font-size:24px;font-style:normal;margin-bottom:10px;line-height:1.04;}
.post__body p{font-size:15px;color:var(--ink-3);margin-bottom:16px;}
.post__more{margin-top:auto;font-family:var(--head-font);font-style:normal;font-weight:700;
  text-transform:uppercase;font-size:13.5px;letter-spacing:.04em;color:var(--ink);display:inline-flex;gap:7px;align-items:center;}
.post__more svg{width:16px;height:16px;transition:transform .15s;}
.post:hover .post__more svg{transform:translateX(4px);}

/* ---- Sponsors -------------------------------------------- */
/* Eine Reihe je Stufe, nicht ein Raster ueber alle. Das Raster gab jedem
   Logo dieselbe Kachel — genau das, was eine Stufeneinteilung nicht will.

   Gesteuert wird ueber die HOEHE, nicht die Breite. Sponsorenlogos sind mal
   breite Schriftzuege, mal quadratische Wappen; gleiche Breite laesst das
   Wappen winzig und den Schriftzug erschlagend wirken. Gleiche Hoehe laesst
   sie optisch gleich schwer erscheinen, und genau danach urteilt das Auge.
   Die Breitenbegrenzung ist nur eine Bremse fuer sehr lange Schriftzuege. */
.sponsors__nivel{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:clamp(22px,4vw,54px);}
.sponsors__nivel + .sponsors__nivel{margin-top:clamp(26px,3.4vw,44px);
  padding-top:clamp(26px,3.4vw,44px);border-top:1px solid var(--line);}
.sponsor{display:grid;place-items:center;}
.sponsor img{display:block;width:auto;object-fit:contain;}
.sponsor--n1 img{height:clamp(58px,7vw,96px); max-width:min(72vw,290px);}
.sponsor--n2 img{height:clamp(42px,5vw,66px); max-width:min(62vw,215px);}
.sponsor--n3 img{height:clamp(31px,3.6vw,47px);max-width:min(52vw,165px);}
/* Platzhalter, solange keine Logos da sind: dieselben Masse, damit die
   Abstufung schon zu sehen ist. */
.sponsor .ph{border-radius:var(--radius);border:1px solid var(--line);}
.sponsor--n1 .ph{width:clamp(150px,20vw,232px);height:clamp(58px,7vw,96px);}
.sponsor--n2 .ph{width:clamp(112px,15vw,172px);height:clamp(42px,5vw,66px);}
.sponsor--n3 .ph{width:clamp(88px,11vw,132px); height:clamp(31px,3.6vw,47px);}
.sponsor a{display:block;transition:transform .15s ease, opacity .15s ease;}
.sponsor a:hover{transform:translateY(-2px);opacity:.86;}
.sponsors__nota{margin-top:30px;text-align:center;font-size:14px;color:var(--ink-3);}

/* ---- Contact / Join -------------------------------------- */
.join__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start;}
.form{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:34px;box-shadow:var(--shadow-md);}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.field{margin-bottom:16px;display:flex;flex-direction:column;gap:7px;}
.field label{font-family:var(--head-font);font-style:normal;font-weight:600;text-transform:uppercase;font-size:13px;letter-spacing:.06em;color:var(--ink-2);}
.field input,.field select,.field textarea{
  font-family:var(--body-font);font-size:16px;padding:13px 15px;border:1.5px solid var(--line);
  border-radius:var(--radius);background:var(--cream);color:var(--ink);transition:.15s;width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 4px color-mix(in oklab, var(--accent) 14%, transparent);}
.field textarea{resize:vertical;min-height:110px;}
.form__note{font-size:13px;color:var(--ink-3);margin:14px 0 0;}
/* Der Sponsorenaufruf ist keine Fussnote, sondern eine Einladung. Etwas
   groesser und mit Strich, damit er sich vom Kleingedruckten darueber
   loest — aber ohne Kasten, sonst liest er sich wie Werbung im eigenen
   Formular. */
.form__note--patro{font-size:14.5px;color:var(--ink-2);line-height:1.55;
  margin-top:16px;padding-left:14px;border-left:3px solid var(--accent);}
.form__ok{display:none;background:#2f9e6f;color:#fff;padding:14px 18px;border-radius:var(--radius);
  font-weight:600;margin-bottom:18px;}
.form__ok.show{display:block;}

.contactcard{display:flex;flex-direction:column;gap:2px;}
.contactcard .ph{aspect-ratio:16/10;border-radius:var(--radius-lg);margin-bottom:24px;}
/* Karte der Vereinssede. Masse und Rundung wie beim frueheren Platzhalter,
   damit der Abschnitt sein Gewicht behaelt. */
.cmapa{position:relative;aspect-ratio:16/10;border-radius:var(--radius-lg);overflow:hidden;
  margin-bottom:24px;background:#eceff5;cursor:pointer;box-shadow:var(--shadow-sm);}
.cmapa .minipunto{position:absolute;inset:0;}
.cmapa .leaflet-container{width:100%;height:100%;font:inherit;background:#eceff5;}
.cmapa:hover .route__lupa,.cmapa:focus-visible .route__lupa{background:var(--accent);color:#fff;}
.cmapa:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}
.cinfo{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);}
.cinfo__ic{width:44px;height:44px;border-radius:var(--radius);background:var(--cream-2);display:grid;place-items:center;flex-shrink:0;color:var(--accent);}
.cinfo__ic svg{width:22px;height:22px;}
.cinfo h4{font-size:18px;font-style:normal;margin-bottom:2px;}
.cinfo p{margin:0;color:var(--ink-3);font-size:15.5px;}
/* Auf dem dunklen Grund des Kontaktabschnitts kam --ink-3 auf 3,2:1 — die
   Anschrift und die Uhrzeiten des Vereins standen also gerade dort schwer
   lesbar, wo jemand sie sucht. Dieselbe Aufhellung wie beim Vorspann. */
.section--ink .cinfo p{color:rgba(255,255,255,.74);}
.section--ink .cinfo a{color:#fff;text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1.5px;text-decoration-color:var(--accent);}
.section--ink .cinfo a:hover{color:var(--accent);text-decoration-color:currentColor;}
.socials{display:flex;gap:12px;margin-top:24px;}
/* color:inherit statt fester Farbe: Der Abschnitt gibt die Textfarbe vor
   (section--ink setzt #fff). Ein fest gesetztes var(--ink) ergab hier fast
   Schwarz auf Dunkelblau — Kontrast 1,1:1, praktisch unsichtbar.
   Der Ring greift dieselbe Farbe auf, damit beides zusammenpasst. */
.socials a{width:46px;height:46px;border-radius:50%;
  border:1.5px solid color-mix(in oklab, currentColor 30%, transparent);
  display:grid;place-items:center;color:inherit;transition:.15s;}
.socials a:hover{background:var(--accent);color:#fff;border-color:var(--accent);transform:translateY(-2px);}
.socials svg{width:20px;height:20px;}

/* ---- Footer ---------------------------------------------- */
.footer{background:#0f1130;color:rgba(255,255,255,.7);padding:72px 0 32px;}
.footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.12);}
.footer__brand{display:flex;gap:14px;align-items:center;margin-bottom:22px;}
.footer__plaque{background:#fff;border-radius:var(--radius);padding:18px 22px;display:inline-flex;box-shadow:var(--shadow-md);}
.footer__plaque img{width:172px;height:auto;display:block;}
.footer__brand .nav__badge{width:54px;height:54px;}
.footer__brand b{font-family:var(--head-font);font-style:normal;font-weight:800;text-transform:uppercase;color:#fff;font-size:20px;line-height:1.05;}
.footer p{font-size:15px;max-width:34ch;}
.footer h5{font-family:var(--head-font);font-style:normal;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#fff;font-size:15px;margin:0 0 16px;}
.footer__col a{display:block;padding:6px 0;font-size:15px;transition:.15s;}
.footer__col a:hover{color:#fff;}
.footer__bot{display:flex;justify-content:space-between;align-items:center;padding-top:28px;font-size:13.5px;flex-wrap:wrap;gap:12px;}

/* ---- Reveal animation ------------------------------------ */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);}
  .reveal.in{opacity:1;transform:none;}
}

/* ---- Responsive ------------------------------------------ */
@media (max-width:1024px){
  :root{--section-pad:84px;}
  .hero__inner,.about__grid,.join__grid{grid-template-columns:1fr;gap:40px;}
  .hero__media{max-width:480px;}
  .news__grid{grid-template-columns:1fr 1fr;}
  .statband{grid-template-columns:1fr 1fr;}
  .statband .stat:nth-child(2){border-right:0;}
  .statband .stat:nth-child(1),.statband .stat:nth-child(2){border-bottom:1px solid rgba(255,255,255,.16);}
}
@media (max-width:640px){
  body{font-size:16px;}
  .wrap{padding:0 20px;}
  .nav{padding:12px 20px;}
  .news__grid{grid-template-columns:1fr;}
  .about__values{grid-template-columns:1fr;}
  .event{grid-template-columns:72px 1fr;}
  .event__tag{display:none;}
  .form__row{grid-template-columns:1fr;}
  .hero__stats{gap:24px;}
  .footer__top{grid-template-columns:1fr;gap:32px;}
}

/* ---- Section "see all" row ------------------------------- */
.section__more{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:44px;}
.section__more-note{font-size:14.5px;color:var(--ink-3);}

/* ---- About → blog link ---------------------------------- */
.about__blog{display:flex;align-items:center;gap:16px;margin:6px 0 30px;padding:16px 18px;
  border:1.5px solid var(--line);border-radius:var(--radius-lg);background:var(--cream);
  transition:border-color .16s, transform .16s;}
.about__blog:hover{border-color:var(--accent);transform:translateY(-2px);}
.about__blog-ic{width:42px;height:42px;border-radius:var(--radius);background:var(--accent);color:#fff;
  display:grid;place-items:center;flex-shrink:0;}
.about__blog-ic svg{width:22px;height:22px;}
.about__blog-txt{display:flex;flex-direction:column;gap:2px;margin-right:auto;}
.about__blog-txt b{font-family:var(--head-font);font-style:normal;font-weight:800;text-transform:uppercase;
  font-size:17px;color:var(--ink);letter-spacing:.02em;}
.about__blog-txt span{font-size:14.5px;color:var(--ink-3);}
.about__blog-arrow{color:var(--accent);display:grid;place-items:center;flex-shrink:0;}
.about__blog-arrow svg{width:22px;height:22px;}

/* ---- Sub-page header band ------------------------------- */
.pagehead{background:var(--blue-900);color:#fff;padding:calc(var(--nav-h,72px) + 62px) 0 70px;}
.crumbs{display:flex;align-items:center;gap:9px;margin-bottom:20px;
  font-family:var(--head-font);font-style:normal;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;font-size:12.5px;color:rgba(255,255,255,.55);}
.crumbs a{color:rgba(255,255,255,.72);}
.crumbs a:hover{color:#fff;}
.pagehead h1{font-family:var(--head-font);font-weight:800;text-transform:uppercase;
  font-size:clamp(40px,6vw,86px);line-height:.94;letter-spacing:-.01em;margin:0 0 20px;color:#fff;}
[data-theme="sport"] .pagehead h1{font-style:italic;}
.pagehead p{font-size:17.5px;color:rgba(255,255,255,.72);max-width:60ch;}
.pagehead__meta{display:flex;gap:28px;flex-wrap:wrap;margin-top:30px;}
.pagehead__meta div{display:flex;flex-direction:column;gap:2px;}
.pagehead__meta b{font-family:var(--head-font);font-weight:800;font-size:26px;color:#fff;line-height:1;}
.pagehead__meta span{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);}

/* ---- CMS placeholder note ------------------------------- */
.cms-note{display:flex;align-items:center;gap:16px;margin-top:52px;padding:20px 22px;
  border:1.5px dashed var(--line);border-radius:var(--radius-lg);background:var(--cream);}
.cms-note__ic{width:44px;height:44px;border-radius:var(--radius);background:var(--cream-2);color:var(--accent);
  display:grid;place-items:center;flex-shrink:0;}
.cms-note__ic svg{width:22px;height:22px;}
.cms-note b{display:block;font-family:var(--head-font);font-style:normal;font-weight:800;
  text-transform:uppercase;font-size:16px;color:var(--ink);letter-spacing:.02em;}
.cms-note span{font-size:14.5px;color:var(--ink-3);}
.pager{display:flex;justify-content:center;gap:8px;margin-top:46px;}
.pager button{font-family:var(--head-font);font-weight:700;font-size:15px;min-width:44px;height:44px;
  border:1.5px solid var(--line);background:#fff;color:var(--ink-2);border-radius:var(--radius);cursor:pointer;transition:.15s;}
.pager button.is-active,.pager button:hover{background:var(--accent);border-color:var(--accent);color:#fff;}

/* ---- Members button + area ------------------------------- */
.btn--member{background:var(--cream-2);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line);}
.btn--member:hover{background:var(--ink);color:#fff;box-shadow:inset 0 0 0 1.5px var(--ink);transform:skewX(var(--btn-skew)) translateY(-2px);}
.nav__member{padding:11px 16px;font-size:14px;}
.nav__member-ic{display:grid;place-items:center;}
.nav__member-ic svg{width:16px;height:16px;}
@media (max-width:1180px){.nav__member span:not(.nav__member-ic){display:none;}.nav__member{padding:11px 13px;}}
@media (max-width:900px){.nav__member{display:none;}}
.auth__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:start;}
.auth__tabs{display:flex;gap:8px;margin-bottom:26px;}
.auth__tabs button{flex:1;font-family:var(--head-font);font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  font-size:15px;padding:13px 10px;border:1.5px solid var(--line);background:var(--cream);color:var(--ink-2);
  border-radius:var(--radius);cursor:pointer;transition:.15s;}
.auth__tabs button.is-active{background:var(--accent);border-color:var(--accent);color:#fff;}
.auth__pane{display:none;}
.auth__pane.is-active{display:block;}
.auth__row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:2px 0 18px;flex-wrap:wrap;}
.auth__check{display:flex;flex-direction:row;align-items:center;gap:9px;font-size:14.5px;color:var(--ink-2);margin-bottom:0;}
.auth__check input{width:18px;height:18px;accent-color:var(--accent);}
.auth__link{font-size:14.5px;color:var(--accent);font-weight:600;}
.auth__submit{width:100%;justify-content:center;}
.auth__side{display:flex;flex-direction:column;gap:18px;}
.auth__perks{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px;}
.auth__perks li{display:flex;gap:13px;align-items:flex-start;font-size:16px;color:var(--ink-2);}
.auth__perks .auth__bullet{width:28px;height:28px;flex-shrink:0;border-radius:50%;background:var(--accent);color:#fff;
  display:grid;place-items:center;font-family:var(--head-font);font-weight:800;font-size:14px;}
@media (max-width:900px){.auth__grid{grid-template-columns:1fr;gap:34px;}}

/* ---- Members area panel --------------------------------- */
.nav--member{background:#fff;border-bottom:1.5px solid var(--line);}
.nav--member .nav__links a.is-active{color:var(--accent);background:color-mix(in oklab, var(--accent) 10%, transparent);}
.nav__user{display:flex;align-items:center;gap:10px;padding:6px 10px 6px 6px;border-radius:999px;
  border:1.5px solid var(--line);background:var(--cream);}
.nav__user:hover{border-color:var(--accent);}
.nav__avatar{width:32px;height:32px;border-radius:50%;background:var(--blue-900);color:#fff;display:grid;place-items:center;
  font-family:var(--head-font);font-weight:800;font-size:13px;letter-spacing:.02em;flex-shrink:0;}
/* Administratoren tragen ihr Rund in Vereinsrot. Wer die halbe Seite
   verwaltet, soll auf jeder Seite sehen, dass er sie gerade mit den Augen
   eines Verwalters sieht — und nicht die Zusatzknoepfe fuer selbst-
   verstaendlich halten. */
.nav__user.is-admin .nav__avatar{background:var(--accent);}
.nav__user.is-admin .nav__user-txt span{color:var(--accent);}
.nav__user-txt{display:flex;flex-direction:column;line-height:1.15;}
.nav__user-txt b{font-family:var(--head-font);font-style:normal;font-weight:700;font-size:14px;color:var(--ink);}
.nav__user-txt span{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);}
.nav__logout{padding:11px 16px;font-size:14px;}
/* Zurueck zur oeffentlichen Seite, ohne sich abzumelden. Stand bisher nur
   im Klappmenue des Telefons; am Rechner fehlte der Weg ganz. Der Text
   weicht ab dem ersten Gedraenge dem Haus-Symbol, der volle Satz bleibt
   als Titel stehen. */
.nav__publica{padding:11px 16px;font-size:14px;}
/* Die Leiste des Mitgliederbereichs traegt sechs Menuepunkte, fuer
   Administratoren sieben, dazu Namensschild, Sprache, "Web pública" und
   "Cerrar sesión". Zusammen misst das rund 1400px. Wird es enger, geben
   die Knoepfe zuerst ihre Beschriftung auf und behalten ihr Symbol; erst
   danach wandern die Menuepunkte ins Klappmenue. Ohne diese Reihenfolge
   quetschen sie sich stattdessen: der Sprachschalter wird angeschnitten,
   "Cerrar sesión" bricht auf zwei Zeilen um. */
@media (max-width:1440px){
  .nav__user-txt{display:none;}.nav__user{padding:5px;}
  .nav__publica span:not(.nav__member-ic){display:none;}.nav__publica{padding:11px 13px;}
  .nav__logout span:not(.nav__member-ic){display:none;}.nav__logout{padding:11px 13px;}}
@media (max-width:1180px){.nav--member .nav__links{display:none;}.nav--member .nav__burger{display:block;}}
@media (max-width:900px){.nav__user,.nav__logout,.nav__publica{display:none;}}

.pagehead--panel{padding-top:calc(var(--nav-h,72px) + 48px);padding-bottom:56px;}
.pagehead__row{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;}
.section--panel{padding-top:56px;}
.panel__grid{display:grid;grid-template-columns:1.35fr .65fr;gap:40px;align-items:start;}
.panel__grid--wide{grid-template-columns:1.05fr .95fr;}
.panel__side{display:flex;flex-direction:column;gap:16px;}
.panel__side h4,.panel__bar h4{font-family:var(--head-font);font-style:normal;font-weight:800;text-transform:uppercase;
  letter-spacing:.04em;font-size:17px;color:var(--ink);margin:0;}
.panel__formhead{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px;
  /* Titel, Statusmarke und "Cancelar edición" passen in schmalen Spalten
     nicht nebeneinander — dann lieber umbrechen als ueberlaufen. */
  flex-wrap:wrap;}
.panel__formhead h3{margin:0;margin-right:auto;}
.panel__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px;}
.panel__bar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin:36px 0 16px;}
.panel__bar-actions{display:flex;gap:10px;}
.panel__bar-note{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);font-weight:600;}
.btn--sm{padding:9px 14px;font-size:13px;}
.btn[disabled]{opacity:.45;pointer-events:none;}

.pill{display:inline-flex;align-items:center;font-family:var(--head-font);font-style:normal;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;font-size:11.5px;padding:6px 11px;border-radius:999px;
  background:var(--cream-2);color:var(--ink-2);white-space:nowrap;}
.pill--live{background:color-mix(in oklab, #2f9e6f 16%, transparent);color:#1f6d4c;}
.pill--draft{background:color-mix(in oklab, var(--accent) 14%, transparent);color:var(--accent-700);}

.rowlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.rowlist li{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:14px 16px;}
.rowlist li>div:not(.rowlist__date):not(.rowlist__actions){display:flex;flex-direction:column;gap:3px;margin-right:auto;min-width:0;}
.rowlist b{font-family:var(--head-font);font-style:normal;font-weight:700;font-size:16px;color:var(--ink);}
.rowlist li>div:not(.rowlist__actions)>span,.rowlist__date>span{font-size:13.5px;color:var(--ink-3);}
.rowlist--events li{padding:14px 18px;
  /* Angaben oben, Knoepfe darunter — auch auf breiten Bildschirmen.
     Nebeneinander drueckt die Buttons den Text in eine schmale Spalte,
     und gerade die Detailzeile eines Termins ist lang: Strecke, Uhrzeit,
     Route, Treffpunkt, freie Plaetze. */
  flex-wrap:wrap;align-items:flex-start;row-gap:4px;}
.rowlist--events li > .rowlist__date{align-self:center;}
.rowlist--events li > .rowlist__actions{
  /* Auf Hoehe des Textes einruecken, nicht unter den Datumsblock:
     52px Datum + 16px Abstand. */
  flex:0 0 calc(100% - 68px);margin-left:68px;justify-content:flex-start;
  margin-top:6px;padding-top:10px;border-top:1px solid var(--line);}
.rowlist__date{display:flex;flex-direction:column;align-items:center;gap:0;width:52px;flex-shrink:0;
  background:var(--blue-900);color:#fff;border-radius:var(--radius);padding:8px 0;}
.rowlist__date b{font-family:var(--head-font);font-weight:800;font-size:22px;color:#fff;line-height:1;}
.rowlist__date span{font-size:10.5px;letter-spacing:.1em;color:rgba(255,255,255,.65);}
.editor__bar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:-2px;}
.editor__bar button{font-family:var(--head-font);font-weight:700;font-size:13px;min-width:36px;height:34px;padding:0 10px;
  border:1.5px solid var(--line);background:var(--cream);color:var(--ink-2);border-radius:8px;cursor:pointer;transition:.15s;}
.editor__bar button:hover{background:var(--ink);border-color:var(--ink);color:#fff;}

.drop{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:26px 20px;
  border:1.5px dashed var(--line);border-radius:var(--radius);background:var(--cream);cursor:pointer;transition:.15s;}
.drop:hover{border-color:var(--accent);background:#fff;}
.drop--wide{padding:44px 24px;gap:9px;}
.drop--wide .btn{margin-top:10px;}
.drop__ic{width:44px;height:44px;border-radius:var(--radius);background:#fff;color:var(--accent);
  display:grid;place-items:center;box-shadow:var(--shadow-sm);}
.drop__ic svg{width:22px;height:22px;}
.drop b{font-family:var(--head-font);font-style:normal;font-weight:800;text-transform:uppercase;font-size:15px;
  letter-spacing:.02em;color:var(--ink);}
.drop span{font-size:13.5px;color:var(--ink-3);}

.photogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;}
.photo{display:flex;flex-direction:column;position:relative;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:.15s;}
.photo:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-md);}
.photo>input{position:absolute;top:11px;left:11px;z-index:2;width:20px;height:20px;accent-color:var(--accent);}
.photo .ph{aspect-ratio:4/3;border-radius:0;}
.photo__cap{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;}
.photo__cap>span:first-child{font-size:14px;color:var(--ink-2);}

.footer--slim{padding:34px 0 30px;}
.footer--slim .footer__bot{margin-top:0;border-top:0;padding-top:0;}
.footer--slim a{color:rgba(255,255,255,.75);}
.footer--slim a:hover{color:#fff;}

@media (max-width:1000px){.panel__grid,.panel__grid--wide{grid-template-columns:1fr;gap:32px;}}
@media (max-width:620px){
  .rowlist--events li > .rowlist__actions{flex-basis:100%;margin-left:0;}
  /* Zwei nebeneinander, solange zwei hineinpassen, sonst untereinander.
     "width:100%" stand hier vorher und meinte dasselbe, konnte es aber
     nicht halten: in einer Zeile ohne Umbruch bleibt jedem Knopf nur
     seine Wortbreite, und vier Woerter sind breiter als ein Telefon. */
  .rowlist--events li .btn{flex:1 1 132px;justify-content:center;}}

/* ---- Karte in der Routenkachel --------------------------- */
.route__map .minimapa{position:absolute;inset:0;background:#eceff5;}
.route__map .leaflet-container{background:#eceff5;font:inherit;}
/* Die Kachelkarte ist unbedienbar — der Klick gehoert dem Overlay */
.route__map .leaflet-container{cursor:pointer;}
.route__lupa{
  position:absolute;right:12px;bottom:12px;z-index:500;
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.94);color:var(--ink);
  font-family:var(--head-font);font-style:normal;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;font-size:11.5px;
  padding:7px 12px;border-radius:999px;box-shadow:var(--shadow-sm);
  border:0;cursor:pointer;transition:.15s;
}
.route:hover .route__lupa{background:var(--accent);color:#fff;}

/* ---- Vorschau beim Routen-Upload ------------------------- */
.rutaprev{margin-top:12px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.rutaprev__mapa{aspect-ratio:16/10;background:#eceff5;}
.rutaprev__mapa .leaflet-container{width:100%;height:100%;font:inherit;background:#eceff5;}
.rutaprev__pie{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--cream);}
.rutaprev__pie span{font-size:13.5px;color:var(--ink-2);margin-right:auto;}
.drop--off{opacity:.55;cursor:default;pointer-events:none;}

/* ---- Karten-Overlay -------------------------------------- */
.mapaov{
  position:fixed;inset:0;z-index:2000;
  background:rgba(15,17,40,.72);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:28px;
}
.mapaov[hidden]{display:none;}
.mapaov__caja{
  width:min(1180px,100%);height:min(760px,100%);
  background:#fff;border-radius:var(--radius-lg);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--shadow-lg);
}
.mapaov__cab{
  display:flex;align-items:center;gap:18px;
  padding:16px 18px 16px 24px;border-bottom:1px solid var(--line);flex-shrink:0;
}
.mapaov__cab > div{display:flex;flex-direction:column;gap:2px;margin-right:auto;min-width:0;}
.mapaov__cab b{
  font-family:var(--head-font);font-style:normal;font-weight:800;
  text-transform:uppercase;font-size:21px;color:var(--ink);letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mapaov__cab span{font-size:13.5px;color:var(--ink-3);}
.mapaov__x{
  flex-shrink:0;width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line);
  background:#fff;color:var(--ink);font-size:26px;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:.15s;
}
.mapaov__x:hover{background:var(--accent);border-color:var(--accent);color:#fff;}
.mapaov__x:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}
.mapaov__mapa{flex:1;min-height:0;background:#eceff5;}
.mapaov__mapa .leaflet-container{width:100%;height:100%;font:inherit;}
@media (max-width:640px){
  .mapaov{padding:0;}
  .mapaov__caja{height:100%;border-radius:0;}
  .mapaov__cab{padding:14px 14px 14px 18px;}
  .mapaov__cab b{font-size:18px;}
}








/* ---- Teilen ------------------------------------------------ */
.comp__url{font-size:12.5px;color:var(--ink-3);word-break:break-all;
  background:var(--cream);border-radius:var(--radius);padding:9px 12px;margin:0 0 16px;}
.comp__ops{display:flex;flex-direction:column;gap:10px;}
.comp__op{display:flex;align-items:center;gap:16px;border:1.5px solid var(--line);
  border-radius:var(--radius);padding:13px 15px;}
.comp__op > div{margin-right:auto;min-width:0;}
.comp__op b{display:block;font-family:var(--head-font);font-style:normal;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;font-size:14px;color:var(--ink);margin-bottom:3px;}
.comp__op span{display:block;font-size:13.5px;line-height:1.45;color:var(--ink-3);}
.comp__op .btn{flex-shrink:0;}
.comp__aviso{margin:18px 0 0;padding:12px 14px;border-radius:var(--radius);
  background:color-mix(in oklab, var(--accent) 9%, transparent);
  border-left:3px solid var(--accent);
  font-size:14px;line-height:1.5;color:var(--ink);}
@media (max-width:560px){.comp__op{flex-wrap:wrap;}.comp__op .btn{width:100%;justify-content:center;}}

/* ---- Fotoeinwilligung -------------------------------------- */
.consentimiento{background:var(--cream);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 18px;margin-bottom:18px;}
.consentimiento > b{display:block;font-family:var(--head-font);font-style:normal;
  font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:13px;
  color:var(--ink);margin-bottom:4px;}
.consentimiento > span{display:block;font-size:13.5px;color:var(--ink-3);
  line-height:1.5;margin-bottom:12px;}
.consentimiento .auth__check{margin-bottom:8px;}
.consentimiento .auth__check:last-child{margin-bottom:0;}

/* ---- Trikotbestellung -------------------------------------- */
.eqcab{display:flex;align-items:center;gap:18px;background:var(--cream);
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px 22px;margin-bottom:24px;}
.eqcab > div{margin-right:auto;min-width:0;}
.eqcab b{display:block;font-family:var(--head-font);font-style:normal;font-weight:800;
  text-transform:uppercase;font-size:20px;color:var(--ink);margin-bottom:3px;}
.eqcab span{font-size:14.5px;color:var(--ink-3);}

.eqitems{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px;}
.eqitem{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px;}
.eqitem--off{opacity:.66;}
.eqitem__foto{aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;margin-bottom:14px;}
.eqitem__foto .ph{width:100%;height:100%;}
.eqitem__cab{display:flex;align-items:baseline;gap:14px;margin-bottom:8px;}
.eqitem__cab b{font-family:var(--head-font);font-style:normal;font-weight:800;
  text-transform:uppercase;font-size:18px;color:var(--ink);margin-right:auto;}
.eqitem__precio{font-family:var(--head-font);font-weight:700;font-size:17px;color:var(--accent-700);}
.eqitem__desc{margin:0 0 6px;font-size:14.5px;color:var(--ink-2);line-height:1.5;}
.eqitem__nota{margin:0 0 6px;font-size:13.5px;color:var(--accent-700);}
.eqitem__previa{margin:0 0 10px;font-size:13.5px;color:var(--ink-3);font-style:italic;}
.eqitem__fila{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}

.eqcnt{border:1.5px solid var(--line);border-radius:var(--radius);padding:7px 10px;
  display:flex;flex-direction:column;align-items:center;gap:4px;min-width:72px;}
.eqcnt.is-sel{border-color:var(--accent);background:color-mix(in oklab, var(--accent) 8%, transparent);}
.eqcnt__talla{font-family:var(--head-font);font-weight:700;font-size:12px;
  text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);}
.eqcnt__grupo{display:flex;align-items:center;gap:8px;}
.eqcnt__grupo b{font-family:var(--head-font);font-size:17px;min-width:16px;text-align:center;}
.eqcnt__b{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line);
  background:#fff;font-size:16px;line-height:1;cursor:pointer;color:var(--ink);}
.eqcnt__b:hover:not(:disabled){border-color:var(--accent);color:var(--accent);}
.eqcnt__b:disabled{opacity:.35;cursor:default;}

.eqtotal{display:flex;align-items:center;gap:20px;margin-top:24px;padding:18px 22px;
  background:var(--ink);color:#fff;border-radius:var(--radius-lg);flex-wrap:wrap;}
.eqtotal > div:first-child{margin-right:auto;min-width:0;}
.eqtotal b{display:block;font-family:var(--head-font);font-style:normal;font-weight:800;
  text-transform:uppercase;font-size:15px;letter-spacing:.05em;margin-bottom:4px;}
.eqtotal span{font-size:14.5px;color:rgba(255,255,255,.72);}
.eqtotal__cifra{text-align:right;}
.eqtotal__cifra b{font-size:28px;letter-spacing:0;margin:0;}

.eqres{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;margin-bottom:12px;}
.eqres__cab{display:flex;align-items:baseline;gap:14px;margin-bottom:12px;}
.eqres__cab b{font-family:var(--head-font);font-style:normal;font-weight:700;
  text-transform:uppercase;font-size:15px;color:var(--ink);margin-right:auto;}
.eqres__cab span{font-size:13.5px;color:var(--ink-3);}
.eqres__rejilla{display:flex;flex-wrap:wrap;gap:8px;}
.eqres__celda{border:1.5px solid var(--line);border-radius:var(--radius);padding:8px 10px;
  display:flex;flex-direction:column;align-items:center;gap:2px;min-width:76px;}
.eqres__celda.is-sel{border-color:var(--accent);}
.eqres__talla{font-family:var(--head-font);font-weight:700;font-size:11.5px;
  text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);}
.eqres__celda b{font-family:var(--head-font);font-size:20px;color:var(--ink);}
.eqres__sub{font-size:11.5px;color:var(--ink-3);}
.eqres__extra{width:56px;margin-top:4px;padding:3px 6px;font-size:12.5px;text-align:center;
  border:1px dashed var(--line);border-radius:6px;font-family:var(--body-font);}
.rowlist--pedidos li{flex-wrap:wrap;align-items:flex-start;row-gap:4px;}
/* Kein Datumsblock wie bei den Terminen, also kein Einzug: Die Knopfreihe
   beginnt am linken Rand, wo auch der Name steht. */
.rowlist--pedidos li > .rowlist__actions{flex:0 0 100%;justify-content:flex-start;
  margin-top:6px;padding-top:10px;border-top:1px solid var(--line);}
.eqimporte{font-family:var(--head-font);font-weight:700;font-size:16px;color:var(--ink);
  flex-shrink:0;font-variant-numeric:tabular-nums;}
@media (max-width:620px){
  .eqtotal__cifra{text-align:left;}
  .eqitems{grid-template-columns:1fr;}
}

/* ---- Zeitleiste der Vereinsgeschichte --------------------- */
.hitos{list-style:none;margin:0;padding:0;position:relative;}
/* Die Linie laeuft hinter den Jahreszahlen durch — sie haelt die
   Eintraege optisch zusammen, auch wenn Kapitel fehlen. */
.hitos::before{content:"";position:absolute;left:31px;top:12px;bottom:12px;width:2px;
  background:linear-gradient(var(--line),var(--line));}
.hito{position:relative;display:flex;gap:22px;padding-bottom:30px;}
.hito__anio{flex-shrink:0;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--head-font);font-style:normal;font-weight:800;font-size:17px;
  background:var(--accent);color:#fff;position:relative;z-index:1;
  box-shadow:0 0 0 6px var(--paper);}
.hito__caja{padding-top:6px;min-width:0;}
.hito__caja b{display:block;font-family:var(--head-font);font-style:normal;font-weight:800;
  text-transform:uppercase;font-size:20px;color:var(--ink);margin-bottom:6px;letter-spacing:.01em;}
.hito__caja span{display:block;font-size:16.5px;line-height:1.62;color:var(--ink-2);}
.hito__falta{display:inline-block;margin-top:10px;font-style:normal;
  font-family:var(--head-font);font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  font-size:11.5px;color:var(--accent-700);
  background:color-mix(in oklab, var(--accent) 12%, transparent);
  padding:5px 11px;border-radius:999px;}
/* Offene Kapitel sind gestrichelt und blass: Man sieht auf einen Blick,
   was Wissen ist und was Luecke. */
.hito--hueco .hito__anio{background:transparent;color:var(--ink-3);
  border:2px dashed var(--line);box-shadow:0 0 0 6px var(--paper);font-size:24px;}
.hito--hueco .hito__caja b{color:var(--ink-3);}
.hito--hoy .hito__anio{background:var(--blue);font-size:13px;letter-spacing:.06em;}
@media (max-width:560px){
  .hitos::before{left:23px;}
  .hito{gap:16px;}
  .hito__anio{width:48px;height:48px;font-size:14px;}
  .hito--hueco .hito__anio{font-size:20px;}
  .hito__caja b{font-size:17px;}
  .hito__caja span{font-size:15.5px;}
}

/* ---- GPX aufs Geraet: Auswahl und Anleitung --------------- */
.guia{margin-top:28px;background:var(--cream);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:24px 26px;}
.guia__cab{display:flex;align-items:flex-start;gap:16px;margin-bottom:18px;}
.guia__ic{flex-shrink:0;width:44px;height:44px;border-radius:50%;background:var(--accent);
  color:#fff;display:grid;place-items:center;}
.guia__ic svg{width:22px;height:22px;}
.guia__cab b{display:block;font-family:var(--head-font);font-style:normal;font-weight:800;
  text-transform:uppercase;font-size:19px;color:var(--ink);margin-bottom:4px;}
.guia__cab span{font-size:15px;color:var(--ink-3);line-height:1.5;}
.guia__botones{display:flex;flex-wrap:wrap;gap:10px;}

.guiaov{position:fixed;inset:0;z-index:2000;background:rgba(15,17,40,.72);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:28px;}
.guiaov__caja{width:min(680px,100%);height:min(800px,100%);background:#fff;
  border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;
  box-shadow:var(--shadow-lg);}
.guiaov__cab{display:flex;align-items:center;gap:16px;padding:18px 18px 18px 26px;
  border-bottom:1px solid var(--line);flex-shrink:0;}
.guiaov__cab > div{display:flex;flex-direction:column;gap:3px;margin-right:auto;min-width:0;}
.guiaov__cab b{font-family:var(--head-font);font-style:normal;font-weight:800;
  text-transform:uppercase;font-size:22px;color:var(--ink);}
.guiaov__cab span{font-size:13px;color:var(--ink-3);line-height:1.45;}
.guiaov__cuerpo{flex:1;min-height:0;overflow-y:auto;padding:22px 26px;}
.guiaov__cuerpo h4{font-family:var(--head-font);font-style:normal;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;font-size:14px;color:var(--accent-700);
  margin:24px 0 10px;}
.guiaov__cuerpo h4:first-of-type{margin-top:14px;}
.guiaov__cuerpo ol{margin:0;padding-left:22px;}
.guiaov__cuerpo li{font-size:16px;line-height:1.6;color:var(--ink-2);margin-bottom:11px;}
.guiaov__cuerpo li b{color:var(--ink);}
.guia__antes{background:color-mix(in oklab, var(--blue) 9%, transparent);
  border-left:3px solid var(--blue);padding:12px 14px;border-radius:0 var(--radius) var(--radius) 0;
  font-size:15px;line-height:1.55;color:var(--ink);margin:0;}
.guia__aviso{margin:22px 0 0;padding:12px 14px;border-radius:var(--radius);
  background:color-mix(in oklab, var(--accent) 8%, transparent);
  font-size:14.5px;line-height:1.55;color:var(--ink-2);}
.guiaov__pie{display:flex;align-items:center;gap:14px;padding:14px 18px 14px 26px;
  border-top:1px solid var(--line);flex-shrink:0;flex-wrap:wrap;}
.guiaov__fecha{font-size:12.5px;color:var(--ink-3);margin-right:auto;line-height:1.4;}
@media (max-width:640px){
  .guiaov{padding:0;}
  .guiaov__caja{height:100%;border-radius:0;}
  .guia{padding:20px 18px;}
  .guia__botones .btn{flex:1 1 140px;justify-content:center;}
}

/* Gedruckt wird nur die Anleitung — viele wollen sie auf Papier. */
@media print{
  body.imprimiendo-guia > *:not(.guiaov){display:none !important;}
  .guiaov{position:static;background:none;padding:0;-webkit-backdrop-filter:none;backdrop-filter:none;}
  .guiaov__caja{width:100%;height:auto;box-shadow:none;border-radius:0;}
  .guiaov__cuerpo{overflow:visible;}
  .guiaov__pie .btn,.guiaov__cab .mapaov__x{display:none;}
}

/* ---- Blog: Vorschau im Editor und Einzelseite -------------- */
.postprev{border:1.5px solid var(--line);border-radius:var(--radius);padding:16px 18px;
  background:#fff;min-height:90px;max-height:340px;overflow-y:auto;}
.postprev__vacio{color:var(--ink-3);font-style:italic;}
.wrap--texto{max-width:760px;}
.entrada__cat{font-family:var(--head-font);font-style:normal;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;font-size:13px;color:var(--accent);margin-bottom:8px;}
.entrada{font-size:17.5px;line-height:1.72;color:var(--ink-2);}
.entrada h3{font-family:var(--head-font);font-style:normal;font-weight:800;text-transform:uppercase;
  font-size:24px;color:var(--ink);margin:34px 0 10px;letter-spacing:.01em;}
.entrada p{margin:0 0 18px;}
.entrada ul{margin:0 0 18px;padding-left:22px;}
.entrada li{margin-bottom:7px;}
.entrada blockquote{margin:0 0 20px;padding:4px 0 4px 20px;border-left:3px solid var(--accent);
  font-family:var(--serif-font, var(--body-font));font-size:19px;color:var(--ink);font-style:italic;}
.entrada a{color:var(--accent-700);text-underline-offset:3px;}
.entrada strong{color:var(--ink);}
.postprev .entrada,.postprev p{font-size:15.5px;line-height:1.6;}
.postprev h3{font-size:19px;margin:18px 0 8px;}
.postprev blockquote{font-size:16px;}

/* ---- Fahrgemeinschaften ----------------------------------- */
.viaje__mini{display:block;font-size:13px;color:var(--accent-700);font-weight:600;margin-top:2px;}
.rowlist li.viaje{display:block;}
.viaje__bal{margin:0 0 12px;font-size:14.5px;color:var(--ink-2);}
.viaje__bal--falta{color:var(--accent-700);font-weight:600;}
.viaje__coches{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:8px;}
.viaje__coche{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:10px 14px;}
.viaje__coche>div{display:flex;flex-direction:column;gap:2px;margin-right:auto;min-width:0;}
.viaje__coche b{font-family:var(--head-font);font-style:normal;font-weight:700;font-size:15px;color:var(--ink);}
.viaje__coche span{font-size:13.5px;color:var(--ink-3);}
.viaje__vacio{font-size:13.5px;color:var(--ink-3);padding:4px 0;}
.viaje__grupo{margin:0 0 6px;font-size:14px;color:var(--ink-2);}
.viaje__grupo b{font-family:var(--head-font);font-style:normal;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;font-size:12px;color:var(--ink-3);}
.viaje__grupo--falta b{color:var(--accent-700);}
.viaje__pie{margin-top:12px;}

/* Die Frage beim Anmelden */
.viajeov{position:fixed;inset:0;z-index:2100;background:rgba(15,17,40,.72);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:24px;}
.viajeov__caja{width:min(520px,100%);background:#fff;border-radius:var(--radius-lg);
  padding:26px;box-shadow:var(--shadow-lg);max-height:100%;overflow-y:auto;}
.viajeov__caja h3{font-family:var(--head-font);font-style:normal;font-weight:800;
  text-transform:uppercase;font-size:21px;color:var(--ink);margin:0 0 18px;}
.viajeov__ops{display:flex;flex-direction:column;gap:8px;}
.viajeov__op{display:flex;align-items:center;gap:11px;padding:12px 14px;cursor:pointer;
  border:1.5px solid var(--line);border-radius:var(--radius);font-size:15.5px;color:var(--ink);
  transition:.14s;}
.viajeov__op:hover{border-color:var(--ink-3);}
.viajeov__op.is-sel{border-color:var(--accent);background:color-mix(in oklab, var(--accent) 8%, transparent);}
.viajeov__plazas{display:flex;align-items:center;gap:10px;padding:4px 14px 10px 40px;
  font-size:14.5px;color:var(--ink-2);flex-wrap:wrap;}
.viajeov__plazas b{font-family:var(--head-font);font-size:19px;min-width:20px;text-align:center;}
.viajeov__total{margin:2px 0 6px 40px;font-size:15px;font-weight:600;color:var(--accent-700);}
.viajeov__pie{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;}
@media (max-width:560px){.viajeov__caja{padding:20px;}.viajeov__plazas{padding-left:14px;}
  .viajeov__total{margin-left:14px;}}

/* ---- Treffpunkt: Nadel und Auswahl ------------------------ */
.punto-nadel span{display:block;width:26px;height:26px;border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);background:var(--red);border:2.5px solid #fff;
  box-shadow:0 3px 10px rgba(0,0,0,.35);}
.puntoov{position:fixed;inset:0;z-index:2100;background:rgba(15,17,40,.72);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:28px;}
.puntoov__caja{width:min(880px,100%);height:min(680px,100%);background:#fff;
  border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;
  box-shadow:var(--shadow-lg);}
.puntoov__cab{display:flex;align-items:center;gap:16px;padding:14px 16px 14px 22px;
  border-bottom:1px solid var(--line);flex-shrink:0;}
.puntoov__cab b{font-family:var(--head-font);font-style:normal;font-weight:800;
  text-transform:uppercase;font-size:19px;color:var(--ink);margin-right:auto;}
.puntoov__mapa{flex:1;min-height:0;position:relative;background:#eceff5;}
.puntoov__mapa .leaflet-container{width:100%;height:100%;font:inherit;}
/* Das Fadenkreuz haengt ueber der Karte, nicht darin — es darf weder
   Klicks abfangen noch beim Verschieben mitwandern. */
.puntoov__cruz{position:absolute;left:50%;top:50%;width:44px;height:44px;
  margin:-22px 0 0 -22px;z-index:1000;pointer-events:none;}
.puntoov__cruz::before,.puntoov__cruz::after{content:"";position:absolute;
  background:var(--red);box-shadow:0 0 0 1.5px rgba(255,255,255,.9);}
.puntoov__cruz::before{left:50%;top:0;width:2px;height:100%;margin-left:-1px;}
.puntoov__cruz::after{top:50%;left:0;height:2px;width:100%;margin-top:-1px;}
.puntoov__pie{display:flex;align-items:center;gap:12px;padding:14px 18px;
  border-top:1px solid var(--line);flex-shrink:0;flex-wrap:wrap;}
.puntoov__dir{font-size:14.5px;color:var(--ink-2);margin-right:auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media (max-width:640px){
  .puntoov{padding:0;}
  .puntoov__caja{height:100%;border-radius:0;}
  .puntoov__dir{flex:1 1 100%;margin-right:0;white-space:normal;}
}

/* Anklickbare Teile einer Eventkarte: sehen aus wie Text, verhalten sich
   wie ein Knopf. */
.event__enlace{background:none;border:0;padding:0;font:inherit;color:inherit;
  cursor:pointer;text-decoration:underline;text-decoration-style:dotted;
  text-underline-offset:3px;}
.event__enlace:hover{color:var(--accent-700);text-decoration-style:solid;}
.event__tag.event__enlace{text-decoration:none;}
.event__tag.event__enlace:hover{background:var(--accent);color:#fff;}

/* Treffpunkt-Knopf im Formular */
.campo-mapa{display:flex;gap:8px;align-items:stretch;}
.campo-mapa input{flex:1;min-width:0;}
.campo-mapa button{flex-shrink:0;padding:0 14px;}
.campo-mapa button svg{width:20px;height:20px;}

/* ---- Rechtetexte als Overlay ------------------------------ */
.legalov{position:fixed;inset:0;z-index:2000;background:rgba(15,17,40,.72);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:28px;}
.legalov__caja{width:min(760px,100%);height:min(820px,100%);background:#fff;
  border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;
  box-shadow:var(--shadow-lg);}
.legalov__cab{display:flex;align-items:center;gap:14px;padding:14px 16px 14px 20px;
  border-bottom:1px solid var(--line);flex-shrink:0;}
.legalov__tabs{display:flex;gap:8px;margin-right:auto;flex-wrap:wrap;}
.legalov__tabs button{font-family:var(--head-font);font-style:normal;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;font-size:13px;padding:9px 15px;
  border:1.5px solid var(--line);border-radius:999px;background:#fff;color:var(--ink-2);
  cursor:pointer;transition:.15s;}
.legalov__tabs button:hover{border-color:var(--ink-3);}
.legalov__tabs button.is-active{background:var(--ink);border-color:var(--ink);color:#fff;}
.legalov__tit{font-family:var(--head-font);font-style:normal;font-weight:800;
  text-transform:uppercase;font-size:24px;color:var(--ink);margin:22px 26px 0;}
.legalov__cuerpo{flex:1;min-height:0;overflow-y:auto;padding:14px 26px 26px;}
.legalov__cuerpo h4{font-family:var(--head-font);font-style:normal;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;font-size:14px;color:var(--accent-700);
  margin:22px 0 6px;}
.legalov__cuerpo p{font-size:15.5px;line-height:1.62;color:var(--ink-2);margin:0 0 10px;}
.legalov__cuerpo a{color:var(--accent-700);}
/* Hinweis, dass der Text noch nicht fertig ist — bewusst nicht zu uebersehen */
.legalov__cuerpo .legal__aviso{background:color-mix(in oklab, var(--accent) 9%, transparent);
  border-left:3px solid var(--accent);padding:12px 14px;border-radius:0 var(--radius) var(--radius) 0;
  font-size:14.5px;color:var(--ink);margin-bottom:4px;}
.legal__falta{background:var(--accent);color:#fff;padding:1px 7px;border-radius:4px;
  font-family:var(--head-font);font-weight:700;font-size:12.5px;text-transform:uppercase;
  letter-spacing:.04em;}
@media (max-width:640px){
  .legalov{padding:0;}
  .legalov__caja{height:100%;border-radius:0;}
  .legalov__tit{font-size:20px;margin:18px 18px 0;}
  .legalov__cuerpo{padding:12px 18px 22px;}
}

/* ---- Aufnahmeweg (3 Schritte) ---------------------------- */
.joinsteps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-bottom:38px;}
.joinstep{display:flex;flex-direction:column;gap:8px;}
.joinstep b{
  width:38px;height:38px;border-radius:50%;background:var(--accent);color:#fff;
  display:grid;place-items:center;font-family:var(--head-font);font-style:normal;
  font-weight:800;font-size:17px;margin-bottom:4px;
}
.joinstep h4{font-size:20px;font-style:normal;color:#fff;margin:0;}
.joinstep p{margin:0;font-size:15.5px;color:rgba(255,255,255,.66);line-height:1.55;}

/* ---- Beiträge -------------------------------------------- */
.fees{
  display:grid;grid-template-columns:1fr 1fr 1.5fr;
  border:1px solid rgba(255,255,255,.18);border-radius:var(--radius-lg);
  overflow:hidden;margin-bottom:52px;
}
.fee{padding:26px 28px;border-right:1px solid rgba(255,255,255,.18);}
.fee__label{
  display:block;font-family:var(--head-font);font-style:normal;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;font-size:11.5px;
  color:var(--accent-300);margin-bottom:12px;   /* dunkler Beitragskasten */
}
.fee__price{
  display:block;font-family:var(--head-font);font-style:italic;font-weight:800;
  font-size:40px;line-height:1;color:#fff;margin-bottom:8px;
}
.fee__price small{font-size:17px;font-style:normal;font-weight:600;color:rgba(255,255,255,.55);}
.fee__note{font-size:14.5px;color:rgba(255,255,255,.62);line-height:1.5;}
[data-theme="classic"] .fee__price,[data-theme="modern"] .fee__price{font-style:normal;}

.fee__what{padding:26px 28px;background:rgba(255,255,255,.05);}
.fee__what h5{
  font-family:var(--head-font);font-style:normal;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;font-size:11.5px;
  color:rgba(255,255,255,.55);margin:0 0 14px;
}
.fee__what ul{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:1fr 1fr;gap:9px 22px;}
.fee__what li{
  display:flex;gap:9px;align-items:flex-start;
  font-size:15px;color:rgba(255,255,255,.82);line-height:1.45;
}
.fee__what li::before{
  content:"";flex-shrink:0;width:7px;height:7px;margin-top:7px;border-radius:50%;
  background:var(--accent);
}

@media (max-width:1024px){
  .joinsteps{grid-template-columns:1fr;gap:22px;}
  .fees{grid-template-columns:1fr 1fr;}
  .fee__what{grid-column:1 / -1;border-top:1px solid rgba(255,255,255,.18);}
  .fee:nth-child(2){border-right:0;}
}
@media (max-width:640px){
  .fees{grid-template-columns:1fr;}
  .fee{border-right:0;border-bottom:1px solid rgba(255,255,255,.18);}
  .fee__what ul{grid-template-columns:1fr;}
}

/* ---- Rückmeldungen in Auth-Formularen -------------------- */
.authmsg{
  padding:13px 16px;border-radius:var(--radius);margin-bottom:18px;
  font-size:15px;line-height:1.5;border-left:3px solid transparent;
}
.authmsg--error{background:color-mix(in oklab, var(--red) 10%, transparent);
  color:var(--red-700);border-left-color:var(--red);}
.authmsg--ok{background:color-mix(in oklab, #2f9e6f 14%, transparent);
  color:#1f6d4c;border-left-color:#2f9e6f;}
.authmsg--info{background:var(--cream-2);color:var(--ink-2);
  border-left-color:var(--accent-2);}
.btn.is-busy{opacity:.6;pointer-events:none;}

/* ---- Auswahlliste (Routen im Eventformular) ---------------- */
.picker{border:1.5px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;}
.picker__buscar{width:100%;border:0;border-bottom:1.5px solid var(--line);padding:11px 14px;
  font-family:var(--body-font);font-size:15px;background:transparent;}
.picker__buscar:focus{outline:none;border-bottom-color:var(--accent);}
/* Feste Hoehe statt max-height: Die Liste soll nicht bei jedem Tastendruck
   die Seite unter sich verschieben. */
.picker__lista{list-style:none;margin:0;padding:4px;height:168px;overflow-y:auto;}
.picker__op{display:flex;align-items:baseline;gap:10px;padding:8px 10px;border-radius:var(--radius);
  cursor:pointer;transition:background .12s;}
.picker__op:hover{background:rgba(0,0,0,.04);}
.picker__op b{font-size:14.5px;font-weight:600;color:var(--ink);margin-right:auto;}
.picker__op span{font-size:13px;color:var(--ink-3);flex-shrink:0;}
.picker__op.is-sel{background:color-mix(in oklab, var(--accent) 12%, transparent);}
.picker__op.is-sel b{color:var(--accent-700);}
.picker__vacio{padding:10px;font-size:13.5px;color:var(--ink-3);}
.field__hint{margin:8px 0 0;font-size:13px;color:var(--ink-3);}

/* ---- Mitgliedsbeitrag ------------------------------------ */
.cuota{border:1px solid var(--line);border-radius:var(--radius);background:#fff;
  padding:16px 18px;display:flex;flex-direction:column;gap:8px;}
.cuota__cab{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.cuota__cab b{font-family:var(--head-font);font-style:normal;font-weight:700;font-size:16px;color:var(--ink);}
.cuota p{margin:0;font-size:14.5px;color:var(--ink-2);}
.cuota .field__hint{margin:0;}
/* Nur wenn die Frist wirklich drueckt. Eine Karte, die das ganze Jahr rot
   leuchtet, liest nach zwei Wochen niemand mehr. */
.cuota--urge{border-color:var(--accent);
  box-shadow:0 0 0 2px color-mix(in oklab, var(--accent) 14%, transparent);}

/* ---- Teilnehmerliste unter einem Event -------------------- */
.rowlist li.gente{display:block;background:var(--cream);border-style:dashed;margin-top:-4px;}
.gente__tit{display:block;font-family:var(--head-font);font-style:normal;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;font-size:12.5px;color:var(--ink-3);margin-bottom:10px;}
.gente__lista{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px 18px;}
.gente__lista li{display:flex;align-items:baseline;gap:9px;font-size:15px;color:var(--ink);
  background:none;border:0;padding:0;}
.gente__n{font-family:var(--head-font);font-weight:700;font-size:12px;color:var(--ink-3);
  min-width:18px;text-align:right;font-variant-numeric:tabular-nums;}

/* Zeile, die gerade im Formular steht */
.rowlist li.is-editing{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in oklab, var(--accent) 18%, transparent);}
/* Vergangene Termine: da, aber optisch zurueckgenommen */
.rowlist--past{margin-top:14px;}
.rowlist--past li{opacity:.62;}

.rowlist--users li{gap:14px;}
.rowlist--users li>.nav__avatar{width:40px;height:40px;font-size:14px;}
/* Umbrechen duerfen die Knoepfe immer. Eine Zeile aus vier Knoepfen —
   Apuntarme, Editar, Borrar, "3 inscritos" — misst rund 350px; auf einem
   Telefon stehen keine 340 zur Verfuegung. Ohne Umbruch schiebt sie die
   ganze Spalte breiter als den Bildschirm, und weil Kopf- und Fusszeile
   am Ansichtsfenster haengen, endet ihr Hintergrund dann sichtbar frueher
   als der Inhalt. */
.rowlist__actions{display:flex;flex-direction:row;align-items:center;gap:8px;flex-wrap:wrap;
  flex-shrink:0;margin-right:0;}
.panel__search{font-family:var(--body-font);font-size:15px;padding:10px 14px;border:1.5px solid var(--line);
  border-radius:var(--radius);background:#fff;color:var(--ink);min-width:262px;}
.panel__search:focus{outline:none;border-color:var(--accent);}
@media (max-width:760px){.rowlist--users li{flex-wrap:wrap;}.rowlist--users li>div:not(.rowlist__actions){flex:1 1 100%;}
  /* flex:1 hiess flex-basis:0 — die Knoepfe schrumpften bis auf ihr Wort
     und dann nicht weiter, und was uebrig blieb, lief aus der Zeile. */
  .rowlist__actions{width:100%;}.rowlist__actions .btn{flex:1 1 132px;justify-content:center;}
  .panel__search{min-width:0;width:100%;}}