/* Farben und Maße nach dem FileMaker-Theme "Apex Blue" und den Layouts von itjaeger.fmp12 */
:root {
    --blau: #0091ce;
    --blau-dunkel: #007fb5;
    --navy: #0e2235;
    --kopf: #333333;
    --hintergrund: #f0f0f0;
    --rahmen: #cfcfcf;
    --linie: #dddddd;
    --text: #282828;
    --text-hell: #777777;
    --zeile-alt: #f2f2f2;
    --grau-reiter: #f3f3f3;
    --kachel-grau: #7d8f9b;
    --ok: #e6f4e6;
    --fehler: #fdecec;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
    font: 13px/1.35 "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--text);
    background: var(--hintergrund);
    min-height: 100vh;
}
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
.ic { width: 18px; height: 18px; flex: none; }
.leer { color: #999; padding: 16px; margin: 0; }
[hidden] { display: none !important; }

/* ---------- Kopfzeile ---------- */
.kopf { display: flex; height: 52px; background: var(--kopf); color: #fff; }
.kopf-home { width: 52px; display: flex; align-items: center; justify-content: center; background: var(--navy); color: #fff; }
.kopf-home .ic { width: 26px; height: 26px; }
.kopf-reiter {
    width: 195px; display: flex; align-items: center; justify-content: center; gap: 6px;
    background: var(--navy); color: #fff; text-decoration: none;
}
.kopf-reiter .ic { width: 16px; height: 16px; }
.kopf-reiter.aktiv { background: var(--blau); }
.kopf-reiter:not(.aktiv):not(.folgt):hover { background: #16324d; }
.kopf-reiter.folgt { opacity: .45; cursor: default; }
.kopf-rest { flex: 1; }
.kopf-benutzer { display: flex; align-items: center; gap: 6px; padding: 0 10px 0 14px; margin: 0; color: #ccc; }
.kopf-benutzer button { display: flex; padding: 8px; background: none; border: 0; color: #fff; cursor: pointer; }
.kopf-benutzer button:hover { color: var(--blau); }

/* ---------- Werkzeugleiste ---------- */
.werkzeugleiste { display: flex; align-items: center; height: 60px; background: var(--blau); color: #fff; padding-left: 108px; }
.wl-gruppe { display: flex; align-items: center; gap: 22px; height: 30px; padding: 0 28px; border-left: 1px solid rgba(255, 255, 255, .75); }
.wl-gruppe:nth-child(1) { width: 237px; padding-left: 38px; }
.wl-gruppe:nth-child(2) { width: 293px; justify-content: center; }
.wl-gruppe:nth-child(3) { padding-left: 48px; }
.wl-gruppe form { margin: 0; }
.werkzeugleiste a, .werkzeugleiste button {
    display: flex; align-items: center; gap: 7px; padding: 6px 0;
    background: none; border: 0; color: #fff; text-decoration: none; font-size: 13.5px; cursor: pointer;
}
.werkzeugleiste .ic { width: 15px; height: 15px; }
.werkzeugleiste a:hover, .werkzeugleiste button:hover { text-decoration: underline; }

/* ---------- Maske: Liste | Formular | Reiter ---------- */
/* Rechts und unten bleibt wie in FileMaker ein Abstand zum Fensterrand */
.maske { display: grid; grid-template-columns: 333px 305px minmax(0, 1fr); column-gap: 12px; min-height: calc(100vh - 112px); padding: 0 12px 12px 0; }
.liste { grid-row: span 2; background: #fff; border-right: 1px solid var(--linie); }
.liste-suche { padding: 8px; border-bottom: 1px solid var(--linie); }
.liste-suche input { width: 100%; height: 28px; border: 1px solid var(--rahmen); padding: 0 8px; }
.liste-eintrag {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
    min-height: 52px; padding: 7px 34px 6px 12px; border-bottom: 1px solid var(--linie); text-decoration: none;
}
.le-titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.le-unter { grid-row: 2; font-size: 10px; color: #888; min-height: 12px; }
.le-nr { grid-row: 1 / 3; grid-column: 2; font-size: 14px; }
.liste-eintrag:not(.aktiv):hover { background: #f4f9fc; }
.liste-eintrag.aktiv { background: var(--navy); color: #fff; }
.liste-eintrag.aktiv .le-unter { color: #b8c2cc; }
.liste-eintrag.aktiv::after {
    content: ""; position: absolute; right: 6px; top: 50%; margin-top: -10px;
    border-style: solid; border-width: 10px 10px 10px 0; border-color: transparent #fff transparent transparent;
}

.formular { padding-top: 14px; }
.feldgruppe { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.feldgruppe.dicht { gap: 0; margin-bottom: 18px; }
.feldgruppe.dicht .feld + .feld { border-top: 0; }
.gruppentitel { font-size: 10px; color: #555; margin: 0 0 5px 6px; }
.feld { display: grid; grid-template-columns: 104px minmax(0, 1fr); height: 25px; border: 1px solid var(--rahmen); background: #fff; transition: background-color .3s; }
.feld-label { display: block; line-height: 23px; text-align: right; padding: 0 5px 0 3px; border-right: 1px solid var(--rahmen); color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spalten .feld { grid-template-columns: 140px minmax(0, 1fr); }
.hinweis.warnung { margin: 6px 0 0; color: #a15c00; }
.feldfehler { margin: 3px 0 4px; font-size: 11.5px; color: #b42318; }
.feld input, .feld select { width: 100%; height: 100%; min-width: 0; border: 0; background: transparent; padding: 0 5px; }
.feld select {
    appearance: none; -webkit-appearance: none; padding-right: 26px; cursor: pointer;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230091ce' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 9px center / 12px 8px;
}
.feld select:disabled { cursor: default; opacity: 1; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: 2px solid var(--blau); outline-offset: -2px; }
.feld-kurz { width: 207px; }
.feld-schalter input { width: auto; height: auto; justify-self: start; margin: 0 0 0 7px; align-self: center; cursor: pointer; }
.feld-mehrzeilig { height: auto; }
.feld-mehrzeilig .feld-label { align-self: stretch; }
.feld-mehrzeilig textarea { display: block; width: 100%; min-height: 85px; border: 0; padding: 4px 5px; resize: vertical; line-height: 1.35; }
.feld.gespeichert { background: var(--ok); }
.feld.fehlerhaft { background: var(--fehler); }
.fotobox {
    width: 180px; height: 200px; margin-top: 16px; display: flex; align-items: center; justify-content: center;
    border: 1px dashed #c8c8c8; background: #fff; color: #bbb; font-size: 16px;
}
.fotobox.klein { margin: 0; }
/* Fotos füllen die Fläche wie in FileMaker; Logo und Icons werden nie beschnitten */
.fotobox:has(img) { padding: 5px; }
.fotobox img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fotobox.logo img, .fotobox.icon img { object-fit: contain; }
.fotobox.ablage-aktiv { border-color: var(--blau); background: #eaf5fb; }
.bildbereich { display: flex; align-items: stretch; gap: 4px; margin-top: 16px; }
.bildbereich .fotobox { margin: 0; }
.bildbereich.klein, .bildbereich.icon { margin-top: 0; }
.bild-knoepfe { display: flex; flex-direction: column; justify-content: space-between; }
.bild-knoepfe form { margin: 0; }
.bild-knoepfe .icon-knopf { width: 24px; height: 22px; color: #9a9a9a; }
.bild-knoepfe .icon-knopf .ic { width: 15px; height: 15px; }
.bild-knoepfe label.icon-knopf { cursor: pointer; color: var(--blau); }
.bild-knoepfe label.icon-knopf:hover { color: var(--blau-dunkel); }
.bild-knoepfe button.icon-knopf:hover { color: #d33; }
.bild-knoepfe .icon-knopf.inaktiv { opacity: .35; cursor: default; }
.bild-knoepfe label.icon-knopf:focus-within { outline: 2px solid var(--blau); }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.le-icon img, .pk-icon img { max-width: 30px; max-height: 30px; object-fit: contain; }

/* ---------- Reiter rechts ---------- */
.reiterbereich { margin-top: 10px; display: flex; flex-direction: column; min-height: 640px; background: #fff; border: 1px solid #d6d6d6; }
.reiter-rechts { display: flex; }
.reiter-rechts a {
    flex: 1; height: 52px; display: flex; align-items: center; justify-content: center;
    background: var(--grau-reiter); color: #999; text-decoration: none;
    border-left: 1px solid #d6d6d6; border-bottom: 1px solid #d6d6d6;
}
.reiter-rechts a:first-child { border-left: 0; }
.reiter-rechts a.aktiv { background: #fff; color: #222; border-bottom-color: transparent; }
.reiter-rechts a:not(.aktiv):hover { color: #555; }
.reiter-inhalt { flex: 1; padding: 10px 24px 20px 8px; }

.portal-kopf form { margin: 0; }
.link-knopf { display: flex; align-items: center; gap: 6px; padding: 6px 0; background: none; border: 0; font-size: 13.5px; cursor: pointer; }
.link-knopf .ic { width: 14px; height: 14px; }
.portal-titel { font-size: 11px; color: #444; margin: 10px 0 6px; }
/* Die Kontaktfelder wachsen mit der Fensterbreite, wie in FileMaker; das Foto bleibt rechts außen */
.portal-bereich { display: grid; grid-template-columns: minmax(0, 440px) minmax(221px, 1fr) auto; column-gap: 0; align-items: start; }
.kontakt-detail { margin-right: 12px; min-width: 0; }
.kontakt-detail .hinweis { margin: 6px 0 0; }
.portal { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; margin-right: 17px; }
.portal-zeile { display: flex; align-items: center; height: 30px; background: #fff; }
.portal-zeile:nth-child(even) { background: var(--zeile-alt); }
.portal-zeile.aktiv { background: #dceefa; }
.portal-zeile form { margin: 0; }
.icon-knopf { width: 34px; height: 30px; display: flex; align-items: center; justify-content: center; background: none; border: 0; color: #8cc1e6; cursor: pointer; }
.icon-knopf .ic { width: 15px; height: 15px; }
.icon-knopf:hover { color: #d33; }
.icon-platz { width: 34px; }
.pz-link { flex: 1; height: 100%; display: grid; grid-template-columns: 170px minmax(0, 1fr) 22px; align-items: center; padding-left: 24px; text-decoration: none; }
.pz-name, .pz-position { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pz-pfeil::before { content: ""; display: block; border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent #222; }
.kontakt-detail .feld { grid-template-columns: 103px minmax(0, 1fr); height: 24px; }
.kontakt-detail .feldgruppe { margin-bottom: 0; }
.kontakt-detail .feld-mehrzeilig { border-top: 0; }

.spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 340px)); gap: 0 90px; padding: 14px 12px; }
.passwort-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -8px 0 22px; }
.passwort-form .feld { flex: 1 1 100%; }
.knopf-klein { height: 26px; padding: 0 12px; background: var(--blau); color: #fff; border: 0; cursor: pointer; }
.knopf-klein:hover { background: var(--blau-dunkel); }
.hinweis { font-size: 11px; color: var(--text-hell); }

.listenansicht { grid-column: 2 / 4; padding: 14px 0; overflow-x: auto; }
.listenansicht table { width: 100%; border-collapse: collapse; background: #fff; }
.listenansicht th, .listenansicht td { text-align: left; padding: 7px 10px; border-bottom: 1px solid #e3e3e3; white-space: nowrap; }
.listenansicht th { background: var(--grau-reiter); font-weight: normal; color: #555; }
.listenansicht tbody tr:nth-child(even) { background: #fafafa; }
.listenansicht td a { color: var(--blau-dunkel); text-decoration: none; }
.listenansicht td a:hover { text-decoration: underline; }
.leerhinweis { grid-column: 2 / 4; padding: 30px 0; color: var(--text-hell); }

/* ---------- Maske ohne Liste (Meine Firma) ---------- */
.maske.einzeln > .formular { grid-column: 2; }
.maske.einzeln > .reiterbereich { grid-column: 3; }

/* ---------- Liste mit Symbol (Prüfungsgenerator) ---------- */
.liste-eintrag.mit-icon { grid-template-columns: 42px minmax(0, 1fr) auto; padding: 0 34px 0 0; }
.le-icon { grid-row: 1 / 3; align-self: stretch; display: flex; align-items: center; justify-content: center; background: #fff; color: #e3262b; border-right: 1px solid var(--linie); }
.le-icon .ic { width: 24px; height: 24px; }
.mit-icon .le-titel { grid-column: 2; padding-left: 12px; }
.mit-icon .le-unter { grid-column: 2; grid-row: 2; padding-left: 12px; }
.mit-icon .le-unter:empty { display: none; }
.mit-icon .le-nr { grid-column: 3; }
.fotobox.icon { width: 85px; height: 95px; margin: 0 0 4px; font-size: 13px; }
.feld-mehrzeilig.hoch textarea { min-height: 270px; }

/* ---------- Prüfungsgenerator ---------- */
.portal-titel.einzug { padding-left: 68px; }
.portal-bereich.generator { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); }
.param-detail .feld { grid-template-columns: 196px minmax(0, 1fr); }
.param-detail .feld-mehrzeilig { border-top: 0; }
.portal-zeile .pz-link { min-width: 0; }
.sortieren { display: flex; }
.sortieren .icon-knopf { width: 22px; color: #b5b5b5; }
.sortieren .icon-knopf:hover { color: var(--blau); }
.werte-bereich { margin-top: 16px; }
.wert-zeile { display: flex; align-items: center; height: 27px; border: 1px solid var(--rahmen); border-top: 0; background: #fff; }
.werte-bereich .gruppentitel + .wert-zeile { border-top: 1px solid var(--rahmen); }
.wert-zeile input { flex: 1; height: 100%; border: 0; padding: 0 6px; min-width: 0; background: transparent; }
.wert-zeile form { margin: 0; }
.pp-tabelle { padding-right: 0; }
.pp-kopf, .pp-zeile { display: grid; grid-template-columns: 34px minmax(0, 470px) minmax(0, 305px) 50px; column-gap: 6px; align-items: center; }
.pp-kopf { font-size: 11px; color: #444; margin: 8px 0 4px; }
.pp-zeile { height: 30px; }
.pp-zeile form { margin: 0; }
.pp-zeile input { width: 100%; height: 25px; border: 1px solid var(--rahmen); padding: 0 6px; background: #fff; }
.pp-zeile input:focus, .wert-zeile input:focus { outline: 2px solid var(--blau); outline-offset: -2px; }
input.gespeichert { background: var(--ok) !important; }
input.fehlerhaft { background: var(--fehler) !important; }

/* ---------- Hilfe und Links an Feldgruppen ---------- */
.feldgruppe.mit-hilfe { position: relative; }
.hilfe-punkt {
    position: absolute; right: -30px; top: 2px; width: 20px; height: 20px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #f26722; color: #fff; font-weight: bold; font-size: 13px; cursor: help;
}
.gruppen-link { align-self: flex-end; display: flex; align-items: center; gap: 4px; margin-top: 6px; text-decoration: none; font-size: 12.5px; }
.gruppen-link .ic { width: 12px; height: 12px; }
.gruppen-link:hover { color: var(--blau-dunkel); text-decoration: underline; }

/* ---------- Rückfrage-Dialog ---------- */
.dialog { width: min(420px, calc(100vw - 32px)); padding: 0; border: 0; box-shadow: 0 12px 32px rgba(0, 0, 0, .28); color: var(--text); }
.dialog::backdrop { background: rgba(14, 34, 53, .45); }
.dialog-kopf { padding: 12px 16px; background: var(--navy); color: #fff; font-size: 13.5px; }
.dialog-text { margin: 0; padding: 20px 16px; font-size: 14px; line-height: 1.45; }
.dialog-knoepfe { display: flex; justify-content: flex-end; gap: 8px; padding: 0 16px 16px; }
.dialog-knoepfe button { height: 32px; min-width: 100px; padding: 0 16px; border: 0; cursor: pointer; font-size: 13.5px; }
.dialog-abbrechen { background: #e6e6e6; color: #333; }
.dialog-abbrechen:hover { background: #d9d9d9; }
.dialog-ok { background: var(--blau); color: #fff; }
.dialog-ok:hover { background: var(--blau-dunkel); }
.dialog-knoepfe button:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* ---------- Meldungen ---------- */
.meldung { padding: 10px 16px; background: var(--ok); color: #1f5e1f; border-bottom: 1px solid #c7e3c7; }
.meldung-fehler { background: var(--fehler); color: #8a1f1f; border-color: #f3c5c5; }

/* ---------- Anmeldung ---------- */
.anmeldeseite { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--navy); }
.anmeldekarte { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 14px; padding: 28px; background: #fff; }
.anmelde-logo { display: flex; align-items: center; gap: 12px; font-size: 22px; font-weight: bold; color: var(--navy); }
.anmelde-logo img { height: 40px; width: auto; }
.anmelde-text { margin: 0; color: #555; }
.anmeldekarte label { display: flex; flex-direction: column; gap: 5px; color: #555; }
.anmeldekarte input { height: 34px; padding: 0 8px; border: 1px solid var(--rahmen); }
.knopf-primaer { height: 36px; background: var(--blau); color: #fff; border: 0; font-size: 14px; cursor: pointer; }
.knopf-primaer:hover { background: var(--blau-dunkel); }
.formfehler { margin: 0; padding: 8px 10px; background: var(--fehler); color: #8a1f1f; }
.hinweisseite { padding: 40px; }

/* ---------- Hauptmenü ---------- */
.hauptmenue { min-height: 100vh; display: flex; flex-direction: column; }
.hm-kopf { height: 58px; display: flex; align-items: center; gap: 14px; padding: 0 8px; background: #002235; }
.logo-allworks { display: block; height: 40px; width: auto; }
.logo-itjaeger { display: block; height: 30px; width: auto; margin-top: 6px; }
.hm-flaeche { flex: 1; padding: 34px 32px; background: linear-gradient(115deg, #ffffff 0%, #f3f3f3 45%, #c9c9c9 100%); }
.hm-panel { min-height: 640px; border: 1px solid #d6d6d6; }
.hm-reiter { display: flex; }
.hm-reiter button {
    width: 182px; height: 52px; background: var(--grau-reiter); color: #888; cursor: pointer;
    border: 0; border-right: 1px solid #d6d6d6; border-bottom: 1px solid #d6d6d6;
}
.hm-reiter button[aria-selected="true"] { background: #fff; color: #222; border-bottom-color: transparent; }
.hm-reiter button:not([aria-selected="true"]):hover { color: #555; }
.hm-inhalt { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 32px 31px; }
.menue-knopf {
    position: relative; width: 234px; height: 52px; display: flex; align-items: center; gap: 8px; padding: 0 9px;
    background: var(--navy); color: #fff; text-decoration: none;
}
.menue-knopf .ic { width: 14px; height: 14px; }
a.menue-knopf:hover { background: var(--blau-dunkel); }
.menue-knopf.folgt { opacity: .55; cursor: default; }
.menue-knopf small { position: absolute; right: 8px; font-size: 10px; color: #aab6c2; }
.pruef-kachel { display: flex; height: 52px; margin-bottom: 8px; text-decoration: none; opacity: .9; }
.pk-icon { width: 52px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #ddd; color: #e3262b; }
.pk-icon .ic { width: 26px; height: 26px; }
.pk-text { width: 182px; display: flex; align-items: center; padding: 0 9px; background: var(--kachel-grau); color: #fff; }
a.pruef-kachel:hover .pk-text { background: var(--blau-dunkel); }

/* ---------- Drucken ---------- */
@media print {
    .kopf, .werkzeugleiste, .liste, .reiter-rechts, .icon-knopf, .link-knopf, .passwort-form, .meldung { display: none !important; }
    body { background: #fff; }
    .maske { display: block; }
    .reiterbereich { border: 0; min-height: 0; }
}

/* ---------- Schmalere Bildschirme (iPad) ---------- */
@media (max-width: 1180px) {
    .maske { grid-template-columns: 260px minmax(0, 1fr); }
    .formular { padding-right: 12px; }
    .reiterbereich, .leerhinweis, .listenansicht { grid-column: 2; }
    .werkzeugleiste { padding-left: 12px; }
    .wl-gruppe:nth-child(n) { width: auto; padding: 0 20px; }
    .portal-bereich { grid-template-columns: minmax(0, 1fr) minmax(221px, 1fr); }
    .portal-bereich .bildbereich { grid-column: 2; margin-top: 8px; }
    .spalten { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
    .maske { grid-template-columns: minmax(0, 1fr); padding-right: 0; }
    .liste { grid-row: auto; max-height: 230px; overflow: auto; border-right: 0; border-bottom: 1px solid var(--linie); }
    .formular, .reiterbereich, .leerhinweis, .listenansicht { grid-column: 1; margin-left: 12px; margin-right: 12px; }
    .kopf-reiter { width: auto; padding: 0 14px; }
    .werkzeugleiste { overflow-x: auto; }
    .portal-bereich { grid-template-columns: minmax(0, 1fr); }
    .portal { margin: 0 0 12px; }
    .hm-flaeche { padding: 16px; }
    .hm-reiter { flex-wrap: wrap; }
    .hm-reiter button { width: 50%; }
}