* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
    font-family: Arial, sans-serif;
    background: linear-gradient(135deg, #eaf2ff, #f7efff);
    color: #243047;
}

.karte {
    width: 100%;
    max-width: 460px;
    padding: 36px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 16px 45px rgba(50, 70, 120, 0.12);
}

.logo {
    font-size: 40px;
    margin-bottom: 12px;
}

h1 {
    margin: 0 0 10px;
    font-size: 30px;
}

h2 {
    margin-top: 32px;
    font-size: 21px;
}

.untertitel {
    color: #68758c;
    line-height: 1.5;
}

form {
    margin-top: 25px;
}

label {
    display: block;
    margin: 20px 0 8px;
    font-weight: 600;
    font-size: 14px;
}

input, select {
    width: 100%;
    padding: 14px;
    border: 1px solid #d6dce8;
    border-radius: 12px;
    background: white;
    font-size: 16px;
}

input:focus, select:focus {
    outline: 2px solid #7b9bdf;
    border-color: transparent;
}

button {
    width: 100%;
    margin-top: 28px;
    padding: 15px;
    border: none;
    border-radius: 12px;
    background: #3b65c5;
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

button:hover {
    background: #2e52a6;
}

.fehler {
    padding: 12px;
    border-radius: 10px;
    background: #fff0f0;
    color: #ae2638;
}

.hinweis {
    margin-top: 28px;
    font-size: 12px;
    color: #8390a5;
    text-align: center;
}


/* THUMBS-Fragebogen */

.thumbs-karte {
    max-width: 760px;
}

.dimension {
    padding: 16px;
    margin: 12px 0;
    border-radius: 16px;
}

.dimension-t { background: #fff0c7; }
.dimension-h { background: #d9f5e6; }
.dimension-u { background: #dceaff; }
.dimension-m { background: #eee1ff; }
.dimension-b { background: #ffe0e3; }
.dimension-s { background: #e1e2ff; }

.dimension-kopf {
    display: flex;
    align-items: center;
    gap: 12px;
}

.buchstabe {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    font-weight: bold;
    background: white;
}

.dimension-text {
    flex: 1;
}

.dimension-text strong {
    display: block;
    font-size: 16px;
}

.dimension-text small {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.4;
}

.bewertung {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    position: relative;
    isolation: isolate;
}

.bewertung input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.bewertung label {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;
    box-sizing: border-box;

    margin: 0;
    padding: 0;

    background: rgba(255,255,255,0.75);
    border: 2px solid transparent;
    border-radius: 9px;

    cursor: pointer;
    font-size: 23px;
    line-height: 1;

    flex-shrink: 0;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;

    pointer-events: auto;

    position: relative;
    z-index: 1;
}

.bewertung label::before,
.bewertung label::after {
    pointer-events: none;
}

.bewertung input:checked + label {
    border-color: #243b63;
    background: white;
}

.bewertung input:focus-visible + label {
    outline: 3px solid #315bc3;
    outline-offset: 2px;
}

.dimension details {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(0,0,0,0.08);
}

.dimension summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
}

.dimension details p {
    font-size: 13px;
    margin: 12px 0 6px;
}

.dimension textarea {
    width: 100%;
    min-height: 90px;
    margin-top: 10px;
    padding: 12px;
    border: 1px solid #d6dce8;
    border-radius: 10px;
    font: inherit;
    resize: vertical;
}

@media (max-width: 600px) {
    .karte {
        padding: 22px;
    }

    .dimension-kopf {
        flex-wrap: wrap;
    }

    .dimension-text {
        flex-basis: calc(100% - 60px);
    }

    .bewertung {
        width: 100%;
        justify-content: space-around;
    }
}

/* Einzelne Leitfragen */

.dimension details label {
    display: block;
    margin-top: 18px;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
}

.dimension details textarea {
    display: block;
    width: 100%;
    min-height: 90px;
    margin-top: 6px;
    margin-bottom: 14px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid #d6dce8;
    border-radius: 12px;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
}

.dimension details textarea:focus {
    outline: 2px solid #7b9bdf;
}


/* Gemeinsamer Einsatz-Thread */

.thread-info {
    padding: 18px;
    background: #f0f4fb;
    border-radius: 14px;
    margin: 20px 0;
}

.thread-info p {
    margin: 7px 0;
}

.rueckkehr-box {
    padding: 20px;
    background: #e9f5ee;
    border-radius: 16px;
    margin: 24px 0;
}

.rueckkehr-box h2 {
    margin-top: 0;
}

.rueckkehr-box input {
    font-size: 13px;
}

.thread-beitrag {
    margin: 18px 0;
    padding: 20px;
    border-radius: 18px;
    border-left: 6px solid transparent;
}

.org-luft {
    background: #fff3c9;
    border-left-color: #e8b92d;
}

.org-boden {
    background: #def5e7;
    border-left-color: #39a86c;
}

.org-feuerwehr {
    background: #ffe1e3;
    border-left-color: #e45560;
}

.org-sonstige {
    background: #e0ebff;
    border-left-color: #5689db;
}

.thread-beitrag h3 {
    margin-top: 0;
}

.eigener-beitrag {
    display: inline-block;
    margin-left: 8px;
    font-size: 12px;
    color: #4b5870;
}

.zeitstempel {
    color: #69758a;
    font-size: 12px;
}

.thread-dimension {
    padding: 12px 0;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.thread-dimension strong {
    display: inline-block;
    min-width: 110px;
}

.thread-dimension p {
    margin: 8px 0 0;
    line-height: 1.5;
    overflow-wrap: anywhere;
}



/* Kumulierte THUMBS-Übersicht */

.thread-dimensionskarte {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    margin: 14px 0;
    overflow: hidden;
}

.thread-dimensionskopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 20px;
    cursor: pointer;
    font-size: 17px;
    list-style: none;
}

.thread-dimensionskopf::-webkit-details-marker {
    display: none;
}

.thread-dimensionskopf strong {
    font-size: 21px;
}

.thread-aufklappen {
    font-size: 12px;
    color: #64748b;
}

.thread-dimensionsinhalt {
    padding: 0 20px 20px;
}

.bewertungsuebersicht {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 12px 0 24px;
}

.bewertungszahl {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 15px 5px;
    border-radius: 12px;
}

.bewertungszahl span {
    font-size: 26px;
}

.bewertungszahl strong {
    font-size: 24px;
}

.bewertungszahl small {
    font-size: 12px;
}

.bewertungszahl.positiv {
    background: #dff5e7;
}

.bewertungszahl.neutral {
    background: #edf0f5;
}

.bewertungszahl.negativ {
    background: #ffe3e3;
}

.thread-kommentar {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px;
    margin: 10px 0;
}

.kommentar-kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.thread-kommentar p {
    margin-bottom: 0;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.keine-kommentare {
    color: #64748b;
    font-style: italic;
}

@media (max-width: 480px) {
    .thread-dimensionskopf {
        padding: 15px;
        font-size: 15px;
    }

    .thread-dimensionsinhalt {
        padding: 0 12px 15px;
    }

    .bewertungszahl {
        padding: 12px 3px;
    }

    .bewertungszahl strong {
        font-size: 21px;
    }
}


/* Kompakte organisationsbezogene THUMBS-Auswertung */

.organisation-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 10px 0 18px;
}

.organisation-mini {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 10px;
    min-width: 0;
}

.organisation-mini strong {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
}

.organisation-werte {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
    white-space: nowrap;
    font-size: 13px;
}

/* Organisationsfarben beibehalten */

.mini-luft {
    background: #fff1c5;
}

.mini-boden {
    background: #dff4e6;
}

.mini-feuerwehr {
    background: #ffe1e3;
}

.mini-sonstige {
    background: #dfeaff;
}

/* Auf kleinen Bildschirmen weiterhin gut lesbar */

@media (max-width: 480px) {
    .organisation-mini {
        padding: 8px 10px;
        gap: 8px;
    }

    .organisation-mini strong,
    .organisation-werte {
        font-size: 12px;
    }

    .organisation-werte {
        gap: 8px;
    }
}


/* THUMBS: Kumulierte Werte immer sichtbar */

.thread-dimensionskopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px;
}

.thread-kopf-inhalt {
    flex: 1;
    min-width: 0;
}

.thread-dimensionstitel {
    display: block;
    margin-bottom: 14px;
    font-size: 18px;
}

.thread-dimensionskopf .bewertungsuebersicht {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.thread-dimensionskopf .bewertungszahl {
    padding: 12px 6px;
}

.thread-dimensionskopf .bewertungszahl span {
    font-size: 22px;
}

.thread-dimensionskopf .bewertungszahl strong {
    font-size: 22px;
}

.thread-aufklappen {
    flex-shrink: 0;
    align-self: center;
}

.pfeil-symbol {
    display: inline-block;
    font-size: 28px;
    transition: transform 0.2s ease;
}

.thread-dimensionskarte[open] .pfeil-symbol {
    transform: rotate(180deg);
}

@media (max-width: 480px) {
    .thread-dimensionskopf {
        padding: 14px;
        gap: 8px;
    }

    .thread-dimensionstitel {
        font-size: 16px;
    }

    .thread-dimensionskopf .bewertungsuebersicht {
        gap: 6px;
    }

    .thread-dimensionskopf .bewertungszahl {
        padding: 10px 3px;
    }

    .thread-dimensionskopf .bewertungszahl strong {
        font-size: 19px;
    }
}

/* Kommentare nach Leitfragen */

.leitfragen-gruppe {
    margin: 20px 0 26px;
}

.leitfragen-gruppe h4 {
    font-size: 15px;
    margin-bottom: 12px;
}

.thread-kommentar.kommentar-luft {
    background: #fff1c5;
    border-color: #e8c85b;
}

.thread-kommentar.kommentar-boden {
    background: #dff4e6;
    border-color: #82cfa0;
}

.thread-kommentar.kommentar-feuerwehr {
    background: #ffe1e3;
    border-color: #ef9ca3;
}

.thread-kommentar.kommentar-sonstige {
    background: #dfeaff;
    border-color: #9bb9ef;
}

/* Einzelne Antworten innerhalb einer Organisationskarte */

.einzelantwort {
    background: rgba(255, 255, 255, 0.65);
    border-radius: 10px;
    padding: 12px 14px;
    margin-top: 10px;
}

.einzelantwort p {
    margin: 0;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.einzelantwort .eigener-beitrag {
    display: block;
    margin: 0 0 6px;
}

/* Antworten auf einzelne Kommentare */

.kommentar-antworten {
    margin-top: 12px;
    padding-left: 12px;
    border-left: 2px solid rgba(0, 0, 0, 0.15);
}

.kommentar-reaktion {
    padding: 10px 12px;
    border-radius: 8px;
    margin-top: 8px;
}

.kommentar-reaktion p {
    margin: 6px 0 0;
    overflow-wrap: anywhere;
}

.antwort-bereich {
    margin-top: 12px;
}

.antwort-bereich summary {
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}

.antwort-formular {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.antwort-formular textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font: inherit;
    resize: vertical;
}

.antwort-formular button {
    align-self: flex-start;
    padding: 9px 16px;
    border: none;
    border-radius: 8px;
    background: #263b53;
    color: white;
    cursor: pointer;
}

.antwort-formular button:hover {
    background: #17283b;
}


/* Leitfrage mit Gesamtanzahl der Kommentare */

.leitfrage-kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.leitfrage-kopf h4 {
    margin: 0;
    flex: 1;
}

.leitfrage-anzahl {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 20px;
    background: #edf0f4;
    color: #344054;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* Nachträgliche Kommentare */

.nachtrag-bereich {
    margin-top: 16px;
}

.nachtrag-bereich summary {
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 0;
}

.nachtrag-formular {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.nachtrag-formular textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font: inherit;
    resize: vertical;
}

.nachtrag-formular button {
    align-self: flex-start;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    background: #263b53;
    color: white;
    cursor: pointer;
}

.nachtrag-kennzeichnung {
    display: inline-block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #58677a;
}

/* Neue Kopfzeile der Leitfragen */

.leitfrage-kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.leitfrage-titel {
    flex: 1;
    min-width: 0;
}

.leitfrage-titel h4 {
    margin: 0 0 7px;
}

.nachtrag-oeffnen {
    flex-shrink: 0;
    padding: 9px 13px;
    border: 1px solid #d0d5dd;
    border-radius: 9px;
    background: #ffffff;
    color: #263b53;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.nachtrag-oeffnen:hover {
    background: #edf0f4;
}

.nachtrag-eingabe {
    margin: 0 0 18px;
    padding: 14px;
    border-radius: 10px;
    background: #f5f7fa;
}

.nachtrag-eingabe[hidden] {
    display: none;
}

/* Kennzeichnung späterer Kommentare */


/* Kommentartext und Nachtragskennzeichnung in einer Zeile */

.kommentar-textzeile {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.kommentar-textzeile p {
    flex: 1;
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.nachtrag-hinweis {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
    color: #755a21;
    cursor: help;
}

.nachtrag-uhr {
    font-size: 17px;
    line-height: 1;
}

/* Nachtrag unterhalb aller Kommentare */

.nachtrag-unten {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.nachtrag-unten .nachtrag-eingabe {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
}


/* Einklappbare Leitfragen */

details.leitfragen-gruppe {
    overflow: hidden;
}

details.leitfragen-gruppe > summary.leitfrage-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px;
    margin: 0;
    cursor: pointer;
    list-style: none;
}

details.leitfragen-gruppe > summary.leitfrage-kopf::-webkit-details-marker {
    display: none;
}

details.leitfragen-gruppe > summary.leitfrage-kopf::marker {
    content: "";
}

.leitfrage-kopf h4 {
    flex: 1;
    min-width: 0;
    margin: 0;
}

.leitfrage-rechts {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.leitfrage-pfeil {
    display: inline-block;
    font-size: 22px;
    line-height: 1;
    color: #58677a;
    transition: transform 0.2s ease;
}

details.leitfragen-gruppe[open] .leitfrage-pfeil {
    transform: rotate(180deg);
}

/* Etwas Abstand für den ausgeklappten Inhalt */

details.leitfragen-gruppe[open] > .thread-kommentar,
details.leitfragen-gruppe[open] > .nachtrag-unten {
    margin-left: 14px;
    margin-right: 14px;
}

details.leitfragen-gruppe[open] > .nachtrag-unten {
    margin-bottom: 14px;
}

@media (max-width: 600px) {
    details.leitfragen-gruppe > summary.leitfrage-kopf {
        padding: 12px;
        gap: 8px;
    }

    .leitfrage-rechts {
        gap: 6px;
    }

    .leitfrage-anzahl {
        font-size: 11px;
    }
}

/* Aufschlüsselung der Beiträge bei geöffneter Leitfrage */

.leitfrage-details {
    margin: 4px 14px 12px;
    font-size: 12px;
    color: #667085;
}

/* Blauer Punkt für ungelesene Beiträge */

.ungelesen-punkt {
    display: inline-block;
    width: 9px;
    height: 9px;
    min-width: 9px;
    min-height: 9px;
    border-radius: 50%;
    background-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    flex-shrink: 0;
}


/* Neue Kommentare und Antworten dezent hervorheben */

details.leitfragen-gruppe[open] .beitrag-neu {
    animation: neuer-beitrag-puls 1s ease-in-out 3;
    border-radius: 8px;
}

@keyframes neuer-beitrag-puls {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
    }

    50% {
        box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.22);
    }
}

/* Animation bei reduzierter Bewegung deaktivieren */

@media (prefers-reduced-motion: reduce) {
    details.leitfragen-gruppe[open] .beitrag-neu {
        animation: none;
        outline: 2px solid #2563eb;
        outline-offset: 2px;
    }
}

/* Beitragsanzahl in der eingeklappten Dimension */

.dimension-beitraege {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 5px 10px;
    border-radius: 20px;
    background-color: #eef2f7;
    color: #475467;
    font-size: 12px;
    font-weight: 600;
}


/* Gesamtbeiträge und Ungelesen-Punkt rechts */


.dimension-rechts {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-left: auto;
    flex-shrink: 0;
}


.dimension-ungelesen-punkt {
    width: 9px;
    height: 9px;
    min-width: 9px;
    min-height: 9px;
}


/* Titel und Beitragsanzahl in einer gemeinsamen Zeile */

.thread-kopf-inhalt {
    flex: 1;
    min-width: 0;
}

.thread-titelzeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.thread-titelzeile .thread-dimensionstitel {
    min-width: 0;
}

.thread-titelzeile .dimension-rechts {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-left: auto;
    flex-shrink: 0;
}

/* Pilotprojekt-Hinweis auf der Startseite */

.pilot-hinweis {
    background: #f0f7ff;
    border: 1px solid #c8dff5;
    border-left: 4px solid #3478b8;
    border-radius: 10px;
    padding: 16px;
    margin: 24px 0;
    text-align: left;
}

.pilot-titel {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #245d91;
    font-size: 16px;
    margin-bottom: 10px;
}

.pilot-hinweis p {
    font-size: 13px;
    line-height: 1.6;
    color: #34465a;
    margin: 0 0 10px;
}

.pilot-hinweis p:last-child {
    margin-bottom: 0;
}

.pilot-hinweis .pilot-datenschutz {
    background: #ffffff;
    border-radius: 7px;
    padding: 12px;
    margin-top: 12px;
    color: #34465a;
}

/* Datenschutzhinweis im THUMBS-Fragebogen */

.datenschutz-hinweis {
    background: #f0f7ff;
    border: 1px solid #c8dff5;
    border-left: 4px solid #3478b8;
    border-radius: 10px;
    padding: 14px 16px;
    margin: 18px 0 24px;
    text-align: left;
}

.datenschutz-hinweis strong {
    display: block;
    color: #245d91;
    font-size: 14px;
    margin-bottom: 6px;
}

.datenschutz-hinweis p {
    font-size: 13px;
    line-height: 1.5;
    color: #34465a;
    margin: 0 0 8px;
}

.datenschutz-hinweis p:last-child {
    margin-bottom: 0;
}

/* Kompakter Datenschutzhinweis in Antwort- und Nachtragsformularen */

.datenschutz-hinweis-klein {
    padding: 10px 12px;
    margin: 10px 0;
    border-left-width: 3px;
}

.datenschutz-hinweis-klein strong {
    font-size: 12px;
    margin-bottom: 4px;
}

.datenschutz-hinweis-klein p {
    font-size: 12px;
    line-height: 1.45;
    margin: 0;
}

/* Informationen und Dokumente */

.dokumente-bereich {
    margin: 20px 0 28px;
    text-align: left;
}

.dokumente-bereich h3 {
    font-size: 16px;
    margin-bottom: 8px;
}

.dokumente-bereich > p {
    font-size: 13px;
    color: #667085;
    line-height: 1.5;
    margin-bottom: 12px;
}

.dokumente-liste {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dokumente-liste a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #245d91;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.2s;
}

.dokumente-liste a:hover {
    background: #eaf3fc;
}

.dokumente-liste a span {
    color: #667085;
    font-size: 11px;
    white-space: nowrap;
}

/* Freiwillige Kontaktmöglichkeit im Einsatz-Thread */

.kontakt-bereich {
    margin: 20px 0 28px;
    padding: 18px;
    border: 1px solid #dce5ee;
    border-radius: 12px;
    background: #f8fafc;
    text-align: left;
}

.kontakt-ueberschrift {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
}

.kontakt-ueberschrift h2 {
    margin: 0;
    font-size: 17px;
}

.kontakt-beschreibung {
    color: #475569;
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 18px;
}

.kontakt-formular {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kontakt-formular > label:not(.kontakt-einwilligung) {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.kontakt-formular > input {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 14px;
}

.kontakt-einwilligung {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 8px;
    cursor: pointer;
}

.kontakt-einwilligung input {
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    margin-top: 2px;
}

.kontakt-einwilligung span {
    font-size: 12px;
    line-height: 1.5;
    color: #475569;
}

.kontakt-datenschutz {
    font-size: 12px;
    line-height: 1.5;
    color: #64748b;
    margin: 4px 0;
}

.kontakt-formular button {
    margin-top: 6px;
}

.kontakt-formular button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Einklappbare Kontaktkarte */

.kontakt-klappkarte {
    margin: 16px 0 26px;
    border: 1px solid #dce5ee;
    border-radius: 12px;
    background: #f8fafc;
    overflow: hidden;
}

.kontakt-klappkopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    list-style: none;
}

.kontakt-klappkopf::-webkit-details-marker {
    display: none;
}

.kontakt-klapptitel {
    font-size: 14px;
    font-weight: 600;
    color: #334155;
}

.kontakt-kopfrechts {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.kontakt-anzahl {
    font-size: 12px;
    color: #64748b;
}

.kontakt-pfeil {
    font-size: 20px;
    color: #64748b;
    transition: transform 0.2s;
}

.kontakt-klappkarte[open] .kontakt-pfeil {
    transform: rotate(180deg);
}

.kontakt-klappinhalt {
    padding: 0 16px 18px;
    border-top: 1px solid #e2e8f0;
}

.kontakt-klappinhalt h3 {
    font-size: 14px;
    margin: 18px 0 10px;
}

.kontakt-leer {
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
}

.kontakt-trennlinie {
    border-top: 1px solid #e2e8f0;
    margin-top: 20px;
}

.kontakt-formular select {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: white;
    color: #334155;
    font-size: 14px;
}

.kontakt-klappkopf:focus-visible {
    outline: 2px solid #3478b8;
    outline-offset: -2px;
}

/* Freigegebene Kontakte */

.kontakt-liste {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kontakt-eintrag {
    padding: 12px 14px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
}

.kontakt-eintrag-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
}

.kontakt-kuerzel {
    padding: 4px 9px;
    background: #eaf3fc;
    color: #245d91;
    border-radius: 6px;
    font-size: 11px;
    white-space: nowrap;
}

.kontakt-eintrag-angabe {
    margin-top: 9px;
    font-size: 13px;
    color: #475569;
    overflow-wrap: anywhere;
}

.kontakt-eigen {
    display: inline-block;
    margin-top: 8px;
    font-size: 11px;
    color: #64748b;
}

.kontakt-widerruf-formular {
    margin-top: 12px;
}

.kontakt-widerruf-button {
    width: 100%;
    background: #fff1f2;
    color: #be123c;
    border: 1px solid #fecdd3;
}

.kontakt-widerruf-button:hover {
    background: #ffe4e6;
}

/* Kontaktangaben über Stiftsymbol bearbeiten */

.kontakt-bearbeiten-klappkarte {
    margin-top: 14px;
    border: 1px solid #dce5ee;
    border-radius: 9px;
    background: white;
    overflow: hidden;
}

.kontakt-bearbeiten-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    list-style: none;
}

.kontakt-bearbeiten-kopf::-webkit-details-marker {
    display: none;
}

.kontakt-bearbeiten-titel {
    font-size: 13px;
    font-weight: 600;
    color: #245d91;
}

.kontakt-bearbeiten-pfeil {
    font-size: 18px;
    color: #64748b;
    transition: transform 0.2s;
}

.kontakt-bearbeiten-klappkarte[open]
.kontakt-bearbeiten-pfeil {
    transform: rotate(180deg);
}

.kontakt-bearbeiten-inhalt {
    padding: 0 14px 16px;
    border-top: 1px solid #e2e8f0;
}

.kontakt-bearbeiten-kopf:hover {
    background: #f1f7fd;
}

.kontakt-bearbeiten-kopf:focus-visible {
    outline: 2px solid #3478b8;
    outline-offset: -2px;
}

/* Organisationsfarben der Kontaktkarten */

.kontakt-eintrag.kontakt-luftrettung {
    background: #fff3d6;
    border-color: #e8c46d;
    color: #805900;
}

.kontakt-eintrag.kontakt-bodenrettung {
    background: #e5f5e9;
    border-color: #8dcea0;
    color: #206c39;
}

.kontakt-eintrag.kontakt-feuerwehr {
    background: #fce8e8;
    border-color: #e6a0a0;
    color: #a12c2c;
}

.kontakt-eintrag.kontakt-sonstiges {
    background: #e7f0ff;
    border-color: #9bbce8;
    color: #245d91;
}

/* Kontaktangaben übernehmen die Organisationsfarbe */

.kontakt-eintrag .kontakt-eintrag-angabe,
.kontakt-eintrag .kontakt-eigen {
    color: inherit;
}

/* Qualifikationskürzel passend zur Karte */

.kontakt-eintrag .kontakt-kuerzel {
    background: rgba(255, 255, 255, 0.65);
    color: inherit;
    border: 1px solid currentColor;
}



/* Einsatzmonat: Darstellung auf iPhone und anderen Smartphones */
#einsatzmonat {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}