/* VFC Kursportal – ergänzt /css/main.css der Site (research R-01). Breakpoint wie die Site: 640px. */

@font-face {
    font-family: 'Open Sans';
    src: url('/fonts/OpenSans-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Open Sans';
    src: url('/fonts/OpenSans-Italic-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: 300 800;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Raleway';
    src: url('/fonts/Raleway-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { overflow-wrap: anywhere; }

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 2000;
    background: #1a1a1a; color: #fff; padding: 8px 16px;
}
.skip-link:focus { left: 8px; top: 8px; }

:focus-visible {
    outline: 3px solid #1a1a1a;
    outline-offset: 2px;
}

.portal-logo { flex-shrink: 0; line-height: 0; }
.portal-logo img { height: 52px; width: auto; display: block; }

/* Mobilmenü per <details> (kein JS) */
.portal-menu { display: none; position: relative; }
.portal-menu > summary {
    list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 5px;
    padding: 10px; min-width: 44px; min-height: 44px; justify-content: center;
}
.portal-menu > summary::-webkit-details-marker { display: none; }
.portal-menu > summary span { display: block; width: 24px; height: 2px; background: var(--text, #333); border-radius: 2px; }
.portal-menu nav {
    display: block; position: absolute; right: 0; top: 100%;
    background: #fff; box-shadow: 0 4px 10px rgba(0,0,0,.1); min-width: 220px; z-index: 1000;
}
.portal-menu nav ul { list-style: none; margin: 0; padding: 8px 0; display: block; }
.portal-menu nav a { display: block; padding: 12px 20px; color: var(--text, #333); font-weight: 600; }

/* Portal-Leiste unter dem Site-Header */
.portal-bar { background: var(--bg-light, #f5f5f5); border-bottom: 1px solid var(--border, #e0e0e0); }
.portal-bar-inner {
    max-width: 1200px; margin: 0 auto; padding: 8px 24px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px;
}
.portal-title { font-family: 'Raleway', sans-serif; }
.portal-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; }
.portal-links a, .link-button { font-size: 14px; font-weight: 600; }
.inline-form { display: inline; margin: 0; }
.link-button {
    background: none; border: 0; padding: 0; color: inherit; cursor: pointer;
    font-family: inherit; text-decoration: underline;
}

.portal-main { max-width: 960px; margin: 0 auto; padding: 32px 24px 48px; min-height: 50vh; }
.portal-main h1 { font-family: 'Raleway', sans-serif; font-size: 28px; margin: 0 0 16px; }
.portal-main h2 { font-family: 'Raleway', sans-serif; font-size: 21px; margin: 32px 0 12px; }
.portal-main p { margin: 0 0 12px; }

/* Meldungen */
.flash, .form-error, .notice {
    padding: 12px 16px; border-radius: 4px; margin: 0 0 16px; border-left: 4px solid;
}
.flash-success { background: #eef6e6; border-color: #5a8f00; }
.flash-info, .notice { background: #eef3f8; border-color: #3b6b99; }
.flash-error, .form-error { background: #fbeaea; border-color: #b00020; }

/* Formulare */
form.stack { max-width: 560px; }
.field { margin: 0 0 16px; }
.field label { display: block; font-weight: 600; margin: 0 0 4px; }
.field input[type=text], .field input[type=email], .field input[type=password],
.field input[type=number], .field input[type=date], .field input[type=url],
.field input[type=search], .field select, .field textarea {
    width: 100%; padding: 10px 12px; font: inherit; font-size: 16px;
    border: 1px solid #767676; border-radius: 4px; background: #fff; color: #222;
}
.field textarea { min-height: 140px; resize: vertical; }
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: #b00020; border-width: 2px; }
.field-error { color: #b00020; font-size: 14px; margin: 4px 0 0; }
.field-hint { color: #555; font-size: 14px; margin: 4px 0 0; }
.field-checkbox { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: start; }
.field-checkbox input { width: 20px; height: 20px; margin: 2px 0 0; }
.field-checkbox label { font-weight: 400; margin: 0; }
.field-checkbox .field-error { grid-column: 1 / -1; }
fieldset { border: 1px solid var(--border, #e0e0e0); border-radius: 4px; padding: 12px 16px; margin: 0 0 16px; }
legend { font-weight: 600; padding: 0 4px; }

.btn, button.btn {
    display: inline-block; padding: 10px 20px; min-height: 44px;
    background: var(--primary, #d1dd00); color: #1a1a1a; border: 2px solid var(--primary-dark, #a0a800);
    border-radius: 4px; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--primary-dark, #a0a800); text-decoration: none; }
.btn-secondary { background: #fff; border-color: #767676; }
.btn-danger { background: #b00020; border-color: #7a0016; color: #fff; }
.btn-small { padding: 6px 12px; min-height: 36px; font-size: 14px; }
.btn:disabled, .btn[aria-disabled=true] { opacity: .55; cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 16px 0; }

/* Kurskarten */
.course-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.course-card { border: 1px solid var(--border, #e0e0e0); border-radius: 6px; padding: 16px 20px; background: #fff; }
.course-card h2 { margin: 0 0 8px; }
.badge {
    display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 13px; font-weight: 600;
    background: #eee; color: #222;
}
.badge-ok { background: #e3f1d0; }
.badge-wait { background: #fdf0d0; }
.badge-closed { background: #eee; }
.meta { color: #555; font-size: 14px; }

/* Tabellen */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 15px; }
table.data th, table.data td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border, #e0e0e0); vertical-align: top; }
table.data th { background: var(--bg-light, #f5f5f5); }
tr.suggested { background: #f3f8e6; }

.copy-field { display: flex; gap: 8px; flex-wrap: wrap; }
.copy-field input { flex: 1 1 260px; }
[data-copy-target] { display: none; }
.js [data-copy-target] { display: inline-block; }

dl.data-list { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; }
dl.data-list dt { font-weight: 600; }
dl.data-list dd { margin: 0; }

.pagination { display: flex; gap: 12px; list-style: none; padding: 0; }

@media (max-width: 640px) {
    .portal-menu { display: block; }
    .portal-main { padding: 20px 16px 40px; }
    .portal-bar-inner { padding: 8px 16px; }
    .header-inner { padding: 0 16px; }

    /* Tabellen als Karten */
    table.data thead { display: none; }
    table.data, table.data tbody, table.data tr, table.data td { display: block; width: 100%; }
    table.data tr { border: 1px solid var(--border, #e0e0e0); border-radius: 4px; margin: 0 0 12px; padding: 4px 0; }
    table.data td { border: 0; padding: 4px 12px; }
    table.data td[data-label]::before { content: attr(data-label) ': '; font-weight: 600; }
    dl.data-list { grid-template-columns: 1fr; }
    dl.data-list dd { margin: 0 0 8px; }
}