/*
 * Swiss Immoo Mieterportal – Einstiegsseite [swiss_immoo_portal].
 *
 * Baut auf sip-portal.css auf und wird immer NACH diesem geladen: Farben,
 * Karten, Knöpfe und Abstände kommen von dort. Hier steht nur, was die
 * Einstiegsseite zusätzlich braucht — die Kontakt- und Notfallzeilen.
 *
 * Keine eigenen Farben ausserhalb der bereits gesetzten Variablen, damit ein
 * späterer Anstrich an einer Stelle genügt.
 */

.sip-landing .sip-card + .sip-card {
    margin-top: 20px;
}

/* Die Schadenmeldung ist der Zweck der Seite und darf das auch zeigen. */
.sip-card--primary {
    border-top: 3px solid var(--sip-blue);
}

.sip-card--primary .sip-actions {
    margin: 22px 0 0;
}

/* Drei ruhige Tatsachen unter dem Knopf, kein Fliesstext. */
.sip-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.sip-facts li {
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--sip-soft);
    color: var(--sip-muted);
    font-size: 13px;
    font-weight: 600;
}

/* Kontaktwege: Bezeichnung, Wert, erklärender Nachsatz. */
.sip-kontakt,
.sip-notfall {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sip-kontakt > li {
    padding: 16px 0;
    border-top: 1px solid var(--sip-line);
}

.sip-kontakt > li:first-child {
    border-top: 0;
    padding-top: 4px;
}

.sip-kontakt-label {
    display: block;
    margin-bottom: 4px;
    color: var(--sip-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/*
 * Das Gewerk ist hier keine Rubrik, sondern die Sache selbst — «Heizung und
 * Warmwasser» ist das, wonach jemand sucht. Deshalb in normaler Schreibweise
 * und in Textfarbe statt als kleingesperrte Grossbuchstaben: Die brächen bei
 * dieser Länge in zwei Zeilen um und läsen sich schlechter.
 */
.sip-notfall-label {
    display: block;
    margin-bottom: 2px;
    color: var(--sip-ink);
    font-size: 15px;
    font-weight: 650;
}

.sip-kontakt a {
    color: var(--sip-blue);
    font-size: 19px;
    font-weight: 650;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.sip-kontakt a:hover,
.sip-kontakt a:focus {
    color: var(--sip-blue-dark);
    text-decoration: underline;
}

.sip-kontakt small {
    display: block;
    margin-top: 6px;
    color: var(--sip-muted);
    font-size: 14px;
}

/* Notfälle: eine Zeile je Gewerk, auf dem Handy untereinander. */
.sip-notfall > li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 0;
    border-top: 1px solid var(--sip-line);
}

.sip-notfall > li:first-child {
    border-top: 0;
}

.sip-notfall-firma {
    color: var(--sip-muted);
    font-size: 14px;
}

.sip-notfall-tel {
    color: var(--sip-blue);
    font-size: 19px;
    font-weight: 650;
    text-decoration: none;
    letter-spacing: .01em;
}

.sip-notfall-tel:hover,
.sip-notfall-tel:focus {
    color: var(--sip-blue-dark);
    text-decoration: underline;
}

/*
 * «wird ergänzt» statt einer erfundenen Nummer. Bewusst zurückhaltend: Es soll
 * aussehen wie eine Zeile, die noch kommt — nicht wie ein Fehler.
 */
.sip-offen {
    color: var(--sip-muted);
    font-size: 15px;
    font-style: normal;
}

.sip-offen::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 1px;
    margin: 0 8px 5px 0;
    background: var(--sip-line);
}

.sip-card--notfall .sip-alert a {
    color: inherit;
    font-weight: 700;
}

/* Wegweiser: was gehört wohin. */
.sip-wegweiser {
    margin: 0;
}

.sip-wegweiser dt {
    margin-top: 18px;
    color: var(--sip-ink);
    font-size: 15px;
    font-weight: 700;
}

.sip-wegweiser dt:first-child {
    margin-top: 0;
}

.sip-wegweiser dd {
    margin: 4px 0 0;
    color: var(--sip-muted);
    font-size: 15px;
}

/*
 * Hinweis nur für angemeldete Verwalter. Er wird serverseitig gar nicht erst
 * ausgegeben, wenn niemand angemeldet ist — dieses Stilblatt ist die zweite
 * Sicherung, keine erste.
 */
.sip-admin-hint {
    margin: 16px 0 0;
    padding: 10px 14px;
    border: 1px dashed #d0a745;
    border-radius: 10px;
    background: #fffaef;
    color: #6b5015;
    font-size: 13px;
}

.sip-admin-hint a {
    color: #6b5015;
    font-weight: 700;
}

.sip-admin-hint span {
    display: block;
    margin-top: 2px;
    opacity: .75;
    font-size: 12px;
}

@media (min-width: 620px) {
    .sip-notfall > li {
        flex-direction: row;
        align-items: baseline;
        gap: 14px;
    }

    .sip-notfall-label {
        flex: 0 0 215px;
        margin-bottom: 0;
    }

    .sip-notfall-firma {
        flex: 1 1 auto;
    }
}

/* Auf Papier bleibt vom Portal nur das Nötige. */
@media print {
    .sip-admin-hint,
    .sip-facts {
        display: none;
    }

    .sip-card {
        box-shadow: none;
        break-inside: avoid;
    }
}