/* EHT Praxispartner-Abfrage – Stylesheet
   Übernimmt die Marken-Tokens direkt aus dem Live-CSS der TYPO3-Homepage
   (eht.medicalinterest.de, eht-startseite.css, Stand 11.09.2026):
   Mint/Korallenrot/Anthrazit, eckige Kanten, "Untitled Sans". */

:root {
    --eht-mint:       #96F0EB;
    --eht-coral:      #E15E5B;
    --eht-anthracite: #161616;
    --eht-anthr-line: #3A3A3A;
    --eht-white:      #FFFFFF;
    --eht-grey-050:   #F3F3F3;
    --eht-grey-100:   #E2E2E2;
    --eht-grey-300:   #C6C6C6;
    --eht-grey-600:   #6E6E6E;

    --eht-mint-tint:  #E9FBFA;
    --eht-coral-tint: #FBEAE9;

    --eht-font:   "Untitled Sans", Arial, Helvetica, sans-serif;
    --radius:     0;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--eht-white);
    color: var(--eht-anthracite);
    font-family: var(--eht-font);
    font-size: 1.0625rem;
    line-height: 1.6;
}

a { color: var(--eht-coral); }
a:hover { color: var(--eht-anthracite); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 3px solid var(--eht-coral);
    outline-offset: 2px;
}

.wrap { max-width: 960px; margin: 0 auto; padding: 0 20px; }

/* --- Kopf --- */
.topbar {
    background: var(--eht-white);
    border-bottom: 1px solid var(--eht-grey-100);
}
.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 72px;
}
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}
.brand:hover .brand-word { color: var(--eht-anthracite); }
.brand-mark {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    background: var(--eht-mint);
    transform: rotate(-8deg);
}
.brand-word {
    font-weight: 500;
    font-size: 1.1rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--eht-anthracite);
}
.wordmark {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.3;
}
.wm-hm  { font-size: .78rem; color: var(--eht-grey-600); }
.wm-muc {
    font-size: .85rem;
    font-weight: 500;
    color: var(--eht-coral);
    letter-spacing: 1px;
    text-transform: uppercase;
}
.backlink-row { padding: 6px 0 10px; }
.backlink {
    font-size: .82rem;
    color: var(--eht-grey-600);
    text-decoration: none;
}
.backlink:hover { color: var(--eht-coral); }

main.wrap { padding-top: 28px; padding-bottom: 48px; }

/* --- Fuß --- */
footer.wrap {
    background: var(--eht-anthracite);
    color: var(--eht-white);
    max-width: none;
    margin-top: 40px;
    padding: 24px 20px 28px;
    font-size: .85rem;
}
footer.wrap > * { max-width: 960px; margin-inline: auto; }
footer.wrap a { color: var(--eht-white); text-decoration: underline; }
footer.wrap a:hover { color: var(--eht-mint); }
.wm-foot { color: var(--eht-mint); font-weight: 500; letter-spacing: 1px; }

/* --- Karten --- */
.card {
    background: var(--eht-white);
    border: 1px solid var(--eht-grey-100);
    border-top: 4px solid var(--eht-coral);
    border-radius: 0;
    padding: 22px 24px;
    margin-bottom: 20px;
}
.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
h1, h2, h3 { font-family: var(--eht-font); font-weight: 500; }
h1 { font-size: 1.5rem; margin: 0 0 .5rem; color: var(--eht-anthracite); }
h2 { font-size: 1.2rem; margin: 1.2rem 0 .6rem; color: var(--eht-anthracite); }
h3 { font-size: 1.05rem; margin: 0 0 .4rem; color: var(--eht-grey-600); }
.card > h1:first-child,
.card > h2:first-child { margin-top: 0; }

.intro h1 { margin-top: 0; }
.muted { color: var(--eht-grey-600); }
.small { font-size: .82rem; }
.count { color: var(--eht-grey-600); font-weight: 400; font-size: .9rem; }
.req { color: var(--eht-coral); }
.warn-strong { color: var(--eht-coral); font-weight: 700; text-decoration: underline; }

/* --- Meldungen --- */
.flash {
    border-radius: 0;
    padding: 12px 16px;
    margin-bottom: 18px;
    font-weight: 600;
    border-left: 4px solid transparent;
}
.flash-ok {
    background: var(--eht-mint-tint);
    color: var(--eht-anthracite);
    border-left-color: var(--eht-mint);
}
.flash-error {
    background: var(--eht-coral-tint);
    color: var(--eht-anthracite);
    border-left-color: var(--eht-coral);
}

/* --- Formulare --- */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
}
.field { display: flex; flex-direction: column; }
.field-full { grid-column: 1 / -1; }
.field label { font-size: .85rem; font-weight: 600; margin-bottom: 4px; }

input[type=text], input[type=email], input[type=tel],
input[type=password], input[type=url], textarea, select {
    font: inherit;
    padding: 9px 11px;
    border: 1px solid var(--eht-grey-300);
    border-radius: 0;
    background: #fff;
    color: var(--eht-anthracite);
    width: 100%;
}
input:focus, textarea:focus, select:focus {
    outline: 2px solid var(--eht-coral);
    outline-offset: -1px;
}
textarea { resize: vertical; }

.hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }

/* --- Buttons --- */
.btn {
    display: inline-block;
    font: inherit;
    font-weight: 500;
    padding: 10px 20px;
    border: 2px solid var(--eht-anthracite);
    border-radius: 0;
    background: #fff;
    color: var(--eht-anthracite);
    cursor: pointer;
    text-decoration: none;
    margin: 2px 4px 2px 0;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--eht-grey-050); }
.btn-primary {
    background: var(--eht-mint);
    color: var(--eht-anthracite);
    border-color: var(--eht-mint);
}
.btn-primary:hover { background: var(--eht-anthracite); color: var(--eht-white); border-color: var(--eht-anthracite); }
.btn-big { padding: 14px 28px; font-size: 1.05rem; }

.btn-link {
    background: none;
    border: none;
    color: var(--eht-coral);
    cursor: pointer;
    font: inherit;
    padding: 0 4px;
    text-decoration: underline;
}
.btn-link.danger { color: #A83A37; }
.btn-danger {
    background: var(--eht-coral);
    color: var(--eht-white);
    border-color: var(--eht-coral);
}
.btn-danger:hover { background: var(--eht-anthracite); border-color: var(--eht-anthracite); color: var(--eht-white); }

/* --- Sitzungs-Countdown und Verlängern-Hinweis --- */
.session-info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.session-countdown { color: var(--eht-grey-600); font-size: .85rem; white-space: nowrap; }

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(22, 22, 22, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 16px;
}
.modal-overlay[hidden] { display: none; }
.modal-box {
    background: var(--eht-white);
    border-top: 4px solid var(--eht-coral);
    padding: 24px 26px;
    max-width: 420px;
    width: 100%;
}
.modal-box h2 { margin-top: 0; }
.modal-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }

/* --- Forum --- */
.forum-antworten {
    margin: 16px 0 20px 20px;
    border-left: 3px solid var(--eht-grey-100);
    padding-left: 16px;
}
.forum-antwort { margin-bottom: 16px; }
.forum-antwort:last-child { margin-bottom: 0; }
.forum-antwort--admin {
    background: var(--eht-mint-tint);
    border-left: 3px solid var(--eht-mint);
    padding: 10px 14px;
    margin-left: -19px;
}
.forum-reply { margin-top: 16px; }
.forum-reply summary {
    cursor: pointer;
    color: var(--eht-coral);
    font-weight: 600;
}
.forum-reply[open] summary { margin-bottom: 16px; }

.forum-admin-thread {
    padding: 12px 0;
    border-bottom: 1px solid var(--eht-grey-100);
}
.forum-admin-thread summary { cursor: pointer; font-weight: 600; }
.forum-admin-thread[open] summary { margin-bottom: 12px; }

/* --- Speicherleiste --- */
.savebar {
    position: sticky;
    bottom: 0;
    background: var(--eht-white);
    padding: 14px 0;
    text-align: center;
    border-top: 1px solid var(--eht-grey-100);
}

/* --- Einrichtungskarten --- */
.einr-card {
    border: 1px solid var(--eht-grey-100);
    border-top: 4px solid var(--eht-mint);
    border-radius: 0;
    padding: 14px 16px;
    margin-bottom: 14px;
    background: var(--eht-grey-050);
}
.einr-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.einr-titel { flex: 1; }
.einr-card.to-delete { opacity: .55; border-top-color: var(--eht-coral); }
.del-banner {
    background: var(--eht-coral-tint);
    color: var(--eht-anthracite);
    border-radius: 0;
    padding: 8px 12px;
    margin-bottom: 10px;
    font-size: .9rem;
}

/* --- Info-/Hinweis-Karten --- */
.link-box, .welcome {
    background: var(--eht-mint-tint);
    border-top-color: var(--eht-mint);
}
.session-bar { background: var(--eht-grey-050); border-top-color: var(--eht-anthracite); }
.copy-row { display: flex; gap: 8px; flex-wrap: wrap; }
.copy-row input { flex: 1; min-width: 220px; }

/* --- Tabellen --- */
.filter { max-width: 320px; margin-bottom: 12px; }
.table-scroll { overflow-x: auto; }
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
}
.data-table th, .data-table td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--eht-grey-100);
    vertical-align: top;
}
.data-table thead th {
    background: var(--eht-anthracite);
    color: #fff;
    border-bottom: none;
    white-space: nowrap;
}
.data-table tbody tr:nth-child(even) { background: var(--eht-grey-050); }
.data-table tbody tr:hover { background: var(--eht-mint-tint); }
.link-cell { white-space: nowrap; }
.ok-dot { color: #0D7C66; font-weight: 700; }
.no-dot { color: var(--eht-coral); font-weight: 700; }

/* --- Träger/Einrichtungen gruppiert (Admin-Tool) --- */
#traegertab tbody tr:nth-child(even) { background: transparent; }
#traegertab .traeger-row { background: var(--eht-grey-050); }
#traegertab .traeger-row:hover { background: var(--eht-mint-tint); }
#traegertab .einrichtung-row:hover { background: var(--eht-mint-tint); }
#traegertab .einrichtung-indent { padding-left: 28px; color: var(--eht-grey-600); }

/* --- Statistik --- */
.stats { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.stat {
    flex: 1;
    min-width: 130px;
    background: var(--eht-grey-050);
    border: 1px solid var(--eht-grey-100);
    border-top: 3px solid var(--eht-mint);
    border-radius: 0;
    padding: 14px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.stat-num { font-size: 1.6rem; font-weight: 700; color: var(--eht-anthracite); }
.stat span:last-child { font-size: .82rem; color: var(--eht-grey-600); }

/* --- Sonstiges --- */
.stand {
    background: var(--eht-grey-050);
    border-radius: 0;
    padding: 8px 12px;
    font-size: .9rem;
}
.snapshot {
    background: var(--eht-anthracite);
    color: var(--eht-grey-050);
    padding: 14px;
    border-radius: 0;
    overflow-x: auto;
    font-size: .82rem;
}
.login-card { max-width: 420px; margin: 40px auto; }
.admin-link { text-align: center; font-size: .85rem; margin-top: 8px; }
.session-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.session-nav { font-size: .9rem; }
.session-nav a[aria-current="page"] { color: var(--eht-anthracite); font-weight: 600; text-decoration: none; }
.list-table td.actions { white-space: nowrap; text-align: right; }
.badge-yes { color: #0D7C66; font-weight: 600; }
.badge-no  { color: var(--eht-grey-600); }
.own-row { background: var(--eht-mint-tint); }
.rolle-fieldset {
    border: 1px solid var(--eht-grey-100);
    padding: 12px 14px;
    margin: 0 0 14px;
}
.rolle-fieldset legend { font-weight: 600; font-size: .9rem; padding: 0 6px; }
.field-top-gap { margin-top: 10px; }
.no-margin-top { margin-top: 0; }
.field label:has(input[type=checkbox]) {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 400;
}
.radio-option {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    font-size: 1rem;
    font-weight: 400;
    margin-top: 8px;
}
.radio-option input { margin-top: 4px; }

/* --- Mobil --- */
@media (max-width: 640px) {
    .form-grid { grid-template-columns: 1fr; }
    .card { padding: 18px 16px; }
    .wordmark { align-items: flex-start; }
}