/* ============================================================
   DMC  fix-06-member.css  -  Mitgliederbereich + globale Overflow-Sicherung
   Notturno di Modena. Nur Tokens, keine Hardcodes. Laedt als letzte
   Seiten-CSS (gewinnt Spezifitaets-Gleichstand). Reuse: .dashboard/.tile/
   .login-card (components.css), .next-event (fix-02-home.css), .photo-frame/
   .member-map (fix-media.css), Login-Formular (fix-05-forms.css).
   Abgedeckt: page-member, member-page, dashboard-page, member-content,
   page-hero(member), dashboard-hero, dashboard-next, dashboard(member),
   tile(member: titel-groesse/silbentrennung/text), member-body,
   member-placeholder(leer + geladen -> raster), doc-list, member-gate,
   gate-title, login-card--gate, [data-auth-logout] (Abmelden-Control)
   + globale Overflow-Sicherung.
   ============================================================ */

/* ---------- GLOBALE OVERFLOW-SICHERUNG (global erlaubt) ----------
   base.css hat body{overflow-x:hidden} und img,svg,video{max-width:100%}.
   Hier html-Ebene + Upgrade hidden -> clip: clip klippt ohne Scroll-Container
   zu erzeugen und bricht daher position:sticky (Header) nicht. */
html{overflow-x:clip}
body{overflow-x:clip;max-width:100%}

/* ---------- WIEDERVERWENDBARE ICON-MASKEN (currentColor) ---------- */
:root{
  --ico-logout:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
  --ico-doc:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E");
}

/* ---------- SEITEN-WRAPPER (zentriert, max container-xl) ----------
   .page ist projektweit ungestylt; hier zentrieren wir die Member-Artikel. */
.member-page,
.dashboard-page{
  width:100%;
  max-width:var(--container-xl);
  margin-inline:auto;
  padding-inline:var(--gutter);
  padding-block:var(--space-6) var(--space-section);
  min-width:0;
}
/* Body-Kontext der Member-Seiten: nur genug Hoehe, damit der Footer im kurzen
   Gate-/Ladezustand nicht nach oben rutscht (Header/Footer sind Full-Bleed). */
.page-member main{min-height:calc(100svh - var(--header-h))}

/* ---------- MEMBER-CONTENT (vertikaler Rhythmus) ---------- */
.member-content{display:flex;flex-direction:column;gap:var(--space-8);min-width:0}
.member-content[hidden]{display:none}
.member-content>*{min-width:0}
/* Doppelten Abstand vermeiden: der Member-Hero traegt seinen Rhythmus ueber
   das flex-gap, nicht ueber die eigene margin-bottom aus pages.css. */
.member-content>.page-hero{margin-bottom:0}

/* ---------- ABMELDEN (aus .btn--text zu einem echten Control veredelt) ---------- */
.member-content [data-auth-logout]{
  align-self:flex-start;
  gap:var(--space-2);
  min-height:44px;
  padding:.55em 1.15em;
  border:1px solid var(--hairline-strong);
  border-radius:var(--radius-pill);
  background:var(--surface);
  color:var(--text-muted);
  font-family:var(--font-sans);
  font-size:var(--text-caption);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-wide);
  text-transform:uppercase;
}
.member-content>.page-hero [data-auth-logout]{margin-top:var(--space-4)}
/* animierten btn--text-Unterstrich unterdruecken */
.member-content [data-auth-logout]::after{display:none}
.member-content [data-auth-logout]::before{
  content:"";width:1.05em;height:1.05em;flex:none;
  background:currentColor;
  -webkit-mask:var(--ico-logout) center / contain no-repeat;
          mask:var(--ico-logout) center / contain no-repeat;
}
.member-content [data-auth-logout]:hover{
  color:var(--text);
  border-color:var(--accent-line);
  background:var(--accent-soft);
  transform:translateY(-1px);
}
.member-content [data-auth-logout]:active{transform:translateY(0) scale(.985)}

/* ---------- DASHBOARD-HERO (Begruessung / Kopf) ---------- */
.dashboard-hero{
  position:relative;
  display:flex;flex-direction:column;gap:var(--space-3);
  padding-bottom:var(--space-7);
  border-bottom:1px solid var(--hairline);
  min-width:0;
}
.dashboard-hero>*{min-width:0}
.dashboard-hero [data-auth-logout]{margin-top:var(--space-3)}
/* Begruessung: keine Silbentrennung im Display-Titel, ausgewogener Umbruch */
.dashboard-hero .page-hero__title{hyphens:manual;text-wrap:balance}

/* ---------- DASHBOARD-NEXT (Naechster Termin) ----------
   Kein Karten-in-Karten: der Wrapper ist nur Label + die bereits gestaltete
   .next-event-Karte (fix-02-home.css). Ruhiger, editorialer Rhythmus. */
.dashboard-next{
  display:flex;flex-direction:column;gap:var(--space-4);
  min-width:0;
}
.dashboard-next>*{min-width:0}
.dashboard-next .kicker{margin-bottom:0}

/* ---------- DASHBOARD-RASTER (Member: ausgewogene, gleich hohe Kacheln) ---------- */
.dashboard-page .dashboard{grid-template-columns:1fr}
@media (min-width:600px){.dashboard-page .dashboard{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.dashboard-page .dashboard{grid-template-columns:repeat(3,1fr)}}

/* ---------- KACHEL-FEINSCHLIFF (nur im Mitgliederbereich) ----------
   Kachel-Titel kleiner + ohne automatische Silbentrennung: verhindert das
   haessliche Umbrechen langer Komposita (z. B. Veranstaltungs-Anmeldung). */
.member-content .tile__title{
  font-size:var(--text-lead);
  line-height:var(--leading-snug);
  hyphens:manual;
  overflow-wrap:break-word;
  text-wrap:balance;
}
/* JS-gerenderte Kacheln nutzen ein <p> ohne Klasse fuer den Auszug */
.member-content .tile>p{color:var(--text-muted);font-size:var(--text-body);margin:0}
/* Textpfeil der server-gerenderten Kacheln praezise als Icon ausrichten */
.member-content .tile__arrow{font-size:var(--text-h4);line-height:1}

/* ---------- MEMBER-BODY (Inhalts-Container unter dem Hero) ----------
   .member-body ist ein .section (layout.css: padding-block:space-section) ->
   hier neutralisieren, der Rhythmus kommt aus member-content. */
.member-body{padding-block:0;min-width:0;display:flex;flex-direction:column;gap:var(--space-7)}
.member-body>*{min-width:0}

/* ---------- MEMBER-GATE (Lade-/Weiterleitungs-Zustand) ----------
   FIX: pages.css [data-member-gate]{display:grid} ueberschreibt sonst das
   hidden-Attribut -> Gate wuerde trotz hidden aufblitzen. Hier reparieren. */
.member-gate{
  display:grid;place-items:center;
  min-height:60svh;
  padding-block:var(--space-9);
  min-width:0;
}
.member-gate[hidden]{display:none}
.gate-title{
  font-family:var(--font-display);font-weight:700;
  font-size:var(--text-h3);line-height:var(--leading-snug);
  color:var(--text);
}
/* Gate-Karte mittig, ruhig */
.login-card--gate{text-align:center;align-items:center}
.login-card--gate .lead{margin-inline:auto}

/* ---------- MEMBER-PLACEHOLDER ---------- */
/* Leerzustand: dezente gestrichelte Platte mit Hinweis */
.member-placeholder{
  display:grid;place-items:center;
  min-height:180px;
  padding:var(--space-8) var(--space-6);
  background:var(--surface);
  border:1px dashed var(--hairline-strong);
  border-radius:var(--radius-lg);
  text-align:center;
  min-width:0;
}
.member-placeholder .empty-note{color:var(--text-muted);font-size:var(--text-body)}
/* Geladen: JS haengt .tile-Karten direkt ein -> echtes Kachel-Raster,
   die Platzhalter-Optik (gestrichelt/zentriert) vollstaendig zuruecknehmen. */
.member-placeholder:has(> .tile){
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:var(--gutter);
  place-items:stretch;
  align-content:start;
  min-height:0;
  padding:0;
  background:none;
  border:0;
  border-radius:0;
  text-align:left;
}

/* ---------- DOC-LIST (Dokumente in einer Kachel) ---------- */
.doc-list{
  list-style:none;margin:var(--space-3) 0 0;padding:0;
  display:flex;flex-direction:column;min-width:0;
}
.doc-list li{border-top:1px solid var(--hairline-soft)}
.doc-list li:first-child{border-top:0}
.doc-list a{
  display:flex;align-items:center;gap:var(--space-3);
  min-height:44px;padding:var(--space-2) 0;
  color:var(--text-muted);font-size:var(--text-body);line-height:var(--leading-snug);
  transition:color var(--dur-fast) var(--ease-standard),
             transform var(--dur-normal) var(--ease-out-expo);
}
.doc-list a::before{
  content:"";width:1.1em;height:1.1em;flex:none;
  background:var(--accent-hover);
  -webkit-mask:var(--ico-doc) center / contain no-repeat;
          mask:var(--ico-doc) center / contain no-repeat;
  transition:background-color var(--dur-fast) var(--ease-standard);
}
.doc-list a:hover{color:var(--text);transform:translateX(3px)}
.doc-list a:focus-visible{outline:none;color:var(--text);box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}

/* ---------- RESPONSIVE ---------- */
@media (max-width:768px){
  .member-page,.dashboard-page{padding-block:var(--space-5) var(--space-9)}
  .member-content{gap:var(--space-6)}
  .member-body{gap:var(--space-6)}
  .member-placeholder{padding:var(--space-7) var(--space-5)}
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  .member-content [data-auth-logout]:hover,
  .doc-list a:hover{transform:none}
}
/* integration: vorstand-only dashboard tile must honor [hidden] */
.dashboard [hidden]{display:none!important;}
/* integration: DMC Intern facts tables + intro (from old member area) */
.member-intro{color:var(--text-muted);max-width:70ch;margin-bottom:var(--space-lg,2rem);}
.member-table{margin-block:var(--space-lg,2rem);overflow-x:auto;}
.member-table__title{font-family:var(--font-display);font-size:1.3rem;margin:0 0 var(--space-sm,.75rem);color:var(--text);}
.data-table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:32rem;}
.data-table th{text-align:left;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.04em;font-size:.72rem;color:var(--accent);padding:.55rem .8rem;border-bottom:1px solid var(--hairline);}
.data-table td{padding:.6rem .8rem;border-bottom:1px solid var(--hairline-soft);color:var(--text-muted);vertical-align:top;}
.data-table tr:hover td{background:var(--surface-2);}
.data-table td:first-child{color:var(--text);white-space:nowrap;font-variant-numeric:tabular-nums;}
/* integration: DMC-Intern with tables must NOT use the tile grid (Anmerkungen was clipped) */
.member-placeholder:has(.member-table){display:block;}
.member-placeholder:has(.member-table) > .tile{margin-top:var(--space-lg,2rem);}

/* Vorstand-Verwaltung (Admin: Antraege + Anfragen) */
.verwaltung .admin-section{margin-block:var(--space-xl,2.5rem);}
.admin-section__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--hairline);padding-bottom:.6rem;margin-bottom:var(--space-md,1.25rem);}
.admin-section__title{font-family:var(--font-display);font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem);margin:0;}
.admin-count{font-family:var(--font-mono);font-size:.8rem;color:var(--text-muted);white-space:nowrap;}
.admin-list{display:grid;gap:var(--space-md,1.25rem);}
.admin-card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:var(--space-md,1.25rem) var(--space-lg,1.5rem);border-left:3px solid var(--hairline-strong);}
.admin-card--status-neu{border-left-color:var(--accent);}
.admin-card--status-in_bearbeitung{border-left-color:var(--warn,oklch(80% .11 78));}
.admin-card--status-angenommen,.admin-card--status-erledigt{border-left-color:var(--ok,oklch(72% .13 155));}
.admin-card--status-abgelehnt{border-left-color:var(--danger,oklch(64% .17 25));}
.admin-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;}
.admin-card__name{font-family:var(--font-display);font-size:1.15rem;margin:0 0 .15rem;color:var(--text);}
.admin-card__meta{font-family:var(--font-mono);font-size:.78rem;color:var(--text-muted);margin:0;overflow-wrap:anywhere;}
.admin-card__mail{color:var(--accent);}
.status-badge{font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;padding:.28rem .6rem;border-radius:999px;border:1px solid var(--hairline);white-space:nowrap;color:var(--text-muted);align-self:flex-start;}
.status-badge--neu{color:var(--accent);border-color:var(--accent-line);}
.status-badge--angenommen,.status-badge--erledigt{color:var(--ok,oklch(72% .13 155));}
.status-badge--abgelehnt{color:var(--danger,oklch(64% .17 25));}
.status-badge--in_bearbeitung{color:var(--warn,oklch(80% .11 78));}
.status-controls{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:var(--space-sm,.75rem);}
.status-btn{font-family:var(--font-mono);font-size:.72rem;padding:.4rem .7rem;border-radius:8px;border:1px solid var(--hairline);background:var(--surface-2);color:var(--text-muted);cursor:pointer;transition:background .15s,color .15s,border-color .15s;}
.status-btn:hover{background:var(--surface-3);color:var(--text);}
.status-btn.is-current{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent);}
.status-btn:disabled{opacity:.5;cursor:wait;}
.admin-card__toggle{margin-top:var(--space-sm,.75rem);font-family:var(--font-mono);font-size:.75rem;color:var(--accent);background:none;border:none;padding:.2rem 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
.admin-card__body{margin-top:var(--space-md,1.25rem);display:grid;gap:var(--space-md,1.25rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));border-top:1px solid var(--hairline-soft);padding-top:var(--space-md,1.25rem);}
.admin-group__title{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.04em;font-size:.72rem;color:var(--accent);margin:0 0 .5rem;}
.admin-group--bank{background:var(--surface-2);border:1px solid var(--hairline);border-radius:var(--radius-md,10px);padding:.9rem 1rem;}
.admin-dl{display:grid;grid-template-columns:auto 1fr;gap:.3rem .9rem;margin:0;font-size:.9rem;}
.admin-dl dt{color:var(--text-faint);font-size:.82rem;}
.admin-dl dd{margin:0;color:var(--text-muted);overflow-wrap:anywhere;}
.admin-msg{color:var(--text-muted);white-space:pre-wrap;overflow-wrap:anywhere;margin:0;}
.admin-card__body[hidden]{display:none;}