/* =========================================================
   clubseite.ch – Funktionsseiten /funktionen/ (hell), Welle 27
   Wird NACH assets/start.css geladen und nutzt nur dessen Tokens.
   Klassen-Doku: w27/f1/KLASSEN.md
   ========================================================= */

/* Aktiver Menüpunkt */
.nav a[aria-current="page"],.nav a[aria-current="true"]{color:var(--cs-green-dark);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}

/* Brotkrumen */
.crumb{background:var(--cs-paper)}
.crumb ol{list-style:none;margin:0 auto;max-width:var(--cs-max);padding:14px 24px 0;display:flex;flex-wrap:wrap;gap:4px 8px;font-size:15px;color:var(--cs-muted)}
.crumb li{display:flex;align-items:center}
.crumb li+li::before{content:"›";margin-right:8px;color:var(--cs-muted)}
.crumb a{color:var(--cs-ink-2);display:inline-block;padding:6px 0}
.crumb [aria-current]{color:var(--cs-ink)}

/* Seitenkopf */
.f-hero{background:var(--cs-paper);border-bottom:1px solid var(--cs-line)}
.f-hero .wrap{display:flex;flex-direction:column;gap:16px;padding-top:28px;padding-bottom:48px}
.f-hero h1{font-size:clamp(40px,6vw,64px);line-height:.95;max-width:900px}
.f-hero h1 em{font-style:normal;color:var(--cs-green)}
.f-hero .sub{font-size:20px;color:var(--cs-ink-2);max-width:720px}
.f-hero .hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.f-hero .hero-note{font-size:15px;color:var(--cs-muted)}

/* Sprungmarken auf der Seite */
.f-toc{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.f-toc a{min-height:44px;display:flex;align-items:center;padding:0 14px;border-radius:99px;background:var(--cs-green-soft);color:var(--cs-green-dark);text-decoration:none;font-weight:500;font-size:15px}
.f-toc a:hover{background:var(--cs-soft);text-decoration:underline}

/* Gruppen-Überschrift (Übersicht) */
.f-group-h{display:flex;flex-direction:column;gap:6px}
.f-group-h h2{font-size:clamp(30px,4.4vw,40px)}
.f-group-h p{color:var(--cs-muted);max-width:760px}

/* Kacheln = verlinkte Karten */
.f-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;list-style:none;margin:0;padding:0}
.f-tile{height:100%;background:var(--cs-paper);border:1px solid var(--cs-line);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--cs-ink);min-height:44px}
.f-tile:hover{border-color:var(--cs-green);color:var(--cs-ink)}
.f-tile h3{font-family:var(--cs-body);text-transform:none;font-size:21px;font-weight:700;line-height:1.25;color:var(--cs-ink)}
.f-tile p{color:var(--cs-muted)}
.f-tile .go{margin-top:auto;color:var(--cs-green);font-weight:600}
.f-tile:hover .go{text-decoration:underline;color:var(--cs-green-dark)}
.f-tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:2px 0 0;padding:0;font-size:14px}
.f-tags li{background:var(--cs-soft);color:var(--cs-ink-2);border-radius:99px;padding:2px 10px}

/* Funktions-Raster (Detailseiten) */
.f-feat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;list-style:none;margin:0;padding:0}
.f-feat > li{background:var(--cs-paper);border:1px solid var(--cs-line);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:8px}
.f-feat h3{font-family:var(--cs-body);text-transform:none;font-size:20px;font-weight:700;line-height:1.25}
.f-feat p{color:var(--cs-muted)}
.f-feat ul{margin:0;padding:0 0 0 20px;color:var(--cs-ink-2);font-size:16px}
.f-feat ul li{margin:3px 0}
.f-feat.three{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Häkchenliste */
.f-check{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px}
.f-check li{padding-left:28px;position:relative;color:var(--cs-ink-2)}
.f-check li::before{content:"✓";position:absolute;left:0;top:0;color:var(--cs-green);font-weight:700}

/* Zwei Spalten: Text links, Kasten rechts */
.f-split{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:start}
.f-split > div{display:flex;flex-direction:column;gap:12px}
.f-split p{color:var(--cs-ink-2)}
.f-box{background:var(--cs-paper);border:1px solid var(--cs-line);border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:10px}
.f-box h3{font-family:var(--cs-body);text-transform:none;font-size:20px;font-weight:700}

/* Hinweis / Grenzen ehrlich benennen */
.f-note{background:var(--cs-green-soft);border-left:4px solid var(--cs-green);border-radius:12px;padding:16px 20px;color:var(--cs-ink-2)}
.f-note strong{color:var(--cs-ink)}
.f-note ul{margin:6px 0 0;padding-left:20px}

/* Rollen-Leiste: Wer nutzt es */
.f-roles{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.f-roles li{min-height:36px;display:flex;align-items:center;padding:0 14px;border-radius:99px;background:var(--cs-paper);border:1px solid var(--cs-line);font-size:15px;font-weight:500}

/* Verwandte Seiten */
.f-related{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.f-related a{min-height:44px;display:flex;align-items:center;padding:0 16px;border-radius:var(--cs-r);background:var(--cs-paper);border:1px solid var(--cs-line);color:var(--cs-ink);text-decoration:none;font-weight:500}
.f-related a:hover{border-color:var(--cs-green);color:var(--cs-green-dark)}

/* Tablet */
@media (max-width:1024px){
  .f-tiles,.f-feat.three{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Handy */
@media (max-width:760px){
  .crumb ol{padding:12px 16px 0}
  .f-hero .wrap{padding-top:20px;padding-bottom:36px}
  .f-hero .sub{font-size:18px}
  .f-hero .hero-cta .btn{flex:1 1 100%}
  .f-tiles,.f-feat,.f-feat.three,.f-check,.f-split{grid-template-columns:1fr}
}
@media print{
  .f-toc,.crumb{display:none}
}

/* Lange Wörter in Titeln nie über den Rand (z. B. «Mitgliederverwaltung») */
.f-hero h1,.sec h2,.f-group-h h2,.f-tile h3,.f-feat h3{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
@media (max-width:760px){.f-hero h1,.sec h2{overflow-wrap:anywhere}}
/* Logo als Klickfläche mind. 44 px */
.logo{display:inline-flex;align-items:center;min-height:44px}

/* Sprungziele nicht unter dem fixierten Kopf */
.sec[id],.f-hero{scroll-margin-top:84px}