/* ============================================================
   redesign.css — Neues anwenderseitiges Design (Re-Skin)
   Wird ALS LETZTES Stylesheet eingebunden und gewinnt daher
   gegenüber main.css / event.css / my_bootstrap.css.
   ============================================================ */

:root {
    /* Flächen / Hintergründe */
    --app-bg:            #D7E3F5;
    --app-bg-2:          #C9D8EF;
    --surface:           #FFFFFF;
    --surface-2:         #EEF3FB;
    --surface-3:         #E5ECF7;
    --border-soft:       #DCE5F1;
    --border-strong:     #C8D4E6;

    /* Text */
    --ink:               #2D2D44;
    --ink-strong:        #262438;
    --ink-muted:         #5E6378;
    --ink-soft:          #8A90A6;
    --ink-light: 		#FFFFFF;

    /* Markenfarben */
    --brand:             #6E73B0;
    --brand-hover:       #5B5F97;
    --brand-soft:        #B9BEE3;
    --brand-deep:        #494064;

    /* Level-Farben (Welt / International / National / Regional) */
    --level-world:       #8E7FC0;
    --level-world-bg:    #EDE9F8;
    --level-intl:        #4A90D9;
    --level-intl-bg:     #E4F0FB;
    --level-nat:         #4FA968;
    --level-nat-bg:      #E5F4EA;
    --level-reg:         #E08A3C;
    --level-reg-bg:      #FBEEDD;

    /* "Work in progress"-Badge (about.php) - Rot-/Pink-Ton aus der Design-Vorlage,
       als eigenes Token-Paar analog zu den Level-Farben oben. */
    --badge-wip:         #B5446E;
    --badge-wip-bg:      #F8E3EA;

    /* Format-Badges (Solo / Pairs / Teams) */
    --format-color:      #E08A3C;

    /* Radius / Schatten / Abstände */
    --radius-sm:  8px;
    --radius:     12px;
    --radius-lg:  16px;
    --shadow-sm:  0 1px 2px rgba(40, 48, 80, .06);
    --shadow:     0 2px 10px rgba(40, 48, 80, .08);
    --shadow-lg:  0 8px 28px rgba(40, 48, 80, .12);
}

/* ---------- Basis ---------- */
html { height: 100%; }
body.redesign {
    background: linear-gradient(180deg, var(--app-bg) 0%, var(--app-bg-2) 100%) fixed;
    color: var(--ink);
    font-family: var(--secondary-font-family), system-ui, "Segoe UI", sans-serif;
    min-height: 100vh;          /* mindestens volle Höhe -> Footer kann nach unten */
    display: flex;
    flex-direction: column;
}
/* Footer immer am unteren Rand (Sticky-Footer): drückt sich per auto-Margin nach unten,
   wenn der Inhalt kürzer als der Viewport ist. */
body.redesign > .app-footer { margin-top: auto; }
body.redesign h1, body.redesign h2, body.redesign h3,
body.redesign h4, body.redesign h5 {
    color: var(--ink-strong);
    font-family: var(--secondary-font-bold), system-ui, "Segoe UI", sans-serif;
    letter-spacing: .2px;
    line-height: 1.2;
}
/* Breiterer Inhaltsrahmen als bei Bootstrap. Dort ist .container ab 1200 px
   Fensterbreite auf 1140 px gedeckelt und erst ab 1400 px auf 1320 px - auf
   einem gewoehnlichen Bildschirm bleibt links und rechts viel ungenutzt, und
   die Veranstaltungskarten werden schmaler als noetig. */
@media (min-width: 1200px) {
    .redesign .container { max-width: 1320px; }
}
@media (min-width: 1500px) {
    .redesign .container { max-width: 1440px; }
}

.redesign a { color: var(--brand-hover); }
.redesign a:hover { color: var(--brand-deep); }
.redesign .text-muted, .redesign .muted { color: var(--ink-muted) !important; }

/* ---------- Buttons ---------- */
.btn-rd {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    border: 1px solid transparent; border-radius: var(--radius-sm);
    padding: .5rem 1rem; font-size: .9rem; font-weight: 600; line-height: 1.1;
    cursor: pointer; text-decoration: none; transition: background .15s, color .15s, border-color .15s;
}
/* Button-Farben unter .redesign scopen, damit sie die generische Linkfarbe
   (.redesign a / a:hover) sicher schlagen, auch wenn der Button ein <a> ist. */
.redesign .btn-rd-primary, .redesign .btn-rd-primary:link, .redesign .btn-rd-primary:visited { background: var(--brand); color: #fff; }
.redesign .btn-rd-primary:hover, .redesign .btn-rd-primary:focus { background: var(--brand-hover); color: #fff; }
/* Icon im Primary-Button immer weiß (rd-icon nutzt currentColor). */
.redesign .btn-rd-primary .rd-icon { color: #fff; }
.redesign .btn-rd-soft, .redesign .btn-rd-soft:link, .redesign .btn-rd-soft:visited { background: var(--brand-soft); color: var(--brand-deep); }
.redesign .btn-rd-soft:hover, .redesign .btn-rd-soft:focus { background: #a7adda; color: var(--brand-deep); }
.redesign .btn-rd-ghost, .redesign .btn-rd-ghost:link, .redesign .btn-rd-ghost:visited { background: transparent; color: var(--brand-hover); border-color: var(--border-strong); }
.redesign .btn-rd-ghost:hover, .redesign .btn-rd-ghost:focus { background: var(--surface-2); color: var(--brand-deep); }
.btn-rd-block { width: 100%; }
/* Details-Button einer externen Veranstaltung: weisser Grund statt der
   Markenfarbe, dazu das Symbol fuer "fuehrt zu einer fremden Seite". Der
   Rahmen ist noetig, damit der Button auf der ohnehin hellen Karte nicht
   verschwindet. */
.redesign .btn-rd-external,
.redesign .btn-rd-external:link,
.redesign .btn-rd-external:visited { background: #fff; color: var(--brand-deep); border-color: var(--border-strong); }
.redesign .btn-rd-external:hover,
.redesign .btn-rd-external:focus { background: var(--surface-2); color: var(--brand-deep); border-color: var(--brand-deep); }
.btn-rd-external img { height: 16px; width: auto; }
/* SSO-Login-Button ("Login Puzzleverein"): dickerer Rahmen + groesseres Logo. */
.btn-rd-sso { border-width: 2px; border-color: var(--border-strong); font-size: 1.05rem; }
.btn-rd-sso img { height: 40px; }
/* Im Login-Dialog steht der Button auf hellblauem Modal-Hintergrund und geht als
   transparenter Ghost-Button unter -> weiss gefuellt mit dunklem, dickem Rahmen
   fuer klaren Kontrast. :link/:visited noetig, damit die Regel die gleich
   spezifischen .btn-rd-ghost:link-Regeln (a-Element) schlaegt. */
.modal .btn-rd-sso,
.modal .btn-rd-sso:link,
.modal .btn-rd-sso:visited { background: #fff; border-width: 3px; border-color: var(--brand-deep); color: var(--brand-deep); }
.modal .btn-rd-sso:hover,
.modal .btn-rd-sso:focus { background: var(--surface-2); border-color: var(--brand-deep); color: var(--brand-deep); }
/* Auch verschachtelte Links erben die Button-Textfarbe. */
.btn-rd a, .btn-rd a:hover, .btn-rd a:focus, .btn-rd a:visited { color: inherit; text-decoration: none; }

/* ============================================================
   Navbar
   ============================================================ */
.app-nav {
    background: rgba(255, 255, 255, .55);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border-soft);
    padding: .35rem 0;
    /* backdrop-filter erzeugt einen Stacking-Context -> Navbar (inkl. Dropdowns)
       muss über dem Seiteninhalt liegen, sonst sind aufgeklappte Menüs nicht klickbar. */
    position: relative;
    z-index: 1030;
}
.app-nav .app-nav__inner { padding-inline: 1.25rem; }
/* Die Marke ist nur noch das Logo; der Name steht in title und alt. Die
   Schriftregeln von frueher sind damit gegenstandslos. */
.app-nav .navbar-brand.app-nav__brand { display: flex; align-items: center; }
.app-nav .app-nav__brand img { height: 34px; width: auto; }
/* In der Markengruppe (Event- und Organisatorenleiste) steht das Logo
   neben dem des Organisators (28px) und einem Trenner (24px) - dort waere
   die volle Hoehe zu dominant. Entspricht dem frueheren 26/22 der SVGs. */
.app-nav__brandgroup .app-nav__brand img { height: 28px; }
.app-nav .app-nav__brand svg { color: var(--brand); }

.app-nav .navbar-nav .nav-link {
    color: var(--ink-muted); font-weight: 600; font-size: .92rem;
    padding: .4rem .85rem; border-radius: var(--radius-sm);
}
.app-nav .navbar-nav .nav-link:hover,
.app-nav .navbar-nav .nav-link.active { color: var(--brand-deep); background: var(--surface-2); }

.app-nav__right { gap: .25rem; }
.app-nav__right .nav-link { display: inline-flex; align-items: center; gap: .35rem; }
.app-nav .avatar-chip {
    display: inline-flex; align-items: center; gap: .5rem;
}
.app-nav .avatar-circle {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--brand-soft); color: var(--brand-deep);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 700;
}
.app-nav .language_image { height: 16px; width: auto; border-radius: 2px; }
.app-nav .dropdown-menu { border: 1px solid var(--border-soft); box-shadow: var(--shadow); border-radius: var(--radius-sm); }

/* ============================================================
   Hero / Seitentitel
   ============================================================ */
.hero {
    text-align: center; padding: 3.5rem 1rem 3rem;
}
.hero h1 { font-size: 2.6rem; margin-bottom: .75rem; }
.hero p { color: var(--ink-muted); max-width: 640px; margin: 0 auto; font-size: 1.05rem; }

.hero-bar {
    display: flex; justify-content: space-between; align-items: center;
    background: linear-gradient(90deg, var(--brand-soft) 0%, var(--brand-deep) 100%);
    color: #fff; padding: .9rem 1.5rem;
}
.hero-bar a { color: #fff; font-weight: 600; text-decoration: none; }
.hero-bar a:hover { color: #fff; opacity: .85; }

.page-title { padding: 2rem 0 1.25rem; }
.page-title h1 { font-size: 2rem; margin: 0; }

/* ============================================================
   Filter-Leiste
   ============================================================ */
.filter-bar {
    background: var(--surface-2); border: 1px solid var(--border-soft);
    border-radius: var(--radius); padding: 1rem; margin-bottom: 1.5rem;
}
.filter-bar .form-control,
.filter-bar .form-select {
    background: var(--surface); border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm); font-size: .9rem;
}
.filter-search {
    display: flex; align-items: center; gap: .5rem;
    background: var(--surface); border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm); padding: .55rem .85rem; margin-bottom: .85rem;
}
.filter-search svg { color: var(--ink-soft); flex: 0 0 auto; }
.filter-search input { border: 0; outline: 0; width: 100%; background: transparent; font-size: .95rem; }
.filter-chips { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.filter-chips .chip-label { color: var(--ink-muted); font-size: .82rem; font-weight: 600; margin-right: .25rem; }
.chip {
    display: inline-flex; align-items: center; gap: .35rem;
    background: var(--surface); border: 1px solid var(--border-strong);
    color: var(--ink-muted); border-radius: 999px; padding: .3rem .7rem;
    font-size: .82rem; font-weight: 600; cursor: pointer; user-select: none;
    text-decoration: none;
}
.chip:hover { border-color: var(--brand-soft); color: var(--brand-deep); text-decoration: none; }
.chip.active:hover { color: #fff; }
.chip.active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ============================================================
   Event-Card
   ============================================================ */
.event-card {
    background: var(--surface); border: 1px solid var(--border-soft);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    padding: 1rem 1.15rem; height: 100%;
    display: flex; flex-direction: column; gap: .55rem;
    transition: box-shadow .15s, transform .15s;
}
.event-card:hover { box-shadow: var(--shadow); }
.event-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
/* Mindesthoehe = zwei Zeilen (line-height 1.25). Ohne sie sind Karten mit
   einzeiligem Titel niedriger als ihre Nachbarn, und die Eckdaten darunter
   beginnen auf unterschiedlicher Hoehe. */
.event-card__title { font-size: 1rem; font-weight: 700; color: var(--ink-strong); margin: 0; line-height: 1.25; min-height: 2.5em; flex: 1 1 auto; min-width: 0; }
/* Eventbild links neben dem Titel. Ohne Hintergrund - die Logos sind
   transparent und sollen es auch bleiben. */
.event-card__logo {
    width: 44px; height: 44px; flex: 0 0 44px;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.event-card__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Eckdaten links, Format-Abzeichen rechts daneben. */
.event-card__body { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
/* min-width:0 laesst lange Ortsnamen umbrechen, statt die Spalte aufzublaehen.
   Mindesthoehe = drei Zeilen a 1rem plus zwei Abstaende: Nicht jede
   Veranstaltung hat Ort, Zeitraum UND Verein - ohne die Vorgabe rutschen die
   Schaltflaechen von Karte zu Karte auf andere Hoehen. */
.event-card__meta {
    display: flex; flex-direction: column; gap: .25rem;
    flex: 1 1 auto; min-width: 0; min-height: 3.5rem;
}
.event-card__meta .meta-row { display: flex; align-items: center; gap: .4rem; color: var(--ink-muted); font-size: .82rem; }
.event-card__meta .meta-row svg { color: var(--ink-soft); flex: 0 0 auto; }
/* flex:0 0 auto - die Abzeichen behalten ihre Breite, schmaler wird bei Bedarf
   die Spalte mit den Eckdaten. */
.event-card__formats { display: flex; flex-direction: column; gap: .15rem; align-items: flex-end; flex: 0 0 auto; }
.format-badge {
    display: inline-flex; align-items: center; gap: .25rem;
    color: var(--format-color); font-size: .72rem; font-weight: 700;
}
/* Fuss der Karte: links die Schaltflaechen, rechts das Level-Abzeichen.
   flex-wrap ist noetig, nicht Kosmetik: Bei schmalen Karten (das Raster laesst
   sie bis auf rund 300 px schrumpfen) passen "Details", "Registrieren" und das
   Abzeichen nicht mehr nebeneinander. Ohne Umbruch wachsen sie aus der Karte
   heraus, statt in die naechste Zeile zu rutschen. */
.event-card__foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding-top: .35rem; }
.event-card__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
/* Rutscht das Abzeichen in die zweite Zeile, wuerde space-between es dort nach
   links setzen (allein auf der Zeile gibt es nichts zu verteilen). Mit
   margin-left:auto bleibt es in beiden Faellen rechts. */
.event-card__foot > .level-badge { margin-left: auto; }

/* Level-Badge */
.level-badge {
    display: inline-flex; align-items: center; gap: .3rem;
    border-radius: 999px; padding: .25rem .7rem; font-size: .74rem; font-weight: 700;
    white-space: nowrap;   /* lieber umbrechen lassen als "Internatio-nal" trennen */
}
.level-badge svg { width: 14px; height: 14px; }
.level-badge.level-world { background: var(--level-world-bg); color: var(--level-world); }
.level-badge.level-intl  { background: var(--level-intl-bg);  color: var(--level-intl); }
.level-badge.level-nat   { background: var(--level-nat-bg);   color: var(--level-nat); }
.level-badge.level-reg   { background: var(--level-reg-bg);   color: var(--level-reg); }

/* Level-Gruppe (Startseite) */
.level-group {
    display: grid; grid-template-columns: 120px 1fr; gap: 1rem;
    background: var(--surface-2); border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg); padding: 1.1rem; margin-bottom: 1.1rem;
}
.level-group.level-world { background: var(--level-world-bg); }
.level-group.level-intl  { background: var(--level-intl-bg); }
.level-group.level-nat   { background: var(--level-nat-bg); }
.level-group.level-reg   { background: var(--level-reg-bg); }
.level-group__label {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    text-align: center; gap: .35rem; padding-top: .5rem;
}
.level-group__label .level-icon { font-size: 1.6rem; }
.level-group__label .level-name { font-weight: 700; color: var(--ink-strong); font-size: .9rem; }
.level-group__label .level-count { color: var(--ink-muted); font-size: .78rem; }
.level-group__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 1rem; align-content: start; }

/* Monats-Gruppe (Timeline) */
.month-group { display: grid; grid-template-columns: 90px 1fr; gap: 1rem; margin-bottom: 1.25rem; }
.month-group__label {
    writing-mode: vertical-rl; transform: rotate(180deg);
    color: var(--ink-soft); font-size: .78rem; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; border-left: 2px solid var(--border-strong); padding-left: .5rem;
}
.month-group__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 1rem; }

/* ============================================================
   Profil / Listen-Cards
   ============================================================ */
.panel {
    background: var(--surface); border: 1px solid var(--border-soft);
    border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.25rem;
}
.panel + .panel { margin-top: 1.25rem; }
.panel__title { font-size: 1.05rem; font-weight: 700; color: var(--ink-strong); margin: 0; }
.panel__subtitle { color: var(--ink-muted); font-size: .85rem; margin: 0 0 1rem; }

.profile-card { text-align: center; }
.profile-card .avatar-lg {
    width: 84px; height: 84px; border-radius: 50%; margin: 0 auto .75rem;
    background: var(--brand-soft); color: var(--brand-deep);
    display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 700;
}
.profile-card .p-name { font-size: 1.2rem; font-weight: 700; color: var(--ink-strong); }
.profile-card .p-email { color: var(--ink-muted); font-size: .88rem; margin-bottom: .85rem; }
.profile-card .p-meta { text-align: left; display: flex; flex-direction: column; gap: .35rem; color: var(--ink-muted); font-size: .85rem; }
.profile-card .p-meta .meta-row { display: flex; align-items: center; gap: .45rem; }
.profile-card .p-stats { display: flex; justify-content: space-around; border-top: 1px solid var(--border-soft); margin-top: 1rem; padding-top: 1rem; }
.profile-card .p-stat .num { font-size: 1.3rem; font-weight: 700; color: var(--ink-strong); }
.profile-card .p-stat .lbl { font-size: .78rem; color: var(--ink-muted); }

.list-card {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    background: var(--surface); border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm); padding: .9rem 1.1rem; margin-bottom: .75rem;
}
.list-card__title { font-weight: 700; color: var(--ink-strong); }
.list-card__meta { color: var(--ink-muted); font-size: .82rem; display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.pill { display: inline-block; border: 1px solid var(--border-strong); border-radius: 999px; padding: .12rem .6rem; font-size: .74rem; color: var(--ink-muted); }
.list-card__right { text-align: right; color: var(--ink-strong); font-weight: 700; white-space: nowrap; }

/* ============================================================
   Auth-Card
   ============================================================ */
.auth-wrap { min-height: 60vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
.auth-card {
    width: 100%; max-width: 380px; background: var(--surface);
    border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
    box-shadow: var(--shadow); padding: 2rem; text-align: center;
}
.auth-card .auth-icon { color: var(--brand); margin-bottom: .5rem; }
/* Dasselbe Markenzeichen wie in der Menueleiste. Die Farbe daneben gilt
   nur noch fuer das SVG, falls hier je wieder eines steht - das Logo
   bringt seine eigenen Farben mit. */
.auth-icon img { height: 96px; width: auto; }
.auth-card h1 { font-size: 1.4rem; margin: .25rem 0 .25rem; }
.auth-card .auth-sub { color: var(--ink-muted); font-size: .9rem; margin-bottom: 1.25rem; }
.auth-card label { display: block; text-align: left; font-size: .8rem; font-weight: 700; color: var(--ink-muted); margin: .65rem 0 .25rem; }
.auth-card .form-control {
    background: var(--surface-2); border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm); padding: .6rem .8rem;
}
.auth-card.auth-card-wide { max-width: 720px; text-align: left; }
.auth-card.auth-card-wide label { margin-top: .35rem; }
.auth-card .auth-foot { margin-top: 1rem; font-size: .85rem; color: var(--ink-muted); }
.auth-note { background: var(--surface-2); border-radius: var(--radius-sm); padding: .55rem; font-size: .78rem; color: var(--ink-soft); margin-top: .9rem; }

/* ============================================================
   Footer
   ============================================================ */
.app-footer {
    background: rgba(255, 255, 255, .45); border-top: 1px solid var(--border-soft);
    margin-top: 3rem; padding: 1.5rem 0;
}
.app-footer__inner {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding-inline: 1.5rem; flex-wrap: wrap;
}
.app-footer__brand { display: flex; align-items: center; gap: .5rem; color: var(--ink-muted); font-weight: 700; }
.app-footer__brand img { height: 26px; }
.app-footer__links { display: flex; gap: 1.25rem; }
.app-footer__links a { color: var(--ink-muted); font-size: .85rem; text-decoration: none; }
.app-footer__links a:hover { color: var(--brand-deep); }
.app-footer__copy { color: var(--ink-soft); font-size: .82rem; }
.app-footer__social { display: flex; gap: .5rem; align-items: center; }

/* ============================================================
   Event-Detail
   ============================================================ */
.event-hero { padding: 2.25rem 0 1.25rem; text-align: center; }
.event-hero h1 { font-size: 2rem; margin-bottom: .75rem; }
.event-hero__meta {
    display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; justify-content: center; align-items: center;
    color: var(--ink-muted); font-size: .9rem;
}
.event-hero__meta span { display: inline-flex; align-items: center; gap: .35rem; }
.event-hero__meta svg { color: var(--ink-soft); }

/* Single-Scroll Event-Detail (Redesign nach Screenshot) */
.event-detail { padding-top: 1.5rem; }
.back-link { display: inline-flex; align-items: center; gap: .35rem; color: var(--ink-muted); font-weight: 600; font-size: .85rem; text-decoration: none; margin-bottom: 1rem; }
.back-link:hover { color: var(--brand-deep); }
.event-detail__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.event-detail__header h1 { font-size: 1.9rem; margin: 0 0 .6rem; }
.event-detail__header .event-hero__meta { justify-content: flex-start; }
.event-detail__badges { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
/* Eventbild links im Kopf. Der Textblock daneben muss wachsen, sonst schiebt
   das space-between des Kopfes eine Luecke zwischen Bild und Titel. */
.event-detail__logo {
    width: 72px; height: 72px; flex: 0 0 72px;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.event-detail__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.event-detail__header > div:not(.event-detail__logo):not(.event-detail__trophy) { flex: 1 1 auto; min-width: 0; }
.event-detail__trophy { color: #E0A93C; flex: 0 0 auto; }
.event-detail__body { margin-top: 1.5rem; }
.event-section { margin-bottom: 1.75rem; }
.event-section__title { font-size: 1.15rem; font-weight: 700; color: var(--ink-strong); margin-bottom: .85rem; }
.event-section__text { color: var(--ink-muted); line-height: 1.6; }

/* Competition-Cards */
.comp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 1rem; grid-auto-rows: 1fr; }
.comp-card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1rem; display: flex; flex-direction: column; gap: .6rem; }
.comp-card__action { margin-top: auto; }
.comp-card__head { display: flex; align-items: flex-start; gap: .6rem; }
.comp-card__icon { width: 34px; height: 34px; border-radius: 8px; background: var(--surface-2); color: var(--brand); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.comp-card__title-wrap { flex: 1 1 auto; }
.comp-card__name { font-weight: 700; color: var(--ink-strong); font-size: .95rem; }
.comp-card__mode { color: var(--ink-soft); font-size: .78rem; }
.comp-card__price { font-weight: 700; color: var(--ink-strong); white-space: nowrap; }
.comp-card__meta { color: var(--ink-muted); font-size: .82rem; display: flex; gap: 1rem; }
.comp-card__meta span { display: inline-flex; align-items: center; gap: .3rem; }
/* Teilnahmebedingungen: laenger als die uebrigen Angaben, deshalb
   umbrechend statt in einer Zeile. */
.comp-card__limits { display: block; line-height: 1.35; }

/* Merkposten (Save the date): Die Karte ist absichtlich leer. Das Symbol sitzt
   im Knopf - er traegt btn-rd-external und wird davon auch gefaerbt und
   bemasst (.btn-rd-external img). Die Karte selbst bleibt leicht gedaempft,
   damit sie in der Liste nicht wie die wichtigste aussieht. */
.save-the-date-card { opacity: .92; }
/* Kopf des Merkposten-Dialogs: kleines Logo, der Name der Veranstaltung
   daneben. Das Bild ist Beiwerk - ohne feste Hoehe fuellte es den halben
   Dialog, weil die hinterlegte Datei beliebig gross sein kann. */
.save-the-date-head { display: flex; align-items: center; gap: .75rem; }
.save-the-date-logo { height: 48px; width: 48px; object-fit: contain; flex: 0 0 auto; border-radius: .3rem; }
.save-the-date-name { margin: 0; font-weight: 600; }

/* Event-Info Sidebar */
.event-info__table { width: 100%; }
.event-info__table td { padding: .4rem 0; font-size: .85rem; vertical-align: top; border-bottom: 1px solid var(--border-soft); }
.event-info__table tr:last-child td { border-bottom: 0; }
.event-info__table td:first-child { color: var(--ink-muted); }
.event-info__table td:last-child { text-align: right; color: var(--ink-strong); font-weight: 600; }
.event-info__cats { margin-top: 1rem; border-top: 1px solid var(--border-soft); padding-top: 1rem; }

/* Die Angaben stehen in event-info__table. Im Dialog darf sie enger sein
   als im Seitenkasten: Dort traegt sie eine Ueberschrift und viel Luft.

   Und die Werte stehen linksbuendig statt rechts: Im schmalen Seitenkasten
   bindet der rechte Rand die Spalte zusammen, im breiteren Dialog reisst er
   Beschriftung und Wert auseinander. Die feste Breite der ersten Spalte haelt
   die Werte dann untereinander. */
#saveTheDateModal .event-info__table td { padding: .35rem 0; }
#saveTheDateModal .event-info__table td:first-child { width: 11rem; }
#saveTheDateModal .event-info__table td:last-child { text-align: left; }

@media (min-width: 992px) { .event-info { position: sticky; top: 1rem; } }

/* Ergebnis-Tabelle (Redesign nach Screenshot) */
.results-filter .chip { text-decoration: none; }
.results-table-wrap { padding: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.results-table { width: 100%; border-collapse: collapse; }
.results-table td.athlete { color: var(--ink-strong); }
.results-table td.athlete b { font-weight: 600; }
.results-table .team_participants { display: block; font-size: .8rem; color: var(--ink-muted); font-weight: 400; margin-top: .15rem; }
.results-table td.athlete { word-break: break-word; }
.results-table .country-cell { width: 1%; white-space: nowrap; }
.results-table .result-flag { width: 26px; height: auto; border-radius: 3px; vertical-align: middle; }
.results-table thead th {
    text-align: left; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
    color: var(--ink-soft); font-weight: 700; padding: .85rem 1.1rem; background: var(--surface-2);
}
.results-table th.ta-right, .results-table td.ta-right { text-align: right; }
.results-table tbody td { padding: .8rem 1.1rem; border-top: 1px solid var(--border-soft); color: var(--ink-strong); }
.results-table tbody tr:hover { background: var(--surface-2); }
.results-table .rank-cell { width: 60px; }
.results-table .time-cell { font-weight: 700; font-variant-numeric: tabular-nums; }
.results-table .rank-num { color: var(--ink-muted); font-weight: 700; padding-left: .35rem; }
.results-table .medal { display: inline-flex; }
.results-table .medal.gold   { color: #E0A93C; }
.results-table .medal.silver { color: #9AA3B2; }
.results-table .medal.bronze { color: #C07B43; }
.results-table__foot { text-align: right; color: var(--ink-soft); font-size: .8rem; padding: .65rem 1.1rem; }
@media (max-width: 575px) {
    .results-table thead th { padding: .6rem .55rem; font-size: .66rem; }
    .results-table tbody td { padding: .6rem .55rem; font-size: .85rem; }
    .results-table .rank-cell { width: 40px; }
}

/* Tab-Pills im neuen Stil */
.redesign .nav-pills { gap: .35rem; border-bottom: 0; }
.redesign .nav-pills .nav-link {
    color: var(--ink-muted); background: transparent; border-radius: 999px;
    font-weight: 600; font-size: .9rem; padding: .45rem 1rem;
}
.redesign .nav-pills .nav-link:hover { background: var(--surface-2); color: var(--brand-deep); }
.redesign .nav-pills .nav-link.active { background: var(--brand); color: #fff; }

/* Detail-Panels (bestehende display_*-Ausgaben einfassen) */
.redesign .event_frame {
    background: var(--surface); border: 1px solid var(--border-soft);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    padding: 1.25rem; margin: 0 0 1.25rem;
}
.redesign .event-block-titel { color: var(--ink-strong); font-weight: 700; margin-bottom: .75rem; }
.redesign .event-block-titel h2 { font-size: 1.15rem; margin: 0; }
.redesign .event_detail_table { width: 100%; border-collapse: collapse; }
.redesign .event_detail_table td { padding: .45rem .5rem; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
.redesign .event_detail_table tr:last-child td { border-bottom: 0; }
.redesign .event_detail_table td:first-child { color: var(--ink-muted); font-weight: 600; white-space: nowrap; width: 1%; }
/* Die Tabelle des Veranstaltungsortes hat nur eine Spalte - dort ist jede Zelle
   die erste, und das nowrap von oben laesst lange Namen aus der Kachel laufen. */
.redesign .event_detail_table.event-venue-table td:first-child { white-space: normal; width: auto; }

/* ============================================================
   Organizers / About
   ============================================================ */
.org-section { margin-bottom: 2.25rem; }
.org-section__title { font-size: 1.3rem; font-weight: 700; color: var(--ink-strong); margin: 0 0 .1rem; }
.org-section__sub { color: var(--ink-muted); font-size: .92rem; margin: 0 0 1.1rem; }

.org-grid { display: grid; gap: 1.1rem; grid-auto-rows: 1fr; }
.org-grid--featured,
.org-grid--other { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }

.org-card {
    position: relative;
    background: var(--surface); border: 1px solid var(--border-soft);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    padding: 1.25rem; display: flex; flex-direction: column; gap: .7rem;
}
.org-card__top { display: flex; align-items: center; gap: .85rem; }
.org-card__logo {
    width: 52px; height: 52px; flex: 0 0 52px; border-radius: 12px; background: var(--surface-2);
    display: flex; align-items: center; justify-content: center; color: var(--brand); overflow: hidden;
}
.org-card__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.org-logo__initials { font-weight: 700; font-size: .82rem; color: var(--brand); letter-spacing: .02em; }
.org-card__head { min-width: 0; }
.org-card__name { font-weight: 700; color: var(--ink-strong); line-height: 1.2; }
.org-card__region { color: var(--ink-muted); font-size: .85rem; margin-top: .1rem; display: inline-flex; align-items: center; gap: .35rem; }
.org-card__desc { color: var(--ink-muted); font-size: .88rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.org-flag { width: 18px; height: auto; border-radius: 2px; vertical-align: middle; }
.org-card__link { display: flex; flex-direction: column; gap: .7rem; flex: 1 1 auto; color: inherit; text-decoration: none; }
.org-card__link:hover { text-decoration: none; }
.org-card__link:hover .org-card__name { color: var(--brand-hover); }

/* Organizer-Home Hero (Logo ueber Name) */
.org-hero { padding-top: 2.5rem; }
.org-hero__logo { width: 72px; height: 72px; margin: 0 auto .9rem; border-radius: 16px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.org-hero__logo--box { background: var(--surface-2); }
.org-hero__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.org-hero__logo .org-logo__initials { font-size: 1.3rem; }
.org-hero__meta { color: var(--ink-muted); font-size: .95rem; margin: .15rem 0 .6rem; }
.org-hero__meta .org-flag { margin-right: .15rem; }
.org-hero__dot { color: var(--ink-soft); margin: 0 .15rem; }
.org-hero__links { display: flex; justify-content: center; margin-top: 1rem; }

/* Organizer-Navbar: Haupt-Brand + Trenner + Organizer-Brand */
.app-nav__brandgroup { display: flex; align-items: center; gap: .55rem; }
.app-nav__sep { width: 1px; height: 24px; background: var(--border-strong); display: inline-block; }
.app-nav__orgbrand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--ink-strong); }
.org-nav-logo { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 8px; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; font-size: .6rem; font-weight: 700; color: var(--brand); overflow: hidden; }
.org-nav-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Auf kleinen Bildschirmen nur die Logos zeigen, damit die Brand-Gruppe
   (Haupt-Brand + Organisator) nicht breiter wird als die Navbar. Der
   Haupt-Brand traegt ohnehin keinen Text mehr, nur noch der Organisator. */
@media (max-width: 767.98px) {
    .app-nav__orgbrand > span:not(.org-nav-logo) { display: none; }
}

.association-links { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.event-info__orglinks { margin-top: .35rem; }
#wettbewerbe { scroll-margin-top: 90px; }
.association-links a { line-height: 0; }
/* img/social/*.png sind weiße Glyphen -> per Filter dunkel/gedämpft, damit sie
   auf hellen Flächen (Cards, Tabelle, Footer) sichtbar sind. */
.socialbtn-img { width: 22px; height: 22px; object-fit: contain; vertical-align: middle;
    filter: brightness(0); opacity: .55; transition: opacity .15s; }
.socialbtn-img:hover { opacity: .85; }
/* Links unten gleichmäßig andocken (über alle Cards auf gleicher Höhe) */
.org-card__links { display: flex; flex-wrap: wrap; gap: .5rem; width: 100%; margin-top: auto; padding-top: .85rem; border-top: 1px solid var(--border-soft); }

.about-content { color: var(--ink); line-height: 1.7; }
.about-content h2, .about-content h3 { margin-top: 1.25rem; }

/* ============================================================
   Über uns (about.php)
   Landing-page-artige Sektionen nutzen bewusst groessere Schrift-
   graduierungen als der Rest der App (eigene about-*-Klassen, .hero/
   .panel selbst bleiben unangetastet) - der Ton dieser Seite ist naeher
   an einer Marketing-Seite als an den Dashboard-Seiten der App.
   Die "Baender" (how/yourpage/builders/faq) sind schlicht .panel wie
   ueberall sonst in der App, keine eigene Kartenoptik.
   ============================================================ */
#how, #features, #yourpage, #community, #roadmap { scroll-margin-top: 90px; }

/* --about-nav-w treibt sowohl die Breite der fixierten Sidebar als auch
   den reservierten Platz von .about-page - beide bleiben so immer exakt
   synchron, statt wie zuvor mit von Hand geschaetzten Padding-Werten. */
:root { --about-nav-w: 230px; }
@media (max-width: 1199.98px) { :root { --about-nav-w: 190px; } }
@media (max-width: 991.98px)  { :root { --about-nav-w: 64px; } }
@media (max-width: 575.98px)  { :root { --about-nav-w: 48px; } }

.about-page { padding-top: 1.5rem; padding-bottom: 3rem; margin-left: var(--about-nav-w); }

/* Sidebar-"Leitfaden": fixierte, vertikal zentrierte Punkt-Navigation am
   linken Rand, bleibt beim Scrollen stehen (Aktiv-Status kommt per JS
   ueber Scrollspy in about.php). Verschwindet nie komplett - unterhalb
   von lg klappt sie zum reinen Punkt ein, die Beschriftung erscheint
   dann als Tooltip bei Hover/Fokus/aktivem Zustand. */
.about-nav {
    position: fixed; top: 50%; left: 0; transform: translateY(-50%);
    width: var(--about-nav-w); padding: 0 22px; z-index: 20;
}
.about-nav nav { display: flex; flex-direction: column; gap: 18px; position: relative; }
/* Feste Punkt-Spalte (16px) statt Flex-Gap, damit Schiene/Fortschritt
   (siehe unten) unabhaengig von der Punktgroesse exakt mittig sitzen. */
.about-nav .about-nav-item {
    display: grid; grid-template-columns: 16px 1fr; align-items: center; column-gap: 12px;
    min-height: 28px; position: relative;
    color: var(--ink-soft); font-size: .88rem; font-weight: 600;
    text-decoration: none;
    transition: color .25s ease, transform .25s ease;
}
.about-nav .about-nav-item:hover { color: var(--brand-deep); }
.about-nav .about-nav-item:hover .nav-dot { background: var(--brand-deep); }
.about-nav .about-nav-item.active { color: var(--ink-strong); transform: translateX(3px); }
.about-nav .about-nav-item.active .nav-dot {
    width: 10px; height: 10px; background: var(--brand-deep);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand-deep) 10%, transparent),
                0 0 0 9px color-mix(in srgb, var(--brand-deep) 4%, transparent);
}
.nav-dot {
    justify-self: center; width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: var(--ink-soft);
    transition: width .25s ease, height .25s ease, background .25s ease, box-shadow .25s ease;
}
/* Durchgehende Schiene von der Mitte des ersten bis zur Mitte des letzten
   Punkts (14px = halbe min-height der Items), plus eine Fortschritts-
   Fuellung, die about.php per Scrollspy-JS mit der Scrollposition mitwachsen
   laesst - wie im Referenz-Mockup, nur mit unseren Farb-Tokens. */
.about-nav-rail {
    position: absolute; left: 8px; top: 14px; bottom: 14px; width: 1px;
    background: linear-gradient(to bottom, transparent, var(--border-strong) 12%, var(--border-strong) 88%, transparent);
}
.about-nav-progress {
    position: absolute; left: 8px; top: 14px; width: 1px; height: 0;
    background: var(--brand-deep); opacity: .6; transition: height .16s linear;
}

@media (max-width: 991.98px) {
    .about-nav .nav-text {
        position: absolute; left: 26px; top: 50%; transform: translateY(-50%);
        padding: .35rem .65rem; border-radius: var(--radius-sm);
        background: var(--surface); box-shadow: var(--shadow-sm);
        white-space: nowrap; opacity: 0; pointer-events: none;
        transition: opacity .2s ease;
    }
    .about-nav .about-nav-item:hover .nav-text,
    .about-nav .about-nav-item:focus-visible .nav-text { opacity: 1; }
}

/* Screenshots wie im Entwurf in einer .panel-Karte rahmen. Jeder Screenshot-
   Slot bekommt das Seitenverhaeltnis aus der Vorlage, damit die spaeter
   nachgelieferten echten Bilder nicht verzerrt/zufaellig wirken -
   object-fit: cover schneidet dafuer bei Bedarf zu. */
.about-figure.panel { padding: .6rem; }
/* object-position:top statt center: die Screenshots sind UI-Ausschnitte, bei
   denen der wichtigste Inhalt (Titel/erste Zeilen) oben sitzt - beim Zuschnitt
   auf das jeweilige Seitenverhaeltnis soll eher unten als oben etwas wegfallen. */
.about-figure img { width: 100%; height: auto; border-radius: var(--radius); display: block; object-fit: cover; object-position: top; }
.about-figure img.ratio-16-9  { aspect-ratio: 16 / 9; }
.about-figure img.ratio-16-10 { aspect-ratio: 16 / 10; }
.about-figure img.ratio-4-5   { aspect-ratio: 4 / 5; }
.about-figure img.ratio-4-3   { aspect-ratio: 4 / 3; }
/* Bild-Rahmen, die selbst innerhalb eines .panel-Bands liegen (z. B. #yourpage),
   sonst waere weisse Karte in weisser Karte kaum zu unterscheiden. */
.about-section--split.panel > .about-figure { background: var(--surface-2); }

/* .hero (Basis-Klasse) bringt 1rem seitliches Padding mit - die
   Trust-Strip-Sektion darunter hat keins, dadurch wirkte das Hero-Bild
   schmaler/eingerueckt statt exakt containerbreit. */
.about-hero { padding: 1rem 0 2.5rem; }
.about-hero__badge {
    display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--brand); margin-bottom: .75rem;
}
.about-hero h1 { font-size: 3rem; line-height: 1.08; letter-spacing: -.02em; max-width: 780px; margin: 0 auto; }
.about-hero p { font-size: 1.2rem; max-width: 640px; }
.about-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin: 1.5rem 0 2.5rem; }
.about-hero__actions .btn-rd { padding: .85rem 1.6rem; font-size: 1rem; }
.about-hero__art { margin-top: .5rem; }

.about-trust-strip { display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; gap: 1.25rem; margin-bottom: 3.5rem; }
/* ".panel + .panel" (fuer gestapelte Admin-Panels gedacht) greift auch
   zwischen Grid-Geschwistern und schiebt dort jede Karte ausser der
   ersten nach unten - Reihen aus mehreren Panels muessen das zuruecksetzen. */
.about-trust-strip > .panel,
.about-community__cards > .panel,
.about-community__figures > .panel { margin-top: 0; }
@media (max-width: 991.98px) { .about-trust-strip { grid-template-columns: 1fr; } }

.about-card.panel h3 { font-size: 1.05rem; font-weight: 700; color: var(--ink-strong); margin-bottom: .5rem; }
.about-card.panel p { margin: 0; color: var(--ink-muted); font-size: .93rem; line-height: 1.55; }

.about-section { padding: 3.5rem 0; }
.about-section.panel { padding: 3rem 2rem; margin: 2.5rem 0; }
.about-section--split {
    display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center;
}
.about-section__label {
    display: block; font-size: .78rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--brand); margin-bottom: .6rem;
}
.about-section h2 { font-size: 2.3rem; line-height: 1.15; letter-spacing: -.01em; margin-bottom: 1rem; max-width: 620px; }
.about-section > p { color: var(--ink-muted); font-size: 1.1rem; line-height: 1.6; max-width: 720px; }

/* Eyebrow-Zeile mit zusaetzlichem Status-Chip (z. B. "how"-Sektion).
   .about-section__label bleibt fuer alle anderen Sektionen unveraendert
   block/eigene margin - nur innerhalb dieses Wrappers wird sie Teil einer
   Flex-Zeile und verliert dafuer ihren eigenen unteren Abstand. */
.about-section__eyebrow { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .6rem; }
/* Beide Elemente bekommen dieselbe feste Boxhoehe (statt sich per align-items:center
   aus unterschiedlichen, teils ungeraden Zeilenhoehen zu ergeben) - eine reine
   Padding-/line-height-Loesung ergab bei Nicht-100%/200%-Browserzoom einen
   Rundungsfehler von 1px, weil der Center-Punkt zweier ungleich hoher Boxen
   je nach Zoomfaktor unterschiedlich gerundet wird. Bei gleicher fixer Hoehe
   gibt es nichts mehr zu runden, das Ergebnis ist zoomstufen-unabhaengig exakt. */
.about-section__eyebrow .about-section__label {
    margin-bottom: 0; height: 28px; display: inline-flex; align-items: center;
}
/* Gleiche font-size wie das Label (nicht nur gleiche Boxhoehe) ist bewusst so
   gewaehlt: unterschiedliche Schriftgroessen runden bei manchen Browserzoom-
   stufen (100%/125%/150%) auf unterschiedliche Geraete-Subpixel, was zu einem
   sichtbaren ~1px-Versatz fuehrt, der bei 200% durch den doppelten Subpixel-
   Raster wieder verschwindet. Gleiche font-size beseitigt diese Differenz. */
.about-badge-wip {
    height: 28px; display: inline-flex; align-items: center;
    background: var(--badge-wip-bg); color: var(--badge-wip);
    border-radius: 999px; padding: 0 .9rem; font-size: .78rem; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase;
}

.about-how__layout { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3rem; align-items: stretch; margin-top: 2.5rem; }
/* Bild soll exakt so hoch werden wie die 5-Punkte-Liste daneben - dafuer
   stretcht das Grid die Karte auf Zeilenhoehe und das Bild folgt zu 100%,
   statt sein eigenes festes Seitenverhaeltnis durchzusetzen. */
.about-how__art img { height: 100%; aspect-ratio: auto; }
.about-steps__item { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--border-soft); }
.about-steps__item--last { border-bottom: 0; }
.about-steps__num {
    width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem;
}
.about-steps__item--last .about-steps__num { background: var(--brand-deep); }
.about-steps__item h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: .3rem; }
.about-steps__item p { margin: 0; color: var(--ink-muted); font-size: .93rem; line-height: 1.55; }

/* Features-Slider: Tab-Pills waehlen eine Slide direkt an, die Punkte
   darunter spiegeln denselben Zustand (bewusst analog zur "morphenden"
   Punkt-Optik der Sidebar-Navigation). Die Slides selbst liegen als
   Flex-"Filmstreifen" (.about-features-track) nebeneinander und werden
   per transform: translateX() verschoben - JS in about.php steuert
   Autoplay, Pause-bei-Hover/Fokus und Klick-Navigation. */
.about-features-slider { margin-top: 2.5rem; }
.about-features-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.about-features-tab {
    font-family: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
    border-radius: 999px; padding: .55rem 1.1rem; transition: all .2s ease;
    border: 1px solid var(--border-strong); background: transparent; color: var(--ink-muted);
}
.about-features-tab:hover { border-color: var(--brand); color: var(--brand-deep); }
.about-features-tab.active { border-color: var(--brand-deep); background: var(--brand-deep); color: var(--ink-light); }

/* Feste Rahmenhoehe ueber aspect-ratio auf der Bildbox statt ueber eine
   height:100%-Vererbungskette (Viewport -> Track -> Slide -> Inner -> Figure)
   - genau diese Kette war zuvor an einer Stelle unterbrochen (der Track hatte
   selbst keine definierte Hoehe), wodurch die Prozent-Hoehen darunter ins
   Leere liefen: Bilder wurden in Originalgroesse gerendert und vom
   ueberfluessigen overflow:hidden hart unten abgeschnitten, statt sauber
   eingepasst zu werden - und weil die Bildbox dadurch de facto keine
   definierte Hoehe hatte, konnte .about-features-slide__inner Text und Bild
   auch nicht sauber zueinander zentrieren. aspect-ratio ist robuster: die Box
   berechnet ihre Hoehe direkt aus der eigenen (durch das Grid ohnehin festen)
   Breite, unabhaengig von Elternelementen - jede Slide bekommt dadurch
   automatisch dieselbe Rahmenhoehe, ganz ohne JS oder Vererbungskette. */
.about-features-viewport { overflow: hidden; border-radius: var(--radius-lg); }
.about-features-track { display: flex; align-items: flex-start; width: 500%; transition: transform .6s cubic-bezier(.4, 0, .2, 1); }
.about-features-slide { width: 20%; flex-shrink: 0; padding: 0 .25rem; }
.about-features-slide__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.about-features-slide h3 { font-size: 1.55rem; line-height: 1.25; letter-spacing: -.01em; margin-bottom: .7rem; }
.about-features-slide p { margin: 0; color: var(--ink-muted); font-size: 1.02rem; line-height: 1.6; }

/* Wiederverwendbare "ganz einpassen, nichts beschneiden"-Bildbox - Features-
   Slider und Community-Bildpaar nutzen dieselbe Technik und denselben
   Rahmen-Zuschnitt (8:5), damit sich beide Bereiche einheitlich anfuehlen.
   Bei Bildern, deren eigenes Seitenverhaeltnis stark davon abweicht, bleibt
   zwangslaeufig etwas Luft links/rechts oder oben/unten uebrig - das ist der
   bewusste Kompromiss gegenueber springender Rahmenhoehe oder Beschnitt.
   .panel/.about-figure sitzen bewusst direkt auf dem <img> selbst (nicht auf
   einem umschliessenden <div>) - eine Zwischen-Box dazwischen hatte hier
   keine eigene definierte Hoehe (nur max-height als Deckel), wodurch
   Prozent-Werte fuer Kind-Elemente ungueltig wurden. Ausserdem WICHTIG:
   width:100%;height:100% auf dem <img> selbst funktioniert (getestet in
   diesem Setup) nicht zuverlaessig zusammen mit object-fit - das Bild wird
   dann effektiv in Originalgroesse gerendert und sprengt den Rahmen. Die
   robuste Variante ist width/height:auto zusammen mit max-width/max-height:
   100%, das Bild schrumpft dadurch von sich aus auf die Bildgroesse
   (statt eine feste Box zu erzwingen), weshalb .about-figure--contain
   zusaetzlich per Flexbox zentrieren muss. */
.about-figure--contain { aspect-ratio: 8 / 5; display: flex; align-items: center; justify-content: center; }
.about-figure--contain img.panel {
    width: auto; height: auto; max-width: 100%; max-height: 100%;
    display: block; box-sizing: border-box;
    object-fit: contain; object-position: center;
}

.about-features-dots { display: flex; justify-content: center; gap: .6rem; margin-top: 1.5rem; }
/* Inaktive Punkte nutzen --ink-soft statt dem viel zu hellen --border-strong
   (dasselbe Grau wie der inaktive .nav-dot der Sidebar) - sonst verschwinden
   sie fast unsichtbar vor dem hellblauen Seitenhintergrund. */
.about-features-dot {
    position: relative; overflow: hidden;
    border: 0; padding: 0; cursor: pointer; border-radius: 999px; height: 9px; width: 9px;
    background: var(--ink-soft); transition: width .25s ease, background .25s ease;
}
.about-features-dot:hover { background: var(--brand-deep); }
.about-features-dot.active { width: 44px; background: color-mix(in srgb, var(--brand-deep) 22%, transparent); }
/* Fuellstand zeigt die verbleibende Zeit bis zur naechsten automatischen Slide.
   Laeuft nur, solange die Auto-Rotation aktiv ist (.stopped fehlt) - nach dem
   ersten manuellen Klick wird die Pille stattdessen einfach voll eingefaerbt,
   damit sie nicht weiter "herunterzaehlt", obwohl nichts mehr passiert.
   Pausiert (Tastatur-Fokus) via .paused genau wie der Timer selbst. */
.about-features-dot__fill { position: absolute; inset: 0; width: 0; background: var(--brand-deep); border-radius: inherit; }
.about-features-slider:not(.stopped) .about-features-dot.active .about-features-dot__fill {
    animation-name: about-features-dot-progress; animation-timing-function: linear; animation-fill-mode: forwards;
}
.about-features-slider.paused .about-features-dot__fill { animation-play-state: paused; }
.about-features-slider.stopped .about-features-dot.active { background: var(--brand-deep); }
.about-features-slider.stopped .about-features-dot__fill { display: none; }
@keyframes about-features-dot-progress { from { width: 0; } to { width: 100%; } }

.about-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }

.about-community__cards { display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; gap: 1.25rem; margin: 2.5rem 0; }
.about-community__figures { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 991.98px) { .about-community__cards { grid-template-columns: 1fr; } }

/* Roadmap: einzige "dunkle" Sektion neben der CTA am Seitenende, deshalb
   dieselbe --brand-deep-Flaeche und dieselben .redesign-Spezifitaets-
   Ueberschreibungen wie bei .about-cta (siehe Kommentar dort). */
.about-section--dark {
    background: var(--brand-deep); color: var(--ink-light);
    border-radius: var(--radius-lg); padding: 3rem 2rem; margin: 2.5rem 0;
}
.redesign .about-section--dark h2 { color: var(--ink-light); }
.about-section--dark .about-section__label { color: rgba(255, 255, 255, .7); }
.about-section--dark > p { color: rgba(255, 255, 255, .75); }
.about-roadmap__cards { display: grid; grid-template-columns: repeat(2, 1fr); align-items: stretch; gap: 1.25rem; margin-top: 2rem; }
.about-roadmap__cards > .panel { margin-top: 0; }
.about-card--dark.panel { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); }
.about-card--dark.panel h3 { color: var(--ink-light); }
.about-card--dark.panel p { color: rgba(255, 255, 255, .72); }
@media (max-width: 991.98px) { .about-roadmap__cards { grid-template-columns: 1fr; } }

.about-builders h2 { font-size: 2rem; }
.about-builders__text { color: var(--ink-muted); font-size: 1.05rem; line-height: 1.65; display: grid; gap: 1rem; }

/* "Who builds this" und FAQ teilen sich jetzt ein gemeinsames .panel-Band
   (vorher zwei getrennte Karten mit sichtbarer Luecke dazwischen) - ein
   Trennstrich uebernimmt die optische Abgrenzung zwischen beiden Bloecken. */
.about-builders-faq { display: flex; flex-direction: column; gap: 2.5rem; }
.about-faq { padding-top: 2.5rem; border-top: 1px solid var(--border-soft); }
.about-faq__heading { font-size: 1.7rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: 1.5rem; }
.about-faq__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 2.5rem; }
.about-faq__item h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: .45rem; }
.about-faq__item p { margin: 0; color: var(--ink-muted); font-size: .96rem; line-height: 1.6; }

.about-cta {
    background: var(--brand-deep); color: var(--ink-light); text-align: center;
    border-radius: var(--radius-lg); padding: 3.5rem 1.5rem; margin-bottom: 1rem;
}
/* ".redesign"-Praefix noetig: "body.redesign h1/h2/h3" (Ueberschriften)
   bzw. ".redesign .btn-rd-ghost:link/:visited" (Ghost-Button) sind sonst
   per Spezifitaet staerker und liessen dunklen Text auf dem dunklen
   Panel stehen - siehe Kommentar bei .btn-rd-external fuer dasselbe Muster. */
.redesign .about-cta h2 { color: var(--ink-light); font-size: 2rem; max-width: 640px; margin: 0 auto .75rem; }
.about-cta p { max-width: 560px; margin: 0 auto; color: rgba(255, 255, 255, .75); font-size: 1.05rem; }
.about-cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 1.75rem; }
.about-cta .btn-rd { padding: .85rem 1.6rem; font-size: 1rem; }
.redesign .about-cta .btn-rd-ghost,
.redesign .about-cta .btn-rd-ghost:link,
.redesign .about-cta .btn-rd-ghost:visited { color: var(--ink-light); border-color: rgba(255, 255, 255, .35); }
.redesign .about-cta .btn-rd-ghost:hover,
.redesign .about-cta .btn-rd-ghost:focus { background: rgba(255, 255, 255, .12); color: var(--ink-light); }

@media (max-width: 991.98px) {
    .about-section--split,
    .about-how__layout,
    .about-features-slide__inner { grid-template-columns: 1fr; }
    .about-faq__grid { grid-template-columns: 1fr; }
    .about-section h2 { font-size: 1.9rem; }
    .about-hero h1 { font-size: 2.3rem; }
    .about-section.panel { padding: 2rem 1.25rem; }
}

/* ============================================================
   Startseite: Termine-/Karten-Sektion (Bestand, re-skinned)
   ============================================================ */
.redesign .appointment-inner {
    background: var(--surface); border: 1px solid var(--border-soft);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    padding: .85rem; transition: box-shadow .15s;
}
.redesign .appointment-inner:hover { box-shadow: var(--shadow); }
.redesign .appointment-inner.registration-open  { border-left: 3px solid var(--level-nat); }
.redesign .appointment-inner.registration-closed { border-left: 3px solid var(--border-strong); }
.redesign .appointment-inner.external { border-left: 3px solid var(--brand); }
.redesign .appointment-inner .date { color: var(--ink-muted); font-size: .8rem; }
.redesign .appointment-inner .headline { color: var(--ink-strong); font-weight: 700; }
.redesign .appointment-title { color: var(--ink-soft); font-weight: 700; }
.redesign .event_map { border-radius: var(--radius); overflow: hidden; }

/* ---------- Inline-Icons ---------- */
.rd-icon { display: inline-block; vertical-align: -.15em; width: 1em; height: 1em; }
.rd-icon-sm { width: 14px; height: 14px; }
/* Verwaltungs-/Settings-Icon in der Navbar groesser als das generische 1em.
   Muss NACH .rd-icon stehen, um dessen width/height:1em zu ueberschreiben. */
.nav-settings-icon { width: 28px; height: 28px; }

/* ---------- Admin-Tabs (association.php/member.php): Daten-Boxen ---------- */
/* Weisser Text auf dem violetten alert-primary-Grund; muss hier stehen, damit
   .redesign a (Link-Farbe) nicht gewinnt. */
.redesign .div_member_statistic.alert-primary {
    color: #ffffff !important;
}
.redesign .div_member_statistic .block-titel {
    color: #ffffff;
    border-color: #ffffff;
}
.redesign .div_member_statistic a {
    color: #ffffff;
    text-decoration: underline;
}
.redesign .div_member_statistic a:hover {
    color: var(--grundfarbe-hell);
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .level-group { grid-template-columns: 1fr; }
    .level-group__label { flex-direction: row; justify-content: flex-start; gap: .6rem; padding-top: 0; }
    .month-group { grid-template-columns: 1fr; }
    .month-group__label { writing-mode: horizontal-tb; transform: none; border-left: 0; border-bottom: 2px solid var(--border-strong); padding: 0 0 .35rem; }
    .app-footer__inner { flex-direction: column; text-align: center; }
}
@media (max-width: 575px) {
    .hero h1 { font-size: 2rem; }
    .hero-bar { flex-direction: column; gap: .5rem; text-align: center; }
}

/* ---------- Handbuch (manual.php) ---------- */
.redesign .manual-menu .nav-link {
    color: var(--ink-muted);
    border-left: 3px solid transparent;
    padding: .4rem .8rem;
}
.redesign .manual-menu .nav-link:hover { color: var(--brand-hover); }
.redesign .manual-menu .nav-link.active {
    color: var(--brand-deep);
    font-weight: 600;
    border-left-color: var(--brand);
    background: var(--surface-2);
}
.redesign .manual-content {
    padding: 1.5rem 2rem;
    /* Lesetext bricht ab etwa 75 Zeichen um; darueber verliert das Auge die
       Zeile beim Ruecksprung. */
    max-width: 72ch;
}
.redesign .manual-content h1 { font-size: 1.9rem; margin-bottom: 1rem; }
.redesign .manual-content h2 {
    font-size: 1.35rem;
    margin: 2rem 0 .75rem;
    padding-bottom: .3rem;
    border-bottom: 1px solid var(--border-soft);
}
.redesign .manual-content h3 { font-size: 1.1rem; margin: 1.5rem 0 .5rem; }
.redesign .manual-content p,
.redesign .manual-content li { line-height: 1.65; }
.redesign .manual-content blockquote {
    border-left: 3px solid var(--brand-soft);
    background: var(--surface-2);
    padding: .75rem 1rem;
    margin: 1rem 0;
    border-radius: var(--radius-sm);
}
.redesign .manual-content code {
    background: var(--surface-3);
    padding: .1rem .35rem;
    border-radius: 4px;
    color: var(--ink-strong);
}
.redesign .manual-code {
    background: var(--surface-3);
    padding: 1rem;
    border-radius: var(--radius-sm);
    overflow-x: auto;
}
.redesign .manual-code code { background: none; padding: 0; }
.redesign .manual-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1rem 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
}
/* Breite Tabellen scrollen in sich selbst, damit die Seite es nicht tut. */
.redesign .manual-table-scroll { overflow-x: auto; margin: 1rem 0; }
.redesign .manual-table { font-size: .92rem; }
.redesign .manual-table th {
    background: var(--surface-2);
    color: var(--ink-strong);
    white-space: nowrap;
}
.redesign .manual-content hr { border-color: var(--border-soft); margin: 2rem 0; }

/* Accordions */
.redesign .accordion-button {
    color: var(--ink-light);
    background-color: var(--brand);
}

.redesign .accordion-button:not(.collapsed) {
    color: var(--ink-light);
    background-color: var(--brand);
}

.redesign .accordion-button:focus {
    border-color: var(--brand-hover);
	box-shadow: var(--brand-hover);
}

/* Alert */
.redesign .alert-primary{
	background-color : var(--brand) !important;
	border-color : var(--brand) !important;
	color: var(--ink-light) !important;
}

/* Dropdown */
.dropdown-item:hover{
	color: var(--ink-light) !important;
	background-color: var(--brand-hover)
}
/* Fusszeile der Veranstaltungsseiten: Rechtstexte von Organisator und Plattform untereinander */
.app-footer__links--stacked { flex-direction: column; gap: .25rem; }
.app-footer__row { display: flex; gap: .75rem; align-items: baseline; flex-wrap: wrap; }
.app-footer__row-label { color: var(--ink-soft); font-size: .8rem; min-width: 6.5rem; }