/* ============================================================
   DMC  components.css  -  Komponenten-Inventar (mit Zustaenden)
   Klassennamen verbindlich aus SHARED_CONVENTIONS.
   Hover/Focus/Active nur ueber transform/opacity/paint (kein Layout-Thrash).
   Skin des Header/Footer hier; Geometrie in layout.css.
   ============================================================ */

/* ---------- Icon-Helfer ---------- */
.icon{width:1.25em;height:1.25em;flex:none;display:inline-block;vertical-align:middle}
.divider{height:1px;width:100%;background:var(--hairline);border:0}

/* ---------- Chip ---------- */
.chip{display:inline-flex;align-items:center;gap:.4em;padding:.35em .8em;border-radius:var(--radius-pill);background:var(--surface-2);border:1px solid var(--hairline);color:var(--text-muted);font-size:var(--text-caption);letter-spacing:var(--tracking-wide)}
.chip--accent{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-hover)}
.chip--rame{background:var(--rame-soft);border-color:var(--rame-soft);color:var(--rame-luce)}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  --_bg:transparent;--_fg:var(--text);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-family:var(--font-sans);font-weight:var(--weight-semibold);
  font-size:var(--text-body);line-height:1;letter-spacing:.01em;
  padding:.85em 1.5em;border-radius:var(--radius-sm);border:1px solid transparent;
  background:var(--_bg);color:var(--_fg);cursor:pointer;text-decoration:none;
  white-space:nowrap;
  transition:transform var(--dur-fast) var(--ease-out-quint),
             background-color var(--dur-normal) var(--ease-standard),
             border-color var(--dur-normal) var(--ease-standard),
             box-shadow var(--dur-normal) var(--ease-standard),
             color var(--dur-normal) var(--ease-standard);
}
.btn:active{transform:scale(.985)}
.btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.btn__icon{width:1.15em;height:1.15em;flex:none}
.btn--lg{font-size:var(--text-lead);padding:1em 1.9em}
.btn--block{display:flex;width:100%}

/* primary  (weisser Text auf Indigo; AA-large gesichert, halbfett) */
.btn--primary{--_bg:var(--accent);--_fg:var(--accent-contrast);box-shadow:var(--shadow-1),var(--edge-catch)}
.btn--primary:hover{--_bg:var(--accent-hover);transform:translateY(-2px);box-shadow:var(--shadow-2),var(--glow-accent-soft)}
.btn--primary:active{--_bg:var(--accent-strong);transform:translateY(0) scale(.985)}

/* ghost */
.btn--ghost{--_bg:transparent;--_fg:var(--text);border-color:var(--hairline-strong)}
.btn--ghost:hover{--_bg:var(--accent-soft);border-color:var(--accent-line);transform:translateY(-2px)}
.btn--ghost:active{--_bg:var(--surface-2);transform:translateY(0) scale(.985)}

/* text  (animierter Unterstrich + Pfeil) */
.btn--text{padding-inline:0;--_fg:var(--text-muted);position:relative;border-radius:0}
.btn--text::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-normal) var(--ease-out-expo)}
.btn--text:hover{--_fg:var(--text)}
.btn--text:hover::after{transform:scaleX(1)}
.btn--text .btn__icon{transition:transform var(--dur-normal) var(--ease-out-expo)}
.btn--text:hover .btn__icon{transform:translateX(4px)}

/* ============================================================
   SITE HEADER  (Skin) + BRAND + MEGA-MENU + MOBILE-NAV
   ============================================================ */
.site-header{
  --_hbg:transparent;border-bottom:1px solid transparent;
  transition:border-color var(--dur-normal) var(--ease-standard);
}
.site-header::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--_hbg);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  opacity:0;transition:opacity var(--dur-normal) var(--ease-standard);
}
.site-header[data-scrolled]{--_hbg:oklch(13% .02 264 / .82);border-bottom-color:var(--hairline)}
.site-header[data-scrolled]::before{opacity:1}

.brand{display:inline-flex;align-items:center;gap:var(--space-3);color:var(--text);font-family:var(--font-display);font-weight:700;font-size:var(--text-h4);letter-spacing:.01em;line-height:1}
.brand svg,.brand img{height:calc(var(--header-h) * .42);width:auto;color:var(--accent);transition:color var(--dur-normal) var(--ease-standard)}
.brand:hover svg{color:var(--accent-hover)}
.brand small{display:block;font-family:var(--font-sans);font-weight:500;font-size:.42em;letter-spacing:var(--tracking-kicker);text-transform:uppercase;color:var(--text-muted)}

.nav-link,.mega-menu__trigger{
  display:inline-flex;align-items:center;gap:var(--space-2);
  padding:var(--space-2) var(--space-3);font-size:var(--text-body);font-weight:500;
  color:var(--text-muted);background:none;border-radius:var(--radius-sm);cursor:pointer;
  transition:color var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard);
}
.nav-link:hover,.mega-menu__trigger:hover,.mega-menu__trigger[aria-expanded="true"]{color:var(--text)}
.nav-link[aria-current="page"]{color:var(--text)}
.mega-menu__trigger .chev{width:.65em;height:.65em;transition:transform var(--dur-normal) var(--ease-out-expo)}
.mega-menu__trigger[aria-expanded="true"] .chev{transform:rotate(180deg)}

.mega-menu{position:static}
.mega-menu__panel{
  position:absolute;left:0;right:0;top:var(--header-h);z-index:var(--z-dropdown);
  background:var(--surface);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  box-shadow:var(--shadow-3);
  opacity:0;visibility:hidden;transform:translateY(-10px);pointer-events:none;
  transition:opacity var(--dur-normal) var(--ease-out-expo),
             transform var(--dur-normal) var(--ease-out-expo),
             visibility var(--dur-normal) linear;
}
.mega-menu__panel.is-open,
.mega-menu:focus-within .mega-menu__panel{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.mega-menu__grid{display:grid;gap:var(--space-8);grid-template-columns:repeat(3,1fr) 1.15fr;max-width:var(--container-2xl);margin-inline:auto;padding:var(--space-8) var(--gutter)}
.mega-col__title{font-family:var(--font-sans);font-size:var(--text-caption);font-weight:600;text-transform:uppercase;letter-spacing:var(--tracking-kicker);color:var(--accent-hover);margin-bottom:var(--space-4)}
.mega-link{display:block;padding:var(--space-2) 0;color:var(--text-muted);font-size:var(--text-body);transition:color var(--dur-fast) var(--ease-standard),transform var(--dur-normal) var(--ease-out-expo)}
.mega-link:hover{color:var(--text);transform:translateX(6px)}
.mega-link small{display:block;color:var(--text-faint);font-size:var(--text-caption)}
.mega-teaser{display:block;border-radius:var(--radius-md);overflow:hidden;position:relative;background:var(--surface-2);border:1px solid var(--hairline)}
.mega-teaser img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out-expo)}
.mega-teaser:hover img{transform:scale(1.05)}
.mega-teaser__cap{position:absolute;left:0;right:0;bottom:0;padding:var(--space-4);background:linear-gradient(transparent,oklch(13% .02 264 / .85));font-size:var(--text-caption);color:var(--text)}

/* Mobile-Nav Toggle + Drawer */
.nav-toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;color:var(--text);border-radius:var(--radius-sm);transition:background-color var(--dur-fast) var(--ease-standard)}
.nav-toggle:hover{background:var(--surface-2)}
.mobile-nav{position:fixed;inset:0;z-index:var(--z-modal);background:var(--bg-2);padding:calc(var(--header-h) + var(--space-6)) var(--gutter) var(--space-8);overflow-y:auto;opacity:0;visibility:hidden;transform:translateX(6%);transition:opacity var(--dur-normal) var(--ease-out-expo),transform var(--dur-slow) var(--ease-out-expo),visibility var(--dur-slow) linear}
.mobile-nav.is-open{opacity:1;visibility:visible;transform:none}
.mobile-nav__group{border-bottom:1px solid var(--hairline)}
.mobile-nav__group>summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-5) 0;cursor:pointer;list-style:none;font-family:var(--font-display);font-weight:700;font-size:var(--text-h4);color:var(--text)}
.mobile-nav__group>summary::-webkit-details-marker{display:none}
.mobile-nav__group[open]>summary{color:var(--accent-hover)}
.mobile-nav__group a{display:block;padding:var(--space-3) 0;color:var(--text-muted);font-size:var(--text-lead)}
.mobile-nav__group a:hover{color:var(--text)}
@media (max-width:1023px){
  .site-header__nav{display:none}
  .nav-toggle{display:inline-flex}
}
@media (min-width:1024px){.mobile-nav{display:none}}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;display:grid;align-items:end;min-height:100svh;padding-block:calc(var(--header-h) + var(--space-8)) var(--space-section);isolation:isolate;overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:-2;background:var(--bg-2)}
.hero__media img,.hero__media video{width:100%;height:100%;object-fit:cover}
.hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,oklch(13% .02 264 / .35) 0%,oklch(13% .02 264 / .1) 34%,var(--bg) 96%)}
.hero__inner{position:relative;z-index:1;width:100%;max-width:var(--container-2xl);margin-inline:auto;padding-inline:var(--gutter)}
.hero__title{font-size:var(--text-hero);font-weight:900;line-height:.98;letter-spacing:var(--tracking-tight);max-width:16ch;text-wrap:balance}
.hero__lead{margin-top:var(--space-5);max-width:52ch;color:var(--text-muted);font-size:var(--text-lead)}
.hero__actions{margin-top:var(--space-7);display:flex;flex-wrap:wrap;gap:var(--space-4)}
.hero__scroll{position:absolute;left:var(--gutter);bottom:var(--space-6);z-index:1;display:inline-flex;align-items:center;gap:var(--space-3);color:var(--text-muted);font-size:var(--text-caption);text-transform:uppercase;letter-spacing:var(--tracking-kicker)}

/* ============================================================
   SECTION HEADER / KICKER / LEAD
   ============================================================ */
.section__header{max-width:var(--container-prose);margin-bottom:var(--space-9)}
.section__header--center{margin-inline:auto;text-align:center}
.kicker{display:inline-flex;align-items:center;gap:var(--space-3);font-family:var(--font-sans);font-size:var(--text-caption);font-weight:600;text-transform:uppercase;letter-spacing:var(--tracking-kicker);color:var(--accent-hover);margin-bottom:var(--space-4)}
.kicker::before{content:"";width:2rem;height:1px;background:var(--accent-line)}
.kicker--plain::before{display:none}
.section__title{font-size:var(--text-h2)}
.lead{font-size:var(--text-lead);line-height:var(--leading-snug);color:var(--text-muted);max-width:60ch;margin-top:var(--space-4)}

/* ============================================================
   STAT / COUNTER
   ============================================================ */
.stat{display:flex;flex-direction:column;gap:var(--space-2)}
.stat__value{font-family:var(--font-mono);font-weight:500;font-size:var(--text-h1);line-height:1;letter-spacing:-.01em;color:var(--text);font-variant-numeric:tabular-nums}
.stat__value .unit{color:var(--accent-hover);font-size:.55em;margin-left:.12em}
.stat__label{font-size:var(--text-caption);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--text-muted)}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:var(--space-8)}
.stat-row .stat{position:relative;padding-left:var(--space-6)}
.stat-row .stat::before{content:"";position:absolute;left:0;top:.1em;bottom:.1em;width:1px;background:var(--hairline)}

/* ============================================================
   EVENT-CARD  (Stretched-Link)
   ============================================================ */
.event-card{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-lg);overflow:hidden;transition:transform var(--dur-normal) var(--ease-out-quint),box-shadow var(--dur-normal) var(--ease-standard),border-color var(--dur-normal) var(--ease-standard)}
.event-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-3);border-color:var(--hairline-strong)}
.event-card__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--surface-2)}
.event-card__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out-expo)}
.event-card:hover .event-card__media img{transform:scale(1.05)}
.event-card__date{position:absolute;top:var(--space-3);left:var(--space-3);z-index:2;display:grid;place-items:center;gap:.05em;min-width:3.2em;padding:var(--space-2);background:oklch(13% .02 264 / .78);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid var(--hairline);border-radius:var(--radius-md);text-align:center}
.event-card__date .d{font-family:var(--font-mono);font-size:var(--text-h4);line-height:1;color:var(--text)}
.event-card__date .m{font-size:.66rem;text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--text-muted)}
.event-card__body{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-5)}
.event-card__cat{font-size:var(--text-caption);text-transform:uppercase;letter-spacing:var(--tracking-kicker);color:var(--accent-hover)}
.event-card__title{font-family:var(--font-display);font-weight:700;font-size:var(--text-h4);color:var(--text)}
.event-card__meta{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);margin-top:auto;padding-top:var(--space-3);color:var(--text-muted);font-size:var(--text-caption)}
.event-card__meta .mi{display:inline-flex;align-items:center;gap:.4em}
.event-card__link{position:absolute;inset:0;z-index:3}
.event-card__link:focus-visible{outline:2px solid var(--accent-hover);outline-offset:-2px;border-radius:var(--radius-lg)}

/* ============================================================
   RALLY-TIMELINE
   ============================================================ */
.rally-timeline{list-style:none;margin:0;padding:0 0 0 var(--space-6);position:relative}
.rally-timeline::before{content:"";position:absolute;left:5px;top:.6em;bottom:.6em;width:1px;background:var(--hairline)}
.rally-timeline__item{position:relative;padding:0 0 var(--space-7) var(--space-6)}
.rally-timeline__item:last-child{padding-bottom:0}
.rally-timeline__node{position:absolute;left:0;top:.35em;width:12px;height:12px;border-radius:var(--radius-round);background:var(--bg);border:2px solid var(--accent-line);box-sizing:border-box;transition:box-shadow var(--dur-normal) var(--ease-standard)}
.rally-timeline__item[data-state="done"] .rally-timeline__node{background:var(--accent);border-color:var(--accent)}
.rally-timeline__item[data-state="active"] .rally-timeline__node{background:var(--accent);border-color:var(--accent-glow);box-shadow:var(--glow-accent-soft)}
.rally-timeline__time{font-family:var(--font-mono);font-size:var(--text-caption);color:var(--accent-hover);letter-spacing:.02em}
.rally-timeline__title{font-family:var(--font-display);font-weight:700;font-size:var(--text-h4);margin-top:var(--space-1)}
.rally-timeline__meta{color:var(--text-muted);font-size:var(--text-body);margin-top:var(--space-2);display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4)}

/* ============================================================
   MAGAZINE-CARD  (DER DREIZACK)
   ============================================================ */
.magazine-card{position:relative;display:flex;flex-direction:column;gap:var(--space-4)}
.magazine-card__cover{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:var(--radius-md);background:var(--surface-2);box-shadow:var(--shadow-2)}
.magazine-card__cover img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out-expo)}
.magazine-card:hover .magazine-card__cover img{transform:scale(1.04)}
.magazine-card__cover::after{content:"";position:absolute;inset:0;box-shadow:var(--edge-catch);border-radius:inherit;pointer-events:none}
.magazine-card__issue{font-family:var(--font-mono);font-size:var(--text-caption);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-hover)}
.magazine-card__title{font-family:var(--font-display);font-weight:700;font-size:var(--text-h3);line-height:var(--leading-snug)}
.magazine-card__title a{color:inherit}
.magazine-card__title a::after{content:"";position:absolute;inset:0}
.magazine-card__excerpt{color:var(--text-muted);font-size:var(--text-body)}
.magazine-card:hover .magazine-card__title{color:var(--text)}

/* ============================================================
   PERSON / VORSTAND-CARD
   ============================================================ */
.person-card{display:flex;flex-direction:column;gap:var(--space-4);background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:var(--space-5);transition:transform var(--dur-normal) var(--ease-out-quint),border-color var(--dur-normal) var(--ease-standard),box-shadow var(--dur-normal) var(--ease-standard)}
.person-card:hover{transform:translateY(-3px);border-color:var(--accent-line);box-shadow:var(--shadow-2)}
.person-card__photo{aspect-ratio:1;overflow:hidden;border-radius:var(--radius-md);background:var(--surface-2)}
.person-card__photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.02);transition:filter var(--dur-slow) var(--ease-standard),transform var(--dur-slow) var(--ease-out-expo)}
.person-card:hover .person-card__photo img{filter:grayscale(0);transform:scale(1.03)}
.person-card__role{font-size:var(--text-caption);text-transform:uppercase;letter-spacing:var(--tracking-kicker);color:var(--accent-hover)}
.person-card__name{font-family:var(--font-display);font-weight:700;font-size:var(--text-h4)}
.person-card__title{color:var(--text-muted);font-size:var(--text-body)}
.person-card__links{display:flex;gap:var(--space-2);margin-top:var(--space-2)}
.person-card__links a{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--hairline);border-radius:var(--radius-round);color:var(--text-muted);transition:color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard)}
.person-card__links a:hover{color:var(--text);border-color:var(--accent-line);background:var(--accent-soft)}

/* ============================================================
   FORMFELDER
   ============================================================ */
.field{display:flex;flex-direction:column;gap:var(--space-2)}
.field__label{font-size:var(--text-caption);font-weight:600;letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-muted)}
.field__label .req{color:var(--accent-hover);margin-left:.2em}
.field__input,.field__select,.field__textarea{width:100%;background:var(--surface);color:var(--text);border:1px solid var(--hairline-strong);border-radius:var(--radius-sm);padding:.8em 1em;font-size:var(--text-body);line-height:1.4;transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard)}
.field__input::placeholder,.field__textarea::placeholder{color:var(--text-faint)}
.field__input:hover,.field__select:hover,.field__textarea:hover{border-color:var(--accent-line)}
.field__input:focus-visible,.field__select:focus-visible,.field__textarea:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.field__textarea{min-height:8em;resize:vertical}
.field__select{appearance:none;-webkit-appearance:none;padding-right:2.6em;background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23a9aeb8%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%3E%3Cpath%20d=%22M6%209l6%206%206-6%22/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1em center;background-size:1.1em}
.field__hint{font-size:var(--text-caption);color:var(--text-faint)}
.field__error{font-size:var(--text-caption);color:var(--danger);display:flex;align-items:center;gap:.4em}
.field[data-invalid="true"] .field__input,
.field[data-invalid="true"] .field__select,
.field[data-invalid="true"] .field__textarea,
.field__input[aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-soft)}
.field--disabled{opacity:.5;pointer-events:none}

/* Checkbox / Radio */
.check{position:relative;display:inline-flex;align-items:flex-start;gap:var(--space-3);cursor:pointer;font-size:var(--text-body);color:var(--text)}
.check input{position:absolute;opacity:0;width:1px;height:1px}
.check__box{flex:none;width:20px;height:20px;margin-top:.15em;border:1px solid var(--hairline-strong);border-radius:var(--radius-xs);background:var(--surface);display:grid;place-items:center;color:transparent;transition:background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard)}
.check--radio .check__box{border-radius:var(--radius-round)}
.check:hover .check__box{border-color:var(--accent-line)}
.check input:checked+.check__box{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}
.check input:focus-visible+.check__box{outline:2px solid var(--accent-hover);outline-offset:2px}
.check__box svg{width:13px;height:13px}
.check--radio .check__box svg{display:none}
.check--radio input:checked+.check__box::after{content:"";width:8px;height:8px;border-radius:var(--radius-round);background:var(--accent-contrast)}

/* ============================================================
   STEPPER  (mehrstufiges Formular)
   ============================================================ */
.stepper{display:flex;align-items:flex-start;gap:0;list-style:none;margin:0 0 var(--space-8);padding:0}
.stepper__step{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--space-2);flex:1;text-align:center;color:var(--text-faint);font-size:var(--text-caption)}
.stepper__step::before{content:"";position:absolute;top:1.1em;left:-50%;width:100%;height:1px;background:var(--hairline);z-index:0}
.stepper__step:first-child::before{display:none}
.stepper__dot{position:relative;z-index:1;width:2.2em;height:2.2em;display:grid;place-items:center;border-radius:var(--radius-round);border:1px solid var(--hairline-strong);background:var(--surface);color:var(--text-muted);font-family:var(--font-mono);font-size:var(--text-body);transition:border-color var(--dur-normal) var(--ease-standard),background-color var(--dur-normal) var(--ease-standard),color var(--dur-normal) var(--ease-standard),box-shadow var(--dur-normal) var(--ease-standard)}
.stepper__label{letter-spacing:var(--tracking-wide);text-transform:uppercase}
.stepper__step[data-state="active"]{color:var(--text)}
.stepper__step[data-state="active"] .stepper__dot{border-color:var(--accent);color:var(--text);box-shadow:var(--glow-accent-soft)}
.stepper__step[data-state="done"]{color:var(--text-muted)}
.stepper__step[data-state="done"] .stepper__dot{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}
.stepper__step[data-state="done"]::before{background:var(--accent-line)}

/* ============================================================
   LOGIN-CARD  (Mitgliederbereich)
   ============================================================ */
.login-card{width:100%;max-width:440px;margin-inline:auto;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-xl);padding:var(--space-8);box-shadow:var(--shadow-4),var(--edge-catch);display:flex;flex-direction:column;gap:var(--space-5)}
.login-card__head{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);text-align:center}
.login-card__mark{width:48px;height:48px;color:var(--rame)}
.login-card__title{font-family:var(--font-display);font-weight:700;font-size:var(--text-h3)}
.login-card__sub{color:var(--text-muted);font-size:var(--text-body)}
.login-card__error{background:var(--danger-soft);border:1px solid var(--danger);color:var(--text);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);font-size:var(--text-caption);display:flex;gap:var(--space-2);align-items:center}
.login-card__row{display:flex;justify-content:space-between;align-items:center;font-size:var(--text-caption)}
.login-card__foot{text-align:center;color:var(--text-muted);font-size:var(--text-caption)}

/* ============================================================
   DASHBOARD / TILE  (Kacheln)
   ============================================================ */
.dashboard{display:grid;gap:var(--gutter);grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.tile{position:relative;display:flex;flex-direction:column;gap:var(--space-3);min-height:180px;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:var(--space-6);overflow:hidden;transition:transform var(--dur-normal) var(--ease-out-quint),border-color var(--dur-normal) var(--ease-standard),box-shadow var(--dur-normal) var(--ease-standard),background-color var(--dur-normal) var(--ease-standard)}
.tile:hover{transform:translateY(-3px);border-color:var(--accent-line);box-shadow:var(--shadow-3);background:var(--surface-2)}
.tile__icon{width:2rem;height:2rem;color:var(--accent-hover)}
.tile__title{font-family:var(--font-display);font-weight:700;font-size:var(--text-h4)}
.tile__value{font-family:var(--font-mono);font-size:var(--text-h2);line-height:1;color:var(--text);font-variant-numeric:tabular-nums}
.tile__desc{color:var(--text-muted);font-size:var(--text-body)}
.tile__arrow{margin-top:auto;align-self:flex-end;color:var(--text-faint);transition:transform var(--dur-normal) var(--ease-out-expo),color var(--dur-normal) var(--ease-standard)}
.tile:hover .tile__arrow{transform:translate(4px,-4px);color:var(--accent-hover)}
.tile__link{position:absolute;inset:0;z-index:2}
.tile__link:focus-visible{outline:2px solid var(--accent-hover);outline-offset:-2px;border-radius:var(--radius-lg)}
.tile--wide{grid-column:span 2}
.tile--prestige{border-color:var(--rame-soft);background:linear-gradient(160deg,var(--surface),var(--surface-3))}
.tile--prestige .tile__icon{color:var(--rame)}

/* ============================================================
   BREADCRUMB
   ============================================================ */
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);font-size:var(--text-caption);color:var(--text-muted);padding-block:var(--space-4)}
.breadcrumb ol{display:contents;list-style:none;margin:0;padding:0}
.breadcrumb li{display:inline-flex;align-items:center;gap:var(--space-2)}
.breadcrumb li+li::before{content:"";width:5px;height:5px;border-right:1px solid var(--text-faint);border-bottom:1px solid var(--text-faint);transform:rotate(-45deg);opacity:.8}
.breadcrumb a{color:var(--text-muted);transition:color var(--dur-fast) var(--ease-standard)}
.breadcrumb a:hover{color:var(--text)}
.breadcrumb [aria-current="page"]{color:var(--text)}

/* ============================================================
   SITE FOOTER  (Skin; Geometrie in layout.css)
   ============================================================ */
.site-footer{background:var(--bg-2);border-top:1px solid var(--hairline);color:var(--text-muted)}
.site-footer .brand{font-size:var(--text-h4);margin-bottom:var(--space-4)}
.footer-col__title{font-size:var(--text-caption);text-transform:uppercase;letter-spacing:var(--tracking-kicker);color:var(--text);margin-bottom:var(--space-4)}
.footer-col a{display:inline-block;color:var(--text-muted);padding-block:var(--space-1);font-size:var(--text-body);transition:color var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-out-expo)}
.footer-col a:hover{color:var(--text);transform:translateX(3px)}
.footer-social{display:flex;gap:var(--space-3);margin-top:var(--space-4)}
.footer-social a{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--hairline);border-radius:var(--radius-round);color:var(--text-muted);transition:color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard)}
.footer-social a:hover{color:var(--text);border-color:var(--accent-line);background:var(--accent-soft)}
.footer-bottom{border-top:1px solid var(--hairline);margin-top:var(--space-8);padding-top:var(--space-5);font-size:var(--text-caption);color:var(--text-faint)}
.footer-bottom a{color:var(--text-faint)}
.footer-bottom a:hover{color:var(--text-muted)}

/* ============================================================
   CONSENT (Cookie-Banner)
   ============================================================ */
.consent{position:fixed;left:50%;bottom:var(--space-5);z-index:var(--z-consent);width:min(680px,calc(100% - var(--space-8)));background:var(--surface-2);border:1px solid var(--hairline-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-4),var(--edge-catch);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4);opacity:0;visibility:hidden;transform:translate(-50%,120%);transition:opacity var(--dur-slow) var(--ease-out-expo),transform var(--dur-slow) var(--ease-out-expo),visibility var(--dur-slow) linear}
.consent.is-open{opacity:1;visibility:visible;transform:translateX(-50%)}
.consent__title{font-family:var(--font-display);font-weight:700;font-size:var(--text-h4)}
.consent__text{color:var(--text-muted);font-size:var(--text-body)}
.consent__text a{color:var(--accent-hover);text-decoration:underline;text-underline-offset:.15em}
.consent__actions{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.consent__actions .btn{flex:1 1 auto}

/* ============================================================
   TOAST / ALERT
   ============================================================ */
.toast-region{position:fixed;top:calc(var(--header-h) + var(--space-4));right:var(--gutter);z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--space-3);width:min(380px,calc(100% - var(--space-8)));pointer-events:none}
.toast{pointer-events:auto;position:relative;display:flex;gap:var(--space-3);background:var(--surface-2);border:1px solid var(--hairline);border-left:3px solid var(--accent);border-radius:var(--radius-md);box-shadow:var(--shadow-3),var(--edge-catch);padding:var(--space-4) var(--space-5);opacity:0;transform:translateX(12px);transition:opacity var(--dur-normal) var(--ease-out-expo),transform var(--dur-normal) var(--ease-out-expo)}
.toast.is-open{opacity:1;transform:none}
.toast--ok{border-left-color:var(--ok)}
.toast--warn{border-left-color:var(--warn)}
.toast--danger{border-left-color:var(--danger)}
.toast__icon{flex:none;width:1.3em;height:1.3em;margin-top:.1em;color:var(--accent-hover)}
.toast--ok .toast__icon{color:var(--ok)}
.toast--warn .toast__icon{color:var(--warn)}
.toast--danger .toast__icon{color:var(--danger)}
.toast__body{display:flex;flex-direction:column;gap:.2em;min-width:0}
.toast__title{font-weight:600;color:var(--text);font-size:var(--text-body)}
.toast__msg{color:var(--text-muted);font-size:var(--text-caption)}
.toast__close{flex:none;margin-left:auto;width:24px;height:24px;display:grid;place-items:center;color:var(--text-muted);border-radius:var(--radius-sm);transition:color var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard)}
.toast__close:hover{color:var(--text);background:var(--hairline)}