/* ungeskriptet · Gästeportal
   Design nach stardive: minimalistisch schwarz auf weiß, mobile-first,
   Touch-Ziele >= 44px. Die Tailwind-Utilities von stardive sind hier als
   handgeschriebene Klassen nachgebaut — der Server hat kein npm, ein
   Build-Schritt wäre für ein Tool dieser Größe unverhältnismäßig. */

:root {
    --n50:  #fafafa;
    --n100: #f5f5f5;
    --n200: #e5e5e5;
    --n300: #d4d4d4;
    --n400: #a3a3a3;
    --n500: #737373;
    --n600: #525252;
    --n700: #404040;
    --n900: #171717;

    --green-50:  #f0fdf4;
    --green-100: #dcfce7;
    --green-200: #bbf7d0;
    --green-800: #166534;

    --red-50:  #fef2f2;
    --red-100: #fee2e2;
    --red-200: #fecaca;
    --red-700: #b91c1c;
    --red-800: #991b1b;

    --amber-50:  #fffbeb;
    --amber-100: #fef3c7;
    --amber-200: #fde68a;
    --amber-800: #92400e;

    --radius: 0.375rem;   /* rounded-md */
    --radius-lg: 0.5rem;  /* rounded-lg */
}

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    background: #fff;
    color: var(--n900);
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
a, button, [role='button'], summary { touch-action: manipulation; }

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 1.25rem; }
h2 { font-size: 1rem; }
p  { margin: 0 0 0.75rem; }
p:last-child { margin-bottom: 0; }

/* ---- Grundgerüst -------------------------------------------------------- */

.shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: 48rem;          /* max-w-3xl */
    margin: 0 auto;
}
.shell-wide { max-width: 64rem; }

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid var(--n200);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
}
.site-header .bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
}
.brand {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    text-decoration: none;
    white-space: nowrap;
}
.brand small {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--n500);
    letter-spacing: 0;
}
.site-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.875rem;
}
.site-nav a {
    color: var(--n600);
    text-decoration: none;
    white-space: nowrap;
}
.site-nav a:hover { color: var(--n900); }
.site-nav a[aria-current='page'] {
    color: var(--n900);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
}

main { flex: 1; padding: 1.5rem 1rem; }

.site-footer {
    padding: 1.5rem 1rem;
    text-align: center;
    font-size: 0.75rem;
    color: var(--n400);
}

.guest-shell {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding: 10vh 1rem 2.5rem;
}
.guest-inner { width: 100%; max-width: 34rem; }
.guest-inner-wide { max-width: 42rem; }

/* ---- Bedienelemente ----------------------------------------------------- */

.btn {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 0;
    border-radius: var(--radius);
    padding: 0.5rem 1rem;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.btn:focus-visible {
    outline: 2px solid var(--n900);
    outline-offset: 2px;
}
.btn:disabled { cursor: not-allowed; opacity: 0.4; }
.btn-primary { background: var(--n900); color: #fff; }
.btn-primary:hover { background: var(--n700); }
.btn-secondary {
    border: 1px solid var(--n300);
    background: #fff;
    color: var(--n900);
}
.btn-secondary:hover { background: var(--n100); }
.btn-danger {
    border: 1px solid var(--red-200);
    background: #fff;
    color: var(--red-700);
}
.btn-danger:hover { background: var(--red-50); }
.btn-sm { min-height: 36px; padding: 0.25rem 0.75rem; font-size: 0.8125rem; }
.btn-block { width: 100%; }

.link {
    color: var(--n500);
    font-size: 0.875rem;
    text-decoration: none;
}
.link:hover { color: var(--n900); text-decoration: underline; }

.input, select.input, textarea.input {
    display: block;
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--n300);
    border-radius: var(--radius);
    padding: 0.5rem 0.75rem;
    background: #fff;
    color: var(--n900);
    font: inherit;
    font-size: 1rem;
}
.input::placeholder { color: var(--n400); }
.input:focus {
    border-color: var(--n900);
    outline: none;
    box-shadow: 0 0 0 1px var(--n900);
}
textarea.input { min-height: 5rem; resize: vertical; }

.label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--n700);
}
.hint { font-size: 0.75rem; color: var(--n400); margin-top: 0.25rem; }

/* ---- Flächen ------------------------------------------------------------ */

.card {
    border: 1px solid var(--n200);
    border-radius: var(--radius-lg);
    background: #fff;
    padding: 1rem;
}
.card + .card { margin-top: 0.5rem; }
.card-muted { background: var(--n50); }
/* Kräftigerer Rahmen für Karten, die für sich stehen sollen — im Gastportal
   der Kasten, der die Sendung vorstellt. */
.card-framed { border-color: var(--n300); }

.badge {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}
.badge-neutral { background: var(--n100); color: var(--n700); }
.badge-green   { background: var(--green-100); color: var(--green-800); }
.badge-red     { background: var(--red-100);   color: var(--red-800); }
.badge-amber   { background: var(--amber-100); color: var(--amber-800); }

.alert {
    margin-bottom: 1rem;
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
}
.alert-success { border: 1px solid var(--green-200); background: var(--green-50); color: var(--green-800); }
.alert-error   { border: 1px solid var(--red-200);   background: var(--red-50);   color: var(--red-800); }
.alert-warning { border: 1px solid var(--amber-200); background: var(--amber-50); color: var(--amber-800); }
.alert-info    { border: 1px solid var(--n200);      background: var(--n50);      color: var(--n700); }

hr.rule { border: 0; border-top: 1px solid var(--n200); margin: 1.5rem 0; }

/* ---- Layout-Hilfen ------------------------------------------------------ */

.stack > * + * { margin-top: 1rem; }
.stack-sm > * + * { margin-top: 0.5rem; }
.stack-lg > * + * { margin-top: 1.5rem; }

.row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.row-start { align-items: flex-start; }
.cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.grow { min-width: 0; flex: 1; }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) {
    .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.section-title {
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--n500);
}

.muted { color: var(--n500); font-size: 0.875rem; }
.tiny  { color: var(--n400); font-size: 0.75rem; }
.strong { font-weight: 600; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8125rem;
    word-break: break-all;
}
.center { text-align: center; }
.nowrap { white-space: nowrap; }

/* Farbmarke links an Karten — bei stardive die Standortfarbe, hier der Status. */
.stripe {
    display: inline-block;
    width: 6px;
    flex-shrink: 0;
    align-self: stretch;
    min-height: 2.5rem;
    border-radius: 9999px;
    background: var(--n300);
}
.stripe-green { background: #22c55e; }
.stripe-amber { background: #f59e0b; }
.stripe-red   { background: #ef4444; }
.stripe-dark  { background: var(--n900); }

/* ---- Tabellen (Antwortmatrix, Postausgang) ------------------------------ */

.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--n200);
    border-radius: var(--radius-lg);
}
table.matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
table.matrix th,
table.matrix td {
    padding: 0.625rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--n200);
    vertical-align: middle;
}
table.matrix thead th {
    background: var(--n50);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--n600);
    white-space: nowrap;
}
table.matrix tbody tr:last-child td { border-bottom: 0; }
table.matrix td.cell { text-align: center; }
table.matrix .col-name { min-width: 11rem; }
table.matrix tr.is-final td { background: var(--green-50); }

.mark {
    display: inline-flex;
    width: 1.75rem;
    height: 1.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
}
.mark-yes   { background: var(--green-100); color: var(--green-800); }
.mark-maybe { background: var(--amber-100); color: var(--amber-800); }
.mark-no    { background: var(--red-100);   color: var(--red-800); }
.mark-none  { background: var(--n100);      color: var(--n400); }

/* ---- Terminauswahl im Gastportal ---------------------------------------- */

.slot {
    border: 1px solid var(--n200);
    border-radius: var(--radius-lg);
    padding: 0.875rem 1rem;
}
.slot + .slot { margin-top: 0.5rem; }
.slot-head { font-weight: 500; }
.slot.chosen { border-color: var(--n900); }

/* Segmentierte Auswahl Ja / Vielleicht / Nein */
.choice {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.375rem;
    margin-top: 0.625rem;
}
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice label {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--n300);
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--n600);
    cursor: pointer;
    user-select: none;
}
.choice label:hover { background: var(--n50); }
.choice input:focus-visible + label { outline: 2px solid var(--n900); outline-offset: 2px; }
.choice input:checked + label.c-yes {
    background: var(--green-100); border-color: var(--green-200); color: var(--green-800);
}
.choice input:checked + label.c-maybe {
    background: var(--amber-100); border-color: var(--amber-200); color: var(--amber-800);
}
.choice input:checked + label.c-no {
    background: var(--red-100); border-color: var(--red-200); color: var(--red-800);
}

/* Zusammenklappbarer Bereich (Absage, Gefahrenzone) */
details.disclosure { border-top: 1px solid var(--n200); padding-top: 1rem; }
details.disclosure > summary {
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--n500);
    list-style: none;
}
details.disclosure > summary::-webkit-details-marker { display: none; }
details.disclosure > summary::before { content: '▸ '; }
details.disclosure[open] > summary::before { content: '▾ '; }
details.disclosure > summary:hover { color: var(--n900); }
details.disclosure > div { margin-top: 0.75rem; }

/* Kopierbares Feld (Gast-Links im Backend) */
.copyfield {
    display: flex;
    gap: 0.375rem;
    align-items: stretch;
}
.copyfield input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--n200);
    border-radius: var(--radius);
    padding: 0.375rem 0.5rem;
    background: var(--n50);
    color: var(--n600);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
}

.empty {
    border: 1px dashed var(--n300);
    border-radius: var(--radius-lg);
    padding: 2rem 1rem;
    text-align: center;
    color: var(--n500);
    font-size: 0.875rem;
}

/* Chronik */
.timeline { list-style: none; margin: 0; padding: 0; font-size: 0.8125rem; }
.timeline li {
    display: flex;
    gap: 0.75rem;
    padding: 0.375rem 0;
    border-bottom: 1px solid var(--n100);
}
.timeline li:last-child { border-bottom: 0; }
.timeline time { flex-shrink: 0; color: var(--n400); width: 8.5rem; }