/* ========================================================================== Powerbike Winterthur — Design System Reduziert, mobile-first, sympathisch. Schwarz / Weiss / Powerbike-Rot. ========================================================================== */ :root { --red: #E4231D; /* nahe PANTONE 485 C */ --red-dark: #B81812; --red-soft: #FDEDEC; /* Vereinsfarben. Verbindlich sind die Pantone-Werte aus den Santini- Produktionsdaten der Trikots (CS990DVLLBMX, 07.08.2025): Schwarz NERO 100 alle drei Trikots Rot PANTONE 485 C alle drei Rot 2 PANTONE 186 C alle drei Türkis PANTONE 326 C nur Variante B Violett PANTONE 2592 C nur Variante C MASSGEBLICH IST DIE NUMMER — 485, 186, 326, 2592. Der Buchstabe dahinter ist nur der Untergrund: C = Coated (gestrichenes Papier, satter), U = Uncoated (ungestrichen, matter). Dieselbe Farbe, andere Wirkung. Der Verein schickte Santini Faecherkarten mit «326 U», «2592 U» und «186 C»; Santini notierte im Datenblatt durchweg «C». Kein Widerspruch, nur eine andere Reihe derselben Farben. Fuer Stoff gilt streng genommen keine von beiden — dafuer haette Pantone die TCX-Reihe. Die Hexwerte unten sind veroeffentlichte Naeherungen — Santini schreibt auf das Blatt: «refer to the pantone color book/chart only». Fotos der Faecherkarten wurden gegengeprueft (21.09.2026) und liegen rund 20 Punkte je Kanal neben diesen Werten, also im Rahmen dessen, was ein Handyfoto ohne Graukarte abweicht. Kein Grund, die getesteten Werte dagegen einzutauschen. Fuer Flaechen und Text auf dunklem Grund je eine hellere Variante. */ /* PANTONE 326 C (#00B2A9) schafft auf Weiss nur 2.64:1 und ist als Text unlesbar. #12897C ist die dunklere, texttaugliche Stufe derselben Farbe. */ --tuerkis: #12897C; --tuerkis-hell: #35D6C1; --tuerkis-dark: #0C6A60; --tuerkis-soft: #E7F5F3; /* Ein Violett fuer alles. Frueher standen hier zwei: das dunkle Logo-Violett #400078 fuer Flaechen und das Trikot-Violett fuer Text — nebeneinander sahen sie aus wie zwei verschiedene Farben. Jetzt gilt ueberall PANTONE 2592 C. Weisse Schrift darauf: 6.28:1, also lesbar. */ --violett: #9B26B6; /* Das Logo-Violett #400078 ist fuer Text zu dunkel: nur 1.33:1 Abstand zur Schriftfarbe, es liest sich als Schwarz. Darum fuer Text das Trikot- Violett PANTONE 2592 C — 6.28:1 auf Weiss, 2.98:1 zur Schrift, also lesbar UND erkennbar violett. Flaechen und Raender bleiben beim dunklen Logo-Ton. */ --violett-text: #9B26B6; /* PANTONE 2592 C */ --violett-hell: #9B6BFF; /* Dunklere Stufe DESSELBEN Violetts — fuer Schrift auf hellviolettem Grund. #35006A gehoerte zum alten Logo-Violett und fiel aus der Reihe. 8.61:1 auf --violett-soft. */ --violett-dark: #6B1A7E; --violett-soft: #F0EAFB; /* Die drei Jersey-Farben als ein Band — Rot, Tuerkis, Violett in Dritteln. */ --jersey: linear-gradient(90deg, var(--red) 0 33.334%, var(--tuerkis) 33.334% 66.667%, var(--violett) 66.667% 100%); /* Akzent je Seite. Rot ist die Grundstimmung und bleibt es fuer alle Handlungsknoepfe — wer «Anmelden» sucht, soll es ueberall gleich erkennen. Gefaerbt werden nur Eyebrow und Textverweise: oft zu sehen, nie laut. Gesetzt wird der Akzent ueber data-akzent am , das kommt aus dem Front-Matter der jeweiligen Seite. */ --akzent: var(--red); --akzent-hell: #FF6B63; --ink: #121214; --ink-2: #3D3D44; --muted: #6E6E78; --bg: #FFFFFF; --surface: #F5F5F6; --surface-2: #EDEDEF; --line: #E3E3E7; --dark: #131316; --r-sm: 10px; --r: 16px; --r-lg: 22px; --r-pill: 999px; --shadow-sm: 0 1px 2px rgba(18,18,20,.06), 0 2px 8px rgba(18,18,20,.04); --shadow: 0 2px 4px rgba(18,18,20,.05), 0 12px 28px rgba(18,18,20,.08); --wrap: 1120px; --pad: 20px; --bottom-nav-h: 64px; --f-display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; --f-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } body[data-akzent="tuerkis"] { --akzent: var(--tuerkis); --akzent-hell: var(--tuerkis-hell); } body[data-akzent="violett"] { --akzent: var(--violett-text); --akzent-hell: var(--violett-hell); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom)); } @media (min-width: 900px) { body { padding-bottom: 0; } } img { max-width: 100%; display: block; } a { color: inherit; } h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 700; letter-spacing: -.02em; line-height: 1.08; margin: 0 0 .5em; text-wrap: balance; } h1 { font-size: clamp(2.1rem, 7vw, 3.6rem); } h2 { font-size: clamp(1.6rem, 4.6vw, 2.4rem); } h3 { font-size: 1.18rem; letter-spacing: -.01em; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } .lead { font-size: 1.1rem; color: var(--ink-2); } .muted { color: var(--muted); } .small { font-size: .92rem; } /* --------------------------------------------------------------- Layout -- */ .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); } .wrap--narrow { max-width: 760px; } section { padding: 52px 0; } @media (min-width: 900px) { section { padding: 88px 0; } } section.tight { padding: 32px 0; } .section-head { max-width: 640px; margin-bottom: 28px; } .section-head p { color: var(--ink-2); } .eyebrow { display: inline-block; font-family: var(--f-display); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--akzent); margin-bottom: 10px; } .surface { background: var(--surface); } .inverted { background: var(--dark); color: #fff; } .inverted .lead, .inverted p { color: rgba(255,255,255,.78); } .inverted .eyebrow { color: var(--akzent-hell); } /* -------------------------------------------------------------- Buttons -- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px; border: 1.5px solid transparent; border-radius: var(--r-pill); font-family: var(--f-display); font-size: 1rem; font-weight: 700; text-decoration: none; cursor: pointer; transition: transform .15s ease, background .15s ease, border-color .15s ease; } .btn:active { transform: scale(.98); } .btn--primary { background: var(--red); color: #fff; } .btn--primary:hover { background: var(--red-dark); } .btn--dark { background: var(--ink); color: #fff; } .btn--dark:hover { background: #000; } .btn--ghost { border-color: var(--line); background: var(--bg); color: var(--ink); } .btn--ghost:hover { border-color: var(--ink); } .inverted .btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); } .inverted .btn--ghost:hover { border-color: #fff; } .btn--block { width: 100%; } .btn-row { display: flex; flex-wrap: wrap; gap: 12px; } .link-arrow { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-display); font-weight: 700; color: var(--akzent); text-decoration: none; } .inverted .link-arrow { color: var(--akzent-hell); } .link-arrow::after { content: "→"; transition: transform .15s ease; } .link-arrow:hover::after { transform: translateX(3px); } /* --------------------------------------------------------------- Header -- */ .header { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line); } .header__inner { display: flex; align-items: center; gap: 16px; height: 64px; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); } .brand { display: flex; align-items: center; text-decoration: none; margin-right: auto; } .brand img { height: 30px; width: auto; } .nav-desktop { display: none; } @media (min-width: 900px) { .nav-desktop { display: flex; align-items: center; gap: 4px; } .nav-desktop a { padding: 8px 14px; border-radius: var(--r-pill); font-family: var(--f-display); font-weight: 600; font-size: .95rem; text-decoration: none; color: var(--ink-2); } .nav-desktop a:hover { background: var(--surface); color: var(--ink); } .nav-desktop a[aria-current="page"] { color: var(--ink); background: var(--surface-2); } } .header .btn { min-height: 42px; padding: 0 18px; font-size: .95rem; } .header__cta { display: none; } @media (min-width: 700px) { .header__cta { display: inline-flex; } } .burger { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: var(--surface); border: 0; border-radius: 12px; cursor: pointer; } .burger span { position: relative; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; } .burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; } .burger span::before { top: -6px; } .burger span::after { top: 6px; } @media (min-width: 900px) { .burger { display: none; } } /* --------------------------------------------------------- Menu overlay -- */ .menu { position: fixed; inset: 0; z-index: 90; background: var(--bg); padding: 0 var(--pad) 40px; overflow-y: auto; /* Hart ein- und ausgeblendet statt ueber Deckkraft eingefadet: sonst scheint die Seite darunter waehrend der Animation durch und es sieht aus wie zwei Ebenen uebereinander. Das Menue ist ab dem ersten Bild deckend, nur der Inhalt schiebt sich kurz hoch. */ display: none; } .menu[data-open="true"] { display: block; } .menu[data-open="true"] > * { animation: menu-in .18s ease-out both; } @keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .menu__top { display: flex; align-items: center; height: 64px; } .menu__top .brand { margin-right: auto; } .menu__close { width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--surface); font-size: 22px; line-height: 1; cursor: pointer; color: var(--ink); } .menu__group { margin-top: 22px; } .menu__group h4 { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .menu a.menu__link { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--line); font-family: var(--f-display); font-size: 1.15rem; font-weight: 700; text-decoration: none; } .menu a.menu__link::after { content: "→"; color: var(--muted); } .menu a.menu__link[target="_blank"]::after { content: "↗"; } /* ----------------------------------------------------------- Bottom nav -- */ .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: rgba(255,255,255,.94); backdrop-filter: saturate(180%) blur(12px); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); } .tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: var(--bottom-nav-h); font-size: .68rem; font-weight: 600; letter-spacing: .01em; color: var(--muted); text-decoration: none; } .tabbar a svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; } .tabbar a[aria-current="page"] { color: var(--red); } @media (min-width: 900px) { .tabbar { display: none; } } /* ----------------------------------------------------------------- Hero -- */ .hero { position: relative; background: var(--dark); color: #fff; overflow: hidden; } .hero img.hero__bg, .hero video.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; opacity: .55; } .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19,19,22,.55) 0%, rgba(19,19,22,.35) 45%, rgba(19,19,22,.92) 100%); } .hero__inner { position: relative; z-index: 2; max-width: var(--wrap); margin: 0 auto; padding: 96px var(--pad) 56px; } @media (min-width: 900px) { .hero__inner { padding: 150px var(--pad) 110px; } } .hero h1 { max-width: 14ch; } .hero p { max-width: 46ch; color: rgba(255,255,255,.82); font-size: 1.08rem; } .hero .btn-row { margin-top: 26px; } .hero--page .hero__inner { padding: 56px var(--pad) 44px; } @media (min-width: 900px) { .hero--page .hero__inner { padding: 84px var(--pad) 72px; } } .hero--page h1 { max-width: 20ch; } /* ---------------------------------------------------------------- Cards -- */ .grid { display: grid; gap: 16px; } .grid--2 { grid-template-columns: minmax(0, 1fr); } .grid--3 { grid-template-columns: minmax(0, 1fr); } .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 700px) { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 560px) { .grid--4 .card { padding: 18px; } .grid--4 .card h3 { font-size: 1.05rem; } } .card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; display: flex; flex-direction: column; gap: 8px; } .card--link { text-decoration: none; transition: border-color .15s ease, transform .15s ease; } .card--link:hover { border-color: var(--ink); transform: translateY(-2px); } .card h3 { margin-bottom: 2px; } .card p { color: var(--ink-2); font-size: .98rem; } .card__foot { margin-top: auto; padding-top: 12px; } .card--media { padding: 0; overflow: hidden; } .card--media img { aspect-ratio: 4/3; object-fit: cover; width: 100%; } .card--media .card__body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .surface .card { background: var(--bg); border-color: transparent; } /* ----------------------------------------------------------------- Step -- */ .step { position: relative; padding-left: 0; } .step__num { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-bottom: 12px; border-radius: var(--r-pill); background: var(--red); color: #fff; font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; } /* ---------------------------------------------------------------- Stats -- */ .stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border-radius: var(--r-lg); overflow: hidden; } @media (min-width: 700px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .stat { background: var(--bg); padding: 24px 20px; } .inverted .stats { background: rgba(255,255,255,.14); } .inverted .stat { background: var(--dark); } .stat b { display: block; font-family: var(--f-display); font-weight: 700; font-size: clamp(1.9rem, 6vw, 2.6rem); line-height: 1; letter-spacing: -.03em; } .stat span { display: block; margin-top: 6px; font-size: .9rem; color: var(--muted); } .inverted .stat span { color: rgba(255,255,255,.65); } /* ----------------------------------------------------------- Fact / Info -- */ .facts { display: grid; gap: 0; border-top: 1px solid var(--line); } .fact { display: flex; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); } .fact dt { flex: 0 0 40%; max-width: 190px; color: var(--muted); font-size: .95rem; margin: 0; } .fact dd { margin: 0; flex: 1; font-weight: 500; } .pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-2); font-size: .82rem; font-weight: 600; } .pill--red { background: var(--red-soft); color: var(--red-dark); } .pill--open { background: #E7F6EC; color: #14653A; } .pill--full { background: var(--surface-2); color: var(--muted); } /* ------------------------------------------------------------- Accordion -- */ .acc { border-top: 1px solid var(--line); } .acc details { border-bottom: 1px solid var(--line); } .acc summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; cursor: pointer; list-style: none; font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; } .acc summary::-webkit-details-marker { display: none; } .acc summary::after { content: "+"; font-size: 1.5rem; font-weight: 400; color: var(--muted); line-height: 1; } .acc details[open] summary::after { content: "–"; } .acc .acc__body { padding-bottom: 20px; color: var(--ink-2); } .acc .acc__body ul { margin: 0; padding-left: 20px; } .acc .acc__body li { margin-bottom: 6px; } /* --------------------------------------------------------- Fairgate form -- */ .formbox { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--bg); } .formbox__head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); background: var(--surface); } .formbox__head strong { font-family: var(--f-display); font-size: 1rem; } .formbox__head .pill { margin-left: auto; } .formbox__frame { position: relative; min-height: 620px; background: var(--bg); } .formbox__frame iframe { width: 100%; border: 0; display: block; min-height: 620px; } .formbox__loading { position: absolute; inset: 0; display: grid; place-items: center; gap: 10px; color: var(--muted); font-size: .95rem; text-align: center; padding: 24px; } .formbox__loading[hidden] { display: none; } .spinner { width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid var(--surface-2); border-top-color: var(--red); animation: spin .8s linear infinite; margin: 0 auto 10px; } @keyframes spin { to { transform: rotate(360deg); } } .formbox__fallback { padding: 20px; border-top: 1px solid var(--line); background: var(--surface); font-size: .93rem; } .formbox__fallback a { color: var(--red); font-weight: 600; } /* ------------------------------------------------------------- Instagram -- */ .insta__head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; } .insta__head h2 { margin: 0; } .insta__handle { color: var(--muted); font-weight: 600; } .insta-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } @media (min-width: 700px) { .insta-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } } .insta-item { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--r); background: var(--surface-2); text-decoration: none; } .insta-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; } .insta-item:hover img { transform: scale(1.04); } .insta-item__cap { position: absolute; inset: auto 0 0 0; padding: 26px 12px 10px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.72)); color: #fff; font-size: .78rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .insta-skeleton { background: var(--surface-2); border-radius: var(--r); aspect-ratio: 1; animation: pulse 1.4s ease-in-out infinite; } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } } /* --------------------------------------------------------------- Banner -- */ .cta-band { border-radius: var(--r-lg); background: var(--red); color: #fff; padding: 34px 26px; display: flex; flex-direction: column; gap: 18px; } @media (min-width: 800px) { .cta-band { flex-direction: row; align-items: center; padding: 44px 44px; } .cta-band > div:first-child { flex: 1; } } .cta-band h2 { margin-bottom: 6px; } .cta-band p { color: rgba(255,255,255,.88); margin: 0; } .cta-band .btn { background: #fff; color: var(--red-dark); } .cta-band .btn:hover { background: #FFF1F0; } /* --------------------------------------------------------------- Footer -- */ .footer { background: var(--dark); color: rgba(255,255,255,.72); padding: 48px 0 40px; } .footer a { color: rgba(255,255,255,.72); text-decoration: none; } .footer a:hover { color: #fff; } .footer img.footer__logo { height: 34px; margin-bottom: 18px; } .footer__grid { display: grid; gap: 32px; } @media (min-width: 800px) { .footer__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } } .footer h4 { color: #fff; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px; } .footer ul { list-style: none; margin: 0; padding: 0; } .footer li { margin-bottom: 8px; font-size: .95rem; } .footer__bottom { margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-wrap: wrap; gap: 12px 24px; font-size: .87rem; } .footer__bottom span { margin-right: auto; } /* ---------------------------------------------------------------- Utils -- */ .stack > * + * { margin-top: 16px; } .mt-32 { margin-top: 32px; } .mt-40 { margin-top: 40px; } .center { text-align: center; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 0 0 12px 0; } .skip:focus { left: 0; } :focus-visible { outline: 3px solid var(--red); outline-offset: 2px; border-radius: 4px; } /* ========================================================================== Bild-Komponenten ========================================================================== */ /* Bild mit Bildlegende */ .figure { margin: 0; } .figure img { width: 100%; border-radius: var(--r-lg); object-fit: cover; } .figure figcaption { margin-top: 10px; font-size: .88rem; color: var(--muted); } /* Bilderstreifen — auf dem Handy seitlich wischbar, auf grossen Schirmen ein Raster */ .strip { display: grid; grid-auto-flow: column; grid-auto-columns: 76%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; /* Snap-Punkte muessen den Innenabstand kennen, sonst rutscht das erste Bild beim Laden an den Bildschirmrand. */ scroll-padding-inline: var(--pad); padding-bottom: 6px; margin: 0 calc(var(--pad) * -1); padding-inline: var(--pad); scrollbar-width: none; } .strip::-webkit-scrollbar { display: none; } .strip > * { scroll-snap-align: start; } .strip img { aspect-ratio: 4/3; } @media (min-width: 700px) { .strip { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; margin: 0; padding-inline: 0; gap: 16px; } } /* Mosaik — ein grosses Bild, mehrere kleine */ .mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .mosaic img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r); aspect-ratio: 1; } /* Auf dem Handy: erstes und letztes Bild ueber die volle Breite — ergibt ein sauberes Raster ohne einzelne Kachel am Schluss. */ .mosaic > *:first-child, .mosaic > *:last-child { grid-column: span 2; } .mosaic > *:first-child img, .mosaic > *:last-child img { aspect-ratio: 16/10; } @media (min-width: 700px) { .mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .mosaic > *:first-child, .mosaic > *:last-child { grid-column: auto; } .mosaic > *:first-child img, .mosaic > *:last-child img { aspect-ratio: 1; } } /* Bild neben Text */ .split { display: grid; gap: 24px; align-items: center; } @media (min-width: 800px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; } .split--flip > *:first-child { order: 2; } } .split img { width: 100%; border-radius: var(--r-lg); aspect-ratio: 4/3; object-fit: cover; } /* Bildkarte mit Text darunter (Karten mit Foto) */ .card--media img { aspect-ratio: 3/2; } /* ========================================================================== Entwicklungspfad, Wochenplan, Struktur, Kalender, Shop-Popup ========================================================================== */ /* --------------------------------------------------- Entwicklungspfad -- */ .levels { display: grid; gap: 14px; } /* --- Entwicklungspfad in drei Phasen ------------------------------------ Rot = Einstieg, Türkis = Altersgruppen, Violett = Leistungspfad. Die Farbe markiert die Phase, nicht die einzelne Gruppe — so heisst sie etwas, statt bloss bunt zu sein. */ /* Der Pfad ist eine Leseflaeche, keine Tabelle: ueber die volle Breite eines grossen Schirms werden die Zeilen zu lang, das Auge verliert den Zeilenanfang. Darum eine ruhige Spalte in der Mitte. */ .phase, .weiche, .level--neben, .levels + .small { max-width: 860px; margin-left: auto; margin-right: auto; } .phase { --phasenfarbe: var(--red); } .phase + .phase { margin-top: 28px; } .phase--start { --phasenfarbe: var(--red); } .phase--gruppen { --phasenfarbe: var(--tuerkis); } .phase--leistung { --phasenfarbe: var(--violett); } .phase__titel { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-family: var(--f-body); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--phasenfarbe); } .phase__titel::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--phasenfarbe) 28%, transparent); } .level { background: var(--bg); border: 1px solid var(--line); border-left: 3px solid var(--phasenfarbe, var(--line)); border-radius: var(--r-lg); padding: 18px 20px; } .level--entry { background: var(--surface); } .level--neben { border-left-color: var(--line); background: var(--surface); } .level__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .level__head h3 { margin: 0; } .level__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: var(--r-pill); background: var(--phasenfarbe, var(--ink)); color: #fff; font-family: var(--f-body); font-size: .8rem; font-weight: 700; flex: none; } .level__badge--stern { font-size: .9rem; line-height: 1; } .level__age { margin-left: auto; font-size: .88rem; color: var(--muted); font-weight: 600; } .level__note { font-size: .82rem; color: var(--muted); font-weight: 500; } .level p { color: var(--ink-2); font-size: .96rem; } /* Inhalte als feine Punkte statt als Etiketten. Fünf Gruppen mit je fünf Etiketten ergeben eine Wand aus Kästchen — Punkte ordnen sich unter. */ .level__list { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 4px 20px; font-size: .89rem; color: var(--muted); } @media (min-width: 560px) { .level__list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .level__list li { display: flex; align-items: baseline; gap: 8px; } .level__list li::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--phasenfarbe, var(--muted)); transform: translateY(-1px); } .level__count { margin: 14px 0 0; font-size: .88rem; color: var(--muted); } .level__count b { font-family: var(--f-display); font-size: 1.15rem; color: var(--ink); } /* Die Racing-Gruppen: drei ruhige Felder, keine Aufzählung im Fliesstext */ .racing { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .racing__gruppe { padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid color-mix(in srgb, var(--phasenfarbe) 35%, transparent); background: color-mix(in srgb, var(--phasenfarbe) 7%, transparent); color: var(--phasenfarbe); font-size: .85rem; font-weight: 600; } /* Die Weiche zwischen Altersgruppen und Leistungspfad */ .weiche { display: flex; align-items: flex-start; gap: 14px; /* «auto» links und rechts, nicht 0: Die gemeinsame Regel weiter oben zentriert .phase und .weiche auf 860 Pixel — ein «margin: 28px 0» hier haette sie danach wieder an den linken Rand gesetzt. Genau das war der Versatz gegenueber den Gruppenkarten. */ margin: 28px auto; padding: 16px 20px; border: 1px dashed color-mix(in srgb, var(--violett) 45%, transparent); border-radius: var(--r-lg); background: color-mix(in srgb, var(--violett) 4%, transparent); font-size: .95rem; color: var(--ink-2); } .weiche__stern { color: var(--violett); font-size: 1.2rem; line-height: 1.3; flex: none; } .crit__icon { font-size: 1.8rem; line-height: 1; } /* ========================================================================== Ämtli-Anmeldung Label, Feld und Erklärung standen in einem

nebeneinander und flossen als ein langer Absatz — man las «Dein Name [Feld] E-Mail [Feld] Du bekommst eine Mail…» in einem Zug. Jetzt ist jedes Feld ein eigener Block mit Beschriftung oben, Feld darunter, Erklärung zuletzt. Türkis ordnet: Es ist die Farbe für die Menschen im Verein, und genau darum geht es hier. Rot bleibt dem einen Knopf vorbehalten, der etwas auslöst. ========================================================================== */ .anmeldung { display: grid; gap: 22px; margin-top: 28px; padding: 24px 22px; background: var(--bg); border: 1px solid var(--line); border-left: 3px solid var(--tuerkis); border-radius: var(--r-lg); } .anmeldung__feld { display: grid; gap: 7px; } .anmeldung__feld label { font-weight: 600; font-size: .95rem; color: var(--ink); display: flex; align-items: baseline; gap: 8px; } .anmeldung__optional { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); background: var(--surface); padding: 2px 8px; border-radius: var(--r-pill); } .anmeldung__feld input { width: 100%; padding: 12px 14px; font: inherit; font-size: 1rem; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); transition: border-color .15s ease, box-shadow .15s ease; } .anmeldung__feld input::placeholder { color: #A8A8B0; } .anmeldung__feld input:focus { outline: 0; border-color: var(--tuerkis); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tuerkis) 18%, transparent); } .anmeldung__hinweis { font-size: .87rem; line-height: 1.5; color: var(--ink-2); } .anmeldung__abschluss { margin-top: 26px; } /* ========================================================================== Aufklappbare Abschnitte Drei lange Blöcke auf der Trainingsseite — Wochenplan, Kalender-Abo, Entwicklungspfad. Zusammengeklappt sieht man die drei Überschriften untereinander und entscheidet, was man lesen will, statt zu scrollen. Der Kopf sieht aus wie jede andere Abschnittsüberschrift; nur der Pfeil rechts verrät, dass man ihn anklicken kann. ========================================================================== */ /* Die drei Abschnitte sollen als Liste gelesen werden. Mit dem normalen Abschnittsrhythmus lagen 178 Pixel zwischen zwei Ueberschriften — dann wirkt jede fuer sich und nicht als Auswahl. Der Klappkopf bringt seinen eigenen Abstand mit, darum hier keiner. */ .sektion--klapp { padding-top: 0; padding-bottom: 0; } .klappsektion { border-top: 1px solid var(--line); } .klappsektion + .klappsektion { border-top: 0; } /* Raster statt Reihe: Die Augenbraue gehoert UEBER die Ueberschrift, wie in jedem anderen Abschnittskopf — nebeneinander sah es aus wie ein Etikett. Der Pfeil steht rechts und ueberspannt beide Zeilen. */ .klappsektion__kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px; padding: 26px 0; cursor: pointer; list-style: none; } .klappsektion__kopf::-webkit-details-marker { display: none; } .klappsektion__kopf .eyebrow { grid-column: 1; grid-row: 1; display: block; } .klappsektion__kopf h2 { grid-column: 1; grid-row: 2; margin: 2px 0 0; } .klappsektion__kopf::after { content: ""; grid-column: 2; grid-row: 1 / span 2; justify-self: end; width: 11px; height: 11px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-3px); transition: transform .18s ease, border-color .18s ease; } .klappsektion[open] > .klappsektion__kopf::after { transform: rotate(-135deg) translateY(-2px); } .klappsektion__kopf:hover::after { border-color: var(--red); } .klappsektion__inhalt { padding-bottom: 40px; } .klappsektion__lead { max-width: 640px; margin: 0 0 28px; color: var(--ink-2); } /* ----------------------------------------------------------- Wochenplan -- */ .week { display: grid; gap: 14px; } @media (min-width: 800px) { .week { grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start; } } .week__day { background: var(--surface); border-radius: var(--r-lg); padding: 16px; } .surface .week__day { background: var(--bg); } .week__title { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } /* Das Datum neben dem Wochentag. Ohne es koennte der Plan von jedem Jahr sein — mit ihm ist sofort klar: das ist diese Woche. */ .week__datum { font-weight: 700; color: var(--ink); letter-spacing: .02em; } /* Blaettern zwischen den Wochen. Steht erst da, wenn das Skript laeuft — ohne JavaScript waere ein Pfeil ohne Wirkung schlimmer als keiner. */ .week__kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .week__spanne { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; } .week__spanne strong { font-family: var(--f-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; } /* Die Kalenderwoche als ruhiges Schild — im Trainerbereich ist sie das Arbeitsmittel und steht vorn, hier genuegt sie als Beigabe. */ .week__kw { font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--akzent); background: color-mix(in srgb, var(--akzent) 10%, transparent); border-radius: 999px; padding: 4px 10px; white-space: nowrap; } .week__pfeil { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-size: 1.35rem; line-height: 1; cursor: pointer; transition: border-color .15s ease, background .15s ease; } .week__pfeil:hover { border-color: var(--ink); background: var(--surface-2); } .week__heute { border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 999px; padding: 9px 18px; font: inherit; font-weight: 700; font-size: .88rem; cursor: pointer; white-space: nowrap; transition: border-color .15s ease; } .week__heute:hover { border-color: var(--ink); } @media (max-width: 560px) { .week__spanne { order: -1; flex-basis: 100%; } .week__spanne strong { font-size: 1.1rem; } } /* Ferien und Ausfaelle. Der Tag bleibt stehen — wer ihn sucht, soll den Grund lesen und nicht ein Loch im Plan finden. */ .week__day--ferien, .week__day--aus { opacity: .62; } /* Ferienkurs am Vormittag. Er faellt aus der Woche heraus — andere Zeit, anderes Publikum — und soll das auch zeigen. */ .slot--ferienkurs { border-left-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 5%, var(--bg)); } .week__hinweis { margin: -6px 0 12px; font-size: .84rem; font-weight: 600; color: var(--akzent); } .week__day--aus .week__hinweis { color: var(--muted); } .slot { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; margin-bottom: 10px; } .slot:last-child { margin-bottom: 0; } .slot__time { font-family: var(--f-display); font-weight: 700; font-size: .95rem; margin-bottom: 6px; } .slot__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .slot__head strong { font-size: .92rem; } .slot__head .pill { font-size: .72rem; padding: 3px 9px; } .slot__groups { margin: 0 0 8px; padding: 0; list-style: none; } .slot__groups li { font-size: .84rem; color: var(--ink-2); padding: 3px 0; border-bottom: 1px dashed var(--line); } .slot__groups li:last-child { border-bottom: 0; } .slot__details { margin: 0; font-size: .8rem; color: var(--muted); } /* -------------------------------------------------------------- FAQ -- */ .faq__group { margin: 32px 0 0; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--red); } .faq__group:first-child { margin-top: 0; } .acc summary { font-size: .98rem; } /* ---------------------------------------------------------- Personen -- */ .person { align-items: flex-start; } .person__photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; } .person__photo--initials { background: var(--surface-2); color: var(--muted); font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; } .person__role { margin: 0; font-weight: 600; color: var(--red); font-size: .95rem; } .person__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 12px; } .person__tags .pill { font-size: .74rem; padding: 3px 9px; } /* ------------------------------------------------------- Organigramm -- */ /* --------------------------------------------------- Vereinsstruktur -- Zwei Teile statt einer Leiter: oben die Organe, die entscheiden, darunter die Bereiche, in denen gearbeitet wird — nebeneinander, nicht untereinander. Eine Leiter wuerde behaupten, Infrastruktur sei dem Trainerteam untergeordnet. Ist sie nicht. */ .org__titel { margin: 0 0 14px; font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--akzent); } .org__titel + * { margin-top: 0; } .org > .org__titel:not(:first-child) { margin-top: 40px; } /* Die Organe: eine kurze, nummerierte Kette — hier ist die Reihenfolge echt. */ .org__organe { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .org__organ { position: relative; padding: 16px 20px 16px 52px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); counter-increment: organ; } .org__organe { counter-reset: organ; } .org__organ::before { content: counter(organ); position: absolute; left: 18px; top: 17px; width: 22px; height: 22px; border-radius: 50%; background: var(--akzent); color: #fff; font-size: .76rem; font-weight: 700; line-height: 22px; text-align: center; } .org__organ p { margin: 4px 0 0; color: var(--ink-2); font-size: .95rem; } /* Die Bereiche: gleichwertig nebeneinander. */ .org__bereiche { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); } .org__bereich { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border-radius: var(--r); background: var(--bg); border: 1px solid var(--line); } .org__bereich--kern { border-color: color-mix(in srgb, var(--akzent) 45%, var(--line)); } .org__bereich p { margin: 0; color: var(--ink-2); font-size: .93rem; flex: 1; } .org__kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .org__kopf strong { font-family: var(--f-display); font-size: 1.05rem; } .org__kopf .pill { margin-left: auto; font-size: .74rem; } .org__kern { margin-left: auto; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--akzent); background: color-mix(in srgb, var(--akzent) 12%, transparent); border-radius: 999px; padding: 3px 9px; } .org__zahl { font-size: .82rem; font-weight: 700; color: var(--akzent); letter-spacing: .02em; } .org__zahl--leer { color: var(--muted); font-weight: 600; } .org__fuss { margin: 24px 0 0; color: var(--ink-2); } .org__fuss .link-arrow { margin-left: 8px; } /* ---------------------------------------------------------- Kalender -- */ .cal__filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; } .chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--bg); color: var(--ink-2); font-family: var(--f-body); font-size: .86rem; font-weight: 600; cursor: pointer; transition: border-color .15s ease, background .15s ease; } .chip:hover { border-color: color-mix(in srgb, var(--chipfarbe, var(--ink)) 55%, transparent); } /* Aktiv traegt der Knopf die Farbe seiner Kategorie — dieselbe Farbe wie der Strich am Termin. Man sieht ohne Erklaerung, was zusammengehoert. */ .chip.is-active { background: var(--chipfarbe, var(--ink)); border-color: var(--chipfarbe, var(--ink)); color: #fff; } .chip__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--chipfarbe, var(--ink)); } .chip.is-active .chip__dot { background: rgba(255,255,255,.85); } /* Die Zahl sagt vorher, wie viele Termine der Filter uebrig laesst. */ .chip__zahl { font-size: .76rem; font-weight: 700; line-height: 1; padding: 3px 6px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--chipfarbe, var(--ink)) 13%, transparent); color: var(--chipfarbe, var(--ink)); } .chip.is-active .chip__zahl { background: rgba(255,255,255,.22); color: #fff; } .cal__filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; } /* Termin mit Anmeldelink: das ganze Kaestchen ist anklickbar. */ .cal__event--link { text-decoration: none; cursor: pointer; } .cal__event--link:hover { border-color: var(--typfarbe); } .cal__go { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: .8rem; font-weight: 700; color: var(--typfarbe); } /* Der Pfeil nur bei fremden Adressen — er ist das Versprechen «neues Fenster», nicht bloss Dekoration. */ .cal__go--extern::after { content: "↗"; font-size: .9em; } .cal__go:not(.cal__go--extern)::after { content: "→"; font-size: .9em; } .cal__months { display: grid; gap: 20px; } @media (min-width: 700px) { .cal__months { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1000px) { .cal__months { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .cal__month { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; } .cal__month.is-empty { display: none; } .cal__month h3 { margin: 0 0 12px; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .cal__list { display: flex; flex-direction: column; gap: 8px; } /* Ein Tag. Finden zwei Termine gleichzeitig statt, stehen sie nebeneinander — auch auf dem Handy, damit ein Rennwochenende als Einheit lesbar bleibt. */ .cal__tag { display: grid; gap: 8px; } .cal__tag--paar { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cal__tag[hidden] { display: none; } /* Jeder Termin in einem eigenen dünnen Rahmen */ .cal__event { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 10px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); position: relative; overflow: hidden; min-width: 0; } .cal__event[hidden] { display: none; } .cal__marke { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--typfarbe); } .cal__date { font-size: .76rem; color: var(--muted); font-weight: 700; letter-spacing: .01em; } .cal__title { font-size: .92rem; line-height: 1.3; overflow-wrap: anywhere; } .cal__typ { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--typfarbe); font-weight: 700; margin-top: 2px; } /* ------------------------------------------------------- Shop-Popup -- */ .modal { position: fixed; inset: 0; z-index: 120; display: flex; align-items: flex-end; justify-content: center; } .modal[hidden] { display: none; } @media (min-width: 700px) { .modal { align-items: center; padding: 24px; } } .modal__backdrop { position: absolute; inset: 0; background: rgba(12,12,14,.6); backdrop-filter: blur(3px); } .modal__panel { position: relative; z-index: 1; width: 100%; max-width: 760px; max-height: 92vh; display: flex; flex-direction: column; background: var(--bg); border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--shadow); overflow: hidden; animation: sheet-in .22s ease-out; } @media (min-width: 700px) { .modal__panel { border-radius: var(--r-lg); } } @keyframes sheet-in { from { transform: translateY(14px); opacity: .6; } to { transform: none; opacity: 1; } } .modal__head { display: flex; align-items: center; gap: 16px; padding: 18px 22px; border-bottom: 1px solid var(--line); background: var(--surface); } .modal__head h2 { margin: 0; font-size: 1.25rem; } .modal__close { margin-left: auto; width: 40px; height: 40px; flex: none; border: 0; border-radius: 12px; background: var(--surface-2); font-size: 22px; line-height: 1; cursor: pointer; color: var(--ink); } /* flex:1 + min-height:0 — ohne das scrollt der Inhalt in einer Flex-Spalte nicht, sondern wird unten abgeschnitten. */ .modal__body { flex: 1; min-height: 0; padding: 22px; overflow-y: auto; -webkit-overflow-scrolling: touch; } .product { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; } /* Produktbilder sind freigestellte Renderings — nicht beschneiden. */ .product img { width: 100%; aspect-ratio: 4/3; object-fit: contain; background: #fff; padding: 10px; } .product__body { padding: 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .product__body h3 { margin: 0; font-size: 1.05rem; } .product__body p { margin: 0; } .product__price { font-family: var(--f-display); font-weight: 700; font-size: 1.3rem; color: var(--red); } .product .btn { margin-top: auto; } /* Zwischenüberschrift im Shop-Popup */ .modal__section { margin: 28px 0 14px; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .modal__section:first-child { margin-top: 0; } .product__body h4 { margin: 0; font-family: var(--f-display); font-size: 1.05rem; letter-spacing: -.01em; } /* Hero ohne Bild — für Seiten, zu denen es (noch) kein passendes Foto gibt */ .hero--plain { background: var(--dark); } .hero--plain::after { background: radial-gradient(120% 90% at 15% 0%, rgba(228,35,29,.35) 0%, transparent 60%); } /* Freigestelltes Produktbild im Fliesstext */ .split img.img--product { background: #fff; object-fit: contain; padding: 18px; border: 1px solid var(--line); aspect-ratio: 4/3; } /* The-Drop-Karten mit Abspielsymbol */ /* Faehnchen auf einer Medienkarte, z. B. «Vorankuendigung». Sitzt ueber dem Titel und bekommt darum unten etwas Luft. */ .card__marke { margin-bottom: 8px; } /* Hinweiskasten ueber einem Formular: nennt eine Voraussetzung, bevor jemand anfaengt auszufuellen. Roter Balken links, damit er sich von einer normalen Karte unterscheidet und nicht ueberlesen wird. */ .hinweisbox { background: var(--red-soft); border-left: 4px solid var(--red); border-radius: var(--r-sm); padding: 18px 20px; margin-bottom: 26px; } .hinweisbox__titel { font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; color: var(--red-dark); margin-bottom: 6px; } .hinweisbox p { margin: 0 0 12px; } .hinweisbox p:last-of-type { margin-bottom: 14px; } .hinweisbox .btn { margin-top: 2px; } .drop .drop__thumb { position: relative; display: block; } .drop .drop__thumb img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; } .drop .drop__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 50%; background: rgba(18,18,20,.6); backdrop-filter: blur(2px); transition: background .15s ease, transform .15s ease; } .drop .drop__play::after { content: ""; position: absolute; left: 21px; top: 17px; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent #fff; } .drop:hover .drop__play { background: var(--red); transform: translate(-50%, -50%) scale(1.06); } /* Instagram-Block auf dunklem Grund */ .inverted .insta-skeleton { background: rgba(255,255,255,.12); } .inverted .insta-item { background: rgba(255,255,255,.12); } .inverted .insta-grid .muted { color: rgba(255,255,255,.7); } /* Kartenstreifen (The Drop): gleiche Wischlogik wie .strip, aber mit Karten */ .strip--cards { align-items: stretch; } .strip--cards > .card { height: 100%; } @media (min-width: 700px) { .strip--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Instagram und YouTube im Menü als Symbol statt als Menüpunkt — in den Originalfarben der Marken. */ .menu__social { display: flex; gap: 12px; margin-top: 26px; } .social-btn { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 0; border-radius: 16px; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; } .social-btn svg { width: 26px; height: 26px; } .social-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); } /* Instagram-Verlauf von Gelb über Pink nach Blau */ .social-btn--instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); } /* YouTube-Rot */ .social-btn--youtube { background: #FF0000; } /* Vorstandskarten: Porträt oben, kompakter als die Trainerkarten */ .person__photo { object-position: 50% 20%; } .social-btn--facebook { background: #1877F2; } /* ========================================================================== Team — Gesichterreihe und Riders ========================================================================== */ /* Gesichterreihe: kompakte Vorschau des Trainerteams */ .faces { display: flex; flex-wrap: wrap; gap: 20px 26px; } .faces__item { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 84px; } .faces__photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--line); } .faces__name { font-size: .85rem; font-weight: 600; text-align: center; line-height: 1.2; } .surface .faces__photo { border-color: var(--surface); } /* Riders: viele Personen kompakt, nach Gruppe gebündelt */ .riders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 12px; margin-bottom: 32px; } @media (min-width: 600px) { .riders { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @media (min-width: 900px) { .riders { grid-template-columns: repeat(8, minmax(0, 1fr)); } } /* Trainer:innen tragen ihre Farbe — dieselbe wie in der Verwaltung und im Trainerbereich. Nur als Balken und Initialen-Kreis, damit die Kachel ruhig bleibt. Kontaktangaben stehen hier bewusst nicht. */ /* Zugehoerigkeit innerhalb einer Stufe (Powerbike-Trainer / Gasttrainer). Gleicher Abstand oben wie unten — vorher stand der Titel je nach Gruppe unterschiedlich nah am Text darunter. */ .trainer__gruppe { margin: 22px 0 10px; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--muted); } .trainer__gruppe:first-of-type { margin-top: 4px; } /* Erklaerung zur Stufe, direkt unter dem aufgeklappten Titel. */ .trainer__erklaerung { margin: 0 0 4px; max-width: 62ch; font-size: .93rem; line-height: 1.55; color: var(--muted); } /* Die Kachel ist mittig aufgebaut — ein Rand links sähe schief aus. Darum trägt das Bild einen feinen Ring in der Farbe, der Initialen-Kreis ist ganz in der Farbe. */ .riders__item--farbe .riders__photo { box-shadow: 0 0 0 3px var(--personfarbe, var(--line)); } .riders__item--farbe .person__photo--initials { background: var(--personfarbe, var(--surface-2)); color: var(--personschrift, #121214); } .riders__item { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; } .riders__photo { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--muted); font-family: var(--f-display); font-weight: 700; } .riders__name { font-size: .82rem; font-weight: 600; line-height: 1.2; } .riders__nr { font-family: var(--f-display); font-size: .72rem; font-weight: 700; color: var(--red); letter-spacing: .04em; } .riders__hl { font-size: .72rem; color: var(--muted); line-height: 1.2; } /* Weitere Toepfe, in denen eine Rider:in steht — Renngruppe, Kader, Talent Card */ .riders__kat { display: inline-block; margin-top: 3px; padding: 1px 7px; border: 1px solid var(--line); border-radius: 999px; font-size: .66rem; font-weight: 600; color: var(--muted); line-height: 1.5; } .riders__item .riders__kat + .riders__kat { margin-left: 4px; } /* Weitere Toepfe: nur Farbpunkte, damit alle Kacheln gleich hoch bleiben. Welche Farbe wofuer steht, sagt die Legende ueber der Liste. */ .riders__dots { display: inline-flex; gap: 4px; margin-top: 3px; } .riders__dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); } .riders__foto { display: block; text-decoration: none; } /* Jede Trainingsgruppe ist eine Klapplasche — geschlossen, damit die Seite am Handy ueberschaubar bleibt. Die Gruppenfarbe traegt die Zeile als Balken links; Name links, Anzahl rechts, Pfeil ganz aussen. */ .riders__gruppe { border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); margin-bottom: 8px; overflow: hidden; transition: border-color .14s, box-shadow .14s; } .surface .riders__gruppe { background: var(--bg); } .riders__gruppe:hover { border-color: var(--gruppenfarbe); } .riders__gruppe[open] { border-color: var(--gruppenfarbe); box-shadow: 0 8px 24px rgba(18,18,20,.06); } .riders__gruppe > summary { display: flex; align-items: center; gap: 14px; padding: 15px 18px 15px 0; cursor: pointer; list-style: none; position: relative; } .riders__gruppe > summary::-webkit-details-marker { display: none; } /* Farbbalken links */ .riders__gruppe > summary::before { content: ""; flex: none; width: 5px; align-self: stretch; margin-right: 4px; border-radius: 0 3px 3px 0; background: var(--gruppenfarbe); } .riders__gruppename { font-family: var(--f-display); font-weight: 700; font-size: 1rem; letter-spacing: .01em; color: var(--ink); } .riders__anzahl { margin-left: auto; display: flex; align-items: baseline; gap: 5px; font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; color: var(--gruppenfarbe); } .riders__anzahl em { font-family: var(--f-body, inherit); font-style: normal; font-weight: 500; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } /* Pfeil statt Plus — dreht sich beim Aufklappen */ .riders__pfeil { flex: none; width: 9px; height: 9px; margin-left: 4px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-2px); transition: transform .18s ease, border-color .18s; } .riders__gruppe[open] .riders__pfeil { transform: rotate(-135deg) translateY(-2px); border-color: var(--gruppenfarbe); } .riders__gruppe > summary:hover .riders__pfeil { border-color: var(--gruppenfarbe); } .riders__gruppe > summary:focus-visible { outline: 2px solid var(--gruppenfarbe); outline-offset: -2px; } /* Trainer-Stufen: dieselbe Klapp-Optik wie die Rider-Gruppen, aber der Inhalt hat oben etwas mehr Luft, weil hier eine Erklaerung folgt. */ .trainer__stufe > summary { padding-top: 15px; padding-bottom: 15px; } .trainer__stufe[open] > summary { padding-bottom: 12px; } .riders__gruppe .riders { margin: 0; padding: 4px 18px 20px; border-top: 1px solid var(--line); } /* Farblegende ueber den Riders */ .legende { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 16px; margin: -4px 0 22px; } .legende__punkt { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); } .legende__name { font-size: .72rem; color: var(--muted); } /* Aus Datenschutzgruenden steht nur der Jahrgang da, kein Geburtsdatum. Klein und kursiv in Klammern direkt hinter dem Vornamen. */ .riders__jahr { font-size: .72em; font-style: italic; font-weight: 400; color: var(--muted); } /* Farbpunkt vor der Gruppenueberschrift */ .riders__punkt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: baseline; } /* Offizielle Instagram-Einbettungen: Instagram bringt eigenes Layout mit, wir geben nur den Rahmen vor. */ .insta-embeds { display: grid; gap: 14px; } @media (min-width: 700px) { .insta-embeds { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1000px) { .insta-embeds { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .insta-embeds .instagram-media { margin: 0 !important; min-width: 0 !important; max-width: 100% !important; } /* Kachel mit verlinktem Instagram-Profil */ .riders__item--link { text-decoration: none; color: inherit; } .riders__media { position: relative; display: block; } /* Instagram-Farbring: nur wer ein Profil hinterlegt hat, bekommt ihn — der Ring ist damit selbst der Hinweis, dass das Foto anklickbar ist. */ .riders__media--ig { padding: 3px; border-radius: 50%; background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); } .riders__media--ig .riders__photo { border: 2px solid var(--bg); } .surface .riders__media--ig .riders__photo { border-color: var(--surface); } .riders__item--link:hover .riders__media--ig { filter: brightness(1.08); } .riders__item--link:focus-visible .riders__media--ig { outline: 2px solid var(--red); outline-offset: 3px; } .riders__ig { position: absolute; right: -2px; bottom: -2px; width: 24px; height: 24px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); border: 2px solid var(--bg); } .surface .riders__ig { border-color: var(--surface); } .riders__ig svg { width: 13px; height: 13px; stroke: #fff; fill: none; stroke-width: 2.2; } .riders__item--link:hover .riders__name { color: var(--red); } /* ========================================================================== Bestellprozess Jersey ========================================================================== */ .schritte { counter-reset: schritt; list-style: none; margin: 20px 0 0; padding: 0; } .schritte li { counter-increment: schritt; position: relative; padding: 12px 0 12px 46px; border-bottom: 1px solid var(--line); font-weight: 500; } .schritte li:last-child { border-bottom: 0; } .schritte li::before { content: counter(schritt); position: absolute; left: 0; top: 10px; width: 30px; height: 30px; border-radius: 50%; background: var(--red); color: #fff; font-family: var(--f-display); font-weight: 700; font-size: .9rem; display: flex; align-items: center; justify-content: center; } .tabelle-huelle { overflow-x: auto; margin-top: 18px; } .tabelle { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 460px; } /* Auf dem Telefon wird enger gesetzt statt geschoben. Eine Tabelle, die man erst nach rechts ziehen muss, um die letzte Spalte zu sehen, verbirgt genau die Angabe, wegen der man hergekommen ist. */ @media (max-width: 520px) { .tabelle { min-width: 0; font-size: .86rem; } .tabelle th, .tabelle td { padding-right: 8px; } .tabelle th:last-child, .tabelle td:last-child { padding-right: 0; } } .tabelle th { text-align: left; padding: 10px 14px 10px 0; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); font-weight: 700; } .tabelle td { padding: 14px 14px 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; } .tabelle tr:last-child td { border-bottom: 0; } .tabelle .ist-naechste td { background: var(--red-soft); } .tabelle .ist-naechste td:first-child { border-radius: 10px 0 0 10px; padding-left: 12px; } .tabelle .ist-naechste td:last-child { border-radius: 0 10px 10px 0; } .tabelle .pill { margin-left: 8px; font-size: .7rem; padding: 2px 8px; } /* ========================================================================== Shop auf der Seite — Produktkarte mit Farb- und Grössenwahl ========================================================================== */ .produkt { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; background: var(--bg); } .produkt__bild { background: #fff; } .produkt__bild img { width: 100%; aspect-ratio: 4/3; object-fit: contain; padding: 14px; } .produkt__text { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .produkt__text h3 { margin: 0; } .produkt__text p { margin: 0; } .produkt__preis { font-family: var(--f-display); font-weight: 700; font-size: 1.35rem; color: var(--red); } .wahlzeile { display: flex; flex-direction: column; gap: 7px; } .wahlzeile__titel { font-size: .76rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); font-weight: 700; } .wahlen { display: flex; flex-wrap: wrap; gap: 7px; } .wahl { padding: 7px 13px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--bg); color: var(--ink); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; transition: border-color .12s ease, background .12s ease, color .12s ease; } .wahl:hover:not(:disabled) { border-color: var(--ink); } .wahl.ist-gewaehlt { background: var(--ink); border-color: var(--ink); color: #fff; } .wahl:disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; } .produkt__hinweis { font-size: .86rem; color: var(--muted); min-height: 1.3em; } .produkt__kauf { margin-top: auto; } .produkt__kauf[aria-disabled="true"] { opacity: .45; pointer-events: auto; cursor: not-allowed; } /* ========================================================================== News und Einbettungen ========================================================================== */ .news { padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid var(--line); } .news:last-child { border-bottom: 0; margin-bottom: 0; } .news__datum { font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin: 0 0 6px; } .news h2 { margin-bottom: 10px; } .news__bild { margin: 22px 0; } /* Aufklappbar: Datum, Titel und Anriss stehen immer da, der ausführliche Teil kommt auf Klick. So sieht man alle Beiträge auf einmal, statt einen langen Text nach dem anderen zu scrollen. */ .news__kopf { cursor: pointer; list-style: none; position: relative; padding-right: 34px; } .news__kopf::-webkit-details-marker { display: none; } .news__kopf > *:last-child { margin-bottom: 0; } .news__kopf::after { content: ""; position: absolute; right: 6px; top: 26px; width: 11px; height: 11px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .18s ease, border-color .18s ease; } .news__klapp[open] > .news__kopf::after { transform: rotate(-135deg); } .news__kopf:hover::after { border-color: var(--red); } /* Mehrere Bilder nebeneinander: Ein WM-Bericht hat ein Bild pro Fahrer. Untereinander in voller Breite wäre das eine Tapete. */ .news__galerie { display: grid; gap: 14px; margin: 24px 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); } .news__kachel { margin: 0; } .news__kachel a { display: block; border-radius: var(--r-lg); overflow: hidden; } /* Alle WM-Bilder liegen in genau 1200x1600 vor — die Kacheln duerfen darum ein festes Format haben, ohne dass etwas gequetscht wird. */ .news__kachel img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; display: block; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg); transition: transform .18s ease; } .news__kachel a:hover img { transform: scale(1.02); } .news__kachel figcaption { margin-top: 8px; font-size: .84rem; color: var(--muted); line-height: 1.45; } .news__inhalt { margin-top: 22px; } .news__inhalt > *:last-child { margin-bottom: 0; } .card .news__datum { margin-bottom: 4px; } /* Video und Instagram laden erst auf Klick — vorher keine fremde Verbindung */ .einbett { margin: 24px 0; } .einbett__start { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 16/9; padding: 0; cursor: pointer; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); font: inherit; color: var(--ink); } .einbett--insta .einbett__start { aspect-ratio: 4/5; max-width: 420px; } .einbett__start img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .einbett__play { position: relative; z-index: 1; width: 62px; height: 62px; border-radius: 50%; background: #FF0000; box-shadow: 0 6px 20px rgba(0,0,0,.3); } .einbett__play::after { content: ""; position: absolute; left: 24px; top: 19px; border-style: solid; border-width: 12px 0 12px 19px; border-color: transparent transparent transparent #fff; } .einbett__logo { position: relative; z-index: 1; width: 58px; height: 58px; border-radius: 18px; background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); box-shadow: 0 6px 20px rgba(0,0,0,.25); } .einbett__hinweis { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 10px 14px; font-size: .82rem; font-weight: 600; background: linear-gradient(180deg, transparent, rgba(0,0,0,.75)); color: #fff; } .einbett--insta .einbett__hinweis { background: var(--surface-2); color: var(--ink-2); } .einbett__start:hover .einbett__play { transform: scale(1.05); } .einbett iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: var(--r-lg); display: block; } .einbett--insta blockquote { margin: 0 auto !important; } /* Formular mit Zahlung: öffnet auf der Fairgate-Domain statt im Rahmen. Grund: Cookies von Drittanbietern und 3-D-Secure brechen in fremden Rahmen häufig ab — bei einer Zahlung will man das nicht riskieren. */ .formbox--extern .formbox__aussen { padding: 24px; display: flex; flex-direction: column; gap: 14px; } .formbox--extern .formbox__aussen p { margin: 0; color: var(--ink-2); } .formbox--extern .formbox__aussen .btn { align-self: flex-start; } .formbox--extern .formbox__aussen .small { color: var(--muted); } /* ========================================================================== Kalender abonnieren — ohne Login, ohne Datenbank ========================================================================== */ .abos { display: grid; gap: 8px; } /* Ab Tablet nebeneinander: elf Kalender untereinander waren am Rechner ein langer Weg nach unten. Die Zeilen sind schmal genug, dass zwei nebeneinander passen — mehr nicht, sonst brechen die Knoepfe um. */ @media (min-width: 780px) { .abos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } } @media (min-width: 1180px) { .abos { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .abo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); /* Als Rasterfeld waere die Zeile sonst so breit wie ihr laengster unumbrechbarer Inhalt — und stuende damit ueber den Rand hinaus. min-width:0 erlaubt ihr, sich auf die Spalte einzupassen. */ min-width: 0; } .abo__name { font-weight: 600; font-size: .95rem; } .abo__zahl { font-size: .78rem; color: var(--muted); } .abo__knopf, .abo__kopie { border-radius: var(--r-pill); font: inherit; font-size: .86rem; font-weight: 700; padding: 9px 18px; cursor: pointer; text-decoration: none; min-height: 42px; display: inline-flex; align-items: center; } /* Name und Takt stehen zusammen links, die zwei Knoepfe rechts — so bleibt alles auf einer Zeile, auch auf dem Handy. Vorher schob der Zaehler den Abonnieren-Knopf auf volle Breite und «Adresse» rutschte darunter. */ .abo__wer { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; } .abo__name, .abo__zahl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Türkis wie die Knöpfe im Wochenplan — es ist derselbe Handgriff, und zweimal dieselbe Sache in zwei Farben verwirrt nur. */ .abo__knopf { background: var(--tuerkis); color: #fff; border: 0; box-shadow: 0 1px 3px color-mix(in srgb, var(--tuerkis) 30%, transparent); } .abo__knopf:hover { background: var(--tuerkis-dark); } .abo__kopie { background: var(--bg); color: var(--ink-2); border: 1px solid var(--line); } .abo__kopie:hover { border-color: var(--ink); } .abo__kopie.ist-kopiert { background: #E7F6EC; border-color: #b7e0c5; color: #14653A; } .abo__knopf, .abo__kopie { flex: 0 0 auto; white-space: nowrap; } /* Auf schmalen Telefonen passen Name und zwei Knöpfe nicht nebeneinander — die Zeile stand 27 Pixel über den Rand hinaus. Dort rückt der Name auf eine eigene Zeile und die Knöpfe teilen sich die darunter. Lieber zwei Zeilen als eine, die nicht hineinpasst. */ @media (max-width: 430px) { .abo { gap: 8px; } .abo__wer { flex: 1 1 100%; } .abo__knopf, .abo__kopie { flex: 1 1 0; justify-content: center; padding: 8px 12px; } } @media (max-width: 560px) { .abo { gap: 8px; flex-wrap: nowrap; padding: 10px 12px; } .abo__knopf, .abo__kopie { padding: 8px 13px; font-size: .8rem; min-height: 38px; } } @media (max-width: 380px) { /* Ganz schmale Geräte: der Takt tritt zurück, die Knöpfe bleiben lesbar. */ .abo__zahl { display: none; } } /* ========================================================================== Ämtli — Karten aus dem Vorstandsantrag September 2026 Ein Auftrag pro Karte: Titel, drei Schritte, Takt, Plaetze. ========================================================================== */ .amt-zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .amt-zahl { background: var(--surface); border-radius: var(--r-lg); padding: 18px 16px; text-align: center; } .surface .amt-zahl { background: var(--bg); } .amt-zahl strong { display: block; font-family: var(--f-display); font-size: 1.9rem; line-height: 1; color: var(--tuerkis); } .amt-zahl:nth-child(2) strong { color: var(--violett); } .amt-zahl:nth-child(3) strong { color: var(--ink); } .amt-zahl span { display: block; margin-top: 6px; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .amt-regeln { list-style: none; margin: 24px 0 0; padding: 0; counter-reset: regel; } .amt-regeln li { position: relative; padding: 16px 0 16px 46px; border-bottom: 1px solid var(--line); } .amt-regeln li:last-child { border-bottom: 0; } .amt-regeln li::before { counter-increment: regel; content: counter(regel, upper-alpha); position: absolute; left: 0; top: 16px; width: 28px; height: 28px; border-radius: 50%; background: var(--violett); color: #fff; font-family: var(--f-display); font-size: .82rem; display: flex; align-items: center; justify-content: center; } .amt-regeln strong { display: block; margin-bottom: 3px; } .amt-regeln span { color: var(--ink-2); font-size: .92rem; } .amt-bereich + .amt-bereich { margin-top: 40px; } .amt-bereich__titel { margin: 0; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--violett); } .amt-bereich__zahl { margin: 4px 0 18px; font-size: .84rem; color: var(--muted); } .amt-karten { display: grid; gap: 14px; } @media (min-width: 700px) { .amt-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1080px) { .amt-karten { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .amt-karte { display: flex; flex-direction: column; position: relative; overflow: hidden; background: linear-gradient(160deg, #1C1C21 0%, #131316 60%, #0E0E11 100%); border: 1px solid rgba(255, 255, 255, .09); border-radius: var(--r-lg); padding: 20px; color: #F2F2F4; box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 16px 40px rgba(0,0,0,.18); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .surface .amt-karte { background: linear-gradient(160deg, #1C1C21 0%, #131316 60%, #0E0E11 100%); } /* Ein Hauch Vereinsrot am oberen Rand — die Karte soll knallen. */ .amt-karte::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--tuerkis-hell) 0%, var(--violett-hell) 65%, transparent 100%); } .amt-karte:hover { transform: translateY(-2px); border-color: rgba(53, 214, 193, .5); box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 22px 48px rgba(0,0,0,.26); } .amt-karte--voll { opacity: .58; } .amt-karte--voll::before { background: rgba(255,255,255,.18); } .amt-karte__kopf { display: flex; align-items: center; gap: 11px; } .amt-karte__emoji { font-size: 1.6rem; line-height: 1.2; } .amt-karte__bereich { margin: 14px 0 0; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: #6E6E7A; } .amt-karte__name { margin: 3px 0 0; font-size: 1.12rem; color: #fff; line-height: 1.2; } .amt-karte__schild { margin-left: auto; flex: none; min-width: 32px; height: 28px; padding: 0 8px; border: 2px solid rgba(255,255,255,.85); border-radius: 6px; font-family: var(--f-display); font-weight: 700; font-size: .95rem; color: #fff; display: flex; align-items: center; justify-content: center; } /* Schlagwörter: grob, was einen erwartet — vor allen Details */ .amt-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .amt-tag { padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.08); color: #C9C9D2; font-size: .7rem; font-weight: 600; letter-spacing: .01em; } /* Die Zahl, die Angst nimmt: Zeit, zu zweit, wie oft */ .amt-karte__aufwand { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 13px 0 0; padding: 11px 0; border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); } .amt-karte__aufwand strong { font-family: var(--f-display); font-size: 1.25rem; color: #fff; line-height: 1; } .amt-karte__aufwand span { font-size: .78rem; color: #A9A9B4; } .amt-karte__aufwand span + span::before { content: "· "; color: #55555F; } /* Der Nutzensatz sitzt direkt unter dem Titel und trägt die Karte */ .amt-karte__claim { margin: 9px 0 0; font-size: 1rem; line-height: 1.4; color: #F2F2F4; font-weight: 500; } .amt-karte__schritte { margin: 14px 0 0; padding: 0; list-style: none; counter-reset: schritt2; font-size: .84rem; color: #9A9AA6; } .amt-karte__schritte li { position: relative; padding: 5px 0 5px 22px; border-bottom: 1px dashed rgba(255,255,255,.09); } .amt-karte__schritte li:last-child { border-bottom: 0; } .amt-karte__schritte li::before { counter-increment: schritt2; content: counter(schritt2); position: absolute; left: 0; top: 5px; font-family: var(--f-display); font-size: .74rem; color: var(--tuerkis-hell); } .amt-karte__goetti { margin: 12px 0 0; padding-top: 11px; border-top: 1px dashed rgba(255,255,255,.12); font-size: .8rem; color: #C9C9D2; } .amt-karte__goetti span { display: block; margin-top: 2px; color: #85858F; font-size: .76rem; } .amt-karte__goetti a { color: inherit; } /* Der Kopf statt der Adresse — dasselbe Prinzip wie im Kontaktformular: man sieht, wem man schreibt. Die Karte ist dunkel, darum helle Schrift. */ .amt-kopf { display: flex; align-items: center; gap: 11px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed rgba(255,255,255,.12); text-decoration: none; color: inherit; } .amt-kopf__bild { flex: none; width: 46px; height: 46px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.1); box-shadow: 0 0 0 2px rgba(255,255,255,.14); transition: box-shadow .15s; } .amt-kopf__bild img { width: 100%; height: 100%; object-fit: cover; display: block; } .amt-kopf__bild--leer { display: grid; place-items: center; font-weight: 800; font-size: .9rem; color: #C9C9D2; } .amt-kopf__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .amt-kopf__text strong { font-size: .86rem; font-weight: 700; color: #ECECEF; } .amt-kopf__text span { font-size: .78rem; color: #9A9AA4; } .amt-kopf:hover .amt-kopf__bild { box-shadow: 0 0 0 2px var(--red); } .amt-kopf:hover .amt-kopf__text span { color: #ECECEF; } .amt-plaetze { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: 7px; } .amt-platz { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; font-size: .84rem; font-weight: 600; line-height: 1; } .amt-platz--voll { background: rgba(255,255,255,.1); color: #EDEDF2; } .amt-platz__haken { color: #5BD98A; font-weight: 700; } .amt-platz--frei { border: 1px dashed rgba(255,255,255,.3); background: none; color: #B6B6C0; cursor: pointer; font-family: inherit; text-decoration: none; transition: border-color .12s, color .12s, background .12s; } .amt-platz--frei:hover { border-style: solid; border-color: var(--tuerkis-hell); color: #06231F; background: var(--tuerkis-hell); } .amt-platz--frei:focus-visible { outline: 2px solid var(--tuerkis-hell); outline-offset: 2px; } .amt-karte:target { outline: 2px solid var(--red); outline-offset: 4px; scroll-margin-top: 90px; } /* ========================================================================== Rückmeldungen auf Formularseiten (Ämtli-Anmeldung, Verwaltung) Ohne diese Regeln stand eine Fehlermeldung als nackter Text da und wurde schlicht übersehen — genau das ist am 09.09.2026 passiert. ========================================================================== */ .warn, .gut { display: flex; align-items: flex-start; gap: 10px; margin: 18px 0; padding: 14px 16px; border-radius: var(--r); font-size: .95rem; line-height: 1.45; } .warn { background: var(--red-soft); border: 1px solid #F3B7B4; color: #8C1A15; } .gut { background: #E7F6EC; border: 1px solid #B7E0C5; color: #14653A; } .warn::before, .gut::before { flex: none; font-weight: 700; font-size: 1.05rem; line-height: 1.3; } .warn::before { content: "!"; } .gut::before { content: "✓"; } .warn strong, .gut strong { font-weight: 700; } /* Themenleiste über den Ämtli-Karten */ .amt-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; } .amt-filter__knopf { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); font-family: inherit; font-size: .86rem; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: border-color .12s, background .12s, color .12s; } .amt-filter__knopf span { font-size: .74rem; font-weight: 700; color: var(--muted); } .amt-filter__knopf:hover { border-color: var(--tuerkis); } .amt-filter__knopf--an { background: var(--violett); border-color: var(--violett); color: #fff; } .amt-filter__knopf--an span { color: rgba(255,255,255,.7); } .amt-filter__leer { flex: 0 0 100%; margin: 6px 0 0; font-size: .9rem; color: var(--muted); } .amt-filter__zurueck { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; color: var(--tuerkis); text-decoration: underline; } .amt-bereich[hidden], .amt-karte[hidden] { display: none !important; } /* Die kleinere Schwelle: Interesse statt Zusage */ .amt-interesse { display: inline-block; margin-top: 12px; font-size: .78rem; color: #9B9BA6; text-decoration: none; border-bottom: 1px dotted rgba(255,255,255,.28); } .amt-interesse:hover { color: var(--tuerkis-hell); border-bottom-color: var(--tuerkis-hell); } /* Besetzte Karte: ruhig, kein Aufruf mehr zum Übernehmen — dafür die Ansprechpersonen und der Weg auf die Interessensliste. */ /* Besetzt heisst nicht «erledigt», sondern «läuft» — darum ein feiner Mintrahmen statt Grau. */ .amt-karte--besetzt { border-color: rgba(126, 226, 190, .45); box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 16px 40px rgba(0,0,0,.18), inset 0 0 0 1px rgba(126, 226, 190, .12); } .amt-karte--besetzt:hover { border-color: rgba(126, 226, 190, .75); } .amt-karte--besetzt::before { background: linear-gradient(90deg, #7EE2BE 0%, rgba(126,226,190,.25) 70%, transparent 100%); } .amt-karte--besetzt .amt-karte__schild { border-color: rgba(255,255,255,.35); color: #B6B6C0; } .amt-captains { margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed rgba(255,255,255,.14); } .amt-captains__titel { margin: 0 0 7px; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tuerkis-hell); } .amt-captains ul { margin: 0; padding: 0; list-style: none; } .amt-captains li { padding: 3px 0; font-size: .88rem; color: #E2E2E8; } .amt-captains li span { display: block; font-size: .76rem; color: #9A9AA6; } .amt-captains li a { color: inherit; } .amt-karte__fragen { margin: 8px 0 0; font-size: .78rem; color: #9A9AA6; } .amt-plaetze--voll { opacity: .75; } .amt-interesse--stark { display: block; margin-top: 14px; padding: 11px 16px; border: 1px solid var(--tuerkis-hell); border-radius: 999px; text-align: center; font-size: .88rem; font-weight: 600; color: var(--tuerkis-hell); border-bottom-style: solid; } .amt-interesse--stark:hover { background: var(--tuerkis-hell); color: #06231F; } /* Platz, den jemand über die Website übernommen hat */ .amt-platz--gemeldet { background: rgba(126, 226, 190, .16); color: #C6F5E2; border: 1px solid rgba(126, 226, 190, .45); } .amt-platz--gemeldet .amt-platz__haken { color: #7EE2BE; } /* Die wichtigste Zusage der Ämtli-Seite: man ist nie allein */ .amt-zusammen { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; padding: 14px 18px; border-left: 4px solid var(--tuerkis); background: rgba(18, 137, 124, .07); border-radius: 0 var(--r) var(--r) 0; font-size: 1rem; color: var(--ink-2); } .amt-zusammen strong { color: var(--ink); } /* Captains mit Gesicht — wie bei den Riders, nur klein */ .amt-platz--voll { padding-left: 5px; } .amt-platz__bild { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: none; display: inline-flex; align-items: center; justify-content: center; } .amt-platz__bild--buchstabe { background: rgba(255,255,255,.16); color: #E2E2E8; font-family: var(--f-display); font-size: .68rem; font-weight: 700; } .amt-captains li { display: flex; align-items: center; gap: 10px; } .amt-captains__bild { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; display: inline-flex; align-items: center; justify-content: center; } .amt-captains__bild--buchstabe { background: rgba(255,255,255,.14); color: #E2E2E8; font-family: var(--f-display); font-size: .82rem; font-weight: 700; } .amt-captains__wer { display: block; } /* WhatsApp direkt hinter dem Namen — dezent, wird erst beim Zeigen grün */ .wa { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; margin-left: 6px; flex: none; color: #8E8E99; vertical-align: -3px; transition: color .12s, transform .12s; } .wa svg { width: 100%; height: 100%; } .wa:hover, .wa:focus-visible { color: #25D366; transform: scale(1.12); } .amt-platz .wa { margin-left: 5px; } /* Unübersehbar: diese Karte ist voll. Die Marke sitzt in der oberen rechten Ecke — dort, wo das Auge nach dem Titel hinwandert, und ohne die Hashtags zu verdrängen. */ .amt-komplett { position: absolute; top: 16px; right: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 0 var(--r) 0 var(--r); background: #7EE2BE; color: #06231F; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 2px 10px rgba(126, 226, 190, .25); } /* Platz für die Marke, damit die Hashtags nicht darunterlaufen */ .amt-karte--besetzt .amt-tags { padding-right: 112px; } .amt-karte--besetzt { background: linear-gradient(160deg, #16211E 0%, #121A18 60%, #0D1413 100%); } .surface .amt-karte--besetzt { background: linear-gradient(160deg, #16211E 0%, #121A18 60%, #0D1413 100%); } /* Die dritte Zahl oben ist die, auf die es ankommt */ .amt-zahl:nth-child(3) strong { color: var(--tuerkis); } .amt-zahl:nth-child(2) strong { color: #12897C; } /* Die Frage über der Filterleiste — sonst weiss niemand, wozu die Knöpfe da sind */ .amt-filter__frage { margin: 0 0 10px; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; } /* Legende der Zusatz-Punkte an den Rider-Kacheln */ .legende__titel { margin: 0 0 6px; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } /* ========================================================================== Kader — eigener Weg, eigene Darstellung. Bewusst nicht wie die Trainingsgruppen: keine Klappkästchen, sondern Porträts. ========================================================================== */ .kader { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; } @media (min-width: 600px) { .kader { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 900px) { .kader { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .kader__karte { display: flex; flex-direction: column; align-items: center; text-align: center; } .kader__foto { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--muted); font-family: var(--f-display); font-weight: 700; font-size: 1.5rem; } .kader__bildlink { text-decoration: none; } .kader .riders__media--ig { padding: 3px; } .kader__kat { margin-top: 12px; padding: 2px 10px; border-radius: 999px; background: var(--violett); color: #fff; font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .kader__name { margin: 7px 0 0; font-size: .95rem; line-height: 1.25; } .kader__team { margin-top: 3px; font-size: .76rem; color: var(--muted); } /* Talent Cards — alphabetisch, ohne Rangfolge. Wer eine Karte hat, gehört dazu. Dasselbe Format wie der Kader: grosse Porträts, Foto verlinkt aufs Profil. Ohne das violette Fähnchen — eine Talent Card ist kein Kader. */ .tcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; } @media (min-width: 600px) { .tcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 900px) { .tcards { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .tcard { display: flex; flex-direction: column; align-items: center; text-align: center; } .tcard__foto { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; display: flex; align-items: center; justify-content: center; flex: none; background: var(--surface-2); color: var(--muted); font-family: var(--f-display); font-weight: 700; font-size: 1.5rem; } .tcard__bildlink { text-decoration: none; } .tcards .riders__media--ig { padding: 3px; } .tcard__name { margin-top: 10px; font-size: .95rem; font-weight: 600; line-height: 1.25; } .tcard__jahr { margin-top: 3px; font-size: .76rem; font-style: italic; color: var(--muted); } /* ========================================================================== Vereinsfarben — das Jersey über die ganze Website Rot bleibt die Hauptfarbe. Türkis und Violett kommen als Akzent dazu: als feines Band, als Reihenfolge in Dreiergruppen, nie als Fläche. ========================================================================== */ /* Jersey-Band unter der Kopfzeile. Die Kopfzeile klebt oben, das Band bleibt darum beim Scrollen immer sichtbar. */ .header { border-bottom: 1px solid var(--line); } .header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: var(--jersey); } /* Dasselbe Band als Abschluss oben am Fussbereich. */ .footer { position: relative; } .footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--jersey); } /* --- Dreierreihen bekommen die Farbfolge -------------------------------- */ /* Verlinkte Karten in einer Dreierreihe: jede Karte ihre Farbe. Sichtbar wird sie am Pfeil unten und am Rahmen beim Draufzeigen — sonst nichts. */ .card--link { --akzent: var(--ink); } .grid--3 > .card--link:nth-child(3n+1) { --akzent: var(--red); } .grid--3 > .card--link:nth-child(3n+2) { --akzent: var(--tuerkis); } .grid--3 > .card--link:nth-child(3n+3) { --akzent: var(--violett); } .card--link:hover { border-color: var(--akzent); } .card--link .card__foot { color: var(--akzent); } /* Das Etikett auf der Karte nimmt dieselbe Farbe, sehr hell hinterlegt. */ .grid--3 > .card--link:nth-child(3n+2) .pill:not(.pill--open):not(.pill--full) { background: var(--tuerkis-soft); color: var(--tuerkis-dark); } .grid--3 > .card--link:nth-child(3n+3) .pill:not(.pill--open):not(.pill--full) { background: var(--violett-soft); color: var(--violett-dark); } /* Die nummerierten Schritte — 1 rot, 2 türkis, 3 violett. */ .grid--3 > .step:nth-child(3n+2) .step__num { background: var(--tuerkis); } .grid--3 > .step:nth-child(3n+3) .step__num { background: var(--violett); } /* Zahlenband: feiner Strich über jeder Zahl, in der Farbfolge. */ .stat { position: relative; } .stat::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--red); } .stat:nth-child(3n+2)::before { background: var(--tuerkis); } .stat:nth-child(3n+3)::before { background: var(--violett); } .inverted .stat:nth-child(3n+2)::before { background: var(--tuerkis-hell); } .inverted .stat:nth-child(3n+3)::before { background: var(--violett-hell); } /* --- Bausteine in den Zweitfarben, für den Einsatz nach Bedarf ---------- */ .pill--tuerkis { background: var(--tuerkis-soft); color: var(--tuerkis-dark); } .pill--violett { background: var(--violett-soft); color: var(--violett-dark); } .hinweisbox--tuerkis { background: var(--tuerkis-soft); border-left-color: var(--tuerkis); } .hinweisbox--tuerkis .hinweisbox__titel { color: var(--tuerkis-dark); } .hinweisbox--violett { background: var(--violett-soft); border-left-color: var(--violett); } .hinweisbox--violett .hinweisbox__titel { color: var(--violett-dark); } /* Markiertes Textstück in Vereinsfarbe statt im Browserblau. */ ::selection { background: var(--tuerkis-hell); color: #06231F; } /* Die Kreise mit den Initialen wechseln durch die drei Farben. So wirkt die Reihe gestaltet, auch solange noch nicht alle Trainerfotos da sind. */ .faces__item:nth-child(3n+1) .person__photo--initials { background: var(--red-soft); color: var(--red-dark); } .faces__item:nth-child(3n+2) .person__photo--initials { background: var(--tuerkis-soft); color: var(--tuerkis-dark); } .faces__item:nth-child(3n+3) .person__photo--initials { background: var(--violett-soft); color: var(--violett-dark); } /* Der zweite Knopf im roten Band war weiss auf weiss und damit unlesbar: Die Regel darueber faerbt jeden Knopf im Band weiss, der Kontakt-Knopf bringt aber weisse Schrift mit. Hier bekommt er wieder einen Rahmen. */ .cta-band .btn--ghost { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; } .cta-band .btn--ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; } /* --- Ampel bei den Kursdaten ------------------------------------------- */ /* Drei Zustaende, je ein Punkt in der Farbe des Textes davor. Der Punkt macht den Zustand auch dann lesbar, wenn jemand Farben schlecht unterscheidet — die Beschriftung sagt es zusaetzlich. */ .pill--ampel::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .pill--voll { background: var(--red-soft); color: var(--red-dark); } .pill--wenig { background: #FFF1E0; color: #8A4A00; } .pill--frei { background: #E7F6EC; color: #14653A; } /* Kleiner Knopf direkt an der Kurszeile — nur dort, wo es noch Plaetze hat. Er sitzt unter dem Zustand, damit die Zeile auf dem Handy nicht bricht. */ .btn--klein { min-height: 40px; padding: 0 18px; font-size: .92rem; } .kurs-cta { display: inline-flex; margin-top: 10px; } .facts--kurse .fact dd { display: flex; flex-direction: column; align-items: flex-start; } /* Preise in einer Karte: Der Betrag steht rechts, nicht in einer eigenen Spalte. Eine Tabelle mit Mindestbreite musste auf dem Telefon geschoben werden — der Tagespreis stand ausserhalb des Bildschirms. */ .facts--preis { margin-top: 12px; border-top: 0; } .facts--preis .fact { padding: 9px 0; } .facts--preis .fact:last-child { border-bottom: 0; padding-bottom: 0; } .facts--preis .fact dt { flex: 1 1 auto; max-width: none; } .facts--preis .fact dd { flex: 0 0 auto; font-weight: 700; } /* Kalender leer: die Saison ist durch. Kein Fehler, sondern eine Ansage. */ .cal__leer { padding: 32px 4px; color: var(--muted); } /* Powerbike & Friends als eigener dunkler Streifen. Das Logo steht ohnehin auf Schwarz — gross und stark zurueckgenommen im Hintergrund wird daraus eine Teamzone, statt dass eine schwarze Kachel im Hellen klebt. Der Farbverlauf darueber haelt die linke Seite dunkel: dort steht der Text, und Lesbarkeit geht vor Dekoration. */ .friends-band { position: relative; overflow: hidden; } .friends-band::before { content: ""; position: absolute; inset: 0; background: url("../img/powerbike-friends.png") no-repeat; background-position: right -40px center; background-size: auto 130%; opacity: .75; } /* Der Textblock steht links und reicht auf schmalen Schirmen weit nach rechts. Darum bleibt die Flaeche bis 68 % voll dunkel und wird erst danach durchsichtig — das Abzeichen bleibt ein Schatten, der Text bleibt Text. Lesbarkeit schlaegt Dekoration, auch wenn das Logo dabei Anschnitt wird. */ .friends-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, var(--dark) 0%, var(--dark) 68%, rgba(17,17,17,.82) 84%, rgba(17,17,17,.62) 100%); } /* Auf breiten Schirmen steht rechts echter Platz zur Verfuegung — dort darf das Abzeichen deutlich mehr zeigen. */ @media (min-width: 1200px) { .friends-band::after { background: linear-gradient(100deg, var(--dark) 0%, var(--dark) 48%, rgba(17,17,17,.78) 66%, rgba(17,17,17,.45) 100%); } } .friends-band > * { position: relative; z-index: 1; } .friends-kopf .section-head { margin-bottom: 0; } /* Auf dem Handy waere das Logo hinter dem Text nur noch Unruhe: Es sitzt dort oben als Streifen, der Text beginnt darunter im Dunkeln. */ @media (max-width: 760px) { /* Das Abzeichen ganz zeigen statt anschneiden — ein halb abgeschnittener Schriftzug sieht nach Fehler aus, nicht nach Absicht. */ .friends-band::before { inset: 8px 0 auto 0; height: 190px; background-position: center top; background-size: contain; opacity: 1; } .friends-band::after { background: linear-gradient(180deg, rgba(17,17,17,0) 0%, rgba(17,17,17,0) 150px, var(--dark) 205px, var(--dark) 100%); } .friends-band .wrap { padding-top: 200px; } } /* Im dunklen Streifen brauchen die Faktenzeilen helle Linien. */ .friends-band .facts .fact { border-color: rgba(255,255,255,.16); } .friends-band .facts dt { color: rgba(255,255,255,.62); } .friends-band .acc { border-color: rgba(255,255,255,.16); } .friends-band .acc details { border-color: rgba(255,255,255,.16); } .friends-band .acc summary { color: #fff; } /* Pfeil an Knöpfen, die die Website verlassen. Er steht etwas kleiner und zurückgenommen — ein Hinweis, keine zweite Botschaft. */ .btn__extern { margin-left: 2px; font-size: .9em; opacity: .75; } /* Kurzinfo im Kalender: eine Zeile für das, was der Titel nicht sagt. Bewusst klein — der Kalender bleibt eine Übersicht, kein Programmheft. */ .cal__info { display: block; margin-top: 2px; font-size: .82rem; color: var(--muted); line-height: 1.45; } /* ========================================================================== Sponsorenwand 24 Logos aus 24 Werkstätten: verschiedene Formate, Hintergründe, Qualitäten. Dieselbe weisse Kachel mit abgerundeten Ecken und demselben Innenabstand bringt sie auf eine Linie, ohne eines zu bevorzugen. Die Logos werden nur eingepasst, nie beschnitten — ein angeschnittenes Firmenlogo wäre ein Affront gegen den, der dafür bezahlt. ========================================================================== */ .sponsoren { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 620px) { .sponsoren { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 900px) { .sponsoren { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1200px) { .sponsoren { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .sponsor { display: flex; align-items: center; justify-content: center; /* Die Logos sind bis 520 Pixel breit. Ohne min-width:0 ist die Kachel als Rasterfeld so breit wie ihr Logo — Safari hat die Spalte darauf aufgeblasen, während der Seitenkopf bei der Bildschirmbreite blieb. Genau das sah man: Gerteis, Schweizer und Brossi standen rechts heraus. */ min-width: 0; aspect-ratio: 5 / 3; padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; } /* Das Bild füllt die Kachel und wird von object-fit: contain hineingepasst — es kann also gar nicht breiter werden als die Kachel. Vorher stand hier width:auto mit max-width und max-height: Dabei rechnet der Browser die Breite aus dem Seitenverhältnis und muss sie danach ein zweites Mal begrenzen. Safari tut das bei einem Elternteil mit aspect-ratio nicht zuverlässig — ein Logo mit Seitenverhältnis 4.4 (Max Schweizer) wurde so breiter als seine Kachel. Diese Fassung hat den zweiten Schritt nicht nötig. Zugeschnitten wird weiterhin nichts. */ .sponsor img { width: 100%; height: 100%; min-width: 0; object-fit: contain; } a.sponsor:hover, a.sponsor:focus-visible { border-color: var(--red); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.07); } /* ========================================================================== Logoband auf der Startseite Eine einzige Zeile, die langsam durchläuft. So bekommen 24 Logos ihren Auftritt, ohne dass die Startseite um einen halben Bildschirm wächst. ========================================================================== */ .logoband__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; } .logoband { overflow: hidden; /* Ausblenden an beiden Rändern: das Band hört nicht auf, es zieht weiter */ -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .logoband__lauf { display: flex; width: max-content; animation: logolauf 80s linear infinite; } .logoband:hover .logoband__lauf { animation-play-state: paused; } .logoband__spur { display: flex; align-items: center; gap: 12px; padding-right: 12px; } .logoband__spur img { height: 64px; width: 132px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px; flex: none; } @keyframes logolauf { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Wer Bewegung im Betriebssystem abgestellt hat, bekommt keine — dann lässt sich das Band von Hand schieben. */ @media (prefers-reduced-motion: reduce) { .logoband { overflow-x: auto; } .logoband__lauf { animation: none; } } /* --- Wochenplan: eigenes Training vs. Gast ------------------------------ Die Kader-Trainings von Swiss Cycling stehen im Plan, weil die Bahn dann belegt ist. Sie treten aber zurück — wer ein Powerbike-Training sucht, soll nicht erst aussortieren müssen. */ .slot--eigen { border-left: 3px solid var(--tuerkis); } .slot--fremd { opacity: .62; border-left: 3px solid var(--line); } .slot--fremd:hover, .slot--fremd:focus-within { opacity: 1; } .slot__herkunft { display: block; margin: 2px 0 6px; font-size: .78rem; font-weight: 600; letter-spacing: .02em; color: var(--muted); } /* ========================================================================== Ämtli-Karten: zugeklappt eine Liste, aufgeklappt der ganze Auftrag ========================================================================== */ .amt-klapp > summary { list-style: none; cursor: pointer; } .amt-klapp > summary::-webkit-details-marker { display: none; } .amt-klapp__kopf:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: var(--r-md); } .amt-klapp__pfeil { margin-left: auto; flex: none; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; opacity: .45; transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s ease; } .amt-klapp[open] .amt-klapp__pfeil { transform: rotate(-135deg) translate(-2px, -2px); } .amt-klapp__inhalt { padding-top: 14px; } /* «In Entwicklung»: sichtbar, aber sichtbar unfertig. Übernehmen geht trotzdem — wer sich meldet, schreibt die Beschreibung mit. */ .amt-bereich--entwurf .amt-karten { opacity: .58; } .amt-bereich--entwurf .amt-karten:hover, .amt-bereich--entwurf .amt-karte:focus-within { opacity: 1; } .amt-karte--entwurf { border-style: dashed; } .amt-entwurf { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: var(--r-pill); border: 1px dashed currentColor; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .8; } /* Abonnieren direkt am Trainingsslot — dort fällt die Entscheidung. Dahinter steckt immer der Gruppenkalender, nie der einzelne Termin: AllRiders am Montag, Mittwoch und Freitag ist ein Abo, nicht drei. */ /* Die Knoepfe fuellen die Karte. Als inline-flex waren sie so breit wie ihr Text — in der schmalsten Wochenspalte (121 px innen) ergab das 129 px und der Knopf stand 25 px ueber den Rand hinaus, bei allen dreizehn. Ueber die volle Breite passt er immer, ist leichter zu treffen und sieht gewollt aus. */ .slot__abos { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } /* Gefuellt statt nur umrandet: Der Knopf ist der eine Handgriff, wegen dem jemand auf dieser Seite ist — das Training im eigenen Kalender zu haben. Als blasse Umrandung sah er aus wie ein Etikett und wurde uebersehen. */ .slot__abo { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; max-width: 100%; text-align: center; padding: 8px 12px; border-radius: var(--r-pill); border: 1px solid var(--tuerkis); background: var(--tuerkis); color: #fff; font-size: .86rem; font-weight: 700; text-decoration: none; box-shadow: 0 1px 3px color-mix(in srgb, var(--tuerkis) 30%, transparent); transition: background .15s ease, border-color .15s ease, transform .12s ease; } .slot__abo::before { content: "＋"; font-weight: 700; opacity: .85; } .slot__abo:hover, .slot__abo:focus-visible { background: var(--tuerkis-dark); border-color: var(--tuerkis-dark); transform: translateY(-1px); } /* Tastatur offen → die untere Leiste tritt ab. Auf dem Handy legt sie sich sonst über das Formularfeld, in das man gerade tippt — besonders in eingebetteten Formularen, wo die Seite nicht mitscrollt. Gesetzt wird die Klasse von app.js über visualViewport. */ body.tastatur-offen .tabbar { transform: translateY(110%); pointer-events: none; } .tabbar { transition: transform .18s ease; } /* Der Saisonkalender steht neben dem Jahreskalender, nicht bei den Trainings — er enthaelt Rennen und Anlaesse und kein einziges Training. */ .abo-saison { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); } .abo-saison h3 { margin: 0 0 6px; } .abo-saison > p { margin: 0 0 18px; max-width: 62ch; color: var(--muted); } /* Fremde Marke neben den eigenen Knoepfen: das Logo macht wiedererkennbar, wohin der Weg fuehrt, bevor jemand klickt. */ .marke { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; } .marke__logo { flex: none; width: 64px; height: 64px; border-radius: var(--r); object-fit: contain; background: #0000FF; } .marke__text { flex: 1 1 260px; min-width: 0; } .marke__text .btn-row { margin: 0; } .marke__text > p { margin: 10px 0 0; } /* Die Weltmeister-Videos. Sie liegen im dunklen Abschnitt, darum helle Schrift — und je Video eine Zeile Herkunft, weil sie nicht von uns sind. */ .wm-videos { display: grid; gap: 22px; margin-top: 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); } .wm-video { margin: 0; } .wm-video figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; line-height: 1.45; } .wm-video figcaption strong { font-size: 1.02rem; } /* Hochkant-Video (YouTube Short). Es beginnt eine eigene Zeile und bleibt schmal — sonst stuende ein 9:16-Video in einem 16:9-Rahmen und haette links und rechts schwarze Balken. */ .wm-video--hoch { grid-column: 1 / -1; max-width: 320px; } .wm-video--hoch .einbett__start, .wm-video--hoch .einbett iframe { aspect-ratio: 9 / 16; } .wm-video figcaption span { font-size: .9rem; opacity: .8; } /* ---------------------------------------------------- Kontaktformular -- */ /* Eigenes Formular statt eines fremden Rahmens: schmal, wenige Felder, und die Empfaengerwahl zuerst — wer schreibt, denkt zuerst an das Gegenueber, nicht an sich. */ .kform { margin: 0; } .kform__zeile { display: grid; gap: 14px; margin-bottom: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } .kform__feld { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .kform__feld--voll { grid-column: 1 / -1; } .kform__feld > span { font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .kform input, .kform select, .kform textarea { width: 100%; padding: 12px 14px; font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); min-width: 0; } .kform textarea { resize: vertical; min-height: 130px; line-height: 1.55; } .kform input:focus, .kform select:focus, .kform textarea:focus { outline: 2px solid var(--akzent); outline-offset: 1px; border-color: transparent; } .kform .btn { margin-top: 4px; } .kform__fuss { margin: 12px 0 0; font-size: .88rem; color: var(--muted); } /* Der Koeder muss fuer Maschinen erreichbar, fuer Menschen unsichtbar sein. display:none wuerde von manchen Robotern erkannt. Frueher stand hier left:-9999px — das kann die Seite nach links aufziehen. clip-path haelt das Feld an Ort und Stelle und trotzdem unsichtbar. */ .kform { position: relative; } .kform__koeder { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Auswahl am Gesicht. Die Kaestchen bleiben echte Kaestchen — sie liegen nur unsichtbar unter dem Bild. Ohne JavaScript, ohne ARIA-Bastelei: Tastatur, Vorlesegeraet und Formularversand funktionieren von selbst. */ /* Mailadressen stehen rueckwaerts im Quelltext (siehe mails_verstecken in build.py). bidi-override dreht sie am Bildschirm zurueck — gelesen wird «marketing@powerbike.ch», im Quelltext steht «hc.ekibrewop@gnitekram». Beim Kopieren mit der Maus kommt die gedrehte Fassung mit; darum baut das JavaScript zusaetzlich einen echten mailto-Verweis. */ .mail__r { unicode-bidi: bidi-override; direction: rtl; } a.mail[href] { cursor: pointer; } /* Der Aufruf an die Eltern steht als eigene Box unter der Liste — nicht als Kleingedrucktes. Wer ihn liest, soll ihn als Einladung lesen. */ .riders__aufruf { margin-top: 26px; padding: 20px 22px; border: 1px solid var(--line); border-left: 4px solid var(--akzent); border-radius: var(--r-sm); background: var(--bg); } .riders__aufruf p { margin: 0; font-size: 1.02rem; } .riders__aufruf p + p { margin-top: 8px; font-size: .88rem; } .riders__aufruf a { color: var(--akzent); font-weight: 600; } /* «Vergangene Tage zeigen» — nur am Handy sichtbar, ruhig gehalten. Es ist ein Nachschlagen, kein Hauptweg. */ .week__frueher { display: block; width: 100%; margin: 0 0 12px; padding: 11px 14px; border: 1px dashed var(--line); border-radius: var(--r-sm); background: transparent; color: var(--muted); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; } .week__frueher:hover { border-color: var(--akzent); color: var(--ink-2); } @media (min-width: 761px) { .week__frueher { display: none; } } /* Der Anriss auf der Startseite: EIN Beitrag, gross genug, dass Bild, Titel und Anrisstext zusammen wirken. Vorher standen hier drei Karten nebeneinander — auf der wichtigsten Seite des Vereins zu viel Gedraenge. */ .anriss { display: grid; gap: 0; text-decoration: none; color: inherit; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--bg); box-shadow: var(--shadow-sm); transition: box-shadow .18s, border-color .18s; } .anriss:hover { box-shadow: var(--shadow); border-color: transparent; } .anriss__bild { display: block; overflow: hidden; background: var(--surface); } .anriss__bild img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 16 / 10; transition: transform .4s ease; } .anriss:hover .anriss__bild img { transform: scale(1.03); } .anriss__text { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 26px 24px 24px; } .anriss__text h3 { margin: 0; font-size: clamp(1.3rem, 3.4vw, 1.9rem); line-height: 1.15; } .anriss__text p { margin: 0; color: var(--ink-2); } .anriss .card__foot { margin-top: 4px; } @media (min-width: 760px) { .anriss { grid-template-columns: 46% 1fr; align-items: stretch; } /* Festes Verhaeltnis statt «so hoch wie das Bild». Das WM-Plakat ist hochkant — ohne Deckel waere der Anriss 660 Pixel hoch geworden und haette die halbe Startseite gefuellt. */ .anriss__bild { aspect-ratio: 4 / 3; } .anriss__bild img { height: 100%; aspect-ratio: auto; } .anriss__text { padding: 34px 34px 32px; justify-content: center; } } /* Leere Riders-Gruppe: das Kaestchen bleibt stehen, die Zeile darin erklaert warum. Weglassen wuerde so aussehen, als gaebe es die Gruppe nicht. */ .riders__leer { margin: 0; padding: 16px 18px 18px; font-size: .92rem; color: var(--muted); } .riders__anzahl--leer { color: var(--muted); font-weight: 600; } .kform__wahl { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; } .kform__wahl legend { padding: 0; margin-bottom: 12px; font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } /* Feste Spaltenzahl statt auto-fit: Bei acht Koepfen ergab auto-fit eine Reihe zu sieben und einen einsamen Nachzuegler. Drei bzw. vier Spalten teilen jede Vorstandsgroesse ruhig auf. */ .kform__koepfe { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); } @media (min-width: 560px) { .kform__koepfe { grid-template-columns: repeat(4, 1fr); } } .kkopf { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px 10px; text-align: center; cursor: pointer; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); text-decoration: none; color: inherit; transition: border-color .15s, background .15s; } .kkopf input { position: absolute; width: 1px; height: 1px; opacity: 0; clip-path: inset(50%); margin: 0; padding: 0; } .kkopf__bild { display: block; width: 56px; height: 56px; border-radius: 999px; overflow: hidden; background: var(--line); box-shadow: 0 0 0 2px var(--bg), 0 0 0 2px transparent; transition: box-shadow .15s; } .kkopf__bild img { width: 100%; height: 100%; object-fit: cover; display: block; } .kkopf__bild--leer { display: grid; place-items: center; font-weight: 800; color: var(--muted); } .kkopf__name { font-weight: 700; font-size: .86rem; line-height: 1.2; } .kkopf__rolle { font-size: .72rem; color: var(--muted); line-height: 1.25; display: flex; align-items: center; justify-content: center; gap: 4px; } .kkopf:hover { border-color: var(--akzent); } /* Gewaehlt: Rahmen, Flaeche UND ein Haken. Wer Farben schlecht unterscheidet, sieht trotzdem, was angetippt ist. */ .kkopf:has(input:checked) { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 9%, var(--bg)); } .kkopf:has(input:checked) .kkopf__bild { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--akzent); } .kkopf:has(input:checked)::after { content: "\2713"; position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 999px; background: var(--akzent); color: #fff; font-size: .72rem; font-weight: 800; line-height: 20px; text-align: center; } .kkopf:has(input:focus-visible) { outline: 2px solid var(--akzent); outline-offset: 2px; } /* Aeltere Browser ohne :has() — dort bleibt das Kaestchen sichtbar, damit die Auswahl nicht unsichtbar wird. */ @supports not selector(:has(*)) { .kkopf input { position: static; width: auto; height: auto; opacity: 1; clip-path: none; } } .kkopf--wa { border-style: dashed; } .kkopf--wa:hover { border-color: #0B6B4F; } .kkopf--wa .kkopf__rolle { color: #0B6B4F; font-weight: 700; } .kkopf--wa svg { flex: none; } .kform__alle { display: inline-flex; align-items: center; gap: 9px; margin-top: 12px; padding: 9px 15px; border: 1px solid var(--line); border-radius: 999px; font-size: .88rem; font-weight: 700; cursor: pointer; background: var(--bg); } .kform__alle input { accent-color: var(--akzent); width: 16px; height: 16px; } .kform__alle:has(input:checked) { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 9%, var(--bg)); } .kform__hinweis { margin: 12px 0 0; font-size: .86rem; color: var(--muted); } /* Wer keine Mailadresse hat, bekommt seinen eigenen Kanal. */ .kform__wa { display: inline-flex; align-items: center; gap: 9px; margin-top: 16px; padding: 10px 16px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: .92rem; color: #0B6B4F; background: #E4F7EE; border: 1px solid #A8DCC4; } .kform__wa:hover { border-color: #0B6B4F; }