:root {
    color-scheme: light;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.5;
    background: #f4f6f8;
    color: #17202a;
}

* { box-sizing: border-box; }

body { margin: 0; background: #f4f6f8; }

.container {
    width: min(100% - 32px, 980px);
    margin: 0 auto;
    padding: 32px 0 48px;
}

.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.eyebrow {
    margin: 0 0 4px;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .75rem;
    font-weight: 700;
    color: #5d6d7e;
}

h1, h2 { line-height: 1.2; }
h1 { margin: 0; font-size: clamp(1.7rem, 4vw, 2.5rem); }
h2 { margin-top: 0; font-size: 1.25rem; }

.home-link {
    text-decoration: none;
    color: #1f5ea8;
    font-weight: 700;
}

.grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.card, .info-card {
    background: #fff;
    border: 1px solid #dde3ea;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(23, 32, 42, .06);
    padding: 24px;
}

.info-card { margin-top: 20px; }
.full-width { width: 100%; }

label {
    display: block;
    margin: 18px 0 7px;
    font-weight: 700;
}

input[type="text"] {
    width: 100%;
    min-height: 46px;
    padding: 11px 13px;
    border: 1px solid #b7c2ce;
    border-radius: 10px;
    background: #fff;
    color: #17202a;
    font: inherit;
}

input[type="text"]:focus {
    outline: 3px solid rgba(31, 94, 168, .15);
    border-color: #1f5ea8;
}

button {
    margin-top: 20px;
    min-height: 46px;
    width: 100%;
    border: 0;
    border-radius: 10px;
    padding: 11px 16px;
    background: #1f5ea8;
    color: #fff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

button:hover { filter: brightness(.95); }

.muted { color: #5d6d7e; }

.alert {
    border-radius: 10px;
    padding: 12px 14px;
    margin: 0 0 20px;
    border: 1px solid transparent;
}

.alert.success { background: #edf8f0; border-color: #b9dfc3; color: #1d6232; }
.alert.error { background: #fff0f0; border-color: #efb8b8; color: #8c2525; }
.alert.neutral { background: #f1f4f7; border-color: #d6dde4; color: #44515e; }

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    word-break: break-word;
}

dl { margin: 0; }
dl div { display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding: 7px 0; }
dt { font-weight: 700; }
dd { margin: 0; }

.results { display: grid; gap: 14px; }
.result-item { border: 1px solid #e0e5ea; border-radius: 12px; padding: 16px; }
.result-meta { display: flex; justify-content: space-between; gap: 12px; font-size: .85rem; color: #65717d; margin-bottom: 10px; }
.value-box {
    padding: 13px 14px;
    border-radius: 9px;
    background: #f6f8fa;
    border: 1px solid #e1e6eb;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.footer { margin-top: 28px; text-align: center; color: #71808f; font-size: .9rem; }

@media (max-width: 720px) {
    .container { width: min(100% - 22px, 980px); padding-top: 20px; }
    .grid { grid-template-columns: 1fr; }
    .card, .info-card { padding: 18px; border-radius: 13px; }
    .app-header { align-items: flex-start; flex-direction: column; }
    .result-meta { flex-direction: column; gap: 3px; }
}

/* Dateiimport */
.section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.template-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.template-links a,
.button-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 9px 13px;
    border-radius: 9px;
    background: #1f5ea8;
    color: #fff;
    text-decoration: none;
    font-weight: 750;
}

.button-link.secondary { background: #5d6d7e; }

.import-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
    gap: 28px;
    align-items: start;
    margin-top: 12px;
}

.mini-table {
    display: grid;
    grid-template-columns: minmax(120px, .7fr) minmax(220px, 1.3fr);
    border: 1px solid #dce3ea;
    border-radius: 10px;
    overflow: hidden;
    margin: 12px 0;
}

.mini-table > * {
    padding: 10px 12px;
    border-bottom: 1px solid #e5e9ee;
}

.mini-table > :nth-child(odd) { border-right: 1px solid #e5e9ee; }
.mini-table > :nth-last-child(-n+2) { border-bottom: 0; }
.mini-table > span { font-weight: 800; background: #f6f8fa; }

.upload-form {
    padding: 18px;
    border: 1px solid #dce3ea;
    border-radius: 12px;
    background: #f8fafc;
}

.upload-form label { margin-top: 0; }

input[type="file"] {
    width: 100%;
    padding: 11px;
    border: 1px solid #b7c2ce;
    border-radius: 10px;
    background: #fff;
    color: #17202a;
    font: inherit;
}

.file-note,
.hint {
    color: #65717d;
    font-size: .92rem;
}

.import-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0;
}

.import-summary > div {
    padding: 16px;
    border: 1px solid #dce3ea;
    border-radius: 12px;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.import-summary strong { font-size: 1.3rem; }
.import-summary span { color: #65717d; font-size: .9rem; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 12px; border-bottom: 1px solid #e2e7ec; text-align: left; vertical-align: top; }
th { background: #f6f8fa; }
.actions { margin-top: 20px; }

@media (max-width: 720px) {
    .section-heading { flex-direction: column; }
    .import-layout { grid-template-columns: 1fr; gap: 18px; }
    .mini-table { grid-template-columns: minmax(90px, .7fr) minmax(0, 1.3fr); }
    .import-summary { grid-template-columns: 1fr; }
}

/* Erweiterte Zugangsdaten-Felder */
.required { color: #9b2c2c; }

input[type="url"],
input[type="email"] {
    width: 100%;
    min-height: 46px;
    padding: 11px 13px;
    border: 1px solid #b7c2ce;
    border-radius: 10px;
    background: #fff;
    color: #17202a;
    font: inherit;
}

input[type="url"]:focus,
input[type="email"]:focus {
    outline: 3px solid rgba(31, 94, 168, .15);
    border-color: #1f5ea8;
}

.result-details {
    display: grid;
    gap: 12px;
}

.result-details > div {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 0;
}

.field-box {
    padding: 11px 13px;
    border-radius: 9px;
    background: #f6f8fa;
    border: 1px solid #e1e6eb;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.small-link {
    display: inline-block;
    margin-top: 6px;
    color: #1f5ea8;
    font-weight: 700;
    text-decoration: none;
}

.small-link:hover { text-decoration: underline; }

.mini-table.five-cols {
    grid-template-columns: 1fr 1.4fr 1.35fr 1.1fr 1.45fr;
    overflow-x: auto;
    min-width: 760px;
}

.mini-table.five-cols > * {
    border-right: 1px solid #e5e9ee;
}

.mini-table.five-cols > :nth-child(5n) {
    border-right: 0;
}

.mini-table.five-cols > :nth-last-child(-n+5) {
    border-bottom: 0;
}

@media (max-width: 720px) {
    .result-details > div {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .import-layout > div:first-child {
        overflow-x: auto;
    }
}

/* Version 1.3: Suchergebnisse immer einzeilig */
.results-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #dfe5eb;
    border-radius: 12px;
    background: #fff;
}

.results-table {
    min-width: 980px;
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

.results-table th,
.results-table td {
    padding: 12px 14px;
    border-bottom: 1px solid #e5e9ee;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

.results-table th {
    background: #f6f8fa;
    font-size: .9rem;
    font-weight: 800;
}

.results-table tbody tr:last-child td {
    border-bottom: 0;
}

.results-table tbody tr:hover {
    background: #fafbfd;
}

.results-table .id-cell,
.results-table .date-cell {
    color: #65717d;
}

.results-table .value-cell {
    min-width: 220px;
}

.single-line {
    display: inline-block;
    white-space: nowrap;
    line-height: 1.35;
}

.monospace {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.result-link {
    color: #1f5ea8;
    font-weight: 700;
    text-decoration: none;
}

.result-link:hover {
    text-decoration: underline;
}

.empty-value {
    color: #97a3af;
}

.result-error-row td {
    color: #8c2525;
    background: #fff5f5;
}

@media (max-width: 720px) {
    .results-table-wrap {
        -webkit-overflow-scrolling: touch;
    }
}