/* ── Fonts ──────────────────────────────────────────────── */
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    font-display: swap;
    src: local('IBM Plex Sans'), url('fonts/ibm-plex-sans-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 500;
    font-stretch: 100%;
    font-display: swap;
    src: local('IBM Plex Sans'), url('fonts/ibm-plex-sans-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 600;
    font-stretch: 100%;
    font-display: swap;
    src: local('IBM Plex Sans'), url('fonts/ibm-plex-sans-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 700;
    font-stretch: 100%;
    font-display: swap;
    src: local('IBM Plex Sans'), url('fonts/ibm-plex-sans-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: local('Rajdhani'), url('fonts/rajdhani-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Rajdhani'), url('fonts/rajdhani-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Tokens ─────────────────────────────────────────────── */
:root {
    /* Type scale — ganzzahlige px bei Default-Root (1rem = 16px), Basis 17px */
    --fs-2xs:  0.75rem;     /* 12px — Caps-Labels, Tabellen-Header */
    --fs-xs:   0.8125rem;   /* 13px — Meta, Chrome, Footer */
    --fs-sm:   0.9375rem;   /* 15px — UI-Chrome (Nav, Buttons, Form), Karten-Body */
    --fs-base: 1.0625rem;   /* 17px — Fließtext */
    --fs-xl:   1.375rem;    /* 22px — Abschnitts-Überschriften */
    --fs-2xl:  clamp(1.75rem, 4vw, 2.5rem);    /* h1, h2 */

    /* Line-Heights */
    --lh-tight:    1.15;    /* h1, h2 (Rajdhani display) */
    --lh-snug:     1.3;     /* h3, kompakte Chrome */
    --lh-base:     1.55;    /* Fließtext, Lead-Absätze */

    --bg:           #f8f9fa;
    --bg-subtle:    #edeef0;
    --border:       #d8d9db;
    --text:         #1a1714;
    --text-muted:   #6e6860;
    --accent:       #2563eb;
    --accent-hover: #1d4ed8;
    --accent2:      #c86809;
    --logo-de:      #7a7a7a;
    --logo-color:   #c86809;
    --bg-stronger:  #ecedef;
}

html[data-theme="dark"] {
    --bg:           #100f0d;
    --bg-subtle:    #1a1815;
    --border:       #2c2924;
    --text:         #ede8e0;
    --text-muted:   #8c8278;
    --accent:       #82b4ff;
    --accent-hover: #a8ccff;
    --accent2:      #fa9033;
    --logo-de:      #a8a8a8;
    --logo-color:   #fa9033;
    --bg-stronger:  #252220;
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: var(--fs-base);
    background: var(--bg);
    color: var(--text);
    line-height: var(--lh-base);
    transition: background 0.2s, color 0.2s;
}

a { color: var(--accent); }
a:hover { color: var(--accent-hover); }

/* Dot grid */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image: radial-gradient(circle, var(--text) 0.5px, transparent 0.5px);
    background-size: 24px 24px;
    opacity: 0.06;
    pointer-events: none;
    z-index: 9999;
}

h1, h2 {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    line-height: var(--lh-tight);
    font-size: var(--fs-2xl);
    letter-spacing: -0.03em;
    margin-bottom: 0.75rem;
}

h3 {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    line-height: var(--lh-snug);
    font-size: var(--fs-xl);
    letter-spacing: -0.02em;
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
}

/* ── Nav ─────────────────────────────────────────────────── */
nav {
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: color-mix(in srgb, var(--bg-stronger) 80%, transparent);
}

.nav-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 1.5rem;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 1.75rem;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    list-style: none;
}

.nav-links a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: var(--fs-sm);
    font-weight: 500;
    transition: color 0.15s;
}

.nav-links a:hover { color: var(--text); }

#themeBtn { color: var(--text-muted); text-decoration: none; }
#themeBtn:hover { color: var(--text); }
.theme-label { display: none; }
@media (max-width: 620px) {
    .theme-icon { display: none; }
    .theme-label { display: inline; }
}

.hamburger {
    display: none;
    background: none;
    border: none;
    color: var(--text);
    cursor: pointer;
    padding: 0.25rem;
    font-size: var(--fs-xl);
    line-height: 1;
}

@media (max-width: 620px) {
    .nav-links {
        display: none;
        position: absolute;
        top: 56px; left: 0; right: 0;
        background: var(--bg);
        border-bottom: 1px solid var(--border);
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem 1.5rem 1.5rem;
        gap: 1rem;
    }
    .nav-links.open { display: flex; }
    .hamburger { display: block; }
}

/* Brand: code1-Logo + Trenner + "workshops"-Suffix. Beide Hälften sind
   eigene Links (Logo → code1.de, Suffix → wspy-Home). */
.brand {
    display: inline-flex;
    align-items: flex-end;
    gap: 1.2rem;
    text-decoration: none;
}
.brand-logo {
    display: inline-flex;
    align-items: flex-end;
    text-decoration: none;
}
.brand-logo svg {
    height: 1.3rem;
    width: auto;
    display: block;
}
.brand-logo .logo-frame {
    fill: none;
    stroke: var(--logo-color);
    stroke-width: 1.1;
    stroke-linejoin: round;
}
.brand-logo .logo-word { fill: var(--logo-color); }
.brand-logo .logo-de   { fill: var(--logo-de); }
/* The "code1.de" wordmark's letter baseline sits about 2 px above the SVG's
   bottom edge. flex-end bottom-aligns the boxes; we then translate the text
   downward so its baseline visually coincides with the wordmark's. */
.brand-sub {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: 1.15rem;
    line-height: 1;
    color: var(--text-muted);
    letter-spacing: 0.01em;
    text-decoration: none;
    transform: translateY(0.13rem);
}
.brand-sub:hover { color: var(--accent2); }

/* Logout button styled to match other nav links */
.nav-logout {
    display: inline;
    margin: 0;
    padding: 0;
}
.nav-logout button {
    background: none;
    border: none;
    padding: 0;
    color: var(--text-muted);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s;
}
.nav-logout button:hover {
    color: var(--text);
}

/* ── Layout helpers ──────────────────────────────────────── */
.wrap {
    max-width: 960px;
    margin: 0 auto;
    padding: 4.5rem 1.5rem;
}

.wrap--narrow {
    max-width: 720px;
    padding: 4rem 1.5rem;
}

/* Direct sibling <p>s inside .wrap need their own spacing — the global
   reset zeroes default paragraph margins. */
.wrap > p + p { margin-top: 1rem; }

/* Page eyebrow — small caps tag above the h1. */
.label {
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent2);
    margin-bottom: 0.75rem;
}

.intro {
    color: var(--text-muted);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    max-width: 52ch;
    margin-bottom: 3rem;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
    display: inline-block;
    padding: 0.65rem 1.3rem;
    border-radius: 3px;
    font-size: var(--fs-sm);
    font-weight: 600;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: all 0.15s;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: transparent; color: var(--accent); outline: 3px solid var(--accent); outline-offset: -3px; }

/* ── Forms ───────────────────────────────────────────────── */
form { display: flex; flex-direction: column; gap: 1rem; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

@media (max-width: 480px) { .form-row { grid-template-columns: 1fr; } }

label {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}

input, textarea, select {
    width: 100%;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 0.65rem 0.875rem;
    font-size: var(--fs-sm);
    color: var(--text);
    font-family: inherit;
    appearance: none;
    transition: border-color 0.15s;
}

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--accent);
}

input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 0.6; }
textarea { resize: vertical; min-height: 110px; }

/* Forms: stack labels above inputs. The generic label default is 13px /
   weight 500 — we override to 15px / regular for readability on form-
   heavy workshop pages. */
form p {
    margin-bottom: 1rem;
}
form label {
    font-size: var(--fs-sm);
    font-weight: 400;
    color: var(--text);
}
form p > label,
form > p > label,
form div > label {
    display: block;
    margin-bottom: 0.4rem;
}
/* Required-field marker: append red asterisk via <label class="req">. */
label.req::after {
    content: " *";
    color: #dc2626;
    font-weight: 600;
}
/* Inline checkbox + text on the same baseline. The text uses a grid to
   sit at the top of the checkbox row (which is small), wrapping if long. */
.check-row {
    margin-bottom: 1rem;
}
.check-row label {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.55rem;
    margin: 0;
    cursor: pointer;
}
.check-row label input[type="checkbox"] {
    margin-top: 0.3em;
}
.check-row label > span {
    line-height: var(--lh-snug);
}

/* Checkboxes and radios need their native rendering back — the input rule
   above applies `appearance: none` plus padding/background to all inputs,
   which makes ticks invisible and unclickable in the usual way. */
input[type="checkbox"],
input[type="radio"] {
    width: auto;
    height: auto;
    appearance: auto;
    -webkit-appearance: auto;
    background: none;
    border: none;
    padding: 0;
    margin: 0 0.4rem 0 0;
    vertical-align: middle;
}

/* Buttons: default to btn-primary look for any plain <button> inside content */
main button[type="submit"] {
    display: inline-block;
    padding: 0.65rem 1.3rem;
    border-radius: 3px;
    font-size: var(--fs-sm);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: var(--accent);
    color: #fff;
    transition: all 0.15s;
}
main button[type="submit"]:hover {
    background: transparent;
    color: var(--accent);
    outline: 3px solid var(--accent);
    outline-offset: -3px;
}

/* Read-only "field": looks like an input (same border, padding, font) but
   without the subtle grey background — used for values the user can see but
   not edit (e.g. the email address on the profile page). */
.readonly-field {
    width: 100%;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 0.65rem 0.875rem;
    font-size: var(--fs-sm);
    color: var(--text);
    box-sizing: border-box;
}

/* Generic form field wrapper, used where <p> would be invalid (e.g. wrapping
   a block-level child). Matches the spacing of `form p`. */
.field {
    margin-bottom: 1rem;
}

/* Inline help-text next to a label (smaller, muted). */
.help-inline {
    color: var(--text-muted);
    font-weight: 400;
    margin-left: 0.4rem;
    font-size: var(--fs-xs);
}

/* Field-level validation errors */
.error {
    display: inline-block;
    color: #dc2626;
    font-size: var(--fs-xs);
    margin-top: 0.25rem;
}
.errors {
    list-style: none;
    padding: 0.75rem 1rem;
    border-radius: 3px;
    border-left: 3px solid #dc2626;
    background: var(--bg-subtle);
    margin-bottom: 1rem;
    color: #dc2626;
    font-size: var(--fs-sm);
}

/* ── Tables ──────────────────────────────────────────────── */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0 2rem 0;
    font-size: var(--fs-base);
}
thead th {
    text-align: left;
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
}
tbody td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}
tbody tr:hover {
    background: var(--bg-subtle);
}
table a {
    color: var(--accent);
}
table a:hover {
    color: var(--accent-hover);
}

/* ── Flash messages ──────────────────────────────────────── */
.messages-wrap {
    padding-top: 1.5rem;
    padding-bottom: 0;
}
.messages {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.msg {
    padding: 0.75rem 1rem;
    border-radius: 3px;
    border-left: 3px solid var(--accent);
    background: var(--bg-subtle);
    font-size: var(--fs-sm);
}
.msg-success { border-left-color: #16a34a; }
.msg-error { border-left-color: #dc2626; }
.msg-warning { border-left-color: var(--accent2); }

/* Hint blocks (DSGVO notes etc.) */
.hint {
    background: var(--bg-subtle);
    border-left: 3px solid var(--accent2);
    padding: 0.85rem 1rem;
    margin: 1rem 0 1.5rem;
    font-size: var(--fs-base);
    color: var(--text);
    border-radius: 0 3px 3px 0;
}

/* ── Footer ──────────────────────────────────────────────── */
footer {
    border-top: 1px solid var(--border);
    padding: 1.75rem 1.5rem;
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

footer a { color: var(--text-muted); text-decoration: none; transition: color 0.15s; }
footer a:hover { color: var(--text); }

/* ── Content (Impressum, Datenschutz) ────────────────────── */
.content h2 {
    font-size: var(--fs-xl);
    font-weight: 600;
    line-height: var(--lh-snug);
    letter-spacing: -0.02em;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

.content p {
    margin-bottom: 1.25rem;
    line-height: var(--lh-base);
}

.content a { color: var(--accent); }
.content a:hover { color: var(--accent-hover); }

/* ── Workshop-Home: header row (h1 left, gear-icon flush right) ── */
.page-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.page-header h1 {
    margin: 0;
    flex: 1;
    min-width: 0;
}
.settings-toggle {
    margin-left: auto;
    background: none;
    border: none;
    padding: 0.3rem;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    line-height: 0;
    transition: color 0.15s, transform 0.2s ease;
    border-radius: 3px;
}
.settings-toggle:hover {
    color: var(--accent);
}
.settings-toggle[aria-expanded="true"] {
    color: var(--accent);
    transform: rotate(30deg);
}
.settings-toggle .gear {
    width: 1.4rem;
    height: 1.4rem;
    display: block;
}

/* Settings panel (collapsible) — same border style as the expanded files row. */
.settings-panel {
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1rem 1.25rem;
    margin: 1rem 0 1.5rem;
}
.settings-panel > h3:first-child {
    margin-top: 0;
}

/* Self row — keep the bold name + "(du)" marker; no background highlight. */
.row-self small {
    color: var(--text-muted);
    font-weight: 400;
}

/* ── Files column in the participants table ──────────────── */
/* One file per line in the participants table file column. */
.file-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.file-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.file-meta {
    color: var(--text-muted);
    font-size: var(--fs-xs);
    margin-left: auto;
}

/* Files column: just a count + a chevron toggle. Clicking the toggle
   reveals the next <tr class="files-row"> via JS (see main.js). The
   files row spans all three columns and shows the full file list. */
.files-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--accent);
    cursor: pointer;
    line-height: 1.2;
}
.files-toggle:hover {
    color: var(--accent-hover);
}
.files-toggle .chevron {
    transition: transform 0.15s ease;
    display: block;
}
.files-toggle[aria-expanded="true"] .chevron {
    transform: rotate(180deg);
}
.files-count--empty {
    color: var(--text-muted);
}
.files-row > td {
    padding-top: 0.6rem;
    padding-bottom: 0.85rem;
}
.files-row > td > .file-list {
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 0.6rem 0.85rem;
}

/* Inline delete (✕) button shown next to own files. */
.inline-delete {
    display: inline;
    margin: 0;
    padding: 0;
}
/* Override the default primary-button styling for inline icon-buttons. */
main button[type="submit"].icon-delete {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    transition: color 0.15s;
    outline: none;
}
main button[type="submit"].icon-delete:hover {
    background: transparent;
    color: #dc2626;
    outline: none;
}
.icon-delete svg {
    width: 1em;
    height: 1em;
    display: block;
}

/* Inline "Datei hochladen" pill in the self row of the participants table. */
.pill-upload {
    display: inline-block;
    margin-top: 0.4rem;
    padding: 0.2rem 0.7rem;
    border: 1px solid var(--accent);
    border-radius: 999px;
    color: var(--accent);
    text-decoration: none;
    font-size: var(--fs-xs);
    font-weight: 500;
    line-height: 1.4;
    transition: background 0.15s, color 0.15s;
}
.pill-upload:hover {
    background: var(--accent);
    color: #fff;
}

/* Back-link am Ende einer Unterseite — wie ein normaler Body-Link, kein
   Trennstrich darüber. */
.back-nav {
    display: inline-block;
    margin-top: 2.5rem;
    font-size: var(--fs-sm);
}

/* Status pill (workshop phase). Sits inline after the h1. */
.status-pill {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    background: var(--bg-stronger);
    color: var(--text-muted);
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: 0;
    vertical-align: middle;
    margin-left: 0.6rem;
}

/* Honeypot field: off-screen rather than display:none, so naive bots filling
   visible inputs still see it. aria-hidden + tabindex="-1" keep keyboard and
   screen-reader users from interacting. */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}