/* Open Sans, selbst gehostet.
   Google Fonts wurde entfernt: das Einbinden uebertraegt die IP-Adresse
   jedes Besuchers an Google. Lokal gehostet faellt das weg, und die Seite
   kommt ohne Einwilligungsbanner aus.
   Lizenz: SIL Open Font License 1.1, Selbsthosting ausdruecklich erlaubt.
   Subsets: latin und latin-ext (deckt Deutsch, Englisch und Namen wie
   "Máté Szakács" ab). */

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/open-sans-latin-ext-italic.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/open-sans-latin-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/open-sans-latin-ext-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/open-sans-latin-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   ÖH an der HOK Kufstein, Stylesheet
   Hausfarben der bestehenden ÖH-Seite:
   Cyan #008BB6 (Header) · Navy #0B1623 (Footer) · Gelb #CBCA00
   Hausschrift Open Sans
   ============================================================ */

:root {
  --cyan:       #008BB6;
  --cyan-deep:  #00688A;
  --cyan-lift:  #00A6D8;
  --cyan-pale:  #E6F4FA;
  --cyan-mist:  #F2F9FC;

  /* Vollflächen in Markencyan. Eigener Token, damit sie im Dark Mode
     abdunkeln statt aufzuhellen.
     #008BB6 traegt Weiss nur mit 3,9:1, AA verlangt 4,5:1. Eine Spur
     tiefer, damit Navigation und Seitenkopf die Stufe erreichen. */
  --cyan-field: #00769A;
  --cyan-field-h: #00688A;
  /* Zweite Textfarbe auf der Cyanflaeche. Frueher halbtransparentes
     Weiss, das rechnerisch unter 4,5:1 lag. */
  --on-field:   #E7F4FA;
  /* Gelb, das auf Cyan noch lesbar ist, #CBCA00 kommt dort nur auf 2,4:1 */
  --yellow-on-cyan: #F8F77C;

  --navy:       #0B1623;
  --navy-2:     #14243A;

  --yellow:     #CBCA00;
  --yellow-lift:#E4E300;
  --yellow-pale:#FAFAE0;

  --paper:      #FFFFFF;
  --surface:    #F2F8FB;
  --surface-2:  #E6EFF4;
  --line:       #D9E5EC;
  --line-soft:  #E9F0F5;

  --ink:        #16222C;
  --ink-2:      #465866;
  --ink-3:      #5E6E7B;

  --ok:         #0E8A5F;
  --ok-bg:      #E2F4EC;
  --out:        #B4442A;
  --out-bg:     #FBE9E3;

  --focus:      #00A6D8;

  --f-body: "Open Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;
  /* Labels laufen in der Hausschrift, nur enger und in Versalien.
     Monospace wirkte wie eine Konsole, nicht wie eine Hochschulseite. */
  --f-label: "Open Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;

  --wrap: 1180px;
  --gut: clamp(20px, 4vw, 48px);
  --head-h: 78px;
  --shadow: 0 1px 2px rgba(11,22,35,.05), 0 10px 30px -14px rgba(11,22,35,.25);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cyan:      #2FB2D8;
    --cyan-deep: #7FD3EC;
    --cyan-lift: #5FC8E8;
    --cyan-pale: #0F2B38;
    --cyan-mist: #0C2230;
    --cyan-field:#075E7C;
    --cyan-field-h: #0A7598;
    --on-field:  #E7F4FA;
    --yellow-on-cyan: #F8F77C;

    --navy:      #070E17;
    --navy-2:    #0F1B29;

    --yellow:      #E4E300;
    --yellow-lift: #F2F13C;
    --yellow-pale: #2A2A08;

    --paper:     #0E1822;
    --surface:   #131F2B;
    --surface-2: #1A2835;
    --line:      #27394A;
    --line-soft: #1F303E;

    --ink:       #E8F1F6;
    --ink-2:     #AFC1CD;
    --ink-3:     #8396A4;

    --ok:        #4CC796;
    --ok-bg:     #0F2C22;
    --out:       #E08A6B;
    --out-bg:    #33201A;

    --focus:     #5FC8E8;
    --shadow: 0 1px 2px rgba(0,0,0,.5), 0 10px 30px -14px rgba(0,0,0,.8);
  }
}

:root[data-theme="dark"] {
  --cyan:      #2FB2D8;
  --cyan-deep: #7FD3EC;
  --cyan-lift: #5FC8E8;
  --cyan-pale: #0F2B38;
  --cyan-mist: #0C2230;
  --cyan-field:#075E7C;
  --cyan-field-h: #0A7598;
  --on-field:  #E7F4FA;
  --yellow-on-cyan: #F8F77C;
  --navy:      #070E17;
  --navy-2:    #0F1B29;
  --yellow:      #E4E300;
  --yellow-lift: #F2F13C;
  --yellow-pale: #2A2A08;
  --paper:     #0E1822;
  --surface:   #131F2B;
  --surface-2: #1A2835;
  --line:      #27394A;
  --line-soft: #1F303E;
  --ink:       #E8F1F6;
  --ink-2:     #AFC1CD;
  --ink-3:     #8396A4;
  --ok:        #4CC796;
  --ok-bg:     #0F2C22;
  --out:       #E08A6B;
  --out-bg:    #33201A;
  --focus:     #5FC8E8;
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 10px 30px -14px rgba(0,0,0,.8);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
p { margin: 0; }
img { max-width: 100%; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.015em;
  text-wrap: balance;
}

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.lede { font-size: clamp(16px, 1.5vw, 18px); color: var(--ink-2); max-width: 64ch; }
.mono { font-variant-numeric: tabular-nums; font-weight: 600; }
.skip {
  position: absolute; left: -9999px; top: 0; background: var(--yellow);
  color: var(--navy); padding: 12px 18px; font-weight: 700; z-index: 999;
}
.skip:focus { left: 12px; top: 12px; }

/* ==================== Sprachhinweis ==================== */
/* Liegt ueber dem Header, damit er nicht uebersehen wird, und
   verschwindet dauerhaft, sobald jemand ihn wegklickt. */
.langbar { background: var(--yellow); color: var(--navy); }
.langbar__in {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding-block: 11px; font-size: 14.5px;
}
.langbar__txt { font-weight: 600; }
.langbar__go {
  font-weight: 800; text-decoration: none;
  border-bottom: 2px solid currentColor; padding-bottom: 2px;
}
.langbar__go:hover { color: var(--cyan-dark, #005472); }
.langbar__no {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  font-family: var(--f-body); font-size: 13.5px; color: var(--navy);
  opacity: .72; text-decoration: underline; padding: 4px;
}
.langbar__no:hover { opacity: 1; }
/* Auf dem Telefon bricht der Hinweis auf zwei Zeilen um. Ohne eigenen
   Zeilenabstand kleben Satz und Schaltflaechen aneinander, und die
   Tippziele liegen zu dicht beieinander. */
@media (max-width: 560px) {
  .langbar__in { padding-block: 14px 16px; gap: 12px 22px; }
  .langbar__txt { flex-basis: 100%; line-height: 1.45; }
  .langbar__go { padding-bottom: 3px; }
  .langbar__no {
    margin-left: 0; padding: 5px 0; font-size: 14px; opacity: .78;
  }
}

/* ==================== HEADER ==================== */
.head {
  position: sticky; top: 0; z-index: 200;
  background: var(--cyan-field);
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
}
.head__in { display: flex; align-items: center; gap: 20px; min-height: var(--head-h); }

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.brand img { height: 44px; width: auto; display: block; }
.brand__txt { color: #fff; line-height: 1.15; }
.brand__txt b { display: block; font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; }
.brand__txt span {
  display: block; font-family: var(--f-label);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-field);
}
@media (max-width: 620px) { .brand__txt { display: none; } }

.nav { display: flex; align-items: stretch; margin-left: auto; }
.nav__item { position: relative; }
.nav__link {
  display: flex; align-items: center; gap: 7px; height: var(--head-h);
  padding: 0 13px; text-decoration: none; white-space: nowrap;
  color: #fff; font-weight: 700; font-size: 13px;
  letter-spacing: .06em; text-transform: uppercase;
  border: 0; background: none; cursor: pointer; font-family: var(--f-body);
}
.nav__link:hover, .nav__item:hover > .nav__link { background: rgba(0,0,0,.16); }
.nav__link[aria-current="page"], .nav__item--active > .nav__link {
  box-shadow: inset 0 -4px 0 var(--yellow);
}
.caret {
  width: 7px; height: 7px; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px,-2px); opacity: .85;
}

.drop {
  position: absolute; top: var(--head-h); left: 0; min-width: 228px;
  background: var(--paper); border: 1px solid var(--line);
  border-top: 3px solid var(--yellow);
  box-shadow: var(--shadow); padding: 8px; display: none; flex-direction: column;
}
.nav__item:hover .drop, .nav__item:focus-within .drop { display: flex; }
.drop a { padding: 10px 12px; text-decoration: none; font-size: 14.5px; color: var(--ink-2); border-radius: 2px; white-space: nowrap; }
.drop a:hover { background: var(--cyan-pale); color: var(--cyan-deep); }
.drop a[aria-current="page"] { color: var(--cyan-deep); font-weight: 700; }

.head__cta {
  display: inline-flex; align-items: center; flex: none;
  background: var(--yellow); color: var(--navy);
  font-weight: 800; font-size: 13px; letter-spacing: .05em; text-transform: uppercase;
  padding: 13px 18px; text-decoration: none; border-radius: 2px; white-space: nowrap;
  transition: background .15s ease;
}
.head__cta:hover { background: var(--yellow-lift); }

.burger { display: none; margin-left: auto; background: none; border: 0; cursor: pointer; padding: 10px; color: #fff; }
.burger span { display: block; width: 24px; height: 2px; background: currentColor; margin: 5px 0; }

@media (max-width: 1120px) { .head__cta { display: none; } }
@media (max-width: 980px) {
  :root { --head-h: 64px; }
  .nav { display: none; }
  .burger { display: block; }
}

/* ==================== BUTTONS ==================== */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 800; font-size: 13.5px; letter-spacing: .06em; text-transform: uppercase;
  padding: 14px 22px; border-radius: 2px; text-decoration: none;
  border: 2px solid transparent; cursor: pointer; font-family: var(--f-body);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn--yellow { background: var(--yellow); color: var(--navy); }
.btn--yellow:hover { background: var(--yellow-lift); }
.btn--ghost { border-color: rgba(255,255,255,.72); color: #fff; }
.btn--ghost:hover { background: #fff; color: var(--cyan-deep); border-color: #fff; }
.btn--line { border-color: var(--line); color: var(--ink); }
.btn--line:hover { border-color: var(--cyan); color: var(--cyan-deep); }

.link-more {
  font-weight: 800; font-size: 13.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cyan-deep); text-decoration: none;
  border-bottom: 2px solid var(--yellow); padding-bottom: 3px; white-space: nowrap;
}
.link-more:hover { color: var(--cyan); }

/* ==================== STARTSEITEN-HERO ==================== */
.hero {
  background: var(--cyan-field); color: #fff;
  position: relative; overflow: hidden;
  padding: clamp(48px, 7vw, 92px) 0 clamp(52px, 7vw, 96px);
}
.hero::after {
  content: ""; position: absolute; right: -140px; top: -120px;
  width: 620px; height: 620px; border-radius: 50%; background: rgba(255,255,255,.055);
}
.hero::before {
  content: ""; position: absolute; right: 90px; bottom: -240px;
  width: 420px; height: 420px; border-radius: 50%; background: rgba(11,22,35,.07);
}
.hero__in { position: relative; z-index: 1; max-width: 760px; }
.hero h1 { font-size: clamp(34px, 5.4vw, 62px); color: #fff; }
.hero h1 em { font-style: normal; color: var(--yellow-on-cyan); }
.hero__sub {
  margin-top: 20px; font-size: clamp(16px, 1.7vw, 19px);
  color: var(--on-field); max-width: 58ch;
}
.hero__cta { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }

/* ==================== SEITENKOPF (Unterseiten) ==================== */
.pagehead { background: var(--cyan-field); color: #fff; padding: clamp(26px, 3.5vw, 40px) 0 clamp(28px, 4vw, 44px); }
.crumb { font-family: var(--f-label); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-field); }
.crumb a { text-decoration: none; }
.crumb a:hover { color: #fff; text-decoration: underline; }
.crumb span { opacity: .5; padding: 0 6px; }
.pagehead h1 { font-size: clamp(30px, 4.4vw, 50px); color: #fff; margin-top: 12px; max-width: 20ch; }
.pagehead p { margin-top: 16px; color: var(--on-field); max-width: 58ch; font-size: clamp(15px, 1.5vw, 17.5px); }

/* Bereichs-Unternavigation */
.subnav { background: var(--navy); }
.subnav__in { display: flex; gap: 2px; overflow-x: auto; }
.subnav a {
  padding: 15px 16px; text-decoration: none; white-space: nowrap;
  color: rgba(255,255,255,.72); font-size: 13.5px; font-weight: 700;
  letter-spacing: .04em; border-bottom: 3px solid transparent;
}
.subnav a:hover { color: #fff; background: var(--navy-2); }
.subnav a[aria-current="page"] { color: #fff; border-bottom-color: var(--yellow); }

/* ==================== SEKTIONEN ==================== */
.sec { padding: clamp(44px, 5.5vw, 76px) 0; }
.sec--tint { background: var(--surface); }
.sec--mist { background: var(--cyan-mist); }
.sec--tight { padding-block: clamp(34px, 4vw, 52px); }

.sec__head { max-width: 70ch; margin-bottom: clamp(26px, 3.2vw, 40px); }
.sec__head h2 { font-size: clamp(24px, 3.1vw, 36px); }
.sec__head p { margin-top: 14px; }

.sec__headrow {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: clamp(22px, 2.8vw, 34px);
}
.sec__headrow h2 { font-size: clamp(24px, 3.1vw, 36px); }

.rule { width: 56px; height: 4px; background: var(--yellow); border-radius: 2px; margin-bottom: 16px; }

.prose { max-width: 66ch; }
.prose p + p { margin-top: 16px; }
.prose p { color: var(--ink-2); font-size: 16.5px; }
.prose h2 { font-size: 20px; margin-top: 30px; margin-bottom: 10px; }
.prose a { color: var(--cyan-deep); }

/* ==================== SCHNELLZUGRIFF ==================== */
.quick { background: var(--navy); }
.quick__in { display: grid; grid-template-columns: repeat(4, 1fr); }
.quick a {
  display: flex; flex-direction: column; gap: 4px; padding: 22px 24px;
  text-decoration: none; color: #fff; border-left: 1px solid rgba(255,255,255,.1);
  transition: background .15s ease;
}
.quick a:first-child { border-left: 0; }
.quick a:hover { background: var(--navy-2); }
.quick b { font-size: 15.5px; font-weight: 700; }
.quick b::after { content: " →"; color: var(--yellow); }
.quick span { font-size: 13px; color: rgba(255,255,255,.66); }
@media (max-width: 860px) { .quick__in { grid-template-columns: 1fr 1fr; } .quick a:nth-child(3) { border-left: 0; } }
@media (max-width: 520px) { .quick__in { grid-template-columns: 1fr; } .quick a { border-left: 0; border-top: 1px solid rgba(255,255,255,.1); } .quick a:first-child { border-top: 0; } }

/* ==================== SPLIT (Text + Beikasten) ==================== */
.cols { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: clamp(28px,5vw,64px); align-items: start; }
@media (max-width: 860px) { .cols { grid-template-columns: 1fr; } }

.aside-box {
  background: var(--paper); border: 1px solid var(--line);
  border-left: 4px solid var(--cyan); border-radius: 3px; padding: 24px;
}
.aside-box h2 { font-size: 16.5px; }
.aside-box ul { list-style: none; margin: 14px 0 0; padding: 0; }
.aside-box li { padding: 11px 0; border-top: 1px solid var(--line-soft); font-size: 14.5px; color: var(--ink-2); }
.aside-box li:first-child { border-top: 0; }
.aside-box b { color: var(--ink); }

/* ==================== PERSONEN ==================== */
.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.team--4 { grid-template-columns: repeat(4, 1fr); }
.person {
  background: var(--paper); border: 1px solid var(--line); border-radius: 3px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .18s ease, transform .18s ease;
}
.person:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.person__img { position: relative; background: #008BB6; aspect-ratio: 4 / 4.2; overflow: hidden; }
.person__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; display: block; }
.person__badge {
  position: absolute; left: 0; bottom: 0; background: var(--yellow); color: var(--navy);
  font-family: var(--f-label); font-size: 10.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; padding: 7px 12px;
}
.person__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.person h2 { font-size: 20px; }
.person__role { color: var(--ink-2); font-size: 14.5px; }
.person__mail {
  margin-top: auto; padding-top: 14px; font-family: var(--f-label); font-size: 12.5px;
  color: var(--cyan-deep); text-decoration: none; word-break: break-all;
}
.person__mail:hover { text-decoration: underline; }
@media (max-width: 980px) { .team--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 880px) { .team { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .team, .team--4 { grid-template-columns: 1fr; } }

/* Namensliste ohne Foto */
.namelist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.namelist li {
  padding: 16px 0; border-bottom: 1px solid var(--line-soft);
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr) auto;
  gap: 18px; align-items: baseline;
}
.namelist b { font-size: 17px; font-weight: 700; }
.namelist .nl-role { color: var(--ink-2); font-size: 14.5px; }
.namelist .nl-mail { font-family: var(--f-label); font-size: 12.5px; color: var(--cyan-deep); text-decoration: none; white-space: nowrap; }
@media (max-width: 760px) { .namelist li { grid-template-columns: 1fr; gap: 4px; } }

/* ==================== REFERATE-REGISTER ==================== */
.tablescroll { overflow-x: auto; }
.register { width: 100%; border-collapse: collapse; font-size: 15px; background: var(--paper); }
.register th {
  text-align: left; font-family: var(--f-label); font-weight: 500;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
  padding: 0 16px 11px 0; border-bottom: 2px solid var(--cyan);
}
.register td { padding: 15px 16px 15px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.register tr:hover td { background: var(--cyan-pale); }
.r-name { font-weight: 800; font-size: 16px; white-space: nowrap; }
.r-desc { color: var(--ink-2); font-size: 14.5px; }
.r-mail { font-family: var(--f-label); font-size: 12.5px; color: var(--cyan-deep); text-decoration: none; white-space: nowrap; }
.r-mail:hover { text-decoration: underline; }
@media (max-width: 760px) { .r-desc { display: none; } }

/* ==================== STRUKTUR-TREPPE ==================== */
/* Die vier Ebenen liegen ineinander: der Jahrgang sitzt in der StV,
   die StV in der HV, die HV in der BV. Die Einrückung bildet das ab. */
.ladder { list-style: none; margin: 0; padding: 0; }
.ladder > li { position: relative; }
.ladder__card {
  background: var(--paper); border: 1px solid var(--line);
  border-left: 5px solid var(--cyan); border-radius: 3px;
  padding: 22px 24px; margin-bottom: 14px;
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,260px);
  gap: 20px; align-items: start;
}
.ladder > li:nth-child(1) .ladder__card { margin-left: 0; }
.ladder > li:nth-child(2) .ladder__card { margin-left: clamp(0px, 4vw, 56px); }
.ladder > li:nth-child(3) .ladder__card { margin-left: clamp(0px, 8vw, 112px); }
.ladder > li:nth-child(4) .ladder__card { margin-left: clamp(0px, 12vw, 168px); border-left-color: var(--navy); }
.ladder__n {
  font-family: var(--f-label); font-size: 10.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--cyan-deep);
}
.ladder h2 { font-size: 19px; margin-top: 6px; }
.ladder p { font-size: 14.5px; color: var(--ink-2); margin-top: 8px; }
.ladder__meta {
  font-family: var(--f-label); font-size: 11.5px; color: var(--ink-3); line-height: 1.75;
  border-left: 1px solid var(--line); padding-left: 18px;
}
@media (max-width: 760px) {
  .ladder__card { grid-template-columns: 1fr; }
  .ladder__meta { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-top: 12px; }
}

/* ==================== BEITRAG ==================== */
.fee { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: clamp(28px,5vw,64px); align-items: center; }
.fee__amount {
  font-size: clamp(56px, 10vw, 112px); font-weight: 800; line-height: .95;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--cyan);
}
.fee__amount sup { font-size: .32em; vertical-align: super; letter-spacing: 0; }
.fee__when { font-family: var(--f-label); font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); margin-top: 14px; }
.fee__prev { font-size: 15px; color: var(--ink-2); margin-top: 18px; max-width: 34ch; }
.fee__prev b { color: var(--ink); }
@media (max-width: 820px) { .fee { grid-template-columns: 1fr; } }

/* ==================== EVENTS ==================== */
.cal { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(0,1fr); gap: clamp(28px,4vw,56px); align-items: start; }
.evt-list { display: flex; flex-direction: column; }
.evt {
  display: grid; grid-template-columns: 78px minmax(0,1fr) auto; gap: 20px; align-items: center;
  padding: 18px 0; border-top: 1px solid var(--line); text-decoration: none;
}
.evt:first-child { border-top: 0; padding-top: 0; }
.evt__date { text-align: center; border-right: 2px solid var(--cyan); padding-right: 16px; }
.evt__d { font-size: 30px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
/* .evt ist ein Grid, das hidden-Attribut allein wuerde es nicht
   verbergen. */
.evt[hidden], .evt-leer[hidden] { display: none; }
.evt-leer {
  padding: 18px 0; border-top: 1px solid var(--line);
  color: var(--ink-2); font-size: 15px;
}
.evt__m { font-family: var(--f-label); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-top: 5px; }
.evt__t { font-size: 18px; font-weight: 700; transition: color .15s ease; }
.evt__meta { font-family: var(--f-label); font-size: 12px; color: var(--ink-3); margin-top: 6px; }
.tag { font-family: var(--f-label); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 5px 9px; border-radius: 2px; white-space: nowrap; font-weight: 600; }
.tag--party { background: var(--yellow-pale); color: #6B6B0A; }
.tag--sport { background: var(--cyan-pale); color: var(--cyan-deep); }
.tag--info  { background: var(--surface-2); color: var(--ink-2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tag--party { color: var(--yellow); } }
:root[data-theme="dark"] .tag--party { color: var(--yellow); }
@media (max-width: 620px) { .evt { grid-template-columns: 64px minmax(0,1fr); } .evt .tag { grid-column: 2; justify-self: start; } }

.deadlines { background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--yellow); border-radius: 3px; padding: 24px; }
.deadlines h2 { font-size: 17px; }
.dl { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line-soft); }
.dl:first-of-type { border-top: 0; padding-top: 14px; }
.dl__bar { width: 3px; border-radius: 2px; flex: none; background: var(--cyan); }
.dl__bar--warn { background: var(--yellow); }
.dl__t { font-weight: 700; font-size: 15px; }
.dl__d { font-family: var(--f-label); font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.dl__note { font-size: 13.5px; color: var(--ink-2); margin-top: 6px; }
@media (max-width: 880px) { .cal { grid-template-columns: 1fr; } }

/* ==================== VERLEIH ==================== */
/* Das Board mit Verfuegbarkeits-Chips ist einem Anfrageformular gewichen;
   dessen Styles stehen unter "Verleihformular". */

/* ==================== DOWNLOADS ==================== */
.docs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(28px,4vw,56px); }
.docgroup { padding: 24px 0; border-top: 1px solid var(--line); }
.docgroup h2 { font-size: 16.5px; margin-bottom: 13px; }
.docgroup ul { list-style: none; margin: 0; padding: 0; }
.docgroup li { padding: 7px 0; }
.doc { display: flex; align-items: baseline; gap: 11px; text-decoration: none; font-size: 14.5px; color: var(--ink-2); }
.doc:hover { color: var(--cyan-deep); }
.doc__ext { font-family: var(--f-label); font-size: 10px; letter-spacing: .08em; color: var(--cyan-deep); border: 1px solid var(--line); background: var(--cyan-pale); padding: 2px 5px; border-radius: 2px; flex: none; }
.doc__name { flex: 1; }
.doc__date { font-family: var(--f-label); font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; flex: none; }
@media (max-width: 780px) { .docs { grid-template-columns: 1fr; } }

/* ==================== KONTAKT ==================== */
.contact { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: clamp(28px,5vw,60px); align-items: start; }
.paths { display: grid; gap: 14px; }
.path {
  background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--cyan);
  border-radius: 3px; padding: 20px 22px; text-decoration: none;
  display: flex; flex-direction: column; gap: 7px; transition: background .15s ease;
}
.path:hover { background: var(--cyan-pale); }
.path h2 { font-size: 17.5px; }
.path p { font-size: 14.5px; color: var(--ink-2); }
.path__mail { font-family: var(--f-label); font-size: 12.5px; color: var(--cyan-deep); margin-top: 4px; word-break: break-all; }
.path__sla { font-family: var(--f-label); font-size: 11px; color: var(--ink-3); }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } }

.office { background: var(--navy); color: #fff; border-radius: 3px; padding: 28px; }
.office__top { display: flex; align-items: center; gap: 10px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 4px rgba(203,202,0,.22); flex: none; }
.office__status { font-family: var(--f-label); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--yellow); font-weight: 600; }
.office h2 { font-size: 22px; margin-top: 14px; color: #fff; }
.office__rows { margin-top: 18px; }
.office__row { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.13); font-size: 14.5px; }
.office__row:first-child { border-top: 0; }
.office__row span { font-family: var(--f-label); font-size: 13px; color: rgba(255,255,255,.72); font-variant-numeric: tabular-nums; }
.office__addr { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.13); font-style: normal; font-size: 14.5px; color: rgba(255,255,255,.8); line-height: 1.75; }
.office__addr a { color: var(--yellow); text-decoration: none; }
.office__addr a:hover { text-decoration: underline; }

/* ==================== CTA-BAND ==================== */
.band {
  background: var(--cyan-field); color: #fff; border-radius: 3px; padding: clamp(30px,5vw,54px);
  display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: clamp(26px,4vw,52px); align-items: center;
}
.band h2 { font-size: clamp(25px,3.4vw,40px); color: #fff; }
.band > div > p { margin-top: 16px; color: var(--on-field); max-width: 46ch; }
.band .btn { margin-top: 26px; }
.band__row { padding: 13px 0; border-top: 1px solid rgba(255,255,255,.22); display: flex; gap: 14px; align-items: baseline; }
.band__row:first-child { border-top: 0; }
.band__k { font-family: var(--f-label); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--yellow-on-cyan); width: 86px; flex: none; }
.band__v { font-size: 14.5px; color: var(--on-field); }
@media (max-width: 820px) { .band { grid-template-columns: 1fr; } }

/* ==================== FAQ ==================== */
.faq { max-width: 860px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative; font-size: 17px; font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-family: var(--f-label); font-size: 22px; color: var(--cyan); line-height: 1;
}
.faq details[open] summary::after { content: "−"; }
.faq summary:hover { color: var(--cyan-deep); }
.faq__a { padding: 0 0 22px; color: var(--ink-2); font-size: 15px; max-width: 70ch; }
.faq__a a { color: var(--cyan-deep); }

/* ==================== KURSLISTE (Sport / Kultur) ==================== */
.courses { width: 100%; border-collapse: collapse; font-size: 15px; }
.courses th {
  text-align: left; font-family: var(--f-label); font-weight: 500; font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
  padding: 0 16px 11px 0; border-bottom: 2px solid var(--cyan);
}
.courses td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.courses .c-name { font-weight: 700; font-size: 15.5px; }
.courses .c-when { font-family: var(--f-label); font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.courses .c-where { color: var(--ink-2); font-size: 14px; }
.courses__cap {
  text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); padding-bottom: 12px;
}

/* ==================== GALERIE ==================== */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.tile {
  aspect-ratio: 4 / 3; border-radius: 3px; border: 1px solid var(--line);
  background: var(--surface-2); display: flex; align-items: flex-end; padding: 14px;
  font-family: var(--f-label); font-size: 11.5px; color: var(--ink-3); text-decoration: none;
}
.tile:hover { border-color: var(--cyan); color: var(--cyan-deep); }

/* ==================== BLOG ==================== */
.posts { display: flex; flex-direction: column; }
.post { padding: 22px 0; border-top: 1px solid var(--line); text-decoration: none; display: block; }
.post:first-child { border-top: 0; padding-top: 0; }
.post__meta { font-family: var(--f-label); font-size: 11.5px; color: var(--ink-3); letter-spacing: .04em; }
.post h2 { font-size: 21px; margin-top: 8px; max-width: 30ch; }
.post:hover h2 { color: var(--cyan-deep); }
.post p { margin-top: 9px; color: var(--ink-2); font-size: 15px; max-width: 66ch; }

/* ==================== FOOTER ==================== */
.foot { background: var(--navy); color: rgba(255,255,255,.78); padding: clamp(46px,5.5vw,70px) 0 26px; }
.foot__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.foot h2 {
  font-size: 16px; font-weight: 800; color: var(--yellow);
  padding-bottom: 12px; margin-bottom: 18px; border-bottom: 1px solid var(--cyan);
}
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.foot a { text-decoration: none; font-size: 15px; }
.foot a:hover { color: #fff; text-decoration: underline; }
.foot address { font-style: normal; font-size: 15px; line-height: 1.85; }
.foot address a { color: var(--yellow); }
.social { display: flex; gap: 12px; justify-content: center; margin-top: 44px; }
.social a {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.24);
  display: grid; place-items: center; font-family: var(--f-label); font-size: 11px;
  font-weight: 600; text-decoration: none;
}
.social a:hover { background: var(--yellow); border-color: var(--yellow); color: var(--navy); text-decoration: none; }
.foot__copy { text-align: center; margin-top: 22px; font-size: 14px; color: rgba(255,255,255,.6); }
.foot__copy b { color: var(--yellow); font-weight: 700; }
@media (max-width: 780px) { .foot__grid { grid-template-columns: 1fr; gap: 32px; } }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* ==================== Sprungziele ==================== */
/* Der Kopf steht fest oben und wuerde das angesprungene Element sonst
   verdecken: Ein Klick im Kalender landete bisher so, dass der Termin
   hinter dem Kopf lag. scroll-margin haelt ihn frei. */
html { scroll-behavior: smooth; }

[id] { scroll-margin-top: calc(var(--head-h) + 20px); }

/* Angesprungenes hervorheben, damit man es nach dem Sprung findet */
.evt:target {
  background: var(--cyan-pale);
  box-shadow: 0 0 0 10px var(--cyan-pale);
  border-radius: 3px;
}
.evt:target .evt__t { color: var(--cyan-deep); }

/* ==================== Team 2026/27 ==================== */
/* Karte ohne Portraitfoto, Initialen auf Markencyan */
.person__img--blank {
  display: grid; place-items: center;
  background:
    radial-gradient(120% 120% at 70% 0%, rgba(255,255,255,.16) 0%, transparent 60%),
    var(--cyan-field);
}
.person__initials {
  font-size: 54px; font-weight: 800; letter-spacing: -.02em;
  color: rgba(255,255,255,.72); line-height: 1;
}
.person__sg { font-family: var(--f-label); font-size: 11.5px; color: var(--ink-3); }

/* Englische Zweitbezeichnung im Referatsregister */
.r-en {
  display: block; font-family: var(--f-label); font-size: 10.5px;
  font-weight: 400; letter-spacing: .06em; color: var(--ink-3);
  text-transform: uppercase; margin-top: 3px;
}
.r-lead { font-size: 14.5px; white-space: nowrap; }
.r-crew { font-size: 13.5px; color: var(--ink-2); line-height: 1.65; }

/* Unbesetzte Position, als Zustand kenntlich, nicht als Fehler */
.open {
  font-weight: 600; color: var(--ink-3); font-style: italic;
}
b.open { font-style: normal; }

.note {
  font-size: 13.5px; color: var(--ink-3);
  border-left: 3px solid var(--line); padding-left: 14px; max-width: 70ch;
}
.note a { color: var(--cyan-deep); }

@media (max-width: 900px) { .r-crew { display: none; } }

/* ==================== Verleihformular ==================== */
.lend { max-width: 860px; }
.lend__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
}
.field--breit { grid-column: 1 / -1; }
@media (max-width: 640px) { .lend__grid { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 7px; }
.field__l {
  font-family: var(--f-label); font-size: 11px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
.field input, .field textarea {
  font-family: var(--f-body); font-size: 15px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 2px; padding: 11px 13px; width: 100%;
}
.field textarea { resize: vertical; min-height: 92px; }
.field__hint { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.field__hint b { font-weight: 600; color: var(--ink); }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--cyan);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 30%, transparent);
}
/* Tastaturfokus bekommt zusaetzlich den Rahmen der uebrigen Seite. */
.field input:focus-visible, .field textarea:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 1px;
}
/* Rot erst, wenn jemand das Feld auch bearbeitet hat. Mit
   :invalid:not(:placeholder-shown) standen Name, Mail und beide
   Datumsfelder schon beim Laden rot da, weil ein Datumsfeld keinen
   Platzhalter hat. */
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--out); }

.picks {
  margin-top: 26px; display: flex; flex-direction: column; gap: 14px;
  border: 0; padding: 0; min-width: 0;   /* fieldset-Vorgaben zuruecksetzen */
}
.picks > legend { padding: 0; margin-bottom: 2px; }
.pickgroup {
  border: 1px solid var(--line); border-radius: 2px; background: var(--paper);
  padding: 14px 16px 16px; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px;
}
.pickgroup legend {
  font-family: var(--f-label); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cyan-deep); font-weight: 600;
  padding: 0 7px; margin-left: -4px;
}
.pick {
  display: grid; grid-template-columns: 20px 1fr; gap: 10px;
  padding: 9px 10px; border-radius: 2px; cursor: pointer; align-items: center;
}
.pick:hover { background: var(--cyan-pale); }
.pick input { width: 20px; height: 20px; margin: 0; accent-color: var(--cyan-field); }
.pick__name { font-size: 14.5px; font-weight: 600; }
.pick:has(input:checked) { background: var(--cyan-pale); }

.check {
  display: flex; gap: 11px; align-items: flex-start;
  margin-top: 24px; font-size: 14.5px; color: var(--ink-2); max-width: 66ch;
}
.check input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--cyan-field); }

.lend__foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 28px; }
.lend__hint { font-size: 13.5px; color: var(--ink-3); }
.lend__noscript {
  border-left: 4px solid var(--yellow); background: var(--yellow-pale);
  padding: 16px 18px; margin-bottom: 24px; font-size: 15px;
}
.lend__hint.is-error { color: var(--out); font-weight: 600; }

.btn--cyan { background: var(--cyan-field); color: #fff; }
.btn--cyan:hover { background: var(--cyan-field-h); }

/* ==================== Label-Feinschliff ==================== */
/* Ohne Monospace brauchen die Kleintexte etwas mehr Gewicht,
   damit sie als Auszeichnung lesbar bleiben. */
.eyebrow, .field__l, .pickgroup legend, .office__status,
.crumb, .r-en, .item__cat, .evt__m, .level__n, .ladder__n,
.band__k, .fee__when,
.doc__ext, .doc__date, .tag, .state, .brand__txt span,
.person__badge, .person__sg, .dl__d, .evt__meta, .post__meta,
.nl-role, .c-when, .body-card li span,
.path__mail, .path__sla, .r-mail, .person__mail, .nl-mail,
.office__row span, .lend__hint, .level__meta,
.ladder__meta, .register th, .courses th, .tile, .social a {
  font-weight: 600;
}
.fee__amount, .evt__d, .doc__date, .office__row span {
  font-variant-numeric: tabular-nums;
}
.r-mail, .person__mail, .nl-mail, .path__mail { letter-spacing: 0; font-weight: 500; }
.evt__meta, .post__meta, .dl__d, .ladder__meta, .level__meta,

/* ==================== Mobile Navigation ==================== */
.navwrap { display: contents; }

@media (max-width: 980px) {
  /* Geschlossen wird das Panel wirklich unsichtbar: sonst erzeugt es
     seitlichen Overflow und bleibt per Tab erreichbar. */
  .navwrap {
    display: block;
    position: fixed; inset: var(--head-h) 0 0 0;
    background: var(--paper);
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .22s ease, visibility 0s linear .22s;
    z-index: 190;
  }
  .navwrap[data-open="true"] {
    transform: translateX(0);
    visibility: visible;
    transition: transform .22s ease, visibility 0s;
  }

  .nav {
    display: flex; flex-direction: column; margin: 0;
    padding: 8px var(--gut) 40px;
  }
  .nav__item { border-bottom: 1px solid var(--line-soft); }
  .nav__link {
    height: auto; padding: 17px 0; color: var(--ink);
    font-size: 15px; justify-content: space-between; width: 100%;
  }
  .nav__link:hover, .nav__item:hover > .nav__link { background: none; color: var(--cyan-deep); }
  .nav__item--active > .nav__link { box-shadow: none; color: var(--cyan-deep); }
  .nav__item--active > .nav__link::before {
    content: ""; position: absolute; left: calc(var(--gut) * -1);
    top: 17px; bottom: 17px; width: 4px; background: var(--yellow);
  }
  .caret { transition: transform .2s ease; transform: rotate(45deg) translate(-2px,-2px); }
  .nav__item[data-open="true"] .caret { transform: rotate(-135deg) translate(-2px,-2px); }

  /* Untermenues klappen auf, statt zu schweben */
  .drop {
    position: static; display: none; border: 0; box-shadow: none;
    background: var(--surface); padding: 6px 0 12px; min-width: 0;
    margin-bottom: 12px; border-left: 3px solid var(--cyan);
  }
  .nav__item:hover .drop, .nav__item:focus-within .drop { display: none; }
  .nav__item[data-open="true"] .drop { display: flex; }
  .drop a { padding: 12px 16px; font-size: 14.5px; }

  .navwrap .head__cta {
    display: inline-flex; margin: 24px var(--gut) 0;
    justify-content: center;
  }
  body[data-navopen="true"] { overflow: hidden; }
}

/* Burger wird im offenen Zustand zum X */
.burger span { transition: transform .2s ease, opacity .2s ease; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==================== Terminkalender ==================== */
/* Monatsansicht wie in einer Kalender-App: ein Monat in voller Breite,
   grosse Tagesfelder, Nachbarmonate ausgegraut mitgefuehrt. */
.cal { display: flex; flex-direction: column; gap: clamp(26px, 3.5vw, 44px); }

.cal__month {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.cal__month table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal__month caption {
  text-align: left; font-size: clamp(19px, 2.2vw, 25px); font-weight: 800;
  letter-spacing: -.01em; color: var(--ink);
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--line);
}
.cal__month th {
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); text-align: center;
  padding: 12px 4px; background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.cal__wd-kurz { display: none; }

.cal__day {
  vertical-align: top; width: 14.285%;
  height: 112px;                 /* table-layout fixed: wirkt als Mindesthoehe */
  padding: 8px 8px 6px;
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.cal__day:nth-child(7n) { border-right: 0; }
.cal__month tbody tr:last-child .cal__day { border-bottom: 0; }

.cal__n {
  display: block; font-size: 14px; font-weight: 600; color: var(--ink-2);
  font-variant-numeric: tabular-nums; margin-bottom: 5px; line-height: 1.2;
}
/* Tage der Nachbarmonate: sichtbar, aber zurueckgenommen */
.cal__day--out { background: var(--surface); }
/* Tage aus dem Nachbarmonat treten zurueck, bleiben aber lesbar:
   mit opacity .65 kam die Zahl nur auf 2,6:1. */
.cal__day--out .cal__n { color: var(--ink-3); font-weight: 400; }
.cal__day--has .cal__n { color: var(--ink); }

/* Heute, per JS gesetzt, die Seite selbst ist statisch */
.cal__day--heute .cal__n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 6px; border-radius: 40px;
  background: var(--cyan-field); color: #fff; font-weight: 700;
}

/* Termin-Chip: Farbpunkt plus Text, wie in Kalender-Apps */
.cal__e {
  display: flex; align-items: flex-start; gap: 6px;
  margin-bottom: 3px; padding: 4px 7px 4px 5px;
  border-radius: 4px; text-decoration: none;
  font-size: 12px; line-height: 1.35; color: var(--ink);
  background: var(--cyan-pale);
}
.cal__e:hover { background: var(--cyan-field); color: #fff; }
.cal__e:hover .cal__dot { background: currentColor; }
.cal__dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  margin-top: 5px; background: var(--cyan);
}
.cal__e-txt { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.cal__e-txt b { font-weight: 700; font-variant-numeric: tabular-nums; }

.cal__e--party { background: var(--yellow-pale); }
.cal__e--party .cal__dot { background: var(--yellow); }
.cal__e--party:hover { background: var(--yellow); color: var(--navy); }
.cal__e--sport { background: var(--surface-2); }
.cal__e--sport .cal__dot { background: var(--navy); }
.cal__e--sport:hover { background: var(--navy); color: #fff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cal__e--sport .cal__dot { background: var(--ink-2); }
  :root:not([data-theme="light"]) .cal__e--sport:hover { background: var(--surface-2); color: var(--ink); }
}
:root[data-theme="dark"] .cal__e--sport .cal__dot { background: var(--ink-2); }
:root[data-theme="dark"] .cal__e--sport:hover { background: var(--surface-2); color: var(--ink); }

@media (max-width: 900px) {
  .cal__day { height: 92px; padding: 6px 5px 5px; }
  .cal__n { font-size: 13px; }
  .cal__e { font-size: 10.5px; padding: 3px 5px 3px 4px; gap: 4px; }
  .cal__dot { width: 6px; height: 6px; margin-top: 4px; }
  .cal__wd-lang { display: none; }
  .cal__wd-kurz { display: inline; }
}

/* Unter 640px ist eine Tagesspalte rund 45px breit, Termintitel brechen
   dort buchstabenweise um. Wie in Kalender-Apps auf dem Telefon steht
   dann nur ein Punkt je Termin; die Details nennt die Liste darunter.

   Der Punkt selbst misst 9px, die Schaltflaeche darum 24px hoch und so
   breit wie die Spalte. Nebeneinander waeren drei Punkte je Tag nicht
   sicher zu treffen, untereinander schon.

   Der Termintitel wird nicht ausgeblendet, sondern nur unsichtbar
   gemacht: display:none nimmt ihn auch aus der Vorlesereihenfolge, und
   dann haette der Link keinen Namen mehr. */
@media (max-width: 640px) {
  .cal__day { height: auto; min-height: 62px; padding: 5px 2px; text-align: center; }
  .cal__n { margin-bottom: 2px; }
  .cal__e-txt {
    position: absolute; width: 1px; height: 1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .cal__e {
    display: flex; align-items: center; justify-content: center;
    min-height: 24px; padding: 0; margin: 0; background: none;
  }
  .cal__e:hover, .cal__e--party:hover, .cal__e--sport:hover { background: none; }
  .cal__dot { width: 9px; height: 9px; margin: 0; }
  .cal__e--party:hover .cal__dot, .cal__e--sport:hover .cal__dot,
  .cal__e:hover .cal__dot { transform: scale(1.25); }
  .cal__day--heute .cal__n { min-width: 24px; height: 24px; }
}


/* ==================== Wiederkehrende Termine ==================== */
.wk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.wk {
  display: grid; grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: 18px; align-items: baseline;
  padding: 15px 0 15px 14px;
  border-top: 1px solid var(--line-soft);
  border-left: 4px solid var(--cyan);
}
.wk:first-child { border-top: 0; }
.wk__tag {
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--cyan-deep);
}
.wk__body b { font-size: 16.5px; font-weight: 700; display: block; }
.wk__info { font-size: 14px; color: var(--ink-2); }
.wk__wer { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }

.wk--party { border-left-color: var(--yellow); }
.wk--party .wk__tag { color: #6B6B0A; }
.wk--sport { border-left-color: var(--navy); }
.wk--sport .wk__tag { color: var(--ink-2); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wk--party .wk__tag { color: var(--yellow); }
  :root:not([data-theme="light"]) .wk--sport { border-left-color: var(--ink-3); }
}
:root[data-theme="dark"] .wk--party .wk__tag { color: var(--yellow); }
:root[data-theme="dark"] .wk--sport { border-left-color: var(--ink-3); }

@media (max-width: 620px) {
  .wk { grid-template-columns: 1fr; gap: 3px; }
  .wk__wer { white-space: normal; }
}

/* Veranstalter in der Terminliste */
.evt__wer { color: var(--ink-3); }

/* Termine, die nicht von der ÖH kommen, sind farblich unterschieden */
.cal__e--oeh { background: var(--cyan-pale); }
.cal__e--oeh .cal__dot { background: var(--cyan); }
.cal__e--oeh:hover { background: var(--cyan-field); color: #fff; }
.cal__e--stadt { background: var(--surface-2); }
.cal__e--stadt .cal__dot { background: var(--ink-3); }
.cal__e--stadt:hover { background: var(--ink-2); color: var(--paper); }
.tag--oeh { background: var(--cyan-pale); color: var(--cyan-deep); }
.tag--stadt { background: var(--surface-2); color: var(--ink-2); }

/* ==================== Galerie ==================== */
.alben { display: flex; flex-direction: column; gap: clamp(34px, 4.5vw, 56px); }
.album__kopf { margin-bottom: 16px; }
.album__kopf h2 { font-size: clamp(19px, 2.2vw, 24px); }
.album__meta { font-size: 13.5px; color: var(--ink-3); margin-top: 5px; }

.album__bilder {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}
.shot {
  display: block; border-radius: 3px; overflow: hidden;
  background: var(--surface-2); aspect-ratio: 3 / 2;
}
.shot img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .25s ease;
}
.shot:hover img, .shot:focus-visible img { transform: scale(1.04); }
.shot:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .shot img { transition: none; } }

/* ==================== Sportprogramm ==================== */
/* Eine Spalte je Wochentag. Kein Zeitraster: am Dienstag laufen zwei
   Kurse parallel, die stuenden sich darin gegenseitig im Weg. */
.plan {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px; align-items: start;
}
.sptag {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 3px; overflow: hidden; min-width: 0;
}
.sptag__name {
  font-size: 14px; font-weight: 800; letter-spacing: .04em;
  padding: 13px 16px; background: var(--cyan-field); color: #fff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sptag__name { background: var(--cyan-field); color: #fff; }
}
:root[data-theme="dark"] .sptag__name { background: var(--cyan-field); color: #fff; }

.sptag__kurse { list-style: none; margin: 0; padding: 0; }
.kurs {
  display: flex; flex-direction: column; gap: 3px;
  padding: 13px 16px; border-top: 1px solid var(--line-soft);
}
.kurs:first-child { border-top: 0; }
.kurs__zeit {
  font-size: 12px; font-weight: 600; color: var(--cyan-deep);
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.kurs__name {
  font-size: 15px; font-weight: 600; line-height: 1.35;
  white-space: normal; overflow-wrap: break-word;
}

/* Ablauf in nummerierten Schritten */
.schritte {
  list-style: none; counter-reset: s; margin: 18px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.schritte li {
  counter-increment: s; position: relative;
  padding: 9px 0 9px 40px; font-size: 15.5px; color: var(--ink-2);
  border-top: 1px solid var(--line-soft);
}
.schritte li:first-child { border-top: 0; }
.schritte li::before {
  content: counter(s); position: absolute; left: 0; top: 8px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--cyan-pale); color: var(--cyan-deep);
  font-size: 12.5px; font-weight: 700;
  display: grid; place-items: center;
}

/* Linkliste auf der Fehlerseite */
.foot-list { list-style: none; margin: 16px 0 0; padding: 0; }
.foot-list li { padding: 10px 0; border-top: 1px solid var(--line-soft); }
.foot-list li:first-child { border-top: 0; }
.foot-list a { font-size: 16.5px; font-weight: 600; color: var(--cyan-deep); text-decoration: none; }
.foot-list a:hover { text-decoration: underline; }

/* "vertritt" vor dem Studienbereich zurücknehmen, damit der Bereich führt */
.nl-vertritt { color: var(--ink-3); font-weight: 400; }

/* ==================== Hilfsklassen ====================
   Fruehere style-Attribute. Die Content-Security-Policy erlaubt kein
   style-src 'unsafe-inline', Inline-Styles werden im Betrieb also
   verworfen. Die Werte sind unveraendert uebernommen. */
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-22 { margin-top: 22px; }
.mt-24 { margin-top: 24px; }
.mt-26 { margin-top: 26px; }
.mt-28 { margin-top: 28px; }
.mt-34 { margin-top: 34px; }
.mb-22 { margin-bottom: 22px; }
.mb-26 { margin-bottom: 26px; }
.mb-a  { margin-bottom: clamp(22px, 2.6vw, 32px); }
.mb-b  { margin-bottom: clamp(24px, 3vw, 34px); }
.mb-c  { margin-bottom: clamp(24px, 3vw, 36px); }
.mb-d  { margin-bottom: clamp(26px, 3vw, 38px); }
.mb-e  { margin-bottom: clamp(26px, 3vw, 40px); }
.h2-m  { font-size: clamp(22px, 2.6vw, 30px); }
.h2-l  { font-size: clamp(24px, 3.1vw, 36px); }
.on-field { color: var(--on-field); }