/* ==========================================================
   MATTER EVENTS — gemeinsames Design-System
   Quelle: /events (Referenzdesign). Tokens hier zentral pflegen,
   alle Event-Seiten binden diese Datei ein.
   ========================================================== */
:root{
  --ink:#0A0A0A;
  --paper:#FFFFFF;
  --line:#0A0A0A;
  --line-soft:#D8D8D6;
  --stone:#6E6E6C;      /* sekundärer Text */
  --wein:#5B1A24;       /* Akzent: Wein-Kategorie */
  --error:#B3261E;
  --max-w:1180px;
  --max-w-narrow:520px;
}
.matter *{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body.matter{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Montserrat', Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex; flex-direction:column;
}
.matter h1, .matter h2, .matter h3, .matter .display{
  font-family:'Bebas Neue', Impact, sans-serif;
  letter-spacing:0.02em;
  font-weight:400;
  line-height:0.92;
  text-transform:uppercase;
  margin:0;
}
.matter a{color:inherit;}
.matter button{font-family:inherit;}
.matter img{display:block;max-width:100%;}
.matter .wrap{max-width:var(--max-w); margin:0 auto; padding:0 24px;}
.matter .wrap--narrow{max-width:var(--max-w-narrow);}

/* ── Header ── */
.matter header.site{ border-bottom:1px solid var(--line); padding:18px 0; }
.matter header.site .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.matter .brand{ display:flex; align-items:center; gap:14px; text-decoration:none; }
.matter .brand img{ height:36px; width:auto; }
.matter .brand-text{ font-family:'Bebas Neue', sans-serif; font-size:22px; letter-spacing:3px; }
.matter .brand small{
  display:block; font-family:'Montserrat', sans-serif; text-transform:none;
  letter-spacing:0; font-size:11px; color:var(--stone); margin-top:2px;
}

/* ── Footer ── */
.matter footer.site{border-top:1px solid var(--line); padding:32px 0; font-size:12px; color:var(--stone); margin-top:auto;}
.matter footer.site .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;}
.matter footer.site a{color:var(--stone); text-decoration:none; letter-spacing:0.04em;}
.matter footer.site a:hover{color:var(--ink);}
.matter footer.site .links{display:flex; gap:18px; flex-wrap:wrap;}

/* ── Tags ── */
.matter .tag{ font-size:10px; text-transform:uppercase; letter-spacing:0.1em; color:var(--paper); background:var(--ink); padding:3px 8px; display:inline-block; }
.matter .tag.wein{background:var(--wein);}

/* ── Buttons ── */
.matter .btn{
  display:inline-block; border:1px solid var(--ink); background:var(--paper); color:var(--ink);
  padding:13px 24px; font-family:'Montserrat',sans-serif; font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:0.1em; cursor:pointer; text-align:center;
  text-decoration:none; transition:background .15s ease, color .15s ease, opacity .15s ease;
}
.matter .btn:hover{background:var(--ink); color:var(--paper);}
.matter .btn-fill{background:var(--ink); color:var(--paper);}
.matter .btn-fill:hover{opacity:.85;}
.matter .btn-block{display:block; width:100%;}
.matter .btn-display{
  font-family:'Bebas Neue', sans-serif; font-size:20px; letter-spacing:0.08em;
  padding:16px 24px;
}
.matter .btn:disabled{opacity:.4; cursor:not-allowed;}
.matter .btn:disabled:hover{background:var(--paper); color:var(--ink);}
.matter .btn-fill:disabled:hover{background:var(--ink); color:var(--paper); opacity:.4;}

/* ── Formulare ── */
.matter .field-label{
  display:block; font-size:11px; font-weight:600; text-transform:uppercase;
  letter-spacing:0.08em; color:var(--stone); margin-bottom:6px;
}
.matter .form-group{margin-bottom:16px;}
.matter input[type="text"], .matter input[type="email"]{
  width:100%; background:var(--paper); border:1px solid var(--line); color:var(--ink);
  font-family:'Montserrat', sans-serif; font-size:15px; padding:13px 15px; outline:none;
  transition:border-color .15s ease;
}
.matter input[type="text"]:focus, .matter input[type="email"]:focus{border-color:var(--ink); outline:2px solid var(--ink); outline-offset:-2px;}
.matter input::placeholder{color:var(--line-soft);}

.matter .check-row{
  display:flex; align-items:flex-start; gap:12px; margin:16px 0 22px; cursor:pointer;
}
.matter .check-row input[type="checkbox"]{
  width:20px; min-width:20px; height:20px; margin-top:2px; cursor:pointer; accent-color:var(--ink);
}
.matter .check-row .check-text{ font-size:12px; color:var(--stone); line-height:1.6; }
.matter .check-row .check-text a{ color:var(--ink); text-decoration:underline; }
.matter .check-row .check-text strong{ color:var(--ink); }

/* ── Hinweis-/Callout-Box ── */
.matter .callout{
  background:var(--paper); border:1px solid var(--line-soft); border-left:3px solid var(--ink);
  padding:14px 16px; margin-top:20px; font-size:13px; color:var(--stone); line-height:1.6;
}
.matter .callout strong{ color:var(--ink); }
.matter .callout.wein{ border-left-color:var(--wein); }

/* ── Fehler / Status ── */
.matter .error-msg{
  background:#FBEAEA; border-left:3px solid var(--error);
  padding:12px 16px; font-size:13px; color:var(--error); margin-bottom:14px; display:none;
}
.matter .spinner-wrap{ display:none; text-align:center; padding:48px 0; }
.matter .spinner{
  width:34px; height:34px; border:2px solid var(--line-soft);
  border-top-color:var(--ink); border-radius:50%;
  animation:matter-spin .8s linear infinite; margin:0 auto 16px;
}
@keyframes matter-spin{ to{ transform:rotate(360deg); } }
.matter .spinner-text{ font-size:11px; color:var(--stone); letter-spacing:0.08em; text-transform:uppercase; }

.matter .result-box{
  background:var(--paper); border:1px solid var(--line); border-left:4px solid var(--ink);
  padding:32px 24px; text-align:center; display:none;
}
.matter .result-box h2{ font-size:28px; letter-spacing:0.04em; color:var(--ink); margin-bottom:10px; }
.matter .result-box p{ font-size:14px; color:var(--stone); line-height:1.7; }

/* ── Panels (früher: dunkle "section-block"-Kacheln) ── */
.matter .panel{ border:1px solid var(--line); padding:32px 28px; margin-bottom:24px; }
.matter .panel:last-child{ margin-bottom:0; }
.matter .section-header{ margin-bottom:24px; }
.matter .section-header p{ font-size:13px; color:var(--stone); line-height:1.5; margin-top:6px; }
.matter .section-intro{ font-size:12px; color:var(--stone); letter-spacing:0.08em; text-transform:uppercase; margin-bottom:12px; }

/* ── Badge (Datum/Meta-Kapsel) ── */
.matter .badge{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--ink); color:var(--paper);
  font-family:'Bebas Neue', sans-serif; font-size:14px; letter-spacing:0.1em; text-transform:uppercase;
  padding:8px 18px;
}

/* ── Auswahl-Kacheln (Interessen etc.) ── */
.matter .chip-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:24px; }
.matter .chip-item{
  display:flex; align-items:flex-start; gap:10px;
  border:1px solid var(--line-soft); padding:11px 12px; cursor:pointer; transition:border-color .15s ease;
}
.matter .chip-item:has(input:checked){ border-color:var(--ink); }
.matter .chip-item input[type="checkbox"]{ width:16px; min-width:16px; height:16px; margin:2px 0 0; cursor:pointer; accent-color:var(--ink); flex-shrink:0; }
.matter .chip-label{ font-size:11px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink); line-height:1.3; }

.matter .check-row.highlight input[type="checkbox"]{ outline:2px solid var(--error); outline-offset:1px; }

.matter .doi-hint{ margin-top:14px; font-size:11px; color:var(--stone); line-height:1.6; text-align:center; }

/* ── Admin-Zurück-Link (nur mit ?admin=1) ── */
.matter .admin-back{ display:none; text-align:center; padding:14px 24px 0; }
.matter .admin-back a{ font-size:11px; color:var(--stone); text-decoration:none; letter-spacing:0.06em; text-transform:uppercase; }
.matter .admin-back a:hover{ color:var(--ink); }

.matter :focus-visible{outline:2px solid var(--ink); outline-offset:2px;}
@media (prefers-reduced-motion: reduce){ .matter *{transition:none !important; scroll-behavior:auto !important;} }